@kong/kongponents 9.46.2-pr.2976.bc79129.0 → 9.46.2-pr.2980.a07073a.0

package/dist/kongponents.es96.js

@@ -1,16 +1,16 @@
-import { defineComponent as ae, ref as c, computed as k, reactive as le, useTemplateRef as ie, watch as R, createElementBlock as u, openBlock as r, normalizeStyle as H, normalizeClass as x, createVNode as ne, unref as T, withCtx as f, createElementVNode as v, createBlock as y, createCommentVNode as g, createTextVNode as z, toDisplayString as E, isRef as re, Fragment as V, renderList as X } from "vue";
-import M from "./kongponents.es33.js";
-import de from "./kongponents.es53.js";
+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 re from "./kongponents.es53.js";
 import oe from "./kongponents.es56.js";
 /* empty css                  */
 import "./kongponents.es5.js";
 import { DateTimePickerModes as se, ModeArrayCustom as me, ModeArrayRelative as ce, ModeDateOnly as ue } from "./kongponents.es10.js";
-import fe from "./kongponents.es204.js";
+import fe from "./kongponents.es197.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.es178.js";
-import be from "./kongponents.es205.js";
-import j from "./kongponents.es206.js";
-import q from "./kongponents.es207.js";
+import be from "./kongponents.es198.js";
+import U from "./kongponents.es199.js";
+import C from "./kongponents.es200.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: F }) {
-    var G, Z;
-    const m = F, A = c(null), w = k(() => a.mode !== se.Relative), d = k(() => me.includes(a.mode) && !a.range), o = k(() => a.timePeriods.length > 0), p = k(() => t.tabName === "custom" || !o.value), D = c(!0), B = c(!1), I = c(0), $ = {
+  setup(a, { emit: J }) {
+    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
-    }, P = c(a.modelValue.start || null), b = c(a.modelValue || $), K = d.value ? P : b, h = ie("calendarWrapperRef"), U = k(() => ({
+    }, 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)
-    })), C = 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: (G = a.timePeriods[0]) == null ? void 0 : G.values[0],
-      previouslySelectedTimeframe: (Z = a.timePeriods[0]) == null ? void 0 : Z.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"
     }), S = (e) => {
       if (!e) return;
-      const l = d.value ? !e.start : !e.start || !e.end, i = (e == null ? void 0 : e.start) || /* @__PURE__ */ new Date(), n = (e == null ? void 0 : e.end) || null;
-      D.value = !!l, !d.value && e && e.start && e.end ? (b.value.start = i, b.value.end = n) : e && e.start && (P.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: n
+        end: r
       };
-    }, O = (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()), n = new Date(t.selectedTimeframe.end());
-        t.fullRangeDisplay = L({ start: i, end: n }), t.selectedRange.start = i, t.selectedRange.end = n;
+        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 = "";
-      D.value = !1, l && W();
-    }, J = () => {
+      D.value = !1, l && V();
+    }, Q = () => {
       var e;
-      b.value = $, P.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 = $, m("change", t.selectedRange), m("update:modelValue", t.selectedRange);
-    }, L = (e) => {
-      const { start: l, end: i } = e;
-      let n = a.timeGranularity === "secondly" ? "PP hh:mm:ss a" : "PP hh:mm a";
-      const s = j(l, C, "(z)");
-      return !w.value && o.value ? n = "PP hh:mm a" : ue.includes(a.mode) && (n = "PP"), d.value ? `${q(l, n)} ${s}` : `${q(l, n)} - ${j(i, C, n)} ${s}`;
-    }, W = 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;
-      d.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 = A.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 = L(t.selectedRange) : o.value && !p.value && (t.abbreviatedDisplay = t.selectedTimeframe.display);
-    }, Q = (e) => e.charAt(0).toUpperCase() + e.slice(1), Y = (e) => t.selectedTimeframe.key === e.key ? "primary" : "secondary";
-    R(P, (e, l) => {
+      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";
+    $(P, (e, l) => {
       e !== void 0 && e !== l && S({ start: e, end: null });
-    }, { immediate: !0 }), R(b, (e, l) => {
+    }, { immediate: !0 }), $(b, (e, l) => {
       e !== void 0 && e !== l && S(e);
-    }, { immediate: !0 }), R(() => t.tabName, (e, l) => {
-      l !== void 0 && e === "relative" ? O(t.previouslySelectedTimeframe) : l !== void 0 && e === "custom" && S(t.previouslySelectedRange);
-    }), R(() => a.modelValue, () => {
+    }, { 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", D.value = !1;
         for (const e of a.timePeriods) {
           const l = e.values.find((i) => i.key === a.modelValue.timePeriodsKey);
           if (l) {
-            O(l), N();
+            z(l), E();
             break;
           }
         }
       } else
-        t.tabName = "custom", S(a.modelValue), (a.modelValue.start && a.modelValue.end || d.value && a.modelValue.start) && N();
-      I.value++;
-    }, { immediate: !0 }), R(() => a.timeGranularity, () => {
-      N();
-    });
-    const _ = () => {
+        t.tabName = "custom", S(a.modelValue), (a.modelValue.start && a.modelValue.end || o.value && a.modelValue.start) && E();
+      W.value++;
+    }, { immediate: !0 });
+    const ee = () => {
       t.popoverOpen = !1, h.value && h.value.resetTime();
-    }, ee = () => {
+    }, te = () => {
       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: H(U.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: A,
+        ref: L,
         disabled: a.disabled || a.readonly,
         "hide-caret": "",
         "hide-close-icon": "",
         offset: T(ve),
         placement: a.popoverPlacement,
         width: "auto",
-        onClose: _,
-        onOpen: ee
+        onClose: ee,
+        onOpen: te
       }, {
         content: f(() => [
-          o.value && w.value ? (r(), y(oe, {
+          s.value && x.value ? (d(), y(oe, {
             key: 0,
             modelValue: t.tabName,
             "onUpdate:modelValue": l[0] || (l[0] = (i) => t.tabName = i),
@@ -142,36 +139,35 @@ 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, E(t.fullRangeDisplay), 1)) : g("", !0),
-          w.value && p.value ? (r(), y(be, {
-            key: I.value,
+          !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: T(K),
-            "onUpdate:modelValue": l[2] || (l[2] = (i) => re(K) ? K.value = i : null),
-            error: B.value,
-            "onUpdate:error": l[3] || (l[3] = (i) => B.value = i),
+            "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": !d.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 && !d.value ? (r(), u("div", De, [
-            (r(!0), u(V, null, X(a.timePeriods, (i, n) => (r(), u("div", {
-              key: `section-${String(i.section || n)}`,
+            "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, E(i.section), 1),
+              v("div", Pe, A(i.section), 1),
               v("div", he, [
-                (r(!0), u(V, null, X(i.values, (s, te) => (r(), y(M, {
-                  key: `time-${te}`,
-                  appearance: Y(s),
+                (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-${s.key}`,
-                  onClick: (Ne) => O(s, !0)
+                  "data-testid": `select-timeframe-${n.key}`,
+                  onClick: ($e) => z(n, !0)
                 }, {
                   default: f(() => [
-                    z(E(Q(s.timeframeText)), 1)
+                    M(A(Y(n.timeframeText)), 1)
                   ]),
                   _: 2
                 }, 1032, ["appearance", "data-testid", "onClick"]))), 128))
@@ -181,28 +177,28 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
         ]),
         footer: f(() => [
           v("div", Se, [
-            a.clearButton ? (r(), y(M, {
+            a.clearButton ? (d(), y(I, {
               key: 0,
               appearance: "tertiary",
               class: "action-button",
               "data-testid": "datetime-picker-clear",
-              onClick: l[4] || (l[4] = (i) => J())
+              onClick: l[4] || (l[4] = (i) => Q())
             }, {
               default: f(() => [...l[6] || (l[6] = [
-                z(" Clear ", -1)
+                M(" Clear ", -1)
               ])]),
               _: 1
             })) : g("", !0),
-            p.value ? (r(), y(M, {
+            p.value ? (d(), y(I, {
               key: 1,
               appearance: "tertiary",
               class: "action-button",
               "data-testid": "datetime-picker-submit",
-              disabled: D.value || B.value,
-              onClick: l[5] || (l[5] = (i) => W())
+              disabled: D.value || w.value,
+              onClick: l[5] || (l[5] = (i) => V())
             }, {
               default: f(() => [...l[7] || (l[7] = [
-                z(" Apply ", -1)
+                M(" Apply ", -1)
               ])]),
               _: 1
             }, 8, ["disabled"])) : g("", !0)
@@ -210,22 +206,22 @@ 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: H(U.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(T(fe), {
+            a.icon ? (d(), y(T(fe), {
               key: 0,
               class: "calendar-icon",
               color: `var(--kui-color-text-neutral, ${T(ge)})`,

package/dist/kongponents.es99.js

@@ -5,7 +5,7 @@ import j from "./kongponents.es24.js";
 import G from "./kongponents.es53.js";
 import H from "./kongponents.es20.js";
 import J from "./kongponents.es43.js";
-import Q from "./kongponents.es180.js";
+import Q from "./kongponents.es203.js";
 import { KUI_SPACE_20 as W } from "./kongponents.es177.js";
 const X = {
   class: "dropdown-list",