@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
63 lines (62 loc) • 2.18 kB
JavaScript
import { property as p } from "lit/decorators.js";
import { unsafeCSS as n, LitElement as d, html as c } from "lit";
import "../card/register.mjs";
import { styleMap as f } from "lit/directives/style-map.js";
import "../card/card.mjs";
import "../button/register.mjs";
import "../button/button.mjs";
import "../typography/register.mjs";
import "../typography/typography.mjs";
const m = `:host{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s}.wolf-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%}:host([open]){visibility:visible;opacity:1}.wolf-modal{z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 8px #0003;overflow:hidden}
`;
var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, h = (l, o, i, e) => {
for (var t = e > 1 ? void 0 : e ? b(o, i) : o, r = l.length - 1, a; r >= 0; r--)
(a = l[r]) && (t = (e ? a(o, i, t) : a(t)) || t);
return e && t && y(o, i, t), t;
};
const P = "wolf-modal";
class s extends d {
constructor() {
super(...arguments), this.open = !1, this.width = 0, this.height = 0;
}
connectedCallback() {
super.connectedCallback();
}
disconnectedCallback() {
super.disconnectedCallback();
}
handleClose() {
this.open = !1, this.dispatchEvent(new CustomEvent("closed"));
}
render() {
return c`<div class="wolf-modal-overlay" @click=${this.handleClose}></div>
<wolf-card
style=${f({
...this.width && { width: `${this.width}px` },
...this.height && { height: `${this.height}px` }
})}
class="wolf-modal"
closable
?fakeClose=${!0}
@closed=${this.handleClose}
>
<slot name="header" slot="header"></slot>
<slot slot="body"></slot>
<slot name="footer" slot="footer"></slot>
</wolf-card> `;
}
}
s.styles = n(m);
h([
p({ type: Boolean })
], s.prototype, "open", 2);
h([
p({ type: Number })
], s.prototype, "width", 2);
h([
p({ type: Number })
], s.prototype, "height", 2);
export {
s as WolfModal,
P as tagName
};