47 lines
916 B
Plaintext
47 lines
916 B
Plaintext
|
import { getIconElement, isDefinedIcon } from "./icons.js";
|
||
|
class DevToolbarIcon extends HTMLElement {
|
||
|
_icon = void 0;
|
||
|
shadowRoot;
|
||
|
get icon() {
|
||
|
return this._icon;
|
||
|
}
|
||
|
set icon(name) {
|
||
|
this._icon = name;
|
||
|
this.buildTemplate();
|
||
|
}
|
||
|
constructor() {
|
||
|
super();
|
||
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||
|
if (this.hasAttribute("icon")) {
|
||
|
this.icon = this.getAttribute("icon");
|
||
|
} else {
|
||
|
this.buildTemplate();
|
||
|
}
|
||
|
}
|
||
|
getIconHTML(icon) {
|
||
|
if (icon && isDefinedIcon(icon)) {
|
||
|
return getIconElement(icon)?.outerHTML ?? "";
|
||
|
}
|
||
|
return "<slot />";
|
||
|
}
|
||
|
buildTemplate() {
|
||
|
this.shadowRoot.innerHTML = `
|
||
|
<style>
|
||
|
svg {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
@media (forced-colors: active) {
|
||
|
svg path[fill="#fff"] {
|
||
|
fill: black;
|
||
|
}
|
||
|
}
|
||
|
</style>
|
||
|
${this.getIconHTML(this._icon)}`;
|
||
|
}
|
||
|
}
|
||
|
export {
|
||
|
DevToolbarIcon
|
||
|
};
|