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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,c as e,g as i,h as a,a as n,f as s}from"./p-c2c6299e.js";import{r as o,j as l,e as r}from"./p-c511b4fb.js";const c='<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 p=c;const b='<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 d=b;const h="pn-tab{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}pn-tab .pn-tab{position:relative;cursor:pointer;margin:1em 0.25em;padding:0 0.25em;border:none;border-radius:0.5em;color:#2d2013;background-color:transparent;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;display:flex;gap:0.5em;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tab .pn-tab .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-tab .pn-tab>span{line-height:1.5em}pn-tab .pn-tab>pn-icon>.pn-icon-svg path,pn-tab .pn-tab>pn-icon>.pn-icon-svg polygon{transition:fill 0.2s cubic-bezier(0.7, 0, 0.3, 1);fill:#2d2013}pn-tab .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}pn-tab .pn-tab[aria-selected=true],pn-tab .pn-tab[aria-current=page]{color:#005d92}pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg polygon{fill:#005d92}pn-tab .pn-tab[aria-selected=true]:focus,pn-tab .pn-tab[aria-current=page]:focus{color:#0d234b}pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg polygon{fill:#0d234b}";const f=h;const u=class{constructor(i){t(this,i);this.setActiveTab=e(this,"setActiveTab",7);this.tabEnter=e(this,"tabEnter",7);this.tabLeave=e(this,"tabLeave",7)}tag="button";get hostElement(){return i(this)}label;value;href;icon;ariacontrols;tabid;activeTab;setActiveTab;setActiveTabHandler({click:t=false,element:e}={}){if(t||this.isActive()){const t=e?.value||this.value;const i=e?.value&&e||this.hostElement;this.setActiveTab.emit({val:t,el:i})}}tabEnter;triggerEnter(t){this.tabEnter.emit(t)}tabLeave;triggerLeave(t){this.tabLeave.emit(t)}componentWillLoad(){this.tabTag()}componentDidUpdate(){this.setActiveTabHandler()}componentDidLoad(){this.setActiveTabHandler()}arrowKeyNav(t){if(!/^(ArrowRight|ArrowLeft|Home|End)$/.test(t.key))return;t.preventDefault();const e=t.target.closest("pn-tablist");const i=Array.from(e.querySelectorAll("pn-tab"));const a=i[0];const n=i[i.length-1];const s=this.hostElement.nextElementSibling;const o=this.hostElement.previousElementSibling;if(t.key==="Home")this.setActiveTabHandler({element:a});if(t.key==="End")this.setActiveTabHandler({element:n});if(t.key==="ArrowRight"){this.setActiveTabHandler({element:s?.value?s:a})}if(t.key==="ArrowLeft"){this.setActiveTabHandler({element:o?.value?o:n})}}isActive(){return this.activeTab===this.value}tabTag(){const t=this.hostElement.closest("pn-tablist");this.tag=t.slot==="menu"?"a":"button"}renderProperties(){return this.tag==="a"?{href:this.href,"aria-current":this.isActive()?"page":"false"}:{tabindex:this.isActive()?0:-1,type:"button",role:"tab","aria-selected":this.isActive().toString(),"aria-controls":this.ariacontrols}}handleClick(t){this.setActiveTabHandler({click:true});o(t,this.hostElement,".pn-tab")}render(){const t=this.tag;return a(n,{key:"6549002f64a0f289189a941e00bc3a7ed5d3dc35"},a(t,{key:"69b99a3df97967208a40c890a0b1001b2ea3cf64",id:this.tabid,class:"pn-tab",...this.renderProperties(),onClick:t=>this.handleClick(t),onMouseEnter:t=>this.triggerEnter(t),onFocus:t=>this.triggerEnter(t),onMouseLeave:t=>this.triggerLeave(t),onBlur:t=>this.triggerLeave(t),onKeyDown:t=>this.arrowKeyNav(t)},!!this.icon&&a("pn-icon",{key:"11f3063b3d4612fcf51dd9a9bfeca8ba8fdd353b",icon:this.icon}),a("slot",{key:"60f34de2c5407fec8d443765f10d839c00f6f8de"}),a("span",{key:"dae8cccba39a05351f61771c73a99beaaff94db2"},this.label)))}};u.style=f;const m={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 v="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 g=v;const y=class{constructor(i){t(this,i);this.tabchange=e(this,"tabchange",7)}mo;isMenu=false;isTabHovered=false;tabListEl;lineActive;lineHovered;tabElement;get hostElement(){return i(this)}showScrollArrows=false;arrowLeft=false;arrowRight=false;label;value;small;stackedicons=false;language=null;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)return 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,e=false){const i=this.getRect(this.tabListEl);const a=this.tabListEl.scrollLeft;const n=this.getRect(t);const s=n.width;const o=n.left+a-i.left;const l=e?"active":"hover";const r=e?"lineActive":"lineHovered";this[r].style.setProperty(`--pn-${l}-width`,`${s}px`);this[r].style.setProperty(`--pn-${l}-offset`,`${o}px`);this[r].style.setProperty(`--pn-${l}-opacity`,"1")}scrollIndicators(){const{scrollWidth:t,scrollLeft:e}=this.tabListEl;const{clientWidth:i}=this.hostElement;this.showScrollArrows=t>i;this.arrowLeft=this.showScrollArrows&&e>0;this.arrowRight=this.showScrollArrows&&i+16+e<t}scroll({right:t=false}={}){const e=this.tabListEl;const{scrollLeft:i,clientWidth:a}=e;let n=i;const s=a-64;if(t)n+=s;else n-=s;e.scrollTo({left:n,behavior:"smooth"})}translate(t){return m?.[t]?.[this.language||r]}render(){return a(n,{key:"4d0d29f48ee2952b58fdae8738795e3247c7257e"},a("nav",{key:"c1efeea1978a6157572652e7ff8ad7a9d9905f5b",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},a("slot",{key:"bd1d7ddee497d0c737e254d97dfda435964cfbb3"}),a("div",{key:"660b591ce4d462c7d390b4479094fb2452ef9dbd",class:"pn-line"},a("div",{key:"daf52564a72d07a7fbb29e77752a9ec1e4cc2289",ref:t=>this.lineActive=t,class:"pn-line-item pn-line-active"}),a("div",{key:"fcdf804b3b6589b9e971bd72b033741c34874989",ref:t=>this.lineHovered=t,class:"pn-line-item pn-line-hovered"}))),a("div",{key:"e46e9ba8bdf7334ed5f6ca82499e97a798cb2bfb",class:"pn-scroll-arrows"},a("pn-button",{key:"54b83c42942c072976e39d222957f673eb8015ac",class:"pn-arrow","data-show":this.arrowLeft,onClick:()=>this.scroll(),noTab:true,appearance:"light",variant:"outlined",icon:p,iconOnly:true,arialabel:this.translate("LEFT"),small:true}),a("pn-button",{key:"bc171ec91d1025111a7ec8f16549be969ac8e55b",class:"pn-arrow","data-show":this.arrowRight,onClick:()=>this.scroll({right:true}),noTab:true,appearance:"light",variant:"outlined",icon:d,iconOnly:true,arialabel:this.translate("RIGHT"),small:true})))}static get watchers(){return{value:["setValue"],showScrollArrows:["scrollHandler"]}}};y.style=g;export{u as pn_tab,y as pn_tablist};
//# sourceMappingURL=p-d44a4f96.entry.js.map