@scania/tegel/dist/tegel/p-2c56421f.entry.js

Tegel Design System

import{r as t,h as o,H as r,g as s}from"./p-2049fab2.js";import{g as a}from"./p-11648030.js";import{h as e}from"./p-ae110fc2.js";const d=class{constructor(o){t(this,o),this.uuid=a(),this.handleSlottedItemClick=t=>{const o=t.target.tagName.toLowerCase();["a","button"].includes(o)&&(this.open=!1)},this.label=void 0,this.noDropdownIcon=!1,this.selected=!1,this.tdsAriaLabel=void 0,this.open=!1,this.buttonEl=void 0}onAnyClick(t){!t.composedPath().includes(this.host)&&(this.open=!1)}handleKeyDown(t){"Escape"===t.key&&this.open&&(this.open=!1,this.buttonEl.focus())}toggleDropdown(){this.open=!this.open,this.open&&requestAnimationFrame((()=>{const t="a, [tabindex='0']",o=this.host.shadowRoot.querySelector(t)||this.host.querySelector(t);o instanceof HTMLElement&&o.focus()}))}connectedCallback(){const t=e("label",this.host);this.tdsAriaLabel||t||console.warn("Tegel Header Dropdown component: use label slot or specify tdsAriaLabel prop")}render(){return o(r,{key:"6ab1d0f1d475d6d0a486e1909cad300d89eb39a0"},o("div",{key:"bfe11cdc8c2bf592cec7f3cf8888555071781afe",class:{"state-open":this.open}},o("tds-header-item",{key:"27b6d2680858443a26d7108b5318386df76db788",class:"button",active:this.open,selected:this.selected},o("button",{key:"09d0ccb3bc5a31a897af65f5fcf4d47ee8b35192",ref:t=>{this.buttonEl=t},"aria-expanded":`${this.open}`,"aria-controls":`launcher-${this.uuid}`,"aria-current":this.selected?"location":"false",onClick:()=>{this.toggleDropdown()},"aria-label":this.tdsAriaLabel},o("slot",{key:"50c872c297116ece9dd5da41398aac3bd88cd529",name:"icon"}),this.label,o("slot",{key:"141a43cdc4c8aeade4d547bbb91a28f62542bb98",name:"label"}),!this.noDropdownIcon&&o("tds-icon",{key:"13f2f8d6b264f09dea45e9b7809adab1b83db683",class:"dropdown-icon",name:"chevron_down",size:"16px",svgTitle:"Dropdown icon"}))),this.buttonEl&&o("tds-popover-canvas",{key:"10b18c15ae1d2c0fbafaa82bed4ae7759c857c54",id:`tds-dropdown-${this.uuid}`,class:"menu",referenceEl:this.buttonEl,placement:"bottom-start",show:this.open,offsetDistance:0,modifiers:[{name:"flip",options:{fallbackPlacements:[]}}]},this.open?o("span",{onClick:t=>this.handleSlottedItemClick(t),onKeyDown:t=>"Enter"===t.key&&this.handleSlottedItemClick(t)},o("slot",null)):null)))}get host(){return s(this)}};d.style=":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotate(180deg)}:host .state-open .button{position:relative;z-index:901}";export{d as tds_header_dropdown}