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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as n,c as t,g as e,f as a,h as i,a as s}from"./p-43660913.js";import{u as o}from"./p-f64d17a6.js";import{a as r}from"./p-bf967b50.js";import{a as p}from"./p-2e6481e5.js";import{a as d}from"./p-d82ef4a1.js";const h="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}@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}}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}pn-page-nav .pn-pn-arrows svg{width:1.5em}pn-page-nav .pn-pn-arrows svg.pn-icon-svg path{fill:#005d92}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}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-left{transform:translateX(-100%)}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-right{transform:translateX(100%)}@media screen and (max-width: 30em){pn-page-nav .pn-pn-arrows>*{border:none}pn-page-nav .pn-pn-arrows>* pn-icon .pn-icon-svg{width:100%;height:2em;animation:arrow 0.6s ease-in-out alternate infinite}pn-page-nav .pn-pn-arrows>* pn-icon .pn-icon-svg path{fill:#ffffff}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-left{background:linear-gradient(to left, transparent, #0d234b 60%);border-radius:50% 0 0 50%}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-right{background:linear-gradient(to right, transparent, #0d234b 40%);border-radius:0 50% 50% 0}}pn-page-nav .pn-pn-arrows.pn-pn-left-visible .pn-pn-arrow-left,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 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}";const l=h;const c=class{constructor(e){n(this,e);this.navchange=t(this,"navchange",7);this.currentSelection=undefined;this.showScrollArrows=false;this.showLeftArrow=false;this.showRightArrow=false;this.dropdownOpen=false;this.dropdownLinks=[];this.dropdownActive=false;this.value=undefined;this.dropdown=false;this.navid=`pn-page-nav-${o()}`}mo;navContainer;navWrapper;navItems=[];dropdownButton;dropdownEl;dropdownItems;dropdownEls;eventHandler=this.keyboardEvents.bind(this);globalEventHandler=this.globalEvents.bind(this);activeBg;hoverBg;scrollRegistered=false;get hostElement(){return e(this)}navchange;changeHandler({target:n}){this.currentSelection=n.closest("pn-page-nav-item");if(n.value)this.value=n.value;if(this.dropdownOpen)this.dropdownOpen=false}handleResize(){this.rerender()}valueHandler(){if(!this.value)this.currentSelection=null;this.calcHighlight(this.currentSelection,this.activeBg);this.navchange.emit(this.value);if(!this.dropdownActive)return;this.isDropdownItemActive()}dropdownHandler(){if(this.dropdownOpen){requestAnimationFrame((()=>{this.addGlobalEventListeners()}));return}this.removeGlobalEventListeners()}componentWillLoad(){if(!this.dropdown)return;this.dropdownEls=Array.from(this.hostElement.querySelectorAll("pn-page-nav-dropdown-item"));if(this.dropdownEls.length){this.dropdownActive=true;this.initiateDropdown()}}componentDidLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>{a(this.hostElement);this.setActiveNavItem();this.rerender()}));this.mo.observe(this.hostElement,{childList:true,subtree:true});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:n})=>this.calcHighlight(n,this.hoverBg)));this.setActiveNavItem();this.rerender()}setActiveNavItem(){this.navItems=Array.from(this.hostElement.querySelectorAll("pn-page-nav-item"));this.navItems.forEach((n=>{if(this.value===n.value){this.currentSelection=n}else{n.removeAttribute("selected")}n.querySelector("a").addEventListener("focus",(({target:n})=>this.calcHighlight(n,this.hoverBg)))}));if(!this.dropdownActive)return;this.dropdownItems=Array.from(this.hostElement.querySelectorAll(".pn-page-nav-dropdown-item"));this.isDropdownItemActive();this.dropdownLinks=this.dropdownItems.map(((n,t)=>{n.setAttribute("data-index",`${t}`);return n.closest("pn-page-nav-dropdown-item").value}))}rerender(){requestAnimationFrame((()=>{this.calcHighlight(this.currentSelection,this.activeBg);this.scrollArrowRender()}))}calcHighlight(n,t){if(!n?.closest("pn-page-nav-item")){t?.classList.add("hidden");return}if(t)t.classList.remove("hidden");const e=n.closest("pn-page-nav-item").getBoundingClientRect();const{left:a}=this.navContainer.getBoundingClientRect();const{left:i,height:s,width:o}=e;const r=i-a+this.navContainer.scrollLeft;t.style.setProperty("transform",`translate(${r}px, -50%`);t.style.setProperty("width",`${o}px`);t.style.setProperty("height",`${s}px`)}scrollArrowRender(){if(!this.navWrapper)return;if(this.navWrapper.scrollWidth>this.navWrapper.clientWidth){this.showScrollArrows=true;if(!this.scrollRegistered){this.navWrapper.addEventListener("scroll",this.scrollArrowRender.bind(this));this.scrollRegistered=true}const n=Math.round(this.navWrapper.scrollWidth-this.navWrapper.scrollLeft);const t=n-this.navWrapper.clientWidth;const e=this.navWrapper.scrollLeft;this.showLeftArrow=e>0;this.showRightArrow=t>0;return}this.showLeftArrow=false;this.showRightArrow=false;this.showScrollArrows=false}scroll(n){let t=this.navWrapper.scrollLeft+n;this.navWrapper.scroll({left:t,behavior:"smooth"})}scrollArrowClasses(){let n="pn-pn-arrows ";if(this.showLeftArrow)n+="pn-pn-left-visible ";if(this.showRightArrow)n+="pn-pn-right-visible ";return n}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((n=>{if(n.value&&this.value===n.value){n.setAttribute("active","true");return}n.removeAttribute("active")}))}addDropdownEventListeners(){this.hostElement.addEventListener("keydown",this.eventHandler);this.hostElement.addEventListener("click",this.eventHandler)}addGlobalEventListeners(){const n=this.hostElement.getRootNode();n.addEventListener("focusin",this.globalEventHandler);n.addEventListener("keydown",this.globalEventHandler);n.addEventListener("click",this.globalEventHandler)}removeGlobalEventListeners(){const n=this.hostElement.getRootNode();n.removeEventListener("focusin",this.globalEventHandler);n.removeEventListener("keydown",this.globalEventHandler);n.removeEventListener("click",this.globalEventHandler)}keyboardEvents(n){const t=n.composedPath()[0];if(n.type==="keydown"){if(!this.dropdownOpen&&t===this.dropdownButton&&["ArrowUp","ArrowDown"].includes(n.code)){this.dropdownOpen=true;requestAnimationFrame((()=>{this.focusNextDropdownItem()}))}}}globalEvents(n){const t=n.composedPath()[0];if(n.type==="keydown"&&n.code==="Escape"){this.dropdownOpen=false;this.dropdownButton.focus()}if(n.code==="ArrowDown")this.focusNextDropdownItem();if(n.code==="ArrowUp")this.focusPrevDropdownItem();if((n.type==="click"||n.type==="focusin")&&!this.dropdownEl.contains(t)){this.dropdownOpen=false}}focusNextDropdownItem(){const{activeElement:n}=this.hostElement.getRootNode();if(!n.classList.contains("pn-page-nav-dropdown-item")){this.dropdownItems[0].focus();return}const t=parseInt(n.getAttribute("data-index"));if(t<this.dropdownItems.length-1){this.dropdownItems[t+1].focus()}}focusPrevDropdownItem(){const{activeElement:n}=this.hostElement.getRootNode();if(!n.classList.contains("dropdown-item")){this.dropdownItems[this.dropdownItems.length-1].focus()}const t=parseInt(n.getAttribute("data-index"));if(t>0){this.dropdownItems[t-1].focus();return}this.dropdownButton.focus()}dropdownButtonClasses(){let n="pn-page-nav-dropdown-button ";if(this.dropdownLinks.includes(this.value))n+="pn-page-nav-dropdown-active ";return n}dropdownClasses(){let n="pn-page-nav-dropdown ";if(this.dropdownOpen)n+="pn-page-nav-dropdown-open ";return n}render(){return i(s,{key:"78363e8727ce2d9b1525572a8d909b65141c4932"},i("div",{key:"1cdb635b439f40cf77df3a77432d542f3055e952",class:"pn-page-nav-wrapper"},i("nav",{key:"13ae19bf916612a04990edade8d7325665a91060",class:"pn-page-nav"},this.dropdownActive&&i("button",{key:"802fbae4d73a7b26a34ed4e41e5b5a6efd3ba101",type:"button",class:this.dropdownButtonClasses(),onClick:()=>this.toggleDropdown(),"aria-controls":"page-nav-dropdown","aria-expanded":`${this.dropdownOpen}`},this.dropdown,i("pn-icon",{key:"ac26e1ec6b9feeb52a898d7f80d2c4356423e93d",icon:r,color:"white",small:true}),i("div",{key:"c040e7c7ac1db10687b53ad6f59f6c3ded1d8e8a",class:"pn-page-nav-divider"})),i("ul",{key:"4bf5dc223bd55b0fb81fedebfa09fbe5db42569d",class:"pn-page-nav-items"},i("slot",{key:"3b77f7bd7a09700b860df10927b3889072e3bc34"}),i("li",{key:"71f85348e913043ca037efbe523f25a00bf8d211",class:"pn-pn-bg pn-pn-active",role:"presentation"}),i("li",{key:"462f8b0e8e1c788143d4ffaf5011b030ff100f5f",class:"pn-pn-bg pn-pn-hover",role:"presentation"}))),this.showScrollArrows&&i("div",{key:"c69db4a2202a5b5f9da49f72466bfa2d68eec0c8",class:this.scrollArrowClasses()},i("button",{key:"eb809646459a703b8ea984ef6f9ec8b23ea34029",class:"pn-pn-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},i("pn-icon",{key:"4d797edf6525213134b3acc0e36876ade74952a8",icon:p,color:"white"})),i("button",{key:"612286fcac6b7608a1162aa5b8ad3d6ff401bf87",class:"pn-pn-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},i("pn-icon",{key:"5a336276c0b4256fb976fc2bdc9037ec25cbc382",icon:d,color:"blue700"})))),this.dropdownActive&&i("ul",{key:"518b79ad7c1a7ff8652a5fb909f8285f94405a4a",id:this.navid,class:this.dropdownClasses()},i("slot",{key:"7d03ba12daffea62b0b0a7c0f1a1c1c006a125c4",name:"dropdown-item"})))}static get watchers(){return{value:["valueHandler"],dropdownOpen:["dropdownHandler"]}}};c.style=l;export{c as pn_page_nav};
//# sourceMappingURL=p-bc95d4b0.entry.js.map