wj-elements 0.1.103 → 0.1.104

package/dist/infinite-scroll.element-7dR-X4sd.js

@@ -0,0 +1,263 @@
+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, { WjElementUtils, event } from "./wje-element.js";
+const styles = "/*\r\n[ Wj infinite Scroll ]\r\n*/\r\n\r\n:host {\r\n  overflow-x: auto;\r\n  width: var(--wje-infinite-scroll-width);\r\n  height: var(--wje-infinite-scroll-height);\r\n  display: block;\r\n}\r\n\r\n.native {\r\n  /*position: relative;*/\r\n}\r\n\r\n.loading {\r\n  position: sticky;\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  height: 100%;\r\n  top: 0;\r\n  left: 0;\r\n  z-index: 9999;\r\n  background-color: var(--wje-infinite-scroll-loading-bg);\r\n  &.show {\r\n    display: flex;\r\n  }\r\n}\r\n\r\n[name=ending] {\r\n  display: none;\r\n  margin-top: 1rem;\r\n  text-align: center;\r\n}\r\n\r\n[name=ending].show {\r\n  display: block;\r\n}";
+class InfiniteScroll extends WJElement {
+  /**
+   * Creates an instance of InfiniteScroll.
+   *
+   * @constructor
+   * @param {Object} options - The options for the InfiniteScroll.
+   */
+  constructor(options = {}) {
+    super();
+    __publicField(this, "className", "InfiniteScroll");
+    /**
+     * Adds the scroll event listener.
+     */
+    __publicField(this, "scrollEvent", () => {
+      this.addEventListener("scroll", this.onScroll);
+    });
+    /**
+     * Removes the scroll event listener.
+     */
+    __publicField(this, "unScrollEvent", () => {
+      this.removeEventListener("scroll", this.onScroll);
+    });
+    /**
+     * Handles the scroll event.
+     *
+     * @param {Event} e - The event.
+     */
+    __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._loading = this.loadPages(this.currentPage);
+      }
+    });
+    /**
+     * Sets the custom data.
+     *
+     */
+    __publicField(this, "dataToHtml", (item) => {
+      let interpolateItem = this.infiniteScrollTemplate.interpolate(item);
+      let doc = this.parser.parseFromString(interpolateItem, "text/html");
+      let element = doc.activeElement.firstElementChild;
+      return element;
+    });
+    __publicField(this, "customForeach", (data) => {
+      data.forEach((item) => {
+        let element = this.dataToHtml(item);
+        event.addListener(element, "click", "wje-infinite-scroll:click-item", null);
+        this.placementObj.insertAdjacentElement("beforeend", element);
+      });
+    });
+    this.totalPages = 0;
+    this.isLoading = [];
+    this._response = {};
+    this.iterate = null;
+    this._infiniteScrollTemplate = null;
+    this._abortController = new AbortController();
+    this._signal;
+    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;
+    };
+  }
+  set infiniteScrollTemplate(value) {
+    this._infiniteScrollTemplate = value;
+  }
+  get infiniteScrollTemplate() {
+    return this._infiniteScrollTemplate;
+  }
+  set response(value) {
+    this._response = value;
+  }
+  get response() {
+    return this._response;
+  }
+  set objectName(value) {
+    this.setAttribute("object-name", value);
+  }
+  get objectName() {
+    return this.getAttribute("object-name") ?? "data";
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Prepares the component before drawing.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   */
+  beforeDraw(context, store, params) {
+    var _a, _b;
+    this.iterate = this.querySelector("[iterate]");
+    this.infiniteScrollTemplate = (_a = this.iterate) == null ? void 0 : _a.outerHTML;
+    (_b = this.iterate) == null ? void 0 : _b.remove();
+    this.setAttribute("style", "height: " + this.height);
+    if (this._signal) {
+      this._abortController.abort();
+      this._abortController = new AbortController();
+      this._signal = this._abortController.signal;
+    }
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native");
+    native.setAttribute("part", "native-infinite-scroll");
+    let slot = document.createElement("slot");
+    let ending = document.createElement("slot");
+    ending.setAttribute("name", "ending");
+    if (WjElementUtils.hasSlot(this, "loader")) {
+      let loading = document.createElement("div");
+      loading.classList.add("loading");
+      let loader = document.createElement("slot");
+      loader.setAttribute("name", "loader");
+      loading.appendChild(loader);
+      this.loadingEl = loading;
+      fragment.appendChild(loading);
+    }
+    native.appendChild(slot);
+    native.appendChild(ending);
+    fragment.appendChild(native);
+    this.endingEl = ending;
+    return fragment;
+  }
+  /**
+   * Called after the component has been drawn.
+   */
+  async afterDraw() {
+    this.queryParams = this.queryParams || "";
+    this.size = +this.size || 10;
+    this.currentPage = 0;
+    this.scrollEvent();
+    this._loading = this.loadPages(this.currentPage);
+    await this._loading;
+  }
+  /**
+   * Fetches the pages from the server.
+   *
+   * @param {number} page - The page number.
+   * @returns {Promise<Object>} The response from the server.
+   */
+  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}`, {
+      signal: this._signal
+    });
+    if (!response.ok) {
+      throw new Error(`An error occurred: ${response.status}`);
+    }
+    return await response.json();
+  }
+  /**
+   * Hides the loader.
+   */
+  hideLoader() {
+    var _a;
+    (_a = this == null ? void 0 : this.loadingEl) == null ? void 0 : _a.classList.remove("show");
+  }
+  /**
+   * Shows the loader.
+   */
+  showLoader() {
+    var _a;
+    (_a = this == null ? void 0 : this.loadingEl) == null ? void 0 : _a.classList.add("show");
+  }
+  /**
+   * Checks if there are more pages to load.
+   *
+   * @param {number} page - The page number.
+   * @returns {boolean} Whether there are more pages to load.
+   */
+  hasMorePages(page) {
+    return this.totalPages === 0 || page < this.totalPages;
+  }
+  /**
+   * Loads the pages.
+   *
+   * @param {number} page - The page number.
+   */
+  async loadPages(page) {
+    this.showLoader();
+    try {
+      if (this.hasMorePages(page)) {
+        let response;
+        this.parser = new DOMParser();
+        if (typeof this.setCustomData === "function") {
+          response = await this.setCustomData(page, this._signal);
+        } else {
+          response = await this.getPages(page);
+        }
+        this.totalPages = response.totalPages;
+        this.currentPage = page;
+        this.placementObj = this;
+        if (this.hasAttribute("placement"))
+          this.placementObj = this.querySelector(this.placement);
+        event.dispatchCustomEvent(this, "wje-infinite-scroll:load", response);
+        this.response = response;
+        this.customForeach(this.objectName ? response[this.objectName] : response);
+        this.isLoading.push(page);
+      } else {
+        event.dispatchCustomEvent(this, "wje-infinite-scroll:complete");
+        this.endingEl.classList.add("show");
+      }
+    } catch (error) {
+      console.log(error.message);
+    } finally {
+      this.hideLoader();
+    }
+  }
+}
+export {
+  InfiniteScroll as I
+};

package/dist/list.element-BkOOqBtW.js

@@ -0,0 +1,58 @@
+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 "./wje-element.js";
+const styles = "/*\n[ WJ List ]\n*/\n:host {\n  margin: 0;\n  padding: 0;\n  display: block;\n  contain: content;\n  list-style-type: none;\n}\n\n:host(.wje-inset) {\n  background: var(--wje-list-background);\n  transform: translateZ(0);\n  overflow: hidden;\n  padding: var(--wje-list-inset-padding);\n  border-radius: var(--wje-list-border-radius);\n}\n\n:host(.wje-lines-none) ::slotted(wje-item) {\n  --wje-border-width: 0 !important;\n}";
+class List extends WJElement {
+  /**
+   * Creates an instance of List.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "List");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
+  }
+  /**
+   * Called after the component has been drawn.
+   */
+  afterDraw() {
+    this.classList.toggle("wje-lines-" + this.lines, this.hasAttribute("lines"));
+    this.classList.toggle("wje-inset", this.hasAttribute("inset"));
+  }
+}
+export {
+  List as L
+};

package/dist/wje-element.js

@@ -115,13 +115,14 @@ class UniversalService {
     });
     return this.dispatch(promise, dispatchMethod, action);
   }
-  _get(url, action, dispatchMethod) {
+  _get(url, action, dispatchMethod, signal) {
     let promise = fetch(url, {
       method: "GET",
       // cache: 'no-cache',
       headers: {
         "Content-Type": "application/json"
-      }
+      },
+      ...signal ? { signal } : {}
       // referrerPolicy: 'same-origin',
     }).then(async (response) => {
       let text;
@@ -144,7 +145,7 @@ class UniversalService {
   delete(url, data, action, dispatchMethod = true) {
     return this._save(url, data, action, dispatchMethod, "DELETE");
   }
-  get(url, action, dispatchMethod = true) {
+  get(url, action, dispatchMethod = true, signal) {
     return this._get(url, action, dispatchMethod);
   }
   dispatch(promise, dispatchMethod, action) {

package/dist/wje-icon-picker.js

@@ -5,10 +5,11 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
-import InfiniteScroll from "./wje-infinite-scroll.js";
+import "./wje-infinite-scroll.js";
 import Input from "./wje-input.js";
 import Tooltip from "./wje-tooltip.js";
 import "./wje-popup.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-7dR-X4sd.js";
 import { P as Popup } from "./popup.element-Dna4OwCH.js";
 const styles = "/*\r\n[ Wj Icon Picker ]\r\n*/\r\n\r\n:host {\r\n  --wje-icon-picker-radius: var(--wje-border-radius-small);\r\n  --wje-icon-picker-icon-size: 1.5rem;\r\n  --wje-icon-picker-border-width: 1px;\r\n  --wje-icon-picker-border-style: solid;\r\n  --wje-icon-picker-border-color: var(--wje-border-color);\r\n  --wje-icon-picker-padding: .25rem;\r\n  padding: 0 1rem;\r\n}\r\n\r\n.anchor {\r\n  width: var(--wje-icon-picker-icon-size);\r\n  height: var(--wje-icon-picker-icon-size);\r\n  padding: var(--wje-icon-picker-padding);\r\n  border-width: var(--wje-icon-picker-border-width);\r\n  border-style: var(--wje-icon-picker-border-style);\r\n  border-color: var(--wje-icon-picker-border-color);\r\n  box-sizing: border-box;\r\n  border-radius: var(--wje-icon-picker-radius);\r\n}\r\n\r\n.picker {\r\n  width: 320px;\r\n  height: 271px;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\r\n  border-radius: var(--wje-icon-picker-radius);\r\n  border-width: var(--wje-icon-picker-border-width);\r\n  border-style: var(--wje-icon-picker-border-style);\r\n  border-color: var(--wje-icon-picker-border-color);\r\n  overflow: auto;\r\n  padding: 1rem;\r\n  background: var(--wje-background);\r\n}\r\n\r\n.icon-items {\r\n  --icon-min-width: 2rem;\r\n  display: grid;\r\n  grid-gap: .5rem;\r\n  grid-template-columns: repeat(auto-fit,minmax(var(--icon-min-width),1fr));\r\n}\r\n\r\n.icon-item {\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  color: inherit;\r\n  padding: .25rem;\r\n  min-height: var(--wje-icon-picker-icon-size);\r\n  min-width: var(--wje-icon-picker-icon-size);\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    border-radius: .25rem;\r\n    background: var(--wje-border-color);\r\n  }\r\n}\r\n\r\n.wje-size {\r\n  --wje-icon-size: 24px !important;\r\n}\r\n\r\nicon-item svg {\r\n  width: var(--wje-icon-picker-icon-size);\r\n  height: var(--wje-icon-picker-icon-size);\r\n}\r\n\r\nwje-input {\r\n  --wje-input-border-radius: 4px;\r\n  --wje-input-margin-bottom: 0;\r\n}\r\n\r\nwje-infinite-scroll {\r\n  margin-top: 1rem;\r\n}\r\n\r\nwje-select {\r\n  --wje-select-border-width: 0 0 1px 0 !important;\r\n  --wje-select-border-radius: 0 !important;\r\n  margin-bottom: 1rem;\r\n}\r\n\r\n.anchor wje-icon {\r\n  --wje-icon-size: 100% !important;\r\n}";
 class IconPicker extends WJElement {

package/dist/wje-infinite-scroll.js

@@ -1,253 +1,4 @@
-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, { WjElementUtils, event } from "./wje-element.js";
-const styles = "/*\r\n[ Wj infinite Scroll ]\r\n*/\r\n\r\n:host {\r\n  overflow-x: auto;\r\n  width: var(--wje-infinite-scroll-width);\r\n  height: var(--wje-infinite-scroll-height);\r\n  display: block;\r\n}\r\n\r\n.native {\r\n  /*position: relative;*/\r\n}\r\n\r\n.loading {\r\n  position: sticky;\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  height: 100%;\r\n  top: 0;\r\n  left: 0;\r\n  z-index: 9999;\r\n  background-color: var(--wje-infinite-scroll-loading-bg);\r\n  &.show {\r\n    display: flex;\r\n  }\r\n}\r\n\r\n[name=ending] {\r\n  display: none;\r\n  margin-top: 1rem;\r\n  text-align: center;\r\n}\r\n\r\n[name=ending].show {\r\n  display: block;\r\n}";
-class InfiniteScroll extends WJElement {
-  /**
-   * Creates an instance of InfiniteScroll.
-   *
-   * @constructor
-   * @param {Object} options - The options for the InfiniteScroll.
-   */
-  constructor(options = {}) {
-    super();
-    __publicField(this, "className", "InfiniteScroll");
-    /**
-     * Adds the scroll event listener.
-     */
-    __publicField(this, "scrollEvent", () => {
-      this.addEventListener("scroll", this.onScroll);
-    });
-    /**
-     * Removes the scroll event listener.
-     */
-    __publicField(this, "unScrollEvent", () => {
-      this.removeEventListener("scroll", this.onScroll);
-    });
-    /**
-     * Handles the scroll event.
-     *
-     * @param {Event} e - The event.
-     */
-    __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);
-      }
-    });
-    /**
-     * Sets the custom data.
-     *
-     */
-    __publicField(this, "dataToHtml", (item) => {
-      let interpolateItem = this.infiniteScrollTemplate.interpolate(item);
-      let doc = this.parser.parseFromString(interpolateItem, "text/html");
-      let element = doc.activeElement.firstElementChild;
-      return element;
-    });
-    __publicField(this, "customForeach", (data) => {
-      data.forEach((item) => {
-        let element = this.dataToHtml(item);
-        event.addListener(element, "click", "wje-infinite-scroll:click-item", null);
-        this.placementObj.insertAdjacentElement("beforeend", element);
-      });
-    });
-    this.totalPages = 0;
-    this.isLoading = [];
-    this._response = {};
-    this.iterate = null;
-    this._infiniteScrollTemplate = null;
-    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;
-    };
-  }
-  set infiniteScrollTemplate(value) {
-    this._infiniteScrollTemplate = value;
-  }
-  get infiniteScrollTemplate() {
-    return this._infiniteScrollTemplate;
-  }
-  set response(value) {
-    this._response = value;
-  }
-  get response() {
-    return this._response;
-  }
-  set objectName(value) {
-    this.setAttribute("object-name", value);
-  }
-  get objectName() {
-    return this.getAttribute("object-name") || "data";
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   *
-   * @static
-   * @returns {Array<string>}
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Prepares the component before drawing.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   */
-  beforeDraw(context, store, params) {
-    var _a, _b;
-    this.iterate = this.querySelector("[iterate]");
-    this.infiniteScrollTemplate = (_a = this.iterate) == null ? void 0 : _a.outerHTML;
-    (_b = this.iterate) == null ? void 0 : _b.remove();
-    this.setAttribute("style", "height: " + this.height);
-  }
-  /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native");
-    native.setAttribute("part", "native-infinite-scroll");
-    let slot = document.createElement("slot");
-    let ending = document.createElement("slot");
-    ending.setAttribute("name", "ending");
-    if (WjElementUtils.hasSlot(this, "loader")) {
-      let loading = document.createElement("div");
-      loading.classList.add("loading");
-      let loader = document.createElement("slot");
-      loader.setAttribute("name", "loader");
-      loading.appendChild(loader);
-      this.loadingEl = loading;
-      fragment.appendChild(loading);
-    }
-    native.appendChild(slot);
-    native.appendChild(ending);
-    fragment.appendChild(native);
-    this.endingEl = ending;
-    return fragment;
-  }
-  /**
-   * Called after the component has been drawn.
-   */
-  async afterDraw() {
-    this.queryParams = this.queryParams || "";
-    this.size = +this.size || 10;
-    this.currentPage = 0;
-    this.scrollEvent();
-    await this.loadPages(this.currentPage);
-  }
-  /**
-   * Fetches the pages from the server.
-   *
-   * @param {number} page - The page number.
-   * @returns {Promise<Object>} The response from the server.
-   */
-  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();
-  }
-  /**
-   * Hides the loader.
-   */
-  hideLoader() {
-    var _a;
-    (_a = this == null ? void 0 : this.loadingEl) == null ? void 0 : _a.classList.remove("show");
-  }
-  /**
-   * Shows the loader.
-   */
-  showLoader() {
-    var _a;
-    (_a = this == null ? void 0 : this.loadingEl) == null ? void 0 : _a.classList.add("show");
-  }
-  /**
-   * Checks if there are more pages to load.
-   *
-   * @param {number} page - The page number.
-   * @returns {boolean} Whether there are more pages to load.
-   */
-  hasMorePages(page) {
-    return this.totalPages === 0 || page < this.totalPages;
-  }
-  /**
-   * Loads the pages.
-   *
-   * @param {number} page - The page number.
-   */
-  async loadPages(page) {
-    this.showLoader();
-    try {
-      if (this.hasMorePages(page)) {
-        let response;
-        this.parser = new DOMParser();
-        if (typeof this.setCustomData === "function") {
-          response = await this.setCustomData(page);
-        } else {
-          response = await this.getPages(page);
-        }
-        this.totalPages = response.totalPages;
-        this.currentPage = page;
-        this.placementObj = this;
-        if (this.hasAttribute("placement"))
-          this.placementObj = this.querySelector(this.placement);
-        event.dispatchCustomEvent(this, "wje-infinite-scroll:load", response);
-        this.response = response;
-        this.customForeach(response[this.objectName]);
-        this.isLoading.push(page);
-      } else {
-        event.dispatchCustomEvent(this, "wje-infinite-scroll:complete");
-        this.endingEl.classList.add("show");
-      }
-    } catch (error) {
-      console.log(error.message);
-    } finally {
-      this.hideLoader();
-    }
-  }
-}
+import { I as InfiniteScroll } from "./infinite-scroll.element-7dR-X4sd.js";
 InfiniteScroll.define("wje-infinite-scroll", InfiniteScroll);
 export {
   InfiniteScroll as default

package/dist/wje-list.js

@@ -1,58 +1,4 @@
-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 "./wje-element.js";
-const styles = "/*\n[ WJ List ]\n*/\n:host {\n  margin: 0;\n  padding: 0;\n  display: block;\n  contain: content;\n  list-style-type: none;\n}\n\n:host(.wje-inset) {\n  background: var(--wje-list-background);\n  transform: translateZ(0);\n  overflow: hidden;\n  padding: var(--wje-list-inset-padding);\n  border-radius: var(--wje-list-border-radius);\n}\n\n:host(.wje-lines-none) ::slotted(wje-item) {\n  --wje-border-width: 0 !important;\n}";
-class List extends WJElement {
-  /**
-   * Creates an instance of List.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    __publicField(this, "className", "List");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
-  }
-  /**
-   * Called after the component has been drawn.
-   */
-  afterDraw() {
-    this.classList.toggle("wje-lines-" + this.lines, this.hasAttribute("lines"));
-    this.classList.toggle("wje-inset", this.hasAttribute("inset"));
-  }
-}
+import { L as List } from "./list.element-BkOOqBtW.js";
 List.define("wje-list", List);
 export {
   List as default

package/dist/wje-master.js

@@ -47,57 +47,59 @@ import { default as default35 } from "./wje-icon.js";
 import { default as default36 } from "./wje-icon-picker.js";
 import { default as default37 } from "./wje-img.js";
 import { default as default38 } from "./wje-img-comparer.js";
-import { default as default39 } from "./wje-infinite-scroll.js";
-import { default as default40 } from "./wje-input.js";
-import { default as default41 } from "./wje-input-file.js";
-import { default as default42 } from "./wje-item.js";
-import { default as default43 } from "./wje-label.js";
-import { default as default44 } from "./wje-list.js";
-import { default as default45 } from "./wje-main.js";
-import { default as default46 } from "./wje-masonry.js";
-import { default as default47 } from "./wje-menu.js";
-import { default as default48 } from "./wje-menu-button.js";
-import { default as default49 } from "./wje-menu-item.js";
-import { default as default50 } from "./wje-menu-label.js";
-import { default as default51 } from "./wje-option.js";
-import { default as default52 } from "./wje-options.js";
-import { default as default53 } from "./wje-orgchart.js";
-import { default as default54 } from "./wje-orgchart-group.js";
-import { default as default55 } from "./wje-orgchart-item.js";
+import "./wje-infinite-scroll.js";
+import { default as default39 } from "./wje-input.js";
+import { default as default40 } from "./wje-input-file.js";
+import { default as default41 } from "./wje-item.js";
+import { default as default42 } from "./wje-label.js";
+import "./wje-list.js";
+import { default as default43 } from "./wje-main.js";
+import { default as default44 } from "./wje-masonry.js";
+import { default as default45 } from "./wje-menu.js";
+import { default as default46 } from "./wje-menu-button.js";
+import { default as default47 } from "./wje-menu-item.js";
+import { default as default48 } from "./wje-menu-label.js";
+import { default as default49 } from "./wje-option.js";
+import { default as default50 } from "./wje-options.js";
+import { default as default51 } from "./wje-orgchart.js";
+import { default as default52 } from "./wje-orgchart-group.js";
+import { default as default53 } from "./wje-orgchart-item.js";
 import "./wje-popup.js";
-import { default as default56 } from "./wje-progress-bar.js";
-import { default as default57 } from "./wje-qr-code.js";
-import { default as default58 } from "./wje-radio.js";
-import { default as default59 } from "./wje-radio-group.js";
-import { default as default60 } from "./wje-rate.js";
-import { default as default61 } from "./wje-relative-time.js";
-import { default as default62 } from "./wje-reorder.js";
-import { default as default63 } from "./wje-reorder-dropzone.js";
-import { default as default64 } from "./wje-reorder-handle.js";
-import { default as default65 } from "./wje-reorder-item.js";
-import { default as default66 } from "./wje-route.js";
-import { default as default67 } from "./wje-routerx.js";
-import { default as default68 } from "./wje-router-link.js";
-import { default as default69 } from "./wje-router-outlet.js";
-import { default as default70 } from "./wje-row.js";
-import { default as default71 } from "./wje-select.js";
-import { default as default72 } from "./wje-slider.js";
-import { default as default73 } from "./wje-split-view.js";
-import { default as default74 } from "./wje-status.js";
-import { default as default75 } from "./wje-step.js";
-import { default as default76 } from "./wje-stepper.js";
-import { default as default77 } from "./wje-tab.js";
-import { default as default78 } from "./wje-tab-group.js";
-import { default as default79 } from "./wje-tab-panel.js";
-import { default as default80 } from "./wje-textarea.js";
-import { default as default81 } from "./wje-thumbnail.js";
-import { default as default82 } from "./wje-toast.js";
-import { default as default83 } from "./wje-toggle.js";
-import { default as default84 } from "./wje-toolbar.js";
-import { default as default85 } from "./wje-toolbar-action.js";
-import { default as default86 } from "./wje-tooltip.js";
-import { default as default87 } from "./wje-visually-hidden.js";
-import { default as default88 } from "./wje-sliding-container.js";
+import { default as default54 } from "./wje-progress-bar.js";
+import { default as default55 } from "./wje-qr-code.js";
+import { default as default56 } from "./wje-radio.js";
+import { default as default57 } from "./wje-radio-group.js";
+import { default as default58 } from "./wje-rate.js";
+import { default as default59 } from "./wje-relative-time.js";
+import { default as default60 } from "./wje-reorder.js";
+import { default as default61 } from "./wje-reorder-dropzone.js";
+import { default as default62 } from "./wje-reorder-handle.js";
+import { default as default63 } from "./wje-reorder-item.js";
+import { default as default64 } from "./wje-route.js";
+import { default as default65 } from "./wje-routerx.js";
+import { default as default66 } from "./wje-router-link.js";
+import { default as default67 } from "./wje-router-outlet.js";
+import { default as default68 } from "./wje-row.js";
+import { default as default69 } from "./wje-select.js";
+import { default as default70 } from "./wje-slider.js";
+import { default as default71 } from "./wje-split-view.js";
+import { default as default72 } from "./wje-status.js";
+import { default as default73 } from "./wje-step.js";
+import { default as default74 } from "./wje-stepper.js";
+import { default as default75 } from "./wje-tab.js";
+import { default as default76 } from "./wje-tab-group.js";
+import { default as default77 } from "./wje-tab-panel.js";
+import { default as default78 } from "./wje-textarea.js";
+import { default as default79 } from "./wje-thumbnail.js";
+import { default as default80 } from "./wje-toast.js";
+import { default as default81 } from "./wje-toggle.js";
+import { default as default82 } from "./wje-toolbar.js";
+import { default as default83 } from "./wje-toolbar-action.js";
+import { default as default84 } from "./wje-tooltip.js";
+import { default as default85 } from "./wje-visually-hidden.js";
+import { default as default86 } from "./wje-sliding-container.js";
+import { L } from "./list.element-BkOOqBtW.js";
+import { I } from "./infinite-scroll.element-7dR-X4sd.js";
 import { P } from "./popup.element-Dna4OwCH.js";
 function formatDate(input, format) {
   let date;
@@ -314,60 +316,60 @@ export {
   default36 as IconPicker,
   default37 as Img,
   default38 as ImgComparer,
-  default39 as InfiniteScroll,
-  default40 as Input,
-  default41 as InputFile,
-  default42 as Item,
-  default43 as Label,
-  default44 as List,
+  I as InfiniteScroll,
+  default39 as Input,
+  default40 as InputFile,
+  default41 as Item,
+  default42 as Label,
+  L as List,
   Localizer,
-  default45 as Main,
-  default46 as Masonry,
-  default47 as Menu,
-  default48 as MenuButton,
-  default49 as MenuItem,
-  default50 as MenuLabel,
-  default51 as Option,
-  default52 as Options,
-  default53 as Orgchart,
-  default54 as OrgchartGroup,
-  default55 as OrgchartItem,
+  default43 as Main,
+  default44 as Masonry,
+  default45 as Menu,
+  default46 as MenuButton,
+  default47 as MenuItem,
+  default48 as MenuLabel,
+  default49 as Option,
+  default50 as Options,
+  default51 as Orgchart,
+  default52 as OrgchartGroup,
+  default53 as OrgchartItem,
   P as Popup,
-  default56 as ProgressBar,
-  default57 as QrCode,
-  default58 as Radio,
-  default59 as RadioGroup,
-  default60 as Rate,
-  default61 as RelativeTime,
-  default62 as Reorder,
-  default63 as ReorderDropzone,
-  default64 as ReorderHandle,
-  default65 as ReorderItem,
-  default66 as Route,
-  default68 as RouterLink,
-  default69 as RouterOutlet,
-  default67 as Routerx,
-  default70 as Row,
-  default71 as Select,
-  default72 as Slider,
-  default88 as SlidingContainer,
-  default73 as SplitView,
-  default74 as Status,
-  default75 as Step,
-  default76 as Stepper,
-  default77 as Tab,
-  default78 as TabGroup,
-  default79 as TabPanel,
-  default80 as Textarea,
-  default81 as Thumbnail,
+  default54 as ProgressBar,
+  default55 as QrCode,
+  default56 as Radio,
+  default57 as RadioGroup,
+  default58 as Rate,
+  default59 as RelativeTime,
+  default60 as Reorder,
+  default61 as ReorderDropzone,
+  default62 as ReorderHandle,
+  default63 as ReorderItem,
+  default64 as Route,
+  default66 as RouterLink,
+  default67 as RouterOutlet,
+  default65 as Routerx,
+  default68 as Row,
+  default69 as Select,
+  default70 as Slider,
+  default86 as SlidingContainer,
+  default71 as SplitView,
+  default72 as Status,
+  default73 as Step,
+  default74 as Stepper,
+  default75 as Tab,
+  default76 as TabGroup,
+  default77 as TabPanel,
+  default78 as Textarea,
+  default79 as Thumbnail,
   Timeline,
   TimelineItem,
-  default82 as Toast,
-  default83 as Toggle,
-  default84 as Toolbar,
-  default85 as ToolbarAction,
-  default86 as Tooltip,
-  default87 as VisuallyHidden,
+  default80 as Toast,
+  default81 as Toggle,
+  default82 as Toolbar,
+  default83 as ToolbarAction,
+  default84 as Tooltip,
+  default85 as VisuallyHidden,
   WJElement,
   WjePermissionsApi,
   b as bindRouterLinks,

package/dist/wje-options.js

@@ -5,6 +5,8 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-7dR-X4sd.js";
+import { L as List } from "./list.element-BkOOqBtW.js";
 import Option from "./wje-option.js";
 class Options extends WJElement {
   /**
@@ -15,9 +17,23 @@ class Options extends WJElement {
   constructor() {
     super();
     __publicField(this, "dependencies", {
-      "wje-option": Option
+      "wje-option": Option,
+      "wje-infinite-scroll": InfiniteScroll,
+      "wje-list": List
     });
     __publicField(this, "className", "Options");
+    /**
+     * Generates an HTML option element based on the provided item.
+     * 
+     * @param {Object} item - The item to generate the option element for.
+     * @returns {HTMLElement} The generated option element.
+     */
+    __publicField(this, "htmlItem", (item) => {
+      let option = document.createElement("wje-option");
+      option.setAttribute("value", item[this.itemValue] || item.value);
+      option.innerText = item[this.itemText] || item.text;
+      return option;
+    });
   }
   /**
    * Returns the list of attributes to observe for changes.
@@ -26,7 +42,59 @@ class Options extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return [];
+    return ["search"];
+  }
+  set optionArrayPath(value) {
+    this.setAttribute("option-array-path", value);
+  }
+  get optionArrayPath() {
+    return this.getAttribute("option-array-path") ?? "data";
+  }
+  get hasOptionArrayPath() {
+    return this.hasAttribute("option-array-path");
+  }
+  set itemValue(value) {
+    this.setAttribute("item-value", value);
+  }
+  get itemValue() {
+    return this.getAttribute("item-value") || "value";
+  }
+  set itemText(value) {
+    this.setAttribute("item-text", value);
+  }
+  get itemText() {
+    return this.getAttribute("item-text") || "text";
+  }
+  get lazyLoadSize() {
+    return this.getAttribute("lazy-load-size") || 10;
+  }
+  set lazyLoadSize(value) {
+    this.setAttribute("lazy-load-size", value);
+  }
+  set search(value) {
+    this.setAttribute("search", value);
+  }
+  get search() {
+    return this.getAttribute("search");
+  }
+  get hasSearch() {
+    return this.hasAttribute("search");
+  }
+  get lazy() {
+    return this.hasAttribute("lazy");
+  }
+  set lazy(value) {
+    this.setAttribute("lazy", value);
+  }
+  /**
+   * Lifecycle method, called whenever an observed property changes
+   */
+  attributeChangedCallback(name, old, newName) {
+    if (this.infiniteScroll) {
+      this.infiniteScroll.placementObj.innerHTML = "";
+      this.infiniteScroll.totalPages = 0;
+      this.infiniteScroll.refresh();
+    }
   }
   /**
    * Sets up the attributes for the component.
@@ -39,16 +107,45 @@ class Options extends WJElement {
    * Fetches the pages and creates the options elements.
    */
   async beforeDraw() {
-    this.response = await this.getPages();
+    event.dispatchCustomEvent(this, "wje-options:load", {});
+  }
+  async draw() {
     let fragment = document.createDocumentFragment();
-    this.response.forEach((item, index) => {
-      let option = document.createElement("wje-option");
-      option.setAttribute("value", item[this.itemValue] || item.value);
-      option.innerText = item[this.itemText] || item.text;
-      fragment.appendChild(option);
+    const slot = document.createElement("slot");
+    if (this.hasAttribute("lazy")) {
+      const list = document.createElement("wje-list");
+      const infiniteScroll = document.createElement("wje-infinite-scroll");
+      infiniteScroll.setAttribute("placement", "wje-list");
+      infiniteScroll.setAttribute("height", "100%");
+      infiniteScroll.append(list);
+      infiniteScroll.dataToHtml = this.htmlItem;
+      infiniteScroll.setCustomData = async (page, signal) => {
+        let res = await this.service.get(`${this.url}${this.search ? `/${this.search}` : ""}?page=${page}&size=${this.lazyLoadSize}`, null, false, signal);
+        return res;
+      };
+      this.contains(infiniteScroll) || this.appendChild(infiniteScroll);
+      this.infiniteScroll = infiniteScroll;
+    } else {
+      this.response = await this.getPages();
+      this.append(...this.processData(this.response).map(this.htmlItem));
+    }
+    fragment.appendChild(slot);
+    return fragment;
+  }
+  /**
+   * Processes the given data and returns the options based on the option array path.
+   * 
+   * @param {any} data - The data to be processed.
+   * @returns {any} - The options based on the option array path.
+   */
+  processData(data) {
+    var _a;
+    const splittedOptionArrayPath = (_a = this.optionArrayPath) == null ? void 0 : _a.split(".");
+    let options = data;
+    splittedOptionArrayPath == null ? void 0 : splittedOptionArrayPath.forEach((path) => {
+      options = options[path];
     });
-    this.parentElement.appendChild(fragment);
-    event.dispatchCustomEvent(this, "wje-options:load", {});
+    return options;
   }
   /**
    * Fetches the pages from the provided URL.

package/dist/wje-select.js

@@ -359,13 +359,18 @@ class Select extends WJElement {
     });
     if (this.hasAttribute("find") && this.findEl instanceof HTMLElement) {
       event.addListener(this.findEl, "keyup", "", (e) => {
-        let value = e.target.value.trim().toLowerCase();
-        this.getAllOptions().forEach((option) => {
-          if (option.textContent.trim().toLowerCase().includes(value))
-            option.style.display = "block";
-          else
-            option.style.display = "none";
-        });
+        const optionsElement = this.querySelector("wje-options");
+        if (optionsElement && optionsElement.hasAttribute("lazy")) {
+          optionsElement.setAttribute("search", e.target.value);
+        } else {
+          let value = e.target.value.trim().toLowerCase();
+          this.getAllOptions().forEach((option) => {
+            if (option.textContent.trim().toLowerCase().includes(value))
+              option.style.display = "block";
+            else
+              option.style.display = "none";
+          });
+        }
       });
     }
   }

package/dist/wje-textarea.js

@@ -51,6 +51,12 @@ class Textarea extends WJElement {
   static get observedAttributes() {
     return [];
   }
+  set placeholder(value) {
+    this.setAttribute("placeholder", value);
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder");
+  }
   /**
    * Sets up the attributes for the component.
    */
@@ -84,6 +90,7 @@ class Textarea extends WJElement {
     input.name = this.name;
     input.disabled = this.hasAttribute("disabled");
     input.innerText = this.innerHTML;
+    input.placeholder = this.placeholder || "";
     input.classList.add("form-control");
     input.setAttribute("part", "input");
     input.setAttribute("rows", this.rows || 3);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.103",
+  "version": "0.1.104",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",