@postnord/web-components
Version:
PostNord Web Components
214 lines (207 loc) • 12.3 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { j as awaitTopbar, r as ripple, e as en } from './helpers.js';
import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
import { a as alert_info_circle } from './alert_info_circle.js';
import { c as check_circle } from './check_circle.js';
import { c as close } from './close.js';
import { d as defineCustomElement$3 } from './pn-icon2.js';
import { d as defineCustomElement$2 } from './pn-illustration2.js';
const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/></svg>';
const alert_exclamation_triangle = icon;
const translations = {
HIDE: {
sv: 'Stäng meddelande',
en: 'Dismiss message',
da: 'Afvis besked',
fi: 'Hylkää viesti',
no: 'Avvis meldingen',
},
};
const pnToastCss = "pn-toast{position:relative;display:block;overflow:hidden}pn-toast .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-toast .pn-toast .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;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-toast .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}pn-toast .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}pn-toast .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}pn-toast .pn-toast-text:last-child{margin-bottom:0}pn-toast .pn-toast-icon .pn-icon-svg path{fill:#2d2013}pn-toast .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}pn-toast .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-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-toast .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}pn-toast .pn-toast-button:hover{background-color:#8eddf9}pn-toast .pn-toast[data-appearance=success]{background-color:#dcf6e7}pn-toast .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}pn-toast .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}pn-toast .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}pn-toast .pn-toast[data-appearance=warning]{background-color:#fff1e3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}pn-toast .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}pn-toast .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}pn-toast .pn-toast[data-appearance=error]{background-color:#fdefee}pn-toast .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}pn-toast .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}pn-toast .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}pn-toast .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}";
const PnToastStyle0 = pnToastCss;
const PnToast$1 = /*@__PURE__*/ proxyCustomElement(class PnToast extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.close = createEvent(this, "close", 7);
this.hidden = createEvent(this, "hidden", 7);
this.isClosing = false;
this.isExpanding = false;
this.hasSlottedContent = false;
this.heading = '';
this.text = '';
this.toastId = undefined;
this.appearance = undefined;
this.temporary = false;
this.icon = undefined;
this.illustration = undefined;
this.hide = false;
this.closable = false;
this.language = null;
}
toast;
button;
animation;
get hostElement() { return this; }
handleHide() {
const { matches } = window.matchMedia('(prefers-reduced-motion: reduce)');
if (matches)
return this.hidden.emit(this.hide);
if (this.hide)
this.closeToast();
else
this.openToast();
}
/** Event fired when the close button is pressed. */
close;
/**
* This event is fired when the toast is fully hidden after the animation is finished.
* Triggers from the close button or if the prop `hide` is set to true.
**/
hidden;
async componentWillLoad() {
if (this.hide)
this.hostElement.style.height = '0';
if (this.language === null)
await awaitTopbar(this.hostElement);
// Any text content at this stage means there is slotted content present.
this.hasSlottedContent = !!this.hostElement.textContent;
}
componentDidLoad() {
if (!!this.heading && !this.text && !this.hasSlottedContent)
console.warn('The %s prop is only available if you use the %s prop or slotted content.', 'heading', 'text');
}
getRect(element) {
return element.getBoundingClientRect();
}
openToast() {
requestAnimationFrame(() => {
const { scrollHeight } = this.hostElement;
const { height } = this.getRect(this.hostElement);
this.hostElement.style.height = `${height}px`;
this.isExpanding = true;
this.animateToast(true, `${height}px`, `${scrollHeight}px`);
});
}
closeToast() {
const { scrollHeight, clientHeight } = this.hostElement;
const height = this.isExpanding ? clientHeight : scrollHeight;
this.hostElement.style.height = `0px`;
this.isClosing = true;
this.animateToast(false, `${height}px`, `0px`);
}
animateToast(open, startHeight, endHeight) {
this.cancelAnimations();
this.animation = this.hostElement.animate({
height: [startHeight, endHeight],
}, {
duration: 400,
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();
if (!this.hide)
this.hostElement.style.height = '';
else
this.hidden.emit(this.hide);
this.isClosing = false;
this.isExpanding = false;
}
cancelAnimations() {
if (this.animation)
this.animation.cancel();
}
handleClick(event) {
this.hide = true;
this.close.emit(this.hide);
ripple(event, this.toast);
}
getIcon() {
if (this.illustration)
return '';
if (this.icon)
return this.icon;
if (this.appearance === 'success')
return check_circle;
if (this.appearance === 'warning')
return alert_exclamation_triangle;
if (this.appearance === 'error')
return alert_exclamation_circle;
return alert_info_circle;
}
getRole() {
return this.appearance === 'error' ? 'alert' : 'status';
}
showIcon() {
return !this.illustration;
}
showIllustration() {
return !this.showIcon();
}
showTitle() {
return (this.hasSlottedContent || !!this.text) && !!this.heading;
}
translate(prop) {
return translations?.[prop]?.[this.language || en] || prop;
}
hideToast() {
return this.hide && !(this.isClosing || this.isExpanding);
}
render() {
return (h(Host, { key: '4d7cc11bfc2d8a2f0a1b42cf291bcf09e810d4a8' }, h("output", { key: 'a1d2e02c4936c863efba2e3b4744260096b966b0', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && h("pn-icon", { key: 'b4aac661b5f62cec6205aa81374c82d259186d32', class: "pn-toast-icon", icon: this.getIcon() }), h("div", { key: 'afd8f78fab826cfe2a8d00a02158c6504f77ec3c', class: "pn-toast-content" }, this.showTitle() && h("h4", { key: '6d32326637df6723c3d7e68b84f9190b59fa5765', class: "pn-toast-heading" }, this.heading), this.text && h("p", { key: 'abdbb69a78692b81105f5b3134afdf4be1e27b55', class: "pn-toast-text" }, this.text), h("slot", { key: '45c3b143b92ec4350542d17f3a4295028d00631c' })), this.showIllustration() && h("pn-illustration", { key: 'e9569b033e296e7c7310521ca4a67517553f1355', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (h("button", { key: '8c4fb6be7e19db8f9889eb44c765f115d026cd9c', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, h("pn-icon", { key: '3865a38e56f96cccd7e22df16d21913bfcdd3e78', icon: close }))))));
}
static get watchers() { return {
"hide": ["handleHide"]
}; }
static get style() { return PnToastStyle0; }
}, [4, "pn-toast", {
"heading": [1],
"text": [1],
"toastId": [1, "toast-id"],
"appearance": [1],
"temporary": [4],
"icon": [1],
"illustration": [1],
"hide": [1540],
"closable": [4],
"language": [1025],
"isClosing": [32],
"isExpanding": [32],
"hasSlottedContent": [32]
}, undefined, {
"hide": ["handleHide"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-toast", "pn-icon", "pn-illustration"];
components.forEach(tagName => { switch (tagName) {
case "pn-toast":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnToast$1);
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "pn-illustration":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnToast = PnToast$1;
const defineCustomElement = defineCustomElement$1;
export { PnToast, defineCustomElement };
//# sourceMappingURL=pn-toast.js.map