wj-elements 0.1.16 → 0.1.17

package/dist/wje-icon-picker.js

@@ -0,0 +1,221 @@
+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-h7LE4nYc.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

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

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

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