@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/umd/modules/@postnord/web-components/components/pn-action-menu.js

@@ -2,459 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, Mixin, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as animateHeightFactory } from './index2.js';
-import { u as uuidv4, k as awaitTopbar, e as en, i as isSmallScreen, j as getTotalHeightOffset, h as getMenuWidth, o as ripple } from './helpers.js';
-import { c as chevron_down } from './chevron_down.js';
-import { c as chevron_right, a as chevron_left } from './chevron_right.js';
-import { o as open_in_new } from './open_in_new.js';
-import { d as defineCustomElement$4 } from './pn-button2.js';
-import { d as defineCustomElement$3 } from './pn-icon2.js';
-import { d as defineCustomElement$2 } from './pn-spinner2.js';
-
-const translations = {
-    BACK: {
-        sv: 'Tillbaka',
-        en: 'Back',
-        da: 'Tilbage',
-        fi: 'Takaisin',
-        no: 'Tilbake',
-    },
-};
-
-const pnActionMenuCss = "pn-action-menu{--pn-menu-height:unset;display:inline-block;position:relative}pn-action-menu .pn-action-menu{position:relative}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}pn-action-menu .pn-action-menu-container[data-open]{visibility:visible;overflow:unset}pn-action-menu .pn-action-menu-container[data-left]{right:0;left:unset}pn-action-menu .pn-action-menu-container[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left}pn-action-menu .pn-action-menu-container[data-moving]{overflow:hidden;visibility:visible;pointer-events:none}pn-action-menu .pn-action-menu-container{}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){pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-list{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-list{transition-delay:0.2s}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-list[data-current]{overflow-x:auto;visibility:visible;transition-delay:0s}pn-action-menu .pn-action-menu-container[data-small][data-moving]>.pn-action-menu-list{visibility:visible}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-item{position:unset}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}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-sub[data-current]{visibility:visible;overflow-x:auto}pn-action-menu .pn-action-menu-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-corner,pn-action-menu .pn-action-menu-container::-webkit-scrollbar-button{display:none}pn-action-menu .pn-action-menu-list{margin:0;padding:0;list-style:none;height:var(--pn-menu-height)}pn-action-menu .pn-action-menu-list::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-corner,pn-action-menu .pn-action-menu-list::-webkit-scrollbar-button{display:none}pn-action-menu .pn-action-menu-group{margin:0;padding:0;list-style:none}pn-action-menu .pn-action-menu-group-label{display:block;color:#2d2013;font-weight:700;font-size:0.875em;padding:1em 1em 0.5em}pn-action-menu .pn-action-menu-group-helpertext{display:block;color:#5e554a;font-weight:400;margin:0.25em 0 0}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}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-corner,pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-button{display:none}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){pn-action-menu .pn-action-menu-sub{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-sub{transition-delay:0s, 0s, 0.2s}pn-action-menu .pn-action-menu-sub[data-open=true]{transform:translateX(0);opacity:1;visibility:visible;transition-delay:0s, 0s, 0s}pn-action-menu .pn-action-menu-sub[data-open=false]{pointer-events:none}pn-action-menu .pn-action-menu-sub[data-x=left]{left:-100%}pn-action-menu .pn-action-menu-sub[data-x=center]{left:0}pn-action-menu .pn-action-menu-sub[data-x=right]{left:100%}pn-action-menu .pn-action-menu-sub[data-y=top]{top:unset;bottom:0}pn-action-menu .pn-action-menu-sub[data-y=bottom]{top:0}pn-action-menu .pn-action-menu-item{position:relative}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}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}pn-action-menu .pn-action-menu-item-text{display:flex;flex-direction:column;margin-right:auto}pn-action-menu .pn-action-menu-item-label{color:#005d92;font-weight:500;text-decoration:none}pn-action-menu .pn-action-menu-item-suffix{margin-left:auto;font-weight:400;color:#5e554a}pn-action-menu .pn-action-menu-item-helpertext{color:#5e554a;font-weight:400}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}pn-action-menu .pn-action-menu-item-content[data-close]{border-bottom:0.0625em solid #d3cecb}pn-action-menu .pn-action-menu-item-content>pn-icon{padding:0 0.25em}pn-action-menu .pn-action-menu-item[data-group],pn-action-menu .pn-action-menu-item[data-sub]{flex-direction:column}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){pn-action-menu .pn-action-menu-button{transition-duration:0s;transition-delay:0s}}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}}pn-action-menu .pn-action-menu-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-action-menu .pn-action-menu-button:focus-visible{outline-color:#005d92}pn-action-menu .pn-action-menu-button{outline-offset:-0.2rem}pn-action-menu .pn-action-menu-button>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){pn-action-menu .pn-action-menu-button>pn-icon .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-button>pn-icon[data-suffix][data-active]>.pn-icon-svg>path{transform:rotate(180deg)}pn-action-menu .pn-action-menu-button>pn-icon:last-child{margin-left:auto}pn-action-menu .pn-action-menu-button:disabled{pointer-events:none;color:#5e554a;background-color:#f3f2f2}pn-action-menu .pn-action-menu-button:hover{background-color:#effbff}pn-action-menu .pn-action-menu-button:focus{background-color:#e0f8ff}pn-action-menu .pn-action-menu-button[href]:hover,pn-action-menu .pn-action-menu-button[href]:focus{text-decoration-color:#005d92}pn-action-menu .pn-action-menu-button{}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){pn-action-menu .pn-action-menu-checkbox{transition-duration:0s;transition-delay:0s}}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){pn-action-menu .pn-action-menu-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-checkbox svg polyline{transition-delay:0s}pn-action-menu .pn-action-menu-checkbox svg polyline.pn-action-menu-checkbox-checkmark-path{stroke-dashoffset:23}pn-action-menu .pn-action-menu-radio{display:flex;gap:0.75em;padding:0;margin-left:auto}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){pn-action-menu .pn-action-menu-radio-outer{transition-duration:0s;transition-delay:0s}}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){pn-action-menu .pn-action-menu-radio-inner{transition-duration:0s;transition-delay:0s}}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}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button{background-color:#effbff}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#005d92;background-color:#005d92}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}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-inner{transform:scale(1);background-color:#005d92}pn-action-menu .pn-action-menu-input:checked:hover{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:disabled{pointer-events:none}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button{pointer-events:none;color:#5e554a;background-color:#f3f2f2}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-item-label{color:#5e554a}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-checkbox{background-color:#f3f2f2}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#969087;background-color:#f3f2f2}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-icon-svg path{fill:#5e554a}pn-action-menu .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-radio-inner{background-color:#969087}pn-action-menu .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#969087;background-color:#969087}pn-action-menu .pn-action-menu-input:hover+.pn-action-menu-button{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:hover+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92;background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-checkbox,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}pn-action-menu .pn-action-menu-p{margin:0}pn-action-menu .pn-action-menu>pn-button[data-default-icon] .pn-button[aria-expanded=true] .pn-icon-svg{transform:rotate(180deg);transition-delay:0s}pn-action-menu .pn-action-menu>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){pn-action-menu .pn-action-menu>pn-button[data-default-icon] .pn-button .pn-icon-svg{transition-duration:0s;transition-delay:0s}}";
-
-const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu extends Mixin(animateHeightFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.menuToggle = createEvent(this, "menuToggle", 7);
-        this.menuVisible = createEvent(this, "menuVisible", 7);
-        this.menuOption = createEvent(this, "menuOption", 7);
-    }
-    id = `pn-action-menu-${uuidv4()}`;
-    menuButtonId = `${this.id}-button`;
-    menuListId = `${this.id}-list`;
-    menuTrigger;
-    menuContainer;
-    menuList;
-    timeout;
-    /** 16em */
-    menuWidth = 256;
-    get hostElement() { return 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 awaitTopbar(this.hostElement);
-    }
-    componentDidLoad() {
-        this.setOffset();
-        requestAnimationFrame(() => this.open && this.dropdownHandler());
-    }
-    translate(prop) {
-        return translations[prop][this.language || 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 = 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 - 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 = 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;
-    }
-    /** 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 };
-        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;
-        const useTrailingIcon = option.trailingIcon;
-        const useLinkIcon = option.target === '_blank' && open_in_new;
-        /** If the user has defined a trialing icon, use it first. */
-        const icon = useButtonIcon || useTrailingIcon || useLinkIcon;
-        if (icon) {
-            return h("pn-icon", { icon: icon, color: "blue700", "data-suffix": true, "data-active": this.isSubmenuActive(option.value) });
-        }
-        if (option.suffix) {
-            return 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 (h("div", { class: "pn-action-menu-item-content" }, 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 }), h("div", { class: "pn-action-menu-button" }, !!option.icon && h("pn-icon", { icon: option.icon, color: "blue700" }), h("div", { class: "pn-action-menu-item-text" }, h("label", { htmlFor: id, class: "pn-action-menu-item-label" }, option.label), option.helpertext && (h("p", { id: idHelper, class: "pn-action-menu-item-helpertext" }, h("span", null, option.helpertext)))), option.input === 'checkbox' ? (h("div", { class: "pn-action-menu-checkbox" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "pn-action-menu-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })))) : (h("div", { class: "pn-action-menu-radio" }, h("div", { class: "pn-action-menu-radio-outer" }, 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 ? (h("div", { class: "pn-action-menu-group-label" }, h("p", { class: "pn-action-menu-p" }, option.label), option.helpertext && h("p", { class: "pn-action-menu-group-helpertext" }, option.helpertext))) : (h("div", { class: "pn-action-menu-item-content", "data-close": isCloseButton }, 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 && h("pn-icon", { icon: isCloseButton ? chevron_left : option.icon, color: "blue700" }), h("div", { class: "pn-action-menu-item-text" }, h("span", { class: "pn-action-menu-item-label" }, isCloseButton ? this.translate('BACK') : option.label), option.helpertext && !isLink && h("span", { class: "pn-action-menu-item-helpertext" }, option.helpertext)), trailingObject)));
-    }
-    renderSub(option) {
-        return (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 && (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 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 (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 (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) }, 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 (h(Host, { key: 'd77e6c7f658e2552260f5a8a30034a8d68d9bfa2' }, h("div", { key: '3d2584a7c12abf5948cec24c967ab573d33dafa0', id: this.menuId !== this.id ? this.menuId : null, class: "pn-action-menu" }, 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"],
-        "open": ["openHandler"],
-        "menuId": ["handleMenuId"]
-    }; }
-    static get style() { return pnActionMenuCss; }
-}, [768, "pn-action-menu", {
-        "options": [16],
-        "button": [16],
-        "menuId": [1, "menu-id"],
-        "language": [1025],
-        "open": [1540],
-        "menuUp": [4, "menu-up"],
-        "menuLeft": [4, "menu-left"],
-        "isClosing": [32],
-        "isExpanding": [32],
-        "smallMenu": [32],
-        "upwards": [32],
-        "activeSubmenu": [32]
-    }, [[9, "resize", "handleResize"]], {
-        "options": ["handleOptions"],
-        "open": ["openHandler"],
-        "menuId": ["handleMenuId"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-action-menu", "pn-button", "pn-icon", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-action-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnActionMenu$1);
-            }
-            break;
-        case "pn-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pn-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnActionMenu = PnActionMenu$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnActionMenu, defineCustomElement };
-//# sourceMappingURL=pn-action-menu.js.map
-
-//# sourceMappingURL=pn-action-menu.js.map
+import{transformTag as n,proxyCustomElement as t,Mixin as e,createEvent as i,h as o,Host as a}from"@stencil/core/internal/client";import{a as r}from"./index2.js";import{u as c,k as s,e as u,i as p,j as m,h as l,o as d}from"./helpers.js";import{c as b}from"./chevron_down.js";import{c as h,a as f}from"./chevron_right.js";import{o as g}from"./open_in_new.js";import{d as k}from"./pn-button2.js";import{d as $}from"./pn-icon2.js";import{d as v}from"./pn-spinner2.js";const y={BACK:{sv:"Tillbaka",en:"Back",da:"Tilbage",fi:"Takaisin",no:"Tilbake"}},x=t(class extends(e(r)){constructor(n){super(!1),!1!==n&&this.__registerHost(),this.menuToggle=i(this,"menuToggle",7),this.menuVisible=i(this,"menuVisible",7),this.menuOption=i(this,"menuOption",7)}id="pn-action-menu-"+c();menuButtonId=this.id+"-button";menuListId=this.id+"-list";menuTrigger;menuContainer;menuList;timeout;menuWidth=256;get hostElement(){return this}smallMenu=null;upwards=!1;activeSubmenu=[];options=[];button;menuId=this.id;language=null;open=!1;menuUp=!1;menuLeft=!1;menuToggle;menuVisible;menuOption;handleOptions(){this.setMenuLayout()}openHandler(){this.setAnimationDuration(),requestAnimationFrame((()=>{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 n=this.hostElement.querySelectorAll("[data-x]");Array.from(n).forEach((n=>{n.removeAttribute("data-x"),n.removeAttribute("data-y")}))}this.menuVisible.emit({visible:this.open})}),this.animationDuration)}))}handleMenuId(){this.menuButtonId=this.menuId+"-button",this.menuListId=this.menuId+"-list"}handleResize(){this.open&&this.toggleActionMenu(!1)}async componentWillLoad(){this.options.length||console.warn(this.hostElement.localName+": No options set."),this.handleMenuId(),this.setAnimationDuration(),null!==this.language&&await s(this.hostElement)}componentDidLoad(){this.setOffset(),requestAnimationFrame((()=>this.open&&this.dropdownHandler()))}translate(n){return y[n][this.language||u]}globalEvents=n=>{const t=n.target,e=t?.closest(this.hostElement.localName);e||this.closeEachSubMenu(!0)};addGlobalEventListeners(){this.hostElement.getRootNode().addEventListener("click",this.globalEvents)}removeGlobalEventListeners(){this.hostElement.getRootNode().removeEventListener("click",this.globalEvents)}toggleActionMenu(n){this.open=n??!this.open}setMenuLayout(){if(!this.menuContainer)return;this.isMoving()||this.resetMaxHeight();const n=this.getMenuMeasurements();this.setDirection(n),this.setMenuSize(n),this.setMaxHeight(n)}setDirection({hUp:n,hDown:t,sUp:e,sDown:i}){this.upwards=this.menuUp&&e>n||!(i>t)&&!(i>e)}setMenuSize({hUp:n,hDown:t,sUp:e,sDown:i}){const o=p()||!(this.upwards?e>n:i>t);o!==this.smallMenu&&(this.smallMenu=o)}setMaxHeight({hUp:n,hDown:t,sUp:e,sDown:i}){this.smallMenu?this.hostElement.style.setProperty("--pn-menu-height",(this.upwards?n>e?n-16:n:t>i?t-8:t)+"px"):this.resetMaxHeight()}resetMaxHeight(){this.hostElement.style.setProperty("--pn-menu-height","unset")}getRect(n){return n.getBoundingClientRect()}getMenuMeasurements(){const n=Array.from(this.menuContainer.querySelectorAll("menu")),t=Math.max(...n.map((n=>n.scrollHeight))),e=this.getRect(this.menuTrigger),i=this.getRect(this.menuContainer),o=e.top-m(),a=innerHeight-i.top;return{hUp:o>t?t:o,hDown:a>t?t:a,sUp:o,sDown:a}}setOffset(){const n=this.getRect(this.hostElement),t=l(),e=n.left,i=n.left+this.menuWidth,o=t+16,a=innerWidth-16;let r=0;e<o?r=o-e:i>a&&(r=a-i),this.menuContainer&&this.menuContainer.style.setProperty("--pn-action-menu-offset",r+"px")}getListId(n){return`pn-menu-${n.value}-list`}getButtonId(n){return`pn-menu-${n.value}-button`}getTriggerIcon(){if(!this.button?.icon)return b}getSubMenuPath(n,t,e=[]){for(const i of n){const n=[...e,i.value];if(i.value===t)return n;if(i.options||i.group){const e=this.getSubMenuPath(i.options||i.group,t,n);if(e)return e}}return null}closeEachSubMenu(n=!1){n||this.menuTrigger?.querySelector("button")?.focus({preventScroll:!0});const t=setInterval((()=>{this.smallMenu||0===this.activeSubmenu.length?(clearInterval(t),this.toggleActionMenu(!1)):(this.activeSubmenu.pop(),this.activeSubmenu=[...this.activeSubmenu])}),150)}escButton(n,t){const{key:e}=n;"Escape"===e&&(n.preventDefault(),n.stopImmediatePropagation(),this.isSubmenuActive(t.value)?this.toggleSub(t):this.toggleActionMenu())}dropdownHandler(){this.open?(this.addGlobalEventListeners(),this.openDropdown(this.menuContainer,this.menuList.clientHeight)):(this.removeGlobalEventListeners(),this.closeDropdown(this.menuContainer,this.menuList.clientHeight))}async optionSelect(n,t){const e=n?.options?.length?"submenu":n.input?"input":n.href?"link":"button",i="submenu"===e;i?this.toggleSub(n):"button"===e?this.closeEachSubMenu():"input"===e&&(n.checked=t.target.checked),this.menuOption.emit({option:n,type:e,click:t,open:i?this.isSubmenuActive(n.value):null});const o=t.target,a="input"===o.localName?o.nextElementSibling:"pn-action-menu-button"===o.className?o:o.closest(".pn-action-menu-button"),{x:r,width:c,y:s,top:u}=this.getRect(a);d("click"===t.type?t:{clientX:r+c-24,clientY:s-u},a),this.menuContainer.scrollTo({top:0})}toggleSub(n){const{value:t}=n,e=this.getSubMenuPath(this.options,t),i=this.activeSubmenu.includes(t);i&&e.splice(this.activeSubmenu.indexOf(t),1);const o=this.hostElement.querySelector("#"+this.getListId(n)),a=this.getRect(o),r=innerWidth-a.right-8,c=a.left>a.width,s=this.menuUp&&a.top-a.height>0?"top":"bottom";i||o.dataset.x||o.setAttribute("data-x",this.menuLeft&&c?"left":r>a.width?"right":c?"left":"center"),i||o.dataset.y||o.setAttribute("data-y",s),this.activeSubmenu=JSON.stringify(e)===JSON.stringify(this.activeSubmenu)?this.activeSubmenu.filter((n=>n!==t)):[...e]}isSubmenuActive(n){return this.activeSubmenu.includes(n)}isMenuActive(){const n=this.options.find((({value:n})=>this.activeSubmenu.every((t=>t===n))));return this.smallMenu&&(0===this.activeSubmenu?.length||n)}isCurrentSubMenu(n){return!(this.activeSubmenu[this.activeSubmenu.length-1]!==n)}getOptionTrailing(n){const t=n.options?.length&&h||n.trailingIcon||"_blank"===n.target&&g;return t?o("pn-icon",{icon:t,color:"blue700","data-suffix":!0,"data-active":this.isSubmenuActive(n.value)}):n.suffix?o("span",{class:"pn-action-menu-item-suffix"},n.suffix):void 0}renderCheckbox(n){const t=`pn-menu-${n.value}-label`,e=`pn-menu-${n.value}-helpertext`;return o("div",{class:"pn-action-menu-item-content"},o("input",{type:n.input,id:t,class:"pn-action-menu-input",name:n.name,value:n.value,checked:n.checked,disabled:n.disabled,"aria-describedby":n.helpertext?e:null,onInput:t=>this.optionSelect(n,t),tabIndex:this.open?null:-1}),o("div",{class:"pn-action-menu-button"},!!n.icon&&o("pn-icon",{icon:n.icon,color:"blue700"}),o("div",{class:"pn-action-menu-item-text"},o("label",{htmlFor:t,class:"pn-action-menu-item-label"},n.label),n.helpertext&&o("p",{id:e,class:"pn-action-menu-item-helpertext"},o("span",null,n.helpertext))),"checkbox"===n.input?o("div",{class:"pn-action-menu-checkbox"},o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},o("polyline",{class:"pn-action-menu-checkbox-checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"}))):o("div",{class:"pn-action-menu-radio"},o("div",{class:"pn-action-menu-radio-outer"},o("div",{class:"pn-action-menu-radio-inner"})))))}renderButton(n){const t="BACK"===n.label,e=!!n?.options?.length,i=!!n?.group?.length,a=!!n.href&&!e&&!i,r=t?"-close":"",c=t||!!n.icon,s=t?null:this.getOptionTrailing(n),u=this.isSubmenuActive(n.value),p=e?{"aria-haspopup":"true","aria-controls":u?this.getListId(n):null,"aria-expanded":u?.toString()}:{},m=a?{href:n.href,target:n.target}:{disabled:n.disabled},l=a?"a":"button";return i?o("div",{class:"pn-action-menu-group-label"},o("p",{class:"pn-action-menu-p"},n.label),n.helpertext&&o("p",{class:"pn-action-menu-group-helpertext"},n.helpertext)):o("div",{class:"pn-action-menu-item-content","data-close":t},o(l,{id:this.getButtonId(n)+r,class:"pn-action-menu-button",...p,...m,tabIndex:this.open?null:-1,onClick:t=>this.optionSelect(n,t),onKeyDown:t=>this.escButton(t,n)},c&&o("pn-icon",{icon:t?f:n.icon,color:"blue700"}),o("div",{class:"pn-action-menu-item-text"},o("span",{class:"pn-action-menu-item-label"},t?this.translate("BACK"):n.label),n.helpertext&&!a&&o("span",{class:"pn-action-menu-item-helpertext"},n.helpertext)),s))}renderSub(n){return o("menu",{id:this.getListId(n),"aria-labelledby":this.getButtonId(n),class:"pn-action-menu-sub","data-open":this.isSubmenuActive(n.value)?.toString(),"data-current":this.isCurrentSubMenu(n.value)},this.smallMenu&&o("li",{class:"pn-action-menu-item"},this.renderButton({label:"BACK",value:n.value,options:n.options})),n.options.map((n=>this.renderMenuItem(n))))}renderGroup(n){return o("menu",{class:"pn-action-menu-group"},n.group.map((n=>this.renderMenuItem(n))))}renderMenuItem(n){const t=!!n?.options?.length,e=!t&&!!n?.group?.length;return o("li",{class:"pn-action-menu-item","data-group":e,"data-sub":t},!n.input||t||e?this.renderButton(n):this.renderCheckbox(n),t?this.renderSub(n):e&&this.renderGroup(n))}renderMenu(){return o("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:n=>this.menuContainer=n},o("menu",{class:"pn-action-menu-list","data-current":this.isMenuActive(),ref:n=>this.menuList=n},this.options?.map((n=>this.renderMenuItem(n)))))}render(){return o(a,{key:"d77e6c7f658e2552260f5a8a30034a8d68d9bfa2"},o("div",{key:"3d2584a7c12abf5948cec24c967ab573d33dafa0",id:this.menuId!==this.id?this.menuId:null,class:"pn-action-menu"},o("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,"data-default-icon":!this.button?.icon,onPnClick:()=>this.toggleActionMenu(),ref:n=>this.menuTrigger=n}),this.renderMenu()))}static get watchers(){return{options:[{handleOptions:0}],open:[{openHandler:0}],menuId:[{handleMenuId:0}]}}static get style(){return`${n("pn-action-menu")}{--pn-menu-height:unset;display:inline-block;position:relative}${n("pn-action-menu")} .pn-action-menu{position:relative}${n("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}${n("pn-action-menu")} .pn-action-menu-container[data-open]{visibility:visible;overflow:unset}${n("pn-action-menu")} .pn-action-menu-container[data-left]{right:0;left:unset}${n("pn-action-menu")} .pn-action-menu-container[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left}${n("pn-action-menu")} .pn-action-menu-container[data-moving]{overflow:hidden;visibility:visible;pointer-events:none}${n("pn-action-menu")} .pn-action-menu-container{}${n("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){${n("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{transition-duration:0s;transition-delay:0s}}${n("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list{transition-delay:0.2s}${n("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-list[data-current]{overflow-x:auto;visibility:visible;transition-delay:0s}${n("pn-action-menu")} .pn-action-menu-container[data-small][data-moving]>.pn-action-menu-list{visibility:visible}${n("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-item{position:unset}${n("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}${n("pn-action-menu")} .pn-action-menu-container[data-small] .pn-action-menu-sub[data-current]{visibility:visible;overflow-x:auto}${n("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${n("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${n("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${n("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${n("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-corner,${n("pn-action-menu")} .pn-action-menu-container::-webkit-scrollbar-button{display:none}${n("pn-action-menu")} .pn-action-menu-list{margin:0;padding:0;list-style:none;height:var(--pn-menu-height)}${n("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${n("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${n("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${n("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${n("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-corner,${n("pn-action-menu")} .pn-action-menu-list::-webkit-scrollbar-button{display:none}${n("pn-action-menu")} .pn-action-menu-group{margin:0;padding:0;list-style:none}${n("pn-action-menu")} .pn-action-menu-group-label{display:block;color:#2d2013;font-weight:700;font-size:0.875em;padding:1em 1em 0.5em}${n("pn-action-menu")} .pn-action-menu-group-helpertext{display:block;color:#5e554a;font-weight:400;margin:0.25em 0 0}${n("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}${n("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${n("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${n("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${n("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${n("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-corner,${n("pn-action-menu")} .pn-action-menu-sub::-webkit-scrollbar-button{display:none}${n("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){${n("pn-action-menu")} .pn-action-menu-sub{transition-duration:0s;transition-delay:0s}}${n("pn-action-menu")} .pn-action-menu-sub{transition-delay:0s, 0s, 0.2s}${n("pn-action-menu")} .pn-action-menu-sub[data-open=true]{transform:translateX(0);opacity:1;visibility:visible;transition-delay:0s, 0s, 0s}${n("pn-action-menu")} .pn-action-menu-sub[data-open=false]{pointer-events:none}${n("pn-action-menu")} .pn-action-menu-sub[data-x=left]{left:-100%}${n("pn-action-menu")} .pn-action-menu-sub[data-x=center]{left:0}${n("pn-action-menu")} .pn-action-menu-sub[data-x=right]{left:100%}${n("pn-action-menu")} .pn-action-menu-sub[data-y=top]{top:unset;bottom:0}${n("pn-action-menu")} .pn-action-menu-sub[data-y=bottom]{top:0}${n("pn-action-menu")} .pn-action-menu-item{position:relative}${n("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}${n("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}${n("pn-action-menu")} .pn-action-menu-item-text{display:flex;flex-direction:column;margin-right:auto}${n("pn-action-menu")} .pn-action-menu-item-label{color:#005d92;font-weight:500;text-decoration:none}${n("pn-action-menu")} .pn-action-menu-item-suffix{margin-left:auto;font-weight:400;color:#5e554a}${n("pn-action-menu")} .pn-action-menu-item-helpertext{color:#5e554a;font-weight:400}${n("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}${n("pn-action-menu")} .pn-action-menu-item-content[data-close]{border-bottom:0.0625em solid #d3cecb}${n("pn-action-menu")} .pn-action-menu-item-content>${n("pn-icon")}{padding:0 0.25em}${n("pn-action-menu")} .pn-action-menu-item[data-group],${n("pn-action-menu")} .pn-action-menu-item[data-sub]{flex-direction:column}${n("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){${n("pn-action-menu")} .pn-action-menu-button{transition-duration:0s;transition-delay:0s}}${n("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}}${n("pn-action-menu")} .pn-action-menu-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${n("pn-action-menu")} .pn-action-menu-button:focus-visible{outline-color:#005d92}${n("pn-action-menu")} .pn-action-menu-button{outline-offset:-0.2rem}${n("pn-action-menu")} .pn-action-menu-button>${n("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){${n("pn-action-menu")} .pn-action-menu-button>${n("pn-icon")} .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}${n("pn-action-menu")} .pn-action-menu-button>${n("pn-icon")}[data-suffix][data-active]>.pn-icon-svg>path{transform:rotate(180deg)}${n("pn-action-menu")} .pn-action-menu-button>${n("pn-icon")}:last-child{margin-left:auto}${n("pn-action-menu")} .pn-action-menu-button:disabled{pointer-events:none;color:#5e554a;background-color:#f3f2f2}${n("pn-action-menu")} .pn-action-menu-button:hover{background-color:#effbff}${n("pn-action-menu")} .pn-action-menu-button:focus{background-color:#e0f8ff}${n("pn-action-menu")} .pn-action-menu-button[href]:hover,${n("pn-action-menu")} .pn-action-menu-button[href]:focus{text-decoration-color:#005d92}${n("pn-action-menu")} .pn-action-menu-button{}${n("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){${n("pn-action-menu")} .pn-action-menu-checkbox{transition-duration:0s;transition-delay:0s}}${n("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){${n("pn-action-menu")} .pn-action-menu-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${n("pn-action-menu")} .pn-action-menu-checkbox svg polyline{transition-delay:0s}${n("pn-action-menu")} .pn-action-menu-checkbox svg polyline.pn-action-menu-checkbox-checkmark-path{stroke-dashoffset:23}${n("pn-action-menu")} .pn-action-menu-radio{display:flex;gap:0.75em;padding:0;margin-left:auto}${n("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){${n("pn-action-menu")} .pn-action-menu-radio-outer{transition-duration:0s;transition-delay:0s}}${n("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){${n("pn-action-menu")} .pn-action-menu-radio-inner{transition-duration:0s;transition-delay:0s}}${n("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}${n("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button{background-color:#effbff}${n("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#005d92;background-color:#005d92}${n("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}${n("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92}${n("pn-action-menu")} .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-inner{transform:scale(1);background-color:#005d92}${n("pn-action-menu")} .pn-action-menu-input:checked:hover{background-color:#e0f8ff}${n("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}${n("pn-action-menu")} .pn-action-menu-input:disabled{pointer-events:none}${n("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button{pointer-events:none;color:#5e554a;background-color:#f3f2f2}${n("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-item-label{color:#5e554a}${n("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-checkbox{background-color:#f3f2f2}${n("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#969087;background-color:#f3f2f2}${n("pn-action-menu")} .pn-action-menu-input:disabled+.pn-action-menu-button .pn-icon-svg path{fill:#5e554a}${n("pn-action-menu")} .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-radio-inner{background-color:#969087}${n("pn-action-menu")} .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#969087;background-color:#969087}${n("pn-action-menu")} .pn-action-menu-input:hover+.pn-action-menu-button{background-color:#e0f8ff}${n("pn-action-menu")} .pn-action-menu-input:hover+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92;background-color:#e0f8ff}${n("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}${n("pn-action-menu")} .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-checkbox,${n("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}${n("pn-action-menu")} .pn-action-menu-p{margin:0}${n("pn-action-menu")} .pn-action-menu>${n("pn-button")}[data-default-icon] .pn-button[aria-expanded=true] .pn-icon-svg{transform:rotate(180deg);transition-delay:0s}${n("pn-action-menu")} .pn-action-menu>${n("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){${n("pn-action-menu")} .pn-action-menu>${n("pn-button")}[data-default-icon] .pn-button .pn-icon-svg{transition-duration:0s;transition-delay:0s}}`}},[512,"pn-action-menu",{options:[16],button:[16],menuId:[1,"menu-id"],language:[1025],open:[1540],menuUp:[4,"menu-up"],menuLeft:[4,"menu-left"],isClosing:[32],isExpanding:[32],smallMenu:[32],upwards:[32],activeSubmenu:[32]},[[9,"resize","handleResize"]],{options:[{handleOptions:0}],open:[{openHandler:0}],menuId:[{handleMenuId:0}]}]),w=x,z=function(){"undefined"!=typeof customElements&&["pn-action-menu","pn-button","pn-icon","pn-spinner"].forEach((t=>{switch(t){case"pn-action-menu":customElements.get(n(n(t)))||customElements.define(n(n(t)),x);break;case"pn-button":customElements.get(n(n(t)))||k();break;case"pn-icon":customElements.get(n(n(t)))||$();break;case"pn-spinner":customElements.get(n(n(t)))||v()}}))};export{w as PnActionMenu,z as defineCustomElement}