wj-elements 0.0.0

package/dist/wj-grid.js

@@ -0,0 +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";
+import "./wj-store.js";
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Grid ]\n*/\n:host {\n  width: 100%;\n  flex-grow: 0;\n}\n/*\n[ Row ]\n*/\nwj-row {\n  display: flex;\n  flex-wrap: wrap;\n}\nwj-row {\n  --wj-gutter-x: 1.5rem;\n  --wj-gutter-y: 0;\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: calc(var(--wj-gutter-y) * -1);\n  margin-right: calc(var(--wj-gutter-x) * -0.5);\n  margin-left: calc(var(--wj-gutter-x) * -0.5);\n}\n.g-0,\n.gx-0 {\n  --wj-gutter-x: 0;\n}\n.g-0,\n.gy-0 {\n  --wj-gutter-y: 0;\n}\n.g-1,\n.gx-1 {\n  --wj-gutter-x: 0.25rem;\n}\n.g-1,\n.gy-1 {\n  --wj-gutter-y: 0.25rem;\n}\n.g-2,\n.gx-2 {\n  --wj-gutter-x: 0.5rem;\n}\n.g-2,\n.gy-2 {\n  --wj-gutter-y: 0.5rem;\n}\n.g-3,\n.gx-3 {\n  --wj-gutter-x: 1rem;\n}\n.g-3,\n.gy-3 {\n  --wj-gutter-y: 1rem;\n}\n.g-4,\n.gx-4 {\n  --wj-gutter-x: 1.5rem;\n}\n.g-4,\n.gy-4 {\n  --wj-gutter-y: 1.5rem;\n}\n.g-5,\n.gx-5 {\n  --wj-gutter-x: 3rem;\n}\n.g-5,\n.gy-5 {\n  --wj-gutter-y: 3rem;\n}\n@media (min-width: 576px) {\n  .g-sm-0,\n  .gx-sm-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-sm-0,\n  .gy-sm-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-sm-1,\n  .gx-sm-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-sm-1,\n  .gy-sm-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-sm-2,\n  .gx-sm-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-sm-2,\n  .gy-sm-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-sm-3,\n  .gx-sm-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-sm-3,\n  .gy-sm-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-sm-4,\n  .gx-sm-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-sm-4,\n  .gy-sm-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-sm-5,\n  .gx-sm-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-sm-5,\n  .gy-sm-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  .g-md-0,\n  .gx-md-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-md-0,\n  .gy-md-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-md-1,\n  .gx-md-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-md-1,\n  .gy-md-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-md-2,\n  .gx-md-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-md-2,\n  .gy-md-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-md-3,\n  .gx-md-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-md-3,\n  .gy-md-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-md-4,\n  .gx-md-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-md-4,\n  .gy-md-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-md-5,\n  .gx-md-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-md-5,\n  .gy-md-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 992px) {\n  .g-lg-0,\n  .gx-lg-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-lg-0,\n  .gy-lg-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-lg-1,\n  .gx-lg-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-lg-1,\n  .gy-lg-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-lg-2,\n  .gx-lg-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-lg-2,\n  .gy-lg-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-lg-3,\n  .gx-lg-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-lg-3,\n  .gy-lg-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-lg-4,\n  .gx-lg-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-lg-4,\n  .gy-lg-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-lg-5,\n  .gx-lg-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-lg-5,\n  .gy-lg-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  .g-xl-0,\n  .gx-xl-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-xl-0,\n  .gy-xl-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-xl-1,\n  .gx-xl-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-xl-1,\n  .gy-xl-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-xl-2,\n  .gx-xl-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-xl-2,\n  .gy-xl-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-xl-3,\n  .gx-xl-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-xl-3,\n  .gy-xl-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-xl-4,\n  .gx-xl-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-xl-4,\n  .gy-xl-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-xl-5,\n  .gx-xl-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-xl-5,\n  .gy-xl-5 {\n    --wj-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1400px) {\n  .g-xxl-0,\n  .gx-xxl-0 {\n    --wj-gutter-x: 0;\n  }\n  .g-xxl-0,\n  .gy-xxl-0 {\n    --wj-gutter-y: 0;\n  }\n  .g-xxl-1,\n  .gx-xxl-1 {\n    --wj-gutter-x: 0.25rem;\n  }\n  .g-xxl-1,\n  .gy-xxl-1 {\n    --wj-gutter-y: 0.25rem;\n  }\n  .g-xxl-2,\n  .gx-xxl-2 {\n    --wj-gutter-x: 0.5rem;\n  }\n  .g-xxl-2,\n  .gy-xxl-2 {\n    --wj-gutter-y: 0.5rem;\n  }\n  .g-xxl-3,\n  .gx-xxl-3 {\n    --wj-gutter-x: 1rem;\n  }\n  .g-xxl-3,\n  .gy-xxl-3 {\n    --wj-gutter-y: 1rem;\n  }\n  .g-xxl-4,\n  .gx-xxl-4 {\n    --wj-gutter-x: 1.5rem;\n  }\n  .g-xxl-4,\n  .gy-xxl-4 {\n    --wj-gutter-y: 1.5rem;\n  }\n  .g-xxl-5,\n  .gx-xxl-5 {\n    --wj-gutter-x: 3rem;\n  }\n  .g-xxl-5,\n  .gy-xxl-5 {\n    --wj-gutter-y: 3rem;\n  }\n}";
+console.log("STYLES ROW:", styles);
+class Grid extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Grid");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    if (this.color)
+      this.classList.add("wj-color-" + this.color, "wj-color");
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+customElements.get("wj-grid") || window.customElements.define("wj-grid", Grid);
+export {
+  Grid
+};

package/dist/wj-header.js

@@ -0,0 +1,38 @@
+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 styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Header ]\n*/\n:host {\n  --wj-header-background: #fff;\n  --wj-header-border-color: rgba(0, 0, 0, 0.08);\n  --wj-header-border-width: 0 0 1px 0;\n  --wj-header-border-style: solid;\n  --wj-header-top: 0;\n  --wj-header-height: 60px;\n  display: block;\n  height: var(--wj-header-height);\n  width: 100%;\n  background: var(--wj-header-background);\n  border-width: var(--wj-header-border-width);\n  border-style: var(--wj-header-border-style);\n  border-color: var(--wj-header-border-color);\n}\n:host .native-header {\n  display: flex;\n  padding-inline: 1rem;\n}\n:host([sticky]) {\n  position: sticky;\n  top: var(--wj-header-top);\n  z-index: 999;\n}";
+class Header extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Header");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("header");
+    element.classList.add("native-header");
+    element.setAttribute("part", "native");
+    let slot = document.createElement("slot");
+    element.appendChild(slot);
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+customElements.get("wj-header") || window.customElements.define("wj-header", Header);
+export {
+  Header
+};

package/dist/wj-icon-picker.js

@@ -0,0 +1,152 @@
+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 { InfiniteScroll } from "./wj-infinite-scroll.js";
+import "./wj-tooltip.js";
+import "./wj-store.js";
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Icon Picker ]\n*/\n:host {\n  --wj-color-picker-value: #ff0000;\n  --wj-color-picker-radius: .25rem;\n  --wj-color-picker-icon-size: 2rem;\n  padding: 0 1rem;\n}\n.anchor {\n  width: 1rem;\n  height: 1rem;\n  background: var(--wj-color-picker-value);\n}\n.picker {\n  width: 320px;\n  height: 320px;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 5px 20px rgba(0, 0, 0, 0.1);\n  border-radius: var(--wj-color-picker-radius);\n  overflow: auto;\n  padding: 1rem;\n}\n.icon-items {\n  --icon-min-width: 2rem;\n  display: grid;\n  grid-gap: 0.5rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--icon-min-width), 1fr));\n}\n.icon-item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: inherit;\n  padding: 0 0.25rem;\n  text-decoration: none;\n}\n.icon-item:hover {\n  border-radius: 0.25rem;\n  background: var(--wj-border-color);\n}\nicon-item svg {\n  width: var(--wj-color-picker-icon-size);\n  height: var(--wj-color-picker-icon-size);\n}\nwj-input {\n  --wj-input-border-radius: 4px;\n  --wj-input-margin-bottom: 0;\n}\nwj-infinite-scroll {\n  margin-top: 1rem;\n}\nwj-select {\n  --wj-select-border-width: 0 0 1px 0 !important;\n  --wj-select-border-radius: 0 !important;\n  margin-bottom: 1rem;\n}\nhr {\n  background: red;\n  height: 1px;\n  border: 0 none;\n}";
+class IconPicker extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "IconPicker");
+    this.size = 56;
+  }
+  set markerPosition(value) {
+    this._markerPosition = value;
+  }
+  get markerPosition() {
+    return this._markerPosition;
+  }
+  set swatches(value) {
+    this.setAttribute("swatches", value.split(","));
+  }
+  get swatches() {
+    return this._swatches;
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  async beforeDraw() {
+    this.tags = Object.values(await this.getTags());
+    this.category = this.getCategory(this.tags);
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-color-picker");
+    let anchor = document.createElement("div");
+    anchor.setAttribute("slot", "anchor");
+    anchor.classList.add("anchor");
+    let picker = document.createElement("div");
+    picker.classList.add("picker");
+    let select = document.createElement("wj-select");
+    select.setAttribute("placeholder", "Category");
+    select.setAttribute("variant", "standard");
+    select.setAttribute("max-options", "1");
+    select.setAttribute("variant", "standard");
+    select.setAttribute("max-height", "180px");
+    select.setAttribute("clearable", "");
+    this.createOptions(select);
+    let input = document.createElement("wj-input");
+    input.classList.add("input");
+    input.setAttribute("variant", "standard");
+    input.setAttribute("placeholder", "type to filter...");
+    let infiniteScroll = new InfiniteScroll();
+    infiniteScroll.setAttribute("url", "/demo/assets/data/tags.json");
+    infiniteScroll.setAttribute("placement", ".icon-items");
+    infiniteScroll.setAttribute("size", this.size);
+    infiniteScroll.setAttribute("height", "223px");
+    infiniteScroll.innerHTML = `<div class="icon-items">
+            <div class="icon-item" iterate>
+                <wj-tooltip content="{{name}}">
+                  <wj-icon name="{{name}}" size="large"></wj-icon>
+                </wj-tooltip>
+            </div>
+        </div>`;
+    picker.appendChild(select);
+    picker.appendChild(input);
+    picker.appendChild(infiniteScroll);
+    let popup = document.createElement("wj-popup");
+    popup.setAttribute("placement", this.placement || "bottom-start");
+    popup.setAttribute("offset", this.offset);
+    popup.setAttribute("manual", "");
+    popup.appendChild(anchor);
+    popup.appendChild(picker);
+    native.appendChild(popup);
+    fragment.appendChild(native);
+    this.popup = popup;
+    this.anchor = anchor;
+    this.picker = picker;
+    this.infiniteScroll = infiniteScroll;
+    return fragment;
+  }
+  afterDraw() {
+    this.addEventListener("wj:popup-show", (e) => {
+      this.infiniteScroll.scrollEvent();
+    });
+    this.infiniteScroll.setCustomData = (page) => {
+      let data = Object.values(this.tags);
+      let result = {
+        data: data.slice(page * this.size, page * this.size + this.size),
+        page,
+        size: this.size,
+        totalPages: Math.round(data.length / this.size)
+      };
+      return result;
+    };
+    this.init = false;
+  }
+  createItems() {
+    let items = document.createElement("div");
+    items.classList.add("icon-items");
+    Object.values(this.tags).slice(0, 200).forEach((i) => {
+      items.appendChild(this.createIconItem(i));
+    });
+    return items;
+  }
+  createIconItem(i) {
+    let item = document.createElement("div");
+    item.classList.add("icon-item");
+    let icon = document.createElement("wj-icon");
+    icon.setAttribute("name", i.name);
+    icon.classList.add("lazy-loaded-image", "lazy");
+    item.appendChild(icon);
+    return item;
+  }
+  createOption(item) {
+    let option = document.createElement("wj-option");
+    option.setAttribute("value", item);
+    option.innerText = item;
+    return option;
+  }
+  createOptions(select) {
+    this.category.forEach((i) => {
+      select.appendChild(this.createOption(i));
+    });
+  }
+  getCategory(tags) {
+    let category = [...new Set(tags.map((obj) => obj.category))];
+    return category;
+  }
+  async getTags() {
+    const response = await fetch(`/demo/assets/data/tags.json`);
+    return response.json();
+  }
+  disconnectedCallback() {
+    this.init = false;
+  }
+}
+customElements.get("wj-icon-picker") || window.customElements.define("wj-icon-picker", IconPicker);
+export {
+  IconPicker
+};

package/dist/wj-icon.js

@@ -0,0 +1,163 @@
+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 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;
+      }
+    }
+  }
+  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 || "");
+            });
+          }
+          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) => {
+  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 {
+  constructor() {
+    super();
+    __publicField(this, "className", "Icon");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return ["name"];
+  }
+  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;
+  }
+  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);
+        }
+      });
+    });
+    lazyImageObserver.observe(this.element);
+  }
+}
+customElements.get("wj-icon") || window.customElements.define("wj-icon", Icon);
+export {
+  Icon
+};

package/dist/wj-img-comparer.js

@@ -0,0 +1,94 @@
+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 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();
+    }
+  }
+  document.addEventListener("pointermove", move, { passive: true });
+  document.addEventListener("pointerup", stop);
+  if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
+    move(options.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 {
+  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)`);
+        },
+        initialEvent: e
+      });
+    });
+    __publicField(this, "clamp", (num, min, max) => Math.min(Math.max(num, min), max));
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  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;
+  }
+}
+customElements.get("wj-img-comparer") || window.customElements.define("wj-img-comparer", ImgComparer);
+export {
+  ImgComparer
+};

package/dist/wj-img.js

@@ -0,0 +1,47 @@
+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 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 {
+  constructor() {
+    super();
+    __publicField(this, "className", "Img");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  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;
+  }
+  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);
+        }
+      });
+    });
+    lazyImageObserver.observe(this.img);
+  }
+}
+customElements.get("wj-img") || window.customElements.define("wj-img", Img);
+export {
+  Img
+};

package/dist/wj-infinite-scroll.js

@@ -0,0 +1,130 @@
+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 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 = {}) {
+    super();
+    __publicField(this, "className", "InfiniteScroll");
+    __publicField(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);
+      }
+    });
+    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 template;
+    };
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  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);
+  }
+  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;
+    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();
+  }
+  hideLoader() {
+    this.loaderEl.classList.remove("show");
+  }
+  showLoader() {
+    this.loaderEl.classList.add("show");
+  }
+  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(page) {
+    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);
+      }
+    } catch (error) {
+      console.log(error.message);
+    } finally {
+      this.hideLoader();
+    }
+  }
+}
+customElements.get("wj-infinite-scroll") || window.customElements.define("wj-infinite-scroll", InfiniteScroll);
+export {
+  InfiniteScroll
+};