@scania/tegel
Version:
Tegel Design System
57 lines (51 loc) • 5.55 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-ca8040ad.js');
const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
const messageCss = ":host{--tds-message-background:var(--background-elevation-layer-03);--tds-message-background-error:var(--system-danger-subtle-03);--tds-message-background-warning:var(--background-elevation-layer-03);--tds-message-background-success:var(--background-elevation-layer-03);}:host .tds-mode-variant-primary{--tds-message-background:var(--background-elevation-layer-03);--tds-message-background-error:var(--system-danger-subtle-03);--tds-message-background-warning:var(--background-elevation-layer-03);--tds-message-background-success:var(--background-elevation-layer-03)}:host .tds-mode-variant-secondary{--tds-message-background:var(--background-elevation-layer-02);--tds-message-background-error:var(--system-danger-subtle-02);--tds-message-background-warning:var(--background-elevation-layer-02);--tds-message-background-success:var(--background-elevation-layer-02)}:host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--system-info-default)}:host .wrapper.information tds-icon{color:var(--system-info-default)}:host .wrapper.success{background-color:var(--tds-message-background-success);border-left:4px solid var(--system-success-default)}:host .wrapper.success tds-icon{color:var(--system-success-default)}:host .wrapper.error{background-color:var(--tds-message-background-error);border-left:4px solid var(--system-danger-default)}:host .wrapper.error tds-icon{color:var(--system-danger-default)}:host .wrapper.warning{background-color:var(--tds-message-background-warning);border-left:4px solid var(--system-warning-default)}:host .wrapper.warning tds-icon{color:var(--system-warning-default)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}: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(--system-danger-default)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 0}: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-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)}";
const TdsMessageStyle0 = messageCss;
const TdsMessage = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
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.generateUniqueId()}` : undefined;
const contentId = !this.minimal ? `tds-message-content-${generateUniqueId.generateUniqueId()}` : undefined;
return (index.h(index.Host, { key: 'f279cd2861d40276ea82a2e38d7a55eeda4c550a', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel() }, index.h("div", { key: '96afc352fe7b1571f62ba6c60729bd2411c56138', class: {
wrapper: true,
[this.variant]: true,
minimal: this.minimal,
[`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
} }, !this.noIcon && (index.h("tds-icon", { key: '7c95385da3ab0e887b6e955a302bc39b3aeaafe0', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), index.h("div", { key: 'eed507b43c57eaafdeba40c25e9556bacbe0f166', class: `content` }, this.header && (index.h("div", { key: 'd6faa3f523f64f158a31e35a416f957c38bbcceb', class: "header", id: headerId }, this.header)), !this.minimal && (index.h("div", { key: '03c724a2bdbee954b9c48aa27a18444abfacafbb', class: "extended-message", id: contentId }, index.h("slot", { key: '017b634e145a514a2315880db6cfb712ddb254b0' })))))));
}
};
TdsMessage.style = TdsMessageStyle0;
exports.tds_message = TdsMessage;