@kiva/kv-components 4.8.5 → 5.0.0

package/dist/utils/printing.js

@@ -1,9 +1,10 @@
-import {
-  lockPrintSingleEl,
-  unlockPrintSingleEl
-} from "./chunk-B5J5WLAH.js";
-import "./chunk-YCNMJ4YV.js";
+function t(i) {
+  typeof window < "u" && i && (document.body.classList.add("print:tw-invisible", "print:tw-overflow-hidden"), i.classList.add("print:tw-visible", "print:tw-overflow-auto"));
+}
+function n(i) {
+  typeof window < "u" && i && (document.body.classList.remove("print:tw-invisible", "print:tw-overflow-hidden"), i.classList.remove("print:tw-visible", "print:tw-overflow-auto"));
+}
 export {
-  lockPrintSingleEl,
-  unlockPrintSingleEl
+  t as lockPrintSingleEl,
+  n as unlockPrintSingleEl
 };

package/dist/utils/scrollLock.js

@@ -1,13 +1,18 @@
-import {
-  lockScroll,
-  lockScrollSmallOnly,
-  unlockScroll,
-  unlockScrollSmallOnly
-} from "./chunk-HIY5IW65.js";
-import "./chunk-YCNMJ4YV.js";
+function o() {
+  typeof window < "u" && (document.body.style.overflow = "hidden");
+}
+function n() {
+  typeof window < "u" && (document.body.style.overflow = null);
+}
+function d() {
+  typeof window < "u" && document.body.classList.add("tw-overflow-hidden", "md:tw-overflow-auto");
+}
+function e() {
+  typeof window < "u" && document.body.classList.remove("tw-overflow-hidden", "md:tw-overflow-auto");
+}
 export {
-  lockScroll,
-  lockScrollSmallOnly,
-  unlockScroll,
-  unlockScrollSmallOnly
+  o as lockScroll,
+  d as lockScrollSmallOnly,
+  n as unlockScroll,
+  e as unlockScrollSmallOnly
 };

package/dist/utils/themeUtils.js

@@ -0,0 +1,13 @@
+const c = (r) => r.replace("h-1", "h1").replace("h-2", "h2").replace("h-3", "h3").replace("h-4", "h4").replace("h-5", "h5"), o = (r, e) => {
+  let a = `${r}-${e}`;
+  return a = a.replace("-DEFAULT", ""), a;
+}, p = (r) => r.split("").map((e, a) => e.toUpperCase() === e ? `${a !== 0 ? "-" : ""}${e.toLowerCase()}` : e).join(""), s = (r, e) => {
+  const a = { ...r };
+  return delete a[e], a;
+};
+export {
+  o as buildTailwindClassName,
+  c as headerNumberCase,
+  p as kebabCase,
+  s as removeObjectProperty
+};

package/dist/utils/throttle.js

@@ -1,7 +1,10 @@
-import {
-  throttle
-} from "./chunk-HV3AUBFT.js";
-import "./chunk-YCNMJ4YV.js";
+function c(e, o) {
+  let t = 0;
+  return function(...i) {
+    const n = /* @__PURE__ */ new Date();
+    n - t >= o && (e(...i), t = n);
+  };
+}
 export {
-  throttle
+  c as throttle
 };

package/dist/utils/touchEvents.js

@@ -1,11 +1,18 @@
-import {
-  isTargetElement,
-  offBodyTouchstart,
-  onBodyTouchstart
-} from "./chunk-S3MABILA.js";
-import "./chunk-YCNMJ4YV.js";
+function e(r) {
+  [...document.body.children].forEach((t) => t.addEventListener("touchstart", r));
+}
+function c(r) {
+  [...document.body.children].forEach((t) => t.removeEventListener("touchstart", r));
+}
+function a(r, t) {
+  const n = Array.isArray(t) ? t : [t];
+  for (let o = 0; o < n.length; o += 1)
+    if (n[o] === r.target || n[o].contains(r.target))
+      return !0;
+  return !1;
+}
 export {
-  isTargetElement,
-  offBodyTouchstart,
-  onBodyTouchstart
+  a as isTargetElement,
+  c as offBodyTouchstart,
+  e as onBodyTouchstart
 };

package/dist/utils/treemap.js

@@ -1,7 +1,61 @@
-import {
-  getTreemap
-} from "./chunk-MSMZIN54.js";
-import "./chunk-YCNMJ4YV.js";
+const H = (n) => Math.max(...n), R = (n) => Math.min(...n), v = (n, u) => n + u, g = (n) => Math.max(Math.round(n * 100) / 100, 0), E = ({ data: n, width: u, height: i }) => {
+  if (!u || typeof u != "number" || u < 0)
+    throw new Error("You need to specify the width of your treemap");
+  if (!i || typeof i != "number" || i < 0)
+    throw new Error("You need to specify the height of your treemap");
+  if (!n || !Array.isArray(n) || n.length === 0 || !n.every((t) => Object.prototype.hasOwnProperty.call(t, "value") && typeof t.value == "number" && t.value >= 0 && !Number.isNaN(t.value)))
+    throw new Error("You data must be in this format [{ value: 1 }, { value: 2 }], 'value' being a positive number");
+};
+function A({ data: n, width: u, height: i }) {
+  let t = {}, c = [];
+  function p(e, o) {
+    const r = e.reduce(v, 0), a = H(e), h = R(e);
+    return Math.max(o ** 2 * a / r ** 2, r ** 2 / (o ** 2 * h));
+  }
+  const l = () => t.totalHeight ** 2 > t.totalWidth ** 2 ? { value: t.totalWidth, vertical: !1 } : { value: t.totalHeight, vertical: !0 }, m = (e, o, r) => {
+    const a = e.reduce(v, 0) / o;
+    e.forEach((h) => {
+      const s = h / a, { xBeginning: x } = t, { yBeginning: B } = t;
+      let f;
+      r ? (f = {
+        x,
+        y: B,
+        width: a,
+        height: s,
+        data: c[t.data.length]
+      }, t.yBeginning += s) : (f = {
+        x,
+        y: B,
+        width: s,
+        height: a,
+        data: c[t.data.length]
+      }, t.xBeginning += s), t.data.push(f);
+    }), r ? (t.xBeginning += a, t.yBeginning -= o, t.totalWidth -= a) : (t.xBeginning -= o, t.yBeginning += a, t.totalHeight -= a);
+  }, M = (e, o, r) => {
+    const { vertical: a } = l();
+    m(e, r, a), m(o, r, a);
+  }, y = (e, o, r) => {
+    if (e.length === 1)
+      return M(o, e, r);
+    const a = [...o, e[0]];
+    return o.length === 0 || p(o, r) >= p(a, r) ? (e.shift(), y(e, a, r)) : (m(o, r, l().vertical), y(e, [], l().value));
+  };
+  E({ data: n, width: u, height: i }), t = {
+    data: [],
+    xBeginning: 0,
+    yBeginning: 0,
+    totalWidth: u,
+    totalHeight: i
+  }, c = n;
+  const b = n.map((e) => e.value).reduce(v, 0), W = n.map((e) => e.value * i * u / b);
+  return y(W, [], l().value), t.data.map((e) => ({
+    ...e,
+    x: g(e.x),
+    y: g(e.y),
+    width: g(e.width),
+    height: g(e.height)
+  }));
+}
 export {
-  getTreemap
+  A as getTreemap
 };

package/dist/vue/KvAccordionItem.js

@@ -0,0 +1,95 @@
+import { toRefs as p, ref as v, resolveComponent as s, openBlock as m, createElementBlock as u, createElementVNode as i, withModifiers as h, renderSlot as d, createVNode as c, normalizeClass as _, withCtx as g, withDirectives as b, vShow as x } from "vue";
+import { mdiChevronDown as k } from "@mdi/js";
+import y from "./KvExpandable.js";
+import C from "./KvMaterialIcon.js";
+import O from "../_virtual/_plugin-vue_export-helper.js";
+const B = {
+  components: {
+    KvMaterialIcon: C,
+    KvExpandable: y
+  },
+  props: {
+    /**
+     * Unique id. used for a11y
+    * */
+    id: {
+      type: String,
+      required: !0,
+      validator: (t) => t.length > 0 && !/\s/g.test(t)
+      // must be a valid html5 id
+    },
+    /**
+    	* Whether the body is shown initially
+    * */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether the accordion can be toggled
+    * */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "toggle"
+  ],
+  setup(t, { emit: n }) {
+    const {
+      open: a,
+      disabled: e
+    } = p(t), o = v(a.value);
+    return {
+      collapse: () => {
+        e.value || (o.value = !1);
+      },
+      expand: () => {
+        e.value || (o.value = !0);
+      },
+      isOpen: o,
+      mdiChevronDown: k,
+      toggle: () => {
+        e.value || (o.value = !o.value, n("toggle", { open: o.value }));
+      }
+    };
+  }
+}, D = { class: "tw-border-b tw-border-tertiary tw-relative last:tw-border-b-0" }, E = ["disabled", "aria-controls", "aria-expanded"], K = { class: "tw-flex-1" }, S = ["id", "aria-hidden"];
+function I(t, n, a, e, o, w) {
+  const l = s("kv-material-icon"), r = s("kv-expandable");
+  return m(), u("div", D, [
+    i("button", {
+      class: "tw-w-full tw-flex tw-justify-between tw-items-center tw-py-1.5 tw-px-0 tw-text-left disabled:tw-cursor-not-allowed disabled:tw-opacity-low hover:tw-text-action-highlight focus:tw-text-action-highlight",
+      disabled: a.disabled,
+      "aria-controls": `kv-accordion-${a.id}`,
+      "aria-expanded": e.isOpen ? "true" : "false",
+      onClick: n[0] || (n[0] = h((...f) => e.toggle && e.toggle(...f), ["prevent"]))
+    }, [
+      i("span", K, [
+        d(t.$slots, "header")
+      ]),
+      c(l, {
+        class: _(["tw-h-3 tw-w-3 tw-transition tw-transform tw-duration-500 tw-ease", { "tw-rotate-180": e.isOpen }]),
+        icon: e.mdiChevronDown
+      }, null, 8, ["class", "icon"])
+    ], 8, E),
+    c(r, null, {
+      default: g(() => [
+        b(i("div", {
+          id: `kv-accordion-${a.id}`,
+          "aria-hidden": e.isOpen ? "false" : "true"
+        }, [
+          d(t.$slots, "default")
+        ], 8, S), [
+          [x, e.isOpen]
+        ])
+      ]),
+      _: 3
+    })
+  ]);
+}
+const z = /* @__PURE__ */ O(B, [["render", I]]);
+export {
+  z as default
+};

package/dist/vue/KvActivityRow.js

@@ -0,0 +1,36 @@
+import r from "./KvUserAvatar.js";
+import { resolveComponent as o, openBlock as i, createElementBlock as a, createElementVNode as t, createVNode as c } from "vue";
+import l from "../_virtual/_plugin-vue_export-helper.js";
+const s = {
+  name: "KvActivityRow",
+  components: {
+    KvUserAvatar: r
+  },
+  props: {
+    activity: {
+      type: Object,
+      required: !0
+    }
+  }
+}, m = { class: "tw-flex tw-gap-x-1 tw-items-center" }, d = ["innerHTML"];
+function v(_, u, e, p, f, y) {
+  const n = o("KvUserAvatar");
+  return i(), a("div", m, [
+    t("div", null, [
+      c(n, {
+        "lender-name": e.activity.lenderName,
+        "lender-image-url": e.activity.lenderImage,
+        "is-small": !0
+      }, null, 8, ["lender-name", "lender-image-url"])
+    ]),
+    t("div", null, [
+      t("p", {
+        innerHTML: e.activity.text
+      }, null, 8, d)
+    ])
+  ]);
+}
+const K = /* @__PURE__ */ l(s, [["render", v]]);
+export {
+  K as default
+};

package/dist/vue/KvBorrowerImage.js

@@ -0,0 +1,140 @@
+import { openBlock as c, createElementBlock as h, normalizeStyle as m, createElementVNode as f, createCommentVNode as d } from "vue";
+import p from "../_virtual/_plugin-vue_export-helper.js";
+const $ = {
+  name: "KvBorrowerImage",
+  props: {
+    /**
+     * String to use as the alternative of this image for screen readers.
+     */
+    alt: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Number to use as the aspect ratio for this image. Defined as height / width.
+     */
+    aspectRatio: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Size properties of the default image to use as a fallback.
+     * Sample object:
+     * {
+     		width: 320,
+    		faceZoom: 50, // optional
+    	}
+     */
+    defaultImage: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * String of the hash of the image, used to build the image urls.
+     */
+    hash: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Array of image objects containing their size and their intended viewport display width.
+     * Sample image object:
+     * {
+     		width: 280, // width of the image at 1x
+    		viewSize: 320, // viewport width at which this size should be displayed
+    		faceZoom: 50, // optional
+    		}
+     */
+    images: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * The base path to source the image
+     */
+    photoPath: {
+      type: String,
+      required: !0
+    }
+  },
+  computed: {
+    // Get the full url for the fallback image
+    defaultUrl() {
+      return this.hash ? this.getImgUrl({
+        ...this.defaultImage,
+        height: this.defaultImage.width * this.aspectRatio
+      }) : "";
+    },
+    // Get the 'sizes' string for the source element
+    sizes() {
+      return this.hash ? this.images.map(({ width: t, viewSize: e }) => e ? `(min-width: ${e}px) ${t}px` : `${t}px`).join(", ") : "";
+    },
+    // Get the 'srcset' string for the source element
+    srcset() {
+      return this.hash ? this.images.map(({ width: t, faceZoom: e }) => {
+        const r = t * this.aspectRatio, s = {
+          width: t,
+          height: r,
+          faceZoom: e
+        }, a = {
+          width: t * 2,
+          height: r * 2,
+          faceZoom: e
+        };
+        return `${this.getSrcsetDef(s)}, ${this.getSrcsetDef(a)}`;
+      }).join(", ") : "";
+    }
+  },
+  methods: {
+    getKivaImageUrl({
+      base: t = "/",
+      width: e,
+      height: r,
+      square: s,
+      faceZoom: a,
+      hash: i,
+      format: u = "jpg"
+    } = {}) {
+      if (!i || !e && !r && !s && !a)
+        return "";
+      let l = "", n = "";
+      e === r ? s = e : (l = e ? `w${Math.ceil(e)}` : "", n = r ? `h${Math.ceil(r)}` : "");
+      const o = s ? `s${Math.ceil(s)}` : "", g = a ? `fz${Math.ceil(a)}` : "";
+      return `${t}${l}${n}${o}${g}/${i}.${u}`;
+    },
+    // Get the url for the loan image sized width by height
+    getImgUrl(t) {
+      return this.getKivaImageUrl({
+        ...t,
+        base: this.photoPath,
+        hash: this.hash
+      });
+    },
+    // Get a string to use in the srcset attribute as the definition for a single image size
+    getSrcsetDef(t) {
+      return `${this.getImgUrl(t)} ${t.width}w`;
+    }
+  }
+}, w = ["srcset", "sizes"], _ = ["src", "alt"];
+function y(t, e, r, s, a, i) {
+  return c(), h("picture", {
+    class: "tw-inline-block tw-relative tw-overflow-hidden tw-w-full tw-bg-black",
+    style: m(`padding-bottom: ${r.aspectRatio * 100}%;`)
+  }, [
+    f("source", {
+      srcset: i.srcset,
+      sizes: i.sizes
+    }, null, 8, w),
+    r.hash ? (c(), h("img", {
+      key: 0,
+      class: "tw-absolute tw-w-full tw-h-full tw-object-contain",
+      src: i.defaultUrl,
+      alt: r.alt,
+      loading: "lazy"
+    }, null, 8, _)) : d("", !0)
+  ], 4);
+}
+const z = /* @__PURE__ */ p($, [["render", y]]);
+export {
+  z as default
+};

package/dist/vue/KvButton.js

@@ -0,0 +1,184 @@
+import { toRefs as H, computed as o, ref as f, watch as I, onMounted as K, resolveComponent as N, openBlock as p, createBlock as v, resolveDynamicComponent as P, normalizeClass as w, withCtx as X, createElementVNode as m, createCommentVNode as Y, renderSlot as M } from "vue";
+import O from "./KvLoadingSpinner.js";
+import W from "../_virtual/_plugin-vue_export-helper.js";
+const q = {
+  components: {
+    KvLoadingSpinner: O
+  },
+  props: {
+    /**
+     * Use if linking to a Vue route
+     */
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Use if linking to an external link or old-stack page
+     */
+    href: {
+      type: String,
+      default: null
+    },
+    /**
+     * The behavior of the button when used in an HTML form.
+     * `button (default), submit, reset`
+     */
+    type: {
+      type: String,
+      default: "button",
+      validator(a) {
+        return ["button", "submit", "reset"].includes(a);
+      }
+    },
+    /**
+     * Appearance of the button
+     * `primary (default), secondary, danger, link, ghost`
+     */
+    variant: {
+      type: String,
+      default: "primary",
+      validator(a) {
+        return ["primary", "secondary", "link", "ghost", "danger", "caution"].includes(a);
+      }
+    },
+    /**
+     * State of the button
+     * `'' (default), active, disabled, loading`
+     */
+    state: {
+      type: String,
+      default: "",
+      validator(a) {
+        return ["", "active", "disabled", "loading"].includes(a);
+      }
+    }
+  },
+  emits: [
+    "click"
+  ],
+  setup(a, { emit: g }) {
+    const {
+      to: i,
+      href: e,
+      type: h,
+      variant: l,
+      state: n
+    } = H(a), y = o(() => {
+      switch (l.value) {
+        case "secondary":
+        case "caution":
+          return "black";
+        case "ghost":
+          return "brand";
+        default:
+          return "white";
+      }
+    }), k = o(() => {
+      let t = "";
+      switch (l.value) {
+        case "primary":
+        default:
+          t = "tw-text-primary-inverse", n.value === "active" ? t = `${t} tw-bg-action-highlight tw-border-action-highlight` : t = `${t} tw-bg-action hover:tw-bg-action-highlight tw-border-action hover:tw-border-action-highlight`;
+          break;
+        case "secondary":
+          t = "tw-text-action-highlight", n.value === "active" ? t = `${t} tw-bg-secondary` : t = `${t} tw-bg-primary hover:tw-bg-secondary tw-border-action-highlight`;
+          break;
+        case "danger":
+          t = "tw-text-danger", n.value === "active" ? t = `${t} tw-bg-danger-highlight tw-border-danger-highlight` : t = `${t} tw-bg-danger hover:tw-bg-danger-highlight tw-border-danger hover:tw-border-danger-highlight`;
+          break;
+        case "link":
+          t = "tw-bg-primary-inverse tw-text-primary-inverse", n.value === "active" ? t = `${t} tw-border-secondary tw-bg-action` : t = `${t} tw-border-action-highlight hover:tw-border-action hover:tw-bg-action`;
+          break;
+        case "ghost":
+          t = "tw-text-primary tw-border-transparent", n.value === "active" ? t = `${t} tw-bg-secondary` : t = `${t} tw-bg-primary hover:tw-bg-secondary`;
+          break;
+        case "caution":
+          t = "tw-text-caution", n.value === "active" ? t = `${t} tw-bg-caution-highlight tw-border-caution-highlight` : t = `${t} tw-bg-caution hover:tw-bg-caution-highlight tw-border-caution hover:tw-border-caution-highlight`;
+          break;
+      }
+      return t;
+    }), x = o(() => n.value === "disabled" || n.value === "loading"), C = o(() => i.value ? "router-link" : e.value ? "a" : "button"), _ = o(() => i.value || e.value ? null : h.value), s = f(null), c = f(null), $ = (t) => {
+      const r = document.createElement("span");
+      r.classList = `
+				tw-absolute
+				tw-inline-block
+				tw-h-2
+				tw-w-2
+				tw-rounded-full
+				tw-transform
+				tw--translate-x-1/2
+				tw--translate-y-1/2
+				tw-opacity-0
+				tw-animate-ripple
+				motion-reduce:tw-animate-none
+			`, r.dataset.testid = "ripple";
+      const B = ["secondary", "ghost"].includes(l.value) ? "tw-bg-tertiary" : "tw-bg-primary";
+      r.classList.add(B);
+      const L = t.detail !== 0, { clientX: R, clientY: E } = t;
+      if (s.value) {
+        const {
+          offsetLeft: D,
+          offsetTop: V,
+          offsetWidth: z,
+          offsetHeight: T
+        } = s.value;
+        let d, u;
+        L ? (d = `${R - D}px`, u = `${E - V}px`) : (d = `${z / 2}px`, u = `${T / 2}px`), r.style.setProperty("left", d), r.style.setProperty("top", u), c.value.appendChild(r), r.addEventListener("animationend", function j() {
+          c.value.removeChild(r), r.removeEventListener("animationend", j);
+        });
+      }
+    }, S = (t) => {
+      g("click", t), $(t);
+    }, b = () => {
+      e.value && (s.value.href = e.value);
+    };
+    return I(e, () => b()), K(() => b()), {
+      buttonRef: s,
+      buttonInnerRef: c,
+      computedClass: k,
+      computedType: _,
+      isDisabled: x,
+      loadingColor: y,
+      onClick: S,
+      tag: C
+    };
+  }
+};
+function A(a, g, i, e, h, l) {
+  const n = N("kv-loading-spinner");
+  return p(), v(P(e.tag), {
+    ref: "buttonRef",
+    to: i.to,
+    type: e.computedType,
+    disabled: e.isDisabled,
+    class: w(["tw-no-underline hover:tw-no-underline focus:tw-no-underline tw-inline-block", {
+      "tw-opacity-low": i.state === "disabled",
+      "tw-pointer-events-none": i.state === "loading" || e.isDisabled
+    }]),
+    onClick: e.onClick
+  }, {
+    default: X(() => [
+      m("span", {
+        ref: "buttonInnerRef",
+        class: w(["tw-inline-flex tw-w-full tw-justify-center tw-items-center tw-rounded tw-min-h-6 tw-relative tw-overflow-hidden tw-border tw-font-medium tw-text-center", e.computedClass])
+      }, [
+        i.state === "loading" ? (p(), v(n, {
+          key: 0,
+          class: "tw-absolute tw-w-full tw-text-center tw-z-0",
+          color: e.loadingColor
+        }, null, 8, ["color"])) : Y("", !0),
+        m("span", {
+          class: w(["tw-py-1 tw-px-3 tw-z-10", { "tw-invisible": i.state === "loading" }])
+        }, [
+          M(a.$slots, "default")
+        ], 2)
+      ], 2)
+    ]),
+    _: 3
+  }, 8, ["to", "type", "disabled", "class", "onClick"]);
+}
+const U = /* @__PURE__ */ W(q, [["render", A]]);
+export {
+  U as default
+};

package/dist/vue/KvCarousel.css

@@ -0,0 +1 @@
+@media (min-width: 64rem){.aside-controls-content[data-v-bb42b5ff]{width:82%}}.circle-slide[data-v-bb42b5ff]{width:auto}.circle-slide.is-selected[data-v-bb42b5ff]{opacity:1;transform:scale(1.2);max-width:300px}.circle-slide[data-v-bb42b5ff]:not(.is-selected){opacity:.5;transform:scale(.7)}.circle-carousel[data-v-bb42b5ff]{margin:0 auto}