@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,119 +0,0 @@
1
- import React, { useState } from "react";
2
- import classNames from "classnames";
3
- import Popover from "../../components/popovers/popover/Popover.js";
4
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
5
- function ColorIndicator(_ref) {
6
- let {
7
- text,
8
- label,
9
- color,
10
- className,
11
- showPopOver = false,
12
- children,
13
- disabled
14
- } = _ref;
15
- const classes = classNames("fwe-color-indicator", className, disabled);
16
- const [isEditorOpen, setEditorOpen] = useState(false);
17
- function getBorderColor() {
18
- if (!color || color.toUpperCase() === "#FFFFFF" || color.toUpperCase() === "#F0F2F3") {
19
- return "#b6bec6"; // = $control-border
20
- }
21
- return color;
22
- }
23
- const colorBox = /*#__PURE__*/_jsx("div", {
24
- className: "fwe-color-box",
25
- style: {
26
- background: color,
27
- borderColor: getBorderColor()
28
- },
29
- children: !color && /*#__PURE__*/_jsxs("svg", {
30
- className: "fwe-no-color-pattern",
31
- version: "1.1",
32
- xmlns: "http://www.w3.org/2000/svg",
33
- xmlnsXlink: "http://www.w3.org/1999/xlink",
34
- id: "canvas1",
35
- width: "18",
36
- height: "18",
37
- children: [/*#__PURE__*/_jsx("defs", {
38
- children: /*#__PURE__*/_jsxs("pattern", {
39
- id: "bwsquare2px",
40
- width: "4",
41
- height: "4",
42
- patternUnits: "userSpaceOnUse",
43
- children: [/*#__PURE__*/_jsx("rect", {
44
- x: "0",
45
- y: "0",
46
- width: "2",
47
- height: "2",
48
- stroke: "none",
49
- fill: "#ffffff"
50
- }), /*#__PURE__*/_jsx("rect", {
51
- x: "2",
52
- y: "0",
53
- width: "2",
54
- height: "2",
55
- stroke: "none",
56
- fill: "#e2e5e8"
57
- }), /*#__PURE__*/_jsx("rect", {
58
- x: "0",
59
- y: "2",
60
- width: "2",
61
- height: "2",
62
- stroke: "none",
63
- fill: "#e2e5e8"
64
- }), /*#__PURE__*/_jsx("rect", {
65
- x: "2",
66
- y: "2",
67
- width: "2",
68
- height: "2",
69
- stroke: "none",
70
- fill: "#ffffff"
71
- })]
72
- })
73
- }), /*#__PURE__*/_jsx("rect", {
74
- x: "0",
75
- y: "0",
76
- rx: "0",
77
- ry: "0",
78
- width: "18",
79
- height: "18",
80
- fill: "url(#bwsquare2px)",
81
- strokeWidth: "0"
82
- })]
83
- })
84
- });
85
- const wrapperProperties = showPopOver ? {
86
- onClick: () => setEditorOpen(prevOpen => !prevOpen)
87
- } : {};
88
- const wrapper = wrapperChildren => /*#__PURE__*/_jsxs("div", {
89
- className: classes,
90
- ...wrapperProperties,
91
- children: [/*#__PURE__*/_jsx("div", {
92
- style: {
93
- opacity: isEditorOpen ? 0 : 1
94
- },
95
- className: "fwe-color-label",
96
- children: label
97
- }), /*#__PURE__*/_jsxs("div", {
98
- className: "fwe-color-container",
99
- children: [wrapperChildren, " ", text && /*#__PURE__*/_jsx("div", {
100
- className: "fwe-color-indicator-text",
101
- children: text
102
- }), " "]
103
- })]
104
- });
105
- return showPopOver ? /*#__PURE__*/_jsx(Popover, {
106
- containerClassName: "fwe-popover-container--color-indicator",
107
- position: "top",
108
- flip: false,
109
- wrapper: wrapper,
110
- popoverContent: children,
111
- open: isEditorOpen,
112
- onStatusChange: setEditorOpen,
113
- stopPropagation: true,
114
- children: colorBox
115
- }) : /*#__PURE__*/_jsx(_Fragment, {
116
- children: wrapper(colorBox)
117
- });
118
- }
119
- export default ColorIndicator;
@@ -1,9 +0,0 @@
1
- export default abstract class ColorHelper {
2
- static rgbToHsv(rgb: Record<"r" | "g" | "b", number>): Record<"h" | "s" | "v", number> | undefined;
3
- static hsvToRgb(_hsv: Record<"h" | "s" | "v", number>): Record<"r" | "g" | "b", number>;
4
- private static limitToByte;
5
- private static limitToOne;
6
- private static numberToHex;
7
- static rgbToHex(_rgb: Record<"r" | "g" | "b", number>): string;
8
- static hexToRgb(hexString: string): Record<"r" | "g" | "b", number> | undefined;
9
- }
@@ -1,140 +0,0 @@
1
- export default class ColorHelper {
2
- // based on: https://gist.github.com/mjackson/5311256
3
- static rgbToHsv(rgb) {
4
- if (!rgb) {
5
- return undefined;
6
- }
7
- const r = this.limitToByte(rgb.r) / 255;
8
- const g = this.limitToByte(rgb.g) / 255;
9
- const b = this.limitToByte(rgb.b) / 255;
10
- const max = Math.max(r, g, b);
11
- const min = Math.min(r, g, b);
12
- let h = max;
13
- let s = max;
14
- const v = max;
15
- const d = max - min;
16
- s = max === 0 ? 0 : d / max;
17
- if (max === min) {
18
- h = 0; // achromatic
19
- } else {
20
- switch (max) {
21
- case r:
22
- h = (g - b) / d + (g < b ? 6 : 0);
23
- break;
24
- case g:
25
- h = (b - r) / d + 2;
26
- break;
27
- case b:
28
- h = (r - g) / d + 4;
29
- break;
30
- default:
31
- // no other option
32
- }
33
- h /= 6;
34
- }
35
- return {
36
- h,
37
- s,
38
- v
39
- };
40
- }
41
-
42
- // based on: https://gist.github.com/mjackson/5311256
43
- static hsvToRgb(_hsv) {
44
- const hsv = _hsv;
45
- hsv.h = this.limitToOne(_hsv.h);
46
- hsv.s = this.limitToOne(_hsv.s);
47
- hsv.v = this.limitToOne(_hsv.v);
48
- let r = 0;
49
- let g = 0;
50
- let b = 0;
51
- const i = Math.floor(hsv.h * 6);
52
- const f = hsv.h * 6 - i;
53
- const p = hsv.v * (1 - hsv.s);
54
- const q = hsv.v * (1 - f * hsv.s);
55
- const t = hsv.v * (1 - (1 - f) * hsv.s);
56
- switch (i % 6) {
57
- case 0:
58
- r = hsv.v;
59
- g = t;
60
- b = p;
61
- break;
62
- case 1:
63
- r = q;
64
- g = hsv.v;
65
- b = p;
66
- break;
67
- case 2:
68
- r = p;
69
- g = hsv.v;
70
- b = t;
71
- break;
72
- case 3:
73
- r = p;
74
- g = q;
75
- b = hsv.v;
76
- break;
77
- case 4:
78
- r = t;
79
- g = p;
80
- b = hsv.v;
81
- break;
82
- case 5:
83
- r = hsv.v;
84
- g = p;
85
- b = q;
86
- break;
87
- default:
88
- // no other option
89
- }
90
- return {
91
- r: this.limitToByte(r * 255),
92
- g: this.limitToByte(g * 255),
93
- b: this.limitToByte(b * 255)
94
- };
95
- }
96
- static limitToByte(num) {
97
- if (num <= 0) {
98
- return 0;
99
- }
100
- if (num >= 255) {
101
- return 255;
102
- }
103
- return num;
104
- }
105
- static limitToOne(num) {
106
- if (num <= 0) {
107
- return 0;
108
- }
109
- if (num >= 1) {
110
- return 1;
111
- }
112
- return num;
113
- }
114
- static numberToHex(rgb) {
115
- let hex = Math.round(rgb).toString(16);
116
- if (hex.length < 2) {
117
- hex = `0${hex}`;
118
- }
119
- return hex.toUpperCase();
120
- }
121
- static rgbToHex(_rgb) {
122
- const rgb = _rgb;
123
- rgb.r = this.limitToByte(rgb.r);
124
- rgb.g = this.limitToByte(rgb.g);
125
- rgb.b = this.limitToByte(rgb.b);
126
- const red = this.numberToHex(rgb.r);
127
- const green = this.numberToHex(rgb.g);
128
- const blue = this.numberToHex(rgb.b);
129
- return `#${red}${green}${blue}`;
130
- }
131
- static hexToRgb(hexString) {
132
- const numbersOnly = hexString.substring(1);
133
- const aRgbHex = numbersOnly.match(/.{1,2}/g);
134
- return aRgbHex ? {
135
- r: parseInt(aRgbHex[0], 16),
136
- g: parseInt(aRgbHex[1], 16),
137
- b: parseInt(aRgbHex[2], 16)
138
- } : undefined;
139
- }
140
- }
@@ -1,14 +0,0 @@
1
- import "./ColorPicker.scss";
2
- import type { ClassNameProps } from "../../helper/types";
3
- export declare const PREDEFINED_COLORS: string[];
4
- interface ColorPickerProps extends ClassNameProps {
5
- palette?: string[];
6
- useAlpha?: boolean;
7
- alpha?: number;
8
- paletteOnly?: boolean;
9
- color?: string;
10
- onChange?: (color?: string | null) => void;
11
- onAlphaChange?: (alpha?: number) => void;
12
- }
13
- declare function ColorPicker({ palette, useAlpha, alpha, paletteOnly, color, onChange, onAlphaChange, className, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
14
- export default ColorPicker;