@kong/kongponents 9.45.3 → 9.46.0

package/dist/kongponents.es111.js

@@ -0,0 +1,83 @@
+import { defineComponent as V, useAttrs as T, ref as B, useId as I, computed as c, resolveComponent as u, createElementBlock as K, openBlock as r, normalizeClass as b, createElementVNode as o, createVNode as C, createBlock as A, createCommentVNode as v, mergeProps as m, withCtx as f, withKeys as h, withModifiers as E, renderSlot as S, createTextVNode as N, toDisplayString as z } from "vue";
+const $ = ["id", "checked", "disabled"], L = ["aria-checked", "aria-labelledby", "tabindex"], j = {
+  inheritAttrs: !1
+}, M = /* @__PURE__ */ V({
+  ...j,
+  __name: "KInputSwitch",
+  props: {
+    modelValue: { type: Boolean },
+    size: { default: "small" },
+    label: { default: "" },
+    disabled: { type: Boolean },
+    disabledTooltipText: { default: "" },
+    tooltipAttributes: { default: () => ({}) },
+    labelBefore: { type: Boolean }
+  },
+  emits: ["change", "input", "update:modelValue"],
+  setup(e, { emit: k }) {
+    const d = k, a = T(), n = B(null), y = I(), i = c(() => a.id ? String(a.id) : y), p = c(() => {
+      if (e.disabled !== void 0 && e.disabled !== !1)
+        return a;
+      const t = Object.assign({}, a);
+      return delete t.class, delete t.disabled, t;
+    }), s = (t) => {
+      var l;
+      e.disabled || (t.type === "click" || t.type === "keyup" && t.code === "Space") && ((l = n.value) == null || l.click());
+    }, w = (t) => {
+      e.modelValue !== t.target.checked && (d("update:modelValue", t.target.checked), d("change", t.target.checked), d("input", t.target.checked));
+    };
+    return (t, l) => {
+      const g = u("KTooltip"), x = u("KLabel");
+      return r(), K("div", {
+        class: b(["k-input-switch", [e.size, { "label-before": e.labelBefore, disabled: e.disabled }, t.$attrs.class]])
+      }, [
+        o("input", m(p.value, {
+          id: i.value,
+          ref_key: "switchInputElement",
+          ref: n,
+          checked: e.modelValue,
+          disabled: e.disabled,
+          tabindex: "-1",
+          type: "checkbox",
+          onInput: w
+        }), null, 16, $),
+        C(g, m(e.disabled && e.disabledTooltipText ? e.tooltipAttributes : {}, {
+          class: "switch-control-wrapper",
+          text: e.disabled ? e.disabledTooltipText : ""
+        }), {
+          default: f(() => [
+            o("span", {
+              "aria-checked": e.modelValue,
+              "aria-labelledby": i.value,
+              class: b(["switch-control", { checked: e.modelValue, disabled: e.disabled }]),
+              "data-testid": "switch-control",
+              role: "checkbox",
+              tabindex: e.disabled ? -1 : 0,
+              onClick: s,
+              onKeydown: l[0] || (l[0] = h(E(() => {
+              }, ["prevent"]), ["space"])),
+              onKeyup: h(s, ["space"])
+            }, [...l[1] || (l[1] = [
+              o("span", { class: "switch-control-enabled-bar" }, null, -1)
+            ])], 42, L)
+          ]),
+          _: 1
+        }, 16, ["text"]),
+        e.label || t.$slots.label ? (r(), A(x, {
+          key: 0,
+          for: i.value
+        }, {
+          default: f(() => [
+            S(t.$slots, "label", {}, () => [
+              N(z(e.label), 1)
+            ], !0)
+          ]),
+          _: 3
+        }, 8, ["for"])) : v("", !0)
+      ], 2);
+    };
+  }
+});
+export {
+  M as default
+};

package/dist/kongponents.es113.js

@@ -0,0 +1,74 @@
+import { defineComponent as b, watch as h, useSlots as g, computed as k, useId as A, useTemplateRef as C, createElementBlock as T, openBlock as a, normalizeClass as v, renderSlot as n, createBlock as N, createCommentVNode as E, mergeProps as L, unref as o, withCtx as s, createVNode as y, createTextVNode as B, toDisplayString as x } from "vue";
+import I from "./kongponents.es24.js";
+/* empty css                 */
+import S from "./kongponents.es186.js";
+import { KUI_COLOR_TEXT_NEUTRAL as q } from "./kongponents.es182.js";
+const K = /* @__PURE__ */ b({
+  __name: "KLabel",
+  props: {
+    info: { default: "" },
+    required: { type: Boolean },
+    tooltipAttributes: { default: () => ({}) },
+    help: { default: "" }
+  },
+  setup(t) {
+    h(() => t.help, (e) => {
+      e && console.warn("KLabel: `help` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#klabel");
+    }, { immediate: !0 });
+    const c = g(), d = k(() => !!(t.help || t.info || c.tooltip)), l = A(), u = C("label"), m = [
+      /* interactive content */
+      "a[href]",
+      "audio[controls]",
+      "button",
+      "details",
+      "embed",
+      "iframe",
+      "img[usemap]",
+      'input:not([type="hidden"])',
+      "label",
+      "select",
+      "textarea",
+      "video[controls]",
+      /* elements having their own activation behavior */
+      // 'a[href]' - already included in interactive content
+      "area[href]"
+      // 'summary', - already covered as child of details
+    ].join(", ");
+    function f(e) {
+      return e.closest(m);
+    }
+    function p(e) {
+      const i = e.target, r = f(i);
+      r && r !== u.value || e.preventDefault();
+    }
+    return (e, i) => (a(), T("label", {
+      ref: "label",
+      class: v(["k-label", { required: t.required }])
+    }, [
+      n(e.$slots, "default", {}, void 0, !0),
+      d.value ? (a(), N(I, L({ key: 0 }, t.tooltipAttributes, {
+        class: "label-tooltip",
+        "tooltip-id": o(l),
+        onClick: p
+      }), {
+        content: s(() => [
+          n(e.$slots, "tooltip", {}, () => [
+            B(x(t.info || t.help), 1)
+          ], !0)
+        ]),
+        default: s(() => [
+          y(o(S), {
+            "aria-describedby": o(l),
+            class: "tooltip-trigger-icon",
+            color: `var(--kui-color-text-neutral, ${o(q)})`,
+            tabindex: "0"
+          }, null, 8, ["aria-describedby", "color"])
+        ]),
+        _: 3
+      }, 16, ["tooltip-id"])) : E("", !0)
+    ], 2));
+  }
+});
+export {
+  K as default
+};

package/dist/kongponents.es115.js

@@ -0,0 +1,168 @@
+import { defineComponent as U, useCssVars as q, computed as r, useSlots as F, useAttrs as R, useId as P, ref as k, watch as L, nextTick as D, onMounted as j, onBeforeUnmount as X, onUnmounted as Y, createElementBlock as f, createCommentVNode as n, openBlock as i, mergeProps as G, unref as m, createElementVNode as c, normalizeClass as h, createVNode as p, withCtx as C, renderSlot as s, createTextVNode as E, toDisplayString as $, createBlock as J } from "vue";
+import { FocusTrap as Q } from "./kongponents.es235.js";
+import { useTextSelection as Z } from "./kongponents.es193.js";
+import I from "./kongponents.es33.js";
+import _ from "./kongponents.es176.js";
+import { KUI_COLOR_TEXT_NEUTRAL as ee } from "./kongponents.es182.js";
+import { normalizeSize as V } from "./kongponents.es184.js";
+const te = ["aria-label"], ae = {
+  key: 0,
+  class: "modal-header"
+}, oe = {
+  key: 0,
+  class: "modal-title"
+}, le = { class: "modal-footer" }, ne = { class: "footer-actions" }, me = /* @__PURE__ */ U({
+  inheritAttrs: !1,
+  __name: "KModal",
+  props: {
+    visible: { type: Boolean },
+    title: { default: "" },
+    actionButtonText: { default: "Submit" },
+    actionButtonAppearance: { default: "primary" },
+    actionButtonDisabled: { type: Boolean },
+    hideCancelButton: { type: Boolean },
+    cancelButtonText: { default: "Cancel" },
+    cancelButtonAppearance: { default: "tertiary" },
+    cancelButtonDisabled: { type: Boolean },
+    tabbableOptions: { default: () => ({}) },
+    maxWidth: { default: "500px" },
+    maxHeight: { default: "calc(100vh - 200px)" },
+    closeOnBackdropClick: { type: Boolean },
+    closeOnEscape: { type: Boolean, default: !0 },
+    hideCloseIcon: { type: Boolean },
+    fullScreen: { type: Boolean },
+    inputAutofocus: { type: Boolean },
+    zIndex: { default: 1100 }
+  },
+  emits: ["proceed", "cancel"],
+  setup(t, { emit: z }) {
+    q((e) => ({
+      v5582ddaa: e.zIndex,
+      v1ae56e5d: H.value,
+      ee977890: K.value
+    }));
+    const N = z, v = F(), w = R(), W = Z(), A = `k-modal-${P()}-overflow-hidden`, d = k(null), S = k(null), H = r(() => t.fullScreen && !v.content ? "95%" : V(t.maxWidth)), K = r(() => t.fullScreen && !v.content ? "95vh" : V(t.maxHeight)), M = r(() => {
+      const e = Object.assign({}, w);
+      return delete e.class, e;
+    }), g = r(() => !!t.title || !!v.title || !t.hideCloseIcon), O = (e) => {
+      t.visible && t.closeOnEscape && e.key === "Escape" && T(!0);
+    }, T = (e = !1, a) => {
+      var o, l;
+      (e || (l = (o = a == null ? void 0 : a.target) == null ? void 0 : o.classList) != null && l.contains("modal-backdrop") && t.closeOnBackdropClick && !W.text.value) && N("cancel");
+    }, b = async (e) => {
+      var a, o;
+      e ? (await D(), await new Promise((l) => setTimeout(l, 0)), (a = d.value) == null || a.activate()) : (o = d.value) == null || o.deactivate();
+    }, y = (e) => {
+      typeof document < "u" && (e ? document == null || document.addEventListener("keydown", O) : document == null || document.removeEventListener("keydown", O));
+    }, x = () => {
+      var a, o, l;
+      const e = (l = (o = (a = d.value) == null ? void 0 : a.$el) == null ? void 0 : o.querySelector(".modal-content")) == null ? void 0 : l.querySelectorAll("input");
+      e != null && e.length && Array.from(e).every((B) => !B.disabled && !B.readOnly ? (B.focus(), !1) : !0);
+    };
+    L(() => t.visible, async (e) => {
+      var a, o;
+      e ? (await b(!0), t.inputAutofocus && x(), y(!0)) : (await b(!1), y(!1)), typeof document < "u" && ((o = (a = document == null ? void 0 : document.body) == null ? void 0 : a.classList) == null || o.toggle(A, e));
+    }, { immediate: !0 }), L(() => t.inputAutofocus, async (e) => {
+      e && (await D(), x());
+    });
+    const u = k(null);
+    return j(() => {
+      typeof document < "u" && (u.value = document.createElement("style"), u.value.textContent = `body.${A} { overflow: hidden; }`, document.head.appendChild(u.value));
+    }), X(async () => {
+      await b(!1), y(!1);
+    }), Y(() => {
+      var e;
+      (e = u.value) == null || e.remove();
+    }), (e, a) => t.visible ? (i(), f("div", G({
+      key: 0,
+      "aria-label": t.title,
+      "aria-modal": "true",
+      class: ["k-modal", [m(w).class]]
+    }, M.value, { role: "dialog" }), [
+      c("div", {
+        ref_key: "modalWrapperElement",
+        ref: S,
+        class: h(["modal-backdrop", { "modal-full-screen": t.fullScreen && !e.$slots.content }]),
+        onClick: a[3] || (a[3] = (o) => T(!1, o))
+      }, [
+        p(m(Q), {
+          ref_key: "focusTrapElement",
+          ref: d,
+          active: !1,
+          "fallback-focus": () => S.value,
+          "tabbable-options": t.tabbableOptions
+        }, {
+          default: C(() => [
+            c("div", {
+              class: h(["modal-container", { "custom-content": e.$slots.content }]),
+              tabindex: "-1"
+            }, [
+              s(e.$slots, "content", {}, () => [
+                g.value ? (i(), f("div", ae, [
+                  t.title || e.$slots.title ? (i(), f("div", oe, [
+                    s(e.$slots, "title", {}, () => [
+                      E($(t.title), 1)
+                    ], !0)
+                  ])) : n("", !0),
+                  t.hideCloseIcon ? n("", !0) : (i(), f("button", {
+                    key: 1,
+                    "aria-label": "Close",
+                    class: "close-icon",
+                    "data-testid": "modal-close-icon",
+                    type: "button",
+                    onClick: a[0] || (a[0] = (o) => e.$emit("cancel"))
+                  }, [
+                    p(m(_), {
+                      color: `var(--kui-color-text-neutral, ${m(ee)})`,
+                      decorative: ""
+                    }, null, 8, ["color"])
+                  ]))
+                ])) : n("", !0),
+                c("div", {
+                  class: h(["modal-content", { "no-header": !g.value }])
+                }, [
+                  s(e.$slots, "default", {}, void 0, !0)
+                ], 2),
+                c("div", le, [
+                  s(e.$slots, "footer", {}, () => [
+                    c("div", ne, [
+                      s(e.$slots, "footer-actions", {}, () => [
+                        t.hideCancelButton ? n("", !0) : (i(), J(I, {
+                          key: 0,
+                          appearance: t.cancelButtonAppearance,
+                          "data-testid": "modal-cancel-button",
+                          disabled: t.cancelButtonDisabled,
+                          onClick: a[1] || (a[1] = (o) => e.$emit("cancel"))
+                        }, {
+                          default: C(() => [
+                            E($(t.cancelButtonText), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["appearance", "disabled"])),
+                        p(I, {
+                          appearance: t.actionButtonAppearance,
+                          "data-testid": "modal-action-button",
+                          disabled: t.actionButtonDisabled,
+                          onClick: a[2] || (a[2] = (o) => e.$emit("proceed"))
+                        }, {
+                          default: C(() => [
+                            E($(t.actionButtonText), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["appearance", "disabled"])
+                      ], !0)
+                    ])
+                  ], !0)
+                ])
+              ], !0)
+            ], 2)
+          ]),
+          _: 3
+        }, 8, ["fallback-focus", "tabbable-options"])
+      ], 2)
+    ], 16, te)) : n("", !0);
+  }
+});
+export {
+  me as default
+};

package/dist/kongponents.es117.js

@@ -0,0 +1,206 @@
+import { defineComponent as C, ref as $, computed as w, watch as S, nextTick as T, onMounted as V, onBeforeUnmount as K, onUnmounted as A, createElementBlock as d, createCommentVNode as c, openBlock as i, withKeys as k, createElementVNode as o, normalizeClass as E, renderSlot as n, createTextVNode as a, toDisplayString as s, createVNode as r, unref as v, withCtx as y } from "vue";
+import p from "./kongponents.es33.js";
+import D from "./kongponents.es200.js";
+import { KUI_COLOR_TEXT_DECORATIVE_AQUA as H } from "./kongponents.es182.js";
+const _ = ["aria-label"], O = { class: "k-modal-fullscreen-body-header" }, M = {
+  key: 0,
+  class: "body-header"
+}, N = {
+  key: 1,
+  class: "body-header-description"
+}, U = { class: "k-modal-fullscreen-body" }, L = { class: "k-modal-fullscreen-header" }, q = {
+  "aria-level": "2",
+  class: "k-modal-fullscreen-header-description",
+  role: "heading"
+}, F = { class: "k-modal-fullscreen-title" }, I = { class: "header-icon" }, R = { class: "header-content" }, j = { class: "k-modal-fullscreen-action" }, z = { class: "k-modal-fullscreen-action-buttons" }, Q = {
+  key: 0,
+  class: "k-modal-fullscreen-footer"
+}, W = { class: "k-modal-fullscreen-action" }, X = { class: "k-modal-fullscreen-action-buttons" }, Z = /* @__PURE__ */ C({
+  __name: "KModalFullscreen",
+  props: {
+    /**
+    * Set the text of the title, if using title slot
+    */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+    * Set the title in the body
+    */
+    bodyHeader: {
+      type: String,
+      default: ""
+    },
+    /**
+    * Text to display as a description of the body's title
+    */
+    bodyHeaderDescription: {
+      type: String,
+      default: ""
+    },
+    /**
+    *  Pass whether or not the modal should be visible
+    */
+    isVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+    * Set the text of the close/cancel button
+    */
+    cancelButtonText: {
+      type: String,
+      default: "Cancel"
+    },
+    /**
+    * Set the text of the action/proceed button
+    */
+    actionButtonText: {
+      type: String,
+      default: "Save"
+    },
+    /**
+    * Set the appearance of the action/proceed button
+    */
+    actionButtonAppearance: {
+      type: String,
+      default: "primary"
+    },
+    /**
+    * Set the appearance of the close/cancel button
+    */
+    cancelButtonAppearance: {
+      type: String,
+      default: "secondary"
+    },
+    /**
+    * @deprecated
+    * Pass the type of icon for the header on the left
+    */
+    iconString: {
+      type: String,
+      default: "kong"
+    }
+  },
+  emits: ["canceled", "proceed"],
+  setup(t, { emit: g }) {
+    const u = t, h = g, f = $(null), B = w(() => !!u.isVisible);
+    S(() => u.isVisible, async () => {
+      typeof document > "u" || (B.value ? (document.body.style.overflow = "hidden", await T(), f.value && f.value.focus()) : document.body.style.overflow = "");
+    });
+    const b = (e) => {
+      u.isVisible && (e.keyCode === 27 ? m() : e.keyCode === 13 && l());
+    }, m = () => {
+      h("canceled");
+    }, l = () => {
+      h("proceed");
+    };
+    return V(() => {
+      document.addEventListener("keydown", b), console.warn(`The Kongponents 'KModalFullscreen' component is deprecated and will be removed in the next major release.
+We suggest using 'KModal' component instead.
+Docs: https://kongponents.konghq.com/components/modal.html#fullscreen`);
+    }), K(() => {
+      document.removeEventListener("keydown", b);
+    }), A(() => {
+      document.body.style.overflow = "";
+    }), (e, x) => t.isVisible ? (i(), d("div", {
+      key: 0,
+      "aria-label": t.title,
+      "aria-modal": "true",
+      class: "k-modal-fullscreen isOpen",
+      role: "dialog",
+      onKeyup: [
+        k(l, ["enter"]),
+        k(m, ["esc"])
+      ]
+    }, [
+      o("div", {
+        ref_key: "modalBodyContent",
+        ref: f,
+        class: E(["k-modal-fullscreen-dialog", { "has-footer": e.$slots["footer-content"] }]),
+        tabindex: "0"
+      }, [
+        o("div", O, [
+          e.$slots["body-header"] || t.bodyHeader ? (i(), d("div", M, [
+            n(e.$slots, "body-header", {}, () => [
+              a(s(t.bodyHeader), 1)
+            ], !0)
+          ])) : c("", !0),
+          e.$slots["body-header-description"] || t.bodyHeaderDescription ? (i(), d("div", N, [
+            n(e.$slots, "body-header-description", {}, () => [
+              a(s(t.bodyHeaderDescription), 1)
+            ], !0)
+          ])) : c("", !0)
+        ]),
+        o("div", U, [
+          n(e.$slots, "default", {}, void 0, !0)
+        ]),
+        o("div", L, [
+          o("div", q, [
+            o("div", F, [
+              o("span", I, [
+                n(e.$slots, "header-icon", {}, () => [
+                  r(v(D), { color: v(H) }, null, 8, ["color"])
+                ], !0)
+              ]),
+              o("span", R, [
+                n(e.$slots, "header-content", {}, () => [
+                  a(s(t.title), 1)
+                ], !0)
+              ])
+            ]),
+            o("div", j, [
+              o("div", z, [
+                n(e.$slots, "action-buttons", {}, () => [
+                  r(p, {
+                    appearance: t.cancelButtonAppearance,
+                    class: "cancel-button",
+                    onClick: m
+                  }, {
+                    default: y(() => [
+                      a(s(t.cancelButtonText), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["appearance"]),
+                  r(p, {
+                    appearance: t.actionButtonAppearance,
+                    class: "proceed-button",
+                    onClick: l
+                  }, {
+                    default: y(() => [
+                      a(s(t.actionButtonText), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["appearance"])
+                ], !0)
+              ])
+            ])
+          ])
+        ]),
+        e.$slots["footer-content"] ? (i(), d("div", Q, [
+          n(e.$slots, "footer-content", {}, void 0, !0),
+          o("div", W, [
+            o("div", X, [
+              n(e.$slots, "action-buttons", {}, () => [
+                r(p, {
+                  appearance: t.actionButtonAppearance,
+                  class: "proceed-button",
+                  onClick: l
+                }, {
+                  default: y(() => [
+                    a(s(t.actionButtonText), 1)
+                  ]),
+                  _: 1
+                }, 8, ["appearance"])
+              ], !0)
+            ])
+          ])
+        ])) : c("", !0)
+      ], 2)
+    ], 40, _)) : c("", !0);
+  }
+});
+export {
+  Z as default
+};