@scania/tegel
Version:
Tegel Design System
65 lines (61 loc) • 5.25 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
import { h as hasSlot } from './hasSlot-DDX6uFcm.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 TdsBanner = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsClose = createEvent(this, "tdsClose", 7);
/** Variant of Banner */
this.variant = 'default';
/** ID used for internal table functionality and events, must be unique.
*
* **NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner,
* as the default ID is random and will be different every time.
*/
this.bannerId = generateUniqueId();
/** Hides the Banner */
this.hidden = false;
/** Defines the ARIA role of the banner. Defaults to "banner" for global use,
* but can be set to "region" or "alert" if used differently.
*/
this.roleType = 'banner';
this.handleClose = () => {
const tdsCloseEvent = this.tdsClose.emit({
bannerId: this.bannerId,
});
if (!tdsCloseEvent.defaultPrevented) {
this.hidden = true;
}
};
}
/** 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: '5b89bedb919ed799da1701cae1c152e310865b43', 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: 'b17e4c4986ccb9afde8ad9609465fdad1f5f78fe', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: '2d43b52d72b874809d48b40ab2faae796e3c7d08', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '3f1d0b8493aaf41e1fe78837c937d56bb4d4d6af', class: "content" }, h("div", { key: '3fd4dac5928d5f588eff7cc9cf8a64c401b75875', class: "header-subheader" }, this.header && h("div", { key: 'f356b4218fba0c42c97e728fe6fc91bb14c8a3d7', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '74659c5c0b33bbc81f90d79c9cb80d3dcd1839fa', name: "header" }), this.subheader && h("div", { key: 'b91ba944f6c41ccf62002a2dade85968dd5b34f4', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'e8854a51dc158cba747abca51d79828ee419732e', name: "subheader" })), usesActionsSlot && h("slot", { key: '60fe1b1b75a7cc169d71b97d5d91086d7ae96a07', name: "actions" })), h("div", { key: 'bf664cd50d34e9ac4c3061d1670d0607cd326bef', class: `banner-close` }, h("button", { key: '0ddfadbfe00ecf7ec1376fdfbc2d70ff0cffb919', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '7e45115cd682e035227b486442c4fe4c67dfec4b', name: "cross", size: "20px", svgTitle: "Close" })))));
}
get host() { return getElement(this); }
};
TdsBanner.style = bannerCss();
export { TdsBanner as tds_banner };