@onsvisual/svelte-components 1.0.53 → 1.0.55

package/dist/inputs/Dropdown/Dropdown.svelte

@@ -38,6 +38,11 @@
 	 * @type {object[]}
 	 */
 	export let options = [];
+	/**
+	 * The width of the <input> in characters or a valid css width string (eg. "100px")
+	 * @type {number|string|null}
+	 */
+	export let width = 20;
 	/**
 	 * Optional: Set an additional CSS class for the component
 	 * @type {string|null}
@@ -52,7 +57,10 @@
 	<select
 		{id}
 		{name}
-		class="ons-input ons-input--select"
+		class="ons-input ons-input--select {Number.isInteger(width)
+			? `ons-input--w-${width}`
+			: ''}"
+		style:width={typeof width === "string" ? width : null}
 		bind:value
 		on:change={(e) => dispatch("change", e)}
 	>
@@ -64,3 +72,9 @@
 		{/each}
 	</select>
 </div>
+
+<style>
+	.ons-input--select {
+		width: 100%;
+	}
+</style>

package/dist/inputs/Dropdown/Dropdown.svelte.d.ts

@@ -4,6 +4,7 @@
 export default class Dropdown extends SvelteComponentTyped<{
     cls?: string | null | undefined;
     id?: string | null | undefined;
+    width?: string | number | null | undefined;
     label?: string | null | undefined;
     name?: string | null | undefined;
     value?: object | null | undefined;
@@ -24,6 +25,7 @@ declare const __propDef: {
     props: {
         cls?: string | null | undefined;
         id?: string | null | undefined;
+        width?: string | number | null | undefined;
         label?: string | null | undefined;
         name?: string | null | undefined;
         value?: object | null | undefined;

package/dist/inputs/Input/Input.svelte

@@ -35,14 +35,14 @@
 	export let description = null;
 	/**
 	 * The maximum number of characters that can be entered (optional)
-	 * @type {number}
+	 * @type {number|null}
 	 */
 	export let charLimit = null;
 	/**
-	 * The width of the <input> in characters
-	 * @type {number}
+	 * The width of the <input> in characters or a valid css width string (eg. "100px")
+	 * @type {number|string|null}
 	 */
-	export let width = null;
+	export let width = 20;
 	/**
 	 * An optional prefix (eg. £) to appear on the left of the input
 	 * @type {string|null}
@@ -116,6 +116,7 @@
 					class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
 						? `ons-input--w-${width}`
 						: ''}"
+					style:width={typeof width === "string" ? width : null}
 					class:ons-input--error={error}
 					aria-labelledby="{id} {id}-unit"
 					aria-describedby={description ? `${id}-description-hint` : null}
@@ -142,6 +143,7 @@
 			class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
 				? `ons-input--w-${width}`
 				: ''}"
+			style:width={typeof width === "string" ? width : null}
 			class:ons-input--error={error}
 			aria-describedby={description ? `${id}-description-hint` : null}
 			{disabled}
@@ -149,3 +151,9 @@
 		/>
 	{/if}
 </div>
+
+<style>
+	.ons-input--text {
+		width: 100%;
+	}
+</style>

package/dist/inputs/Input/Input.svelte.d.ts

@@ -4,7 +4,7 @@
 export default class Input extends SvelteComponentTyped<{
     cls?: string | null | undefined;
     id?: string | null | undefined;
-    width?: number | undefined;
+    width?: string | number | null | undefined;
     label?: string | null | undefined;
     pattern?: string | null | undefined;
     name?: string | null | undefined;
@@ -14,7 +14,7 @@ export default class Input extends SvelteComponentTyped<{
     description?: string | null | undefined;
     disabled?: boolean | undefined;
     hideLabel?: boolean | undefined;
-    charLimit?: number | undefined;
+    charLimit?: number | null | undefined;
     prefix?: string | null | undefined;
     suffix?: string | null | undefined;
     unitLabel?: string | undefined;
@@ -32,7 +32,7 @@ declare const __propDef: {
     props: {
         cls?: string | null | undefined;
         id?: string | null | undefined;
-        width?: number | undefined;
+        width?: string | number | null | undefined;
         label?: string | null | undefined;
         pattern?: string | null | undefined;
         name?: string | null | undefined;
@@ -42,7 +42,7 @@ declare const __propDef: {
         description?: string | null | undefined;
         disabled?: boolean | undefined;
         hideLabel?: boolean | undefined;
-        charLimit?: number | undefined;
+        charLimit?: number | null | undefined;
         prefix?: string | null | undefined;
         suffix?: string | null | undefined;
         unitLabel?: string | undefined;

package/dist/inputs/Select/Select.svelte

@@ -1,7 +1,7 @@
 <script>
 	// @ts-nocheck
-
 	import { onMount, createEventDispatcher } from "svelte";
+	import accessibleAutocomplete from "accessible-autocomplete";
 	import Dropdown from "../Dropdown/Dropdown.svelte";
 	import Input from "../Input/Input.svelte";
 
@@ -10,9 +10,8 @@
 	const chevron = (opts) =>
 		`<svg class="${opts?.className}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 11.75 7.7" width="18" style="z-index:1"><path fill="currentColor" d="m1.37.15 4.5 5.1 4.5-5.1a.37.37 0 0 1 .6 0l.7.7a.45.45 0 0 1 0 .5l-5.5 6.2a.37.37 0 0 1-.6 0l-5.5-6.1a.64.64 0 0 1 0-.6l.7-.7a.64.64 0 0 1 .6 0Z"></path></svg>`;
 
+	let mounted = false;
 	let inputElement;
-	let scriptLoaded;
-	let accessibleAutocomplete;
 	let hideMenu = false;
 
 	/**
@@ -98,12 +97,6 @@
 					);
 		populateResults(filteredResults);
 	};
-	/**
-	 * Optional: Override the default CDN URL for the accessible-autocomplete script
-	 * @type {string}
-	 */
-	export let scriptUrl =
-		"https://cdn.ons.gov.uk/vendor/accessible-autocomplete/3.0.1/accessible-autocomplete.min.js";
 	/**
 	 * Call this function externally to clear the input
 	 * @type {function}
@@ -167,13 +160,6 @@
 		if (!e.target.value) select(null);
 	}
 
-	function handleScriptLoad() {
-		if (!scriptLoaded && window?.accessibleAutocomplete) {
-			accessibleAutocomplete = window.accessibleAutocomplete;
-			scriptLoaded = true;
-		}
-	}
-
 	function initAutocomplete(element) {
 		accessibleAutocomplete({
 			element,
@@ -209,24 +195,20 @@
 	}
 	$: bindInputValue(value);
 
-	onMount(handleScriptLoad);
+	onMount(() => mounted = true);
 </script>
 
-<svelte:head>
-	<script src={scriptUrl} on:load={handleScriptLoad}></script>
-</svelte:head>
-
-{#if renderFallback && !scriptLoaded}
+{#if renderFallback && !mounted}
 	{#if mode === "search"}
-		<Input {id} {name} {label} {hideLabel} value={value?.[labelKey]} />
+		<Input {id} {name} {label} {hideLabel} value={value?.[labelKey]} width={null}/>
 	{:else}
-		<Dropdown {id} {name} {options} {label} {hideLabel} {placeholder} {value} />
+		<Dropdown {id} {name} {options} {label} {hideLabel} {placeholder} {value} width={null} />
 	{/if}
 {:else}
 	<div class="ons-field {cls}">
 		{#if label}<label for={id} class="ons-label" class:ons-u-vh={hideLabel}>{label}</label>{/if}
 		<div class="ons-autocomplete-wrapper">
-			{#if scriptLoaded}
+			{#if mounted}
 				<div
 					id="{id}-container"
 					class="ons-autocomplete"

package/dist/inputs/Select/Select.svelte.d.ts

@@ -18,7 +18,6 @@ export default class Select extends SvelteComponentTyped<{
     renderFallback?: boolean | undefined;
     minLength?: number | undefined;
     loadOptions?: Function | undefined;
-    scriptUrl?: string | undefined;
     clearInput?: Function | undefined;
 }, {
     clear: CustomEvent<any>;
@@ -49,7 +48,6 @@ declare const __propDef: {
         renderFallback?: boolean | undefined;
         minLength?: number | undefined;
         loadOptions?: Function | undefined;
-        scriptUrl?: string | undefined;
         clearInput?: Function | undefined;
     };
     events: {

package/dist/wrappers/LazyLoad/LazyLoad.svelte

@@ -1,6 +1,4 @@
 <script>
-	import { onMount, onDestroy } from "svelte";
-
 	/**
 	 * Bind to this variable to monitor whether the component has entered the viewport (boolean true/false).
 	 * @type {boolean}
@@ -17,34 +15,31 @@
 	 */
 	export let rootMargin = 200;
 
-	let el, observer;
-
 	const callback = (entries, observer) => {
 		entries.forEach((entry) => {
+			console.log(entry);
 			let intersecting = entry.isIntersecting;
 			if (!entered && intersecting) {
-				observer.unobserve(el);
+				observer.unobserve(entry.target);
 				entered = true;
 			}
 		});
 	};
 
-	onMount(() => {
+	function initObserver(el) {
 		let options = { root: document, rootMargin: `${rootMargin}px` };
 
-		observer = new IntersectionObserver(callback, options);
+		const observer = new IntersectionObserver(callback, options);
 		observer.observe(el);
-	});
 
-	onDestroy(() => {
-		if (el && observer) {
-			observer.unobserve(el);
-		}
-	});
+		return {
+			destroy: () => observer?.unobserve?.(el)
+		};
+	}
 </script>
 
 {#if entered}
 	<slot />
 {:else}
-	<div bind:this={el} style:height="{+initialHeight || 100}px"></div>
+	<div use:initObserver style:height="{+initialHeight || 100}px"></div>
 {/if}

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

@@ -1,6 +1,6 @@
-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).
+A wrapper component that uses IntersectionObserver to allow the Svelte components or HTML elements it contains to be lazy loaded, ie. to be added to the page (or DOM) only when they enter the viewport.
 
-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).
+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 before the viewport you want lazy loading to kick in (default 200).
 
 <!-- prettier-ignore -->
 ```html

package/dist/wrappers/Observe/Observe.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, onDestroy, createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from "svelte";
 
 	const dispatch = createEventDispatcher();
 
@@ -14,8 +14,6 @@
 	 */
 	export let rootMargin = 0;
 
-	let el, observer;
-
 	const callback = (entries) => {
 		entries.forEach((entry) => {
 			let intersecting = entry.isIntersecting;
@@ -30,16 +28,18 @@
 		});
 	};
 
-	onMount(() => {
+	function initObserver(el) {
 		let options = { root: document, rootMargin: `${rootMargin}px` };
 
-		observer = new IntersectionObserver(callback, options);
+		const observer = new IntersectionObserver(callback, options);
 		observer.observe(el);
-	});
 
-	onDestroy(() => observer?.unobserve?.(el));
+		return {
+			destroy: () => observer?.unobserve?.(el)
+		};
+	}
 </script>
 
-<div bind:this={el}>
+<div use:initObserver>
 	<slot />
 </div>

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

@@ -4,16 +4,21 @@ This component can be useful for triggering actions such as lazy loading of data
 
 This component has **enter** and **exit** events, triggered when it enters or leaves the viewport. It also has a **visible** binding which has a value of **true** when it is within the viewport.
 
+In this demo, you can open your browser's developer console (**F12**) to see the logs for elements entering and existing the viewport.
+
 <!-- prettier-ignore -->
 ```html
 <script>
   import { Observe } from "@onsvisual/svelte-components";
 
+  let visible;
+
   const colors = ["yellow", "green", "blue", "purple", "red", "orange"];
 </script>
 
 {#each colors as color}
 <Observe
+  bind:visible
   on:enter={() => console.log(`${color} entered`)}
   on:exit={() => console.log(`${color} exited`)}>
   <div class="section" style:background={color} style:height="400px"/>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.53",
+	"version": "1.0.55",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",
@@ -62,6 +62,7 @@
 		"@types/node": "^20",
 		"@vitest/browser": "3.2.3",
 		"@vitest/coverage-v8": "3.2.3",
+		"accessible-autocomplete": "^3.0.1",
 		"csso": "^5.0.5",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
@@ -86,4 +87,4 @@
 	"keywords": [
 		"svelte"
 	]
-}
+}