@festo-ui/react-extra 9.0.0-dev.691 → 9.0.0-dev.692

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 (24) hide show
  1. package/package.json +2 -1
  2. package/dist/forms/color-indicator/ColorIndicator.css +0 -60
  3. package/dist/forms/color-indicator/ColorIndicator.d.ts +0 -13
  4. package/dist/forms/color-indicator/ColorIndicator.js +0 -126
  5. package/dist/forms/color-picker/ColorHelper.d.ts +0 -5
  6. package/dist/forms/color-picker/ColorHelper.js +0 -121
  7. package/dist/forms/color-picker/ColorPicker.css +0 -377
  8. package/dist/forms/color-picker/ColorPicker.d.ts +0 -13
  9. package/dist/forms/color-picker/ColorPicker.js +0 -676
  10. package/dist/forms/date-picker/DatePicker.css +0 -26
  11. package/dist/forms/date-picker/DatePicker.d.ts +0 -25
  12. package/dist/forms/date-picker/DatePicker.js +0 -138
  13. package/dist/forms/date-range-picker/DateRangePicker.css +0 -21
  14. package/dist/forms/date-range-picker/DateRangePicker.d.ts +0 -19
  15. package/dist/forms/date-range-picker/DateRangePicker.js +0 -130
  16. package/dist/forms/text-editor/TextEditor.css +0 -1532
  17. package/dist/forms/text-editor/TextEditor.d.ts +0 -28
  18. package/dist/forms/text-editor/TextEditor.js +0 -279
  19. package/dist/forms/text-editor/TextEditorButton.d.ts +0 -14
  20. package/dist/forms/text-editor/TextEditorButton.js +0 -73
  21. package/dist/index.d.ts +0 -5
  22. package/dist/index.js +0 -6
  23. package/dist/utils/useId.d.ts +0 -1
  24. package/dist/utils/useId.js +0 -20
package/dist/forms/color-picker/ColorPicker.js DELETED
@@ -1,676 +0,0 @@
1
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import { IconCheckSmall, IconCollapse } from "@festo-ui/react-icons";
3
- import classnames from "classnames";
4
- import { useCallback, useEffect, useRef, useState } from "react";
5
- import react_draggable from "react-draggable";
6
- import "./ColorPicker.css";
7
- import useId from "../../utils/useId.js";
8
- import { hexToRgb, hsvToRgb, rgbToHex, rgbToHsv } from "./ColorHelper.js";
9
- const PREDEFINED_COLORS = [
10
- '#0091dc',
11
- '#333333',
12
- '#ffffff',
13
- '#f0f2f3',
14
- '#e2e5e8',
15
- '#d3d8dd',
16
- '#b6bec6',
17
- '#80ca3d',
18
- '#ffd600',
19
- '#ff9600',
20
- '#d50000'
21
- ];
22
- function ColorPicker({ className, palette = PREDEFINED_COLORS, useAlpha = false, alpha = 100, paletteOnly, color = '#FFFFFF', onChange, onAlphaChange }) {
23
- const baseSize = 184;
24
- const initialRgb = hexToRgb(color);
25
- const defaultHsv = {
26
- h: 0,
27
- s: 0,
28
- v: 1
29
- };
30
- const initialHsv = initialRgb ? rgbToHsv(initialRgb) || defaultHsv : defaultHsv;
31
- const [hsv, setHsv] = useState(initialHsv);
32
- const [innerColor, setInnerColor] = useState(color);
33
- const [redInput, setRedInput] = useState(initialRgb?.r || 255);
34
- const [greenInput, setGreenInput] = useState(initialRgb?.g || 255);
35
- const [blueInput, setBlueInput] = useState(initialRgb?.b || 255);
36
- const [hexInputColor, setHexInputColor] = useState(color);
37
- const [inputType, setInputType] = useState('RGB');
38
- const [selectOpen, setSelectOpen] = useState(false);
39
- const [innerAlpha, setInnerAlpha] = useState(alpha);
40
- const [changeColor, setChangeColor] = useState(true);
41
- const redId = useId();
42
- const greenId = useId();
43
- const blueId = useId();
44
- const hexId = useId();
45
- const alphaId = useId();
46
- const gradientKnobRef = useRef(null);
47
- const hueKnobRef = useRef(null);
48
- const alphaKnobRef = useRef(null);
49
- function limitAlpha() {
50
- if (innerAlpha > 100) return 100;
51
- if (innerAlpha < 0) return 0;
52
- return innerAlpha;
53
- }
54
- const hueKnobOffset = hsv.h * baseSize - 14 - baseSize;
55
- const saturationKnobOffset = hsv.s * baseSize;
56
- const valueKnobOffset = (1 - hsv.v) * baseSize;
57
- const alphaKnobOffset = (100 - limitAlpha()) / 100 * baseSize;
58
- function getSaturationGradient() {
59
- return `linear-gradient(to right, white, hsl(${360 * hsv.h}, 100%, 50%) )`;
60
- }
61
- const updateInputs = useCallback((hexColor)=>{
62
- setHexInputColor(hexColor);
63
- const rgb = hexToRgb(hexColor);
64
- if (rgb) {
65
- setRedInput(rgb.r);
66
- setGreenInput(rgb.g);
67
- setBlueInput(rgb.b);
68
- }
69
- }, []);
70
- useEffect(()=>{
71
- if (onChange) onChange(innerColor);
72
- }, [
73
- onChange,
74
- innerColor
75
- ]);
76
- useEffect(()=>{
77
- if (onAlphaChange && innerAlpha) onAlphaChange(innerAlpha);
78
- }, [
79
- onAlphaChange,
80
- innerAlpha
81
- ]);
82
- const updateColorHsv = useCallback((_hsv, _changeColor)=>{
83
- const rgb = hsvToRgb(_hsv);
84
- const hex = rgbToHex(rgb);
85
- if (_changeColor) setInnerColor(hex);
86
- updateInputs(hex);
87
- }, [
88
- updateInputs
89
- ]);
90
- useEffect(()=>{
91
- updateColorHsv(hsv, changeColor);
92
- }, [
93
- updateColorHsv,
94
- hsv,
95
- changeColor
96
- ]);
97
- function updateGradient(x, y) {
98
- setChangeColor(true);
99
- setHsv((prevHsv)=>({
100
- ...prevHsv,
101
- s: Math.floor(x) / baseSize,
102
- v: (baseSize - y) / baseSize
103
- }));
104
- }
105
- function onGradientDrag(e, data) {
106
- e.preventDefault();
107
- updateGradient(data.x, data.y);
108
- }
109
- function updateHue(y) {
110
- const newHue = y / baseSize;
111
- setChangeColor(true);
112
- setHsv((prevHsv)=>({
113
- ...prevHsv,
114
- h: newHue
115
- }));
116
- }
117
- function onHueDrag(e, data) {
118
- e.preventDefault();
119
- updateHue(data.y + 14 + baseSize);
120
- }
121
- function updateAlpha(y) {
122
- setInnerAlpha(100 - Math.round(y / baseSize * 100));
123
- }
124
- function onAlphaDrag(e, data) {
125
- e.preventDefault();
126
- updateAlpha(data.y);
127
- }
128
- const updateColorRgb = (newColor)=>{
129
- const currentColor = newColor || '#FFFFFF';
130
- updateInputs(currentColor);
131
- const rgb = hexToRgb(currentColor);
132
- setChangeColor(false);
133
- if (rgb) {
134
- const newHsv = rgbToHsv(rgb);
135
- if (newHsv) setHsv(newHsv);
136
- }
137
- setInnerColor(newColor);
138
- };
139
- const isHexColor = (_color)=>/^#[0-9A-F]{6}$/i.test(_color);
140
- function onHexInput(event) {
141
- const newHexInputColor = event.target.value;
142
- setHexInputColor(newHexInputColor.toUpperCase());
143
- if (isHexColor(newHexInputColor)) updateColorRgb(newHexInputColor.toUpperCase());
144
- }
145
- function onHexBlur() {
146
- if (!isHexColor(hexInputColor) && innerColor) {
147
- setHexInputColor(innerColor);
148
- updateColorRgb(innerColor);
149
- }
150
- }
151
- function onRgbBlur(channel) {
152
- let currentInput = '';
153
- switch(channel){
154
- case 'r':
155
- currentInput = redInput;
156
- break;
157
- case 'g':
158
- currentInput = greenInput;
159
- break;
160
- case 'b':
161
- currentInput = blueInput;
162
- break;
163
- default:
164
- }
165
- if ('number' != typeof currentInput || 'number' == typeof currentInput && currentInput > 255 && currentInput < 0) {
166
- const rgb = hexToRgb(innerColor || '#FFFFFF');
167
- if (rgb) {
168
- const newHexColor = rgbToHex(rgb);
169
- updateInputs(newHexColor);
170
- }
171
- }
172
- }
173
- function onRgbInput(_value, channel) {
174
- const numberValue = Number.parseInt(_value, 10);
175
- switch(channel){
176
- case 'r':
177
- setRedInput(_value);
178
- break;
179
- case 'g':
180
- setGreenInput(_value);
181
- break;
182
- case 'b':
183
- setBlueInput(_value);
184
- break;
185
- default:
186
- }
187
- if (numberValue <= 255 && numberValue >= 0) {
188
- const rgb = hexToRgb(innerColor || '#FFFFFF');
189
- if (rgb) {
190
- rgb[channel] = numberValue;
191
- const newHexColor = rgbToHex(rgb);
192
- setInnerColor(newHexColor);
193
- updateColorRgb(newHexColor);
194
- }
195
- }
196
- }
197
- function onAlphaInput(_alpha) {
198
- const numberValue = Number.parseInt(_alpha, 10);
199
- setInnerAlpha(numberValue);
200
- }
201
- function onAlphaBlur() {
202
- setInnerAlpha(limitAlpha());
203
- }
204
- const onChangeType = (type)=>{
205
- setInputType(type);
206
- setSelectOpen(false);
207
- };
208
- function onRemoveColor() {
209
- if (useAlpha) setInnerAlpha(0);
210
- else updateColorRgb();
211
- }
212
- return /*#__PURE__*/ jsxs("div", {
213
- className: classnames('fwe-color-picker', {
214
- 'fwe-alpha-active': useAlpha
215
- }, className),
216
- children: [
217
- !paletteOnly && /*#__PURE__*/ jsxs("div", {
218
- className: "fwe-d-flex",
219
- children: [
220
- /*#__PURE__*/ jsxs("div", {
221
- className: "fwe-gradient-picker",
222
- children: [
223
- /*#__PURE__*/ jsx("div", {
224
- className: "fwe-saturation-gradient",
225
- style: {
226
- backgroundImage: getSaturationGradient()
227
- }
228
- }),
229
- /*#__PURE__*/ jsx("div", {
230
- "aria-label": "Color saturation and brightness picker",
231
- role: "slider",
232
- tabIndex: 0,
233
- "aria-valuemin": 0,
234
- "aria-valuemax": 100,
235
- "aria-valuenow": Math.round(100 * hsv.s),
236
- "aria-valuetext": `Saturation ${Math.round(100 * hsv.s)}%, Brightness ${Math.round(100 * hsv.v)}%`,
237
- onClick: ({ nativeEvent: { offsetX, offsetY } })=>updateGradient(offsetX, offsetY),
238
- onKeyDown: (e)=>{
239
- const step = 0.01;
240
- let newS = hsv.s;
241
- let newV = hsv.v;
242
- switch(e.key){
243
- case 'ArrowRight':
244
- newS = Math.min(1, hsv.s + step);
245
- break;
246
- case 'ArrowLeft':
247
- newS = Math.max(0, hsv.s - step);
248
- break;
249
- case 'ArrowUp':
250
- newV = Math.min(1, hsv.v + step);
251
- break;
252
- case 'ArrowDown':
253
- newV = Math.max(0, hsv.v - step);
254
- break;
255
- default:
256
- return;
257
- }
258
- e.preventDefault();
259
- setHsv((prev)=>({
260
- ...prev,
261
- s: newS,
262
- v: newV
263
- }));
264
- },
265
- className: "fwe-brightness-gradient"
266
- }),
267
- /*#__PURE__*/ jsx(react_draggable, {
268
- position: {
269
- x: saturationKnobOffset,
270
- y: valueKnobOffset
271
- },
272
- onDrag: (e, data)=>onGradientDrag(e, data),
273
- bounds: "parent",
274
- nodeRef: gradientKnobRef,
275
- children: /*#__PURE__*/ jsx("div", {
276
- className: "fwe-knob",
277
- ref: gradientKnobRef
278
- })
279
- })
280
- ]
281
- }),
282
- /*#__PURE__*/ jsxs("div", {
283
- className: "fwe-hue-picker",
284
- children: [
285
- /*#__PURE__*/ jsx("div", {
286
- "aria-label": "Hue selector",
287
- role: "slider",
288
- tabIndex: 0,
289
- "aria-valuemin": 0,
290
- "aria-valuemax": 360,
291
- "aria-valuenow": Math.round(360 * hsv.h),
292
- "aria-valuetext": `Hue ${Math.round(360 * hsv.h)} degrees`,
293
- className: "fwe-picker-background",
294
- onClick: ({ nativeEvent: { offsetY } })=>updateHue(offsetY),
295
- onKeyDown: (e)=>{
296
- const step = 0.01;
297
- let newH = hsv.h;
298
- switch(e.key){
299
- case 'ArrowUp':
300
- newH = Math.max(0, hsv.h - step);
301
- break;
302
- case 'ArrowDown':
303
- newH = Math.min(1, hsv.h + step);
304
- break;
305
- default:
306
- return;
307
- }
308
- e.preventDefault();
309
- setHsv((prev)=>({
310
- ...prev,
311
- h: newH
312
- }));
313
- }
314
- }),
315
- /*#__PURE__*/ jsx(react_draggable, {
316
- position: {
317
- x: 3,
318
- y: hueKnobOffset
319
- },
320
- onDrag: (e, data)=>onHueDrag(e, data),
321
- bounds: "parent",
322
- nodeRef: hueKnobRef,
323
- children: /*#__PURE__*/ jsx("div", {
324
- className: "fwe-knob",
325
- style: {
326
- background: `hsl(${360 * hsv.h}, 100%, 50%)`
327
- },
328
- ref: hueKnobRef
329
- })
330
- })
331
- ]
332
- }),
333
- useAlpha && /*#__PURE__*/ jsxs("div", {
334
- className: "fwe-alpha-picker",
335
- children: [
336
- /*#__PURE__*/ jsxs("svg", {
337
- "aria-hidden": "true",
338
- className: "fwe-no-color-pattern",
339
- version: "1.1",
340
- xmlns: "http://www.w3.org/2000/svg",
341
- xmlnsXlink: "http://www.w3.org/1999/xlink",
342
- id: "canvas1",
343
- width: "8",
344
- height: "184",
345
- children: [
346
- /*#__PURE__*/ jsx("defs", {
347
- children: /*#__PURE__*/ jsxs("pattern", {
348
- id: "bwsquare2px",
349
- width: "4",
350
- height: "4",
351
- patternUnits: "userSpaceOnUse",
352
- children: [
353
- /*#__PURE__*/ jsx("rect", {
354
- x: "0",
355
- y: "0",
356
- width: "2",
357
- height: "2",
358
- stroke: "none",
359
- fill: "#ffffff"
360
- }),
361
- /*#__PURE__*/ jsx("rect", {
362
- x: "2",
363
- y: "0",
364
- width: "2",
365
- height: "2",
366
- stroke: "none",
367
- fill: "#e2e5e8"
368
- }),
369
- /*#__PURE__*/ jsx("rect", {
370
- x: "0",
371
- y: "2",
372
- width: "2",
373
- height: "2",
374
- stroke: "none",
375
- fill: "#e2e5e8"
376
- }),
377
- /*#__PURE__*/ jsx("rect", {
378
- x: "2",
379
- y: "2",
380
- width: "2",
381
- height: "2",
382
- stroke: "none",
383
- fill: "#ffffff"
384
- })
385
- ]
386
- })
387
- }),
388
- /*#__PURE__*/ jsx("rect", {
389
- x: "0",
390
- y: "0",
391
- rx: "4",
392
- ry: "4",
393
- width: "8",
394
- height: "184",
395
- fill: "url(#bwsquare2px)",
396
- strokeWidth: "0"
397
- })
398
- ]
399
- }),
400
- /*#__PURE__*/ jsx("div", {
401
- "aria-label": "Alpha channel slider",
402
- role: "slider",
403
- tabIndex: 0,
404
- "aria-valuemin": 0,
405
- "aria-valuemax": 100,
406
- "aria-valuenow": innerAlpha,
407
- "aria-valuetext": `Alpha ${innerAlpha}%`,
408
- onClick: ({ nativeEvent: { offsetY } })=>updateAlpha(offsetY),
409
- onKeyDown: (e)=>{
410
- const step = 1;
411
- let newAlpha = innerAlpha;
412
- switch(e.key){
413
- case 'ArrowUp':
414
- newAlpha = Math.min(100, innerAlpha + step);
415
- break;
416
- case 'ArrowDown':
417
- newAlpha = Math.max(0, innerAlpha - step);
418
- break;
419
- default:
420
- return;
421
- }
422
- e.preventDefault();
423
- setInnerAlpha(newAlpha);
424
- },
425
- className: "fwe-picker-background",
426
- style: {
427
- backgroundImage: `linear-gradient( ${innerColor}, transparent)`
428
- }
429
- }),
430
- /*#__PURE__*/ jsx(react_draggable, {
431
- position: {
432
- x: 3,
433
- y: alphaKnobOffset
434
- },
435
- onDrag: (e, data)=>onAlphaDrag(e, data),
436
- bounds: "parent",
437
- nodeRef: alphaKnobRef,
438
- children: /*#__PURE__*/ jsx("div", {
439
- className: "fwe-knob",
440
- ref: alphaKnobRef
441
- })
442
- })
443
- ]
444
- })
445
- ]
446
- }),
447
- !paletteOnly && /*#__PURE__*/ jsxs("div", {
448
- className: "fwe-mt-s",
449
- children: [
450
- /*#__PURE__*/ jsxs("div", {
451
- className: "fwe-type-select",
452
- children: [
453
- /*#__PURE__*/ jsxs("button", {
454
- type: "button",
455
- className: "fwe-type-indicator",
456
- onClick: ()=>setSelectOpen((prevOpen)=>!prevOpen),
457
- children: [
458
- /*#__PURE__*/ jsx("span", {
459
- className: "fwe-input-type",
460
- children: inputType
461
- }),
462
- /*#__PURE__*/ jsx(IconCollapse, {
463
- className: "fwe-ml-s"
464
- })
465
- ]
466
- }),
467
- selectOpen && /*#__PURE__*/ jsxs("div", {
468
- className: "fwe-popover",
469
- children: [
470
- /*#__PURE__*/ jsxs("button", {
471
- type: "button",
472
- className: classnames('fwe-type-item', {
473
- 'fwe-selected': 'HEX' === inputType
474
- }),
475
- onClick: ()=>onChangeType('HEX'),
476
- children: [
477
- /*#__PURE__*/ jsx(IconCheckSmall, {}),
478
- " HEX"
479
- ]
480
- }),
481
- /*#__PURE__*/ jsxs("button", {
482
- type: "button",
483
- className: classnames('fwe-type-item', {
484
- 'fwe-selected': 'RGB' === inputType
485
- }),
486
- onClick: ()=>onChangeType('RGB'),
487
- children: [
488
- /*#__PURE__*/ jsx(IconCheckSmall, {}),
489
- " RGB"
490
- ]
491
- })
492
- ]
493
- })
494
- ]
495
- }),
496
- /*#__PURE__*/ jsxs("div", {
497
- className: "fwe-d-flex",
498
- children: [
499
- 'HEX' === inputType && /*#__PURE__*/ jsx("label", {
500
- "aria-label": "Hexadecimal Color",
501
- className: "fwe-input-text fwe-hex-input",
502
- htmlFor: hexId,
503
- children: /*#__PURE__*/ jsx("input", {
504
- type: "text",
505
- value: hexInputColor,
506
- onBlur: onHexBlur,
507
- onChange: onHexInput,
508
- id: hexId
509
- })
510
- }),
511
- 'RGB' === inputType && /*#__PURE__*/ jsxs(Fragment, {
512
- children: [
513
- /*#__PURE__*/ jsx("label", {
514
- "aria-label": "RGB Color Red",
515
- className: "fwe-input-text fwe-red-input",
516
- htmlFor: redId,
517
- children: /*#__PURE__*/ jsx("input", {
518
- type: "text",
519
- value: redInput,
520
- onBlur: ()=>onRgbBlur('r'),
521
- onChange: (e)=>onRgbInput(e.target.value, 'r'),
522
- id: redId
523
- })
524
- }),
525
- /*#__PURE__*/ jsx("label", {
526
- "aria-label": "RGB Color Green",
527
- className: "fwe-input-text fwe-green-input",
528
- htmlFor: greenId,
529
- children: /*#__PURE__*/ jsx("input", {
530
- type: "text",
531
- value: greenInput,
532
- onBlur: ()=>onRgbBlur('g'),
533
- onChange: (e)=>onRgbInput(e.target.value, 'g'),
534
- id: greenId
535
- })
536
- }),
537
- /*#__PURE__*/ jsx("label", {
538
- "aria-label": "RGB Color Blue",
539
- className: "fwe-input-text fwe-blue-input",
540
- htmlFor: blueId,
541
- children: /*#__PURE__*/ jsx("input", {
542
- type: "text",
543
- value: blueInput,
544
- onBlur: ()=>onRgbBlur('b'),
545
- onChange: (e)=>onRgbInput(e.target.value, 'b'),
546
- id: blueId
547
- })
548
- })
549
- ]
550
- }),
551
- useAlpha && /*#__PURE__*/ jsx("label", {
552
- "aria-label": "Alpha Channel",
553
- className: "fwe-input-text fwe-alpha-input fwe-ml-auto",
554
- htmlFor: alphaId,
555
- children: /*#__PURE__*/ jsxs("span", {
556
- children: [
557
- /*#__PURE__*/ jsx("input", {
558
- type: "number",
559
- min: "0",
560
- max: "100",
561
- value: innerAlpha,
562
- onBlur: ()=>onAlphaBlur(),
563
- onChange: (e)=>onAlphaInput(e.target.value),
564
- id: alphaId
565
- }),
566
- /*#__PURE__*/ jsx("span", {
567
- className: "fwe-percent-char",
568
- children: "%"
569
- })
570
- ]
571
- })
572
- })
573
- ]
574
- })
575
- ]
576
- }),
577
- /*#__PURE__*/ jsxs("div", {
578
- className: "fwe-mt-xs fwe-color-grid",
579
- children: [
580
- /*#__PURE__*/ jsxs("button", {
581
- type: "button",
582
- className: "fwe-remove-color-button",
583
- onClick: onRemoveColor,
584
- children: [
585
- /*#__PURE__*/ jsxs("svg", {
586
- "aria-hidden": "true",
587
- className: "fwe-no-color-pattern",
588
- version: "1.1",
589
- xmlns: "http://www.w3.org/2000/svg",
590
- xmlnsXlink: "http://www.w3.org/1999/xlink",
591
- id: "canvas1",
592
- width: "18",
593
- height: "18",
594
- children: [
595
- /*#__PURE__*/ jsx("defs", {
596
- children: /*#__PURE__*/ jsxs("pattern", {
597
- id: "bwsquare2px",
598
- width: "4",
599
- height: "4",
600
- patternUnits: "userSpaceOnUse",
601
- children: [
602
- /*#__PURE__*/ jsx("rect", {
603
- x: "0",
604
- y: "0",
605
- width: "2",
606
- height: "2",
607
- stroke: "none",
608
- fill: "#ffffff"
609
- }),
610
- /*#__PURE__*/ jsx("rect", {
611
- x: "2",
612
- y: "0",
613
- width: "2",
614
- height: "2",
615
- stroke: "none",
616
- fill: "#e2e5e8"
617
- }),
618
- /*#__PURE__*/ jsx("rect", {
619
- x: "0",
620
- y: "2",
621
- width: "2",
622
- height: "2",
623
- stroke: "none",
624
- fill: "#e2e5e8"
625
- }),
626
- /*#__PURE__*/ jsx("rect", {
627
- x: "2",
628
- y: "2",
629
- width: "2",
630
- height: "2",
631
- stroke: "none",
632
- fill: "#ffffff"
633
- })
634
- ]
635
- })
636
- }),
637
- /*#__PURE__*/ jsx("rect", {
638
- x: "0",
639
- y: "0",
640
- rx: "0",
641
- ry: "0",
642
- width: "18",
643
- height: "18",
644
- fill: "url(#bwsquare2px)",
645
- strokeWidth: "0"
646
- })
647
- ]
648
- }),
649
- /*#__PURE__*/ jsx(IconCheckSmall, {
650
- className: classnames({
651
- 'fwe-color-text': !innerColor
652
- })
653
- })
654
- ]
655
- }),
656
- palette.map((colorItem)=>{
657
- const itemClasses = classnames('fwe-color-item', {
658
- 'fwe-white-item': '#FFFFFF' === colorItem.toUpperCase()
659
- });
660
- return /*#__PURE__*/ jsx("button", {
661
- type: "button",
662
- className: itemClasses,
663
- style: {
664
- background: colorItem
665
- },
666
- onClick: ()=>updateColorRgb(colorItem.toUpperCase()),
667
- children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/ jsx(IconCheckSmall, {})
668
- }, colorItem);
669
- })
670
- ]
671
- })
672
- ]
673
- });
674
- }
675
- const color_picker_ColorPicker = ColorPicker;
676
- export { ColorPicker, color_picker_ColorPicker as default };