wj-elements 0.1.14 → 0.1.16

package/dist/wje-icon-picker.js

@@ -1,221 +0,0 @@
-var w = Object.defineProperty;
-var g = (l, o, e) => o in l ? w(l, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[o] = e;
-var p = (l, o, e) => (g(l, typeof o != "symbol" ? o + "" : o, e), e);
-import b, { event as j } from "./wje-element.js";
-import u from "./wje-infinite-scroll.js";
-import v from "./wje-input.js";
-import f from "./wje-tooltip.js";
-import "./wje-popup.js";
-import { P as k } from "./popup.element-CpEjis9f.js";
-const x = ":host{--wje-icon-picker-radius: var(--wje-border-radius-small);--wje-icon-picker-icon-size: 1.5rem;--wje-icon-picker-border-width: 1px;--wje-icon-picker-border-style: solid;--wje-icon-picker-border-color: var(--wje-border-color);--wje-icon-picker-padding: .25rem;padding:0 1rem}.anchor{width:var(--wje-icon-picker-icon-size);height:var(--wje-icon-picker-icon-size);padding:var(--wje-icon-picker-padding);border-width:var(--wje-icon-picker-border-width);border-style:var(--wje-icon-picker-border-style);border-color:var(--wje-icon-picker-border-color);box-sizing:border-box;border-radius:var(--wje-icon-picker-radius)}.picker{width:320px;height:271px;box-shadow:0 0 5px #0000000d,0 5px 20px #0000001a;border-radius:var(--wje-icon-picker-radius);border-width:var(--wje-icon-picker-border-width);border-style:var(--wje-icon-picker-border-style);border-color:var(--wje-icon-picker-border-color);overflow:auto;padding:1rem;background:var(--wje-background)}.icon-items{--icon-min-width: 2rem;display:grid;grid-gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(var(--icon-min-width),1fr))}.icon-item{box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;color:inherit;padding:.25rem;min-height:var(--wje-icon-picker-icon-size);min-width:var(--wje-icon-picker-icon-size);text-decoration:none}.icon-item:hover{border-radius:.25rem;background:var(--wje-border-color)}.wje-size{--wje-icon-size: 24px !important}icon-item svg{width:var(--wje-icon-picker-icon-size);height:var(--wje-icon-picker-icon-size)}wje-input{--wje-input-border-radius: 4px;--wje-input-margin-bottom: 0}wje-infinite-scroll{margin-top:1rem}wje-select{--wje-select-border-width: 0 0 1px 0 !important;--wje-select-border-radius: 0 !important;margin-bottom:1rem}.anchor wje-icon{--wje-icon-size: 100% !important}";
-class m extends b {
-  /**
-   * Creates an instance of IconPicker.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Dependencies of the IconPicker component.
-     *
-     * @property {Object} depandencies
-     */
-    p(this, "depandencies", {
-      "wje-input": v,
-      "wje-infinite-scroll": u,
-      "wje-tooltip": f,
-      "wje-popup": k
-    });
-    p(this, "className", "IconPicker");
-    /**
-     * Event handler for searching icons.
-     *
-     * @param {Event} e - The event.
-     */
-    p(this, "searchIcon", (e) => {
-      this.infiniteScroll.unScrollEvent(), this.infiniteScroll.setCustomData = (i = 0) => {
-        let t = this.tags.filter((n) => n.tags.includes(e.detail.value));
-        return {
-          data: t,
-          page: i,
-          size: this.size,
-          totalPages: Math.round(t.length / this.size)
-        };
-      }, this.clearIconsContainer(), this.infiniteScroll.loadPages();
-    });
-    /**
-     * Closes the component.
-     */
-    p(this, "onClose", () => {
-      this.popup.onHide();
-    });
-    /**
-     * Gets the URL of the tags.
-     *
-     * @param {string} path - The path to get the URL of.
-     * @returns {string} The URL of the tags.
-     */
-    p(this, "getTagsUrl", (e) => {
-      let i = new URL(import.meta.url), t = i.pathname, r = t.substring(0, t.lastIndexOf("/"));
-      return new URL(i.origin + r + e).href;
-    });
-    this.size = 48;
-  }
-  /**
-   * Setter for the markerPosition property.
-   *
-   * @param {any} value - The value to set.
-   */
-  set markerPosition(e) {
-    this._markerPosition = e;
-  }
-  /**
-   * Getter for the markerPosition property.
-   *
-   * @returns {any} The value of the markerPosition property.
-   */
-  get markerPosition() {
-    return this._markerPosition;
-  }
-  /**
-   * Setter for the swatches property.
-   *
-   * @param {any} value - The value to set.
-   */
-  set swatches(e) {
-    this.setAttribute("swatches", e.split(","));
-  }
-  /**
-   * Getter for the swatches property.
-   *
-   * @returns {any} The value of the swatches property.
-   */
-  get swatches() {
-    return this._swatches;
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return x;
-  }
-  /**
-   * 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";
-  }
-  /**
-   * Prepares the component before drawing.
-   */
-  async beforeDraw() {
-    this.tags = Object.values(await this.getTags()), this.category = this.getCategory(this.tags);
-  }
-  /**
-   * 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 r = document.createDocumentFragment(), n = document.createElement("div");
-    n.classList.add("native-color-picker");
-    let d = document.createElement("div");
-    d.setAttribute("slot", "anchor"), d.classList.add("anchor");
-    let h = document.createElement("div");
-    h.classList.add("picker");
-    let s = document.createElement("wje-input");
-    s.classList.add("input"), s.setAttribute("variant", "standard"), s.setAttribute("placeholder", "type to filter..."), s.setAttribute("clearable", ""), s.addEventListener("wje-input:input", this.searchIcon);
-    let a = new u();
-    a.setAttribute("url", this.getTagsUrl("/assets/tags.json")), a.setAttribute("placement", ".icon-items"), a.setAttribute("size", this.size), a.setAttribute("height", "223px"), a.innerHTML = `<div class="icon-items">
-            <div class="icon-item" iterate>
-                <wje-tooltip content="{{name}}">
-                    <wje-icon name="{{name}}" size="large"></wje-icon>
-                </wje-tooltip>
-            </div>
-        </div>`, h.appendChild(s), h.appendChild(a);
-    let c = document.createElement("wje-popup");
-    return c.setAttribute("placement", this.placement || "bottom-start"), c.setAttribute("offset", this.offset), c.setAttribute("manual", ""), c.appendChild(d), c.appendChild(h), n.appendChild(c), r.appendChild(n), this.popup = c, this.input = s, this.anchor = d, this.picker = h, this.infiniteScroll = a, r;
-  }
-  /**
-   * Called after the component has been drawn.
-   */
-  afterDraw() {
-    this.setupInfiniteScroll(), this.addEventListener("wje-popup:show", (e) => {
-      this.initial();
-    }), this.addEventListener("wje-input:clear", (e) => {
-      this.setupInfiniteScroll(), this.clearIconsContainer(), this.infiniteScroll.scrollEvent(), this.infiniteScroll.loadPages(0);
-    }), this.addEventListener("wje-infinite-scroll:click-item", (e) => {
-      const t = e.detail.context.querySelector("wje-icon").getAttribute("name"), r = this.tags.find((d) => d.name === t), n = document.createElement("wje-icon");
-      n.setAttribute("name", t), r.icon = n, this.value = r, this.anchor.innerHTML = "", this.anchor.appendChild(n), j.dispatchCustomEvent(this, "wje-icon-picker:select", r);
-    }), this.init = !1;
-  }
-  /**
-   * Initializes the component.
-   */
-  initial() {
-    this.infiniteScroll.scrollEvent();
-  }
-  /**
-   * Sets up the infinite scroll for the component.
-   */
-  setupInfiniteScroll() {
-    this.infiniteScroll.setCustomData = (e = 0) => {
-      let i = Object.values(this.tags);
-      return {
-        data: i.slice(e * this.size, e * this.size + this.size),
-        page: e,
-        size: this.size,
-        totalPages: Math.round(i.length / this.size)
-      };
-    };
-  }
-  /**
-   * Gets the category of the tags.
-   *
-   * @param {Array} tags - The tags to get the category of.
-   * @returns {Array} The category of the tags.
-   */
-  getCategory(e) {
-    return [...new Set(e.map((t) => t.category))];
-  }
-  /**
-   * Gets the tags.
-   *
-   * @returns {Promise<Array>} The tags.
-   */
-  async getTags() {
-    return (await fetch(this.getTagsUrl("/assets/tags.json"))).json();
-  }
-  /**
-   * Called when the component is disconnected.
-   */
-  disconnectedCallback() {
-    this.init = !1;
-  }
-  /**
-   * Clears the icons container.
-   */
-  clearIconsContainer() {
-    this.context.querySelector(".icon-items").innerHTML = "";
-  }
-}
-m.define("wje-icon-picker", m);
-export {
-  m as default
-};

package/dist/wje-icon.js

@@ -1,119 +0,0 @@
-var g = Object.defineProperty;
-var w = (e, t, r) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var d = (e, t, r) => (w(e, typeof t != "symbol" ? t + "" : t, r), r);
-import m from "./wje-element.js";
-const n = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
-let l;
-const j = (e) => c(e) && (e = e.trim(), z(e)) ? e : null, z = (e) => e.length > 0 && /(\/|\.)/.test(e), p = (e) => e.startsWith("data:image/svg+xml"), x = (e) => e.indexOf(";utf8,") !== -1, c = (e) => typeof e == "string", b = (e) => {
-  const t = document.createElement("div");
-  t.innerHTML = e;
-  const r = t.firstElementChild;
-  return r && r.nodeName.toLowerCase() === "svg" && (r.getAttribute("class"), f(r)) ? t.innerHTML : "";
-}, f = (e) => {
-  if (e.nodeType === 1) {
-    if (e.nodeName.toLowerCase() === "script")
-      return !1;
-    for (let t = 0; t < e.attributes.length; t++) {
-      const r = e.attributes[t].name;
-      if (c(r) && r.toLowerCase().indexOf("on") === 0)
-        return !1;
-    }
-    for (let t = 0; t < e.childNodes.length; t++)
-      if (!f(e.childNodes[t]))
-        return !1;
-  }
-  return !0;
-}, y = (e, t) => {
-  let r = v.get(e);
-  if (!r)
-    if (typeof fetch < "u" && typeof document < "u")
-      if (p(e) && x(e)) {
-        l || (l = new DOMParser());
-        const s = l.parseFromString(e, "text/html").querySelector("svg");
-        return s && n.set(e, s.outerHTML), Promise.resolve();
-      } else
-        r = fetch(e).then((o) => {
-          if (o.ok)
-            return o.text().then((s) => {
-              s && t !== !1 && (s = b(s)), n.set(e, s || "");
-            });
-          n.set(e, "");
-        }), v.set(e, r);
-    else
-      return n.set(e, ""), Promise.resolve();
-  return r;
-}, k = (e) => {
-  let t = j(e.src);
-  return t || (t = L(e.name), t ? S(t, e.hasAttribute("filled")) : null);
-}, L = (e) => !c(e) || e.trim() === "" || e.replace(/[a-z]|-|\d/gi, "") !== "" ? null : e, S = (e, t = !1) => {
-  const r = `/assets/img/icons/${t ? "filled" : "outline"}/${e}.svg`;
-  let o = new URL(import.meta.url), s = o.pathname, i = s.substring(0, s.lastIndexOf("/"));
-  return new URL(o.origin + i + r).href;
-}, E = '.native-icon{display:flex;align-items:center;width:var(--wje-icon-size);height:var(--wje-icon-size)}svg{width:100%;height:100%;stroke-width:var(--wje-icon-stroke);color:var(--wje-icon-color)}:host([stroke="1"]){--wje-icon-stroke: 1}:host([stroke="1.25"]){--wje-icon-stroke: 1.25}:host([stroke="1.5"]){--wje-icon-stroke: 1.5}:host([stroke="1.75"]){--wje-icon-stroke: 1.75}:host([stroke="2"]){--wje-icon-stroke: 2}:host([size="x-small"]){--wje-icon-size: var(--wje-size-x-small)}:host([size="small"]){--wje-icon-size: var(--wje-size-small)}:host([size="medium"]){--wje-icon-size: var(--wje-size-medium)}:host([size="large"]){--wje-icon-size: var(--wje-size-large)}:host([size="x-large"]){--wje-icon-size: var(--wje-size-x-large)}:host([size="2x-large"]){--wje-icon-size: var(--wje-size-2x-large)}:host([size="3x-large"]){--wje-icon-size: var(--wje-size-3x-large)}:host([size="4x-large"]){--wje-icon-size: var(--wje-size-4x-large)}:host([color="primary"]) .native-icon{color:var(--wje-color-primary-11)}:host([color="complete"]) .native-icon{color:var(--wje-color-complete-11)}:host([color="success"]) .native-icon{color:var(--wje-color-success-11)}:host([color="warning"]) .native-icon{color:var(--wje-color-warning-11)}:host([color="danger"]) .native-icon{color:var(--wje-color-danger-11)}:host([color="info"]) .native-icon{color:var(--wje-color-info-11)}:host([color="menu"]) .native-icon{color:var(--wje-color-contrast-11)}';
-class u extends m {
-  /**
-   * Creates an instance of IconElement.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    d(this, "className", "Icon");
-  }
-  /**
-   * 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 ["name"];
-  }
-  /**
-   * 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, o, s) {
-    let i = document.createDocumentFragment();
-    this.classList.add("lazy-loaded-image", "lazy");
-    let a = document.createElement("div");
-    return a.setAttribute("part", "native"), a.classList.add("native-icon"), this.url = k(this), i.appendChild(a), this.native = a, i;
-  }
-  /**
-   * Called after the component has been drawn.
-   */
-  afterDraw() {
-    let r = new IntersectionObserver((o, s) => {
-      o.forEach((i) => {
-        i.isIntersecting && (y(this.url).then((a) => {
-          var h;
-          this.native.innerHTML = n == null ? void 0 : n.get(this.url), (h = this.native.querySelector("svg")) == null || h.setAttribute("part", "svg");
-        }), this.classList.remove("lazy"), r.unobserve(i.target));
-      });
-    });
-    r.observe(this.native);
-  }
-}
-u.define("wje-icon", u);
-export {
-  u as default
-};

package/dist/wje-img-comparer.js

@@ -1,111 +0,0 @@
-var f = Object.defineProperty;
-var h = (i, e, t) => e in i ? f(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var c = (i, e, t) => (h(i, typeof e != "symbol" ? e + "" : e, t), t);
-import w from "./wje-element.js";
-import g from "./wje-icon.js";
-function b(i, e) {
-  function t(o) {
-    const d = i.getBoundingClientRect(), r = i.ownerDocument.defaultView, n = d.left + r.pageXOffset, m = d.top + r.pageYOffset, s = o.pageX - n, p = o.pageY - m;
-    e != null && e.onMove && e.onMove(s, p);
-  }
-  function a() {
-    document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", a), e != null && e.onStop && e.onStop();
-  }
-  document.addEventListener("pointermove", t, { passive: !0 }), document.addEventListener("pointerup", a), (e == null ? void 0 : e.initialEvent) instanceof PointerEvent && t(e.initialEvent);
-}
-const j = ':host{display:inline-block;position:relative;width:100%;border-color:var(--wje-border-color);border-style:solid;border-width:1px}.wje-before,.wje-after{display:block}.wje-after{position:absolute;top:0;left:0;height:100%;width:100%;clip-path:var(--wje-img-compare-clip-path)}.native-split-view{max-width:100%;max-height:100%;overflow:hidden}.wje-divider{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;background-color:var(--wje-img-compare-divider-background);height:100%;width:var(--wje-img-compare-divider-size);cursor:col-resize;top:0;left:var(--wje-img-compare-divider-left)}.wje-divider:after{display:flex;content:"";position:absolute;height:100%;left:calc(var(--wje-img-compare-divider-area) / -2 + var(--wje-img-compare-divider-size) / 2);width:var(---wje-img-compare-divider-area)}.wje-divider wje-icon{position:absolute;background-color:#fff;padding:.5rem;color:var(--wje-color-dark);border-radius:var(--wje-border-radius-circle);box-shadow:#523f6933 0 0 30px 10px;background:var(--wje-color-white)!important}';
-class u extends w {
-  /**
-   * Creates an instance of ImgComparer.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Dependencies of the ImgComparer component.
-     *
-     * @property {Object} depandencies
-     */
-    c(this, "depandencies", {
-      "wje-icon": g
-    });
-    c(this, "className", "ImgComparer");
-    /**
-     * Handles the drag event.
-     *
-     * @param {Event} e - The event.
-     */
-    c(this, "handleDrag", (t) => {
-      const { width: a } = this.native.getBoundingClientRect();
-      b(this, {
-        onMove: (o) => {
-          let d = o / a * 100;
-          this.position = parseFloat(this.clamp(d, 0, 100).toFixed(2)), this.native.style.setProperty("--wje-img-compare-divider-left", this.position + "%"), this.native.style.setProperty("--wje-img-compare-clip-path", `inset(0 ${100 - this.position}% 0 0)`);
-        },
-        initialEvent: t
-      });
-    });
-    /**
-     * Clamps a number between a minimum and maximum value.
-     *
-     * @param {number} num - The number to clamp.
-     * @param {number} min - The minimum value.
-     * @param {number} max - The maximum value.
-     * @returns {number} The clamped number.
-     */
-    c(this, "clamp", (t, a, o) => Math.min(Math.max(t, a), o));
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return j;
-  }
-  /**
-   * 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(t, a, o) {
-    let d = document.createDocumentFragment(), r = document.createElement("div");
-    r.classList.add("native-split-view");
-    let n = document.createElement("div");
-    n.classList.add("wje-before");
-    let m = document.createElement("slot");
-    m.setAttribute("name", "before");
-    let s = document.createElement("div");
-    s.classList.add("wje-after");
-    let p = document.createElement("slot");
-    p.setAttribute("name", "after");
-    let v = document.createElement("wje-icon");
-    v.setAttribute("name", "arrow-bar-both");
-    let l = document.createElement("div");
-    return l.classList.add("wje-divider"), l.setAttribute("part", "divider"), l.addEventListener("mousedown", this.handleDrag, !1), n.appendChild(m), s.appendChild(p), l.appendChild(v), r.appendChild(n), r.appendChild(s), r.appendChild(l), d.appendChild(r), this.native = r, d;
-  }
-}
-u.define("wje-img-comparer", u);
-export {
-  u as default
-};

package/dist/wje-img.js

@@ -1,58 +0,0 @@
-var l = Object.defineProperty;
-var d = (r, e, t) => e in r ? l(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => (d(r, typeof e != "symbol" ? e + "" : e, t), t);
-import n from "./wje-element.js";
-const h = "img{display:block;width:var(--wje-img-width, 100%);height:var(--wje-img-height, auto);max-width:100%;object-fit:inherit;border-radius:var(--wje-img-border-radius, 0)}";
-class m extends n {
-  /**
-   * Creates an instance of Img.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    o(this, "className", "Img");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return h;
-  }
-  /**
-   * 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(t, c, g) {
-    let a = document.createDocumentFragment(), s = document.createElement("img");
-    return s.setAttribute("src", "./assets/img/image-loader.gif"), s.classList.add("lazy-loaded-image", "lazy"), s.setAttribute("alt", this.alt || ""), this.img = s, a.appendChild(s), a;
-  }
-  /**
-   * Called after the component has been drawn.
-   */
-  afterDraw(t, c, g) {
-    let a = new IntersectionObserver((s, u) => {
-      s.forEach((i) => {
-        i.isIntersecting && (i.target.src = this.src, this.classList.remove("lazy"), a.unobserve(i.target));
-      });
-    });
-    a.observe(this.img);
-  }
-}
-m.define("wje-img", m);
-export {
-  m as default
-};