@progress/kendo-react-inputs 9.3.1 → 9.4.0-develop.10

package/checkbox/Checkbox.js

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

package/checkbox/Checkbox.mjs

@@ -5,7 +5,6 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
 import * as a from "react";
 import e from "prop-types";
 import { createPropsContext as ye, validatePackage as xe, usePropsContext as Ve, useId as Pe, dispatchEvent as V, Keys as H, useDir as Ee, classNames as P, kendoThemeMaps as U, getTabIndex as Be } from "@progress/kendo-react-common";

package/colors/ColorContrastLabels.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const 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

@@ -5,7 +5,6 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
 import * as e from "react";
 import { provideLocalizationService as N, registerForLocalization as S } from "@progress/kendo-react-intl";
 import { colorGradientContrastRatio as i, messages as o, colorGradientAALevel as l, colorGradientAAALevel as m, colorGradientPass as g, colorGradientFail as d } from "../messages/index.mjs";
@@ -20,10 +19,10 @@ class G extends e.Component {
     ), k = t.toLanguageString(
       l,
       o[l]
-    ), u = t.toLanguageString(
+    ), v = t.toLanguageString(
       m,
       o[m]
-    ), v = t.toLanguageString(g, o[g]), A = t.toLanguageString(d, o[d]), a = F(this.props.rgba, this.props.bgColor), E = 4.5.toFixed(1), L = 7 .toFixed(1), C = `${x}: ${a.toFixed(2)}`, f = `${k}: ${E}`, h = `${u}: ${L}`, s = /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-success" }, v, " ", /* @__PURE__ */ e.createElement(n, { name: "check", icon: r })), c = /* @__PURE__ */ e.createElement("span", { className: "k-contrast-validation k-text-error" }, A, " ", /* @__PURE__ */ e.createElement(n, { name: "x", icon: p }));
+    ), 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));
   }
 }

package/colors/ColorContrastSvg.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),i=require("./utils/svg-calc.js"),p=require("./utils/color-parser.js");function S(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const r in l)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(l,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>l[r]})}}return e.default=l,Object.freeze(e)}const h=S(b),C=4.5,m=7,f=16;class A extends h.Component{renderSvgCurveLine(){const e=this.props.metrics,r=(a,u,n,t,s)=>{const g=(n+t)/2,v=Object.assign({},this.props.hsva,{s:u/e.width,v:1-g/e.height}),c=p.getContrastFromTwoRGBAs(p.getRGBA(p.getColorFromHSV(v)),p.getRGBA(this.props.backgroundColor||""));return n+.5>t?c<a+1&&c>a-1?g:null:s(c,a)?r(a,u,n,t-(t-n)/2,s):r(a,u,n+(t-n)/2,t,s)},o=(a,u,n=!1)=>{const t=[];for(let s=0;s<=e.width;s+=e.width/u){const g=r(a,s,0,e.height,n?(v,c)=>v<c:(v,c)=>v>c);g!==null&&t.push([s,g])}return t},d=i.bezierCommand(i.controlPoint(i.line));return i.svgPath(o(C,f),d)+i.svgPath(o(C,f,!0),d)+i.svgPath(o(m,f),d)+i.svgPath(o(m,f,!0),d)}shouldComponentUpdate(e){return!(e.hsva.h===this.props.hsva.h&&e.hsva.a===this.props.hsva.a&&this.props.backgroundColor===e.backgroundColor)}render(){return h.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",className:"k-color-contrast-svg",dangerouslySetInnerHTML:{__html:this.renderSvgCurveLine()},style:{position:"absolute",overflow:"visible",pointerEvents:"none",left:0,top:0,zIndex:3}})}}exports.ColorContrastSvg=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),i=require("./utils/svg-calc.js"),p=require("./utils/color-parser.js");function S(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const r in l)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(l,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>l[r]})}}return e.default=l,Object.freeze(e)}const h=S(b),C=4.5,m=7,f=16;class A extends h.Component{renderSvgCurveLine(){const e=this.props.metrics,r=(a,u,n,t,s)=>{const g=(n+t)/2,v=Object.assign({},this.props.hsva,{s:u/e.width,v:1-g/e.height}),c=p.getContrastFromTwoRGBAs(p.getRGBA(p.getColorFromHSV(v)),p.getRGBA(this.props.backgroundColor||""));return n+.5>t?c<a+1&&c>a-1?g:null:s(c,a)?r(a,u,n,t-(t-n)/2,s):r(a,u,n+(t-n)/2,t,s)},o=(a,u,n=!1)=>{const t=[];for(let s=0;s<=e.width;s+=e.width/u){const g=r(a,s,0,e.height,n?(v,c)=>v<c:(v,c)=>v>c);g!==null&&t.push([s,g])}return t},d=i.bezierCommand(i.controlPoint(i.line));return i.svgPath(o(C,f),d)+i.svgPath(o(C,f,!0),d)+i.svgPath(o(m,f),d)+i.svgPath(o(m,f,!0),d)}shouldComponentUpdate(e){return!(e.hsva.h===this.props.hsva.h&&e.hsva.a===this.props.hsva.a&&this.props.backgroundColor===e.backgroundColor)}render(){return h.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",className:"k-color-contrast-svg",dangerouslySetInnerHTML:{__html:this.renderSvgCurveLine()},style:{position:"absolute",overflow:"visible",pointerEvents:"none",left:0,top:0,zIndex:3}})}}exports.ColorContrastSvg=A;

package/colors/ColorContrastSvg.mjs

@@ -5,33 +5,32 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
 import * as h from "react";
 import { svgPath as p, bezierCommand as f, controlPoint as A, line as b } from "./utils/svg-calc.mjs";
 import { getContrastFromTwoRGBAs as S, getRGBA as m, getColorFromHSV as T } from "./utils/color-parser.mjs";
 const C = 4.5, g = 7, v = 16;
 class w extends h.Component {
   renderSvgCurveLine() {
-    const t = this.props.metrics, d = (n, i, r, e, s) => {
-      const l = (r + e) / 2, a = Object.assign({}, this.props.hsva, {
+    const t = this.props.metrics, d = (o, i, r, e, s) => {
+      const a = (r + e) / 2, l = Object.assign({}, this.props.hsva, {
         s: i / t.width,
-        v: 1 - l / t.height
-      }), o = S(
-        m(T(a)),
+        v: 1 - a / t.height
+      }), n = S(
+        m(T(l)),
         m(this.props.backgroundColor || "")
       );
-      return r + 0.5 > e ? o < n + 1 && o > n - 1 ? l : null : s(o, n) ? d(n, i, r, e - (e - r) / 2, s) : d(n, i, r + (e - r) / 2, e, s);
-    }, u = (n, i, r = !1) => {
+      return r + 0.5 > e ? n < o + 1 && n > o - 1 ? a : null : s(n, o) ? d(o, i, r, e - (e - r) / 2, s) : d(o, i, r + (e - r) / 2, e, s);
+    }, u = (o, i, r = !1) => {
       const e = [];
       for (let s = 0; s <= t.width; s += t.width / i) {
-        const l = d(
-          n,
+        const a = d(
+          o,
           s,
           0,
           t.height,
-          r ? (a, o) => a < o : (a, o) => a > o
+          r ? (l, n) => l < n : (l, n) => l > n
         );
-        l !== null && e.push([s, l]);
+        a !== null && e.push([s, a]);
       }
       return e;
     }, c = f(A(b));

package/colors/ColorGradient.js

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

package/colors/ColorGradient.mjs

@@ -5,36 +5,35 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
-import * as r from "react";
-import o from "prop-types";
-import { validatePackage as L, Navigation as m, getActiveElement as u, disableNavigatableContainer as C, keepFocusInContainer as F, TABBABLE_ELEMENTS as G, focusFirstFocusableChild as A, enableNavigatableContainer as N, getTabIndex as S, classNames as I, Draggable as T, createPropsContext as M, withIdHOC as _, withPropsContext as B } from "@progress/kendo-react-common";
-import { packageMetadata as P } from "../package-metadata.mjs";
-import { Slider as k } from "../slider/Slider.mjs";
+import * as o from "react";
+import r from "prop-types";
+import { validatePackage as L, Navigation as f, getActiveElement as u, disableNavigatableContainer as C, keepFocusInContainer as F, TABBABLE_ELEMENTS as G, focusFirstFocusableChild as A, enableNavigatableContainer as N, getTabIndex as k, classNames as I, kendoThemeMaps as M, Draggable as _, createPropsContext as T, withIdHOC as B, withPropsContext as P } from "@progress/kendo-react-common";
+import { packageMetadata as V } from "../package-metadata.mjs";
+import { Slider as S } from "../slider/Slider.mjs";
 import { isPresent as R, fitIntoBounds as y } from "./utils/misc.mjs";
-import { getHSV as b, getColorFromHue as c, getRGBA as p, getColorFromRGBA as V, parseColor as d, getColorFromHSV as K } from "./utils/color-parser.mjs";
-import { cacheHex as U, cacheRgba as O, removeCachedColor as W, cacheHsva as $, getCachedHsva as j, getCachedRgba as X, getCachedHex as Y } from "./utils/color-cache.mjs";
-import z from "./ColorInput.mjs";
-import { ColorContrastLabels as q } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as J } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as Q } from "@progress/kendo-react-intl";
+import { getHSV as b, getColorFromHue as p, getRGBA as c, getColorFromRGBA as K, parseColor as d, getColorFromHSV as U } from "./utils/color-parser.mjs";
+import { cacheHex as z, cacheRgba as O, removeCachedColor as $, cacheHsva as W, getCachedHsva as j, getCachedRgba as X, getCachedHex as Y } from "./utils/color-cache.mjs";
+import q from "./ColorInput.mjs";
+import { ColorContrastLabels as J } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as Q } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as Z } from "@progress/kendo-react-intl";
 import { colorGradientHueSliderLabel as E, messages as x, colorGradientAlphaSliderLabel as H } from "../messages/index.mjs";
-const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
+const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends o.Component {
   constructor(t) {
-    super(t), this.wrapperRef = r.createRef(), this.hsvGradientRef = r.createRef(), this.focus = () => {
+    super(t), this.wrapperRef = o.createRef(), this.hsvGradientRef = o.createRef(), this.focus = () => {
       this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
     }, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
         const n = b(s);
-        this.setState({ hsva: n, backgroundColor: c(n.h), rgba: p(s), hex: e });
+        this.setState({ hsva: n, backgroundColor: p(n.h), rgba: c(s), hex: e });
       } else
-        U(this.state.guid, s, e);
+        z(this.state.guid, s, e);
       this.dispatchChangeEvent(s, i, i.nativeEvent);
     }, this.onRgbaChange = (e, s) => {
-      const i = V(e);
+      const i = K(e);
       if (this.isUncontrolled) {
         const n = b(i), l = d(i, "hex");
-        this.setState({ hsva: n, backgroundColor: c(n.h), rgba: e, hex: l });
+        this.setState({ hsva: n, backgroundColor: p(n.h), rgba: e, hex: l });
       } else
         O(this.state.guid, i, e);
       this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
@@ -70,8 +69,8 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
     }, this.onKeyDown = (e) => {
       var s;
       (s = this.navigation) == null || s.triggerKeyboardEvent(e);
-    }, L(P);
-    const a = t.value || t.defaultValue || d(w, Z);
+    }, L(V);
+    const a = t.value || t.defaultValue || d(w, ee);
     this.state = Object.assign({}, h.getStateFromValue(a), {
       isFirstRender: !0,
       guid: this.props.id
@@ -89,7 +88,7 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
   componentDidMount() {
     if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.wrapperRef && this.hsvGradientRef) {
       let t = 0, a = 0;
-      this.hsvNavigation = new m({
+      this.hsvNavigation = new f({
         tabIndex: 0,
         root: this.hsvGradientRef,
         selectors: [".k-hsv-rectangle .k-hsv-draghandle"],
@@ -111,7 +110,7 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
         }
       });
     }
-    this.wrapperRef && this.wrapperRef.current && (this.props.isInsidePopup ? this.hsvGradientRef.current && this.hsvGradientRef.current.focus() : this.navigation = new m({
+    this.wrapperRef && this.wrapperRef.current && (this.props.isInsidePopup ? this.hsvGradientRef.current && this.hsvGradientRef.current.focus() : this.navigation = new f({
       tabIndex: 0,
       root: this.wrapperRef,
       selectors: [".k-colorgradient"],
@@ -134,7 +133,7 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
    * @hidden
    */
   componentWillUnmount() {
-    W(this.state.guid);
+    $(this.state.guid);
   }
   /**
    * @hidden
@@ -151,12 +150,12 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
       const a = this.getGradientRectMetrics(), e = (1 - this.state.hsva.v) * a.height, s = this.state.hsva.s * a.width;
       t.top = `${e}px`, t.left = `${s}px`;
     }
-    return /* @__PURE__ */ r.createElement(
+    return /* @__PURE__ */ o.createElement(
       "div",
       {
         ref: this.hsvGradientRef,
         role: "slider",
-        tabIndex: S(this.props.tabIndex, this.props.disabled),
+        tabIndex: k(this.props.tabIndex, this.props.disabled),
         "aria-valuetext": this.props.ariaValueText,
         "aria-valuenow": parseInt(this.state.hex.substring(1), 16),
         "aria-label": this.props.ariaLabelHSV,
@@ -182,8 +181,8 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
    * @hidden
    */
   handleHsvaChange(t, a, e) {
-    const s = K(t), i = d(s, "hex");
-    this.isUncontrolled || $(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 = U(t), i = d(s, "hex");
+    this.isUncontrolled || W(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: p(t.h), rgba: c(s), hex: i }), this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
@@ -201,14 +200,14 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
    */
   static getStateFromValue(t, a) {
     R(d(t, "hex")) || (t = w);
-    const e = j(a, t) || b(t), s = X(a, t) || p(t), i = Y(a, t) || d(t, "hex"), n = c(e.h);
+    const e = j(a, t) || b(t), s = X(a, t) || c(t), i = Y(a, t) || d(t, "hex"), n = p(e.h);
     return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
    * @hidden
    */
   setAlphaSliderBackground(t) {
-    this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to top, transparent, ${t})`);
+    this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to ${this.props._adaptive ? "right" : "top"}, transparent, ${t})`);
   }
   /**
    * @hidden
@@ -226,31 +225,38 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
    * @hidden
    */
   render() {
-    const t = Q(this), a = I("k-colorgradient", { "k-disabled": this.props.disabled }, this.props.className);
-    return /* @__PURE__ */ r.createElement(
+    const t = Z(this);
+    return /* @__PURE__ */ o.createElement(
       "div",
       {
         id: this.props.id,
         role: this.props.role,
-        className: a,
+        className: I(
+          "k-colorgradient",
+          {
+            [`k-colorgradient-${M.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: this.props.style,
         ref: this.wrapperRef,
-        tabIndex: S(this.props.tabIndex, this.props.disabled),
+        tabIndex: k(this.props.tabIndex, this.props.disabled),
         "aria-label": this.props.ariaLabel,
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy,
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown
       },
-      /* @__PURE__ */ r.createElement("div", { className: "k-colorgradient-canvas k-hstack" }, /* @__PURE__ */ r.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ r.createElement(
-        T,
+      /* @__PURE__ */ o.createElement("div", { className: `k-colorgradient-canvas ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ o.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ o.createElement(
+        _,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
-          ref: (e) => this.gradientWrapper = e ? e.element : void 0
+          ref: (a) => this.gradientWrapper = a ? a.element : void 0
         },
-        /* @__PURE__ */ r.createElement(
+        /* @__PURE__ */ o.createElement(
           "div",
           {
             className: "k-hsv-gradient",
@@ -259,19 +265,19 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
           },
           this.renderRectangleDragHandle()
         )
-      ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ r.createElement(
-        J,
+      ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ o.createElement(
+        Q,
         {
           metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
           hsva: this.state.hsva,
           backgroundColor: this.props.backgroundColor
         }
-      )), /* @__PURE__ */ r.createElement("div", { className: "k-hsv-controls k-hstack" }, /* @__PURE__ */ r.createElement(
-        k,
+      )), /* @__PURE__ */ o.createElement("div", { className: `k-hsv-controls ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ o.createElement(
+        S,
         {
           value: this.state.hsva.h,
           buttons: !1,
-          vertical: !0,
+          vertical: !this.props._adaptive,
           min: 0,
           max: 360,
           step: 5,
@@ -283,12 +289,12 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
             x[E]
           )
         }
-      ), this.props.opacity && /* @__PURE__ */ r.createElement(
-        k,
+      ), this.props.opacity && /* @__PURE__ */ o.createElement(
+        S,
         {
           value: R(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
           buttons: !1,
-          vertical: !0,
+          vertical: !this.props._adaptive,
           min: 0,
           max: 100,
           step: 1,
@@ -299,11 +305,11 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
           disabled: this.props.disabled,
-          ref: (e) => this.alphaSlider = e
+          ref: (a) => this.alphaSlider = a
         }
       ))),
-      /* @__PURE__ */ r.createElement(
-        z,
+      /* @__PURE__ */ o.createElement(
+        q,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -311,44 +317,48 @@ const Z = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extend
           onHexChange: this.onHexChange,
           opacity: this.props.opacity,
           disabled: this.props.disabled,
-          defaultInputMode: this.props.format
+          defaultInputMode: this.props.format,
+          size: this.props.size,
+          fillMode: this.props.fillMode
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ r.createElement(q, { bgColor: p(this.props.backgroundColor), rgba: this.state.rgba })
+      this.props.backgroundColor && /* @__PURE__ */ o.createElement(J, { bgColor: c(this.props.backgroundColor), rgba: this.state.rgba })
     );
   }
 };
 h.displayName = "ColorGradient", h.propTypes = {
-  defaultValue: o.string,
-  value: o.string,
-  onChange: o.func,
-  onFocus: o.func,
-  opacity: o.bool,
-  backgroundColor: o.string,
-  format: o.any,
-  disabled: o.bool,
-  style: o.any,
-  id: o.string,
-  role: o.string,
-  ariaLabel: o.string,
-  ariaLabelledBy: o.string,
-  ariaDescribedBy: o.string,
-  className: o.string
+  defaultValue: r.string,
+  value: r.string,
+  onChange: r.func,
+  onFocus: r.func,
+  opacity: r.bool,
+  backgroundColor: r.string,
+  format: r.any,
+  disabled: r.bool,
+  style: r.any,
+  id: r.string,
+  role: r.string,
+  ariaLabel: r.string,
+  ariaLabelledBy: r.string,
+  ariaDescribedBy: r.string,
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large", null])
 }, h.defaultProps = {
   opacity: !0,
   role: "textbox",
-  format: "rgb"
+  format: "rgb",
+  size: "medium"
 };
-let f = h;
-const ee = M(), te = _(
-  B(
-    ee,
-    f
+let m = h;
+const te = T(), se = B(
+  P(
+    te,
+    m
   )
 );
-te.displayName = "KendoReactColorGradient";
+se.displayName = "KendoReactColorGradient";
 export {
-  te as ColorGradient,
-  ee as ColorGradientPropsContext,
-  f as ColorGradientWithoutContext
+  se as ColorGradient,
+  te as ColorGradientPropsContext,
+  m as ColorGradientWithoutContext
 };

package/colors/ColorInput.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";const b=require("react"),i=require("../numerictextbox/NumericTextBox.js"),m=require("./HexInput.js"),u=require("@progress/kendo-react-buttons"),x=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function f(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const a=f(b),r=["rgba","rgb","hex"];class c extends a.Component{constructor(e){super(e),this.onRgbaRChange=t=>{this.dispatchRgbaChange({r:t.value},t)},this.onRgbaGChange=t=>{this.dispatchRgbaChange({g:t.value},t)},this.onRgbaBChange=t=>{this.dispatchRgbaChange({b:t.value},t)},this.onRgbaAChange=t=>{this.dispatchRgbaChange({a:t.value},t)},this.state={inputMode:e.defaultInputMode||r[1]}}render(){const e=l.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientHex,s.messages[s.colorGradientHex]),n=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),g=e.toLanguageString(s.colorGradientG,s.messages[s.colorGradientG]),d=e.toLanguageString(s.colorGradientB,s.messages[s.colorGradientB]),p=e.toLanguageString(s.colorGradientA,s.messages[s.colorGradientA]),h=e.toLanguageString(s.colorGradientToggleInputsButton,s.messages[s.colorGradientToggleInputsButton]);return a.createElement("div",{className:"k-colorgradient-inputs k-hstack"},a.createElement("div",{className:"k-vstack"},a.createElement(u.Button,{"aria-label":h,fillMode:"flat",icon:"caret-alt-expand",svgIcon:x.caretAltExpandIcon,className:"k-colorgradient-toggle-mode",onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&a.createElement("div",{className:"k-vstack k-flex-1"},a.createElement(m,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},t)),(this.state.inputMode==="rgb"||this.state.inputMode==="rgba")&&a.createElement(a.Fragment,null,a.createElement("div",{className:"k-vstack"},a.createElement(i.NumericTextBox,{value:this.props.rgba.r,ariaLabel:String(this.props.rgba.r),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},n)),a.createElement("div",{className:"k-vstack"},a.createElement(i.NumericTextBox,{value:this.props.rgba.g,ariaLabel:String(this.props.rgba.g),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},g)),a.createElement("div",{className:"k-vstack"},a.createElement(i.NumericTextBox,{value:this.props.rgba.b,ariaLabel:String(this.props.rgba.b),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},d))),this.state.inputMode==="rgba"&&a.createElement("div",{className:"k-vstack"},this.props.opacity&&a.createElement(i.NumericTextBox,{value:this.props.rgba.a,ariaLabel:String(this.props.rgba.a),min:0,max:1,step:.01,spinners:!1,format:"n2",onChange:this.onRgbaAChange,disabled:this.props.disabled}),this.props.opacity&&a.createElement("label",{className:"k-colorgradient-input-label"},p)))}dispatchRgbaChange(e,t){const n={...this.props.rgba};e.r!==void 0&&(n.r=e.r),e.g!==void 0&&(n.g=e.g),e.b!==void 0&&(n.b=e.b),e.a!==void 0&&(n.a=e.a),this.props.onRgbaChange(n,t)}onToggleModeChange(){const e=r.length-1===r.indexOf(this.state.inputMode)?0:r.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:r[e]});else{const t=r[e]==="rgba"?e+1:e;this.setState({inputMode:r[t]})}}}l.registerForIntl(c);l.registerForLocalization(c);module.exports=c;
+"use strict";const b=require("react"),n=require("../numerictextbox/NumericTextBox.js"),m=require("./HexInput.js"),u=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function x(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=x(b),o=["rgba","rgb","hex"];class g extends a.Component{constructor(e){super(e),this.onRgbaRChange=t=>{this.dispatchRgbaChange({r:t.value},t)},this.onRgbaGChange=t=>{this.dispatchRgbaChange({g:t.value},t)},this.onRgbaBChange=t=>{this.dispatchRgbaChange({b:t.value},t)},this.onRgbaAChange=t=>{this.dispatchRgbaChange({a:t.value},t)},this.state={inputMode:e.defaultInputMode||o[1]}}render(){const e=l.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientHex,s.messages[s.colorGradientHex]),i=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),c=e.toLanguageString(s.colorGradientG,s.messages[s.colorGradientG]),p=e.toLanguageString(s.colorGradientB,s.messages[s.colorGradientB]),d=e.toLanguageString(s.colorGradientA,s.messages[s.colorGradientA]),h=e.toLanguageString(s.colorGradientToggleInputsButton,s.messages[s.colorGradientToggleInputsButton]);return a.createElement("div",{className:"k-colorgradient-inputs k-hstack"},a.createElement("div",{className:"k-vstack"},a.createElement(u.Button,{"aria-label":h,fillMode:"flat",icon:"caret-alt-expand",svgIcon:f.caretAltExpandIcon,className:"k-colorgradient-toggle-mode",size:this.props.size,onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&a.createElement("div",{className:"k-vstack k-flex-1"},a.createElement(m,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},t)),(this.state.inputMode==="rgb"||this.state.inputMode==="rgba")&&a.createElement(a.Fragment,null,a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.r,ariaLabel:String(this.props.rgba.r),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},i)),a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.g,ariaLabel:String(this.props.rgba.g),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},c)),a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.b,ariaLabel:String(this.props.rgba.b),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},p))),this.state.inputMode==="rgba"&&a.createElement("div",{className:"k-vstack"},this.props.opacity&&a.createElement(n.NumericTextBox,{value:this.props.rgba.a,ariaLabel:String(this.props.rgba.a),min:0,max:1,step:.01,spinners:!1,format:"n2",onChange:this.onRgbaAChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),this.props.opacity&&a.createElement("label",{className:"k-colorgradient-input-label"},d)))}dispatchRgbaChange(e,t){const i={...this.props.rgba};e.r!==void 0&&(i.r=e.r),e.g!==void 0&&(i.g=e.g),e.b!==void 0&&(i.b=e.b),e.a!==void 0&&(i.a=e.a),this.props.onRgbaChange(i,t)}onToggleModeChange(){const e=o.length-1===o.indexOf(this.state.inputMode)?0:o.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:o[e]});else{const t=o[e]==="rgba"?e+1:e;this.setState({inputMode:o[t]})}}}l.registerForIntl(g);l.registerForLocalization(g);module.exports=g;