@progress/kendo-react-inputs 10.2.0-develop.3 → 10.2.0-develop.5

package/colors/ColorContrastSvg.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),i=require("./utils/svg-calc.js"),p=require("./utils/color-parser.js");function S(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const r in l)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(l,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>l[r]})}}return e.default=l,Object.freeze(e)}const h=S(b),C=4.5,m=7,f=16;class A extends h.Component{renderSvgCurveLine(){const e=this.props.metrics,r=(a,u,n,t,s)=>{const g=(n+t)/2,v=Object.assign({},this.props.hsva,{s:u/e.width,v:1-g/e.height}),c=p.getContrastFromTwoRGBAs(p.getRGBA(p.getColorFromHSV(v)),p.getRGBA(this.props.backgroundColor||""));return n+.5>t?c<a+1&&c>a-1?g:null:s(c,a)?r(a,u,n,t-(t-n)/2,s):r(a,u,n+(t-n)/2,t,s)},o=(a,u,n=!1)=>{const t=[];for(let s=0;s<=e.width;s+=e.width/u){const g=r(a,s,0,e.height,n?(v,c)=>v<c:(v,c)=>v>c);g!==null&&t.push([s,g])}return t},d=i.bezierCommand(i.controlPoint(i.line));return i.svgPath(o(C,f),d)+i.svgPath(o(C,f,!0),d)+i.svgPath(o(m,f),d)+i.svgPath(o(m,f,!0),d)}shouldComponentUpdate(e){return!(e.hsva.h===this.props.hsva.h&&e.hsva.a===this.props.hsva.a&&this.props.backgroundColor===e.backgroundColor)}render(){return h.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",className:"k-color-contrast-svg",dangerouslySetInnerHTML:{__html:this.renderSvgCurveLine()},style:{position:"absolute",overflow:"visible",pointerEvents:"none",left:0,top:0,zIndex:3}})}}exports.ColorContrastSvg=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),a=require("./utils/svg-calc.js"),p=require("./utils/color-parser.js");function S(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const r in l)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(l,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>l[r]})}}return e.default=l,Object.freeze(e)}const f=S(b),C=4.5,m=7,h=16;class A extends f.Component{renderSvgCurveLine(){const e=this.props.metrics,r=(i,u,s,t,n)=>{const g=(s+t)/2,v=Object.assign({},this.props.hsva,{s:u/e.width,v:1-g/e.height}),c=p.getContrastFromTwoRGBAs(p.getRGBA(p.getColorFromHSV(v)),p.getRGBA(this.props.backgroundColor||""));return s+.5>t?c<i+1&&c>i-1?g:null:n(c,i)?r(i,u,s,t-(t-s)/2,n):r(i,u,s+(t-s)/2,t,n)},o=(i,u,s=!1)=>{const t=[];for(let n=0;n<=e.width;n+=e.width/u){const g=r(i,n,0,e.height,s?(v,c)=>v<c:(v,c)=>v>c);g!==null&&t.push([n,g])}return t},d=a.bezierCommand(a.controlPoint(a.line));return a.svgPath(o(C,h),d)+a.svgPath(o(C,h,!0),d)+a.svgPath(o(m,h),d)+a.svgPath(o(m,h,!0),d)}shouldComponentUpdate(e){return!(e.hsva.h===this.props.hsva.h&&e.hsva.a===this.props.hsva.a&&this.props.backgroundColor===e.backgroundColor&&e.metrics===this.props.metrics)}render(){return f.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",className:"k-color-contrast-svg",dangerouslySetInnerHTML:{__html:this.renderSvgCurveLine()},style:{position:"absolute",overflow:"visible",pointerEvents:"none",left:0,top:0,zIndex:3}})}}exports.ColorContrastSvg=A;

package/colors/ColorContrastSvg.mjs

@@ -5,25 +5,25 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as h from "react";
+import * as d from "react";
 import { svgPath as p, bezierCommand as f, controlPoint as A, line as b } from "./utils/svg-calc.mjs";
-import { getContrastFromTwoRGBAs as S, getRGBA as m, getColorFromHSV as T } from "./utils/color-parser.mjs";
-const C = 4.5, g = 7, v = 16;
-class w extends h.Component {
+import { getContrastFromTwoRGBAs as S, getRGBA as h, getColorFromHSV as T } from "./utils/color-parser.mjs";
+const C = 4.5, g = 7, m = 16;
+class w extends d.Component {
   renderSvgCurveLine() {
-    const t = this.props.metrics, d = (o, i, r, e, s) => {
+    const t = this.props.metrics, v = (o, i, r, e, s) => {
       const a = (r + e) / 2, l = Object.assign({}, this.props.hsva, {
         s: i / t.width,
         v: 1 - a / t.height
       }), n = S(
-        m(T(l)),
-        m(this.props.backgroundColor || "")
+        h(T(l)),
+        h(this.props.backgroundColor || "")
       );
-      return r + 0.5 > e ? n < o + 1 && n > o - 1 ? a : null : s(n, o) ? d(o, i, r, e - (e - r) / 2, s) : d(o, i, r + (e - r) / 2, e, s);
-    }, u = (o, i, r = !1) => {
+      return r + 0.5 > e ? n < o + 1 && n > o - 1 ? a : null : s(n, o) ? v(o, i, r, e - (e - r) / 2, s) : v(o, i, r + (e - r) / 2, e, s);
+    }, c = (o, i, r = !1) => {
       const e = [];
       for (let s = 0; s <= t.width; s += t.width / i) {
-        const a = d(
+        const a = v(
           o,
           s,
           0,
@@ -33,14 +33,14 @@ class w extends h.Component {
         a !== null && e.push([s, a]);
       }
       return e;
-    }, c = f(A(b));
-    return p(u(C, v), c) + p(u(C, v, !0), c) + p(u(g, v), c) + p(u(g, v, !0), c);
+    }, u = f(A(b));
+    return p(c(C, m), u) + p(c(C, m, !0), u) + p(c(g, m), u) + p(c(g, m, !0), u);
   }
   shouldComponentUpdate(t) {
-    return !(t.hsva.h === this.props.hsva.h && t.hsva.a === this.props.hsva.a && this.props.backgroundColor === t.backgroundColor);
+    return !(t.hsva.h === this.props.hsva.h && t.hsva.a === this.props.hsva.a && this.props.backgroundColor === t.backgroundColor && t.metrics === this.props.metrics);
   }
   render() {
-    return /* @__PURE__ */ h.createElement(
+    return /* @__PURE__ */ d.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",

package/colors/ColorGradient.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),n=require("prop-types"),r=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"),w=require("./ColorInput.js"),x=require("./ColorContrastLabels.js"),G=require("./ColorContrastSvg.js"),L=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function D(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=D(E),A="rgba",k="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.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,i)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else d.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,i,i.nativeEvent)},this.onRgbaChange=(e,a)=>{const i=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(i),p=o.parseColor(i,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:p})}else d.cacheRgba(this.state.guid,i,e);this.dispatchChangeEvent(i,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.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,i)=>{const h=parseInt(e.style.top,10)+i,p=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${p}px`,this.moveDragHandle(p,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),i=e.clientX-a.left,h=e.clientY-a.top;this.moveDragHandle(i,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},this.showLicenseWatermark=!r.validatePackage(H.packageMetadata,{component:"ColorGradient"});const s=t.value||t.defaultValue||o.parseColor(k,A);this.state=Object.assign({},c.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?c.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,i)=>{s=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,i)=>{s=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,i)=>{t=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,i)=>{t=i.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 r.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,s,e)=>{r.getActiveElement(document)===t?r.disableNavigatableContainer(t):r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{r.getActiveElement(document)===t&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t))},Escape:(t,s,e)=>{r.getActiveElement(document)!==t&&(t.focus(),r.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid)}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const 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 l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:r.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,s){const e=this.getGradientRectMetrics(),a=e.width,i=e.height,h=v.fitIntoBounds(s,0,i),p=v.fitIntoBounds(t,0,a),y=Object.assign({},this.state.hsva,{s:p/a,v:1-h/i});this.handleHsvaChange(y,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),i=o.parseColor(a,"hex");this.isUncontrolled||d.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:i}),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){v.isPresent(o.parseColor(t,"hex"))||(t=k);const e=d.getCachedHsva(s,t)||o.getHSV(t),a=d.getCachedRgba(s,t)||o.getRGBA(t),i=d.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:i}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=L.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role,className:r.classNames("k-colorgradient",{[`k-colorgradient-${r.kendoThemeMaps.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:{position:"relative",...this.props.style},ref:this.wrapperRef,tabIndex:r.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 ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:s=>{this.gradientWrapper=s?s.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 ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(m.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,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&&l.createElement(m.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>{this.alphaSlider=s}}))),l.createElement(w,{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,size:this.props.size,fillMode:this.props.fillMode}),this.props.backgroundColor&&l.createElement(x.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&l.createElement(r.WatermarkOverlay,null))}};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,size:n.oneOf(["small","medium","large",null])},c.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:"medium"};let f=c;const S=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(S,f));R.displayName="KendoReactColorGradient";exports.ColorGradient=R;exports.ColorGradientPropsContext=S;exports.ColorGradientWithoutContext=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),n=require("prop-types"),i=require("@progress/kendo-react-common"),w=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"),H=require("./ColorInput.js"),x=require("./ColorContrastLabels.js"),G=require("./ColorContrastSvg.js"),L=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function D(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=D(E),A="rgba",k="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.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,r)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else d.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,r,r.nativeEvent)},this.onRgbaChange=(e,a)=>{const r=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(r),p=o.parseColor(r,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:p})}else d.cacheRgba(this.state.guid,r,e);this.dispatchChangeEvent(r,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.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,r)=>{const h=parseInt(e.style.top,10)+r,p=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${p}px`,this.moveDragHandle(p,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),r=e.clientX-a.left,h=e.clientY-a.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 a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},this.showLicenseWatermark=!i.validatePackage(w.packageMetadata,{component:"ColorGradient"});const s=t.value||t.defaultValue||o.parseColor(k,A);this.state=Object.assign({},c.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?c.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.gradientWrapper&&(this.resizeObserver=i.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(()=>{this.forceUpdate()}),this.resizeObserver&&this.resizeObserver.observe(this.gradientWrapper)),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new i.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,r)=>{s=r.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,r)=>{s=r.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,r)=>{t=r.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,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,s,e)=>{i.getActiveElement(document)===t?i.disableNavigatableContainer(t):i.keepFocusInContainer(e,t,i.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{i.getActiveElement(document)===t&&(i.focusFirstFocusableChild(t),i.enableNavigatableContainer(t))},Escape:(t,s,e)=>{i.getActiveElement(document)!==t&&(t.focus(),i.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid),this.resizeObserver&&this.resizeObserver.disconnect()}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const 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 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,s){const e=this.getGradientRectMetrics(),a=e.width,r=e.height,h=v.fitIntoBounds(s,0,r),p=v.fitIntoBounds(t,0,a),y=Object.assign({},this.state.hsva,{s:p/a,v:1-h/r});this.handleHsvaChange(y,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),r=o.parseColor(a,"hex");this.isUncontrolled||d.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:r}),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){v.isPresent(o.parseColor(t,"hex"))||(t=k);const e=d.getCachedHsva(s,t)||o.getHSV(t),a=d.getCachedRgba(s,t)||o.getRGBA(t),r=d.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:r}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=L.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role,className:i.classNames("k-colorgradient",{[`k-colorgradient-${i.kendoThemeMaps.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:{position:"relative",...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 ${this.props._adaptive?"k-vstack":"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:s=>{this.gradientWrapper=s?s.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 ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(m.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,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&&l.createElement(m.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>{this.alphaSlider=s}}))),l.createElement(H,{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,size:this.props.size,fillMode:this.props.fillMode}),this.props.backgroundColor&&l.createElement(x.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&l.createElement(i.WatermarkOverlay,null))}};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,size:n.oneOf(["small","medium","large",null])},c.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:"medium"};let f=c;const S=i.createPropsContext(),R=i.withIdHOC(i.withPropsContext(S,f));R.displayName="KendoReactColorGradient";exports.ColorGradient=R;exports.ColorGradientPropsContext=S;exports.ColorGradientWithoutContext=f;

package/colors/ColorGradient.mjs

@@ -7,35 +7,35 @@
  */
 import * as r from "react";
 import o from "prop-types";
-import { validatePackage as D, 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 _, WatermarkOverlay as T, createPropsContext as B, withIdHOC as P, withPropsContext as V } from "@progress/kendo-react-common";
-import { packageMetadata as K } 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 p, getRGBA as c, getColorFromRGBA as O, parseColor as d, getColorFromHSV as U } from "./utils/color-parser.mjs";
-import { cacheHex as z, cacheRgba as W, removeCachedColor as $, cacheHsva as j, getCachedHsva as X, getCachedRgba as Y, getCachedHex as q } from "./utils/color-cache.mjs";
-import J from "./ColorInput.mjs";
-import { ColorContrastLabels as Q } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as Z } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as ee } from "@progress/kendo-react-intl";
+import { validatePackage as L, canUseDOM as F, Navigation as f, getActiveElement as b, disableNavigatableContainer as C, keepFocusInContainer as G, TABBABLE_ELEMENTS as A, focusFirstFocusableChild as M, enableNavigatableContainer as N, getTabIndex as k, classNames as I, kendoThemeMaps as _, Draggable as T, WatermarkOverlay as O, createPropsContext as z, withIdHOC as B, withPropsContext as P } from "@progress/kendo-react-common";
+import { packageMetadata as V } from "../package-metadata.mjs";
+import { Slider as R } from "../slider/Slider.mjs";
+import { isPresent as S, fitIntoBounds as y } from "./utils/misc.mjs";
+import { getHSV as u, getColorFromHue as p, getRGBA as c, getColorFromRGBA as K, parseColor as d, getColorFromHSV as U } from "./utils/color-parser.mjs";
+import { cacheHex as W, cacheRgba as $, removeCachedColor as j, cacheHsva as X, getCachedHsva as Y, getCachedRgba as q, getCachedHex as J } from "./utils/color-cache.mjs";
+import Q from "./ColorInput.mjs";
+import { ColorContrastLabels as Z } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as ee } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as te } from "@progress/kendo-react-intl";
 import { colorGradientHueSliderLabel as E, messages as w, colorGradientAlphaSliderLabel as x } from "../messages/index.mjs";
-const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
+const se = "rgba", H = "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.showLicenseWatermark = !1, this.focus = () => {
       this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
     }, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
-        const n = b(s);
+        const n = u(s);
         this.setState({ hsva: n, backgroundColor: p(n.h), rgba: c(s), hex: e });
       } else
-        z(this.state.guid, s, e);
+        W(this.state.guid, s, e);
       this.dispatchChangeEvent(s, i, i.nativeEvent);
     }, this.onRgbaChange = (e, s) => {
-      const i = O(e);
+      const i = K(e);
       if (this.isUncontrolled) {
-        const n = b(i), l = d(i, "hex");
+        const n = u(i), l = d(i, "hex");
         this.setState({ hsva: n, backgroundColor: p(n.h), rgba: e, hex: l });
       } else
-        W(this.state.guid, i, e);
+        $(this.state.guid, i, e);
       this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
     }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
@@ -69,8 +69,8 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
     }, this.onKeyDown = (e) => {
       var s;
       (s = this.navigation) == null || s.triggerKeyboardEvent(e);
-    }, this.showLicenseWatermark = !D(K, { component: "ColorGradient" });
-    const a = t.value || t.defaultValue || d(H, te);
+    }, this.showLicenseWatermark = !L(V, { component: "ColorGradient" });
+    const a = t.value || t.defaultValue || d(H, se);
     this.state = Object.assign({}, h.getStateFromValue(a), {
       isFirstRender: !0,
       guid: this.props.id
@@ -86,7 +86,9 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   componentDidMount() {
-    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.wrapperRef && this.hsvGradientRef) {
+    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = F && window.ResizeObserver && new window.ResizeObserver(() => {
+      this.forceUpdate();
+    }), this.resizeObserver && this.resizeObserver.observe(this.gradientWrapper)), this.wrapperRef && this.hsvGradientRef) {
       let t = 0, a = 0;
       this.hsvNavigation = new f({
         tabIndex: 0,
@@ -117,13 +119,13 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
       keyboardEvents: {
         keydown: {
           Tab: (t, a, e) => {
-            u(document) === t ? C(t) : F(e, t, G);
+            b(document) === t ? C(t) : G(e, t, A);
           },
           Enter: (t, a, e) => {
-            u(document) === t && (A(t), N(t));
+            b(document) === t && (M(t), N(t));
           },
           Escape: (t, a, e) => {
-            u(document) !== t && (t.focus(), C(t));
+            b(document) !== t && (t.focus(), C(t));
           }
         }
       }
@@ -133,7 +135,7 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   componentWillUnmount() {
-    $(this.state.guid);
+    j(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
   }
   /**
    * @hidden
@@ -171,18 +173,18 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   moveDragHandle(t, a) {
-    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = y(a, 0, i), l = y(t, 0, s), L = Object.assign({}, this.state.hsva, {
+    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(L, {}, {});
+    this.handleHsvaChange(D, {}, {});
   }
   /**
    * @hidden
    */
   handleHsvaChange(t, a, e) {
     const s = U(t), i = d(s, "hex");
-    this.isUncontrolled || j(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: p(t.h), rgba: c(s), hex: i }), this.dispatchChangeEvent(s, a, e);
+    this.isUncontrolled || X(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: p(t.h), rgba: c(s), hex: i }), this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
@@ -199,8 +201,8 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   static getStateFromValue(t, a) {
-    R(d(t, "hex")) || (t = H);
-    const e = X(a, t) || b(t), s = Y(a, t) || c(t), i = q(a, t) || d(t, "hex"), n = p(e.h);
+    S(d(t, "hex")) || (t = H);
+    const e = Y(a, t) || u(t), s = q(a, t) || c(t), i = J(a, t) || d(t, "hex"), n = p(e.h);
     return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
@@ -225,7 +227,7 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   render() {
-    const t = ee(this);
+    const t = te(this);
     return /* @__PURE__ */ r.createElement(
       "div",
       {
@@ -234,7 +236,7 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         className: I(
           "k-colorgradient",
           {
-            [`k-colorgradient-${M.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            [`k-colorgradient-${_.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
             "k-disabled": this.props.disabled
           },
           this.props.className
@@ -250,7 +252,7 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         onKeyDown: this.onKeyDown
       },
       /* @__PURE__ */ r.createElement("div", { className: `k-colorgradient-canvas ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ r.createElement(
-        _,
+        T,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
@@ -268,14 +270,14 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           this.renderRectangleDragHandle()
         )
       ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ r.createElement(
-        Z,
+        ee,
         {
           metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
           hsva: this.state.hsva,
           backgroundColor: this.props.backgroundColor
         }
       )), /* @__PURE__ */ r.createElement("div", { className: `k-hsv-controls ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement(
-        S,
+        R,
         {
           value: this.state.hsva.h,
           buttons: !1,
@@ -292,9 +294,9 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           )
         }
       ), this.props.opacity && /* @__PURE__ */ r.createElement(
-        S,
+        R,
         {
-          value: R(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
+          value: S(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
           buttons: !1,
           vertical: !this.props._adaptive,
           min: 0,
@@ -313,7 +315,7 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         }
       ))),
       /* @__PURE__ */ r.createElement(
-        J,
+        Q,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -326,8 +328,8 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           fillMode: this.props.fillMode
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ r.createElement(Q, { bgColor: c(this.props.backgroundColor), rgba: this.state.rgba }),
-      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(T, null)
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(Z, { bgColor: c(this.props.backgroundColor), rgba: this.state.rgba }),
+      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(O, null)
     );
   }
 };
@@ -355,15 +357,15 @@ h.displayName = "ColorGradient", h.propTypes = {
   size: "medium"
 };
 let m = h;
-const se = B(), ae = P(
-  V(
-    se,
+const ae = z(), ie = B(
+  P(
+    ae,
     m
   )
 );
-ae.displayName = "KendoReactColorGradient";
+ie.displayName = "KendoReactColorGradient";
 export {
-  ae as ColorGradient,
-  se as ColorGradientPropsContext,
+  ie as ColorGradient,
+  ae as ColorGradientPropsContext,
   m as ColorGradientWithoutContext
 };

package/colors/ColorPicker.js

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