feat(structure): adjust

ts_web/elements/dees-updater/dees-updater.demo.ts

@@ -0,0 +1,10 @@
+import { html } from '@design.estate/dees-element';
+
+import { DeesUpdater } from './dees-updater.js';
+
+export const demoFunc = async () => {
+  const updater = await DeesUpdater.createAndShow();
+  setTimeout(async () => {
+    await updater.destroy();
+  }, 10000);
+}

ts_web/elements/dees-updater/dees-updater.ts

@@ -0,0 +1,110 @@
+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';
+import { css, cssManager } from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-updater': DeesUpdater;
+  }
+}
+
+@customElement('dees-updater')
+export class DeesUpdater extends DeesElement {
+  public static demo = demoFunc;
+
+  public static async createAndShow() {
+    const updater = new DeesUpdater();
+    document.body.appendChild(updater);
+    return updater;
+  }
+
+  @property({
+    type: String,
+  })
+  accessor currentVersion: string;
+
+  @property({
+    type: String,
+  })
+  accessor updatedVersion: string;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    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')};
+      }
+
+      .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;
+      }
+
+      .buttonContainer {
+        display: grid;
+        grid-template-columns: 50% 50%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <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
+      >>
+    `;
+  }
+
+  public async destroy() {
+    this.parentElement.removeChild(this);
+  }
+
+  private windowLayerClicked() {}
+}