@corva/ui 0.65.0-0 → 0.65.0-1-test

package/components/ColorPicker/ColorPicker.js

@@ -1 +1,232 @@
-import{__assign as o}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as a}from"react";import i from"prop-types";import{withStyles as l,InputLabel as c,Tooltip as s,IconButton as p,Popover as b}from"@material-ui/core";import{ColorLens as g}from"@material-ui/icons";import u from"chroma-js";import m from"classnames";import h from"validate-color";import d from"./PaletteChromePicker/PaletteChromePicker.js";var f={rgba:function(o){return"rgba(".concat(o.rgb.r,", ").concat(o.rgb.g,", ").concat(o.rgb.b,", ").concat(o.rgb.a,")")},rgb:function(o){return"rgb(".concat(o.rgb.r,", ").concat(o.rgb.g,", ").concat(o.rgb.b,")")},hex:function(o){return o.hex},rgba_rgb:function(o){return 1===o.rgb.a?f.rgb(o):f.rgba(o)},rgba_hex:function(o){return 1===o.rgb.a?f.hex(o):f.rgba(o)}},v=function(i){var l,d,v,x=i.label,C=i.value,L=i.converter,P=i.onChange,k=i.buttonClassName,T=i.popoverAnchorOrigin,O=i.popoverTransformOrigin,y=i.labelPosition,R=i.hideLabel,z=i.pickerComponent,S=i.classes,I=i.lensColor,N=i.enableTransparencyPalette,j=i["data-testid"],w=i.tooltipProps,B=t(null),D=B[0],_=B[1],q=t("#03BCD4"),A=q[0],F=q[1],E=n();a((function(){var o=null==C?void 0:C.trim();o&&h(o)?F(o):console.error("The color value(".concat(C,") is not valid, please check it."))}),[C]);return e("div",o({className:m(S.root,(l={},l[S.topLabelRoot]="top"===y,l[S.rightLabelRoot]="right"===y,l))},{children:[!R&&r(c,o({className:m((d={},d[S.topLabel]="top"===y,d[S.rightLabel]="right"===y,d)),shrink:!0},{children:x})),r(s,o({title:w.title},w,{children:r(p,o({"data-testid":"".concat(j,"_icon_").concat(x),className:m(S.button,k,(v={},v[S.buttonTransparrent]=0===u(A).alpha(),v)),disableRipple:!0,style:{backgroundColor:A,color:I},onClick:function(o){_(o.currentTarget)}},{children:r(g,{fontSize:"small",className:S.colorLensIcon})}))})),r(b,o({id:"colors-popper",action:E,open:Boolean(D),anchorEl:D,onClose:function(){_(null)},anchorOrigin:T,transformOrigin:O},{children:r(z,{color:A,onChange:function(o){var e=f[L](o);F(e),P(e)},onSizeChange:function(){E.current&&E.current.updatePosition()},enableTransparencyPalette:N})}))]}))},x=i.shape({vertical:i.oneOfType([i.oneOf(["top","center","bottom"]),i.number]),horizontal:i.oneOfType([i.oneOf(["left","center","right"]),i.number])}),C={buttonClassName:i.string,label:i.string,value:i.string.isRequired,onChange:i.func.isRequired,converter:i.oneOf(Object.keys(f)),classes:i.shape({button:i.string.isRequired,root:i.string,topLabelRoot:i.string,rightLabelRoot:i.string,topLabel:i.string,rightLabel:i.string,buttonTransparrent:i.string,colorLensIcon:i.string}).isRequired,pickerComponent:i.elementType,labelPosition:i.oneOf(["top","right"]),popoverAnchorOrigin:x,popoverTransformOrigin:x,tooltipProps:i.shape({title:i.string}),hideLabel:i.bool,lensColor:i.string,enableTransparencyPalette:i.bool,"data-testid":i.string};v.propTypes=C,v.defaultProps={label:"Color",buttonClassName:null,converter:"rgba_hex",pickerComponent:d,hideLabel:!1,popoverAnchorOrigin:{vertical:"bottom",horizontal:"left"},popoverTransformOrigin:{vertical:"top",horizontal:"left"},tooltipProps:{title:"Change color"},labelPosition:"top",lensColor:"#fff",enableTransparencyPalette:!1,"data-testid":"ColorPicker"};var L=l({root:{position:"relative",display:"flex"},topLabelRoot:{flexDirection:"column"},rightLabelRoot:{flexDirection:"row-reverse",justifyContent:"flex-end",alignItems:"center"},button:{width:"36px",height:"24px",boxShadow:"0px 3px 6px rgba(0, 0, 0, 0.161)",borderRadius:"5px"},buttonTransparrent:{position:"relative",backgroundImage:"url(".concat("/static/media/39f55985e0da1489ad22264208b0493d.svg",")"),backgroundSize:"cover",backgroundPosition:"center","&::before":{content:'""',position:"absolute",display:"block",width:"100%",height:"3px",background:"#FF0000",transform:"rotate(148deg)",borderRadius:"2px"}},colorLensIcon:{position:"relative",zIndex:2},popper:{zIndex:1500},topLabel:{marginBottom:"8px",fontSize:"15px",lineHeight:"17px",letterSpacing:"0.4px",color:"#BDBDBD",whiteSpace:"nowrap"},rightLabel:{marginLeft:"8px",fontSize:"16px"}})(v);export{L as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, InputLabel, Tooltip, IconButton, Popover } from '@material-ui/core';
+import { ColorLens } from '@material-ui/icons';
+import chroma from 'chroma-js';
+import classNames from 'classnames';
+import validateColor from 'validate-color';
+import PaletteChromePicker from './PaletteChromePicker/PaletteChromePicker.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Checkboard = "/static/media/39f55985e0da1489ad22264208b0493d.svg";
+var DEFAULT_COLOR = '#03BCD4';
+var converters = {
+  rgba: function rgba(c) {
+    return "rgba(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ", ").concat(c.rgb.a, ")");
+  },
+  rgb: function rgb(c) {
+    return "rgb(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ")");
+  },
+  hex: function hex(c) {
+    return c.hex;
+  },
+  rgba_rgb: function rgba_rgb(c) {
+    return c.rgb.a === 1 ? converters.rgb(c) : converters.rgba(c);
+  },
+  rgba_hex: function rgba_hex(c) {
+    return c.rgb.a === 1 ? converters.hex(c) : converters.rgba(c);
+  }
+};
+var ColorPicker = function ColorPicker(_ref) {
+  var _classNames, _classNames2;
+  var label = _ref.label,
+    value = _ref.value,
+    converter = _ref.converter,
+    onChange = _ref.onChange,
+    buttonClassName = _ref.buttonClassName,
+    popoverAnchorOrigin = _ref.popoverAnchorOrigin,
+    popoverTransformOrigin = _ref.popoverTransformOrigin,
+    labelPosition = _ref.labelPosition,
+    hideLabel = _ref.hideLabel,
+    PickerComponent = _ref.pickerComponent,
+    classes = _ref.classes,
+    lensColor = _ref.lensColor,
+    enableTransparencyPalette = _ref.enableTransparencyPalette,
+    PAGE_NAME = _ref['data-testid'],
+    tooltipProps = _ref.tooltipProps;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var _useState3 = useState(DEFAULT_COLOR),
+    _useState4 = _slicedToArray(_useState3, 2),
+    color = _useState4[0],
+    setColor = _useState4[1];
+  var popperInstanceRef = useRef();
+  useEffect(function () {
+    var newColor = value === null || value === void 0 ? void 0 : value.trim();
+    if (newColor && validateColor(newColor)) setColor(newColor);else console.error("The color value(".concat(value, ") is not valid, please check it."));
+  }, [value]);
+  var handleOpen = function handleOpen(e) {
+    setAnchorEl(e.currentTarget);
+  };
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+  var handleChange = function handleChange(nextColor) {
+    var convertedColor = converters[converter](nextColor);
+    setColor(convertedColor);
+    onChange(convertedColor);
+  };
+  var updatePopperPosition = function updatePopperPosition() {
+    if (popperInstanceRef.current) {
+      popperInstanceRef.current.updatePosition();
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(classes.root, (_classNames = {}, _defineProperty(_classNames, classes.topLabelRoot, labelPosition === 'top'), _defineProperty(_classNames, classes.rightLabelRoot, labelPosition === 'right'), _classNames)),
+    children: [!hideLabel && /*#__PURE__*/jsx(InputLabel, {
+      className: classNames((_classNames2 = {}, _defineProperty(_classNames2, classes.topLabel, labelPosition === 'top'), _defineProperty(_classNames2, classes.rightLabel, labelPosition === 'right'), _classNames2)),
+      shrink: true,
+      children: label
+    }), /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({
+      title: tooltipProps.title
+    }, tooltipProps), {}, {
+      children: /*#__PURE__*/jsx(IconButton, {
+        "data-testid": "".concat(PAGE_NAME, "_icon_").concat(label),
+        className: classNames(classes.button, buttonClassName, _defineProperty({}, classes.buttonTransparrent, chroma(color).alpha() === 0)),
+        disableRipple: true,
+        style: {
+          backgroundColor: color,
+          color: lensColor
+        },
+        onClick: handleOpen,
+        children: /*#__PURE__*/jsx(ColorLens, {
+          fontSize: "small",
+          className: classes.colorLensIcon
+        })
+      })
+    })), /*#__PURE__*/jsx(Popover, {
+      id: "colors-popper",
+      action: popperInstanceRef,
+      open: Boolean(anchorEl),
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: popoverAnchorOrigin,
+      transformOrigin: popoverTransformOrigin,
+      children: /*#__PURE__*/jsx(PickerComponent, {
+        color: color,
+        onChange: handleChange,
+        onSizeChange: updatePopperPosition,
+        enableTransparencyPalette: enableTransparencyPalette
+      })
+    })]
+  });
+};
+var popoverOriginPropType = PropTypes.shape({
+  vertical: PropTypes.oneOfType([PropTypes.oneOf(['top', 'center', 'bottom']), PropTypes.number]),
+  horizontal: PropTypes.oneOfType([PropTypes.oneOf(['left', 'center', 'right']), PropTypes.number])
+});
+var colorPickerPropTypes = {
+  buttonClassName: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  converter: PropTypes.oneOf(Object.keys(converters)),
+  classes: PropTypes.shape({
+    button: PropTypes.string.isRequired,
+    root: PropTypes.string,
+    topLabelRoot: PropTypes.string,
+    rightLabelRoot: PropTypes.string,
+    topLabel: PropTypes.string,
+    rightLabel: PropTypes.string,
+    buttonTransparrent: PropTypes.string,
+    colorLensIcon: PropTypes.string
+  }).isRequired,
+  pickerComponent: PropTypes.elementType,
+  labelPosition: PropTypes.oneOf(['top', 'right']),
+  popoverAnchorOrigin: popoverOriginPropType,
+  popoverTransformOrigin: popoverOriginPropType,
+  tooltipProps: PropTypes.shape({
+    title: PropTypes.string
+  }),
+  hideLabel: PropTypes.bool,
+  lensColor: PropTypes.string,
+  enableTransparencyPalette: PropTypes.bool,
+  'data-testid': PropTypes.string
+};
+ColorPicker.propTypes = colorPickerPropTypes;
+ColorPicker.defaultProps = {
+  label: 'Color',
+  buttonClassName: null,
+  converter: 'rgba_hex',
+  pickerComponent: PaletteChromePicker,
+  hideLabel: false,
+  popoverAnchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'left'
+  },
+  popoverTransformOrigin: {
+    vertical: 'top',
+    horizontal: 'left'
+  },
+  tooltipProps: {
+    title: 'Change color'
+  },
+  labelPosition: 'top',
+  lensColor: '#fff',
+  enableTransparencyPalette: false,
+  'data-testid': 'ColorPicker'
+};
+var ColorPicker$1 = withStyles({
+  root: {
+    position: 'relative',
+    display: 'flex'
+  },
+  topLabelRoot: {
+    flexDirection: 'column'
+  },
+  rightLabelRoot: {
+    flexDirection: 'row-reverse',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  button: {
+    width: '36px',
+    height: '24px',
+    boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.161)',
+    borderRadius: '5px'
+  },
+  buttonTransparrent: {
+    position: 'relative',
+    backgroundImage: "url(".concat(Checkboard, ")"),
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      display: 'block',
+      width: '100%',
+      height: '3px',
+      background: '#FF0000',
+      transform: 'rotate(148deg)',
+      borderRadius: '2px'
+    }
+  },
+  colorLensIcon: {
+    position: 'relative',
+    zIndex: 2
+  },
+  popper: {
+    zIndex: 1500
+  },
+  topLabel: {
+    marginBottom: '8px',
+    fontSize: '15px',
+    lineHeight: '17px',
+    letterSpacing: '0.4px',
+    color: '#BDBDBD',
+    whiteSpace: 'nowrap'
+  },
+  rightLabel: {
+    marginLeft: '8px',
+    fontSize: '16px'
+  }
+})(ColorPicker);
+
+export { ColorPicker$1 as default };
+//# sourceMappingURL=ColorPicker.js.map

package/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useState, useEffect, useRef, FC } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  withStyles,\n  Popover,\n  InputLabel,\n  IconButton,\n  PopoverActions,\n  PopoverOrigin,\n  TooltipProps,\n  Tooltip,\n} from '@material-ui/core';\nimport { ColorLens as ColorLensIcon } from '@material-ui/icons';\nimport chroma from 'chroma-js';\nimport classNames from 'classnames';\nimport validateColor from 'validate-color';\n\nimport PaletteChromePicker from './PaletteChromePicker';\n\nimport Checkboard from '~/assets/checkboard.svg';\n\nconst DEFAULT_COLOR = '#03BCD4';\n\nconst converters = {\n  rgba: c => `rgba(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b}, ${c.rgb.a})`,\n  rgb: c => `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`,\n  hex: c => c.hex,\n  rgba_rgb: c => (c.rgb.a === 1 ? converters.rgb(c) : converters.rgba(c)),\n  rgba_hex: c => (c.rgb.a === 1 ? converters.hex(c) : converters.rgba(c)),\n};\n\ninterface ColorPickerProps extends PropTypes.InferProps<typeof colorPickerPropTypes> {\n  popoverAnchorOrigin?: PopoverOrigin;\n  popoverTransformOrigin?: PopoverOrigin;\n}\n\nconst ColorPicker = ({\n  label,\n  value,\n  converter,\n  onChange,\n  buttonClassName,\n  popoverAnchorOrigin,\n  popoverTransformOrigin,\n  labelPosition,\n  hideLabel,\n  pickerComponent: PickerComponent,\n  classes,\n  lensColor,\n  enableTransparencyPalette,\n  'data-testid': PAGE_NAME,\n  tooltipProps,\n}: ColorPickerProps): JSX.Element => {\n  const [anchorEl, setAnchorEl] = useState(null);\n  const [color, setColor] = useState(DEFAULT_COLOR);\n  const popperInstanceRef = useRef<PopoverActions>();\n\n  useEffect(() => {\n    const newColor = value?.trim();\n    if (newColor && validateColor(newColor)) setColor(newColor);\n    else console.error(`The color value(${value}) is not valid, please check it.`);\n  }, [value]);\n\n  const handleOpen = e => {\n    setAnchorEl(e.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const handleChange = nextColor => {\n    const convertedColor = converters[converter](nextColor);\n    setColor(convertedColor);\n    onChange(convertedColor);\n  };\n\n  const updatePopperPosition = () => {\n    if (popperInstanceRef.current) {\n      popperInstanceRef.current.updatePosition();\n    }\n  };\n\n  return (\n    <div\n      className={classNames(classes.root, {\n        [classes.topLabelRoot]: labelPosition === 'top',\n        [classes.rightLabelRoot]: labelPosition === 'right',\n      })}\n    >\n      {!hideLabel && (\n        <InputLabel\n          className={classNames({\n            [classes.topLabel]: labelPosition === 'top',\n            [classes.rightLabel]: labelPosition === 'right',\n          })}\n          shrink\n        >\n          {label}\n        </InputLabel>\n      )}\n      <Tooltip title={tooltipProps.title} {...tooltipProps as TooltipProps}>\n        <IconButton\n          data-testid={`${PAGE_NAME}_icon_${label}`}\n          className={classNames(classes.button, buttonClassName, {\n            [classes.buttonTransparrent]: chroma(color).alpha() === 0,\n          })}\n          disableRipple\n          style={{ backgroundColor: color, color: lensColor }}\n          onClick={handleOpen}\n        >\n          <ColorLensIcon fontSize=\"small\" className={classes.colorLensIcon} />\n        </IconButton>\n      </Tooltip>\n      <Popover\n        id=\"colors-popper\"\n        action={popperInstanceRef}\n        open={Boolean(anchorEl)}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        anchorOrigin={popoverAnchorOrigin}\n        transformOrigin={popoverTransformOrigin}\n      >\n        <PickerComponent\n          color={color}\n          onChange={handleChange}\n          onSizeChange={updatePopperPosition}\n          enableTransparencyPalette={enableTransparencyPalette}\n        />\n      </Popover>\n    </div>\n  );\n};\n\nconst popoverOriginPropType = PropTypes.shape({\n  vertical: PropTypes.oneOfType([PropTypes.oneOf(['top', 'center', 'bottom']), PropTypes.number]),\n  horizontal: PropTypes.oneOfType([PropTypes.oneOf(['left', 'center', 'right']), PropTypes.number]),\n});\nconst colorPickerPropTypes = {\n  buttonClassName: PropTypes.string,\n\n  label: PropTypes.string,\n  value: PropTypes.string.isRequired,\n  onChange: PropTypes.func.isRequired,\n  converter: PropTypes.oneOf(Object.keys(converters)),\n\n  classes: PropTypes.shape({\n    button: PropTypes.string.isRequired,\n    root: PropTypes.string,\n    topLabelRoot: PropTypes.string,\n    rightLabelRoot: PropTypes.string,\n    topLabel: PropTypes.string,\n    rightLabel: PropTypes.string,\n    buttonTransparrent: PropTypes.string,\n    colorLensIcon: PropTypes.string,\n  }).isRequired,\n  pickerComponent: PropTypes.elementType,\n\n  labelPosition: PropTypes.oneOf(['top', 'right']),\n  popoverAnchorOrigin: popoverOriginPropType,\n  popoverTransformOrigin: popoverOriginPropType,\n\n  tooltipProps: PropTypes.shape({ title: PropTypes.string }),\n\n  hideLabel: PropTypes.bool,\n  lensColor: PropTypes.string,\n\n  enableTransparencyPalette: PropTypes.bool,\n  'data-testid': PropTypes.string,\n};\n\nColorPicker.propTypes = colorPickerPropTypes;\n\nColorPicker.defaultProps = {\n  label: 'Color',\n  buttonClassName: null,\n  converter: 'rgba_hex',\n  pickerComponent: PaletteChromePicker,\n  hideLabel: false,\n  popoverAnchorOrigin: {\n    vertical: 'bottom',\n    horizontal: 'left',\n  },\n  popoverTransformOrigin: {\n    vertical: 'top',\n    horizontal: 'left',\n  },\n\n  tooltipProps: { title: 'Change color' },\n\n  labelPosition: 'top',\n  lensColor: '#fff',\n  enableTransparencyPalette: false,\n  'data-testid': 'ColorPicker',\n};\n\nexport default withStyles({\n  root: {\n    position: 'relative',\n    display: 'flex',\n  },\n  topLabelRoot: {\n    flexDirection: 'column',\n  },\n  rightLabelRoot: {\n    flexDirection: 'row-reverse',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n  },\n  button: {\n    width: '36px',\n    height: '24px',\n    boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.161)',\n    borderRadius: '5px',\n  },\n  buttonTransparrent: {\n    position: 'relative',\n    backgroundImage: `url(${Checkboard})`,\n    backgroundSize: 'cover',\n    backgroundPosition: 'center',\n\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      display: 'block',\n      width: '100%',\n      height: '3px',\n      background: '#FF0000',\n      transform: 'rotate(148deg)',\n      borderRadius: '2px',\n    },\n  },\n  colorLensIcon: {\n    position: 'relative',\n    zIndex: 2,\n  },\n  popper: {\n    zIndex: 1500,\n  },\n  topLabel: {\n    marginBottom: '8px',\n    fontSize: '15px',\n    lineHeight: '17px',\n    letterSpacing: '0.4px',\n    color: '#BDBDBD',\n    whiteSpace: 'nowrap',\n  },\n  rightLabel: {\n    marginLeft: '8px',\n    fontSize: '16px',\n  },\n})(ColorPicker as FC);\n"],"names":["DEFAULT_COLOR","converters","rgba","c","rgb","r","g","b","a","hex","rgba_rgb","rgba_hex","ColorPicker","label","value","converter","onChange","buttonClassName","popoverAnchorOrigin","popoverTransformOrigin","labelPosition","hideLabel","PickerComponent","pickerComponent","classes","lensColor","enableTransparencyPalette","PAGE_NAME","tooltipProps","useState","anchorEl","setAnchorEl","color","setColor","popperInstanceRef","useRef","useEffect","newColor","trim","validateColor","console","error","handleOpen","e","currentTarget","handleClose","handleChange","nextColor","convertedColor","updatePopperPosition","current","updatePosition","_jsxs","classNames","root","topLabelRoot","rightLabelRoot","_jsx","topLabel","rightLabel","title","button","buttonTransparrent","chroma","alpha","backgroundColor","ColorLensIcon","colorLensIcon","Boolean","popoverOriginPropType","PropTypes","shape","vertical","oneOfType","oneOf","number","horizontal","colorPickerPropTypes","string","isRequired","func","Object","keys","elementType","bool","propTypes","defaultProps","PaletteChromePicker","withStyles","position","display","flexDirection","justifyContent","alignItems","width","height","boxShadow","borderRadius","backgroundImage","Checkboard","backgroundSize","backgroundPosition","content","background","transform","zIndex","popper","marginBottom","fontSize","lineHeight","letterSpacing","whiteSpace","marginLeft"],"mappings":"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"}

package/components/ColorPicker/PaletteChromePicker/ColorSquare/ColorSquare.js

@@ -1 +1,82 @@
-import e from"@babel/runtime/helpers/defineProperty";import r from"prop-types";import o from"@material-ui/icons/CheckRounded";import{makeStyles as i}from"@material-ui/core";import t from"classnames";import a from"chroma-js";import{jsx as n}from"react/jsx-runtime";var c=i({container:{position:"relative",cursor:"pointer",width:"16px",height:"16px",borderRadius:"2px",display:"flex",justifyContent:"center",alignItems:"center","&:hover":{border:"1px solid white"}},containerSelected:{border:"1px solid white","& $squareCheck":{visibility:"visible"}},transparentContainer:{position:"relative",border:"1px solid #C4C4C4;",backgroundImage:"url(".concat("/static/media/39f55985e0da1489ad22264208b0493d.svg",")"),backgroundSize:"cover",backgroundPosition:"center","&::before":{content:'""',position:"absolute",display:"block",width:"100%",height:"2px",background:"#FF0000",transform:"rotate(135deg)",borderRadius:"2px"}},squareCheck:{width:"16px",height:"16px",color:"white",visibility:"hidden",zIndex:2}});function s(r){var i,s=r.color,d=r.isSelected,l=r.onClick,p=c();return n("div",{"data-testid":"".concat("ColorSquare","_color_").concat(s,"_selected_").concat(d),className:t(p.container,(i={},e(i,p.transparentContainer,0===a(s).alpha()),e(i,p.containerSelected,d),i)),style:{backgroundColor:s},onClick:l,children:n(o,{fontSize:"small",className:p.squareCheck})})}s.propTypes={color:r.string.isRequired,isSelected:r.bool.isRequired,onClick:r.func.isRequired};export{s as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import PropTypes from 'prop-types';
+import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import { makeStyles } from '@material-ui/core';
+import classNames from 'classnames';
+import chroma from 'chroma-js';
+import { jsx } from 'react/jsx-runtime';
+
+var Checkboard = "/static/media/39f55985e0da1489ad22264208b0493d.svg";
+var PAGE_NAME = 'ColorSquare';
+var useStyles = makeStyles({
+  container: {
+    position: 'relative',
+    cursor: 'pointer',
+    width: '16px',
+    height: '16px',
+    borderRadius: '2px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '&:hover': {
+      border: '1px solid white'
+    }
+  },
+  containerSelected: {
+    border: '1px solid white',
+    '& $squareCheck': {
+      visibility: 'visible'
+    }
+  },
+  transparentContainer: {
+    position: 'relative',
+    border: '1px solid #C4C4C4;',
+    backgroundImage: "url(".concat(Checkboard, ")"),
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      display: 'block',
+      width: '100%',
+      height: '2px',
+      background: '#FF0000',
+      transform: 'rotate(135deg)',
+      borderRadius: '2px'
+    }
+  },
+  squareCheck: {
+    width: '16px',
+    height: '16px',
+    color: 'white',
+    visibility: 'hidden',
+    zIndex: 2
+  }
+});
+function ColorSquare(_ref) {
+  var _classNames;
+  var color = _ref.color,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick;
+  var classes = useStyles();
+  return /*#__PURE__*/jsx("div", {
+    "data-testid": "".concat(PAGE_NAME, "_color_").concat(color, "_selected_").concat(isSelected),
+    className: classNames(classes.container, (_classNames = {}, _defineProperty(_classNames, classes.transparentContainer, chroma(color).alpha() === 0), _defineProperty(_classNames, classes.containerSelected, isSelected), _classNames)),
+    style: {
+      backgroundColor: color
+    },
+    onClick: onClick,
+    children: /*#__PURE__*/jsx(CheckRoundedIcon, {
+      fontSize: "small",
+      className: classes.squareCheck
+    })
+  });
+}
+ColorSquare.propTypes = {
+  color: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
+export { ColorSquare as default };
+//# sourceMappingURL=ColorSquare.js.map

package/components/ColorPicker/PaletteChromePicker/ColorSquare/ColorSquare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSquare.js","sources":["../../../../../src/components/ColorPicker/PaletteChromePicker/ColorSquare/ColorSquare.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport CheckRoundedIcon from '@material-ui/icons/CheckRounded';\nimport { makeStyles } from '@material-ui/core';\nimport classNames from 'classnames';\nimport chroma from 'chroma-js';\n\nimport Checkboard from '~/assets/checkboard.svg';\n\nconst PAGE_NAME = 'ColorSquare';\n\nconst useStyles = makeStyles({\n  container: {\n    position: 'relative',\n    cursor: 'pointer',\n    width: '16px',\n    height: '16px',\n    borderRadius: '2px',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    '&:hover': {\n      border: '1px solid white',\n    },\n  },\n  containerSelected: {\n    border: '1px solid white',\n    '& $squareCheck': {\n      visibility: 'visible',\n    },\n  },\n  transparentContainer: {\n    position: 'relative',\n    border: '1px solid #C4C4C4;',\n    backgroundImage: `url(${Checkboard})`,\n    backgroundSize: 'cover',\n    backgroundPosition: 'center',\n\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      display: 'block',\n      width: '100%',\n      height: '2px',\n      background: '#FF0000',\n      transform: 'rotate(135deg)',\n      borderRadius: '2px',\n    },\n  },\n  squareCheck: {\n    width: '16px',\n    height: '16px',\n    color: 'white',\n    visibility: 'hidden',\n    zIndex: 2,\n  },\n});\n\nfunction ColorSquare({ color, isSelected, onClick }) {\n  const classes = useStyles();\n\n  return (\n    <div\n      data-testid={`${PAGE_NAME}_color_${color}_selected_${isSelected}`}\n      className={classNames(classes.container, {\n        [classes.transparentContainer]: chroma(color).alpha() === 0,\n        [classes.containerSelected]: isSelected,\n      })}\n      style={{ backgroundColor: color }}\n      onClick={onClick}\n    >\n      <CheckRoundedIcon fontSize=\"small\" className={classes.squareCheck} />\n    </div>\n  );\n}\n\nColorSquare.propTypes = {\n  color: PropTypes.string.isRequired,\n  isSelected: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nexport default ColorSquare;\n"],"names":["PAGE_NAME","useStyles","makeStyles","container","position","cursor","width","height","borderRadius","display","justifyContent","alignItems","border","containerSelected","visibility","transparentContainer","backgroundImage","Checkboard","backgroundSize","backgroundPosition","content","background","transform","squareCheck","color","zIndex","ColorSquare","isSelected","onClick","classes","_jsx","classNames","chroma","alpha","backgroundColor","propTypes","PropTypes","string","isRequired","bool","func"],"mappings":"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"}

package/components/ColorPicker/PaletteChromePicker/Palette/Palette.css.js

@@ -1 +1,8 @@
-import t from'./../../../../ext-esm/style-inject/dist/style-inject.es.js';var e={paletteContainer:"Palette_paletteContainer__S2Z3b"};t(".Palette_paletteContainer__S2Z3b{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,16px);width:232px}");export{e as default};
+import styleInject from './../../../../ext-esm/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Palette_paletteContainer__S2Z3b {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, 16px);\n  gap: 2px;\n  width: 232px;\n}\n";
+var styles = {"paletteContainer":"Palette_paletteContainer__S2Z3b"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Palette.css.js.map

package/components/ColorPicker/PaletteChromePicker/Palette/Palette.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,4DAA+D;AACvF;AACA;AACA;AACA;AACA;AACA;"}

package/components/ColorPicker/PaletteChromePicker/Palette/Palette.js

@@ -1 +1,47 @@
-import r from"prop-types";import{CustomPicker as e}from"react-color";import o from"classnames";import a from"chroma-js";import t from"../ColorSquare/ColorSquare.js";import{paletteColorsWithTransparent as n,paletteColors as s}from"./PaletteConstants.js";import l from"./Palette.css.js";import{jsx as i}from"react/jsx-runtime";var m=function(r,e){var o=a(r).alpha(),t=a(e).alpha();return o?r===e:o===t},c=function(r){var e=r.onChange,a=r.color,c=r.className,p=r.enableTransparencyPalette?n:s;return i("div",{className:o(l.paletteContainer,c),children:p.map((function(r){return i(t,{color:r,isSelected:m(a,r),onClick:function(){e(r)}},r)}))})};c.propTypes={onChange:r.func.isRequired,color:r.string.isRequired,className:r.string,enableTransparencyPalette:r.bool.isRequired},c.defaultProps={className:null};var p=e(c);export{p as default};
+import PropTypes from 'prop-types';
+import { CustomPicker } from 'react-color';
+import classNames from 'classnames';
+import chroma from 'chroma-js';
+import ColorSquare from '../ColorSquare/ColorSquare.js';
+import { paletteColorsWithTransparent, paletteColors } from './PaletteConstants.js';
+import styles from './Palette.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var isSelected = function isSelected(currentColor, predefinedColor) {
+  var currentColorAlpha = chroma(currentColor).alpha();
+  var predefinedColorAlpha = chroma(predefinedColor).alpha();
+  if (!currentColorAlpha) return currentColorAlpha === predefinedColorAlpha;
+  return currentColor === predefinedColor;
+};
+var Palette = function Palette(_ref) {
+  var onChange = _ref.onChange,
+    color = _ref.color,
+    className = _ref.className,
+    enableTransparencyPalette = _ref.enableTransparencyPalette;
+  var colors = enableTransparencyPalette ? paletteColorsWithTransparent : paletteColors;
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(styles.paletteContainer, className),
+    children: colors.map(function (predefinedColor) {
+      return /*#__PURE__*/jsx(ColorSquare, {
+        color: predefinedColor,
+        isSelected: isSelected(color, predefinedColor),
+        onClick: function onClick() {
+          onChange(predefinedColor);
+        }
+      }, predefinedColor);
+    })
+  });
+};
+Palette.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  color: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  enableTransparencyPalette: PropTypes.bool.isRequired
+};
+Palette.defaultProps = {
+  className: null
+};
+var Palette$1 = CustomPicker(Palette);
+
+export { Palette$1 as default };
+//# sourceMappingURL=Palette.js.map

package/components/ColorPicker/PaletteChromePicker/Palette/Palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Palette.js","sources":["../../../../../src/components/ColorPicker/PaletteChromePicker/Palette/Palette.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { CustomPicker } from 'react-color';\nimport classNames from 'classnames';\nimport chroma from 'chroma-js';\n\nimport ColorSquare from '../ColorSquare';\nimport { paletteColors, paletteColorsWithTransparent } from './PaletteConstants';\n\nimport styles from './Palette.css';\n\nconst isSelected = (currentColor, predefinedColor) => {\n  const currentColorAlpha = chroma(currentColor).alpha();\n  const predefinedColorAlpha = chroma(predefinedColor).alpha();\n\n  if (!currentColorAlpha) return currentColorAlpha === predefinedColorAlpha;\n  return currentColor === predefinedColor;\n};\n\nconst Palette = ({ onChange, color, className, enableTransparencyPalette }) => {\n  const colors = enableTransparencyPalette ? paletteColorsWithTransparent : paletteColors;\n\n  return (\n    <div className={classNames(styles.paletteContainer, className)}>\n      {colors.map(predefinedColor => (\n        <ColorSquare\n          key={predefinedColor}\n          color={predefinedColor}\n          isSelected={isSelected(color, predefinedColor)}\n          onClick={() => {\n            onChange(predefinedColor);\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n\nPalette.propTypes = {\n  onChange: PropTypes.func.isRequired,\n  color: PropTypes.string.isRequired,\n  className: PropTypes.string,\n  enableTransparencyPalette: PropTypes.bool.isRequired,\n};\n\nPalette.defaultProps = {\n  className: null,\n};\n\nexport default CustomPicker(Palette);\n"],"names":["isSelected","currentColor","predefinedColor","currentColorAlpha","chroma","alpha","predefinedColorAlpha","Palette","onChange","color","className","enableTransparencyPalette","colors","paletteColorsWithTransparent","paletteColors","_jsx","classNames","styles","paletteContainer","map","propTypes","PropTypes","func","isRequired","string","bool","defaultProps","CustomPicker"],"mappings":";;;;;;;;;AAUA,IAAMA,UAAU,GAAG,SAAbA,UAAU,CAAIC,YAAY,EAAEC,eAAe,EAAK;EACpD,IAAMC,iBAAiB,GAAGC,MAAM,CAACH,YAAY,CAAC,CAACI,KAAK,EAAE,CAAA;EACtD,IAAMC,oBAAoB,GAAGF,MAAM,CAACF,eAAe,CAAC,CAACG,KAAK,EAAE,CAAA;AAE5D,EAAA,IAAI,CAACF,iBAAiB,EAAE,OAAOA,iBAAiB,KAAKG,oBAAoB,CAAA;EACzE,OAAOL,YAAY,KAAKC,eAAe,CAAA;AACzC,CAAC,CAAA;AAED,IAAMK,OAAO,GAAG,SAAVA,OAAO,CAAkE,IAAA,EAAA;EAAA,IAA5DC,QAAQ,QAARA,QAAQ;AAAEC,IAAAA,KAAK,QAALA,KAAK;AAAEC,IAAAA,SAAS,QAATA,SAAS;AAAEC,IAAAA,yBAAyB,QAAzBA,yBAAyB,CAAA;AACtE,EAAA,IAAMC,MAAM,GAAGD,yBAAyB,GAAGE,4BAA4B,GAAGC,aAAa,CAAA;EAEvF,oBACEC,GAAA,CAAA,KAAA,EAAA;IAAK,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,gBAAgB,EAAER,SAAS,CAAE;AAAA,IAAA,QAAA,EAC5DE,MAAM,CAACO,GAAG,CAAC,UAAAjB,eAAe,EAAA;AAAA,MAAA,oBACzBa,IAAC,WAAW,EAAA;AAEV,QAAA,KAAK,EAAEb,eAAgB;AACvB,QAAA,UAAU,EAAEF,UAAU,CAACS,KAAK,EAAEP,eAAe,CAAE;AAC/C,QAAA,OAAO,EAAE,SAAM,OAAA,GAAA;UACbM,QAAQ,CAACN,eAAe,CAAC,CAAA;AAC3B,SAAA;AAAE,OAAA,EALGA,eAAe,CAMpB,CAAA;KACH,CAAA;GACG,CAAA,CAAA;AAEV,CAAC,CAAA;AAEDK,OAAO,CAACa,SAAS,GAAG;AAClBZ,EAAAA,QAAQ,EAAEa,SAAS,CAACC,IAAI,CAACC,UAAU;AACnCd,EAAAA,KAAK,EAAEY,SAAS,CAACG,MAAM,CAACD,UAAU;EAClCb,SAAS,EAAEW,SAAS,CAACG,MAAM;AAC3Bb,EAAAA,yBAAyB,EAAEU,SAAS,CAACI,IAAI,CAACF,UAAAA;AAC5C,CAAC,CAAA;AAEDhB,OAAO,CAACmB,YAAY,GAAG;AACrBhB,EAAAA,SAAS,EAAE,IAAA;AACb,CAAC,CAAA;AAED,gBAAeiB,YAAY,CAACpB,OAAO,CAAC;;;;"}

package/components/ColorPicker/PaletteChromePicker/Palette/PaletteConstants.js

@@ -1 +1,14 @@
-var f=["#c4c4c4","#9b2310","#ac5d09","#a99704","#6f920d","#408e00","#05907b","#028597","#295abb","#4d2fbf","#8a1caa","#921d48","#445f6c","#000000","#eb3f24","#ff8200","#ffe300","#b9ed24","#7eed24","#1edcc1","#00e0ff","#558dfc","#714cff","#cc2afb","#f6377c","#738e9d","#ffffff","#fe8977","#fbb368","#fff17f","#d6ff61","#b9ff81","#78feea","#79efff","#97baff","#ad99fb","#e488ff","#ff87b3","#bbc6cc"],c="#00000000",b=f.map((function(f,c){return 0===c?"#00000000":f}));export{c as TRANSPARENT_HEX,f as paletteColors,b as paletteColorsWithTransparent};
+var paletteColors = [
+// row 1
+'#c4c4c4', '#9b2310', '#ac5d09', '#a99704', '#6f920d', '#408e00', '#05907b', '#028597', '#295abb', '#4d2fbf', '#8a1caa', '#921d48', '#445f6c',
+// row 2
+'#000000', '#eb3f24', '#ff8200', '#ffe300', '#b9ed24', '#7eed24', '#1edcc1', '#00e0ff', '#558dfc', '#714cff', '#cc2afb', '#f6377c', '#738e9d',
+// row 3
+'#ffffff', '#fe8977', '#fbb368', '#fff17f', '#d6ff61', '#b9ff81', '#78feea', '#79efff', '#97baff', '#ad99fb', '#e488ff', '#ff87b3', '#bbc6cc'];
+var TRANSPARENT_HEX = '#00000000';
+var paletteColorsWithTransparent = paletteColors.map(function (color, i) {
+  return i === 0 ? TRANSPARENT_HEX : color;
+});
+
+export { TRANSPARENT_HEX, paletteColors, paletteColorsWithTransparent };
+//# sourceMappingURL=PaletteConstants.js.map

package/components/ColorPicker/PaletteChromePicker/Palette/PaletteConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaletteConstants.js","sources":["../../../../../src/components/ColorPicker/PaletteChromePicker/Palette/PaletteConstants.js"],"sourcesContent":["export const paletteColors = [\n  // row 1\n  '#c4c4c4',\n  '#9b2310',\n  '#ac5d09',\n  '#a99704',\n  '#6f920d',\n  '#408e00',\n  '#05907b',\n  '#028597',\n  '#295abb',\n  '#4d2fbf',\n  '#8a1caa',\n  '#921d48',\n  '#445f6c',\n  // row 2\n  '#000000',\n  '#eb3f24',\n  '#ff8200',\n  '#ffe300',\n  '#b9ed24',\n  '#7eed24',\n  '#1edcc1',\n  '#00e0ff',\n  '#558dfc',\n  '#714cff',\n  '#cc2afb',\n  '#f6377c',\n  '#738e9d',\n  // row 3\n  '#ffffff',\n  '#fe8977',\n  '#fbb368',\n  '#fff17f',\n  '#d6ff61',\n  '#b9ff81',\n  '#78feea',\n  '#79efff',\n  '#97baff',\n  '#ad99fb',\n  '#e488ff',\n  '#ff87b3',\n  '#bbc6cc',\n];\n\nexport const TRANSPARENT_HEX = '#00000000';\n\nexport const paletteColorsWithTransparent = paletteColors.map((color, i) => {\n  return i === 0 ? TRANSPARENT_HEX : color;\n});\n"],"names":["paletteColors","TRANSPARENT_HEX","paletteColorsWithTransparent","map","color","i"],"mappings":"AAAO,IAAMA,aAAa,GAAG;AAC3B;AACA,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS;AACT;AACA,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS;AACT;AACA,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACV;AAEM,IAAMC,eAAe,GAAG,YAAW;AAEnC,IAAMC,4BAA4B,GAAGF,aAAa,CAACG,GAAG,CAAC,UAACC,KAAK,EAAEC,CAAC,EAAK;AAC1E,EAAA,OAAOA,CAAC,KAAK,CAAC,GAAGJ,eAAe,GAAGG,KAAK,CAAA;AAC1C,CAAC;;;;"}