wj-elements 0.0.4 → 0.0.6

package/dist/wj-format-digital.js

@@ -0,0 +1,51 @@
+var c = Object.defineProperty;
+var d = (a, t, e) => t in a ? c(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var u = (a, t, e) => (d(a, typeof t != "symbol" ? t + "" : t, e), e);
+import h from "./wj-element.js";
+import { L as p } from "./localize-762a9f0f.js";
+import "./wj-store.js";
+const g = `.native-format-digital{white-space:nowrap}
+`;
+class f extends h {
+  constructor() {
+    super();
+    u(this, "className", "FormatDigital");
+    this.localizer = new p(this);
+  }
+  get unit() {
+    return this.hasAttribute("unit") ? this.getAttribute("unit") : "byte";
+  }
+  static get cssStyleSheet() {
+    return g;
+  }
+  static get observedAttributes() {
+    return ["value"];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  beforeDraw() {
+    if (this.value < 0)
+      return;
+    const e = ["", "kilo", "mega", "giga", "tera"], o = ["", "kilo", "mega", "giga", "tera", "peta"], n = this.unit === "bit" ? e : o, r = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), n.length - 1)), i = n[r] + this.unit, s = parseFloat((this.value / Math.pow(1e3, r)).toPrecision(3));
+    this.formattedValue = this.localizer.formatNumber(s, {
+      style: "unit",
+      unit: i,
+      unitDisplay: this.unitDisplay || "short"
+    });
+  }
+  draw(e, o, n) {
+    let r = document.createDocumentFragment(), i = document.createElement("div");
+    i.setAttribute("part", "native"), i.classList.add("native-format-digital");
+    let s = document.createElement("span");
+    s.setAttribute("part", "formatted"), s.innerText = this.formattedValue;
+    let l = document.createElement("slot");
+    l.setAttribute("name", "start");
+    let m = document.createElement("slot");
+    return m.setAttribute("name", "end"), i.appendChild(l), i.appendChild(s), i.appendChild(m), r.appendChild(i), r;
+  }
+}
+customElements.get("wj-format-digital") || window.customElements.define("wj-format-digital", f);
+export {
+  f as FormatDigital
+};

package/dist/wj-grid.js

@@ -1,20 +1,19 @@
-var w = Object.defineProperty;
-var u = (t, g, e) => g in t ? w(t, g, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[g] = e;
-var x = (t, g, e) => (u(t, typeof g != "symbol" ? g + "" : g, e), e);
-import j from "./wj-element.js";
+var l = Object.defineProperty;
+var w = (t, g, e) => g in t ? l(t, g, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[g] = e;
+var x = (t, g, e) => (w(t, typeof g != "symbol" ? g + "" : g, e), e);
+import u from "./wj-element.js";
 import "./wj-store.js";
-const m = `/*!
+const j = `/*!
 * direction.scss
 */:host{width:100%;flex-grow:0}wj-row{display:flex;flex-wrap:wrap}wj-row{--wj-gutter-x: 1.5rem;--wj-gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(var(--wj-gutter-y) * -1);margin-right:calc(var(--wj-gutter-x) * -.5);margin-left:calc(var(--wj-gutter-x) * -.5)}.g-0,.gx-0{--wj-gutter-x: 0}.g-0,.gy-0{--wj-gutter-y: 0}.g-1,.gx-1{--wj-gutter-x: .25rem}.g-1,.gy-1{--wj-gutter-y: .25rem}.g-2,.gx-2{--wj-gutter-x: .5rem}.g-2,.gy-2{--wj-gutter-y: .5rem}.g-3,.gx-3{--wj-gutter-x: 1rem}.g-3,.gy-3{--wj-gutter-y: 1rem}.g-4,.gx-4{--wj-gutter-x: 1.5rem}.g-4,.gy-4{--wj-gutter-y: 1.5rem}.g-5,.gx-5{--wj-gutter-x: 3rem}.g-5,.gy-5{--wj-gutter-y: 3rem}@media (min-width: 576px){.g-sm-0,.gx-sm-0{--wj-gutter-x: 0}.g-sm-0,.gy-sm-0{--wj-gutter-y: 0}.g-sm-1,.gx-sm-1{--wj-gutter-x: .25rem}.g-sm-1,.gy-sm-1{--wj-gutter-y: .25rem}.g-sm-2,.gx-sm-2{--wj-gutter-x: .5rem}.g-sm-2,.gy-sm-2{--wj-gutter-y: .5rem}.g-sm-3,.gx-sm-3{--wj-gutter-x: 1rem}.g-sm-3,.gy-sm-3{--wj-gutter-y: 1rem}.g-sm-4,.gx-sm-4{--wj-gutter-x: 1.5rem}.g-sm-4,.gy-sm-4{--wj-gutter-y: 1.5rem}.g-sm-5,.gx-sm-5{--wj-gutter-x: 3rem}.g-sm-5,.gy-sm-5{--wj-gutter-y: 3rem}}@media (min-width: 768px){.g-md-0,.gx-md-0{--wj-gutter-x: 0}.g-md-0,.gy-md-0{--wj-gutter-y: 0}.g-md-1,.gx-md-1{--wj-gutter-x: .25rem}.g-md-1,.gy-md-1{--wj-gutter-y: .25rem}.g-md-2,.gx-md-2{--wj-gutter-x: .5rem}.g-md-2,.gy-md-2{--wj-gutter-y: .5rem}.g-md-3,.gx-md-3{--wj-gutter-x: 1rem}.g-md-3,.gy-md-3{--wj-gutter-y: 1rem}.g-md-4,.gx-md-4{--wj-gutter-x: 1.5rem}.g-md-4,.gy-md-4{--wj-gutter-y: 1.5rem}.g-md-5,.gx-md-5{--wj-gutter-x: 3rem}.g-md-5,.gy-md-5{--wj-gutter-y: 3rem}}@media (min-width: 992px){.g-lg-0,.gx-lg-0{--wj-gutter-x: 0}.g-lg-0,.gy-lg-0{--wj-gutter-y: 0}.g-lg-1,.gx-lg-1{--wj-gutter-x: .25rem}.g-lg-1,.gy-lg-1{--wj-gutter-y: .25rem}.g-lg-2,.gx-lg-2{--wj-gutter-x: .5rem}.g-lg-2,.gy-lg-2{--wj-gutter-y: .5rem}.g-lg-3,.gx-lg-3{--wj-gutter-x: 1rem}.g-lg-3,.gy-lg-3{--wj-gutter-y: 1rem}.g-lg-4,.gx-lg-4{--wj-gutter-x: 1.5rem}.g-lg-4,.gy-lg-4{--wj-gutter-y: 1.5rem}.g-lg-5,.gx-lg-5{--wj-gutter-x: 3rem}.g-lg-5,.gy-lg-5{--wj-gutter-y: 3rem}}@media (min-width: 1200px){.g-xl-0,.gx-xl-0{--wj-gutter-x: 0}.g-xl-0,.gy-xl-0{--wj-gutter-y: 0}.g-xl-1,.gx-xl-1{--wj-gutter-x: .25rem}.g-xl-1,.gy-xl-1{--wj-gutter-y: .25rem}.g-xl-2,.gx-xl-2{--wj-gutter-x: .5rem}.g-xl-2,.gy-xl-2{--wj-gutter-y: .5rem}.g-xl-3,.gx-xl-3{--wj-gutter-x: 1rem}.g-xl-3,.gy-xl-3{--wj-gutter-y: 1rem}.g-xl-4,.gx-xl-4{--wj-gutter-x: 1.5rem}.g-xl-4,.gy-xl-4{--wj-gutter-y: 1.5rem}.g-xl-5,.gx-xl-5{--wj-gutter-x: 3rem}.g-xl-5,.gy-xl-5{--wj-gutter-y: 3rem}}@media (min-width: 1400px){.g-xxl-0,.gx-xxl-0{--wj-gutter-x: 0}.g-xxl-0,.gy-xxl-0{--wj-gutter-y: 0}.g-xxl-1,.gx-xxl-1{--wj-gutter-x: .25rem}.g-xxl-1,.gy-xxl-1{--wj-gutter-y: .25rem}.g-xxl-2,.gx-xxl-2{--wj-gutter-x: .5rem}.g-xxl-2,.gy-xxl-2{--wj-gutter-y: .5rem}.g-xxl-3,.gx-xxl-3{--wj-gutter-x: 1rem}.g-xxl-3,.gy-xxl-3{--wj-gutter-y: 1rem}.g-xxl-4,.gx-xxl-4{--wj-gutter-x: 1.5rem}.g-xxl-4,.gy-xxl-4{--wj-gutter-y: 1.5rem}.g-xxl-5,.gx-xxl-5{--wj-gutter-x: 3rem}.g-xxl-5,.gy-xxl-5{--wj-gutter-y: 3rem}}
 `;
-console.log("STYLES ROW:", m);
-class y extends j {
+class y extends u {
   constructor() {
     super();
     x(this, "className", "Grid");
   }
   static get cssStyleSheet() {
-    return m;
+    return j;
   }
   static get observedAttributes() {
     return [];
@@ -23,8 +22,8 @@ class y extends j {
     this.isShadowRoot = "open";
   }
   draw(e, s, d) {
-    let r = document.createDocumentFragment(), l = document.createElement("slot");
-    return this.color && this.classList.add("wj-color-" + this.color, "wj-color"), r.appendChild(l), r;
+    let r = document.createDocumentFragment(), m = document.createElement("slot");
+    return this.color && this.classList.add("wj-color-" + this.color, "wj-color"), r.appendChild(m), r;
   }
 }
 customElements.get("wj-grid") || window.customElements.define("wj-grid", y);

package/dist/wj-header.js

@@ -1,19 +1,17 @@
 var n = Object.defineProperty;
-var i = (t, e, r) => e in t ? n(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
-var o = (t, e, r) => (i(t, typeof e != "symbol" ? e + "" : e, r), r);
-import h from "./wj-element.js";
+var h = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => (h(r, typeof e != "symbol" ? e + "" : e, t), t);
+import i from "./wj-element.js";
 import "./wj-store.js";
-const c = `/*!
-* direction.scss
-*/:host{--wj-header-background: #fff;--wj-header-border-color: rgba(0, 0, 0, .08);--wj-header-border-width: 0 0 1px 0;--wj-header-border-style: solid;--wj-header-top: 0;--wj-header-height: 60px;display:block;height:var(--wj-header-height);width:100%;background:var(--wj-header-background);border-width:var(--wj-header-border-width);border-style:var(--wj-header-border-style);border-color:var(--wj-header-border-color)}:host .native-header{display:flex;padding-inline:1rem}:host([sticky]){position:sticky;top:var(--wj-header-top);z-index:999}
+const l = `:host{--wj-header-background: var(--wj-background);--wj-header-border-color: var(--wj-border-color);--wj-header-border-width: 0 0 1px 0;--wj-header-border-style: solid;--wj-header-top: 0;--wj-header-height: 60px;display:block;height:var(--wj-header-height);width:100%;background:var(--wj-header-background);border-width:var(--wj-header-border-width);border-style:var(--wj-header-border-style);border-color:var(--wj-header-border-color)}:host .native-header{display:flex;padding-inline:1rem}:host([sticky]){position:sticky;top:var(--wj-header-top);z-index:999}
 `;
-class l extends h {
+class c extends i {
   constructor() {
     super();
     o(this, "className", "Header");
   }
   static get cssStyleSheet() {
-    return c;
+    return l;
   }
   static get observedAttributes() {
     return [];
@@ -21,14 +19,14 @@ class l extends h {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(r, w, p) {
+  draw(t, w, p) {
     let a = document.createDocumentFragment(), d = document.createElement("header");
     d.classList.add("native-header"), d.setAttribute("part", "native");
     let s = document.createElement("slot");
     return d.appendChild(s), a.appendChild(d), a;
   }
 }
-customElements.get("wj-header") || window.customElements.define("wj-header", l);
+customElements.get("wj-header") || window.customElements.define("wj-header", c);
 export {
-  l as Header
+  c as Header
 };

package/dist/wj-icon-picker.js

@@ -1,28 +1,44 @@
-var u = Object.defineProperty;
-var g = (o, i, t) => i in o ? u(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
-var h = (o, i, t) => (g(o, typeof i != "symbol" ? i + "" : i, t), t);
-import w from "./wj-element.js";
-import { InfiniteScroll as b } from "./wj-infinite-scroll.js";
+var m = Object.defineProperty;
+var u = (l, n, e) => n in l ? m(l, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[n] = e;
+var h = (l, n, e) => (u(l, typeof n != "symbol" ? n + "" : n, e), e);
+import w, { event as b } from "./wj-element.js";
+import { InfiniteScroll as g } from "./wj-infinite-scroll.js";
 import "./wj-tooltip.js";
 import "./wj-store.js";
-const j = `/*!
-* direction.scss
-*/:host{--wj-color-picker-value: #ff0000;--wj-color-picker-radius: .25rem;--wj-color-picker-icon-size: 2rem;padding:0 1rem}.anchor{width:1rem;height:1rem;background:var(--wj-color-picker-value)}.picker{width:320px;height:320px;box-shadow:0 0 5px #0000000d,0 5px 20px #0000001a;border-radius:var(--wj-color-picker-radius);overflow:auto;padding:1rem}.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:0 .25rem;text-decoration:none}.icon-item:hover{border-radius:.25rem;background:var(--wj-border-color)}icon-item svg{width:var(--wj-color-picker-icon-size);height:var(--wj-color-picker-icon-size)}wj-input{--wj-input-border-radius: 4px;--wj-input-margin-bottom: 0}wj-infinite-scroll{margin-top:1rem}wj-select{--wj-select-border-width: 0 0 1px 0 !important;--wj-select-border-radius: 0 !important;margin-bottom:1rem}hr{background:red;height:1px;border:0 none}
+const j = `:host{--wj-icon-picker-radius: var(--wj-border-radius-small);--wj-icon-picker-icon-size: 1.5rem;--wj-icon-picker-border-width: 1px;--wj-icon-picker-border-style: solid;--wj-icon-picker-border-color: var(--wj-border-color);--wj-icon-picker-padding: .25rem;padding:0 1rem}.anchor{width:var(--wj-icon-picker-icon-size);height:var(--wj-icon-picker-icon-size);padding:var(--wj-icon-picker-padding);border-width:var(--wj-icon-picker-border-width);border-style:var(--wj-icon-picker-border-style);border-color:var(--wj-icon-picker-border-color);box-sizing:border-box;border-radius:var(--wj-icon-picker-radius)}.picker{width:320px;height:271px;box-shadow:0 0 5px #0000000d,0 5px 20px #0000001a;border-radius:var(--wj-icon-picker-radius);border-width:var(--wj-icon-picker-border-width);border-style:var(--wj-icon-picker-border-style);border-color:var(--wj-icon-picker-border-color);overflow:auto;padding:1rem;background:var(--wj-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(--wj-icon-picker-icon-size);min-width:var(--wj-icon-picker-icon-size);text-decoration:none}.icon-item:hover{border-radius:.25rem;background:var(--wj-border-color)}.wj-size{--wj-icon-size: 24px !important}icon-item svg{width:var(--wj-icon-picker-icon-size);height:var(--wj-icon-picker-icon-size)}wj-input{--wj-input-border-radius: 4px;--wj-input-margin-bottom: 0}wj-infinite-scroll{margin-top:1rem}wj-select{--wj-select-border-width: 0 0 1px 0 !important;--wj-select-border-radius: 0 !important;margin-bottom:1rem}.anchor wj-icon{--wj-icon-size: 100% !important}
 `;
 class v extends w {
   constructor() {
     super();
     h(this, "className", "IconPicker");
-    this.size = 56;
+    /*
+    * @description event handler pre vyhladavanie ikon
+    * @param e
+     */
+    h(this, "searchIcon", (e) => {
+      this.infiniteScroll.unScrollEvent(), this.infiniteScroll.setCustomData = (t = 0) => {
+        let i = this.tags.filter((r) => r.tags.includes(e.detail.value));
+        return {
+          data: i,
+          page: t,
+          size: this.size,
+          totalPages: Math.round(i.length / this.size)
+        };
+      }, this.clearIconsContainer(), this.infiniteScroll.loadPages();
+    });
+    h(this, "onClose", () => {
+      this.popup.onHide();
+    });
+    this.size = 48;
   }
-  set markerPosition(t) {
-    this._markerPosition = t;
+  set markerPosition(e) {
+    this._markerPosition = e;
   }
   get markerPosition() {
     return this._markerPosition;
   }
-  set swatches(t) {
-    this.setAttribute("swatches", t.split(","));
+  set swatches(e) {
+    this.setAttribute("swatches", e.split(","));
   }
   get swatches() {
     return this._swatches;
@@ -39,64 +55,62 @@ class v extends w {
   async beforeDraw() {
     this.tags = Object.values(await this.getTags()), this.category = this.getCategory(this.tags);
   }
-  draw(t, e, s) {
-    let m = document.createDocumentFragment(), p = document.createElement("div");
-    p.classList.add("native-color-picker");
-    let l = document.createElement("div");
-    l.setAttribute("slot", "anchor"), l.classList.add("anchor");
-    let c = document.createElement("div");
-    c.classList.add("picker");
-    let r = document.createElement("wj-select");
-    r.setAttribute("placeholder", "Category"), r.setAttribute("variant", "standard"), r.setAttribute("max-options", "1"), r.setAttribute("variant", "standard"), r.setAttribute("max-height", "180px"), r.setAttribute("clearable", ""), this.createOptions(r);
-    let d = document.createElement("wj-input");
-    d.classList.add("input"), d.setAttribute("variant", "standard"), d.setAttribute("placeholder", "type to filter...");
-    let a = new b();
+  draw(e, t, i) {
+    let o = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("native-color-picker");
+    let d = document.createElement("div");
+    d.setAttribute("slot", "anchor"), d.classList.add("anchor");
+    let p = document.createElement("div");
+    p.classList.add("picker");
+    let s = document.createElement("wj-input");
+    s.classList.add("input"), s.setAttribute("variant", "standard"), s.setAttribute("placeholder", "type to filter..."), s.setAttribute("clearable", ""), s.addEventListener("wj-input:input", this.searchIcon);
+    let a = new g();
     a.setAttribute("url", "/demo/assets/data/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>
                 <wj-tooltip content="{{name}}">
-                  <wj-icon name="{{name}}" size="large"></wj-icon>
+                    <wj-icon name="{{name}}" size="large"></wj-icon>
                 </wj-tooltip>
             </div>
-        </div>`, c.appendChild(r), c.appendChild(d), c.appendChild(a);
-    let n = document.createElement("wj-popup");
-    return n.setAttribute("placement", this.placement || "bottom-start"), n.setAttribute("offset", this.offset), n.setAttribute("manual", ""), n.appendChild(l), n.appendChild(c), p.appendChild(n), m.appendChild(p), this.popup = n, this.anchor = l, this.picker = c, this.infiniteScroll = a, m;
+        </div>`, p.appendChild(s), p.appendChild(a);
+    let c = document.createElement("wj-popup");
+    return c.setAttribute("placement", this.placement || "bottom-start"), c.setAttribute("offset", this.offset), c.setAttribute("manual", ""), c.appendChild(d), c.appendChild(p), r.appendChild(c), o.appendChild(r), this.popup = c, this.input = s, this.anchor = d, this.picker = p, this.infiniteScroll = a, o;
   }
   afterDraw() {
-    this.addEventListener("wj:popup-show", (t) => {
-      this.infiniteScroll.scrollEvent();
-    }), this.infiniteScroll.setCustomData = (t) => {
-      let e = Object.values(this.tags);
+    this.setupInfiniteScroll(), this.addEventListener("wj-popup:show", (e) => {
+      this.initial();
+    }), this.addEventListener("wj-input:clear", (e) => {
+      this.setupInfiniteScroll(), this.clearIconsContainer(), this.infiniteScroll.scrollEvent(), this.infiniteScroll.loadPages(0);
+    }), this.addEventListener("wj-infinite-scroll:click-item", (e) => {
+      const i = e.detail.context.querySelector("wj-icon").getAttribute("name"), o = this.tags.find((d) => d.name === i), r = document.createElement("wj-icon");
+      r.setAttribute("name", i), o.icon = r, this.value = o, this.anchor.innerHTML = "", this.anchor.appendChild(r), b.dispatchCustomEvent(this, "wj-icon-picker:select", o);
+    }), this.init = !1;
+  }
+  initial() {
+    this.infiniteScroll.scrollEvent();
+  }
+  setupInfiniteScroll() {
+    this.infiniteScroll.setCustomData = (e = 0) => {
+      let t = Object.values(this.tags);
       return {
-        data: e.slice(t * this.size, t * this.size + this.size),
-        page: t,
+        data: t.slice(e * this.size, e * this.size + this.size),
+        page: e,
         size: this.size,
-        totalPages: Math.round(e.length / this.size)
+        totalPages: Math.round(t.length / this.size)
       };
-    }, this.init = !1;
+    };
   }
-  createItems() {
+  createIconItem(e) {
     let t = document.createElement("div");
-    return t.classList.add("icon-items"), Object.values(this.tags).slice(0, 200).forEach((e) => {
-      t.appendChild(this.createIconItem(e));
-    }), t;
-  }
-  createIconItem(t) {
-    let e = document.createElement("div");
-    e.classList.add("icon-item");
-    let s = document.createElement("wj-icon");
-    return s.setAttribute("name", t.name), s.classList.add("lazy-loaded-image", "lazy"), e.appendChild(s), e;
-  }
-  createOption(t) {
-    let e = document.createElement("wj-option");
-    return e.setAttribute("value", t), e.innerText = t, e;
-  }
-  createOptions(t) {
-    this.category.forEach((e) => {
-      t.appendChild(this.createOption(e));
-    });
+    t.classList.add("icon-item");
+    let i = document.createElement("wj-icon");
+    return i.setAttribute("name", e.name), i.classList.add("lazy-loaded-image", "lazy"), t.appendChild(i), t;
   }
-  getCategory(t) {
-    return [...new Set(t.map((s) => s.category))];
+  createOption(e) {
+    let t = document.createElement("wj-option");
+    return t.setAttribute("value", e), t.innerText = e, t;
+  }
+  getCategory(e) {
+    return [...new Set(e.map((i) => i.category))];
   }
   async getTags() {
     return (await fetch("/demo/assets/data/tags.json")).json();
@@ -104,6 +118,12 @@ class v extends w {
   disconnectedCallback() {
     this.init = !1;
   }
+  /*
+  * @description vymazanie ikon z kontajnera
+   */
+  clearIconsContainer() {
+    this.context.querySelector(".icon-items").innerHTML = "";
+  }
 }
 customElements.get("wj-icon-picker") || window.customElements.define("wj-icon-picker", v);
 export {

package/dist/wj-icon.js

@@ -1,61 +1,58 @@
-var h = Object.defineProperty;
-var m = (t, e, o) => e in t ? h(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var l = (t, e, o) => (m(t, typeof e != "symbol" ? e + "" : e, o), o);
-import w from "./wj-element.js";
+var w = Object.defineProperty;
+var f = (e, t, o) => t in e ? w(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var l = (e, t, o) => (f(e, typeof t != "symbol" ? t + "" : t, o), o);
+import m from "./wj-element.js";
 import "./wj-store.js";
-const i = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
-let a;
-const u = (t) => c(t) && (t = t.trim(), g(t)) ? t : null, g = (t) => t.length > 0 && /(\/|\.)/.test(t), p = (t) => t.startsWith("data:image/svg+xml"), j = (t) => t.indexOf(";utf8,") !== -1, c = (t) => typeof t == "string", v = (t) => {
-  const e = document.createElement("div");
-  e.innerHTML = t;
-  const o = e.firstElementChild;
-  return o && o.nodeName.toLowerCase() === "svg" && (o.getAttribute("class"), f(o)) ? e.innerHTML : "";
-}, f = (t) => {
-  if (t.nodeType === 1) {
-    if (t.nodeName.toLowerCase() === "script")
+const n = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map();
+let c;
+const u = (e) => a(e) && (e = e.trim(), g(e)) ? e : null, g = (e) => e.length > 0 && /(\/|\.)/.test(e), j = (e) => e.startsWith("data:image/svg+xml"), v = (e) => e.indexOf(";utf8,") !== -1, a = (e) => typeof e == "string", p = (e) => {
+  const t = document.createElement("div");
+  t.innerHTML = e;
+  const o = t.firstElementChild;
+  return o && o.nodeName.toLowerCase() === "svg" && (o.getAttribute("class"), d(o)) ? t.innerHTML : "";
+}, d = (e) => {
+  if (e.nodeType === 1) {
+    if (e.nodeName.toLowerCase() === "script")
       return !1;
-    for (let e = 0; e < t.attributes.length; e++) {
-      const o = t.attributes[e].name;
-      if (c(o) && o.toLowerCase().indexOf("on") === 0)
+    for (let t = 0; t < e.attributes.length; t++) {
+      const o = e.attributes[t].name;
+      if (a(o) && o.toLowerCase().indexOf("on") === 0)
         return !1;
     }
-    for (let e = 0; e < t.childNodes.length; e++)
-      if (!f(t.childNodes[e]))
+    for (let t = 0; t < e.childNodes.length; t++)
+      if (!d(e.childNodes[t]))
         return !1;
   }
   return !0;
-}, b = (t, e) => {
-  let o = d.get(t);
+}, z = (e, t) => {
+  let o = h.get(e);
   if (!o)
     if (typeof fetch < "u" && typeof document < "u")
-      if (p(t) && j(t)) {
-        a || (a = new DOMParser());
-        const s = a.parseFromString(t, "text/html").querySelector("svg");
-        return s && i.set(t, s.outerHTML), Promise.resolve();
+      if (j(e) && v(e)) {
+        c || (c = new DOMParser());
+        const s = c.parseFromString(e, "text/html").querySelector("svg");
+        return s && n.set(e, s.outerHTML), Promise.resolve();
       } else
-        o = fetch(t).then((r) => {
+        o = fetch(e).then((r) => {
           if (r.ok)
             return r.text().then((s) => {
-              s && e !== !1 && (s = v(s)), i.set(t, s || "");
+              s && t !== !1 && (s = p(s)), n.set(e, s || "");
             });
-          i.set(t, "");
-        }), d.set(t, o);
+          n.set(e, "");
+        }), h.set(e, o);
     else
-      return i.set(t, ""), Promise.resolve();
+      return n.set(e, ""), Promise.resolve();
   return o;
-}, z = (t) => {
-  let e = u(t.src);
-  return e || (e = L(t.name), e ? y(e) : null);
-}, L = (t) => !c(t) || t.trim() === "" || t.replace(/[a-z]|-|\d/gi, "") !== "" ? null : t, y = (t) => {
-  const e = `/assets/img/icons/svg/${t}.svg`;
-  console.log("SOM:", `/assets/img/icons/svg/${t}.svg`);
-  const o = new URL(e, import.meta.url);
-  return console.log(o), o.href;
-}, x = `/*!
-* direction.scss
-*/:host(.wj-color-primary){--wj-color-base: #eae0fb !important;--wj-color-contrast: #845ae0 !important}:host(.wj-color-complete){--wj-color-base: #d3eeff !important;--wj-color-contrast: #0f8ff9 !important}:host(.wj-color-success){--wj-color-base: #d6f7f0 !important;--wj-color-contrast: #26bf93 !important}:host(.wj-color-warning){--wj-color-base: #fffde1 !important;--wj-color-contrast: #ffe858 !important}:host(.wj-color-danger){--wj-color-base: #fde2da !important;--wj-color-contrast: #e6533c !important}:host(.wj-color-info){--wj-color-base: #dbe6e8 !important;--wj-color-contrast: #475b6b !important}:host(.wj-color-menu){--wj-color-base: #f4f4f4 !important;--wj-color-contrast: #21252d !important}:host{--wj-icon-width: 100%;--wj-icon-height: 100%;display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;box-sizing:content-box!important}.icon-inner,svg{display:block;height:var(--wj-icon-height);width:var(--wj-icon-width)}:host(.wj-size-small){--wj-icon-size: 18px}:host(.wj-size-large){--wj-icon-size: 32px}:host(.wj-size){font-size:var(--wj-icon-size)!important}:host(.wj-color){color:var(--wj-color-contrast)}
+}, b = (e) => {
+  let t = u(e.src);
+  return t || (t = y(e.name), t ? L(t) : null);
+}, y = (e) => !a(e) || e.trim() === "" || e.replace(/[a-z]|-|\d/gi, "") !== "" ? null : e, L = (e) => {
+  const t = `/assets/img/icons/svg/${e}.svg`;
+  let o = new URL(import.meta.url), r = o.pathname, s = r.substring(0, r.lastIndexOf("/"));
+  return new URL(o.origin + s + t).href;
+}, x = `:host(.wj-color-primary){--wj-icon-color: var(--wj-color-primary)}:host(.wj-color-complete){--wj-icon-color: var(--wj-color-complete)}:host(.wj-color-success){--wj-icon-color: var(--wj-color-success)}:host(.wj-color-warning){--wj-icon-color: var(--wj-color-warning)}:host(.wj-color-danger){--wj-icon-color: var(--wj-color-danger)}:host(.wj-color-info){--wj-icon-color: var(--wj-color-info)}:host{--wj-icon-size: 1rem;--wj-icon-width: var(--wj-icon-size, 100%);--wj-icon-height: var(--wj-icon-size, 100%);display:inline-block;width:var(--wj-icon-width);height:var(--wj-icon-height);contain:strict;fill:currentColor;box-sizing:content-box!important}.icon-inner,svg{display:block;width:var(--wj-icon-width);height:var(--wj-icon-height)}:host(.wj-size-small){--wj-icon-size: 18px}:host(.wj-size-large){--wj-icon-size: 32px}:host(.wj-size){font-size:var(--wj-icon-size)}:host(.wj-color){color:var(--wj-icon-color)!important}
 `;
-class S extends w {
+class S extends m {
   constructor() {
     super();
     l(this, "className", "Icon");
@@ -70,15 +67,15 @@ class S extends w {
     this.isShadowRoot = "open";
   }
   draw(o, r, s) {
-    let n = document.createDocumentFragment();
-    return this.classList.add("lazy-loaded-image", "lazy"), this.classList.remove(...this.classList), this.element = document.createElement("div"), this.element.classList.add("icon-inner"), this.url = z(this), this.classList.add("wj-size"), this.color && this.classList.add("wj-color-" + this.color, "wj-color"), this.size && this.classList.add("wj-size-" + this.size), n.appendChild(this.element), n;
+    let i = document.createDocumentFragment();
+    return this.classList.add("lazy-loaded-image", "lazy"), this.element = document.createElement("div"), this.element.classList.add("icon-inner"), this.url = b(this), this.classList.add("wj-size"), this.color && this.classList.add("wj-color-" + this.color, "wj-color"), this.size && this.classList.add("wj-size-" + this.size), i.appendChild(this.element), i;
   }
   afterDraw() {
     let o = new IntersectionObserver((r, s) => {
-      r.forEach((n) => {
-        n.isIntersecting && (b(this.url).then((C) => {
-          this.element.innerHTML = i.get(this.url);
-        }), this.classList.remove("lazy"), o.unobserve(n.target));
+      r.forEach((i) => {
+        i.isIntersecting && (z(this.url).then((C) => {
+          this.element.innerHTML = n.get(this.url), this.element.querySelector("svg").setAttribute("part", "svg");
+        }), this.classList.remove("lazy"), o.unobserve(i.target));
       });
     });
     o.observe(this.element);

package/dist/wj-img-comparer.js

@@ -1,23 +1,21 @@
 var w = Object.defineProperty;
-var h = (i, e, t) => e in i ? w(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var p = (i, e, t) => (h(i, typeof e != "symbol" ? e + "" : e, t), t);
-import u from "./wj-element.js";
+var u = (i, e, t) => e in i ? w(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var p = (i, e, t) => (u(i, typeof e != "symbol" ? e + "" : e, t), t);
+import h from "./wj-element.js";
 import "./wj-store.js";
 function f(i, e) {
   function t(o) {
-    const d = i.getBoundingClientRect(), r = i.ownerDocument.defaultView, n = d.left + r.pageXOffset, l = d.top + r.pageYOffset, s = o.pageX - n, m = o.pageY - l;
-    e != null && e.onMove && e.onMove(s, m);
+    const d = i.getBoundingClientRect(), r = i.ownerDocument.defaultView, n = d.left + r.pageXOffset, l = d.top + r.pageYOffset, c = o.pageX - n, m = o.pageY - l;
+    e != null && e.onMove && e.onMove(c, m);
   }
   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 g = `/*!
-* direction.scss
-*/:host{--wj-img-compare-divider-area: 12px;--wj-img-compare-divider-background: white;--wj-img-compare-divider-size: 2px;--wj-img-compare-divider-left: 50%;--wj-img-compare-position: 50%;--wj-img-compare-clip-path: inset(0 calc(100% - var(--wj-img-compare-position)) 0 0);display:inline-block;position:relative;width:100%;border-color:var(--wj-border-color);border-style:solid;border-width:1px}.wj-before,.wj-after{display:block}.wj-after{position:absolute;top:0;left:0;height:100%;width:100%;clip-path:var(--wj-img-compare-clip-path)}.native-split-view{max-width:100%;max-height:100%;overflow:hidden}.wj-divider{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;background-color:var(--wj-img-compare-divider-background);height:100%;width:var(--wj-img-compare-divider-size);cursor:col-resize;top:0;left:var(--wj-img-compare-divider-left)}.wj-divider:after{display:flex;content:"";position:absolute;height:100%;left:calc(var(--wj-img-compare-divider-area) / -2 + var(--wj-img-compare-divider-size) / 2);width:var(---wj-img-compare-divider-area)}.wj-divider wj-icon{position:absolute;background-color:#fff;padding:.5rem;color:var(--wj-color);border-radius:50%;width:20px;height:20px;box-shadow:#523f6933 0 0 30px 10px}
+const g = `:host{--wj-img-compare-divider-area: 12px;--wj-img-compare-divider-background: white;--wj-img-compare-divider-size: 2px;--wj-img-compare-divider-left: 50%;--wj-img-compare-position: 50%;--wj-img-compare-clip-path: inset(0 calc(100% - var(--wj-img-compare-position)) 0 0);display:inline-block;position:relative;width:100%;border-color:var(--wj-border-color);border-style:solid;border-width:1px}.wj-before,.wj-after{display:block}.wj-after{position:absolute;top:0;left:0;height:100%;width:100%;clip-path:var(--wj-img-compare-clip-path)}.native-split-view{max-width:100%;max-height:100%;overflow:hidden}.wj-divider{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;background-color:var(--wj-img-compare-divider-background);height:100%;width:var(--wj-img-compare-divider-size);cursor:col-resize;top:0;left:var(--wj-img-compare-divider-left)}.wj-divider:after{display:flex;content:"";position:absolute;height:100%;left:calc(var(--wj-img-compare-divider-area) / -2 + var(--wj-img-compare-divider-size) / 2);width:var(---wj-img-compare-divider-area)}.wj-divider wj-icon{position:absolute;background-color:#fff;padding:.5rem;color:var(--wj-color-dark);border-radius:var(--wj-border-radius-circle);box-shadow:#523f6933 0 0 30px 10px;background:var(--wj-color-white)!important}
 `;
-class j extends u {
+class j extends h {
   constructor() {
     super();
     p(this, "className", "ImgComparer");
@@ -49,14 +47,14 @@ class j extends u {
     n.classList.add("wj-before");
     let l = document.createElement("slot");
     l.setAttribute("name", "before");
-    let s = document.createElement("div");
-    s.classList.add("wj-after");
+    let c = document.createElement("div");
+    c.classList.add("wj-after");
     let m = document.createElement("slot");
     m.setAttribute("name", "after");
     let v = document.createElement("wj-icon");
-    v.setAttribute("name", "arrows-left-right");
-    let c = document.createElement("div");
-    return c.classList.add("wj-divider"), c.setAttribute("part", "divider"), c.addEventListener("mousedown", this.handleDrag, !1), n.appendChild(l), s.appendChild(m), c.appendChild(v), r.appendChild(n), r.appendChild(s), r.appendChild(c), d.appendChild(r), this.native = r, d;
+    v.setAttribute("name", "arrow-bar-both");
+    let s = document.createElement("div");
+    return s.classList.add("wj-divider"), s.setAttribute("part", "divider"), s.addEventListener("mousedown", this.handleDrag, !1), n.appendChild(l), c.appendChild(m), s.appendChild(v), r.appendChild(n), r.appendChild(c), r.appendChild(s), d.appendChild(r), this.native = r, d;
   }
 }
 customElements.get("wj-img-comparer") || window.customElements.define("wj-img-comparer", j);

package/dist/wj-img.js

@@ -1,16 +1,14 @@
-var c = Object.defineProperty;
-var l = (i, e, t) => e in i ? c(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var o = (i, e, t) => (l(i, typeof e != "symbol" ? e + "" : e, t), t);
-import g from "./wj-element.js";
+var g = Object.defineProperty;
+var n = (r, e, t) => e in r ? g(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var m = (r, e, t) => (n(r, typeof e != "symbol" ? e + "" : e, t), t);
+import l from "./wj-element.js";
 import "./wj-store.js";
-const d = `/*!
-* direction.scss
-*/img{display:block;width:100%;height:100%;object-fit:inherit;object-position:inherit}
+const d = `img{display:block;width:var(--wj-img-width, 100%);height:var(--wj-img-height, auto);max-width:100%;object-fit:inherit;border-radius:var(--wj-img-border-radius, 0)}
 `;
-class h extends g {
+class h extends l {
   constructor() {
     super();
-    o(this, "className", "Img");
+    m(this, "className", "Img");
   }
   static get cssStyleSheet() {
     return d;
@@ -18,17 +16,17 @@ class h extends g {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, m, n) {
-    let r = document.createDocumentFragment(), s = document.createElement("img");
-    return s.setAttribute("src", "./demo/assets/img/image-loader.gif"), s.classList.add("lazy-loaded-image", "lazy"), s.setAttribute("alt", this.alt || ""), this.img = s, r.appendChild(s), r;
+  draw(t, o, c) {
+    let i = document.createDocumentFragment(), s = document.createElement("img");
+    return s.setAttribute("src", "./demo/assets/img/image-loader.gif"), s.classList.add("lazy-loaded-image", "lazy"), s.setAttribute("alt", this.alt || ""), this.img = s, i.appendChild(s), i;
   }
-  afterDraw(t, m, n) {
-    let r = new IntersectionObserver((s, u) => {
+  afterDraw(t, o, c) {
+    let i = new IntersectionObserver((s, u) => {
       s.forEach((a) => {
-        a.isIntersecting && (a.target.src = this.src, this.classList.remove("lazy"), r.unobserve(a.target));
+        a.isIntersecting && (a.target.src = this.src, this.classList.remove("lazy"), i.unobserve(a.target));
       });
     });
-    r.observe(this.img);
+    i.observe(this.img);
   }
 }
 customElements.get("wj-img") || window.customElements.define("wj-img", h);