@scania/tegel
Version:
Tegel Design System
204 lines (203 loc) • 8.15 kB
JavaScript
import { Host, h } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
/**
* @slot <default> - <b>Unnamed slot.</b> For the extended message. Not visible on minimal messages.
*/
export class TdsMessage {
constructor() {
/** Variant of the component, based on current mode. */
this.modeVariant = null;
/** Variant of Message. */
this.variant = 'information';
/** Removes the icon in the Message. */
this.noIcon = false;
/** Minimal Message styling. */
this.minimal = false;
/** Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
this.tdsAlertDialog = 'dialog';
this.getIconName = () => {
switch (this.variant) {
case 'information':
return 'info';
case 'error':
return 'error';
case 'warning':
return 'warning';
case 'success':
return 'tick';
default:
return 'info';
}
};
}
getAriaLabel() {
if (this.header) {
return this.header;
}
const variantLabel = `${this.variant} message`;
return this.tdsAriaLabel || variantLabel;
}
render() {
const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
return (h(Host, { key: 'f135a2d8708f2d9529aa862aadc2a9446dfea613', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'e190d40483c364c38f57fe6191ce1ec01fe37b01', class: {
wrapper: true,
[this.variant]: true,
minimal: this.minimal,
} }, !this.noIcon && (h("tds-icon", { key: '74d8a70c3e93f6e3f39087c9eb3f956ac08381d9', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: '3f0a1ea45cb53ae45373abd5543a59b81d23d7ce', class: `content` }, this.header && (h("div", { key: 'c2a448d5b589091a14ef655c45610ec13c4aa0bc', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: 'ea6960909da3406ca6dc1cf1ddb1459747a329e1', class: "extended-message", id: contentId }, h("slot", { key: '44889b6121d8052fad6d935f4b8473bcdb0520fb' })))))));
}
static get is() { return "tds-message"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["message.scss"]
};
}
static get styleUrls() {
return {
"$": ["message.css"]
};
}
static get properties() {
return {
"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"
},
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | null",
"resolved": "\"primary\" | \"secondary\" | null",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Variant of the component, based on current mode."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "mode-variant",
"defaultValue": "null"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'information' | 'error' | 'warning' | 'success'",
"resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Variant of Message."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "variant",
"defaultValue": "'information'"
},
"noIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Removes the icon in the Message."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "no-icon",
"defaultValue": "false"
},
"minimal": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Minimal Message styling."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "minimal",
"defaultValue": "false"
},
"tdsAlertDialog": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'alertdialog' | 'dialog'",
"resolved": "\"alertdialog\" | \"dialog\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-alert-dialog",
"defaultValue": "'dialog'"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Provides an accessible name for the message component when no header is present. This ensures proper screen reader support for dialog/alertdialog roles."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-label"
}
};
}
}