@scania/tegel 1.51.0 → 1.52.0

package/dist/components/tds-navigation-tabs.js

@@ -1 +1 @@
-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-DMVs7mmW.js";const a=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=()=>{if("undefined"==typeof ResizeObserver)return;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:"0817601e2f5ca452bef28d7ffdeabf00ba49518b",role:"tablist",class:{["tds-mode-variant-"+this.modeVariant]:null!==this.modeVariant}},o("div",{key:"9a0c29efcbd7120760a0eb0946343d4aceb963ec",class:"wrapper",ref:t=>{this.navWrapperElement=t},style:{paddingLeft:this.leftPadding+"px"}},o("button",{key:"2283540cb7864e70445dd3303a9e617cabd5c1a3","aria-label":this.tdsScrollLeftAriaLabel,class:{"scroll-left-button":!0,show:this.showLeftScroll},onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},o("tds-icon",{key:"4de2e1da1fd959ae3ffe5f93298574b3a161f75d",name:"chevron_left",size:"20px"})),o("slot",{key:"cb72d39a1d8f8e0289244cd023311e211ec148e5",onSlotchange:()=>this.handleSlotChange()}),o("button",{key:"52e0ea24de069a6020e7902ea7222b6f52dc9895","aria-label":this.tdsScrollRightAriaLabel,class:{"scroll-right-button":!0,show:this.showRightScroll},onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},o("tds-icon",{key:"4a4a3a5234d74decb2106f902365b39c20977066",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:[513,"mode-variant"],defaultSelectedIndex:[514,"default-selected-index"],selectedIndex:[514,"selected-index"],leftPadding:[514,"left-padding"],tdsScrollLeftAriaLabel:[513,"tds-scroll-left-aria-label"],tdsScrollRightAriaLabel:[513,"tds-scroll-right-aria-label"],showLeftScroll:[32],showRightScroll:[32],selectTab:[64],reinitialize:[64]},void 0,{selectedIndex:[{handleSelectedIndexUpdate:0}]}]);function r(){"undefined"!=typeof customElements&&["tds-navigation-tabs","tds-icon"].forEach((s=>{switch(s){case"tds-navigation-tabs":customElements.get(t(s))||customElements.define(t(s),a);break;case"tds-icon":customElements.get(t(s))||h()}}))}r();const n=a,c=r;export{n as TdsNavigationTabs,c as defineCustomElement}
+import{t,p as s,H as e,c as i,h as o,a as l}from"./index.js";import{d as a}from"./p-DMVs7mmW.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=()=>{if("undefined"==typeof ResizeObserver)return;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)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return o(l,{key:"15c4bdd05aa8bcac2840a3f95b380ab03698428b",role:"tablist",class:{["tds-mode-variant-"+this.modeVariant]:null!==this.modeVariant},style:{"--padding-left":this.leftPadding+"px"}},o("div",{key:"55e2cc99927d5483c94cee6b15c651d77fdbfc52",class:"wrapper",ref:t=>{this.navWrapperElement=t}},o("button",{key:"f8ad88de0b631afc63ec51a20accb49b5d8f4334","aria-label":this.tdsScrollLeftAriaLabel,class:{"scroll-left-button":!0,show:this.showLeftScroll},onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},o("tds-icon",{key:"19201f741465bff936960c4c6d8cb4f35317f648",name:"chevron_left",size:"20px"})),o("slot",{key:"f54a35402ec90a5e2cccfa4b5f51f56b95882e43",onSlotchange:()=>this.handleSlotChange()}),o("button",{key:"3d4d90efd57fb27de82491aab28e7e98674ddbdf","aria-label":this.tdsScrollRightAriaLabel,class:{"scroll-right-button":!0,show:this.showRightScroll},onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},o("tds-icon",{key:"6ac4687c083d820662deea8d39b4b42cc0ab5a8d",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;--padding-left:0;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;padding-left:var(--padding-left)}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:calc(0px - var(--padding-left));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;inset: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:[513,"mode-variant"],defaultSelectedIndex:[514,"default-selected-index"],selectedIndex:[514,"selected-index"],leftPadding:[514,"left-padding"],tdsScrollLeftAriaLabel:[513,"tds-scroll-left-aria-label"],tdsScrollRightAriaLabel:[513,"tds-scroll-right-aria-label"],showLeftScroll:[32],showRightScroll:[32],selectTab:[64],reinitialize:[64]},void 0,{selectedIndex:[{handleSelectedIndexUpdate:0}]}]);function h(){"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))||a()}}))}h();const n=r,c=h;export{n as TdsNavigationTabs,c as defineCustomElement}