fix(core): update

package-lock.json

@@ -1140,9 +1140,9 @@
       }
     },
     "@designestate/dees-catalog": {
-      "version": "1.0.29",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-catalog/-/dees-catalog-1.0.29.tgz",
-      "integrity": "sha512-kg2Igsr5gQF5Txrx5cAKRWRcS1FFaVRG0lTFaImV48o9rNiEYCNoI0SvrAUV8w53THdEq4vC3+h3LsxEwXcXnQ==",
+      "version": "1.0.32",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-catalog/-/dees-catalog-1.0.32.tgz",
+      "integrity": "sha512-+gAJ8RE8zuWdSUlfXRHbK/eCUd4rGORyOJ/5nPjOczVtcm0c8adx0vtbVizUlVv2g8CBTIgX1MMnukLOQYY7KA==",
       "requires": {
         "@designestate/dees-domtools": "^1.0.84",
         "@designestate/dees-element": "^1.0.10",
@@ -10396,9 +10396,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.2.2",
-      "resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.2.2.tgz",
-      "integrity": "sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ=="
+      "version": "4.2.3",
+      "resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.2.3.tgz",
+      "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw=="
     },
     "uglify-js": {
       "version": "3.10.4",

package.json

@@ -13,14 +13,14 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-catalog": "^1.0.29",
+    "@designestate/dees-catalog": "^1.0.32",
     "@designestate/dees-domtools": "^1.0.84",
     "@designestate/dees-element": "^1.0.10",
     "@designestate/dees-wcctools": "^1.0.54",
     "@gitzone/tsrun": "^1.2.12",
     "@losslessone_private/loint-pubapi": "^1.0.10",
     "@pushrocks/smartexpress": "^3.0.100",
-    "typescript": "^4.2.2"
+    "typescript": "^4.2.3"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.24",

ts_web/elements/deap-maincontent.ts

@@ -1,3 +1,5 @@
+import * as interfaces from './interfaces';
+
 import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
@@ -8,7 +10,7 @@ export class DeapMaincontent extends DeesElement {
 
   // INSTANCE
   @property()
-  public tabs: {key: string; action: () => void}[] = [
+  public tabs: interfaces.tab[] = [
     {key: 'option 1', action: () => {alert('hello')}},
     {key: 'a very long option', action: () => {}},
     {key: 'option 3', action: () => {}},
@@ -43,6 +45,7 @@ export class DeapMaincontent extends DeesElement {
           width: 100%;
           height: 120px;
           background: #101010;
+          user-select: none;
         }
 
         .topbar .heading {
@@ -58,6 +61,7 @@ export class DeapMaincontent extends DeesElement {
         }
 
         .topbar .tabsContainer .tab {
+          color: #a0a0a0;
           white-space: nowrap;
           margin-right: 20px;
           cursor: pointer;
@@ -82,7 +86,7 @@ export class DeapMaincontent extends DeesElement {
           <div class="tabsContainer">
             ${this.tabs.map(tabArg => {
               return html`
-                <div class="tab" @click="${() => {this.selectedTab = tabArg; this.updateIndicator()}}">${tabArg.key}</div>
+                <div class="tab" @click="${() => {this.selectedTab = tabArg; this.updateIndicator(); tabArg.action()}}">${tabArg.key}</div>
               `;
             })}
           </div>

ts_web/elements/deap-mainmenu.ts

@@ -1,4 +1,12 @@
-import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
+import * as interfaces from './interfaces';
+
+import {
+  DeesElement,
+  TemplateResult,
+  property,
+  customElement,
+  html,
+} from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 import '@designestate/dees-catalog';
@@ -8,40 +16,107 @@ export class DeapMainmenu extends DeesElement {
   public static demo = () => html`<deap-mainmenu></deap-mainmenu>`;
 
   // INSTANCE
-  public render (): TemplateResult {
+
+   // INSTANCE
+   @property()
+   public tabs: interfaces.tab[] = [
+     {key: 'option 1', iconName: 'visibility', action: () => {alert('hello')}},
+     {key: 'option 2', iconName: 'alarm', action: () => {}},
+     {key: 'option 3', iconName: 'alarm', action: () => {}},
+     {key: 'option 4', iconName: 'alarm', action: () => {}}
+   ];
+
+   @property()
+   public selectedTab: interfaces.tab;
+
+  public render(): TemplateResult {
     return html`
       ${domtools.elementBasic.styles}
       <style>
         :host {
+          color: #CCC;
           z-index: 10;
           display: block;
           position: relative;
           width: 80px;
           height: 100%;
           background: #3c3c3c;
-          box-shadow: 0px 0px 5px rgba(0,0,0,0.5)
-        }
-
-        .maincontainer {
-          
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+          user-select: none;
         }
 
         .mainlogo {
           width: 80px;
           height: 80px;
-          background: rgba(0,0,0,0.2);
+          background: rgba(0, 0, 0, 0.2);
         }
 
-        .mainicon {}
-      </style>
-      <div class="maincontainer">
-        <div class="mainlogo">
+        .tabsContainer {
+        }
 
-        </div>
-        <div class="mainicon">
-          <dees-icon ></dees-icon>
-        </div>
+        .tab {
+          padding-top: 16px;
+          font-size: 25px;
+          width: 80px;
+          height: 80px;
+          text-align: center;
+          cursor: pointer;
+          transition: color 0.1s;
+        }
+
+        .tab:hover {
+          background: #222222;
+        }
+
+        .tab.selectedTab {
+          color: #fff;
+        }
+
+        .tab .label {
+          font-size: 12px;
+          margin-top: 5px;
+        }
+
+        .tabIndicator {
+          background: #4E729A;
+          position: absolute;
+          width: 7px;
+          height: 60px;
+          left: 0px;
+          top: 90px;
+          border-top-right-radius: 7px;
+          border-bottom-right-radius: 7px;
+          transition: all 0.3s;
+        }
+      </style>
+      <div class="mainlogo"></div>
+      <div class="tabsContainer">
+        ${this.tabs.map(tabArg => {
+          return html`
+            <div class="tab ${tabArg === this.selectedTab ? 'selectedTab': null}" @click="${() => {this.selectedTab = tabArg; this.updateTabIndicator(); tabArg.action()}}">
+              <dees-icon iconName="${tabArg.iconName}"></dees-icon>
+              <div class="label">${tabArg.key}</div>
+            </div>
+          `;
+        })}
       </div>
+      <div class="tabIndicator"></div>
     `;
   }
-}
+
+  private async updateTabIndicator() {
+    let selectedTab = this.selectedTab;
+    if (!selectedTab) {
+      selectedTab = this.tabs[0];
+    }
+    const tabIndex = this.tabs.indexOf(selectedTab);
+    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';
+  }
+
+  firstUpdated() {
+    this.selectedTab = this.tabs[0];
+    this.updateTabIndicator();
+  }
+}

ts_web/elements/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './tab';

ts_web/elements/interfaces/tab.ts

@@ -0,0 +1,5 @@
+export interface tab {
+  key: string;
+  iconName?: string;
+  action: () => void;
+}