@dreamcommerce/aurora 0.3.18 → 0.3.21

package/build/esm/packages/aurora/src/components/color_picker/components/hue_picker.js

@@ -0,0 +1,49 @@
+import { __assign } from "tslib";
+import React, { useContext } from 'react';
+import styles from '@auroraCss/color_picker/main.module.less';
+import { getHueFromPosition } from '../utilities';
+import { getIndicatorPositionFromPosition } from '@auroraUtilities/range/range_mappings';
+import { mapMouseEventToPosition, mapTouchEventToPosition, registerOnMouseEvents, registerOnTouchEvents } from '@auroraUtilities/events/event_registration';
+import '../types';
+import { ColorPickerContext } from '@auroraComponents/color_picker/context';
+import { cssColorPickerHuePicker, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes';
+import { ColorConverter } from '@auroraUtilities/colors/color_converter';
+var HuePicker = function (_a) {
+    var hueSliderRef = _a.hueSliderRef, classes = _a.classes;
+    var _b = useContext(ColorPickerContext), setColor = _b.setColor, setHueSliderPointer = _b.setHueSliderPointer, screenName = _b.screenName;
+    var onSliderEvent = function (position) {
+        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
+            return;
+        }
+        var hue = getHueFromPosition({
+            hueSliderRect: hueSliderRef.current.getBoundingClientRect(),
+            position: position,
+            screenName: screenName
+        }).hue;
+        var _a = getIndicatorPositionFromPosition({
+            elementRect: hueSliderRef.current.getBoundingClientRect(),
+            position: position
+        }), positionY = _a.positionY, positionX = _a.positionX;
+        setColor(function (color) { return (__assign(__assign({}, color), { hue: hue, hex: ColorConverter.hsl2hex({ hue: hue, saturation: color.saturation, lightness: color.lightness }) })); });
+        setHueSliderPointer({ top: positionY, left: positionX });
+    };
+    var onSliderDown = function (event) {
+        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
+            return;
+        }
+        onSliderEvent(mapMouseEventToPosition(event));
+        registerOnMouseEvents(onSliderEvent);
+    };
+    var onTouchStart = function (event) {
+        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
+            return;
+        }
+        onSliderEvent(mapTouchEventToPosition(event));
+        registerOnTouchEvents(onSliderEvent);
+    };
+    return (React.createElement("div", { className: styles[cssColorPickerHuePicker], ref: hueSliderRef, onMouseDown: onSliderDown, onTouchStart: onTouchStart },
+        React.createElement("div", { className: "".concat(classes.huePointer, " ").concat(styles[cssColorPickerPointer]), onDrag: onSliderEvent, onTouchStart: onTouchStart },
+            React.createElement("div", { className: styles[cssColorPickerPointerInside] }))));
+};
+export default HuePicker;
+//# sourceMappingURL=hue_picker.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/hue_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hue_picker.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/hue_picker.tsx"],"names":[],"mappings":"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"}

package/build/esm/packages/aurora/src/components/color_picker/components/label.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IColorPickerLabelProps } from '../types';
+declare const ColorPickerLabel: React.FC<IColorPickerLabelProps>;
+export default ColorPickerLabel;

package/build/esm/packages/aurora/src/components/color_picker/components/label.js

@@ -0,0 +1,34 @@
+import styles from '@auroraCss/color_picker/main.module.less';
+import React, { useContext, useEffect } from 'react';
+import '@auroraComponents/dropdown/context/types';
+import { DropdownContext } from '@auroraComponents/dropdown/context';
+import '../types';
+import { createUseStyles } from 'react-jss';
+import { ColorPickerContext } from '../context';
+import InputWrapper from '@auroraComponents/controls/components/input_wrapper';
+import { cssColorPickerInputColorPreview } from '../css_classes';
+var useStyles = createUseStyles({
+    colorPreview: {
+        background: function (_a) {
+            var hex = _a.color.hex;
+            return hex;
+        }
+    }
+});
+var ColorPickerLabel = function (_a) {
+    var name = _a.name, isRequired = _a.isRequired, id = _a.id;
+    var _b = useContext(ColorPickerContext), setInitialColor = _b.setInitialColor, color = _b.color;
+    var isOpen = useContext(DropdownContext).isOpen;
+    var classes = useStyles({ color: color });
+    useEffect(function () {
+        if (isOpen) {
+            setInitialColor(color);
+        }
+        // eslint-disable-next-line
+    }, [isOpen]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputWrapper, { value: color === null || color === void 0 ? void 0 : color.hex, size: "small", isFocused: isOpen, preElements: React.createElement("div", { className: "".concat(classes.colorPreview, " ").concat(styles[cssColorPickerInputColorPreview]) }) }),
+        React.createElement("input", { type: "hidden", id: id, name: name, value: (color === null || color === void 0 ? void 0 : color.hex) || '', "aria-required": isRequired })));
+};
+export default ColorPickerLabel;
+//# sourceMappingURL=label.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/label.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAiC,0CAA0C,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAuC,UAAU,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,YAAY,MAAM,qDAAqD,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,gBAAgB,CAAC;AAEjE,IAAM,SAAS,GAAG,eAAe,CAAC;IAC9B,YAAY,EAAE;QACV,UAAU,EAAE,UAAC,EAAkB;gBAAP,GAAG,eAAA;YAAS,OAAA,GAAG;QAAH,CAAG;KAC1C;CACJ,CAAC,CAAC;AAEH,IAAM,gBAAgB,GAAqC,UAAC,EAAwB;QAAtB,IAAI,UAAA,EAAE,UAAU,gBAAA,EAAE,EAAE,QAAA;IACxE,IAAA,KAA6B,UAAU,CAAC,kBAAkB,CAAC,EAAzD,eAAe,qBAAA,EAAE,KAAK,WAAmC,CAAC;IAC1D,IAAA,MAAM,GAAuB,UAAU,CAAC,eAAe,CAAC,OAAlD,CAAmD;IACjE,IAAM,OAAO,GAAG,SAAS,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;IACrC,SAAS,CAAC;QACN,IAAI,MAAM,EAAE;YACR,eAAe,CAAC,KAAK,CAAC,CAAC;SAC1B;QACD,2BAA2B;IAC/B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACH;QACI,oBAAC,YAAY,IACT,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,EACjB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,6BAAK,SAAS,EAAE,UAAG,OAAO,CAAC,YAAY,cAAI,MAAM,CAAC,+BAA+B,CAAC,CAAE,GAAI,GACvG;QAEF,+BAAO,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,KAAI,EAAE,mBAAiB,UAAU,GAAI,CAChG,CACN,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/components/saturation_lightness_picker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISaturationLightnessPickerProps } from '../types';
+declare const SaturationLightnessPicker: React.FC<ISaturationLightnessPickerProps>;
+export default SaturationLightnessPicker;

package/build/esm/packages/aurora/src/components/color_picker/components/saturation_lightness_picker.js

@@ -0,0 +1,50 @@
+import { __assign } from "tslib";
+import React, { useContext } from 'react';
+import styles from '@auroraCss/color_picker/main.module.less';
+import '../types';
+import { getSaturationLightnessFromPosition } from '../utilities';
+import { getIndicatorPositionFromPosition } from '@auroraUtilities/range/range_mappings';
+import { mapMouseEventToPosition, mapTouchEventToPosition, registerOnMouseEvents, registerOnTouchEvents } from '@auroraUtilities/events/event_registration';
+import { ColorPickerContext } from '@auroraComponents/color_picker/context';
+import { cssColorPickerMask, cssColorPickerMaskBlack, cssColorPickerMaskWhite, cssColorPickerPointer, cssColorPickerPointerInside, cssColorPickerSaturationLightnessPicker } from '@auroraComponents/color_picker/css_classes';
+import { ColorConverter } from '@auroraUtilities/colors/color_converter';
+var SaturationLightnessPicker = function (_a) {
+    var classes = _a.classes, saturationLightnessPanelRef = _a.saturationLightnessPanelRef;
+    var _b = useContext(ColorPickerContext), setColor = _b.setColor, setSaturationLightnessPointer = _b.setSaturationLightnessPointer;
+    var saturationLightnessPickerEvent = function (position) {
+        if (!saturationLightnessPanelRef.current) {
+            return;
+        }
+        var elementRect = saturationLightnessPanelRef.current.getBoundingClientRect();
+        var _a = getIndicatorPositionFromPosition({ elementRect: elementRect, position: position }), positionX = _a.positionX, positionY = _a.positionY;
+        var _b = getSaturationLightnessFromPosition({ elementRect: elementRect, position: position }), lightness = _b.lightness, saturation = _b.saturation;
+        setColor(function (color) { return (__assign(__assign({}, color), { saturation: saturation, lightness: lightness, hex: ColorConverter.hsl2hex({ hue: color.hue, lightness: lightness, saturation: saturation }) })); });
+        setSaturationLightnessPointer({
+            left: positionX,
+            top: positionY
+        });
+    };
+    var onMouseDown = function (event) {
+        event.preventDefault();
+        if (!(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
+            return;
+        }
+        saturationLightnessPickerEvent(mapMouseEventToPosition(event));
+        registerOnMouseEvents(saturationLightnessPickerEvent);
+    };
+    var onTouchStart = function (event) {
+        event.preventDefault();
+        if (!(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
+            return;
+        }
+        saturationLightnessPickerEvent(mapTouchEventToPosition(event));
+        registerOnTouchEvents(saturationLightnessPickerEvent);
+    };
+    return (React.createElement("div", { className: "".concat(classes.saturationLightnessPanel, " ").concat(styles[cssColorPickerSaturationLightnessPicker]), ref: saturationLightnessPanelRef, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
+        React.createElement("div", { className: "".concat(styles[cssColorPickerMask], " ").concat(styles[cssColorPickerMaskWhite]) }),
+        React.createElement("div", { className: "".concat(styles[cssColorPickerMask], " ").concat(styles[cssColorPickerMaskBlack]) }),
+        React.createElement("div", { className: "".concat(classes.saturationLightnessPointer, " ").concat(styles[cssColorPickerPointer]), onDrag: saturationLightnessPickerEvent, onTouchStart: onTouchStart },
+            React.createElement("div", { className: styles[cssColorPickerPointerInside] }))));
+};
+export default SaturationLightnessPicker;
+//# sourceMappingURL=saturation_lightness_picker.js.map

package/build/esm/packages/aurora/src/components/color_picker/components/saturation_lightness_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saturation_lightness_picker.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker/components/saturation_lightness_picker.tsx"],"names":[],"mappings":"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"}

package/build/esm/packages/aurora/src/components/color_picker/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MAX_HUE_VALUE = 360;
+export declare const MAX_LIGHTNESS_VALUE = 100;
+export declare const MAX_SATURATION_VALUE = 100;
+export declare const SATURATION_OFFSET = 0.00001;

package/build/esm/packages/aurora/src/components/color_picker/constants.js

@@ -0,0 +1,5 @@
+export var MAX_HUE_VALUE = 360;
+export var MAX_LIGHTNESS_VALUE = 100;
+export var MAX_SATURATION_VALUE = 100;
+export var SATURATION_OFFSET = 0.00001; // To avoid package bug
+//# sourceMappingURL=constants.js.map

package/build/esm/packages/aurora/src/components/color_picker/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,aAAa,GAAG,GAAG,CAAC;AACjC,MAAM,CAAC,IAAM,mBAAmB,GAAG,GAAG,CAAC;AACvC,MAAM,CAAC,IAAM,oBAAoB,GAAG,GAAG,CAAC;AACxC,MAAM,CAAC,IAAM,iBAAiB,GAAG,OAAO,CAAC,CAAC,uBAAuB"}

package/build/esm/packages/aurora/src/components/color_picker/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IColorPickerContextProps } from './types';
+export declare const ColorPickerContext: import("react").Context<IColorPickerContextProps>;

package/build/esm/packages/aurora/src/components/color_picker/context.js

@@ -0,0 +1,24 @@
+import { createContext } from 'react';
+import './types';
+export var ColorPickerContext = createContext({
+    color: {
+        hue: 0,
+        saturation: 0,
+        lightness: 0,
+        hex: ''
+    },
+    setColor: function () { },
+    initialColor: {
+        hue: 0,
+        saturation: 0,
+        lightness: 0,
+        hex: ''
+    },
+    screenName: '',
+    setInitialColor: function () { },
+    hueSliderPointer: { top: 0, left: 0 },
+    setHueSliderPointer: function () { },
+    saturationLightnessPointer: { top: 0, left: 0 },
+    setSaturationLightnessPointer: function () { }
+});
+//# sourceMappingURL=context.js.map

package/build/esm/packages/aurora/src/components/color_picker/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAyC,SAAS,CAAC;AAEnD,MAAM,CAAC,IAAM,kBAAkB,GAAG,aAAa,CAA2B;IACtE,KAAK,EAAE;QACH,GAAG,EAAE,CAAC;QACN,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,CAAC;QACZ,GAAG,EAAE,EAAE;KACV;IACD,QAAQ,EAAE,cAAO,CAAC;IAClB,YAAY,EAAE;QACV,GAAG,EAAE,CAAC;QACN,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,CAAC;QACZ,GAAG,EAAE,EAAE;KACV;IACD,UAAU,EAAE,EAAE;IACd,eAAe,EAAE,cAAO,CAAC;IACzB,gBAAgB,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;IACrC,mBAAmB,EAAE,cAAO,CAAC;IAC7B,0BAA0B,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;IAC/C,6BAA6B,EAAE,cAAO,CAAC;CAC1C,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/css_classes.d.ts

@@ -0,0 +1,12 @@
+export declare const cssColorPicker = "color-picker";
+export declare const cssColorPickerInputColorPreview: string;
+export declare const cssColorPickerButtonsGroup: string;
+export declare const cssColorPickerHuePicker: string;
+export declare const cssColorPickerPointer: string;
+export declare const cssColorPickerPointerInside: string;
+export declare const cssColorPickerSaturationLightnessPicker: string;
+export declare const cssColorPickerMask: string;
+export declare const cssColorPickerMaskWhite: string;
+export declare const cssColorPickerMaskBlack: string;
+export declare const cssColorPickerPreviewContainer: string;
+export declare const cssColorPickerPreview: string;

package/build/esm/packages/aurora/src/components/color_picker/css_classes.js

@@ -0,0 +1,13 @@
+export var cssColorPicker = 'color-picker';
+export var cssColorPickerInputColorPreview = "".concat(cssColorPicker, "__input-color-preview");
+export var cssColorPickerButtonsGroup = "".concat(cssColorPicker, "__buttons-group");
+export var cssColorPickerHuePicker = "".concat(cssColorPicker, "__hue-picker");
+export var cssColorPickerPointer = "".concat(cssColorPicker, "__pointer");
+export var cssColorPickerPointerInside = "".concat(cssColorPicker, "__pointer-inside");
+export var cssColorPickerSaturationLightnessPicker = "".concat(cssColorPicker, "__saturation-lightness-picker");
+export var cssColorPickerMask = "".concat(cssColorPicker, "__mask");
+export var cssColorPickerMaskWhite = "".concat(cssColorPickerMask, "_white");
+export var cssColorPickerMaskBlack = "".concat(cssColorPickerMask, "_black");
+export var cssColorPickerPreviewContainer = "".concat(cssColorPicker, "__preview-container");
+export var cssColorPickerPreview = "".concat(cssColorPicker, "__preview");
+//# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/color_picker/css_classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_classes.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/css_classes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,cAAc,GAAG,cAAc,CAAC;AAC7C,MAAM,CAAC,IAAM,+BAA+B,GAAG,UAAG,cAAc,0BAAuB,CAAC;AACxF,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAG,cAAc,oBAAiB,CAAC;AAC7E,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAG,cAAc,iBAAc,CAAC;AACvE,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAG,cAAc,cAAW,CAAC;AAClE,MAAM,CAAC,IAAM,2BAA2B,GAAG,UAAG,cAAc,qBAAkB,CAAC;AAC/E,MAAM,CAAC,IAAM,uCAAuC,GAAG,UAAG,cAAc,kCAA+B,CAAC;AACxG,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAG,cAAc,WAAQ,CAAC;AAC5D,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAG,kBAAkB,WAAQ,CAAC;AACrE,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAG,kBAAkB,WAAQ,CAAC;AACrE,MAAM,CAAC,IAAM,8BAA8B,GAAG,UAAG,cAAc,wBAAqB,CAAC;AACrF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAG,cAAc,cAAW,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IColorPickerProps, IPureColorPickerProps } from './types';
+export declare const PureColorPicker: React.FC<IPureColorPickerProps>;
+declare const _default: React.FC<IColorPickerProps>;
+export default _default;

package/build/esm/packages/aurora/src/components/color_picker/index.js

@@ -0,0 +1,109 @@
+import { __assign } from "tslib";
+import React, { useContext, useRef } from 'react';
+import { createUseStyles } from 'react-jss';
+import Input from '@auroraComponents/controls/components/input';
+import styles from '@auroraCss/color_picker/main.module.less';
+import SaturationLightnessPicker from './components/saturation_lightness_picker';
+import ColorPickerSlider from './components/hue_picker';
+import ColorPickerButtons from './components/buttons';
+import { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';
+import './types';
+import { ColorPickerContext } from './context';
+import { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@auroraComponents/color_picker/css_classes';
+import { useColorPicker } from '@auroraComponents/color_picker/use_color_picker';
+import withTranslation from '@auroraUtilities/translation/with_translation';
+var useStyles = createUseStyles({
+    saturationLightnessPanel: {
+        background: function (_a) {
+            var hue = _a.color.hue;
+            return "hsl(".concat(hue, ",100%, 50%)");
+        }
+    },
+    saturationLightnessPointer: {
+        transform: function (_a) {
+            var _b = _a.saturationLightnessPointer, left = _b.left, top = _b.top;
+            return "translate3d(".concat(left - 10, "px,").concat(top - 10, "px,0px)");
+        },
+        '& > div': {
+            background: function (_a) {
+                var hex = _a.color.hex;
+                return hex;
+            }
+        }
+    },
+    preview: {
+        background: function (_a) {
+            var hex = _a.color.hex;
+            return hex;
+        }
+    },
+    huePointer: {
+        transform: function (_a) {
+            var _b = _a.hueSliderPointer, top = _b.top, left = _b.left, screenName = _a.screenName;
+            return screenName === 'xs' ? "translate3d(".concat(left - 10, "px,0px,0px)") : "translate3d(0px,".concat(top - 10, "px,0px)");
+        },
+        '& > div': {
+            background: function (_a) {
+                var hue = _a.color.hue;
+                return "hsl(".concat(hue, ",100%, 50%)");
+            }
+        }
+    },
+    colorPreview: {
+        background: function (_a) {
+            var hex = _a.color.hex;
+            return hex;
+        }
+    }
+});
+export var PureColorPicker = function (_a) {
+    var hideChooseCancelButtons = _a.hideChooseCancelButtons;
+    var _b = useContext(ColorPickerContext), color = _b.color, setColor = _b.setColor, initialColor = _b.initialColor, hueSliderPointer = _b.hueSliderPointer, saturationLightnessPointer = _b.saturationLightnessPointer, setHueSliderPointer = _b.setHueSliderPointer, setSaturationLightnessPointer = _b.setSaturationLightnessPointer, screenName = _b.screenName;
+    var saturationLightnessPanelRef = useRef(null);
+    var hueSliderRef = useRef(null);
+    var classes = useStyles({ color: color, saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer, screenName: screenName });
+    var inputOnChange = function (event) {
+        var value = event.target.value;
+        var hexValue = value.charAt(0) !== '#' ? "#".concat(value) : value;
+        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
+            return;
+        }
+        if (value !== hexValue) {
+            event.target.value = hexValue;
+        }
+        try {
+            var color_1 = getColorFromHex(hexValue);
+            var _a = getIndicatorPositionsFromHEX({
+                hueSliderRef: hueSliderRef,
+                saturationLightnessPanelRef: saturationLightnessPanelRef,
+                hex: event.target.value
+            }), saturationLightnessPointer_1 = _a.saturationLightnessPointer, hueSliderPointer_1 = _a.hueSliderPointer;
+            setColor(color_1);
+            setSaturationLightnessPointer(saturationLightnessPointer_1);
+            setHueSliderPointer(hueSliderPointer_1);
+        }
+        catch (e) {
+            setColor(__assign(__assign({}, color), { hex: hexValue }));
+        }
+    };
+    var restoreInitialColor = function () {
+        setColor(initialColor);
+    };
+    return (React.createElement("div", { className: "".concat(styles[cssColorPicker]) },
+        React.createElement(SaturationLightnessPicker, { classes: classes, saturationLightnessPanelRef: saturationLightnessPanelRef }),
+        React.createElement(ColorPickerSlider, { hueSliderRef: hueSliderRef, classes: classes }),
+        React.createElement("div", { className: styles[cssColorPickerPreviewContainer] },
+            React.createElement("div", { className: "".concat(classes.preview, " ").concat(styles[cssColorPickerPreview]) }),
+            React.createElement("div", null,
+                React.createElement(Input, { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex, onChange: inputOnChange }))),
+        !hideChooseCancelButtons && React.createElement(ColorPickerButtons, { restoreInitialColor: restoreInitialColor })));
+};
+var ColorPickerWithContext = function (_a) {
+    var initialColor = _a.initialColor, onChange = _a.onChange, hideChooseCancelButtons = _a.hideChooseCancelButtons, name = _a.name;
+    var colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange: onChange });
+    return (React.createElement(ColorPickerContext.Provider, { value: colorPickerContext },
+        React.createElement("input", { type: "hidden", name: name }),
+        React.createElement(PureColorPicker, { hideChooseCancelButtons: hideChooseCancelButtons })));
+};
+export default withTranslation(ColorPickerWithContext);
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/color_picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/index.tsx"],"names":[],"mappings":"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"}

package/build/esm/packages/aurora/src/components/color_picker/types.d.ts

@@ -0,0 +1,59 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+export interface IPosition {
+    clientX: number;
+    clientY: number;
+}
+export interface IColor {
+    hue: number;
+    saturation: number;
+    lightness: number;
+    hex: string;
+}
+export interface IHuePickerProps {
+    hueSliderRef: RefObject<HTMLDivElement>;
+    classes: any;
+}
+export interface IColorPickerButtonsProps {
+    restoreInitialColor: () => void;
+}
+export interface IPureColorPickerProps {
+    hideChooseCancelButtons?: boolean;
+}
+export interface IColorPickerProps extends IPureColorPickerProps {
+    onChange?: (color: IColor) => void;
+    initialColor?: string;
+    name?: string;
+}
+export interface IColorPickerContextProps {
+    color: IColor;
+    screenName: string;
+    initialColor: IColor;
+    setInitialColor: Dispatch<SetStateAction<IColor | undefined>>;
+    setColor: Dispatch<SetStateAction<IColor>>;
+    hueSliderPointer: {
+        top: number;
+        left: number;
+    };
+    setHueSliderPointer: Dispatch<SetStateAction<{
+        top: number;
+        left: number;
+    } | undefined>>;
+    saturationLightnessPointer: {
+        top: number;
+        left: number;
+    };
+    setSaturationLightnessPointer: Dispatch<SetStateAction<{
+        top: number;
+        left: number;
+    } | undefined>>;
+}
+export declare type IColorPickerLabelProps = {
+    isRequired?: boolean;
+    label?: string;
+    name: string;
+    id: string;
+};
+export declare type ISaturationLightnessPickerProps = {
+    classes?: any;
+    saturationLightnessPanelRef: RefObject<HTMLDivElement>;
+};

package/build/esm/packages/aurora/src/components/color_picker/types.js

@@ -0,0 +1,2 @@
+import 'react';
+//# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/color_picker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/types.ts"],"names":[],"mappings":"AAAA,OAAoD,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/use_color_picker.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { IColor } from '@auroraComponents/color_picker/types';
+export declare const useColorPicker: ({ initialColorHex, onChange }: {
+    initialColorHex: string;
+    onChange?: ((color: IColor) => void) | undefined;
+}) => {
+    color: {
+        hue: number;
+        saturation: number;
+        lightness: number;
+        hex: string;
+    };
+    setColor: import("react").Dispatch<import("react").SetStateAction<{
+        hue: number;
+        saturation: number;
+        lightness: number;
+        hex: string;
+    }>>;
+    initialColor: {
+        hue: number;
+        saturation: number;
+        lightness: number;
+        hex: string;
+    };
+    setInitialColor: import("react").Dispatch<import("react").SetStateAction<{
+        hue: number;
+        saturation: number;
+        lightness: number;
+        hex: string;
+    }>>;
+    hueSliderPointer: {
+        top: number;
+        left: number;
+    };
+    setHueSliderPointer: import("react").Dispatch<import("react").SetStateAction<{
+        top: number;
+        left: number;
+    }>>;
+    screenName: string;
+    saturationLightnessPointer: {
+        left: number;
+        top: number;
+    };
+    setSaturationLightnessPointer: import("react").Dispatch<import("react").SetStateAction<{
+        left: number;
+        top: number;
+    }>>;
+};

package/build/esm/packages/aurora/src/components/color_picker/use_color_picker.js

@@ -0,0 +1,36 @@
+import { __assign } from "tslib";
+import { useEffect, useState } from 'react';
+import { SATURATION_OFFSET } from '@auroraComponents/color_picker/constants';
+import { useScreenDetect } from '@auroraHooks/use_screen_detect';
+import '@auroraComponents/color_picker/types';
+export var useColorPicker = function (_a) {
+    var initialColorHex = _a.initialColorHex, onChange = _a.onChange;
+    var _b = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex }), color = _b[0], setColor = _b[1];
+    var _c = useState({
+        hue: 0,
+        saturation: SATURATION_OFFSET,
+        lightness: 100,
+        hex: initialColorHex
+    }), initialColor = _c[0], setInitialColor = _c[1];
+    var _d = useState({ top: 0, left: 0 }), hueSliderPointer = _d[0], setHueSliderPointer = _d[1];
+    var _e = useState({ left: 0, top: 0 }), saturationLightnessPointer = _e[0], setSaturationLightnessPointer = _e[1];
+    var screenName = useScreenDetect();
+    useEffect(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange(color);
+    }, [color]);
+    useEffect(function () {
+        setColor(function (prevState) { return (__assign(__assign({}, prevState), { hex: initialColorHex })); });
+    }, [initialColorHex]);
+    return {
+        color: color,
+        setColor: setColor,
+        initialColor: initialColor,
+        setInitialColor: setInitialColor,
+        hueSliderPointer: hueSliderPointer,
+        setHueSliderPointer: setHueSliderPointer,
+        screenName: screenName,
+        saturationLightnessPointer: saturationLightnessPointer,
+        setSaturationLightnessPointer: setSaturationLightnessPointer
+    };
+};
+//# sourceMappingURL=use_color_picker.js.map

package/build/esm/packages/aurora/src/components/color_picker/use_color_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_color_picker.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/use_color_picker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAuB,sCAAsC,CAAC;AAE9D,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,EAA8F;QAA5F,eAAe,qBAAA,EAAE,QAAQ,cAAA;IAChD,IAAA,KAAoB,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,EAAE,CAAC,EAA5G,KAAK,QAAA,EAAE,QAAQ,QAA6F,CAAC;IAC9G,IAAA,KAAkC,QAAQ,CAAC;QAC7C,GAAG,EAAE,CAAC;QACN,UAAU,EAAE,iBAAiB;QAC7B,SAAS,EAAE,GAAG;QACd,GAAG,EAAE,eAAe;KACvB,CAAC,EALK,YAAY,QAAA,EAAE,eAAe,QAKlC,CAAC;IACG,IAAA,KAA0C,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAtE,gBAAgB,QAAA,EAAE,mBAAmB,QAAiC,CAAC;IACxE,IAAA,KAA8D,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAA1F,0BAA0B,QAAA,EAAE,6BAA6B,QAAiC,CAAC;IAClG,IAAM,UAAU,GAAG,eAAe,EAAE,CAAC;IAErC,SAAS,CAAC;QACN,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC;QACN,QAAQ,CAAC,UAAC,SAAS,IAAK,OAAA,uBAAM,SAAS,KAAE,GAAG,EAAE,eAAe,IAAG,EAAxC,CAAwC,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO;QACH,KAAK,OAAA;QACL,QAAQ,UAAA;QACR,YAAY,cAAA;QACZ,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,mBAAmB,qBAAA;QACnB,UAAU,YAAA;QACV,0BAA0B,4BAAA;QAC1B,6BAA6B,+BAAA;KAChC,CAAC;AACN,CAAC,CAAC"}

package/build/esm/packages/aurora/src/components/color_picker/utilities.d.ts

@@ -0,0 +1,43 @@
+import { RefObject } from 'react';
+import { IPosition } from '@auroraComponents/color_picker/types';
+/**
+ * Function to calculate indicators position based on hex value
+ * @param saturationLightnessPanelRef, reference
+ * @param hueSliderRef, reference
+ * @param hex, string with color
+ * @return
+ */
+export declare const getIndicatorPositionsFromHEX: ({ saturationLightnessPanelRef, hueSliderRef, hex }: {
+    saturationLightnessPanelRef?: RefObject<HTMLDivElement> | undefined;
+    hueSliderRef?: RefObject<HTMLDivElement> | undefined;
+    hex: string;
+}) => {
+    saturationLightnessPointer: {
+        left: number;
+        top: number;
+    };
+    hueSliderPointer: {
+        top: number;
+        left: number;
+    };
+};
+export declare const getColorFromHex: (value: string) => {
+    hue: number;
+    saturation: number;
+    lightness: number;
+    hex: string;
+};
+export declare const getHueFromPosition: ({ hueSliderRect, position, screenName }: {
+    hueSliderRect: DOMRect;
+    position: IPosition;
+    screenName: string;
+}) => {
+    hue: number;
+};
+export declare const getSaturationLightnessFromPosition: ({ elementRect, position }: {
+    elementRect: DOMRect;
+    position: IPosition;
+}) => {
+    lightness: number;
+    saturation: number;
+};

package/build/esm/packages/aurora/src/components/color_picker/utilities.js

@@ -0,0 +1,49 @@
+import 'react';
+import { MAX_HUE_VALUE, MAX_LIGHTNESS_VALUE, MAX_SATURATION_VALUE, SATURATION_OFFSET } from './constants';
+import '@auroraComponents/color_picker/types';
+import { constrainToRange, getIndicatorPositionFromPosition } from '@auroraUtilities/range/range_mappings';
+import { ColorConverter } from '@auroraUtilities/colors/color_converter';
+/**
+ * Function to calculate indicators position based on hex value
+ * @param saturationLightnessPanelRef, reference
+ * @param hueSliderRef, reference
+ * @param hex, string with color
+ * @return
+ */
+export var getIndicatorPositionsFromHEX = function (_a) {
+    var _b, _c;
+    var saturationLightnessPanelRef = _a.saturationLightnessPanelRef, hueSliderRef = _a.hueSliderRef, hex = _a.hex;
+    var _d = ColorConverter.hex2hsl(hex), hue = _d.hue, saturation = _d.saturation, lightness = _d.lightness;
+    var _e = ((_b = saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || {}, _f = _e.width, width = _f === void 0 ? 0 : _f, _g = _e.height, height = _g === void 0 ? 0 : _g;
+    var hueSliderRect = (_c = hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+    var saturationLightnessPointer = {
+        left: constrainToRange((saturation * width) / MAX_SATURATION_VALUE, 0, width),
+        top: constrainToRange((lightness * height) / MAX_LIGHTNESS_VALUE, 0, height)
+    };
+    var hueSliderPointer = {
+        top: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.height) || 0) / MAX_HUE_VALUE),
+        left: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.width) || 0) / MAX_HUE_VALUE)
+    };
+    return { saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer };
+};
+export var getColorFromHex = function (value) {
+    var _a = ColorConverter.hex2hsl(value), hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness;
+    return { hue: hue, saturation: saturation, lightness: lightness, hex: value };
+};
+export var getHueFromPosition = function (_a) {
+    var hueSliderRect = _a.hueSliderRect, position = _a.position, screenName = _a.screenName;
+    var clientY = position.clientY, clientX = position.clientX;
+    var top = hueSliderRect.top, height = hueSliderRect.height, width = hueSliderRect.width, left = hueSliderRect.left;
+    var distance = screenName === 'xs' ? constrainToRange(clientX - left, 0, width) : constrainToRange(clientY - top, 0, height);
+    var hue = screenName === 'xs' ? (distance * (MAX_HUE_VALUE - 1)) / width : (distance * (MAX_HUE_VALUE - 1)) / height;
+    return { hue: hue };
+};
+export var getSaturationLightnessFromPosition = function (_a) {
+    var elementRect = _a.elementRect, position = _a.position;
+    var width = elementRect.width, height = elementRect.height;
+    var _b = getIndicatorPositionFromPosition({ elementRect: elementRect, position: position }), positionX = _b.positionX, positionY = _b.positionY;
+    var saturation = (positionX * MAX_SATURATION_VALUE) / width || SATURATION_OFFSET;
+    var lightness = MAX_LIGHTNESS_VALUE - (positionY * (MAX_LIGHTNESS_VALUE / 2)) / height - saturation / 2;
+    return { lightness: lightness, saturation: saturation };
+};
+//# sourceMappingURL=utilities.js.map