1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114

// Copyright 2026 Shota FUJI
//
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
//
// SPDX-License-Identifier: MPL-2.0

import css from "./x-number-input.css";

export class XNumberInput extends HTMLElement {
	#slot = document.createElement("slot");
	#input = null;

	constructor() {
		super();

		const shadow = this.attachShadow({
			mode: "open",
		});

		const style = document.createElement("style");
		style.textContent = css;
		shadow.appendChild(style);

		shadow.appendChild(this.#slot);

		const unit = document.createElement("slot");
		unit.name = "unit";
		shadow.appendChild(unit);
	}

	connectedCallback() {
		this.#slot.addEventListener("slotchange", this.#onSlotChange);
		this.addEventListener("click", this.#onClick);
		this.addEventListener("keydown", this.#onKeyDown);
	}

	disconnectedCallback() {
		this.#slot.removeEventListener("slotchange", this.#onSlotChange);
		this.removeEventListener("click", this.#onClick);
		this.removeEventListener("keydown", this.#onKeyDown);
	}

	#onSlotChange = () => {
		for (const child of this.#slot.assignedElements()) {
			if (child instanceof HTMLInputElement) {
				this.input = new WeakRef(child);
				return;
			}
		}
	};

	#onClick = (event) => {
		if ((event.target && event.target instanceof HTMLInputElement) || !this.input) {
			return;
		}

		const input = this.input.deref();
		if (!input) {
			this.input = null;
			return;
		}

		input.focus();
	};

	#onKeyDown = (event) => {
		if (!this.input) {
			return;
		}

		const input = this.input.deref();
		if (!input) {
			this.input = null;
			return;
		}

		switch (event.key) {
			case "ArrowDown":
			case "ArrowUp":
				break;
			default:
				return;
		}

		const value = parseFloat(input.value);
		if (!Number.isFinite(value)) {
			return;
		}

		let step = parseFloat(input.step || "1");
		if (!Number.isFinite(step)) {
			step = 1;
		}

		const amount = event.key === "ArrowDown" ? -step : step;

		const next = value + amount;

		const max = parseFloat(input.max);
		const min = parseFloat(input.min);

		const finalValue = (input.value = Math.min(
			Number.isFinite(max) ? max : Infinity,
			Math.max(Number.isFinite(min) ? min : -Infinity, next),
		));

		input.value = (Math.floor(finalValue * 100) / 100).toString(10);

		// Tell Elm the updated value.
		input.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
	};
}