@popovandrii/ui-elements 0.0.28 → 0.0.31

package/dist/index.es.js

@@ -1,537 +1,456 @@
-class S {
-  selectors;
-  spinBoxes;
-  abortController = new AbortController();
-  dbug;
-  constructor(e = {}, t = !1) {
-    this.dbug = t;
-    const r = {
-      main: "UIsp",
-      btn: "UIsp__btn",
-      input: "UIsp__input",
-      disabledBtn: "disabled"
-    };
-    this.selectors = { ...r, ...e }, this.spinBoxes = document.querySelectorAll(
-      `.${this.selectors.main}`
-    ), this.event();
-  }
-  state = (e, t, r, o = 0, s = 0) => {
-    e == o || e < o ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), s !== 0 && (e == s || e > s ? (r.classList.add(this.selectors.disabledBtn), r.disabled = !0) : (r.classList.remove(this.selectors.disabledBtn), r.disabled = !1));
-  };
-  destroy() {
-    this.abortController && this.abortController.abort(), this.spinBoxes = null;
-  }
-  getValidDataNumber = (e, t) => {
-    const r = e.getAttribute(`data-${t}`);
-    return r === null || r.trim() === "" || isNaN(Number(r)) ? 0 : Number(r);
-  };
-  event() {
-    this.abortController = new AbortController();
-    const e = this.abortController.signal;
-    this.spinBoxes?.forEach((t) => {
-      let r;
-      const o = t.querySelectorAll(
-        `.${this.selectors.btn}`
-      ), s = t.querySelector(
-        `.${this.selectors.input}`
-      );
-      this.dbug && (o || console.log(`Buttons (${this.selectors.btn}) not found in container`), s || console.log(`Input (${this.selectors.input}) not found in container`));
-      const i = o[0], n = o[1], a = this.getValidDataNumber(t, "step"), l = this.getValidDataNumber(t, "min"), h = this.getValidDataNumber(t, "max"), c = (u) => {
-        t.setAttribute("aria-valuenow", String(u)), t.setAttribute("aria-valuetext", `${u} items`);
-      };
-      Number(s.value) <= l && (s.value = l.toFixed(a)), h !== 0 ? (Number(s.value) >= h && (s.value = h.toFixed(a)), h && t.setAttribute("aria-valuemax", h.toFixed(a))) : s.value = Number(s.value).toFixed(a), l && t.setAttribute("aria-valuemin", l.toFixed(a)), this.state(Number(s.value), i, n, l, h), c(s.value);
-      let b = null;
-      const v = (u = 1) => {
-        s.value = String(Math.abs(Number(s.value)));
-        let d = parseFloat(s.value) || 0;
-        return d = d + 1 * u / Math.pow(10, a), d > h && h !== 0 && (d = h), s.value = d.toFixed(a), this.state(Number(s.value), i, n, l, h), c(s.value), s.value;
-      }, f = (u = 1) => {
-        s.value = String(Math.abs(Number(s.value)));
-        let d = parseFloat(s.value) || 0;
-        return d = d - 1 * u / Math.pow(10, a), d < l && (d = l), s.value = d.toFixed(a), this.state(Number(s.value), i, n, l, h), c(s.value), s.value;
-      }, m = (u, d = 150) => {
-        b === null && (b = window.setInterval(u, d));
-      }, E = () => {
-        b !== null && (clearInterval(b), b = null);
-      };
-      n.addEventListener(
-        "mousedown",
-        (u) => {
-          const d = u.shiftKey ? 3 : 1;
-          m(() => v(d));
-        },
-        { signal: e }
-      ), n.addEventListener("touchstart", () => m(v), {
-        signal: e
-      }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-        (u) => {
-          n.addEventListener(u, E, { signal: e });
-        }
-      ), n.addEventListener(
-        "click",
-        (u) => {
-          const d = u.shiftKey ? 3 : 1;
-          b === null && (r = v(d), this.costomEvent(s, r));
-        },
-        { signal: e }
-      ), i.addEventListener(
-        "click",
-        (u) => {
-          const d = u.shiftKey ? 3 : 1;
-          b === null && (r = f(d), this.costomEvent(s, r));
-        },
-        { signal: e }
-      ), i.addEventListener(
-        "mousedown",
-        (u) => {
-          const d = u.shiftKey ? 3 : 1;
-          m(() => f(d), 100);
-        },
-        { signal: e }
-      ), i.addEventListener("touchstart", () => m(f, 100), {
-        signal: e
-      }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-        (u) => {
-          i.addEventListener(u, E, { signal: e });
-        }
-      ), s.addEventListener(
-        "keydown",
-        (u) => {
-          const d = u.key, y = u.shiftKey ? 5 : 1;
-          if ([
-            "Backspace",
-            "Delete",
-            "ArrowLeft",
-            "ArrowRight",
-            "Tab",
-            "Enter",
-            "Home",
-            "End"
-          ].includes(d) || (u.ctrlKey || u.metaKey) && ["a", "c", "v", "x"].includes(d.toLowerCase()))
-            return;
-          if (["e", "+", "-"].includes(d)) {
-            u.preventDefault();
-            return;
-          }
-          if (d === "ArrowUp" || d === "ArrowDown") {
-            u.preventDefault(), d === "ArrowUp" ? v(y) : f(y);
-            return;
-          }
-          const p = d === "," ? "." : d, w = /^[0-9]$/.test(p), C = p === ".", k = s.value.includes(".");
-          (a === 0 && !w || a > 0 && !(w || C) || C && k) && u.preventDefault();
-        },
-        { signal: e }
-      ), s.addEventListener(
-        "keyup",
-        (u) => {
-          (u.key === "ArrowUp" || u.key === "ArrowDown") && this.costomEvent(s, s.value);
-        },
-        { signal: e }
-      ), s.addEventListener(
-        "change",
-        () => {
-          Number(s.value) < l && (s.value = l.toFixed(a)), Number(s.value) > h && h !== 0 ? s.value = h.toFixed(a) : s.value = Number(s.value).toFixed(a), this.state(Number(s.value), i, n, l, h), this.costomEvent(s, s.value);
-        },
-        { signal: e }
-      );
-    });
-  }
-  costomEvent(e, t) {
-    const r = {
-      detail: { id: e.id, value: t },
-      bubbles: !0
-    };
-    this.dbug && console.log("CostomEvent: data.detail ", r.detail), e.dispatchEvent(new CustomEvent("ui-spinbox-change", r));
-  }
-}
-class $ {
-  selectors;
-  main = null;
-  abortController = new AbortController();
-  dbug;
-  constructor(e = {}, t = !1) {
-    this.dbug = t;
-    const r = {
-      main: "UIsw",
-      label: "UIsw-label"
-    };
-    this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
-      `.${this.selectors.main}`
-    ), this.event();
-  }
-  destroy() {
-    this.abortController && this.abortController.abort(), this.main = null;
-  }
-  event() {
-    this.abortController = new AbortController();
-    const e = this.abortController.signal;
-    this.main?.forEach((t) => {
-      const r = t.querySelector(`.${this.selectors.label}`), o = t.querySelector("input");
-      r && r.id && t.setAttribute("aria-labelledby", r.id), o && (o.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener(
-        "click",
-        (s) => {
-          if (s.target.tagName === "INPUT") return;
-          s.target.closest("label") || (o.checked = !o.checked);
-          const n = t.querySelector("input");
-          this.costomEvent(n, String(n?.checked)), t.setAttribute("aria-checked", String(o.checked));
-        },
-        { signal: e }
-      ), t.addEventListener(
-        "keydown",
-        (s) => {
-          const i = t.querySelector("input");
-          s.key === "ArrowRight" ? (o.checked = !0, t.setAttribute("aria-checked", String(o.checked)), s.preventDefault(), this.costomEvent(i, String(!0))) : s.key === "ArrowLeft" && (o.checked = !1, t.setAttribute("aria-checked", String(o.checked)), s.preventDefault(), this.costomEvent(i, String(!1)));
-        },
-        { signal: e }
-      ));
-    });
-  }
-  costomEvent(e, t) {
-    const r = {
-      detail: { id: e.id, value: t },
-      bubbles: !0
-    };
-    this.dbug && console.log("CostomEvent:", r.detail), e.dispatchEvent(new CustomEvent("ui-switch-change", r));
-  }
-}
-class A {
-  selectors;
-  main = null;
-  itemArrowInitialized = /* @__PURE__ */ new WeakSet();
-  abortController = new AbortController();
-  dbug;
-  constructor(e = {}, t = !1) {
-    this.dbug = t;
-    const r = {
-      idPrefix: "UI-option-",
-      main: "UIselect",
-      selected: "UIselect-selected",
-      arrow: "UIselect-arrow",
-      optionsList: "UIselect-options",
-      search: "UIselect-options__search",
-      items: "UIselect-options__items",
-      excludedItems: ["divider", "test"]
-      // class=""
-    };
-    this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
-      `.${this.selectors.main}`
-    ), this.event(), this.initGlobalListener(this.selectors);
-  }
-  filterExcluded(e, t) {
-    return Array.from(e).filter((r) => !t.some((o) => typeof o == "string" ? r.classList.contains(o) || r.id === o : r === o));
-  }
-  filterSearch(e, t) {
-    const r = t.trim().toLowerCase();
-    return e.filter((o) => {
-      const s = o.dataset.value?.toLowerCase() || "", i = o.textContent?.toLowerCase() || "";
-      return s.includes(r) || i.includes(r);
-    });
-  }
-  destroy() {
-    A.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
-  }
-  event() {
-    this.abortController = new AbortController();
-    const e = this.abortController.signal;
-    this.main?.forEach(
-      (t) => {
-        const r = t.querySelector(
-          `.${this.selectors.main} input[type='hidden']`
-        );
-        try {
-          if (!r)
-            throw new Error('<input type="hidden" name="YouUniqueId">');
-        } catch (b) {
-          return console.warn("Not found:", b.message);
-        }
-        const o = t.querySelector(
-          `.${this.selectors.selected}`
-        ), s = t.querySelector(
-          `.${this.selectors.arrow}`
-        ), i = t.querySelector(
-          `.${this.selectors.optionsList}`
-        ), n = t.querySelector(
-          `.${this.selectors.search} input`
-        );
-        s && s.addEventListener(
-          "click",
-          () => {
-            this.toggle(t, i);
-          },
-          { signal: e }
-        ), o.addEventListener(
-          "click",
-          () => {
-            this.toggle(t, i);
-          },
-          { signal: e }
-        ), t.addEventListener(
-          "click",
-          () => {
-            this.itemsPosition(i);
-          },
-          { signal: e }
-        );
-        const a = i.querySelectorAll(
-          `.${this.selectors.items} ul li`
-        ), l = this.filterExcluded(
-          a,
-          this.selectors.excludedItems
-        ), h = t.querySelector(
-          "[aria-selected='true']"
-        );
-        h && this.defaultSelect(t, h, o, r);
-        var c = [];
-        n && n.addEventListener(
-          "input",
-          (b) => {
-            const f = b.target.value.trim();
-            o && (c = this.filterSearch(l, f), f ? (a.forEach((m) => m.remove()), c.forEach((m) => {
-              i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
-            })) : a.forEach((m) => {
-              i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
-            }), this.itemArrow(t, i, o, r, e));
-          },
-          { signal: e }
-        ), this.itemArrow(t, i, o, r, e), this.items(t, i, l, o, r, e);
-      },
-      { signal: e }
-    );
-  }
-  itemArrow(e, t, r, o, s) {
-    if (this.itemArrowInitialized.has(e)) return;
-    this.itemArrowInitialized.add(e);
-    let i = -1;
-    const n = r.textContent ? r.textContent : "", a = e.querySelector(
-      `.${this.selectors.search} input`
-    );
-    e.addEventListener(
-      "keydown",
-      (l) => {
-        a && a.focus();
-        const h = Array.from(
-          t.querySelectorAll(`.${this.selectors.optionsList} ul li`)
-        ), c = this.filterExcluded(
-          h,
-          this.selectors.excludedItems
-        ), b = c.length;
-        if (b !== 0)
-          if (l.key === "ArrowDown") {
-            l.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), i = (i + 1) % b, r.textContent = c[i].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[i].setAttribute("aria-selected", "true");
-            const v = c[i].id || `${this.selectors.idPrefix}${i}`;
-            e.setAttribute("aria-activedescendant", v), c[i].scrollIntoView({ block: "nearest" });
-          } else if (l.key === "ArrowUp") {
-            l.preventDefault(), i = (i - 1 + b) % b, r.textContent = c[i].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[i].setAttribute("aria-selected", "true");
-            const v = c[i].id || `${this.selectors.idPrefix}${i}`;
-            e.setAttribute("aria-activedescendant", v), c[i].scrollIntoView({ block: "nearest" });
-          } else if (l.key === "Enter")
-            if (l.preventDefault(), i >= 0) {
-              r.textContent = c[i].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[i].setAttribute("aria-selected", "true");
-              const v = c[i].id || `${this.selectors.idPrefix}${i}`;
-              e.setAttribute("aria-activedescendant", v), o.value = String(c[i].dataset.value), this.costomEvent(e, o.value), this.close(e, t);
-            } else
-              this.toggle(e, t);
-          else l.key === "Escape" && (e.getAttribute("aria-activedescendant") || (r.textContent = n), this.close(e, t));
-      },
-      { signal: s }
-    );
-  }
-  itemsPosition(e) {
-    const t = e.querySelector(
-      '[aria-selected="true"]'
-    );
-    t && t.scrollIntoView({ block: "nearest" });
-  }
-  items(e, t, r, o, s, i) {
-    r.forEach((n, a) => {
-      n.addEventListener(
-        "click",
-        () => {
-          const l = r[a];
-          if (l) {
-            o.textContent = l.textContent, r.forEach((c) => c.removeAttribute("aria-selected")), l.setAttribute("aria-selected", "true");
-            const h = l.id || `${this.selectors.idPrefix}${a}`;
-            e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), s.value = String(r[a].dataset.value), this.costomEvent(e, s.value), this.close(e, t);
-          }
-        },
-        { signal: i }
-      );
-    });
-  }
-  defaultSelect(e, t, r, o) {
-    t && (o.setAttribute("value", t.dataset.value ?? ""), r.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
-  }
-  costomEvent(e, t) {
-    this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
-      new CustomEvent("ui-select-change", {
-        detail: { val: t },
-        bubbles: !0
-      })
-    );
-  }
-  toggle(e, t) {
-    A.closeAll(this.selectors), t.hidden ? (t.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, t);
-  }
-  close(e, t) {
-    t.hidden = !0, e.setAttribute("aria-expanded", "false");
-  }
-  static closeAll(e) {
-    document.querySelectorAll(`.${e.main}`).forEach((t) => {
-      const r = t.querySelector(`.${e.optionsList}`);
-      r.hidden = !0, t.setAttribute("aria-expanded", "false");
-    });
-  }
-  initGlobalListener(e) {
-    document.addEventListener(
-      "click",
-      (t) => {
-        const r = t.target;
-        [...document.querySelectorAll(`.${e.main}`)].some(
-          (s) => s.contains(r)
-        ) || A.closeAll(e);
-      },
-      { signal: this.abortController.signal }
-    );
-  }
-}
-class L {
-  selectors;
-  main = null;
-  abortController = new AbortController();
-  dbug;
-  constructor(e = {}, t = !1) {
-    this.dbug = t;
-    const r = {
-      main: "UIbg",
-      btn: "UIbg-btn",
-      input: "UIbg-input"
-    };
-    this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
-      `.${this.selectors.main}`
-    ), this.#t();
-  }
-  destroy() {
-    this.abortController && this.abortController.abort(), this.main = null;
-  }
-  #t() {
-    this.abortController = new AbortController();
-    const e = this.abortController.signal;
-    this.main?.forEach((t) => {
-      const r = t.querySelector(
-        `.${this.selectors.input}:checked`
-      );
-      r && this.costomEvent(r);
-      const o = t.querySelectorAll(
-        `.${this.selectors.btn}`
-      );
-      o.forEach((n) => {
-        n.addEventListener(
-          "click",
-          () => {
-            o.forEach((a) => {
-              a.setAttribute("aria-checked", "false"), a.setAttribute("tabindex", "-1");
-            }), n.setAttribute("aria-checked", "true"), n.setAttribute("tabindex", "0"), n.focus();
-          },
-          { signal: e }
-        ), n.addEventListener(
-          "keydown",
-          (a) => {
-            let l = Array.from(o).indexOf(n);
-            if (a.key === "ArrowRight" && l++, a.key === "ArrowLeft" && l--, l < 0 && (l = o.length - 1), l >= o.length && (l = 0), a.key === "Enter") {
-              const c = s[l];
-              c && !c.disabled && (s.forEach((b) => {
-                b.checked = !1, b.removeAttribute("checked");
-              }), c.checked = !0, c.setAttribute("checked", ""), this.costomEvent(c)), a.preventDefault();
-              return;
-            }
-            const h = o[l];
-            h && (o.forEach((c) => c.setAttribute("tabindex", "-1")), h.setAttribute("tabindex", "0"), h.focus());
-          },
-          { signal: e }
-        );
-      });
-      const s = t.querySelectorAll(
-        `.${this.selectors.input}`
-      );
-      s.forEach((n, a) => {
-        this.dbug && (n.id || console.error(`Input #${a} in group has no ID!`), (!n.value || n.value === "on") && console.warn(
-          `Input #${n.id} does not have a value specified (currently "${n.value}")`
-        ));
-        const l = o[a];
-        l && (n.tabIndex = -1, l.setAttribute("role", "radio"), l.setAttribute("aria-checked", String(n.checked)), l.setAttribute("tabindex", n.checked ? "0" : "-1"), n.disabled ? l.setAttribute("aria-disabled", "true") : l.removeAttribute("aria-disabled"), n.addEventListener(
-          "click",
-          () => {
-            s.forEach((h) => {
-              h.checked = !1, h.removeAttribute("checked");
-            }), s[a].checked = !0, s[a].setAttribute("checked", ""), this.costomEvent(n);
-          },
-          { signal: e }
-        ));
-      });
-      const i = Array.from(s).find((n) => n.checked && !n.disabled) || Array.from(s).find((n) => !n.disabled);
-      if (i) {
-        const n = t.querySelector(
-          `label[for="${i.id}"]`
-        );
-        n && n.setAttribute("tabindex", "0");
-      }
-    });
-  }
-  costomEvent(e) {
-    const t = {
-      detail: { id: e.id, value: e.value },
-      bubbles: !0
-    };
-    this.dbug && console.log("CostomEvent:", t.detail), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
-  }
-}
-class I {
-  selectors;
-  buttons = null;
-  abortController = new AbortController();
-  dbug;
-  constructor(e = {}, t = !1) {
-    this.dbug = t;
-    const r = {
-      main: "UIb"
-    };
-    this.selectors = { ...r, ...e }, this.buttons = document.querySelectorAll(
-      `.${this.selectors.main}`
-    ), this.#t();
-  }
-  destroy() {
-    this.abortController && this.abortController.abort(), this.buttons = null;
-  }
-  #t() {
-    this.abortController = new AbortController();
-    const e = this.abortController.signal;
-    this.buttons?.forEach((t) => {
-      t.addEventListener(
-        "click",
-        () => {
-          this.costomEvent(t, String(t.dataset.value));
-        },
-        { signal: e }
-      );
-    });
-  }
-  costomEvent(e, t) {
-    if (!t || t === "undefined" || t.trim() === "") {
-      console.log('Button data-value="" Not set!');
-      return;
-    }
-    this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
-      new CustomEvent("ui-button-change", {
-        detail: { val: t },
-        bubbles: !0
-      })
-    );
-  }
-}
-export {
-  I as Button,
-  L as ButtonGroup,
-  A as Select,
-  S as SpinBox,
-  $ as Switch
+//#region src/SpinBox.ts
+var e = class {
+	selectors;
+	spinBoxes;
+	abortController = new AbortController();
+	dbug;
+	constructor(e = {}, t = !1) {
+		this.dbug = t;
+		let n = {
+			main: "UIsp",
+			btn: "UIsp__btn",
+			input: "UIsp__input",
+			disabledBtn: "disabled"
+		};
+		this.selectors = {
+			...n,
+			...e
+		}, this.spinBoxes = document.querySelectorAll(`.${this.selectors.main}`), this.event();
+	}
+	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.abortController && this.abortController.abort(), this.spinBoxes = null;
+	}
+	getValidDataNumber = (e, t) => {
+		let n = e.getAttribute(`data-${t}`);
+		return n === null || n.trim() === "" || isNaN(Number(n)) ? 0 : Number(n);
+	};
+	event() {
+		this.abortController = new AbortController();
+		let e = this.abortController.signal;
+		this.spinBoxes?.forEach((t) => {
+			let n, r = t.querySelectorAll(`.${this.selectors.btn}`), i = t.querySelector(`.${this.selectors.input}`);
+			this.dbug && (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], s = this.getValidDataNumber(t, "step"), c = this.getValidDataNumber(t, "min"), l = this.getValidDataNumber(t, "max"), u = (e) => {
+				t.setAttribute("aria-valuenow", String(e)), t.setAttribute("aria-valuetext", `${e} items`);
+			};
+			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);
+			let d = null, f = (e = 1) => {
+				i.value = String(Math.abs(Number(i.value)));
+				let t = parseFloat(i.value) || 0;
+				return t += 1 * e / 10 ** s, t > l && l !== 0 && (t = l), i.value = t.toFixed(s), this.state(Number(i.value), a, o, c, l), u(i.value), i.value;
+			}, p = (e = 1) => {
+				i.value = String(Math.abs(Number(i.value)));
+				let t = parseFloat(i.value) || 0;
+				return t -= 1 * e / 10 ** s, t < c && (t = c), i.value = t.toFixed(s), this.state(Number(i.value), a, o, c, l), u(i.value), i.value;
+			}, m = (e, t = 150) => {
+				d === null && (d = window.setInterval(e, t));
+			}, h = () => {
+				d !== null && (clearInterval(d), d = null);
+			};
+			o.addEventListener("mousedown", (e) => {
+				let t = e.shiftKey ? 3 : 1;
+				m(() => f(t));
+			}, { signal: e }), o.addEventListener("touchstart", () => m(f), { 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;
+				d === null && (n = f(t), this.costomEvent(i, n));
+			}, { signal: e }), a.addEventListener("click", (e) => {
+				let t = e.shiftKey ? 3 : 1;
+				d === null && (n = p(t), this.costomEvent(i, n));
+			}, { signal: e }), a.addEventListener("mousedown", (e) => {
+				let t = e.shiftKey ? 3 : 1;
+				m(() => p(t), 100);
+			}, { signal: e }), a.addEventListener("touchstart", () => m(p, 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(), t === "ArrowUp" ? f(n) : p(n);
+					return;
+				}
+				let r = t === "," ? "." : t, a = /^[0-9]$/.test(r), o = r === ".", c = i.value.includes(".");
+				(s === 0 && !a || s > 0 && !(a || o) || o && c) && e.preventDefault();
+			}, { signal: e }), i.addEventListener("keyup", (e) => {
+				(e.key === "ArrowUp" || e.key === "ArrowDown") && this.costomEvent(i, i.value);
+			}, { signal: e }), i.addEventListener("change", () => {
+				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);
+			}, { signal: e });
+		});
+	}
+	costomEvent(e, t) {
+		let n = {
+			detail: {
+				id: e.id,
+				value: t
+			},
+			bubbles: !0
+		};
+		this.dbug && console.log("CostomEvent: data.detail ", n.detail), e.dispatchEvent(new CustomEvent("ui-spinbox-change", n));
+	}
+}, t = class {
+	selectors;
+	main = null;
+	abortController = new AbortController();
+	dbug;
+	constructor(e = {}, t = !1) {
+		this.dbug = t;
+		let n = {
+			main: "UIsw",
+			label: "UIsw-label"
+		};
+		this.selectors = {
+			...n,
+			...e
+		}, this.main = document.querySelectorAll(`.${this.selectors.main}`), this.event();
+	}
+	destroy() {
+		this.abortController && this.abortController.abort(), this.main = null;
+	}
+	event() {
+		this.abortController = new AbortController();
+		let e = this.abortController.signal;
+		this.main?.forEach((t) => {
+			let n = t.querySelector(`.${this.selectors.label}`), r = t.querySelector("input");
+			n && n.id && t.setAttribute("aria-labelledby", n.id), r?.disabled && (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 t = e.target.closest("label");
+				t || (r.checked = !r.checked), t || r.dispatchEvent(new Event("change"));
+			}, { signal: e }), t.addEventListener("keydown", (e) => {
+				let n = t.querySelector("input");
+				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"));
+			}, { signal: e }));
+		});
+	}
+	setValue(e, t) {
+		this.main?.forEach((n) => {
+			let r = n.querySelector(`input#${e}`);
+			r && (r.checked = t, this.dbug && console.log("SetValue:", r.checked), n.setAttribute("aria-checked", String(t)), this.customEvent(r, String(t)));
+		});
+	}
+	customEvent(e, t) {
+		let n = {
+			detail: {
+				id: e.id,
+				value: t
+			},
+			bubbles: !0
+		};
+		this.dbug && console.log("CustomEvent:", n.detail), e.dispatchEvent(new CustomEvent("ui-switch-change", n));
+	}
+}, n = class e {
+	selectors;
+	main = null;
+	itemArrowInitialized = /* @__PURE__ */ new WeakSet();
+	abortController = new AbortController();
+	dbug;
+	selectMap = /* @__PURE__ */ new Map();
+	constructor(e = {}, t = !1) {
+		this.dbug = t;
+		let n = {
+			idPrefix: "UI-option-",
+			main: "UIselect",
+			selected: "UIselect-selected",
+			arrow: "UIselect-arrow",
+			optionsList: "UIselect-options",
+			search: "UIselect-options__search",
+			items: "UIselect-options__items",
+			flash: "UIFlash",
+			excludedItems: ["divider", "test"]
+		};
+		this.selectors = {
+			...n,
+			...e
+		}, this.main = document.querySelectorAll(`.${this.selectors.main}`), this.event(), this.initGlobalListener(this.selectors);
+	}
+	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() {
+		e.closeAll(this.selectors), this.abortController && (this.abortController.abort(), this.selectMap.clear()), this.main = null;
+	}
+	setValue(e, t) {
+		let n = this.selectMap.get(e);
+		if (!n) {
+			this.dbug && 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.dbug && 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.classList.remove(this.selectors.flash), e.offsetWidth, e.classList.add(this.selectors.flash), e.addEventListener("animationend", () => e.classList.remove(this.selectors.flash), { once: !0 });
+	}
+	event() {
+		this.abortController = new AbortController();
+		let e = this.abortController.signal;
+		this.main?.forEach((t) => {
+			let n = t.querySelector(`.${this.selectors.main} input[type='hidden']`);
+			try {
+				if (!n) throw Error("<input type=\"hidden\" name=\"YouUniqueId\">");
+			} catch (e) {
+				return console.warn("Not found:", e.message);
+			}
+			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`);
+			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);
+			var u = [];
+			o && o.addEventListener("input", (i) => {
+				let o = i.target.value.trim();
+				r && (u = this.filterSearch(c, o), o ? (s.forEach((e) => e.remove()), u.forEach((e) => {
+					a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e);
+				})) : s.forEach((e) => {
+					a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e);
+				}), this.itemArrow(t, a, r, n, e));
+			}, { signal: e }), this.itemArrow(t, a, r, n, e), this.items(t, a, c, r, n, e);
+		}, { signal: 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) => {
+			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.dbug && 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.abortController.signal });
+	}
+}, r = class {
+	selectors;
+	main = null;
+	abortController = new AbortController();
+	dbug;
+	constructor(e = {}, t = !1) {
+		this.dbug = t;
+		let n = {
+			main: "UIbg",
+			btn: "UIbg-btn",
+			input: "UIbg-input"
+		};
+		this.selectors = {
+			...n,
+			...e
+		}, this.main = document.querySelectorAll(`.${this.selectors.main}`), this.#e();
+	}
+	destroy() {
+		this.abortController && this.abortController.abort(), this.main = null;
+	}
+	#e() {
+		this.abortController = new AbortController();
+		let e = this.abortController.signal;
+		this.main?.forEach((t) => {
+			let n = t.querySelector(`.${this.selectors.input}:checked`);
+			n && this.costomEvent(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();
+				}, { 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.costomEvent(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.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}")`));
+				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.costomEvent(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");
+			}
+		});
+	}
+	costomEvent(e) {
+		let t = {
+			detail: {
+				id: e.id,
+				value: e.value
+			},
+			bubbles: !0
+		};
+		this.dbug && console.log("CostomEvent:", t.detail), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
+	}
+}, i = class {
+	selectors;
+	buttons = null;
+	abortController = new AbortController();
+	dbug;
+	constructor(e = {}, t = !0) {
+		this.dbug = t;
+		let n = { main: "UIb" };
+		this.selectors = {
+			...n,
+			...e
+		}, this.buttons = document.querySelectorAll(`.${this.selectors.main}`), this.#e();
+	}
+	destroy() {
+		this.abortController && this.abortController.abort(), this.buttons = null;
+	}
+	#e() {
+		this.abortController = new AbortController();
+		let e = this.abortController.signal;
+		this.buttons?.forEach((t) => {
+			t.addEventListener("click", () => {
+				this.customEvent(t, String(t.dataset.value));
+			}, { signal: e });
+		});
+	}
+	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.dbug && console.info("Button CustomEvent:", n.detail), e.dispatchEvent(new CustomEvent("ui-button-change", n));
+	}
 };
+//#endregion
+export { i as Button, r as ButtonGroup, n as Select, e as SpinBox, t as Switch };