@kong/kongponents 9.46.3-pr.2976.4008863.0 → 9.46.3-pr.2980.0e7b739.0

package/dist/kongponents.es96.js

@@ -1,16 +1,16 @@
-import { defineComponent as ae, ref as c, computed as R, reactive as le, useTemplateRef as ie, watch as T, createElementBlock as u, openBlock as r, normalizeStyle as j, normalizeClass as x, createVNode as ne, unref as D, withCtx as f, createElementVNode as v, createBlock as y, createCommentVNode as g, createTextVNode as M, toDisplayString as A, isRef as re, Fragment as q, renderList as F } from "vue";
+import { defineComponent as ae, ref as c, computed as R, reactive as le, useTemplateRef as ie, watch as $, createElementBlock as u, openBlock as d, normalizeStyle as q, normalizeClass as N, createVNode as ne, unref as T, withCtx as f, createElementVNode as v, createBlock as y, createCommentVNode as g, createTextVNode as M, toDisplayString as A, isRef as de, Fragment as F, renderList as G } from "vue";
 import I from "./kongponents.es33.js";
-import de from "./kongponents.es53.js";
-import se from "./kongponents.es56.js";
+import re from "./kongponents.es53.js";
+import oe from "./kongponents.es56.js";
 /* empty css                  */
 import "./kongponents.es5.js";
-import { DateTimePickerModes as oe, ModeArrayCustom as me, ModeArrayRelative as ce, ModeDateOnly as ue } from "./kongponents.es10.js";
-import fe from "./kongponents.es201.js";
-import { KUI_SPACE_40 as ve, KUI_ICON_SIZE_40 as ye, KUI_COLOR_TEXT_NEUTRAL as ge } from "./kongponents.es177.js";
-import { normalizeSize as pe } from "./kongponents.es193.js";
-import be from "./kongponents.es202.js";
-import U from "./kongponents.es203.js";
-import C from "./kongponents.es204.js";
+import { DateTimePickerModes as se, ModeArrayCustom as me, ModeArrayRelative as ce, ModeDateOnly as ue } from "./kongponents.es10.js";
+import fe from "./kongponents.es187.js";
+import { KUI_SPACE_40 as ve, KUI_ICON_SIZE_40 as ye, KUI_COLOR_TEXT_NEUTRAL as ge } from "./kongponents.es178.js";
+import { normalizeSize as pe } from "./kongponents.es171.js";
+import be from "./kongponents.es188.js";
+import U from "./kongponents.es189.js";
+import C from "./kongponents.es190.js";
 const ke = ["tabindex"], Re = ["innerHTML"], Te = {
   key: 1,
   class: "range-display"
@@ -35,102 +35,99 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
     disabled: { type: Boolean },
     readonly: { type: Boolean },
     popoverPlacement: { default: "bottom-start" },
-    invalidTimeErrorMessage: { default: "Start time cannot exceed end time." },
-    timeGranularity: { default: "minutely" }
+    invalidTimeErrorMessage: { default: "Start time cannot exceed end time." }
   },
   emits: ["change", "update:modelValue"],
   setup(a, { emit: J }) {
-    var V, X;
-    const m = J, L = c(null), w = R(() => a.mode !== oe.Relative), s = R(() => me.includes(a.mode) && !a.range), o = R(() => a.timePeriods.length > 0), p = R(() => t.tabName === "custom" || !o.value), P = c(!0), B = c(!1), W = c(0), K = {
+    var X, j;
+    const m = J, L = c(null), x = R(() => a.mode !== se.Relative), o = R(() => me.includes(a.mode) && !a.range), s = R(() => a.timePeriods.length > 0), p = R(() => t.tabName === "custom" || !s.value), D = c(!0), w = c(!1), W = c(0), B = {
       start: null,
       end: null
-    }, h = c(a.modelValue.start || null), b = c(a.modelValue || K), O = s.value ? h : b, S = ie("calendarWrapperRef"), G = R(() => ({
+    }, P = c(a.modelValue.start || null), b = c(a.modelValue || B), K = o.value ? P : b, h = ie("calendarWrapperRef"), Z = R(() => ({
       width: pe(a.width)
-    })), z = Intl.DateTimeFormat().resolvedOptions().timeZone, t = le({
+    })), O = Intl.DateTimeFormat().resolvedOptions().timeZone, t = le({
       abbreviatedDisplay: a.placeholder,
       fullRangeDisplay: "",
       popoverOpen: !1,
       selectedRange: { start: /* @__PURE__ */ new Date(), end: /* @__PURE__ */ new Date() },
       previouslySelectedRange: { start: /* @__PURE__ */ new Date(), end: /* @__PURE__ */ new Date() },
-      selectedTimeframe: (V = a.timePeriods[0]) == null ? void 0 : V.values[0],
-      previouslySelectedTimeframe: (X = a.timePeriods[0]) == null ? void 0 : X.values[0],
+      selectedTimeframe: (X = a.timePeriods[0]) == null ? void 0 : X.values[0],
+      previouslySelectedTimeframe: (j = a.timePeriods[0]) == null ? void 0 : j.values[0],
       tabName: "relative"
-    }), $ = (e) => {
+    }), S = (e) => {
       if (!e) return;
-      const l = s.value ? !e.start : !e.start || !e.end, i = (e == null ? void 0 : e.start) || /* @__PURE__ */ new Date(), d = (e == null ? void 0 : e.end) || null;
-      P.value = !!l, !s.value && e && e.start && e.end ? (b.value.start = i, b.value.end = d) : e && e.start && (h.value = i), t.selectedRange = t.previouslySelectedRange = {
+      const l = o.value ? !e.start : !e.start || !e.end, i = (e == null ? void 0 : e.start) || /* @__PURE__ */ new Date(), r = (e == null ? void 0 : e.end) || null;
+      D.value = !!l, !o.value && e && e.start && e.end ? (b.value.start = i, b.value.end = r) : e && e.start && (P.value = i), t.selectedRange = t.previouslySelectedRange = {
         start: i,
-        end: d
+        end: r
       };
-    }, E = (e, l = !1) => {
+    }, z = (e, l = !1) => {
       if (t.selectedTimeframe = t.previouslySelectedTimeframe = e, t.selectedRange = {
         timePeriodsKey: t.selectedTimeframe.key
       }, t.selectedTimeframe.start && t.selectedTimeframe.end) {
-        const i = new Date(t.selectedTimeframe.start()), d = new Date(t.selectedTimeframe.end());
-        t.fullRangeDisplay = Z({ start: i, end: d }, !1), t.selectedRange.start = i, t.selectedRange.end = d;
+        const i = new Date(t.selectedTimeframe.start()), r = new Date(t.selectedTimeframe.end());
+        t.fullRangeDisplay = H({ start: i, end: r }, !1), t.selectedRange.start = i, t.selectedRange.end = r;
       } else
         t.fullRangeDisplay = "";
-      P.value = !1, l && H();
+      D.value = !1, l && V();
     }, Q = () => {
       var e;
-      b.value = K, h.value = null, t.abbreviatedDisplay = a.placeholder, t.fullRangeDisplay = "", o.value && (t.selectedTimeframe = (e = a.timePeriods[0]) == null ? void 0 : e.values[0]), t.selectedRange = t.previouslySelectedRange = K, m("change", t.selectedRange), m("update:modelValue", t.selectedRange);
-    }, Z = (e, l) => {
-      const { start: i, end: d } = e;
-      let n = a.timeGranularity === "secondly" ? "PP hh:mm:ss a" : "PP hh:mm a";
-      const k = U(i, z, "(z)");
-      return !w.value && o.value ? n = "PP hh:mm a" : ue.includes(a.mode) && (n = "PP"), s.value ? `${C(i, n)} ${k}` : l ? `<div>${C(i, n)} -&nbsp;</div><div>${U(d, z, n)} ${k}</div>` : `${C(i, n)} - ${U(d, z, n)} ${k}`;
-    }, H = async () => {
+      b.value = B, P.value = null, t.abbreviatedDisplay = a.placeholder, t.fullRangeDisplay = "", s.value && (t.selectedTimeframe = (e = a.timePeriods[0]) == null ? void 0 : e.values[0]), t.selectedRange = t.previouslySelectedRange = B, m("change", t.selectedRange), m("update:modelValue", t.selectedRange);
+    }, H = (e, l) => {
+      const { start: i, end: r } = e;
+      let n = "PP hh:mm a";
+      const k = U(i, O, "(z)");
+      return !x.value && s.value ? n = "PP hh:mm a" : ue.includes(a.mode) && (n = "PP"), o.value ? `${C(i, n)} ${k}` : l ? `<div>${C(i, n)} -&nbsp;</div><div>${U(r, O, n)} ${k}</div>` : `${C(i, n)} - ${U(r, O, n)} ${k}`;
+    }, V = async () => {
       var e;
-      s.value ? t.selectedRange.start && (m("change", { start: t.selectedRange.start, end: null }), m("update:modelValue", { start: t.selectedRange.start, end: null })) : (m("change", t.selectedRange), m("update:modelValue", t.selectedRange)), (e = L.value) == null || e.hidePopover(), N();
-    }, N = () => {
+      o.value ? t.selectedRange.start && (m("change", { start: t.selectedRange.start, end: null }), m("update:modelValue", { start: t.selectedRange.start, end: null })) : (m("change", t.selectedRange), m("update:modelValue", t.selectedRange)), (e = L.value) == null || e.hidePopover(), E();
+    }, E = () => {
       var e;
-      p.value && ((e = t.selectedRange) != null && e.start) ? t.abbreviatedDisplay = Z(t.selectedRange, !0) : o.value && !p.value && (t.abbreviatedDisplay = t.selectedTimeframe.display);
+      p.value && ((e = t.selectedRange) != null && e.start) ? t.abbreviatedDisplay = H(t.selectedRange, !0) : s.value && !p.value && (t.abbreviatedDisplay = t.selectedTimeframe.display);
     }, Y = (e) => e.charAt(0).toUpperCase() + e.slice(1), _ = (e) => t.selectedTimeframe.key === e.key ? "primary" : "secondary";
-    T(h, (e, l) => {
-      e !== void 0 && e !== l && $({ start: e, end: null });
-    }, { immediate: !0 }), T(b, (e, l) => {
-      e !== void 0 && e !== l && $(e);
-    }, { immediate: !0 }), T(() => t.tabName, (e, l) => {
-      l !== void 0 && e === "relative" ? E(t.previouslySelectedTimeframe) : l !== void 0 && e === "custom" && $(t.previouslySelectedRange);
-    }), T(() => a.modelValue, () => {
+    $(P, (e, l) => {
+      e !== void 0 && e !== l && S({ start: e, end: null });
+    }, { immediate: !0 }), $(b, (e, l) => {
+      e !== void 0 && e !== l && S(e);
+    }, { immediate: !0 }), $(() => t.tabName, (e, l) => {
+      l !== void 0 && e === "relative" ? z(t.previouslySelectedTimeframe) : l !== void 0 && e === "custom" && S(t.previouslySelectedRange);
+    }), $(() => a.modelValue, () => {
       if (ce.includes(a.mode) && a.modelValue.timePeriodsKey) {
-        t.tabName = "relative", P.value = !1;
+        t.tabName = "relative", D.value = !1;
         for (const e of a.timePeriods) {
           const l = e.values.find((i) => i.key === a.modelValue.timePeriodsKey);
           if (l) {
-            E(l), N();
+            z(l), E();
             break;
           }
         }
       } else
-        t.tabName = "custom", $(a.modelValue), (a.modelValue.start && a.modelValue.end || s.value && a.modelValue.start) && N();
+        t.tabName = "custom", S(a.modelValue), (a.modelValue.start && a.modelValue.end || o.value && a.modelValue.start) && E();
       W.value++;
-    }, { immediate: !0 }), T(() => a.timeGranularity, () => {
-      N();
-    });
+    }, { immediate: !0 });
     const ee = () => {
-      t.popoverOpen = !1, S.value && S.value.resetTime();
+      t.popoverOpen = !1, h.value && h.value.resetTime();
     }, te = () => {
-      t.popoverOpen = !0, S.value && S.value.initTimeInputs();
+      t.popoverOpen = !0, h.value && h.value.initTimeInputs();
     };
-    return (e, l) => (r(), u("div", {
-      class: x(["k-datetime-picker", { "set-min-width": o.value }]),
-      style: j(G.value)
+    return (e, l) => (d(), u("div", {
+      class: N(["k-datetime-picker", { "set-min-width": s.value }]),
+      style: q(Z.value)
     }, [
-      ne(de, {
+      ne(re, {
         ref_key: "kPop",
         ref: L,
         disabled: a.disabled || a.readonly,
         "hide-caret": "",
         "hide-close-icon": "",
-        offset: D(ve),
+        offset: T(ve),
         placement: a.popoverPlacement,
         width: "auto",
         onClose: ee,
         onOpen: te
       }, {
         content: f(() => [
-          o.value && w.value ? (r(), y(se, {
+          s.value && x.value ? (d(), y(oe, {
             key: 0,
             modelValue: t.tabName,
             "onUpdate:modelValue": l[0] || (l[0] = (i) => t.tabName = i),
@@ -142,33 +139,32 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
             ],
             onClick: l[1] || (l[1] = (i) => t.tabName = i)
           }, null, 8, ["modelValue"])) : g("", !0),
-          !p.value && t.fullRangeDisplay ? (r(), u("p", Te, A(t.fullRangeDisplay), 1)) : g("", !0),
-          w.value && p.value ? (r(), y(be, {
+          !p.value && t.fullRangeDisplay ? (d(), u("p", Te, A(t.fullRangeDisplay), 1)) : g("", !0),
+          x.value && p.value ? (d(), y(be, {
             key: W.value,
             ref: "calendarWrapperRef",
-            modelValue: D(O),
-            "onUpdate:modelValue": l[2] || (l[2] = (i) => re(O) ? O.value = i : null),
-            error: B.value,
-            "onUpdate:error": l[3] || (l[3] = (i) => B.value = i),
+            modelValue: T(K),
+            "onUpdate:modelValue": l[2] || (l[2] = (i) => de(K) ? K.value = i : null),
+            error: w.value,
+            "onUpdate:error": l[3] || (l[3] = (i) => w.value = i),
             "error-message": a.invalidTimeErrorMessage,
-            "is-range": !s.value,
+            "is-range": !o.value,
             "k-date-picker-mode": a.mode,
             "max-date": a.maxDate,
-            "min-date": a.minDate,
-            "time-granularity": a.timeGranularity
-          }, null, 8, ["modelValue", "error", "error-message", "is-range", "k-date-picker-mode", "max-date", "min-date", "time-granularity"])) : o.value && !s.value ? (r(), u("div", De, [
-            (r(!0), u(q, null, F(a.timePeriods, (i, d) => (r(), u("div", {
-              key: `section-${String(i.section || d)}`,
+            "min-date": a.minDate
+          }, null, 8, ["modelValue", "error", "error-message", "is-range", "k-date-picker-mode", "max-date", "min-date"])) : s.value && !o.value ? (d(), u("div", De, [
+            (d(!0), u(F, null, G(a.timePeriods, (i, r) => (d(), u("div", {
+              key: `section-${String(i.section || r)}`,
               class: "timeframe-section"
             }, [
               v("div", Pe, A(i.section), 1),
               v("div", he, [
-                (r(!0), u(q, null, F(i.values, (n, k) => (r(), y(I, {
+                (d(!0), u(F, null, G(i.values, (n, k) => (d(), y(I, {
                   key: `time-${k}`,
                   appearance: _(n),
                   class: "timeframe-button",
                   "data-testid": `select-timeframe-${n.key}`,
-                  onClick: ($e) => E(n, !0)
+                  onClick: ($e) => z(n, !0)
                 }, {
                   default: f(() => [
                     M(A(Y(n.timeframeText)), 1)
@@ -181,7 +177,7 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
         ]),
         footer: f(() => [
           v("div", Se, [
-            a.clearButton ? (r(), y(I, {
+            a.clearButton ? (d(), y(I, {
               key: 0,
               appearance: "tertiary",
               class: "action-button",
@@ -193,13 +189,13 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
               ])]),
               _: 1
             })) : g("", !0),
-            p.value ? (r(), y(I, {
+            p.value ? (d(), y(I, {
               key: 1,
               appearance: "tertiary",
               class: "action-button",
               "data-testid": "datetime-picker-submit",
-              disabled: P.value || B.value,
-              onClick: l[5] || (l[5] = (i) => H())
+              disabled: D.value || w.value,
+              onClick: l[5] || (l[5] = (i) => V())
             }, {
               default: f(() => [...l[7] || (l[7] = [
                 M(" Apply ", -1)
@@ -210,27 +206,27 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
         ]),
         default: f(() => [
           v("div", {
-            class: x(["datetime-picker-trigger-wrapper", { disabled: a.disabled }])
+            class: N(["datetime-picker-trigger-wrapper", { disabled: a.disabled }])
           }, [
             v("div", {
-              class: x(["datetime-picker-trigger", { disabled: a.disabled, readonly: a.readonly }]),
+              class: N(["datetime-picker-trigger", { disabled: a.disabled, readonly: a.readonly }]),
               "data-testid": "datetime-picker-trigger",
               role: "button",
-              style: j(G.value),
+              style: q(Z.value),
               tabindex: a.disabled ? -1 : 0
             }, [
               v("div", {
-                class: x(["datetime-picker-display", { "has-icon": a.icon, disabled: a.disabled }]),
+                class: N(["datetime-picker-display", { "has-icon": a.icon, disabled: a.disabled }]),
                 "data-testid": "datetime-picker-display",
                 innerHTML: t.abbreviatedDisplay
               }, null, 10, Re)
             ], 14, ke),
-            a.icon ? (r(), y(D(fe), {
+            a.icon ? (d(), y(T(fe), {
               key: 0,
               class: "calendar-icon",
-              color: `var(--kui-color-text-neutral, ${D(ge)})`,
+              color: `var(--kui-color-text-neutral, ${T(ge)})`,
               decorative: "",
-              size: D(ye)
+              size: T(ye)
             }, null, 8, ["color", "size"])) : g("", !0)
           ], 2)
         ]),

package/dist/kongponents.es99.js

@@ -6,7 +6,7 @@ import G from "./kongponents.es53.js";
 import H from "./kongponents.es20.js";
 import J from "./kongponents.es43.js";
 import Q from "./kongponents.es195.js";
-import { KUI_SPACE_20 as W } from "./kongponents.es177.js";
+import { KUI_SPACE_20 as W } from "./kongponents.es178.js";
 const X = {
   class: "dropdown-list",
   "data-testid": "dropdown-list"