@progress/kendo-react-inputs 14.5.0-develop.9 → 15.0.0-develop.1

package/colors/ColorGradient.mjs

@@ -7,35 +7,35 @@
  */
 import * as r from "react";
 import o from "prop-types";
-import { withIdHOC as F, withPropsContext as G, createPropsContext as M, validatePackage as A, getLicenseMessage as N, canUseDOM as I, Navigation as f, getActiveElement as b, disableNavigatableContainer as C, focusFirstFocusableChild as _, enableNavigatableContainer as T, keepFocusInContainer as O, TABBABLE_ELEMENTS as z, getTabIndex as k, classNames as B, kendoThemeMaps as P, Draggable as V, WatermarkOverlay as K } from "@progress/kendo-react-common";
+import { withIdHOC as F, withPropsContext as N, createPropsContext as _, validatePackage as I, getLicenseMessage as T, canUseDOM as O, Navigation as C, getActiveElement as b, disableNavigatableContainer as k, focusFirstFocusableChild as z, enableNavigatableContainer as V, keepFocusInContainer as B, TABBABLE_ELEMENTS as P, getTabIndex as S, classNames as K, kendoThemeMaps as U, Draggable as W, WatermarkOverlay as $ } from "@progress/kendo-react-common";
 import { packageMetadata as R } from "../package-metadata.mjs";
-import { Slider as S } from "../slider/Slider.mjs";
-import { isPresent as y, fitIntoBounds as E } from "./utils/misc.mjs";
-import { getHSV as u, getRGBA as p, getColorFromHue as c, getColorFromRGBA as U, parseColor as d, getColorFromHSV as W } from "./utils/color-parser.mjs";
-import { cacheHex as $, cacheRgba as j, removeCachedColor as X, cacheHsva as Y, getCachedHsva as q, getCachedRgba as J, getCachedHex as Q } from "./utils/color-cache.mjs";
-import Z from "./ColorInput.mjs";
-import { ColorContrastLabels as ee } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as te } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as se } from "@progress/kendo-react-intl";
-import { colorGradientHueSliderLabel as w, messages as x, colorGradientAlphaSliderLabel as H } from "../messages/index.mjs";
-const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
+import { Slider as y } from "../slider/Slider.mjs";
+import { isPresent as E, fitIntoBounds as w } from "./utils/misc.mjs";
+import { getHSV as m, getRGBA as p, getColorFromHue as c, getColorFromRGBA as X, parseColor as d, getColorFromHSV as Y } from "./utils/color-parser.mjs";
+import { cacheHex as j, cacheRgba as q, removeCachedColor as J, cacheHsva as Q, getCachedHsva as Z, getCachedRgba as ee, getCachedHex as te } from "./utils/color-cache.mjs";
+import se from "./ColorInput.mjs";
+import { ColorContrastLabels as ae } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as ie } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as L } from "@progress/kendo-react-intl";
+import { colorGradientHSVAreaAriaLabel as x, messages as g, colorGradientAriaLabel as H, colorGradientHueSliderLabel as D, colorGradientAlphaSliderLabel as G } from "../messages/index.mjs";
+const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h extends r.Component {
   constructor(t) {
     super(t), this.wrapperRef = r.createRef(), this.hsvGradientRef = r.createRef(), this.showLicenseWatermark = !1, this.focus = () => {
       this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
     }, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
-        const n = u(s);
+        const n = m(s);
         this.setState({ hsva: n, backgroundColor: c(n.h), rgba: p(s), hex: e });
       } else
-        $(this.state.guid, s, e);
+        j(this.state.guid, s, e);
       this.dispatchChangeEvent(s, i, i.nativeEvent);
     }, this.onRgbaChange = (e, s) => {
-      const i = U(e);
+      const i = X(e);
       if (this.isUncontrolled) {
-        const n = u(i), l = d(i, "hex");
+        const n = m(i), l = d(i, "hex");
         this.setState({ hsva: n, backgroundColor: c(n.h), rgba: e, hex: l });
       } else
-        j(this.state.guid, i, e);
+        q(this.state.guid, i, e);
       this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
     }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
@@ -69,8 +69,8 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
     }, this.onKeyDown = (e) => {
       var s;
       (s = this.navigation) == null || s.triggerKeyboardEvent(e);
-    }, this.showLicenseWatermark = !A(R, { component: "ColorGradient" }), this.licenseMessage = N(R);
-    const a = t.value || t.defaultValue || d(L, ae);
+    }, this.showLicenseWatermark = !I(R, { component: "ColorGradient" }), this.licenseMessage = T(R);
+    const a = t.value || t.defaultValue || d(M, re);
     this.state = Object.assign({}, h.getStateFromValue(a), {
       isFirstRender: !0,
       guid: this.props.id
@@ -86,46 +86,46 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   componentDidMount() {
-    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = I && window.ResizeObserver && new window.ResizeObserver(() => {
+    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = O && window.ResizeObserver && new window.ResizeObserver(() => {
       this.forceUpdate();
     }), this.resizeObserver && this.resizeObserver.observe(this.gradientWrapper)), this.wrapperRef && this.hsvGradientRef) {
       let t = 0, a = 0;
-      this.hsvNavigation = new f({
+      this.hsvNavigation = new C({
         tabIndex: 0,
         root: this.hsvGradientRef,
         selectors: [".k-hsv-rectangle .k-hsv-draghandle"],
         keyboardEvents: {
           keydown: {
             ArrowDown: (e, s, i) => {
-              a = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, 0, a);
+              a = i.shiftKey ? this.props.gradientSliderSmallStep || v : this.props.gradientSliderStep || u, this.onHsvGradientValueChange(e, 0, a);
             },
             ArrowUp: (e, s, i) => {
-              a = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, 0, a);
+              a = i.shiftKey ? -(this.props.gradientSliderSmallStep || v) : -(this.props.gradientSliderStep || u), this.onHsvGradientValueChange(e, 0, a);
             },
             ArrowLeft: (e, s, i) => {
-              t = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, t, 0);
+              t = i.shiftKey ? -(this.props.gradientSliderSmallStep || v) : -(this.props.gradientSliderStep || u), this.onHsvGradientValueChange(e, t, 0);
             },
             ArrowRight: (e, s, i) => {
-              t = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, t, 0);
+              t = i.shiftKey ? this.props.gradientSliderSmallStep || v : this.props.gradientSliderStep || u, this.onHsvGradientValueChange(e, t, 0);
             }
           }
         }
       });
     }
-    this.wrapperRef && this.wrapperRef.current && (this.props.isInsidePopup ? this.hsvGradientRef.current && this.hsvGradientRef.current.focus() : this.navigation = new f({
+    this.wrapperRef && this.wrapperRef.current && (this.props.isInsidePopup ? this.hsvGradientRef.current && this.hsvGradientRef.current.focus() : this.navigation = new C({
       tabIndex: 0,
       root: this.wrapperRef,
       selectors: [".k-colorgradient"],
       keyboardEvents: {
         keydown: {
           Tab: (t, a, e) => {
-            b(document) === t ? C(t) : O(e, t, z);
+            b(document) === t ? k(t) : B(e, t, P);
           },
           Enter: (t, a, e) => {
-            b(document) === t && (_(t), T(t));
+            b(document) === t && (z(t), V(t));
           },
           Escape: (t, a, e) => {
-            b(document) !== t && (t.focus(), C(t));
+            b(document) !== t && (t.focus(), k(t));
           }
         }
       }
@@ -135,7 +135,7 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   componentWillUnmount() {
-    X(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
+    J(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
   }
   /**
    * @hidden
@@ -147,24 +147,26 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   renderRectangleDragHandle() {
-    const t = {};
+    const t = L(this), a = {};
     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`;
+      const e = this.getGradientRectMetrics(), s = (1 - this.state.hsva.v) * e.height, i = this.state.hsva.s * e.width;
+      a.top = `${s}px`, a.left = `${i}px`;
     }
     return /* @__PURE__ */ r.createElement(
       "div",
       {
         ref: this.hsvGradientRef,
         role: "slider",
-        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,
-        "aria-orientation": void 0,
+        tabIndex: S(this.props.tabIndex, this.props.disabled),
+        "aria-valuetext": this.props.ariaValueText || `X: ${Math.round(this.state.hsva.s * 100)}, Y: ${Math.round((1 - this.state.hsva.v) * 100)}`,
+        "aria-valuenow": Math.round((1 - this.state.hsva.v) * 100),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": this.props.ariaLabelHSV || t.toLanguageString(x, g[x]),
+        "aria-orientation": "undefined",
         "aria-disabled": this.props.disabled ? "true" : void 0,
         className: "k-hsv-draghandle k-draghandle",
-        style: t,
+        style: a,
         onKeyDown: this.onHsvGradientKeyDown
       }
     );
@@ -173,18 +175,18 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   moveDragHandle(t, a) {
-    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = E(a, 0, i), l = E(t, 0, s), D = Object.assign({}, this.state.hsva, {
+    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = w(a, 0, i), l = w(t, 0, s), A = Object.assign({}, this.state.hsva, {
       s: l / s,
       v: 1 - n / i
     });
-    this.handleHsvaChange(D, {}, {});
+    this.handleHsvaChange(A, {}, {});
   }
   /**
    * @hidden
    */
   handleHsvaChange(t, a, e) {
-    const s = W(t), i = d(s, "hex");
-    this.isUncontrolled || Y(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 = Y(t), i = d(s, "hex");
+    this.isUncontrolled || Q(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: c(t.h), rgba: p(s), hex: i }), this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
@@ -201,8 +203,8 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   static getStateFromValue(t, a) {
-    y(d(t, "hex")) || (t = L);
-    const e = q(a, t) || u(t), s = J(a, t) || p(t), i = Q(a, t) || d(t, "hex"), n = c(e.h);
+    E(d(t, "hex")) || (t = M);
+    const e = Z(a, t) || m(t), s = ee(a, t) || p(t), i = te(a, t) || d(t, "hex"), n = c(e.h);
     return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
@@ -227,16 +229,16 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   render() {
-    const t = se(this);
+    const t = L(this);
     return /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
-        role: this.props.role,
-        className: B(
+        role: this.props.role || "textbox",
+        className: K(
           "k-colorgradient",
           {
-            [`k-colorgradient-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            [`k-colorgradient-${U.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
             "k-disabled": this.props.disabled
           },
           this.props.className
@@ -244,15 +246,15 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         "aria-disabled": this.props.disabled ? "true" : void 0,
         style: { position: "relative", ...this.props.style },
         ref: this.wrapperRef,
-        tabIndex: k(this.props.tabIndex, this.props.disabled),
-        "aria-label": this.props.ariaLabel,
+        tabIndex: S(this.props.tabIndex, this.props.disabled),
+        "aria-label": this.props.role === "none" ? void 0 : this.props.ariaLabel || t.toLanguageString(H, g[H]),
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy,
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown
       },
       /* @__PURE__ */ r.createElement("div", { className: `k-colorgradient-canvas ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ r.createElement(
-        V,
+        W,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
@@ -270,14 +272,14 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           this.renderRectangleDragHandle()
         )
       ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ r.createElement(
-        te,
+        ie,
         {
           metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
           hsva: this.state.hsva,
           backgroundColor: this.props.backgroundColor
         }
       )), /* @__PURE__ */ r.createElement("div", { className: `k-hsv-controls ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement(
-        S,
+        y,
         {
           value: this.state.hsva.h,
           buttons: !1,
@@ -289,22 +291,22 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           className: "k-hue-slider k-colorgradient-slider",
           disabled: this.props.disabled,
           ariaLabel: t.toLanguageString(
-            w,
-            x[w]
+            D,
+            g[D]
           )
         }
       ), this.props.opacity && /* @__PURE__ */ r.createElement(
-        S,
+        y,
         {
-          value: y(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
+          value: E(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(
-            H,
-            x[H]
+            G,
+            g[G]
           ),
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
@@ -315,7 +317,7 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         }
       ))),
       /* @__PURE__ */ r.createElement(
-        Z,
+        se,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -329,8 +331,8 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           rounded: this.props.rounded
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ r.createElement(ee, { bgColor: p(this.props.backgroundColor), rgba: this.state.rgba }),
-      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(K, { message: this.licenseMessage })
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(ae, { bgColor: p(this.props.backgroundColor), rgba: this.state.rgba }),
+      this.showLicenseWatermark && /* @__PURE__ */ r.createElement($, { message: this.licenseMessage })
     );
   }
 };
@@ -354,19 +356,19 @@ h.displayName = "ColorGradient", h.propTypes = {
 }, h.defaultProps = {
   opacity: !0,
   role: "textbox",
-  format: "rgb",
+  format: "rgba",
   size: void 0
 };
-let m = h;
-const ie = M(), re = F(
-  G(
-    ie,
-    m
+let f = h;
+const oe = _(), ne = F(
+  N(
+    oe,
+    f
   )
 );
-re.displayName = "KendoReactColorGradient";
+ne.displayName = "KendoReactColorGradient";
 export {
-  re as ColorGradient,
-  ie as ColorGradientPropsContext,
-  m as ColorGradientWithoutContext
+  ne as ColorGradient,
+  oe as ColorGradientPropsContext,
+  f 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 strict";const u=require("react"),n=require("../numerictextbox/NumericTextBox.js"),b=require("./HexInput.js"),m=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 o=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=x(u),i=["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||i[1]}}render(){const e=l.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientHex,s.messages[s.colorGradientHex]),o=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),c=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(m.Button,{"aria-label":h,fillMode:"flat",icon:"caret-alt-expand",svgIcon:f.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(b,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),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,rounded:this.props.rounded}),a.createElement("label",{className:"k-colorgradient-input-label"},o)),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,rounded:this.props.rounded}),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,rounded:this.props.rounded}),a.createElement("label",{className:"k-colorgradient-input-label"},d))),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,rounded:this.props.rounded}),this.props.opacity&&a.createElement("label",{className:"k-colorgradient-input-label"},p)))}dispatchRgbaChange(e,t){const o={...this.props.rgba};e.r!==void 0&&(o.r=e.r),e.g!==void 0&&(o.g=e.g),e.b!==void 0&&(o.b=e.b),e.a!==void 0&&(o.a=e.a),this.props.onRgbaChange(o,t)}onToggleModeChange(){const e=i.length-1===i.indexOf(this.state.inputMode)?0:i.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:i[e]});else{const t=i[e]==="rgba"?e+1:e;this.setState({inputMode:i[t]})}}}l.registerForIntl(g);l.registerForLocalization(g);module.exports=g;
+"use strict";const C=require("react"),r=require("../numerictextbox/NumericTextBox.js"),x=require("./HexInput.js"),M=require("@progress/kendo-react-buttons"),k=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-intl"),a=require("../messages/index.js");function v(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 s=v(C),o=["rgba","rgb","hex"];class g extends s.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(a.colorGradientHex,a.messages[a.colorGradientHex]),n=e.toLanguageString(a.colorGradientR,a.messages[a.colorGradientR]),c=e.toLanguageString(a.colorGradientG,a.messages[a.colorGradientG]),d=e.toLanguageString(a.colorGradientB,a.messages[a.colorGradientB]),p=e.toLanguageString(a.colorGradientA,a.messages[a.colorGradientA]),h=e.toLanguageString(a.colorGradientToggleInputsButton,a.messages[a.colorGradientToggleInputsButton]),u=e.toLanguageString(a.colorGradientRedChannelLabel,a.messages[a.colorGradientRedChannelLabel]),b=e.toLanguageString(a.colorGradientGreenChannelLabel,a.messages[a.colorGradientGreenChannelLabel]),m=e.toLanguageString(a.colorGradientBlueChannelLabel,a.messages[a.colorGradientBlueChannelLabel]),f=e.toLanguageString(a.colorGradientAlphaChannelLabel,a.messages[a.colorGradientAlphaChannelLabel]);return s.createElement("div",{className:"k-colorgradient-inputs k-hstack"},s.createElement("div",{className:"k-vstack"},s.createElement(M.Button,{"aria-label":h,fillMode:"flat",icon:"caret-alt-expand",svgIcon:k.caretAltExpandIcon,className:"k-colorgradient-toggle-mode",onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&s.createElement("div",{className:"k-vstack k-flex-1"},s.createElement(x,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),s.createElement("label",{className:"k-colorgradient-input-label"},t)),(this.state.inputMode==="rgb"||this.state.inputMode==="rgba")&&s.createElement(s.Fragment,null,s.createElement("div",{className:"k-vstack"},s.createElement(r.NumericTextBox,{value:this.props.rgba.r,ariaLabel:u,min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),s.createElement("label",{className:"k-colorgradient-input-label"},n)),s.createElement("div",{className:"k-vstack"},s.createElement(r.NumericTextBox,{value:this.props.rgba.g,ariaLabel:b,min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),s.createElement("label",{className:"k-colorgradient-input-label"},c)),s.createElement("div",{className:"k-vstack"},s.createElement(r.NumericTextBox,{value:this.props.rgba.b,ariaLabel:m,min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),s.createElement("label",{className:"k-colorgradient-input-label"},d))),this.state.inputMode==="rgba"&&s.createElement("div",{className:"k-vstack"},this.props.opacity&&s.createElement(r.NumericTextBox,{value:this.props.rgba.a,ariaLabel:f,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,rounded:this.props.rounded}),this.props.opacity&&s.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=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;

package/colors/ColorInput.mjs

@@ -5,43 +5,55 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as t from "react";
-import { NumericTextBox as r } from "../numerictextbox/NumericTextBox.mjs";
-import M from "./HexInput.mjs";
-import { Button as v } from "@progress/kendo-react-buttons";
-import { caretAltExpandIcon as x } from "@progress/kendo-svg-icons";
-import { provideLocalizationService as C, registerForIntl as k, registerForLocalization as E } from "@progress/kendo-react-intl";
-import { colorGradientHex as n, messages as o, colorGradientR as l, colorGradientG as p, colorGradientB as g, colorGradientA as d, colorGradientToggleInputsButton as h } from "../messages/index.mjs";
+import * as a from "react";
+import { NumericTextBox as n } from "../numerictextbox/NumericTextBox.mjs";
+import G from "./HexInput.mjs";
+import { Button as N } from "@progress/kendo-react-buttons";
+import { caretAltExpandIcon as S } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as z, registerForIntl as B, registerForLocalization as I } from "@progress/kendo-react-intl";
+import { colorGradientHex as r, messages as s, colorGradientR as l, colorGradientG as g, colorGradientB as d, colorGradientA as p, colorGradientToggleInputsButton as h, colorGradientRedChannelLabel as c, colorGradientGreenChannelLabel as m, colorGradientBlueChannelLabel as b, colorGradientAlphaChannelLabel as u } from "../messages/index.mjs";
 const i = ["rgba", "rgb", "hex"];
-class c extends t.Component {
+class f extends a.Component {
   constructor(e) {
-    super(e), this.onRgbaRChange = (a) => {
-      this.dispatchRgbaChange({ r: a.value }, a);
-    }, this.onRgbaGChange = (a) => {
-      this.dispatchRgbaChange({ g: a.value }, a);
-    }, this.onRgbaBChange = (a) => {
-      this.dispatchRgbaChange({ b: a.value }, a);
-    }, this.onRgbaAChange = (a) => {
-      this.dispatchRgbaChange({ a: a.value }, a);
+    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 || i[1] };
   }
   render() {
-    const e = C(this), a = e.toLanguageString(n, o[n]), s = e.toLanguageString(l, o[l]), m = e.toLanguageString(p, o[p]), b = e.toLanguageString(g, o[g]), u = e.toLanguageString(d, o[d]), f = e.toLanguageString(
+    const e = z(this), t = e.toLanguageString(r, s[r]), o = e.toLanguageString(l, s[l]), C = e.toLanguageString(g, s[g]), M = e.toLanguageString(d, s[d]), v = e.toLanguageString(p, s[p]), x = e.toLanguageString(
       h,
-      o[h]
+      s[h]
+    ), k = e.toLanguageString(
+      c,
+      s[c]
+    ), E = e.toLanguageString(
+      m,
+      s[m]
+    ), L = e.toLanguageString(
+      b,
+      s[b]
+    ), R = e.toLanguageString(
+      u,
+      s[u]
     );
-    return /* @__PURE__ */ t.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
-      v,
+    return /* @__PURE__ */ a.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
+      N,
       {
-        "aria-label": f,
+        "aria-label": x,
         fillMode: "flat",
         icon: "caret-alt-expand",
-        svgIcon: x,
+        svgIcon: S,
         className: "k-colorgradient-toggle-mode",
         onClick: this.onToggleModeChange.bind(this)
       }
-    )), this.state.inputMode === "hex" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ t.createElement(
-      M,
+    )), this.state.inputMode === "hex" && /* @__PURE__ */ a.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ a.createElement(
+      G,
       {
         hex: this.props.hex,
         onHexChange: this.props.onHexChange,
@@ -50,11 +62,11 @@ class c extends t.Component {
         fillMode: this.props.fillMode,
         rounded: this.props.rounded
       }
-    ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, a)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
-      r,
+    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, t)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
+      n,
       {
         value: this.props.rgba.r,
-        ariaLabel: String(this.props.rgba.r),
+        ariaLabel: k,
         min: 0,
         max: 255,
         spinners: !1,
@@ -65,11 +77,11 @@ class c extends t.Component {
         fillMode: this.props.fillMode,
         rounded: this.props.rounded
       }
-    ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
-      r,
+    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, o)), /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
+      n,
       {
         value: this.props.rgba.g,
-        ariaLabel: String(this.props.rgba.g),
+        ariaLabel: E,
         min: 0,
         max: 255,
         spinners: !1,
@@ -80,11 +92,11 @@ class c extends t.Component {
         fillMode: this.props.fillMode,
         rounded: this.props.rounded
       }
-    ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, m)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
-      r,
+    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, C)), /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
+      n,
       {
         value: this.props.rgba.b,
-        ariaLabel: String(this.props.rgba.b),
+        ariaLabel: L,
         min: 0,
         max: 255,
         spinners: !1,
@@ -95,11 +107,11 @@ class c extends t.Component {
         fillMode: this.props.fillMode,
         rounded: this.props.rounded
       }
-    ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, b))), this.state.inputMode === "rgba" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ t.createElement(
-      r,
+    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, M))), this.state.inputMode === "rgba" && /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ a.createElement(
+      n,
       {
         value: this.props.rgba.a,
-        ariaLabel: String(this.props.rgba.a),
+        ariaLabel: R,
         min: 0,
         max: 1,
         step: 0.01,
@@ -111,24 +123,24 @@ class c extends t.Component {
         fillMode: this.props.fillMode,
         rounded: this.props.rounded
       }
-    ), this.props.opacity && /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, u)));
+    ), this.props.opacity && /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, v)));
   }
-  dispatchRgbaChange(e, a) {
-    const s = { ...this.props.rgba };
-    e.r !== void 0 && (s.r = e.r), e.g !== void 0 && (s.g = e.g), e.b !== void 0 && (s.b = e.b), e.a !== void 0 && (s.a = e.a), this.props.onRgbaChange(s, a);
+  dispatchRgbaChange(e, t) {
+    const o = { ...this.props.rgba };
+    e.r !== void 0 && (o.r = e.r), e.g !== void 0 && (o.g = e.g), e.b !== void 0 && (o.b = e.b), e.a !== void 0 && (o.a = e.a), this.props.onRgbaChange(o, t);
   }
   onToggleModeChange() {
     const e = i.length - 1 === i.indexOf(this.state.inputMode) ? 0 : i.indexOf(this.state.inputMode) + 1;
     if (this.props.opacity)
       this.setState({ inputMode: i[e] });
     else {
-      const a = i[e] === "rgba" ? e + 1 : e;
-      this.setState({ inputMode: i[a] });
+      const t = i[e] === "rgba" ? e + 1 : e;
+      this.setState({ inputMode: i[t] });
     }
   }
 }
-k(c);
-E(c);
+B(f);
+I(f);
 export {
-  c as default
+  f as default
 };

package/colors/ColorPalette.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),l=require("prop-types"),re=require("./utils/color-palette.service.js"),w=require("@progress/kendo-react-common"),se=require("./models/palette-presets.js"),q=require("./utils/color-parser.js");function le(c){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const h in c)if(h!=="default"){const E=Object.getOwnPropertyDescriptor(c,h);Object.defineProperty(p,h,E.get?E:{enumerable:!0,get:()=>c[h]})}}return p.default=c,Object.freeze(p)}const k=le(n),z=24,B=10,j="office",D={palette:j,columns:B,tileSize:z},V=w.createPropsContext(),ne=c=>{if(Array.isArray(c))return c;if(typeof c=="string"){const p=se.PALETTEPRESETS[c];if(p)return p.colors}return[]},F=k.forwardRef((c,p)=>{const h=w.usePropsContext(V,c),{palette:E=D.palette,columns:L=D.columns,tileSize:u=D.tileSize,value:x,defaultValue:$,disabled:d=!1,tabIndex:K,onChange:P,onFocus:I,className:W,size:N,id:Z,ariaLabelledBy:G,ariaDescribedBy:J}=h,S=n.useRef(null),Q=n.useRef({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),_=L!=null?L:D.columns,b=n.useMemo(()=>ne(E),[E]),t=n.useMemo(()=>{const o=new re.ColorPaletteService;return o.setColorMatrix(b,_),o},[b,_]),[g,O]=n.useState(()=>x!==void 0?x:$||""),[T,R]=n.useState(""),y=x!==void 0;n.useEffect(()=>{y&&O(x)},[x,y]);const X=n.useCallback(o=>{if(d||b.length===0)return;const f=g||b[0];R(f),I&&I(o)},[d,b,g,I]),Y=n.useCallback(()=>{R("")},[]),ee=n.useCallback(o=>{if(d)return;const{key:f}=o,r=()=>T||g||b[0],m=(s,e)=>s<0?e:s>e?0:s;switch(f){case"ArrowRight":o.preventDefault();{const s=r(),e=t.getCellCoordsFor(s);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col+1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowLeft":o.preventDefault();{const s=r(),e=t.getCellCoordsFor(s);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col-1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowDown":o.preventDefault();{const s=r(),e=t.getCellCoordsFor(s);if(e){const C=t.colorRows.length-1,a=m(e.row+1,C),i=Math.min(e.col,t.colorRows[a].length-1),v=t.colorRows[a][i];v&&R(v)}}break;case"ArrowUp":o.preventDefault();{const s=r(),e=t.getCellCoordsFor(s);if(e){const C=t.colorRows.length-1,a=m(e.row-1,C),i=Math.min(e.col,t.colorRows[a].length-1),v=t.colorRows[a][i];v&&R(v)}}break;case"Enter":o.preventDefault();{const s=r();if(s&&(y||O(s),P)){const e=q.parseColor(s,"rgba");w.dispatchEvent(P,o,null,{value:s,rgbaValue:e||""})}}break}},[d,T,g,b,t,y,P]),A=n.useCallback((o,f)=>{if(d)return;const r=o;if(y||O(r),P){const m=q.parseColor(r,"rgba");w.dispatchEvent(P,f,null,{value:r,rgbaValue:m||""})}},[d,P,y]),U=n.useCallback((o,f)=>o.map((r,m)=>{const s=g&&r.toLowerCase()===g.toLowerCase(),e=T&&r.toLowerCase()===T.toLowerCase(),C=w.classNames("k-colorpalette-tile",{"k-selected":s,"k-focus":e}),a={backgroundColor:r};return typeof u=="number"?(a.width=`${u}px`,a.height=`${u}px`):u&&typeof u=="object"&&("width"in u&&(a.width=`${u.width}px`),"height"in u&&(a.height=`${u.height}px`)),k.createElement("td",{key:r,role:"gridcell",className:C,style:a,"aria-label":r,"aria-selected":s?"true":"false",onClick:i=>A(r,i)})}),[g,T,u,A]),oe=n.useCallback(()=>t.colorRows.map((f,r)=>k.createElement("tr",{key:f[0]||r,role:"row"},U(f,r))),[t,U]),M=n.useCallback(()=>({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),[]);n.useImperativeHandle(Q,M),n.useImperativeHandle(p,M);const te=w.classNames("k-colorpalette",W,{"k-disabled":d,"k-colorpalette-sm":N==="small","k-colorpalette-md":N==="medium","k-colorpalette-lg":N==="large"});return k.createElement("div",{ref:S,role:"grid",className:te,tabIndex:w.getTabIndex(K,d),id:Z,"aria-labelledby":G,"aria-describedby":J,"aria-disabled":d?"true":void 0,onFocus:X,onBlur:Y,onKeyDown:ee},k.createElement("table",{className:"k-colorpalette-table",role:"presentation"},k.createElement("tbody",null,oe())))});F.displayName="ColorPalette";F.propTypes={palette:l.oneOfType([l.arrayOf(l.string.isRequired),l.string]),columns:l.number,tileSize:l.any,defaultValue:l.string,value:l.string,disabled:l.bool,tabIndex:l.number,onChange:l.func,onFocus:l.func,id:l.string,ariaLabelledBy:l.string,ariaDescribedBy:l.string,className:l.string,size:l.oneOf(["small","medium","large"])};const H=w.withIdHOC(F);H.displayName="KendoReactColorPalette";const ae=F;exports.ColorPalette=H;exports.ColorPalettePropsContext=V;exports.ColorPaletteWithoutContext=ae;exports.DEFAULT_COLUMNS_COUNT=B;exports.DEFAULT_PRESET=j;exports.DEFAULT_TILE_SIZE=z;exports.defaultColorPaletteProps=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),s=require("prop-types"),se=require("./utils/color-palette.service.js"),w=require("@progress/kendo-react-common"),ne=require("./models/palette-presets.js"),M=require("./utils/color-parser.js"),ae=require("@progress/kendo-react-intl"),O=require("../messages/index.js");function ce(c){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const P in c)if(P!=="default"){const E=Object.getOwnPropertyDescriptor(c,P);Object.defineProperty(p,P,E.get?E:{enumerable:!0,get:()=>c[P]})}}return p.default=c,Object.freeze(p)}const k=ce(n),B=24,j=10,V="office",v={palette:V,columns:j,tileSize:B},H=w.createPropsContext(),ie=c=>{if(Array.isArray(c))return c;if(typeof c=="string"){const p=ne.PALETTEPRESETS[c];if(p)return p.colors}return[]},D=k.forwardRef((c,p)=>{const P=w.usePropsContext(H,c),{palette:E=v.palette,columns:F=v.columns,tileSize:u=v.tileSize,value:x,defaultValue:K,disabled:d=!1,tabIndex:W,onChange:h,onFocus:A,className:Z,size:I,id:G,ariaLabelledBy:J,ariaDescribedBy:Q}=P,S=n.useRef(null),X=n.useRef({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),_=F!=null?F:v.columns,b=n.useMemo(()=>ie(E),[E]),t=n.useMemo(()=>{const o=new se.ColorPaletteService;return o.setColorMatrix(b,_),o},[b,_]),[g,N]=n.useState(()=>x!==void 0?x:K||""),[L,R]=n.useState(""),y=x!==void 0;n.useEffect(()=>{y&&N(x)},[x,y]);const Y=n.useCallback(o=>{if(d||b.length===0)return;const f=g||b[0];R(f),A&&A(o)},[d,b,g,A]),ee=n.useCallback(()=>{R("")},[]),oe=n.useCallback(o=>{if(d)return;const{key:f}=o,r=()=>L||g||b[0],m=(l,e)=>l<0?e:l>e?0:l;switch(f){case"ArrowRight":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col+1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowLeft":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col-1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowDown":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e){const C=t.colorRows.length-1,a=m(e.row+1,C),i=Math.min(e.col,t.colorRows[a].length-1),T=t.colorRows[a][i];T&&R(T)}}break;case"ArrowUp":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e){const C=t.colorRows.length-1,a=m(e.row-1,C),i=Math.min(e.col,t.colorRows[a].length-1),T=t.colorRows[a][i];T&&R(T)}}break;case"Enter":o.preventDefault();{const l=r();if(l&&(y||N(l),h)){const e=M.parseColor(l,"rgba");w.dispatchEvent(h,o,null,{value:l,rgbaValue:e||""})}}break}},[d,L,g,b,t,y,h]),U=n.useCallback((o,f)=>{if(d)return;const r=o;if(y||N(r),h){const m=M.parseColor(r,"rgba");w.dispatchEvent(h,f,null,{value:r,rgbaValue:m||""})}},[d,h,y]),q=n.useCallback((o,f)=>o.map((r,m)=>{const l=g&&r.toLowerCase()===g.toLowerCase(),e=L&&r.toLowerCase()===L.toLowerCase(),C=w.classNames("k-colorpalette-tile",{"k-selected":l,"k-focus":e}),a={backgroundColor:r};return typeof u=="number"?(a.width=`${u}px`,a.height=`${u}px`):u&&typeof u=="object"&&("width"in u&&(a.width=`${u.width}px`),"height"in u&&(a.height=`${u.height}px`)),k.createElement("td",{key:r,role:"gridcell",className:C,style:a,"aria-label":r,"aria-selected":l?"true":void 0,onClick:i=>U(r,i)})}),[g,L,u,U]),te=n.useCallback(()=>t.colorRows.map((f,r)=>k.createElement("tr",{key:f[0]||r,role:"row"},q(f,r))),[t,q]),z=n.useCallback(()=>({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),[]);n.useImperativeHandle(X,z),n.useImperativeHandle(p,z);const re=w.classNames("k-colorpalette",Z,{"k-disabled":d,"k-colorpalette-sm":I==="small","k-colorpalette-md":I==="medium","k-colorpalette-lg":I==="large"}),le=ae.useLocalization();return k.createElement("div",{ref:S,role:"grid",className:re,tabIndex:w.getTabIndex(W,d),id:G,"aria-label":le.toLanguageString(O.colorPaletteAriaLabel,O.messages[O.colorPaletteAriaLabel]),"aria-labelledby":J,"aria-describedby":Q,"aria-disabled":d?"true":void 0,onFocus:Y,onBlur:ee,onKeyDown:oe},k.createElement("table",{className:"k-colorpalette-table",role:"none"},k.createElement("tbody",null,te())))});D.displayName="ColorPalette";D.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string,size:s.oneOf(["small","medium","large"])};const $=w.withIdHOC(D);$.displayName="KendoReactColorPalette";const ue=D;exports.ColorPalette=$;exports.ColorPalettePropsContext=H;exports.ColorPaletteWithoutContext=ue;exports.DEFAULT_COLUMNS_COUNT=j;exports.DEFAULT_PRESET=V;exports.DEFAULT_TILE_SIZE=B;exports.defaultColorPaletteProps=v;