@scania/tegel
Version:
Tegel Design System
308 lines (307 loc) • 11.7 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() {
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" }))))));
}
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."
},
"attribute": "toast-id",
"reflect": false,
"defaultValue": "generateUniqueId()"
},
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Header text for the component."
},
"attribute": "header",
"reflect": false
},
"subheader": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Subheader text for the component."
},
"attribute": "subheader",
"reflect": false
},
"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."
},
"attribute": "variant",
"reflect": false,
"defaultValue": "'information'"
},
"hidden": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hides the Toast."
},
"attribute": "hidden",
"reflect": true,
"defaultValue": "false"
},
"closable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enables the close button."
},
"attribute": "closable",
"reflect": false,
"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."
},
"attribute": "toast-role",
"reflect": false,
"defaultValue": "'alert'"
},
"tdsCloseAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provides an accessible name for the components close button"
},
"attribute": "tds-close-aria-label",
"reflect": false
},
"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."
},
"attribute": "tds-aria-live",
"reflect": false,
"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"; }
}