fix(core): update

ts_web/elements/upl-statuspage-statusdetails.ts

@@ -1,5 +1,13 @@
-import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
-import * as domtools from '@designestate/dees-domtools';
+import * as plugins from '../plugins';
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  TemplateResult,
+  css,
+  cssManager,
+} from '@designestate/dees-element';
 
 import './internal/uplinternal-miniheading';
 
@@ -11,60 +19,62 @@ declare global {
 
 @customElement('upl-statuspage-statusdetails')
 export class UplStatuspageStatusdetails extends DeesElement {
-  public static demo = () => html`
-    <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
-  `;
-
-  
+  public static demo = () => html` <upl-statuspage-statusdetails></upl-statuspage-statusdetails> `;
 
   constructor() {
     super();
   }
 
+  public static styles = [
+    plugins.domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        position: relative;
+        padding: 0px 0px 15px 0px;
+        display: block;
+        background: #222222;
+        font-family: Roboto Mono;
+        color: #fff;
+      }
+
+      .mainbox {
+        margin: auto;
+        max-width: 900px;
+        text-align: right;
+        background: #404040;
+        line-height: 50px;
+        border-radius: 3px;
+      }
+
+      .mainbox .barContainer {
+        position: relative;
+        display: flex;
+        padding: 6px;
+        overflow: hidden;
+      }
+
+      .mainbox .barContainer .bar {
+        margin: 4px;
+        width: 11px;
+        border-radius: 3px;
+        height: 40px;
+        background: #2deb51;
+      }
+      .timeIndicator {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        background: #FF9800;
+        top: 56px;
+        left: 400px;
+        transform: rotate(45deg);
+      }
+    `,
+  ];
+
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        :host {
-          position: relative;
-          padding: 0px 0px 15px 0px;
-          display: block;
-          background: #222222;
-          font-family: Roboto Mono;
-          color: #fff;
-        }
-
-        .mainbox {
-          margin: auto;
-          max-width: 900px;
-          text-align: right;
-          background: #404040;
-          line-height: 50px;
-          border-radius: 3px;
-        }
-
-        .mainbox .barContainer {
-          display: flex;
-          padding: 10px 6px;
-        }
-
-        .mainbox .barContainer .bar {
-          margin: 4px;
-          width: 11px;
-          border-radius: 3px;
-          height: 40px;
-          background: #2DEB51;
-        }
-        .timeIndicator {
-          position: absolute;
-          width: 11px;
-          height: 11px;
-          background: #fff;
-          top: 90px;
-          left: 600px;
-          transform: rotate(45deg);
-        }
-      </style>
+      <style></style>
       <uplinternal-miniheading>Yesterday & Today</uplinternal-miniheading>
       <div class="mainbox">
         <div class="barContainer">
@@ -77,9 +87,9 @@ export class UplStatuspageStatusdetails extends DeesElement {
             }
             return returnArray;
           })()}
+          <div class="timeIndicator"></div>
         </div>
-        <div class="timeIndicator"></div>
       </div>
     `;
   }
-}
+}