@progress/kendo-react-inputs 9.4.0-develop.27 → 9.4.0-develop.29

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

package/colors/ColorPicker.mjs

@@ -7,15 +7,15 @@
  */
 import * as t from "react";
 import a from "prop-types";
-import { createPropsContext as Ve, validatePackage as He, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as We, Navigation as $e, getActiveElement as Ge, keepFocusInContainer as A, focusFirstFocusableChild as ue, useDir as Me, classNames as $, kendoThemeMaps as de, getTabIndex as Ze, IconWrap as je, svgIconPropType as qe } from "@progress/kendo-react-common";
+import { createPropsContext as Ve, validatePackage as He, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as We, Navigation as $e, getActiveElement as Ge, keepFocusInContainer as I, focusFirstFocusableChild as ue, useDir as Me, classNames as G, kendoThemeMaps as de, getTabIndex as Ze, IconWrap as je, svgIconPropType as qe } from "@progress/kendo-react-common";
 import { packageMetadata as Je } from "../package-metadata.mjs";
 import { Picker as Qe } from "./Picker.mjs";
 import { ColorGradient as Xe } from "./ColorGradient.mjs";
 import { ColorPalette as Ye, DEFAULT_PRESET as et, DEFAULT_TILE_SIZE as tt } from "./ColorPalette.mjs";
-import { FlatColorPicker as I } from "./FlatColorPicker.mjs";
+import { FlatColorPicker as z } from "./FlatColorPicker.mjs";
 import { Button as nt } from "@progress/kendo-react-buttons";
 import { caretAltDownIcon as at } from "@progress/kendo-svg-icons";
-import { colorPickerAdaptiveTitle as pe, messages as z, flatColorPickerCancelBtn as fe, flatColorPickerApplyBtn as me, colorPickerDropdownButtonAriaLabel as ve } from "../messages/index.mjs";
+import { colorPickerAdaptiveTitle as pe, messages as B, flatColorPickerCancelBtn as fe, flatColorPickerApplyBtn as me, colorPickerDropdownButtonAriaLabel as ve } from "../messages/index.mjs";
 import { useLocalization as rt } from "@progress/kendo-react-intl";
 import { AdaptiveMode as ot } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as lt } from "@progress/kendo-react-layout";
@@ -24,34 +24,34 @@ const it = {
 }, ct = {
   palette: et,
   tileSize: tt
-}, G = (B) => B !== void 0, st = Ve(), ge = t.forwardRef((B, ke) => {
+}, M = (D) => D !== void 0, st = Ve(), ge = t.forwardRef((D, ke) => {
   var re, oe;
   He(Je);
-  const r = Ue(st, B), E = rt(), M = Ke(), {
+  const o = Ue(st, D), b = rt(), Z = Ke(), {
     size: u = k.size,
-    rounded: D = k.rounded,
-    fillMode: h = k.fillMode,
-    gradientSettings: Z = k.gradientSettings,
+    rounded: x = k.rounded,
+    fillMode: S = k.fillMode,
+    gradientSettings: C = k.gradientSettings,
     paletteSettings: j = k.paletteSettings,
-    flatColorPickerSettings: b,
-    view: d = r.views ? void 0 : k.view,
+    flatColorPickerSettings: w,
+    view: d = o.views ? void 0 : k.view,
     views: c = d ? void 0 : k.views,
     activeView: q,
     popupSettings: m,
     valid: Ce,
-    disabled: x,
+    disabled: L,
     tabIndex: Ee,
-    icon: L,
-    svgIcon: N,
-    iconClassName: S,
-    onChange: O,
-    onFocus: F,
-    onBlur: V,
-    onActiveColorClick: H,
+    icon: N,
+    svgIcon: O,
+    iconClassName: T,
+    onChange: F,
+    onFocus: V,
+    onBlur: H,
+    onActiveColorClick: U,
     className: be,
     adaptive: we,
-    adaptiveTitle: J = E.toLanguageString(pe, z[pe])
-  } = r, s = t.useRef(null), w = t.useRef(null), T = t.useRef(null), f = t.useRef(null), C = t.useRef(), ye = t.useRef(null), [he, Q] = t.useState(!1), [Se, Te] = t.useState(r.defaultValue), [Pe, _e] = t.useState(!1), [P, Re] = t.useState(), U = G(r.value), v = G(r.open), o = U ? r.value : Se, g = v ? r.open : Pe, X = t.useRef(o), Y = t.useCallback(() => {
+    adaptiveTitle: J = b.toLanguageString(pe, B[pe])
+  } = o, s = t.useRef(null), y = t.useRef(null), P = t.useRef(null), f = t.useRef(null), E = t.useRef(), ye = t.useRef(null), [he, Q] = t.useState(!1), [Se, Te] = t.useState(o.defaultValue), [Pe, _e] = t.useState(!1), [_, Re] = t.useState(), K = M(o.value), v = M(o.open), l = K ? o.value : Se, g = v ? o.open : Pe, X = t.useRef(l), Y = t.useCallback(() => {
     s.current && s.current.focus();
   }, []);
   t.useImperativeHandle(
@@ -60,19 +60,19 @@ const it = {
       // we agreed that each element will have focus method exposed
       element: s.current,
       actionElement: ye.current,
-      value: o,
+      value: l,
       focus: Y
     }),
-    [o, Y]
+    [l, Y]
   );
-  const Ae = !!(P && M && P <= M.medium && we);
+  const Ae = !!(_ && Z && _ <= Z.medium && we);
   t.useEffect(() => {
     const e = We && window.ResizeObserver && new window.ResizeObserver(Oe.bind(void 0));
     return document != null && document.body && e && e.observe(document.body), () => {
       document != null && document.body && e && e.disconnect();
     };
   }, []);
-  const l = t.useCallback(
+  const r = t.useCallback(
     (e, i) => {
       v || (!e && !i && s && s.current && s.current.focus(), _e(e));
     },
@@ -84,76 +84,76 @@ const it = {
     keyboardEvents: {
       keydown: {
         Escape: (e, i, n) => {
-          l(!1);
+          r(!1);
         },
         Enter: (e, i, n) => {
-          !v && e === s.current && (n.preventDefault(), n.stopPropagation(), l(!0));
+          !v && e === s.current && (n.preventDefault(), n.stopPropagation(), r(!0));
         },
         ArrowDown: (e, i, n) => {
-          n.altKey && (n.preventDefault(), n.stopPropagation(), l(!0));
+          n.altKey && (n.preventDefault(), n.stopPropagation(), r(!0));
         },
         ArrowUp: (e, i, n) => {
-          n.altKey && (n.preventDefault(), n.stopPropagation(), l(!1));
+          n.altKey && (n.preventDefault(), n.stopPropagation(), r(!1));
         },
         Tab: (e, i, n) => {
-          var y, le, ie;
+          var h, le, ie;
           if (Ge(document) !== s.current) {
-            const ce = (y = T.current) == null ? void 0 : y.wrapperRef.current, R = (le = w.current) == null ? void 0 : le.wrapperRef.current, se = (ie = f.current) == null ? void 0 : ie.element;
-            d === "palette" && ce ? A(n, ce) : d === "gradient" && R ? A(n, R) : d === "combo" && R ? A(n, R.parentElement) : c && se && A(n, se);
+            const ce = (h = P.current) == null ? void 0 : h.wrapperRef.current, A = (le = y.current) == null ? void 0 : le.wrapperRef.current, se = (ie = f.current) == null ? void 0 : ie.element;
+            d === "palette" && ce ? I(n, ce) : d === "gradient" && A ? I(n, A) : d === "combo" && A ? I(n, A.parentElement) : c && se && I(n, se);
           }
         }
       }
     }
-  }), [l, v]), Ie = t.useCallback(ee.triggerKeyboardEvent.bind(ee), []), ze = t.useCallback(() => {
-    v || (w.current && w.current.wrapperRef.current ? ue(w.current.wrapperRef.current) : T.current ? T.current.focus() : f.current && f.current.element && ue(f.current.element));
-  }, [v]), _ = (e) => X.current = e, te = t.useCallback(
+  }), [r, v]), Ie = t.useCallback(ee.triggerKeyboardEvent.bind(ee), []), ze = t.useCallback(() => {
+    v || (y.current && y.current.wrapperRef.current ? ue(y.current.wrapperRef.current) : P.current ? P.current.focus() : f.current && f.current.element && ue(f.current.element));
+  }, [v]), R = (e) => X.current = e, te = t.useCallback(
     (e) => {
       const i = {
         value: X.current,
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       };
-      p(i), l(!g, !0);
+      p(i), r(!g, !0);
     },
     [g]
-  ), K = t.useCallback(() => {
-    l(!1, !0);
-  }, [l]), Be = t.useCallback(
+  ), W = t.useCallback(() => {
+    r(!1, !0);
+  }, [r]), Be = t.useCallback(
     (e) => {
-      H && H.call(void 0, {
+      U && U.call(void 0, {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
-        value: o,
+        value: l,
         target: {
           element: s.current,
-          value: o
+          value: l
         }
       });
     },
-    [H, o]
+    [U, l]
   ), De = t.useCallback(
     (e) => {
-      C.current ? (clearTimeout(C.current), C.current = void 0) : Q(!0), F && F.call(void 0, {
+      E.current ? (clearTimeout(E.current), E.current = void 0) : Q(!0), V && V.call(void 0, {
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       });
     },
-    [F]
+    [V]
   ), xe = t.useCallback(() => {
-    l(!1, !0), Q(!1), C.current = void 0;
+    r(!1, !0), Q(!1), E.current = void 0;
   }, []), Le = t.useCallback(
     (e) => {
-      clearTimeout(C.current), C.current = window.setTimeout(xe), V && V.call(void 0, {
+      clearTimeout(E.current), E.current = window.setTimeout(xe), H && H.call(void 0, {
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       });
     },
-    [V]
+    [H]
   ), p = t.useCallback(
     (e, i) => {
-      var y;
-      const n = i ? e.rgbaValue || "" : (y = e.value) != null ? y : "";
-      U || Te(n), O && O.call(void 0, {
+      var h;
+      const n = i ? e.rgbaValue || "" : (h = e.value) != null ? h : "";
+      K || Te(n), F && F.call(void 0, {
         value: n,
         nativeEvent: e.nativeEvent,
         syntheticEvent: e.syntheticEvent,
@@ -161,102 +161,103 @@ const it = {
           element: s.current,
           value: n
         }
-      }), l(!1);
+      }), r(!1);
     },
-    [U, O]
+    [K, F]
   ), ne = t.useCallback(
     (e) => p(e, !0),
-    [G, p]
-  ), W = t.useCallback(
+    [M, p]
+  ), $ = t.useCallback(
     (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
       Xe,
       {
-        ...Z,
+        ...C,
         _adaptive: e,
-        ref: w,
+        ref: y,
         isInsidePopup: !0,
         size: e ? "large" : u,
-        fillMode: h,
-        value: o,
+        fillMode: S,
+        value: l,
         onChange: p
       }
     ), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
       Ye,
       {
         ...j,
-        ref: T,
+        ref: P,
         size: e ? "large" : u,
-        value: o,
+        value: l,
         onChange: ne
       }
     ), c && c[0] === "gradient" && c[1] === "palette" && /* @__PURE__ */ t.createElement(
-      I,
+      z,
       {
-        ...b,
-        _gradientSettings: { _adaptive: e },
+        ...w,
+        _gradientSettings: { _adaptive: e, ...C },
         ref: f,
         size: e ? "large" : u,
         views: ["gradient", "palette"],
         activeView: q,
-        setOpen: l,
+        setOpen: r,
         showButtons: !e,
-        value: o,
+        value: l,
         onChange: p,
-        setAdaptiveModeValue: _
+        setAdaptiveModeValue: R
       }
     ), c && c[0] === "palette" && c[1] === "gradient" && /* @__PURE__ */ t.createElement(
-      I,
+      z,
       {
-        ...b,
-        _gradientSettings: { _adaptive: e },
+        ...w,
+        _gradientSettings: { _adaptive: e, ...C },
         ref: f,
         size: e ? "large" : u,
         views: ["palette", "gradient"],
-        setOpen: l,
+        setOpen: r,
         showButtons: !e,
-        value: o,
+        value: l,
         onChange: p,
-        setAdaptiveModeValue: _
+        setAdaptiveModeValue: R
       }
     ), c && c.includes("gradient") && !c.includes("palette") && /* @__PURE__ */ t.createElement(
-      I,
+      z,
       {
-        ...b,
-        _gradientSettings: { _adaptive: e },
+        ...w,
+        _gradientSettings: { _adaptive: e, ...C },
         ref: f,
         size: e ? "large" : u,
         views: ["gradient"],
         showButtons: !e,
-        setOpen: l,
-        value: o,
+        setOpen: r,
+        value: l,
         onChange: p,
-        setAdaptiveModeValue: _
+        setAdaptiveModeValue: R
       }
     ), c && c.includes("palette") && !c.includes("gradient") && /* @__PURE__ */ t.createElement(
-      I,
+      z,
       {
-        ...b,
-        _gradientSettings: { _adaptive: e },
+        ...w,
+        _gradientSettings: { _adaptive: e, ...C },
         ref: f,
         size: e ? "large" : u,
         views: ["palette"],
         showButtons: !e,
-        setOpen: l,
-        value: o,
+        setOpen: r,
+        value: l,
         onChange: p,
-        setAdaptiveModeValue: _
+        setAdaptiveModeValue: R
       }
     )),
     [
       q,
-      h,
-      b,
-      Z,
+      S,
+      w,
+      C,
       p,
       ne,
       j,
+      r,
       u,
-      o,
+      l,
       d,
       c
     ]
@@ -266,53 +267,53 @@ const it = {
       animation: !!((i = m == null ? void 0 : m.animate) == null || i),
       title: J,
       expand: g,
-      onClose: K,
-      windowWidth: P,
+      onClose: W,
+      windowWidth: _,
       footer: {
-        cancelText: E.toLanguageString(fe, z[fe]),
-        onCancel: K,
-        applyText: E.toLanguageString(me, z[me]),
+        cancelText: b.toLanguageString(fe, B[fe]),
+        onCancel: W,
+        applyText: b.toLanguageString(me, B[me]),
         onApply: te
       }
     };
-    return /* @__PURE__ */ t.createElement(ot, { ...e }, /* @__PURE__ */ t.createElement(lt, { overflowHidden: !0 }, W(!0)));
+    return /* @__PURE__ */ t.createElement(ot, { ...e }, /* @__PURE__ */ t.createElement(lt, { overflowHidden: !0 }, $(!0)));
   }, [
     m == null ? void 0 : m.animate,
     J,
     g,
-    K,
-    P,
-    E,
+    W,
+    _,
+    b,
     te,
-    W
+    $
   ]), Oe = t.useCallback((e) => {
     for (const i of e)
       Re(i.target.clientWidth);
-  }, []), ae = Me(s, r.dir), Fe = Ce !== !1;
+  }, []), ae = Me(s, o.dir), Fe = Ce !== !1;
   return /* @__PURE__ */ t.createElement(
     "span",
     {
-      id: r.id,
+      id: o.id,
       role: "combobox",
-      "aria-label": r.ariaLabel,
-      "aria-labelledby": r.ariaLabelledBy,
-      "aria-describedby": r.ariaDescribedBy,
+      "aria-label": o.ariaLabel,
+      "aria-labelledby": o.ariaLabelledBy,
+      "aria-describedby": o.ariaDescribedBy,
       "aria-haspopup": "dialog",
       "aria-expanded": g,
-      "aria-controls": `k-colorpicker-popup-${(re = r.id) != null ? re : 0}`,
-      "aria-disabled": x ? "true" : void 0,
-      className: $("k-colorpicker", "k-picker", "k-icon-picker", {
+      "aria-controls": `k-colorpicker-popup-${(re = o.id) != null ? re : 0}`,
+      "aria-disabled": L ? "true" : void 0,
+      className: G("k-colorpicker", "k-picker", "k-icon-picker", {
         [`k-picker-${de.sizeMap[u] || u}`]: u,
-        [`k-picker-${h}`]: h,
-        [`k-rounded-${de.roundedMap[D] || D}`]: D,
+        [`k-picker-${S}`]: S,
+        [`k-rounded-${de.roundedMap[x] || x}`]: x,
         "k-invalid": !Fe,
-        "k-disabled": x,
+        "k-disabled": L,
         "k-focus": he,
         className: be
       }),
       ref: s,
-      tabIndex: Ze(Ee, x),
-      title: r.title,
+      tabIndex: Ze(Ee, L),
+      title: o.title,
       onKeyDown: Ie,
       onFocus: De,
       onBlur: Le,
@@ -325,36 +326,36 @@ const it = {
         open: g,
         onOpen: ze,
         popupAnchor: s.current || void 0,
-        popupSettings: { id: `k-colorpicker-popup-${(oe = r.id) != null ? oe : 0}`, ...m },
+        popupSettings: { id: `k-colorpicker-popup-${(oe = o.id) != null ? oe : 0}`, ...m },
         input: /* @__PURE__ */ t.createElement("span", { onClick: Be, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
           "span",
           {
-            className: $("k-value-icon", "k-color-preview", {
-              "k-no-color": !o,
-              "k-icon-color-preview": L || N || S
+            className: G("k-value-icon", "k-color-preview", {
+              "k-no-color": !l,
+              "k-icon-color-preview": N || O || T
             })
           },
-          S && /* @__PURE__ */ t.createElement("span", { className: $("k-color-preview-icon", S) }),
-          !S && (L || N) && /* @__PURE__ */ t.createElement(je, { name: L, icon: N }),
-          /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: o } })
+          T && /* @__PURE__ */ t.createElement("span", { className: G("k-color-preview-icon", T) }),
+          !T && (N || O) && /* @__PURE__ */ t.createElement(je, { name: N, icon: O }),
+          /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
         )),
         button: /* @__PURE__ */ t.createElement(
           nt,
           {
             tabIndex: -1,
             type: "button",
-            onClick: () => l(!g),
+            onClick: () => r(!g),
             className: "k-input-button",
             rounded: null,
             icon: "caret-alt-down",
             svgIcon: at,
-            "aria-label": E.toLanguageString(
+            "aria-label": b.toLanguageString(
               ve,
-              z[ve]
+              B[ve]
             )
           }
         ),
-        content: W(!1),
+        content: $(!1),
         _mobileMode: Ae,
         _actionSheet: Ne()
       }

package/colors/FlatColorPicker.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 J=require("react"),o=require("prop-types"),r=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),b=require("@progress/kendo-svg-icons"),Q=require("./ColorPalette.js"),U=require("./ColorGradient.js"),W=require("../package-metadata.js"),X=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function Y(e){const h=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const v in e)if(v!=="default"){const f=Object.getOwnPropertyDescriptor(e,v);Object.defineProperty(h,v,f.get?f:{enumerable:!0,get:()=>e[v]})}}return h.default=e,Object.freeze(h)}const t=Y(J),_=t.forwardRef((e,h)=>{r.validatePackage(W.packageMetadata);const v=t.useRef(null),f=t.useRef(null),A=t.useRef(null),{defaultValue:E,showButtons:B=!0,showPreview:O=!0,showClearButton:x=!0,view:P=e.views?void 0:"ColorGradient",views:d=P?void 0:["gradient","palette"],activeView:w="gradient",size:i="medium"}=e,[C,z]=t.useState((P||"ColorGradient")==="ColorGradient"),[g,M]=t.useState((d!=null?d:[])[0]==="gradient"&&w==="gradient"),[c,y]=t.useState(e.value||E||void 0),[k,I]=t.useState(e.value||E||void 0),G=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const m=X.useLocalization(),V=t.useCallback(()=>{v.current&&v.current.focus()},[v]);t.useImperativeHandle(v,()=>({element:f.current,focus:V,props:e,value:G}),[G,V,e]),t.useImperativeHandle(h,()=>v.current);const L=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&z(!C)},[C]),N=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&w==="gradient"?M(!g):a==="gradient"&&w==="palette"&&M(!0)},[w,g]),F=t.useCallback(a=>{var u;const n=E||void 0;if(y(n),I(n),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(n),e.onPreviewChange){const S={value:n,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,S)}},[E,e.onPreviewChange]),R=t.useCallback(a=>{var n;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(n=e._gradientSettings)!=null&&n._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),T=t.useCallback(a=>{if(c!==void 0&&I(c),e.onChange){const n={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,n)}},[c,e.onChange]),j=t.useCallback(()=>{y(k),e.setOpen&&e.setOpen(!1)},[k]),D=t.useCallback(a=>{if(y(k),e.onPreviewChange){const n={value:k,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,n)}},[k,e.onPreviewChange]),K=t.useCallback(a=>{var u,S;if((!a.relatedTarget||!((u=f.current)!=null&&u.contains(a.relatedTarget)))&&!((S=e._gradientSettings)!=null&&S._adaptive)&&(!B&&c!==void 0&&I(c),!B&&e.onChange)){const $={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,$)}},[c,B,e.onChange]),q=t.useMemo(()=>new r.Navigation({root:f,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,n,u)=>{r.getActiveElement(document)===a?r.disableNavigatableContainer(a):r.keepFocusInContainer(u,a)},Enter:(a,n,u)=>{r.getActiveElement(document)===a&&(r.focusFirstFocusableChild(a),r.enableNavigatableContainer(a))},Escape:(a,n,u)=>{r.getActiveElement(document)!==a&&(a.focus(),r.disableNavigatableContainer(a))}}}}),[]),H=t.useCallback(q.triggerKeyboardEvent.bind(q),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:e.style,ref:f,tabIndex:r.getTabIndex(e.tabIndex,e.disabled),className:r.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${r.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:K,onKeyDown:H},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:b.dropletSliderIcon,selected:g,onClick:()=>N("gradient")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:b.paletteIcon,selected:!g,onClick:()=>N("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:b.paletteIcon,selected:!g,onClick:()=>N("palette")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:b.dropletSliderIcon,selected:g,onClick:()=>N("gradient")})),P&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,selected:C,onClick:()=>L("ColorGradient"),icon:"droplet-slider",svgIcon:b.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,selected:!C,onClick:()=>L("ColorPalette"),icon:"palette",svgIcon:b.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},x&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:F,"aria-label":m.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:b.dropletSlashIcon}),O&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:r.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":G===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:r.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":k===void 0}),onClick:D},t.createElement("span",{className:"k-color-preview-mask",style:{background:k||void 0}}))))),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(P&&C||d&&g)&&t.createElement(U.ColorGradient,{ref:A,role:"none",ariaLabel:void 0,value:c,onChange:R,opacity:e.opacity,format:e.format,size:i,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0}),(P&&!C||d&&!g)&&t.createElement(Q.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:R,size:i})),B&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end k-actions-horizontal"},t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",size:i,onClick:j},l.messages[l.flatColorPickerCancelBtn]),t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",size:i,onClick:T},l.messages[l.flatColorPickerApplyBtn])))}),Z={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf([null,"small","medium","large"])};_.displayName="KendoFlatColorPicker";_.propTypes=Z;exports.FlatColorPicker=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),o=require("prop-types"),r=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),b=require("@progress/kendo-svg-icons"),Q=require("./ColorPalette.js"),U=require("./ColorGradient.js"),W=require("../package-metadata.js"),X=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function Y(e){const h=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const g in e)if(g!=="default"){const f=Object.getOwnPropertyDescriptor(e,g);Object.defineProperty(h,g,f.get?f:{enumerable:!0,get:()=>e[g]})}}return h.default=e,Object.freeze(h)}const t=Y(J),_=t.forwardRef((e,h)=>{r.validatePackage(W.packageMetadata);const g=t.useRef(null),f=t.useRef(null),A=t.useRef(null),{defaultValue:E,showButtons:B=!0,showPreview:O=!0,showClearButton:x=!0,view:P=e.views?void 0:"ColorGradient",views:d=P?void 0:["gradient","palette"],activeView:w="gradient",size:i="medium"}=e,[C,z]=t.useState((P||"ColorGradient")==="ColorGradient"),[v,M]=t.useState((d!=null?d:[])[0]==="gradient"&&w==="gradient"),[c,y]=t.useState(e.value||E||void 0),[k,I]=t.useState(e.value||E||void 0),G=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const m=X.useLocalization(),V=t.useCallback(()=>{g.current&&g.current.focus()},[g]);t.useImperativeHandle(g,()=>({element:f.current,focus:V,props:e,value:G}),[G,V,e]),t.useImperativeHandle(h,()=>g.current);const L=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&z(!C)},[C]),N=t.useCallback(a=>{a==="gradient"&&!v||a==="palette"&&v||a==="palette"&&w==="gradient"?M(!v):a==="gradient"&&w==="palette"&&M(!0)},[w,v]),F=t.useCallback(a=>{var u;const n=E||void 0;if(y(n),I(n),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(n),e.onPreviewChange){const S={value:n,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,S)}},[E,e.onPreviewChange]),R=t.useCallback(a=>{var n;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(n=e._gradientSettings)!=null&&n._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),T=t.useCallback(a=>{if(c!==void 0&&I(c),e.onChange){const n={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,n)}},[c,e.onChange]),j=t.useCallback(()=>{y(k),e.setOpen&&e.setOpen(!1)},[k]),D=t.useCallback(a=>{if(y(k),e.onPreviewChange){const n={value:k,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,n)}},[k,e.onPreviewChange]),K=t.useCallback(a=>{var u,S;if((!a.relatedTarget||!((u=f.current)!=null&&u.contains(a.relatedTarget)))&&!((S=e._gradientSettings)!=null&&S._adaptive)&&(!B&&c!==void 0&&I(c),!B&&e.onChange)){const $={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,$)}},[c,B,e.onChange]),q=t.useMemo(()=>new r.Navigation({root:f,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,n,u)=>{r.getActiveElement(document)===a?r.disableNavigatableContainer(a):r.keepFocusInContainer(u,a)},Enter:(a,n,u)=>{r.getActiveElement(document)===a&&(r.focusFirstFocusableChild(a),r.enableNavigatableContainer(a))},Escape:(a,n,u)=>{r.getActiveElement(document)!==a&&(a.focus(),r.disableNavigatableContainer(a))}}}}),[]),H=t.useCallback(q.triggerKeyboardEvent.bind(q),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:e.style,ref:f,tabIndex:r.getTabIndex(e.tabIndex,e.disabled),className:r.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${r.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:K,onKeyDown:H},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:b.dropletSliderIcon,selected:v,onClick:()=>N("gradient")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:b.paletteIcon,selected:!v,onClick:()=>N("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:b.paletteIcon,selected:!v,onClick:()=>N("palette")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:b.dropletSliderIcon,selected:v,onClick:()=>N("gradient")})),P&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,selected:C,onClick:()=>L("ColorGradient"),icon:"droplet-slider",svgIcon:b.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,selected:!C,onClick:()=>L("ColorPalette"),icon:"palette",svgIcon:b.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},x&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:F,"aria-label":m.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:b.dropletSlashIcon}),O&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:r.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":G===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:r.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":k===void 0}),onClick:D},t.createElement("span",{className:"k-color-preview-mask",style:{background:k||void 0}}))))),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(P&&C||d&&v)&&t.createElement(U.ColorGradient,{ref:A,role:"none",ariaLabel:void 0,value:c,onChange:R,opacity:e.opacity,format:e.format,size:i,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(P&&!C||d&&!v)&&t.createElement(Q.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:R,size:i})),B&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end k-actions-horizontal"},t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",size:i,onClick:j},l.messages[l.flatColorPickerCancelBtn]),t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",size:i,onClick:T},l.messages[l.flatColorPickerApplyBtn])))}),Z={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf([null,"small","medium","large"])};_.displayName="KendoFlatColorPicker";_.propTypes=Z;exports.FlatColorPicker=_;