@popovandrii/ui-elements 0.1.3 → 0.2.1

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.
Files changed (16) hide show
  1. package/README.md +334 -111
  2. package/dist/Button.d.ts +15 -3
  3. package/dist/ButtonGroup.d.ts +17 -5
  4. package/dist/Select.d.ts +18 -3
  5. package/dist/SpinBox.d.ts +16 -4
  6. package/dist/Switch.d.ts +15 -4
  7. package/dist/index.cjs.js +1 -1
  8. package/dist/index.d.ts +12 -0
  9. package/dist/index.es.js +219 -123
  10. package/dist/index.umd.js +1 -1
  11. package/dist/style.css +1 -1
  12. package/dist/theme-dark-neon.css +1 -1
  13. package/dist/theme-dark.css +1 -1
  14. package/dist/theme-light-neon.css +1 -1
  15. package/dist/theme-light.css +1 -1
  16. package/package.json +7 -3
package/dist/index.es.js CHANGED
@@ -1,27 +1,41 @@
1
1
  //#region src/SpinBox.ts
2
2
  var e = class {
3
3
  selectors;
4
- spinBoxes;
4
+ spinBoxes = null;
5
5
  abortController = new AbortController();
6
- dbug;
7
- constructor(e = {}, t = !1) {
8
- this.dbug = t;
9
- let n = {
6
+ debug;
7
+ root;
8
+ observer = null;
9
+ rescanTimer = null;
10
+ constructor(e = {}, t = !1, n = {}) {
11
+ this.debug = t, this.root = n.root ?? document;
12
+ let r = {
10
13
  main: "UIsp",
11
14
  btn: "UIsp__btn",
12
15
  input: "UIsp__input",
13
16
  disabledBtn: "disabled"
14
17
  };
15
18
  this.selectors = {
16
- ...n,
19
+ ...r,
17
20
  ...e
18
- }, this.spinBoxes = document.querySelectorAll(`.${this.selectors.main}`), this.event();
21
+ }, this.scan(), n.observe && this.observe();
22
+ }
23
+ observe() {
24
+ let e = this.root === document ? document.body : this.root;
25
+ this.observer = new MutationObserver(() => {
26
+ this.rescanTimer === null && (this.rescanTimer = window.setTimeout(() => {
27
+ this.rescanTimer = null, this.scan();
28
+ }, 50));
29
+ }), this.observer.observe(e, {
30
+ childList: !0,
31
+ subtree: !0
32
+ });
19
33
  }
20
34
  state = (e, t, n, r = 0, i = 0) => {
21
35
  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));
22
36
  };
23
37
  destroy() {
24
- this.spinBoxes?.forEach((e) => this.disableEl(e)), this.abortController && this.abortController.abort(), this.spinBoxes = null;
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();
25
39
  }
26
40
  disableEl(e) {
27
41
  let t = e.querySelector(`.${this.selectors.input}`), n = e.querySelectorAll(`.${this.selectors.btn}`);
@@ -32,7 +46,7 @@ var e = class {
32
46
  setValue(e, t) {
33
47
  let n = e.querySelector(`.${this.selectors.input}`);
34
48
  if (!n) {
35
- this.dbug && console.warn("UISpinBox: input not found");
49
+ this.debug && console.warn("UISpinBox: input not found");
36
50
  return;
37
51
  }
38
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 }));
@@ -41,19 +55,21 @@ var e = class {
41
55
  let n = e.getAttribute(`data-${t}`);
42
56
  return n === null || n.trim() === "" || isNaN(Number(n)) ? 0 : Number(n);
43
57
  };
44
- event() {
45
- this.abortController = new AbortController();
58
+ scan() {
59
+ this.spinBoxes = this.root.querySelectorAll(`.${this.selectors.main}`);
46
60
  let e = this.abortController.signal;
47
- this.spinBoxes?.forEach((t) => {
61
+ this.spinBoxes.forEach((t) => {
62
+ if (t.dataset.uispBound) return;
63
+ t.dataset.uispBound = "1";
48
64
  let n, r = t.querySelectorAll(`.${this.selectors.btn}`), i = t.querySelector(`.${this.selectors.input}`);
49
- this.dbug && (r || console.log(`Buttons (${this.selectors.btn}) not found in container`), i || console.log(`Input (${this.selectors.input}) not found in container`));
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`));
50
66
  let a = r[0], o = r[1];
51
67
  i.disabled = !1, [a, o].forEach((e) => {
52
68
  e.classList.remove(this.selectors.disabledBtn), e.disabled = !1;
53
69
  }), t.setAttribute("tabindex", "0"), t.removeAttribute("aria-disabled");
54
- let s = this.getValidDataNumber(t, "step"), c = this.getValidDataNumber(t, "min"), l = this.getValidDataNumber(t, "max");
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");
55
71
  if (t.hasAttribute("data-disabled")) {
56
- Number(i.value) <= c && (i.value = c.toFixed(s)), l === 0 ? i.value = Number(i.value).toFixed(s) : Number(i.value) >= l && (i.value = l.toFixed(s)), this.disableEl(t), t.addEventListener("click", (e) => {
72
+ 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) => {
57
73
  e.preventDefault(), e.stopImmediatePropagation();
58
74
  }, {
59
75
  capture: !0,
@@ -61,47 +77,47 @@ var e = class {
61
77
  });
62
78
  return;
63
79
  }
64
- let u = (e) => {
80
+ let d = (e) => {
65
81
  t.setAttribute("aria-valuenow", String(e)), t.setAttribute("aria-valuetext", `${e} items`);
66
82
  };
67
- Number(i.value) <= c && (i.value = c.toFixed(s)), l === 0 ? i.value = Number(i.value).toFixed(s) : (Number(i.value) >= l && (i.value = l.toFixed(s)), l && t.setAttribute("aria-valuemax", l.toFixed(s))), c && t.setAttribute("aria-valuemin", c.toFixed(s)), this.state(Number(i.value), a, o, c, l), u(i.value);
68
- let d = null, f = (e, t = 1) => {
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) => {
69
85
  i.value = String(Math.abs(Number(i.value)));
70
86
  let n = parseFloat(i.value) || 0;
71
- return n += e * t / 10 ** s, e === 1 && l !== 0 && n > l && (n = l), e === -1 && n < c && (n = c), i.value = n.toFixed(s), this.state(Number(i.value), a, o, c, l), u(i.value), i.value;
72
- }, p = (e, t = 150) => {
73
- d === null && (d = window.setInterval(e, t));
74
- }, m = () => {
75
- d !== null && (clearInterval(d), d = null);
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);
76
92
  };
77
93
  o.addEventListener("mousedown", (e) => {
78
94
  let t = e.shiftKey ? 3 : 1;
79
- p(() => f(1, t));
80
- }, { signal: e }), o.addEventListener("touchstart", () => p(() => f(1)), { signal: e }), [
95
+ m(() => p(1, t));
96
+ }, { signal: e }), o.addEventListener("touchstart", () => m(() => p(1)), { signal: e }), [
81
97
  "mouseup",
82
98
  "mouseleave",
83
99
  "mouseout",
84
100
  "touchend",
85
101
  "touchcancel"
86
102
  ].forEach((t) => {
87
- o.addEventListener(t, m, { signal: e });
103
+ o.addEventListener(t, h, { signal: e });
88
104
  }), o.addEventListener("click", (e) => {
89
105
  let t = e.shiftKey ? 3 : 1;
90
- d === null && (n = f(1, t), this.ripple(o), this.costomEvent(i, n));
106
+ f === null && (n = p(1, t), this.ripple(o), this.customEvent(i, n));
91
107
  }, { signal: e }), a.addEventListener("click", (e) => {
92
108
  let t = e.shiftKey ? 3 : 1;
93
- d === null && (n = f(-1, t), this.ripple(a), this.costomEvent(i, n));
109
+ f === null && (n = p(-1, t), this.ripple(a), this.customEvent(i, n));
94
110
  }, { signal: e }), a.addEventListener("mousedown", (e) => {
95
111
  let t = e.shiftKey ? 3 : 1;
96
- p(() => f(-1, t), 100);
97
- }, { signal: e }), a.addEventListener("touchstart", () => p(() => f(-1), 100), { signal: e }), [
112
+ m(() => p(-1, t), 100);
113
+ }, { signal: e }), a.addEventListener("touchstart", () => m(() => p(-1), 100), { signal: e }), [
98
114
  "mouseup",
99
115
  "mouseleave",
100
116
  "mouseout",
101
117
  "touchend",
102
118
  "touchcancel"
103
119
  ].forEach((t) => {
104
- a.addEventListener(t, m, { signal: e });
120
+ a.addEventListener(t, h, { signal: e });
105
121
  }), i.addEventListener("keydown", (e) => {
106
122
  let t = e.key, n = e.shiftKey ? 5 : 1;
107
123
  if ([
@@ -128,22 +144,22 @@ var e = class {
128
144
  return;
129
145
  }
130
146
  if (t === "ArrowUp" || t === "ArrowDown") {
131
- e.preventDefault(), f(t === "ArrowUp" ? 1 : -1, n);
147
+ e.preventDefault(), p(t === "ArrowUp" ? 1 : -1, n);
132
148
  return;
133
149
  }
134
- let r = t === "," ? "." : t, a = /^[0-9]$/.test(r), o = r === ".", c = i.value.includes(".");
135
- (s === 0 && !a || s > 0 && !(a || o) || o && c) && e.preventDefault();
150
+ let r = t === "," ? "." : t, a = /^[0-9]$/.test(r), o = r === ".", s = i.value.includes(".");
151
+ (c === 0 && !a || c > 0 && !(a || o) || o && s) && e.preventDefault();
136
152
  }, { signal: e }), i.addEventListener("keyup", (e) => {
137
- (e.key === "ArrowUp" || e.key === "ArrowDown") && this.costomEvent(i, i.value);
153
+ (e.key === "ArrowUp" || e.key === "ArrowDown") && this.customEvent(i, i.value);
138
154
  }, { signal: e }), i.addEventListener("change", () => {
139
- Number(i.value) < c && (i.value = c.toFixed(s)), Number(i.value) > l && l !== 0 ? i.value = l.toFixed(s) : i.value = Number(i.value).toFixed(s), this.state(Number(i.value), a, o, c, l), this.costomEvent(i, i.value);
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);
140
156
  }, { signal: e });
141
157
  });
142
158
  }
143
159
  ripple(e) {
144
160
  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 }));
145
161
  }
146
- costomEvent(e, t) {
162
+ customEvent(e, t) {
147
163
  let n = {
148
164
  detail: {
149
165
  id: e.id,
@@ -151,34 +167,47 @@ var e = class {
151
167
  },
152
168
  bubbles: !0
153
169
  };
154
- this.dbug && console.log("CostomEvent: data.detail ", n.detail), e.dispatchEvent(new CustomEvent("ui-spinbox-change", n));
170
+ this.debug && console.log("CustomEvent: data.detail ", n.detail), e.dispatchEvent(new CustomEvent("ui-spinbox-change", n));
155
171
  }
156
172
  }, t = class {
157
173
  selectors;
158
174
  main = null;
159
175
  abortController = new AbortController();
160
- dbug;
161
- constructor(e = {}, t = !1) {
162
- this.dbug = t;
163
- let n = {
176
+ debug;
177
+ root;
178
+ observer = null;
179
+ rescanTimer = null;
180
+ constructor(e = {}, t = !1, n = {}) {
181
+ this.debug = t, this.root = n.root ?? document;
182
+ let r = {
164
183
  main: "UIsw",
165
184
  label: "UIsw-label"
166
185
  };
167
186
  this.selectors = {
168
- ...n,
187
+ ...r,
169
188
  ...e
170
- }, this.main = document.querySelectorAll(`.${this.selectors.main}`), this.event();
189
+ }, this.scan(), n.observe && this.observe();
190
+ }
191
+ observe() {
192
+ let e = this.root === document ? document.body : this.root;
193
+ this.observer = new MutationObserver(() => {
194
+ this.rescanTimer === null && (this.rescanTimer = window.setTimeout(() => {
195
+ this.rescanTimer = null, this.scan();
196
+ }, 50));
197
+ }), this.observer.observe(e, {
198
+ childList: !0,
199
+ subtree: !0
200
+ });
171
201
  }
172
202
  destroy() {
173
- this.main?.forEach((e) => this.disableEl(e)), this.abortController && this.abortController.abort(), this.main = null;
174
- }
175
- disableEl(e) {
176
- e.setAttribute("tabindex", "-1"), e.setAttribute("aria-disabled", "true");
203
+ 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();
177
204
  }
178
- event() {
179
- this.abortController = new AbortController();
205
+ scan() {
206
+ this.main = this.root.querySelectorAll(`.${this.selectors.main}`);
180
207
  let e = this.abortController.signal;
181
- this.main?.forEach((t) => {
208
+ this.main.forEach((t) => {
209
+ if (t.dataset.uiswBound) return;
210
+ t.dataset.uiswBound = "1";
182
211
  let n = t.querySelector(`.${this.selectors.label}`), r = t.querySelector("input");
183
212
  n && n.id && t.setAttribute("aria-labelledby", n.id), t.hasAttribute("data-originally-disabled") || t.setAttribute("data-originally-disabled", String(r?.disabled ?? !1));
184
213
  let i = t.getAttribute("data-originally-disabled") === "true";
@@ -196,8 +225,13 @@ var e = class {
196
225
  let i = t.querySelector(".UIsw-slider");
197
226
  i && this.ripple(i);
198
227
  }, { signal: e }), t.addEventListener("keydown", (e) => {
199
- let n = t.querySelector("input");
200
- e.key === "ArrowRight" ? (r.checked = !0, t.setAttribute("aria-checked", String(r.checked)), e.preventDefault(), this.customEvent(n, "true")) : e.key === "ArrowLeft" && (r.checked = !1, t.setAttribute("aria-checked", String(r.checked)), e.preventDefault(), this.customEvent(n, "false"));
228
+ if (r.disabled) return;
229
+ let n = null;
230
+ if (e.key === "ArrowRight" ? n = !0 : e.key === "ArrowLeft" && (n = !1), n !== null && (e.preventDefault(), r.checked !== n)) {
231
+ r.checked = n, r.dispatchEvent(new Event("change"));
232
+ let e = t.querySelector(".UIsw-slider");
233
+ e && this.ripple(e);
234
+ }
201
235
  }, { signal: e }));
202
236
  });
203
237
  }
@@ -205,7 +239,7 @@ var e = class {
205
239
  this.main?.forEach((n) => {
206
240
  let r = n.querySelector(`input#${e}`);
207
241
  if (r) {
208
- r.checked = t, this.dbug && console.log("SetValue:", r.checked), n.setAttribute("aria-checked", String(t)), this.customEvent(r, String(t));
242
+ r.checked = t, this.debug && console.log("SetValue:", r.checked), n.setAttribute("aria-checked", String(t)), this.customEvent(r, String(t));
209
243
  let e = n.querySelector(".UIsw-slider");
210
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 }));
211
245
  }
@@ -222,18 +256,22 @@ var e = class {
222
256
  },
223
257
  bubbles: !0
224
258
  };
225
- this.dbug && console.log("CustomEvent:", n.detail), e.dispatchEvent(new CustomEvent("ui-switch-change", n));
259
+ this.debug && console.log("CustomEvent:", n.detail), e.dispatchEvent(new CustomEvent("ui-switch-change", n));
226
260
  }
227
261
  }, n = class e {
228
262
  selectors;
229
263
  main = null;
230
264
  itemArrowInitialized = /* @__PURE__ */ new WeakSet();
231
265
  abortController = new AbortController();
232
- dbug;
266
+ globalAbortController = new AbortController();
267
+ debug;
268
+ root;
269
+ observer = null;
270
+ rescanTimer = null;
233
271
  selectMap = /* @__PURE__ */ new Map();
234
- constructor(e = {}, t = !1) {
235
- this.dbug = t;
236
- let n = {
272
+ constructor(e = {}, t = !1, n = {}) {
273
+ this.debug = t, this.root = n.root ?? document;
274
+ let r = {
237
275
  idPrefix: "UI-option-",
238
276
  main: "UIselect",
239
277
  selected: "UIselect-selected",
@@ -245,9 +283,20 @@ var e = class {
245
283
  excludedItems: ["divider", "test"]
246
284
  };
247
285
  this.selectors = {
248
- ...n,
286
+ ...r,
249
287
  ...e
250
- }, this.main = document.querySelectorAll(`.${this.selectors.main}`), this.event(), this.initGlobalListener(this.selectors);
288
+ }, this.scan(), this.initGlobalListener(this.selectors), n.observe && this.observe();
289
+ }
290
+ observe() {
291
+ let e = this.root === document ? document.body : this.root;
292
+ this.observer = new MutationObserver(() => {
293
+ this.rescanTimer === null && (this.rescanTimer = window.setTimeout(() => {
294
+ this.rescanTimer = null, this.scan();
295
+ }, 50));
296
+ }), this.observer.observe(e, {
297
+ childList: !0,
298
+ subtree: !0
299
+ });
251
300
  }
252
301
  filterExcluded(e, t) {
253
302
  return Array.from(e).filter((e) => !t.some((t) => typeof t == "string" ? e.classList.contains(t) || e.id === t : e === t));
@@ -260,7 +309,10 @@ var e = class {
260
309
  });
261
310
  }
262
311
  destroy() {
263
- this.main?.forEach((e) => this.disableEl(e)), e.closeAll(this.selectors), this.abortController && (this.abortController.abort(), this.selectMap.clear()), this.main = null;
312
+ 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 = /* @__PURE__ */ new WeakSet(), this.main = null, this.abortController = new AbortController();
313
+ }
314
+ dispose() {
315
+ this.destroy(), this.globalAbortController.abort();
264
316
  }
265
317
  disableEl(e) {
266
318
  e.setAttribute("tabindex", "-1"), e.setAttribute("aria-disabled", "true");
@@ -268,28 +320,30 @@ var e = class {
268
320
  setValue(e, t) {
269
321
  let n = this.selectMap.get(e);
270
322
  if (!n) {
271
- this.dbug && console.warn("UISelect: element not registered");
323
+ this.debug && console.warn("UISelect: element not registered");
272
324
  return;
273
325
  }
274
326
  let { input: r, selected: i } = n, a = e.querySelector(`.${this.selectors.optionsList}`);
275
327
  if (!a) return;
276
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));
277
329
  if (!c) {
278
- this.dbug && console.warn(`UISelect: value "${t}" not found`);
330
+ this.debug && console.warn(`UISelect: value "${t}" not found`);
279
331
  return;
280
332
  }
281
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 }));
282
334
  }
283
- event() {
284
- this.abortController = new AbortController();
335
+ scan() {
336
+ this.main = this.root.querySelectorAll(`.${this.selectors.main}`);
285
337
  let e = this.abortController.signal;
286
- this.main?.forEach((t) => {
287
- let n = t.querySelector(`.${this.selectors.main} input[type='hidden']`);
338
+ this.main.forEach((t) => {
339
+ if (t.dataset.uiselBound) return;
340
+ let n = t.querySelector("input[type='hidden']");
288
341
  try {
289
- if (!n) throw Error("<input type=\"hidden\" name=\"YouUniqueId\">");
342
+ if (!n) throw Error("<input type=\"hidden\" name=\"YourUniqueId\">");
290
343
  } catch (e) {
291
344
  return console.warn("Not found:", e.message);
292
345
  }
346
+ t.dataset.uiselBound = "1";
293
347
  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`);
294
348
  if (t.setAttribute("tabindex", "0"), t.removeAttribute("aria-disabled"), t.hasAttribute("data-disabled")) {
295
349
  this.disableEl(t), t.addEventListener("click", (e) => {
@@ -311,23 +365,23 @@ var e = class {
311
365
  this.itemsPosition(a);
312
366
  }, { signal: e });
313
367
  let s = a.querySelectorAll(`.${this.selectors.items} ul li`), c = this.filterExcluded(s, this.selectors.excludedItems), l = t.querySelector("[aria-selected='true']");
314
- l && this.defaultSelect(t, l, r, n);
315
- var u = [];
316
- o && o.addEventListener("input", (i) => {
317
- let o = i.target.value.trim();
318
- r && (u = this.filterSearch(c, o), o ? (s.forEach((e) => e.remove()), u.forEach((e) => {
319
- a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e);
320
- })) : s.forEach((e) => {
321
- a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e);
322
- }), this.itemArrow(t, a, r, n, e));
368
+ l && this.defaultSelect(t, l, r, n), o && o.addEventListener("input", (i) => {
369
+ let o = i.target.value.trim(), l = o ? new Set(this.filterSearch(c, o)) : null;
370
+ s.forEach((e) => {
371
+ e.hidden = l ? !l.has(e) : !1;
372
+ }), this.itemArrow(t, a, r, n, e);
323
373
  }, { signal: e }), this.itemArrow(t, a, r, n, e), this.items(t, a, c, r, n, e);
324
- }, { signal: e });
374
+ });
325
375
  }
326
376
  itemArrow(e, t, n, r, i) {
327
377
  if (this.itemArrowInitialized.has(e)) return;
328
378
  this.itemArrowInitialized.add(e);
329
379
  let a = -1, o = n.textContent ? n.textContent : "", s = e.querySelector(`.${this.selectors.search} input`);
330
380
  e.addEventListener("keydown", (i) => {
381
+ if (i.key === "Tab") {
382
+ this.close(e, t);
383
+ return;
384
+ }
331
385
  s && s.focus();
332
386
  let c = Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)), l = this.filterExcluded(c, this.selectors.excludedItems), u = l.length;
333
387
  if (u !== 0) if (i.key === "ArrowDown") {
@@ -373,7 +427,7 @@ var e = class {
373
427
  },
374
428
  bubbles: !0
375
429
  };
376
- this.dbug && console.log("CustomEvent:", n.detail), e.dispatchEvent(new CustomEvent("ui-select-change", n));
430
+ this.debug && console.log("CustomEvent:", n.detail), e.dispatchEvent(new CustomEvent("ui-select-change", n));
377
431
  }
378
432
  toggle(t, n) {
379
433
  e.closeAll(this.selectors), n.hidden ? (n.hidden = !1, t.setAttribute("aria-expanded", "true")) : this.close(t, n);
@@ -391,69 +445,79 @@ var e = class {
391
445
  document.addEventListener("click", (n) => {
392
446
  let r = n.target;
393
447
  [...document.querySelectorAll(`.${t.main}`)].some((e) => e.contains(r)) || e.closeAll(t);
394
- }, { signal: this.abortController.signal });
448
+ }, { signal: this.globalAbortController.signal });
395
449
  }
396
450
  }, r = class {
397
451
  selectors;
398
452
  main = null;
399
453
  abortController = new AbortController();
400
- dbug;
401
- constructor(e = {}, t = !1) {
402
- this.dbug = t;
403
- let n = {
454
+ debug;
455
+ root;
456
+ observer = null;
457
+ rescanTimer = null;
458
+ constructor(e = {}, t = !1, n = {}) {
459
+ this.debug = t, this.root = n.root ?? document;
460
+ let r = {
404
461
  main: "UIbg",
405
462
  btn: "UIbg-btn",
406
463
  input: "UIbg-input"
407
464
  };
408
465
  this.selectors = {
409
- ...n,
466
+ ...r,
410
467
  ...e
411
- }, this.main = document.querySelectorAll(`.${this.selectors.main}`), this.#e();
468
+ }, this.scan(), n.observe && this.observe();
469
+ }
470
+ observe() {
471
+ let e = this.root === document ? document.body : this.root;
472
+ this.observer = new MutationObserver(() => {
473
+ this.rescanTimer === null && (this.rescanTimer = window.setTimeout(() => {
474
+ this.rescanTimer = null, this.scan();
475
+ }, 50));
476
+ }), this.observer.observe(e, {
477
+ childList: !0,
478
+ subtree: !0
479
+ });
412
480
  }
413
481
  destroy() {
414
- this.main?.forEach((e) => this.disableEl(e)), this.abortController && this.abortController.abort(), this.main = null;
415
- }
416
- disableEl(e) {
417
- e.querySelectorAll(`.${this.selectors.btn}`).forEach((e) => {
418
- e.setAttribute("aria-disabled", "true");
419
- }), e.setAttribute("aria-disabled", "true");
482
+ 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();
420
483
  }
421
484
  setValue(e, t) {
422
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);
423
486
  if (i === -1) {
424
- this.dbug && console.warn(`UIButtonGroup: value "${t}" not found or disabled`);
487
+ this.debug && console.warn(`UIButtonGroup: value "${t}" not found or disabled`);
425
488
  return;
426
489
  }
427
490
  n.forEach((e, t) => {
428
491
  e.checked = t === i, t === i ? e.setAttribute("checked", "") : e.removeAttribute("checked");
429
492
  }), r.forEach((e, t) => {
430
493
  e.setAttribute("aria-checked", String(t === i)), e.setAttribute("tabindex", t === i ? "0" : "-1");
431
- }), this.costomEvent(n[i]);
494
+ }), this.customEvent(n[i]);
432
495
  let a = r[i];
433
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 }));
434
497
  }
435
- #e() {
436
- this.abortController = new AbortController();
498
+ scan() {
499
+ this.main = this.root.querySelectorAll(`.${this.selectors.main}`);
437
500
  let e = this.abortController.signal;
438
- this.main?.forEach((t) => {
439
- t.querySelectorAll(`.${this.selectors.input}`).forEach((e) => {
501
+ this.main.forEach((t) => {
502
+ if (t.dataset.uibgBound) return;
503
+ t.dataset.uibgBound = "1", t.querySelectorAll(`.${this.selectors.input}`).forEach((e) => {
440
504
  e.hasAttribute("data-originally-disabled") || e.setAttribute("data-originally-disabled", String(e.disabled)), e.disabled = e.getAttribute("data-originally-disabled") === "true";
441
505
  }), t.removeAttribute("aria-disabled");
442
506
  let n = t.querySelector(`.${this.selectors.input}:checked`);
443
- n && this.costomEvent(n);
507
+ n && this.customEvent(n);
444
508
  let r = t.querySelectorAll(`.${this.selectors.btn}`);
445
509
  r.forEach((t) => {
446
510
  t.addEventListener("click", () => {
447
511
  r.forEach((e) => {
448
512
  e.setAttribute("aria-checked", "false"), e.setAttribute("tabindex", "-1");
449
- }), t.setAttribute("aria-checked", "true"), t.setAttribute("tabindex", "0"), t.focus(), this.#t(t);
513
+ }), t.setAttribute("aria-checked", "true"), t.setAttribute("tabindex", "0"), t.focus(), this.ripple(t);
450
514
  }, { signal: e }), t.addEventListener("keydown", (e) => {
451
515
  let n = Array.from(r).indexOf(t);
452
516
  if (e.key === "ArrowRight" && n++, e.key === "ArrowLeft" && n--, n < 0 && (n = r.length - 1), n >= r.length && (n = 0), e.key === "Enter") {
453
517
  let t = i[n];
454
518
  t && !t.disabled && (i.forEach((e) => {
455
519
  e.checked = !1, e.removeAttribute("checked");
456
- }), t.checked = !0, t.setAttribute("checked", ""), this.costomEvent(t)), e.preventDefault();
520
+ }), t.checked = !0, t.setAttribute("checked", ""), this.customEvent(t)), e.preventDefault();
457
521
  return;
458
522
  }
459
523
  let a = r[n];
@@ -462,12 +526,12 @@ var e = class {
462
526
  });
463
527
  let i = t.querySelectorAll(`.${this.selectors.input}`);
464
528
  i.forEach((t, n) => {
465
- this.dbug && (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}")`));
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}")`));
466
530
  let a = r[n];
467
531
  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", () => {
468
532
  i.forEach((e) => {
469
533
  e.checked = !1, e.removeAttribute("checked");
470
- }), i[n].checked = !0, i[n].setAttribute("checked", ""), this.costomEvent(t);
534
+ }), i[n].checked = !0, i[n].setAttribute("checked", ""), this.customEvent(t);
471
535
  }, { signal: e }));
472
536
  });
473
537
  let a = Array.from(i).find((e) => e.checked && !e.disabled) || Array.from(i).find((e) => !e.disabled);
@@ -477,10 +541,10 @@ var e = class {
477
541
  }
478
542
  });
479
543
  }
480
- #t(e) {
544
+ ripple(e) {
481
545
  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 }));
482
546
  }
483
- costomEvent(e) {
547
+ customEvent(e) {
484
548
  let t = {
485
549
  detail: {
486
550
  id: e.id,
@@ -488,26 +552,40 @@ var e = class {
488
552
  },
489
553
  bubbles: !0
490
554
  };
491
- this.dbug && console.log("CostomEvent:", t.detail), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
555
+ this.debug && console.log("CustomEvent:", t.detail), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
492
556
  }
493
557
  }, i = class {
494
558
  selectors;
495
559
  buttons = null;
496
560
  abortController = new AbortController();
497
- dbug;
498
- constructor(e = {}, t = !1) {
499
- this.dbug = t;
500
- let n = { main: "UIb" };
561
+ debug;
562
+ root;
563
+ observer = null;
564
+ rescanTimer = null;
565
+ constructor(e = {}, t = !1, n = {}) {
566
+ this.debug = t, this.root = n.root ?? document;
567
+ let r = { main: "UIb" };
501
568
  this.selectors = {
502
- ...n,
569
+ ...r,
503
570
  ...e
504
- }, this.buttons = document.querySelectorAll(`.${this.selectors.main}`), this.#e();
571
+ }, this.scan(), n.observe && this.observe();
572
+ }
573
+ observe() {
574
+ let e = this.root === document ? document.body : this.root;
575
+ this.observer = new MutationObserver(() => {
576
+ this.rescanTimer === null && (this.rescanTimer = window.setTimeout(() => {
577
+ this.rescanTimer = null, this.scan();
578
+ }, 50));
579
+ }), this.observer.observe(e, {
580
+ childList: !0,
581
+ subtree: !0
582
+ });
505
583
  }
506
584
  setValue(e, t, n) {
507
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 }));
508
586
  }
509
587
  destroy() {
510
- this.buttons?.forEach((e) => this.disableEl(e)), this.abortController && this.abortController.abort(), this.buttons = null;
588
+ 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();
511
589
  }
512
590
  disableEl(e) {
513
591
  e.tagName === "BUTTON" ? e.disabled = !0 : (e.setAttribute("aria-disabled", "true"), e.setAttribute("tabindex", "-1"));
@@ -521,17 +599,17 @@ var e = class {
521
599
  setDisabled(e, t) {
522
600
  e.setAttribute("data-originally-disabled", String(t)), t ? this.disableEl(e) : this.enableEl(e);
523
601
  }
524
- #e() {
525
- this.abortController = new AbortController();
602
+ scan() {
603
+ this.buttons = this.root.querySelectorAll(`.${this.selectors.main}`);
526
604
  let e = this.abortController.signal;
527
- this.buttons?.forEach((t) => {
528
- 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) => {
605
+ this.buttons.forEach((t) => {
606
+ 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) => {
529
607
  if (this.isDisabled(t)) {
530
608
  e.preventDefault(), e.stopImmediatePropagation();
531
609
  return;
532
610
  }
533
611
  t.tagName === "A" && e.preventDefault(), this.ripple(t), this.customEvent(t, String(t.dataset.value));
534
- }, { signal: e });
612
+ }, { signal: e }));
535
613
  });
536
614
  }
537
615
  ripple(e) {
@@ -549,8 +627,26 @@ var e = class {
549
627
  },
550
628
  bubbles: !0
551
629
  };
552
- this.dbug && console.info("Button CustomEvent:", n.detail), e.dispatchEvent(new CustomEvent("ui-button-change", n));
553
- }
554
- };
630
+ this.debug && console.info("Button CustomEvent:", n.detail), e.dispatchEvent(new CustomEvent("ui-button-change", n));
631
+ }
632
+ }, a = null, o = null, s = null, c = null, l = null;
633
+ function u(...e) {
634
+ return a ??= new i(...e);
635
+ }
636
+ function d(...e) {
637
+ return l ??= new r(...e);
638
+ }
639
+ function f(...e) {
640
+ return o ??= new n(...e);
641
+ }
642
+ function p(...t) {
643
+ return s ??= new e(...t);
644
+ }
645
+ function m(...e) {
646
+ return c ??= new t(...e);
647
+ }
648
+ function h() {
649
+ a = null, o = null, s = null, c = null, l = null;
650
+ }
555
651
  //#endregion
556
- export { i as Button, r as ButtonGroup, n as Select, e as SpinBox, t as Switch };
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 };