add styling to button

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>

frontend/src/components/button.njk

@@ -1,11 +1,62 @@
 <template id="tesoft-button-template">
     <style>
         @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        button, a {
+            align-content: center;
+            background-color: transparent;
+            border-radius: var(--button-border-radius);
+            border-style: none;
+            color: var(--light-gray);
+            display: grid;
+            font-weight: 600;
+            height: 100%;
+            justify-content: center;
+            padding: var(--medium-padding);
+            text-decoration: none;
+            width: 100%;
+        }
+
+        :host([selected]) button, :host([selected]) a {
+            background-color: var(--light-gray);
+            color: var(--gray);
+            font-weight: 800;
+        }
+
+        button:focus, a:focus {
+            outline-color: var(--gold);
+            outline-offset: 0.2rem;
+            outline-style: solid;
+        }
+
+        button:hover, a:hover {
+            background-color: var(--gold) !important;
+            color: var(--gray);
+            cursor: pointer;
+        }
+
+        ::slotted(svg) {
+            fill: var(--light-gray);
+        }
+
+        :host([selected]) ::slotted(svg) {
+            fill: var(--gray);
+        }
+
+        button:hover ::slotted(svg), a:hover ::slotted(svg) {
+            fill: var(--gray);
+        }
     </style>
 
-    <button>
-        <slot></slot>
-    </button>
+    <div>
+        <button part="children">
+            <slot></slot>
+        </button>
+    </div>
 </template>
 
 <script src="/src/components/button.ts" type="module"></script>

frontend/src/components/button.ts

@@ -1,6 +1,10 @@
 import {TesoftComponent} from "../scripts/main.ts";
 
 export class TesoftButton extends TesoftComponent {
+    static observedAttributes = ["href", "selected"];
+
+    private readonly rootDiv: HTMLDivElement;
+
     constructor() {
         super();
 
@@ -9,6 +13,48 @@ export class TesoftButton extends TesoftComponent {
 
         const shadowRoot = this.attachShadow({mode: "open"});
         shadowRoot.appendChild(templateContent.cloneNode(true));
+
+        this.rootDiv = shadowRoot.querySelector<HTMLDivElement>("div")!;
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
+        if (name === "href") {
+            this.rootDiv.innerHTML = "";
+
+            let linkOrButton: HTMLElement;
+            if (newValue) {
+                linkOrButton = document.createElement("a");
+                (linkOrButton as HTMLAnchorElement).href = newValue;
+            } else {
+                linkOrButton = document.createElement("button");
+            }
+            linkOrButton.part = "children";
+            this.rootDiv.appendChild(linkOrButton);
+
+            const slot = document.createElement("slot");
+            linkOrButton.appendChild(slot);
+        }
+    }
+
+    get href(): string | null {
+        return this.getAttribute("href");
+    }
+
+    set href(value: string | null) {
+        if (value) {
+            this.setAttribute("href", value);
+        } else {
+            this.removeAttribute("href");
+        }
+    }
+
+    set selected(value: string | null) {
+        if (value === null) {
+            this.removeAttribute("selected");
+        } else {
+            this.setAttribute("selected", "");
+        }
     }
 }