@scania/tegel
Version:
Tegel Design System
83 lines (79 loc) • 6.39 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
import { h as hasSlot } from './hasSlot-DDX6uFcm.js';
const toastCss = () => `:host(.hide){display:none;visibility:hidden}:host{z-index:800}:host .wrapper{display:flex;width:348px;background-color:var(--tds-toast-background-color);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-toast-color-info)}:host .wrapper.information tds-icon{color:var(--tds-toast-color-info)}:host .wrapper.success{border-left:4px solid var(--tds-toast-color-success)}:host .wrapper.success tds-icon{color:var(--tds-toast-color-success)}:host .wrapper.error{border-left:4px solid var(--tds-toast-color-error)}:host .wrapper.error tds-icon{color:var(--tds-toast-color-error)}:host .wrapper.warning{border-left:4px solid var(--tds-toast-color-warning)}:host .wrapper.warning tds-icon{color:var(--tds-toast-icon-color-warning)}:host .wrapper button.close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 22px;border:none;background:transparent}:host .wrapper button.close:hover{cursor:pointer}:host .wrapper button.close:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .wrapper button.close tds-icon{color:var(--tds-toast-dissmiss-color);padding:0}:host tds-icon{padding:14px 0 0 12px}:host .content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1;max-width:250px;word-break:break-word}:host .content .header-subheader{display:flex;flex-direction:column;gap:4px}:host .content .header,:host .content slot[name=header]::slotted(*){font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-toast-headline-color)}:host .content .subheader,:host .content slot[name=subheader]::slotted(*){color:var(--tds-toast-subheadline-color);font:var(--tds-detail-02) !important;letter-spacing:var(--tds-detail-02-ls) !important}:host .content .subheader.no-link slot::slotted(*),:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*){padding-bottom:0}:host .content .toast-bottom{padding-top:12px}:host .tds-mode-variant-primary{--tds-toast-background:var(--tds-toast-background-primary)}:host .tds-mode-variant-secondary{--tds-toast-background:var(--tds-toast-background-secondary)}`;
const TdsToast = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsClose = createEvent(this, "tdsClose", 7);
/** ID for the Toast. Randomly generated if not specified. */
this.toastId = generateUniqueId();
/** Type of Toast. */
this.variant = 'information';
/** Hides the Toast. */
this.hidden = false;
/** Enables the close button. */
this.closable = true;
/** ARIA role for the Toast. */
this.toastRole = 'alert';
/** ARIA live for the Toast. */
this.tdsAriaLive = 'polite';
this.getIconName = () => {
switch (this.variant) {
case 'information':
return 'info';
case 'error':
return 'error';
case 'warning':
return 'warning';
case 'success':
return 'tick';
default:
return 'info';
}
};
this.handleClose = () => {
const tdsCloseEvent = this.tdsClose.emit({
toastId: this.toastId,
});
if (!tdsCloseEvent.defaultPrevented) {
this.hidden = true;
}
};
this.handleShow = () => {
const tdsCloseEvent = this.tdsClose.emit({
toastId: this.toastId,
});
if (!tdsCloseEvent.defaultPrevented) {
this.hidden = false;
}
};
}
/** Hides the Toast. */
async hideToast() {
this.hidden = true;
}
/** Shows the Toast. */
async showToast() {
this.hidden = false;
}
connectedCallback() {
if (!this.tdsCloseAriaLabel) {
console.warn('tds-toast: tdsCloseAriaLabel is required');
}
}
render() {
const usesHeaderSlot = hasSlot('header', this.host);
const usesSubheaderSlot = hasSlot('subheader', this.host);
const usesActionsSlot = hasSlot('actions', this.host);
return (h(Host, { key: '05cfab6acac4bf8a86b3bfede4ddfa80d9f1a304', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
hide: this.hidden,
show: !this.hidden,
} }, h("div", { key: '32583b47e144a437be6c194445b22f4a0aa00ba8', class: `
wrapper
${this.variant}` }, h("tds-icon", { key: '0a3b7c306323b02ae1b1ef67cbe339f51404dade', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: 'f8759ce8357c526cfedc218220c950b1b5e637c7', class: `content` }, h("div", { key: 'bb4487290f95f36554afc7f6b2ce672eda8eaebc', class: "header-subheader" }, this.header && h("div", { key: 'ff99a04a22409cd318710d013e8d25b8a0aa3861', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '101a2ada1599fdc15b90ccc658e508b51dee2900', name: "header" }), this.subheader && h("div", { key: '2edc1acb846a8a364bc589f90891b07722d558c9', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '572ff0654cd2eda217ff0f124e8599748b71d151', name: "subheader" })), usesActionsSlot && (h("div", { key: 'efb4061f8574866c8944d1349d37cae8d7348993', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'ae41441a2d602ae150ec685725a7ee6722e84a4e', name: "actions" })))), this.closable && (h("button", { key: '52f934fb79a07225a393ff799e6189aa51052b6c', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'c208a433f3be14c1ad2e38a74ef9945ab05bbf7d', name: "cross", size: "20px", svgTitle: "cross" }))))));
}
get host() { return getElement(this); }
};
TdsToast.style = toastCss();
export { TdsToast as tds_toast };