1.0.73

fix(core): update
1.0.72
2021-12-10 18:18:57 +01:00 · 2021-12-10 18:18:57 +01:00 · 2021-11-27 17:38:53 +01:00 · 2021-11-27 17:38:53 +01:00 · 2021-11-26 20:06:10 +01:00 · 2021-11-26 20:06:09 +01:00
32 changed files with 24679 additions and 3516 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -19,23 +19,36 @@ mirror:
  stage: security
  script:
    - npmci git mirror
+  only:
+    - tags
  tags:
    - lossless
    - docker
    - notpriv

-audit:
+auditProductionDependencies:
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  stage: security
+  script:
+    - npmci npm prepare
+    - npmci command npm install --production --ignore-scripts
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command npm audit --audit-level=high --only=prod --production
+  tags:
+    - docker
+  allow_failure: true
+
+auditDevDependencies:
  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
  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 audit --audit-level=high --only=dev
  tags:
-    - lossless
    - docker
-    - notpriv
+  allow_failure: true

 # ====================
 # test stage
@ -50,9 +63,7 @@ testStable:
    - npmci npm test
  coverage: /\d+.?\d+?\%\s*coverage/
  tags:
-    - lossless
    - docker
-    - priv

 testBuild:
  stage: test
@ -63,9 +74,7 @@ testBuild:
    - npmci command npm run build
  coverage: /\d+.?\d+?\%\s*coverage/
  tags:
-    - lossless
    - docker
-    - notpriv

 release:
  stage: release
@ -85,6 +94,8 @@ release:
 codequality:
  stage: metadata
  allow_failure: true
+  only:
+    - tags
  script:
    - npmci command npm install -g tslint typescript
    - npmci npm prepare
--- 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
@ -9,7 +9,6 @@
      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" />

    <style>
      body {
@ -18,9 +17,8 @@
      }
    </style>

-    <script src="../ts_web/index.ts"></script>
+    <script src="./index.ts"></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';
+import * as pages from '../ts_web/pages';
+
+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,6 +1,6 @@
 {
  "gitzone": {
-    "projectType": "element",
+    "projectType": "wcc",
    "module": {
      "githost": "gitlab.com",
      "gitscope": "designestate",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,30 +1,35 @@
 {
-  "name": "@losslessone_private/dees-catalog",
-  "version": "1.0.18",
+  "name": "@designestate/dees-catalog",
+  "version": "1.0.73",
  "private": false,
  "description": "website for lossless.com",
  "main": "dist_ts_web/index.js",
  "typings": "dist_ts_web/index.d.ts",
  "scripts": {
-    "test": "npm run build",
-    "build": "tsbuild custom ts_web --web",
+    "test": "tstest test/ --web",
+    "build": "tsbuild element && tsbundle element --production",
    "watch": "tswatch element"
  },
  "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": "^1.0.102",
+    "@designestate/dees-element": "^1.0.28",
+    "@designestate/dees-wcctools": "^1.0.66",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "typescript": "^4.5.3"
  },
  "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",
+    "@gitzone/tsbuild": "^2.1.28",
+    "@gitzone/tsbundle": "^1.0.88",
+    "@gitzone/tstest": "^1.0.60",
+    "@gitzone/tswatch": "^1.0.56",
+    "@pushrocks/projectinfo": "^4.0.5",
+    "@pushrocks/tapbundle": "^3.2.15",
+    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.17.0"
  },
  "files": [
@ -38,5 +43,8 @@
    "cli.js",
    "npmextra.json",
    "readme.md"
+  ],
+  "browserslist": [
+    "last 1 chrome versions"
  ]
 }
--- a/readme.md
+++ b/readme.md
@ -8,16 +8,26 @@ 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)
+Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)

 ## Usage

+## 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

--- 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).to.be.instanceOf(deesCatalog.DeesButton);
+});
+
+tap.start();
--- 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: 2px;
+        line-height: 40px;
+        padding: 0px 10px;
+        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: 36px;
+      }
+
+      .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: 30px;
+        margin-right: 3px;
+        margin-bottom: 7px;
+      }
+
+      .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';
+
+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 { DeesInputCheckbox } from './dees-input-checkbox';
+import { DeesInputText } from './dees-input-text';
+import { DeesInputQuantitySelector } from './dees-input-quantityselector';
+import { DeesInputRadio } from './dees-input-radio';
+import * as domtools from '@designestate/dees-domtools';
+import { DeesFormSubmit } from './dees-form-submit';
+
+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,125 @@
+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,
+} 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'
+  | 'twitter'
+  | 'linkedin'
+  | 'medium'
+  | 'slack'
+  | 'users';
+const faIcons: { [key: string]: IconDefinition } = {
+  // normal
+  desktop: faDesktop,
+  rss: faRss,
+  // brands
+  facebook: faFacebook,
+  google: faGoogle,
+  linkedin: faLinkedin,
+  medium: faMedium,
+  slack: faSlackHash,
+  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;">
+      <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;
+        }
+        #iconContainer svg {
+          display: inline-block;
+          height: ${this.svgSize}px;
+        }
+        .material-icons {
+          font-family: 'Material Icons';
+          font-weight: normal;
+          font-style: normal;
+          line-height: inherit;
+          font-size: inherit;
+          display: inline-block;
+          line-height: inherit;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+
+          /* Support for all WebKit browsers. */
+          -webkit-font-smoothing: antialiased;
+          /* Support for Safari and Chrome. */
+          text-rendering: optimizeLegibility;
+
+          /* Support for Firefox. */
+          -moz-osx-font-smoothing: grayscale;
+
+          /* Support for IE. */
+          font-feature-settings: 'liga';
+        }
+      </style>
+      ${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
+      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
+    `;
+  }
+
+  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, LitElement, TemplateResult, property, html } from 'lit-element';
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-dropdown': DeesInputDropdown;
+  }
+}
+
+@customElement('dees-input-dropdown')
+export class DeesInputDropdown extends LitElement {
+  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,144 @@
+import {
+  customElement,
+  DeesElement,
+  TemplateResult,
+  property,
+  html,
+  css,
+  unsafeCSS,
+  cssManager,
+} from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-fileupload': DeesInputFileupload;
+  }
+}
+
+@customElement('dees-input-fileupload')
+export class DeesInputFileupload extends DeesElement {
+  public static demo = () => html`<dees-input-fileupload></dees-input-fileupload>`;
+
+  // INSTANCE
+  public changeSubject = new domtools.rxjs.Subject();
+
+  @property({
+    type: String,
+  })
+  public label: string = null;
+
+  @property({
+    type: String,
+  })
+  public key: string;
+
+  @property({
+    attribute: false,
+  })
+  public value: File[] = [];
+
+  @property()
+  public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
+
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  @property({
+    type: Boolean
+  })
+  public disabled: boolean = false;
+
+  constructor() {
+    super()
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: relative;
+        display: grid;
+        margin: 10px 0px;
+        margin-bottom: 24px;
+      }
+
+      .maincontainer {
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 5px;
+      }
+
+      .uploadButton {
+        position: relative;
+        cursor: pointer;
+        padding: 20px 20px;
+        max-width: 200px;
+        background: ${cssManager.bdTheme('#fafafa', '#333333')};
+        border-radius: 3px;
+        text-align: center;
+      }
+      .uploadButton::after {
+        top: 7px;
+        right: 7px;
+        left: 7px;
+        bottom: 7px;
+        transform: scale3d(0.9, 0.9, 1);
+        position: absolute;
+        content: '';
+        display: block;
+        border: 4px dashed rgba(255, 255, 255, 0);
+        transition: all 0.2s;
+      }
+      .uploadButton.dragOver::after {
+        transform: scale3d(1, 1, 1);
+        border: 4px dashed rgba(255, 255, 255, 0.3);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        ${this.label ? html`<div class="label">${this.label}</div>` : null}
+        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}">Upload File! (Drag/Drop enabled)</div>
+      </div>
+    `;
+  }
+
+  public async updateValue(eventArg: Event) {
+    const target: any = eventArg.target;
+    this.value = target.value;
+    this.changeSubject.next(this);
+  }
+
+  public firstUpdated() {
+    const dropArea = this.shadowRoot.querySelector('.uploadButton');
+    const handlerFunction = (eventArg: DragEvent) => {
+      eventArg.preventDefault();
+      switch(eventArg.type) {
+        case 'dragover':
+          this.state = 'dragOver';
+          break;
+        case 'dragleave':
+          this.state = 'idle';
+          break;
+      }
+      console.log(eventArg);
+      for (const file of Array.from(eventArg.dataTransfer.files)) {
+        this.value.push(file);
+      };
+      console.log(`Got ${this.value.length} files!`);
+    };
+    dropArea.addEventListener('dragenter', handlerFunction, false);
+    dropArea.addEventListener('dragleave', handlerFunction, false);
+    dropArea.addEventListener('dragover', handlerFunction, false);
+    dropArea.addEventListener('drop', handlerFunction, false);
+  }
+}
--- a/ts_web/elements/dees-input-quantityselector.ts
+++ b/ts_web/elements/dees-input-quantityselector.ts
@ -0,0 +1,112 @@
+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'};
+        }
+
+        .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, LitElement, TemplateResult, property, html} from 'lit-element';
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-radio': DeesInputRadio;
+  }
+}
+
+@customElement('dees-input-radio')
+export class DeesInputRadio extends LitElement {
+  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,115 @@
+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;
+          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-search.ts
+++ b/ts_web/elements/dees-search.ts
--- a/ts_web/elements/dees-spinner.ts
+++ b/ts_web/elements/dees-spinner.ts
@ -0,0 +1,141 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+} from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-spinner': DeesSpinner;
+  }
+}
+
+@customElement('dees-spinner')
+export class DeesSpinner extends DeesElement {
+  public static demo = () => html`
+    <dees-spinner></dees-spinner>
+    <dees-spinner status="success"></dees-spinner>
+    <dees-spinner status="error"></dees-spinner>
+  `;
+
+  @property({
+    type: Number,
+  })
+  public size = 20;
+
+  @property()
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      #loading {
+        transition: none;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        background: #8bc34a00;
+        border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.3)')};
+        border-radius: 50%;
+        border-top-color: ${cssManager.bdTheme('#333', '#fff')};
+        animation: spin 1s ease-in-out infinite;
+        -webkit-animation: spin 1s ease-in-out infinite;
+      }
+
+      #loading.success {
+        border: 0px solid rgba(255, 255, 255, 0);
+        background: #8bc34a;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
+      }
+
+      #loading.error {
+        border: 0px solid rgba(255, 255, 255, 0);
+        background: #e64a19;
+        border-radius: 50%;
+        animation: none;
+        -webkit-animation: none;
+      }
+
+      @keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+      @-webkit-keyframes spin {
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+
+      #loading .checkmark {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        -ms-transform: rotate(45deg); /* IE 9 */
+        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+        transform: rotate(45deg);
+      }
+
+      #loading .checkmark_stem {
+        position: absolute;
+        width: 3px;
+        height: 9px;
+        background-color: #fff;
+        left: 9px;
+        top: 5px;
+      }
+
+      #loading .checkmark_kick {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background-color: #fff;
+        left: 6px;
+        top: 11px;
+      }
+
+      #loading.disabled .checkmark_stem,
+      #loading.disabled .checkmark_kick {
+        background-color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <style>
+        #loading {
+          width: ${this.size}px;
+          height: ${this.size}px;
+        }
+      </style>
+      <div class="${this.status}" id="loading">
+        ${this.status === 'success' || this.status === 'error'
+          ? html`
+              <span class="checkmark">
+                <div class="checkmark_stem"></div>
+                <div class="checkmark_kick"></div>
+              </span>
+            `
+          : null}
+      </div>
+    `;
+  }
+}
--- a/ts_web/elements/dees-stepper.ts
+++ b/ts_web/elements/dees-stepper.ts
@ -0,0 +1,256 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  unsafeCSS,
+  cssManager,
+  property,
+  TemplateResult,
+} from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+export interface IStep {
+  title: string;
+  content: TemplateResult;
+  validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
+  onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
+  validationFuncCalled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-stepper': DeesStepper;
+  }
+}
+
+@customElement('dees-stepper')
+export class DeesStepper extends DeesElement {
+  public static demo = () =>
+    html`
+      <dees-stepper
+        .steps=${[
+          {
+            title: 'Whats your name?',
+            content: html`
+              <dees-form>
+                <dees-input-text
+                  key="email"
+                  label="Your Email"
+                  value="hello@something.com"
+                  disabled
+                ></dees-input-text>
+                <dees-input-text key="firstName" required label="Vorname"></dees-input-text>
+                <dees-input-text key="lastName" required label="Nachname"></dees-input-text>
+                <dees-form-submit>Next</dees-form-submit>
+              </dees-form>
+            `,
+            validationFunc: async (stepperArg, elementArg) => {
+              const deesForm = elementArg.querySelector('dees-form');
+              deesForm.addEventListener('formData', eventArg => {
+                stepperArg.goNext();
+              })
+            }
+          },
+          {
+            title: 'Whats your mobile number?',
+            content: html``,
+          }
+        ] as IStep[]}
+      ></dees-stepper>
+    `;
+
+  @property({
+    type: Array,
+  })
+  public steps: IStep[] = [];
+
+  @property({
+    type: Object,
+  })
+  public selectedStep: IStep;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .stepperContainer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
+        overflow: hidden;
+      }
+
+      .step {
+        position: relative;
+        pointer-events: none;
+        overflow: hidden;
+        transition: all 0.7s ease-in-out;
+        max-width: 500px;
+        min-height: 300px;
+        border-radius: 3px;
+        background: ${cssManager.bdTheme('#ffffff', '#181818')};
+        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        margin: auto;
+        margin-bottom: 20px;
+        filter: opacity(0.5) grayscale(1);
+        box-shadow: 0px 0px 3px #00000010;
+        user-select: none;
+      }
+
+      .step.selected {
+        border-top: 1px solid #e4002b;
+        pointer-events: all;
+        filter: opacity(1) grayscale(0);
+        box-shadow: 0px 0px 5px #00000010;
+        user-select: auto;
+      }
+
+      .step.hiddenStep {
+        filter: opacity(0);
+      }
+
+      .step:last-child {
+        margin-bottom: 100vh;
+      }
+
+      .step .stepCounter {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        padding: 10px 15px;
+        font-size: 12px;
+        border-bottom-left-radius: 3px;
+        background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
+      }
+
+      .step .goBack {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        padding: 10px 15px;
+        font-size: 12px;
+        border-bottom-right-radius: 3px;
+        background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
+        cursor: pointer;
+      }
+
+      .step .goBack:hover {
+        background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
+      }
+
+      .step .title {
+        text-align: center;
+        padding-top: 50px;
+        font-family: Roboto;
+        font-size: 25px;
+        font-weight: 300;
+      }
+
+      .step .content {
+        padding: 20px;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <div class="stepperContainer">
+        ${this.steps.map(
+          (stepArg) =>
+            html`<div
+              class="step ${stepArg === this.selectedStep
+                ? 'selected'
+                : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep)
+                ? 'hiddenStep'
+                : ''}"
+            >
+              ${this.getIndexOfStep(stepArg) > 0
+                ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>`
+                : ``}
+              <div class="stepCounter">
+                Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
+                ${this.steps.length}
+              </div>
+              <div class="title">${stepArg.title}</div>
+              <div class="content">${stepArg.content}</div>
+            </div> `
+        )}
+      </div>
+    `;
+  }
+
+  public getIndexOfStep = (stepArg: IStep): number => {
+    return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
+  };
+
+  public firstUpdated() {
+    this.selectedStep = this.steps[0];
+    this.setScrollStatus();
+  }
+
+  public updated() {
+    this.setScrollStatus();
+  }
+
+  public scroller: typeof domtools.plugins.SweetScroll.prototype;
+
+  public async setScrollStatus() {
+    await domtools.plugins.smartdelay.delayFor(50);
+    const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
+    const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
+    const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
+    if (!stepperContainer.style.paddingTop) {
+      stepperContainer.style.paddingTop = `${
+        stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
+      }px`;
+    }
+    console.log('Setting scroll status');
+    console.log(selectedStepElement);
+    const scrollPosition =
+      selectedStepElement.offsetTop -
+      stepperContainer.offsetHeight / 2 +
+      selectedStepElement.offsetHeight / 2;
+    console.log(scrollPosition);
+    const domtoolsInstance = await domtools.DomTools.setupDomTools();
+    if (!this.scroller) {
+      this.scroller = new domtools.plugins.SweetScroll(
+        {
+          vertical: true,
+          horizontal: false,
+          easing: 'easeInOutQuint',
+        },
+        stepperContainer
+      );
+    }
+    if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
+      this.selectedStep.validationFuncCalled = true;
+      await this.selectedStep.validationFunc(this, selectedStepElement);
+    }
+    this.scroller.to(scrollPosition);
+  }
+
+  public async goBack() {
+    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
+    this.selectedStep = this.steps[currentIndex - 1];
+    await this.domtoolsPromise;
+    await this.domtools.convenience.smartdelay.delayFor(100);
+    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
+  }
+
+  public goNext() {
+    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
+    this.selectedStep = this.steps[currentIndex + 1];
+  }
+}
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@ -0,0 +1,243 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+} from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-table': DeesTable<any>;
+  }
+}
+
+@customElement('dees-table')
+export class DeesTable<T> extends DeesElement {
+  public static demo = () => html`
+    <style>
+      .demoWrapper {
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        padding: 60px;
+        background: #000000;
+      }
+    </style>
+    <div class="demoWrapper">
+      <dees-table
+        heading1="Current Account Statement"
+        heading2="Bunq - Payment Account 2 - April 2021"
+        .data=${[
+          {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
+          },
+          {
+            date: '2021-04-02',
+            amount: '165.65 €',
+            description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
+          },
+          {
+            date: '2021-04-03',
+            amount: '2999,00 €',
+            description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
+          },
+          {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Office-Supplies - STAPLES BREMEN',
+          },
+          {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Office-Supplies - STAPLES BREMEN',
+          },
+        ]}
+        >This is a slotted Text</dees-table
+      >
+    </div>
+  `;
+
+  @property({
+    type: String,
+  })
+  public heading1: string = 'heading 1';
+
+  @property({
+    type: String,
+  })
+  public heading2: string = 'heading 2';
+
+  @property({
+    type: Array,
+  })
+  public data: T[] = [];
+
+  @property({
+    type: Object,
+  })
+  public selectedDataRow: T;
+
+  @property({
+    type: String,
+  })
+  public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
+
+  @property({
+    type: String,
+  })
+  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .mainbox {
+        color: #fff;
+        font-family: Roboto Mono;
+        padding: 20px;
+        display: block;
+        width: 100%;
+        min-height: 50px;
+        background: #393939;
+        border-radius: 3px;
+      }
+      .headingSeparation {
+        margin-top: 7px;
+        border-bottom: 1px solid #bcbcbc;
+      }
+
+      table,
+      .noDataSet {
+        margin-top: 20px;
+        color: #fff;
+        border-collapse: collapse;
+        width: 100%;
+      }
+      .noDataSet {
+        text-align: center;
+      }
+      tr {
+        border-bottom: 1px dashed #808080;
+        text-align: left;
+      }
+      tr:last-child {
+        border-bottom: none;
+        text-align: left;
+      }
+      tr:hover {
+        cursor: pointer;
+      }
+      tr:hover .innerCellContainer {
+        background: #ffffff10;
+      }
+      tr:first-child:hover {
+        cursor: auto;
+      }
+      tr:first-child:hover .innerCellContainer {
+        background: none;
+      }
+      tr.selected .innerCellContainer {
+        background: #ffffff20
+      }
+      th {
+        text-transform: uppercase;
+      }
+      th,
+      td {
+        padding: 3px 0px;
+        border-right: 1px dashed #808080;
+      }
+      .innerCellContainer {
+        padding: 7px 10px;
+      }
+      th:first-child .innerCellContainer,
+      td:first-child .innerCellContainer {
+        padding-left: 0px;
+      }
+      th:last-child .innerCellContainer,
+      td:last-child .innerCellContainer {
+        padding-right: 0px;
+      }
+      th:last-child,
+      td:last-child {
+        border-right: none;
+      }
+
+      .tableStatistics {
+        padding: 5px 20px;
+        font-size: 14px;
+        color: #ffffff90;
+        background: #00000050;
+        margin: 20px -20px -20px -20px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <!-- the heading part -->
+        <div>${this.heading1}</div>
+        <div>${this.heading2}</div>
+        <div class="headingSeparation"></div>
+
+        <!-- the actual table -->
+        <style></style>
+        ${this.data.length > 0
+          ? (() => {
+              const headings: string[] = Object.keys(this.data[0]);
+              return html`
+                <table>
+                  <tr>
+                    ${headings.map(
+                      (headingArg) => html`
+                        <th>
+                          <div class="innerCellContainer">${headingArg}</div>
+                        </th>
+                      `
+                    )}
+                  </tr>
+                  ${this.data.map(
+                    (itemArg) => html`
+                      <tr
+                        @click=${() => {
+                          this.selectedDataRow = itemArg;
+                        }}
+                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
+                      >
+                        ${headings.map(
+                          (headingArg) => html`
+                            <td>
+                              <div class="innerCellContainer">${itemArg[headingArg]}</div>
+                            </td>
+                          `
+                        )}
+                      </tr>
+                    `
+                  )}
+                </table>
+              `;
+            })()
+          : html` <div class="noDataSet">No data set!</div> `}
+        <div class="tableStatistics">
+          ${this.data.length} data rows (total) |
+          ${this.selectedDataRow ? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected` : html`No row selected`}
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {}
+}
--- a/ts_web/elements/dees-toast.ts
+++ b/ts_web/elements/dees-toast.ts
@ -0,0 +1,26 @@
+import { customElement, LitElement, TemplateResult, html } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-toast': DeesToast;
+  }
+}
+
+@customElement('dees-toast')
+export class DeesToast extends LitElement {
+
+  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, LitElement, TemplateResult, html, property } from 'lit-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 LitElement {
+  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,72 @@
+import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-windowlayer': DeesWindowLayer;
+  }
+}
+
+@customElement('dees-windowlayer')
+export class DeesWindowLayer extends LitElement {
+  // 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;
+        }
+        
+        .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;
+  }
+}
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@ -0,0 +1,17 @@
+export * from './dees-button';
+export * from './dees-chips';
+export * from './dees-form';
+export * from './dees-form-submit';
+export * from './dees-icon';
+export * from './dees-input-checkbox';
+export * from './dees-input-dropdown';
+export * from './dees-input-fileupload';
+export * from './dees-input-quantityselector';
+export * from './dees-input-radio';
+export * from './dees-input-text';
+export * from './dees-spinner';
+export * from './dees-stepper';
+export * from './dees-table';
+export * from './dees-toast';
+export * from './dees-updater';
+export * from './dees-windowlayer';
--- 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/index.ts
+++ b/ts_web/index.ts
@ -1,5 +1 @@
-import { LeleElement } from './elements/lele-element';
-
-export {
-  LeleElement
-};
+export * from './elements/index';
Author	SHA1	Message	Date
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