@onsvisual/svelte-components 1.0.40 → 1.0.42

package/dist/inputs/Input/Input.svelte

@@ -1,151 +1,151 @@
-<script>
-	import { createEventDispatcher } from "svelte";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * ID for &lt;input&gt; element
-	 * @type {string|null}
-	 */
-	export let id = null;
-	/**
-	 * Name attribute for &lt;input&gt; element
-	 * @type {string|null}
-	 */
-	export let name = id;
-	/**
-	 * A prop to bind to for the entered value
-	 * @type {string|null}
-	 */
-	export let value = null;
-	/**
-	 * A label to describe the &lt;input&gt; element (expected for accessibility)
-	 * @type {string|null}
-	 */
-	export let label = null;
-	/**
-	 * Visually hide the label
-	 * @type {boolean}
-	 */
-	export let hideLabel = false;
-	/**
-	 * An optional description to help users know what to enter
-	 * @type {string|null}
-	 */
-	export let description = null;
-	/**
-	 * The maximum number of characters that can be entered (optional)
-	 * @type {number}
-	 */
-	export let charLimit = null;
-	/**
-	 * The width of the &lt;input&gt; in characters
-	 * @type {number}
-	 */
-	export let width = null;
-	/**
-	 * An optional prefix (eg. £) to appear on the left of the input
-	 * @type {string|null}
-	 */
-	export let prefix = null;
-	/**
-	 * An optional suffix (eg. %) to appear on the right of the input
-	 * @type {string|null}
-	 */
-	export let suffix = null;
-	/**
-	 * An optional hidden description of the prefix (for accessibility)
-	 * @type {string}
-	 */
-	export let unitLabel = prefix || suffix || "";
-	/**
-	 * An optional regex pattern foto limit the input (not currently used)
-	 * @type {string|null}
-	 */
-	export let pattern = null;
-	/**
-	 * Set to `true` if the value should be a number
-	 * @type {boolean}
-	 */
-	export let numeric = false;
-	/**
-	 * Set to `true` to give the input a disabled state
-	 * @type {boolean}
-	 */
-	export let disabled = false;
-	/**
-	 * Set to `true` to highlight border in red
-	 * @type {boolean}
-	 */
-	export let error = false;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<div class="ons-field {cls}">
-	{#if label}
-		<label
-			class="ons-label"
-			class:ons-label--with-description={description}
-			class:ons-u-vh={hideLabel}
-			aria-describedby={description ? `${id}-description-hint` : null}
-			for={id}
-		>
-			{label}
-		</label>
-	{/if}
-	{#if description}
-		<span id="{id}-description-hint" class="ons-label__description ons-input--with-description">
-			{description}
-		</span>
-	{/if}
-	{#if prefix || suffix}
-		<span class="ons-input-type" class:ons-input-type--prefix={prefix}>
-			<span class="ons-input-type__inner">
-				<input
-					type="text"
-					{id}
-					{name}
-					bind:value
-					maxlength={charLimit}
-					pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
-					inputmode={numeric ? "numeric" : null}
-					class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
-						? `ons-input--w-${width}`
-						: ''}"
-					class:ons-input--error={error}
-					aria-labelledby="{id} {id}-unit"
-					aria-describedby={description ? `${id}-description-hint` : null}
-					{disabled}
-					on:change={(e) => dispatch("change", e)}
-				/>
-				<abbr
-					id="{id}-unit"
-					class="ons-input-type__type ons-js-input-abbr"
-					aria-label={unitLabel}
-					role="figure"
-					title={unitLabel}>{prefix || suffix}</abbr
-				>
-			</span>
-		</span>
-	{:else}
-		<input
-			type="text"
-			{id}
-			{name}
-			bind:value
-			pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
-			inputmode={numeric ? "numeric" : null}
-			class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
-				? `ons-input--w-${width}`
-				: ''}"
-			class:ons-input--error={error}
-			aria-describedby={description ? `${id}-description-hint` : null}
-			{disabled}
-			on:change={(e) => dispatch("change", e)}
-		/>
-	{/if}
-</div>
+<script>
+	import { createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * ID for &lt;input&gt; element
+	 * @type {string|null}
+	 */
+	export let id = null;
+	/**
+	 * Name attribute for &lt;input&gt; element
+	 * @type {string|null}
+	 */
+	export let name = id;
+	/**
+	 * A prop to bind to for the entered value
+	 * @type {string|null}
+	 */
+	export let value = null;
+	/**
+	 * A label to describe the &lt;input&gt; element (expected for accessibility)
+	 * @type {string|null}
+	 */
+	export let label = null;
+	/**
+	 * Visually hide the label
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * An optional description to help users know what to enter
+	 * @type {string|null}
+	 */
+	export let description = null;
+	/**
+	 * The maximum number of characters that can be entered (optional)
+	 * @type {number}
+	 */
+	export let charLimit = null;
+	/**
+	 * The width of the &lt;input&gt; in characters
+	 * @type {number}
+	 */
+	export let width = null;
+	/**
+	 * An optional prefix (eg. £) to appear on the left of the input
+	 * @type {string|null}
+	 */
+	export let prefix = null;
+	/**
+	 * An optional suffix (eg. %) to appear on the right of the input
+	 * @type {string|null}
+	 */
+	export let suffix = null;
+	/**
+	 * An optional hidden description of the prefix (for accessibility)
+	 * @type {string}
+	 */
+	export let unitLabel = prefix || suffix || "";
+	/**
+	 * An optional regex pattern foto limit the input (not currently used)
+	 * @type {string|null}
+	 */
+	export let pattern = null;
+	/**
+	 * Set to `true` if the value should be a number
+	 * @type {boolean}
+	 */
+	export let numeric = false;
+	/**
+	 * Set to `true` to give the input a disabled state
+	 * @type {boolean}
+	 */
+	export let disabled = false;
+	/**
+	 * Set to `true` to highlight border in red
+	 * @type {boolean}
+	 */
+	export let error = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<div class="ons-field {cls}">
+	{#if label}
+		<label
+			class="ons-label"
+			class:ons-label--with-description={description}
+			class:ons-u-vh={hideLabel}
+			aria-describedby={description ? `${id}-description-hint` : null}
+			for={id}
+		>
+			{label}
+		</label>
+	{/if}
+	{#if description}
+		<span id="{id}-description-hint" class="ons-label__description ons-input--with-description">
+			{description}
+		</span>
+	{/if}
+	{#if prefix || suffix}
+		<span class="ons-input-type" class:ons-input-type--prefix={prefix}>
+			<span class="ons-input-type__inner">
+				<input
+					type="text"
+					{id}
+					{name}
+					bind:value
+					maxlength={charLimit}
+					pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
+					inputmode={numeric ? "numeric" : null}
+					class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
+						? `ons-input--w-${width}`
+						: ''}"
+					class:ons-input--error={error}
+					aria-labelledby="{id} {id}-unit"
+					aria-describedby={description ? `${id}-description-hint` : null}
+					{disabled}
+					on:change={(e) => dispatch("change", e)}
+				/>
+				<abbr
+					id="{id}-unit"
+					class="ons-input-type__type ons-js-input-abbr"
+					aria-label={unitLabel}
+					role="figure"
+					title={unitLabel}>{prefix || suffix}</abbr
+				>
+			</span>
+		</span>
+	{:else}
+		<input
+			type="text"
+			{id}
+			{name}
+			bind:value
+			pattern={pattern ? pattern : numeric ? "[0-9]*" : null}
+			inputmode={numeric ? "numeric" : null}
+			class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
+				? `ons-input--w-${width}`
+				: ''}"
+			class:ons-input--error={error}
+			aria-describedby={description ? `${id}-description-hint` : null}
+			{disabled}
+			on:change={(e) => dispatch("change", e)}
+		/>
+	{/if}
+</div>

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

@@ -1,16 +1,16 @@
-A standard `<input>` element with Svelte bindings and events.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Input } from "@onsvisual/svelte-components";
-
-  // Bind the <input> value to a variable (reactive)
-  let value;
-
-  // Define your own function on change
-  const handleChange = (e) => console.log(e);
-</script>
-
-<Input bind:value on:change="{handleChange}" />
-```
+A standard `<input>` element with Svelte bindings and events.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Input } from "@onsvisual/svelte-components";
+
+  // Bind the <input> value to a variable (reactive)
+  let value;
+
+  // Define your own function on change
+  const handleChange = (e) => console.log(e);
+</script>
+
+<Input bind:value on:change="{handleChange}" />
+```

package/dist/inputs/Radios/Radio.svelte

@@ -1,90 +1,90 @@
-<script>
-	import { onMount, createEventDispatcher } from "svelte";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * Unique ID input
-	 * @type {string|null}
-	 */
-	export let id = null;
-	/**
-	 * Label for input
-	 * @type {string|null}
-	 */
-	export let label = null;
-	/**
-	 * Optional: Extended description for element
-	 * @type {string|null}
-	 */
-	export let description = null;
-	/**
-	 * Optional: Define the item as an object in the form {id, label, description?}
-	 * @type {object}
-	 */
-	export let item = { id, label, description };
-	/**
-	 * ID/name for radio group (required)
-	 * @type {string}
-	 */
-	export let groupId;
-	/**
-	 * Binding selected option
-	 * @type {object|null}
-	 */
-	export let value = null;
-	/**
-	 * Compact mode (no border)
-	 * @type {boolean}
-	 */
-	export let compact = false;
-
-	let el;
-
-	onMount(() => {
-		if (value?.id === item.id) el.checked = true;
-	});
-</script>
-
-<span class="ons-radios__item" class:ons-radios__item--no-border={compact}>
-	<span class="ons-radio" class:ons-radio--no-border={compact}>
-		<input
-			type="radio"
-			id={item.id}
-			value={item}
-			name={groupId}
-			class="ons-radio__input ons-js-radio"
-			on:change={(e) => {
-				if (e?.target?.checked) {
-					value = item;
-					dispatch("change", { value, e });
-				}
-			}}
-			bind:this={el}
-		/>
-		<label
-			class="ons-radio__label"
-			class:ons-label--with-description={description}
-			for={item.id}
-			id="{item.id}-label"
-			aria-describedby={item.description ? `${item.id}-label-description-hint` : null}
-		>
-			{item.label}
-			{#if item.description}
-				<span class="ons-label__aria-hidden-description" aria-hidden="true"
-					><span class="ons-label__description ons-radio__label--with-description">
-						{item.description}
-					</span></span
-				>
-			{/if}
-		</label>
-		{#if item.description}
-			<span
-				class="ons-label__visually-hidden-description ons-u-vh"
-				id="{id}-label-description-hint"
-			>
-				{item.description}
-			</span>
-		{/if}
-	</span>
-</span>
+<script>
+	import { onMount, createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * Unique ID input
+	 * @type {string|null}
+	 */
+	export let id = null;
+	/**
+	 * Label for input
+	 * @type {string|null}
+	 */
+	export let label = null;
+	/**
+	 * Optional: Extended description for element
+	 * @type {string|null}
+	 */
+	export let description = null;
+	/**
+	 * Optional: Define the item as an object in the form {id, label, description?}
+	 * @type {object}
+	 */
+	export let item = { id, label, description };
+	/**
+	 * ID/name for radio group (required)
+	 * @type {string}
+	 */
+	export let groupId;
+	/**
+	 * Binding selected option
+	 * @type {object|null}
+	 */
+	export let value = null;
+	/**
+	 * Compact mode (no border)
+	 * @type {boolean}
+	 */
+	export let compact = false;
+
+	let el;
+
+	onMount(() => {
+		if (value?.id === item.id) el.checked = true;
+	});
+</script>
+
+<span class="ons-radios__item" class:ons-radios__item--no-border={compact}>
+	<span class="ons-radio" class:ons-radio--no-border={compact}>
+		<input
+			type="radio"
+			id={item.id}
+			value={item}
+			name={groupId}
+			class="ons-radio__input ons-js-radio"
+			on:change={(e) => {
+				if (e?.target?.checked) {
+					value = item;
+					dispatch("change", { value, e });
+				}
+			}}
+			bind:this={el}
+		/>
+		<label
+			class="ons-radio__label"
+			class:ons-label--with-description={description}
+			for={item.id}
+			id="{item.id}-label"
+			aria-describedby={item.description ? `${item.id}-label-description-hint` : null}
+		>
+			{item.label}
+			{#if item.description}
+				<span class="ons-label__aria-hidden-description" aria-hidden="true"
+					><span class="ons-label__description ons-radio__label--with-description">
+						{item.description}
+					</span></span
+				>
+			{/if}
+		</label>
+		{#if item.description}
+			<span
+				class="ons-label__visually-hidden-description ons-u-vh"
+				id="{id}-label-description-hint"
+			>
+				{item.description}
+			</span>
+		{/if}
+	</span>
+</span>

package/dist/inputs/Radios/Radios.stories.svelte

@@ -1,51 +1,51 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
-	import Radio from "./Radio.svelte";
-	import Radios from "./Radios.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import exampleDocs from "./docs/example.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Inputs/Radios",
-		component: Radios,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-
-	let items = [
-		{
-			id: "house",
-			label: "House or bungalow",
-			description: "Includes terraced, semi-detached and detached homes."
-		},
-		{ id: "flat", label: "Flat, maisonette or apartment" },
-		{ id: "mobile", label: "Caravan or other mobile or temporary structure" }
-	];
-</script>
-
-{#snippet template(args)}
-	<div style:padding="12px">
-		<Radios {...args} />
-	</div>
-{/snippet}
-
-<Story name="Default" args={{ label: "Select one", id: "radios", items }} {template} />
-
-<Story name="Compact without label" args={{ id: "radios", items, compact: true }} {template} />
-
-<Story name="Individually defined radios" asChild parameters={withStoryDocs(exampleDocs)}>
-	<div style:padding="12px">
-		<Radios label="Select one">
-			<Radio
-				groupId="radios"
-				id="house"
-				label="House or bungalow"
-				description="Includes terraced, semi-detached and detached homes."
-			/>
-			<Radio groupId="radios" id="flat" label="Flat, maisonette or apartment" />
-			<Radio groupId="radios" id="mobile" label="Caravan or other mobile or temporary structure" />
-		</Radios>
-	</div>
-</Story>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import Radio from "./Radio.svelte";
+	import Radios from "./Radios.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Radios",
+		component: Radios,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	let items = [
+		{
+			id: "house",
+			label: "House or bungalow",
+			description: "Includes terraced, semi-detached and detached homes."
+		},
+		{ id: "flat", label: "Flat, maisonette or apartment" },
+		{ id: "mobile", label: "Caravan or other mobile or temporary structure" }
+	];
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Radios {...args} />
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ label: "Select one", id: "radios", items }} {template} />
+
+<Story name="Compact without label" args={{ id: "radios", items, compact: true }} {template} />
+
+<Story name="Individually defined radios" asChild parameters={withStoryDocs(exampleDocs)}>
+	<div style:padding="12px">
+		<Radios label="Select one">
+			<Radio
+				groupId="radios"
+				id="house"
+				label="House or bungalow"
+				description="Includes terraced, semi-detached and detached homes."
+			/>
+			<Radio groupId="radios" id="flat" label="Flat, maisonette or apartment" />
+			<Radio groupId="radios" id="mobile" label="Caravan or other mobile or temporary structure" />
+		</Radios>
+	</div>
+</Story>