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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t as n,r as t,c as e,g as a,f as i,h as s,a as o}from"./p-XKg-ydzH.js";import{uuidv4 as r}from"./index.esm.js";import{a as p}from"./p-CQaMdITw.js";import{a as d}from"./p-D_UyW-KH.js";import{c as h}from"./p-DrYFvs2M.js";const c=class{constructor(n){t(this,n),this.navchange=e(this,"navchange",7)}mo;navContainer;navWrapper;navItems=[];dropdownButton;dropdownEl;dropdownItems;dropdownEls;eventHandler=this.keyboardEvents.bind(this);globalEventHandler=this.globalEvents.bind(this);activeBg;hoverBg;scrollRegistered=!1;get hostElement(){return a(this)}currentSelection;showScrollArrows=!1;showLeftArrow=!1;showRightArrow=!1;dropdownOpen=!1;dropdownLinks=[];dropdownActive=!1;value;dropdown=!1;navid=`pn-page-nav-${r()}`;navchange;changeHandler({target:t}){this.currentSelection=t.closest(`${n("pn-page-nav-item")}`),t.value&&(this.value=t.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(){this.dropdownOpen?requestAnimationFrame((()=>{this.addGlobalEventListeners()})):this.removeGlobalEventListeners()}componentWillLoad(){this.dropdown&&(this.dropdownEls=Array.from(this.hostElement.querySelectorAll(`${n("pn-page-nav-dropdown-item")}`)),this.dropdownEls.length&&(this.dropdownActive=!0,this.initiateDropdown()))}componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>{i(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:n})=>this.calcHighlight(n,this.hoverBg))),this.setActiveNavItem(),this.rerender()}setActiveNavItem(){this.navItems=Array.from(this.hostElement.querySelectorAll(`${n("pn-page-nav-item")}`)),this.navItems.forEach((n=>{this.value===n.value?this.currentSelection=n:n.removeAttribute("selected"),n.querySelector("a").addEventListener("focus",(({target:n})=>this.calcHighlight(n,this.hoverBg)))})),this.dropdownActive&&(this.dropdownItems=Array.from(this.hostElement.querySelectorAll(".pn-page-nav-dropdown-item")),this.isDropdownItemActive(),this.dropdownLinks=this.dropdownItems.map(((t,e)=>(t.setAttribute("data-index",`${e}`),t.closest(`${n("pn-page-nav-dropdown-item")}`).value))))}rerender(){requestAnimationFrame((()=>{this.calcHighlight(this.currentSelection,this.activeBg),this.scrollArrowRender()}))}calcHighlight(t,e){if(!t?.closest(`${n("pn-page-nav-item")}`))return void e?.classList.add("hidden");e&&e.classList.remove("hidden");const a=t.closest(`${n("pn-page-nav-item")}`).getBoundingClientRect(),{left:i}=this.navContainer.getBoundingClientRect(),{left:s,height:o,width:r}=a;e.style.setProperty("transform",`translate(${s-i+this.navContainer.scrollLeft}px, -50%`),e.style.setProperty("width",`${r}px`),e.style.setProperty("height",`${o}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 n=Math.round(this.navWrapper.scrollWidth-this.navWrapper.scrollLeft)-this.navWrapper.clientWidth;return this.showLeftArrow=this.navWrapper.scrollLeft>0,void(this.showRightArrow=n>0)}this.showLeftArrow=!1,this.showRightArrow=!1,this.showScrollArrows=!1}}scroll(n){this.navWrapper.scroll({left:this.navWrapper.scrollLeft+n,behavior:"smooth"})}scrollArrowClasses(){let n="pn-pn-arrows ";return this.showLeftArrow&&(n+="pn-pn-left-visible "),this.showRightArrow&&(n+="pn-pn-right-visible "),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=>{n.value&&this.value===n.value?n.setAttribute("active","true"):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];"keydown"===n.type&&!this.dropdownOpen&&t===this.dropdownButton&&["ArrowUp","ArrowDown"].includes(n.code)&&(this.dropdownOpen=!0,requestAnimationFrame((()=>{this.focusNextDropdownItem()})))}globalEvents(n){const t=n.composedPath()[0];"keydown"===n.type&&"Escape"===n.code&&(this.dropdownOpen=!1,this.dropdownButton.focus()),"ArrowDown"===n.code&&this.focusNextDropdownItem(),"ArrowUp"===n.code&&this.focusPrevDropdownItem(),"click"!==n.type&&"focusin"!==n.type||this.dropdownEl.contains(t)||(this.dropdownOpen=!1)}focusNextDropdownItem(){const{activeElement:n}=this.hostElement.getRootNode();if(!n.classList.contains("pn-page-nav-dropdown-item"))return void this.dropdownItems[0].focus();const t=parseInt(n.getAttribute("data-index"));t<this.dropdownItems.length-1&&this.dropdownItems[t+1].focus()}focusPrevDropdownItem(){const{activeElement:n}=this.hostElement.getRootNode();n.classList.contains("dropdown-item")||this.dropdownItems[this.dropdownItems.length-1].focus();const t=parseInt(n.getAttribute("data-index"));t>0?this.dropdownItems[t-1].focus():this.dropdownButton.focus()}dropdownButtonClasses(){let n="pn-page-nav-dropdown-button ";return this.dropdownLinks.includes(this.value)&&(n+="pn-page-nav-dropdown-active "),n}dropdownClasses(){let n="pn-page-nav-dropdown ";return this.dropdownOpen&&(n+="pn-page-nav-dropdown-open "),n}render(){return s(o,{key:"2bca6384910b5b314ddbb6f4f646fa95ee084c09"},s("div",{key:"2322adc21546db4fcf950f0136516ef3a059b409",class:"pn-page-nav-wrapper"},s("nav",{key:"62ce2c8c14c2748b8e5f4fd91263c19b70db1559",class:"pn-page-nav"},this.dropdownActive&&s("button",{key:"a7839cdd22ca1fbb7f2a1dcb56ebf8d9d7dda05d",type:"button",class:this.dropdownButtonClasses(),onClick:()=>this.toggleDropdown(),"aria-controls":"page-nav-dropdown","aria-expanded":`${this.dropdownOpen}`},this.dropdown,s("pn-icon",{key:"1a91a0a67c34295456c3bdb943740b257d942a53",icon:h,color:"white",small:!0}),s("div",{key:"1197635d3c157fae6b5fd90b52a8a61af8de4b8e",class:"pn-page-nav-divider"})),s("ul",{key:"3a19fcbe877e2dc81c76d378fffe1536ac1af54f",class:"pn-page-nav-items"},s("slot",{key:"aff622272002a021fc4606cb9d43aa9d86e06ba3"}),s("li",{key:"eb6d08cc390d742576a633629ee930b979ee9fdf",class:"pn-pn-bg pn-pn-active",role:"presentation"}),s("li",{key:"86be3cba39c47f3bc7f3c87afedfef66afcd6fb2",class:"pn-pn-bg pn-pn-hover",role:"presentation"}))),this.showScrollArrows&&s("div",{key:"875412be070486024d5886f5f4099747b0d51b8a",class:this.scrollArrowClasses()},s("button",{key:"358199bf37ce3473f002ae20e6dfab31a1ae0ac5",class:"pn-pn-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},s("pn-icon",{key:"c40ceef73645e7bf9cec3935e892faf8c369a158",icon:p,color:"white"})),s("button",{key:"8ac847b47005a0d61f72de5122601c38ff268655",class:"pn-pn-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},s("pn-icon",{key:"dc21c3242fe32126adca3ebc38c8a8eeed705aca",icon:d,color:"blue700"})))),this.dropdownActive&&s("ul",{key:"7666ab6c68d3b9fe0bd39ac4bd1cec2e240e6871",id:this.navid,class:this.dropdownClasses()},s("slot",{key:"64c6a3b285fb8058eb8085f2557e001c6711db4c",name:"dropdown-item"})))}static get watchers(){return{value:[{valueHandler:0}],dropdownOpen:[{dropdownHandler:0}]}}};c.style=`${n("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}}${n("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}${n("pn-page-nav")} .pn-pn-arrows svg{width:1.5em}${n("pn-page-nav")} .pn-pn-arrows svg.pn-icon-svg path{fill:#005d92}${n("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}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-left{transform:translateX(-100%)}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-right{transform:translateX(100%)}@media screen and (max-width: 30em){${n("pn-page-nav")} .pn-pn-arrows>*{border:none}${n("pn-page-nav")} .pn-pn-arrows>* ${n("pn-icon")} .pn-icon-svg{width:100%;height:2em;animation:arrow 0.6s ease-in-out alternate infinite}${n("pn-page-nav")} .pn-pn-arrows>* ${n("pn-icon")} .pn-icon-svg path{fill:#ffffff}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-left{background:linear-gradient(to left, transparent, #0d234b 60%);border-radius:50% 0 0 50%}${n("pn-page-nav")} .pn-pn-arrows>*.pn-pn-arrow-right{background:linear-gradient(to right, transparent, #0d234b 40%);border-radius:0 50% 50% 0}}${n("pn-page-nav")} .pn-pn-arrows.pn-pn-left-visible .pn-pn-arrow-left,${n("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 ${n("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}`;export{c as pn_page_nav}