@onsvisual/svelte-components 1.0.54 → 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.54",
+	"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"
 	]
-}
+}