v4web-components/dist/components/lab-ds-navbar.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 labDsNavbarCss = ".v4-navbar{position:fixed;left:0;z-index:10;width:3.5rem;top:4rem;bottom:0;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;background-color:#fff;color:#333;transition:width 0.5s ease-in-out;box-shadow:var(--lab-ds-semantic-container-shadow-l);overflow:-moz-scrollbars-none;-ms-overflow-style:none}.v4-navbar::-webkit-scrollbar{width:0 !important}nav{padding-top:4.5rem}a{cursor:pointer}.v4-navbar:hover{width:17rem}.title-menu{display:flex;width:100%;align-items:center;justify-content:space-between;opacity:0;font-family:'Inter';font-size:0.875rem;font-weight:400;white-space:nowrap}.title-menu{opacity:0}.v4-navbar:hover .title-menu{opacity:1;transition:opacity 0.4s ease-in-out}ul{list-style:none;padding:0;margin-top:0.5rem;margin-bottom:0.5rem}.menu-option{display:flex;align-items:center;gap:1rem;border:none;padding-top:0.75rem;padding-bottom:0.75rem;padding-inline:0.75rem}.submenu{margin-left:1rem;border-left-style:solid;border:none;opacity:0;visibility:hidden;max-height:0rem;transition:all 0.5s ease}.menu-item{margin-top:1.75rem;margin-bottom:1.75rem}.v4-navbar:hover .menu-item.open .submenu{visibility:visible;max-height:100%;opacity:1;transition:max-height 0.2s}.v4-navbar:hover .menu-item.active .submenu{width:calc(100% - 1rem);transition:opacity 1.5s ease-in-out;transition:max-height 0.2s}.menu-option:hover{background-color:#e6e6ef}.menu-item.active{color:#00c49a}.menu-item.active .title-menu{font-weight:700}.menu-item.active .menu-option{border-right:4px solid #00c49a}.footer{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:2rem;padding:1rem}.footer img{width:2.5rem;height:2.5rem}.v4-navbar:hover .user-data{display:flex;flex-direction:column}.footer .user-data{overflow:hidden;display:none;width:100%;align-items:center;justify-content:center;padding:1rem;color:#c1c1d7;font-size:0.875rem;overflow-wrap:break-word;word-wrap:break-word;text-align:center}";

const LabDsNavbar$1 = /*@__PURE__*/ proxyCustomElement(class LabDsNavbar extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.collapsed = true;
    this.menus = undefined;
    this.user = undefined;
    this.logo = undefined;
    this.currentHost = window.location;
    this.activeUrl = window.location.href;
    this.activeProductsV4 = undefined;
    this.activeRedeV4 = undefined;
    this.openProductsV4 = false;
    this.openRedeV4 = false;
  }
  render() {
    var _a, _b;
    let openIconProductsV4 = this.openProductsV4 ? 'expand_less' : 'expand_more';
    let openIconRedeV4 = this.openRedeV4 ? 'expand_less' : 'expand_more';
    return (h("div", { class: `v4-navbar notranslate` }, h("nav", null, h("ul", null, h("li", { class: `${this.activeProductsV4 ? 'active' : ''} ${this.openProductsV4 ? 'open' : ''} menu-item` }, h("a", { onClick: () => {
        this.openProductsV4 = !this.openProductsV4;
        this.openRedeV4 = false;
      } }, h("div", { class: "menu-option" }, h("lab-ds-icon-not-selectable", { icon: "lightbulb", size: "s-medium" }), ' ', h("span", { class: "title-menu" }, "Produtos V4 ", h("lab-ds-icon-not-selectable", { icon: openIconProductsV4, size: "small" })))), h("ul", { class: "submenu" }, h("slot", { name: "products-v4" }))), h("li", { class: `${this.activeRedeV4 ? 'active' : ''} ${this.openRedeV4 ? 'open' : ''} menu-item` }, h("a", { onClick: () => {
        this.openRedeV4 = !this.openRedeV4;
        this.openProductsV4 = false;
      } }, h("div", { class: "menu-option" }, h("lab-ds-icon-not-selectable", { icon: "share", size: "s-medium" }), ' ', h("span", { class: "title-menu" }, "Rede V4 ", h("lab-ds-icon-not-selectable", { icon: openIconRedeV4, size: "small" })))), h("ul", { class: "submenu" }, h("slot", { name: "rede-v4" }))))), h("div", { class: "footer" }, h("div", { class: "user-data" }, h("span", null, (_a = this.user) === null || _a === void 0 ? void 0 : _a.name), h("span", null, (_b = this.user) === null || _b === void 0 ? void 0 : _b.unitName)), h("img", { width: 20, src: this.logo, alt: "Logo da V4" }))));
  }
  static get style() { return labDsNavbarCss; }
}, [1, "lab-ds-navbar", {
    "menus": [16],
    "user": [16],
    "logo": [1],
    "activeUrl": [1, "active-url"],
    "activeProductsV4": [4, "active-products-v-4"],
    "activeRedeV4": [4, "active-rede-v-4"],
    "collapsed": [32],
    "currentHost": [32],
    "openProductsV4": [32],
    "openRedeV4": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-navbar", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-navbar":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsNavbar$1);
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const LabDsNavbar = LabDsNavbar$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsNavbar, defineCustomElement };

//# sourceMappingURL=lab-ds-navbar.js.map