@postnord/web-components/components/pn-action-menu.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
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}