@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/forms/toggle/Toggle.svelte

@@ -1,70 +1,70 @@
-<script lang="ts">
-	import clsx from 'clsx';
-	import Label from '../label/Label.svelte';
-	import { untrack } from 'svelte';
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import { toggle } from './index.js';
-
-	let {
-		children,
-		size = 'default',
-		value,
-		checked = $bindable(),
-		disabled,
-		color = 'primary',
-		class: className,
-		classes,
-		inputClass,
-		spanClass,
-		offLabel,
-		...restProps
-	}: ToggleProps = $props();
-
-	warnThemeDeprecation(
-		'Toggle',
-		untrack(() => ({ inputClass, spanClass })),
-		{ inputClass: 'input', spanClass: 'span' }
-	);
-
-	const styling = $derived(classes ?? { input: inputClass, span: spanClass });
-
-	const theme = $derived(getTheme('toggle'));
-
-	const { input, label, span } = $derived(
-		toggle({ color, checked, size, disabled, off_state_label: !!offLabel })
-	);
-</script>
-
-<Label class={label({ class: clsx(theme?.label, className) })}>
-	{#if offLabel}
-		{@render offLabel()}
-	{/if}
-	<input
-		type="checkbox"
-		bind:checked
-		{value}
-		{...restProps}
-		{disabled}
-		class={input({ class: clsx(theme?.input, styling.input) })}
-	/>
-	<span class={span({ class: clsx(theme?.span, styling.span) })}></span>
-	{#if children}
-		{@render children()}
-	{/if}
-</Label>
-
-<!--
-## Props
-@prop children
-@prop size = "default"
-@prop value
-@prop checked = $bindable()
-@prop disabled
-@prop color = "primary"
-@prop class: className
-@prop classes
-@prop inputClass
-@prop spanClass
-@prop offLabel
-@prop ...restProps
--->
+<script lang="ts">
+	import clsx from 'clsx';
+	import Label from '../label/Label.svelte';
+	import { untrack } from 'svelte';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import { toggle } from './index.js';
+
+	let {
+		children,
+		size = 'default',
+		value,
+		checked = $bindable(),
+		disabled,
+		color = 'primary',
+		class: className,
+		classes,
+		inputClass,
+		spanClass,
+		offLabel,
+		...restProps
+	}: ToggleProps = $props();
+
+	warnThemeDeprecation(
+		'Toggle',
+		untrack(() => ({ inputClass, spanClass })),
+		{ inputClass: 'input', spanClass: 'span' }
+	);
+
+	const styling = $derived(classes ?? { input: inputClass, span: spanClass });
+
+	const theme = $derived(getTheme('toggle'));
+
+	const { input, label, span } = $derived(
+		toggle({ color, checked, size, disabled, off_state_label: !!offLabel })
+	);
+</script>
+
+<Label class={label({ class: clsx(theme?.label, className) })}>
+	{#if offLabel}
+		{@render offLabel()}
+	{/if}
+	<input
+		type="checkbox"
+		bind:checked
+		{value}
+		{...restProps}
+		{disabled}
+		class={input({ class: clsx(theme?.input, styling.input) })}
+	/>
+	<span class={span({ class: clsx(theme?.span, styling.span) })}></span>
+	{#if children}
+		{@render children()}
+	{/if}
+</Label>
+
+<!--
+## Props
+@prop children
+@prop size = "default"
+@prop value
+@prop checked = $bindable()
+@prop disabled
+@prop color = "primary"
+@prop class: className
+@prop classes
+@prop inputClass
+@prop spanClass
+@prop offLabel
+@prop ...restProps
+-->

package/dist/layout/Chat/CategorySelector.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-	import { findTicketCategoryParents, IconifyIcon } from '../../index.js';
-	import { slide } from 'svelte/transition';
-	import type { CategorySelectorProps, ICaseCategory } from './types.js';
-
-	let { items = [], options = [], onClick }: CategorySelectorProps = $props();
-
-	let openSubmenu = $state(-1);
-
-	function toggleSubmenu(index: any) {
-		openSubmenu = openSubmenu === index ? -1 : index;
-	}
-	function handleItemClick(option: ICaseCategory) {
-		if (!option.items) {
-			const data = findTicketCategoryParents(option, options);
-			onClick?.({ selected: option, list: data });
-		}
-	}
-</script>
-
-<ul transition:slide class="divide-y">
-	{#each items as item, index (item.name)}
-		<li class="w-full text-sm">
-			<button
-				type="button"
-				class="w-full px-2 py-1 text-left hover:bg-gray-100"
-				onclick={() => {
-					if (item.items) {
-						toggleSubmenu(index);
-					} else {
-						handleItemClick(item);
-					}
-				}}
-			>
-				<div class="flex items-center justify-between">
-					{item.name}
-					{#if item.items}
-						<IconifyIcon
-							icon={openSubmenu === index ? 'ri:arrow-up-s-fill' : 'ri:arrow-down-s-fill'}
-							class="text-lg text-gray-500"
-						/>
-					{/if}
-				</div>
-			</button>
-			{#if item.items && openSubmenu === index}
-				<div class="pl-4">
-					<svelte:self items={item.items} onclick {options} />
-				</div>
-			{/if}
-		</li>
-	{/each}
-</ul>
+<script lang="ts">
+	import { findTicketCategoryParents, IconifyIcon } from '../../index.js';
+	import { slide } from 'svelte/transition';
+	import type { CategorySelectorProps, ICaseCategory } from './types.js';
+
+	let { items = [], options = [], onClick }: CategorySelectorProps = $props();
+
+	let openSubmenu = $state(-1);
+
+	function toggleSubmenu(index: any) {
+		openSubmenu = openSubmenu === index ? -1 : index;
+	}
+	function handleItemClick(option: ICaseCategory) {
+		if (!option.items) {
+			const data = findTicketCategoryParents(option, options);
+			onClick?.({ selected: option, list: data });
+		}
+	}
+</script>
+
+<ul transition:slide class="divide-y">
+	{#each items as item, index (item.name)}
+		<li class="w-full text-sm">
+			<button
+				type="button"
+				class="w-full px-2 py-1 text-left hover:bg-gray-100"
+				onclick={() => {
+					if (item.items) {
+						toggleSubmenu(index);
+					} else {
+						handleItemClick(item);
+					}
+				}}
+			>
+				<div class="flex items-center justify-between">
+					{item.name}
+					{#if item.items}
+						<IconifyIcon
+							icon={openSubmenu === index ? 'ri:arrow-up-s-fill' : 'ri:arrow-down-s-fill'}
+							class="text-lg text-gray-500"
+						/>
+					{/if}
+				</div>
+			</button>
+			{#if item.items && openSubmenu === index}
+				<div class="pl-4">
+					<svelte:self items={item.items} onclick {options} />
+				</div>
+			{/if}
+		</li>
+	{/each}
+</ul>