wj-elements 0.1.11 → 0.1.13

package/dist/wje-reorder-item.js

@@ -1,32 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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
-};