@scania/tegel
Version:
Tegel Design System
94 lines (89 loc) • 5.9 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.js';
import { h as hasSlot } from './p-ae110fc2.js';
import { d as defineCustomElement$2 } from './p-b390ece5.js';
const bannerCss = ":host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400;padding-left:16px}:host .banner-icon{padding-left:4px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;padding-top:12px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}";
const TdsBannerStyle0 = bannerCss;
const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tdsClose = createEvent(this, "tdsClose", 7);
this.handleClose = () => {
const tdsCloseEvent = this.tdsClose.emit({
bannerId: this.bannerId,
});
if (!tdsCloseEvent.defaultPrevented) {
this.hidden = true;
}
};
this.icon = undefined;
this.header = undefined;
this.subheader = undefined;
this.variant = 'default';
this.bannerId = generateUniqueId();
this.hidden = false;
this.roleType = 'banner';
}
/** Hides the Banner. */
async hideBanner() {
this.hidden = true;
}
/** Shows the Banner */
async showBanner() {
this.hidden = false;
}
connectedCallback() {
if (this.variant === 'error') {
this.icon = 'error';
}
else if (this.variant === 'information') {
this.icon = 'info';
}
}
render() {
const usesHeaderSlot = hasSlot('subheader', this.host);
const usesSubheaderSlot = hasSlot('subheader', this.host);
const usesActionsSlot = hasSlot('actions', this.host);
return (h(Host, { key: '4a8e42b6c770c6c888739b2eab7e838fe4f83899', role: this.roleType, "aria-hidden": `${this.hidden}`, "aria-live": this.roleType === 'alert' ? 'assertive' : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: {
[this.variant]: true,
hide: this.hidden,
show: !this.hidden,
} }, this.icon && (h("div", { key: '45b0a63ff1015c7a24bb37211eccfa5c8b5320ca', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: '2375c0c7a5a785fc788088e4568ad04a7d5f778e', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '0b4a58d3d3ab8405193bd771797badde39e23729', class: "content" }, h("div", { key: 'e9b26e4b13055853ea659cec8d990f7f2eb76999', class: "header-subheader" }, this.header && h("div", { key: '5cedf44a46330c77259c3d64cf567052ef26af0b', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'a2c9897a3befbbd5603262962a7652a763650048', name: "header" }), this.subheader && h("div", { key: 'a7916827ee4ea924270242c9f06ce75989021c3b', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'fba6caffbf916a12b8e5975966551c4c9d03a5c9', name: "subheader" })), usesActionsSlot && h("slot", { key: '7a1b89ac09e9aa7e79740f225960818d2622d4b4', name: "actions" })), h("div", { key: '9dca236d2f8253c64a8a9ff67981f69c6f473c77', class: `banner-close` }, h("button", { key: 'cabd5fa950e125babecc6caf8109c51d05142ec3', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '2ec160b7e458fc4e99528c390f6190dea039f02a', name: "cross", size: "20px", svgTitle: "Close" })))));
}
get host() { return this; }
static get style() { return TdsBannerStyle0; }
}, [1, "tds-banner", {
"icon": [1],
"header": [1],
"subheader": [1],
"variant": [1],
"bannerId": [1, "banner-id"],
"hidden": [516],
"roleType": [1, "role-type"],
"hideBanner": [64],
"showBanner": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-banner", "tds-icon"];
components.forEach(tagName => { switch (tagName) {
case "tds-banner":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsBanner$1);
}
break;
case "tds-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const TdsBanner = TdsBanner$1;
const defineCustomElement = defineCustomElement$1;
export { TdsBanner, defineCustomElement };