@kong/kongponents 9.49.2-pr.3048.9ece6bd.0 → 9.49.2

package/dist/kongponents.es261.js

@@ -1,4 +1,25 @@
-const I = "24px";
+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))
+    ]));
+  }
+});
 export {
-  I as KUI_ICON_SIZE_50
+  f as default
 };

package/dist/kongponents.es263.js

@@ -1,121 +1,47 @@
-import { defineComponent as h, computed as s, createBlock as b, openBlock as d, resolveDynamicComponent as S, normalizeStyle as x, withCtx as C, createElementBlock as H } from "vue";
-import { KUI_ICON_SIZE_50 as u } from "./kongponents.es261.js";
-const N = ["aria-hidden"], c = '<path d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="currentColor"/>', I = /* @__PURE__ */ h({
-  __name: "ServiceDocumentIcon",
+import { defineComponent as d, useCssVars as i, ref as s, computed as u, onMounted as m, onUnmounted as g, createElementBlock as l, openBlock as a, createElementVNode as o, createCommentVNode as v, unref as p, normalizeStyle as f } from "vue";
+import h from "./kongponents.es361.js";
+const I = {
+  class: "fullscreen-loading-container",
+  "data-testid": "full-screen-loader"
+}, _ = ["src"], k = {
+  key: 0,
+  class: "progress"
+}, z = /* @__PURE__ */ d({
+  __name: "FullScreenKongSkeleton",
   props: {
-    /** The accessibility text provided to screen readers */
-    title: {
-      type: String,
-      required: !1,
-      default: ""
-    },
-    /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */
-    color: {
-      type: String,
-      required: !1,
-      default: "currentColor"
-    },
-    /** The CSS display property for the icon. Defaults to `block` */
-    display: {
-      type: String,
-      required: !1,
-      default: "block"
-    },
-    /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */
-    decorative: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    /** The icon size */
-    size: {
-      type: [Number, String],
-      required: !1,
-      default: u,
-      // if setting to the imported const fails, just pass a number of 24 as the default.
-      validator: (r) => {
-        if (typeof r == "number" && r > 0)
-          return !0;
-        if (typeof r == "string") {
-          const e = String(r).replace(/px/gi, ""), i = Number(e);
-          if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
-            return !0;
-        }
-        return !1;
-      }
-    },
-    /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */
-    as: {
-      type: String,
-      required: !1,
-      default: "span"
-    },
-    /**
-     * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).
-     * Typically only set to `true` during snapshot testing.
-     * Defaults to `false`.
-     */
-    staticIds: {
-      type: Boolean,
-      default: !1
-    }
+    progress: {},
+    hideProgress: { type: Boolean },
+    zIndex: {}
   },
   setup(r) {
-    const e = r, i = s(() => {
-      if (typeof e.size == "number" && e.size > 0)
-        return `${e.size}px`;
-      if (typeof e.size == "string") {
-        const n = String(e.size).replace(/px/gi, ""), t = Number(n);
-        if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
-          return `${t}px`;
-      }
-      return u;
-    }), p = s(() => ({
-      boxSizing: "border-box",
-      color: e.color,
-      display: e.display,
-      flexShrink: "0",
-      height: i.value,
-      lineHeight: "0",
-      width: i.value,
-      pointerEvents: e.decorative ? "none" : void 0
-    })), f = (n) => {
-      const t = {}, y = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (o, a) => {
-        const l = `${y}-${a}`;
-        return t[a] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (o, a) => t[a] ? `#${t[a]}` : o);
-    }, g = {
-      "<": "&lt;",
-      ">": "&gt;",
-      '"': "&quot;",
-      "'": "&#39;",
-      "&": "&amp;"
-    }, m = (n) => n.replace(/[<>"'&]/g, (t) => g[t]), v = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? c : f(c)}`;
-    return (n, t) => (d(), b(S(r.as), {
-      "aria-hidden": r.decorative ? "true" : void 0,
-      class: "kui-icon service-document-icon",
-      "data-testid": "kui-icon-wrapper-service-document-icon",
-      style: x(p.value),
-      tabindex: r.decorative ? "-1" : void 0
-    }, {
-      default: C(() => [
-        (d(), H("svg", {
-          "aria-hidden": r.decorative ? "true" : void 0,
-          "data-testid": "kui-icon-svg-service-document-icon",
-          fill: "none",
-          height: "100%",
-          role: "img",
-          viewBox: "0 0 24 24",
-          width: "100%",
-          xmlns: "http://www.w3.org/2000/svg",
-          innerHTML: v
-        }, null, 8, N))
-      ]),
-      _: 1
-    }, 8, ["aria-hidden", "style", "tabindex"]));
+    i((t) => ({
+      v4d434712: t.zIndex
+    }));
+    const n = s(0), e = s(0), c = u(() => r.progress !== null ? r.progress : e.value);
+    return m(() => {
+      r.progress || (n.value = setInterval(() => {
+        e.value >= 100 && (clearInterval(n.value), e.value = 100), e.value = Math.min(e.value + Math.ceil(Math.random() * 10 * 30), 100);
+      }, 200));
+    }), g(() => {
+      clearInterval(n.value);
+    }), (t, x) => (a(), l("div", I, [
+      o("div", null, [
+        o("img", {
+          alt: "Loading",
+          src: p(h)
+        }, null, 8, _),
+        r.hideProgress ? v("", !0) : (a(), l("div", k, [
+          o("div", {
+            class: "progress-bar",
+            role: "progressbar",
+            style: f({ width: `${c.value}%` }),
+            title: "Loading"
+          }, null, 4)
+        ]))
+      ])
+    ]));
   }
 });
 export {
-  I as default
+  z as default
 };

package/dist/kongponents.es265.js

@@ -1,219 +1,43 @@
-/*!
-* tabbable 6.4.0
-* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
-*/
-var T = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert] *)", "textarea:not([inert]):not([inert] *)", "a[href]:not([inert]):not([inert] *)", "button:not([inert]):not([inert] *)", "[tabindex]:not(slot):not([inert]):not([inert] *)", "audio[controls]:not([inert]):not([inert] *)", "video[controls]:not([inert]):not([inert] *)", '[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)', "details>summary:first-of-type:not([inert]):not([inert] *)", "details:not([inert]):not([inert] *)"], v = /* @__PURE__ */ T.join(","), I = typeof Element > "u", d = I ? function() {
-} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector, b = !I && Element.prototype.getRootNode ? function(i) {
-  var t;
-  return i == null || (t = i.getRootNode) === null || t === void 0 ? void 0 : t.call(i);
-} : function(i) {
-  return i == null ? void 0 : i.ownerDocument;
-}, h = function(t, e) {
-  var r;
-  e === void 0 && (e = !0);
-  var a = t == null || (r = t.getAttribute) === null || r === void 0 ? void 0 : r.call(t, "inert"), l = a === "" || a === "true", n = l || e && t && // closest does not exist on shadow roots, so we fall back to a manual
-  // lookup upward, in case it is not defined.
-  (typeof t.closest == "function" ? t.closest("[inert]") : h(t.parentNode));
-  return n;
-}, x = function(t) {
-  var e, r = t == null || (e = t.getAttribute) === null || e === void 0 ? void 0 : e.call(t, "contenteditable");
-  return r === "" || r === "true";
-}, m = function(t, e, r) {
-  if (h(t))
-    return [];
-  var a = Array.prototype.slice.apply(t.querySelectorAll(v));
-  return e && d.call(t, v) && a.unshift(t), a = a.filter(r), a;
-}, g = function(t, e, r) {
-  for (var a = [], l = Array.from(t); l.length; ) {
-    var n = l.shift();
-    if (!h(n, !1))
-      if (n.tagName === "SLOT") {
-        var c = n.assignedElements(), o = c.length ? c : n.children, u = g(o, !0, r);
-        r.flatten ? a.push.apply(a, u) : a.push({
-          scopeParent: n,
-          candidates: u
-        });
-      } else {
-        var s = d.call(n, v);
-        s && r.filter(n) && (e || !t.includes(n)) && a.push(n);
-        var f = n.shadowRoot || // check for an undisclosed shadow
-        typeof r.getShadowRoot == "function" && r.getShadowRoot(n), A = !h(f, !1) && (!r.shadowRootFilter || r.shadowRootFilter(n));
-        if (f && A) {
-          var p = g(f === !0 ? n.children : f.children, !0, r);
-          r.flatten ? a.push.apply(a, p) : a.push({
-            scopeParent: n,
-            candidates: p
-          });
-        } else
-          l.unshift.apply(l, n.children);
-      }
+import { defineComponent as u, useCssVars as c, ref as o, computed as v, onMounted as m, onUnmounted as p, createElementBlock as a, openBlock as i, createElementVNode as s, createCommentVNode as g, normalizeStyle as f } from "vue";
+const h = {
+  class: "fullscreen-loading-container",
+  "data-testid": "full-screen-spinner-loader"
+}, I = {
+  key: 0,
+  class: "progress"
+}, y = /* @__PURE__ */ u({
+  __name: "FullScreenGenericSpinner",
+  props: {
+    progress: {},
+    hideProgress: { type: Boolean },
+    zIndex: {}
+  },
+  setup(r) {
+    c((l) => ({
+      v07a3a490: l.zIndex
+    }));
+    const n = o(0), e = o(0), d = v(() => r.progress !== null ? r.progress : e.value);
+    return m(() => {
+      r.progress || (n.value = setInterval(() => {
+        e.value >= 100 && (clearInterval(n.value), e.value = 100), e.value = Math.min(e.value + Math.ceil(Math.random() * 10 * 30), 100);
+      }, 200));
+    }), p(() => {
+      clearInterval(n.value);
+    }), (l, t) => (i(), a("div", h, [
+      s("div", null, [
+        t[0] || (t[0] = s("div", { class: "spinner-loader" }, null, -1)),
+        r.hideProgress ? g("", !0) : (i(), a("div", I, [
+          s("div", {
+            class: "progress-bar",
+            role: "progressbar",
+            style: f({ width: `${d.value}%` }),
+            title: "Loading"
+          }, null, 4)
+        ]))
+      ])
+    ]));
   }
-  return a;
-}, C = function(t) {
-  return !isNaN(parseInt(t.getAttribute("tabindex"), 10));
-}, N = function(t) {
-  if (!t)
-    throw new Error("No node provided");
-  return t.tabIndex < 0 && (/^(AUDIO|VIDEO|DETAILS)$/.test(t.tagName) || x(t)) && !C(t) ? 0 : t.tabIndex;
-}, O = function(t, e) {
-  var r = N(t);
-  return r < 0 && e && !C(t) ? 0 : r;
-}, k = function(t, e) {
-  return t.tabIndex === e.tabIndex ? t.documentOrder - e.documentOrder : t.tabIndex - e.tabIndex;
-}, R = function(t) {
-  return t.tagName === "INPUT";
-}, F = function(t) {
-  return R(t) && t.type === "hidden";
-}, D = function(t) {
-  var e = t.tagName === "DETAILS" && Array.prototype.slice.apply(t.children).some(function(r) {
-    return r.tagName === "SUMMARY";
-  });
-  return e;
-}, M = function(t, e) {
-  for (var r = 0; r < t.length; r++)
-    if (t[r].checked && t[r].form === e)
-      return t[r];
-}, P = function(t) {
-  if (!t.name)
-    return !0;
-  var e = t.form || b(t), r = function(c) {
-    return e.querySelectorAll('input[type="radio"][name="' + c + '"]');
-  }, a;
-  if (typeof window < "u" && typeof window.CSS < "u" && typeof window.CSS.escape == "function")
-    a = r(window.CSS.escape(t.name));
-  else
-    try {
-      a = r(t.name);
-    } catch (n) {
-      return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", n.message), !1;
-    }
-  var l = M(a, t.form);
-  return !l || l === t;
-}, L = function(t) {
-  return R(t) && t.type === "radio";
-}, V = function(t) {
-  return L(t) && !P(t);
-}, B = function(t) {
-  var e, r = t && b(t), a = (e = r) === null || e === void 0 ? void 0 : e.host, l = !1;
-  if (r && r !== t) {
-    var n, c, o;
-    for (l = !!((n = a) !== null && n !== void 0 && (c = n.ownerDocument) !== null && c !== void 0 && c.contains(a) || t != null && (o = t.ownerDocument) !== null && o !== void 0 && o.contains(t)); !l && a; ) {
-      var u, s, f;
-      r = b(a), a = (u = r) === null || u === void 0 ? void 0 : u.host, l = !!((s = a) !== null && s !== void 0 && (f = s.ownerDocument) !== null && f !== void 0 && f.contains(a));
-    }
-  }
-  return l;
-}, w = function(t) {
-  var e = t.getBoundingClientRect(), r = e.width, a = e.height;
-  return r === 0 && a === 0;
-}, q = function(t, e) {
-  var r = e.displayCheck, a = e.getShadowRoot;
-  if (r === "full-native" && "checkVisibility" in t) {
-    var l = t.checkVisibility({
-      // Checking opacity might be desirable for some use cases, but natively,
-      // opacity zero elements _are_ focusable and tabbable.
-      checkOpacity: !1,
-      opacityProperty: !1,
-      contentVisibilityAuto: !0,
-      visibilityProperty: !0,
-      // This is an alias for `visibilityProperty`. Contemporary browsers
-      // support both. However, this alias has wider browser support (Chrome
-      // >= 105 and Firefox >= 106, vs. Chrome >= 121 and Firefox >= 122), so
-      // we include it anyway.
-      checkVisibilityCSS: !0
-    });
-    return !l;
-  }
-  if (getComputedStyle(t).visibility === "hidden")
-    return !0;
-  var n = d.call(t, "details>summary:first-of-type"), c = n ? t.parentElement : t;
-  if (d.call(c, "details:not([open]) *"))
-    return !0;
-  if (!r || r === "full" || // full-native can run this branch when it falls through in case
-  // Element#checkVisibility is unsupported
-  r === "full-native" || r === "legacy-full") {
-    if (typeof a == "function") {
-      for (var o = t; t; ) {
-        var u = t.parentElement, s = b(t);
-        if (u && !u.shadowRoot && a(u) === !0)
-          return w(t);
-        t.assignedSlot ? t = t.assignedSlot : !u && s !== t.ownerDocument ? t = s.host : t = u;
-      }
-      t = o;
-    }
-    if (B(t))
-      return !t.getClientRects().length;
-    if (r !== "legacy-full")
-      return !0;
-  } else if (r === "non-zero-area")
-    return w(t);
-  return !1;
-}, U = function(t) {
-  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(t.tagName))
-    for (var e = t.parentElement; e; ) {
-      if (e.tagName === "FIELDSET" && e.disabled) {
-        for (var r = 0; r < e.children.length; r++) {
-          var a = e.children.item(r);
-          if (a.tagName === "LEGEND")
-            return d.call(e, "fieldset[disabled] *") ? !0 : !a.contains(t);
-        }
-        return !0;
-      }
-      e = e.parentElement;
-    }
-  return !1;
-}, y = function(t, e) {
-  return !(e.disabled || F(e) || q(e, t) || // For a details element with a summary, the summary element gets the focus
-  D(e) || U(e));
-}, S = function(t, e) {
-  return !(V(e) || N(e) < 0 || !y(t, e));
-}, j = function(t) {
-  var e = parseInt(t.getAttribute("tabindex"), 10);
-  return !!(isNaN(e) || e >= 0);
-}, E = function(t) {
-  var e = [], r = [];
-  return t.forEach(function(a, l) {
-    var n = !!a.scopeParent, c = n ? a.scopeParent : a, o = O(c, n), u = n ? E(a.candidates) : c;
-    o === 0 ? n ? e.push.apply(e, u) : e.push(c) : r.push({
-      documentOrder: l,
-      tabIndex: o,
-      item: a,
-      isScope: n,
-      content: u
-    });
-  }), r.sort(k).reduce(function(a, l) {
-    return l.isScope ? a.push.apply(a, l.content) : a.push(l.content), a;
-  }, []).concat(e);
-}, Z = function(t, e) {
-  e = e || {};
-  var r;
-  return e.getShadowRoot ? r = g([t], e.includeContainer, {
-    filter: S.bind(null, e),
-    flatten: !1,
-    getShadowRoot: e.getShadowRoot,
-    shadowRootFilter: j
-  }) : r = m(t, e.includeContainer, S.bind(null, e)), E(r);
-}, z = function(t, e) {
-  e = e || {};
-  var r;
-  return e.getShadowRoot ? r = g([t], e.includeContainer, {
-    filter: y.bind(null, e),
-    flatten: !0,
-    getShadowRoot: e.getShadowRoot
-  }) : r = m(t, e.includeContainer, y.bind(null, e)), r;
-}, G = function(t, e) {
-  if (e = e || {}, !t)
-    throw new Error("No node provided");
-  return d.call(t, v) === !1 ? !1 : S(e, t);
-}, W = /* @__PURE__ */ T.concat("iframe:not([inert]):not([inert] *)").join(","), X = function(t, e) {
-  if (e = e || {}, !t)
-    throw new Error("No node provided");
-  return d.call(t, W) === !1 ? !1 : y(e, t);
-};
+});
 export {
-  z as focusable,
-  N as getTabIndex,
-  X as isFocusable,
-  G as isTabbable,
-  Z as tabbable
+  y as default
 };

package/dist/kongponents.es267.js

@@ -1,9 +1,178 @@
-function n(a) {
-  if (a === null || a === !0 || a === !1)
-    return NaN;
-  var e = Number(a);
-  return isNaN(e) ? e : e < 0 ? Math.ceil(e) : Math.floor(e);
-}
+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.es190.js";
+import J from "./kongponents.es208.js";
+import R from "./kongponents.es254.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 {
-  n as default
+  me as default
 };