wj-elements 0.1.48 → 0.1.49

package/dist/wje-radio-group.js

@@ -0,0 +1,101 @@
+var c = Object.defineProperty;
+var u = (i, t, e) => t in i ? c(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var n = (i, t, e) => (u(i, typeof t != "symbol" ? t + "" : t, e), e);
+import h from "./wje-element.js";
+import r from "./wje-radio.js";
+const m = ".wje-inline{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}";
+class l extends h {
+  /**
+   * Creates an instance of RadioGroup.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    n(this, "className", "RadioGroup");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return m;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(e, s, p) {
+    let o = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("native-radio-group", this.hasAttribute("inline") ? "wje-inline" : "ddd");
+    let d = document.createElement("slot");
+    return a.appendChild(d), o.appendChild(a), o;
+  }
+  /**
+   * Adds event listeners after the component is drawn.
+   * Handles the selection of radio buttons.
+   */
+  afterDraw() {
+    this.value && this.setRadioToChekced(this.getRadioByValue(this.value)), this.addEventListener("wje-radio:input", (e) => {
+      this.removeCheck(), this.setRadioToChekced(e.detail.context);
+    });
+  }
+  /**
+   * Returns the radio button with the given value.
+   *
+   * @param {string} value - The value of the radio button.
+   * @returns {Radio} The radio button.
+   */
+  getRadioByValue(e) {
+    return this.getAllElements().filter((s) => s instanceof r && s.value === e)[0];
+  }
+  /**
+   * Removes the check from all radio buttons.
+   */
+  removeCheck() {
+    this.getAllElements().forEach((e) => {
+      e instanceof r && (e.checked = !1);
+    });
+  }
+  /**
+   * Sets the given radio button to checked.
+   *
+   * @param {Radio} radio - The radio button to check.
+   */
+  setRadioToChekced(e) {
+    e instanceof r && (this.setAttribute("value", e.value), e.checked = !0);
+  }
+  /**
+   * Returns all the elements in the radio group.
+   *
+   * @returns {Array<Element>} The elements.
+   */
+  getAllElements() {
+    return Array.from(this.childNodes);
+  }
+}
+l.define("wje-radio-group", l);
+export {
+  l as default
+};

package/dist/wje-radio.js

@@ -0,0 +1,46 @@
+var d = Object.defineProperty;
+var s = (o, t, e) => t in o ? d(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var a = (o, t, e) => (s(o, typeof t != "symbol" ? t + "" : t, e), e);
+import p, { event as n } from "./wje-element.js";
+const h = ':host{--wje-radio-margin-top: 0;--wje-radio-margin-bottom: .5rem;--wje-radio-margin-inline: 0;display:block;margin-top:var(--wje-radio-margin-top);margin-bottom:var(--wje-radio-margin-bottom);margin-inline:var(--wje-radio-margin-inline);line-height:100%;padding-left:0}:host label{display:flex;cursor:pointer;position:relative;padding-left:1.5rem;min-width:16px;min-height:16px;margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;box-sizing:border-box;background-color:var(--wje-color-contrast-1);border:1px solid var(--wje-color-contrast-4)}.native-radio input[type=radio]+label:before{border-radius:var(--wje-border-radius-circle);transition:border .3s 0s cubic-bezier(.455,.03,.215,1.33)}.native-radio input[type=radio]:checked+label:before{border-color:var(--wje-color-contrast-6);border-width:5px}.native-radio input[type=radio]:focus+label{color:var(--wje-color)}.native-radio input[type=radio]:focus+label:before{outline:none!important;box-shadow:0 0 #78c8fe}.native-radio input[type=radio]{opacity:0;position:absolute;top:3px;width:16px;height:16px}.native-radio input[type=radio][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-9);opacity:.5}.native-radio input[type=radio][disabled]+label:before{cursor:not-allowed!important}:host([placement=end]) label{padding-left:0;padding-right:26px}:host([placement=end]) label:before{right:0;left:auto}:host([placement=end]) input[type=checkbox]:checked+label{position:relative}:host([placement=end]) input[type=checkbox]:checked+label:after{position:absolute;right:0;left:auto}:host([color=primary]) input[type=radio]:checked+label:before{border-color:var(--wje-color-primary-9)}:host([color=complete]) input[type=radio]:checked+label:before{border-color:var(--wje-color-complete-9)}:host([color=success]) input[type=radio]:checked+label:before{border-color:var(--wje-color-success-9)}:host([color=warning]) input[type=radio]:checked+label:before{border-color:var(--wje-color-warning-9)}:host([color=danger]) input[type=radio]:checked+label:before{border-color:var(--wje-color-danger-9)}:host([color=info]) input[type=radio]:checked+label:before{border-color:var(--wje-color-info-9)}';
+class l extends p {
+  constructor() {
+    super();
+    a(this, "className", "Radio");
+    a(this, "inputEvent", (e) => {
+      this.checked = e.target.checked;
+    });
+    this._checked = !1;
+  }
+  set checked(e) {
+    this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  get checked() {
+    return this._checked;
+  }
+  static get cssStyleSheet() {
+    return h;
+  }
+  static get observedAttributes() {
+    return ["checked"];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(e, b, u) {
+    let c = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("native-radio"), this.color && r.classList.add(this.color), this.input = document.createElement("input"), this.input.type = "radio", this.input.id = "radio", this.input.name = this.name + "-radio", this.input.checked = this.hasAttribute("checked"), this.input.disabled = this.hasAttribute("disabled");
+    let i = document.createElement("label");
+    return i.htmlFor = "radio", i.innerHTML = "<slot></slot>", r.appendChild(this.input), r.appendChild(i), c.appendChild(r), c;
+  }
+  afterDraw() {
+    this.hasAttribute("disabled") || (n.addListener(this, "click", "wje-radio:change"), n.addListener(this, "click", "wje-radio:input"));
+  }
+  disconnectedCallback() {
+    n.removeElement(this);
+  }
+}
+l.define("wje-radio", l);
+export {
+  l as default
+};

package/dist/wje-rate.js

@@ -0,0 +1,260 @@
+var u = Object.defineProperty;
+var d = (r, o, e) => o in r ? u(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e;
+var n = (r, o, e) => (d(r, typeof o != "symbol" ? o + "" : o, e), e);
+import v from "./wje-element.js";
+const p = ":host{--wje-rate-gap: .25rem;display:flex}.native-rate{position:relative;display:flex;gap:var(--wje-rate-gap)}.wje-rate-icon{position:relative;cursor:pointer}.selected{color:var(--wje-color-danger-9)}:host(:not([readonly])) .wje-rate-icon:hover{transform:scale(1.2)}.half wje-icon:first-child{color:var(--wje-color)}.half wje-icon:last-child{color:currentColor;position:absolute;top:0;left:0}:host([disabled]) .native-rate{pointer-events:none;opacity:.5}";
+class c extends v {
+  /**
+   * Creates an instance of Rate.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    n(this, "className", "Rate");
+    /**
+     * Event handler for the mouse enter event.
+     *
+     * @param {Event} e - The event.
+     */
+    n(this, "onMouseEnter", (e) => {
+      e.preventDefault(), this.hoverValue = this.getValueFromXPosition(e.clientX), this.changeRate();
+    });
+    /**
+     * Event handler for the mouse leave event.
+     *
+     * @param {Event} e - The event.
+     */
+    n(this, "onMouseLeave", (e) => {
+      e.preventDefault(), this.hoverValue = 0, this.changeRate();
+    });
+    /**
+     * Event handler for the mouse move event.
+     *
+     * @param {Event} e - The event.
+     */
+    n(this, "onMouseMove", (e) => {
+      e.preventDefault();
+      let i = this.getValueFromXPosition(e.clientX);
+      i != this.hoverValue && (this.hoverValue = i, this.changeRate());
+    });
+    /**
+     * Event handler for the touch start event.
+     *
+     * @param {Event} e - The event.
+     */
+    n(this, "onTouchStart", (e) => {
+      e.preventDefault(), this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX), this.changeRate();
+    });
+    /**
+     * Event handler for the touch end event.
+     *
+     * @param {Event} e - The event.
+     */
+    n(this, "onTouchEnd", (e) => {
+      e.preventDefault(), this.hoverValue = 0, this.changeRate();
+    });
+    /**
+     * Event handler for the touch move event.
+     *
+     * @param {Event} e - The event.
+     */
+    n(this, "onTouchMove", (e) => {
+      e.preventDefault(), this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX), this.changeRate();
+    });
+    /**
+     * Event handler for the click event.
+     *
+     * @param {Event} e - The event.
+     */
+    n(this, "onClick", (e) => {
+      e.preventDefault(), this.value = +this.hoverValue;
+    });
+  }
+  /**
+   * Sets the precision of the rating component.
+   *
+   * @param {number} value - The value to set.
+   */
+  set precision(e) {
+    this.setAttribute("precision", e);
+  }
+  /**
+   * Gets the precision of the rating component.
+   *
+   * @returns {number} The value of the precision.
+   */
+  get precision() {
+    return this.hasAttribute("precision") ? +this.getAttribute("precision") : 1;
+  }
+  /**
+   * Sets the maximum value of the rating component.
+   *
+   * @param {number} value - The value to set.
+   */
+  set max(e) {
+    this.setAttribute("max", e);
+  }
+  /**
+   * Gets the maximum value of the rating component.
+   *
+   * @returns {number} The value of the maximum value.
+   */
+  get max() {
+    return this.hasAttribute("icons") ? this.icons.length : +this.getAttribute("max");
+  }
+  /**
+   * Sets the icons of the rating component.
+   *
+   * @param {Array<string>} value - The value to set.
+   */
+  set icons(e) {
+    return e;
+  }
+  /**
+   * Gets the icons of the rating component.
+   *
+   * @returns {Array<string>} The value of the icons.
+   */
+  get icons() {
+    return this.hasAttribute("icons") ? JSON.parse(this.getAttribute("icons").replace(/'/g, '"')) : ["star"];
+  }
+  /**
+   * Sets the value of the rating component.
+   *
+   * @param {number} value - The value to set.
+   */
+  set value(e) {
+    this.setAttribute("value", e);
+  }
+  /**
+   * Gets the value of the rating component.
+   *
+   * @returns {number} The value of the value.
+   */
+  get value() {
+    return this.hasAttribute("value") ? +this.getAttribute("value") : 0;
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return p;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["is-hover"];
+  }
+  /**
+   * Called when an attribute changes.
+   *
+   * @param {string} name - The name of the attribute.
+   * @param {string} old - The old value of the attribute.
+   * @param {string} newName - The new value of the attribute.
+   */
+  attributeChangedCallback(e, i, t) {
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(e, i, t) {
+    let a = document.createDocumentFragment(), s = document.createElement("div");
+    if (s.setAttribute("part", "native"), s.classList.add("native-rate"), this.native = s, this.hasAttribute("icons")) {
+      let h = this.icons;
+      for (let l = 0; l < h.length; l++)
+        s.appendChild(this.createIcons(l));
+    } else
+      for (let h = 0; h < this.max; h++)
+        s.appendChild(this.createIcons(h));
+    return this.changeRate(), a.appendChild(s), a;
+  }
+  /**
+   * Adds event listeners after the component is drawn.
+   */
+  afterDraw() {
+    this.hasAttribute("disabled") || this.hasAttribute("readonly") || (this.addEventListener("mouseenter", this.onMouseEnter), this.addEventListener("mouseleave", this.onMouseLeave), this.addEventListener("mousemove", this.onMouseMove), this.addEventListener("touchstart", this.onTouchStart), this.addEventListener("touchend", this.onTouchEnd), this.addEventListener("touchmove", this.onTouchMove), this.addEventListener("click", this.onClick));
+  }
+  /**
+   * Creates the icons for the rating component.
+   *
+   * @param {number} i - The index of the icon.
+   * @returns {Element} The icon element.
+   */
+  createIcons(e) {
+    let i = document.createElement("div");
+    i.classList.add("wje-rate-icon");
+    let t = this.getIcons(e);
+    if (i.appendChild(t), this.value > e && this.value < e + 1) {
+      let a = t.cloneNode(!0);
+      i.appendChild(a);
+    }
+    return i;
+  }
+  /**
+   * Changes the rate of the rating component.
+   */
+  changeRate() {
+    const e = this.native.children, i = this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== void 0 ? this.hoverValue : this.value;
+    for (let t = 0; t < e.length; t++)
+      if (e[t].classList.remove("selected", "hovered"), e[t].children.length > 1 && (e[t].classList.remove("half"), e[t].querySelector("wje-icon:first-child").removeAttribute("style"), e[t].querySelector("wje-icon:last-child").remove()), t < i && e[t].classList.add("selected"), i > t && i < t + 1 && e[t].children.length === 1) {
+        let a = e[t].querySelector("wje-icon").cloneNode(!0);
+        e[t].appendChild(a);
+        let s = (i - t) * 100;
+        e[t].classList.add("half"), e[t].querySelector("wje-icon:first-child").style.clipPath = `inset(0 0 0 ${s}%)`, e[t].querySelector("wje-icon:last-child").style.clipPath = `inset(0 ${s}% 0 0)`;
+      }
+  }
+  /**
+   * Returns the icons for the rating component.
+   *
+   * @param {number} index - The index of the icon.
+   * @returns {Element} The icon element.
+   */
+  getIcons(e) {
+    let i = document.createElement("wje-icon");
+    return i.setAttribute("name", this.max ? this.icons[0] : this.icons[e]), i;
+  }
+  /**
+   * Returns the value from the x position.
+   *
+   * @param {number} coordinate - The x coordinate.
+   * @returns {number} The value.
+   */
+  getValueFromXPosition(e) {
+    const { left: i, right: t, width: a } = this.native.getBoundingClientRect(), s = this.roundToPrecision((e - i) / a * this.max, this.precision);
+    return Math.min(Math.max(s, 0), this.max);
+  }
+  /**
+   * Rounds a number to the given precision.
+   *
+   * @param {number} numberToRound - The number to round.
+   * @param {number} precision - The precision.
+   * @returns {number} The rounded number.
+   */
+  roundToPrecision(e, i = 0.5) {
+    const t = 1 / i;
+    return Math.ceil(e * t) / t;
+  }
+}
+c.define("wje-rate", c);
+export {
+  c as default
+};

package/dist/wje-relative-time.js

@@ -0,0 +1,85 @@
+var h = Object.defineProperty;
+var v = (n, i, e) => i in n ? h(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
+var d = (n, i, e) => (v(n, typeof i != "symbol" ? i + "" : i, e), e);
+import f from "./wje-element.js";
+import { Localizer as p } from "./localize.js";
+class l extends f {
+  /**
+   * Creates an instance of RelativeTime.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    d(this, "className", "RelativeTime");
+    this.localizer = new p(this);
+  }
+  /**
+   * Gets the ISO date of the relative time component.
+   *
+   * @returns {string} The ISO date.
+   */
+  get dateISO() {
+    let e = /* @__PURE__ */ new Date(), t = this.getAttribute("date");
+    return this.hasAttribute("date") && (this.isISODate(t) ? t = t : t = +t * 1e3, e = new Date(t)), e.toISOString();
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [""];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(e, t, u) {
+    let r = document.createDocumentFragment(), a = document.createElement("div");
+    return a.setAttribute("part", "native"), a.classList.add("native-relative-time"), a.innerText = this.getRelativeTimeString(this.dateISO), r.appendChild(a), r;
+  }
+  /**
+   * Returns the relative time string for the given date.
+   *
+   * @param {string} date - The date.
+   * @param {string} lang - The language.
+   * @returns {string} The relative time string.
+   */
+  getRelativeTimeString(e, t = navigator.language) {
+    const r = new Date(e).getTime(), a = Math.round((r - Date.now()) / 1e3), o = [
+      60,
+      3600,
+      86400,
+      86400 * 7,
+      86400 * 30,
+      86400 * 365,
+      1 / 0
+    ], m = ["second", "minute", "hour", "day", "week", "month", "year"], s = o.findIndex((g) => g > Math.abs(a)), c = s ? o[s - 1] : 1;
+    return this.localizer.relativeTime(Math.floor(a / c), m[s], { numeric: "auto" });
+  }
+  /**
+   * Checks if the given string is an ISO date.
+   *
+   * @param {string} str - The string to check.
+   * @returns {boolean} True if the string is an ISO date, false otherwise.
+   */
+  isISODate(e) {
+    return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\+\d{2}:\d{2}|Z)$/.test(e);
+  }
+}
+l.define("wje-relative-time", l);
+export {
+  l as default
+};

package/dist/wje-reorder-dropzone.js

@@ -0,0 +1,27 @@
+var l = Object.defineProperty;
+var i = (t, e, r) => e in t ? l(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var d = (t, e, r) => (i(t, typeof e != "symbol" ? e + "" : e, r), r);
+import c from "./wje-element.js";
+const p = ".dropzone{border:1px dashed lightgrey;border-radius:var(--wje-border-radius-small);margin:.5rem;display:flex;flex-direction:column;align-items:center;overflow:hidden;justify-content:center;min-height:250px;width:200px}";
+class s extends c {
+  constructor() {
+    super();
+    d(this, "className", "ReorderDropzone");
+  }
+  static get cssStyleSheet() {
+    return p;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(r, m, u) {
+    let n = document.createDocumentFragment(), o = document.createElement("div");
+    o.classList.add("dropzone");
+    let a = document.createElement("slot");
+    return o.appendChild(a), n.appendChild(o), n;
+  }
+}
+s.define("wje-reorder-dropzone", s);
+export {
+  s as default
+};

package/dist/wje-reorder-handle.js

@@ -0,0 +1,115 @@
+var x = Object.defineProperty;
+var z = (c, l, e) => l in c ? x(c, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[l] = e;
+var A = (c, l, e) => (z(c, typeof l != "symbol" ? l + "" : l, e), e);
+import D from "./wje-element.js";
+const w = ".disabled{opacity:.3}";
+class E extends D {
+  constructor() {
+    super();
+    A(this, "className", "ReorderHandle");
+    this.addEventListener("mousedown", this.startDrag.bind(this)), this.addEventListener("touchstart", this.startTouchDrag.bind(this));
+  }
+  static get cssStyleSheet() {
+    return w;
+  }
+  static get observedAttributes() {
+    return ["dropzone", "parent"];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw() {
+    const e = document.createDocumentFragment(), s = document.createElement("div");
+    s.classList.add("container"), s.setAttribute("part", "native");
+    const t = document.createElement("slot");
+    return s.appendChild(t), e.appendChild(s), e;
+  }
+  afterDraw() {
+    this.hasAttribute("disabled") && (this.style.opacity = ".3");
+  }
+  startDrag(e) {
+    this.hasAttribute("disabled") || this.hasAttribute("locked") || this.startDragAction(e.clientX, e.clientY);
+  }
+  startTouchDrag(e) {
+    if (this.hasAttribute("disabled") || this.hasAttribute("locked"))
+      return;
+    const s = e.touches[0];
+    this.startDragAction(s.clientX, s.clientY);
+  }
+  startDragAction(e, s) {
+    let t;
+    if (this.hasAttribute("parent")) {
+      const n = this.getAttribute("parent");
+      t = this.closest(n);
+    } else
+      t = this.parentElement;
+    const o = this.getDropzone(t);
+    this.getAttribute("dropzone") || this.setAttribute("dropzone", o.localName);
+    const r = t.getBoundingClientRect(), h = e - r.left, u = s - r.top;
+    let i = document.createElement("div");
+    i.classList.add("sortable-item"), i.style.visibility = "hidden", i.style.height = `${r.height}px`, t.classList.add("dragging"), t.style.position = "fixed", t.style.zIndex = "1000", t.style.width = `${r.width}px`;
+    const p = (n, d) => {
+      t.style.left = `${n - h - document.documentElement.scrollLeft}px`, t.style.top = `${d - u - document.documentElement.scrollTop}px`;
+    };
+    p(e, s);
+    const f = (n) => {
+      var b;
+      p(n.pageX, n.pageY);
+      const d = this.getClosestDropzone(n.clientX, n.clientY);
+      if (!d)
+        return;
+      const y = Array.from(d.children).filter((a) => a !== t && a !== i);
+      for (const a of y) {
+        const m = a.getBoundingClientRect();
+        if (!((b = a.children[0]) != null && b.hasAttribute("locked")) && n.clientY > m.top && n.clientY < m.bottom) {
+          n.clientY < m.top + m.height / 2 ? d.insertBefore(i, a) : d.insertBefore(i, a.nextSibling);
+          break;
+        }
+      }
+    }, g = () => {
+      document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", g), t.classList.remove("dragging"), t.style.position = "", t.style.zIndex = "", t.style.left = "", t.style.top = "", t.style.width = "";
+      const n = i.parentElement;
+      n.insertBefore(t, i), n.removeChild(i), this.reIndexItems(n);
+    };
+    document.addEventListener("mousemove", f), document.addEventListener("mouseup", g), o.insertBefore(i, t);
+  }
+  getDropzone(e) {
+    const s = this.getAttribute("dropzone");
+    if (s) {
+      let t = e.closest(s);
+      if (t)
+        return t;
+    }
+    return e.parentElement;
+  }
+  getClosestDropzone(e, s) {
+    const t = this.getElementsFromPointAll(e, s);
+    for (const o of t)
+      if (o.matches(this.getAttribute("dropzone")))
+        return o;
+    return null;
+  }
+  // Rekurzívne prechádza všetky shadow roots bez opakovania elementov
+  getElementsFromPointAll(e, s, t = document, o = /* @__PURE__ */ new Set()) {
+    if (o.has(t))
+      return [];
+    o.add(t);
+    const r = t.elementsFromPoint(e, s);
+    let h = [...r];
+    for (const u of r)
+      u.shadowRoot && !o.has(u.shadowRoot) && (h = h.concat(this.getElementsFromPointAll(e, s, u.shadowRoot, o)));
+    return h;
+  }
+  reIndexItems(e) {
+    const s = Array.from(e.children);
+    let t = 0;
+    s.forEach((o) => {
+      var r;
+      (r = o.children[0]) != null && r.hasAttribute("locked"), o.dataset.index = t, t++;
+    });
+  }
+}
+E.define("wje-reorder-handle", E);
+export {
+  E as default
+};

package/dist/wje-reorder-item.js

@@ -0,0 +1,32 @@
+var l = Object.defineProperty;
+var c = (t, e, r) => e in t ? l(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var s = (t, e, r) => (c(t, typeof e != "symbol" ? e + "" : e, r), r);
+import m, { WjElementUtils as p } from "./wje-element.js";
+const u = ":host{--reorder-item-spacing: .5rem}.item{width:134px;height:19px;display:flex;align-items:center;justify-content:left;position:relative;gap:var(--reorder-item-spacing);padding:var(--reorder-item-spacing);border-radius:var(--wje-border-radius-small);background-color:var(--reorder-background-color);cursor:grab;transition:top .3s ease,left .3s ease}.item-w-handle{cursor:default}.item-w-handle:active{opacity:.3}.item:active:not(.item-w-handle):not(.moving){background-color:var(--reorder-background-color);cursor:grabbing}.moving{background-color:#d3d3d3}.handle{cursor:grab;gap:10px}.handle:active{cursor:grabbing}.name{width:108px;height:19px;text-align:center;font-size:var(--wje-font-size-medium);font-weight:400;line-height:19.36px;gap:10px}.item{transform:var(--item-transform)}";
+class d extends m {
+  constructor() {
+    super();
+    s(this, "className", "ReorderItem");
+  }
+  static get cssStyleSheet() {
+    return u;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(r, g, h) {
+    let o = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("item"), a.setAttribute("part", "native-reorder-item");
+    let i = document.createElement("slot");
+    if (i.classList.add("name"), p.hasSlot(this, "handle")) {
+      const n = document.createElement("slot");
+      n.classList.add("handle"), n.setAttribute("name", "handle"), n.setAttribute("part", "handle-part"), a.classList.add("item-w-handle"), a.appendChild(n);
+    } else
+      i.setAttribute("draggable", "true");
+    return a.appendChild(i), o.appendChild(a), o;
+  }
+}
+d.define("wje-reorder-item", d);
+export {
+  d as default
+};