@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
62 lines (61 loc) • 2.25 kB
JavaScript
import { ref as c } from "lit/directives/ref.js";
import { styleMap as v } from "lit/directives/style-map.js";
import { property as o, state as g } from "lit/decorators.js";
import { unsafeCSS as f, LitElement as a, html as m } from "lit";
const d = `:host{display:inline-block}:host svg{width:var(--wolf-svg-width, 24px);height:var(--wolf-svg-height, 24px)}:host svg path{fill:var(--wolf-svg-fill, currentColor)}
`;
var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, h = (l, e, t, s) => {
for (var r = s > 1 ? void 0 : s ? y(e, t) : e, n = l.length - 1, p; n >= 0; n--)
(p = l[n]) && (r = (s ? p(e, t, r) : p(r)) || r);
return s && r && u(e, t, r), r;
};
const _ = "wolf-svg";
class i extends a {
constructor() {
super(...arguments), this.width = 24, this.height = 24, this.color = "currentColor", this.src = "", this.svgElement = null, this.containerRef = c();
}
firstUpdated(e) {
if (super.firstUpdated(e), this.src && this.containerRef.value)
try {
fetch(this.src).then((t) => t.text()).then((t) => {
const s = document.createElement("template");
s.innerHTML = t, this.svgElement = s.content.firstChild, this.svgElement && this.containerRef.value && (this.svgElement.style.color = this.color, this.svgElement.style.width = this.width + "px", this.svgElement.style.height = this.height + "px", this.containerRef.value.appendChild(this.svgElement));
});
} catch (t) {
console.error("Error fetching SVG:", t);
}
}
updated(e) {
super.updated(e), this.svgElement && (this.svgElement.style.color = this.color, this.svgElement.style.width = this.width + "px", this.svgElement.style.height = this.height + "px");
}
render() {
return m`<div
style=${v({
"--wolf-svg-color": this.color,
"--wolf-svg-width": this.width + "px",
"--wolf-svg-height": this.height + "px"
})}
${c(this.containerRef)}
></div>`;
}
}
i.styles = f(d);
h([
o({ type: Number })
], i.prototype, "width", 2);
h([
o({ type: Number })
], i.prototype, "height", 2);
h([
o()
], i.prototype, "color", 2);
h([
o()
], i.prototype, "src", 2);
h([
g()
], i.prototype, "svgElement", 2);
export {
i as WolfSvg,
_ as tagName
};