@swr-data-lab/components 1.13.0 → 1.13.2

package/dist/Autocomplete/Autocomplete.svelte

@@ -0,0 +1,237 @@
+<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 = '';
+export let placeholder = 'Platzhalter';
+export let label;
+export let name;
+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>.autocomplete input {
+  font-family: var(--swr-sans);
+  font-size: 1.1rem;
+  line-height: 1.45;
+  letter-spacing: 0.0045em;
+  height: 2.5em;
+  width: 100%;
+  border: 1px solid currentColor;
+  border-radius: var(--br-small);
+  background: transparent;
+  padding: 0 0.5em;
+  padding-top: 0.1em;
+  color: currentColor;
+  margin: 0;
+  display: block;
+  text-size-adjust: none;
+}
+.autocomplete input:focus-visible {
+  outline: 4px solid rgba(255, 255, 255, 0.4);
+}
+
+.autocomplete {
+  position: relative;
+  display: block;
+  color: white;
+  display: flex;
+  flex-flow: column;
+}
+.autocomplete input {
+  width: auto;
+}
+.autocomplete 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;
+}
+.autocomplete ul:empty {
+  box-shadow: none;
+}
+.autocomplete ul .item {
+  padding: 0.5em;
+  width: 100%;
+  background: transparent;
+  border: 0;
+  text-align: left;
+  color: currentColor;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+  cursor: pointer;
+}
+.autocomplete ul .item.active, .autocomplete ul .item:hover {
+  text-decoration: underline;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.autocomplete .clear {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  width: 1.2rem;
+  height: 1.2rem;
+  background: transparent;
+  border: 0;
+  display: none;
+  color: white;
+}
+.autocomplete .clear.active {
+  display: block;
+}
+.autocomplete .clear:hover, .autocomplete .clear:focus {
+  color: var(--red-base);
+  cursor: pointer;
+}
+.autocomplete.active ul {
+  opacity: 1;
+  pointer-events: all;
+}
+.autocomplete.active input {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}</style>

package/dist/Autocomplete/Autocomplete.svelte.d.ts

@@ -0,0 +1,34 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * 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
+ */
+declare const Autocomplete: $$__sveltets_2_IsomorphicComponent<{
+    data?: any[];
+    query?: string;
+    placeholder?: string;
+    label: string;
+    name: string;
+}, {
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Autocomplete = InstanceType<typeof Autocomplete>;
+export default Autocomplete;

package/dist/Autocomplete/index.d.ts

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

package/dist/Button/Button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">import Copy from '../Copy/Copy.svelte';
+const { as = 'button', label, href, disabled, onclick } = $props();
+</script>
+
+{#if as === 'a'}
+	<a class="button" class:disabled {href}>
+		<Copy weight="bold">
+			{label}
+		</Copy>
+	</a>
+{:else}
+	<button class="button" {onclick} {disabled}>
+		<Copy weight="bold">
+			{label}
+		</Copy>
+	</button>
+{/if}
+
+<style>.button {
+  background: var(--violet-dark-3);
+  display: inline-flex;
+  align-items: center;
+  justify-self: flex-start;
+  padding: 0.45em 1.25em;
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
+  border-radius: var(--br-small);
+  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
+  text-decoration: none;
+}
+.button:hover, .button:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+.button.disabled, .button:disabled {
+  opacity: 0.5;
+}</style>

package/dist/Button/Button.svelte.d.ts

@@ -0,0 +1,10 @@
+interface ButtonProps {
+    label: string;
+    as?: 'button' | 'a';
+    href?: string;
+    disabled?: boolean;
+    onclick?: (e: MouseEvent) => any | void;
+}
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Button/index.d.ts

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

package/dist/Caption/Caption.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">let { weight = 'regular', children } = $props();
+export {};
+</script>
+
+<div class={['container', weight]}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>.container {
+  font-family: var(--swr-sans);
+  font-size: var(--fs-small-2);
+  line-height: 1;
+  letter-spacing: 0.0045em;
+}
+
+.bold {
+  font-weight: 585;
+  letter-spacing: 0;
+}</style>

package/dist/Caption/Caption.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface CaptionProps {
+    weight?: 'regular' | 'bold';
+    children?: Snippet;
+}
+declare const Caption: import("svelte").Component<CaptionProps, {}, "">;
+type Caption = ReturnType<typeof Caption>;
+export default Caption;

package/dist/Caption/index.js

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

package/dist/Card/Card.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import Copy from '../Copy/Copy.svelte';
+let { children } = $props();
+</script>
+
+<div class="card">
+	{#if children}
+		<Copy>
+			{@render children()}
+		</Copy>
+	{/if}
+</div>
+
+<style>.card {
+  color: white;
+  width: auto;
+  max-width: var(--app-max-width);
+  background: var(--violet-dark-5);
+  border-radius: var(--br-large);
+  padding: 1.5rem;
+}
+@media (min-width: 768px) {
+  .card {
+    padding: 2.5rem;
+  }
+}</style>

package/dist/Card/Card.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface CardProps {
+    children?: Snippet;
+}
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/Card/index.d.ts

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

package/dist/ChartFooter/ChartFooter.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">import Logotype from '../Logotype/Logotype.svelte';
+import Note from '../Note/Note.svelte';
+let { layout = 'one-up', children } = $props();
+</script>
+
+<footer class={`container ${layout}`}>
+	{#if children}
+		<Note>
+			{@render children()}
+		</Note>
+	{/if}
+	<Logotype />
+</footer>
+
+<style>.container {
+  gap: 0.5rem;
+}
+.container :global(div) {
+  width: 100%;
+}
+
+.one-up {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+}
+
+.two-up {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 425px) {
+  .two-up {
+    grid-template-columns: 2.5fr 1fr;
+    align-items: last baseline;
+    justify-items: flex-end;
+  }
+}</style>

package/dist/ChartFooter/ChartFooter.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface ChartFooterProps {
+    layout: 'one-up' | 'two-up';
+    children?: Snippet;
+}
+declare const ChartFooter: import("svelte").Component<ChartFooterProps, {}, "">;
+type ChartFooter = ReturnType<typeof ChartFooter>;
+export default ChartFooter;

package/dist/ChartFooter/index.d.ts

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

package/{src → dist}/ChartHeader/ChartHeader.svelte

@@ -1,15 +1,7 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Headline from '../Headline/Headline.svelte';
-	import Copy from '../Copy/Copy.svelte';
-	import slugify from '../utils/slugify';
-
-	interface ChartHeaderProps {
-		title: string;
-		subtitle?: string;
-		children?: Snippet;
-	}
-	let { title, subtitle, children }: ChartHeaderProps = $props();
+<script lang="ts">import Headline from '../Headline/Headline.svelte';
+import Copy from '../Copy/Copy.svelte';
+import slugify from '../utils/slugify';
+let { title, subtitle, children } = $props();
 </script>
 
 <header class="container" id={slugify(title)}>

package/dist/ChartHeader/ChartHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface ChartHeaderProps {
+    title: string;
+    subtitle?: string;
+    children?: Snippet;
+}
+declare const ChartHeader: import("svelte").Component<ChartHeaderProps, {}, "">;
+type ChartHeader = ReturnType<typeof ChartHeader>;
+export default ChartHeader;

package/dist/ChartHeader/index.d.ts

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

package/{src → dist}/ChartList/ChartList.svelte

@@ -1,19 +1,5 @@
-<script lang="ts">
-	import { dev } from '$app/environment';
-
-	type ProjectPrefix = 'p' | 't';
-	type ProjectIdentifier = `${ProjectPrefix}${number}: ${string}`;
-
-	interface ChartSpec {
-		title: string;
-		slug: string;
-	}
-	interface ChartListProps {
-		project?: ProjectIdentifier;
-		charts?: ChartSpec[];
-		baseUrl?: string;
-	}
-	let { project, charts, baseUrl }: ChartListProps = $props();
+<script lang="ts">import { dev } from '$app/environment';
+let { project, charts, baseUrl } = $props();
 </script>
 
 <main>

package/dist/ChartList/ChartList.svelte.d.ts

@@ -0,0 +1,14 @@
+type ProjectPrefix = 'p' | 't';
+type ProjectIdentifier = `${ProjectPrefix}${number}: ${string}`;
+interface ChartSpec {
+    title: string;
+    slug: string;
+}
+interface ChartListProps {
+    project?: ProjectIdentifier;
+    charts?: ChartSpec[];
+    baseUrl?: string;
+}
+declare const ChartList: import("svelte").Component<ChartListProps, {}, "">;
+type ChartList = ReturnType<typeof ChartList>;
+export default ChartList;

package/dist/ChartList/index.js

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

package/dist/Copy/Copy.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">let { weight = 'regular', children } = $props();
+export {};
+</script>
+
+<div class={['container', weight]}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>.container {
+  font-family: var(--swr-sans);
+  font-size: var(--fs-base);
+  letter-spacing: 0.005em;
+  line-height: 1.475;
+}
+
+.bold {
+  font-weight: 585;
+  letter-spacing: 0;
+}</style>

package/dist/Copy/Copy.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface CopyProps {
+    weight?: 'regular' | 'bold';
+    children?: Snippet;
+}
+declare const Copy: import("svelte").Component<CopyProps, {}, "">;
+type Copy = ReturnType<typeof Copy>;
+export default Copy;

package/dist/Copy/index.js

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

package/dist/DesignTokens/DesignTokens.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import { shades } from './Tokens';
+let { children } = $props();
+const rules = [
+    ...Object.keys(shades).map((key) => {
+        return Object.entries(shades[key])
+            .map(([shade, value]) => {
+            const [ldb, index] = shade.split(/(\d+)/);
+            return ldb === 'base'
+                ? `--${key}-${ldb}: ${value}`
+                : `--${key}-${ldb}-${index}: ${value}`;
+        })
+            .join(';');
+    })
+];
+</script>
+
+<div class="container" style={rules.join(';')}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>:global(*) {
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  display: contents;
+  --fast: 150ms;
+  --slow: 300ms;
+  --app-max-width: 40rem;
+  --br-large: 8px;
+  --br-small: 4px;
+  --input-height: 2.5rem;
+  --swr-text: "SWR-VAR-Text", sans-serif;
+  --swr-sans: "SWR-VAR-Sans", sans-serif;
+  --fs-small-3: 0.75rem;
+  --fs-small-2: 0.875rem;
+  --fs-small-1: 1rem;
+  --fs-base: 1.125rem;
+  --fs-large-1: 1.25rem;
+  --fs-large-2: 1.5rem;
+  --fs-large-3: 1.75rem;
+  --fs-large-4: 2.25rem;
+}
+@media (min-width: 768px) {
+  .container {
+    --fs-small-3: 0.75rem;
+    --fs-small-2: 0.875rem;
+    --fs-small-1: 1rem;
+    --fs-base: 1.25rem;
+    --fs-large-1: 1.5rem;
+    --fs-large-2: 2rem;
+    --fs-large-3: 2.5rem;
+    --fs-large-4: 3.5rem;
+  }
+}</style>

package/dist/DesignTokens/DesignTokens.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface DesignTokensProps {
+    children?: Snippet;
+}
+declare const DesignTokens: import("svelte").Component<DesignTokensProps, {}, "">;
+type DesignTokens = ReturnType<typeof DesignTokens>;
+export default DesignTokens;

package/dist/DesignTokens/Tokens.d.ts

@@ -0,0 +1,26 @@
+interface ColourMap {
+    [index: string]: ColourPalette | ColourList;
+}
+interface ColourPalette {
+    [index: string]: string;
+}
+interface ColourList {
+    [index: number]: string;
+}
+declare const shades: ColourMap;
+declare const scales: ColourMap;
+declare const typography: {
+    wide: {
+        sizes: {
+            'fs-small-3': string;
+            'fs-small-2': string;
+            'fs-small-1': string;
+            'fs-base': string;
+            'fs-large-1': string;
+            'fs-large-2': string;
+            'fs-large-3': string;
+            'fs-large-4': string;
+        };
+    };
+};
+export { shades, scales, typography };