@postnord/web-components
Version:
PostNord Web Components
168 lines (162 loc) • 11.4 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
import { a as animateHeightFactory } from './index-CosyroON.js';
import { awaitTopbar, ripple, en } from './index.js';
import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
import { a as alert_info_circle } from './alert_info_circle-BTqkgfeH.js';
import { c as check_circle } from './check_circle-D4GZ__oQ.js';
import { c as close } from './close-BvuWkoyY.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 = () => `${transformTag("pn-toast")}{position:relative;display:block}${transformTag("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)} (prefers-reduced-motion: reduce){${transformTag("pn-toast")} .pn-toast{transition-duration:0s;transition-delay:0s}}${transformTag("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} ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${transformTag("pn-toast")} .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}${transformTag("pn-toast")} .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}${transformTag("pn-toast")} .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}${transformTag("pn-toast")} .pn-toast-text:last-child{margin-bottom:0}${transformTag("pn-toast")} .pn-toast-icon .pn-icon-svg path{fill:#2d2013}${transformTag("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}${transformTag("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)} (prefers-reduced-motion: reduce){${transformTag("pn-toast")} .pn-toast-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-toast")} .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-toast")} .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}${transformTag("pn-toast")} .pn-toast-button:hover{background-color:#8eddf9}${transformTag("pn-toast")} .pn-toast[data-appearance=success]{background-color:#dcf6e7}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}${transformTag("pn-toast")} .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}${transformTag("pn-toast")} .pn-toast[data-appearance=warning]{background-color:#fff1e3}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}${transformTag("pn-toast")} .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}${transformTag("pn-toast")} .pn-toast[data-appearance=error]{background-color:#fdefee}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}${transformTag("pn-toast")} .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}${transformTag("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 PnToast = class extends Mixin(animateHeightFactory) {
constructor(hostRef) {
super();
registerInstance(this, hostRef);
this.close = createEvent(this, "close");
this.hidden = createEvent(this, "hidden");
}
toast;
button;
get hostElement() { return getElement(this); }
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() {
this.hostElement.style.overflow = 'hidden';
requestAnimationFrame(() => this.toggleToastVisibility());
}
/** 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.
* @since v7.6.0
**/
hidden;
async componentWillLoad() {
if (this.hide) {
this.hostElement.style.height = '0';
this.hostElement.style.overflow = 'hidden';
}
// Any text content at this stage means there is slotted content present.
this.hasSlottedContent = !!this.hostElement.textContent;
if (this.language === null)
await awaitTopbar(this.hostElement);
}
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');
}
toggleToastVisibility() {
if (this.hide)
this.closeDropdown(this.hostElement, this.toast.clientHeight);
else
this.openDropdown(this.hostElement, this.toast.clientHeight);
}
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.isMoving();
}
render() {
return (h(Host, { key: '5c3fee615535723fb1f866ad2e5bc955289abe6e' }, h("div", { key: '4de5c242cce6bd2e77c355030c53e1161495f2aa', 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: '69348635c02e8108503dbf588e65d522405fd08f', class: "pn-toast-icon", icon: this.getIcon() }), h("div", { key: 'a4a2bbd367ff30405a305e4c56da05575e2765bd', class: "pn-toast-content" }, this.showTitle() && h("h4", { key: '0e847dd42ed4d0e1c518b69519f27f23d491e11c', class: "pn-toast-heading" }, this.heading), this.text && h("p", { key: 'c423eb0872592844f4d583839b438442f65c1ab9', class: "pn-toast-text" }, this.text), h("slot", { key: '4e743ba3362107a4b5f585e12b2ad2879ffef5bf' })), this.showIllustration() && h("pn-illustration", { key: '1330548a89218ee19a73ff83f94df180a7b2cc98', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (h("button", { key: '321c57a9103fa0b4abedd2429420f94faa9fd5fc', 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: '3d68d08f2cca035840acd466accbe0d66da65153', icon: close }))))));
}
static get watchers() { return {
"hide": [{
"handleHide": 0
}]
}; }
};
PnToast.style = pnToastCss();
export { PnToast as pn_toast };