@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
94 lines (93 loc) • 3.47 kB
JavaScript
import { property as n } from "lit/decorators.js";
import { unsafeCSS as m, LitElement as d, html as p } from "lit";
import { ifDefined as g } from "lit/directives/if-defined.js";
import "../button/register.mjs";
import "../../chain-filter-963a1f6f.js";
import "../button/button.mjs";
import "../typography/register.mjs";
import "../typography/typography.mjs";
function w(a, t = document.body, o = !0) {
const i = [], e = (r) => {
if (!o && i.length || r.nodeType !== Node.ELEMENT_NODE || r.matches(a) && (i.push(r), !o))
return;
const h = r.children;
if (h.length)
for (const c of h)
e(c);
const f = r.shadowRoot;
if (f) {
const c = f.children;
for (const u of c)
e(u);
}
};
return e(t), i;
}
function v(a, t = document.body) {
return w(a, t, !1)[0];
}
const y = `:host([size=small]){--wolf-menu-item-padding: var(--wolf-spacing-md)}:host([size=medium]){--wolf-menu-item-padding: var(--wolf-spacing-lg)}:host([size=large]){--wolf-menu-item-padding: var(--wolf-spacing-xl)}:host([size=xlarge]){--wolf-menu-item-padding: calc(var(--wolf-spacing-xl) * 2)}:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .2s ease-in-out}:host wolf-button{padding:var(--wolf-menu-item-padding, var(--wolf-spacing-md));width:100%}:host(:not([shell])){cursor:pointer}:host(:not([shell])) :hover{background-color:var(--wolf-background-color-default)}:host([shell]){padding:var(--wolf-menu-item-padding, var(--wolf-spacing-md))}:host([align=self-start]){margin-right:auto}:host([align=self-end]){margin-left:auto}:host([align=stretch]){flex:1}
`;
var b = Object.defineProperty, C = Object.getOwnPropertyDescriptor, l = (a, t, o, i) => {
for (var e = i > 1 ? void 0 : i ? C(t, o) : t, r = a.length - 1, h; r >= 0; r--)
(h = a[r]) && (e = (i ? h(t, o, e) : h(e)) || e);
return i && e && b(t, o, e), e;
};
const B = "wolf-menu-item";
class s extends d {
constructor() {
super(...arguments), this.href = "", this.anchor = "", this.align = "center", this.isActive = !1, this.size = "medium", this.stretch = !1, this.shell = !1, this.isCustomRoute = !1;
}
get isAnchorOrHref() {
return this.href || this.anchor;
}
connectedCallback() {
super.connectedCallback(), this.shell || (this.onclick = this.handleClick);
}
handleClick(t) {
this.anchor.startsWith("#") && setTimeout(() => {
const o = v(this.anchor);
o && o.scrollIntoView({ behavior: "smooth" });
}, 100), this.dispatchEvent(new CustomEvent("menu-click", { bubbles: !0, composed: !0, detail: { href: this.href } }));
}
render() {
if (this.shell)
return p`<slot></slot>`;
const t = this.isAnchorOrHref ? this.href : void 0;
return p`
<wolf-button stretch variant=${this.isActive ? "link" : "text"} href=${g(t)}>
<slot name="icon-start" slot="icon-start"></slot>
<slot></slot>
</wolf-button>
`;
}
}
s.styles = m(y);
l([
n()
], s.prototype, "href", 2);
l([
n()
], s.prototype, "anchor", 2);
l([
n()
], s.prototype, "align", 2);
l([
n({ type: Boolean, reflect: !0 })
], s.prototype, "isActive", 2);
l([
n()
], s.prototype, "size", 2);
l([
n({ type: Boolean, reflect: !0 })
], s.prototype, "stretch", 2);
l([
n({ type: Boolean, reflect: !0 })
], s.prototype, "shell", 2);
l([
n({ type: Boolean })
], s.prototype, "isCustomRoute", 2);
export {
s as WolfMenuItem,
B as tagName
};