@scania/tegel
Version:
Tegel Design System
56 lines (51 loc) • 4.97 kB
JavaScript
'use strict';
var index = require('./index-DGsdvbvx.js');
var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
const messageCss = () => `:host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-message-border-info)}:host .wrapper.information tds-icon{color:var(--tds-message-icon-info)}:host .wrapper.success{background-color:var(--tds-message-background-success);border-left:4px solid var(--tds-message-border-success)}:host .wrapper.success tds-icon{color:var(--tds-message-icon-success)}:host .wrapper.error{background-color:var(--tds-message-background-error);border-left:4px solid var(--tds-message-border-error)}:host .wrapper.error tds-icon{color:var(--tds-message-icon-error)}:host .wrapper.warning{background-color:var(--tds-message-background-warning);border-left:4px solid var(--tds-message-border-warning)}:host .wrapper.warning tds-icon{color:var(--tds-message-icon-warning)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal tds-icon{padding-right:8px}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--tds-message-minimal-header-error)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 24px 2px 0;overflow-wrap:anywhere}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-03-font-family);font-size:var(--detail-03-font-size);line-height:var(--detail-03-line-height);font-weight:var(--detail-03-font-weight);letter-spacing:var(--detail-03-letter-spacing);text-transform:var(--detail-03-text-transform)}`;
const TdsMessage = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** 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.generateUniqueId()}` : undefined;
const contentId = !this.minimal ? `tds-message-content-${generateUniqueId.generateUniqueId()}` : undefined;
return (index.h(index.Host, { key: 'f135a2d8708f2d9529aa862aadc2a9446dfea613', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, index.h("div", { key: 'e190d40483c364c38f57fe6191ce1ec01fe37b01', class: {
wrapper: true,
[this.variant]: true,
minimal: this.minimal,
} }, !this.noIcon && (index.h("tds-icon", { key: '74d8a70c3e93f6e3f39087c9eb3f956ac08381d9', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), index.h("div", { key: '3f0a1ea45cb53ae45373abd5543a59b81d23d7ce', class: `content` }, this.header && (index.h("div", { key: 'c2a448d5b589091a14ef655c45610ec13c4aa0bc', class: "header", id: headerId }, this.header)), !this.minimal && (index.h("div", { key: 'ea6960909da3406ca6dc1cf1ddb1459747a329e1', class: "extended-message", id: contentId }, index.h("slot", { key: '44889b6121d8052fad6d935f4b8473bcdb0520fb' })))))));
}
};
TdsMessage.style = messageCss();
exports.tds_message = TdsMessage;