@wolf-scope/wolf-ui
Version:
UI library for web applications using Lit
62 lines (61 loc) • 2.65 kB
JavaScript
import { styleMap as d } from "lit/directives/style-map.js";
import { property as s } from "lit/decorators.js";
import { unsafeCSS as m, LitElement as h, html as p, nothing as u } from "lit";
import "../../chain-filter-963a1f6f.js";
const y = `:host{font-family:Material Icons;font-weight:400;font-style:normal;font-size:var(--wolf-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga";color:currentColor;user-select:none;overflow:hidden;max-width:var(--wolf-icon-size, 24px);min-width:var(--wolf-icon-size, 24px)}:host([outlined]){font-family:Material Icons Outlined}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}
`, f = (n, t, i = document.head) => {
if (i.querySelector(`#${t}`))
return;
const e = document.createElement("link");
e.rel = "stylesheet", e.href = n, e.id = t, i.appendChild(e);
};
var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (n, t, i, e) => {
for (var o = e > 1 ? void 0 : e ? w(t, i) : t, a = n.length - 1, c; a >= 0; a--)
(c = n[a]) && (o = (e ? c(t, i, o) : c(o)) || o);
return e && o && g(t, i, o), o;
};
const I = "wolf-icon";
class r extends h {
constructor() {
super(...arguments), this.size = 24, this.color = "currentColor", this.icon = "", this.outlined = !1, this.addMaterialFont = () => {
f(
"https://fonts.googleapis.com/icon?family=Material+Icons&display=block",
"wolf-theme-provider-material-fonts"
), f(
"https://fonts.googleapis.com/icon?family=Material+Icons+Outlined&display=block",
"wolf-theme-provider-material-fonts-outlined"
);
};
}
connectedCallback() {
super.connectedCallback(), this.icon || console.error("wolf-icon: icon is required"), this.addMaterialFont(), this.style.setProperty("--wolf-icon-size", `${this.size}px`), this.renderedIcon = p`<span
class="material-icons material-symbols-outlined"
style=${d({
fontSize: `${this.size}px`,
color: this.color,
maxWidth: `${this.size}px`
})}
>${this.icon}</span
>`;
}
render() {
return this.renderedIcon ? p`${this.renderedIcon}` : u;
}
}
r.styles = m(y);
l([
s({ type: Number })
], r.prototype, "size", 2);
l([
s()
], r.prototype, "color", 2);
l([
s()
], r.prototype, "icon", 2);
l([
s({ type: Boolean })
], r.prototype, "outlined", 2);
export {
r as WolfIcon,
I as tagName
};