fix(Statistic): forward all events including child components, except…

… Trend

src/lib/components/statistic/Comparison.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass = 'mt-1 text-sm flex flex-row justify-between items-center tracking-tight';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<dd class={finalClass} style={$$props.style}>
+<dd
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot name="value" />
 	<slot name="trend" />
 </dd>

src/lib/components/statistic/ComparisonValue.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass = 'text-light-secondary-content dark:text-dark-secondary-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </div>

src/lib/components/statistic/Goal.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 	import Progress from '../progress';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	export let progress: number;
 
 	const defaultClass = 'mt-2';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<dd class={finalClass} style={$$props.style}>
+<dd
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<Progress value={progress} />
 </dd>

src/lib/components/statistic/Icon.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import type { MaterialIcon } from '../../types';
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	export let icon: MaterialIcon;
 
@@ -9,5 +14,10 @@
 </script>
 
 <dd class="absolute -top-3 -right-2">
-	<span class={finalClass} style={$$props.style}>{icon}</span>
+	<span
+		class={finalClass}
+		use:useActions={use}
+		use:forwardEvents
+		{...exclude($$props, ['use', 'class'])}>{icon}</span
+	>
 </dd>

src/lib/components/statistic/Statistic.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass =
 		'overflow-hidden rounded-md px-4 py-5 shadow-md dark:shadow-black sm:p-5 bg-light-surface dark:bg-dark-surface';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	{#if $$slots.title || $$slots.icon}
 		<div class="relative flex flex-row items-center justify-between">
 			<slot name="title" />

src/lib/components/statistic/Title.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass =
 		'truncate text-sm font-medium text-light-secondary-content dark:text-dark-secondary-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<dt class={finalClass} style={$$props.style}>
+<dt
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </dt>

src/lib/components/statistic/Value.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass =
 		'mt-1 text-3xl font-semibold tracking-tight text-light-content dark:text-dark-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<dd class={finalClass} style={$$props.style}>
+<dd
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </dd>