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

package/dist/kongponents117.es.js

@@ -1,9 +1,9 @@
-import { defineComponent as ae, useCssVars as le, watch as f, useSlots as re, useTemplateRef as oe, ref as n, useAttrs as ne, computed as l, useId as N, onMounted as ie, nextTick as ue, openBlock as r, createElementBlock as c, normalizeClass as B, unref as v, createBlock as x, mergeProps as K, createSlots as se, withCtx as I, createTextVNode as L, toDisplayString as M, renderSlot as p, createCommentVNode as b, createElementVNode as W, withModifiers as T, createVNode as de, Transition as ce, Fragment as fe } from "vue";
-import ve from "./kongponents190.es.js";
+import { defineComponent as ae, useCssVars as le, watch as f, useSlots as re, useTemplateRef as oe, ref as n, useAttrs as ne, computed as l, useId as N, onMounted as ie, nextTick as se, openBlock as r, createElementBlock as c, normalizeClass as B, unref as v, createBlock as I, mergeProps as K, createSlots as ue, withCtx as L, renderSlot as m, createTextVNode as x, toDisplayString as M, createCommentVNode as b, createElementVNode as W, withModifiers as T, createVNode as de, Transition as ce, Fragment as fe } from "vue";
+import ve from "./kongponents184.es.js";
 import me from "./kongponents57.es.js";
-import { KUI_ICON_SIZE_40 as R } from "./kongponents183.es.js";
+import { KUI_ICON_SIZE_40 as R } from "./kongponents182.es.js";
 import { VisibilityOffIcon as he, VisibilityIcon as ge } from "@kong/icons";
-const pe = ["id", "aria-describedby", "aria-invalid", "type", "value"], be = ["aria-label"], ye = ["id"], xe = /* @__PURE__ */ ae({
+const pe = ["id", "aria-describedby", "aria-invalid", "type", "value"], be = ["aria-label"], ye = ["id"], Ie = /* @__PURE__ */ ae({
   inheritAttrs: !1,
   __name: "KInput",
   props: {
@@ -21,14 +21,14 @@ const pe = ["id", "aria-describedby", "aria-invalid", "type", "value"], be = ["a
   emits: ["input", "update:modelValue", "char-limit-exceeded"],
   setup(t, { expose: O, emit: D }) {
     le((e) => ({
-      v091aff92: C.value,
-      b534dd8e: P.value
+      v20a7ef3c: C.value,
+      v11afa32e: P.value
     })), f(() => t.hasError, (e) => {
       e && console.warn("KInput: `hasError` prop is deprecated. Please use `error` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kinput");
     }, { immediate: !0 }), f(() => t.labelAttributes.help, (e) => {
       e && console.warn("KInput: `help` property of `labelAttributes` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#klabel");
     });
-    const y = D, o = re(), k = oe("inputElement"), i = n(""), m = n(!1), S = n(0), { stripRequiredLabel: H } = ve(), u = ne(), $ = l(() => u?.required !== void 0 && String(u?.required) !== "false"), J = N(), q = l(() => u.id ? String(u.id) : J), A = N(), U = l(() => H(t.label, $.value)), z = () => !!(t.labelAttributes?.info || o["label-tooltip"]), F = l({
+    const y = D, o = re(), k = oe("inputElement"), i = n(""), h = n(!1), S = n(0), { stripRequiredLabel: H } = ve(), s = ne(), $ = l(() => s?.required !== void 0 && String(s?.required) !== "false"), J = N(), q = l(() => s.id ? String(s.id) : J), A = N(), U = l(() => H(t.label, $.value)), z = () => !!(t.labelAttributes?.info || o["label-tooltip"]), F = l({
       get() {
         return t.modelValue;
       },
@@ -36,14 +36,14 @@ const pe = ["id", "aria-describedby", "aria-invalid", "type", "value"], be = ["a
         w({ target: { value: e } });
       }
     }), Z = l(() => {
-      const e = { ...u };
+      const e = { ...s };
       return delete e.class, delete e.input, delete e.onInput, e;
-    }), s = l(() => {
+    }), u = l(() => {
       const e = i.value?.toString().length || 0, a = t.modelValue?.toString().length || 0;
-      let g = e;
-      return !m.value && a && (g = a), !!t.characterLimit && g > t.characterLimit;
-    }), j = l(() => s.value ? m.value ? `${i.value?.toString().length} / ${t.characterLimit}` : `${t.modelValue?.toString().length} / ${t.characterLimit}` : ""), G = () => !s.value && !t.error && !t.hasError && !!(t.help || o.help), h = l(() => s.value ? j.value : (t.error || t.hasError) && t.errorMessage ? t.errorMessage : t.help);
-    f(s, (e, a) => {
+      let p = e;
+      return !h.value && a && (p = a), !!t.characterLimit && p > t.characterLimit;
+    }), j = l(() => u.value ? h.value ? `${i.value?.toString().length} / ${t.characterLimit}` : `${t.modelValue?.toString().length} / ${t.characterLimit}` : ""), G = () => !u.value && !t.error && !t.hasError && !!(t.help || o.help), g = l(() => u.value ? j.value : (t.error || t.hasError) && t.errorMessage ? t.errorMessage : t.help);
+    f(u, (e, a) => {
       e !== a && (y("char-limit-exceeded", {
         value: i.value,
         length: i.value.length,
@@ -57,38 +57,40 @@ const pe = ["id", "aria-describedby", "aria-invalid", "type", "value"], be = ["a
       const a = JSON.parse(JSON.stringify(e?.target?.value));
       Q(a);
     }, Q = (e) => {
-      i.value = e, m.value = !0, y("input", e), y("update:modelValue", e);
-    }, X = () => i.value || m.value ? i.value : t.modelValue;
+      i.value = e, h.value = !0, y("input", e), y("update:modelValue", e);
+    }, X = () => i.value || h.value ? i.value : t.modelValue;
     f(() => t.error, (e, a) => {
       e !== a && (S.value += 1);
     });
     const E = n(null), V = n(null), C = n(R), P = n(R), d = n(!1), Y = l(() => t.type === "password" && d.value ? "text" : t.type), _ = () => {
       if (!d.value && k.value) {
-        const e = k.value, { selectionStart: a, selectionEnd: g, selectionDirection: ee } = e, te = e.value;
-        e.value = te, e.setSelectionRange(a, g, ee ?? void 0);
+        const e = k.value, { selectionStart: a, selectionEnd: p, selectionDirection: ee } = e, te = e.value;
+        e.value = te, e.setSelectionRange(a, p, ee ?? void 0);
       }
       d.value = !d.value;
     };
     return ie(async () => {
-      await ue(), E.value?.offsetWidth && (C.value = E.value.offsetWidth + "px"), V.value?.offsetWidth && (P.value = V.value.offsetWidth + "px");
+      await se(), E.value?.offsetWidth && (C.value = E.value.offsetWidth + "px"), V.value?.offsetWidth && (P.value = V.value.offsetWidth + "px");
     }), O({
       input: k
     }), (e, a) => (r(), c("div", {
-      class: B(["k-input", [v(u).class, { "input-error": s.value || t.error || t.hasError }]])
+      class: B(["k-input", [v(s).class, { "input-error": u.value || t.error || t.hasError }]])
     }, [
-      t.label ? (r(), x(me, K({
+      t.label || e.$slots.label ? (r(), I(me, K({
         key: 0,
         for: q.value
-      }, t.labelAttributes, { required: $.value }), se({
-        default: I(() => [
-          L(M(U.value) + " ", 1)
+      }, t.labelAttributes, { required: $.value }), ue({
+        default: L(() => [
+          m(e.$slots, "label", {}, () => [
+            x(M(U.value), 1)
+          ], !0)
         ]),
         _: 2
       }, [
         z() ? {
           name: "tooltip",
-          fn: I(() => [
-            p(e.$slots, "label-tooltip", {}, void 0, !0)
+          fn: L(() => [
+            m(e.$slots, "label-tooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0
@@ -102,13 +104,13 @@ const pe = ["id", "aria-describedby", "aria-invalid", "type", "value"], be = ["a
           ref: E,
           class: "before-content-wrapper"
         }, [
-          p(e.$slots, "before", {}, void 0, !0)
+          m(e.$slots, "before", {}, void 0, !0)
         ], 512)) : b("", !0),
         W("input", K({
           id: q.value,
           ref: "inputElement",
-          "aria-describedby": h.value || o.help ? v(A) : void 0,
-          "aria-invalid": t.error || t.hasError || s.value ? "true" : void 0,
+          "aria-describedby": g.value || o.help ? v(A) : void 0,
+          "aria-invalid": t.error || t.hasError || u.value ? "true" : void 0,
           class: "input",
           type: Y.value
         }, Z.value, {
@@ -132,30 +134,30 @@ const pe = ["id", "aria-describedby", "aria-invalid", "type", "value"], be = ["a
             onMouseup: a[1] || (a[1] = T(() => {
             }, ["prevent"]))
           }, [
-            d.value ? (r(), x(v(he), {
+            d.value ? (r(), I(v(he), {
               key: 0,
               decorative: ""
-            })) : (r(), x(v(ge), {
+            })) : (r(), I(v(ge), {
               key: 1,
               decorative: ""
             }))
-          ], 40, be)) : p(e.$slots, "after", {}, void 0, !0, 1)
+          ], 40, be)) : m(e.$slots, "after", {}, void 0, !0, 1)
         ], 512)) : b("", !0)
       ], 2),
       de(ce, {
         mode: "out-in",
         name: "kongponents-fade-transition"
       }, {
-        default: I(() => [
-          h.value || o.help ? (r(), c("p", {
+        default: L(() => [
+          g.value || o.help ? (r(), c("p", {
             id: v(A),
             key: String(S.value),
             class: "help-text"
           }, [
-            G() ? p(e.$slots, "help", {}, () => [
-              L(M(h.value), 1)
+            G() ? m(e.$slots, "help", {}, () => [
+              x(M(g.value), 1)
             ], !0, 0) : (r(), c(fe, { key: 1 }, [
-              L(M(h.value), 1)
+              x(M(g.value), 1)
             ], 64))
           ], 8, ye)) : b("", !0)
         ]),
@@ -165,5 +167,5 @@ const pe = ["id", "aria-describedby", "aria-invalid", "type", "value"], be = ["a
   }
 });
 export {
-  xe as default
+  Ie as default
 };

package/dist/kongponents121.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("./kongponents30.cjs");;/* empty css                */const p=require("@kong/icons"),b=require("./kongponents183.cjs"),m=e.defineComponent({__name:"KLabel",props:{info:{default:""},required:{type:Boolean},tooltipAttributes:{default:()=>({})},help:{default:""}},setup(o){e.watch(()=>o.help,t=>{t&&console.warn("KLabel: `help` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#klabel")},{immediate:!0});const r=e.useSlots(),a=()=>!!(o.help||o.info||r.tooltip),l=e.useId(),s=e.useTemplateRef("label"),u=["a[href]","audio[controls]","button","details","embed","iframe","img[usemap]",'input:not([type="hidden"])',"label","select","textarea","video[controls]","area[href]"].join(", ");function c(t){return t.closest(u)}function d(t){const i=t.target,n=c(i);n&&n!==s.value||t.preventDefault()}return(t,i)=>(e.openBlock(),e.createElementBlock("label",{ref:"label",class:e.normalizeClass(["k-label",{required:o.required}])},[e.renderSlot(t.$slots,"default",{},void 0,!0),a()?(e.openBlock(),e.createBlock(f.default,e.mergeProps({key:0},o.tooltipAttributes,{class:"label-tooltip","tooltip-id":e.unref(l),onClick:d}),{content:e.withCtx(()=>[e.renderSlot(t.$slots,"tooltip",{},()=>[e.createTextVNode(e.toDisplayString(o.info||o.help),1)],!0)]),default:e.withCtx(()=>[e.createVNode(e.unref(p.InfoIcon),{"aria-describedby":e.unref(l),class:"tooltip-trigger-icon",color:`var(--kui-color-text-neutral, ${e.unref(b.KUI_COLOR_TEXT_NEUTRAL)})`,tabindex:"0"},null,8,["aria-describedby","color"])]),_:3},16,["tooltip-id"])):e.createCommentVNode("",!0)],2))}});exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("./kongponents30.cjs");;/* empty css                */const p=require("@kong/icons"),b=require("./kongponents182.cjs"),m=e.defineComponent({__name:"KLabel",props:{info:{default:""},required:{type:Boolean},tooltipAttributes:{default:()=>({})},help:{default:""}},setup(o){e.watch(()=>o.help,t=>{t&&console.warn("KLabel: `help` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#klabel")},{immediate:!0});const r=e.useSlots(),a=()=>!!(o.help||o.info||r.tooltip),l=e.useId(),s=e.useTemplateRef("label"),u=["a[href]","audio[controls]","button","details","embed","iframe","img[usemap]",'input:not([type="hidden"])',"label","select","textarea","video[controls]","area[href]"].join(", ");function c(t){return t.closest(u)}function d(t){const i=t.target,n=c(i);n&&n!==s.value||t.preventDefault()}return(t,i)=>(e.openBlock(),e.createElementBlock("label",{ref:"label",class:e.normalizeClass(["k-label",{required:o.required}])},[e.renderSlot(t.$slots,"default",{},void 0,!0),a()?(e.openBlock(),e.createBlock(f.default,e.mergeProps({key:0},o.tooltipAttributes,{class:"label-tooltip","tooltip-id":e.unref(l),onClick:d}),{content:e.withCtx(()=>[e.renderSlot(t.$slots,"tooltip",{},()=>[e.createTextVNode(e.toDisplayString(o.info||o.help),1)],!0)]),default:e.withCtx(()=>[e.createVNode(e.unref(p.InfoIcon),{"aria-describedby":e.unref(l),class:"tooltip-trigger-icon",color:`var(--kui-color-text-neutral, ${e.unref(b.KUI_COLOR_TEXT_NEUTRAL)})`,tabindex:"0"},null,8,["aria-describedby","color"])]),_:3},16,["tooltip-id"])):e.createCommentVNode("",!0)],2))}});exports.default=m;

package/dist/kongponents121.es.js

@@ -2,7 +2,7 @@ import { defineComponent as b, watch as h, useSlots as g, useId as k, useTemplat
 import x from "./kongponents30.es.js";
 /* empty css                 */
 import { InfoIcon as B } from "@kong/icons";
-import { KUI_COLOR_TEXT_NEUTRAL as S } from "./kongponents183.es.js";
+import { KUI_COLOR_TEXT_NEUTRAL as S } from "./kongponents182.es.js";
 const w = /* @__PURE__ */ b({
   __name: "KLabel",
   props: {

package/dist/kongponents123.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),x=require("focus-trap-vue"),T=require("./kongponents199.cjs"),B=require("./kongponents38.cjs"),N=require("@kong/icons"),g=require("./kongponents183.cjs"),k=require("./kongponents182.cjs"),w=require("./kongponents203.cjs"),$=["aria-label"],O={key:0,class:"modal-header"},A={key:0,class:"modal-title"},I={class:"modal-footer"},D={class:"footer-actions"},z=e.defineComponent({inheritAttrs:!1,__name:"KModal",props:{visible:{type:Boolean},title:{default:""},actionButtonText:{default:"Submit"},actionButtonAppearance:{default:"primary"},actionButtonDisabled:{type:Boolean},hideCancelButton:{type:Boolean},cancelButtonText:{default:"Cancel"},cancelButtonAppearance:{default:"tertiary"},cancelButtonDisabled:{type:Boolean},tabbableOptions:{default:()=>({})},maxWidth:{default:"500px"},maxHeight:{default:"calc(100vh - 200px)"},closeOnBackdropClick:{type:Boolean},closeOnEscape:{type:Boolean,default:!0},hideCloseIcon:{type:Boolean},fullScreen:{type:Boolean},inputAutofocus:{type:Boolean},zIndex:{default:1100}},emits:["proceed","cancel"],setup(o,{emit:C}){e.useCssVars(t=>({c9546bd4:t.zIndex,v6d2ff071:h.value,v7fba0424:S.value}));const E=C,i=e.useSlots();e.provide(w.POPOVER_PARENT_ZINDEX_KEY,e.computed(()=>o.zIndex));const r=e.useAttrs(),p=T.useTextSelection(),u=`k-modal-${e.useId()}-overflow-hidden`,n=e.ref(null),f=e.ref(null),h=e.computed(()=>o.fullScreen&&!i.content?"95%":k.normalizeSize(o.maxWidth)),S=e.computed(()=>o.fullScreen&&!i.content?"95vh":k.normalizeSize(o.maxHeight)),V=e.computed(()=>{const t=Object.assign({},r);return delete t.class,t}),m=()=>!!o.title||!!i.title||!o.hideCloseIcon,v=t=>{o.visible&&o.closeOnEscape&&t.key==="Escape"&&b(!0)},b=(t=!1,a)=>{(t||a?.target?.classList?.contains("modal-backdrop")&&o.closeOnBackdropClick&&!p.text.value)&&E("cancel")},s=async t=>{t?(await e.nextTick(),await new Promise(a=>setTimeout(a,0)),n.value?.activate()):n.value?.deactivate()},d=t=>{typeof document<"u"&&(t?document?.addEventListener("keydown",v):document?.removeEventListener("keydown",v))},y=()=>{const t=n.value?.$el?.querySelector(".modal-content")?.querySelectorAll("input");t?.length&&Array.from(t).every(a=>!a.disabled&&!a.readOnly?(a.focus(),!1):!0)};e.watch(()=>o.visible,async t=>{t?(await s(!0),o.inputAutofocus&&y(),d(!0)):(await s(!1),d(!1)),typeof document<"u"&&document?.body?.classList?.toggle(u,t)},{immediate:!0}),e.watch(()=>o.inputAutofocus,async t=>{t&&(await e.nextTick(),y())});const l=e.ref(null);return e.onMounted(()=>{typeof document<"u"&&(l.value=document.createElement("style"),l.value.textContent=`body.${u} { overflow: hidden; }`,document.head.appendChild(l.value))}),e.onBeforeUnmount(async()=>{await s(!1),d(!1)}),e.onUnmounted(()=>{l.value?.remove()}),(t,a)=>o.visible?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,"aria-label":o.title,"aria-modal":"true",class:["k-modal",[e.unref(r).class]]},V.value,{role:"dialog"}),[e.createElementVNode("div",{ref_key:"modalWrapperElement",ref:f,class:e.normalizeClass(["modal-backdrop",{"modal-full-screen":o.fullScreen&&!t.$slots.content}]),onClick:a[3]||(a[3]=c=>b(!1,c))},[e.createVNode(e.unref(x.FocusTrap),{ref_key:"focusTrapElement",ref:n,active:!1,"fallback-focus":()=>f.value,"tabbable-options":o.tabbableOptions},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["modal-container",{"custom-content":t.$slots.content}]),tabindex:"-1"},[e.renderSlot(t.$slots,"content",{},()=>[m()?(e.openBlock(),e.createElementBlock("div",O,[o.title||t.$slots.title?(e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])):e.createCommentVNode("",!0),o.hideCloseIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:1,"aria-label":"Close",class:"close-icon","data-testid":"modal-close-icon",type:"button",onClick:a[0]||(a[0]=c=>t.$emit("cancel"))},[e.createVNode(e.unref(N.CloseIcon),{color:`var(--kui-color-text-neutral, ${e.unref(g.KUI_COLOR_TEXT_NEUTRAL)})`,decorative:""},null,8,["color"])]))])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["modal-content",{"no-header":!m()}])},[e.renderSlot(t.$slots,"default",{},void 0,!0)],2),e.createElementVNode("div",I,[e.renderSlot(t.$slots,"footer",{},()=>[e.createElementVNode("div",D,[e.renderSlot(t.$slots,"footer-actions",{},()=>[o.hideCancelButton?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(B.default,{key:0,appearance:o.cancelButtonAppearance,"data-testid":"modal-cancel-button",disabled:o.cancelButtonDisabled,onClick:a[1]||(a[1]=c=>t.$emit("cancel"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.cancelButtonText),1)]),_:1},8,["appearance","disabled"])),e.createVNode(B.default,{appearance:o.actionButtonAppearance,"data-testid":"modal-action-button",disabled:o.actionButtonDisabled,onClick:a[2]||(a[2]=c=>t.$emit("proceed"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.actionButtonText),1)]),_:1},8,["appearance","disabled"])],!0)])],!0)])],!0)],2)]),_:3},8,["fallback-focus","tabbable-options"])],2)],16,$)):e.createCommentVNode("",!0)}});exports.default=z;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),x=require("focus-trap-vue"),T=require("./kongponents188.cjs"),B=require("./kongponents38.cjs"),N=require("@kong/icons"),g=require("./kongponents182.cjs"),k=require("./kongponents189.cjs"),w=require("./kongponents195.cjs"),$=["aria-label"],O={key:0,class:"modal-header"},A={key:0,class:"modal-title"},I={class:"modal-footer"},D={class:"footer-actions"},z=e.defineComponent({inheritAttrs:!1,__name:"KModal",props:{visible:{type:Boolean},title:{default:""},actionButtonText:{default:"Submit"},actionButtonAppearance:{default:"primary"},actionButtonDisabled:{type:Boolean},hideCancelButton:{type:Boolean},cancelButtonText:{default:"Cancel"},cancelButtonAppearance:{default:"tertiary"},cancelButtonDisabled:{type:Boolean},tabbableOptions:{default:()=>({})},maxWidth:{default:"500px"},maxHeight:{default:"calc(100vh - 200px)"},closeOnBackdropClick:{type:Boolean},closeOnEscape:{type:Boolean,default:!0},hideCloseIcon:{type:Boolean},fullScreen:{type:Boolean},inputAutofocus:{type:Boolean},zIndex:{default:1100}},emits:["proceed","cancel"],setup(o,{emit:C}){e.useCssVars(t=>({c9546bd4:t.zIndex,v6d2ff071:h.value,v7fba0424:S.value}));const E=C,i=e.useSlots();e.provide(w.POPOVER_PARENT_ZINDEX_KEY,e.computed(()=>o.zIndex));const r=e.useAttrs(),p=T.useTextSelection(),u=`k-modal-${e.useId()}-overflow-hidden`,n=e.ref(null),f=e.ref(null),h=e.computed(()=>o.fullScreen&&!i.content?"95%":k.normalizeSize(o.maxWidth)),S=e.computed(()=>o.fullScreen&&!i.content?"95vh":k.normalizeSize(o.maxHeight)),V=e.computed(()=>{const t=Object.assign({},r);return delete t.class,t}),m=()=>!!o.title||!!i.title||!o.hideCloseIcon,v=t=>{o.visible&&o.closeOnEscape&&t.key==="Escape"&&b(!0)},b=(t=!1,a)=>{(t||a?.target?.classList?.contains("modal-backdrop")&&o.closeOnBackdropClick&&!p.text.value)&&E("cancel")},s=async t=>{t?(await e.nextTick(),await new Promise(a=>setTimeout(a,0)),n.value?.activate()):n.value?.deactivate()},d=t=>{typeof document<"u"&&(t?document?.addEventListener("keydown",v):document?.removeEventListener("keydown",v))},y=()=>{const t=n.value?.$el?.querySelector(".modal-content")?.querySelectorAll("input");t?.length&&Array.from(t).every(a=>!a.disabled&&!a.readOnly?(a.focus(),!1):!0)};e.watch(()=>o.visible,async t=>{t?(await s(!0),o.inputAutofocus&&y(),d(!0)):(await s(!1),d(!1)),typeof document<"u"&&document?.body?.classList?.toggle(u,t)},{immediate:!0}),e.watch(()=>o.inputAutofocus,async t=>{t&&(await e.nextTick(),y())});const l=e.ref(null);return e.onMounted(()=>{typeof document<"u"&&(l.value=document.createElement("style"),l.value.textContent=`body.${u} { overflow: hidden; }`,document.head.appendChild(l.value))}),e.onBeforeUnmount(async()=>{await s(!1),d(!1)}),e.onUnmounted(()=>{l.value?.remove()}),(t,a)=>o.visible?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,"aria-label":o.title,"aria-modal":"true",class:["k-modal",[e.unref(r).class]]},V.value,{role:"dialog"}),[e.createElementVNode("div",{ref_key:"modalWrapperElement",ref:f,class:e.normalizeClass(["modal-backdrop",{"modal-full-screen":o.fullScreen&&!t.$slots.content}]),onClick:a[3]||(a[3]=c=>b(!1,c))},[e.createVNode(e.unref(x.FocusTrap),{ref_key:"focusTrapElement",ref:n,active:!1,"fallback-focus":()=>f.value,"tabbable-options":o.tabbableOptions},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["modal-container",{"custom-content":t.$slots.content}]),tabindex:"-1"},[e.renderSlot(t.$slots,"content",{},()=>[m()?(e.openBlock(),e.createElementBlock("div",O,[o.title||t.$slots.title?(e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])):e.createCommentVNode("",!0),o.hideCloseIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:1,"aria-label":"Close",class:"close-icon","data-testid":"modal-close-icon",type:"button",onClick:a[0]||(a[0]=c=>t.$emit("cancel"))},[e.createVNode(e.unref(N.CloseIcon),{color:`var(--kui-color-text-neutral, ${e.unref(g.KUI_COLOR_TEXT_NEUTRAL)})`,decorative:""},null,8,["color"])]))])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["modal-content",{"no-header":!m()}])},[e.renderSlot(t.$slots,"default",{},void 0,!0)],2),e.createElementVNode("div",I,[e.renderSlot(t.$slots,"footer",{},()=>[e.createElementVNode("div",D,[e.renderSlot(t.$slots,"footer-actions",{},()=>[o.hideCancelButton?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(B.default,{key:0,appearance:o.cancelButtonAppearance,"data-testid":"modal-cancel-button",disabled:o.cancelButtonDisabled,onClick:a[1]||(a[1]=c=>t.$emit("cancel"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.cancelButtonText),1)]),_:1},8,["appearance","disabled"])),e.createVNode(B.default,{appearance:o.actionButtonAppearance,"data-testid":"modal-action-button",disabled:o.actionButtonDisabled,onClick:a[2]||(a[2]=c=>t.$emit("proceed"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.actionButtonText),1)]),_:1},8,["appearance","disabled"])],!0)])],!0)])],!0)],2)]),_:3},8,["fallback-focus","tabbable-options"])],2)],16,$)):e.createCommentVNode("",!0)}});exports.default=z;

package/dist/kongponents123.es.js

@@ -1,11 +1,11 @@
 import { defineComponent as H, useCssVars as P, useSlots as R, provide as M, computed as u, useAttrs as U, useId as F, ref as y, watch as g, nextTick as x, onMounted as q, onBeforeUnmount as X, onUnmounted as Y, openBlock as a, createElementBlock as r, mergeProps as j, unref as f, createElementVNode as l, normalizeClass as B, createVNode as k, withCtx as p, renderSlot as n, createTextVNode as h, toDisplayString as C, createCommentVNode as i, createBlock as Z } from "vue";
 import { FocusTrap as G } from "focus-trap-vue";
-import { useTextSelection as J } from "./kongponents199.es.js";
+import { useTextSelection as J } from "./kongponents188.es.js";
 import I from "./kongponents38.es.js";
 import { CloseIcon as Q } from "@kong/icons";
-import { KUI_COLOR_TEXT_NEUTRAL as _ } from "./kongponents183.es.js";
-import { normalizeSize as D } from "./kongponents182.es.js";
-import { POPOVER_PARENT_ZINDEX_KEY as ee } from "./kongponents203.es.js";
+import { KUI_COLOR_TEXT_NEUTRAL as _ } from "./kongponents182.es.js";
+import { normalizeSize as D } from "./kongponents189.es.js";
+import { POPOVER_PARENT_ZINDEX_KEY as ee } from "./kongponents195.es.js";
 const te = ["aria-label"], oe = {
   key: 0,
   class: "modal-header"

package/dist/kongponents125.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("./kongponents38.cjs"),m=require("@kong/icons"),f=require("./kongponents183.cjs"),y=["aria-label"],p={class:"k-modal-fullscreen-body-header"},h={key:0,class:"body-header"},k={key:1,class:"body-header-description"},b={class:"k-modal-fullscreen-body"},v={class:"k-modal-fullscreen-header"},V={"aria-level":"2",class:"k-modal-fullscreen-header-description",role:"heading"},g={class:"k-modal-fullscreen-title"},N={class:"header-icon"},S={class:"header-content"},B={class:"k-modal-fullscreen-action"},E={class:"k-modal-fullscreen-action-buttons"},C={key:0,class:"k-modal-fullscreen-footer"},T={class:"k-modal-fullscreen-action"},w={class:"k-modal-fullscreen-action-buttons"},$=e.defineComponent({__name:"KModalFullscreen",props:{title:{type:String,required:!0},bodyHeader:{type:String,default:""},bodyHeaderDescription:{type:String,default:""},isVisible:{type:Boolean,default:!1},cancelButtonText:{type:String,default:"Cancel"},actionButtonText:{type:String,default:"Save"},actionButtonAppearance:{type:String,default:"primary"},cancelButtonAppearance:{type:String,default:"secondary"},iconString:{type:String,default:"kong"}},emits:["canceled","proceed"],setup(o,{emit:i}){const a=o,c=i,l=e.ref(null),u=e.computed(()=>!!a.isVisible);e.watch(()=>a.isVisible,async()=>{typeof document>"u"||(u.value?(document.body.style.overflow="hidden",await e.nextTick(),l.value&&l.value.focus()):document.body.style.overflow="")});const s=t=>{a.isVisible&&(t.keyCode===27?d():t.keyCode===13&&n())},d=()=>{c("canceled")},n=()=>{c("proceed")};return e.onMounted(()=>{document.addEventListener("keydown",s),console.warn(`The Kongponents 'KModalFullscreen' component is deprecated and will be removed in the next major release.
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("./kongponents38.cjs"),m=require("@kong/icons"),f=require("./kongponents182.cjs"),y=["aria-label"],p={class:"k-modal-fullscreen-body-header"},h={key:0,class:"body-header"},k={key:1,class:"body-header-description"},b={class:"k-modal-fullscreen-body"},v={class:"k-modal-fullscreen-header"},V={"aria-level":"2",class:"k-modal-fullscreen-header-description",role:"heading"},g={class:"k-modal-fullscreen-title"},N={class:"header-icon"},S={class:"header-content"},B={class:"k-modal-fullscreen-action"},E={class:"k-modal-fullscreen-action-buttons"},C={key:0,class:"k-modal-fullscreen-footer"},T={class:"k-modal-fullscreen-action"},w={class:"k-modal-fullscreen-action-buttons"},$=e.defineComponent({__name:"KModalFullscreen",props:{title:{type:String,required:!0},bodyHeader:{type:String,default:""},bodyHeaderDescription:{type:String,default:""},isVisible:{type:Boolean,default:!1},cancelButtonText:{type:String,default:"Cancel"},actionButtonText:{type:String,default:"Save"},actionButtonAppearance:{type:String,default:"primary"},cancelButtonAppearance:{type:String,default:"secondary"},iconString:{type:String,default:"kong"}},emits:["canceled","proceed"],setup(o,{emit:i}){const a=o,c=i,l=e.ref(null),u=e.computed(()=>!!a.isVisible);e.watch(()=>a.isVisible,async()=>{typeof document>"u"||(u.value?(document.body.style.overflow="hidden",await e.nextTick(),l.value&&l.value.focus()):document.body.style.overflow="")});const s=t=>{a.isVisible&&(t.keyCode===27?d():t.keyCode===13&&n())},d=()=>{c("canceled")},n=()=>{c("proceed")};return e.onMounted(()=>{document.addEventListener("keydown",s),console.warn(`The Kongponents 'KModalFullscreen' component is deprecated and will be removed in the next major release.
 We suggest using 'KModal' component instead.
 Docs: https://kongponents.konghq.com/components/modal.html#fullscreen`)}),e.onBeforeUnmount(()=>{document.removeEventListener("keydown",s)}),e.onUnmounted(()=>{document.body.style.overflow=""}),(t,D)=>o.isVisible?(e.openBlock(),e.createElementBlock("div",{key:0,"aria-label":o.title,"aria-modal":"true",class:"k-modal-fullscreen isOpen",role:"dialog",onKeyup:[e.withKeys(n,["enter"]),e.withKeys(d,["esc"])]},[e.createElementVNode("div",{ref_key:"modalBodyContent",ref:l,class:e.normalizeClass(["k-modal-fullscreen-dialog",{"has-footer":t.$slots["footer-content"]}]),tabindex:"0"},[e.createElementVNode("div",p,[t.$slots["body-header"]||o.bodyHeader?(e.openBlock(),e.createElementBlock("div",h,[e.renderSlot(t.$slots,"body-header",{},()=>[e.createTextVNode(e.toDisplayString(o.bodyHeader),1)],!0)])):e.createCommentVNode("",!0),t.$slots["body-header-description"]||o.bodyHeaderDescription?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(t.$slots,"body-header-description",{},()=>[e.createTextVNode(e.toDisplayString(o.bodyHeaderDescription),1)],!0)])):e.createCommentVNode("",!0)]),e.createElementVNode("div",b,[e.renderSlot(t.$slots,"default",{},void 0,!0)]),e.createElementVNode("div",v,[e.createElementVNode("div",V,[e.createElementVNode("div",g,[e.createElementVNode("span",N,[e.renderSlot(t.$slots,"header-icon",{},()=>[e.createVNode(e.unref(m.KongIcon),{color:`var(--kui-color-text-decorative-aqua, ${e.unref(f.KUI_COLOR_TEXT_DECORATIVE_AQUA)})`},null,8,["color"])],!0)]),e.createElementVNode("span",S,[e.renderSlot(t.$slots,"header-content",{},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)])]),e.createElementVNode("div",B,[e.createElementVNode("div",E,[e.renderSlot(t.$slots,"action-buttons",{},()=>[e.createVNode(r.default,{appearance:o.cancelButtonAppearance,class:"cancel-button",onClick:d},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.cancelButtonText),1)]),_:1},8,["appearance"]),e.createVNode(r.default,{appearance:o.actionButtonAppearance,class:"proceed-button",onClick:n},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.actionButtonText),1)]),_:1},8,["appearance"])],!0)])])])]),t.$slots["footer-content"]?(e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(t.$slots,"footer-content",{},void 0,!0),e.createElementVNode("div",T,[e.createElementVNode("div",w,[e.renderSlot(t.$slots,"action-buttons",{},()=>[e.createVNode(r.default,{appearance:o.actionButtonAppearance,class:"proceed-button",onClick:n},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.actionButtonText),1)]),_:1},8,["appearance"])],!0)])])])):e.createCommentVNode("",!0)],2)],40,y)):e.createCommentVNode("",!0)}});exports.default=$;

package/dist/kongponents125.es.js

@@ -1,7 +1,7 @@
 import { defineComponent as C, ref as $, computed as w, watch as S, nextTick as T, onMounted as K, onBeforeUnmount as V, onUnmounted as A, openBlock as d, createElementBlock as c, withKeys as k, createElementVNode as o, normalizeClass as E, renderSlot as n, createTextVNode as a, toDisplayString as s, createCommentVNode as i, createVNode as r, unref as v, withCtx as y } from "vue";
 import p from "./kongponents38.es.js";
 import { KongIcon as D } from "@kong/icons";
-import { KUI_COLOR_TEXT_DECORATIVE_AQUA as H } from "./kongponents183.es.js";
+import { KUI_COLOR_TEXT_DECORATIVE_AQUA as H } from "./kongponents182.es.js";
 const _ = ["aria-label"], O = { class: "k-modal-fullscreen-body-header" }, M = {
   key: 0,
   class: "body-header"

package/dist/kongponents127.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),Ne=require("./kongponents190.cjs"),te=require("./kongponents36.cjs"),le=require("./kongponents55.cjs"),Ee=require("./kongponents57.cjs"),qe=require("./kongponents62.cjs"),ze=require("./kongponents29.cjs"),Ke=require("./kongponents30.cjs");;/* empty css                */const $e=require("./kongponents197.cjs"),Fe=require("./kongponents198.cjs"),x=require("@kong/icons"),V=require("./kongponents183.cjs"),Me=require("vue-clamp"),Pe=require("./kongponents180.cjs"),De=require("./kongponents199.cjs"),Te=require("./kongponents160.cjs"),oe=require("./kongponents182.cjs"),Ue={"data-testid":"multiselect-container"},Oe=["id","tabindex"],Re={key:0},Le={key:1,class:"expanded-selection-empty"},He={class:"multiselect-selection-badge-label"},We=["aria-label","onClick"],Ge={class:"multiselect-icons-container"},Je={key:0,class:"multiselect-input-wrapper"},Ze={key:2,class:"multiselect-empty","data-propagate-clicks":"false"},je={key:1,class:"help-text"},Qe="Filter...",Xe=e.defineComponent({inheritAttrs:!1,__name:"KMultiselect",props:{modelValue:{default:()=>[]},label:{default:""},help:{default:""},error:{type:Boolean},labelAttributes:{default:()=>({})},placeholder:{default:""},searchPlaceholder:{default:""},kpopAttributes:{default:()=>({})},dropdownMaxHeight:{default:"300px"},width:{default:"100%"},selectedRowCount:{default:1},collapsedContext:{type:Boolean},items:{default:()=>[]},filterFunction:{type:Function,default:a=>a.items.filter(B=>B.label?.toLowerCase().includes(a.query?.toLowerCase()))},autosuggest:{type:Boolean},enableItemCreation:{type:Boolean},loading:{type:Boolean},dropdownFooterText:{default:""},dropdownFooterTextPosition:{},dropdownFooterPosition:{},itemCreationValidator:{type:Function,default:()=>!0}},emits:["selected","input","change","update:modelValue","query-change","item-added","item-removed","open","close"],setup(a,{emit:B}){e.useCssVars(t=>({v3e0350e0:ye.value}));const ae=t=>{const l=[],o=s=>{"value"in s?l.push(s.value):"items"in s&&Array.isArray(s.items)&&s.items.forEach(n=>l.push(n.value))};return t.forEach(o),l},se=t=>{const l=ae(t),o=new Set(l);return l.length===o.size},ne=t=>{for(const l of t)if("value"in l){if(l.label===void 0||l.value===void 0)return!1}else if("items"in l&&Array.isArray(l.items)){if(l.label===void 0)return!1;for(const o of l.items)if(o.label===void 0||o.value===void 0)return!1}return!0},p=e.useAttrs(),A=e.useSlots(),{cloneDeep:ue,stripRequiredLabel:ie}=Ne.default();e.watch(()=>a.items,t=>{!t.length||ne(t)&&se(t)||console.warn("KMultiselect: Items must have a label & value and value must be unique")},{immediate:!0});const m=B,z=e.useTemplateRef("kMultiselectItems"),K=e.computed(()=>p.required!==void 0&&String(p.required)!=="false"),re=e.computed(()=>ie(a.label,K.value)),ce=()=>!!(a.labelAttributes?.help||a.labelAttributes?.info||A["label-tooltip"]),$=t=>w.value||b.value||t?.disabled?"neutral":a.error?"danger":"info",F={hideCaret:!0,placement:"bottom-start",popoverTimeout:0,popoverClasses:"k-multiselect-popover multiselect-popover"},de=e.useId(),M=e.computed(()=>p.id?String(p.id):de),P=e.useTemplateRef("multiselectElement"),fe=e.useTemplateRef("multiselectDropdownInputElement"),v=e.ref(""),D=e.computed(()=>!(!v.value||r.value.filter(t=>t.label===v.value).length)),T=e.ref(null),r=e.ref([]),g=e.ref([]),S=e.ref([]),c=e.ref([]),ve=t=>t.map(l=>l.label).join(", "),U=e.ref(!1),C=e.ref(!1),N=e.ref(!1),w=e.computed(()=>p?.disabled!==void 0&&String(p?.disabled)!=="false"),b=e.computed(()=>p?.readonly!==void 0&&String(p?.readonly)!=="false"),me=e.computed({get(){return a.modelValue},set(t){const l=r.value.filter(o=>t.includes(o.value));l.length?G(l):t.length||q()}}),pe=e.computed(()=>{const t={...p};return delete t.class,t}),O=()=>!!(a.dropdownFooterText||A["dropdown-footer-text"]||A["dropdown-footer"]),he=e.computed(()=>a.dropdownFooterPosition??a.dropdownFooterTextPosition??"sticky"),ge=()=>({...F,...a.kpopAttributes,popoverClasses:`${F.popoverClasses} ${a.kpopAttributes?.popoverClasses??""} ${O()?"has-dropdown-footer":""}`,width:I.value+"px",maxWidth:I.value+"px",disabled:p.disabled!==void 0&&String(p.disabled)!=="false"||p.readonly!==void 0&&String(p.readonly)!=="false"}),ye=e.computed(()=>oe.normalizeSize(a.dropdownMaxHeight)),be=e.computed(()=>{const t=a.width?a.width:"300";return oe.normalizeSize(t)}),ke=e.computed(()=>({width:be.value})),R=e.computed(()=>({width:I.value+"px"})),L=e.computed(()=>{if(c.value.length===0){if(!a.collapsedContext&&a.placeholder)return a.placeholder;if(a.collapsedContext&&a.searchPlaceholder)return a.searchPlaceholder}return c.value.length===1?`${c.value.length} item selected`:`${c.value.length} items selected`}),we=e.computed(()=>a.autosuggest?r.value:a.filterFunction({items:r.value,query:v.value})),H=e.computed(()=>{if(a.autosuggest||!v.value)return g.value;const t=we.value,l=new Set(t.map(s=>s.value)),o=[];for(const s of g.value)if(y(s)){const n=s.items.filter(u=>l.has(u.value));n.length>0&&o.push({label:s.label,key:s.key,items:n})}else l.has(s.value)&&o.push(s);return o}),Ce=t=>{(w.value||t?.target?.dataset.propagateClicks==="false")&&t.stopPropagation()},W=async(t,l,o)=>{t?(m("open"),l.value||(v.value="",o(),j(),await e.nextTick(),fe.value?.$el?.querySelector("input")?.focus({preventScroll:!0}))):(m("close"),l.value&&(v.value="",o()))},Ie=t=>{const l=new Map(c.value.map(o=>[o.value,o]));c.value=t.map(o=>l.get(o)).filter(o=>o!==void 0)},G=t=>{t.forEach(l=>{const o=r.value.filter(s=>s.value===l.value)?.[0]||null;o&&(o.selected=!0,c.value.filter(s=>s.value===o.value).length||c.value.push(o))})},Se=t=>{const l=new Set(t.map(o=>o.value));c.value=c.value.filter(o=>!l.has(o.value)),t.forEach(o=>{o.selected=!1,a.enableItemCreation&&o.custom&&(r.value=r.value.filter(s=>s.value!==o.value),g.value=g.value.filter(s=>y(s)?!0:s.value!==o.value),m("item-removed",o))})},E=(t,l)=>{let o=!1,s=l?t:r.value.filter(u=>u.value===t.value)?.[0]||null;if(a.enableItemCreation&&s?.custom&&(o=!0),s===null&&(s=c.value.filter(u=>u.value===t.value)?.[0]||null),s===null)return;s.selected?(c.value=c.value.filter(u=>u.value!==t.value),s.selected=!1,o&&(r.value=r.value.filter(u=>u.value!==t.value),g.value=g.value.filter(u=>y(u)?!0:u.value!==t.value),m("item-removed",t))):(s.selected=!0,c.value.push(s),l&&(s.custom=!0,r.value.push(s),g.value.unshift(s)));const n=c.value.map(u=>u.value);m("selected",c.value),m("change",s),m("update:modelValue",n)},J=t=>{a.enableItemCreation&&Z(),t.preventDefault()},Z=()=>{if(!a.enableItemCreation||!v.value||!D.value||!a.itemCreationValidator(v.value))return;const t=r.value.length+1,l={label:v.value.trim(),value:Te.getUniqueStringId(),key:`${Pe.sanitizeInput(v.value.trim()).replace(/ /gi,"-")?.replace(/[^a-z0-9-_]/gi,"")}-${t}`};m("item-added",l),E(l,!0),v.value=""},y=t=>"items"in t&&Array.isArray(t.items),j=()=>{const t=[],l=[],o=[];for(const u of H.value)y(u)?o.push(u):l.push(u);const s=l.filter(u=>u.selected),n=l.filter(u=>!u.selected);t.push(...s,...n);for(const u of o){const i=u.items.filter(d=>d.selected),h=u.items.filter(d=>!d.selected);t.push({label:u.label,key:u.key,items:[...i,...h]})}S.value=t},q=()=>{r.value.forEach(l=>{l.disabled||(l.selected=!1,l.custom&&m("item-removed",l))}),r.value=r.value.filter(l=>!(l.custom&&!l.disabled)),g.value=g.value.filter(l=>y(l)?!0:!(l.custom&&!l.disabled)),c.value=c.value.filter(l=>l.disabled),v.value="";const t=c.value.map(l=>l.value);m("selected",c.value),m("update:modelValue",t),m("query-change","")},Q=t=>{v.value=t.trim(),m("query-change",t.trim())},xe=(t,l)=>{t.keyCode===27&&(l.value=!1),(t.key==="ArrowDown"||t.key==="ArrowUp")&&z.value?.setFocus(t.key==="ArrowDown"?"down":"up")},X=()=>{T.value?.showPopover()},Ve=t=>{(t.key==="ArrowDown"||t.key==="ArrowUp")&&z.value?.setFocus(t.key==="ArrowDown"?"down":"up")},Be=async()=>{N.value=!0,Y()},Y=()=>{U.value||(U.value=!0,m("query-change",""))};e.watch(H,()=>{j()}),e.watch(me,(t,l)=>{if(JSON.stringify(t)!==JSON.stringify(l)){const o=c.value.map(d=>d.value);if(JSON.stringify(o)===JSON.stringify(t))return;if(!t.length){q();return}const s=new Set(l),n=new Set(t),u=new Set(o),i=r.value.filter(d=>n.has(d.value)&&!u.has(d.value)),h=c.value.filter(d=>!n.has(d.value)&&s.has(d.value));h.length&&Se(h),i.length&&G(i),Ie(t)}},{flush:"post"}),e.watch(()=>a.items,(t,l)=>{if(JSON.stringify(t)===JSON.stringify(l))return;const o=ue(a.items),s=o.some(i=>y(i)),n=[],u=[];if(s)for(const i of o)y(i)?n.push(...i.items):n.push(i);else{const i=new Map;for(const f of o)y(f)||(f.group&&(i.has(f.group)||i.set(f.group,[]),i.get(f.group).push(f)),n.push(f));const h=Array.from(i.keys()).sort((f,k)=>f.toLowerCase().localeCompare(k.toLowerCase())),d=n.filter(f=>!f.group);u.push(...d);for(const f of h)u.push({label:f,items:i.get(f)})}r.value=n;for(let i=0;i<r.value.length;i++){r.value[i].selected===void 0&&(r.value[i].selected=!1);let h=`${r.value[i].label?.replace(/ /gi,"-")?.replace(/[^a-z0-9-_]/gi,"")}-${i}`;if(h.includes("undefined")&&(h=`multiselect-item-label-${i}`),r.value[i].key=h,a.modelValue.includes(r.value[i].value)||r.value[i].selected){const d=r.value[i];d.selected=!0,c.value.filter(f=>f.value===d.value).length||c.value.push(d)}}if(s){const i=[],h=[];for(const d of o)if(y(d)){const f=d.items.map(k=>r.value.find(Ae=>Ae.value===k.value)).filter(k=>k!==void 0);h.push({label:d.label,key:d.key,items:f})}else{const f=r.value.find(k=>k.value===d.value);f&&i.push(f)}u.push(...i,...h)}g.value=u},{deep:!0,immediate:!0});const I=e.ref(300),_=e.ref(!1),ee=async()=>{I.value=300,await e.nextTick(),I.value=P.value?.clientWidth||300};return e.onMounted(async()=>{await ee(),_.value=!0}),De.useResizeObserver(P,()=>{ee()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-multiselect",[t.$attrs.class,{"multiselect-error":a.error}]]),style:e.normalizeStyle(ke.value)},[a.label?(e.openBlock(),e.createBlock(Ee.default,e.mergeProps({key:0},a.labelAttributes,{"data-testid":a.labelAttributes["data-testid"]?a.labelAttributes["data-testid"]:"multiselect-label",for:M.value,required:K.value}),e.createSlots({default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(re.value)+" ",1)]),_:2},[ce()?{name:"tooltip",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"label-tooltip",{},void 0,!0)]),key:"0"}:void 0]),1040,["data-testid","for","required"])):e.createCommentVNode("",!0),e.createElementVNode("div",Ue,[e.createVNode(ze.default,null,{default:e.withCtx(({isToggled:o,toggle:s})=>[e.createVNode(qe.default,e.mergeProps({ref_key:"popper",ref:T,"hide-close-icon":"",offset:`var(--kui-space-40, ${e.unref(V.KUI_SPACE_40)})`},ge(),{onClose:()=>W(!1,o,s),onOpen:()=>W(!0,o,s)}),{content:e.withCtx(()=>[e.createElementVNode("div",{class:"multiselect-list",onClick:l[7]||(l[7]=e.withModifiers(()=>{},["stop"])),onMouseenter:l[8]||(l[8]=()=>C.value=!0),onMouseleave:l[9]||(l[9]=()=>C.value=!1)},[!a.collapsedContext&&!b.value?(e.openBlock(),e.createElementBlock("div",Je,[e.createVNode(le.default,{ref:"multiselectDropdownInputElement",autocapitalize:"off",autocomplete:"off",autocorrect:"off",class:"multiselect-dropdown-input","data-testid":"multiselect-dropdown-input","model-value":v.value,name:"multiselect-options-search",placeholder:a.searchPlaceholder||Qe,spellcheck:"false",type:"text",onClick:l[5]||(l[5]=e.withModifiers(()=>{},["stop"])),onFocus:Y,onKeydown:e.withKeys(J,["enter"]),onKeyup:[Ve,l[6]||(l[6]=e.withKeys(e.withModifiers(()=>{},["stop"]),["enter"]))],"onUpdate:modelValue":Q},null,8,["model-value","placeholder"])])):e.createCommentVNode("",!0),e.createVNode($e.default,{ref:"kMultiselectItems","filter-string":v.value,"item-creation-enabled":a.enableItemCreation&&D.value,"item-creation-valid":a.itemCreationValidator(v.value),items:S.value,onAddItem:Z,onSelected:E},{content:e.withCtx(({item:n})=>[e.renderSlot(t.$slots,"item-template",{class:"multiselect-item",item:n},void 0,!0)]),_:3},8,["filter-string","item-creation-enabled","item-creation-valid","items"]),!S.value.length&&!t.$slots.empty&&!a.enableItemCreation?(e.openBlock(),e.createBlock(Fe.default,{key:"multiselect-empty-item",class:"multiselect-empty-item","data-testid":"multiselect-empty-item",item:{label:"No results",value:"no_results",disabled:!0}})):e.createCommentVNode("",!0),t.$slots.empty&&!a.loading&&!S.value.length?(e.openBlock(),e.createElementBlock("div",Ze,[e.renderSlot(t.$slots,"empty",{},void 0,!0)])):e.createCommentVNode("",!0)],32),O()?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["dropdown-footer",`dropdown-footer-${he.value}`]),"data-testid":"dropdown-footer"},[t.$slots["dropdown-footer"]?e.renderSlot(t.$slots,"dropdown-footer",{},void 0,!0,0):e.renderSlot(t.$slots,"dropdown-footer-text",{},()=>[e.createTextVNode(e.toDisplayString(a.dropdownFooterText),1)],!0,1)],2)):e.createCommentVNode("",!0)]),default:e.withCtx(()=>[e.createElementVNode("div",e.mergeProps({id:M.value,ref:"multiselectElement",class:["multiselect-trigger",{focused:N.value,hovered:C.value,disabled:w.value,readonly:b.value}],"data-testid":"multiselect-trigger",role:"listbox",tabindex:w.value||b.value||a.collapsedContext?-1:0},pe.value,{onClick:Ce,onKeydown:[e.withKeys(X,["enter"]),e.withKeys(X,["space"])]}),[a.collapsedContext?(e.openBlock(),e.createElementBlock("div",Re,[e.createVNode(le.default,{autocapitalize:"off",autocomplete:"off",autocorrect:"off",class:e.normalizeClass(["multiselect-input",{"is-readonly":b.value}]),"data-testid":"multiselect-input",disabled:w.value,"model-value":v.value,name:"multiselect-options-search",placeholder:L.value,readonly:b.value?!0:void 0,spellcheck:"false",type:"text",onBlur:l[0]||(l[0]=()=>N.value=!1),onClick:n=>{o.value&&n.stopPropagation()},onFocus:Be,onKeydown:e.withKeys(J,["enter"]),onKeyup:n=>xe(n,o),onMouseenter:l[1]||(l[1]=()=>C.value=!0),onMouseleave:l[2]||(l[2]=()=>C.value=!1),"onUpdate:modelValue":Q},null,8,["class","disabled","model-value","placeholder","readonly","onClick","onKeyup"])])):c.value.length?_.value?(e.openBlock(),e.createBlock(e.unref(Me.WrapClamp),{key:3,class:"selection-badges-container","data-testid":"selection-badges-container","item-key":"key",items:c.value,"max-lines":a.selectedRowCount,style:e.normalizeStyle(R.value)},{item:e.withCtx(({item:n})=>[e.createVNode(te.default,{appearance:$(n),class:"multiselect-selection-badge","icon-before":!1,tooltip:n.label,"truncation-tooltip":"",onClick:l[3]||(l[3]=e.withModifiers(()=>{},["stop"]))},e.createSlots({default:e.withCtx(()=>[e.renderSlot(t.$slots,"item-badge-icon",{item:n},void 0,!0),e.createElementVNode("span",He,e.toDisplayString(n.label),1)]),_:2},[n.selected&&!n.disabled&&!w.value&&!b.value?{name:"icon",fn:e.withCtx(()=>[e.createElementVNode("button",{"aria-label":`Unselect ${n.label}`,class:"badge-dismiss-button","data-testid":"badge-dismiss-button",type:"button",onClick:u=>E(n)},[e.createVNode(e.unref(x.CloseIcon),{decorative:""})],8,We)]),key:"0"}:void 0]),1032,["appearance","tooltip"])]),after:e.withCtx(({hiddenItems:n})=>[n.length?(e.openBlock(),e.createBlock(Ke.default,{key:0,class:"hidden-selection-count-tooltip","max-width":"300",text:ve(n)},{default:e.withCtx(()=>[e.createVNode(te.default,{appearance:$(),class:"hidden-selection-count","data-testid":"hidden-selection-count",onClick:l[4]||(l[4]=e.withModifiers(()=>{},["stop"]))},{default:e.withCtx(()=>[e.createTextVNode(" +"+e.toDisplayString(n.length),1)]),_:2},1032,["appearance"])]),_:2},1032,["text"])):e.createCommentVNode("",!0)]),_:3},8,["items","max-lines","style"])):(e.openBlock(),e.createElementBlock("div",{key:2,class:"selection-badges-container","data-testid":"selection-badges-container",style:e.normalizeStyle(R.value)},null,4)):(e.openBlock(),e.createElementBlock("div",Le,e.toDisplayString(L.value),1)),e.createElementVNode("div",Ge,[!a.loading&&c.value.length&&o.value?(e.openBlock(),e.createElementBlock("button",{key:0,"aria-label":"Clear",class:"multiselect-clear-icon","data-testid":"multiselect-clear-icon",type:"button",onClick:q},[e.createVNode(e.unref(x.CloseIcon),{size:`var(--kui-icon-size-40, ${e.unref(V.KUI_ICON_SIZE_40)})`},null,8,["size"])])):a.loading?(e.openBlock(),e.createBlock(e.unref(x.ProgressIcon),{key:1,class:"multiselect-loading-icon",size:`var(--kui-icon-size-40, ${e.unref(V.KUI_ICON_SIZE_40)})`,title:"Loading"},null,8,["size"])):(e.openBlock(),e.createBlock(e.unref(x.ChevronDownIcon),{key:2,class:"multiselect-chevron-icon",decorative:"",size:`var(--kui-icon-size-40, ${e.unref(V.KUI_ICON_SIZE_40)})`},null,8,["size"]))])],16,Oe)]),_:2},1040,["offset","onClose","onOpen"])]),_:3})]),a.help?(e.openBlock(),e.createElementBlock("p",je,e.toDisplayString(a.help),1)):e.createCommentVNode("",!0)],6))}});exports.default=Xe;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),Ne=require("./kongponents184.cjs"),te=require("./kongponents36.cjs"),le=require("./kongponents55.cjs"),Ee=require("./kongponents57.cjs"),qe=require("./kongponents62.cjs"),$e=require("./kongponents29.cjs"),ze=require("./kongponents30.cjs");;/* empty css                */const Ke=require("./kongponents203.cjs"),Fe=require("./kongponents204.cjs"),x=require("@kong/icons"),V=require("./kongponents182.cjs"),Me=require("vue-clamp"),Pe=require("./kongponents180.cjs"),De=require("./kongponents188.cjs"),Te=require("./kongponents160.cjs"),oe=require("./kongponents189.cjs"),Ue={"data-testid":"multiselect-container"},Oe=["id","tabindex"],Re={key:0},Le={key:1,class:"expanded-selection-empty"},He={class:"multiselect-selection-badge-label"},We=["aria-label","onClick"],Ge={class:"multiselect-icons-container"},Je={key:0,class:"multiselect-input-wrapper"},Ze={key:2,class:"multiselect-empty","data-propagate-clicks":"false"},je={key:1,class:"help-text"},Qe="Filter...",Xe=e.defineComponent({inheritAttrs:!1,__name:"KMultiselect",props:{modelValue:{default:()=>[]},label:{default:""},help:{default:""},error:{type:Boolean},labelAttributes:{default:()=>({})},placeholder:{default:""},searchPlaceholder:{default:""},kpopAttributes:{default:()=>({})},dropdownMaxHeight:{default:"300px"},width:{default:"100%"},selectedRowCount:{default:1},collapsedContext:{type:Boolean},items:{default:()=>[]},filterFunction:{type:Function,default:a=>a.items.filter(B=>B.label?.toLowerCase().includes(a.query?.toLowerCase()))},autosuggest:{type:Boolean},enableItemCreation:{type:Boolean},loading:{type:Boolean},dropdownFooterText:{default:""},dropdownFooterTextPosition:{},dropdownFooterPosition:{},itemCreationValidator:{type:Function,default:()=>!0}},emits:["selected","input","change","update:modelValue","query-change","item-added","item-removed","open","close"],setup(a,{emit:B}){e.useCssVars(t=>({v38635e18:ye.value}));const ae=t=>{const l=[],o=s=>{"value"in s?l.push(s.value):"items"in s&&Array.isArray(s.items)&&s.items.forEach(n=>l.push(n.value))};return t.forEach(o),l},se=t=>{const l=ae(t),o=new Set(l);return l.length===o.size},ne=t=>{for(const l of t)if("value"in l){if(l.label===void 0||l.value===void 0)return!1}else if("items"in l&&Array.isArray(l.items)){if(l.label===void 0)return!1;for(const o of l.items)if(o.label===void 0||o.value===void 0)return!1}return!0},p=e.useAttrs(),A=e.useSlots(),{cloneDeep:ue,stripRequiredLabel:ie}=Ne.default();e.watch(()=>a.items,t=>{!t.length||ne(t)&&se(t)||console.warn("KMultiselect: Items must have a label & value and value must be unique")},{immediate:!0});const m=B,$=e.useTemplateRef("kMultiselectItems"),z=e.computed(()=>p.required!==void 0&&String(p.required)!=="false"),re=e.computed(()=>ie(a.label,z.value)),ce=()=>!!(a.labelAttributes?.help||a.labelAttributes?.info||A["label-tooltip"]),K=t=>w.value||b.value||t?.disabled?"neutral":a.error?"danger":"info",F={hideCaret:!0,placement:"bottom-start",popoverTimeout:0,popoverClasses:"k-multiselect-popover multiselect-popover"},de=e.useId(),M=e.computed(()=>p.id?String(p.id):de),P=e.useTemplateRef("multiselectElement"),fe=e.useTemplateRef("multiselectDropdownInputElement"),v=e.ref(""),D=e.computed(()=>!(!v.value||r.value.filter(t=>t.label===v.value).length)),T=e.ref(null),r=e.ref([]),g=e.ref([]),S=e.ref([]),c=e.ref([]),ve=t=>t.map(l=>l.label).join(", "),U=e.ref(!1),C=e.ref(!1),N=e.ref(!1),w=e.computed(()=>p?.disabled!==void 0&&String(p?.disabled)!=="false"),b=e.computed(()=>p?.readonly!==void 0&&String(p?.readonly)!=="false"),me=e.computed({get(){return a.modelValue},set(t){const l=r.value.filter(o=>t.includes(o.value));l.length?G(l):t.length||q()}}),pe=e.computed(()=>{const t={...p};return delete t.class,t}),O=()=>!!(a.dropdownFooterText||A["dropdown-footer-text"]||A["dropdown-footer"]),he=e.computed(()=>a.dropdownFooterPosition??a.dropdownFooterTextPosition??"sticky"),ge=()=>({...F,...a.kpopAttributes,popoverClasses:`${F.popoverClasses} ${a.kpopAttributes?.popoverClasses??""} ${O()?"has-dropdown-footer":""}`,width:I.value+"px",maxWidth:I.value+"px",disabled:p.disabled!==void 0&&String(p.disabled)!=="false"||p.readonly!==void 0&&String(p.readonly)!=="false"}),ye=e.computed(()=>oe.normalizeSize(a.dropdownMaxHeight)),be=e.computed(()=>{const t=a.width?a.width:"300";return oe.normalizeSize(t)}),ke=e.computed(()=>({width:be.value})),R=e.computed(()=>({width:I.value+"px"})),L=e.computed(()=>{if(c.value.length===0){if(!a.collapsedContext&&a.placeholder)return a.placeholder;if(a.collapsedContext&&a.searchPlaceholder)return a.searchPlaceholder}return c.value.length===1?`${c.value.length} item selected`:`${c.value.length} items selected`}),we=e.computed(()=>a.autosuggest?r.value:a.filterFunction({items:r.value,query:v.value})),H=e.computed(()=>{if(a.autosuggest||!v.value)return g.value;const t=we.value,l=new Set(t.map(s=>s.value)),o=[];for(const s of g.value)if(y(s)){const n=s.items.filter(u=>l.has(u.value));n.length>0&&o.push({label:s.label,key:s.key,items:n})}else l.has(s.value)&&o.push(s);return o}),Ce=t=>{(w.value||t?.target?.dataset.propagateClicks==="false")&&t.stopPropagation()},W=async(t,l,o)=>{t?(m("open"),l.value||(v.value="",o(),j(),await e.nextTick(),fe.value?.$el?.querySelector("input")?.focus({preventScroll:!0}))):(m("close"),l.value&&(v.value="",o()))},Ie=t=>{const l=new Map(c.value.map(o=>[o.value,o]));c.value=t.map(o=>l.get(o)).filter(o=>o!==void 0)},G=t=>{t.forEach(l=>{const o=r.value.filter(s=>s.value===l.value)?.[0]||null;o&&(o.selected=!0,c.value.filter(s=>s.value===o.value).length||c.value.push(o))})},Se=t=>{const l=new Set(t.map(o=>o.value));c.value=c.value.filter(o=>!l.has(o.value)),t.forEach(o=>{o.selected=!1,a.enableItemCreation&&o.custom&&(r.value=r.value.filter(s=>s.value!==o.value),g.value=g.value.filter(s=>y(s)?!0:s.value!==o.value),m("item-removed",o))})},E=(t,l)=>{let o=!1,s=l?t:r.value.filter(u=>u.value===t.value)?.[0]||null;if(a.enableItemCreation&&s?.custom&&(o=!0),s===null&&(s=c.value.filter(u=>u.value===t.value)?.[0]||null),s===null)return;s.selected?(c.value=c.value.filter(u=>u.value!==t.value),s.selected=!1,o&&(r.value=r.value.filter(u=>u.value!==t.value),g.value=g.value.filter(u=>y(u)?!0:u.value!==t.value),m("item-removed",t))):(s.selected=!0,c.value.push(s),l&&(s.custom=!0,r.value.push(s),g.value.unshift(s)));const n=c.value.map(u=>u.value);m("selected",c.value),m("change",s),m("update:modelValue",n)},J=t=>{a.enableItemCreation&&Z(),t.preventDefault()},Z=()=>{if(!a.enableItemCreation||!v.value||!D.value||!a.itemCreationValidator(v.value))return;const t=r.value.length+1,l={label:v.value.trim(),value:Te.getUniqueStringId(),key:`${Pe.sanitizeInput(v.value.trim()).replace(/ /gi,"-")?.replace(/[^a-z0-9-_]/gi,"")}-${t}`};m("item-added",l),E(l,!0),v.value=""},y=t=>"items"in t&&Array.isArray(t.items),j=()=>{const t=[],l=[],o=[];for(const u of H.value)y(u)?o.push(u):l.push(u);const s=l.filter(u=>u.selected),n=l.filter(u=>!u.selected);t.push(...s,...n);for(const u of o){const i=u.items.filter(d=>d.selected),h=u.items.filter(d=>!d.selected);t.push({label:u.label,key:u.key,items:[...i,...h]})}S.value=t},q=()=>{r.value.forEach(l=>{l.disabled||(l.selected=!1,l.custom&&m("item-removed",l))}),r.value=r.value.filter(l=>!(l.custom&&!l.disabled)),g.value=g.value.filter(l=>y(l)?!0:!(l.custom&&!l.disabled)),c.value=c.value.filter(l=>l.disabled),v.value="";const t=c.value.map(l=>l.value);m("selected",c.value),m("update:modelValue",t),m("query-change","")},Q=t=>{v.value=t.trim(),m("query-change",t.trim())},xe=(t,l)=>{t.keyCode===27&&(l.value=!1),(t.key==="ArrowDown"||t.key==="ArrowUp")&&$.value?.setFocus(t.key==="ArrowDown"?"down":"up")},X=()=>{T.value?.showPopover()},Ve=t=>{(t.key==="ArrowDown"||t.key==="ArrowUp")&&$.value?.setFocus(t.key==="ArrowDown"?"down":"up")},Be=async()=>{N.value=!0,Y()},Y=()=>{U.value||(U.value=!0,m("query-change",""))};e.watch(H,()=>{j()}),e.watch(me,(t,l)=>{if(JSON.stringify(t)!==JSON.stringify(l)){const o=c.value.map(d=>d.value);if(JSON.stringify(o)===JSON.stringify(t))return;if(!t.length){q();return}const s=new Set(l),n=new Set(t),u=new Set(o),i=r.value.filter(d=>n.has(d.value)&&!u.has(d.value)),h=c.value.filter(d=>!n.has(d.value)&&s.has(d.value));h.length&&Se(h),i.length&&G(i),Ie(t)}},{flush:"post"}),e.watch(()=>a.items,(t,l)=>{if(JSON.stringify(t)===JSON.stringify(l))return;const o=ue(a.items),s=o.some(i=>y(i)),n=[],u=[];if(s)for(const i of o)y(i)?n.push(...i.items):n.push(i);else{const i=new Map;for(const f of o)y(f)||(f.group&&(i.has(f.group)||i.set(f.group,[]),i.get(f.group).push(f)),n.push(f));const h=Array.from(i.keys()).sort((f,k)=>f.toLowerCase().localeCompare(k.toLowerCase())),d=n.filter(f=>!f.group);u.push(...d);for(const f of h)u.push({label:f,items:i.get(f)})}r.value=n;for(let i=0;i<r.value.length;i++){r.value[i].selected===void 0&&(r.value[i].selected=!1);let h=`${r.value[i].label?.replace(/ /gi,"-")?.replace(/[^a-z0-9-_]/gi,"")}-${i}`;if(h.includes("undefined")&&(h=`multiselect-item-label-${i}`),r.value[i].key=h,a.modelValue.includes(r.value[i].value)||r.value[i].selected){const d=r.value[i];d.selected=!0,c.value.filter(f=>f.value===d.value).length||c.value.push(d)}}if(s){const i=[],h=[];for(const d of o)if(y(d)){const f=d.items.map(k=>r.value.find(Ae=>Ae.value===k.value)).filter(k=>k!==void 0);h.push({label:d.label,key:d.key,items:f})}else{const f=r.value.find(k=>k.value===d.value);f&&i.push(f)}u.push(...i,...h)}g.value=u},{deep:!0,immediate:!0});const I=e.ref(300),_=e.ref(!1),ee=async()=>{I.value=300,await e.nextTick(),I.value=P.value?.clientWidth||300};return e.onMounted(async()=>{await ee(),_.value=!0}),De.useResizeObserver(P,()=>{ee()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["k-multiselect",[t.$attrs.class,{"multiselect-error":a.error}]]),style:e.normalizeStyle(ke.value)},[a.label||t.$slots.label?(e.openBlock(),e.createBlock(Ee.default,e.mergeProps({key:0},a.labelAttributes,{"data-testid":a.labelAttributes["data-testid"]?a.labelAttributes["data-testid"]:"multiselect-label",for:M.value,required:z.value}),e.createSlots({default:e.withCtx(()=>[e.renderSlot(t.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(re.value),1)],!0)]),_:2},[ce()?{name:"tooltip",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"label-tooltip",{},void 0,!0)]),key:"0"}:void 0]),1040,["data-testid","for","required"])):e.createCommentVNode("",!0),e.createElementVNode("div",Ue,[e.createVNode($e.default,null,{default:e.withCtx(({isToggled:o,toggle:s})=>[e.createVNode(qe.default,e.mergeProps({ref_key:"popper",ref:T,"hide-close-icon":"",offset:`var(--kui-space-40, ${e.unref(V.KUI_SPACE_40)})`},ge(),{onClose:()=>W(!1,o,s),onOpen:()=>W(!0,o,s)}),{content:e.withCtx(()=>[e.createElementVNode("div",{class:"multiselect-list",onClick:l[7]||(l[7]=e.withModifiers(()=>{},["stop"])),onMouseenter:l[8]||(l[8]=()=>C.value=!0),onMouseleave:l[9]||(l[9]=()=>C.value=!1)},[!a.collapsedContext&&!b.value?(e.openBlock(),e.createElementBlock("div",Je,[e.createVNode(le.default,{ref:"multiselectDropdownInputElement",autocapitalize:"off",autocomplete:"off",autocorrect:"off",class:"multiselect-dropdown-input","data-testid":"multiselect-dropdown-input","model-value":v.value,name:"multiselect-options-search",placeholder:a.searchPlaceholder||Qe,spellcheck:"false",type:"text",onClick:l[5]||(l[5]=e.withModifiers(()=>{},["stop"])),onFocus:Y,onKeydown:e.withKeys(J,["enter"]),onKeyup:[Ve,l[6]||(l[6]=e.withKeys(e.withModifiers(()=>{},["stop"]),["enter"]))],"onUpdate:modelValue":Q},null,8,["model-value","placeholder"])])):e.createCommentVNode("",!0),e.createVNode(Ke.default,{ref:"kMultiselectItems","filter-string":v.value,"item-creation-enabled":a.enableItemCreation&&D.value,"item-creation-valid":a.itemCreationValidator(v.value),items:S.value,onAddItem:Z,onSelected:E},{content:e.withCtx(({item:n})=>[e.renderSlot(t.$slots,"item-template",{class:"multiselect-item",item:n},void 0,!0)]),_:3},8,["filter-string","item-creation-enabled","item-creation-valid","items"]),!S.value.length&&!t.$slots.empty&&!a.enableItemCreation?(e.openBlock(),e.createBlock(Fe.default,{key:"multiselect-empty-item",class:"multiselect-empty-item","data-testid":"multiselect-empty-item",item:{label:"No results",value:"no_results",disabled:!0}})):e.createCommentVNode("",!0),t.$slots.empty&&!a.loading&&!S.value.length?(e.openBlock(),e.createElementBlock("div",Ze,[e.renderSlot(t.$slots,"empty",{},void 0,!0)])):e.createCommentVNode("",!0)],32),O()?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["dropdown-footer",`dropdown-footer-${he.value}`]),"data-testid":"dropdown-footer"},[t.$slots["dropdown-footer"]?e.renderSlot(t.$slots,"dropdown-footer",{},void 0,!0,0):e.renderSlot(t.$slots,"dropdown-footer-text",{},()=>[e.createTextVNode(e.toDisplayString(a.dropdownFooterText),1)],!0,1)],2)):e.createCommentVNode("",!0)]),default:e.withCtx(()=>[e.createElementVNode("div",e.mergeProps({id:M.value,ref:"multiselectElement",class:["multiselect-trigger",{focused:N.value,hovered:C.value,disabled:w.value,readonly:b.value}],"data-testid":"multiselect-trigger",role:"listbox",tabindex:w.value||b.value||a.collapsedContext?-1:0},pe.value,{onClick:Ce,onKeydown:[e.withKeys(X,["enter"]),e.withKeys(X,["space"])]}),[a.collapsedContext?(e.openBlock(),e.createElementBlock("div",Re,[e.createVNode(le.default,{autocapitalize:"off",autocomplete:"off",autocorrect:"off",class:e.normalizeClass(["multiselect-input",{"is-readonly":b.value}]),"data-testid":"multiselect-input",disabled:w.value,"model-value":v.value,name:"multiselect-options-search",placeholder:L.value,readonly:b.value?!0:void 0,spellcheck:"false",type:"text",onBlur:l[0]||(l[0]=()=>N.value=!1),onClick:n=>{o.value&&n.stopPropagation()},onFocus:Be,onKeydown:e.withKeys(J,["enter"]),onKeyup:n=>xe(n,o),onMouseenter:l[1]||(l[1]=()=>C.value=!0),onMouseleave:l[2]||(l[2]=()=>C.value=!1),"onUpdate:modelValue":Q},null,8,["class","disabled","model-value","placeholder","readonly","onClick","onKeyup"])])):c.value.length?_.value?(e.openBlock(),e.createBlock(e.unref(Me.WrapClamp),{key:3,class:"selection-badges-container","data-testid":"selection-badges-container","item-key":"key",items:c.value,"max-lines":a.selectedRowCount,style:e.normalizeStyle(R.value)},{item:e.withCtx(({item:n})=>[e.createVNode(te.default,{appearance:K(n),class:"multiselect-selection-badge","icon-before":!1,tooltip:n.label,"truncation-tooltip":"",onClick:l[3]||(l[3]=e.withModifiers(()=>{},["stop"]))},e.createSlots({default:e.withCtx(()=>[e.renderSlot(t.$slots,"item-badge-icon",{item:n},void 0,!0),e.createElementVNode("span",He,e.toDisplayString(n.label),1)]),_:2},[n.selected&&!n.disabled&&!w.value&&!b.value?{name:"icon",fn:e.withCtx(()=>[e.createElementVNode("button",{"aria-label":`Unselect ${n.label}`,class:"badge-dismiss-button","data-testid":"badge-dismiss-button",type:"button",onClick:u=>E(n)},[e.createVNode(e.unref(x.CloseIcon),{decorative:""})],8,We)]),key:"0"}:void 0]),1032,["appearance","tooltip"])]),after:e.withCtx(({hiddenItems:n})=>[n.length?(e.openBlock(),e.createBlock(ze.default,{key:0,class:"hidden-selection-count-tooltip","max-width":"300",text:ve(n)},{default:e.withCtx(()=>[e.createVNode(te.default,{appearance:K(),class:"hidden-selection-count","data-testid":"hidden-selection-count",onClick:l[4]||(l[4]=e.withModifiers(()=>{},["stop"]))},{default:e.withCtx(()=>[e.createTextVNode(" +"+e.toDisplayString(n.length),1)]),_:2},1032,["appearance"])]),_:2},1032,["text"])):e.createCommentVNode("",!0)]),_:3},8,["items","max-lines","style"])):(e.openBlock(),e.createElementBlock("div",{key:2,class:"selection-badges-container","data-testid":"selection-badges-container",style:e.normalizeStyle(R.value)},null,4)):(e.openBlock(),e.createElementBlock("div",Le,e.toDisplayString(L.value),1)),e.createElementVNode("div",Ge,[!a.loading&&c.value.length&&o.value?(e.openBlock(),e.createElementBlock("button",{key:0,"aria-label":"Clear",class:"multiselect-clear-icon","data-testid":"multiselect-clear-icon",type:"button",onClick:q},[e.createVNode(e.unref(x.CloseIcon),{size:`var(--kui-icon-size-40, ${e.unref(V.KUI_ICON_SIZE_40)})`},null,8,["size"])])):a.loading?(e.openBlock(),e.createBlock(e.unref(x.ProgressIcon),{key:1,class:"multiselect-loading-icon",size:`var(--kui-icon-size-40, ${e.unref(V.KUI_ICON_SIZE_40)})`,title:"Loading"},null,8,["size"])):(e.openBlock(),e.createBlock(e.unref(x.ChevronDownIcon),{key:2,class:"multiselect-chevron-icon",decorative:"",size:`var(--kui-icon-size-40, ${e.unref(V.KUI_ICON_SIZE_40)})`},null,8,["size"]))])],16,Oe)]),_:2},1040,["offset","onClose","onOpen"])]),_:3})]),a.help?(e.openBlock(),e.createElementBlock("p",je,e.toDisplayString(a.help),1)):e.createCommentVNode("",!0)],6))}});exports.default=Xe;

package/dist/kongponents127.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as Ze, useCssVars as Xe, useAttrs as Ye, useSlots as _e, watch as U, useTemplateRef as H, computed as v, useId as et, ref as b, onMounted as tt, openBlock as m, createElementBlock as I, normalizeStyle as W, normalizeClass as G, createBlock as z, mergeProps as J, createSlots as be, withCtx as y, createTextVNode as j, toDisplayString as E, renderSlot as K, createCommentVNode as x, createElementVNode as M, createVNode as C, unref as S, withKeys as q, withModifiers as N, nextTick as we } from "vue";
-import lt from "./kongponents190.es.js";
+import { defineComponent as Ze, useCssVars as Xe, useAttrs as Ye, useSlots as _e, watch as U, useTemplateRef as H, computed as v, useId as et, ref as b, onMounted as tt, openBlock as m, createElementBlock as I, normalizeStyle as W, normalizeClass as G, createBlock as E, mergeProps as J, createSlots as be, withCtx as y, renderSlot as x, createTextVNode as j, toDisplayString as K, createCommentVNode as F, createElementVNode as M, createVNode as C, unref as S, withKeys as q, withModifiers as N, nextTick as we } from "vue";
+import lt from "./kongponents184.es.js";
 import ke from "./kongponents36.es.js";
 import Ie from "./kongponents55.es.js";
 import ot from "./kongponents57.es.js";
@@ -7,15 +7,15 @@ import at from "./kongponents62.es.js";
 import st from "./kongponents29.es.js";
 import it from "./kongponents30.es.js";
 /* empty css                 */
-import ut from "./kongponents197.es.js";
-import nt from "./kongponents198.es.js";
+import ut from "./kongponents203.es.js";
+import nt from "./kongponents204.es.js";
 import { CloseIcon as Ce, ProgressIcon as rt, ChevronDownIcon as dt } from "@kong/icons";
-import { KUI_SPACE_40 as ct, KUI_ICON_SIZE_40 as Q } from "./kongponents183.es.js";
+import { KUI_SPACE_40 as ct, KUI_ICON_SIZE_40 as Q } from "./kongponents182.es.js";
 import { WrapClamp as ft } from "vue-clamp";
 import { sanitizeInput as vt } from "./kongponents180.es.js";
-import { useResizeObserver as mt } from "./kongponents199.es.js";
+import { useResizeObserver as mt } from "./kongponents188.es.js";
 import { getUniqueStringId as pt } from "./kongponents160.es.js";
-import { normalizeSize as Se } from "./kongponents182.es.js";
+import { normalizeSize as Se } from "./kongponents189.es.js";
 const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"], yt = { key: 0 }, bt = {
   key: 1,
   class: "expanded-selection-empty"
@@ -58,7 +58,7 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
   emits: ["selected", "input", "change", "update:modelValue", "query-change", "item-added", "item-removed", "open", "close"],
   setup(o, { emit: B }) {
     Xe((e) => ({
-      v3e0350e0: Be.value
+      v38635e18: Be.value
     }));
     const Ae = (e) => {
       const t = [], l = (a) => {
@@ -85,12 +85,12 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
     U(() => o.items, (e) => {
       !e.length || xe(e) && $e(e) || console.warn("KMultiselect: Items must have a label & value and value must be unique");
     }, { immediate: !0 });
-    const p = B, Z = H("kMultiselectItems"), X = v(() => h.required !== void 0 && String(h.required) !== "false"), Ee = v(() => ze(o.label, X.value)), Ke = () => !!(o.labelAttributes?.help || o.labelAttributes?.info || L["label-tooltip"]), Y = (e) => F.value || A.value || e?.disabled ? "neutral" : o.error ? "danger" : "info", _ = {
+    const p = B, Z = H("kMultiselectItems"), X = v(() => h.required !== void 0 && String(h.required) !== "false"), Ee = v(() => ze(o.label, X.value)), Ke = () => !!(o.labelAttributes?.help || o.labelAttributes?.info || L["label-tooltip"]), Y = (e) => z.value || A.value || e?.disabled ? "neutral" : o.error ? "danger" : "info", _ = {
       hideCaret: !0,
       placement: "bottom-start",
       popoverTimeout: 0,
       popoverClasses: "k-multiselect-popover multiselect-popover"
-    }, Me = et(), ee = v(() => h.id ? String(h.id) : Me), te = H("multiselectElement"), Ve = H("multiselectDropdownInputElement"), f = b(""), le = v(() => !(!f.value || n.value.filter((e) => e.label === f.value).length)), oe = b(null), n = b([]), w = b([]), D = b([]), r = b([]), Pe = (e) => e.map((t) => t.label).join(", "), ae = b(!1), V = b(!1), R = b(!1), F = v(() => h?.disabled !== void 0 && String(h?.disabled) !== "false"), A = v(() => h?.readonly !== void 0 && String(h?.readonly) !== "false"), qe = v({
+    }, Me = et(), ee = v(() => h.id ? String(h.id) : Me), te = H("multiselectElement"), Ve = H("multiselectDropdownInputElement"), f = b(""), le = v(() => !(!f.value || n.value.filter((e) => e.label === f.value).length)), oe = b(null), n = b([]), w = b([]), D = b([]), r = b([]), Pe = (e) => e.map((t) => t.label).join(", "), ae = b(!1), V = b(!1), R = b(!1), z = v(() => h?.disabled !== void 0 && String(h?.disabled) !== "false"), A = v(() => h?.readonly !== void 0 && String(h?.readonly) !== "false"), qe = v({
       get() {
         return o.modelValue;
       },
@@ -139,7 +139,7 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
           t.has(a.value) && l.push(a);
       return l;
     }), Te = (e) => {
-      (F.value || e?.target?.dataset.propagateClicks === "false") && e.stopPropagation();
+      (z.value || e?.target?.dataset.propagateClicks === "false") && e.stopPropagation();
     }, re = async (e, t, l) => {
       e ? (p("open"), t.value || (f.value = "", l(), ve(), await we(), Ve.value?.$el?.querySelector("input")?.focus({ preventScroll: !0 }))) : (p("close"), t.value && (f.value = "", l()));
     }, He = (e) => {
@@ -286,24 +286,26 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
       class: G(["k-multiselect", [e.$attrs.class, { "multiselect-error": o.error }]]),
       style: W(Re.value)
     }, [
-      o.label ? (m(), z(ot, J({ key: 0 }, o.labelAttributes, {
+      o.label || e.$slots.label ? (m(), E(ot, J({ key: 0 }, o.labelAttributes, {
         "data-testid": o.labelAttributes["data-testid"] ? o.labelAttributes["data-testid"] : "multiselect-label",
         for: ee.value,
         required: X.value
       }), be({
         default: y(() => [
-          j(E(Ee.value) + " ", 1)
+          x(e.$slots, "label", {}, () => [
+            j(K(Ee.value), 1)
+          ], !0)
         ]),
         _: 2
       }, [
         Ke() ? {
           name: "tooltip",
           fn: y(() => [
-            K(e.$slots, "label-tooltip", {}, void 0, !0)
+            x(e.$slots, "label-tooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0
-      ]), 1040, ["data-testid", "for", "required"])) : x("", !0),
+      ]), 1040, ["data-testid", "for", "required"])) : F("", !0),
       M("div", ht, [
         C(st, null, {
           default: y(({ isToggled: l, toggle: a }) => [
@@ -348,7 +350,7 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
                       ],
                       "onUpdate:modelValue": me
                     }, null, 8, ["model-value", "placeholder"])
-                  ])) : x("", !0),
+                  ])) : F("", !0),
                   C(ut, {
                     ref: "kMultiselectItems",
                     "filter-string": f.value,
@@ -359,41 +361,41 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
                     onSelected: O
                   }, {
                     content: y(({ item: s }) => [
-                      K(e.$slots, "item-template", {
+                      x(e.$slots, "item-template", {
                         class: "multiselect-item",
                         item: s
                       }, void 0, !0)
                     ]),
                     _: 3
                   }, 8, ["filter-string", "item-creation-enabled", "item-creation-valid", "items"]),
-                  !D.value.length && !e.$slots.empty && !o.enableItemCreation ? (m(), z(nt, {
+                  !D.value.length && !e.$slots.empty && !o.enableItemCreation ? (m(), E(nt, {
                     key: "multiselect-empty-item",
                     class: "multiselect-empty-item",
                     "data-testid": "multiselect-empty-item",
                     item: { label: "No results", value: "no_results", disabled: !0 }
-                  })) : x("", !0),
+                  })) : F("", !0),
                   e.$slots.empty && !o.loading && !D.value.length ? (m(), I("div", St, [
-                    K(e.$slots, "empty", {}, void 0, !0)
-                  ])) : x("", !0)
+                    x(e.$slots, "empty", {}, void 0, !0)
+                  ])) : F("", !0)
                 ], 32),
                 se() ? (m(), I("div", {
                   key: 0,
                   class: G(["dropdown-footer", `dropdown-footer-${De.value}`]),
                   "data-testid": "dropdown-footer"
                 }, [
-                  e.$slots["dropdown-footer"] ? K(e.$slots, "dropdown-footer", {}, void 0, !0, 0) : K(e.$slots, "dropdown-footer-text", {}, () => [
-                    j(E(o.dropdownFooterText), 1)
+                  e.$slots["dropdown-footer"] ? x(e.$slots, "dropdown-footer", {}, void 0, !0, 0) : x(e.$slots, "dropdown-footer-text", {}, () => [
+                    j(K(o.dropdownFooterText), 1)
                   ], !0, 1)
-                ], 2)) : x("", !0)
+                ], 2)) : F("", !0)
               ]),
               default: y(() => [
                 M("div", J({
                   id: ee.value,
                   ref: "multiselectElement",
-                  class: ["multiselect-trigger", { focused: R.value, hovered: V.value, disabled: F.value, readonly: A.value }],
+                  class: ["multiselect-trigger", { focused: R.value, hovered: V.value, disabled: z.value, readonly: A.value }],
                   "data-testid": "multiselect-trigger",
                   role: "listbox",
-                  tabindex: F.value || A.value || o.collapsedContext ? -1 : 0
+                  tabindex: z.value || A.value || o.collapsedContext ? -1 : 0
                 }, Ne.value, {
                   onClick: Te,
                   onKeydown: [
@@ -408,7 +410,7 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
                       autocorrect: "off",
                       class: G(["multiselect-input", { "is-readonly": A.value }]),
                       "data-testid": "multiselect-input",
-                      disabled: F.value,
+                      disabled: z.value,
                       "model-value": f.value,
                       name: "multiselect-options-search",
                       placeholder: ue.value,
@@ -426,7 +428,7 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
                       onMouseleave: t[2] || (t[2] = () => V.value = !1),
                       "onUpdate:modelValue": me
                     }, null, 8, ["class", "disabled", "model-value", "placeholder", "readonly", "onClick", "onKeyup"])
-                  ])) : r.value.length ? ge.value ? (m(), z(S(ft), {
+                  ])) : r.value.length ? ge.value ? (m(), E(S(ft), {
                     key: 3,
                     class: "selection-badges-container",
                     "data-testid": "selection-badges-container",
@@ -446,12 +448,12 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
                         }, ["stop"]))
                       }, be({
                         default: y(() => [
-                          K(e.$slots, "item-badge-icon", { item: s }, void 0, !0),
-                          M("span", wt, E(s.label), 1)
+                          x(e.$slots, "item-badge-icon", { item: s }, void 0, !0),
+                          M("span", wt, K(s.label), 1)
                         ]),
                         _: 2
                       }, [
-                        s.selected && !s.disabled && !F.value && !A.value ? {
+                        s.selected && !s.disabled && !z.value && !A.value ? {
                           name: "icon",
                           fn: y(() => [
                             M("button", {
@@ -469,7 +471,7 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
                       ]), 1032, ["appearance", "tooltip"])
                     ]),
                     after: y(({ hiddenItems: s }) => [
-                      s.length ? (m(), z(it, {
+                      s.length ? (m(), E(it, {
                         key: 0,
                         class: "hidden-selection-count-tooltip",
                         "max-width": "300",
@@ -484,13 +486,13 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
                             }, ["stop"]))
                           }, {
                             default: y(() => [
-                              j(" +" + E(s.length), 1)
+                              j(" +" + K(s.length), 1)
                             ]),
                             _: 2
                           }, 1032, ["appearance"])
                         ]),
                         _: 2
-                      }, 1032, ["text"])) : x("", !0)
+                      }, 1032, ["text"])) : F("", !0)
                     ]),
                     _: 3
                   }, 8, ["items", "max-lines", "style"])) : (m(), I("div", {
@@ -498,7 +500,7 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
                     class: "selection-badges-container",
                     "data-testid": "selection-badges-container",
                     style: W(ie.value)
-                  }, null, 4)) : (m(), I("div", bt, E(ue.value), 1)),
+                  }, null, 4)) : (m(), I("div", bt, K(ue.value), 1)),
                   M("div", It, [
                     !o.loading && r.value.length && l.value ? (m(), I("button", {
                       key: 0,
@@ -511,12 +513,12 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
                       C(S(Ce), {
                         size: `var(--kui-icon-size-40, ${S(Q)})`
                       }, null, 8, ["size"])
-                    ])) : o.loading ? (m(), z(S(rt), {
+                    ])) : o.loading ? (m(), E(S(rt), {
                       key: 1,
                       class: "multiselect-loading-icon",
                       size: `var(--kui-icon-size-40, ${S(Q)})`,
                       title: "Loading"
-                    }, null, 8, ["size"])) : (m(), z(S(dt), {
+                    }, null, 8, ["size"])) : (m(), E(S(dt), {
                       key: 2,
                       class: "multiselect-chevron-icon",
                       decorative: "",
@@ -531,7 +533,7 @@ const ht = { "data-testid": "multiselect-container" }, gt = ["id", "tabindex"],
           _: 3
         })
       ]),
-      o.help ? (m(), I("p", At, E(o.help), 1)) : x("", !0)
+      o.help ? (m(), I("p", At, K(o.help), 1)) : F("", !0)
     ], 6));
   }
 });