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