@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
62 lines (61 loc) • 2.8 kB
JavaScript
import { property as s } from "lit/decorators.js";
import { unsafeCSS as n, LitElement as p, html as o, nothing as m } from "lit";
import "../button/register.mjs";
import "../button/button.mjs";
import "../typography/register.mjs";
import "../typography/typography.mjs";
const f = `:host{display:block;position:relative;border-radius:calc(var(--wolf-border-radius) * 2);box-shadow:var(--wolf-box-shadow-color-default);background-color:var(--wolf-theme-color);width:300px;margin:16px}:host .card-header{display:flex;align-items:center;margin-bottom:16px}:host .card-header .close-btn{margin-left:auto;position:absolute;top:8px;right:8px;transform:scale(1.2)}:host .card-header-image{width:100%;height:100px;border-radius:50%}:host .card-header-image .full-image{border-top-left-radius:calc(var(--wolf-border-radius) * 2);border-top-right-radius:calc(var(--wolf-border-radius) * 2);width:100%;height:100%;object-fit:cover}:host .card-content{padding:16px}:host .card-content .header-image{width:32px;height:32px;border-radius:50%;margin-right:12px}:host .card-content .card-body{margin-bottom:16px}:host .card-content .card-footer{display:flex;justify-content:flex-end}
`;
var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (d, a, l, r) => {
for (var e = r > 1 ? void 0 : r ? v(a, l) : a, c = d.length - 1, h; c >= 0; c--)
(h = d[c]) && (e = (r ? h(a, l, e) : h(e)) || e);
return r && e && g(a, l, e), e;
};
const I = "wolf-card";
class t extends p {
constructor() {
super(...arguments), this.closable = !1, this.avatar = "", this.headerImage = "", this.fakeClose = !1, this.closeCard = () => {
this.fakeClose || this.remove(), this.dispatchEvent(new CustomEvent("closed"));
};
}
onSlotChanged() {
return () => {
this.requestUpdate();
};
}
render() {
return o` ${this.headerImage ? o`<div class="card-header-image">
<img class="full-image" src="${this.headerImage}" alt="Header Image" />
</div>` : m}
<div class="card-content">
<div class="card-header">
${this.avatar ? o`<img class="header-image" src="${this.avatar}" alt="Header Image" />` : ""}
<slot name="header"></slot>
${this.closable ? o`<wolf-button class="close-btn" variant="text" ="${this.closeCard}">×</wolf-button>` : ""}
</div>
<div class="card-body">
<slot name="body"></slot>
</div>
<div class="card-footer">
<slot name="footer"></slot>
</div>
</div>`;
}
}
t.styles = n(f);
i([
s({ type: Boolean })
], t.prototype, "closable", 2);
i([
s()
], t.prototype, "avatar", 2);
i([
s()
], t.prototype, "headerImage", 2);
i([
s({ type: Boolean })
], t.prototype, "fakeClose", 2);
export {
t as WolfCard,
I as tagName
};