@onsvisual/svelte-components 1.0.31 → 1.0.33

package/dist/inputs/Dropdown/Dropdown.svelte

@@ -8,6 +8,11 @@
 	 * @type {string|null}
 	 */
 	export let id = null;
+	/**
+	 * Name for the <select> element
+	 * @type {string|null}
+	 */
+	export let name = id;
 	/**
 	 * A label to describe the <select> element (expected for accessibility)
 	 * @type {string|null}
@@ -46,7 +51,7 @@
 	{/if}
 	<select
 		{id}
-		name={id}
+		{name}
 		class="ons-input ons-input--select"
 		bind:value
 		on:change={(e) => dispatch("change", e)}

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

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

package/dist/inputs/Input/Input.svelte

@@ -8,6 +8,11 @@
 	 * @type {string|null}
 	 */
 	export let id = null;
+	/**
+	 * Name attribute for <input> element
+	 * @type {string|null}
+	 */
+	export let name = id;
 	/**
 	 * A prop to bind to for the entered value
 	 * @type {string|null}
@@ -103,6 +108,7 @@
 				<input
 					type="text"
 					{id}
+					{name}
 					bind:value
 					maxlength={charLimit}
 					pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
@@ -129,6 +135,7 @@
 		<input
 			type="text"
 			{id}
+			{name}
 			bind:value
 			pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
 			inputmode={numeric ? "numeric" : null}

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

@@ -7,6 +7,7 @@ export default class Input extends SvelteComponentTyped<{
     width?: number | undefined;
     label?: string | undefined;
     pattern?: string | null | undefined;
+    name?: string | null | undefined;
     error?: boolean | undefined;
     numeric?: boolean | undefined;
     value?: string | null | undefined;
@@ -34,6 +35,7 @@ declare const __propDef: {
         width?: number | undefined;
         label?: string | undefined;
         pattern?: string | null | undefined;
+        name?: string | null | undefined;
         error?: boolean | undefined;
         numeric?: boolean | undefined;
         value?: string | null | undefined;

package/dist/inputs/Radios/Radio.svelte

@@ -24,7 +24,7 @@
 	 */
 	export let item = { id, label, description };
 	/**
-	 * ID for radio group (required)
+	 * ID/name for radio group (required)
 	 * @type {string}
 	 */
 	export let groupId;

package/dist/inputs/Radios/Radios.svelte

@@ -12,10 +12,10 @@
 	 */
 	export let hideTitle = false;
 	/**
-	 * Unique ID for radio group (required)
+	 * Unique ID/name for radio group (required)
 	 * @type {string}
 	 */
-	export let id = "name";
+	export let id = "radios";
 	/**
 	 * Descriptive "how to" label for inputs
 	 * @type {string|null}

package/dist/inputs/Select/Select.svelte

@@ -2,6 +2,8 @@
 	// @ts-nocheck
 
 	import { onMount, createEventDispatcher } from "svelte";
+	import Dropdown from "../Dropdown/Dropdown.svelte";
+	import Input from "../Input/Input.svelte";
 
 	const dispatch = createEventDispatcher();
 	const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -14,10 +16,15 @@
 	let hideMenu = false;
 
 	/**
-	 * Unique id for the element
+	 * Unique id for the HTML element
 	 * @type {string}
 	 */
 	export let id = "autocomplete";
+	/**
+	 * Name for the HTML element
+	 * @type {string}
+	 */
+	export let name = id;
 	/**
 	 * The mode can be either "default" or "search"
 	 * @type {"default"|"search"}
@@ -68,6 +75,11 @@
 	 * @type {string|null}
 	 */
 	export let groupKey = null;
+	/**
+	 * When using SSR or pre-rendering, this option will render a text input or dropdown before the page is hydrated (allows for progressive enhancement).
+	 * @type {boolean}
+	 */
+	export let renderFallback = false;
 	/**
 	 * Optional: Minimum query length to return results
 	 * @type {number}
@@ -92,23 +104,22 @@
 	 */
 	export let scriptUrl =
 		"https://cdn.ons.gov.uk/vendor/accessible-autocomplete/3.0.1/accessible-autocomplete.min.js";
-
-	// This clearing method is a bit of a hack, but no better options available at present
-	// https://github.com/alphagov/accessible-autocomplete/issues/390
 	/**
 	 * Call this function externally to clear the input
 	 * @type {function}
 	 */
-	export async function clearInput() {
+	export let clearInput = async () => {
 		await setInputValue(null);
 		dispatch("clear", null);
-	}
+	};
 	/**
 	 * Optional: Set an additional CSS class for the component
 	 * @type {string|null}
 	 */
 	export let cls = null;
 
+	// This method is a bit of a hack, but no better options available at present
+	// https://github.com/alphagov/accessible-autocomplete/issues/390
 	async function setInputValue(textValue) {
 		hideMenu = true;
 		inputElement.value = textValue || "";
@@ -167,7 +178,7 @@
 		accessibleAutocomplete({
 			element,
 			id,
-			name: `${id}-input`,
+			name,
 			source: loadOptions,
 			autoselect: true,
 			onConfirm: select,
@@ -204,35 +215,48 @@
 	<script src={scriptUrl} on:load={handleScriptLoad}></script>
 </svelte:head>
 
-<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}
-			<div
-				id="{id}-container"
-				class="ons-autocomplete"
-				class:hide-menu={hideMenu}
-				use:initAutocomplete
-			></div>
-			{#if clearable && !autoClear && value}
-				<button
-					type="reset"
-					title="Clear selection"
-					aria-label="Clear selection"
-					on:click={clearInput}
-					class="ons-autocomplete-clear"
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 14 14" width="18">
-						<path
-							fill="currentColor"
-							d="M13.6 1 l -0.71 -0.71 a 0.5 0.5 0 0 0 -0.71 0 l -5.25 5.25 l -5.25 -5.25 a 0.51 0.51 0 0 0 -0.71 0 l -0.71 0.71 a 0.5 0.5 0 0 0 0 0.71 l 5.25 5.25 l -5.25 5.25 a 0.5 0.5 0 0 0 0 0.71 l 0.71 0.71 a 0.5 0.5 0 0 0 0.71 0 l 5.25 -5.25 l 5.25 5.25 a 0.5 0.5 0 0 0 0.71 0 l 0.71 -0.71 a 0.5 0.5 0 0 0 0 -0.71 l -5.25 -5.25 l 5.25 -5.25 a 0.5 0.5 0 0 0 0 -0.71Z"
-						></path>
-					</svg>
-				</button>
+{#if renderFallback && !scriptLoaded}
+	{#if mode === "search"}
+		<Input {id} {name} {label} {hideLabel} value={value?.[labelKey]} />
+	{:else}
+		<Dropdown {id} {name} {options} {label} {hideLabel} {placeholder} {value} />
+	{/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}
+				<div
+					id="{id}-container"
+					class="ons-autocomplete"
+					class:hide-menu={hideMenu}
+					use:initAutocomplete
+				></div>
+				{#if clearable && !autoClear && value}
+					<button
+						type="reset"
+						title="Clear selection"
+						aria-label="Clear selection"
+						on:click={clearInput}
+						class="ons-autocomplete-clear"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							aria-hidden="true"
+							viewBox="0 0 14 14"
+							width="18"
+						>
+							<path
+								fill="currentColor"
+								d="M13.6 1 l -0.71 -0.71 a 0.5 0.5 0 0 0 -0.71 0 l -5.25 5.25 l -5.25 -5.25 a 0.51 0.51 0 0 0 -0.71 0 l -0.71 0.71 a 0.5 0.5 0 0 0 0 0.71 l 5.25 5.25 l -5.25 5.25 a 0.5 0.5 0 0 0 0 0.71 l 0.71 0.71 a 0.5 0.5 0 0 0 0.71 0 l 5.25 -5.25 l 5.25 5.25 a 0.5 0.5 0 0 0 0.71 0 l 0.71 -0.71 a 0.5 0.5 0 0 0 0 -0.71 l -5.25 -5.25 l 5.25 -5.25 a 0.5 0.5 0 0 0 0 -0.71Z"
+							></path>
+						</svg>
+					</button>
+				{/if}
 			{/if}
-		{/if}
+		</div>
 	</div>
-</div>
+{/if}
 
 <style>
 	.ons-autocomplete-wrapper {

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

@@ -5,6 +5,7 @@ export default class Select extends SvelteComponentTyped<{
     cls?: string | null | undefined;
     id?: string | undefined;
     label?: string | undefined;
+    name?: string | undefined;
     mode?: "default" | "search" | undefined;
     value?: object | undefined;
     hideLabel?: boolean | undefined;
@@ -14,17 +15,17 @@ export default class Select extends SvelteComponentTyped<{
     autoClear?: boolean | undefined;
     labelKey?: string | undefined;
     groupKey?: string | null | undefined;
+    renderFallback?: boolean | undefined;
     minLength?: number | undefined;
     loadOptions?: Function | undefined;
     scriptUrl?: string | undefined;
-    clearInput?: (() => Promise<void>) | undefined;
+    clearInput?: Function | undefined;
 }, {
     clear: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
-    get clearInput(): () => Promise<void>;
 }
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
@@ -35,6 +36,7 @@ declare const __propDef: {
         cls?: string | null | undefined;
         id?: string | undefined;
         label?: string | undefined;
+        name?: string | undefined;
         mode?: "default" | "search" | undefined;
         value?: object | undefined;
         hideLabel?: boolean | undefined;
@@ -44,10 +46,11 @@ declare const __propDef: {
         autoClear?: boolean | undefined;
         labelKey?: string | undefined;
         groupKey?: string | null | undefined;
+        renderFallback?: boolean | undefined;
         minLength?: number | undefined;
         loadOptions?: Function | undefined;
         scriptUrl?: string | undefined;
-        clearInput?: (() => Promise<void>) | undefined;
+        clearInput?: Function | undefined;
     };
     events: {
         clear: CustomEvent<any>;

package/dist/inputs/Textarea/Textarea.svelte

@@ -8,6 +8,11 @@
 	 * @type {string|null}
 	 */
 	export let id = null;
+	/**
+	 * Name for <textarea> element
+	 * @type {string|null}
+	 */
+	export let name = id;
 	/**
 	 * A prop to bind to for the entered value
 	 * @type {string|null}
@@ -68,11 +73,11 @@
 	{/if}
 	<textarea
 		{id}
+		{name}
 		bind:value
 		class="ons-input ons-input--textarea {Number.isInteger(width) ? `ons-input--w-${width}` : null}"
 		class:ons-js-char-limit-input={charLimit}
 		class:ons-input--limit-reached={remaining === 0}
-		name={id}
 		{rows}
 		maxlength={charLimit}
 		data-char-limit-ref="{id}-lim"

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

@@ -6,6 +6,7 @@ export default class Textarea extends SvelteComponentTyped<{
     id?: string | null | undefined;
     width?: number | undefined;
     label?: string | undefined;
+    name?: string | null | undefined;
     value?: string | null | undefined;
     description?: string | null | undefined;
     hideLabel?: boolean | undefined;
@@ -25,6 +26,7 @@ declare const __propDef: {
         id?: string | null | undefined;
         width?: number | undefined;
         label?: string | undefined;
+        name?: string | null | undefined;
         value?: string | null | undefined;
         description?: string | null | undefined;
         hideLabel?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.31",
+	"version": "1.0.33",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",