63 lines
1.8 KiB
Plaintext
63 lines
1.8 KiB
Plaintext
|
import { getIconElement, isDefinedIcon } from "./icons.js";
|
||
|
|
class DevToolbarHighlight extends HTMLElement {
|
||
|
|
icon;
|
||
|
|
shadowRoot;
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||
|
|
this.icon = this.hasAttribute("icon") ? this.getAttribute("icon") : void 0;
|
||
|
|
this.shadowRoot.innerHTML = `
|
||
|
|
<style>
|
||
|
|
:host {
|
||
|
|
background: linear-gradient(180deg, rgba(224, 204, 250, 0.33) 0%, rgba(224, 204, 250, 0.0825) 100%);
|
||
|
|
border: 1px solid rgba(113, 24, 226, 1);
|
||
|
|
border-radius: 4px;
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2000000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
color: white;
|
||
|
|
background: linear-gradient(0deg, #B33E66, #B33E66), linear-gradient(0deg, #351722, #351722);
|
||
|
|
border: 1px solid rgba(53, 23, 34, 1);
|
||
|
|
border-radius: 9999px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
top: -15px;
|
||
|
|
right: -15px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
connectedCallback() {
|
||
|
|
if (this.icon) {
|
||
|
|
let iconContainer = document.createElement("div");
|
||
|
|
iconContainer.classList.add("icon");
|
||
|
|
let iconElement;
|
||
|
|
if (isDefinedIcon(this.icon)) {
|
||
|
|
iconElement = getIconElement(this.icon);
|
||
|
|
} else {
|
||
|
|
iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
|
|
iconElement.setAttribute("viewBox", "0 0 16 16");
|
||
|
|
iconElement.innerHTML = this.icon;
|
||
|
|
}
|
||
|
|
if (iconElement) {
|
||
|
|
iconElement?.style.setProperty("width", "16px");
|
||
|
|
iconElement?.style.setProperty("height", "16px");
|
||
|
|
iconContainer.append(iconElement);
|
||
|
|
this.shadowRoot.append(iconContainer);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export {
|
||
|
|
DevToolbarHighlight
|
||
|
|
};
|