wj-elements 0.0.3 → 0.0.4

package/dist/wj-icon.js

@@ -1,127 +1,67 @@
-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";
+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";
 import "./wj-store.js";
-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;
-      }
+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")
+      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)
+        return !1;
     }
+    for (let e = 0; e < t.childNodes.length; e++)
+      if (!f(t.childNodes[e]))
+        return !1;
   }
-  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 || "");
+  return !0;
+}, b = (t, e) => {
+  let o = d.get(t);
+  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();
+      } else
+        o = fetch(t).then((r) => {
+          if (r.ok)
+            return r.text().then((s) => {
+              s && e !== !1 && (s = v(s)), i.set(t, s || "");
             });
-          }
-          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 url = new URL(`/assets/img/icons/svg/${iconName}.svg`, "");
-  console.log(url);
-  return `/assets/img/icons/svg/${iconName}.svg`;
-};
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Icon ]\n*/\n:host(.wj-color-primary) {\n  --wj-color-base: #eae0fb !important;\n  --wj-color-contrast: #845ae0 !important;\n}\n:host(.wj-color-complete) {\n  --wj-color-base: #d3eeff !important;\n  --wj-color-contrast: #0f8ff9 !important;\n}\n:host(.wj-color-success) {\n  --wj-color-base: #d6f7f0 !important;\n  --wj-color-contrast: #26bf93 !important;\n}\n:host(.wj-color-warning) {\n  --wj-color-base: #fffde1 !important;\n  --wj-color-contrast: #ffe858 !important;\n}\n:host(.wj-color-danger) {\n  --wj-color-base: #fde2da !important;\n  --wj-color-contrast: #e6533c !important;\n}\n:host(.wj-color-info) {\n  --wj-color-base: #dbe6e8 !important;\n  --wj-color-contrast: #475b6b !important;\n}\n:host(.wj-color-menu) {\n  --wj-color-base: #f4f4f4 !important;\n  --wj-color-contrast: #21252d !important;\n}\n:host {\n  --wj-icon-width: 100%;\n  --wj-icon-height: 100%;\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  contain: strict;\n  fill: currentColor;\n  box-sizing: content-box !important;\n}\n.icon-inner, svg {\n  display: block;\n  height: var(--wj-icon-height);\n  width: var(--wj-icon-width);\n}\n:host(.wj-size-small) {\n  --wj-icon-size: 18px;\n}\n:host(.wj-size-large) {\n  --wj-icon-size: 32px;\n}\n:host(.wj-size) {\n  font-size: var(--wj-icon-size) !important;\n}\n:host(.wj-color) {\n  color: var(--wj-color-contrast);\n}";
-class Icon extends WJElement {
+          i.set(t, "");
+        }), d.set(t, o);
+    else
+      return i.set(t, ""), 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)}
+`;
+class S extends w {
   constructor() {
     super();
-    __publicField(this, "className", "Icon");
+    l(this, "className", "Icon");
   }
   static get cssStyleSheet() {
-    return styles;
+    return x;
   }
   static get observedAttributes() {
     return ["name"];
@@ -129,37 +69,22 @@ class Icon extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    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 = 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;
+  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;
   }
   afterDraw() {
-    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.classList.remove("lazy");
-          lazyImageObserver.unobserve(entry.target);
-        }
+    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));
       });
     });
-    lazyImageObserver.observe(this.element);
+    o.observe(this.element);
   }
 }
-customElements.get("wj-icon") || window.customElements.define("wj-icon", Icon);
+customElements.get("wj-icon") || window.customElements.define("wj-icon", S);
 export {
-  Icon
+  S as Icon
 };

package/dist/wj-img-comparer.js

@@ -1,57 +1,40 @@
-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";
+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";
 import "./wj-store.js";
-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 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);
   }
-  document.addEventListener("pointermove", move, { passive: true });
-  document.addEventListener("pointerup", stop);
-  if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
-    move(options.initialEvent);
+  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 styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ SplitView ]\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.wj-before, .wj-after {\n  display: block;\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.native-split-view {\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\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);\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  box-shadow: rgba(82, 63, 105, 0.2) 0px 0px 30px 10px;\n}';
-class ImgComparer extends WJElement {
+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}
+`;
+class j extends u {
   constructor() {
     super();
-    __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)`);
+    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)`);
         },
-        initialEvent: e
+        initialEvent: t
       });
     });
-    __publicField(this, "clamp", (num, min, max) => Math.min(Math.max(num, min), max));
+    p(this, "clamp", (t, a, o) => Math.min(Math.max(t, a), o));
   }
   static get cssStyleSheet() {
-    return styles;
+    return g;
   }
   static get observedAttributes() {
     return [];
@@ -59,36 +42,24 @@ class ImgComparer extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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", "arrows-left-right");
-    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;
+  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 s = document.createElement("div");
+    s.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;
   }
 }
-customElements.get("wj-img-comparer") || window.customElements.define("wj-img-comparer", ImgComparer);
+customElements.get("wj-img-comparer") || window.customElements.define("wj-img-comparer", j);
 export {
-  ImgComparer
+  j as ImgComparer
 };

package/dist/wj-img.js

@@ -1,47 +1,37 @@
-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";
+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";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\nimg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: inherit;\n  object-position: inherit;\n}";
-class Img extends WJElement {
+const d = `/*!
+* direction.scss
+*/img{display:block;width:100%;height:100%;object-fit:inherit;object-position:inherit}
+`;
+class h extends g {
   constructor() {
     super();
-    __publicField(this, "className", "Img");
+    o(this, "className", "Img");
   }
   static get cssStyleSheet() {
-    return styles;
+    return d;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  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;
   }
-  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);
-        }
+  afterDraw(t, m, n) {
+    let r = new IntersectionObserver((s, u) => {
+      s.forEach((a) => {
+        a.isIntersecting && (a.target.src = this.src, this.classList.remove("lazy"), r.unobserve(a.target));
       });
     });
-    lazyImageObserver.observe(this.img);
+    r.observe(this.img);
   }
 }
-customElements.get("wj-img") || window.customElements.define("wj-img", Img);
+customElements.get("wj-img") || window.customElements.define("wj-img", h);
 export {
-  Img
+  h as Img
 };

package/dist/wj-infinite-scroll.js

@@ -1,46 +1,37 @@
-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";
+var d = Object.defineProperty;
+var u = (a, r, t) => r in a ? d(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
+var h = (a, r, t) => (u(a, typeof r != "symbol" ? r + "" : r, t), t);
+import g from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ InfiniteScroll ]\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 = {}) {
+const m = `/*!
+* direction.scss
+*/: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 p extends g {
+  constructor(t = {}) {
     super();
-    __publicField(this, "className", "InfiniteScroll");
-    __publicField(this, "scrollEvent", () => {
+    h(this, "className", "InfiniteScroll");
+    h(this, "scrollEvent", () => {
       this.addEventListener("scroll", this.onScroll);
     });
-    __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);
-      }
+    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));
     });
-    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);
+    this.totalPages = 0, this.isLoading = [], String.prototype.interpolate = function(s) {
+      let e = this, i = e.match(/\{{.*?\}}/g);
+      if (i)
+        for (let o of i) {
+          let l = o.replace("{{", "").replace("}}", ""), n = "";
+          l.split(".").forEach((c) => {
+            n = n == "" ? s[c] : n[c];
+          }), e = e.replace(o, n);
         }
-      }
-      return template;
+      return e;
     };
   }
   static get cssStyleSheet() {
-    return styles;
+    return m;
   }
   static get observedAttributes() {
     return [];
@@ -48,39 +39,26 @@ class InfiniteScroll extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(context, store, params) {
-    this.iterate = this.querySelector("[iterate]");
-    this.infiniteScrollTemplate = this.iterate.outerHTML;
-    this.iterate.remove();
-    this.setAttribute("style", "height: " + this.height);
+  beforeDraw(t, s, e) {
+    this.iterate = this.querySelector("[iterate]"), this.infiniteScrollTemplate = this.iterate.outerHTML, this.iterate.remove(), this.setAttribute("style", "height: " + this.height);
   }
-  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;
+  draw(t, s, e) {
+    let i = document.createDocumentFragment(), o = document.createElement("slot"), l = document.createElement("div");
+    return l.classList.add("loader"), i.appendChild(l), i.appendChild(o), this.loaderEl = l, i;
   }
   async afterDraw() {
-    this.queryParams = this.queryParams || "";
-    this.size = +this.size || 10;
-    this.currentPage = 0;
-    await this.loadPages(this.currentPage);
+    this.queryParams = this.queryParams || "", this.size = +this.size || 10, this.currentPage = 0, await this.loadPages(this.currentPage);
   }
   /** @function getPages
    * @description nacitanie dalsej stranky
    * @return response 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();
+  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();
   }
   hideLoader() {
     this.loaderEl.classList.remove("show");
@@ -88,43 +66,30 @@ class InfiniteScroll extends WJElement {
   showLoader() {
     this.loaderEl.classList.add("show");
   }
-  hasMorePages(page) {
-    return this.totalPages === 0 || page <= this.totalPages;
+  hasMorePages(t) {
+    return this.totalPages === 0 || t <= 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(page) {
+  async loadPages(t) {
     this.showLoader();
     try {
-      if (this.hasMorePages(page)) {
-        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;
-        result = response.data.map((item) => {
-          return this.infiniteScrollTemplate.interpolate(item);
-        });
-        let placement = this;
-        if (this.hasAttribute("placement"))
-          placement = this.querySelector(this.placement);
-        placement.insertAdjacentHTML("beforeend", result.join(""));
-        this.isLoading.push(page);
+      if (this.hasMorePages(t)) {
+        let s, e;
+        typeof this.setCustomData == "function" ? e = await this.setCustomData(t) : e = await this.getPages(t), this.totalPages = e.totalPages, this.currentPage = t, s = e.data.map((o) => this.infiniteScrollTemplate.interpolate(o));
+        let i = this;
+        this.hasAttribute("placement") && (i = this.querySelector(this.placement)), i.insertAdjacentHTML("beforeend", s.join("")), this.isLoading.push(t);
       }
-    } catch (error) {
-      console.log(error.message);
+    } catch (s) {
+      console.log(s.message);
     } finally {
       this.hideLoader();
     }
   }
 }
-customElements.get("wj-infinite-scroll") || window.customElements.define("wj-infinite-scroll", InfiniteScroll);
+customElements.get("wj-infinite-scroll") || window.customElements.define("wj-infinite-scroll", p);
 export {
-  InfiniteScroll
+  p as InfiniteScroll
 };