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

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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),m=require("../package-metadata.js"),k=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"),L=require("./ColorContrastSvg.js"),G=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(w),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.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(m.packageMetadata,{component:"ColorGradient"}),this.licenseMessage=r.getLicenseMessage(m.packageMetadata);const s=t.value||t.defaultValue||o.parseColor(S,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=r.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 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),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: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),E=Object.assign({},this.state.hsva,{s:p/a,v:1-h/i});this.handleHsvaChange(E,{},{})}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=S);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=G.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(L.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(k.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(k.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(r.WatermarkOverlay,{message:this.licenseMessage}))}};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 R=r.createPropsContext(),y=r.withIdHOC(r.withPropsContext(R,f));y.displayName="KendoReactColorGradient";exports.ColorGradient=y;exports.ColorGradientPropsContext=R;exports.ColorGradientWithoutContext=f;

package/colors/ColorGradient.mjs

@@ -7,18 +7,18 @@
  */
 import * as r from "react";
 import o from "prop-types";
-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 se = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
+import { validatePackage as F, getLicenseMessage as G, canUseDOM as M, Navigation as f, getActiveElement as b, disableNavigatableContainer as C, keepFocusInContainer as A, TABBABLE_ELEMENTS as N, focusFirstFocusableChild as I, enableNavigatableContainer as _, getTabIndex as k, classNames as T, kendoThemeMaps as O, Draggable as z, WatermarkOverlay as B, createPropsContext as P, withIdHOC as V, withPropsContext as K } from "@progress/kendo-react-common";
+import { packageMetadata as R } from "../package-metadata.mjs";
+import { Slider as S } from "../slider/Slider.mjs";
+import { isPresent as y, fitIntoBounds as E } from "./utils/misc.mjs";
+import { getHSV as u, getColorFromHue as p, getRGBA as c, getColorFromRGBA as U, parseColor as d, getColorFromHSV as W } from "./utils/color-parser.mjs";
+import { cacheHex as $, cacheRgba as j, removeCachedColor as X, cacheHsva as Y, getCachedHsva as q, getCachedRgba as J, getCachedHex as Q } from "./utils/color-cache.mjs";
+import Z from "./ColorInput.mjs";
+import { ColorContrastLabels as ee } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as te } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as se } from "@progress/kendo-react-intl";
+import { colorGradientHueSliderLabel as w, messages as x, colorGradientAlphaSliderLabel as H } from "../messages/index.mjs";
+const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
   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();
@@ -27,15 +27,15 @@ const se = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         const n = u(s);
         this.setState({ hsva: n, backgroundColor: p(n.h), rgba: c(s), hex: e });
       } else
-        W(this.state.guid, s, e);
+        $(this.state.guid, s, e);
       this.dispatchChangeEvent(s, i, i.nativeEvent);
     }, this.onRgbaChange = (e, s) => {
-      const i = K(e);
+      const i = U(e);
       if (this.isUncontrolled) {
         const n = u(i), l = d(i, "hex");
         this.setState({ hsva: n, backgroundColor: p(n.h), rgba: e, hex: l });
       } else
-        $(this.state.guid, i, e);
+        j(this.state.guid, i, e);
       this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
     }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
@@ -69,8 +69,8 @@ const se = "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 = !L(V, { component: "ColorGradient" });
-    const a = t.value || t.defaultValue || d(H, se);
+    }, this.showLicenseWatermark = !F(R, { component: "ColorGradient" }), this.licenseMessage = G(R);
+    const a = t.value || t.defaultValue || d(L, ae);
     this.state = Object.assign({}, h.getStateFromValue(a), {
       isFirstRender: !0,
       guid: this.props.id
@@ -86,7 +86,7 @@ const se = "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.gradientWrapper && (this.resizeObserver = F && window.ResizeObserver && new window.ResizeObserver(() => {
+    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = M && window.ResizeObserver && new window.ResizeObserver(() => {
       this.forceUpdate();
     }), this.resizeObserver && this.resizeObserver.observe(this.gradientWrapper)), this.wrapperRef && this.hsvGradientRef) {
       let t = 0, a = 0;
@@ -119,10 +119,10 @@ const se = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
       keyboardEvents: {
         keydown: {
           Tab: (t, a, e) => {
-            b(document) === t ? C(t) : G(e, t, A);
+            b(document) === t ? C(t) : A(e, t, N);
           },
           Enter: (t, a, e) => {
-            b(document) === t && (M(t), N(t));
+            b(document) === t && (I(t), _(t));
           },
           Escape: (t, a, e) => {
             b(document) !== t && (t.focus(), C(t));
@@ -135,7 +135,7 @@ const se = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   componentWillUnmount() {
-    j(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
+    X(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
   }
   /**
    * @hidden
@@ -173,7 +173,7 @@ const se = "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), D = Object.assign({}, this.state.hsva, {
+    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = E(a, 0, i), l = E(t, 0, s), D = Object.assign({}, this.state.hsva, {
       s: l / s,
       v: 1 - n / i
     });
@@ -183,8 +183,8 @@ const se = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   handleHsvaChange(t, a, e) {
-    const s = U(t), i = d(s, "hex");
-    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);
+    const s = W(t), i = d(s, "hex");
+    this.isUncontrolled || Y(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: p(t.h), rgba: c(s), hex: i }), this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
@@ -201,8 +201,8 @@ const se = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   static getStateFromValue(t, a) {
-    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);
+    y(d(t, "hex")) || (t = L);
+    const e = q(a, t) || u(t), s = J(a, t) || c(t), i = Q(a, t) || d(t, "hex"), n = p(e.h);
     return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
@@ -227,16 +227,16 @@ const se = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   render() {
-    const t = te(this);
+    const t = se(this);
     return /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
         role: this.props.role,
-        className: I(
+        className: T(
           "k-colorgradient",
           {
-            [`k-colorgradient-${_.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            [`k-colorgradient-${O.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
             "k-disabled": this.props.disabled
           },
           this.props.className
@@ -252,7 +252,7 @@ const se = "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,
+        z,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
@@ -270,14 +270,14 @@ const se = "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(
-        ee,
+        te,
         {
           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(
-        R,
+        S,
         {
           value: this.state.hsva.h,
           buttons: !1,
@@ -289,22 +289,22 @@ const se = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           className: "k-hue-slider k-colorgradient-slider",
           disabled: this.props.disabled,
           ariaLabel: t.toLanguageString(
-            E,
-            w[E]
+            w,
+            x[w]
           )
         }
       ), this.props.opacity && /* @__PURE__ */ r.createElement(
-        R,
+        S,
         {
-          value: S(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
+          value: y(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(
-            x,
-            w[x]
+            H,
+            x[H]
           ),
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
@@ -315,7 +315,7 @@ const se = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         }
       ))),
       /* @__PURE__ */ r.createElement(
-        Q,
+        Z,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -328,8 +328,8 @@ const se = "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(Z, { bgColor: c(this.props.backgroundColor), rgba: this.state.rgba }),
-      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(O, null)
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(ee, { bgColor: c(this.props.backgroundColor), rgba: this.state.rgba }),
+      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(B, { message: this.licenseMessage })
     );
   }
 };
@@ -357,15 +357,15 @@ h.displayName = "ColorGradient", h.propTypes = {
   size: "medium"
 };
 let m = h;
-const ae = z(), ie = B(
-  P(
-    ae,
+const ie = P(), re = V(
+  K(
+    ie,
     m
   )
 );
-ie.displayName = "KendoReactColorGradient";
+re.displayName = "KendoReactColorGradient";
 export {
-  ie as ColorGradient,
-  ae as ColorGradientPropsContext,
+  re as ColorGradient,
+  ie 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"),l=require("prop-types"),n=require("@progress/kendo-react-common"),Le=require("../package-metadata.js"),Ne=require("./Picker.js"),xe=require("./ColorGradient.js"),J=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:J.DEFAULT_PRESET,tileSize:J.DEFAULT_TILE_SIZE},Z=f=>f!==void 0,ge=n.createPropsContext(),Q=t.forwardRef((f,S)=>{var ce,se;const w=!n.validatePackage(Le.packageMetadata,{component:"ColorPicker"}),r=n.usePropsContext(ge,f),_=He.useLocalization(),X=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:Y,popupSettings:C,valid:ve,disabled:x,tabIndex:ke,icon:q,svgIcon:V,iconClassName:F,onChange:H,onFocus:M,onBlur:W,onActiveColorClick:U,className:me,adaptive:Ce,adaptiveTitle:ee=_.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle])}=r,u=t.useRef(null),R=t.useRef(null),B=t.useRef(null),m=t.useRef(null),y=t.useRef(void 0),be=t.useRef(null),[Ee,te]=t.useState(!1),[we,Pe]=t.useState(r.defaultValue||void 0),[ye,Se]=t.useState(!1),[O,_e]=t.useState(),j=Z(r.value),b=Z(r.open),i=j?r.value:we,v=b?r.open:ye,ne=t.useRef(i),ae=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(S,()=>({element:u.current,actionElement:be.current,value:i,focus:ae}),[i,ae]);const G=!!(O&&X&&O<=X.medium&&Ce);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 o=t.useCallback((e,c)=>{b||(!e&&!c&&u&&u.current&&u.current.focus(),Se(e))},[b]),re=t.useMemo(()=>new n.Navigation({root:u,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,c,a)=>{o(!1)},Enter:(e,c,a)=>{!b&&e===u.current&&(a.preventDefault(),a.stopPropagation(),o(!0))},ArrowDown:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),o(!0))},ArrowUp:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),o(!1))},Tab:(e,c,a)=>{var A,ue,de;if(n.getActiveElement(document)!==u.current){const pe=(A=B.current)==null?void 0:A.wrapperRef.current,z=(ue=R.current)==null?void 0:ue.wrapperRef.current,fe=(de=m.current)==null?void 0:de.element;g==="palette"&&pe?n.keepFocusInContainer(a,pe):g==="gradient"&&z?n.keepFocusInContainer(a,z):g==="combo"&&z?n.keepFocusInContainer(a,z.parentElement):s&&fe&&n.keepFocusInContainer(a,fe)}}}}}),[o,b]),he=t.useCallback(re.triggerKeyboardEvent.bind(re),[]),Te=t.useCallback(()=>{b||(R.current&&R.current.wrapperRef.current?n.focusFirstFocusableChild(R.current.wrapperRef.current):B.current?B.current.focus():m.current&&m.current.element&&n.focusFirstFocusableChild(m.current.element))},[b]),D=e=>ne.current=e,oe=t.useCallback(e=>{const c={value:ne.current,nativeEvent:e.nativeEvent,syntheticEvent:e};k(c),o(!v,!0)},[v]),K=t.useCallback(()=>{o(!1,!0)},[o]),Re=t.useCallback(e=>{U&&U.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:{element:u.current,value:i}})},[U,i]),Ae=t.useCallback(e=>{y.current?(clearTimeout(y.current),y.current=void 0):(te(!0),G&&!v&&o(!0)),M&&M.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[G,M,v,o]),Ie=t.useCallback(()=>{o(!1,!0),te(!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]),k=t.useCallback((e,c)=>{var A;const a=c?e.rgbaValue||"":(A=e.value)!=null?A:"";j||Pe(a),H&&H.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:u.current,value:a}}),o(!1)},[j,H]),le=t.useCallback(e=>k(e,!0),[Z,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:i,onChange:k}),(g==="combo"||g==="palette")&&t.createElement(J.ColorPalette,{...h,ref:B,size:e?"large":p,value:i,onChange:le}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["gradient","palette"],activeView:Y,setOpen:o,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:D}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["palette","gradient"],setOpen:o,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:D}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(L.FlatColorPicker,{...T,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["gradient"],showButtons:!e,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:D}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["palette"],showButtons:!e,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:D}),w&&t.createElement(n.WatermarkOverlay,null)),[Y,I,T,P,k,le,h,o,p,i,g,s]),Be=t.useCallback(()=>{var c;const e={animation:!!((c=C==null?void 0:C.animate)==null||c),title:ee,expand:v,onClose:K,windowWidth:O,footer:{cancelText:_.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:K,applyText:_.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:oe}};return t.createElement(Me.AdaptiveMode,{...e},t.createElement(We.ActionSheetContent,null,$(!0)))},[C==null?void 0:C.animate,ee,v,K,O,_,oe,$]),Oe=t.useCallback(e=>{for(const c of e)_e(c.target.clientWidth)},[]),ie=n.useDir(u,r.dir),De=ve!==!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":v,"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":Ee,className:me}),ref:u,tabIndex:n.getTabIndex(ke,x),title:r.title,onKeyDown:he,onFocus:Ae,onBlur:Fe,dir:ie},t.createElement(Ne.Picker,{dir:ie,open:v,onOpen:Te,popupAnchor:u.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(se=r.id)!=null?se:0}`,...C},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":!i,"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:i}}))),button:t.createElement(qe.Button,{tabIndex:-1,type:"button",onClick:()=>o(!v),className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:Ve.caretAltDownIcon,"aria-label":_.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:$(!1),_mobileMode:G,_actionSheet:Be()}))});Q.propTypes={value:l.string,defaultValue:l.string,disabled:l.bool,view:l.oneOf(["gradient","palette","combo"]),views:l.arrayOf(l.oneOf(["gradient","palette"])),dir:l.string,id:l.string,icon:l.string,svgIcon:n.svgIconPropType,ariaLabelledBy:l.string,ariaDescribedBy:l.string,size:l.oneOf([null,"small","medium","large"]),rounded:l.oneOf([null,"small","medium","large","full"]),fillMode:l.oneOf([null,"solid","flat","outline"]),className:l.string,adaptive:l.bool,adaptiveTitle:l.string,adaptiveSubtitle:l.string};const E={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",views:["gradient","palette"],gradientSettings:je,paletteSettings:Ge};Q.displayName="KendoColorPicker";exports.ColorPicker=Q;exports.ColorPickerPropsContext=ge;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ne=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),ve=require("../package-metadata.js"),xe=require("./Picker.js"),qe=require("./ColorGradient.js"),Q=require("./ColorPalette.js"),N=require("./FlatColorPicker.js"),Ve=require("@progress/kendo-react-buttons"),Me=require("@progress/kendo-svg-icons"),d=require("../messages/index.js"),He=require("@progress/kendo-react-intl"),We=require("../common/AdaptiveMode.js"),Ue=require("@progress/kendo-react-layout");function je(g){const S=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const w in g)if(w!=="default"){const I=Object.getOwnPropertyDescriptor(g,w);Object.defineProperty(S,w,I.get?I:{enumerable:!0,get:()=>g[w]})}}return S.default=g,Object.freeze(S)}const t=je(Ne),Ge={opacity:!0},Ke={palette:Q.DEFAULT_PRESET,tileSize:Q.DEFAULT_TILE_SIZE},J=g=>g!==void 0,ke=n.createPropsContext(),X=t.forwardRef((g,S)=>{var se,ue;const w=!n.validatePackage(ve.packageMetadata,{component:"ColorPicker"}),I=n.getLicenseMessage(ve.packageMetadata),l=n.usePropsContext(ke,g),_=He.useLocalization(),Y=n.useAdaptiveModeContext(),{size:p=E.size,rounded:x=E.rounded,fillMode:F=E.fillMode,gradientSettings:P=E.gradientSettings,paletteSettings:h=E.paletteSettings,flatColorPickerSettings:T,view:f=l.views?void 0:E.view,views:s=f?void 0:E.views,activeView:ee,popupSettings:C,valid:me,disabled:q,tabIndex:Ce,icon:V,svgIcon:M,iconClassName:B,onChange:H,onFocus:W,onBlur:U,onActiveColorClick:j,className:be,adaptive:Ee,adaptiveTitle:te=_.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle])}=l,u=t.useRef(null),R=t.useRef(null),O=t.useRef(null),m=t.useRef(null),y=t.useRef(void 0),we=t.useRef(null),[Pe,ne]=t.useState(!1),[ye,Se]=t.useState(l.defaultValue||void 0),[_e,he]=t.useState(!1),[D,Te]=t.useState(),G=J(l.value),b=J(l.open),i=G?l.value:ye,v=b?l.open:_e,ae=t.useRef(i),re=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(S,()=>({element:u.current,actionElement:we.current,value:i,focus:re}),[i,re]);const K=!!(D&&Y&&D<=Y.medium&&Ee);t.useEffect(()=>{const e=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Le.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const r=t.useCallback((e,c)=>{b||(!e&&!c&&u&&u.current&&u.current.focus(),he(e))},[b]),oe=t.useMemo(()=>new n.Navigation({root:u,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,c,a)=>{r(!1)},Enter:(e,c,a)=>{!b&&e===u.current&&(a.preventDefault(),a.stopPropagation(),r(!0))},ArrowDown:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),r(!0))},ArrowUp:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),r(!1))},Tab:(e,c,a)=>{var A,de,pe;if(n.getActiveElement(document)!==u.current){const ge=(A=O.current)==null?void 0:A.wrapperRef.current,z=(de=R.current)==null?void 0:de.wrapperRef.current,fe=(pe=m.current)==null?void 0:pe.element;f==="palette"&&ge?n.keepFocusInContainer(a,ge):f==="gradient"&&z?n.keepFocusInContainer(a,z):f==="combo"&&z?n.keepFocusInContainer(a,z.parentElement):s&&fe&&n.keepFocusInContainer(a,fe)}}}}}),[r,b]),Re=t.useCallback(oe.triggerKeyboardEvent.bind(oe),[]),Ae=t.useCallback(()=>{b||(R.current&&R.current.wrapperRef.current?n.focusFirstFocusableChild(R.current.wrapperRef.current):O.current?O.current.focus():m.current&&m.current.element&&n.focusFirstFocusableChild(m.current.element))},[b]),L=e=>ae.current=e,le=t.useCallback(e=>{const c={value:ae.current,nativeEvent:e.nativeEvent,syntheticEvent:e};k(c),r(!v,!0)},[v]),$=t.useCallback(()=>{r(!1,!0)},[r]),Ie=t.useCallback(e=>{j&&j.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:{element:u.current,value:i}})},[j,i]),Fe=t.useCallback(e=>{y.current?(clearTimeout(y.current),y.current=void 0):(ne(!0),K&&!v&&r(!0)),W&&W.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[K,W,v,r]),Be=t.useCallback(()=>{r(!1,!0),ne(!1),y.current=void 0},[]),Oe=t.useCallback(e=>{clearTimeout(y.current),y.current=window.setTimeout(Be),U&&U.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[U]),k=t.useCallback((e,c)=>{var A;const a=c?e.rgbaValue||"":(A=e.value)!=null?A:"";G||Se(a),H&&H.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:u.current,value:a}}),r(!1)},[G,H]),ie=t.useCallback(e=>k(e,!0),[J,k]),Z=t.useCallback(e=>t.createElement(t.Fragment,null,(f==="combo"||f==="gradient")&&t.createElement(qe.ColorGradient,{...P,_adaptive:e,ref:R,isInsidePopup:!0,size:e?"large":p,fillMode:F,value:i,onChange:k}),(f==="combo"||f==="palette")&&t.createElement(Q.ColorPalette,{...h,ref:O,size:e?"large":p,value:i,onChange:ie}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(N.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["gradient","palette"],activeView:ee,setOpen:r,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(N.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["palette","gradient"],setOpen:r,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(N.FlatColorPicker,{...T,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["gradient"],showButtons:!e,setOpen:r,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(N.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:m,size:e?"large":p,views:["palette"],showButtons:!e,setOpen:r,value:i,onChange:k,setAdaptiveModeValue:L}),w&&t.createElement(n.WatermarkOverlay,{message:I})),[ee,F,T,P,k,ie,h,r,p,i,f,s]),De=t.useCallback(()=>{var c;const e={animation:!!((c=C==null?void 0:C.animate)==null||c),title:te,expand:v,onClose:$,windowWidth:D,footer:{cancelText:_.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:$,applyText:_.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:le}};return t.createElement(We.AdaptiveMode,{...e},t.createElement(Ue.ActionSheetContent,null,Z(!0)))},[C==null?void 0:C.animate,te,v,$,D,_,le,Z]),Le=t.useCallback(e=>{for(const c of e)Te(c.target.clientWidth)},[]),ce=n.useDir(u,l.dir),ze=me!==!1;return t.createElement("span",{id:l.id,role:"combobox","aria-label":l.ariaLabel,"aria-labelledby":l.ariaLabelledBy,"aria-describedby":l.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":v,"aria-controls":`k-colorpicker-popup-${(se=l.id)!=null?se:0}`,"aria-disabled":q?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-picker-${F}`]:F,[`k-rounded-${n.kendoThemeMaps.roundedMap[x]||x}`]:x,"k-invalid":!ze,"k-disabled":q,"k-focus":Pe,className:be}),ref:u,tabIndex:n.getTabIndex(Ce,q),title:l.title,onKeyDown:Re,onFocus:Fe,onBlur:Oe,dir:ce},t.createElement(xe.Picker,{dir:ce,open:v,onOpen:Ae,popupAnchor:u.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(ue=l.id)!=null?ue:0}`,...C},input:t.createElement("span",{onClick:Ie,className:"k-input-inner"},t.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!i,"k-icon-color-preview":V||M||B})},B&&t.createElement("span",{className:n.classNames("k-color-preview-icon",B)}),!B&&(V||M)&&t.createElement(n.IconWrap,{name:V,icon:M}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:i}}))),button:t.createElement(Ve.Button,{tabIndex:-1,type:"button",onClick:()=>r(!v),className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:Me.caretAltDownIcon,"aria-label":_.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:Z(!1),_mobileMode:K,_actionSheet:De()}))});X.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,adaptiveSubtitle:o.string};const E={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",views:["gradient","palette"],gradientSettings:Ge,paletteSettings:Ke};X.displayName="KendoColorPicker";exports.ColorPicker=X;exports.ColorPickerPropsContext=ke;