@kong/kongponents 9.52.8 → 9.52.9

package/dist/kongponents.es264.js

@@ -0,0 +1,182 @@
+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.es178.js";
+import J from "./kongponents.es234.js";
+import R from "./kongponents.es275.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: {
+    columns: {},
+    tableId: {},
+    visibilityPreferences: {},
+    disabled: { type: Boolean }
+  },
+  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 l = e.scrollHeight < e.clientHeight + e.scrollTop + 1;
+      e.classList.toggle("is-bottom-overflowing", !l);
+    };
+    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
+          }, [
+            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, ["disabled"])
+    ]));
+  }
+});
+export {
+  me as default
+};

package/dist/kongponents.es266.js

@@ -0,0 +1,58 @@
+import { defineComponent as f, openBlock as p, createElementBlock as u, createVNode as e, withModifiers as i, withCtx as n, unref as s } from "vue";
+import b from "./kongponents.es207.js";
+import m from "./kongponents.es208.js";
+import r from "./kongponents.es32.js";
+const c = { class: "pagination-offset-button-container" }, O = /* @__PURE__ */ f({
+  __name: "PaginationOffset",
+  props: {
+    previousButtonDisabled: {
+      type: Boolean,
+      default: !1
+    },
+    nextButtonDisabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["getPreviousOffset", "getNextOffset"],
+  setup(o, { emit: l }) {
+    const a = l;
+    return (v, t) => (p(), u("div", c, [
+      e(r, {
+        appearance: "tertiary",
+        "aria-label": "Go to the previous page",
+        class: "pagination-button",
+        "data-testid": "previous-button",
+        disabled: o.previousButtonDisabled,
+        icon: "",
+        size: "small",
+        type: "button",
+        onClick: t[0] || (t[0] = i((d) => a("getPreviousOffset"), ["prevent"]))
+      }, {
+        default: n(() => [
+          e(s(b), { decorative: "" })
+        ]),
+        _: 1
+      }, 8, ["disabled"]),
+      e(r, {
+        appearance: "tertiary",
+        "aria-label": "Go to the next page",
+        class: "pagination-button",
+        "data-testid": "next-button",
+        disabled: o.nextButtonDisabled,
+        icon: "",
+        size: "small",
+        type: "button",
+        onClick: t[1] || (t[1] = i((d) => a("getNextOffset"), ["prevent"]))
+      }, {
+        default: n(() => [
+          e(s(m), { decorative: "" })
+        ]),
+        _: 1
+      }, 8, ["disabled"])
+    ]));
+  }
+});
+export {
+  O as default
+};

package/dist/kongponents.es268.js

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

package/dist/kongponents.es269.js

@@ -1,121 +1,244 @@
-import { defineComponent as h, computed as d, openBlock as s, createBlock as b, resolveDynamicComponent as x, normalizeStyle as S, withCtx as w, createElementBlock as N } from "vue";
-import { KUI_ICON_SIZE_50 as u } from "./kongponents.es270.js";
-const k = ["aria-hidden"], p = '<path d="M11 19V13H5V11H11V5H13V11H19V13H13V19H11Z" fill="currentColor"/>', q = /* @__PURE__ */ h({
-  __name: "AddIcon",
+import { defineComponent as Z, useCssVars as _, useAttrs as ee, ref as x, useTemplateRef as E, computed as r, onMounted as te, resolveComponent as le, openBlock as C, createBlock as w, unref as F, withCtx as m, createElementVNode as P, createVNode as S, createTextVNode as q, renderSlot as ae, createElementBlock as oe, createCommentVNode as ie, toDisplayString as ne, mergeProps as re, withModifiers as ue, nextTick as se } from "vue";
+import { KUI_SPACE_30 as ce } from "./kongponents.es182.js";
+import de from "./kongponents.es56.js";
+import fe from "./kongponents.es49.js";
+import I from "./kongponents.es60.js";
+import ve from "./kongponents.es54.js";
+import me from "./kongponents.es338.js";
+const pe = {
+  class: "filter-content",
+  "data-testid": "filter-pill-content"
+}, be = { class: "default-layout" }, ye = {
+  key: 0,
+  class: "operator"
+}, Ve = { class: "value" }, he = { class: "footer" }, qe = /* @__PURE__ */ Z({
+  inheritAttrs: !1,
+  __name: "FilterPill",
   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
-    }
+    filter: {},
+    initOpen: { type: Boolean, default: !1 },
+    selection: { default: () => {
+    } },
+    custom: { type: Boolean, default: !1 }
   },
-  setup(r) {
-    const e = r, i = d(() => {
-      if (typeof e.size == "number" && e.size > 0)
-        return `${e.size}px`;
-      if (typeof e.size == "string") {
-        const a = String(e.size).replace(/px/gi, ""), t = Number(a);
-        if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
-          return `${t}px`;
+  emits: ["apply", "close", "open", "clear"],
+  setup(t, { emit: M }) {
+    _((l) => ({
+      v5984a737: D.value
+    }));
+    const N = ee(), p = M, b = x(!1), k = E("filterPopper"), f = x(), u = x(), s = x(), c = x(), T = E("inputField"), v = r(() => t.custom ? "custom" : t.filter.options && !t.filter.multiple ? "select" : t.filter.options && t.filter.multiple ? "multiselect" : "input"), L = r(() => {
+      switch (v.value) {
+        case "input":
+          return !u.value || u.value === "";
+        case "select":
+          return !s.value;
+        case "multiselect":
+          return !c.value || c.value.length === 0;
+        case "custom":
+        default:
+          return !1;
+      }
+    }), g = r(() => t.filter.operators && t.filter.operators.length ? t.filter.operators : ["eq"]), D = r(() => g.value.some((l) => l === "lte" || l === "gte") ? "205px" : "120px"), R = r(() => {
+      var o, a, V, h, i, n, K, O;
+      let l, e;
+      switch (v.value) {
+        case "input":
+          l = u.value, e = u.value;
+          break;
+        case "select":
+          l = s.value, e = ((V = (a = (o = t.filter) == null ? void 0 : o.options) == null ? void 0 : a.find(({ value: d }) => d === s.value)) == null ? void 0 : V.label) ?? ((h = s.value) == null ? void 0 : h.toString());
+          break;
+        case "multiselect":
+          l = c.value, e = (O = (K = (n = (i = c.value) == null ? void 0 : i.map((d) => {
+            var U;
+            return (U = t.filter.options) == null ? void 0 : U.find(({ value: Y }) => Y === d);
+          })) == null ? void 0 : n.filter((d) => d !== void 0)) == null ? void 0 : K.map(({ label: d }) => d)) == null ? void 0 : O.join(", ");
+          break;
+      }
+      if (!(f.value === void 0 || l === void 0 || e === void 0))
+        return {
+          operator: f.value,
+          value: l,
+          text: e
+        };
+    }), G = r(() => {
+      var l;
+      switch ((l = t.selection) == null ? void 0 : l.operator) {
+        case "eq":
+          return " = ";
+        case "neq":
+          return " ≠ ";
+        case "lt":
+          return " < ";
+        case "lte":
+          return " ≤ ";
+        case "gt":
+          return " > ";
+        case "gte":
+          return " ≥ ";
+        case "contains":
+        case "exists":
+        default:
+          return ": ";
       }
-      return u;
-    }), c = d(() => ({
-      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 = (a) => {
-      const t = {}, y = Math.random().toString(36).substring(2, 12);
-      return a.replace(/id="([^"]+)"/g, (o, n) => {
-        const l = `${y}-${n}`;
-        return t[n] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (o, n) => t[n] ? `#${t[n]}` : o);
-    }, g = {
-      "<": "&lt;",
-      ">": "&gt;",
-      '"': "&quot;",
-      "'": "&#39;",
-      "&": "&amp;"
-    }, m = (a) => a.replace(/[<>"'&]/g, (t) => g[t]), v = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? p : f(p)}`;
-    return (a, t) => (s(), b(x(r.as), {
-      "aria-hidden": r.decorative ? "true" : void 0,
-      class: "kui-icon add-icon",
-      "data-testid": "kui-icon-wrapper-add-icon",
-      style: S(c.value),
-      tabindex: r.decorative ? "-1" : void 0
-    }, {
-      default: w(() => [
-        (s(), N("svg", {
-          "aria-hidden": r.decorative ? "true" : void 0,
-          "data-testid": "kui-icon-svg-add-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, k))
-      ]),
-      _: 1
-    }, 8, ["aria-hidden", "style", "tabindex"]));
+    }), A = r(() => {
+      const l = {
+        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 g.value.map((e) => ({
+        label: l[e],
+        value: e
+      }));
+    }), W = r(() => {
+      var l;
+      return ((l = A.value.find(({ value: e }) => e === f.value)) == null ? void 0 : l.label) ?? "";
+    }), $ = () => {
+      var l, e;
+      v.value === "input" && ((e = (l = T.value) == null ? void 0 : l.input) == null || e.focus());
+    }, j = () => {
+      var l, e, o, a, V, h;
+      f.value = ((l = t.selection) == null ? void 0 : l.operator) ?? ((e = g.value) == null ? void 0 : e[0]), u.value = typeof ((o = t.selection) == null ? void 0 : o.value) == "string" ? t.selection.value : void 0, s.value = (V = (a = t.filter.options) == null ? void 0 : a.find(({ value: i }) => {
+        var n;
+        return i === ((n = t.selection) == null ? void 0 : n.value);
+      })) == null ? void 0 : V.value, c.value = (h = t.filter.options) == null ? void 0 : h.filter(({ value: i }) => {
+        var n;
+        if (Array.isArray((n = t.selection) == null ? void 0 : n.value))
+          return t.selection.value.includes(`${i}`);
+      }).map(({ value: i }) => i);
+    }, B = async () => {
+      j(), k.value && (k.value.showPopover(), b.value = !0, await se(), $()), p("open");
+    }, y = () => {
+      k.value && (k.value.hidePopover(), b.value = !1), p("close");
+    };
+    te(() => {
+      t.initOpen && B();
+    });
+    const z = () => {
+      b.value && y();
+    }, H = () => {
+      v.value === "custom" ? p("apply", void 0) : p("apply", R.value), y();
+    }, J = () => {
+      y();
+    }, Q = () => {
+      y(), p("clear");
+    }, X = () => {
+      b.value ? y() : B();
+    };
+    return (l, e) => {
+      const o = le("KButton");
+      return C(), w(de, {
+        ref: "filterPopper",
+        "max-width": t.filter.maxWidth ?? "400px",
+        offset: F(ce),
+        placement: t.filter.placement ?? "bottom-start",
+        width: "auto",
+        onClose: z
+      }, {
+        default: m(() => {
+          var a;
+          return [
+            S(me, re({
+              "content-label": (a = t.selection) == null ? void 0 : a.text,
+              "data-testid": "filter-pill",
+              delimiter: G.value,
+              label: t.filter.label,
+              "pill-focus": b.value
+            }, F(N), {
+              onClear: Q,
+              onClick: e[0] || (e[0] = ue(() => {
+              }, ["prevent", "stop"])),
+              onTrigger: X
+            }), null, 16, ["content-label", "delimiter", "label", "pill-focus"])
+          ];
+        }),
+        title: m(() => [
+          q(ne(t.filter.label), 1)
+        ]),
+        content: m(() => [
+          P("div", pe, [
+            ae(l.$slots, "default", {}, () => [
+              P("div", be, [
+                g.value.length > 1 ? (C(), oe("div", ye, [
+                  S(I, {
+                    modelValue: f.value,
+                    "onUpdate:modelValue": e[1] || (e[1] = (a) => f.value = a),
+                    items: A.value,
+                    "kpop-attributes": {
+                      popoverClasses: "force-operator-width"
+                    },
+                    label: "Operator",
+                    title: W.value
+                  }, null, 8, ["modelValue", "items", "title"])
+                ])) : ie("", !0),
+                P("div", Ve, [
+                  v.value === "select" ? (C(), w(I, {
+                    key: 0,
+                    modelValue: s.value,
+                    "onUpdate:modelValue": e[2] || (e[2] = (a) => s.value = a),
+                    "data-testid": "filter-pill-select",
+                    items: t.filter.options,
+                    label: "Value",
+                    placeholder: "Select a value"
+                  }, null, 8, ["modelValue", "items"])) : v.value === "multiselect" ? (C(), w(ve, {
+                    key: 1,
+                    modelValue: c.value,
+                    "onUpdate:modelValue": e[3] || (e[3] = (a) => c.value = a),
+                    "data-testid": "filter-pill-multiselect",
+                    items: t.filter.options,
+                    label: "Value",
+                    placeholder: "Select values"
+                  }, null, 8, ["modelValue", "items"])) : (C(), w(fe, {
+                    key: 2,
+                    ref: "inputField",
+                    modelValue: u.value,
+                    "onUpdate:modelValue": e[4] || (e[4] = (a) => u.value = a),
+                    modelModifiers: { trim: !0 },
+                    "data-testid": "filter-pill-input",
+                    label: "Value",
+                    placeholder: "Enter a value"
+                  }, null, 8, ["modelValue"]))
+                ])
+              ])
+            ], !0)
+          ])
+        ]),
+        footer: m(() => [
+          P("div", he, [
+            S(o, {
+              appearance: "secondary",
+              "data-testid": "filter-pill-cancel",
+              onClick: J
+            }, {
+              default: m(() => [...e[5] || (e[5] = [
+                q(" Cancel ", -1)
+              ])]),
+              _: 1
+            }),
+            S(o, {
+              appearance: "primary",
+              "data-testid": "filter-pill-apply",
+              disabled: L.value,
+              onClick: H
+            }, {
+              default: m(() => [...e[6] || (e[6] = [
+                q(" Apply ", -1)
+              ])]),
+              _: 1
+            }, 8, ["disabled"])
+          ])
+        ]),
+        _: 3
+      }, 8, ["max-width", "offset", "placement"]);
+    };
   }
 });
 export {
-  q as default
+  qe as default
 };