UNPKG

@progress/kendo-react-inputs

Version:

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

www.telerik.com/kendo-react-ui

telerik/kendo-react

15 lines • 130 kB

JavaScript

/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ /** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-common"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-labels"),require("@progress/kendo-react-buttons"),require("@progress/kendo-drawing"),require("@progress/kendo-react-popup"),require("@progress/kendo-react-layout"),require("@progress/kendo-inputs-common"),require("@progress/kendo-react-dialogs")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-intl","@progress/kendo-react-common","@progress/kendo-svg-icons","@progress/kendo-react-labels","@progress/kendo-react-buttons","@progress/kendo-drawing","@progress/kendo-react-popup","@progress/kendo-react-layout","@progress/kendo-inputs-common","@progress/kendo-react-dialogs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactInputs={},e.React,e.PropTypes,e.KendoReactIntl,e.KendoReactCommon,e.KendoSvgIcons,e.KendoReactLabels,e.KendoReactButtons,e.KendoDrawing,e.KendoReactPopup,e.KendoReactLayout,e.KendoInputsCommon,e.KendoReactDialogs)}(this,(function(e,t,a,n,r,s,i,l,o,c,d,u,p){"use strict";function h(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var m=h(t);const f="numerictextbox.increment",v="numerictextbox.decrement",g="slider.increment",b="slider.decrement",k="slider.dragTitle",y="colorGradient.r",C="colorGradient.g",x="colorGradient.b",E="colorGradient.a",w="colorGradient.hex",S="colorGradient.contrastRatio",I="colorGradient.colorGradientAALevel",N="colorGradient.colorGradientAAALevel",L="colorGradient.colorGradientPass",M="colorGradient.colorGradientFail",R="colorGradient.hueSliderLabel",V="colorGradient.alphaSliderLabel",z="colorGradient.toggleInputsButton",B="flatColorPicker.cancelBtn",O="flatColorPicker.applyBtn",P="flatColorPicker.colorGradientBtn",T="flatColorPicker.colorPaletteBtn",D="flatColorPicker.clearBtn",F="colorPicker.adaptiveTitle",K="checkbox.validation",A="checkbox.optionalText",_="switch.validation",$="colorPicker.dropdownButtonAriaLabel",H="rating.ariaLabel",q="signature.clear",G="signature.maximize",W="signature.minimize",j={[f]:"Increase value",[v]:"Decrease value",[g]:"Increase",[b]:"Decrease",[k]:"Drag",[y]:"r",[C]:"g",[x]:"b",[E]:"a",[w]:"hex",[S]:"Contrast ratio",[I]:"AA",[N]:"AAA",[L]:"Pass",[M]:"Fail",[R]:"Hue slider",[V]:"Alpha slider",[z]:"Toggle colorgradient inputs",[B]:"Cancel",[O]:"Apply",[P]:"Color Gradient view",[T]:"Color Palette view",[D]:"Clear color value",[F]:"Choose color",[K]:"Please check this box if you want to proceed!",[A]:"(Optional)","radioButton.validation":"Please select option if you want to proceed!",[_]:"Please turn on if you want to proceed!",[$]:"Select",[H]:"Rating",[q]:"Clear",[G]:"Maximize",[W]:"Minimize"},U=1111111.1111111,Y=/\d/,X=(e,t)=>void 0!==e?e:t,Z=(e,t,a)=>null===e&&void 0===e?"":"string"==typeof e?e:a.formatNumber(e,t),J=e=>(String(e).split(".")[1]||"").length,Q=(e,t)=>Math.max(J(e),J(t)),ee=(e,t)=>{const a=(e=>Math.min(e,15))(t);return parseFloat(e.toFixed(a))},te=(e,t,a,n,r,s,i)=>{const l=Q(e||0,a||0),o=ne(ee((e||0)+(a||0),l),n,r);t.eventValue=o,t.currentLooseValue=Z(o,s,i),t.selectionStart=t.selectionEnd=ce(t.currentLooseValue,Y)},ae=(e,t,a,n,r,s,i)=>{const l=Q(e||0,a||0),o=ne(ee((e||0)-(a||0),l),n,r);t.eventValue=o,t.currentLooseValue=Z(o,s,i),t.selectionStart=t.selectionEnd=ce(t.currentLooseValue,Y)},ne=(e,t,a)=>null==e?e:!(e>1||e<1||1===e)||void 0!==a&&void 0!==t&&a<t?null:(void 0!==a&&e>a&&(e=a),void 0!==t&&e<t&&(e=t),e),re=(e,t,a,n)=>{e.selectionStart=e.selectionEnd=t,((e,t,a)=>{const n=((e,t)=>{const a=t.findIndex((([t,a])=>!!a&&e.indexOf(a)===e.length-a.length));if(-1===a)return-1;const n=t[a][1];return e.length-n.length})(e,t);if(-1!==n&&a.selectionStart>n)return void(a.selectionStart=a.selectionEnd=n);a.selectionStart>e.length&&(a.selectionStart=a.selectionEnd=e.length);const r=((e,t)=>{const a=t.findIndex((([t,a])=>!!t&&0===e.indexOf(t)));return-1===a?-1:t[a][0].length})(e,t);-1!==r&&a.selectionStart<r&&(a.selectionStart=a.selectionEnd=r),-1===a.selectionStart&&(a.selectionStart=a.selectionEnd=0)})(a,n,e)},se=(e,t,a,n)=>{e.eventValue=n.parseNumber(e.prevLooseValue,t),e.currentLooseValue=e.prevLooseValue,e.valueIsCorrected=!0,re(e,e.selectionStart,e.currentLooseValue,a)},ie=(e,t,a)=>t.split(e).length!==a.split(e).length&&t.length===a.length+e.length,le=(e,t)=>{const a=e.indexOf(t.decimal);return a>-1?a:ce(e,Y)},oe=e=>e.split("").reverse().join(""),ce=(e,t)=>e.length-oe(e).search(t),de=e=>e.split(e[e.search(Y)])[0],ue=e=>{const t=oe(e);return oe(t.split(t[t.search(Y)])[0])},pe=(e,t)=>e.search(t),he=(e,t)=>{const a=e.indexOf(t);return a>-1?e.length-a-1:0},me=(e,t,a,n,r)=>{const s="0"===e.replace(r,"")[0],i="0"===t.replace(r,"")[0];if(s&&!i)return a-1;if(i&&n)return a+1;let l=0;for(let t=0;t<a;t++)Y.test(e.charAt(t))&&l++;let o=0;for(;l>0&&t.length>o;)Y.test(t.charAt(o))&&l--,o++;return o},fe=(e,t,a)=>{const n={...e},{prevLooseValue:r}=n,s=a.numberSymbols(),i=((e,t)=>{const a=t.formatNumber(U,e),n=t.formatNumber(-U,e),r=t.formatNumber(0,e),s=t.formatNumber(1,e),i=t.numberSymbols(),l=new RegExp(`[\\d\\${i.decimal}${i.group}]`,"g");return[a,n,r,s].map((e=>e.replace(l,""))).join("").split("").filter(((e,t,a)=>a.indexOf(e)===t)).join("")})(t,a),l=String(n.currentLooseValue),o=String(r),c=new RegExp(`[^\\d\\${s.decimal}]`,"g"),d=new RegExp(`[^\\d\\${s.decimal}\\${s.group}]`,"g"),u=new RegExp(`[\\d\\${s.decimal}\\${s.group}]`),p=l.replace(c,""),h=pe(l,Y),m=-1===h?-1:ce(l,Y),f=l.indexOf(s.decimal),v=(l.substring(0,h)+l.substring(h,m).replace(d,"")+l.substring(m,l.length)).split("").filter((e=>-1!==i.indexOf(e)||-1!==e.search(u))).join(""),g=a.formatNumber(.31111111111111117,t).replace(c,""),b=g.indexOf(s.decimal),k=b>-1?g.length-b-1:0,y=a.formatNumber(1,t).replace(c,""),C=y.indexOf(s.decimal),x=C>-1?y.length-C-1:0,{positiveInfo:E,negativeInfo:w,zeroInfo:S,oneInfo:I}=((e,t)=>{const a=t.formatNumber(U,e),n=t.formatNumber(-U,e),r=t.formatNumber(0,e),s=t.formatNumber(1,e),i=de(a),l=de(n),o=de(r),c=de(s);return{positiveInfo:[i,ue(a)],negativeInfo:[l,ue(n)],zeroInfo:[o,ue(r)],oneInfo:[c,ue(s)]}})(t,a),N=[E,w,S,I],L=1!==N.findIndex((e=>-1!==e.findIndex((e=>!!e)))),M=l.length>0&&l.length<o.length,R="string"==typeof t&&"p"===t[0]&&l&&-1===l.indexOf(s.percentSign);if(!n.isPaste){if(""===l)return n.eventValue=null,n.currentLooseValue="",n;if(n.currentLooseValue===s.minusSign&&a.formatNumber(-0,t)!==o)return n.eventValue=-0,n.currentLooseValue=Z(n.eventValue,t,a),re(n,le(n.currentLooseValue,s),n.currentLooseValue,N),n;if(n.currentLooseValue===s.decimal){n.eventValue=0;const e=Z(n.eventValue,t,a);if(0===x&&k>0){const t=ce(e,Y);n.currentLooseValue=e.substring(0,t)+s.decimal+e.substring(t)}else n.currentLooseValue=e;return re(n,le(n.currentLooseValue,s)+1,n.currentLooseValue,N),n}if(((e,t)=>{const a=String(e.currentLooseValue),n=String(e.prevLooseValue);return ie(t.minusSign,a,n)||ie("-",a,n)||ie("−",a,n)})(n,s)){const e=a.parseNumber(r,t);n.eventValue=-(null!==e?e:0),n.currentLooseValue=Z(n.eventValue,t,a);const s=pe(n.currentLooseValue,Y),i=pe(o,Y);return re(n,n.selectionEnd-1+(s-i),n.currentLooseValue,N),n}if(((e,t)=>{const a=String(e.currentLooseValue),n=String(e.prevLooseValue);return-1===a.indexOf(t.minusSign)&&-1!==n.indexOf(t.minusSign)})(n,s))return n.eventValue=a.parseNumber(n.currentLooseValue,t),re(n,n.selectionStart,n.currentLooseValue,N),n;if(((e,t)=>String(e.currentLooseValue).split(t.decimal).length>2)(n,s))return se(n,t,N,a),n;if(R)return n.eventValue=a.parseNumber(l,t)/100,n.currentLooseValue=Z(n.eventValue,t,a),n;if(String(n.currentLooseValue).replace(/[^\d]/g,"").length>15||p!==l&&l&&L&&-1===N.findIndex((([e,t])=>{const a=l.indexOf(e),n=l.indexOf(t),r=0===a,i=n===l.length-t.length,o=a+e.length!==h&&-1!==h&&l[a+e.length]!==s.decimal,c=n!==m&&-1!==m&&l[n-1]!==s.decimal;return e&&t?!o&&!c&&(r&&i):e?!o&&r:!!t&&(!c&&i)})))return se(n,t,N,a),n;if(p[p.length-1]===s.decimal&&k>0)return n.eventValue=a.parseNumber(l,t),n.currentLooseValue=v,n;if(n.currentLooseValue&&r&&(i+s.decimal+s.group).split("").findIndex((e=>l.split("").filter((t=>t===e)).length<o.split("").filter((t=>t===e)).length&&l.length+1===o.length&&!(e===s.decimal&&0===he(o.replace(c,""),s.decimal))))>-1)return n.eventValue=a.parseNumber(e.prevLooseValue,t),n.currentLooseValue=e.prevLooseValue,n;const d=he(p,s.decimal),u="0"===p[p.length-1];if(M&&u&&d<x)return n.eventValue=a.parseNumber(n.currentLooseValue,t),n.currentLooseValue=Z(n.eventValue,t,a),n;if(d>0){const e=l.substring(0,f);if(u&&(!e||0!==o.indexOf(e))){n.eventValue=a.parseNumber(n.currentLooseValue,t);const e=Z(n.eventValue,t,a);return re(n,me(l,e,n.selectionEnd,M,c),e,N),n.currentLooseValue=e,n}if(d>k){const e=l.indexOf(s.decimal),r=l.substring(0,e)+l.substring(e,e+1+k)+l.substring(m,String(n.currentLooseValue).length);return n.eventValue=a.parseNumber(r,t),n.currentLooseValue=r,re(n,n.selectionStart,r,N),n}if(x!==k&&d<=k&&u)return n.eventValue=a.parseNumber(n.currentLooseValue,t),n.currentLooseValue=v,n;if(d<x)return n.eventValue=a.parseNumber(n.currentLooseValue,t),n.currentLooseValue=Z(n.eventValue,t,a),n}}if(n.eventValue=a.parseNumber(n.currentLooseValue,t),R&&(n.eventValue=n.eventValue/100),"number"==typeof n.eventValue){const e=Z(n.eventValue,t,a);1===l.length?re(n,le(e,s),e,N):re(n,me(l,e,n.selectionEnd,M,c),e,N),n.currentLooseValue=e}else n.currentLooseValue=Z(a.parseNumber(p),t,a);return n},ve=r.createPropsContext(),ge=m.forwardRef(((e,t)=>{const a=r.usePropsContext(ve,e),{className:o,value:c,defaultValue:d,format:u,width:p,tabIndex:h,accessKey:g,title:b,placeholder:k,min:y,max:C,dir:x,name:E,label:w,id:S,ariaDescribedBy:I,ariaLabelledBy:N,ariaLabel:L,inputType:M,readOnly:R,validationMessage:V,children:z,touched:B,visited:O,modified:P,style:T,inputStyle:D,valid:F,step:K=be.step,spinners:A=be.spinners,disabled:_=be.disabled,required:$=be.required,validityStyles:H=be.validityStyles,prefix:q=be.prefix,suffix:G=be.suffix,onChange:W=be.onChange,onFocus:U=be.onFocus,onBlur:Y=be.onBlur,rangeOnEnter:J=be.rangeOnEnter,size:Q=be.size,rounded:ee=be.rounded,fillMode:re=be.fillMode,autoFocus:se=be.autoFocus,inputAttributes:ie,...le}=a,oe=r.useId(),ce=S||oe,de=n.useInternationalization(),ue=n.useLocalization(),pe=m.useRef(null),he=m.useRef(void 0),[me,ge]=m.useState(!1),ke=m.useRef({eventValue:null,prevLooseValue:"",currentLooseValue:"",focused:!1,selectionStart:void 0,selectionEnd:void 0,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1}),ye=m.useRef(!1),Ce=m.useRef(void 0),xe=m.useRef(d),Ee=Z(ke.current.focused&&!_?ke.current.currentLooseValue:X(c,xe.current),u,de);Ce.current=Ee;const[we]=r.useCustomComponent(q),[Se]=r.useCustomComponent(G);m.useEffect((()=>{pe.current&&pe.current.setCustomValidity&&pe.current.setCustomValidity(Re().valid?"":V||"Please enter a valid value!")}));const Ie=m.useCallback((()=>{pe.current&&pe.current.focus()}),[]),Ne=m.useCallback((()=>void 0!==he.current?he.current:X(c,xe.current)),[c]),Le=m.useCallback((()=>E),[E]),Me=m.useCallback((()=>$),[$]),Re=m.useCallback((()=>{const e=void 0!==V,t=Ne();return{customError:e,valid:void 0!==F?F:!(ke.current.valueIsOutOfRange||Me()&&null==t),valueMissing:null==t}}),[V,F,Ne,Me]),Ve=m.useCallback((()=>H),[H]),ze=m.useCallback((()=>a),[a]),Be=m.useCallback((()=>{const e={element:pe.current,focus:Ie};return Object.defineProperty(e,"name",{get:Le}),Object.defineProperty(e,"value",{get:Ne}),Object.defineProperty(e,"validity",{get:Re}),Object.defineProperty(e,"validityStyles",{get:Ve}),Object.defineProperty(e,"required",{get:Me}),Object.defineProperty(e,"props",{get:ze}),e}),[Le,Ne,Re,Ve,Me,Ie,ze]);m.useImperativeHandle(t,Be);const Oe=m.useCallback((()=>({eventValue:X(c,xe.current),prevLooseValue:Ce.current,currentLooseValue:pe.current.value,selectionStart:pe.current.selectionStart,selectionEnd:pe.current.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:ye.current,focused:ke.current.focused})),[c]),Pe=m.useCallback(((e,t)=>{if(_)return;he.current=t.eventValue,xe.current=t.eventValue;const a=Z(ne(t.eventValue,y,C),u,de),n=ne(de.parseNumber(a,u),y,C);n!==t.eventValue&&(t.valueIsOutOfRange=!0,t.eventValue=n,xe.current=n),c!==t.eventValue&&r.dispatchEvent(W,e,Be(),{value:t.eventValue}),he.current=void 0,ke.current=t,ge((e=>!e))}),[c,W,_,ge,Be]),Te=m.useCallback((e=>{const t=Oe();ye.current=!1,Pe(e,fe(t,u,de))}),[u,W,de,Pe,Oe]),De=m.useCallback((e=>{if(R||_)return;let t=Oe();const a=de.parseNumber(String(t.currentLooseValue),u);if(t.selectionEnd>t.selectionStart&&t.selectionEnd-t.selectionStart===String(t.currentLooseValue).length){const t=de.numberSymbols(),a=t&&e.key===t.minusSign,n=t&&e.key===t.decimal;ye.current=!a&&!n}else{switch(e.keyCode){case 38:te(a,t,K,y,C,u,de);break;case 40:ae(a,t,K,y,C,u,de);break;case 13:{if(!1===J)return;const e=Z(ne(a,y,C),u,de),n=ne(de.parseNumber(e,u),y,C);t.eventValue=n,t.currentLooseValue=Z(n,u,de),t.selectionStart=t.selectionEnd=t.currentLooseValue.length;break}case 110:{const e=pe.current,a=de.numberSymbols();e&&(t.currentLooseValue=t.currentLooseValue.slice(0,t.selectionStart)+a.decimal+t.currentLooseValue.slice(t.selectionEnd),t.selectionStart=t.selectionEnd=t.selectionStart+1,t=fe(t,u,de));break}default:return}e.preventDefault(),Pe(e,t)}}),[u,y,C,K,W,J,Pe,Oe]),Fe=m.useCallback((()=>{ye.current=!0}),[]),Ke=m.useCallback((e=>{if(R||_)return;const t=Oe();te(de.parseNumber(String(t.currentLooseValue),u),t,K,y,C,u,de),Pe(e,t)}),[u,y,C,K,W,R,_,Pe,Oe]),Ae=m.useCallback((e=>{if(R||_)return;const t=Oe();ae(de.parseNumber(String(t.currentLooseValue),u),t,K,y,C,u,de),Pe(e,t)}),[u,y,C,K,W,R,_,Pe,Oe]),_e=m.useCallback((e=>{const t=r.getActiveElement(document);!document||t!==pe.current||!pe.current||R||_||(e.nativeEvent.deltaY<0&&Ke(e),e.nativeEvent.deltaY>0&&Ae(e))}),[Ke,Ae,_,R]),$e=m.useCallback((e=>{ke.current.currentLooseValue=Ce.current,ke.current.focused=!0,r.dispatchEvent(U,e,Be(),{}),ge((e=>!e))}),[U,ge,Be]),He=m.useCallback((e=>{ke.current={eventValue:null,prevLooseValue:"",currentLooseValue:"",focused:!1,selectionStart:void 0,selectionEnd:void 0,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1},r.dispatchEvent(Y,e,Be(),{}),ge((e=>!e))}),[Y,ge,Be]),qe=m.useCallback((e=>{if(document&&pe.current){const t=r.getActiveElement(document);e.preventDefault(),t!==pe.current&&pe.current.focus()}}),[]);r.useIsomorphicLayoutEffect((()=>{pe.current&&"number"!==pe.current.type&&void 0!==ke.current.selectionStart&&void 0!==ke.current.selectionEnd&&(pe.current.selectionStart=ke.current.selectionStart,pe.current.selectionEnd=ke.current.selectionEnd,ke.current.selectionStart=void 0,ke.current.selectionEnd=void 0)}),[me]);const Ge=!Ve()||Re().valid,We=m.createElement("span",{dir:x,style:w?T:{width:p,...T},className:r.classNames("k-input","k-numerictextbox",{[`k-input-${r.kendoThemeMaps.sizeMap[Q]||Q}`]:Q,[`k-input-${re}`]:re,[`k-rounded-${r.kendoThemeMaps.roundedMap[ee]||ee}`]:ee,"k-invalid":!Ge,"k-required":$,"k-disabled":_},o),"aria-disabled":_?"true":void 0,...w?{}:le},m.createElement(we,null),m.createElement("input",{role:"spinbutton",value:null===Ee?"":Ee,tabIndex:r.getTabIndex(h,_),accessKey:g,disabled:_,title:b,"aria-disabled":_?"true":void 0,"aria-valuemin":y,"aria-valuemax":C,"aria-label":L,"aria-labelledby":N,"aria-describedby":I,"aria-required":$,placeholder:k,spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:se,type:M||"tel",className:"k-input-inner",id:ce,name:E,readOnly:R,style:D,onChange:Te,onFocus:$e,onBlur:He,onKeyDown:De,onPaste:Fe,onWheel:_e,ref:pe,...ie}),m.createElement(Se,null),z,A&&m.createElement("span",{className:"k-input-spinner k-spin-button",onMouseDown:qe},m.createElement(l.Button,{tabIndex:-1,type:"button",icon:"caret-alt-up",svgIcon:s.caretAltUpIcon,rounded:null,fillMode:re,className:"k-spinner-increase","aria-label":ue.toLanguageString(f,j[f]),title:ue.toLanguageString(f,j[f]),onClick:Ke}),m.createElement(l.Button,{tabIndex:-1,type:"button",icon:"caret-alt-down",svgIcon:s.caretAltDownIcon,rounded:null,fillMode:re,className:"k-spinner-decrease","aria-label":ue.toLanguageString(v,j[v]),title:ue.toLanguageString(v,j[v]),onClick:Ae})));return w?m.createElement(i.FloatingLabel,{label:w,editorId:ce,editorValue:null===Ee?"":Ee,editorValid:Ge,editorDisabled:_,editorPlaceholder:k,children:We,style:{width:p},dir:x,...le}):We}));ge.propTypes={value:a.number,defaultValue:a.number,step:a.number,format:a.oneOfType([a.string,a.shape({style:a.oneOf(["decimal","currency","percent","scientific","accounting"]),currency:a.string,currencyDisplay:a.oneOf(["symbol","code","name"]),useGrouping:a.bool,minimumIntegerDigits:a.number,minimumFractionDigits:a.number,maximumFractionDigits:a.number})]),width:a.oneOfType([a.string,a.number]),tabIndex:a.number,accessKey:a.string,title:a.string,placeholder:a.string,min:a.number,max:a.number,spinners:a.bool,disabled:a.bool,readOnly:a.bool,dir:a.string,name:a.string,label:a.string,validationMessage:a.string,required:a.bool,id:a.string,rangeOnEnter:a.bool,ariaLabelledBy:a.string,ariaDescribedBy:a.string,ariaLabel:a.string,onChange:a.func,onFocus:a.func,onBlur:a.func,size:a.oneOf([null,"small","medium","large"]),rounded:a.oneOf([null,"small","medium","large","full"]),fillMode:a.oneOf([null,"solid","flat","outline"]),inputAttributes:a.object};const be={prefix:e=>null,suffix:e=>null,step:1,spinners:!0,disabled:!1,required:!1,validityStyles:!0,rangeOnEnter:!0,autoFocus:!1,onChange:e=>{},onFocus:e=>{},onBlur:e=>{},size:"medium",rounded:"medium",fillMode:"solid"};ge.displayName="KendoNumericTextBox";const ke=e=>null!=e&&""!==e,ye=(e,t,a)=>!ke(e)||isNaN(e)||e<=t?t:e>=a?a:e,Ce=(e,t,a=!0)=>{if(-1===["hex","rgba"].indexOf(t))throw new Error(`Unsupported color output format '${t}'. The available options are 'hex' or 'rgba'.`);if(!ke(e))return;const n=o.parseColor(e.trim(),a);return ke(n)?"hex"===t?n.toCss():n.toCssRgba():void 0},xe=(e,t=!0)=>{const a=o.parseColor(e,t);return ke(a)?a.toHSV():{}},Ee=(e,t=!0)=>{const a=o.parseColor(e,t);return ke(a)?a.toBytes():{}},we=e=>{const t=ye(e.h,0,359.9),a=ye(e.s,0,1),n=ye(e.v,0,1),r=ye(e.a,0,1);return o.Color.fromHSV(t,a,n,r).toCssRgba()},Se=e=>we({h:e,s:1,v:1,a:1}),Ie=(e,t)=>{const a=ye(e.r,0,255),n=ye(e.g,0,255),r=ye(e.b,0,255),s=ye(e.a,0,1),i=ye(t.r,0,255),l=ye(t.g,0,255),o=ye(t.b,0,255);return{r:Math.round((1-s)*i+s*a),g:Math.round((1-s)*l+s*n),b:Math.round((1-s)*o+s*r)}},Ne=e=>{const t=[e.r||0,e.g||0,e.b||0].map((function(e){return(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4)}));return.2126*t[0]+.7152*t[1]+.0722*t[2]},Le=(e,t)=>((e,t)=>(Math.max(e,t)+.05)/(Math.min(e,t)+.05))(Ne(Ie(e,t)),Ne(Ie(t,{r:0,g:0,b:0,a:1}))),Me=m.forwardRef(((e,t)=>{const a=m.useRef(null),n=m.useRef(null),s=m.useRef(void 0),i=r.useUnstyled(),l=i&&i.uTextBox,o=m.useCallback((()=>{var e;return void 0!==s.current?s.current:null==(e=a.current)?void 0:e.value}),[]);m.useImperativeHandle(n,(()=>({get element(){return a.current},get name(){return a.current&&a.current.name},get value(){return o()}}))),m.useImperativeHandle(t,(()=>n.current));const{size:c=Re.size,fillMode:d=Re.fillMode,rounded:u=Re.rounded,autoFocus:p=Re.autoFocus,inputAttributes:h,className:f,dir:v,style:g,prefix:b=Re.prefix,suffix:k=Re.suffix,valid:y,onFocus:C,onBlur:x,modified:E,touched:w,visited:S,...I}=e,[N]=r.useCustomComponent(b),[L]=r.useCustomComponent(k),[M,R]=m.useState(!1),V=m.useCallback((t=>{s.current=t.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:n.current}),s.current=void 0}),[e.onChange]),{onFocus:z,onBlur:B}=r.useAsyncFocusBlur({onFocus:e=>{R(!0)},onBlur:e=>{R(!1)},onSyncFocus:C,onSyncBlur:x}),O=m.useMemo((()=>r.classNames(r.uTextBox.wrapper({c:l,rounded:u,fillMode:d,size:c,focused:M,required:e.required,disabled:e.disabled,invalid:!1===e.valid}),f)),[f,d,M,e.disabled,e.required,e.valid,u,c,l]);return m.createElement("span",{style:g,dir:v,className:O,onFocus:z,onBlur:B},m.createElement(N,null),m.createElement("input",{ref:a,className:r.classNames(r.uTextBox.inputInner({c:l})),autoFocus:p,...Object.assign({},I,h),"aria-required":e.required,onChange:V}),m.createElement(L,null))})),Re={prefix:e=>null,suffix:e=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};Me.propTypes={size:a.oneOf([null,"small","medium","large"]),rounded:a.oneOf([null,"small","medium","large","full"]),fillMode:a.oneOf([null,"solid","flat","outline"]),autoFocus:a.bool,inputAttributes:a.object},Me.displayName="KendoReactTextBoxComponent";let Ve=class extends m.Component{constructor(e){super(e),this.onChange=e=>{const t=e.target.value,a=Ce(t,"rgba");this.setState({hex:t}),ke(a)&&this.props.onHexChange(t,a,e)},this.onBlur=()=>{ke(Ce(this.state.hex,"rgba"))||this.setState({hex:this.state.originalHex})},this.state={hex:this.props.hex,originalHex:this.props.hex}}render(){return m.createElement(Me,{value:this.state.hex,onChange:this.onChange,onBlur:this.onBlur,disabled:this.props.disabled,className:"k-hex-value",size:this.props.size,fillMode:this.props.fillMode})}static getDerivedStateFromProps(e,t){return e.hex!==t.originalHex?{hex:e.hex,originalHex:e.hex}:null}};const ze=["rgba","rgb","hex"];let Be=class extends m.Component{constructor(e){super(e),this.onRgbaRChange=e=>{this.dispatchRgbaChange({r:e.value},e)},this.onRgbaGChange=e=>{this.dispatchRgbaChange({g:e.value},e)},this.onRgbaBChange=e=>{this.dispatchRgbaChange({b:e.value},e)},this.onRgbaAChange=e=>{this.dispatchRgbaChange({a:e.value},e)},this.state={inputMode:e.defaultInputMode||ze[1]}}render(){const e=n.provideLocalizationService(this),t=e.toLanguageString(w,j[w]),a=e.toLanguageString(y,j[y]),r=e.toLanguageString(C,j[C]),i=e.toLanguageString(x,j[x]),o=e.toLanguageString(E,j[E]),c=e.toLanguageString(z,j[z]);return m.createElement("div",{className:"k-colorgradient-inputs k-hstack"},m.createElement("div",{className:"k-vstack"},m.createElement(l.Button,{"aria-label":c,fillMode:"flat",icon:"caret-alt-expand",svgIcon:s.caretAltExpandIcon,className:"k-colorgradient-toggle-mode",size:this.props.size,onClick:this.onToggleModeChange.bind(this)})),"hex"===this.state.inputMode&&m.createElement("div",{className:"k-vstack k-flex-1"},m.createElement(Ve,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),m.createElement("label",{className:"k-colorgradient-input-label"},t)),("rgb"===this.state.inputMode||"rgba"===this.state.inputMode)&&m.createElement(m.Fragment,null,m.createElement("div",{className:"k-vstack"},m.createElement(ge,{value:this.props.rgba.r,ariaLabel:String(this.props.rgba.r),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),m.createElement("label",{className:"k-colorgradient-input-label"},a)),m.createElement("div",{className:"k-vstack"},m.createElement(ge,{value:this.props.rgba.g,ariaLabel:String(this.props.rgba.g),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),m.createElement("label",{className:"k-colorgradient-input-label"},r)),m.createElement("div",{className:"k-vstack"},m.createElement(ge,{value:this.props.rgba.b,ariaLabel:String(this.props.rgba.b),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),m.createElement("label",{className:"k-colorgradient-input-label"},i))),"rgba"===this.state.inputMode&&m.createElement("div",{className:"k-vstack"},this.props.opacity&&m.createElement(ge,{value:this.props.rgba.a,ariaLabel:String(this.props.rgba.a),min:0,max:1,step:.01,spinners:!1,format:"n2",onChange:this.onRgbaAChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),this.props.opacity&&m.createElement("label",{className:"k-colorgradient-input-label"},o)))}dispatchRgbaChange(e,t){const a={...this.props.rgba};void 0!==e.r&&(a.r=e.r),void 0!==e.g&&(a.g=e.g),void 0!==e.b&&(a.b=e.b),void 0!==e.a&&(a.a=e.a),this.props.onRgbaChange(a,t)}onToggleModeChange(){const e=ze.length-1===ze.indexOf(this.state.inputMode)?0:ze.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:ze[e]});else{const t="rgba"===ze[e]?e+1:e;this.setState({inputMode:ze[t]})}}};n.registerForIntl(Be),n.registerForLocalization(Be);const Oe={name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"11.1.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},Pe="data-slider-label",Te=class extends m.Component{constructor(e){super(e),this.state={value:void 0===this.props.defaultValue?this.props.min:this.props.defaultValue,focused:!1,dir:this.props.dir},this._sliderTrack=null,this._element=null,this.buttons=e=>{if(!e.enabled)return e.children;const t="rtl"===this.state.dir?this.props.vertical?s.caretAltUpIcon:s.caretAltLeftIcon:this.props.vertical?s.caretAltUpIcon:s.caretAltRightIcon,a="rtl"===this.state.dir?this.props.vertical?s.caretAltDownIcon:s.caretAltRightIcon:this.props.vertical?s.caretAltDownIcon:s.caretAltLeftIcon,n="rtl"===this.state.dir?this.props.vertical?"caret-alt-up":"caret-alt-left":this.props.vertical?"caret-alt-up":"caret-alt-right",r="rtl"===this.state.dir?this.props.vertical?"caret-alt-down":"caret-alt-right":this.props.vertical?"caret-alt-down":"caret-alt-left";return m.createElement(m.Fragment,null,m.createElement(l.Button,{className:"k-button-decrease",rounded:"full",icon:r,svgIcon:a,title:e.decrementTitle,onClick:e.decrement}),e.children,m.createElement(l.Button,{className:"k-button-increase",rounded:"full",icon:n,svgIcon:t,title:e.incrementTitle,onClick:e.increment}))},this.focus=()=>{this._element&&this._element.focus()},this.isLabel=e=>{let t=e;for(;t;){if(t.getAttribute(Pe))return!0;t=t.parentElement}return!1},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onKeyDown=e=>{let t;e.keyCode===r.Keys.left||e.keyCode===r.Keys.down?t=this.state.value-(this.props.step||0):e.keyCode===r.Keys.right||e.keyCode===r.Keys.up?t=this.state.value+(this.props.step||0):e.keyCode===r.Keys.pageDown?t=this.state.value-(this.props.largeStep||0):e.keyCode===r.Keys.pageUp?t=this.state.value+(this.props.largeStep||0):e.keyCode===r.Keys.home?t=this.props.min:e.keyCode===r.Keys.end&&(t=this.props.max),void 0!==t&&(e.preventDefault(),this.change(e,t))},this.decrement=e=>{e.preventDefault(),this.change(e,this.state.value-(this.props.step||0))},this.increment=e=>{e.preventDefault(),this.change(e,this.state.value+(this.props.step||0))},this.dragStart=e=>{this.isLabel(e.event.originalEvent.target)||(e.event.isTouch&&e.event.originalEvent.preventDefault(),this.drag(e))},this.dragOver=e=>{e.event.originalEvent.preventDefault(),this.drag(e)},this.drag=e=>{const t=e.element.getBoundingClientRect(),a=(this.props.vertical?t.bottom-e.event.clientY:"rtl"===this.state.dir?t.right-e.event.clientX:e.event.clientX-t.left)/(this.props.vertical?t.height:t.width);this.change(e,this.props.min+a*(this.props.max-this.props.min))}}static getDerivedStateFromProps(e,t){const a=void 0!==e.value?e.value:t.value,{min:n,max:r}=e;return void 0===a?null:{value:Math.min(Math.max(a,n),r)}}componentDidMount(){if(!this.state.dir&&window&&this._element){const e=window.getComputedStyle(this._element).direction;e&&this.setState({dir:e})}}render(){const e=n.provideLocalizationService(this),t=(this.state.value-this.props.min)/(this.props.max-this.props.min)*100,a=this.props.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},s=this.props.vertical?{paddingTop:0,height:"100%"}:{};return m.createElement("div",{ref:e=>{this._element=e},dir:this.state.dir,id:this.props.id,style:{gap:0,...this.props.style},onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,className:r.classNames("k-slider",{"k-focus":this.state.focused,"k-disabled":this.props.disabled,"k-slider-horizontal":!this.props.vertical,"k-slider-vertical":this.props.vertical},this.props.className)},m.createElement(this.buttons,{enabled:this.props.buttons,decrement:this.decrement,increment:this.increment,incrementTitle:e.toLanguageString(g,j[g]),decrementTitle:e.toLanguageString(b,j[b])},m.createElement(r.Draggable,{onDrag:this.dragOver,onPress:this.dragStart,autoScroll:!1},m.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...a}},this.props.children&&m.createElement("ul",{className:"k-reset k-slider-items",style:{margin:0,...s}},m.Children.map(this.props.children,((e,t)=>e&&m.cloneElement(e,{position:100*(e.props.position-this.props.min)/(this.props.max-this.props.min),vertical:this.props.vertical,firstTick:0===t,lastTick:t===m.Children.count(this.props.children)-1},e.props.children)))),m.createElement("div",{className:"k-slider-track",style:this.props.vertical?{bottom:0,height:"100%"}:{["rtl"===this.state.dir?"right":"left"]:0,width:"100%"},ref:e=>{this._sliderTrack=e}},m.createElement("div",{className:"k-slider-selection",style:this.props.vertical?{height:t+"%"}:{width:t+"%"}}),m.createElement("span",{role:"slider","aria-valuemin":this.props.min,"aria-valuemax":this.props.max,"aria-valuenow":this.state.value,"aria-valuetext":String(this.state.value),"aria-orientation":this.props.vertical?"vertical":void 0,"aria-disabled":this.props.disabled?"true":void 0,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled,void 0),className:"k-draghandle k-draghandle-end",title:e.toLanguageString(k,j[k]),style:this.props.vertical?{bottom:"calc("+t+"%)",zIndex:1}:"rtl"===this.state.dir?{right:"calc("+t+"% - 13px)",zIndex:1}:{left:"calc("+t+"%)",zIndex:1}}))))))}get sliderTrack(){return this._sliderTrack}change(e,t){t=Math.min(Math.max(t,this.props.min),this.props.max),this.setState({value:t}),r.dispatchEvent(this.props.onChange,e,this,{value:t})}};Te.displayName="Slider",Te.propTypes={min:a.number.isRequired,max:a.number.isRequired,value:a.number,vertical:a.bool,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,ariaLabel:a.string};let De=Te;const Fe=r.createPropsContext(),Ke=r.withPropsContext(Fe,De);Ke.displayName="KendoReactSlider",n.registerForLocalization(De);const Ae={};let _e=class extends m.Component{render(){const e=n.provideLocalizationService(this),t=e.toLanguageString(S,j[S]),a=e.toLanguageString(I,j[I]),i=e.toLanguageString(N,j[N]),l=e.toLanguageString(L,j[L]),o=e.toLanguageString(M,j[M]),c=Le(this.props.rgba,this.props.bgColor),d=4.5.toFixed(1),u=7..toFixed(1),p=`${t}: ${c.toFixed(2)}`,h=`${a}: ${d}`,f=`${i}: ${u}`,v=m.createElement("span",{className:"k-contrast-validation k-text-success"},l," ",m.createElement(r.IconWrap,{name:"check",icon:s.checkIcon})),g=m.createElement("span",{className:"k-contrast-validation k-text-error"},o," ",m.createElement(r.IconWrap,{name:"x",icon:s.xIcon}));return m.createElement("div",{className:"k-vbox k-colorgradient-color-contrast"},m.createElement("div",{className:"k-contrast-ratio"},m.createElement("span",{className:"k-contrast-ratio-text"},p),c>=4.5?m.createElement("span",{className:"k-contrast-validation k-text-success"},m.createElement(r.IconWrap,{name:"check",icon:s.checkIcon}),c>=7&&m.createElement(r.IconWrap,{name:"check",icon:s.checkIcon})):m.createElement("span",{className:"k-contrast-validation k-text-error"},m.createElement(r.IconWrap,{name:"x",icon:s.xIcon}))),m.createElement("div",null,m.createElement("span",null,h),c>=4.5?v:g),m.createElement("div",null,m.createElement("span",null,f),c>=7?v:g))}};n.registerForLocalization(_e);const $e=(e,t)=>0===e.length?"":`<path d="${e.reduce(((e,a,n,r)=>0===n?`M ${a[0]},${a[1]}`:`${e} ${t(a,n,r)}`),"")}" fill="none" stroke="white" stroke-width="1"/>`,He=(e,t)=>{const a=t[0]-e[0],n=t[1]-e[1];return{length:Math.sqrt(Math.pow(a,2)+Math.pow(n,2)),angle:Math.atan2(n,a)}};let qe=class extends m.Component{renderSvgCurveLine(){const e=this.props.metrics,t=(a,n,r,s,i)=>{const l=(r+s)/2,o=Object.assign({},this.props.hsva,{s:n/e.width,v:1-l/e.height}),c=Le(Ee(we(o)),Ee(this.props.backgroundColor||""));return r+.5>s?c<a+1&&c>a-1?l:null:i(c,a)?t(a,n,r,s-(s-r)/2,i):t(a,n,r+(s-r)/2,s,i)},a=(a,n,r=!1)=>{const s=[];for(let i=0;i<=e.width;i+=e.width/n){const n=t(a,i,0,e.height,r?(e,t)=>e<t:(e,t)=>e>t);null!==n&&s.push([i,n])}return s},n=(e=>(t,a,n)=>{const[r,s]=e(n[a-1],n[a-2],t),[i,l]=e(t,n[a-1],n[a+1],!0);return`C ${r},${s} ${i},${l} ${t[0]},${t[1]}`})((e=>(t,a,n,r)=>{const s=e(a||t,n||t),i=s.angle+(r?Math.PI:0),l=.1*s.length;return[t[0]+Math.cos(i)*l,t[1]+Math.sin(i)*l]})(He));return $e(a(4.5,16),n)+$e(a(4.5,16,!0),n)+$e(a(7,16),n)+$e(a(7,16,!0),n)}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 m.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}})}};const Ge="rgba(255, 255, 255, 1)",We=class e extends m.Component{constructor(t){super(t),this.wrapperRef=m.createRef(),this.hsvGradientRef=m.createRef(),this.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,t,a)=>{if(this.isUncontrolled){const a=xe(t);this.setState({hsva:a,backgroundColor:Se(a.h),rgba:Ee(t),hex:e})}else!function(e,t,a){Ae[e]={value:t,hex:a}}(this.state.guid,t,e);this.dispatchChangeEvent(t,a,a.nativeEvent)},this.onRgbaChange=(e,t)=>{const a=(e=>{const t=ye(e.r,0,255),a=ye(e.g,0,255),n=ye(e.b,0,255),r=ye(e.a,0,1);return o.Color.fromBytes(t,a,n,r).toCssRgba()})(e);if(this.isUncontrolled){const t=xe(a),n=Ce(a,"hex");this.setState({hsva:t,backgroundColor:Se(t.h),rgba:e,hex:n})}else!function(e,t,a){Ae[e]={value:t,rgba:a}}(this.state.guid,a,e);this.dispatchChangeEvent(a,t.syntheticEvent,t.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 t;null==(t=this.hsvNavigation)||t.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,t,a)=>{const n=parseInt(e.style.top,10)+a,r=parseInt(e.style.left,10)+t;e.style.top=`${n}px`,e.style.left=`${r}px`,this.moveDragHandle(r,n)},this.changePosition=e=>{const t=this.getGradientRectMetrics(),a=e.clientX-t.left,n=e.clientY-t.top;this.moveDragHandle(a,n)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var t;null==(t=this.navigation)||t.triggerKeyboardEvent(e)},this.showLicenseWatermark=!r.validatePackage(Oe,{component:"ColorGradient"});const a=t.value||t.defaultValue||Ce(Ge,"rgba");this.state=Object.assign({},e.getStateFromValue(a),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,a){return t.value&&!a.isFirstRender?e.getStateFromValue(t.value,a.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 e=0,t=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,n)=>{t=n.shiftKey?this.props.gradientSliderSmallStep||2:this.props.gradientSliderStep||5,this.onHsvGradientValueChange(e,0,t)},ArrowUp:(e,a,n)=>{t=n.shiftKey?-(this.props.gradientSliderSmallStep||2):-(this.props.gradientSliderStep||5),this.onHsvGradientValueChange(e,0,t)},ArrowLeft:(t,a,n)=>{e=n.shiftKey?-(this.props.gradientSliderSmallStep||2):-(this.props.gradientSliderStep||5),this.onHsvGradientValueChange(t,e,0)},ArrowRight:(t,a,n)=>{e=n.shiftKey?this.props.gradientSliderSmallStep||2:this.props.gradientSliderStep||5,this.onHsvGradientValueChange(t,e,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:(e,t,a)=>{r.getActiveElement(document)===e?r.disableNavigatableContainer(e):r.keepFocusInContainer(a,e,r.TABBABLE_ELEMENTS)},Enter:(e,t,a)=>{r.getActiveElement(document)===e&&(r.focusFirstFocusableChild(e),r.enableNavigatableContainer(e))},Escape:(e,t,a)=>{r.getActiveElement(document)!==e&&(e.focus(),r.disableNavigatableContainer(e))}}}}))}componentWillUnmount(){(function(e){delete Ae[e]})(this.state.guid),this.resizeObserver&&this.resizeObserver.disconnect()}componentDidUpdate(e,t){t.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const e={};if(!this.state.isFirstRender){const t=this.getGradientRectMetrics(),a=(1-this.state.hsva.v)*t.height,n=this.state.hsva.s*t.width;e.top=`${a}px`,e.left=`${n}px`}return m.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:e,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(e,t){const a=this.getGradientRectMetrics(),n=a.width,r=a.height,s=ye(t,0,r),i=ye(e,0,n),l=Object.assign({},this.state.hsva,{s:i/n,v:1-s/r});this.handleHsvaChange(l,{},{})}handleHsvaChange(e,t,a){const n=we(e),r=Ce(n,"hex");this.isUncontrolled||function(e,t,a){Ae[e]={value:t,hsva:a}}(this.state.guid,n,e),this.setState({hsva:e,backgroundColor:Se(e.h),rgba:Ee(n),hex:r}),this.dispatchChangeEvent(n,t,a)}dispatchChangeEvent(e,t,a){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:t,nativeEvent:a,target:this,value:e})}static getStateFromValue(e,t){ke(Ce(e,"hex"))||(e=Ge);const a=function(e,t){if(e){const a=Ae[e];return a&&a.value===t?a.hsva:void 0}}(t,e)||xe(e),n=function(e,t){if(e){const a=Ae[e];return a&&a.value===t?a.rgba:void 0}}(t,e)||Ee(e),r=function(e,t){if(e){const a=Ae[e];return a&&a.value===t?a.hex:void 0}}(t,e)||Ce(e,"hex");return{hsva:a,backgroundColor:Se(a.h),rgba:n,hex:r}}setAlphaSliderBackground(e){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${e})`)}get isUncontrolled(){return void 0===this.props.value}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const e=n.provideLocalizationService(this);return m.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},m.createElement("div",{className:"k-colorgradient-canvas "+(this.props._adaptive?"k-vstack":"k-hstack")},m.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},m.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:e=>{this.gradientWrapper=e?e.element:void 0}},m.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&m.createElement(qe,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),m.createElement("div",{className:"k-hsv-controls "+(this.props._adaptive?"k-vstack":"k-hstack")},m.createElement(Ke,{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:e.toLanguageString(R,j[R])}),this.props.opacity&&m.createElement(Ke,{value:ke(this.state.hsva.a)?100*this.state.hsva.a:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:e.toLanguageString(V,j[V]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:e=>{this.alphaSlider=e}}))),m.createElement(Be,{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&&m.createElement(_e,{bgColor:Ee(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&m.createElement(r.WatermarkOverlay,null))}};We.displayName="ColorGradient",We.propTypes={defaultValue:a.string,value:a.string,onChange:a.func,onFocus:a.func,opacity:a.bool,backgroundColor:a.string,format:a.any,disabled:a.bool,style:a.any,id:a.string,role:a.string,ariaLabel:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,className:a.string,size:a.oneOf(["small","medium","large",null])},We.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:"medium"};let je=We;const Ue=r.createPropsContext(),Ye=r.withIdHOC(r.withPropsContext(Ue,je));Ye.displayName="KendoReactColorGradient";let Xe=class{constructor(){this.colorRows=[]}setColorMatrix(e,t){if(this.colorRows=[],ke(e)&&e.length){t=t||e.length;for(let a=0;a<e.length;a+=t){const n=e.slice(a,t+a);this.colorRows.push(n)}}}getCellCoordsFor(e){if(!ke(e))return;const t=e&&o.parseColor(e,!0),a=[e];ke(t)&&a.push(t.toCss(),t.toCssRgba());for(let e=0;e<this.colorRows.length;e++)for(let t=0;t<this.colorRows[e].length;t++)if(a.some((a=>a===this.colorRows[e][t])))return{row:e,col:t}}getColorAt(e){if(ke(e)&&ke(this.colorRows[e.row]))return this.colorRows[e.row][e.col]}getNextCell(e,t,a){if(!(ke(e)&&ke(e.row)&&ke(e.col)))return{row:0,col:0};const n=this.clampIndex(e.row+a,this.colorRows.length-1);return{row:n,col:this.clampIndex(e.col+t,this.colorRows[n].length-1)}}clampIndex(e,t){return e<0?0:e>t?t:e}};const Ze={basic:{colors:["#000000","#7f7f7f","#880015","#ed1c24","#ff7f27","#fff200","#22b14c","#00a2e8","#3f48cc","#a349a4","#ffffff","#c3c3c3","#b97a57","#ffaec9","#ffc90e","#efe4b0","#b5e61d","#99d9ea","#7092be","#c8bfe7"],columns:10},office:{colors:["#ffffff","#000000","#e6e6e6","#435569","#4371c4","#ed7e32","#a5a4a5","#febf04","#5a9bd5","#71ae48","#f2f2f3","#7f7f7f","#d1cece","#d5dde3","#dae1f4","#fce5d4","#deeded","#fff2cc","#deeaf6","#e1efd9","#d7d8d8","#585959","#aeabab","#adbaca","#b4c5e7","#f6caac","#dbdbdb","#ffe498","#bcd6ee","#c5e0b2","#bfbfc0","#3f3f3f","#767070","#8595b1","#8fabdb","#f5b183","#c9c8c9","#fed965","#9bc4e5","#a8d08d","#a5a5a6","#262625","#393939","#334050","#2e5496","#c45a11","#7b7b7a","#bf9000","#2f75b5","#548235","#7f7f7f","#0b0c0c","#161616","#222a34","#203764","#843d0b","#525252","#7f6000","#1d4d79","#375623"],columns:10},apex:{colors:["#ffffff","#000000","#c9c2d1","#69676d","#ceb966","#9cb084","#6bb1c9","#6585cf","#7e6bc9","#a379bb","#f2f2f2","#7f7f7f","#f4f2f5","#e0e0e2","#f5f1e0","#ebefe6","#e1eff4","#e0e6f5","#e5e1f4","#ece4f1","#d8d8d8","#595959","#e9e6ec","#c2c1c5","#ebe3c1","#d7dfcd","#c3dfe9","#c1ceeb","#cbc3e9","#dac9e3","#bfbfbf","#3f3f3f","#dedae3","#a4a3a8","#e1d5a3","#c3cfb5","#a6d0de","#a2b5e2","#b1a6de","#c7aed6","#a5a5a5","#262626","#9688a5","#4e4d51","#ae9638","#758c5a","#3d8da9","#365bb0","#533da9","#7d4d99","#7f7f7f","#0c0c0c","#635672","#343336","#746425","#4e5d3c","#295e70","#243c75","#372970","#533366"],columns:10},austin:{colors:["#ffffff","#000000","#caf278","#3e3d2d","#94c600","#71685a","#ff6700","#909465","#956b43","#fea022","#f2f2f2","#7f7f7f","#f4fce4","#dddcd0","#efffc0","#e3e1dc","#ffe0cb","#e8e9df","#ece1d6","#feecd2","#d8d8d8","#595959","#e9f9c9","#bbb9a1","#dfff82","#c8c3ba","#ffc299","#d2d4c0","#dac3ad","#fed9a6","#bfbfbf","#3f3f3f","#dff7ae","#ada598","#cfff43","#ada598","#ffa365","#bcbfa1","#c8a585","#fec67a","#a5a5a5","#262626","#a9ea25","#2e2d21","#6f9400","#544e43","#bf4d00","#6c6f4b","#6f5032","#d77b00","#7f7f7f","#0c0c0c","#74a50f","#1f1e16","#4a6300","#38342d","#7f3300","#484a32","#4a3521","#8f5200"],columns:10},clarity:{colors:["#ffffff","#292934","#f3f2dc","#d2533c","#93a299","#ad8f67","#726056","#4c5a6a","#808da0","#79463d","#f2f2f2","#e7e7ec","#e7e5b9","#f6dcd8","#e9ecea","#eee8e0","#e4dedb","#d8dde3","#e5e8ec","#e9d6d3","#d8d8d8","#c4c4d1","#d5d185","#edbab1","#d3d9d6","#ded2c2","#c9beb8","#b2bcc8","#ccd1d9","#d3aea7","#bfbfbf","#8a8aa3","#aca73b","#e4978a","#bec7c1","#cdbba3","#af9e94","#8c9bac","#b2bac6","#bd857c","#a5a5a5","#56566e","#56531d","#a43925","#6b7c72","#866b48","#554840","#39434f","#5c697b","#5a342d","#7f7f7f","#3b3b4b","#22210b","#6d2619","#47534c","#594730","#39302b","#262d35","#3d4652","#3c231e"],columns:10},slipstream:{colors:["#ffffff","#000000","#b4dcfa","#212745","#4e67c8","#5eccf3","#a7ea52","#5dceaf","#ff8021","#f14124","#f2f2f2","#7f7f7f","#8bc9f7","#c7cce4","#dbe0f4","#def4fc","#edfadc","#def5ef","#ffe5d2","#fcd9d3","#d8d8d8","#595959","#4facf3","#909aca","#b8c2e9","#beeafa","#dbf6b9","#beebdf","#ffcca6","#f9b3a7","#bfbfbf","#3f3f3f","#0d78c9","#5967af","#94a3de","#9ee0f7","#caf297","#9de1cf","#ffb279","#f68d7b","#a5a5a5","#262626","#063c64","#181d33","#31479f","#11b2eb","#81d319","#34ac8b","#d85c00","#c3260c","#7f7f7f","#0c0c0c","#021828","#101322","#202f6a","#0b769c","#568c11","#22725c","#903d00","#821908"],columns:10},metro:{colors:["#ffffff","#000000","#d6ecff","#4e5b6f","#7fd13b","#ea157a","#feb80a","#00addc","#738ac8","#1ab39f","#f2f2f2","#7f7f7f","#a7d6ff","#d9dde4","#e5f5d7","#fad0e4","#fef0cd","#c5f2ff","#e2e7f4","#c9f7f1","#d8d8d8","#595959","#60b5ff","#b3bcca","#cbecb0","#f6a1c9","#fee29c","#8be6ff","#c7d0e9","#94efe3","#bfbfbf","#3f3f3f","#007dea","#8d9baf","#b2e389","#f272af","#fed46b","#51d9ff","#aab8de","#5fe7d5","#a5a5a5","#262626","#003e75","#3a4453","#5ea226","#af0f5b","#c58c00","#0081a5","#425ea9","#138677","#7f7f7f","#0c0c0c","#00192e","#272d37","#3f6c19","#750a3d","#835d00","#00566e","#2c3f71","#0c594f"],columns:10},flow:{colors:["#ffffff","#000000","#dbf5f9","#04617b","#0f6fc6","#009dd9","#0bd0d9","#10cf9b","#7cca62","#a5c249","#f2f2f2","#7f7f7f","#b2e9f2","#b4ecfc","#c7e2fa","#c4eeff","#c9fafc","#c9faed","#e4f4df","#edf2da","#d8d8d8","#595959","#76d9e8","#6adafa","#90c6f6","#89deff","#93f5f9","#94f6db","#cae9c0","#dbe6b6","#bfbfbf","#3f3f3f","#21b2c8","#20c8f7","#59a9f2","#4fceff","#5df0f6","#5ff2ca","#b0dfa0","#c9da91","#a5a5a5","#262626","#105964","#02485c","#0b5394","#0075a2","#089ca2","#0b9b74","#54a838","#7e9532","#7f7f7f","#0c0c0c","#062328","#01303d","#073763","#004e6c","#05686c","#07674d","#387025","#546321"],columns:10},hardcover:{colors:["#ffffff","#000000","#ece9c6","#895d1d","#873624","#d6862d","#d0be40","#877f6c","#972109","#aeb795","#f2f2f2","#7f7f7f","#e1dca5","#f2e0c6","#f0d0c9","#f6e6d5","#f5f2d8","#e7e5e1","#fbc7bc","#eef0e9","#d8d8d8","#595959","#d0c974","#e6c28d","#e2a293","#eeceaa","#ece5b2","#cfccc3","#f78f7a","#dee2d4","#bfbfbf","#3f3f3f","#a29a36","#daa454","#d4735e","#e6b681","#e2d88c","#b7b2a5","#f35838","#ced3bf","#a5a5a5","#262626","#514d1b","#664515","#65281a","#a2641f","#a39428","#655f50","#711806","#879464","#7f7f7f","#0c0c0c","#201e0a","#442e0e","#431b11","#6c4315","#6d621a","#433f35","#4b1004","#5a6243"],columns:10},trek:{colors:["#ffffff","#000000","#fbeec9","#4e3b30","#f0a22e","#a5644e","#b58b80","#c3986d","#a19574","#c17529","#f2f2f2","#7f7f7f","#f7e09e","#e1d6cf","#fcecd5","#eddfda","#f0e7e5","#f3eae1","#ece9e3","#f5e3d1","#d8d8d8","#595959","#f3cc5f","#c4ad9f","#f9d9ab","#dcc0b6","#e1d0cc","#e7d5c4","#d9d4c7","#ebc7a3","#bfbfbf","#3f3f3f","#d29f0f","#a78470","#f6c781","#cba092","#d2b9b2","#dbc1a7","#c6bfab","#e1ac7