wj-elements 0.1.4 → 0.1.6

package/dist/wje-rate.js

@@ -1,260 +0,0 @@
-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)}:host(:not([readonly])) .wje-rate-icon:hover{transform:scale(1.2)}.half wje-icon:first-child{color:#fff}.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-filled"];
-  }
-  /**
-   * 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

@@ -1,85 +0,0 @@
-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 { L as p } from "./localize-DVuO3S17.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-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
-};