feat: added a lot of styling, new inc/dec widget, new folder structure for widgets

public/global.css

@@ -34,12 +34,9 @@ label {
 input, button, select, textarea {
     font-family: inherit;
     font-size: inherit;
-    -webkit-padding: 0.4em 0;
     padding: 0.4em;
     margin: 0 0 0.5em 0;
     box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 2px;
 }
 
 input:disabled {

src/Beat.ts

@@ -73,6 +73,14 @@ export default class Beat implements IPublisher<BeatEvents>, BeatLike {
         this.publisher.notifySubs(BeatEvents.NewTimeSig);
     }
 
+    setTimeSigUp(timeSigUp: number): void {
+        this.setTimeSignature({up: timeSigUp});
+    }
+
+    setTimeSigDown(timeSigUp: number): void {
+        this.setTimeSignature({down: timeSigUp});
+    }
+
     setBarCount(barCount: number): void {
         if (!isPosInt(barCount) || barCount == this.barCount) {
             barCount = this.barCount;

src/BeatGroup.ts

@@ -139,6 +139,10 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
         this.publisher.notifySubs(BeatGroupEvents.TimeSigUpChanged);
     }
 
+    getTimeSigUp(): number {
+        return this.timeSigUp;
+    }
+
     getBeatByKey(beatKey: string): Beat {
         if (typeof this.beatKeyMap[beatKey] === "undefined") {
             throw new Error(`Could not find the beat with key: ${beatKey}`);

src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts

@@ -1,101 +0,0 @@
-import UINode, {UINodeOptions} from "../../../UINode";
-import Beat, {BeatEvents} from "../../../../Beat";
-import {IPublisher} from "../../../../Publisher";
-import ISubscriber from "../../../../Subscriber";
-import "./BeatSettings.css";
-import BeatLikeLoopSettingsView from "../../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
-
-export type BeatSettingsViewUINodeOptions = UINodeOptions & {
-    beat: Beat,
-};
-
-export default class BeatSettingsView extends UINode implements ISubscriber {
-    private beat: Beat;
-    private visible = false;
-    private timeSigUp!: HTMLInputElement;
-    private timeSigDown!: HTMLInputElement;
-    private barCountInput!: HTMLInputElement;
-    private loopSettingsView!: BeatLikeLoopSettingsView;
-
-    constructor(options: BeatSettingsViewUINodeOptions) {
-        super(options);
-        this.beat = options.beat;
-        this.setupBindings();
-    }
-
-    private setupBindings() {
-        this.beat.addSubscriber(this, "all");
-    }
-
-    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
-        if (event === BeatEvents.NewTimeSig) {
-            this.timeSigUp.value = this.beat.getTimeSigUp().toString();
-            this.timeSigDown.value = this.beat.getTimeSigDown().toString();
-        } else if (event === BeatEvents.NewBarCount) {
-            this.barCountInput.value = this.beat.getBarCount().toString();
-        }
-    }
-
-    toggleVisible(): void {
-        this.visible = !this.visible;
-        if (this.visible) {
-            this.node?.classList.add("visible");
-        } else {
-            this.node?.classList.remove("visible");
-        }
-    }
-
-    isOpen(): boolean {
-        return this.visible;
-    }
-
-    rebuild(): HTMLElement {
-        this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat});
-        this.timeSigUp = UINode.make("input", {
-            classes: ["time-sig-up"],
-            type: "number",
-            value: this.beat.getTimeSigUp().toString(),
-            oninput: (event: Event) => {
-                this.beat.setTimeSignature({up: Number((event.target as HTMLInputElement).value) });
-            },
-        });
-        this.timeSigDown = UINode.make("input", {
-            classes: ["beat-settings-time-sig-down"],
-            type: "number",
-            value: this.beat.getTimeSigDown().toString(),
-            oninput: (event: Event) => {
-                this.beat.setTimeSignature({down: Number((event.target as HTMLInputElement).value) });
-            },
-        });
-        this.barCountInput = UINode.make("input", {
-            classes: ["beat-settings-bars-count"],
-            type: "number",
-            value: this.beat.getBarCount().toString(),
-            oninput: (event: Event) => {
-                this.beat.setBarCount(Number((event.target as HTMLInputElement).value));
-            },
-        });
-        this.node = UINode.make("div", {
-            classes: ["beat-settings"],
-            subs: [
-                UINode.make("div", {
-                    classes: ["beat-settings-time-sig", "beat-settings-option-group", "beat-settings-option"],
-                    subs: [
-                        UINode.make("label", {innerText: "Time Signature:"}),
-                        this.timeSigUp,
-                        this.timeSigDown,
-                    ]
-                }),
-                UINode.make("div", {
-                    classes: ["beat-settings-bar", "beat-settings-option-group", "beat-settings-option"],
-                    subs: [
-                        UINode.make("label", {innerText: "Bar Count:"}),
-                        this.barCountInput,
-                    ],
-                }),
-                this.loopSettingsView.render(),
-            ],
-        });
-        return this.node;
-    }
-}

src/ui/BeatGroup/Beat/BeatView.ts

@@ -1,10 +1,10 @@
 import UINode, {UINodeOptions} from "../../UINode";
 import Beat, {BeatEvents} from "../../../Beat";
 import {IPublisher} from "../../../Publisher";
-import BeatSettingsView from "./BeatSettings/BeatSettingsView";
 import ISubscriber from "../../../Subscriber";
 import BeatUnitView from "./BeatUnit/BeatUnitView";
 import "./Beat.css";
+import BeatSettingsView from "../../BeatSettings/BeatSettingsView";
 
 export type BeatUINodeOptions = UINodeOptions & {
     beat: Beat,

src/ui/BeatGroup/BeatGroupView.ts

@@ -1,7 +1,7 @@
 import UINode, {UINodeOptions} from "../UINode";
 import BeatGroup from "../../BeatGroup";
+import BeatGroupSettingsView from "../BeatGroupSettings/BeatGroupSettingsView";
 import BeatView from "./Beat/BeatView";
-import BeatGroupSettingsView from "./BeatGroupSettings/BeatGroupSettingsView";
 
 export type BeatGroupUINodeOptions = UINodeOptions & {
     title: string,

src/ui/BeatGroupSettings/BeatGroupSettingsView.ts

@@ -1,11 +1,11 @@
-import BeatGroup from "../../../BeatGroup";
-import UINode, {UINodeOptions} from "../../UINode";
-import ISubscriber from "../../../Subscriber";
-import {IPublisher} from "../../../Publisher";
-import {BeatGroupEvents} from "../../../BeatGroup";
 import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
 import "./BeatGroupSettings.css";
-import {BeatEvents} from "../../../Beat";
+import UINode, {UINodeOptions} from "../UINode";
+import NumberInputView from "../Widgets/NumberInput/NumberInputView";
+import ISubscriber from "../../Subscriber";
+import BeatGroup, {BeatGroupEvents} from "../../BeatGroup";
+import {IPublisher} from "../../Publisher";
+import {BeatEvents} from "../../Beat";
 
 export type BeatGroupSettingsUINodeOptions = UINodeOptions & {
     beatGroup: BeatGroup,
@@ -13,8 +13,8 @@ export type BeatGroupSettingsUINodeOptions = UINodeOptions & {
 
 export default class BeatGroupSettingsView extends UINode implements ISubscriber {
     private beatGroup: BeatGroup;
-    private barCountInput!: HTMLInputElement;
-    private timeSigUpInput!: HTMLInputElement;
+    private barCountInput!: NumberInputView;
+    private timeSigUpInput!: NumberInputView;
     private loopSettingsView!: BeatLikeLoopSettingsView;
     private autoBeatLengthCheckbox!: HTMLInputElement;
     private forceFullBarsCheckbox!: HTMLInputElement;
@@ -32,9 +32,9 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
 
     notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
         if (event === BeatGroupEvents.BarCountChanged) {
-            this.barCountInput.valueAsNumber = this.beatGroup.getBeatByIndex(0).getBarCount();
+            this.barCountInput.setValue(this.beatGroup.getBarCount());
         } else if (event === BeatGroupEvents.TimeSigUpChanged) {
-            this.timeSigUpInput.valueAsNumber = this.beatGroup.getBeatByIndex(0).getTimeSigUp();
+            this.timeSigUpInput.setValue(this.beatGroup.getTimeSigUp());
         } else if (event === BeatEvents.DisplayTypeChanged) {
             if (this.beatGroup.isLooping()) {
                 this.autoBeatOptions.classList.add("visible");
@@ -46,19 +46,17 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
 
     rebuild(): HTMLElement {
         this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beatGroup});
-        this.barCountInput = UINode.make("input", {
-            type: "number",
-            value: this.beatGroup.getBeatByIndex(0).getBarCount().toString(),
-            oninput: () => {
-                this.beatGroup.setBarCount(Number(this.barCountInput.value));
-            },
+        this.barCountInput = new NumberInputView({
+            label: "Bars:",
+            initialValue: this.beatGroup.getBarCount(),
+            setter: (input: number) => this.beatGroup.setBarCount(input),
+            getter: () => this.beatGroup.getBarCount(),
         });
-        this.timeSigUpInput = UINode.make("input", {
-            type: "number",
-            value: this.beatGroup.getBeatByIndex(0).getTimeSigUp().toString(),
-            oninput: () => {
-                this.beatGroup.setTimeSigUp(Number(this.timeSigUpInput.value));
-            },
+        this.timeSigUpInput = new NumberInputView({
+            label: "Boxes per bar:",
+            initialValue: this.beatGroup.getTimeSigUp(),
+            setter: (input: number) => this.beatGroup.setTimeSigUp(input),
+            getter: () => this.beatGroup.getTimeSigUp(),
         });
         this.autoBeatLengthCheckbox = UINode.make("input", {
             type: "checkbox",
@@ -101,15 +99,13 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
                         UINode.make("div", {
                             classes: ["beat-group-settings-bar-count", "beat-group-settings-option"],
                             subs: [
-                                UINode.make("label", { innerText: "Bars:" }),
-                                this.barCountInput,
+                                this.barCountInput.render(),
                             ],
                         }),
                         UINode.make("div", {
                             classes: ["beat-group-settings-boxes", "beat-group-settings-option"],
                             subs: [
-                                UINode.make("label", { innerText: "Boxes per bar:" }),
-                                this.timeSigUpInput,
+                                this.timeSigUpInput.render(),
                             ],
                         }),
                         this.loopSettingsView.render(),

src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts

@@ -1,9 +1,10 @@
-import BeatLike from "../../../BeatLike";
-import UINode, {UINodeOptions} from "../../UINode";
-import ISubscriber from "../../../Subscriber";
-import {IPublisher} from "../../../Publisher";
-import {BeatEvents} from "../../../Beat";
 import "./BeatLikeLoopSettings.css";
+import BeatLike from "../../BeatLike";
+import NumberInputView from "../Widgets/NumberInput/NumberInputView";
+import ISubscriber from "../../Subscriber";
+import UINode, {UINodeOptions} from "../UINode";
+import {BeatEvents} from "../../Beat";
+import {IPublisher} from "../../Publisher";
 
 export type BeatLikeLoopSettingsViewUINodeOptions = UINodeOptions & {
     beatLike: BeatLike,
@@ -11,7 +12,7 @@ export type BeatLikeLoopSettingsViewUINodeOptions = UINodeOptions & {
 
 export default class BeatLikeLoopSettingsView extends UINode implements ISubscriber {
     private beatLike: BeatLike;
-    private loopLengthInput!: HTMLInputElement;
+    private loopLengthInput!: NumberInputView;
     private loopCheckbox!: HTMLInputElement;
 
     constructor(options: BeatLikeLoopSettingsViewUINodeOptions) {
@@ -29,20 +30,19 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri
 
     notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
         if (event === BeatEvents.LoopLengthChanged) {
-            this.loopLengthInput.value = this.beatLike.getLoopLength().toString();
+            this.loopLengthInput.setValue(this.beatLike.getLoopLength());
         } else if (event === BeatEvents.DisplayTypeChanged) {
             this.loopCheckbox.checked = this.beatLike.isLooping();
         }
     }
 
     rebuild(): HTMLElement {
-        this.loopLengthInput = UINode.make("input", {
-            classes: ["loop-settings-loop-length"],
-            type: "number",
-            value: this.beatLike.getLoopLength().toString(),
-            oninput: (event: Event) => {
-                this.beatLike.setLoopLength(Number((event.target as HTMLInputElement).value));
-            },
+        this.loopLengthInput = new NumberInputView({
+            initialValue: this.beatLike.getLoopLength(),
+            label: "Length:",
+            onDecrement: () => this.beatLike.setLoopLength(this.beatLike.getLoopLength() - 1),
+            onIncrement: () => this.beatLike.setLoopLength(this.beatLike.getLoopLength() + 1),
+            onNewInput: (input: number) => this.beatLike.setLoopLength(input),
         });
         this.loopCheckbox = UINode.make("input", {
             classes: ["loop-settings-loop-toggle"],
@@ -62,8 +62,7 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri
                         UINode.make("div", {
                             classes: ["loop-settings-option"],
                             subs: [
-                                UINode.make("label", {innerText: "Length:"}),
-                                this.loopLengthInput,
+                                this.loopLengthInput.render(),
                             ],
                         }),
                         UINode.make("div", {

src/ui/BeatSettings/BeatSettingsView.ts

@@ -0,0 +1,91 @@
+import "./BeatSettings.css";
+import Beat, {BeatEvents} from "../../Beat";
+import UINode, {UINodeOptions} from "../UINode";
+import ISubscriber from "../../Subscriber";
+import NumberInputView from "../Widgets/NumberInput/NumberInputView";
+import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
+import {IPublisher} from "../../Publisher";
+
+export type BeatSettingsViewUINodeOptions = UINodeOptions & {
+    beat: Beat,
+};
+
+export default class BeatSettingsView extends UINode implements ISubscriber {
+    private beat: Beat;
+    private visible = false;
+    private timeSigUp!: NumberInputView;
+    private timeSigDown!: NumberInputView;
+    private barCountInput!: NumberInputView;
+    private loopSettingsView!: BeatLikeLoopSettingsView;
+
+    constructor(options: BeatSettingsViewUINodeOptions) {
+        super(options);
+        this.beat = options.beat;
+        this.setupBindings();
+    }
+
+    private setupBindings() {
+        this.beat.addSubscriber(this, "all");
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
+        if (event === BeatEvents.NewTimeSig) {
+            this.timeSigUp.setValue(this.beat.getTimeSigUp());
+            this.timeSigDown.setValue(this.beat.getTimeSigDown());
+        } else if (event === BeatEvents.NewBarCount) {
+            this.barCountInput.setValue(this.beat.getBarCount());
+        }
+    }
+
+    toggleVisible(): void {
+        this.visible = !this.visible;
+        if (this.visible) {
+            this.node?.classList.add("visible");
+        } else {
+            this.node?.classList.remove("visible");
+        }
+    }
+
+    isOpen(): boolean {
+        return this.visible;
+    }
+
+    rebuild(): HTMLElement {
+        this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat});
+        this.timeSigUp = new NumberInputView({
+            initialValue: this.beat.getTimeSigUp(),
+            setter: (value: number) => this.beat.setBarCount(value),
+            getter: () => this.beat.getBarCount(),
+        });
+        this.timeSigDown = new NumberInputView({
+            initialValue: this.beat.getTimeSigDown(),
+            setter: (value: number) => this.beat.setBarCount(value),
+            getter: () => this.beat.getBarCount(),
+        });
+        this.barCountInput = new NumberInputView({
+            label: "Bar Count:",
+            initialValue: this.beat.getBarCount(),
+            setter: (value: number) => this.beat.setBarCount(value),
+            getter: () => this.beat.getBarCount(),
+        });
+        this.node = UINode.make("div", {
+            classes: ["beat-settings"],
+            subs: [
+                UINode.make("div", {
+                    classes: ["beat-settings-time-sig", "beat-settings-option-group", "beat-settings-option"],
+                    subs: [
+                        UINode.make("label", {innerText: "Time Signature:"}),
+                        this.timeSigUp.render(),
+                        this.timeSigDown.render(),
+                    ]
+                }),
+                UINode.make("div", {
+                    classes: ["beat-settings-bar", "beat-settings-option-group", "beat-settings-option"],
+                    subs: [this.barCountInput.render()],
+                }),
+                this.loopSettingsView.render(),
+            ],
+        });
+        return this.node;
+    }
+}

src/ui/Root/Root.css

@@ -1,14 +1,77 @@
+:root {
+    --color-ui-accent-light: #07afb6;
+    --color-ui-accent-dark: #00888b;
+    --color-ui-neutral-light: #fdfdfe;
+    --color-ui-neutral-dark: #8b8b8b;
+    --color-ui-neutral-dark-hover: #a1a1a1;
+    --color-bg-light: #464646;
+    --color-bg-dark: #282828;
+    --color-p-light: #fafafa;
+    --color-p-dark: #282828;
+    --color-title-light: #fafafa;
+    --color-title-dark: #282828;
+}
+
+body {
+    background-color: var(--color-bg-dark);
+    color: var(--color-p-light);
+}
+
 .root {
+    background-color: var(--color-bg-light);
     margin-left: 10em;
     margin-right: 10em;
 }
 
-.root .title {
+.root-title {
+    color: var(--color-title-light);
     text-align: center;
 }
 
-.root input[type="number"] {
-    width: 5em;
+input[type="checkbox"] {
+    position: relative;
+    width: 2em;
+    height: 1em;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+input[type="checkbox"]::before {
+    width: 2em;
+    height: 1em;
+    border-radius: 1em;
+    background-color: var(--color-ui-accent-dark);
+    display: block;
+    content: "";
+    z-index: 0;
+    position: absolute;
+    transition: background-color 200ms;
+}
+
+input[type="checkbox"]:checked::before {
+    background-color: var(--color-ui-accent-light);
+}
+
+input[type="checkbox"]::after {
+    position: absolute;
+    width: 1em;
+    height: 1em;
+    border-radius: 1em;
+    border-color: var(--color-ui-neutral-dark);
+    border-width: 1px;
+    background-color: var(--color-ui-neutral-light);
+    display: block;
+    content: "";
+    z-index: 1;
+    right: 1em;
+    transition: right 200ms;
+}
+
+input[type="checkbox"]:checked::after {
+    right: 0;
 }
 
 * {

src/ui/Root/RootView.ts

@@ -24,7 +24,7 @@ export default class RootView extends UINode {
         return UINode.make("div", {
             classes: ["root"],
             subs: [
-                UINode.make("h1", {innerText: this.title, classes: ["title"]}),
+                UINode.make("h1", {innerText: this.title, classes: ["root-title"]}),
                 this.beatGroupView.render(),
             ],
         });

src/ui/Widgets/NumberInput/NumberInput.css

@@ -0,0 +1,35 @@
+input[type="number"].number-input-input {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    text-align: center;
+    width: 3em;
+    border-style: none;
+    border-width: 0;
+    border-radius: 0;
+    background-color: var(--color-ui-neutral-light);
+    color: var(--color-p-dark)
+}
+
+input[type="number"].number-input-input::-webkit-inner-spin-button,
+input[type="number"].number-input-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+}
+
+.number-input-button {
+    border-width: 0;
+    background-color: var(--color-ui-neutral-dark);
+    color: var(--color-ui-neutral-light);
+    cursor: pointer;
+}
+
+.number-input-button:hover {
+    background-color: var(--color-ui-neutral-dark-hover);
+}
+
+.number-input-inc {
+    border-radius: 0 0.5em 0.5em 0;
+}
+
+.number-input-dec {
+    border-radius: 0.5em 0 0 0.5em;
+}

src/ui/Widgets/NumberInput/NumberInputView.ts

@@ -0,0 +1,121 @@
+import UINode, { UINodeOptions } from "../../UINode";
+import "./NumberInput.css";
+
+type NumberInputUINodeOptionsBase = UINodeOptions & {
+    label?: string,
+    initialValue?: number,
+}
+
+type NumberInputUINodeOptionsIncDecInput = NumberInputUINodeOptionsBase & {
+    onIncrement: () => void,
+    onDecrement: () => void,
+    onNewInput: (input: number) => void,
+    setter?: never,
+    getter?: never,
+};
+
+type NumberInputUINodeOptionsGetSet = NumberInputUINodeOptionsBase & {
+    onIncrement?: never,
+    onDecrement?: never,
+    onNewInput?: never,
+    setter: (input: number) => void,
+    getter: () => number,
+};
+
+export type NumberInputUINodeOptions = NumberInputUINodeOptionsGetSet | NumberInputUINodeOptionsIncDecInput;
+
+export default class NumberInputView extends UINode {
+    private labelElement!: HTMLLabelElement;
+    private mainElement!: HTMLDivElement;
+    private inputElement!: HTMLInputElement;
+    private value: number;
+    private label: string | null;
+    private onIncrement: (() => void) | null;
+    private onDecrement: (() => void) | null;
+    private setter: ((input: number) => void) | null;
+    private getter: (() => number) | null;
+    private onNewInput: ((input: number) => void) | null;
+
+    constructor(options: NumberInputUINodeOptions) {
+        super(options);
+        this.label = options.label ?? "";
+        this.value = options.initialValue ?? 0;
+        this.onDecrement = options.onDecrement ?? null;
+        this.setter = options.setter ?? null;
+        this.getter = options.getter ?? null;
+        this.onIncrement = options.onIncrement ?? null;
+        this.onNewInput = options.onNewInput ?? null;
+    }
+
+    setLabel(newLabel: string | null): void {
+        if (newLabel !== null) {
+            this.label = newLabel;
+            this.labelElement.innerText = newLabel;
+            this.labelElement.classList.add("visible");
+        } else {
+            this.label = newLabel;
+            this.labelElement.innerText = "";
+            this.labelElement.classList.remove("visible");
+        }
+    }
+
+    setValue(value: number): void {
+        this.value = value;
+        this.inputElement.valueAsNumber = value;
+    }
+
+    rebuild(): HTMLDivElement {
+        this.labelElement = UINode.make("label", {
+            classes: ["number-input-label"],
+            innerText: this.label ?? "",
+        });
+        if (this.label !== null) {
+            this.labelElement.classList.add("visible");
+        }
+        this.inputElement = UINode.make("input", {
+            type: "number",
+            classes: ["number-input-input"],
+            valueAsNumber: this.value,
+            oninput: (event: Event) => {
+                const input = (event.target as HTMLInputElement).valueAsNumber;
+                if (!isNaN(input)) {
+                    if (this.onNewInput) {
+                        this.onNewInput(input);
+                    } else if (this.setter) {
+                        this.setter(input);
+                    }
+                }
+            },
+        });
+        this.mainElement = UINode.make("div", {
+            classes: ["number-input"],
+            subs: [
+                this.labelElement,
+                UINode.make("button", {
+                    innerText: "-",
+                    classes: ["number-input-button", "number-input-dec"],
+                    onclick: () => {
+                        if (this.onDecrement) {
+                            this.onDecrement();
+                        } else if (this.setter && this.getter) {
+                            this.setter(this.getter() - 1);
+                        }
+                    },
+                }),
+                this.inputElement,
+                UINode.make("button", {
+                    innerText: "+",
+                    classes: ["number-input-button", "number-input-inc"],
+                    onclick: () => {
+                        if (this.onIncrement) {
+                            this.onIncrement();
+                        } else if (this.setter && this.getter) {
+                            this.setter(this.getter() + 1);
+                        }
+                    },
+                }),
+            ],
+        });
+        return this.mainElement;
+    }
+}