1.0.75

fix(core): update
1.0.74
2022-03-18 19:40:29 +01:00 · 2022-03-18 19:40:28 +01:00 · 2022-01-24 01:39:48 +01:00 · 2022-01-24 01:39:47 +01:00 · 2021-12-10 18:18:57 +01:00 · 2021-12-10 18:18:57 +01:00
26 changed files with 10110 additions and 17257 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -12,6 +12,9 @@ stages:
  - release
  - metadata

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

 auditDevDependencies:
  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
@ -96,10 +100,9 @@ codequality:
  only:
    - tags
  script:
-    - npmci command npm install -g tslint typescript
+    - npmci command npm install -g typescript
    - npmci npm prepare
    - npmci npm install
-    - npmci command "tslint -c tslint.json ./ts/**/*.ts"
  tags:
    - lossless
    - docker
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -2,28 +2,10 @@
  "version": "0.2.0",
  "configurations": [
    {
-      "name": "current file",
-      "type": "node",
+      "command": "npm test",
+      "name": "Run npm test",
      "request": "launch",
-      "args": [
-        "${relativeFile}"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "name": "test.ts",
-      "type": "node",
-      "request": "launch",
-      "args": [
-        "test/test.ts"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
+      "type": "node-terminal"
    }
  ]
 }
--- a/html/index.html
+++ b/html/index.html
@ -17,7 +17,7 @@
      }
    </style>

-    <script src="./index.ts"></script>
+    <script src="./bundle.js"></script>
  </head>
  <body>
  </body>
--- a/html/index.ts
+++ b/html/index.ts
@ -3,8 +3,8 @@ import * as deesWccTools from '@designestate/dees-wcctools';
 import * as deesDomTools from '@designestate/dees-domtools';

 // elements and pages
-import * as elements from '../ts_web/elements';
-import * as pages from '../ts_web/pages';
+import * as elements from '../ts_web/elements/index.js';
+import * as pages from '../ts_web/pages/index.js';

 deesWccTools.setupWccTools(elements as any, pages);
 deesDomTools.elementBasic.setup();
--- a/5
+++ b/5
@ -8,7 +8,10 @@ copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+copies or substantial portions of the Software. You agree to being mentioned
+as reference by Lossless GmbH. This includes the use of your entity logos
+or profile picture by Lossless GmbH on websites and readme's, also on third party
+pages like gitlab.com or github.com.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
--- a/npmextra.json
+++ b/npmextra.json
@ -5,7 +5,7 @@
      "githost": "gitlab.com",
      "gitscope": "designestate",
      "gitrepo": "dees-catalog",
-      "shortDescription": "a webcomponents catalog for handling daily stuff on the web",
+      "description": "a webcomponents catalog for handling daily stuff on the web",
      "npmPackagename": "@designestate/dees-catalog",
      "license": "MIT",
      "projectDomain": "design.estate"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,36 +1,34 @@
 {
  "name": "@designestate/dees-catalog",
-  "version": "1.0.44",
+  "version": "1.0.75",
  "private": false,
  "description": "website for lossless.com",
  "main": "dist_ts_web/index.js",
  "typings": "dist_ts_web/index.d.ts",
+  "type": "module",
  "scripts": {
    "test": "tstest test/ --web",
-    "build": "tsbuild element && tsbundle element --production",
+    "build": "tsbuild element --allowimplicitany --skiplibcheck && tsbundle element --production",
    "watch": "tswatch element"
  },
  "author": "Lossless GmbH",
  "license": "MIT",
  "dependencies": {
-    "@designestate/dees-domtools": "^1.0.89",
-    "@designestate/dees-element": "^1.0.19",
-    "@designestate/dees-wcctools": "^1.0.57",
-    "@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.3.5"
+    "@designestate/dees-domtools": "^2.0.1",
+    "@designestate/dees-element": "^2.0.2",
+    "@designestate/dees-wcctools": "^1.0.68",
+    "@fortawesome/fontawesome-svg-core": "^6.1.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.0",
+    "@fortawesome/free-regular-svg-icons": "^6.1.0",
+    "@fortawesome/free-solid-svg-icons": "^6.1.0"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.26",
-    "@gitzone/tsbundle": "^1.0.84",
-    "@gitzone/tstest": "^1.0.57",
-    "@gitzone/tswatch": "^1.0.56",
+    "@gitzone/tsbuild": "^2.1.59",
+    "@gitzone/tsbundle": "^1.0.101",
+    "@gitzone/tstest": "^1.0.69",
+    "@gitzone/tswatch": "^1.0.68",
    "@pushrocks/projectinfo": "^4.0.5",
-    "@pushrocks/tapbundle": "^3.2.14",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.17.0"
+    "@pushrocks/tapbundle": "^5.0.2"
  },
  "files": [
    "ts/**/*",
--- a/ts_web/elements/dees-button.ts
+++ b/ts_web/elements/dees-button.ts
@ -64,6 +64,7 @@ export class DeesButton extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    css`
+
      :host {
        display: block;
        box-sizing: border-box;
@ -73,14 +74,15 @@ export class DeesButton extends DeesElement {
      }

      .button {
+        transition: all 0.1s ease;
        position: relative;
-        transition: all 0.2s ease;
        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;
@ -94,7 +96,7 @@ export class DeesButton extends DeesElement {
      .button:hover {
        cursor: pointer;
        background: #039be5;
-        border: 0px dashed ${cssManager.bdTheme('#eeeff300', '#66666600')};
+        border: 1px solid #039be5;
        border-top: 1px solid #039be5;
        color: #ffffff;
      }
@ -145,17 +147,20 @@ export class DeesButton extends DeesElement {
      }

      .button.pending {
-        background: #0277bd70;
+        border: 1px dashed ${cssManager.bdTheme('#0277bd', '#0277bd70')};
+        background: ${cssManager.bdTheme('#0277bd', '#0277bd70')};
        color: #fff;
      }

      .button.success {
-        background: #8BC34A70;
+        border: 1px dashed ${cssManager.bdTheme('#689F38', '#8BC34A70')};
+        background: ${cssManager.bdTheme('#689F38', '#8BC34A70')};
        color: #fff;
      }

      .button.error {
-        background: #E64A1970;
+        border: 1px dashed ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
+        background: ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
        color: #fff;
      }

--- 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
@ -6,7 +6,7 @@ import {
  cssManager,
  property,
 } from '@designestate/dees-element';
-import { DeesForm } from './dees-form';
+import { DeesForm } from './dees-form.js';

 declare global {
  interface HTMLElementTagNameMap {
--- a/ts_web/elements/dees-form.ts
+++ b/ts_web/elements/dees-form.ts
@ -1,11 +1,11 @@
 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';
+
+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
@ -103,7 +103,9 @@ export class DeesForm extends DeesElement {
        requiredOK = false;
      }
    }
-    this.getSubmitButton().disabled = !requiredOK;
+    if (this.getSubmitButton()) {
+      this.getSubmitButton().disabled = !requiredOK;
+    }
  }

  public async gatherData() {
@ -136,6 +138,13 @@ export class DeesForm extends DeesElement {
    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';
--- a/ts_web/elements/dees-icon.ts
+++ b/ts_web/elements/dees-icon.ts
@ -1,4 +1,4 @@
-import { LitElement, html, property, customElement } from 'lit-element';
+import { DeesElement, html, property, customElement } from '@designestate/dees-element';

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

@ -48,8 +48,9 @@ declare global {
 }

@customElement('dees-icon')
-export class DeesIcon extends LitElement {
+export class DeesIcon extends DeesElement {
  public static demo = () => html`
+    <dees-icon iconName="visibility"></dees-icon>
    <div style="background: #fff; padding: 10px;">
      <dees-icon iconName="visibility"></dees-icon>
      <dees-icon brandName="facebook"></dees-icon>
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@ -1,4 +1,4 @@
-import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';

 declare global {
@ -8,7 +8,7 @@ declare global {
 }

@customElement('dees-input-dropdown')
-export class DeesInputDropdown extends LitElement {
+export class DeesInputDropdown extends DeesElement {
  public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`

  // INSTANCE
--- a/ts_web/elements/dees-input-radio.ts
+++ b/ts_web/elements/dees-input-radio.ts
@ -1,4 +1,4 @@
-import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
+import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';

 declare global {
@ -8,7 +8,7 @@ declare global {
 }

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

  // INSTANCE
--- a/ts_web/elements/dees-input-text.ts
+++ b/ts_web/elements/dees-input-text.ts
@ -27,7 +27,7 @@ export class DeesInputText extends DeesElement {
  @property({
    type: String
  })
-  public value: string;
+  public value: string = '';

  @property({
    type: Boolean
@ -94,7 +94,7 @@ export class DeesInputText extends DeesElement {
      </style>
      <div class="maincontainer">
        <div class="label">${this.label}</div>
-        <input type="text" @input="${this.updateValue}" .disabled=${this.disabled} />
+        <input type="text" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
      </div>
    `;
  }
--- 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
@ -45,7 +45,7 @@ export class DeesSpinner extends DeesElement {
      }

      #loading {
-        transition: all 0.3s;
+        transition: none;
        display: flex;
        justify-content: center;
        align-content: center;
--- 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
@ -1,4 +1,4 @@
-import { customElement, LitElement, TemplateResult, html } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, html } from '@designestate/dees-element';

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

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

@customElement('dees-toast')
-export class DeesToast extends LitElement {
+export class DeesToast extends DeesElement {

  constructor() {
    super();
--- a/ts_web/elements/dees-updater.ts
+++ b/ts_web/elements/dees-updater.ts
@ -1,9 +1,10 @@
-import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';

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


 import './dees-windowlayer';
+import { css, cssManager } from '@designestate/dees-element';

 declare global {
  interface HTMLElementTagNameMap {
@ -12,13 +13,17 @@ declare global {
 }

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

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

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

  constructor() {
@ -26,22 +31,60 @@ export class DeesUpdater extends LitElement {
    domtools.elementBasic.setup();
  }

+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .modalContainer {
+          will-change: transform;
+          position: relative;
+          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+          margin: auto;
+          max-width: 800px;
+          border-radius: 3px;
+          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
+        }
+
+        .headingContainer {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 40px 40px;
+        }
+
+        h1 {
+          margin: none;
+          font-size: 20px;
+          color: ${cssManager.bdTheme('#333', '#fff')};
+          margin-left: 20px;
+          font-weight: normal;
+        }
+
+        .buttonContainer {
+          display: grid;
+          grid-template-columns: 50% 50%;
+        }
+    `
+  ]
+
  public render(): TemplateResult {
    return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        .modalContainer {
-          background: #333333;
-          margin: auto;
-          height: 200px;
-          width: 800px;
-          margin-top: 80px;
-          border-radius: 10px;
-        }
-      </style>
-      <dees-windowlayer>
-        <div class="modalContainer"></div>
+      <dees-windowlayer @clicked="${this.windowLayerClicked}">
+        <div class="modalContainer">
+          <div class="headingContainer">
+            <dees-spinner .size=${60}></dees-spinner>
+            <h1>Updating the application...</h1>
+          </div>
+          <div class="buttonContainer">
+            <dees-button>More info</dees-button>
+            <dees-button>Changelog</dees-button>
+          </div>
+        </div>
      </dees-windowlayer>>
    `;
  }
+
+  private windowLayerClicked() {
+    const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
+    windowLayer.toggleVisibility();
+  }
 }
--- a/ts_web/elements/dees-windowlayer.ts
+++ b/ts_web/elements/dees-windowlayer.ts
@ -1,4 +1,4 @@
-import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
+import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';

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

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

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

+  // INSTANCE
+  @property({
+    type: Boolean
+  })
+  public visible = false;
+
  constructor() {
    super();
    domtools.elementBasic.setup();
@ -22,21 +29,28 @@ export class DeesWindowLayer extends LitElement {
      ${domtools.elementBasic.styles}
      <style>
        .windowOverlay {
-          transition: all 1s;
+          transition: all 0.3s;
+          will-change: transform;
          position: fixed;
          top: 0px;
          left: 0px;
          height: 100vh;
          width: 100vw;
+          display: flex;
+          justify-content: center;
+          align-items: center;
          background: rgba(0, 0, 0, 0.0);
-          backdrop-filter: blur(0px);
+          backdrop-filter: brightness(1);
+          pointer-events: none;
        }
+        
        .visible {
          background: rgba(0, 0, 0, 0.2);
-          backdrop-filter: blur(3px);
+          backdrop-filter: brightness(0.3);
+          pointer-events: all;
        }
      </style>
-      <div class="windowOverlay">
+      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
        <slot></slot>
      </div>
    `;
@ -44,7 +58,15 @@ export class DeesWindowLayer extends LitElement {

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