@kiva/kv-components 7.6.3 → 8.0.1

package/dist/vue/KvAtbModal.vue.d.ts

@@ -0,0 +1,359 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modalVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    addedLoan: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    userData: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    photoPath: {
+        type: StringConstructor;
+        default: string;
+    };
+    milestonesNumber: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showModalContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasEverLoggedIn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    myKivaExperimentEnabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    oneLoanAwayCategory: {
+        type: StringConstructor;
+        default: string;
+    };
+    oneLoanAwayFilteredUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    oneAwayText: {
+        type: StringConstructor;
+        default: string;
+    };
+    milestonesProgress: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    isLoanGoal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isCompletingGoal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    modalPosition: import('vue').ComputedRef<{
+        right: string;
+        top: string;
+    }>;
+    basketCount: import('vue').ComputedRef<any>;
+    isFirstLoan: import('vue').ComputedRef<boolean>;
+    borrowerName: import('vue').ComputedRef<any>;
+    showOneAway: import('vue').ComputedRef<boolean>;
+    pillMsg: import('vue').ComputedRef<string>;
+    closeCartModal: (closedBy: any) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("reset-modal" | "close-redirect")[], "reset-modal" | "close-redirect", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modalVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    addedLoan: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    userData: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    photoPath: {
+        type: StringConstructor;
+        default: string;
+    };
+    milestonesNumber: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showModalContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasEverLoggedIn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    myKivaExperimentEnabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    oneLoanAwayCategory: {
+        type: StringConstructor;
+        default: string;
+    };
+    oneLoanAwayFilteredUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    oneAwayText: {
+        type: StringConstructor;
+        default: string;
+    };
+    milestonesProgress: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    isLoanGoal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isCompletingGoal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onReset-modal"?: (...args: any[]) => any;
+    "onClose-redirect"?: (...args: any[]) => any;
+}>, {
+    photoPath: string;
+    milestonesNumber: number;
+    modalVisible: boolean;
+    addedLoan: Record<string, any>;
+    userData: Record<string, any>;
+    showModalContent: boolean;
+    hasEverLoggedIn: boolean;
+    myKivaExperimentEnabled: boolean;
+    oneLoanAwayCategory: string;
+    oneLoanAwayFilteredUrl: string;
+    oneAwayText: string;
+    milestonesProgress: Record<string, any>;
+    isLoanGoal: boolean;
+    isCompletingGoal: boolean;
+}, {}, {
+    KvCartModal: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        preventClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        basketCount: {
+            type: NumberConstructor;
+            default: number;
+        };
+        categoryName: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {
+        mdiClose: string;
+        mdiCheckCircle: string;
+        onKeyUp: any;
+        onScreenClick: () => void;
+        hide: (closedBy?: string) => void;
+        show: () => void;
+        controlsRef: import('vue').Ref<any, any>;
+        handleClick: (cta: any) => void;
+        clearAutomaticClose: () => void;
+        setAutomaticClose: () => void;
+        ctaText: import('vue').ComputedRef<string>;
+        showCategoryOption: import('vue').ComputedRef<boolean>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "cart-modal-closed"[], "cart-modal-closed", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        preventClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        basketCount: {
+            type: NumberConstructor;
+            default: number;
+        };
+        categoryName: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{
+        "onCart-modal-closed"?: (...args: any[]) => any;
+    }>, {
+        visible: boolean;
+        preventClose: boolean;
+        basketCount: number;
+        categoryName: string;
+    }, {}, {
+        KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{}>, {
+            icon: string;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        KvButton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            to: {
+                type: (StringConstructor | ObjectConstructor)[];
+                default: any;
+            };
+            href: {
+                type: StringConstructor;
+                default: any;
+            };
+            type: {
+                type: StringConstructor;
+                default: string;
+                validator(value: string): boolean;
+            };
+            variant: {
+                type: StringConstructor;
+                default: string;
+                validator(value: string): boolean;
+            };
+            state: {
+                type: StringConstructor;
+                default: string;
+                validator(value: string): boolean;
+            };
+        }>, {
+            buttonRef: import('vue').Ref<any, any>;
+            buttonInnerRef: import('vue').Ref<any, any>;
+            computedClass: import('vue').ComputedRef<string>;
+            computedType: import('vue').ComputedRef<string>;
+            isDisabled: import('vue').ComputedRef<boolean>;
+            loadingColor: import('vue').ComputedRef<"white" | "brand" | "black">;
+            onClick: (event: any) => void;
+            tag: import('vue').ComputedRef<"button" | "router-link" | "a">;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], "click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            to: {
+                type: (StringConstructor | ObjectConstructor)[];
+                default: any;
+            };
+            href: {
+                type: StringConstructor;
+                default: any;
+            };
+            type: {
+                type: StringConstructor;
+                default: string;
+                validator(value: string): boolean;
+            };
+            variant: {
+                type: StringConstructor;
+                default: string;
+                validator(value: string): boolean;
+            };
+            state: {
+                type: StringConstructor;
+                default: string;
+                validator(value: string): boolean;
+            };
+        }>> & Readonly<{
+            onClick?: (...args: any[]) => any;
+        }>, {
+            to: string | Record<string, any>;
+            type: string;
+            href: string;
+            variant: string;
+            state: string;
+        }, {}, {
+            KvLoadingSpinner: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+                size: {
+                    type: StringConstructor;
+                    default: string;
+                    validator(value: string): boolean;
+                };
+                color: {
+                    type: StringConstructor;
+                    default: string;
+                    validator(value: string): boolean;
+                };
+            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+                size: {
+                    type: StringConstructor;
+                    default: string;
+                    validator(value: string): boolean;
+                };
+                color: {
+                    type: StringConstructor;
+                    default: string;
+                    validator(value: string): boolean;
+                };
+            }>> & Readonly<{}>, {
+                size: string;
+                color: string;
+            }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    KvCartPill: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        borrowerName: {
+            type: StringConstructor;
+            default: string;
+        };
+        showBg: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        milestonesNumber: {
+            type: NumberConstructor;
+            default: number;
+        };
+        isCloseNextMilestone: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        customMessage: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {
+        pillCopy: import('vue').ComputedRef<string>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        borrowerName: {
+            type: StringConstructor;
+            default: string;
+        };
+        showBg: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        milestonesNumber: {
+            type: NumberConstructor;
+            default: number;
+        };
+        isCloseNextMilestone: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        customMessage: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        borrowerName: string;
+        showBg: boolean;
+        milestonesNumber: number;
+        isCloseNextMilestone: boolean;
+        customMessage: string;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvAtbModal2.js

@@ -0,0 +1,186 @@
+import { toRefs as O, ref as E, computed as l, watch as P, onMounted as j, onUnmounted as K } from "vue";
+import { throttle as N } from "../utils/throttle.js";
+import R from "./KvCartModal.js";
+import z from "./KvCartPill.js";
+const q = {
+  components: {
+    KvCartModal: R,
+    KvCartPill: z
+  },
+  props: {
+    /**
+     * show modal
+     * */
+    modalVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * added loan to basket
+     * */
+    addedLoan: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * user data
+     * */
+    userData: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * basket limit size
+     * */
+    photoPath: {
+      type: String,
+      default: ""
+    },
+    /**
+     * milestones number
+     * */
+    milestonesNumber: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * show modal content
+     * */
+    showModalContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * user has ever logged in
+     * */
+    hasEverLoggedIn: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * is under myKiva experiment
+     * */
+    myKivaExperimentEnabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * one loan away category name
+     * */
+    oneLoanAwayCategory: {
+      type: String,
+      default: ""
+    },
+    /**
+     * one loan away filtered url
+     * */
+    oneLoanAwayFilteredUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * one loan away text
+     * */
+    oneAwayText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * milestones progress
+     * */
+    milestonesProgress: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * is loan goal modal
+     * */
+    isLoanGoal: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * is completing goal modal
+     * */
+    isCompletingGoal: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "reset-modal",
+    // reset modal values and close on parent component
+    "close-redirect"
+    // close and redirect to another page on parent component
+  ],
+  setup(d, { emit: c }) {
+    const {
+      modalVisible: h,
+      addedLoan: s,
+      userData: y,
+      hasEverLoggedIn: S,
+      myKivaExperimentEnabled: A,
+      oneLoanAwayCategory: B,
+      oneLoanAwayFilteredUrl: m,
+      milestonesProgress: $
+    } = O(d), v = E(0), f = E(0), w = l(() => {
+      var e;
+      return ((e = s.value) == null ? void 0 : e.basketSize) ?? 0;
+    }), x = l(() => {
+      const e = window.innerWidth - f.value - 200, t = `${e > 0 ? e : 0}`, o = `${v.value}`;
+      return { right: t, top: o };
+    }), i = l(() => {
+      var e;
+      return (e = s.value) == null ? void 0 : e.name;
+    }), b = l(() => {
+      var e;
+      return !((e = y.value) != null && e.my);
+    }), p = l(() => {
+      var e, t, o;
+      return A.value && (b.value && !S.value || !b.value && !((o = (t = (e = y.value) == null ? void 0 : e.my) == null ? void 0 : t.loans) != null && o.totalCount)) && w.value === 1;
+    }), L = l(() => B.value && m.value && !p.value), C = l(() => Object.values($.value).reduce((e, t) => e + (t > 0 ? t : 0), 0)), G = l(() => {
+      var t, o, n;
+      if (d.isCompletingGoal)
+        return `Supporting ${i.value} meets your annual goal!`;
+      if (d.isLoanGoal)
+        return "You’re closer to reaching your annual goal!";
+      if (p.value) {
+        const a = `Supporting ${i.value} helps`;
+        return ((t = s.value) == null ? void 0 : t.borrowerCount) > 1 || (o = s.value) != null && o.themes.includes("Social Enterprise") ? `${a} them invest in themselves.` : ((n = s.value) == null ? void 0 : n.gender) === "male" ? `${a} him invest in himself.` : `${a} her invest in herself.`;
+      }
+      if (L.value)
+        return "You’re close to your next achievement!";
+      const e = C.value > 1 ? `${C.value} achievements` : "your next achievement";
+      return i.value ? `Supporting ${i.value} will reach ${e}!` : "Supporting this loan reaches an achievement!";
+    }), H = (e) => {
+      e === "view-basket" ? c("close-redirect", { type: e, path: "/basket" }) : e === "support-another" && m.value && c("close-redirect", { type: e, path: m.value });
+    }, M = (e) => {
+      const { type: t } = e;
+      t && H(t), c("reset-modal");
+    }, g = () => {
+      const e = document.getElementsByTagName("header")[0], t = (e == null ? void 0 : e.getBoundingClientRect()) ?? null;
+      let o = Array.from(document.querySelectorAll('[data-testid="header-basket"]')), n = o.find((r) => r == null ? void 0 : r.clientHeight);
+      n || (o = Array.from(document.querySelectorAll('[data-testid="header-about"]')), n = o.find((r) => r == null ? void 0 : r.clientHeight));
+      const a = (n == null ? void 0 : n.getBoundingClientRect()) ?? null;
+      a && (a == null ? void 0 : a.right) !== f.value && (f.value = a == null ? void 0 : a.right), t && (t == null ? void 0 : t.bottom) !== v.value && (v.value = t == null ? void 0 : t.bottom);
+    }, u = N(g, 50);
+    return P(h, () => {
+      h.value && g();
+    }, { immediate: !0 }), j(() => {
+      g(), window.addEventListener("scroll", u), window.addEventListener("resize", u);
+    }), K(() => {
+      window.removeEventListener("scroll", u), window.removeEventListener("resize", u);
+    }), {
+      modalPosition: x,
+      basketCount: w,
+      isFirstLoan: p,
+      borrowerName: i,
+      showOneAway: L,
+      pillMsg: G,
+      closeCartModal: M
+    };
+  }
+};
+export {
+  q as default
+};

package/dist/vue/KvBorrowerImage.js

@@ -1,127 +1,26 @@
-import { getKivaImageUrl as l } from "../utils/imageUtils.js";
-import { openBlock as h, createElementBlock as o, normalizeStyle as n, createElementVNode as c, createCommentVNode as u } from "vue";
-import m from "../_virtual/_plugin-vue_export-helper.js";
-const g = {
-  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,
-        format: "jpg"
-      }) : "";
-    },
-    // 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, a = {
-          width: t,
-          height: r,
-          faceZoom: e
-        }, i = {
-          width: t * 2,
-          height: r * 2,
-          faceZoom: e
-        };
-        return `${this.getSrcsetDef(a)}, ${this.getSrcsetDef(i)}`;
-      }).join(", ") : "";
-    }
-  },
-  methods: {
-    // Get the url for the loan image sized width by height
-    getImgUrl(t) {
-      return l({
-        base: this.photoPath,
-        format: "webp",
-        hash: this.hash,
-        ...t
-      });
-    },
-    // 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`;
-    }
-  }
-}, d = ["srcset", "sizes"], f = ["src", "alt"];
-function p(t, e, r, a, i, s) {
-  return h(), o("picture", {
+import c from "./KvBorrowerImage2.js";
+import { openBlock as l, createElementBlock as r, normalizeStyle as s, createElementVNode as o, createCommentVNode as a } from "vue";
+import n from "../_virtual/_plugin-vue_export-helper.js";
+const i = ["srcset", "sizes"], m = ["src", "alt"];
+function d(u, f, e, w, _, t) {
+  return l(), r("picture", {
     class: "tw-inline-block tw-relative tw-overflow-hidden tw-w-full tw-bg-black",
-    style: n(`padding-bottom: ${r.aspectRatio * 100}%;`)
+    style: s(`padding-bottom: ${e.aspectRatio * 100}%;`)
   }, [
-    c("source", {
-      srcset: s.srcset,
-      sizes: s.sizes
-    }, null, 8, d),
-    r.hash ? (h(), o("img", {
+    o("source", {
+      srcset: t.srcset,
+      sizes: t.sizes
+    }, null, 8, i),
+    e.hash ? (l(), r("img", {
       key: 0,
       class: "tw-absolute tw-w-full tw-h-full tw-object-contain",
-      src: s.defaultUrl,
-      alt: r.alt,
+      src: t.defaultUrl,
+      alt: e.alt,
       loading: "lazy"
-    }, null, 8, f)) : u("", !0)
+    }, null, 8, m)) : a("", !0)
   ], 4);
 }
-const b = /* @__PURE__ */ m(g, [["render", p]]);
+const k = /* @__PURE__ */ n(c, [["render", d]]);
 export {
-  b as default
+  k as default
 };