@kiva/kv-components 8.5.5 → 8.5.6

package/dist/index.js

@@ -2,15 +2,15 @@ import { default as r } from "./vue/KvAccordionItem.js";
 import { default as a } from "./vue/KvActivityRow.js";
 import { default as l } from "./vue/KvBorrowerImage.js";
 import { default as s } from "./vue/KvButton.js";
-import { default as p } from "./vue/KvCardFrame.js";
-import { default as u } from "./vue/KvCarousel.js";
+import { default as d } from "./vue/KvCardFrame.js";
+import { default as x } from "./vue/KvCarousel.js";
 import { default as K } from "./vue/KvCartModal.js";
 import { default as A } from "./vue/KvCartPill.js";
-import { default as C } from "./vue/KvCheckbox.js";
-import { default as L } from "./vue/KvCheckoutReceipt.js";
-import { default as c } from "./vue/KvChip.js";
+import { default as i } from "./vue/KvCheckbox.js";
+import { default as c } from "./vue/KvCheckoutReceipt.js";
+import { default as N } from "./vue/KvChip.js";
 import { default as E } from "./vue/KvClassicLoanCard.js";
-import { default as O } from "./vue/KvCompactLoanCard.js";
+import { default as M } from "./vue/KvCompactLoanCard.js";
 import { default as I } from "./vue/KvCommentsAdd.js";
 import { default as g } from "./vue/KvCommentsContainer.js";
 import { default as G } from "./vue/KvCommentsHeartButton.js";
@@ -21,23 +21,23 @@ import { default as k } from "./vue/KvContentfulImg.js";
 import { default as w } from "./vue/KvCountdownTimer.js";
 import { default as H } from "./vue/KvDatePicker.js";
 import { default as z } from "./vue/KvExpandable.js";
-import { default as q } from "./vue/KvExpandableQuestion.js";
-import { default as X } from "./vue/KvFlag.js";
-import { default as Z } from "./vue/KvGrid.js";
+import { default as Z } from "./vue/KvExpandableQuestion.js";
+import { default as J } from "./vue/KvFlag.js";
+import { default as Y } from "./vue/KvGrid.js";
 import { default as oo } from "./vue/KvIconButton.js";
 import { default as ro } from "./vue/KvImpactDashboardHeader.js";
 import { default as ao } from "./vue/KvImpactVerticalSelector.js";
 import { default as lo } from "./vue/KvInlineActivityCard.js";
 import { default as so } from "./vue/KvInlineActivityFeed.js";
-import { default as xo } from "./vue/KvIntroductionLoanCard.js";
+import { default as uo } from "./vue/KvIntroductionLoanCard.js";
 import { default as no } from "./vue/KvLendAmountButton.js";
 import { default as vo } from "./vue/KvLendCta.js";
-import { default as io } from "./vue/KvLightbox.js";
+import { default as Co } from "./vue/KvLightbox.js";
 import { default as _o } from "./vue/KvLineGraph.js";
-import { default as No } from "./vue/KvLoanActivities.js";
+import { default as Lo } from "./vue/KvLoanActivities.js";
 import { default as To } from "./vue/KvLoanBookmark.js";
 import { default as Ro } from "./vue/KvLoanCallouts.js";
-import { KV_LOAN_INFO_CARD_FRAGMENT as Mo, default as Io } from "./vue/KvLoanInfoCard.js";
+import { KV_LOAN_INFO_CARD_FRAGMENT as Oo, default as Io } from "./vue/KvLoanInfoCard.js";
 import { default as go } from "./vue/KvLoanProgressGroup.js";
 import { default as Go } from "./vue/KvLoanTag.js";
 import { default as ho } from "./vue/KvLoanTeamPick.js";
@@ -47,23 +47,23 @@ import { default as ko } from "./vue/KvLoadingSpinner.js";
 import { default as wo } from "./vue/KvMap.js";
 import { default as Ho } from "./vue/KvMaterialIcon.js";
 import { default as zo } from "./vue/KvPageContainer.js";
-import { default as qo } from "./vue/KvPagination.js";
-import { default as Xo } from "./vue/KvPieChart.js";
-import { default as Zo } from "./vue/KvPill.js";
+import { default as Zo } from "./vue/KvPagination.js";
+import { default as Jo } from "./vue/KvPieChart.js";
+import { default as Yo } from "./vue/KvPill.js";
 import { default as oe } from "./vue/KvPopper.js";
 import { default as re } from "./vue/KvProgressBar.js";
 import { default as ae } from "./vue/KvProgressCircle.js";
 import { default as le } from "./vue/KvPulsingDot.js";
 import { default as se } from "./vue/KvRadio.js";
-import { default as pe } from "./vue/KvSelect.js";
-import { default as ue } from "./vue/KvSideSheet.js";
+import { default as de } from "./vue/KvSelect.js";
+import { default as xe } from "./vue/KvSideSheet.js";
 import { default as Ke } from "./vue/KvSwitch.js";
 import { default as Ae } from "./vue/KvTab.js";
-import { default as Ce } from "./vue/KvTabPanel.js";
-import { default as Le } from "./vue/KvTabs.js";
-import { default as ce } from "./vue/KvTextInput.js";
+import { default as ie } from "./vue/KvTabPanel.js";
+import { default as ce } from "./vue/KvTabs.js";
+import { default as Ne } from "./vue/KvTextInput.js";
 import { default as Ee } from "./vue/KvTextLink.js";
-import { default as Oe } from "./vue/KvThemeProvider.js";
+import { default as Me } from "./vue/KvThemeProvider.js";
 import { default as Ie } from "./vue/KvToast.js";
 import { default as ge } from "./vue/KvTooltip.js";
 import { default as Ge } from "./vue/KvTreeMapChart.js";
@@ -74,69 +74,69 @@ import { default as ke } from "./vue/KvVotingCard.js";
 import { default as we } from "./vue/KvVotingCardV2.js";
 import { default as He } from "./vue/KvWideLoanCard.js";
 import { default as ze } from "./vue/KvAtbModal.js";
-import { default as qe } from "./vue/KvSecondaryNav.js";
-import { default as Xe } from "./vue/KvWwwHeader.js";
-import { default as Ze, Mash as $e } from "./utils/Alea.js";
+import { default as Ze } from "./vue/KvSecondaryNav.js";
+import { default as Je } from "./vue/KvWwwHeader.js";
+import { default as Ye, Mash as $e } from "./utils/Alea.js";
 import { groupBy as er, sortBy as rr } from "./utils/arrayUtils.js";
 import { useAttrs as ar } from "./utils/attrs.js";
 import { carouselUtil as lr } from "./utils/carousels.js";
-import { abc as sr, indexIn as dr, startsWith as pr } from "./utils/comparators.js";
-import { debounce as ur } from "./utils/debounce.js";
+import { abc as sr, indexIn as pr, startsWith as dr } from "./utils/comparators.js";
+import { debounce as xr } from "./utils/debounce.js";
 import { useEventListener as Kr } from "./utils/event.js";
-import { collapse as Ar, expand as ir } from "./utils/expander.js";
-import { getKivaImageUrl as _r, isLegacyPlaceholderAvatar as Lr, randomizedUserAvatarClass as Nr } from "./utils/imageUtils.js";
-import { LOAN_CALLOUTS_FRAGMENT as Tr, LOAN_GEOCODE_FRAGMENT as Er, LOAN_PROGRESS_FRAGMENT as Rr, loanCardComputedProperties as Or, loanCardMethods as Mr } from "./utils/loanCard.js";
+import { collapse as Ar, expand as Cr } from "./utils/expander.js";
+import { getKivaImageUrl as _r, isLegacyPlaceholderAvatar as cr, randomizedUserAvatarClass as Lr } from "./utils/imageUtils.js";
+import { LOAN_CALLOUTS_FRAGMENT as Tr, LOAN_GEOCODE_FRAGMENT as Er, LOAN_PROGRESS_FRAGMENT as Rr, loanCardComputedProperties as Mr, loanCardMethods as Or } from "./utils/loanCard.js";
 import { BALANCE_CAMPAIGN as Sr, BASE_CAMPAIGN as gr, ERL_COOKIE_NAME as Pr, NO_BALANCE_CAMPAIGN as Gr, TOP_UP_CAMPAIGN as Fr, getDropdownPriceArray as hr, getLendCtaSelectedOption as Vr, isBetween25And50 as Br, isLessThan25 as Dr, truncateStringByWords as yr } from "./utils/loanUtils.js";
-import { animationCoordinator as kr, generateMapMarkers as Ur, getCoordinatesBetween as wr, getCountryColor as Wr, getLoansIntervals as Hr } from "./utils/mapUtils.js";
-import { lockPrintSingleEl as zr, unlockPrintSingleEl as Qr } from "./utils/printing.js";
-import { lockScroll as Jr, lockScrollSmallOnly as Xr, unlockScroll as Yr, unlockScrollSmallOnly as Zr } from "./utils/scrollLock.js";
-import { buildTailwindClassName as ot, headerNumberCase as et, kebabCase as rt, removeObjectProperty as tt } from "./utils/themeUtils.js";
-import { throttle as ft } from "./utils/throttle.js";
-import { isTargetElement as mt, offBodyTouchstart as st, onBodyTouchstart as dt } from "./utils/touchEvents.js";
-import { getTreemap as xt } from "./utils/treemap.js";
-import { KvBlueskyIcon as nt } from "./assets/icons/bluesky.js";
-import { KV_CLASSIC_LOAN_CARD_FRAGMENT as vt, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as At } from "./vue/KvClassicLoanCard2.js";
-import { KV_COMPACT_LOAN_CARD_FRAGMENT as Ct, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as _t } from "./vue/KvCompactLoanCard2.js";
-import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as Nt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as ct } from "./vue/KvIntroductionLoanCard2.js";
-import { KV_LEND_CTA_FRAGMENT as Et, KV_LEND_CTA_USER_FRAGMENT as Rt } from "./vue/KvLendCta2.js";
-import { KV_LOAN_ACTIVITIES_FRAGMENT as Mt } from "./vue/KvLoanActivities2.js";
-import { KV_LOAN_BOOKMARK_FRAGMENT as St } from "./vue/KvLoanBookmark2.js";
-import { KV_LOAN_TAG_FRAGMENT as Pt } from "./vue/KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as Ft } from "./vue/KvLoanUse2.js";
-import { KV_WIDE_LOAN_CARD_FRAGMENT as Vt, KV_WIDE_LOAN_CARD_USER_FRAGMENT as Bt } from "./vue/KvWideLoanCard2.js";
+import { animationCoordinator as kr, computeMapCenter as Ur, computeMapZoom as wr, generateMapMarkers as Wr, getCoordinatesBetween as Hr, getCountryColor as jr, getLoansIntervals as zr } from "./utils/mapUtils.js";
+import { lockPrintSingleEl as Zr, unlockPrintSingleEl as qr } from "./utils/printing.js";
+import { lockScroll as Xr, lockScrollSmallOnly as Yr, unlockScroll as $r, unlockScrollSmallOnly as ot } from "./utils/scrollLock.js";
+import { buildTailwindClassName as rt, headerNumberCase as tt, kebabCase as at, removeObjectProperty as ft } from "./utils/themeUtils.js";
+import { throttle as mt } from "./utils/throttle.js";
+import { isTargetElement as pt, offBodyTouchstart as dt, onBodyTouchstart as ut } from "./utils/touchEvents.js";
+import { getTreemap as nt } from "./utils/treemap.js";
+import { KvBlueskyIcon as vt } from "./assets/icons/bluesky.js";
+import { KV_CLASSIC_LOAN_CARD_FRAGMENT as Ct, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as it } from "./vue/KvClassicLoanCard2.js";
+import { KV_COMPACT_LOAN_CARD_FRAGMENT as ct, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as Lt } from "./vue/KvCompactLoanCard2.js";
+import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as Tt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as Et } from "./vue/KvIntroductionLoanCard2.js";
+import { KV_LEND_CTA_FRAGMENT as Mt, KV_LEND_CTA_USER_FRAGMENT as Ot } from "./vue/KvLendCta2.js";
+import { KV_LOAN_ACTIVITIES_FRAGMENT as St } from "./vue/KvLoanActivities2.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as Pt } from "./vue/KvLoanBookmark2.js";
+import { KV_LOAN_TAG_FRAGMENT as Ft } from "./vue/KvLoanTag2.js";
+import { KV_LOAN_USE_FRAGMENT as Vt } from "./vue/KvLoanUse2.js";
+import { KV_WIDE_LOAN_CARD_FRAGMENT as Dt, KV_WIDE_LOAN_CARD_USER_FRAGMENT as yt } from "./vue/KvWideLoanCard2.js";
 export {
-  Ze as Alea,
+  Ye as Alea,
   Sr as BALANCE_CAMPAIGN,
   gr as BASE_CAMPAIGN,
   Pr as ERL_COOKIE_NAME,
-  vt as KV_CLASSIC_LOAN_CARD_FRAGMENT,
-  At as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
-  Ct as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  _t as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  Nt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  ct as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  Et as KV_LEND_CTA_FRAGMENT,
-  Rt as KV_LEND_CTA_USER_FRAGMENT,
-  Mt as KV_LOAN_ACTIVITIES_FRAGMENT,
-  St as KV_LOAN_BOOKMARK_FRAGMENT,
-  Mo as KV_LOAN_INFO_CARD_FRAGMENT,
-  Pt as KV_LOAN_TAG_FRAGMENT,
-  Ft as KV_LOAN_USE_FRAGMENT,
-  Vt as KV_WIDE_LOAN_CARD_FRAGMENT,
-  Bt as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
+  Ct as KV_CLASSIC_LOAN_CARD_FRAGMENT,
+  it as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  ct as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  Lt as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  Tt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  Et as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  Mt as KV_LEND_CTA_FRAGMENT,
+  Ot as KV_LEND_CTA_USER_FRAGMENT,
+  St as KV_LOAN_ACTIVITIES_FRAGMENT,
+  Pt as KV_LOAN_BOOKMARK_FRAGMENT,
+  Oo as KV_LOAN_INFO_CARD_FRAGMENT,
+  Ft as KV_LOAN_TAG_FRAGMENT,
+  Vt as KV_LOAN_USE_FRAGMENT,
+  Dt as KV_WIDE_LOAN_CARD_FRAGMENT,
+  yt as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
   r as KvAccordionItem,
   a as KvActivityRow,
   ze as KvAtbModal,
-  nt as KvBlueskyIcon,
+  vt as KvBlueskyIcon,
   l as KvBorrowerImage,
   s as KvButton,
-  p as KvCardFrame,
-  u as KvCarousel,
+  d as KvCardFrame,
+  x as KvCarousel,
   K as KvCartModal,
   A as KvCartPill,
-  C as KvCheckbox,
-  L as KvCheckoutReceipt,
-  c as KvChip,
+  i as KvCheckbox,
+  c as KvCheckoutReceipt,
+  N as KvChip,
   E as KvClassicLoanCard,
   I as KvCommentsAdd,
   g as KvCommentsContainer,
@@ -144,27 +144,27 @@ export {
   h as KvCommentsList,
   B as KvCommentsListItem,
   y as KvCommentsReplyButton,
-  O as KvCompactLoanCard,
+  M as KvCompactLoanCard,
   k as KvContentfulImg,
   w as KvCountdownTimer,
   H as KvDatePicker,
   z as KvExpandable,
-  q as KvExpandableQuestion,
-  X as KvFlag,
-  Z as KvGrid,
+  Z as KvExpandableQuestion,
+  J as KvFlag,
+  Y as KvGrid,
   oo as KvIconButton,
   ro as KvImpactDashboardHeader,
   ao as KvImpactVerticalSelector,
   lo as KvInlineActivityCard,
   so as KvInlineActivityFeed,
-  xo as KvIntroductionLoanCard,
+  uo as KvIntroductionLoanCard,
   no as KvLendAmountButton,
   vo as KvLendCta,
-  io as KvLightbox,
+  Co as KvLightbox,
   _o as KvLineGraph,
   yo as KvLoadingPlaceholder,
   ko as KvLoadingSpinner,
-  No as KvLoanActivities,
+  Lo as KvLoanActivities,
   To as KvLoanBookmark,
   Ro as KvLoanCallouts,
   Io as KvLoanInfoCard,
@@ -175,24 +175,24 @@ export {
   wo as KvMap,
   Ho as KvMaterialIcon,
   zo as KvPageContainer,
-  qo as KvPagination,
-  Xo as KvPieChart,
-  Zo as KvPill,
+  Zo as KvPagination,
+  Jo as KvPieChart,
+  Yo as KvPill,
   oe as KvPopper,
   re as KvProgressBar,
   ae as KvProgressCircle,
   le as KvPulsingDot,
   se as KvRadio,
-  qe as KvSecondaryNav,
-  pe as KvSelect,
-  ue as KvSideSheet,
+  Ze as KvSecondaryNav,
+  de as KvSelect,
+  xe as KvSideSheet,
   Ke as KvSwitch,
   Ae as KvTab,
-  Ce as KvTabPanel,
-  Le as KvTabs,
-  ce as KvTextInput,
+  ie as KvTabPanel,
+  ce as KvTabs,
+  Ne as KvTextInput,
   Ee as KvTextLink,
-  Oe as KvThemeProvider,
+  Me as KvThemeProvider,
   Ie as KvToast,
   ge as KvTooltip,
   Ge as KvTreeMapChart,
@@ -202,7 +202,7 @@ export {
   ke as KvVotingCard,
   we as KvVotingCardV2,
   He as KvWideLoanCard,
-  Xe as KvWwwHeader,
+  Je as KvWwwHeader,
   Tr as LOAN_CALLOUTS_FRAGMENT,
   Er as LOAN_GEOCODE_FRAGMENT,
   Rr as LOAN_PROGRESS_FRAGMENT,
@@ -211,43 +211,45 @@ export {
   Fr as TOP_UP_CAMPAIGN,
   sr as abc,
   kr as animationCoordinator,
-  ot as buildTailwindClassName,
+  rt as buildTailwindClassName,
   lr as carouselUtil,
   Ar as collapse,
-  ur as debounce,
-  ir as expand,
-  Ur as generateMapMarkers,
-  wr as getCoordinatesBetween,
-  Wr as getCountryColor,
+  Ur as computeMapCenter,
+  wr as computeMapZoom,
+  xr as debounce,
+  Cr as expand,
+  Wr as generateMapMarkers,
+  Hr as getCoordinatesBetween,
+  jr as getCountryColor,
   hr as getDropdownPriceArray,
   _r as getKivaImageUrl,
   Vr as getLendCtaSelectedOption,
-  Hr as getLoansIntervals,
-  xt as getTreemap,
+  zr as getLoansIntervals,
+  nt as getTreemap,
   er as groupBy,
-  et as headerNumberCase,
-  dr as indexIn,
+  tt as headerNumberCase,
+  pr as indexIn,
   Br as isBetween25And50,
-  Lr as isLegacyPlaceholderAvatar,
+  cr as isLegacyPlaceholderAvatar,
   Dr as isLessThan25,
-  mt as isTargetElement,
-  rt as kebabCase,
-  Or as loanCardComputedProperties,
-  Mr as loanCardMethods,
-  zr as lockPrintSingleEl,
-  Jr as lockScroll,
-  Xr as lockScrollSmallOnly,
-  st as offBodyTouchstart,
-  dt as onBodyTouchstart,
-  Nr as randomizedUserAvatarClass,
-  tt as removeObjectProperty,
+  pt as isTargetElement,
+  at as kebabCase,
+  Mr as loanCardComputedProperties,
+  Or as loanCardMethods,
+  Zr as lockPrintSingleEl,
+  Xr as lockScroll,
+  Yr as lockScrollSmallOnly,
+  dt as offBodyTouchstart,
+  ut as onBodyTouchstart,
+  Lr as randomizedUserAvatarClass,
+  ft as removeObjectProperty,
   rr as sortBy,
-  pr as startsWith,
-  ft as throttle,
+  dr as startsWith,
+  mt as throttle,
   yr as truncateStringByWords,
-  Qr as unlockPrintSingleEl,
-  Yr as unlockScroll,
-  Zr as unlockScrollSmallOnly,
+  qr as unlockPrintSingleEl,
+  $r as unlockScroll,
+  ot as unlockScrollSmallOnly,
   ar as useAttrs,
   Kr as useEventListener
 };

package/dist/utils/mapUtils.d.ts

@@ -3,3 +3,14 @@ export declare function generateMapMarkers(mapInstance: any, borrowerPoints: any
 export declare function animationCoordinator(mapInstance: any, borrowerPoints: any): Promise<void>;
 export declare const getLoansIntervals: (min: number, max: number, nbIntervals: number) => number[][];
 export declare const getCountryColor: (lenderLoans: number, countriesData: any[], kvTokensPrimitives: any, defaultBaseColor: string) => string;
+export declare const computeMapCenter: (data: Array<{
+    lat: number;
+    long: number;
+}>) => {
+    lat: number;
+    long: number;
+};
+export declare const computeMapZoom: (data: Array<{
+    lat: number;
+    long: number;
+}>) => number;

package/dist/utils/mapUtils.js

@@ -1,9 +1,9 @@
-function p(e, o, r) {
+function y(e, o, r) {
   return (Math.random() * (o - e) + e).toFixed(r) * 1;
 }
-const d = Array.from(
+const M = Array.from(
   { length: 20 },
-  () => [p(-180, 180, 3), p(-90, 90, 3)]
+  () => [y(-180, 180, 3), y(-90, 90, 3)]
 ), m = [
   100,
   300,
@@ -12,18 +12,18 @@ const d = Array.from(
   800,
   1e3
 ];
-function M(e, o, r) {
+function d(e, o, r) {
   if (!e || !o || !r || r < 1 || !Array.isArray(e) || !Array.isArray(o) || e.length !== 2 || o.length !== 2)
     return [];
-  const n = o[0] - e[0], s = o[1] - e[1], i = n / r, a = s / r;
+  const n = o[0] - e[0], i = o[1] - e[1], a = n / r, s = i / r;
   let t = 0, l = 0;
   const c = [];
-  for (; Math.abs(t) < Math.abs(n) || Math.abs(l) < Math.abs(s); )
-    c.push([e[0] + t, e[1] + l]), Math.abs(t) < Math.abs(n) && (t += i), Math.abs(l) < Math.abs(s) && (l += a);
+  for (; Math.abs(t) < Math.abs(n) || Math.abs(l) < Math.abs(i); )
+    c.push([e[0] + t, e[1] + l]), Math.abs(t) < Math.abs(n) && (t += a), Math.abs(l) < Math.abs(i) && (l += s);
   return c[c.length - 1] = [o[0], o[1]], c;
 }
-function b(e, o, r) {
-  return new Promise((s) => {
+function S(e, o, r) {
+  return new Promise((i) => {
     e.addSource("endpoint", {
       type: "geojson",
       data: {
@@ -34,8 +34,8 @@ function b(e, o, r) {
         ]
       }
     });
-    const i = (a, t, l, c = !1) => {
-      const f = M(a, t, 100);
+    const a = (s, t, l, c = !1) => {
+      const f = d(s, t, 100);
       let h = 0;
       const u = {
         type: "FeatureCollection",
@@ -52,8 +52,8 @@ function b(e, o, r) {
         data: {
           type: "Point",
           coordinates: [
-            a[0],
-            a[1]
+            s[0],
+            s[1]
           ]
         }
       }), e.addLayer({
@@ -72,22 +72,22 @@ function b(e, o, r) {
           "line-width": 2
         }
       });
-      const y = () => {
+      const p = () => {
         if (h < f.length)
-          u.features[0].geometry.coordinates.push(f[h]), e.getSource(`line-animation${l}`).setData(u), requestAnimationFrame(y), h += 1;
+          u.features[0].geometry.coordinates.push(f[h]), e.getSource(`line-animation${l}`).setData(u), requestAnimationFrame(p), h += 1;
         else {
           const g = u.features[0].geometry.coordinates;
-          g.shift(), g.shift(), g.length > 0 ? (u.features[0].geometry.coordinates = g, e.getSource(`line-animation${l}`).setData(u), requestAnimationFrame(y)) : (e.removeLayer(`line-animation${l}`), e.removeSource(`line-animation${l}`), e.removeSource(`startPoint${l}`), c && (e.removeSource("endpoint"), s()));
+          g.shift(), g.shift(), g.length > 0 ? (u.features[0].geometry.coordinates = g, e.getSource(`line-animation${l}`).setData(u), requestAnimationFrame(p)) : (e.removeLayer(`line-animation${l}`), e.removeSource(`line-animation${l}`), e.removeSource(`startPoint${l}`), c && (e.removeSource("endpoint"), i()));
         }
       };
-      y();
+      p();
     };
-    o.forEach((a, t) => {
-      i(a, r, t, t === o.length - 1);
+    o.forEach((s, t) => {
+      a(s, r, t, t === o.length - 1);
     });
   });
 }
-function $(e, o) {
+function F(e, o) {
   const r = {
     type: "FeatureCollection"
   };
@@ -103,15 +103,15 @@ function $(e, o) {
       coordinates: n.location
     }
   })), r.features.forEach((n) => {
-    const s = document.createElement("div");
-    s.className = "map-marker", s.style.backgroundImage = `url(${n.properties.image})`, s.style.width = `${n.properties.iconSize[0]}px`, s.style.height = `${n.properties.iconSize[1]}px`, new maplibregl.Marker({ element: s }).setLngLat(n.geometry.coordinates).addTo(e);
+    const i = document.createElement("div");
+    i.className = "map-marker", i.style.backgroundImage = `url(${n.properties.image})`, i.style.width = `${n.properties.iconSize[0]}px`, i.style.height = `${n.properties.iconSize[1]}px`, new maplibregl.Marker({ element: i }).setLngLat(n.geometry.coordinates).addTo(e);
   });
 }
-function A(e, o) {
+function $(e, o) {
   return new Promise((r) => {
-    const n = o.map((t) => t.location), s = n.length;
-    let i = 0;
-    const a = (t) => {
+    const n = o.map((t) => t.location), i = n.length;
+    let a = 0;
+    const s = (t) => {
       e.flyTo({
         // These options control the ending camera position: centered at
         // the target, at zoom level 9, and north up.
@@ -135,45 +135,59 @@ function A(e, o) {
       }, { flyEnd: !0 });
     };
     e.on("moveend", (t) => {
-      t.flyEnd === !0 && b(e, d, n[i]).then(() => {
-        i < s - 1 ? (i += 1, a(i)) : r();
+      t.flyEnd === !0 && S(e, M, n[a]).then(() => {
+        a < i - 1 ? (a += 1, s(a)) : r();
       });
-    }), a(i);
+    }), s(a);
   });
 }
-const F = (e, o, r) => {
-  const n = Math.floor((o - e) / r), s = [];
+const b = (e, o, r) => {
+  const n = Math.floor((o - e) / r), i = [];
   if (n <= 0) return [[e, o]];
-  for (let i = 0; i < r; i += 1) {
-    let a = e + i * n, t = a + n < o ? a + n : o;
-    if (i > 0 && (a += 1 * i, t += 1 * i), i > 0 && t > o && (t = o), i === r - 1 && (t < o || t > o) && (t = o), s.push([a, t]), t >= o) break;
+  for (let a = 0; a < r; a += 1) {
+    let s = e + a * n, t = s + n < o ? s + n : o;
+    if (a > 0 && (s += 1 * a, t += 1 * a), a > 0 && t > o && (t = o), a === r - 1 && (t < o || t > o) && (t = o), i.push([s, t]), t >= o) break;
   }
-  return s;
-}, S = (e, o, r, n) => {
-  const s = [];
+  return i;
+}, A = (e, o, r, n) => {
+  const i = [];
   o.forEach((t) => {
-    s.push(t.value);
+    i.push(t.value);
   });
-  const i = Math.max(...s), a = F(1, i, 6);
-  if (a.length === 1) {
-    const [t, l] = a[0];
+  const a = Math.max(...i), s = b(1, a, 6);
+  if (s.length === 1) {
+    const [t, l] = s[0];
     for (let c = 0; c < l; c += 1) {
       const f = c + 1;
       if (e && e >= f && e < f + 1)
         return r.colors.brand[m[c]];
     }
   } else
-    for (let t = 0; t < a.length; t += 1) {
-      const [l, c] = a[t];
+    for (let t = 0; t < s.length; t += 1) {
+      const [l, c] = s[t];
       if (e && e >= l && e <= c)
         return r.colors.brand[m[t]];
     }
   return n || r.colors.gray[300];
+}, j = (e) => {
+  if (!e.length) return { lat: 0, long: 0 };
+  const o = e.reduce((n, i) => n + i.lat, 0) / e.length, r = e.reduce((n, i) => n + i.long, 0) / e.length;
+  return { lat: o, long: r };
+}, w = (e) => {
+  if (!e.length) return 2;
+  if (e.length === 1) return 5;
+  const o = e.map((t) => t.lat), r = e.map((t) => t.long), n = Math.max(...o) - Math.min(...o), i = Math.max(...r) - Math.min(...r), a = Math.max(n, i);
+  if (a < 1) return 6;
+  if (a < 10) return 5;
+  const s = Math.floor(Math.log2(360 / (a * 2.5)));
+  return Math.max(1, Math.min(s, 6));
 };
 export {
-  A as animationCoordinator,
-  $ as generateMapMarkers,
-  M as getCoordinatesBetween,
-  S as getCountryColor,
-  F as getLoansIntervals
+  $ as animationCoordinator,
+  j as computeMapCenter,
+  w as computeMapZoom,
+  F as generateMapMarkers,
+  d as getCoordinatesBetween,
+  A as getCountryColor,
+  b as getLoansIntervals
 };

package/dist/vue/KvMap.vue.d.ts

@@ -72,6 +72,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: any;
     };
+    optimizeInitialMapZoom: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {
     hasWebGL: boolean;
     leafletReady: boolean;
@@ -87,6 +91,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         paddingBottom: string;
     };
     refString(): string;
+    computedCenter(): {
+        lat: number;
+        long: number;
+    };
+    effectiveLat(): any;
+    effectiveLong(): any;
+    effectiveZoomLevel(): any;
 }, {
     activateZoom(zoomOut?: boolean): false;
     createWrapperObserver(): void;
@@ -190,6 +201,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: any;
     };
+    optimizeInitialMapZoom: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     height: number;
     width: number;
@@ -209,5 +224,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     showFundraisingLoans: boolean;
     showTooltips: boolean;
     defaultBaseColor: string;
+    optimizeInitialMapZoom: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/vue/KvMap2.js

@@ -1,6 +1,6 @@
 import o from "@kiva/kv-tokens";
-import { generateMapMarkers as l, animationCoordinator as h, getCountryColor as r } from "../utils/mapUtils.js";
-const c = {
+import { computeMapCenter as l, computeMapZoom as h, generateMapMarkers as c, animationCoordinator as m, getCountryColor as r } from "../utils/mapUtils.js";
+const f = {
   name: "KvMap",
   props: {
     /**
@@ -152,6 +152,17 @@ const c = {
     defaultBaseColor: {
       type: String,
       default: null
+    },
+    /**
+     * Automatically compute optimal map center and zoom level based on countriesData distribution.
+     * This is an alternative to setting lat/long/zoomLevel directly.
+     * Requires: countriesData prop must contain data with lat/long coordinates.
+     * Note: Explicit lat/long props will override the computed center when provided.
+     * When enabled, zoomLevel prop is ignored in favor of the computed optimal zoom.
+     */
+    optimizeInitialMapZoom: {
+      type: Boolean,
+      default: !1
     }
   },
   data() {
@@ -177,14 +188,48 @@ const c = {
     },
     refString() {
       return `mapholder${this.mapId}`;
+    },
+    /**
+     * Computed center from countriesData when optimizeInitialMapZoom is enabled
+     */
+    computedCenter() {
+      var e;
+      return !this.optimizeInitialMapZoom || !((e = this.countriesData) != null && e.length) ? { lat: 0, long: 0 } : l(this.countriesData);
+    },
+    /**
+     * Effective latitude: explicit prop overrides computed value
+     */
+    effectiveLat() {
+      var e;
+      return this.lat !== null ? this.lat : this.optimizeInitialMapZoom && ((e = this.countriesData) != null && e.length) ? this.computedCenter.lat : null;
+    },
+    /**
+     * Effective longitude: explicit prop overrides computed value
+     */
+    effectiveLong() {
+      var e;
+      return this.long !== null ? this.long : this.optimizeInitialMapZoom && ((e = this.countriesData) != null && e.length) ? this.computedCenter.long : null;
+    },
+    /**
+     * Effective zoom level: when optimizing, always use computed zoom
+     */
+    effectiveZoomLevel() {
+      var e;
+      return this.optimizeInitialMapZoom && ((e = this.countriesData) != null && e.length) ? h(this.countriesData) : this.zoomLevel;
     }
   },
   watch: {
     lat(e, t) {
-      t === null && this.long !== null && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
+      t === null && this.effectiveLong !== null && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
     },
     long(e, t) {
-      t === null && this.lat !== null && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
+      t === null && this.effectiveLat !== null && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
+    },
+    countriesData: {
+      handler() {
+        this.optimizeInitialMapZoom && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
+      },
+      deep: !0
     },
     showFundraisingLoans() {
       this.mapInstance && (this.mapInstance.remove(), this.initializeLeaflet());
@@ -199,13 +244,13 @@ const c = {
   methods: {
     activateZoom(e = !1) {
       const { mapInstance: t, hasWebGL: i, mapLibreReady: a } = this, s = t.getZoom();
-      if (!e && s === this.zoomLevel || e && s === this.initialZoom) return !1;
+      if (!e && s === this.effectiveZoomLevel || e && s === this.initialZoom) return !1;
       this.zoomActive = !0;
       const n = window.setTimeout(() => {
         i && a ? t.zoomTo(
-          e ? this.initialZoom : this.zoomLevel,
+          e ? this.initialZoom : this.effectiveZoomLevel,
           { duration: 1200 }
-        ) : t.setZoom(e ? this.initialZoom : this.zoomLevel), clearTimeout(n), this.zoomActive = !1;
+        ) : t.setZoom(e ? this.initialZoom : this.effectiveZoomLevel), clearTimeout(n), this.zoomActive = !1;
       }, this.autoZoomDelay);
     },
     createWrapperObserver() {
@@ -231,15 +276,15 @@ const c = {
     initializeMap() {
       const e = document.createElement("script"), t = document.createElement("link");
       e.setAttribute("async", ""), e.setAttribute("defer", ""), t.setAttribute("rel", "stylesheet"), this.checkWebGL() ? (e.setAttribute("vmid", `maplibregljs${this.mapId}`), t.setAttribute("vmid", `maplibreglcss${this.mapId}`), e.setAttribute("src", "https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"), t.setAttribute("href", "https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"), this.testDelayedGlobalLibrary("maplibregl").then((i) => {
-        i.loaded && !this.mapLoaded && !this.useLeaflet && this.lat != null && this.long != null && (this.initializeMapLibre(), this.mapLibreReady = !0);
+        i.loaded && !this.mapLoaded && !this.useLeaflet && this.effectiveLat != null && this.effectiveLong != null && (this.initializeMapLibre(), this.mapLibreReady = !0);
       })) : (e.setAttribute("vmid", `leafletjs${this.mapId}`), t.setAttribute("vmid", `leaftletcss${this.mapId}`), e.setAttribute("src", "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"), t.setAttribute("href", "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"), this.testDelayedGlobalLibrary("L").then((i) => {
-        i.loaded && !this.mapLoaded && this.lat != null && this.long != null && (this.initializeLeaflet(), this.leafletReady = !0);
+        i.loaded && !this.mapLoaded && this.effectiveLat != null && this.effectiveLong != null && (this.initializeLeaflet(), this.leafletReady = !0);
       })), document.head.appendChild(e), document.head.appendChild(t);
     },
     initializeLeaflet() {
       this.mapInstance = L.map(`kv-map-holder-${this.mapId}`, {
-        center: [this.lat, this.long],
-        zoom: this.initialZoom || this.zoomLevel,
+        center: [this.effectiveLat, this.effectiveLong],
+        zoom: this.initialZoom || this.effectiveZoomLevel,
         // todo make props for the following options
         dragging: this.allowDragging,
         zoomControl: this.showZoomControl,
@@ -279,8 +324,8 @@ const c = {
       this.showLabels && (e = "https://api.maptiler.com/maps/bright/style.json?key=n1Mz5ziX3k6JfdjFe7mx"), this.mapInstance = new maplibregl.Map({
         container: `kv-map-holder-${this.mapId}`,
         style: e,
-        center: [this.long, this.lat],
-        zoom: this.initialZoom || this.zoomLevel,
+        center: [this.effectiveLong, this.effectiveLat],
+        zoom: this.initialZoom || this.effectiveZoomLevel,
         attributionControl: !1,
         dragPan: this.allowDragging,
         scrollZoom: !1,
@@ -294,11 +339,11 @@ const c = {
     animateMap() {
       this.mapInstance.style.stylesheet.layers.forEach((e) => {
         e.type === "symbol" && this.mapInstance.removeLayer(e.id);
-      }), l(this.mapInstance, this.advancedAnimation.borrowerPoints), setTimeout(() => {
-        h(this.mapInstance, this.advancedAnimation.borrowerPoints).then(() => {
+      }), c(this.mapInstance, this.advancedAnimation.borrowerPoints), setTimeout(() => {
+        m(this.mapInstance, this.advancedAnimation.borrowerPoints).then(() => {
           this.mapInstance.dragPan.enable(), this.mapInstance.scrollZoom.enable(), this.mapInstance.scrollZoom.enable(), this.mapInstance.easeTo({
-            center: [this.long, this.lat],
-            zoom: this.initialZoom || this.zoomLevel
+            center: [this.effectiveLong, this.effectiveLat],
+            zoom: this.initialZoom || this.effectiveZoomLevel
           });
         });
       }, 500);
@@ -372,5 +417,5 @@ const c = {
   }
 };
 export {
-  c as default
+  f as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.5.5",
+  "version": "8.5.6",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "00f1e4db46e433ceadce0bb2002f721b1453be58"
+  "gitHead": "f5556880afcdae5bef45601e29353e5c9406160f"
 }