@festo-ui/react 9.0.0-dev.679 → 9.0.0-dev.683

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 (44) hide show
  1. package/index.css +1 -14
  2. package/index.d.ts +2 -5
  3. package/index.js +2 -5
  4. package/lib/components/popovers/legend/Legend.d.ts +4 -4
  5. package/lib/components/popovers/popover/Popover.d.ts +2 -1
  6. package/lib/components/popovers/popover/Popover.js +7 -1
  7. package/lib/components/popovers/popover-menu/PopoverMenu.d.ts +5 -9
  8. package/lib/components/popovers/popover-menu/PopoverMenu.js +32 -43
  9. package/lib/components/popovers/popover-menu/PopoverMenuContext.d.ts +4 -0
  10. package/lib/components/popovers/popover-menu/PopoverMenuContext.js +5 -0
  11. package/lib/components/popovers/popover-menu-item/PopoverMenuItem.d.ts +11 -0
  12. package/lib/components/popovers/popover-menu-item/PopoverMenuItem.js +41 -0
  13. package/lib/components/popovers/tooltip/Tooltip.d.ts +4 -6
  14. package/lib/components/popovers/tooltip/Tooltip.js +11 -53
  15. package/lib/helper/useOnClickOutside.d.ts +2 -2
  16. package/node/index.js +20 -35
  17. package/node/lib/components/popovers/popover/Popover.js +7 -1
  18. package/node/lib/components/popovers/popover-menu/PopoverMenu.js +30 -41
  19. package/node/lib/components/popovers/popover-menu/PopoverMenuContext.js +11 -0
  20. package/node/lib/components/popovers/popover-menu-item/PopoverMenuItem.js +48 -0
  21. package/node/lib/components/popovers/tooltip/Tooltip.js +10 -52
  22. package/package.json +1 -6
  23. package/508.bundle.js +0 -1
  24. package/lib/forms/color-indicator/ColorIndicator.d.ts +0 -11
  25. package/lib/forms/color-indicator/ColorIndicator.js +0 -119
  26. package/lib/forms/color-picker/ColorHelper.d.ts +0 -9
  27. package/lib/forms/color-picker/ColorHelper.js +0 -140
  28. package/lib/forms/color-picker/ColorPicker.d.ts +0 -14
  29. package/lib/forms/color-picker/ColorPicker.js +0 -545
  30. package/lib/forms/date-picker/DatePicker.d.ts +0 -25
  31. package/lib/forms/date-picker/DatePicker.js +0 -155
  32. package/lib/forms/date-range-picker/DateRangePicker.d.ts +0 -19
  33. package/lib/forms/date-range-picker/DateRangePicker.js +0 -135
  34. package/lib/forms/text-editor/TextEditor.d.ts +0 -29
  35. package/lib/forms/text-editor/TextEditor.js +0 -256
  36. package/lib/forms/text-editor/TextEditorButton.d.ts +0 -14
  37. package/lib/forms/text-editor/TextEditorButton.js +0 -80
  38. package/node/lib/forms/color-indicator/ColorIndicator.js +0 -128
  39. package/node/lib/forms/color-picker/ColorHelper.js +0 -147
  40. package/node/lib/forms/color-picker/ColorPicker.js +0 -552
  41. package/node/lib/forms/date-picker/DatePicker.js +0 -162
  42. package/node/lib/forms/date-range-picker/DateRangePicker.js +0 -142
  43. package/node/lib/forms/text-editor/TextEditor.js +0 -265
  44. package/node/lib/forms/text-editor/TextEditorButton.js +0 -87
@@ -1,128 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _classnames = _interopRequireDefault(require("classnames"));
9
- var _Popover = _interopRequireDefault(require("../../components/popovers/popover/Popover.js"));
10
- var _jsxRuntime = require("react/jsx-runtime");
11
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
13
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
14
- function ColorIndicator(_ref) {
15
- let {
16
- text,
17
- label,
18
- color,
19
- className,
20
- showPopOver = false,
21
- children,
22
- disabled
23
- } = _ref;
24
- const classes = (0, _classnames.default)("fwe-color-indicator", className, disabled);
25
- const [isEditorOpen, setEditorOpen] = (0, _react.useState)(false);
26
- function getBorderColor() {
27
- if (!color || color.toUpperCase() === "#FFFFFF" || color.toUpperCase() === "#F0F2F3") {
28
- return "#b6bec6"; // = $control-border
29
- }
30
- return color;
31
- }
32
- const colorBox = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
33
- className: "fwe-color-box",
34
- style: {
35
- background: color,
36
- borderColor: getBorderColor()
37
- },
38
- children: !color && /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
39
- className: "fwe-no-color-pattern",
40
- version: "1.1",
41
- xmlns: "http://www.w3.org/2000/svg",
42
- xmlnsXlink: "http://www.w3.org/1999/xlink",
43
- id: "canvas1",
44
- width: "18",
45
- height: "18",
46
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
47
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("pattern", {
48
- id: "bwsquare2px",
49
- width: "4",
50
- height: "4",
51
- patternUnits: "userSpaceOnUse",
52
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
53
- x: "0",
54
- y: "0",
55
- width: "2",
56
- height: "2",
57
- stroke: "none",
58
- fill: "#ffffff"
59
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
60
- x: "2",
61
- y: "0",
62
- width: "2",
63
- height: "2",
64
- stroke: "none",
65
- fill: "#e2e5e8"
66
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
67
- x: "0",
68
- y: "2",
69
- width: "2",
70
- height: "2",
71
- stroke: "none",
72
- fill: "#e2e5e8"
73
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
74
- x: "2",
75
- y: "2",
76
- width: "2",
77
- height: "2",
78
- stroke: "none",
79
- fill: "#ffffff"
80
- })]
81
- })
82
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
83
- x: "0",
84
- y: "0",
85
- rx: "0",
86
- ry: "0",
87
- width: "18",
88
- height: "18",
89
- fill: "url(#bwsquare2px)",
90
- strokeWidth: "0"
91
- })]
92
- })
93
- });
94
- const wrapperProperties = showPopOver ? {
95
- onClick: () => setEditorOpen(prevOpen => !prevOpen)
96
- } : {};
97
- const wrapper = wrapperChildren => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
98
- className: classes,
99
- ...wrapperProperties,
100
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
101
- style: {
102
- opacity: isEditorOpen ? 0 : 1
103
- },
104
- className: "fwe-color-label",
105
- children: label
106
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
107
- className: "fwe-color-container",
108
- children: [wrapperChildren, " ", text && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
109
- className: "fwe-color-indicator-text",
110
- children: text
111
- }), " "]
112
- })]
113
- });
114
- return showPopOver ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
115
- containerClassName: "fwe-popover-container--color-indicator",
116
- position: "top",
117
- flip: false,
118
- wrapper: wrapper,
119
- popoverContent: children,
120
- open: isEditorOpen,
121
- onStatusChange: setEditorOpen,
122
- stopPropagation: true,
123
- children: colorBox
124
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
125
- children: wrapper(colorBox)
126
- });
127
- }
128
- var _default = exports.default = ColorIndicator;
@@ -1,147 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- class ColorHelper {
8
- // based on: https://gist.github.com/mjackson/5311256
9
- static rgbToHsv(rgb) {
10
- if (!rgb) {
11
- return undefined;
12
- }
13
- const r = this.limitToByte(rgb.r) / 255;
14
- const g = this.limitToByte(rgb.g) / 255;
15
- const b = this.limitToByte(rgb.b) / 255;
16
- const max = Math.max(r, g, b);
17
- const min = Math.min(r, g, b);
18
- let h = max;
19
- let s = max;
20
- const v = max;
21
- const d = max - min;
22
- s = max === 0 ? 0 : d / max;
23
- if (max === min) {
24
- h = 0; // achromatic
25
- } else {
26
- switch (max) {
27
- case r:
28
- h = (g - b) / d + (g < b ? 6 : 0);
29
- break;
30
- case g:
31
- h = (b - r) / d + 2;
32
- break;
33
- case b:
34
- h = (r - g) / d + 4;
35
- break;
36
- default:
37
- // no other option
38
- }
39
- h /= 6;
40
- }
41
- return {
42
- h,
43
- s,
44
- v
45
- };
46
- }
47
-
48
- // based on: https://gist.github.com/mjackson/5311256
49
- static hsvToRgb(_hsv) {
50
- const hsv = _hsv;
51
- hsv.h = this.limitToOne(_hsv.h);
52
- hsv.s = this.limitToOne(_hsv.s);
53
- hsv.v = this.limitToOne(_hsv.v);
54
- let r = 0;
55
- let g = 0;
56
- let b = 0;
57
- const i = Math.floor(hsv.h * 6);
58
- const f = hsv.h * 6 - i;
59
- const p = hsv.v * (1 - hsv.s);
60
- const q = hsv.v * (1 - f * hsv.s);
61
- const t = hsv.v * (1 - (1 - f) * hsv.s);
62
- switch (i % 6) {
63
- case 0:
64
- r = hsv.v;
65
- g = t;
66
- b = p;
67
- break;
68
- case 1:
69
- r = q;
70
- g = hsv.v;
71
- b = p;
72
- break;
73
- case 2:
74
- r = p;
75
- g = hsv.v;
76
- b = t;
77
- break;
78
- case 3:
79
- r = p;
80
- g = q;
81
- b = hsv.v;
82
- break;
83
- case 4:
84
- r = t;
85
- g = p;
86
- b = hsv.v;
87
- break;
88
- case 5:
89
- r = hsv.v;
90
- g = p;
91
- b = q;
92
- break;
93
- default:
94
- // no other option
95
- }
96
- return {
97
- r: this.limitToByte(r * 255),
98
- g: this.limitToByte(g * 255),
99
- b: this.limitToByte(b * 255)
100
- };
101
- }
102
- static limitToByte(num) {
103
- if (num <= 0) {
104
- return 0;
105
- }
106
- if (num >= 255) {
107
- return 255;
108
- }
109
- return num;
110
- }
111
- static limitToOne(num) {
112
- if (num <= 0) {
113
- return 0;
114
- }
115
- if (num >= 1) {
116
- return 1;
117
- }
118
- return num;
119
- }
120
- static numberToHex(rgb) {
121
- let hex = Math.round(rgb).toString(16);
122
- if (hex.length < 2) {
123
- hex = `0${hex}`;
124
- }
125
- return hex.toUpperCase();
126
- }
127
- static rgbToHex(_rgb) {
128
- const rgb = _rgb;
129
- rgb.r = this.limitToByte(rgb.r);
130
- rgb.g = this.limitToByte(rgb.g);
131
- rgb.b = this.limitToByte(rgb.b);
132
- const red = this.numberToHex(rgb.r);
133
- const green = this.numberToHex(rgb.g);
134
- const blue = this.numberToHex(rgb.b);
135
- return `#${red}${green}${blue}`;
136
- }
137
- static hexToRgb(hexString) {
138
- const numbersOnly = hexString.substring(1);
139
- const aRgbHex = numbersOnly.match(/.{1,2}/g);
140
- return aRgbHex ? {
141
- r: parseInt(aRgbHex[0], 16),
142
- g: parseInt(aRgbHex[1], 16),
143
- b: parseInt(aRgbHex[2], 16)
144
- } : undefined;
145
- }
146
- }
147
- exports.default = ColorHelper;