@swr-data-lab/components 1.12.5 → 1.13.1

package/dist/maplibre/VectorLayer/VectorLayer.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">import { getMapContext } from '../context.svelte.js';
+import { onDestroy } from 'svelte';
+import { resetLayerEventListener } from '../utils.js';
+const { id, sourceId, sourceLayer, visible = true, placeBelow = 'label-place-capital', type, paint, layout, hovered = $bindable(), selected = $bindable(), minZoom = 0, maxZoom = 24, onclick, onmousemove, onmouseleave } = $props();
+const { map, styleLoaded } = $derived(getMapContext());
+let beforeId = $state();
+let prevSelected = $state();
+let prevHovered = $state();
+const layerSpec = {
+    id,
+    type,
+    source: sourceId,
+    'source-layer': sourceLayer,
+    layout: $state.snapshot(layout) ?? {},
+    paint: $state.snapshot(paint) ?? {},
+    minzoom: minZoom,
+    maxzoom: maxZoom
+};
+$effect(() => {
+    if (map && styleLoaded) {
+        const style = map.getStyle();
+        beforeId = style.layers.find((l) => {
+            return l.id === placeBelow;
+        })?.id;
+    }
+});
+$effect(() => {
+    if (map && styleLoaded && beforeId) {
+        map.addLayer(layerSpec, beforeId);
+    }
+});
+$effect(() => resetLayerEventListener(map, 'click', id, onclick));
+$effect(() => resetLayerEventListener(map, 'mousemove', id, onmousemove));
+$effect(() => resetLayerEventListener(map, 'mouseleave', id, onmouseleave));
+// Set hovered feature state
+$effect(() => {
+    if (styleLoaded) {
+        if (hovered) {
+            if (prevHovered) {
+                map?.setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: prevHovered }, { hovered: false });
+            }
+            map?.setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: hovered.id }, { hovered: true });
+            prevHovered = hovered.id;
+        }
+        else {
+            if (prevHovered) {
+                map?.setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: prevHovered }, { hovered: false });
+            }
+        }
+    }
+});
+// Set selected feature state
+$effect(() => {
+    if (styleLoaded) {
+        if (selected) {
+            if (prevSelected) {
+                map?.setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: prevSelected }, { selected: false });
+            }
+            map?.setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: selected.id }, { selected: true });
+            prevSelected = selected.id;
+        }
+        else {
+            if (prevSelected) {
+                map?.setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: prevSelected }, { selected: false });
+            }
+        }
+    }
+});
+onDestroy(() => {
+    if (map && map.getLayer(id))
+        map.removeLayer(id);
+});
+</script>

package/dist/maplibre/VectorLayer/VectorLayer.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { CircleLayoutProps, CirclePaintProps, FillLayoutProps, FillPaintProps, LineLayoutProps, SymbolPaintProps, SymbolLayoutProps, LinePaintProps, MapGeoJSONFeature, MapLayerMouseEvent } from 'maplibre-gl';
+interface VectorLayerProps {
+    id: string;
+    sourceId: string;
+    sourceLayer: string;
+    type: 'line' | 'fill' | 'circle' | 'symbol';
+    placeBelow: string;
+    visible?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    paint?: LinePaintProps | FillPaintProps | CirclePaintProps | SymbolPaintProps;
+    layout?: LineLayoutProps | FillLayoutProps | CircleLayoutProps | SymbolLayoutProps;
+    hovered?: MapGeoJSONFeature | undefined;
+    selected?: MapGeoJSONFeature | undefined;
+    onclick: (e: MapLayerMouseEvent) => any;
+    onmousemove: (e: MapLayerMouseEvent) => any;
+    onmouseleave: (e: MapLayerMouseEvent) => any;
+}
+declare const VectorLayer: import("svelte").Component<VectorLayerProps, {}, "hovered" | "selected">;
+type VectorLayer = ReturnType<typeof VectorLayer>;
+export default VectorLayer;

package/dist/maplibre/VectorLayer/index.d.ts

@@ -0,0 +1,2 @@
+export default VectorLayer;
+import VectorLayer from './VectorLayer.svelte';

package/{src → dist}/maplibre/VectorTileSource/VectorTileSource.stories.svelte

@@ -1,16 +1,14 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import VectorTileSource from './VectorTileSource.svelte';
-	import VectorLayer from '../VectorLayer/VectorLayer.svelte';
-	import Map from '../Map/Map.svelte';
-	import { SWRDataLabLight } from '../MapStyle/';
-	import AttributionControl from '../AttributionControl';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Source/VectorTileSource',
-		component: VectorTileSource
-	});
+<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+import VectorTileSource from './VectorTileSource.svelte';
+import VectorLayer from '../VectorLayer/VectorLayer.svelte';
+import Map from '../Map/Map.svelte';
+import { SWRDataLabLight } from '../MapStyle/';
+import AttributionControl from '../AttributionControl';
+const { Story } = defineMeta({
+    title: 'Maplibre/Source/VectorTileSource',
+    component: VectorTileSource
+});
 </script>
 
 <Story asChild name="Default">

package/dist/maplibre/VectorTileSource/VectorTileSource.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import VectorTileSource from './VectorTileSource.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const VectorTileSource: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VectorTileSource = InstanceType<typeof VectorTileSource>;
+export default VectorTileSource;

package/dist/maplibre/VectorTileSource/VectorTileSource.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import {} from 'svelte';
+import {} from 'maplibre-gl';
+import MapSource from '../Source/MapSource.svelte';
+const { minZoom = 0, maxZoom = 24, id, url } = $props();
+const sourceSpec = {
+    type: 'vector',
+    tiles: [url],
+    maxzoom: maxZoom,
+    minzoom: minZoom
+};
+</script>
+
+<MapSource {id} {sourceSpec} />

package/dist/maplibre/VectorTileSource/VectorTileSource.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+interface VectorTileSourceProps {
+    id: string;
+    url: string;
+    minZoom?: number;
+    maxZoom?: number;
+    children?: Snippet;
+}
+declare const VectorTileSource: import("svelte").Component<VectorTileSourceProps, {}, "">;
+type VectorTileSource = ReturnType<typeof VectorTileSource>;
+export default VectorTileSource;

package/dist/maplibre/VectorTileSource/index.d.ts

@@ -0,0 +1,2 @@
+export default VectorTileSource;
+import VectorTileSource from './VectorTileSource.svelte';

package/dist/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte

@@ -0,0 +1,27 @@
+<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import WithLinkLocation from './WithLinkLocation.svelte';
+import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+import Map from '../Map/Map.svelte';
+import { SWRDataLabLight } from '../MapStyle';
+const { Story } = defineMeta({
+    title: 'Maplibre/Extras/WithLinkLocation',
+    component: WithLinkLocation
+});
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens>
+		<div class="container">
+			<WithLinkLocation countries="de" languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA">
+				<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}></Map>
+			</WithLinkLocation>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 500px;
+		height: 300px;
+	}
+</style>

package/dist/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import WithLinkLocation from './WithLinkLocation.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const WithLinkLocation: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type WithLinkLocation = InstanceType<typeof WithLinkLocation>;
+export default WithLinkLocation;

package/dist/maplibre/WithLinkLocation/WithLinkLocation.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">import { onMount, setContext } from 'svelte';
+import { MaptilerGeocoderAPI } from '../GeocoderControl/GeocoderAPIs';
+import {} from '../types';
+const { key, service = 'maptiler', countries = 'de', languages = 'de', urlParameter = 'location', children } = $props();
+const countriesArr = Array.isArray(countries) ? countries : [countries];
+const languagesArr = Array.isArray(languages) ? languages : [languages];
+let geocoder;
+if (service === 'maptiler') {
+    geocoder = new MaptilerGeocoderAPI(key);
+}
+let location = $state();
+function bboxToArea(bbox) {
+    return (bbox[2] - bbox[0]) * (bbox[3] - bbox[1]);
+}
+onMount(async () => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has(urlParameter)) {
+        const config = {
+            countries: countriesArr.join(','),
+            language: languagesArr.join(','),
+            query: params.get(urlParameter)?.toString(),
+            limit: 1
+        };
+        const res = await geocoder.forwardGeocode(config);
+        if (res.features[0].bbox && res.features[0].geometry.type === 'Point') {
+            location = {
+                lat: res.features[0].geometry.coordinates[1],
+                lng: res.features[0].geometry.coordinates[0],
+                zoom: 11 - bboxToArea(res.features[0].bbox) * 5.5
+            };
+        }
+    }
+    else {
+        location = false;
+    }
+});
+$effect.pre(() => {
+    setContext('initialLocation', location);
+});
+</script>
+
+{#if location !== undefined}
+	{@render children?.()}
+{/if}

package/dist/maplibre/WithLinkLocation/WithLinkLocation.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type Snippet } from 'svelte';
+import { type GeocodingCountry, type GeocodingLanguage, type GeocodingService } from '../types';
+interface WithLinkLocationProps {
+    service?: GeocodingService;
+    /**
+     * API key for selected geocoding `service`
+     */
+    key: string;
+    /**
+     * Limit search to one or more countries
+     */
+    countries?: GeocodingLanguage | GeocodingCountry[];
+    languages?: GeocodingLanguage | GeocodingLanguage[];
+    urlParameter?: string;
+    children: Snippet;
+}
+declare const WithLinkLocation: import("svelte").Component<WithLinkLocationProps, {}, "">;
+type WithLinkLocation = ReturnType<typeof WithLinkLocation>;
+export default WithLinkLocation;

package/dist/maplibre/WithLinkLocation/index.d.ts

@@ -0,0 +1,2 @@
+export default WithLinkLocation;
+import WithLinkLocation from './WithLinkLocation.svelte';

package/dist/maplibre/context.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Map as MapLibre, Marker, LayerSpecification } from 'maplibre-gl';
+export declare class Box<T> {
+    value: T;
+    constructor(initialValue: T);
+}
+export declare class MapContext {
+    _map: MapLibre | null;
+    minzoom: number;
+    maxzoom: number;
+    styleLoaded: boolean;
+    private _listener?;
+    get map(): maplibregl.Map | null;
+    set map(value: maplibregl.Map | null);
+    private _onstyledata;
+}
+export declare class SourceContext {
+    _source: unknown;
+    loaded: boolean;
+    minzoom: number;
+    maxzoom: number;
+    get source(): unknown;
+}
+export declare class LayerContext {
+    layer: LayerSpecification;
+}
+export declare function setPopupTarget(value: Box<Marker | string | undefined>): void;
+export declare function getPopupTarget(): Box<Marker | string> | undefined;
+export declare function createMapContext(): MapContext;
+export declare function getMapContext(): MapContext;
+export declare function createSourceContext(): SourceContext;
+export declare function getSourceContext(): SourceContext;
+export declare function getLayerContext(): LayerContext;
+export declare function setLayerContext(value: string): void;

package/dist/maplibre/context.svelte.js

@@ -0,0 +1,73 @@
+import { getContext, setContext } from 'svelte';
+const MAP_CONTEXT_KEY = Symbol.for('map-context');
+const SOURCE_CONTEXT_KEY = Symbol.for('source-context');
+const LAYER_CONTEXT_KEY = Symbol.for('layer-context');
+const POPUP_TARGET_KEY = Symbol.for('popup-target');
+export class Box {
+    value = $state();
+    constructor(initialValue) {
+        this.value = initialValue;
+    }
+}
+export class MapContext {
+    _map = $state(null);
+    minzoom = $state(0);
+    maxzoom = $state(24);
+    styleLoaded = $state(false);
+    _listener = undefined;
+    get map() {
+        return this._map;
+    }
+    set map(value) {
+        // Unbind any old event listeners
+        if (this._listener) {
+            this._map?.off('styledata', this._listener);
+            this._listener = undefined;
+        }
+        // Set new map instance and bind new event listeners
+        this._map = value;
+        if (this._map) {
+            this._listener = this._onstyledata.bind(this);
+            this._map.on('styledata', this._listener);
+        }
+    }
+    _onstyledata(e) {
+        this.styleLoaded = true;
+    }
+}
+export class SourceContext {
+    _source = $state();
+    loaded = $state(false);
+    minzoom = $state(0);
+    maxzoom = $state(24);
+    get source() {
+        return this._source;
+    }
+}
+export class LayerContext {
+    layer = $state();
+}
+export function setPopupTarget(value) {
+    setContext(POPUP_TARGET_KEY, value);
+}
+export function getPopupTarget() {
+    return getContext(POPUP_TARGET_KEY);
+}
+export function createMapContext() {
+    return setContext(MAP_CONTEXT_KEY, new MapContext());
+}
+export function getMapContext() {
+    return getContext(MAP_CONTEXT_KEY);
+}
+export function createSourceContext() {
+    return setContext(SOURCE_CONTEXT_KEY, new SourceContext());
+}
+export function getSourceContext() {
+    return getContext(SOURCE_CONTEXT_KEY);
+}
+export function getLayerContext() {
+    return getContext(LAYER_CONTEXT_KEY);
+}
+export function setLayerContext(value) {
+    setContext(LAYER_CONTEXT_KEY, value);
+}

package/{src/maplibre/types.ts → dist/maplibre/types.d.ts}

@@ -1,12 +1,10 @@
 import type { FillLayerSpecification, LineLayerSpecification } from 'maplibre-gl';
-
 export type Layer = LineLayerSpecification | FillLayerSpecification;
 export type GeocodingService = 'maptiler';
 export type GeocodingCountry = 'de' | 'at';
 export type GeocodingLanguage = 'de' | 'en';
-
 export interface Location {
-	lat: number;
-	lng: number;
-	zoom: number;
+    lat: number;
+    lng: number;
+    zoom: number;
 }

package/dist/maplibre/types.js

@@ -0,0 +1 @@
+export {};

package/dist/maplibre/utils.d.ts

@@ -0,0 +1,4 @@
+import type { Evented, Listener, Map, MapLayerEventType, Popup } from 'maplibre-gl';
+export declare function resetEventListener(evented: Evented | null | undefined, type: string, listener: Listener | undefined): () => void;
+export declare function resetLayerEventListener(map: Map | null, type: keyof MapLayerEventType, layer: string, listener: Listener | undefined): () => void;
+export declare function resetPopupEventListener(popup: Popup | null, type: 'open' | 'close', listener: Listener | undefined): () => void;

package/dist/maplibre/utils.js

@@ -0,0 +1,34 @@
+// Source: https://github.com/MIERUNE/svelte-maplibre-gl/blob/main/src/lib/maplibre/utils.ts
+export function resetEventListener(evented, type, listener) {
+    if (listener) {
+        evented?.on(type, listener);
+    }
+    const prevListener = listener;
+    return () => {
+        if (prevListener) {
+            evented?.off(type, prevListener);
+        }
+    };
+}
+export function resetLayerEventListener(map, type, layer, listener) {
+    if (listener) {
+        map?.on(type, layer, listener);
+    }
+    const prevListener = listener;
+    return () => {
+        if (prevListener) {
+            map?.off(type, layer, prevListener);
+        }
+    };
+}
+export function resetPopupEventListener(popup, type, listener) {
+    if (listener) {
+        popup?.on(type, listener);
+    }
+    const prevListener = listener;
+    return () => {
+        if (prevListener) {
+            popup?.off(type, prevListener);
+        }
+    };
+}

package/dist/utils/formatDate.d.ts

@@ -0,0 +1,5 @@
+export default formatDate;
+declare function formatDate({ date, format }: {
+    date: any;
+    format?: string | undefined;
+}): string;

package/dist/utils/formatDate.js

@@ -0,0 +1,17 @@
+import { timeFormat } from 'd3-time-format';
+
+const formats = {
+	dayMonthYear: '%-d.%-m.%Y',
+	dayMonth: '%-d.%-m.',
+	dayMonthYearShort: '%-d.%-m.%y',
+	dayMonthHourMinute: '%-d.%-m., %-H.%M Uhr',
+	dayMonthYearHourMinute: '%-d.%-m.%Y, %-H.%M Uhr',
+	hourMinuteSophora: '%-H:%M Uhr',
+	hourMinute: '%-H.%M'
+};
+
+const formatDate = ({ date, format = 'dayMonthYear' }) => {
+	return timeFormat(formats[format] || format)(new Date(date));
+};
+
+export default formatDate;

package/dist/utils/formatNumber.d.ts

@@ -0,0 +1,18 @@
+export const defaultFormat: ",.1f";
+export namespace defaultLocale {
+    let decimal: string;
+    let thousands: string;
+    let grouping: number[];
+    let currency: string[];
+}
+declare function _default({ number, format, locale }: {
+    number: any;
+    format?: string | undefined;
+    locale?: {
+        decimal: string;
+        thousands: string;
+        grouping: number[];
+        currency: string[];
+    } | undefined;
+}): string;
+export default _default;

package/{src → dist}/utils/formatNumber.js

@@ -2,12 +2,12 @@ import { formatLocale } from 'd3-format';
 
 export const defaultFormat = ',.1f';
 export const defaultLocale = {
-  decimal: ',',
-  thousands: ' ',
-  grouping: [3],
-  currency: ['', '€']
+	decimal: ',',
+	thousands: ' ',
+	grouping: [3],
+	currency: ['', '€']
 };
 
 export default formatNumber = ({ number, format = defaultFormat, locale = defaultLocale }) => {
-  return formatLocale(locale).format(format)(number);
+	return formatLocale(locale).format(format)(number);
 };

package/dist/utils/getColorsBetween.d.ts

@@ -0,0 +1,9 @@
+export default getColorsBetween;
+/**
+ * Get color range of n colors
+ * @param {*} from
+ * @param {*} to
+ * @param {*} props
+ * @returns
+ */
+declare function getColorsBetween(from: any, to: any, props?: any): any[];

package/dist/utils/getColorsBetween.js

@@ -0,0 +1,25 @@
+import Color from 'color';
+import { range } from 'd3-array';
+
+/**
+ * Get color range of n colors
+ * @param {*} from
+ * @param {*} to
+ * @param {*} props
+ * @returns
+ */
+const getColorsBetween = (from, to, props = { n: 1, includeFromTo: false }) => {
+	const step = 1 / (props.n + 1);
+	const fromColor = Color(from);
+	const toColor = Color(to);
+	const colorsBetween = range(1, props.n + 1)
+		.map((i) => fromColor.mix(toColor, i * step))
+		.map((c) => c.hex().toString());
+	if (props.includeFromTo) {
+		return [from, ...colorsBetween, to];
+	} else {
+		return colorsBetween;
+	}
+};
+
+export default getColorsBetween;

package/dist/utils/getComparisonDiffs.d.ts

@@ -0,0 +1,6 @@
+export default getComparisonDiffs;
+declare function getComparisonDiffs(a: any, b: any): {
+    diff: number;
+    diffRel: number;
+    diffTag: string;
+};

package/dist/utils/getComparisonDiffs.js

@@ -0,0 +1,9 @@
+const getComparisonDiffs = (a, b) => {
+	return {
+		diff: a - b,
+		diffRel: (a / b - 1) * 100,
+		diffTag: a > b ? 'higher' : a === b ? 'equal' : 'smaller'
+	};
+};
+
+export default getComparisonDiffs;

package/dist/utils/getEmbedContext.d.ts

@@ -0,0 +1,7 @@
+export default getEmbedContext;
+/**
+ * Get current url params or - if on production - params from embed url.
+ * @param {object} embed root dom element
+ * @returns {object} url params
+ */
+declare function getEmbedContext(target: any): object;

package/dist/utils/getEmbedContext.js

@@ -0,0 +1,27 @@
+/**
+ * Get current url params or - if on production - params from embed url.
+ * @param {object} embed root dom element
+ * @returns {object} url params
+ */
+
+const getEmbedContext = (target) => {
+	let url;
+	if (
+		window.location.origin === 'https://d.swr.de' ||
+		window.location.origin === 'https://static.datenhub.net' ||
+		window.location.href.includes('apidata.googleusercontent.com') ||
+		window.location.href.includes('storage.googleapis.com')
+	) {
+		url = window.location.href;
+	} else {
+		const parent = target.parentNode || target.parentNode.parentNode;
+		url = parent.dataset.url;
+	}
+	const data = {};
+	for (const [key, value] of new URL(url).searchParams) {
+		data[key] = value;
+	}
+	return data;
+};
+
+export default getEmbedContext;

package/dist/utils/getLaenderFromTopo.d.ts

@@ -0,0 +1,10 @@
+export default getLaenderFromTopo;
+/**
+ * Calc laender borders from kreis or gemeinden topojson
+ * @param {object} topojson
+ * @returns geojson
+ */
+declare function getLaenderFromTopo(topo: any): {
+    type: string;
+    features: any[];
+};