@swr-data-lab/components 1.13.0 → 1.13.2

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/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/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/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/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[];
+};

package/dist/utils/getLaenderNicenameFromAgs.d.ts

@@ -0,0 +1,7 @@
+export default getLaenderNicenameFromAgs;
+/**
+ * Get nicename for land ags
+ * @param {string} ags
+ * @returns {string} nicename
+ */
+declare function getLaenderNicenameFromAgs(ags: string): string;

package/dist/utils/isSvelteComponent.d.ts

@@ -0,0 +1,7 @@
+export default isSvelteComponent;
+/**
+ * Check if given component is a svelte component.
+ * @param {*} component
+ * @returns {boolean}
+ */
+declare function isSvelteComponent(component: any): boolean;

package/dist/utils/prepareSophoraModel.d.ts

@@ -0,0 +1,2 @@
+export default prepareSophoraModel;
+declare function prepareSophoraModel(config: any): void;

package/dist/utils/scrollIntoViewWithOffset.d.ts

@@ -0,0 +1,7 @@
+export default scrollIntoViewWithOffset;
+/**
+ * Scroll to top of given dom element with given offset.
+ * @param {object} ref to dom element
+ * @param {number} offset
+ */
+declare function scrollIntoViewWithOffset(ref: object, offset: number): void;

package/dist/utils/slugify.d.ts

@@ -0,0 +1 @@
+export default function slugify(str: string): string;

package/dist/utils/slugify.js

@@ -0,0 +1,11 @@
+// Source: https://svelte.dev/playground/b130be5e485441a1842ae97e4ce4f244?version=5.20.0
+export default function slugify(str) {
+    return str
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-')
+        .trim()
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9 -]/g, '');
+}

package/dist/utils/topoToGeo.d.ts

@@ -0,0 +1,7 @@
+export default topoToGeo;
+/**
+ * Convert topojson to geojson
+ * @param {object} topojson
+ * @returns {object} geojson
+ */
+declare function topoToGeo(topojson: object): object;

package/package.json

@@ -1,23 +1,35 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
+	"version": "1.13.2",
 	"author": "SWR Data Lab",
+	"license": "UNLICENSED",
+	"type": "module",
 	"publishConfig": {
 		"access": "restricted"
 	},
+	"repository": {
+		"url": "https://github.com/SWRdata/components"
+	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package -i src && publint",
+		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"storybook": "storybook dev -p 6006",
 		"start": "storybook dev -p 6006",
+		"sync": "svelte-kit sync",
 		"build-storybook": "storybook build --disable-telemetry",
 		"test-storybook": "vitest run --project=storybook",
 		"test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
 		"semantic-release": "semantic-release"
 	},
+	"peerDependencies": {
+		"svelte": ">=5.0.0"
+	},
 	"dependencies": {
 		"@maplibre/maplibre-gl-geocoder": "^1.8.0",
 		"maplibre-gl": "^5.5.0",
@@ -36,6 +48,7 @@
 		"@storybook/test-runner": "^0.23.0-next.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.3.11",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@versatiles/style": "^5.6.0",
 		"@vitest/browser": "^3.1.1",
@@ -44,17 +57,22 @@
 		"http-server": "^14.1.1",
 		"mdx-mermaid": "^2.0.3",
 		"playwright": "^1.51.1",
-		"sass-embedded": "^1.78.0",
+		"publint": "^0.3.12",
+		"sass": "^1.89.0",
+		"sass-embedded": "^1.89.0",
 		"semantic-release": "^24.1.2",
 		"storybook": "^9.0.0-beta.11",
 		"svelte": "^5.23.0",
 		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.3",
 		"typescript": "^5.8.3",
 		"vite": "^6.0.0",
 		"vitest": "^3.1.1",
 		"wait-on": "^8.0.1"
 	},
-	"type": "module",
+	"overrides": {
+		"storybook": "$storybook"
+	},
 	"release": {
 		"plugins": [
 			"@semantic-release/commit-analyzer",
@@ -62,13 +80,16 @@
 			"@semantic-release/npm"
 		]
 	},
+	"files": [
+		"dist/"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
 	"exports": {
 		".": {
-			"svelte": "./src/index.js"
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
 		}
-	},
-	"version": "1.13.0",
-	"overrides": {
-		"storybook": "$storybook"
 	}
 }

package/.storybook/blocks/Mermaid.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Mermaid as MdxMermaid } from 'mdx-mermaid/Mermaid';
-
-export default function Mermaid({ chart }) {
-	if (!chart) {
-		return null;
-	}
-	return React.createElement(MdxMermaid, { chart });
-}

package/.storybook/main.ts

@@ -1,34 +0,0 @@
-import { dirname, join } from 'path';
-import type { StorybookConfig } from '@storybook/sveltekit';
-
-function getAbsolutePath(value: string): any {
-	if (process.platform.includes('win')) {
-		return value;
-	} else {
-		return dirname(require.resolve(join(value, 'package.json')));
-	}
-}
-
-const config: StorybookConfig = {
-	stories: ['../src/**/*.stories.@(js|ts|svelte)', '../src/**/*.mdx'],
-	addons: [
-		{
-			name: getAbsolutePath('@storybook/addon-svelte-csf'),
-			options: {
-				legacyTemplate: true
-			}
-		},
-		getAbsolutePath('@storybook/addon-links'),
-		getAbsolutePath('@chromatic-com/storybook'),
-		getAbsolutePath('@storybook/addon-vitest'),
-		getAbsolutePath('@storybook/addon-docs')
-	],
-	framework: {
-		name: getAbsolutePath('@storybook/sveltekit'),
-		options: {}
-	},
-
-	docs: {}
-};
-
-export default config;

package/.storybook/preview-head.html

@@ -1,13 +0,0 @@
-<style>
-	/* Load original SWR.de fonts for consistent component preview:  */
-	@font-face {
-		font-family: 'SWR-VAR-Text';
-		src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2')
-			format('woff2');
-	}
-	@font-face {
-		font-family: 'SWR-VAR-Sans';
-		src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Sans.woff2')
-			format('woff2');
-	}
-</style>

package/.storybook/preview.ts

@@ -1,47 +0,0 @@
-import type { Preview } from '@storybook/sveltekit';
-
-const preview: Preview = {
-	parameters: {
-		options: {
-			storySort: {
-				order: [
-					'About',
-					'Design Tokens',
-					'Typography',
-					['Headline', 'Copy', 'Caption'],
-					'Display',
-					'Chart',
-					['ChartHeader'],
-					'Maplibre',
-					[
-						'Map',
-						'MapStyle',
-						'Source',
-						'Layer',
-						'Control',
-						[
-							'ScaleControl',
-							'GeocoderControl',
-							'AttributionControl',
-							'NavigationControl',
-							'MapControl'
-						],
-						'Style',
-						'Tooltip'
-					],
-					'Form',
-					'Deprecated'
-				]
-			}
-		},
-		controls: {
-			matchers: {
-				color: /(background|color)$/i,
-				date: /Date$/i
-			}
-		}
-	},
-	tags: ['autodocs']
-};
-
-export default preview;

package/.storybook/vitest.setup.ts

@@ -1,9 +0,0 @@
-import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/sveltekit';
-import * as projectAnnotations from './preview';
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-const project = setProjectAnnotations([projectAnnotations]);
-
-beforeAll(project.beforeAll);

package/src/Autocomplete/Autocomplete.stories.svelte

@@ -1,61 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { userEvent, within, expect } from 'storybook/test';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	import Autocomplete from './Autocomplete.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Deprecated/Autocomplete',
-		component: Autocomplete
-	});
-
-	const testData = ['Apples', 'Oranges', 'Pears', 'Peaches', 'Bananas'].map((el) => {
-		return {
-			value: el,
-			label: el,
-			details: {}
-		};
-	});
-</script>
-
-<Story
-	name="Basic"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const input = canvas.getByTestId('autocomplete-input');
-		await step('Select using the mouse', async () => {
-			await userEvent.click(input);
-			expect(input).toHaveFocus();
-			await userEvent.keyboard('ba');
-			const bananasOption = canvas.getByText('Bananas');
-			await userEvent.click(bananasOption);
-			expect(input).toHaveValue('Bananas');
-		});
-		await userEvent.clear(input);
-		await step('Select using the keyboard', async () => {
-			await userEvent.click(input);
-			expect(input).toHaveFocus();
-			await userEvent.keyboard('ap');
-			await userEvent.keyboard('{ArrowDown}');
-			await userEvent.keyboard('{Enter}');
-			expect(input).toHaveValue('Apples');
-		});
-		await userEvent.clear(input);
-	}}
->
-	<DesignTokens>
-		<div class="container">
-			<Autocomplete label="" name="test" data={testData} query="" placeholder="Select a fruit"
-			></Autocomplete>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		background: var(--violet-dark-5);
-		padding: 5%;
-	}
-</style>