From 19a23409daf78ec0331dbb129fd4db231163eff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20Erbsh=C3=A4u=C3=9Fer?= <tobias@tesoft.dev>
Date: Sun, 24 May 2026 09:31:07 +0200
Subject: [PATCH] add input component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
---
 frontend/src/components/input.njk | 59 +++++++++++++++++++++++++++++++
 frontend/src/components/input.ts  | 34 ++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 frontend/src/components/input.njk
 create mode 100644 frontend/src/components/input.ts

diff --git a/frontend/src/components/input.njk b/frontend/src/components/input.njk
new file mode 100644
index 0000000..feaebda
--- /dev/null
+++ b/frontend/src/components/input.njk
@@ -0,0 +1,59 @@
+<template id="tesoft-input-template">
+    <style>
+        @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        :host > div {
+            background-color: var(--gray);
+            border-color: var(--dark-gray);
+            border-radius: 0.4rem;
+            border-style: solid;
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            grid-template-rows: auto;
+        }
+
+        :host([focused]) > div {
+            outline-color: var(--gold);
+            outline-style: solid;
+        }
+
+        input {
+            background-color: transparent;
+            border-style: none;
+            color: var(--light-gray);
+            grid-column: 2;
+            padding: var(--medium-padding);
+        }
+
+        input:focus {
+            outline: none;
+        }
+
+        slot {
+            align-content: center;
+            display: grid;
+            justify-content: center;
+            padding: var(--small-padding);
+        }
+
+        ::slotted(svg) {
+            fill: var(--dark-gray);
+        }
+
+        :host([focused]) ::slotted(svg) {
+            fill: var(--gold);
+        }
+    </style>
+
+    <div>
+        <slot name="left"></slot>
+        <input>
+        <slot name="right"></slot>
+    </div>
+</template>
+
+<script src="/src/components/input.ts" type="module"></script>
diff --git a/frontend/src/components/input.ts b/frontend/src/components/input.ts
new file mode 100644
index 0000000..44e078e
--- /dev/null
+++ b/frontend/src/components/input.ts
@@ -0,0 +1,34 @@
+import {TesoftComponent} from "../scripts/main.ts";
+
+export class TesoftInput extends TesoftComponent {
+    private readonly input: HTMLInputElement;
+
+    constructor() {
+        super();
+
+        const template = document.getElementById("tesoft-input-template") as HTMLTemplateElement;
+        const templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({mode: "open"});
+        shadowRoot.appendChild(templateContent.cloneNode(true));
+
+        this.input = shadowRoot.querySelector<HTMLInputElement>("input")!;
+
+        this.input.addEventListener("focusin", () => {
+            this.setAttribute("focused", "");
+        });
+        this.input.addEventListener("focusout", () => {
+            this.removeAttribute("focused");
+        });
+    }
+
+    focus() {
+        this.input.focus();
+    }
+
+    set value(value: string) {
+        this.input.value = value;
+    }
+}
+
+customElements.define("tesoft-input", TesoftInput);