@progress/kendo-react-inputs 8.2.0-develop.29 → 8.2.0-develop.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),l=require("prop-types"),g=require("@progress/kendo-react-common"),C=require("@progress/kendo-react-buttons"),E=require("@progress/kendo-svg-icons"),j=require("./ColorPalette.js"),z=require("./ColorGradient.js"),_=require("../package-metadata.js"),D=require("@progress/kendo-react-intl"),o=require("../messages/index.js");function H(e){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(k,r,c.get?c:{enumerable:!0,get:()=>e[r]})}}return k.default=e,Object.freeze(k)}const t=H(O),y=t.forwardRef((e,k)=>{g.validatePackage(_.packageMetadata);const r=t.useRef(null),c=t.useRef(null),S=t.useRef(null),{defaultValue:i,showButtons:m=!0,showPreview:G=!0,showClearButton:R=!0}=e,[u,q]=t.useState((e.view||"ColorGradient")==="ColorGradient"),[n,v]=t.useState(e.value||i||void 0),[s,f]=t.useState(e.value||i||void 0),b=e.value!==void 0?e.value:void 0;t.useEffect(()=>{v(e.value)},[e.value]);const h=D.useLocalization(),P=t.useCallback(()=>{r.current&&r.current.focus()},[r]);t.useImperativeHandle(r,()=>({element:c.current,focus:P,props:e,value:b}),[b,P,e]),t.useImperativeHandle(k,()=>r.current);const w=t.useCallback(a=>{(a==="ColorGradient"&&!u||a==="ColorPalette"&&u)&&q(!u)},[u]),L=t.useCallback(a=>{if(i?(v(i),f(i)):(v(void 0),f(void 0)),e.onPreviewChange){const d={value:i||void 0,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,d)}},[i,e.onPreviewChange]),B=t.useCallback(a=>{if(v(a.value),e.onPreviewChange){const d={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,d)}},[e.onPreviewChange]),x=t.useCallback(a=>{if(n!==void 0&&f(n),e.onChange){const d={value:n,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,d)}},[n,e.onChange]),F=t.useCallback(()=>{v(s)},[s]),M=t.useCallback(a=>{if(v(s),e.onPreviewChange){const d={value:s,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,d)}},[s,e.onPreviewChange]),N=t.useCallback(a=>{c.current&&!(a.nativeEvent.target instanceof HTMLInputElement)&&c.current.focus()},[c]),T=t.useCallback(a=>{var I;if((!a.relatedTarget||!((I=c.current)!=null&&I.contains(a.relatedTarget)))&&(!m&&n!==void 0&&f(n),!m&&e.onChange)){const V={value:n,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,V)}},[n,m,e.onChange]);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:c,tabIndex:g.getTabIndex(e.tabIndex,e.disabled),className:g.classNames("k-flatcolorpicker k-coloreditor",{"k-disabled":e.disabled},e.className),onBlur:T},t.createElement(t.Fragment,null,e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},t.createElement(C.ButtonGroup,{className:"k-button-group-flat"},t.createElement(C.Button,{type:"button","aria-label":h.toLanguageString(o.flatColorPickerColorGradientBtn,o.messages[o.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",selected:u,onClick:()=>w("ColorGradient"),icon:"droplet-slider",svgIcon:E.dropletSliderIcon}),t.createElement(C.Button,{type:"button","aria-label":h.toLanguageString(o.flatColorPickerColorPaletteBtn,o.messages[o.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",selected:!u,onClick:()=>w("ColorPalette"),icon:"palette",svgIcon:E.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},R&&t.createElement(C.Button,{type:"button",fillMode:"flat",onClick:L,"aria-label":h.toLanguageString(o.flatColorPickerClearBtn,o.messages[o.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:E.dropletSlashIcon}),G&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:g.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":b===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:n||void 0}})),t.createElement("span",{className:g.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":s===void 0}),onClick:M},t.createElement("span",{className:"k-color-preview-mask",style:{background:s||void 0}}))))),t.createElement("div",{className:"k-coloreditor-views k-vstack"},u?t.createElement(z.ColorGradient,{ref:S,role:"none",tabIndex:-1,ariaLabel:void 0,value:n,onChange:B,onFocus:N,opacity:e.opacity,format:e.format}):t.createElement(j.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:n,onChange:B,onFocus:N})),m&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end k-actions-horizontal"},t.createElement(C.Button,{type:"button",className:"k-coloreditor-cancel",onClick:F},o.messages[o.flatColorPickerCancelBtn]),t.createElement(C.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",onClick:x},o.messages[o.flatColorPickerApplyBtn]))))}),A={id:l.string,style:l.any,className:l.string,value:l.string,defaultValue:l.string,onPreviewChange:l.func,onChange:l.func,opacity:l.bool,format:l.any,tabIndex:l.number,ariaLabel:l.string,ariaLabelledBy:l.string,disabled:l.bool,view:l.any,header:l.any,showClearButton:l.bool,showPreview:l.bool,showButtons:l.bool};y.displayName="KendoFlatColorPicker";y.propTypes=A;exports.FlatColorPicker=y;
8
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),o=require("prop-types"),l=require("@progress/kendo-react-common"),g=require("@progress/kendo-react-buttons"),E=require("@progress/kendo-svg-icons"),j=require("./ColorPalette.js"),A=require("./ColorGradient.js"),D=require("../package-metadata.js"),z=require("@progress/kendo-react-intl"),n=require("../messages/index.js");function K(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const u=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(b,c,u.get?u:{enumerable:!0,get:()=>e[c]})}}return b.default=e,Object.freeze(b)}const a=K(O),P=a.forwardRef((e,b)=>{l.validatePackage(D.packageMetadata);const c=a.useRef(null),u=a.useRef(null),S=a.useRef(null),{defaultValue:s,showButtons:m=!0,showPreview:G=!0,showClearButton:R=!0}=e,[v,q]=a.useState((e.view||"ColorGradient")==="ColorGradient"),[r,C]=a.useState(e.value||s||void 0),[d,f]=a.useState(e.value||s||void 0),h=e.value!==void 0?e.value:void 0;a.useEffect(()=>{C(e.value)},[e.value]);const y=z.useLocalization(),w=a.useCallback(()=>{c.current&&c.current.focus()},[c]);a.useImperativeHandle(c,()=>({element:u.current,focus:w,props:e,value:h}),[h,w,e]),a.useImperativeHandle(b,()=>c.current);const B=a.useCallback(t=>{(t==="ColorGradient"&&!v||t==="ColorPalette"&&v)&&q(!v)},[v]),L=a.useCallback(t=>{if(s?(C(s),f(s)):(C(void 0),f(void 0)),e.onPreviewChange){const i={value:s||void 0,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onPreviewChange.call(void 0,i)}},[s,e.onPreviewChange]),N=a.useCallback(t=>{if(C(t.value),e.onPreviewChange){const i={value:t.value,nativeEvent:t.nativeEvent,syntheticEvent:t.syntheticEvent};e.onPreviewChange.call(void 0,i)}},[e.onPreviewChange]),_=a.useCallback(t=>{if(r!==void 0&&f(r),e.onChange){const i={value:r,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onChange.call(void 0,i)}},[r,e.onChange]),x=a.useCallback(()=>{C(d)},[d]),M=a.useCallback(t=>{if(C(d),e.onPreviewChange){const i={value:d,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onPreviewChange.call(void 0,i)}},[d,e.onPreviewChange]),T=a.useCallback(t=>{var k;if((!t.relatedTarget||!((k=u.current)!=null&&k.contains(t.relatedTarget)))&&(!m&&r!==void 0&&f(r),!m&&e.onChange)){const V={value:r,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onChange.call(void 0,V)}},[r,m,e.onChange]),I=a.useMemo(()=>new l.Navigation({root:u,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(t,i,k)=>{l.getActiveElement(document)===t?l.disableNavigatableContainer(t):l.keepFocusInContainer(k,t)},Enter:(t,i,k)=>{l.getActiveElement(document)===t&&(l.focusFirstFocusableChild(t),l.enableNavigatableContainer(t))},Escape:(t,i,k)=>{l.getActiveElement(document)!==t&&(t.focus(),l.disableNavigatableContainer(t))}}}}),[]),F=a.useCallback(I.triggerKeyboardEvent.bind(I),[]);return a.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:u,tabIndex:l.getTabIndex(e.tabIndex,e.disabled),className:l.classNames("k-flatcolorpicker k-coloreditor",{"k-disabled":e.disabled},e.className),onBlur:T,onKeyDown:F},e.header||a.createElement("div",{className:"k-coloreditor-header k-hstack"},a.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},a.createElement(g.ButtonGroup,{className:"k-button-group-flat"},a.createElement(g.Button,{type:"button","aria-label":y.toLanguageString(n.flatColorPickerColorGradientBtn,n.messages[n.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",selected:v,onClick:()=>B("ColorGradient"),icon:"droplet-slider",svgIcon:E.dropletSliderIcon}),a.createElement(g.Button,{type:"button","aria-label":y.toLanguageString(n.flatColorPickerColorPaletteBtn,n.messages[n.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",selected:!v,onClick:()=>B("ColorPalette"),icon:"palette",svgIcon:E.paletteIcon}))),a.createElement("div",{className:"k-spacer"}),a.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},R&&a.createElement(g.Button,{type:"button",fillMode:"flat",onClick:L,"aria-label":y.toLanguageString(n.flatColorPickerClearBtn,n.messages[n.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:E.dropletSlashIcon}),G&&a.createElement("div",{className:"k-coloreditor-preview k-vstack"},a.createElement("span",{className:l.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":h===void 0})},a.createElement("span",{className:"k-color-preview-mask",style:{background:r||void 0}})),a.createElement("span",{className:l.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":d===void 0}),onClick:M},a.createElement("span",{className:"k-color-preview-mask",style:{background:d||void 0}}))))),a.createElement("div",{className:"k-coloreditor-views k-vstack"},v?a.createElement(A.ColorGradient,{ref:S,role:"none",ariaLabel:void 0,value:r,onChange:N,opacity:e.opacity,format:e.format}):a.createElement(j.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:r,onChange:N})),m&&a.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end k-actions-horizontal"},a.createElement(g.Button,{type:"button",className:"k-coloreditor-cancel",onClick:x},n.messages[n.flatColorPickerCancelBtn]),a.createElement(g.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",onClick:_},n.messages[n.flatColorPickerApplyBtn])))}),H={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};P.displayName="KendoFlatColorPicker";P.propTypes=H;exports.FlatColorPicker=P;
@@ -7,110 +7,125 @@
7
7
  */
8
8
  "use client";
9
9
  import * as e from "react";
10
- import l from "prop-types";
11
- import { validatePackage as q, getTabIndex as D, classNames as b } from "@progress/kendo-react-common";
12
- import { ButtonGroup as K, Button as u } from "@progress/kendo-react-buttons";
13
- import { dropletSliderIcon as _, paletteIcon as j, dropletSlashIcon as J } from "@progress/kendo-svg-icons";
14
- import { ColorPalette as O } from "./ColorPalette.mjs";
15
- import { ColorGradient as Q } from "./ColorGradient.mjs";
16
- import { packageMetadata as U } from "../package-metadata.mjs";
17
- import { useLocalization as W } from "@progress/kendo-react-intl";
18
- import { flatColorPickerColorGradientBtn as N, messages as m, flatColorPickerColorPaletteBtn as B, flatColorPickerClearBtn as I, flatColorPickerCancelBtn as X, flatColorPickerApplyBtn as Y } from "../messages/index.mjs";
19
- const L = e.forwardRef((a, G) => {
20
- q(U);
21
- const v = e.useRef(null), s = e.useRef(null), S = e.useRef(null), { defaultValue: n, showButtons: C = !0, showPreview: x = !0, showClearButton: R = !0 } = a, [c, F] = e.useState((a.view || "ColorGradient") === "ColorGradient"), [o, d] = e.useState(a.value || n || void 0), [r, k] = e.useState(a.value || n || void 0), f = a.value !== void 0 ? a.value : void 0;
10
+ import o from "prop-types";
11
+ import { validatePackage as q, Navigation as j, getActiveElement as h, disableNavigatableContainer as B, keepFocusInContainer as J, focusFirstFocusableChild as O, enableNavigatableContainer as Q, getTabIndex as U, classNames as E } from "@progress/kendo-react-common";
12
+ import { ButtonGroup as W, Button as u } from "@progress/kendo-react-buttons";
13
+ import { dropletSliderIcon as X, paletteIcon as Y, dropletSlashIcon as Z } from "@progress/kendo-svg-icons";
14
+ import { ColorPalette as $ } from "./ColorPalette.mjs";
15
+ import { ColorGradient as p } from "./ColorGradient.mjs";
16
+ import { packageMetadata as ee } from "../package-metadata.mjs";
17
+ import { useLocalization as ae } from "@progress/kendo-react-intl";
18
+ import { flatColorPickerColorGradientBtn as I, messages as m, flatColorPickerColorPaletteBtn as G, flatColorPickerClearBtn as L, flatColorPickerCancelBtn as te, flatColorPickerApplyBtn as oe } from "../messages/index.mjs";
19
+ const S = e.forwardRef((a, x) => {
20
+ q(ee);
21
+ const v = e.useRef(null), C = e.useRef(null), R = e.useRef(null), { defaultValue: r, showButtons: k = !0, showPreview: V = !0, showClearButton: F = !0 } = a, [c, T] = e.useState((a.view || "ColorGradient") === "ColorGradient"), [l, s] = e.useState(a.value || r || void 0), [i, b] = e.useState(a.value || r || void 0), f = a.value !== void 0 ? a.value : void 0;
22
22
  e.useEffect(() => {
23
- d(a.value);
23
+ s(a.value);
24
24
  }, [a.value]);
25
- const g = W(), h = e.useCallback(
25
+ const g = ae(), y = e.useCallback(
26
26
  () => {
27
27
  v.current && v.current.focus();
28
28
  },
29
29
  [v]
30
30
  );
31
31
  e.useImperativeHandle(v, () => ({
32
- element: s.current,
33
- focus: h,
32
+ element: C.current,
33
+ focus: y,
34
34
  props: a,
35
35
  value: f
36
- }), [f, h, a]), e.useImperativeHandle(G, () => v.current);
37
- const E = e.useCallback(
36
+ }), [f, y, a]), e.useImperativeHandle(x, () => v.current);
37
+ const w = e.useCallback(
38
38
  (t) => {
39
- (t === "ColorGradient" && !c || t === "ColorPalette" && c) && F(!c);
39
+ (t === "ColorGradient" && !c || t === "ColorPalette" && c) && T(!c);
40
40
  },
41
41
  [c]
42
- ), V = e.useCallback(
42
+ ), _ = e.useCallback(
43
43
  (t) => {
44
- if (n ? (d(n), k(n)) : (d(void 0), k(void 0)), a.onPreviewChange) {
45
- const i = {
46
- value: n || void 0,
44
+ if (r ? (s(r), b(r)) : (s(void 0), b(void 0)), a.onPreviewChange) {
45
+ const n = {
46
+ value: r || void 0,
47
47
  nativeEvent: t.nativeEvent,
48
48
  syntheticEvent: t
49
49
  };
50
- a.onPreviewChange.call(void 0, i);
50
+ a.onPreviewChange.call(void 0, n);
51
51
  }
52
52
  },
53
- [n, a.onPreviewChange]
54
- ), y = e.useCallback(
53
+ [r, a.onPreviewChange]
54
+ ), P = e.useCallback(
55
55
  (t) => {
56
- if (d(t.value), a.onPreviewChange) {
57
- const i = {
56
+ if (s(t.value), a.onPreviewChange) {
57
+ const n = {
58
58
  value: t.value,
59
59
  nativeEvent: t.nativeEvent,
60
60
  syntheticEvent: t.syntheticEvent
61
61
  };
62
- a.onPreviewChange.call(void 0, i);
62
+ a.onPreviewChange.call(void 0, n);
63
63
  }
64
64
  },
65
65
  [a.onPreviewChange]
66
- ), T = e.useCallback(
66
+ ), M = e.useCallback(
67
67
  (t) => {
68
- if (o !== void 0 && k(o), a.onChange) {
69
- const i = {
70
- value: o,
68
+ if (l !== void 0 && b(l), a.onChange) {
69
+ const n = {
70
+ value: l,
71
71
  nativeEvent: t.nativeEvent,
72
72
  syntheticEvent: t
73
73
  };
74
- a.onChange.call(void 0, i);
74
+ a.onChange.call(void 0, n);
75
75
  }
76
76
  },
77
- [o, a.onChange]
78
- ), M = e.useCallback(
77
+ [l, a.onChange]
78
+ ), K = e.useCallback(
79
79
  () => {
80
- d(r);
80
+ s(i);
81
81
  },
82
- [r]
82
+ [i]
83
83
  ), z = e.useCallback(
84
84
  (t) => {
85
- if (d(r), a.onPreviewChange) {
86
- const i = {
87
- value: r,
85
+ if (s(i), a.onPreviewChange) {
86
+ const n = {
87
+ value: i,
88
88
  nativeEvent: t.nativeEvent,
89
89
  syntheticEvent: t
90
90
  };
91
- a.onPreviewChange.call(void 0, i);
91
+ a.onPreviewChange.call(void 0, n);
92
92
  }
93
93
  },
94
- [r, a.onPreviewChange]
95
- ), w = e.useCallback(
96
- (t) => {
97
- s.current && !(t.nativeEvent.target instanceof HTMLInputElement) && s.current.focus();
98
- },
99
- [s]
100
- ), H = e.useCallback(
94
+ [i, a.onPreviewChange]
95
+ ), A = e.useCallback(
101
96
  (t) => {
102
- var P;
103
- if ((!t.relatedTarget || !((P = s.current) != null && P.contains(t.relatedTarget))) && (!C && o !== void 0 && k(o), !C && a.onChange)) {
104
- const A = {
105
- value: o,
97
+ var d;
98
+ if ((!t.relatedTarget || !((d = C.current) != null && d.contains(t.relatedTarget))) && (!k && l !== void 0 && b(l), !k && a.onChange)) {
99
+ const H = {
100
+ value: l,
106
101
  nativeEvent: t.nativeEvent,
107
102
  syntheticEvent: t
108
103
  };
109
- a.onChange.call(void 0, A);
104
+ a.onChange.call(void 0, H);
110
105
  }
111
106
  },
112
- [o, C, a.onChange]
113
- );
107
+ [l, k, a.onChange]
108
+ ), N = e.useMemo(
109
+ () => new j({
110
+ root: C,
111
+ selectors: [".k-coloreditor"],
112
+ tabIndex: 0,
113
+ keyboardEvents: {
114
+ keydown: {
115
+ Tab: (t, n, d) => {
116
+ h(document) === t ? B(t) : J(d, t);
117
+ },
118
+ Enter: (t, n, d) => {
119
+ h(document) === t && (O(t), Q(t));
120
+ },
121
+ Escape: (t, n, d) => {
122
+ h(document) !== t && (t.focus(), B(t));
123
+ }
124
+ }
125
+ }
126
+ }),
127
+ []
128
+ ), D = e.useCallback(N.triggerKeyboardEvent.bind(N), []);
114
129
  return /* @__PURE__ */ e.createElement(
115
130
  "div",
116
131
  {
@@ -120,97 +135,98 @@ const L = e.forwardRef((a, G) => {
120
135
  "aria-labelledby": a.ariaLabelledBy,
121
136
  "aria-disabled": a.disabled ? "true" : void 0,
122
137
  style: a.style,
123
- ref: s,
124
- tabIndex: D(a.tabIndex, a.disabled),
125
- className: b(
138
+ ref: C,
139
+ tabIndex: U(a.tabIndex, a.disabled),
140
+ className: E(
126
141
  "k-flatcolorpicker k-coloreditor",
127
142
  {
128
143
  "k-disabled": a.disabled
129
144
  },
130
145
  a.className
131
146
  ),
132
- onBlur: H
147
+ onBlur: A,
148
+ onKeyDown: D
133
149
  },
134
- /* @__PURE__ */ e.createElement(e.Fragment, null, a.header || /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, /* @__PURE__ */ e.createElement(K, { className: "k-button-group-flat" }, /* @__PURE__ */ e.createElement(
150
+ a.header || /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, /* @__PURE__ */ e.createElement(W, { className: "k-button-group-flat" }, /* @__PURE__ */ e.createElement(
135
151
  u,
136
152
  {
137
153
  type: "button",
138
154
  "aria-label": g.toLanguageString(
139
- N,
140
- m[N]
155
+ I,
156
+ m[I]
141
157
  ),
142
158
  togglable: !0,
143
159
  fillMode: "flat",
144
160
  selected: c,
145
- onClick: () => E("ColorGradient"),
161
+ onClick: () => w("ColorGradient"),
146
162
  icon: "droplet-slider",
147
- svgIcon: _
163
+ svgIcon: X
148
164
  }
149
165
  ), /* @__PURE__ */ e.createElement(
150
166
  u,
151
167
  {
152
168
  type: "button",
153
169
  "aria-label": g.toLanguageString(
154
- B,
155
- m[B]
170
+ G,
171
+ m[G]
156
172
  ),
157
173
  togglable: !0,
158
174
  fillMode: "flat",
159
175
  selected: !c,
160
- onClick: () => E("ColorPalette"),
176
+ onClick: () => w("ColorPalette"),
161
177
  icon: "palette",
162
- svgIcon: j
178
+ svgIcon: Y
163
179
  }
164
- ))), /* @__PURE__ */ e.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, R && /* @__PURE__ */ e.createElement(
180
+ ))), /* @__PURE__ */ e.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, F && /* @__PURE__ */ e.createElement(
165
181
  u,
166
182
  {
167
183
  type: "button",
168
184
  fillMode: "flat",
169
- onClick: V,
185
+ onClick: _,
170
186
  "aria-label": g.toLanguageString(
171
- I,
172
- m[I]
187
+ L,
188
+ m[L]
173
189
  ),
174
190
  icon: "droplet-slash",
175
- svgIcon: J
191
+ svgIcon: Z
176
192
  }
177
- ), x && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement("span", { className: b("k-coloreditor-preview-color", "k-color-preview", { "k-no-color": f === void 0 }) }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: o || void 0 } })), /* @__PURE__ */ e.createElement("span", { className: b("k-coloreditor-current-color", "k-color-preview", { "k-no-color": r === void 0 }), onClick: z }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: r || void 0 } }))))), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-views k-vstack" }, c ? /* @__PURE__ */ e.createElement(
178
- Q,
193
+ ), V && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement("span", { className: E("k-coloreditor-preview-color", "k-color-preview", { "k-no-color": f === void 0 }) }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: l || void 0 } })), /* @__PURE__ */ e.createElement("span", { className: E("k-coloreditor-current-color", "k-color-preview", { "k-no-color": i === void 0 }), onClick: z }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: i || void 0 } }))))),
194
+ /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-views k-vstack" }, c ? /* @__PURE__ */ e.createElement(
195
+ p,
179
196
  {
180
- ref: S,
197
+ ref: R,
181
198
  role: "none",
182
- tabIndex: -1,
183
199
  ariaLabel: void 0,
184
- value: o,
185
- onChange: y,
186
- onFocus: w,
200
+ value: l,
201
+ onChange: P,
187
202
  opacity: a.opacity,
188
203
  format: a.format
189
204
  }
190
- ) : /* @__PURE__ */ e.createElement(O, { ariaDisabled: !0, ariaLabelledBy: "required_label", value: o, onChange: y, onFocus: w })), C && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ e.createElement(u, { type: "button", className: "k-coloreditor-cancel", onClick: M }, m[X]), /* @__PURE__ */ e.createElement(u, { type: "button", themeColor: "primary", className: "k-coloreditor-apply", onClick: T }, m[Y])))
205
+ ) : /* @__PURE__ */ e.createElement($, { ariaDisabled: !0, ariaLabelledBy: "required_label", value: l, onChange: P })),
206
+ k && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ e.createElement(u, { type: "button", className: "k-coloreditor-cancel", onClick: K }, m[te]), /* @__PURE__ */ e.createElement(u, { type: "button", themeColor: "primary", className: "k-coloreditor-apply", onClick: M }, m[oe]))
191
207
  );
192
- }), Z = {
193
- id: l.string,
194
- style: l.any,
195
- className: l.string,
196
- value: l.string,
197
- defaultValue: l.string,
198
- onPreviewChange: l.func,
199
- onChange: l.func,
200
- opacity: l.bool,
201
- format: l.any,
202
- tabIndex: l.number,
203
- ariaLabel: l.string,
204
- ariaLabelledBy: l.string,
205
- disabled: l.bool,
206
- view: l.any,
207
- header: l.any,
208
- showClearButton: l.bool,
209
- showPreview: l.bool,
210
- showButtons: l.bool
208
+ }), le = {
209
+ id: o.string,
210
+ style: o.any,
211
+ className: o.string,
212
+ value: o.string,
213
+ defaultValue: o.string,
214
+ onPreviewChange: o.func,
215
+ onChange: o.func,
216
+ opacity: o.bool,
217
+ format: o.any,
218
+ tabIndex: o.number,
219
+ ariaLabel: o.string,
220
+ ariaLabelledBy: o.string,
221
+ disabled: o.bool,
222
+ view: o.any,
223
+ header: o.any,
224
+ showClearButton: o.bool,
225
+ showPreview: o.bool,
226
+ showButtons: o.bool
211
227
  };
212
- L.displayName = "KendoFlatColorPicker";
213
- L.propTypes = Z;
228
+ S.displayName = "KendoFlatColorPicker";
229
+ S.propTypes = le;
214
230
  export {
215
- L as FlatColorPicker
231
+ S as FlatColorPicker
216
232
  };