@postnord/web-components
Version:
PostNord Web Components
218 lines (214 loc) • 15.5 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { r as ripple } from './helpers.js';
import { d as defineCustomElement$2 } from './pn-icon2.js';
import { d as defineCustomElement$1 } from './pn-spinner2.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 = /*@__PURE__*/ proxyCustomElement(class PnButton extends HTMLElement {
constructor() {
super();
this.__registerHost();
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 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"]
}; }
static get style() { return PnButtonStyle0; }
}, [4, "pn-button", {
"label": [1],
"appearance": [1],
"variant": [1],
"small": [4],
"loading": [516],
"icon": [1],
"iconOnly": [4, "icon-only"],
"leftIcon": [4, "left-icon"],
"tooltip": [1],
"tooltipUp": [4, "tooltip-up"],
"type": [1],
"form": [1],
"href": [1],
"rel": [1],
"target": [1],
"download": [1],
"buttonId": [1, "button-id"],
"arialabel": [1],
"arialabelledby": [1],
"ariacurrent": [1],
"ariacontrols": [1],
"ariapressed": [1],
"ariahaspopup": [1],
"ariaexpanded": [1],
"noTab": [4, "no-tab"],
"tooltipOpen": [32],
"tooltipUpwards": [32]
}, undefined, {
"tooltipOpen": ["openHandler"],
"tooltip": ["iconOnlyHandler"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-button", "pn-icon", "pn-spinner"];
components.forEach(tagName => { switch (tagName) {
case "pn-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnButton);
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "pn-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { PnButton as P, defineCustomElement as d };
//# sourceMappingURL=pn-button2.js.map