@scania/tegel
Version:
Tegel Design System
118 lines (113 loc) • 7.47 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.js';
import { h as hasSlot } from './p-ae110fc2.js';
import { d as defineCustomElement$2 } from './p-b390ece5.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-icon-color-info)}:host .wrapper.information tds-icon{color:var(--tds-toast-icon-color-info)}:host .wrapper.success{border-left:4px solid var(--tds-toast-icon-color-success)}:host .wrapper.success tds-icon{color:var(--tds-toast-icon-color-success)}:host .wrapper.error{border-left:4px solid var(--tds-toast-icon-color-error)}:host .wrapper.error tds-icon{color:var(--tds-toast-icon-color-error)}:host .wrapper.warning{border-left:4px solid var(--tds-toast-icon-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 TdsToastStyle0 = toastCss;
const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tdsClose = createEvent(this, "tdsClose", 7);
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;
}
};
this.toastId = generateUniqueId();
this.header = undefined;
this.subheader = undefined;
this.variant = 'information';
this.hidden = false;
this.closable = true;
this.toastRole = 'alert';
this.tdsCloseAriaLabel = undefined;
this.tdsAriaLive = 'polite';
}
/** 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: '433c25165487688ff40c78a0455d30cedd08c76f', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
hide: this.hidden,
show: !this.hidden,
} }, h("div", { key: '2734573a413d9cdf1a329675fe0e0db374243cbf', class: `
wrapper
${this.variant}` }, h("tds-icon", { key: '88d4ab6fd55d64c93ad3089c695d0fa4075208a6', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '02de15f884420946530d2e04c330987f73c9ca44', class: `content` }, h("div", { key: '4eb8c6a13a7bb53313a18b47bfa8e2ab1211cdbc', class: "header-subheader" }, this.header && h("div", { key: '1b707e29cdd68a5cc73a2b694b8b93698cbac661', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'ffe2b463f8fc6e4ca3b563d7a4ae55968cb4a478', name: "header" }), this.subheader && h("div", { key: '8164b591452e4a6f025f752951c678a15443fff9', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2bca8428e8eb128cf8c0f62b31a0da54ef555df3', name: "subheader" })), usesActionsSlot && (h("div", { key: 'de84bc19257b09127b861b357240509a7346f2e7', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'b85a46c5dc97dc7d3b95feb816145731887711fb', name: "actions" })))), this.closable && (h("button", { key: '69adb03d815ece9e50cf436957927c5dcd4d3ab8', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '9b4f062079caa32c5900202aaf1c2a7a5ef8e18c', name: "cross", size: "20px", svgTitle: "cross" }))))));
}
get host() { return this; }
static get style() { return TdsToastStyle0; }
}, [1, "tds-toast", {
"toastId": [1, "toast-id"],
"header": [1],
"subheader": [1],
"variant": [1],
"hidden": [516],
"closable": [4],
"toastRole": [1, "toast-role"],
"tdsCloseAriaLabel": [1, "tds-close-aria-label"],
"tdsAriaLive": [1, "tds-aria-live"],
"hideToast": [64],
"showToast": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-toast", "tds-icon"];
components.forEach(tagName => { switch (tagName) {
case "tds-toast":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsToast$1);
}
break;
case "tds-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const TdsToast = TdsToast$1;
const defineCustomElement = defineCustomElement$1;
export { TdsToast, defineCustomElement };