@postnord/web-components
Version:
PostNord Web Components
453 lines (447 loc) • 34.8 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DVv2io0H.js');
var index$1 = require('./index.cjs.js');
var chevron_down = require('./chevron_down-BLU6_yOG.js');
var chevron_right = require('./chevron_right-CApgqZb0.js');
var open_in_new = require('./open_in_new-B-zmn5xr.js');
const translations = {
BACK: {
sv: 'Tillbaka',
en: 'Back',
da: 'Tilbage',
fi: 'Takaisin',
no: 'Tilbake',
},
};
const pnActionMenuCss = "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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.menuToggle = index.createEvent(this, "menuToggle");
this.menuVisible = index.createEvent(this, "menuVisible");
this.menuOption = index.createEvent(this, "menuOption");
}
id = `pn-action-menu-${index$1.uuidv4()}`;
menuButtonId = `${this.id}-button`;
menuListId = `${this.id}-list`;
menuTrigger;
menuContainer;
menuList;
animation;
duration = 400;
animationDuration = this.duration;
timeout;
/** 16em */
menuWidth = 256;
get hostElement() { return index.getElement(this); }
smallMenu = null;
upwards = false;
activeSubmenu = [];
isClosing = false;
isExpanding = false;
/** 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.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 subMenus = this.hostElement.querySelectorAll('[data-x]');
Array.from(subMenus).forEach(el => {
el.removeAttribute('data-x');
el.removeAttribute('data-y');
});
}
this.menuVisible.emit({ visible: this.open });
}, this.animationDuration);
});
}
handleMenuId() {
this.menuButtonId = `${this.menuId}-button`;
this.menuListId = `${this.menuId}-list`;
}
handleResize() {
if (this.open)
this.toggleActionMenu(false);
}
async componentWillLoad() {
if (!this.options.length)
console.warn(`${this.hostElement.localName}: No options set.`);
this.handleMenuId();
this.setAnimationDuration();
if (this.language !== null)
await index$1.awaitTopbar(this.hostElement);
}
componentDidLoad() {
this.setOffset();
if (this.open)
this.gridHandler();
}
translate(prop) {
return translations[prop][this.language || index$1.en];
}
globalEvents = (event) => {
const target = event.target;
const isWithinActionMenu = target?.closest(this.hostElement.localName);
if (!isWithinActionMenu)
this.closeEachSubMenu(true);
};
addGlobalEventListeners() {
const root = this.hostElement.getRootNode();
root.addEventListener('click', this.globalEvents);
}
removeGlobalEventListeners() {
const root = this.hostElement.getRootNode();
root.removeEventListener('click', this.globalEvents);
}
/** Open/close the action menu. */
toggleActionMenu(state) {
this.open = state ?? !this.open;
}
setMenuLayout() {
if (!this.menuContainer)
return;
if (!(this.isClosing || this.isExpanding))
this.resetMaxHeight();
const measurements = this.getMenuMeasurements();
this.setDirection(measurements);
this.setMenuSize(measurements);
this.setMaxHeight(measurements);
}
setDirection({ hUp, hDown, sUp, sDown }) {
const fitsUpwards = sUp > hUp;
const fitsDownards = sDown > hDown;
const moreSpaceDown = sDown > sUp;
this.upwards = (this.menuUp && fitsUpwards) || (!fitsDownards && !moreSpaceDown);
}
setMenuSize({ hUp, hDown, sUp, sDown }) {
const isWidthSmall = index$1.isSmallScreen();
const menuFits = this.upwards ? sUp > hUp : sDown > hDown;
const isSmall = isWidthSmall || !menuFits;
if (isSmall !== this.smallMenu) {
this.smallMenu = isSmall;
}
}
setMaxHeight({ hUp, hDown, sUp, sDown }) {
if (this.smallMenu) {
const heightUp = hUp > sUp ? hUp - 16 : hUp;
const heightDown = hDown > sDown ? hDown - 8 : hDown;
this.hostElement.style.setProperty('--pn-menu-height', `${this.upwards ? heightUp : heightDown}px`);
}
else
this.resetMaxHeight();
}
resetMaxHeight() {
this.hostElement.style.setProperty('--pn-menu-height', 'unset');
}
setAnimationDuration() {
if (index$1.reduceMotion())
this.animationDuration = 0;
else
this.animationDuration = this.duration;
}
getRect(element) {
return element.getBoundingClientRect();
}
getMenuMeasurements() {
const allLists = Array.from(this.menuContainer.querySelectorAll('menu'));
const maxHeight = Math.max(...allLists.map(el => el.scrollHeight));
const rectButton = this.getRect(this.menuTrigger);
const rectMenu = this.getRect(this.menuContainer);
/** Measurements upwards. */
const sUp = rectButton.top - index$1.getTotalHeightOffset();
const hUp = sUp > maxHeight ? maxHeight : sUp;
/** Measurements downwards. */
const sDown = innerHeight - rectMenu.top;
const hDown = sDown > maxHeight ? maxHeight : sDown;
return {
hUp,
hDown,
sUp,
sDown,
};
}
setOffset() {
const data = this.getRect(this.hostElement);
const sideMenuWidth = index$1.getMenuWidth();
// Calculate potential menu position
const menuLeft = data.left;
const menuRight = data.left + this.menuWidth;
// Define boundaries
const leftBoundary = sideMenuWidth + 16; // Left menu + buffer
const rightBoundary = innerWidth - 16; // Right edge - buffer
let offset = 0;
// Check if menu would overlap left menu or go off left edge
if (menuLeft < leftBoundary) {
offset = leftBoundary - menuLeft;
}
// Check if menu would go off right edge
else if (menuRight > rightBoundary) {
offset = rightBoundary - menuRight;
}
if (this.menuContainer)
this.menuContainer.style.setProperty('--pn-action-menu-offset', `${offset}px`);
}
getListId(option) {
return `pn-menu-${option.value}-list`;
}
getButtonId(option) {
return `pn-menu-${option.value}-button`;
}
getTriggerIcon() {
if (this.button?.icon)
return;
return chevron_down.chevron_down;
}
/** Set the path of open sub menus. */
getSubMenuPath(options, value, path = []) {
for (const item of options) {
const newPath = [...path, item.value];
if (item.value === value)
return newPath;
if (item.options || item.group) {
const result = this.getSubMenuPath(item.options || item.group, value, newPath);
if (result)
return result;
}
}
return null;
}
closeEachSubMenu(preventFocus = false) {
if (!preventFocus)
this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });
const interval = setInterval(() => {
if (this.smallMenu || this.activeSubmenu.length === 0) {
clearInterval(interval);
this.toggleActionMenu(false);
}
else {
this.activeSubmenu.pop();
this.activeSubmenu = [...this.activeSubmenu];
}
}, 150);
}
escButton(event, option) {
const { key } = event;
if (key === 'Escape') {
event.preventDefault();
event.stopImmediatePropagation();
this.isSubmenuActive(option.value) ? this.toggleSub(option) : this.toggleActionMenu();
}
}
// Animation Start
gridHandler() {
if (this.open)
this.openGrid();
else
this.closeGrid();
}
openGrid() {
this.addGlobalEventListeners();
const list = this.getRect(this.menuList);
const { clientHeight } = this.menuContainer;
const height = this.isClosing ? clientHeight : 0;
this.menuContainer.style.height = `${list.height}px`;
this.isExpanding = true;
this.animateGrid(true, `${height}px`, `${list.height}px`);
}
closeGrid() {
this.removeGlobalEventListeners();
const list = this.getRect(this.menuList);
const { clientHeight } = this.menuContainer;
const height = this.isExpanding ? clientHeight : list.height;
this.menuContainer.style.height = `0px`;
this.isClosing = true;
this.animateGrid(false, `${height}px`, `0px`);
}
animateGrid(open, startHeight, endHeight) {
this.cancelAnimations();
this.animation = this.menuContainer.animate({
height: [startHeight, endHeight],
}, {
duration: this.animationDuration,
easing: 'cubic-bezier(0.6, 0, 0.2, 1)',
});
this.animation.onfinish = () => this.animationFinish();
this.animation.oncancel = () => (open ? (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();
}
// Animation end
async optionSelect(option, click) {
const type = option?.options?.length ? 'submenu' : !!option.input ? 'input' : option.href ? 'link' : 'button';
const isSubMenu = type === 'submenu';
if (isSubMenu)
this.toggleSub(option);
else if (type === 'button')
this.closeEachSubMenu();
else if (type === 'input')
option.checked = click.target.checked;
this.menuOption.emit({
option,
type,
click,
open: isSubMenu ? this.isSubmenuActive(option.value) : null,
});
const target = click.target;
const element = target.localName === 'input'
? target.nextElementSibling
: target.className === 'pn-action-menu-button'
? target
: target.closest('.pn-action-menu-button');
const { x, width, y, top } = this.getRect(element);
const clientCor = { clientX: x + width - 24, clientY: y - top };
index$1.ripple(click.type === 'click' ? click : clientCor, element);
this.menuContainer.scrollTo({ top: 0 });
}
/** Toggle individual sub-menus inside the action menu by using the `option['value']`. */
toggleSub(option) {
const { value } = option;
const path = this.getSubMenuPath(this.options, value);
const isActive = this.activeSubmenu.includes(value);
isActive && path.splice(this.activeSubmenu.indexOf(value), 1);
const item = this.hostElement.querySelector(`#${this.getListId(option)}`);
const data = this.getRect(item);
const spaceLeft = data.left;
const spaceRight = innerWidth - data.right - 8;
const fitsLeft = spaceLeft > data.width;
const fitsRight = spaceRight > data.width;
const climbUp = this.menuUp && data.top - data.height > 0;
const yDirection = climbUp ? 'top' : 'bottom';
if (!isActive && !item.dataset.x)
item.setAttribute('data-x', this.menuLeft && fitsLeft ? 'left' : fitsRight ? 'right' : fitsLeft ? 'left' : 'center');
if (!isActive && !item.dataset.y)
item.setAttribute('data-y', yDirection);
if (JSON.stringify(path) === JSON.stringify(this.activeSubmenu))
this.activeSubmenu = this.activeSubmenu.filter(item => item !== value);
else
this.activeSubmenu = [...path];
}
/** Check if a sub-menu is active. */
isSubmenuActive(value) {
return this.activeSubmenu.includes(value);
}
isMenuActive() {
const isRootSubInsideGroup = this.options.find(({ value }) => this.activeSubmenu.every(val => val === value));
return this.smallMenu && (this.activeSubmenu?.length === 0 || isRootSubInsideGroup);
}
isCurrentSubMenu(value) {
return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);
}
getOptionTrailing(option) {
const useButtonIcon = option.options?.length && chevron_right.chevron_right;
const useTrailingIcon = option.trailingIcon;
const useLinkIcon = option.target === '_blank' && open_in_new.open_in_new;
/** If the user has defined a trialing icon, use it first. */
const icon = useButtonIcon || useTrailingIcon || useLinkIcon;
if (icon) {
return index.h("pn-icon", { icon: icon, color: "blue700", "data-suffix": true, "data-active": this.isSubmenuActive(option.value) });
}
if (option.suffix) {
return index.h("span", { class: "pn-action-menu-item-suffix" }, option.suffix);
}
}
renderCheckbox(option) {
const id = `pn-menu-${option.value}-label`;
const idHelper = `pn-menu-${option.value}-helpertext`;
return (index.h("div", { class: "pn-action-menu-item-content" }, index.h("input", { type: option.input, id: id, class: "pn-action-menu-input", name: option.name, value: option.value, checked: option.checked, disabled: option.disabled, "aria-describedby": option.helpertext ? idHelper : null, onInput: event => this.optionSelect(option, event), tabIndex: this.open ? null : -1 }), index.h("div", { class: "pn-action-menu-button" }, !!option.icon && index.h("pn-icon", { icon: option.icon, color: "blue700" }), index.h("div", { class: "pn-action-menu-item-text" }, index.h("label", { htmlFor: id, class: "pn-action-menu-item-label" }, option.label), option.helpertext && (index.h("p", { id: idHelper, class: "pn-action-menu-item-helpertext" }, index.h("span", null, option.helpertext)))), option.input === 'checkbox' ? (index.h("div", { class: "pn-action-menu-checkbox" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { class: "pn-action-menu-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })))) : (index.h("div", { class: "pn-action-menu-radio" }, index.h("div", { class: "pn-action-menu-radio-outer" }, index.h("div", { class: "pn-action-menu-radio-inner" })))))));
}
renderButton(option) {
const isCloseButton = option.label === 'BACK';
const isSub = !!option?.options?.length;
const isGroup = !!option?.group?.length;
const isLink = !!option.href && !isSub && !isGroup;
const appendedId = isCloseButton ? '-close' : '';
const hasIcon = isCloseButton || !!option.icon;
const trailingObject = isCloseButton ? null : this.getOptionTrailing(option);
const open = this.isSubmenuActive(option.value);
const subMenuAttrs = isSub
? {
'aria-haspopup': 'true',
'aria-controls': open ? this.getListId(option) : null,
'aria-expanded': open?.toString(),
}
: {};
const attrs = isLink
? {
href: option.href,
target: option.target,
}
: {
disabled: option.disabled,
};
const Tag = isLink ? 'a' : 'button';
return isGroup ? (index.h("div", { class: "pn-action-menu-group-label" }, index.h("p", { class: "pn-action-menu-p" }, option.label), option.helpertext && index.h("p", { class: "pn-action-menu-group-helpertext" }, option.helpertext))) : (index.h("div", { class: "pn-action-menu-item-content", "data-close": isCloseButton }, index.h(Tag, { id: this.getButtonId(option) + appendedId, class: "pn-action-menu-button", ...subMenuAttrs, ...attrs, tabIndex: this.open ? null : -1, onClick: event => this.optionSelect(option, event), onKeyDown: (event) => this.escButton(event, option) }, hasIcon && index.h("pn-icon", { icon: isCloseButton ? chevron_right.chevron_left : option.icon, color: "blue700" }), index.h("div", { class: "pn-action-menu-item-text" }, index.h("span", { class: "pn-action-menu-item-label" }, isCloseButton ? this.translate('BACK') : option.label), option.helpertext && !isLink && index.h("span", { class: "pn-action-menu-item-helpertext" }, option.helpertext)), trailingObject)));
}
renderSub(option) {
return (index.h("menu", { id: this.getListId(option), "aria-labelledby": this.getButtonId(option), class: "pn-action-menu-sub", "data-open": this.isSubmenuActive(option.value)?.toString(), "data-current": this.isCurrentSubMenu(option.value) }, this.smallMenu && (index.h("li", { class: "pn-action-menu-item" }, this.renderButton({
label: 'BACK',
value: option.value,
options: option.options,
}))), option.options.map(item => this.renderMenuItem(item))));
}
renderGroup(option) {
return index.h("menu", { class: "pn-action-menu-group" }, option.group.map(item => this.renderMenuItem(item)));
}
renderMenuItem(option) {
const isSub = !!option?.options?.length;
const isGroup = !isSub && !!option?.group?.length;
const isCheckbox = !!option.input && !isSub && !isGroup;
return (index.h("li", { class: "pn-action-menu-item", "data-group": isGroup, "data-sub": isSub }, isCheckbox ? this.renderCheckbox(option) : this.renderButton(option), isSub ? this.renderSub(option) : isGroup && this.renderGroup(option)));
}
renderMenu() {
return (index.h("div", { id: this.menuListId, class: "pn-action-menu-container", role: "region", "aria-labelledby": this.menuButtonId, "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-upwards": this.upwards, "data-small": this.smallMenu, style: { height: '0px' }, ref: el => (this.menuContainer = el) }, index.h("menu", { class: "pn-action-menu-list", ref: el => (this.menuList = el), "data-current": this.isMenuActive() }, this.options?.map(option => this.renderMenuItem(option)))));
}
render() {
return (index.h(index.Host, { key: '62e9ade80aff07447ca13ba6775453be3465c18d' }, index.h("div", { key: 'f01160486498dad1748f47d1a7d773e9ebece459', id: this.menuId !== this.id ? this.menuId : null, class: "pn-action-menu" }, index.h("pn-button", { key: '3f4b6ce86e8af3e63552b6e5a89fbd29f1295347', 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"]
}; }
};
PnActionMenu.style = pnActionMenuCss;
exports.pn_action_menu = PnActionMenu;
//# sourceMappingURL=pn-action-menu.entry.cjs.js.map