@kong/kongponents 9.64.21 → 9.64.22-pr.3445.cb5d2d1.0

package/dist/kongponents240.es.js

@@ -1,43 +1,248 @@
-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: "multiselect-item-container" }, $ = ["disabled", "value"], h = { class: "multiselect-item-label" }, K = /* @__PURE__ */ r({
-  __name: "KMultiselectItem",
+import { defineComponent as X, useCssVars as Y, useAttrs as Z, ref as r, useTemplateRef as A, computed as i, onMounted as _, resolveComponent as ee, openBlock as y, createBlock as k, unref as O, withCtx as v, createElementVNode as h, createVNode as g, createTextVNode as S, renderSlot as te, normalizeProps as le, guardReactiveProps as ae, createElementBlock as oe, createCommentVNode as ie, toDisplayString as ue, mergeProps as re, withModifiers as ne, nextTick as se } from "vue";
+import { KUI_SPACE_30 as ce } from "./kongponents182.es.js";
+import ve from "./kongponents62.es.js";
+import de from "./kongponents55.es.js";
+import B from "./kongponents66.es.js";
+import fe from "./kongponents60.es.js";
+import me from "./kongponents305.es.js";
+const pe = {
+  class: "filter-content",
+  "data-testid": "filter-pill-content"
+}, ye = { class: "default-layout" }, be = {
+  key: 0,
+  class: "operator"
+}, Ve = { class: "value" }, Ce = { class: "footer" }, qe = /* @__PURE__ */ X({
+  inheritAttrs: !1,
+  __name: "FilterPill",
   props: {
-    item: {}
+    filter: {},
+    initOpen: { type: Boolean, default: !1 },
+    selection: { default: () => {
+    } },
+    custom: { type: Boolean, default: !1 }
   },
-  emits: ["selected", "arrow-down", "arrow-up"],
-  setup(e, { emit: a }) {
-    const d = a, o = () => {
-      e.item.disabled || d("selected", e.item);
+  emits: ["apply", "close", "open", "clear"],
+  setup(e, { emit: E }) {
+    Y((t) => ({
+      f988e390: N.value
+    }));
+    const K = Z(), b = E, d = r(!1), V = A("filterPopper"), u = r(), n = r(), s = r(), c = r(), C = r(), x = r(), P = r(!0), U = A("inputField"), f = i(() => e.custom ? "custom" : e.filter.options && !e.filter.multiple ? "select" : e.filter.options && e.filter.multiple ? "multiselect" : "input"), F = i(() => {
+      switch (f.value) {
+        case "input":
+          return !n.value || n.value === "";
+        case "select":
+          return !s.value;
+        case "multiselect":
+          return !c.value || c.value.length === 0;
+        case "custom":
+          return !P.value;
+        default:
+          return !1;
+      }
+    }), m = i(() => e.filter.operators && e.filter.operators.length ? e.filter.operators : ["eq"]), T = (t) => {
+      u.value = t;
+    }, D = (t, l) => {
+      C.value = t, x.value = l;
+    }, I = (t) => {
+      P.value = t;
+    }, M = i(() => ({
+      value: C.value,
+      text: x.value,
+      options: e.filter.options,
+      multiple: e.filter.multiple,
+      operators: m.value,
+      operator: u.value,
+      setOperator: T,
+      setValue: D,
+      setApplyState: I
+    })), N = i(() => m.value.some((t) => t === "lte" || t === "gte") ? "205px" : "120px"), L = i(() => {
+      let t, l;
+      switch (f.value) {
+        case "input":
+          t = n.value, l = n.value;
+          break;
+        case "select":
+          t = s.value, l = e.filter?.options?.find(({ value: a }) => a === s.value)?.label ?? s.value?.toString();
+          break;
+        case "multiselect":
+          t = c.value, l = c.value?.map((a) => e.filter.options?.find(({ value: o }) => o === a))?.filter((a) => a !== void 0)?.map(({ label: a }) => a)?.join(", ");
+          break;
+        case "custom":
+          t = C.value, l = x.value;
+          break;
+      }
+      if (!(u.value === void 0 || t === void 0 || l === void 0))
+        return {
+          operator: u.value,
+          value: t,
+          text: l
+        };
+    }), R = i(() => {
+      if (e.selection?.operatorDelimiter !== void 0)
+        return e.selection.operatorDelimiter;
+      switch (e.selection?.operator) {
+        case "eq":
+          return " = ";
+        case "neq":
+          return " ≠ ";
+        case "lt":
+          return " < ";
+        case "lte":
+          return " ≤ ";
+        case "gt":
+          return " > ";
+        case "gte":
+          return " ≥ ";
+        default:
+          return ": ";
+      }
+    }), w = i(() => {
+      const t = {
+        eq: "Equals",
+        neq: "Not equals",
+        contains: "Contains",
+        exists: "Exists",
+        lt: "Less than",
+        lte: "Less than or equal to",
+        gt: "Greater than",
+        gte: "Greater than or equal to"
+      };
+      return m.value.map((l) => ({
+        label: t[l],
+        value: l
+      }));
+    }), $ = i(() => w.value.find(({ value: t }) => t === u.value)?.label ?? ""), G = () => {
+      f.value === "input" && U.value?.input?.focus();
+    }, W = () => {
+      u.value = e.selection?.operator ?? m.value?.[0], n.value = typeof e.selection?.value == "string" ? e.selection.value : void 0, s.value = e.filter.options?.find(({ value: t }) => t === e.selection?.value)?.value, c.value = e.filter.options?.filter(({ value: t }) => {
+        if (Array.isArray(e.selection?.value))
+          return e.selection.value.includes(`${t}`);
+      }).map(({ value: t }) => t), C.value = e.selection?.value, x.value = e.selection?.text, P.value = !0;
+    }, q = async () => {
+      W(), V.value && (V.value.showPopover(), d.value = !0, await se(), G()), b("open");
+    }, p = () => {
+      V.value && (V.value.hidePopover(), d.value = !1), b("close");
     };
-    return (i, t) => (c(), u("div", {
-      key: e.item.key || e.item.value,
-      "aria-selected": e.item.selected,
-      class: "multiselect-item",
-      "data-testid": `multiselect-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: o,
-          onKeydown: [
-            t[0] || (t[0] = s(n((m) => i.$emit("arrow-down"), ["prevent"]), ["down"])),
-            t[1] || (t[1] = s(n((m) => i.$emit("arrow-up"), ["prevent"]), ["up"]))
-          ]
-        }, [
-          l("span", h, [
-            w(i.$slots, "content", {}, () => [
-              b(f(e.item.label), 1)
+    _(() => {
+      e.initOpen && q();
+    });
+    const j = () => {
+      d.value && p();
+    }, z = () => {
+      b("apply", L.value), p();
+    }, H = () => {
+      p();
+    }, J = () => {
+      p(), b("clear");
+    }, Q = () => {
+      d.value ? p() : q();
+    };
+    return (t, l) => {
+      const a = ee("KButton");
+      return y(), k(ve, {
+        ref: "filterPopper",
+        "max-width": e.filter.maxWidth ?? "400px",
+        offset: `var(--kui-space-30, ${O(ce)})`,
+        placement: e.filter.placement ?? "bottom-start",
+        width: "auto",
+        onClose: j
+      }, {
+        default: v(() => [
+          g(me, re({
+            "content-label": e.selection?.text,
+            "data-testid": "filter-pill",
+            delimiter: R.value,
+            label: e.filter.label,
+            "pill-focus": d.value,
+            readonly: e.filter.readonly
+          }, O(K), {
+            onClear: J,
+            onClick: l[0] || (l[0] = ne(() => {
+            }, ["prevent", "stop"])),
+            onTrigger: Q
+          }), null, 16, ["content-label", "delimiter", "label", "pill-focus", "readonly"])
+        ]),
+        title: v(() => [
+          S(ue(e.filter.label), 1)
+        ]),
+        content: v(() => [
+          h("div", pe, [
+            te(t.$slots, "default", le(ae(M.value)), () => [
+              h("div", ye, [
+                m.value.length > 1 ? (y(), oe("div", be, [
+                  g(B, {
+                    modelValue: u.value,
+                    "onUpdate:modelValue": l[1] || (l[1] = (o) => u.value = o),
+                    items: w.value,
+                    "kpop-attributes": {
+                      popoverClasses: "force-operator-width"
+                    },
+                    label: "Operator",
+                    title: $.value
+                  }, null, 8, ["modelValue", "items", "title"])
+                ])) : ie("", !0),
+                h("div", Ve, [
+                  f.value === "select" ? (y(), k(B, {
+                    key: 0,
+                    modelValue: s.value,
+                    "onUpdate:modelValue": l[2] || (l[2] = (o) => s.value = o),
+                    "data-testid": "filter-pill-select",
+                    items: e.filter.options,
+                    label: "Value",
+                    placeholder: "Select a value"
+                  }, null, 8, ["modelValue", "items"])) : f.value === "multiselect" ? (y(), k(fe, {
+                    key: 1,
+                    modelValue: c.value,
+                    "onUpdate:modelValue": l[3] || (l[3] = (o) => c.value = o),
+                    "data-testid": "filter-pill-multiselect",
+                    items: e.filter.options,
+                    label: "Value",
+                    placeholder: "Select values"
+                  }, null, 8, ["modelValue", "items"])) : (y(), k(de, {
+                    key: 2,
+                    ref: "inputField",
+                    modelValue: n.value,
+                    "onUpdate:modelValue": l[4] || (l[4] = (o) => n.value = o),
+                    modelModifiers: { trim: !0 },
+                    "data-testid": "filter-pill-input",
+                    label: "Value",
+                    placeholder: "Enter a value"
+                  }, null, 8, ["modelValue"]))
+                ])
+              ])
             ], !0)
           ])
-        ], 42, $)
-      ])
-    ], 8, k));
+        ]),
+        footer: v(() => [
+          h("div", Ce, [
+            g(a, {
+              appearance: "secondary",
+              "data-testid": "filter-pill-cancel",
+              onClick: H
+            }, {
+              default: v(() => [...l[5] || (l[5] = [
+                S(" Cancel ", -1)
+              ])]),
+              _: 1
+            }),
+            g(a, {
+              appearance: "primary",
+              "data-testid": "filter-pill-apply",
+              disabled: F.value,
+              onClick: z
+            }, {
+              default: v(() => [...l[6] || (l[6] = [
+                S(" Apply ", -1)
+              ])]),
+              _: 1
+            }, 8, ["disabled"])
+          ])
+        ]),
+        _: 3
+      }, 8, ["max-width", "offset", "placement"]);
+    };
   }
 });
 export {
-  K as default
+  qe as default
 };

package/dist/kongponents242.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./kongponents202.cjs");exports.default=e.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),C=require("./kongponents178.cjs"),c=require("@kong/icons"),f=require("./kongponents38.cjs"),V=require("./kongponents42.cjs"),g=require("./kongponents49.cjs"),x=require("./kongponents50.cjs"),N=require("./kongponents55.cjs"),I=require("./kongponents30.cjs");;/* empty css                */const S=require("./kongponents57.cjs"),B={class:"table-column-visibility-menu"},M={class:"apply-button-wrapper"},q=e.defineComponent({__name:"ColumnVisibilityMenu",props:{columns:{},tableId:{},visibilityPreferences:{},disabled:{type:Boolean}},emits:["update"],setup(i,{emit:v}){const y=v,m=e.ref(!1),n=e.ref({}),u=e.ref(!1),r=e.ref(),o=e.ref(""),d=()=>{n.value=i.columns.reduce((t,l)=>(t[l.key]=i.visibilityPreferences[l.key]===void 0?!0:i.visibilityPreferences[l.key],t),{}),u.value=!1},p=C.debounce(t=>{o.value=t,r.value&&s(r.value)},500),b=e.computed(()=>o.value?i.columns.filter(t=>(t.label?t.label:t.key).toLowerCase().includes(o.value.toLowerCase())):i.columns),k=()=>{y("update",JSON.parse(JSON.stringify(n.value))),u.value=!1,o.value=""},h=t=>{m.value=t,t&&r.value&&e.nextTick(()=>{r.value&&s(r.value)}),!t&&u.value&&d(),t||(o.value="")},s=t=>{if(!(t.scrollHeight>t.clientHeight)){t.classList.remove("is-bottom-overflowing");return}const a=t.scrollHeight<t.clientHeight+t.scrollTop+1;t.classList.toggle("is-bottom-overflowing",!a)};return e.watch(()=>i.visibilityPreferences,()=>{d()},{immediate:!0}),e.onMounted(()=>{r.value&&(r.value.addEventListener("scroll",t=>{const l=t.currentTarget;s(l)}),s(r.value))}),e.onBeforeMount(()=>{d()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",B,[e.createVNode(g.default,{"data-testid":"table-column-visibility-menu",disabled:i.disabled,"kpop-attributes":{placement:"bottom-end"},onToggleDropdown:h},{items:e.withCtx(()=>[o.value||b.value.length>5?(e.openBlock(),e.createBlock(N.default,{key:0,modelValue:o.value,"onUpdate:modelValue":l[1]||(l[1]=a=>o.value=a),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:l[2]||(l[2]=e.withModifiers(()=>{},["stop"])),onInput:e.unref(p)},e.createSlots({before:e.withCtx(()=>[e.createVNode(e.unref(c.SearchIcon),{decorative:""})]),_:2},[o.value?{name:"after",fn:e.withCtx(()=>[e.createVNode(f.default,{appearance:"tertiary","aria-label":"Clear search",class:"clear-search","data-testid":"clear-search-button",icon:"",size:"small",onClick:l[0]||(l[0]=e.withModifiers(()=>o.value="",["stop"]))},{default:e.withCtx(()=>[e.createVNode(e.unref(c.CloseIcon),{decorative:""})]),_:1})]),key:"0"}:void 0]),1032,["modelValue","onInput"])):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"menuItemsRef",ref:r,class:"menu-items-wrapper"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,a=>(e.openBlock(),e.createBlock(x.default,{key:a.key,class:"column-visibility-menu-item","data-testid":`column-visibility-menu-item-${a.key}`,onClick:e.withModifiers(()=>{n.value[a.key]=!n.value[a.key],u.value=!0},["stop"])},{default:e.withCtx(()=>[e.createVNode(V.default,{modelValue:n.value[a.key],"onUpdate:modelValue":w=>n.value[a.key]=w,"aria-labelledby":`${i.tableId}-${a.key}-visibility-checkbox-label`,"data-testid":`column-visibility-checkbox-${a.key}`},null,8,["modelValue","onUpdate:modelValue","aria-labelledby","data-testid"]),e.createVNode(S.default,{id:`${i.tableId}-${a.key}-visibility-checkbox-label`,class:"visibility-checkbox-label",title:a.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.label),1)]),_:2},1032,["id","title"])]),_:2},1032,["data-testid","onClick"]))),128))],512),e.createElementVNode("div",M,[e.createVNode(f.default,{appearance:"tertiary",class:"apply-button","data-testid":"apply-button",onClick:k},{default:e.withCtx(()=>[...l[3]||(l[3]=[e.createTextVNode(" Apply ",-1)])]),_:1})])]),default:e.withCtx(()=>[e.createVNode(I.default,{placement:"bottom-end",text:m.value?void 0:"Show/Hide Columns"},{default:e.withCtx(()=>[e.createVNode(f.default,{appearance:"tertiary","aria-label":"Show/Hide Columns",class:"menu-button","data-testid":"column-visibility-menu-button",disabled:i.disabled,icon:"",size:"large"},{default:e.withCtx(()=>[e.createVNode(e.unref(c.TableColumnsIcon),{decorative:""})]),_:1},8,["disabled"])]),_:1},8,["text"])]),_:1},8,["disabled"])]))}});exports.default=q;

package/dist/kongponents242.es.js

@@ -1,4 +1,180 @@
-import f from "./kongponents202.es.js";
+import { defineComponent as B, ref as u, computed as D, watch as L, onMounted as $, onBeforeMount as H, openBlock as m, createElementBlock as h, createVNode as o, withCtx as n, unref as b, createBlock as C, withModifiers as v, createSlots as K, createCommentVNode as N, createElementVNode as g, Fragment as P, renderList as z, createTextVNode as w, toDisplayString as E, nextTick as U } from "vue";
+import { debounce as A } from "./kongponents178.es.js";
+import { TableColumnsIcon as J, SearchIcon as R, CloseIcon as F } from "@kong/icons";
+import p from "./kongponents38.es.js";
+import O from "./kongponents42.es.js";
+import j from "./kongponents49.es.js";
+import q from "./kongponents50.es.js";
+import G from "./kongponents55.es.js";
+import Q from "./kongponents30.es.js";
+/* empty css                 */
+import W from "./kongponents57.es.js";
+const X = { class: "table-column-visibility-menu" }, Y = { class: "apply-button-wrapper" }, ue = /* @__PURE__ */ B({
+  __name: "ColumnVisibilityMenu",
+  props: {
+    columns: {},
+    tableId: {},
+    visibilityPreferences: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update"],
+  setup(a, { emit: I }) {
+    const V = I, y = u(!1), r = u({}), d = u(!1), s = u(), i = u(""), f = () => {
+      r.value = a.columns.reduce((e, t) => (e[t.key] = a.visibilityPreferences[t.key] === void 0 ? !0 : a.visibilityPreferences[t.key], e), {}), d.value = !1;
+    }, x = A((e) => {
+      i.value = e, s.value && c(s.value);
+    }, 500), k = D(() => i.value ? a.columns.filter((e) => (e.label ? e.label : e.key).toLowerCase().includes(i.value.toLowerCase())) : a.columns), S = () => {
+      V("update", JSON.parse(JSON.stringify(r.value))), d.value = !1, i.value = "";
+    }, M = (e) => {
+      y.value = e, e && s.value && U(() => {
+        s.value && c(s.value);
+      }), !e && d.value && f(), e || (i.value = "");
+    }, c = (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(() => a.visibilityPreferences, () => {
+      f();
+    }, { immediate: !0 }), $(() => {
+      s.value && (s.value.addEventListener("scroll", (e) => {
+        const t = e.currentTarget;
+        c(t);
+      }), c(s.value));
+    }), H(() => {
+      f();
+    }), (e, t) => (m(), h("div", X, [
+      o(j, {
+        "data-testid": "table-column-visibility-menu",
+        disabled: a.disabled,
+        "kpop-attributes": { placement: "bottom-end" },
+        onToggleDropdown: M
+      }, {
+        items: n(() => [
+          i.value || k.value.length > 5 ? (m(), C(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: b(x)
+          }, K({
+            before: n(() => [
+              o(b(R), { decorative: "" })
+            ]),
+            _: 2
+          }, [
+            i.value ? {
+              name: "after",
+              fn: n(() => [
+                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: n(() => [
+                    o(b(F), { decorative: "" })
+                  ]),
+                  _: 1
+                })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "onInput"])) : N("", !0),
+          g("div", {
+            ref_key: "menuItemsRef",
+            ref: s,
+            class: "menu-items-wrapper"
+          }, [
+            (m(!0), h(P, null, z(k.value, (l) => (m(), C(q, {
+              key: l.key,
+              class: "column-visibility-menu-item",
+              "data-testid": `column-visibility-menu-item-${l.key}`,
+              onClick: v(() => {
+                r.value[l.key] = !r.value[l.key], d.value = !0;
+              }, ["stop"])
+            }, {
+              default: n(() => [
+                o(O, {
+                  modelValue: r.value[l.key],
+                  "onUpdate:modelValue": (T) => r.value[l.key] = T,
+                  "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: n(() => [
+                    w(E(l.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["id", "title"])
+              ]),
+              _: 2
+            }, 1032, ["data-testid", "onClick"]))), 128))
+          ], 512),
+          g("div", Y, [
+            o(p, {
+              appearance: "tertiary",
+              class: "apply-button",
+              "data-testid": "apply-button",
+              onClick: S
+            }, {
+              default: n(() => [...t[3] || (t[3] = [
+                w(" Apply ", -1)
+              ])]),
+              _: 1
+            })
+          ])
+        ]),
+        default: n(() => [
+          o(Q, {
+            placement: "bottom-end",
+            text: y.value ? void 0 : "Show/Hide Columns"
+          }, {
+            default: n(() => [
+              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: n(() => [
+                  o(b(J), { decorative: "" })
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["text"])
+        ]),
+        _: 1
+      }, 8, ["disabled"])
+    ]));
+  }
+});
 export {
-  f as default
+  ue as default
 };

package/dist/kongponents244.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),C=require("./kongponents178.cjs"),c=require("@kong/icons"),f=require("./kongponents38.cjs"),V=require("./kongponents42.cjs"),g=require("./kongponents49.cjs"),x=require("./kongponents50.cjs"),N=require("./kongponents55.cjs"),I=require("./kongponents30.cjs");;/* empty css                */const S=require("./kongponents57.cjs"),B={class:"table-column-visibility-menu"},M={class:"apply-button-wrapper"},q=e.defineComponent({__name:"ColumnVisibilityMenu",props:{columns:{},tableId:{},visibilityPreferences:{},disabled:{type:Boolean}},emits:["update"],setup(i,{emit:v}){const y=v,m=e.ref(!1),n=e.ref({}),u=e.ref(!1),r=e.ref(),o=e.ref(""),d=()=>{n.value=i.columns.reduce((t,l)=>(t[l.key]=i.visibilityPreferences[l.key]===void 0?!0:i.visibilityPreferences[l.key],t),{}),u.value=!1},p=C.debounce(t=>{o.value=t,r.value&&s(r.value)},500),b=e.computed(()=>o.value?i.columns.filter(t=>(t.label?t.label:t.key).toLowerCase().includes(o.value.toLowerCase())):i.columns),k=()=>{y("update",JSON.parse(JSON.stringify(n.value))),u.value=!1,o.value=""},h=t=>{m.value=t,t&&r.value&&e.nextTick(()=>{r.value&&s(r.value)}),!t&&u.value&&d(),t||(o.value="")},s=t=>{if(!(t.scrollHeight>t.clientHeight)){t.classList.remove("is-bottom-overflowing");return}const a=t.scrollHeight<t.clientHeight+t.scrollTop+1;t.classList.toggle("is-bottom-overflowing",!a)};return e.watch(()=>i.visibilityPreferences,()=>{d()},{immediate:!0}),e.onMounted(()=>{r.value&&(r.value.addEventListener("scroll",t=>{const l=t.currentTarget;s(l)}),s(r.value))}),e.onBeforeMount(()=>{d()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",B,[e.createVNode(g.default,{"data-testid":"table-column-visibility-menu",disabled:i.disabled,"kpop-attributes":{placement:"bottom-end"},onToggleDropdown:h},{items:e.withCtx(()=>[o.value||b.value.length>5?(e.openBlock(),e.createBlock(N.default,{key:0,modelValue:o.value,"onUpdate:modelValue":l[1]||(l[1]=a=>o.value=a),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:l[2]||(l[2]=e.withModifiers(()=>{},["stop"])),onInput:e.unref(p)},e.createSlots({before:e.withCtx(()=>[e.createVNode(e.unref(c.SearchIcon),{decorative:""})]),_:2},[o.value?{name:"after",fn:e.withCtx(()=>[e.createVNode(f.default,{appearance:"tertiary","aria-label":"Clear search",class:"clear-search","data-testid":"clear-search-button",icon:"",size:"small",onClick:l[0]||(l[0]=e.withModifiers(()=>o.value="",["stop"]))},{default:e.withCtx(()=>[e.createVNode(e.unref(c.CloseIcon),{decorative:""})]),_:1})]),key:"0"}:void 0]),1032,["modelValue","onInput"])):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"menuItemsRef",ref:r,class:"menu-items-wrapper"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,a=>(e.openBlock(),e.createBlock(x.default,{key:a.key,class:"column-visibility-menu-item","data-testid":`column-visibility-menu-item-${a.key}`,onClick:e.withModifiers(()=>{n.value[a.key]=!n.value[a.key],u.value=!0},["stop"])},{default:e.withCtx(()=>[e.createVNode(V.default,{modelValue:n.value[a.key],"onUpdate:modelValue":w=>n.value[a.key]=w,"aria-labelledby":`${i.tableId}-${a.key}-visibility-checkbox-label`,"data-testid":`column-visibility-checkbox-${a.key}`},null,8,["modelValue","onUpdate:modelValue","aria-labelledby","data-testid"]),e.createVNode(S.default,{id:`${i.tableId}-${a.key}-visibility-checkbox-label`,class:"visibility-checkbox-label",title:a.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.label),1)]),_:2},1032,["id","title"])]),_:2},1032,["data-testid","onClick"]))),128))],512),e.createElementVNode("div",M,[e.createVNode(f.default,{appearance:"tertiary",class:"apply-button","data-testid":"apply-button",onClick:k},{default:e.withCtx(()=>[...l[3]||(l[3]=[e.createTextVNode(" Apply ",-1)])]),_:1})])]),default:e.withCtx(()=>[e.createVNode(I.default,{placement:"bottom-end",text:m.value?void 0:"Show/Hide Columns"},{default:e.withCtx(()=>[e.createVNode(f.default,{appearance:"tertiary","aria-label":"Show/Hide Columns",class:"menu-button","data-testid":"column-visibility-menu-button",disabled:i.disabled,icon:"",size:"large"},{default:e.withCtx(()=>[e.createVNode(e.unref(c.TableColumnsIcon),{decorative:""})]),_:1},8,["disabled"])]),_:1},8,["text"])]),_:1},8,["disabled"])]))}});exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("./kongponents30.cjs");;/* empty css                */const n=require("./kongponents49.cjs"),d=require("./kongponents38.cjs"),r=require("@kong/icons"),i={key:0,class:"bulk-actions-dropdown-trigger-count"},l=e.defineComponent({__name:"BulkActionsDropdown",props:{disabled:{type:Boolean},count:{default:""},buttonLabel:{default:""}},setup(t){return(o,s)=>(e.openBlock(),e.createBlock(n.default,{class:"bulk-actions-dropdown","data-testid":"bulk-actions-dropdown",disabled:t.disabled,"kpop-attributes":{placement:"bottom-end"}},{items:e.withCtx(()=>[e.renderSlot(o.$slots,"items",{},void 0,!0)]),default:e.withCtx(()=>[e.createVNode(a.default,{placement:"bottom-end",text:"Selected Row Actions"},{default:e.withCtx(()=>[e.createVNode(d.default,{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.withCtx(()=>[e.createVNode(e.unref(r.MoreIcon),{class:"more-icon",decorative:""}),e.createVNode(e.Transition,{name:"kongponents-fade-transition"},{default:e.withCtx(()=>[t.count?(e.openBlock(),e.createElementBlock("span",i,e.toDisplayString(t.count),1)):e.createCommentVNode("",!0)]),_:1})]),_:1},8,["aria-label","disabled"])]),_:1})]),_:3},8,["disabled"]))}});exports.default=l;