@kong/kongponents 9.64.22 → 9.64.23

package/dist/kongponents232.es.js

@@ -1,93 +1,57 @@
-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 "./kongponents341.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",
+import { defineComponent as u, openBlock as f, createElementBlock as p, createVNode as e, withModifiers as n, withCtx as i, unref as s } from "vue";
+import { BackIcon as c, ForwardIcon as b } from "@kong/icons";
+import r from "./kongponents38.es.js";
+const m = { class: "pagination-offset-button-container" }, y = /* @__PURE__ */ u({
+  __name: "PaginationOffset",
   props: {
-    filters: {},
-    itemFiltering: { type: Boolean, default: !1 },
-    label: { default: "Add filter" }
+    previousButtonDisabled: {
+      type: Boolean,
+      default: !1
+    },
+    nextButtonDisabled: {
+      type: Boolean,
+      default: !1
+    }
   },
-  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));
+  emits: ["getPreviousOffset", "getNextOffset"],
+  setup(o, { emit: l }) {
+    const a = l;
+    return (v, t) => (f(), p("div", m, [
+      e(r, {
+        appearance: "tertiary",
+        "aria-label": "Go to the previous page",
+        class: "pagination-button",
+        "data-testid": "previous-button",
+        disabled: o.previousButtonDisabled,
+        icon: "",
+        size: "small",
+        type: "button",
+        onClick: t[0] || (t[0] = n((d) => a("getPreviousOffset"), ["prevent"]))
+      }, {
+        default: i(() => [
+          e(s(c), { decorative: "" })
+        ]),
+        _: 1
+      }, 8, ["disabled"]),
+      e(r, {
+        appearance: "tertiary",
+        "aria-label": "Go to the next page",
+        class: "pagination-button",
+        "data-testid": "next-button",
+        disabled: o.nextButtonDisabled,
+        icon: "",
+        size: "small",
+        type: "button",
+        onClick: t[1] || (t[1] = n((d) => a("getNextOffset"), ["prevent"]))
+      }, {
+        default: i(() => [
+          e(s(b), { decorative: "" })
+        ]),
+        _: 1
+      }, 8, ["disabled"])
+    ]));
   }
 });
 export {
-  X as default
+  y as default
 };

package/dist/kongponents234.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),L=require("./kongponents182.cjs"),$=require("./kongponents62.cjs"),j=require("./kongponents55.cjs"),k=require("./kongponents66.cjs"),G=require("./kongponents60.cjs"),W=require("./kongponents341.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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("./kongponents201.cjs"),p={ref:"itemsContainer"},B={key:1,class:"select-group","data-propagate-clicks":"false"},g={class:"select-group-title"},v={class:"select-item-description"},u=".select-item button:not(:disabled)",w='.select-item[aria-selected="true"] button:not(:disabled)',C=e.defineComponent({__name:"KSelectItems",props:{items:{default:()=>[]},itemCreationEnabled:{type:Boolean},filterString:{default:""},itemCreationValid:{type:Boolean,default:!0}},emits:["selected","add-item"],setup(i,{expose:f,emit:E}){const k=E,a=n=>"items"in n&&Array.isArray(n.items),d=n=>k("selected",n),m=e.useTemplateRef("itemsContainer"),S=n=>{const o=m.value;if(!o)return;const t=o.querySelectorAll(u);if(!t?.length)return;const s=o.querySelector(w);if(s){const l=[...t].indexOf(s);t[n==="down"?l+1:l-1]?.focus()}else t[n==="down"?0:t.length-1]?.focus()},c=({target:n,key:o})=>{if(o==="ArrowDown"||o==="ArrowUp"){const t=m.value?.querySelectorAll(u);if(t?.length){const s=[...t].indexOf(n),l=o==="ArrowDown"?s+1:s-1;t[l]?.focus()}}};return f({setFocus:S}),(n,o)=>(e.openBlock(),e.createElementBlock("div",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.items,(t,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:a(t)?`${t.key||t.label}-group`:t.key||t.value||s},[a(t)?(e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("span",g,e.toDisplayString(t.label),1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,l=>(e.openBlock(),e.createBlock(r.default,{key:l.key,item:l,onKeydown:c,onSelected:d},{content:e.withCtx(()=>[e.renderSlot(n.$slots,"content",{item:l},void 0,!0)]),_:2},1032,["item"]))),128))])):(e.openBlock(),e.createBlock(r.default,{key:0,item:t,onKeydown:c,onSelected:d},{content:e.withCtx(()=>[e.renderSlot(n.$slots,"content",{item:t},void 0,!0)]),_:2},1032,["item"]))],64))),128)),i.itemCreationEnabled?(e.openBlock(),e.createBlock(r.default,{key:"select-add-item",class:"select-add-item","data-testid":"select-add-item",item:{label:`${i.filterString} (Add new value)`,value:"add_item",disabled:!i.itemCreationValid},onKeydown:c,onSelected:o[0]||(o[0]=t=>n.$emit("add-item"))},{content:e.withCtx(()=>[e.createElementVNode("div",v,[e.createTextVNode(e.toDisplayString(i.filterString)+" ",1),o[1]||(o[1]=e.createElementVNode("span",{class:"select-item-new-indicator"},"(Add new value)",-1))])]),_:1},8,["item"])):e.createCommentVNode("",!0)],512))}});exports.default=C;

package/dist/kongponents234.es.js

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

package/dist/kongponents238.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),C=require("./kongponents178.cjs"),c=require("@kong/icons"),f=require("./kongponents38.cjs"),V=require("./kongponents42.cjs"),g=require("./kongponents49.cjs"),x=require("./kongponents50.cjs"),N=require("./kongponents55.cjs"),I=require("./kongponents30.cjs");;/* empty css                */const S=require("./kongponents57.cjs"),B={class:"table-column-visibility-menu"},M={class:"apply-button-wrapper"},q=e.defineComponent({__name:"ColumnVisibilityMenu",props:{columns:{},tableId:{},visibilityPreferences:{},disabled:{type:Boolean}},emits:["update"],setup(i,{emit:v}){const y=v,m=e.ref(!1),n=e.ref({}),u=e.ref(!1),r=e.ref(),o=e.ref(""),d=()=>{n.value=i.columns.reduce((t,l)=>(t[l.key]=i.visibilityPreferences[l.key]===void 0?!0:i.visibilityPreferences[l.key],t),{}),u.value=!1},p=C.debounce(t=>{o.value=t,r.value&&s(r.value)},500),b=e.computed(()=>o.value?i.columns.filter(t=>(t.label?t.label:t.key).toLowerCase().includes(o.value.toLowerCase())):i.columns),k=()=>{y("update",JSON.parse(JSON.stringify(n.value))),u.value=!1,o.value=""},h=t=>{m.value=t,t&&r.value&&e.nextTick(()=>{r.value&&s(r.value)}),!t&&u.value&&d(),t||(o.value="")},s=t=>{if(!(t.scrollHeight>t.clientHeight)){t.classList.remove("is-bottom-overflowing");return}const a=t.scrollHeight<t.clientHeight+t.scrollTop+1;t.classList.toggle("is-bottom-overflowing",!a)};return e.watch(()=>i.visibilityPreferences,()=>{d()},{immediate:!0}),e.onMounted(()=>{r.value&&(r.value.addEventListener("scroll",t=>{const l=t.currentTarget;s(l)}),s(r.value))}),e.onBeforeMount(()=>{d()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",B,[e.createVNode(g.default,{"data-testid":"table-column-visibility-menu",disabled:i.disabled,"kpop-attributes":{placement:"bottom-end"},onToggleDropdown:h},{items:e.withCtx(()=>[o.value||b.value.length>5?(e.openBlock(),e.createBlock(N.default,{key:0,modelValue:o.value,"onUpdate:modelValue":l[1]||(l[1]=a=>o.value=a),modelModifiers:{trim:!0},autocapitalize:"off",autocomplete:"off",autocorrect:"off",class:"search-input","data-testid":"search-input",name:"column-search",placeholder:"Search columns",spellcheck:"false",type:"search",onClick:l[2]||(l[2]=e.withModifiers(()=>{},["stop"])),onInput:e.unref(p)},e.createSlots({before:e.withCtx(()=>[e.createVNode(e.unref(c.SearchIcon),{decorative:""})]),_:2},[o.value?{name:"after",fn:e.withCtx(()=>[e.createVNode(f.default,{appearance:"tertiary","aria-label":"Clear search",class:"clear-search","data-testid":"clear-search-button",icon:"",size:"small",onClick:l[0]||(l[0]=e.withModifiers(()=>o.value="",["stop"]))},{default:e.withCtx(()=>[e.createVNode(e.unref(c.CloseIcon),{decorative:""})]),_:1})]),key:"0"}:void 0]),1032,["modelValue","onInput"])):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"menuItemsRef",ref:r,class:"menu-items-wrapper"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,a=>(e.openBlock(),e.createBlock(x.default,{key:a.key,class:"column-visibility-menu-item","data-testid":`column-visibility-menu-item-${a.key}`,onClick:e.withModifiers(()=>{n.value[a.key]=!n.value[a.key],u.value=!0},["stop"])},{default:e.withCtx(()=>[e.createVNode(V.default,{modelValue:n.value[a.key],"onUpdate:modelValue":w=>n.value[a.key]=w,"aria-labelledby":`${i.tableId}-${a.key}-visibility-checkbox-label`,"data-testid":`column-visibility-checkbox-${a.key}`},null,8,["modelValue","onUpdate:modelValue","aria-labelledby","data-testid"]),e.createVNode(S.default,{id:`${i.tableId}-${a.key}-visibility-checkbox-label`,class:"visibility-checkbox-label",title:a.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.label),1)]),_:2},1032,["id","title"])]),_:2},1032,["data-testid","onClick"]))),128))],512),e.createElementVNode("div",M,[e.createVNode(f.default,{appearance:"tertiary",class:"apply-button","data-testid":"apply-button",onClick:k},{default:e.withCtx(()=>[...l[3]||(l[3]=[e.createTextVNode(" Apply ",-1)])]),_:1})])]),default:e.withCtx(()=>[e.createVNode(I.default,{placement:"bottom-end",text:m.value?void 0:"Show/Hide Columns"},{default:e.withCtx(()=>[e.createVNode(f.default,{appearance:"tertiary","aria-label":"Show/Hide Columns",class:"menu-button","data-testid":"column-visibility-menu-button",disabled:i.disabled,icon:"",size:"large"},{default:e.withCtx(()=>[e.createVNode(e.unref(c.TableColumnsIcon),{decorative:""})]),_:1},8,["disabled"])]),_:1},8,["text"])]),_:1},8,["disabled"])]))}});exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),x=require("v-calendar"),P=require("./kongponents319.cjs"),F=require("./kongponents331.cjs"),f=require("./kongponents188.cjs"),R=require("./kongponents326.cjs"),q=require("./kongponents322.cjs"),I=require("./kongponents324.cjs"),$={class:"calendar-wrapper"},p={key:2,class:"time-wrapper"},A={class:"time-inputs-container"},U={class:"time-input-column"},Y=["for"],j={key:0},z={key:1},W=["id","step"],O={class:"time-input-column"},J=["for"],K={key:0},L=["id","step"],Q={key:0,class:"help-text"},X=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"?f.default(l,"HH:mm:ss"):f.default(l,"HH:mm"),t=e.useModel(a,"modelValue"),m=e.useModel(a,"error"),i=e.ref(u(new Date,a.timeGranularity)),s=e.ref(u(new Date,a.timeGranularity)),c=e.ref({start:u(new Date,a.timeGranularity),end:u(new Date,a.timeGranularity)}),v=e.useId(),b=e.computed(()=>a.isRange&&o(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&&P.default(a.maxDate,F.default())?{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:T,expanded:!0,initialPage:b.value,maxDate:a.maxDate,minDate:a.minDate,mode:"date",modelConfig:C,selectAttribute:N,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,o=l=>!l||typeof l!="object"||!("start"in l)||!("end"in l)?!1:l.start instanceof Date&&l.end instanceof Date,w=()=>{if(!a.sameDayFullRange||!a.isRange||!o(t.value))return!1;const l=t.value.start.getTime(),n=t.value.end.getTime(),r=a.timeGranularity==="secondly"?"HH:mm:ss":"HH:mm",d=i.value?R.default(i.value,r,t.value.start).getTime():l,g=s.value?R.default(s.value,r,t.value.end).getTime():n,S=q.default(t.value.start,t.value.end);return(I.default(t.value.start,t.value.end)||S&&(d>=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&&o(t.value)?(i.value=u(t.value.start,a.timeGranularity),s.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),d=parseInt(n[1]??"0",10),g=a.timeGranularity==="secondly"&&n[2]?parseInt(n[2],10):0;return{hours:r,minutes:d,seconds:g}};e.onMounted(()=>{V(),c.value.start=i.value,c.value.end=s.value});const C={type:"number"},T={key:"select-drag",highlight:{start:{contentClass:"vcal-day-drag-start"},base:{contentClass:"vcal-day-drag-base"},end:{contentClass:"vcal-day-drag-end"}}},N={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:d}=M(l);a.isRange&&o(t.value)?(t.value.start.setHours(n,r,d,0),m.value=y(t.value.start,t.value.end)):t.value instanceof Date&&t.value.setHours(n,r,d,0)}),e.watch(()=>s.value,l=>{if(!l)return;const{hours:n,minutes:r,seconds:d}=M(l);a.isRange&&o(t.value)&&(t.value.end.setHours(n,r,d,0),m.value=y(t.value.start,t.value.end))}),e.watch(()=>t.value,()=>{a.isRange&&o(t.value)?(w(),i.value=u(t.value.start,a.timeGranularity),s.value=u(t.value.end,a.timeGranularity),m.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&&o(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&&o(t.value),H=()=>{i.value=c.value.start,s.value=c.value.end},B=l=>{try{return f.default(l,"EEE MMM d yyyy")}catch(n){console.warn("Error formatting date:",n)}};return G({resetTime:H,initTimeInputs:V}),(l,n)=>(e.openBlock(),e.createElementBlock("div",$,[a.isRange?(e.openBlock(),e.createBlock(e.unref(x.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(x.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",A,[e.createElementVNode("div",U,[e.createElementVNode("label",{class:"time-input-label",for:`time-input-start-${e.unref(v)}`},[E()?(e.openBlock(),e.createElementBlock("span",j,e.toDisplayString(B(t.value.start)),1)):t.value&&t.value instanceof Date?(e.openBlock(),e.createElementBlock("span",z,e.toDisplayString(B(t.value)),1)):e.createCommentVNode("",!0)],8,Y),e.withDirectives(e.createElementVNode("input",{id:`time-input-start-${e.unref(v)}`,"onUpdate:modelValue":n[2]||(n[2]=r=>i.value=r),class:e.normalizeClass(["time-input-start",{"input-error":m.value}]),"data-testid":"time-input-start",step:h.value,type:"time"},null,10,W),[[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",O,[e.createElementVNode("label",{class:"time-input-label",for:`time-input-end-${e.unref(v)}`},[E()?(e.openBlock(),e.createElementBlock("span",K,e.toDisplayString(e.unref(f.default)(t.value.end,"EEE MMM d yyyy")),1)):e.createCommentVNode("",!0)],8,J),e.withDirectives(e.createElementVNode("input",{id:`time-input-end-${e.unref(v)}`,"onUpdate:modelValue":n[3]||(n[3]=r=>s.value=r),class:e.normalizeClass(["time-input-end",{"input-error":m.value}]),"data-testid":"time-input-end",step:h.value,type:"time"},null,10,L),[[e.vModelText,s.value]])])],64)):e.createCommentVNode("",!0)]),e.createVNode(e.Transition,{mode:"out-in",name:"kongponents-fade-transition"},{default:e.withCtx(()=>[m.value&&a.errorMessage?(e.openBlock(),e.createElementBlock("div",Q,e.toDisplayString(a.errorMessage),1)):e.createCommentVNode("",!0)]),_:1})])):e.createCommentVNode("",!0)]))}});exports.default=X;