28 lines
858 B
TypeScript
28 lines
858 B
TypeScript
|
import loaderCss from "./loader.css";
|
||
|
|
import tailwindCss from "./tailwind.css";
|
||
|
|
|
||
|
|
export class Inline extends HTMLElement {
|
||
|
|
//@ts-ignore
|
||
|
|
static get observedAttributes() {
|
||
|
|
return ["loading"];
|
||
|
|
}
|
||
|
|
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
|
||
|
|
if (name === "loading" && newValue == "done") {
|
||
|
|
(this.shadowRoot!.querySelector("#loader")! as HTMLElement).style.display = "none";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.attachShadow({ mode: "open" });
|
||
|
|
this.shadowRoot!.innerHTML = `
|
||
|
|
<style> ${tailwindCss}${loaderCss}</style>
|
||
|
|
<div id="loader" style="left:0;right:0" class="absolute z-highest flex h-screen w-full items-center">
|
||
|
|
<div class="loader border-brand dark:border-darkmodebrand">
|
||
|
|
<span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<slot></slot>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|