@scania/tegel/dist/components/tds-header-dropdown.js

Tegel Design System

import{t,p as o,H as e,h as s,a as r}from"./index.js";import{g as a}from"./p-Cn4f8w1e.js";import{d}from"./p-CbSJY3jI.js";import{d as n}from"./p-CVrz-nvu.js";import{d as i}from"./p-CIt4YhvL.js";import{d as c}from"./p-CAGXolMB.js";import{d as l}from"./p-le823YD3.js";const h=o(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.noDropdownIcon=!1,this.selected=!1,this.open=!1,this.uuid=a(),this.handleSlottedItemClick=t=>{const o=t.target.tagName.toLowerCase();["a","button"].includes(o)&&(this.open=!1)}}onAnyClick(t){!t.composedPath().includes(this.host)&&(this.open=!1)}handleKeyDown(t){var o;"Escape"===t.key&&this.open&&(this.open=!1,null===(o=this.buttonEl)||void 0===o||o.focus())}toggleDropdown(){this.open=!this.open,this.open&&requestAnimationFrame((()=>{var t;const o="a, [tabindex='0']",s=(null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector(o))||this.host.querySelector(o);s instanceof e&&s.focus()}))}render(){return s(r,{key:"81c477e45d3f6a4614c3928797f900fb9b64ffcc"},s("div",{key:"2b4a3509254a827fa6d300793b699e57ac36cd9a",class:{"state-open":this.open}},s("tds-header-item",{key:"4847e06a7b5fdf61642234f7179b01103e34fb38",class:"button",active:this.open,selected:this.selected},s("button",{key:"8cc7fed2a05c68f0026ef7d4c17400d85d6a40af",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},s("slot",{key:"8254bfb1f48d193bc0c58363df96fad41b61aad6",name:"icon"}),this.label,s("slot",{key:"5722ecd4748ad029b5b803bb4ff731cca119fc7b",name:"label"}),!this.noDropdownIcon&&s("tds-icon",{key:"c0c9c51b4705226891b21383ce27c0680113af7c",class:"dropdown-icon",name:"chevron_down",size:"16px",svgTitle:"Dropdown icon"}))),this.buttonEl&&s("tds-popover-canvas",{key:"52e127dbe4eef7082e62f3421d338fa0b44ab919",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?s("span",{onClick:t=>this.handleSlottedItemClick(t),onKeyDown:t=>"Enter"===t.key&&this.handleSlottedItemClick(t)},s("slot",null)):null)))}get host(){return this}static get style(){return":host,:root{--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-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}:host .state-open tds-header-item button:hover,:host .state-open tds-header-item a:hover{background-color:var(--tds-nav-item-background-hover);box-shadow:none}"}},[257,"tds-header-dropdown",{label:[1],noDropdownIcon:[4,"no-dropdown-icon"],selected:[4],tdsAriaLabel:[1,"tds-aria-label"],open:[32],buttonEl:[32]},[[4,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]);function b(){"undefined"!=typeof customElements&&["tds-header-dropdown","tds-core-header-item","tds-header-item","tds-icon","tds-popover-canvas","tds-popover-core"].forEach((o=>{switch(o){case"tds-header-dropdown":customElements.get(t(o))||customElements.define(t(o),h);break;case"tds-core-header-item":customElements.get(t(o))||d();break;case"tds-header-item":customElements.get(t(o))||n();break;case"tds-icon":customElements.get(t(o))||i();break;case"tds-popover-canvas":customElements.get(t(o))||c();break;case"tds-popover-core":customElements.get(t(o))||l()}}))}b();const p=h,m=b;export{p as TdsHeaderDropdown,m as defineCustomElement}