@progress/kendo-react-inputs 14.5.0-develop.8 → 14.5.0-develop.9

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

package/colors/ColorPicker.mjs

@@ -11,10 +11,10 @@ import { validatePackage as $e, getLicenseMessage as Ge, usePropsContext as Me,
 import { packageMetadata as ve } from "../package-metadata.mjs";
 import { Picker as at } from "./Picker.mjs";
 import { ColorGradient as ot } from "./ColorGradient.mjs";
-import { DEFAULT_TILE_SIZE as rt, DEFAULT_PRESET as lt, ColorPalette as it } from "./ColorPalette.mjs";
+import { DEFAULT_TILE_SIZE as rt, DEFAULT_PRESET as it, ColorPalette as lt } from "./ColorPalette.mjs";
 import { FlatColorPicker as L } from "./FlatColorPicker.mjs";
 import { Button as st } from "@progress/kendo-react-buttons";
-import { caretAltDownIcon as ct } from "@progress/kendo-svg-icons";
+import { chevronDownIcon as ct } from "@progress/kendo-svg-icons";
 import { colorPickerAdaptiveTitle as ge, messages as D, flatColorPickerApplyBtn as ke, flatColorPickerCancelBtn as Ce, colorPickerDropdownButtonAriaLabel as Ee } from "../messages/index.mjs";
 import { useLocalization as ut } from "@progress/kendo-react-intl";
 import { AdaptiveMode as dt } from "../common/AdaptiveMode.mjs";
@@ -22,22 +22,22 @@ import { ActionSheetContent as pt } from "@progress/kendo-react-layout";
 const ft = {
   opacity: !0
 }, mt = {
-  palette: lt,
+  palette: it,
   tileSize: rt
 }, q = (x) => x !== void 0, vt = tt(), be = t.forwardRef((x, we) => {
-  var ie, se;
-  const Se = !$e(ve, { component: "ColorPicker" }), ye = Ge(ve), r = Me(vt, x), S = ut(), J = Ze(), {
+  var le, se;
+  const Se = !$e(ve, { component: "ColorPicker" }), he = Ge(ve), r = Me(vt, x), S = ut(), J = Ze(), {
     size: u = C.size,
     rounded: v = C.rounded,
     fillMode: N = C.fillMode,
     gradientSettings: E = C.gradientSettings,
-    paletteSettings: y = C.paletteSettings,
-    flatColorPickerSettings: h,
+    paletteSettings: h = C.paletteSettings,
+    flatColorPickerSettings: y,
     view: d = r.views ? void 0 : C.view,
     views: s = d ? void 0 : C.views,
     activeView: Q,
     popupSettings: g,
-    valid: he,
+    valid: ye,
     disabled: O,
     tabIndex: _e,
     icon: F,
@@ -52,7 +52,7 @@ const ft = {
     adaptiveTitle: X = S.toLanguageString(ge, D[ge]),
     adaptiveSubtitle: Y,
     showButtons: b = !0
-  } = r, c = t.useRef(null), _ = t.useRef(null), R = t.useRef(null), m = t.useRef(null), w = t.useRef(void 0), Re = t.useRef(null), [Ae, ee] = t.useState(!1), [Ie, Be] = t.useState(r.defaultValue || void 0), [ze, Le] = t.useState(!1), [A, De] = t.useState(), $ = q(r.value), k = q(r.open), l = $ ? r.value : Ie, p = k ? r.open : ze, te = t.useRef(l), ne = t.useCallback(() => {
+  } = r, c = t.useRef(null), _ = t.useRef(null), R = t.useRef(null), m = t.useRef(null), w = t.useRef(void 0), Re = t.useRef(null), [Ae, ee] = t.useState(!1), [Ie, Be] = t.useState(r.defaultValue || void 0), [ze, Le] = t.useState(!1), [A, De] = t.useState(), $ = q(r.value), k = q(r.open), i = $ ? r.value : Ie, p = k ? r.open : ze, te = t.useRef(i), ne = t.useCallback(() => {
     c.current && c.current.focus();
   }, []);
   t.useImperativeHandle(
@@ -61,10 +61,10 @@ const ft = {
       // we agreed that each element will have focus method exposed
       element: c.current,
       actionElement: Re.current,
-      value: l,
+      value: i,
       focus: ne
     }),
-    [l, ne]
+    [i, ne]
   );
   const G = !!(A && J && A <= J.medium && Pe);
   t.useEffect(() => {
@@ -74,8 +74,8 @@ const ft = {
     };
   }, []);
   const a = t.useCallback(
-    (e, i) => {
-      k || (!e && !i && c && c.current && c.current.focus(), Le(e));
+    (e, l) => {
+      k || (!e && !l && c && c.current && c.current.focus(), Le(e));
     },
     [k]
   ), ae = t.useMemo(() => new qe({
@@ -84,19 +84,19 @@ const ft = {
     tabIndex: 0,
     keyboardEvents: {
       keydown: {
-        Escape: (e, i, n) => {
+        Escape: (e, l, n) => {
           a(!1);
         },
-        Enter: (e, i, n) => {
+        Enter: (e, l, n) => {
           !k && e === c.current && (n.preventDefault(), n.stopPropagation(), a(!0));
         },
-        ArrowDown: (e, i, n) => {
+        ArrowDown: (e, l, n) => {
           n.altKey && (n.preventDefault(), n.stopPropagation(), a(!0));
         },
-        ArrowUp: (e, i, n) => {
+        ArrowUp: (e, l, n) => {
           n.altKey && (n.preventDefault(), n.stopPropagation(), a(!1));
         },
-        Tab: (e, i, n) => {
+        Tab: (e, l, n) => {
           var T, ce, ue;
           if (Je(document) !== c.current) {
             const de = (T = R.current) == null ? void 0 : T.wrapperRef.current, B = (ce = _.current) == null ? void 0 : ce.wrapperRef.current, pe = (ue = m.current) == null ? void 0 : ue.element;
@@ -109,12 +109,12 @@ const ft = {
     k || (_.current && _.current.wrapperRef.current ? fe(_.current.wrapperRef.current) : R.current ? R.current.focus() : m.current && m.current.element && fe(m.current.element));
   }, [k]), I = (e) => te.current = e, oe = t.useCallback(
     (e) => {
-      const i = {
+      const l = {
         value: te.current,
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       };
-      f(i), a(!p, !0);
+      f(l), a(!p, !0);
     },
     [p]
   ), M = t.useCallback(() => {
@@ -124,14 +124,14 @@ const ft = {
       K && K.call(void 0, {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
-        value: l,
+        value: i,
         target: {
           element: c.current,
-          value: l
+          value: i
         }
       });
     },
-    [K, l]
+    [K, i]
   ), Fe = t.useCallback(
     (e) => {
       w.current ? (clearTimeout(w.current), w.current = void 0) : (ee(!0), G && !p && a(!0)), W && W.call(void 0, {
@@ -151,9 +151,9 @@ const ft = {
     },
     [U]
   ), f = t.useCallback(
-    (e, i) => {
+    (e, l) => {
       var T;
-      const n = i ? e.rgbaValue || "" : (T = e.value) != null ? T : "";
+      const n = l ? e.rgbaValue || "" : (T = e.value) != null ? T : "";
       $ || Be(n), H && H.call(void 0, {
         value: n,
         nativeEvent: e.nativeEvent,
@@ -177,23 +177,23 @@ const ft = {
         ref: _,
         isInsidePopup: !0,
         size: e ? "large" : u,
-        value: l,
+        value: i,
         onChange: f
       }
     ), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
-      it,
+      lt,
       {
-        ...y,
+        ...h,
         ref: R,
         size: e ? "large" : u,
-        value: l,
+        value: i,
         onChange: re
       }
     ), s && s[0] === "gradient" && s[1] === "palette" && /* @__PURE__ */ t.createElement(
       L,
       {
-        ...h,
-        _paletteSettings: y,
+        ...y,
+        _paletteSettings: h,
         _gradientSettings: { _adaptive: e, ...E },
         ref: m,
         size: e ? "large" : u,
@@ -202,15 +202,15 @@ const ft = {
         activeView: Q,
         setOpen: a,
         showButtons: e ? !1 : b,
-        value: l,
+        value: i,
         onChange: f,
         setAdaptiveModeValue: I
       }
     ), s && s[0] === "palette" && s[1] === "gradient" && /* @__PURE__ */ t.createElement(
       L,
       {
-        ...h,
-        _paletteSettings: y,
+        ...y,
+        _paletteSettings: h,
         _gradientSettings: { _adaptive: e, ...E },
         ref: m,
         size: e ? "large" : u,
@@ -218,14 +218,14 @@ const ft = {
         views: ["palette", "gradient"],
         setOpen: a,
         showButtons: e ? !1 : b,
-        value: l,
+        value: i,
         onChange: f,
         setAdaptiveModeValue: I
       }
     ), s && s.includes("gradient") && !s.includes("palette") && /* @__PURE__ */ t.createElement(
       L,
       {
-        ...h,
+        ...y,
         _gradientSettings: { _adaptive: e, ...E },
         ref: m,
         size: e ? "large" : u,
@@ -233,15 +233,15 @@ const ft = {
         views: ["gradient"],
         showButtons: e ? !1 : b,
         setOpen: a,
-        value: l,
+        value: i,
         onChange: f,
         setAdaptiveModeValue: I
       }
     ), s && s.includes("palette") && !s.includes("gradient") && /* @__PURE__ */ t.createElement(
       L,
       {
-        ...h,
-        _paletteSettings: y,
+        ...y,
+        _paletteSettings: h,
         _gradientSettings: { _adaptive: e, ...E },
         ref: m,
         size: e ? "large" : u,
@@ -249,29 +249,29 @@ const ft = {
         views: ["palette"],
         showButtons: e ? !1 : b,
         setOpen: a,
-        value: l,
+        value: i,
         onChange: f,
         setAdaptiveModeValue: I
       }
-    ), Se && /* @__PURE__ */ t.createElement(Qe, { message: ye })),
+    ), Se && /* @__PURE__ */ t.createElement(Qe, { message: he })),
     [
       Q,
       N,
-      h,
+      y,
       E,
       f,
       re,
-      y,
+      h,
       a,
       u,
-      l,
+      i,
       d,
       s
     ]
   ), We = t.useCallback(() => {
-    var i;
+    var l;
     const e = {
-      animation: !!((i = g == null ? void 0 : g.animate) == null || i),
+      animation: !!((l = g == null ? void 0 : g.animate) == null || l),
       title: X,
       subTitle: Y,
       expand: p,
@@ -300,9 +300,9 @@ const ft = {
     oe,
     Z
   ]), Ue = t.useCallback((e) => {
-    for (const i of e)
-      De(i.target.clientWidth);
-  }, []), le = Xe(c, r.dir), Ke = he !== !1;
+    for (const l of e)
+      De(l.target.clientWidth);
+  }, []), ie = Xe(c, r.dir), Ke = ye !== !1;
   return /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -313,7 +313,7 @@ const ft = {
       "aria-describedby": r.ariaDescribedBy,
       "aria-haspopup": "dialog",
       "aria-expanded": p,
-      "aria-controls": `k-colorpicker-popup-${(ie = r.id) != null ? ie : 0}`,
+      "aria-controls": `k-colorpicker-popup-${(le = r.id) != null ? le : 0}`,
       "aria-disabled": O ? "true" : void 0,
       className: j("k-colorpicker", "k-picker", "k-icon-picker", {
         [`k-picker-${me.sizeMap[u] || u}`]: u,
@@ -330,12 +330,12 @@ const ft = {
       onKeyDown: xe,
       onFocus: Fe,
       onBlur: He,
-      dir: le
+      dir: ie
     },
     /* @__PURE__ */ t.createElement(
       at,
       {
-        dir: le,
+        dir: ie,
         open: p,
         onOpen: Ne,
         popupAnchor: c.current || void 0,
@@ -344,13 +344,13 @@ const ft = {
           "span",
           {
             className: j("k-value-icon", "k-color-preview", {
-              "k-no-color": !l,
+              "k-no-color": !i,
               "k-icon-color-preview": F || V || P
             })
           },
           P && /* @__PURE__ */ t.createElement("span", { className: j("k-color-preview-icon", P) }),
           !P && (F || V) && /* @__PURE__ */ t.createElement(et, { name: F, icon: V }),
-          /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
+          /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: i } })
         )),
         button: /* @__PURE__ */ t.createElement(
           st,
@@ -359,7 +359,7 @@ const ft = {
             type: "button",
             onClick: () => a(!p),
             className: "k-input-button",
-            icon: "caret-alt-down",
+            icon: "chevron-down",
             svgIcon: ct,
             size: u,
             "aria-label": S.toLanguageString(