@kong/kongponents 9.48.2 → 9.48.3

package/dist/kongponents.es246.js

@@ -1,26 +1,178 @@
-import { defineComponent as r, createElementBlock as n, openBlock as s, renderSlot as i, createVNode as e } from "vue";
-import t from "./kongponents.es58.js";
-const l = { class: "skeleton-loader" }, _ = /* @__PURE__ */ r({
-  __name: "SkeletonBase",
-  setup(a) {
-    return (o, d) => (s(), n("div", l, [
-      i(o.$slots, "default", {}, () => [
-        e(t, {
-          height: "1",
-          width: "100"
-        }),
-        e(t, {
-          height: "1",
-          width: "100"
-        }),
-        e(t, {
-          height: "1",
-          width: "100"
-        })
-      ], !0)
+import { defineComponent as $, ref as u, computed as D, watch as L, onMounted as T, onBeforeMount as H, createElementBlock as h, openBlock as c, createVNode as o, withCtx as r, unref as b, createBlock as g, createCommentVNode as K, createElementVNode as w, withModifiers as f, createSlots as N, Fragment as P, renderList as E, createTextVNode as C, toDisplayString as U, nextTick as q } from "vue";
+import { debounce as z } from "./kongponents.es166.js";
+import A from "./kongponents.es172.js";
+import J from "./kongponents.es191.js";
+import R from "./kongponents.es255.js";
+import p from "./kongponents.es33.js";
+import F from "./kongponents.es37.js";
+import O from "./kongponents.es42.js";
+import j from "./kongponents.es43.js";
+import G from "./kongponents.es46.js";
+import Q from "./kongponents.es24.js";
+/* empty css                 */
+import W from "./kongponents.es48.js";
+const X = { class: "table-column-visibility-menu" }, Y = { class: "apply-button-wrapper" }, me = /* @__PURE__ */ $({
+  __name: "ColumnVisibilityMenu",
+  props: {
+    columns: {},
+    tableId: {},
+    visibilityPreferences: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update"],
+  setup(i, { emit: V }) {
+    const x = V, y = u(!1), s = u({}), d = u(!1), n = u(), a = u(""), v = () => {
+      s.value = i.columns.reduce((e, t) => (e[t.key] = i.visibilityPreferences[t.key] === void 0 ? !0 : i.visibilityPreferences[t.key], e), {}), d.value = !1;
+    }, I = z((e) => {
+      a.value = e, n.value && m(n.value);
+    }, 500), k = D(() => a.value ? i.columns.filter((e) => (e.label ? e.label : e.key).toLowerCase().includes(a.value.toLowerCase())) : i.columns), S = () => {
+      x("update", JSON.parse(JSON.stringify(s.value))), d.value = !1, a.value = "";
+    }, B = (e) => {
+      y.value = e, e && n.value && q(() => {
+        n.value && m(n.value);
+      }), !e && d.value && v(), e || (a.value = "");
+    }, m = (e) => {
+      if (!(e.scrollHeight > e.clientHeight)) {
+        e.classList.remove("is-bottom-overflowing");
+        return;
+      }
+      const l = e.scrollHeight < e.clientHeight + e.scrollTop + 1;
+      e.classList.toggle("is-bottom-overflowing", !l);
+    };
+    return L(() => i.visibilityPreferences, () => {
+      v();
+    }, { immediate: !0 }), T(() => {
+      n.value && (n.value.addEventListener("scroll", (e) => {
+        const t = e.currentTarget;
+        m(t);
+      }), m(n.value));
+    }), H(() => {
+      v();
+    }), (e, t) => (c(), h("div", X, [
+      o(O, {
+        "data-testid": "table-column-visibility-menu",
+        disabled: i.disabled,
+        "kpop-attributes": { placement: "bottom-end" },
+        onToggleDropdown: B
+      }, {
+        items: r(() => [
+          a.value || k.value.length > 5 ? (c(), g(G, {
+            key: 0,
+            modelValue: a.value,
+            "onUpdate:modelValue": t[1] || (t[1] = (l) => a.value = l),
+            modelModifiers: { trim: !0 },
+            autocomplete: "off",
+            class: "search-input",
+            "data-testid": "search-input",
+            placeholder: "Search columns",
+            type: "search",
+            onClick: t[2] || (t[2] = f(() => {
+            }, ["stop"])),
+            onInput: b(I)
+          }, N({
+            before: r(() => [
+              o(b(J), { decorative: "" })
+            ]),
+            _: 2
+          }, [
+            a.value ? {
+              name: "after",
+              fn: r(() => [
+                o(p, {
+                  appearance: "tertiary",
+                  "aria-label": "Clear search",
+                  class: "clear-search",
+                  "data-testid": "clear-search-button",
+                  icon: "",
+                  size: "small",
+                  onClick: t[0] || (t[0] = f(() => a.value = "", ["stop"]))
+                }, {
+                  default: r(() => [
+                    o(b(A), { decorative: "" })
+                  ]),
+                  _: 1
+                })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "onInput"])) : K("", !0),
+          w("div", {
+            ref_key: "menuItemsRef",
+            ref: n,
+            class: "menu-items-wrapper"
+          }, [
+            (c(!0), h(P, null, E(k.value, (l) => (c(), g(j, {
+              key: l.key,
+              class: "column-visibility-menu-item",
+              "data-testid": `column-visibility-menu-item-${l.key}`,
+              onClick: f(() => {
+                s.value[l.key] = !s.value[l.key], d.value = !0;
+              }, ["stop"])
+            }, {
+              default: r(() => [
+                o(F, {
+                  modelValue: s.value[l.key],
+                  "onUpdate:modelValue": (M) => s.value[l.key] = M,
+                  "aria-labelledby": `${i.tableId}-${l.key}-visibility-checkbox-label`,
+                  "data-testid": `column-visibility-checkbox-${l.key}`
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "aria-labelledby", "data-testid"]),
+                o(W, {
+                  id: `${i.tableId}-${l.key}-visibility-checkbox-label`,
+                  class: "visibility-checkbox-label",
+                  title: l.label
+                }, {
+                  default: r(() => [
+                    C(U(l.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["id", "title"])
+              ]),
+              _: 2
+            }, 1032, ["data-testid", "onClick"]))), 128))
+          ], 512),
+          w("div", Y, [
+            o(p, {
+              appearance: "tertiary",
+              class: "apply-button",
+              "data-testid": "apply-button",
+              onClick: S
+            }, {
+              default: r(() => [...t[3] || (t[3] = [
+                C(" Apply ", -1)
+              ])]),
+              _: 1
+            })
+          ])
+        ]),
+        default: r(() => [
+          o(Q, {
+            placement: "bottom-end",
+            text: y.value ? void 0 : "Show/Hide Columns"
+          }, {
+            default: r(() => [
+              o(p, {
+                appearance: "tertiary",
+                "aria-label": "Show/Hide Columns",
+                class: "menu-button",
+                "data-testid": "column-visibility-menu-button",
+                disabled: i.disabled,
+                icon: "",
+                size: "large"
+              }, {
+                default: r(() => [
+                  o(b(R), { decorative: "" })
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["text"])
+        ]),
+        _: 1
+      }, 8, ["disabled"])
     ]));
   }
 });
 export {
-  _ as default
+  me as default
 };

package/dist/kongponents.es248.js

@@ -1,50 +1,179 @@
-import { defineComponent as h, useCssVars as k, computed as f, createElementBlock as t, openBlock as r, Fragment as s, renderList as c, createElementVNode as l, renderSlot as i, createVNode as n } from "vue";
-import d from "./kongponents.es58.js";
-import { KUI_SPACE_50 as C } from "./kongponents.es177.js";
-import { normalizeSize as p } from "./kongponents.es180.js";
-const _ = { class: "skeleton-card-wrapper" }, v = { class: "skeleton-card-header" }, w = { class: "skeleton-card-content" }, x = { class: "skeleton-card-footer" }, E = /* @__PURE__ */ h({
-  __name: "CardSkeleton",
-  props: {
-    cardCount: {},
-    maxWidth: {}
-  },
-  setup(o) {
-    k((e) => ({
-      v243e7eb5: u.value
-    }));
-    const u = f(() => o.maxWidth ? p(o.maxWidth) : o.cardCount === 1 ? "470px" : `calc((100% / 3) - ${C})`);
-    return (e, S) => (r(), t("div", _, [
-      (r(!0), t(s, null, c(o.cardCount, (m) => (r(), t("div", {
-        key: m,
-        class: "skeleton-card"
-      }, [
-        l("div", v, [
-          i(e.$slots, "card-header", {}, () => [
-            n(d, { width: "50" })
-          ], !0)
+import { defineComponent as W, mergeModels as j, useModel as P, ref as b, useId as J, computed as D, onMounted as K, watch as h, createElementBlock as m, openBlock as i, createBlock as I, createCommentVNode as y, unref as c, mergeProps as B, createElementVNode as M, createVNode as L, withDirectives as S, toDisplayString as k, normalizeClass as F, vModelText as A, Transition as Q, withCtx as X } from "vue";
+import { DatePicker as U } from "./kongponents.es306.js";
+import Z from "./kongponents.es286.js";
+import p from "./kongponents.es290.js";
+import G from "./kongponents.es188.js";
+const _ = { class: "calendar-wrapper" }, ee = {
+  key: 2,
+  class: "time-wrapper"
+}, te = { class: "time-input" }, ae = ["for"], ne = { key: 0 }, le = { key: 1 }, ue = ["id", "step"], se = ["for"], ie = { key: 0 }, re = ["id", "step"], oe = {
+  key: 0,
+  class: "help-text"
+}, ye = /* @__PURE__ */ W({
+  __name: "CalendarWrapper",
+  props: /* @__PURE__ */ j({
+    isRange: { type: Boolean },
+    kDatePickerMode: {},
+    maxDate: { default: () => {
+    } },
+    minDate: { default: () => {
+    } },
+    errorMessage: { default: () => {
+    } },
+    timeGranularity: { default: "minutely" }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {},
+    error: { type: Boolean, default: !1 },
+    errorModifiers: {}
+  }),
+  emits: ["update:modelValue", "update:error"],
+  setup(t, { expose: Y }) {
+    const u = (n, a) => a === "secondly" ? G(n, "HH:mm:ss") : G(n, "HH:mm"), e = P(t, "modelValue"), f = P(t, "error"), s = b(u(/* @__PURE__ */ new Date(), t.timeGranularity)), r = b(u(/* @__PURE__ */ new Date(), t.timeGranularity)), o = b({
+      start: u(/* @__PURE__ */ new Date(), t.timeGranularity),
+      end: u(/* @__PURE__ */ new Date(), t.timeGranularity)
+    }), g = J(), $ = D(() => t.isRange && e.value && "start" in e.value && e.value.start instanceof Date ? { year: e.value.start.getFullYear(), month: e.value.start.getMonth() + 1 } : e.value instanceof Date ? { year: e.value.getFullYear(), month: e.value.getMonth() + 1 } : t.maxDate && Z(t.maxDate, p()) ? { year: t.maxDate.getFullYear(), month: t.maxDate.getMonth() + 1 } : { year: (/* @__PURE__ */ new Date()).getFullYear(), month: (/* @__PURE__ */ new Date()).getMonth() + 1 }), x = D(() => ({
+      borderless: !0,
+      color: "blue",
+      dragAttribute: q,
+      expanded: !0,
+      initialPage: $.value,
+      maxDate: t.maxDate,
+      minDate: t.minDate,
+      mode: "date",
+      modelConfig: N,
+      selectAttribute: z,
+      transparent: !0
+    })), R = D(() => ["time", "dateTime", "relativeDateTime"].includes(t.kDatePickerMode)), H = D(() => {
+      switch (t.timeGranularity) {
+        case "minutely":
+          return 60;
+        case "secondly":
+          return 1;
+        default:
+          return 60;
+      }
+    }), V = (n, a) => n > a, C = () => {
+      if (e.value && R.value)
+        if (t.isRange && e.value.start && e.value.end) {
+          const n = e.value;
+          s.value = u(n.start, t.timeGranularity), r.value = u(n.end, t.timeGranularity);
+        } else e.value instanceof Date ? s.value = u(e.value, t.timeGranularity) : s.value = u(/* @__PURE__ */ new Date(), t.timeGranularity);
+    }, w = (n) => {
+      const a = n.split(":"), l = parseInt(a[0], 10), d = parseInt(a[1], 10), v = t.timeGranularity === "secondly" && a[2] ? parseInt(a[2], 10) : 0;
+      return { hours: l, minutes: d, seconds: v };
+    };
+    K(() => {
+      C(), o.value.start = s.value, o.value.end = r.value;
+    });
+    const N = { type: "number" }, q = {
+      key: "select-drag",
+      highlight: {
+        start: { contentClass: "vcal-day-drag-start" },
+        base: { contentClass: "vcal-day-drag-base" },
+        end: { contentClass: "vcal-day-drag-end" }
+      }
+    }, z = {
+      key: "select-calendar",
+      highlight: {
+        start: { contentClass: "vcal-day-start" },
+        base: { contentClass: "vcal-day-base" },
+        end: { contentClass: "vcal-day-end" }
+      }
+    };
+    h(() => s.value, (n) => {
+      if (n) {
+        if (e.value && t.isRange && "start" in e.value && e.value.start instanceof Date && "end" in e.value && e.value.end instanceof Date) {
+          const a = /* @__PURE__ */ new Date(), { hours: l, minutes: d, seconds: v } = w(n);
+          a.setHours(l, d, v, 0), e.value.start.setHours(a.getHours(), a.getMinutes(), a.getSeconds(), 0), f.value = V(e.value.start, e.value.end);
+        } else if (e.value instanceof Date) {
+          const a = /* @__PURE__ */ new Date(), { hours: l, minutes: d, seconds: v } = w(n);
+          a.setHours(l, d, v, 0), e.value.setHours(a.getHours(), a.getMinutes(), a.getSeconds(), 0);
+        }
+      }
+    }), h(() => r.value, (n) => {
+      if (n && e.value && t.isRange && "end" in e.value && e.value.end instanceof Date && "start" in e.value && e.value.start instanceof Date) {
+        const a = /* @__PURE__ */ new Date(), { hours: l, minutes: d, seconds: v } = w(n);
+        a.setHours(l, d, v, 0), e.value.end.setHours(a.getHours(), a.getMinutes(), a.getSeconds(), 0), f.value = V(e.value.start, e.value.end);
+      }
+    }), h(() => e.value, () => {
+      e.value && t.isRange && "start" in e.value && e.value.start instanceof Date && "end" in e.value && e.value.end instanceof Date ? (s.value = u(e.value.start, t.timeGranularity), r.value = u(e.value.end, t.timeGranularity), f.value = V(e.value.start, e.value.end)) : e.value instanceof Date && (s.value = u(e.value, t.timeGranularity));
+    }, { immediate: !0, deep: !0 }), h(() => t.timeGranularity, () => {
+      e.value && t.isRange && "start" in e.value && e.value.start instanceof Date ? o.value.start = u(e.value.start, t.timeGranularity) : e.value instanceof Date && (o.value.start = u(e.value, t.timeGranularity)), e.value && t.isRange && "end" in e.value && e.value.end instanceof Date && (o.value.end = u(e.value.end, t.timeGranularity));
+    });
+    const T = (n) => {
+      const a = e.value;
+      return t.isRange && a && n in a && a[n] instanceof Date;
+    }, O = () => {
+      s.value = o.value.start, r.value = o.value.end;
+    }, E = (n) => {
+      try {
+        return G(n, "EEE MMM d yyyy");
+      } catch (a) {
+        console.warn("Error formatting date:", a);
+      }
+    };
+    return Y({
+      resetTime: O,
+      initTimeInputs: C
+    }), (n, a) => (i(), m("div", _, [
+      t.isRange ? (i(), I(c(U), B({ key: 0 }, x.value, {
+        modelValue: e.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (l) => e.value = l),
+        modelModifiers: { range: !0 }
+      }), null, 16, ["modelValue"])) : (i(), I(c(U), B({ key: 1 }, x.value, {
+        modelValue: e.value,
+        "onUpdate:modelValue": a[1] || (a[1] = (l) => e.value = l)
+      }), null, 16, ["modelValue"])),
+      R.value ? (i(), m("div", ee, [
+        M("div", te, [
+          M("label", {
+            class: "time-input-label",
+            for: `time-input-start-${c(g)}`
+          }, [
+            T("start") ? (i(), m("span", ne, k(E(e.value.start)), 1)) : e.value && e.value instanceof Date ? (i(), m("span", le, k(E(e.value)), 1)) : y("", !0)
+          ], 8, ae),
+          S(M("input", {
+            id: `time-input-start-${c(g)}`,
+            "onUpdate:modelValue": a[2] || (a[2] = (l) => s.value = l),
+            class: F(["time-input-start", { "input-error": f.value }]),
+            "data-testid": "time-input-start",
+            step: H.value,
+            type: "time"
+          }, null, 10, ue), [
+            [A, s.value]
+          ]),
+          M("label", {
+            class: "time-input-label",
+            for: `time-input-end-${c(g)}`
+          }, [
+            T("end") ? (i(), m("span", ie, k(c(G)(e.value.end, "EEE MMM d yyyy")), 1)) : y("", !0)
+          ], 8, se),
+          t.isRange ? S((i(), m("input", {
+            key: 0,
+            id: `time-input-end-${c(g)}`,
+            "onUpdate:modelValue": a[3] || (a[3] = (l) => r.value = l),
+            class: F(["time-input-end", { "input-error": f.value }]),
+            "data-testid": "time-input-end",
+            step: H.value,
+            type: "time"
+          }, null, 10, re)), [
+            [A, r.value]
+          ]) : y("", !0)
         ]),
-        l("div", w, [
-          i(e.$slots, "card-content", {}, () => [
-            (r(), t(s, null, c(3, (a) => n(d, {
-              key: a,
-              width: "100"
-            })), 64)),
-            n(d, { width: "50" })
-          ], !0)
-        ]),
-        l("div", x, [
-          i(e.$slots, "card-footer", {}, () => [
-            (r(), t(s, null, c(2, (a) => n(d, {
-              key: a,
-              height: "2",
-              width: "5"
-            })), 64))
-          ], !0)
-        ])
-      ]))), 128))
+        L(Q, {
+          mode: "out-in",
+          name: "kongponents-fade-transition"
+        }, {
+          default: X(() => [
+            f.value && t.errorMessage ? (i(), m("div", oe, k(t.errorMessage), 1)) : y("", !0)
+          ]),
+          _: 1
+        })
+      ])) : y("", !0)
     ]));
   }
 });
 export {
-  E as default
+  ye as default
 };

package/dist/kongponents.es250.js

@@ -1,36 +1,66 @@
-import { defineComponent as i, useCssVars as d, createElementBlock as t, openBlock as n, Fragment as a, renderList as c, renderSlot as m, createVNode as k } from "vue";
-import f from "./kongponents.es58.js";
-const p = { class: "skeleton-table-wrapper" }, b = /* @__PURE__ */ i({
-  __name: "TableSkeleton",
+import { defineComponent as d, createBlock as i, openBlock as a, withCtx as e, createVNode as o, unref as r, Transition as l, createElementBlock as s, createCommentVNode as c, toDisplayString as u, renderSlot as m } from "vue";
+import b from "./kongponents.es24.js";
+/* empty css                 */
+import p from "./kongponents.es42.js";
+import f from "./kongponents.es33.js";
+import k from "./kongponents.es204.js";
+const g = {
+  key: 0,
+  class: "bulk-actions-dropdown-trigger-count"
+}, D = /* @__PURE__ */ d({
+  __name: "BulkActionsDropdown",
   props: {
-    rows: {},
-    columns: {}
+    disabled: { type: Boolean },
+    count: { default: "" },
+    buttonLabel: { default: "" }
   },
-  setup(s) {
-    d((e) => ({
-      v11294cba: e.columns
-    }));
-    const u = (e, r) => e === 1 && r === 1 || e !== 1 && r !== 1 ? "25" : "50";
-    return (e, r) => (n(), t("div", p, [
-      (n(!0), t(a, null, c(s.rows, (l) => (n(), t("div", {
-        key: l,
-        class: "skeleton-table-row"
-      }, [
-        m(e.$slots, "default", {}, () => [
-          (n(!0), t(a, null, c(s.columns, (o) => (n(), t("div", {
-            key: o,
-            class: "skeleton-cell-container"
-          }, [
-            k(f, {
-              class: "skeleton-cell",
-              width: u(o, l)
-            }, null, 8, ["width"])
-          ]))), 128))
-        ], !0)
-      ]))), 128))
-    ]));
+  setup(t) {
+    return (n, w) => (a(), i(p, {
+      class: "bulk-actions-dropdown",
+      "data-testid": "bulk-actions-dropdown",
+      disabled: t.disabled,
+      "kpop-attributes": { placement: "bottom-end" }
+    }, {
+      items: e(() => [
+        m(n.$slots, "items", {}, void 0, !0)
+      ]),
+      default: e(() => [
+        o(b, {
+          placement: "bottom-end",
+          text: "Selected Row Actions"
+        }, {
+          default: e(() => [
+            o(f, {
+              appearance: "secondary",
+              "aria-label": t.buttonLabel,
+              class: "bulk-actions-dropdown-trigger",
+              "data-testid": "bulk-actions-dropdown-trigger",
+              disabled: t.disabled,
+              icon: "",
+              size: "large"
+            }, {
+              default: e(() => [
+                o(r(k), {
+                  class: "more-icon",
+                  decorative: ""
+                }),
+                o(l, { name: "kongponents-fade-transition" }, {
+                  default: e(() => [
+                    t.count ? (a(), s("span", g, u(t.count), 1)) : c("", !0)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "disabled"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 3
+    }, 8, ["disabled"]));
   }
 });
 export {
-  b as default
+  D as default
 };

package/dist/kongponents.es252.js

@@ -1,25 +1,4 @@
-import { defineComponent as s, createElementBlock as e, openBlock as t, Fragment as c, renderList as l, createElementVNode as m, createVNode as o } from "vue";
-import r from "./kongponents.es58.js";
-const a = { class: "skeleton-form-wrapper" }, f = /* @__PURE__ */ s({
-  __name: "FormSkeleton",
-  setup(i) {
-    return (d, p) => (t(), e("div", a, [
-      (t(), e(c, null, l(4, (n) => m("div", {
-        key: n,
-        class: "skeleton-form-row"
-      }, [
-        o(r, {
-          height: "2",
-          width: "10"
-        }),
-        o(r, {
-          height: "2",
-          width: "100"
-        })
-      ])), 64))
-    ]));
-  }
-});
+const I = "24px";
 export {
-  f as default
+  I as KUI_ICON_SIZE_50
 };

package/dist/{kongponents.es266.js → kongponents.es253.js}

@@ -1,5 +1,5 @@
 import { defineComponent as y, computed as s, createBlock as b, openBlock as d, resolveDynamicComponent as k, normalizeStyle as x, withCtx as S, createElementBlock as N } from "vue";
-import { KUI_ICON_SIZE_50 as u } from "./kongponents.es265.js";
+import { KUI_ICON_SIZE_50 as u } from "./kongponents.es252.js";
 const w = ["aria-hidden"], c = '<path d="M9.7 18.025L4 12.325L5.425 10.9L9.7 15.175L18.875 6L20.3 7.425L9.7 18.025Z" fill="currentColor"/>', z = /* @__PURE__ */ y({
   __name: "CheckIcon",
   props: {