@kong/kongponents 9.64.21 → 9.64.22-pr.3447.2d54e3f.0

package/dist/kongponents214.es.js

@@ -1,7 +1,7 @@
-import e from "./kongponents228.es.js";
+import o from "./kongponents238.es.js";
 /* empty css                  */
-import r from "./kongponents82.es.js";
-const p = /* @__PURE__ */ r(e, [["__scopeId", "data-v-5e7cf03a"]]);
+import e from "./kongponents82.es.js";
+const m = /* @__PURE__ */ e(o, [["__scopeId", "data-v-bc7e2b16"]]);
 export {
-  p as default
+  m as default
 };

package/dist/kongponents215.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./kongponents321.cjs"),a=require("./kongponents318.cjs"),i=require("./kongponents322.cjs"),s=require("./kongponents323.cjs");function o(e,r){if(e==null)return{};var t=l.default(s.default(e),function(u){return[u]});return r=a.default(r),i.default(e,t,function(u,n){return r(u,n[0])})}exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./kongponents240.cjs");;/* empty css                 */const r=require("./kongponents82.cjs"),u=r.default(e.default,[["__scopeId","data-v-5e7cf03a"]]);exports.default=u;

package/dist/kongponents215.es.js

@@ -1,17 +1,7 @@
-import u from "./kongponents321.es.js";
-import i from "./kongponents318.es.js";
-import m from "./kongponents322.es.js";
-import a from "./kongponents323.es.js";
-function y(r, n) {
-  if (r == null)
-    return {};
-  var o = u(a(r), function(t) {
-    return [t];
-  });
-  return n = i(n), m(r, o, function(t, f) {
-    return n(t, f[0]);
-  });
-}
+import e from "./kongponents240.es.js";
+/* empty css                  */
+import r from "./kongponents82.es.js";
+const p = /* @__PURE__ */ r(e, [["__scopeId", "data-v-5e7cf03a"]]);
 export {
-  y as default
+  p as default
 };

package/dist/kongponents216.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./kongponents336.cjs");;/* empty css                 */const t=require("./kongponents82.cjs"),r=t.default(e.default,[["__scopeId","data-v-4b260443"]]);exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),R=require("v-calendar"),s=require("date-fns"),H={class:"calendar-wrapper"},P={key:2,class:"time-wrapper"},F={class:"time-inputs-container"},p={class:"time-input-column"},I=["for"],q={key:0},A={key:1},U=["id","step"],Y={class:"time-input-column"},$=["for"],j={key:0},z=["id","step"],O={key:0,class:"help-text"},W=e.defineComponent({__name:"CalendarWrapper",props:e.mergeModels({isRange:{type:Boolean},kDatePickerMode:{},maxDate:{default:()=>{}},minDate:{default:()=>{}},errorMessage:{default:()=>{}},timeGranularity:{default:"minutely"},sameDayFullRange:{type:Boolean,default:!1},customRangeValidation:{type:Function,default:void 0}},{modelValue:{required:!0},modelModifiers:{},error:{type:Boolean,default:!1},errorModifiers:{}}),emits:["update:modelValue","update:error"],setup(a,{expose:G}){const u=(l,n)=>n==="secondly"?s.format(l,"HH:mm:ss"):s.format(l,"HH:mm"),t=e.useModel(a,"modelValue"),v=e.useModel(a,"error"),i=e.ref(u(new Date,a.timeGranularity)),o=e.ref(u(new Date,a.timeGranularity)),c=e.ref({start:u(new Date,a.timeGranularity),end:u(new Date,a.timeGranularity)}),f=e.useId(),T=e.computed(()=>a.isRange&&d(t.value)?{year:t.value.start.getFullYear(),month:t.value.start.getMonth()+1}:t.value instanceof Date?{year:t.value.getFullYear(),month:t.value.getMonth()+1}:a.maxDate&&s.isBefore(a.maxDate,s.startOfToday())?{year:a.maxDate.getFullYear(),month:a.maxDate.getMonth()+1}:{year:new Date().getFullYear(),month:new Date().getMonth()+1}),D=e.computed(()=>({borderless:!0,color:"blue",dragAttribute:C,expanded:!0,initialPage:T.value,maxDate:a.maxDate,minDate:a.minDate,mode:"date",modelConfig:w,selectAttribute:S,transparent:!0,trimWeeks:!0})),k=e.computed(()=>["time","dateTime","relativeDateTime"].includes(a.kDatePickerMode)),h=e.computed(()=>{switch(a.timeGranularity){case"minutely":return 60;case"secondly":return 1;default:return 60}}),y=(l,n)=>l>n?!0:a.customRangeValidation?a.customRangeValidation(l,n):!1,d=l=>!l||typeof l!="object"||!("start"in l)||!("end"in l)?!1:l.start instanceof Date&&l.end instanceof Date,b=()=>{if(!a.sameDayFullRange||!a.isRange||!d(t.value))return!1;const l=t.value.start.getTime(),n=t.value.end.getTime(),r=a.timeGranularity==="secondly"?"HH:mm:ss":"HH:mm",m=i.value?s.parse(i.value,r,t.value.start).getTime():l,g=o.value?s.parse(o.value,r,t.value.end).getTime():n,N=s.isSameDay(t.value.start,t.value.end);return(s.isSameSecond(t.value.start,t.value.end)||N&&(m>=g||l>=n))&&(t.value.start.setHours(0,0,0,0),t.value.end.setHours(23,59,59,999)),!0},V=()=>{k.value&&(a.isRange&&d(t.value)?(i.value=u(t.value.start,a.timeGranularity),o.value=u(t.value.end,a.timeGranularity)):t.value instanceof Date?i.value=u(t.value,a.timeGranularity):i.value=u(new Date,a.timeGranularity))},M=l=>{const n=l.split(":"),r=parseInt(n[0]??"0",10),m=parseInt(n[1]??"0",10),g=a.timeGranularity==="secondly"&&n[2]?parseInt(n[2],10):0;return{hours:r,minutes:m,seconds:g}};e.onMounted(()=>{V(),c.value.start=i.value,c.value.end=o.value});const w={type:"number"},C={key:"select-drag",highlight:{start:{contentClass:"vcal-day-drag-start"},base:{contentClass:"vcal-day-drag-base"},end:{contentClass:"vcal-day-drag-end"}}},S={key:"select-calendar",highlight:{start:{contentClass:"vcal-day-start"},base:{contentClass:"vcal-day-base"},end:{contentClass:"vcal-day-end"}}};e.watch(()=>i.value,l=>{if(!l)return;const{hours:n,minutes:r,seconds:m}=M(l);a.isRange&&d(t.value)?(t.value.start.setHours(n,r,m,0),v.value=y(t.value.start,t.value.end)):t.value instanceof Date&&t.value.setHours(n,r,m,0)}),e.watch(()=>o.value,l=>{if(!l)return;const{hours:n,minutes:r,seconds:m}=M(l);a.isRange&&d(t.value)&&(t.value.end.setHours(n,r,m,0),v.value=y(t.value.start,t.value.end))}),e.watch(()=>t.value,()=>{a.isRange&&d(t.value)?(b(),i.value=u(t.value.start,a.timeGranularity),o.value=u(t.value.end,a.timeGranularity),v.value=y(t.value.start,t.value.end)):t.value instanceof Date&&(i.value=u(t.value,a.timeGranularity))},{immediate:!1,deep:!0}),e.watch(()=>a.timeGranularity,()=>{a.isRange&&d(t.value)?(c.value.start=u(t.value.start,a.timeGranularity),c.value.end=u(t.value.end,a.timeGranularity)):t.value instanceof Date&&(c.value.start=u(t.value,a.timeGranularity))});const E=()=>a.isRange&&d(t.value),x=()=>{i.value=c.value.start,o.value=c.value.end},B=l=>{try{return s.format(l,"EEE MMM d yyyy")}catch(n){console.warn("Error formatting date:",n)}};return G({resetTime:x,initTimeInputs:V}),(l,n)=>(e.openBlock(),e.createElementBlock("div",H,[a.isRange?(e.openBlock(),e.createBlock(e.unref(R.DatePicker),e.mergeProps({key:0},D.value,{modelValue:t.value,"onUpdate:modelValue":n[0]||(n[0]=r=>t.value=r),modelModifiers:{range:!0}}),null,16,["modelValue"])):(e.openBlock(),e.createBlock(e.unref(R.DatePicker),e.mergeProps({key:1},D.value,{modelValue:t.value,"onUpdate:modelValue":n[1]||(n[1]=r=>t.value=r)}),null,16,["modelValue"])),k.value?(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("div",F,[e.createElementVNode("div",p,[e.createElementVNode("label",{class:"time-input-label",for:`time-input-start-${e.unref(f)}`},[E()?(e.openBlock(),e.createElementBlock("span",q,e.toDisplayString(B(t.value.start)),1)):t.value&&t.value instanceof Date?(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(B(t.value)),1)):e.createCommentVNode("",!0)],8,I),e.withDirectives(e.createElementVNode("input",{id:`time-input-start-${e.unref(f)}`,"onUpdate:modelValue":n[2]||(n[2]=r=>i.value=r),class:e.normalizeClass(["time-input-start",{"input-error":v.value}]),"data-testid":"time-input-start",step:h.value,type:"time"},null,10,U),[[e.vModelText,i.value]])]),a.isRange?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[n[4]||(n[4]=e.createElementVNode("div",{class:"time-input-separator"}," - ",-1)),e.createElementVNode("div",Y,[e.createElementVNode("label",{class:"time-input-label",for:`time-input-end-${e.unref(f)}`},[E()?(e.openBlock(),e.createElementBlock("span",j,e.toDisplayString(e.unref(s.format)(t.value.end,"EEE MMM d yyyy")),1)):e.createCommentVNode("",!0)],8,$),e.withDirectives(e.createElementVNode("input",{id:`time-input-end-${e.unref(f)}`,"onUpdate:modelValue":n[3]||(n[3]=r=>o.value=r),class:e.normalizeClass(["time-input-end",{"input-error":v.value}]),"data-testid":"time-input-end",step:h.value,type:"time"},null,10,z),[[e.vModelText,o.value]])])],64)):e.createCommentVNode("",!0)]),e.createVNode(e.Transition,{mode:"out-in",name:"kongponents-fade-transition"},{default:e.withCtx(()=>[v.value&&a.errorMessage?(e.openBlock(),e.createElementBlock("div",O,e.toDisplayString(a.errorMessage),1)):e.createCommentVNode("",!0)]),_:1})])):e.createCommentVNode("",!0)]))}});exports.default=W;

package/dist/kongponents216.es.js

@@ -1,7 +1,179 @@
-import o from "./kongponents336.es.js";
-/* empty css                  */
-import t from "./kongponents82.es.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4b260443"]]);
+import { defineComponent as L, useModel as F, ref as T, useId as Q, computed as h, onMounted as X, watch as M, openBlock as s, createElementBlock as v, createBlock as I, unref as f, mergeProps as P, createElementVNode as m, toDisplayString as V, createCommentVNode as g, withDirectives as B, normalizeClass as A, vModelText as U, Fragment as Z, createVNode as p, Transition as _, withCtx as ee, mergeModels as te } from "vue";
+import { DatePicker as Y } from "v-calendar";
+import { isBefore as ae, startOfToday as ne, format as k, parse as $, isSameDay as le, isSameSecond as ie } from "date-fns";
+const ue = { class: "calendar-wrapper" }, re = {
+  key: 2,
+  class: "time-wrapper"
+}, se = { class: "time-inputs-container" }, oe = { class: "time-input-column" }, de = ["for"], me = { key: 0 }, ce = { key: 1 }, ve = ["id", "step"], fe = { class: "time-input-column" }, ye = ["for"], ge = { key: 0 }, De = ["id", "step"], he = {
+  key: 0,
+  class: "help-text"
+}, Ge = /* @__PURE__ */ L({
+  __name: "CalendarWrapper",
+  props: /* @__PURE__ */ te({
+    isRange: { type: Boolean },
+    kDatePickerMode: {},
+    maxDate: { default: () => {
+    } },
+    minDate: { default: () => {
+    } },
+    errorMessage: { default: () => {
+    } },
+    timeGranularity: { default: "minutely" },
+    sameDayFullRange: { type: Boolean, default: !1 },
+    customRangeValidation: { type: Function, default: void 0 }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {},
+    error: { type: Boolean, default: !1 },
+    errorModifiers: {}
+  }),
+  emits: ["update:modelValue", "update:error"],
+  setup(t, { expose: N }) {
+    const i = (n, a) => a === "secondly" ? k(n, "HH:mm:ss") : k(n, "HH:mm"), e = F(t, "modelValue"), y = F(t, "error"), u = T(i(/* @__PURE__ */ new Date(), t.timeGranularity)), r = T(i(/* @__PURE__ */ new Date(), t.timeGranularity)), c = T({
+      start: i(/* @__PURE__ */ new Date(), t.timeGranularity),
+      end: i(/* @__PURE__ */ new Date(), t.timeGranularity)
+    }), D = Q(), W = h(() => t.isRange && o(e.value) ? { year: e.value.start.getFullYear(), month: e.value.start.getMonth() + 1 } : e.value instanceof Date ? { year: e.value.getFullYear(), month: e.value.getMonth() + 1 } : t.maxDate && ae(t.maxDate, ne()) ? { year: t.maxDate.getFullYear(), month: t.maxDate.getMonth() + 1 } : { year: (/* @__PURE__ */ new Date()).getFullYear(), month: (/* @__PURE__ */ new Date()).getMonth() + 1 }), b = h(() => ({
+      borderless: !0,
+      color: "blue",
+      dragAttribute: z,
+      expanded: !0,
+      initialPage: W.value,
+      maxDate: t.maxDate,
+      minDate: t.minDate,
+      mode: "date",
+      modelConfig: q,
+      selectAttribute: O,
+      transparent: !0,
+      trimWeeks: !0
+    })), w = h(() => ["time", "dateTime", "relativeDateTime"].includes(t.kDatePickerMode)), x = h(() => {
+      switch (t.timeGranularity) {
+        case "minutely":
+          return 60;
+        case "secondly":
+          return 1;
+        default:
+          return 60;
+      }
+    }), R = (n, a) => n > a ? !0 : t.customRangeValidation ? t.customRangeValidation(n, a) : !1, o = (n) => !n || typeof n != "object" || !("start" in n) || !("end" in n) ? !1 : n.start instanceof Date && n.end instanceof Date, j = () => {
+      if (!t.sameDayFullRange || !t.isRange || !o(e.value))
+        return !1;
+      const n = e.value.start.getTime(), a = e.value.end.getTime(), l = t.timeGranularity === "secondly" ? "HH:mm:ss" : "HH:mm", d = u.value ? $(u.value, l, e.value.start).getTime() : n, G = r.value ? $(r.value, l, e.value.end).getTime() : a, K = le(e.value.start, e.value.end);
+      return (ie(e.value.start, e.value.end) || K && (d >= G || n >= a)) && (e.value.start.setHours(0, 0, 0, 0), e.value.end.setHours(23, 59, 59, 999)), !0;
+    }, H = () => {
+      w.value && (t.isRange && o(e.value) ? (u.value = i(e.value.start, t.timeGranularity), r.value = i(e.value.end, t.timeGranularity)) : e.value instanceof Date ? u.value = i(e.value, t.timeGranularity) : u.value = i(/* @__PURE__ */ new Date(), t.timeGranularity));
+    }, C = (n) => {
+      const a = n.split(":"), l = parseInt(a[0] ?? "0", 10), d = parseInt(a[1] ?? "0", 10), G = t.timeGranularity === "secondly" && a[2] ? parseInt(a[2], 10) : 0;
+      return { hours: l, minutes: d, seconds: G };
+    };
+    X(() => {
+      H(), c.value.start = u.value, c.value.end = r.value;
+    });
+    const q = { type: "number" }, z = {
+      key: "select-drag",
+      highlight: {
+        start: { contentClass: "vcal-day-drag-start" },
+        base: { contentClass: "vcal-day-drag-base" },
+        end: { contentClass: "vcal-day-drag-end" }
+      }
+    }, O = {
+      key: "select-calendar",
+      highlight: {
+        start: { contentClass: "vcal-day-start" },
+        base: { contentClass: "vcal-day-base" },
+        end: { contentClass: "vcal-day-end" }
+      }
+    };
+    M(() => u.value, (n) => {
+      if (!n)
+        return;
+      const { hours: a, minutes: l, seconds: d } = C(n);
+      t.isRange && o(e.value) ? (e.value.start.setHours(a, l, d, 0), y.value = R(e.value.start, e.value.end)) : e.value instanceof Date && e.value.setHours(a, l, d, 0);
+    }), M(() => r.value, (n) => {
+      if (!n)
+        return;
+      const { hours: a, minutes: l, seconds: d } = C(n);
+      t.isRange && o(e.value) && (e.value.end.setHours(a, l, d, 0), y.value = R(e.value.start, e.value.end));
+    }), M(() => e.value, () => {
+      t.isRange && o(e.value) ? (j(), u.value = i(e.value.start, t.timeGranularity), r.value = i(e.value.end, t.timeGranularity), y.value = R(e.value.start, e.value.end)) : e.value instanceof Date && (u.value = i(e.value, t.timeGranularity));
+    }, { immediate: !1, deep: !0 }), M(() => t.timeGranularity, () => {
+      t.isRange && o(e.value) ? (c.value.start = i(e.value.start, t.timeGranularity), c.value.end = i(e.value.end, t.timeGranularity)) : e.value instanceof Date && (c.value.start = i(e.value, t.timeGranularity));
+    });
+    const E = () => t.isRange && o(e.value), J = () => {
+      u.value = c.value.start, r.value = c.value.end;
+    }, S = (n) => {
+      try {
+        return k(n, "EEE MMM d yyyy");
+      } catch (a) {
+        console.warn("Error formatting date:", a);
+      }
+    };
+    return N({
+      resetTime: J,
+      initTimeInputs: H
+    }), (n, a) => (s(), v("div", ue, [
+      t.isRange ? (s(), I(f(Y), P({ key: 0 }, b.value, {
+        modelValue: e.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (l) => e.value = l),
+        modelModifiers: { range: !0 }
+      }), null, 16, ["modelValue"])) : (s(), I(f(Y), P({ key: 1 }, b.value, {
+        modelValue: e.value,
+        "onUpdate:modelValue": a[1] || (a[1] = (l) => e.value = l)
+      }), null, 16, ["modelValue"])),
+      w.value ? (s(), v("div", re, [
+        m("div", se, [
+          m("div", oe, [
+            m("label", {
+              class: "time-input-label",
+              for: `time-input-start-${f(D)}`
+            }, [
+              E() ? (s(), v("span", me, V(S(e.value.start)), 1)) : e.value && e.value instanceof Date ? (s(), v("span", ce, V(S(e.value)), 1)) : g("", !0)
+            ], 8, de),
+            B(m("input", {
+              id: `time-input-start-${f(D)}`,
+              "onUpdate:modelValue": a[2] || (a[2] = (l) => u.value = l),
+              class: A(["time-input-start", { "input-error": y.value }]),
+              "data-testid": "time-input-start",
+              step: x.value,
+              type: "time"
+            }, null, 10, ve), [
+              [U, u.value]
+            ])
+          ]),
+          t.isRange ? (s(), v(Z, { key: 0 }, [
+            a[4] || (a[4] = m("div", { class: "time-input-separator" }, " - ", -1)),
+            m("div", fe, [
+              m("label", {
+                class: "time-input-label",
+                for: `time-input-end-${f(D)}`
+              }, [
+                E() ? (s(), v("span", ge, V(f(k)(e.value.end, "EEE MMM d yyyy")), 1)) : g("", !0)
+              ], 8, ye),
+              B(m("input", {
+                id: `time-input-end-${f(D)}`,
+                "onUpdate:modelValue": a[3] || (a[3] = (l) => r.value = l),
+                class: A(["time-input-end", { "input-error": y.value }]),
+                "data-testid": "time-input-end",
+                step: x.value,
+                type: "time"
+              }, null, 10, De), [
+                [U, r.value]
+              ])
+            ])
+          ], 64)) : g("", !0)
+        ]),
+        p(_, {
+          mode: "out-in",
+          name: "kongponents-fade-transition"
+        }, {
+          default: ee(() => [
+            y.value && t.errorMessage ? (s(), v("div", he, V(t.errorMessage), 1)) : g("", !0)
+          ]),
+          _: 1
+        })
+      ])) : g("", !0)
+    ]));
+  }
+});
 export {
-  p as default
+  Ge as default
 };

package/dist/kongponents218.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("./kongponents67.cjs"),r={class:"skeleton-loader"},l=e.defineComponent({__name:"SkeletonBase",setup(d){return(o,n)=>(e.openBlock(),e.createElementBlock("div",r,[e.renderSlot(o.$slots,"default",{},()=>[e.createVNode(t.default,{height:"1",width:"100"}),e.createVNode(t.default,{height:"1",width:"100"}),e.createVNode(t.default,{height:"1",width:"100"})],!0)]))}});exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("./kongponents49.cjs"),C=require("./kongponents50.cjs"),h=require("./kongponents55.cjs"),S=require("./kongponents302.cjs"),b=require("@kong/icons"),B={key:0,class:"item-filtering-wrapper"},T={key:1,class:"no-items","data-testid":"filter-selector-no-items"},F={ref:"itemWrapper",class:"items-wrapper"},V=e.defineComponent({__name:"FilterSelector",props:{filters:{},itemFiltering:{type:Boolean,default:!1},label:{default:"Add filter"}},emits:["select"],setup(r,{emit:u}){const s=e.useTemplateRef("filterSelector"),d=e.useTemplateRef("itemWrapper"),f=e.useTemplateRef("itemFilteringInput"),a=e.ref(!1),i=e.ref(""),m=e.computed(()=>i.value.toLocaleLowerCase()),n=e.ref(!1),c=e.computed(()=>Object.entries(r.filters).filter(([,t])=>(r.itemFiltering===!1||t.label.toLocaleLowerCase().includes(m.value))&&!t.readonly).map(([t,l])=>({label:l.label,value:t,onClick:()=>v(t)}))),p=u,v=t=>{p("select",t)},g=async t=>{t?(n.value=!0,await e.nextTick(),i.value="",f.value?.input?.focus()):n.value=!1,a.value=!a.value},k=async()=>{a.value?s.value?.closeDropdown():(s.value?.openDropdown(),await e.nextTick(),d.value?.scrollTo({top:0}))};return(t,l)=>(e.openBlock(),e.createBlock(w.default,{ref:"filterSelector",width:"auto",onToggleDropdown:g},{default:e.withCtx(()=>[e.createVNode(S.default,{"data-testid":"filter-selector",label:r.label,"pill-focus":n.value,onClick:l[0]||(l[0]=e.withModifiers(()=>{},["prevent","stop"])),onTrigger:k},{"open-icon":e.withCtx(()=>[e.createVNode(e.unref(b.AddIcon),{decorative:""})]),_:1},8,["label","pill-focus"])]),items:e.withCtx(()=>[r.itemFiltering?(e.openBlock(),e.createElementBlock("div",B,[e.createVNode(h.default,{ref:"itemFilteringInput",modelValue:i.value,"onUpdate:modelValue":l[1]||(l[1]=o=>i.value=o),"data-testid":"filter-selector-item-filtering",placeholder:"Search…",onClick:l[2]||(l[2]=e.withModifiers(()=>{},["stop"]))},null,8,["modelValue"])])):e.createCommentVNode("",!0),r.itemFiltering&&c.value.length===0?(e.openBlock(),e.createElementBlock("div",T," No filters found ")):e.createCommentVNode("",!0),e.createElementVNode("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,o=>(e.openBlock(),e.createBlock(C.default,{key:o.value,"data-testid":"dropdown-item-trigger",item:o,value:o.value,onClick:o.onClick},{default:e.withCtx(()=>[e.renderSlot(t.$slots,`filter-item-${o.value}`,{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)],!0)]),_:2},1032,["item","value","onClick"]))),128))],512)]),_:3},512))}});exports.default=V;

package/dist/kongponents218.es.js

@@ -1,26 +1,93 @@
-import { defineComponent as r, openBlock as n, createElementBlock as s, renderSlot as i, createVNode as e } from "vue";
-import t from "./kongponents67.es.js";
-const l = { class: "skeleton-loader" }, _ = /* @__PURE__ */ r({
-  __name: "SkeletonBase",
-  setup(a) {
-    return (o, d) => (n(), s("div", l, [
-      i(o.$slots, "default", {}, () => [
-        e(t, {
-          height: "1",
-          width: "100"
-        }),
-        e(t, {
-          height: "1",
-          width: "100"
-        }),
-        e(t, {
-          height: "1",
-          width: "100"
-        })
-      ], !0)
-    ]));
+import { defineComponent as D, useTemplateRef as c, ref as u, computed as v, openBlock as r, createBlock as g, withCtx as a, createElementBlock as d, createVNode as m, withModifiers as w, createCommentVNode as k, createElementVNode as L, Fragment as N, renderList as x, renderSlot as B, createTextVNode as R, toDisplayString as K, unref as W, nextTick as C } from "vue";
+import A from "./kongponents49.es.js";
+import E from "./kongponents50.es.js";
+import O from "./kongponents55.es.js";
+import $ from "./kongponents302.es.js";
+import { AddIcon as j } from "@kong/icons";
+const M = {
+  key: 0,
+  class: "item-filtering-wrapper"
+}, P = {
+  key: 1,
+  class: "no-items",
+  "data-testid": "filter-selector-no-items"
+}, U = {
+  ref: "itemWrapper",
+  class: "items-wrapper"
+}, X = /* @__PURE__ */ D({
+  __name: "FilterSelector",
+  props: {
+    filters: {},
+    itemFiltering: { type: Boolean, default: !1 },
+    label: { default: "Add filter" }
+  },
+  emits: ["select"],
+  setup(o, { emit: S }) {
+    const f = c("filterSelector"), h = c("itemWrapper"), F = c("itemFilteringInput"), n = u(!1), i = u(""), b = v(() => i.value.toLocaleLowerCase()), s = u(!1), p = v(() => Object.entries(o.filters).filter(([, e]) => (o.itemFiltering === !1 || e.label.toLocaleLowerCase().includes(b.value)) && !e.readonly).map(([e, t]) => ({
+      label: t.label,
+      value: e,
+      onClick: () => y(e)
+    }))), I = S, y = (e) => {
+      I("select", e);
+    }, T = async (e) => {
+      e ? (s.value = !0, await C(), i.value = "", F.value?.input?.focus()) : s.value = !1, n.value = !n.value;
+    }, V = async () => {
+      n.value ? f.value?.closeDropdown() : (f.value?.openDropdown(), await C(), h.value?.scrollTo({ top: 0 }));
+    };
+    return (e, t) => (r(), g(A, {
+      ref: "filterSelector",
+      width: "auto",
+      onToggleDropdown: T
+    }, {
+      default: a(() => [
+        m($, {
+          "data-testid": "filter-selector",
+          label: o.label,
+          "pill-focus": s.value,
+          onClick: t[0] || (t[0] = w(() => {
+          }, ["prevent", "stop"])),
+          onTrigger: V
+        }, {
+          "open-icon": a(() => [
+            m(W(j), { decorative: "" })
+          ]),
+          _: 1
+        }, 8, ["label", "pill-focus"])
+      ]),
+      items: a(() => [
+        o.itemFiltering ? (r(), d("div", M, [
+          m(O, {
+            ref: "itemFilteringInput",
+            modelValue: i.value,
+            "onUpdate:modelValue": t[1] || (t[1] = (l) => i.value = l),
+            "data-testid": "filter-selector-item-filtering",
+            placeholder: "Search…",
+            onClick: t[2] || (t[2] = w(() => {
+            }, ["stop"]))
+          }, null, 8, ["modelValue"])
+        ])) : k("", !0),
+        o.itemFiltering && p.value.length === 0 ? (r(), d("div", P, " No filters found ")) : k("", !0),
+        L("div", U, [
+          (r(!0), d(N, null, x(p.value, (l) => (r(), g(E, {
+            key: l.value,
+            "data-testid": "dropdown-item-trigger",
+            item: l,
+            value: l.value,
+            onClick: l.onClick
+          }, {
+            default: a(() => [
+              B(e.$slots, `filter-item-${l.value}`, {}, () => [
+                R(K(l.label), 1)
+              ], !0)
+            ]),
+            _: 2
+          }, 1032, ["item", "value", "onClick"]))), 128))
+        ], 512)
+      ]),
+      _: 3
+    }, 512));
   }
 });
 export {
-  _ as default
+  X as default
 };

package/dist/kongponents220.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("./kongponents67.cjs"),a=require("./kongponents183.cjs"),l=require("./kongponents182.cjs"),s={class:"skeleton-card-wrapper"},u={class:"skeleton-card-header"},i={class:"skeleton-card-content"},k={class:"skeleton-card-footer"},m=e.defineComponent({__name:"CardSkeleton",props:{cardCount:{},maxWidth:{}},setup(r){e.useCssVars(t=>({v2bf65be7:c.value}));const c=e.computed(()=>r.maxWidth?l.normalizeSize(r.maxWidth):r.cardCount===1?"470px":`calc((100% / 3) - ${a.KUI_SPACE_50})`);return(t,h)=>(e.openBlock(),e.createElementBlock("div",s,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.cardCount,d=>(e.openBlock(),e.createElementBlock("div",{key:d,class:"skeleton-card"},[e.createElementVNode("div",u,[e.renderSlot(t.$slots,"card-header",{},()=>[e.createVNode(o.default,{width:"50"})],!0)]),e.createElementVNode("div",i,[e.renderSlot(t.$slots,"card-content",{},()=>[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(3,n=>e.createVNode(o.default,{key:n,width:"100"})),64)),e.createVNode(o.default,{width:"50"})],!0)]),e.createElementVNode("div",k,[e.renderSlot(t.$slots,"card-footer",{},()=>[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(2,n=>e.createVNode(o.default,{key:n,height:"2",width:"5"})),64))],!0)])]))),128))]))}});exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),L=require("./kongponents184.cjs"),$=require("./kongponents62.cjs"),j=require("./kongponents55.cjs"),k=require("./kongponents66.cjs"),G=require("./kongponents60.cjs"),W=require("./kongponents302.cjs"),z={class:"filter-content","data-testid":"filter-pill-content"},H={class:"default-layout"},J={key:0,class:"operator"},Q={class:"value"},X={class:"footer"},Y=e.defineComponent({inheritAttrs:!1,__name:"FilterPill",props:{filter:{},initOpen:{type:Boolean,default:!1},selection:{default:()=>{}},custom:{type:Boolean,default:!1}},emits:["apply","close","open","clear"],setup(t,{emit:h}){e.useCssVars(l=>({f988e390:E.value}));const g=e.useAttrs(),m=h,c=e.ref(!1),p=e.useTemplateRef("filterPopper"),r=e.ref(),i=e.ref(),n=e.ref(),s=e.ref(),V=e.ref(),b=e.ref(),y=e.ref(!0),w=e.useTemplateRef("inputField"),d=e.computed(()=>t.custom?"custom":t.filter.options&&!t.filter.multiple?"select":t.filter.options&&t.filter.multiple?"multiselect":"input"),q=e.computed(()=>{switch(d.value){case"input":return!i.value||i.value==="";case"select":return!n.value;case"multiselect":return!s.value||s.value.length===0;case"custom":return!y.value;default:return!1}}),f=e.computed(()=>t.filter.operators&&t.filter.operators.length?t.filter.operators:["eq"]),P=l=>{r.value=l},S=(l,a)=>{V.value=l,b.value=a},B=l=>{y.value=l},N=e.computed(()=>({value:V.value,text:b.value,options:t.filter.options,multiple:t.filter.multiple,operators:f.value,operator:r.value,setOperator:P,setValue:S,setApplyState:B})),E=e.computed(()=>f.value.some(l=>l==="lte"||l==="gte")?"205px":"120px"),T=e.computed(()=>{let l,a;switch(d.value){case"input":l=i.value,a=i.value;break;case"select":l=n.value,a=t.filter?.options?.find(({value:o})=>o===n.value)?.label??n.value?.toString();break;case"multiselect":l=s.value,a=s.value?.map(o=>t.filter.options?.find(({value:u})=>u===o))?.filter(o=>o!==void 0)?.map(({label:o})=>o)?.join(", ");break;case"custom":l=V.value,a=b.value;break}if(!(r.value===void 0||l===void 0||a===void 0))return{operator:r.value,value:l,text:a}}),A=e.computed(()=>{if(t.selection?.operatorDelimiter!==void 0)return t.selection.operatorDelimiter;switch(t.selection?.operator){case"eq":return" = ";case"neq":return" ≠ ";case"lt":return" < ";case"lte":return" ≤ ";case"gt":return" > ";case"gte":return" ≥ ";default:return": "}}),x=e.computed(()=>{const l={eq:"Equals",neq:"Not equals",contains:"Contains",exists:"Exists",lt:"Less than",lte:"Less than or equal to",gt:"Greater than",gte:"Greater than or equal to"};return f.value.map(a=>({label:l[a],value:a}))}),O=e.computed(()=>x.value.find(({value:l})=>l===r.value)?.label??""),K=()=>{d.value==="input"&&w.value?.input?.focus()},M=()=>{r.value=t.selection?.operator??f.value?.[0],i.value=typeof t.selection?.value=="string"?t.selection.value:void 0,n.value=t.filter.options?.find(({value:l})=>l===t.selection?.value)?.value,s.value=t.filter.options?.filter(({value:l})=>{if(Array.isArray(t.selection?.value))return t.selection.value.includes(`${l}`)}).map(({value:l})=>l),V.value=t.selection?.value,b.value=t.selection?.text,y.value=!0},C=async()=>{M(),p.value&&(p.value.showPopover(),c.value=!0,await e.nextTick(),K()),m("open")},v=()=>{p.value&&(p.value.hidePopover(),c.value=!1),m("close")};e.onMounted(()=>{t.initOpen&&C()});const U=()=>{c.value&&v()},F=()=>{m("apply",T.value),v()},D=()=>{v()},I=()=>{v(),m("clear")},R=()=>{c.value?v():C()};return(l,a)=>{const o=e.resolveComponent("KButton");return e.openBlock(),e.createBlock($.default,{ref:"filterPopper","max-width":t.filter.maxWidth??"400px",offset:`var(--kui-space-30, ${e.unref(L.KUI_SPACE_30)})`,placement:t.filter.placement??"bottom-start",width:"auto",onClose:U},{default:e.withCtx(()=>[e.createVNode(W.default,e.mergeProps({"content-label":t.selection?.text,"data-testid":"filter-pill",delimiter:A.value,label:t.filter.label,"pill-focus":c.value,readonly:t.filter.readonly},e.unref(g),{onClear:I,onClick:a[0]||(a[0]=e.withModifiers(()=>{},["prevent","stop"])),onTrigger:R}),null,16,["content-label","delimiter","label","pill-focus","readonly"])]),title:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.filter.label),1)]),content:e.withCtx(()=>[e.createElementVNode("div",z,[e.renderSlot(l.$slots,"default",e.normalizeProps(e.guardReactiveProps(N.value)),()=>[e.createElementVNode("div",H,[f.value.length>1?(e.openBlock(),e.createElementBlock("div",J,[e.createVNode(k.default,{modelValue:r.value,"onUpdate:modelValue":a[1]||(a[1]=u=>r.value=u),items:x.value,"kpop-attributes":{popoverClasses:"force-operator-width"},label:"Operator",title:O.value},null,8,["modelValue","items","title"])])):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[d.value==="select"?(e.openBlock(),e.createBlock(k.default,{key:0,modelValue:n.value,"onUpdate:modelValue":a[2]||(a[2]=u=>n.value=u),"data-testid":"filter-pill-select",items:t.filter.options,label:"Value",placeholder:"Select a value"},null,8,["modelValue","items"])):d.value==="multiselect"?(e.openBlock(),e.createBlock(G.default,{key:1,modelValue:s.value,"onUpdate:modelValue":a[3]||(a[3]=u=>s.value=u),"data-testid":"filter-pill-multiselect",items:t.filter.options,label:"Value",placeholder:"Select values"},null,8,["modelValue","items"])):(e.openBlock(),e.createBlock(j.default,{key:2,ref:"inputField",modelValue:i.value,"onUpdate:modelValue":a[4]||(a[4]=u=>i.value=u),modelModifiers:{trim:!0},"data-testid":"filter-pill-input",label:"Value",placeholder:"Enter a value"},null,8,["modelValue"]))])])],!0)])]),footer:e.withCtx(()=>[e.createElementVNode("div",X,[e.createVNode(o,{appearance:"secondary","data-testid":"filter-pill-cancel",onClick:D},{default:e.withCtx(()=>[...a[5]||(a[5]=[e.createTextVNode(" Cancel ",-1)])]),_:1}),e.createVNode(o,{appearance:"primary","data-testid":"filter-pill-apply",disabled:q.value,onClick:F},{default:e.withCtx(()=>[...a[6]||(a[6]=[e.createTextVNode(" Apply ",-1)])]),_:1},8,["disabled"])])]),_:3},8,["max-width","offset","placement"])}}});exports.default=Y;