@postnord/web-components
Version:
PostNord Web Components
177 lines (171 loc) • 15.4 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-5606614b.js';
import { r as ripple } from './helpers-88f72b54.js';
const pnButtonCss = "pn-button{display:inline-block}pn-button .pn-button{position:relative;cursor:pointer;padding:0.75em 1.5em;width:round(up, 100%, 1px);min-height:3em;min-width:5.5em;border:none;border-radius:3em;font-family:inherit;font-size:1em;font-weight:500;color:#ffffff;background-color:transparent;display:flex;justify-content:center;align-items:center;text-decoration:none;line-height:1.5em;-webkit-tap-highlight-color:transparent;transition-property:color, outline-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}pn-button .pn-button:focus-visible{outline-color:#005d92}pn-button .pn-button:disabled,pn-button .pn-button[aria-disabled]{cursor:auto;pointer-events:none}pn-button .pn-button-content{z-index:2;display:flex;justify-content:center;align-items:center;gap:0.5em;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s}pn-button .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;transform:translateX(-50%) translateY(0);border-radius:3em;border:none;background-color:#005d92;overflow:hidden;transition-property:width, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s, 0s, 0s}pn-button .pn-button-bg::after{content:\"\";position:absolute;will-change:transform;width:100%;height:100%;background-color:#0d234b;border-radius:inherit;left:0;transform:translateX(-103%);opacity:0.5;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-button .pn-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#ffffff;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-button .pn-button-tooltip{z-index:5;position:absolute;top:calc(100% + 0.35em);left:50%;pointer-events:none;color:#ffffff;background-color:#0d234b;box-shadow:0 0.075em 0.225em rgba(0, 0, 0, 0.1), 0 0.4em 0.9em rgba(0, 0, 0, 0.13);padding:0.25em 0.75em;border-radius:inherit;max-width:min(95vw, 40em);transform:translateX(-50%) translateX(var(--pn-dx));width:max-content;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-button .pn-button-tooltip-text{font-size:0.875em;font-weight:300}pn-button .pn-button pn-icon{flex-shrink:0}pn-button .pn-button pn-icon .pn-icon-svg path{fill:#ffffff}pn-button .pn-button pn-spinner{position:absolute;transform:scale(0)}pn-button .pn-button:hover .pn-button-bg:after,pn-button .pn-button:focus .pn-button-bg:after{transform:translateX(0)}pn-button .pn-button[data-appearance=light]{color:#005d92}pn-button .pn-button[data-appearance=light] pn-icon .pn-icon-svg path{fill:#005d92}pn-button .pn-button[data-appearance=light] pn-spinner .circle{stroke:#005d92}pn-button .pn-button[data-appearance=light] pn-spinner .dot{fill:#005d92}pn-button .pn-button[data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}pn-button .pn-button[data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}pn-button .pn-button[data-appearance=light] .pn-button-bg .pn-ripple{background-color:#005d92}pn-button .pn-button[data-appearance=warning]{color:#a70707;outline:0.2rem solid transparent;outline-offset:0.2rem}pn-button .pn-button[data-appearance=warning] pn-icon .pn-icon-svg path{fill:#a70707}pn-button .pn-button[data-appearance=warning] pn-spinner .circle{stroke:#a70707}pn-button .pn-button[data-appearance=warning] pn-spinner .dot{fill:#a70707}pn-button .pn-button[data-appearance=warning] .pn-button-bg{border:0.0625em solid #a70707;background-color:#fdefee}pn-button .pn-button[data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-appearance=warning]:hover,pn-button .pn-button[data-appearance=warning]:focus{color:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-icon .pn-icon-svg path,pn-button .pn-button[data-appearance=warning]:focus pn-icon .pn-icon-svg path{fill:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-spinner .circle,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .circle{stroke:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-spinner .dot,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .dot{fill:#ffffff}pn-button .pn-button[data-appearance=warning]:focus-visible{outline-color:#a70707}pn-button .pn-button[data-variant=borderless] .pn-button-bg{border:none;background-color:transparent}pn-button .pn-button[data-variant=borderless] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}pn-button .pn-button[data-variant=borderless][data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}pn-button .pn-button[data-variant=borderless][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-variant=outlined] .pn-button-bg{border:0.0625em solid #ffffff;background-color:transparent}pn-button .pn-button[data-variant=outlined] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg:after{background-color:#00a0d6;opacity:0.1}pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg{border-color:#a70707}pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-left-icon] .pn-button-content{flex-direction:row-reverse}pn-button .pn-button[data-icon-only]{width:3em;min-width:0}pn-button .pn-button[data-icon-only][data-small]{width:2em;min-width:0;padding:0}pn-button .pn-button[data-small]{padding:0.375em 1em;min-height:2em;min-width:unset;line-height:1.25em}pn-button .pn-button[data-small] .pn-button-content{gap:0.25em}pn-button .pn-button[data-small] .pn-button-text{font-size:0.875em}pn-button .pn-button[data-small] pn-icon .pn-icon-svg{height:1.25em;width:1.25em}pn-button .pn-button[data-tooltip-open] .pn-button-tooltip{opacity:1}pn-button .pn-button[data-tooltip-upwards] .pn-button-tooltip{top:auto;bottom:calc(100% + 0.35em)}pn-button .pn-button[data-loading] pn-spinner{transform:scale(1);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s}pn-button .pn-button[data-loading] .pn-button-content{pointer-events:none;opacity:0;transition-delay:0s;transform:translateY(100%)}pn-button .pn-button[data-loading] .pn-button-bg{width:3em}pn-button .pn-button[data-loading][data-small] .pn-button-bg{width:2em}";
const PnButtonStyle0 = pnButtonCss;
const PnButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.pnClick = createEvent(this, "pnClick", 7);
this.tooltipOpen = false;
this.tooltipUpwards = false;
this.label = '';
this.appearance = '';
this.variant = '';
this.small = false;
this.loading = false;
this.icon = undefined;
this.iconOnly = false;
this.leftIcon = false;
this.tooltip = undefined;
this.tooltipUp = false;
this.type = 'button';
this.form = undefined;
this.href = undefined;
this.rel = undefined;
this.target = undefined;
this.download = undefined;
this.buttonId = null;
this.arialabel = null;
this.arialabelledby = null;
this.ariacurrent = null;
this.ariacontrols = null;
this.ariapressed = null;
this.ariahaspopup = null;
this.ariaexpanded = null;
this.noTab = false;
}
buttonEl;
tooltipEl;
tooltipDx;
openEvents = ['mouseover', 'focus'];
closeEvents = ['mouseleave', 'blur', 'touchcancel', 'touchleave'];
eventListeners = [...this.openEvents, ...this.closeEvents];
get hostElement() { return getElement(this); }
openHandler() {
if (this.tooltipOpen)
this.checkTooltipPosition();
}
iconOnlyHandler() {
this.checkTooltipPosition();
if (this.tooltip)
this.initTooltip();
else
this.removeTooltip();
}
/**
* This event is fired when the `button`/`a` element of the `pn-button` is clicked.
* Setting an eventListener for `click` on the `pn-button` will trigger if you click outside of the button area
* or if the button is `disabled` with the `loading` prop.
**/
pnClick;
componentWillLoad() {
this.tooltipUpwards = this.tooltipUp;
}
componentDidLoad() {
this.iconOnlyHandler();
}
getRect(element) {
return element.getBoundingClientRect();
}
initTooltip() {
this.eventListeners.forEach(e => this.buttonEl.addEventListener(e, this.toggleTooltip));
}
removeTooltip() {
this.eventListeners.forEach(e => this.buttonEl.removeEventListener(e, this.toggleTooltip));
}
toggleTooltip = (event) => {
this.tooltipOpen = this.openEvents.includes(event.type);
};
setTooltipOffset() {
this.tooltipEl.style.setProperty('--pn-dx', `${this.tooltipDx}px`);
}
checkTooltipPosition() {
this.tooltipEl.style.transform = 'translateX(-50%)';
this.tooltipUpwards = this.tooltipUp;
requestAnimationFrame(() => {
const { top, x, y, right, height } = this.getRect(this.tooltipEl);
const extraMargin = 16;
this.tooltipDx = 0;
this.tooltipUpwards = this.tooltipUp ? top > height : y + height > window.innerHeight;
this.tooltipEl.style.transform = '';
if (x < 0)
this.tooltipDx = x * -1 + extraMargin;
if (right > window.innerWidth)
this.tooltipDx = window.innerWidth - right - extraMargin - 8;
requestAnimationFrame(() => this.setTooltipOffset());
});
}
getAttributes() {
const attrs = this.href
? {
'href': this.href,
'rel': !this.rel && this.target === '_blank' ? 'noopener' : this.rel,
'target': this.target ?? null,
'download': this.download ?? null,
'aria-current': this.ariacurrent,
'aria-disabled': this.loading ? 'true' : null,
}
: {
'type': this.type,
'form': this.form,
'disabled': this.loading,
'aria-pressed': this.ariapressed,
'aria-controls': this.ariacontrols,
'aria-haspopup': this.ariahaspopup,
'aria-expanded': this.ariaexpanded,
};
const appearances = ['light', 'warning'];
const variations = ['borderless', 'outlined'];
return {
'tabindex': this.noTab || (this.href && this.loading) ? '-1' : null,
'data-small': this.small,
'data-loading': this.loading,
'data-tooltip-open': this.tooltipOpen,
'data-tooltip-upwards': this.tooltipUpwards,
'data-icon-only': this.showIconOnly(),
'data-left-icon': this.leftIcon,
'data-appearance': appearances.includes(this.appearance) ? this.appearance : null,
'data-variant': variations.includes(this.variant) ? this.variant : null,
...attrs,
};
}
getTagName() {
return this.href ? 'a' : 'button';
}
showIconOnly() {
return !!this.icon && this.iconOnly && !!(this.tooltip || this.arialabel || this.arialabelledby);
}
handleClick(event) {
ripple(event, this.hostElement, '.pn-button-bg');
this.pnClick.emit(event);
}
render() {
const TagName = this.getTagName();
return (h(Host, { key: '180829edde0e9471638f6a432a23470b4a024201' }, h(TagName, { key: 'a379079e76aa1a3fdea4a5c17e0de204fbb546d0', class: "pn-button", id: this.buttonId, "aria-label": this.arialabel, "aria-labelledby": this.arialabelledby, onClick: e => this.handleClick(e), ...this.getAttributes(), ref: (el) => (this.buttonEl = el) }, h("div", { key: '836e8be4f23275acc3e2918f99529ab198802d1a', class: "pn-button-bg" }), h("div", { key: 'ae1b5955bbff42463cb4076fc069daddff7c45f2', class: "pn-button-content" }, h("div", { key: '32e7974f93b3f674ed587419e2cd15e1a7f163d4', class: "pn-button-text", hidden: this.showIconOnly() }, this.label, h("slot", { key: '67672d69b3b7c4192c3533c3d77701c7e75e390a' })), !!this.icon && h("pn-icon", { key: 'b884299835c2844f5e49bb10273490d058f6098d', icon: this.icon })), h("pn-spinner", { key: '5d514b4e8b1a0f434e8b44e9c3ae50ed9d80971c', light: true }), h("div", { key: '2b1a2cc98d6d9e6732b2f479cbc29f88868f498b', class: "pn-button-tooltip", hidden: !this.tooltip, ref: el => (this.tooltipEl = el) }, h("span", { key: '8dd356c33fced3deddea322b48b8fd74c43b902f', class: "pn-button-tooltip-text" }, this.tooltip)))));
}
static get watchers() { return {
"tooltipOpen": ["openHandler"],
"tooltip": ["iconOnlyHandler"]
}; }
};
PnButton.style = PnButtonStyle0;
const pnSpinnerCss = "pn-spinner{height:var(--size);width:var(--size);display:block}pn-spinner svg{animation:rotate 1s infinite;display:block}pn-spinner svg .circle{stroke:#005d92;transform-origin:center center;transform:rotate(-310deg);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:64;animation:loading 2s infinite}pn-spinner svg .dot{fill:#005d92}pn-spinner.light .circle{stroke:#ffffff}pn-spinner.light .dot{fill:#ffffff}pn-spinner svg,pn-spinner svg .circle{animation-timing-function:cubic-bezier(0.5, 0, 0.5, 1)}@keyframes loading{0%{stroke-dashoffset:55}50%{stroke-dashoffset:12}100%{stroke-dashoffset:55}}@keyframes rotate{from{transform:rotate(-180deg) scaleX(-1)}to{transform:rotate(180deg) scaleX(-1)}}";
const PnSpinnerStyle0 = pnSpinnerCss;
const PnSpinner = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.light = false;
this.size = 1.5;
}
get hostElement() { return getElement(this); }
render() {
return (h(Host, { key: 'c3aefa642631aafc5356a6d07db7ef7b57b14857', class: this.light ? 'light' : '', style: { '--size': this.size + 'em' } }, h("svg", { key: 'bdb72cf0bf961bc9e8fcb66f47849025e5bc5481', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: '9fc2108ee526f4a743ed23f42ee31a2aaa1b6ddd', class: "circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: 'aa7133f6a1752e8834d32e270c62b77e96049930', class: "dot", cx: "21.3", cy: "16", r: "1.48" }))));
}
};
PnSpinner.style = PnSpinnerStyle0;
export { PnButton as pn_button, PnSpinner as pn_spinner };
//# sourceMappingURL=pn-button_2.entry.js.map