@scania/tegel/dist/tegel/p-0cfe8671.entry.js

Tegel Design System

import{r as e,c as t,h as s,H as o,g as d}from"./p-2049fab2.js";const i=class{constructor(s){e(this,s),this.tdsCollapse=t(this,"tdsCollapse",7),this.internalTdsCollapse=t(this,"internalTdsCollapse",6),this.internalTdsSideMenuPropChange=t(this,"internalTdsSideMenuPropChange",6),this.handleMatchesLgBreakpointChange=e=>{e.matches?(this.collapsed=this.initialCollapsedState,this.open=!1):this.collapsed=!1},this.open=!1,this.persistent=!1,this.collapsed=!1,this.isUpperSlotEmpty=!1,this.isCollapsed=!1,this.initialCollapsedState=!1,this.activeElementIndex=0}handleKeyDown(e){"Escape"===e.key&&this.open&&(this.open=!1)}connectedCallback(){this.matchesLgBreakpointMq=window.matchMedia("(min-width: 992px)"),this.matchesLgBreakpointMq.addEventListener("change",this.handleMatchesLgBreakpointChange),this.isCollapsed=this.collapsed,this.initialCollapsedState=this.collapsed}componentDidLoad(){const e=this.host.shadowRoot.querySelector("slot:not([name])").assignedElements();(null==e?void 0:e.length)>0||(this.isUpperSlotEmpty=!0),window.innerWidth<992&&(this.collapsed=!1)}disconnectedCallback(){this.matchesLgBreakpointMq.removeEventListener("change",this.handleMatchesLgBreakpointChange)}onCollapsedChange(e){this.internalTdsSideMenuPropChange.emit({changed:["collapsed"],collapsed:e}),this.isCollapsed=e}onOpenChange(e){if(e)setTimeout((()=>{const e=this.getFocusableElements();e.length>0&&(this.activeElementIndex=0,e[0].focus())}),100);else{const e=document.querySelector("tds-header-hamburger");if(e&&e.shadowRoot){const t=e.shadowRoot.querySelector("button");t&&t.focus()}}}getFocusableElements(){var e;const t=["a[href]","button:not([disabled])","textarea:not([disabled])","input:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(","),s=Array.from(this.host.shadowRoot.querySelectorAll(t)),o=Array.from(this.host.querySelectorAll(t)),d=null===(e=this.host.querySelector('[slot="close-button"]'))||void 0===e?void 0:e.shadowRoot.querySelector("button");let i=[...s,...o];return d&&i.push(d),i}handleFocusTrap(e){if(!this.open)return;if("Tab"!==e.key)return;const t=this.getFocusableElements();0!==t.length&&(e.preventDefault(),e.shiftKey?(this.activeElementIndex-=1,this.activeElementIndex<0&&(this.activeElementIndex=t.length-1)):(this.activeElementIndex+=1,this.activeElementIndex>=t.length&&(this.activeElementIndex=0)),t[this.activeElementIndex].focus())}collapsedSideMenuEventHandler(e){this.collapsed=e.detail.collapsed}render(){return s(o,{key:"62d159fdff0e4dd3d2a93e0c5542b8e672e3f287",class:{"menu-opened":this.open,"menu-persistent":this.persistent,"menu-collapsed":this.collapsed},"aria-expanded":this.collapsed?"false":"true"},s("div",{key:"17134ffc1c3ca6658f4ff87c203ca3b6ba991b83",class:{wrapper:!0,"state-upper-slot-empty":this.isUpperSlotEmpty,"state-open":this.open,"state-closed":!this.open}},s("slot",{key:"8ed1f309c2188e6de12b874198c36a4698d7a69f",name:"overlay"}),s("aside",{key:"45702b7ff79693b31565550fc1985bfd64e45f92",class:"menu"},s("div",{key:"e799983a07a07ad0f4cac8e962e1748d08107b6b",role:"navigation"},s("slot",{key:"4550b56dae039b94005dd58c8c5cb9818c3ab48a",name:"close-button"}),s("div",{key:"ad2457482eb6dc9b08428f36078d53143f7b5168",class:"tds-side-menu-wrapper"},s("ul",{key:"541323ca57ed67565c848a984bd3ac210ce6f135",class:"tds-side-menu-list tds-side-menu-list-upper"},s("li",{key:"6248720390640a1166e1158caa0f50164fe1dfad"},s("slot",{key:"b3d24d582d4781fef041a2c099681fd538d01910"}))),s("ul",{key:"0a5f76474b4b3851d790ab8f698dbea9fd0fda05",class:"tds-side-menu-list tds-side-menu-list-end"},s("li",{key:"576cf3e91cac7c1a21e6b35105475f1f443c2f45"},s("slot",{key:"71f9c2d1c061401ef26daf68c7801b5665a25d03",name:"end"})))),s("slot",{key:"41805c2bb7c66f74f47edd2393a9a3452132c769",name:"sticky-end"})))))}get host(){return d(this)}static get watchers(){return{collapsed:["onCollapsedChange"],open:["onOpenChange"]}}};i.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{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%;z-index:500}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .tds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button){opacity:1}:host .state-upper-slot-empty .tds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .tds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}@media (max-width: 992px){:host(.menu-opened){pointer-events:auto;z-index:500}}@media (min-width: 992px){:host(.menu-persistent){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay){display:none}:host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button){display:none}:host(.menu-persistent) .menu{width:272px}:host(.menu-persistent) .state-closed{display:block}:host(.menu-persistent):host(.menu-collapsed){width:69px;box-sizing:border-box}:host(.menu-persistent):host(.menu-collapsed) .menu{width:68px}:host(.menu-persistent) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .tds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--tds-sidebar-side-menu-background-cover);overflow-y:auto}aside .tds-side-menu-wrapper: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}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:var(--tds-scrollbar-width)}aside .tds-side-menu-wrapper::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}aside .tds-side-menu-wrapper::-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}aside .tds-side-menu-wrapper::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){aside .tds-side-menu-wrapper{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}aside [role=navigation]{height:100%;display:flex;flex-direction:column}aside li{list-style:none;padding:0;margin:0}";export{i as tds_side_menu}