wj-elements 0.1.48 → 0.1.49

package/dist/wje-reorder.js

@@ -0,0 +1,138 @@
+var f = Object.defineProperty;
+var E = (a, l, e) => l in a ? f(a, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[l] = e;
+var g = (a, l, e) => (E(a, typeof l != "symbol" ? l + "" : l, e), e);
+import m from "./wje-element.js";
+const p = ".container{position:relative;display:flex;align-items:center;justify-content:center;margin:auto;flex-direction:var(--flex-direction)}.container-w-dropzones{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:row}.reversed{--flex-direction: column-reverse}.basic{--flex-direction: column}.dragging{position:absolute;pointer-events:none;z-index:1000}.reorder-item{transition:top .3s ease,left .3s ease}";
+class u extends m {
+  /**
+   * Creates an instance of Select.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    g(this, "className", "Select");
+    this.dragEl = null, this.items = [], this.originalIndex = null, this.isDragging = !1, this.offsetX = 0, this.offsetY = 0, this.cloneEl = null;
+  }
+  /**
+   * 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 [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(e, t, i) {
+    const s = document.createDocumentFragment(), n = document.createElement("div");
+    n.classList.add("container"), n.setAttribute("part", "native");
+    const o = document.createElement("slot");
+    return o.classList.add("reorder-items"), n.appendChild(o), s.appendChild(n), this.container = n, s;
+  }
+  afterDraw(e, t, i) {
+    const s = this.querySelectorAll("wje-reorder-item"), n = this.querySelectorAll("wje-reorder-dropzone");
+    this.container.classList.add(this.hasAttribute("reverse") ? "reversed" : "basic"), n && n.forEach((o) => {
+      this.container.classList.remove("container"), this.container.classList.add("container-w-dropzones");
+    }), s && s.forEach((o) => {
+      const d = o.querySelectorAll("[slot=handle]");
+      (d.length > 0 ? d : [o]).forEach((c) => {
+        this.attachEventListeners(c);
+      });
+    });
+  }
+  attachEventListeners(e) {
+    e.addEventListener("mousedown", this.onMouseDown.bind(this), !1), e.addEventListener("touchstart", this.onTouchStart.bind(this), !1), e.addEventListener("dragstart", this.onDragStart.bind(this), !1);
+  }
+  /*Initialization of dragging
+  **********************************************************************************/
+  onMouseDown(e) {
+    this.startDragging(e.clientX, e.clientY, e.currentTarget), document.addEventListener("mousemove", this.onMouseMove.bind(this), !1), document.addEventListener("mouseup", this.onMouseUp.bind(this), !1), document.body.style.userSelect = "none";
+  }
+  onTouchStart(e) {
+    const t = e.touches[0];
+    this.startDragging(t.clientX, t.clientY, e.currentTarget), document.addEventListener("touchmove", this.onTouchMove.bind(this), !1), document.addEventListener("touchend", this.onTouchEnd.bind(this), !1), document.body.style.userSelect = "none";
+  }
+  startDragging(e, t, i) {
+    if (this.hasAttribute("disabled"))
+      return;
+    this.isDragging = !0, this.dragEl = i.closest("wje-reorder-item"), this.createClone(), this.dragEl.style.opacity = "0.3";
+    const s = this.dragEl.getBoundingClientRect();
+    this.offsetX = e - s.left, this.offsetY = t - s.top, this.dragEl.classList.add("dragging"), this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl), this.originalParent = this.dragEl.parentNode;
+  }
+  /*Initialization of movement
+  **********************************************************************************/
+  onMouseMove(e) {
+    this.isDragging && (this.moveElement(e.pageX, e.pageY), this.cloneEl && (this.cloneEl.style.left = `${e.pageX - this.offsetX}px`, this.cloneEl.style.top = `${e.pageY - this.offsetY}px`));
+  }
+  onTouchMove(e) {
+    if (!this.isDragging)
+      return;
+    const t = e.touches[0];
+    this.moveElement(t.pageX, t.pageY);
+  }
+  moveElement(e, t) {
+    const i = window.scrollX || document.documentElement.scrollLeft, s = window.scrollY || document.documentElement.scrollTop, n = e - i, o = t - s;
+    this.dragEl.style.left = `${n}px`, this.dragEl.style.top = `${o}px`, this.cloneEl && (this.cloneEl.style.left = `${n}px`, this.cloneEl.style.top = `${o}px`), this.querySelectorAll("wje-reorder-item").forEach((r) => {
+      if (r === this.dragEl)
+        return;
+      const c = r.getBoundingClientRect(), h = (o - c.top) / c.height * 100;
+      h > 30 && this.isMovingDown(r) ? r.parentNode.insertBefore(this.dragEl, r.nextSibling) : h < 30 && !this.isMovingDown(r) && r.parentNode.insertBefore(this.dragEl, r);
+    });
+  }
+  /*End of dragging
+  **********************************************************************************/
+  onMouseUp() {
+    this.stopDragging(), document.removeEventListener("mousemove", this.onMouseMove.bind(this), !1), document.removeEventListener("mouseup", this.onMouseUp.bind(this), !1), this.cloneEl && (this.cloneEl.remove(), this.cloneEl = null), this.dragEl && (this.dragEl.style.opacity = "1");
+  }
+  onTouchEnd() {
+    this.stopDragging(), document.removeEventListener("touchmove", this.onTouchMove.bind(this), !1), document.removeEventListener("touchend", this.onTouchEnd.bind(this), !1);
+  }
+  stopDragging() {
+    if (!this.isDragging)
+      return;
+    this.isDragging = !1, this.dragEl.classList.remove("dragging"), this.dragEl.style.left = "", this.dragEl.style.top = "";
+    const e = this.dragEl.parentNode, t = Array.from(e.children).indexOf(this.dragEl), i = Array.from(e.children).map((s) => {
+      const n = s.cloneNode(!0), o = n.querySelector(".handle");
+      return o && o.remove(), n.innerText.trim();
+    });
+    this.dispatchChange(this.originalIndex, t, i), document.body.style.userSelect = "";
+  }
+  onDragStart(e) {
+    e.preventDefault();
+  }
+  /*Helpers
+  **********************************************************************************/
+  createClone() {
+    this.cloneEl = this.dragEl.cloneNode(!0), this.cloneEl.style.position = "absolute", this.cloneEl.style.pointerEvents = "none", this.cloneEl.style.visibility = "visible", document.body.appendChild(this.cloneEl);
+  }
+  isMovingDown(e) {
+    const t = e.parentNode, i = Array.from(t.children).indexOf(this.dragEl), s = Array.from(t.children).indexOf(e);
+    return i < s;
+  }
+  dispatchChange(e, t, i) {
+    console.log("FROM:", e), console.log("TO:", t), console.log("ORDER:", i), this.dispatchEvent(
+      new CustomEvent("wje-reorder:change", {
+        detail: { from: e, to: t, order: i }
+      })
+    );
+  }
+}
+u.define("wje-reorder", u);
+export {
+  u as default
+};

package/dist/wje-route.js

@@ -0,0 +1,46 @@
+var u = Object.defineProperty;
+var c = (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) => (c(t, typeof e != "symbol" ? e + "" : e, r), r);
+import m from "./wje-element.js";
+class a extends m {
+  /**
+   * 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 [];
+  }
+  /**
+   * 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(r, d, l) {
+    let o = document.createDocumentFragment(), n = document.createElement("slot");
+    return o.appendChild(n), o;
+  }
+}
+a.define("wje-route", a);
+export {
+  a 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
+};