wj-elements 0.1.48 → 0.1.49

package/dist/wje-menu-button.js

@@ -0,0 +1,65 @@
+var l = Object.defineProperty;
+var i = (n, t, e) => t in n ? l(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => (i(n, typeof t != "symbol" ? t + "" : t, e), e);
+import u, { event as c } from "./wje-element.js";
+const d = ":host{display:inline-flex}@media (min-width: 768px){:host{display:none}}";
+class r extends u {
+  /**
+   * Creates an instance of MenuButton.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    o(this, "className", "MenuButton");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return d;
+  }
+  /**
+   * 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";
+  }
+  /**
+   * 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(e, m, p) {
+    let s = document.createDocumentFragment(), a = document.createElement("slot");
+    return s.appendChild(a), s;
+  }
+  /**
+   * Refreshes the component after drawing.
+   * Adds a click event listener that toggles the "open" class on the content element.
+   */
+  afterDraw() {
+    c.addListener(this, "click", null, (e) => {
+      document.querySelector(`#${this.contentId}`).classList.toggle("open");
+    });
+  }
+}
+r.define("wje-menu-button", r);
+export {
+  r as default
+};

package/dist/wje-menu-item.js

@@ -0,0 +1,230 @@
+var y = Object.defineProperty;
+var A = (o, r, e) => r in o ? y(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e;
+var c = (o, r, e) => (A(o, typeof r != "symbol" ? r + "" : r, e), e);
+import E, { WjElementUtils as k, event as l } from "./wje-element.js";
+import { b as S } from "./router-links-FtZbFUto.js";
+const L = ':host{--wje-menu-item-safe-triangle-cursor-x: 0;--wje-menu-item-safe-triangle-cursor-y: 0;--wje-menu-item-safe-triangle-submenu-start-x: 0;--wje-menu-item-safe-triangle-submenu-start-y: 0;--wje-menu-item-safe-triangle-submenu-end-x: 0;--wje-menu-item-safe-triangle-submenu-end-y: 0;display:block}:host .native-menu-item{background:var(--wje-menu-item-background);position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;color:var(--wje-menu-item-color);padding-top:var(--wje-menu-item-padding-top);padding-bottom:var(--wje-menu-item-padding-bottom);transition:var(--wje-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%}:host .native-menu-item:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item:focus{color:var(--wje-menu-item-color-focus);background:var(--wje-menu-item-background-focus)}:host .native-menu-item:active{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden;line-height:normal}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wje-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:var(--wje-menu-item-check-icon-width, 1.5rem);visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;clip-path:polygon(var(--wje-menu-item-safe-triangle-cursor-x) var(--wje-menu-item-safe-triangle-cursor-y),var(--wje-menu-item-safe-triangle-submenu-start-x) var(--wje-menu-item-safe-triangle-submenu-start-y),var(--wje-menu-item-safe-triangle-submenu-end-x) var(--wje-menu-item-safe-triangle-submenu-end-y))}:host(.collapse) ::slotted([slot="start"]){margin:0}:host(.collapse) ::slotted([slot="end"]){display:none}:host(.collapse) .label,:host(.collapse) .check-icon,:host(.collapse) .submenu-icon{display:none}.submenu-icon{--wje-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:var(--wje-menu-item-icon-visibility)}.has-submenu .submenu-icon{--wje-menu-item-icon-visibility: visible}.submenu-icon.collapse{flex:none;position:relative}:host(:focus-visible){outline:none}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-start:.5rem}:host(.wje-menu-variant-nav) ::slotted([slot="submenu"]){--wje-menu-border-width: 0 !important;--wje-menu-margin-inline: 2rem 0 !important}:host(.wje-menu-variant-context){display:block}:host(.active){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host(.open){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}';
+class j extends E {
+  /**
+   * Constructor for MenuItem class.
+   * @constructor
+   */
+  constructor() {
+    super();
+    c(this, "className", "MenuItem");
+    /**
+     * Checks if the submenu should be hidden based on the event.
+     *
+     * @param {Event} e - The event object.
+     */
+    c(this, "shouldHideSubmenu", (e) => {
+      if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
+        if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
+          return;
+        this.deactivateSubmenu(), this.hideSubmenu();
+      }
+    });
+    /**
+     * Dispatches a mousemove event.
+     */
+    c(this, "dispatchMove", (e) => {
+      this.style.setProperty("--wje-menu-item-safe-triangle-cursor-x", `${e.clientX}px`), this.style.setProperty("--wje-menu-item-safe-triangle-cursor-y", `${e.clientY}px`);
+    });
+    /**
+     * Dispatches a reposition event.
+     */
+    c(this, "dispatchReposition", (e) => {
+      if (this.submenu.assignedNodes().length === 0)
+        return;
+      let s = this.submenu.assignedNodes()[0];
+      const { left: n, top: t, width: i, height: u } = s.getBoundingClientRect();
+      this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${t}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${n}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${t + u}px`);
+    });
+    S(this, { selector: !1 }), this._collapsible = !1;
+  }
+  /**
+   * Getter for placement attribute.
+   * @returns {string} The placement attribute of the menu or "right-start" if it doesn't exist.
+   */
+  get placement() {
+    let e = this.querySelector("wje-menu");
+    return e != null && e.hasAttribute("placement") ? e.getAttribute("placement") : "right-start";
+  }
+  /**
+   * Getter for offset attribute.
+   * @returns {string} The offset attribute of the menu or "0" if it doesn't exist.
+   */
+  get offset() {
+    let e = this.querySelector("wje-menu");
+    return e != null && e.hasAttribute("offset") ? e.getAttribute("offset") : "0";
+  }
+  /**
+   * Getter for variant attribute.
+   * @returns {string} The variant attribute of the menu or "CONTEXT" if it doesn't exist.
+   */
+  get variant() {
+    let e = this.querySelector("wje-menu");
+    return e != null && e.hasAttribute("variant") && !this.collapse ? e.getAttribute("variant").toUpperCase() : "CONTEXT";
+  }
+  /**
+   * Getter for collapse attribute.
+   * @returns {boolean} True if the closest parent has the collapse attribute, false otherwise.
+   */
+  get collapse() {
+    return !!this.closest("[collapse]");
+  }
+  /**
+   * Getter for cssStyleSheet.
+   * @returns {string} The styles imported from styles.css.
+   */
+  static get cssStyleSheet() {
+    return L;
+  }
+  /**
+   * Getter for observedAttributes.
+   * @returns {Array} An empty array as no attributes are being observed.
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the MenuItem element.
+   */
+  setupAttributes() {
+    super.setupAttributes(), this.isShadowRoot = "open", this.setAttribute("active-class", "open");
+  }
+  /**
+   * Removes the active attribute from the menu before drawing the MenuItem.
+   */
+  beforeDraw(e, s, n) {
+    var t;
+    (t = this.querySelector("wje-menu")) == null || t.removeAttribute("active");
+  }
+  /**
+   * Draws the MenuItem element.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment} The fragment to be appended to the MenuItem.
+   */
+  draw(e, s, n) {
+    var f, w, g;
+    this.hasSubmenu = k.hasSlot(this, "submenu");
+    let t = document.createDocumentFragment();
+    this.setAttribute("tabindex", "0"), this.classList.forEach((a) => {
+      a.startsWith("wje-menu-variant-") && this.classList.remove(a);
+    }), this.classList.remove("collapse"), this.classList.add("wje-menu-variant-" + this.variant.toLowerCase()), this.collapse ? (w = this.parentElement) != null && w.hasAttribute("collapse") && this.classList.add("collapse") : (f = this.querySelector("wje-menu")) == null || f.setAttribute("variant", this.variant.toLowerCase());
+    let i = document.createElement("div");
+    i.setAttribute("part", "native"), i.setAttribute("id", "anchor"), i.classList.add("native-menu-item");
+    let u = document.createElement("span");
+    u.setAttribute("part", "check"), u.classList.add("check-icon"), u.innerHTML = '<wje-icon name="check"></wje-icon>', this.hasAttribute("checked") ? u.classList.add("checked") : u.classList.remove("checked");
+    let p = document.createElement("slot");
+    p.name = "start";
+    let b = document.createElement("slot");
+    b.classList.add("label");
+    let d = document.createElement("slot");
+    d.setAttribute("part", "end"), d.name = "end";
+    let m = document.createElement("slot");
+    m.setAttribute("part", "submenu"), m.name = "submenu";
+    let x = this.collapse ? "collapse" : "expand", h = document.createElement("span");
+    h.setAttribute("part", "submenu-icon"), h.classList.add("submenu-icon", x), h.innerHTML = this.collapse ? '<wje-icon name="chevron-down"></wje-icon>' : '<wje-icon name="chevron-right"></wje-icon>', this.hasSubmenu ? i.classList.add("has-submenu") : i.classList.remove("has-submenu"), i.appendChild(u), i.appendChild(p), i.appendChild(b), i.appendChild(d), i.appendChild(h);
+    let v = !1;
+    if (
+      /*(this.collapse && this.variant === "NAV" && this.hasSubmenu) || */
+      this.variant === "CONTEXT" && this.hasSubmenu
+    ) {
+      i.setAttribute("slot", "anchor");
+      let a = document.createElement("wje-popup");
+      a.setAttribute("anchor", "anchor"), a.setAttribute("placement", this.placement), a.setAttribute("offset", this.offset), a.appendChild(i), a.appendChild(m), this.popup = a, t.appendChild(a), v = !0;
+    }
+    return (g = this.parentElement) != null && g.hasAttribute("collapse") && !this.hasSubmenu ? t.appendChild(this.collapseItem(i)) : v || t.appendChild(i), (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && t.appendChild(m), this.native = i, this.submenu = m, t;
+  }
+  /**
+   * Adds event listeners after drawing the MenuItem.
+   */
+  afterDraw() {
+    this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition), l.addListener(this, "mouseenter", null, (e) => {
+      if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
+        if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
+          return;
+        this.activateSubmenu(e), e.stopPropagation(), this.showSubmenu();
+      }
+    }), l.addListener(this, "mouseleave", null, this.shouldHideSubmenu), l.addListener(this, "focusout", null, this.shouldHideSubmenu), l.addListener(this, "click", null, (e) => {
+      !this.collapse && this.variant === "NAV" && this.hasSubmenu ? (this.submenuToggle(e), this.hideSubmenu(), e.stopPropagation()) : (l.dispatchCustomEvent(this, "wje-menu-item:click"), l.dispatchCustomEvent(this, this.dialog, {
+        bubbles: !0
+      }));
+    });
+  }
+  /**
+   * Creates a tooltip for the MenuItem when it is collapsed.
+   * @param {HTMLElement} native - The native MenuItem element.
+   * @returns {HTMLElement} The tooltip element.
+   */
+  collapseItem(e) {
+    let s = document.createElement("slot");
+    s.setAttribute("slot", "start"), s.setAttribute("name", "tooltip-start");
+    let n = document.createElement("slot");
+    n.setAttribute("slot", "end"), n.setAttribute("name", "tooltip-end");
+    let t = document.createElement("wje-tooltip");
+    return t.setAttribute("content", this.getTextFromElement(this)), t.setAttribute("placement", "right"), t.setAttribute("offset", this.offset || "0"), t.appendChild(s), t.appendChild(n), t.appendChild(e), t;
+  }
+  /**
+   * Shows the submenu of the MenuItem.
+   */
+  showSubmenu() {
+    this.tabIndex = -1, this.hasSubmenu && (this.popup.setAttribute("active", ""), this.classList.add("expanded-submenu"), this.native.classList.add("expanded-submenu"));
+  }
+  /**
+   * Hides the submenu of the MenuItem.
+   */
+  hideSubmenu() {
+    this.tabIndex = 0, this.hasSubmenu && (this.popup.removeAttribute("active"), this.classList.remove("expanded-submenu"), this.native.classList.remove("expanded-submenu"));
+  }
+  /**
+   * Toggles the active state of the submenu element.
+   * If the submenu is not active, it sets the "active" attribute.
+   * If the submenu is already active, it removes the "active" attribute.
+   * @param {Event} e - The event object.
+   */
+  submenuToggle(e) {
+    if (this.hasSubmenu) {
+      let s = this.submenu.assignedElements({ flatten: !0 })[0];
+      s.hasAttribute("active") ? this === e.target && s.removeAttribute("active") : s.setAttribute("active", "");
+    }
+  }
+  /**
+   * Deactivates the submenu by removing the "active" attribute.
+   */
+  deactivateSubmenu() {
+    if (this.hasSubmenu) {
+      let e = this.submenu.assignedElements({ flatten: !0 })[0];
+      e.hasAttribute("active") && e.removeAttribute("active");
+    }
+  }
+  /**
+   * Activates the submenu of the menu item.
+   */
+  activateSubmenu() {
+    if (this.hasSubmenu) {
+      let e = this.submenu.assignedElements({ flatten: !0 })[0];
+      e.hasAttribute("active") || e.setAttribute("active", "");
+    }
+  }
+  /**
+   * Clears the innerHTML of the context before disconnecting the MenuItem.
+   */
+  beforeDisconnect() {
+    this.context.innerHTML = "";
+  }
+  getTextFromElement(e) {
+    let s = "";
+    for (let n of e.childNodes)
+      n.nodeType === Node.TEXT_NODE && (s += n.textContent);
+    return s.trim();
+  }
+}
+j.define("wje-menu-item", j);
+export {
+  j as default
+};

package/dist/wje-menu-label.js

@@ -0,0 +1,57 @@
+var o = Object.defineProperty;
+var i = (t, e, a) => e in t ? o(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
+var s = (t, e, a) => (i(t, typeof e != "symbol" ? e + "" : e, a), a);
+import d, { WjElementUtils as m } from "./wje-element.js";
+const u = ":host{--wje-letter-spacing: .025rem;--wje-menu-label-color: var(--wje-color-contrast-6);--wje-padding-top: 0;--wje-padding-bottom: 0;--wje-padding-start: 1.5rem;--wje-padding-end: 1.5rem}.native-menu-label{font-size:var(--wje-menu-label-font-size);display:inline-block;font-weight:var(--wje-menu-label-weight);letter-spacing:var(--wje-letter-spacing);color:var(--wje-menu-label-color);padding:var(--wje-padding-top) var(--wje-padding-start) var(--wje-padding-bottom) var(--wje-padding-end)}";
+class l extends d {
+  /**
+   * Creates an instance of MenuLabel.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    s(this, "className", "MenuLabel");
+    this.hasSubmenu = m.hasSlot(this, "submenu");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return u;
+  }
+  /**
+   * 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";
+  }
+  /**
+   * 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(a, c, p) {
+    let r = document.createDocumentFragment(), n = document.createElement("slot");
+    return n.setAttribute("part", "native"), n.classList.add("native-menu-label"), r.appendChild(n), r;
+  }
+}
+l.define("wje-menu-label", l);
+export {
+  l as default
+};

package/dist/wje-menu.js

@@ -0,0 +1,74 @@
+var d = Object.defineProperty;
+var m = (n, t, e) => t in n ? d(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => (m(n, typeof t != "symbol" ? t + "" : t, e), e);
+import l from "./wje-element.js";
+const u = ":host{display:none;background:var(--wje-menu-background);position:relative;border-width:var(--wje-menu-border-width);border-style:var(--wje-menu-border-style);border-color:var(--wje-menu-border-color);z-index:var(--wje-menu-z-index, 8);box-shadow:var(--wje-menu-shadow);border-radius:var(--wje-menu-border-radius);padding-top:var(--wje-menu-padding-top);padding-bottom:var(--wje-menu-padding-bottom);padding-inline:var(--wje-menu-padding-inline);margin-top:var(--wje-menu-margin-top);margin-bottom:var(--wje-menu-margin-bottom);margin-inline:var(--wje-menu-margin-inline);overflow:auto;overscroll-behavior:none}:host .native-menu{display:flex;flex-direction:column;width:100%}:host .native-menu ::slotted(wje-button){margin:0}:host(.wje-menu-collapse){width:var(--wje-menu-collapse-width)}:host([collapse]){box-shadow:none}:host([variant=context]){display:block!important;margin-left:var(--wje-menu-submenu-offset)}:host([variant=megamenu]) .native-menu{flex-direction:row;align-items:end;flex-wrap:nowrap}:host([variant=megamenu]) .native-menu .check-icon{display:none}:host([active]){display:flex!important}";
+class i extends l {
+  /**
+   * Creates an instance of Menu.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    o(this, "className", "Menu");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return u;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["active", "collapse"];
+  }
+  /**
+   * 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(e, c, p) {
+    let r = document.createDocumentFragment();
+    this.classList.remove("wje-menu-collapse"), this.hasAttribute("collapse") && this.classList.add("wje-menu-collapse");
+    let a = document.createElement("div");
+    a.setAttribute("part", "native"), a.classList.add("native-menu");
+    let s = document.createElement("slot");
+    return a.appendChild(s), r.appendChild(a), r;
+  }
+  /**
+   * Refreshes the component after drawing.
+   */
+  afterDraw() {
+    Array.from(this.children).forEach((e) => {
+      e.tagName.includes("-") && e.refresh();
+    });
+  }
+  /**
+   * Cleans up the component before disconnecting.
+   */
+  beforeDisconnect() {
+    this.context.innerHTML = "";
+  }
+}
+i.define("wje-menu", i);
+export {
+  i as default
+};

package/dist/wje-option.js

@@ -0,0 +1,99 @@
+var p = Object.defineProperty;
+var m = (n, t, e) => t in n ? p(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => (m(n, typeof t != "symbol" ? t + "" : t, e), e);
+import u, { event as h } from "./wje-element.js";
+import g from "./wje-icon.js";
+const b = ':host{display:block}:host wje-icon{visibility:hidden;margin-inline:.5rem}:host([selected]) wje-icon{visibility:visible}.native-option{display:flex;align-items:center;padding-top:var(--wje-option-padding-top);padding-bottom:var(--wje-option-padding-bottom)}.native-option:hover{background-color:var(--wje-option-highlighted)}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline:auto .5rem}';
+class d extends u {
+  /**
+   * Creates an instance of Option.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Dependencies of the Option component.
+     */
+    o(this, "depandencies", {
+      "wje-icon": g
+    });
+    o(this, "className", "Option");
+  }
+  /**
+   * Sets the selected attribute of the option.
+   *
+   * @param {boolean} value - The value to set.
+   */
+  set selected(e) {
+    return e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  }
+  /**
+   * Sets the value attribute of the option.
+   *
+   * @param {string} value - The value to set.
+   */
+  set value(e) {
+    this.setAttribute("value", e);
+  }
+  /**
+   * Sets the text content of the option.
+   *
+   * @param {string} value - The text to set.
+   */
+  set text(e) {
+    this.innerText = e;
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return b;
+  }
+  /**
+   * 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";
+  }
+  /**
+   * 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(e, v, w) {
+    let s = document.createDocumentFragment(), i = document.createElement("div");
+    i.classList.add("native-option"), i.setAttribute("part", "native");
+    let a = document.createElement("wje-icon");
+    a.setAttribute("name", "check");
+    let r = document.createElement("slot");
+    r.setAttribute("name", "start");
+    let c = document.createElement("slot"), l = document.createElement("slot");
+    return l.setAttribute("name", "end"), i.appendChild(a), i.appendChild(r), i.appendChild(c), i.appendChild(l), s.appendChild(i), s;
+  }
+  /**
+   * Adds event listeners after the component is drawn.
+   */
+  afterDraw() {
+    h.addListener(this, "click", "wje:option-change");
+  }
+}
+d.define("wje-option", d);
+export {
+  d as default
+};

package/dist/wje-options.js

@@ -0,0 +1,63 @@
+var p = Object.defineProperty;
+var c = (o, e, t) => e in o ? p(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var a = (o, e, t) => (c(o, typeof e != "symbol" ? e + "" : e, t), t);
+import d, { event as u } from "./wje-element.js";
+import h from "./wje-option.js";
+class r extends d {
+  /**
+   * Creates an instance of Options.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    a(this, "depandencies", {
+      "wje-option": h
+    });
+    a(this, "className", "Options");
+  }
+  /**
+   * 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.
+   * Fetches the pages and creates the options elements.
+   */
+  async beforeDraw() {
+    this.response = await this.getPages();
+    let t = document.createDocumentFragment();
+    this.response.forEach((s, i) => {
+      let n = document.createElement("wje-option");
+      n.setAttribute("value", s[this.itemValue] || s.value), n.innerText = s[this.itemText] || s.text, t.appendChild(n);
+    }), this.parentElement.appendChild(t), u.dispatchCustomEvent(this, "wje-options:load", {});
+  }
+  /**
+   * Fetches the pages from the provided URL.
+   *
+   * @param {number} page - The page number to fetch.
+   * @returns {Promise<Object>} The fetched data.
+   * @throws Will throw an error if the response is not ok.
+   */
+  async getPages(t) {
+    const s = await fetch(this.url);
+    if (!s.ok)
+      throw new Error(`An error occurred: ${s.status}`);
+    return await s.json();
+  }
+}
+r.define("wje-options", r);
+export {
+  r as default
+};

package/dist/wje-popup.js

@@ -0,0 +1,5 @@
+import { P as p } from "./popup.element-CWsSOxs2.js";
+p.define("wje-popup", p);
+export {
+  p as default
+};