@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/stat-card/StatCard.svelte

@@ -1,146 +1,146 @@
 <script lang="ts">
-	import IconButton from '../icon-button/IconButton.svelte';
-	import { Icon } from '../icons';
-	import Spinner from '../spinner/Spinner.svelte';
-	import Tooltip from '../tooltip/Tooltip.svelte';
-	import { Input } from '../input';
-	import { tick } from 'svelte';
+  import IconButton from '../icon-button/IconButton.svelte';
+  import { Icon } from '../icons';
+  import Spinner from '../spinner/Spinner.svelte';
+  import Tooltip from '../tooltip/Tooltip.svelte';
+  import { Input } from '../input';
+  import { tick } from 'svelte';
 
-	interface Props {
-		title: string;
-		value?: string | number | null;
-		unit?: string | null;
-		titleTooltip?: string;
-		showTitleTooltip?: boolean;
-		editable?: boolean;
-		onsubmit?: (value: string | number) => void;
-		inputType?: 'text' | 'number';
-	}
+  interface Props {
+    title: string;
+    value?: string | number | null;
+    unit?: string | null;
+    titleTooltip?: string;
+    showTitleTooltip?: boolean;
+    editable?: boolean;
+    onsubmit?: (value: string | number) => void;
+    inputType?: 'text' | 'number';
+  }
 
-	let {
-		title,
-		value = null,
-		unit = '',
-		titleTooltip = '',
-		showTitleTooltip = false,
-		editable = false,
-		inputType = 'text',
-		onsubmit
-	}: Props = $props();
-	const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
-	let isEditing = $state(false);
-	let inputValue = $state('');
-	let inputComponent = $state<Input | null>(null);
+  let {
+    title,
+    value = null,
+    unit = '',
+    titleTooltip = '',
+    showTitleTooltip = false,
+    editable = false,
+    inputType = 'text',
+    onsubmit,
+  }: Props = $props();
+  const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
+  let isEditing = $state(false);
+  let inputValue = $state('');
+  let inputComponent = $state<Input | null>(null);
 
-	function startEditing(event?: MouseEvent) {
-		if (event) {
-			event.stopPropagation();
-		}
-		isEditing = true;
-		inputValue = value !== null ? value.toString() : '';
-	}
+  function startEditing(event?: MouseEvent) {
+    if (event) {
+      event.stopPropagation();
+    }
+    isEditing = true;
+    inputValue = value !== null ? value.toString() : '';
+  }
 
-	function handleCardClick() {
-		if (editable && !isEditing && value !== null) {
-			startEditing();
-		}
-	}
+  function handleCardClick() {
+    if (editable && !isEditing && value !== null) {
+      startEditing();
+    }
+  }
 
-	function handleInputBlur(event: Event) {
-		const target = event.target as HTMLInputElement;
-		inputValue = target.value;
-		submitValue();
-	}
+  function handleInputBlur(event: Event) {
+    const target = event.target as HTMLInputElement;
+    inputValue = target.value;
+    submitValue();
+  }
 
-	function handleInputKeydown(event: KeyboardEvent) {
-		const target = event.target as HTMLInputElement;
-		inputValue = target.value;
-		if (event.key === 'Escape') {
-			isEditing = false;
-		}
-		if (event.key === 'Enter') {
-			submitValue();
-		}
-	}
+  function handleInputKeydown(event: KeyboardEvent) {
+    const target = event.target as HTMLInputElement;
+    inputValue = target.value;
+    if (event.key === 'Escape') {
+      isEditing = false;
+    }
+    if (event.key === 'Enter') {
+      submitValue();
+    }
+  }
 
-	function submitValue() {
-		if (inputValue.trim() === '') {
-			isEditing = false;
-			return;
-		}
+  function submitValue() {
+    if (inputValue.trim() === '') {
+      isEditing = false;
+      return;
+    }
 
-		// Try to parse as number if possible
-		const numValue = parseFloat(inputValue);
-		const newValue = isNaN(numValue) ? inputValue : numValue;
+    // Try to parse as number if possible
+    const numValue = parseFloat(inputValue);
+    const newValue = isNaN(numValue) ? inputValue : numValue;
 
-		if (onsubmit) {
-			onsubmit(newValue);
-		}
+    if (onsubmit) {
+      onsubmit(newValue);
+    }
 
-		isEditing = false;
-	}
+    isEditing = false;
+  }
 
-	$effect(() => {
-		if (isEditing && inputComponent) {
-			tick().then(() => {
-				inputComponent?.focus();
-			});
-		}
-	});
+  $effect(() => {
+    if (isEditing && inputComponent) {
+      tick().then(() => {
+        inputComponent?.focus();
+      });
+    }
+  });
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	data-testid="stat-card-body"
-	class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg bg-neutral p-4 text-left transition-colors"
-	class:hover:bg-neutral-hover={editable && !isEditing && value !== null}
-	class:cursor-pointer={editable && !isEditing && value !== null}
-	onclick={editable && !isEditing && value !== null ? handleCardClick : undefined}
-	onkeydown={editable && !isEditing && value !== null ? handleInputKeydown : undefined}
-	aria-label={editable && !isEditing && value !== null ? `Edit ${title}` : undefined}
+  data-testid="stat-card-body"
+  class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg bg-neutral p-4 text-left transition-colors"
+  class:hover:bg-neutral-hover={editable && !isEditing && value !== null}
+  class:cursor-pointer={editable && !isEditing && value !== null}
+  onclick={editable && !isEditing && value !== null ? handleCardClick : undefined}
+  onkeydown={editable && !isEditing && value !== null ? handleInputKeydown : undefined}
+  aria-label={editable && !isEditing && value !== null ? `Edit ${title}` : undefined}
 >
-	<p class="flex items-center justify-start gap-2 truncate font-medium text-secondary">
-		{title}
-		{#if titleTooltip && showTitleTooltip}
-			<Tooltip>
-				{#snippet trigger()}
-					<Icon iconName="Info" color="icon-tertiary" />
-				{/snippet}
-				{#snippet content()}
-					<span>
-						{titleTooltip}
-					</span>
-				{/snippet}
-			</Tooltip>
-		{/if}
-	</p>
-	<div class="flex h-8 w-full items-center gap-1">
-		{#if value !== null}
-			{#if isEditing}
-				<div class="flex-1">
-					<Input
-						bind:this={inputComponent}
-						type={inputType}
-						value={inputValue}
-						onblur={handleInputBlur}
-						onkeydown={handleInputKeydown}
-					/>
-				</div>
-			{:else}
-				<div class="flex flex-1 flex-nowrap items-baseline gap-1">
-					<p class="text-2xl font-medium">{formattedValue}</p>
-					{#if unit}
-						<p class="flex-1 truncate text-2xl font-medium text-tertiary">{unit}</p>
-					{/if}
-				</div>
-				{#if editable}
-					<IconButton onclick={(e) => startEditing(e)}>
-						<Icon iconName="PencilSimple" />
-					</IconButton>
-				{/if}
-			{/if}
-		{:else}
-			<Spinner />
-		{/if}
-	</div>
+  <p class="flex items-center justify-start gap-2 truncate font-medium text-secondary">
+    {title}
+    {#if titleTooltip && showTitleTooltip}
+      <Tooltip>
+        {#snippet trigger()}
+          <Icon iconName="Info" color="icon-tertiary" />
+        {/snippet}
+        {#snippet content()}
+          <span>
+            {titleTooltip}
+          </span>
+        {/snippet}
+      </Tooltip>
+    {/if}
+  </p>
+  <div class="flex h-8 w-full items-center gap-1">
+    {#if value !== null}
+      {#if isEditing}
+        <div class="flex-1">
+          <Input
+            bind:this={inputComponent}
+            type={inputType}
+            value={inputValue}
+            onblur={handleInputBlur}
+            onkeydown={handleInputKeydown}
+          />
+        </div>
+      {:else}
+        <div class="flex flex-1 flex-nowrap items-baseline gap-1">
+          <p class="text-2xl font-medium">{formattedValue}</p>
+          {#if unit}
+            <p class="flex-1 truncate text-2xl font-medium text-tertiary">{unit}</p>
+          {/if}
+        </div>
+        {#if editable}
+          <IconButton onclick={(e) => startEditing(e)}>
+            <Icon iconName="PencilSimple" />
+          </IconButton>
+        {/if}
+      {/if}
+    {:else}
+      <Spinner />
+    {/if}
+  </div>
 </div>