change base of tag to button

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

frontend/src/components/tag.njk

@@ -6,21 +6,26 @@
             display: block;
         }
 
-        :host > div {
+        tesoft-button::part(children) {
+            align-items: center;
             display: grid;
+            gap: 0.5rem;
             grid-template-columns: auto auto;
             grid-template-rows: auto;
         }
+
+        svg {
+            height: 2.4rem;
+            width: 2.4rem;
+        }
     </style>
 
-    <a>
-        <tesoft-badge>
-            <svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem">
-                <path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/>
-            </svg>
-            <slot></slot>
-        </tesoft-badge>
-    </a>
+    <tesoft-button>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+            <path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/>
+        </svg>
+        <slot></slot>
+    </tesoft-button>
 </template>
 
 <script src="/src/components/tag.ts" type="module"></script>

frontend/src/components/tag.ts

@@ -1,9 +1,10 @@
 import {TesoftComponent} from "../scripts/main.ts";
+import {TesoftButton} from "./button.ts";
 
 export class TesoftTag extends TesoftComponent {
-    static observedAttributes = ["href"];
+    static observedAttributes = ["href", "selected"];
 
-    private readonly anchor: HTMLAnchorElement;
+    private readonly button: TesoftButton;
 
     constructor() {
         super();
@@ -14,13 +15,19 @@ export class TesoftTag extends TesoftComponent {
         const shadowRoot = this.attachShadow({mode: "open"});
         shadowRoot.appendChild(templateContent.cloneNode(true));
 
-        this.anchor = shadowRoot.querySelector<HTMLAnchorElement>("a")!;
+        this.button = shadowRoot.querySelector<TesoftButton>("tesoft-button")!;
     }
 
     // noinspection JSUnusedGlobalSymbols
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         if (name === "href") {
-            this.anchor.href = newValue ?? "";
+            setTimeout(() => {
+                this.button.href = newValue ?? "";
+            });
+        } else if (name === "selected") {
+            setTimeout(() => {
+                this.button.selected = newValue;
+            });
         }
     }
 
@@ -31,6 +38,14 @@ export class TesoftTag extends TesoftComponent {
             this.removeAttribute("href");
         }
     }
+
+    set selected(value: string | null) {
+        if (value === null) {
+            this.removeAttribute("selected");
+        } else {
+            this.setAttribute("selected", "");
+        }
+    }
 }
 
 customElements.define("tesoft-tag", TesoftTag);