From a2fe2780cfc256d787c347ed0e70eafa6c476d3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20T=C3=B8n=20L=C3=B8vhaug?=
 <henrik.lovhaug@gmail.com>
Date: Sun, 9 Mar 2025 18:03:25 +0100
Subject: [PATCH] Change to tel type

---
 frontend/src/components/TrackerSetting.svelte |  2 +-
 frontend/src/components/ui/input/input.svelte | 69 ++++++++++---------
 2 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/TrackerSetting.svelte b/frontend/src/components/TrackerSetting.svelte
index e9817e3..f67e0e7 100644
--- a/frontend/src/components/TrackerSetting.svelte
+++ b/frontend/src/components/TrackerSetting.svelte
@@ -13,6 +13,6 @@
 
 <div>
   <h2>{text}</h2>
-  <Input placeholder={"1"} type="tel" bind:value />
+  <Input placeholder={"1"} bind:value required />
   <Button onclick={() => action(value)}>Submit</Button>
 </div>
diff --git a/frontend/src/components/ui/input/input.svelte b/frontend/src/components/ui/input/input.svelte
index cab1457..4795ccf 100644
--- a/frontend/src/components/ui/input/input.svelte
+++ b/frontend/src/components/ui/input/input.svelte
@@ -1,42 +1,43 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import type { InputEvents } from "./index.js";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { InputEvents } from "./index.js";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
+  type $$Props = HTMLInputAttributes;
+  type $$Events = InputEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export let value: $$Props["value"] = undefined;
+  export { className as class };
 
-	// Workaround for https://github.com/sveltejs/svelte/issues/9305
-	// Fixed in Svelte 5, but not backported to 4.x.
-	export let readonly: $$Props["readonly"] = undefined;
+  // Workaround for https://github.com/sveltejs/svelte/issues/9305
+  // Fixed in Svelte 5, but not backported to 4.x.
+  export let readonly: $$Props["readonly"] = undefined;
 </script>
 
 <input
-	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	{readonly}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:mousemove
-	on:paste
-	on:input
-	on:wheel|passive
-	{...$$restProps}
+  class={cn(
+    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    className,
+  )}
+  bind:value
+  {readonly}
+  type="tel"
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:paste
+  on:input
+  on:wheel|passive
+  {...$$restProps}
 />