@onsvisual/svelte-components 1.0.20 → 1.0.22

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  CheckboxesEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxesSlots */
 export default class Checkboxes extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    label?: string | undefined;
-    title?: string | undefined;
+    cls?: string | null | undefined;
+    label?: string | null | undefined;
+    title?: string | null | undefined;
     compact?: boolean | undefined;
     hideTitle?: boolean | undefined;
     items?: object[] | null | undefined;
@@ -23,9 +23,9 @@ export type CheckboxesSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        label?: string | undefined;
-        title?: string | undefined;
+        cls?: string | null | undefined;
+        label?: string | null | undefined;
+        title?: string | null | undefined;
         compact?: boolean | undefined;
         hideTitle?: boolean | undefined;
         items?: object[] | null | undefined;

package/dist/inputs/Dropdown/Dropdown.svelte

@@ -5,14 +5,14 @@
 
 	/**
 	 * Unique id for the <select> element
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let id = "";
+	export let id = null;
 	/**
 	 * A label to describe the <select> element (expected for accessibility)
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let label = "";
+	export let label = null;
 	/**
 	 * Visually hide the label
 	 * @type {boolean}
@@ -35,9 +35,9 @@
 	export let options = [];
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <div class="ons-field {cls}">

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  DropdownEvents */
 /** @typedef {typeof __propDef.slots}  DropdownSlots */
 export default class Dropdown extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    id?: string | undefined;
-    label?: string | undefined;
+    cls?: string | null | undefined;
+    id?: string | null | undefined;
+    label?: string | null | undefined;
     value?: object | null | undefined;
     hideLabel?: boolean | undefined;
     placeholder?: string | undefined;
@@ -21,9 +21,9 @@ export type DropdownSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        id?: string | undefined;
-        label?: string | undefined;
+        cls?: string | null | undefined;
+        id?: string | null | undefined;
+        label?: string | null | undefined;
         value?: object | null | undefined;
         hideLabel?: boolean | undefined;
         placeholder?: string | undefined;

package/dist/inputs/ErrorPanel/ErrorPanel.svelte

@@ -1,14 +1,14 @@
 <script>
 	/**
 	 * Set an error message
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let message = "";
+	export let message = null;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <div class="ons-panel ons-panel--error ons-panel--no-title {cls}" id="number-of-employees-error">

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  ErrorPanelEvents */
 /** @typedef {typeof __propDef.slots}  ErrorPanelSlots */
 export default class ErrorPanel extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    message?: string | undefined;
+    cls?: string | null | undefined;
+    message?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,8 +16,8 @@ export type ErrorPanelSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        message?: string | undefined;
+        cls?: string | null | undefined;
+        message?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/inputs/ErrorSummary/ErrorSummary.svelte

@@ -3,9 +3,9 @@
 
 	/**
 	 * Defines the title of the error
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Define an array of errors/issues in the format {label, href?}
 	 * @type {object[]}
@@ -13,9 +13,9 @@
 	export let items = [];
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error {cls}">

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  ErrorSummaryEvents */
 /** @typedef {typeof __propDef.slots}  ErrorSummarySlots */
 export default class ErrorSummary extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    title?: string | undefined;
+    cls?: string | null | undefined;
+    title?: string | null | undefined;
     items?: object[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type ErrorSummarySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        title?: string | undefined;
+        cls?: string | null | undefined;
+        title?: string | null | undefined;
         items?: object[] | undefined;
     };
     events: {

package/dist/inputs/Input/Input.svelte

@@ -5,14 +5,14 @@
 
 	/**
 	 * ID for <input> element
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let id = "";
+	export let id = null;
 	/**
 	 * A prop to bind to for the entered value
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let value = "";
+	export let value = null;
 	/**
 	 * A label to describe the <input> element (expected for accessibility)
 	 * @type {string}
@@ -25,9 +25,9 @@
 	export let hideLabel = false;
 	/**
 	 * An optional description to help users know what to enter
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let description = "";
+	export let description = null;
 	/**
 	 * The maximum number of characters that can be entered (optional)
 	 * @type {number}
@@ -40,14 +40,14 @@
 	export let width = null;
 	/**
 	 * An optional prefix (eg. £) to appear on the left of the input
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let prefix = "";
+	export let prefix = null;
 	/**
 	 * An optional suffix (eg. %) to appear on the right of the input
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let suffix = "";
+	export let suffix = null;
 	/**
 	 * An optional hidden description of the prefix (for accessibility)
 	 * @type {string}
@@ -55,9 +55,9 @@
 	export let unitLabel = prefix || suffix || "";
 	/**
 	 * An optional regex pattern foto limit the input (not currently used)
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let pattern = "";
+	export let pattern = null;
 	/**
 	 * Set to `true` if the value should be a number
 	 * @type {boolean}
@@ -75,9 +75,9 @@
 	export let error = false;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <div class="ons-field {cls}">

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

@@ -2,20 +2,20 @@
 /** @typedef {typeof __propDef.events}  InputEvents */
 /** @typedef {typeof __propDef.slots}  InputSlots */
 export default class Input extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    id?: string | undefined;
+    cls?: string | null | undefined;
+    id?: string | null | undefined;
     width?: number | undefined;
     label?: string | undefined;
-    pattern?: string | undefined;
+    pattern?: string | null | undefined;
     error?: boolean | undefined;
     numeric?: boolean | undefined;
-    value?: string | undefined;
-    description?: string | undefined;
+    value?: string | null | undefined;
+    description?: string | null | undefined;
     disabled?: boolean | undefined;
     hideLabel?: boolean | undefined;
     charLimit?: number | undefined;
-    prefix?: string | undefined;
-    suffix?: string | undefined;
+    prefix?: string | null | undefined;
+    suffix?: string | null | undefined;
     unitLabel?: string | undefined;
 }, {
     change: CustomEvent<any>;
@@ -29,20 +29,20 @@ export type InputSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        id?: string | undefined;
+        cls?: string | null | undefined;
+        id?: string | null | undefined;
         width?: number | undefined;
         label?: string | undefined;
-        pattern?: string | undefined;
+        pattern?: string | null | undefined;
         error?: boolean | undefined;
         numeric?: boolean | undefined;
-        value?: string | undefined;
-        description?: string | undefined;
+        value?: string | null | undefined;
+        description?: string | null | undefined;
         disabled?: boolean | undefined;
         hideLabel?: boolean | undefined;
         charLimit?: number | undefined;
-        prefix?: string | undefined;
-        suffix?: string | undefined;
+        prefix?: string | null | undefined;
+        suffix?: string | null | undefined;
         unitLabel?: string | undefined;
     };
     events: {

package/dist/inputs/Radios/Radio.svelte

@@ -5,19 +5,19 @@
 
 	/**
 	 * Unique ID input
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let id = "";
+	export let id = null;
 	/**
 	 * Label for input
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let label = "";
+	export let label = null;
 	/**
 	 * Optional: Extended description for element
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let description = "";
+	export let description = null;
 	/**
 	 * Optional: Define the item as an object in the form {id, label, description?}
 	 * @type {object}

package/dist/inputs/Radios/Radio.svelte.d.ts

@@ -3,11 +3,11 @@
 /** @typedef {typeof __propDef.slots}  RadioSlots */
 export default class Radio extends SvelteComponentTyped<{
     groupId: string;
-    id?: string | undefined;
-    label?: string | undefined;
+    id?: string | null | undefined;
+    label?: string | null | undefined;
     compact?: boolean | undefined;
     value?: object | null | undefined;
-    description?: string | undefined;
+    description?: string | null | undefined;
     item?: object | undefined;
 }, {
     change: CustomEvent<any>;
@@ -22,11 +22,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         groupId: string;
-        id?: string | undefined;
-        label?: string | undefined;
+        id?: string | null | undefined;
+        label?: string | null | undefined;
         compact?: boolean | undefined;
         value?: object | null | undefined;
-        description?: string | undefined;
+        description?: string | null | undefined;
         item?: object | undefined;
     };
     events: {

package/dist/inputs/Radios/Radios.svelte

@@ -3,9 +3,9 @@
 
 	/**
 	 * Title/legend for parent <fieldset>
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Visually hide the title/legend
 	 * @type {boolean}
@@ -18,9 +18,9 @@
 	export let id = "name";
 	/**
 	 * Descriptive "how to" label for inputs
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let label = "";
+	export let label = null;
 	/**
 	 * Binding for ID of selected option
 	 * @type {object|null}
@@ -37,9 +37,9 @@
 	export let compact = false;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <fieldset class="ons-fieldset {cls}">

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

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  RadiosEvents */
 /** @typedef {typeof __propDef.slots}  RadiosSlots */
 export default class Radios extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     id?: string | undefined;
-    label?: string | undefined;
-    title?: string | undefined;
+    label?: string | null | undefined;
+    title?: string | null | undefined;
     compact?: boolean | undefined;
     hideTitle?: boolean | undefined;
     items?: object[] | undefined;
@@ -24,10 +24,10 @@ export type RadiosSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         id?: string | undefined;
-        label?: string | undefined;
-        title?: string | undefined;
+        label?: string | null | undefined;
+        title?: string | null | undefined;
         compact?: boolean | undefined;
         hideTitle?: boolean | undefined;
         items?: object[] | undefined;

package/dist/inputs/Select/Select.stories.svelte

@@ -26,8 +26,10 @@
 	</div>
 {/snippet}
 
+<Story name="Default" args={{ id: "default", label: "Select an option", options }} {template} />
+
 <Story
-	name="Default"
+	name="Pre-selected value"
 	args={{ id: "default", value: options[0], label: "Select an option", options }}
 	{template}
 />

package/dist/inputs/Select/Select.svelte

@@ -65,9 +65,9 @@
 	export let labelKey = "label";
 	/**
 	 * The attribute of an option that defines its group (optional)
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let groupKey = "";
+	export let groupKey = null;
 	/**
 	 * Optional: Minimum query length to return results
 	 * @type {number}
@@ -100,19 +100,23 @@
 	 * @type {function}
 	 */
 	export async function clearInput() {
+		await setInputValue(null);
+		dispatch("clear", null);
+	}
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	async function setInputValue(textValue) {
 		hideMenu = true;
-		inputElement.value = "";
+		inputElement.value = textValue || "";
 		await sleep(110);
 		inputElement.focus({ preventScroll: true });
 		inputElement.blur();
 		hideMenu = false;
-		dispatch("clear", value);
 	}
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
-	 */
-	export let cls = "";
 
 	function inputValueTemplate(result) {
 		return result && result[labelKey];
@@ -138,11 +142,13 @@
 	}
 
 	async function select(option) {
-		value = option;
-		dispatch("change", value);
-		if (value && autoClear) {
-			await sleep(0);
-			clearInput();
+		if (option && value !== option) {
+			value = option;
+			dispatch("change", value);
+			if (value && autoClear) {
+				await sleep(0);
+				clearInput();
+			}
 		}
 	}
 
@@ -163,7 +169,6 @@
 			id,
 			name: `${id}-input`,
 			source: loadOptions,
-			defaultValue: value?.[labelKey] || "",
 			autoselect: true,
 			onConfirm: select,
 			confirmOnBlur: false,
@@ -177,10 +182,21 @@
 				suggestion: suggestionTemplate
 			}
 		});
-		inputElement = document.getElementById(id);
+		inputElement = element.querySelector(`#${id}`);
+		setInputValue(value?.[labelKey] || "");
 		inputElement.addEventListener("blur", inputChange);
 	}
 
+	// In case input value is updated from outside component
+	function bindInputValue(value) {
+		if (inputElement) {
+			const textValue = value?.[labelKey];
+			if (textValue && inputElement.value !== textValue) setInputValue(textValue);
+			else if (!value && inputElement.value) setInputValue("");
+		}
+	}
+	$: bindInputValue(value);
+
 	onMount(handleScriptLoad);
 </script>
 

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 export default class Select extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     id?: string | undefined;
     label?: string | undefined;
     mode?: "default" | "search" | undefined;
@@ -13,7 +13,7 @@ export default class Select extends SvelteComponentTyped<{
     clearable?: boolean | undefined;
     autoClear?: boolean | undefined;
     labelKey?: string | undefined;
-    groupKey?: string | undefined;
+    groupKey?: string | null | undefined;
     minLength?: number | undefined;
     loadOptions?: Function | undefined;
     scriptUrl?: string | undefined;
@@ -32,7 +32,7 @@ export type SelectSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         id?: string | undefined;
         label?: string | undefined;
         mode?: "default" | "search" | undefined;
@@ -43,7 +43,7 @@ declare const __propDef: {
         clearable?: boolean | undefined;
         autoClear?: boolean | undefined;
         labelKey?: string | undefined;
-        groupKey?: string | undefined;
+        groupKey?: string | null | undefined;
         minLength?: number | undefined;
         loadOptions?: Function | undefined;
         scriptUrl?: string | undefined;

package/dist/inputs/Textarea/Textarea.svelte

@@ -5,14 +5,14 @@
 
 	/**
 	 * ID for <textarea> element
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let id = "";
+	export let id = null;
 	/**
 	 * A prop to bind to for the entered value
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let value = "";
+	export let value = null;
 	/**
 	 * A label to describe the <textarea> element (expected for accessibility)
 	 * @type {string}
@@ -25,9 +25,9 @@
 	export let hideLabel = false;
 	/**
 	 * An optional description to help users know what to enter
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let description = "";
+	export let description = null;
 	/**
 	 * The maximum number of characters that can be entered (optional)
 	 * @type {number|null}
@@ -45,9 +45,9 @@
 	export let width = 30;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	$: remaining = charLimit && value.length ? charLimit - value.length : charLimit || null;
 </script>

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

@@ -2,12 +2,12 @@
 /** @typedef {typeof __propDef.events}  TextareaEvents */
 /** @typedef {typeof __propDef.slots}  TextareaSlots */
 export default class Textarea extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    id?: string | undefined;
+    cls?: string | null | undefined;
+    id?: string | null | undefined;
     width?: number | undefined;
     label?: string | undefined;
-    value?: string | undefined;
-    description?: string | undefined;
+    value?: string | null | undefined;
+    description?: string | null | undefined;
     hideLabel?: boolean | undefined;
     charLimit?: number | null | undefined;
     rows?: number | undefined;
@@ -21,12 +21,12 @@ export type TextareaSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        id?: string | undefined;
+        cls?: string | null | undefined;
+        id?: string | null | undefined;
         width?: number | undefined;
         label?: string | undefined;
-        value?: string | undefined;
-        description?: string | undefined;
+        value?: string | null | undefined;
+        description?: string | null | undefined;
         hideLabel?: boolean | undefined;
         charLimit?: number | null | undefined;
         rows?: number | undefined;

package/dist/layout/Accordion/Accordion.svelte

@@ -11,9 +11,9 @@
 	export let id = slugify();
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 	/**
 	 * Option to include a "show all" toggle above the accordion
 	 * @type {boolean}

package/dist/layout/Accordion/Accordion.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  AccordionEvents */
 /** @typedef {typeof __propDef.slots}  AccordionSlots */
 export default class Accordion extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     id?: string | undefined;
     showToggle?: boolean | undefined;
 }, {
@@ -17,7 +17,7 @@ export type AccordionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         id?: string | undefined;
         showToggle?: boolean | undefined;
     };