@scania/tegel/dist/components/tds-side-menu-dropdown.js

Tegel Design System

import{t as e,p as t,H as s,h as d,F as n,a as o}from"./index.js";import{d as a}from"./p-CIt4YhvL.js";import{d as i}from"./p-DDZjm4KO.js";const c=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.defaultOpen=!1,this.selected=!1,this.open=!1,this.hoverState={isHovered:!1,updatedAt:0},this.collapsed=!1}collapsedSideMenuEventHandler(e){this.collapsed=e.detail.collapsed}onEventPointerEnter(){this.setHoverStateOpen()}onEventFocus(){this.setHoverStateOpen()}onEventPointerLeave(){this.setHoverStateClosed()}onEventBlur(){this.setHoverStateClosed()}handleKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!this.open)}setHoverStateOpen(){this.hoverState={isHovered:!0,updatedAt:Date.now()}}setHoverStateClosed(){const e=Date.now();setTimeout((()=>{this.hoverState.isHovered&&this.hoverState.updatedAt<e&&(this.hoverState={isHovered:!1,updatedAt:Date.now()})}),150)}getIsOpenState(){var e;return this.collapsed?null===(e=this.hoverState)||void 0===e?void 0:e.isHovered:this.open}connectedCallback(){var e;this.sideMenuEl=this.host.closest("tds-side-menu"),this.collapsed=!!(null===(e=this.sideMenuEl)||void 0===e?void 0:e.collapsed),this.open=this.defaultOpen}render(){return d(o,{key:"61c0e4c1df178d14422de845086864c8de3cf231"},d("div",{key:"775032857d13a5d9f01f5bbe22de87480bceddfe",class:{wrapper:!0,"state-open":this.getIsOpenState(),"state-collapsed":this.collapsed}},d("tds-side-menu-item",{key:"dd599c6234d4f9d6c11aa680371e69ab64ea7a2e",class:"button",active:this.getIsOpenState(),selected:this.selected,onClick:()=>{this.open=!this.open},"aria-expanded":this.getIsOpenState()?"true":"false"},d("button",{key:"da26f06483ad9348e9442c5aec70ee2f3af184e5"},d("slot",{key:"ce95165a9e75cf9f150364f40c5dd49bbc795ca5",name:"icon"}),!this.collapsed&&d(n,{key:"524ef1b9a67c9a4c950691da6e16ba7100fae6b6"},this.buttonLabel,d("slot",{key:"812088f502894d42dc5c658a8035f6212c7f1876",name:"label"}),d("tds-icon",{key:"c68ec5d4c5ea3541bff95e4d7baf07098b953f07",class:"dropdown-icon",name:"chevron_down",size:"16px",svgTitle:"Chevron Down"})))),d("div",{key:"bc99efa3ca9b83b0d6e599db85e193a91258bad1",class:"menu",tabindex:this.collapsed?"0":void 0},this.collapsed&&d("h3",{key:"c9a5f0aba4df7d2e22b9e84f75db46be8892c07c",class:"heading-collapsed"},this.buttonLabel,d("slot",{key:"d45b96b5941b1ad4f19e96ea023d6b513d54f9e0",name:"label"})),d("slot",{key:"67f16383ec5ce1c10d3a1be8488932972891ef4c"}))))}get host(){return this}static get style(){return":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:69px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}"}},[257,"tds-side-menu-dropdown",{defaultOpen:[4,"default-open"],buttonLabel:[1,"button-label"],selected:[4],open:[4],hoverState:[32],collapsed:[32]},[[16,"internalTdsSideMenuPropChange","collapsedSideMenuEventHandler"],[1,"pointerenter","onEventPointerEnter"],[0,"focusin","onEventFocus"],[1,"pointerleave","onEventPointerLeave"],[0,"focusout","onEventBlur"],[0,"keydown","handleKeyDown"]]]);function l(){"undefined"!=typeof customElements&&["tds-side-menu-dropdown","tds-icon","tds-side-menu-item"].forEach((t=>{switch(t){case"tds-side-menu-dropdown":customElements.get(e(t))||customElements.define(e(t),c);break;case"tds-icon":customElements.get(e(t))||a();break;case"tds-side-menu-item":customElements.get(e(t))||i()}}))}l();const r=c,h=l;export{r as TdsSideMenuDropdown,h as defineCustomElement}