1.0.93

fix(core): update
1.0.92
2022-06-26 15:04:05 +02:00 · 2022-06-26 15:04:04 +02:00 · 2022-06-10 15:50:57 +02:00 · 2022-06-10 15:50:56 +02:00 · 2022-05-30 23:15:33 +02:00 · 2022-05-30 23:15:32 +02:00
37 changed files with 10418 additions and 8853 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -12,6 +12,9 @@ stages:
  - release
  - metadata

+before_script:
+  - npm install -g @shipzone/npmci
+
 # ====================
 # security stage
 # ====================
@ -36,6 +39,7 @@ auditProductionDependencies:
    - npmci command npm audit --audit-level=high --only=prod --production
  tags:
    - docker
+  allow_failure: true

 auditDevDependencies:
  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
@ -96,10 +100,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
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -2,28 +2,10 @@
  "version": "0.2.0",
  "configurations": [
    {
-      "name": "current file",
-      "type": "node",
+      "command": "npm test",
+      "name": "Run npm test",
      "request": "launch",
-      "args": [
-        "${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"
+      "type": "node-terminal"
    }
  ]
 }
--- a/html/index.html
+++ b/html/index.html
@ -1,6 +1,7 @@
-<!--gitzone element-->
+<!--gitzone default-->
 <!-- made by Lossless GmbH -->
 <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <!--Lets set some basic meta tags-->
@ -9,16 +10,119 @@
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="theme-color" content="#000000">

+    <!--Lets make sure we recognize this as an PWA-->
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" type="image/png" href="/assetbroker/manifest/favicon.png">
+
+    <!--Lets load standard fonts-->
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <link
+      crossorigin="anonymous"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@100;200;300;400;500;600;700;800&family=Roboto+Slab:wght@100;200;300;400;500;600;700;900&family=Roboto:wght@100;300;400;500;700;900&family=Roboto+Mono:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Just+Me+Again+Down+Here&display=swap" rel="stylesheet">
+
+
+    <!--Lets avoid a rescaling flicker due to default body margins-->
    <style>
      body {
+        background: #000;
        margin: 0px;
-        background: #222222;
      }
    </style>
-
-    <script src="./index.ts"></script>
+    <script>
+      projectVersion = '';
+    </script>
  </head>
  <body>
+    <noscript>
+      <style>
+        body {
+          background: #303f9f;
+          font-family: 'Roboto', sans-serif;
+          color: #ffffff;
+        }
+
+        a {
+          color: #ffffff;
+          text-decoration: none;
+        }
+
+        .logo {
+          margin-top: 100px;
+          text-align: center;
+        }
+
+        img {
+          width: 130px;
+        }
+
+        .container {
+          width: 600px;
+          margin: auto;
+          margin-top: 20px;
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+          overflow: hidden;
+          border-radius: 3px;
+          background: #4357d9;
+        }
+        .contentHeader {
+          padding: 20px;
+          text-align: center;
+          font-size: 25px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .content {
+          padding: 20px;
+        }
+        .footer {
+          padding: 10px;
+          text-align: center;
+        }
+      </style>
+      <div class="logo">
+        <img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg">
+      </div>
+      <div class="container">
+        
+        <div class="contentHeader">
+          We need JavaScript to run properly!
+        </div>
+        <div class="content">
+          This site is being built using lit-element (made by Google). This technology works with
+          JavaScript. Subsequently this website does not work as intended by Lossless GmbH without
+          JavaScript.
+        </div>
+      </div>
+      <div class="footer">
+        <a href="https://lossless.gmbh">Legal Info</a> |
+        <a href="https://lossless.gmbh/privacy">Privacy Policy</a>
+      </div>
+    </noscript>
+    <script type="text/javascript" async defer>
+      window.revenueEnabled = true;
+      const runRevenueCheck = async () => {
+        var e = document.createElement('div');
+        e.id = '476kjuhzgtr764';
+        e.style.display = 'none';
+        document.body.appendChild(e);
+        if (document.getElementById('476kjuhzgtr764')) {
+          window.revenueEnabled = true;
+        } else {
+          window.revenueEnabled = false;
+        }
+        console.log(`revenue enabled: ${window.revenueEnabled}`);
+      };
+
+      runRevenueCheck();
+    </script>
  </body>
+  <script defer type="module" src="/bundle.js"></script>
 </html>
--- 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 pages from '../ts_web/pages';
+import * as elements from '../ts_web/elements/index.js';
+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,34 +1,35 @@
 {
  "name": "@designestate/dees-catalog",
-  "version": "1.0.29",
+  "version": "1.0.93",
  "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",
-    "build": "tsbuild element && tsbundle element --production",
+    "test": "tstest test/ --web",
+    "build": "tsbuild element --allowimplicitany && tsbundle element --production",
    "watch": "tswatch element"
  },
  "author": "Lossless GmbH",
  "license": "MIT",
  "dependencies": {
-    "@designestate/dees-domtools": "^1.0.84",
-    "@designestate/dees-element": "^1.0.10",
-    "@designestate/dees-wcctools": "^1.0.54",
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
-    "@fortawesome/free-regular-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "typescript": "^4.1.5"
+    "@designestate/dees-domtools": "^2.0.22",
+    "@designestate/dees-element": "^2.0.15",
+    "@designestate/dees-wcctools": "^1.0.74",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "pdfjs-dist": "^2.14.305"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
-    "@gitzone/tsbundle": "^1.0.78",
-    "@gitzone/tswatch": "^1.0.50",
-    "@pushrocks/projectinfo": "^4.0.5",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.17.0"
+    "@gitzone/tsbuild": "^2.1.61",
+    "@gitzone/tsbundle": "^2.0.3",
+    "@gitzone/tstest": "^1.0.71",
+    "@gitzone/tswatch": "^2.0.1",
+    "@pushrocks/projectinfo": "^5.0.1",
+    "@pushrocks/tapbundle": "^5.0.3"
  },
  "files": [
    "ts/**/*",
--- 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.93',
+  description: 'website for lossless.com'
+}
--- a/ts_web/elements/dees-button-exit.ts
+++ b/ts_web/elements/dees-button-exit.ts
@ -0,0 +1,53 @@
+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 = 20;
+
+  public styles = [
+    cssManager.defaultStyles,
+    css`
+
+    `
+  ]
+
+  public render (): TemplateResult {
+    return html`
+      <style>
+        .maincontainer {
+          position: relative;
+          width: ${this.size}px;
+          height: ${this.size}px;
+        }
+        .firstLine {
+          position: absolute;
+        }
+        .secondLine {
+          position: absolute;
+        }
+      </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,4 +1,13 @@
-import { customElement, html, DeesElement, property, TemplateResult } from '@designestate/dees-element';
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+} from '@designestate/dees-element';

 import * as domtools from '@designestate/dees-domtools';

@ -10,120 +19,190 @@ declare global {

@customElement('dees-button')
 export class DeesButton extends DeesElement {
-  public static demo = () => html`<dees-button></dees-button>`
+  public static demo = () => html`
+    <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()
-  text: string;
+  public text: string;

  @property()
-  eventDetailData: string;
+  public eventDetailData: string;

-  @property()
-  disabled = false;
+  @property({
+    type: Boolean
+  })
+  public disabled = false;

-  @property()
-  isHidden = false;
+  @property({
+    type: Boolean
+  })
+  public isHidden = false;

-  @property()
+  @property({
+    type: String
+  })
  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 ease;
+        position: relative;
+        font-size: 14px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: ${cssManager.bdTheme('#eee', '#333')};
+        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
+        border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
+        border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
+        border-radius: 2px;
+        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;
+        border: 1px solid #039be5;
+        border-top: 1px solid #039be5;
+        color: #ffffff;
+      }
+
+      .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}
-      <style>
-        :host {
-          display: block;
-          box-sizing: border-box;
-        }
-        :host([hidden]) {
-          display: none;
-        }
-
-        .button {
-          transition: all 0.2s ease;
-          font-size: 14px;
-          display: block;
-          text-align: center;
-          background: ${this.goBright ? '#eee' : '#333'};
-          border-top: ${this.goBright ? '1px solid #eee' : '1px solid #444'};
-          border-radius: 2px;
-          line-height: 40px;
-          padding: 0px 10px;
-          min-width: 100px;
-          user-select: none;
-          color: ${this.goBright ? '#333' : ' #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
+        class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.status} ${this.disabled
+          ? 'disabled'
+          : null}"
+        @click="${this.dispatchClick}"
+      >
+        ${this.status === 'normal' ? html``: html`
+          <dees-spinner status="${this.status}"></dees-spinner>
+        `}
+        <div class="textbox">${this.text ? this.text : html`<slot></slot>`}</div>
      </div>
    `;
  }

  public async dispatchClick() {
    if (this.disabled) {
-
      return;
    }

-    this.dispatchEvent(new CustomEvent('clicked', {
-      detail: {
-        data: this.eventDetailData
-      },
-      bubbles: true
-    }));
+    this.dispatchEvent(
+      new CustomEvent('clicked', {
+        detail: {
+          data: this.eventDetailData,
+        },
+        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-form-submit.ts
+++ b/ts_web/elements/dees-form-submit.ts
@ -1,6 +1,12 @@
-import { customElement, html, LitElement } from 'lit-element';
-
-import {DeesForm} from './dees-form';
+import {
+  customElement,
+  html,
+  DeesElement,
+  css,
+  cssManager,
+  property,
+} from '@designestate/dees-element';
+import { DeesForm } from './dees-form.js';

 declare global {
  interface HTMLElementTagNameMap {
@ -9,16 +15,42 @@ declare global {
 }

@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}>
+        ${this.text ? this.text : html`<slot></slot>`}
+      </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,9 +1,15 @@
-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 { DeesInputText } from './dees-input-text';
-import { DeesInputQuantitySelector } from './dees-input-quantityselector';
-import { DeesInputRadio } from './dees-input-radio';
+import { DeesInputCheckbox } from './dees-input-checkbox.js';
+import { DeesInputText } from './dees-input-text.js';
+import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
+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 {
@ -12,17 +18,30 @@ declare global {
 }

@customElement('dees-form')
-export class DeesForm extends LitElement {
+export class DeesForm extends DeesElement {
  public static demo = () => html`
-    <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px">
-      <dees-input-text key="hello1" label="a text"></dees-input-text>
-      <dees-input-text key="hello2" label="also a text"></dees-input-text>
-      <dees-input-checkbox key="hello3" label="another text"></dees-input-checkbox>
+    <dees-form
+      style="display: block; margin:auto; max-width: 500px; padding: 20px"
+      @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>
-    `;
+  `;

  public name: string = 'myform';
+  public changeSubject = new domtools.rxjs.Subject();

  public render(): TemplateResult {
    return html`
@ -35,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) {
-        valueObject[child.key] = child.value;
+      if (
+        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,4 +1,4 @@
-import { LitElement, html, property, customElement } from 'lit-element';
+import { DeesElement, html, property, customElement } from '@designestate/dees-element';

 import * as domtools from '@designestate/dees-domtools';

@ -41,9 +41,16 @@ const faIcons: { [key: string]: IconDefinition } = {
  users: faUsers,
 };

+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-icon': DeesIcon;
+  }
+}
+
@customElement('dees-icon')
-export class DeesIcon extends LitElement {
+export class DeesIcon extends DeesElement {
  public static demo = () => html`
+    <dees-icon iconName="visibility"></dees-icon>
    <div style="background: #fff; padding: 10px;">
      <dees-icon iconName="visibility"></dees-icon>
      <dees-icon brandName="facebook"></dees-icon>
--- a/ts_web/elements/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox.ts
@ -1,19 +1,53 @@
-import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-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 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}
@ -68,7 +102,12 @@ export class DeesInputCheckbox extends DeesElement {
          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 DeesElement {
          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 DeesElement {
          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 DeesElement {
  }

  public async toggleSelected() {
+    if (this.disabled) {
+      return;
+    }
    this.value = !this.value;
    this.dispatchEvent(
      new CustomEvent('newValue', {
@ -123,5 +169,6 @@ export class DeesInputCheckbox extends DeesElement {
        bubbles: true,
      })
    );
+    this.changeSubject.next(this);
  }
 }
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@ -1,11 +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-dropdown': DeesInputDropdown;
+  }
+}
+
@customElement('dees-input-dropdown')
-export class DeesInputDropdown extends LitElement {
+export class DeesInputDropdown extends DeesElement {
  public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`

+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
  @property()
  public label: string = 'Label';

@ -22,6 +30,16 @@ export class DeesInputDropdown extends LitElement {
    payload: null
  };

+  @property({
+    type: Boolean
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
@ -110,6 +128,7 @@ export class DeesInputDropdown extends LitElement {
      bubbles: true
    }));
    this.toggleSelectionBox();
+    this.changeSubject.next(this);
  }

  public toggleSelectionBox() {
--- a/ts_web/elements/dees-input-fileupload.ts
+++ b/ts_web/elements/dees-input-fileupload.ts
@ -0,0 +1,144 @@
+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></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;
+
+  constructor() {
+    super()
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: relative;
+        display: grid;
+        margin: 10px 0px;
+        margin-bottom: 24px;
+      }
+
+      .maincontainer {
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 5px;
+      }
+
+      .uploadButton {
+        position: relative;
+        cursor: pointer;
+        padding: 20px 20px;
+        max-width: 200px;
+        background: ${cssManager.bdTheme('#fafafa', '#333333')};
+        border-radius: 3px;
+        text-align: center;
+      }
+      .uploadButton::after {
+        top: 7px;
+        right: 7px;
+        left: 7px;
+        bottom: 7px;
+        transform: scale3d(0.9, 0.9, 1);
+        position: absolute;
+        content: '';
+        display: block;
+        border: 4px dashed rgba(255, 255, 255, 0);
+        transition: all 0.2s;
+      }
+      .uploadButton.dragOver::after {
+        transform: scale3d(1, 1, 1);
+        border: 4px dashed rgba(255, 255, 255, 0.3);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        ${this.label ? html`<div class="label">${this.label}</div>` : null}
+        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}">Upload File! (Drag/Drop enabled)</div>
+      </div>
+    `;
+  }
+
+  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';
+          break;
+        case 'dragleave':
+          this.state = 'idle';
+          break;
+      }
+      console.log(eventArg);
+      for (const file of Array.from(eventArg.dataTransfer.files)) {
+        this.value.push(file);
+      };
+      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, 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 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 DeesElement {
  })
  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}
@ -75,6 +98,7 @@ export class DeesInputQuantitySelector extends DeesElement {

  public increase () {
    this.value++;
+    this.changeSubject.next(this);
  }

  public decrease () {
@ -83,5 +107,6 @@ export class DeesInputQuantitySelector extends DeesElement {
    } 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,43 @@
-import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-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 DeesElement {
  public static demo = () => html`<dees-input-text></dees-input-text>`;

-  @property()
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property({
+    type: String
+  })
  public label: string = 'Label';

-  @property()
+  @property({
+    type: String
+  })
  public key: string;

-  @property()
-  public value: string;
+  @property({
+    type: String
+  })
+  public value: string = '';
+
+  @property({
+    type: Boolean
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;

  public render(): TemplateResult {
    return html `
@ -50,8 +76,16 @@ export class DeesInputText extends DeesElement {
          line-height: 48px;
          transition: all 0.2s;
          outline: none;
-          color: #ccc;
          font-size: 16px;
+          font-family: "Roboto";
+          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 {
@ -61,7 +95,7 @@ export class DeesInputText extends DeesElement {
      </style>
      <div class="maincontainer">
        <div class="label">${this.label}</div>
-        <input type="text" @input="${this.updateValue}" />
+        <input type="text" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
      </div>
    `;
  }
@ -69,6 +103,14 @@ export class DeesInputText extends DeesElement {
  public async updateValue(eventArg: Event) {
    const target: any = eventArg.target;
    this.value = target.value;
+    this.changeSubject.next(this);
+  }

+  public async freeze() {
+    this.disabled = true;
+  }
+
+  public async unfreeze() {
+    this.disabled = false;
  }
 }
--- a/ts_web/elements/dees-pdf.ts
+++ b/ts_web/elements/dees-pdf.ts
@ -0,0 +1,120 @@
+import { DeesElement, property, html, customElement, domtools } from '@designestate/dees-element';
+import { TemplateResult } from 'lit-html';
+
+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: 'Roboto', 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-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> Hey! We are consulting.</div>
+      </div>
+    `;
+  }
+
+  public async handleClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    globalThis.location.href = "https://lossless.consulting"
+  }
+
+  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,141 @@
+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>
+  `;
+
+  @property({
+    type: Number,
+  })
+  public size = 20;
+
+  @property()
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      #loading {
+        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: 0px solid rgba(255, 255, 255, 0);
+        background: #8bc34a;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
+      }
+
+      #loading.error {
+        border: 0px solid rgba(255, 255, 255, 0);
+        background: #e64a19;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
+      }
+
+      @keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+      @-webkit-keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+
+      #loading .checkmark {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        -ms-transform: rotate(45deg); /* IE 9 */
+        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+        transform: rotate(45deg);
+      }
+
+      #loading .checkmark_stem {
+        position: absolute;
+        width: 3px;
+        height: 9px;
+        background-color: #fff;
+        left: 9px;
+        top: 5px;
+      }
+
+      #loading .checkmark_kick {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background-color: #fff;
+        left: 6px;
+        top: 11px;
+      }
+
+      #loading.disabled .checkmark_stem,
+      #loading.disabled .checkmark_kick {
+        background-color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <style>
+        #loading {
+          width: ${this.size}px;
+          height: ${this.size}px;
+        }
+      </style>
+      <div class="${this.status}" id="loading">
+        ${this.status === 'success' || this.status === 'error'
+          ? html`
+              <span class="checkmark">
+                <div class="checkmark_stem"></div>
+                <div class="checkmark_kick"></div>
+              </span>
+            `
+          : null}
+      </div>
+    `;
+  }
+}
--- a/ts_web/elements/dees-stepper.ts
+++ b/ts_web/elements/dees-stepper.ts
@ -0,0 +1,256 @@
+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: Roboto;
+        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: 'easeInOutQuint',
+        },
+        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,248 @@
+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-table': DeesTable<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',
+          },
+        ]}
+        >This is a slotted Text</dees-table
+      >
+    </div>
+  `;
+
+  @property({
+    type: String,
+  })
+  public heading1: string = 'heading 1';
+
+  @property({
+    type: String,
+  })
+  public heading2: string = 'heading 2';
+
+  @property({
+    type: Array,
+  })
+  public data: T[] = [];
+
+  @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';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .mainbox {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        font-family: Roboto Mono;
+        font-size: 16px;
+        padding: 16px;
+        display: block;
+        width: 100%;
+        min-height: 50px;
+        background: ${cssManager.bdTheme('#fafafa', '#333333')};
+        border-radius: 3px;
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+      }
+      .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;
+      }
+
+      .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>
+                      `
+                    )}
+                  </tr>
+                  ${this.data.map(
+                    (itemArg) => html`
+                      <tr
+                        @click=${() => {
+                          this.selectedDataRow = itemArg;
+                        }}
+                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
+                      >
+                        ${headings.map(
+                          (headingArg) => html`
+                            <td>
+                              <div class="innerCellContainer">${itemArg[headingArg]}</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-updater.ts
+++ b/ts_web/elements/dees-updater.ts
@ -1,9 +1,10 @@
-import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
+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 {
@ -12,13 +13,17 @@ declare global {
 }

@customElement('dees-updater')
-export class DeesUpdater extends LitElement {
-  public static demo = () => html`<dees-updater ></dees-updater>`;
+export class DeesUpdater extends DeesElement {
+  public static demo = () => html`<dees-updater></dees-updater>`;

-  @property()
+  @property({
+    type: String,
+  })
  currentVersion: string;

-  @property()
+  @property({
+    type: String,
+  })
  updatedVersion: string;

  constructor() {
@ -26,22 +31,60 @@ export class DeesUpdater extends LitElement {
    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`
-      ${domtools.elementBasic.styles}
-      <style>
-        .modalContainer {
-          background: #333333;
-          margin: auto;
-          height: 200px;
-          width: 800px;
-          margin-top: 80px;
-          border-radius: 10px;
-        }
-      </style>
-      <dees-windowlayer>
-        <div class="modalContainer"></div>
+      <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
@ -1,4 +1,4 @@
-import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';

 import * as domtools from '@designestate/dees-domtools';

@ -9,9 +9,16 @@ declare global {
 }

@customElement('dees-windowlayer')
-export class DeesWindowLayer extends LitElement {
+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();
@ -22,21 +29,28 @@ export class DeesWindowLayer extends LitElement {
      ${domtools.elementBasic.styles}
      <style>
        .windowOverlay {
-          transition: all 1s;
+          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: blur(0px);
+          backdrop-filter: brightness(1);
+          pointer-events: none;
        }
+        
        .visible {
          background: rgba(0, 0, 0, 0.2);
-          backdrop-filter: blur(3px);
+          backdrop-filter: brightness(0.3);
+          pointer-events: all;
        }
      </style>
-      <div class="windowOverlay">
+      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
        <slot></slot>
      </div>
    `;
@ -44,7 +58,15 @@ export class DeesWindowLayer extends LitElement {

  firstUpdated() {
    setTimeout(() => {
-      this.shadowRoot.querySelector('.windowOverlay').classList.add('visible');
+      this.visible = true;
    }, 100);
  }
+
+  dispatchClicked() {
+    this.dispatchEvent(new CustomEvent('clicked'))
+  }
+
+  public toggleVisibility () {
+    this.visible = !this.visible;
+  }
 }
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@ -1,12 +1,20 @@
-export * from './dees-button';
-export * from './dees-form';
-export * from './dees-form-submit';
-export * from './dees-icon';
-export * from './dees-input-checkbox';
-export * from './dees-input-dropdown';
-export * from './dees-input-quantityselector';
-export * from './dees-input-radio';
-export * from './dees-input-text';
-export * from './dees-toast';
-export * from './dees-updater';
-export * from './dees-windowlayer';
+export * from './dees-button-exit.js';
+export * from './dees-button.js';
+export * from './dees-chips.js';
+export * from './dees-form.js';
+export * from './dees-form-submit.js';
+export * from './dees-icon.js';
+export * from './dees-input-checkbox.js';
+export * from './dees-input-dropdown.js';
+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-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/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,8 @@
 {
  "compilerOptions": {
    "experimentalDecorators": true,
-    "target": "ES2017",
-    "moduleResolution": "Node"
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "Node12"
  }
 }
Author	SHA1	Message	Date
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