1.0.155

fix(core): update
1.0.154
2023-03-27 23:21:27 +02:00 · 2023-03-27 23:21:27 +02:00 · 2023-03-27 01:22:16 +02:00 · 2023-03-27 01:22:15 +02:00 · 2023-03-25 20:56:13 +01:00 · 2023-03-25 20:56:12 +01:00
45 changed files with 7489 additions and 10989 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -12,40 +12,36 @@ stages:
  - release
  - metadata
 before_script:
  - pnpm install -g pnpm
  - pnpm install -g @shipzone/npmci
  - npmci npm prepare
 # ====================
 # security stage
 # ====================
 # ====================
 # security stage
 # ====================
 mirror:
  stage: security
  script:
    - npmci git mirror
  only:
    - tags
  tags:
    - lossless
    - docker
    - notpriv
 auditProductionDependencies:
  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
  stage: security
  script:
-    - npmci npm prepare
+     - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm install --production --ignore-scripts
+     - npmci command pnpm audit --audit-level=high --prod
    - npmci command npm config set registry https://registry.npmjs.org
    - npmci command npm audit --audit-level=high --only=prod --production
  tags:
    - lossless
    - docker
  allow_failure: true
 auditDevDependencies:
  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
  stage: security
  script:
    - npmci npm prepare
    - npmci command npm install --ignore-scripts
    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high --only=dev
+    - npmci command pnpm audit --audit-level=high --dev
  tags:
    - lossless
    - docker
  allow_failure: true
@ -56,7 +52,6 @@ auditDevDependencies:
 testStable:
  stage: test
  script:
    - npmci npm prepare
    - npmci node install stable
    - npmci npm install
    - npmci npm test
@ -67,10 +62,9 @@ testStable:
 testBuild:
  stage: test
  script:
    - npmci npm prepare
    - npmci node install stable
    - npmci npm install
-    - npmci command npm run build
+    - npmci npm build
  coverage: /\d+.?\d+?\%\s*coverage/
  tags:
    - docker
@ -96,10 +90,9 @@ codequality:
  only:
    - tags
  script:
-    - npmci command npm install -g tslint typescript
+    - npmci command npm install -g typescript
    - npmci npm prepare
    - npmci npm install
    - npmci command "tslint -c tslint.json ./ts/**/*.ts"
  tags:
    - lossless
    - docker
@ -119,11 +112,9 @@ trigger:
 pages:
  stage: metadata
  script:
-    - npmci node install lts
+    - npmci node install stable
    - npmci command npm install -g @gitzone/tsdoc
    - npmci npm prepare
    - npmci npm install
-    - npmci command tsdoc
+    - npmci command npm run buildDocs
  tags:
    - lossless
    - docker
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -2,28 +2,10 @@
  "version": "0.2.0",
  "configurations": [
    {
-      "name": "current file",
+      "command": "npm test",
-      "type": "node",
+      "name": "Run npm test",
      "request": "launch",
-      "args": [
+      "type": "node-terminal"
        "${relativeFile}"
      ],
      "runtimeArgs": ["-r", "@gitzone/tsrun"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "internalConsoleOptions": "openOnSessionStart"
    },
    {
      "name": "test.ts",
      "type": "node",
      "request": "launch",
      "args": [
        "test/test.ts"
      ],
      "runtimeArgs": ["-r", "@gitzone/tsrun"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
 }
--- a/html/index.html
+++ b/html/index.html
@ -1,5 +1,5 @@
 <!--gitzone element-->
-<!-- made by Lossless GmbH -->
+<!-- made by Task Venture Capital GmbH -->
 <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
 <html lang="en">
  <head>
@ -10,6 +10,12 @@
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="preconnect" href="https://rsms.me/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <style>
      body {
        margin: 0px;
@ -17,7 +23,7 @@
      }
    </style>
-    <script src="./index.ts"></script>
+    <script type="module" src="/bundle.js"></script>
  </head>
  <body>
  </body>
--- a/html/index.ts
+++ b/html/index.ts
@ -3,8 +3,8 @@ import * as deesWccTools from '@designestate/dees-wcctools';
 import * as deesDomTools from '@designestate/dees-domtools';
 // elements and pages
-import * as elements from '../ts_web/elements';
+import * as elements from '../ts_web/elements/index.js';
-import * as pages from '../ts_web/pages';
+import * as pages from '../ts_web/pages/index.js';
 deesWccTools.setupWccTools(elements as any, pages);
 deesDomTools.elementBasic.setup();
--- a/5
+++ b/5
@ -8,7 +8,10 @@ copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+copies or substantial portions of the Software. You agree to being mentioned
 as reference by Lossless GmbH. This includes the use of your entity logos
 or profile picture by Lossless GmbH on websites and readme's, also on third party
 pages like gitlab.com or github.com.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
--- a/npmextra.json
+++ b/npmextra.json
@ -5,7 +5,7 @@
      "githost": "gitlab.com",
      "gitscope": "designestate",
      "gitrepo": "dees-catalog",
-      "shortDescription": "a webcomponents catalog for handling daily stuff on the web",
+      "description": "a webcomponents catalog for handling daily stuff on the web",
      "npmPackagename": "@designestate/dees-catalog",
      "license": "MIT",
      "projectDomain": "design.estate"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,32 +1,39 @@
 {
  "name": "@designestate/dees-catalog",
-  "version": "1.0.23",
+  "version": "1.0.155",
  "private": false,
  "description": "website for lossless.com",
  "main": "dist_ts_web/index.js",
  "typings": "dist_ts_web/index.d.ts",
  "type": "module",
  "scripts": {
-    "test": "npm run build",
+    "test": "tstest test/ --web",
-    "build": "tsbuild element && tsbundle element --production",
+    "build": "tsbuild element --allowimplicitany && tsbundle element --production",
-    "watch": "tswatch element"
+    "watch": "tswatch element",
    "buildDocs": "tsdoc"
  },
  "author": "Lossless GmbH",
  "license": "MIT",
  "dependencies": {
-    "@designestate/dees-domtools": "^1.0.79",
+    "@designestate/dees-domtools": "^2.0.28",
-    "@designestate/dees-wcctools": "^1.0.49",
+    "@designestate/dees-element": "^2.0.19",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@designestate/dees-wcctools": "^1.0.76",
-    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "lit-element": "^2.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.3.0",
-    "typescript": "^4.1.2"
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.3.0",
    "@pushrocks/smartpromise": "^3.1.7",
    "@tsclass/tsclass": "^4.0.34",
    "pdfjs-dist": "^2.15.349"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
+    "@gitzone/tsbuild": "^2.1.65",
-    "@gitzone/tsbundle": "^1.0.78",
+    "@gitzone/tsbundle": "^2.0.7",
-    "@gitzone/tswatch": "^1.0.50",
+    "@gitzone/tstest": "^1.0.74",
-    "@pushrocks/projectinfo": "^4.0.5",
+    "@gitzone/tswatch": "^2.0.5",
-    "tslint": "^6.1.3",
+    "@pushrocks/projectinfo": "^5.0.1",
-    "tslint-config-prettier": "^1.17.0"
+    "@pushrocks/tapbundle": "^5.0.4",
    "@types/node": "^18.15.9"
  },
  "files": [
    "ts/**/*",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.md
+++ b/readme.md
@ -21,7 +21,6 @@ Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](htt
 PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-catalog)](https://lossless.cloud)
 PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-catalog)](https://lossless.cloud)
 BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-catalog)](https://lossless.cloud)
 Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
 ## Usage
@ -35,7 +34,6 @@ We are always happy for code contributions. If you are not the code contributing
 For further information read the linked docs at the top of this readme.
-> MIT licensed | **&copy;** [Lossless GmbH](https://lossless.gmbh)
+## Legal
 > MIT licensed | **&copy;** [Task Venture Capital GmbH](https://task.vc)
 | By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
 [![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)
--- a/test/test.browser.ts
+++ b/test/test.browser.ts
@ -0,0 +1,12 @@
 import { tap, expect, webhelpers } from '@pushrocks/tapbundle';
 import * as deesCatalog from '../ts_web';
 tap.test('should create a working button', async () => {
  const button: deesCatalog.DeesButton = await webhelpers.fixture(
    webhelpers.html`<dees-button></dees-button>`
  );
  expect(button).toBeInstanceOf(deesCatalog.DeesButton);
 });
 tap.start();
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@ -0,0 +1,8 @@
 /**
 * autocreated commitinfo by @pushrocks/commitinfo
 */
 export const commitinfo = {
  name: '@designestate/dees-catalog',
  version: '1.0.155',
  description: 'website for lossless.com'
 }
--- a/ts_web/elements/dees-button-exit.ts
+++ b/ts_web/elements/dees-button-exit.ts
@ -0,0 +1,47 @@
 import {
  cssManager,
  customElement,
  DeesElement,
  html,
  TemplateResult,
  css,
  state,
  property
 } from '@designestate/dees-element';
@customElement('dees-button-exit')
 export class DeesButtonExit extends DeesElement {
  // DEMO
  public static demo = () => html`
    <dees-button-exit></dees-button-exit>
  `;
  // INSTANCE
  @property({
    type: Number
  })
  public size: number = 24;
  public styles = [
    cssManager.defaultStyles,
    css`
    `
  ]
  public render (): TemplateResult {
    return html`
      <style>
        .maincontainer {
          position: relative;
          width: ${this.size}px;
          height: ${this.size}px;
        }
      </style>
      <div class="maincontainer">
        <div class="firstLine"></div>
        <div class="secondLine"></div>
      </div>
    `;
  }
 }
--- a/ts_web/elements/dees-button.ts
+++ b/ts_web/elements/dees-button.ts
@ -1,125 +1,214 @@
-import { customElement, html, LitElement, property, TemplateResult } from 'lit-element';
+import {
  customElement,
  html,
  DeesElement,
  property,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS,
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-button': DeesButton;
  }
 }
@customElement('dees-button')
-export class DeesButton extends LitElement {
+export class DeesButton extends DeesElement {
-  @property()
+  public static demo = () => html`
-  text: string;
+    <dees-button>This is a slotted Text</dees-button>
    <p><dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button></p>
    <p><dees-button type="discreet">This is discreete button</dees-button></p>
    <p><dees-button disabled>This is a disabled button</dees-button></p>
    <p><dees-button type="big">This is a slotted Text</dees-button></p>
    <p><dees-button status="normal">Normal Status</dees-button></p>
    <p><dees-button disabled status="pending">Pending Status</dees-button></p>
    <p><dees-button disabled status="success">Success Status</dees-button></p>
    <p><dees-button disabled status="error">Error Status</dees-button></p>
  `;
  @property({
    reflect: true,
    hasChanged() {
      return true;
    }
  })
  public text: string;
  @property()
-  eventDetailData: string;
+  public eventDetailData: string;
-  @property()
+  @property({
-  disabled = false;
+    type: Boolean
  })
  public disabled = false;
-  @property()
+  @property({
-  isQuote = false;
+    type: Boolean
  })
  public isHidden = false;
-  @property()
+  @property({
-  isHidden = false;
+    type: String
-
+  })
  @property()
  public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
  @property({
    type: String
  })
  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        box-sizing: border-box;
      }
      :host([hidden]) {
        display: none;
      }
      .button {
        transition: all 0.1s , color 0s;
        position: relative;
        font-size: 14px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;
        background: ${cssManager.bdTheme('#fff', '#333')};
        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
        border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
        border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
        border-radius: 4px;
        line-height: 40px;
        padding: 0px 8px;
        min-width: 100px;
        user-select: none;
        color: ${cssManager.bdTheme('#333', ' #ccc')};
        max-width: 500px;
      }
      .button:hover {
        cursor: pointer;
        background: #039be5;
        color: #ffffff;
        border: 1px solid #039be5;
        border-top: 1px solid #039be5;
      }
      .button:active {
        background: #0277bd;
        border-top: 1px solid #0277bd;
      }
      .button.disabled {
        background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
        border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
        color: #9b9b9e;
        cursor: default;
      }
      .button.highlighted {
        background: #e4002b;
        border: none;
        color: #fff;
      }
      .button.highlighted:hover {
        background: #b50021;
        border: none;
        color: #fff;
      }
      .button.discreet {
        background: none;
        border: 1px solid #9b9b9e;
        color: ${cssManager.bdTheme('#000', '#fff')};
      }
      .button.discreet:hover {
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
      }
      .button.hidden {
        display: none;
      }
      .button.big {
        width: 300px;
        line-height: 48px;
        font-size: 16px;
        padding: 0px 48px;
        margin-top: 32px;
      }
      .button.pending {
        border: 1px dashed ${cssManager.bdTheme('#0277bd', '#0277bd70')};
        background: ${cssManager.bdTheme('#0277bd', '#0277bd70')};
        color: #fff;
      }
      .button.success {
        border: 1px dashed ${cssManager.bdTheme('#689F38', '#8BC34A70')};
        background: ${cssManager.bdTheme('#689F38', '#8BC34A70')};
        color: #fff;
      }
      .button.error {
        border: 1px dashed ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
        background: ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
        color: #fff;
      }
      dees-spinner {
        position: absolute;
        left: 10px;
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
-      ${domtools.elementBasic.styles}
+      <div
-      <style>
+        class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.status} ${this.disabled
-        :host {
+          ? 'disabled'
-          display: block;
+          : null}"
-          box-sizing: border-box;
+        @click="${this.dispatchClick}"
-        }
+      >
-        :host([hidden]) {
+        ${this.status === 'normal' ? html``: html`
-          display: none;
+          <dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
-        }
+        `}
-
+        <div class="textbox">${this.text ? this.text : this.textContent}</div>
        .button {
          transition: all 0.2s ease;
          font-size: 14px;
          display: block;
          text-align: center;
          background: #333;
          border-top: 1px solid #444;
          border-radius: 2px;
          line-height: 40px;
          padding: 0px 10px;
          min-width: 100px;
          color: ${this.isQuote ? '#ffffff' : '#333333' };
          user-select: none;
          color: #ccc;
        }
        .button:hover {
          cursor: pointer;
          background: #039BE5;
          border-top: 1px solid #039BE5;
          color: #ffffff;
        }
        .button:active {
          background: #0277BD;
          border-top: 1px solid #0277BD;
        }
        .button.disabled {
          background: #fff;
          border: 1px solid #eeeff3;
          color: #9b9b9e;
          cursor: default;
        }
        .button.highlighted {
          background: #e4002b;
          color: #fff;
        }
        .button.discreet {
          background: none;
          border: 1px solid #9b9b9e;
          color: #000;
        }
        .button.discreet:hover {
          background: rgba(0,0,0,0.1)
        }
        .hidden {
            display: none;
        }
        .big {
          display: inline-block;
          line-height: 48px;
          font-size: 16px;
          padding: 0px 48px;
          margin-top: 36px;
        }
      </style>
      <div class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.disabled ? 'disabled' : null}" @click="${this.dispatchClick}">
        ${this.text ? this.text : this.textContent}
      </div>
    `;
  }
  public async dispatchClick() {
    if (this.disabled) {
      return;
    }
-    this.dispatchEvent(new CustomEvent('clicked', {
+    this.dispatchEvent(
-      detail: {
+      new CustomEvent('clicked', {
-        data: this.eventDetailData
+        detail: {
-      },
+          data: this.eventDetailData,
-      bubbles: true
+        },
-    }));
+        bubbles: true,
      })
    );
  }
-  public async firstUpdated () {
+  public async firstUpdated() {
    if (!this.textContent) {
      this.textContent = 'Button';
      this.performUpdate();
--- a/ts_web/elements/dees-chips.ts
+++ b/ts_web/elements/dees-chips.ts
@ -0,0 +1,123 @@
 import {
  customElement,
  html,
  DeesElement,
  property,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS,
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-chips': DeesChips;
  }
 }
@customElement('dees-chips')
 export class DeesChips extends DeesElement {
  public static demo = () => html`
    <dees-chips .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
    <dees-chips selectionMode="multiple" .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
  `;
  @property()
  public selectionMode: 'single' | 'multiple' = 'single';
  @property({
    type: Array
  })
  public selectableChips: string[] = [];
  @property()
  public selectedChip: string = null;
  @property({
    type: Array
  })
  public selectedChips: string[] = [];
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        box-sizing: border-box;
      }
      .mainbox {
      }
      .chip {
        background: #494949;
        display: inline-block;
        padding: 8px 12px;
        font-size: 14px;
        color: #fff;
        border-radius: 40px;
        margin-right: 4px;
        margin-bottom: 8px;
      }
      .chip:hover {
        background: #666666;
        cursor: pointer; 
      }
      .chip.selected {
        background: #00A3FF;
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        ${this.selectableChips.map(chipArg => html`
          <div @click=${() => this.selectChip(chipArg)} class="chip ${this.selectedChip === chipArg || this.selectedChips.includes(chipArg) ? 'selected' : ''}">
            ${chipArg}
          </div>
        `)}
      </div>
    `;
  }
  public async firstUpdated() {
    if (!this.textContent) {
      this.textContent = 'Button';
      this.performUpdate();
    }
  }
  public async selectChip(chipArg: string) {
    if (this.selectionMode === 'single') {
      if (this.selectedChip === chipArg) {
        this.selectedChip = null;
        this.selectedChips = [];
      } else {
        this.selectedChip = chipArg;
        this.selectedChips = [chipArg];
      }
    } else if(this.selectionMode === 'multiple') {
      if (this.selectedChips.includes(chipArg)) {
        this.selectedChips = this.selectedChips.filter(chipArg2 => chipArg !== chipArg2)
      } else {
        this.selectedChips.push(chipArg);
      }
      this.requestUpdate();
    }
    console.log(this.selectedChips);
  }
 }
--- a/ts_web/elements/dees-contextmenu.ts
+++ b/ts_web/elements/dees-contextmenu.ts
@ -0,0 +1,180 @@
 import * as plugins from './plugins.js';
 import {
  customElement,
  html,
  DeesElement,
  property,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS,
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 import { DeesWindowLayer } from './dees-windowlayer.js';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-contextmenu': DeesContextmenu;
  }
 }
@customElement('dees-contextmenu')
 export class DeesContextmenu extends DeesElement {
  // DEMO
  public static demo = () => html`
    <style>
      .withMargin {
        display: block;
        margin: 20px;
      }
    </style>
    <dees-button @contextmenu=${(eventArg) => {
      DeesContextmenu.openContextMenuWithOptions(eventArg, [
        {
          name: 'copy',
          iconName: 'copySolid',
          action: async () => {
            return null;
          },
        },
        {
          name: 'edit',
          iconName: 'penToSquare',
          action: async () => {
            return null;
          },
        },{
          name: 'paste',
          iconName: 'pasteSolid',
          action: async () => {
            return null;
          },
        },
      ]);
    }}>Hello</dees-button>
    <dees-contextmenu class="withMargin"></dees-contextmenu>
    <dees-contextmenu
      class="withMargin"
      .menuItems=${[
        {
          name: 'copy',
          iconName: 'copySolid',
          action: async () => {},
        },
        {
          name: 'edit',
          iconName: 'penToSquare',
          action: async () => {},
        },{
          name: 'paste',
          iconName: 'pasteSolid',
          action: async () => {},
        },
      ] as plugins.tsclass.website.IMenuItem[]}
    ></dees-contextmenu>
  `;
  // STATIC
  public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
    eventArg.preventDefault();
    const contextMenu = new DeesContextmenu();
    contextMenu.style.position = 'absolute';
    contextMenu.style.top = `${eventArg.clientY.toString()}px`;
    contextMenu.style.left = `${eventArg.clientX.toString()}px`;
    contextMenu.style.opacity = '0';
    contextMenu.style.transform = 'scale(0.95,0.95)';
    contextMenu.style.transformOrigin = 'top left';
    contextMenu.menuItems = menuItemsArg;
    document.body.append(contextMenu);
    await domtools.plugins.smartdelay.delayFor(0);
    contextMenu.style.opacity = '1';
    contextMenu.style.transform = 'scale(1,1)';
  }
  @property({
    type: Array,
  })
  public menuItems: plugins.tsclass.website.IMenuItem[] = [];
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        transition: all 0.1s;
      }
      .mainbox {
        color: ${cssManager.bdTheme('#222', '#ccc')};
        font-size: 14px;
        width: 200px;
        border: 1px solid #444;
        min-height: 40px;
        border-radius: 3px;
        background: #222;
        box-shadow: 0px 1px 4px #000;
        user-select: none;
      }
      .mainbox .menuitem {
        padding: 8px;
      }
      .mainbox .menuitem dees-icon {
        display: inline-block;
        margin-right: 8px;
        width: 14px;
        transform: translateY(2px);
      }
      .mainbox .menuitem:hover {
        cursor: pointer;
        background: #ffffff10;
      }
      .mainbox .menuitem:active {
        cursor: pointer;
        background: #ffffff05;
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        ${this.menuItems.map((menuItemArg) => {
          return html`
            <div class="menuitem" @click=${() => this.handleClick(menuItemArg)}>
              <dees-icon .iconFA=${(menuItemArg.iconName as any) || 'minus'}></dees-icon
              >${menuItemArg.name}
            </div>
          `;
        })}
      </div>
    `;
  }
  public async firstUpdated() {
    if (!this.menuItems || this.menuItems.length === 0) {
      const mainbox = this.shadowRoot.querySelector('.mainbox');
      mainbox.textContent = 'no menu items present';
    }
  }
  public async handleClick(menuItem: plugins.tsclass.website.IMenuItem) {
    menuItem.action();
    await this.destroy();
  }
  public async destroy() {
    this.style.opacity = '0';
    this.style.transform = 'scale(0.95,0,95)';
    await domtools.plugins.smartdelay.delayFor(100);
    this.parentElement.removeChild(this);
  }
 }
--- a/ts_web/elements/dees-form-submit.ts
+++ b/ts_web/elements/dees-form-submit.ts
@ -1,18 +1,55 @@
-import { customElement, html, LitElement } from 'lit-element';
+import {
  customElement,
  html,
  DeesElement,
  css,
  cssManager,
  property,
 } from '@designestate/dees-element';
 import { DeesForm } from './dees-form.js';
-import {DeesForm} from './dees-form';
+declare global {
  interface HTMLElementTagNameMap {
    'dees-form-submit': DeesFormSubmit;
  }
 }
@customElement('dees-form-submit')
-export class DeesFormSubmit extends LitElement {
+export class DeesFormSubmit extends DeesElement {
  public static demo = () => html`<dees-form-submit>This is a sloted text</dees-form-submit>`;
  @property({
    type: Boolean,
  })
  public disabled = false;
  @property({
    type: String,
  })
  public text: string;
  @property({
    type: String
  })
  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
  constructor() {
    super();
  }
  public static styles = [cssManager.defaultStyles, css``];
  public render() {
    return html`
-      <dees-button @click="${this.submit}">${this.textContent}</dees-button>
+      <dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled} .text=${this.text ? this.text : this.textContent}>
      </dees-button>
    `;
  }
  public async submit() {
    if (this.disabled) {
      return;
    }
    const parentElement: DeesForm = this.parentElement as DeesForm;
    parentElement.gatherAndDispatch();
  }
--- a/ts_web/elements/dees-form.ts
+++ b/ts_web/elements/dees-form.ts
@ -1,20 +1,47 @@
-import { customElement, html, TemplateResult, LitElement } from 'lit-element';
+import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
-import { DeesInputCheckbox } from './dees-input-checkbox';
+import { DeesInputCheckbox } from './dees-input-checkbox.js';
-import { DeesInputText } from './dees-input-text';
+import { DeesInputText } from './dees-input-text.js';
-import { DeesInputQuantitySelector } from './dees-input-quantityselector';
+import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
-import { DeesInputRadio } from './dees-input-radio';
+import { DeesInputRadio } from './dees-input-radio.js';
 import { DeesFormSubmit } from './dees-form-submit.js';
 export type TFormElement = Array<
  DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
 >;
 declare global {
  interface HTMLElementTagNameMap {
    'dees-form': DeesForm;
  }
 }
@customElement('dees-form')
-export class DeesForm extends LitElement {
+export class DeesForm extends DeesElement {
  public static demo = () => html`
-    <dees-form style="display: block; margin:auto; width: 500px; padding: 20px; background: #111;">
+    <dees-form
-      <dees-input-text key="hello1"></dees-input-text>
+      style="display: block; margin:auto; max-width: 500px; padding: 20px"
-      <dees-input-text key="hello2"></dees-input-text>
+      @formData=${async (eventArg) => {
        const form: DeesForm = eventArg.currentTarget;
        form.setStatus('pending', 'authenticating...');
        await domtools.plugins.smartdelay.delayFor(1000);
        form.setStatus('success', 'authenticated!');
      }}
    >
      <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
      <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
      <dees-input-checkbox
        .required="${true}"
        key="hello3"
        label="another text"
      ></dees-input-checkbox>
      <dees-form-submit>Submit</dees-form-submit>
-    </dees-form>`;
+    </dees-form>
  `;
  public name: string = 'myform';
  public changeSubject = new domtools.rxjs.Subject();
  public render(): TemplateResult {
    return html`
@ -27,24 +54,120 @@ export class DeesForm extends LitElement {
    `;
  }
-  public async gatherAndDispatch() {
+  public firstUpdated() {
    const formChildren = this.getFormChildren();
    this.checkRequiredStatus();
    for (const child of formChildren) {
      child.changeSubject.subscribe(async (elementArg: TFormElement) => {
        const valueObject = await this.gatherData();
        this.changeSubject.next(valueObject);
        console.log(valueObject);
        this.checkRequiredStatus();
      });
    }
  }
  public getFormChildren() {
    const children: Array<DeesElement> = this.children as any;
    const formChildren: TFormElement = [];
    const children: Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio> = this.children as any;
    const valueObject: { [key: string]: string | number | boolean} = {};
    for (const child of children) {
-      if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
+      if (
-        valueObject[child.key] = child.value;
+        child instanceof DeesInputCheckbox ||
        child instanceof DeesInputText ||
        child instanceof DeesInputQuantitySelector
      ) {
        formChildren.push(child);
      }
    }
    return formChildren;
  }
  public getSubmitButton() {
    const children: Array<DeesElement> = this.children as any;
    let submitButton: DeesFormSubmit;
    for (const childArg of children) {
      if (childArg instanceof DeesFormSubmit) {
        submitButton = childArg;
      }
    }
    return submitButton;
  }
-    console.log(valueObject);
+  public async checkRequiredStatus() {
    console.log('checking the required status.');
    let requiredOK = true;
    for (const childArg of this.getFormChildren()) {
      if (childArg.required && !childArg.value) {
        requiredOK = false;
      }
    }
    if (this.getSubmitButton()) {
      this.getSubmitButton().disabled = !requiredOK;
    }
  }
  public async gatherData() {
    const children = this.getFormChildren();
    const valueObject: { [key: string]: string | number | boolean } = {};
    for (const child of children) {
      valueObject[child.key] = child.value;
    }
    return valueObject;
  }
  public async gatherAndDispatch() {
    const valueObject = await this.gatherData();
    const formDataEvent = new CustomEvent('formData', {
      detail: {
-        data: valueObject
+        data: valueObject,
      },
-      bubbles: true
+      bubbles: true,
    });
    this.dispatchEvent(formDataEvent);
    console.log('dispatched data:');
    console.log(valueObject);
  }
  public setStatus(
    visualStateArg: 'normal' | 'pending' | 'error' | 'success',
    textStateArg: string
  ) {
    const inputChildren = this.getFormChildren();
    const submitButton = this.getSubmitButton();
    switch (visualStateArg) {
      case 'normal':
        submitButton.disabled = false;
        submitButton.status = 'normal';
        for (const inputChild of inputChildren) {
          inputChild.disabled = false;
        }
        break;
      case 'pending':
        submitButton.disabled = true;
        submitButton.status = 'pending';
        for (const inputChild of inputChildren) {
          inputChild.disabled = true;
        }
        break;
      case 'success':
        submitButton.disabled = true;
        submitButton.status = 'success';
        for (const inputChild of inputChildren) {
          inputChild.disabled = true;
        }
        break;
      case 'error':
        submitButton.disabled = true;
        submitButton.status = 'error';
        for (const inputChild of inputChildren) {
          inputChild.disabled = true;
        }
        break;
    }
    submitButton.text = textStateArg;
  }
 }
--- a/ts_web/elements/dees-icon.ts
+++ b/ts_web/elements/dees-icon.ts
@ -1,89 +1,203 @@
-import { LitElement, html, property, customElement } from 'lit-element';
+import {
  DeesElement,
  html,
  property,
  customElement,
  cssManager,
  css,
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
-import { icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { faFacebook, faTwitter, faLinkedin, faMedium } from '@fortawesome/free-brands-svg-icons';
+import {
  faFacebook,
  faGoogle,
  faLinkedin,
  faMedium,
  faSlackHash,
  faTwitter,
  faInstagram,
  faTiktok,
 } from '@fortawesome/free-brands-svg-icons';
-type TBrand = 'facebook' | 'twitter' | 'linkedin' | 'medium';
+import {
-const brandIcons: {[key: string]: IconDefinition} = {
+  faCopy as faCopyRegular,
  faCircleCheck as faCircleCheckRegular,
  faCircleXmark as faCircleXmarkRegular,
  faMessage as faMessageRegular,
  faPaste as faPasteRegular,
  faSun as faSunRegular,
 } from '@fortawesome/free-regular-svg-icons';
 import {
  faArrowRight as faArrowRightSolid,
  faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid,
  faBell as faBellSolid,
  faBug as faBugSolid,
  faBuilding as faBuildingSolid,
  faCaretLeft as faCaretLeftSolid,
  faCaretRight as faCaretRightSolid,
  faCheck as faCheckSolid,
  faCircleInfo as faCircleInfoSolid,
  faCircleCheck as faCircleCheckSolid,
  faCircleXmark as faCircleXmarkSolid,
  faCopy as faCopySolid,
  faDesktop as faDesktopSolid,
  faEye as faEyeSolid,
  faEyeSlash as faEyeSlashSolid,
  faGrip as faGripSolid,
  faMessage as faMessageSolid,
  faMugHot as faMugHotSolid,
  faMinus as faMinusSolid,
  faPaste as faPasteSolid,
  faPenToSquare as faPenToSquareSolid,
  faRss as faRssSolid,
  faUsers as faUsersSolid,
  faShare as faShareSolid,
  faSun as faSunSolid,
  faXmark as faXmarkSolid,
 } from '@fortawesome/free-solid-svg-icons';
 export const faIcons = {
  // normal
  arrowRight: faArrowRightSolid,
  arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
  arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
  bell: faBellSolid,
  bellSolid: faBellSolid,
  bug: faBugSolid,
  bugSolid: faBugSolid,
  building: faBuildingSolid,
  buildingSolid: faBuildingSolid,
  caretLeft: faCaretLeftSolid,
  caretLeftSolid: faCaretLeftSolid,
  caretRight: faCaretRightSolid,
  caretRightSolid: faCaretRightSolid,
  check: faCheckSolid,
  checkSolid: faCheckSolid,
  circleInfo: faCircleInfoSolid,
  circleInfoSolid: faCircleInfoSolid,
  circleCheck: faCircleCheckRegular,
  circleCheckSolid: faCircleCheckSolid,
  circleXmark: faCircleXmarkRegular,
  circleXmarkSolid: faCircleXmarkSolid,
  copy: faCopyRegular,
  copySolid: faCopySolid,
  desktop: faDesktopSolid,
  desktopSolid: faDesktopSolid,
  eye: faEyeSolid,
  eyeSolid: faEyeSolid,
  eyeSlash: faEyeSlashSolid,
  eyeSlashSolid: faEyeSlashSolid,
  grip: faGripSolid,
  gripSolid: faGripSolid,
  message: faMessageRegular,
  messageSolid: faMessageSolid,
  mugHot: faMugHotSolid,
  faMugHotSolid: faMugHotSolid,
  minus: faMinusSolid,
  minusSolid: faMinusSolid,
  paste: faPasteRegular,
  pasteSolid: faPasteSolid,
  penToSquare: faPenToSquareSolid,
  penToSquareSolid: faPenToSquareSolid,
  rss: faRssSolid,
  rssSolid: faRssSolid,
  share: faShareSolid,
  shareSolid: faShareSolid,
  sun: faSunRegular,
  sunSolid: faSunSolid,
  xmark: faXmarkSolid,
  xmarkSolid: faXmarkSolid,
  // brands
  facebook: faFacebook,
-  twitter: faTwitter,
+  google: faGoogle,
  instagram: faInstagram,
  linkedin: faLinkedin,
-  medium: faMedium
+  medium: faMedium,
  slack: faSlackHash,
  tiktok: faTiktok,
  twitter: faTwitter,
  users: faUsersSolid,
 };
 declare global {
  interface HTMLElementTagNameMap {
    'dees-icon': DeesIcon;
  }
 }
@customElement('dees-icon')
-export class DeesIcon extends LitElement {
+export class DeesIcon extends DeesElement {
  public static demo = () => html`
-    <div style="background: #fff; padding: 10px;">
+    <dees-icon iconName="visibility"></dees-icon>
-      <dees-icon iconName="visibility"></dees-icon>
+    <div style="background: #fff; padding: 10px; font-size: 30px">
-      <dees-icon brandName="facebook"></dees-icon>
+      <style>
        dees-icon {
          transition: color 0.05s;
        }
        dees-icon:hover {
          color: #e4002b;
        }
      </style>
      <dees-icon .iconFA=${'messageSolid'}></dees-icon>
      <dees-icon .iconFA=${'sun'}></dees-icon>
      <dees-icon .iconFA=${'sunSolid'}></dees-icon>
      <dees-icon .iconFA=${'facebook'}></dees-icon>
      <dees-icon .iconFA=${'arrowUpRightFromSquare'}></dees-icon>
    </div>
  `;
-    `;
+  @property({
    type: String
  })
  public iconFA: keyof typeof faIcons;
  @property()
-  public iconName: string;
+  public iconSize: number;
  @property()
  public brandName: TBrand;
  @property()
  public svgSize: number = 20;
  constructor() {
    super();
    domtools.elementBasic.setup();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      * {
        transition: inherit !important;
      }
    `,
  ];
  public render() {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          display: block;
          line-height: inherit;
          font-size: inherit;
        }
        #iconContainer svg {
-          display: inline-block;
+          display: block;
-          height: ${this.svgSize}px;
+          height: ${this.iconSize}px;
        }
        .material-icons {
          font-family: 'Material Icons';
          font-weight: normal;
          font-style: normal;
          line-height: inherit;
          font-size: inherit;
          display: inline-block;
          line-height: inherit;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;
          /* Support for all WebKit browsers. */
          -webkit-font-smoothing: antialiased;
          /* Support for Safari and Chrome. */
          text-rendering: optimizeLegibility;
          /* Support for Firefox. */
          -moz-osx-font-smoothing: grayscale;
          /* Support for IE. */
          font-feature-settings: 'liga';
        }
      </style>
-      ${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
+      <div id="iconContainer"></div>
      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
    `;
  }
-  firstUpdated() {
+  public async updated() {
-    if (this.brandName && !this.iconName) {
+    if (!this.iconSize) {
-      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(brandIcons[this.brandName]).html[0];
+      this.iconSize = parseInt(globalThis.getComputedStyle(this).fontSize.replace(/\D/g,''));
    }
    if (this.iconFA) {
      this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
        ? icon(faIcons[this.iconFA]).html[0]
        : 'icon not found';
    }
  }
 }
--- a/ts_web/elements/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox.ts
@ -1,19 +1,53 @@
-import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+import {
  customElement,
  DeesElement,
  TemplateResult,
  property,
  html,
  css,
  cssManager
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-input-checkbox': DeesInputCheckbox;
  }
 }
@customElement('dees-input-checkbox')
-export class DeesInputCheckbox extends LitElement {
+export class DeesInputCheckbox extends DeesElement {
  // STATIC
  public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
-  @property()
+  // INSTANCE
  public changeSubject = new domtools.rxjs.Subject();
  @property({
    type: String,
  })
  public key: string;
-  @property()
+  @property({
    type: String,
  })
  public label: string = 'Label';
-  @property()
+  @property({
    type: Boolean,
  })
  public value: boolean = false;
  @property({
    type: Boolean,
  })
  public required: boolean = false;
  @property({
    type: Boolean
  })
  public disabled: boolean = false;
  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
@ -33,11 +67,11 @@ export class DeesInputCheckbox extends LitElement {
          display: grid;
          grid-template-columns: 25px auto;
          padding: 5px 0px;
-          color: #ccc;
+          color: ${this.goBright ? '#333' : '#ccc'};
        }
        .maincontainer:hover {
-          color: #fff;
+          ${this.goBright ? '#000' : '#ccc'};
        }
        .label {
@ -55,12 +89,12 @@ export class DeesInputCheckbox extends LitElement {
        .checkbox {
          transition: all 0.1s;
          box-sizing: border-box;
-          border: 1px solid #999;
+          border: 1px solid ${this.goBright ? '#CCC' : '#999'};
          border-radius: 2px;
          height: 24px;
          width: 24px;
          display: inline-block;
-          background: #222;
+          background: ${this.goBright ? '#fafafa' : '#222'};
        }
        .checkbox.selected {
@ -68,7 +102,12 @@ export class DeesInputCheckbox extends LitElement {
          border: 1px solid #039BE5;
        }
-        .checkmark {
+        .checkbox.disabled {
          background: none;
          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
        }
        .checkbox .checkmark {
          display: inline-block;
          width: 22px;
          height: 22px;
@ -77,16 +116,16 @@ export class DeesInputCheckbox extends LitElement {
          transform: rotate(45deg);
        }
-        .checkmark_stem {
+        .checkbox .checkmark_stem {
          position: absolute;
          width: 3px;
          height: 9px;
-          background-color: #ccc;
+          background-color: #fff;
          left: 11px;
          top: 6px;
        }
-        .checkmark_kick {
+        .checkbox .checkmark_kick {
          position: absolute;
          width: 3px;
          height: 3px;
@ -95,12 +134,16 @@ export class DeesInputCheckbox extends LitElement {
          top: 12px;
        }
        .checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
          background-color: ${cssManager.bdTheme('#333', '#fff')};
        }
        img {
          padding: 4px;
        }
      </style>
      <div class="maincontainer" @click="${this.toggleSelected}">
-        <div class="checkbox ${this.value ? 'selected' : ''}">
+        <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
          ${this.value
            ? html`
                <span class="checkmark">
@ -116,6 +159,9 @@ export class DeesInputCheckbox extends LitElement {
  }
  public async toggleSelected() {
    if (this.disabled) {
      return;
    }
    this.value = !this.value;
    this.dispatchEvent(
      new CustomEvent('newValue', {
@ -123,5 +169,6 @@ export class DeesInputCheckbox extends LitElement {
        bubbles: true,
      })
    );
    this.changeSubject.next(this);
  }
 }
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@ -1,9 +1,27 @@
-import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, property, html, css, cssManager } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-input-dropdown': DeesInputDropdown;
  }
 }
@customElement('dees-input-dropdown')
-export class DeesInputDropdown extends LitElement {
+export class DeesInputDropdown extends DeesElement {
  public static demo = () => html`
    <dees-input-dropdown
      .options=${[
        {option: 'option 1', key: 'option1'},
        {option: 'option 2', key: 'option2'},
        {option: 'option 3', key: 'option3'}
      ]}
    ></dees-input-dropdown>
  `
  // INSTANCE
  public changeSubject = new domtools.rxjs.Subject();
  @property()
  public label: string = 'Label';
@ -20,11 +38,20 @@ export class DeesInputDropdown extends LitElement {
    payload: null
  };
-  public render(): TemplateResult {
+  @property({
-    return html`
+    type: Boolean
-      ${domtools.elementBasic.styles}
+  })
-      <style>
+  public required: boolean = false;
-        * {
+
  @property({
    type: Boolean
  })
  public disabled: boolean = false;
  public static styles = [
    cssManager.defaultStyles,
    css`
      * {
          box-sizing: border-box;
        }
@ -32,6 +59,7 @@ export class DeesInputDropdown extends LitElement {
          position: relative;
          display: block;
          height: 40px;
          color: ${cssManager.bdTheme('#222', '#fff')};
        }
        .maincontainer {
@ -48,41 +76,68 @@ export class DeesInputDropdown extends LitElement {
          position: relative;
          max-width: 420px;
          height: 40px;
-          border: 1px solid #CCC;
+          line-height: 40px;
-          padding: 12px;
+          padding: 0px 8px;
          z-index: 0px;
          background: ${cssManager.bdTheme('#ffffff', '#333333')};
          box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
          border-radius: 3px;
          border-top: 1px solid #CCCCCC00;
          border-bottom: 1px solid #66666600;
        }
        .selectedBox.show {
          border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
          border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
        }
        .selectionBox {
          will-change:transform;
          pointer-events: none;
          cursor: pointer;
          transition: all 0.2s ease;
          opacity: 0;
          position: relative;
-          background: #ffffff;
+          background: ${cssManager.bdTheme('#ffffff', '#222222')};
          max-width: 420px;
          box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
-          height: 40px;
+          min-height: 40px;
          margin-top: -40px;
          z-index: 100;
          border-radius: 3px;
          padding: 4px;
          transform: scale(0.99,0.99);
        }
        .selectionBox.show {
          pointer-events: all;
          opacity: 1;
-          min-height: 160px;
+          transform: scale(1,1);
        }
        .option {
-          padding: 12px;
+          transition: all 0.1s;
          line-height: 40px;
          padding: 0px 4px;
          border-radius: 3px;
        }
        .option:hover {
-          background: #fafafa;
+          color: #fff;
          padding-left: 8px;
          background: #0277bd;
        }
    `
  ]
  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
      </style>
      <div class="maincontainer">
-        <div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}">
+        <div class="selectedBox show" @click="${event => {this.toggleSelectionBox();}}">
          ${this.selectedOption?.option}
        </div>
        <div class="selectionBox">
@ -108,9 +163,11 @@ export class DeesInputDropdown extends LitElement {
      bubbles: true
    }));
    this.toggleSelectionBox();
    this.changeSubject.next(this);
  }
  public toggleSelectionBox() {
    this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
    this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
  }
 }
--- a/ts_web/elements/dees-input-fileupload.ts
+++ b/ts_web/elements/dees-input-fileupload.ts
@ -0,0 +1,194 @@
 import {
  customElement,
  DeesElement,
  TemplateResult,
  property,
  html,
  css,
  unsafeCSS,
  cssManager,
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-input-fileupload': DeesInputFileupload;
  }
 }
@customElement('dees-input-fileupload')
 export class DeesInputFileupload extends DeesElement {
  public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
  // INSTANCE
  public changeSubject = new domtools.rxjs.Subject();
  @property({
    type: String,
  })
  public label: string = null;
  @property({
    type: String,
  })
  public key: string;
  @property({
    attribute: false,
  })
  public value: File[] = [];
  @property()
  public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
  @property({
    type: Boolean,
  })
  public required: boolean = false;
  @property({
    type: Boolean,
  })
  public disabled: boolean = false;
  @property({
    type: String,
  })
  public buttonText: string = 'Upload File...';
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        position: relative;
        display: grid;
        margin: 10px 0px;
        margin-bottom: 24px;
      }
      .hidden {
        display: none;
      }
      .maincontainer {
        color: ${cssManager.bdTheme('#333', '#ccc')};
      }
      .label {
        font-size: 14px;
        margin-bottom: 5px;
      }
      .uploadButton {
        position: relative;
        cursor: pointer;
        padding: 8px;
        max-width: 600px;
        background: ${cssManager.bdTheme('#fafafa', '#333333')};
        border-radius: 3px;
        text-align: center;
      }
      .uploadButton:hover {
        color: #fff;
        background: rgb(3, 155, 229);
      }
      .uploadButton::after {
        top: 2px;
        right: 2px;
        left: 2px;
        bottom: 2px;
        transform: scale3d(0.98, 0.9, 1);
        position: absolute;
        content: '';
        display: block;
        border: 2px dashed rgba(255, 255, 255, 0);
        transition: all 0.2s;
      }
      .uploadButton.dragOver::after {
        transform: scale3d(1, 1, 1);
        border: 2px dashed rgba(255, 255, 255, 0.3);
      }
      .uploadCandidate {
        text-align: left;
        border-bottom: 1px dashed #444;
        color: ${cssManager.bdTheme('#666', '#ccc')};
        padding: 8px;
        font-family: 'Inter';
      }
      .uploadButton:hover .uploadCandidate {
        color: ${cssManager.bdTheme('#fff', '#fff')};
        border-bottom: 1px dashed #fff;
      }
      .uploadCandidate:last-child {
        margin-bottom: 8px;
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
      <div class="hidden">
        <input type="file"></div>
      </div>
      <div class="maincontainer">
        ${this.label ? html`<div class="label">${this.label}</div>` : null}
        ${this.value.map((fileArg) => html` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}" @click=${this.openFileSelector}>
          ${this.buttonText}
        </div>
      </div>
    `;
  }
  public async openFileSelector() {
    const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
    inputFile.click();
  }
  public async updateValue(eventArg: Event) {
    const target: any = eventArg.target;
    this.value = target.value;
    this.changeSubject.next(this);
  }
  public firstUpdated() {
    const dropArea = this.shadowRoot.querySelector('.uploadButton');
    const handlerFunction = (eventArg: DragEvent) => {
      eventArg.preventDefault();
      switch (eventArg.type) {
        case 'dragover':
          this.state = 'dragOver';
          this.buttonText = 'release to upload file...';
          break;
        case 'dragleave':
          this.state = 'idle';
          this.buttonText = 'Upload File...';
          break;
        case 'drop':
          this.state = 'idle';
          this.buttonText = 'Upload more files...';
      }
      console.log(eventArg);
      for (const file of Array.from(eventArg.dataTransfer.files)) {
        this.value.push(file);
        this.requestUpdate();
      }
      console.log(`Got ${this.value.length} files!`);
    };
    dropArea.addEventListener('dragenter', handlerFunction, false);
    dropArea.addEventListener('dragleave', handlerFunction, false);
    dropArea.addEventListener('dragover', handlerFunction, false);
    dropArea.addEventListener('drop', handlerFunction, false);
  }
 }
--- a/ts_web/elements/dees-input-quantityselector.ts
+++ b/ts_web/elements/dees-input-quantityselector.ts
@ -1,10 +1,19 @@
-import { customElement, property, html, TemplateResult, LitElement } from 'lit-element';
+import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-input-quantityselector': DeesInputQuantitySelector;
  }
 }
@customElement('dees-input-quantityselector')
-export class DeesInputQuantitySelector extends LitElement {
+export class DeesInputQuantitySelector extends DeesElement {
  public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
  // INSTANCE
  public changeSubject = new domtools.rxjs.Subject();
  @property()
  public key: string;
@ -13,6 +22,20 @@ export class DeesInputQuantitySelector extends LitElement {
  })
  public value: number = 1;
  @property({
    type: Boolean,
  })
  public required: boolean = false;
  @property({
    type: Boolean
  })
  public disabled: boolean = false;
  constructor() {
    super();
  }
  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
@ -32,8 +55,14 @@ export class DeesInputQuantitySelector extends LitElement {
          line-height: 40px;
          padding: 0px;
          min-width: 100px;
-          color: #CCC;
+          color: ${this.goBright ? '#666' : '#CCC'};
-          border: 1px solid #CCC;
+          border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
          border-radius: 4px;
        }
        .mainContainer:hover {
          color: ${this.goBright ? '#333' : '#fff'};
          border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
        }
        .minus {
@ -57,10 +86,7 @@ export class DeesInputQuantitySelector extends LitElement {
          text-align: center;
        }
-        .mainContainer:hover {
+        
          color: #fff;
          border: 1px solid #fff;
        }
      </style>
      <div class="maincontainer">
@ -73,6 +99,7 @@ export class DeesInputQuantitySelector extends LitElement {
  public increase () {
    this.value++;
    this.changeSubject.next(this);
  }
  public decrease () {
@ -81,5 +108,6 @@ export class DeesInputQuantitySelector extends LitElement {
    } else {
      // nothing to do here
    }
    this.changeSubject.next(this);
  }
 }
--- a/ts_web/elements/dees-input-radio.ts
+++ b/ts_web/elements/dees-input-radio.ts
@ -1,9 +1,19 @@
-import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-input-radio': DeesInputRadio;
  }
 }
@customElement('dees-input-radio')
-export class DeesInputRadio extends LitElement {
+export class DeesInputRadio extends DeesElement {
  public static demo = () => html`<dees-input-radio></dees-input-radio>`;
  // INSTANCE
  public changeSubject = new domtools.rxjs.Subject();
  @property()
  public key: string;
@ -13,6 +23,20 @@ export class DeesInputRadio extends LitElement {
  @property()
  public value: boolean = false;
  @property({
    type: Boolean,
  })
  public required: boolean = false;
  @property({
    type: Boolean
  })
  public disabled: boolean = false;
  constructor() {
    super();
  }
  public render(): TemplateResult {
    return html `
      <style>
@ -96,5 +120,6 @@ export class DeesInputRadio extends LitElement {
      detail: this.value,
      bubbles: true
    }));
    this.changeSubject.next(this);
  }
 }
--- a/ts_web/elements/dees-input-text.ts
+++ b/ts_web/elements/dees-input-text.ts
@ -1,17 +1,59 @@
-import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-input-text': DeesInputText;
  }
 }
@customElement('dees-input-text')
-export class DeesInputText extends LitElement {
+export class DeesInputText extends DeesElement {
-  public static demo = () => html`<dees-input-text></dees-input-text>`;
+  public static demo = () => html`
    <dees-input-text .label=${'this is a label'}></dees-input-text>
    <dees-input-text .isPasswordBool=${true}></dees-input-text>
  `;
-  @property()
+  // INSTANCE
-  public label: string = 'Label';
+  public changeSubject = new domtools.rxjs.Subject<DeesInputText>();
  public valueChangeSubject = new domtools.rxjs.Subject<string>();
-  @property()
+  @property({
    type: String
  })
  public label: string;
  @property({
    type: String
  })
  public key: string;
-  @property()
+  @property({
-  public value: string;
+    type: String
  })
  public value: string = '';
  @property({
    type: Boolean
  })
  public required: boolean = false;
  @property({
    type: Boolean
  })
  public disabled: boolean = false;
  @property({
    type: Boolean,
    reflect: true,
  })
  public isPasswordBool = false;
  @property({
    type: Boolean,
    reflect: true,
  })
  public showPasswordBool = false;
  public render(): TemplateResult {
    return html `
@ -28,7 +70,7 @@ export class DeesInputText extends LitElement {
        }
        .maincontainer {
-          color: #ccc;
+          color: ${this.goBright ? '#333' : '#ccc'};
        }
        .label {
@ -38,10 +80,11 @@ export class DeesInputText extends LitElement {
        input {
          margin-top: 5px;
-          background: #222;
+          background: ${this.goBright ? '#fafafa' : '#222'};
-          border: none;
+          border-top: ${this.goBright ? '1px solid #CCC'  : '1px solid #444'};
-          border-top: 1px solid #444;
+          border-bottom: ${this.goBright ? '1px solid #CCC' : '1px solid #333'};
-          border-bottom: 1px solid #333;
+          border-right: ${this.goBright ? '1px solid #CCC' : 'none'};
          border-left: ${this.goBright ? '1px solid #CCC' : 'none'};
          padding-left:10px;
          padding-right: 10px;
          border-radius: 2px;
@ -49,18 +92,47 @@ export class DeesInputText extends LitElement {
          line-height: 48px;
          transition: all 0.2s;
          outline: none;
          color: #ccc;
          font-size: 16px;
          font-family: ${this.isPasswordBool ? 'monospace': 'Inter'};
          letter-spacing: ${this.isPasswordBool ? '1px': 'normal'};
          color: ${this.goBright ? '#333' : '#ccc'};
        }
        input:disabled {
          background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
          color: #9b9b9e;
          cursor: default;
        }
        input:focus {
          outline: none;
          border-bottom: 1px solid #e4002b;
        }
        .showPassword {
          position: absolute;
          bottom: 8px;
          right: 10px;
          border: 1px dashed #444;
          border-radius: 7px;
          padding: 8px 0px;
          width: 40px;
        }
        .showPassword:hover {
          cursor: pointer;
          background: #333;
        }
      </style>
      <div class="maincontainer">
-        <div class="label">${this.label}</div>
+        ${this.label ? html`<div class="label">${this.label}</div>` : html``}
-        <input type="text" @input="${this.updateValue}" />
+        <input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
        ${this.isPasswordBool ? html`
          <div class="showPassword" @click=${this.togglePasswordView}>
            <dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
          </div>
        ` : html``}
      </div>
    `;
  }
@ -68,6 +140,26 @@ export class DeesInputText extends LitElement {
  public async updateValue(eventArg: Event) {
    const target: any = eventArg.target;
    this.value = target.value;
    this.changeSubject.next(this);
    this.valueChangeSubject.next(this.value);
  }
  public async freeze() {
    this.disabled = true;
  }
  public async unfreeze() {
    this.disabled = false;
  }
  public async togglePasswordView () {
    const domtools = await this.domtoolsPromise;
    this.showPasswordBool = !this.showPasswordBool;
    console.log(`this.showPasswordBool is: ${this.showPasswordBool}`)
  }
  public async focus() {
    const textInput = this.shadowRoot.querySelector('input');
    textInput.focus();
  }
 }
--- a/ts_web/elements/dees-mobilenavigation.ts
+++ b/ts_web/elements/dees-mobilenavigation.ts
@ -0,0 +1,188 @@
 import * as plugins from './plugins.js';
 import {
  cssManager,
  css,
  customElement,
  DeesElement,
  domtools,
  html,
  property,
 } from '@designestate/dees-element';
 import { DeesWindowLayer } from './dees-windowlayer.js';
@customElement('dees-mobilenavigation')
 export class DeesMobilenavigation extends DeesElement {
  // STATIC
  public static demo = () => html`
    <dees-mobilenavigation
      .menuItems="${[
        {
          name: 'hello1',
          action: async () => {},
        },
        {
          name: 'hello2',
          action: async () => {},
        },
        {
          name: 'hello3',
          action: async () => {},
        },
      ]}"
    ></dees-mobilenavigation>
  `;
  private static singletonRef: DeesMobilenavigation;
  public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
    if (!this.singletonRef) {
      this.singletonRef = new DeesMobilenavigation();
      document.body.append(this.singletonRef);
      await this.singletonRef.init();
    }
    this.singletonRef.menuItems = menuItemsArg;
    await this.singletonRef.readyDeferred.promise;
    this.singletonRef.show();
    return this.singletonRef;
  }
  // INSTANCE
  @property({
    type: Array,
  })
  public heading: string = `MENU`;
  @property({
    type: Array,
  })
  public menuItems: plugins.tsclass.website.IMenuItem[] = [];
  readyDeferred = domtools.plugins.smartpromise.defer();
  constructor() {
    super();
    /* this.init().then(() => {
      this.show();
    }); */
  }
  /**
   * inits the mobile navigation
   */
  public async init() {
    await this.updateComplete;
    this.readyDeferred.resolve();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
      }
      .main {
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        position: fixed;
        height: 100vh;
        min-width: 280px;
        transform: translateX(200px);
        color: ${cssManager.bdTheme('#333', '#fff')};
        z-index: 250;
        opacity: 0;
        padding: 16px 32px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        background: ${cssManager.bdTheme('#eeeeeb', '#000')};;
        border-left: 1px dashed #444;
        pointer-events: none;
      }
      .main.show {
        pointer-events: all;
        transform: translateX(0px);
        opacity: 1;
      }
      .menuItem {
        text-align: left;
        padding: 8px;
        margin-left: -8px;
        margin-right: -8px;
        cursor: pointer;
        border-radius: 3px;
      }
      .menuItem:hover {
        background: ${cssManager.bdTheme('#CCC', '#333')};;
      }
      .heading {
        text-align: left;
        font-size: 24px;
        padding: 8px 0px;
        font-family: Inter;
        font-weight: 300;
        border-bottom: 1px dashed #444;
        margin-top: 16px;
        margin-bottom: 16px;
      }
    `,
  ];
  public render() {
    return html`
      <div class="main">
        <div class="heading">${this.heading}</div>
        ${this.menuItems.map((menuItem) => {
          return html`
            <div
              class="menuItem"
              @click="${() => {
                this.hide();
                menuItem.action();
              }}"
            >
              ${menuItem.name}
            </div>
          `;
        })}
      </div>
    `;
  }
  private windowLayer: DeesWindowLayer;
  /**
   * inits the show
   */
  public async show() {
    const domtools = await this.domtoolsPromise;
    const main = this.shadowRoot.querySelector('.main');
    if (!this.windowLayer) {
      this.windowLayer = new DeesWindowLayer();
      this.windowLayer.addEventListener('click', () => {
        this.hide();
      });
    }
    document.body.append(this.windowLayer);
    await domtools.convenience.smartdelay.delayFor(0);
    this.windowLayer.show();
    await domtools.convenience.smartdelay.delayFor(0);
    main.classList.add('show');
  }
  /**
   * inits the hide function
   */
  public async hide() {
    const domtools = await this.domtoolsPromise;
    const main = this.shadowRoot.querySelector('.main');
    main.classList.remove('show');
    this.windowLayer.hide();
  }
  async disconnectedCallback() {
    document.body.removeChild(this.windowLayer);
  }
 }
--- a/ts_web/elements/dees-pdf.ts
+++ b/ts_web/elements/dees-pdf.ts
@ -0,0 +1,119 @@
 import { DeesElement, property, html, customElement, domtools, TemplateResult } from '@designestate/dees-element';
 import { Deferred } from '@pushrocks/smartpromise';
 import type pdfjsTypes from 'pdfjs-dist';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-pdf': DeesPdf;
  }
 }
@customElement('dees-pdf')
 export class DeesPdf extends DeesElement {
  // DEMO
  public static demo = () => html` <dees-pdf></dees-pdf> `;
  // INSTANCE
  @property()
  public pdfUrl: string =
    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
  constructor() {
    super();
    // you have access to all kinds of things through this.
    // this.setAttribute('gotIt','true');
  }
  public render(): TemplateResult {
    return html`
      <style>
        :host {
          font-family: 'Inter', sans-serif;
          display: block;
          box-sizing: border-box;
          max-width: 800px;
        }
        :host([hidden]) {
          display: none;
        }
        #pdfcanvas {
          box-shadow: 0px 0px 5px #ccc;
          width: 100%;
        }
      </style>
      <canvas id="pdfcanvas" .height=${0} .width=${0}></canvas>
    `;
  }
  public static pdfJsReady: Promise<any>;
  public static pdfjsLib: typeof pdfjsTypes;
  public async connectedCallback() {
    super.connectedCallback();
    if (!DeesPdf.pdfJsReady) {
      const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
      DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
      const loadDeferred = domtools.plugins.smartpromise.defer();
      const script = document.createElement('script');
      script.addEventListener('load', () => {
        console.log('pdf.js loaded!');
        loadDeferred.resolve();
      });
      script.src = 'https:////mozilla.github.io/pdf.js/build/pdf.js';
      document.getElementsByTagName('head')[0].appendChild(script);
      // The workerSrc property shall be specified.
      await loadDeferred.promise;
      DeesPdf.pdfjsLib = window['pdfjs-dist/build/pdf'];
      DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
      pdfJsReadyDeferred.resolve();
    }
    await DeesPdf.pdfJsReady;
    this.displayContent();
  }
  public async displayContent() {
    await DeesPdf.pdfJsReady;
    // Asynchronous download of PDF
    const loadingTask = DeesPdf.pdfjsLib.getDocument(this.pdfUrl);
    loadingTask.promise.then(
      (pdf) => {
        console.log('PDF loaded');
        // Fetch the first page
        const pageNumber = 1;
        pdf.getPage(pageNumber).then((page) => {
          console.log('Page loaded');
          const scale = 10;
          const viewport = page.getViewport({ scale: scale });
          // Prepare canvas using PDF page dimensions
          const canvas: any = this.shadowRoot.querySelector('#pdfcanvas');
          const context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          // Render PDF page into canvas context
          const renderContext = {
            canvasContext: context,
            viewport: viewport,
          };
          const renderTask = page.render(renderContext);
          renderTask.promise.then(function () {
            console.log('Page rendered');
          });
        });
      },
      (reason) => {
        // PDF loading error
        console.error(reason);
      }
    );
  }
 }
--- a/ts_web/elements/dees-preview.ts
+++ b/ts_web/elements/dees-preview.ts
--- a/ts_web/elements/dees-search.ts
+++ b/ts_web/elements/dees-search.ts
--- a/ts_web/elements/dees-searchbox.ts
+++ b/ts_web/elements/dees-searchbox.ts
--- a/ts_web/elements/dees-speechbubble.ts
+++ b/ts_web/elements/dees-speechbubble.ts
@ -0,0 +1,156 @@
 import {
  customElement,
  html,
  DeesElement,
  property,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS,
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-speechbubble': DeesSpeechbubble;
  }
 }
@customElement('dees-speechbubble')
 export class DeesSpeechbubble extends DeesElement {
  public static demo = () => html` <dees-speechbubble></dees-speechbubble> `;
  @property()
  public text: string;
  @property({
    type: Boolean,
  })
  public disabled = false;
  @property({
    type: Boolean,
  })
  public isHidden = false;
  @property({
    type: String,
  })
  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        position: relative;
        display: block;
        box-sizing: border-box;
        color: ${cssManager.bdTheme('#333', '#fff')};
        cursor: pointer;
        user-select: none;
      }
      :host([hidden]) {
        display: none;
      }
      .maincontainer {
        will-change: transform;
        transition: transform 0.2s;
        transform: translateX(0px);
        position: relative;
        transition: all 0.2s;
        margin-left: 0px;
      }
      .maincontainer:hover {
        transform: translateX(3px);
      }
      .arrow {
        position: absolute;
        transform: rotate(45deg);
        background: ${cssManager.bdTheme('#fff', '#333')};
        height: 15px;
        width: 15px;
        left: 4px;
        top: 5px;
        border-radius: 2px;
      }
      .speechbubble {
        background: ${cssManager.bdTheme('#fff', '#333')};
        padding: 0px 10px;
        border-radius: 3px;
        position: absolute;
        line-height: 25px;
        font-size: 12px;
        top: 0px;
        left: 8px;
      }
      .wave {
        animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
        animation-duration: 2.5s; /* Change to speed up or slow down */
        animation-iteration-count: infinite; /* Never stop waving :) */
        transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
        display: inline-block;
      }
      @keyframes wave-animation {
        0% {
          transform: rotate(0deg);
        }
        10% {
          transform: rotate(14deg);
        } /* The following five values can be played with to make the waving more or less extreme */
        20% {
          transform: rotate(-8deg);
        }
        30% {
          transform: rotate(14deg);
        }
        40% {
          transform: rotate(-4deg);
        }
        50% {
          transform: rotate(10deg);
        }
        60% {
          transform: rotate(0deg);
        } /* Reset for the last half to pause */
        100% {
          transform: rotate(0deg);
        }
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
      <div class="maincontainer" @click=${this.handleClick}>
        <div class="arrow"></div>
        <div class="speechbubble"><span class="wave">👋</span> We build with launch.sh, and you can too.</div>
      </div>
    `;
  }
  public async handleClick() {
    if (this.disabled) {
      return;
    }
    globalThis.location.href = "https://launch.sh"
  }
  public async firstUpdated() {
    if (!this.textContent) {
      this.textContent = 'Button';
      this.performUpdate();
    }
  }
 }
--- a/ts_web/elements/dees-spinner.ts
+++ b/ts_web/elements/dees-spinner.ts
@ -0,0 +1,130 @@
 import {
  customElement,
  html,
  DeesElement,
  property,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS,
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-spinner': DeesSpinner;
  }
 }
@customElement('dees-spinner')
 export class DeesSpinner extends DeesElement {
  public static demo = () => html`
    <dees-spinner></dees-spinner>
    <dees-spinner status="success"></dees-spinner>
    <dees-spinner status="error"></dees-spinner>
    <dees-spinner size=${64} status="success"></dees-spinner>
    <dees-spinner .size=${64} status="error"></dees-spinner>
  `;
  @property({
    type: Number,
  })
  public size = 20;
  @property({
    type: String,
  })
  public bnw: boolean = false;
  @property()
  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
      }
      #loading {
        position: relative;
        transition: none;
        display: flex;
        justify-content: center;
        align-content: center;
        background: #8bc34a00;
        border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.3)')};
        border-radius: 50%;
        border-top-color: ${cssManager.bdTheme('#333', '#fff')};
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
      }
      #loading.success {
        border: none;
        border-radius: 50%;
        animation: none;
        -webkit-animation: none;
      }
      #loading.error {
        border: none;
        border-radius: 50%;
        animation: none;
        -webkit-animation: none;
      }
      @keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      @-webkit-keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      dees-icon {
        position: absolute;
        height: 100%;
        width: 100%;
      }
    `,
  ];
  render() {
    return html`
      <style>
        #loading {
          width: ${this.size}px;
          height: ${this.size}px;
        }
        #loading.success {
          color: ${cssManager.bdTheme(this.bnw ? '#333': `#8bc34a`, this.bnw ? '#fff' : `#8bc34a`)};
        }
        #loading.error {
          color: ${cssManager.bdTheme(this.bnw ? '#333': `#e64a19`, this.bnw ? '#fff' : `#e64a19`)};
        }
        dees-icon {
          font-size: ${this.size}px;
        }
      </style>
      <div class="${this.status}" id="loading">
        ${(() => {
          if (this.status === 'success') {
            return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'circleCheck' as any}></dees-icon>`;
          } else if (this.status === 'error') {
            return  html`<dees-icon .iconFA=${'circleXmark' as any}></dees-icon>`;
          }
        })()}
      </div>
    `;
  }
 }
--- a/ts_web/elements/dees-stepper.ts
+++ b/ts_web/elements/dees-stepper.ts
@ -0,0 +1,257 @@
 import {
  DeesElement,
  customElement,
  html,
  css,
  unsafeCSS,
  cssManager,
  property,
  TemplateResult,
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 export interface IStep {
  title: string;
  content: TemplateResult;
  validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
  onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
  validationFuncCalled?: boolean;
 }
 declare global {
  interface HTMLElementTagNameMap {
    'dees-stepper': DeesStepper;
  }
 }
@customElement('dees-stepper')
 export class DeesStepper extends DeesElement {
  public static demo = () =>
    html`
      <dees-stepper
        .steps=${[
          {
            title: 'Whats your name?',
            content: html`
              <dees-form>
                <dees-input-text
                  key="email"
                  label="Your Email"
                  value="hello@something.com"
                  disabled
                ></dees-input-text>
                <dees-input-text key="firstName" required label="Vorname"></dees-input-text>
                <dees-input-text key="lastName" required label="Nachname"></dees-input-text>
                <dees-form-submit>Next</dees-form-submit>
              </dees-form>
            `,
            validationFunc: async (stepperArg, elementArg) => {
              const deesForm = elementArg.querySelector('dees-form');
              deesForm.addEventListener('formData', eventArg => {
                stepperArg.goNext();
              })
            }
          },
          {
            title: 'Whats your mobile number?',
            content: html``,
          }
        ] as IStep[]}
      ></dees-stepper>
    `;
  @property({
    type: Array,
  })
  public steps: IStep[] = [];
  @property({
    type: Object,
  })
  public selectedStep: IStep;
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .stepperContainer {
        position: absolute;
        width: 100%;
        height: 100%;
        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
        overflow: hidden;
      }
      .step {
        position: relative;
        pointer-events: none;
        overflow: hidden;
        transition: all 0.7s ease-in-out;
        max-width: 500px;
        min-height: 300px;
        border-radius: 3px;
        background: ${cssManager.bdTheme('#ffffff', '#181818')};
        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
        color: ${cssManager.bdTheme('#333', '#fff')};
        margin: auto;
        margin-bottom: 20px;
        filter: opacity(0.5) grayscale(1);
        box-shadow: 0px 0px 3px #00000010;
        user-select: none;
      }
      .step.selected {
        border-top: 1px solid #e4002b;
        pointer-events: all;
        filter: opacity(1) grayscale(0);
        box-shadow: 0px 0px 5px #00000010;
        user-select: auto;
      }
      .step.hiddenStep {
        filter: opacity(0);
      }
      .step:last-child {
        margin-bottom: 100vh;
      }
      .step .stepCounter {
        position: absolute;
        top: 0px;
        right: 0px;
        padding: 10px 15px;
        font-size: 12px;
        border-bottom-left-radius: 3px;
        background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
      }
      .step .goBack {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 10px 15px;
        font-size: 12px;
        border-bottom-right-radius: 3px;
        background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
        cursor: pointer;
      }
      .step .goBack:hover {
        background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
      }
      .step .title {
        text-align: center;
        padding-top: 50px;
        font-family: Inter;
        font-size: 25px;
        font-weight: 300;
      }
      .step .content {
        padding: 20px;
      }
    `,
  ];
  public render() {
    return html`
      <div class="stepperContainer">
        ${this.steps.map(
          (stepArg) =>
            html`<div
              class="step ${stepArg === this.selectedStep
                ? 'selected'
                : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep)
                ? 'hiddenStep'
                : ''}"
            >
              ${this.getIndexOfStep(stepArg) > 0
                ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>`
                : ``}
              <div class="stepCounter">
                Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
                ${this.steps.length}
              </div>
              <div class="title">${stepArg.title}</div>
              <div class="content">${stepArg.content}</div>
            </div> `
        )}
      </div>
    `;
  }
  public getIndexOfStep = (stepArg: IStep): number => {
    return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
  };
  public firstUpdated() {
    this.selectedStep = this.steps[0];
    this.setScrollStatus();
  }
  public updated() {
    this.setScrollStatus();
  }
  public scroller: typeof domtools.plugins.SweetScroll.prototype;
  public async setScrollStatus() {
    await domtools.plugins.smartdelay.delayFor(50);
    const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
    const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
    const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
    if (!stepperContainer.style.paddingTop) {
      stepperContainer.style.paddingTop = `${
        stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
      }px`;
    }
    console.log('Setting scroll status');
    console.log(selectedStepElement);
    const scrollPosition =
      selectedStepElement.offsetTop -
      stepperContainer.offsetHeight / 2 +
      selectedStepElement.offsetHeight / 2;
    console.log(scrollPosition);
    const domtoolsInstance = await domtools.DomTools.setupDomTools();
    if (!this.scroller) {
      this.scroller = new domtools.plugins.SweetScroll(
        {
          vertical: true,
          horizontal: false,
          easing: 'easeInOutExpo',
          duration: 700,
        },
        stepperContainer
      );
    }
    if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
      this.selectedStep.validationFuncCalled = true;
      await this.selectedStep.validationFunc(this, selectedStepElement);
    }
    this.scroller.to(scrollPosition);
  }
  public async goBack() {
    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
    this.selectedStep = this.steps[currentIndex - 1];
    await this.domtoolsPromise;
    await this.domtools.convenience.smartdelay.delayFor(100);
    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
  }
  public goNext() {
    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
    this.selectedStep = this.steps[currentIndex + 1];
  }
 }
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@ -0,0 +1,359 @@
 import {
  customElement,
  html,
  DeesElement,
  property,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS,
  state,
 } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-table': DeesTable<any>;
  }
 }
 export interface IDataAction<T = any> {
  name: string;
  iconName: string;
  useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
  actionFunc: (itemArg: T) => Promise<any>;
 }
@customElement('dees-table')
 export class DeesTable<T> extends DeesElement {
  public static demo = () => html`
    <style>
      .demoWrapper {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 60px;
        background: #000000;
      }
    </style>
    <div class="demoWrapper">
      <dees-table
        heading1="Current Account Statement"
        heading2="Bunq - Payment Account 2 - April 2021"
        .data=${[
          {
            date: '2021-04-01',
            amount: '2464.65 €',
            description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
          },
          {
            date: '2021-04-02',
            amount: '165.65 €',
            description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
          },
          {
            date: '2021-04-03',
            amount: '2999,00 €',
            description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
          },
          {
            date: '2021-04-01',
            amount: '2464.65 €',
            description: 'Office-Supplies - STAPLES BREMEN',
          },
          {
            date: '2021-04-01',
            amount: '2464.65 €',
            description: 'Office-Supplies - STAPLES BREMEN',
          },
        ]}
        .dataActions="${[{
          name: 'upload',
          iconName: 'upload',
          useTableBehaviour: 'upload',
          actionFunc: async (itemArg: any) => {
          },
        },{
          name: 'visibility',
          iconName: 'visibility',
          useTableBehaviour: 'preview',
          actionFunc: async (itemArg: any) => {
          },
        }] as IDataAction[]}"
        >This is a slotted Text</dees-table>
    </div>
  `;
  // INSTANCE
  @property({
    type: String,
  })
  public heading1: string = 'heading 1';
  @property({
    type: String,
  })
  public heading2: string = 'heading 2';
  @property({
    type: Array,
  })
  public data: T[] = [];
  @property({
    type: Array,
  })
  public dataActions: IDataAction[] = [];
  @property({
    type: Object,
  })
  public selectedDataRow: T;
  @property({
    type: String,
  })
  public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
  @property({
    type: String,
  })
  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
  public files: File[] = [];
  public fileWeakMap = new WeakMap();
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      .mainbox {
        color: ${cssManager.bdTheme('#333', '#fff')};
        font-family: 'Inter';
        font-weight: 400;
        font-size: 16px;
        padding: 16px;
        display: block;
        width: 100%;
        min-height: 50px;
        background: ${cssManager.bdTheme('#ffffff', '#333333')};
        border-radius: 3px;
        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
        overflow-x: auto;
      }
      .headingSeparation {
        margin-top: 7px;
        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
      }
      table,
      .noDataSet {
        margin-top: 16px;
        color: ${cssManager.bdTheme('#333', '#fff')};
        border-collapse: collapse;
        width: 100%;
      }
      .noDataSet {
        text-align: center;
      }
      tr {
        border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
        text-align: left;
      }
      tr:last-child {
        border-bottom: none;
        text-align: left;
      }
      tr:hover {
        cursor: pointer;
      }
      tr:hover .innerCellContainer {
        background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
      }
      tr:first-child:hover {
        cursor: auto;
      }
      tr:first-child:hover .innerCellContainer {
        background: none;
      }
      tr.selected .innerCellContainer {
        background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
      }
      th {
        text-transform: uppercase;
      }
      th,
      td {
        padding: 3px 0px;
        border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
      }
      .innerCellContainer {
        padding: 6px 8px;
      }
      th:first-child .innerCellContainer,
      td:first-child .innerCellContainer {
        padding-left: 0px;
      }
      th:last-child .innerCellContainer,
      td:last-child .innerCellContainer {
        padding-right: 0px;
      }
      th:last-child,
      td:last-child {
        border-right: none;
      }
      .action {
        margin: -8px 0px;
        padding: 8px;
        line-height: 16px;
        display: inline-block;
      }
      .action:first-child {
        margin-left: -8px;
        width: min-content;
      }
      .action:hover {
        background: ${cssManager.bdTheme('#CCC', '#111')};
      }
      .tableStatistics {
        padding: 4px 16px;
        font-size: 12px;
        color: ${cssManager.bdTheme('#111', '#ffffff90')};
        background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
        margin: 16px -16px -16px -16px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        <!-- the heading part -->
        <div>${this.heading1}</div>
        <div>${this.heading2}</div>
        <div class="headingSeparation"></div>
        <!-- the actual table -->
        <style></style>
        ${this.data.length > 0
          ? (() => {
              const headings: string[] = Object.keys(this.data[0]);
              return html`
                <table>
                  <tr>
                    ${headings.map(
                      (headingArg) => html`
                        <th>
                          <div class="innerCellContainer">${headingArg}</div>
                        </th>
                      `
                    )}
                    ${(() => {
                      if (this.dataActions && this.dataActions.length > 0) {
                        return html`
                          <th>
                            <div class="innerCellContainer">Actions</div>
                          </th>
                        `;
                      }
                    })()}
                  </tr>
                  ${this.data.map(
                    (itemArg) => html`
                      <tr
                        @click=${() => {
                          this.selectedDataRow = itemArg;
                        }}
                        @dragenter=${async (eventArg: DragEvent) => {
                          console.log((eventArg.target as HTMLElement).tagName)
                          console.log('dragenter');
                          eventArg.preventDefault();
                          eventArg.stopPropagation();
                          (eventArg.target as HTMLElement).parentElement.style.background = '#800000';
                        }}
                        @dragleave=${async (eventArg: DragEvent) => {
                          console.log((eventArg.target as HTMLElement).tagName)
                          console.log('dragleave');
                          eventArg.preventDefault();
                          eventArg.stopPropagation();
                          (eventArg.target as HTMLElement).parentElement.style.background = 'none';
                        }}
                        @dragover=${async (eventArg: DragEvent) => {
                          eventArg.preventDefault();
                        }}
                        @drop=${async (eventArg: DragEvent) => {
                          eventArg.preventDefault();
                          const newFiles = []
                          for (const file of Array.from(eventArg.dataTransfer.files)) {
                            this.files.push(file);
                            newFiles.push(file);
                            this.requestUpdate();
                          }
                          const result: File[] = this.fileWeakMap.get(itemArg as object);
                          if (!result) {
                            this.fileWeakMap.set(itemArg as object, newFiles)
                          } else {
                            result.push(...newFiles);
                          }
                        }}
                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
                      >
                        ${headings.map(
                          (headingArg) => html`
                            <td>
                              <div class="innerCellContainer">${itemArg[headingArg]}</div>
                            </td>
                          `
                        )}
                        ${(() => {
                          if (this.dataActions && this.dataActions.length > 0) {
                            return html`
                              <td>
                                <div class="innerCellContainer">
                                  ${(() => {
                                    const actions: TemplateResult[] = [];
                                    for (const action of this.dataActions) {
                                      actions.push(html`<div class="action">${action.iconName ? html`
                                        <dees-icon .iconName=${'upload_file'}></dees-icon>
                                      ` : action.name}</div>`)
                                    }
                                    return actions;
                                  })()}
                                </div>
                              </td>
                            `;
                          }
                        })()}
                      </tr>
                    `
                  )}
                </table>
              `;
            })()
          : html` <div class="noDataSet">No data set!</div> `}
        <div class="tableStatistics">
          ${this.data.length} data rows (total) |
          ${this.selectedDataRow
            ? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected`
            : html`No row selected`}
        </div>
      </div>
    `;
  }
  public async firstUpdated() {}
 }
--- a/ts_web/elements/dees-toast.ts
+++ b/ts_web/elements/dees-toast.ts
@ -1,9 +1,15 @@
-import { customElement, LitElement, TemplateResult, html } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, html } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-toast': DeesToast;
  }
 }
@customElement('dees-toast')
-export class DeesToast extends LitElement {
+export class DeesToast extends DeesElement {
  constructor() {
    super();
--- a/ts_web/elements/dees-tooltip.ts
+++ b/ts_web/elements/dees-tooltip.ts
@ -0,0 +1 @@
 import {} from '@designestate/dees-element';
--- a/ts_web/elements/dees-updater.ts
+++ b/ts_web/elements/dees-updater.ts
@ -0,0 +1,90 @@
 import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 import './dees-windowlayer';
 import { css, cssManager } from '@designestate/dees-element';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-updater': DeesUpdater;
  }
 }
@customElement('dees-updater')
 export class DeesUpdater extends DeesElement {
  public static demo = () => html`<dees-updater></dees-updater>`;
  @property({
    type: String,
  })
  currentVersion: string;
  @property({
    type: String,
  })
  updatedVersion: string;
  constructor() {
    super();
    domtools.elementBasic.setup();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      .modalContainer {
          will-change: transform;
          position: relative;
          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
          margin: auto;
          max-width: 800px;
          border-radius: 3px;
          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
        }
        .headingContainer {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 40px 40px;
        }
        h1 {
          margin: none;
          font-size: 20px;
          color: ${cssManager.bdTheme('#333', '#fff')};
          margin-left: 20px;
          font-weight: normal;
        }
        .buttonContainer {
          display: grid;
          grid-template-columns: 50% 50%;
        }
    `
  ]
  public render(): TemplateResult {
    return html`
      <dees-windowlayer @clicked="${this.windowLayerClicked}">
        <div class="modalContainer">
          <div class="headingContainer">
            <dees-spinner .size=${60}></dees-spinner>
            <h1>Updating the application...</h1>
          </div>
          <div class="buttonContainer">
            <dees-button>More info</dees-button>
            <dees-button>Changelog</dees-button>
          </div>
        </div>
      </dees-windowlayer>>
    `;
  }
  private windowLayerClicked() {
    const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
    windowLayer.toggleVisibility();
  }
 }
--- a/ts_web/elements/dees-windowlayer.ts
+++ b/ts_web/elements/dees-windowlayer.ts
@ -0,0 +1,85 @@
 import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'dees-windowlayer': DeesWindowLayer;
  }
 }
@customElement('dees-windowlayer')
 export class DeesWindowLayer extends DeesElement {
  // STATIC
  public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
  // INSTANCE
  @property({
    type: Boolean
  })
  public visible = false;
  constructor() {
    super();
    domtools.elementBasic.setup();
  }
  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        .windowOverlay {
          transition: all 0.3s;
          will-change: transform;
          position: fixed;
          top: 0px;
          left: 0px;
          height: 100vh;
          width: 100vw;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(0, 0, 0, 0.0);
          backdrop-filter: brightness(1);
          pointer-events: none;
          z-index: 200;
        }
        .visible {
          background: rgba(0, 0, 0, 0.2);
          backdrop-filter: brightness(0.3);
          pointer-events: all;
        }
      </style>
      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
        <slot></slot>
      </div>
    `;
  }
  firstUpdated() {
    setTimeout(() => {
      this.visible = true;
    }, 100);
  }
  dispatchClicked() {
    this.dispatchEvent(new CustomEvent('clicked'));
  }
  public toggleVisibility () {
    this.visible = !this.visible;
  }
  public async show() {
    const domtools = await this.domtoolsPromise;
    await domtools.convenience.smartdelay.delayFor(0);
    this.visible = true;
  }
  public async hide() {
    const domtools = await this.domtoolsPromise;
    await domtools.convenience.smartdelay.delayFor(0);
    this.visible = false;
  }
 }
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@ -1,10 +1,22 @@
-export * from './dees-button';
+export * from './dees-button-exit.js';
-export * from './dees-form';
+export * from './dees-button.js';
-export * from './dees-form-submit';
+export * from './dees-chips.js';
-export * from './dees-icon';
+export * from './dees-contextmenu.js';
-export * from './dees-input-checkbox';
+export * from './dees-form.js';
-export * from './dees-input-dropdown';
+export * from './dees-form-submit.js';
-export * from './dees-input-quantityselector';
+export * from './dees-icon.js';
-export * from './dees-input-radio';
+export * from './dees-input-checkbox.js';
-export * from './dees-input-text';
+export * from './dees-input-dropdown.js';
-export * from './dees-toast';
+export * from './dees-input-fileupload.js';
 export * from './dees-input-quantityselector.js';
 export * from './dees-input-radio.js';
 export * from './dees-input-text.js';
 export * from './dees-mobilenavigation.js';
 export * from './dees-pdf.js';
 export * from './dees-speechbubble.js';
 export * from './dees-spinner.js';
 export * from './dees-stepper.js';
 export * from './dees-table.js';
 export * from './dees-toast.js';
 export * from './dees-updater.js';
 export * from './dees-windowlayer.js';
--- a/ts_web/elements/plugins.ts
+++ b/ts_web/elements/plugins.ts
@ -0,0 +1,5 @@
 import * as tsclass from '@tsclass/tsclass';
 export {
  tsclass
 }
--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@ -1 +1,2 @@
-export * from './elements/index';
+export * from './elements/index.js';
 export { commitinfo } from './00_commitinfo_data.js';
--- a/ts_web/themelogic/index.ts
+++ b/ts_web/themelogic/index.ts
@ -1 +0,0 @@
 export {}
--- a/ts_web/tsconfig.json
+++ b/ts_web/tsconfig.json
@ -1,16 +0,0 @@
 {
  "compilerOptions": {
    "target": "es2017",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "declaration": true,
    "inlineSources": true,
    "inlineSourceMap": true,
    "noUnusedLocals": true,
    "noFallthroughCasesInSwitch": true,
    "outDir": "dist/",
    "skipLibCheck": true,
    "experimentalDecorators": true
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,10 @@
 {
  "compilerOptions": {
    "experimentalDecorators": true,
-    "target": "ES2017",
+    "useDefineForClassFields": false,
-    "moduleResolution": "Node"
+    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "nodenext",
    "esModuleInterop": true
  }
 }
--- a/tslint.json
+++ b/tslint.json
@ -1,17 +0,0 @@
 {
  "extends": ["tslint:latest", "tslint-config-prettier"],
  "rules": {
    "semicolon": [true, "always"],
    "no-console": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "member-ordering": {
      "options":{
        "order": [
          "static-method"
        ]
      }
    }
  },
  "defaultSeverity": "warning"
 }
Author	SHA1	Message	Date
Philipp Kunz	ab0219d3e4	1.0.155	2023-03-27 23:21:27 +02:00
Philipp Kunz	7cefd9cba5	fix(core): update	2023-03-27 23:21:27 +02:00
Philipp Kunz	4cf5ca2d7f	1.0.154	2023-03-27 01:22:16 +02:00
Philipp Kunz	a9791220fb	fix(core): update	2023-03-27 01:22:15 +02:00
Philipp Kunz	4aed14c7a2	1.0.153	2023-03-25 20:56:13 +01:00
Philipp Kunz	49d1cba3fd	fix(core): update	2023-03-25 20:56:12 +01:00
Philipp Kunz	9bacca3070	1.0.152	2023-03-25 17:32:55 +01:00
Philipp Kunz	42e7ae6d6b	fix(core): update	2023-03-25 17:32:55 +01:00
Philipp Kunz	a8b244520c	1.0.151	2023-03-25 17:30:42 +01:00
Philipp Kunz	9879a2cb6a	fix(core): update	2023-03-25 17:30:41 +01:00
Philipp Kunz	e2a54c6f18	1.0.150	2023-03-09 17:08:20 +01:00
Philipp Kunz	dfd13e641a	fix(core): update	2023-03-09 17:08:19 +01:00
Philipp Kunz	2284159b72	1.0.149	2023-01-17 17:12:48 +01:00
Philipp Kunz	1de86c6bfa	fix(core): update	2023-01-17 17:12:47 +01:00
Philipp Kunz	62087a686a	1.0.148	2023-01-17 16:52:14 +01:00
Philipp Kunz	572deb990e	fix(core): update	2023-01-17 16:52:13 +01:00
Philipp Kunz	719c63a092	1.0.147	2023-01-16 11:57:25 +01:00
Philipp Kunz	9d9700214f	fix(core): update	2023-01-16 11:57:24 +01:00
Philipp Kunz	bc82e110ef	1.0.146	2023-01-16 11:51:22 +01:00
Philipp Kunz	fe15ebe82d	fix(core): update	2023-01-16 11:51:21 +01:00
Philipp Kunz	1b8577d300	1.0.145	2023-01-16 01:19:34 +01:00
Philipp Kunz	ef4cfb81d8	fix(core): update	2023-01-16 01:19:33 +01:00
Philipp Kunz	abea5942b7	1.0.144	2023-01-13 12:03:20 +01:00
Philipp Kunz	a6274e9a2d	fix(core): update	2023-01-13 12:03:19 +01:00
Philipp Kunz	8b3752f586	1.0.143	2023-01-13 11:57:47 +01:00
Philipp Kunz	c8e1d24224	fix(core): update	2023-01-13 11:57:47 +01:00
Philipp Kunz	dbd7748ac0	1.0.142	2023-01-13 11:48:00 +01:00
Philipp Kunz	68984d5702	fix(core): update	2023-01-13 11:48:00 +01:00
Philipp Kunz	5237439f88	1.0.141	2023-01-13 02:15:31 +01:00
Philipp Kunz	c3df73616f	fix(core): update	2023-01-13 02:15:30 +01:00
Philipp Kunz	a03b095d14	1.0.140	2023-01-13 01:20:29 +01:00
Philipp Kunz	9a18658e09	fix(core): update	2023-01-13 01:20:28 +01:00
Philipp Kunz	2910757e8c	1.0.139	2023-01-13 01:17:08 +01:00
Philipp Kunz	a00bacd4ff	fix(core): update	2023-01-13 01:17:08 +01:00
Philipp Kunz	01963447dd	1.0.138	2023-01-13 00:50:34 +01:00
Philipp Kunz	5d1d1ba4ba	fix(core): update	2023-01-13 00:50:34 +01:00
Philipp Kunz	7885422033	1.0.137	2023-01-13 00:46:18 +01:00
Philipp Kunz	fb48425c13	fix(core): update	2023-01-13 00:46:17 +01:00
Philipp Kunz	3792c5edf5	1.0.136	2023-01-13 00:30:56 +01:00
Philipp Kunz	2abd91ab4a	fix(core): update	2023-01-13 00:30:56 +01:00
Philipp Kunz	310910e8ee	1.0.135	2023-01-12 19:19:32 +01:00
Philipp Kunz	3301ad1556	fix(core): update	2023-01-12 19:19:31 +01:00
Philipp Kunz	0f8a7a5a7b	1.0.134	2023-01-12 18:15:00 +01:00
Philipp Kunz	f1a0c5741c	fix(core): update	2023-01-12 18:14:59 +01:00
Philipp Kunz	cbf60db9fa	1.0.133	2023-01-12 00:07:39 +01:00
Philipp Kunz	34d5bda579	fix(core): update	2023-01-12 00:07:39 +01:00
Philipp Kunz	916ba68c94	1.0.132	2023-01-11 20:55:07 +01:00
Philipp Kunz	46fc396772	fix(core): update	2023-01-11 20:55:06 +01:00
Philipp Kunz	0e77baf600	1.0.131	2023-01-11 20:52:38 +01:00
Philipp Kunz	89fd8b5080	fix(core): update	2023-01-11 20:52:37 +01:00
Philipp Kunz	884f9725b5	1.0.130	2023-01-11 18:32:05 +01:00
Philipp Kunz	48e093b1ba	fix(core): update	2023-01-11 18:32:05 +01:00
Philipp Kunz	2b3875d738	1.0.129	2023-01-11 18:15:32 +01:00
Philipp Kunz	279d1c2f3f	fix(core): update	2023-01-11 18:15:31 +01:00
Philipp Kunz	29f2839d5b	1.0.128	2023-01-11 18:09:57 +01:00
Philipp Kunz	96683b4380	fix(core): update	2023-01-11 18:09:57 +01:00
Philipp Kunz	36fbf7f29e	1.0.127	2023-01-11 17:50:38 +01:00
Philipp Kunz	67d4c216ed	fix(core): update	2023-01-11 17:50:37 +01:00
Philipp Kunz	9d51cdd480	1.0.126	2023-01-11 17:43:59 +01:00
Philipp Kunz	d6679ca41f	fix(core): update	2023-01-11 17:43:58 +01:00
Philipp Kunz	baadd1e06b	1.0.125	2023-01-11 17:19:22 +01:00
Philipp Kunz	600ab56026	fix(core): update	2023-01-11 17:19:22 +01:00
Philipp Kunz	ae40a9f541	1.0.124	2023-01-09 23:13:44 +01:00
Philipp Kunz	48f7768b96	fix(core): update	2023-01-09 23:13:44 +01:00
Philipp Kunz	de3f9fcb34	1.0.123	2023-01-09 14:19:59 +01:00
Philipp Kunz	313009d3ff	fix(core): update	2023-01-09 14:19:58 +01:00
Philipp Kunz	83ede1edea	1.0.122	2023-01-09 13:55:15 +01:00
Philipp Kunz	ec50b4b3a0	fix(core): update	2023-01-09 13:55:14 +01:00
Philipp Kunz	4fbb1caaeb	1.0.121	2023-01-07 16:48:40 +01:00
Philipp Kunz	41a2529275	fix(core): update	2023-01-07 16:48:39 +01:00
Philipp Kunz	41ff71e6b0	1.0.120	2023-01-07 16:47:02 +01:00
Philipp Kunz	2d07765c16	fix(core): update	2023-01-07 16:47:01 +01:00
Philipp Kunz	15db9fb6d9	1.0.119	2023-01-07 16:42:13 +01:00
Philipp Kunz	73d92624de	fix(core): update	2023-01-07 16:42:12 +01:00
Philipp Kunz	0d77685338	1.0.118	2023-01-07 16:32:44 +01:00
Philipp Kunz	05bbfccd22	fix(core): update	2023-01-07 16:32:43 +01:00
Philipp Kunz	5cca89de37	1.0.117	2023-01-07 16:08:11 +01:00
Philipp Kunz	ab5b7a5b89	fix(core): update	2023-01-07 16:08:10 +01:00
Philipp Kunz	253d5623c4	1.0.116	2023-01-07 15:43:38 +01:00
Philipp Kunz	1048192bfa	fix(core): update	2023-01-07 15:43:37 +01:00
Philipp Kunz	289e6d37fa	1.0.115	2023-01-07 15:24:58 +01:00
Philipp Kunz	7308c1454f	fix(core): update	2023-01-07 15:24:57 +01:00
Philipp Kunz	cfc880d7c2	1.0.114	2023-01-07 15:06:41 +01:00
Philipp Kunz	c32cff8126	fix(core): update	2023-01-07 15:06:41 +01:00
Philipp Kunz	4526c0c365	1.0.113	2023-01-07 15:05:49 +01:00
Philipp Kunz	45e7f39af0	fix(core): update	2023-01-07 15:05:48 +01:00
Philipp Kunz	26b72fbccf	1.0.112	2023-01-07 14:23:17 +01:00
Philipp Kunz	8acf3f4196	fix(core): update	2023-01-07 14:23:17 +01:00
Philipp Kunz	75c8b409cc	1.0.111	2023-01-07 14:12:19 +01:00
Philipp Kunz	6509ddb81c	fix(core): update	2023-01-07 14:12:18 +01:00
Philipp Kunz	7cc0173e3c	1.0.110	2023-01-07 14:09:46 +01:00
Philipp Kunz	f797d71e52	fix(core): update	2023-01-07 14:09:45 +01:00
Philipp Kunz	54db88e4b4	1.0.109	2023-01-07 13:41:24 +01:00
Philipp Kunz	93c73c36c8	fix(core): update	2023-01-07 13:41:24 +01:00
Philipp Kunz	9c9bd4a180	1.0.108	2023-01-07 13:27:25 +01:00
Philipp Kunz	0a54de3e59	fix(core): update	2023-01-07 13:27:24 +01:00
Philipp Kunz	d6b4b59e6d	1.0.107	2023-01-03 17:37:11 +01:00
Philipp Kunz	c4236d28c6	fix(core): update	2023-01-03 17:37:10 +01:00
Philipp Kunz	5f1b29f742	1.0.106	2022-12-11 17:24:13 +01:00
Philipp Kunz	e7978a22e4	fix(core): update	2022-12-11 17:24:12 +01:00
Philipp Kunz	15de86774b	1.0.105	2022-12-07 14:54:41 +01:00
Philipp Kunz	8f57647c85	fix(core): update	2022-12-07 14:54:40 +01:00
Philipp Kunz	59c5bcabd5	1.0.104	2022-12-07 02:28:31 +01:00
Philipp Kunz	cae421e140	fix(core): update	2022-12-07 02:28:31 +01:00
Philipp Kunz	05b2b09395	1.0.103	2022-12-06 14:07:12 +01:00
Philipp Kunz	4dbd4f84c1	fix(core): update	2022-12-06 14:07:12 +01:00
Philipp Kunz	bb0ca2f19d	1.0.102	2022-12-06 13:32:01 +01:00
Philipp Kunz	55175f9ac7	fix(core): update	2022-12-06 13:32:00 +01:00
Philipp Kunz	0be0f9fa34	1.0.101	2022-12-06 13:11:06 +01:00
Philipp Kunz	7baab5d7ea	fix(core): update	2022-12-06 13:11:06 +01:00
Philipp Kunz	c3bdec176b	1.0.100	2022-08-18 02:15:41 +02:00
Philipp Kunz	2a84e2c270	fix(core): update	2022-08-18 02:15:41 +02:00
Philipp Kunz	c86f7d466c	1.0.99	2022-08-18 02:11:36 +02:00
Philipp Kunz	9a6db7d882	fix(core): update	2022-08-18 02:11:35 +02:00
Philipp Kunz	b69b1179a1	1.0.98	2022-08-17 19:56:22 +02:00
Philipp Kunz	0df9fe750c	fix(core): update	2022-08-17 19:56:22 +02:00
Philipp Kunz	0d05bfa5ff	1.0.97	2022-08-17 19:28:12 +02:00
Philipp Kunz	4dc9e04c2e	fix(core): update	2022-08-17 19:28:11 +02:00
Philipp Kunz	5341a0d6b6	1.0.96	2022-08-17 19:27:14 +02:00
Philipp Kunz	615bea9fc4	fix(core): update	2022-08-17 19:27:14 +02:00
Philipp Kunz	e518bc6976	1.0.95	2022-08-17 18:49:34 +02:00
Philipp Kunz	076f8c7a91	fix(core): update	2022-08-17 18:49:33 +02:00
Philipp Kunz	b016b959cf	1.0.94	2022-07-14 23:29:25 +02:00
Philipp Kunz	eca68e28a2	fix(core): update	2022-07-14 23:29:25 +02:00
Philipp Kunz	68a164aac2	1.0.93	2022-06-26 15:04:05 +02:00
Philipp Kunz	9b5448e096	fix(core): update	2022-06-26 15:04:04 +02:00
Philipp Kunz	232d063485	1.0.92	2022-06-10 15:50:57 +02:00
Philipp Kunz	6a357cb227	fix(core): update	2022-06-10 15:50:56 +02:00
Philipp Kunz	7b8218ab77	1.0.91	2022-05-30 23:15:33 +02:00
Philipp Kunz	5b6436b023	fix(core): update	2022-05-30 23:15:32 +02:00
Philipp Kunz	57edbb872b	1.0.90	2022-05-26 21:23:55 +02:00
Philipp Kunz	76f82fe15e	fix(core): update	2022-05-26 21:23:55 +02:00
Philipp Kunz	0b03718f4a	1.0.89	2022-05-26 20:03:19 +02:00
Philipp Kunz	2754de26d8	fix(core): update	2022-05-26 20:03:18 +02:00
Philipp Kunz	abc91600e2	1.0.88	2022-05-26 18:07:02 +02:00
Philipp Kunz	6a8a4aa4d2	fix(core): update	2022-05-26 18:07:02 +02:00
Philipp Kunz	6a6f3b1907	1.0.87	2022-05-24 09:13:15 +02:00
Philipp Kunz	0dc8e21e07	fix(core): update	2022-05-24 09:13:15 +02:00
Philipp Kunz	68ccc02699	1.0.86	2022-05-20 21:04:59 +02:00
Philipp Kunz	ed1c18b8ac	fix(core): update	2022-05-20 21:04:59 +02:00
Philipp Kunz	e8cc4c7c90	1.0.85	2022-05-20 19:51:21 +02:00
Philipp Kunz	187ebed3ab	fix(core): update	2022-05-20 19:51:20 +02:00
Philipp Kunz	b909617271	1.0.84	2022-05-20 19:48:48 +02:00
Philipp Kunz	9c2fe9f739	fix(core): update	2022-05-20 19:48:48 +02:00
Philipp Kunz	ed49de64bc	1.0.83	2022-05-20 19:43:17 +02:00
Philipp Kunz	162003ba7a	fix(core): update	2022-05-20 19:43:16 +02:00
Philipp Kunz	5f793f0acc	1.0.82	2022-05-20 18:54:49 +02:00
Philipp Kunz	d23b298bd5	fix(core): update	2022-05-20 18:54:49 +02:00
Philipp Kunz	f9e2f00e9b	1.0.81	2022-05-20 18:44:33 +02:00
Philipp Kunz	6c3645f2f8	fix(core): update	2022-05-20 18:44:33 +02:00
Philipp Kunz	e3a6798469	1.0.80	2022-05-03 15:17:28 +02:00
Philipp Kunz	60de4ef674	fix(core): update	2022-05-03 15:17:28 +02:00
Philipp Kunz	02e029edbc	1.0.79	2022-04-29 15:54:39 +02:00
Philipp Kunz	ff5a65bdce	fix(core): update	2022-04-29 15:54:38 +02:00
Philipp Kunz	daacbbd042	1.0.78	2022-04-29 10:17:21 +02:00
Philipp Kunz	42b44be143	fix(core): update	2022-04-29 10:17:21 +02:00
Philipp Kunz	7e4c186e66	1.0.77	2022-04-29 09:47:52 +02:00
Philipp Kunz	f6823639cc	fix(core): update	2022-04-29 09:47:52 +02:00
Philipp Kunz	f292fd9692	1.0.76	2022-03-18 19:46:30 +01:00
Philipp Kunz	fa2ab7730a	fix(core): update	2022-03-18 19:46:30 +01:00
Philipp Kunz	3a2ba14287	1.0.75	2022-03-18 19:40:29 +01:00
Philipp Kunz	c1b5778d01	fix(core): update	2022-03-18 19:40:28 +01:00
Philipp Kunz	24a5f48ce1	1.0.74	2022-01-24 01:39:48 +01:00
Philipp Kunz	d43b80298b	fix(core): update	2022-01-24 01:39:47 +01:00
Philipp Kunz	27d338420c	1.0.73	2021-12-10 18:18:57 +01:00
Philipp Kunz	81f2e662fb	fix(core): update	2021-12-10 18:18:57 +01:00
Philipp Kunz	d8905b687f	1.0.72	2021-11-27 17:38:53 +01:00
Philipp Kunz	75f6da194b	fix(core): update	2021-11-27 17:38:53 +01:00
Philipp Kunz	e653450ec5	1.0.71	2021-11-26 20:06:10 +01:00
Philipp Kunz	9de9f0c202	fix(core): update	2021-11-26 20:06:09 +01:00
Philipp Kunz	75929c089d	1.0.70	2021-10-08 16:07:41 +02:00
Philipp Kunz	6a97e8d020	fix(core): update	2021-10-08 16:07:40 +02:00
Philipp Kunz	6aeb970bbe	1.0.69	2021-10-08 14:19:56 +02:00
Philipp Kunz	ea7fa0816d	fix(core): update	2021-10-08 14:19:55 +02:00
Philipp Kunz	1b1de04f86	1.0.68	2021-10-07 18:47:36 +02:00
Philipp Kunz	7941628d1d	fix(core): update	2021-10-07 18:47:36 +02:00
Philipp Kunz	369437ceba	1.0.67	2021-10-07 18:01:05 +02:00
Philipp Kunz	72f7782898	fix(core): update	2021-10-07 18:01:05 +02:00
Philipp Kunz	820d6ae40f	1.0.66	2021-09-15 13:10:28 +02:00
Philipp Kunz	5dd3da9f31	fix(core): update	2021-09-15 13:10:28 +02:00
Philipp Kunz	3ce0683a05	1.0.65	2021-09-15 00:59:51 +02:00
Philipp Kunz	00d41f1b6e	fix(core): update	2021-09-15 00:59:50 +02:00
Philipp Kunz	caba7ada28	1.0.64	2021-09-15 00:48:29 +02:00
Philipp Kunz	6cff32cc36	fix(core): update	2021-09-15 00:48:29 +02:00
Philipp Kunz	e6e8ac9782	1.0.63	2021-09-15 00:45:15 +02:00
Philipp Kunz	7a13fdcd95	fix(core): update	2021-09-15 00:45:14 +02:00
Philipp Kunz	c450fb32ea	1.0.62	2021-09-14 17:31:16 +02:00
Philipp Kunz	6554bfd721	fix(core): update	2021-09-14 17:31:16 +02:00
Philipp Kunz	9ce4ca14b8	1.0.61	2021-09-10 15:56:37 +02:00
Philipp Kunz	76bcda760c	fix(core): update	2021-09-10 15:56:37 +02:00
Philipp Kunz	6949aed381	1.0.60	2021-09-10 15:51:30 +02:00
Philipp Kunz	1f3502685f	fix(core): update	2021-09-10 15:51:30 +02:00
Philipp Kunz	8d1451fffa	1.0.59	2021-09-10 15:42:16 +02:00
Philipp Kunz	8b2fedf1d6	fix(core): update	2021-09-10 15:42:16 +02:00
Philipp Kunz	30ffb2650a	1.0.58	2021-09-10 15:23:54 +02:00
Philipp Kunz	55b65c7e4c	fix(core): update	2021-09-10 15:23:54 +02:00
Philipp Kunz	5c81dd540a	1.0.57	2021-09-10 15:02:48 +02:00
Philipp Kunz	cb5bc809ea	fix(core): update	2021-09-10 15:02:48 +02:00
Philipp Kunz	ab1956c452	1.0.56	2021-09-09 00:35:11 +02:00
Philipp Kunz	3b99796073	fix(core): update	2021-09-09 00:35:10 +02:00
Philipp Kunz	20755775ea	1.0.55	2021-09-09 00:06:06 +02:00
Philipp Kunz	4e1b797377	fix(core): update	2021-09-09 00:06:05 +02:00
Philipp Kunz	4a3aa2d6d9	1.0.54	2021-09-09 00:02:36 +02:00
Philipp Kunz	4e49045444	fix(core): update	2021-09-09 00:02:35 +02:00
Philipp Kunz	9e54c973d5	1.0.53	2021-09-01 22:44:44 +02:00
Philipp Kunz	122c535dec	fix(core): update	2021-09-01 22:44:43 +02:00
Philipp Kunz	aabda883cd	1.0.52	2021-09-01 22:43:32 +02:00
Philipp Kunz	5890977009	fix(core): update	2021-09-01 22:43:31 +02:00
Philipp Kunz	f4aebcf4e6	1.0.51	2021-09-01 21:48:22 +02:00
Philipp Kunz	66bf117bfc	fix(core): update	2021-09-01 21:48:22 +02:00
Philipp Kunz	f7ee4d77fd	1.0.50	2021-08-29 17:10:25 +02:00
Philipp Kunz	ab19e97c31	fix(core): update	2021-08-29 17:10:25 +02:00
Philipp Kunz	631502b480	1.0.49	2021-08-27 14:51:29 +02:00
Philipp Kunz	ea519cf543	1.0.48	2021-08-27 14:48:59 +02:00
Philipp Kunz	91c97cad1d	fix(core): update	2021-08-27 14:48:58 +02:00
Philipp Kunz	de958303e3	1.0.47	2021-08-27 14:27:19 +02:00
Philipp Kunz	95192ea3ce	fix(core): update	2021-08-27 14:27:18 +02:00
Philipp Kunz	0b1e50bbc6	1.0.46	2021-08-27 14:25:45 +02:00
Philipp Kunz	888f07db79	fix(core): update	2021-08-27 14:25:44 +02:00
Philipp Kunz	e14d83b3a7	1.0.45	2021-08-27 14:17:10 +02:00
Philipp Kunz	f4055fb8c1	fix(core): update	2021-08-27 14:17:09 +02:00
Philipp Kunz	d0d4638264	1.0.44	2021-08-27 14:02:38 +02:00
Philipp Kunz	7d63f16fc1	fix(core): update	2021-08-27 14:02:37 +02:00
Philipp Kunz	00cb552f44	1.0.43	2021-08-27 13:38:09 +02:00
Philipp Kunz	2f52f14cf9	fix(core): update	2021-08-27 13:38:08 +02:00
Philipp Kunz	54ce305cf1	1.0.42	2021-08-26 21:30:35 +02:00
Philipp Kunz	9d5f0b5ff8	fix(core): update	2021-08-26 21:30:35 +02:00
Philipp Kunz	c1594736ec	1.0.41	2021-08-25 17:34:16 +02:00
Philipp Kunz	4eb1abaa39	fix(core): update	2021-08-25 17:34:15 +02:00
Philipp Kunz	b8c231fc61	1.0.40	2021-08-25 16:10:56 +02:00
Philipp Kunz	260c4a269a	fix(core): update	2021-08-25 16:10:56 +02:00
Philipp Kunz	c1e7629f1f	1.0.39	2021-08-25 16:09:53 +02:00
Philipp Kunz	b84e2c4774	fix(core): update	2021-08-25 16:09:52 +02:00
Philipp Kunz	e9374900a0	1.0.38	2021-08-25 13:51:55 +02:00
Philipp Kunz	486b8cb6a6	fix(core): update	2021-08-25 13:51:55 +02:00
Philipp Kunz	0adb319616	1.0.37	2021-08-24 12:41:01 +02:00
Philipp Kunz	a6e7adc983	fix(core): update	2021-08-24 12:41:01 +02:00
Philipp Kunz	59dfbb34bb	1.0.36	2021-08-20 18:55:39 +02:00
Philipp Kunz	cf34cea94d	fix(core): update	2021-08-20 18:55:39 +02:00
Philipp Kunz	7f5e72c27f	1.0.35	2021-08-20 00:25:15 +02:00
Philipp Kunz	4311c0fff6	fix(core): update	2021-08-20 00:25:14 +02:00
Phil Kunz	e028f37493	1.0.34	2021-05-05 20:56:31 +00:00
Phil Kunz	c6967156d6	fix(core): update	2021-05-05 20:56:31 +00:00
Phil Kunz	efaf2a78df	1.0.33	2021-05-05 20:55:49 +00:00
Phil Kunz	e6adbf9b6d	fix(core): update	2021-05-05 20:55:49 +00:00
Phil Kunz	e88605a4aa	1.0.32	2021-03-06 15:59:53 +00:00
Phil Kunz	6a161982b7	fix(core): update	2021-03-06 15:59:52 +00:00
Phil Kunz	22d7883c04	1.0.31	2021-03-06 15:48:23 +00:00
Phil Kunz	2a613c96a0	fix(core): update	2021-03-06 15:48:22 +00:00
Phil Kunz	bdd766e4bc	1.0.30	2021-03-06 15:48:02 +00:00
Phil Kunz	b1ce8f093f	fix(core): update	2021-03-06 15:48:02 +00:00
Phil Kunz	056090856e	1.0.29	2021-02-13 21:52:37 +00:00
Phil Kunz	fef0705acc	fix(core): update	2021-02-13 21:52:36 +00:00
Phil Kunz	6eced2321f	1.0.28	2020-12-09 23:05:13 +00:00
Phil Kunz	05a9042de8	fix(core): update	2020-12-09 23:05:13 +00:00
Phil Kunz	d369805ee8	1.0.27	2020-12-09 14:06:24 +00:00
Phil Kunz	3a2f3500fd	fix(core): update	2020-12-09 14:06:24 +00:00
Phil Kunz	2f9711a094	1.0.26	2020-12-03 11:12:11 +00:00
Phil Kunz	cf80efd1ec	fix(core): update	2020-12-03 11:12:11 +00:00
Phil Kunz	cf5cd37ebc	1.0.25	2020-12-02 17:30:42 +00:00
Phil Kunz	88554396a4	fix(core): update	2020-12-02 17:30:41 +00:00
Phil Kunz	2f13311098	1.0.24	2020-12-02 17:11:05 +00:00
Phil Kunz	5407b158d0	fix(core): update	2020-12-02 17:11:04 +00:00
		`@ -0,0 +1 @@`
							`import {} from '@designestate/dees-element';`
`@ -1 +1,2 @@`
	`export * from './elements/index';`	`export * from './elements/index.js';`
		`export { commitinfo } from './00_commitinfo_data.js';`