@dreamcommerce/aurora 2.12.1-2 → 2.12.1-20

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 (41) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js +4 -2
  2. package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +2 -2
  4. package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js +8 -7
  5. package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js.map +1 -1
  6. package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +14 -18
  7. package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map +1 -1
  8. package/build/cjs/packages/aurora/src/components/color_picker_new/index.js +9 -9
  9. package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js +11 -5
  10. package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
  11. package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js +2 -2
  12. package/build/cjs/packages/aurora/src/translations/en.json.js +6 -1
  13. package/build/cjs/packages/aurora/src/translations/en.json.js.map +1 -1
  14. package/build/cjs/packages/aurora/src/translations/pl.json.js +6 -1
  15. package/build/cjs/packages/aurora/src/translations/pl.json.js.map +1 -1
  16. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.d.ts +0 -1
  17. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js +4 -2
  18. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js.map +1 -1
  19. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.d.ts +2 -2
  20. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.d.ts +2 -2
  21. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +2 -2
  22. package/build/esm/packages/aurora/src/components/color_picker_new/constants.d.ts +4 -3
  23. package/build/esm/packages/aurora/src/components/color_picker_new/constants.js +8 -7
  24. package/build/esm/packages/aurora/src/components/color_picker_new/constants.js.map +1 -1
  25. package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts +7 -7
  26. package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +15 -19
  27. package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map +1 -1
  28. package/build/esm/packages/aurora/src/components/color_picker_new/index.js +9 -9
  29. package/build/esm/packages/aurora/src/components/color_picker_new/types.d.ts +12 -10
  30. package/build/esm/packages/aurora/src/components/color_picker_new/utilities.d.ts +9 -7
  31. package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js +11 -5
  32. package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
  33. package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js +2 -2
  34. package/build/esm/packages/aurora/src/index.d.ts +3 -2
  35. package/build/esm/packages/aurora/src/translations/en.json +4 -1
  36. package/build/esm/packages/aurora/src/translations/en.json.js +6 -2
  37. package/build/esm/packages/aurora/src/translations/en.json.js.map +1 -1
  38. package/build/esm/packages/aurora/src/translations/pl.json +4 -1
  39. package/build/esm/packages/aurora/src/translations/pl.json.js +6 -2
  40. package/build/esm/packages/aurora/src/translations/pl.json.js.map +1 -1
  41. package/package.json +1 -1
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
+ var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
6
7
  var index = require('../../dropdown/context/index.js');
7
8
  var css_classes = require('../css_classes.js');
8
9
  var main_module = require('../../../css/color_picker_new/main.module.less.js');
@@ -12,14 +13,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
13
 
13
14
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
15
 
15
- const ColorPickerHeader = ({ text, onCancel }) => {
16
+ const ColorPickerHeader = ({ onCancel }) => {
17
+ const [t] = useTranslation.useTranslation();
16
18
  const { toggleDropdown } = React.useContext(index.DropdownContext);
17
19
  const handleCancelButton = () => {
18
20
  toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
19
21
  onCancel === null || onCancel === void 0 ? void 0 : onCancel();
20
22
  };
21
23
  return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHeader]}` },
22
- text,
24
+ t('Select color'),
23
25
  React__default['default'].createElement("button", { onClick: handleCancelButton, className: `${main_module['default'][css_classes.cssColorPickerCloseIcon]}` },
24
26
  React__default['default'].createElement(icon_close['default'], { size: "m" }))));
25
27
  };
@@ -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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -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
  };
@@ -3,25 +3,26 @@
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
- a: 0
10
+ a: 1
11
11
  },
12
- hsv: {
12
+ hsva: {
13
13
  h: 0,
14
14
  s: 0,
15
15
  v: 0,
16
- a: 0
16
+ a: 1
17
17
  },
18
- rgb: {
18
+ rgba: {
19
19
  r: 0,
20
20
  g: 0,
21
21
  b: 0,
22
- a: 0
22
+ a: 1
23
23
  },
24
- hex: ''
24
+ hex: '000000',
25
+ hexWithPrefix: '#000000'
25
26
  };
26
27
 
27
28
  exports.COLOR_PICKER_INITIAL_STATE = COLOR_PICKER_INITIAL_STATE;
@@ -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;"}
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;"}
@@ -7,28 +7,24 @@ var utilities = require('../utilities.js');
7
7
  var constants = require('../constants.js');
8
8
 
9
9
  const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
10
- const [choosenColor, setChoosenColor] = React.useState(initialColor);
11
- const [color, setColor] = React.useState(constants.COLOR_PICKER_INITIAL_STATE);
10
+ const [choosenColor, setChoosenColor] = React.useState(initialColor !== null && initialColor !== void 0 ? initialColor : constants.COLOR_PICKER_INITIAL_STATE.hex);
11
+ const [color, setColor] = React.useState(initialColor ? utilities.getAllColorFormats(initialColor) : constants.COLOR_PICKER_INITIAL_STATE);
12
12
  React.useEffect(() => {
13
- setColors(initialColor);
14
- }, [initialColor]);
15
- const handleChangeSaturation = (hsv) => {
16
- setColors(hsv);
17
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
18
- };
19
- const handleChangeHue = (hsl) => {
20
- const hueColorSet = utilities.getColorFormatsWithoutHsv(hsl);
13
+ onChange === null || onChange === void 0 ? void 0 : onChange(color);
14
+ }, [color]);
15
+ const handleChangeSaturation = (hsva) => {
16
+ setColors(hsva);
17
+ };
18
+ const handleChangeHue = (hsls) => {
19
+ const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
21
20
  setColor({ ...color, ...hueColorSet });
22
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
23
21
  };
24
- const handleChangeAlpha = (hsl) => {
25
- const hueColorSet = utilities.getColorFormatsWithoutHsv(hsl);
22
+ const handleChangeAlpha = (hsls) => {
23
+ const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
26
24
  setColor({ ...color, ...hueColorSet });
27
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
28
25
  };
29
- const handlePickSwatch = (rgb) => {
30
- setColors(rgb);
31
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
26
+ const handlePickSwatch = (rgba) => {
27
+ setColors(rgba);
32
28
  };
33
29
  const handleCancel = () => {
34
30
  setColors(choosenColor);
@@ -36,7 +32,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
36
32
  };
37
33
  const handleSave = () => {
38
34
  setChoosenColor(color.hex);
39
- onSave === null || onSave === void 0 ? void 0 : onSave(color.hex);
35
+ onSave === null || onSave === void 0 ? void 0 : onSave(color);
40
36
  };
41
37
  const setColors = (color) => {
42
38
  setColor(utilities.getAllColorFormats(color));
@@ -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;"}
@@ -20,7 +20,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
20
20
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
21
 
22
22
  // @ts-ignore
23
- const ColorPickerNew = ({ initialColor = '#fff', pickerText, onChange, onCancel, onSave }) => {
23
+ const ColorPickerNew = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
24
24
  var _a;
25
25
  const { color, handleChangeSaturation, handleChangeHue, handleChangeAlpha, handlePickSwatch, handleCancel, handleSave } = use_color_picker['default']({
26
26
  initialColor,
@@ -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'], { type: "text", id: id, name: name, 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
- React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, { text: pickerText, onCancel: handleCancel }),
39
+ React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, { 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
 
@@ -7,15 +7,21 @@ 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
+ hexWithPrefix: `#${getHexValue(colorSet)}`
14
15
  };
15
16
  };
16
17
  const getColorFormatsWithoutHsv = (hue) => {
17
18
  const colorSet = tinycolor['default'](hue);
18
- return { hsl: hue, rgb: colorSet.toRgb(), hex: getHexValue(colorSet) };
19
+ return {
20
+ hsla: hue,
21
+ rgba: colorSet.toRgb(),
22
+ hex: getHexValue(colorSet),
23
+ hexWithPrefix: `#${getHexValue(colorSet)}`
24
+ };
19
25
  };
20
26
  const getHexValue = (colorSet) => {
21
27
  const alphaValue = colorSet.getAlpha();
@@ -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;AACA;AACA;"}
@@ -11,14 +11,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
 
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
- const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, pickerText, initialColor, onChange, onCancel, onSave }) => {
14
+ const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, initialColor, onChange, onCancel, onSave }) => {
15
15
  return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
16
16
  (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
17
17
  label,
18
18
  hint && React__default['default'].createElement(index$1['default'], { hint: hint, spacingLeft: true }))),
19
19
  React__default['default'].createElement(index['default'].Content, null,
20
20
  React__default['default'].createElement(index['default'].Element, null,
21
- React__default['default'].createElement(index$2['default'], { pickerText: pickerText, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
21
+ React__default['default'].createElement(index$2['default'], { id: id, name: name, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
22
22
  React__default['default'].createElement(index['default'].Errors, null)));
23
23
  };
24
24
 
@@ -29,6 +29,7 @@ var Yesterday = "Yesterday";
29
29
  var Add = "Add";
30
30
  var Remove = "Remove";
31
31
  var Search = "Search";
32
+ var save = "save";
32
33
  var en = {
33
34
  date: date,
34
35
  cancel: cancel,
@@ -83,7 +84,10 @@ var en = {
83
84
  "Drag a file here or browse": "Drag a file here or browse",
84
85
  "supported format": "supported format",
85
86
  "The value cannot be greater than the width of the uploaded file": "The value cannot be greater than the width of the uploaded file",
86
- "Invalid file format": "Invalid file format"
87
+ "Invalid file format": "Invalid file format",
88
+ save: save,
89
+ "Shades of color": "Shades of color",
90
+ "Select color": "Select color"
87
91
  };
88
92
 
89
93
  exports.Add = Add;
@@ -109,6 +113,7 @@ exports.monday = monday;
109
113
  exports.november = november;
110
114
  exports.october = october;
111
115
  exports.saturday = saturday;
116
+ exports.save = save;
112
117
  exports.september = september;
113
118
  exports.sunday = sunday;
114
119
  exports.thursday = thursday;
@@ -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;"}
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;AACA;AACA;AACA;AACA;"}
@@ -29,6 +29,7 @@ var Yesterday = "Wczoraj";
29
29
  var Add = "Dodaj";
30
30
  var Remove = "Usuń";
31
31
  var Search = "Szukaj";
32
+ var save = "zapisz";
32
33
  var pl = {
33
34
  date: date,
34
35
  cancel: cancel,
@@ -83,7 +84,10 @@ var pl = {
83
84
  "Drag a file here or browse": "Przeciągnij lub wybierz plik z dysku",
84
85
  "supported format": "obsługiwany format",
85
86
  "The value cannot be greater than the width of the uploaded file": "Wartość nie może być większa od szerokości wgranego pliku",
86
- "Invalid file format": "Nieprawidłowy format pliku"
87
+ "Invalid file format": "Nieprawidłowy format pliku",
88
+ save: save,
89
+ "Shades of color": "Odcienie koloru",
90
+ "Select color": "Wybierz kolor"
87
91
  };
88
92
 
89
93
  exports.Add = Add;
@@ -109,6 +113,7 @@ exports.monday = monday;
109
113
  exports.november = november;
110
114
  exports.october = october;
111
115
  exports.saturday = saturday;
116
+ exports.save = save;
112
117
  exports.september = september;
113
118
  exports.sunday = sunday;
114
119
  exports.thursday = thursday;
@@ -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;"}
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;AACA;AACA;AACA;AACA;"}
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  interface IColorPickerHeaderProps {
3
- text: string;
4
3
  onCancel?: () => void;
5
4
  }
6
5
  export declare const ColorPickerHeader: React.FC<IColorPickerHeaderProps>;
@@ -1,17 +1,19 @@
1
1
  import React, { useContext } from 'react';
2
+ import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
2
3
  import { DropdownContext } from '../../dropdown/context/index.js';
3
4
  import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
4
5
  import styles from '../../../css/color_picker_new/main.module.less.js';
5
6
  import IconClose from '../../../assets/icon_close.js';
6
7
 
7
- const ColorPickerHeader = ({ text, onCancel }) => {
8
+ const ColorPickerHeader = ({ onCancel }) => {
9
+ const [t] = useTranslation();
8
10
  const { toggleDropdown } = useContext(DropdownContext);
9
11
  const handleCancelButton = () => {
10
12
  toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
11
13
  onCancel === null || onCancel === void 0 ? void 0 : onCancel();
12
14
  };
13
15
  return (React.createElement("div", { className: `${styles[cssColorPickerHeader]}` },
14
- text,
16
+ t('Select color'),
15
17
  React.createElement("button", { onClick: handleCancelButton, className: `${styles[cssColorPickerCloseIcon]}` },
16
18
  React.createElement(IconClose, { size: "m" }))));
17
19
  };
@@ -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;"}
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;"}
@@ -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 {};
@@ -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 {};
@@ -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
  };
@@ -1,21 +1,22 @@
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;
18
18
  a: number;
19
19
  };
20
20
  hex: string;
21
+ hexWithPrefix: string;
21
22
  };
@@ -1,23 +1,24 @@
1
1
  const COLOR_PICKER_INITIAL_STATE = {
2
- hsl: {
2
+ hsla: {
3
3
  h: 0,
4
4
  s: 0,
5
5
  l: 0,
6
- a: 0
6
+ a: 1
7
7
  },
8
- hsv: {
8
+ hsva: {
9
9
  h: 0,
10
10
  s: 0,
11
11
  v: 0,
12
- a: 0
12
+ a: 1
13
13
  },
14
- rgb: {
14
+ rgba: {
15
15
  r: 0,
16
16
  g: 0,
17
17
  b: 0,
18
- a: 0
18
+ a: 1
19
19
  },
20
- hex: ''
20
+ hex: '000000',
21
+ hexWithPrefix: '#000000'
21
22
  };
22
23
 
23
24
  export { COLOR_PICKER_INITIAL_STATE };
@@ -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;"}
@@ -1,16 +1,16 @@
1
1
  import { ColorPickerColorFormats } from '../types';
2
2
  export declare type ColorPickerHookProps = {
3
- initialColor: ColorPickerColorFormats['hex'];
4
- onChange?: (color: string) => void;
3
+ initialColor?: ColorPickerColorFormats['hex'];
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
  };
@@ -1,30 +1,26 @@
1
1
  import { useState, useEffect } from 'react';
2
- import { getColorFormatsWithoutHsv, getAllColorFormats } from '../utilities.js';
2
+ import { getAllColorFormats, getColorFormatsWithoutHsv } from '../utilities.js';
3
3
  import { COLOR_PICKER_INITIAL_STATE } from '../constants.js';
4
4
 
5
5
  const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
6
- const [choosenColor, setChoosenColor] = useState(initialColor);
7
- const [color, setColor] = useState(COLOR_PICKER_INITIAL_STATE);
6
+ const [choosenColor, setChoosenColor] = useState(initialColor !== null && initialColor !== void 0 ? initialColor : COLOR_PICKER_INITIAL_STATE.hex);
7
+ const [color, setColor] = useState(initialColor ? getAllColorFormats(initialColor) : COLOR_PICKER_INITIAL_STATE);
8
8
  useEffect(() => {
9
- setColors(initialColor);
10
- }, [initialColor]);
11
- const handleChangeSaturation = (hsv) => {
12
- setColors(hsv);
13
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
14
- };
15
- const handleChangeHue = (hsl) => {
16
- const hueColorSet = getColorFormatsWithoutHsv(hsl);
9
+ onChange === null || onChange === void 0 ? void 0 : onChange(color);
10
+ }, [color]);
11
+ const handleChangeSaturation = (hsva) => {
12
+ setColors(hsva);
13
+ };
14
+ const handleChangeHue = (hsls) => {
15
+ const hueColorSet = getColorFormatsWithoutHsv(hsls);
17
16
  setColor({ ...color, ...hueColorSet });
18
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
19
17
  };
20
- const handleChangeAlpha = (hsl) => {
21
- const hueColorSet = getColorFormatsWithoutHsv(hsl);
18
+ const handleChangeAlpha = (hsls) => {
19
+ const hueColorSet = getColorFormatsWithoutHsv(hsls);
22
20
  setColor({ ...color, ...hueColorSet });
23
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
24
21
  };
25
- const handlePickSwatch = (rgb) => {
26
- setColors(rgb);
27
- onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
22
+ const handlePickSwatch = (rgba) => {
23
+ setColors(rgba);
28
24
  };
29
25
  const handleCancel = () => {
30
26
  setColors(choosenColor);
@@ -32,7 +28,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
32
28
  };
33
29
  const handleSave = () => {
34
30
  setChoosenColor(color.hex);
35
- onSave === null || onSave === void 0 ? void 0 : onSave(color.hex);
31
+ onSave === null || onSave === void 0 ? void 0 : onSave(color);
36
32
  };
37
33
  const setColors = (color) => {
38
34
  setColor(getAllColorFormats(color));
@@ -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;"}
@@ -12,7 +12,7 @@ import Dropdown from '../dropdown/index.js';
12
12
  import useColorPicker from './hooks/use_color_picker.js';
13
13
 
14
14
  // @ts-ignore
15
- const ColorPickerNew = ({ initialColor = '#fff', pickerText, onChange, onCancel, onSave }) => {
15
+ const ColorPickerNew = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
16
16
  var _a;
17
17
  const { color, handleChangeSaturation, handleChangeHue, handleChangeAlpha, handlePickSwatch, handleCancel, handleSave } = useColorPicker({
18
18
  initialColor,
@@ -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, { type: "text", id: id, name: name, 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
- React.createElement(ColorPickerHeader, { text: pickerText, onCancel: handleCancel }),
31
+ React.createElement(ColorPickerHeader, { 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
 
@@ -1,29 +1,31 @@
1
1
  export interface IColorPickerNewProps {
2
- pickerText: string;
2
+ id: string;
3
+ name?: string;
3
4
  initialColor?: ColorPickerColorFormats['hex'] | undefined;
4
- onChange?: (color: string) => void;
5
+ onChange?: (color: ColorPickerColorFormats) => void;
5
6
  onCancel?: () => void;
6
- onSave?: (color: string) => void;
7
+ onSave?: (color: ColorPickerColorFormats) => void;
7
8
  }
8
9
  export declare type ColorPickerColorFormats = {
9
- hsl: {
10
+ hsla: {
10
11
  h: number;
11
12
  s: number;
12
13
  l: number;
13
- a?: number;
14
+ a: number;
14
15
  };
15
- hsv: {
16
+ hsva: {
16
17
  h: number;
17
18
  s: number;
18
19
  v: number;
19
- a?: number;
20
+ a: number;
20
21
  };
21
- rgb: {
22
+ rgba: {
22
23
  r: number;
23
24
  g: number;
24
25
  b: number;
25
- a?: number;
26
+ a: number;
26
27
  };
27
28
  hex: string;
29
+ hexWithPrefix: string;
28
30
  };
29
- export declare type ColorPickerColorTypes = ColorPickerColorFormats['hsl'] | ColorPickerColorFormats['hsv'] | ColorPickerColorFormats['rgb'] | ColorPickerColorFormats['hex'];
31
+ export declare type ColorPickerColorTypes = ColorPickerColorFormats['hsla'] | ColorPickerColorFormats['hsva'] | ColorPickerColorFormats['rgba'] | ColorPickerColorFormats['hex'] | ColorPickerColorFormats['hexWithPrefix'];
@@ -1,19 +1,21 @@
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
+ hexWithPrefix: string;
8
9
  };
9
- export declare const getColorFormatsWithoutHsv: (hue: ColorPickerColorFormats['hsl']) => {
10
- hsl: {
10
+ export declare const getColorFormatsWithoutHsv: (hue: ColorPickerColorFormats['hsla']) => {
11
+ hsla: {
11
12
  h: number;
12
13
  s: number;
13
14
  l: number;
14
- a?: number | undefined;
15
+ a: number;
15
16
  };
16
- rgb: tinycolor.ColorFormats.RGBA;
17
+ rgba: tinycolor.ColorFormats.RGBA;
17
18
  hex: string;
19
+ hexWithPrefix: string;
18
20
  };
19
21
  export declare const getHexValue: (colorSet: tinycolor.Instance) => string;
@@ -3,15 +3,21 @@ 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
+ hexWithPrefix: `#${getHexValue(colorSet)}`
10
11
  };
11
12
  };
12
13
  const getColorFormatsWithoutHsv = (hue) => {
13
14
  const colorSet = tinycolor(hue);
14
- return { hsl: hue, rgb: colorSet.toRgb(), hex: getHexValue(colorSet) };
15
+ return {
16
+ hsla: hue,
17
+ rgba: colorSet.toRgb(),
18
+ hex: getHexValue(colorSet),
19
+ hexWithPrefix: `#${getHexValue(colorSet)}`
20
+ };
15
21
  };
16
22
  const getHexValue = (colorSet) => {
17
23
  const alphaValue = colorSet.getAlpha();
@@ -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;AACA;AACA;"}
@@ -3,14 +3,14 @@ import Control from '../../index.js';
3
3
  import Hint from '../../../hint/index.js';
4
4
  import ColorPickerNew from '../../../color_picker_new/index.js';
5
5
 
6
- const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, pickerText, initialColor, onChange, onCancel, onSave }) => {
6
+ const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, initialColor, onChange, onCancel, onSave }) => {
7
7
  return (React.createElement(Control, { errors: errors, name: name, id: id },
8
8
  (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
9
9
  label,
10
10
  hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
11
11
  React.createElement(Control.Content, null,
12
12
  React.createElement(Control.Element, null,
13
- React.createElement(ColorPickerNew, { pickerText: pickerText, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
13
+ React.createElement(ColorPickerNew, { id: id, name: name, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
14
14
  React.createElement(Control.Errors, null)));
15
15
  };
16
16
 
@@ -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 };
@@ -52,5 +52,8 @@
52
52
  "Drag a file here or browse": "Drag a file here or browse",
53
53
  "supported format": "supported format",
54
54
  "The value cannot be greater than the width of the uploaded file": "The value cannot be greater than the width of the uploaded file",
55
- "Invalid file format": "Invalid file format"
55
+ "Invalid file format": "Invalid file format",
56
+ "save": "save",
57
+ "Shades of color": "Shades of color",
58
+ "Select color": "Select color"
56
59
  }
@@ -25,6 +25,7 @@ var Yesterday = "Yesterday";
25
25
  var Add = "Add";
26
26
  var Remove = "Remove";
27
27
  var Search = "Search";
28
+ var save = "save";
28
29
  var en = {
29
30
  date: date,
30
31
  cancel: cancel,
@@ -79,9 +80,12 @@ var en = {
79
80
  "Drag a file here or browse": "Drag a file here or browse",
80
81
  "supported format": "supported format",
81
82
  "The value cannot be greater than the width of the uploaded file": "The value cannot be greater than the width of the uploaded file",
82
- "Invalid file format": "Invalid file format"
83
+ "Invalid file format": "Invalid file format",
84
+ save: save,
85
+ "Shades of color": "Shades of color",
86
+ "Select color": "Select color"
83
87
  };
84
88
 
85
89
  export default en;
86
- export { Add, Remove, Search, Yesterday, april, august, cancel, choose, color, date, december, february, friday, january, july, june, march, may, monday, november, october, saturday, september, sunday, thursday, tuesday, wednesday };
90
+ export { Add, Remove, Search, Yesterday, april, august, cancel, choose, color, date, december, february, friday, january, july, june, march, may, monday, november, october, saturday, save, september, sunday, thursday, tuesday, wednesday };
87
91
  //# sourceMappingURL=en.json.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;"}
@@ -52,5 +52,8 @@
52
52
  "Drag a file here or browse": "Przeciągnij lub wybierz plik z dysku",
53
53
  "supported format": "obsługiwany format",
54
54
  "The value cannot be greater than the width of the uploaded file": "Wartość nie może być większa od szerokości wgranego pliku",
55
- "Invalid file format": "Nieprawidłowy format pliku"
55
+ "Invalid file format": "Nieprawidłowy format pliku",
56
+ "save": "zapisz",
57
+ "Shades of color": "Odcienie koloru",
58
+ "Select color": "Wybierz kolor"
56
59
  }
@@ -25,6 +25,7 @@ var Yesterday = "Wczoraj";
25
25
  var Add = "Dodaj";
26
26
  var Remove = "Usuń";
27
27
  var Search = "Szukaj";
28
+ var save = "zapisz";
28
29
  var pl = {
29
30
  date: date,
30
31
  cancel: cancel,
@@ -79,9 +80,12 @@ var pl = {
79
80
  "Drag a file here or browse": "Przeciągnij lub wybierz plik z dysku",
80
81
  "supported format": "obsługiwany format",
81
82
  "The value cannot be greater than the width of the uploaded file": "Wartość nie może być większa od szerokości wgranego pliku",
82
- "Invalid file format": "Nieprawidłowy format pliku"
83
+ "Invalid file format": "Nieprawidłowy format pliku",
84
+ save: save,
85
+ "Shades of color": "Odcienie koloru",
86
+ "Select color": "Wybierz kolor"
83
87
  };
84
88
 
85
89
  export default pl;
86
- export { Add, Remove, Search, Yesterday, april, august, cancel, choose, color, date, december, february, friday, january, july, june, march, may, monday, november, october, saturday, september, sunday, thursday, tuesday, wednesday };
90
+ export { Add, Remove, Search, Yesterday, april, august, cancel, choose, color, date, december, february, friday, january, july, june, march, may, monday, november, october, saturday, save, september, sunday, thursday, tuesday, wednesday };
87
91
  //# sourceMappingURL=pl.json.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;"}
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-20",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",