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

package/checkbox/Checkbox.js

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

package/checkbox/Checkbox.mjs

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

package/colors/ColorContrastLabels.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),d=require("@progress/kendo-react-intl"),t=require("../messages/index.js"),C=require("./utils/color-parser.js"),c=require("@progress/kendo-react-common"),s=require("@progress/kendo-svg-icons");function I(n){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(a,o,l.get?l:{enumerable:!0,get:()=>n[o]})}}return a.default=n,Object.freeze(a)}const e=I(b);class g extends e.Component{render(){const a=d.provideLocalizationService(this),o=a.toLanguageString(t.colorGradientContrastRatio,t.messages[t.colorGradientContrastRatio]),l=a.toLanguageString(t.colorGradientAALevel,t.messages[t.colorGradientAALevel]),u=a.toLanguageString(t.colorGradientAAALevel,t.messages[t.colorGradientAAALevel]),p=a.toLanguageString(t.colorGradientPass,t.messages[t.colorGradientPass]),k=a.toLanguageString(t.colorGradientFail,t.messages[t.colorGradientFail]),r=C.getContrastFromTwoRGBAs(this.props.rgba,this.props.bgColor),v=4.5.toFixed(1),A=7 .toFixed(1),x=`${o}: ${r.toFixed(2)}`,E=`${l}: ${v}`,L=`${u}: ${A}`,i=e.createElement("span",{className:"k-contrast-validation k-text-success"},p," ",e.createElement(c.IconWrap,{name:"check",icon:s.checkIcon})),m=e.createElement("span",{className:"k-contrast-validation k-text-error"},k," ",e.createElement(c.IconWrap,{name:"x",icon:s.xIcon}));return e.createElement("div",{className:"k-vbox k-colorgradient-color-contrast"},e.createElement("div",{className:"k-contrast-ratio"},e.createElement("span",{className:"k-contrast-ratio-text"},x),r>=4.5?e.createElement("span",{className:"k-contrast-validation k-text-success"},e.createElement(c.IconWrap,{name:"check",icon:s.checkIcon}),r>=7&&e.createElement(c.IconWrap,{name:"check",icon:s.checkIcon})):e.createElement("span",{className:"k-contrast-validation k-text-error"},e.createElement(c.IconWrap,{name:"x",icon:s.xIcon}))),e.createElement("div",null,e.createElement("span",null,E),r>=4.5?i:m),e.createElement("div",null,e.createElement("span",null,L),r>=7?i:m))}}d.registerForLocalization(g);exports.ColorContrastLabels=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),d=require("@progress/kendo-react-intl"),t=require("../messages/index.js"),C=require("./utils/color-parser.js"),c=require("@progress/kendo-react-common"),s=require("@progress/kendo-svg-icons");function I(n){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(a,o,l.get?l:{enumerable:!0,get:()=>n[o]})}}return a.default=n,Object.freeze(a)}const e=I(b);class g extends e.Component{render(){const a=d.provideLocalizationService(this),o=a.toLanguageString(t.colorGradientContrastRatio,t.messages[t.colorGradientContrastRatio]),l=a.toLanguageString(t.colorGradientAALevel,t.messages[t.colorGradientAALevel]),u=a.toLanguageString(t.colorGradientAAALevel,t.messages[t.colorGradientAAALevel]),p=a.toLanguageString(t.colorGradientPass,t.messages[t.colorGradientPass]),k=a.toLanguageString(t.colorGradientFail,t.messages[t.colorGradientFail]),r=C.getContrastFromTwoRGBAs(this.props.rgba,this.props.bgColor),v=4.5.toFixed(1),A=7 .toFixed(1),x=`${o}: ${r.toFixed(2)}`,E=`${l}: ${v}`,L=`${u}: ${A}`,i=e.createElement("span",{className:"k-contrast-validation !k-text-success"},p," ",e.createElement(c.IconWrap,{name:"check",icon:s.checkIcon})),m=e.createElement("span",{className:"k-contrast-validation !k-text-error"},k," ",e.createElement(c.IconWrap,{name:"x",icon:s.xIcon}));return e.createElement("div",{className:"k-vbox k-colorgradient-color-contrast"},e.createElement("div",{className:"k-contrast-ratio"},e.createElement("span",{className:"k-contrast-ratio-text"},x),r>=4.5?e.createElement("span",{className:"k-contrast-validation !k-text-success"},e.createElement(c.IconWrap,{name:"check",icon:s.checkIcon}),r>=7&&e.createElement(c.IconWrap,{name:"check",icon:s.checkIcon})):e.createElement("span",{className:"k-contrast-validation !k-text-error"},e.createElement(c.IconWrap,{name:"x",icon:s.xIcon}))),e.createElement("div",null,e.createElement("span",null,E),r>=4.5?i:m),e.createElement("div",null,e.createElement("span",null,L),r>=7?i:m))}}d.registerForLocalization(g);exports.ColorContrastLabels=g;

package/colors/ColorContrastLabels.mjs

@@ -22,8 +22,8 @@ class G extends e.Component {
     ), v = t.toLanguageString(
       m,
       o[m]
-    ), A = t.toLanguageString(g, o[g]), E = t.toLanguageString(d, o[d]), a = F(this.props.rgba, this.props.bgColor), u = 4.5.toFixed(1), L = 7 .toFixed(1), C = `${x}: ${a.toFixed(2)}`, f = `${k}: ${u}`, h = `${v}: ${L}`, s = /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-success" }, A, " ", /* @__PURE__ */ e.createElement(n, { name: "check", icon: r })), c = /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-error" }, E, " ", /* @__PURE__ */ e.createElement(n, { name: "x", icon: p }));
-    return /* @__PURE__ */ e.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" }, /* @__PURE__ */ e.createElement("div", { className: "k-contrast-ratio" }, /* @__PURE__ */ e.createElement("span", { className: "k-contrast-ratio-text" }, C), a >= 4.5 ? /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-success" }, /* @__PURE__ */ e.createElement(n, { name: "check", icon: r }), a >= 7 && /* @__PURE__ */ e.createElement(n, { name: "check", icon: r })) : /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-error" }, /* @__PURE__ */ e.createElement(n, { name: "x", icon: p }))), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, f), a >= 4.5 ? s : c), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, h), a >= 7 ? s : c));
+    ), A = t.toLanguageString(g, o[g]), E = t.toLanguageString(d, o[d]), a = F(this.props.rgba, this.props.bgColor), u = 4.5.toFixed(1), L = 7 .toFixed(1), C = `${x}: ${a.toFixed(2)}`, f = `${k}: ${u}`, h = `${v}: ${L}`, s = /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation !k-text-success" }, A, " ", /* @__PURE__ */ e.createElement(n, { name: "check", icon: r })), c = /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation !k-text-error" }, E, " ", /* @__PURE__ */ e.createElement(n, { name: "x", icon: p }));
+    return /* @__PURE__ */ e.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" }, /* @__PURE__ */ e.createElement("div", { className: "k-contrast-ratio" }, /* @__PURE__ */ e.createElement("span", { className: "k-contrast-ratio-text" }, C), a >= 4.5 ? /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation !k-text-success" }, /* @__PURE__ */ e.createElement(n, { name: "check", icon: r }), a >= 7 && /* @__PURE__ */ e.createElement(n, { name: "check", icon: r })) : /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation !k-text-error" }, /* @__PURE__ */ e.createElement(n, { name: "x", icon: p }))), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, f), a >= 4.5 ? s : c), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, h), a >= 7 ? s : c));
   }
 }
 S(G);

package/colors/ColorGradient.js

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

package/colors/ColorGradient.mjs

@@ -7,35 +7,35 @@
  */
 import * as r from "react";
 import o from "prop-types";
-import { withIdHOC as F, withPropsContext as N, createPropsContext as _, validatePackage as I, getLicenseMessage as T, canUseDOM as O, Navigation as C, getActiveElement as b, disableNavigatableContainer as k, focusFirstFocusableChild as z, enableNavigatableContainer as V, keepFocusInContainer as B, TABBABLE_ELEMENTS as P, getTabIndex as S, classNames as K, kendoThemeMaps as U, Draggable as W, WatermarkOverlay as $ } from "@progress/kendo-react-common";
+import { withIdHOC as G, withPropsContext as A, createPropsContext as N, validatePackage as _, getLicenseMessage as I, canUseDOM as T, Navigation as C, getActiveElement as u, disableNavigatableContainer as k, focusFirstFocusableChild as O, enableNavigatableContainer as z, keepFocusInContainer as V, TABBABLE_ELEMENTS as B, getTabIndex as S, classNames as P, kendoThemeMaps as K, Draggable as U, WatermarkOverlay as W } from "@progress/kendo-react-common";
 import { packageMetadata as R } from "../package-metadata.mjs";
 import { Slider as y } from "../slider/Slider.mjs";
 import { isPresent as E, fitIntoBounds as w } from "./utils/misc.mjs";
-import { getHSV as m, getRGBA as p, getColorFromHue as c, getColorFromRGBA as X, parseColor as d, getColorFromHSV as Y } from "./utils/color-parser.mjs";
-import { cacheHex as j, cacheRgba as q, removeCachedColor as J, cacheHsva as Q, getCachedHsva as Z, getCachedRgba as ee, getCachedHex as te } from "./utils/color-cache.mjs";
-import se from "./ColorInput.mjs";
-import { ColorContrastLabels as ae } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as ie } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as L } from "@progress/kendo-react-intl";
-import { colorGradientHSVAreaAriaLabel as x, messages as g, colorGradientAriaLabel as H, colorGradientHueSliderLabel as D, colorGradientAlphaSliderLabel as G } from "../messages/index.mjs";
-const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h extends r.Component {
+import { getHSV as b, getRGBA as p, getColorFromHue as c, getColorFromRGBA as $, parseColor as d, getColorFromHSV as X } from "./utils/color-parser.mjs";
+import { cacheHex as Y, cacheRgba as j, removeCachedColor as q, cacheHsva as J, getCachedHsva as Q, getCachedRgba as Z, getCachedHex as ee } from "./utils/color-cache.mjs";
+import te from "./ColorInput.mjs";
+import { ColorContrastLabels as se } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as ae } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as x } from "@progress/kendo-react-intl";
+import { colorGradientHSVAreaAriaLabel as H, messages as m, colorGradientHueSliderLabel as L, colorGradientAlphaSliderLabel as D } from "../messages/index.mjs";
+const ie = "rgba", M = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
   constructor(t) {
     super(t), this.wrapperRef = r.createRef(), this.hsvGradientRef = r.createRef(), this.showLicenseWatermark = !1, this.focus = () => {
       this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
     }, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
-        const n = m(s);
+        const n = b(s);
         this.setState({ hsva: n, backgroundColor: c(n.h), rgba: p(s), hex: e });
       } else
-        j(this.state.guid, s, e);
+        Y(this.state.guid, s, e);
       this.dispatchChangeEvent(s, i, i.nativeEvent);
     }, this.onRgbaChange = (e, s) => {
-      const i = X(e);
+      const i = $(e);
       if (this.isUncontrolled) {
-        const n = m(i), l = d(i, "hex");
+        const n = b(i), l = d(i, "hex");
         this.setState({ hsva: n, backgroundColor: c(n.h), rgba: e, hex: l });
       } else
-        q(this.state.guid, i, e);
+        j(this.state.guid, i, e);
       this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
     }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
@@ -69,8 +69,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
     }, this.onKeyDown = (e) => {
       var s;
       (s = this.navigation) == null || s.triggerKeyboardEvent(e);
-    }, this.showLicenseWatermark = !I(R, { component: "ColorGradient" }), this.licenseMessage = T(R);
-    const a = t.value || t.defaultValue || d(M, re);
+    }, this.showLicenseWatermark = !_(R, { component: "ColorGradient" }), this.licenseMessage = I(R);
+    const a = t.value || t.defaultValue || d(M, ie);
     this.state = Object.assign({}, h.getStateFromValue(a), {
       isFirstRender: !0,
       guid: this.props.id
@@ -86,7 +86,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   componentDidMount() {
-    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = O && window.ResizeObserver && new window.ResizeObserver(() => {
+    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = T && window.ResizeObserver && new window.ResizeObserver(() => {
       this.forceUpdate();
     }), this.resizeObserver && this.resizeObserver.observe(this.gradientWrapper)), this.wrapperRef && this.hsvGradientRef) {
       let t = 0, a = 0;
@@ -97,16 +97,16 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
         keyboardEvents: {
           keydown: {
             ArrowDown: (e, s, i) => {
-              a = i.shiftKey ? this.props.gradientSliderSmallStep || v : this.props.gradientSliderStep || u, this.onHsvGradientValueChange(e, 0, a);
+              a = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, 0, a);
             },
             ArrowUp: (e, s, i) => {
-              a = i.shiftKey ? -(this.props.gradientSliderSmallStep || v) : -(this.props.gradientSliderStep || u), this.onHsvGradientValueChange(e, 0, a);
+              a = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, 0, a);
             },
             ArrowLeft: (e, s, i) => {
-              t = i.shiftKey ? -(this.props.gradientSliderSmallStep || v) : -(this.props.gradientSliderStep || u), this.onHsvGradientValueChange(e, t, 0);
+              t = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, t, 0);
             },
             ArrowRight: (e, s, i) => {
-              t = i.shiftKey ? this.props.gradientSliderSmallStep || v : this.props.gradientSliderStep || u, this.onHsvGradientValueChange(e, t, 0);
+              t = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, t, 0);
             }
           }
         }
@@ -119,13 +119,13 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
       keyboardEvents: {
         keydown: {
           Tab: (t, a, e) => {
-            b(document) === t ? k(t) : B(e, t, P);
+            u(document) === t ? k(t) : V(e, t, B);
           },
           Enter: (t, a, e) => {
-            b(document) === t && (z(t), V(t));
+            u(document) === t && (O(t), z(t));
           },
           Escape: (t, a, e) => {
-            b(document) !== t && (t.focus(), k(t));
+            u(document) !== t && (t.focus(), k(t));
           }
         }
       }
@@ -135,7 +135,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   componentWillUnmount() {
-    J(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
+    q(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
   }
   /**
    * @hidden
@@ -147,7 +147,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   renderRectangleDragHandle() {
-    const t = L(this), a = {};
+    const t = x(this), a = {};
     if (!this.state.isFirstRender) {
       const e = this.getGradientRectMetrics(), s = (1 - this.state.hsva.v) * e.height, i = this.state.hsva.s * e.width;
       a.top = `${s}px`, a.left = `${i}px`;
@@ -162,9 +162,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
         "aria-valuenow": Math.round((1 - this.state.hsva.v) * 100),
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": this.props.ariaLabelHSV || t.toLanguageString(x, g[x]),
+        "aria-label": this.props.ariaLabelHSV || t.toLanguageString(H, m[H]),
         "aria-orientation": "undefined",
-        "aria-disabled": this.props.disabled ? "true" : void 0,
         className: "k-hsv-draghandle k-draghandle",
         style: a,
         onKeyDown: this.onHsvGradientKeyDown
@@ -175,18 +174,18 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   moveDragHandle(t, a) {
-    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = w(a, 0, i), l = w(t, 0, s), A = Object.assign({}, this.state.hsva, {
+    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = w(a, 0, i), l = w(t, 0, s), F = Object.assign({}, this.state.hsva, {
       s: l / s,
       v: 1 - n / i
     });
-    this.handleHsvaChange(A, {}, {});
+    this.handleHsvaChange(F, {}, {});
   }
   /**
    * @hidden
    */
   handleHsvaChange(t, a, e) {
-    const s = Y(t), i = d(s, "hex");
-    this.isUncontrolled || Q(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: c(t.h), rgba: p(s), hex: i }), this.dispatchChangeEvent(s, a, e);
+    const s = X(t), i = d(s, "hex");
+    this.isUncontrolled || J(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: c(t.h), rgba: p(s), hex: i }), this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
@@ -204,7 +203,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    */
   static getStateFromValue(t, a) {
     E(d(t, "hex")) || (t = M);
-    const e = Z(a, t) || m(t), s = ee(a, t) || p(t), i = te(a, t) || d(t, "hex"), n = c(e.h);
+    const e = Q(a, t) || b(t), s = Z(a, t) || p(t), i = ee(a, t) || d(t, "hex"), n = c(e.h);
     return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
@@ -229,16 +228,16 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   render() {
-    const t = L(this);
+    const t = x(this);
     return /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
         role: this.props.role || "textbox",
-        className: K(
+        className: P(
           "k-colorgradient",
           {
-            [`k-colorgradient-${U.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            [`k-colorgradient-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
             "k-disabled": this.props.disabled
           },
           this.props.className
@@ -247,14 +246,14 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
         style: { position: "relative", ...this.props.style },
         ref: this.wrapperRef,
         tabIndex: S(this.props.tabIndex, this.props.disabled),
-        "aria-label": this.props.role === "none" ? void 0 : this.props.ariaLabel || t.toLanguageString(H, g[H]),
+        "aria-label": this.props.role === "none" ? void 0 : this.props.ariaLabel,
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy,
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown
       },
       /* @__PURE__ */ r.createElement("div", { className: `k-colorgradient-canvas ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ r.createElement(
-        W,
+        U,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
@@ -272,7 +271,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
           this.renderRectangleDragHandle()
         )
       ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ r.createElement(
-        ie,
+        ae,
         {
           metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
           hsva: this.state.hsva,
@@ -291,8 +290,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
           className: "k-hue-slider k-colorgradient-slider",
           disabled: this.props.disabled,
           ariaLabel: t.toLanguageString(
-            D,
-            g[D]
+            L,
+            m[L]
           )
         }
       ), this.props.opacity && /* @__PURE__ */ r.createElement(
@@ -305,8 +304,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
           max: 100,
           step: 1,
           ariaLabel: t.toLanguageString(
-            G,
-            g[G]
+            D,
+            m[D]
           ),
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
@@ -317,7 +316,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
         }
       ))),
       /* @__PURE__ */ r.createElement(
-        se,
+        te,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -331,8 +330,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
           rounded: this.props.rounded
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ r.createElement(ae, { bgColor: p(this.props.backgroundColor), rgba: this.state.rgba }),
-      this.showLicenseWatermark && /* @__PURE__ */ r.createElement($, { message: this.licenseMessage })
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(se, { bgColor: p(this.props.backgroundColor), rgba: this.state.rgba }),
+      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(W, { message: this.licenseMessage })
     );
   }
 };
@@ -360,15 +359,15 @@ h.displayName = "ColorGradient", h.propTypes = {
   size: void 0
 };
 let f = h;
-const oe = _(), ne = F(
-  N(
-    oe,
+const re = N(), oe = G(
+  A(
+    re,
     f
   )
 );
-ne.displayName = "KendoReactColorGradient";
+oe.displayName = "KendoReactColorGradient";
 export {
-  ne as ColorGradient,
-  oe as ColorGradientPropsContext,
+  oe as ColorGradient,
+  re as ColorGradientPropsContext,
   f as ColorGradientWithoutContext
 };