make buttons disablable

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

frontend/src/components/button.njk

@@ -27,13 +27,17 @@
             font-weight: 800;
         }
 
-        button:focus, a:focus {
+        :host([disabled]) button, :host([disabled]) a {
+            color: var(--gray);
+        }
+
+        :host(:not([disabled])) button:focus, :host(:not([disabled])) a:focus {
             outline-color: var(--gold);
             outline-offset: 0.2rem;
             outline-style: solid;
         }
 
-        button:hover, a:hover {
+        :host(:not([disabled])) button:hover, :host(:not([disabled])) a:hover {
             background-color: var(--gold) !important;
             color: var(--gray);
             cursor: pointer;
@@ -43,11 +47,11 @@
             fill: var(--light-gray);
         }
 
-        :host([selected]) ::slotted(svg) {
+        :host([selected]) ::slotted(svg), :host([disabled]) ::slotted(svg) {
             fill: var(--gray);
         }
 
-        button:hover ::slotted(svg), a:hover ::slotted(svg) {
+        :host(:not([disabled])) button:hover ::slotted(svg), :host(:not([disabled])) a:hover ::slotted(svg) {
             fill: var(--gray);
         }
     </style>

frontend/src/components/button.ts

@@ -1,7 +1,7 @@
 import {TesoftComponent} from "../scripts/main.ts";
 
 export class TesoftButton extends TesoftComponent {
-    static observedAttributes = ["href", "selected"];
+    static observedAttributes = ["disabled", "href", "selected"];
 
     private readonly rootDiv: HTMLDivElement;
 
@@ -19,7 +19,15 @@ export class TesoftButton extends TesoftComponent {
 
     // noinspection JSUnusedGlobalSymbols
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
-        if (name === "href") {
+        if (name === "disabled") {
+            if (newValue === null) {
+                this.rootDiv.onclick = null;
+            } else {
+                this.rootDiv.onclick = (e) => {
+                    e.stopPropagation();
+                };
+            }
+        } else if (name === "href") {
             this.rootDiv.innerHTML = "";
 
             let linkOrButton: HTMLElement;