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

package/checkbox/Checkbox.mjs

@@ -6,15 +6,15 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as e from "react";
-import a from "prop-types";
-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 * as a from "react";
+import e from "prop-types";
+import { createPropsContext as ye, validatePackage as xe, usePropsContext as Ve, useId as Pe, dispatchEvent as V, Keys as H, useDir as Ee, classNames as P, kendoThemeMaps as U, getTabIndex as Be } from "@progress/kendo-react-common";
+import { packageMetadata as Ie } from "../package-metadata.mjs";
+import { useLocalization as Fe } from "@progress/kendo-react-intl";
 import { messages as Me, checkboxValidation as Ne, checkboxOptionalText as ze } from "../messages/index.mjs";
-const Se = ye(), A = e.forwardRef((W, j) => {
-  xe(Fe);
-  const P = Ve(Se, W), {
+const Se = ye(), A = a.forwardRef((W, j) => {
+  xe(Ie);
+  const E = Ve(Se, W), {
     ariaDescribedBy: G,
     ariaLabelledBy: J,
     checked: B,
@@ -24,19 +24,19 @@ const Se = ye(), A = e.forwardRef((W, j) => {
     defaultChecked: Z,
     disabled: o,
     defaultValue: _,
-    id: F,
-    size: u = $.size,
+    id: I,
+    size: b = $.size,
     rounded: m = $.rounded,
-    label: I,
+    label: F,
     labelPlacement: M,
     name: ee,
     labelOptional: ae,
-    onChange: b,
-    onFocus: p,
-    onBlur: k,
+    onChange: p,
+    onFocus: k,
+    onBlur: f,
     tabIndex: te,
     value: s,
-    required: f,
+    required: i,
     valid: N,
     validationMessage: z,
     validityStyles: S,
@@ -46,12 +46,12 @@ const Se = ye(), A = e.forwardRef((W, j) => {
     touched: Ke,
     modified: Te,
     ...le
-  } = P, l = e.useRef(null), D = e.useCallback(
+  } = E, l = a.useRef(null), D = a.useCallback(
     () => {
       l.current && l.current.focus();
     },
     []
-  ), c = e.useCallback(
+  ), c = a.useCallback(
     () => ({
       element: l.current,
       focus: D,
@@ -61,20 +61,20 @@ const Se = ye(), A = e.forwardRef((W, j) => {
     }),
     [D]
   );
-  e.useImperativeHandle(j, c);
-  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(
+  a.useImperativeHandle(j, c);
+  const [ne, se] = a.useState(Z), [ce, re] = a.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, d = T || r ? s === null ? s : void 0 : s || v, ie = w === null || d === null, L = Pe(), de = Fe(), O = (t) => de.toLanguageString(t, Me[t]), q = O(Ne), ue = O(ze), g = N !== void 0 ? N : i ? !!C : !0;
+  a.useEffect(
     () => {
       l.current && l.current.setCustomValidity && l.current.setCustomValidity(
-        g ? "" : z || R
+        g ? "" : z || q
       );
     },
-    [g, z, R]
+    [g, z, q]
   );
-  const d = e.useCallback(
+  const u = a.useCallback(
     (t, n) => {
-      !r && !o && (re(n), !h && !o && se(n)), b && !o && V(
-        b,
+      !r && !o && (re(n), !h && !o && se(n)), p && !o && V(
+        p,
         t,
         {
           ...c(),
@@ -83,22 +83,22 @@ const Se = ye(), A = e.forwardRef((W, j) => {
         { value: n }
       );
     },
-    [h, o, b, r, c]
-  ), me = e.useCallback(
+    [h, o, p, r, c]
+  ), be = a.useCallback(
     (t) => {
       const n = t.target.checked;
-      d(t, n);
+      u(t, n);
     },
-    [d, s]
-  ), be = e.useCallback(
+    [u, s]
+  ), me = a.useCallback(
     (t) => {
       if (o)
         return;
       const { keyCode: n } = t, ge = t.currentTarget.checked;
-      n === H.space && (t.preventDefault(), t.stopPropagation(), d(t, !ge));
+      n === H.space && (t.preventDefault(), t.stopPropagation(), u(t, !ge));
     },
-    [o, d]
-  ), pe = e.useCallback(
+    [o, u]
+  ), pe = a.useCallback(
     (t) => {
       if (o)
         return;
@@ -106,35 +106,35 @@ const Se = ye(), A = e.forwardRef((W, j) => {
       n === H.space && t.preventDefault();
     },
     [o]
-  ), ke = e.useCallback(
+  ), ke = a.useCallback(
     (t) => {
-      p && !o && V(
-        p,
+      k && !o && V(
+        k,
         t,
         c(),
         void 0
       );
     },
-    [p, o, c]
-  ), fe = e.useCallback(
+    [k, o, c]
+  ), fe = a.useCallback(
     (t) => {
-      k && !o && V(
-        k,
+      f && !o && V(
+        f,
         t,
         c(),
         void 0
       );
     },
-    [k, o, c]
-  ), he = Pe(l, P.dir), ve = E(
+    [f, o, c]
+  ), he = Ee(l, E.dir), ve = P(
     "k-checkbox-wrap",
     Q
-  ), q = {
+  ), R = {
     type: "checkbox",
-    className: E(
+    className: P(
       "k-checkbox",
       {
-        [`k-checkbox-${U.sizeMap[u] || u}`]: u,
+        [`k-checkbox-${U.sizeMap[b] || b}`]: b,
         [`k-rounded-${U.roundedMap[m] || m}`]: m,
         "k-indeterminate": ie,
         "k-disabled": o,
@@ -143,64 +143,65 @@ const Se = ye(), A = e.forwardRef((W, j) => {
     ),
     ref: l,
     name: ee,
-    id: F || L,
+    id: I || L,
     disabled: o,
-    required: f !== void 0 ? f : !1,
+    required: i !== void 0 ? i : !1,
     tabIndex: Be(te, o),
     role: "checkbox",
     checked: !!w,
     "aria-describedby": G,
     "aria-labelledby": J,
     "aria-disabled": o || void 0,
+    "aria-required": i,
     autoFocus: oe,
     ...le,
-    onChange: me,
-    onKeyDown: be,
+    onChange: be,
+    onKeyDown: me,
     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 = I !== void 0 ? /* @__PURE__ */ e.createElement(
+    d === void 0 ? /* @__PURE__ */ a.createElement("input", { ...R }) : /* @__PURE__ */ a.createElement("input", { ...R, value: K ? void 0 : d === null ? "" : d })
+  ), y = F !== void 0 ? /* @__PURE__ */ a.createElement(
     "label",
     {
-      className: E("k-checkbox-label", X),
-      htmlFor: F || L,
+      className: P("k-checkbox-label", X),
+      htmlFor: I || L,
       style: { userSelect: "none" }
     },
-    /* @__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));
+    F,
+    ae && /* @__PURE__ */ a.createElement("span", { className: "k-label-optional" }, ue)
+  ) : null, x = /* @__PURE__ */ a.createElement("span", { className: ve }, Ce, Y);
+  return /* @__PURE__ */ a.createElement(a.Fragment, null, M === "before" ? /* @__PURE__ */ a.createElement("div", { dir: "rtl" }, x, y) : M === "after" ? /* @__PURE__ */ a.createElement("div", { dir: "ltr" }, x, y) : /* @__PURE__ */ a.createElement("div", { dir: he }, x, y));
 });
 A.propTypes = {
-  checked: a.bool,
-  className: a.string,
-  defaultChecked: a.bool,
-  defaultValue: a.any,
-  dir: a.string,
-  disabled: a.bool,
-  id: a.string,
-  size: a.oneOf([null, "small", "medium", "large"]),
-  rounded: a.oneOf([null, "small", "medium", "large"]),
-  ariaLabelledBy: a.string,
-  ariaDescribedBy: a.string,
-  label: a.any,
-  labelPlacement: a.string,
-  labelOptional: a.bool,
-  name: a.string,
-  tabIndex: a.number,
-  value: a.any,
-  validationMessage: a.string,
-  required: a.bool,
-  validate: a.bool,
-  valid: a.bool,
-  autoFocus: a.bool,
-  onChange: a.func,
-  onFocus: a.func,
-  onBlur: a.func
+  checked: e.bool,
+  className: e.string,
+  defaultChecked: e.bool,
+  defaultValue: e.any,
+  dir: e.string,
+  disabled: e.bool,
+  id: e.string,
+  size: e.oneOf([null, "small", "medium", "large"]),
+  rounded: e.oneOf([null, "small", "medium", "large"]),
+  ariaLabelledBy: e.string,
+  ariaDescribedBy: e.string,
+  label: e.any,
+  labelPlacement: e.string,
+  labelOptional: e.bool,
+  name: e.string,
+  tabIndex: e.number,
+  value: e.any,
+  validationMessage: e.string,
+  required: e.bool,
+  validate: e.bool,
+  valid: e.bool,
+  autoFocus: e.bool,
+  onChange: e.func,
+  onFocus: e.func,
+  onBlur: e.func
 };
 const $ = {
   size: "medium",

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 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;
+"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(){const 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;

package/colors/ColorGradient.mjs

@@ -66,16 +66,16 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
       const s = this.getGradientRectMetrics(), i = e.clientX - s.left, n = e.clientY - s.top;
       this.moveDragHandle(i, n);
     }, this.onFocus = (e) => {
-      this.props.onFocus && this.props.onFocus.call(
-        void 0,
-        { nativeEvent: e, target: this }
-      );
+      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);
     }, L(P);
     const a = t.value || t.defaultValue || d(w, Z);
-    this.state = Object.assign({}, h.getStateFromValue(a), { isFirstRender: !0, guid: this.props.id });
+    this.state = Object.assign({}, h.getStateFromValue(a), {
+      isFirstRender: !0,
+      guid: this.props.id
+    });
   }
   /**
    * @hidden
@@ -146,7 +146,7 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
    * @hidden
    */
   renderRectangleDragHandle() {
-    let t = {};
+    const 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`;
@@ -172,11 +172,10 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
    * @hidden
    */
   moveDragHandle(t, a) {
-    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = y(a, 0, i), l = y(t, 0, s), D = Object.assign(
-      {},
-      this.state.hsva,
-      { s: l / s, v: 1 - n / i }
-    );
+    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = y(a, 0, i), l = y(t, 0, s), D = Object.assign({}, this.state.hsva, {
+      s: l / s,
+      v: 1 - n / i
+    });
     this.handleHsvaChange(D, {}, {});
   }
   /**
@@ -195,10 +194,12 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
    * @hidden
    */
   dispatchChangeEvent(t, a, e) {
-    this.props.onChange && this.props.onChange.call(
-      void 0,
-      { syntheticEvent: a, nativeEvent: e, target: this, value: t }
-    );
+    this.props.onChange && this.props.onChange.call(void 0, {
+      syntheticEvent: a,
+      nativeEvent: e,
+      target: this,
+      value: t
+    });
   }
   /**
    * @hidden
@@ -282,7 +283,10 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
           onChange: this.onHueSliderChange,
           className: "k-hue-slider k-colorgradient-slider",
           disabled: this.props.disabled,
-          ariaLabel: t.toLanguageString(E, x[E])
+          ariaLabel: t.toLanguageString(
+            E,
+            x[E]
+          )
         }
       ), this.props.opacity && /* @__PURE__ */ r.createElement(
         k,
@@ -293,7 +297,10 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
           min: 0,
           max: 100,
           step: 1,
-          ariaLabel: t.toLanguageString(H, x[H]),
+          ariaLabel: t.toLanguageString(
+            H,
+            x[H]
+          ),
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
           disabled: this.props.disabled,
@@ -312,13 +319,7 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
           defaultInputMode: this.props.format
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ r.createElement(
-        q,
-        {
-          bgColor: p(this.props.backgroundColor),
-          rgba: this.state.rgba
-        }
-      )
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(q, { bgColor: p(this.props.backgroundColor), rgba: this.state.rgba })
     );
   }
 };
@@ -344,7 +345,12 @@ h.displayName = "ColorGradient", h.propTypes = {
   format: "rgb"
 };
 let f = h;
-const ee = M(), te = _(B(ee, f));
+const ee = M(), te = _(
+  B(
+    ee,
+    f
+  )
+);
 te.displayName = "KendoReactColorGradient";
 export {
   te as ColorGradient,