@postnord/web-components
Version:
PostNord Web Components
208 lines (202 loc) • 11.9 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-dc6e40e7.js';
import { j as awaitTopbar, r as ripple, e as en } from './helpers-88f72b54.js';
import { a as alert_exclamation_circle } from './alert_exclamation_circle-7e58e19d.js';
import { a as alert_info_circle } from './alert_info_circle-09cae69f.js';
import { c as check_circle } from './check_circle-1a968ce0.js';
import { c as close } from './close-9e832820.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;transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.close = createEvent(this, "close", 7);
this.hidden = createEvent(this, "hidden", 7);
}
toast;
button;
animation;
get hostElement() { return getElement(this); }
isClosing = false;
isExpanding = false;
hasSlottedContent = false;
/**
* Set a title for the toast. Requires the `text` prop in order to work.
* @description Can be used together with slotted content.
*/
heading = '';
/**
* Set a paragraph of text for the toast.
* @description Can be used together with slotted content.
*/
text = '';
/** Give the toast a HTML ID. */
toastId;
/**
* Default color is blue, you also have the option of success (green), warning (orange) and error (red).
* @category Visual
*/
appearance;
/**
* This will apply a shadow and border to the toast.
* @category Visual
*/
temporary = false;
/**
* Set an SVG icon.
* @category Visual
*/
icon;
/**
* Set an SVG illustration.
* @category Visual
*/
illustration;
/**
* Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own.
* @see {@link closable}
* @category Features
*/
hide = false;
/**
* Show close button.
* @category Features
*/
closable = false;
/**
* Manually set the language, only needed if the `closable` prop is enabled.
* @see {@link closable}
* @category Features
*/
language = null;
handleHide() {
const { matches } = window.matchMedia('(prefers-reduced-motion: reduce)');
if (matches)
return this.hidden.emit(this.hide);
if (this.hide)
this.closeGrid();
else
this.openGrid();
}
/** 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();
}
openGrid() {
requestAnimationFrame(() => {
const { scrollHeight } = this.hostElement;
const { height } = this.getRect(this.hostElement);
this.hostElement.style.height = `${height}px`;
this.isExpanding = true;
this.animate(true, `${height}px`, `${scrollHeight}px`);
});
}
closeGrid() {
const { scrollHeight, clientHeight } = this.hostElement;
const height = this.isExpanding ? clientHeight : scrollHeight;
this.hostElement.style.height = `0px`;
this.isClosing = true;
this.animate(false, `${height}px`, `0px`);
}
animate(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();
}
closeToast(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: 'e1d530ec1396c479685092dfdc6d668a80071b15' }, h("output", { key: '9aae177ffec7556f30789964e1a1f6698d07b5e5', 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: '91a1f34ce7ca572f74a9f4bc90f102eefa84b7c2', class: "pn-toast-icon", icon: this.getIcon() }), h("div", { key: '1df901ec80ebf06265f517b97ed83e70aef4ec51', class: "pn-toast-content" }, this.showTitle() && h("h4", { key: '9e6b540a4eecc675bdcfeebeb1186b0f8834a769', class: "pn-toast-heading" }, this.heading), this.text && h("p", { key: '21c656c0af57f103c6b2ed734d79d2423399ce0c', class: "pn-toast-text" }, this.text), h("slot", { key: '8b99e035f2c276480f71d7c8f428a259256e2f68' })), this.showIllustration() && h("pn-illustration", { key: 'b259e69da37e02e728f89596bc4beadb35220eab', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (h("button", { key: 'c4e841ae4ec6a21f42e7de285837beda8884f86b', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.closeToast(event), ref: el => (this.button = el) }, h("pn-icon", { key: '370667bd83527321a154a542761062e84704844a', icon: close }))))));
}
static get watchers() { return {
"hide": ["handleHide"]
}; }
};
PnToast.style = PnToastStyle0;
export { PnToast as pn_toast };
//# sourceMappingURL=pn-toast.entry.js.map