@websline/system-components 1.3.27 → 1.3.28

package/dist/components/molecules/comboBox/ComboBox.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from "svelte";
+	import { utils } from "../../../index.js";
 	import Dropdown from "./Dropdown.svelte";
 	import Value from "./Value.svelte";
 	import { comboBoxVariants } from "./comboBox.variants.js";
@@ -98,6 +99,8 @@
 		value = valueLabel;
 	});
 
+	const bindInputRef = (v) => (inputRef = v);
+
 	const openDropdown = () => {
 		open = true;
 		isEditing = true;
@@ -189,7 +192,7 @@
 			}
 		: {}}>
 	<Value
-		bind:inputRef
+		{@attach utils.attachNode(bindInputRef)}
 		{localValues}
 		{name}
 		onKeydown={handleKey}

package/dist/components/molecules/comboBox/Value.svelte

@@ -2,7 +2,6 @@
 	import { comboBoxVariants } from "./comboBox.variants.js";
 
 	let {
-		inputRef = $bindable(),
 		localValues,
 		name,
 		onKeydown,
@@ -26,7 +25,6 @@
 
 <div class={styles.value({ disabled: localValues.disabled })}>
 	<input
-		bind:this={inputRef}
 		bind:value
 		autocomplete="off"
 		class={styles.searchInput()}

package/dist/components/molecules/comboBox/Value.svelte.d.ts

@@ -4,16 +4,14 @@ type Value = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const Value: import("svelte").Component<{
-    inputRef?: any;
     localValues: any;
     name: any;
     onKeydown: any;
     onOpenDropdown: any;
     placeholder: any;
     value?: any;
-} & Record<string, any>, {}, "value" | "inputRef">;
+} & Record<string, any>, {}, "value">;
 type $$ComponentProps = {
-    inputRef?: any;
     localValues: any;
     name: any;
     onKeydown: any;

package/dist/components/molecules/selectorCard/SelectorCard.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { settled } from "svelte";
 	import { selectorCardVariants } from "./selectorCard.variants.js";
 	import { Switch, Radio, Label, utils } from "../../../index.js";
 
@@ -35,6 +36,8 @@
 		...rest
 	} = $props();
 
+	let inputRef = $state();
+
 	let inputProps = $derived({
 		disabled,
 		id,
@@ -44,7 +47,6 @@
 		// prevent input click from colliding with card clicks
 		onclick: (e) => e.stopPropagation(),
 	});
-	let styles = $derived(selectorCardVariants({ disabled, error, type }));
 
 	let localHelperText = $derived.by(() => {
 		if (error && errorText) {
@@ -54,9 +56,15 @@
 		return helperText;
 	});
 
-	let handleClick = () => {
+	let styles = $derived(selectorCardVariants({ disabled, error, type }));
+
+	const bindInputRef = (v) => (inputRef = v);
+
+	const handleClick = async () => {
 		if (type === "radio" && checked) return;
 		checked = !checked;
+		await settled();
+		inputRef?.dispatchEvent(new Event("change", { bubbles: true }));
 	};
 </script>
 
@@ -66,7 +74,11 @@
 	inert={disabled}
 	{...rest}>
 	{#if type === "radio"}
-		<Radio bind:checked class={styles.input()} {...inputProps} />
+		<Radio
+			{@attach utils.attachNode(bindInputRef)}
+			bind:checked
+			class={styles.input()}
+			{...inputProps} />
 	{/if}
 	<div class={styles.content()}>
 		{#if label}
@@ -77,6 +89,10 @@
 		{/if}
 	</div>
 	{#if type === "switch"}
-		<Switch bind:checked class={styles.input()} {...inputProps} />
+		<Switch
+			{@attach utils.attachNode(bindInputRef)}
+			bind:checked
+			class={styles.input()}
+			{...inputProps} />
 	{/if}
 </div>

package/dist/components/molecules/tagSelector/TagSelector.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from "svelte";
+	import { utils } from "../../../index.js";
 	import Dropdown from "./Dropdown.svelte";
 	import ValueList from "./ValueList.svelte";
 	import { tagSelectorVariants } from "./tagSelector.variants.js";
@@ -68,6 +69,8 @@
 		if (autofocus && inputRef) inputRef.focus();
 	});
 
+	const bindInputRef = (v) => (inputRef = v);
+
 	const openDropdown = () => {
 		open = true;
 		highlighted = -1;
@@ -219,7 +222,7 @@
 		{/each}
 	{/if}
 	<ValueList
-		bind:inputRef
+		{@attach utils.attachNode(bindInputRef)}
 		{localValues}
 		onKeydown={handleKey}
 		onOpenDropdown={openDropdown}

package/dist/components/molecules/tagSelector/ValueList.svelte

@@ -3,7 +3,6 @@
 	import { tagSelectorVariants } from "./tagSelector.variants.js";
 
 	let {
-		inputRef = $bindable(),
 		localValues,
 		onKeydown,
 		onOpenDropdown,
@@ -30,7 +29,6 @@
 	{#if !localValues.disabled}
 		<Tag class={styles.searchField()} icon="add" variant="outline">
 			<input
-				bind:this={inputRef}
 				bind:value={query}
 				autocomplete="off"
 				class={styles.searchInput()}

package/dist/components/molecules/tagSelector/ValueList.svelte.d.ts

@@ -4,7 +4,6 @@ type ValueList = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const ValueList: import("svelte").Component<{
-    inputRef?: any;
     localValues: any;
     onKeydown: any;
     onOpenDropdown: any;
@@ -14,9 +13,8 @@ declare const ValueList: import("svelte").Component<{
     placeholder: any;
     query?: any;
     value?: any[];
-} & Record<string, any>, {}, "inputRef" | "query">;
+} & Record<string, any>, {}, "query">;
 type $$ComponentProps = {
-    inputRef?: any;
     localValues: any;
     onKeydown: any;
     onOpenDropdown: any;

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./a11y.js";
 export * from "./colors.js";
+export * from "./lifecycle.js";
 export * from "./notification.js";
 export * from "./theme.svelte.js";

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 export * from "./a11y.js";
 export * from "./colors.js";
+export * from "./lifecycle.js";
 export * from "./notification.js";
 export * from "./theme.svelte.js";

package/dist/utils/lifecycle.d.ts

@@ -0,0 +1 @@
+export function attachNode(setter: any): (node: any) => () => any;

package/dist/utils/lifecycle.js

@@ -0,0 +1,8 @@
+const attachNode = (setter) => {
+	return (node) => {
+		setter?.(node);
+		return () => setter?.(null);
+	};
+};
+
+export { attachNode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.3.27",
+  "version": "1.3.28",
   "publishConfig": {
     "access": "public"
   },