@progress/kendo-react-inputs 8.2.0-develop.29 → 8.2.0-develop.30

package/colors/ColorGradient.js

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

package/colors/ColorGradient.mjs

@@ -6,154 +6,213 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as o from "react";
-import i from "prop-types";
-import { focusFirstFocusableChild as E, validatePackage as F, getTabIndex as u, classNames as H, Draggable as L, createPropsContext as D, withIdHOC as N, withPropsContext as A } from "@progress/kendo-react-common";
-import { packageMetadata as B } from "../package-metadata.mjs";
-import { Slider as m } from "../slider/Slider.mjs";
-import { fitIntoBounds as C, isPresent as v } from "./utils/misc.mjs";
-import { getHSV as g, getColorFromHue as d, getRGBA as c, getColorFromRGBA as P, parseColor as l, getColorFromHSV as w } from "./utils/color-parser.mjs";
-import { cacheHex as I, cacheRgba as M, removeCachedColor as T, cacheHsva as V, getCachedHsva as G, getCachedRgba as O, getCachedHex as U } from "./utils/color-cache.mjs";
-import j from "./ColorInput.mjs";
-import { ColorContrastLabels as W } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as $ } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as X } from "@progress/kendo-react-intl";
-import { colorGradientHueSliderLabel as f, messages as k, colorGradientAlphaSliderLabel as S } from "../messages/index.mjs";
-const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component {
-  constructor(e) {
-    super(e), this.wrapper = null, this.onHexChange = (t, s, r) => {
+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 { 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 { 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 {
+  constructor(t) {
+    super(t), this.wrapperRef = r.createRef(), this.hsvGradientRef = r.createRef(), this.focus = () => {
+      this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
+    }, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
-        const n = g(s);
-        this.setState({ hsva: n, backgroundColor: d(n.h), rgba: c(s), hex: t });
+        const n = b(s);
+        this.setState({ hsva: n, backgroundColor: c(n.h), rgba: p(s), hex: e });
       } else
-        I(this.state.guid, s, t);
-      this.dispatchChangeEvent(s, r, r.nativeEvent);
-    }, this.onRgbaChange = (t, s) => {
-      const r = P(t);
+        U(this.state.guid, s, e);
+      this.dispatchChangeEvent(s, i, i.nativeEvent);
+    }, this.onRgbaChange = (e, s) => {
+      const i = V(e);
       if (this.isUncontrolled) {
-        const n = g(r), p = l(r, "hex");
-        this.setState({ hsva: n, backgroundColor: d(n.h), rgba: t, hex: p });
+        const n = b(i), l = d(i, "hex");
+        this.setState({ hsva: n, backgroundColor: c(n.h), rgba: e, hex: l });
       } else
-        M(this.state.guid, r, t);
-      this.dispatchChangeEvent(r, s.syntheticEvent, s.nativeEvent);
-    }, this.onAlphaSliderChange = (t) => {
+        O(this.state.guid, i, e);
+      this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
+    }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
-        Object.assign({}, this.state.hsva, { a: t.value / 100 }),
-        t.syntheticEvent,
-        t.nativeEvent
+        Object.assign({}, this.state.hsva, { a: e.value / 100 }),
+        e.syntheticEvent,
+        e.nativeEvent
       );
-    }, this.onHueSliderChange = (t) => {
+    }, this.onHueSliderChange = (e) => {
       this.handleHsvaChange(
-        Object.assign({}, this.state.hsva, { h: t.value }),
-        t.syntheticEvent,
-        t.nativeEvent
+        Object.assign({}, this.state.hsva, { h: e.value }),
+        e.syntheticEvent,
+        e.nativeEvent
       );
-    }, this.onDrag = (t) => {
-      this.gradientWrapper.classList.add("k-dragging"), this.changePosition(t.event);
+    }, this.onDrag = (e) => {
+      this.gradientWrapper.classList.add("k-dragging"), this.changePosition(e.event);
     }, this.onRelease = () => {
       this.gradientWrapper.classList.remove("k-dragging");
-    }, this.onGradientWrapperClick = (t) => {
-      this.changePosition(t);
-    }, this.changePosition = (t) => {
-      const s = this.getGradientRectMetrics(), r = t.clientX - s.left, n = t.clientY - s.top, p = C(r, 0, s.width), x = C(n, 0, s.height), y = Object.assign(
-        {},
-        this.state.hsva,
-        { s: p / s.width, v: 1 - x / s.height }
-      );
-      this.handleHsvaChange(y, t, t.nativeEvent);
-    }, this.onFocus = (t) => {
+    }, this.onGradientWrapperClick = (e) => {
+      this.changePosition(e);
+    }, this.onHsvGradientKeyDown = (e) => {
+      var s;
+      (s = this.hsvNavigation) == null || s.triggerKeyboardEvent(e);
+    }, this.onHsvGradientValueChange = (e, s, i) => {
+      const n = parseInt(e.style.top, 10) + i, l = parseInt(e.style.left, 10) + s;
+      e.style.top = `${n}px`, e.style.left = `${l}px`, this.moveDragHandle(l, n);
+    }, this.changePosition = (e) => {
+      const s = this.getGradientRectMetrics(), i = e.clientX - s.left, n = e.clientY - s.top;
+      this.moveDragHandle(i, n);
+    }, this.onFocus = (e) => {
       this.props.onFocus && this.props.onFocus.call(
         void 0,
-        { nativeEvent: t, target: this }
+        { nativeEvent: e, target: this }
       );
-    }, this.focus = () => {
-      this.wrapper && E(this.wrapper);
-    }, F(B);
-    const a = e.value || e.defaultValue || l(R, Y);
+    }, this.onKeyDown = (e) => {
+      var s;
+      (s = this.navigation) == null || s.triggerKeyboardEvent(e);
+    }, L(P);
+    const a = t.value || t.defaultValue || d(w, Z);
     this.state = Object.assign({}, h.getStateFromValue(a), { isFirstRender: !0, guid: this.props.id });
   }
   /**
    * @hidden
    */
-  static getDerivedStateFromProps(e, a) {
-    return e.value && !a.isFirstRender ? h.getStateFromValue(e.value, a.guid) : null;
+  static getDerivedStateFromProps(t, a) {
+    return t.value && !a.isFirstRender ? h.getStateFromValue(t.value, a.guid) : null;
   }
   /**
    * @hidden
    */
   componentDidMount() {
-    this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 });
+    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({
+        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);
+            },
+            ArrowUp: (e, s, i) => {
+              a = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), 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);
+            },
+            ArrowRight: (e, s, i) => {
+              t = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, t, 0);
+            }
+          }
+        }
+      });
+    }
+    this.wrapperRef && this.wrapperRef.current && (this.props.isInsidePopup ? this.hsvGradientRef.current && this.hsvGradientRef.current.focus() : this.navigation = new m({
+      tabIndex: 0,
+      root: this.wrapperRef,
+      selectors: [".k-colorgradient"],
+      keyboardEvents: {
+        keydown: {
+          Tab: (t, a, e) => {
+            u(document) === t ? C(t) : F(e, t, G);
+          },
+          Enter: (t, a, e) => {
+            u(document) === t && (A(t), N(t));
+          },
+          Escape: (t, a, e) => {
+            u(document) !== t && (t.focus(), C(t));
+          }
+        }
+      }
+    }));
   }
   /**
    * @hidden
    */
   componentWillUnmount() {
-    T(this.state.guid);
+    W(this.state.guid);
   }
   /**
    * @hidden
    */
-  componentDidUpdate(e, a) {
+  componentDidUpdate(t, a) {
     a.backgroundColor !== this.state.backgroundColor && this.setAlphaSliderBackground(this.state.backgroundColor);
   }
   /**
    * @hidden
    */
   renderRectangleDragHandle() {
-    let e = {};
+    let t = {};
     if (!this.state.isFirstRender) {
-      const a = this.getGradientRectMetrics(), t = (1 - this.state.hsva.v) * a.height, s = this.state.hsva.s * a.width;
-      e.top = `${t}px`, e.left = `${s}px`;
+      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__ */ o.createElement(
+    return /* @__PURE__ */ r.createElement(
       "div",
       {
+        ref: this.hsvGradientRef,
         role: "slider",
-        tabIndex: u(this.props.tabIndex, this.props.disabled),
+        tabIndex: S(this.props.tabIndex, this.props.disabled),
         "aria-valuetext": this.props.ariaValueText,
         "aria-valuenow": parseInt(this.state.hex.substring(1), 16),
         "aria-label": this.props.ariaLabelHSV,
         "aria-orientation": void 0,
         "aria-disabled": this.props.disabled ? "true" : void 0,
         className: "k-hsv-draghandle k-draghandle",
-        style: e
+        style: t,
+        onKeyDown: this.onHsvGradientKeyDown
       }
     );
   }
   /**
    * @hidden
    */
-  handleHsvaChange(e, a, t) {
-    const s = w(e);
+  moveDragHandle(t, a) {
+    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = y(a, 0, i), l = y(t, 0, s), D = Object.assign(
+      {},
+      this.state.hsva,
+      { s: l / s, v: 1 - n / i }
+    );
+    this.handleHsvaChange(D, {}, {});
+  }
+  /**
+   * @hidden
+   */
+  handleHsvaChange(t, a, e) {
+    const s = K(t);
     if (this.isUncontrolled) {
-      const r = l(s, "hex");
-      this.setState({ hsva: e, backgroundColor: d(e.h), rgba: c(s), hex: r });
+      const i = d(s, "hex");
+      this.setState({ hsva: t, backgroundColor: c(t.h), rgba: p(s), hex: i });
     } else
-      V(this.state.guid, s, e);
-    this.dispatchChangeEvent(s, a, t);
+      $(this.state.guid, s, t);
+    this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
    */
-  dispatchChangeEvent(e, a, t) {
+  dispatchChangeEvent(t, a, e) {
     this.props.onChange && this.props.onChange.call(
       void 0,
-      { syntheticEvent: a, nativeEvent: t, target: this, value: e }
+      { syntheticEvent: a, nativeEvent: e, target: this, value: t }
     );
   }
   /**
    * @hidden
    */
-  static getStateFromValue(e, a) {
-    v(l(e, "hex")) || (e = R);
-    const t = G(a, e) || g(e), s = O(a, e) || c(e), r = U(a, e) || l(e, "hex"), n = d(t.h);
-    return { hsva: t, backgroundColor: n, rgba: s, hex: r };
+  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);
+    return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
    * @hidden
    */
-  setAlphaSliderBackground(e) {
-    this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to top, transparent, ${e})`);
+  setAlphaSliderBackground(t) {
+    this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to top, transparent, ${t})`);
   }
   /**
    * @hidden
@@ -171,8 +230,8 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
    * @hidden
    */
   render() {
-    const e = X(this), a = H("k-colorgradient", { "k-disabled": this.props.disabled }, this.props.className);
-    return /* @__PURE__ */ o.createElement(
+    const t = Q(this), a = I("k-colorgradient", { "k-disabled": this.props.disabled }, this.props.className);
+    return /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
@@ -180,21 +239,22 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
         className: a,
         "aria-disabled": this.props.disabled ? "true" : void 0,
         style: this.props.style,
-        ref: (t) => this.wrapper = t,
-        tabIndex: u(this.props.tabIndex, this.props.disabled),
+        ref: this.wrapperRef,
+        tabIndex: S(this.props.tabIndex, this.props.disabled),
         "aria-label": this.props.ariaLabel,
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy,
-        onFocus: this.onFocus
+        onFocus: this.onFocus,
+        onKeyDown: this.onKeyDown
       },
-      /* @__PURE__ */ o.createElement("div", { className: "k-colorgradient-canvas k-hstack" }, /* @__PURE__ */ o.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ o.createElement(
-        L,
+      /* @__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,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
-          ref: (t) => this.gradientWrapper = t ? t.element : void 0
+          ref: (e) => this.gradientWrapper = e ? e.element : void 0
         },
-        /* @__PURE__ */ o.createElement(
+        /* @__PURE__ */ r.createElement(
           "div",
           {
             className: "k-hsv-gradient",
@@ -203,15 +263,15 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
           },
           this.renderRectangleDragHandle()
         )
-      ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ o.createElement(
-        $,
+      ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ r.createElement(
+        J,
         {
           metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
           hsva: this.state.hsva,
           backgroundColor: this.props.backgroundColor
         }
-      )), /* @__PURE__ */ o.createElement("div", { className: "k-hsv-controls k-hstack" }, /* @__PURE__ */ o.createElement(
-        m,
+      )), /* @__PURE__ */ r.createElement("div", { className: "k-hsv-controls k-hstack" }, /* @__PURE__ */ r.createElement(
+        k,
         {
           value: this.state.hsva.h,
           buttons: !1,
@@ -222,26 +282,26 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
           onChange: this.onHueSliderChange,
           className: "k-hue-slider k-colorgradient-slider",
           disabled: this.props.disabled,
-          ariaLabel: e.toLanguageString(f, k[f])
+          ariaLabel: t.toLanguageString(E, x[E])
         }
-      ), this.props.opacity && /* @__PURE__ */ o.createElement(
-        m,
+      ), this.props.opacity && /* @__PURE__ */ r.createElement(
+        k,
         {
-          value: v(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
+          value: R(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
           buttons: !1,
           vertical: !0,
           min: 0,
           max: 100,
           step: 1,
-          ariaLabel: e.toLanguageString(S, k[S]),
+          ariaLabel: t.toLanguageString(H, x[H]),
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
           disabled: this.props.disabled,
-          ref: (t) => this.alphaSlider = t
+          ref: (e) => this.alphaSlider = e
         }
       ))),
-      /* @__PURE__ */ o.createElement(
-        j,
+      /* @__PURE__ */ r.createElement(
+        z,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -252,10 +312,10 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
           defaultInputMode: this.props.format
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ o.createElement(
-        W,
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(
+        q,
         {
-          bgColor: c(this.props.backgroundColor),
+          bgColor: p(this.props.backgroundColor),
           rgba: this.state.rgba
         }
       )
@@ -263,31 +323,31 @@ const Y = "rgba", R = "rgba(255, 255, 255, 1)", h = class h extends o.Component
   }
 };
 h.displayName = "ColorGradient", h.propTypes = {
-  defaultValue: i.string,
-  value: i.string,
-  onChange: i.func,
-  onFocus: i.func,
-  opacity: i.bool,
-  backgroundColor: i.string,
-  format: i.any,
-  disabled: i.bool,
-  style: i.any,
-  id: i.string,
-  role: i.string,
-  ariaLabel: i.string,
-  ariaLabelledBy: i.string,
-  ariaDescribedBy: i.string,
-  className: i.string
+  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
 }, h.defaultProps = {
   opacity: !0,
   role: "textbox",
   format: "rgb"
 };
-let b = h;
-const z = D(), K = N(A(z, b));
-K.displayName = "KendoReactColorGradient";
+let f = h;
+const ee = M(), te = _(B(ee, f));
+te.displayName = "KendoReactColorGradient";
 export {
-  K as ColorGradient,
-  z as ColorGradientPropsContext,
-  b as ColorGradientWithoutContext
+  te as ColorGradient,
+  ee as ColorGradientPropsContext,
+  f as ColorGradientWithoutContext
 };

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 T=require("react"),s=require("prop-types"),N=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),R=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 a=O(T),b=24,C=10,m="office",c=class c extends a.Component{constructor(t){super(t),this.wrapper=null,this.paletteService=null,this.focus=()=>{this.wrapper&&this.wrapper.focus()},this.onKeyDown=e=>{switch(e.keyCode){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 N.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor),l=r.classNames("k-colorpalette",{"k-disabled":this.props.disabled},this.props.className);return t.colors.length?a.createElement("div",{id:this.props.id,role:"grid",className:l,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:h=>this.wrapper=h},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: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||C}:{colors:[],columns:0}}else return{colors:this.props.palette||[],columns:this.props.columns||C}}renderRows(t,e,o){return t.map((i,l)=>a.createElement("tr",{role:"row",key:l},this.renderColumns(i,l,e,o)))}renderColumns(t,e,o,i){const l=o!==void 0&&o.row===e,h=o&&o.col,E=i!==void 0&&i.row===e,w=i&&i.col,f=typeof this.props.tileSize!="number"?this.props.tileSize:{width:this.props.tileSize,height:this.props.tileSize},g=f.width+"px",P=f.height+"px";return t.map((u,d)=>{const v=l&&h===d,k=r.classNames("k-colorpalette-tile",{"k-selected":v,"k-focus":E&&w===d});return a.createElement("td",{role:"gridcell",className:k,"aria-label":u,"aria-selected":v?!0:this.props.disabled?void 0:!1,style:{backgroundColor:u,width:g,height:P,minWidth:g},onClick:F=>this.onColorClick(u,F),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:m,tileSize:b};let p=c;const S=r.createPropsContext(),y=r.withIdHOC(r.withPropsContext(S,p));y.displayName="KendoReactColorPalette";exports.ColorPalette=y;exports.ColorPalettePropsContext=S;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=C;exports.DEFAULT_PRESET=m;exports.DEFAULT_TILE_SIZE=b;
+"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}}else 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;