wj-elements 0.1.13 → 0.1.15

package/dist/wje-reorder-item.js

@@ -0,0 +1,32 @@
+var l = Object.defineProperty;
+var m = (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) => (m(t, typeof e != "symbol" ? e + "" : e, r), r);
+import c, { WjElementUtils as p } from "./wje-element.js";
+const g = ":host{--reorder-item-spacing: .5rem}.item{width:134px;height:19px;display:flex;align-items:center;justify-content:center;position:relative;gap:var(--reorder-item-spacing);padding:var(--reorder-item-spacing);border-radius:var(--wje-border-radius-small);cursor:grab;transition:transform .3s linear}.item-w-handle{cursor:default}.item:hover:not(.item-w-handle){background-color:#f4f4f5}.item:active:not(.item-w-handle):not(.moving){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}.drag--down{--item-transform: translateY(-10px)}.drag--up{--item-transform: translateY(10px)}.item{transform:var(--item-transform)}";
+class o extends c {
+  constructor() {
+    super();
+    d(this, "className", "ReorderItem");
+  }
+  static get cssStyleSheet() {
+    return g;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(r, h, u) {
+    let s = 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), s.appendChild(a), s;
+  }
+}
+o.define("wje-reorder-item", o);
+export {
+  o as default
+};

package/dist/wje-reorder.js

@@ -0,0 +1,132 @@
+var p = Object.defineProperty;
+var u = (d, o, e) => o in d ? p(d, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[o] = e;
+var h = (d, o, e) => (u(d, typeof o != "symbol" ? o + "" : o, e), e);
+import f from "./wje-element.js";
+const E = ".container{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column}.container-w-dropzones{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:row}";
+class g extends f {
+  /**
+   * Creates an instance of Select.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    h(this, "className", "Select");
+    this.dragEl = null, this.items = [], this.originalIndex = null;
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return E;
+  }
+  /**
+   * 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";
+  }
+  draw(e, t, r) {
+    const a = document.createDocumentFragment(), n = document.createElement("div");
+    n.classList.add("container"), n.setAttribute("part", "native");
+    const s = document.createElement("slot");
+    return s.classList.add("reorder-items"), n.appendChild(s), a.appendChild(n), this.container = n, a;
+  }
+  afterDraw(e, t, r) {
+    const a = this.querySelectorAll("wje-reorder-item"), n = this.querySelectorAll("wje-reorder-dropzone");
+    n && n.forEach((s) => {
+      this.container.classList.remove("container"), this.container.classList.add("container-w-dropzones");
+    }), a && a.forEach((s) => {
+      const i = s.querySelectorAll("[slot=handle]");
+      (i.length > 0 ? i : [s]).forEach((c) => {
+        c.setAttribute("draggable", "true"), this.attachEventListeners(c);
+      });
+    });
+  }
+  onDragStart(e) {
+    if (this.hasAttribute("disabled")) {
+      e.preventDefault();
+      return;
+    }
+    const t = new Image();
+    t.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=", e.dataTransfer.setDragImage(t, 0, 0), this.dragEl = e.currentTarget.closest("wje-reorder-item"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/html", `${this.dragEl.innerHTML}`), this.originalIndex = [...this.dragEl.parentNode.children].indexOf(
+      this.dragEl
+    ), this.originalParent = this.dragEl.parentNode;
+  }
+  onDragOver(e) {
+    e.preventDefault();
+    const t = e.currentTarget.closest("wje-reorder-item"), r = t.parentNode;
+    this.dragEl !== t ? (this.updateDropStyles(t, this.isMovingDown(e)), this.updateItemsPosition(r, t, this.isMovingDown(e))) : t.shadowRoot.querySelector("div").classList.add("moving");
+  }
+  onDragEnter(e) {
+  }
+  onDragLeave(e) {
+  }
+  onDrop(e) {
+    e.preventDefault();
+    const t = e.currentTarget.closest("wje-reorder-item");
+    if (t.shadowRoot.querySelector("div").classList.remove("moving"), !t.parentNode)
+      return;
+    t.parentNode.insertBefore(this.dragEl, t);
+  }
+  onDragEnd(e) {
+    const t = this.dragEl.parentNode, r = Array.from(t.children).indexOf(this.dragEl);
+    [t, this.originalParent].forEach((n) => {
+      n.childNodes.forEach((s) => {
+        if (s.nodeType === 1) {
+          const i = s.shadowRoot.querySelector("div");
+          i && ["drag--up", "drag--down", "moving"].forEach(
+            (l) => i.classList.remove(l)
+          );
+        }
+      });
+    });
+    const a = Array.from(t.children).map((n) => {
+      const s = n.cloneNode(!0), i = s.querySelector(".handle");
+      return i && i.remove(), s.innerText.trim();
+    });
+    this.dispatchChange(this.originalIndex, r, a);
+  }
+  attachEventListeners(e) {
+    e.addEventListener("dragstart", this.onDragStart.bind(this), !1), e.addEventListener("touchstart", this.onDragStart.bind(this), !1), e.addEventListener("dragenter", this.onDragEnter.bind(this), !1), e.addEventListener("dragover", this.onDragOver.bind(this), !1), e.addEventListener("dragleave", this.onDragLeave.bind(this), !1), e.addEventListener("drop", this.onDrop.bind(this), !1), e.addEventListener("dragend", this.onDragEnd.bind(this), !1), e.addEventListener("touchend", this.onDragEnd.bind(this), !1);
+  }
+  updateDropStyles(e, t) {
+    const r = e.shadowRoot.querySelector("div").classList;
+    r.toggle("drag--down", t), r.toggle("drag--up", !t);
+  }
+  updateItemsPosition(e, t, r) {
+    e.insertBefore(
+      this.dragEl,
+      r ? t.nextSibling : t
+    );
+  }
+  isMovingDown(e) {
+    const t = e.currentTarget.closest("wje-reorder-item").parentNode, r = Array.from(t.children).indexOf(this.dragEl), a = Array.from(t.children).indexOf(
+      e.currentTarget.closest("wje-reorder-item")
+    );
+    return r < a;
+  }
+  dispatchChange(e, t, r) {
+    console.log("FROM:", e), console.log("TO:", t), console.log("ORDER:", r), this.dispatchEvent(
+      new CustomEvent("wje-reorder:change", {
+        detail: { from: e, to: t, order: r }
+      })
+    );
+  }
+}
+g.define("wje-reorder", g);
+export {
+  g as default
+};

package/dist/wje-route.js

@@ -0,0 +1,28 @@
+var u = Object.defineProperty;
+var a = (t, e, r) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var s = (t, e, r) => (a(t, typeof e != "symbol" ? e + "" : e, r), r);
+import c from "./wje-element.js";
+class o extends c {
+  /**
+   * Creates an instance of Route.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    s(this, "className", "Route");
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+}
+o.define("wje-route", o);
+export {
+  o as default
+};

package/dist/wje-router-link.js

@@ -0,0 +1,64 @@
+var a = Object.defineProperty;
+var c = (e, t, s) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var n = (e, t, s) => (c(e, typeof t != "symbol" ? t + "" : t, s), s);
+import u from "./wje-element.js";
+import { b as l } from "./router-links-FtZbFUto.js";
+const d = ":host{display:block;background:transparent!important}:host(.active){cursor:pointer;font-weight:700}";
+class o extends u {
+  /**
+   * Creates an instance of RouterLink.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    n(this, "className", "RouterLink");
+    this.unbindRouterLinks = l(this, { selector: !1 });
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return d;
+  }
+  /**
+   * 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", this.setAttribute("active-class", "active");
+  }
+  /**
+   * 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(s, m, p) {
+    let r = document.createDocumentFragment(), i = document.createElement("slot");
+    return r.appendChild(i), r;
+  }
+  /**
+   * Cleans up before the component is disconnected.
+   */
+  beforeDisconnect() {
+    this.unbindRouterLinks();
+  }
+}
+o.define("wje-router-link", o);
+export {
+  o as default
+};

package/dist/wje-router-outlet.js

@@ -0,0 +1,127 @@
+var C = Object.defineProperty;
+var E = (i, t, n) => t in i ? C(i, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[t] = n;
+var m = (i, t, n) => (E(i, typeof t != "symbol" ? t + "" : t, n), n);
+import b from "./wje-element.js";
+class $ {
+  constructor(t = {}) {
+    this.options = t;
+  }
+  getOption(t, n) {
+    return t.hasAttribute(n) ? t.getAttribute(n) : this.options[n];
+  }
+  hasOption(t, n) {
+    return t.hasAttribute(n) || this.options[n];
+  }
+  runParallel(t) {
+    return this.hasOption(t, "parallel");
+  }
+  beforeEnter(t, n) {
+  }
+  enter(t, n) {
+  }
+  leave(t, n, e) {
+    e();
+  }
+}
+var p = window.requestAnimationFrame, v = "transition", L = "animation", d = "transition", N = "transitionend", c = "animation", D = "animationend";
+function O(i) {
+  window.scrollTo(0, 0), p(function() {
+    window.scrollTo(0, 0), p(i);
+  });
+}
+function x(i, t) {
+  var n = k(i), e = n.type, r = n.timeout, l = n.propCount;
+  if (!e)
+    return t();
+  var s = e === v ? N : D, u = 0, o = function() {
+    i.removeEventListener(s, a), t();
+  }, a = function(h) {
+    h.target === i && ++u >= l && o();
+  };
+  setTimeout(function() {
+    u < l && o();
+  }, r + 1), i.addEventListener(s, a);
+}
+function k(i) {
+  var t = window.getComputedStyle(i), n = (t[d + "Delay"] || "").split(", "), e = (t[d + "Duration"] || "").split(", "), r = f(n, e), l = (t[c + "Delay"] || "").split(", "), s = (t[c + "Duration"] || "").split(", "), u = f(l, s), o, a = 0, h = 0;
+  return a = Math.max(r, u), o = a > 0 ? r > u ? v : L : null, h = o ? o === v ? e.length : s.length : 0, {
+    type: o,
+    timeout: a,
+    propCount: h
+  };
+}
+function f(i, t) {
+  for (; i.length < t.length; )
+    i = i.concat(i);
+  return Math.max.apply(null, t.map(function(n, e) {
+    return g(n) + g(i[e]);
+  }));
+}
+function g(i) {
+  return Number(i.slice(0, -1).replace(",", ".")) * 1e3;
+}
+function A(i, t, n, e) {
+  i.classList.add(`${t}-${n}-active`), O(function() {
+    window.scrollTo(0, 0), i.classList.remove(`${t}-${n}`), i.classList.add(`${t}-${n}-to`), x(i, function() {
+      i.classList.remove(`${t}-${n}-active`, `${t}-${n}-to`), e && e();
+    });
+  });
+}
+class y extends $ {
+  beforeEnter(t, n) {
+    const e = t.getAttribute("animation") || "outlet";
+    n.classList.add(`${e}-enter`);
+  }
+  enter(t, n) {
+    const e = t.getAttribute("animation") || "outlet";
+    A(n, e, "enter");
+  }
+  leave(t, n, e) {
+    const r = t.getAttribute("animation") || "outlet";
+    n.classList.add(`${r}-leave`), n.style.display = "none", A(n, r, "leave", e);
+  }
+}
+const I = {};
+let w;
+function T(i) {
+  return I[i] || w || (w = new y());
+}
+class M extends HTMLElement {
+  appendChild(t) {
+    if (!this.hasAttribute("animation")) {
+      super.appendChild(t);
+      return;
+    }
+    const n = T(this.getAttribute("animation")), e = n.runParallel(this);
+    n.beforeEnter(this, t), super.appendChild(t), !e && this.removing ? this.appending = t : n.enter(this, t);
+  }
+  removeChild(t) {
+    if (!this.hasAttribute("animation")) {
+      super.removeChild(t);
+      return;
+    }
+    const n = T(this.getAttribute("animation"));
+    if (this.removing && this.removing.parentNode === this && super.removeChild(this.removing), t === this.appending) {
+      t.parentNode === this && super.removeChild(t), this.removing = null;
+      return;
+    }
+    this.removing = t, n.leave(this, t, () => {
+      this.removing && this.removing.parentNode === this && super.removeChild(this.removing), this.appending && n.enter(this, this.appending), this.appending = null, this.removing = null;
+    });
+  }
+}
+class P extends M {
+  /**
+   * Creates an instance of Route.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    m(this, "className", "RouterOutlet");
+  }
+}
+b.define("wje-router-outlet", P);
+export {
+  P as default
+};