@progress/kendo-react-inputs 14.5.0-develop.4 → 14.5.0-develop.6
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/ColorPicker.js +1 -1
- package/colors/ColorPicker.mjs +225 -220
- package/colors/FlatColorPicker.js +1 -1
- package/colors/FlatColorPicker.mjs +88 -88
- package/colors/interfaces/ColorPickerProps.d.ts +6 -0
- package/common/AdaptiveMode.d.ts +1 -1
- package/common/AdaptiveMode.js +1 -1
- package/common/AdaptiveMode.mjs +1 -1
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -10
package/colors/ColorPicker.mjs
CHANGED
|
@@ -6,349 +6,354 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as t from "react";
|
|
9
|
-
import
|
|
10
|
-
import { validatePackage as
|
|
11
|
-
import { packageMetadata as
|
|
12
|
-
import { Picker as
|
|
13
|
-
import { ColorGradient as
|
|
14
|
-
import { DEFAULT_TILE_SIZE as rt, DEFAULT_PRESET as
|
|
15
|
-
import { FlatColorPicker as
|
|
16
|
-
import { Button as
|
|
9
|
+
import o from "prop-types";
|
|
10
|
+
import { validatePackage as $e, getLicenseMessage as Ge, usePropsContext as Me, useAdaptiveModeContext as Ze, canUseDOM as je, Navigation as qe, getActiveElement as Je, keepFocusInContainer as z, focusFirstFocusableChild as fe, WatermarkOverlay as Qe, useDir as Xe, getTabIndex as Ye, classNames as j, kendoThemeMaps as me, IconWrap as et, createPropsContext as tt, svgIconPropType as nt } from "@progress/kendo-react-common";
|
|
11
|
+
import { packageMetadata as ve } from "../package-metadata.mjs";
|
|
12
|
+
import { Picker as at } from "./Picker.mjs";
|
|
13
|
+
import { ColorGradient as ot } from "./ColorGradient.mjs";
|
|
14
|
+
import { DEFAULT_TILE_SIZE as rt, DEFAULT_PRESET as lt, ColorPalette as it } from "./ColorPalette.mjs";
|
|
15
|
+
import { FlatColorPicker as L } from "./FlatColorPicker.mjs";
|
|
16
|
+
import { Button as st } from "@progress/kendo-react-buttons";
|
|
17
17
|
import { caretAltDownIcon as ct } from "@progress/kendo-svg-icons";
|
|
18
|
-
import { colorPickerAdaptiveTitle as
|
|
19
|
-
import { useLocalization as
|
|
20
|
-
import { AdaptiveMode as
|
|
21
|
-
import { ActionSheetContent as
|
|
22
|
-
const
|
|
18
|
+
import { colorPickerAdaptiveTitle as ge, messages as D, flatColorPickerApplyBtn as ke, flatColorPickerCancelBtn as Ce, colorPickerDropdownButtonAriaLabel as Ee } from "../messages/index.mjs";
|
|
19
|
+
import { useLocalization as ut } from "@progress/kendo-react-intl";
|
|
20
|
+
import { AdaptiveMode as dt } from "../common/AdaptiveMode.mjs";
|
|
21
|
+
import { ActionSheetContent as pt } from "@progress/kendo-react-layout";
|
|
22
|
+
const ft = {
|
|
23
23
|
opacity: !0
|
|
24
|
-
},
|
|
25
|
-
palette:
|
|
24
|
+
}, mt = {
|
|
25
|
+
palette: lt,
|
|
26
26
|
tileSize: rt
|
|
27
|
-
},
|
|
28
|
-
var ie,
|
|
29
|
-
const
|
|
27
|
+
}, q = (x) => x !== void 0, vt = tt(), be = t.forwardRef((x, we) => {
|
|
28
|
+
var ie, se;
|
|
29
|
+
const Se = !$e(ve, { component: "ColorPicker" }), ye = Ge(ve), r = Me(vt, x), S = ut(), J = Ze(), {
|
|
30
30
|
size: u = C.size,
|
|
31
31
|
rounded: v = C.rounded,
|
|
32
|
-
fillMode:
|
|
32
|
+
fillMode: N = C.fillMode,
|
|
33
33
|
gradientSettings: E = C.gradientSettings,
|
|
34
|
-
paletteSettings:
|
|
35
|
-
flatColorPickerSettings:
|
|
36
|
-
view: d =
|
|
37
|
-
views:
|
|
38
|
-
activeView:
|
|
34
|
+
paletteSettings: y = C.paletteSettings,
|
|
35
|
+
flatColorPickerSettings: h,
|
|
36
|
+
view: d = r.views ? void 0 : C.view,
|
|
37
|
+
views: s = d ? void 0 : C.views,
|
|
38
|
+
activeView: Q,
|
|
39
39
|
popupSettings: g,
|
|
40
|
-
valid:
|
|
41
|
-
disabled:
|
|
42
|
-
tabIndex:
|
|
43
|
-
icon:
|
|
44
|
-
svgIcon:
|
|
45
|
-
iconClassName:
|
|
46
|
-
onChange:
|
|
47
|
-
onFocus:
|
|
48
|
-
onBlur:
|
|
49
|
-
onActiveColorClick:
|
|
50
|
-
className:
|
|
51
|
-
adaptive:
|
|
52
|
-
adaptiveTitle:
|
|
53
|
-
adaptiveSubtitle:
|
|
54
|
-
|
|
55
|
-
|
|
40
|
+
valid: he,
|
|
41
|
+
disabled: O,
|
|
42
|
+
tabIndex: _e,
|
|
43
|
+
icon: F,
|
|
44
|
+
svgIcon: V,
|
|
45
|
+
iconClassName: P,
|
|
46
|
+
onChange: H,
|
|
47
|
+
onFocus: W,
|
|
48
|
+
onBlur: U,
|
|
49
|
+
onActiveColorClick: K,
|
|
50
|
+
className: Te,
|
|
51
|
+
adaptive: Pe,
|
|
52
|
+
adaptiveTitle: X = S.toLanguageString(ge, D[ge]),
|
|
53
|
+
adaptiveSubtitle: Y,
|
|
54
|
+
showButtons: b = !0
|
|
55
|
+
} = r, c = t.useRef(null), _ = t.useRef(null), R = t.useRef(null), m = t.useRef(null), w = t.useRef(void 0), Re = t.useRef(null), [Ae, ee] = t.useState(!1), [Ie, Be] = t.useState(r.defaultValue || void 0), [ze, Le] = t.useState(!1), [A, De] = t.useState(), $ = q(r.value), k = q(r.open), l = $ ? r.value : Ie, p = k ? r.open : ze, te = t.useRef(l), ne = t.useCallback(() => {
|
|
56
|
+
c.current && c.current.focus();
|
|
56
57
|
}, []);
|
|
57
58
|
t.useImperativeHandle(
|
|
58
|
-
|
|
59
|
+
we,
|
|
59
60
|
() => ({
|
|
60
61
|
// we agreed that each element will have focus method exposed
|
|
61
|
-
element:
|
|
62
|
-
actionElement:
|
|
63
|
-
value:
|
|
64
|
-
focus:
|
|
62
|
+
element: c.current,
|
|
63
|
+
actionElement: Re.current,
|
|
64
|
+
value: l,
|
|
65
|
+
focus: ne
|
|
65
66
|
}),
|
|
66
|
-
[
|
|
67
|
+
[l, ne]
|
|
67
68
|
);
|
|
68
|
-
const
|
|
69
|
+
const G = !!(A && J && A <= J.medium && Pe);
|
|
69
70
|
t.useEffect(() => {
|
|
70
|
-
const e =
|
|
71
|
+
const e = je && window.ResizeObserver && new window.ResizeObserver(Ue.bind(void 0));
|
|
71
72
|
return document != null && document.body && e && e.observe(document.body), () => {
|
|
72
73
|
document != null && document.body && e && e.disconnect();
|
|
73
74
|
};
|
|
74
75
|
}, []);
|
|
75
76
|
const a = t.useCallback(
|
|
76
|
-
(e,
|
|
77
|
-
k || (!e && !
|
|
77
|
+
(e, i) => {
|
|
78
|
+
k || (!e && !i && c && c.current && c.current.focus(), Le(e));
|
|
78
79
|
},
|
|
79
80
|
[k]
|
|
80
|
-
),
|
|
81
|
-
root:
|
|
81
|
+
), ae = t.useMemo(() => new qe({
|
|
82
|
+
root: c,
|
|
82
83
|
selectors: [".k-colorpicker", ".k-color-picker-popup"],
|
|
83
84
|
tabIndex: 0,
|
|
84
85
|
keyboardEvents: {
|
|
85
86
|
keydown: {
|
|
86
|
-
Escape: (e,
|
|
87
|
+
Escape: (e, i, n) => {
|
|
87
88
|
a(!1);
|
|
88
89
|
},
|
|
89
|
-
Enter: (e,
|
|
90
|
-
!k && e ===
|
|
90
|
+
Enter: (e, i, n) => {
|
|
91
|
+
!k && e === c.current && (n.preventDefault(), n.stopPropagation(), a(!0));
|
|
91
92
|
},
|
|
92
|
-
ArrowDown: (e,
|
|
93
|
+
ArrowDown: (e, i, n) => {
|
|
93
94
|
n.altKey && (n.preventDefault(), n.stopPropagation(), a(!0));
|
|
94
95
|
},
|
|
95
|
-
ArrowUp: (e,
|
|
96
|
+
ArrowUp: (e, i, n) => {
|
|
96
97
|
n.altKey && (n.preventDefault(), n.stopPropagation(), a(!1));
|
|
97
98
|
},
|
|
98
|
-
Tab: (e,
|
|
99
|
-
var
|
|
100
|
-
if (
|
|
101
|
-
const
|
|
102
|
-
d === "palette" &&
|
|
99
|
+
Tab: (e, i, n) => {
|
|
100
|
+
var T, ce, ue;
|
|
101
|
+
if (Je(document) !== c.current) {
|
|
102
|
+
const de = (T = R.current) == null ? void 0 : T.wrapperRef.current, B = (ce = _.current) == null ? void 0 : ce.wrapperRef.current, pe = (ue = m.current) == null ? void 0 : ue.element;
|
|
103
|
+
d === "palette" && de ? z(n, de) : d === "gradient" && B ? z(n, B) : d === "combo" && B ? z(n, B.parentElement) : s && pe && z(n, pe);
|
|
103
104
|
}
|
|
104
105
|
}
|
|
105
106
|
}
|
|
106
107
|
}
|
|
107
|
-
}), [a, k]),
|
|
108
|
-
k || (
|
|
109
|
-
}, [k]),
|
|
108
|
+
}), [a, k]), xe = t.useCallback(ae.triggerKeyboardEvent.bind(ae), []), Ne = t.useCallback(() => {
|
|
109
|
+
k || (_.current && _.current.wrapperRef.current ? fe(_.current.wrapperRef.current) : R.current ? R.current.focus() : m.current && m.current.element && fe(m.current.element));
|
|
110
|
+
}, [k]), I = (e) => te.current = e, oe = t.useCallback(
|
|
110
111
|
(e) => {
|
|
111
|
-
const
|
|
112
|
-
value:
|
|
112
|
+
const i = {
|
|
113
|
+
value: te.current,
|
|
113
114
|
nativeEvent: e.nativeEvent,
|
|
114
115
|
syntheticEvent: e
|
|
115
116
|
};
|
|
116
|
-
f(
|
|
117
|
+
f(i), a(!p, !0);
|
|
117
118
|
},
|
|
118
119
|
[p]
|
|
119
|
-
),
|
|
120
|
+
), M = t.useCallback(() => {
|
|
120
121
|
a(!1, !0);
|
|
121
|
-
}, [a]),
|
|
122
|
+
}, [a]), Oe = t.useCallback(
|
|
122
123
|
(e) => {
|
|
123
|
-
|
|
124
|
+
K && K.call(void 0, {
|
|
124
125
|
syntheticEvent: e,
|
|
125
126
|
nativeEvent: e.nativeEvent,
|
|
126
|
-
value:
|
|
127
|
+
value: l,
|
|
127
128
|
target: {
|
|
128
|
-
element:
|
|
129
|
-
value:
|
|
129
|
+
element: c.current,
|
|
130
|
+
value: l
|
|
130
131
|
}
|
|
131
132
|
});
|
|
132
133
|
},
|
|
133
|
-
[
|
|
134
|
-
),
|
|
134
|
+
[K, l]
|
|
135
|
+
), Fe = t.useCallback(
|
|
135
136
|
(e) => {
|
|
136
|
-
|
|
137
|
+
w.current ? (clearTimeout(w.current), w.current = void 0) : (ee(!0), G && !p && a(!0)), W && W.call(void 0, {
|
|
137
138
|
nativeEvent: e.nativeEvent,
|
|
138
139
|
syntheticEvent: e
|
|
139
140
|
});
|
|
140
141
|
},
|
|
141
|
-
[
|
|
142
|
-
),
|
|
143
|
-
a(!1, !0),
|
|
144
|
-
}, []),
|
|
142
|
+
[G, W, p, a]
|
|
143
|
+
), Ve = t.useCallback(() => {
|
|
144
|
+
a(!1, !0), ee(!1), w.current = void 0;
|
|
145
|
+
}, []), He = t.useCallback(
|
|
145
146
|
(e) => {
|
|
146
|
-
clearTimeout(
|
|
147
|
+
clearTimeout(w.current), w.current = window.setTimeout(Ve), U && U.call(void 0, {
|
|
147
148
|
nativeEvent: e.nativeEvent,
|
|
148
149
|
syntheticEvent: e
|
|
149
150
|
});
|
|
150
151
|
},
|
|
151
|
-
[
|
|
152
|
+
[U]
|
|
152
153
|
), f = t.useCallback(
|
|
153
|
-
(e,
|
|
154
|
-
var
|
|
155
|
-
const n =
|
|
156
|
-
|
|
154
|
+
(e, i) => {
|
|
155
|
+
var T;
|
|
156
|
+
const n = i ? e.rgbaValue || "" : (T = e.value) != null ? T : "";
|
|
157
|
+
$ || Be(n), H && H.call(void 0, {
|
|
157
158
|
value: n,
|
|
158
159
|
nativeEvent: e.nativeEvent,
|
|
159
160
|
syntheticEvent: e.syntheticEvent,
|
|
160
161
|
target: {
|
|
161
|
-
element:
|
|
162
|
+
element: c.current,
|
|
162
163
|
value: n
|
|
163
164
|
}
|
|
164
165
|
}), a(!1);
|
|
165
166
|
},
|
|
166
|
-
[
|
|
167
|
+
[$, H]
|
|
167
168
|
), re = t.useCallback(
|
|
168
169
|
(e) => f(e, !0),
|
|
169
|
-
[
|
|
170
|
-
),
|
|
170
|
+
[q, f]
|
|
171
|
+
), Z = t.useCallback(
|
|
171
172
|
(e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
|
|
172
|
-
|
|
173
|
+
ot,
|
|
173
174
|
{
|
|
174
175
|
...E,
|
|
175
176
|
_adaptive: e,
|
|
176
|
-
ref:
|
|
177
|
+
ref: _,
|
|
177
178
|
isInsidePopup: !0,
|
|
178
179
|
size: e ? "large" : u,
|
|
179
|
-
value:
|
|
180
|
+
value: l,
|
|
180
181
|
onChange: f
|
|
181
182
|
}
|
|
182
183
|
), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
|
|
183
184
|
it,
|
|
184
185
|
{
|
|
185
|
-
...
|
|
186
|
-
ref:
|
|
186
|
+
...y,
|
|
187
|
+
ref: R,
|
|
187
188
|
size: e ? "large" : u,
|
|
188
|
-
value:
|
|
189
|
+
value: l,
|
|
189
190
|
onChange: re
|
|
190
191
|
}
|
|
191
|
-
),
|
|
192
|
-
|
|
192
|
+
), s && s[0] === "gradient" && s[1] === "palette" && /* @__PURE__ */ t.createElement(
|
|
193
|
+
L,
|
|
193
194
|
{
|
|
194
|
-
...
|
|
195
|
-
_paletteSettings:
|
|
195
|
+
...h,
|
|
196
|
+
_paletteSettings: y,
|
|
196
197
|
_gradientSettings: { _adaptive: e, ...E },
|
|
197
198
|
ref: m,
|
|
198
199
|
size: e ? "large" : u,
|
|
199
200
|
rounded: v,
|
|
200
201
|
views: ["gradient", "palette"],
|
|
201
|
-
activeView:
|
|
202
|
+
activeView: Q,
|
|
202
203
|
setOpen: a,
|
|
203
|
-
showButtons: !
|
|
204
|
-
value:
|
|
204
|
+
showButtons: e ? !1 : b,
|
|
205
|
+
value: l,
|
|
205
206
|
onChange: f,
|
|
206
|
-
setAdaptiveModeValue:
|
|
207
|
+
setAdaptiveModeValue: I
|
|
207
208
|
}
|
|
208
|
-
),
|
|
209
|
-
|
|
209
|
+
), s && s[0] === "palette" && s[1] === "gradient" && /* @__PURE__ */ t.createElement(
|
|
210
|
+
L,
|
|
210
211
|
{
|
|
211
|
-
...
|
|
212
|
-
_paletteSettings:
|
|
212
|
+
...h,
|
|
213
|
+
_paletteSettings: y,
|
|
213
214
|
_gradientSettings: { _adaptive: e, ...E },
|
|
214
215
|
ref: m,
|
|
215
216
|
size: e ? "large" : u,
|
|
216
217
|
rounded: v,
|
|
217
218
|
views: ["palette", "gradient"],
|
|
218
219
|
setOpen: a,
|
|
219
|
-
showButtons: !
|
|
220
|
-
value:
|
|
220
|
+
showButtons: e ? !1 : b,
|
|
221
|
+
value: l,
|
|
221
222
|
onChange: f,
|
|
222
|
-
setAdaptiveModeValue:
|
|
223
|
+
setAdaptiveModeValue: I
|
|
223
224
|
}
|
|
224
|
-
),
|
|
225
|
-
|
|
225
|
+
), s && s.includes("gradient") && !s.includes("palette") && /* @__PURE__ */ t.createElement(
|
|
226
|
+
L,
|
|
226
227
|
{
|
|
227
|
-
...
|
|
228
|
+
...h,
|
|
228
229
|
_gradientSettings: { _adaptive: e, ...E },
|
|
229
230
|
ref: m,
|
|
230
231
|
size: e ? "large" : u,
|
|
231
232
|
rounded: v,
|
|
232
233
|
views: ["gradient"],
|
|
233
|
-
showButtons: !
|
|
234
|
+
showButtons: e ? !1 : b,
|
|
234
235
|
setOpen: a,
|
|
235
|
-
value:
|
|
236
|
+
value: l,
|
|
236
237
|
onChange: f,
|
|
237
|
-
setAdaptiveModeValue:
|
|
238
|
+
setAdaptiveModeValue: I
|
|
238
239
|
}
|
|
239
|
-
),
|
|
240
|
-
|
|
240
|
+
), s && s.includes("palette") && !s.includes("gradient") && /* @__PURE__ */ t.createElement(
|
|
241
|
+
L,
|
|
241
242
|
{
|
|
242
|
-
...
|
|
243
|
-
_paletteSettings:
|
|
243
|
+
...h,
|
|
244
|
+
_paletteSettings: y,
|
|
244
245
|
_gradientSettings: { _adaptive: e, ...E },
|
|
245
246
|
ref: m,
|
|
246
247
|
size: e ? "large" : u,
|
|
247
248
|
rounded: v,
|
|
248
249
|
views: ["palette"],
|
|
249
|
-
showButtons: !
|
|
250
|
+
showButtons: e ? !1 : b,
|
|
250
251
|
setOpen: a,
|
|
251
|
-
value:
|
|
252
|
+
value: l,
|
|
252
253
|
onChange: f,
|
|
253
|
-
setAdaptiveModeValue:
|
|
254
|
+
setAdaptiveModeValue: I
|
|
254
255
|
}
|
|
255
|
-
),
|
|
256
|
+
), Se && /* @__PURE__ */ t.createElement(Qe, { message: ye })),
|
|
256
257
|
[
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
258
|
+
Q,
|
|
259
|
+
N,
|
|
260
|
+
h,
|
|
260
261
|
E,
|
|
261
262
|
f,
|
|
262
263
|
re,
|
|
263
|
-
|
|
264
|
+
y,
|
|
264
265
|
a,
|
|
265
266
|
u,
|
|
266
|
-
|
|
267
|
+
l,
|
|
267
268
|
d,
|
|
268
|
-
|
|
269
|
+
s
|
|
269
270
|
]
|
|
270
|
-
),
|
|
271
|
-
var
|
|
271
|
+
), We = t.useCallback(() => {
|
|
272
|
+
var i;
|
|
272
273
|
const e = {
|
|
273
|
-
animation: !!((
|
|
274
|
-
title:
|
|
275
|
-
subTitle:
|
|
274
|
+
animation: !!((i = g == null ? void 0 : g.animate) == null || i),
|
|
275
|
+
title: X,
|
|
276
|
+
subTitle: Y,
|
|
276
277
|
expand: p,
|
|
277
|
-
onClose:
|
|
278
|
-
windowWidth:
|
|
279
|
-
footer: {
|
|
280
|
-
cancelText:
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
278
|
+
onClose: M,
|
|
279
|
+
windowWidth: A,
|
|
280
|
+
footer: b ? {
|
|
281
|
+
cancelText: S.toLanguageString(
|
|
282
|
+
Ce,
|
|
283
|
+
D[Ce]
|
|
284
|
+
),
|
|
285
|
+
onCancel: M,
|
|
286
|
+
applyText: S.toLanguageString(ke, D[ke]),
|
|
287
|
+
onApply: oe
|
|
288
|
+
} : void 0
|
|
285
289
|
};
|
|
286
|
-
return /* @__PURE__ */ t.createElement(
|
|
290
|
+
return /* @__PURE__ */ t.createElement(dt, { ...e }, /* @__PURE__ */ t.createElement(pt, null, Z(!0)));
|
|
287
291
|
}, [
|
|
288
292
|
g == null ? void 0 : g.animate,
|
|
289
|
-
Q,
|
|
290
293
|
X,
|
|
294
|
+
Y,
|
|
291
295
|
p,
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
296
|
+
M,
|
|
297
|
+
A,
|
|
298
|
+
b,
|
|
299
|
+
S,
|
|
300
|
+
oe,
|
|
301
|
+
Z
|
|
302
|
+
]), Ue = t.useCallback((e) => {
|
|
303
|
+
for (const i of e)
|
|
304
|
+
De(i.target.clientWidth);
|
|
305
|
+
}, []), le = Xe(c, r.dir), Ke = he !== !1;
|
|
301
306
|
return /* @__PURE__ */ t.createElement(
|
|
302
307
|
"span",
|
|
303
308
|
{
|
|
304
|
-
id:
|
|
309
|
+
id: r.id,
|
|
305
310
|
role: "combobox",
|
|
306
|
-
"aria-label":
|
|
307
|
-
"aria-labelledby":
|
|
308
|
-
"aria-describedby":
|
|
311
|
+
"aria-label": r.ariaLabel,
|
|
312
|
+
"aria-labelledby": r.ariaLabelledBy,
|
|
313
|
+
"aria-describedby": r.ariaDescribedBy,
|
|
309
314
|
"aria-haspopup": "dialog",
|
|
310
315
|
"aria-expanded": p,
|
|
311
|
-
"aria-controls": `k-colorpicker-popup-${(ie =
|
|
312
|
-
"aria-disabled":
|
|
313
|
-
className:
|
|
314
|
-
[`k-picker-${
|
|
315
|
-
[`k-picker-${
|
|
316
|
-
[`k-rounded-${
|
|
317
|
-
"k-invalid": !
|
|
318
|
-
"k-disabled":
|
|
319
|
-
"k-focus":
|
|
320
|
-
className:
|
|
316
|
+
"aria-controls": `k-colorpicker-popup-${(ie = r.id) != null ? ie : 0}`,
|
|
317
|
+
"aria-disabled": O ? "true" : void 0,
|
|
318
|
+
className: j("k-colorpicker", "k-picker", "k-icon-picker", {
|
|
319
|
+
[`k-picker-${me.sizeMap[u] || u}`]: u,
|
|
320
|
+
[`k-picker-${N}`]: N,
|
|
321
|
+
[`k-rounded-${me.roundedMap[v] || v}`]: v,
|
|
322
|
+
"k-invalid": !Ke,
|
|
323
|
+
"k-disabled": O,
|
|
324
|
+
"k-focus": Ae,
|
|
325
|
+
className: Te
|
|
321
326
|
}),
|
|
322
|
-
ref:
|
|
323
|
-
tabIndex:
|
|
324
|
-
title:
|
|
325
|
-
onKeyDown:
|
|
326
|
-
onFocus:
|
|
327
|
-
onBlur:
|
|
328
|
-
dir:
|
|
327
|
+
ref: c,
|
|
328
|
+
tabIndex: Ye(_e, O),
|
|
329
|
+
title: r.title,
|
|
330
|
+
onKeyDown: xe,
|
|
331
|
+
onFocus: Fe,
|
|
332
|
+
onBlur: He,
|
|
333
|
+
dir: le
|
|
329
334
|
},
|
|
330
335
|
/* @__PURE__ */ t.createElement(
|
|
331
|
-
|
|
336
|
+
at,
|
|
332
337
|
{
|
|
333
|
-
dir:
|
|
338
|
+
dir: le,
|
|
334
339
|
open: p,
|
|
335
|
-
onOpen:
|
|
336
|
-
popupAnchor:
|
|
337
|
-
popupSettings: { id: `k-colorpicker-popup-${(
|
|
338
|
-
input: /* @__PURE__ */ t.createElement("span", { onClick:
|
|
340
|
+
onOpen: Ne,
|
|
341
|
+
popupAnchor: c.current || void 0,
|
|
342
|
+
popupSettings: { id: `k-colorpicker-popup-${(se = r.id) != null ? se : 0}`, ...g },
|
|
343
|
+
input: /* @__PURE__ */ t.createElement("span", { onClick: Oe, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
|
|
339
344
|
"span",
|
|
340
345
|
{
|
|
341
|
-
className:
|
|
342
|
-
"k-no-color": !
|
|
343
|
-
"k-icon-color-preview":
|
|
346
|
+
className: j("k-value-icon", "k-color-preview", {
|
|
347
|
+
"k-no-color": !l,
|
|
348
|
+
"k-icon-color-preview": F || V || P
|
|
344
349
|
})
|
|
345
350
|
},
|
|
346
|
-
|
|
347
|
-
!
|
|
348
|
-
/* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor:
|
|
351
|
+
P && /* @__PURE__ */ t.createElement("span", { className: j("k-color-preview-icon", P) }),
|
|
352
|
+
!P && (F || V) && /* @__PURE__ */ t.createElement(et, { name: F, icon: V }),
|
|
353
|
+
/* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
|
|
349
354
|
)),
|
|
350
355
|
button: /* @__PURE__ */ t.createElement(
|
|
351
|
-
|
|
356
|
+
st,
|
|
352
357
|
{
|
|
353
358
|
tabIndex: -1,
|
|
354
359
|
type: "button",
|
|
@@ -357,38 +362,38 @@ const pt = {
|
|
|
357
362
|
icon: "caret-alt-down",
|
|
358
363
|
svgIcon: ct,
|
|
359
364
|
size: u,
|
|
360
|
-
"aria-label":
|
|
361
|
-
|
|
362
|
-
|
|
365
|
+
"aria-label": S.toLanguageString(
|
|
366
|
+
Ee,
|
|
367
|
+
D[Ee]
|
|
363
368
|
)
|
|
364
369
|
}
|
|
365
370
|
),
|
|
366
|
-
content:
|
|
367
|
-
_mobileMode:
|
|
368
|
-
_actionSheet:
|
|
371
|
+
content: Z(!1),
|
|
372
|
+
_mobileMode: G,
|
|
373
|
+
_actionSheet: We()
|
|
369
374
|
}
|
|
370
375
|
)
|
|
371
376
|
);
|
|
372
377
|
});
|
|
373
|
-
|
|
374
|
-
value:
|
|
375
|
-
defaultValue:
|
|
376
|
-
disabled:
|
|
377
|
-
view:
|
|
378
|
-
views:
|
|
379
|
-
dir:
|
|
380
|
-
id:
|
|
381
|
-
icon:
|
|
382
|
-
svgIcon:
|
|
383
|
-
ariaLabelledBy:
|
|
384
|
-
ariaDescribedBy:
|
|
385
|
-
size:
|
|
386
|
-
rounded:
|
|
387
|
-
fillMode:
|
|
388
|
-
className:
|
|
389
|
-
adaptive:
|
|
390
|
-
adaptiveTitle:
|
|
391
|
-
adaptiveSubtitle:
|
|
378
|
+
be.propTypes = {
|
|
379
|
+
value: o.string,
|
|
380
|
+
defaultValue: o.string,
|
|
381
|
+
disabled: o.bool,
|
|
382
|
+
view: o.oneOf(["gradient", "palette", "combo"]),
|
|
383
|
+
views: o.arrayOf(o.oneOf(["gradient", "palette"])),
|
|
384
|
+
dir: o.string,
|
|
385
|
+
id: o.string,
|
|
386
|
+
icon: o.string,
|
|
387
|
+
svgIcon: nt,
|
|
388
|
+
ariaLabelledBy: o.string,
|
|
389
|
+
ariaDescribedBy: o.string,
|
|
390
|
+
size: o.oneOf(["small", "medium", "large"]),
|
|
391
|
+
rounded: o.oneOf(["small", "medium", "large", "full", "none"]),
|
|
392
|
+
fillMode: o.oneOf(["solid", "flat", "outline"]),
|
|
393
|
+
className: o.string,
|
|
394
|
+
adaptive: o.bool,
|
|
395
|
+
adaptiveTitle: o.string,
|
|
396
|
+
adaptiveSubtitle: o.string
|
|
392
397
|
};
|
|
393
398
|
const C = {
|
|
394
399
|
size: void 0,
|
|
@@ -396,11 +401,11 @@ const C = {
|
|
|
396
401
|
fillMode: void 0,
|
|
397
402
|
view: "palette",
|
|
398
403
|
views: ["gradient", "palette"],
|
|
399
|
-
gradientSettings:
|
|
400
|
-
paletteSettings:
|
|
404
|
+
gradientSettings: ft,
|
|
405
|
+
paletteSettings: mt
|
|
401
406
|
};
|
|
402
|
-
|
|
407
|
+
be.displayName = "KendoColorPicker";
|
|
403
408
|
export {
|
|
404
|
-
|
|
405
|
-
|
|
409
|
+
be as ColorPicker,
|
|
410
|
+
vt as ColorPickerPropsContext
|
|
406
411
|
};
|