wj-elements 0.1.134 → 0.1.136

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.134",
+  "version": "0.1.136",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -78,6 +78,7 @@
     "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.26.5",
     "@custom-elements-manifest/analyzer": "^0.9.3",
     "@eslint/js": "^9.13.0",
     "@open-wc/semantic-dom-diff": "^0.20.1",
@@ -88,7 +89,7 @@
     "animate.css": "^4.1.1",
     "custom-element-jet-brains-integration": "^1.4.4",
     "dotenv": "^16.4.5",
-    "eslint": "^9.15.0",
+    "eslint": "^9.19.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsdoc": "^50.5.0",

package/dist/dark.css

@@ -1,223 +0,0 @@
-/*
-[ 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

@@ -1,271 +0,0 @@
-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
-};