/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-CfUQZtlH.js');
var index$2 = require('./index-CNdVg5VI.js');
var index$1 = require('./index.cjs.js');
var chevron_down = require('./chevron_down-BLU6_yOG.js');
var chevron_right = require('./chevron_right-CApgqZb0.js');
var open_in_new = require('./open_in_new-B-zmn5xr.js');

const translations = {
    BACK: {
        sv: 'Tillbaka',
        en: 'Back',
        da: 'Tilbage',
        fi: 'Takaisin',
        no: 'Tilbake',
    },
};

const pnActionMenuCss = () => `${index.transformTag("pn-action-menu")}{--pn-menu-height:unset;display:inline-block;position:relative}${index.transformTag("pn-action-menu")} .pn-action-menu{position:relative}${index.transformTag("pn-action-menu")} .pn-action-menu-container{--pn-action-menu-offset:0;scroll-behavior:smooth;list-style:none;text-align:left;position:absolute;z-index:100;top:calc(100% + 0.5em);left:var(--pn-action-menu-offset);right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;margin:0;padding:0;width:16em;visibility:hidden;overflow:hidden}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-open]{visibility:visible;overflow:unset}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-left]{right:0;left:unset}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-moving]{overflow:hidden;visibility:visible;pointer-events:none}${index.transformTag("pn-action-menu")} .pn-action-menu-container{}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{border-radius:0.5em;visibility:hidden;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{transition-delay:0.2s}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list[data-current]{overflow-x:auto;visibility:visible;transition-delay:0s}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-small][data-moving]>.pn-action-menu-list{visibility:visible}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-item{position:unset}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-sub{left:0;height:100%;box-shadow:unset;transform:translateX(0);visibility:hidden}${index.transformTag("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-sub[data-current]{visibility:visible;overflow-x:auto}${index.transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${index.transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${index.transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${index.transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${index.transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-corner,${index.transformTag("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-button{display:none}${index.transformTag("pn-action-menu")} .pn-action-menu-list{margin:0;padding:0;list-style:none;height:var(--pn-menu-height)}${index.transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${index.transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${index.transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${index.transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${index.transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-corner,${index.transformTag("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-button{display:none}${index.transformTag("pn-action-menu")} .pn-action-menu-group{margin:0;padding:0;list-style:none}${index.transformTag("pn-action-menu")} .pn-action-menu-group-label{display:block;color:#2d2013;font-weight:700;font-size:0.875em;padding:1em 1em 0.5em}${index.transformTag("pn-action-menu")} .pn-action-menu-group-helpertext{display:block;color:#5e554a;font-weight:400;margin:0.25em 0 0}${index.transformTag("pn-action-menu")} .pn-action-menu-sub{z-index:110;position:absolute;top:0;width:100%;min-width:12em;margin:0;padding:0;list-style:none;background:#ffffff;border-radius:0.5em;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);transform:translateX(-0.5em);opacity:0;visibility:hidden}${index.transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${index.transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${index.transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${index.transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${index.transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-corner,${index.transformTag("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-button{display:none}${index.transformTag("pn-action-menu")} .pn-action-menu-sub{transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-action-menu")} .pn-action-menu-sub{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-action-menu")} .pn-action-menu-sub{transition-delay:0s, 0s, 0.2s}${index.transformTag("pn-action-menu")} .pn-action-menu-sub[data-open=true]{transform:translateX(0);opacity:1;visibility:visible;transition-delay:0s, 0s, 0s}${index.transformTag("pn-action-menu")} .pn-action-menu-sub[data-open=false]{pointer-events:none}${index.transformTag("pn-action-menu")} .pn-action-menu-sub[data-x=left]{left:-100%}${index.transformTag("pn-action-menu")} .pn-action-menu-sub[data-x=center]{left:0}${index.transformTag("pn-action-menu")} .pn-action-menu-sub[data-x=right]{left:100%}${index.transformTag("pn-action-menu")} .pn-action-menu-sub[data-y=top]{top:unset;bottom:0}${index.transformTag("pn-action-menu")} .pn-action-menu-sub[data-y=bottom]{top:0}${index.transformTag("pn-action-menu")} .pn-action-menu-item{position:relative}${index.transformTag("pn-action-menu")} .pn-action-menu-item:first-child>.pn-action-menu-item-content>.pn-action-menu-button{border-top-left-radius:0.5em;border-top-right-radius:0.5em}${index.transformTag("pn-action-menu")} .pn-action-menu-item:last-child>.pn-action-menu-item-content>.pn-action-menu-button{border-bottom-right-radius:0.5em;border-bottom-left-radius:0.5em}${index.transformTag("pn-action-menu")} .pn-action-menu-item-text{display:flex;flex-direction:column;margin-right:auto}${index.transformTag("pn-action-menu")} .pn-action-menu-item-label{color:#005d92;font-weight:500;text-decoration:none}${index.transformTag("pn-action-menu")} .pn-action-menu-item-suffix{margin-left:auto;font-weight:400;color:#5e554a}${index.transformTag("pn-action-menu")} .pn-action-menu-item-helpertext{color:#5e554a;font-weight:400}${index.transformTag("pn-action-menu")} .pn-action-menu-item-content{display:flex;align-items:center;flex-direction:row;flex:1 1 100%;gap:0.5em;position:relative}${index.transformTag("pn-action-menu")} .pn-action-menu-item-content[data-close]{border-bottom:0.0625em solid #d3cecb}${index.transformTag("pn-action-menu")} .pn-action-menu-item-content>${index.transformTag("pn-icon")}{padding:0 0.25em}${index.transformTag("pn-action-menu")} .pn-action-menu-item[data-group],${index.transformTag("pn-action-menu")} .pn-action-menu-item[data-sub]{flex-direction:column}${index.transformTag("pn-action-menu")} .pn-action-menu-button{cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;line-height:1.5;padding:0.75em 1em;border:0;width:100%;text-align:left;text-decoration-color:transparent;overflow:hidden;display:flex;align-items:center;flex:1 1 100%;gap:0.5em;font-size:1em;min-height:1.5em;background-color:#ffffff;transition-property:background-color, color, outline-color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-action-menu")} .pn-action-menu-button{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-action-menu")} .pn-action-menu-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#0d234b;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}}${index.transformTag("pn-action-menu")} .pn-action-menu-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-action-menu")} .pn-action-menu-button:focus-visible{outline-color:#005d92}${index.transformTag("pn-action-menu")} .pn-action-menu-button{outline-offset:-0.2rem}${index.transformTag("pn-action-menu")} .pn-action-menu-button>${index.transformTag("pn-icon")} .pn-icon-svg>path{transform-origin:center;transform:rotate(0deg);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-action-menu")} .pn-action-menu-button>${index.transformTag("pn-icon")} .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-action-menu")} .pn-action-menu-button>${index.transformTag("pn-icon")}[data-suffix][data-active]>.pn-icon-svg>path{transform:rotate(180deg)}${index.transformTag("pn-action-menu")} .pn-action-menu-button>${index.transformTag("pn-icon")}:last-child{margin-left:auto}${index.transformTag("pn-action-menu")} .pn-action-menu-button:disabled{pointer-events:none;color:#5e554a;background-color:#f3f2f2}${index.transformTag("pn-action-menu")} .pn-action-menu-button:hover{background-color:#effbff}${index.transformTag("pn-action-menu")} .pn-action-menu-button:focus{background-color:#e0f8ff}${index.transformTag("pn-action-menu")} .pn-action-menu-button[href]:hover,${index.transformTag("pn-action-menu")} .pn-action-menu-button[href]:focus{text-decoration-color:#005d92}${index.transformTag("pn-action-menu")} .pn-action-menu-button{}${index.transformTag("pn-action-menu")} .pn-action-menu-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;margin-left:auto;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-action-menu")} .pn-action-menu-checkbox{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline{transition-delay:0s}${index.transformTag("pn-action-menu")} .pn-action-menu-checkbox svg polyline.pn-action-menu-checkbox-checkmark-path{stroke-dashoffset:23}${index.transformTag("pn-action-menu")} .pn-action-menu-radio{display:flex;gap:0.75em;padding:0;margin-left:auto}${index.transformTag("pn-action-menu")} .pn-action-menu-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-action-menu")} .pn-action-menu-radio-outer{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-action-menu")} .pn-action-menu-radio-inner{transform:scale(0);height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-action-menu")} .pn-action-menu-radio-inner{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-action-menu")} .pn-action-menu-input{position:absolute;z-index:10;cursor:pointer;height:100%;width:100%;top:0;left:0;margin:0;opacity:0;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button{background-color:#effbff}${index.transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#005d92;background-color:#005d92}${index.transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox polyline.pn-action-menu-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}${index.transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92}${index.transformTag("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-inner{transform:scale(1);background-color:#005d92}${index.transformTag("pn-action-menu")} .pn-action-menu-input:checked:hover{background-color:#e0f8ff}${index.transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}${index.transformTag("pn-action-menu")} .pn-action-menu-input:disabled{pointer-events:none}${index.transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button{pointer-events:none;color:#5e554a;background-color:#f3f2f2}${index.transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-item-label{color:#5e554a}${index.transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-checkbox{background-color:#f3f2f2}${index.transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#969087;background-color:#f3f2f2}${index.transformTag("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-icon-svg path{fill:#5e554a}${index.transformTag("pn-action-menu")} .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-radio-inner{background-color:#969087}${index.transformTag("pn-action-menu")} .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#969087;background-color:#969087}${index.transformTag("pn-action-menu")} .pn-action-menu-input:hover+.pn-action-menu-button{background-color:#e0f8ff}${index.transformTag("pn-action-menu")} .pn-action-menu-input:hover+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92;background-color:#e0f8ff}${index.transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}${index.transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-checkbox,${index.transformTag("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-radio .pn-action-menu-radio-outer{outline-color:#005d92}${index.transformTag("pn-action-menu")} .pn-action-menu-p{margin:0}${index.transformTag("pn-action-menu")} .pn-action-menu>${index.transformTag("pn-button")}[data-default-icon] .pn-button[aria-expanded=true] .pn-icon-svg{transform:rotate(180deg);transition-delay:0s}${index.transformTag("pn-action-menu")} .pn-action-menu>${index.transformTag("pn-button")}[data-default-icon] .pn-button .pn-icon-svg{transform:rotate(0deg);transition-delay:0.2s;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-action-menu")} .pn-action-menu>${index.transformTag("pn-button")}[data-default-icon] .pn-button .pn-icon-svg{transition-duration:0s;transition-delay:0s}}`;

const PnActionMenu = class extends index.Mixin(index$2.animateHeightFactory) {
    constructor(hostRef) {
        super();
        index.registerInstance(this, hostRef);
        this.menuToggle = index.createEvent(this, "menuToggle");
        this.menuVisible = index.createEvent(this, "menuVisible");
        this.menuOption = index.createEvent(this, "menuOption");
    }
    id = `pn-action-menu-${index$1.uuidv4()}`;
    menuButtonId = `${this.id}-button`;
    menuListId = `${this.id}-list`;
    menuTrigger;
    menuContainer;
    menuList;
    timeout;
    /** 16em */
    menuWidth = 256;
    get hostElement() { return index.getElement(this); }
    smallMenu = null;
    upwards = false;
    activeSubmenu = [];
    /** Array of action menu options. @see {@link PnActionMenuItem} */
    options = [];
    /** Set any prop from the `pn-button` component here. @see {@link Components.PnButton} */
    button;
    /** Set a custom ID for the menu. */
    menuId = this.id;
    /** Manually set the language. */
    language = null;
    /** Open/close the action menu manually. @category Features */
    open = false;
    /** Prefer that the menu open upwards, if there is enough space. @category Features */
    menuUp = false;
    /** Prefer that the submenus opens to the left, if there is enough space. @category Features */
    menuLeft = false;
    /** Emitted when the menu is opened or closed. */
    menuToggle;
    /** Emitted when the menu is fully hidden/visible after the animation has played. */
    menuVisible;
    /** Emitted when an option is clicked (button, link, input or submenus). */
    menuOption;
    handleOptions() {
        this.setMenuLayout();
    }
    openHandler() {
        this.setAnimationDuration();
        requestAnimationFrame(() => {
            if (this.open && !this.isMoving()) {
                this.setOffset();
                this.setMenuLayout();
            }
            this.dropdownHandler();
            this.menuToggle.emit({ open: this.open });
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                if (!this.open) {
                    this.activeSubmenu = [];
                    const subMenus = this.hostElement.querySelectorAll('[data-x]');
                    Array.from(subMenus).forEach(el => {
                        el.removeAttribute('data-x');
                        el.removeAttribute('data-y');
                    });
                }
                this.menuVisible.emit({ visible: this.open });
            }, this.animationDuration);
        });
    }
    handleMenuId() {
        this.menuButtonId = `${this.menuId}-button`;
        this.menuListId = `${this.menuId}-list`;
    }
    handleResize() {
        if (this.open)
            this.toggleActionMenu(false);
    }
    async componentWillLoad() {
        if (!this.options.length)
            console.warn(`${this.hostElement.localName}: No options set.`);
        this.handleMenuId();
        this.setAnimationDuration();
        if (this.language !== null)
            await index$1.awaitTopbar(this.hostElement);
    }
    componentDidLoad() {
        this.setOffset();
        requestAnimationFrame(() => this.open && this.dropdownHandler());
    }
    translate(prop) {
        return translations[prop][this.language || index$1.en];
    }
    globalEvents = (event) => {
        const target = event.target;
        const isWithinActionMenu = target?.closest(this.hostElement.localName);
        if (!isWithinActionMenu)
            this.closeEachSubMenu(true);
    };
    addGlobalEventListeners() {
        const root = this.hostElement.getRootNode();
        root.addEventListener('click', this.globalEvents);
    }
    removeGlobalEventListeners() {
        const root = this.hostElement.getRootNode();
        root.removeEventListener('click', this.globalEvents);
    }
    /** Open/close the action menu. */
    toggleActionMenu(state) {
        this.open = state ?? !this.open;
    }
    setMenuLayout() {
        if (!this.menuContainer)
            return;
        if (!this.isMoving())
            this.resetMaxHeight();
        const measurements = this.getMenuMeasurements();
        this.setDirection(measurements);
        this.setMenuSize(measurements);
        this.setMaxHeight(measurements);
    }
    setDirection({ hUp, hDown, sUp, sDown }) {
        const fitsUpwards = sUp > hUp;
        const fitsDownards = sDown > hDown;
        const moreSpaceDown = sDown > sUp;
        this.upwards = (this.menuUp && fitsUpwards) || (!fitsDownards && !moreSpaceDown);
    }
    setMenuSize({ hUp, hDown, sUp, sDown }) {
        const isWidthSmall = index$1.isSmallScreen();
        const menuFits = this.upwards ? sUp > hUp : sDown > hDown;
        const isSmall = isWidthSmall || !menuFits;
        if (isSmall !== this.smallMenu) {
            this.smallMenu = isSmall;
        }
    }
    setMaxHeight({ hUp, hDown, sUp, sDown }) {
        if (this.smallMenu) {
            const heightUp = hUp > sUp ? hUp - 16 : hUp;
            const heightDown = hDown > sDown ? hDown - 8 : hDown;
            this.hostElement.style.setProperty('--pn-menu-height', `${this.upwards ? heightUp : heightDown}px`);
        }
        else
            this.resetMaxHeight();
    }
    resetMaxHeight() {
        this.hostElement.style.setProperty('--pn-menu-height', 'unset');
    }
    getRect(element) {
        return element.getBoundingClientRect();
    }
    getMenuMeasurements() {
        const allLists = Array.from(this.menuContainer.querySelectorAll('menu'));
        const maxHeight = Math.max(...allLists.map(el => el.scrollHeight));
        const rectButton = this.getRect(this.menuTrigger);
        const rectMenu = this.getRect(this.menuContainer);
        /** Measurements upwards. */
        const sUp = rectButton.top - index$1.getTotalHeightOffset();
        const hUp = sUp > maxHeight ? maxHeight : sUp;
        /** Measurements downwards. */
        const sDown = innerHeight - rectMenu.top;
        const hDown = sDown > maxHeight ? maxHeight : sDown;
        return {
            hUp,
            hDown,
            sUp,
            sDown,
        };
    }
    setOffset() {
        const data = this.getRect(this.hostElement);
        const sideMenuWidth = index$1.getMenuWidth();
        // Calculate potential menu position
        const menuLeft = data.left;
        const menuRight = data.left + this.menuWidth;
        // Define boundaries
        const leftBoundary = sideMenuWidth + 16; // Left menu + buffer
        const rightBoundary = innerWidth - 16; // Right edge - buffer
        let offset = 0;
        // Check if menu would overlap left menu or go off left edge
        if (menuLeft < leftBoundary) {
            offset = leftBoundary - menuLeft;
        }
        // Check if menu would go off right edge
        else if (menuRight > rightBoundary) {
            offset = rightBoundary - menuRight;
        }
        if (this.menuContainer)
            this.menuContainer.style.setProperty('--pn-action-menu-offset', `${offset}px`);
    }
    getListId(option) {
        return `pn-menu-${option.value}-list`;
    }
    getButtonId(option) {
        return `pn-menu-${option.value}-button`;
    }
    getTriggerIcon() {
        if (this.button?.icon)
            return;
        return chevron_down.chevron_down;
    }
    /** Set the path of open sub menus. */
    getSubMenuPath(options, value, path = []) {
        for (const item of options) {
            const newPath = [...path, item.value];
            if (item.value === value)
                return newPath;
            if (item.options || item.group) {
                const result = this.getSubMenuPath(item.options || item.group, value, newPath);
                if (result)
                    return result;
            }
        }
        return null;
    }
    closeEachSubMenu(preventFocus = false) {
        if (!preventFocus)
            this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });
        const interval = setInterval(() => {
            if (this.smallMenu || this.activeSubmenu.length === 0) {
                clearInterval(interval);
                this.toggleActionMenu(false);
            }
            else {
                this.activeSubmenu.pop();
                this.activeSubmenu = [...this.activeSubmenu];
            }
        }, 150);
    }
    escButton(event, option) {
        const { key } = event;
        if (key === 'Escape') {
            event.preventDefault();
            event.stopImmediatePropagation();
            this.isSubmenuActive(option.value) ? this.toggleSub(option) : this.toggleActionMenu();
        }
    }
    // Animation Start
    dropdownHandler() {
        if (this.open) {
            this.addGlobalEventListeners();
            this.openDropdown(this.menuContainer, this.menuList.clientHeight);
        }
        else {
            this.removeGlobalEventListeners();
            this.closeDropdown(this.menuContainer, this.menuList.clientHeight);
        }
    }
    // Animation end
    async optionSelect(option, click) {
        const type = option?.options?.length ? 'submenu' : !!option.input ? 'input' : option.href ? 'link' : 'button';
        const isSubMenu = type === 'submenu';
        if (isSubMenu)
            this.toggleSub(option);
        else if (type === 'button')
            this.closeEachSubMenu();
        else if (type === 'input')
            option.checked = click.target.checked;
        this.menuOption.emit({
            option,
            type,
            click,
            open: isSubMenu ? this.isSubmenuActive(option.value) : null,
        });
        const target = click.target;
        const element = target.localName === 'input'
            ? target.nextElementSibling
            : target.className === 'pn-action-menu-button'
                ? target
                : target.closest('.pn-action-menu-button');
        const { x, width, y, top } = this.getRect(element);
        const clientCor = { clientX: x + width - 24, clientY: y - top };
        index$1.ripple(click.type === 'click' ? click : clientCor, element);
        this.menuContainer.scrollTo({ top: 0 });
    }
    /** Toggle individual sub-menus inside the action menu by using the `option['value']`. */
    toggleSub(option) {
        const { value } = option;
        const path = this.getSubMenuPath(this.options, value);
        const isActive = this.activeSubmenu.includes(value);
        isActive && path.splice(this.activeSubmenu.indexOf(value), 1);
        const item = this.hostElement.querySelector(`#${this.getListId(option)}`);
        const data = this.getRect(item);
        const spaceLeft = data.left;
        const spaceRight = innerWidth - data.right - 8;
        const fitsLeft = spaceLeft > data.width;
        const fitsRight = spaceRight > data.width;
        const climbUp = this.menuUp && data.top - data.height > 0;
        const yDirection = climbUp ? 'top' : 'bottom';
        if (!isActive && !item.dataset.x)
            item.setAttribute('data-x', this.menuLeft && fitsLeft ? 'left' : fitsRight ? 'right' : fitsLeft ? 'left' : 'center');
        if (!isActive && !item.dataset.y)
            item.setAttribute('data-y', yDirection);
        if (JSON.stringify(path) === JSON.stringify(this.activeSubmenu))
            this.activeSubmenu = this.activeSubmenu.filter(item => item !== value);
        else
            this.activeSubmenu = [...path];
    }
    /** Check if a sub-menu is active. */
    isSubmenuActive(value) {
        return this.activeSubmenu.includes(value);
    }
    isMenuActive() {
        const isRootSubInsideGroup = this.options.find(({ value }) => this.activeSubmenu.every(val => val === value));
        return this.smallMenu && (this.activeSubmenu?.length === 0 || isRootSubInsideGroup);
    }
    isCurrentSubMenu(value) {
        return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);
    }
    getOptionTrailing(option) {
        const useButtonIcon = option.options?.length && chevron_right.chevron_right;
        const useTrailingIcon = option.trailingIcon;
        const useLinkIcon = option.target === '_blank' && open_in_new.open_in_new;
        /** If the user has defined a trialing icon, use it first. */
        const icon = useButtonIcon || useTrailingIcon || useLinkIcon;
        if (icon) {
            return index.h("pn-icon", { icon: icon, color: "blue700", "data-suffix": true, "data-active": this.isSubmenuActive(option.value) });
        }
        if (option.suffix) {
            return index.h("span", { class: "pn-action-menu-item-suffix" }, option.suffix);
        }
    }
    renderCheckbox(option) {
        const id = `pn-menu-${option.value}-label`;
        const idHelper = `pn-menu-${option.value}-helpertext`;
        return (index.h("div", { class: "pn-action-menu-item-content" }, index.h("input", { type: option.input, id: id, class: "pn-action-menu-input", name: option.name, value: option.value, checked: option.checked, disabled: option.disabled, "aria-describedby": option.helpertext ? idHelper : null, onInput: event => this.optionSelect(option, event), tabIndex: this.open ? null : -1 }), index.h("div", { class: "pn-action-menu-button" }, !!option.icon && index.h("pn-icon", { icon: option.icon, color: "blue700" }), index.h("div", { class: "pn-action-menu-item-text" }, index.h("label", { htmlFor: id, class: "pn-action-menu-item-label" }, option.label), option.helpertext && (index.h("p", { id: idHelper, class: "pn-action-menu-item-helpertext" }, index.h("span", null, option.helpertext)))), option.input === 'checkbox' ? (index.h("div", { class: "pn-action-menu-checkbox" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { class: "pn-action-menu-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })))) : (index.h("div", { class: "pn-action-menu-radio" }, index.h("div", { class: "pn-action-menu-radio-outer" }, index.h("div", { class: "pn-action-menu-radio-inner" })))))));
    }
    renderButton(option) {
        const isCloseButton = option.label === 'BACK';
        const isSub = !!option?.options?.length;
        const isGroup = !!option?.group?.length;
        const isLink = !!option.href && !isSub && !isGroup;
        const appendedId = isCloseButton ? '-close' : '';
        const hasIcon = isCloseButton || !!option.icon;
        const trailingObject = isCloseButton ? null : this.getOptionTrailing(option);
        const open = this.isSubmenuActive(option.value);
        const subMenuAttrs = isSub
            ? {
                'aria-haspopup': 'true',
                'aria-controls': open ? this.getListId(option) : null,
                'aria-expanded': open?.toString(),
            }
            : {};
        const attrs = isLink
            ? {
                href: option.href,
                target: option.target,
            }
            : {
                disabled: option.disabled,
            };
        const Tag = isLink ? 'a' : 'button';
        return isGroup ? (index.h("div", { class: "pn-action-menu-group-label" }, index.h("p", { class: "pn-action-menu-p" }, option.label), option.helpertext && index.h("p", { class: "pn-action-menu-group-helpertext" }, option.helpertext))) : (index.h("div", { class: "pn-action-menu-item-content", "data-close": isCloseButton }, index.h(Tag, { id: this.getButtonId(option) + appendedId, class: "pn-action-menu-button", ...subMenuAttrs, ...attrs, tabIndex: this.open ? null : -1, onClick: event => this.optionSelect(option, event), onKeyDown: (event) => this.escButton(event, option) }, hasIcon && index.h("pn-icon", { icon: isCloseButton ? chevron_right.chevron_left : option.icon, color: "blue700" }), index.h("div", { class: "pn-action-menu-item-text" }, index.h("span", { class: "pn-action-menu-item-label" }, isCloseButton ? this.translate('BACK') : option.label), option.helpertext && !isLink && index.h("span", { class: "pn-action-menu-item-helpertext" }, option.helpertext)), trailingObject)));
    }
    renderSub(option) {
        return (index.h("menu", { id: this.getListId(option), "aria-labelledby": this.getButtonId(option), class: "pn-action-menu-sub", "data-open": this.isSubmenuActive(option.value)?.toString(), "data-current": this.isCurrentSubMenu(option.value) }, this.smallMenu && (index.h("li", { class: "pn-action-menu-item" }, this.renderButton({
            label: 'BACK',
            value: option.value,
            options: option.options,
        }))), option.options.map(item => this.renderMenuItem(item))));
    }
    renderGroup(option) {
        return index.h("menu", { class: "pn-action-menu-group" }, option.group.map(item => this.renderMenuItem(item)));
    }
    renderMenuItem(option) {
        const isSub = !!option?.options?.length;
        const isGroup = !isSub && !!option?.group?.length;
        const isCheckbox = !!option.input && !isSub && !isGroup;
        return (index.h("li", { class: "pn-action-menu-item", "data-group": isGroup, "data-sub": isSub }, isCheckbox ? this.renderCheckbox(option) : this.renderButton(option), isSub ? this.renderSub(option) : isGroup && this.renderGroup(option)));
    }
    renderMenu() {
        return (index.h("div", { id: this.menuListId, class: "pn-action-menu-container", role: "region", "aria-labelledby": this.menuButtonId, "data-open": this.open, "data-upwards": this.upwards, "data-small": this.smallMenu, style: { height: '0px' }, ref: el => (this.menuContainer = el) }, index.h("menu", { class: "pn-action-menu-list", "data-current": this.isMenuActive(), ref: el => (this.menuList = el) }, this.options?.map(option => this.renderMenuItem(option)))));
    }
    render() {
        return (index.h(index.Host, { key: 'd77e6c7f658e2552260f5a8a30034a8d68d9bfa2' }, index.h("div", { key: '3d2584a7c12abf5948cec24c967ab573d33dafa0', id: this.menuId !== this.id ? this.menuId : null, class: "pn-action-menu" }, index.h("pn-button", { key: 'f8460fca3784d2cb04ac55bfa0070935006c864d', icon: this.getTriggerIcon(), ...this.button, buttonId: this.menuButtonId, tooltipUp: !this.upwards, ariahaspopup: "true", ariacontrols: this.open ? this.menuListId : null, ariaexpanded: this.open.toString(), "data-default-icon": !this.button?.icon, onPnClick: () => this.toggleActionMenu(), ref: el => (this.menuTrigger = el) }), this.renderMenu())));
    }
    static get watchers() { return {
        "options": [{
                "handleOptions": 0
            }],
        "open": [{
                "openHandler": 0
            }],
        "menuId": [{
                "handleMenuId": 0
            }]
    }; }
};
PnActionMenu.style = pnActionMenuCss();

exports.pn_action_menu = PnActionMenu;
