@limetech/lime-elements
Version:
35 lines (31 loc) • 2.51 kB
JavaScript
import { r as registerInstance, h } from './index-DBTJNfo7.js';
const bannerCss = () => `.lime-banner{min-height:3.25rem;display:none;background-color:rgba(var(--contrast-100), 0.7);backdrop-filter:blur(0.3125rem);box-shadow:var(--shadow-depth-16)}.lime-banner.lime-banner--open{display:block}.lime-banner.lime-banner--open .lime-banner__surface{opacity:1}.lime-banner .lime-banner__surface{display:flex;justify-content:center;box-sizing:border-box;opacity:0}.lime-banner .lime-banner__content{display:flex;align-items:center;align-content:stretch;padding:1rem;flex-wrap:wrap}.lime-banner .icon-message{display:flex;align-items:center}.lime-banner div[class^=mdc-typography]{color:rgb(var(--contrast-1200))}.lime-banner .lime-banner__icon{margin:0 0.625rem;align-self:flex-start}.lime-banner .lime-banner__actions{margin-left:3.125rem;display:flex;justify-content:flex-end}.lime-banner limel-icon{color:var(--banner-icon-fill-color, rgb(var(--contrast-100)));background-color:var(--banner-icon-background-color, rgb(var(--contrast-800)))} screen and (max-width: 760px){.lime-banner__content{flex-direction:column;gap:0.5rem}.icon-message{display:flex;align-items:center}.lime-banner__actions{margin-left:0}}`;
const Banner = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.isOpen = false;
}
/**
* Open the banner
*/
async open() {
this.isOpen = true;
}
/**
* Close the banner
*/
async close() {
this.isOpen = false;
}
render() {
return (h("div", { key: '4c52de06b1d1710e79d2fbe729c76b49c7a4dae9', class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { key: '2085a6a5d07c036642646f6cb9cab56e7f86f48a', class: "lime-banner__surface" }, h("div", { key: '0b021548bdee32661d458a88e0472a6a1ef0f195', class: "lime-banner__content" }, h("div", { key: '65db98d6d60fdf856871e68c6c3bdaa55fb87526', class: "icon-message" }, this.renderIcon(), h("div", { key: '94eb50955800bc6a18c49bed8d6fd949909cf5bd' }, this.message)), h("div", { key: '8331420f88b294bb1a21682ca1446704e9dc0ffb', class: "lime-banner__actions" }, h("slot", { key: 'b784df0968fa19c093c3c0db6de980d6472154d4', name: "buttons" }))))));
}
renderIcon() {
if (!this.icon) {
return;
}
return (h("div", { class: "lime-banner__icon" }, h("limel-icon", { name: this.icon, badge: true, size: "large" })));
}
};
Banner.style = bannerCss();
export { Banner as limel_banner };