@kiva/kv-components 7.6.2 → 8.0.0

package/dist/vue/KvIntroductionLoanCard2.js

@@ -0,0 +1,209 @@
+import a from "graphql-tag";
+import F from "numeral";
+import { LOAN_CALLOUTS_FRAGMENT as M, LOAN_GEOCODE_FRAGMENT as T, LOAN_PROGRESS_FRAGMENT as B, loanCardComputedProperties as k, loanCardMethods as E } from "../utils/loanCard.js";
+import G from "./KvLoanBookmark.js";
+import I from "./KvLoanUse.js";
+import S from "./KvBorrowerImage.js";
+import D from "./KvLoanProgressGroup.js";
+import P from "./KvLoanCallouts.js";
+import b from "./KvLoanTag.js";
+import U from "./KvMaterialIcon.js";
+import $ from "./KvLoadingPlaceholder.js";
+import w from "./KvFlag.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as r } from "./KvLoanBookmark2.js";
+import { KV_LOAN_TAG_FRAGMENT as V } from "./KvLoanTag2.js";
+import { KV_LOAN_USE_FRAGMENT as W } from "./KvLoanUse2.js";
+const no = a`
+	fragment KvIntroductionLoanCard on LoanBasic {
+		id
+		image {
+			id
+			hash # for imageHash
+		}
+		lenders(limit: 0) {
+			totalCount # for lendersNumber
+		}
+		loanFundraisingInfo {
+			id
+			fundedAmount # for amountLent
+		}
+		name # for borrowerName
+		status # for isFunded
+		...KvLoanBookmark
+		...KvLoanTag
+		...KvLoanUse
+		...LoanCallouts
+		...LoanGeocode
+		...LoanProgress
+	}
+	${r}
+	${V}
+	${W}
+	${M}
+	${T}
+	${B}
+`, io = a`
+	fragment KvIntroductionLoanCardUser on LoanBasic {
+		id
+		...KvLoanBookmark
+	}
+	${r}
+`, uo = {
+  name: "KvIntroductionLoanCard",
+  components: {
+    KvBorrowerImage: S,
+    KvLoadingPlaceholder: $,
+    KvLoanUse: I,
+    KvLoanProgressGroup: D,
+    KvMaterialIcon: U,
+    KvLoanTag: b,
+    KvLoanCallouts: P,
+    KvFlag: w,
+    KvLoanBookmark: G
+  },
+  props: {
+    loanId: {
+      type: Number,
+      default: void 0
+    },
+    loan: {
+      type: Object,
+      default: null
+    },
+    customLoanDetails: {
+      type: Boolean,
+      default: !1
+    },
+    categoryPageName: {
+      type: String,
+      default: ""
+    },
+    customCallouts: {
+      type: Array,
+      default: () => []
+    },
+    kvTrackFunction: {
+      type: Function,
+      required: !0
+    },
+    photoPath: {
+      type: String,
+      required: !0
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    externalLinks: {
+      type: Boolean,
+      default: !1
+    },
+    route: {
+      type: Object,
+      default: void 0
+    },
+    useFullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    isVisitor: {
+      type: Boolean,
+      default: !0
+    },
+    isBookmarked: {
+      type: Boolean,
+      default: !1
+    },
+    customHref: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(o, { emit: e }) {
+    const {
+      allDataLoaded: t,
+      borrowerName: n,
+      city: i,
+      countryName: u,
+      countryCode: s,
+      distributionModel: l,
+      formattedLocation: d,
+      fundraisingPercent: m,
+      hasProgressData: f,
+      imageHash: p,
+      isLoading: c,
+      loanAmount: L,
+      loanBorrowerCount: g,
+      loanCallouts: A,
+      loanStatus: N,
+      loanUse: h,
+      mdiMapMarker: _,
+      readMorePath: K,
+      state: v,
+      tag: C,
+      unreservedAmount: O,
+      sharesAvailable: y
+    } = k(o, !0), {
+      clickReadMore: R
+    } = E(o, e);
+    return {
+      allDataLoaded: t,
+      borrowerName: n,
+      city: i,
+      countryName: u,
+      countryCode: s,
+      distributionModel: l,
+      formattedLocation: d,
+      fundraisingPercent: m,
+      hasProgressData: f,
+      imageHash: p,
+      isLoading: c,
+      loanAmount: L,
+      loanBorrowerCount: g,
+      loanCallouts: A,
+      loanStatus: N,
+      loanUse: h,
+      mdiMapMarker: _,
+      readMorePath: K,
+      state: v,
+      tag: C,
+      unreservedAmount: O,
+      sharesAvailable: y,
+      clickReadMore: R
+    };
+  },
+  computed: {
+    cardWidth() {
+      return this.useFullWidth ? "100%" : "20.5rem";
+    },
+    imageAspectRatio() {
+      return 5 / 8;
+    },
+    imageDefaultWidth() {
+      return 480;
+    },
+    imageSizes() {
+      return [
+        { width: this.imageDefaultWidth, viewSize: 375 }
+      ];
+    },
+    lendersNumber() {
+      var o, e;
+      return ((e = (o = this.loan) == null ? void 0 : o.lenders) == null ? void 0 : e.totalCount) ?? 0;
+    },
+    amountLent() {
+      var e, t;
+      const o = ((t = (e = this.loan) == null ? void 0 : e.loanFundraisingInfo) == null ? void 0 : t.fundedAmount) ?? 0;
+      return F(o).format("$0,0");
+    },
+    isFunded() {
+      var o;
+      return ((o = this.loan) == null ? void 0 : o.status) === "funded" || this.hasProgressData && !this.sharesAvailable;
+    }
+  }
+};
+export {
+  no as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  io as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  uo as default
+};

package/dist/vue/KvLendAmountButton.js

@@ -1,60 +1,16 @@
-import n from "./KvButton.js";
-import { resolveComponent as a, openBlock as u, createBlock as l, withCtx as r, createTextVNode as s, toDisplayString as d } from "vue";
+import e from "./KvLendAmountButton2.js";
+import { resolveComponent as n, openBlock as r, createBlock as c, withCtx as a, createTextVNode as _, toDisplayString as p } from "vue";
 import m from "../_virtual/_plugin-vue_export-helper.js";
-const i = {
-  name: "KvLendAmountButton",
-  components: {
-    KvButton: n
-  },
-  props: {
-    loanId: {
-      type: Number,
-      default: null
-    },
-    showNow: {
-      type: Boolean,
-      default: !1
-    },
-    amountLeft: {
-      type: [Number, String],
-      default: 20
-    },
-    completeLoan: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  computed: {
-    amountValue() {
-      return parseFloat(this.amountLeft).toFixed();
-    },
-    buttonText() {
-      let t = "";
-      return this.completeLoan ? t = `Complete loan for $${this.amountValue}` : (t = `Lend $${this.amountValue}`, this.showNow && (t += " now")), t;
-    }
-  },
-  methods: {
-    addToBasket(t) {
-      this.$kvTrackEvent(
-        "Lending",
-        "Add to basket (Partial Share)",
-        "lend-button-click",
-        this.loanId,
-        this.amountLeft
-      ), this.$emit("add-to-basket", t);
-    }
-  }
-};
-function c(t, p, f, h, k, e) {
-  const o = a("kv-button");
-  return u(), l(o, { onClick: e.addToBasket }, {
-    default: r(() => [
-      s(d(e.buttonText), 1)
+function s(u, d, f, i, l, t) {
+  const o = n("kv-button");
+  return r(), c(o, { onClick: t.addToBasket }, {
+    default: a(() => [
+      _(p(t.buttonText), 1)
     ]),
     _: 1
   }, 8, ["onClick"]);
 }
-const L = /* @__PURE__ */ m(i, [["render", c]]);
+const B = /* @__PURE__ */ m(e, [["render", s]]);
 export {
-  L as default
+  B as default
 };

package/dist/vue/KvLendAmountButton.vue.d.ts

@@ -0,0 +1,140 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    loanId: {
+        type: NumberConstructor;
+        default: any;
+    };
+    showNow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    amountLeft: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    completeLoan: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {
+    amountValue(): string;
+    buttonText(): string;
+}, {
+    addToBasket(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    loanId: {
+        type: NumberConstructor;
+        default: any;
+    };
+    showNow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    amountLeft: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    completeLoan: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    loanId: number;
+    showNow: boolean;
+    amountLeft: string | number;
+    completeLoan: boolean;
+}, {}, {
+    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>;
+export default _default;

package/dist/vue/KvLendAmountButton2.js

@@ -0,0 +1,48 @@
+import e from "./KvButton.js";
+const a = {
+  name: "KvLendAmountButton",
+  components: {
+    KvButton: e
+  },
+  props: {
+    loanId: {
+      type: Number,
+      default: null
+    },
+    showNow: {
+      type: Boolean,
+      default: !1
+    },
+    amountLeft: {
+      type: [Number, String],
+      default: 20
+    },
+    completeLoan: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    amountValue() {
+      return parseFloat(this.amountLeft).toFixed();
+    },
+    buttonText() {
+      let t = "";
+      return this.completeLoan ? t = `Complete loan for $${this.amountValue}` : (t = `Lend $${this.amountValue}`, this.showNow && (t += " now")), t;
+    }
+  },
+  methods: {
+    addToBasket(t) {
+      this.$kvTrackEvent(
+        "Lending",
+        "Add to basket (Partial Share)",
+        "lend-button-click",
+        this.loanId,
+        this.amountLeft
+      ), this.$emit("add-to-basket", t);
+    }
+  }
+};
+export {
+  a as default
+};

package/dist/vue/KvLendCta.css

@@ -1 +1 @@
-.amountDropdownWrapper[data-v-ff20e42a] select{border-radius:14px 0 0 14px}.lend-again[data-v-ff20e42a] span{padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-ff20e42a] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-ff20e42a] select{cursor:pointer;border-radius:1rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-ff20e42a] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-ff20e42a] span.tw-w-full:first-child{border-width:2px;--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-ff20e42a] select,.selected-option[data-v-ff20e42a] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.button-ellipsis[data-v-ff20e42a] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 410px){.mobile-dropdown-small[data-v-ff20e42a]{flex:0 0 40%}}
+.amountDropdownWrapper[data-v-a90ed7f0] select{border-radius:14px 0 0 14px}.lend-again[data-v-a90ed7f0] span{padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-a90ed7f0] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-a90ed7f0] select{cursor:pointer;border-radius:1rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-a90ed7f0] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-a90ed7f0] span.tw-w-full:first-child{border-width:2px;--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-a90ed7f0] select,.selected-option[data-v-a90ed7f0] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.button-ellipsis[data-v-a90ed7f0] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 410px){.mobile-dropdown-small[data-v-a90ed7f0]{flex:0 0 40%}}