@swr-data-lab/components 1.12.5 → 1.13.1

package/dist/utils/getLaenderFromTopo.js

@@ -0,0 +1,35 @@
+import { merge } from 'topojson-client';
+import { range } from 'd3-array';
+
+/**
+ * Calc laender borders from kreis or gemeinden topojson
+ * @param {object} topojson
+ * @returns geojson
+ */
+const getLaenderFromTopo = (topo) => {
+	const states = [];
+	const stateIds = range(1, 17).map((n) => String(n).padStart(2, '0'));
+	const key = Object.keys(topo.objects)[0];
+
+	stateIds.forEach((id) => {
+		const state = {
+			geometry: merge(
+				topo,
+				topo.objects[key].geometries.filter(
+					(g) => g.properties.id && g.properties.id.startsWith(id)
+				)
+			),
+			id,
+			type: 'Feature',
+			properties: { id }
+		};
+		states.push(state);
+	});
+
+	return {
+		type: 'FeatureCollection',
+		features: states
+	};
+};
+
+export default getLaenderFromTopo;

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/getLaenderNicenameFromAgs.js

@@ -0,0 +1,27 @@
+const map = {
+	'01': 'Schleswig-Holstein',
+	'02': 'Hamburg',
+	'03': 'Niedersachsen',
+	'04': 'Bremen',
+	'05': 'Nordrhein-Westfalen',
+	'06': 'Hessen',
+	'07': 'Rheinland-Pfalz',
+	'08': 'Baden-Württemberg',
+	'09': 'Bayern',
+	10: 'Saarland',
+	11: 'Berlin',
+	12: 'Brandenburg',
+	13: 'Mecklenburg-Vorpommern',
+	14: 'Sachsen',
+	15: 'Sachsen-Anhalt',
+	16: 'Thüringen'
+};
+
+/**
+ * Get nicename for land ags
+ * @param {string} ags
+ * @returns {string} nicename
+ */
+const getLaenderNicenameFromAgs = (ags) => map[ags];
+
+export default getLaenderNicenameFromAgs;

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/{src → dist}/utils/isSvelteComponent.js

@@ -7,7 +7,7 @@ import { SvelteComponent } from 'svelte';
  */
 
 const isSvelteComponent = (component) => {
-  return SvelteComponent.isPrototypeOf(component) || typeof component === 'function';
+	return SvelteComponent.isPrototypeOf(component) || typeof component === 'function';
 };
 
 export default isSvelteComponent;

package/dist/utils/prepareSophoraModel.d.ts

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

package/dist/utils/prepareSophoraModel.js

@@ -0,0 +1,37 @@
+const SELECTORS = {
+	showScrollUp: 'a.back-to-top',
+	showPlayerbar: '#playerbar',
+	showSharing: '.sharing',
+	showAuthors: '.meta-top .meta-authors',
+	allowZoom: 'meta[name=viewport]'
+};
+
+const IS_MOBILE = window.innerWidth < 768;
+
+const prepareSophoraModel = (config) => {
+	console.log('###SWRDATA### updating dom with following config: ', config);
+	Object.entries(config).forEach(([k, v], _) => {
+		const element = document.querySelector(SELECTORS[k]);
+		// show/hide elements
+		if (k.startsWith('show')) {
+			if (
+				(v === 'none' || (v === 'mobile' && IS_MOBILE) || (v === 'desktop' && !IS_MOBILE)) &&
+				element
+			) {
+				element.style.display = 'none';
+				element.style.visibility = 'hidden';
+			}
+		}
+		// enable/disable zoom
+		if (k === 'allowZoom') {
+			if (!v && element) {
+				element.setAttribute(
+					'content',
+					'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
+				);
+			}
+		}
+	});
+};
+
+export default prepareSophoraModel;

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/{src → dist}/utils/scrollIntoViewWithOffset.js

@@ -6,9 +6,9 @@ const OFFSET = -50;
  * @param {number} offset
  */
 const scrollIntoViewWithOffset = (ref, offset) => {
-  const yOffset = offset !== 'undefined' ? offset : OFFSET;
-  const y = ref.getBoundingClientRect().top + window.pageYOffset + yOffset;
-  window.scrollTo({ top: y, behavior: 'smooth' });
+	const yOffset = offset !== 'undefined' ? offset : OFFSET;
+	const y = ref.getBoundingClientRect().top + window.pageYOffset + yOffset;
+	window.scrollTo({ top: y, behavior: 'smooth' });
 };
 
 export default scrollIntoViewWithOffset;

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/{src → dist}/utils/topoToGeo.js

@@ -6,8 +6,8 @@ import { feature } from 'topojson-client';
  * @returns {object} geojson
  */
 const topoToGeo = (topojson) => {
-  const key = Object.keys(topojson.objects)[0];
-  return feature(topojson, topojson.objects[key]);
+	const key = Object.keys(topojson.objects)[0];
+	return feature(topojson, topojson.objects[key]);
 };
 
 export default topoToGeo;

package/package.json

@@ -1,23 +1,35 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
+	"version": "1.13.1",
 	"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,18 @@
 			"@semantic-release/npm"
 		]
 	},
+	"files": [
+		"./dist",
+		"!./dist/**/*.test.*",
+		"!./dist/**/*.stories.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
 	"exports": {
 		".": {
-			"svelte": "./src/index.js"
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
 		}
-	},
-	"version": "1.12.5",
-	"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.svelte

@@ -1,237 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import Circle from '../assets/times-circle-solid.svg.svelte';
-	import Caption from '../Caption/Caption.svelte';
-
-	export let data = [];
-	export let query: string = '';
-	export let placeholder: string = 'Platzhalter';
-	export let label: string;
-	export let name: string;
-
-	const sortData = (a, b) => {
-		return a.value.localeCompare(b.value);
-	};
-
-	let listRef;
-	let inputRef;
-	let controlsRef;
-	const dispatch = createEventDispatcher();
-	const maxSuggestions = 100;
-
-	let highlightedItemIndex = -1;
-	$: suggestions = data.sort(sortData).slice(0, maxSuggestions);
-	$: isActive = false;
-
-	// Insert clicked item into search input,
-	// dispatch it as select event and close the dropdown
-	const handleItemClick = (index) => {
-		highlightedItemIndex = index;
-		setSelectedItem(suggestions[highlightedItemIndex]);
-	};
-
-	const setSelectedItem = (item) => {
-		query = item.value;
-		isActive = false;
-		dispatch('select', { item });
-	};
-
-	// Register keyboard events
-	const handleKeyDown = (e) => {
-		if (e.key === 'ArrowDown') {
-			e.preventDefault();
-			highlightedItemIndex =
-				highlightedItemIndex < suggestions.length - 1 ? highlightedItemIndex + 1 : 0;
-			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault();
-			highlightedItemIndex =
-				highlightedItemIndex > 0 ? highlightedItemIndex - 1 : suggestions.length - 1;
-			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-		} else if (e.key === 'Enter') {
-			if (highlightedItemIndex > -1) {
-				setSelectedItem(suggestions[highlightedItemIndex]);
-				isActive = false;
-			}
-		}
-	};
-
-	const handleClear = () => {
-		query = '';
-		inputRef.focus();
-		setSuggestions();
-		dispatch('select', {
-			item: null
-		});
-	};
-
-	const setSuggestions = () => {
-		suggestions = data
-			.filter((el) => {
-				return el.value.toLowerCase().startsWith(query.toLowerCase());
-			})
-			.slice(0, maxSuggestions)
-			.sort(sortData);
-	};
-
-	// update dropdown list if input value changes
-	const handleInput = () => {
-		isActive = true;
-		if (query.length === 0) {
-			suggestions = data;
-		} else {
-			setSuggestions();
-			highlightedItemIndex = -1;
-		}
-	};
-</script>
-
-<!--
-This component is used to display a list of suggestions for a given query. If an item is clicked or the enter key is pressed, the selected item will be returned by a custom select event.
-
-Data should be provided as array of objects. Each object contains the information for a dropdown entry:
-    - **value** *string* the text that is displayed in the input. Has to be unique!
-    - **label** *string* | *svelte component* | *array of svelte component and props object* text, html or component displayed in the dropdown list
-    - **details** *object* extra data needed by selection handler
-@component
--->
-
-<div class="autocomplete" class:active={isActive}>
-	<label for={name}>{label}</label>
-	<input
-		type="text"
-		{name}
-		{placeholder}
-		autocomplete="off"
-		autocorrect="off"
-		autocapitalize="off"
-		data-testid="autocomplete-input"
-		bind:this={inputRef}
-		bind:value={query}
-		on:keydown={handleKeyDown}
-		on:input={handleInput}
-		on:focus={() => {
-			isActive = true;
-		}}
-		on:blur={(e) => {
-			if (listRef.contains(e.relatedTarget)) {
-				window.setTimeout(() => {
-					isActive = false;
-				}, 100);
-			} else if (!controlsRef.contains(e.relatedTarget)) {
-				isActive = false;
-			}
-		}}
-	/>
-
-	<ul tabindex="-1" bind:this={listRef}>
-		{#each suggestions as item, i (item.value)}
-			<li>
-				<button
-					class={`item ${i === highlightedItemIndex ? 'active' : ''}`}
-					tabindex="-1"
-					type="button"
-					on:click={(e) => {
-						e.preventDefault();
-						handleItemClick(i);
-					}}
-				>
-					<Caption>
-						{item.label}
-					</Caption>
-				</button>
-			</li>
-		{/each}
-	</ul>
-	<div class="controls" bind:this={controlsRef}>
-		<button type="button" on:click={handleClear} class="clear" class:active={query.length > 0}>
-			<Circle />
-		</button>
-	</div>
-</div>
-
-<style lang="scss">
-	@use '../styles/base.scss';
-
-	.autocomplete {
-		position: relative;
-		display: block;
-		color: white;
-		display: flex;
-		flex-flow: column;
-
-		input {
-			@extend %form-input;
-			width: auto;
-		}
-
-		ul {
-			position: absolute;
-			top: 100%;
-			border: 1px solid currentColor;
-			background: var(--violet-dark-3);
-			border-bottom-left-radius: var(--br-small);
-			border-bottom-right-radius: var(--br-small);
-			border-top: 0;
-			left: 0;
-			right: 0;
-			max-height: 10rem;
-			overflow-y: scroll;
-			z-index: 1000;
-			opacity: 0;
-			transition: 100ms;
-			pointer-events: none;
-			&:empty {
-				box-shadow: none;
-			}
-
-			.item {
-				padding: 0.5em;
-				width: 100%;
-				background: transparent;
-				border: 0;
-				text-align: left;
-				color: currentColor;
-				border-bottom: 1px solid rgba(white, 0.25);
-				cursor: pointer;
-				&.active,
-				&:hover {
-					text-decoration: underline;
-					background-color: rgba(white, 0.05);
-				}
-			}
-		}
-
-		.clear {
-			position: absolute;
-			top: 50%;
-			right: 0.75rem;
-			width: 1.2rem;
-			height: 1.2rem;
-			background: transparent;
-			border: 0;
-			display: none;
-			color: white;
-			&.active {
-				display: block;
-			}
-			&:hover,
-			&:focus {
-				color: var(--red-base);
-				cursor: pointer;
-			}
-		}
-		&.active {
-			ul {
-				opacity: 1;
-				pointer-events: all;
-			}
-			input {
-				border-bottom-right-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-		}
-	}
-</style>

package/src/Button/Button.stories.svelte

@@ -1,21 +0,0 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Button from './Button.svelte';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Form/Button',
-		component: Button
-	});
-</script>
-
-<Story name="Basic" asChild>
-	<DesignTokens>
-		<Button label="This is a button label"></Button>
-	</DesignTokens>
-</Story>
-<Story name="Disabled" asChild>
-	<DesignTokens>
-		<Button disabled label="This button is disabled"></Button>
-	</DesignTokens>
-</Story>