@onsvisual/svelte-components 0.1.104 → 1.0.0-next.1

package/dist/inputs/Select/Select.svelte

@@ -1,299 +1,281 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-  import SelectInner from "svelte-select";
-  import { sleep } from "../../js/utils";
+	// @ts-nocheck
 
-  /**
-   * Unique id for the element
-   * @type {string}
-   */
-  export let id = "";
-  /**
-   * The mode can be either "default" or "search"
-   * @type {"default"|"search"}
-   */
-  export let mode = "default";
-  /**
-   * Binding for the filter text entered
-   * @type {string}
-   */
-  export let filterText = "";
-  /**
-   * Enable multi-select mode
-   * @type {boolean}
-   */
-  export let multiple = false;
-  /**
-   * Set a limit on the number of items in multi-select mode
-   * @type {number}
-   */
-  export let maxSelected = 4;
-  /**
-   * Defines whether the selection can be cleared
-   * @type {boolean}
-   */
-  export let clearable = true;
-  /**
-   * Clear value on selection (default for "search" mode)
-   * @type {boolean}
-   */
-  export let autoClear = mode === "search";
-  /**
-   * A label to describe the element (expected for accessibility)
-   * @type {string}
-   */
-  export let label = "";
-  /**
-   * Visually hide the label
-   * @type {boolean}
-   */
-  export let hideLabel = false;
-  /**
-   * An optional placeholder text
-   * @type {string}
-   */
-  export let placeholder = "Select an option";
-  /**
-   * A prop to bind to for the selected value (will be an array for multi-select)
-   * @type {object}
-   */
-  export let value = null;
-  /**
-   * An array of options, formatted {id, label}
-   * @type {array}
-   */
-  export let options = [];
-  /**
-   * The attribute of an option that defines its ID
-   * @type {string}
-   */
-  export let idKey = "id";
-  /**
-   * The attribute of an option that defines its label/name
-   * @type {string}
-   */
-  export let labelKey = "label";
-  /**
-   * The attribute of an option that defines its group (optional)
-   * @type {string|null}
-   */
-  export let groupKey = null;
-  /**
-   * Cluster results by group. If {false}, the group name will be the suffix
-   * @type {boolean}
-   */
-  export let clusterByGroup = false;
-  /**
-   * Defines the width of the input in characters
-   * @type {number}
-   */
-  export let width = 30;
-  /**
-   * Hide the icon in the search box
-   * @type {boolean}
-   */
-  export let hideIcon = false;
-  /**
-   * An array of colours for multi-select
-   * @type {array}
-   */
-  export let colors = [
-    "#206095",
-    "#a8bd3a",
-    "#871a5b",
-    "#27a0cc",
-    "rgb(0, 60, 87)",
-    "rgb(116, 108, 177)",
-    "rgb(246, 96, 104)",
-    "rgb(0, 163, 166)",
-  ];
-  /**
-   * A function to filter items based on the entered text
-   * @type {function}
-   */
-  export let itemFilter = (label, filterText, option) =>
-    label.match(new RegExp(`\\b${filterText.replace(/[^\w\s]/gi, "")}`, "i")) &&
-    !(multiple && value?.length >= maxSelected) &&
-    !(mode === "search" && filterText?.length < 3);
-  /**
-   * An optional function to load options based on the entered text
-   * @type {function}
-   */
-  export let loadOptions = null;
-  /**
-   * Optional params for positioning the dropdown
-   * @type {object} floatingConfig
-   */
-  export let floatingConfig = {};
+	import { onMount, createEventDispatcher } from "svelte";
 
-  $: style = colors.map((c, i) => `--item${i + 1}:${c}`).join(";");
-  $: noOptionsMessage =
-    multiple && value?.length >= maxSelected
-      ? `You can only select up to ${maxSelected} options`
-      : mode === "search" && filterText.length < 3
-      ? "Enter 3 or more characters to see options"
-      : filterText
-      ? `No options match <b>${filterText}</b>`
-      : "No options available";
+	const dispatch = createEventDispatcher();
+	const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
+	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>`;
 
-  const dispatch = createEventDispatcher();
+	let inputElement;
+	let scriptLoaded;
+	let accessibleAutocomplete;
+	let hideMenu = false;
 
-  async function handleChange(e) {
-    dispatch("change", e.detail);
-    if (autoClear) {
-      await sleep(100);
-      value = null;
-    }
-  }
+	/**
+	 * Unique id for the element
+	 * @type {string}
+	 */
+	export let id = "autocomplete";
+	/**
+	 * The mode can be either "default" or "search"
+	 * @type {"default"|"search"}
+	 */
+	export let mode = "default";
+	/**
+	 * Defines whether the selection can be cleared
+	 * @type {boolean}
+	 */
+	export let clearable = mode !== "search";
+	/**
+	 * Clear value on selection (default for "search" mode)
+	 * @type {boolean}
+	 */
+	export let autoClear = mode === "search";
+	/**
+	 * A label to describe the element (expected for accessibility)
+	 * @type {string}
+	 */
+	export let label = mode === "search" ? "Type to select" : "Select an option";
+	/**
+	 * Visually hide the label
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * An optional placeholder text
+	 * @type {string}
+	 */
+	export let placeholder = mode === "search" ? "Enter text" : "Select one";
+	/**
+	 * A prop to bind to for the selected value
+	 * @type {object}
+	 */
+	export let value = null;
+	/**
+	 * An array of options, formatted {id, label}
+	 * @type {array}
+	 */
+	export let options = [];
+	/**
+	 * The attribute of an option that defines its label/name
+	 * @type {string}
+	 */
+	export let labelKey = "label";
+	/**
+	 * The attribute of an option that defines its group (optional)
+	 * @type {string}
+	 */
+	export let groupKey = "";
+	/**
+	 * Optional: Minimum query length to return results
+	 * @type {number}
+	 */
+	export let minLength = mode === "search" ? 1 : 0;
+	/**
+	 * Optional: Override function for loading/filtering options based on the entered text
+	 * @type {function}
+	 */
+	export let loadOptions = (query, populateResults) => {
+		const filteredResults =
+			mode !== "search" && options.map((opt) => opt[labelKey]).includes(query)
+				? options
+				: options.filter((opt) =>
+						opt[labelKey].match(new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i"))
+					);
+		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";
+
+	// 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() {
+		hideMenu = true;
+		inputElement.value = "";
+		await sleep(110);
+		inputElement.focus({ preventScroll: true });
+		inputElement.blur();
+		hideMenu = false;
+		dispatch("clear", value);
+	}
+
+	function inputValueTemplate(result) {
+		return result && result[labelKey];
+	}
+
+	function highlight(text, query = "") {
+		return text.replace(
+			new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i"),
+			(str) => `<b>${str}</b>`
+		);
+	}
+
+	function suggestionTemplate(result) {
+		const query = inputElement?.value || "";
+		return (
+			result &&
+			(groupKey
+				? `${highlight(result?.[labelKey] || "", query)} <span class="muted-text">${
+						result[groupKey]
+					}</span>`
+				: highlight(result?.[labelKey] || "", query))
+		);
+	}
+
+	async function select(option) {
+		value = option;
+		dispatch("change", value);
+		if (value && autoClear) {
+			await sleep(0);
+			clearInput();
+		}
+	}
+
+	function inputChange(e) {
+		if (!e.target.value) select(null);
+	}
+
+	function handleScriptLoad() {
+		if (!scriptLoaded && window?.accessibleAutocomplete) {
+			accessibleAutocomplete = window.accessibleAutocomplete;
+			scriptLoaded = true;
+		}
+	}
+
+	function initAutocomplete(element) {
+		accessibleAutocomplete({
+			element,
+			id,
+			name: `${id}-input`,
+			source: loadOptions,
+			defaultValue: value?.[labelKey] || "",
+			autoselect: true,
+			onConfirm: select,
+			confirmOnBlur: false,
+			placeholder,
+			displayMenu: "overlay",
+			showAllValues: mode === "default",
+			dropdownArrow: chevron,
+			minLength,
+			templates: {
+				inputValue: inputValueTemplate,
+				suggestion: suggestionTemplate
+			}
+		});
+		inputElement = document.getElementById(id);
+		inputElement.addEventListener("blur", inputChange);
+	}
+
+	onMount(handleScriptLoad);
 </script>
 
-<div class="ons-field" style="{style}">
-  {#if label}
-    <label class="ons-label" for="{id}" class:ons-u-vh="{hideLabel}">{label}</label>
-  {/if}
-  <div class="ons-themed-select {Number.isInteger(width) ? `ons-input--w-${width}` : ''}">
-    <SelectInner
-      id="{id}"
-      placeholder="{placeholder}"
-      loadOptions="{loadOptions}"
-      itemFilter="{itemFilter}"
-      floatingConfig="{floatingConfig}"
-      bind:filterText="{filterText}"
-      bind:value="{value}"
-      items="{options}"
-      itemId="{idKey}"
-      label="{labelKey}"
-      groupBy="{groupKey && clusterByGroup ? (item) => item[groupKey] : null}"
-      showChevron="{!hideIcon}"
-      multiple="{multiple}"
-      clearable="{clearable}"
-      on:change="{handleChange}"
-      on:input
-      on:focus
-      on:blur
-      on:clear
-    >
-      <div slot="item" let:item>
-        {@html item[labelKey].replace(
-          new RegExp(`\\b${filterText.replace(/[^\w\s]/gi, "")}`, "i"),
-          (str) => `<b>${str}</b>`
-        )}
-        {#if groupKey && !clusterByGroup}<span class="item-group">{item[groupKey]}</span>{/if}
-      </div>
-      <div slot="empty">{@html noOptionsMessage}</div>
-      <div slot="chevron-icon" style:transform="{mode === "search" ? "translateY(2px)" : null}">
-        {#if mode === "search"}
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 12 12" width="20">
-            <path
-              fill="currentColor"
-              d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z"
-            ></path>
-          </svg>
-        {:else}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-            viewBox="0 0 11.75 7.7"
-            width="18"
-          >
-            <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>
-        {/if}
-      </div>
-      <div slot="clear-icon" style:transform="translateY(2px)" aria-label="Clear search">
-        <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>
-      </div>
-    </SelectInner>
-  </div>
+<svelte:head>
+	<script src={scriptUrl} on:load={handleScriptLoad}></script>
+</svelte:head>
+
+<div class="ons-field">
+	{#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}
+	</div>
 </div>
 
 <style>
-  div[slot="empty"] {
-    background-color: rgb(226, 226, 227);
-    padding: 6px 10px;
-  }
-  .ons-themed-select {
-    --border: 1px solid currentColor;
-    --border-hover: 1px solid currentColor;
-    --border-focused: 1px solid currentColor;
-    --border-radius: 3px;
-    --font-size: 18px;
-    --placeholder-color: currentColor;
-    --padding: 0 0 0 10px;
-    --list-border: 1px solid currentColor;
-    --item-hover-bg: #003c57;
-    --item-hover-color: white;
-    --item-is-active-bg: #003c57;
-    --item-padding: 0 0 0 10px;
-    --multi-item-outline: none;
-    --multi-item-height: 30px;
-    --value-container-padding: 3px 0;
-    --multi-select-padding: 0 0 0 6px;
-    --group-item-padding-left: 24px;
-  }
-  :global(.ons-themed-select > .svelte-select:focus-within) {
-    outline: 3px solid #fbc900;
-  }
-  :global(.ons-themed-select > .svelte-select:focus-within::before) {
-    content: "";
-    outline: 1px solid rgb(34, 34, 34);
-    outline-offset: -1px;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    pointer-events: none;
-  }
-  :global(.ons-themed-select .svelte-select-list) {
-    z-index: 4 !important;
-    color: #222;
-  }
-  :global(.ons-themed-select .svelte-select-list > div + div) {
-    border-top: 1px solid rgb(34, 34, 34);
-  }
-  :global(.ons-themed-select .multi-item) {
-    color: white !important;
-    font-weight: bold;
-  }
-  :global(.ons-themed-select .multi-item svg > path) {
-    fill: white !important;
-  }
-  :global(.ons-themed-select .multi-item:nth-of-type(1)) {
-    background-color: var(--item1, #ebedef) !important;
-  }
-  :global(.ons-themed-select .multi-item:nth-of-type(2)) {
-    background-color: var(--item2, #ebedef) !important;
-  }
-  :global(.ons-themed-select .multi-item:nth-of-type(3)) {
-    background-color: var(--item3, #ebedef) !important;
-  }
-  :global(.ons-themed-select .multi-item:nth-of-type(4)) {
-    background-color: var(--item4, #ebedef) !important;
-  }
-  :global(.ons-themed-select .multi-item:nth-of-type(5)) {
-    background-color: var(--item1, #ebedef) !important;
-  }
-  :global(.ons-themed-select .multi-item:nth-of-type(6)) {
-    background-color: var(--item2, #ebedef) !important;
-  }
-  :global(.ons-themed-select .multi-item:nth-of-type(7)) {
-    background-color: var(--item3, #ebedef) !important;
-  }
-  :global(.ons-themed-select .multi-item:nth-of-type(8)) {
-    background-color: var(--item4, #ebedef) !important;
-  }
-  .ons-field {
-    overflow: visible;
-  }
-  span.item-group {
-    font-size: smaller;
-    opacity: 0.7;
-  }</style>
+	.ons-autocomplete-wrapper {
+		position: relative;
+	}
+	.ons-autocomplete-clear {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		align-content: center;
+		z-index: 1;
+		right: 3px;
+		top: calc(50% - 14px);
+		height: 28px;
+		width: 28px;
+		border: none;
+		background: var(--ons-color-input-bg, white);
+	}
+	.ons-autocomplete-clear:focus {
+		outline: 3px solid var(--ons-color-focus, #fbc900) !important;
+	}
+	.hide-menu :global(.autocomplete__menu) {
+		display: none;
+	}
+	.ons-autocomplete :global(.autocomplete__input) {
+		border-radius: 3px !important;
+		border-width: 1px !important;
+		background: var(--ons-color-input-bg, white);
+	}
+	.ons-autocomplete :global(.autocomplete__input--focused) {
+		box-shadow: inset 0 0 0 1px black !important;
+		outline-color: var(--ons-color-focus, #fbc900) !important;
+	}
+	.ons-autocomplete :global(.autocomplete__dropdown-arrow-down) {
+		width: 18px !important;
+		transform: translateY(-2px);
+	}
+	.ons-autocomplete :global(.muted-text) {
+		opacity: 0.8;
+		font-size: smaller;
+	}
+	.ons-autocomplete-wrapper :global(*) {
+		font-size: 18px;
+	}
+	.ons-autocomplete-wrapper :global(.autocomplete__hint),
+	.ons-autocomplete-wrapper :global(.autocomplete__input) {
+		height: 40px;
+	}
+	.ons-autocomplete-wrapper :global(.autocomplete__option) {
+		margin: 0;
+	}
+	.ons-autocomplete-wrapper :global(.autocomplete__menu) {
+		transform: translateY(5px);
+		border: 1px solid currentColor;
+		border-radius: 3px;
+	}
+	.ons-autocomplete-wrapper :global(.autocomplete__option--focused),
+	.ons-autocomplete-wrapper :global(.autocomplete__option:hover) {
+		background-color: var(--ons-color-branded-secondary, #003c57);
+	}
+	.ons-autocomplete-wrapper :global(.autocomplete__option:focus) {
+		outline: none !important;
+	}
+	.ons-autocomplete-wrapper :global(input) {
+		padding: 0 35px 0 8px;
+	}
+</style>

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

@@ -0,0 +1,58 @@
+/** @typedef {typeof __propDef.props}  SelectProps */
+/** @typedef {typeof __propDef.events}  SelectEvents */
+/** @typedef {typeof __propDef.slots}  SelectSlots */
+export default class Select extends SvelteComponentTyped<{
+    id?: string | undefined;
+    label?: string | undefined;
+    mode?: "default" | "search" | undefined;
+    value?: object | undefined;
+    hideLabel?: boolean | undefined;
+    placeholder?: string | undefined;
+    options?: array;
+    clearable?: boolean | undefined;
+    autoClear?: boolean | undefined;
+    labelKey?: string | undefined;
+    groupKey?: string | undefined;
+    minLength?: number | undefined;
+    loadOptions?: Function | undefined;
+    scriptUrl?: string | undefined;
+    clearInput?: (() => Promise<void>) | 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;
+export type SelectSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        mode?: "default" | "search" | undefined;
+        value?: object | undefined;
+        hideLabel?: boolean | undefined;
+        placeholder?: string | undefined;
+        options?: array;
+        clearable?: boolean | undefined;
+        autoClear?: boolean | undefined;
+        labelKey?: string | undefined;
+        groupKey?: string | undefined;
+        minLength?: number | undefined;
+        loadOptions?: Function | undefined;
+        scriptUrl?: string | undefined;
+        clearInput?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        clear: CustomEvent<any>;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/inputs/Select/docs/component.md

@@ -0,0 +1,27 @@
+An extended alternative to an HTML `<select>` component (see Dropdown), with auto-complete and the ability to have a custom **loadOptions** function.
+
+This component is a Svelte wrapper for the GOV.UK [accessible-autocomplete](https://github.com/alphagov/accessible-autocomplete).
+
+(Note: This component is not fully compatible with a previous version of the same component based on svelte-select.)
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { AccessibleSelect } from "@onsvisual/svelte-components";
+
+  const values = [
+    { id: "1", label: "one" },
+    { id: "2", label: "two" },
+    { id: "3", label: "three" },
+  ];
+  
+
+  // Bind the <select> value to a variable (reactive)
+  let value;
+
+  // Define your own function on change
+  const handleChange = (e) => console.log(e);
+</script>
+
+<AccessibleSelect {options} bind:value on:change="{handleChange}" />
+```