https://www.postnord.com/dist/client/pn-page-nav.entry-20260923.js

1var c=Object.defineProperty;var h=(e,t,a)=>t in e?c(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a;var n=(e,t,a)=>h(e,typeof t!="symbol"?t+"":t,a);import{r as v,c as f,g as w,t as o,f as g,h as r,H as u}from"./client-20260923.js";import{u as m}from"./index-202609233.js";import{a as b}from"./arrow_left-CQaMdITw-20260923.js";import{a as y}from"./arrow_right-D_UyW-KH-20260923.js";import{c as k}from"./chevron_down-DrYFvs2M-20260923.js";import"./preload-helper-20260923.js";import"./helpers-20260923.js";import"./index-20260923.js";import"./index-202609232.js";/*!
2 * Built with Stencil
3 * By PostNord.
4 */const E=()=>`${o("pn-page-nav")}{display:block;position:relative;font-size:clamp(0.8em, 2vw, 1em);z-index:5}.pn-page-nav-wrapper{transform:translateZ(0);font-size:inherit;max-width:100%;overflow:hidden;position:relative;display:inline-flex;border-radius:3em}.pn-page-nav{display:flex;align-items:center;border-radius:3em;min-height:3em;background:#0d234b;border:0.0625em solid #d3cecb;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}.pn-page-nav::-webkit-scrollbar{display:none}.pn-page-nav ul.pn-page-nav-items{display:flex;list-style-type:none;padding:0.25em;margin:0;position:relative}.pn-page-nav-items>.pn-pn-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:3em;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s}.pn-page-nav-items>.pn-pn-bg.pn-pn-active{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);background:#005d92;z-index:1}.pn-page-nav-items>.pn-pn-bg.pn-pn-hover{background:#ffffff;opacity:0;border:0.0625em solid transparent;z-index:0}.pn-page-nav-items>.pn-pn-bg.hidden{opacity:0}

4@media (hover: hover){ul.pn-page-nav-items:focus-within .pn-pn-hover,ul.pn-page-nav-items:hover .pn-pn-hover{opacity:0.12}}${o("pn-page-nav")} .pn-pn-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding:0.125em 0.1em}${o("pn-page-nav")} .pn-pn-arrows svg{width:1.5em}${o("pn-page-nav")} .pn-pn-arrows svg.pn-icon-svg path{fill:#005d92}${o("pn-page-nav")} .pn-pn-arrows>*{transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;pointer-events:all;height:100%;aspect-ratio:1;background:#ffffff;display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;border-radius:50%;border:0.0625em solid #0d234b}${o("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-left{transform:translateX(-100%)}${o("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-right{transform:translateX(100%)}@media screen and (max-width: 30em){${o("pn-page-nav")} .pn-pn-arrows>*{border:none}${o("pn-page-nav")} .pn-pn-arrows>* ${o("pn-icon")} .pn-icon-svg{width:100%;height:2em;animation:arrow 0.6s ease-in-out alternate infinite}${o("pn-page-nav")} .pn-pn-arrows>* ${o("pn-icon")} .pn-icon-svg path{fill:#ffffff}${o("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-left{background:linear-gradient(to left, transparent, #0d234b 60%);border-radius:50% 0 0 50%}${o("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-right{background:linear-gradient(to right, transparent, #0d234b 40%);border-radius:0 50% 50% 0}}${o("pn-page-nav")} .pn-pn-arrows.pn-pn-left-visible .pn-pn-arrow-left,${o("pn-page-nav")} .pn-pn-arrows.pn-pn-right-visible .pn-pn-arrow-right{opacity:1;transform:translateX(0)}@keyframes arrow{to{transform:translateX(10%)}}button.pn-page-nav-dropdown-button{font-size:1em;border-radius:3em 0 0 3em;background:#0d234b;color:#ffffff;padding:0.5em 1em 0.5em 1.5em;cursor:pointer;display:flex;align-items:center;border:none;transition:background 0.15s;outline:none;height:100%;position:relative;margin:0 0.5em 0 0;font-weight:500}button.pn-page-nav-dropdown-button ${o("pn-icon")}{margin-left:0.5em}button.pn-page-nav-dropdown-button:hover,button.pn-page-nav-dropdown-button:focus{background:#263655}button.pn-page-nav-dropdown-button:focus{box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active{background:#005d92}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:hover,button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:focus{background:#005d92}.pn-page-nav-divider{height:60%;background:#d3cecb;width:0.1em;position:absolute;right:0;transform:translateX(50%)}ul.pn-page-nav-dropdown{position:absolute;left:0;top:110%;background:#0d234b;border-radius:0.5em;margin:0;padding:0;list-style-type:none;box-shadow:0px 6.4000000954px 14.3999996185px 0px rgba(0, 0, 0, 0.1294117647), 0px 1.2000000477px 3.5999999046px 0px rgba(0, 0, 0, 0.1019607843);font-size:inherit;display:none}ul.pn-page-nav-dropdown.pn-page-nav-dropdown-open{display:block}`,A=class{constructor(e){n(this,"mo");n(this,"navContainer");n(this,"navWrapper");n(this,"navItems",[]);n(this,"dropdownButton");n(this,"dropdownEl");n(this,"dropdownItems");n(this,"dropdownEls");n(this,"eventHandler",this.keyboardEvents.bind(this));n(this,"globalEventHandler",this.globalEvents.bind(this));n(this,"activeBg");n(this,"hoverBg");n(this,"scrollRegistered",!1);n(this,"currentSelection");n(this,"showScrollArrows",!1);n(this,"showLeftArrow",!1);n(this,"showRightArrow",!1);n(this,"dropdownOpen",!1);n(this,"dropdownLinks",[]);n(this,"dropdownActive",!1);n(this,"value");n(this,"dropdown",!1);n(this,"navid",`pn-page-nav-${m()}`);n(this,"navchange");v(this,e),this.navchange=f(this,"navchange",7)}get hostElement(){return w(this)}changeHandler({target:e}){this.currentSelection=e.closest(`${o("pn-page-nav-item")}`),e.value&&(this.value=e.value),this.dropdownOpen&&(this.dropdownOpen=!1)}handleResize(){this.rerender()}valueHandler(){this.value||(this.currentSelection=null),this.calcHighlight(this.currentSelection,this.activeBg),this.navchange.emit(this.value),this.dropdownActive&&this.isDropdownItemActive()}dropdownHandler(){if(this.dropdownOpen){requestAnimationFrame(()=>{this.addGlobalEventListeners()});return}this.removeGlobalEventListeners()}componentWillLoad(){this.dropdown&&(this.dropdownEls=Array.from(this.hostElement.querySelectorAll(`${o("pn-page-nav-dropdown-item")}`)),this.dropdownEls.length&&(this.dropdownActive=!0,this.initiateDropdown()))}componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver(()=>

4{g(this.hostElement),this.setActiveNavItem(),this.rerender()}),this.mo.observe(this.hostElement,{childList:!0,subtree:!0}),this.navWrapper=this.hostElement.querySelector(".pn-page-nav"),this.navContainer=this.hostElement.querySelector(".pn-page-nav-items"),this.activeBg=this.hostElement.querySelector(".pn-pn-active"),this.hoverBg=this.hostElement.querySelector(".pn-pn-hover"),this.hostElement.addEventListener("mouseover",({target:e})=>this.calcHighlight(e,this.hoverBg)),this.setActiveNavItem(),this.rerender()}setActiveNavItem(){this.navItems=Array.from(this.hostElement.querySelectorAll(`${o("pn-page-nav-item")}`)),this.navItems.forEach(e=>{this.value===e.value?this.currentSelection=e:e.removeAttribute("selected"),e.querySelector("a").addEventListener("focus",({target:t})=>this.calcHighlight(t,this.hoverBg))}),this.dropdownActive&&(this.dropdownItems=Array.from(this.hostElement.querySelectorAll(".pn-page-nav-dropdown-item")),this.isDropdownItemActive(),this.dropdownLinks=this.dropdownItems.map((e,t)=>(e.setAttribute("data-index",`${t}`),e.closest(`${o("pn-page-nav-dropdown-item")}`).value)))}rerender(){requestAnimationFrame(()=>{this.calcHighlight(this.currentSelection,this.activeBg),this.scrollArrowRender()})}calcHighlight(e,t){if(!(e!=null&&e.closest(`${o("pn-page-nav-item")}`))){t==null||t.classList.add("hidden");return}t&&t.classList.remove("hidden");const a=e.closest(`${o("pn-page-nav-item")}`).getBoundingClientRect(),{left:s}=this.navContainer.getBoundingClientRect(),{left:i,height:p,width:d}=a,l=i-s+this.navContainer.scrollLeft;t.style.setProperty("transform",`translate(${l}px, -50%`),t.style.setProperty("width",`${d}px`),t.style.setProperty("height",`${p}px`)}scrollArrowRender(){if(this.navWrapper){if(this.navWrapper.scrollWidth>this.navWrapper.clientWidth){this.showScrollArrows=!0,this.scrollRegistered||(this.navWrapper.addEventListener("scroll",this.scrollArrowRender.bind(this)),this.scrollRegistered=!0);const t=Math.round(this.navWrapper.scrollWidth-this.navWrapper.scrollLeft)-this.navWrapper.clientWidth,a=this.navWrapper.scrollLeft;this.showLeftArrow=a>0,this.showRightArrow=t>0;return}this.showLeftArrow=!1,this.showRightArrow=!1,this.showScrollArrows=!1}}scroll(e){let t=this.navWrapper.scrollLeft+e;this.navWrapper.scroll({left:t,behavior:"smooth"})}scrollArrowClasses(){let e="pn-pn-arrows ";return this.showLeftArrow&&(e+="pn-pn-left-visible "),this.showRightArrow&&(e+="pn-pn-right-visible "),e}initiateDropdown(){requestAnimationFrame(()=>{this.dropdownButton=this.hostElement.querySelector(".pn-page-nav-dropdown-button"),this.dropdownEl=this.hostElement.querySelector(".pn-page-nav-dropdown"),this.addDropdownEventListeners()})}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen}isDropdownItemActive(){this.dropdownEls.forEach(e=>{if(e.value&&this.value===e.value){e.setAttribute("active","true");return}e.removeAttribute("active")})}addDropdownEventListeners(){this.hostElement.addEventListener("keydown",this.eventHandler),this.hostElement.addEventListener("click",this.eventHandler)}addGlobalEventListeners(){const e=this.hostElement.getRootNode();e.addEventListener("focusin",this.globalEventHandler),e.addEventListener("keydown",this.globalEventHandler),e.addEventListener("click",this.globalEventHandler)}removeGlobalEventListeners(){const e=this.hostElement.getRootNode();e.removeEventListener("focusin",this.globalEventHandler),e.removeEventListener("keydown",this.globalEventHandler),e.removeEventListener("click",this.globalEventHandler)}keyboardEvents(e){const t=e.composedPath()[0];e.type==="keydown"&&!this.dropdownOpen&&t===this.dropdownButton&&["ArrowUp","ArrowDown"].includes(e.code)&&(this.dropdownOpen=!0,requestAnimationFrame(()=>{this.focusNextDropdownItem()}))}globalEvents(e){const t=e.composedPath()[0];e.type==="keydown"&&e.code==="Escape"&&(this.dropdownOpen=!1,this.dropdownButton.focus()),e.code==="ArrowDown"&&this.focusNextDropdownItem(),e.code==="ArrowUp"&&this.focusPrevDropdownItem(),(e.type==="click"||e.type==="focusin")&&!this.dropdownEl.contains(t)&&(this.dropdownOpen=!1)}focusNextDropdownItem(){const{activeElement:e}=this.hostElement.getRootNode();if(!e.classList.contains("pn-page-nav-dropdown-item")){this.dropdownItems[0].focus();return}const t=parseInt(e.getAttribute("data-index"));t<this.dropdownItems.length-1&&this.dropdownItems[t+1].focus()}focusPrevDropdownItem(){const{activeElement:e}=this.hostElement.getRootNode();e.classList.contains("dropdown-item")||this.dropdownItems[this.dropdownItems.length-1].focus();const t=parseInt(e.getAttribute("data-index"));if(t>0){this.dropdownItems[t-1].focus();return}this.dropdownButton.focus()}

4dropdownButtonClasses(){let e="pn-page-nav-dropdown-button ";return this.dropdownLinks.includes(this.value)&&(e+="pn-page-nav-dropdown-active "),e}dropdownClasses(){let e="pn-page-nav-dropdown ";return this.dropdownOpen&&(e+="pn-page-nav-dropdown-open "),e}render(){return r(u,{key:"57c1d7248ca2704b6acf675cfd9648d5d2afcf60"},r("div",{key:"b02d7389cb66d185ff1d72674a3ce2d2c3a81e76",class:"pn-page-nav-wrapper"},r("nav",{key:"60d1d6974945dd5971a967d92886c4c4a3a5b4ff",class:"pn-page-nav"},this.dropdownActive&&r("button",{key:"6ce020ca42332cd760c410b6144f2317fa95f239",type:"button",class:this.dropdownButtonClasses(),onClick:()=>this.toggleDropdown(),"aria-controls":"page-nav-dropdown","aria-expanded":`${this.dropdownOpen}`},this.dropdown,r("pn-icon",{key:"d2b750dc24022e5b1b5425b4b2a76dcba0c26c69",icon:k,color:"white",small:!0}),r("div",{key:"1257070fcbcfcbe08142b379466f7fd7dc3d37ee",class:"pn-page-nav-divider"})),r("ul",{key:"d72c186854c5a679bb9395c7aa9f0dfe469b8f14",class:"pn-page-nav-items"},r("slot",{key:"ba7a508c841b594466bdadf1bf904cadef5b2bc9"}),r("li",{key:"c50294022952d8168886d816509a0297c262071c",class:"pn-pn-bg pn-pn-active",role:"presentation"}),r("li",{key:"a2dfc8bb63575feabb0a58caae1e8ae76e873943",class:"pn-pn-bg pn-pn-hover",role:"presentation"}))),this.showScrollArrows&&r("div",{key:"5e99c2cc1d1122091b2286e4fd9c54cb0734fb59",class:this.scrollArrowClasses()},r("button",{key:"a92f375c45a6705154b58dd5ca8df03cf6010a6f",class:"pn-pn-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},r("pn-icon",{key:"58413aff678f1b3a4d17a3693261fc9f3110d8cc",icon:b,color:"white"})),r("button",{key:"2a83e1480087752eacebdf5c35fcfbea3fa3cb8d",class:"pn-pn-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},r("pn-icon",{key:"fde8949b978be59ae2d9c5ab44ce286b72c35790",icon:y,color:"blue700"})))),this.dropdownActive&&r("ul",{key:"802117bef707c98683b3ed30449897ac13d6af05",id:this.navid,class:this.dropdownClasses()},r("slot",{key:"414852b90620a09a11f9a4c3b1d7d4809b6f8487",name:"dropdown-item"})))}static get watchers(){return{value:[{valueHandler:0}],dropdownOpen:[{dropdownHandler:0}]}}};A.style=E();export{A as pn_page_nav};