wj-elements 0.1.128 → 0.1.129

package/dist/wje-main.js

@@ -45,7 +45,7 @@ class Main extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     fragment.appendChild(element);

package/dist/wje-masonry.js

@@ -17,7 +17,7 @@ function getColCount(totalWidth, cols, maxColWidth) {
 }
 function debounce(cb, ms, id) {
   const existingTimeout = DEBOUNCE_MAP.get(id);
-  if (existingTimeout != null) window.clearTimeout(existingTimeout);
+  if (existingTimeout !== null && existingTimeout !== void 0) window.clearTimeout(existingTimeout);
   DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));
 }
 function findSmallestColIndex(colHeights) {
@@ -55,7 +55,7 @@ class Masonry extends WJElement {
      * @param {Array} entries - The entries to use.
      */
     __publicField(this, "onResize", (entries) => {
-      const { width } = entries != null && Array.isArray(entries) && entries.length > 0 ? entries[0].contentRect : { width: this.offsetWidth };
+      const { width } = entries !== null && entries !== void 0 && Array.isArray(entries) && entries.length > 0 ? entries[0].contentRect : { width: this.offsetWidth };
       const colCount = getColCount(width, this.cols, this.maxColWidth);
       if (colCount !== this.columns.length) {
         this.scheduleLayout();
@@ -65,7 +65,7 @@ class Masonry extends WJElement {
      * Lays out the element.
      */
     __publicField(this, "layout", () => {
-      if (this.currentRequestAnimationFrameCallback != null) {
+      if (this.currentRequestAnimationFrameCallback !== null && this.currentRequestAnimationFrameCallback !== void 0) {
         window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);
       }
       this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
@@ -113,7 +113,10 @@ class Masonry extends WJElement {
    * @param {number} value - The number of columns.
    */
   set cols(value) {
-    this.hasAttribute("cols") ? this.setAttribute("cols", value) : "auto";
+    if (this.hasAttribute("cols"))
+      this.setAttribute("cols", value);
+    else
+      this.setAttribute("cols", "auto");
   }
   /**
    * Getter for the cols property.
@@ -191,7 +194,7 @@ class Masonry extends WJElement {
   beforeDisconnect() {
     this.unsetSlot.removeEventListener("slotchange", this.onSlotChange);
     window.removeEventListener("resize", this.onResize);
-    if (this.ro != null) {
+    if (this.ro !== null && this.ro !== void 0) {
       this.ro.unobserve(this);
     }
   }
@@ -208,7 +211,7 @@ class Masonry extends WJElement {
    * @param {Object} params - The parameters to use.
    * @returns {DocumentFragment} The drawn element.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("id", "unset-items");
@@ -244,9 +247,6 @@ class Masonry extends WJElement {
     if (columns.length === colCount) {
       return;
     }
-    for (const column of columns) {
-      column.parentNode && column.parentNode.removeChild(column);
-    }
     for (let i = 0; i < colCount; i++) {
       const column = document.createElement("div");
       column.classList.add("column");

package/dist/wje-master.js

@@ -96,9 +96,9 @@ import { default as default84 } from "./wje-toolbar-action.js";
 import { default as default85 } from "./wje-tooltip.js";
 import { default as default86 } from "./wje-visually-hidden.js";
 import { default as default87 } from "./wje-sliding-container.js";
-import { L } from "./list.element-TZXMx1rt.js";
-import { I } from "./infinite-scroll.element-DcO1E5Es.js";
-import { P } from "./popup.element-l8v-dMoK.js";
+import { L } from "./list.element-syl98NWS.js";
+import { I } from "./infinite-scroll.element-R3y_ZQj6.js";
+import { P } from "./popup.element-C0a1z1y2.js";
 function formatDate(input, format) {
   let date;
   if (typeof input === "string") {
@@ -153,7 +153,7 @@ const enGb = {
   "wj.stepper.step": "Step"
 };
 Localizer.registerTranslation(enGb);
-const styles$2 = ".native-timeline {\n    position: relative;\n}\n\n.vertical-line {\n    position: absolute;\n    margin-left: calc(var(--wje-spacing-x-large) + 1px);\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background-color: var(--wje-color-info-3);\n}\n\n\n";
+const styles$1 = ".native-timeline {\n    position: relative;\n}\n\n.vertical-line {\n    position: absolute;\n    margin-left: calc(var(--wje-spacing-x-large) + 1px);\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background-color: var(--wje-color-info-3);\n}\n\n\n";
 class Timeline extends WJElement {
   constructor() {
     super();
@@ -171,7 +171,7 @@ class Timeline extends WJElement {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return styles$2;
+    return styles$1;
   }
   /**
    * Sets up the attributes for the component.
@@ -187,7 +187,7 @@ class Timeline extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store2, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     const native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -203,7 +203,7 @@ class Timeline extends WJElement {
   }
 }
 Timeline.define("wje-timeline", Timeline);
-const styles$1 = ":host {\n    --wje-card-content-padding: var(--wje-spacing-medium);\n    margin-bottom: .5rem;\n    display: block;\n}\n\n.native-timeline-item > wje-icon {\n    color: var(--wje-color-contrast-5) !important;\n}\n\n.timeline-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.native-timeline-item {\n    display: flex;\n    position: relative;\n    padding: var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);\n    gap: var(--wje-spacing-medium);\n    border-width: 1px;\n    border-style: solid;\n    border-color: transparent;\n    border-radius: var(--wje-border-radius-large);\n}\n\n:host .native-timeline-item:hover {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-3);\n}\n\n:host([active]) .native-timeline-item {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-3);\n}\n\n:host([active]) .native-timeline-item:hover {\n    background-color: var(--wje-color-primary-2);\n}\n\n.icon-container {\n    position: absolute;\n    display: flex;\n    width: var(--wje-size-small); \n    height: var(--wje-size-small); \n    padding: var(--wje-spacing-2x-small);\n    border-radius: var(--wje-border-radius-circle); \n    opacity: 0;\n}\n\n.content-container {\n    height: fit-content;\n    gap: var(--wje-spacing-small);\n}\n\n.event {\n    margin: 0;\n    font-size: var(--wje-font-size-large);\n    font-weight: var(--wje-font-weight-bold);\n    line-height: var(--wje-line-height-dense);\n    letter-spacing: var(--wje-spacing-4x-small);\n}\n\n.additional-content {\n    font-size: var(--wje-font-size-medium);\n    margin-top: 1rem;\n}\n\nwje-status {\n    position: relative;\n    z-index: 1;\n}\n\nwje-relative-time {\n    display: block;\n    margin-bottom: var(--wje-spacing-2x-small);\n}";
+const styles = ":host {\n    --wje-card-content-padding: var(--wje-spacing-medium);\n    margin-bottom: .5rem;\n    display: block;\n}\n\n.native-timeline-item > wje-icon {\n    color: var(--wje-color-contrast-5) !important;\n}\n\n.timeline-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.native-timeline-item {\n    display: flex;\n    position: relative;\n    padding: var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);\n    gap: var(--wje-spacing-medium);\n    border-width: 1px;\n    border-style: solid;\n    border-color: transparent;\n    border-radius: var(--wje-border-radius-large);\n}\n\n:host .native-timeline-item:hover {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-3);\n}\n\n:host([active]) .native-timeline-item {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-3);\n}\n\n:host([active]) .native-timeline-item:hover {\n    background-color: var(--wje-color-primary-2);\n}\n\n.icon-container {\n    position: absolute;\n    display: flex;\n    width: var(--wje-size-small); \n    height: var(--wje-size-small); \n    padding: var(--wje-spacing-2x-small);\n    border-radius: var(--wje-border-radius-circle); \n    opacity: 0;\n}\n\n.content-container {\n    height: fit-content;\n    gap: var(--wje-spacing-small);\n}\n\n.event {\n    margin: 0;\n    font-size: var(--wje-font-size-large);\n    font-weight: var(--wje-font-weight-bold);\n    line-height: var(--wje-line-height-dense);\n    letter-spacing: var(--wje-spacing-4x-small);\n}\n\n.additional-content {\n    font-size: var(--wje-font-size-medium);\n    margin-top: 1rem;\n}\n\nwje-status {\n    position: relative;\n    z-index: 1;\n}\n\nwje-relative-time {\n    display: block;\n    margin-bottom: var(--wje-spacing-2x-small);\n}";
 class TimelineItem extends WJElement {
   constructor() {
     super();
@@ -221,7 +221,7 @@ class TimelineItem extends WJElement {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return styles$1;
+    return styles;
   }
   /**
    * Sets up the attributes for the component.
@@ -238,7 +238,7 @@ class TimelineItem extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store2, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -276,113 +276,6 @@ class TimelineItem extends WJElement {
   }
 }
 TimelineItem.define("wje-timeline-item", TimelineItem);
-const styles = '/*\n[ WJ Toast ]\n*/\n\n:host {\n  position: fixed;\n  z-index: 9999;\n  width: 300px;\n}\n\n.native-toast {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  overflow: hidden;\n  margin: 0;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--wje-border-radius-large);\n\n  slot[name="avatar"]::slotted(wje-avatar) {\n    margin-right: .5rem;\n  }\n\n  .content {\n    font-size: var(--wje-font-size-small);\n    .title {\n      font-size: var(--wje-font-size);\n      font-weight: var(--wje-font-weight-bold);\n    }\n  }\n\n  wje-button {\n    --wje-button-margin-inline: auto 0;\n    margin-left: auto !important;\n  }\n}\n\n:host([position=top]) {\n  animation: slideDown .3s ease-out forwards;\n  top: 1rem;\n  left: auto;\n  right: auto;\n}\n\n:host([position=bottom]) {\n  animation: slideUp .3s ease-out forwards;\n  bottom: 1rem;\n  left: auto;\n  right: auto;\n}\n\n:host([position=top-start]) {\n  animation: slideStart .3s ease-out forwards;\n  top: 1rem;\n  left: 1rem;\n  right: auto;\n}\n\n:host([position=top-end]) {\n  animation: slideEnd .3s ease-out forwards;\n  top: 1rem;\n  left: auto;\n  right: 1rem;\n}\n\n:host([position=bottom-start]) {\n  animation: slideStart .3s ease-out forwards;\n  bottom: 1rem;\n  left: 1rem;\n  right: auto;\n}\n\n:host([position=bottom-end]) {\n  animation: slideEnd .3s ease-out forwards;\n  bottom: 1rem;\n  left: auto;\n  right: 1rem;\n}\n\n@keyframes slideDown {\n  0% {\n    transform: translateY(-100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideUp {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideStart {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideEnd {\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n/*PRIMARY*/\n:host([type=primary]) .native-toast {\n  background-color: var(--wje-color-primary-1);\n  color: var(--wje-color-primary-9);\n  border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([type=complete]) .native-toast {\n  background-color: var(--wje-color-complete-1);\n  color: var(--wje-color-complete-9);\n  border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([type=success]) .native-toast {\n  background-color: var(--wje-color-success-1);\n  color: var(--wje-color-success-9);\n  border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([type=warning]) .native-toast{\n  background-color: var(--wje-color-warning-1);\n  color: var(--wje-color-warning-11);\n  border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([type=danger]) .native-toast {\n  background-color: var(--wje-color-danger-1);\n  color: var(--wje-color-danger-9);\n  border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([type=info]) .native-toast {\n  background-color: var(--wje-color-info-1);\n  color: var(--wje-color-info-11);\n  border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([type=contrast]) .native-toast {\n  background-color: var(--wje-color-contrast-2);\n  color: var(--wje-color-primary-9);\n  border-color: var(--wje-color-contrast-3);\n}';
-class ToastItem extends WJElement {
-  /**
-   * Toast constructor
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Class name
-     * @type {string}
-     */
-    __publicField(this, "className", "ToastItem");
-    __publicField(this, "removeToast", () => {
-      clearTimeout(this.timeout);
-      this.remove();
-    });
-  }
-  set duration(value) {
-    this.setAttribute("duration", value);
-  }
-  get duration() {
-    return +this.getAttribute("duration");
-  }
-  set position(value) {
-    this.setAttribute("position", value);
-  }
-  get position() {
-    return this.getAttribute("position");
-  }
-  set type(value) {
-    this.setAttribute("type", value);
-  }
-  get type() {
-    return this.getAttribute("type");
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   *
-   * @static
-   * @returns {Array<string>}
-   */
-  static get observedAttributes() {
-    return ["position", "type", "duration"];
-  }
-  /**
-   * Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
-   */
-  draw(context, store2, params) {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-toast");
-    let avatarSlot = document.createElement("slot");
-    avatarSlot.setAttribute("name", "avatar");
-    avatarSlot.classList.add("avatar");
-    let content = document.createElement("div");
-    content.classList.add("content");
-    content.innerHTML = `<div class="title">${this.title}</div><div class="message"><slot></slot></div>`;
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("name", "x");
-    let closeBtn = document.createElement("wje-button");
-    closeBtn.setAttribute("fill", "link");
-    closeBtn.setAttribute("color", this.type);
-    closeBtn.setAttribute("size", "small");
-    closeBtn.classList.add("close");
-    closeBtn.appendChild(icon);
-    native.appendChild(avatarSlot);
-    native.appendChild(content);
-    if (this.hasAttribute("close"))
-      native.appendChild(closeBtn);
-    fragment.appendChild(native);
-    this.closeBtn = closeBtn;
-    return fragment;
-  }
-  afterDraw() {
-    this.closeBtn.addEventListener("wje-button:click", this.removeToast);
-    if (this.duration > 0) {
-      this.timeout = setTimeout(() => {
-        this.removeToast();
-      }, this.duration);
-    }
-  }
-  beforeDisconnect() {
-    this.closeBtn.removeEventListener("wje-button:click", this.removeToast);
-    clearTimeout(this.timeout);
-  }
-}
-ToastItem.define("wje-toast-item", ToastItem);
 export {
   default2 as Accordion,
   default3 as AccordionItem,
@@ -471,7 +364,6 @@ export {
   Timeline,
   TimelineItem,
   default81 as Toast,
-  ToastItem,
   default82 as Toggle,
   default83 as Toolbar,
   default84 as ToolbarAction,

package/dist/wje-menu-button.js

@@ -45,7 +45,7 @@ class MenuButton extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let slot = document.createElement("slot");
     fragment.appendChild(slot);
@@ -54,6 +54,9 @@ class MenuButton extends WJElement {
   /**
    * Refreshes the component after drawing.
    * Adds a click event listener that toggles the "open" class on the content element.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
   afterDraw() {
     event.addListener(this, "click", null, (e) => {

package/dist/wje-menu-item.js

@@ -151,7 +151,7 @@ class MenuItem extends WJElement {
   /**
    * Removes the active attribute from the menu before drawing the MenuItem.
    */
-  beforeDraw(context, store, params) {
+  beforeDraw() {
     var _a;
     (_a = this.querySelector("wje-menu")) == null ? void 0 : _a.removeAttribute("active");
   }
@@ -163,7 +163,7 @@ class MenuItem extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment} The fragment to be appended to the MenuItem.
    */
-  draw(context, store, params) {
+  draw() {
     var _a, _b, _c;
     this.hasSubmenu = WjElementUtils.hasSlot(this, "submenu");
     let fragment = document.createDocumentFragment();
@@ -188,7 +188,10 @@ class MenuItem extends WJElement {
     checkedIcon.setAttribute("part", "check");
     checkedIcon.classList.add("check-icon");
     checkedIcon.innerHTML = `<wje-icon name="check"></wje-icon>`;
-    this.hasAttribute("checked") ? checkedIcon.classList.add("checked") : checkedIcon.classList.remove("checked");
+    if (this.hasAttribute("checked"))
+      checkedIcon.classList.add("checked");
+    else
+      checkedIcon.classList.remove("checked");
     let start = document.createElement("slot");
     start.name = "start";
     let slot = document.createElement("slot");
@@ -204,7 +207,10 @@ class MenuItem extends WJElement {
     submenuIcon.setAttribute("part", "submenu-icon");
     submenuIcon.classList.add("submenu-icon", submenuIconClass);
     submenuIcon.innerHTML = this.collapse ? `<wje-icon name="chevron-down"></wje-icon>` : `<wje-icon name="chevron-right"></wje-icon>`;
-    this.hasSubmenu ? native.classList.add("has-submenu") : native.classList.remove("has-submenu");
+    if (this.hasSubmenu)
+      native.classList.add("has-submenu");
+    else
+      native.classList.remove("has-submenu");
     native.appendChild(checkedIcon);
     native.appendChild(start);
     native.appendChild(slot);
@@ -240,6 +246,9 @@ class MenuItem extends WJElement {
   }
   /**
    * Adds event listeners after drawing the MenuItem.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters
    */
   afterDraw() {
     this.addEventListener("mousemove", this.dispatchMove);

package/dist/wje-menu-label.js

@@ -46,7 +46,7 @@ class MenuLabel extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let slot = document.createElement("slot");
     slot.setAttribute("part", "native");

package/dist/wje-menu.js

@@ -45,7 +45,7 @@ class Menu extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     this.classList.remove("wje-menu-collapse");
     if (this.hasAttribute("collapse"))
@@ -60,6 +60,9 @@ class Menu extends WJElement {
   }
   /**
    * Refreshes the component after drawing.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters
    */
   afterDraw() {
     Array.from(this.children).forEach((child) => {

package/dist/wje-option.js

@@ -22,15 +22,16 @@ class Option extends WJElement {
   }
   /**
    * Sets the selected attribute of the option.
-   *
    * @param {boolean} value - The value to set.
    */
   set selected(value) {
-    value ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+    if (value)
+      this.setAttribute("selected", "");
+    else
+      this.removeAttribute("selected");
   }
   /**
    * Sets the value attribute of the option.
-   *
    * @param {string} value - The value to set.
    */
   set value(value) {
@@ -76,7 +77,7 @@ class Option extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("div");
     element.classList.add("native-option");
@@ -97,6 +98,9 @@ class Option extends WJElement {
   }
   /**
    * Adds event listeners after the component is drawn.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
   afterDraw() {
     event.addListener(this, "click", null, (e, b, c) => {

package/dist/wje-options.js

@@ -2,8 +2,8 @@ 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, { event } from "./wje-element.js";
-import { I as InfiniteScroll } from "./infinite-scroll.element-DcO1E5Es.js";
-import { L as List } from "./list.element-TZXMx1rt.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-R3y_ZQj6.js";
+import { L as List } from "./list.element-syl98NWS.js";
 import Option from "./wje-option.js";
 class Options extends WJElement {
   /**
@@ -27,10 +27,10 @@ class Options extends WJElement {
      */
     __publicField(this, "htmlItem", (item) => {
       let option = document.createElement("wje-option");
-      if (item[this.itemValue] == null) {
+      if (item[this.itemValue] === null || item[this.itemValue] === void 0) {
         console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);
       }
-      if (item[this.itemText] == null) {
+      if (item[this.itemText] === null || item[this.itemText] === void 0) {
         console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);
       }
       option.setAttribute("value", item[this.itemValue] ?? "");
@@ -121,9 +121,17 @@ class Options extends WJElement {
    * Prepares the component before drawing.
    * Fetches the pages and creates the options elements.
    */
-  async beforeDraw() {
+  beforeDraw() {
     event.dispatchCustomEvent(this, "wje-options:load", {});
   }
+  /**
+   * 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}
+   */
   async draw() {
     let fragment = document.createDocumentFragment();
     const slot = document.createElement("slot");
@@ -141,7 +149,6 @@ class Options extends WJElement {
         this._loadedOptions.push(...this.processData(filteredOptions));
         return filteredOptions;
       };
-      this.contains(infiniteScroll) || this.appendChild(infiniteScroll);
       this.infiniteScroll = infiniteScroll;
     } else {
       this.response = await this.getPages();
@@ -180,13 +187,17 @@ class Options extends WJElement {
     let filteredResponse = structuredClone(response);
     const recursiveUpdate = (object, pathToProperty) => {
       var _a2;
+      if (pathToProperty.length === 0) {
+        return object.filter((option) => !this._loadedOptions.some((loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]));
+      }
       if (pathToProperty.length > 1) {
-        recursiveUpdate(object[pathToProperty[0]], pathToProperty.slice(1));
-      } else {
-        object[pathToProperty[0]] = ((_a2 = object[pathToProperty[0]]) == null ? void 0 : _a2.filter((option) => !this._loadedOptions.some((loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]))) ?? [];
+        object[pathToProperty[0]] = recursiveUpdate(object[pathToProperty[0]], pathToProperty.slice(1));
+        return object;
       }
+      object[pathToProperty[0]] = ((_a2 = object[pathToProperty[0]]) == null ? void 0 : _a2.filter((option) => !this._loadedOptions.some((loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]))) ?? [];
+      return object;
     };
-    recursiveUpdate(filteredResponse, splittedOptionArrayPath);
+    filteredResponse = recursiveUpdate(filteredResponse, splittedOptionArrayPath);
     return filteredResponse;
   }
   /**
@@ -232,7 +243,10 @@ class Options extends WJElement {
    * @param {boolean} [silent=false] - Whether to suppress events triggered by adding options.
    */
   addOptions(optionsData = [], silent = false) {
-    Array.isArray(optionsData) ? optionsData == null ? void 0 : optionsData.forEach((optionData) => this.addOption(optionData, silent)) : this.addOption(optionsData, silent);
+    if (Array.isArray(optionsData))
+      optionsData == null ? void 0 : optionsData.forEach((od) => this.addOption(od, silent));
+    else
+      this.addOption(optionsData, silent);
   }
 }
 Options.define("wje-options", Options);

package/dist/wje-orgchart-group.js

@@ -36,7 +36,7 @@ class OrgchartGroup extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -65,7 +65,7 @@ class OrgchartGroup extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  afterDraw(context, store, params) {
+  afterDraw() {
     this.card.addEventListener("click", (e) => {
       e.stopPropagation();
       event.dispatchCustomEvent(this.card, "wje-orgchart-group:click", { target: this });

package/dist/wje-orgchart-item.js

@@ -152,7 +152,10 @@ class OrgchartItem extends WJElement {
      */
     __publicField(this, "toggleChildren", (e) => {
       this.classList.toggle("collapse");
-      this.classList.contains("collapse") ? e.target.innerHTML = "+" : e.target.innerHTML = "-";
+      if (this.classList.contains("collapse"))
+        e.target.innerHTML = "+";
+      else
+        e.target.innerHTML = "-";
     });
   }
   /**
@@ -198,7 +201,7 @@ class OrgchartItem extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -227,10 +230,10 @@ class OrgchartItem extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  afterDraw(context, store, params) {
+  afterDraw() {
     this.expander.addEventListener("click", this.toggleChildren);
   }
-  dispatchEvent(event) {
+  dispatchEvent(e) {
     return false;
   }
 }

package/dist/wje-orgchart.js

@@ -36,7 +36,7 @@ class Orgchart extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");

package/dist/wje-popup.js

@@ -1,4 +1,4 @@
-import { P as Popup } from "./popup.element-l8v-dMoK.js";
+import { P as Popup } from "./popup.element-C0a1z1y2.js";
 Popup.define("wje-popup", Popup);
 export {
   Popup as default

package/dist/wje-progress-bar.js

@@ -183,7 +183,7 @@ class ProgressBar extends WJElement {
   /**
    * Adds event listeners after the component is drawn.
    */
-  afterDraw(context, store, params) {
+  afterDraw() {
     if (this.type === "circle") {
       this.setCircleProgress(this.progress);
     }
@@ -204,9 +204,13 @@ class ProgressBar extends WJElement {
    * @param {number} radius - The radius of the circle.
    * @returns {number} The dashoffset value.
    */
-  getCircleDashoffset(progress = 0, radius) {
+  getCircleDashoffset(progress = 0, radius = 70) {
     return this.getCircleDasharray(radius) * ((100 - progress) / 100);
   }
+  /**
+   * Sets the progress of the circle.
+   * @param percent
+   */
   setCircleProgress(percent) {
     const progress = this.bar;
     const radius = progress.r.baseVal.value;

package/dist/wje-qr-code.js

@@ -2818,7 +2818,7 @@ class QrCode extends WJElement {
       "size"
     ];
   }
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let wrapper = document.createElement("div");
     wrapper.classList.add("container");
@@ -2835,7 +2835,7 @@ class QrCode extends WJElement {
     fragment.appendChild(wrapper);
     return fragment;
   }
-  afterDraw(context, store, params) {
+  afterDraw() {
     const canvas = this.shadowRoot.querySelector("canvas");
     const qrOptions = {};
     const attributes = [

package/dist/wje-radio-group.js

@@ -116,7 +116,7 @@ class RadioGroup extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-radio-group", this.hasAttribute("inline") ? "wje-inline" : "ddd");
@@ -135,6 +135,9 @@ class RadioGroup extends WJElement {
   /**
    * Adds event listeners after the component is drawn.
    * Handles the selection of radio buttons.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
   afterDraw() {
     this.checkRadio(this.value);

package/dist/wje-radio.js

@@ -31,7 +31,7 @@ class Radio extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-radio");