@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/umd/modules/@postnord/web-components/components/pn-page-nav.js

@@ -2,350 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4 } from './helpers.js';
-import { a as arrow_left } from './arrow_left.js';
-import { a as arrow_right } from './arrow_right.js';
-import { c as chevron_down } from './chevron_down.js';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-
-const pnPageNavCss = "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 PnPageNav$1 = /*@__PURE__*/ proxyCustomElement(class PnPageNav extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.navchange = createEvent(this, "navchange", 7);
-    }
-    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 this; }
-    currentSelection;
-    showScrollArrows = false;
-    showLeftArrow = false;
-    showRightArrow = false;
-    dropdownOpen = false;
-    dropdownLinks = [];
-    dropdownActive = false;
-    /** Currently active menu item value */
-    value;
-    /** Pass a string which will be the text on the dropdown button. */
-    dropdown = false;
-    /** Set a unique HTML ID. */
-    navid = `pn-page-nav-${uuidv4()}`;
-    /** Emits the value of the selected item. */
-    navchange;
-    changeHandler({ target }) {
-        this.currentSelection = target.closest('pn-page-nav-item');
-        if (target.value)
-            this.value = target.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();
-    }
-    /* ---------------------------------------LIFECYCLE--------------------------------------- */
-    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(() => {
-            forceUpdate(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 }) => this.calcHighlight(target, this.hoverBg));
-        this.setActiveNavItem();
-        this.rerender();
-    }
-    /* ---------------------------------------/LIFECYCLE--------------------------------------- */
-    setActiveNavItem() {
-        this.navItems = Array.from(this.hostElement.querySelectorAll('pn-page-nav-item'));
-        this.navItems.forEach(navItemEl => {
-            if (this.value === navItemEl.value) {
-                /** @ts-ignore This component will be removed soon, no need to deal with this. */
-                this.currentSelection = navItemEl;
-            }
-            else {
-                navItemEl.removeAttribute('selected');
-            }
-            navItemEl
-                .querySelector('a')
-                .addEventListener('focus', ({ target }) => this.calcHighlight(target, this.hoverBg));
-        });
-        /* -----------------dropdown------------------ */
-        if (!this.dropdownActive)
-            return;
-        this.dropdownItems = Array.from(this.hostElement.querySelectorAll('.pn-page-nav-dropdown-item'));
-        //Check active state on each item
-        this.isDropdownItemActive();
-        //Store all values to check if dropdown button should be active
-        this.dropdownLinks = this.dropdownItems.map((el, i) => {
-            el.setAttribute('data-index', `${i}`);
-            return el.closest('pn-page-nav-dropdown-item').value;
-        });
-        /* -----------------/dropdown------------------ */
-    }
-    rerender() {
-        requestAnimationFrame(() => {
-            this.calcHighlight(this.currentSelection, this.activeBg);
-            this.scrollArrowRender();
-        });
-    }
-    /*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/
-    calcHighlight(el, bgEl) {
-        if (!el?.closest('pn-page-nav-item')) {
-            bgEl?.classList.add('hidden');
-            return;
-        }
-        if (bgEl)
-            bgEl.classList.remove('hidden');
-        const elRect = el.closest('pn-page-nav-item').getBoundingClientRect();
-        const { left: hostLeft } = this.navContainer.getBoundingClientRect();
-        const { left: navLeft, height: navHeight, width: navWidth } = elRect;
-        const offset = navLeft - hostLeft + this.navContainer.scrollLeft;
-        bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);
-        bgEl.style.setProperty('width', `${navWidth}px`);
-        bgEl.style.setProperty('height', `${navHeight}px`);
-    }
-    /*---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------*/
-    /*---------------------------------------SCROLL ARROW LOGIC-------------------------------------------*/
-    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 amountScrolled = Math.round(this.navWrapper.scrollWidth - this.navWrapper.scrollLeft);
-            const distanceToEnd = amountScrolled - this.navWrapper.clientWidth;
-            const distanceToStart = this.navWrapper.scrollLeft;
-            this.showLeftArrow = distanceToStart > 0;
-            this.showRightArrow = distanceToEnd > 0;
-            return;
-        }
-        this.showLeftArrow = false;
-        this.showRightArrow = false;
-        this.showScrollArrows = false;
-    }
-    scroll(val) {
-        let amount = this.navWrapper.scrollLeft + val;
-        this.navWrapper.scroll({
-            left: amount,
-            behavior: 'smooth',
-        });
-    }
-    scrollArrowClasses() {
-        let classNames = 'pn-pn-arrows ';
-        if (this.showLeftArrow)
-            classNames += 'pn-pn-left-visible ';
-        if (this.showRightArrow)
-            classNames += 'pn-pn-right-visible ';
-        return classNames;
-    }
-    /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
-    /* ---------------------------------------DROPDOWN LOGIC--------------------------------------- */
-    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(el => {
-            if (el.value && this.value === el.value) {
-                el.setAttribute('active', 'true');
-                return;
-            }
-            el.removeAttribute('active');
-        });
-    }
-    /* -----------------events------------------ */
-    /* -----------------temporary events------------------ */
-    addDropdownEventListeners() {
-        this.hostElement.addEventListener('keydown', this.eventHandler);
-        this.hostElement.addEventListener('click', this.eventHandler);
-    }
-    addGlobalEventListeners() {
-        const root = this.hostElement.getRootNode();
-        root.addEventListener('focusin', this.globalEventHandler);
-        root.addEventListener('keydown', this.globalEventHandler);
-        root.addEventListener('click', this.globalEventHandler);
-    }
-    removeGlobalEventListeners() {
-        const root = this.hostElement.getRootNode();
-        root.removeEventListener('focusin', this.globalEventHandler);
-        root.removeEventListener('keydown', this.globalEventHandler);
-        root.removeEventListener('click', this.globalEventHandler);
-    }
-    /* -----------------/temporary events------------------ */
-    /* -----------------Open dropdown with keyboard------------------ */
-    keyboardEvents(e) {
-        const target = e.composedPath()[0];
-        // As long as the dropdown is closed, we only want it to react to keyboard input
-        // is the user has focus on the button
-        if (e.type === 'keydown') {
-            if (!this.dropdownOpen && target === this.dropdownButton && ['ArrowUp', 'ArrowDown'].includes(e.code)) {
-                this.dropdownOpen = true;
-                requestAnimationFrame(() => {
-                    this.focusNextDropdownItem();
-                });
-            }
-        }
-    }
-    /* -----------------/Open dropdown with keyboard------------------ */
-    globalEvents(e) {
-        const target = e.composedPath()[0];
-        if (e.type === 'keydown' && e.code === 'Escape') {
-            this.dropdownOpen = false;
-            this.dropdownButton.focus();
-        }
-        if (e.code === 'ArrowDown')
-            this.focusNextDropdownItem();
-        if (e.code === 'ArrowUp')
-            this.focusPrevDropdownItem();
-        if ((e.type === 'click' || e.type === 'focusin') && !this.dropdownEl.contains(target)) {
-            this.dropdownOpen = false;
-        }
-    }
-    /* -----------------/events------------------ */
-    /* -----------------focusing------------------ */
-    focusNextDropdownItem() {
-        const { activeElement } = this.hostElement.getRootNode();
-        if (!activeElement.classList.contains('pn-page-nav-dropdown-item')) {
-            this.dropdownItems[0].focus();
-            return;
-        }
-        // focus next item
-        const index = parseInt(activeElement.getAttribute('data-index'));
-        if (index < this.dropdownItems.length - 1) {
-            this.dropdownItems[index + 1].focus();
-        }
-    }
-    focusPrevDropdownItem() {
-        const { activeElement } = this.hostElement.getRootNode();
-        if (!activeElement.classList.contains('dropdown-item')) {
-            this.dropdownItems[this.dropdownItems.length - 1].focus();
-        }
-        // focus previous item
-        const index = parseInt(activeElement.getAttribute('data-index'));
-        if (index > 0) {
-            this.dropdownItems[index - 1].focus();
-            return;
-        }
-        this.dropdownButton.focus();
-    }
-    /* -----------------/focusing------------------ */
-    dropdownButtonClasses() {
-        let classList = 'pn-page-nav-dropdown-button ';
-        if (this.dropdownLinks.includes(this.value))
-            classList += 'pn-page-nav-dropdown-active ';
-        return classList;
-    }
-    dropdownClasses() {
-        let classList = 'pn-page-nav-dropdown ';
-        if (this.dropdownOpen)
-            classList += 'pn-page-nav-dropdown-open ';
-        return classList;
-    }
-    /* ---------------------------------------/DROPDOWN LOGIC--------------------------------------- */
-    render() {
-        return (h(Host, { key: '8af35abf449ae62fe1afe032912e837288b34abd' }, h("div", { key: 'f372dfd4754a35c9026426ba8dbfeaa04847a242', class: "pn-page-nav-wrapper" }, h("nav", { key: '0dd2b9654e3addb5e83a83e5f525b90636add367', class: "pn-page-nav" }, this.dropdownActive && (h("button", { key: '6cec9a81b8e9ca6e786745ee77108764ad0632bf', type: "button", class: this.dropdownButtonClasses(), onClick: () => this.toggleDropdown(), "aria-controls": "page-nav-dropdown", "aria-expanded": `${this.dropdownOpen}` }, this.dropdown, h("pn-icon", { key: '2e1d5729fd59557b956f7245041250eabb154673', icon: chevron_down, color: "white", small: true }), h("div", { key: '217ae78ccb4f636ed728eccc17c7d80a9d867b40', class: "pn-page-nav-divider" }))), h("ul", { key: 'ee84ef363cc5564df2a9d25884c68668a59baebd', class: "pn-page-nav-items" }, h("slot", { key: 'e15807abfac9716639776902723dbae34ef4b5a1' }), h("li", { key: '16db9ac07fefdb7bde1f7dcdbb2e45d411219b9a', class: "pn-pn-bg pn-pn-active", role: "presentation" }), h("li", { key: 'a3a138dadc9f7277eeb447a108445f21fdba898b', class: "pn-pn-bg pn-pn-hover", role: "presentation" }))), this.showScrollArrows && (h("div", { key: 'c73e510e5ccce275888acc6314a27b58d99b03f8', class: this.scrollArrowClasses() }, h("button", { key: 'a6ca8cd2d6d68cb4b17d516e05876c9d3837505c', class: "pn-pn-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'a86fefe1bfb16b5d78aebfc2583fcd0a3fe7c9ef', icon: arrow_left, color: "white" })), h("button", { key: 'c1642d2f9ab851463f819ab27d2cb5cb5ac2c76a', class: "pn-pn-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: 'ea49cf6bfc13d1f3714f74b1cf51c822a9c766aa', icon: arrow_right, color: "blue700" }))))), this.dropdownActive && (h("ul", { key: '5c1edd841208adae9641eb43e7f0e80326faf595', id: this.navid, class: this.dropdownClasses() }, h("slot", { key: '46502a229141f5992682f79dc5d8e3121bf67398', name: "dropdown-item" })))));
-    }
-    static get watchers() { return {
-        "value": ["valueHandler"],
-        "dropdownOpen": ["dropdownHandler"]
-    }; }
-    static get style() { return pnPageNavCss; }
-}, [772, "pn-page-nav", {
-        "value": [1025],
-        "dropdown": [8],
-        "navid": [1],
-        "currentSelection": [32],
-        "showScrollArrows": [32],
-        "showLeftArrow": [32],
-        "showRightArrow": [32],
-        "dropdownOpen": [32],
-        "dropdownLinks": [32],
-        "dropdownActive": [32]
-    }, [[0, "itemselection", "changeHandler"], [9, "resize", "handleResize"]], {
-        "value": ["valueHandler"],
-        "dropdownOpen": ["dropdownHandler"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-page-nav", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-page-nav":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnPageNav$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnPageNav = PnPageNav$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnPageNav, defineCustomElement };
-//# sourceMappingURL=pn-page-nav.js.map
-
-//# sourceMappingURL=pn-page-nav.js.map
+import{transformTag as n,proxyCustomElement as e,HTMLElement as t,createEvent as a,forceUpdate as i,h as o,Host as s}from"@stencil/core/internal/client";import{u as r}from"./helpers.js";import{a as p}from"./arrow_left.js";import{a as d}from"./arrow_right.js";import{c as h}from"./chevron_down.js";import{d as c}from"./pn-icon2.js";const l=e(class extends t{constructor(n){super(),!1!==n&&this.__registerHost(),this.navchange=a(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 this}currentSelection;showScrollArrows=!1;showLeftArrow=!1;showRightArrow=!1;dropdownOpen=!1;dropdownLinks=[];dropdownActive=!1;value;dropdown=!1;navid="pn-page-nav-"+r();navchange;changeHandler({target:e}){this.currentSelection=e.closest(""+n("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(){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(((e,t)=>(e.setAttribute("data-index",""+t),e.closest(""+n("pn-page-nav-dropdown-item")).value))))}rerender(){requestAnimationFrame((()=>{this.calcHighlight(this.currentSelection,this.activeBg),this.scrollArrowRender()}))}calcHighlight(e,t){if(!e?.closest(""+n("pn-page-nav-item")))return void t?.classList.add("hidden");t&&t.classList.remove("hidden");const a=e.closest(""+n("pn-page-nav-item")).getBoundingClientRect(),{left:i}=this.navContainer.getBoundingClientRect(),{left:o,height:s,width:r}=a;t.style.setProperty("transform",`translate(${o-i+this.navContainer.scrollLeft}px, -50%`),t.style.setProperty("width",r+"px"),t.style.setProperty("height",s+"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 e=n.composedPath()[0];"keydown"===n.type&&!this.dropdownOpen&&e===this.dropdownButton&&["ArrowUp","ArrowDown"].includes(n.code)&&(this.dropdownOpen=!0,requestAnimationFrame((()=>{this.focusNextDropdownItem()})))}globalEvents(n){const e=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(e)||(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 e=parseInt(n.getAttribute("data-index"));e<this.dropdownItems.length-1&&this.dropdownItems[e+1].focus()}focusPrevDropdownItem(){const{activeElement:n}=this.hostElement.getRootNode();n.classList.contains("dropdown-item")||this.dropdownItems[this.dropdownItems.length-1].focus();const e=parseInt(n.getAttribute("data-index"));e>0?this.dropdownItems[e-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 o(s,{key:"f76a115ccea11e238d2aee5288b06675abc80b8a"},o("div",{key:"453102a432daf9b567be4f5dc415bab34b48bc84",class:"pn-page-nav-wrapper"},o("nav",{key:"9207ade4b4d6cea4c22622c91988eef2b3c812bc",class:"pn-page-nav"},this.dropdownActive&&o("button",{key:"3365178312cfe2b9d48fccbc794d2a8a857ed6f0",type:"button",class:this.dropdownButtonClasses(),onClick:()=>this.toggleDropdown(),"aria-controls":"page-nav-dropdown","aria-expanded":""+this.dropdownOpen},this.dropdown,o("pn-icon",{key:"460172b12b334e96920d185dcbc868acafc0cdcc",icon:h,color:"white",small:!0}),o("div",{key:"f16219e3070e00ebd1ab143b8803a94c44e242bc",class:"pn-page-nav-divider"})),o("ul",{key:"560ef88c95269f29b1f76ee65e3a2541fc2482ce",class:"pn-page-nav-items"},o("slot",{key:"7b1cfc89976421963cc19f958f21e29bfc796621"}),o("li",{key:"7df00d0a42fc3f48f82afdb0bbbf943229604293",class:"pn-pn-bg pn-pn-active",role:"presentation"}),o("li",{key:"68fd6cc6f9dfcb834c62105f81ff2e21b332be94",class:"pn-pn-bg pn-pn-hover",role:"presentation"}))),this.showScrollArrows&&o("div",{key:"ba26546a6fa3f750a5314dd80f80e1487b4962ec",class:this.scrollArrowClasses()},o("button",{key:"57b43598cb3288b068c3583c822be35418b28e91",class:"pn-pn-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"b812b5b471ba0982be6cb3bcacc84bb2f52fa0e3",icon:p,color:"white"})),o("button",{key:"70d5bffed71999aaf154f88590378496d79e7f55",class:"pn-pn-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"a2d4319bab3a80b092321873ff66e4b421f14743",icon:d,color:"blue700"})))),this.dropdownActive&&o("ul",{key:"1e2a73e7b4d523f3feba0dc18ccc14871b551862",id:this.navid,class:this.dropdownClasses()},o("slot",{key:"20f647483c10a84de4bf2f40126b83b65b61b99f",name:"dropdown-item"})))}static get watchers(){return{value:[{valueHandler:0}],dropdownOpen:[{dropdownHandler:0}]}}static get style(){return`${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}`}},[772,"pn-page-nav",{value:[1025],dropdown:[8],navid:[1],currentSelection:[32],showScrollArrows:[32],showLeftArrow:[32],showRightArrow:[32],dropdownOpen:[32],dropdownLinks:[32],dropdownActive:[32]},[[0,"itemselection","changeHandler"],[9,"resize","handleResize"]],{value:[{valueHandler:0}],dropdownOpen:[{dropdownHandler:0}]}]),b=l,g=function(){"undefined"!=typeof customElements&&["pn-page-nav","pn-icon"].forEach((e=>{switch(e){case"pn-page-nav":customElements.get(n(n(e)))||customElements.define(n(n(e)),l);break;case"pn-icon":customElements.get(n(n(e)))||c()}}))};export{b as PnPageNav,g as defineCustomElement}