1.0.68

package.json

@@ -1,28 +1,29 @@
 {
   "name": "@uptimelink/webwidget",
-  "version": "1.0.62",
+  "version": "1.0.68",
   "private": false,
   "description": "the webwidget for public use of uptimelink",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
+  "type": "module",
   "scripts": {
     "test": "npm run build",
-    "build": "tsbuild element && tsbundle element --production",
+    "build": "tsbuild element --allowimplicitany --skiplibcheck && tsbundle element --production",
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.84",
-    "@designestate/dees-element": "^1.0.10",
-    "@designestate/dees-wcctools": "^1.0.54",
-    "@gitzone/tsrun": "^1.2.12",
+    "@designestate/dees-domtools": "^2.0.1",
+    "@designestate/dees-element": "^2.0.4",
+    "@designestate/dees-wcctools": "^1.0.73",
+    "@gitzone/tsrun": "^1.2.32",
     "typescript": "^4.2.3"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.24",
-    "@gitzone/tsbundle": "^1.0.80",
-    "@gitzone/tswatch": "^1.0.52",
+    "@gitzone/tsbuild": "^2.1.61",
+    "@gitzone/tsbundle": "^1.0.101",
+    "@gitzone/tswatch": "^1.0.73",
     "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.17.0"

ts_web/elements/index.ts

@@ -1 +1 @@
-export * from './uptimelink-webwidget';
+export * from './uptimelink-webwidget.js';

ts_web/elements/uptimelink-webwidget.ts

@@ -1,6 +1,12 @@
 import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'uptimelink-webwidget': UptimelinkWebwidget;
+  }
+}
+
 @customElement('uptimelink-webwidget')
 export class UptimelinkWebwidget extends DeesElement {
   public static demo = () => html`
@@ -13,6 +19,9 @@ export class UptimelinkWebwidget extends DeesElement {
   @property()
   public isFocused = false;
 
+  @property()
+  public isElevated = false;
+
   @property()
   public showExpanded: boolean = false;
 
@@ -27,12 +36,14 @@ export class UptimelinkWebwidget extends DeesElement {
       ${domtools.elementBasic.styles}
       <style>
         :host {
+          position: relative;
           display: block;
+          height: 30px;
+          z-index: ${this.isElevated ? '10' : 'auto'} ;
         }
         .mainbox {
           position: relative;
           line-height: 1em;
-          
           margin: auto;
           font-family: Roboto;
           font-weight: 400;
@@ -57,7 +68,7 @@ export class UptimelinkWebwidget extends DeesElement {
 
         .mainbox.focused {
           width: 200px;
-          height: 128px;
+          height: 118px;
         }
 
         .statusindicator {
@@ -92,7 +103,7 @@ export class UptimelinkWebwidget extends DeesElement {
           background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
           border-radius: 3px;
           width: 190px;
-          height: 40px;
+          height: 30px;
           display: grid;
           padding: 3px 3px;
           grid-template-columns: repeat(30, 4px);
@@ -111,13 +122,18 @@ export class UptimelinkWebwidget extends DeesElement {
         .viewStatuspage {
           position: absolute;
           width: 190px;
-          top: 90px;
+          top: 80px;
           left: calc(50% - 95px);
           text-align: center;
           background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
           border-radius: 3px 3px 10px 10px;
           padding: 5px;
           margin-top: 10px;
+          transition: background 0.1s;
+        }
+
+        .viewStatuspage:hover {
+          background: ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'};
         }
       </style>
       <div class="mainbox ${this.isFocused ? 'focused' : null}">
@@ -152,6 +168,7 @@ export class UptimelinkWebwidget extends DeesElement {
     await this.updateComplete;
     const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
     mainbox.onmouseenter = async () => {
+      this.isElevated = true;
       this.isFocused = true;
       await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(200);
       if (!this.isFocused) {
@@ -159,11 +176,16 @@ export class UptimelinkWebwidget extends DeesElement {
       }
       this.showExpanded = true;
       await this.performUpdate();
-      await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(50);
+      await (await this.domtoolsPromise).convenience.smartdelay.delayFor(50);
       const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
       expandedDiv.style.opacity = '1';
     };
     mainbox.onmouseleave = async () => {
+      (await this.domtoolsPromise).convenience.smartdelay.delayFor(200).then(() => {
+        if (!this.isFocused) {
+          this.isElevated = false;
+        }
+      });
       if (!this.showExpanded) {
         this.isFocused = false;
         return;

ts_web/index.ts

@@ -1 +1 @@
-export * from './elements/index';
+export * from './elements/index.js';

ts_web/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "lib": ["es2017", "dom"],
-    "declaration": true,
-    "inlineSources": true,
-    "inlineSourceMap": true,
-    "noUnusedLocals": true,
-    "noFallthroughCasesInSwitch": true,
-    "outDir": "dist/",
-    "skipLibCheck": true,
-    "experimentalDecorators": true
-  }
-}

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "nodenext"
+  }
+}

tslint.json

@@ -1,17 +0,0 @@
-{
-  "extends": ["tslint:latest", "tslint-config-prettier"],
-  "rules": {
-    "semicolon": [true, "always"],
-    "no-console": false,
-    "ordered-imports": false,
-    "object-literal-sort-keys": false,
-    "member-ordering": {
-      "options":{
-        "order": [
-          "static-method"
-        ]
-      }
-    }
-  },
-  "defaultSeverity": "warning"
-}