@dreamcommerce/aurora 3.0.0-280 → 3.0.0-282

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 (108) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js +8 -8
  2. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_constants.js +5 -0
  3. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_constants.js.map +1 -1
  4. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_utils.js +45 -14
  5. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_utils.js.map +1 -1
  6. package/build/cjs/packages/aurora/src/components/color_picker/components/color_label_input.js +2 -6
  7. package/build/cjs/packages/aurora/src/components/color_picker/components/color_label_input.js.map +1 -1
  8. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_content.js +4 -3
  9. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_content.js.map +1 -1
  10. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_controls.js +1 -1
  11. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_controls.js.map +1 -1
  12. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_footer.js +3 -1
  13. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_footer.js.map +1 -1
  14. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js +4 -2
  15. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js.map +1 -1
  16. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js +4 -10
  17. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js.map +1 -1
  18. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +5 -7
  19. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map +1 -1
  20. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js +5 -4
  21. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js.map +1 -1
  22. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js +1 -1
  23. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js.map +1 -1
  24. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js +1 -1
  25. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js.map +1 -1
  26. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js +1 -1
  27. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js.map +1 -1
  28. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_shades.js +2 -2
  29. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_swatch.js +2 -2
  30. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_swatch.js.map +1 -1
  31. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_variables.js +9 -3
  32. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_variables.js.map +1 -1
  33. package/build/cjs/packages/aurora/src/components/color_picker/components/current_color_preview.js +2 -1
  34. package/build/cjs/packages/aurora/src/components/color_picker/components/current_color_preview.js.map +1 -1
  35. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js +6 -5
  36. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  37. package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +94 -57
  38. package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
  39. package/build/cjs/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js +3 -3
  40. package/build/cjs/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js +6 -8
  41. package/build/cjs/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js.map +1 -1
  42. package/build/cjs/packages/aurora/src/components/image_picker/components/uploaded_image_picker_item.js +5 -4
  43. package/build/cjs/packages/aurora/src/components/image_picker/components/uploaded_image_picker_item.js.map +1 -1
  44. package/build/cjs/packages/aurora/src/components/image_picker/image_picker.js +5 -5
  45. package/build/cjs/packages/aurora/src/components/input/input.js +29 -5
  46. package/build/cjs/packages/aurora/src/components/input/input.js.map +1 -1
  47. package/build/cjs/packages/aurora/src/components/input/input_variants.js +1 -1
  48. package/build/cjs/packages/aurora/src/components/values_syncer/values_syncer.js +46 -74
  49. package/build/cjs/packages/aurora/src/components/values_syncer/values_syncer.js.map +1 -1
  50. package/build/esm/packages/aurora/src/components/color_picker/color_picker.d.ts +1 -1
  51. package/build/esm/packages/aurora/src/components/color_picker/color_picker.js +8 -8
  52. package/build/esm/packages/aurora/src/components/color_picker/color_picker_constants.js +5 -1
  53. package/build/esm/packages/aurora/src/components/color_picker/color_picker_constants.js.map +1 -1
  54. package/build/esm/packages/aurora/src/components/color_picker/color_picker_types.d.ts +19 -8
  55. package/build/esm/packages/aurora/src/components/color_picker/color_picker_types.js.map +1 -1
  56. package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.d.ts +4 -2
  57. package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js +45 -14
  58. package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js.map +1 -1
  59. package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.js +2 -6
  60. package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.js.map +1 -1
  61. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js +4 -3
  62. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js.map +1 -1
  63. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_controls.js +1 -1
  64. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_controls.js.map +1 -1
  65. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_footer.js +3 -1
  66. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_footer.js.map +1 -1
  67. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js +4 -2
  68. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js.map +1 -1
  69. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js +5 -11
  70. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js.map +1 -1
  71. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +5 -7
  72. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map +1 -1
  73. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js +5 -4
  74. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_mode_toggler.js.map +1 -1
  75. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js +1 -1
  76. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js.map +1 -1
  77. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js +1 -1
  78. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js.map +1 -1
  79. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js +1 -1
  80. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js.map +1 -1
  81. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_shades.js +2 -2
  82. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_swatch.js +2 -2
  83. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_swatch.js.map +1 -1
  84. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_variables.js +9 -3
  85. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_variables.js.map +1 -1
  86. package/build/esm/packages/aurora/src/components/color_picker/components/current_color_preview.js +2 -1
  87. package/build/esm/packages/aurora/src/components/color_picker/components/current_color_preview.js.map +1 -1
  88. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js +6 -5
  89. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  90. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.d.ts +11 -11
  91. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +92 -59
  92. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
  93. package/build/esm/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js +3 -3
  94. package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.d.ts +1 -4
  95. package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js +6 -8
  96. package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js.map +1 -1
  97. package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control_types.d.ts +1 -1
  98. package/build/esm/packages/aurora/src/components/image_picker/components/uploaded_image_picker_item.js +5 -4
  99. package/build/esm/packages/aurora/src/components/image_picker/components/uploaded_image_picker_item.js.map +1 -1
  100. package/build/esm/packages/aurora/src/components/image_picker/image_picker.js +5 -5
  101. package/build/esm/packages/aurora/src/components/input/input.js +31 -7
  102. package/build/esm/packages/aurora/src/components/input/input.js.map +1 -1
  103. package/build/esm/packages/aurora/src/components/input/input_variants.js +1 -1
  104. package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.d.ts +1 -1
  105. package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.js +47 -75
  106. package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.js.map +1 -1
  107. package/build/esm/packages/aurora/src/components/values_syncer/values_syncer_types.d.ts +7 -8
  108. package/package.json +1 -1
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { IColorPickerProps } from './color_picker_types';
3
- export declare const ColorPicker: ({ id, name, value, colorVariables, errors, onChange, onCancel, onSave, withGradient: isWithGradient, disabled, ...rest }: IColorPickerProps) => React.JSX.Element;
3
+ export declare const ColorPicker: ({ id, name, initialColor, colorVariables, errors, onChange, onCancel, onSave, withGradient: isWithGradient, disabled, ...rest }: IColorPickerProps) => React.JSX.Element;
@@ -4,11 +4,11 @@ import { ColorPickerContext } from './color_picker_context.js';
4
4
  import ColorPickerPure from './components/pure_color_picker.js';
5
5
  import useSetupColorPicker from './hooks/setup_color_picker.js';
6
6
 
7
- var _excluded = ["id", "name", "value", "colorVariables", "errors", "onChange", "onCancel", "onSave", "withGradient", "disabled"];
7
+ var _excluded = ["id", "name", "initialColor", "colorVariables", "errors", "onChange", "onCancel", "onSave", "withGradient", "disabled"];
8
8
  var ColorPicker = function ColorPicker(_ref) {
9
9
  var id = _ref.id,
10
10
  name = _ref.name,
11
- value = _ref.value,
11
+ initialColor = _ref.initialColor,
12
12
  colorVariables = _ref.colorVariables,
13
13
  errors = _ref.errors,
14
14
  onChange = _ref.onChange,
@@ -19,7 +19,7 @@ var ColorPicker = function ColorPicker(_ref) {
19
19
  rest = _objectWithoutProperties(_ref, _excluded);
20
20
  var _useSetupColorPicker = useSetupColorPicker({
21
21
  colorVariables: colorVariables,
22
- value: value,
22
+ initialColor: initialColor,
23
23
  onChange: onChange,
24
24
  onCancel: onCancel,
25
25
  onSave: onSave,
@@ -48,8 +48,8 @@ var ColorPicker = function ColorPicker(_ref) {
48
48
  isColorPickerOpened = _useSetupColorPicker.isColorPickerOpened,
49
49
  setIsColorPickerOpened = _useSetupColorPicker.setIsColorPickerOpened,
50
50
  degrees = _useSetupColorPicker.degrees,
51
- shadeName = _useSetupColorPicker.shadeName;
52
- var contextVal = useMemo(function () {
51
+ setDegrees = _useSetupColorPicker.setDegrees;
52
+ var value = useMemo(function () {
53
53
  return {
54
54
  color: color,
55
55
  setColor: setColor,
@@ -75,11 +75,11 @@ var ColorPicker = function ColorPicker(_ref) {
75
75
  isColorPickerOpened: isColorPickerOpened,
76
76
  setIsColorPickerOpened: setIsColorPickerOpened,
77
77
  degrees: degrees,
78
- shadeName: shadeName
78
+ setDegrees: setDegrees
79
79
  };
80
- }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alphaValue, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, degrees, shadeName]);
80
+ }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alphaValue, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, degrees, setDegrees]);
81
81
  return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
82
- value: contextVal
82
+ value: value
83
83
  }, /*#__PURE__*/React.createElement(ColorPickerPure, _objectSpread2({
84
84
  id: id,
85
85
  name: name,
@@ -19,6 +19,10 @@ var GRADIENT_TYPES = {
19
19
  linear: 'linear-gradient',
20
20
  radial: 'radial-gradient'
21
21
  };
22
+ var GRADIENT_RADIAL_SHAPES = {
23
+ circle: 'circle',
24
+ ellipse: 'ellipse'
25
+ };
22
26
 
23
- export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_CONTENT_MAX_HEIGHT, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_SWATCH_SIZES, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH, GRADIENT_TYPES };
27
+ export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_CONTENT_MAX_HEIGHT, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_SWATCH_SIZES, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH, GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES };
24
28
  //# sourceMappingURL=color_picker_constants.js.map
@@ -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;"}
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;"}
@@ -1,4 +1,4 @@
1
- import { HTMLAttributes } from 'react';
1
+ import { Dispatch, HTMLAttributes, SetStateAction } from 'react';
2
2
  import { GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES } from "./color_picker_constants";
3
3
  import { Any } from 'ts-toolbelt';
4
4
  export interface IColorPickerPureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -21,7 +21,7 @@ export interface IColorPickerColorVariablesType {
21
21
  export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
22
22
  id: string;
23
23
  name?: string;
24
- value?: ColorPickerColorTypes['hex'] | undefined;
24
+ initialColor?: ColorPickerColorTypes['hex'] | ColorPickerVariable | undefined;
25
25
  withGradient?: boolean;
26
26
  colorVariables?: IColorPickerColorVariables;
27
27
  errors?: string | string[];
@@ -31,11 +31,11 @@ export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>,
31
31
  disabled?: boolean;
32
32
  }
33
33
  export interface IColorPickerContext {
34
- color: string;
35
- setColor: (newColor: string, shadeName?: string) => void;
34
+ color: ColorPickerVariable;
35
+ setColor: Dispatch<SetStateAction<string | ColorPickerVariable>>;
36
36
  hex: string;
37
37
  hslArr: number[];
38
- handleOnChangeAlpha: (val: number) => void;
38
+ handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
39
39
  alphaValue: string;
40
40
  rgbaArr: number[];
41
41
  setR: (newR: number) => void;
@@ -43,19 +43,19 @@ export interface IColorPickerContext {
43
43
  setB: (newB: number) => void;
44
44
  handleCancel: () => void;
45
45
  withGradient: boolean;
46
- handleSave: () => void;
46
+ handleSave: (color: IColorPickerColor) => void;
47
47
  colorVariables?: IColorPickerColorVariables;
48
48
  isCurrentValueGradient: boolean;
49
49
  setSolid: (value?: string) => void;
50
50
  setRadial: (value?: string) => void;
51
- setLinear: (value?: string) => void;
51
+ setLinear: (value?: string, deg?: number) => void;
52
52
  gradientType?: TGradientType;
53
53
  previousSolidColor?: string;
54
54
  previousGradientColor?: string;
55
55
  isColorPickerOpened: boolean;
56
56
  setIsColorPickerOpened: (isOpened: boolean) => void;
57
57
  degrees: number;
58
- shadeName: string;
58
+ setDegrees: Dispatch<SetStateAction<number>>;
59
59
  }
60
60
  export declare type ColorPickerColorTypes = {
61
61
  hex: string;
@@ -95,3 +95,14 @@ export declare type TGradientObject = {
95
95
  radialShape?: TGradientRadialShape;
96
96
  angle?: number;
97
97
  };
98
+ export declare type TGradientColoPickerLibGradientObject = {
99
+ isGradient: boolean;
100
+ gradientType: string | undefined;
101
+ degrees: string;
102
+ colors: any;
103
+ } | {
104
+ isGradient: boolean;
105
+ gradientType: null;
106
+ degrees: null;
107
+ colors: any;
108
+ };
@@ -1 +1 @@
1
- {"version":3,"file":"color_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/color_picker_types.ts"],"names":[],"mappings":"AAAA,OAA+B,OAAO,CAAC;AACvC,OAAuD,uDAAuD,CAAC;AAE/G,OAAoB,aAAa,CAAC"}
1
+ {"version":3,"file":"color_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/color_picker_types.ts"],"names":[],"mappings":"AAAA,OAAyD,OAAO,CAAC;AACjE,OAAuD,uDAAuD,CAAC;AAE/G,OAAoB,aAAa,CAAC"}
@@ -1,18 +1,20 @@
1
- import { ColorPickerColors, ColorPickerVariable, IColorPickerColor, IColorPickerColorVariablesType } from './color_picker_types';
1
+ import { ColorPickerColors, ColorPickerVariable, IColorPickerColor, TGradientColoPickerLibGradientObject, TGradientObject } from './color_picker_types';
2
2
  import { GradientProps } from 'react-best-gradient-color-picker';
3
3
  import tinycolor from 'tinycolor2';
4
4
  export declare class ColorPickerUtils {
5
5
  static getTinyColorInstance: (color: ColorPickerColors) => tinycolor.Instance;
6
6
  static isGradient(color: string): boolean;
7
+ static getColorPickerValue: (color: string | ColorPickerVariable | undefined) => ColorPickerVariable;
7
8
  static getRgbaValue: (colorSet: tinycolor.Instance) => tinycolor.ColorFormats.RGBA;
8
9
  static getHexValue: (colorSet: tinycolor.Instance) => string;
9
10
  static getHexValueString: (colorSet: tinycolor.Instance) => string;
11
+ static isHexChar: (value: string) => boolean;
10
12
  static getAllColorTypes: (color: ColorPickerVariable) => IColorPickerColor;
11
13
  static getVariableShades: ({ color, name }: {
12
14
  color: ColorPickerColors;
13
15
  name: string;
14
16
  }) => ColorPickerVariable[];
15
17
  private static convertVariableShadesToHex;
18
+ static getColorPickerGradientValue(gradient: TGradientColoPickerLibGradientObject): TGradientObject;
16
19
  static updateGradientWithActiveColor: (colors: GradientProps[], index: number, newColor: string) => GradientProps[];
17
- static findVariable: (variables: IColorPickerColorVariablesType | ColorPickerVariable[], color: string) => string | undefined;
18
20
  }
@@ -1,6 +1,7 @@
1
1
  import { createClass as _createClass, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, classCallCheck as _classCallCheck } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
2
- import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
2
+ import { COLOR_PICKER_INITIAL_STATE, GRADIENT_TYPES, GRADIENT_RADIAL_SHAPES } from './color_picker_constants.js';
3
3
  import { high, low } from '../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
4
+ import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
4
5
 
5
6
  var _ColorPickerUtils;
6
7
  var ColorPickerUtils = /*#__PURE__*/function () {
@@ -10,7 +11,25 @@ var ColorPickerUtils = /*#__PURE__*/function () {
10
11
  return _createClass(ColorPickerUtils, null, [{
11
12
  key: "isGradient",
12
13
  value: function isGradient(color) {
13
- return /(linear|radial|conic)-gradient\s*\(/.test(color);
14
+ return color.includes('linear-gradient') || color.includes('radial-gradient');
15
+ }
16
+ }, {
17
+ key: "getColorPickerGradientValue",
18
+ value: function getColorPickerGradientValue(gradient) {
19
+ var _gradient$degrees;
20
+ return {
21
+ gradientType: gradient.gradientType,
22
+ angle: gradient.gradientType === GRADIENT_TYPES.radial ? undefined : parseFloat((_gradient$degrees = gradient.degrees) !== null && _gradient$degrees !== void 0 ? _gradient$degrees : '90deg'),
23
+ radialShape: gradient.gradientType === GRADIENT_TYPES.radial ? GRADIENT_RADIAL_SHAPES.circle : undefined,
24
+ colors: gradient.colors.map(function (_ref) {
25
+ var left = _ref.left,
26
+ value = _ref.value;
27
+ return {
28
+ stop: left,
29
+ value: "#".concat(ColorPickerUtils.getTinyColorInstance(value).toHex8())
30
+ };
31
+ })
32
+ };
14
33
  }
15
34
  }]);
16
35
  }();
@@ -18,6 +37,22 @@ _ColorPickerUtils = ColorPickerUtils;
18
37
  _defineProperty(ColorPickerUtils, "getTinyColorInstance", function (color) {
19
38
  return tinycolor(color);
20
39
  });
40
+ _defineProperty(ColorPickerUtils, "getColorPickerValue", function (color) {
41
+ var _color$name;
42
+ var initialColorValue = typeof color === 'string' ? color : color === null || color === void 0 ? void 0 : color.value;
43
+ if (!initialColorValue) return {
44
+ value: COLOR_PICKER_INITIAL_STATE,
45
+ name: ''
46
+ };
47
+ var parsedColorValue = initialColorValue ? _ColorPickerUtils.getTinyColorInstance(initialColorValue).toHex8() : COLOR_PICKER_INITIAL_STATE;
48
+ if (_ColorPickerUtils.isGradient(initialColorValue)) {
49
+ parsedColorValue = initialColorValue;
50
+ }
51
+ return {
52
+ value: parsedColorValue,
53
+ name: typeof color === 'string' ? '' : (_color$name = color === null || color === void 0 ? void 0 : color.name) !== null && _color$name !== void 0 ? _color$name : ''
54
+ };
55
+ });
21
56
  _defineProperty(ColorPickerUtils, "getRgbaValue", function (colorSet) {
22
57
  return colorSet.toRgb();
23
58
  });
@@ -28,8 +63,12 @@ _defineProperty(ColorPickerUtils, "getHexValue", function (colorSet) {
28
63
  _defineProperty(ColorPickerUtils, "getHexValueString", function (colorSet) {
29
64
  return "#".concat(_ColorPickerUtils.getHexValue(colorSet));
30
65
  });
66
+ _defineProperty(ColorPickerUtils, "isHexChar", function (value) {
67
+ var hexRegEx = /^$|[0-9a-fA-F]+$/;
68
+ return hexRegEx.test(value);
69
+ });
31
70
  _defineProperty(ColorPickerUtils, "getAllColorTypes", function (color) {
32
- var tinyColor = _ColorPickerUtils.getTinyColorInstance(color.value);
71
+ var tinyColor = typeof color === 'string' ? _ColorPickerUtils.getTinyColorInstance(color) : _ColorPickerUtils.getTinyColorInstance(color.value);
33
72
  var rgba = _ColorPickerUtils.getRgbaValue(tinyColor);
34
73
  var hex = _ColorPickerUtils.getHexValue(tinyColor);
35
74
  var hexString = _ColorPickerUtils.getHexValueString(tinyColor);
@@ -48,9 +87,9 @@ _defineProperty(ColorPickerUtils, "getAllColorTypes", function (color) {
48
87
  };
49
88
  return _objectSpread2(_objectSpread2({}, allColorTypes), variableName && variableName);
50
89
  });
51
- _defineProperty(ColorPickerUtils, "getVariableShades", function (_ref) {
52
- var color = _ref.color,
53
- name = _ref.name;
90
+ _defineProperty(ColorPickerUtils, "getVariableShades", function (_ref2) {
91
+ var color = _ref2.color,
92
+ name = _ref2.name;
54
93
  var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
55
94
  var colorHsl = colorTiny.toHsl();
56
95
  var isNeutral = name.includes('neutral');
@@ -153,14 +192,6 @@ _defineProperty(ColorPickerUtils, "updateGradientWithActiveColor", function (col
153
192
  });
154
193
  });
155
194
  });
156
- _defineProperty(ColorPickerUtils, "findVariable", function (variables, color) {
157
- var _Object$values$find;
158
- return (_Object$values$find = Object.values(variables).find(function (v) {
159
- var variableTiny = _ColorPickerUtils.getTinyColorInstance(v.value);
160
- var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
161
- return variableTiny.toHexString() === colorTiny.toHexString();
162
- })) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.name;
163
- });
164
195
 
165
196
  export { ColorPickerUtils };
166
197
  //# sourceMappingURL=color_picker_utils.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,sBAAsB,qDAAyD;AAC/E,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,0BAA0B,uFAA2F;AACrH,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -4,7 +4,6 @@ import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rol
4
4
  import { Input } from '../../input/input.js';
5
5
  import { GRADIENT_TYPES } from '../color_picker_constants.js';
6
6
  import { useColorPicker } from '../hooks/use_color_picker.js';
7
- import { ColorPickerUtils } from '../color_picker_utils.js';
8
7
 
9
8
  var ColorPickerInput = function ColorPickerInput(_ref) {
10
9
  var id = _ref.id,
@@ -16,14 +15,11 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
16
15
  hex = _useColorPicker.hex,
17
16
  color = _useColorPicker.color,
18
17
  isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
19
- gradientType = _useColorPicker.gradientType,
20
- colorVariables = _useColorPicker.colorVariables,
21
- shadeName = _useColorPicker.shadeName;
18
+ gradientType = _useColorPicker.gradientType;
22
19
  var _useTranslation = useTranslation(),
23
20
  _useTranslation2 = _slicedToArray(_useTranslation, 1),
24
21
  t = _useTranslation2[0];
25
- var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && ColorPickerUtils.findVariable(colorVariables.variables, color) || shadeName || '';
26
- var colorName = variableName ? "".concat(t(variableName)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase());
22
+ var colorName = color.name ? "".concat(t(color.name)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase());
27
23
  if (isCurrentValueGradient) colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
28
24
  return /*#__PURE__*/React.createElement(Input, {
29
25
  className: "aurora-cursor-pointer",
@@ -1 +1 @@
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;AACA;AACA;AACA;"}
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;"}
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
2
  import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
3
  import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_CONTENT_MAX_HEIGHT } from '../color_picker_constants.js';
4
- import { useColorPicker } from '../hooks/use_color_picker.js';
5
- import { ColorPickerFooter } from './color_picker_footer.js';
6
4
  import { objectToString } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
7
5
  import PickerContextWrapper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
8
6
  import { getStyles } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
7
+ import { useColorPicker } from '../hooks/use_color_picker.js';
8
+ import { ColorPickerFooter } from './color_picker_footer.js';
9
9
  import { ColorPickerVariables } from './color_picker_variables.js';
10
10
  import { ColorPickerControls } from './color_picker_controls.js';
11
11
  import { ColorPickerImpl } from './color_picker_impl.js';
@@ -16,7 +16,8 @@ var ColorPickerContent = function ColorPickerContent() {
16
16
  setColor = _useColorPicker.setColor,
17
17
  colorVariables = _useColorPicker.colorVariables,
18
18
  isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
19
- var safeValue = objectToString(color);
19
+ var colorValue = typeof color === 'string' ? color : color.value;
20
+ var safeValue = objectToString(colorValue);
20
21
  var defaultStyles = getStyles(true);
21
22
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PickerContextWrapper, {
22
23
  value: safeValue,
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,+BAA+B,qFAAyF;AACxH,iCAAiC,iFAAqF;AACtH,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,qFAAyF;AACxH,iCAAiC,iFAAqF;AACtH,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -8,8 +8,8 @@ import { TooltipTrigger } from '../../tooltip/components/tooltip_trigger.js';
8
8
  import { TooltipContent } from '../../tooltip/components/tooltip_content.js';
9
9
  import { TooltipProvider } from '../../tooltip/context/tooltip_provider.js';
10
10
  import { GRADIENT_TYPES } from '../color_picker_constants.js';
11
- import { useColorPicker } from '../hooks/use_color_picker.js';
12
11
  import { usePicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
12
+ import { useColorPicker } from '../hooks/use_color_picker.js';
13
13
  import { ColorPickerGradientAngle } from './color_picker_gradient_controls/color_picker_gradient_angle.js';
14
14
  import { ColorPickerModeToggler } from './color_picker_mode_toggler.js';
15
15
  import { GradientBar } from './color_picker_overrides/color_picker_gradient_bar.js';
@@ -1 +1 @@
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,0BAA0B,iFAAqF;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,iFAAqF;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -2,10 +2,12 @@ import React from 'react';
2
2
  import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
3
3
  import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
4
4
  import { Button } from '../../button/button.js';
5
+ import { ColorPickerUtils } from '../color_picker_utils.js';
5
6
  import { useColorPicker } from '../hooks/use_color_picker.js';
6
7
 
7
8
  var ColorPickerFooter = function ColorPickerFooter() {
8
9
  var _useColorPicker = useColorPicker(),
10
+ color = _useColorPicker.color,
9
11
  handleCancel = _useColorPicker.handleCancel,
10
12
  handleSave = _useColorPicker.handleSave,
11
13
  setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened;
@@ -18,7 +20,7 @@ var ColorPickerFooter = function ColorPickerFooter() {
18
20
  };
19
21
  var handleSaveButton = function handleSaveButton() {
20
22
  setIsColorPickerOpened(false);
21
- handleSave();
23
+ handleSave(ColorPickerUtils.getAllColorTypes(color));
22
24
  };
23
25
  return /*#__PURE__*/React.createElement("div", {
24
26
  className: "aurora-flex aurora-items-center aurora-justify-between aurora-gap-2 aurora-pt-2 aurora-pb-3 aurora-px-4 aurora-border aurora-border-subtle aurora-rounded-b-16 aurora-bg-neutral-0"
@@ -1 +1 @@
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;AACA;AACA;"}
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;AACA;AACA;AACA;AACA;"}
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
- import { useColorPicker } from '../../hooks/use_color_picker.js';
3
2
  import { formatInputValues } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
4
3
  import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
4
+ import { useColorPicker } from '../../hooks/use_color_picker.js';
5
5
  import { AngleIcon } from '../../../../assets/icons/angle_icon.js';
6
6
 
7
7
  var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
@@ -9,10 +9,12 @@ var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
9
9
  onChange = _usePicker.onChange,
10
10
  value = _usePicker.value;
11
11
  var _useColorPicker = useColorPicker(),
12
- degrees = _useColorPicker.degrees;
12
+ degrees = _useColorPicker.degrees,
13
+ setDegrees = _useColorPicker.setDegrees;
13
14
  var handleDegrees = function handleDegrees(e) {
14
15
  var newValue = formatInputValues(e.target.value, 0, 360);
15
16
  var remaining = value.split(/,(.+)/)[1];
17
+ setDegrees(newValue);
16
18
  onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
17
19
  };
18
20
  return /*#__PURE__*/React.createElement("div", {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,10 +1,10 @@
1
- import React, { useState, useRef, useEffect } from 'react';
1
+ import React, { useState, useEffect } from 'react';
2
2
  import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
3
  import { Input } from '../../../input/input.js';
4
- import { useColorPicker } from '../../hooks/use_color_picker.js';
5
- import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
6
4
  import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
5
+ import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
7
6
  import { ColorPickerUtils } from '../../color_picker_utils.js';
7
+ import { useColorPicker } from '../../hooks/use_color_picker.js';
8
8
  import { InputUtils } from '@dreamcommerce/utilities';
9
9
 
10
10
  var ColorPickerInputsHex = function ColorPickerInputsHex() {
@@ -19,7 +19,6 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
19
19
  _useState2 = _slicedToArray(_useState, 2),
20
20
  value = _useState2[0],
21
21
  setValue = _useState2[1];
22
- var valueRef = useRef(value);
23
22
  var _useState3 = useState(false),
24
23
  _useState4 = _slicedToArray(_useState3, 2),
25
24
  disable = _useState4[0],
@@ -31,7 +30,6 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
31
30
  var handleOnChange = function handleOnChange(event) {
32
31
  var inputValue = event.target.value.replace('%', '');
33
32
  setValue(inputValue);
34
- valueRef.current = inputValue;
35
33
  if (!tinycolor(inputValue).isValid()) return;
36
34
  if (isCurrentValueGradient && gradientType) {
37
35
  var newColors = ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
@@ -47,10 +45,8 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
47
45
  setDisable(false);
48
46
  };
49
47
  useEffect(function () {
50
- if (hex === valueRef.current) return;
51
48
  if (!disable) {
52
49
  setValue(hex);
53
- valueRef.current = hex;
54
50
  }
55
51
  }, [hex, disable]);
56
52
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
@@ -67,10 +63,8 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
67
63
  className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
68
64
  type: "text",
69
65
  value: alphaValue,
70
- onChange: function onChange(e) {
71
- return handleOnChangeAlpha(Number(e.target.value));
72
- },
73
- onKeyDown: InputUtils.preventTypingLetters
66
+ onChange: handleOnChangeAlpha,
67
+ onKeyPress: InputUtils.preventTypingLetters
74
68
  }), /*#__PURE__*/React.createElement("div", {
75
69
  className: "aurora-text-xs aurora-pl-0.5"
76
70
  }, "%")));
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,2DAA+D;AACrF,0BAA0B,oFAAwF;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,0BAA0B,oFAAwF;AAClH,sBAAsB,2DAA+D;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -18,7 +18,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
18
18
  onChange: function onChange(e) {
19
19
  return setR(Number(e.target.value));
20
20
  },
21
- onKeyDown: InputUtils.preventTypingLetters
21
+ onKeyPress: InputUtils.preventTypingLetters
22
22
  }), /*#__PURE__*/React.createElement(Input, {
23
23
  className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
24
24
  type: "text",
@@ -26,7 +26,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
26
26
  onChange: function onChange(e) {
27
27
  return setG(Number(e.target.value));
28
28
  },
29
- onKeyDown: InputUtils.preventTypingLetters
29
+ onKeyPress: InputUtils.preventTypingLetters
30
30
  }), /*#__PURE__*/React.createElement(Input, {
31
31
  className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
32
32
  type: "text",
@@ -34,17 +34,15 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
34
34
  onChange: function onChange(e) {
35
35
  return setB(Number(e.target.value));
36
36
  },
37
- onKeyDown: InputUtils.preventTypingLetters
37
+ onKeyPress: InputUtils.preventTypingLetters
38
38
  }), /*#__PURE__*/React.createElement("div", {
39
39
  className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
40
40
  }, /*#__PURE__*/React.createElement("input", {
41
41
  className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
42
42
  type: "text",
43
43
  value: alphaValue,
44
- onChange: function onChange(e) {
45
- return handleOnChangeAlpha(Number(e.target.value));
46
- },
47
- onKeyDown: InputUtils.preventTypingLetters
44
+ onChange: handleOnChangeAlpha,
45
+ onKeyPress: InputUtils.preventTypingLetters
48
46
  }), /*#__PURE__*/React.createElement("div", {
49
47
  className: "aurora-text-xs aurora-pl-0.5"
50
48
  }, "%")));
@@ -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;"}
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;"}
@@ -21,7 +21,8 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
21
21
  setLinear = _useColorPicker.setLinear,
22
22
  previousSolidColor = _useColorPicker.previousSolidColor,
23
23
  previousGradientColor = _useColorPicker.previousGradientColor,
24
- color = _useColorPicker.color;
24
+ color = _useColorPicker.color,
25
+ degrees = _useColorPicker.degrees;
25
26
  var commonClassNames = 'aurora-block aurora-w-6 aurora-h-6 aurora-border aurora-border-solid aurora-rounded-4 aurora-cursor-pointer hover:aurora-border-strong hover:aurora-border-2';
26
27
  var activeClassNames = 'aurora-border-2 aurora-border-solid !aurora-border-active';
27
28
  var changeToSolid = function changeToSolid() {
@@ -29,17 +30,17 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
29
30
  };
30
31
  var changeToLinear = function changeToLinear() {
31
32
  if (!isCurrentValueGradient) {
32
- setLinear(previousGradientColor);
33
+ setLinear(previousGradientColor, degrees);
33
34
  return;
34
35
  }
35
- setLinear(color);
36
+ setLinear(color.value, degrees);
36
37
  };
37
38
  var changeToRadial = function changeToRadial() {
38
39
  if (!isCurrentValueGradient) {
39
40
  setRadial(previousGradientColor);
40
41
  return;
41
42
  }
42
- setRadial(color);
43
+ setRadial(color.value);
43
44
  };
44
45
  return /*#__PURE__*/React.createElement(Stack, {
45
46
  spacing: "1",
@@ -1 +1 @@
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
- import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
4
3
  import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
5
4
  import { controlBtnStyles } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
5
+ import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
6
6
  import { DropperFillIcon } from '../../../../assets/icons/dropper_fill_icon.js';
7
7
 
8
8
  /**
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,sBAAsB,2DAA+D;AACrF,0BAA0B,oFAAwF;AAClH,iCAAiC,0FAA8F;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,0BAA0B,oFAAwF;AAClH,iCAAiC,0FAA8F;AAC/H,sBAAsB,2DAA+D;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,9 +1,9 @@
1
1
  import React, { useRef, useCallback, useEffect } from 'react';
2
2
  import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
- import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
4
3
  import { getHandleValue } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
5
4
  import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
6
5
  import usePaintHue from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/usePaintHue.js';
6
+ import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
7
7
 
8
8
  /**
9
9
  * Zmieniono wzgledem react-best-gradient-color-picker:
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,sBAAsB,2DAA+D;AACrF,+BAA+B,wFAA4F;AAC3H,0BAA0B,oFAAwF;AAClH,wBAAwB,8FAAkG;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,wFAA4F;AAC3H,0BAA0B,oFAAwF;AAClH,wBAAwB,8FAAkG;AAC1H,sBAAsB,2DAA+D;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,10 +1,10 @@
1
1
  import React, { useState, useRef, useEffect, useCallback } from 'react';
2
2
  import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
- import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
4
3
  import { config } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/constants.js';
5
4
  import { computeSquareXY, computePickerPosition } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
6
5
  import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
7
6
  import usePaintSquare from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/usePaintSquare.js';
7
+ import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
8
8
 
9
9
  var crossSize = config.crossSize;
10
10
  /**