@progress/kendo-react-inputs 7.2.4-develop.2 → 7.2.4-develop.4

package/checkbox/Checkbox.js

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

package/checkbox/Checkbox.mjs

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

package/colors/ColorContrastLabels.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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;

package/colors/ColorContrastLabels.mjs

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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";
+import { getContrastFromTwoRGBAs as F } from "./utils/color-parser.mjs";
+import { IconWrap as n } from "@progress/kendo-react-common";
+import { checkIcon as r, xIcon as p } from "@progress/kendo-svg-icons";
+class G extends e.Component {
+  render() {
+    const t = N(this), x = t.toLanguageString(i, o[i]), k = t.toLanguageString(l, o[l]), u = 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 }));
+    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);
+export {
+  G as ColorContrastLabels
+};

package/colors/ColorContrastSvg.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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;

package/colors/ColorContrastSvg.mjs

@@ -0,0 +1,52 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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, { s: i / t.width, v: 1 - l / t.height }), o = S(m(T(a)), 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) => {
+      const e = [];
+      for (let s = 0; s <= t.width; s += t.width / i) {
+        const l = d(n, s, 0, t.height, r ? (a, o) => a < o : (a, o) => a > o);
+        l !== null && e.push([s, l]);
+      }
+      return e;
+    }, c = f(A(b));
+    return p(u(C, v), c) + p(u(C, v, !0), c) + p(u(g, v), c) + p(u(g, v, !0), c);
+  }
+  shouldComponentUpdate(t) {
+    return !(t.hsva.h === this.props.hsva.h && t.hsva.a === this.props.hsva.a && this.props.backgroundColor === t.backgroundColor);
+  }
+  render() {
+    return /* @__PURE__ */ 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
+        }
+      }
+    );
+  }
+}
+export {
+  w as ColorContrastSvg
+};

package/colors/ColorGradient.js

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

package/colors/ColorGradient.mjs

@@ -0,0 +1,293 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as o from "react";
+import i from "prop-types";
+import { focusFirstFocusableChild as E, validatePackage as F, getTabIndex as u, classNames as H, Draggable as L, createPropsContext as D, withIdHOC as N, withPropsContext as A } from "@progress/kendo-react-common";
+import { packageMetadata as B } from "../package-metadata.mjs";
+import { Slider as m } from "../slider/Slider.mjs";
+import { fitIntoBounds as C, isPresent as v } from "./utils/misc.mjs";
+import { getHSV as g, getColorFromHue as d, getRGBA as c, getColorFromRGBA as P, parseColor as l, getColorFromHSV as w } from "./utils/color-parser.mjs";
+import { cacheHex as I, cacheRgba as M, removeCachedColor as T, cacheHsva as V, getCachedHsva as G, getCachedRgba as O, getCachedHex as U } from "./utils/color-cache.mjs";
+import j from "./ColorInput.mjs";
+import { ColorContrastLabels as W } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as $ } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as X } from "@progress/kendo-react-intl";
+import { colorGradientHueSliderLabel as f, messages as k, colorGradientAlphaSliderLabel as S } from "../messages/index.mjs";
+const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component {
+  constructor(e) {
+    super(e), this.wrapper = null, this.onHexChange = (t, s, r) => {
+      if (this.isUncontrolled) {
+        const n = g(s);
+        this.setState({ hsva: n, backgroundColor: d(n.h), rgba: c(s), hex: t });
+      } else
+        I(this.state.guid, s, t);
+      this.dispatchChangeEvent(s, r, r.nativeEvent);
+    }, this.onRgbaChange = (t, s) => {
+      const r = P(t);
+      if (this.isUncontrolled) {
+        const n = g(r), p = l(r, "hex");
+        this.setState({ hsva: n, backgroundColor: d(n.h), rgba: t, hex: p });
+      } else
+        M(this.state.guid, r, t);
+      this.dispatchChangeEvent(r, s.syntheticEvent, s.nativeEvent);
+    }, this.onAlphaSliderChange = (t) => {
+      this.handleHsvaChange(
+        Object.assign({}, this.state.hsva, { a: t.value / 100 }),
+        t.syntheticEvent,
+        t.nativeEvent
+      );
+    }, this.onHueSliderChange = (t) => {
+      this.handleHsvaChange(
+        Object.assign({}, this.state.hsva, { h: t.value }),
+        t.syntheticEvent,
+        t.nativeEvent
+      );
+    }, this.onDrag = (t) => {
+      this.gradientWrapper.classList.add("k-dragging"), this.changePosition(t.event);
+    }, this.onRelease = () => {
+      this.gradientWrapper.classList.remove("k-dragging");
+    }, this.onGradientWrapperClick = (t) => {
+      this.changePosition(t);
+    }, this.changePosition = (t) => {
+      const s = this.getGradientRectMetrics(), r = t.clientX - s.left, n = t.clientY - s.top, p = C(r, 0, s.width), x = C(n, 0, s.height), y = Object.assign(
+        {},
+        this.state.hsva,
+        { s: p / s.width, v: 1 - x / s.height }
+      );
+      this.handleHsvaChange(y, t, t.nativeEvent);
+    }, this.onFocus = (t) => {
+      this.props.onFocus && this.props.onFocus.call(
+        void 0,
+        { nativeEvent: t, target: this }
+      );
+    }, this.focus = () => {
+      this.wrapper && E(this.wrapper);
+    }, F(B);
+    const a = e.value || e.defaultValue || l(R, Y);
+    this.state = Object.assign({}, h.getStateFromValue(a), { isFirstRender: !0, guid: this.props.id });
+  }
+  /**
+   * @hidden
+   */
+  static getDerivedStateFromProps(e, a) {
+    return e.value && !a.isFirstRender ? h.getStateFromValue(e.value, a.guid) : null;
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 });
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    T(this.state.guid);
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate(e, a) {
+    a.backgroundColor !== this.state.backgroundColor && this.setAlphaSliderBackground(this.state.backgroundColor);
+  }
+  /**
+   * @hidden
+   */
+  renderRectangleDragHandle() {
+    let e = {};
+    if (!this.state.isFirstRender) {
+      const a = this.getGradientRectMetrics(), t = (1 - this.state.hsva.v) * a.height, s = this.state.hsva.s * a.width;
+      e.top = `${t}px`, e.left = `${s}px`;
+    }
+    return /* @__PURE__ */ o.createElement(
+      "div",
+      {
+        role: "slider",
+        tabIndex: u(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: e
+      }
+    );
+  }
+  /**
+   * @hidden
+   */
+  handleHsvaChange(e, a, t) {
+    const s = w(e);
+    if (this.isUncontrolled) {
+      const r = l(s, "hex");
+      this.setState({ hsva: e, backgroundColor: d(e.h), rgba: c(s), hex: r });
+    } else
+      V(this.state.guid, s, e);
+    this.dispatchChangeEvent(s, a, t);
+  }
+  /**
+   * @hidden
+   */
+  dispatchChangeEvent(e, a, t) {
+    this.props.onChange && this.props.onChange.call(
+      void 0,
+      { syntheticEvent: a, nativeEvent: t, target: this, value: e }
+    );
+  }
+  /**
+   * @hidden
+   */
+  static getStateFromValue(e, a) {
+    v(l(e, "hex")) || (e = R);
+    const t = G(a, e) || g(e), s = O(a, e) || c(e), r = U(a, e) || l(e, "hex"), n = d(t.h);
+    return { hsva: t, backgroundColor: n, rgba: s, hex: r };
+  }
+  /**
+   * @hidden
+   */
+  setAlphaSliderBackground(e) {
+    this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to top, transparent, ${e})`);
+  }
+  /**
+   * @hidden
+   */
+  get isUncontrolled() {
+    return this.props.value === void 0;
+  }
+  /**
+   * @hidden
+   */
+  getGradientRectMetrics() {
+    return this.gradientWrapper.getBoundingClientRect();
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const e = X(this), a = H("k-colorgradient", { "k-disabled": this.props.disabled }, this.props.className);
+    return /* @__PURE__ */ o.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: (t) => this.wrapper = t,
+        tabIndex: u(this.props.tabIndex, this.props.disabled),
+        "aria-label": this.props.ariaLabel,
+        "aria-labelledby": this.props.ariaLabelledBy,
+        "aria-describedby": this.props.ariaDescribedBy,
+        onFocus: this.onFocus
+      },
+      /* @__PURE__ */ o.createElement("div", { className: "k-colorgradient-canvas k-hstack" }, /* @__PURE__ */ o.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ o.createElement(
+        L,
+        {
+          onDrag: this.onDrag,
+          onRelease: this.onRelease,
+          ref: (t) => this.gradientWrapper = t ? t.element : void 0
+        },
+        /* @__PURE__ */ o.createElement(
+          "div",
+          {
+            className: "k-hsv-gradient",
+            style: { touchAction: "none" },
+            onClick: this.onGradientWrapperClick
+          },
+          this.renderRectangleDragHandle()
+        )
+      ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ o.createElement(
+        $,
+        {
+          metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
+          hsva: this.state.hsva,
+          backgroundColor: this.props.backgroundColor
+        }
+      )), /* @__PURE__ */ o.createElement("div", { className: "k-hsv-controls k-hstack" }, /* @__PURE__ */ o.createElement(
+        m,
+        {
+          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: e.toLanguageString(f, k[f])
+        }
+      ), this.props.opacity && /* @__PURE__ */ o.createElement(
+        m,
+        {
+          value: v(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
+          buttons: !1,
+          vertical: !0,
+          min: 0,
+          max: 100,
+          step: 1,
+          ariaLabel: e.toLanguageString(S, k[S]),
+          onChange: this.onAlphaSliderChange,
+          className: "k-alpha-slider k-colorgradient-slider",
+          disabled: this.props.disabled,
+          ref: (t) => this.alphaSlider = t
+        }
+      ))),
+      /* @__PURE__ */ o.createElement(
+        j,
+        {
+          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 && /* @__PURE__ */ o.createElement(
+        W,
+        {
+          bgColor: c(this.props.backgroundColor),
+          rgba: this.state.rgba
+        }
+      )
+    );
+  }
+};
+h.displayName = "ColorGradient", h.propTypes = {
+  defaultValue: i.string,
+  value: i.string,
+  onChange: i.func,
+  onFocus: i.func,
+  opacity: i.bool,
+  backgroundColor: i.string,
+  format: i.any,
+  disabled: i.bool,
+  style: i.any,
+  id: i.string,
+  role: i.string,
+  ariaLabel: i.string,
+  ariaLabelledBy: i.string,
+  ariaDescribedBy: i.string,
+  className: i.string
+}, h.defaultProps = {
+  opacity: !0,
+  role: "textbox",
+  format: "rgb"
+};
+let b = h;
+const z = D(), K = N(A(z, b));
+K.displayName = "KendoReactColorGradient";
+export {
+  K as ColorGradient,
+  z as ColorGradientPropsContext,
+  b as ColorGradientWithoutContext
+};

package/colors/ColorInput.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";const u=require("react"),l=require("../numerictextbox/NumericTextBox.js"),m=require("./HexInput.js"),x=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-react-labels"),k=require("@progress/kendo-svg-icons"),c=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function f(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const a=f(u),r=["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||r[1]}}render(){const e=c.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientHex]),n=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),p=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientG]),d=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientB]),h=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientA]),b=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(x.Button,{"aria-label":b,fillMode:"flat",icon:"caret-alt-expand",svgIcon:k.caretAltExpandIcon,className:"k-colorgradient-toggle-mode k-icon-button",onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&a.createElement("div",{className:"k-vstack k-flex-1"},a.createElement("span",{className:"k-hex-value k-textbox k-input"},a.createElement(m,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled})),a.createElement(o.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(l.NumericTextBox,{inputType:"number",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(o.Label,{className:"k-colorgradient-input-label"},n)),a.createElement("div",{className:"k-vstack"},a.createElement(l.NumericTextBox,{inputType:"number",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(o.Label,{className:"k-colorgradient-input-label"},p)),a.createElement("div",{className:"k-vstack"},a.createElement(l.NumericTextBox,{inputType:"number",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(o.Label,{className:"k-colorgradient-input-label"},d))),this.state.inputMode==="rgba"&&a.createElement("div",{className:"k-vstack"},this.props.opacity&&a.createElement(l.NumericTextBox,{inputType:"number",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(o.Label,{className:"k-colorgradient-input-label"},h)))}dispatchRgbaChange(e,t){let 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]})}}}c.registerForIntl(g);c.registerForLocalization(g);module.exports=g;