wj-elements 0.1.136 → 0.1.138

package/dist/dark.css

@@ -0,0 +1,223 @@
+/*
+[ Dark Mode ]
+*/
+
+:host,
+.wje-theme-dark,
+.dark {
+    color-scheme: dark;
+
+    --wje-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+        'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --wje-font-family-secondary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --wje-force-mac-font-family: -apple-system, BlinkMacSystemFont, 'Inter UI', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+    --wje-border-size: 0px;
+    --wje-border-style: solid;
+
+    --wje-backdrop: rgb(0, 0, 0);
+    --wje-backdrop-opacity: 0.3;
+
+    /*COLORS*/
+    --wje-color: var(--wje-color-contrast-11);
+    --wje-color-dark: hsl(0, 0%, 29%);
+    --wje-color-light: hsl(0 0% 95%);
+    --wje-background: var(--wje-color-contrast-2);
+    --wje-border-color: var(--wje-color-contrast-4);
+
+    --wje-card-background: var(--wje-color-contrast-3);
+    --wje-card-color: var(--wje-color-white) !important;
+
+    --wje-color-primary: var(--wje-color-primary-1);
+    --wje-color-complete: var(--wje-color-complete-1);
+    --wje-color-success: var(--wje-color-success-1);
+    --wje-color-warning: var(--wje-color-warning-1);
+    --wje-color-danger: var(--wje-color-danger-1);
+    --wje-color-info: var(--wje-color-info-1);
+    --wje-color-menu: hsl(220, 15%, 15%);
+    --wje-color-contrast: hsl(210, 11%, 15%);
+
+    --wje-color-white: #fff;
+    --wje-color-black: #000;
+
+    /* Primary */
+    --wje-color-primary-1: hsla(254, 50%, 21%, 1);
+    --wje-color-primary-2: hsla(254, 52%, 24%, 1);
+    --wje-color-primary-3: hsla(254, 52%, 35%, 1);
+    --wje-color-primary-4: hsla(254, 54%, 39%, 1);
+    --wje-color-primary-5: hsla(254, 54%, 47%, 1);
+    --wje-color-primary-6: hsla(254, 54%, 53%, 1);
+    --wje-color-primary-7: hsla(254, 54%, 57%, 1);
+    --wje-color-primary-8: hsla(254, 68%, 66%, 1);
+    --wje-color-primary-9: hsla(254, 88%, 78%, 1);
+    --wje-color-primary-10: hsla(254, 70%, 81%, 1);
+    --wje-color-primary-11: hsla(254, 69%, 88%, 1);
+
+    /* Complete */
+    --wje-color-complete-1: hsla(211, 91%, 16%, 1);
+    --wje-color-complete-2: hsla(211, 91%, 23%, 1);
+    --wje-color-complete-3: hsla(211, 91%, 31%, 1);
+    --wje-color-complete-4: hsla(211, 93%, 35%, 1);
+    --wje-color-complete-5: hsla(211, 93%, 39%, 1);
+    --wje-color-complete-6: hsla(211, 93%, 44%, 1);
+    --wje-color-complete-7: hsla(211, 93%, 49%, 1);
+    --wje-color-complete-8: hsla(211, 93%, 55%, 1);
+    --wje-color-complete-9: hsla(211, 100%, 75%, 1);
+    --wje-color-complete-10: hsla(211, 100%, 81%, 1);
+    --wje-color-complete-11: hsla(211, 93%, 85%, 1);
+
+    /* Success */
+    --wje-color-success-1: hsla(158, 93%, 13%, 1);
+    --wje-color-success-2: hsla(158, 94%, 16%, 1);
+    --wje-color-success-3: hsla(158, 95%, 19%, 1);
+    --wje-color-success-4: hsla(158, 96%, 22%, 1);
+    --wje-color-success-5: hsla(158, 96%, 24%, 1);
+    --wje-color-success-6: hsla(158, 95%, 27%, 1);
+    --wje-color-success-7: hsla(158, 96%, 31%, 1);
+    --wje-color-success-8: hsla(158, 96%, 35%, 1);
+    --wje-color-success-9: hsla(158, 86%, 48%, 1);
+    --wje-color-success-10: hsla(158, 78%, 62%, 1);
+    --wje-color-success-11: hsla(158, 80%, 75%, 1);
+
+    /* Warning */
+    --wje-color-warning-1: hsla(47, 75%, 19%, 1);
+    --wje-color-warning-2: hsla(47, 75%, 23%, 1);
+    --wje-color-warning-3: hsla(47, 75%, 27%, 1);
+    --wje-color-warning-4: hsla(47, 74%, 31%, 1);
+    --wje-color-warning-5: hsla(47, 78%, 37%, 1);
+    --wje-color-warning-6: hsla(47, 78%, 41%, 1);
+    --wje-color-warning-7: hsla(47, 78%, 45%, 1);
+    --wje-color-warning-8: hsla(47, 80%, 52%, 1);
+    --wje-color-warning-9: hsla(47, 80%, 67%, 1);
+    --wje-color-warning-10: hsla(47, 90%, 74%, 1);
+    --wje-color-warning-11: hsla(47, 90%, 80%, 1);
+
+    /* Danger */
+    --wje-color-danger-1: hsla(3, 82%, 17%, 1);
+    --wje-color-danger-2: hsla(3, 82%, 19%, 1);
+    --wje-color-danger-3: hsla(3, 83%, 28%, 1);
+    --wje-color-danger-4: hsla(3, 83%, 32%, 1);
+    --wje-color-danger-5: hsla(3, 83%, 36%, 1);
+    --wje-color-danger-6: hsla(3, 83%, 40%, 1);
+    --wje-color-danger-7: hsla(3, 82%, 44%, 1);
+    --wje-color-danger-8: hsla(3, 72%, 58%, 1);
+    --wje-color-danger-9: hsla(3, 80%, 70%, 1);
+    --wje-color-danger-10: hsla(3, 80%, 76%, 1);
+    --wje-color-danger-11: hsla(4, 80%, 82%, 1);
+
+    /* Info */
+    --wje-color-info-1: hsla(207, 36%, 16%, 1);
+    --wje-color-info-2: hsla(207, 16%, 27%, 1);
+    --wje-color-info-3: hsla(207, 20%, 35%, 1);
+    --wje-color-info-4: hsla(210, 7%, 45%, 1);
+    --wje-color-info-5: hsla(208, 6%, 55%, 1);
+    --wje-color-info-6: hsla(203, 6%, 62%, 1);
+    --wje-color-info-7: hsla(213, 6%, 69%, 1);
+    --wje-color-info-8: hsla(203, 5%, 71%, 1);
+    --wje-color-info-9: hsla(210, 7%, 78%, 1);
+    --wje-color-info-10: hsla(204, 6%, 85%, 1);
+    --wje-color-info-11: hsla(210, 5%, 92%, 1);
+
+    /* Contrast */
+    --wje-color-contrast-0: hsla(240, 3%, 13%, 1);
+    --wje-color-contrast-1: hsla(240, 6%, 10%, 1);
+    --wje-color-contrast-2: hsla(0, 0%, 0%, 1);
+    --wje-color-contrast-3: hsla(240, 5%, 30%, 1);
+    --wje-color-contrast-4: hsla(240, 5%, 41%, 1);
+    --wje-color-contrast-5: hsla(240, 4%, 58%, 1);
+    --wje-color-contrast-6: hsla(240, 5%, 75%, 1);
+    --wje-color-contrast-7: hsla(240, 5%, 84%, 1);
+    --wje-color-contrast-8: hsla(240, 6%, 90%, 1);
+    --wje-color-contrast-9: hsla(240, 5%, 96%, 1);
+    --wje-color-contrast-10: hsla(0, 0%, 98%, 1);
+    --wje-color-contrast-11: hsla(0, 0%, 100%, 1);
+
+    /*
+   [ Elements ]
+   */
+
+    /* Avatar */
+    --wje-avatar-color: var(--wje-color-contrast-11);
+    --wje-avatar-background-color: var(--wje-color-contrast-3);
+
+    /* Breadcrumb */
+    --wje-breadcrumb-a: var(--wje-color-contrast-8);
+    --wje-breadcrumb-a-hover: var(--wje-color-contrast-6);
+
+    /* Button */
+    --wje-button-border-color: var(--wje-color-contrast-1);
+
+    /* Divider */
+    --wje-divider-border-color: var(--wje-border-color);
+
+    /* File Upload - Item */
+    --wje-file-upload-item-border-width: 1px;
+    --wje-file-upload-item-border-style: solid;
+    --wje-file-upload-item-border-color: var(--wje-border-color);
+
+    /* Input */
+    --wje-input-background-color: var(--wje-background);
+    --wje-input-color: var(--wje-color);
+    --wje-input-color-invalid: var(--wje-color-danger);
+    --wje-input-border-color: var(--wje-border-color);
+    --wje-input-border-color-focus: var(--wje-color-primary);
+
+    /* Item */
+    --wje-item-color: var(--wje-color);
+    --wje-item-border-color: var(--wje-border-color);
+    --wje-item-background: transparent;
+    --wje-item-background-hover: var(--wje-color-contrast-3);
+
+    /* List */
+    --wje-list-background: var(--wje-background);
+
+    /* Menu */
+    --wje-menu-background: var(--wje-background);
+    --wje-menu-border-color: var(--wje-border-color);
+
+    /* Menu - Item */
+    --wje-menu-item-color: var(--wje-color);
+    --wje-menu-item-background: transparent;
+    --wje-menu-item-color-hover: var(--wje-color-contrast-8);
+    --wje-menu-item-background-hover: var(--wje-border-color);
+    --wje-menu-item-color-focus: var(--wje-color-contrast-8);
+    --wje-menu-item-background-focus: var(--wje-border-color);
+    --wje-menu-item-color-active: var(--wje-color-contrast-8);
+    --wje-menu-item-background-active: var(--wje-border-color);
+
+    /* Option */
+    --wje-option-highlighted: var(--wje-color-contrast-3);
+
+    /* Orgchart - Item */
+    --wje-orgchart-item-background: var(--wje-color-contrast-0);
+
+    --wje-orgchart-item-highlight-background: var(--wje-color-complete-2);
+    --wje-orgchart-item-boss-background: var(--wje-color-complete-2);
+    --wje-orgchart-item-hover-background: var(--wje-color-contrast-3);
+
+    --wje-orgchart-item-highlight-border: 1px solid var(--wje-color-complete-3);
+    --wje-orgchart-item-boss-border: 1px solid var(--wje-border-color);
+    --wje-orgchart-item-hover-border: 1px solid var(--wje-color-danger-3);
+
+    /* Rate */
+    --wje-rate-color: var(--wje-color-contrast-11);
+    --wje-rate-selected-color: var(--wje-color-danger-6);
+
+    /* Tab */
+    --wje-tab-color-active: var(--wje-color-primary-11);
+    --wje-tab-color-hover: var(--wje-color-primary-1);
+
+    /* Textarea */
+    --wje-textarea-background-color: var(--wje-background);
+    --wje-textarea-color: var(--wje-color);
+    --wje-textarea-color-invalid: var(--wje-color-danger-1);
+    --wje-textarea-border-color: var(--wje-border-color);
+    --wje-textarea-border-color-focus: var(--wje-color-primary-1);
+
+    /* Tooltip */
+    --wje-tooltip-arrow-color: var(--wje-color-contrast-4);
+    --wje-tooltip-background: var(--wje-color-contrast-4);
+    --wje-tooltip-color: var(--wje-color-contrast-11);
+}

package/dist/infinite-scroll.element-XVJukzjy.js

@@ -0,0 +1,272 @@
+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);
+import WJElement, { WjElementUtils, event } from "./wje-element.js";
+const styles = "/*\n[ Wj infinite Scroll ]\n*/\n\n:host {\n    overflow-x: auto;\n    width: var(--wje-infinite-scroll-width);\n    height: var(--wje-infinite-scroll-height);\n    display: block;\n}\n\n.native {\n    /*position: relative;*/\n}\n\n.loading {\n    position: sticky;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: 9999;\n    background-color: var(--wje-infinite-scroll-loading-bg);\n    &.show {\n        display: flex;\n    }\n}\n\n[name='ending'] {\n    display: none;\n    margin-top: 1rem;\n    text-align: center;\n}\n\n[name='ending'].show {\n    display: block;\n}\n";
+class InfiniteScroll extends WJElement {
+  /**
+   * Creates an instance of InfiniteScroll.
+   */
+  constructor() {
+    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.interpolate(this.infiniteScrollTemplate, item);
+      let doc = this.parser.parseFromString(interpolateItem, "text/html");
+      let element = doc.activeElement.firstElementChild;
+      console.log("IS Element:", element);
+      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);
+      });
+    });
+    /**
+     * Interpolates the string.
+     * @param template
+     * @param {object} params The parameters for interpolation.
+     * @returns {string} The interpolated string.
+     */
+    __publicField(this, "interpolate", (template, params) => {
+      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;
+    });
+    this.totalPages = 0;
+    this.isLoading = [];
+    this._response = {};
+    this.iterate = null;
+    this._infiniteScrollTemplate = null;
+    this._abortController = new AbortController();
+    this._signal = this._abortController.signal;
+  }
+  /**
+   * Dependencies of the InfiniteScroll component.
+   * @param value
+   */
+  set infiniteScrollTemplate(value) {
+    this._infiniteScrollTemplate = value;
+  }
+  /**
+   * Getter for the infiniteScrollTemplate property.
+   * @returns {null}
+   */
+  get infiniteScrollTemplate() {
+    return this._infiniteScrollTemplate;
+  }
+  /**
+   * Dependencies of the InfiniteScroll component.
+   * @param value
+   */
+  set response(value) {
+    this._response = value;
+  }
+  /**
+   * Getter for the response property.
+   * @returns {*|{}}
+   */
+  get response() {
+    return this._response;
+  }
+  /**
+   * Dependencies of the InfiniteScroll component.
+   * @param value
+   */
+  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.
+   */
+  beforeDraw() {
+    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 and returns a document fragment.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    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 == null ? void 0 : 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);
+    } finally {
+      this.hideLoader();
+    }
+  }
+}
+export {
+  InfiniteScroll as I
+};
+//# sourceMappingURL=infinite-scroll.element-XVJukzjy.js.map

package/dist/infinite-scroll.element-XVJukzjy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-scroll.element-XVJukzjy.js","sources":["../packages/wje-infinite-scroll/infinite-scroll.element.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InfiniteScroll` is a custom web component that represents an infinite scroll.\n * It extends from `WJElement`.\n * @summary This element allows users to scroll through a potentially infinite amount of content.\n * @documentation https://elements.webjet.sk/components/infinite-scroll\n * @status stable\n * @augments {WJElement}\n * @csspart loader - The loader part of the infinite scroll.\n * @slot - The default slot for the infinite scroll.\n * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.\n * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.\n * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.\n * @tag wje-infinite-scroll\n */\n\nexport default class InfiniteScroll extends WJElement {\n    /**\n     * Creates an instance of InfiniteScroll.\n     */\n    constructor() {\n        super();\n\n        this.totalPages = 0;\n        this.isLoading = [];\n        this._response = {};\n        this.iterate = null;\n        this._infiniteScrollTemplate = null;\n        this._abortController = new AbortController();\n        this._signal = this._abortController.signal;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set infiniteScrollTemplate(value) {\n        this._infiniteScrollTemplate = value;\n    }\n\n    /**\n     * Getter for the infiniteScrollTemplate property.\n     * @returns {null}\n     */\n    get infiniteScrollTemplate() {\n        return this._infiniteScrollTemplate;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set response(value) {\n        this._response = value;\n    }\n\n    /**\n     * Getter for the response property.\n     * @returns {*|{}}\n     */\n    get response() {\n        return this._response;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set objectName(value) {\n        this.setAttribute('object-name', value);\n    }\n\n    get objectName() {\n        return this.getAttribute('object-name') ?? 'data';\n    }\n\n    className = 'InfiniteScroll';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     */\n    beforeDraw() {\n        this.iterate = this.querySelector('[iterate]');\n        this.infiniteScrollTemplate = this.iterate?.outerHTML;\n        this.iterate?.remove(); // remove template\n\n        this.setAttribute('style', 'height: ' + this.height);\n\n        // if this._loading is not fulfilled then cancel the promise\n        if (this._signal) {\n            this._abortController.abort();\n            this._abortController = new AbortController();\n            this._signal = this._abortController.signal;\n        }\n    }\n\n    /**\n     * Draws the component and returns a document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let slot = document.createElement('slot');\n\n        let ending = document.createElement('slot');\n        ending.setAttribute('name', 'ending');\n\n        if (WjElementUtils.hasSlot(this, 'loader')) {\n            let loading = document.createElement('div');\n            loading.classList.add('loading');\n\n            let loader = document.createElement('slot');\n            loader.setAttribute('name', 'loader');\n\n            loading.appendChild(loader);\n\n            this.loadingEl = loading;\n\n            fragment.appendChild(loading);\n        }\n\n        native.appendChild(slot);\n        native.appendChild(ending);\n\n        fragment.appendChild(native);\n\n        this.endingEl = ending;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    async afterDraw() {\n        this.queryParams = this.queryParams || '';\n        this.size = +this.size || 10;\n        this.currentPage = 0;\n\n        this.scrollEvent();\n        this._loading = this.loadPages(this.currentPage);\n        await this._loading;\n    }\n\n    /**\n     * Adds the scroll event listener.\n     */\n    scrollEvent = () => {\n        this.addEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * Removes the scroll event listener.\n     */\n    unScrollEvent = () => {\n        this.removeEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * Handles the scroll event.\n     * @param {Event} e The event.\n     */\n    onScroll = (e) => {\n        const { scrollTop, scrollHeight, clientHeight } = e.target;\n\n        if (\n            scrollTop + clientHeight >= scrollHeight - 300 &&\n            this.currentPage <= this.totalPages &&\n            this.isLoading.includes(this.currentPage)\n        ) {\n            this.currentPage++;\n            this._loading = this.loadPages(this.currentPage);\n        }\n    };\n\n    /**\n     * Fetches the pages from the server.\n     * @param {number} page The page number.\n     * @returns {Promise<object>} The response from the server.\n     */\n    async getPages(page) {\n        let hasParams = this.url.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`,\n            {\n                signal: this._signal,\n            }\n        );\n\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Hides the loader.\n     */\n    hideLoader() {\n        this?.loadingEl?.classList.remove('show');\n    }\n\n    /**\n     * Shows the loader.\n     */\n    showLoader() {\n        this?.loadingEl?.classList.add('show');\n    }\n\n    /**\n     * Checks if there are more pages to load.\n     * @param {number} page The page number.\n     * @returns {boolean} Whether there are more pages to load.\n     */\n    hasMorePages(page) {\n        return this.totalPages === 0 || page < this.totalPages;\n    }\n\n    /**\n     * Loads the pages.\n     * @param {number} page The page number.\n     */\n    async loadPages(page) {\n        this.showLoader();\n        try {\n            if (this.hasMorePages(page)) {\n                let response;\n                this.parser = new DOMParser();\n\n                if (typeof this.setCustomData === 'function') {\n                    response = await this.setCustomData(page, this._signal);\n                } else {\n                    response = await this.getPages(page);\n                }\n\n                this.totalPages = response?.totalPages;\n                this.currentPage = page;\n\n                this.placementObj = this;\n\n                // if there is a \"container\" attribute, find the element\n                if (this.hasAttribute('placement')) this.placementObj = this.querySelector(this.placement);\n\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:load', response);\n\n                this.response = response;\n\n                this.customForeach(this.objectName ? response[this.objectName] : response);\n\n                this.isLoading.push(page);\n            } else {\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:complete');\n                this.endingEl.classList.add('show');\n            }\n        } catch (error) {\n            console.log(error);\n        } finally {\n            this.hideLoader();\n        }\n    }\n\n    /**\n     * Sets the custom data.\n     *\n     */\n    dataToHtml = (item) => {\n        let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);\n        let doc = this.parser.parseFromString(interpolateItem, 'text/html');\n        let element = doc.activeElement.firstElementChild;\n        console.log(\"IS Element:\", element);\n        return element;\n    };\n\n    customForeach = (data) => {\n        data.forEach((item) => {\n            let element = this.dataToHtml(item);\n            event.addListener(element, 'click', 'wje-infinite-scroll:click-item', null);\n\n            this.placementObj.insertAdjacentElement('beforeend', element);\n        });\n    };\n\n    /**\n     * Interpolates the string.\n     * @param template\n     * @param {object} params The parameters for interpolation.\n     * @returns {string} The interpolated string.\n     */\n    interpolate = (template, params) => {\n        let keys = template.match(/\\{{.*?\\}}/g);\n\n        if (keys) {\n            for (let key of keys) {\n                let cleanKey = key.replace('{{', '').replace('}}', '');\n                let val = '';\n                cleanKey.split('.').forEach((k) => {\n                    val = val === '' ? params[k] : val[k];\n                });\n\n                template = template.replace(key, val);\n            }\n        }\n        return template;\n    };\n}\n"],"names":[],"mappings":"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"}