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

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"),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),Q=o.createPropsContext(),B=a.forwardRef((i,u)=>{const s=o.usePropsContext(Q,i),{ariaDescribedBy:m,ariaLabelledBy:X,checked:O,className:Y,labelClassName:Z,children:ee,defaultChecked:ae,disabled:t,defaultValue:te,id:f,size:v=J.size,rounded:g=J.rounded,label:R,labelPlacement:q,name:w,labelOptional:ne,onChange:C,onFocus:y,onBlur:x,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,P=O!==void 0,b=L,V=b?d:re,M=P?O:b?void 0:se,_=w||f,H=M===void 0&&V,U=H?V:M,k=H||b?d===null?d:void 0:d||V,de=U===null||k===null,W=o.useId(),ue=Pe.useLocalization(),$=n=>ue.toLanguageString(n,S.messages[n]),A=$(S.checkboxValidation),be=$(S.checkboxOptionalText),E=z!==void 0?z:p?!!M:!0;a.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(E?"":T||A)},[E,T,A]);const h=a.useCallback((n,r)=>{!b&&!t&&(ie(r),!P&&!t&&ce(r)),C&&!t&&o.dispatchEvent(C,n,{...c(),value:r},{value:r})},[P,t,C,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=>{y&&!t&&o.dispatchEvent(y,n,c(),void 0)},[y,t,c]),ve=a.useCallback(n=>{x&&!t&&o.dispatchEvent(x,n,c(),void 0)},[x,t,c]),ge=o.useDir(l,s.dir),Ce=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[g]||g}`]:g,"k-indeterminate":de,"k-disabled":t,"k-invalid k-invalid":!(E||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"],"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}),N=R!==void 0?a.createElement("label",{className:o.classNames("k-checkbox-label",Z),htmlFor:f||W,style:{userSelect:"none"}},R,ne&&a.createElement("span",{className:"k-label-optional"},be)):null,I=a.createElement("span",{className:Ce},ye,ee);return q==="before"?a.createElement("div",{dir:"rtl"},I,N):q==="after"?a.createElement("div",{dir:"ltr"},I,N):a.createElement("div",{dir:ge},I,N)});B.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};B.displayName="KendoCheckbox";exports.Checkbox=B;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,66 +7,66 @@
  */
 import * as e from "react";
 import a from "prop-types";
-import { usePropsContext as ye, useWebMcpRegister as Ve, useId as Pe, dispatchEvent as E, useKendoPaste as Ee, useDir as Me, classNames as M, 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,
-    checked: B,
-    className: Y,
-    labelClassName: Z,
-    children: ee,
-    defaultChecked: ae,
+const Se = Ie(), G = e.forwardRef((J, Q) => {
+  const i = ye(Se, J), {
+    ariaDescribedBy: X,
+    ariaLabelledBy: Y,
+    checked: I,
+    className: Z,
+    labelClassName: ee,
+    children: ae,
+    defaultChecked: te,
     disabled: t,
-    defaultValue: te,
-    id: m,
-    size: p = _.size,
-    rounded: k = _.rounded,
-    label: I,
-    labelPlacement: N,
-    name: w,
-    labelOptional: oe,
-    onChange: h,
-    onFocus: f,
-    onBlur: v,
-    tabIndex: ne,
+    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: 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, C = B !== void 0, r = D, g = r ? c : re, x = C ? B : r ? void 0 : se, L = w || m, O = x === void 0 && g, q = O ? g : x, u = O || r ? c === null ? c : void 0 : c || g, de = q === null || u === null, H = Pe(), ue = Ne(), U = (o) => ue.toLanguageString(o, we[o]), W = U(ze), be = U(Fe), y = z !== void 0 ? z : d ? !!x : !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(y ? "" : F || W);
-  }, [y, 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), !C && !t && ce(s)), h && !t && E(
-        h,
+      !r && !t && (de(s), !g && !t && re(s)), f && !t && E(
+        f,
         o,
         {
           ...l(),
@@ -75,28 +75,28 @@ const Se = Ie(), j = e.forwardRef((G, J) => {
         { value: s }
       );
     },
-    [C, t, h, r, l]
+    [g, t, f, r, l]
   ), me = e.useCallback(
     (o) => {
       const s = {
         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) => {
-      f && !t && E(f, o, l(), void 0);
+      v && !t && E(v, o, l(), void 0);
     },
-    [f, t, l]
+    [v, t, l]
   ), ve = e.useCallback(
     (o) => {
-      v && !t && E(v, o, l(), void 0);
+      C && !t && E(C, o, l(), void 0);
     },
-    [v, t, l]
-  ), Ce = Me(n, i.dir), ge = M("k-checkbox-wrap", Y), $ = {
+    [C, t, l]
+  ), Ce = Ee(n, i.dir), ge = M("k-checkbox-wrap", Z), A = {
     type: "checkbox",
     className: M("k-checkbox", {
-      [`k-checkbox-${A.sizeMap[p] || p}`]: p,
-      [`k-rounded-${A.roundedMap[k] || k}`]: k,
-      "k-indeterminate": de,
+      [`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": !(y || 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"],
+    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 })
-  ), V = I !== 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: M("k-checkbox-label", Z),
-      htmlFor: m || H,
+      className: M("k-checkbox-label", ee),
+      htmlFor: p || U,
       style: { userSelect: "none" }
     },
-    I,
-    oe && /* @__PURE__ */ e.createElement("span", { className: "k-label-optional" }, be)
-  ) : null, P = /* @__PURE__ */ e.createElement("span", { className: ge }, xe, ee);
-  return N === "before" ? /* @__PURE__ */ e.createElement("div", { dir: "rtl" }, P, V) : N === "after" ? /* @__PURE__ */ e.createElement("div", { dir: "ltr" }, P, V) : /* @__PURE__ */ e.createElement("div", { dir: Ce }, P, V);
+    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;