@scania/tegel
Version:
Tegel Design System
1 lines • 4.54 kB
JavaScript
import{t,p as e,H as r,h as s,a}from"./index.js";import{g as o}from"./p-Cn4f8w1e.js";import{i as d}from"./p-Q3W78DlP.js";import{d as i}from"./p-CbSJY3jI.js";import{d as h}from"./p-CVrz-nvu.js";import{d as l}from"./p-COWTtzpX.js";import{d as c}from"./p-CIt4YhvL.js";import{d as n}from"./p-CAGXolMB.js";import{d as p}from"./p-le823YD3.js";const b=e(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.open=!1,this.hasListTypeMenu=!1,this.uuid=o()}onAnyClick(t){!t.composedPath().includes(this.host)&&(this.open=!1)}handleKeyDown(t){var e,r;if("Escape"===t.key&&this.open){this.open=!1;const t=null===(r=null===(e=this.buttonEl)||void 0===e?void 0:e.shadowRoot)||void 0===r?void 0:r.querySelector("button");t&&t.focus()}}componentDidLoad(){const t=!!this.host.querySelector("tds-header-launcher-list");this.hasListTypeMenu=t}toggleLauncher(){this.open=!this.open,this.open&&requestAnimationFrame((()=>{var t;const e="a, [tabindex='0']",s=(null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector(e))||this.host.querySelector(e);s instanceof r&&s.focus()}))}render(){this.ariaAttributes=Object.assign(Object.assign({},this.ariaAttributes),d(this.host,["role"]));const t=Object.assign(Object.assign({},this.ariaAttributes),{"aria-expanded":""+this.open,"aria-controls":"launcher-"+this.uuid,class:"button",active:this.open,onClick:()=>{this.toggleLauncher()},ref:t=>{this.buttonEl=t}});return s(a,{key:"a794dc8a1d6585403012a2059b40fe2868e84e3e"},s("div",{key:"2dffd73d6d9054fc0b84d59229f7264254173f47",class:{wrapper:!0,"state-open":this.open,"state-list-type-menu":this.hasListTypeMenu}},s("tds-header-launcher-button",Object.assign({key:"26d9cd3499ee637bc16cb7588f03cf4b954ddac0"},t,{"tds-aria-label":this.tdsAriaLabel})),this.buttonEl&&s("tds-popover-canvas",{key:"96e2dd6e07ff7e9c4d6e2f9ef335d1d043312d49",id:"tds-launcher-"+this.uuid,class:"menu",referenceEl:this.buttonEl,placement:"bottom-start",show:this.open,offsetDistance:0,modifiers:[{name:"flip",options:{fallbackPlacements:[]}}]},this.open?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 .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .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-radius:0}:host .wrapper .menu:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .wrapper .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 .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}"}},[257,"tds-header-launcher",{tdsAriaLabel:[1,"tds-aria-label"],open:[32],buttonEl:[32],hasListTypeMenu:[32]},[[8,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]);function u(){"undefined"!=typeof customElements&&["tds-header-launcher","tds-core-header-item","tds-header-item","tds-header-launcher-button","tds-icon","tds-popover-canvas","tds-popover-core"].forEach((e=>{switch(e){case"tds-header-launcher":customElements.get(t(e))||customElements.define(t(e),b);break;case"tds-core-header-item":customElements.get(t(e))||i();break;case"tds-header-item":customElements.get(t(e))||h();break;case"tds-header-launcher-button":customElements.get(t(e))||l();break;case"tds-icon":customElements.get(t(e))||c();break;case"tds-popover-canvas":customElements.get(t(e))||n();break;case"tds-popover-core":customElements.get(t(e))||p()}}))}u();const m=b,v=u;export{m as TdsHeaderLauncher,v as defineCustomElement}