@scania/tegel/dist/components/tds-navigation-tabs.js

Tegel Design System

import{t,p as s,H as e,c as i,h as o,a as l}from"./index.js";import{d as h}from"./p-CIt4YhvL.js";const r=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsChange=i(this,"tdsChange",7),this.modeVariant="primary",this.defaultSelectedIndex=0,this.leftPadding=32,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let e=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);e+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=e,this.scrollableWidth=e-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const e=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",e),this.clickHandlers.set(t,e),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){return this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,e)=>(e===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){this.tabElements=Array.from(this.host.children).map((t=>(t.setSelected(!1),t))),this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements.length>0&&(this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last"))}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}applyCustomLeftPadding(){this.navWrapperElement&&(this.navWrapperElement.style.paddingLeft=this.leftPadding+"px")}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver(),this.applyCustomLeftPadding()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return o(l,{key:"30d0734a2ac6fe0a585ca7e15fe08f9feceb2303",role:"tablist",class:{["tds-mode-variant-"+this.modeVariant]:null!==this.modeVariant}},o("div",{key:"b27101ea4c520eb434ba26c425e6179c1b0bdd8b",class:"wrapper",ref:t=>{this.navWrapperElement=t},style:{paddingLeft:this.leftPadding+"px"}},o("button",{key:"a2214da9d20638ee1896cb04c759f598caee3425","aria-label":this.tdsScrollLeftAriaLabel,class:{"scroll-left-button":!0,show:this.showLeftScroll},onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},o("tds-icon",{key:"54fc194d33c682ecf03c51af39ce5290de199c29",name:"chevron_left",size:"20px"})),o("slot",{key:"8c673f8d743352b4f5228c434ea6ba73b35d5916",onSlotchange:()=>this.handleSlotChange()}),o("button",{key:"f89e20284ad64bb864e84c28015f162fdf744b62","aria-label":this.tdsScrollRightAriaLabel,class:{"scroll-right-button":!0,show:this.showRightScroll},onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},o("tds-icon",{key:"6099eec68724b31d6ec71e5f6491313cae51db1f",name:"chevron_right",size:"20px"}))))}get host(){return this}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}static get style(){return':host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:"";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}'}},[257,"tds-navigation-tabs",{modeVariant:[1,"mode-variant"],defaultSelectedIndex:[2,"default-selected-index"],selectedIndex:[514,"selected-index"],leftPadding:[514,"left-padding"],tdsScrollLeftAriaLabel:[1,"tds-scroll-left-aria-label"],tdsScrollRightAriaLabel:[1,"tds-scroll-right-aria-label"],showLeftScroll:[32],showRightScroll:[32],selectTab:[64],reinitialize:[64]},void 0,{selectedIndex:[{handleSelectedIndexUpdate:0}]}]);function a(){"undefined"!=typeof customElements&&["tds-navigation-tabs","tds-icon"].forEach((s=>{switch(s){case"tds-navigation-tabs":customElements.get(t(s))||customElements.define(t(s),r);break;case"tds-icon":customElements.get(t(s))||h()}}))}a();const n=r,c=a;export{n as TdsNavigationTabs,c as defineCustomElement}