fix(webwidget): Fix style issues for UptimelinkWebwidget element.

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2025-01-09 - 1.2.3 - fix(webwidget)
+Fix style issues for UptimelinkWebwidget element.
+
+- Resolved indentation and formatting issues in UptimelinkWebwidget component.
+- Ensured proper use of cssManager for theming.
+- Fixed event handling for expanded view toggle.
+
 ## 2025-01-09 - 1.2.2 - fix(component)
 Fix sizing of status indicator in uptimelink-webwidget
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@uptime.link/webwidget',
-  version: '1.2.2',
+  version: '1.2.3',
   description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.'
 }

ts_web/elements/uptimelink-webwidget.ts

@@ -1,4 +1,12 @@
-import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  cssManager,
+  css,
+} from '@design.estate/dees-element';
 
 import { DeesWindowLayer } from '@design.estate/dees-catalog';
 
@@ -16,7 +24,7 @@ export class UptimelinkWebwidget extends DeesElement {
 
   @property({
     type: Boolean,
-    reflect: true
+    reflect: true,
   })
   isOnTop = false;
 
@@ -31,7 +39,7 @@ export class UptimelinkWebwidget extends DeesElement {
 
   @property({
     type: Boolean,
-    reflect: true
+    reflect: true,
   })
   public showExpanded: boolean = false;
 
@@ -44,16 +52,11 @@ export class UptimelinkWebwidget extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
-  ]
-
-  public render(): TemplateResult {
-    return html`
-      <style>
+    css`
       :host {
         position: relative;
         display: block;
         height: 30px;
-          z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'} ;
       }
       .mainbox {
         position: relative;
@@ -66,11 +69,11 @@ export class UptimelinkWebwidget extends DeesElement {
         width: 150px;
         border-radius: 15px;
         height: 30px;
-          background: ${this.goBright ? '#ffffff00' : '#22222200' };
-          box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
-          border: 1px solid ${this.goBright ? '#22222220' : '#ffffff20' };
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')};
+        border: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
         padding: 4px;
-          color: ${this.goBright ? '#333' : '#CCC' };
+        color: ${cssManager.bdTheme('#333', '#CCC')};
         cursor: pointer;
         transition: all 0.2s, background 0.1s;
         overflow: hidden;
@@ -90,15 +93,15 @@ export class UptimelinkWebwidget extends DeesElement {
         width: 182px;
         height: 117px;
         transform: translateX(-16px);
-          background: ${this.goBright ? '#ffffff' : '#222222' } !important;
-          box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''} !important;
+        background: ${cssManager.bdTheme('#ffffff', '#222222')} !important; 
+        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')} !important;
       }
 
       .statusindicator {
         transform: translate(4px, 4px);
         height: 12px;
         width: 12px;
-          background:  #66BB6A;
+        background: #66bb6a;
         border-radius: 10px;
       }
       .statustext {
@@ -123,7 +126,7 @@ export class UptimelinkWebwidget extends DeesElement {
         position: absolute;
         top: 55px;
         left: 5px;
-          background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
         border-radius: 3px;
         width: 172px;
         height: 30px;
@@ -134,12 +137,12 @@ export class UptimelinkWebwidget extends DeesElement {
       }
 
       .miniOverview24h .statusBar {
-          background: ${this.goBright ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)'};
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.15)', 'rgba(255,255,255,0.15)')};
         border-radius: 10px;
       }
 
       .miniOverview24h .statusBar.ok {
-          background:  #66BB6A;
+        background: #66bb6a;
       }
 
       .viewStatuspage {
@@ -148,7 +151,7 @@ export class UptimelinkWebwidget extends DeesElement {
         top: 80px;
         left: 5px;
         text-align: center;
-          background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
         border-radius: 3px 3px 10px 10px;
         padding: 5px;
         margin-top: 10px;
@@ -156,7 +159,16 @@ export class UptimelinkWebwidget extends DeesElement {
       }
 
       .viewStatuspage:hover {
-          background: ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'};
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+      :host {
+        z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'};
       }
       </style>
       <div class="mainbox ${this.isFocused ? 'focused' : null}">
@@ -164,25 +176,25 @@ export class UptimelinkWebwidget extends DeesElement {
           <div class="statusindicator"></div>
           <div class="statustext">All systems are up!</div>
         </div>
-        ${this.showExpanded ? html`
+        ${this.showExpanded
+          ? html`
               <div class="expanded">
-            <div class="miniHeading">
-              last 24 hours:
-            </div>
+                <div class="miniHeading">last 24 hours:</div>
                 <div class="miniOverview24h">
                   ${(() => {
                     let counter = 0;
                     const returnArray = [];
                     while (counter < 24) {
-                  returnArray.push(html`<div class="statusBar ok"></div>`)
+                      returnArray.push(html`<div class="statusBar ok"></div>`);
                       counter++;
-                };
+                    }
                     return returnArray;
                   })()}
                 </div>
                 <div class="viewStatuspage">View full Statuspage ...</div>
               </div>
-        ` : null}
+            `
+          : null}
       </div>
     `;
   }
@@ -226,11 +238,10 @@ export class UptimelinkWebwidget extends DeesElement {
         return;
       }
       this.windowLayer.destroy();
+      this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden');
       domtools.convenience.smartdelay.delayFor(200).then(async () => {
         if (!this.isFocused) {
           this.isElevated = false;
-          this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden');
-          await domtools.convenience.smartdelay.delayFor(100);
           this.remove();
         }
       });
@@ -241,6 +252,6 @@ export class UptimelinkWebwidget extends DeesElement {
       this.showExpanded = false;
       await domtools.convenience.smartdelay.delayFor(50);
       this.isFocused = false;
-    }
+    };
   }
 }