@progress/kendo-react-inputs 15.2.0-develop.1 → 15.2.0-develop.3

package/signature/Signature.mjs

@@ -5,19 +5,19 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { SignaturePad as Me } from "@progress/kendo-inputs-common";
-import { Button as R } from "@progress/kendo-react-buttons";
-import { validatePackage as Le, getLicenseMessage as we, usePropsContext as Ie, noop as f, useIsomorphicLayoutEffect as Pe, useWebMcpRegister as Re, dispatchEvent as C, classNames as T, kendoThemeMaps as J, getTabIndex as Te, WatermarkOverlay as Be, createPropsContext as De } from "@progress/kendo-react-common";
-import { Dialog as Fe } from "@progress/kendo-react-dialogs";
-import { useLocalization as _e } from "@progress/kendo-react-intl";
+import { SignaturePad as we } from "@progress/kendo-inputs-common";
+import { Button as T } from "@progress/kendo-react-buttons";
+import { validatePackage as Ie, getLicenseMessage as Pe, usePropsContext as Re, noop as f, useIsomorphicLayoutEffect as Te, useWebMcpRegister as Be, dispatchEvent as S, classNames as B, kendoThemeMaps as Z, getTabIndex as De, WatermarkOverlay as Fe, createPropsContext as _e } from "@progress/kendo-react-common";
+import { Dialog as We } from "@progress/kendo-react-dialogs";
+import { useLocalization as Ne } from "@progress/kendo-react-intl";
 import a from "prop-types";
 import * as o from "react";
-import { signatureMaximize as Q, messages as B, signatureMinimize as Y, signatureClear as Z } from "../messages/index.mjs";
-import { packageMetadata as ee } from "../package-metadata.mjs";
-import { hasParent as We } from "./utils/index.mjs";
-import { hyperlinkOpenIcon as te, xIcon as Ne } from "@progress/kendo-svg-icons";
-const qe = 250, Ge = 84, ne = 3, ae = 2, Ae = "#000000", Ve = "#ffffff", oe = (d) => d !== void 0, je = De(), D = o.forwardRef((d, re) => {
-  const ie = !Le(ee, { component: "Signature" }), se = we(ee), F = Ie(je, d), e = o.useMemo(
+import { signatureMaximize as ee, messages as z, signatureMinimize as te, signatureClear as oe, signatureCanvas as ne } from "../messages/index.mjs";
+import { packageMetadata as ae } from "../package-metadata.mjs";
+import { hasParent as qe } from "./utils/index.mjs";
+import { hyperlinkOpenIcon as re, xIcon as Ge } from "@progress/kendo-svg-icons";
+const Ae = 250, Ve = 84, se = 3, le = 2, je = "#000000", Ue = "#ffffff", ie = (d) => d !== void 0, He = _e(), D = o.forwardRef((d, ce) => {
+  const ue = !Ie(ae, { component: "Signature" }), de = Pe(ae), F = Re(He, d), e = o.useMemo(
     () => ({
       strokeWidth: s.strokeWidth,
       smooth: s.smooth,
@@ -38,240 +38,243 @@ const qe = 250, Ge = 84, ne = 3, ae = 2, Ae = "#000000", Ve = "#ffffff", oe = (d
       ...F
     }),
     [F]
-  ), z = _e(), u = o.useRef(null), g = o.useRef(null), _ = o.useRef(null), W = o.useRef(null), S = o.useRef(null), [r, le] = o.useState(), [k, N] = o.useState(!1), [b, q] = o.useState(), [ce, ue] = o.useState(), G = oe(e.value) ? e.value : b, [de, me] = o.useState(!1), p = oe(e.open), m = p ? e.open : de, pe = e.disabled || e.maximized || !e.maximizable, fe = e.disabled || !e.maximized, ge = !(!(e.value || b) || e.disabled || e.readOnly), ke = z.toLanguageString(Q, B[Q]), be = z.toLanguageString(Y, B[Y]), ve = z.toLanguageString(Z, B[Z]), E = e.popupScale || ne, O = e.exportScale || ae, x = (t) => {
+  ), g = Ne(), u = o.useRef(null), b = o.useRef(null), _ = o.useRef(null), W = o.useRef(null), E = o.useRef(null), [r, me] = o.useState(), [k, N] = o.useState(!1), [v, q] = o.useState(), [pe, fe] = o.useState(), G = ie(e.value) ? e.value : v, [ge, be] = o.useState(!1), p = ie(e.open), m = p ? e.open : ge, ke = e.disabled || e.maximized || !e.maximizable, ve = e.disabled || !e.maximized, ye = !(!(e.value || v) || e.disabled || e.readOnly), A = g.toLanguageString(ee, z[ee]), V = g.toLanguageString(te, z[te]), j = g.toLanguageString(oe, z[oe]), Ce = g.toLanguageString(ne, z[ne]), O = e.popupScale || se, x = e.exportScale || le, M = (t) => {
     q(t), e.onChange && e.onChange({ value: t });
-  }, ye = (t) => {
-    r == null || r.loadImage(t.value), x(t.value);
+  }, he = (t) => {
+    r == null || r.loadImage(t.value), M(t.value);
   };
   o.useEffect(() => {
-    e.value !== b && (q(e.value), r == null || r.loadImage(e.value));
+    e.value !== v && (q(e.value), r == null || r.loadImage(e.value));
   }, [e.value]);
-  const he = () => {
-    r == null || r.clear(), x();
-  }, v = o.useCallback(
+  const Se = () => {
+    r == null || r.clear(), M();
+  }, y = o.useCallback(
     (t) => {
-      p || me(t);
+      p || be(t);
     },
     [p]
-  ), Ce = (t) => {
+  ), ze = (t) => {
     var n, i;
-    $(t), (i = ((n = S.current) == null ? void 0 : n.element) || g.current) == null || i.focus();
-  }, M = o.useCallback(() => {
-    let t = Ae;
+    J(t), (i = ((n = E.current) == null ? void 0 : n.element) || b.current) == null || i.focus();
+  }, L = o.useCallback(() => {
+    let t = je;
     return !e.color && typeof document != "undefined" && u.current && (t = getComputedStyle(u.current).color), e.color || t;
-  }, [e.color]), L = o.useCallback(() => {
-    let t = Ve;
+  }, [e.color]), w = o.useCallback(() => {
+    let t = Ue;
     return !e.backgroundColor && typeof document != "undefined" && u.current && (t = getComputedStyle(u.current).backgroundColor), e.backgroundColor || t;
-  }, [e.backgroundColor]), A = () => ({
+  }, [e.backgroundColor]), U = () => ({
     scale: e.maximized ? e.popupScale : 1,
-    color: M(),
-    backgroundColor: L(),
+    color: L(),
+    backgroundColor: w(),
     strokeWidth: e.strokeWidth,
     smooth: e.smooth,
     readonly: e.readOnly || e.disabled
-  }), V = async (t) => {
+  }), H = async (t) => {
     const { width: n, height: i } = t;
     return await (r == null ? void 0 : r.exportImage({
-      width: n * O,
-      height: i * O
+      width: n * x,
+      height: i * x
     }));
   };
   o.useEffect(() => {
-    const t = g.current, n = new Me(t, A());
-    return G && n.loadImage(G), le(n), () => n.destroy();
+    const t = b.current, n = new we(t, U());
+    return G && n.loadImage(G), me(n), () => n.destroy();
   }, []), o.useEffect(() => {
     r == null || r.setOptions({
-      onChange: async () => x(await V(K()))
+      onChange: async () => M(await H(Q()))
     });
-  }, [r]), Pe(
-    () => r == null ? void 0 : r.setOptions(A()),
+  }, [r]), Te(
+    () => r == null ? void 0 : r.setOptions(U()),
     [e.readOnly, e.disabled, e.color, e.backgroundColor, e.strokeWidth, e.smooth]
   ), o.useEffect(() => {
     var i, c;
     const t = (c = (i = _.current) == null ? void 0 : i.element) == null ? void 0 : c.querySelector(".k-overlay");
     if (!t)
       return;
-    const n = () => v(!1);
+    const n = () => y(!1);
     return t.addEventListener("click", n), () => t.removeEventListener("click", n);
   }, [m]), o.useEffect(() => {
     if (!m || typeof document == "undefined")
       return;
     const t = (n) => {
       var i, c;
-      n.key === "Escape" && (v(!1), (c = (i = S.current) == null ? void 0 : i.element) == null || c.focus());
+      n.key === "Escape" && (y(!1), (c = (i = E.current) == null ? void 0 : i.element) == null || c.focus());
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
   }, [m]), o.useEffect(() => {
     var t, n;
     e.maximized && ((n = (t = W.current) == null ? void 0 : t.element) == null || n.focus());
   }, []);
-  const w = o.useCallback(() => {
+  const I = o.useCallback(() => {
     var t;
-    return (t = g.current) == null ? void 0 : t.focus();
-  }, []), y = o.useCallback(() => e.value, [e.value]), j = o.useCallback(() => e.name, [e.name]), h = o.useCallback(() => e.required, [e.required]), I = o.useCallback(() => {
-    const t = e.validationMessage !== void 0, i = !y(), c = e.valid !== void 0 ? e.valid : !h() || !i;
+    return (t = b.current) == null ? void 0 : t.focus();
+  }, []), C = o.useCallback(() => e.value, [e.value]), $ = o.useCallback(() => e.name, [e.name]), h = o.useCallback(() => e.required, [e.required]), P = o.useCallback(() => {
+    const t = e.validationMessage !== void 0, i = !C(), c = e.valid !== void 0 ? e.valid : !h() || !i;
     return {
       customError: t,
       valid: c,
       valueMissing: i
     };
-  }, [e.validationMessage, e.valid, y, h]), P = o.useCallback(() => e.validityStyles, [e.validityStyles]), U = o.useCallback(() => e, [e]), l = o.useCallback(() => {
+  }, [e.validationMessage, e.valid, C, h]), R = o.useCallback(() => e.validityStyles, [e.validityStyles]), K = o.useCallback(() => e, [e]), l = o.useCallback(() => {
     const t = {
       element: u.current,
-      focus: w
+      focus: I
     };
-    return Object.defineProperty(t, "name", { get: j }), Object.defineProperty(t, "value", { get: y }), Object.defineProperty(t, "validity", { get: I }), Object.defineProperty(t, "validityStyles", { get: P }), Object.defineProperty(t, "required", { get: h }), Object.defineProperty(t, "props", { get: U }), Object.defineProperty(t, "color", { get: M }), Object.defineProperty(t, "backgroundColor", { get: L }), t;
+    return Object.defineProperty(t, "name", { get: $ }), Object.defineProperty(t, "value", { get: C }), Object.defineProperty(t, "validity", { get: P }), Object.defineProperty(t, "validityStyles", { get: R }), Object.defineProperty(t, "required", { get: h }), Object.defineProperty(t, "props", { get: K }), Object.defineProperty(t, "color", { get: L }), Object.defineProperty(t, "backgroundColor", { get: w }), t;
   }, [
-    j,
-    y,
-    I,
+    $,
+    C,
     P,
+    R,
     h,
-    w,
-    U,
-    M,
-    L
+    I,
+    K,
+    L,
+    w
   ]);
-  o.useImperativeHandle(re, l);
-  const H = o.useRef(null);
-  o.useImperativeHandle(H, l), Re("signature", H, e, e.webMcp);
-  const ze = o.useCallback(
+  o.useImperativeHandle(ce, l);
+  const X = o.useRef(null);
+  o.useImperativeHandle(X, l), Be("signature", X, e, e.webMcp);
+  const Ee = o.useCallback(
     (t) => {
-      k || e.maximized || (N(!0), C(e.onFocus, t, l(), {}));
+      k || e.maximized || (N(!0), S(e.onFocus, t, l(), {}));
     },
     [k, e.onFocus, l]
-  ), Se = o.useCallback(
+  ), Oe = o.useCallback(
     (t) => {
-      We(t.relatedTarget, u.current) || (N(!1), C(e.onBlur, t, l(), {}));
+      qe(t.relatedTarget, u.current) || (N(!1), S(e.onBlur, t, l(), {}));
     },
     [k, e.onBlur, l]
-  ), Ee = o.useCallback(
+  ), xe = o.useCallback(
     async (t) => {
-      ue(await V(X())), v(!0), C(e.onOpen, t, l(), {});
+      fe(await H(Y())), y(!0), S(e.onOpen, t, l(), {});
     },
-    [m, p, e.onOpen, e.value, b, l]
-  ), $ = o.useCallback(
+    [m, p, e.onOpen, e.value, v, l]
+  ), J = o.useCallback(
     (t) => {
-      v(!1), C(e.onClose, t, l(), {});
+      y(!1), S(e.onClose, t, l(), {});
     },
     [m, p, e.onClose, l]
-  ), Oe = () => {
-    he(), w();
-  }, K = () => {
+  ), Me = () => {
+    Se(), I();
+  }, Q = () => {
     var i, c;
-    const t = e.width || ((i = u.current) == null ? void 0 : i.offsetWidth) || qe, n = e.height || ((c = u.current) == null ? void 0 : c.offsetHeight) || Ge;
+    const t = e.width || ((i = u.current) == null ? void 0 : i.offsetWidth) || Ae, n = e.height || ((c = u.current) == null ? void 0 : c.offsetHeight) || Ve;
     return {
       width: t,
       height: n
     };
-  }, X = () => {
-    const { width: t, height: n } = K();
+  }, Y = () => {
+    const { width: t, height: n } = Q();
     return {
-      width: t * E,
-      height: n * E
+      width: t * O,
+      height: n * O
     };
-  }, xe = !P() || I().valid;
+  }, Le = !R() || P().valid;
   return /* @__PURE__ */ o.createElement(
     "div",
     {
       ref: u,
       dir: e.dir,
       style: { width: e.width, height: e.height, ...e.style },
-      className: T(
+      className: B(
         "k-input",
         "k-signature",
         {
           "k-signature-maximized": e.maximized,
-          [`k-signature-${J.sizeMap[e.size] || e.size}`]: e.size,
+          [`k-signature-${Z.sizeMap[e.size] || e.size}`]: e.size,
           [`k-signature-${e.fillMode}`]: e.fillMode,
           [`k-input-${e.fillMode}`]: e.fillMode,
-          [`k-rounded-${J.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
-          "k-invalid": !xe,
+          [`k-rounded-${Z.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
+          "k-invalid": !Le,
           "k-required": e.required,
           "k-disabled": e.disabled,
           "k-focus": k
         },
         e.className
       ),
-      onFocus: ze,
-      onBlur: Se
+      onFocus: Ee,
+      onBlur: Oe
     },
     /* @__PURE__ */ o.createElement(
       "div",
       {
         className: "k-signature-canvas",
-        ref: g,
+        ref: b,
         role: "img",
-        tabIndex: Te(e.tabIndex, e.disabled),
+        tabIndex: De(e.tabIndex, e.disabled),
         id: e.id,
-        "aria-label": e.ariaLabel,
+        "aria-label": e.ariaLabel || Ce,
         "aria-labelledby": e.ariaLabelledBy,
         "aria-describedby": e.ariaDescribedBy,
         style: e.inputStyle
       }
     ),
     /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-top" }, /* @__PURE__ */ o.createElement(
-      R,
+      T,
       {
         type: "button",
-        className: T("k-signature-action", "k-signature-maximize", {
-          "k-hidden": pe
+        className: B("k-signature-action", "k-signature-maximize", {
+          "k-hidden": ke
         }),
-        ref: S,
+        ref: E,
         icon: "hyperlink-open",
-        svgIcon: te,
+        svgIcon: re,
         size: e.size,
         rounded: e.rounded,
         fillMode: "flat",
-        onClick: Ee,
-        title: ke
+        onClick: xe,
+        "aria-label": A,
+        title: A
       }
     ), /* @__PURE__ */ o.createElement(
-      R,
+      T,
       {
         type: "button",
-        className: T("k-signature-action", "k-signature-minimize k-flip-h k-flip-v", {
-          "k-hidden": fe
+        className: B("k-signature-action", "k-signature-minimize k-flip-h k-flip-v", {
+          "k-hidden": ve
         }),
         ref: W,
         icon: "hyperlink-open",
-        svgIcon: te,
+        svgIcon: re,
         size: e.size,
         rounded: e.rounded,
         fillMode: "flat",
-        onClick: $,
-        title: be
+        onClick: J,
+        "aria-label": V,
+        title: V
       }
     )),
     !e.hideLine && /* @__PURE__ */ o.createElement("div", { className: "k-signature-line", style: { zIndex: 2, pointerEvents: "none" } }),
-    /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, ge && /* @__PURE__ */ o.createElement(
-      R,
+    /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, ye && /* @__PURE__ */ o.createElement(
+      T,
       {
         type: "button",
         className: "k-signature-action k-signature-clear",
         icon: "x",
-        svgIcon: Ne,
+        svgIcon: Ge,
         size: e.size,
         rounded: e.rounded,
         fillMode: "flat",
-        onClick: Oe,
-        title: ve
+        onClick: Me,
+        "aria-label": j,
+        title: j
       }
     )),
-    m && /* @__PURE__ */ o.createElement(Fe, { ref: _ }, /* @__PURE__ */ o.createElement(
+    m && /* @__PURE__ */ o.createElement(We, { ref: _ }, /* @__PURE__ */ o.createElement(
       D,
       {
         ...e,
-        ...X(),
-        value: ce,
+        ...Y(),
+        value: pe,
         maximized: !0,
-        exportScale: 1 / E * O,
+        exportScale: 1 / O * x,
         open: !1,
-        onChange: ye,
-        onClose: Ce
+        onChange: he,
+        onClose: ze
       }
     )),
-    ie && /* @__PURE__ */ o.createElement(Be, { message: se })
+    ue && /* @__PURE__ */ o.createElement(Fe, { message: de })
   );
 });
 D.propTypes = {
@@ -299,8 +302,8 @@ D.propTypes = {
 const s = {
   strokeWidth: 1,
   smooth: !1,
-  popupScale: ne,
-  exportScale: ae,
+  popupScale: se,
+  exportScale: le,
   maximizable: !0,
   disabled: !1,
   required: !1,
@@ -317,5 +320,5 @@ const s = {
 D.displayName = "KendoSignature";
 export {
   D as Signature,
-  je as SignaturePropsContext
+  He as SignaturePropsContext
 };

package/slider/Slider.d.ts

@@ -133,6 +133,18 @@ export interface SliderProps extends FormComponentProps {
      * ```
      */
     disabled?: boolean;
+    /**
+     * Makes the Slider read-only when set to `true`. The Slider will remain focusable but its value cannot be changed by the user.
+     *
+     * @remarks
+     * This property is related to accessibility.
+     *
+     * @example
+     * ```jsx
+     * <Slider readOnly={true} min={0} max={100} />
+     * ```
+     */
+    readOnly?: boolean;
     /**
      * Changes the orientation of the Slider to vertical if set to `true`.
      *

package/slider/Slider.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),i=require("prop-types"),c=require("@progress/kendo-react-common"),F=require("@progress/kendo-react-intl"),m=require("../messages/index.js"),ae=require("./SliderLabel.js"),j=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons");function le(e){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const b=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(k,o,b.get?b:{enumerable:!0,get:()=>e[o]})}}return k.default=e,Object.freeze(k)}const r=le(a),h={step:1,largeStep:10,buttons:!1,vertical:!1,disabled:!1,tabIndex:0},R=r.forwardRef((e,k)=>{var M,A,O;const{step:o=h.step,largeStep:b=h.largeStep,vertical:l=h.vertical,disabled:u=h.disabled,tabIndex:P=h.tabIndex}=e,[U,W]=a.useState((M=e.defaultValue)!=null?M:e.min),[H,q]=a.useState(!1),[E,X]=a.useState(e.dir),L=a.useRef(null),y=a.useRef(null),N=a.useMemo(()=>new F.LocalizationService,[]),B=a.useRef(null),V=e.value!==void 0,I=V&&e.value!==void 0?e.value:U,s=a.useMemo(()=>I<e.min?e.min:I>e.max?e.max:I,[I,e.min,e.max]),C=a.useMemo(()=>{const t=e.max-e.min;return t===0?0:(s-e.min)/t*100},[s,e.min,e.max]),v=(A=e.dir)!=null?A:E;a.useEffect(()=>{if(e.dir===void 0&&y.current){const n=window.getComputedStyle(y.current).direction;n!==E&&X(n)}},[e.dir,E]);const K=a.useCallback(t=>{let n=t;for(;n;){if(n.getAttribute(ae.SLIDER_LABEL_ATTRIBUTE))return!0;n=n.parentElement}return!1},[]),g=a.useCallback((t,n)=>{const d=Math.min(Math.max(n,e.min),e.max);V||W(d),c.dispatchEvent(e.onChange,t,B.current,{value:d})},[e.min,e.max,e.onChange,V]),G=a.useCallback(()=>{q(!0)},[]),Y=a.useCallback(()=>{q(!1)},[]),J=a.useCallback(t=>{if(u)return;let n;t.keyCode===c.Keys.left||t.keyCode===c.Keys.down?n=s-(o||0):t.keyCode===c.Keys.right||t.keyCode===c.Keys.up?n=s+(o||0):t.keyCode===c.Keys.pageDown?n=s-(b||0):t.keyCode===c.Keys.pageUp?n=s+(b||0):t.keyCode===c.Keys.home?n=e.min:t.keyCode===c.Keys.end&&(n=e.max),n!==void 0&&(t.preventDefault(),g(t,n))},[s,o,b,e.min,e.max,g,u]),Q=a.useCallback(t=>{t.preventDefault(),!u&&g(t,s-(o||0))},[s,o,g,u]),Z=a.useCallback(t=>{t.preventDefault(),!u&&g(t,s+(o||0))},[s,o,g,u]),w=a.useCallback(t=>{const n=t.element.getBoundingClientRect();let d;l?d=n.bottom-t.event.clientY:d=v==="rtl"?n.right-t.event.clientX:t.event.clientX-n.left;const S=l?n.height:n.width,x=d/S;g(t,e.min+x*(e.max-e.min))},[l,e.min,e.max,v,g]),$=a.useCallback(t=>{K(t.event.originalEvent.target)||(t.event.isTouch&&t.event.originalEvent.preventDefault(),w(t))},[K,w]),p=a.useCallback(t=>{t.event.originalEvent.preventDefault(),w(t)},[w]),D=a.useCallback(()=>{y.current&&y.current.focus()},[]),ee=a.useCallback(t=>{if(!t.enabled)return t.children;let n,d,S,x;return v==="rtl"?(n=l?f.chevronUpIcon:f.chevronLeftIcon,d=l?f.chevronDownIcon:f.chevronRightIcon,S=l?"chevron-up":"chevron-left",x=l?"chevron-down":"chevron-right"):(n=l?f.chevronUpIcon:f.chevronRightIcon,d=l?f.chevronDownIcon:f.chevronLeftIcon,S=l?"chevron-up":"chevron-right",x=l?"chevron-down":"chevron-left"),r.createElement(r.Fragment,null,r.createElement(j.Button,{className:"k-button-decrease",rounded:"full",icon:x,svgIcon:d,title:t.decrementTitle,onClick:t.decrement}),t.children,r.createElement(j.Button,{className:"k-button-increase",rounded:"full",icon:S,svgIcon:n,title:t.incrementTitle,onClick:t.increment}))},[v,l]);a.useImperativeHandle(k,()=>({props:e,sliderTrack:L.current,focus:D}),[e,D]),c.useWebMcpRegister("slider",B,e,e.webMcp),a.useEffect(()=>{B.current={props:e,sliderTrack:L.current,focus:D}},[e,D]);const te=l?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},ne=l?{paddingTop:0,height:"100%"}:{};let T;return l?T={bottom:"calc("+C+"%)",zIndex:1}:v==="rtl"?T={right:"calc("+C+"%)",zIndex:1}:T={left:"calc("+C+"%)",zIndex:1},r.createElement("div",{ref:y,dir:v,id:e.id,"aria-label":e.ariaLabel,style:{gap:0,...e.style},onFocus:G,onBlur:Y,onKeyDown:J,className:c.classNames("k-slider",{"k-focus":H,"k-disabled":u,"k-slider-horizontal":!l,"k-slider-vertical":l},e.className)},ee({enabled:(O=e.buttons)!=null?O:h.buttons,decrement:Q,increment:Z,incrementTitle:N.toLanguageString(m.sliderIncreaseValue,m.messages[m.sliderIncreaseValue]),decrementTitle:N.toLanguageString(m.sliderDecreaseValue,m.messages[m.sliderDecreaseValue]),children:r.createElement(c.Draggable,{onDrag:p,onPress:$,autoScroll:!1},r.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...te}},e.children&&r.createElement("ul",{className:"k-reset k-slider-items","aria-hidden":"true",style:{margin:0,...ne}},r.Children.map(e.children,(t,n)=>t&&r.cloneElement(t,{position:100*(t.props.position-e.min)/(e.max-e.min),vertical:l,firstTick:n===0,lastTick:n===r.Children.count(e.children)-1},t.props.children))),r.createElement("div",{className:"k-slider-track",style:l?{bottom:0,height:"100%"}:{[v==="rtl"?"right":"left"]:0,width:"100%"},ref:L},r.createElement("div",{className:"k-slider-selection",style:l?{height:C+"%"}:{width:C+"%"}}),r.createElement("span",{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":s,"aria-orientation":l?"vertical":void 0,"aria-disabled":u?"true":void 0,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,"aria-label":e.ariaLabel,tabIndex:c.getTabIndex(P,u,void 0),className:"k-draghandle k-draghandle-end",title:N.toLanguageString(m.sliderDragTitle,m.messages[m.sliderDragTitle]),style:T}))))}))});R.displayName="Slider";const _=c.createPropsContext(),z=c.withPropsContext(_,R);z.displayName="KendoReactSlider";z.propTypes={value:i.number,defaultValue:i.number,min:i.number.isRequired,max:i.number.isRequired,step:i.number,largeStep:i.number,onChange:i.func,style:i.object,className:i.string,buttons:i.bool,tabIndex:i.number,disabled:i.bool,vertical:i.bool,id:i.string,ariaDescribedBy:i.string,ariaLabelledBy:i.string,ariaLabel:i.string,dir:i.oneOf(["ltr","rtl"]),children:i.node};F.registerForLocalization(R);exports.Slider=z;exports.SliderPropsContext=_;exports.SliderWithoutContext=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),i=require("prop-types"),c=require("@progress/kendo-react-common"),_=require("@progress/kendo-react-intl"),m=require("../messages/index.js"),le=require("./SliderLabel.js"),F=require("@progress/kendo-react-buttons"),g=require("@progress/kendo-svg-icons");function ie(e){const y=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const h=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(y,o,h.get?h:{enumerable:!0,get:()=>e[o]})}}return y.default=e,Object.freeze(y)}const r=ie(a),b={step:1,largeStep:10,buttons:!1,vertical:!1,disabled:!1,readOnly:!1,tabIndex:0},R=r.forwardRef((e,y)=>{var M,A,j;const{step:o=b.step,largeStep:h=b.largeStep,vertical:l=b.vertical,disabled:u=b.disabled,tabIndex:U=b.tabIndex,readOnly:z=b.readOnly}=e,[W,H]=a.useState((M=e.defaultValue)!=null?M:e.min),[X,q]=a.useState(!1),[E,G]=a.useState(e.dir),L=a.useRef(null),k=a.useRef(null),N=a.useMemo(()=>new _.LocalizationService,[]),B=a.useRef(null),O=e.value!==void 0,I=O&&e.value!==void 0?e.value:W,s=a.useMemo(()=>I<e.min?e.min:I>e.max?e.max:I,[I,e.min,e.max]),C=a.useMemo(()=>{const t=e.max-e.min;return t===0?0:(s-e.min)/t*100},[s,e.min,e.max]),v=(A=e.dir)!=null?A:E;a.useEffect(()=>{if(e.dir===void 0&&k.current){const n=window.getComputedStyle(k.current).direction;n!==E&&G(n)}},[e.dir,E]);const K=a.useCallback(t=>{let n=t;for(;n;){if(n.getAttribute(le.SLIDER_LABEL_ATTRIBUTE))return!0;n=n.parentElement}return!1},[]),f=a.useCallback((t,n)=>{const d=Math.min(Math.max(n,e.min),e.max);O||H(d),c.dispatchEvent(e.onChange,t,B.current,{value:d})},[e.min,e.max,e.onChange,O]),Y=a.useCallback(()=>{q(!0)},[]),J=a.useCallback(()=>{q(!1)},[]),Q=a.useCallback(t=>{if(u)return;let n;t.keyCode===c.Keys.left||t.keyCode===c.Keys.down?n=s-(o||0):t.keyCode===c.Keys.right||t.keyCode===c.Keys.up?n=s+(o||0):t.keyCode===c.Keys.pageDown?n=s-(h||0):t.keyCode===c.Keys.pageUp?n=s+(h||0):t.keyCode===c.Keys.home?n=e.min:t.keyCode===c.Keys.end&&(n=e.max),n!==void 0&&(t.preventDefault(),f(t,n))},[s,o,h,e.min,e.max,f,u]),Z=a.useCallback(t=>{t.preventDefault(),!u&&f(t,s-(o||0))},[s,o,f,u]),$=a.useCallback(t=>{t.preventDefault(),!u&&f(t,s+(o||0))},[s,o,f,u]),w=a.useCallback(t=>{const n=t.element.getBoundingClientRect();let d;l?d=n.bottom-t.event.clientY:d=v==="rtl"?n.right-t.event.clientX:t.event.clientX-n.left;const S=l?n.height:n.width,x=d/S;f(t,e.min+x*(e.max-e.min))},[l,e.min,e.max,v,f]),p=a.useCallback(t=>{K(t.event.originalEvent.target)||(t.event.isTouch&&t.event.originalEvent.preventDefault(),w(t))},[K,w]),ee=a.useCallback(t=>{t.event.originalEvent.preventDefault(),w(t)},[w]),D=a.useCallback(()=>{k.current&&k.current.focus()},[]),te=a.useCallback(t=>{if(!t.enabled)return t.children;let n,d,S,x;return v==="rtl"?(n=l?g.chevronUpIcon:g.chevronLeftIcon,d=l?g.chevronDownIcon:g.chevronRightIcon,S=l?"chevron-up":"chevron-left",x=l?"chevron-down":"chevron-right"):(n=l?g.chevronUpIcon:g.chevronRightIcon,d=l?g.chevronDownIcon:g.chevronLeftIcon,S=l?"chevron-up":"chevron-right",x=l?"chevron-down":"chevron-left"),r.createElement(r.Fragment,null,r.createElement(F.Button,{className:"k-button-decrease",rounded:"full",icon:x,svgIcon:d,title:t.decrementTitle,onClick:t.decrement}),t.children,r.createElement(F.Button,{className:"k-button-increase",rounded:"full",icon:S,svgIcon:n,title:t.incrementTitle,onClick:t.increment}))},[v,l]);a.useImperativeHandle(y,()=>({props:e,sliderTrack:L.current,focus:D}),[e,D]),c.useWebMcpRegister("slider",B,e,e.webMcp),a.useEffect(()=>{B.current={props:e,sliderTrack:L.current,focus:D}},[e,D]);const ne=l?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},ae=l?{paddingTop:0,height:"100%"}:{};let T;return l?T={bottom:"calc("+C+"%)",zIndex:1}:v==="rtl"?T={right:"calc("+C+"%)",zIndex:1}:T={left:"calc("+C+"%)",zIndex:1},r.createElement("div",{ref:k,dir:v,id:e.id,"aria-label":e.ariaLabel,style:{gap:0,...e.style},onFocus:Y,onBlur:J,onKeyDown:Q,className:c.classNames("k-slider",{"k-focus":X,"k-disabled":u,"k-readonly":z,"k-slider-horizontal":!l,"k-slider-vertical":l},e.className)},te({enabled:(j=e.buttons)!=null?j:b.buttons,decrement:Z,increment:$,incrementTitle:N.toLanguageString(m.sliderIncreaseValue,m.messages[m.sliderIncreaseValue]),decrementTitle:N.toLanguageString(m.sliderDecreaseValue,m.messages[m.sliderDecreaseValue]),children:r.createElement(c.Draggable,{onDrag:ee,onPress:p,autoScroll:!1},r.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...ne}},e.children&&r.createElement("ul",{className:"k-reset k-slider-items","aria-hidden":"true",style:{margin:0,...ae}},r.Children.map(e.children,(t,n)=>t&&r.cloneElement(t,{position:100*(t.props.position-e.min)/(e.max-e.min),vertical:l,firstTick:n===0,lastTick:n===r.Children.count(e.children)-1},t.props.children))),r.createElement("div",{className:"k-slider-track",style:l?{bottom:0,height:"100%"}:{[v==="rtl"?"right":"left"]:0,width:"100%"},ref:L},r.createElement("div",{className:"k-slider-selection",style:l?{height:C+"%"}:{width:C+"%"}}),r.createElement("span",{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":s,"aria-orientation":l?"vertical":void 0,"aria-disabled":u?"true":void 0,"aria-readonly":z?"true":void 0,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,"aria-label":e.ariaLabel,tabIndex:c.getTabIndex(U,u,void 0),className:"k-draghandle k-draghandle-end",title:N.toLanguageString(m.sliderDragTitle,m.messages[m.sliderDragTitle]),style:T}))))}))});R.displayName="Slider";const P=c.createPropsContext(),V=c.withPropsContext(P,R);V.displayName="KendoReactSlider";V.propTypes={value:i.number,defaultValue:i.number,min:i.number.isRequired,max:i.number.isRequired,step:i.number,largeStep:i.number,onChange:i.func,style:i.object,className:i.string,buttons:i.bool,tabIndex:i.number,disabled:i.bool,readOnly:i.bool,vertical:i.bool,id:i.string,ariaDescribedBy:i.string,ariaLabelledBy:i.string,ariaLabel:i.string,dir:i.oneOf(["ltr","rtl"]),children:i.node};_.registerForLocalization(R);exports.Slider=V;exports.SliderPropsContext=P;exports.SliderWithoutContext=R;