fix(core): update

2022-01-31 14:07:15 +01:00 · 2022-01-31 14:07:15 +01:00 · 2f9a88ee80
commit 2f9a88ee80
parent 9e685633d3
7 changed files with 19163 additions and 3724 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -13,19 +13,19 @@
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
-    "@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",
+    "@designestate/dees-catalog": "^1.0.74",
+    "@designestate/dees-domtools": "^1.0.109",
+    "@designestate/dees-element": "^1.0.35",
+    "@designestate/dees-wcctools": "^1.0.66",
+    "@gitzone/tsrun": "^1.2.18",
    "@losslessone_private/loint-pubapi": "^1.0.10",
-    "@pushrocks/smartexpress": "^3.0.100",
-    "typescript": "^4.2.3"
+    "@pushrocks/smartexpress": "^3.0.108",
+    "typescript": "^4.5.5"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.24",
-    "@gitzone/tsbundle": "^1.0.80",
-    "@gitzone/tswatch": "^1.0.52",
+    "@gitzone/tsbuild": "^2.1.29",
+    "@gitzone/tsbundle": "^1.0.89",
+    "@gitzone/tswatch": "^1.0.56",
    "@pushrocks/projectinfo": "^4.0.5",
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.17.0"
--- a/ts_web/elements/deap-activitylog.ts
+++ b/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 {
-    return html`
-      ${domtools.elementBasic.styles}
-      <style>
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
      :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>
--- a/ts_web/elements/deap-base.ts
+++ b/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 render(): TemplateResult {
-    return html`
-      <style>
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
      :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>
--- a/ts_web/elements/deap-maincontent.ts
+++ b/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';

@ -11,19 +19,18 @@ export class DeapMaincontent extends DeesElement {
  // INSTANCE
  @property()
  public tabs: interfaces.ITab[] = [
-    {key: 'option 1', action: () => {}},
-    {key: 'a very long option', action: () => {}},
-    {key: 'reminder: set your tabs', action: () => {}},
-    {key: 'option 4', action: () => {}}
+    { key: 'option 1', action: () => {} },
+    { key: 'a very long option', action: () => {} },
+    { key: 'reminder: set your tabs', action: () => {} },
+    { key: 'option 4', action: () => {} },
  ];

  @property()
  public selectedTab = null;

-  public render(): TemplateResult {
-    return html`
-      ${domtools.elementBasic.styles}
-      <style>
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
      :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';
--- a/ts_web/elements/deap-mainmenu.ts
+++ b/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';
@ -20,21 +22,20 @@ export class DeapMainmenu extends DeesElement {
  // INSTANCE
  @property()
  public tabs: interfaces.ITab[] = [
-     {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 1', iconName: 'visibility', action: () => {} },
+    { key: 'option 2', iconName: 'alarm', action: () => {} },
+    { key: 'option 3', iconName: 'alarm', action: () => {} },
+    { key: 'option 4', iconName: 'alarm', action: () => {} },
  ];

  @property()
  public selectedTab: interfaces.ITab;

-  public render(): TemplateResult {
-    return html`
-      ${domtools.elementBasic.styles}
-      <style>
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
      :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';
  }
--- a/ts_web/elements/deap-mainselector.ts
+++ b/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 {
-    return html`
-      <style>
+  public static styles = [
+    cssManager.defaultStyles,
+    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">