@progress/kendo-react-inputs 11.4.0-develop.5 → 11.4.0-develop.7
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.
- package/colors/ColorGradient.js +1 -1
- package/colors/ColorGradient.mjs +47 -47
- package/colors/ColorPicker.js +1 -1
- package/colors/ColorPicker.mjs +78 -78
- package/colors/FlatColorPicker.js +1 -1
- package/colors/FlatColorPicker.mjs +125 -125
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/index.d.mts +1 -0
- package/index.d.ts +1 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +11 -11
- package/range-slider/RangeSlider.js +11 -11
- package/range-slider/RangeSlider.mjs +96 -96
- package/signature/Signature.js +1 -1
- package/signature/Signature.mjs +79 -79
package/colors/ColorPicker.mjs
CHANGED
|
@@ -7,26 +7,26 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as t from "react";
|
|
9
9
|
import r from "prop-types";
|
|
10
|
-
import { createPropsContext as
|
|
11
|
-
import { packageMetadata as
|
|
12
|
-
import { Picker as
|
|
13
|
-
import { ColorGradient as
|
|
14
|
-
import { ColorPalette as
|
|
10
|
+
import { createPropsContext as Ue, validatePackage as Ke, getLicenseMessage as $e, usePropsContext as Ge, useAdaptiveModeContext as Me, canUseDOM as Ze, Navigation as je, getActiveElement as qe, keepFocusInContainer as z, focusFirstFocusableChild as de, WatermarkOverlay as Je, useDir as Qe, classNames as Z, kendoThemeMaps as pe, getTabIndex as Xe, IconWrap as Ye, svgIconPropType as et } from "@progress/kendo-react-common";
|
|
11
|
+
import { packageMetadata as fe } from "../package-metadata.mjs";
|
|
12
|
+
import { Picker as tt } from "./Picker.mjs";
|
|
13
|
+
import { ColorGradient as nt } from "./ColorGradient.mjs";
|
|
14
|
+
import { ColorPalette as at, DEFAULT_PRESET as rt, DEFAULT_TILE_SIZE as ot } from "./ColorPalette.mjs";
|
|
15
15
|
import { FlatColorPicker as B } from "./FlatColorPicker.mjs";
|
|
16
|
-
import { Button as
|
|
17
|
-
import { caretAltDownIcon as
|
|
18
|
-
import { colorPickerAdaptiveTitle as
|
|
19
|
-
import { useLocalization as
|
|
20
|
-
import { AdaptiveMode as
|
|
21
|
-
import { ActionSheetContent as
|
|
22
|
-
const
|
|
16
|
+
import { Button as lt } from "@progress/kendo-react-buttons";
|
|
17
|
+
import { caretAltDownIcon as it } from "@progress/kendo-svg-icons";
|
|
18
|
+
import { colorPickerAdaptiveTitle as me, messages as L, flatColorPickerCancelBtn as ge, flatColorPickerApplyBtn as ve, colorPickerDropdownButtonAriaLabel as ke } from "../messages/index.mjs";
|
|
19
|
+
import { useLocalization as ct } from "@progress/kendo-react-intl";
|
|
20
|
+
import { AdaptiveMode as st } from "../common/AdaptiveMode.mjs";
|
|
21
|
+
import { ActionSheetContent as ut } from "@progress/kendo-react-layout";
|
|
22
|
+
const dt = {
|
|
23
23
|
opacity: !0
|
|
24
|
-
},
|
|
25
|
-
palette:
|
|
26
|
-
tileSize:
|
|
27
|
-
}, j = (
|
|
24
|
+
}, pt = {
|
|
25
|
+
palette: rt,
|
|
26
|
+
tileSize: ot
|
|
27
|
+
}, j = (D) => D !== void 0, ft = Ue(), Ce = t.forwardRef((D, Ee) => {
|
|
28
28
|
var oe, le;
|
|
29
|
-
const
|
|
29
|
+
const be = !Ke(fe, { component: "ColorPicker" }), we = $e(fe), o = Ge(ft, D), b = ct(), q = Me(), {
|
|
30
30
|
size: u = k.size,
|
|
31
31
|
rounded: x = k.rounded,
|
|
32
32
|
fillMode: _ = k.fillMode,
|
|
@@ -36,10 +36,10 @@ const st = {
|
|
|
36
36
|
view: d = o.views ? void 0 : k.view,
|
|
37
37
|
views: c = d ? void 0 : k.views,
|
|
38
38
|
activeView: J,
|
|
39
|
-
popupSettings:
|
|
40
|
-
valid:
|
|
39
|
+
popupSettings: g,
|
|
40
|
+
valid: ye,
|
|
41
41
|
disabled: N,
|
|
42
|
-
tabIndex:
|
|
42
|
+
tabIndex: Se,
|
|
43
43
|
icon: O,
|
|
44
44
|
svgIcon: F,
|
|
45
45
|
iconClassName: P,
|
|
@@ -47,36 +47,36 @@ const st = {
|
|
|
47
47
|
onFocus: H,
|
|
48
48
|
onBlur: W,
|
|
49
49
|
onActiveColorClick: U,
|
|
50
|
-
className:
|
|
51
|
-
adaptive:
|
|
52
|
-
adaptiveTitle: Q = b.toLanguageString(
|
|
53
|
-
} = o, s = t.useRef(null), S = t.useRef(null), T = t.useRef(null), m = t.useRef(null), E = t.useRef(void 0),
|
|
50
|
+
className: he,
|
|
51
|
+
adaptive: _e,
|
|
52
|
+
adaptiveTitle: Q = b.toLanguageString(me, L[me])
|
|
53
|
+
} = o, s = t.useRef(null), S = t.useRef(null), T = t.useRef(null), m = t.useRef(null), E = t.useRef(void 0), Pe = t.useRef(null), [Te, X] = t.useState(!1), [Re, Ae] = t.useState(o.defaultValue || void 0), [Ie, ze] = t.useState(!1), [R, Be] = t.useState(), K = j(o.value), v = j(o.open), l = K ? o.value : Re, p = v ? o.open : Ie, Y = t.useRef(l), ee = t.useCallback(() => {
|
|
54
54
|
s.current && s.current.focus();
|
|
55
55
|
}, []);
|
|
56
56
|
t.useImperativeHandle(
|
|
57
|
-
|
|
57
|
+
Ee,
|
|
58
58
|
() => ({
|
|
59
59
|
// we agreed that each element will have focus method exposed
|
|
60
60
|
element: s.current,
|
|
61
|
-
actionElement:
|
|
61
|
+
actionElement: Pe.current,
|
|
62
62
|
value: l,
|
|
63
63
|
focus: ee
|
|
64
64
|
}),
|
|
65
65
|
[l, ee]
|
|
66
66
|
);
|
|
67
|
-
const $ = !!(R && q && R <= q.medium &&
|
|
67
|
+
const $ = !!(R && q && R <= q.medium && _e);
|
|
68
68
|
t.useEffect(() => {
|
|
69
|
-
const e =
|
|
69
|
+
const e = Ze && window.ResizeObserver && new window.ResizeObserver(He.bind(void 0));
|
|
70
70
|
return document != null && document.body && e && e.observe(document.body), () => {
|
|
71
71
|
document != null && document.body && e && e.disconnect();
|
|
72
72
|
};
|
|
73
73
|
}, []);
|
|
74
74
|
const a = t.useCallback(
|
|
75
75
|
(e, i) => {
|
|
76
|
-
|
|
76
|
+
v || (!e && !i && s && s.current && s.current.focus(), ze(e));
|
|
77
77
|
},
|
|
78
|
-
[
|
|
79
|
-
), te = t.useMemo(() => new
|
|
78
|
+
[v]
|
|
79
|
+
), te = t.useMemo(() => new je({
|
|
80
80
|
root: s,
|
|
81
81
|
selectors: [".k-colorpicker", ".k-color-picker-popup"],
|
|
82
82
|
tabIndex: 0,
|
|
@@ -86,7 +86,7 @@ const st = {
|
|
|
86
86
|
a(!1);
|
|
87
87
|
},
|
|
88
88
|
Enter: (e, i, n) => {
|
|
89
|
-
!
|
|
89
|
+
!v && e === s.current && (n.preventDefault(), n.stopPropagation(), a(!0));
|
|
90
90
|
},
|
|
91
91
|
ArrowDown: (e, i, n) => {
|
|
92
92
|
n.altKey && (n.preventDefault(), n.stopPropagation(), a(!0));
|
|
@@ -96,16 +96,16 @@ const st = {
|
|
|
96
96
|
},
|
|
97
97
|
Tab: (e, i, n) => {
|
|
98
98
|
var h, ie, ce;
|
|
99
|
-
if (
|
|
99
|
+
if (qe(document) !== s.current) {
|
|
100
100
|
const se = (h = T.current) == null ? void 0 : h.wrapperRef.current, I = (ie = S.current) == null ? void 0 : ie.wrapperRef.current, ue = (ce = m.current) == null ? void 0 : ce.element;
|
|
101
101
|
d === "palette" && se ? z(n, se) : d === "gradient" && I ? z(n, I) : d === "combo" && I ? z(n, I.parentElement) : c && ue && z(n, ue);
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
|
-
}), [a,
|
|
107
|
-
|
|
108
|
-
}, [
|
|
106
|
+
}), [a, v]), Le = t.useCallback(te.triggerKeyboardEvent.bind(te), []), De = t.useCallback(() => {
|
|
107
|
+
v || (S.current && S.current.wrapperRef.current ? de(S.current.wrapperRef.current) : T.current ? T.current.focus() : m.current && m.current.element && de(m.current.element));
|
|
108
|
+
}, [v]), A = (e) => Y.current = e, ne = t.useCallback(
|
|
109
109
|
(e) => {
|
|
110
110
|
const i = {
|
|
111
111
|
value: Y.current,
|
|
@@ -117,7 +117,7 @@ const st = {
|
|
|
117
117
|
[p]
|
|
118
118
|
), G = t.useCallback(() => {
|
|
119
119
|
a(!1, !0);
|
|
120
|
-
}, [a]),
|
|
120
|
+
}, [a]), xe = t.useCallback(
|
|
121
121
|
(e) => {
|
|
122
122
|
U && U.call(void 0, {
|
|
123
123
|
syntheticEvent: e,
|
|
@@ -130,7 +130,7 @@ const st = {
|
|
|
130
130
|
});
|
|
131
131
|
},
|
|
132
132
|
[U, l]
|
|
133
|
-
),
|
|
133
|
+
), Ne = t.useCallback(
|
|
134
134
|
(e) => {
|
|
135
135
|
E.current ? (clearTimeout(E.current), E.current = void 0) : (X(!0), $ && !p && a(!0)), H && H.call(void 0, {
|
|
136
136
|
nativeEvent: e.nativeEvent,
|
|
@@ -138,11 +138,11 @@ const st = {
|
|
|
138
138
|
});
|
|
139
139
|
},
|
|
140
140
|
[$, H, p, a]
|
|
141
|
-
),
|
|
141
|
+
), Oe = t.useCallback(() => {
|
|
142
142
|
a(!1, !0), X(!1), E.current = void 0;
|
|
143
|
-
}, []),
|
|
143
|
+
}, []), Fe = t.useCallback(
|
|
144
144
|
(e) => {
|
|
145
|
-
clearTimeout(E.current), E.current = window.setTimeout(
|
|
145
|
+
clearTimeout(E.current), E.current = window.setTimeout(Oe), W && W.call(void 0, {
|
|
146
146
|
nativeEvent: e.nativeEvent,
|
|
147
147
|
syntheticEvent: e
|
|
148
148
|
});
|
|
@@ -152,7 +152,7 @@ const st = {
|
|
|
152
152
|
(e, i) => {
|
|
153
153
|
var h;
|
|
154
154
|
const n = i ? e.rgbaValue || "" : (h = e.value) != null ? h : "";
|
|
155
|
-
K ||
|
|
155
|
+
K || Ae(n), V && V.call(void 0, {
|
|
156
156
|
value: n,
|
|
157
157
|
nativeEvent: e.nativeEvent,
|
|
158
158
|
syntheticEvent: e.syntheticEvent,
|
|
@@ -168,7 +168,7 @@ const st = {
|
|
|
168
168
|
[j, f]
|
|
169
169
|
), M = t.useCallback(
|
|
170
170
|
(e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
|
|
171
|
-
|
|
171
|
+
nt,
|
|
172
172
|
{
|
|
173
173
|
...C,
|
|
174
174
|
_adaptive: e,
|
|
@@ -180,7 +180,7 @@ const st = {
|
|
|
180
180
|
onChange: f
|
|
181
181
|
}
|
|
182
182
|
), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
|
|
183
|
-
|
|
183
|
+
at,
|
|
184
184
|
{
|
|
185
185
|
...w,
|
|
186
186
|
ref: T,
|
|
@@ -248,7 +248,7 @@ const st = {
|
|
|
248
248
|
onChange: f,
|
|
249
249
|
setAdaptiveModeValue: A
|
|
250
250
|
}
|
|
251
|
-
),
|
|
251
|
+
), be && /* @__PURE__ */ t.createElement(Je, { message: we })),
|
|
252
252
|
[
|
|
253
253
|
J,
|
|
254
254
|
_,
|
|
@@ -263,24 +263,24 @@ const st = {
|
|
|
263
263
|
d,
|
|
264
264
|
c
|
|
265
265
|
]
|
|
266
|
-
),
|
|
266
|
+
), Ve = t.useCallback(() => {
|
|
267
267
|
var i;
|
|
268
268
|
const e = {
|
|
269
|
-
animation: !!((i =
|
|
269
|
+
animation: !!((i = g == null ? void 0 : g.animate) == null || i),
|
|
270
270
|
title: Q,
|
|
271
271
|
expand: p,
|
|
272
272
|
onClose: G,
|
|
273
273
|
windowWidth: R,
|
|
274
274
|
footer: {
|
|
275
|
-
cancelText: b.toLanguageString(
|
|
275
|
+
cancelText: b.toLanguageString(ge, L[ge]),
|
|
276
276
|
onCancel: G,
|
|
277
|
-
applyText: b.toLanguageString(ve,
|
|
277
|
+
applyText: b.toLanguageString(ve, L[ve]),
|
|
278
278
|
onApply: ne
|
|
279
279
|
}
|
|
280
280
|
};
|
|
281
|
-
return /* @__PURE__ */ t.createElement(
|
|
281
|
+
return /* @__PURE__ */ t.createElement(st, { ...e }, /* @__PURE__ */ t.createElement(ut, null, M(!0)));
|
|
282
282
|
}, [
|
|
283
|
-
|
|
283
|
+
g == null ? void 0 : g.animate,
|
|
284
284
|
Q,
|
|
285
285
|
p,
|
|
286
286
|
G,
|
|
@@ -288,10 +288,10 @@ const st = {
|
|
|
288
288
|
b,
|
|
289
289
|
ne,
|
|
290
290
|
M
|
|
291
|
-
]),
|
|
291
|
+
]), He = t.useCallback((e) => {
|
|
292
292
|
for (const i of e)
|
|
293
|
-
|
|
294
|
-
}, []), re =
|
|
293
|
+
Be(i.target.clientWidth);
|
|
294
|
+
}, []), re = Qe(s, o.dir), We = ye !== !1;
|
|
295
295
|
return /* @__PURE__ */ t.createElement(
|
|
296
296
|
"span",
|
|
297
297
|
{
|
|
@@ -308,28 +308,28 @@ const st = {
|
|
|
308
308
|
[`k-picker-${pe.sizeMap[u] || u}`]: u,
|
|
309
309
|
[`k-picker-${_}`]: _,
|
|
310
310
|
[`k-rounded-${pe.roundedMap[x] || x}`]: x,
|
|
311
|
-
"k-invalid": !
|
|
311
|
+
"k-invalid": !We,
|
|
312
312
|
"k-disabled": N,
|
|
313
|
-
"k-focus":
|
|
314
|
-
className:
|
|
313
|
+
"k-focus": Te,
|
|
314
|
+
className: he
|
|
315
315
|
}),
|
|
316
316
|
ref: s,
|
|
317
|
-
tabIndex:
|
|
317
|
+
tabIndex: Xe(Se, N),
|
|
318
318
|
title: o.title,
|
|
319
|
-
onKeyDown:
|
|
320
|
-
onFocus:
|
|
321
|
-
onBlur:
|
|
319
|
+
onKeyDown: Le,
|
|
320
|
+
onFocus: Ne,
|
|
321
|
+
onBlur: Fe,
|
|
322
322
|
dir: re
|
|
323
323
|
},
|
|
324
324
|
/* @__PURE__ */ t.createElement(
|
|
325
|
-
|
|
325
|
+
tt,
|
|
326
326
|
{
|
|
327
327
|
dir: re,
|
|
328
328
|
open: p,
|
|
329
|
-
onOpen:
|
|
329
|
+
onOpen: De,
|
|
330
330
|
popupAnchor: s.current || void 0,
|
|
331
|
-
popupSettings: { id: `k-colorpicker-popup-${(le = o.id) != null ? le : 0}`, ...
|
|
332
|
-
input: /* @__PURE__ */ t.createElement("span", { onClick:
|
|
331
|
+
popupSettings: { id: `k-colorpicker-popup-${(le = o.id) != null ? le : 0}`, ...g },
|
|
332
|
+
input: /* @__PURE__ */ t.createElement("span", { onClick: xe, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
|
|
333
333
|
"span",
|
|
334
334
|
{
|
|
335
335
|
className: Z("k-value-icon", "k-color-preview", {
|
|
@@ -338,11 +338,11 @@ const st = {
|
|
|
338
338
|
})
|
|
339
339
|
},
|
|
340
340
|
P && /* @__PURE__ */ t.createElement("span", { className: Z("k-color-preview-icon", P) }),
|
|
341
|
-
!P && (O || F) && /* @__PURE__ */ t.createElement(
|
|
341
|
+
!P && (O || F) && /* @__PURE__ */ t.createElement(Ye, { name: O, icon: F }),
|
|
342
342
|
/* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
|
|
343
343
|
)),
|
|
344
344
|
button: /* @__PURE__ */ t.createElement(
|
|
345
|
-
|
|
345
|
+
lt,
|
|
346
346
|
{
|
|
347
347
|
tabIndex: -1,
|
|
348
348
|
type: "button",
|
|
@@ -350,21 +350,21 @@ const st = {
|
|
|
350
350
|
className: "k-input-button",
|
|
351
351
|
rounded: null,
|
|
352
352
|
icon: "caret-alt-down",
|
|
353
|
-
svgIcon:
|
|
353
|
+
svgIcon: it,
|
|
354
354
|
"aria-label": b.toLanguageString(
|
|
355
|
-
|
|
356
|
-
|
|
355
|
+
ke,
|
|
356
|
+
L[ke]
|
|
357
357
|
)
|
|
358
358
|
}
|
|
359
359
|
),
|
|
360
360
|
content: M(!1),
|
|
361
361
|
_mobileMode: $,
|
|
362
|
-
_actionSheet:
|
|
362
|
+
_actionSheet: Ve()
|
|
363
363
|
}
|
|
364
364
|
)
|
|
365
365
|
);
|
|
366
366
|
});
|
|
367
|
-
|
|
367
|
+
Ce.propTypes = {
|
|
368
368
|
value: r.string,
|
|
369
369
|
defaultValue: r.string,
|
|
370
370
|
disabled: r.bool,
|
|
@@ -373,7 +373,7 @@ ke.propTypes = {
|
|
|
373
373
|
dir: r.string,
|
|
374
374
|
id: r.string,
|
|
375
375
|
icon: r.string,
|
|
376
|
-
svgIcon:
|
|
376
|
+
svgIcon: et,
|
|
377
377
|
ariaLabelledBy: r.string,
|
|
378
378
|
ariaDescribedBy: r.string,
|
|
379
379
|
size: r.oneOf([null, "small", "medium", "large"]),
|
|
@@ -390,11 +390,11 @@ const k = {
|
|
|
390
390
|
fillMode: "solid",
|
|
391
391
|
view: "palette",
|
|
392
392
|
views: ["gradient", "palette"],
|
|
393
|
-
gradientSettings:
|
|
394
|
-
paletteSettings:
|
|
393
|
+
gradientSettings: dt,
|
|
394
|
+
paletteSettings: pt
|
|
395
395
|
};
|
|
396
|
-
|
|
396
|
+
Ce.displayName = "KendoColorPicker";
|
|
397
397
|
export {
|
|
398
|
-
|
|
399
|
-
|
|
398
|
+
Ce as ColorPicker,
|
|
399
|
+
ft as ColorPickerPropsContext
|
|
400
400
|
};
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),X=require("./ColorPalette.js"),Y=require("./ColorGradient.js"),x=require("../package-metadata.js"),Z=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function p(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const f in e)if(f!=="default"){const B=Object.getOwnPropertyDescriptor(e,f);Object.defineProperty(b,f,B.get?B:{enumerable:!0,get:()=>e[f]})}}return b.default=e,Object.freeze(b)}const t=p(U),L=t.forwardRef((e,b)=>{const f=!n.validatePackage(x.packageMetadata,{component:"FlatColorPicker"}),B=n.getLicenseMessage(x.packageMetadata),h=t.useRef(null),w=t.useRef(null),F=t.useRef(null),{defaultValue:E,showButtons:N=!0,showPreview:z=!0,showClearButton:T=!0,view:P=e.views?void 0:"ColorGradient",views:d=P?void 0:["gradient","palette"],activeView:S="gradient",size:i="medium"}=e,[v,j]=t.useState((P||"ColorGradient")==="ColorGradient"),[g,V]=t.useState((d!=null?d:[])[0]==="gradient"&&S==="gradient"),[c,y]=t.useState(e.value||E||void 0),[C,M]=t.useState(e.value||E||void 0),_=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const k=Z.useLocalization(),R=t.useCallback(()=>{h.current&&h.current.focus()},[h]);t.useImperativeHandle(h,()=>({element:w.current,focus:R,props:e,value:_}),[_,R,e]),t.useImperativeHandle(b,()=>h.current);const q=t.useCallback(a=>{(a==="ColorGradient"&&!v||a==="ColorPalette"&&v)&&j(!v)},[v]),I=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&S==="gradient"?V(!g):a==="gradient"&&S==="palette"&&V(!0)},[S,g]),D=t.useCallback(a=>{var u;const r=E||void 0;if(y(r),M(r),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(r),e.onPreviewChange){const G={value:r,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,G)}},[E,e.onPreviewChange]),O=t.useCallback(a=>{var r;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(r=e._gradientSettings)!=null&&r._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),K=t.useCallback(a=>{if(c!==void 0&&M(c),e.onChange){const r={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,r)}},[c,e.onChange]),H=t.useCallback(()=>{y(C),e.setOpen&&e.setOpen(!1)},[C]),W=t.useCallback(a=>{if(y(C),e.onPreviewChange){const r={value:C,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,r)}},[C,e.onPreviewChange]),$=t.useCallback(a=>{var u,G;if((!a.relatedTarget||!((u=w.current)!=null&&u.contains(a.relatedTarget)))&&!((G=e._gradientSettings)!=null&&G._adaptive)&&(!N&&c!==void 0&&M(c),!N&&e.onChange)){const Q={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,Q)}},[c,N,e.onChange]),A=t.useMemo(()=>new n.Navigation({root:w,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,r,u)=>{n.getActiveElement(document)===a?n.disableNavigatableContainer(a):n.keepFocusInContainer(u,a)},Enter:(a,r,u)=>{n.getActiveElement(document)===a&&(n.focusFirstFocusableChild(a),n.enableNavigatableContainer(a))},Escape:(a,r,u)=>{n.getActiveElement(document)!==a&&(a.focus(),n.disableNavigatableContainer(a))}}}}),[]),J=t.useCallback(A.triggerKeyboardEvent.bind(A),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:{position:"relative",...e.style},ref:w,tabIndex:n.getTabIndex(e.tabIndex,e.disabled),className:n.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:$,onKeyDown:J},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,selected:g,onClick:()=>I("gradient")}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.paletteIcon,selected:!g,onClick:()=>I("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.paletteIcon,selected:!g,onClick:()=>I("palette")}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,selected:g,onClick:()=>I("gradient")})),P&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,selected:v,onClick:()=>q("ColorGradient"),icon:"droplet-slider",svgIcon:m.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,selected:!v,onClick:()=>q("ColorPalette"),icon:"palette",svgIcon:m.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},T&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:D,"aria-label":k.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:m.dropletSlashIcon}),z&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:n.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":_===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:n.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":C===void 0}),onClick:W},t.createElement("span",{className:"k-color-preview-mask",style:{background:C||void 0}})))),f&&t.createElement(n.WatermarkOverlay,{message:B})),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(P&&v||d&&g)&&t.createElement(Y.ColorGradient,{ref:F,role:"none",ariaLabel:void 0,value:c,onChange:O,opacity:e.opacity,format:e.format,size:i,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(P&&!v||d&&!g)&&t.createElement(X.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:O,size:i,...e._paletteSettings})),N&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-start k-actions-horizontal"},t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",size:i,onClick:K},l.messages[l.flatColorPickerApplyBtn]),t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",size:i,onClick:H},l.messages[l.flatColorPickerCancelBtn])))}),ee={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf([null,"small","medium","large"])};L.displayName="KendoFlatColorPicker";L.propTypes=ee;exports.FlatColorPicker=L;
|