@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
52 lines (51 loc) • 1.75 kB
JavaScript
import { property as i, state as h } from "lit/decorators.js";
import { unsafeCSS as u, LitElement as c, html as p, nothing as b } from "lit";
import "../typography/register.mjs";
import "../typography/typography.mjs";
const f = `:host{display:inline-block;padding:8px 16px;cursor:pointer;width:100%;box-sizing:border-box}:host(:hover){background-color:var(--wolf-background-color-default)}
`;
var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (s, o, n, r) => {
for (var e = r > 1 ? void 0 : r ? v(o, n) : o, a = s.length - 1, d; a >= 0; a--)
(d = s[a]) && (e = (r ? d(o, n, e) : d(e)) || e);
return r && e && m(o, n, e), e;
};
const L = "wolf-dropdown-item";
class t extends c {
constructor() {
super(...arguments), this.value = "", this.label = "", this.selected = !1, this.shouldRenderLabel = !0;
}
selectItem() {
this.dispatchEvent(
new CustomEvent("item-selected", { detail: { value: this.value }, bubbles: !0, composed: !0 })
);
}
onSlotChanged() {
this.shouldRenderLabel = !!this.shadowRoot?.querySelector("slot")?.assignedNodes();
}
renderLabelIfSlotNotFound() {
return this.shouldRenderLabel ? p`<wolf-typography variant="body-default">${this.label}</wolf-typography>` : b;
}
render() {
return p`<div class="wolf-dropdown-item" @click="${this.selectItem}">
<slot @slotchange=${this.onSlotChanged}></slot>
${this.renderLabelIfSlotNotFound()}
</div>`;
}
}
t.styles = u(f);
l([
i({ type: String })
], t.prototype, "value", 2);
l([
i({ type: String })
], t.prototype, "label", 2);
l([
i({ type: Boolean })
], t.prototype, "selected", 2);
l([
h()
], t.prototype, "shouldRenderLabel", 2);
export {
t as WolfDropdownItem,
L as tagName
};