@scania/tegel
Version:
Tegel Design System
86 lines (81 loc) • 6.51 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.js';
import { d as defineCustomElement$2 } from './p-b390ece5.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$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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 style() { return TdsMessageStyle0; }
}, [1, "tds-message", {
"header": [1],
"modeVariant": [1, "mode-variant"],
"variant": [1],
"noIcon": [4, "no-icon"],
"minimal": [4],
"tdsAlertDialog": [1, "tds-alert-dialog"],
"tdsAriaLabel": [1, "tds-aria-label"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-message", "tds-icon"];
components.forEach(tagName => { switch (tagName) {
case "tds-message":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsMessage$1);
}
break;
case "tds-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const TdsMessage = TdsMessage$1;
const defineCustomElement = defineCustomElement$1;
export { TdsMessage, defineCustomElement };