wj-elements 0.0.11 → 0.0.13

package/dist/wj-icon.js

@@ -1,64 +1,129 @@
-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";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-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 t = 0; t < e.attributes.length; t++) {
-      const o = e.attributes[t].name;
-      if (a(o) && o.toLowerCase().indexOf("on") === 0)
-        return !1;
+const iconContent = /* @__PURE__ */ new Map();
+const requests = /* @__PURE__ */ new Map();
+let parser;
+const getSrc = (src) => {
+  if (isStr(src)) {
+    src = src.trim();
+    if (isSrc(src)) {
+      return src;
+    }
+  }
+  return null;
+};
+const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
+const isSvgDataUrl = (url) => url.startsWith("data:image/svg+xml");
+const isEncodedDataUrl = (url) => url.indexOf(";utf8,") !== -1;
+const isStr = (val) => typeof val === "string";
+const validateContent = (svgContent) => {
+  const div = document.createElement("div");
+  div.innerHTML = svgContent;
+  const svgElm = div.firstElementChild;
+  if (svgElm && svgElm.nodeName.toLowerCase() === "svg") {
+    svgElm.getAttribute("class") || "";
+    if (isValid(svgElm)) {
+      return div.innerHTML;
+    }
+  }
+  return "";
+};
+const isValid = (elm) => {
+  if (elm.nodeType === 1) {
+    if (elm.nodeName.toLowerCase() === "script") {
+      return false;
+    }
+    for (let i = 0; i < elm.attributes.length; i++) {
+      const name = elm.attributes[i].name;
+      if (isStr(name) && name.toLowerCase().indexOf("on") === 0) {
+        return false;
+      }
+    }
+    for (let i = 0; i < elm.childNodes.length; i++) {
+      if (!isValid(elm.childNodes[i])) {
+        return false;
+      }
     }
-    for (let t = 0; t < e.childNodes.length; t++)
-      if (!d(e.childNodes[t]))
-        return !1;
   }
-  return !0;
-}, z = (e, t) => {
-  let o = h.get(e);
-  if (!o)
-    if (typeof fetch < "u" && typeof document < "u")
-      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(e).then((r) => {
-          if (r.ok)
-            return r.text().then((s) => {
-              s && t !== !1 && (s = p(s)), n.set(e, s || "");
+  return true;
+};
+const getSvgContent = (url, sanitize) => {
+  let req = requests.get(url);
+  if (!req) {
+    if (typeof fetch !== "undefined" && typeof document !== "undefined") {
+      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
+        if (!parser) {
+          parser = new DOMParser();
+        }
+        const doc = parser.parseFromString(url, "text/html");
+        const svg = doc.querySelector("svg");
+        if (svg) {
+          iconContent.set(url, svg.outerHTML);
+        }
+        return Promise.resolve();
+      } else {
+        req = fetch(url).then((rsp) => {
+          if (rsp.ok) {
+            return rsp.text().then((svgContent) => {
+              if (svgContent && sanitize !== false) {
+                svgContent = validateContent(svgContent);
+              }
+              iconContent.set(url, svgContent || "");
             });
-          n.set(e, "");
-        }), h.set(e, o);
-    else
-      return n.set(e, ""), Promise.resolve();
-  return o;
-}, 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 m {
+          }
+          iconContent.set(url, "");
+        });
+        requests.set(url, req);
+      }
+    } else {
+      iconContent.set(url, "");
+      return Promise.resolve();
+    }
+  }
+  return req;
+};
+const getUrl = (i) => {
+  let url = getSrc(i.src);
+  if (url) {
+    return url;
+  }
+  url = getName(i.name);
+  if (url) {
+    return getNamedUrl(url);
+  }
+  return null;
+};
+const getName = (iconName) => {
+  if (!isStr(iconName) || iconName.trim() === "") {
+    return null;
+  }
+  const invalidChars = iconName.replace(/[a-z]|-|\d/gi, "");
+  if (invalidChars !== "") {
+    return null;
+  }
+  return iconName;
+};
+const getNamedUrl = (iconName) => {
+  const path = `/assets/img/icons/svg/${iconName}.svg`;
+  let parsedUrl = new URL(import.meta.url);
+  let pathName = parsedUrl.pathname;
+  let folderPath = pathName.substring(0, pathName.lastIndexOf("/"));
+  return new URL(parsedUrl.origin + folderPath + path).href;
+};
+const styles = "/*\n[ WJ Icon ]\n*/\n:host(.wj-color-primary) {\n  --wj-icon-color: var(--wj-color-primary);\n}\n\n:host(.wj-color-complete) {\n  --wj-icon-color: var(--wj-color-complete);\n}\n\n:host(.wj-color-success) {\n  --wj-icon-color: var(--wj-color-success);\n}\n\n:host(.wj-color-warning) {\n  --wj-icon-color: var(--wj-color-warning);\n}\n\n:host(.wj-color-danger) {\n  --wj-icon-color: var(--wj-color-danger);\n}\n\n:host(.wj-color-info) {\n  --wj-icon-color: var(--wj-color-info);\n}\n\n:host {\n  --wj-icon-size: 1rem;\n  --wj-icon-width: var(--wj-icon-size, 100%);\n  --wj-icon-height: var(--wj-icon-size, 100%);\n  display: inline-block;\n  width: var(--wj-icon-width);\n  height: var(--wj-icon-height);\n  contain: strict;\n  fill: currentColor;\n  box-sizing: content-box !important;\n}\n\n.icon-inner, svg {\n  display: block;\n  width: var(--wj-icon-width);\n  height: var(--wj-icon-height);\n}\n\n:host(.wj-size-small) {\n  --wj-icon-size: 18px;\n}\n\n:host(.wj-size-large) {\n  --wj-icon-size: 32px;\n}\n\n:host(.wj-size) {\n  font-size: var(--wj-icon-size);\n}\n\n:host(.wj-color) {\n  color: var(--wj-icon-color) !important;\n}";
+class Icon extends WJElement {
   constructor() {
     super();
-    l(this, "className", "Icon");
+    __publicField(this, "className", "Icon");
   }
   static get cssStyleSheet() {
-    return x;
+    return styles;
   }
   static get observedAttributes() {
     return ["name"];
@@ -66,22 +131,37 @@ class S extends m {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(o, r, s) {
-    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;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    this.classList.add("lazy-loaded-image", "lazy");
+    this.element = document.createElement("div");
+    this.element.classList.add("icon-inner");
+    this.url = getUrl(this);
+    this.classList.add("wj-size");
+    if (this.color)
+      this.classList.add("wj-color-" + this.color, "wj-color");
+    if (this.size)
+      this.classList.add("wj-size-" + this.size);
+    fragment.appendChild(this.element);
+    return fragment;
   }
   afterDraw() {
-    let o = new IntersectionObserver((r, s) => {
-      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));
+    let lazyImageObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          getSvgContent(this.url).then((svgContent) => {
+            this.element.innerHTML = iconContent.get(this.url);
+            this.element.querySelector("svg").setAttribute("part", "svg");
+          });
+          this.classList.remove("lazy");
+          lazyImageObserver.unobserve(entry.target);
+        }
       });
     });
-    o.observe(this.element);
+    lazyImageObserver.observe(this.element);
   }
 }
-customElements.get("wj-icon") || window.customElements.define("wj-icon", S);
+customElements.get("wj-icon") || window.customElements.define("wj-icon", Icon);
 export {
-  S as Icon
+  Icon
 };

package/dist/wj-img-comparer.js

@@ -1,38 +1,57 @@
-var w = Object.defineProperty;
-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";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement 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, c = o.pageX - n, m = o.pageY - l;
-    e != null && e.onMove && e.onMove(c, m);
+function drag(container, options) {
+  function move(pointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+    if (options == null ? void 0 : options.onMove) {
+      options.onMove(x, y);
+    }
+  }
+  function stop() {
+    document.removeEventListener("pointermove", move);
+    document.removeEventListener("pointerup", stop);
+    if (options == null ? void 0 : options.onStop) {
+      options.onStop();
+    }
   }
-  function a() {
-    document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", a), e != null && e.onStop && e.onStop();
+  document.addEventListener("pointermove", move, { passive: true });
+  document.addEventListener("pointerup", stop);
+  if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
+    move(options.initialEvent);
   }
-  document.addEventListener("pointermove", t, { passive: !0 }), document.addEventListener("pointerup", a), (e == null ? void 0 : e.initialEvent) instanceof PointerEvent && t(e.initialEvent);
 }
-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 h {
+const styles = '/*\n[ WJ Image Compare ]\n*/\n:host {\n  --wj-img-compare-divider-area: 12px;\n  --wj-img-compare-divider-background: white;\n  --wj-img-compare-divider-size: 2px;\n  --wj-img-compare-divider-left: 50%;\n  --wj-img-compare-position: 50%;\n  --wj-img-compare-clip-path: inset(0 calc(100% - var(--wj-img-compare-position)) 0 0);\n  display: inline-block;\n  position: relative;\n  width: 100%;\n  border-color: var(--wj-border-color);\n  border-style: solid;\n  border-width: 1px;\n}\n\n.wj-before, .wj-after {\n  display: block;\n}\n\n.wj-after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  clip-path: var(--wj-img-compare-clip-path);\n}\n\n.native-split-view {\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.wj-divider {\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  background-color: var(--wj-img-compare-divider-background);\n  height: 100%;\n  width: var(--wj-img-compare-divider-size);\n  cursor: col-resize;\n  top: 0;\n  left: var(--wj-img-compare-divider-left);\n}\n.wj-divider:after {\n  display: flex;\n  content: "";\n  position: absolute;\n  height: 100%;\n  left: calc(var(--wj-img-compare-divider-area) / -2 + var(--wj-img-compare-divider-size) / 2);\n  width: var(---wj-img-compare-divider-area);\n}\n.wj-divider wj-icon {\n  position: absolute;\n  background-color: white;\n  padding: 0.5rem;\n  color: var(--wj-color-dark);\n  border-radius: var(--wj-border-radius-circle);\n  box-shadow: rgba(82, 63, 105, 0.2) 0 0 30px 10px;\n  background: var(--wj-color-white) !important;\n}';
+class ImgComparer extends WJElement {
   constructor() {
     super();
-    p(this, "className", "ImgComparer");
-    p(this, "handleDrag", (t) => {
-      const { width: a } = this.native.getBoundingClientRect();
-      f(this, {
-        onMove: (o) => {
-          let d = o / a * 100;
-          this.position = parseFloat(this.clamp(d, 0, 100).toFixed(2)), this.native.style.setProperty("--wj-img-compare-divider-left", this.position + "%"), this.native.style.setProperty("--wj-img-compare-clip-path", `inset(0 ${100 - this.position}% 0 0)`);
+    __publicField(this, "className", "ImgComparer");
+    __publicField(this, "handleDrag", (e) => {
+      const { width } = this.native.getBoundingClientRect();
+      drag(this, {
+        onMove: (x) => {
+          let value = x / width * 100;
+          this.position = parseFloat(this.clamp(value, 0, 100).toFixed(2));
+          this.native.style.setProperty("--wj-img-compare-divider-left", this.position + "%");
+          this.native.style.setProperty("--wj-img-compare-clip-path", `inset(0 ${100 - this.position}% 0 0)`);
         },
-        initialEvent: t
+        initialEvent: e
       });
     });
-    p(this, "clamp", (t, a, o) => Math.min(Math.max(t, a), o));
+    __publicField(this, "clamp", (num, min, max) => Math.min(Math.max(num, min), max));
   }
   static get cssStyleSheet() {
-    return g;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -40,24 +59,36 @@ class j extends h {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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("wj-before");
-    let l = document.createElement("slot");
-    l.setAttribute("name", "before");
-    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", "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;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-split-view");
+    let beforeElement = document.createElement("div");
+    beforeElement.classList.add("wj-before");
+    let before = document.createElement("slot");
+    before.setAttribute("name", "before");
+    let afterElement = document.createElement("div");
+    afterElement.classList.add("wj-after");
+    let after = document.createElement("slot");
+    after.setAttribute("name", "after");
+    let icon = document.createElement("wj-icon");
+    icon.setAttribute("name", "arrow-bar-both");
+    let dividerElement = document.createElement("div");
+    dividerElement.classList.add("wj-divider");
+    dividerElement.setAttribute("part", "divider");
+    dividerElement.addEventListener("mousedown", this.handleDrag, false);
+    beforeElement.appendChild(before);
+    afterElement.appendChild(after);
+    dividerElement.appendChild(icon);
+    native.appendChild(beforeElement);
+    native.appendChild(afterElement);
+    native.appendChild(dividerElement);
+    fragment.appendChild(native);
+    this.native = native;
+    return fragment;
   }
 }
-customElements.get("wj-img-comparer") || window.customElements.define("wj-img-comparer", j);
+customElements.get("wj-img-comparer") || window.customElements.define("wj-img-comparer", ImgComparer);
 export {
-  j as ImgComparer
+  ImgComparer
 };

package/dist/wj-img.js

@@ -1,35 +1,47 @@
-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";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-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 l {
+const styles = "/*\n[ WJ Img ]\n*/\nimg {\n  display: block;\n  width: var(--wj-img-width, 100%);\n  height: var(--wj-img-height, auto);\n  max-width: 100%;\n  object-fit: inherit;\n  border-radius: var(--wj-img-border-radius, 0);\n}";
+class Img extends WJElement {
   constructor() {
     super();
-    m(this, "className", "Img");
+    __publicField(this, "className", "Img");
   }
   static get cssStyleSheet() {
-    return d;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let img = document.createElement("img");
+    img.setAttribute("src", "./demo/assets/img/image-loader.gif");
+    img.classList.add("lazy-loaded-image", "lazy");
+    img.setAttribute("alt", this.alt || "");
+    this.img = img;
+    fragment.appendChild(img);
+    return fragment;
   }
-  afterDraw(t, o, c) {
-    let i = new IntersectionObserver((s, u) => {
-      s.forEach((a) => {
-        a.isIntersecting && (a.target.src = this.src, this.classList.remove("lazy"), i.unobserve(a.target));
+  afterDraw(context, store, params) {
+    let lazyImageObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.src = this.src;
+          this.classList.remove("lazy");
+          lazyImageObserver.unobserve(entry.target);
+        }
       });
     });
-    i.observe(this.img);
+    lazyImageObserver.observe(this.img);
   }
 }
-customElements.get("wj-img") || window.customElements.define("wj-img", h);
+customElements.get("wj-img") || window.customElements.define("wj-img", Img);
 export {
-  h as Img
+  Img
 };

package/dist/wj-infinite-scroll.js

@@ -1,38 +1,49 @@
-var u = Object.defineProperty;
-var m = (l, r, t) => r in l ? u(l, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[r] = t;
-var h = (l, r, t) => (m(l, typeof r != "symbol" ? r + "" : r, t), t);
-import g, { event as p } from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { event } from "./wj-element.js";
 import "./wj-store.js";
-const f = `:host{--wj-infinite-scroll-width: 100%;--wj-infinite-scroll-height: 300px;overflow-x:auto;width:var(--wj-infinite-scroll-width);height:var(--wj-infinite-scroll-height);display:block}
-`;
-class w extends g {
-  constructor(t = {}) {
+const styles = "/*\n[ Wj nfinite Scroll ]\n*/\n:host {\n  --wj-infinite-scroll-width: 100%;\n  --wj-infinite-scroll-height: 300px;\n  overflow-x: auto;\n  width: var(--wj-infinite-scroll-width);\n  height: var(--wj-infinite-scroll-height);\n  display: block;\n}";
+class InfiniteScroll extends WJElement {
+  constructor(options = {}) {
     super();
-    h(this, "className", "InfiniteScroll");
-    h(this, "scrollEvent", () => {
+    __publicField(this, "className", "InfiniteScroll");
+    __publicField(this, "scrollEvent", () => {
       this.addEventListener("scroll", this.onScroll);
     });
-    h(this, "unScrollEvent", () => {
+    __publicField(this, "unScrollEvent", () => {
       this.removeEventListener("scroll", this.onScroll);
     });
-    h(this, "onScroll", (t) => {
-      const { scrollTop: s, scrollHeight: e, clientHeight: i } = t.target;
-      s + i >= e - 300 && this.currentPage <= this.totalPages && this.isLoading.includes(this.currentPage) && (this.currentPage++, this.loadPages(this.currentPage));
+    __publicField(this, "onScroll", (e) => {
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      if (scrollTop + clientHeight >= scrollHeight - 300 && this.currentPage <= this.totalPages && this.isLoading.includes(this.currentPage)) {
+        this.currentPage++;
+        this.loadPages(this.currentPage);
+      }
     });
-    this.totalPages = 0, this.isLoading = [], String.prototype.interpolate = function(s) {
-      let e = this, i = e.match(/\{{.*?\}}/g);
-      if (i)
-        for (let a of i) {
-          let o = a.replace("{{", "").replace("}}", ""), n = "";
-          o.split(".").forEach((c) => {
-            n = n == "" ? s[c] : n[c];
-          }), e = e.replace(a, n);
+    this.totalPages = 0;
+    this.isLoading = [];
+    String.prototype.interpolate = function(params) {
+      let template = this;
+      let keys = template.match(/\{{.*?\}}/g);
+      if (keys) {
+        for (let key of keys) {
+          let cleanKey = key.replace("{{", "").replace("}}", "");
+          let val = "";
+          cleanKey.split(".").forEach((k) => {
+            val = val == "" ? params[k] : val[k];
+          });
+          template = template.replace(key, val);
         }
-      return e;
+      }
+      return template;
     };
   }
   static get cssStyleSheet() {
-    return f;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -40,26 +51,40 @@ class w extends g {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(t, s, e) {
-    this.iterate = this.querySelector("[iterate]"), this.infiniteScrollTemplate = this.iterate.outerHTML, this.iterate.remove(), this.setAttribute("style", "height: " + this.height);
+  beforeDraw(context, store, params) {
+    this.iterate = this.querySelector("[iterate]");
+    this.infiniteScrollTemplate = this.iterate.outerHTML;
+    this.iterate.remove();
+    this.setAttribute("style", "height: " + this.height);
   }
-  draw(t, s, e) {
-    let i = document.createDocumentFragment(), a = document.createElement("slot"), o = document.createElement("div");
-    return o.classList.add("loader"), i.appendChild(o), i.appendChild(a), this.loaderEl = o, i;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let slot = document.createElement("slot");
+    let loader = document.createElement("div");
+    loader.classList.add("loader");
+    fragment.appendChild(loader);
+    fragment.appendChild(slot);
+    this.loaderEl = loader;
+    return fragment;
   }
   async afterDraw() {
-    this.queryParams = this.queryParams || "", this.size = +this.size || 10, this.currentPage = 0, this.scrollEvent(), await this.loadPages(this.currentPage);
+    this.queryParams = this.queryParams || "";
+    this.size = +this.size || 10;
+    this.currentPage = 0;
+    this.scrollEvent();
+    await this.loadPages(this.currentPage);
   }
   /** @function getPages
    * @description nacitanie dalsej stranky
    * @return response json
    */
-  async getPages(t) {
-    let s = this.url.includes("?");
-    const e = await fetch(`${this.url}${s ? "&" : "?"}page=${t}&size=${this.size}${this == null ? void 0 : this.queryParams}`);
-    if (!e.ok)
-      throw new Error(`An error occurred: ${e.status}`);
-    return await e.json();
+  async getPages(page) {
+    let hasParams = this.url.includes("?");
+    const response = await fetch(`${this.url}${hasParams ? "&" : "?"}page=${page}&size=${this.size}${this == null ? void 0 : this.queryParams}`);
+    if (!response.ok) {
+      throw new Error(`An error occurred: ${response.status}`);
+    }
+    return await response.json();
   }
   hideLoader() {
     this.loaderEl.classList.remove("show");
@@ -67,34 +92,47 @@ class w extends g {
   showLoader() {
     this.loaderEl.classList.add("show");
   }
-  hasMorePages(t) {
-    return this.totalPages === 0 || t <= this.totalPages;
+  hasMorePages(page) {
+    return this.totalPages === 0 || page <= this.totalPages;
   }
   /** @function getPages
    * @description methoda zavola getPages a nasledne sa vykona callback funkcia draw. Ako a kde sa nieco vykresli sa deje v inicializacii lib-ky
    * @return response json
    */
-  async loadPages(t) {
+  async loadPages(page) {
     this.showLoader();
     try {
-      if (this.hasMorePages(t) || typeof this.setCustomData == "function") {
-        let s, e;
-        typeof this.setCustomData == "function" ? e = await this.setCustomData(t) : e = await this.getPages(t), this.totalPages = e.totalPages, this.currentPage = t;
-        const i = new DOMParser();
-        let a = this;
-        this.hasAttribute("placement") && (a = this.querySelector(this.placement)), e.data.forEach((o) => {
-          const n = this.infiniteScrollTemplate.interpolate(o), d = i.parseFromString(n, "text/html").querySelector(this.iterate.tagName.toLowerCase());
-          p.addListener(d, "click", "wj-infinite-scroll:click-item", null, { stopPropagation: !0 }), a.insertAdjacentElement("beforeend", d);
-        }), this.isLoading.push(t);
+      if (this.hasMorePages(page) || typeof this.setCustomData === "function") {
+        let result;
+        let response;
+        if (typeof this.setCustomData === "function") {
+          response = await this.setCustomData(page);
+        } else {
+          response = await this.getPages(page);
+        }
+        this.totalPages = response.totalPages;
+        this.currentPage = page;
+        const parser = new DOMParser();
+        let placement = this;
+        if (this.hasAttribute("placement"))
+          placement = this.querySelector(this.placement);
+        response.data.forEach((item) => {
+          const interpolateItem = this.infiniteScrollTemplate.interpolate(item);
+          const doc = parser.parseFromString(interpolateItem, "text/html");
+          const element = doc.querySelector(this.iterate.tagName.toLowerCase());
+          event.addListener(element, "click", "wj-infinite-scroll:click-item", null, { stopPropagation: true });
+          placement.insertAdjacentElement("beforeend", element);
+        });
+        this.isLoading.push(page);
       }
-    } catch (s) {
-      console.log(s.message);
+    } catch (error) {
+      console.log(error.message);
     } finally {
       this.hideLoader();
     }
   }
 }
-customElements.get("wj-infinite-scroll") || window.customElements.define("wj-infinite-scroll", w);
+customElements.get("wj-infinite-scroll") || window.customElements.define("wj-infinite-scroll", InfiniteScroll);
 export {
-  w as InfiniteScroll
+  InfiniteScroll
 };