@dreamcommerce/aurora 2.12.1-2 → 2.12.1-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +2 -2
  2. package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js +3 -3
  3. package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +12 -13
  4. package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/color_picker_new/index.js +7 -7
  6. package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js +9 -5
  7. package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
  8. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.d.ts +2 -2
  9. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.d.ts +2 -2
  10. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +2 -2
  11. package/build/esm/packages/aurora/src/components/color_picker_new/constants.d.ts +3 -3
  12. package/build/esm/packages/aurora/src/components/color_picker_new/constants.js +3 -3
  13. package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts +6 -6
  14. package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +12 -13
  15. package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map +1 -1
  16. package/build/esm/packages/aurora/src/components/color_picker_new/index.js +7 -7
  17. package/build/esm/packages/aurora/src/components/color_picker_new/types.d.ts +9 -9
  18. package/build/esm/packages/aurora/src/components/color_picker_new/utilities.d.ts +7 -7
  19. package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js +9 -5
  20. package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
  21. package/build/esm/packages/aurora/src/index.d.ts +3 -2
  22. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js CHANGED
@@ -32,8 +32,8 @@ const ColorPickerSwatches = ({ color, onClick }) => {
32
32
  React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchesHeader] },
33
33
  React__default['default'].createElement("p", null, t('Shades of color'))),
34
34
  React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchesContent] }, shades.map((shade, index) => {
35
- const tiny = tinycolor['default'](shade);
36
- const rgbColor = tiny.toRgb();
35
+ const color = tinycolor['default'](shade);
36
+ const rgbColor = color.toRgb();
37
37
  const handleOnClick = () => {
38
38
  onClick === null || onClick === void 0 ? void 0 : onClick(rgbColor);
39
39
  };
package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js CHANGED
@@ -3,19 +3,19 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const COLOR_PICKER_INITIAL_STATE = {
6
- hsl: {
6
+ hsla: {
7
7
  h: 0,
8
8
  s: 0,
9
9
  l: 0,
10
10
  a: 0
11
11
  },
12
- hsv: {
12
+ hsva: {
13
13
  h: 0,
14
14
  s: 0,
15
15
  v: 0,
16
16
  a: 0
17
17
  },
18
- rgb: {
18
+ rgba: {
19
19
  r: 0,
20
20
  g: 0,
21
21
  b: 0,
package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js CHANGED
@@ -12,23 +12,22 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
12
12
  React.useEffect(() => {
13
13
  setColors(initialColor);
14
14
  }, [initialColor]);
15
- const handleChangeSaturation = (hsv) => {
16
- setColors(hsv);
17
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
15
+ React.useEffect(() => {
16
+ onChange === null || onChange === void 0 ? void 0 : onChange(color);
17
+ }, [color]);
18
+ const handleChangeSaturation = (hsva) => {
19
+ setColors(hsva);
18
20
  };
19
- const handleChangeHue = (hsl) => {
20
- const hueColorSet = utilities.getColorFormatsWithoutHsv(hsl);
21
+ const handleChangeHue = (hsls) => {
22
+ const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
21
23
  setColor({ ...color, ...hueColorSet });
22
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
23
24
  };
24
- const handleChangeAlpha = (hsl) => {
25
- const hueColorSet = utilities.getColorFormatsWithoutHsv(hsl);
25
+ const handleChangeAlpha = (hsls) => {
26
+ const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
26
27
  setColor({ ...color, ...hueColorSet });
27
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
28
28
  };
29
- const handlePickSwatch = (rgb) => {
30
- setColors(rgb);
31
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
29
+ const handlePickSwatch = (rgba) => {
30
+ setColors(rgba);
32
31
  };
33
32
  const handleCancel = () => {
34
33
  setColors(choosenColor);
@@ -36,7 +35,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
36
35
  };
37
36
  const handleSave = () => {
38
37
  setChoosenColor(color.hex);
39
- onSave === null || onSave === void 0 ? void 0 : onSave(color.hex);
38
+ onSave === null || onSave === void 0 ? void 0 : onSave(color);
40
39
  };
41
40
  const setColors = (color) => {
42
41
  setColor(utilities.getAllColorFormats(color));
package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/aurora/src/components/color_picker_new/index.js CHANGED
@@ -33,22 +33,22 @@ const ColorPickerNew = ({ initialColor = '#fff', pickerText, onChange, onCancel,
33
33
  React__default['default'].createElement(index['default'].CustomLabel, null,
34
34
  React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputContainer]}` },
35
35
  React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputColorSwatchContainer]}` },
36
- React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgb })),
37
- React__default['default'].createElement(input['default'], { value: `# ${(_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase()}`, readOnly: true }))),
36
+ React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba })),
37
+ React__default['default'].createElement(input['default'], { value: (_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase(), readOnly: true }))),
38
38
  React__default['default'].createElement(index['default'].Content, { onClickOutside: handleCancel },
39
39
  React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, { text: pickerText, onCancel: handleCancel }),
40
40
  React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerContainer]}` },
41
41
  React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerSaturation]}` },
42
- React__default['default'].createElement(index$1.common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.hsl, hsv: color === null || color === void 0 ? void 0 : color.hsv, pointer: () => React__default['default'].createElement(colorPickerHandler.ColorPickerHandler, { size: "big" }), onChange: handleChangeSaturation })),
42
+ React__default['default'].createElement(index$1.common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.hsla, hsv: color === null || color === void 0 ? void 0 : color.hsva, pointer: () => React__default['default'].createElement(colorPickerHandler.ColorPickerHandler, { size: "big" }), onChange: handleChangeSaturation })),
43
43
  React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHueAlphaContanier]}` },
44
44
  React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHueAlphaContanierSet]}` },
45
45
  React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHue]}` },
46
- React__default['default'].createElement(index$1.common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.hsl, pointer: colorPickerHandler.ColorPickerHandler, onChange: handleChangeHue })),
46
+ React__default['default'].createElement(index$1.common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: colorPickerHandler.ColorPickerHandler, onChange: handleChangeHue })),
47
47
  React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerAlpha]}` },
48
- React__default['default'].createElement(index$1.common.Alpha, { rgb: color.rgb, hsl: color === null || color === void 0 ? void 0 : color.hsl, pointer: colorPickerHandler.ColorPickerHandler, onChange: handleChangeAlpha }))),
48
+ React__default['default'].createElement(index$1.common.Alpha, { rgb: color.rgba, hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: colorPickerHandler.ColorPickerHandler, onChange: handleChangeAlpha }))),
49
49
  React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHueAlphaContanierResult]}` },
50
- React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgb, size: "big" }))),
51
- React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, { color: color.hsl, onClick: handlePickSwatch })),
50
+ React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba, size: "big" }))),
51
+ React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, { color: color.hsla, onClick: handlePickSwatch })),
52
52
  React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, { onCancel: handleCancel, onSave: handleSave, color: color === null || color === void 0 ? void 0 : color.hex })))));
53
53
  };
54
54
 
package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js CHANGED
@@ -7,15 +7,19 @@ var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
7
7
  const getAllColorFormats = (color) => {
8
8
  const colorSet = tinycolor['default'](color);
9
9
  return {
10
- hsl: colorSet.toHsl(),
11
- hsv: colorSet.toHsv(),
12
- rgb: colorSet.toRgb(),
13
- hex: getHexValue(colorSet)
10
+ hsla: colorSet.toHsl(),
11
+ hsva: colorSet.toHsv(),
12
+ rgba: colorSet.toRgb(),
13
+ hex: `#${getHexValue(colorSet)}`
14
14
  };
15
15
  };
16
16
  const getColorFormatsWithoutHsv = (hue) => {
17
17
  const colorSet = tinycolor['default'](hue);
18
- return { hsl: hue, rgb: colorSet.toRgb(), hex: getHexValue(colorSet) };
18
+ return {
19
+ hsla: hue,
20
+ rgba: colorSet.toRgb(),
21
+ hex: `#${getHexValue(colorSet)}`
22
+ };
19
23
  };
20
24
  const getHexValue = (colorSet) => {
21
25
  const alphaValue = colorSet.getAlpha();
package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { ColorPickerColorFormats } from '../types';
2
2
  import React from 'react';
3
3
  interface IColorPickerSwatchProps {
4
- color: ColorPickerColorFormats['rgb'];
4
+ color: ColorPickerColorFormats['rgba'];
5
5
  size?: 'small' | 'big';
6
- onClick?: (color: ColorPickerColorFormats['rgb']) => void;
6
+ onClick?: (color: ColorPickerColorFormats['rgba']) => void;
7
7
  }
8
8
  export declare const ColorPickerSwatch: React.FC<IColorPickerSwatchProps>;
9
9
  export {};
package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { ColorPickerColorFormats } from '../types';
2
2
  import React from 'react';
3
3
  interface IColorPickerSwatchesProps {
4
- color: ColorPickerColorFormats['hsl'];
5
- onClick?: (color: ColorPickerColorFormats['rgb']) => void;
4
+ color: ColorPickerColorFormats['hsla'];
5
+ onClick?: (color: ColorPickerColorFormats['rgba']) => void;
6
6
  }
7
7
  export declare const ColorPickerSwatches: React.FC<IColorPickerSwatchesProps>;
8
8
  export {};
package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js CHANGED
@@ -24,8 +24,8 @@ const ColorPickerSwatches = ({ color, onClick }) => {
24
24
  React.createElement("div", { className: styles[cssColorPickerSwatchesHeader] },
25
25
  React.createElement("p", null, t('Shades of color'))),
26
26
  React.createElement("div", { className: styles[cssColorPickerSwatchesContent] }, shades.map((shade, index) => {
27
- const tiny = tinycolor(shade);
28
- const rgbColor = tiny.toRgb();
27
+ const color = tinycolor(shade);
28
+ const rgbColor = color.toRgb();
29
29
  const handleOnClick = () => {
30
30
  onClick === null || onClick === void 0 ? void 0 : onClick(rgbColor);
31
31
  };
package/build/esm/packages/aurora/src/components/color_picker_new/constants.d.ts CHANGED
@@ -1,17 +1,17 @@
1
1
  export declare const COLOR_PICKER_INITIAL_STATE: {
2
- hsl: {
2
+ hsla: {
3
3
  h: number;
4
4
  s: number;
5
5
  l: number;
6
6
  a: number;
7
7
  };
8
- hsv: {
8
+ hsva: {
9
9
  h: number;
10
10
  s: number;
11
11
  v: number;
12
12
  a: number;
13
13
  };
14
- rgb: {
14
+ rgba: {
15
15
  r: number;
16
16
  g: number;
17
17
  b: number;
package/build/esm/packages/aurora/src/components/color_picker_new/constants.js CHANGED
@@ -1,17 +1,17 @@
1
1
  const COLOR_PICKER_INITIAL_STATE = {
2
- hsl: {
2
+ hsla: {
3
3
  h: 0,
4
4
  s: 0,
5
5
  l: 0,
6
6
  a: 0
7
7
  },
8
- hsv: {
8
+ hsva: {
9
9
  h: 0,
10
10
  s: 0,
11
11
  v: 0,
12
12
  a: 0
13
13
  },
14
- rgb: {
14
+ rgba: {
15
15
  r: 0,
16
16
  g: 0,
17
17
  b: 0,
package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts CHANGED
@@ -1,16 +1,16 @@
1
1
  import { ColorPickerColorFormats } from '../types';
2
2
  export declare type ColorPickerHookProps = {
3
3
  initialColor: ColorPickerColorFormats['hex'];
4
- onChange?: (color: string) => void;
4
+ onChange?: (color: ColorPickerColorFormats) => void;
5
5
  onCancel?: () => void;
6
- onSave?: (color: string) => void;
6
+ onSave?: (color: ColorPickerColorFormats) => void;
7
7
  };
8
8
  declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
9
9
  color: ColorPickerColorFormats;
10
- handleChangeSaturation: (hsv: ColorPickerColorFormats['hsv']) => void;
11
- handleChangeHue: (hsl: ColorPickerColorFormats['hsl']) => void;
12
- handleChangeAlpha: (hsl: ColorPickerColorFormats['hsl']) => void;
13
- handlePickSwatch: (rgb: ColorPickerColorFormats['rgb']) => void;
10
+ handleChangeSaturation: (hsva: ColorPickerColorFormats['hsva']) => void;
11
+ handleChangeHue: (hsls: ColorPickerColorFormats['hsla']) => void;
12
+ handleChangeAlpha: (hsls: ColorPickerColorFormats['hsla']) => void;
13
+ handlePickSwatch: (rgba: ColorPickerColorFormats['rgba']) => void;
14
14
  handleCancel: () => void;
15
15
  handleSave: () => void;
16
16
  };
package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js CHANGED
@@ -8,23 +8,22 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
8
8
  useEffect(() => {
9
9
  setColors(initialColor);
10
10
  }, [initialColor]);
11
- const handleChangeSaturation = (hsv) => {
12
- setColors(hsv);
13
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
11
+ useEffect(() => {
12
+ onChange === null || onChange === void 0 ? void 0 : onChange(color);
13
+ }, [color]);
14
+ const handleChangeSaturation = (hsva) => {
15
+ setColors(hsva);
14
16
  };
15
- const handleChangeHue = (hsl) => {
16
- const hueColorSet = getColorFormatsWithoutHsv(hsl);
17
+ const handleChangeHue = (hsls) => {
18
+ const hueColorSet = getColorFormatsWithoutHsv(hsls);
17
19
  setColor({ ...color, ...hueColorSet });
18
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
19
20
  };
20
- const handleChangeAlpha = (hsl) => {
21
- const hueColorSet = getColorFormatsWithoutHsv(hsl);
21
+ const handleChangeAlpha = (hsls) => {
22
+ const hueColorSet = getColorFormatsWithoutHsv(hsls);
22
23
  setColor({ ...color, ...hueColorSet });
23
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
24
24
  };
25
- const handlePickSwatch = (rgb) => {
26
- setColors(rgb);
27
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
25
+ const handlePickSwatch = (rgba) => {
26
+ setColors(rgba);
28
27
  };
29
28
  const handleCancel = () => {
30
29
  setColors(choosenColor);
@@ -32,7 +31,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
32
31
  };
33
32
  const handleSave = () => {
34
33
  setChoosenColor(color.hex);
35
- onSave === null || onSave === void 0 ? void 0 : onSave(color.hex);
34
+ onSave === null || onSave === void 0 ? void 0 : onSave(color);
36
35
  };
37
36
  const setColors = (color) => {
38
37
  setColor(getAllColorFormats(color));
package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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_new/index.js CHANGED
@@ -25,22 +25,22 @@ const ColorPickerNew = ({ initialColor = '#fff', pickerText, onChange, onCancel,
25
25
  React.createElement(Dropdown.CustomLabel, null,
26
26
  React.createElement("div", { className: `${styles[cssColorPickerInputContainer]}` },
27
27
  React.createElement("div", { className: `${styles[cssColorPickerInputColorSwatchContainer]}` },
28
- React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgb })),
29
- React.createElement(Input, { value: `# ${(_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase()}`, readOnly: true }))),
28
+ React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba })),
29
+ React.createElement(Input, { value: (_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase(), readOnly: true }))),
30
30
  React.createElement(Dropdown.Content, { onClickOutside: handleCancel },
31
31
  React.createElement(ColorPickerHeader, { text: pickerText, onCancel: handleCancel }),
32
32
  React.createElement("div", { className: `${styles[cssColorPickerContainer]}` },
33
33
  React.createElement("div", { className: `${styles[cssColorPickerSaturation]}` },
34
- React.createElement(common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.hsl, hsv: color === null || color === void 0 ? void 0 : color.hsv, pointer: () => React.createElement(ColorPickerHandler, { size: "big" }), onChange: handleChangeSaturation })),
34
+ React.createElement(common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.hsla, hsv: color === null || color === void 0 ? void 0 : color.hsva, pointer: () => React.createElement(ColorPickerHandler, { size: "big" }), onChange: handleChangeSaturation })),
35
35
  React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanier]}` },
36
36
  React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanierSet]}` },
37
37
  React.createElement("div", { className: `${styles[cssColorPickerHue]}` },
38
- React.createElement(common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.hsl, pointer: ColorPickerHandler, onChange: handleChangeHue })),
38
+ React.createElement(common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: ColorPickerHandler, onChange: handleChangeHue })),
39
39
  React.createElement("div", { className: `${styles[cssColorPickerAlpha]}` },
40
- React.createElement(common.Alpha, { rgb: color.rgb, hsl: color === null || color === void 0 ? void 0 : color.hsl, pointer: ColorPickerHandler, onChange: handleChangeAlpha }))),
40
+ React.createElement(common.Alpha, { rgb: color.rgba, hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: ColorPickerHandler, onChange: handleChangeAlpha }))),
41
41
  React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanierResult]}` },
42
- React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgb, size: "big" }))),
43
- React.createElement(ColorPickerSwatches, { color: color.hsl, onClick: handlePickSwatch })),
42
+ React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba, size: "big" }))),
43
+ React.createElement(ColorPickerSwatches, { color: color.hsla, onClick: handlePickSwatch })),
44
44
  React.createElement(ColorPickerFooter, { onCancel: handleCancel, onSave: handleSave, color: color === null || color === void 0 ? void 0 : color.hex })))));
45
45
  };
46
46
 
package/build/esm/packages/aurora/src/components/color_picker_new/types.d.ts CHANGED
@@ -1,29 +1,29 @@
1
1
  export interface IColorPickerNewProps {
2
2
  pickerText: string;
3
3
  initialColor?: ColorPickerColorFormats['hex'] | undefined;
4
- onChange?: (color: string) => void;
4
+ onChange?: (color: ColorPickerColorFormats) => void;
5
5
  onCancel?: () => void;
6
- onSave?: (color: string) => void;
6
+ onSave?: (color: ColorPickerColorFormats) => void;
7
7
  }
8
8
  export declare type ColorPickerColorFormats = {
9
- hsl: {
9
+ hsla: {
10
10
  h: number;
11
11
  s: number;
12
12
  l: number;
13
- a?: number;
13
+ a: number;
14
14
  };
15
- hsv: {
15
+ hsva: {
16
16
  h: number;
17
17
  s: number;
18
18
  v: number;
19
- a?: number;
19
+ a: number;
20
20
  };
21
- rgb: {
21
+ rgba: {
22
22
  r: number;
23
23
  g: number;
24
24
  b: number;
25
- a?: number;
25
+ a: number;
26
26
  };
27
27
  hex: string;
28
28
  };
29
- export declare type ColorPickerColorTypes = ColorPickerColorFormats['hsl'] | ColorPickerColorFormats['hsv'] | ColorPickerColorFormats['rgb'] | ColorPickerColorFormats['hex'];
29
+ export declare type ColorPickerColorTypes = ColorPickerColorFormats['hsla'] | ColorPickerColorFormats['hsva'] | ColorPickerColorFormats['rgba'] | ColorPickerColorFormats['hex'];
package/build/esm/packages/aurora/src/components/color_picker_new/utilities.d.ts CHANGED
@@ -1,19 +1,19 @@
1
1
  import { ColorPickerColorFormats, ColorPickerColorTypes } from './types';
2
2
  import tinycolor from 'tinycolor2';
3
3
  export declare const getAllColorFormats: (color: ColorPickerColorTypes) => {
4
- hsl: tinycolor.ColorFormats.HSLA;
5
- hsv: tinycolor.ColorFormats.HSVA;
6
- rgb: tinycolor.ColorFormats.RGBA;
4
+ hsla: tinycolor.ColorFormats.HSLA;
5
+ hsva: tinycolor.ColorFormats.HSVA;
6
+ rgba: tinycolor.ColorFormats.RGBA;
7
7
  hex: string;
8
8
  };
9
- export declare const getColorFormatsWithoutHsv: (hue: ColorPickerColorFormats['hsl']) => {
10
- hsl: {
9
+ export declare const getColorFormatsWithoutHsv: (hue: ColorPickerColorFormats['hsla']) => {
10
+ hsla: {
11
11
  h: number;
12
12
  s: number;
13
13
  l: number;
14
- a?: number | undefined;
14
+ a: number;
15
15
  };
16
- rgb: tinycolor.ColorFormats.RGBA;
16
+ rgba: tinycolor.ColorFormats.RGBA;
17
17
  hex: string;
18
18
  };
19
19
  export declare const getHexValue: (colorSet: tinycolor.Instance) => string;
package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js CHANGED
@@ -3,15 +3,19 @@ import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
3
3
  const getAllColorFormats = (color) => {
4
4
  const colorSet = tinycolor(color);
5
5
  return {
6
- hsl: colorSet.toHsl(),
7
- hsv: colorSet.toHsv(),
8
- rgb: colorSet.toRgb(),
9
- hex: getHexValue(colorSet)
6
+ hsla: colorSet.toHsl(),
7
+ hsva: colorSet.toHsv(),
8
+ rgba: colorSet.toRgb(),
9
+ hex: `#${getHexValue(colorSet)}`
10
10
  };
11
11
  };
12
12
  const getColorFormatsWithoutHsv = (hue) => {
13
13
  const colorSet = tinycolor(hue);
14
- return { hsl: hue, rgb: colorSet.toRgb(), hex: getHexValue(colorSet) };
14
+ return {
15
+ hsla: hue,
16
+ rgba: colorSet.toRgb(),
17
+ hex: `#${getHexValue(colorSet)}`
18
+ };
15
19
  };
16
20
  const getHexValue = (colorSet) => {
17
21
  const alphaValue = colorSet.getAlpha();
package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;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/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import './i18n';
2
2
  import { ICellProps, IIRowProps, ITableProps } from "./components/table/types";
3
- import { IControlColorPickerNew, IControlRadioGroupOption } from "./components/controls/types";
4
3
  /**
5
4
  * import types for export
6
5
  */
@@ -16,6 +15,7 @@ import Breadcrumbs from "./components/breadcrumbs";
16
15
  import Button from "./components/button";
17
16
  import ButtonsGroup from "./components/buttons_group";
18
17
  import ColorPicker from "./components/color_picker";
18
+ import { ColorPickerColorFormats } from "./components/color_picker_new/types";
19
19
  import ColorPickerNew from "./components/color_picker_new";
20
20
  import Control from "./components/controls";
21
21
  import ControlCellSelector from "./components/controls/hoc/control_cell_selector";
@@ -50,6 +50,7 @@ import Grid from "./components/grid";
50
50
  import Heading from "./components/heading";
51
51
  import Hint from "./components/hint";
52
52
  import { IColor } from "./components/color_picker/types";
53
+ import { IControlRadioGroupOption } from "./components/controls/types";
53
54
  import { IDatepickerRange } from "./components/date_picker/types";
54
55
  import { IDropdownContext } from "./components/dropdown/context/types";
55
56
  import { IHeadingProps } from "./components/heading/types";
@@ -123,4 +124,4 @@ export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect
123
124
  /**
124
125
  * export types
125
126
  */
126
- export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IControlColorPickerNew, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize };
127
+ export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, ColorPickerColorFormats, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "2.12.1-2",
5
+ "version": "2.12.1-3",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",