@kiva/kv-components 7.6.3 → 8.0.1

package/dist/vue/KvMap2.js

@@ -0,0 +1,376 @@
+import o from "@kiva/kv-tokens";
+import { generateMapMarkers as l, animationCoordinator as h, getCountryColor as r } from "../utils/mapUtils.js";
+const c = {
+  name: "KvMap",
+  props: {
+    /**
+     * Aspect Ration for computed map dimensions
+     * We'll divide the container width by this to determine the height
+     */
+    aspectRatio: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Control how quickly the autoZoom occurs
+     */
+    autoZoomDelay: {
+      type: Number,
+      default: 1500
+    },
+    /**
+     * Set the height to override aspect ratio driven and/or default dimensions
+     */
+    height: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Setting this initialZoom will zoom the map from initialZoom to zoom when the map enters the viewport
+     */
+    initialZoom: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Set the center point latitude
+     */
+    lat: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Set the center point longitude
+     */
+    long: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Set this if there are more than one map on the page
+     */
+    mapId: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Force use of Leaflet
+     */
+    useLeaflet: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Set the width to override aspect ratio driven and/or default dimensions
+     */
+    width: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Default zoom level
+     */
+    zoomLevel: {
+      type: Number,
+      default: 4
+    },
+    /**
+     * Borrower points object.
+     * If this object is present, the advanced animation will be triggered
+     * Sample object:
+     * {
+    	borrowerPoints: [
+    		{
+    			image: 'https://www.kiva.org/img/w80h80fz50/e60a3d61ff052d60991c5d6bbf4a45d3.webp',
+    			location: [-77.032, 38.913],
+    		},
+    		{
+    			image: 'https://www.kiva.org/img/w80h80fz50/6101929097c6e5de48232a4d1ae3b71c.webp',
+    			location: [41.402, 7.160],
+    		},
+    		{
+    			image: 'https://www.kiva.org/img/w80h80fz50/11e018ee3d8b9c5adee459c16a29d264.webp',
+    			location: [-73.356596, 3.501],
+    		},
+    	],
+    * }
+    */
+    advancedAnimation: {
+      type: Object,
+      required: !1,
+      default: () => ({})
+    },
+    /**
+     * Show the zoom control
+     */
+    showZoomControl: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Allow dragging of the map
+     */
+    allowDragging: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show labels on the map
+     * Working for leaflet only
+     */
+    showLabels: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Lender data for the map
+     * Working for leaflet only
+     */
+    countriesData: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Show fundraising loans
+     * Working for leaflet only
+     */
+    showFundraisingLoans: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show tooltips on fundraising loan circles
+     * Working for leaflet only
+     */
+    showTooltips: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Default base color for countries without loans
+     */
+    defaultBaseColor: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      hasWebGL: !1,
+      leafletReady: !1,
+      mapInstance: null,
+      mapLibreReady: !1,
+      mapLoaded: !1,
+      zoomActive: !1,
+      countriesBorders: {}
+    };
+  },
+  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%";
+      return {
+        height: this.height ? `${this.height}px` : t,
+        width: this.width ? `${this.width}px` : i,
+        paddingBottom: this.height ? `${this.height}px` : `${100 / this.aspectRatio}%`
+      };
+    },
+    refString() {
+      return `mapholder${this.mapId}`;
+    }
+  },
+  watch: {
+    lat(e, t) {
+      t === null && this.long && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
+    },
+    long(e, t) {
+      t === null && this.lat && !this.mapLibreReady && !this.leafletReady && this.initializeMap();
+    },
+    showFundraisingLoans() {
+      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();
+  },
+  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.zoomLevel || e && s === this.initialZoom) return !1;
+      this.zoomActive = !0;
+      const n = window.setTimeout(() => {
+        i && a ? t.zoomTo(
+          e ? this.initialZoom : this.zoomLevel,
+          { duration: 1200 }
+        ) : t.setZoom(e ? this.initialZoom : this.zoomLevel), clearTimeout(n), this.zoomActive = !1;
+      }, this.autoZoomDelay);
+    },
+    createWrapperObserver() {
+      var e;
+      this.wrapperObserver = this.createIntersectionObserver({
+        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());
+          });
+        }
+      });
+    },
+    destroyWrapperObserver() {
+      this.wrapperObserver && this.wrapperObserver.disconnect();
+    },
+    checkWebGL() {
+      if (this.useLeaflet || typeof document > "u") return !1;
+      const e = document.createElement("canvas"), t = e.getContext("webgl") || e.getContext("experimental-webgl");
+      return t && t instanceof WebGLRenderingContext ? (this.hasWebGL = !0, !0) : !1;
+    },
+    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 && this.long && (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 && this.long && (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,
+        // todo make props for the following options
+        dragging: this.allowDragging,
+        zoomControl: this.showZoomControl,
+        scrollWheelZoom: !1,
+        doubleClickZoom: !1,
+        attributionControl: !1
+      });
+      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, {
+        tileSize: 512,
+        zoomOffset: -1,
+        minZoom: 1,
+        crossOrigin: !0
+      }).addTo(this.mapInstance), this.countriesData.length > 0 && (L.geoJson(
+        this.getCountriesData(),
+        {
+          style: this.countryStyle,
+          onEachFeature: this.onEachCountryFeature
+        }
+      ).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,
+            weight: 1,
+            fillColor: o.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", () => {
+            this.circleMapClicked(t.isoCode);
+          });
+        }
+      })), this.mapLoaded = !0, this.initialZoom !== null && this.createWrapperObserver();
+    },
+    initializeMapLibre() {
+      let e = "https://api.maptiler.com/maps/landscape/style.json?key=n1Mz5ziX3k6JfdjFe7mx";
+      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,
+        attributionControl: !1,
+        dragPan: this.allowDragging,
+        scrollZoom: !1,
+        doubleClickZoom: !1,
+        dragRotate: !1
+      }), this.showZoomControl && this.mapInstance.addControl(new maplibregl.NavigationControl()), this.mapInstance.on("load", () => {
+        var t;
+        this.mapLoaded = !0, (this.initialZoom !== null || (t = this.advancedAnimation) != null && t.borrowerPoints) && this.createWrapperObserver();
+      });
+    },
+    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(() => {
+          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
+          });
+        });
+      }, 500);
+    },
+    checkIntersectionObserverSupport() {
+      return !(typeof window > "u" || !("IntersectionObserver" in window) || !("IntersectionObserverEntry" in window) || !("intersectionRatio" in window.IntersectionObserverEntry.prototype));
+    },
+    createIntersectionObserver({
+      callback: e,
+      options: t,
+      targets: i
+    } = {}) {
+      if (this.checkIntersectionObserverSupport()) {
+        const a = new IntersectionObserver(e, t);
+        return i.forEach((s) => a.observe(s)), a;
+      }
+    },
+    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 }));
+        }, 100);
+        s = window.setTimeout(() => {
+          clearInterval(n), clearTimeout(s), 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;
+    },
+    countryStyle(e) {
+      return {
+        color: o.colors.white,
+        // eslint-disable-next-line max-len
+        fillColor: r(e.lenderLoans, this.countriesData, o, 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, {
+        sticky: !0
+      }), t.on({
+        mouseover: this.highlightFeature,
+        mouseout: this.resetHighlight
+      });
+    },
+    highlightFeature(e) {
+      e.target.setStyle({
+        fillColor: o.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)
+      });
+    },
+    circleMapClicked(e) {
+      this.$emit("country-lend-filter", e);
+    }
+  }
+};
+export {
+  c as default
+};

package/dist/vue/KvMaterialIcon.js

@@ -1,34 +1,24 @@
-import { openBlock as t, createElementBlock as e, createElementVNode as n } from "vue";
+import n from "./KvMaterialIcon2.js";
+import { openBlock as t, createElementBlock as e, createElementVNode as r } from "vue";
 import c from "../_virtual/_plugin-vue_export-helper.js";
-const r = {
-  props: {
-    /**
-     * SVG path data passed in from an imported @mdi/js module.
-     * E.g., `import { mdiAccount } from '@mdi/js'; <kv-material-icon :icon="mdiAccount" />`
-     * */
-    icon: {
-      type: String,
-      default: ""
-    }
-  }
-}, i = {
+const i = {
   class: "tw-inline-flex",
   "aria-hidden": "true",
   role: "img"
-}, s = {
+}, l = {
   class: "tw-w-full tw-h-full tw-fill-current",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24"
-}, l = ["d"];
-function a(d, _, o, f, p, h) {
+}, s = ["d"];
+function a(_, d, o, f, h, m) {
   return t(), e("span", i, [
-    (t(), e("svg", s, [
-      n("path", { d: o.icon }, null, 8, l)
+    (t(), e("svg", l, [
+      r("path", { d: o.icon }, null, 8, s)
     ]))
   ]);
 }
-const w = /* @__PURE__ */ c(r, [["render", a]]);
+const x = /* @__PURE__ */ c(n, [["render", a]]);
 export {
-  w as default
+  x as default
 };

package/dist/vue/KvMaterialIcon.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    icon: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvMaterialIcon2.js

@@ -0,0 +1,15 @@
+const t = {
+  props: {
+    /**
+     * SVG path data passed in from an imported @mdi/js module.
+     * E.g., `import { mdiAccount } from '@mdi/js'; <kv-material-icon :icon="mdiAccount" />`
+     * */
+    icon: {
+      type: String,
+      default: ""
+    }
+  }
+};
+export {
+  t as default
+};

package/dist/vue/KvPageContainer.js

@@ -1,15 +1,16 @@
-import { openBlock as e, createElementBlock as o, renderSlot as r } from "vue";
-import s from "../_virtual/_plugin-vue_export-helper.js";
-const n = {}, a = {
+import e from "./KvPageContainer2.js";
+import { openBlock as o, createElementBlock as r, renderSlot as s } from "vue";
+import n from "../_virtual/_plugin-vue_export-helper.js";
+const p = {
   class: "tw-mx-auto tw-px-2.5 md:tw-px-4 lg:tw-px-8",
   style: { "max-width": "1200px" }
 };
-function c(t, p, d, l, i, m) {
-  return e(), o("div", a, [
-    r(t.$slots, "default")
+function a(t, c, m, d, i, l) {
+  return o(), r("div", p, [
+    s(t.$slots, "default")
   ]);
 }
-const x = /* @__PURE__ */ s(n, [["render", c]]);
+const u = /* @__PURE__ */ n(e, [["render", a]]);
 export {
-  x as default
+  u as default
 };

package/dist/vue/KvPageContainer.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvPageContainer2.js

@@ -0,0 +1,4 @@
+const a = {};
+export {
+  a as default
+};