wj-elements 0.1.136 → 0.1.137

package/dist/wje-menu-item.js

@@ -0,0 +1,545 @@
+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";
+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.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "MenuItem");
+    __publicField(this, "mouseenterHandler", (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();
+      }
+    });
+    /**
+     * Handles the click event on the MenuItem.
+     * @param {object} e
+     */
+    __publicField(this, "clickHandler", (e) => {
+      switch (this.variant) {
+        case "NAV":
+          if (!this.collapse && this.hasSubmenu) {
+            this.submenuToggle(e);
+            this.hideSubmenu();
+            e.stopPropagation();
+          } else {
+            event.dispatchCustomEvent(this, "wje-menu-item:click");
+            event.dispatchCustomEvent(this, this.dialog);
+          }
+          break;
+        case "CONTEXT":
+          if (!this.collapse && this.hasSubmenu) {
+            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
+            if (submenuElements == null ? void 0 : submenuElements.hasAttribute("active")) {
+              this.shouldHideSubmenu(e);
+            } else {
+              this.activateSubmenu(e);
+              this.showSubmenu(e);
+            }
+          } else {
+            event.dispatchCustomEvent(this, "wje-menu-item:click");
+            event.dispatchCustomEvent(this, this.dialog);
+          }
+          break;
+      }
+    });
+    /**
+     * Checks if the submenu should be hidden based on the event.
+     * @param {Event} e The event object.
+     */
+    __publicField(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.
+     */
+    __publicField(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.
+     */
+    __publicField(this, "dispatchReposition", (e) => {
+      if (this.submenu.assignedNodes().length === 0) return;
+      let submenu = this.submenu.assignedNodes()[0];
+      const { left, top, width, height } = submenu.getBoundingClientRect();
+      this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${left}px`);
+      this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${top}px`);
+      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`);
+    });
+    this._collapsible = false;
+  }
+  /**
+   * Getter for placement attribute.
+   * @returns {string} The placement attribute of the menu or "right-start" if it doesn't exist.
+   */
+  get placement() {
+    let menu = this.querySelector("wje-menu");
+    if (menu == null ? void 0 : menu.hasAttribute("placement")) {
+      return menu.getAttribute("placement");
+    }
+    return "right-start";
+  }
+  /**
+   * Getter for offset attribute.
+   * @returns {string} The offset attribute of the menu or "0" if it doesn't exist.
+   */
+  get offset() {
+    let menu = this.querySelector("wje-menu");
+    if (menu == null ? void 0 : menu.hasAttribute("offset")) {
+      return menu.getAttribute("offset");
+    }
+    return "0";
+  }
+  /**
+   * Getter for variant attribute.
+   * @returns {string} The variant attribute of the menu or "CONTEXT" if it doesn't exist.
+   */
+  get variant() {
+    let menu = this.querySelector("wje-menu");
+    if ((menu == null ? void 0 : menu.hasAttribute("variant")) && !this.collapse) {
+      return menu.getAttribute("variant").toUpperCase();
+    }
+    return "CONTEXT";
+  }
+  /**
+   * Getter for collapse attribute.
+   * @returns {boolean} True if the closest parent has the collapse attribute, false otherwise.
+   */
+  get collapse() {
+    if (this.closest("[collapse]")) return true;
+    return false;
+  }
+  /**
+   * Getter for cssStyleSheet.
+   * @returns {string} The styles imported from styles.css.
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * 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() {
+    var _a;
+    (_a = this.querySelector("wje-menu")) == null ? void 0 : _a.removeAttribute("active");
+  }
+  /**
+   * Draws the MenuItem element and sets the variant and collapse attributes.
+   * @returns {DocumentFragment} The fragment to be appended to the MenuItem.
+   */
+  draw() {
+    var _a, _b, _c;
+    this.hasSubmenu = WjElementUtils.hasSlot(this, "submenu");
+    let fragment = document.createDocumentFragment();
+    this.setAttribute("tabindex", "0");
+    this.classList.forEach((className) => {
+      if (className.startsWith("wje-menu-variant-")) {
+        this.classList.remove(className);
+      }
+    });
+    this.classList.remove("collapse");
+    this.classList.add("wje-menu-variant-" + this.variant.toLowerCase());
+    if (!this.collapse) {
+      (_a = this.querySelector("wje-menu")) == null ? void 0 : _a.setAttribute("variant", this.variant.toLowerCase());
+    } else if ((_b = this.parentElement) == null ? void 0 : _b.hasAttribute("collapse")) {
+      this.classList.add("collapse");
+    }
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.setAttribute("id", "anchor");
+    native.classList.add("native-menu-item");
+    let checkedIcon = document.createElement("span");
+    checkedIcon.setAttribute("part", "check");
+    checkedIcon.classList.add("check-icon");
+    checkedIcon.innerHTML = `<wje-icon name="check"></wje-icon>`;
+    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");
+    slot.classList.add("label");
+    let end = document.createElement("slot");
+    end.setAttribute("part", "end");
+    end.name = "end";
+    let submenu = document.createElement("slot");
+    submenu.setAttribute("part", "submenu");
+    submenu.name = "submenu";
+    let submenuIconClass = this.collapse ? "collapse" : "expand";
+    let submenuIcon = document.createElement("span");
+    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>`;
+    if (this.hasSubmenu) native.classList.add("has-submenu");
+    else native.classList.remove("has-submenu");
+    native.appendChild(checkedIcon);
+    native.appendChild(start);
+    native.appendChild(slot);
+    native.appendChild(end);
+    native.appendChild(submenuIcon);
+    let isAppend = false;
+    if (
+      /*(this.collapse && this.variant === "NAV" && this.hasSubmenu) || */
+      this.variant === "CONTEXT" && this.hasSubmenu
+    ) {
+      native.setAttribute("slot", "anchor");
+      let popup = document.createElement("wje-popup");
+      popup.setAttribute("anchor", "anchor");
+      popup.setAttribute("placement", this.placement);
+      popup.setAttribute("offset", this.offset);
+      popup.appendChild(native);
+      popup.appendChild(submenu);
+      this.popup = popup;
+      fragment.appendChild(popup);
+      isAppend = true;
+    }
+    if (((_c = this.parentElement) == null ? void 0 : _c.hasAttribute("collapse")) && !this.hasSubmenu) {
+      fragment.appendChild(this.collapseItem(native));
+    } else if (!isAppend) {
+      fragment.appendChild(native);
+    }
+    if (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) {
+      fragment.appendChild(submenu);
+    }
+    this.native = native;
+    this.submenu = submenu;
+    return fragment;
+  }
+  /**
+   * 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);
+    event.addListener(this, "mouseleave", null, this.shouldHideSubmenu);
+    event.addListener(this, "focusout", null, this.shouldHideSubmenu);
+    event.addListener(this, "click", null, this.clickHandler);
+  }
+  /**
+   * Creates a tooltip for the MenuItem when it is collapsed.
+   * @param {HTMLElement} native The native MenuItem element.
+   * @returns {HTMLElement} The tooltip element.
+   */
+  collapseItem(native) {
+    let tooltipStart = document.createElement("slot");
+    tooltipStart.setAttribute("slot", "start");
+    tooltipStart.setAttribute("name", "tooltip-start");
+    let tooltipEnd = document.createElement("slot");
+    tooltipEnd.setAttribute("slot", "end");
+    tooltipEnd.setAttribute("name", "tooltip-end");
+    let tooltip = document.createElement("wje-tooltip");
+    tooltip.setAttribute("content", this.getTextFromElement(this));
+    tooltip.setAttribute("placement", "right");
+    tooltip.setAttribute("offset", this.offset || "0");
+    tooltip.appendChild(tooltipStart);
+    tooltip.appendChild(tooltipEnd);
+    tooltip.appendChild(native);
+    return tooltip;
+  }
+  /**
+   * Shows the submenu of the MenuItem.
+   */
+  showSubmenu() {
+    var _a;
+    this.tabIndex = -1;
+    if (this.hasSubmenu) {
+      (_a = this.popup) == null ? void 0 : _a.setAttribute("active", "");
+      this.classList.add("expanded-submenu");
+      this.native.classList.add("expanded-submenu");
+    }
+  }
+  /**
+   * Hides the submenu of the MenuItem.
+   */
+  hideSubmenu() {
+    var _a;
+    this.tabIndex = 0;
+    if (this.hasSubmenu) {
+      (_a = this.popup) == null ? void 0 : _a.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 submenuElements = this.submenu.assignedElements({ flatten: true })[0];
+      if (!submenuElements.hasAttribute("active")) {
+        submenuElements.setAttribute("active", "");
+      } else {
+        if (this === e.target) submenuElements.removeAttribute("active");
+      }
+    }
+  }
+  /**
+   * Deactivates the submenu by removing the "active" attribute.
+   */
+  deactivateSubmenu() {
+    if (this.hasSubmenu) {
+      let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
+      if (submenuElements.hasAttribute("active")) {
+        submenuElements.removeAttribute("active");
+      }
+    }
+  }
+  /**
+   * Activates the submenu of the menu item.
+   */
+  activateSubmenu() {
+    if (this.hasSubmenu) {
+      let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
+      if (!submenuElements.hasAttribute("active")) {
+        submenuElements.setAttribute("active", "");
+      }
+    }
+  }
+  /**
+   * 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) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += node.textContent;
+      }
+    }
+    return text.trim();
+  }
+}
+MenuItem.define("wje-menu-item", MenuItem);
+export {
+  MenuItem as default
+};
+//# sourceMappingURL=wje-menu-item.js.map

package/dist/wje-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-menu-item.js","sources":["../packages/wje-menu-item/menu-item.element.js","../packages/wje-menu-item/menu-item.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `MenuItem` is a custom web component that represents a menu item.\n * @summary This element represents a menu item.\n * @documentation https://elements.webjet.sk/components/menu-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the menu item.\n * @csspart submenu - The submenu part of the menu item.\n * @slot - The default slot for the menu item.\n * @slot start - The slot for the start of the menu item.\n * @slot end - The slot for the end of the menu item.\n * @slot submenu - The slot for the submenu of the menu item.\n * @cssproperty [--wje-menu-item-color=var(--wje-color)] - Sets the text color of a menu item. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background=transparent] - Defines the background color of a menu item. Default is `transparent`. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-hover=var(--wje-color-contrast-8)] - Specifies the text color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-hover=var(--wje-border-color)] - Sets the background color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-focus=var(--wje-color-contrast-8)] - Defines the text color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-focus=var(--wje-border-color)] - Specifies the background color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-active=var(--wje-color-contrast-8)] - Sets the text color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-active=var(--wje-border-color)] - Specifies the background color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-padding-top=.5rem] - Specifies the top padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-padding-bottom=.5rem] - Specifies the bottom padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-line-height=1.8rem] - Sets the line height for the text within a menu item. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-submenu-offset=0] - Determines the horizontal offset of a submenu relative to its parent. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-item-icon-visibility=hidden] - Controls the visibility of the icon in a menu item. Accepts `visible`, `hidden`, or `collapse`.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-x] - Specifies the x-coordinate of the cursor for the safe triangle area. Used for managing hover or focus transitions between menu items and submenus.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-y] - Specifies the y-coordinate of the cursor for the safe triangle area.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-x] - Defines the x-coordinate where the submenu's safe triangle starts. Helps prevent accidental submenu closing when navigating.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-y] - Defines the y-coordinate where the submenu's safe triangle starts.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-x] - Specifies the x-coordinate where the submenu's safe triangle ends.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-y] - Specifies the y-coordinate where the submenu's safe triangle ends.\n * @tag wje-menu-item\n */\nexport default class MenuItem extends WJElement {\n    /**\n     * Constructor for MenuItem class.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._collapsible = false;\n    }\n\n    /**\n     * Getter for placement attribute.\n     * @returns {string} The placement attribute of the menu or \"right-start\" if it doesn't exist.\n     */\n    get placement() {\n        let menu = this.querySelector('wje-menu');\n\n        if (menu?.hasAttribute('placement')) {\n            return menu.getAttribute('placement');\n        }\n        return 'right-start';\n    }\n\n    /**\n     * Getter for offset attribute.\n     * @returns {string} The offset attribute of the menu or \"0\" if it doesn't exist.\n     */\n    get offset() {\n        let menu = this.querySelector('wje-menu');\n\n        if (menu?.hasAttribute('offset')) {\n            return menu.getAttribute('offset');\n        }\n        return '0';\n    }\n\n    /**\n     * Getter for variant attribute.\n     * @returns {string} The variant attribute of the menu or \"CONTEXT\" if it doesn't exist.\n     */\n    get variant() {\n        let menu = this.querySelector('wje-menu');\n\n        if (menu?.hasAttribute('variant') && !this.collapse) {\n            return menu.getAttribute('variant').toUpperCase();\n        }\n\n        return 'CONTEXT';\n    }\n\n    /**\n     * Getter for collapse attribute.\n     * @returns {boolean} True if the closest parent has the collapse attribute, false otherwise.\n     */\n    get collapse() {\n        if (this.closest('[collapse]')) return true;\n\n        return false;\n    }\n\n    className = 'MenuItem';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} The styles imported from styles.css.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for observedAttributes.\n     * @returns {Array} An empty array as no attributes are being observed.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the MenuItem element.\n     */\n    setupAttributes() {\n        super.setupAttributes();\n        this.isShadowRoot = 'open';\n        this.setAttribute('active-class', 'open');\n    }\n\n    /**\n     * Removes the active attribute from the menu before drawing the MenuItem.\n     */\n    beforeDraw() {\n        this.querySelector('wje-menu')?.removeAttribute('active');\n    }\n\n    /**\n     * Draws the MenuItem element and sets the variant and collapse attributes.\n     * @returns {DocumentFragment} The fragment to be appended to the MenuItem.\n     */\n    draw() {\n        this.hasSubmenu = WjElementUtils.hasSlot(this, 'submenu');\n\n        let fragment = document.createDocumentFragment();\n\n        this.setAttribute('tabindex', '0');\n\n        this.classList.forEach((className) => {\n            // Ak trieda začína na \"wje-menu-variant-\", odstráňte ju\n            if (className.startsWith('wje-menu-variant-')) {\n                this.classList.remove(className);\n            }\n        });\n\n        this.classList.remove('collapse');\n        this.classList.add('wje-menu-variant-' + this.variant.toLowerCase());\n\n        if (!this.collapse) {\n            this.querySelector('wje-menu')?.setAttribute('variant', this.variant.toLowerCase());\n        } else if (this.parentElement?.hasAttribute('collapse')) {\n            this.classList.add('collapse');\n        }\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.setAttribute('id', 'anchor');\n        native.classList.add('native-menu-item');\n\n        // CHECKED - Icon\n        let checkedIcon = document.createElement('span');\n        checkedIcon.setAttribute('part', 'check');\n        checkedIcon.classList.add('check-icon');\n        checkedIcon.innerHTML = `<wje-icon name=\"check\"></wje-icon>`;\n\n        if (this.hasAttribute('checked')) checkedIcon.classList.add('checked');\n        else checkedIcon.classList.remove('checked');\n\n        // SLOT - Start\n        let start = document.createElement('slot');\n        start.name = 'start';\n\n        // SLOT\n        let slot = document.createElement('slot');\n        slot.classList.add('label');\n\n        // SLOT - End\n        let end = document.createElement('slot');\n        end.setAttribute('part', 'end');\n        end.name = 'end';\n\n        // SLOT - Submenu\n        let submenu = document.createElement('slot');\n        submenu.setAttribute('part', 'submenu');\n        submenu.name = 'submenu';\n\n        // SUBMENU - Icon\n        let submenuIconClass = this.collapse ? 'collapse' : 'expand';\n        let submenuIcon = document.createElement('span');\n        submenuIcon.setAttribute('part', 'submenu-icon');\n        submenuIcon.classList.add('submenu-icon', submenuIconClass);\n        submenuIcon.innerHTML = this.collapse\n            ? `<wje-icon name=\"chevron-down\"></wje-icon>`\n            : `<wje-icon name=\"chevron-right\"></wje-icon>`;\n\n        if (this.hasSubmenu) native.classList.add('has-submenu');\n        else native.classList.remove('has-submenu');\n\n        native.appendChild(checkedIcon);\n        native.appendChild(start);\n        native.appendChild(slot);\n        native.appendChild(end);\n        native.appendChild(submenuIcon);\n\n        let isAppend = false;\n        // ak je variant typu CONTEXT zobrazime submenu ako popup\n        if (\n            /*(this.collapse && this.variant === \"NAV\" && this.hasSubmenu) || */ this.variant === 'CONTEXT' &&\n            this.hasSubmenu\n        ) {\n            native.setAttribute('slot', 'anchor'); // pridame slot anchor pre popup\n\n            let popup = document.createElement('wje-popup');\n            popup.setAttribute('anchor', 'anchor');\n            popup.setAttribute('placement', this.placement);\n            popup.setAttribute('offset', this.offset);\n\n            popup.appendChild(native);\n            popup.appendChild(submenu);\n\n            this.popup = popup;\n            fragment.appendChild(popup);\n            isAppend = true;\n        }\n\n        if (this.parentElement?.hasAttribute('collapse') && !this.hasSubmenu) {\n            fragment.appendChild(this.collapseItem(native));\n        } else if (!isAppend) {\n            fragment.appendChild(native);\n        }\n\n        if ((!this.collapse && this.variant === 'NAV') || (this.variant === 'MEGAMENU' && this.hasSubmenu)) {\n            fragment.appendChild(submenu);\n        }\n\n        this.native = native;\n        this.submenu = submenu;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after drawing the MenuItem.\n     */\n    afterDraw() {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n\n        this.addEventListener('mousemove', this.dispatchMove);\n        this.addEventListener('wje-popup:reposition', this.dispatchReposition);\n\n        // Event na zobrazenie submenu\n        event.addListener(this, 'mouseenter', null, this.mouseenterHandler);\n        // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n        event.addListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n        // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n        event.addListener(this, 'focusout', null, this.shouldHideSubmenu);\n        event.addListener(this, 'click', null, this.clickHandler);\n    }\n\n    mouseenterHandler = (e) => {\n        if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n            if (this.hasAttribute('manual') || (this.variant === 'NAV' && this.collapse)) return;\n\n            this.activateSubmenu(e);\n\n            e.stopPropagation();\n\n            this.showSubmenu();\n            // this.focus();\n        }\n    };\n\n    /**\n     * Handles the click event on the MenuItem.\n     * @param {object} e\n     */\n    clickHandler = (e) => {\n        switch (this.variant) {\n            case 'NAV':\n                if (!this.collapse && this.hasSubmenu) {\n                    this.submenuToggle(e);\n                    this.hideSubmenu();\n                    e.stopPropagation();\n                } else {\n                    event.dispatchCustomEvent(this, 'wje-menu-item:click');\n                    event.dispatchCustomEvent(this, this.dialog);\n                }\n                break;\n            case 'CONTEXT':\n                if (!this.collapse && this.hasSubmenu) {\n                    let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n                    if (submenuElements?.hasAttribute('active')) {\n                        this.shouldHideSubmenu(e);\n                    } else {\n                        this.activateSubmenu(e);\n                        this.showSubmenu(e);\n                    }\n                } else {\n                    event.dispatchCustomEvent(this, 'wje-menu-item:click');\n                    event.dispatchCustomEvent(this, this.dialog);\n                }\n\n                break;\n        }\n    };\n\n    /**\n     * Checks if the submenu should be hidden based on the event.\n     * @param {Event} e The event object.\n     */\n    shouldHideSubmenu = (e) => {\n        if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n            if ((e.relatedTarget && this.contains(e.relatedTarget)) || (this.variant === 'NAV' && !this.collapse)) {\n                return;\n            }\n\n            this.deactivateSubmenu();\n            this.hideSubmenu();\n        }\n    };\n\n    /**\n     * Creates a tooltip for the MenuItem when it is collapsed.\n     * @param {HTMLElement} native The native MenuItem element.\n     * @returns {HTMLElement} The tooltip element.\n     */\n    collapseItem(native) {\n        let tooltipStart = document.createElement('slot');\n        tooltipStart.setAttribute('slot', 'start');\n        tooltipStart.setAttribute('name', 'tooltip-start');\n\n        let tooltipEnd = document.createElement('slot');\n        tooltipEnd.setAttribute('slot', 'end');\n        tooltipEnd.setAttribute('name', 'tooltip-end');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.getTextFromElement(this));\n        tooltip.setAttribute('placement', 'right');\n        tooltip.setAttribute('offset', this.offset || '0');\n\n        tooltip.appendChild(tooltipStart);\n        tooltip.appendChild(tooltipEnd);\n        tooltip.appendChild(native);\n\n        return tooltip;\n    }\n\n    /**\n     * Dispatches a mousemove event.\n     */\n    dispatchMove = (e) => {\n        this.style.setProperty('--wje-menu-item-safe-triangle-cursor-x', `${e.clientX}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-cursor-y', `${e.clientY}px`);\n    };\n\n    /**\n     * Dispatches a reposition event.\n     */\n    dispatchReposition = (e) => {\n        // ak nemame submenu tak to ukoncime\n        if (this.submenu.assignedNodes().length === 0) return;\n\n        let submenu = this.submenu.assignedNodes()[0];\n        const { left, top, width, height } = submenu.getBoundingClientRect();\n\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-x', `${left}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-y', `${top}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-x', `${left}px`);\n        this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-y', `${top + height}px`);\n    };\n\n    /**\n     * Shows the submenu of the MenuItem.\n     */\n    showSubmenu() {\n        this.tabIndex = -1;\n        if (this.hasSubmenu) {\n            this.popup?.setAttribute('active', '');\n            this.classList.add('expanded-submenu');\n            this.native.classList.add('expanded-submenu');\n        }\n    }\n\n    /**\n     * Hides the submenu of the MenuItem.\n     */\n    hideSubmenu() {\n        this.tabIndex = 0;\n        if (this.hasSubmenu) {\n            this.popup?.removeAttribute('active');\n            this.classList.remove('expanded-submenu');\n            this.native.classList.remove('expanded-submenu');\n        }\n    }\n\n    /**\n     * Toggles the active state of the submenu element.\n     * If the submenu is not active, it sets the \"active\" attribute.\n     * If the submenu is already active, it removes the \"active\" attribute.\n     * @param {Event} e The event object.\n     */\n    submenuToggle(e) {\n        if (this.hasSubmenu) {\n            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n            if (!submenuElements.hasAttribute('active')) {\n                submenuElements.setAttribute('active', '');\n            } else {\n                if (this === e.target) submenuElements.removeAttribute('active');\n            }\n        }\n    }\n\n    /**\n     * Deactivates the submenu by removing the \"active\" attribute.\n     */\n    deactivateSubmenu() {\n        if (this.hasSubmenu) {\n            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n            if (submenuElements.hasAttribute('active')) {\n                submenuElements.removeAttribute('active');\n            }\n        }\n    }\n\n    /**\n     * Activates the submenu of the menu item.\n     */\n    activateSubmenu() {\n        if (this.hasSubmenu) {\n            let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n            if (!submenuElements.hasAttribute('active')) {\n                submenuElements.setAttribute('active', '');\n            }\n        }\n    }\n\n    /**\n     * Gets the text from the element and returns it.\n     */\n    beforeDisconnect() {\n        event.removeListener(this, 'mousemove', null, this.dispatchMove);\n        event.removeListener(this, 'wje-popup:reposition', null, this.dispatchReposition);\n        event.removeListener(this, 'mouseenter', null, this.mouseenterHandler);\n        event.removeListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n        event.removeListener(this, 'focusout', null, this.shouldHideSubmenu);\n        event.removeListener(this, 'click', null, this.clickHandler);\n\n        this.context.innerHTML = '';\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Extracts and returns the concatenated text content from all text nodes within the specified element.\n     * @param {HTMLElement} element The HTML element from which to extract text content.\n     * @returns {string} The concatenated and trimmed text content from the element's text nodes.\n     */\n    getTextFromElement(element) {\n        let text = '';\n        for (let node of element.childNodes) {\n            if (node.nodeType === Node.TEXT_NODE) {\n                text += node.textContent;\n            }\n        }\n        return text.trim();\n    }\n}\n","import MenuItem from './menu-item.element.js';\n\nexport default MenuItem;\n\nMenuItem.define('wje-menu-item', MenuItem);\n"],"names":[],"mappings":"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"}

package/dist/wje-menu-label.js

@@ -0,0 +1,55 @@
+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: 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.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "MenuLabel");
+    this.hasSubmenu = WjElementUtils.hasSlot(this, "submenu");
+  }
+  /**
+   * 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";
+  }
+  /**
+   * Draws the component for the menu label.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let slot = document.createElement("slot");
+    slot.setAttribute("part", "native");
+    slot.classList.add("native-menu-label");
+    fragment.appendChild(slot);
+    return fragment;
+  }
+}
+MenuLabel.define("wje-menu-label", MenuLabel);
+export {
+  MenuLabel as default
+};
+//# sourceMappingURL=wje-menu-label.js.map

package/dist/wje-menu-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-menu-label.js","sources":["../packages/wje-menu-label/menu-label.element.js","../packages/wje-menu-label/menu-label.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `MenuLabel` is a custom web component that represents a menu label.\n * @summary This element represents a menu label.\n * @documentation https://elements.webjet.sk/components/menu-label\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the menu label.\n * @slot - The default slot for the menu label.\n * @cssproperty [--wje-menu-label-font-size=.75rem] - Sets the font size of the menu label. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`).\n * @cssproperty [--wje-menu-label-weight=600] - Specifies the font weight of the menu label. Accepts values such as `normal`, `bold`, or numeric values (e.g., `400`, `600`).\n * @cssproperty [--wje-letter-spacing=.025rem] - Defines the spacing between letters in the menu label. Accepts any valid CSS length unit. Default value ensures slight spacing for improved readability.\n * @cssproperty [--wje-menu-label-color=var(--wje-color-contrast-6)] - Specifies the text color of the menu label. Accepts any valid CSS color value, including variables and named colors.\n * @cssproperty [--wje-padding-top=0] - Sets the top padding of the menu label. Accepts any valid CSS length value to control spacing above the label.\n * @cssproperty [--wje-padding-bottom=0] - Sets the bottom padding of the menu label. Accepts any valid CSS length value to control spacing below the label.\n * @cssproperty [--wje-padding-start=1.5rem] - Specifies the left padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the right padding. Accepts any valid CSS length value.\n * @cssproperty [--wje-padding-end=1.5rem] - Specifies the right padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the left padding. Accepts any valid CSS length value.\n * @tag wje-menu-label\n */\n\nexport default class MenuLabel extends WJElement {\n    /**\n     * Creates an instance of MenuLabel.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.hasSubmenu = WjElementUtils.hasSlot(this, 'submenu');\n    }\n\n    className = 'MenuLabel';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the menu label.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        // SLOT\n        let slot = document.createElement('slot');\n        slot.setAttribute('part', 'native');\n        slot.classList.add('native-menu-label');\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n}\n","import MenuLabel from './menu-label.element.js';\n\nexport default MenuLabel;\n\nMenuLabel.define('wje-menu-label', MenuLabel);\n"],"names":[],"mappings":";;;;;AAsBe,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK7C,cAAc;AACV,UAAO;AAKX,qCAAY;AAHR,SAAK,aAAa,eAAe,QAAQ,MAAM,SAAS;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAGhD,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,QAAQ;AAClC,SAAK,UAAU,IAAI,mBAAmB;AAEtC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACf;AACA;ACxEA,UAAU,OAAO,kBAAkB,SAAS;"}