@postnord/web-components/postnord-web-components/p-f0cf5e1c.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,c as i,g as a,f as s,h as e,a as n}from"./p-43660913.js";import{j as l,e as o}from"./p-c511b4fb.js";const r='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z" clip-rule="evenodd"/></svg>';const c=r;const p='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z" clip-rule="evenodd"/></svg>';const h=p;const d={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 b="pn-tablist{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}pn-tablist .pn-tablist,pn-tablist ol,pn-tablist ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}pn-tablist .pn-tablist[data-stacked] .pn-tab,pn-tablist ol[data-stacked] .pn-tab,pn-tablist ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}pn-tablist .pn-tablist[data-small] .pn-tab,pn-tablist ol[data-small] .pn-tab,pn-tablist ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}pn-tablist .pn-tablist[data-small] .pn-tab>*:not(pn-icon),pn-tablist ol[data-small] .pn-tab>*:not(pn-icon),pn-tablist ul[data-small] .pn-tab>*:not(pn-icon){font-size:0.875em}pn-tablist .pn-tablist[data-large] .pn-tab>*:not(pn-icon),pn-tablist ol[data-large] .pn-tab>*:not(pn-icon),pn-tablist ul[data-large] .pn-tab>*:not(pn-icon){font-size:1.25em}pn-tablist .pn-tablist[data-scroll],pn-tablist ol[data-scroll],pn-tablist ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}pn-tablist .pn-tablist::-webkit-scrollbar,pn-tablist ol::-webkit-scrollbar,pn-tablist ul::-webkit-scrollbar{display:none}pn-tablist>.pn-scroll-arrows{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%}pn-tablist>.pn-scroll-arrows>.pn-arrow{pointer-events:all;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transform:scaleY(0);opacity:0;visibility:hidden}pn-tablist>.pn-scroll-arrows>.pn-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}pn-tablist .pn-line{height:0.25em;position:absolute;bottom:0}pn-tablist .pn-line-item{position:absolute;transform-origin:left center;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;opacity:0;transition-property:transform, width, opacity;transition-duration:0.3s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-tablist .pn-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}pn-tablist .pn-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}";const f=b;const u=class{constructor(a){t(this,a);this.tabchange=i(this,"tabchange",7);this.showScrollArrows=false;this.arrowLeft=false;this.arrowRight=false;this.label=undefined;this.value=undefined;this.small=undefined;this.stackedicons=false;this.language=null}mo;isMenu=false;isTabHovered=false;tabListEl;lineActive;lineHovered;tabElement;get hostElement(){return a(this)}tabchange;setValue(){const t=Array.from(this.hostElement.querySelectorAll("pn-tab"));t.forEach((t=>{t.activeTab=this.value}))}scrollHandler(){if(this.showScrollArrows){this.tabListEl.addEventListener("scroll",this.scrollIndicators.bind(this))}else{this.tabListEl.removeEventListener("scroll",this.scrollIndicators)}}setActiveTabHandler({detail:t}){this.tabElement=t.el;requestAnimationFrame((()=>this.activateTab(t.el)));if(this.value===t.val)return;this.value=t.val;this.tabchange.emit(this.value);this.tabElement.querySelector(this.isMenu?"a":"button").focus()}rerender(){requestAnimationFrame((()=>{this.scrollIndicators();this.isTabHovered=false}))}handleEnter(t){this.isTabHovered=true;this.styleLines(t.target)}handleLeave(){this.isTabHovered=false;setTimeout((()=>{if(!this.isTabHovered)this.lineHovered.style.setProperty("--pn-hover-opacity","0")}),500)}async componentWillLoad(){this.isMenu=this.hostElement.slot==="menu";if(this.language===null)await l(this.hostElement)}componentDidLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>{s(this.hostElement);this.rerender()}));this.mo.observe(this.hostElement,{childList:true,subtree:true})}componentDidRender(){this.rerender();this.setValue()}getRect(t){return t.getBoundingClientRect()}activateTab(t){this.styleLines(t,true)}styleLines(t,i=false){const a=this.getRect(this.tabListEl);const s=this.tabListEl.scrollLeft;const e=this.getRect(t);const n=e.width;const l=e.left+s-a.left;const o=i?"active":"hover";const r=i?"lineActive":"lineHovered";this[r].style.setProperty(`--pn-${o}-width`,`${n}px`);this[r].style.setProperty(`--pn-${o}-offset`,`${l}px`);this[r].style.setProperty(`--pn-${o}-opacity`,"1")}scrollIndicators(){const{scrollWidth:t,scrollLeft:i}=this.tabListEl;const{clientWidth:a}=this.hostElement;this.showScrollArrows=t>a;this.arrowLeft=this.showScrollArrows&&i>0;this.arrowRight=this.showScrollArrows&&a+16+i<t}scroll({right:t=false}={}){const i=this.tabListEl;const{scrollLeft:a,clientWidth:s}=i;let e=a;const n=s-64;if(t)e+=n;else e-=n;i.scrollTo({left:e,behavior:"smooth"})}translate(t){return d?.[t]?.[this.language||o]}render(){return e(n,{key:"443c87a427ed5ff701fe1334f531f22c052c4b2e"},e("nav",{key:"1460f6f94cb54b1f72e8c81a8f13cb8bc57624ba",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},e("slot",{key:"4253824a84a33c1262c2e551af17a75fdedb73dd"}),e("div",{key:"592caba939bba39c822e85edb2b45d974db2f1ba",class:"pn-line"},e("div",{key:"3c29c82373e44fb3823b1308237710c84269c444",ref:t=>this.lineActive=t,class:"pn-line-item pn-line-active"}),e("div",{key:"39b8827aa624826a19d1eb396521982c39a9399d",ref:t=>this.lineHovered=t,class:"pn-line-item pn-line-hovered"}))),e("div",{key:"5a2a0f6bc02e0aa190a1c075e24f5ab953f0c74d",class:"pn-scroll-arrows"},e("pn-button",{key:"8e0da8dfb83184106c0a0674910f288783f3585f",class:"pn-arrow","data-show":this.arrowLeft,onClick:()=>this.scroll(),noTab:true,appearance:"light",variant:"outlined",icon:c,iconOnly:true,arialabel:this.translate("LEFT"),small:true}),e("pn-button",{key:"f8e4bc2a947ac9e42b60731d79b70769bb14f30b",class:"pn-arrow","data-show":this.arrowRight,onClick:()=>this.scroll({right:true}),noTab:true,appearance:"light",variant:"outlined",icon:h,iconOnly:true,arialabel:this.translate("RIGHT"),small:true})))}static get watchers(){return{value:["setValue"],showScrollArrows:["scrollHandler"]}}};u.style=f;export{u as pn_tablist};
//# sourceMappingURL=p-f0cf5e1c.entry.js.map