@kiva/kv-components 8.7.5 → 8.9.0

package/dist/vue/KvCompactLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-c9a32dfb]:hover,.loan-card-use[data-v-c9a32dfb]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-c9a32dfb]{text-decoration-line:underline}.loan-card-progress[data-v-c9a32dfb]:hover,.loan-card-progress[data-v-c9a32dfb]:focus{text-decoration-line:none}.loan-card-use-text[data-v-c9a32dfb] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;text-overflow:ellipsis}.loan-card-cta[data-v-c9a32dfb] form,.loan-card-cta[data-v-c9a32dfb] fieldset,.loan-card-cta[data-v-c9a32dfb] .tw-w-full,.loan-card-cta[data-v-c9a32dfb] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-c9a32dfb] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}
+.loan-card-use[data-v-b1272f83]:hover,.loan-card-use[data-v-b1272f83]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-b1272f83]{text-decoration-line:underline}.loan-card-progress[data-v-b1272f83]:hover,.loan-card-progress[data-v-b1272f83]:focus{text-decoration-line:none}.loan-card-use-text[data-v-b1272f83] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;text-overflow:ellipsis}.loan-card-cta[data-v-b1272f83] form,.loan-card-cta[data-v-b1272f83] fieldset,.loan-card-cta[data-v-b1272f83] .tw-w-full,.loan-card-cta[data-v-b1272f83] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-b1272f83] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}

package/dist/vue/KvCompactLoanCard.js

@@ -2,8 +2,8 @@ import N from "./KvCompactLoanCard2.js";
 import { KV_COMPACT_LOAN_CARD_FRAGMENT as p, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as $ } from "./KvCompactLoanCard2.js";
 import { resolveComponent as w, openBlock as a, createElementBlock as l, normalizeClass as c, createVNode as i, createCommentVNode as d, createElementVNode as r, normalizeStyle as T, createBlock as s, resolveDynamicComponent as u, withCtx as f, toDisplayString as k, withModifiers as P, Fragment as g, renderList as A } from "vue";
 import "./KvCompactLoanCard.css";
-import B from "../_virtual/_plugin-vue_export-helper.js";
-const V = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, R = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, D = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, S = {
+import R from "../_virtual/_plugin-vue_export-helper.js";
+const B = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, V = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, D = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, S = {
   key: 0,
   class: "tw-mb-0.5 tw-w-full"
 }, F = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, W = ["href"], j = { class: "tw-truncate" }, E = {
@@ -13,24 +13,24 @@ const V = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, R = { class
 function z(h, o, t, e, G, H) {
   const b = w("kv-material-icon"), v = w("kv-borrower-image"), x = w("kv-loan-tag"), m = w("kv-loading-placeholder"), _ = w("kv-loan-use"), y = w("kv-loan-callouts"), L = w("kv-loan-progress-group"), C = w("kv-lend-cta");
   return a(), l("div", {
-    class: c(["tw-flex tw-flex-col tw-items-start tw-justify-between tw-p-1 tw-bg-white tw-rounded-md tw-shadow-lg tw-w-full", { "tw-relative": t.showCloseButton, "!tw-p-1.5": t.showLightView }])
+    class: c(["tw-flex tw-flex-col tw-items-start tw-justify-between tw-p-1 tw-bg-white tw-rounded-md tw-shadow-lg tw-w-full", { "tw-relative": t.showRefreshButton, "!tw-p-1.5": t.showLightView }])
   }, [
-    t.showCloseButton ? (a(), l("button", {
+    t.showRefreshButton ? (a(), l("button", {
       key: 0,
-      class: "tw-absolute tw--top-1 tw--right-1 tw-p-0.5 tw-bg-white tw-rounded-full tw-w-2.5 tw-h-2.5 tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-drop-shadow-sm",
-      onClick: o[0] || (o[0] = (...n) => e.handleCloseButton && e.handleCloseButton(...n))
+      class: "tw-absolute tw--top-1 tw--right-1 tw-bg-white tw-rounded-full tw-w-2.5 tw-h-2.5 tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-drop-shadow-sm",
+      onClick: o[0] || (o[0] = (...n) => e.handleRefreshButton && e.handleRefreshButton(...n))
     }, [
       i(b, {
-        icon: e.mdiClose,
-        class: "tw-w-1.5 tw-h-1.5"
+        icon: e.mdiCached,
+        class: "tw-w-2.5 tw-h-2.5 tw--scale-x-100 tw-text-gray-500"
       }, null, 8, ["icon"])
     ])) : d("", !0),
-    r("div", V, [
+    r("div", B, [
       r("div", {
         class: c(["tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover", { "!tw-gap-1": t.showLightView }]),
         style: T(e.customStyle)
       }, [
-        r("div", R, [
+        r("div", V, [
           (a(), s(u(e.tag), {
             to: e.readMorePath,
             href: e.readMorePath,
@@ -240,7 +240,7 @@ function z(h, o, t, e, G, H) {
     ], 2)
   ], 2);
 }
-const Q = /* @__PURE__ */ B(N, [["render", z], ["__scopeId", "data-v-c9a32dfb"]]);
+const Q = /* @__PURE__ */ R(N, [["render", z], ["__scopeId", "data-v-b1272f83"]]);
 export {
   p as KV_COMPACT_LOAN_CARD_FRAGMENT,
   $ as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,

package/dist/vue/KvCompactLoanCard.vue.d.ts

@@ -127,7 +127,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
-    showCloseButton: {
+    showRefreshButton: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -155,7 +155,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     mdiMapMarker: string;
     mdiHome: string;
     mdiLink: string;
-    mdiClose: string;
+    mdiCached: string;
     readMorePath: import('vue').ComputedRef<any>;
     state: import('vue').ComputedRef<any>;
     tag: import('vue').ComputedRef<"router-link" | "a">;
@@ -168,11 +168,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     loanUseLoadingRows: import('vue').ComputedRef<3 | 4>;
     clickReadMore: (target: string, event: Event) => void;
     trackWebsiteClick: () => void;
-    handleCloseButton: (event: any) => void;
+    handleRefreshButton: (event: any) => void;
 }, {}, {
     lendersNumber(): any;
     amountLent(): any;
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add-to-basket" | "remove-from-basket" | "jump-filter-page" | "close-button")[], "add-to-basket" | "remove-from-basket" | "jump-filter-page" | "close-button", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add-to-basket" | "remove-from-basket" | "jump-filter-page" | "refresh-button")[], "add-to-basket" | "remove-from-basket" | "jump-filter-page" | "refresh-button", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     loanId: {
         type: NumberConstructor;
         default: any;
@@ -297,7 +297,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
-    showCloseButton: {
+    showRefreshButton: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -309,7 +309,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     "onAdd-to-basket"?: (...args: any[]) => any;
     "onRemove-from-basket"?: (...args: any[]) => any;
     "onJump-filter-page"?: (...args: any[]) => any;
-    "onClose-button"?: (...args: any[]) => any;
+    "onRefresh-button"?: (...args: any[]) => any;
 }>, {
     loan: Record<string, any>;
     externalLinks: boolean;
@@ -340,7 +340,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     website: string;
     showLoanUse: boolean;
     showLightView: boolean;
-    showCloseButton: boolean;
+    showRefreshButton: boolean;
     customAmountLent: string;
 }, {}, {
     KvBorrowerImage: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/vue/KvCompactLoanCard2.js

@@ -1,7 +1,7 @@
 import r from "graphql-tag";
-import F from "numeral";
+import R from "numeral";
 import { computed as n } from "vue";
-import { mdiMapMarker as M, mdiHome as S, mdiLink as E, mdiClose as R } from "@mdi/js";
+import { mdiMapMarker as F, mdiHome as M, mdiLink as S, mdiCached as E } from "@mdi/js";
 import { LOAN_CALLOUTS_FRAGMENT as O, LOAN_GEOCODE_FRAGMENT as G, LOAN_PROGRESS_FRAGMENT as P, loanCardComputedProperties as V, loanCardMethods as U } from "../utils/loanCard.js";
 import D from "./KvLoanUse.js";
 import $ from "./KvBorrowerImage.js";
@@ -15,7 +15,7 @@ import z from "./KvLoanTeamPick.js";
 import { KV_LEND_CTA_FRAGMENT as J, KV_LEND_CTA_USER_FRAGMENT as Q } from "./KvLendCta2.js";
 import { KV_LOAN_TAG_FRAGMENT as X } from "./KvLoanTag2.js";
 import { KV_LOAN_USE_FRAGMENT as Y } from "./KvLoanUse2.js";
-const Ce = r`
+const ge = r`
 	fragment KvCompactLoanCard on LoanBasic {
 		id
 		image {
@@ -43,7 +43,7 @@ const Ce = r`
 	${O}
 	${G}
 	${P}
-`, he = r`
+`, Ce = r`
 	fragment KvCompactLoanCardUser on LoanBasic {
 		id
 		...KvLendCtaUser
@@ -187,7 +187,7 @@ const Ce = r`
       type: Number,
       default: 0
     },
-    showCloseButton: {
+    showRefreshButton: {
       type: Boolean,
       default: !1
     },
@@ -197,7 +197,7 @@ const Ce = r`
     }
   },
   emits: [
-    "close-button",
+    "refresh-button",
     "jump-filter-page",
     "add-to-basket",
     "remove-from-basket"
@@ -206,8 +206,8 @@ const Ce = r`
     const {
       allDataLoaded: a,
       borrowerName: i,
-      city: l,
-      countryName: s,
+      city: s,
+      countryName: l,
       distributionModel: u,
       formattedLocation: d,
       fundraisingPercent: m,
@@ -215,10 +215,10 @@ const Ce = r`
       imageHash: c,
       isLoading: p,
       loanAmount: L,
-      loanBorrowerCount: y,
-      loanCallouts: g,
-      loanStatus: C,
-      loanUse: h,
+      loanBorrowerCount: h,
+      loanCallouts: y,
+      loanStatus: g,
+      loanUse: C,
       readMorePath: A,
       state: _,
       tag: N,
@@ -238,8 +238,8 @@ const Ce = r`
     return {
       allDataLoaded: a,
       borrowerName: i,
-      city: l,
-      countryName: s,
+      city: s,
+      countryName: l,
       distributionModel: u,
       formattedLocation: d,
       formattedWebsite: v,
@@ -248,14 +248,14 @@ const Ce = r`
       imageHash: c,
       isLoading: p,
       loanAmount: L,
-      loanBorrowerCount: y,
-      loanCallouts: g,
-      loanStatus: C,
-      loanUse: h,
-      mdiMapMarker: M,
-      mdiHome: S,
-      mdiLink: E,
-      mdiClose: R,
+      loanBorrowerCount: h,
+      loanCallouts: y,
+      loanStatus: g,
+      loanUse: C,
+      mdiMapMarker: F,
+      mdiHome: M,
+      mdiLink: S,
+      mdiCached: E,
       readMorePath: A,
       state: _,
       tag: N,
@@ -267,8 +267,8 @@ const Ce = r`
       trackWebsiteClick: () => {
         e.kvTrackFunction("Lending", "click-Business Website", "Website", e.loanId);
       },
-      handleCloseButton: (o) => {
-        t("close-button", o);
+      handleRefreshButton: (o) => {
+        t("refresh-button", o);
       }
     };
   },
@@ -280,12 +280,12 @@ const Ce = r`
     amountLent() {
       var t, a;
       const e = ((a = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : a.fundedAmount) ?? 0;
-      return F(e).format("$0,0");
+      return R(e).format("$0,0");
     }
   }
 };
 export {
-  Ce as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  he as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  ge as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  Ce as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
   Ae as default
 };

package/dist/vue/KvContentfulImg.js

@@ -1,94 +1,95 @@
-import u from "./KvContentfulImg2.js";
-import { openBlock as e, createElementBlock as h, createElementVNode as f, Fragment as c, renderList as w, createCommentVNode as n, normalizeStyle as o, createTextVNode as r, toDisplayString as m } from "vue";
-import x from "../_virtual/_plugin-vue_export-helper.js";
+import w from "./KvContentfulImg2.js";
+import { openBlock as e, createElementBlock as a, createElementVNode as h, Fragment as c, renderList as o, createCommentVNode as r, normalizeStyle as f, createTextVNode as m, toDisplayString as s } from "vue";
+import u from "../_virtual/_plugin-vue_export-helper.js";
 const b = {
   key: 0,
   class: "tw-inline-block tw-not-prose"
-}, g = {
+}, x = {
   class: "tw-h-full tw-w-full",
   style: { "object-fit": "inherit" }
-}, y = ["media", "width", "height", "srcset"], s = ["media", "width", "height", "srcset"], _ = ["src", "alt", "loading"], k = ["srcset"], q = ["srcset", "src", "width", "height", "alt", "loading"], Q = {
+}, F = ["media", "width", "height", "srcset"], y = ["media", "width", "height", "srcset"], g = ["src", "alt", "loading"], k = ["srcset"], _ = ["srcset", "src", "width", "height", "alt", "loading"], P = {
   key: 0,
   class: "tw-inline-block tw-mr-0.5 tw-align-middle",
   "aria-hidden": "true",
   role: "img"
 };
-function U(F, a, t, i, S, v) {
-  return (t.width || t.height) && t.contentfulSrc ? (e(), h("figure", b, [
-    f("picture", g, [
-      t.sourceSizes.length > 0 ? (e(), h(c, { key: 0 }, [
-        (e(!0), h(c, null, w(t.sourceSizes, (l, d) => (e(), h("source", {
+function v(Q, n, i, t, U, S) {
+  return (i.width || i.height) && i.contentfulSrc ? (e(), a("figure", b, [
+    h("picture", x, [
+      i.sourceSizes.length > 0 ? (e(), a(c, { key: 0 }, [
+        t.isAnimatedGif ? r("", !0) : (e(!0), a(c, { key: 0 }, o(i.sourceSizes, (l, d) => (e(), a("source", {
           key: "webp-image" + d,
           media: "(" + l.media + ")",
           type: "image/webp",
           width: l.width ? l.width : null,
           height: l.height ? l.height : null,
           srcset: `
-						${i.buildUrl(l, 2)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(l.width, "2x")} 2x,
-						${i.buildUrl(l)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(l.width, "1x")} 1x`
-        }, null, 8, y))), 128)),
-        (e(!0), h(c, null, w(t.sourceSizes, (l, d) => (e(), h("source", {
+							${t.buildUrl(l, 2)}${t.fitFocusParams}&fm=webp&q=${t.setQuality(l.width, "2x")} 2x,
+							${t.buildUrl(l)}${t.fitFocusParams}&fm=webp&q=${t.setQuality(l.width, "1x")} 1x`
+        }, null, 8, F))), 128)),
+        (e(!0), a(c, null, o(i.sourceSizes, (l, d) => (e(), a("source", {
           key: "fallback-image" + d,
           media: "(" + l.media + ")",
           width: l.width ? l.width : null,
           height: l.height ? l.height : null,
           srcset: `
-						${i.buildUrl(l, 2)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(l.width, "2x")} 2x,
-						${i.buildUrl(l)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(l.width, "1x")} 1x`
-        }, null, 8, s))), 128)),
-        f("img", {
+						${t.buildUrl(l, 2)}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, l.width, "2x")} 2x,
+						${t.buildUrl(l)}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, l.width, "1x")} 1x`
+        }, null, 8, y))), 128)),
+        h("img", {
           class: "tw-max-w-full tw-max-h-full",
           style: { width: "inherit", height: "inherit", "object-fit": "inherit" },
-          src: `${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")}`,
-          alt: i.caption || t.alt,
-          loading: t.loading
-        }, null, 8, _)
-      ], 64)) : n("", !0),
-      t.sourceSizes.length === 0 ? (e(), h(c, { key: 1 }, [
-        f("source", {
+          src: `${t.buildUrl()}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, i.width, "1x")}`,
+          alt: t.caption || i.alt,
+          loading: i.loading
+        }, null, 8, g)
+      ], 64)) : r("", !0),
+      i.sourceSizes.length === 0 ? (e(), a(c, { key: 1 }, [
+        t.isAnimatedGif ? r("", !0) : (e(), a("source", {
+          key: 0,
           type: "image/webp",
           srcset: `
-						${i.buildUrl(null, 2)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(t.width, "2x")} 2x,
-						${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(t.width, "1x")} 1x`
-        }, null, 8, k),
-        f("img", {
+						${t.buildUrl(null, 2)}${t.fitFocusParams}&fm=webp&q=${t.setQuality(i.width, "2x")} 2x,
+						${t.buildUrl()}${t.fitFocusParams}&fm=webp&q=${t.setQuality(i.width, "1x")} 1x`
+        }, null, 8, k)),
+        h("img", {
           class: "tw-max-w-full tw-max-h-full",
           style: { width: "inherit", height: "inherit", "object-fit": "inherit" },
           srcset: `
-						${i.buildUrl(null, 2)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "2x")} 2x,
-						${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")} 1x`,
-          src: `${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")}`,
-          width: t.width ? t.width : null,
-          height: t.height ? t.height : null,
-          alt: i.caption || t.alt,
-          loading: t.loading
-        }, null, 8, q)
-      ], 64)) : n("", !0)
+						${t.buildUrl(null, 2)}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, i.width, "2x")} 2x,
+						${t.buildUrl()}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, i.width, "1x")} 1x`,
+          src: `${t.buildUrl()}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, i.width, "1x")}`,
+          width: i.width ? i.width : null,
+          height: i.height ? i.height : null,
+          alt: t.caption || i.alt,
+          loading: i.loading
+        }, null, 8, _)
+      ], 64)) : r("", !0)
     ]),
-    i.caption ? (e(), h("figcaption", {
+    t.caption ? (e(), a("figcaption", {
       key: 0,
       class: "tw-italic tw-my-1.5 tw-break-words tw-max-w-full tw-font-book tw-text-action-highlight",
-      style: o({ maxWidth: t.width ? `${t.width}px` : void 0 })
+      style: f({ maxWidth: i.width ? `${i.width}px` : void 0 })
     }, [
-      i.removeLeafIcon ? n("", !0) : (e(), h("span", Q, a[0] || (a[0] = [
-        f("svg", {
+      t.removeLeafIcon ? r("", !0) : (e(), a("span", P, n[0] || (n[0] = [
+        h("svg", {
           width: "16",
           height: "12",
           viewBox: "0 0 16 12",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          f("path", {
+          h("path", {
             d: "M1.04689 11.2079C13.06 11.2079 15.8778 1.63084 15.8778 -1.6347e-07L14.831 -1.52692e-07C2.82661 -2.91013e-08 9.85148e-08 9.56873 1.15391e-07 11.2079L1.04689 11.2079Z",
             fill: "currentColor"
           })
         ], -1)
       ]))),
-      r(" " + m(i.caption), 1)
-    ], 4)) : n("", !0)
-  ])) : n("", !0);
+      m(" " + s(t.caption), 1)
+    ], 4)) : r("", !0)
+  ])) : r("", !0);
 }
-const j = /* @__PURE__ */ x(u, [["render", U]]);
+const L = /* @__PURE__ */ u(w, [["render", v]]);
 export {
-  j as default
+  L as default
 };

package/dist/vue/KvContentfulImg.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     fallbackFormat: {
         type: StringConstructor;
-        default: string;
+        default: any;
         validator(value: string): boolean;
     };
     width: {
@@ -48,8 +48,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: () => any[];
     };
 }>, {
-    buildUrl: (image?: any, multiplier?: number) => string;
+    buildFormatQualityParams: (format: string, imgWidth: string | number, scale: string) => string;
+    buildUrl: (image?: any, multiplier?: number) => any;
     caption: import('vue').ComputedRef<string>;
+    effectiveFallbackFormat: import('vue').ComputedRef<string>;
+    fitFocusParams: import('vue').ComputedRef<string>;
+    isAnimatedGif: import('vue').ComputedRef<boolean>;
     removeLeafIcon: import('vue').ComputedRef<boolean>;
     setQuality: (imgWidth: string | number, imgScale: string) => 65 | 95 | 80;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -59,7 +63,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     fallbackFormat: {
         type: StringConstructor;
-        default: string;
+        default: any;
         validator(value: string): boolean;
     };
     width: {

package/dist/vue/KvContentfulImg2.js

@@ -1,5 +1,5 @@
-import { toRefs as v, computed as f } from "vue";
-const S = {
+import { toRefs as x, computed as i } from "vue";
+const F = {
   props: {
     /**
      * Large, uncompressed image url that you get back from contentful.
@@ -10,11 +10,12 @@ const S = {
     },
     /**
      * If the browser can't support webp we fallback to this image format.
-     * `jpg, png, webp`
+     * Defaults to the format derived from the source URL: gif→gif, png→png, jpg→jpg, webp→jpg.
+     * `jpg, png, gif`
     * */
     fallbackFormat: {
       type: String,
-      default: "jpg",
+      default: null,
       validator(e) {
         return e === null || ["jpg", "png", "gif"].indexOf(e) !== -1;
       }
@@ -92,28 +93,42 @@ const S = {
   },
   setup(e) {
     const {
-      alt: n,
-      contentfulSrc: o,
-      width: c,
-      height: d
-    } = v(e), p = (t = null, u = 1) => {
-      let i = t && t.url ? `${t.url}?` : `${o.value}?`, r = t ? t.width : c.value, l = t ? t.height : d.value, a;
-      return r >= 2e3 && (a = r / 1999, r = 1999, l = Math.round(l / a)), l >= 2e3 && (a = l / 1999, l = 1999, r = Math.round(r / a)), r && (i += `w=${r * u}`), r && l && (i += "&"), l && (i += `h=${l * u}`), i;
-    }, s = (t, u) => u === "2x" ? 65 : t && parseInt(t.toString(), 10) < 200 ? 95 : 80, h = f(() => {
-      if (n.value && n.value.charAt(0) === "^") {
-        const t = n.value.charAt(1) === "#" ? 2 : 1;
-        return n.value.slice(t).trim();
+      alt: a,
+      contentfulSrc: s,
+      width: p,
+      height: h
+    } = x(e), f = i(() => {
+      var r;
+      return (((r = s.value) == null ? void 0 : r.split("?")[0]) ?? "").toLowerCase().endsWith(".gif");
+    }), g = i(() => {
+      var r, u;
+      if (e.fallbackFormat) return e.fallbackFormat;
+      const t = (u = (r = s.value) == null ? void 0 : r.split("?")[0].split(".").pop()) == null ? void 0 : u.toLowerCase();
+      return t === "png" ? "png" : t === "gif" ? "gif" : "jpg";
+    }), v = i(() => f.value ? "" : `&fit=${e.fit}&f=${e.focus}`), m = (t = null, r = 1) => {
+      const u = t && t.url ? t.url : s.value;
+      if (f.value) return u;
+      let o = `${u}?`, l = t ? t.width : p.value, n = t ? t.height : h.value, c;
+      return l >= 2e3 && (c = l / 1999, l = 1999, n = Math.round(n / c)), n >= 2e3 && (c = n / 1999, n = 1999, l = Math.round(l / c)), l && (o += `w=${l * r}`), l && n && (o += "&"), n && (o += `h=${n * r}`), o;
+    }, d = (t, r) => r === "2x" ? 65 : t && parseInt(t.toString(), 10) < 200 ? 95 : 80, b = (t, r, u) => f.value ? "" : `&fm=${t}&q=${d(r, u)}`, y = i(() => {
+      if (a.value && a.value.charAt(0) === "^") {
+        const t = a.value.charAt(1) === "#" ? 2 : 1;
+        return a.value.slice(t).trim();
       }
       return "";
-    }), g = f(() => !!(n.value && n.value.charAt(1) === "#"));
+    }), S = i(() => !!(a.value && a.value.charAt(1) === "#"));
     return {
-      buildUrl: p,
-      caption: h,
-      removeLeafIcon: g,
-      setQuality: s
+      buildFormatQualityParams: b,
+      buildUrl: m,
+      caption: y,
+      effectiveFallbackFormat: g,
+      fitFocusParams: v,
+      isAnimatedGif: f,
+      removeLeafIcon: S,
+      setQuality: d
     };
   }
 };
 export {
-  S as default
+  F as default
 };

package/dist/vue/KvImpactVerticalSelector.vue.d.ts

@@ -182,7 +182,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
         fallbackFormat: {
             type: StringConstructor;
-            default: string;
+            default: any;
             validator(value: string): boolean;
         };
         width: {
@@ -218,8 +218,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             default: () => any[];
         };
     }>, {
-        buildUrl: (image?: any, multiplier?: number) => string;
+        buildFormatQualityParams: (format: string, imgWidth: string | number, scale: string) => string;
+        buildUrl: (image?: any, multiplier?: number) => any;
         caption: import('vue').ComputedRef<string>;
+        effectiveFallbackFormat: import('vue').ComputedRef<string>;
+        fitFocusParams: import('vue').ComputedRef<string>;
+        isAnimatedGif: import('vue').ComputedRef<boolean>;
         removeLeafIcon: import('vue').ComputedRef<boolean>;
         setQuality: (imgWidth: string | number, imgScale: string) => 65 | 95 | 80;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -229,7 +233,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
         fallbackFormat: {
             type: StringConstructor;
-            default: string;
+            default: any;
             validator(value: string): boolean;
         };
         width: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.7.5",
+  "version": "8.9.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "205b6ec176cf4cbf5d8028e9ded54a67c56cb767"
+  "gitHead": "8e1a9900d6e8e1c8307875aad711ffa5080e1dd9"
 }