@scania/tegel
Version:
Tegel Design System
63 lines (57 loc) • 5 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-ca8040ad.js');
const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
const hasSlot = require('./hasSlot-1c90e9ba.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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tdsClose = index.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.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.hasSlot('subheader', this.host);
const usesSubheaderSlot = hasSlot.hasSlot('subheader', this.host);
const usesActionsSlot = hasSlot.hasSlot('actions', this.host);
return (index.h(index.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 && (index.h("div", { key: '45b0a63ff1015c7a24bb37211eccfa5c8b5320ca', class: `banner-icon ${this.variant}` }, index.h("tds-icon", { key: '2375c0c7a5a785fc788088e4568ad04a7d5f778e', name: this.icon, size: "20px", svgTitle: this.icon }))), index.h("div", { key: '0b4a58d3d3ab8405193bd771797badde39e23729', class: "content" }, index.h("div", { key: 'e9b26e4b13055853ea659cec8d990f7f2eb76999', class: "header-subheader" }, this.header && index.h("div", { key: '5cedf44a46330c77259c3d64cf567052ef26af0b', class: "header" }, this.header), usesHeaderSlot && index.h("slot", { key: 'a2c9897a3befbbd5603262962a7652a763650048', name: "header" }), this.subheader && index.h("div", { key: 'a7916827ee4ea924270242c9f06ce75989021c3b', class: "subheader" }, this.subheader), usesSubheaderSlot && index.h("slot", { key: 'fba6caffbf916a12b8e5975966551c4c9d03a5c9', name: "subheader" })), usesActionsSlot && index.h("slot", { key: '7a1b89ac09e9aa7e79740f225960818d2622d4b4', name: "actions" })), index.h("div", { key: '9dca236d2f8253c64a8a9ff67981f69c6f473c77', class: `banner-close` }, index.h("button", { key: 'cabd5fa950e125babecc6caf8109c51d05142ec3', "aria-label": "Close banner", onClick: this.handleClose }, index.h("tds-icon", { key: '2ec160b7e458fc4e99528c390f6190dea039f02a', name: "cross", size: "20px", svgTitle: "Close" })))));
}
get host() { return index.getElement(this); }
};
TdsBanner.style = TdsBannerStyle0;
exports.tds_banner = TdsBanner;