@progress/kendo-react-inputs 14.5.0-develop.9 → 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.
Files changed (58) hide show
  1. package/MaskedTextBoxMcpWrapper.d.ts +17 -0
  2. package/MaskedTextBoxMcpWrapper.js +8 -0
  3. package/MaskedTextBoxMcpWrapper.mjs +18 -0
  4. package/README.md +4 -4
  5. package/checkbox/Checkbox.js +1 -1
  6. package/checkbox/Checkbox.mjs +64 -64
  7. package/colors/ColorGradient.js +1 -1
  8. package/colors/ColorGradient.mjs +74 -72
  9. package/colors/ColorInput.js +1 -1
  10. package/colors/ColorInput.mjs +57 -45
  11. package/colors/ColorPalette.js +1 -1
  12. package/colors/ColorPalette.mjs +84 -81
  13. package/colors/ColorPicker.js +1 -1
  14. package/colors/ColorPicker.mjs +203 -190
  15. package/colors/FlatColorPicker.js +1 -1
  16. package/colors/FlatColorPicker.mjs +86 -94
  17. package/colors/interfaces/ColorPickerProps.d.ts +6 -1
  18. package/dist/cdn/js/kendo-react-inputs.js +1 -1
  19. package/index.d.mts +5 -1
  20. package/index.d.ts +5 -1
  21. package/index.js +1 -1
  22. package/index.mjs +92 -89
  23. package/maskedtextbox/MaskedTextBoxProps.d.ts +6 -1
  24. package/messages/index.d.ts +55 -0
  25. package/messages/index.js +1 -1
  26. package/messages/index.mjs +82 -60
  27. package/numerictextbox/NumericTextBox.js +1 -1
  28. package/numerictextbox/NumericTextBox.mjs +190 -188
  29. package/numerictextbox/interfaces/NumericTextBoxProps.d.ts +6 -1
  30. package/package-metadata.js +1 -1
  31. package/package-metadata.mjs +2 -2
  32. package/package.json +10 -10
  33. package/radiobutton/RadioButton.js +1 -1
  34. package/radiobutton/RadioButton.mjs +23 -20
  35. package/radiobutton/interfaces/RadioButtonProps.d.ts +7 -0
  36. package/range-slider/RangeSlider.d.ts +14 -1
  37. package/range-slider/RangeSlider.js +11 -11
  38. package/range-slider/RangeSlider.mjs +188 -185
  39. package/rating/Rating.d.ts +6 -1
  40. package/rating/Rating.js +3 -3
  41. package/rating/Rating.mjs +88 -81
  42. package/signature/Signature.js +1 -1
  43. package/signature/Signature.mjs +127 -129
  44. package/signature/interfaces/SignatureProps.d.ts +6 -1
  45. package/slider/Slider.d.ts +6 -1
  46. package/slider/Slider.js +1 -1
  47. package/slider/Slider.mjs +149 -144
  48. package/slider/SliderLabel.js +1 -1
  49. package/slider/SliderLabel.mjs +3 -2
  50. package/switch/Switch.d.ts +6 -1
  51. package/switch/Switch.js +1 -1
  52. package/switch/Switch.mjs +100 -100
  53. package/textarea/TextArea.js +1 -1
  54. package/textarea/TextArea.mjs +101 -101
  55. package/textarea/interfaces/TextAreaProps.d.ts +6 -1
  56. package/textbox/Textbox.d.ts +20 -1
  57. package/textbox/Textbox.js +1 -1
  58. package/textbox/Textbox.mjs +92 -81
package/rating/Rating.mjs CHANGED
@@ -7,21 +7,28 @@
7
7
  */
8
8
  import * as a from "react";
9
9
  import c from "prop-types";
10
- import { usePropsContext as ee, useDir as te, Keys as R, IconWrap as y, toIconName as H, classNames as ae, getTabIndex as ne, createPropsContext as le, svgIconPropType as $ } from "@progress/kendo-react-common";
11
- import { starIcon as N } from "@progress/kendo-svg-icons";
12
- import { RatingItem as se } from "./RatingItem.mjs";
13
- import { RATING_ACTION as r, ratingReducer as oe } from "./rating-reducer.mjs";
14
- import { calcIsFirstHalf as K, toRound as D, getRemainder as ie, isHalf as re, isSelected as O, isCorrectValue as L } from "./utils/index.mjs";
15
- import { ratingAriaLabel as A, messages as ce } from "../messages/index.mjs";
16
- import { useLocalization as ue } from "@progress/kendo-react-intl";
17
- const X = (n, g, v) => {
10
+ import { usePropsContext as te, useDir as ae, useWebMcpRegister as ne, Keys as E, IconWrap as y, toIconName as O, classNames as le, getTabIndex as se, createPropsContext as oe, svgIconPropType as P } from "@progress/kendo-react-common";
11
+ import { RatingItem as ie } from "./RatingItem.mjs";
12
+ import { RATING_ACTION as r, ratingReducer as re } from "./rating-reducer.mjs";
13
+ import { calcIsFirstHalf as S, toRound as D, getRemainder as ce, isHalf as ue, isSelected as F, isCorrectValue as $ } from "./utils/index.mjs";
14
+ import { ratingAriaLabel as K, messages as me } from "../messages/index.mjs";
15
+ import { useLocalization as de } from "@progress/kendo-react-intl";
16
+ const A = {
17
+ name: "star",
18
+ content: '<path d="m22.762 10.668-4.557 3.931 1.389 5.88a1.661 1.661 0 0 1-2.481 1.805L12 19.138l-5.116 3.146a1.661 1.661 0 0 1-2.478-1.805l1.394-5.88-4.557-3.931a1.667 1.667 0 0 1 .943-2.921l5.974-.482 2.304-5.577a1.656 1.656 0 0 1 3.065 0l2.304 5.577 5.973.482a1.667 1.667 0 0 1 .95 2.922z" />',
19
+ viewBox: "0 0 24 24"
20
+ }, W = {
21
+ name: "star-outline",
22
+ content: '<path d="M23.065 8.95a1.44 1.44 0 0 0-1.267-1l-6.101-.493-2.351-5.691a1.454 1.454 0 0 0-2.691 0L8.304 7.454l-6.101.496A1.44 1.44 0 0 0 .936 8.951a1.46 1.46 0 0 0 .433 1.562l4.657 4.011-1.417 5.998a1.46 1.46 0 0 0 .567 1.52 1.43 1.43 0 0 0 1.61.061L12 18.898l5.222 3.211a1.43 1.43 0 0 0 1.611-.061 1.46 1.46 0 0 0 .566-1.52l-1.417-5.998 4.65-4.016a1.46 1.46 0 0 0 .433-1.564m-1.229.644-4.929 4.253a.61.61 0 0 0-.195.599l1.506 6.357a.24.24 0 0 1-.096.261.23.23 0 0 1-.262.009l-5.541-3.404a.61.61 0 0 0-.636 0l-5.54 3.403a.23.23 0 0 1-.263-.01.24.24 0 0 1-.101-.26l1.506-6.358a.61.61 0 0 0-.194-.598l-4.93-4.253a.24.24 0 0 1-.074-.269.23.23 0 0 1 .21-.167l6.471-.522a.61.61 0 0 0 .513-.373l2.493-6.035a.238.238 0 0 1 .444 0l2.494 6.035a.61.61 0 0 0 .512.373l6.472.522a.23.23 0 0 1 .21.167.24.24 0 0 1-.068.269z" />',
23
+ viewBox: "0 0 24 24"
24
+ }, X = (n, g, v) => {
18
25
  const [e, z] = a.useState(n);
19
26
  return [e, (h) => {
20
- const o = oe(g.state || e, { ...h, ...g });
27
+ const o = re(g.state || e, { ...h, ...g });
21
28
  v && v(o, h.event), z(o);
22
29
  }];
23
- }, me = le(), q = a.forwardRef((n, g) => {
24
- const v = ee(me, n), e = {
30
+ }, pe = oe(), q = a.forwardRef((n, g) => {
31
+ const v = te(pe, n), e = {
25
32
  dir: s.dir,
26
33
  min: s.min,
27
34
  max: s.max,
@@ -33,21 +40,21 @@ const X = (n, g, v) => {
33
40
  selection: s.selection,
34
41
  precision: s.precision,
35
42
  ...v
36
- }, z = ue(), m = a.useRef(null), h = a.useRef(null), o = te(h, e.dir);
37
- a.useImperativeHandle(m, () => ({
43
+ }, z = de(), u = a.useRef(null), h = a.useRef(null), o = ae(h, e.dir);
44
+ a.useImperativeHandle(u, () => ({
38
45
  element: h.current,
39
46
  props: e
40
- })), a.useImperativeHandle(g, () => m.current);
47
+ })), a.useImperativeHandle(g, () => u.current), ne("rating", u, e, e.webMcp);
41
48
  const G = a.useCallback(
42
49
  (t, l) => {
43
- e.onChange && m.current && e.onChange.call(void 0, {
50
+ e.onChange && u.current && e.onChange.call(void 0, {
44
51
  value: t,
45
- target: m.current,
52
+ target: u.current,
46
53
  syntheticEvent: l
47
54
  });
48
55
  },
49
56
  [e.onChange]
50
- ), I = a.useMemo(() => e.min !== void 0 ? e.min : s.min, [e.min]), x = a.useMemo(() => e.max !== void 0 ? e.max : s.max, [e.max]), d = a.useMemo(() => e.precision || s.precision, [e.precision]), i = a.useMemo(() => e.step !== void 0 ? e.step : s.step, [e.step]), V = a.useMemo(() => e.readonly || s.readonly, [e.readonly]), k = a.useMemo(() => e.disabled || s.disabled, [e.disabled]), W = a.useMemo(() => e.item || s.item, [e.item]), [T, p] = X(
57
+ ), I = a.useMemo(() => e.min !== void 0 ? e.min : s.min, [e.min]), x = a.useMemo(() => e.max !== void 0 ? e.max : s.max, [e.max]), d = a.useMemo(() => e.precision || s.precision, [e.precision]), i = a.useMemo(() => e.step !== void 0 ? e.step : s.step, [e.step]), w = a.useMemo(() => e.readonly || s.readonly, [e.readonly]), k = a.useMemo(() => e.disabled || s.disabled, [e.disabled]), _ = a.useMemo(() => e.item || s.item, [e.item]), [H, p] = X(
51
58
  e.defaultValue !== void 0 ? e.defaultValue : s.defaultValue,
52
59
  {
53
60
  state: e.value,
@@ -56,24 +63,24 @@ const X = (n, g, v) => {
56
63
  step: d === "half" ? i / 2 : i
57
64
  },
58
65
  G
59
- ), [P, B] = X(null, {
66
+ ), [L, B] = X(null, {
60
67
  state: e.value,
61
68
  min: I,
62
69
  max: x,
63
70
  step: d === "half" ? i / 2 : i,
64
71
  precision: d
65
- }), u = a.useMemo(
66
- () => e.value !== void 0 ? e.value : T,
67
- [e.value, T]
68
- ), C = a.useMemo(() => P, [P]), F = a.useMemo(
72
+ }), m = a.useMemo(
73
+ () => e.value !== void 0 ? e.value : H,
74
+ [e.value, H]
75
+ ), C = a.useMemo(() => L, [L]), N = a.useMemo(
69
76
  () => e.selection || s.selection,
70
77
  [e.selection]
71
- ), E = a.useMemo(() => i / (d === "half" ? 2 : 1), [i, d]), _ = a.useCallback(
78
+ ), M = a.useMemo(() => i / (d === "half" ? 2 : 1), [i, d]), j = a.useCallback(
72
79
  (t) => {
73
- if (!(!t.target || !t.target.element || V || k)) {
80
+ if (!(!t.target || !t.target.element || w || k)) {
74
81
  if (d === "half") {
75
- const l = t.target.element.getBoundingClientRect(), M = K(o || "ltr", l, t.syntheticEvent.clientX) ? D(t.target.value - i / 2, E) : t.target.value;
76
- p({ type: r.select, payload: M, event: t.syntheticEvent });
82
+ const l = t.target.element.getBoundingClientRect(), R = S(o || "ltr", l, t.syntheticEvent.clientX) ? D(t.target.value - i / 2, M) : t.target.value;
83
+ p({ type: r.select, payload: R, event: t.syntheticEvent });
77
84
  } else
78
85
  p({
79
86
  type: r.select,
@@ -82,44 +89,44 @@ const X = (n, g, v) => {
82
89
  });
83
90
  if (e.onClick) {
84
91
  const l = {
85
- value: u,
86
- target: m.current,
92
+ value: m,
93
+ target: u.current,
87
94
  syntheticEvent: t.syntheticEvent
88
95
  };
89
96
  e.onClick.call(void 0, l);
90
97
  }
91
98
  }
92
99
  },
93
- [e.onClick, p, u]
94
- ), j = a.useCallback(
100
+ [e.onClick, p, m]
101
+ ), J = a.useCallback(
95
102
  (t) => {
96
- if (!(V || k)) {
103
+ if (!(w || k)) {
97
104
  switch (t.keyCode) {
98
- case R.right:
105
+ case E.right:
99
106
  t.preventDefault(), p({
100
107
  type: o === "rtl" ? r.decrease : r.increase,
101
108
  event: t
102
109
  });
103
110
  break;
104
- case R.left:
111
+ case E.left:
105
112
  t.preventDefault(), p({
106
113
  type: o === "rtl" ? r.increase : r.decrease,
107
114
  event: t
108
115
  });
109
116
  break;
110
- case R.home:
117
+ case E.home:
111
118
  t.preventDefault(), p({
112
119
  type: o === "rtl" ? r.min : r.max,
113
120
  event: t
114
121
  });
115
122
  break;
116
- case R.end:
123
+ case E.end:
117
124
  t.preventDefault(), p({
118
125
  type: o === "rtl" ? r.max : r.min,
119
126
  event: t
120
127
  });
121
128
  break;
122
- case R.esc:
129
+ case E.esc:
123
130
  t.preventDefault(), p({
124
131
  type: r.deselect,
125
132
  event: t
@@ -127,41 +134,41 @@ const X = (n, g, v) => {
127
134
  break;
128
135
  }
129
136
  e.onKeyDown && e.onKeyDown.call(void 0, {
130
- value: u,
131
- target: m.current,
137
+ value: m,
138
+ target: u.current,
132
139
  syntheticEvent: t
133
140
  });
134
141
  }
135
142
  },
136
- [e.onKeyDown, p, u]
137
- ), J = a.useCallback(
143
+ [e.onKeyDown, p, m]
144
+ ), Q = a.useCallback(
138
145
  (t) => {
139
146
  if (e.onFocus) {
140
147
  const l = {
141
- target: m.current,
148
+ target: u.current,
142
149
  syntheticEvent: t
143
150
  };
144
151
  e.onFocus.call(void 0, l);
145
152
  }
146
153
  },
147
154
  [e.onFocus]
148
- ), Q = a.useCallback(
155
+ ), U = a.useCallback(
149
156
  (t) => {
150
157
  if (e.onBlur) {
151
158
  const l = {
152
- target: m.current,
159
+ target: u.current,
153
160
  syntheticEvent: t
154
161
  };
155
162
  e.onBlur.call(void 0, l);
156
163
  }
157
164
  },
158
165
  [e.onBlur]
159
- ), U = a.useCallback(
166
+ ), Y = a.useCallback(
160
167
  (t) => {
161
168
  if (!(!t.target || !t.target.element))
162
169
  if (d === "half") {
163
- const l = t.target.element.getBoundingClientRect(), M = K(o || "ltr", l, t.syntheticEvent.clientX) ? t.target.value - i / 2 : t.target.value;
164
- B({ type: r.select, payload: M, event: t.syntheticEvent });
170
+ const l = t.target.element.getBoundingClientRect(), R = S(o || "ltr", l, t.syntheticEvent.clientX) ? t.target.value - i / 2 : t.target.value;
171
+ B({ type: r.select, payload: R, event: t.syntheticEvent });
165
172
  } else
166
173
  B({
167
174
  type: r.select,
@@ -170,40 +177,40 @@ const X = (n, g, v) => {
170
177
  });
171
178
  },
172
179
  [d, i, o]
173
- ), Y = a.useCallback((t) => {
180
+ ), Z = a.useCallback((t) => {
174
181
  B({ type: r.reset, event: t.syntheticEvent });
175
- }, []), S = [], Z = ie(D(x - I, E), i);
176
- for (let t = I; t <= x; t = D(t + i, E)) {
177
- const l = D(t + Z, E), f = d === "half" ? re(l, C !== null ? C : u !== null ? u : 0, i) : !1, M = O(l, u, i, F), w = O(l, C !== null ? C : u, i, F), b = O(l, C, i, F);
178
- S.push(
182
+ }, []), T = [], ee = ce(D(x - I, M), i);
183
+ for (let t = I || i; t <= x; t = D(t + i, M)) {
184
+ const l = D(t + ee, M), f = d === "half" ? ue(l, C !== null ? C : m !== null ? m : 0, i) : !1, R = F(l, m, i, N), V = F(l, C !== null ? C : m, i, N), b = F(l, C, i, N);
185
+ T.push(
179
186
  /* @__PURE__ */ a.createElement(
180
- W,
187
+ _,
181
188
  {
182
189
  key: l,
183
190
  value: l,
184
191
  dir: o,
185
- title: String(f ? D(l - i / 2, E) : l),
192
+ title: String(f ? D(l - i / 2, M) : l),
186
193
  icon: e.icon,
187
194
  svgIcon: e.svgIcon,
188
195
  half: f,
189
- selected: M || w,
196
+ selected: R || V,
190
197
  hovered: b,
191
- onClick: _,
192
- onMouseMove: U,
193
- onMouseLeave: Y
198
+ onClick: j,
199
+ onMouseMove: Y,
200
+ onMouseLeave: Z
194
201
  },
195
202
  f && /* @__PURE__ */ a.createElement("span", { className: "k-rating-precision-complement" }, !(e.icon || e.svgIconOutline) && /* @__PURE__ */ a.createElement(
196
203
  y,
197
204
  {
198
205
  name: "star",
199
- icon: N,
206
+ icon: W,
200
207
  style: { clipPath: `${o === "rtl" ? "inset(0 50% 0 0)" : "inset(0 0 0 50%)"}` },
201
208
  size: "xlarge"
202
209
  }
203
210
  ), (e.icon || e.svgIconOutline) && /* @__PURE__ */ a.createElement(
204
211
  y,
205
212
  {
206
- name: H(`${e.icon}-outline`),
213
+ name: O(`${e.icon}-outline`),
207
214
  icon: e.svgIconOutline,
208
215
  size: "xlarge"
209
216
  }
@@ -212,23 +219,23 @@ const X = (n, g, v) => {
212
219
  y,
213
220
  {
214
221
  name: "star",
215
- icon: N,
222
+ icon: A,
216
223
  style: { clipPath: `${o === "rtl" ? "inset(0 0 0 50%)" : "inset(0 50% 0 0)"}` },
217
224
  size: "xlarge"
218
225
  }
219
226
  ), (e.icon || e.svgIcon) && /* @__PURE__ */ a.createElement(
220
227
  y,
221
228
  {
222
- name: e.icon ? H(e.icon) : void 0,
229
+ name: e.icon ? O(e.icon) : void 0,
223
230
  icon: e.svgIcon,
224
231
  size: "xlarge"
225
232
  }
226
233
  )),
227
234
  f && /* @__PURE__ */ a.createElement("span", { style: { width: "24px", height: "24px", display: "block" } }),
228
- !f && !(e.icon || e.svgIcon) && (b || w && !b) && /* @__PURE__ */ a.createElement(y, { name: "star", icon: N, size: "xlarge" }) || !(e.icon || e.svgIcon) && !b && !w && /* @__PURE__ */ a.createElement(y, { name: "star", icon: N, size: "xlarge" }) || (e.icon || e.svgIcon) && (b || w && !b) && /* @__PURE__ */ a.createElement(y, { name: e.icon, icon: e.svgIcon, size: "xlarge" }) || (e.icon || e.svgIcon) && !b && /* @__PURE__ */ a.createElement(
235
+ !f && !(e.icon || e.svgIcon) && (b || V && !b) && /* @__PURE__ */ a.createElement(y, { name: "star", icon: A, size: "xlarge" }) || !(e.icon || e.svgIcon) && !b && !V && /* @__PURE__ */ a.createElement(y, { name: "star", icon: W, size: "xlarge" }) || (e.icon || e.svgIcon) && (b || V && !b) && /* @__PURE__ */ a.createElement(y, { name: e.icon, icon: e.svgIcon, size: "xlarge" }) || (e.icon || e.svgIcon) && !b && /* @__PURE__ */ a.createElement(
229
236
  y,
230
237
  {
231
- name: H(`${e.icon}-outline`),
238
+ name: O(`${e.icon}-outline`),
232
239
  icon: e.svgIconOutline,
233
240
  size: "xlarge"
234
241
  }
@@ -244,37 +251,37 @@ const X = (n, g, v) => {
244
251
  ref: h,
245
252
  role: "slider",
246
253
  dir: o,
247
- tabIndex: ne(e.tabIndex, e.disabled, void 0),
248
- className: ae(
254
+ tabIndex: se(e.tabIndex, e.disabled, void 0),
255
+ className: le(
249
256
  "k-rating",
250
257
  {
251
258
  "k-rtl": o === "rtl",
252
- "k-readonly": V,
259
+ "k-readonly": w,
253
260
  "k-disabled": k
254
261
  },
255
262
  e.className
256
263
  ),
257
- onKeyDown: j,
258
- onFocus: J,
259
- onBlur: Q,
264
+ onKeyDown: J,
265
+ onFocus: Q,
266
+ onBlur: U,
260
267
  "aria-valuemin": I,
261
268
  "aria-valuemax": x,
262
- "aria-valuenow": u !== null ? u : void 0,
269
+ "aria-valuenow": m !== null ? m : void 0,
263
270
  "aria-disabled": k ? "true" : void 0,
264
- "aria-label": z.toLanguageString(A, ce[A]),
271
+ "aria-label": z.toLanguageString(K, me[K]),
265
272
  "aria-labelledby": e.ariaLabelledBy,
266
273
  "aria-describedby": e.ariaDescribedBy
267
274
  },
268
- /* @__PURE__ */ a.createElement("input", { id: "rating", className: "k-hidden", readOnly: V, disabled: k }),
269
- /* @__PURE__ */ a.createElement("span", { className: "k-rating-container" }, S),
275
+ /* @__PURE__ */ a.createElement("input", { type: "hidden", id: "rating", readOnly: w, disabled: k }),
276
+ /* @__PURE__ */ a.createElement("span", { className: "k-rating-container" }, T),
270
277
  e.label && /* @__PURE__ */ a.createElement("span", { className: "k-rating-label" }, e.label)
271
278
  );
272
- }), de = {
279
+ }), ge = {
273
280
  id: c.string,
274
281
  dir: c.oneOf(["ltr", "rtl"]),
275
282
  selection: c.oneOf(["continues", "single"]),
276
283
  precision: c.oneOf(["item", "half"]),
277
- value: (n, g, v) => n.value && n.min && n.max && n.step && !(n.precision === "half" ? L(n.min, n.max, n.step / 2, n.value) : L(n.min, n.max, n.step, n.value)) && n.precision === "half" ? new Error(
284
+ value: (n, g, v) => n.value && n.min && n.max && n.step && !(n.precision === "half" ? $(n.min, n.max, n.step / 2, n.value) : $(n.min, n.max, n.step, n.value)) && n.precision === "half" ? new Error(
278
285
  `Invalid prop + ${g} supplied to ${v}.
279
286
  The value of the { value } property is not correct, please check your values.
280
287
  `
@@ -292,15 +299,15 @@ const X = (n, g, v) => {
292
299
  readonly: c.bool,
293
300
  disabled: c.bool,
294
301
  icon: c.string,
295
- svgIcon: $,
296
- svgIconOutline: $,
302
+ svgIcon: P,
303
+ svgIconOutline: P,
297
304
  ariaDescribedBy: c.string
298
305
  }, s = {
299
306
  dir: "ltr",
300
- min: 1,
307
+ min: 0,
301
308
  max: 5,
302
309
  step: 1,
303
- item: se,
310
+ item: ie,
304
311
  defaultValue: null,
305
312
  readonly: !1,
306
313
  disabled: !1,
@@ -308,8 +315,8 @@ const X = (n, g, v) => {
308
315
  precision: "item"
309
316
  };
310
317
  q.displayName = "KendoReactRating";
311
- q.propTypes = de;
318
+ q.propTypes = ge;
312
319
  export {
313
320
  q as Rating,
314
- me as RatingPropsContext
321
+ pe as RatingPropsContext
315
322
  };
@@ -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 ze=require("@progress/kendo-inputs-common"),_=require("@progress/kendo-react-buttons"),a=require("@progress/kendo-react-common"),Oe=require("@progress/kendo-react-dialogs"),Ee=require("@progress/kendo-react-intl"),r=require("prop-types"),xe=require("react"),p=require("../messages/index.js"),ne=require("../package-metadata.js"),Me=require("./utils/index.js"),N=require("@progress/kendo-svg-icons");function we(c){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const g in c)if(g!=="default"){const v=Object.getOwnPropertyDescriptor(c,g);Object.defineProperty(k,g,v.get?v:{enumerable:!0,get:()=>c[g]})}}return k.default=c,Object.freeze(k)}const n=we(xe),Ie=250,Le=84,ae=3,re=2,Pe="#000000",qe="#ffffff",oe=c=>c!==void 0,se=a.createPropsContext(),E=n.forwardRef((c,k)=>{const g=!a.validatePackage(ne.packageMetadata,{component:"Signature"}),v=a.getLicenseMessage(ne.packageMetadata),F=a.usePropsContext(se,c),e=n.useMemo(()=>({strokeWidth:l.strokeWidth,smooth:l.smooth,popupScale:l.popupScale,exportScale:l.exportScale,maximizable:l.maximizable,disabled:l.disabled,required:l.required,validityStyles:l.validityStyles,onChange:l.onChange,onFocus:l.onFocus,onBlur:l.onBlur,onOpen:l.onOpen,onClose:l.onClose,size:l.size,rounded:l.rounded,fillMode:l.fillMode,...F}),[F]),x=Ee.useLocalization(),d=n.useRef(null),y=n.useRef(null),j=n.useRef(null),W=n.useRef(null),M=n.useRef(null),[s,ie]=n.useState(),[h,G]=n.useState(!1),[w,A]=n.useState(!1),[C,V]=n.useState(),[le,ce]=n.useState(),U=oe(e.value)?e.value:C,[ue,de]=n.useState(!1),b=oe(e.open),f=b?e.open:ue,me=e.maximized||w||!e.maximizable||e.disabled,pe=!(e.maximized&&!w),ge=!(!(e.value||C)||w||e.readOnly||e.disabled),H=x.toLanguageString(p.signatureMaximize,p.messages[p.signatureMaximize]),$=x.toLanguageString(p.signatureMinimize,p.messages[p.signatureMinimize]),K=x.toLanguageString(p.signatureClear,p.messages[p.signatureClear]),I=e.popupScale||ae,L=e.exportScale||re,P=t=>{V(t),e.onChange&&e.onChange({value:t})},fe=t=>{s==null||s.loadImage(t.value),P(t.value)};n.useEffect(()=>{e.value!==C&&(V(e.value),s==null||s.loadImage(e.value))},[e.value]);const ke=()=>{s==null||s.clear(),P()},S=n.useCallback(t=>{b||de(t)},[b]),be=t=>{var o,i;Z(t),(i=((o=M.current)==null?void 0:o.element)||y.current)==null||i.focus()},q=n.useCallback(()=>{let t=Pe;return!e.color&&typeof document!="undefined"&&d.current&&(t=getComputedStyle(d.current).color),e.color||t},[e.color]),D=n.useCallback(()=>{let t=qe;return!e.backgroundColor&&typeof document!="undefined"&&d.current&&(t=getComputedStyle(d.current).backgroundColor),e.backgroundColor||t},[e.backgroundColor]),X=()=>({scale:e.maximized?e.popupScale:1,color:q(),backgroundColor:D(),strokeWidth:e.strokeWidth,smooth:e.smooth,readonly:e.readOnly}),J=async t=>{const{width:o,height:i}=t;return await(s==null?void 0:s.exportImage({width:o*L,height:i*L}))};n.useEffect(()=>{const t=y.current,o=new ze.SignaturePad(t,X());return U&&o.loadImage(U),ie(o),()=>o.destroy()},[]),n.useEffect(()=>{s==null||s.setOptions({onChange:async()=>P(await J(ee())),onDraw:()=>A(!0),onDrawEnd:()=>A(!1)})},[s]),a.useIsomorphicLayoutEffect(()=>s==null?void 0:s.setOptions(X()),[e.readOnly,e.color,e.backgroundColor,e.strokeWidth,e.smooth]),n.useEffect(()=>{var i,u;const t=(u=(i=j.current)==null?void 0:i.element)==null?void 0:u.querySelector(".k-overlay");if(!t)return;const o=()=>S(!1);return t.addEventListener("click",o),()=>t.removeEventListener("click",o)},[f]),n.useEffect(()=>{if(!f||typeof document=="undefined")return;const t=o=>{var i,u;o.key==="Escape"&&(S(!1),(u=(i=M.current)==null?void 0:i.element)==null||u.focus())};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[f]),n.useEffect(()=>{var t,o;e.maximized&&((o=(t=W.current)==null?void 0:t.element)==null||o.focus())},[]);const R=n.useCallback(()=>{var t;return(t=y.current)==null?void 0:t.focus()},[]),z=n.useCallback(()=>e.value,[e.value]),Q=n.useCallback(()=>e.name,[e.name]),O=n.useCallback(()=>e.required,[e.required]),T=n.useCallback(()=>{const t=e.validationMessage!==void 0,i=!z(),u=e.valid!==void 0?e.valid:!O()||!i;return{customError:t,valid:u,valueMissing:i}},[e.validationMessage,e.valid,z,O]),B=n.useCallback(()=>e.validityStyles,[e.validityStyles]),Y=n.useCallback(()=>e,[e]),m=n.useCallback(()=>{const t={element:d.current,focus:R};return Object.defineProperty(t,"name",{get:Q}),Object.defineProperty(t,"value",{get:z}),Object.defineProperty(t,"validity",{get:T}),Object.defineProperty(t,"validityStyles",{get:B}),Object.defineProperty(t,"required",{get:O}),Object.defineProperty(t,"props",{get:Y}),Object.defineProperty(t,"color",{get:q}),Object.defineProperty(t,"backgroundColor",{get:D}),t},[Q,z,T,B,O,R,Y,q,D]);n.useImperativeHandle(k,m);const ve=n.useCallback(t=>{h||e.maximized||(G(!0),a.dispatchEvent(e.onFocus,t,m(),{}))},[h,e.onFocus,m]),ye=n.useCallback(t=>{Me.hasParent(t.relatedTarget,d.current)||(G(!1),a.dispatchEvent(e.onBlur,t,m(),{}))},[h,e.onBlur,m]),he=n.useCallback(async t=>{ce(await J(te())),S(!0),a.dispatchEvent(e.onOpen,t,m(),{})},[f,b,e.onOpen,e.value,C,m]),Z=n.useCallback(t=>{S(!1),a.dispatchEvent(e.onClose,t,m(),{})},[f,b,e.onClose,m]),Ce=()=>{ke(),R()},ee=()=>{var i,u;const t=e.width||((i=d.current)==null?void 0:i.offsetWidth)||Ie,o=e.height||((u=d.current)==null?void 0:u.offsetHeight)||Le;return{width:t,height:o}},te=()=>{const{width:t,height:o}=ee();return{width:t*I,height:o*I}},Se=!B()||T().valid;return n.createElement("div",{ref:d,dir:e.dir,style:{width:e.width,height:e.height,...e.style},className:a.classNames("k-input","k-signature",{"k-signature-maximized":e.maximized,[`k-signature-${a.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-signature-${e.fillMode}`]:e.fillMode,[`k-input-${e.fillMode}`]:e.fillMode,[`k-rounded-${a.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,"k-invalid":!Se,"k-required":e.required,"k-disabled":e.disabled,"k-focus":h},e.className),onFocus:ve,onBlur:ye},n.createElement("div",{className:"k-signature-canvas",ref:y,tabIndex:a.getTabIndex(e.tabIndex,e.disabled),role:"img",id:e.id,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,"aria-disabled":e.disabled?"true":void 0,style:e.inputStyle}),n.createElement("div",{className:"k-signature-actions k-signature-actions-top"},n.createElement(_.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-maximize",{"k-hidden":e.disabled||me}),ref:M,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:he,"aria-label":H,title:H}),n.createElement(_.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-minimize","k-rotate-180",{"k-hidden":e.disabled||pe}),ref:W,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:Z,"aria-label":$,title:$})),!e.hideLine&&n.createElement("div",{className:"k-signature-line",style:{zIndex:2,pointerEvents:"none"}}),n.createElement("div",{className:"k-signature-actions k-signature-actions-bottom"},ge&&n.createElement(_.Button,{type:"button",className:"k-signature-action k-signature-clear",icon:"x",svgIcon:N.xIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:Ce,"aria-label":K,title:K})),f&&n.createElement(Oe.Dialog,{ref:j},n.createElement(E,{...e,...te(),value:le,maximized:!0,exportScale:1/I*L,open:!1,onChange:fe,onClose:be})),g&&n.createElement(a.WatermarkOverlay,{message:v}))});E.propTypes={value:r.string,width:r.number,height:r.number,tabIndex:r.number,dir:r.string,ariaDescribedBy:r.string,ariaLabelledBy:r.string,ariaLabel:r.string,readOnly:r.bool,disabled:r.bool,validationMessage:r.string,required:r.bool,onChange:r.func,onFocus:r.func,onBlur:r.func,onOpen:r.func,onClose:r.func,size:r.oneOf(["small","medium","large"]),rounded:r.oneOf(["small","medium","large","none"]),fillMode:r.oneOf(["solid","flat","outline"])};const l={strokeWidth:1,smooth:!1,popupScale:ae,exportScale:re,maximizable:!0,disabled:!1,required:!1,validityStyles:!0,onChange:c=>a.noop,onFocus:c=>a.noop,onBlur:c=>a.noop,onOpen:c=>a.noop,onClose:c=>a.noop,size:void 0,rounded:void 0,fillMode:void 0};E.displayName="KendoSignature";exports.Signature=E;exports.SignaturePropsContext=se;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Oe=require("@progress/kendo-inputs-common"),_=require("@progress/kendo-react-buttons"),a=require("@progress/kendo-react-common"),Ee=require("@progress/kendo-react-dialogs"),xe=require("@progress/kendo-react-intl"),s=require("prop-types"),Me=require("react"),m=require("../messages/index.js"),ee=require("../package-metadata.js"),we=require("./utils/index.js"),N=require("@progress/kendo-svg-icons");function Ie(c){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const g in c)if(g!=="default"){const v=Object.getOwnPropertyDescriptor(c,g);Object.defineProperty(k,g,v.get?v:{enumerable:!0,get:()=>c[g]})}}return k.default=c,Object.freeze(k)}const n=Ie(Me),Le=250,Pe=84,ne=3,oe=2,Re="#000000",qe="#ffffff",te=c=>c!==void 0,ae=a.createPropsContext(),E=n.forwardRef((c,k)=>{const g=!a.validatePackage(ee.packageMetadata,{component:"Signature"}),v=a.getLicenseMessage(ee.packageMetadata),F=a.usePropsContext(ae,c),e=n.useMemo(()=>({strokeWidth:l.strokeWidth,smooth:l.smooth,popupScale:l.popupScale,exportScale:l.exportScale,maximizable:l.maximizable,disabled:l.disabled,required:l.required,validityStyles:l.validityStyles,onChange:l.onChange,onFocus:l.onFocus,onBlur:l.onBlur,onOpen:l.onOpen,onClose:l.onClose,size:l.size,rounded:l.rounded,fillMode:l.fillMode,...F}),[F]),x=xe.useLocalization(),p=n.useRef(null),y=n.useRef(null),j=n.useRef(null),W=n.useRef(null),M=n.useRef(null),[r,se]=n.useState(),[h,G]=n.useState(!1),[w,A]=n.useState(!1),[C,V]=n.useState(),[re,ie]=n.useState(),U=te(e.value)?e.value:C,[le,ce]=n.useState(!1),b=te(e.open),f=b?e.open:le,ue=e.maximized||w||!e.maximizable||e.disabled,de=!(e.maximized&&!w),pe=!(!(e.value||C)||w||e.readOnly||e.disabled),me=x.toLanguageString(m.signatureMaximize,m.messages[m.signatureMaximize]),ge=x.toLanguageString(m.signatureMinimize,m.messages[m.signatureMinimize]),fe=x.toLanguageString(m.signatureClear,m.messages[m.signatureClear]),I=e.popupScale||ne,L=e.exportScale||oe,P=t=>{V(t),e.onChange&&e.onChange({value:t})},ke=t=>{r==null||r.loadImage(t.value),P(t.value)};n.useEffect(()=>{e.value!==C&&(V(e.value),r==null||r.loadImage(e.value))},[e.value]);const be=()=>{r==null||r.clear(),P()},S=n.useCallback(t=>{b||ce(t)},[b]),ve=t=>{var o,i;Q(t),(i=((o=M.current)==null?void 0:o.element)||y.current)==null||i.focus()},R=n.useCallback(()=>{let t=Re;return!e.color&&typeof document!="undefined"&&p.current&&(t=getComputedStyle(p.current).color),e.color||t},[e.color]),q=n.useCallback(()=>{let t=qe;return!e.backgroundColor&&typeof document!="undefined"&&p.current&&(t=getComputedStyle(p.current).backgroundColor),e.backgroundColor||t},[e.backgroundColor]),H=()=>({scale:e.maximized?e.popupScale:1,color:R(),backgroundColor:q(),strokeWidth:e.strokeWidth,smooth:e.smooth,readonly:e.readOnly}),$=async t=>{const{width:o,height:i}=t;return await(r==null?void 0:r.exportImage({width:o*L,height:i*L}))};n.useEffect(()=>{const t=y.current,o=new Oe.SignaturePad(t,H());return U&&o.loadImage(U),se(o),()=>o.destroy()},[]),n.useEffect(()=>{r==null||r.setOptions({onChange:async()=>P(await $(Y())),onDraw:()=>A(!0),onDrawEnd:()=>A(!1)})},[r]),a.useIsomorphicLayoutEffect(()=>r==null?void 0:r.setOptions(H()),[e.readOnly,e.color,e.backgroundColor,e.strokeWidth,e.smooth]),n.useEffect(()=>{var i,d;const t=(d=(i=j.current)==null?void 0:i.element)==null?void 0:d.querySelector(".k-overlay");if(!t)return;const o=()=>S(!1);return t.addEventListener("click",o),()=>t.removeEventListener("click",o)},[f]),n.useEffect(()=>{if(!f||typeof document=="undefined")return;const t=o=>{var i,d;o.key==="Escape"&&(S(!1),(d=(i=M.current)==null?void 0:i.element)==null||d.focus())};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[f]),n.useEffect(()=>{var t,o;e.maximized&&((o=(t=W.current)==null?void 0:t.element)==null||o.focus())},[]);const D=n.useCallback(()=>{var t;return(t=y.current)==null?void 0:t.focus()},[]),z=n.useCallback(()=>e.value,[e.value]),K=n.useCallback(()=>e.name,[e.name]),O=n.useCallback(()=>e.required,[e.required]),T=n.useCallback(()=>{const t=e.validationMessage!==void 0,i=!z(),d=e.valid!==void 0?e.valid:!O()||!i;return{customError:t,valid:d,valueMissing:i}},[e.validationMessage,e.valid,z,O]),B=n.useCallback(()=>e.validityStyles,[e.validityStyles]),X=n.useCallback(()=>e,[e]),u=n.useCallback(()=>{const t={element:p.current,focus:D};return Object.defineProperty(t,"name",{get:K}),Object.defineProperty(t,"value",{get:z}),Object.defineProperty(t,"validity",{get:T}),Object.defineProperty(t,"validityStyles",{get:B}),Object.defineProperty(t,"required",{get:O}),Object.defineProperty(t,"props",{get:X}),Object.defineProperty(t,"color",{get:R}),Object.defineProperty(t,"backgroundColor",{get:q}),t},[K,z,T,B,O,D,X,R,q]);n.useImperativeHandle(k,u);const J=n.useRef(null);n.useImperativeHandle(J,u),a.useWebMcpRegister("signature",J,e,e.webMcp);const ye=n.useCallback(t=>{h||e.maximized||(G(!0),a.dispatchEvent(e.onFocus,t,u(),{}))},[h,e.onFocus,u]),he=n.useCallback(t=>{we.hasParent(t.relatedTarget,p.current)||(G(!1),a.dispatchEvent(e.onBlur,t,u(),{}))},[h,e.onBlur,u]),Ce=n.useCallback(async t=>{ie(await $(Z())),S(!0),a.dispatchEvent(e.onOpen,t,u(),{})},[f,b,e.onOpen,e.value,C,u]),Q=n.useCallback(t=>{S(!1),a.dispatchEvent(e.onClose,t,u(),{})},[f,b,e.onClose,u]),Se=()=>{be(),D()},Y=()=>{var i,d;const t=e.width||((i=p.current)==null?void 0:i.offsetWidth)||Le,o=e.height||((d=p.current)==null?void 0:d.offsetHeight)||Pe;return{width:t,height:o}},Z=()=>{const{width:t,height:o}=Y();return{width:t*I,height:o*I}},ze=!B()||T().valid;return n.createElement("div",{ref:p,dir:e.dir,style:{width:e.width,height:e.height,...e.style},className:a.classNames("k-input","k-signature",{"k-signature-maximized":e.maximized,[`k-signature-${a.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-signature-${e.fillMode}`]:e.fillMode,[`k-input-${e.fillMode}`]:e.fillMode,[`k-rounded-${a.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,"k-invalid":!ze,"k-required":e.required,"k-disabled":e.disabled,"k-focus":h},e.className),onFocus:ye,onBlur:he},n.createElement("div",{className:"k-signature-canvas",ref:y,role:"img",tabIndex:a.getTabIndex(e.tabIndex,e.disabled),id:e.id,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,style:e.inputStyle}),n.createElement("div",{className:"k-signature-actions k-signature-actions-top"},n.createElement(_.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-maximize",{"k-hidden":e.disabled||ue}),ref:M,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:Ce,title:me}),n.createElement(_.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-minimize",{"k-hidden":e.disabled||de}),ref:W,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:Q,title:ge})),!e.hideLine&&n.createElement("div",{className:"k-signature-line",style:{zIndex:2,pointerEvents:"none"}}),n.createElement("div",{className:"k-signature-actions k-signature-actions-bottom"},pe&&n.createElement(_.Button,{type:"button",className:"k-signature-action k-signature-clear",icon:"x",svgIcon:N.xIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:Se,title:fe})),f&&n.createElement(Ee.Dialog,{ref:j},n.createElement(E,{...e,...Z(),value:re,maximized:!0,exportScale:1/I*L,open:!1,onChange:ke,onClose:ve})),g&&n.createElement(a.WatermarkOverlay,{message:v}))});E.propTypes={value:s.string,width:s.number,height:s.number,tabIndex:s.number,dir:s.string,ariaDescribedBy:s.string,ariaLabelledBy:s.string,ariaLabel:s.string,readOnly:s.bool,disabled:s.bool,validationMessage:s.string,required:s.bool,onChange:s.func,onFocus:s.func,onBlur:s.func,onOpen:s.func,onClose:s.func,size:s.oneOf(["small","medium","large"]),rounded:s.oneOf(["small","medium","large","none"]),fillMode:s.oneOf(["solid","flat","outline"])};const l={strokeWidth:1,smooth:!1,popupScale:ne,exportScale:oe,maximizable:!0,disabled:!1,required:!1,validityStyles:!0,onChange:c=>a.noop,onFocus:c=>a.noop,onBlur:c=>a.noop,onOpen:c=>a.noop,onClose:c=>a.noop,size:void 0,rounded:void 0,fillMode:void 0};E.displayName="KendoSignature";exports.Signature=E;exports.SignaturePropsContext=ae;