@dreamcommerce/aurora 0.3.5 → 0.3.8

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

@@ -0,0 +1,42 @@
+import 'react';
+import { __rest } from '../../../../../_virtual/_tslib.js';
+import { cssButton, cssButtonS, cssButtonBg, cssButtonOutline, cssButtonLink, cssButtonInactive } from './css_classes.js';
+import { buttonTypes } from './components/index.js';
+import classnames from 'classnames';
+import cssClasses from '../../css/button/main.module.less.js';
+
+/**
+ * @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, _d = _a.className, className = _d === void 0 ? '' : _d, props = __rest(_a, ["as", "size", "color", "variant", "inactive", "className"]);
+    var btnColor = "".concat(cssButton, "_").concat(color);
+    var buttonClassNames = classnames(cssClasses[cssButton], (_b = {},
+        _b[className] = className,
+        _b[cssClasses[cssButtonS]] = size,
+        _b[cssClasses[cssButtonBg]] = !variant,
+        _b[cssClasses[cssButtonOutline]] = variant === 'outline',
+        _b[cssClasses[cssButtonLink]] = variant === 'link',
+        _b[cssClasses[btnColor]] = true,
+        _b[cssClasses[cssButtonInactive]] = inactive,
+        _b));
+    return buttonTypes[as].render(props, buttonClassNames);
+};
+
+export default Button;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/button/index.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;"}

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

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    as?: 'button' | 'link';
+    size?: 'small';
+    variant?: 'outline' | 'link';
+    inactive?: boolean;
+    color?: 'secondary' | 'on-dark-bg';
+    href?: string;
+    target?: '_blank';
+    children: NodeListOf<HTMLElement> | string | Element;
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const cssButtonsGroup = "buttons-group";
+export declare const cssButtonsGroupHCenter: string;
+export declare const cssButtonsGroupHRight: string;
+export declare const cssButtonsGroupReverseOrder: string;

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

@@ -0,0 +1,7 @@
+var cssButtonsGroup = 'buttons-group';
+var cssButtonsGroupHCenter = "".concat(cssButtonsGroup, "_hcenter");
+var cssButtonsGroupHRight = "".concat(cssButtonsGroup, "_hright");
+var cssButtonsGroupReverseOrder = "".concat(cssButtonsGroup, "_reverse-order");
+
+export { cssButtonsGroup, cssButtonsGroupHCenter, cssButtonsGroupHRight, cssButtonsGroupReverseOrder };
+//# sourceMappingURL=css_classes.js.map

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

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

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import classnames from 'classnames';
+import cssClasses from '../../css/buttons_group/main.module.less.js';
+import { cssButtonsGroup, cssButtonsGroupHCenter, cssButtonsGroupHRight, cssButtonsGroupReverseOrder } from './css_classes.js';
+
+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(cssClasses[cssButtonsGroup], (_b = {},
+        _b[cssClasses[cssButtonsGroupHCenter]] = align === 'center',
+        _b[cssClasses[cssButtonsGroupHRight]] = align === 'right',
+        _b[cssClasses[cssButtonsGroupReverseOrder]] = isOrderReversed,
+        _b));
+    return React.createElement("div", { className: classNames }, children);
+};
+
+export default ButtonsGroup;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/buttons_group/index.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;"}

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface IButtonsGroupProps {
+    align?: 'left' | 'center' | 'right';
+    isOrderReversed?: boolean;
+    children: ReactNode;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { __assign } from '../../../../../../_virtual/_tslib.js';
+import Button from '../../button/index.js';
+import ButtonsGroup from '../../buttons_group/index.js';
+import styles from '../../../css/color_picker/main.module.less.js';
+import { cssColorPickerButtonsGroup } from '../css_classes.js';
+import { DropdownContext } from '../../dropdown/context/index.js';
+import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
+
+var ColorPickerButtons = function (_a) {
+    var restoreInitialColor = _a.restoreInitialColor;
+    var t = useTranslation()[0];
+    var toggleDropdown = useContext(DropdownContext).toggleDropdown;
+    var screenSize = 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.createElement("div", { className: styles[cssColorPickerButtonsGroup] },
+        React.createElement(ButtonsGroup, null,
+            React.createElement(Button, __assign({ as: "button" }, secondaryButtonProps, { onClick: onCancel }), t('cancel')),
+            React.createElement(Button, __assign({ as: "button" }, primaryButtonProps, { onClick: onChoose }), t('choose')))));
+};
+
+export default ColorPickerButtons;
+//# sourceMappingURL=buttons.js.map

package/build/esm/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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/hue_picker.d.ts

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

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

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import { __assign } from '../../../../../../_virtual/_tslib.js';
+import styles from '../../../css/color_picker/main.module.less.js';
+import { getIndicatorPositionFromPosition } from '../../../utilities/range/range_mappings.js';
+import { ColorConverter } from '../../../utilities/colors/color_converter.js';
+import { getHueFromPosition } from '../utilities.js';
+import { mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents } from '../../../utilities/events/event_registration.js';
+import { ColorPickerContext } from '../context.js';
+import { cssColorPickerHuePicker, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
+
+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":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;"}

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 React, { useContext, useEffect } from 'react';
+import { createUseStyles } from '../../../../../../external/react-jss/dist/react-jss.esm.js';
+import styles from '../../../css/color_picker/main.module.less.js';
+import { ColorPickerContext } from '../context.js';
+import { cssColorPickerInputColorPreview } from '../css_classes.js';
+import { DropdownContext } from '../../dropdown/context/index.js';
+import InputWrapper from '../../controls/components/input_wrapper.js';
+
+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":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,gCAAgC,4DAAgE;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;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/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,51 @@
+import React, { useContext } from 'react';
+import { __assign } from '../../../../../../_virtual/_tslib.js';
+import styles from '../../../css/color_picker/main.module.less.js';
+import { getIndicatorPositionFromPosition } from '../../../utilities/range/range_mappings.js';
+import { ColorConverter } from '../../../utilities/colors/color_converter.js';
+import { getSaturationLightnessFromPosition } from '../utilities.js';
+import { mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents } from '../../../utilities/events/event_registration.js';
+import { ColorPickerContext } from '../context.js';
+import { cssColorPickerSaturationLightnessPicker, cssColorPickerMask, cssColorPickerMaskWhite, cssColorPickerMaskBlack, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
+
+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":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;"}

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,7 @@
+var MAX_HUE_VALUE = 360;
+var MAX_LIGHTNESS_VALUE = 100;
+var MAX_SATURATION_VALUE = 100;
+var SATURATION_OFFSET = 0.00001; // To avoid package bug
+
+export { MAX_HUE_VALUE, MAX_LIGHTNESS_VALUE, MAX_SATURATION_VALUE, SATURATION_OFFSET };
+//# sourceMappingURL=constants.js.map

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

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

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,26 @@
+import { createContext } from 'react';
+
+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 () { }
+});
+
+export { ColorPickerContext };
+//# sourceMappingURL=context.js.map

package/build/esm/packages/aurora/src/components/color_picker/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;AACA;AACA;"}

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,15 @@
+var cssColorPicker = 'color-picker';
+var cssColorPickerInputColorPreview = "".concat(cssColorPicker, "__input-color-preview");
+var cssColorPickerButtonsGroup = "".concat(cssColorPicker, "__buttons-group");
+var cssColorPickerHuePicker = "".concat(cssColorPicker, "__hue-picker");
+var cssColorPickerPointer = "".concat(cssColorPicker, "__pointer");
+var cssColorPickerPointerInside = "".concat(cssColorPicker, "__pointer-inside");
+var cssColorPickerSaturationLightnessPicker = "".concat(cssColorPicker, "__saturation-lightness-picker");
+var cssColorPickerMask = "".concat(cssColorPicker, "__mask");
+var cssColorPickerMaskWhite = "".concat(cssColorPickerMask, "_white");
+var cssColorPickerMaskBlack = "".concat(cssColorPickerMask, "_black");
+var cssColorPickerPreviewContainer = "".concat(cssColorPicker, "__preview-container");
+var cssColorPickerPreview = "".concat(cssColorPicker, "__preview");
+
+export { cssColorPicker, cssColorPickerButtonsGroup, cssColorPickerHuePicker, cssColorPickerInputColorPreview, cssColorPickerMask, cssColorPickerMaskBlack, cssColorPickerMaskWhite, cssColorPickerPointer, cssColorPickerPointerInside, cssColorPickerPreview, cssColorPickerPreviewContainer, cssColorPickerSaturationLightnessPicker };
+//# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/color_picker/css_classes.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;"}

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,112 @@
+import React, { useContext, useRef } from 'react';
+import { __assign } from '../../../../../_virtual/_tslib.js';
+import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
+import Input from '../controls/components/input.js';
+import styles from '../../css/color_picker/main.module.less.js';
+import { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities.js';
+import { ColorPickerContext } from './context.js';
+import { cssColorPicker, cssColorPickerPreviewContainer, cssColorPickerPreview } from './css_classes.js';
+import SaturationLightnessPicker from './components/saturation_lightness_picker.js';
+import HuePicker from './components/hue_picker.js';
+import ColorPickerButtons from './components/buttons.js';
+import { useColorPicker } from './use_color_picker.js';
+import withTranslation from '../../utilities/translation/with_translation.js';
+
+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;
+        }
+    }
+});
+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(HuePicker, { 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 })));
+};
+var index = withTranslation(ColorPickerWithContext);
+
+export default index;
+export { PureColorPicker };
+//# sourceMappingURL=index.js.map

package/build/esm/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,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/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"}