@kong/kongponents 9.46.3-pr.2980.95401c2.0 → 9.46.3

package/dist/kongponents.es597.js

@@ -1,41 +1,27 @@
-import { __module as u } from "./kongponents.es608.js";
-var o;
-function b() {
-  return o ? u.exports : (o = 1, (function(s, i) {
-    Object.defineProperty(i, "__esModule", {
+import { __module as u } from "./kongponents.es607.js";
+var n;
+function _() {
+  return n ? u.exports : (n = 1, (function(d, l) {
+    Object.defineProperty(l, "__esModule", {
       value: !0
-    }), i.default = v;
-    function v(t) {
-      return function(r) {
-        var e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, a = e.width, P = a && t.matchPatterns[a] || t.matchPatterns[t.defaultMatchWidth], c = r.match(P);
-        if (!c)
-          return null;
-        var l = c[0], d = a && t.parsePatterns[a] || t.parsePatterns[t.defaultParseWidth], h = Array.isArray(d) ? p(d, function(f) {
-          return f.test(l);
-        }) : m(d, function(f) {
-          return f.test(l);
-        }), n;
-        n = t.valueCallback ? t.valueCallback(h) : h, n = e.valueCallback ? e.valueCallback(n) : n;
-        var M = r.slice(l.length);
-        return {
-          value: n,
-          rest: M
-        };
+    }), l.default = f;
+    function f(t) {
+      return function(r, e) {
+        var v = e != null && e.context ? String(e.context) : "standalone", a;
+        if (v === "formatting" && t.formattingValues) {
+          var i = t.defaultFormattingWidth || t.defaultWidth, c = e != null && e.width ? String(e.width) : i;
+          a = t.formattingValues[c] || t.formattingValues[i];
+        } else {
+          var m = t.defaultWidth, h = e != null && e.width ? String(e.width) : t.defaultWidth;
+          a = t.values[h] || t.values[m];
+        }
+        var o = t.argumentCallback ? t.argumentCallback(r) : r;
+        return a[o];
       };
     }
-    function m(t, r) {
-      for (var e in t)
-        if (t.hasOwnProperty(e) && r(t[e]))
-          return e;
-    }
-    function p(t, r) {
-      for (var e = 0; e < t.length; e++)
-        if (r(t[e]))
-          return e;
-    }
-    s.exports = i.default;
+    d.exports = l.default;
   })(u, u.exports), u.exports);
 }
 export {
-  b as __require
+  _ as __require
 };

package/dist/kongponents.es598.js

@@ -1,28 +1,4 @@
-import { __module as a } from "./kongponents.es609.js";
-var i;
-function s() {
-  return i ? a.exports : (i = 1, (function(o, r) {
-    Object.defineProperty(r, "__esModule", {
-      value: !0
-    }), r.default = v;
-    function v(e) {
-      return function(u) {
-        var l = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, c = u.match(e.matchPattern);
-        if (!c) return null;
-        var d = c[0], n = u.match(e.parsePattern);
-        if (!n) return null;
-        var t = e.valueCallback ? e.valueCallback(n[0]) : n[0];
-        t = l.valueCallback ? l.valueCallback(t) : t;
-        var f = u.slice(d.length);
-        return {
-          value: t,
-          rest: f
-        };
-      };
-    }
-    o.exports = r.default;
-  })(a, a.exports), a.exports);
-}
+var a = { exports: {} };
 export {
-  s as __require
+  a as __module
 };

package/dist/kongponents.es599.js

@@ -1,10 +1,41 @@
-import r from "./kongponents.es312.js";
-function o(t, n) {
-  for (var e = t.length; e--; )
-    if (r(t[e][0], n))
-      return e;
-  return -1;
+import { __module as u } from "./kongponents.es608.js";
+var o;
+function b() {
+  return o ? u.exports : (o = 1, (function(s, i) {
+    Object.defineProperty(i, "__esModule", {
+      value: !0
+    }), i.default = v;
+    function v(t) {
+      return function(r) {
+        var e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, a = e.width, P = a && t.matchPatterns[a] || t.matchPatterns[t.defaultMatchWidth], c = r.match(P);
+        if (!c)
+          return null;
+        var l = c[0], d = a && t.parsePatterns[a] || t.parsePatterns[t.defaultParseWidth], h = Array.isArray(d) ? p(d, function(f) {
+          return f.test(l);
+        }) : m(d, function(f) {
+          return f.test(l);
+        }), n;
+        n = t.valueCallback ? t.valueCallback(h) : h, n = e.valueCallback ? e.valueCallback(n) : n;
+        var M = r.slice(l.length);
+        return {
+          value: n,
+          rest: M
+        };
+      };
+    }
+    function m(t, r) {
+      for (var e in t)
+        if (t.hasOwnProperty(e) && r(t[e]))
+          return e;
+    }
+    function p(t, r) {
+      for (var e = 0; e < t.length; e++)
+        if (r(t[e]))
+          return e;
+    }
+    s.exports = i.default;
+  })(u, u.exports), u.exports);
 }
 export {
-  o as default
+  b as __require
 };

package/dist/kongponents.es600.js

@@ -1,5 +1,28 @@
-import e from "./kongponents.es482.js";
-var a = e(Object, "create");
+import { __module as a } from "./kongponents.es609.js";
+var i;
+function s() {
+  return i ? a.exports : (i = 1, (function(o, r) {
+    Object.defineProperty(r, "__esModule", {
+      value: !0
+    }), r.default = v;
+    function v(e) {
+      return function(u) {
+        var l = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, c = u.match(e.matchPattern);
+        if (!c) return null;
+        var d = c[0], n = u.match(e.parsePattern);
+        if (!n) return null;
+        var t = e.valueCallback ? e.valueCallback(n[0]) : n[0];
+        t = l.valueCallback ? l.valueCallback(t) : t;
+        var f = u.slice(d.length);
+        return {
+          value: t,
+          rest: f
+        };
+      };
+    }
+    o.exports = r.default;
+  })(a, a.exports), a.exports);
+}
 export {
-  a as default
+  s as __require
 };

package/dist/kongponents.es601.js

@@ -1,4 +1,4 @@
-import t from "./kongponents.es569.js";
+import t from "./kongponents.es585.js";
 function i() {
   return !/^((?!chrome|android).)*safari/i.test(t());
 }

package/dist/kongponents.es604.js

@@ -1,6 +1,6 @@
 import p from "./kongponents.es566.js";
-import w from "./kongponents.es561.js";
-import d from "./kongponents.es560.js";
+import w from "./kongponents.es567.js";
+import d from "./kongponents.es580.js";
 import g from "./kongponents.es601.js";
 function u(i, v) {
   var m = p(i), r = w(i), t = m.visualViewport, o = r.clientWidth, e = r.clientHeight, f = 0, a = 0;

package/dist/kongponents.es605.js

@@ -1,8 +1,8 @@
-import m from "./kongponents.es561.js";
-import a from "./kongponents.es567.js";
-import g from "./kongponents.es560.js";
+import m from "./kongponents.es567.js";
+import a from "./kongponents.es568.js";
+import g from "./kongponents.es580.js";
 import f from "./kongponents.es602.js";
-import { max as i } from "./kongponents.es563.js";
+import { max as i } from "./kongponents.es570.js";
 function w(r) {
   var l, o = m(r), e = f(r), t = (l = r.ownerDocument) == null ? void 0 : l.body, c = i(o.scrollWidth, o.clientWidth, t ? t.scrollWidth : 0, t ? t.clientWidth : 0), h = i(o.scrollHeight, o.clientHeight, t ? t.scrollHeight : 0, t ? t.clientHeight : 0), n = -e.scrollLeft + g(r), d = -e.scrollTop;
   return a(t || o).direction === "rtl" && (n += i(o.clientWidth, t ? t.clientWidth : 0) - c), {

package/dist/kongponents.es72.js

@@ -2,13 +2,13 @@ import { defineComponent as g, computed as w, createElementBlock as n, openBlock
 import { AlertAppearances as o } from "./kongponents.es4.js";
 import "./kongponents.es5.js";
 import "./kongponents.es10.js";
-import z from "./kongponents.es178.js";
-import K from "./kongponents.es179.js";
-import A from "./kongponents.es180.js";
-import v from "./kongponents.es176.js";
-import b from "./kongponents.es181.js";
-import E from "./kongponents.es182.js";
-import { KUI_ICON_SIZE_40 as y } from "./kongponents.es172.js";
+import z from "./kongponents.es171.js";
+import K from "./kongponents.es172.js";
+import A from "./kongponents.es173.js";
+import v from "./kongponents.es174.js";
+import b from "./kongponents.es175.js";
+import E from "./kongponents.es176.js";
+import { KUI_ICON_SIZE_40 as y } from "./kongponents.es177.js";
 const N = {
   key: 0,
   class: "alert-icon-container"

package/dist/kongponents.es75.js

@@ -3,7 +3,7 @@ import z from "./kongponents.es24.js";
 /* empty css                 */
 import { BadgeMethodAppearances as C } from "./kongponents.es5.js";
 import "./kongponents.es10.js";
-import { normalizeSize as W } from "./kongponents.es174.js";
+import { normalizeSize as W } from "./kongponents.es189.js";
 const w = ["tabindex"], S = /* @__PURE__ */ p({
   __name: "KBadge",
   props: {

package/dist/kongponents.es77.js

@@ -1,5 +1,5 @@
 import { defineComponent as m, createElementBlock as o, openBlock as s, mergeProps as u, Fragment as b, renderList as f, createBlock as p, createCommentVNode as c, resolveDynamicComponent as y, withCtx as k, renderSlot as d, normalizeStyle as h, unref as g, toDisplayString as $, createTextVNode as v } from "vue";
-import { normalizeSize as x } from "./kongponents.es174.js";
+import { normalizeSize as x } from "./kongponents.es189.js";
 const B = {
   key: 0,
   class: "breadcrumbs-icon-container"

package/dist/kongponents.es83.js

@@ -1,5 +1,5 @@
 import { defineComponent as Se, useSlots as be, useId as pe, ref as n, computed as r, watch as v, onMounted as ke, createElementBlock as m, openBlock as s, createBlock as I, createCommentVNode as M, resolveDynamicComponent as Pe, withCtx as u, createTextVNode as b, toDisplayString as p, renderSlot as c, createVNode as A, createSlots as x, unref as D, normalizeClass as ze, Fragment as Ie, renderList as Ae } from "vue";
-import Ce from "./kongponents.es186.js";
+import Ce from "./kongponents.es193.js";
 import $e from "./kongponents.es21.js";
 /* empty css                 */
 import Q from "./kongponents.es44.js";

package/dist/kongponents.es87.js

@@ -1,8 +1,8 @@
 import { defineComponent as z, useSlots as $, useAttrs as K, useId as N, computed as l, watch as D, createElementBlock as p, openBlock as i, normalizeClass as f, createElementVNode as o, createBlock as m, createCommentVNode as n, mergeProps as v, unref as s, createSlots as E, withCtx as g, renderSlot as h, createTextVNode as L, toDisplayString as x } from "vue";
 import P from "./kongponents.es48.js";
-import T from "./kongponents.es189.js";
-import q from "./kongponents.es190.js";
-import { KUI_ICON_SIZE_40 as C } from "./kongponents.es172.js";
+import T from "./kongponents.es191.js";
+import q from "./kongponents.es192.js";
+import { KUI_ICON_SIZE_40 as C } from "./kongponents.es177.js";
 const O = ["id", "aria-checked"], U = { class: "checkbox-label-wrapper" }, Z = {
   key: 1,
   class: "checkbox-description"

package/dist/kongponents.es89.js

@@ -1,22 +1,22 @@
 import { defineComponent as xe, useCssVars as Te, computed as d, watch as E, useSlots as Ee, ref as m, useTemplateRef as q, nextTick as ne, onMounted as Be, onBeforeUnmount as Se, createElementBlock as b, openBlock as i, normalizeClass as w, createCommentVNode as f, createElementVNode as k, createVNode as r, withCtx as c, Transition as $, createBlock as L, unref as a, Fragment as H, createTextVNode as F, toDisplayString as M, withDirectives as ae, renderSlot as Ie, resolveDynamicComponent as ie, normalizeProps as Re, mergeProps as ue, vShow as re } from "vue";
-import { Virtualizer as ce } from "./kongponents.es199.js";
+import { Virtualizer as ce } from "./kongponents.es178.js";
 import Ae from "./kongponents.es46.js";
 import { copyTextToClipboard as Pe } from "./kongponents.es165.js";
-import { ShortcutManager as qe } from "./kongponents.es200.js";
-import { LINE_NUMBER_EXPRESSION_REGEX as $e, buildLineOffsets as He, highlightMatchingChars as Fe, escapeHTMLIfNeeded as se, normalizeHighlightedLines as Ve, getMatchingLineNumbers as De } from "./kongponents.es201.js";
-import Oe from "./kongponents.es202.js";
-import Ue from "./kongponents.es203.js";
-import je from "./kongponents.es179.js";
-import ze from "./kongponents.es204.js";
-import Ke from "./kongponents.es205.js";
-import Xe from "./kongponents.es206.js";
-import Ge from "./kongponents.es207.js";
-import Qe from "./kongponents.es185.js";
-import { KUI_COLOR_TEXT_NEUTRAL_STRONG as We, KUI_COLOR_TEXT_INVERSE as Ye, KUI_ICON_SIZE_30 as Ze, KUI_LINE_HEIGHT_30 as Je } from "./kongponents.es172.js";
+import { ShortcutManager as qe } from "./kongponents.es179.js";
+import { LINE_NUMBER_EXPRESSION_REGEX as $e, buildLineOffsets as He, highlightMatchingChars as Fe, escapeHTMLIfNeeded as se, normalizeHighlightedLines as Ve, getMatchingLineNumbers as De } from "./kongponents.es180.js";
+import Oe from "./kongponents.es181.js";
+import Ue from "./kongponents.es182.js";
+import je from "./kongponents.es172.js";
+import ze from "./kongponents.es183.js";
+import Ke from "./kongponents.es184.js";
+import Xe from "./kongponents.es185.js";
+import Ge from "./kongponents.es186.js";
+import Qe from "./kongponents.es187.js";
+import { KUI_COLOR_TEXT_NEUTRAL_STRONG as We, KUI_COLOR_TEXT_INVERSE as Ye, KUI_ICON_SIZE_30 as Ze, KUI_LINE_HEIGHT_30 as Je } from "./kongponents.es177.js";
 import B from "./kongponents.es39.js";
-import { IS_MAYBE_MAC as _e } from "./kongponents.es208.js";
-import { normalizeSize as et } from "./kongponents.es174.js";
-import tt from "./kongponents.es209.js";
+import { IS_MAYBE_MAC as _e } from "./kongponents.es188.js";
+import { normalizeSize as et } from "./kongponents.es189.js";
+import tt from "./kongponents.es190.js";
 const ot = ["id"], lt = {
   key: 0,
   class: "code-block-actions"

package/dist/kongponents.es94.js

@@ -1,6 +1,6 @@
 import { defineComponent as L, useSlots as N, useId as T, ref as f, computed as n, watch as w, createElementBlock as g, openBlock as r, createElementVNode as d, createCommentVNode as v, createVNode as h, normalizeClass as b, createBlock as B, resolveDynamicComponent as D, withCtx as C, renderSlot as a, createTextVNode as z, toDisplayString as V, withModifiers as E, unref as c, Transition as A, withDirectives as K, vShow as x } from "vue";
-import M from "./kongponents.es191.js";
-import { KUI_ICON_SIZE_40 as O } from "./kongponents.es172.js";
+import M from "./kongponents.es211.js";
+import { KUI_ICON_SIZE_40 as O } from "./kongponents.es177.js";
 const U = { class: "k-collapse" }, Z = { class: "collapse-trigger" }, j = ["aria-controls", "aria-expanded", "aria-label"], q = {
   key: 0,
   class: "collapse-trigger-label",

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 $, 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 { 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 I from "./kongponents.es33.js";
-import re from "./kongponents.es53.js";
-import oe from "./kongponents.es56.js";
+import de from "./kongponents.es53.js";
+import se 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.es195.js";
-import { KUI_SPACE_40 as ve, KUI_ICON_SIZE_40 as ye, KUI_COLOR_TEXT_NEUTRAL as ge } from "./kongponents.es172.js";
-import { normalizeSize as pe } from "./kongponents.es174.js";
-import be from "./kongponents.es196.js";
-import U from "./kongponents.es197.js";
-import C from "./kongponents.es198.js";
+import { DateTimePickerModes as oe, ModeArrayCustom as me, ModeArrayRelative as ce, ModeDateOnly as ue } from "./kongponents.es10.js";
+import fe from "./kongponents.es218.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.es189.js";
+import be from "./kongponents.es219.js";
+import U from "./kongponents.es220.js";
+import C from "./kongponents.es221.js";
 const ke = ["tabindex"], Re = ["innerHTML"], Te = {
   key: 1,
   class: "range-display"
@@ -35,99 +35,102 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
     disabled: { type: Boolean },
     readonly: { type: Boolean },
     popoverPlacement: { default: "bottom-start" },
-    invalidTimeErrorMessage: { default: "Start time cannot exceed end time." }
+    invalidTimeErrorMessage: { default: "Start time cannot exceed end time." },
+    timeGranularity: { default: "minutely" }
   },
   emits: ["change", "update:modelValue"],
   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 = {
+    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 = {
       start: null,
       end: null
-    }, P = c(a.modelValue.start || null), b = c(a.modelValue || B), K = o.value ? P : b, h = ie("calendarWrapperRef"), Z = R(() => ({
+    }, h = c(a.modelValue.start || null), b = c(a.modelValue || K), O = s.value ? h : b, S = ie("calendarWrapperRef"), G = R(() => ({
       width: pe(a.width)
-    })), O = Intl.DateTimeFormat().resolvedOptions().timeZone, t = le({
+    })), z = 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: (X = a.timePeriods[0]) == null ? void 0 : X.values[0],
-      previouslySelectedTimeframe: (j = a.timePeriods[0]) == null ? void 0 : j.values[0],
+      selectedTimeframe: (V = a.timePeriods[0]) == null ? void 0 : V.values[0],
+      previouslySelectedTimeframe: (X = a.timePeriods[0]) == null ? void 0 : X.values[0],
       tabName: "relative"
-    }), S = (e) => {
+    }), $ = (e) => {
       if (!e) return;
-      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 = {
+      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 = {
         start: i,
-        end: r
+        end: d
       };
-    }, z = (e, l = !1) => {
+    }, E = (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()), r = new Date(t.selectedTimeframe.end());
-        t.fullRangeDisplay = H({ start: i, end: r }, !1), t.selectedRange.start = i, t.selectedRange.end = r;
+        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;
       } else
         t.fullRangeDisplay = "";
-      D.value = !1, l && V();
+      P.value = !1, l && H();
     }, Q = () => {
       var e;
-      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 () => {
+      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 () => {
       var e;
-      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 = () => {
+      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 = () => {
       var e;
-      p.value && ((e = t.selectedRange) != null && e.start) ? t.abbreviatedDisplay = H(t.selectedRange, !0) : s.value && !p.value && (t.abbreviatedDisplay = t.selectedTimeframe.display);
+      p.value && ((e = t.selectedRange) != null && e.start) ? t.abbreviatedDisplay = Z(t.selectedRange, !0) : o.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 }), $(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, () => {
+    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, () => {
       if (ce.includes(a.mode) && a.modelValue.timePeriodsKey) {
-        t.tabName = "relative", D.value = !1;
+        t.tabName = "relative", P.value = !1;
         for (const e of a.timePeriods) {
           const l = e.values.find((i) => i.key === a.modelValue.timePeriodsKey);
           if (l) {
-            z(l), E();
+            E(l), N();
             break;
           }
         }
       } else
-        t.tabName = "custom", S(a.modelValue), (a.modelValue.start && a.modelValue.end || o.value && a.modelValue.start) && E();
+        t.tabName = "custom", $(a.modelValue), (a.modelValue.start && a.modelValue.end || s.value && a.modelValue.start) && N();
       W.value++;
-    }, { immediate: !0 });
+    }, { immediate: !0 }), T(() => a.timeGranularity, () => {
+      N();
+    });
     const ee = () => {
-      t.popoverOpen = !1, h.value && h.value.resetTime();
+      t.popoverOpen = !1, S.value && S.value.resetTime();
     }, te = () => {
-      t.popoverOpen = !0, h.value && h.value.initTimeInputs();
+      t.popoverOpen = !0, S.value && S.value.initTimeInputs();
     };
-    return (e, l) => (d(), u("div", {
-      class: N(["k-datetime-picker", { "set-min-width": s.value }]),
-      style: q(Z.value)
+    return (e, l) => (r(), u("div", {
+      class: x(["k-datetime-picker", { "set-min-width": o.value }]),
+      style: j(G.value)
     }, [
-      ne(re, {
+      ne(de, {
         ref_key: "kPop",
         ref: L,
         disabled: a.disabled || a.readonly,
         "hide-caret": "",
         "hide-close-icon": "",
-        offset: T(ve),
+        offset: D(ve),
         placement: a.popoverPlacement,
         width: "auto",
         onClose: ee,
         onOpen: te
       }, {
         content: f(() => [
-          s.value && x.value ? (d(), y(oe, {
+          o.value && w.value ? (r(), y(se, {
             key: 0,
             modelValue: t.tabName,
             "onUpdate:modelValue": l[0] || (l[0] = (i) => t.tabName = i),
@@ -139,32 +142,33 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
             ],
             onClick: l[1] || (l[1] = (i) => t.tabName = i)
           }, null, 8, ["modelValue"])) : g("", !0),
-          !p.value && t.fullRangeDisplay ? (d(), u("p", Te, A(t.fullRangeDisplay), 1)) : g("", !0),
-          x.value && p.value ? (d(), y(be, {
+          !p.value && t.fullRangeDisplay ? (r(), u("p", Te, A(t.fullRangeDisplay), 1)) : g("", !0),
+          w.value && p.value ? (r(), y(be, {
             key: W.value,
             ref: "calendarWrapperRef",
-            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),
+            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),
             "error-message": a.invalidTimeErrorMessage,
-            "is-range": !o.value,
+            "is-range": !s.value,
             "k-date-picker-mode": a.mode,
             "max-date": a.maxDate,
-            "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)}`,
+            "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)}`,
               class: "timeframe-section"
             }, [
               v("div", Pe, A(i.section), 1),
               v("div", he, [
-                (d(!0), u(F, null, G(i.values, (n, k) => (d(), y(I, {
+                (r(!0), u(q, null, F(i.values, (n, k) => (r(), y(I, {
                   key: `time-${k}`,
                   appearance: _(n),
                   class: "timeframe-button",
                   "data-testid": `select-timeframe-${n.key}`,
-                  onClick: ($e) => z(n, !0)
+                  onClick: ($e) => E(n, !0)
                 }, {
                   default: f(() => [
                     M(A(Y(n.timeframeText)), 1)
@@ -177,7 +181,7 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
         ]),
         footer: f(() => [
           v("div", Se, [
-            a.clearButton ? (d(), y(I, {
+            a.clearButton ? (r(), y(I, {
               key: 0,
               appearance: "tertiary",
               class: "action-button",
@@ -189,13 +193,13 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
               ])]),
               _: 1
             })) : g("", !0),
-            p.value ? (d(), y(I, {
+            p.value ? (r(), y(I, {
               key: 1,
               appearance: "tertiary",
               class: "action-button",
               "data-testid": "datetime-picker-submit",
-              disabled: D.value || w.value,
-              onClick: l[5] || (l[5] = (i) => V())
+              disabled: P.value || B.value,
+              onClick: l[5] || (l[5] = (i) => H())
             }, {
               default: f(() => [...l[7] || (l[7] = [
                 M(" Apply ", -1)
@@ -206,27 +210,27 @@ const ke = ["tabindex"], Re = ["innerHTML"], Te = {
         ]),
         default: f(() => [
           v("div", {
-            class: N(["datetime-picker-trigger-wrapper", { disabled: a.disabled }])
+            class: x(["datetime-picker-trigger-wrapper", { disabled: a.disabled }])
           }, [
             v("div", {
-              class: N(["datetime-picker-trigger", { disabled: a.disabled, readonly: a.readonly }]),
+              class: x(["datetime-picker-trigger", { disabled: a.disabled, readonly: a.readonly }]),
               "data-testid": "datetime-picker-trigger",
               role: "button",
-              style: q(Z.value),
+              style: j(G.value),
               tabindex: a.disabled ? -1 : 0
             }, [
               v("div", {
-                class: N(["datetime-picker-display", { "has-icon": a.icon, disabled: a.disabled }]),
+                class: x(["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 ? (d(), y(T(fe), {
+            a.icon ? (r(), y(D(fe), {
               key: 0,
               class: "calendar-icon",
-              color: `var(--kui-color-text-neutral, ${T(ge)})`,
+              color: `var(--kui-color-text-neutral, ${D(ge)})`,
               decorative: "",
-              size: T(ye)
+              size: D(ye)
             }, null, 8, ["color", "size"])) : g("", !0)
           ], 2)
         ]),

package/dist/kongponents.es99.js

@@ -5,8 +5,8 @@ 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.es218.js";
-import { KUI_SPACE_20 as W } from "./kongponents.es172.js";
+import Q from "./kongponents.es197.js";
+import { KUI_SPACE_20 as W } from "./kongponents.es177.js";
 const X = {
   class: "dropdown-list",
   "data-testid": "dropdown-list"