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

Stencil Component Starter

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8b55ea0e.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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    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 (index.h("li", { class: `menu ${this.open ? 'open' : ''} menu-item ${this.item.active ? 'active' : ''}` }, index.h("a", { class: ``, onClick: () => {
        this.toggleMenu();
      } }, index.h("div", { class: `menu-option ${this.item.active ? 'active' : ''}` }, index.h("lab-ds-icon-not-selectable", { icon: this.item.icon, size: "s-medium" }), ' ', index.h("span", { class: "title-menu" }, this.item.title, " ", ((_a = this.submenus) === null || _a === void 0 ? void 0 : _a.length) > 0 && index.h("lab-ds-icon-not-selectable", { icon: openIcon, size: "small" })))), ((_b = this.submenus) === null || _b === void 0 ? void 0 : _b.length) > 0 && (index.h("ul", { class: "submenu-item" }, (_c = this.submenus) === null || _c === void 0 ? void 0 : _c.map(submenu => {
      var _a, _b, _c;
      return (index.h("li", { id: `submenu-${submenu.title}`, class: `menu-item` }, index.h("a", { class: `${submenu.active ? 'active' : ''}`, onClick: () => {
          this.toggleSubmenus(submenu);
          submenu.event && submenu.event();
        } }, index.h("div", { class: `menu-option ${submenu.active ? 'active' : ''}` }, index.h("lab-ds-icon-not-selectable", { icon: submenu.icon, size: "s-medium" }), ' ', index.h("span", { class: "title-menu" }, submenu.title, ' ', ((_a = submenu.subMenus) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("span", null, index.h("lab-ds-icon-not-selectable", { class: "icon-more", icon: 'expand_more', size: "small" }), index.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 && (index.h("ul", { class: "sub-submenu-item" }, (_c = submenu.subMenus) === null || _c === void 0 ? void 0 : _c.map(submenu => (index.h("li", { class: `menu-item` }, index.h("a", { class: `${submenu.active ? 'active' : ''}`, onClick: () => {
          submenu.event();
        } }, index.h("div", { class: `menu-option ${submenu.active ? 'active' : ''}` }, index.h("lab-ds-icon-not-selectable", { icon: submenu.icon, size: "s-medium" }), " ", index.h("span", { class: "title-menu" }, submenu.title))))))))));
    })))));
  }
};
MenuItem.style = navbarItemCss;

exports.navbar_item = MenuItem;

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