@kiva/kv-components 8.17.0 → 8.18.0

package/dist/utils/useTypeaheadSearch.js

@@ -1,36 +1,37 @@
-import { ref as o, watch as m, computed as h } from "vue";
-import v from "./typeaheadSearchEngine.js";
-import { GIFT_SUGGESTIONS as E, MAX_PER_GROUP as S, SECTION_ORDER as g } from "./typeaheadSearchConfig.js";
-const R = ["activity", "city_state", "loanTags", "state", "loanLimit"];
-function _(u) {
-  return Object.keys(u).some((n) => R.includes(n));
+import { ref as o, watch as g, computed as v, unref as E } from "vue";
+import S from "./typeaheadSearchEngine.js";
+import { GIFT_SUGGESTIONS as R, MAX_PER_GROUP as O, SECTION_ORDER as m } from "./typeaheadSearchConfig.js";
+const _ = ["activity", "city_state", "loanTags", "state", "loanLimit"];
+function T(u) {
+  return Object.keys(u).some((a) => _.includes(a));
 }
 function y(u) {
-  return u && _(u) ? "/lend" : "/lend/filter";
+  return u && T(u) ? "/lend" : "/lend/filter";
 }
-function w(u, n) {
-  const l = new v(), s = o(""), a = o([]), i = o(-1);
-  m(u, (e) => {
-    l.reset([...e ?? [], ...E]);
-  }, { immediate: !0 }), m(s, async (e) => {
-    if (i.value = -1, !e) {
-      a.value = [];
+function I(u, a) {
+  const i = new S(), n = o(""), s = o([]), l = o(-1);
+  g(u, (e) => {
+    i.reset([...e ?? [], ...R]);
+  }, { immediate: !0 }), g(n, async (e) => {
+    if (l.value = -1, !e) {
+      s.value = [];
       return;
     }
-    a.value = await l.search(e);
+    s.value = await i.search(e);
   });
-  const d = h(() => {
+  const p = v(() => {
     const e = /* @__PURE__ */ new Map();
-    return a.value.forEach((t) => {
-      const r = e.get(t.group) ?? [];
-      r.length < S && r.push(t), e.set(t.group, r);
-    }), [...e.keys()].sort((t, r) => g.indexOf(t) - g.indexOf(r)).map((t) => ({ group: t, items: e.get(t) ?? [] }));
+    return s.value.forEach((r) => {
+      const t = e.get(r.group) ?? [];
+      t.length < O && t.push(r), e.set(r.group, t);
+    }), [...e.keys()].sort((r, t) => m.indexOf(r) - m.indexOf(t)).map((r) => ({ group: r, items: e.get(r) ?? [] }));
   });
-  function p(e) {
+  function d(e) {
+    const r = E(a);
     if (typeof e == "string") {
       const f = { queryString: e };
       return {
-        url: `${n}${y(f)}`,
+        url: `${r}${y(f)}`,
         query: f,
         suggestion: null,
         term: e
@@ -41,24 +42,24 @@ function w(u, n) {
         url: e.url,
         query: null,
         suggestion: e,
-        term: s.value
+        term: n.value
       };
-    const [t, r] = (e.query ?? "").split("="), c = t ? { [t]: r } : null;
+    const [t, h] = (e.query ?? "").split("="), c = t ? { [t]: h } : null;
     return {
-      url: `${n}${y(c)}`,
+      url: `${r}${y(c)}`,
       query: c,
       suggestion: e,
-      term: s.value
+      term: n.value
     };
   }
   return {
-    term: s,
-    rawResults: a,
-    activeIndex: i,
-    groupedResults: d,
-    resolveSubmit: p
+    term: n,
+    rawResults: s,
+    activeIndex: l,
+    groupedResults: p,
+    resolveSubmit: d
   };
 }
 export {
-  w as useTypeaheadSearch
+  I as useTypeaheadSearch
 };

package/dist/vue/KvImageUpload.css

@@ -0,0 +1 @@
+.image-upload-icon[data-v-ea802cf6]{background-color:#ffffffbf;border-radius:9px;display:flex;align-items:center;justify-content:center;border-radius:.5rem}.image-upload-icon--circle[data-v-ea802cf6]{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}

package/dist/vue/KvImageUpload.js

@@ -0,0 +1,72 @@
+import p from "./KvImageUpload2.js";
+import { resolveComponent as f, openBlock as i, createElementBlock as n, createElementVNode as a, normalizeClass as l, normalizeStyle as g, renderSlot as b, createVNode as c, withModifiers as w, createCommentVNode as m } from "vue";
+import "./KvImageUpload.css";
+import u from "../_virtual/_plugin-vue_export-helper.js";
+const v = { class: "tw-flex tw-flex-col" }, h = ["src", "alt"], C = ["accept", "aria-label"];
+function k(d, t, s, e, I, _) {
+  const r = f("kv-material-icon");
+  return i(), n("div", v, [
+    a("div", {
+      class: l(["kv-image-upload tw-relative", e.shapeClass]),
+      style: g(e.containerStyle)
+    }, [
+      e.previewImage ? (i(), n("img", {
+        key: 0,
+        src: e.previewImage,
+        alt: s.imageAlt,
+        class: l(["tw-w-full tw-h-full tw-object-cover", e.shapeClass])
+      }, null, 10, h)) : b(d.$slots, "fallback-image", { key: 1 }, () => [
+        a("div", {
+          class: l(["kv-image-upload__placeholder tw-w-full tw-h-full tw-bg-eco-green-1 tw-p-0.5", e.shapeClass])
+        }, [
+          a("div", {
+            class: l(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-0.5 tw-w-full tw-h-full tw-border-2 tw-border-dashed tw-border-black", e.shapeClass])
+          }, [
+            c(r, {
+              icon: e.mdiCameraPlusOutline,
+              class: "tw-w-3.5"
+            }, null, 8, ["icon"]),
+            t[3] || (t[3] = a("span", { class: "tw-text-label" }, " Add a photo ", -1))
+          ], 2)
+        ], 2)
+      ], !0),
+      a("input", {
+        ref: "fileInput",
+        type: "file",
+        accept: e.acceptAttr,
+        "aria-label": e.inputLabel,
+        class: "tw-absolute tw-inset-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer",
+        onChange: t[0] || (t[0] = (...o) => e.handleFileChange && e.handleFileChange(...o))
+      }, null, 40, C),
+      e.previewImage || s.showEditIcon ? (i(), n("button", {
+        key: 2,
+        class: l(["image-upload-icon edit-icon tw-absolute tw-bottom-1 tw-right-1 tw-p-1 tw-z-10", { "image-upload-icon--circle": e.isCircle }]),
+        type: "button",
+        "aria-hidden": "true",
+        tabindex: "-1",
+        onClick: t[1] || (t[1] = w((...o) => e.openFileInput && e.openFileInput(...o), ["stop"]))
+      }, [
+        c(r, {
+          icon: e.mdiPencil,
+          class: "tw-w-2"
+        }, null, 8, ["icon"])
+      ], 2)) : m("", !0),
+      e.previewImage ? (i(), n("button", {
+        key: 3,
+        class: l(["image-upload-icon remove-icon tw-absolute tw-top-1 tw-right-1 tw-p-1 tw-z-10", { "image-upload-icon--circle": e.isCircle }]),
+        type: "button",
+        "aria-label": "Remove Image",
+        onClick: t[2] || (t[2] = w((...o) => e.removeImage && e.removeImage(...o), ["stop"]))
+      }, [
+        c(r, {
+          icon: e.mdiClose,
+          class: "tw-w-2"
+        }, null, 8, ["icon"])
+      ], 2)) : m("", !0)
+    ], 6)
+  ]);
+}
+const A = /* @__PURE__ */ u(p, [["render", k], ["__scopeId", "data-v-ea802cf6"]]);
+export {
+  A as default
+};

package/dist/vue/KvImageUpload2.js

@@ -0,0 +1,150 @@
+import { toRefs as S, ref as u, watch as x, computed as l } from "vue";
+import { mdiPencil as F, mdiClose as w, mdiCameraPlusOutline as I } from "@mdi/js";
+import C from "./KvMaterialIcon.js";
+import { DEFAULT_ACCEPTED_IMAGE_TYPES as b, validateImageFile as R, cropResizeImageToDataUrl as T } from "../utils/imageUtils.js";
+const U = {
+  components: {
+    KvMaterialIcon: C
+  },
+  props: {
+    /**
+     * URL of an initial image to preview.
+     */
+    imageUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Target crop aspect ratio (width / height). `1` = square, `4 / 3` ≈ 1.333.
+     */
+    aspectRatio: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Preview shape. `square (default), circle`
+     */
+    shape: {
+      type: String,
+      default: "square",
+      validator(e) {
+        return ["square", "circle"].includes(e);
+      }
+    },
+    /**
+     * Maximum allowed file size, in megabytes.
+     */
+    maxSizeMb: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Output resolution used when generating the preview.
+     */
+    maxDimension: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * Maximum rendered preview size, in pixels (height; width follows aspectRatio).
+     * Note: the parent element must supply a width; this component sets only
+     * max-width/max-height + aspect-ratio and will not stretch to fill a sizeless container.
+     */
+    previewSize: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * Accepted MIME types for both the file input and validation.
+     */
+    acceptedFileTypes: {
+      type: Array,
+      default: () => [...b]
+    },
+    /**
+     * Whether to show the edit (pencil) affordance in the blank state, before an image is
+     * selected. Off by default. Once an image is present the edit icon always shows
+     * (bottom-right, below the remove icon), regardless of this prop.
+     */
+    showEditIcon: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Alt text for the preview image.
+     */
+    imageAlt: {
+      type: String,
+      default: "Image preview"
+    }
+  },
+  emits: [
+    /**
+     * Emitted with `{ file }` when a valid file is selected or dropped.
+     */
+    "file-uploaded",
+    /**
+     * Emitted when the current image is removed.
+     */
+    "file-removed",
+    /**
+     * Emitted with `{ type, message }` when validation or processing fails.
+     */
+    "file-error"
+  ],
+  setup(e, { emit: r }) {
+    const { imageUrl: c } = S(e), a = u(c.value || ""), s = u(null);
+    x(c, (t) => {
+      a.value = t || "";
+    });
+    const m = l(() => e.shape === "circle"), d = l(() => m.value ? "tw-rounded-full" : "tw-rounded"), p = l(() => e.acceptedFileTypes.join(",")), f = l(() => a.value ? "Change image" : "Upload image"), g = l(() => ({
+      aspectRatio: String(e.aspectRatio),
+      maxHeight: `${e.previewSize}px`,
+      maxWidth: `${e.previewSize * e.aspectRatio}px`
+    })), v = () => {
+      var t;
+      (t = s.value) == null || t.click();
+    }, y = () => {
+      a.value = "", r("file-removed");
+    }, h = async (t) => {
+      const { valid: o, error: i } = R(t, {
+        maxSizeMb: e.maxSizeMb,
+        acceptedFileTypes: e.acceptedFileTypes
+      });
+      if (!o && i) {
+        r("file-error", i);
+        return;
+      }
+      try {
+        a.value = await T(t, {
+          aspectRatio: e.aspectRatio,
+          maxDimension: e.maxDimension
+        }), r("file-uploaded", { file: t });
+      } catch {
+        r("file-error", { type: "other", message: "Failed to read file" });
+      }
+    };
+    return {
+      mdiPencil: F,
+      mdiClose: w,
+      mdiCameraPlusOutline: I,
+      fileInput: s,
+      previewImage: a,
+      isCircle: m,
+      shapeClass: d,
+      acceptAttr: p,
+      inputLabel: f,
+      containerStyle: g,
+      openFileInput: v,
+      removeImage: y,
+      handleFileChange: (t) => {
+        var n;
+        const o = t.target, i = (n = o.files) == null ? void 0 : n[0];
+        i && (h(i), o.value = "");
+      }
+    };
+  }
+};
+export {
+  U as default
+};

package/dist/vue/KvPieChartV2.vue.d.ts

@@ -115,8 +115,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>> & Readonly<{}>, {
     values: KvPieChartV2Item[];
     loading: boolean;
-    initialDelay: number;
     strokeWidth: number;
+    initialDelay: number;
     unit: PieChartUnit;
     shownSegments: number;
     segmentGap: number;

package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic.css

@@ -1 +1 @@
-.header-fade-enter-active[data-v-eadac17f]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-eadac17f]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-eadac17f],.header-fade-leave-to[data-v-eadac17f]{opacity:0}.header-fade-leave[data-v-eadac17f],.header-fade-enter-to[data-v-eadac17f]{opacity:1}.bg-opacity-50[data-v-eadac17f]{background-color:rgba(var(--bg-action-highlight),.5)}
+.header-fade-enter-active[data-v-0d2a85d2]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-0d2a85d2]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-0d2a85d2],.header-fade-leave-to[data-v-0d2a85d2]{opacity:0}.header-fade-leave[data-v-0d2a85d2],.header-fade-enter-to[data-v-0d2a85d2]{opacity:1}.bg-opacity-50[data-v-0d2a85d2]{background-color:rgba(var(--bg-action-highlight),.5)}

package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic.js

@@ -1,47 +1,47 @@
-import f from "./KvWwwHeaderBasic2.js";
-import { resolveComponent as l, openBlock as d, createBlock as u, withCtx as a, createElementVNode as s, normalizeStyle as m, createVNode as r, Transition as g, withDirectives as b, vShow as v, normalizeClass as k, resolveDynamicComponent as y, withModifiers as M } from "vue";
+import h from "./KvWwwHeaderBasic2.js";
+import { resolveComponent as l, openBlock as m, createBlock as u, withCtx as r, createElementVNode as s, normalizeStyle as d, createVNode as a, Transition as g, withDirectives as b, vShow as v, normalizeClass as k, resolveDynamicComponent as y, withModifiers as M } from "vue";
 import "./KvWwwHeaderBasic.css";
-import C from "../../_virtual/_plugin-vue_export-helper.js";
-function I(t, o, e, n, L, D) {
-  const w = l("link-bar"), h = l("kv-page-container"), c = l("kv-theme-provider");
-  return d(), u(c, {
+import I from "../../_virtual/_plugin-vue_export-helper.js";
+function L(t, o, n, e, C, D) {
+  const w = l("link-bar"), c = l("kv-page-container"), f = l("kv-theme-provider");
+  return m(), u(f, {
     tag: "div",
     class: "tw-bg-primary"
   }, {
-    default: a(() => [
+    default: r(() => [
       s("nav", {
         ref: "navRef",
-        class: "tw-font-medium tw-relative tw-border-b tw-border-tertiary",
-        style: m({ minHeight: n.MIN_HEADER_HEIGHT })
+        class: "tw-font-medium tw-relative",
+        style: d({ minHeight: e.MIN_HEADER_HEIGHT })
       }, [
-        r(h, null, {
-          default: a(() => [
-            r(g, { name: "header-fade" }, {
-              default: a(() => [
-                b(r(w, {
-                  "logged-in": e.loggedIn,
-                  "basket-count": e.basketCount,
-                  balance: e.balance,
-                  "user-id": e.userId,
-                  "is-borrower": e.isBorrower,
-                  "is-trustee": e.isTrustee,
-                  "lender-name": e.lenderName,
-                  "lender-image-url": e.lenderImageUrl,
-                  "is-user-data-loading": e.isUserDataLoading,
-                  "is-basket-data-loading": e.isBasketDataLoading,
-                  "show-m-g-upsell-link": e.showMGUpsellLink,
-                  "login-url": e.loginUrl,
-                  "my-dashboard-url": e.myDashboardUrl,
-                  "countries-not-lent-to-url": e.countriesNotLentToUrl,
-                  "app-origin": e.appOrigin,
-                  "search-suggestions": e.searchSuggestions,
-                  "is-mobile": n.isMobile,
-                  "open-menu-item": n.menuComponent,
-                  onItemHover: n.onItemHover,
+        a(c, null, {
+          default: r(() => [
+            a(g, { name: "header-fade" }, {
+              default: r(() => [
+                b(a(w, {
+                  "logged-in": n.loggedIn,
+                  "basket-count": n.basketCount,
+                  balance: n.balance,
+                  "user-id": n.userId,
+                  "is-borrower": n.isBorrower,
+                  "is-trustee": n.isTrustee,
+                  "lender-name": n.lenderName,
+                  "lender-image-url": n.lenderImageUrl,
+                  "is-user-data-loading": n.isUserDataLoading,
+                  "is-basket-data-loading": n.isBasketDataLoading,
+                  "show-m-g-upsell-link": n.showMGUpsellLink,
+                  "login-url": n.loginUrl,
+                  "my-dashboard-url": n.myDashboardUrl,
+                  "countries-not-lent-to-url": n.countriesNotLentToUrl,
+                  "app-origin": e.resolvedAppOrigin,
+                  "search-suggestions": e.effectiveSuggestions,
+                  "is-mobile": e.isMobile,
+                  "open-menu-item": e.menuComponent,
+                  onItemHover: e.onItemHover,
                   onLoadSearchData: o[0] || (o[0] = (i) => t.$emit("load-search-data")),
                   onSearchSubmit: o[1] || (o[1] = (i) => t.$emit("search-submit", i))
                 }, null, 8, ["logged-in", "basket-count", "balance", "user-id", "is-borrower", "is-trustee", "lender-name", "lender-image-url", "is-user-data-loading", "is-basket-data-loading", "show-m-g-upsell-link", "login-url", "my-dashboard-url", "countries-not-lent-to-url", "app-origin", "search-suggestions", "is-mobile", "open-menu-item", "onItemHover"]), [
-                  [v, n.linksVisible]
+                  [v, e.linksVisible]
                 ])
               ]),
               _: 1
@@ -50,47 +50,49 @@ function I(t, o, e, n, L, D) {
           _: 1
         })
       ], 4),
-      r(g, { name: "header-fade" }, {
-        default: a(() => [
+      a(g, { name: "header-fade" }, {
+        default: r(() => [
           b(s("div", {
             class: "tw-absolute tw-z-modal tw-h-full tw-inset-x-0 tw-bg-eco-green-4 bg-opacity-50 tw-min-h-screen",
-            style: m({ top: n.navHeight }),
-            onTouchstart: o[8] || (o[8] = (...i) => n.handleOverlayClick && n.handleOverlayClick(...i))
+            style: d({ top: e.navHeight }),
+            onTouchstart: o[8] || (o[8] = (...i) => e.handleOverlayClick && e.handleOverlayClick(...i))
           }, [
             s("div", {
               ref: "menuPanelRef",
-              class: k(["tw-bg-primary tw-overflow-y-auto", n.menuPanelClass]),
-              style: m({
-                ...n.menuPosition,
-                maxHeight: n.isMobileMenuActive ? "auto" : `calc(100dvh - ${n.navHeight})`
+              class: k(["tw-bg-primary tw-overflow-y-auto", e.menuPanelClass]),
+              style: d({
+                ...e.menuPosition,
+                maxHeight: e.isMobileMenuActive ? "auto" : `calc(100dvh - ${e.navHeight})`
               }),
-              onMouseenter: o[6] || (o[6] = (i) => n.setMenu(n.menuItem, n.menuComponent)),
-              onMouseleave: o[7] || (o[7] = (i) => n.setMenu())
+              onMouseenter: o[6] || (o[6] = (i) => e.setMenu(e.menuItem, e.menuComponent)),
+              onMouseleave: o[7] || (o[7] = (i) => e.setMenu())
             }, [
-              (d(), u(y(n.menuComponent), {
+              (m(), u(y(e.menuComponent), {
                 ref: "menuComponentInstance",
-                "logged-in": e.loggedIn,
-                "login-url": e.loginUrl,
-                "user-id": e.userId,
-                "is-borrower": e.isBorrower,
-                "is-trustee": e.isTrustee,
-                "my-dashboard-url": e.myDashboardUrl,
-                "show-m-g-upsell-link": e.showMGUpsellLink,
-                "is-mobile": n.isMobile,
-                "countries-not-lent-to-url": e.countriesNotLentToUrl,
+                "logged-in": n.loggedIn,
+                "login-url": n.loginUrl,
+                "user-id": n.userId,
+                "is-borrower": n.isBorrower,
+                "is-trustee": n.isTrustee,
+                "trustee-id": n.trusteeId,
+                "most-recent-borrowed-loan-id": n.mostRecentBorrowedLoanId,
+                "my-dashboard-url": n.myDashboardUrl,
+                "show-m-g-upsell-link": n.showMGUpsellLink,
+                "is-mobile": e.isMobile,
+                "countries-not-lent-to-url": n.countriesNotLentToUrl,
                 "use-mobile-mega-menu": !0,
-                "app-origin": e.appOrigin,
-                "search-suggestions": e.searchSuggestions,
-                onLoadLendMenuData: n.emitLendMenuEvent,
+                "app-origin": e.resolvedAppOrigin,
+                "search-suggestions": e.effectiveSuggestions,
+                onLoadLendMenuData: e.emitLendMenuEvent,
                 onLoadSearchData: o[2] || (o[2] = (i) => t.$emit("load-search-data")),
                 onSearchSubmit: o[3] || (o[3] = (i) => t.$emit("search-submit", i)),
-                onClosingMenu: o[4] || (o[4] = (i) => n.setMenu()),
+                onClosingMenu: o[4] || (o[4] = (i) => e.setMenu()),
                 onTouchstart: o[5] || (o[5] = M(() => {
                 }, ["stop"]))
-              }, null, 40, ["logged-in", "login-url", "user-id", "is-borrower", "is-trustee", "my-dashboard-url", "show-m-g-upsell-link", "is-mobile", "countries-not-lent-to-url", "app-origin", "search-suggestions", "onLoadLendMenuData"]))
+              }, null, 40, ["logged-in", "login-url", "user-id", "is-borrower", "is-trustee", "trustee-id", "most-recent-borrowed-loan-id", "my-dashboard-url", "show-m-g-upsell-link", "is-mobile", "countries-not-lent-to-url", "app-origin", "search-suggestions", "onLoadLendMenuData"]))
             ], 38)
           ], 36), [
-            [v, n.menuOpen]
+            [v, e.menuOpen]
           ])
         ]),
         _: 1
@@ -99,7 +101,7 @@ function I(t, o, e, n, L, D) {
     _: 1
   });
 }
-const B = /* @__PURE__ */ C(f, [["render", I], ["__scopeId", "data-v-eadac17f"]]);
+const B = /* @__PURE__ */ I(h, [["render", L], ["__scopeId", "data-v-0d2a85d2"]]);
 export {
   B as default
 };