@onsvisual/svelte-components 1.0.44 → 1.0.45

package/dist/wrappers/Embed/Embed.stories.svelte

@@ -1,24 +1,24 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Embed from "./Embed.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Wrappers/Embed",
-		component: Embed,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Embed {...args}>
-		<div style:padding="24px 0" style:background="var(--ons-color-grey-10)">
-			<p style:margin="0">Embedded content.</p>
-		</div>
-	</Embed>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Embed from "./Embed.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Embed",
+		component: Embed,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Embed {...args}>
+		<div style:padding="24px 0" style:background="var(--ons-color-grey-10)">
+			<p style:margin="0">Embedded content.</p>
+		</div>
+	</Embed>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

package/dist/wrappers/Embed/Embed.svelte

@@ -1,44 +1,44 @@
-<script>
-	import { onMount, createEventDispatcher } from "svelte";
-	import pym from "pym.js";
-
-	/**
-	 * Binding for pymChild element (can be used to send messages to parent of iframe)
-	 * @type {object}
-	 */
-	export let pymChild = null;
-	/**
-	 * Frequency (in milliseconds) of iframe height updates. Set as "false" to disable polling.
-	 * @type {number|false}
-	 */
-	export let polling = 500;
-
-	const dispatch = createEventDispatcher();
-
-	onMount(() => {
-		pymChild = new pym.Child();
-
-		if (polling) {
-			setInterval(() => {
-				pymChild.sendMessage(
-					"height",
-					Math.max(document.body.scrollHeight, document.body.offsetHeight)
-				);
-			}, polling);
-		}
-
-		const href = document.location.href;
-		const parentUrl = new URLSearchParams(document.location.search).get("parentUrl");
-		dispatch("load", { href, parentUrl, pymChild });
-	});
-</script>
-
-<div class="ons-svelte-embed-container" style:display="contents">
-	<slot />
-</div>
-
-<style>
-	.ons-svelte-embed-container :global(.ons-container) {
-		padding: 0 !important;
-	}
-</style>
+<script>
+	import { onMount, createEventDispatcher } from "svelte";
+	import pym from "pym.js";
+
+	/**
+	 * Binding for pymChild element (can be used to send messages to parent of iframe)
+	 * @type {object}
+	 */
+	export let pymChild = null;
+	/**
+	 * Frequency (in milliseconds) of iframe height updates. Set as "false" to disable polling.
+	 * @type {number|false}
+	 */
+	export let polling = 500;
+
+	const dispatch = createEventDispatcher();
+
+	onMount(() => {
+		pymChild = new pym.Child();
+
+		if (polling) {
+			setInterval(() => {
+				pymChild.sendMessage(
+					"height",
+					Math.max(document.body.scrollHeight, document.body.offsetHeight)
+				);
+			}, polling);
+		}
+
+		const href = document.location.href;
+		const parentUrl = new URLSearchParams(document.location.search).get("parentUrl");
+		dispatch("load", { href, parentUrl, pymChild });
+	});
+</script>
+
+<div class="ons-svelte-embed-container" style:display="contents">
+	<slot />
+</div>
+
+<style>
+	.ons-svelte-embed-container :global(.ons-container) {
+		padding: 0 !important;
+	}
+</style>

package/dist/wrappers/Embed/docs/component.md

@@ -1,15 +1,15 @@
-A container for content designed to appear within an `<iframe>`. The component does two things:
-
-1. Overrides padding, so that content can fill the full width of its iframe.
-2. Initialises a Pym.js child for the iframe, so that it can communicate its height with its parent page.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Embed } from "@onsvisual/svelte-components";
-</script>
-
-<Embed>
-  {child_components}
-</Embed>
-```
+A container for content designed to appear within an `<iframe>`. The component does two things:
+
+1. Overrides padding, so that content can fill the full width of its iframe.
+2. Initialises a Pym.js child for the iframe, so that it can communicate its height with its parent page.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Embed } from "@onsvisual/svelte-components";
+</script>
+
+<Embed>
+  {child_components}
+</Embed>
+```

package/dist/wrappers/LazyLoad/LazyLoad.stories.svelte

@@ -1,37 +1,37 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import LazyLoad from "./LazyLoad.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Wrappers/LazyLoad",
-		component: LazyLoad,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	{#each Array.from(Array(15).keys()) as i}
-		<LazyLoad {...args}>
-			<div class="img-container">
-				<img src="https://picsum.photos/400/300?random={i}" alt="" />
-			</div>
-		</LazyLoad>
-	{/each}
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
-
-<style>
-	.img-container {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 500px;
-		background: #eee;
-		margin-bottom: 10px;
-	}
-</style>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import LazyLoad from "./LazyLoad.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/LazyLoad",
+		component: LazyLoad,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	{#each Array.from(Array(15).keys()) as i}
+		<LazyLoad {...args}>
+			<div class="img-container">
+				<img src="https://picsum.photos/400/300?random={i}" alt="" />
+			</div>
+		</LazyLoad>
+	{/each}
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<style>
+	.img-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 500px;
+		background: #eee;
+		margin-bottom: 10px;
+	}
+</style>

package/dist/wrappers/LazyLoad/LazyLoad.svelte

@@ -1,50 +1,50 @@
-<script>
-	import { onMount, onDestroy } from "svelte";
-
-	/**
-	 * Bind to this variable to monitor whether the component has entered the viewport (boolean true/false).
-	 * @type {boolean}
-	 */
-	export let entered = false;
-	/**
-	 * Set the initial "placeholder" height of the component in pixels.
-	 * @type {number}
-	 */
-	export let initialHeight = 400;
-	/**
-	 * Set how many pixels from the viewport you want lazy loading to kick in.
-	 * @type {number}
-	 */
-	export let rootMargin = 200;
-
-	let el, observer;
-
-	const callback = (entries, observer) => {
-		entries.forEach((entry) => {
-			let intersecting = entry.isIntersecting;
-			if (!entered && intersecting) {
-				observer.unobserve(el);
-				entered = true;
-			}
-		});
-	};
-
-	onMount(() => {
-		let options = { root: document, rootMargin: `${rootMargin}px` };
-
-		observer = new IntersectionObserver(callback, options);
-		observer.observe(el);
-	});
-
-	onDestroy(() => {
-		if (el && observer) {
-			observer.unobserve(el);
-		}
-	});
-</script>
-
-{#if entered}
-	<slot />
-{:else}
-	<div bind:this={el} style:height="{+initialHeight || 100}px"></div>
-{/if}
+<script>
+	import { onMount, onDestroy } from "svelte";
+
+	/**
+	 * Bind to this variable to monitor whether the component has entered the viewport (boolean true/false).
+	 * @type {boolean}
+	 */
+	export let entered = false;
+	/**
+	 * Set the initial "placeholder" height of the component in pixels.
+	 * @type {number}
+	 */
+	export let initialHeight = 400;
+	/**
+	 * Set how many pixels from the viewport you want lazy loading to kick in.
+	 * @type {number}
+	 */
+	export let rootMargin = 200;
+
+	let el, observer;
+
+	const callback = (entries, observer) => {
+		entries.forEach((entry) => {
+			let intersecting = entry.isIntersecting;
+			if (!entered && intersecting) {
+				observer.unobserve(el);
+				entered = true;
+			}
+		});
+	};
+
+	onMount(() => {
+		let options = { root: document, rootMargin: `${rootMargin}px` };
+
+		observer = new IntersectionObserver(callback, options);
+		observer.observe(el);
+	});
+
+	onDestroy(() => {
+		if (el && observer) {
+			observer.unobserve(el);
+		}
+	});
+</script>
+
+{#if entered}
+	<slot />
+{:else}
+	<div bind:this={el} style:height="{+initialHeight || 100}px"></div>
+{/if}

package/dist/wrappers/LazyLoad/docs/component.md

@@ -1,29 +1,29 @@
-A wrapper component that uses IntersectionObserver to allow the elements it contains to be lazy loaded, ie. to be initialised/mounted only when they enter the viewport (or come close to it).
-
-Optionally, you can use the **initialHeight** to set a placeholder height in pixels (default 400), and you can use **rootMargin** to set how many pixels from the viewport you want lazy loading to kick in (default 200).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { LazyLoad } from "@onsvisual/svelte-components";
-</script>
-
-{#each Array.from(Array(20).keys()) as i}
-  <LazyLoad>
-    <div class="img-container">
-      <img src="https://picsum.photos/400/300?random={i}" alt="" />
-    </div>
-  </LazyLoad>
-{/each}
-
-<style>
-  .img-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 400px;
-    background: #eee;
-    margin-bottom: 10px;
-  }
-</style>
-```
+A wrapper component that uses IntersectionObserver to allow the elements it contains to be lazy loaded, ie. to be initialised/mounted only when they enter the viewport (or come close to it).
+
+Optionally, you can use the **initialHeight** to set a placeholder height in pixels (default 400), and you can use **rootMargin** to set how many pixels from the viewport you want lazy loading to kick in (default 200).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { LazyLoad } from "@onsvisual/svelte-components";
+</script>
+
+{#each Array.from(Array(20).keys()) as i}
+  <LazyLoad>
+    <div class="img-container">
+      <img src="https://picsum.photos/400/300?random={i}" alt="" />
+    </div>
+  </LazyLoad>
+{/each}
+
+<style>
+  .img-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 400px;
+    background: #eee;
+    margin-bottom: 10px;
+  }
+</style>
+```

package/dist/wrappers/Main/Main.stories.svelte

@@ -1,24 +1,24 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Main from "./Main.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Wrappers/Main",
-		component: Main,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Main {...args}>
-		<div style:padding="24px 12px" style:background="var(--ons-color-grey-10)">
-			<p style:margin="0">Child components go here.</p>
-		</div>
-	</Main>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Main from "./Main.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Main",
+		component: Main,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Main {...args}>
+		<div style:padding="24px 12px" style:background="var(--ons-color-grey-10)">
+			<p style:margin="0">Child components go here.</p>
+		</div>
+	</Main>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

package/dist/wrappers/Main/Main.svelte

@@ -1,11 +1,11 @@
-<script>
-	/**
-	 * Sets the unique ID that can be targetted by hyperlinks
-	 * @type {string}
-	 */
-	export let id = "main";
-</script>
-
-<main {id}>
-	<slot />
-</main>
+<script>
+	/**
+	 * Sets the unique ID that can be targetted by hyperlinks
+	 * @type {string}
+	 */
+	export let id = "main";
+</script>
+
+<main {id}>
+	<slot />
+</main>

package/dist/wrappers/Main/docs/component.md

@@ -1,16 +1,16 @@
-This component creates a styled `<main>` element to wrap the primary contents of a page (generally everything between the page header and footer).
-
-This component is useful for screen readers to identify the primary content of the page. The standard header component also contains a visually hidden "Skip to content" link that will bring users to it.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Main } from "@onsvisual/svelte-components";
-</script>
-
-<!-- Header goes here -->
-<Main>
-  {child_components}
-</Main>
-<!-- Footer goes here -->
-```
+This component creates a styled `<main>` element to wrap the primary contents of a page (generally everything between the page header and footer).
+
+This component is useful for screen readers to identify the primary content of the page. The standard header component also contains a visually hidden "Skip to content" link that will bring users to it.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Main } from "@onsvisual/svelte-components";
+</script>
+
+<!-- Header goes here -->
+<Main>
+  {child_components}
+</Main>
+<!-- Footer goes here -->
+```

package/dist/wrappers/Observe/Observe.stories.svelte

@@ -1,29 +1,29 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Observe from "./Observe.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const colors = ["yellow", "green", "blue", "purple", "red", "orange"];
-
-	const { Story } = defineMeta({
-		title: "Wrappers/Observe",
-		component: Observe,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	{#each colors as color}
-		<Observe
-			on:enter={() => console.log(`${color} entered`)}
-			on:exit={() => console.log(`${color} exited`)}
-		>
-			<div style:background={color} style:height="400px"></div>
-		</Observe>
-	{/each}
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Observe from "./Observe.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const colors = ["yellow", "green", "blue", "purple", "red", "orange"];
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Observe",
+		component: Observe,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	{#each colors as color}
+		<Observe
+			on:enter={() => console.log(`${color} entered`)}
+			on:exit={() => console.log(`${color} exited`)}
+		>
+			<div style:background={color} style:height="400px"></div>
+		</Observe>
+	{/each}
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

package/dist/wrappers/Observe/Observe.svelte

@@ -1,40 +1,40 @@
-<script>
-	import { onMount, onDestroy, createEventDispatcher } from "svelte";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * Bind to this variable to monitor visiblity (boolean true/false).
-	 * @type {boolean}
-	 */
-	export let visible = false;
-	/**
-	 * Number of pixels before/after the viewport that component is considered "visible" (default = 0).
-	 * @type {number}
-	 */
-	export let rootMargin = 0;
-
-	let el, observer;
-
-	const callback = (entries) => {
-		entries.forEach((entry) => {
-			let intersecting = entry.isIntersecting;
-			if (!visible && intersecting) dispatch("enter", entry);
-			if (visible && !intersecting) dispatch("exit", entry);
-			visible = intersecting;
-		});
-	};
-
-	onMount(() => {
-		let options = { root: document, rootMargin: `${rootMargin}px` };
-
-		observer = new IntersectionObserver(callback, options);
-		observer.observe(el);
-	});
-
-	onDestroy(() => observer?.unobserve?.(el));
-</script>
-
-<div bind:this={el}>
-	<slot />
-</div>
+<script>
+	import { onMount, onDestroy, createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * Bind to this variable to monitor visiblity (boolean true/false).
+	 * @type {boolean}
+	 */
+	export let visible = false;
+	/**
+	 * Number of pixels before/after the viewport that component is considered "visible" (default = 0).
+	 * @type {number}
+	 */
+	export let rootMargin = 0;
+
+	let el, observer;
+
+	const callback = (entries) => {
+		entries.forEach((entry) => {
+			let intersecting = entry.isIntersecting;
+			if (!visible && intersecting) dispatch("enter", entry);
+			if (visible && !intersecting) dispatch("exit", entry);
+			visible = intersecting;
+		});
+	};
+
+	onMount(() => {
+		let options = { root: document, rootMargin: `${rootMargin}px` };
+
+		observer = new IntersectionObserver(callback, options);
+		observer.observe(el);
+	});
+
+	onDestroy(() => observer?.unobserve?.(el));
+</script>
+
+<div bind:this={el}>
+	<slot />
+</div>