@progress/kendo-react-inputs 14.5.0-develop.1 → 14.5.0-develop.10

package/colors/ColorPicker.mjs

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

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