fix(core): update

ts_web/elements/dees-updater.ts

@@ -1,4 +1,12 @@
-import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, domtools } from '@design.estate/dees-element';
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  html,
+  property,
+  type CSSResult,
+  domtools,
+} from '@design.estate/dees-element';
 import { demoFunc } from './dees-updater.demo.js';
 
 import './dees-windowlayer';
@@ -15,7 +23,9 @@ export class DeesUpdater extends DeesElement {
   public static demo = demoFunc;
 
   public static async createAndShow() {
-    
+    const updater = new DeesUpdater();
+    document.body.appendChild(updater);
+    return updater;
   }
 
   @property({
@@ -37,56 +47,64 @@ export class DeesUpdater extends DeesElement {
     cssManager.defaultStyles,
     css`
       .modalContainer {
-          will-change: transform;
-          position: relative;
-          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
-          max-width: 800px;
-          border-radius: 8px;
-          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
-        }
+        will-change: transform;
+        position: relative;
+        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+        max-width: 800px;
+        border-radius: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
+      }
 
-        .headingContainer {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 40px 40px;
-        }
+      .headingContainer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 40px 40px;
+      }
 
-        h1 {
-          margin: none;
-          font-size: 20px;
-          color: ${cssManager.bdTheme('#333', '#fff')};
-          margin-left: 20px;
-          font-weight: normal;
-        }
+      h1 {
+        margin: none;
+        font-size: 20px;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        margin-left: 20px;
+        font-weight: normal;
+      }
 
-        .buttonContainer {
-          display: grid;
-          grid-template-columns: 50% 50%;
-        }
-    `
-  ]
+      .buttonContainer {
+        display: grid;
+        grid-template-columns: 50% 50%;
+      }
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
-      <dees-windowlayer @clicked="${this.windowLayerClicked}" .options=${{
-        blur: true,
-      }}>
+      <dees-windowlayer
+        @clicked="${this.windowLayerClicked}"
+        .options=${{
+          blur: true,
+        }}
+      >
         <div class="modalContainer">
           <div class="headingContainer">
             <dees-spinner .size=${60}></dees-spinner>
             <h1>Updating the application...</h1>
           </div>
+          <div class="progress">
+            <dees-progressbar .progress=${0.5}></dees-progressbar>
+          </div>
           <div class="buttonContainer">
             <dees-button>More info</dees-button>
             <dees-button>Changelog</dees-button>
           </div>
-        </div>
-      </dees-windowlayer>>
+        </div> </dees-windowlayer
+      >>
     `;
   }
 
-  private windowLayerClicked() {
-    
+  public async destroy() {
+    this.parentElement.removeChild(this);
   }
+
+  private windowLayerClicked() {}
 }