Fix Overlay component

The please wait - overlay was not shown correctly and didn't reacted to Alchemy.pleaseWaitOverlay() - toggle anymore.

app/assets/stylesheets/alchemy/frame.scss

@@ -1,13 +1,12 @@
-div#overlay {
+alchemy-overlay {
   display: none;
   position: fixed;
-  left: 0px;
-  top: 0px;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   z-index: 400000;
   background-color: rgba(229, 229, 229, 0.4);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #40E5E5E5, endColorstr = #40E5E5E5);
 }
 
 div#overlay_text_box {

app/javascript/alchemy_admin/components/overlay.js

@@ -1,22 +1,18 @@
 import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 
 class Overlay extends AlchemyHTMLElement {
-  static properties = {
-    show: { default: false },
-    text: { default: "" }
-  }
-
   render() {
-    this.id = `overlay`
-    this.style.setProperty("display", this.show ? "block" : "none")
-
     return `
         <alchemy-spinner></alchemy-spinner>
         <div id="overlay_text_box">
-            <span id="overlay_text">${this.text}</span>
+            <span id="overlay_text">${this.getAttribute("text")}</span>
         </div>
         `
   }
+
+  set show(value) {
+    this.style.setProperty("display", value ? "block" : "none")
+  }
 }
 
 customElements.define("alchemy-overlay", Overlay)

app/javascript/alchemy_admin/please_wait_overlay.js

@@ -1,8 +1,8 @@
 /**
  * To show the "Please wait" overlay.
  * Pass false to hide it.
- * @param {boolean,null} show
+ * @param {boolean} show
  */
-export default function pleaseWaitOverlay(show) {
-  customElements.get("alchemy-overlay").show = !!show
+export default function pleaseWaitOverlay(show = true) {
+  document.querySelector("alchemy-overlay").show = !!show
 }

spec/javascript/alchemy_admin/components/overlay.spec.js

@@ -20,6 +20,7 @@ describe("alchemy-overlay", () => {
 
   it("should be hidden", () => {
     renderComponent()
+    overlay.show = false
     expect(overlay.style.getPropertyValue("display")).toBe("none")
   })
 
@@ -29,7 +30,8 @@ describe("alchemy-overlay", () => {
   })
 
   it("should be visible", () => {
-    renderComponent(`<alchemy-overlay show="true"></alchemy-overlay>`)
+    renderComponent()
+    overlay.show = true
     expect(overlay.style.getPropertyValue("display")).toBe("block")
   })
 })