@progress/kendo-react-inputs 9.4.0-develop.2 → 9.4.0-develop.20

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;

package/colors/ColorInput.mjs

@@ -5,51 +5,53 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
-import * as a from "react";
-import { NumericTextBox as o } from "../numerictextbox/NumericTextBox.mjs";
-import v from "./HexInput.mjs";
-import { Button as x } from "@progress/kendo-react-buttons";
-import { caretAltExpandIcon as C } from "@progress/kendo-svg-icons";
-import { provideLocalizationService as k, registerForIntl as E, registerForLocalization as M } from "@progress/kendo-react-intl";
-import { colorGradientHex as r, messages as n, colorGradientR as l, colorGradientG as g, colorGradientB as c, colorGradientA as p, colorGradientToggleInputsButton as h } from "../messages/index.mjs";
+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 g, colorGradientB as p, colorGradientA as h, colorGradientToggleInputsButton as c } from "../messages/index.mjs";
 const i = ["rgba", "rgb", "hex"];
-class d extends a.Component {
+class d extends t.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);
+    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);
     }, this.state = { inputMode: e.defaultInputMode || i[1] };
   }
   render() {
-    const e = k(this), t = e.toLanguageString(r, n[r]), s = e.toLanguageString(l, n[l]), m = e.toLanguageString(g, n[g]), b = e.toLanguageString(c, n[c]), u = e.toLanguageString(p, n[p]), f = e.toLanguageString(
-      h,
-      n[h]
+    const e = C(this), a = e.toLanguageString(n, o[n]), s = e.toLanguageString(l, o[l]), m = e.toLanguageString(g, o[g]), b = e.toLanguageString(p, o[p]), f = e.toLanguageString(h, o[h]), u = e.toLanguageString(
+      c,
+      o[c]
     );
-    return /* @__PURE__ */ a.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
-      x,
+    return /* @__PURE__ */ t.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
+      v,
       {
-        "aria-label": f,
+        "aria-label": u,
         fillMode: "flat",
         icon: "caret-alt-expand",
-        svgIcon: C,
+        svgIcon: x,
         className: "k-colorgradient-toggle-mode",
+        size: this.props.size,
         onClick: this.onToggleModeChange.bind(this)
       }
-    )), this.state.inputMode === "hex" && /* @__PURE__ */ a.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ a.createElement(
-      v,
+    )), this.state.inputMode === "hex" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ t.createElement(
+      M,
       {
         hex: this.props.hex,
         onHexChange: this.props.onHexChange,
-        disabled: this.props.disabled
+        disabled: this.props.disabled,
+        size: this.props.size,
+        fillMode: this.props.fillMode
       }
-    ), /* @__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(
-      o,
+    ), /* @__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,
       {
         value: this.props.rgba.r,
         ariaLabel: String(this.props.rgba.r),
@@ -58,10 +60,12 @@ class d extends a.Component {
         spinners: !1,
         format: "n",
         onChange: this.onRgbaRChange,
-        disabled: this.props.disabled
+        disabled: this.props.disabled,
+        size: this.props.size,
+        fillMode: this.props.fillMode
       }
-    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
-      o,
+    ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
+      r,
       {
         value: this.props.rgba.g,
         ariaLabel: String(this.props.rgba.g),
@@ -70,10 +74,12 @@ class d extends a.Component {
         spinners: !1,
         format: "n",
         onChange: this.onRgbaGChange,
-        disabled: this.props.disabled
+        disabled: this.props.disabled,
+        size: this.props.size,
+        fillMode: this.props.fillMode
       }
-    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, m)), /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
-      o,
+    ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, m)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
+      r,
       {
         value: this.props.rgba.b,
         ariaLabel: String(this.props.rgba.b),
@@ -82,10 +88,12 @@ class d extends a.Component {
         spinners: !1,
         format: "n",
         onChange: this.onRgbaBChange,
-        disabled: this.props.disabled
+        disabled: this.props.disabled,
+        size: this.props.size,
+        fillMode: this.props.fillMode
       }
-    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, b))), this.state.inputMode === "rgba" && /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ a.createElement(
-      o,
+    ), /* @__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,
       {
         value: this.props.rgba.a,
         ariaLabel: String(this.props.rgba.a),
@@ -95,26 +103,28 @@ class d extends a.Component {
         spinners: !1,
         format: "n2",
         onChange: this.onRgbaAChange,
-        disabled: this.props.disabled
+        disabled: this.props.disabled,
+        size: this.props.size,
+        fillMode: this.props.fillMode
       }
-    ), this.props.opacity && /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, u)));
+    ), this.props.opacity && /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, f)));
   }
-  dispatchRgbaChange(e, t) {
+  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, t);
+    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);
   }
   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] });
+      const a = i[e] === "rgba" ? e + 1 : e;
+      this.setState({ inputMode: i[a] });
     }
   }
 }
+k(d);
 E(d);
-M(d);
 export {
   d 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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),s=require("prop-types"),T=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),N=require("../package-metadata.js"),D=require("./models/palette-presets.js"),I=require("./utils/misc.js"),L=require("./utils/color-parser.js");function O(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const l=O(F),v=24,u=10,S="office",c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.paletteService=null,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onKeyDown=e=>{switch(e.key){case r.KEYS.down:this.handleCellNavigation(0,1);break;case r.KEYS.up:this.handleCellNavigation(0,-1);break;case r.KEYS.right:this.handleCellNavigation(1,0);break;case r.KEYS.left:this.handleCellNavigation(-1,0);break;case r.KEYS.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{this.paletteService&&(this.setState({focusedColor:this.state.selectedColor||this.paletteService.colorRows[0][0]}),this.props.onFocus&&this.props.onFocus.call(void 0,e))},this.onBlur=()=>{this.setState({focusedColor:void 0})},r.validatePackage(N.packageMetadata),this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue?this.props.defaultValue:void 0,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new T.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor),a=r.classNames("k-colorpalette",{"k-disabled":this.props.disabled},this.props.className);return t.colors.length?l.createElement("div",{id:this.props.id,role:"grid",className:a,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,"aria-disabled":this.props.ariaDisabled||(this.props.disabled?"true":void 0),"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:this.wrapperRef},l.createElement("table",{className:"k-colorpalette-table",role:"presentation"},l.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:L.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=D.PALETTEPRESETS[this.props.palette];return I.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||u}:{colors:[],columns:0}}return{colors:this.props.palette||[],columns:this.props.columns||u}}renderRows(t,e,o){return t.map((i,a)=>l.createElement("tr",{role:"row",key:a},this.renderColumns(i,a,e,o)))}renderColumns(t,e,o,i){const a=o!==void 0&&o.row===e,E=o&&o.col,w=i!==void 0&&i.row===e,y=i&&i.col,f=typeof this.props.tileSize!="number"?this.props.tileSize:{width:this.props.tileSize,height:this.props.tileSize},C=f.width+"px",P=f.height+"px";return t.map((h,d)=>{const g=a&&E===d,k=r.classNames("k-colorpalette-tile",{"k-selected":g,"k-focus":w&&y===d});return l.createElement("td",{role:"gridcell",className:k,"aria-label":h,"aria-selected":g?!0:this.props.disabled?void 0:!1,style:{backgroundColor:h,width:C,height:P,minWidth:C},onClick:R=>this.onColorClick(h,R),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};c.displayName="ColorPalette",c.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},c.defaultProps={palette:S,tileSize:v};let p=c;const b=r.createPropsContext(),m=r.withIdHOC(r.withPropsContext(b,p));m.displayName="KendoReactColorPalette";exports.ColorPalette=m;exports.ColorPalettePropsContext=b;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=u;exports.DEFAULT_PRESET=S;exports.DEFAULT_TILE_SIZE=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),s=require("prop-types"),P=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),R=require("../package-metadata.js"),T=require("./models/palette-presets.js"),F=require("./utils/misc.js"),N=require("./utils/color-parser.js");function D(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>l[e]})}}return t.default=l,Object.freeze(t)}const a=D(k),C=24,h=10,g="office",n=class n extends a.Component{constructor(t){super(t),this.wrapperRef=a.createRef(),this.paletteService=null,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onKeyDown=e=>{switch(e.key){case r.KEYS.down:this.handleCellNavigation(0,1);break;case r.KEYS.up:this.handleCellNavigation(0,-1);break;case r.KEYS.right:this.handleCellNavigation(1,0);break;case r.KEYS.left:this.handleCellNavigation(-1,0);break;case r.KEYS.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{this.paletteService&&(this.setState({focusedColor:this.state.selectedColor||this.paletteService.colorRows[0][0]}),this.props.onFocus&&this.props.onFocus.call(void 0,e))},this.onBlur=()=>{this.setState({focusedColor:void 0})},r.validatePackage(R.packageMetadata),this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue?this.props.defaultValue:void 0,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new P.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor);return t.colors.length?a.createElement("div",{id:this.props.id,role:"grid",className:r.classNames("k-colorpalette",{[`k-colorpalette-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,"aria-disabled":this.props.ariaDisabled||(this.props.disabled?"true":void 0),"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:this.wrapperRef},a.createElement("table",{className:"k-colorpalette-table",role:"presentation"},a.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:N.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=T.PALETTEPRESETS[this.props.palette];return F.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||h}:{colors:[],columns:0}}return{colors:this.props.palette||[],columns:this.props.columns||h}}renderRows(t,e,o){return t.map((i,c)=>a.createElement("tr",{role:"row",key:c},this.renderColumns(i,c,e,o)))}renderColumns(t,e,o,i){const c=o!==void 0&&o.row===e,b=o&&o.col,S=i!==void 0&&i.row===e,E=i&&i.col;return t.map((u,d)=>{const f=c&&b===d,y=r.classNames("k-colorpalette-tile",{"k-selected":f,"k-focus":S&&E===d});return a.createElement("td",{role:"gridcell",className:y,"aria-label":u,"aria-selected":f?!0:this.props.disabled?void 0:!1,style:{backgroundColor:u},onClick:w=>this.onColorClick(u,w),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};n.displayName="ColorPalette",n.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",null])},n.defaultProps={palette:g,tileSize:C,size:"medium"};let p=n;const v=r.createPropsContext(),m=r.withIdHOC(r.withPropsContext(v,p));m.displayName="KendoReactColorPalette";exports.ColorPalette=m;exports.ColorPalettePropsContext=v;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=h;exports.DEFAULT_PRESET=g;exports.DEFAULT_TILE_SIZE=C;