1.0.111

fix(core): update
1.0.110
2023-01-07 14:12:19 +01:00 · 2023-01-07 14:12:18 +01:00 · 2023-01-07 14:09:46 +01:00 · 2023-01-07 14:09:45 +01:00 · 2023-01-07 13:41:24 +01:00 · 2023-01-07 13:41:24 +01:00
44 changed files with 7872 additions and 9957 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -12,30 +12,38 @@ stages:
  - release
  - metadata

+before_script:
+  - pnpm install -g pnpm
+  - pnpm install -g @shipzone/npmci
+  - npmci npm prepare
+
 # ====================
 # security stage
 # ====================
-mirror:
-  stage: security
-  script:
-    - npmci git mirror
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-audit:
+# ====================
+# security stage
+# ====================
+auditProductionDependencies:
  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
+     - npmci command npm config set registry https://registry.npmjs.org
+     - npmci command pnpm audit --audit-level=high --prod
  tags:
    - lossless
    - docker
-    - notpriv
+  allow_failure: true
+
+auditDevDependencies:
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  stage: security
+  script:
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command pnpm audit --audit-level=high --dev
+  tags:
+    - lossless
+    - docker
+  allow_failure: true

 # ====================
 # test stage
@ -44,28 +52,22 @@ audit:
 testStable:
  stage: test
  script:
-    - npmci npm prepare
    - npmci node install stable
    - npmci npm install
    - npmci npm test
  coverage: /\d+.?\d+?\%\s*coverage/
  tags:
-    - lossless
    - docker
-    - priv

 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:
-    - lossless
    - docker
-    - notpriv

 release:
  stage: release
@ -85,11 +87,12 @@ release:
 codequality:
  stage: metadata
  allow_failure: true
+  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
@ -109,11 +112,9 @@ trigger:
 pages:
  stage: metadata
  script:
-    - npmci node install lts
-    - npmci command npm install -g @gitzone/tsdoc
-    - npmci npm prepare
+    - npmci node install stable
    - 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",
-      "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/.vscode/settings.json
+++ b/.vscode/settings.json
@ -15,7 +15,7 @@
            "properties": {
              "projectType": {
                "type": "string",
-                "enum": ["website", "element", "service", "npm"]
+                "enum": ["website", "element", "service", "npm", "wcc"]
              }
            }
          }
--- 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>
@ -9,7 +9,12 @@
      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" />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+
+    <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 {
@ -18,9 +23,8 @@
      }
    </style>

-    <script src="../ts_web/index.ts"></script>
+    <script type="module" src="/bundle.js"></script>
  </head>
  <body>
-    <></>
  </body>
 </html>
--- a/html/index.ts
+++ b/html/index.ts
@ -0,0 +1,10 @@
+// dees tools
+import * as deesWccTools from '@designestate/dees-wcctools';
+import * as deesDomTools from '@designestate/dees-domtools';
+
+// elements and 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
@ -1,11 +1,11 @@
 {
  "gitzone": {
-    "projectType": "element",
+    "projectType": "wcc",
    "module": {
      "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,31 +1,39 @@
 {
-  "name": "@losslessone_private/dees-catalog",
-  "version": "1.0.18",
+  "name": "@designestate/dees-catalog",
+  "version": "1.0.111",
  "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 custom ts_web --web",
-    "watch": "tswatch element"
+    "test": "tstest test/ --web",
+    "build": "tsbuild element --allowimplicitany && tsbundle element --production",
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
  },
  "author": "Lossless GmbH",
-  "license": "UNLICENSED",
+  "license": "MIT",
  "dependencies": {
-    "@gitzone/tsrun": "^1.1.17",
-    "@pushrocks/smartexpress": "^3.0.10",
-    "lit-element": "^2.0.0-rc.5",
-    "lit-html": "^1.0.0-rc.2",
-    "typescript": "^3.2.2"
+    "@designestate/dees-domtools": "^2.0.28",
+    "@designestate/dees-element": "^2.0.18",
+    "@designestate/dees-wcctools": "^1.0.75",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@pushrocks/smartpromise": "^3.1.7",
+    "@tsclass/tsclass": "^4.0.28",
+    "pdfjs-dist": "^2.15.349"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.8",
-    "@gitzone/tswatch": "^1.0.30",
-    "@pushrocks/parcel-plugin-wrapper": "^1.0.5",
-    "@pushrocks/projectinfo": "^4.0.2",
-    "tslint": "^5.11.0",
-    "tslint-config-prettier": "^1.17.0"
+    "@gitzone/tsbuild": "^2.1.65",
+    "@gitzone/tsbundle": "^2.0.7",
+    "@gitzone/tstest": "^1.0.74",
+    "@gitzone/tswatch": "^2.0.5",
+    "@pushrocks/projectinfo": "^5.0.1",
+    "@pushrocks/tapbundle": "^5.0.4",
+    "@types/node": "^18.11.18"
  },
  "files": [
    "ts/**/*",
@ -38,5 +46,8 @@
    "cli.js",
    "npmextra.json",
    "readme.md"
+  ],
+  "browserslist": [
+    "last 1 chrome versions"
  ]
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.md
+++ b/readme.md
@ -8,16 +8,25 @@ a webcomponents catalog for handling daily stuff on the web
 * [docs (typedoc)](https://designestate.gitlab.io/dees-catalog/)

 ## Status for master
-[![pipeline status](https://gitlab.com/designestate/dees-catalog/badges/master/pipeline.svg)](https://gitlab.com/designestate/dees-catalog/commits/master)
-[![coverage report](https://gitlab.com/designestate/dees-catalog/badges/master/coverage.svg)](https://gitlab.com/designestate/dees-catalog/commits/master)
-[![npm downloads per month](https://img.shields.io/npm/dm/@designestate/dees-catalog.svg)](https://www.npmjs.com/package/@designestate/dees-catalog)
-[![Known Vulnerabilities](https://snyk.io/test/npm/@designestate/dees-catalog/badge.svg)](https://snyk.io/test/npm/@designestate/dees-catalog)
-[![TypeScript](https://img.shields.io/badge/TypeScript->=%203.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-[![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-ff69b4.svg)](https://prettier.io/)
+
+Status Category | Status Badge
+-- | --
+GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/dees-catalog/badges/master/pipeline.svg)](https://lossless.cloud)
+GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/dees-catalog/badges/master/coverage.svg)](https://lossless.cloud)
+npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/dees-catalog)](https://lossless.cloud)
+Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/dees-catalog)](https://lossless.cloud)
+TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
+node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
+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)

 ## Usage

+## Contribution
+
+We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)

 ## Contribution

@ -25,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.111',
+  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
@ -0,0 +1,211 @@
+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 DeesElement {
+  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()
+  public text: string;
+
+  @property()
+  public eventDetailData: string;
+
+  @property({
+    type: Boolean
+  })
+  public disabled = false;
+
+  @property({
+    type: Boolean
+  })
+  public isHidden = false;
+
+  @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: 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;
+        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`
+      <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,
+      })
+    );
+  }
+
+  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
@ -0,0 +1,57 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  css,
+  cssManager,
+  property,
+} from '@designestate/dees-element';
+import { DeesForm } from './dees-form.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-form-submit': DeesFormSubmit;
+  }
+}
+
+@customElement('dees-form-submit')
+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 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
@ -0,0 +1,173 @@
+import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
+import * as domtools from '@designestate/dees-domtools';
+
+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 {
+    'dees-form': DeesForm;
+  }
+}
+
+@customElement('dees-form')
+export class DeesForm extends DeesElement {
+  public static demo = () => html`
+    <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`
+      <style>
+        :host {
+          display: contents;
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+
+  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 = [];
+
+    for (const child of children) {
+      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;
+  }
+
+  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,
+      },
+      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
@ -0,0 +1,130 @@
+import { DeesElement, html, property, customElement } from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faFacebook,
+  faGoogle,
+  faLinkedin,
+  faMedium,
+  faSlackHash,
+  faTwitter,
+  faInstagram,
+  faTiktok,
+} from '@fortawesome/free-brands-svg-icons';
+
+import {} from '@fortawesome/free-regular-svg-icons';
+import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons';
+
+type TFontAwesomeIcon =
+  // normal
+  | 'desktop'
+  | 'rss'
+  // brands
+  | 'facebook'
+  | 'google'
+  | 'linkedin'
+  | 'instagram'
+  | 'medium'
+  | 'slack'
+  | 'tiktok'
+  | 'twitter'
+  | 'users';
+const faIcons: { [key: string]: IconDefinition } = {
+  // normal
+  desktop: faDesktop,
+  rss: faRss,
+  // brands
+  facebook: faFacebook,
+  google: faGoogle,
+  instagram: faInstagram,
+  linkedin: faLinkedin,
+  medium: faMedium,
+  slack: faSlackHash,
+  tiktok: faTiktok,
+  twitter: faTwitter,
+  users: faUsers,
+};
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-icon': DeesIcon;
+  }
+}
+
+@customElement('dees-icon')
+export class DeesIcon extends DeesElement {
+  public static demo = () => html`
+    <dees-icon iconName="visibility"></dees-icon>
+    <div style="background: #fff; padding: 10px; font-size: 24px">
+      <dees-icon iconName="visibility"></dees-icon>
+      <dees-icon brandName="facebook"></dees-icon>
+    </div>
+  `;
+
+  @property()
+  public iconName: string;
+
+  @property()
+  public brandName: TFontAwesomeIcon;
+
+  @property()
+  public svgSize: number = 20;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render() {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          display: block;
+          line-height: inherit;
+          font-size: inherit;
+          margin: 0px;
+          padding: 0px;
+          white-space: nowrap;
+        }
+        #iconContainer svg {
+          display: inline-block;
+          height: ${this.svgSize}px;
+        }
+        .material-symbols-outlined {
+          font-family: 'Material Symbols Outlined';
+          font-weight: normal;
+          font-style: normal;
+          line-height: inherit;
+          font-size: inherit; /* Preferred icon size */
+          display: inline-block;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+        }
+      </style>
+      ${this.iconName
+        ? html`
+          <i 
+            class="material-symbols-outlined"
+          >
+            ${this.iconName}
+          </i>`
+        : html``}
+      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
+    `;
+  }
+
+  public async firstUpdated() {
+    if (this.brandName && !this.iconName) {
+      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
+        faIcons[this.brandName]
+      ).html[0];
+    }
+  }
+}
--- a/ts_web/elements/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox.ts
@ -0,0 +1,174 @@
+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>`;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property({
+    type: String,
+  })
+  public key: string;
+
+  @property({
+    type: String,
+  })
+  public label: string = 'Label';
+
+  @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}
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: block;
+          position: relative;
+          margin: 20px 0px;
+          cursor: pointer;
+        }
+
+        .maincontainer {
+          display: grid;
+          grid-template-columns: 25px auto;
+          padding: 5px 0px;
+          color: ${this.goBright ? '#333' : '#ccc'};
+        }
+
+        .maincontainer:hover {
+          ${this.goBright ? '#000' : '#ccc'};
+        }
+
+        .label {
+          margin-left: 15px;
+          line-height: 25px;
+          font-size: 14px;
+          font-weight: normal;
+        }
+
+        input:focus {
+          outline: none;
+          border-bottom: 1px solid #e4002b;
+        }
+
+        .checkbox {
+          transition: all 0.1s;
+          box-sizing: border-box;
+          border: 1px solid ${this.goBright ? '#CCC' : '#999'};
+          border-radius: 2px;
+          height: 24px;
+          width: 24px;
+          display: inline-block;
+          background: ${this.goBright ? '#fafafa' : '#222'};
+        }
+
+        .checkbox.selected {
+          background: #039BE5;
+          border: 1px solid #039BE5;
+        }
+
+        .checkbox.disabled {
+          background: none;
+          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+        }
+
+        .checkbox .checkmark {
+          display: inline-block;
+          width: 22px;
+          height: 22px;
+          -ms-transform: rotate(45deg); /* IE 9 */
+          -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+          transform: rotate(45deg);
+        }
+
+        .checkbox .checkmark_stem {
+          position: absolute;
+          width: 3px;
+          height: 9px;
+          background-color: #fff;
+          left: 11px;
+          top: 6px;
+        }
+
+        .checkbox .checkmark_kick {
+          position: absolute;
+          width: 3px;
+          height: 3px;
+          background-color: #fff;
+          left: 8px;
+          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' : ''} ${this.disabled ? 'disabled' : ''}">
+          ${this.value
+            ? html`
+                <span class="checkmark">
+                  <div class="checkmark_stem"></div>
+                  <div class="checkmark_kick"></div>
+                </span>
+              `
+            : html``}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+  }
+
+  public async toggleSelected() {
+    if (this.disabled) {
+      return;
+    }
+    this.value = !this.value;
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+  }
+}
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@ -0,0 +1,137 @@
+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 DeesElement {
+  public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property()
+  public label: string = 'Label';
+
+  @property()
+  public key: string;
+
+  @property()
+  public options: {option: string, key: string, payload?: any}[] = [];
+
+  @property()
+  public selectedOption: {option: string, key: string, payload?: any} = {
+    key: null,
+    option: null,
+    payload: null
+  };
+
+  @property({
+    type: Boolean
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          display: block;
+          height: 40px;
+        }
+
+        .maincontainer {
+          display: block;
+        }
+
+        .label {
+          font-size: 14px;
+          margin-bottom: 15px;
+        }
+
+        .selectedBox {
+          cursor: pointer;
+          position: relative;
+          max-width: 420px;
+          height: 40px;
+          border: 1px solid #CCC;
+          padding: 12px;
+          z-index: 0px;
+        }
+
+        .selectionBox {
+          pointer-events: none;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          opacity: 0;
+          position: relative;
+          background: #ffffff;
+          max-width: 420px;
+          box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
+          height: 40px;
+          margin-top: -40px;
+          z-index: 100;
+        }
+
+        .selectionBox.show {
+          pointer-events: all;
+          opacity: 1;
+          min-height: 160px;
+        }
+
+        .option {
+          padding: 12px;
+        }
+
+        .option:hover {
+          background: #fafafa;
+        }
+      </style>
+      <div class="maincontainer">
+        <div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}">
+          ${this.selectedOption?.option}
+        </div>
+        <div class="selectionBox">
+          ${this.options.map(option => {
+            return html`
+              <div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div>
+            `
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    this.selectedOption = this.options[0] || null;
+  }
+
+  public async updateSelection(selectedOption) {
+    this.selectedOption = selectedOption;
+
+    this.dispatchEvent(new CustomEvent('selectedOption', {
+      detail: selectedOption,
+      bubbles: true
+    }));
+    this.toggleSelectionBox();
+    this.changeSubject.next(this);
+  }
+
+  public toggleSelectionBox() {
+    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
@ -0,0 +1,113 @@
+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;
+
+  @property({
+    type: Number
+  })
+  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}
+      <style>
+        :host {
+          display: block;
+          width: 110px;
+          user-select: none;
+        }
+        .maincontainer {
+          transition: all 0.1s;
+          font-size: 14px;
+          display: grid;
+          grid-template-columns: 33% 34% 33%;
+          text-align: center;
+          background:none;
+          line-height: 40px;
+          padding: 0px;
+          min-width: 100px;
+          color: ${this.goBright ? '#666' : '#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 {
+          padding-left: 5px;
+        }
+
+        .plus {
+          padding-right: 5px;
+        }
+
+        .selector {
+          text-align: center;
+          font-size: 20px;
+        }
+
+        .selector:hover {
+          cursor: pointer;
+        }
+
+        .quantity {
+          text-align: center;
+        }
+
+        
+      </style>
+
+      <div class="maincontainer">
+        <div class="selector minus" @click="${() => {this.decrease();}}">-</div>
+        <div class="quantity">${this.value}</div>
+        <div class="selector plus" @click="${() => {this.increase();}}">+</div>
+      </div>
+    `;
+  }
+
+  public increase () {
+    this.value++;
+    this.changeSubject.next(this);
+  }
+
+  public decrease () {
+    if (this.value > 0) {
+      this.value--;
+    } 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
@ -0,0 +1,125 @@
+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 DeesElement {
+  public static demo = () => html`<dees-input-radio></dees-input-radio>`;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property()
+  public key: string;
+
+  @property()
+  public label: string = 'Label';
+
+  @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>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: block;
+          position: relative;
+          margin: 20px 0px;
+          cursor: pointer;
+        }
+
+        .maincontainer {
+          transition: all 0.3s;
+          display: grid;
+          grid-template-columns: 25px auto;
+          padding: 5px 0px;
+          color: #ccc;
+        }
+
+        .maincontainer:hover {
+          color: #fff;
+        }
+
+        .label {
+          margin-left: 15px;
+          line-height: 25px;
+          font-size: 14px;
+          font-weight: normal;
+
+        }
+
+        input:focus {
+          outline: none;
+          border-bottom: 1px solid #e4002b;
+        }
+
+        .checkbox {
+          transition: all 0.3s;
+          box-sizing: border-box;
+          border-radius: 20px;
+          border: 1px solid #999;
+          height: 24px;
+          width: 24px;
+          display: inline-block;
+          background: #222;
+        }
+
+        .checkbox.selected {
+          background: #039BE5;
+          border: 1px solid #039BE5;
+        }
+
+        .maincontainer:hover .checkbox.selected {
+          background: #03A9F4;
+        }
+
+        .innercircle {
+          transition: all 0.3s;
+          margin: 6px 0px 0px 6px;
+          background: #222;
+          width: 10px;
+          height: 10px;
+          border-radius: 10px;
+        }
+      </style>
+      <div class="maincontainer" @click="${this.toggleSelected}">
+        <div class="checkbox ${this.value ? 'selected' : ''}">
+        ${this.value ? html`<div class="innercircle"></div>`: html``}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+  }
+
+  public async toggleSelected () {
+    this.value = !this.value;
+    this.dispatchEvent(new CustomEvent('newValue', {
+      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
@ -0,0 +1,116 @@
+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>`;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property({
+    type: String
+  })
+  public label: string = 'Label';
+
+  @property({
+    type: String
+  })
+  public key: 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 `
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          display: grid;
+          margin: 10px 0px;
+          margin-bottom: 24px;
+        }
+
+        .maincontainer {
+          color: ${this.goBright ? '#333' : '#ccc'};
+        }
+
+        .label {
+          font-size: 14px;
+          margin-bottom: 5px;
+        }
+
+        input {
+          margin-top: 5px;
+          background: ${this.goBright ? '#fafafa' : '#222'};
+          border-top: ${this.goBright ? '1px solid #CCC'  : '1px solid #444'};
+          border-bottom: ${this.goBright ? '1px solid #CCC' : '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;
+          width: 100%;
+          line-height: 48px;
+          transition: all 0.2s;
+          outline: none;
+          font-size: 16px;
+          font-family: Inter;
+          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;
+        }
+      </style>
+      <div class="maincontainer">
+        <div class="label">${this.label}</div>
+        <input type="text" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
+      </div>
+    `;
+  }
+
+  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-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> Hey! We are API-driven.</div>
+      </div>
+    `;
+  }
+
+  public async handleClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    globalThis.location.href = "https://api.global"
+  }
+
+  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,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,357 @@
+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-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;
+      }
+
+      .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
@ -0,0 +1,26 @@
+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 DeesElement {
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style></style>
+      
+    `;
+  }
+}
--- 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
@ -0,0 +1,21 @@
+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-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/lele-element.ts
+++ b/ts_web/elements/lele-element.ts
@ -1,35 +0,0 @@
-import { LitElement, property, html, customElement } from 'lit-element';
-import { TemplateResult } from 'lit-html';
-
-@customElement('lele-element')
-export class LeleElement extends LitElement {
-  @property()
-  public footerText = `Lossless GmbH - 2018`;
-
-  constructor() {
-    super();
-
-    // you have access to all kinds of things through this.
-    // this.setAttribute('gotIt','true');
-    
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <style>
-        @import url('https://fonts.googleapis.com/css?family=Roboto');
-        :host {
-          font-family: 'Roboto', sans-serif;
-          background: #FCFCFC;
-          box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
-          display: block;
-          box-sizing: border-box;
-        }
-        :host([hidden]) {
-          display: none;
-        }
-      </style>
-      <slot></slot>
-    `;
-  }
-}
--- 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,5 +1,2 @@
-import { LeleElement } from './elements/lele-element';
-
-export {
-  LeleElement
-};
+export * from './elements/index.js';
+export { commitinfo } from './00_commitinfo_data.js';
--- 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",
-    "moduleResolution": "Node"
+    "useDefineForClassFields": false,
+    "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	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
Phil Kunz	b171eaf3fc	1.0.23	2020-12-01 22:49:45 +00:00
Phil Kunz	5585d7e304	fix(core): update	2020-12-01 22:49:44 +00:00
Phil Kunz	02119a1ce4	1.0.22	2020-12-01 22:24:55 +00:00
Phil Kunz	222f06bda7	fix(core): update	2020-12-01 22:24:54 +00:00
Phil Kunz	8ee99136cc	1.0.21	2020-09-17 10:35:33 +00:00
Phil Kunz	faf35c3144	fix(core): update	2020-09-17 10:35:33 +00:00
Phil Kunz	ae53459d56	1.0.20	2020-09-13 16:53:01 +00:00
Phil Kunz	5e1a32633a	fix(core): update	2020-09-13 16:53:00 +00:00
Phil Kunz	4b1b3ac615	1.0.19	2020-09-13 16:24:48 +00:00
Phil Kunz	9f8a5fedfa	fix(core): update	2020-09-13 16:24:48 +00:00