@dreamcommerce/aurora 2.12.1-55 → 2.12.1-57

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-label-input.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var input = require('../../controls/components/input.js');
+var context = require('../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorLabelInput = ({ id, name }) => {
+    const { hex } = React.useContext(context.ColorPickerNewContext);
+    return React__default['default'].createElement(input['default'], { type: "text", id: id, name: name, value: `# ${hex === null || hex === void 0 ? void 0 : hex.toUpperCase()}`, readOnly: true });
+};
+
+exports.ColorLabelInput = ColorLabelInput;
+//# sourceMappingURL=color-label-input.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-label-input.js.map

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

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var index$1 = require('../../button/index.js');
+var index = require('../../dropdown/context/index.js');
+var context = require('../context.js');
+var css_classes = require('../css_classes.js');
+var utilities = require('../utilities.js');
+var main_module = require('../../../css/color_picker_new/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerFooter = () => {
+    const { closeDropdown } = React.useContext(index.DropdownContext);
+    const { color, handleCancel, handleSave } = React.useContext(context.ColorPickerNewContext);
+    const [t] = useTranslation.useTranslation();
+    const handleCancelButton = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
+    };
+    const handleSaveButton = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleSave(utilities.getAllColorTypes(color));
+    };
+    return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerFooter]}` },
+        React__default['default'].createElement(index$1['default'], { size: "small", variant: "outline", onClick: handleCancelButton }, t('cancel')),
+        React__default['default'].createElement(index$1['default'], { size: "small", onClick: handleSaveButton }, t('save'))));
+};
+
+exports.ColorPickerFooter = ColorPickerFooter;
+//# sourceMappingURL=color-picker-footer.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var index = require('../../dropdown/context/index.js');
+var context = require('../context.js');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var icon_close = require('../../../assets/icon_close.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerHeader = () => {
+    const { handleCancel } = React.useContext(context.ColorPickerNewContext);
+    const [t] = useTranslation.useTranslation();
+    const { closeDropdown, isOpen } = React.useContext(index.DropdownContext);
+    const handleCancelButton = () => {
+        closePicker();
+    };
+    const closePicker = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
+    };
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        document.addEventListener('visibilitychange', closePicker);
+        return () => document.removeEventListener('visibilitychange', closePicker);
+    }, [isOpen]);
+    return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHeader]}` },
+        t('Select color'),
+        React__default['default'].createElement("button", { onClick: handleCancelButton, className: `${main_module['default'][css_classes.cssColorPickerCloseIcon]}` },
+            React__default['default'].createElement(icon_close['default'], { size: "m" }))));
+};
+
+exports.ColorPickerHeader = ColorPickerHeader;
+//# sourceMappingURL=color-picker-header.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hex.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utilities = require('@dreamcommerce/utilities');
+var input = require('../../../controls/components/input.js');
+var context = require('../../context.js');
+var utilities$1 = require('../../utilities.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerInputsHex = () => {
+    const { setColor, hex, handleOnChangeAlpha, alphaValue } = React.useContext(context.ColorPickerNewContext);
+    const [value, setValue] = React.useState(hex);
+    const [disable, setDisable] = React.useState(false);
+    const handleOnChange = (event) => {
+        const inputValue = event.target.value.replace('%', '');
+        if (utilities$1.isHexChar(inputValue)) {
+            setValue(inputValue);
+            setColor(inputValue);
+        }
+    };
+    const hexFocus = () => {
+        setDisable(true);
+    };
+    const hexBlur = () => {
+        setDisable(false);
+    };
+    React.useEffect(() => {
+        if (!disable) {
+            setValue(hex);
+        }
+    }, [hex, disable]);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", maxLength: 8, value: value.toUpperCase(), onChange: handleOnChange, onBlur: hexBlur, onFocus: hexFocus }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: utilities.InputUtils.preventTypingLetters })));
+};
+
+exports.ColorPickerInputsHex = ColorPickerInputsHex;
+//# sourceMappingURL=color-picker-inputs-hex.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hex.js.map

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

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-rgba.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utilities = require('@dreamcommerce/utilities');
+var input = require('../../../controls/components/input.js');
+var context = require('../../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerInputsRgba = () => {
+    const { setR, setG, setB, handleOnChangeAlpha, alphaValue, rgbaArr } = React.useContext(context.ColorPickerNewContext);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: rgbaArr[0], onChange: (e) => setR(Number(e.target.value)), onKeyPress: utilities.InputUtils.preventTypingLetters }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: rgbaArr[1], onChange: (e) => setG(Number(e.target.value)), onKeyPress: utilities.InputUtils.preventTypingLetters }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: rgbaArr[2], onChange: (e) => setB(Number(e.target.value)), onKeyPress: utilities.InputUtils.preventTypingLetters }),
+        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: utilities.InputUtils.preventTypingLetters })));
+};
+
+exports.ColorPickerInputsRgba = ColorPickerInputsRgba;
+//# sourceMappingURL=color-picker-inputs-rgba.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-rgba.js.map

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

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var constants = require('../../constants.js');
+var css_classes = require('../../css_classes.js');
+var main_module = require('../../../../css/color_picker_new/main.module.less.js');
+var colorPickerInputsHex = require('./color-picker-inputs-hex.js');
+var colorPickerInputsRgba = require('./color-picker-inputs-rgba.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerInputs = () => {
+    const [type, setType] = React.useState(constants.COLOR_PICKER_TYPE_HEX);
+    const handleSelectType = (e) => {
+        setType(e.target.value);
+    };
+    const inputs = () => {
+        switch (type) {
+            case constants.COLOR_PICKER_TYPE_HEX:
+                return React__default['default'].createElement(colorPickerInputsHex.ColorPickerInputsHex, null);
+            case constants.COLOR_PICKER_TYPE_RGB:
+                return React__default['default'].createElement(colorPickerInputsRgba.ColorPickerInputsRgba, null);
+            default:
+                return false;
+        }
+    };
+    return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputs]}` },
+        React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputsType]}` },
+            React__default['default'].createElement("select", { value: type, onChange: handleSelectType },
+                React__default['default'].createElement("option", { value: constants.COLOR_PICKER_TYPE_HEX }, constants.COLOR_PICKER_TYPE_HEX),
+                React__default['default'].createElement("option", { value: constants.COLOR_PICKER_TYPE_RGB }, constants.COLOR_PICKER_TYPE_RGB))),
+        React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputsValue]}` },
+            React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputsValueContainer]}` }, inputs()))));
+};
+
+exports.ColorPickerInputs = ColorPickerInputs;
+//# sourceMappingURL=color-picker-inputs.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.js.map

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

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var context = require('../context.js');
+var css_classes = require('../css_classes.js');
+var utilities = require('../utilities.js');
+var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var colorPickerSwatch = require('./color-picker-swatch.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ColorPickerSwatches = () => {
+    const { hslArr, handlePickSwatch } = React.useContext(context.ColorPickerNewContext);
+    const [t] = useTranslation.useTranslation();
+    const [h, s] = hslArr;
+    const shades = [
+        { h, s, l: 95 },
+        { h, s, l: 90 },
+        { h, s, l: 80 },
+        { h, s, l: 70 },
+        { h, s, l: 60 },
+        { h, s, l: 50 },
+        { h, s, l: 40 },
+        { h, s, l: 30 },
+        { h, s, l: 20 },
+        { h, s, l: 10 },
+        { h, s, l: 5 }
+    ];
+    return (React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatches] },
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchesHeader] },
+            React__default['default'].createElement("p", null, t('Shades of color'))),
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchesContent] }, shades.map((shade, index) => {
+            const colorTiny = utilities.getTinyColorInstance(shade);
+            const colorHex = utilities.getHexValue(colorTiny);
+            const handleOnClick = () => {
+                handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch(colorHex);
+            };
+            return React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { size: "small", onClick: handleOnClick, key: `${shade}-${index}`, color: colorHex });
+        }))));
+};
+
+exports.ColorPickerSwatches = ColorPickerSwatches;
+//# sourceMappingURL=color-picker-swatches.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js

@@ -3,27 +3,39 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var context = require('../context.js');
 var constants = require('../constants.js');
 var css_classes = require('../css_classes.js');
+var colorLabelInput = require('./color-label-input.js');
 var index$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var colorPickerFooter = require('./color-picker-footer.js');
+var colorPickerHeader = require('./color-picker-header.js');
+var colorPickerInputs = require('./color-picker-inputs/color-picker-inputs.js');
 var colorPickerSwatch = require('./color-picker-swatch.js');
+var colorPickerSwatches = require('./color-picker-swatches.js');
 var index = require('../../dropdown/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ColorPickerNewPure = ({ id, name, color, setColor, hex, hslArr, handleOnChangeAlpha, alphaValue, rgbaArr, setR, setG, setB, handleCancel, handleSave, handlePickSwatch }) => {
+const ColorPickerNewPure = ({ id, name }) => {
+    const { color, setColor, handleCancel } = React.useContext(context.ColorPickerNewContext);
     return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPicker]}` },
         React__default['default'].createElement(index['default'], null,
             React__default['default'].createElement(index['default'].CustomLabel, null,
                 React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputContainer]}` },
                     React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputColorSwatchContainer]}` },
-                        React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color })))),
+                        React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color })),
+                    React__default['default'].createElement(colorLabelInput.ColorLabelInput, { id: id, name: name }))),
             React__default['default'].createElement(index['default'].Content, { onClickOutside: handleCancel },
+                React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, null),
                 React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerContainer]}` },
-                    React__default['default'].createElement(index$1.ColorPicker, { value: color, onChange: setColor, width: constants.COLOR_PICKER_WIDTH, height: constants.COLOR_PICKER_HEIGHT, hideColorTypeBtns: true, hideColorGuide: true, hideAdvancedSliders: true, hideInputType: true, hideInputs: true, hidePresets: true, className: `${main_module['default'][css_classes.cssColorPickerRbgcp]}` }))))));
+                    React__default['default'].createElement(index$1.ColorPicker, { value: color, onChange: setColor, width: constants.COLOR_PICKER_WIDTH, height: constants.COLOR_PICKER_HEIGHT, hideColorTypeBtns: true, hideColorGuide: true, hideAdvancedSliders: true, hideInputType: true, hideInputs: true, hidePresets: true, className: `${main_module['default'][css_classes.cssColorPickerRbgcp]}` }),
+                    React__default['default'].createElement(colorPickerInputs.ColorPickerInputs, null),
+                    React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, null)),
+                React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null)))));
 };
 
 exports.default = ColorPickerNewPure;

package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,0FAA8F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,0FAA8F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const COLOR_PICKER_INITIAL_STATE = '#000000';
 const COLOR_PICKER_WIDTH = 220;
-const COLOR_PICKER_HEIGHT = 200;
+const COLOR_PICKER_HEIGHT = 200;
+const COLOR_PICKER_TYPE_HEX = 'hex';
+const COLOR_PICKER_TYPE_RGB = 'rgb';
 
 exports.COLOR_PICKER_HEIGHT = COLOR_PICKER_HEIGHT;
 exports.COLOR_PICKER_INITIAL_STATE = COLOR_PICKER_INITIAL_STATE;
+exports.COLOR_PICKER_TYPE_HEX = COLOR_PICKER_TYPE_HEX;
+exports.COLOR_PICKER_TYPE_RGB = COLOR_PICKER_TYPE_RGB;
 exports.COLOR_PICKER_WIDTH = COLOR_PICKER_WIDTH;
 //# sourceMappingURL=constants.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/context.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const ColorPickerNewContext = React.createContext({
+    color: '',
+    setColor: () => { },
+    hex: '',
+    hslArr: [],
+    handleOnChangeAlpha: () => { },
+    alphaValue: '',
+    rgbaArr: [],
+    setR: () => { },
+    setG: () => { },
+    setB: () => { },
+    handleCancel: () => { },
+    handleSave: () => { },
+    handlePickSwatch: () => { }
+});
+
+exports.ColorPickerNewContext = ColorPickerNewContext;
+//# sourceMappingURL=context.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/context.js.map

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

package/build/cjs/packages/aurora/src/components/color_picker_new/css_classes.js

@@ -5,20 +5,40 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const cssColorPicker = 'color-picker';
 const cssColorPickerContainer = 'color-picker__container';
 const cssColorPickerRbgcp = 'color-picker__rbgcp';
+const cssColorPickerHeader = 'color-picker__header';
+const cssColorPickerCloseIcon = 'color-picker__close-icon';
+const cssColorPickerSwatches = 'color-picker__swatches';
+const cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
+const cssColorPickerSwatchesContent = 'color-picker__swatches-content';
 const cssColorPickerSwatch = 'color-picker__swatch';
 const cssColorPickerSwatchSmall = 'color-picker__swatch_small';
 const cssColorPickerSwatchBig = 'color-picker__swatch_big';
 const cssColorPickerSwatchFill = 'color-picker__swatch-fill';
 const cssColorPickerInputColorSwatchContainer = 'color-picker__input-color-swatch-container';
-const cssColorPickerInputContainer = 'color-picker__input-container';
+const cssColorPickerInputContainer = 'color-picker__input-container';
+const cssColorPickerInputs = 'color-picker__inputs';
+const cssColorPickerInputsType = 'color-picker__inputs-type';
+const cssColorPickerInputsValue = 'color-picker__inputs-value';
+const cssColorPickerInputsValueContainer = 'color-picker__inputs-value-container';
+const cssColorPickerFooter = 'color-picker__footer';
 
 exports.cssColorPicker = cssColorPicker;
+exports.cssColorPickerCloseIcon = cssColorPickerCloseIcon;
 exports.cssColorPickerContainer = cssColorPickerContainer;
+exports.cssColorPickerFooter = cssColorPickerFooter;
+exports.cssColorPickerHeader = cssColorPickerHeader;
 exports.cssColorPickerInputColorSwatchContainer = cssColorPickerInputColorSwatchContainer;
 exports.cssColorPickerInputContainer = cssColorPickerInputContainer;
+exports.cssColorPickerInputs = cssColorPickerInputs;
+exports.cssColorPickerInputsType = cssColorPickerInputsType;
+exports.cssColorPickerInputsValue = cssColorPickerInputsValue;
+exports.cssColorPickerInputsValueContainer = cssColorPickerInputsValueContainer;
 exports.cssColorPickerRbgcp = cssColorPickerRbgcp;
 exports.cssColorPickerSwatch = cssColorPickerSwatch;
 exports.cssColorPickerSwatchBig = cssColorPickerSwatchBig;
 exports.cssColorPickerSwatchFill = cssColorPickerSwatchFill;
 exports.cssColorPickerSwatchSmall = cssColorPickerSwatchSmall;
+exports.cssColorPickerSwatches = cssColorPickerSwatches;
+exports.cssColorPickerSwatchesContent = cssColorPickerSwatchesContent;
+exports.cssColorPickerSwatchesHeader = cssColorPickerSwatchesHeader;
 //# sourceMappingURL=css_classes.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/css_classes.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var constants = require('../constants.js');
-var useColorPicker$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js');
 var utilities = require('../utilities.js');
 
 const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
     const [color, setColor] = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE);
     const [choosenColor, setChoosenColor] = React.useState(color);
-    const { hslArr, rgbaArr, setR, setG, setB, setA } = useColorPicker$1.useColorPicker(color, setColor);
+    // const { hslArr, rgbaArr, setR, setG, setB, setA } = useBestGradientColorPicker(color, setColor);
+    const rgbaArr = [];
     const tinyColor = utilities.getTinyColorInstance(color);
     const hex = utilities.getHexValue(tinyColor);
     const [alpha, setAlpha] = React.useState(rgbaArr[3] * 100);
@@ -21,15 +21,15 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
     const changeAlphaValue = (value) => {
         setAlpha(value > 100 ? 100 : value);
     };
-    React.useEffect(() => {
-        setA(alpha);
-    }, [alpha]);
-    React.useEffect(() => {
-        setAlphaValue(`${Math.round(rgbaArr[3] * 100)}`);
-    }, [rgbaArr[3]]);
-    React.useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(utilities.getAllColorTypes(color));
-    }, [color]);
+    // useEffect(() => {
+    //     setA(alpha);
+    // }, [alpha]);
+    // useEffect(() => {
+    //     setAlphaValue(`${Math.round(rgbaArr[3] * 100)}`);
+    // }, [rgbaArr[3]]);
+    // useEffect(() => {
+    //     onChange?.(getAllColorTypes(color));
+    // }, [color]);
     const handleCancel = () => {
         setColor(choosenColor);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
@@ -45,13 +45,13 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
         color,
         setColor,
         hex,
-        hslArr,
+        hslArr: [],
         handleOnChangeAlpha,
         alphaValue,
         rgbaArr,
-        setR,
-        setG,
-        setB,
+        setR: () => { },
+        setG: () => { },
+        setB: () => { },
         handleCancel,
         handleSave,
         handlePickSwatch

package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var context = require('./context.js');
 var pureColorPicker = require('./components/pure-color-picker.js');
 var use_color_picker = require('./hooks/use_color_picker.js');
 
@@ -11,13 +12,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const ColorPickerNewWithContext = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
-    const { color, setColor, hex, hslArr, handleOnChangeAlpha, alphaValue, rgbaArr, setR, setG, setB, handleCancel, handleSave, handlePickSwatch } = use_color_picker['default']({
+    const contextValue = use_color_picker['default']({
         initialColor,
         onChange,
         onCancel,
         onSave
     });
-    return (React__default['default'].createElement(pureColorPicker['default'], { id: id, name: name, color: color, setColor: setColor, hex: hex, hslArr: hslArr, handleOnChangeAlpha: handleOnChangeAlpha, alphaValue: alphaValue, rgbaArr: rgbaArr, setR: setR, setG: setG, setB: setB, handleCancel: handleCancel, handleSave: handleSave, handlePickSwatch: handlePickSwatch }));
+    return (React__default['default'].createElement(context.ColorPickerNewContext.Provider, { value: contextValue },
+        React__default['default'].createElement(pureColorPicker['default'], { id: id, name: name })));
 };
 
 exports.default = ColorPickerNewWithContext;

package/build/cjs/packages/aurora/src/components/color_picker_new/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js

@@ -17,6 +17,10 @@ const getHexValue = (colorSet) => {
 const getHexValueString = (colorSet) => {
     return `#${getHexValue(colorSet)}`;
 };
+const isHexChar = (value) => {
+    const hexRegEx = /^$|[0-9a-fA-F]+$/;
+    return hexRegEx.test(value);
+};
 const getAllColorTypes = (color) => {
     const tinyColor = getTinyColorInstance(color);
     const rgba = getRgbaValue(tinyColor);
@@ -39,4 +43,5 @@ exports.getHexValue = getHexValue;
 exports.getHexValueString = getHexValueString;
 exports.getRgbaValue = getRgbaValue;
 exports.getTinyColorInstance = getTinyColorInstance;
+exports.isHexChar = isHexChar;
 //# sourceMappingURL=utilities.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-label-input.js

@@ -1,9 +1,11 @@
 import React, { useContext } from 'react';
-import { ColorPickerNewContext } from '../context';
-import '../types';
-import Input from '@auroraComponents/controls/components/input';
-export const ColorLabelInput = ({ id, name }) => {
-    const { hex } = useContext(ColorPickerNewContext);
-    return React.createElement(Input, { type: "text", id: id, name: name, value: `# ${hex === null || hex === void 0 ? void 0 : hex.toUpperCase()}`, readOnly: true });
+import Input from '../../controls/components/input.js';
+import { ColorPickerNewContext } from '../context.js';
+
+const ColorLabelInput = ({ id, name }) => {
+    const { hex } = useContext(ColorPickerNewContext);
+    return React.createElement(Input, { type: "text", id: id, name: name, value: `# ${hex === null || hex === void 0 ? void 0 : hex.toUpperCase()}`, readOnly: true });
 };
-//# sourceMappingURL=color-label-input.js.map
+
+export { ColorLabelInput };
+//# sourceMappingURL=color-label-input.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-label-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-label-input.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker_new/components/color-label-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACnD,OAA4C,UAAU,CAAC;AACvD,OAAO,KAAK,MAAM,6CAA6C,CAAC;AAOhE,MAAM,CAAC,MAAM,eAAe,GAAoC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7E,MAAM,EAAE,GAAG,EAAE,GAAG,UAAU,CAA8B,qBAAqB,CAAC,CAAC;IAE/E,OAAO,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,WAAW,EAAE,EAAE,EAAE,QAAQ,SAAG,CAAC;AAChG,CAAC,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}