wj-elements 0.1.128 → 0.1.130

package/dist/wje-menu-button.js

@@ -2,12 +2,11 @@ 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";
-const styles = "/*\n[ WJ Menu Label ]\n*/\n\n:host {\n  display: inline-flex;\n}\n@media (min-width: 768px) {\n  :host {\n    display: none;\n  }\n}";
+const styles = "/*\n[ WJ Menu Label ]\n*/\n\n:host {\n    display: inline-flex;\n}\n@media (min-width: 768px) {\n    :host {\n        display: none;\n    }\n}\n";
 class MenuButton extends WJElement {
   /**
    * Creates an instance of MenuButton.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
@@ -15,7 +14,6 @@ class MenuButton extends WJElement {
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -24,7 +22,6 @@ class MenuButton extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -38,22 +35,17 @@ class MenuButton extends WJElement {
     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.
+   * Draws the component for the menu button.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let slot = document.createElement("slot");
     fragment.appendChild(slot);
     return fragment;
   }
   /**
-   * Refreshes the component after drawing.
-   * Adds a click event listener that toggles the "open" class on the content element.
+   * Refreshes the component after drawing. Adds a click event listener that toggles the "open" class on the content element.
    */
   afterDraw() {
     event.addListener(this, "click", null, (e) => {

package/dist/wje-menu-item.js

@@ -1,13 +1,190 @@
 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 { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
 import WJElement, { WjElementUtils, event } from "./wje-element.js";
-import { b as bindRouterLinks } from "./router-links-I2vcmVCs.js";
-const styles = '/*\n[ WJ Menu Item ]\n*/\n\n:host {\n  --wje-menu-item-safe-triangle-cursor-x: 0;\n  --wje-menu-item-safe-triangle-cursor-y: 0;\n  --wje-menu-item-safe-triangle-submenu-start-x: 0;\n  --wje-menu-item-safe-triangle-submenu-start-y: 0;\n  --wje-menu-item-safe-triangle-submenu-end-x: 0;\n  --wje-menu-item-safe-triangle-submenu-end-y: 0;\n\n  display: block;\n  .native-menu-item {\n    background: var(--wje-menu-item-background);\n    position: relative;\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: center;\n    color: var(--wje-menu-item-color);\n    padding-top: var(--wje-menu-item-padding-top);\n    padding-bottom: var(--wje-menu-item-padding-bottom);\n    transition: var(--wje-transition-fast) fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    width: 100%;\n\n    &:hover {\n      color: var(--wje-menu-item-color-hover);\n      background: var(--wje-menu-item-background-hover);\n    }\n\n    &:focus {\n      color: var(--wje-menu-item-color-focus);\n      background: var(--wje-menu-item-background-focus);\n    }\n\n    &:active {\n      color: var(--wje-menu-item-color-active);\n      background: var(--wje-menu-item-background-active);\n    }\n\n    .label {\n      flex: 1 1 auto;\n      display: inline-block;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      line-height: normal;\n    }\n\n    .check-icon {\n      flex: 0 0 auto;\n      display: var(--wje-menu-item-check-icon-display, flex);\n      align-items: center;\n      justify-content: center;\n      width: var(--wje-menu-item-check-icon-width, 1.5rem);\n      visibility: hidden;\n\n      &.checked {\n        visibility: visible;\n      }\n    }\n\n    &.expanded-submenu {\n      color: var(--wje-menu-item-color-active);\n      background: var(--wje-menu-item-background-active);\n\n      &:hover {\n        color: var(--wje-menu-item-color-hover);\n        background: var(--wje-menu-item-background-hover);\n      }\n\n      &::after {\n        content: "";\n        position: fixed;\n        z-index: 1;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        clip-path: polygon(\n                        var(--wje-menu-item-safe-triangle-cursor-x) var(--wje-menu-item-safe-triangle-cursor-y),\n                        var(--wje-menu-item-safe-triangle-submenu-start-x) var(--wje-menu-item-safe-triangle-submenu-start-y),\n                        var(--wje-menu-item-safe-triangle-submenu-end-x) var(--wje-menu-item-safe-triangle-submenu-end-y)\n        );\n      }\n    }\n  }\n}\n\n:host(.collapse) {\n\n  ::slotted([slot="start"]) {\n    margin: 0;\n    /*width: auto;*/\n    /*display: contents;*/\n  }\n\n  ::slotted([slot="end"]) {\n    display: none;\n  }\n\n  .label,\n  .check-icon,\n  .submenu-icon {\n    display: none;\n  }\n\n}\n.submenu-icon {\n  --wje-icon-size: 14px !important;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: var(--wje-menu-item-icon-visibility);\n}\n\n.has-submenu {\n  .submenu-icon {\n    --wje-menu-item-icon-visibility: visible;\n  }\n}\n\n.submenu-icon.collapse {\n  flex: none;\n  /*right: 10px;*/\n  position: relative;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n::slotted([slot="start"]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-end: .5rem;\n}\n\n::slotted([slot="end"]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-start: .5rem;\n}\n\n:host(.wje-menu-variant-nav) {\n  /*posun 2 a x urovne o 1 rem*/\n  ::slotted([slot="submenu"]) {\n    --wje-menu-border-width: 0 !important;\n    --wje-menu-margin-inline: 2rem 0 !important;\n  }\n}\n\n/*:host {*/\n/*  ::slotted([slot="start"]) {*/\n/*    width: 1.5rem;*/\n/*  }*/\n/*}*/\n\n:host(.wje-menu-variant-context) {\n  display: block;\n}\n\n:host(.active) {\n  color: var(--wje-menu-item-color-active);\n  background: var(--wje-menu-item-background-active);\n}\n\n:host(.open) {\n  color: var(--wje-menu-item-color-active);\n  background: var(--wje-menu-item-background-active);\n}';
+const styles = `/*
+[ WJ Menu Item ]
+*/
+
+: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;
+    .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;
+        user-select: none;
+        white-space: nowrap;
+        cursor: pointer;
+        width: 100%;
+
+        &:hover {
+            color: var(--wje-menu-item-color-hover);
+            background: var(--wje-menu-item-background-hover);
+        }
+
+        &:focus {
+            color: var(--wje-menu-item-color-focus);
+            background: var(--wje-menu-item-background-focus);
+        }
+
+        &:active {
+            color: var(--wje-menu-item-color-active);
+            background: var(--wje-menu-item-background-active);
+        }
+
+        .label {
+            flex: 1 1 auto;
+            display: inline-block;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            line-height: normal;
+        }
+
+        .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;
+
+            &.checked {
+                visibility: visible;
+            }
+        }
+
+        &.expanded-submenu {
+            color: var(--wje-menu-item-color-active);
+            background: var(--wje-menu-item-background-active);
+
+            &:hover {
+                color: var(--wje-menu-item-color-hover);
+                background: var(--wje-menu-item-background-hover);
+            }
+
+            &::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;
+        /*width: auto;*/
+        /*display: contents;*/
+    }
+
+    ::slotted([slot='end']) {
+        display: none;
+    }
+
+    .label,
+    .check-icon,
+    .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;
+    /*right: 10px;*/
+    position: relative;
+}
+
+:host(:focus-visible) {
+    outline: none;
+}
+
+::slotted([slot='start']) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    margin-inline-end: 0.5rem;
+}
+
+::slotted([slot='end']) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    margin-inline-start: 0.5rem;
+}
+
+:host(.wje-menu-variant-nav) {
+    /*posun 2 a x urovne o 1 rem*/
+    ::slotted([slot='submenu']) {
+        --wje-menu-border-width: 0 !important;
+        --wje-menu-margin-inline: 2rem 0 !important;
+    }
+}
+
+/*:host {*/
+/*  ::slotted([slot="start"]) {*/
+/*    width: 1.5rem;*/
+/*  }*/
+/*}*/
+
+: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 MenuItem extends WJElement {
   /**
    * Constructor for MenuItem class.
-   * @constructor
+   * @class
    */
   constructor() {
     super();
@@ -20,6 +197,10 @@ class MenuItem extends WJElement {
         this.showSubmenu();
       }
     });
+    /**
+     * Handles the click event on the MenuItem.
+     * @param {object} e
+     */
     __publicField(this, "clickHandler", (e) => {
       switch (this.variant) {
         case "NAV":
@@ -50,8 +231,7 @@ class MenuItem extends WJElement {
     });
     /**
      * Checks if the submenu should be hidden based on the event.
-     *
-     * @param {Event} e - The event object.
+     * @param {Event} e The event object.
      */
     __publicField(this, "shouldHideSubmenu", (e) => {
       if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
@@ -81,7 +261,6 @@ class MenuItem extends WJElement {
       this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${left}px`);
       this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${top + height}px`);
     });
-    bindRouterLinks(this, { selector: false });
     this._collapsible = false;
   }
   /**
@@ -122,8 +301,7 @@ class MenuItem extends WJElement {
    * @returns {boolean} True if the closest parent has the collapse attribute, false otherwise.
    */
   get collapse() {
-    if (this.closest("[collapse]"))
-      return true;
+    if (this.closest("[collapse]")) return true;
     return false;
   }
   /**
@@ -151,19 +329,15 @@ 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");
   }
   /**
-   * 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.
+   * Draws the MenuItem element and sets the variant and collapse attributes.
    * @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 +362,8 @@ 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 +379,8 @@ 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);
@@ -242,6 +418,7 @@ class MenuItem extends WJElement {
    * Adds event listeners after drawing the MenuItem.
    */
   afterDraw() {
+    this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
     this.addEventListener("mousemove", this.dispatchMove);
     this.addEventListener("wje-popup:reposition", this.dispatchReposition);
     event.addListener(this, "mouseenter", null, this.mouseenterHandler);
@@ -249,17 +426,9 @@ class MenuItem extends WJElement {
     event.addListener(this, "focusout", null, this.shouldHideSubmenu);
     event.addListener(this, "click", null, this.clickHandler);
   }
-  beforeDisconnect() {
-    event.removeListener(this, "mousemove", null, this.dispatchMove);
-    event.removeListener(this, "wje-popup:reposition", null, this.dispatchReposition);
-    event.removeListener(this, "mouseenter", null, this.mouseenterHandler);
-    event.removeListener(this, "mouseleave", null, this.shouldHideSubmenu);
-    event.removeListener(this, "focusout", null, this.shouldHideSubmenu);
-    event.removeListener(this, "click", null, this.clickHandler);
-  }
   /**
    * Creates a tooltip for the MenuItem when it is collapsed.
-   * @param {HTMLElement} native - The native MenuItem element.
+   * @param {HTMLElement} native The native MenuItem element.
    * @returns {HTMLElement} The tooltip element.
    */
   collapseItem(native) {
@@ -306,7 +475,7 @@ class MenuItem extends WJElement {
    * 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.
+   * @param {Event} e The event object.
    */
   submenuToggle(e) {
     if (this.hasSubmenu) {
@@ -314,8 +483,7 @@ class MenuItem extends WJElement {
       if (!submenuElements.hasAttribute("active")) {
         submenuElements.setAttribute("active", "");
       } else {
-        if (this === e.target)
-          submenuElements.removeAttribute("active");
+        if (this === e.target) submenuElements.removeAttribute("active");
       }
     }
   }
@@ -342,11 +510,24 @@ class MenuItem extends WJElement {
     }
   }
   /**
-   * Clears the innerHTML of the context before disconnecting the MenuItem.
+   * Gets the text from the element and returns it.
    */
   beforeDisconnect() {
+    var _a;
+    event.removeListener(this, "mousemove", null, this.dispatchMove);
+    event.removeListener(this, "wje-popup:reposition", null, this.dispatchReposition);
+    event.removeListener(this, "mouseenter", null, this.mouseenterHandler);
+    event.removeListener(this, "mouseleave", null, this.shouldHideSubmenu);
+    event.removeListener(this, "focusout", null, this.shouldHideSubmenu);
+    event.removeListener(this, "click", null, this.clickHandler);
     this.context.innerHTML = "";
+    (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
   }
+  /**
+   * Extracts and returns the concatenated text content from all text nodes within the specified element.
+   * @param {HTMLElement} element The HTML element from which to extract text content.
+   * @returns {string} The concatenated and trimmed text content from the element's text nodes.
+   */
   getTextFromElement(element) {
     let text = "";
     for (let node of element.childNodes) {

package/dist/wje-menu-label.js

@@ -2,12 +2,11 @@ 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 } from "./wje-element.js";
-const styles = "/*\n[ Menu Label ]\n*/\n\n:host {\n  --wje-letter-spacing: .025rem;\n  --wje-menu-label-color: var(--wje-color-contrast-6);\n  --wje-padding-top: 0;\n  --wje-padding-bottom: 0;\n  --wje-padding-start: 1.5rem;\n  --wje-padding-end: 1.5rem;\n}\n\n.native-menu-label {\n  font-size: var(--wje-menu-label-font-size);\n  display: inline-block;\n  font-weight: var(--wje-menu-label-weight);\n  letter-spacing: var(--wje-letter-spacing);\n  color: var(--wje-menu-label-color);\n  padding: var(--wje-padding-top) var(--wje-padding-start) var(--wje-padding-bottom) var(--wje-padding-end);\n}";
+const styles = "/*\n[ Menu Label ]\n*/\n\n:host {\n    --wje-letter-spacing: 0.025rem;\n    --wje-menu-label-color: var(--wje-color-contrast-6);\n    --wje-padding-top: 0;\n    --wje-padding-bottom: 0;\n    --wje-padding-start: 1.5rem;\n    --wje-padding-end: 1.5rem;\n}\n\n.native-menu-label {\n    font-size: var(--wje-menu-label-font-size);\n    display: inline-block;\n    font-weight: var(--wje-menu-label-weight);\n    letter-spacing: var(--wje-letter-spacing);\n    color: var(--wje-menu-label-color);\n    padding: var(--wje-padding-top) var(--wje-padding-start) var(--wje-padding-bottom) var(--wje-padding-end);\n}\n";
 class MenuLabel extends WJElement {
   /**
    * Creates an instance of MenuLabel.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
@@ -16,7 +15,6 @@ class MenuLabel extends WJElement {
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -25,7 +23,6 @@ class MenuLabel extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -39,14 +36,10 @@ class MenuLabel extends WJElement {
     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.
+   * Draws the component for the menu label.
    * @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

@@ -2,12 +2,11 @@ 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 from "./wje-element.js";
-const styles = "/*\n[ Wj Menu ]\n*/\n\n:host {\n  display: none;\n  background: var(--wje-menu-background);\n  position: relative;\n  border-width: var(--wje-menu-border-width);\n  border-style: var(--wje-menu-border-style);\n  border-color: var(--wje-menu-border-color);\n  z-index: var(--wje-menu-z-index, 8);\n  box-shadow: var(--wje-menu-shadow);\n  border-radius: var(--wje-menu-border-radius);\n  padding-top: var(--wje-menu-padding-top);\n  padding-bottom: var(--wje-menu-padding-bottom);\n  padding-inline: var(--wje-menu-padding-inline);\n  margin-top: var(--wje-menu-margin-top);\n  margin-bottom: var(--wje-menu-margin-bottom);\n  margin-inline: var(--wje-menu-margin-inline);\n  overflow: auto;\n  overscroll-behavior: none;\n  .native-menu {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    ::slotted(wje-button) {\n      margin: 0;\n    }\n  }\n}\n\n:host(.wje-menu-collapse) {\n  width: var(--wje-menu-collapse-width);\n}\n\n:host([collapse]) {\n  box-shadow: none;\n}\n\n:host([variant=context]) {\n  display: block !important;\n  margin-left: var(--wje-menu-submenu-offset);\n}\n\n:host([variant=megamenu]) .native-menu {\n  flex-direction: row;\n  align-items: end;\n  flex-wrap: nowrap;\n  .check-icon {\n    display: none;\n  }\n}\n\n:host([active]) {\n  display: flex  !important;\n}";
+const styles = "/*\n[ Wj Menu ]\n*/\n\n:host {\n    display: none;\n    background: var(--wje-menu-background);\n    position: relative;\n    border-width: var(--wje-menu-border-width);\n    border-style: var(--wje-menu-border-style);\n    border-color: var(--wje-menu-border-color);\n    z-index: var(--wje-menu-z-index, 8);\n    box-shadow: var(--wje-menu-shadow);\n    border-radius: var(--wje-menu-border-radius);\n    padding-top: var(--wje-menu-padding-top);\n    padding-bottom: var(--wje-menu-padding-bottom);\n    padding-inline: var(--wje-menu-padding-inline);\n    margin-top: var(--wje-menu-margin-top);\n    margin-bottom: var(--wje-menu-margin-bottom);\n    margin-inline: var(--wje-menu-margin-inline);\n    overflow: auto;\n    overscroll-behavior: none;\n    .native-menu {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        ::slotted(wje-button) {\n            margin: 0;\n        }\n    }\n}\n\n:host(.wje-menu-collapse) {\n    width: var(--wje-menu-collapse-width);\n}\n\n:host([collapse]) {\n    box-shadow: none;\n}\n\n:host([variant='context']) {\n    display: block !important;\n    margin-left: var(--wje-menu-submenu-offset);\n}\n\n:host([variant='megamenu']) .native-menu {\n    flex-direction: row;\n    align-items: end;\n    flex-wrap: nowrap;\n    .check-icon {\n        display: none;\n    }\n}\n\n:host([active]) {\n    display: flex !important;\n}\n";
 class Menu extends WJElement {
   /**
    * Creates an instance of Menu.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
@@ -15,7 +14,6 @@ class Menu extends WJElement {
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -24,7 +22,6 @@ class Menu extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -38,18 +35,13 @@ class Menu extends WJElement {
     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.
+   * Draws the component for the menu.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     this.classList.remove("wje-menu-collapse");
-    if (this.hasAttribute("collapse"))
-      this.classList.add("wje-menu-collapse");
+    if (this.hasAttribute("collapse")) this.classList.add("wje-menu-collapse");
     let native = document.createElement("div");
     native.setAttribute("part", "native");
     native.classList.add("native-menu");
@@ -63,8 +55,7 @@ class Menu extends WJElement {
    */
   afterDraw() {
     Array.from(this.children).forEach((child) => {
-      if (child.tagName.includes("-"))
-        child.refresh();
+      if (child.tagName.includes("-")) child.refresh();
     });
   }
   /**

package/dist/wje-option.js

@@ -3,12 +3,11 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { event } from "./wje-element.js";
 import Icon from "./wje-icon.js";
-const styles = '/*\n[ WJ Option ]\n*/\n\n:host {\n  display: block;\n  wje-icon {\n    visibility: hidden;\n    margin-inline: 0.5rem;\n  }\n}\n\n:host([selected]) {\n  wje-icon {\n    visibility: visible;\n  }\n}\n\n:host([disabled]){\n  background-color: lightgray;\n  opacity: .3;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.native-option {\n  display: flex;\n  align-items: center;\n  padding-top: var(--wje-option-padding-top);\n  padding-bottom: var(--wje-option-padding-bottom);\n}\n\n.native-option:hover {\n  background-color: var(--wje-option-highlighted);\n}\n\n::slotted([slot="start"]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-end: .5rem;\n}\n\n::slotted([slot="end"]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline: auto .5rem;\n}';
+const styles = "/*\n[ WJ Option ]\n*/\n\n:host {\n    display: block;\n    wje-icon {\n        visibility: hidden;\n        margin-inline: 0.5rem;\n    }\n}\n\n:host([selected]) {\n    wje-icon {\n        visibility: visible;\n    }\n}\n\n:host([disabled]) {\n    background-color: lightgray;\n    opacity: 0.3;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.native-option {\n    display: flex;\n    align-items: center;\n    padding-top: var(--wje-option-padding-top);\n    padding-bottom: var(--wje-option-padding-bottom);\n}\n\n.native-option:hover {\n    background-color: var(--wje-option-highlighted);\n}\n\n::slotted([slot='start']) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-inline-end: 0.5rem;\n}\n\n::slotted([slot='end']) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-inline: auto 0.5rem;\n}\n";
 class Option extends WJElement {
   /**
    * Creates an instance of Option.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
@@ -22,31 +21,28 @@ class Option extends WJElement {
   }
   /**
    * Sets the selected attribute of the option.
-   *
-   * @param {boolean} value - The value to set.
+   * @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.
+   * @param {string} value The value to set.
    */
   set value(value) {
     this.setAttribute("value", value);
   }
   /**
    * Sets the text content of the option.
-   *
-   * @param {string} value - The text to set.
+   * @param {string} value The text to set.
    */
   set text(value) {
     this.innerText = value;
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -55,7 +51,6 @@ class Option extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -69,14 +64,10 @@ class Option extends WJElement {
     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.
+   * Draws the component for the option.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("div");
     element.classList.add("native-option");
@@ -101,14 +92,16 @@ class Option extends WJElement {
   afterDraw() {
     event.addListener(this, "click", null, (e, b, c) => {
       if (this.hasAttribute("disabled")) return;
-      this.dispatchEvent(new CustomEvent("wje-option:change", {
-        bubbles: true,
-        composed: true,
-        detail: {
-          value: this.value,
-          text: this.text
-        }
-      }));
+      this.dispatchEvent(
+        new CustomEvent("wje-option:change", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            value: this.value,
+            text: this.text
+          }
+        })
+      );
     });
   }
 }