@postnord/web-components
Version:
PostNord Web Components
106 lines (102 loc) • 6.66 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
import { uuidv4 } from './index.js';
const pnButtonDropdownCss = () => `${transformTag("pn-button-dropdown")}{display:inline-block;position:relative}${transformTag("pn-button-dropdown")} .pn-button-dropdown-container{z-index:10;position:absolute;top:130%;left:0;background-color:#ffffff;border-radius:1em;box-shadow:0 0.125em 1em rgba(0, 0, 0, 0.2);overflow-y:auto;max-width:95vw;max-width:min(95vw, 40em);max-height:80vh;transform:scale(0);transform-origin:top left;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-button-dropdown")} .pn-button-dropdown-container{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button-dropdown")} .pn-button-dropdown-container{transition-delay:0.2s}${transformTag("pn-button-dropdown")} .pn-button-dropdown-container[data-right]{left:unset;right:0;transform-origin:top right}${transformTag("pn-button-dropdown")} .pn-button-dropdown-container[data-top]{top:unset;bottom:130%;transform-origin:bottom left}${transformTag("pn-button-dropdown")} .pn-button-dropdown-content{position:relative;padding:1em;opacity:0;width:max-content;max-width:100%;visibility:hidden;transition-property:opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-button-dropdown")} .pn-button-dropdown-content{transition-duration:0s;transition-delay:0s}}${transformTag("pn-button-dropdown")} .pn-button-dropdown-content{transition-delay:0s, 0.2s}${transformTag("pn-button-dropdown")} .pn-button-dropdown[data-open=true] .pn-button-dropdown-container{transition-delay:0s}${transformTag("pn-button-dropdown")} .pn-button-dropdown[data-open=true] .pn-button-dropdown-content{opacity:1;visibility:visible}`;
const PnButtonDropdown = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
id = `pn-button-${uuidv4()}`;
focusableElements;
container;
dropdownButtonId = `${this.id}-dropdown`;
dropdownContentId = `${this.id}-content`;
get hostElement() { return getElement(this); }
right = false;
top = false;
/** The required label on the button. */
label;
/** The optional SVG content of the icon you want. */
icon;
/** Select between `light` and `warning`. */
appearance = '';
/** Select between `outlined` and `borderless`. */
variant = '';
/** Smaller button. */
small = false;
/** Tooltip (required for Icon Only). */
tooltip;
/** Open/close the dropdown without user interaction. */
open = false;
openHandler() {
this.toggleDropdown();
if (this.open) {
document.addEventListener('click', this.globalHandler);
document.addEventListener('keyup', this.globalHandler);
}
else {
document.removeEventListener('click', this.globalHandler);
document.removeEventListener('keyup', this.globalHandler);
}
}
componentDidLoad() {
if (this.open)
this.openHandler();
}
getRect(element) {
return element.getBoundingClientRect();
}
globalHandler = (e) => {
// global events that we want to track to close the select, like "click outside" or tab out
if (!this.hostElement.contains(e.target) || e?.key === 'Escape') {
this.open = false;
}
};
toggleDropdown() {
this.right = this.hostElement.offsetLeft > window.innerWidth / 2;
requestAnimationFrame(() => {
if (this.open) {
this.container.style.transition = 'none';
this.container.style.transform = 'none';
}
const containerRect = this.getRect(this.container);
const hostElementRect = this.getRect(this.hostElement);
// Calculate if dropdown should open upwards
// if there is enough space above button
const enoughSpaceAbove = hostElementRect.top > containerRect.height + window.innerWidth * 0.025;
this.top =
enoughSpaceAbove &&
hostElementRect.top + hostElementRect.height + containerRect.height >
window.innerHeight - window.innerWidth * 0.025;
let xAxis = 0;
if (containerRect.right > window.innerWidth || containerRect.x < 0) {
// 0.025 because the max width of the element is 95vw and we want the same margin on both sides
xAxis = containerRect.x + containerRect.width + window.innerWidth * 0.025 - window.innerWidth;
}
this.container.style.transform = '';
requestAnimationFrame(() => {
this.container.style.transition = '';
this.container.style.transform = this.open ? `scale(1) translateX(-${xAxis}px)` : '';
requestAnimationFrame(() => {
this.hostElement.querySelector('.pn-button-dropdown').dataset.open = `${this.open}`;
});
});
});
}
toggle = () => {
this.open = !this.open;
};
render() {
return (h(Host, { key: '0b6deb752a9f01bea9571627205b5cd3efbc1c66' }, h("div", { key: 'c7833d539d682a980bb7cc529f17d9942ffd7eb2', class: "pn-button-dropdown" }, h("pn-button", { key: '42d252b99f98b0c3f51795c894e899c6489839c2', label: this.label, buttonId: this.dropdownButtonId, class: "pn-button-dropdown-label", appearance: this.appearance, variant: this.variant, small: this.small, icon: this.icon, iconOnly: !!this.tooltip && !!this.icon && !this.label, ariacontrols: this.dropdownContentId, ariahaspopup: "true", ariaexpanded: this.open.toString(), tooltip: this.tooltip, tooltipUp: !this.top, onPnClick: this.toggle }), h("div", { key: 'dd494c992ef2b51f31ed5c48d87fb3044ed40009', ref: el => (this.container = el), id: this.dropdownContentId, class: "pn-button-dropdown-container", role: "region", "aria-labelledby": this.dropdownButtonId, "data-right": this.right, "data-top": this.top }, h("div", { key: 'e217ae843fa641335ce0714272f68f9a080afe7d', class: "pn-button-dropdown-content" }, h("slot", { key: 'f52ad763a52e9ee17d9a95a1e3a959d61fae2fe1' }))))));
}
static get watchers() { return {
"open": [{
"openHandler": 0
}]
}; }
};
PnButtonDropdown.style = pnButtonDropdownCss();
export { PnButtonDropdown as pn_button_dropdown };