@kiva/kv-components 8.5.6 → 8.6.1

package/dist/vue/KvLightbox2.js

@@ -1,4 +1,4 @@
-import { toRefs as h, ref as r, nextTick as k, computed as x, watch as S, onMounted as C, onBeforeUnmount as B } from "vue";
+import { toRefs as h, ref as u, nextTick as k, computed as x, watch as S, onMounted as C, onBeforeUnmount as B } from "vue";
 import { mdiClose as E } from "@mdi/js";
 import { useFocusTrap as L } from "@vueuse/integrations/useFocusTrap";
 import { hideOthers as w } from "../vendor/aria-hidden/dist/es2015/index.js";
@@ -57,16 +57,16 @@ const A = {
   ],
   setup(v, { emit: g }) {
     const {
-      visible: u,
+      visible: o,
       variant: d,
       preventClose: p
-    } = h(v), o = r(null), t = r(null), m = r(null), a = r(null), i = r(null);
+    } = h(v), n = u(null), t = u(null), m = u(null), a = u(null), i = u(null);
     k(() => {
       const {
         activate: e,
         deactivate: l
       } = L([
-        o.value,
+        n.value,
         // This lightbox
         '[role="alert"]'
         // Any open toasts/alerts on the page
@@ -77,36 +77,36 @@ const A = {
       a.value = e, i.value = l;
     });
     let c = null, s = null;
-    const b = x(() => d.value === "alert" ? "alertdialog" : "dialog"), n = (e = "") => {
+    const b = x(() => d.value === "alert" ? "alertdialog" : "dialog"), r = (e = "") => {
       var l;
-      o.value && t.value && ((l = i.value) == null || l.call(i), t.value.scrollTop = 0, I(t.value)), P(), c && (c(), c = null), document.removeEventListener("keyup", s), g("lightbox-closed", { type: e });
+      n.value && t.value && ((l = i.value) == null || l.call(i), t.value.scrollTop = 0, I(t.value)), P(), c && (c(), c = null), document.removeEventListener("keyup", s), o.value && g("lightbox-closed", { type: e });
     };
     s = (e) => {
-      e && e.key === "Escape" && !p.value && n();
+      e && e.key === "Escape" && !p.value && r();
     };
     const y = () => {
-      p.value || n("background-click");
+      p.value || r("background-click");
     }, f = () => {
-      u.value && (document.addEventListener("keyup", s), k(() => {
+      o.value && (document.addEventListener("keyup", s), k(() => {
         var e;
-        if (o.value && t.value && ((e = a.value) == null || e.call(a), c = w(o.value), K(t.value)), q(), d.value === "alert") {
+        if (n.value && t.value && ((e = a.value) == null || e.call(a), c = w(n.value), K(t.value)), q(), d.value === "alert") {
           const l = m.value.querySelector("button");
           l && l.focus();
         }
       }));
     };
-    return S(u, () => {
-      u.value ? f() : n();
+    return S(o, () => {
+      o.value ? f() : r();
     }), C(() => {
-      u.value && f();
-    }), B(() => n()), {
+      o.value && f();
+    }), B(() => r()), {
       mdiClose: E,
       role: b,
-      kvLightbox: o,
+      kvLightbox: n,
       kvLightboxBody: t,
       onKeyUp: s,
       onScreenClick: y,
-      hide: n,
+      hide: r,
       show: f,
       controlsRef: m
     };

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/package.json

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