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

package/signature/Signature.mjs

@@ -0,0 +1,335 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import { SignaturePad as ze } from "@progress/kendo-inputs-common";
+import { Button as D } from "@progress/kendo-react-buttons";
+import { createPropsContext as Ee, validatePackage as Se, usePropsContext as Oe, useIsomorphicLayoutEffect as xe, dispatchEvent as C, classNames as we, kendoThemeMaps as Q, getTabIndex as Le, noop as f, Keys as Ie } from "@progress/kendo-react-common";
+import { Dialog as Me } from "@progress/kendo-react-dialogs";
+import { useLocalization as Pe } from "@progress/kendo-react-intl";
+import a from "prop-types";
+import * as o from "react";
+import { signatureMaximize as Y, messages as T, signatureMinimize as Z, signatureClear as ee } from "../messages/index.mjs";
+import { packageMetadata as De } from "../package-metadata.mjs";
+import { hasParent as Te } from "./utils/index.mjs";
+import { hyperlinkOpenIcon as te, xIcon as Re } from "@progress/kendo-svg-icons";
+const Be = 250, _e = 84, ne = 3, ae = 2, Fe = "#000000", Ne = "#ffffff", oe = (c) => c !== void 0, Ge = Ee(), h = o.forwardRef((c, re) => {
+  Se(De);
+  const e = Oe(Ge, c), z = Pe(), s = o.useRef(null), p = o.useRef(null), R = o.useRef(null), B = o.useRef(null), _ = o.useRef(null), [r, ie] = o.useState(), [g, F] = o.useState(!1), [E, N] = o.useState(!1), [b, G] = o.useState(), [se, le] = o.useState(), q = oe(e.value) ? e.value : b, [ce, ue] = o.useState(!1), m = oe(e.open), d = m ? e.open : ce, de = !(e.maximized || E || !e.maximizable || e.disabled), me = e.maximized && !E, fe = !(!(e.value || b) || E || e.readOnly || e.disabled), A = z.toLanguageString(Y, T[Y]), V = z.toLanguageString(Z, T[Z]), j = z.toLanguageString(ee, T[ee]), S = e.popupScale || ne, O = e.exportScale || ae, x = (t) => {
+    G(t), e.onChange && e.onChange({ value: t });
+  }, pe = (t) => {
+    r == null || r.loadImage(t.value), x(t.value);
+  };
+  o.useEffect(() => {
+    e.value !== b && (G(e.value), r == null || r.loadImage(e.value));
+  }, [e.value]);
+  const ge = () => {
+    r == null || r.clear(), x();
+  }, k = o.useCallback(
+    (t) => {
+      m || ue(t);
+    },
+    [m]
+  ), be = (t) => {
+    var n, i;
+    $(t), (i = ((n = _.current) == null ? void 0 : n.element) || p.current) == null || i.focus();
+  }, w = o.useCallback(() => {
+    let t = Fe;
+    return !e.color && typeof document != "undefined" && s.current && (t = getComputedStyle(s.current).color), e.color || t;
+  }, [e.color]), L = o.useCallback(() => {
+    let t = Ne;
+    return !e.backgroundColor && typeof document != "undefined" && s.current && (t = getComputedStyle(s.current).backgroundColor), e.backgroundColor || t;
+  }, [e.backgroundColor]), U = () => ({
+    scale: e.maximized ? e.popupScale : 1,
+    color: w(),
+    backgroundColor: L(),
+    strokeWidth: e.strokeWidth,
+    smooth: e.smooth,
+    readonly: e.readOnly
+  }), W = async (t) => {
+    const { width: n, height: i } = t;
+    return await (r == null ? void 0 : r.exportImage({
+      width: n * O,
+      height: i * O
+    }));
+  };
+  o.useEffect(() => {
+    const t = p.current, n = new ze(t, U());
+    return q && n.loadImage(q), ie(n), () => n.destroy();
+  }, []), o.useEffect(() => {
+    r == null || r.setOptions({
+      onChange: async () => x(await W(X())),
+      onDraw: () => N(!0),
+      onDrawEnd: () => N(!1)
+    });
+  }, [r]), xe(
+    () => r == null ? void 0 : r.setOptions(U()),
+    [e.readOnly, e.color, e.backgroundColor, e.strokeWidth, e.smooth]
+  ), o.useEffect(() => {
+    var i, u;
+    const t = (u = (i = R.current) == null ? void 0 : i.element) == null ? void 0 : u.querySelector(".k-overlay");
+    if (!t)
+      return;
+    const n = () => k(!1);
+    return t.addEventListener("click", n), () => t.removeEventListener("click", n);
+  }, [d]), o.useEffect(() => {
+    if (!d || typeof document == "undefined")
+      return;
+    const t = (n) => {
+      n.keyCode === Ie.esc && k(!1);
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [d]), o.useEffect(() => {
+    var t, n;
+    e.maximized && ((n = (t = B.current) == null ? void 0 : t.element) == null || n.focus());
+  }, []);
+  const I = o.useCallback(
+    () => {
+      var t;
+      return (t = p.current) == null ? void 0 : t.focus();
+    },
+    []
+  ), v = o.useCallback(
+    () => e.value,
+    [e.value]
+  ), H = o.useCallback(
+    () => e.name,
+    [e.name]
+  ), y = o.useCallback(
+    () => e.required,
+    [e.required]
+  ), M = o.useCallback(
+    () => {
+      const t = e.validationMessage !== void 0, i = !v(), u = e.valid !== void 0 ? e.valid : !y() || !i;
+      return {
+        customError: t,
+        valid: u,
+        valueMissing: i
+      };
+    },
+    [e.validationMessage, e.valid, v, y]
+  ), P = o.useCallback(
+    () => e.validityStyles,
+    [e.validityStyles]
+  ), K = o.useCallback(
+    () => e,
+    [e]
+  ), l = o.useCallback(
+    () => {
+      const t = {
+        element: s.current,
+        focus: I
+      };
+      return Object.defineProperty(t, "name", { get: H }), Object.defineProperty(t, "value", { get: v }), Object.defineProperty(t, "validity", { get: M }), Object.defineProperty(t, "validityStyles", { get: P }), Object.defineProperty(t, "required", { get: y }), Object.defineProperty(t, "props", { get: K }), Object.defineProperty(t, "color", { get: w }), Object.defineProperty(t, "backgroundColor", { get: L }), t;
+    },
+    [H, v, M, P, y, I, K, w, L]
+  );
+  o.useImperativeHandle(re, l);
+  const ke = o.useCallback(
+    (t) => {
+      g || e.maximized || (F(!0), C(
+        e.onFocus,
+        t,
+        l(),
+        {}
+      ));
+    },
+    [g, e.onFocus, l]
+  ), ve = o.useCallback(
+    (t) => {
+      Te(t.relatedTarget, s.current) || (F(!1), C(
+        e.onBlur,
+        t,
+        l(),
+        {}
+      ));
+    },
+    [g, e.onBlur, l]
+  ), ye = o.useCallback(
+    async (t) => {
+      le(await W(J())), k(!0), C(
+        e.onOpen,
+        t,
+        l(),
+        {}
+      );
+    },
+    [d, m, e.onOpen, e.value, b, l]
+  ), $ = o.useCallback(
+    (t) => {
+      k(!1), C(
+        e.onClose,
+        t,
+        l(),
+        {}
+      );
+    },
+    [d, m, e.onClose, l]
+  ), Ce = () => {
+    ge(), I();
+  }, X = () => {
+    var i, u;
+    const t = e.width || ((i = s.current) == null ? void 0 : i.offsetWidth) || Be, n = e.height || ((u = s.current) == null ? void 0 : u.offsetHeight) || _e;
+    return {
+      width: t,
+      height: n
+    };
+  }, J = () => {
+    const { width: t, height: n } = X();
+    return {
+      width: t * S,
+      height: n * S
+    };
+  }, he = !P() || M().valid;
+  return /* @__PURE__ */ o.createElement(
+    "div",
+    {
+      ref: s,
+      dir: e.dir,
+      style: { width: e.width, height: e.height, ...e.style },
+      className: we(
+        "k-input",
+        "k-signature",
+        {
+          "k-signature-maximized": e.maximized,
+          [`k-signature-${Q.sizeMap[e.size] || e.size}`]: e.size,
+          [`k-input-${e.fillMode}`]: e.fillMode,
+          [`k-rounded-${Q.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
+          "k-invalid": !he,
+          "k-required": e.required,
+          "k-disabled": e.disabled,
+          "k-focus": g
+        },
+        e.className
+      ),
+      onFocus: ke,
+      onBlur: ve
+    },
+    /* @__PURE__ */ o.createElement(
+      "div",
+      {
+        className: "k-signature-canvas",
+        ref: p,
+        tabIndex: Le(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
+      }
+    ),
+    /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-top" }, de && /* @__PURE__ */ o.createElement(
+      D,
+      {
+        type: "button",
+        className: "k-signature-action k-signature-maximize",
+        ref: _,
+        icon: "hyperlink-open",
+        svgIcon: te,
+        fillMode: "flat",
+        size: e.size,
+        onClick: ye,
+        "aria-label": A,
+        title: A
+      }
+    ), me && /* @__PURE__ */ o.createElement(
+      D,
+      {
+        type: "button",
+        className: "k-signature-action k-signature-minimize k-rotate-180",
+        ref: B,
+        icon: "hyperlink-open",
+        svgIcon: te,
+        fillMode: "flat",
+        size: e.size,
+        onClick: $,
+        "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" }, fe && /* @__PURE__ */ o.createElement(
+      D,
+      {
+        type: "button",
+        className: "k-signature-action k-signature-clear",
+        icon: "x",
+        svgIcon: Re,
+        fillMode: "flat",
+        size: e.size,
+        onClick: Ce,
+        "aria-label": j,
+        title: j
+      }
+    )),
+    d && /* @__PURE__ */ o.createElement(Me, { ref: R }, /* @__PURE__ */ o.createElement(
+      h,
+      {
+        ...e,
+        ...J(),
+        value: se,
+        maximized: !0,
+        exportScale: 1 / S * O,
+        open: !1,
+        onChange: pe,
+        onClose: be
+      }
+    ))
+  );
+});
+h.propTypes = {
+  value: a.string,
+  width: a.number,
+  height: a.number,
+  tabIndex: a.number,
+  dir: a.string,
+  ariaDescribedBy: a.string,
+  ariaLabelledBy: a.string,
+  ariaLabel: a.string,
+  readOnly: a.bool,
+  disabled: a.bool,
+  validationMessage: a.string,
+  required: a.bool,
+  onChange: a.func,
+  onFocus: a.func,
+  onBlur: a.func,
+  onOpen: a.func,
+  onClose: a.func,
+  size: a.oneOf([null, "small", "medium", "large"]),
+  rounded: a.oneOf([null, "small", "medium", "large"]),
+  fillMode: a.oneOf([null, "solid", "flat", "outline"])
+};
+h.displayName = "KendoSignature";
+h.defaultProps = {
+  strokeWidth: 1,
+  smooth: !1,
+  popupScale: ne,
+  exportScale: ae,
+  maximizable: !0,
+  disabled: !1,
+  required: !1,
+  validityStyles: !0,
+  onChange: (c) => f,
+  onFocus: (c) => f,
+  onBlur: (c) => f,
+  onOpen: (c) => f,
+  onClose: (c) => f,
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid"
+};
+export {
+  h as Signature,
+  Ge as SignaturePropsContext
+};

package/signature/utils/index.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function n(t,r){let e=t;for(;e&&e!==r;)e=e.parentNode;return!!e}exports.hasParent=n;

package/signature/utils/index.mjs

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+function n(t, r) {
+  let e = t;
+  for (; e && e !== r; )
+    e = e.parentNode;
+  return !!e;
+}
+export {
+  n as hasParent
+};

package/slider/Slider.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),l=require("prop-types"),a=require("@progress/kendo-react-common"),g=require("@progress/kendo-react-intl"),n=require("../messages/index.js"),y=require("./SliderLabel.js"),k=require("../package-metadata.js"),m=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-svg-icons");function S(d){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return i.default=d,Object.freeze(i)}const s=S(b),p=class p extends s.Component{constructor(i){super(i),this.state={value:this.props.defaultValue===void 0?this.props.min:this.props.defaultValue,focused:!1,dir:this.props.dir},this._sliderTrack=null,this._element=null,this.buttons=e=>{if(!e.enabled)return e.children;const t=this.state.dir==="rtl"?this.props.vertical?o.caretAltUpIcon:o.caretAltLeftIcon:this.props.vertical?o.caretAltUpIcon:o.caretAltRightIcon,c=this.state.dir==="rtl"?this.props.vertical?o.caretAltDownIcon:o.caretAltRightIcon:this.props.vertical?o.caretAltDownIcon:o.caretAltLeftIcon,r=this.state.dir==="rtl"?this.props.vertical?"caret-alt-up":"caret-alt-left":this.props.vertical?"caret-alt-up":"caret-alt-right",u=this.state.dir==="rtl"?this.props.vertical?"caret-alt-down":"caret-alt-right":this.props.vertical?"caret-alt-down":"caret-alt-left";return s.createElement(s.Fragment,null,s.createElement(m.Button,{className:"k-button-decrease",rounded:"full",icon:u,svgIcon:c,title:e.decrementTitle,onClick:e.decrement}),e.children,s.createElement(m.Button,{className:"k-button-increase",rounded:"full",icon:r,svgIcon:t,title:e.incrementTitle,onClick:e.increment}))},this.focus=()=>{this._element&&this._element.focus()},this.isLabel=e=>{let t=e;for(;t;){if(t.getAttribute(y.SLIDER_LABEL_ATTRIBUTE))return!0;t=t.parentElement}return!1},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onKeyDown=e=>{let t;e.keyCode===a.Keys.left||e.keyCode===a.Keys.down?t=this.state.value-(this.props.step||0):e.keyCode===a.Keys.right||e.keyCode===a.Keys.up?t=this.state.value+(this.props.step||0):e.keyCode===a.Keys.home?t=this.props.min:e.keyCode===a.Keys.end&&(t=this.props.max),t!==void 0&&(e.preventDefault(),this.change(e,t))},this.decrement=e=>{e.preventDefault(),this.change(e,this.state.value-(this.props.step||0))},this.increment=e=>{e.preventDefault(),this.change(e,this.state.value+(this.props.step||0))},this.dragStart=e=>{this.isLabel(e.event.originalEvent.target)||(e.event.isTouch&&e.event.originalEvent.preventDefault(),this.drag(e))},this.dragOver=e=>{e.event.originalEvent.preventDefault(),this.drag(e)},this.drag=e=>{const t=e.element.getBoundingClientRect(),c=this.props.vertical?t.bottom-e.event.clientY:this.state.dir==="rtl"?t.right-e.event.clientX:e.event.clientX-t.left,r=this.props.vertical?t.height:t.width,u=c/r;this.change(e,this.props.min+u*(this.props.max-this.props.min))},a.validatePackage(k.packageMetadata)}static getDerivedStateFromProps(i,e){const t=i.value!==void 0?i.value:e.value,{min:c,max:r}=i;return t===void 0?null:{value:Math.min(Math.max(t,c),r)}}componentDidMount(){if(!this.state.dir&&window&&this._element){const i=window.getComputedStyle(this._element).direction;i&&this.setState({dir:i})}}render(){const i=g.provideLocalizationService(this),e=(this.state.value-this.props.min)/(this.props.max-this.props.min)*100,t=this.props.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},c=this.props.vertical?{paddingTop:0,height:"100%"}:{};return s.createElement("div",{ref:r=>this._element=r,dir:this.state.dir,id:this.props.id,style:{gap:0,...this.props.style},onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,className:a.classNames("k-slider",{"k-focus":this.state.focused,"k-disabled":this.props.disabled,"k-slider-horizontal":!this.props.vertical,"k-slider-vertical":this.props.vertical},this.props.className)},s.createElement(this.buttons,{enabled:this.props.buttons,decrement:this.decrement,increment:this.increment,incrementTitle:i.toLanguageString(n.sliderIncreaseValue,n.messages[n.sliderIncreaseValue]),decrementTitle:i.toLanguageString(n.sliderDecreaseValue,n.messages[n.sliderDecreaseValue])},s.createElement(a.Draggable,{onDrag:this.dragOver,onPress:this.dragStart},s.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...t}},this.props.children&&s.createElement("ul",{className:"k-reset k-slider-items",style:{margin:0,...c}},s.Children.map(this.props.children,r=>r&&s.cloneElement(r,{position:100*(r.props.position-this.props.min)/(this.props.max-this.props.min),vertical:this.props.vertical},r.props.children))),s.createElement("div",{className:"k-slider-track",style:this.props.vertical?{bottom:0,height:"100%"}:{[this.state.dir==="rtl"?"right":"left"]:0,width:"100%"},ref:r=>this._sliderTrack=r},s.createElement("div",{className:"k-slider-selection",style:this.props.vertical?{height:e+"%"}:{width:e+"%"}}),s.createElement("span",{role:"slider","aria-valuemin":this.props.min,"aria-valuemax":this.props.max,"aria-valuenow":this.state.value,"aria-valuetext":String(this.state.value),"aria-orientation":this.props.vertical?"vertical":void 0,"aria-disabled":this.props.disabled?"true":void 0,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel,tabIndex:a.getTabIndex(this.props.tabIndex,this.props.disabled,void 0),className:"k-draghandle",title:i.toLanguageString(n.sliderDragTitle,n.messages[n.sliderDragTitle]),style:this.props.vertical?{bottom:"calc("+e+"%)",zIndex:1}:this.state.dir==="rtl"?{right:"calc("+e+"% - 13px)",zIndex:1}:{left:"calc("+e+"%)",zIndex:1}}))))))}get sliderTrack(){return this._sliderTrack}change(i,e){e=Math.min(Math.max(e,this.props.min),this.props.max),this.setState({value:e}),a.dispatchEvent(this.props.onChange,i,this,{value:e})}};p.displayName="Slider",p.propTypes={min:l.number.isRequired,max:l.number.isRequired,value:l.number,vertical:l.bool,id:l.string,ariaLabelledBy:l.string,ariaDescribedBy:l.string,ariaLabel:l.string};let h=p;const v=a.createPropsContext(),f=a.withPropsContext(v,h);f.displayName="KendoReactSlider";g.registerForLocalization(h);exports.Slider=f;exports.SliderPropsContext=v;exports.SliderWithoutContext=h;

package/slider/Slider.mjs

@@ -0,0 +1,223 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as i from "react";
+import a from "prop-types";
+import { Keys as l, validatePackage as y, classNames as w, Draggable as x, getTabIndex as E, dispatchEvent as S, createPropsContext as T, withPropsContext as D } from "@progress/kendo-react-common";
+import { provideLocalizationService as I, registerForLocalization as L } from "@progress/kendo-react-intl";
+import { sliderIncreaseValue as d, messages as h, sliderDecreaseValue as m, sliderDragTitle as u } from "../messages/index.mjs";
+import { SLIDER_LABEL_ATTRIBUTE as B } from "./SliderLabel.mjs";
+import { packageMetadata as C } from "../package-metadata.mjs";
+import { Button as v } from "@progress/kendo-react-buttons";
+import { caretAltUpIcon as g, caretAltLeftIcon as f, caretAltRightIcon as b, caretAltDownIcon as k } from "@progress/kendo-svg-icons";
+const c = class c extends i.Component {
+  constructor(s) {
+    super(s), this.state = {
+      value: this.props.defaultValue === void 0 ? this.props.min : this.props.defaultValue,
+      focused: !1,
+      dir: this.props.dir
+    }, this._sliderTrack = null, this._element = null, this.buttons = (t) => {
+      if (!t.enabled)
+        return t.children;
+      const e = this.state.dir === "rtl" ? this.props.vertical ? g : f : this.props.vertical ? g : b, n = this.state.dir === "rtl" ? this.props.vertical ? k : b : this.props.vertical ? k : f, r = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-up" : "caret-alt-left" : this.props.vertical ? "caret-alt-up" : "caret-alt-right", p = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-down" : "caret-alt-right" : this.props.vertical ? "caret-alt-down" : "caret-alt-left";
+      return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
+        v,
+        {
+          className: "k-button-decrease",
+          rounded: "full",
+          icon: p,
+          svgIcon: n,
+          title: t.decrementTitle,
+          onClick: t.decrement
+        }
+      ), t.children, /* @__PURE__ */ i.createElement(
+        v,
+        {
+          className: "k-button-increase",
+          rounded: "full",
+          icon: r,
+          svgIcon: e,
+          title: t.incrementTitle,
+          onClick: t.increment
+        }
+      ));
+    }, this.focus = () => {
+      this._element && this._element.focus();
+    }, this.isLabel = (t) => {
+      let e = t;
+      for (; e; ) {
+        if (e.getAttribute(B))
+          return !0;
+        e = e.parentElement;
+      }
+      return !1;
+    }, this.onFocus = () => {
+      this.setState({ focused: !0 });
+    }, this.onBlur = () => {
+      this.setState({ focused: !1 });
+    }, this.onKeyDown = (t) => {
+      let e;
+      t.keyCode === l.left || t.keyCode === l.down ? e = this.state.value - (this.props.step || 0) : t.keyCode === l.right || t.keyCode === l.up ? e = this.state.value + (this.props.step || 0) : t.keyCode === l.home ? e = this.props.min : t.keyCode === l.end && (e = this.props.max), e !== void 0 && (t.preventDefault(), this.change(t, e));
+    }, this.decrement = (t) => {
+      t.preventDefault(), this.change(t, this.state.value - (this.props.step || 0));
+    }, this.increment = (t) => {
+      t.preventDefault(), this.change(t, this.state.value + (this.props.step || 0));
+    }, this.dragStart = (t) => {
+      this.isLabel(t.event.originalEvent.target) || (t.event.isTouch && t.event.originalEvent.preventDefault(), this.drag(t));
+    }, this.dragOver = (t) => {
+      t.event.originalEvent.preventDefault(), this.drag(t);
+    }, this.drag = (t) => {
+      const e = t.element.getBoundingClientRect(), n = this.props.vertical ? e.bottom - t.event.clientY : this.state.dir === "rtl" ? e.right - t.event.clientX : t.event.clientX - e.left, r = this.props.vertical ? e.height : e.width, p = n / r;
+      this.change(t, this.props.min + p * (this.props.max - this.props.min));
+    }, y(C);
+  }
+  /**
+   * @hidden
+   */
+  static getDerivedStateFromProps(s, t) {
+    const e = s.value !== void 0 ? s.value : t.value, { min: n, max: r } = s;
+    return e === void 0 ? null : { value: Math.min(Math.max(e, n), r) };
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    if (!this.state.dir && window && this._element) {
+      const s = window.getComputedStyle(this._element).direction;
+      s && this.setState({ dir: s });
+    }
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const s = I(this), t = (this.state.value - this.props.min) / (this.props.max - this.props.min) * 100, e = this.props.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, n = this.props.vertical ? { paddingTop: 0, height: "100%" } : {};
+    return /* @__PURE__ */ i.createElement(
+      "div",
+      {
+        ref: (r) => this._element = r,
+        dir: this.state.dir,
+        id: this.props.id,
+        style: { gap: 0, ...this.props.style },
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        onKeyDown: this.onKeyDown,
+        className: w(
+          "k-slider",
+          {
+            "k-focus": this.state.focused,
+            "k-disabled": this.props.disabled,
+            "k-slider-horizontal": !this.props.vertical,
+            "k-slider-vertical": this.props.vertical
+          },
+          this.props.className
+        )
+      },
+      /* @__PURE__ */ i.createElement(
+        this.buttons,
+        {
+          enabled: this.props.buttons,
+          decrement: this.decrement,
+          increment: this.increment,
+          incrementTitle: s.toLanguageString(d, h[d]),
+          decrementTitle: s.toLanguageString(m, h[m])
+        },
+        /* @__PURE__ */ i.createElement(x, { onDrag: this.dragOver, onPress: this.dragStart }, /* @__PURE__ */ i.createElement(
+          "div",
+          {
+            className: "k-slider-track-wrap",
+            style: {
+              flexGrow: 1,
+              position: "relative",
+              touchAction: "none",
+              ...e
+            }
+          },
+          this.props.children && /* @__PURE__ */ i.createElement(
+            "ul",
+            {
+              className: "k-reset k-slider-items",
+              style: { margin: 0, ...n }
+            },
+            i.Children.map(this.props.children, (r) => r && i.cloneElement(
+              r,
+              {
+                position: 100 * (r.props.position - this.props.min) / (this.props.max - this.props.min),
+                vertical: this.props.vertical
+              },
+              r.props.children
+            ))
+          ),
+          /* @__PURE__ */ i.createElement(
+            "div",
+            {
+              className: "k-slider-track",
+              style: this.props.vertical ? { bottom: 0, height: "100%" } : { [this.state.dir === "rtl" ? "right" : "left"]: 0, width: "100%" },
+              ref: (r) => this._sliderTrack = r
+            },
+            /* @__PURE__ */ i.createElement(
+              "div",
+              {
+                className: "k-slider-selection",
+                style: this.props.vertical ? { height: t + "%" } : { width: t + "%" }
+              }
+            ),
+            /* @__PURE__ */ i.createElement(
+              "span",
+              {
+                role: "slider",
+                "aria-valuemin": this.props.min,
+                "aria-valuemax": this.props.max,
+                "aria-valuenow": this.state.value,
+                "aria-valuetext": String(this.state.value),
+                "aria-orientation": this.props.vertical ? "vertical" : void 0,
+                "aria-disabled": this.props.disabled ? "true" : void 0,
+                "aria-labelledby": this.props.ariaLabelledBy,
+                "aria-describedby": this.props.ariaDescribedBy,
+                "aria-label": this.props.ariaLabel,
+                tabIndex: E(this.props.tabIndex, this.props.disabled, void 0),
+                className: "k-draghandle",
+                title: s.toLanguageString(u, h[u]),
+                style: this.props.vertical ? { bottom: "calc(" + t + "%)", zIndex: 1 } : this.state.dir === "rtl" ? { right: "calc(" + t + "% - 13px)", zIndex: 1 } : { left: "calc(" + t + "%)", zIndex: 1 }
+              }
+            )
+          )
+        ))
+      )
+    );
+  }
+  /**
+   * @hidden
+   */
+  get sliderTrack() {
+    return this._sliderTrack;
+  }
+  change(s, t) {
+    t = Math.min(Math.max(t, this.props.min), this.props.max), this.setState({ value: t }), S(this.props.onChange, s, this, { value: t });
+  }
+};
+c.displayName = "Slider", c.propTypes = {
+  min: a.number.isRequired,
+  max: a.number.isRequired,
+  value: a.number,
+  vertical: a.bool,
+  id: a.string,
+  ariaLabelledBy: a.string,
+  ariaDescribedBy: a.string,
+  ariaLabel: a.string
+  // TODO: validation when buttons is set to true, but no step is provided
+};
+let o = c;
+const A = T(), N = D(A, o);
+N.displayName = "KendoReactSlider";
+L(o);
+export {
+  N as Slider,
+  A as SliderPropsContext,
+  o as SliderWithoutContext
+};

package/slider/SliderLabel.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),o=require("@progress/kendo-react-common");function s(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return t.default=e,Object.freeze(t)}const i=s(a),n="data-slider-label",u=e=>{const t=i.useRef(null),l=o.useDir(t),c=e.vertical?{bottom:`${e.position}%`}:{[l==="rtl"?"right":"left"]:`${e.position}%`},r=e.vertical?"k-tick-vertical":"k-tick-horizontal";return i.createElement("li",{ref:t,className:`k-tick k-tick-large ${r}`,title:e.title,style:{zIndex:1,position:"absolute",...c}},e.children&&i.createElement("span",{[n]:!0,className:"k-label",onClick:e.onClick},e.children))};exports.SLIDER_LABEL_ATTRIBUTE=n;exports.SliderLabel=u;

package/slider/SliderLabel.mjs

@@ -0,0 +1,39 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+import { useDir as n } from "@progress/kendo-react-common";
+const r = "data-slider-label", s = (t) => {
+  const l = e.useRef(null), i = n(l), c = t.vertical ? { bottom: `${t.position}%` } : { [i === "rtl" ? "right" : "left"]: `${t.position}%` }, a = t.vertical ? "k-tick-vertical" : "k-tick-horizontal";
+  return /* @__PURE__ */ e.createElement(
+    "li",
+    {
+      ref: l,
+      className: `k-tick k-tick-large ${a}`,
+      title: t.title,
+      style: {
+        zIndex: 1,
+        position: "absolute",
+        ...c
+      }
+    },
+    t.children && /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        [r]: !0,
+        className: "k-label",
+        onClick: t.onClick
+      },
+      t.children
+    )
+  );
+};
+export {
+  r as SLIDER_LABEL_ATTRIBUTE,
+  s as SliderLabel
+};

package/switch/Switch.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react"),s=require("prop-types"),i=require("@progress/kendo-react-common"),S=require("@progress/kendo-react-intl"),p=require("../messages/index.js"),M=require("../package-metadata.js");function N(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const n=N(C),l=class l extends n.Component{constructor(a){super(a),this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||this.defaultValidationMessage.toLanguageString(p.switchValidation,p.messages[p.switchValidation]))},this.limit=(e,t,r)=>{const h=r.offsetWidth,o=t.offsetWidth;return e<0?0:e>h-o?h-o:e},this.toggle=(e,t)=>{this.setState({checked:e}),this.valueDuringOnChange=e,i.dispatchEvent(this.props.onChange,t,this,{value:e}),this.valueDuringOnChange=void 0},this._element=null,this._wrapper=null,this._input=null,this._id=this.props.id,this.defaultValidationMessage=S.provideLocalizationService(this),this.focus=()=>{this.actionElement&&this.actionElement.focus()},this.dummyInput=e=>n.createElement("input",{type:"checkbox",checked:this.props.checked,ref:t=>{this._input=t},tabIndex:-1,"aria-hidden":!0,value:e,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"},onChange:i.noop,name:this.name||void 0}),this.handleClick=e=>{this.eventTimeStamp!==e.timeStamp&&(this.eventTimeStamp=e.timeStamp,this.toggle(!this.value,e))},this.handleKeyDown=e=>{if(this.props.disabled)return;const{keyCode:t}=e;(t===i.Keys.space||t===i.Keys.enter)&&(this.toggle(!this.value,e),e.preventDefault())},this.handleWrapperFocus=e=>{if(this.props.disabled)return;this.setState({focused:!0});const{onFocus:t}=this.props;t&&t.call(void 0,e)},this.handleWrapperBlur=e=>{if(this.props.disabled)return;this.setState({focused:!1});const{onBlur:t}=this.props;t&&t.call(void 0,e)},i.validatePackage(M.packageMetadata),this.state={checked:a.defaultChecked||l.defaultProps.defaultChecked,focused:!1}}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.checked!==void 0?this.props.checked:this.state.checked}get element(){return this._element}get actionElement(){return this._wrapper}get name(){return this.props.name}get validity(){const a=this.props.validationMessage!==void 0,e=this.props.valid!==void 0?this.props.valid:this.props.required?!!this.value:!0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:a,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:l.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:l.defaultProps.required}componentDidMount(){this.setValidity(),this.forceUpdate()}componentDidUpdate(){this.setValidity()}render(){const{focused:a}=this.state,{dir:e,disabled:t,trackRounded:r,thumbRounded:h,size:o,offLabel:g,onLabel:b,tabIndex:v}=this.props;this.dir=e||this.element&&getComputedStyle(this.element).direction||void 0;const y=!this.validityStyles||this.validity.valid,k=i.classNames("k-switch",{[`k-switch-${i.kendoThemeMaps.sizeMap[o]||o}`]:o,[`k-rounded-${i.kendoThemeMaps.roundedMap[r]||r}`]:r,"k-switch-on":this.value,"k-switch-off":!this.value,"k-focus":a,"k-disabled":t,"k-invalid":!y},this.props.className),w={"aria-checked":this.value,"aria-disabled":t||void 0,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel};return n.createElement("span",{ref:u=>{this._wrapper=u},role:"switch",...w,className:k,dir:this.dir,onKeyDown:this.handleKeyDown,onClick:this.handleClick,onBlur:this.handleWrapperBlur,onFocus:this.handleWrapperFocus,tabIndex:i.getTabIndex(v,t,void 0),accessKey:this.props.accessKey,id:this.props.id||this._id},n.createElement("span",{className:i.classNames("k-switch-track",{[`k-rounded-${i.kendoThemeMaps.roundedMap[r]||r}`]:r}),ref:u=>{this._element=u}},this.dummyInput(this.value),n.createElement("span",{className:"k-switch-label-on"},b),n.createElement("span",{className:"k-switch-label-off"},g)),n.createElement("span",{className:"k-switch-thumb-wrap"},n.createElement("span",{className:i.classNames("k-switch-thumb",{[`k-rounded-${h}`]:h})})))}};l.displayName="Switch",l.propTypes={accessKey:s.string,checked:s.bool,className:s.string,disabled:s.bool,defaultChecked:s.bool,size:s.oneOf([null,"small","medium","large"]),trackRounded:s.oneOf([null,"small","medium","large","full"]),thumbRounded:s.oneOf([null,"small","medium","large","full"]),dir:s.string,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,offLabel:s.string,required:s.bool,tabIndex:s.number,valid:s.bool,validate:s.bool,validationMessage:s.string,onBlur:s.any,onChange:s.any,onFocus:s.any,onLabel:s.string},l.defaultProps={disabled:!1,defaultChecked:!1,size:"medium",trackRounded:"full",thumbRounded:"full",offLabel:"OFF",onBlur:i.noop,onFocus:i.noop,onLabel:"ON",required:!1,validityStyles:!0};let c=l;const m=i.createPropsContext(),f=i.withIdHOC(i.withPropsContext(m,c));f.displayName="KendoReactSwitch";exports.Switch=f;exports.SwitchPropsContext=m;exports.SwitchWithoutContext=c;