@dreamcommerce/aurora 0.3.4-159 → 0.3.4-162

package/build/cjs/packages/aurora/src/components/button/components/link/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var link = {
+    render: function (_a, classNames) {
+        var href = _a.href, target = _a.target, onClick = _a.onClick, children = _a.children;
+        return (React__default['default'].createElement("a", { href: href, target: target, onClick: onClick, className: classNames }, children));
+    },
+};
+
+exports.link = link;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../../src/components/button/components/link/index.tsx"],"sourcesContent":["import React from 'react';\nimport { IAsLinkProps } from './types';\n\nexport const link = {\n    render({ href, target, onClick, children }: IAsLinkProps, classNames: string) {\n        return (\n            <a href={href} target={target} onClick={onClick} className={classNames}>\n                {children}\n            </a>\n        );\n    },\n};\n"],"names":["React"],"mappings":";;;;;;;;;;IAGa,IAAI,GAAG;IAChB,MAAM,EAAN,UAAO,EAAiD,EAAE,UAAkB;YAAnE,cAAI,EAAE,kBAAM,EAAE,oBAAO,EAAE,sBAAQ;QACpC,QACIA,+CAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,IACjE,QAAQ,CACT,EACN;KACL;;;;;"}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cssButton = 'btn';
+var cssButtonOutline = cssButton + "_outline";
+var cssButtonBg = cssButton + "_bg";
+var cssButtonS = cssButton + "_s";
+var cssButtonLink = cssButton + "_link";
+var cssButtonSecondary = cssButton + "_secondary";
+var cssButtonInactive = cssButton + "_inactive";
+
+exports.cssButton = cssButton;
+exports.cssButtonBg = cssButtonBg;
+exports.cssButtonInactive = cssButtonInactive;
+exports.cssButtonLink = cssButtonLink;
+exports.cssButtonOutline = cssButtonOutline;
+exports.cssButtonS = cssButtonS;
+exports.cssButtonSecondary = cssButtonSecondary;
+//# sourceMappingURL=css_classes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css_classes.js","sources":["../../../../../../../src/components/button/css_classes.ts"],"sourcesContent":["export const cssButton = 'btn';\nexport const cssButtonOutline = `${cssButton}_outline`;\nexport const cssButtonBg = `${cssButton}_bg`;\nexport const cssButtonS = `${cssButton}_s`;\nexport const cssButtonLink = `${cssButton}_link`;\nexport const cssButtonSecondary = `${cssButton}_secondary`;\nexport const cssButtonInactive = `${cssButton}_inactive`;\n"],"names":[],"mappings":";;;;IAAa,SAAS,GAAG,MAAM;IAClB,gBAAgB,GAAM,SAAS,cAAW;IAC1C,WAAW,GAAM,SAAS,SAAM;IAChC,UAAU,GAAM,SAAS,QAAK;IAC9B,aAAa,GAAM,SAAS,WAAQ;IACpC,kBAAkB,GAAM,SAAS,gBAAa;IAC9C,iBAAiB,GAAM,SAAS;;;;;;;;;;"}

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

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+var _tslib = require('../../../../../_virtual/_tslib.js');
+var classnames = require('classnames');
+var main_module = require('../../css/button/main.module.less.js');
+var css_classes = require('./css_classes.js');
+var index = require('./components/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+/**
+ * @component
+ * @example
+ * return (
+ *  <Button
+ *      size="small"
+ *      variant="light">
+ *          Text button
+ *  </Button>
+ *
+ *  <Button
+ *      as="link"
+ *      href="https://onet.pl">
+ *          Text button
+ *  </Button>
+ * )
+ */
+var Button = function (_a) {
+    var _b;
+    var _c = _a.as, as = _c === void 0 ? 'button' : _c, size = _a.size, color = _a.color, variant = _a.variant, inactive = _a.inactive, props = _tslib.__rest(_a, ["as", "size", "color", "variant", "inactive"]);
+    var buttonClassNames = classnames__default['default'](main_module['default'][css_classes.cssButton], (_b = {},
+        _b[main_module['default'][css_classes.cssButtonS]] = size,
+        _b[main_module['default'][css_classes.cssButtonBg]] = !variant,
+        _b[main_module['default'][css_classes.cssButtonOutline]] = variant === 'outline',
+        _b[main_module['default'][css_classes.cssButtonLink]] = variant === 'link',
+        _b[main_module['default'][css_classes.cssButtonSecondary]] = color === 'secondary',
+        _b[main_module['default'][css_classes.cssButtonInactive]] = inactive,
+        _b));
+    return index.buttonTypes[as].render(props, buttonClassNames);
+};
+
+exports.default = Button;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/button/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/button/main.module.less';\n\nimport { IButtonProps } from './types';\nimport { cssButton, cssButtonOutline, cssButtonBg, cssButtonLink, cssButtonS, cssButtonSecondary, cssButtonInactive } from './css_classes';\nimport { buttonTypes } from './components';\n\n/**\n * @component\n * @example\n * return (\n *  <Button\n *      size=\"small\"\n *      variant=\"light\">\n *          Text button\n *  </Button>\n *\n *  <Button\n *      as=\"link\"\n *      href=\"https://onet.pl\">\n *          Text button\n *  </Button>\n * )\n */\nconst Button: React.FC<IButtonProps> = ({ as = 'button', size, color, variant, inactive, ...props }): JSX.Element => {\n    const buttonClassNames = classnames(cssClasses[cssButton], {\n        [cssClasses[cssButtonS]]: size,\n        [cssClasses[cssButtonBg]]: !variant,\n        [cssClasses[cssButtonOutline]]: variant === 'outline',\n        [cssClasses[cssButtonLink]]: variant === 'link',\n        [cssClasses[cssButtonSecondary]]: color === 'secondary',\n        [cssClasses[cssButtonInactive]]: inactive,\n    });\n\n    return buttonTypes[as].render(props, buttonClassNames);\n};\n\nexport default Button;\n"],"names":["classnames","cssClasses","cssButton","cssButtonS","cssButtonBg","cssButtonOutline","cssButtonLink","cssButtonSecondary","cssButtonInactive","buttonTypes"],"mappings":";;;;;;;;;;;;;;;AASA;;;;;;;;;;;;;;;;;IAiBM,MAAM,GAA2B,UAAC,EAA2D;;IAAzD,IAAA,UAAa,EAAb,kCAAa,EAAE,cAAI,EAAE,gBAAK,EAAE,oBAAO,EAAE,sBAAQ,EAAE,yEAAQ;IAC7F,IAAM,gBAAgB,GAAGA,8BAAU,CAACC,sBAAU,CAACC,qBAAS,CAAC;QACrD,GAACD,sBAAU,CAACE,sBAAU,CAAC,IAAG,IAAI;QAC9B,GAACF,sBAAU,CAACG,uBAAW,CAAC,IAAG,CAAC,OAAO;QACnC,GAACH,sBAAU,CAACI,4BAAgB,CAAC,IAAG,OAAO,KAAK,SAAS;QACrD,GAACJ,sBAAU,CAACK,yBAAa,CAAC,IAAG,OAAO,KAAK,MAAM;QAC/C,GAACL,sBAAU,CAACM,8BAAkB,CAAC,IAAG,KAAK,KAAK,WAAW;QACvD,GAACN,sBAAU,CAACO,6BAAiB,CAAC,IAAG,QAAQ;YAC3C,CAAC;IAEH,OAAOC,iBAAW,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC;AAC3D;;;;"}

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cssButtonsGroup = 'buttons-group';
+var cssButtonsGroupHCenter = cssButtonsGroup + "_hcenter";
+var cssButtonsGroupHRight = cssButtonsGroup + "_hright";
+var cssButtonsGroupReverseOrder = cssButtonsGroup + "_reverse-order";
+
+exports.cssButtonsGroup = cssButtonsGroup;
+exports.cssButtonsGroupHCenter = cssButtonsGroupHCenter;
+exports.cssButtonsGroupHRight = cssButtonsGroupHRight;
+exports.cssButtonsGroupReverseOrder = cssButtonsGroupReverseOrder;
+//# sourceMappingURL=css_classes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css_classes.js","sources":["../../../../../../../src/components/buttons_group/css_classes.ts"],"sourcesContent":["export const cssButtonsGroup = 'buttons-group';\nexport const cssButtonsGroupHCenter = `${cssButtonsGroup}_hcenter`;\nexport const cssButtonsGroupHRight = `${cssButtonsGroup}_hright`;\nexport const cssButtonsGroupReverseOrder = `${cssButtonsGroup}_reverse-order`;\n"],"names":[],"mappings":";;;;IAAa,eAAe,GAAG,gBAAgB;IAClC,sBAAsB,GAAM,eAAe,cAAW;IACtD,qBAAqB,GAAM,eAAe,aAAU;IACpD,2BAA2B,GAAM,eAAe;;;;;;;"}

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var main_module = require('../../css/buttons_group/main.module.less.js');
+var css_classes = require('./css_classes.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var ButtonsGroup = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? 'right' : _c, isOrderReversed = _a.isOrderReversed, children = _a.children;
+    var classNames = classnames__default['default'](main_module['default'][css_classes.cssButtonsGroup], (_b = {},
+        _b[main_module['default'][css_classes.cssButtonsGroupHCenter]] = align === 'center',
+        _b[main_module['default'][css_classes.cssButtonsGroupHRight]] = align === 'right',
+        _b[main_module['default'][css_classes.cssButtonsGroupReverseOrder]] = isOrderReversed,
+        _b));
+    return React__default['default'].createElement("div", { className: classNames }, children);
+};
+
+exports.default = ButtonsGroup;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/buttons_group/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classnames from 'classnames';\nimport cssClasses from '@css/buttons_group/main.module.less';\n\nimport { IButtonsGroupProps } from './types';\nimport { cssButtonsGroup, cssButtonsGroupHCenter, cssButtonsGroupHRight, cssButtonsGroupReverseOrder } from './css_classes';\n\nconst ButtonsGroup: React.FC<IButtonsGroupProps> = ({ align = 'right', isOrderReversed, children }): JSX.Element => {\n    const classNames = classnames(cssClasses[cssButtonsGroup], {\n        [cssClasses[cssButtonsGroupHCenter]]: align === 'center',\n        [cssClasses[cssButtonsGroupHRight]]: align === 'right',\n        [cssClasses[cssButtonsGroupReverseOrder]]: isOrderReversed,\n    });\n\n    return <div className={classNames}>{children}</div>;\n};\n\nexport default ButtonsGroup;\n"],"names":["classnames","cssClasses","cssButtonsGroup","cssButtonsGroupHCenter","cssButtonsGroupHRight","cssButtonsGroupReverseOrder","React"],"mappings":";;;;;;;;;;;;;;IAQM,YAAY,GAAiC,UAAC,EAA8C;;QAA5C,aAAe,EAAf,oCAAe,EAAE,oCAAe,EAAE,sBAAQ;IAC5F,IAAM,UAAU,GAAGA,8BAAU,CAACC,sBAAU,CAACC,2BAAe,CAAC;QACrD,GAACD,sBAAU,CAACE,kCAAsB,CAAC,IAAG,KAAK,KAAK,QAAQ;QACxD,GAACF,sBAAU,CAACG,iCAAqB,CAAC,IAAG,KAAK,KAAK,OAAO;QACtD,GAACH,sBAAU,CAACI,uCAA2B,CAAC,IAAG,eAAe;YAC5D,CAAC;IAEH,OAAOC,iDAAK,SAAS,EAAE,UAAU,IAAG,QAAQ,CAAO,CAAC;AACxD;;;;"}

package/build/cjs/packages/aurora/src/components/color_picker/components/buttons.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('./../../../../../../external_dependencies/react-i18next/dist/es/useTranslation.js');
+var _tslib = require('../../../../../../_virtual/_tslib.js');
+var index$2 = require('../../button/index.js');
+var index$1 = require('../../buttons_group/index.js');
+var main_module = require('../../../css/color_picker/main.module.less.js');
+var css_classes = require('../css_classes.js');
+var index = require('../../dropdown/context/index.js');
+var use_screen_detect = require('../../../hooks/use_screen_detect.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerButtons = function (_a) {
+    var restoreInitialColor = _a.restoreInitialColor;
+    var t = useTranslation.useTranslation()[0];
+    var toggleDropdown = React.useContext(index.DropdownContext).toggleDropdown;
+    var screenSize = use_screen_detect.useScreenDetect();
+    var onCancel = function () {
+        restoreInitialColor();
+        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+    };
+    var onChoose = function () {
+        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+    };
+    var primaryButtonProps = {
+        variant: screenSize === 'xs' ? undefined : 'link',
+        size: screenSize === 'xs' ? 'small' : undefined,
+    };
+    var secondaryButtonProps = {
+        variant: screenSize === 'xs' ? 'outline' : 'link',
+        size: screenSize === 'xs' ? 'small' : undefined,
+        color: screenSize === 'xs' ? undefined : 'secondary',
+    };
+    return (React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerButtonsGroup] },
+        React__default['default'].createElement(index$1['default'], null,
+            React__default['default'].createElement(index$2['default'], _tslib.__assign({ as: "button" }, secondaryButtonProps, { onClick: onCancel }), t('cancel')),
+            React__default['default'].createElement(index$2['default'], _tslib.__assign({ as: "button" }, primaryButtonProps, { onClick: onChoose }), t('choose')))));
+};
+
+exports.default = ColorPickerButtons;
+//# sourceMappingURL=buttons.js.map

package/build/cjs/packages/aurora/src/components/color_picker/components/buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,mFAAwE;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;"}

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _tslib = require('../../../../../../_virtual/_tslib.js');
+var main_module = require('../../../css/color_picker/main.module.less.js');
+var range_mappings = require('../../../utilities/range/range_mappings.js');
+var color_converter = require('../../../utilities/colors/color_converter.js');
+var utilities = require('../utilities.js');
+var event_registration = require('../../../utilities/events/event_registration.js');
+var context = require('../context.js');
+var css_classes = require('../css_classes.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var HuePicker = function (_a) {
+    var hueSliderRef = _a.hueSliderRef, classes = _a.classes;
+    var _b = React.useContext(context.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 = utilities.getHueFromPosition({
+            hueSliderRect: hueSliderRef.current.getBoundingClientRect(),
+            position: position,
+            screenName: screenName,
+        }).hue;
+        var _a = range_mappings.getIndicatorPositionFromPosition({
+            elementRect: hueSliderRef.current.getBoundingClientRect(),
+            position: position,
+        }), positionY = _a.positionY, positionX = _a.positionX;
+        setColor(function (color) { return (_tslib.__assign(_tslib.__assign({}, color), { hue: hue, hex: color_converter.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(event_registration.mapMouseEventToPosition(event));
+        event_registration.registerOnMouseEvents(onSliderEvent);
+    };
+    var onTouchStart = function (event) {
+        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
+            return;
+        }
+        onSliderEvent(event_registration.mapTouchEventToPosition(event));
+        event_registration.registerOnTouchEvents(onSliderEvent);
+    };
+    return (React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerHuePicker], ref: hueSliderRef, onMouseDown: onSliderDown, onTouchStart: onTouchStart },
+        React__default['default'].createElement("div", { className: classes.huePointer + " " + main_module['default'][css_classes.cssColorPickerPointer], onDrag: onSliderEvent, onTouchStart: onTouchStart },
+            React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerPointerInside] }))));
+};
+
+exports.default = HuePicker;
+//# sourceMappingURL=hue_picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hue_picker.js","sources":["../../../../../../../../src/components/color_picker/components/hue_picker.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport styles from '@css/color_picker/main.module.less';\nimport { getHueFromPosition } from '../utilities';\nimport { getIndicatorPositionFromPosition } from '@utilities/range/range_mappings';\nimport {\n    mapMouseEventToPosition,\n    mapTouchEventToPosition,\n    registerOnMouseEvents,\n    registerOnTouchEvents,\n} from '@utilities/events/event_registration';\nimport { IColorPickerContextProps, IHuePickerProps, IPosition } from '../types';\nimport { ColorPickerContext } from '@components/color_picker/context';\nimport { cssColorPickerHuePicker, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes';\nimport { ColorConverter } from '@utilities/colors/color_converter';\n\nconst HuePicker: React.FC<IHuePickerProps> = ({ hueSliderRef, classes }) => {\n    const { setColor, setHueSliderPointer, screenName } = useContext<IColorPickerContextProps>(ColorPickerContext);\n\n    const onSliderEvent = (position: IPosition) => {\n        if (!hueSliderRef?.current) {\n            return;\n        }\n        const { hue } = getHueFromPosition({\n            hueSliderRect: hueSliderRef.current.getBoundingClientRect(),\n            position,\n            screenName,\n        });\n        const { positionY, positionX } = getIndicatorPositionFromPosition({\n            elementRect: hueSliderRef.current.getBoundingClientRect(),\n            position,\n        });\n\n        setColor((color) => ({\n            ...color,\n            hue,\n            hex: ColorConverter.hsl2hex({ hue, saturation: color.saturation, lightness: color.lightness }),\n        }));\n        setHueSliderPointer({ top: positionY, left: positionX });\n    };\n\n    const onSliderDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | MouseEvent) => {\n        if (!hueSliderRef?.current) {\n            return;\n        }\n        onSliderEvent(mapMouseEventToPosition(event));\n        registerOnMouseEvents(onSliderEvent);\n    };\n\n    const onTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n        if (!hueSliderRef?.current) {\n            return;\n        }\n        onSliderEvent(mapTouchEventToPosition(event));\n        registerOnTouchEvents(onSliderEvent);\n    };\n\n    return (\n        <div className={styles[cssColorPickerHuePicker]} ref={hueSliderRef} onMouseDown={onSliderDown} onTouchStart={onTouchStart}>\n            <div className={`${classes.huePointer} ${styles[cssColorPickerPointer]}`} onDrag={onSliderEvent} onTouchStart={onTouchStart}>\n                <div className={styles[cssColorPickerPointerInside]} />\n            </div>\n        </div>\n    );\n};\n\nexport default HuePicker;\n"],"names":["ColorConverter","mapMouseEventToPosition","registerOnMouseEvents","mapTouchEventToPosition","registerOnTouchEvents","React","styles","cssColorPickerHuePicker","cssColorPickerPointer","cssColorPickerPointerInside"],"mappings":";;;;;;;;;;;;;;;;;;IAeM,SAAS,GAA8B,UAAC,EAAyB;QAAvB,8BAAY,EAAE,oBAAO;IAC3D,IAAA,iDAAwG,EAAtG,sBAAQ,EAAE,4CAAmB,EAAE,0BAAuE,CAAC;IAE/G,IAAM,aAAa,GAAG,UAAC,QAAmB;QACtC,IAAI,EAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,EAAE;YACxB,OAAO;SACV;QACO,IAAA;;;;cAAG,CAIR;QACG,IAAA;;;UAGJ,EAHM,wBAAS,EAAE,wBAGjB,CAAC;QAEH,QAAQ,CAAC,UAAC,KAAK,IAAK,4CACb,KAAK,KACR,GAAG,KAAA,EACH,GAAG,EAAEA,8BAAc,CAAC,OAAO,CAAC,EAAE,GAAG,KAAA,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,OAChG,CAAC,CAAC;QACJ,mBAAmB,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;KAC5D,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAAgE;QAClF,IAAI,EAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,EAAE;YACxB,OAAO;SACV;QACD,aAAa,CAACC,0CAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;QAC9CC,wCAAqB,CAAC,aAAa,CAAC,CAAC;KACxC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAAuC;QACzD,IAAI,EAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,EAAE;YACxB,OAAO;SACV;QACD,aAAa,CAACC,0CAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;QAC9CC,wCAAqB,CAAC,aAAa,CAAC,CAAC;KACxC,CAAC;IAEF,QACIC,iDAAK,SAAS,EAAEC,sBAAM,CAACC,mCAAuB,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY;QACrHF,iDAAK,SAAS,EAAK,OAAO,CAAC,UAAU,SAAIC,sBAAM,CAACE,iCAAqB,CAAG,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY;YACvHH,iDAAK,SAAS,EAAEC,sBAAM,CAACG,uCAA2B,CAAC,GAAI,CACrD,CACJ,EACR;AACN;;;;"}

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

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactJss_esm = require('./../../../../../../external_dependencies/react-jss/dist/react-jss.esm.js');
+var main_module = require('../../../css/color_picker/main.module.less.js');
+var context = require('../context.js');
+var css_classes = require('../css_classes.js');
+var index = require('../../dropdown/context/index.js');
+var input_wrapper = require('../../controls/components/input_wrapper.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var useStyles = reactJss_esm.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 = React.useContext(context.ColorPickerContext), setInitialColor = _b.setInitialColor, color = _b.color;
+    var isOpen = React.useContext(index.DropdownContext).isOpen;
+    var classes = useStyles({ color: color });
+    React.useEffect(function () {
+        if (isOpen) {
+            setInitialColor(color);
+        }
+        // eslint-disable-next-line
+    }, [isOpen]);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(input_wrapper['default'], { value: color === null || color === void 0 ? void 0 : color.hex, size: "small", isFocused: isOpen, preElements: React__default['default'].createElement("div", { className: classes.colorPreview + " " + main_module['default'][css_classes.cssColorPickerInputColorPreview] }) }),
+        React__default['default'].createElement("input", { type: "hidden", id: id, name: name, value: (color === null || color === void 0 ? void 0 : color.hex) || '', "aria-required": isRequired })));
+};
+
+exports.default = ColorPickerLabel;
+//# sourceMappingURL=label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,2BAA2B,2EAAgE;AAC3F;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/components/saturation_lightness_picker.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _tslib = require('../../../../../../_virtual/_tslib.js');
+var main_module = require('../../../css/color_picker/main.module.less.js');
+var range_mappings = require('../../../utilities/range/range_mappings.js');
+var color_converter = require('../../../utilities/colors/color_converter.js');
+var utilities = require('../utilities.js');
+var event_registration = require('../../../utilities/events/event_registration.js');
+var context = require('../context.js');
+var css_classes = require('../css_classes.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SaturationLightnessPicker = function (_a) {
+    var classes = _a.classes, saturationLightnessPanelRef = _a.saturationLightnessPanelRef;
+    var _b = React.useContext(context.ColorPickerContext), setColor = _b.setColor, setSaturationLightnessPointer = _b.setSaturationLightnessPointer;
+    var saturationLightnessPickerEvent = function (position) {
+        if (!saturationLightnessPanelRef.current) {
+            return;
+        }
+        var elementRect = saturationLightnessPanelRef.current.getBoundingClientRect();
+        var _a = range_mappings.getIndicatorPositionFromPosition({ elementRect: elementRect, position: position }), positionX = _a.positionX, positionY = _a.positionY;
+        var _b = utilities.getSaturationLightnessFromPosition({ elementRect: elementRect, position: position }), lightness = _b.lightness, saturation = _b.saturation;
+        setColor(function (color) { return (_tslib.__assign(_tslib.__assign({}, color), { saturation: saturation,
+            lightness: lightness, hex: color_converter.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(event_registration.mapMouseEventToPosition(event));
+        event_registration.registerOnMouseEvents(saturationLightnessPickerEvent);
+    };
+    var onTouchStart = function (event) {
+        event.preventDefault();
+        if (!(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
+            return;
+        }
+        saturationLightnessPickerEvent(event_registration.mapTouchEventToPosition(event));
+        event_registration.registerOnTouchEvents(saturationLightnessPickerEvent);
+    };
+    return (React__default['default'].createElement("div", { className: classes.saturationLightnessPanel + " " + main_module['default'][css_classes.cssColorPickerSaturationLightnessPicker], ref: saturationLightnessPanelRef, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerMask] + " " + main_module['default'][css_classes.cssColorPickerMaskWhite] }),
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerMask] + " " + main_module['default'][css_classes.cssColorPickerMaskBlack] }),
+        React__default['default'].createElement("div", { className: classes.saturationLightnessPointer + " " + main_module['default'][css_classes.cssColorPickerPointer], onDrag: saturationLightnessPickerEvent, onTouchStart: onTouchStart },
+            React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerPointerInside] }))));
+};
+
+exports.default = SaturationLightnessPicker;
+//# sourceMappingURL=saturation_lightness_picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"saturation_lightness_picker.js","sources":["../../../../../../../../src/components/color_picker/components/saturation_lightness_picker.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport styles from '@css/color_picker/main.module.less';\nimport { IColorPickerContextProps, IPosition, ISaturationLightnessPickerProps } from '../types';\nimport { getSaturationLightnessFromPosition } from '../utilities';\nimport { getIndicatorPositionFromPosition } from '@utilities/range/range_mappings';\nimport {\n    mapMouseEventToPosition,\n    mapTouchEventToPosition,\n    registerOnMouseEvents,\n    registerOnTouchEvents,\n} from '@utilities/events/event_registration';\nimport { ColorPickerContext } from '@components/color_picker/context';\nimport {\n    cssColorPickerMask,\n    cssColorPickerMaskBlack,\n    cssColorPickerMaskWhite,\n    cssColorPickerPointer,\n    cssColorPickerPointerInside,\n    cssColorPickerSaturationLightnessPicker,\n} from '@components/color_picker/css_classes';\nimport { ColorConverter } from '@utilities/colors/color_converter';\n\nconst SaturationLightnessPicker: React.FC<ISaturationLightnessPickerProps> = ({ classes, saturationLightnessPanelRef }) => {\n    const { setColor, setSaturationLightnessPointer } = useContext<IColorPickerContextProps>(ColorPickerContext);\n    const saturationLightnessPickerEvent = (position: IPosition) => {\n        if (!saturationLightnessPanelRef.current) {\n            return;\n        }\n        const elementRect = saturationLightnessPanelRef.current.getBoundingClientRect();\n        const { positionX, positionY } = getIndicatorPositionFromPosition({ elementRect, position });\n        const { lightness, saturation } = getSaturationLightnessFromPosition({ elementRect, position });\n        setColor((color) => ({\n            ...color,\n            saturation,\n            lightness,\n            hex: ColorConverter.hsl2hex({ hue: color.hue, lightness, saturation }),\n        }));\n\n        setSaturationLightnessPointer({\n            left: positionX,\n            top: positionY,\n        });\n    };\n\n    const onMouseDown = (event: React.MouseEvent<HTMLElement, MouseEvent> | MouseEvent) => {\n        event.preventDefault();\n        if (!saturationLightnessPanelRef?.current) {\n            return;\n        }\n        saturationLightnessPickerEvent(mapMouseEventToPosition(event));\n        registerOnMouseEvents(saturationLightnessPickerEvent);\n    };\n\n    const onTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        if (!saturationLightnessPanelRef?.current) {\n            return;\n        }\n        saturationLightnessPickerEvent(mapTouchEventToPosition(event));\n\n        registerOnTouchEvents(saturationLightnessPickerEvent);\n    };\n\n    return (\n        <div\n            className={`${classes.saturationLightnessPanel} ${styles[cssColorPickerSaturationLightnessPicker]}`}\n            ref={saturationLightnessPanelRef}\n            onMouseDown={onMouseDown}\n            onTouchStart={onTouchStart}\n        >\n            <div className={`${styles[cssColorPickerMask]} ${styles[cssColorPickerMaskWhite]}`} />\n            <div className={`${styles[cssColorPickerMask]} ${styles[cssColorPickerMaskBlack]}`} />\n            <div\n                className={`${classes.saturationLightnessPointer} ${styles[cssColorPickerPointer]}`}\n                onDrag={saturationLightnessPickerEvent}\n                onTouchStart={onTouchStart}\n            >\n                <div className={styles[cssColorPickerPointerInside]} />\n            </div>\n        </div>\n    );\n};\n\nexport default SaturationLightnessPicker;\n"],"names":["ColorConverter","mapMouseEventToPosition","registerOnMouseEvents","mapTouchEventToPosition","registerOnTouchEvents","React","styles","cssColorPickerSaturationLightnessPicker","cssColorPickerMask","cssColorPickerMaskWhite","cssColorPickerMaskBlack","cssColorPickerPointer","cssColorPickerPointerInside"],"mappings":";;;;;;;;;;;;;;;;;;IAsBM,yBAAyB,GAA8C,UAAC,EAAwC;QAAtC,oBAAO,EAAE,4DAA2B;IAC1G,IAAA,iDAAsG,EAApG,sBAAQ,EAAE,gEAA0F,CAAC;IAC7G,IAAM,8BAA8B,GAAG,UAAC,QAAmB;QACvD,IAAI,CAAC,2BAA2B,CAAC,OAAO,EAAE;YACtC,OAAO;SACV;QACD,IAAM,WAAW,GAAG,2BAA2B,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAC1E,IAAA,sGAAsF,EAApF,wBAAS,EAAE,wBAAyE,CAAC;QACvF,IAAA,mGAAyF,EAAvF,wBAAS,EAAE,0BAA4E,CAAC;QAChG,QAAQ,CAAC,UAAC,KAAK,IAAK,4CACb,KAAK,KACR,UAAU,YAAA;YACV,SAAS,WAAA,EACT,GAAG,EAAEA,8BAAc,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,CAAC,OACxE,CAAC,CAAC;QAEJ,6BAA6B,CAAC;YAC1B,IAAI,EAAE,SAAS;YACf,GAAG,EAAE,SAAS;SACjB,CAAC,CAAC;KACN,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,KAA6D;QAC9E,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,EAAC,2BAA2B,aAA3B,2BAA2B,uBAA3B,2BAA2B,CAAE,OAAO,CAAA,EAAE;YACvC,OAAO;SACV;QACD,8BAA8B,CAACC,0CAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/DC,wCAAqB,CAAC,8BAA8B,CAAC,CAAC;KACzD,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAAuC;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,EAAC,2BAA2B,aAA3B,2BAA2B,uBAA3B,2BAA2B,CAAE,OAAO,CAAA,EAAE;YACvC,OAAO;SACV;QACD,8BAA8B,CAACC,0CAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;QAE/DC,wCAAqB,CAAC,8BAA8B,CAAC,CAAC;KACzD,CAAC;IAEF,QACIC,iDACI,SAAS,EAAK,OAAO,CAAC,wBAAwB,SAAIC,sBAAM,CAACC,mDAAuC,CAAG,EACnG,GAAG,EAAE,2BAA2B,EAChC,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY;QAE1BF,iDAAK,SAAS,EAAKC,sBAAM,CAACE,8BAAkB,CAAC,SAAIF,sBAAM,CAACG,mCAAuB,CAAG,GAAI;QACtFJ,iDAAK,SAAS,EAAKC,sBAAM,CAACE,8BAAkB,CAAC,SAAIF,sBAAM,CAACI,mCAAuB,CAAG,GAAI;QACtFL,iDACI,SAAS,EAAK,OAAO,CAAC,0BAA0B,SAAIC,sBAAM,CAACK,iCAAqB,CAAG,EACnF,MAAM,EAAE,8BAA8B,EACtC,YAAY,EAAE,YAAY;YAE1BN,iDAAK,SAAS,EAAEC,sBAAM,CAACM,uCAA2B,CAAC,GAAI,CACrD,CACJ,EACR;AACN;;;;"}

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MAX_HUE_VALUE = 360;
+var MAX_LIGHTNESS_VALUE = 100;
+var MAX_SATURATION_VALUE = 100;
+var SATURATION_OFFSET = 0.00001; // To avoid package bug
+
+exports.MAX_HUE_VALUE = MAX_HUE_VALUE;
+exports.MAX_LIGHTNESS_VALUE = MAX_LIGHTNESS_VALUE;
+exports.MAX_SATURATION_VALUE = MAX_SATURATION_VALUE;
+exports.SATURATION_OFFSET = SATURATION_OFFSET;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../../src/components/color_picker/constants.ts"],"sourcesContent":["export const MAX_HUE_VALUE = 360;\nexport const MAX_LIGHTNESS_VALUE = 100;\nexport const MAX_SATURATION_VALUE = 100;\nexport const SATURATION_OFFSET = 0.00001; // To avoid package bug\n"],"names":[],"mappings":";;;;IAAa,aAAa,GAAG,IAAI;IACpB,mBAAmB,GAAG,IAAI;IAC1B,oBAAoB,GAAG,IAAI;IAC3B,iBAAiB,GAAG,QAAQ;;;;;;;"}

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var ColorPickerContext = React.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 () { },
+});
+
+exports.ColorPickerContext = ColorPickerContext;
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../../../../src/components/color_picker/context.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { IColorPickerContextProps } from './types';\n\nexport const ColorPickerContext = createContext<IColorPickerContextProps>({\n    color: {\n        hue: 0,\n        saturation: 0,\n        lightness: 0,\n        hex: '',\n    },\n    setColor: () => {},\n    initialColor: {\n        hue: 0,\n        saturation: 0,\n        lightness: 0,\n        hex: '',\n    },\n    screenName: '',\n    setInitialColor: () => {},\n    hueSliderPointer: { top: 0, left: 0 },\n    setHueSliderPointer: () => {},\n    saturationLightnessPointer: { top: 0, left: 0 },\n    setSaturationLightnessPointer: () => {},\n});\n"],"names":["createContext"],"mappings":";;;;;;IAGa,kBAAkB,GAAGA,mBAAa,CAA2B;IACtE,KAAK,EAAE;QACH,GAAG,EAAE,CAAC;QACN,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,CAAC;QACZ,GAAG,EAAE,EAAE;KACV;IACD,QAAQ,EAAE,eAAQ;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,eAAQ;IACzB,gBAAgB,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;IACrC,mBAAmB,EAAE,eAAQ;IAC7B,0BAA0B,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;IAC/C,6BAA6B,EAAE,eAAQ;CAC1C;;;;"}

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cssColorPicker = 'color-picker';
+var cssColorPickerInputColorPreview = cssColorPicker + "__input-color-preview";
+var cssColorPickerButtonsGroup = cssColorPicker + "__buttons-group";
+var cssColorPickerHuePicker = cssColorPicker + "__hue-picker";
+var cssColorPickerPointer = cssColorPicker + "__pointer";
+var cssColorPickerPointerInside = cssColorPicker + "__pointer-inside";
+var cssColorPickerSaturationLightnessPicker = cssColorPicker + "__saturation-lightness-picker";
+var cssColorPickerMask = cssColorPicker + "__mask";
+var cssColorPickerMaskWhite = cssColorPickerMask + "_white";
+var cssColorPickerMaskBlack = cssColorPickerMask + "_black";
+var cssColorPickerPreviewContainer = cssColorPicker + "__preview-container";
+var cssColorPickerPreview = cssColorPicker + "__preview";
+
+exports.cssColorPicker = cssColorPicker;
+exports.cssColorPickerButtonsGroup = cssColorPickerButtonsGroup;
+exports.cssColorPickerHuePicker = cssColorPickerHuePicker;
+exports.cssColorPickerInputColorPreview = cssColorPickerInputColorPreview;
+exports.cssColorPickerMask = cssColorPickerMask;
+exports.cssColorPickerMaskBlack = cssColorPickerMaskBlack;
+exports.cssColorPickerMaskWhite = cssColorPickerMaskWhite;
+exports.cssColorPickerPointer = cssColorPickerPointer;
+exports.cssColorPickerPointerInside = cssColorPickerPointerInside;
+exports.cssColorPickerPreview = cssColorPickerPreview;
+exports.cssColorPickerPreviewContainer = cssColorPickerPreviewContainer;
+exports.cssColorPickerSaturationLightnessPicker = cssColorPickerSaturationLightnessPicker;
+//# sourceMappingURL=css_classes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css_classes.js","sources":["../../../../../../../src/components/color_picker/css_classes.ts"],"sourcesContent":["export const cssColorPicker = 'color-picker';\nexport const cssColorPickerInputColorPreview = `${cssColorPicker}__input-color-preview`;\nexport const cssColorPickerButtonsGroup = `${cssColorPicker}__buttons-group`;\nexport const cssColorPickerHuePicker = `${cssColorPicker}__hue-picker`;\nexport const cssColorPickerPointer = `${cssColorPicker}__pointer`;\nexport const cssColorPickerPointerInside = `${cssColorPicker}__pointer-inside`;\nexport const cssColorPickerSaturationLightnessPicker = `${cssColorPicker}__saturation-lightness-picker`;\nexport const cssColorPickerMask = `${cssColorPicker}__mask`;\nexport const cssColorPickerMaskWhite = `${cssColorPickerMask}_white`;\nexport const cssColorPickerMaskBlack = `${cssColorPickerMask}_black`;\nexport const cssColorPickerPreviewContainer = `${cssColorPicker}__preview-container`;\nexport const cssColorPickerPreview = `${cssColorPicker}__preview`;\n"],"names":[],"mappings":";;;;IAAa,cAAc,GAAG,eAAe;IAChC,+BAA+B,GAAM,cAAc,2BAAwB;IAC3E,0BAA0B,GAAM,cAAc,qBAAkB;IAChE,uBAAuB,GAAM,cAAc,kBAAe;IAC1D,qBAAqB,GAAM,cAAc,eAAY;IACrD,2BAA2B,GAAM,cAAc,sBAAmB;IAClE,uCAAuC,GAAM,cAAc,mCAAgC;IAC3F,kBAAkB,GAAM,cAAc,YAAS;IAC/C,uBAAuB,GAAM,kBAAkB,YAAS;IACxD,uBAAuB,GAAM,kBAAkB,YAAS;IACxD,8BAA8B,GAAM,cAAc,yBAAsB;IACxE,qBAAqB,GAAM,cAAc;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,114 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _tslib = require('../../../../../_virtual/_tslib.js');
+var reactJss_esm = require('./../../../../../external_dependencies/react-jss/dist/react-jss.esm.js');
+var input = require('../controls/components/input.js');
+var main_module = require('../../css/color_picker/main.module.less.js');
+var utilities = require('./utilities.js');
+var context = require('./context.js');
+var css_classes = require('./css_classes.js');
+var saturation_lightness_picker = require('./components/saturation_lightness_picker.js');
+var hue_picker = require('./components/hue_picker.js');
+var buttons = require('./components/buttons.js');
+var use_color_picker = require('./use_color_picker.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var useStyles = reactJss_esm.createUseStyles({
+    saturationLightnessPanel: {
+        background: function (_a) {
+            var hue = _a.color.hue;
+            return "hsl(" + hue + ",100%, 50%)";
+        },
+    },
+    saturationLightnessPointer: {
+        transform: function (_a) {
+            var _b = _a.saturationLightnessPointer, left = _b.left, top = _b.top;
+            return "translate3d(" + (left - 10) + "px," + (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(" + (left - 10) + "px,0px,0px)" : "translate3d(0px," + (top - 10) + "px,0px)";
+        },
+        '& > div': {
+            background: function (_a) {
+                var hue = _a.color.hue;
+                return "hsl(" + hue + ",100%, 50%)";
+            },
+        },
+    },
+    colorPreview: {
+        background: function (_a) {
+            var hex = _a.color.hex;
+            return hex;
+        },
+    },
+});
+var PureColorPicker = function (_a) {
+    var hideChooseCancelButtons = _a.hideChooseCancelButtons;
+    var _b = React.useContext(context.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 = React.useRef(null);
+    var hueSliderRef = React.useRef(null);
+    var classes = useStyles({ color: color, saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer, screenName: screenName });
+    var inputOnChange = function (event) {
+        var value = event.target.value;
+        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
+            return;
+        }
+        try {
+            var color_1 = utilities.getColorFromHex(value);
+            var _a = utilities.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(_tslib.__assign(_tslib.__assign({}, color), { hex: value }));
+        }
+    };
+    var restoreInitialColor = function () {
+        setColor(initialColor);
+    };
+    return (React__default['default'].createElement("div", { className: "" + main_module['default'][css_classes.cssColorPicker] },
+        React__default['default'].createElement(saturation_lightness_picker['default'], { classes: classes, saturationLightnessPanelRef: saturationLightnessPanelRef }),
+        React__default['default'].createElement(hue_picker['default'], { hueSliderRef: hueSliderRef, classes: classes }),
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerPreviewContainer] },
+            React__default['default'].createElement("div", { className: classes.preview + " " + main_module['default'][css_classes.cssColorPickerPreview] }),
+            React__default['default'].createElement("div", null,
+                React__default['default'].createElement(input['default'], { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex, onChange: inputOnChange }))),
+        !hideChooseCancelButtons && React__default['default'].createElement(buttons['default'], { restoreInitialColor: restoreInitialColor })));
+};
+var index = (function (_a) {
+    var initialColor = _a.initialColor, onChange = _a.onChange, hideChooseCancelButtons = _a.hideChooseCancelButtons, name = _a.name;
+    var colorPickerContext = use_color_picker.useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange: onChange });
+    return (React__default['default'].createElement(context.ColorPickerContext.Provider, { value: colorPickerContext },
+        React__default['default'].createElement("input", { type: "hidden", name: name }),
+        React__default['default'].createElement(PureColorPicker, { hideChooseCancelButtons: hideChooseCancelButtons })));
+});
+
+exports.PureColorPicker = PureColorPicker;
+exports.default = index;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,wEAA6D;AACxF;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;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;"}