@scania/tegel
Version:
Tegel Design System
329 lines (328 loc) • 12.4 kB
JavaScript
import { Host, h } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
import hasSlot from "../../utils/hasSlot";
/**
* @slot header - Slot for the Toast header.
* @slot subheader - Slot for the Toast subheader.
* @slot actions - Slot for the Toast bottom section, used for links.
*/
export class TdsToast {
constructor() {
/** 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" }))))));
}
static get is() { return "tds-toast"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["toast.scss"]
};
}
static get styleUrls() {
return {
"$": ["toast.css"]
};
}
static get properties() {
return {
"toastId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID for the Toast. Randomly generated if not specified."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "toast-id",
"defaultValue": "generateUniqueId()"
},
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Header text for the component."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "header"
},
"subheader": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Subheader text for the component."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "subheader"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'information' | 'error' | 'warning' | 'success'",
"resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Type of Toast."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "variant",
"defaultValue": "'information'"
},
"hidden": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hides the Toast."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "hidden",
"defaultValue": "false"
},
"closable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enables the close button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "closable",
"defaultValue": "true"
},
"toastRole": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'alert' | 'log' | 'status'",
"resolved": "\"alert\" | \"log\" | \"status\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ARIA role for the Toast."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "toast-role",
"defaultValue": "'alert'"
},
"tdsCloseAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Provides an accessible name for the components close button"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-close-aria-label"
},
"tdsAriaLive": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'polite' | 'assertive'",
"resolved": "\"assertive\" | \"polite\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ARIA live for the Toast."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-live",
"defaultValue": "'polite'"
}
};
}
static get events() {
return [{
"method": "tdsClose",
"name": "tdsClose",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Sends unique Toast identifier when component is closed."
},
"complexType": {
"original": "{\n toastId: string;\n }",
"resolved": "{ toastId: string; }",
"references": {}
}
}];
}
static get methods() {
return {
"hideToast": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Hides the Toast.",
"tags": []
}
},
"showToast": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Shows the Toast.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}