@popovandrii/ui-elements 0.2.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -7,6 +7,7 @@ var e = class {
7
7
  root;
8
8
  observer = null;
9
9
  rescanTimer = null;
10
+ valueControls = /* @__PURE__ */ new WeakMap();
10
11
  constructor(e = {}, t = !1, n = {}) {
11
12
  this.debug = t, this.root = n.root ?? document;
12
13
  let r = {
@@ -35,7 +36,9 @@ var e = class {
35
36
  e == r || e < r ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), i !== 0 && (e == i || e > i ? (n.classList.add(this.selectors.disabledBtn), n.disabled = !0) : (n.classList.remove(this.selectors.disabledBtn), n.disabled = !1));
36
37
  };
37
38
  destroy() {
38
- this.observer?.disconnect(), this.observer = null, this.rescanTimer !== null && (clearTimeout(this.rescanTimer), this.rescanTimer = null), this.abortController.abort(), this.spinBoxes?.forEach((e) => delete e.dataset.uispBound), this.spinBoxes = null, this.abortController = new AbortController();
39
+ this.observer?.disconnect(), this.observer = null, this.rescanTimer !== null && (clearTimeout(this.rescanTimer), this.rescanTimer = null), this.abortController.abort(), this.spinBoxes?.forEach((e) => {
40
+ delete e.dataset.uispBound, this.valueControls.delete(e);
41
+ }), this.spinBoxes = null, this.abortController = new AbortController();
39
42
  }
40
43
  disableEl(e) {
41
44
  let t = e.querySelector(`.${this.selectors.input}`), n = e.querySelectorAll(`.${this.selectors.btn}`);
@@ -43,13 +46,33 @@ var e = class {
43
46
  e.classList.add(this.selectors.disabledBtn), e.disabled = !0;
44
47
  }), e.setAttribute("tabindex", "-1"), e.setAttribute("aria-disabled", "true");
45
48
  }
46
- setValue(e, t) {
49
+ setValue(e, t, { silent: n = !1, flash: r = !0 } = {}) {
50
+ let i = e.querySelector(`.${this.selectors.input}`);
51
+ if (!i) {
52
+ this.debug && console.warn("UISpinBox: input not found");
53
+ return;
54
+ }
55
+ if (n) {
56
+ let n = this.valueControls.get(e);
57
+ n ? n(t, !0) : i.value = String(t);
58
+ } else i.value = String(t), i.dispatchEvent(new Event("change"));
59
+ r && this.playFlash(e, i);
60
+ }
61
+ playFlash(e, t) {
62
+ e.closest(".ui-no-flash") || (e.classList.remove("UIsp--flash"), e.offsetWidth, e.classList.add("UIsp--flash"), t.addEventListener("animationend", () => e.classList.remove("UIsp--flash"), { once: !0 }));
63
+ }
64
+ refresh(e) {
65
+ let t = this.valueControls.get(e);
66
+ if (!t) {
67
+ this.debug && console.warn("UISpinBox: element not bound");
68
+ return;
69
+ }
47
70
  let n = e.querySelector(`.${this.selectors.input}`);
48
71
  if (!n) {
49
72
  this.debug && console.warn("UISpinBox: input not found");
50
73
  return;
51
74
  }
52
- n.value = String(t), n.dispatchEvent(new Event("change")), !e.closest(".ui-no-flash") && (e.classList.remove("UIsp--flash"), e.offsetWidth, e.classList.add("UIsp--flash"), n.addEventListener("animationend", () => e.classList.remove("UIsp--flash"), { once: !0 }));
75
+ t(n.value, !0);
53
76
  }
54
77
  getValidDataNumber = (e, t) => {
55
78
  let n = e.getAttribute(`data-${t}`);
@@ -61,13 +84,15 @@ var e = class {
61
84
  this.spinBoxes.forEach((t) => {
62
85
  if (t.dataset.uispBound) return;
63
86
  t.dataset.uispBound = "1";
64
- let n, r = t.querySelectorAll(`.${this.selectors.btn}`), i = t.querySelector(`.${this.selectors.input}`);
65
- this.debug && (r || console.log(`Buttons (${this.selectors.btn}) not found in container`), i || console.log(`Input (${this.selectors.input}) not found in container`));
66
- let a = r[0], o = r[1];
87
+ let n, r = t.querySelectorAll(`.${this.selectors.btn}`), i = t.querySelector(`.${this.selectors.input}`), a = r[0], o = r[1];
88
+ if (!i || !a || !o) {
89
+ this.debug && (r.length < 2 && console.log(`Buttons (${this.selectors.btn}) not found in container`), i || console.log(`Input (${this.selectors.input}) not found in container`));
90
+ return;
91
+ }
67
92
  i.disabled = !1, [a, o].forEach((e) => {
68
93
  e.classList.remove(this.selectors.disabledBtn), e.disabled = !1;
69
94
  }), t.setAttribute("tabindex", "0"), t.removeAttribute("aria-disabled");
70
- let s = t.hasAttribute("data-decimals") ? this.getValidDataNumber(t, "decimals") : this.getValidDataNumber(t, "step"), c = Math.min(Math.max(Math.trunc(s), 0), 100), l = this.getValidDataNumber(t, "min"), u = this.getValidDataNumber(t, "max");
95
+ let s = t.hasAttribute("data-decimals") ? this.getValidDataNumber(t, "decimals") : this.getValidDataNumber(t, "step"), c = Math.min(Math.max(Math.trunc(s), 0), 100), l = this.getValidDataNumber(t, "min"), u = this.getValidDataNumber(t, "max"), d = t.hasAttribute("data-negative");
71
96
  if (t.hasAttribute("data-disabled")) {
72
97
  Number(i.value) <= l && (i.value = l.toFixed(c)), u === 0 ? i.value = Number(i.value).toFixed(c) : Number(i.value) >= u && (i.value = u.toFixed(c)), this.disableEl(t), t.addEventListener("click", (e) => {
73
98
  e.preventDefault(), e.stopImmediatePropagation();
@@ -77,48 +102,42 @@ var e = class {
77
102
  });
78
103
  return;
79
104
  }
80
- let d = (e) => {
81
- t.setAttribute("aria-valuenow", String(e)), t.setAttribute("aria-valuetext", `${e} items`);
105
+ let f = t.getAttribute("data-unit")?.trim(), p = (e) => {
106
+ t.setAttribute("aria-valuenow", String(e)), t.setAttribute("aria-valuetext", f ? `${e} ${f}` : String(e));
107
+ }, m = (e, t) => {
108
+ let n = Number(e);
109
+ Number.isNaN(n) && (n = l), n < l && (n = l), u !== 0 && n > u && (n = u), i.value = n.toFixed(c), this.state(n, a, o, l, u), p(i.value), t || this.customEvent(i, i.value);
82
110
  };
83
- Number(i.value) <= l && (i.value = l.toFixed(c)), u === 0 ? i.value = Number(i.value).toFixed(c) : (Number(i.value) >= u && (i.value = u.toFixed(c)), u && t.setAttribute("aria-valuemax", u.toFixed(c))), l && t.setAttribute("aria-valuemin", l.toFixed(c)), this.state(Number(i.value), a, o, l, u), d(i.value);
84
- let f = null, p = (e, t = 1) => {
85
- i.value = String(Math.abs(Number(i.value)));
111
+ this.valueControls.set(t, m), Number(i.value) <= l && (i.value = l.toFixed(c)), u === 0 ? i.value = Number(i.value).toFixed(c) : (Number(i.value) >= u && (i.value = u.toFixed(c)), u && t.setAttribute("aria-valuemax", u.toFixed(c))), l && t.setAttribute("aria-valuemin", l.toFixed(c)), this.state(Number(i.value), a, o, l, u), p(i.value);
112
+ let h = null, g = (e, t = 1) => {
113
+ d || (i.value = String(Math.abs(Number(i.value))));
86
114
  let n = parseFloat(i.value) || 0;
87
- return n += e * t / 10 ** c, e === 1 && u !== 0 && n > u && (n = u), e === -1 && n < l && (n = l), i.value = n.toFixed(c), this.state(Number(i.value), a, o, l, u), d(i.value), i.value;
88
- }, m = (e, t = 150) => {
89
- f === null && (f = window.setInterval(e, t));
90
- }, h = () => {
91
- f !== null && (clearInterval(f), f = null);
115
+ return n += e * t / 10 ** c, e === 1 && u !== 0 && n > u && (n = u), e === -1 && n < l && (n = l), i.value = n.toFixed(c), this.state(Number(i.value), a, o, l, u), p(i.value), i.value;
116
+ }, _ = !1, v = (e, t = 150) => {
117
+ h === null && (_ = !1, h = window.setInterval(e, t));
118
+ }, y = () => {
119
+ h !== null && (clearInterval(h), h = null, _ && this.customEvent(i, i.value));
120
+ }, b = (e, t, n) => {
121
+ _ = !0, g(e, t), n.disabled && (y(), _ = !1);
122
+ }, x = (t, r, a) => {
123
+ t.addEventListener("mousedown", (e) => {
124
+ let n = e.shiftKey ? 3 : 1;
125
+ v(() => b(r, n, t), a);
126
+ }, { signal: e }), t.addEventListener("touchstart", () => v(() => b(r, 1, t), a), { signal: e }), ["mouseup", "touchend"].forEach((n) => {
127
+ t.addEventListener(n, y, { signal: e });
128
+ }), ["mouseleave", "touchcancel"].forEach((n) => {
129
+ t.addEventListener(n, () => {
130
+ y(), _ = !1;
131
+ }, { signal: e });
132
+ }), t.addEventListener("click", (e) => {
133
+ if (_) {
134
+ _ = !1;
135
+ return;
136
+ }
137
+ h === null && (n = g(r, e.shiftKey ? 3 : 1), this.ripple(t), this.customEvent(i, n));
138
+ }, { signal: e });
92
139
  };
93
- o.addEventListener("mousedown", (e) => {
94
- let t = e.shiftKey ? 3 : 1;
95
- m(() => p(1, t));
96
- }, { signal: e }), o.addEventListener("touchstart", () => m(() => p(1)), { signal: e }), [
97
- "mouseup",
98
- "mouseleave",
99
- "mouseout",
100
- "touchend",
101
- "touchcancel"
102
- ].forEach((t) => {
103
- o.addEventListener(t, h, { signal: e });
104
- }), o.addEventListener("click", (e) => {
105
- let t = e.shiftKey ? 3 : 1;
106
- f === null && (n = p(1, t), this.ripple(o), this.customEvent(i, n));
107
- }, { signal: e }), a.addEventListener("click", (e) => {
108
- let t = e.shiftKey ? 3 : 1;
109
- f === null && (n = p(-1, t), this.ripple(a), this.customEvent(i, n));
110
- }, { signal: e }), a.addEventListener("mousedown", (e) => {
111
- let t = e.shiftKey ? 3 : 1;
112
- m(() => p(-1, t), 100);
113
- }, { signal: e }), a.addEventListener("touchstart", () => m(() => p(-1), 100), { signal: e }), [
114
- "mouseup",
115
- "mouseleave",
116
- "mouseout",
117
- "touchend",
118
- "touchcancel"
119
- ].forEach((t) => {
120
- a.addEventListener(t, h, { signal: e });
121
- }), i.addEventListener("keydown", (e) => {
140
+ x(o, 1, 150), x(a, -1, 100), i.addEventListener("keydown", (e) => {
122
141
  let t = e.key, n = e.shiftKey ? 5 : 1;
123
142
  if ([
124
143
  "Backspace",
@@ -135,25 +154,24 @@ var e = class {
135
154
  "v",
136
155
  "x"
137
156
  ].includes(t.toLowerCase())) return;
138
- if ([
139
- "e",
140
- "+",
141
- "-"
142
- ].includes(t)) {
157
+ if (["e", "+"].includes(t)) {
143
158
  e.preventDefault();
144
159
  return;
145
160
  }
161
+ if (t === "-") {
162
+ let t = i.selectionStart === 0, n = (i.selectionEnd ?? 0) > 0;
163
+ (!d || !t || i.value.includes("-") && !n) && e.preventDefault();
164
+ return;
165
+ }
146
166
  if (t === "ArrowUp" || t === "ArrowDown") {
147
- e.preventDefault(), p(t === "ArrowUp" ? 1 : -1, n);
167
+ e.preventDefault(), g(t === "ArrowUp" ? 1 : -1, n);
148
168
  return;
149
169
  }
150
170
  let r = t === "," ? "." : t, a = /^[0-9]$/.test(r), o = r === ".", s = i.value.includes(".");
151
171
  (c === 0 && !a || c > 0 && !(a || o) || o && s) && e.preventDefault();
152
172
  }, { signal: e }), i.addEventListener("keyup", (e) => {
153
173
  (e.key === "ArrowUp" || e.key === "ArrowDown") && this.customEvent(i, i.value);
154
- }, { signal: e }), i.addEventListener("change", () => {
155
- Number(i.value) < l && (i.value = l.toFixed(c)), Number(i.value) > u && u !== 0 ? i.value = u.toFixed(c) : i.value = Number(i.value).toFixed(c), this.state(Number(i.value), a, o, l, u), this.customEvent(i, i.value);
156
- }, { signal: e });
174
+ }, { signal: e }), i.addEventListener("change", () => m(i.value, !1), { signal: e });
157
175
  });
158
176
  }
159
177
  ripple(e) {
@@ -227,7 +245,7 @@ var e = class {
227
245
  }, { signal: e }), t.addEventListener("keydown", (e) => {
228
246
  if (r.disabled) return;
229
247
  let n = null;
230
- if (e.key === "ArrowRight" ? n = !0 : e.key === "ArrowLeft" && (n = !1), n !== null && (e.preventDefault(), r.checked !== n)) {
248
+ if (e.key === "ArrowRight" ? n = !0 : e.key === "ArrowLeft" ? n = !1 : (e.key === " " || e.key === "Enter") && (n = !r.checked), n !== null && (e.preventDefault(), r.checked !== n)) {
231
249
  r.checked = n, r.dispatchEvent(new Event("change"));
232
250
  let e = t.querySelector(".UIsw-slider");
233
251
  e && this.ripple(e);
@@ -235,15 +253,15 @@ var e = class {
235
253
  }, { signal: e }));
236
254
  });
237
255
  }
238
- setValue(e, t) {
239
- this.main?.forEach((n) => {
240
- let r = n.querySelector(`input#${e}`);
241
- if (r) {
242
- r.checked = t, this.debug && console.log("SetValue:", r.checked), n.setAttribute("aria-checked", String(t)), this.customEvent(r, String(t));
243
- let e = n.querySelector(".UIsw-slider");
244
- e && !n.closest(".ui-no-flash") && (n.classList.remove("UIsw--flash"), n.offsetWidth, n.classList.add("UIsw--flash"), e.addEventListener("animationend", () => n.classList.remove("UIsw--flash"), { once: !0 }));
245
- }
246
- });
256
+ setValue(e, t, { silent: n = !1, flash: r = !0 } = {}) {
257
+ let i = e.querySelector("input");
258
+ if (!i) {
259
+ this.debug && console.warn("UISwitch: input not found");
260
+ return;
261
+ }
262
+ i.checked = t, this.debug && console.log("SetValue:", i.checked), e.setAttribute("aria-checked", String(t)), n || this.customEvent(i, String(t));
263
+ let a = e.querySelector(".UIsw-slider");
264
+ r && a && !e.closest(".ui-no-flash") && (e.classList.remove("UIsw--flash"), e.offsetWidth, e.classList.add("UIsw--flash"), a.addEventListener("animationend", () => e.classList.remove("UIsw--flash"), { once: !0 }));
247
265
  }
248
266
  ripple(e) {
249
267
  e.closest(".ui-no-ripple") || (e.classList.remove("ui-ripple"), e.offsetWidth, e.classList.add("ui-ripple"), e.addEventListener("animationend", () => e.classList.remove("ui-ripple"), { once: !0 }));
@@ -317,20 +335,20 @@ var e = class {
317
335
  disableEl(e) {
318
336
  e.setAttribute("tabindex", "-1"), e.setAttribute("aria-disabled", "true");
319
337
  }
320
- setValue(e, t) {
321
- let n = this.selectMap.get(e);
322
- if (!n) {
338
+ setValue(e, t, { silent: n = !1, flash: r = !0 } = {}) {
339
+ let i = this.selectMap.get(e);
340
+ if (!i) {
323
341
  this.debug && console.warn("UISelect: element not registered");
324
342
  return;
325
343
  }
326
- let { input: r, selected: i } = n, a = e.querySelector(`.${this.selectors.optionsList}`);
327
- if (!a) return;
328
- let o = Array.from(a.querySelectorAll(`.${this.selectors.items} ul li`)), s = this.filterExcluded(o, this.selectors.excludedItems), c = s.find((e) => String(e.dataset.value) === String(t));
329
- if (!c) {
344
+ let { input: a, selected: o } = i, s = e.querySelector(`.${this.selectors.optionsList}`);
345
+ if (!s) return;
346
+ let c = Array.from(s.querySelectorAll(`.${this.selectors.items} ul li`)), l = this.filterExcluded(c, this.selectors.excludedItems), u = l.find((e) => String(e.dataset.value) === String(t));
347
+ if (!u) {
330
348
  this.debug && console.warn(`UISelect: value "${t}" not found`);
331
349
  return;
332
350
  }
333
- s.forEach((e) => e.removeAttribute("aria-selected")), c.setAttribute("aria-selected", "true"), i.textContent = c.textContent ?? "", r.value = String(t), r.setAttribute("value", String(t)), e.setAttribute("aria-activedescendant", c.id || `${this.selectors.idPrefix}${s.indexOf(c)}`), this.customEvent(e, String(t)), e.closest(".ui-no-flash") || (e.classList.remove(this.selectors.flash), e.offsetWidth, e.classList.add(this.selectors.flash), e.addEventListener("animationend", () => e.classList.remove(this.selectors.flash), { once: !0 }));
351
+ l.forEach((e) => e.removeAttribute("aria-selected")), u.setAttribute("aria-selected", "true"), o.textContent = u.textContent ?? "", a.value = String(t), a.setAttribute("value", String(t)), e.setAttribute("aria-activedescendant", u.id || `${this.selectors.idPrefix}${l.indexOf(u)}`), n || this.customEvent(e, String(t)), r && !e.closest(".ui-no-flash") && (e.classList.remove(this.selectors.flash), e.offsetWidth, e.classList.add(this.selectors.flash), e.addEventListener("animationend", () => e.classList.remove(this.selectors.flash), { once: !0 }));
334
352
  }
335
353
  scan() {
336
354
  this.main = this.root.querySelectorAll(`.${this.selectors.main}`);
@@ -376,28 +394,27 @@ var e = class {
376
394
  itemArrow(e, t, n, r, i) {
377
395
  if (this.itemArrowInitialized.has(e)) return;
378
396
  this.itemArrowInitialized.add(e);
379
- let a = -1, o = n.textContent ? n.textContent : "", s = e.querySelector(`.${this.selectors.search} input`);
397
+ let a = n.textContent ? n.textContent : "", o = e.querySelector(`.${this.selectors.search} input`);
380
398
  e.addEventListener("keydown", (i) => {
381
399
  if (i.key === "Tab") {
382
400
  this.close(e, t);
383
401
  return;
384
402
  }
385
- s && s.focus();
386
- let c = Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)), l = this.filterExcluded(c, this.selectors.excludedItems), u = l.length;
387
- if (u !== 0) if (i.key === "ArrowDown") {
388
- i.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), a = (a + 1) % u, n.textContent = l[a].textContent, l.forEach((e) => e.removeAttribute("aria-selected")), l[a].setAttribute("aria-selected", "true");
389
- let r = l[a].id || `${this.selectors.idPrefix}${a}`;
390
- e.setAttribute("aria-activedescendant", r), l[a].scrollIntoView({ block: "nearest" });
391
- } else if (i.key === "ArrowUp") {
392
- i.preventDefault(), a = (a - 1 + u) % u, n.textContent = l[a].textContent, l.forEach((e) => e.removeAttribute("aria-selected")), l[a].setAttribute("aria-selected", "true");
393
- let t = l[a].id || `${this.selectors.idPrefix}${a}`;
394
- e.setAttribute("aria-activedescendant", t), l[a].scrollIntoView({ block: "nearest" });
395
- } else if (i.key === "Enter") if (i.preventDefault(), a >= 0) {
396
- n.textContent = l[a].textContent, l.forEach((e) => e.removeAttribute("aria-selected")), l[a].setAttribute("aria-selected", "true");
397
- let i = l[a].id || `${this.selectors.idPrefix}${a}`;
398
- e.setAttribute("aria-activedescendant", i), r.value = String(l[a].dataset.value), this.customEvent(e, r.value), this.close(e, t);
403
+ o && o.focus();
404
+ let s = Array.from(t.querySelectorAll(`.${this.selectors.items} ul li`)), c = this.filterExcluded(s, this.selectors.excludedItems).filter((e) => !e.hidden), l = c.length;
405
+ if (l === 0) return;
406
+ let u = c.findIndex((e) => e.getAttribute("aria-selected") === "true"), d = (t) => {
407
+ let r = c[t];
408
+ n.textContent = r.textContent, s.forEach((e) => e.removeAttribute("aria-selected")), r.setAttribute("aria-selected", "true"), e.setAttribute("aria-activedescendant", r.id || `${this.selectors.idPrefix}${t}`), r.scrollIntoView({ block: "nearest" });
409
+ };
410
+ if (i.key === "ArrowDown") i.preventDefault(), t.hidden && this.toggle(e, t), d((u + 1) % l);
411
+ else if (i.key === "ArrowUp") i.preventDefault(), d(u <= 0 ? l - 1 : u - 1);
412
+ else if (i.key === "Enter") if (i.preventDefault(), t.hidden) this.toggle(e, t);
413
+ else if (u >= 0) {
414
+ let i = c[u];
415
+ n.textContent = i.textContent, e.setAttribute("aria-activedescendant", i.id || `${this.selectors.idPrefix}${u}`), r.value = String(i.dataset.value), this.customEvent(e, r.value), this.close(e, t);
399
416
  } else this.toggle(e, t);
400
- else i.key === "Escape" && (e.getAttribute("aria-activedescendant") || (n.textContent = o), this.close(e, t));
417
+ else i.key === "Escape" && (e.getAttribute("aria-activedescendant") || (n.textContent = a), this.close(e, t));
401
418
  }, { signal: i });
402
419
  }
403
420
  itemsPosition(e) {
@@ -438,7 +455,7 @@ var e = class {
438
455
  static closeAll(e) {
439
456
  document.querySelectorAll(`.${e.main}`).forEach((t) => {
440
457
  let n = t.querySelector(`.${e.optionsList}`);
441
- n.hidden = !0, t.setAttribute("aria-expanded", "false");
458
+ n && (n.hidden = !0, t.setAttribute("aria-expanded", "false"));
442
459
  });
443
460
  }
444
461
  initGlobalListener(t) {
@@ -481,62 +498,73 @@ var e = class {
481
498
  destroy() {
482
499
  this.observer?.disconnect(), this.observer = null, this.rescanTimer !== null && (clearTimeout(this.rescanTimer), this.rescanTimer = null), this.abortController.abort(), this.main?.forEach((e) => delete e.dataset.uibgBound), this.main = null, this.abortController = new AbortController();
483
500
  }
484
- setValue(e, t) {
485
- let n = e.querySelectorAll(`.${this.selectors.input}`), r = e.querySelectorAll(`.${this.selectors.btn}`), i = Array.from(n).findIndex((e) => e.value === t && !e.disabled);
486
- if (i === -1) {
501
+ setValue(e, t, { silent: n = !1, flash: r = !0 } = {}) {
502
+ let i = e.querySelectorAll(`.${this.selectors.input}`), a = e.querySelectorAll(`.${this.selectors.btn}`), o = Array.from(i).findIndex((e) => e.value === t && !e.disabled);
503
+ if (o === -1) {
487
504
  this.debug && console.warn(`UIButtonGroup: value "${t}" not found or disabled`);
488
505
  return;
489
506
  }
490
- n.forEach((e, t) => {
491
- e.checked = t === i, t === i ? e.setAttribute("checked", "") : e.removeAttribute("checked");
492
- }), r.forEach((e, t) => {
493
- e.setAttribute("aria-checked", String(t === i)), e.setAttribute("tabindex", t === i ? "0" : "-1");
494
- }), this.customEvent(n[i]);
495
- let a = r[i];
496
- a && !e.closest(".ui-no-flash") && (a.classList.remove("UIbg--flash"), a.offsetWidth, a.classList.add("UIbg--flash"), a.addEventListener("animationend", () => a.classList.remove("UIbg--flash"), { once: !0 }));
507
+ i.forEach((e, t) => {
508
+ e.checked = t === o, t === o ? e.setAttribute("checked", "") : e.removeAttribute("checked");
509
+ }), a.forEach((e, t) => {
510
+ e.setAttribute("aria-checked", String(t === o)), e.setAttribute("tabindex", t === o ? "0" : "-1");
511
+ }), n || this.customEvent(i[o]);
512
+ let s = a[o];
513
+ r && s && !e.closest(".ui-no-flash") && (s.classList.remove("UIbg--flash"), s.offsetWidth, s.classList.add("UIbg--flash"), s.addEventListener("animationend", () => s.classList.remove("UIbg--flash"), { once: !0 }));
497
514
  }
498
515
  scan() {
499
516
  this.main = this.root.querySelectorAll(`.${this.selectors.main}`);
500
517
  let e = this.abortController.signal;
501
518
  this.main.forEach((t) => {
502
519
  if (t.dataset.uibgBound) return;
503
- t.dataset.uibgBound = "1", t.querySelectorAll(`.${this.selectors.input}`).forEach((e) => {
520
+ t.dataset.uibgBound = "1";
521
+ let n = t.querySelectorAll(`.${this.selectors.input}`);
522
+ n.forEach((e) => {
504
523
  e.hasAttribute("data-originally-disabled") || e.setAttribute("data-originally-disabled", String(e.disabled)), e.disabled = e.getAttribute("data-originally-disabled") === "true";
505
524
  }), t.removeAttribute("aria-disabled");
506
- let n = t.querySelector(`.${this.selectors.input}:checked`);
507
- n && this.customEvent(n);
508
- let r = t.querySelectorAll(`.${this.selectors.btn}`);
509
- r.forEach((t) => {
525
+ let r = t.querySelector(`.${this.selectors.input}:checked`);
526
+ r && this.customEvent(r);
527
+ let i = t.querySelectorAll(`.${this.selectors.btn}`), a = (e) => {
528
+ let t = n[e], r = i[e];
529
+ !t || t.disabled || !r || (n.forEach((e) => {
530
+ e.checked = !1, e.removeAttribute("checked");
531
+ }), t.checked = !0, t.setAttribute("checked", ""), i.forEach((e) => {
532
+ e.setAttribute("aria-checked", "false"), e.setAttribute("tabindex", "-1");
533
+ }), r.setAttribute("aria-checked", "true"), r.setAttribute("tabindex", "0"), r.focus(), this.ripple(r), this.customEvent(t));
534
+ };
535
+ i.forEach((t, r) => {
510
536
  t.addEventListener("click", () => {
511
- r.forEach((e) => {
537
+ let e = n[r];
538
+ !e || e.disabled || (i.forEach((e) => {
512
539
  e.setAttribute("aria-checked", "false"), e.setAttribute("tabindex", "-1");
513
- }), t.setAttribute("aria-checked", "true"), t.setAttribute("tabindex", "0"), t.focus(), this.ripple(t);
540
+ }), t.setAttribute("aria-checked", "true"), t.setAttribute("tabindex", "0"), t.focus(), this.ripple(t));
514
541
  }, { signal: e }), t.addEventListener("keydown", (e) => {
515
- let n = Array.from(r).indexOf(t);
516
- if (e.key === "ArrowRight" && n++, e.key === "ArrowLeft" && n--, n < 0 && (n = r.length - 1), n >= r.length && (n = 0), e.key === "Enter") {
517
- let t = i[n];
518
- t && !t.disabled && (i.forEach((e) => {
519
- e.checked = !1, e.removeAttribute("checked");
520
- }), t.checked = !0, t.setAttribute("checked", ""), this.customEvent(t)), e.preventDefault();
542
+ let r = Array.from(i).indexOf(t);
543
+ if (e.key === " " || e.key === "Enter") {
544
+ e.preventDefault(), a(r);
521
545
  return;
522
546
  }
523
- let a = r[n];
524
- a && (r.forEach((e) => e.setAttribute("tabindex", "-1")), a.setAttribute("tabindex", "0"), a.focus());
547
+ let o = 0;
548
+ if (e.key === "ArrowRight" || e.key === "ArrowDown") o = 1;
549
+ else if (e.key === "ArrowLeft" || e.key === "ArrowUp") o = -1;
550
+ else return;
551
+ e.preventDefault();
552
+ let s = r;
553
+ for (let e = 0; e < i.length && (s += o, s < 0 && (s = i.length - 1), s >= i.length && (s = 0), !(n[s] && !n[s].disabled)); e++);
554
+ s !== r && a(s);
525
555
  }, { signal: e });
526
- });
527
- let i = t.querySelectorAll(`.${this.selectors.input}`);
528
- i.forEach((t, n) => {
529
- this.debug && (t.id || console.error(`Input #${n} in group has no ID!`), (!t.value || t.value === "on") && console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));
530
- let a = r[n];
556
+ }), n.forEach((t, r) => {
557
+ this.debug && (t.id || console.error(`Input #${r} in group has no ID!`), (!t.value || t.value === "on") && console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));
558
+ let a = i[r];
531
559
  a && (t.tabIndex = -1, a.setAttribute("role", "radio"), a.setAttribute("aria-checked", String(t.checked)), a.setAttribute("tabindex", t.checked ? "0" : "-1"), t.disabled ? a.setAttribute("aria-disabled", "true") : a.removeAttribute("aria-disabled"), t.addEventListener("click", () => {
532
- i.forEach((e) => {
560
+ n.forEach((e) => {
533
561
  e.checked = !1, e.removeAttribute("checked");
534
- }), i[n].checked = !0, i[n].setAttribute("checked", ""), this.customEvent(t);
562
+ }), n[r].checked = !0, n[r].setAttribute("checked", ""), this.customEvent(t);
535
563
  }, { signal: e }));
536
564
  });
537
- let a = Array.from(i).find((e) => e.checked && !e.disabled) || Array.from(i).find((e) => !e.disabled);
538
- if (a) {
539
- let e = t.querySelector(`label[for="${a.id}"]`);
565
+ let o = Array.from(n).find((e) => e.checked && !e.disabled) || Array.from(n).find((e) => !e.disabled);
566
+ if (o) {
567
+ let e = t.querySelector(`label[for="${o.id}"]`);
540
568
  e && e.setAttribute("tabindex", "0");
541
569
  }
542
570
  });
@@ -581,8 +609,8 @@ var e = class {
581
609
  subtree: !0
582
610
  });
583
611
  }
584
- setValue(e, t, n) {
585
- e.dataset.value = t, e.tagName === "A" && (e.href = t), n !== void 0 && (e.textContent = n), !e.closest(".ui-no-flash") && (e.classList.remove("UIb--flash"), e.offsetWidth, e.classList.add("UIb--flash"), e.addEventListener("animationend", () => e.classList.remove("UIb--flash"), { once: !0 }));
612
+ setValue(e, t, { flash: n = !0, label: r } = {}) {
613
+ e.dataset.value = t, e.tagName === "A" && (e.href = t), r !== void 0 && (e.textContent = r), !(!n || e.closest(".ui-no-flash")) && (e.classList.remove("UIb--flash"), e.offsetWidth, e.classList.add("UIb--flash"), e.addEventListener("animationend", () => e.classList.remove("UIb--flash"), { once: !0 }));
586
614
  }
587
615
  destroy() {
588
616
  this.observer?.disconnect(), this.observer = null, this.rescanTimer !== null && (clearTimeout(this.rescanTimer), this.rescanTimer = null), this.abortController.abort(), this.buttons?.forEach((e) => delete e.dataset.uibBound), this.buttons = null, this.abortController = new AbortController();
@@ -608,7 +636,11 @@ var e = class {
608
636
  e.preventDefault(), e.stopImmediatePropagation();
609
637
  return;
610
638
  }
611
- t.tagName === "A" && e.preventDefault(), this.ripple(t), this.customEvent(t, String(t.dataset.value));
639
+ if (t.tagName === "A") {
640
+ let n = t.getAttribute("href");
641
+ (!n || n === "#") && e.preventDefault();
642
+ }
643
+ this.ripple(t), this.customEvent(t, String(t.dataset.value));
612
644
  }, { signal: e }));
613
645
  });
614
646
  }
@@ -617,7 +649,7 @@ var e = class {
617
649
  }
618
650
  customEvent(e, t) {
619
651
  if (!t || t === "undefined" || t.trim() === "") {
620
- console.warn("Button data-value=\"\" Not set!");
652
+ this.debug && console.warn("Button data-value=\"\" Not set!");
621
653
  return;
622
654
  }
623
655
  let n = {
@@ -629,24 +661,43 @@ var e = class {
629
661
  };
630
662
  this.debug && console.info("Button CustomEvent:", n.detail), e.dispatchEvent(new CustomEvent("ui-button-change", n));
631
663
  }
632
- }, a = null, o = null, s = null, c = null, l = null;
633
- function u(...e) {
634
- return a ??= new i(...e);
664
+ };
665
+ //#endregion
666
+ //#region src/questionLabel.ts
667
+ function a(e = document) {
668
+ let t = new AbortController(), n = () => 15 * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16), r = (e) => {
669
+ let t = e.querySelector(".UIql__text");
670
+ if (!t) return;
671
+ let r = e.getBoundingClientRect(), i = r.left + r.width / 2, a = document.documentElement.clientWidth, o = n(), s = i - 8, c = a - i - 8;
672
+ e.classList.remove("UIql--left", "UIql--right"), i - o / 2 >= 8 && i + o / 2 <= a - 8 ? t.style.maxWidth = "" : c >= s ? (e.classList.add("UIql--right"), t.style.maxWidth = `${Math.min(o, c)}px`) : (e.classList.add("UIql--left"), t.style.maxWidth = `${Math.min(o, s)}px`);
673
+ }, i = (e) => {
674
+ let t = e.target?.closest?.(".UIql");
675
+ t && r(t);
676
+ };
677
+ return e.addEventListener("pointerover", i, { signal: t.signal }), e.addEventListener("focusin", i, { signal: t.signal }), window.addEventListener("resize", () => {
678
+ e.querySelectorAll(".UIql:hover, .UIql:focus").forEach(r);
679
+ }, { signal: t.signal }), () => t.abort();
635
680
  }
681
+ //#endregion
682
+ //#region src/index.ts
683
+ var o = null, s = null, c = null, l = null, u = null;
636
684
  function d(...e) {
637
- return l ??= new r(...e);
685
+ return o ??= new i(...e);
638
686
  }
639
687
  function f(...e) {
640
- return o ??= new n(...e);
688
+ return u ??= new r(...e);
689
+ }
690
+ function p(...e) {
691
+ return s ??= new n(...e);
641
692
  }
642
- function p(...t) {
643
- return s ??= new e(...t);
693
+ function m(...t) {
694
+ return c ??= new e(...t);
644
695
  }
645
- function m(...e) {
646
- return c ??= new t(...e);
696
+ function h(...e) {
697
+ return l ??= new t(...e);
647
698
  }
648
- function h() {
649
- a = null, o = null, s = null, c = null, l = null;
699
+ function g() {
700
+ o?.destroy(), u?.destroy(), s?.dispose(), c?.destroy(), l?.destroy(), o = null, s = null, c = null, l = null, u = null;
650
701
  }
651
702
  //#endregion
652
- export { i as Button, r as ButtonGroup, n as Select, e as SpinBox, t as Switch, d as getButtonGroupManager, u as getButtonManager, f as getSelectManager, p as getSpinBoxManager, m as getSwitchManager, h as resetManagers };
703
+ export { i as Button, r as ButtonGroup, n as Select, e as SpinBox, t as Switch, f as getButtonGroupManager, d as getButtonManager, p as getSelectManager, m as getSpinBoxManager, h as getSwitchManager, a as initQuestionTooltips, g as resetManagers };
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
1
- (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UiElements={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class{selectors;spinBoxes=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.spinBoxes?.forEach(e=>delete e.dataset.uispBound),this.spinBoxes=null,this.abortController=new AbortController}disableEl(e){let t=e.querySelector(`.${this.selectors.input}`),n=e.querySelectorAll(`.${this.selectors.btn}`);t&&(t.disabled=!0),n.forEach(e=>{e.classList.add(this.selectors.disabledBtn),e.disabled=!0}),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=e.querySelector(`.${this.selectors.input}`);if(!n){this.debug&&console.warn(`UISpinBox: input not found`);return}n.value=String(t),n.dispatchEvent(new Event(`change`)),!e.closest(`.ui-no-flash`)&&(e.classList.remove(`UIsp--flash`),e.offsetWidth,e.classList.add(`UIsp--flash`),n.addEventListener(`animationend`,()=>e.classList.remove(`UIsp--flash`),{once:!0}))}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};scan(){this.spinBoxes=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.spinBoxes.forEach(t=>{if(t.dataset.uispBound)return;t.dataset.uispBound=`1`;let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.debug&&(r||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));let a=r[0],o=r[1];i.disabled=!1,[a,o].forEach(e=>{e.classList.remove(this.selectors.disabledBtn),e.disabled=!1}),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`);let s=t.hasAttribute(`data-decimals`)?this.getValidDataNumber(t,`decimals`):this.getValidDataNumber(t,`step`),c=Math.min(Math.max(Math.trunc(s),0),100),l=this.getValidDataNumber(t,`min`),u=this.getValidDataNumber(t,`max`);if(t.hasAttribute(`data-disabled`)){Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):Number(i.value)>=u&&(i.value=u.toFixed(c)),this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}let d=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,`${e} items`)};Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):(Number(i.value)>=u&&(i.value=u.toFixed(c)),u&&t.setAttribute(`aria-valuemax`,u.toFixed(c))),l&&t.setAttribute(`aria-valuemin`,l.toFixed(c)),this.state(Number(i.value),a,o,l,u),d(i.value);let f=null,p=(e,t=1)=>{i.value=String(Math.abs(Number(i.value)));let n=parseFloat(i.value)||0;return n+=e*t/10**c,e===1&&u!==0&&n>u&&(n=u),e===-1&&n<l&&(n=l),i.value=n.toFixed(c),this.state(Number(i.value),a,o,l,u),d(i.value),i.value},m=(e,t=150)=>{f===null&&(f=window.setInterval(e,t))},h=()=>{f!==null&&(clearInterval(f),f=null)};o.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;m(()=>p(1,t))},{signal:e}),o.addEventListener(`touchstart`,()=>m(()=>p(1)),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{o.addEventListener(t,h,{signal:e})}),o.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;f===null&&(n=p(1,t),this.ripple(o),this.customEvent(i,n))},{signal:e}),a.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;f===null&&(n=p(-1,t),this.ripple(a),this.customEvent(i,n))},{signal:e}),a.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;m(()=>p(-1,t),100)},{signal:e}),a.addEventListener(`touchstart`,()=>m(()=>p(-1),100),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{a.addEventListener(t,h,{signal:e})}),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`,`-`].includes(t)){e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),p(t===`ArrowUp`?1:-1,n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,s=i.value.includes(`.`);(c===0&&!a||c>0&&!(a||o)||o&&s)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.customEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>{Number(i.value)<l&&(i.value=l.toFixed(c)),Number(i.value)>u&&u!==0?i.value=u.toFixed(c):i.value=Number(i.value).toFixed(c),this.state(Number(i.value),a,o,l,u),this.customEvent(i,i.value)},{signal:e})})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},n=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsw`,label:`UIsw-label`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiswBound),this.main=null,this.abortController=new AbortController}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiswBound)return;t.dataset.uiswBound=`1`;let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(r?.disabled??!1));let i=t.getAttribute(`data-originally-disabled`)===`true`;r&&(r.disabled=!1),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),i&&(r&&(r.disabled=!0),t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let n=e.target.closest(`label`);n||(r.checked=!r.checked),n||r.dispatchEvent(new Event(`change`));let i=t.querySelector(`.UIsw-slider`);i&&this.ripple(i)},{signal:e}),t.addEventListener(`keydown`,e=>{if(r.disabled)return;let n=null;if(e.key===`ArrowRight`?n=!0:e.key===`ArrowLeft`&&(n=!1),n!==null&&(e.preventDefault(),r.checked!==n)){r.checked=n,r.dispatchEvent(new Event(`change`));let e=t.querySelector(`.UIsw-slider`);e&&this.ripple(e)}},{signal:e}))})}setValue(e,t){this.main?.forEach(n=>{let r=n.querySelector(`input#${e}`);if(r){r.checked=t,this.debug&&console.log(`SetValue:`,r.checked),n.setAttribute(`aria-checked`,String(t)),this.customEvent(r,String(t));let e=n.querySelector(`.UIsw-slider`);e&&!n.closest(`.ui-no-flash`)&&(n.classList.remove(`UIsw--flash`),n.offsetWidth,n.classList.add(`UIsw--flash`),e.addEventListener(`animationend`,()=>n.classList.remove(`UIsw--flash`),{once:!0}))}})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},r=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;globalAbortController=new AbortController;debug;root;observer=null;rescanTimer=null;selectMap=new Map;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIselect--flash`,excludedItems:[`divider`,`test`]};this.selectors={...r,...e},this.scan(),this.initGlobalListener(this.selectors),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),e.closeAll(this.selectors),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiselBound),this.selectMap.clear(),this.itemArrowInitialized=new WeakSet,this.main=null,this.abortController=new AbortController}dispose(){this.destroy(),this.globalAbortController.abort()}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=this.selectMap.get(e);if(!n){this.debug&&console.warn(`UISelect: element not registered`);return}let{input:r,selected:i}=n,a=e.querySelector(`.${this.selectors.optionsList}`);if(!a)return;let o=Array.from(a.querySelectorAll(`.${this.selectors.items} ul li`)),s=this.filterExcluded(o,this.selectors.excludedItems),c=s.find(e=>String(e.dataset.value)===String(t));if(!c){this.debug&&console.warn(`UISelect: value "${t}" not found`);return}s.forEach(e=>e.removeAttribute(`aria-selected`)),c.setAttribute(`aria-selected`,`true`),i.textContent=c.textContent??``,r.value=String(t),r.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,c.id||`${this.selectors.idPrefix}${s.indexOf(c)}`),this.customEvent(e,String(t)),e.closest(`.ui-no-flash`)||(e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiselBound)return;let n=t.querySelector(`input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YourUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}t.dataset.uiselBound=`1`;let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);if(t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),t.hasAttribute(`data-disabled`)){this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n),o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim(),l=o?new Set(this.filterSearch(c,o)):null;s.forEach(e=>{e.hidden=l?!l.has(e):!1}),this.itemArrow(t,a,r,n,e)},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=-1,o=n.textContent?n.textContent:``,s=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{if(i.key===`Tab`){this.close(e,t);return}s&&s.focus();let c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.length;if(u!==0)if(i.key===`ArrowDown`){i.preventDefault(),e.getAttribute(`aria-expanded`)===`false`&&this.toggle(e,t),a=(a+1)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let r=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,r),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`ArrowUp`){i.preventDefault(),a=(a-1+u)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let t=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,t),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`Enter`)if(i.preventDefault(),a>=0){n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let i=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,i),r.value=String(l[a].dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=o),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n.hidden=!0,t.setAttribute(`aria-expanded`,`false`)})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.globalAbortController.signal})}},i=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uibgBound),this.main=null,this.abortController=new AbortController}setValue(e,t){let n=e.querySelectorAll(`.${this.selectors.input}`),r=e.querySelectorAll(`.${this.selectors.btn}`),i=Array.from(n).findIndex(e=>e.value===t&&!e.disabled);if(i===-1){this.debug&&console.warn(`UIButtonGroup: value "${t}" not found or disabled`);return}n.forEach((e,t)=>{e.checked=t===i,t===i?e.setAttribute(`checked`,``):e.removeAttribute(`checked`)}),r.forEach((e,t)=>{e.setAttribute(`aria-checked`,String(t===i)),e.setAttribute(`tabindex`,t===i?`0`:`-1`)}),this.customEvent(n[i]);let a=r[i];a&&!e.closest(`.ui-no-flash`)&&(a.classList.remove(`UIbg--flash`),a.offsetWidth,a.classList.add(`UIbg--flash`),a.addEventListener(`animationend`,()=>a.classList.remove(`UIbg--flash`),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uibgBound)return;t.dataset.uibgBound=`1`,t.querySelectorAll(`.${this.selectors.input}`).forEach(e=>{e.hasAttribute(`data-originally-disabled`)||e.setAttribute(`data-originally-disabled`,String(e.disabled)),e.disabled=e.getAttribute(`data-originally-disabled`)===`true`}),t.removeAttribute(`aria-disabled`);let n=t.querySelector(`.${this.selectors.input}:checked`);n&&this.customEvent(n);let r=t.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener(`click`,()=>{r.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus(),this.ripple(t)},{signal:e}),t.addEventListener(`keydown`,e=>{let n=Array.from(r).indexOf(t);if(e.key===`ArrowRight`&&n++,e.key===`ArrowLeft`&&n--,n<0&&(n=r.length-1),n>=r.length&&(n=0),e.key===`Enter`){let t=i[n];t&&!t.disabled&&(i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),this.customEvent(t)),e.preventDefault();return}let a=r[n];a&&(r.forEach(e=>e.setAttribute(`tabindex`,`-1`)),a.setAttribute(`tabindex`,`0`),a.focus())},{signal:e})});let i=t.querySelectorAll(`.${this.selectors.input}`);i.forEach((t,n)=>{this.debug&&(t.id||console.error(`Input #${n} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=r[n];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),i[n].checked=!0,i[n].setAttribute(`checked`,``),this.customEvent(t)},{signal:e}))});let a=Array.from(i).find(e=>e.checked&&!e.disabled)||Array.from(i).find(e=>!e.disabled);if(a){let e=t.querySelector(`label[for="${a.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.debug&&console.log(`CustomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}},a=class{selectors;buttons=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIb`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}setValue(e,t,n){e.dataset.value=t,e.tagName===`A`&&(e.href=t),n!==void 0&&(e.textContent=n),!e.closest(`.ui-no-flash`)&&(e.classList.remove(`UIb--flash`),e.offsetWidth,e.classList.add(`UIb--flash`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--flash`),{once:!0}))}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.buttons?.forEach(e=>delete e.dataset.uibBound),this.buttons=null,this.abortController=new AbortController}disableEl(e){e.tagName===`BUTTON`?e.disabled=!0:(e.setAttribute(`aria-disabled`,`true`),e.setAttribute(`tabindex`,`-1`))}enableEl(e){e.tagName===`BUTTON`?e.disabled=!1:(e.removeAttribute(`aria-disabled`),e.setAttribute(`tabindex`,`0`))}isDisabled(e){return e.tagName===`BUTTON`?e.disabled:e.getAttribute(`aria-disabled`)===`true`}setDisabled(e,t){e.setAttribute(`data-originally-disabled`,String(t)),t?this.disableEl(e):this.enableEl(e)}scan(){this.buttons=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.buttons.forEach(t=>{t.dataset.uibBound||(t.dataset.uibBound=`1`,t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(this.isDisabled(t))),t.getAttribute(`data-originally-disabled`)===`true`?this.disableEl(t):this.enableEl(t),t.addEventListener(`click`,e=>{if(this.isDisabled(t)){e.preventDefault(),e.stopImmediatePropagation();return}t.tagName===`A`&&e.preventDefault(),this.ripple(t),this.customEvent(t,String(t.dataset.value))},{signal:e}))})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`UIb--ripple`),e.offsetWidth,e.classList.add(`UIb--ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--ripple`),{once:!0}))}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}},o=null,s=null,c=null,l=null,u=null;function d(...e){return o??=new a(...e)}function f(...e){return u??=new i(...e)}function p(...e){return s??=new r(...e)}function m(...e){return c??=new t(...e)}function h(...e){return l??=new n(...e)}function g(){o=null,s=null,c=null,l=null,u=null}e.Button=a,e.ButtonGroup=i,e.Select=r,e.SpinBox=t,e.Switch=n,e.getButtonGroupManager=f,e.getButtonManager=d,e.getSelectManager=p,e.getSpinBoxManager=m,e.getSwitchManager=h,e.resetManagers=g});
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UiElements={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class{selectors;spinBoxes=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;valueControls=new WeakMap;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.spinBoxes?.forEach(e=>{delete e.dataset.uispBound,this.valueControls.delete(e)}),this.spinBoxes=null,this.abortController=new AbortController}disableEl(e){let t=e.querySelector(`.${this.selectors.input}`),n=e.querySelectorAll(`.${this.selectors.btn}`);t&&(t.disabled=!0),n.forEach(e=>{e.classList.add(this.selectors.disabledBtn),e.disabled=!0}),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelector(`.${this.selectors.input}`);if(!i){this.debug&&console.warn(`UISpinBox: input not found`);return}if(n){let n=this.valueControls.get(e);n?n(t,!0):i.value=String(t)}else i.value=String(t),i.dispatchEvent(new Event(`change`));r&&this.playFlash(e,i)}playFlash(e,t){e.closest(`.ui-no-flash`)||(e.classList.remove(`UIsp--flash`),e.offsetWidth,e.classList.add(`UIsp--flash`),t.addEventListener(`animationend`,()=>e.classList.remove(`UIsp--flash`),{once:!0}))}refresh(e){let t=this.valueControls.get(e);if(!t){this.debug&&console.warn(`UISpinBox: element not bound`);return}let n=e.querySelector(`.${this.selectors.input}`);if(!n){this.debug&&console.warn(`UISpinBox: input not found`);return}t(n.value,!0)}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};scan(){this.spinBoxes=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.spinBoxes.forEach(t=>{if(t.dataset.uispBound)return;t.dataset.uispBound=`1`;let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`),a=r[0],o=r[1];if(!i||!a||!o){this.debug&&(r.length<2&&console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));return}i.disabled=!1,[a,o].forEach(e=>{e.classList.remove(this.selectors.disabledBtn),e.disabled=!1}),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`);let s=t.hasAttribute(`data-decimals`)?this.getValidDataNumber(t,`decimals`):this.getValidDataNumber(t,`step`),c=Math.min(Math.max(Math.trunc(s),0),100),l=this.getValidDataNumber(t,`min`),u=this.getValidDataNumber(t,`max`),d=t.hasAttribute(`data-negative`);if(t.hasAttribute(`data-disabled`)){Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):Number(i.value)>=u&&(i.value=u.toFixed(c)),this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}let f=t.getAttribute(`data-unit`)?.trim(),p=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,f?`${e} ${f}`:String(e))},m=(e,t)=>{let n=Number(e);Number.isNaN(n)&&(n=l),n<l&&(n=l),u!==0&&n>u&&(n=u),i.value=n.toFixed(c),this.state(n,a,o,l,u),p(i.value),t||this.customEvent(i,i.value)};this.valueControls.set(t,m),Number(i.value)<=l&&(i.value=l.toFixed(c)),u===0?i.value=Number(i.value).toFixed(c):(Number(i.value)>=u&&(i.value=u.toFixed(c)),u&&t.setAttribute(`aria-valuemax`,u.toFixed(c))),l&&t.setAttribute(`aria-valuemin`,l.toFixed(c)),this.state(Number(i.value),a,o,l,u),p(i.value);let h=null,g=(e,t=1)=>{d||(i.value=String(Math.abs(Number(i.value))));let n=parseFloat(i.value)||0;return n+=e*t/10**c,e===1&&u!==0&&n>u&&(n=u),e===-1&&n<l&&(n=l),i.value=n.toFixed(c),this.state(Number(i.value),a,o,l,u),p(i.value),i.value},_=!1,v=(e,t=150)=>{h===null&&(_=!1,h=window.setInterval(e,t))},y=()=>{h!==null&&(clearInterval(h),h=null,_&&this.customEvent(i,i.value))},b=(e,t,n)=>{_=!0,g(e,t),n.disabled&&(y(),_=!1)},x=(t,r,a)=>{t.addEventListener(`mousedown`,e=>{let n=e.shiftKey?3:1;v(()=>b(r,n,t),a)},{signal:e}),t.addEventListener(`touchstart`,()=>v(()=>b(r,1,t),a),{signal:e}),[`mouseup`,`touchend`].forEach(n=>{t.addEventListener(n,y,{signal:e})}),[`mouseleave`,`touchcancel`].forEach(n=>{t.addEventListener(n,()=>{y(),_=!1},{signal:e})}),t.addEventListener(`click`,e=>{if(_){_=!1;return}h===null&&(n=g(r,e.shiftKey?3:1),this.ripple(t),this.customEvent(i,n))},{signal:e})};x(o,1,150),x(a,-1,100),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`].includes(t)){e.preventDefault();return}if(t===`-`){let t=i.selectionStart===0,n=(i.selectionEnd??0)>0;(!d||!t||i.value.includes(`-`)&&!n)&&e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),g(t===`ArrowUp`?1:-1,n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,s=i.value.includes(`.`);(c===0&&!a||c>0&&!(a||o)||o&&s)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.customEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>m(i.value,!1),{signal:e})})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},n=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIsw`,label:`UIsw-label`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiswBound),this.main=null,this.abortController=new AbortController}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiswBound)return;t.dataset.uiswBound=`1`;let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(r?.disabled??!1));let i=t.getAttribute(`data-originally-disabled`)===`true`;r&&(r.disabled=!1),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),i&&(r&&(r.disabled=!0),t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let n=e.target.closest(`label`);n||(r.checked=!r.checked),n||r.dispatchEvent(new Event(`change`));let i=t.querySelector(`.UIsw-slider`);i&&this.ripple(i)},{signal:e}),t.addEventListener(`keydown`,e=>{if(r.disabled)return;let n=null;if(e.key===`ArrowRight`?n=!0:e.key===`ArrowLeft`?n=!1:(e.key===` `||e.key===`Enter`)&&(n=!r.checked),n!==null&&(e.preventDefault(),r.checked!==n)){r.checked=n,r.dispatchEvent(new Event(`change`));let e=t.querySelector(`.UIsw-slider`);e&&this.ripple(e)}},{signal:e}))})}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelector(`input`);if(!i){this.debug&&console.warn(`UISwitch: input not found`);return}i.checked=t,this.debug&&console.log(`SetValue:`,i.checked),e.setAttribute(`aria-checked`,String(t)),n||this.customEvent(i,String(t));let a=e.querySelector(`.UIsw-slider`);r&&a&&!e.closest(`.ui-no-flash`)&&(e.classList.remove(`UIsw--flash`),e.offsetWidth,e.classList.add(`UIsw--flash`),a.addEventListener(`animationend`,()=>e.classList.remove(`UIsw--flash`),{once:!0}))}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},r=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;globalAbortController=new AbortController;debug;root;observer=null;rescanTimer=null;selectMap=new Map;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIselect--flash`,excludedItems:[`divider`,`test`]};this.selectors={...r,...e},this.scan(),this.initGlobalListener(this.selectors),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),e.closeAll(this.selectors),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uiselBound),this.selectMap.clear(),this.itemArrowInitialized=new WeakSet,this.main=null,this.abortController=new AbortController}dispose(){this.destroy(),this.globalAbortController.abort()}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=this.selectMap.get(e);if(!i){this.debug&&console.warn(`UISelect: element not registered`);return}let{input:a,selected:o}=i,s=e.querySelector(`.${this.selectors.optionsList}`);if(!s)return;let c=Array.from(s.querySelectorAll(`.${this.selectors.items} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.find(e=>String(e.dataset.value)===String(t));if(!u){this.debug&&console.warn(`UISelect: value "${t}" not found`);return}l.forEach(e=>e.removeAttribute(`aria-selected`)),u.setAttribute(`aria-selected`,`true`),o.textContent=u.textContent??``,a.value=String(t),a.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,u.id||`${this.selectors.idPrefix}${l.indexOf(u)}`),n||this.customEvent(e,String(t)),r&&!e.closest(`.ui-no-flash`)&&(e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uiselBound)return;let n=t.querySelector(`input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YourUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}t.dataset.uiselBound=`1`;let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);if(t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),t.hasAttribute(`data-disabled`)){this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n),o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim(),l=o?new Set(this.filterSearch(c,o)):null;s.forEach(e=>{e.hidden=l?!l.has(e):!1}),this.itemArrow(t,a,r,n,e)},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=n.textContent?n.textContent:``,o=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{if(i.key===`Tab`){this.close(e,t);return}o&&o.focus();let s=Array.from(t.querySelectorAll(`.${this.selectors.items} ul li`)),c=this.filterExcluded(s,this.selectors.excludedItems).filter(e=>!e.hidden),l=c.length;if(l===0)return;let u=c.findIndex(e=>e.getAttribute(`aria-selected`)===`true`),d=t=>{let r=c[t];n.textContent=r.textContent,s.forEach(e=>e.removeAttribute(`aria-selected`)),r.setAttribute(`aria-selected`,`true`),e.setAttribute(`aria-activedescendant`,r.id||`${this.selectors.idPrefix}${t}`),r.scrollIntoView({block:`nearest`})};if(i.key===`ArrowDown`)i.preventDefault(),t.hidden&&this.toggle(e,t),d((u+1)%l);else if(i.key===`ArrowUp`)i.preventDefault(),d(u<=0?l-1:u-1);else if(i.key===`Enter`)if(i.preventDefault(),t.hidden)this.toggle(e,t);else if(u>=0){let i=c[u];n.textContent=i.textContent,e.setAttribute(`aria-activedescendant`,i.id||`${this.selectors.idPrefix}${u}`),r.value=String(i.dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=a),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n&&(n.hidden=!0,t.setAttribute(`aria-expanded`,`false`))})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.globalAbortController.signal})}},i=class{selectors;main=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.main?.forEach(e=>delete e.dataset.uibgBound),this.main=null,this.abortController=new AbortController}setValue(e,t,{silent:n=!1,flash:r=!0}={}){let i=e.querySelectorAll(`.${this.selectors.input}`),a=e.querySelectorAll(`.${this.selectors.btn}`),o=Array.from(i).findIndex(e=>e.value===t&&!e.disabled);if(o===-1){this.debug&&console.warn(`UIButtonGroup: value "${t}" not found or disabled`);return}i.forEach((e,t)=>{e.checked=t===o,t===o?e.setAttribute(`checked`,``):e.removeAttribute(`checked`)}),a.forEach((e,t)=>{e.setAttribute(`aria-checked`,String(t===o)),e.setAttribute(`tabindex`,t===o?`0`:`-1`)}),n||this.customEvent(i[o]);let s=a[o];r&&s&&!e.closest(`.ui-no-flash`)&&(s.classList.remove(`UIbg--flash`),s.offsetWidth,s.classList.add(`UIbg--flash`),s.addEventListener(`animationend`,()=>s.classList.remove(`UIbg--flash`),{once:!0}))}scan(){this.main=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.main.forEach(t=>{if(t.dataset.uibgBound)return;t.dataset.uibgBound=`1`;let n=t.querySelectorAll(`.${this.selectors.input}`);n.forEach(e=>{e.hasAttribute(`data-originally-disabled`)||e.setAttribute(`data-originally-disabled`,String(e.disabled)),e.disabled=e.getAttribute(`data-originally-disabled`)===`true`}),t.removeAttribute(`aria-disabled`);let r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.customEvent(r);let i=t.querySelectorAll(`.${this.selectors.btn}`),a=e=>{let t=n[e],r=i[e];!t||t.disabled||!r||(n.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),i.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),r.setAttribute(`aria-checked`,`true`),r.setAttribute(`tabindex`,`0`),r.focus(),this.ripple(r),this.customEvent(t))};i.forEach((t,r)=>{t.addEventListener(`click`,()=>{let e=n[r];!e||e.disabled||(i.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus(),this.ripple(t))},{signal:e}),t.addEventListener(`keydown`,e=>{let r=Array.from(i).indexOf(t);if(e.key===` `||e.key===`Enter`){e.preventDefault(),a(r);return}let o=0;if(e.key===`ArrowRight`||e.key===`ArrowDown`)o=1;else if(e.key===`ArrowLeft`||e.key===`ArrowUp`)o=-1;else return;e.preventDefault();let s=r;for(let e=0;e<i.length&&(s+=o,s<0&&(s=i.length-1),s>=i.length&&(s=0),!(n[s]&&!n[s].disabled));e++);s!==r&&a(s)},{signal:e})}),n.forEach((t,r)=>{this.debug&&(t.id||console.error(`Input #${r} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=i[r];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{n.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),n[r].checked=!0,n[r].setAttribute(`checked`,``),this.customEvent(t)},{signal:e}))});let o=Array.from(n).find(e=>e.checked&&!e.disabled)||Array.from(n).find(e=>!e.disabled);if(o){let e=t.querySelector(`label[for="${o.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`ui-ripple`),e.offsetWidth,e.classList.add(`ui-ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`ui-ripple`),{once:!0}))}customEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.debug&&console.log(`CustomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}},a=class{selectors;buttons=null;abortController=new AbortController;debug;root;observer=null;rescanTimer=null;constructor(e={},t=!1,n={}){this.debug=t,this.root=n.root??document;let r={main:`UIb`};this.selectors={...r,...e},this.scan(),n.observe&&this.observe()}observe(){let e=this.root===document?document.body:this.root;this.observer=new MutationObserver(()=>{this.rescanTimer===null&&(this.rescanTimer=window.setTimeout(()=>{this.rescanTimer=null,this.scan()},50))}),this.observer.observe(e,{childList:!0,subtree:!0})}setValue(e,t,{flash:n=!0,label:r}={}){e.dataset.value=t,e.tagName===`A`&&(e.href=t),r!==void 0&&(e.textContent=r),!(!n||e.closest(`.ui-no-flash`))&&(e.classList.remove(`UIb--flash`),e.offsetWidth,e.classList.add(`UIb--flash`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--flash`),{once:!0}))}destroy(){this.observer?.disconnect(),this.observer=null,this.rescanTimer!==null&&(clearTimeout(this.rescanTimer),this.rescanTimer=null),this.abortController.abort(),this.buttons?.forEach(e=>delete e.dataset.uibBound),this.buttons=null,this.abortController=new AbortController}disableEl(e){e.tagName===`BUTTON`?e.disabled=!0:(e.setAttribute(`aria-disabled`,`true`),e.setAttribute(`tabindex`,`-1`))}enableEl(e){e.tagName===`BUTTON`?e.disabled=!1:(e.removeAttribute(`aria-disabled`),e.setAttribute(`tabindex`,`0`))}isDisabled(e){return e.tagName===`BUTTON`?e.disabled:e.getAttribute(`aria-disabled`)===`true`}setDisabled(e,t){e.setAttribute(`data-originally-disabled`,String(t)),t?this.disableEl(e):this.enableEl(e)}scan(){this.buttons=this.root.querySelectorAll(`.${this.selectors.main}`);let e=this.abortController.signal;this.buttons.forEach(t=>{t.dataset.uibBound||(t.dataset.uibBound=`1`,t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(this.isDisabled(t))),t.getAttribute(`data-originally-disabled`)===`true`?this.disableEl(t):this.enableEl(t),t.addEventListener(`click`,e=>{if(this.isDisabled(t)){e.preventDefault(),e.stopImmediatePropagation();return}if(t.tagName===`A`){let n=t.getAttribute(`href`);(!n||n===`#`)&&e.preventDefault()}this.ripple(t),this.customEvent(t,String(t.dataset.value))},{signal:e}))})}ripple(e){e.closest(`.ui-no-ripple`)||(e.classList.remove(`UIb--ripple`),e.offsetWidth,e.classList.add(`UIb--ripple`),e.addEventListener(`animationend`,()=>e.classList.remove(`UIb--ripple`),{once:!0}))}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){this.debug&&console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.debug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}};function o(e=document){let t=new AbortController,n=()=>15*(parseFloat(getComputedStyle(document.documentElement).fontSize)||16),r=e=>{let t=e.querySelector(`.UIql__text`);if(!t)return;let r=e.getBoundingClientRect(),i=r.left+r.width/2,a=document.documentElement.clientWidth,o=n(),s=i-8,c=a-i-8;e.classList.remove(`UIql--left`,`UIql--right`),i-o/2>=8&&i+o/2<=a-8?t.style.maxWidth=``:c>=s?(e.classList.add(`UIql--right`),t.style.maxWidth=`${Math.min(o,c)}px`):(e.classList.add(`UIql--left`),t.style.maxWidth=`${Math.min(o,s)}px`)},i=e=>{let t=e.target?.closest?.(`.UIql`);t&&r(t)};return e.addEventListener(`pointerover`,i,{signal:t.signal}),e.addEventListener(`focusin`,i,{signal:t.signal}),window.addEventListener(`resize`,()=>{e.querySelectorAll(`.UIql:hover, .UIql:focus`).forEach(r)},{signal:t.signal}),()=>t.abort()}var s=null,c=null,l=null,u=null,d=null;function f(...e){return s??=new a(...e)}function p(...e){return d??=new i(...e)}function m(...e){return c??=new r(...e)}function h(...e){return l??=new t(...e)}function g(...e){return u??=new n(...e)}function _(){s?.destroy(),d?.destroy(),c?.dispose(),l?.destroy(),u?.destroy(),s=null,c=null,l=null,u=null,d=null}e.Button=a,e.ButtonGroup=i,e.Select=r,e.SpinBox=t,e.Switch=n,e.getButtonGroupManager=p,e.getButtonManager=f,e.getSelectManager=m,e.getSpinBoxManager=h,e.getSwitchManager=g,e.initQuestionTooltips=o,e.resetManagers=_});