@kiva/kv-components 7.6.3 → 8.0.1

package/dist/vue/KvMap.js

@@ -1,390 +1,22 @@
-import n from "@kiva/kv-tokens";
-import { generateMapMarkers as l, animationCoordinator as h, getCountryColor as r } from "../utils/mapUtils.js";
-import { openBlock as c, createElementBlock as d, normalizeStyle as m, createElementVNode as p } from "vue";
+import l from "./KvMap2.js";
+import { openBlock as r, createElementBlock as o, normalizeStyle as a, createElementVNode as c } from "vue";
 import "./KvMap.css";
-import u from "../_virtual/_plugin-vue_export-helper.js";
-const f = {
-  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 o = window.setTimeout(() => {
-        i && a ? t.zoomTo(
-          e ? this.initialZoom : this.zoomLevel,
-          { duration: 1200 }
-        ) : t.setZoom(e ? this.initialZoom : this.zoomLevel), clearTimeout(o), 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", !0), e.setAttribute("defer", !0), 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,
-        animate: !0,
-        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: n.colors.black,
-            weight: 1,
-            fillColor: n.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 o = window.setInterval(() => {
-          typeof window[e] < "u" && (clearInterval(o), clearTimeout(s), i({ loaded: !0 }));
-        }, 100);
-        s = window.setTimeout(() => {
-          clearInterval(o), 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: n.colors.white,
-        // eslint-disable-next-line max-len
-        fillColor: r(e.lenderLoans, this.countriesData, n, 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: n.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, n, this.defaultBaseColor)
-      });
-    },
-    circleMapClicked(e) {
-      this.$emit("country-lend-filter", e);
-    }
-  }
-}, b = ["id"];
-function g(e, t, i, a, s, o) {
-  return c(), d("div", {
+import i from "../_virtual/_plugin-vue_export-helper.js";
+const s = ["id"];
+function n(m, f, t, d, p, e) {
+  return r(), o("div", {
     class: "tw-relative tw-block tw-w-full",
-    style: m(o.mapDimensions)
+    style: a(e.mapDimensions)
   }, [
-    p("div", {
-      id: `kv-map-holder-${i.mapId}`,
-      ref: o.refString,
+    c("div", {
+      id: `kv-map-holder-${t.mapId}`,
+      ref: e.refString,
       class: "tw-w-full tw-h-full tw-bg-black",
       style: { position: "absolute" }
-    }, null, 8, b)
+    }, null, 8, s)
   ], 4);
 }
-const z = /* @__PURE__ */ u(f, [["render", g]]);
+const v = /* @__PURE__ */ i(l, [["render", n]]);
 export {
-  z as default
+  v as default
 };

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

@@ -0,0 +1,213 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoZoomDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: any;
+    };
+    initialZoom: {
+        type: NumberConstructor;
+        default: any;
+    };
+    lat: {
+        type: NumberConstructor;
+        default: any;
+    };
+    long: {
+        type: NumberConstructor;
+        default: any;
+    };
+    mapId: {
+        type: NumberConstructor;
+        default: number;
+    };
+    useLeaflet: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: NumberConstructor;
+        default: any;
+    };
+    zoomLevel: {
+        type: NumberConstructor;
+        default: number;
+    };
+    advancedAnimation: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    showZoomControl: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDragging: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLabels: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    countriesData: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    showFundraisingLoans: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTooltips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defaultBaseColor: {
+        type: StringConstructor;
+        default: any;
+    };
+}>, {}, {
+    hasWebGL: boolean;
+    leafletReady: boolean;
+    mapInstance: any;
+    mapLibreReady: boolean;
+    mapLoaded: boolean;
+    zoomActive: boolean;
+    countriesBorders: {};
+}, {
+    mapDimensions(): {
+        height: string;
+        width: string;
+        paddingBottom: string;
+    };
+    refString(): string;
+}, {
+    activateZoom(zoomOut?: boolean): false;
+    createWrapperObserver(): void;
+    destroyWrapperObserver(): void;
+    checkWebGL(): boolean;
+    initializeMap(): void;
+    initializeLeaflet(): void;
+    initializeMapLibre(): void;
+    animateMap(): void;
+    checkIntersectionObserverSupport(): boolean;
+    createIntersectionObserver({ callback, options, targets, }?: {
+        callback?: any;
+        options?: any;
+        targets?: Element[];
+    }): IntersectionObserver;
+    testDelayedGlobalLibrary(library: string, timeout?: number): Promise<{
+        loaded: boolean;
+    }>;
+    getCountriesData(): any;
+    countryStyle(feature: any): {
+        color: any;
+        fillColor: string;
+        weight: number;
+        fillOpacity: number;
+    };
+    onEachCountryFeature(feature: any, layer: any): void;
+    highlightFeature(e: any): void;
+    resetHighlight(e: any): void;
+    circleMapClicked(countryIso: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoZoomDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: any;
+    };
+    initialZoom: {
+        type: NumberConstructor;
+        default: any;
+    };
+    lat: {
+        type: NumberConstructor;
+        default: any;
+    };
+    long: {
+        type: NumberConstructor;
+        default: any;
+    };
+    mapId: {
+        type: NumberConstructor;
+        default: number;
+    };
+    useLeaflet: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: NumberConstructor;
+        default: any;
+    };
+    zoomLevel: {
+        type: NumberConstructor;
+        default: number;
+    };
+    advancedAnimation: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    showZoomControl: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDragging: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLabels: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    countriesData: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    showFundraisingLoans: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTooltips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defaultBaseColor: {
+        type: StringConstructor;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    height: number;
+    width: number;
+    aspectRatio: number;
+    long: number;
+    autoZoomDelay: number;
+    initialZoom: number;
+    lat: number;
+    mapId: number;
+    useLeaflet: boolean;
+    zoomLevel: number;
+    advancedAnimation: Record<string, any>;
+    showZoomControl: boolean;
+    allowDragging: boolean;
+    showLabels: boolean;
+    countriesData: unknown[];
+    showFundraisingLoans: boolean;
+    showTooltips: boolean;
+    defaultBaseColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;