sveltacular 0.0.49 → 0.0.50

package/dist/forms/info-box/info-box.svelte

@@ -5,24 +5,24 @@ import FormLabel from "../form-label.svelte";
 export let size = "md";
 export let value;
 export let href = void 0;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel><slot /></FormLabel>
-	{/if}
-	<div class="input">
-		{#if href}
-			<span class="icon">
-				<LinkIcon />
-			</span>
-			<a {href} class="text">{value}</a>
-		{:else}
-			<span class="text">{value}</span>
-		{/if}
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel><slot /></FormLabel>
+	{/if}
+	<div class="input">
+		{#if href}
+			<span class="icon">
+				<LinkIcon />
+			</span>
+			<a {href} class="text">{value}</a>
+		{:else}
+			<span class="text">{value}</span>
+		{/if}
+	</div>
+</FormField>
+
 <style>.input {
   background-color: var(--form-input-disabled-bg, #ccc);
   color: var(--form-input-fg, #000);
@@ -53,4 +53,4 @@ export let href = void 0;
 }
 .input a:hover {
   text-decoration: underline;
-}</style>
+}</style>

package/dist/forms/list-box/list-box.svelte

@@ -6,7 +6,7 @@ import Menu from "../../generic/menu/menu.svelte";
 import AngleUpIcon from "../../icons/angle-up-icon.svelte";
 import debounce from "../../helpers/debounce.js";
 import { browser } from "$app/environment";
-export let value = "";
+export let value = null;
 export let items = [];
 export let size = "full";
 export let disabled = false;
@@ -102,49 +102,49 @@ const updateText = async () => {
 triggerSearch();
 $:
   open = isMenuOpen && !disabled;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required} {disabled}><slot /></FormLabel>
-	{/if}
-	<div class="{open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
-		<input
-			type="text"
-			{id}
-			bind:value={text}
-			{required}
-			{disabled}
-			{placeholder}
-			readonly={!isSeachable}
-			on:focus={() => (isMenuOpen = true)}
-			on:keyup={onInputKeyPress}
-			data-value={value}
-			data-text={text}
-		/>
-		<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow} {disabled}>
-			<AngleUpIcon />
-		</button>
-		{#if text && isSeachable}
-			<button type="button" class="clear" on:click={clear} on:keydown={clear} {disabled}>
-				X
-			</button>
-		{/if}
-		<div class="dropdown">
-			<Menu
-				items={filteredItems}
-				{open}
-				closeAfterSelect={false}
-				searchText={text}
-				on:select={onSelect}
-				size="full"
-				bind:highlightIndex
-				bind:value
-			/>
-		</div>
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required} {disabled}><slot /></FormLabel>
+	{/if}
+	<div class="{open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
+		<input
+			type="text"
+			{id}
+			bind:value={text}
+			{required}
+			{disabled}
+			{placeholder}
+			readonly={!isSeachable}
+			on:focus={() => (isMenuOpen = true)}
+			on:keyup={onInputKeyPress}
+			data-value={value}
+			data-text={text}
+		/>
+		<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow} {disabled}>
+			<AngleUpIcon />
+		</button>
+		{#if text && isSeachable}
+			<button type="button" class="clear" on:click={clear} on:keydown={clear} {disabled}>
+				X
+			</button>
+		{/if}
+		<div class="dropdown">
+			<Menu
+				items={filteredItems}
+				{open}
+				closeAfterSelect={false}
+				searchText={text}
+				on:select={onSelect}
+				size="full"
+				bind:highlightIndex
+				bind:value
+			/>
+		</div>
+	</div>
+</FormField>
+
 <style>div {
   position: relative;
 }
@@ -197,4 +197,4 @@ div .dropdown {
   left: 0;
   width: 100%;
   z-index: 3;
-}</style>
+}</style>

package/dist/forms/list-box/list-box.svelte.d.ts

@@ -3,7 +3,7 @@ import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
 import type { SearchFunction } from './list-box.js';
 declare const __propDef: {
     props: {
-        value?: string | undefined;
+        value?: string | null | undefined;
         items?: DropdownOption[] | undefined;
         size?: FormFieldSizeOptions | undefined;
         disabled?: boolean | undefined;
@@ -13,7 +13,7 @@ declare const __propDef: {
         placeholder?: string | undefined;
     };
     events: {
-        change: CustomEvent<string>;
+        change: CustomEvent<string | null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/forms/money-box/money-box.svelte

@@ -9,8 +9,8 @@ export let min = 0;
 export let max = 1e6;
 $:
   decimals = allowCents ? 2 : 0;
-</script>
-
-<NumberBox bind:value prefix={symbol} {decimals} {placeholder} {size} {min} {max} {step}
-	><slot /></NumberBox
->
+</script>
+
+<NumberBox bind:value prefix={symbol} {decimals} {placeholder} {size} {min} {max} {step}
+	><slot /></NumberBox
+>

package/dist/forms/number-box/number-box.svelte

@@ -16,34 +16,34 @@ export let step = 1;
 const valueChanged = () => {
   value = roundToDecimals(value, decimals);
 };
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id}><slot /></FormLabel>
-	{/if}
-	<div class="input {type}">
-		{#if prefix}
-			<span class="prefix">{prefix}</span>
-		{/if}
-
-		<input
-			{id}
-			{placeholder}
-			bind:value
-			type="number"
-			{step}
-			{min}
-			{max}
-			on:change={valueChanged}
-		/>
-
-		{#if suffix}
-			<span class="suffix">{suffix}</span>
-		{/if}
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id}><slot /></FormLabel>
+	{/if}
+	<div class="input {type}">
+		{#if prefix}
+			<span class="prefix">{prefix}</span>
+		{/if}
+
+		<input
+			{id}
+			{placeholder}
+			bind:value
+			type="number"
+			{step}
+			{min}
+			{max}
+			on:change={valueChanged}
+		/>
+
+		{#if suffix}
+			<span class="suffix">{suffix}</span>
+		{/if}
+	</div>
+</FormField>
+
 <style>.input {
   display: flex;
   align-items: center;
@@ -88,4 +88,4 @@ const valueChanged = () => {
 }
 .input .suffix {
   border-left: 1px solid var(--form-input-border, black);
-}</style>
+}</style>

package/dist/forms/phone-box/phone-box.svelte

@@ -89,55 +89,55 @@ const keyDown = (event) => {
 setValue(value);
 $:
   areaCode || localExt || lastFour ? publishChange() : null;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel id="{id}-areaCode"><slot /></FormLabel>
-	{/if}
-	<div class="input">
-		<span class="areaCode segment">
-			<span>(</span>
-			<input
-				id="{id}-areaCode"
-				type="text"
-				on:input={valueChanged}
-				on:change={valueChanged}
-				on:keypress={keyDown}
-				bind:value={areaCode}
-				name="areaCode"
-				data-maxlength="3"
-			/>
-			<span>)</span>
-		</span>
-		<span class="localExt segment">
-			<input
-				id="{id}-localExt"
-				type="text"
-				on:input={valueChanged}
-				on:change={valueChanged}
-				on:keypress={keyDown}
-				bind:value={localExt}
-				name="localExt"
-				data-maxlength="3"
-			/>
-		</span>
-		<span class="lastFour segment">
-			<span>-</span>
-			<input
-				id="{id}-lastFour"
-				type="text"
-				on:input={valueChanged}
-				on:change={valueChanged}
-				on:keypress={keyDown}
-				bind:value={lastFour}
-				name="lastFour"
-				data-maxlength="4"
-			/></span
-		>
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel id="{id}-areaCode"><slot /></FormLabel>
+	{/if}
+	<div class="input">
+		<span class="areaCode segment">
+			<span>(</span>
+			<input
+				id="{id}-areaCode"
+				type="text"
+				on:input={valueChanged}
+				on:change={valueChanged}
+				on:keypress={keyDown}
+				bind:value={areaCode}
+				name="areaCode"
+				data-maxlength="3"
+			/>
+			<span>)</span>
+		</span>
+		<span class="localExt segment">
+			<input
+				id="{id}-localExt"
+				type="text"
+				on:input={valueChanged}
+				on:change={valueChanged}
+				on:keypress={keyDown}
+				bind:value={localExt}
+				name="localExt"
+				data-maxlength="3"
+			/>
+		</span>
+		<span class="lastFour segment">
+			<span>-</span>
+			<input
+				id="{id}-lastFour"
+				type="text"
+				on:input={valueChanged}
+				on:change={valueChanged}
+				on:keypress={keyDown}
+				bind:value={lastFour}
+				name="lastFour"
+				data-maxlength="4"
+			/></span
+		>
+	</div>
+</FormField>
+
 <style>.input {
   background-color: var(--form-input-bg, #fff);
   color: var(--form-input-fg, #000);
@@ -179,4 +179,4 @@ $:
 }
 .input input:focus {
   outline: none;
-}</style>
+}</style>

package/dist/forms/radio-group/radio-box.svelte

@@ -4,20 +4,20 @@ export let value = void 0;
 export let group = void 0;
 export let disabled = false;
 const id = uniqueId();
-</script>
-
-<label>
-	<input type="radio" bind:group {value} {disabled} {id} />
-	<span class="checkbox">
-		<span class="checkmark"><CheckIcon /></span>
-	</span>
-	{#if $$slots.default}
-		<div class="text">
-			<slot />
-		</div>
-	{/if}
-</label>
-
+</script>
+
+<label>
+	<input type="radio" bind:group {value} {disabled} {id} />
+	<span class="checkbox">
+		<span class="checkmark"><CheckIcon /></span>
+	</span>
+	{#if $$slots.default}
+		<div class="text">
+			<slot />
+		</div>
+	{/if}
+</label>
+
 <style>label {
   display: flex;
   align-items: center;
@@ -64,4 +64,4 @@ label input:checked + .checkbox {
 label input:checked + .checkbox .checkmark {
   width: 100%;
   height: 100%;
-}</style>
+}</style>

package/dist/forms/radio-group/radio-group.svelte

@@ -8,15 +8,15 @@ export let items = [];
 export let size = "full";
 export let disabled = false;
 export let required = false;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<div>
-		{#each items as item}
-			<RadioBox bind:group={value} {disabled} value={item.value}>{item.name}</RadioBox>
-		{/each}
-	</div>
-</FormField>
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<div>
+		{#each items as item}
+			<RadioBox bind:group={value} {disabled} value={item.value}>{item.name}</RadioBox>
+		{/each}
+	</div>
+</FormField>

package/dist/forms/switch-box/switch-box.svelte

@@ -4,21 +4,21 @@ export let checked = false;
 export let size = "full";
 const id = uniqueId();
 const dispatch = createEventDispatcher();
-</script>
-
-<label class="switch-box {checked ? 'checked' : ''} {size}">
-	<input type="checkbox" bind:checked on:change={() => dispatch('change', checked)} {id} />
-	<!-- svelte-ignore a11y-interactive-supports-focus -->
-	<span class="switch">
-		<span class="slider" />
-	</span>
-	{#if $$slots.default}
-		<div class="text">
-			<slot />
-		</div>
-	{/if}
-</label>
-
+</script>
+
+<label class="switch-box {checked ? 'checked' : ''} {size}">
+	<input type="checkbox" bind:checked on:change={() => dispatch('change', checked)} {id} />
+	<!-- svelte-ignore a11y-interactive-supports-focus -->
+	<span class="switch">
+		<span class="slider" />
+	</span>
+	{#if $$slots.default}
+		<div class="text">
+			<slot />
+		</div>
+	{/if}
+</label>
+
 <style>label {
   display: flex;
   align-items: center;
@@ -140,4 +140,4 @@ label.full.checked .slider {
 label.full .text {
   font-size: 1rem;
   margin-left: 0.65rem;
-}</style>
+}</style>

package/dist/forms/text-area/text-area.svelte

@@ -9,15 +9,15 @@ export let rows = 4;
 export let disabled = false;
 export let required = false;
 export let readonly = false;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<textarea wrap="soft" {id} {placeholder} {rows} bind:value {required} {disabled} {readonly} />
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<textarea wrap="soft" {id} {placeholder} {rows} bind:value {required} {disabled} {readonly} />
+</FormField>
+
 <style>textarea {
   width: 100%;
   height: auto;
@@ -36,4 +36,4 @@ export let readonly = false;
 }
 textarea::placeholder {
   color: var(--form-input-placeholder, #a0aec0);
-}</style>
+}</style>

package/dist/forms/text-box/text-box.svelte

@@ -49,39 +49,39 @@ const onInput = (e) => {
   }
   dipatch("input", value);
 };
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<div class="input {disabled ? 'disabled' : 'enabled'}">
-		{#if prefix}
-			<div class="prefix">{prefix}</div>
-		{/if}
-		<input
-			{id}
-			{placeholder}
-			bind:value
-			{...{ type }}
-			{disabled}
-			{readonly}
-			{required}
-			{maxlength}
-			{minlength}
-			{pattern}
-			on:keypress={onKeyPress}
-			on:input={onInput}
-		/>
-		{#if suffix}
-			<div class="suffix">{suffix}</div>
-		{/if}
-	</div>
-	{#if helperText}
-		<div class="helper-text">{helperText}</div>
-	{/if}
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<div class="input {disabled ? 'disabled' : 'enabled'}">
+		{#if prefix}
+			<div class="prefix">{prefix}</div>
+		{/if}
+		<input
+			{id}
+			{placeholder}
+			bind:value
+			{...{ type }}
+			{disabled}
+			{readonly}
+			{required}
+			{maxlength}
+			{minlength}
+			{pattern}
+			on:keypress={onKeyPress}
+			on:input={onInput}
+		/>
+		{#if suffix}
+			<div class="suffix">{suffix}</div>
+		{/if}
+	</div>
+	{#if helperText}
+		<div class="helper-text">{helperText}</div>
+	{/if}
+</FormField>
+
 <style>.input {
   display: flex;
   align-items: center;
@@ -135,4 +135,4 @@ const onInput = (e) => {
   font-size: 0.75rem;
   line-height: 1.25rem;
   padding: 0.25rem;
-}</style>
+}</style>

package/dist/forms/url-box/url-box.svelte

@@ -10,17 +10,17 @@ const onInput = () => {
     value = urlParts[1];
   }
 };
-</script>
-
-<TextBox
-	bind:value
-	type="text"
-	{placeholder}
-	prefix={protocol + '://'}
-	{size}
-	on:input={onInput}
-	on:change={onInput}
-	allowSpaces={false}
->
-	<slot />
-</TextBox>
+</script>
+
+<TextBox
+	bind:value
+	type="text"
+	{placeholder}
+	prefix={protocol + '://'}
+	{size}
+	on:input={onInput}
+	on:change={onInput}
+	allowSpaces={false}
+>
+	<slot />
+</TextBox>

package/dist/generic/address/address.svelte

@@ -11,21 +11,21 @@ $:
   flatAddress = nobr(
     `${streetAddress}, ${city}, ${region} ${postalCode}, ${country}`.replace(/,\s+/g, ", ")
   );
-</script>
-
-<address>
-	<a href="https://maps.google.com/?q={flatAddress}" target="_blank" rel="noopener">
-		{#each streetAddressArray as line}
-			<div>{line}</div>
-		{/each}
-		<div>
-			{city}, {region}
-			{country}
-			{postalCode}
-		</div>
-	</a>
-</address>
-
+</script>
+
+<address>
+	<a href="https://maps.google.com/?q={flatAddress}" target="_blank" rel="noopener">
+		{#each streetAddressArray as line}
+			<div>{line}</div>
+		{/each}
+		<div>
+			{city}, {region}
+			{country}
+			{postalCode}
+		</div>
+	</a>
+</address>
+
 <style>address {
   display: block;
   margin-bottom: 1rem;
@@ -37,4 +37,4 @@ address a {
 }
 address a:hover {
   text-decoration: underline;
-}</style>
+}</style>