@scania/tegel
Version:
Tegel Design System
188 lines (187 loc) • 7.37 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() {
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.header = undefined;
this.modeVariant = null;
this.variant = 'information';
this.noIcon = false;
this.minimal = false;
this.tdsAlertDialog = 'dialog';
this.tdsAriaLabel = undefined;
}
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: 'f279cd2861d40276ea82a2e38d7a55eeda4c550a', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel() }, h("div", { key: '96afc352fe7b1571f62ba6c60729bd2411c56138', class: {
wrapper: true,
[this.variant]: true,
minimal: this.minimal,
[`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
} }, !this.noIcon && (h("tds-icon", { key: '7c95385da3ab0e887b6e955a302bc39b3aeaafe0', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'eed507b43c57eaafdeba40c25e9556bacbe0f166', class: `content` }, this.header && (h("div", { key: 'd6faa3f523f64f158a31e35a416f957c38bbcceb', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '03c724a2bdbee954b9c48aa27a18444abfacafbb', class: "extended-message", id: contentId }, h("slot", { key: '017b634e145a514a2315880db6cfb712ddb254b0' })))))));
}
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",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Header text for the component."
},
"attribute": "header",
"reflect": false
},
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary'",
"resolved": "\"primary\" | \"secondary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Variant of the component, based on current mode."
},
"attribute": "mode-variant",
"reflect": false,
"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."
},
"attribute": "variant",
"reflect": false,
"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."
},
"attribute": "no-icon",
"reflect": false,
"defaultValue": "false"
},
"minimal": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Minimal Message styling."
},
"attribute": "minimal",
"reflect": false,
"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."
},
"attribute": "tds-alert-dialog",
"reflect": false,
"defaultValue": "'dialog'"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"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."
},
"attribute": "tds-aria-label",
"reflect": false
}
};
}
}