fix(core): update

package.json

@@ -13,19 +13,19 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-catalog": "^1.0.32",
+    "@designestate/dees-catalog": "^1.0.74",
-    "@designestate/dees-domtools": "^1.0.84",
+    "@designestate/dees-domtools": "^1.0.109",
-    "@designestate/dees-element": "^1.0.10",
+    "@designestate/dees-element": "^1.0.35",
-    "@designestate/dees-wcctools": "^1.0.54",
+    "@designestate/dees-wcctools": "^1.0.66",
-    "@gitzone/tsrun": "^1.2.12",
+    "@gitzone/tsrun": "^1.2.18",
     "@losslessone_private/loint-pubapi": "^1.0.10",
-    "@pushrocks/smartexpress": "^3.0.100",
+    "@pushrocks/smartexpress": "^3.0.108",
-    "typescript": "^4.2.3"
+    "typescript": "^4.5.5"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.24",
+    "@gitzone/tsbuild": "^2.1.29",
-    "@gitzone/tsbundle": "^1.0.80",
+    "@gitzone/tsbundle": "^1.0.89",
-    "@gitzone/tswatch": "^1.0.52",
+    "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.17.0"

ts_web/elements/deap-activitylog.ts

@@ -4,19 +4,21 @@ import {
   property,
   customElement,
   html,
+  css,
+  cssManager,
 } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
 @customElement('deap-activitylog')
 export class DeapActivitylog extends DeesElement {
+  // STATIC
   public static demo = () => html`<deap-activitylog></deap-activitylog>`;
 
   // INSTANCE
-  public render(): TemplateResult {
+  public static styles = [
-    return html`
+    cssManager.defaultStyles,
-      ${domtools.elementBasic.styles}
+    css`
-      <style>
       :host {
         color: #fff;
         position: relative;
@@ -63,7 +65,13 @@ export class DeapActivitylog extends DeesElement {
         border-radius: 3px;
         cursor: pointer;
       }
-      </style>
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style></style>
       <div class="maincontainer">
         <div class="topbar">
           <div class="heading">Activity Log</div>

ts_web/elements/deap-base.ts

@@ -1,13 +1,20 @@
-import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
+import {
+  DeesElement,
+  TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@designestate/dees-element';
 
 @customElement('deap-base')
 export class DeapBase extends DeesElement {
   public static demo = () => html`<deap-base></deap-base>`;
 
-  // INSTANCE
+  public static styles = [
-  public render(): TemplateResult {
+    cssManager.defaultStyles,
-    return html`
+    css`
-      <style>
       :host {
         position: absolute;
         height: 100%;
@@ -20,7 +27,13 @@ export class DeapBase extends DeesElement {
         display: grid;
         grid-template-columns: 80px 240px auto 210px;
       }
-      </style>
+    `,
+  ];
+
+  // INSTANCE
+  public render(): TemplateResult {
+    return html`
+      <style></style>
       <div class="maingrid">
         <deap-mainmenu></deap-mainmenu>
         <deap-mainselector></deap-mainselector>

ts_web/elements/deap-maincontent.ts

@@ -1,6 +1,14 @@
 import * as interfaces from './interfaces';
 
-import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
+import {
+  DeesElement,
+  TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
@@ -14,16 +22,15 @@ export class DeapMaincontent extends DeesElement {
     { key: 'option 1', action: () => {} },
     { key: 'a very long option', action: () => {} },
     { key: 'reminder: set your tabs', action: () => {} },
-    {key: 'option 4', action: () => {}}
+    { key: 'option 4', action: () => {} },
   ];
 
   @property()
   public selectedTab = null;
 
-  public render(): TemplateResult {
+  public static styles = [
-    return html`
+    cssManager.defaultStyles,
-      ${domtools.elementBasic.styles}
+    css`
-      <style>
       :host {
         color: #fff;
         display: block;
@@ -57,7 +64,6 @@ export class DeapMaincontent extends DeesElement {
       .topbar .tabsContainer {
         display: grid;
         margin-left: 50px;
-          grid-template-columns: repeat(${this.tabs.length}, min-content)
       }
 
       .topbar .tabsContainer .tab {
@@ -86,16 +92,34 @@ export class DeapMaincontent extends DeesElement {
         transition: all 0.1s;
       }
 
+      .mainicon {
+      }
+    `,
+  ];
 
-        .mainicon {}
+  public render(): TemplateResult {
+    return html`
+      <style>
+        .topbar .tabsContainer {
+          grid-template-columns: repeat(${this.tabs.length}, min-content);
+        }
       </style>
       <div class="maincontainer">
         <div class="topbar">
           <div class="heading">lossless.com</div>
           <div class="tabsContainer">
-            ${this.tabs.map(tabArg => {
+            ${this.tabs.map((tabArg) => {
               return html`
-                <div class="tab ${tabArg === this.selectedTab ? 'selectedTab': null}" @click="${() => {this.selectedTab = tabArg; this.updateTabIndicator(); tabArg.action()}}">${tabArg.key}</div>
+                <div
+                  class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
+                  @click="${() => {
+                    this.selectedTab = tabArg;
+                    this.updateTabIndicator();
+                    tabArg.action();
+                  }}"
+                >
+                  ${tabArg.key}
+                </div>
               `;
             })}
           </div>
@@ -111,7 +135,9 @@ export class DeapMaincontent extends DeesElement {
   private updateTabIndicator() {
     let selectedTab = this.selectedTab;
     const tabIndex = this.tabs.indexOf(selectedTab);
-    const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(`.tabsContainer .tab:nth-child(${tabIndex + 1})`);
+    const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
+      `.tabsContainer .tab:nth-child(${tabIndex + 1})`
+    );
     const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
     tabIndicator.style.width = selectedTabElement.clientWidth + 'px';
     tabIndicator.style.left = selectedTabElement.offsetLeft + 'px';

ts_web/elements/deap-mainmenu.ts

@@ -6,6 +6,8 @@ import {
   property,
   customElement,
   html,
+  css,
+  cssManager,
 } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
@@ -23,18 +25,17 @@ export class DeapMainmenu extends DeesElement {
     { key: 'option 1', iconName: 'visibility', action: () => {} },
     { key: 'option 2', iconName: 'alarm', action: () => {} },
     { key: 'option 3', iconName: 'alarm', action: () => {} },
-     {key: 'option 4', iconName: 'alarm', action: () => {}}
+    { key: 'option 4', iconName: 'alarm', action: () => {} },
   ];
 
   @property()
   public selectedTab: interfaces.ITab;
 
-  public render(): TemplateResult {
+  public static styles = [
-    return html`
+    cssManager.defaultStyles,
-      ${domtools.elementBasic.styles}
+    css`
-      <style>
       :host {
-          color: #CCC;
+        color: #ccc;
         z-index: 10;
         display: block;
         position: relative;
@@ -79,7 +80,7 @@ export class DeapMainmenu extends DeesElement {
       }
 
       .tabIndicator {
-          background: #4E729A;
+        background: #4e729a;
         position: absolute;
         width: 7px;
         height: 60px;
@@ -89,12 +90,22 @@ export class DeapMainmenu extends DeesElement {
         border-bottom-right-radius: 7px;
         transition: all 0.1s;
       }
-      </style>
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style></style>
       <div class="mainlogo"></div>
       <div class="tabsContainer">
-        ${this.tabs.map(tabArg => {
+        ${this.tabs.map((tabArg) => {
           return html`
-            <div class="tab ${tabArg === this.selectedTab ? 'selectedTab': null}" @click="${() => {this.updateTab(tabArg)}}">
+            <div
+              class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
+              @click="${() => {
+                this.updateTab(tabArg);
+              }}"
+            >
               <dees-icon iconName="${tabArg.iconName}"></dees-icon>
               <div class="label">${tabArg.key}</div>
             </div>
@@ -111,7 +122,9 @@ export class DeapMainmenu extends DeesElement {
       selectedTab = this.tabs[0];
     }
     const tabIndex = this.tabs.indexOf(selectedTab);
-    const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(`.tabsContainer .tab:nth-child(${tabIndex + 1})`);
+    const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
+      `.tabsContainer .tab:nth-child(${tabIndex + 1})`
+    );
     const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
     tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px';
   }

ts_web/elements/deap-mainselector.ts

@@ -6,6 +6,8 @@ import {
   property,
   customElement,
   html,
+  css,
+  cssManager,
 } from '@designestate/dees-element';
 
 @customElement('deap-mainselector')
@@ -27,9 +29,9 @@ export class DeapMainselector extends DeesElement {
   @property()
   public selectedOption: interfaces.ISelectionOption = null;
 
-  public render(): TemplateResult {
+  public static styles = [
-    return html`
+    cssManager.defaultStyles,
-      <style>
+    css`
       :host {
           color: #fff;
           position: relative;
@@ -101,6 +103,12 @@ export class DeapMainselector extends DeesElement {
           margin-bottom: 20px;
           border-bottom: 1px solid #707070;
         }
+    `
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style>
       </style>
       <div class="maincontainer">
         <div class="topbar">