@progress/kendo-react-inputs 9.4.0-develop.6 → 9.4.0-develop.8

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;

package/colors/ColorPalette.mjs

@@ -5,34 +5,33 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
 import * as i from "react";
 import s from "prop-types";
-import { ColorPaletteService as E } from "./utils/color-palette.service.mjs";
-import { KEYS as a, validatePackage as k, classNames as C, getTabIndex as R, dispatchEvent as F, createPropsContext as N, withIdHOC as P, withPropsContext as T } from "@progress/kendo-react-common";
-import { packageMetadata as I } from "../package-metadata.mjs";
-import { PALETTEPRESETS as D } from "./models/palette-presets.mjs";
-import { isPresent as L } from "./utils/misc.mjs";
-import { parseColor as U } from "./utils/color-parser.mjs";
-const x = 24, m = 10, z = "office", n = class n extends i.Component {
+import { ColorPaletteService as S } from "./utils/color-palette.service.mjs";
+import { KEYS as l, validatePackage as w, classNames as u, kendoThemeMaps as E, getTabIndex as k, dispatchEvent as y, createPropsContext as R, withIdHOC as F, withPropsContext as N } from "@progress/kendo-react-common";
+import { packageMetadata as P } from "../package-metadata.mjs";
+import { PALETTEPRESETS as T } from "./models/palette-presets.mjs";
+import { isPresent as I } from "./utils/misc.mjs";
+import { parseColor as D } from "./utils/color-parser.mjs";
+const z = 24, f = 10, L = "office", a = class a extends i.Component {
   constructor(t) {
     super(t), this.wrapperRef = i.createRef(), this.paletteService = null, this.focus = () => {
       this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
     }, this.onKeyDown = (e) => {
       switch (e.key) {
-        case a.down:
+        case l.down:
           this.handleCellNavigation(0, 1);
           break;
-        case a.up:
+        case l.up:
           this.handleCellNavigation(0, -1);
           break;
-        case a.right:
+        case l.right:
           this.handleCellNavigation(1, 0);
           break;
-        case a.left:
+        case l.left:
           this.handleCellNavigation(-1, 0);
           break;
-        case a.enter:
+        case l.enter:
           this.handleEnter(e);
           break;
         default:
@@ -45,7 +44,7 @@ const x = 24, m = 10, z = "office", n = class n extends i.Component {
       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 });
-    }, k(I), this.state = {
+    }, w(P), this.state = {
       selectedColor: this.props.value !== void 0 ? this.props.value : this.props.defaultValue ? this.props.defaultValue : void 0,
       isFirstRender: !0
     };
@@ -57,22 +56,29 @@ const x = 24, m = 10, z = "office", n = class n extends i.Component {
    * @hidden
    */
   render() {
-    const t = this.getPaletteInfo(), e = this.paletteService = new E();
+    const t = this.getPaletteInfo(), e = this.paletteService = new S();
     e.setColorMatrix(t.colors, t.columns);
-    const o = e.getCellCoordsFor(this.state.selectedColor), r = e.getCellCoordsFor(this.state.focusedColor), l = C("k-colorpalette", { "k-disabled": this.props.disabled }, this.props.className);
+    const o = e.getCellCoordsFor(this.state.selectedColor), r = e.getCellCoordsFor(this.state.focusedColor);
     return t.colors.length ? /* @__PURE__ */ i.createElement(
       "div",
       {
         id: this.props.id,
         role: "grid",
-        className: l,
+        className: u(
+          "k-colorpalette",
+          {
+            [`k-colorpalette-${E.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(this.props.tabIndex, this.props.disabled),
+        tabIndex: k(this.props.tabIndex, this.props.disabled),
         ref: this.wrapperRef
       },
       /* @__PURE__ */ i.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ i.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, o, r)))
@@ -107,7 +113,7 @@ const x = 24, m = 10, z = "office", n = class n extends i.Component {
     this.isUncontrolled && this.setState({ selectedColor: this.state.focusedColor }), this.dispatchChangeEvent(this.state.focusedColor, t);
   }
   dispatchChangeEvent(t, e) {
-    F(this.props.onChange, e, this, { value: t, rgbaValue: U(t, "rgba") });
+    y(this.props.onChange, e, this, { value: t, rgbaValue: D(t, "rgba") });
   }
   get focusedColorCooridanates() {
     return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : void 0;
@@ -117,33 +123,33 @@ const x = 24, m = 10, z = "office", n = class n extends i.Component {
   }
   getPaletteInfo() {
     if (typeof this.props.palette == "string") {
-      const t = D[this.props.palette];
-      return L(t) ? {
+      const t = T[this.props.palette];
+      return I(t) ? {
         colors: t.colors,
-        columns: this.props.columns || t.columns || m
+        columns: this.props.columns || t.columns || f
       } : { colors: [], columns: 0 };
     }
-    return { colors: this.props.palette || [], columns: this.props.columns || m };
+    return { colors: this.props.palette || [], columns: this.props.columns || f };
   }
   renderRows(t, e, o) {
-    return t.map((r, l) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: l }, this.renderColumns(r, l, e, o)));
+    return t.map((r, n) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: n }, this.renderColumns(r, n, e, o)));
   }
   renderColumns(t, e, o, r) {
-    const l = o !== void 0 && o.row === e, g = o && o.col, v = r !== void 0 && r.row === e, b = r && r.col, h = typeof this.props.tileSize != "number" ? this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize }, u = h.width + "px", S = h.height + "px";
+    const n = o !== void 0 && o.row === e, C = o && o.col, m = r !== void 0 && r.row === e, g = r && r.col;
     return t.map((d, c) => {
-      const f = l && g === c, w = C("k-colorpalette-tile", {
-        "k-selected": f,
-        "k-focus": v && b === c
+      const h = n && C === c, v = u("k-colorpalette-tile", {
+        "k-selected": h,
+        "k-focus": m && g === c
       });
       return /* @__PURE__ */ i.createElement(
         "td",
         {
           role: "gridcell",
-          className: w,
+          className: v,
           "aria-label": d,
-          "aria-selected": f ? !0 : this.props.disabled ? void 0 : !1,
-          style: { backgroundColor: d, width: u, height: S, minWidth: u },
-          onClick: (y) => this.onColorClick(d, y),
+          "aria-selected": h ? !0 : this.props.disabled ? void 0 : !1,
+          style: { backgroundColor: d },
+          onClick: (b) => this.onColorClick(d, b),
           id: this.createCellId({ row: e, col: c }),
           key: c
         }
@@ -154,7 +160,7 @@ const x = 24, m = 10, z = "office", n = class n extends i.Component {
     return `${this.guid}_${t.row}_${t.col}`;
   }
 };
-n.displayName = "ColorPalette", n.propTypes = {
+a.displayName = "ColorPalette", a.propTypes = {
   palette: s.oneOfType([s.arrayOf(s.string.isRequired), s.string]),
   columns: s.number,
   tileSize: s.any,
@@ -167,24 +173,26 @@ n.displayName = "ColorPalette", n.propTypes = {
   id: s.string,
   ariaLabelledBy: s.string,
   ariaDescribedBy: s.string,
-  className: s.string
-}, n.defaultProps = {
-  palette: z,
-  tileSize: x
+  className: s.string,
+  size: s.oneOf(["small", "medium", "large", null])
+}, a.defaultProps = {
+  palette: L,
+  tileSize: z,
+  size: "medium"
 };
-let p = n;
-const B = N(), A = P(
-  T(
-    B,
+let p = a;
+const U = R(), B = F(
+  N(
+    U,
     p
   )
 );
-A.displayName = "KendoReactColorPalette";
+B.displayName = "KendoReactColorPalette";
 export {
-  A as ColorPalette,
-  B as ColorPalettePropsContext,
+  B as ColorPalette,
+  U as ColorPalettePropsContext,
   p as ColorPaletteWithoutContext,
-  m as DEFAULT_COLUMNS_COUNT,
-  z as DEFAULT_PRESET,
-  x as DEFAULT_TILE_SIZE
+  f as DEFAULT_COLUMNS_COUNT,
+  L as DEFAULT_PRESET,
+  z as DEFAULT_TILE_SIZE
 };

package/colors/ColorPicker.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 fe=require("react"),r=require("prop-types"),o=require("@progress/kendo-react-common"),ke=require("../package-metadata.js"),me=require("./Picker.js"),ge=require("./ColorGradient.js"),M=require("./ColorPalette.js"),be=require("@progress/kendo-react-buttons"),ve=require("@progress/kendo-svg-icons"),F=require("../messages/index.js"),Ee=require("@progress/kendo-react-intl");function Ce(c){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const a in c)if(a!=="default"){const b=Object.getOwnPropertyDescriptor(c,a);Object.defineProperty(m,a,b.get?b:{enumerable:!0,get:()=>c[a]})}}return m.default=c,Object.freeze(m)}const e=Ce(fe),ye={opacity:!0},Pe={palette:M.DEFAULT_PRESET,tileSize:M.DEFAULT_TILE_SIZE},L=c=>c!==void 0,K=o.createPropsContext(),B=e.forwardRef((c,m)=>{o.validatePackage(ke.packageMetadata);const a=o.usePropsContext(K,c),b=Ee.useLocalization(),{size:P=k.size,rounded:T=k.rounded,fillMode:q=k.fillMode,gradientSettings:U=k.gradientSettings,paletteSettings:$=k.paletteSettings,view:u=k.view,popupSettings:W,valid:Z,disabled:w,tabIndex:J,icon:S,svgIcon:I,iconClassName:v,onChange:R,onFocus:D,onBlur:N,onActiveColorClick:h,className:Q}=a,l=e.useRef(null),g=e.useRef(null),E=e.useRef(null),f=e.useRef(),X=e.useRef(null),[Y,x]=e.useState(!1),[ee,te]=e.useState(a.defaultValue),[ne,oe]=e.useState(!1),A=L(a.value),d=L(a.open),i=A?a.value:ee,C=d?a.open:ne,_=e.useCallback(()=>{l.current&&l.current.focus()},[]);e.useImperativeHandle(m,()=>({element:l.current,actionElement:X.current,value:i,focus:_}),[i,_]);const p=e.useCallback((t,s)=>{d||(!t&&!s&&l&&l.current&&l.current.focus(),oe(t))},[d]),z=e.useMemo(()=>new o.Navigation({root:l,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(t,s,n)=>{p(!1)},Enter:(t,s,n)=>{!d&&t===l.current&&(n.preventDefault(),n.stopPropagation(),p(!0))},ArrowDown:(t,s,n)=>{n.altKey&&(n.preventDefault(),n.stopPropagation(),p(!0))},ArrowUp:(t,s,n)=>{n.altKey&&(n.preventDefault(),n.stopPropagation(),p(!1))},Tab:(t,s,n)=>{var V,j;if(o.getActiveElement(document)!==l.current){const G=(V=E.current)==null?void 0:V.wrapperRef.current,y=(j=g.current)==null?void 0:j.wrapperRef.current;u==="palette"&&G?o.keepFocusInContainer(n,G):u==="gradient"&&y?o.keepFocusInContainer(n,y):u==="combo"&&y&&o.keepFocusInContainer(n,y.parentElement)}}}}}),[p,d]),ae=e.useCallback(z.triggerKeyboardEvent.bind(z),[]),re=e.useCallback(()=>{d||(g.current&&g.current.wrapperRef.current?o.focusFirstFocusableChild(g.current.wrapperRef.current):E.current&&E.current.focus())},[d]),le=e.useCallback(()=>{p(!C,!0)},[C]),ce=e.useCallback(t=>{h&&h.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:i})},[h,i]),ie=e.useCallback(t=>{f.current?(clearTimeout(f.current),f.current=void 0):x(!0),D&&D.call(void 0,{nativeEvent:t.nativeEvent,syntheticEvent:t})},[D]),se=e.useCallback(()=>{p(!1,!0),x(!1),f.current=void 0},[]),ue=e.useCallback(t=>{clearTimeout(f.current),f.current=window.setTimeout(se),N&&N.call(void 0,{nativeEvent:t.nativeEvent,syntheticEvent:t})},[N]),O=e.useCallback((t,s)=>{const n=s?t.rgbaValue:t.value;A||te(n),R&&R.call(void 0,{value:n,nativeEvent:t.nativeEvent,syntheticEvent:t.syntheticEvent})},[A,R]),de=e.useCallback(t=>O(t,!0),[L,O]),H=o.useDir(l,a.dir),pe=Z!==!1;return e.createElement("span",{id:a.id,role:"combobox","aria-label":a.ariaLabel,"aria-labelledby":a.ariaLabelledBy,"aria-describedby":a.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":C,"aria-disabled":w?"true":void 0,className:o.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${o.kendoThemeMaps.sizeMap[P]||P}`]:P,[`k-picker-${q}`]:q,[`k-rounded-${o.kendoThemeMaps.roundedMap[T]||T}`]:T,"k-invalid":!pe,"k-disabled":w,"k-focus":Y,className:Q}),ref:l,tabIndex:o.getTabIndex(J,w),title:a.title,onKeyDown:ae,onFocus:ie,onBlur:ue,dir:H},e.createElement(me.Picker,{dir:H,open:C,onOpen:re,popupAnchor:l.current||void 0,popupSettings:{...W},input:e.createElement("span",{onClick:ce,className:"k-input-inner"},e.createElement("span",{className:o.classNames("k-value-icon","k-color-preview",{"k-no-color":!i,"k-icon-color-preview":S||I||v})},v&&e.createElement("span",{className:o.classNames("k-color-preview-icon",v)}),!v&&(S||I)&&e.createElement(o.IconWrap,{name:S,icon:I}),e.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:i}}))),button:e.createElement(be.Button,{tabIndex:-1,type:"button",onClick:le,className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:ve.caretAltDownIcon,"aria-label":b.toLanguageString(F.colorPickerDropdownButtonAriaLabel,F.messages[F.colorPickerDropdownButtonAriaLabel])}),content:e.createElement(e.Fragment,null,(u==="combo"||u==="gradient")&&e.createElement(ge.ColorGradient,{...U,ref:g,isInsidePopup:!0,value:i,onChange:O}),(u==="combo"||u==="palette")&&e.createElement(M.ColorPalette,{...$,ref:E,value:i,onChange:de}))}))});B.propTypes={value:r.string,defaultValue:r.string,disabled:r.bool,view:r.oneOf(["gradient","palette","combo"]),dir:r.string,id:r.string,icon:r.string,svgIcon:o.svgIconPropType,ariaLabelledBy:r.string,ariaDescribedBy:r.string,size:r.oneOf([null,"small","medium","large"]),rounded:r.oneOf([null,"small","medium","large","full"]),fillMode:r.oneOf([null,"solid","flat","outline"]),className:r.string};const k={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",gradientSettings:ye,paletteSettings:Pe};B.displayName="KendoColorPicker";exports.ColorPicker=B;exports.ColorPickerPropsContext=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Be=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),Oe=require("../package-metadata.js"),De=require("./Picker.js"),ze=require("./ColorGradient.js"),K=require("./ColorPalette.js"),B=require("./FlatColorPicker.js"),Ne=require("@progress/kendo-react-buttons"),Le=require("@progress/kendo-svg-icons"),u=require("../messages/index.js"),xe=require("@progress/kendo-react-intl"),qe=require("../common/AdaptiveMode.js"),He=require("@progress/kendo-react-layout");function Ve(p){const y=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const a in p)if(a!=="default"){const k=Object.getOwnPropertyDescriptor(p,a);Object.defineProperty(y,a,k.get?k:{enumerable:!0,get:()=>p[a]})}}return y.default=p,Object.freeze(y)}const t=Ve(Be),Me={opacity:!0},Ue={palette:K.DEFAULT_PRESET,tileSize:K.DEFAULT_TILE_SIZE},G=p=>p!==void 0,ue=n.createPropsContext(),W=t.forwardRef((p,y)=>{var re,oe;n.validatePackage(Oe.packageMetadata);const a=n.usePropsContext(ue,p),k=xe.useLocalization(),$=n.useAdaptiveModeContext(),{size:d=E.size,rounded:O=E.rounded,fillMode:_=E.fillMode,gradientSettings:Z=E.gradientSettings,paletteSettings:J=E.paletteSettings,flatColorPickerSettings:S,view:f=a.views?void 0:E.view,views:l=f?void 0:E.views,activeView:Q,popupSettings:C,valid:de,disabled:D,tabIndex:pe,icon:z,svgIcon:N,iconClassName:R,onChange:L,onFocus:x,onBlur:q,onActiveColorClick:H,className:fe,adaptive:ge,adaptiveTitle:X=k.toLanguageString(u.colorPickerAdaptiveTitle,u.messages[u.colorPickerAdaptiveTitle])}=a,i=t.useRef(null),T=t.useRef(null),A=t.useRef(null),v=t.useRef(null),w=t.useRef(),ke=t.useRef(null),[ve,Y]=t.useState(!1),[me,Ce]=t.useState(a.defaultValue),[be,Ee]=t.useState(!1),[I,we]=t.useState(),V=G(a.value),b=G(a.open),c=V?a.value:me,P=b?a.open:be,ee=t.useCallback(()=>{i.current&&i.current.focus()},[]);t.useImperativeHandle(y,()=>({element:i.current,actionElement:ke.current,value:c,focus:ee}),[c,ee]);const Pe=!!(I&&$&&I<=$.medium&&ge);t.useEffect(()=>{const e=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Ie.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const g=t.useCallback((e,s)=>{b||(!e&&!s&&i&&i.current&&i.current.focus(),Ee(e))},[b]),te=t.useMemo(()=>new n.Navigation({root:i,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,s,r)=>{g(!1)},Enter:(e,s,r)=>{!b&&e===i.current&&(r.preventDefault(),r.stopPropagation(),g(!0))},ArrowDown:(e,s,r)=>{r.altKey&&(r.preventDefault(),r.stopPropagation(),g(!0))},ArrowUp:(e,s,r)=>{r.altKey&&(r.preventDefault(),r.stopPropagation(),g(!1))},Tab:(e,s,r)=>{var h,le,ie;if(n.getActiveElement(document)!==i.current){const ce=(h=A.current)==null?void 0:h.wrapperRef.current,F=(le=T.current)==null?void 0:le.wrapperRef.current,se=(ie=v.current)==null?void 0:ie.element;f==="palette"&&ce?n.keepFocusInContainer(r,ce):f==="gradient"&&F?n.keepFocusInContainer(r,F):f==="combo"&&F?n.keepFocusInContainer(r,F.parentElement):l&&se&&n.keepFocusInContainer(r,se)}}}}}),[g,b]),ye=t.useCallback(te.triggerKeyboardEvent.bind(te),[]),Se=t.useCallback(()=>{b||(T.current&&T.current.wrapperRef.current?n.focusFirstFocusableChild(T.current.wrapperRef.current):A.current?A.current.focus():v.current&&v.current.element&&n.focusFirstFocusableChild(v.current.element))},[b]),M=t.useCallback(()=>{g(!P,!0)},[P]),U=t.useCallback(()=>{g(!1,!0)},[g]),Te=t.useCallback(e=>{H&&H.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:c,target:{element:i.current,value:c}})},[H,c]),he=t.useCallback(e=>{w.current?(clearTimeout(w.current),w.current=void 0):Y(!0),x&&x.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[x]),_e=t.useCallback(()=>{g(!1,!0),Y(!1),w.current=void 0},[]),Re=t.useCallback(e=>{clearTimeout(w.current),w.current=window.setTimeout(_e),q&&q.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[q]),m=t.useCallback((e,s)=>{var h;const r=s?e.rgbaValue||"":(h=e.value)!=null?h:"";V||Ce(r),L&&L.call(void 0,{value:r,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:i.current,value:r}})},[V,L]),ne=t.useCallback(e=>m(e,!0),[G,m]),j=t.useCallback(e=>t.createElement(t.Fragment,null,(f==="combo"||f==="gradient")&&t.createElement(ze.ColorGradient,{...Z,_adaptive:e,ref:T,isInsidePopup:!0,size:e?"large":d,fillMode:_,value:c,onChange:m}),(f==="combo"||f==="palette")&&t.createElement(K.ColorPalette,{...J,ref:A,size:e?"large":d,value:c,onChange:ne}),l&&l[0]==="gradient"&&l[1]==="palette"&&t.createElement(B.FlatColorPicker,{...S,_gradientSettings:{_adaptive:e},ref:v,size:e?"large":d,views:["gradient","palette"],activeView:Q,showButtons:!e,value:c,onChange:m}),l&&l[0]==="palette"&&l[1]==="gradient"&&t.createElement(B.FlatColorPicker,{...S,_gradientSettings:{_adaptive:e},ref:v,size:e?"large":d,views:["palette","gradient"],showButtons:!e,value:c,onChange:m}),l&&l.includes("gradient")&&!l.includes("palette")&&t.createElement(B.FlatColorPicker,{...S,_gradientSettings:{_adaptive:e},ref:v,size:e?"large":d,views:["gradient"],showButtons:!e,value:c,onChange:m}),l&&l.includes("palette")&&!l.includes("gradient")&&t.createElement(B.FlatColorPicker,{...S,_gradientSettings:{_adaptive:e},ref:v,size:e?"large":d,views:["palette"],showButtons:!e,value:c,onChange:m})),[Q,_,S,Z,m,ne,J,d,c,f,l]),Ae=t.useCallback(()=>{var s;const e={animation:!!((s=C==null?void 0:C.animate)==null||s),title:X,expand:P,onClose:U,windowWidth:I,footer:{cancelText:k.toLanguageString(u.flatColorPickerCancelBtn,u.messages[u.flatColorPickerCancelBtn]),onCancel:U,applyText:k.toLanguageString(u.flatColorPickerApplyBtn,u.messages[u.flatColorPickerApplyBtn]),onApply:M}};return t.createElement(qe.AdaptiveMode,{...e},t.createElement(He.ActionSheetContent,{overflowHidden:!0},j(!0)))},[C==null?void 0:C.animate,X,P,U,I,k,M,j]),Ie=t.useCallback(e=>{for(const s of e)we(s.target.clientWidth)},[]),ae=n.useDir(i,a.dir),Fe=de!==!1;return t.createElement("span",{id:a.id,role:"combobox","aria-label":a.ariaLabel,"aria-labelledby":a.ariaLabelledBy,"aria-describedby":a.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":P,"aria-controls":`k-colorpicker-popup-${(re=a.id)!=null?re:0}`,"aria-disabled":D?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[d]||d}`]:d,[`k-picker-${_}`]:_,[`k-rounded-${n.kendoThemeMaps.roundedMap[O]||O}`]:O,"k-invalid":!Fe,"k-disabled":D,"k-focus":ve,className:fe}),ref:i,tabIndex:n.getTabIndex(pe,D),title:a.title,onKeyDown:ye,onFocus:he,onBlur:Re,dir:ae},t.createElement(De.Picker,{dir:ae,open:P,onOpen:Se,popupAnchor:i.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(oe=a.id)!=null?oe:0}`,...C},input:t.createElement("span",{onClick:Te,className:"k-input-inner"},t.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!c,"k-icon-color-preview":z||N||R})},R&&t.createElement("span",{className:n.classNames("k-color-preview-icon",R)}),!R&&(z||N)&&t.createElement(n.IconWrap,{name:z,icon:N}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:c}}))),button:t.createElement(Ne.Button,{tabIndex:-1,type:"button",onClick:M,className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:Le.caretAltDownIcon,"aria-label":k.toLanguageString(u.colorPickerDropdownButtonAriaLabel,u.messages[u.colorPickerDropdownButtonAriaLabel])}),content:j(!1),_mobileMode:Pe,_actionSheet:Ae()}))});W.propTypes={value:o.string,defaultValue:o.string,disabled:o.bool,view:o.oneOf(["gradient","palette","combo"]),views:o.arrayOf(o.oneOf(["gradient","palette"])),dir:o.string,id:o.string,icon:o.string,svgIcon:n.svgIconPropType,ariaLabelledBy:o.string,ariaDescribedBy:o.string,size:o.oneOf([null,"small","medium","large"]),rounded:o.oneOf([null,"small","medium","large","full"]),fillMode:o.oneOf([null,"solid","flat","outline"]),className:o.string,adaptive:o.bool,adaptiveTitle:o.string};const E={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",views:["gradient","palette"],gradientSettings:Me,paletteSettings:Ue};W.displayName="KendoColorPicker";exports.ColorPicker=W;exports.ColorPickerPropsContext=ue;