@kong/kongponents 9.45.3 → 9.46.0

package/dist/kongponents.es10.js

@@ -0,0 +1,24 @@
+var t = /* @__PURE__ */ ((e) => (e.Date = "date", e.Time = "time", e.Datetime = "dateTime", e.Relative = "relative", e.RelativeDate = "relativeDate", e.RelativeDateTime = "relativeDateTime", e))(t || {});
+const a = t, l = Object.values(t), r = [
+  "date",
+  "time",
+  "dateTime"
+  /* Datetime */
+], v = [
+  "relative",
+  "relativeDate",
+  "relativeDateTime"
+  /* RelativeDateTime */
+], i = [
+  "date",
+  "relativeDate"
+  /* RelativeDate */
+];
+export {
+  t as DateTimePickerModes,
+  l as ModeArray,
+  r as ModeArrayCustom,
+  v as ModeArrayRelative,
+  i as ModeDateOnly,
+  a as TimepickerMode
+};

package/dist/kongponents.es102.js

@@ -0,0 +1,105 @@
+import { defineComponent as f, useAttrs as k, watch as b, computed as n, createElementBlock as h, openBlock as c, normalizeClass as y, createBlock as C, resolveDynamicComponent as p, mergeProps as w, withCtx as D, createElementVNode as B, renderSlot as $, createTextVNode as A, toDisplayString as I } from "vue";
+const M = { class: "dropdown-item-trigger-label" }, i = "dropdown-item-trigger", j = /* @__PURE__ */ f({
+  inheritAttrs: !1,
+  __name: "KDropdownItem",
+  props: {
+    item: { default: null },
+    hasDivider: { type: Boolean },
+    danger: { type: Boolean },
+    disabled: { type: Boolean },
+    selected: { type: Boolean },
+    selectionMenuChild: { type: Boolean },
+    onClick: { type: Function },
+    isDangerous: { type: Boolean, default: () => {
+    } }
+  },
+  emits: ["click", "change"],
+  setup(t, { emit: m }) {
+    const g = k();
+    b(() => t.isDangerous, (e) => {
+      typeof e < "u" && console.warn("KDropdownItem: `isDangerous` prop is deprecated. Please use `danger` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kdropdownmenu");
+    });
+    const r = m, o = n(() => {
+      var e;
+      return (e = t.item) != null && e.to ? "link" : typeof t.onClick < "u" || t.selectionMenuChild ? "button" : "default";
+    }), v = n(() => {
+      var e;
+      return ((e = t.item) == null ? void 0 : e.label) || "";
+    }), l = n(() => {
+      var e;
+      return ((e = t.item) == null ? void 0 : e.to) || void 0;
+    }), u = (e) => {
+      r("click", e), t.selectionMenuChild && r("change", t.item);
+    }, d = n(() => {
+      let e = "div";
+      return o.value === "link" && l.value && typeof l.value == "string" ? e = "link" : o.value === "link" && l.value && typeof l.value == "object" ? e = "router-link" : o.value === "button" && (e = "button"), e;
+    }), a = n(() => {
+      const e = Object.assign({}, g);
+      return delete e.class, delete e.disabled, delete e.style, e;
+    }), s = n(() => ({
+      link: {
+        tag: "a",
+        attrs: {
+          // add disabled class instead of disabled attribute because disabled is not a valid attribute for links
+          class: `${i} ${t.disabled ? "disabled" : ""}`,
+          href: l.value,
+          ...a.value
+        }
+      },
+      "router-link": {
+        tag: "router-link",
+        onClick: u,
+        attrs: {
+          // add disabled class instead of disabled attribute because disabled is not a valid attribute for links
+          class: `${i} ${t.disabled ? "disabled" : ""}`,
+          to: l.value,
+          ...a.value
+        }
+      },
+      button: {
+        tag: "button",
+        onClick: u,
+        attrs: {
+          type: "button",
+          // don't add disabled class because we want the disabled attribute on the button
+          class: i,
+          disabled: t.disabled,
+          ...a.value
+        }
+      },
+      div: {
+        tag: "div",
+        attrs: {
+          // add disabled class instead of disabled attribute because disabled is not a valid attribute for div
+          class: `${i} ${t.disabled ? "disabled" : ""}`,
+          ...a.value
+        }
+      }
+    }));
+    return (e, S) => (c(), h("li", {
+      class: y(["k-dropdown-item", [{
+        "has-divider": t.hasDivider,
+        disabled: t.disabled,
+        danger: t.danger || t.isDangerous,
+        "dropdown-selected-option": t.selected
+      }, e.$attrs.class, e.$attrs.style]]),
+      "data-testid": "dropdown-item"
+    }, [
+      (c(), C(p(s.value[d.value].tag), w({ "data-testid": "dropdown-item-trigger" }, s.value[d.value].attrs, {
+        onClick: s.value[d.value].onClick
+      }), {
+        default: D(() => [
+          B("span", M, [
+            $(e.$slots, "default", {}, () => [
+              A(I(v.value), 1)
+            ], !0)
+          ])
+        ]),
+        _: 3
+      }, 16, ["onClick"]))
+    ], 2));
+  }
+});
+export {
+  j as default
+};

package/dist/kongponents.es105.js

@@ -0,0 +1,144 @@
+import { defineComponent as T, useSlots as b, useId as K, computed as u, createElementBlock as i, openBlock as o, normalizeClass as f, createElementVNode as l, createCommentVNode as s, renderSlot as n, createBlock as y, resolveDynamicComponent as N, unref as k, createTextVNode as $, toDisplayString as c, createVNode as O, withCtx as d, Fragment as S, renderList as D } from "vue";
+import v from "./kongponents.es199.js";
+import R from "./kongponents.es200.js";
+import U from "./kongponents.es181.js";
+import A from "./kongponents.es201.js";
+import { KUI_COLOR_TEXT_DECORATIVE_AQUA as L, KUI_COLOR_TEXT_NEUTRAL as w, KUI_COLOR_TEXT_WARNING as z, KUI_ICON_SIZE_60 as X } from "./kongponents.es182.js";
+import F from "./kongponents.es33.js";
+import "./kongponents.es5.js";
+import "./kongponents.es10.js";
+import { EmptyStateIconVariants as r } from "./kongponents.es11.js";
+import G from "./kongponents.es34.js";
+const Q = { class: "empty-state-content" }, W = ["aria-hidden"], Z = {
+  key: 0,
+  class: "empty-state-title"
+}, j = {
+  key: 1,
+  class: "empty-state-message"
+}, q = {
+  key: 2,
+  class: "empty-state-action"
+}, H = {
+  key: 0,
+  class: "empty-state-features-container"
+}, J = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "feature-icon"
+}, M = { class: "card-header" }, P = ["title"], Y = {
+  key: 1,
+  class: "empty-state-footer-container"
+}, ct = /* @__PURE__ */ T({
+  __name: "KEmptyState",
+  props: {
+    title: { default: "" },
+    message: { default: "" },
+    actionButtonVisible: { type: Boolean, default: !0 },
+    actionButtonText: { default: "" },
+    actionButtonDisabled: { type: Boolean },
+    iconVariant: { default: () => r.Default },
+    iconBackground: { type: Boolean, default: !1 },
+    features: { default: () => [] }
+  },
+  emits: ["click-action"],
+  setup(e, { emit: h }) {
+    const B = h, g = b(), C = K(), E = u(() => {
+      switch (e.iconVariant) {
+        case r.Default:
+          return v;
+        case r.Error:
+          return A;
+        case r.Search:
+          return U;
+        case r.Kong:
+          return R;
+        default:
+          return v;
+      }
+    }), I = u(() => {
+      if (e.iconBackground)
+        return L;
+      switch (e.iconVariant) {
+        case r.Error:
+          return z;
+        default:
+          return w;
+      }
+    }), p = u(() => {
+      if (g.image)
+        return "empty-state-image";
+      const t = "empty-state-icon";
+      return e.iconBackground ? `${t} has-background` : t;
+    });
+    return (t, m) => (o(), i("div", {
+      class: f(["k-empty-state", [e.iconVariant]])
+    }, [
+      l("div", Q, [
+        l("div", {
+          "aria-hidden": t.$slots.image ? void 0 : "true",
+          class: f(p.value)
+        }, [
+          n(t.$slots, "image", {}, () => [
+            n(t.$slots, "icon", {}, () => [
+              (o(), y(N(E.value), {
+                color: I.value,
+                decorative: "",
+                size: k(X)
+              }, null, 8, ["color", "size"]))
+            ], !0)
+          ], !0)
+        ], 10, W),
+        e.title || t.$slots.title ? (o(), i("div", Z, [
+          n(t.$slots, "title", {}, () => [
+            $(c(e.title), 1)
+          ], !0)
+        ])) : s("", !0),
+        e.message || t.$slots.default ? (o(), i("div", j, [
+          n(t.$slots, "default", {}, () => [
+            l("p", null, c(e.message), 1)
+          ], !0)
+        ])) : s("", !0),
+        e.actionButtonVisible && e.actionButtonText || t.$slots.action ? (o(), i("div", q, [
+          n(t.$slots, "action", {}, () => [
+            O(F, {
+              disabled: e.actionButtonDisabled,
+              type: "button",
+              onClick: m[0] || (m[0] = (a) => B("click-action"))
+            }, {
+              default: d(() => [
+                n(t.$slots, "action-button-icon", {}, void 0, !0),
+                $(" " + c(e.actionButtonText), 1)
+              ]),
+              _: 3
+            }, 8, ["disabled"])
+          ], !0)
+        ])) : s("", !0)
+      ]),
+      e.features.length ? (o(), i("div", H, [
+        (o(!0), i(S, null, D(e.features, (a, V) => (o(), y(G, {
+          key: `feature-${k(C)}-${a.key || V}`,
+          class: "empty-state-feature-card"
+        }, {
+          title: d(() => [
+            a.key && t.$slots[`feature-icon-${a.key}`] ? (o(), i("div", J, [
+              n(t.$slots, `feature-icon-${a.key}`, {}, void 0, !0)
+            ])) : s("", !0),
+            l("div", M, c(a.title), 1)
+          ]),
+          default: d(() => [
+            l("div", {
+              title: a.description
+            }, c(a.description), 9, P)
+          ]),
+          _: 2
+        }, 1024))), 128))
+      ])) : s("", !0),
+      t.$slots.footer ? (o(), i("div", Y, [
+        n(t.$slots, "footer", {}, void 0, !0)
+      ])) : s("", !0)
+    ], 2));
+  }
+});
+export {
+  ct as default
+};

package/dist/kongponents.es107.js

@@ -0,0 +1,213 @@
+import { defineComponent as re, useSlots as oe, useAttrs as ue, useId as ne, computed as o, useTemplateRef as W, ref as b, watch as de, createElementBlock as m, openBlock as n, mergeProps as P, withModifiers as q, createBlock as w, createCommentVNode as A, withDirectives as se, createSlots as U, withCtx as p, createTextVNode as M, toDisplayString as v, renderSlot as B, createElementVNode as K, normalizeClass as D, createVNode as j, vShow as ve, unref as G } from "vue";
+import ce from "./kongponents.es48.js";
+import fe from "./kongponents.es46.js";
+import H from "./kongponents.es33.js";
+import be from "./kongponents.es187.js";
+import me from "./kongponents.es202.js";
+import pe from "./kongponents.es203.js";
+const he = ["role"], ge = { class: "file-upload-input-wrapper" }, ye = {
+  key: 1,
+  class: "file-upload-dropzone-wrapper"
+}, ze = ["aria-disabled", "aria-labelledby", "tabindex"], ke = {
+  "aria-hidden": "true",
+  class: "dropzone-icon"
+}, Se = { key: 0 }, $e = { key: 1 }, De = /* @__PURE__ */ re({
+  inheritAttrs: !1,
+  __name: "KFileUpload",
+  props: {
+    labelAttributes: { default: () => ({}) },
+    label: { default: "" },
+    help: {},
+    buttonText: { default: "Select file" },
+    placeholder: { default: "" },
+    accept: {},
+    maxFileSize: { default: null },
+    error: { type: Boolean },
+    errorMessage: { default: "" },
+    disabled: { type: Boolean },
+    appearance: { default: "input" }
+  },
+  emits: ["file-added", "file-removed", "error"],
+  setup(e, { emit: J }) {
+    const c = J, O = oe(), u = ue(), { stripRequiredLabel: Q } = be(), X = ne(), C = o(() => u.id ? String(u.id) : X), Y = o(() => {
+      const l = { ...u };
+      return delete l.id, l;
+    }), E = W("input"), Z = o(() => {
+      var l;
+      return !!((l = e.labelAttributes) != null && l.info || O["label-tooltip"]);
+    }), _ = o(() => Q(e.label, L.value)), L = o(() => (u == null ? void 0 : u.required) !== void 0 && String(u == null ? void 0 : u.required) !== "false"), I = o(() => d.value ? "Drag & drop a file" : "No file selected"), h = b(!1), T = o(() => {
+      if (h.value) {
+        let l = "bytes", a = s.value;
+        return s.value >= 1024 && s.value < 1024 * 1024 && (a = s.value / 1024, l = "KB"), s.value >= 1024 * 1024 && (a = s.value / (1024 * 1024), l = "MB"), `File size must be less than ${a}${l}.`;
+      }
+      return "";
+    }), s = o(() => e.maxFileSize || e.maxFileSize === 0 ? e.maxFileSize : 5 * 1024 * 1024), g = o(() => k.value || h.value || e.error), f = b(0), t = b(""), y = b(null), ee = W("dropzone"), le = (l) => {
+      var S, $, i, x, V;
+      k.value = !1;
+      const a = l.target.files, r = (S = a[0]) == null ? void 0 : S.size;
+      Number(r) > s.value && (f.value++, h.value = !0, c("error", a));
+      const F = (i = ($ = E.value) == null ? void 0 : $.$el) == null ? void 0 : i.querySelector("input");
+      a.length ? (y.value = a, t.value = a[0].name || "", c("file-added", a)) : (F.files = y.value, t.value = ((V = (x = y.value) == null ? void 0 : x[0]) == null ? void 0 : V.name) || "");
+    }, N = () => {
+      var a, r;
+      if (t.value) {
+        ae();
+        return;
+      }
+      const l = (r = (a = E.value) == null ? void 0 : a.$el) == null ? void 0 : r.querySelector("input");
+      l && l.click();
+    }, ae = () => {
+      y.value = null, t.value = "", f.value++, h.value = !1, c("file-removed");
+    }, z = b(!1), k = b(!1), te = (l) => !e.accept || !Array.isArray(e.accept) || !e.accept.length ? !0 : e.accept.some((a) => {
+      if (a.startsWith("."))
+        return l.name.toLowerCase().endsWith(a.toLowerCase());
+      if (a.endsWith("/*")) {
+        const r = a.slice(0, -2);
+        return l.type.startsWith(r);
+      } else
+        return l.type === a;
+    }), R = o(() => k.value ? `Unsupported file type. Please upload one of the following: ${e.accept.join(", ")}` : ""), ie = (l) => {
+      var a, r, F, S, $;
+      if (!e.disabled) {
+        d.value ? (a = ee.value) == null || a.focus() : (F = (r = E.value) == null ? void 0 : r.input) == null || F.focus(), z.value = !1;
+        const i = (S = l.dataTransfer) == null ? void 0 : S.files;
+        if (i && i.length) {
+          const x = ($ = i[0]) == null ? void 0 : $.size;
+          if (Number(x) > s.value) {
+            f.value++, h.value = !0, c("error", i);
+            return;
+          }
+          te(i[0]) ? (k.value = !1, y.value = i, t.value = i[0].name || "", c("file-added", i)) : (k.value = !0, c("error", i));
+        }
+      }
+    }, d = o(() => e.appearance === "dropzone");
+    return de(() => u.id, () => {
+      f.value++;
+    }, { immediate: !0 }), (l, a) => (n(), m("div", P({ class: "k-file-upload" }, Y.value, {
+      role: e.disabled ? void 0 : "region",
+      onDragleave: a[0] || (a[0] = q((r) => z.value = !1, ["prevent"])),
+      onDragover: a[1] || (a[1] = q((r) => z.value = !0, ["prevent"])),
+      onDrop: q(ie, ["prevent"])
+    }), [
+      e.label ? (n(), w(ce, P({ key: 0 }, e.labelAttributes, {
+        id: d.value ? `file-upload-dropzone-label-${C.value}` : void 0,
+        for: C.value,
+        required: L.value
+      }), U({
+        default: p(() => [
+          M(v(_.value) + " ", 1)
+        ]),
+        _: 2
+      }, [
+        Z.value ? {
+          name: "tooltip",
+          fn: p(() => [
+            B(l.$slots, "label-tooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["id", "for", "required"])) : A("", !0),
+      se(K("div", ge, [
+        d.value ? A("", !0) : (n(), m("span", {
+          key: f.value,
+          class: D(["file-upload-input-text", { placeholder: !t.value, "has-icon": l.$slots.icon, disabled: e.disabled }])
+        }, v(t.value ? t.value : e.placeholder || I.value), 3)),
+        (n(), w(fe, {
+          id: C.value,
+          key: f.value,
+          ref: "input",
+          accept: e.accept,
+          class: D(["upload-input", { dragging: z.value && !e.disabled }]),
+          disabled: e.disabled,
+          error: g.value,
+          "error-message": e.errorMessage || R.value || T.value,
+          help: e.help,
+          hidden: d.value,
+          placeholder: e.placeholder || I.value,
+          title: "",
+          type: "file",
+          onChange: le
+        }, U({ _: 2 }, [
+          l.$slots.icon && !d.value ? {
+            name: "before",
+            fn: p(() => [
+              B(l.$slots, "icon", {}, void 0, !0)
+            ]),
+            key: "0"
+          } : void 0,
+          d.value ? void 0 : {
+            name: "after",
+            fn: p(() => [
+              j(H, {
+                appearance: "tertiary",
+                class: "file-upload-button",
+                "data-testid": "file-upload-button",
+                disabled: e.disabled,
+                size: "small",
+                onClick: N
+              }, {
+                default: p(() => [
+                  M(v(t.value ? "Clear" : e.buttonText), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            key: "1"
+          }
+        ]), 1032, ["id", "accept", "class", "disabled", "error", "error-message", "help", "hidden", "placeholder"]))
+      ], 512), [
+        [ve, !d.value]
+      ]),
+      d.value ? (n(), m("div", ye, [
+        K("div", {
+          ref: "dropzone",
+          "aria-disabled": e.disabled ? "true" : void 0,
+          "aria-labelledby": e.label ? `file-upload-dropzone-label-${C.value}` : void 0,
+          class: D(["dropzone", {
+            dragging: z.value && !e.disabled,
+            disabled: e.disabled,
+            error: g.value,
+            "has-file": !!t.value
+          }]),
+          "data-testid": "file-upload-dropzone",
+          role: "button",
+          tabindex: e.disabled ? -1 : 0,
+          onClick: N
+        }, [
+          K("div", ke, [
+            B(l.$slots, "icon", {}, () => [
+              t.value ? (n(), w(G(me), {
+                key: 0,
+                decorative: ""
+              })) : (n(), w(G(pe), {
+                key: 1,
+                decorative: ""
+              }))
+            ], !0)
+          ]),
+          t.value ? (n(), m("span", Se, v(t.value), 1)) : (n(), m("span", $e, v(e.placeholder || I.value), 1)),
+          j(H, {
+            appearance: "tertiary",
+            class: "file-upload-button",
+            "data-testid": "file-upload-button",
+            disabled: e.disabled,
+            onClick: q(N, ["stop"])
+          }, {
+            default: p(() => [
+              M(v(t.value ? "Clear" : e.buttonText), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          B(l.$slots, "dropzone-footer", {}, void 0, !0)
+        ], 10, ze),
+        g.value || e.help ? (n(), m("p", {
+          key: 0,
+          class: D(["help-text", { error: g.value }])
+        }, v(g.value && (e.errorMessage || R.value || T.value) || e.help), 3)) : A("", !0)
+      ])) : A("", !0)
+    ], 16, he));
+  }
+});
+export {
+  De as default
+};

package/dist/kongponents.es109.js

@@ -0,0 +1,173 @@
+import { defineComponent as te, useCssVars as ae, ref as n, watch as m, useSlots as le, useTemplateRef as re, useAttrs as oe, computed as l, useId as P, onMounted as ie, nextTick as ne, createElementBlock as c, openBlock as o, normalizeClass as K, unref as v, createBlock as V, createCommentVNode as p, createElementVNode as W, createVNode as ue, mergeProps as R, createSlots as se, withCtx as x, createTextVNode as L, toDisplayString as I, renderSlot as b, withModifiers as T, Transition as de, Fragment as ce } from "vue";
+import fe from "./kongponents.es187.js";
+import me from "./kongponents.es48.js";
+import { KUI_ICON_SIZE_40 as O } from "./kongponents.es182.js";
+import ve from "./kongponents.es225.js";
+import he from "./kongponents.es226.js";
+const ge = ["id", "aria-describedby", "aria-invalid", "type", "value"], pe = ["aria-label"], be = ["id"], xe = /* @__PURE__ */ te({
+  inheritAttrs: !1,
+  __name: "KInput",
+  props: {
+    modelValue: { default: "" },
+    label: { default: "" },
+    labelAttributes: { default: () => ({}) },
+    help: { default: "" },
+    error: { type: Boolean },
+    errorMessage: { default: "" },
+    characterLimit: { default: null },
+    hasError: { type: Boolean },
+    type: { default: "text" },
+    showPasswordMaskToggle: { type: Boolean }
+  },
+  emits: ["input", "update:modelValue", "char-limit-exceeded"],
+  setup(t, { expose: H, emit: J }) {
+    ae((e) => ({
+      v468789b2: A.value,
+      v3da179ce: C.value
+    })), m(() => 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 }), m(() => 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 = J, i = le(), U = re("inputElement"), u = n(""), h = n(!1), k = n(0), { stripRequiredLabel: z } = fe(), r = oe(), M = l(() => (r == null ? void 0 : r.required) !== void 0 && String(r == null ? void 0 : r.required) !== "false"), D = P(), $ = l(() => r.id ? String(r.id) : D), q = P(), F = l(() => z(t.label, M.value)), Z = l(() => {
+      var e;
+      return !!((e = t.labelAttributes) != null && e.info || i["label-tooltip"]);
+    }), j = l({
+      get() {
+        return t.modelValue;
+      },
+      set(e) {
+        E({ target: { value: e } });
+      }
+    }), G = l(() => {
+      const e = { ...r };
+      return delete e.class, delete e.input, delete e.onInput, e;
+    }), s = l(() => {
+      var B, N;
+      const e = ((B = u.value) == null ? void 0 : B.toString().length) || 0, a = ((N = t.modelValue) == null ? void 0 : N.toString().length) || 0;
+      let d = e;
+      return !h.value && a && (d = a), !!t.characterLimit && d > t.characterLimit;
+    }), Q = l(() => {
+      var e, a;
+      return s.value ? h.value ? `${(e = u.value) == null ? void 0 : e.toString().length} / ${t.characterLimit}` : `${(a = t.modelValue) == null ? void 0 : a.toString().length} / ${t.characterLimit}` : "";
+    }), X = l(() => !s.value && !t.error && !t.hasError && !!(t.help || i.help)), g = l(() => s.value ? Q.value : (t.error || t.hasError) && t.errorMessage ? t.errorMessage : t.help);
+    m(s, (e, a) => {
+      e !== a && (y("char-limit-exceeded", {
+        value: u.value,
+        length: u.value.length,
+        characterLimit: t.characterLimit,
+        limitExceeded: e
+      }), k.value += 1);
+    }), m(j, (e, a) => {
+      e !== a && E({ target: { value: e } });
+    });
+    const E = (e) => {
+      var d;
+      const a = JSON.parse(JSON.stringify((d = e == null ? void 0 : e.target) == null ? void 0 : d.value));
+      Y(a);
+    }, Y = (e) => {
+      u.value = e, h.value = !0, y("input", e), y("update:modelValue", e);
+    }, _ = () => u.value || h.value ? u.value : t.modelValue;
+    m(() => t.error, (e, a) => {
+      e !== a && (k.value += 1);
+    });
+    const S = n(null), w = n(null), A = n(O), C = n(O), f = n(!1), ee = l(() => t.type === "password" && f.value ? "text" : t.type);
+    return ie(async () => {
+      var e, a;
+      await ne(), (e = S.value) != null && e.offsetWidth && (A.value = S.value.offsetWidth + "px"), (a = w.value) != null && a.offsetWidth && (C.value = w.value.offsetWidth + "px");
+    }), H({
+      input: U
+    }), (e, a) => (o(), c("div", {
+      class: K(["k-input", [v(r).class, { "input-error": s.value || t.error || t.hasError }]])
+    }, [
+      t.label ? (o(), V(me, R({
+        key: 0,
+        for: $.value
+      }, t.labelAttributes, { required: M.value }), se({
+        default: x(() => [
+          L(I(F.value) + " ", 1)
+        ]),
+        _: 2
+      }, [
+        Z.value ? {
+          name: "tooltip",
+          fn: x(() => [
+            b(e.$slots, "label-tooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["for", "required"])) : p("", !0),
+      W("div", {
+        class: K(["input-element-wrapper", { "has-before-content": i.before, "has-after-content": i.after || t.type === "password" && t.showPasswordMaskToggle }])
+      }, [
+        i.before ? (o(), c("div", {
+          key: 0,
+          ref_key: "beforeSlotElement",
+          ref: S,
+          class: "before-content-wrapper"
+        }, [
+          b(e.$slots, "before", {}, void 0, !0)
+        ], 512)) : p("", !0),
+        W("input", R({
+          id: $.value,
+          ref: "inputElement",
+          "aria-describedby": g.value || i.help ? v(q) : void 0,
+          "aria-invalid": t.error || t.hasError || s.value ? "true" : void 0,
+          class: "input",
+          type: ee.value
+        }, G.value, {
+          value: _(),
+          onInput: E
+        }), null, 16, ge),
+        i.after || t.type === "password" && t.showPasswordMaskToggle ? (o(), c("div", {
+          key: 1,
+          ref_key: "afterSlotElement",
+          ref: w,
+          class: "after-content-wrapper"
+        }, [
+          t.type === "password" && t.showPasswordMaskToggle ? (o(), c("button", {
+            key: 0,
+            "aria-label": `${f.value ? "Hide" : "Show"} value`,
+            class: "mask-value-toggle-button",
+            type: "button",
+            onClick: a[0] || (a[0] = T((d) => f.value = !f.value, ["stop"])),
+            onMousedown: a[1] || (a[1] = T(() => {
+            }, ["prevent"])),
+            onMouseup: a[2] || (a[2] = T(() => {
+            }, ["prevent"]))
+          }, [
+            f.value ? (o(), V(v(ve), {
+              key: 0,
+              decorative: ""
+            })) : (o(), V(v(he), {
+              key: 1,
+              decorative: ""
+            }))
+          ], 40, pe)) : b(e.$slots, "after", { key: 1 }, void 0, !0)
+        ], 512)) : p("", !0)
+      ], 2),
+      ue(de, {
+        mode: "out-in",
+        name: "kongponents-fade-transition"
+      }, {
+        default: x(() => [
+          g.value || i.help ? (o(), c("p", {
+            id: v(q),
+            key: String(k.value),
+            class: "help-text"
+          }, [
+            X.value ? b(e.$slots, "help", { key: 0 }, () => [
+              L(I(g.value), 1)
+            ], !0) : (o(), c(ce, { key: 1 }, [
+              L(I(g.value), 1)
+            ], 64))
+          ], 8, be)) : p("", !0)
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+});
+export {
+  xe as default
+};

package/dist/kongponents.es11.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((r) => (r.Default = "default", r.Error = "error", r.Search = "search", r.Kong = "kong", r))(e || {});
+export {
+  e as EmptyStateIconVariants
+};