v4web-components/dist/stencil-library/p-8f54b205.entry.js

Stencil Component Starter

import{r as e,h as i}from"./p-c2aeec95.js";const t=".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 n=class{constructor(i){e(this,i);this.submenuOpen="";this.toggleSubmenus=e=>{if(this.submenuOpen===e.title){let i=document.getElementById(`submenu-${e.title}`);i.classList.remove(`open`);this.submenuOpen=""}else{if(this.submenuOpen!==""){let e=document.getElementById(`submenu-${this.submenuOpen}`);e.classList.remove(`open`)}let i=document.getElementById(`submenu-${e.title}`);i.classList.add(`open`);this.submenuOpen=e.title}};this.toggleMenu=()=>{var e;if(this.submenuOpen!==""){let e=document.getElementById(`submenu-${this.submenuOpen}`);e.classList.remove(`open`);this.submenuOpen=""}this.open=!this.open;this.item.open=this.open;this.item.event&&((e=this.item)===null||e===void 0?void 0:e.event())};this.item=undefined;this.submenus=undefined;this.open=false}render(){var e,t,n;let s=this.open?"expand_less":"expand_more";return i("li",{class:`menu ${this.open?"open":""} menu-item ${this.item.active?"active":""}`},i("a",{class:``,onClick:()=>{this.toggleMenu()}},i("div",{class:`menu-option ${this.item.active?"active":""}`},i("lab-ds-icon-not-selectable",{icon:this.item.icon,size:"s-medium"})," ",i("span",{class:"title-menu"},this.item.title," ",((e=this.submenus)===null||e===void 0?void 0:e.length)>0&&i("lab-ds-icon-not-selectable",{icon:s,size:"small"})))),((t=this.submenus)===null||t===void 0?void 0:t.length)>0&&i("ul",{class:"submenu-item"},(n=this.submenus)===null||n===void 0?void 0:n.map((e=>{var t,n,s;return i("li",{id:`submenu-${e.title}`,class:`menu-item`},i("a",{class:`${e.active?"active":""}`,onClick:()=>{this.toggleSubmenus(e);e.event&&e.event()}},i("div",{class:`menu-option ${e.active?"active":""}`},i("lab-ds-icon-not-selectable",{icon:e.icon,size:"s-medium"})," ",i("span",{class:"title-menu"},e.title," ",((t=e.subMenus)===null||t===void 0?void 0:t.length)>0&&i("span",null,i("lab-ds-icon-not-selectable",{class:"icon-more",icon:"expand_more",size:"small"}),i("lab-ds-icon-not-selectable",{class:"icon-less",icon:"expand_less",size:"small"}))))),((n=e.subMenus)===null||n===void 0?void 0:n.length)>0&&i("ul",{class:"sub-submenu-item"},(s=e.subMenus)===null||s===void 0?void 0:s.map((e=>i("li",{class:`menu-item`},i("a",{class:`${e.active?"active":""}`,onClick:()=>{e.event()}},i("div",{class:`menu-option ${e.active?"active":""}`},i("lab-ds-icon-not-selectable",{icon:e.icon,size:"s-medium"})," ",i("span",{class:"title-menu"},e.title))))))))}))))}};n.style=t;export{n as navbar_item};
//# sourceMappingURL=p-8f54b205.entry.js.map