https://www.postnord.com/dist/client/pn-tablist.entry-20261001.js

1var d=Object.defineProperty;var m=(t,a,i)=>a in t?d(t,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[a]=i;var s=(t,a,i)=>m(t,typeof a!="symbol"?a+"":a,i);import{r as f,c as u,g as v,f as y,h as l,H as g,t as e}from"./client-20261001.js";import{a as w,c as $}from"./chevron_right-B6SVpr61-20261001.js";import{b as L,e as k}from"./index-202610013.js";import"./preload-helper-20261001.js";import"./helpers-20261001.js";import"./index-20261001.js";import"./index-202610012.js";/*!
2 * Built with Stencil
3 * By PostNord.
4 */var h={LEFT:{sv:"Bläddra åt vänster",en:"Scroll to the left",da:"Rul til venstre",fi:"Vieritä vasemmalle",no:"Rull til venstre"},RIGHT:{sv:"Bläddra åt höger",en:"Scroll to the right",da:"Rul til højre",fi:"Vieritä oikealle",no:"Rull til høyre"}};const E=()=>`${e("pn-tablist")}{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}${e("pn-tablist")} .pn-tablist,${e("pn-tablist")} ol,${e("pn-tablist")} ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}${e("pn-tablist")} .pn-tablist[data-stacked] .pn-tab,${e("pn-tablist")} ol[data-stacked] .pn-tab,${e("pn-tablist")} ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}${e("pn-tablist")} .pn-tablist[data-small] .pn-tab,${e("pn-tablist")} ol[data-small] .pn-tab,${e("pn-tablist")} ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}${e("pn-tablist")} .pn-tablist[data-small] .pn-tab>*:not(${e("pn-icon")}),${e("pn-tablist")} ol[data-small] .pn-tab>*:not(${e("pn-icon")}),${e("pn-tablist")} ul[data-small] .pn-tab>*:not(${e("pn-icon")}){font-size:0.875em}${e("pn-tablist")} .pn-tablist[data-large] .pn-tab>*:not(${e("pn-icon")}),${e("pn-tablist")} ol[data-large] .pn-tab>*:not(${e("pn-icon")}),${e("pn-tablist")} ul[data-large] .pn-tab>*:not(${e("pn-icon")}){font-size:1.25em}${e("pn-tablist")} .pn-tablist[data-scroll],${e("pn-tablist")} ol[data-scroll],${e("pn-tablist")} ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}${e("pn-tablist")} .pn-tablist::-webkit-scrollbar,${e("pn-tablist")} ol::-webkit-scrollbar,${e("pn-tablist")} ul::-webkit-scrollbar{display:none}${e("pn-tablist")} .pn-tablist-line{height:0.25em;position:absolute;bottom:0}${e("pn-tablist")} .pn-tablist-line-item{position:absolute;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;transform-origin:left center;opacity:0;transition-property:transform, opacity, width;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-tablist")} .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}${e("pn-tablist")} .pn-tablist-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}${e("pn-tablist")} .pn-tablist-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}${e("pn-tablist")} .pn-tablist-scroll{position:absolute;top:50%;left:0;right:0;pointer-events:none;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:1;height:100%}${e("pn-tablist")} .pn-tablist-arrow{pointer-events:all;transform:scaleY(0);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-tablist")} .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}${e("pn-tablist")} .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}`,T=class{constructor(t){s(this,"mo");s(this,"isMenu",!1);s(this,"isTabHovered",!1);s(this,"tabListEl");s(this,"lineActive");s(this,"lineHovered");s(this,"tabElement");s(this,"showScrollArrows",!1);s(this,"arrowLeft",!1);s(this,"arrowRight",!1);s(this,"label");s(this,"value");s(this,"small");s(this,"stackedicons",!1);s(this,"language",null);s(this,"tabchange");f(this,t),this.tabchange=u(this,"tabchange",7)}get hostElement(){return v(this)}setValue(){const t=e("pn-tab");

4Array.from(this.hostElement.querySelectorAll(t)).forEach(i=>{i.activeTab=this.value})}scrollHandler(){this.showScrollArrows?this.tabListEl.addEventListener("scroll",this.scrollIndicators.bind(this)):this.tabListEl.removeEventListener("scroll",this.scrollIndicators)}setActiveTabHandler({detail:t}){this.tabElement=t.el,requestAnimationFrame(()=>this.activateTab(t.el)),this.value!==t.val&&(this.value=t.val,this.tabchange.emit(this.value),this.tabElement.querySelector(".pn-tab").focus())}rerender(){requestAnimationFrame(()=>{this.scrollIndicators(),this.isTabHovered=!1})}handleEnter(t){this.isTabHovered=!0,this.styleLines(t.target)}handleLeave(){this.isTabHovered=!1,setTimeout(()=>{this.isTabHovered||this.lineHovered.style.setProperty("--pn-hover-opacity","0")},500)}connectedCallback(){this.mo=new MutationObserver(()=>{y(this.hostElement),this.setValue(),this.rerender()}),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){var t;(t=this.mo)==null||t.disconnect()}async componentWillLoad(){this.isMenu=this.hostElement.slot==="menu",this.language===null&&await L(this.hostElement)}componentDidRender(){this.setValue(),this.rerender()}getRect(t){return t.getBoundingClientRect()}activateTab(t){this.styleLines(t,!0),this.styleLines(t,!1)}styleLines(t,a=!1){const i=this.getRect(this.tabListEl),o=this.tabListEl.scrollLeft,n=this.getRect(t),r=n.width,p=n.left+o-i.left,c=a?"active":"hover",b=a?"lineActive":"lineHovered";this[b].style.setProperty(`--pn-${c}-width`,`${r}px`),this[b].style.setProperty(`--pn-${c}-offset`,`${p}px`),this[b].style.setProperty(`--pn-${c}-opacity`,"1")}scrollIndicators(){const{scrollWidth:t,scrollLeft:a}=this.tabListEl,{clientWidth:i}=this.hostElement;this.showScrollArrows=t>i,this.arrowLeft=this.showScrollArrows&&a>0,this.arrowRight=this.showScrollArrows&&i+16+a<t}scroll({right:t=!1}={}){const a=this.tabListEl,{scrollLeft:i,clientWidth:o}=a;let n=i;const r=o-64;t?n+=r:n-=r,a.scrollTo({left:n,behavior:"smooth"})}translate(t){var a;return(a=h==null?void 0:h[t])==null?void 0:a[this.language||k]}render(){return l(g,{key:"5e8d5b627e77c77e6de6bc560695f1acd5b1630d"},l("nav",{key:"a33459d6510b75b5fc72674ab18606c4806a4058",class:"pn-tablist",role:this.isMenu?null:"tablist","aria-label":this.label,"data-stacked":this.stackedicons,"data-small":!this.isMenu&&this.small,"data-large":this.isMenu,"data-scroll":this.showScrollArrows,ref:t=>this.tabListEl=t},l("slot",{key:"7bc0071b838903823c0c687385cd7d3311e83111"}),l("div",{key:"50a05b5c23f05341728a941f3285e33c0b4dea0b",class:"pn-tablist-line"},l("div",{key:"9f838979792831b3283e35e60328ef406a52115e",ref:t=>this.lineActive=t,class:"pn-tablist-line-item pn-tablist-line-active"}),l("div",{key:"06c6f200d2aa9eab372bcf5eee3b903864b2b7ff",ref:t=>this.lineHovered=t,class:"pn-tablist-line-item pn-tablist-line-hovered"}))),l("div",{key:"a43537577c3442186c66418cbaa26d48547c0828",class:"pn-tablist-scroll"},l("pn-button",{key:"7881274a4cffa56529a8c1684d38d7bc3af7ac66",class:"pn-tablist-arrow","data-show":this.arrowLeft,onClick:()=>this.scroll(),noTab:!0,appearance:"light",variant:"outlined",icon:w,iconOnly:!0,arialabel:this.translate("LEFT"),small:!0}),l("pn-button",{key:"0f38bf167cf2c8784242439c43950e5608699bed",class:"pn-tablist-arrow","data-show":this.arrowRight,onClick:()=>this.scroll({right:!0}),noTab:!0,appearance:"light",variant:"outlined",icon:$,iconOnly:!0,arialabel:this.translate("RIGHT"),small:!0})))}static get watchers(){return{value:[{setValue:0}],showScrollArrows:[{scrollHandler:0}]}}};T.style=E();export{T as pn_tablist};