@scania/tegel
Version:
Tegel Design System
1 lines • 3.22 kB
JavaScript
import{r as e,h as t,F as s,H as a,g as d}from"./p-2049fab2.js";const o=class{constructor(t){e(this,t),this.defaultOpen=!1,this.buttonLabel=void 0,this.selected=!1,this.open=!1,this.hoverState=void 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(){this.sideMenuEl=this.host.closest("tds-side-menu"),this.collapsed=this.sideMenuEl.collapsed,this.open=this.defaultOpen}render(){return t(a,{key:"78a5c58e58b38e84cae96a9afd8166bfe3125a02"},t("div",{key:"70e8e68e6db938cb2177169ca1836e84eb48cce6",class:{wrapper:!0,"state-open":this.getIsOpenState(),"state-collapsed":this.collapsed}},t("tds-side-menu-item",{key:"5834d5e804ad422937f2971637b3a70fb1fb676e",class:"button",active:this.getIsOpenState(),selected:this.selected,onClick:()=>{this.open=!this.open},"aria-expanded":this.getIsOpenState()?"true":"false"},t("button",{key:"d454e6148a12c0bd1864b6c148f169ac342e9da2"},t("slot",{key:"8a2579b751421d9df8e3dd5a84b04a5f844d383c",name:"icon"}),!this.collapsed&&t(s,{key:"f3419cc2993191186dccc9a208ff8150bf592eeb"},this.buttonLabel,t("slot",{key:"ff616384d76d6f3df82ac6abb12d65e4f6a5906d",name:"label"}),t("tds-icon",{key:"a4acd9c0de3f437766673c57b4d73ac13cc8917b",class:"dropdown-icon",name:"chevron_down",size:"16px",svgTitle:"Chevron Down"})))),t("div",{key:"db1ec059f4f1910d1fef432baff29810883ec2ef",class:"menu",tabindex:this.collapsed?"0":null},this.collapsed&&t("h3",{key:"a9f35f976da7ceaf38eb1c1641b43617e4e583c6",class:"heading-collapsed"},this.buttonLabel,t("slot",{key:"ef8b02b77b93b54f0a9aa4c5fb367356c12e9b82",name:"label"})),t("slot",{key:"15c7c9e5a6a0615f478c5f93de8753211d17b3c3"}))))}get host(){return d(this)}};o.style=":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}";export{o as tds_side_menu_dropdown}