@kong/kongponents 9.65.3 → 9.66.0

package/dist/kongponents223.es.js

@@ -1,180 +1,36 @@
-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",
+import { defineComponent as i, useCssVars as d, openBlock as t, createElementBlock as n, Fragment as a, renderList as c, renderSlot as m, createVNode as f } from "vue";
+import k from "./kongponents67.es.js";
+const p = { class: "skeleton-table-wrapper" }, b = /* @__PURE__ */ i({
+  __name: "TableSkeleton",
   props: {
-    columns: {},
-    tableId: {},
-    visibilityPreferences: {},
-    disabled: { type: Boolean }
+    rows: {},
+    columns: {}
   },
-  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
+  setup(s) {
+    d((e) => ({
+      v33b7f45f: e.columns
+    }));
+    const u = (e, r) => e === 1 && r === 1 || e !== 1 && r !== 1 ? "25" : "50";
+    return (e, r) => (t(), n("div", p, [
+      (t(!0), n(a, null, c(s.rows, (l) => (t(), n("div", {
+        key: l,
+        class: "skeleton-table-row"
+      }, [
+        m(e.$slots, "default", {}, () => [
+          (t(!0), n(a, null, c(s.columns, (o) => (t(), n("div", {
+            key: o,
+            class: "skeleton-cell-container"
           }, [
-            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"])
+            f(k, {
+              class: "skeleton-cell",
+              width: u(o, l)
+            }, null, 8, ["width"])
+          ]))), 128))
+        ], !0)
+      ]))), 128))
     ]));
   }
 });
 export {
-  ue as default
+  b as default
 };

package/dist/kongponents225.cjs

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("./kongponents67.cjs"),r={class:"skeleton-form-wrapper"},n=e.defineComponent({__name:"FormSkeleton",setup(l){return(c,s)=>(e.openBlock(),e.createElementBlock("div",r,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(4,o=>e.createElementVNode("div",{key:o,class:"skeleton-form-row"},[e.createVNode(t.default,{height:"2",width:"10"}),e.createVNode(t.default,{height:"2",width:"100"})])),64))]))}});exports.default=n;

package/dist/kongponents225.es.js

@@ -1,66 +1,25 @@
-import { defineComponent as d, openBlock as a, createBlock as r, withCtx as e, createVNode as o, unref as i, Transition as l, createElementBlock as s, toDisplayString as c, createCommentVNode as u, renderSlot as m } from "vue";
-import b from "./kongponents30.es.js";
-/* empty css                 */
-import p from "./kongponents49.es.js";
-import f from "./kongponents38.es.js";
-import { MoreIcon as k } from "@kong/icons";
-const g = {
-  key: 0,
-  class: "bulk-actions-dropdown-trigger-count"
-}, D = /* @__PURE__ */ d({
-  __name: "BulkActionsDropdown",
-  props: {
-    disabled: { type: Boolean },
-    count: { default: "" },
-    buttonLabel: { default: "" }
-  },
-  setup(t) {
-    return (n, w) => (a(), r(p, {
-      class: "bulk-actions-dropdown",
-      "data-testid": "bulk-actions-dropdown",
-      disabled: t.disabled,
-      "kpop-attributes": { placement: "bottom-end" }
-    }, {
-      items: e(() => [
-        m(n.$slots, "items", {}, void 0, !0)
-      ]),
-      default: e(() => [
-        o(b, {
-          placement: "bottom-end",
-          text: "Selected Row Actions"
-        }, {
-          default: e(() => [
-            o(f, {
-              appearance: "secondary",
-              "aria-label": t.buttonLabel,
-              class: "bulk-actions-dropdown-trigger",
-              "data-testid": "bulk-actions-dropdown-trigger",
-              disabled: t.disabled,
-              icon: "",
-              size: "large"
-            }, {
-              default: e(() => [
-                o(i(k), {
-                  class: "more-icon",
-                  decorative: ""
-                }),
-                o(l, { name: "kongponents-fade-transition" }, {
-                  default: e(() => [
-                    t.count ? (a(), s("span", g, c(t.count), 1)) : u("", !0)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["aria-label", "disabled"])
-          ]),
-          _: 1
+import { defineComponent as s, openBlock as e, createElementBlock as t, Fragment as c, renderList as l, createElementVNode as m, createVNode as o } from "vue";
+import r from "./kongponents67.es.js";
+const a = { class: "skeleton-form-wrapper" }, f = /* @__PURE__ */ s({
+  __name: "FormSkeleton",
+  setup(i) {
+    return (d, p) => (e(), t("div", a, [
+      (e(), t(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"
         })
-      ]),
-      _: 3
-    }, 8, ["disabled"]));
+      ])), 64))
+    ]));
   }
 });
 export {
-  D as default
+  f as default
 };

package/dist/kongponents227.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("@kong/icons"),l=require("./kongponents183.cjs"),n=require("./kongponents182.cjs"),a=["aria-current","data-testid"],c={class:"step-circle"},i={key:3,class:"step-number"},s=["title"],u=e.defineComponent({__name:"KStep",props:{label:{},state:{default:"default"},maxLabelWidth:{},stepNumber:{}},setup(t){const o=e.computed(()=>({maxWidth:n.normalizeSize(t.maxLabelWidth)}));return(d,m)=>(e.openBlock(),e.createElementBlock("li",{"aria-current":t.state==="active"?"step":"false",class:"step","data-testid":`step-${t.state}`},[e.createElementVNode("div",{class:e.normalizeClass(["step-container",`${t.state}`])},[e.createElementVNode("div",c,[t.state==="completed"?(e.openBlock(),e.createBlock(e.unref(r.CheckIcon),{key:0,color:`var(--kui-color-text-inverse, ${e.unref(l.KUI_COLOR_TEXT_INVERSE)})`,size:`var(--kui-icon-size-40, ${e.unref(l.KUI_ICON_SIZE_40)})`,title:"Completed"},null,8,["color","size"])):t.state==="pending"?(e.openBlock(),e.createBlock(e.unref(r.ProgressIcon),{key:1,color:`var(--kui-color-text-primary, ${e.unref(l.KUI_COLOR_TEXT_PRIMARY)})`,size:`var(--kui-icon-size-40, ${e.unref(l.KUI_ICON_SIZE_40)})`,title:"Pending"},null,8,["color","size"])):t.state==="error"?(e.openBlock(),e.createBlock(e.unref(r.CloseIcon),{key:2,color:`var(--kui-color-text-inverse, ${e.unref(l.KUI_COLOR_TEXT_INVERSE)})`,size:`var(--kui-icon-size-40, ${e.unref(l.KUI_ICON_SIZE_40)})`,title:"Error"},null,8,["color","size"])):t.stepNumber?(e.openBlock(),e.createElementBlock("span",i,e.toDisplayString(t.stepNumber),1)):e.createCommentVNode("",!0)]),e.createElementVNode("span",{class:"step-label",style:e.normalizeStyle(o.value),title:t.label},e.toDisplayString(t.label),13,s)],2)],8,a))}});exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("./kongponents387.cjs"),a={class:"fullscreen-loading-container","data-testid":"full-screen-loader"},c=["src"],u={key:0,class:"progress"},d=e.defineComponent({__name:"FullScreenKongSkeleton",props:{progress:{},hideProgress:{type:Boolean},zIndex:{}},setup(t){e.useCssVars(l=>({v4d434712:l.zIndex}));const n=e.ref(0),r=e.ref(0),o=e.computed(()=>t.progress!==null?t.progress:r.value);return e.onMounted(()=>{t.progress||(n.value=setInterval(()=>{r.value>=100&&(clearInterval(n.value),r.value=100),r.value=Math.min(r.value+Math.ceil(Math.random()*10*30),100)},200))}),e.onUnmounted(()=>{clearInterval(n.value)}),(l,i)=>(e.openBlock(),e.createElementBlock("div",a,[e.createElementVNode("div",null,[e.createElementVNode("img",{alt:"Loading",src:e.unref(s.default)},null,8,c),t.hideProgress?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",u,[e.createElementVNode("div",{class:"progress-bar",role:"progressbar",style:e.normalizeStyle({width:`${o.value}%`}),title:"Loading"},null,4)]))])]))}});exports.default=d;

package/dist/kongponents227.es.js

@@ -1,57 +1,47 @@
-import { defineComponent as m, computed as u, openBlock as l, createElementBlock as r, createElementVNode as a, normalizeClass as d, createBlock as i, unref as t, toDisplayString as s, createCommentVNode as k, normalizeStyle as z } from "vue";
-import { CheckIcon as v, ProgressIcon as b, CloseIcon as f } from "@kong/icons";
-import { KUI_ICON_SIZE_40 as o, KUI_COLOR_TEXT_INVERSE as c, KUI_COLOR_TEXT_PRIMARY as I } from "./kongponents183.es.js";
-import { normalizeSize as h } from "./kongponents182.es.js";
-const p = ["aria-current", "data-testid"], y = { class: "step-circle" }, C = {
-  key: 3,
-  class: "step-number"
-}, x = ["title"], g = /* @__PURE__ */ m({
-  __name: "KStep",
+import { defineComponent as d, useCssVars as i, ref as s, computed as u, onMounted as m, onUnmounted as g, openBlock as l, createElementBlock as a, createElementVNode as o, unref as v, normalizeStyle as p, createCommentVNode as f } from "vue";
+import h from "./kongponents387.es.js";
+const I = {
+  class: "fullscreen-loading-container",
+  "data-testid": "full-screen-loader"
+}, _ = ["src"], k = {
+  key: 0,
+  class: "progress"
+}, z = /* @__PURE__ */ d({
+  __name: "FullScreenKongSkeleton",
   props: {
-    label: {},
-    state: { default: "default" },
-    maxLabelWidth: {},
-    stepNumber: {}
+    progress: {},
+    hideProgress: { type: Boolean },
+    zIndex: {}
   },
-  setup(e) {
-    const n = u(() => ({
-      maxWidth: h(e.maxLabelWidth)
+  setup(r) {
+    i((t) => ({
+      v4d434712: t.zIndex
     }));
-    return (E, $) => (l(), r("li", {
-      "aria-current": e.state === "active" ? "step" : "false",
-      class: "step",
-      "data-testid": `step-${e.state}`
-    }, [
-      a("div", {
-        class: d(["step-container", `${e.state}`])
-      }, [
-        a("div", y, [
-          e.state === "completed" ? (l(), i(t(v), {
-            key: 0,
-            color: `var(--kui-color-text-inverse, ${t(c)})`,
-            size: `var(--kui-icon-size-40, ${t(o)})`,
-            title: "Completed"
-          }, null, 8, ["color", "size"])) : e.state === "pending" ? (l(), i(t(b), {
-            key: 1,
-            color: `var(--kui-color-text-primary, ${t(I)})`,
-            size: `var(--kui-icon-size-40, ${t(o)})`,
-            title: "Pending"
-          }, null, 8, ["color", "size"])) : e.state === "error" ? (l(), i(t(f), {
-            key: 2,
-            color: `var(--kui-color-text-inverse, ${t(c)})`,
-            size: `var(--kui-icon-size-40, ${t(o)})`,
-            title: "Error"
-          }, null, 8, ["color", "size"])) : e.stepNumber ? (l(), r("span", C, s(e.stepNumber), 1)) : k("", !0)
-        ]),
-        a("span", {
-          class: "step-label",
-          style: z(n.value),
-          title: e.label
-        }, s(e.label), 13, x)
-      ], 2)
-    ], 8, p));
+    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) => (l(), a("div", I, [
+      o("div", null, [
+        o("img", {
+          alt: "Loading",
+          src: v(h)
+        }, null, 8, _),
+        r.hideProgress ? f("", !0) : (l(), a("div", k, [
+          o("div", {
+            class: "progress-bar",
+            role: "progressbar",
+            style: p({ width: `${c.value}%` }),
+            title: "Loading"
+          }, null, 4)
+        ]))
+      ])
+    ]));
   }
 });
 export {
-  g as default
+  z as default
 };

package/dist/kongponents229.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("./kongponents201.cjs"),p={ref:"itemsContainer"},B={key:1,class:"select-group","data-propagate-clicks":"false"},g={class:"select-group-title"},v={class:"select-item-description"},u=".select-item button:not(:disabled)",w='.select-item[aria-selected="true"] button:not(:disabled)',C=e.defineComponent({__name:"KSelectItems",props:{items:{default:()=>[]},itemCreationEnabled:{type:Boolean},filterString:{default:""},itemCreationValid:{type:Boolean,default:!0}},emits:["selected","add-item"],setup(i,{expose:f,emit:E}){const k=E,a=n=>"items"in n&&Array.isArray(n.items),d=n=>k("selected",n),m=e.useTemplateRef("itemsContainer"),S=n=>{const o=m.value;if(!o)return;const t=o.querySelectorAll(u);if(!t?.length)return;const s=o.querySelector(w);if(s){const l=[...t].indexOf(s);t[n==="down"?l+1:l-1]?.focus()}else t[n==="down"?0:t.length-1]?.focus()},c=({target:n,key:o})=>{if(o==="ArrowDown"||o==="ArrowUp"){const t=m.value?.querySelectorAll(u);if(t?.length){const s=[...t].indexOf(n),l=o==="ArrowDown"?s+1:s-1;t[l]?.focus()}}};return f({setFocus:S}),(n,o)=>(e.openBlock(),e.createElementBlock("div",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.items,(t,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:a(t)?`${t.key||t.label}-group`:t.key||t.value||s},[a(t)?(e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("span",g,e.toDisplayString(t.label),1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,l=>(e.openBlock(),e.createBlock(r.default,{key:l.key,item:l,onKeydown:c,onSelected:d},{content:e.withCtx(()=>[e.renderSlot(n.$slots,"content",{item:l},void 0,!0)]),_:2},1032,["item"]))),128))])):(e.openBlock(),e.createBlock(r.default,{key:0,item:t,onKeydown:c,onSelected:d},{content:e.withCtx(()=>[e.renderSlot(n.$slots,"content",{item:t},void 0,!0)]),_:2},1032,["item"]))],64))),128)),i.itemCreationEnabled?(e.openBlock(),e.createBlock(r.default,{key:"select-add-item",class:"select-add-item","data-testid":"select-add-item",item:{label:`${i.filterString} (Add new value)`,value:"add_item",disabled:!i.itemCreationValid},onKeydown:c,onSelected:o[0]||(o[0]=t=>n.$emit("add-item"))},{content:e.withCtx(()=>[e.createElementVNode("div",v,[e.createTextVNode(e.toDisplayString(i.filterString)+" ",1),o[1]||(o[1]=e.createElementVNode("span",{class:"select-item-new-indicator"},"(Add new value)",-1))])]),_:1},8,["item"])):e.createCommentVNode("",!0)],512))}});exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a={class:"fullscreen-loading-container","data-testid":"full-screen-spinner-loader"},u={key:0,class:"progress"},c=e.defineComponent({__name:"FullScreenGenericSpinner",props:{progress:{},hideProgress:{type:Boolean},zIndex:{}},setup(n){e.useCssVars(t=>({af01d13c:t.zIndex}));const l=e.ref(0),r=e.ref(0),o=e.computed(()=>n.progress!==null?n.progress:r.value);return e.onMounted(()=>{n.progress||(l.value=setInterval(()=>{r.value>=100&&(clearInterval(l.value),r.value=100),r.value=Math.min(r.value+Math.ceil(Math.random()*10*30),100)},200))}),e.onUnmounted(()=>{clearInterval(l.value)}),(t,s)=>(e.openBlock(),e.createElementBlock("div",a,[e.createElementVNode("div",null,[s[0]||(s[0]=e.createElementVNode("div",{class:"spinner-loader"},null,-1)),n.hideProgress?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",u,[e.createElementVNode("div",{class:"progress-bar",role:"progressbar",style:e.normalizeStyle({width:`${o.value}%`}),title:"Loading"},null,4)]))])]))}});exports.default=c;

package/dist/kongponents229.es.js

@@ -1,89 +1,43 @@
-import { defineComponent as I, useTemplateRef as y, openBlock as s, createElementBlock as d, Fragment as c, renderList as w, createBlock as r, withCtx as m, renderSlot as C, createElementVNode as u, toDisplayString as v, createTextVNode as T, createCommentVNode as _ } from "vue";
-import f from "./kongponents201.es.js";
-const h = { ref: "itemsContainer" }, B = {
-  key: 1,
-  class: "select-group",
-  "data-propagate-clicks": "false"
-}, K = { class: "select-group-title" }, L = { class: "select-item-description" }, g = ".select-item button:not(:disabled)", $ = '.select-item[aria-selected="true"] button:not(:disabled)', R = /* @__PURE__ */ I({
-  __name: "KSelectItems",
+import { defineComponent as u, useCssVars as c, ref as o, computed as v, onMounted as m, onUnmounted as p, openBlock as a, createElementBlock as i, createElementVNode as s, normalizeStyle as g, createCommentVNode 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: {
-    items: { default: () => [] },
-    itemCreationEnabled: { type: Boolean },
-    filterString: { default: "" },
-    itemCreationValid: { type: Boolean, default: !0 }
+    progress: {},
+    hideProgress: { type: Boolean },
+    zIndex: {}
   },
-  emits: ["selected", "add-item"],
-  setup(i, { expose: b, emit: k }) {
-    const x = k, E = (t) => "items" in t && Array.isArray(t.items), S = (t) => x("selected", t), p = y("itemsContainer"), A = (t) => {
-      const n = p.value;
-      if (!n)
-        return;
-      const e = n.querySelectorAll(g);
-      if (!e?.length)
-        return;
-      const l = n.querySelector($);
-      if (l) {
-        const o = [...e].indexOf(l);
-        e[t === "down" ? o + 1 : o - 1]?.focus();
-      } else
-        e[t === "down" ? 0 : e.length - 1]?.focus();
-    }, a = ({ target: t, key: n }) => {
-      if (n === "ArrowDown" || n === "ArrowUp") {
-        const e = p.value?.querySelectorAll(g);
-        if (e?.length) {
-          const l = [...e].indexOf(t), o = n === "ArrowDown" ? l + 1 : l - 1;
-          e[o]?.focus();
-        }
-      }
-    };
-    return b({ setFocus: A }), (t, n) => (s(), d("div", h, [
-      (s(!0), d(c, null, w(i.items, (e, l) => (s(), d(c, {
-        key: E(e) ? `${e.key || e.label}-group` : e.key || e.value || l
-      }, [
-        E(e) ? (s(), d("div", B, [
-          u("span", K, v(e.label), 1),
-          (s(!0), d(c, null, w(e.items, (o) => (s(), r(f, {
-            key: o.key,
-            item: o,
-            onKeydown: a,
-            onSelected: S
-          }, {
-            content: m(() => [
-              C(t.$slots, "content", { item: o }, void 0, !0)
-            ]),
-            _: 2
-          }, 1032, ["item"]))), 128))
-        ])) : (s(), r(f, {
-          key: 0,
-          item: e,
-          onKeydown: a,
-          onSelected: S
-        }, {
-          content: m(() => [
-            C(t.$slots, "content", { item: e }, void 0, !0)
-          ]),
-          _: 2
-        }, 1032, ["item"]))
-      ], 64))), 128)),
-      i.itemCreationEnabled ? (s(), r(f, {
-        key: "select-add-item",
-        class: "select-add-item",
-        "data-testid": "select-add-item",
-        item: { label: `${i.filterString} (Add new value)`, value: "add_item", disabled: !i.itemCreationValid },
-        onKeydown: a,
-        onSelected: n[0] || (n[0] = (e) => t.$emit("add-item"))
-      }, {
-        content: m(() => [
-          u("div", L, [
-            T(v(i.filterString) + " ", 1),
-            n[1] || (n[1] = u("span", { class: "select-item-new-indicator" }, "(Add new value)", -1))
-          ])
-        ]),
-        _: 1
-      }, 8, ["item"])) : _("", !0)
-    ], 512));
+  setup(r) {
+    c((l) => ({
+      af01d13c: 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) => (a(), i("div", h, [
+      s("div", null, [
+        t[0] || (t[0] = s("div", { class: "spinner-loader" }, null, -1)),
+        r.hideProgress ? f("", !0) : (a(), i("div", I, [
+          s("div", {
+            class: "progress-bar",
+            role: "progressbar",
+            style: g({ width: `${d.value}%` }),
+            title: "Loading"
+          }, null, 4)
+        ]))
+      ])
+    ]));
   }
 });
 export {
-  R as default
+  y as default
 };

package/dist/kongponents231.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=["aria-selected","data-testid"],r={class:"select-item-container"},c=["disabled","value"],m={class:"select-item-label"},u=e.defineComponent({__name:"KSelectItem",props:{item:{}},emits:["selected","arrow-down","arrow-up"],setup(t,{emit:s}){const n=s,o=i=>{if(t.item.disabled){i.stopPropagation();return}n("selected",t.item)};return(i,l)=>(e.openBlock(),e.createElementBlock("div",{key:t.item.key,"aria-selected":t.item.selected,class:"select-item","data-testid":`select-item-${t.item.value}`,role:"option"},[e.createElementVNode("div",r,[e.createElementVNode("button",{class:e.normalizeClass({selected:t.item.selected}),disabled:t.item.disabled===!0?!0:void 0,type:"button",value:t.item.value,onClick:o,onKeydown:[l[0]||(l[0]=e.withKeys(e.withModifiers(d=>i.$emit("arrow-down"),["prevent"]),["down"])),l[1]||(l[1]=e.withKeys(e.withModifiers(d=>i.$emit("arrow-up"),["prevent"]),["up"]))]},[e.createElementVNode("span",m,[e.renderSlot(i.$slots,"content",{},()=>[e.createTextVNode(e.toDisplayString(t.item.label),1)],!0)])],42,c)])],8,a))}});exports.default=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue");function i(e,n){return t.getCurrentScope()?(t.onScopeDispose(e,n),!0):!1}const c=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const u=Object.prototype.toString,s=e=>u.call(e)==="[object Object]",a=()=>{};function f(e){return Array.isArray(e)?e:[e]}function r(e){return t.getCurrentInstance()}function p(e,n=!0,o){r()?t.onMounted(e,o):n?e():t.nextTick(e)}function d(e,n,o){return t.watch(e,n,{...o,immediate:!0})}exports.getLifeCycleTarget=r;exports.isClient=c;exports.isObject=s;exports.noop=a;exports.toArray=f;exports.tryOnMounted=p;exports.tryOnScopeDispose=i;exports.watchImmediate=d;