@progress/kendo-react-inputs 8.2.0-develop.9 → 8.2.0

package/checkbox/Checkbox.js

@@ -5,4 +5,4 @@
  * 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 ve=require("react"),t=require("prop-types"),o=require("@progress/kendo-react-common"),Ce=require("../package-metadata.js"),ye=require("@progress/kendo-react-intl"),S=require("../messages/index.js");function xe(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const r in s)if(r!=="default"){const m=Object.getOwnPropertyDescriptor(s,r);Object.defineProperty(u,r,m.get?m:{enumerable:!0,get:()=>s[r]})}}return u.default=s,Object.freeze(u)}const e=xe(ve),A=o.createPropsContext(),I=e.forwardRef((s,u)=>{o.validatePackage(Ce.packageMetadata);const r=o.usePropsContext(A,s),{ariaDescribedBy:m,ariaLabelledBy:W,checked:O,className:G,labelClassName:J,children:Q,defaultChecked:X,disabled:n,defaultValue:Y,id:B,size:f=$.size,rounded:h=$.rounded,label:q,labelPlacement:z,name:Z,labelOptional:ee,onChange:g,onFocus:v,onBlur:C,tabIndex:te,value:i,required:y,valid:D,validationMessage:T,validityStyles:F,visited:Pe,touched:Ee,modified:Ve,...ae}=r,l=e.useRef(null),K=e.useCallback(()=>{l.current&&l.current.focus()},[]),d=e.useCallback(()=>({element:l.current,focus:K,get name(){return l.current&&l.current.name}}),[K]);e.useImperativeHandle(u,d);const[ne,oe]=e.useState(X),[le,ce]=e.useState(Y),R=typeof i=="boolean"||i===null,x=O!==void 0,b=R,P=b?i:le,E=x?O:b?void 0:ne,w=E===void 0&&P,j=w?P:E,k=w||b?i===null?i:void 0:i||P,se=j===null||k===null,L=o.useId(),re=ye.useLocalization(),_=a=>re.toLanguageString(a,S.messages[a]),H=_(S.checkboxValidation),ie=_(S.checkboxOptionalText),V=D!==void 0?D:y?!!E:!0;e.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(V?"":T||H)},[V,T,H]);const p=e.useCallback((a,c)=>{!b&&!n&&(ce(c),!x&&!n&&oe(c)),g&&!n&&o.dispatchEvent(g,a,{...d(),value:c},{value:c})},[x,n,g,b,d]),de=e.useCallback(a=>{const c=a.target.checked;p(a,c)},[p,i]),ue=e.useCallback(a=>{if(n)return;const{keyCode:c}=a,ge=a.currentTarget.checked;c===o.Keys.space&&(a.preventDefault(),a.stopPropagation(),p(a,!ge))},[n,p]),be=e.useCallback(a=>{if(n)return;const{keyCode:c}=a;c===o.Keys.space&&a.preventDefault()},[n]),me=e.useCallback(a=>{v&&!n&&o.dispatchEvent(v,a,d(),void 0)},[v,n,d]),ke=e.useCallback(a=>{C&&!n&&o.dispatchEvent(C,a,d(),void 0)},[C,n,d]),pe=o.useDir(l,r.dir),fe=o.classNames("k-checkbox-wrap",G),U={type:"checkbox",className:o.classNames("k-checkbox",{[`k-checkbox-${o.kendoThemeMaps.sizeMap[f]||f}`]:f,[`k-rounded-${o.kendoThemeMaps.roundedMap[h]||h}`]:h,"k-indeterminate":se,"k-disabled":n,"k-invalid k-invalid":!(V||F!==void 0||F===!0)}),ref:l,name:Z,id:B||L,disabled:n,required:y!==void 0?y:!1,tabIndex:o.getTabIndex(te,n),role:"checkbox",checked:!!j,"aria-describedby":m,"aria-labelledby":W,"aria-disabled":n||void 0,...ae,onChange:de,onKeyDown:ue,onKeyUp:be,onFocus:me,onBlur:ke},he=k===void 0?e.createElement("input",{...U}):e.createElement("input",{...U,value:R?void 0:k===null?"":k}),M=q!==void 0?e.createElement("label",{className:o.classNames("k-checkbox-label",J),htmlFor:B||L,style:{userSelect:"none"}},e.createElement(e.Fragment,null,q),ee&&e.createElement("span",{className:"k-label-optional"},ie)):null,N=e.createElement("span",{className:fe},he,Q);return e.createElement(e.Fragment,null,z==="before"?e.createElement("div",{dir:"rtl"},N,M):z==="after"?e.createElement("div",{dir:"ltr"},N,M):e.createElement("div",{dir:pe},N,M))});I.propTypes={checked:t.bool,className:t.string,defaultChecked:t.bool,defaultValue:t.any,dir:t.string,disabled:t.bool,id:t.string,size:t.oneOf([null,"small","medium","large"]),rounded:t.oneOf([null,"small","medium","large"]),ariaLabelledBy:t.string,ariaDescribedBy:t.string,label:t.any,labelPlacement:t.string,labelOptional:t.bool,name:t.string,tabIndex:t.number,value:t.any,validationMessage:t.string,required:t.bool,validate:t.bool,valid:t.bool,onChange:t.func,onFocus:t.func,onBlur:t.func};const $={size:"medium",rounded:"medium"};I.displayName="KendoCheckbox";exports.Checkbox=I;exports.CheckboxPropsContext=A;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ce=require("react"),t=require("prop-types"),o=require("@progress/kendo-react-common"),ye=require("../package-metadata.js"),xe=require("@progress/kendo-react-intl"),S=require("../messages/index.js");function Pe(s){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const r in s)if(r!=="default"){const m=Object.getOwnPropertyDescriptor(s,r);Object.defineProperty(d,r,m.get?m:{enumerable:!0,get:()=>s[r]})}}return d.default=s,Object.freeze(d)}const e=Pe(Ce),A=o.createPropsContext(),I=e.forwardRef((s,d)=>{o.validatePackage(ye.packageMetadata);const r=o.usePropsContext(A,s),{ariaDescribedBy:m,ariaLabelledBy:W,checked:O,className:G,labelClassName:J,children:Q,defaultChecked:X,disabled:n,defaultValue:Y,id:B,size:f=$.size,rounded:h=$.rounded,label:F,labelPlacement:q,name:Z,labelOptional:ee,onChange:g,onFocus:v,onBlur:C,tabIndex:te,value:i,required:y,valid:z,validationMessage:D,validityStyles:T,autoFocus:ae,visited:Ee,touched:Ve,modified:Me,...ne}=r,l=e.useRef(null),K=e.useCallback(()=>{l.current&&l.current.focus()},[]),u=e.useCallback(()=>({element:l.current,focus:K,get name(){return l.current&&l.current.name}}),[K]);e.useImperativeHandle(d,u);const[oe,le]=e.useState(X),[ce,se]=e.useState(Y),R=typeof i=="boolean"||i===null,x=O!==void 0,b=R,P=b?i:ce,E=x?O:b?void 0:oe,w=E===void 0&&P,j=w?P:E,k=w||b?i===null?i:void 0:i||P,re=j===null||k===null,L=o.useId(),ie=xe.useLocalization(),_=a=>ie.toLanguageString(a,S.messages[a]),H=_(S.checkboxValidation),ue=_(S.checkboxOptionalText),V=z!==void 0?z:y?!!E:!0;e.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(V?"":D||H)},[V,D,H]);const p=e.useCallback((a,c)=>{!b&&!n&&(se(c),!x&&!n&&le(c)),g&&!n&&o.dispatchEvent(g,a,{...u(),value:c},{value:c})},[x,n,g,b,u]),de=e.useCallback(a=>{const c=a.target.checked;p(a,c)},[p,i]),be=e.useCallback(a=>{if(n)return;const{keyCode:c}=a,ve=a.currentTarget.checked;c===o.Keys.space&&(a.preventDefault(),a.stopPropagation(),p(a,!ve))},[n,p]),me=e.useCallback(a=>{if(n)return;const{keyCode:c}=a;c===o.Keys.space&&a.preventDefault()},[n]),ke=e.useCallback(a=>{v&&!n&&o.dispatchEvent(v,a,u(),void 0)},[v,n,u]),pe=e.useCallback(a=>{C&&!n&&o.dispatchEvent(C,a,u(),void 0)},[C,n,u]),fe=o.useDir(l,r.dir),he=o.classNames("k-checkbox-wrap",G),U={type:"checkbox",className:o.classNames("k-checkbox",{[`k-checkbox-${o.kendoThemeMaps.sizeMap[f]||f}`]:f,[`k-rounded-${o.kendoThemeMaps.roundedMap[h]||h}`]:h,"k-indeterminate":re,"k-disabled":n,"k-invalid k-invalid":!(V||T!==void 0||T===!0)}),ref:l,name:Z,id:B||L,disabled:n,required:y!==void 0?y:!1,tabIndex:o.getTabIndex(te,n),role:"checkbox",checked:!!j,"aria-describedby":m,"aria-labelledby":W,"aria-disabled":n||void 0,autoFocus:ae,...ne,onChange:de,onKeyDown:be,onKeyUp:me,onFocus:ke,onBlur:pe},ge=k===void 0?e.createElement("input",{...U}):e.createElement("input",{...U,value:R?void 0:k===null?"":k}),M=F!==void 0?e.createElement("label",{className:o.classNames("k-checkbox-label",J),htmlFor:B||L,style:{userSelect:"none"}},e.createElement(e.Fragment,null,F),ee&&e.createElement("span",{className:"k-label-optional"},ue)):null,N=e.createElement("span",{className:he},ge,Q);return e.createElement(e.Fragment,null,q==="before"?e.createElement("div",{dir:"rtl"},N,M):q==="after"?e.createElement("div",{dir:"ltr"},N,M):e.createElement("div",{dir:fe},N,M))});I.propTypes={checked:t.bool,className:t.string,defaultChecked:t.bool,defaultValue:t.any,dir:t.string,disabled:t.bool,id:t.string,size:t.oneOf([null,"small","medium","large"]),rounded:t.oneOf([null,"small","medium","large"]),ariaLabelledBy:t.string,ariaDescribedBy:t.string,label:t.any,labelPlacement:t.string,labelOptional:t.bool,name:t.string,tabIndex:t.number,value:t.any,validationMessage:t.string,required:t.bool,validate:t.bool,valid:t.bool,autoFocus:t.bool,onChange:t.func,onFocus:t.func,onBlur:t.func};const $={size:"medium",rounded:"medium",autoFocus:!1};I.displayName="KendoCheckbox";exports.Checkbox=I;exports.CheckboxPropsContext=A;

package/checkbox/Checkbox.mjs

@@ -8,13 +8,13 @@
 "use client";
 import * as e from "react";
 import a from "prop-types";
-import { createPropsContext as ge, validatePackage as ye, usePropsContext as xe, useId as Ve, dispatchEvent as V, Keys as H, useDir as Ee, classNames as E, kendoThemeMaps as U, getTabIndex as Pe } from "@progress/kendo-react-common";
-import { packageMetadata as Be } from "../package-metadata.mjs";
+import { createPropsContext as ye, validatePackage as xe, usePropsContext as Ve, useId as Ee, dispatchEvent as V, Keys as H, useDir as Pe, classNames as E, kendoThemeMaps as U, getTabIndex as Be } from "@progress/kendo-react-common";
+import { packageMetadata as Fe } from "../package-metadata.mjs";
 import { useLocalization as Ie } from "@progress/kendo-react-intl";
 import { messages as Me, checkboxValidation as Ne, checkboxOptionalText as ze } from "../messages/index.mjs";
-const Se = ge(), A = e.forwardRef((W, j) => {
-  ye(Be);
-  const P = xe(Se, W), {
+const Se = ye(), A = e.forwardRef((W, j) => {
+  xe(Fe);
+  const P = Ve(Se, W), {
     ariaDescribedBy: G,
     ariaLabelledBy: J,
     checked: B,
@@ -22,13 +22,13 @@ const Se = ge(), A = e.forwardRef((W, j) => {
     labelClassName: X,
     children: Y,
     defaultChecked: Z,
-    disabled: l,
+    disabled: o,
     defaultValue: _,
-    id: I,
+    id: F,
     size: u = $.size,
     rounded: m = $.rounded,
-    label: M,
-    labelPlacement: N,
+    label: I,
+    labelPlacement: M,
     name: ee,
     labelOptional: ae,
     onChange: b,
@@ -37,95 +37,96 @@ const Se = ge(), A = e.forwardRef((W, j) => {
     tabIndex: te,
     value: s,
     required: f,
-    valid: z,
-    validationMessage: S,
-    validityStyles: D,
+    valid: N,
+    validationMessage: z,
+    validityStyles: S,
+    autoFocus: oe,
     // Removed to support direct use in Form Field component
     visited: De,
-    touched: Fe,
-    modified: Ke,
+    touched: Ke,
+    modified: Te,
     ...le
-  } = P, n = e.useRef(null), F = e.useCallback(
+  } = P, l = e.useRef(null), D = e.useCallback(
     () => {
-      n.current && n.current.focus();
+      l.current && l.current.focus();
     },
     []
   ), c = e.useCallback(
     () => ({
-      element: n.current,
-      focus: F,
+      element: l.current,
+      focus: D,
       get name() {
-        return n.current && n.current.name;
+        return l.current && l.current.name;
       }
     }),
-    [F]
+    [D]
   );
   e.useImperativeHandle(j, c);
-  const [ne, oe] = e.useState(Z), [se, ce] = e.useState(_), K = typeof s == "boolean" || s === null, h = B !== void 0, r = K, v = r ? s : se, C = h ? B : r ? void 0 : ne, T = C === void 0 && v, w = T ? v : C, i = T || r ? s === null ? s : void 0 : s || v, re = w === null || i === null, L = Ve(), ie = Ie(), O = (t) => ie.toLanguageString(t, Me[t]), R = O(Ne), de = O(ze), g = z !== void 0 ? z : f ? !!C : !0;
+  const [ne, se] = e.useState(Z), [ce, re] = e.useState(_), K = typeof s == "boolean" || s === null, h = B !== void 0, r = K, v = r ? s : ce, C = h ? B : r ? void 0 : ne, T = C === void 0 && v, w = T ? v : C, i = T || r ? s === null ? s : void 0 : s || v, ie = w === null || i === null, L = Ee(), de = Ie(), O = (t) => de.toLanguageString(t, Me[t]), R = O(Ne), ue = O(ze), g = N !== void 0 ? N : f ? !!C : !0;
   e.useEffect(
     () => {
-      n.current && n.current.setCustomValidity && n.current.setCustomValidity(
-        g ? "" : S || R
+      l.current && l.current.setCustomValidity && l.current.setCustomValidity(
+        g ? "" : z || R
       );
     },
-    [g, S, R]
+    [g, z, R]
   );
   const d = e.useCallback(
-    (t, o) => {
-      !r && !l && (ce(o), !h && !l && oe(o)), b && !l && V(
+    (t, n) => {
+      !r && !o && (re(n), !h && !o && se(n)), b && !o && V(
         b,
         t,
         {
           ...c(),
-          value: o
+          value: n
         },
-        { value: o }
+        { value: n }
       );
     },
-    [h, l, b, r, c]
-  ), ue = e.useCallback(
+    [h, o, b, r, c]
+  ), me = e.useCallback(
     (t) => {
-      const o = t.target.checked;
-      d(t, o);
+      const n = t.target.checked;
+      d(t, n);
     },
     [d, s]
-  ), me = e.useCallback(
+  ), be = e.useCallback(
     (t) => {
-      if (l)
+      if (o)
         return;
-      const { keyCode: o } = t, Ce = t.currentTarget.checked;
-      o === H.space && (t.preventDefault(), t.stopPropagation(), d(t, !Ce));
+      const { keyCode: n } = t, ge = t.currentTarget.checked;
+      n === H.space && (t.preventDefault(), t.stopPropagation(), d(t, !ge));
     },
-    [l, d]
-  ), be = e.useCallback(
+    [o, d]
+  ), pe = e.useCallback(
     (t) => {
-      if (l)
+      if (o)
         return;
-      const { keyCode: o } = t;
-      o === H.space && t.preventDefault();
+      const { keyCode: n } = t;
+      n === H.space && t.preventDefault();
     },
-    [l]
-  ), pe = e.useCallback(
+    [o]
+  ), ke = e.useCallback(
     (t) => {
-      p && !l && V(
+      p && !o && V(
         p,
         t,
         c(),
         void 0
       );
     },
-    [p, l, c]
-  ), ke = e.useCallback(
+    [p, o, c]
+  ), fe = e.useCallback(
     (t) => {
-      k && !l && V(
+      k && !o && V(
         k,
         t,
         c(),
         void 0
       );
     },
-    [k, l, c]
-  ), fe = Ee(n, P.dir), he = E(
+    [k, o, c]
+  ), he = Pe(l, P.dir), ve = E(
     "k-checkbox-wrap",
     Q
   ), q = {
@@ -135,43 +136,44 @@ const Se = ge(), A = e.forwardRef((W, j) => {
       {
         [`k-checkbox-${U.sizeMap[u] || u}`]: u,
         [`k-rounded-${U.roundedMap[m] || m}`]: m,
-        "k-indeterminate": re,
-        "k-disabled": l,
-        "k-invalid k-invalid": !(g || D !== void 0 || D === !0)
+        "k-indeterminate": ie,
+        "k-disabled": o,
+        "k-invalid k-invalid": !(g || S !== void 0 || S === !0)
       }
     ),
-    ref: n,
+    ref: l,
     name: ee,
-    id: I || L,
-    disabled: l,
+    id: F || L,
+    disabled: o,
     required: f !== void 0 ? f : !1,
-    tabIndex: Pe(te, l),
+    tabIndex: Be(te, o),
     role: "checkbox",
     checked: !!w,
     "aria-describedby": G,
     "aria-labelledby": J,
-    "aria-disabled": l || void 0,
+    "aria-disabled": o || void 0,
+    autoFocus: oe,
     ...le,
-    onChange: ue,
-    onKeyDown: me,
-    onKeyUp: be,
-    onFocus: pe,
-    onBlur: ke
-  }, ve = (
+    onChange: me,
+    onKeyDown: be,
+    onKeyUp: pe,
+    onFocus: ke,
+    onBlur: fe
+  }, Ce = (
     // removing value prop is required due to bug in react where
     // value set to undefined override default submit value
     i === void 0 ? /* @__PURE__ */ e.createElement("input", { ...q }) : /* @__PURE__ */ e.createElement("input", { ...q, value: K ? void 0 : i === null ? "" : i })
-  ), y = M !== void 0 ? /* @__PURE__ */ e.createElement(
+  ), y = I !== void 0 ? /* @__PURE__ */ e.createElement(
     "label",
     {
       className: E("k-checkbox-label", X),
-      htmlFor: I || L,
+      htmlFor: F || L,
       style: { userSelect: "none" }
     },
-    /* @__PURE__ */ e.createElement(e.Fragment, null, M),
-    ae && /* @__PURE__ */ e.createElement("span", { className: "k-label-optional" }, de)
-  ) : null, x = /* @__PURE__ */ e.createElement("span", { className: he }, ve, Y);
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, N === "before" ? /* @__PURE__ */ e.createElement("div", { dir: "rtl" }, x, y) : N === "after" ? /* @__PURE__ */ e.createElement("div", { dir: "ltr" }, x, y) : /* @__PURE__ */ e.createElement("div", { dir: fe }, x, y));
+    /* @__PURE__ */ e.createElement(e.Fragment, null, I),
+    ae && /* @__PURE__ */ e.createElement("span", { className: "k-label-optional" }, ue)
+  ) : null, x = /* @__PURE__ */ e.createElement("span", { className: ve }, Ce, Y);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, M === "before" ? /* @__PURE__ */ e.createElement("div", { dir: "rtl" }, x, y) : M === "after" ? /* @__PURE__ */ e.createElement("div", { dir: "ltr" }, x, y) : /* @__PURE__ */ e.createElement("div", { dir: he }, x, y));
 });
 A.propTypes = {
   checked: a.bool,
@@ -195,13 +197,15 @@ A.propTypes = {
   required: a.bool,
   validate: a.bool,
   valid: a.bool,
+  autoFocus: a.bool,
   onChange: a.func,
   onFocus: a.func,
   onBlur: a.func
 };
 const $ = {
   size: "medium",
-  rounded: "medium"
+  rounded: "medium",
+  autoFocus: !1
 };
 A.displayName = "KendoCheckbox";
 export {

package/colors/ColorGradient.js

@@ -5,4 +5,4 @@
  * 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 y=require("react"),i=require("prop-types"),h=require("@progress/kendo-react-common"),x=require("../package-metadata.js"),v=require("../slider/Slider.js"),u=require("./utils/misc.js"),r=require("./utils/color-parser.js"),c=require("./utils/color-cache.js"),E=require("./ColorInput.js"),H=require("./ColorContrastLabels.js"),F=require("./ColorContrastSvg.js"),L=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function P(p){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const s in p)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(p,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>p[s]})}}return t.default=p,Object.freeze(t)}const n=P(y),G="rgba",m="rgba(255, 255, 255, 1)",d=class d extends n.Component{constructor(t){super(t),this.wrapper=null,this.onHexChange=(e,a,o)=>{if(this.isUncontrolled){const l=r.getHSV(a);this.setState({hsva:l,backgroundColor:r.getColorFromHue(l.h),rgba:r.getRGBA(a),hex:e})}else c.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,o,o.nativeEvent)},this.onRgbaChange=(e,a)=>{const o=r.getColorFromRGBA(e);if(this.isUncontrolled){const l=r.getHSV(o),C=r.parseColor(o,"hex");this.setState({hsva:l,backgroundColor:r.getColorFromHue(l.h),rgba:e,hex:C})}else c.cacheRgba(this.state.guid,o,e);this.dispatchChangeEvent(o,a.syntheticEvent,a.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),o=e.clientX-a.left,l=e.clientY-a.top,C=u.fitIntoBounds(o,0,a.width),S=u.fitIntoBounds(l,0,a.height),R=Object.assign({},this.state.hsva,{s:C/a.width,v:1-S/a.height});this.handleHsvaChange(R,e,e.nativeEvent)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.focus=()=>{this.wrapper&&h.focusFirstFocusableChild(this.wrapper)},h.validatePackage(x.packageMetadata);const s=t.value||t.defaultValue||r.parseColor(m,G);this.state=Object.assign({},d.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?d.getStateFromValue(t.value,s.guid):null}componentDidMount(){this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1})}componentWillUnmount(){c.removeCachedColor(this.state.guid)}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){let t={};if(!this.state.isFirstRender){const s=this.getGradientRectMetrics(),e=(1-this.state.hsva.v)*s.height,a=this.state.hsva.s*s.width;t.top=`${e}px`,t.left=`${a}px`}return n.createElement("div",{role:"slider",tabIndex:h.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText,"aria-valuenow":parseInt(this.state.hex.substring(1),16),"aria-label":this.props.ariaLabelHSV,"aria-orientation":void 0,"aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:t})}handleHsvaChange(t,s,e){const a=r.getColorFromHSV(t);if(this.isUncontrolled){const o=r.parseColor(a,"hex");this.setState({hsva:t,backgroundColor:r.getColorFromHue(t.h),rgba:r.getRGBA(a),hex:o})}else c.cacheHsva(this.state.guid,a,t);this.dispatchChangeEvent(a,s,e)}dispatchChangeEvent(t,s,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,s){u.isPresent(r.parseColor(t,"hex"))||(t=m);const e=c.getCachedHsva(s,t)||r.getHSV(t),a=c.getCachedRgba(s,t)||r.getRGBA(t),o=c.getCachedHex(s,t)||r.parseColor(t,"hex"),l=r.getColorFromHue(e.h);return{hsva:e,backgroundColor:l,rgba:a,hex:o}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to top, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=L.provideLocalizationService(this),s=h.classNames("k-colorgradient",{"k-disabled":this.props.disabled},this.props.className);return n.createElement("div",{id:this.props.id,role:this.props.role,className:s,"aria-disabled":this.props.disabled?"true":void 0,style:this.props.style,ref:e=>this.wrapper=e,tabIndex:h.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus},n.createElement("div",{className:"k-colorgradient-canvas k-hstack"},n.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},n.createElement(h.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:e=>this.gradientWrapper=e?e.element:void 0},n.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&n.createElement(F.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),n.createElement("div",{className:"k-hsv-controls k-hstack"},n.createElement(v.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!0,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(g.colorGradientHueSliderLabel,g.messages[g.colorGradientHueSliderLabel])}),this.props.opacity&&n.createElement(v.Slider,{value:u.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!0,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:e=>this.alphaSlider=e}))),n.createElement(E,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format}),this.props.backgroundColor&&n.createElement(H.ColorContrastLabels,{bgColor:r.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}))}};d.displayName="ColorGradient",d.propTypes={defaultValue:i.string,value:i.string,onChange:i.func,onFocus:i.func,opacity:i.bool,backgroundColor:i.string,format:i.any,disabled:i.bool,style:i.any,id:i.string,role:i.string,ariaLabel:i.string,ariaLabelledBy:i.string,ariaDescribedBy:i.string,className:i.string},d.defaultProps={opacity:!0,role:"textbox",format:"rgb"};let b=d;const k=h.createPropsContext(),f=h.withIdHOC(h.withPropsContext(k,b));f.displayName="KendoReactColorGradient";exports.ColorGradient=f;exports.ColorGradientPropsContext=k;exports.ColorGradientWithoutContext=b;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),n=require("prop-types"),i=require("@progress/kendo-react-common"),H=require("../package-metadata.js"),m=require("../slider/Slider.js"),v=require("./utils/misc.js"),o=require("./utils/color-parser.js"),d=require("./utils/color-cache.js"),x=require("./ColorInput.js"),w=require("./ColorContrastLabels.js"),G=require("./ColorContrastSvg.js"),D=require("@progress/kendo-react-intl"),p=require("../messages/index.js");function L(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const a in u)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(u,a);Object.defineProperty(t,a,e.get?e:{enumerable:!0,get:()=>u[a]})}}return t.default=u,Object.freeze(t)}const l=L(E),A="rgba",S="rgba(255, 255, 255, 1)",b=2,C=5,c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.hsvGradientRef=l.createRef(),this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,s,r)=>{if(this.isUncontrolled){const h=o.getHSV(s);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(s),hex:e})}else d.cacheHex(this.state.guid,s,e);this.dispatchChangeEvent(s,r,r.nativeEvent)},this.onRgbaChange=(e,s)=>{const r=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(r),g=o.parseColor(r,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:g})}else d.cacheRgba(this.state.guid,r,e);this.dispatchChangeEvent(r,s.syntheticEvent,s.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.onHsvGradientKeyDown=e=>{var s;(s=this.hsvNavigation)==null||s.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,s,r)=>{const h=parseInt(e.style.top,10)+r,g=parseInt(e.style.left,10)+s;e.style.top=`${h}px`,e.style.left=`${g}px`,this.moveDragHandle(g,h)},this.changePosition=e=>{const s=this.getGradientRectMetrics(),r=e.clientX-s.left,h=e.clientY-s.top;this.moveDragHandle(r,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var s;(s=this.navigation)==null||s.triggerKeyboardEvent(e)},i.validatePackage(H.packageMetadata);const a=t.value||t.defaultValue||o.parseColor(S,A);this.state=Object.assign({},c.getStateFromValue(a),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,a){return t.value&&!a.isFirstRender?c.getStateFromValue(t.value,a.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.wrapperRef&&this.hsvGradientRef){let t=0,a=0;this.hsvNavigation=new i.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,s,r)=>{a=r.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,a)},ArrowUp:(e,s,r)=>{a=r.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,a)},ArrowLeft:(e,s,r)=>{t=r.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,s,r)=>{t=r.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,t,0)}}}})}this.wrapperRef&&this.wrapperRef.current&&(this.props.isInsidePopup?this.hsvGradientRef.current&&this.hsvGradientRef.current.focus():this.navigation=new i.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,a,e)=>{i.getActiveElement(document)===t?i.disableNavigatableContainer(t):i.keepFocusInContainer(e,t,i.TABBABLE_ELEMENTS)},Enter:(t,a,e)=>{i.getActiveElement(document)===t&&(i.focusFirstFocusableChild(t),i.enableNavigatableContainer(t))},Escape:(t,a,e)=>{i.getActiveElement(document)!==t&&(t.focus(),i.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid)}componentDidUpdate(t,a){a.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){let t={};if(!this.state.isFirstRender){const a=this.getGradientRectMetrics(),e=(1-this.state.hsva.v)*a.height,s=this.state.hsva.s*a.width;t.top=`${e}px`,t.left=`${s}px`}return l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:i.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText,"aria-valuenow":parseInt(this.state.hex.substring(1),16),"aria-label":this.props.ariaLabelHSV,"aria-orientation":void 0,"aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:t,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(t,a){const e=this.getGradientRectMetrics(),s=e.width,r=e.height,h=v.fitIntoBounds(a,0,r),g=v.fitIntoBounds(t,0,s),y=Object.assign({},this.state.hsva,{s:g/s,v:1-h/r});this.handleHsvaChange(y,{},{})}handleHsvaChange(t,a,e){const s=o.getColorFromHSV(t);if(this.isUncontrolled){const r=o.parseColor(s,"hex");this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(s),hex:r})}else d.cacheHsva(this.state.guid,s,t);this.dispatchChangeEvent(s,a,e)}dispatchChangeEvent(t,a,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:a,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,a){v.isPresent(o.parseColor(t,"hex"))||(t=S);const e=d.getCachedHsva(a,t)||o.getHSV(t),s=d.getCachedRgba(a,t)||o.getRGBA(t),r=d.getCachedHex(a,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:s,hex:r}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to top, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=D.provideLocalizationService(this),a=i.classNames("k-colorgradient",{"k-disabled":this.props.disabled},this.props.className);return l.createElement("div",{id:this.props.id,role:this.props.role,className:a,"aria-disabled":this.props.disabled?"true":void 0,style:this.props.style,ref:this.wrapperRef,tabIndex:i.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus,onKeyDown:this.onKeyDown},l.createElement("div",{className:"k-colorgradient-canvas k-hstack"},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(i.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:e=>this.gradientWrapper=e?e.element:void 0},l.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&l.createElement(G.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),l.createElement("div",{className:"k-hsv-controls k-hstack"},l.createElement(m.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!0,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(p.colorGradientHueSliderLabel,p.messages[p.colorGradientHueSliderLabel])}),this.props.opacity&&l.createElement(m.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!0,min:0,max:100,step:1,ariaLabel:t.toLanguageString(p.colorGradientAlphaSliderLabel,p.messages[p.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:e=>this.alphaSlider=e}))),l.createElement(x,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format}),this.props.backgroundColor&&l.createElement(w.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}))}};c.displayName="ColorGradient",c.propTypes={defaultValue:n.string,value:n.string,onChange:n.func,onFocus:n.func,opacity:n.bool,backgroundColor:n.string,format:n.any,disabled:n.bool,style:n.any,id:n.string,role:n.string,ariaLabel:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,className:n.string},c.defaultProps={opacity:!0,role:"textbox",format:"rgb"};let f=c;const R=i.createPropsContext(),k=i.withIdHOC(i.withPropsContext(R,f));k.displayName="KendoReactColorGradient";exports.ColorGradient=k;exports.ColorGradientPropsContext=R;exports.ColorGradientWithoutContext=f;