UNPKG

@postnord/web-components

Version:

PostNord Web Components

6 lines 25 kB
/*! * Built with Stencil * By PostNord. */ import{r as n,c as t,g as i,h as e,a as o}from"./p-43660913.js";import{u as a,k as s,e as c,r,j as u,h as p,o as m,i as l}from"./p-f64d17a6.js";import{a as d}from"./p-bf967b50.js";import{a as h,b}from"./p-c96ff403.js";import{o as f}from"./p-773aa70a.js";const g={BACK:{sv:"Tillbaka",en:"Back",da:"Tilbage",fi:"Takaisin",no:"Tilbake"}};const k="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[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);transition-delay:0.2s}@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[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;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0s, 0s, 0.2s}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}@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[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);outline:0.2rem solid transparent;outline-offset:0.2rem;outline-offset:-0.2rem;}@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:focus-visible{outline-color:#005d92}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-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);transition-delay:0s}@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.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 v=k;const y=class{constructor(i){n(this,i);this.menuToggle=t(this,"menuToggle",7);this.menuVisible=t(this,"menuVisible",7);this.menuOption=t(this,"menuOption",7);this.smallMenu=null;this.upwards=false;this.activeSubmenu=[];this.isClosing=false;this.isExpanding=false;this.options=[];this.button=undefined;this.menuId=this.id;this.language=null;this.open=false;this.menuUp=false;this.menuLeft=false}id=`pn-action-menu-${a()}`;menuButtonId=`${this.id}-button`;menuListId=`${this.id}-list`;menuTrigger;menuContainer;menuList;animation;duration=400;animationDuration=this.duration;timeout;menuWidth=256;get hostElement(){return i(this)}menuToggle;menuVisible;menuOption;handleOptions(){this.setMenuLayout()}openHandler(){this.setAnimationDuration();requestAnimationFrame((()=>{if(this.open&&!(this.isClosing||this.isExpanding)){this.setOffset();this.setMenuLayout()}this.gridHandler();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(){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 s(this.hostElement)}componentDidLoad(){this.setOffset();if(this.open)this.gridHandler()}translate(n){return g[n][this.language||c]}toggleActionMenu(n){this.open=n??!this.open}setMenuLayout(){if(!this.menuContainer)return;if(!(this.isClosing||this.isExpanding))this.resetMaxHeight();const n=this.getMenuMeasurements();this.setDirection(n);this.setMenuSize(n);this.setMaxHeight(n)}setDirection({hUp:n,hDown:t,sUp:i,sDown:e}){const o=i>n;const a=e>t;const s=e>i;this.upwards=this.menuUp&&o||!a&&!s}setMenuSize({hUp:n,hDown:t,sUp:i,sDown:e}){const o=l();const a=this.upwards?i>n:e>t;const s=o||!a;if(s!==this.smallMenu){this.smallMenu=s}}setMaxHeight({hUp:n,hDown:t,sUp:i,sDown:e}){if(this.smallMenu){const o=n>i?n-16:n;const a=t>e?t-8:t;this.hostElement.style.setProperty("--pn-menu-height",`${this.upwards?o:a}px`)}else this.resetMaxHeight()}resetMaxHeight(){this.hostElement.style.setProperty("--pn-menu-height","unset")}setAnimationDuration(){if(r())this.animationDuration=0;else this.animationDuration=this.duration}getRect(n){return n.getBoundingClientRect()}getMenuMeasurements(){const n=Array.from(this.menuContainer.querySelectorAll("menu"));const t=Math.max(...n.map((n=>n.scrollHeight)));const i=this.getRect(this.menuTrigger);const e=this.getRect(this.menuContainer);const o=i.top-u();const a=o>t?t:o;const s=innerHeight-e.top;const c=s>t?t:s;return{hUp:a,hDown:c,sUp:o,sDown:s}}setOffset(){const n=this.getRect(this.hostElement);const t=n.left-p()+this.menuWidth;const i=t>innerWidth;const e=i?t-innerWidth+16:0;if(this.menuContainer)this.menuContainer.style.setProperty("--pn-action-menu-offset",`-${e}px`)}getListId(n){return`pn-menu-${n.value}-list`}getButtonId(n){return`pn-menu-${n.value}-button`}getTriggerIcon(){if(this.button?.icon)return;return d}getSubMenuPath(n,t,i=[]){for(const e of n){const n=[...i,e.value];if(e.value===t)return n;if(e.options||e.group){const i=this.getSubMenuPath(e.options||e.group,t,n);if(i)return i}}return null}closeEachSubMenu(){this.menuTrigger?.querySelector("button")?.focus({preventScroll:true});const n=setInterval((()=>{if(this.smallMenu||this.activeSubmenu.length===0){clearInterval(n);this.toggleActionMenu(false)}else{this.activeSubmenu.pop();this.activeSubmenu=[...this.activeSubmenu]}}),150)}escButton(n,t){const{key:i}=n;if(i==="Escape"){n.preventDefault();n.stopImmediatePropagation();this.isSubmenuActive(t.value)?this.toggleSub(t):this.toggleActionMenu()}}gridHandler(){if(this.open)this.openGrid();else this.closeGrid()}openGrid(){const n=this.getRect(this.menuList);const{clientHeight:t}=this.menuContainer;const i=this.isClosing?t:0;this.menuContainer.style.height=`${n.height}px`;this.isExpanding=true;this.animateGrid(true,`${i}px`,`${n.height}px`)}closeGrid(){const n=this.getRect(this.menuList);const{clientHeight:t}=this.menuContainer;const i=this.isExpanding?t:n.height;this.menuContainer.style.height=`0px`;this.isClosing=true;this.animateGrid(false,`${i}px`,`0px`)}animateGrid(n,t,i){this.cancelAnimations();this.animation=this.menuContainer.animate({height:[t,i]},{duration:this.animationDuration,easing:"cubic-bezier(0.6, 0, 0.2, 1)"});this.animation.onfinish=()=>this.animationFinish();this.animation.oncancel=()=>n?this.isExpanding=false:this.isClosing=false}animationFinish(){this.cancelAnimations();this.menuContainer.style.height=this.isClosing?"0px":"";this.isClosing=false;this.isExpanding=false}cancelAnimations(){if(this.animation)this.animation.cancel()}async optionSelect(n,t){const i=n?.options?.length?"submenu":!!n.input?"input":n.href?"link":"button";const e=i==="submenu";if(e)this.toggleSub(n);else if(i==="button")this.closeEachSubMenu();else if(i==="input")n.checked=t.target.checked;this.menuOption.emit({option:n,type:i,click:t,open:e?this.isSubmenuActive(n.value):null});const o=t.target;const a=o.localName==="input"?o.nextElementSibling:o.className==="pn-action-menu-button"?o:o.closest(".pn-action-menu-button");const{x:s,width:c,y:r,top:u}=this.getRect(a);const p={clientX:s+c-24,clientY:r-u};m(t.type==="click"?t:p,a);this.menuContainer.scrollTo({top:0})}toggleSub(n){const{value:t}=n;const i=this.getSubMenuPath(this.options,t);const e=this.activeSubmenu.includes(t);e&&i.splice(this.activeSubmenu.indexOf(t),1);const o=this.hostElement.querySelector(`#${this.getListId(n)}`);const a=this.getRect(o);const s=a.left;const c=innerWidth-a.right-8;const r=s>a.width;const u=c>a.width;const p=this.menuUp&&a.top-a.height>0;const m=p?"top":"bottom";if(!e&&!o.dataset.x)o.setAttribute("data-x",this.menuLeft&&r?"left":u?"right":r?"left":"center");if(!e&&!o.dataset.y)o.setAttribute("data-y",m);if(JSON.stringify(i)===JSON.stringify(this.activeSubmenu))this.activeSubmenu=this.activeSubmenu.filter((n=>n!==t));else this.activeSubmenu=[...i]}isSubmenuActive(n){return this.activeSubmenu.includes(n)}isMenuActive(){const n=this.options.find((({value:n})=>this.activeSubmenu.every((t=>t===n))));return this.smallMenu&&(this.activeSubmenu?.length===0||n)}isCurrentSubMenu(n){return Boolean(this.activeSubmenu[this.activeSubmenu.length-1]===n)}getOptionTrailing(n){const t=n.options?.length&&b;const i=n.trailingIcon;const o=n.target==="_blank"&&f;const a=t||i||o;if(a){return e("pn-icon",{icon:a,color:"blue700","data-suffix":true,"data-active":this.isSubmenuActive(n.value)})}if(n.suffix){return e("span",{class:"pn-action-menu-item-suffix"},n.suffix)}}renderCheckbox(n){const t=`pn-menu-${n.value}-label`;const i=`pn-menu-${n.value}-helpertext`;return e("div",{class:"pn-action-menu-item-content"},e("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?i:null,onInput:t=>this.optionSelect(n,t),tabIndex:this.open?null:-1}),e("div",{class:"pn-action-menu-button"},!!n.icon&&e("pn-icon",{icon:n.icon,color:"blue700"}),e("div",{class:"pn-action-menu-item-text"},e("label",{htmlFor:t,class:"pn-action-menu-item-label"},n.label),n.helpertext&&e("p",{id:i,class:"pn-action-menu-item-helpertext"},e("span",null,n.helpertext))),n.input==="checkbox"?e("div",{class:"pn-action-menu-checkbox"},e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},e("polyline",{class:"pn-action-menu-checkbox-checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"}))):e("div",{class:"pn-action-menu-radio"},e("div",{class:"pn-action-menu-radio-outer"},e("div",{class:"pn-action-menu-radio-inner"})))))}renderButton(n){const t=n.label==="BACK";const i=!!n?.options?.length;const o=!!n?.group?.length;const a=!!n.href&&!i&&!o;const s=t?"-close":"";const c=t||!!n.icon;const r=t?null:this.getOptionTrailing(n);const u=this.isSubmenuActive(n.value);const p=i?{"aria-haspopup":"true","aria-controls":u?this.getListId(n):null,"aria-expanded":u?.toString()}:{};const m=a?{href:n.href,target:n.target}:{disabled:n.disabled};const l=a?"a":"button";return o?e("div",{class:"pn-action-menu-group-label"},e("p",{class:"pn-action-menu-p"},n.label),n.helpertext&&e("p",{class:"pn-action-menu-group-helpertext"},n.helpertext)):e("div",{class:"pn-action-menu-item-content","data-close":t},e(l,{id:this.getButtonId(n)+s,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&&e("pn-icon",{icon:t?h:n.icon,color:"blue700"}),e("div",{class:"pn-action-menu-item-text"},e("span",{class:"pn-action-menu-item-label"},t?this.translate("BACK"):n.label),n.helpertext&&!a&&e("span",{class:"pn-action-menu-item-helpertext"},n.helpertext)),r))}renderSub(n){return e("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&&e("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 e("menu",{class:"pn-action-menu-group"},n.group.map((n=>this.renderMenuItem(n))))}renderMenuItem(n){const t=!!n?.options?.length;const i=!t&&!!n?.group?.length;const o=!!n.input&&!t&&!i;return e("li",{class:"pn-action-menu-item","data-group":i,"data-sub":t},o?this.renderCheckbox(n):this.renderButton(n),t?this.renderSub(n):i&&this.renderGroup(n))}renderMenu(){return e("div",{id:this.menuListId,class:"pn-action-menu-container",role:"region","aria-labelledby":this.menuButtonId,"data-open":this.open,"data-moving":this.isClosing||this.isExpanding,"data-upwards":this.upwards,"data-small":this.smallMenu,style:{height:"0px"},ref:n=>this.menuContainer=n},e("menu",{class:"pn-action-menu-list",ref:n=>this.menuList=n,"data-current":this.isMenuActive()},this.options?.map((n=>this.renderMenuItem(n)))))}render(){return e(o,{key:"5a1638b9b0f880ebd9f3ebe2571df19c6b852baf"},e("div",{key:"87bf62a943099ce0a556ade3ce3eb11eedb003b2",id:this.menuId!==this.id?this.menuId:null,class:"pn-action-menu"},e("pn-button",{key:"a3024016a2a5962d9eefc3c4d617f946a3575c23",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:n=>this.menuTrigger=n}),this.renderMenu()))}static get watchers(){return{options:["handleOptions"],open:["openHandler"],menuId:["handleMenuId"]}}};y.style=v;export{y as pn_action_menu}; //# sourceMappingURL=p-3bd59ac8.entry.js.map