fix(core): update

ts_web/elements/uptimelink-webwidget.ts

@@ -1,5 +1,6 @@
-import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
+
+import { UptimelinkWindowLayer } from './uptimelink-windowlayer.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -13,6 +14,11 @@ export class UptimelinkWebwidget extends DeesElement {
     <uptimelink-webwidget projectSlug="uptime.link"></uptimelink-webwidget>
   `;
 
+  @property({
+    type: Boolean
+  })
+  isOnTop = false;
+
   @property()
   public projectSlug: string;
 
@@ -27,19 +33,21 @@ export class UptimelinkWebwidget extends DeesElement {
 
   constructor() {
     super();
-    domtools.DomTools.setupDomTools();
     this.setupEventing();
   }
 
+  public static styles = [
+    cssManager.defaultStyles,
+  ]
+
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
       <style>
         :host {
           position: relative;
           display: block;
           height: 30px;
-          z-index: ${this.isElevated ? '10' : 'auto'} ;
+          z-index: ${this.isElevated ? '1000' : 'auto'} ;
         }
         .mainbox {
           position: relative;
@@ -163,13 +171,29 @@ export class UptimelinkWebwidget extends DeesElement {
     `;
   }
 
+  public windowLayer: UptimelinkWindowLayer;
   private async setupEventing() {
+    const domtools = await this.domtoolsPromise;
     await this.updateComplete;
     const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
     mainbox.onmouseenter = async () => {
+      if (!this.isOnTop) {
+        const mainbox = this.shadowRoot.querySelector('.mainbox') as HTMLElement;
+        const rect = mainbox.getBoundingClientRect();
+        const uptimelinkWidget = new UptimelinkWebwidget();
+        uptimelinkWidget.isOnTop = true;
+        uptimelinkWidget.style.position = 'fixed';
+        uptimelinkWidget.style.top = `${rect.top}px`;
+        uptimelinkWidget.style.left = `${rect.left}px`;
+        document.body.append(uptimelinkWidget);
+        return;
+      }
       this.isElevated = true;
       this.isFocused = true;
-      await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(200);
+      this.windowLayer = await UptimelinkWindowLayer.createAndShow({
+        blur: true,
+      });
+      await domtools.convenience.smartdelay.delayFor(200);
       if (!this.isFocused) {
         return;
       }
@@ -180,9 +204,14 @@ export class UptimelinkWebwidget extends DeesElement {
       expandedDiv.style.opacity = '1';
     };
     mainbox.onmouseleave = async () => {
-      (await this.domtoolsPromise).convenience.smartdelay.delayFor(200).then(() => {
+      if (!this.isOnTop) {
+        return;
+      }
+      this.windowLayer.destroy();
+      domtools.convenience.smartdelay.delayFor(200).then(() => {
         if (!this.isFocused) {
           this.isElevated = false;
+          this.remove();
         }
       });
       if (!this.showExpanded) {
@@ -190,7 +219,7 @@ export class UptimelinkWebwidget extends DeesElement {
         return;
       }
       this.showExpanded = false;
-      await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(50);
+      await domtools.convenience.smartdelay.delayFor(50);
       this.isFocused = false;
     }
   }