@kong/kongponents 9.52.7 → 9.52.8

package/dist/kongponents.es350.js

@@ -1,8 +1,8 @@
-import r from "./kongponents.es442.js";
-import m from "./kongponents.es443.js";
-import h from "./kongponents.es444.js";
-import l from "./kongponents.es445.js";
-import c from "./kongponents.es446.js";
+import r from "./kongponents.es445.js";
+import m from "./kongponents.es446.js";
+import h from "./kongponents.es447.js";
+import l from "./kongponents.es448.js";
+import c from "./kongponents.es449.js";
 function e(t) {
   var o = -1, a = t == null ? 0 : t.length;
   for (this.clear(); ++o < a; ) {

package/dist/kongponents.es352.js

@@ -1,6 +1,6 @@
 import a from "./kongponents.es320.js";
-import s from "./kongponents.es451.js";
-import l from "./kongponents.es416.js";
+import s from "./kongponents.es454.js";
+import l from "./kongponents.es419.js";
 function d(e, t, m) {
   for (var i = -1, n = t.length, o = {}; ++i < n; ) {
     var r = t[i], f = a(e, r);

package/dist/kongponents.es353.js

@@ -1,5 +1,5 @@
-import t from "./kongponents.es448.js";
-import o from "./kongponents.es449.js";
+import t from "./kongponents.es451.js";
+import o from "./kongponents.es452.js";
 import r from "./kongponents.es344.js";
 function s(e) {
   return t(e, r, o);

package/dist/kongponents.es360.js

@@ -1,4 +1,4 @@
-import r from "./kongponents.es458.js";
+import r from "./kongponents.es457.js";
 var a = /^\s+/;
 function t(e) {
   return e && e.slice(0, r(e) + 1).replace(a, "");

package/dist/kongponents.es361.js

@@ -1,4 +1,4 @@
-import t from "./kongponents.es412.js";
+import t from "./kongponents.es415.js";
 import f from "./kongponents.es351.js";
 import m from "./kongponents.es328.js";
 import p from "./kongponents.es336.js";

package/dist/kongponents.es362.js

@@ -1,91 +1,182 @@
-import { defineComponent as x, useTemplateRef as _, openBlock as i, createElementBlock as r, Fragment as m, renderList as v, createBlock as u, withCtx as f, renderSlot as g, createElementVNode as S, toDisplayString as k, createTextVNode as h, createCommentVNode as B } from "vue";
-import E from "./kongponents.es232.js";
-const K = { ref: "itemsContainer" }, L = {
-  key: 1,
-  class: "select-group",
-  "data-propagate-clicks": "false"
-}, $ = { class: "select-group-title" }, V = { class: "select-item-description" }, A = ".select-item button:not(:disabled)", D = '.select-item[aria-selected="true"] button:not(:disabled)', q = /* @__PURE__ */ x({
-  __name: "KSelectItems",
+import { defineComponent as $, ref as u, computed as D, watch as L, onMounted as T, onBeforeMount as H, openBlock as c, createElementBlock as h, createVNode as o, withCtx as r, unref as f, createBlock as g, withModifiers as v, createSlots as K, createCommentVNode as N, createElementVNode as w, Fragment as P, renderList as z, createTextVNode as C, toDisplayString as E, nextTick as U } from "vue";
+import { debounce as q } from "./kongponents.es170.js";
+import A from "./kongponents.es192.js";
+import J from "./kongponents.es186.js";
+import R from "./kongponents.es273.js";
+import p from "./kongponents.es32.js";
+import F from "./kongponents.es36.js";
+import O from "./kongponents.es43.js";
+import j from "./kongponents.es44.js";
+import G from "./kongponents.es49.js";
+import Q from "./kongponents.es24.js";
+/* empty css                 */
+import W from "./kongponents.es51.js";
+const X = { class: "table-column-visibility-menu" }, Y = { class: "apply-button-wrapper" }, me = /* @__PURE__ */ $({
+  __name: "ColumnVisibilityMenu",
   props: {
-    items: { default: () => [] },
-    itemCreationEnabled: { type: Boolean },
-    filterString: { default: "" },
-    itemCreationValid: { type: Boolean, default: !0 }
+    columns: {},
+    tableId: {},
+    visibilityPreferences: {},
+    disabled: { type: Boolean }
   },
-  emits: ["selected", "add-item"],
-  setup(d, { expose: b, emit: y }) {
-    const I = y, p = (t) => "items" in t && Array.isArray(t.items), w = (t) => I("selected", t), C = _("itemsContainer"), T = (t) => {
-      var s, a;
-      const n = C.value;
-      if (!n)
+  emits: ["update"],
+  setup(a, { emit: V }) {
+    const x = V, y = u(!1), s = u({}), d = u(!1), n = u(), i = u(""), b = () => {
+      s.value = a.columns.reduce((e, t) => (e[t.key] = a.visibilityPreferences[t.key] === void 0 ? !0 : a.visibilityPreferences[t.key], e), {}), d.value = !1;
+    }, I = q((e) => {
+      i.value = e, n.value && m(n.value);
+    }, 500), k = D(() => i.value ? a.columns.filter((e) => (e.label ? e.label : e.key).toLowerCase().includes(i.value.toLowerCase())) : a.columns), S = () => {
+      x("update", JSON.parse(JSON.stringify(s.value))), d.value = !1, i.value = "";
+    }, B = (e) => {
+      y.value = e, e && n.value && U(() => {
+        n.value && m(n.value);
+      }), !e && d.value && b(), e || (i.value = "");
+    }, m = (e) => {
+      if (!(e.scrollHeight > e.clientHeight)) {
+        e.classList.remove("is-bottom-overflowing");
         return;
-      const e = n.querySelectorAll(A);
-      if (!(e != null && e.length))
-        return;
-      const o = n.querySelector(D);
-      if (o) {
-        const l = [...e].indexOf(o);
-        (s = e[t === "down" ? l + 1 : l - 1]) == null || s.focus();
-      } else
-        (a = e[t === "down" ? 0 : e.length - 1]) == null || a.focus();
-    }, c = ({ target: t, key: n }) => {
-      var e;
-      if (n === "ArrowDown" || n === "ArrowUp") {
-        const o = (e = C.value) == null ? void 0 : e.querySelectorAll(A);
-        if (o != null && o.length) {
-          const s = [...o].indexOf(t), a = n === "ArrowDown" ? s + 1 : s - 1, l = o[a];
-          l == null || l.focus();
-        }
       }
+      const l = e.scrollHeight < e.clientHeight + e.scrollTop + 1;
+      e.classList.toggle("is-bottom-overflowing", !l);
     };
-    return b({ setFocus: T }), (t, n) => (i(), r("div", K, [
-      (i(!0), r(m, null, v(d.items, (e, o) => (i(), r(m, {
-        key: p(e) ? `${e.key || e.label}-group` : e.key || e.value || o
-      }, [
-        p(e) ? (i(), r("div", L, [
-          S("span", $, k(e.label), 1),
-          (i(!0), r(m, null, v(e.items, (s) => (i(), u(E, {
-            key: s.key,
-            item: s,
-            onKeydown: c,
-            onSelected: w
-          }, {
-            content: f(() => [
-              g(t.$slots, "content", { item: s }, void 0, !0)
+    return L(() => a.visibilityPreferences, () => {
+      b();
+    }, { immediate: !0 }), T(() => {
+      n.value && (n.value.addEventListener("scroll", (e) => {
+        const t = e.currentTarget;
+        m(t);
+      }), m(n.value));
+    }), H(() => {
+      b();
+    }), (e, t) => (c(), h("div", X, [
+      o(O, {
+        "data-testid": "table-column-visibility-menu",
+        disabled: a.disabled,
+        "kpop-attributes": { placement: "bottom-end" },
+        onToggleDropdown: B
+      }, {
+        items: r(() => [
+          i.value || k.value.length > 5 ? (c(), g(G, {
+            key: 0,
+            modelValue: i.value,
+            "onUpdate:modelValue": t[1] || (t[1] = (l) => i.value = l),
+            modelModifiers: { trim: !0 },
+            autocapitalize: "off",
+            autocomplete: "off",
+            autocorrect: "off",
+            class: "search-input",
+            "data-testid": "search-input",
+            name: "column-search",
+            placeholder: "Search columns",
+            spellcheck: "false",
+            type: "search",
+            onClick: t[2] || (t[2] = v(() => {
+            }, ["stop"])),
+            onInput: f(I)
+          }, K({
+            before: r(() => [
+              o(f(J), { decorative: "" })
             ]),
             _: 2
-          }, 1032, ["item"]))), 128))
-        ])) : (i(), u(E, {
-          key: 0,
-          item: e,
-          onKeydown: c,
-          onSelected: w
-        }, {
-          content: f(() => [
-            g(t.$slots, "content", { item: e }, void 0, !0)
-          ]),
-          _: 2
-        }, 1032, ["item"]))
-      ], 64))), 128)),
-      d.itemCreationEnabled ? (i(), u(E, {
-        key: "select-add-item",
-        class: "select-add-item",
-        "data-testid": "select-add-item",
-        item: { label: `${d.filterString} (Add new value)`, value: "add_item", disabled: !d.itemCreationValid },
-        onKeydown: c,
-        onSelected: n[0] || (n[0] = (e) => t.$emit("add-item"))
-      }, {
-        content: f(() => [
-          S("div", V, [
-            h(k(d.filterString) + " ", 1),
-            n[1] || (n[1] = S("span", { class: "select-item-new-indicator" }, "(Add new value)", -1))
+          }, [
+            i.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] = v(() => i.value = "", ["stop"]))
+                }, {
+                  default: r(() => [
+                    o(f(A), { decorative: "" })
+                  ]),
+                  _: 1
+                })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "onInput"])) : N("", !0),
+          w("div", {
+            ref_key: "menuItemsRef",
+            ref: n,
+            class: "menu-items-wrapper"
+          }, [
+            (c(!0), h(P, null, z(k.value, (l) => (c(), g(j, {
+              key: l.key,
+              class: "column-visibility-menu-item",
+              "data-testid": `column-visibility-menu-item-${l.key}`,
+              onClick: v(() => {
+                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": `${a.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: `${a.tableId}-${l.key}-visibility-checkbox-label`,
+                  class: "visibility-checkbox-label",
+                  title: l.label
+                }, {
+                  default: r(() => [
+                    C(E(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: a.disabled,
+                icon: "",
+                size: "large"
+              }, {
+                default: r(() => [
+                  o(f(R), { decorative: "" })
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["text"])
+        ]),
         _: 1
-      }, 8, ["item"])) : B("", !0)
-    ], 512));
+      }, 8, ["disabled"])
+    ]));
   }
 });
 export {
-  q as default
+  me as default
 };

package/dist/kongponents.es364.js

@@ -1,47 +1,136 @@
-import { defineComponent as r, openBlock as c, createElementBlock as u, createElementVNode as l, withKeys as s, withModifiers as n, normalizeClass as v, renderSlot as w, createTextVNode as b, toDisplayString as f } from "vue";
-const k = ["aria-selected", "data-testid"], y = { class: "select-item-container" }, $ = ["disabled", "value"], h = { class: "select-item-label" }, K = /* @__PURE__ */ r({
-  __name: "KSelectItem",
-  props: {
-    item: {}
-  },
-  emits: ["selected", "arrow-down", "arrow-up"],
-  setup(e, { emit: o }) {
-    const a = o, d = (t) => {
-      if (e.item.disabled) {
-        t.stopPropagation();
-        return;
-      }
-      a("selected", e.item);
-    };
-    return (t, i) => (c(), u("div", {
-      key: e.item.key,
-      "aria-selected": e.item.selected,
-      class: "select-item",
-      "data-testid": `select-item-${e.item.value}`,
-      role: "option"
-    }, [
-      l("div", y, [
-        l("button", {
-          class: v({ selected: e.item.selected }),
-          disabled: e.item.disabled === !0 ? !0 : void 0,
-          type: "button",
-          value: e.item.value,
-          onClick: d,
-          onKeydown: [
-            i[0] || (i[0] = s(n((m) => t.$emit("arrow-down"), ["prevent"]), ["down"])),
-            i[1] || (i[1] = s(n((m) => t.$emit("arrow-up"), ["prevent"]), ["up"]))
-          ]
-        }, [
-          l("span", h, [
-            w(t.$slots, "content", {}, () => [
-              b(f(e.item.label), 1)
-            ], !0)
-          ])
-        ], 42, $)
-      ])
-    ], 8, k));
+function u() {
+  return typeof window < "u";
+}
+function a(t) {
+  return m(t) ? (t.nodeName || "").toLowerCase() : "#document";
+}
+function i(t) {
+  var n;
+  return (t == null || (n = t.ownerDocument) == null ? void 0 : n.defaultView) || window;
+}
+function L(t) {
+  var n;
+  return (n = (m(t) ? t.ownerDocument : t.document) || window.document) == null ? void 0 : n.documentElement;
+}
+function m(t) {
+  return u() ? t instanceof Node || t instanceof i(t).Node : !1;
+}
+function h(t) {
+  return u() ? t instanceof Element || t instanceof i(t).Element : !1;
+}
+function g(t) {
+  return u() ? t instanceof HTMLElement || t instanceof i(t).HTMLElement : !1;
+}
+function p(t) {
+  return !u() || typeof ShadowRoot > "u" ? !1 : t instanceof ShadowRoot || t instanceof i(t).ShadowRoot;
+}
+function y(t) {
+  const {
+    overflow: n,
+    overflowX: r,
+    overflowY: c,
+    display: e
+  } = b(t);
+  return /auto|scroll|overlay|hidden|clip/.test(n + c + r) && e !== "inline" && e !== "contents";
+}
+function _(t) {
+  return /^(table|td|th)$/.test(a(t));
+}
+function T(t) {
+  try {
+    if (t.matches(":popover-open"))
+      return !0;
+  } catch {
   }
-});
+  try {
+    return t.matches(":modal");
+  } catch {
+    return !1;
+  }
+}
+const v = /transform|translate|scale|rotate|perspective|filter/, C = /paint|layout|strict|content/, o = (t) => !!t && t !== "none";
+let s;
+function D(t) {
+  const n = h(t) ? b(t) : t;
+  return o(n.transform) || o(n.translate) || o(n.scale) || o(n.rotate) || o(n.perspective) || !R() && (o(n.backdropFilter) || o(n.filter)) || v.test(n.willChange || "") || C.test(n.contain || "");
+}
+function W(t) {
+  let n = f(t);
+  for (; g(n) && !N(n); ) {
+    if (D(n))
+      return n;
+    if (T(n))
+      return null;
+    n = f(n);
+  }
+  return null;
+}
+function R() {
+  return s == null && (s = typeof CSS < "u" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none")), s;
+}
+function N(t) {
+  return /^(html|body|#document)$/.test(a(t));
+}
+function b(t) {
+  return i(t).getComputedStyle(t);
+}
+function $(t) {
+  return h(t) ? {
+    scrollLeft: t.scrollLeft,
+    scrollTop: t.scrollTop
+  } : {
+    scrollLeft: t.scrollX,
+    scrollTop: t.scrollY
+  };
+}
+function f(t) {
+  if (a(t) === "html")
+    return t;
+  const n = (
+    // Step into the shadow DOM of the parent of a slotted node.
+    t.assignedSlot || // DOM Element detected.
+    t.parentNode || // ShadowRoot detected.
+    p(t) && t.host || // Fallback.
+    L(t)
+  );
+  return p(n) ? n.host : n;
+}
+function S(t) {
+  const n = f(t);
+  return N(n) ? t.ownerDocument ? t.ownerDocument.body : t.body : g(n) && y(n) ? n : S(n);
+}
+function w(t, n, r) {
+  var c;
+  n === void 0 && (n = []), r === void 0 && (r = !0);
+  const e = S(t), E = e === ((c = t.ownerDocument) == null ? void 0 : c.body), l = i(e);
+  if (E) {
+    const d = k(l);
+    return n.concat(l, l.visualViewport || [], y(e) ? e : [], d && r ? w(d) : []);
+  } else
+    return n.concat(e, w(e, [], r));
+}
+function k(t) {
+  return t.parent && Object.getPrototypeOf(t.parent) ? t.frameElement : null;
+}
 export {
-  K as default
+  b as getComputedStyle,
+  W as getContainingBlock,
+  L as getDocumentElement,
+  k as getFrameElement,
+  S as getNearestOverflowAncestor,
+  a as getNodeName,
+  $ as getNodeScroll,
+  w as getOverflowAncestors,
+  f as getParentNode,
+  i as getWindow,
+  D as isContainingBlock,
+  h as isElement,
+  g as isHTMLElement,
+  N as isLastTraversableNode,
+  m as isNode,
+  y as isOverflowElement,
+  p as isShadowRoot,
+  _ as isTableElement,
+  T as isTopLayer,
+  R as isWebKit
 };

package/dist/kongponents.es365.js

@@ -0,0 +1,4 @@
+import f from "./kongponents.es239.js";
+export {
+  f as default
+};

package/dist/kongponents.es366.js

@@ -1,5 +1,5 @@
 import { reactive as Qr, computed as m, defineComponent as ae, ref as G, watch as fe, onMounted as gr, onUnmounted as en, toRefs as lo, nextTick as At, unref as y, openBlock as _, createBlock as pe, resolveDynamicComponent as xa, normalizeProps as Lt, mergeProps as dt, renderSlot as Wt, inject as jt, toRef as nr, normalizeClass as Z, withCtx as ee, createVNode as x, createElementVNode as F, createElementBlock as P, toDisplayString as me, createCommentVNode as Q, Fragment as ne, renderList as we, normalizeStyle as xt, withKeys as Yn, withDirectives as Fa, watchEffect as Ra, provide as Bt, guardReactiveProps as jr, createTextVNode as tn, isRef as Ct, resolveComponent as Le, Transition as Ha, resolveDirective as uo, toHandlers as co, withModifiers as fo } from "vue";
-import { createPopper as vo } from "./kongponents.es373.js";
+import { createPopper as vo } from "./kongponents.es404.js";
 var ho = Object.defineProperty, mo = (e, t, r) => t in e ? ho(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, k = (e, t, r) => (mo(e, typeof t != "symbol" ? t + "" : t, r), r), er = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function Wa(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;