v4web-components/dist/collection/components/navigation/lab-ds-navbar/menu-item/navbar-item.js

Stencil Component Starter

import { h } from '@stencil/core';
export class MenuItem {
  constructor() {
    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 is() { return "navbar-item"; }
  static get originalStyleUrls() {
    return {
      "$": ["navbar-item.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["navbar-item.css"]
    };
  }
  static get properties() {
    return {
      "item": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "INavbarItem",
          "resolved": "INavbarItem",
          "references": {
            "INavbarItem": {
              "location": "local",
              "path": "/home/runner/work/v4web-component/v4web-component/packages/stencil-library/src/components/navigation/lab-ds-navbar/menu-item/navbar-item.tsx"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        }
      },
      "submenus": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "Array<INavbarItem>",
          "resolved": "INavbarItem[]",
          "references": {
            "Array": {
              "location": "global"
            },
            "INavbarItem": {
              "location": "local",
              "path": "/home/runner/work/v4web-component/v4web-component/packages/stencil-library/src/components/navigation/lab-ds-navbar/menu-item/navbar-item.tsx"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        }
      }
    };
  }
  static get states() {
    return {
      "open": {}
    };
  }
}
//# sourceMappingURL=navbar-item.js.map