@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
33 lines (32 loc) • 1.24 kB
JavaScript
import { property as c } from "lit/decorators.js";
import { unsafeCSS as p, LitElement as b, html as v } from "lit";
const f = `:host{display:block}.tab{position:relative;padding:16px 24px;cursor:pointer;font-size:14px;font-weight:500;color:var(--wolf-color-text);transition:color .15s ease-out;user-select:none}.tab:hover{color:var(--wolf-color-text-light)}.tab.active{color:var(--wolf-color-primary)}
`;
var h = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (r, e, l, o) => {
for (var t = o > 1 ? void 0 : o ? u(e, l) : e, s = r.length - 1, i; s >= 0; s--)
(i = r[s]) && (t = (o ? i(e, l, t) : i(t)) || t);
return o && t && h(e, l, t), t;
};
const w = "wolf-tab-item";
class a extends b {
constructor() {
super(...arguments), this.label = "", this.isActive = !1;
}
handleTabClick() {
this.dispatchEvent(new CustomEvent("tab-click", { bubbles: !0, composed: !0, detail: { label: this.label } }));
}
render() {
return v`<div class="tab ${this.isActive ? "active" : ""}" @click=${this.handleTabClick}>${this.label}</div>`;
}
}
a.styles = p(f);
n([
c()
], a.prototype, "label", 2);
n([
c({ type: Boolean })
], a.prototype, "isActive", 2);
export {
a as WolfTabItem,
w as tagName
};