v4web-components/dist/components/navbar-item.js

Stencil Component Starter

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './lab-ds-icon-not-selectable2.js';

const navbarItemCss = ".title-menu{font-family:'Inter';display:flex;width:100%;align-items:center;justify-content:space-between;font-size:0.875rem;font-weight:400;white-space:nowrap}.menu-option{color:#333;text-decoration:none}.submenu-item{visibility:hidden;list-style:none;margin-left:1rem;border-left-style:solid;border:none;opacity:0;max-height:0;transition:all 0.5s ease;background-color:#f4f4f8}.sub-submenu-item{visibility:hidden;list-style:none;margin-left:1rem;border-left-style:solid;border:none;opacity:0;max-height:0;transition:all 0.5s ease;background-color:#f4f4f8}.menu-item{border-left:2px solid #b4b4cf}a{cursor:pointer}ul{list-style:none;padding:0;margin:0}.menu.open .submenu-item{visibility:visible;max-height:100%;opacity:1;transition:opacity 0.5s ease-in;transition:max-height 0.5s;margin-top:0.5rem;padding-bottom:0.5rem}.submenu-item .menu-item.open .sub-submenu-item{visibility:visible;max-height:100%;opacity:1;transition:opacity 0.5s ease-in;transition:max-height 0.5s;margin-top:0.5rem;padding-bottom:0.5rem}.submenu-item .menu-item.open .icon-more{display:none}.submenu-item .menu-item.open .icon-less{display:flex}.submenu-item .menu-item .icon-less{display:none}.submenu-item .menu-item .icon-more{display:flex}.menu-option{display:flex;align-items:center;gap:1rem;border:none;padding-top:0.75rem;padding-bottom:0.75rem;padding-inline:1rem}.menu-item{padding:0rem}.menu-item{background-color:#f4f4f8}.menu-option.active{color:#00c49a;border-right:4px solid #00c49a}.menu-option.active .title-menu{font-weight:700}.menu-item.active .submenu-item{display:block;height:100%;opacity:1}.menu-option:hover{background-color:#e6e6ef}";

const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.submenuOpen = '';
    this.toggleSubmenus = (submenu) => {
      if (this.submenuOpen === submenu.title) {
        let element = document.getElementById(`submenu-${submenu.title}`);
        element.classList.remove(`open`);
        this.submenuOpen = '';
      }
      else {
        if (this.submenuOpen !== '') {
          let element = document.getElementById(`submenu-${this.submenuOpen}`);
          element.classList.remove(`open`);
        }
        let element = document.getElementById(`submenu-${submenu.title}`);
        element.classList.add(`open`);
        this.submenuOpen = submenu.title;
      }
    };
    this.toggleMenu = () => {
      var _a;
      if (this.submenuOpen !== '') {
        let element = document.getElementById(`submenu-${this.submenuOpen}`);
        element.classList.remove(`open`);
        this.submenuOpen = '';
      }
      this.open = !this.open;
      this.item.open = this.open;
      this.item.event && ((_a = this.item) === null || _a === void 0 ? void 0 : _a.event());
    };
    this.item = undefined;
    this.submenus = undefined;
    this.open = false;
  }
  render() {
    var _a, _b, _c;
    let openIcon = this.open ? 'expand_less' : 'expand_more';
    return (h("li", { class: `menu ${this.open ? 'open' : ''} menu-item ${this.item.active ? 'active' : ''}` }, h("a", { class: ``, onClick: () => {
        this.toggleMenu();
      } }, h("div", { class: `menu-option ${this.item.active ? 'active' : ''}` }, h("lab-ds-icon-not-selectable", { icon: this.item.icon, size: "s-medium" }), ' ', h("span", { class: "title-menu" }, this.item.title, " ", ((_a = this.submenus) === null || _a === void 0 ? void 0 : _a.length) > 0 && h("lab-ds-icon-not-selectable", { icon: openIcon, size: "small" })))), ((_b = this.submenus) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("ul", { class: "submenu-item" }, (_c = this.submenus) === null || _c === void 0 ? void 0 : _c.map(submenu => {
      var _a, _b, _c;
      return (h("li", { id: `submenu-${submenu.title}`, class: `menu-item` }, h("a", { class: `${submenu.active ? 'active' : ''}`, onClick: () => {
          this.toggleSubmenus(submenu);
          submenu.event && submenu.event();
        } }, h("div", { class: `menu-option ${submenu.active ? 'active' : ''}` }, h("lab-ds-icon-not-selectable", { icon: submenu.icon, size: "s-medium" }), ' ', h("span", { class: "title-menu" }, submenu.title, ' ', ((_a = submenu.subMenus) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("span", null, h("lab-ds-icon-not-selectable", { class: "icon-more", icon: 'expand_more', size: "small" }), h("lab-ds-icon-not-selectable", { class: "icon-less", icon: 'expand_less', size: "small" })))))), ((_b = submenu.subMenus) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("ul", { class: "sub-submenu-item" }, (_c = submenu.subMenus) === null || _c === void 0 ? void 0 : _c.map(submenu => (h("li", { class: `menu-item` }, h("a", { class: `${submenu.active ? 'active' : ''}`, onClick: () => {
          submenu.event();
        } }, h("div", { class: `menu-option ${submenu.active ? 'active' : ''}` }, h("lab-ds-icon-not-selectable", { icon: submenu.icon, size: "s-medium" }), " ", h("span", { class: "title-menu" }, submenu.title))))))))));
    })))));
  }
  static get style() { return navbarItemCss; }
}, [0, "navbar-item", {
    "item": [16],
    "submenus": [16],
    "open": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["navbar-item", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "navbar-item":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, MenuItem);
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const NavbarItem = MenuItem;
const defineCustomElement = defineCustomElement$1;

export { NavbarItem, defineCustomElement };

//# sourceMappingURL=navbar-item.js.map