@kiva/kv-components 8.6.0 → 8.6.2-next.0

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

@@ -83,7 +83,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     mapLibreReady: boolean;
     mapLoaded: boolean;
     zoomActive: boolean;
-    countriesBorders: {};
+    countriesBorders: any;
+    countriesBordersPromise: any;
 }, {
     mapDimensions(): {
         height: string;
@@ -104,7 +105,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     destroyWrapperObserver(): void;
     checkWebGL(): boolean;
     initializeMap(): void;
-    initializeLeaflet(): void;
+    initializeLeaflet(): Promise<void>;
     initializeMapLibre(): void;
     animateMap(): void;
     checkIntersectionObserverSupport(): boolean;
@@ -117,6 +118,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         loaded: boolean;
     }>;
     getCountriesData(): any;
+    ensureCountriesBordersLoaded(): any;
     countryStyle(feature: any): {
         color: any;
         fillColor: string;

package/dist/vue/KvMap2.js

@@ -1,6 +1,6 @@
-import o from "@kiva/kv-tokens";
-import { computeMapCenter as l, computeMapZoom as h, generateMapMarkers as c, animationCoordinator as m, getCountryColor as r } from "../utils/mapUtils.js";
-const f = {
+import r from "@kiva/kv-tokens";
+import { computeMapCenter as l, computeMapZoom as h, generateMapMarkers as c, animationCoordinator as u, getCountryColor as n } from "../utils/mapUtils.js";
+const p = {
   name: "KvMap",
   props: {
     /**
@@ -173,13 +173,14 @@ const f = {
       mapLibreReady: !1,
       mapLoaded: !1,
       zoomActive: !1,
-      countriesBorders: {}
+      countriesBorders: null,
+      countriesBordersPromise: null
     };
   },
   computed: {
     mapDimensions() {
-      var a;
-      const e = (a = this.$el) == null ? void 0 : a.getBoundingClientRect(), t = e ? `${e.width / this.aspectRatio}px` : "300px", i = e ? `${e.width}px` : "100%";
+      var s;
+      const e = (s = this.$el) == null ? void 0 : s.getBoundingClientRect(), t = e ? `${e.width / this.aspectRatio}px` : "300px", i = e ? `${e.width}px` : "100%";
       return {
         height: this.height ? `${this.height}px` : t,
         width: this.width ? `${this.width}px` : i,
@@ -226,8 +227,8 @@ const f = {
       t === null && this.effectiveLat !== null && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
     },
     countriesData: {
-      handler() {
-        this.optimizeInitialMapZoom && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
+      handler(e) {
+        e != null && e.length && this.ensureCountriesBordersLoaded(), this.optimizeInitialMapZoom && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
       },
       deep: !0
     },
@@ -235,22 +236,23 @@ const f = {
       this.mapInstance && (this.mapInstance.remove(), this.initializeLeaflet());
     }
   },
-  async mounted() {
-    this.countriesData && (this.countriesBorders = await import("../data/ne_110m_admin_0_countries.json.js")), !this.mapLibreReady && !this.leafletReady && this.initializeMap();
+  mounted() {
+    var e;
+    (e = this.countriesData) != null && e.length && this.ensureCountriesBordersLoaded(), !this.mapLibreReady && !this.leafletReady && this.initializeMap();
   },
   beforeDestroy() {
     this.mapInstance && (!this.hasWebGL && !this.leafletReady && this.mapInstance.off(), this.mapInstance.remove()), this.destroyWrapperObserver();
   },
   methods: {
     activateZoom(e = !1) {
-      const { mapInstance: t, hasWebGL: i, mapLibreReady: a } = this, s = t.getZoom();
-      if (!e && s === this.effectiveZoomLevel || e && s === this.initialZoom) return !1;
+      const { mapInstance: t, hasWebGL: i, mapLibreReady: s } = this, a = t.getZoom();
+      if (!e && a === this.effectiveZoomLevel || e && a === this.initialZoom) return !1;
       this.zoomActive = !0;
-      const n = window.setTimeout(() => {
-        i && a ? t.zoomTo(
+      const o = window.setTimeout(() => {
+        i && s ? t.zoomTo(
           e ? this.initialZoom : this.effectiveZoomLevel,
           { duration: 1200 }
-        ) : t.setZoom(e ? this.initialZoom : this.effectiveZoomLevel), clearTimeout(n), this.zoomActive = !1;
+        ) : t.setZoom(e ? this.initialZoom : this.effectiveZoomLevel), clearTimeout(o), this.zoomActive = !1;
       }, this.autoZoomDelay);
     },
     createWrapperObserver() {
@@ -259,8 +261,8 @@ const f = {
         targets: [(e = this.$refs) == null ? void 0 : e[this.refString]],
         callback: (t) => {
           t.forEach((i) => {
-            var a, s;
-            i.target === ((a = this.$refs) == null ? void 0 : a[this.refString]) && !this.zoomActive && i.intersectionRatio > 0 && (this.initialZoom !== null && this.activateZoom(), (s = this.advancedAnimation) != null && s.borrowerPoints && this.animateMap());
+            var s, a;
+            i.target === ((s = this.$refs) == null ? void 0 : s[this.refString]) && !this.zoomActive && i.intersectionRatio > 0 && (this.initialZoom !== null && this.activateZoom(), (a = this.advancedAnimation) != null && a.borrowerPoints && this.animateMap());
           });
         }
       });
@@ -281,7 +283,7 @@ const f = {
         i.loaded && !this.mapLoaded && this.effectiveLat != null && this.effectiveLong != null && (this.initializeLeaflet(), this.leafletReady = !0);
       })), document.head.appendChild(e), document.head.appendChild(t);
     },
-    initializeLeaflet() {
+    async initializeLeaflet() {
       this.mapInstance = L.map(`kv-map-holder-${this.mapId}`, {
         center: [this.effectiveLat, this.effectiveLong],
         zoom: this.initialZoom || this.effectiveZoomLevel,
@@ -290,7 +292,8 @@ const f = {
         zoomControl: this.showZoomControl,
         scrollWheelZoom: !1,
         doubleClickZoom: !1,
-        attributionControl: !1
+        attributionControl: !1,
+        worldCopyJump: !0
       });
       let e = "https://api.maptiler.com/maps/landscape/{z}/{x}/{y}.png?key=n1Mz5ziX3k6JfdjFe7mx";
       this.showLabels && (e = "https://api.maptiler.com/maps/bright/{z}/{x}/{y}.png?key=n1Mz5ziX3k6JfdjFe7mx"), L.tileLayer(e, {
@@ -298,7 +301,7 @@ const f = {
         zoomOffset: -1,
         minZoom: 1,
         crossOrigin: !0
-      }).addTo(this.mapInstance), this.countriesData.length > 0 && (L.geoJson(
+      }).addTo(this.mapInstance), this.countriesData.length > 0 && (await this.ensureCountriesBordersLoaded(), this.countriesBorders && (L.geoJson(
         this.getCountriesData(),
         {
           style: this.countryStyle,
@@ -307,17 +310,17 @@ const f = {
       ).addTo(this.mapInstance), this.countriesData.forEach((t) => {
         if (t.numLoansFundraising > 0 && this.showFundraisingLoans) {
           const i = L.circle([t.lat, t.long], {
-            color: o.colors.black,
+            color: r.colors.black,
             weight: 1,
-            fillColor: o.colors.brand[900],
+            fillColor: r.colors.brand[900],
             fillOpacity: 1,
             radius: 13e4
-          }).addTo(this.mapInstance), a = `Click to see ${t.numLoansFundraising} fundraising loans in ${t.label}`;
-          i.bindTooltip(a), i.on("click", () => {
+          }).addTo(this.mapInstance), s = `Click to see ${t.numLoansFundraising} fundraising loans in ${t.label}`;
+          i.bindTooltip(s), i.on("click", () => {
             this.circleMapClicked(t.isoCode);
           });
         }
-      })), this.mapLoaded = !0, this.initialZoom !== null && this.createWrapperObserver();
+      }))), this.mapLoaded = !0, this.initialZoom !== null && this.createWrapperObserver();
     },
     initializeMapLibre() {
       let e = "https://api.maptiler.com/maps/landscape/style.json?key=n1Mz5ziX3k6JfdjFe7mx";
@@ -340,7 +343,7 @@ const f = {
       this.mapInstance.style.stylesheet.layers.forEach((e) => {
         e.type === "symbol" && this.mapInstance.removeLayer(e.id);
       }), c(this.mapInstance, this.advancedAnimation.borrowerPoints), setTimeout(() => {
-        m(this.mapInstance, this.advancedAnimation.borrowerPoints).then(() => {
+        u(this.mapInstance, this.advancedAnimation.borrowerPoints).then(() => {
           this.mapInstance.dragPan.enable(), this.mapInstance.scrollZoom.enable(), this.mapInstance.scrollZoom.enable(), this.mapInstance.easeTo({
             center: [this.effectiveLong, this.effectiveLat],
             zoom: this.initialZoom || this.effectiveZoomLevel
@@ -357,42 +360,50 @@ const f = {
       targets: i
     } = {}) {
       if (this.checkIntersectionObserverSupport()) {
-        const a = new IntersectionObserver(e, t);
-        return i.forEach((s) => a.observe(s)), a;
+        const s = new IntersectionObserver(e, t);
+        return i.forEach((a) => s.observe(a)), s;
       }
     },
     testDelayedGlobalLibrary(e, t = 3e3) {
-      return new Promise((i, a) => {
-        typeof window > "u" && a(new Error("window object not available"));
-        let s;
-        const n = window.setInterval(() => {
-          typeof window[e] < "u" && (clearInterval(n), clearTimeout(s), i({ loaded: !0 }));
+      return new Promise((i, s) => {
+        typeof window > "u" && s(new Error("window object not available"));
+        let a;
+        const o = window.setInterval(() => {
+          typeof window[e] < "u" && (clearInterval(o), clearTimeout(a), i({ loaded: !0 }));
         }, 100);
-        s = window.setTimeout(() => {
-          clearInterval(n), clearTimeout(s), i({ loaded: !1 });
+        a = window.setTimeout(() => {
+          clearInterval(o), clearTimeout(a), i({ loaded: !1 });
         }, t);
       });
     },
     getCountriesData() {
-      const e = this.countriesBorders.features ?? [];
-      return e.forEach((t, i) => {
-        const a = this.countriesData.find((s) => s.isoCode === t.properties.iso_a2);
-        a && (e[i].lenderLoans = a.value, e[i].numLoansFundraising = a.numLoansFundraising);
-      }), this.countriesBorders;
+      if (!this.countriesBorders)
+        return { type: "FeatureCollection", features: [] };
+      const e = this.countriesBorders, t = e.features ?? [];
+      return t.forEach((i, s) => {
+        const a = this.countriesData.find((o) => o.isoCode === i.properties.iso_a2);
+        a && (t[s].lenderLoans = a.value, t[s].numLoansFundraising = a.numLoansFundraising);
+      }), e;
+    },
+    ensureCountriesBordersLoaded() {
+      return this.countriesBorders ? Promise.resolve(this.countriesBorders) : (this.countriesBordersPromise || (this.countriesBordersPromise = import("../data/ne_110m_admin_0_countries.json.js").then((e) => {
+        const t = e.default ?? e;
+        return JSON.parse(JSON.stringify(t));
+      }).then((e) => (this.countriesBorders = e, this.countriesBorders)).catch(() => (this.countriesBordersPromise = null, null))), this.countriesBordersPromise);
     },
     countryStyle(e) {
       return {
-        color: o.colors.white,
+        color: r.colors.white,
         // eslint-disable-next-line max-len
-        fillColor: r(e.lenderLoans, this.countriesData, o, this.defaultBaseColor),
+        fillColor: n(e.lenderLoans, this.countriesData, r, this.defaultBaseColor),
         weight: 1,
         fillOpacity: 1
       };
     },
     onEachCountryFeature(e, t) {
       if (!this.showTooltips) return;
-      const i = e.lenderLoans ? `${e.lenderLoans} loan${e.lenderLoans > 1 ? "s" : ""}` : "0 loans", a = `${e.properties.name} <br/> ${i}`;
-      t.bindTooltip(a, {
+      const i = e.lenderLoans ? `${e.lenderLoans} loan${e.lenderLoans > 1 ? "s" : ""}` : "0 loans", s = `${e.properties.name} <br/> ${i}`;
+      t.bindTooltip(s, {
         sticky: !0
       }), t.on({
         mouseover: this.highlightFeature,
@@ -401,14 +412,14 @@ const f = {
     },
     highlightFeature(e) {
       e.target.setStyle({
-        fillColor: o.colors.gray[500]
+        fillColor: r.colors.gray[500]
       });
     },
     resetHighlight(e) {
       const t = e.target, { feature: i } = t;
       t.setStyle({
         // eslint-disable-next-line max-len
-        fillColor: r(i.lenderLoans, this.countriesData, o, this.defaultBaseColor)
+        fillColor: n(i.lenderLoans, this.countriesData, r, this.defaultBaseColor)
       });
     },
     circleMapClicked(e) {
@@ -417,5 +428,5 @@ const f = {
   }
 };
 export {
-  f as default
+  p as default
 };

package/dist/vue/KvWwwHeader/LendMenu/KvLendMegaMenu.css

@@ -1 +1 @@
-.menu-heading[data-v-3e49579c]{font-weight:300;font-size:1rem;letter-spacing:0em;line-height:1.5}@media (min-width: 64rem){.menu-heading[data-v-3e49579c]{font-size:1.0625rem;letter-spacing:0em}}.menu-heading[data-v-3e49579c]{font-weight:400}.region-list[data-v-3e49579c],.search-list[data-v-3e49579c]{-moz-column-fill:auto;column-fill:auto;-moz-columns:3;columns:3;gap:2rem}.mega-menu-link[data-v-3e49579c]{display:inline-block;padding-top:.5rem;padding-bottom:.5rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.mega-menu-link[data-v-3e49579c]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:underline}.link-item[data-v-3e49579c]{width:11rem;text-decoration-line:none}.link-item[data-v-3e49579c]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:underline}
+.menu-heading[data-v-3e49579c]{font-weight:300;font-size:1rem;letter-spacing:0em;line-height:1.4}@media (min-width: 64rem){.menu-heading[data-v-3e49579c]{font-size:1rem;letter-spacing:0em}}.menu-heading[data-v-3e49579c]{font-weight:400}.region-list[data-v-3e49579c],.search-list[data-v-3e49579c]{-moz-column-fill:auto;column-fill:auto;-moz-columns:3;columns:3;gap:2rem}.mega-menu-link[data-v-3e49579c]{display:inline-block;padding-top:.5rem;padding-bottom:.5rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.mega-menu-link[data-v-3e49579c]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:underline}.link-item[data-v-3e49579c]{width:11rem;text-decoration-line:none}.link-item[data-v-3e49579c]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:underline}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.6.0",
+  "version": "8.6.2-next.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -34,7 +34,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@kiva/kv-tokens": "^3.7.2",
+    "@kiva/kv-tokens": "^3.7.3-next.0",
     "@kiva/vite-plugin-vue-lib-css": "^2.0.0",
     "@laynezh/vite-plugin-lib-assets": "^0.6.1",
     "@mdi/js": "^7.4.47",
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "63acdc66fbaed58ad53c37f709ac8793be9398ea"
+  "gitHead": "b20da6549c86bce57f12ac7a951a74f745a9399c"
 }