1.0.62

package-lock.json

@@ -1,26 +1,26 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.43",
+  "version": "1.0.62",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.43",
+      "version": "1.0.62",
       "license": "MIT",
       "dependencies": {
-        "@designestate/dees-domtools": "^1.0.89",
+        "@designestate/dees-domtools": "^1.0.91",
         "@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"
+        "typescript": "^4.4.2"
       },
       "devDependencies": {
         "@gitzone/tsbuild": "^2.1.26",
-        "@gitzone/tsbundle": "^1.0.84",
+        "@gitzone/tsbundle": "^1.0.87",
         "@gitzone/tstest": "^1.0.57",
         "@gitzone/tswatch": "^1.0.56",
         "@pushrocks/projectinfo": "^4.0.5",
@@ -1893,9 +1893,9 @@
       }
     },
     "node_modules/@designestate/dees-domtools": {
-      "version": "1.0.89",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
-      "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
+      "version": "1.0.91",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.91.tgz",
+      "integrity": "sha512-1lsp3iBfI7dX1sm+TUI7U5xjSsxlaYjs7May9LmOaxg1M8oYJtcwnFsyQ4yeAAw7Nopucm+rOGjmdODcAr8V/Q==",
       "license": "MIT",
       "dependencies": {
         "@apiglobal/typedrequest": "^1.0.56",
@@ -2121,18 +2121,18 @@
       }
     },
     "node_modules/@gitzone/tsbundle": {
-      "version": "1.0.84",
-      "resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbundle/-/tsbundle-1.0.84.tgz",
-      "integrity": "sha512-BIYZyH+rCo6jqP71yeGAixMhZhjJPNh532iHfOH1Dgt91zLdXqLoC7CYv+CaLTX/J3cPKJG36GuOibC9Zb8PGw==",
+      "version": "1.0.87",
+      "resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbundle/-/tsbundle-1.0.87.tgz",
+      "integrity": "sha512-LEebE9c+Kht30JsARNPXU708pxvf248u5r3nJd9TmNIwSN4ozS5WsNmp2wxHv+qsXuuAGGq0oQh4md/UtzXIYw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.14.8",
+        "@babel/core": "^7.15.0",
         "@babel/plugin-proposal-class-properties": "^7.14.5",
         "@babel/plugin-proposal-decorators": "^7.14.5",
-        "@babel/plugin-transform-runtime": "^7.14.5",
-        "@babel/preset-env": "^7.14.8",
-        "@babel/runtime": "^7.14.8",
+        "@babel/plugin-transform-runtime": "^7.15.0",
+        "@babel/preset-env": "^7.15.0",
+        "@babel/runtime": "^7.15.3",
         "@pushrocks/early": "^3.0.6",
         "@pushrocks/smartcli": "^3.0.14",
         "@pushrocks/smartfile": "^8.0.10",
@@ -2141,18 +2141,18 @@
         "@pushrocks/smartparcel": "^1.0.9",
         "@pushrocks/smartpromise": "^3.1.6",
         "@pushrocks/smartspawn": "^2.0.9",
-        "@rollup/plugin-commonjs": "^19.0.1",
+        "@rollup/plugin-commonjs": "^20.0.0",
         "@rollup/plugin-json": "^4.1.0",
-        "@rollup/plugin-node-resolve": "^13.0.2",
-        "@rollup/plugin-typescript": "^8.2.3",
+        "@rollup/plugin-node-resolve": "^13.0.4",
+        "@rollup/plugin-typescript": "^8.2.5",
         "@types/html-minifier": "^4.0.1",
-        "@types/node": "^16.4.0",
+        "@types/node": "^16.7.4",
         "html-minifier": "^4.0.0",
-        "rollup": "^2.53.3",
+        "rollup": "^2.56.3",
         "rollup-plugin-babel": "^4.4.0",
         "rollup-plugin-sourcemaps": "^0.6.3",
         "rollup-plugin-terser": "^7.0.2",
-        "typescript": "^4.3.5"
+        "typescript": "^4.4.2"
       },
       "bin": {
         "tsbundle": "cli.js"
@@ -2198,9 +2198,9 @@
       "license": "MIT"
     },
     "node_modules/@gitzone/tsbundle/node_modules/@types/node": {
-      "version": "16.6.2",
-      "resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-16.6.2.tgz",
-      "integrity": "sha512-LSw8TZt12ZudbpHc6EkIyDM3nHVWKYrAvGy6EAJfNfjusbwnThqjqxUKKRwuV3iWYeW/LYMzNgaq3MaLffQ2xA==",
+      "version": "16.7.4",
+      "resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-16.7.4.tgz",
+      "integrity": "sha512-25QXpDsTiDnl2rZGUenagVMwO46way8dOUdvoC3R3p+6TrbpxeJBo/v87BEG1IHI31Jhaa8lPeSHcqwxsVBeYQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -3594,9 +3594,9 @@
       }
     },
     "node_modules/@rollup/plugin-commonjs": {
-      "version": "19.0.2",
-      "resolved": "https://verdaccio.lossless.one/@rollup%2fplugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
-      "integrity": "sha512-gBjarfqlC7qs0AutpRW/hrFNm+cd2/QKxhwyFa+srbg1oX7rDsEU3l+W7LAUhsAp9mPJMAkXDhLbQaVwEaE8bA==",
+      "version": "20.0.0",
+      "resolved": "https://verdaccio.lossless.one/@rollup%2fplugin-commonjs/-/plugin-commonjs-20.0.0.tgz",
+      "integrity": "sha512-5K0g5W2Ol8hAcTHqcTBHiA7M58tfmYi1o9KxeJuuRNpGaTa5iLjcyemBitCBcKXaHamOBBEH2dGom6v6Unmqjg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13711,9 +13711,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.56.2",
-      "resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.56.2.tgz",
-      "integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==",
+      "version": "2.56.3",
+      "resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.56.3.tgz",
+      "integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -15434,9 +15434,9 @@
       "license": "MIT"
     },
     "node_modules/typescript": {
-      "version": "4.3.5",
-      "resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "version": "4.4.2",
+      "resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.4.2.tgz",
+      "integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==",
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -17435,9 +17435,9 @@
       }
     },
     "@designestate/dees-domtools": {
-      "version": "1.0.89",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
-      "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
+      "version": "1.0.91",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.91.tgz",
+      "integrity": "sha512-1lsp3iBfI7dX1sm+TUI7U5xjSsxlaYjs7May9LmOaxg1M8oYJtcwnFsyQ4yeAAw7Nopucm+rOGjmdODcAr8V/Q==",
       "requires": {
         "@apiglobal/typedrequest": "^1.0.56",
         "@designestate/dees-comms": "^1.0.9",
@@ -17614,17 +17614,17 @@
       }
     },
     "@gitzone/tsbundle": {
-      "version": "1.0.84",
-      "resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbundle/-/tsbundle-1.0.84.tgz",
-      "integrity": "sha512-BIYZyH+rCo6jqP71yeGAixMhZhjJPNh532iHfOH1Dgt91zLdXqLoC7CYv+CaLTX/J3cPKJG36GuOibC9Zb8PGw==",
+      "version": "1.0.87",
+      "resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbundle/-/tsbundle-1.0.87.tgz",
+      "integrity": "sha512-LEebE9c+Kht30JsARNPXU708pxvf248u5r3nJd9TmNIwSN4ozS5WsNmp2wxHv+qsXuuAGGq0oQh4md/UtzXIYw==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.14.8",
+        "@babel/core": "^7.15.0",
         "@babel/plugin-proposal-class-properties": "^7.14.5",
         "@babel/plugin-proposal-decorators": "^7.14.5",
-        "@babel/plugin-transform-runtime": "^7.14.5",
-        "@babel/preset-env": "^7.14.8",
-        "@babel/runtime": "^7.14.8",
+        "@babel/plugin-transform-runtime": "^7.15.0",
+        "@babel/preset-env": "^7.15.0",
+        "@babel/runtime": "^7.15.3",
         "@pushrocks/early": "^3.0.6",
         "@pushrocks/smartcli": "^3.0.14",
         "@pushrocks/smartfile": "^8.0.10",
@@ -17633,18 +17633,18 @@
         "@pushrocks/smartparcel": "^1.0.9",
         "@pushrocks/smartpromise": "^3.1.6",
         "@pushrocks/smartspawn": "^2.0.9",
-        "@rollup/plugin-commonjs": "^19.0.1",
+        "@rollup/plugin-commonjs": "^20.0.0",
         "@rollup/plugin-json": "^4.1.0",
-        "@rollup/plugin-node-resolve": "^13.0.2",
-        "@rollup/plugin-typescript": "^8.2.3",
+        "@rollup/plugin-node-resolve": "^13.0.4",
+        "@rollup/plugin-typescript": "^8.2.5",
         "@types/html-minifier": "^4.0.1",
-        "@types/node": "^16.4.0",
+        "@types/node": "^16.7.4",
         "html-minifier": "^4.0.0",
-        "rollup": "^2.53.3",
+        "rollup": "^2.56.3",
         "rollup-plugin-babel": "^4.4.0",
         "rollup-plugin-sourcemaps": "^0.6.3",
         "rollup-plugin-terser": "^7.0.2",
-        "typescript": "^4.3.5"
+        "typescript": "^4.4.2"
       },
       "dependencies": {
         "@pushrocks/smartfile": {
@@ -17684,9 +17684,9 @@
           "dev": true
         },
         "@types/node": {
-          "version": "16.6.2",
-          "resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-16.6.2.tgz",
-          "integrity": "sha512-LSw8TZt12ZudbpHc6EkIyDM3nHVWKYrAvGy6EAJfNfjusbwnThqjqxUKKRwuV3iWYeW/LYMzNgaq3MaLffQ2xA==",
+          "version": "16.7.4",
+          "resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-16.7.4.tgz",
+          "integrity": "sha512-25QXpDsTiDnl2rZGUenagVMwO46way8dOUdvoC3R3p+6TrbpxeJBo/v87BEG1IHI31Jhaa8lPeSHcqwxsVBeYQ==",
           "dev": true
         },
         "argparse": {
@@ -18856,9 +18856,9 @@
       }
     },
     "@rollup/plugin-commonjs": {
-      "version": "19.0.2",
-      "resolved": "https://verdaccio.lossless.one/@rollup%2fplugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
-      "integrity": "sha512-gBjarfqlC7qs0AutpRW/hrFNm+cd2/QKxhwyFa+srbg1oX7rDsEU3l+W7LAUhsAp9mPJMAkXDhLbQaVwEaE8bA==",
+      "version": "20.0.0",
+      "resolved": "https://verdaccio.lossless.one/@rollup%2fplugin-commonjs/-/plugin-commonjs-20.0.0.tgz",
+      "integrity": "sha512-5K0g5W2Ol8hAcTHqcTBHiA7M58tfmYi1o9KxeJuuRNpGaTa5iLjcyemBitCBcKXaHamOBBEH2dGom6v6Unmqjg==",
       "dev": true,
       "requires": {
         "@rollup/pluginutils": "^3.1.0",
@@ -26552,9 +26552,9 @@
       }
     },
     "rollup": {
-      "version": "2.56.2",
-      "resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.56.2.tgz",
-      "integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==",
+      "version": "2.56.3",
+      "resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.56.3.tgz",
+      "integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -27833,9 +27833,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.3.5",
-      "resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA=="
+      "version": "4.4.2",
+      "resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.4.2.tgz",
+      "integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ=="
     },
     "uglify-js": {
       "version": "3.13.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.43",
+  "version": "1.0.62",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -13,18 +13,18 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.89",
+    "@designestate/dees-domtools": "^1.0.91",
     "@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"
+    "typescript": "^4.4.2"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.26",
-    "@gitzone/tsbundle": "^1.0.84",
+    "@gitzone/tsbundle": "^1.0.87",
     "@gitzone/tstest": "^1.0.57",
     "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",

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;
       }
 

ts_web/elements/dees-form.ts

@@ -7,7 +7,9 @@ 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>;
+export type TFormElement = Array<
+  DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
+>;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,18 +20,25 @@ declare global {
 @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-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-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();
@@ -61,9 +70,13 @@ export class DeesForm extends DeesElement {
   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) {
+      if (
+        child instanceof DeesInputCheckbox ||
+        child instanceof DeesInputText ||
+        child instanceof DeesInputQuantitySelector
+      ) {
         formChildren.push(child);
       }
     }
@@ -74,7 +87,7 @@ export class DeesForm extends DeesElement {
     const children: Array<DeesElement> = this.children as any;
     let submitButton: DeesFormSubmit;
     for (const childArg of children) {
-      if(childArg instanceof DeesFormSubmit) {
+      if (childArg instanceof DeesFormSubmit) {
         submitButton = childArg;
       }
     }
@@ -82,9 +95,8 @@ export class DeesForm extends DeesElement {
   }
 
   public async checkRequiredStatus() {
-    console.log('checking the required status.')
-    
-    
+    console.log('checking the required status.');
+
     let requiredOK = true;
     for (const childArg of this.getFormChildren()) {
       if (childArg.required && !childArg.value) {
@@ -96,7 +108,7 @@ export class DeesForm extends DeesElement {
 
   public async gatherData() {
     const children = this.getFormChildren();
-    const valueObject: { [key: string]: string | number | boolean} = {};
+    const valueObject: { [key: string]: string | number | boolean } = {};
     for (const child of children) {
       valueObject[child.key] = child.value;
     }
@@ -107,20 +119,23 @@ export class DeesForm extends DeesElement {
     const valueObject = await this.gatherData();
     const formDataEvent = new CustomEvent('formData', {
       detail: {
-        data: valueObject
+        data: valueObject,
       },
-      bubbles: true
+      bubbles: true,
     });
     this.dispatchEvent(formDataEvent);
-    console.log('dispatched data:')
+    console.log('dispatched data:');
     console.log(valueObject);
   }
 
-  public setStatus (visualStateArg: 'normal' | 'pending' | 'error' | 'success', textStateArg: string) {
+  public setStatus(
+    visualStateArg: 'normal' | 'pending' | 'error' | 'success',
+    textStateArg: string
+  ) {
     const inputChildren = this.getFormChildren();
     const submitButton = this.getSubmitButton();
 
-    switch(visualStateArg) {
+    switch (visualStateArg) {
       case 'pending':
         submitButton.disabled = true;
         submitButton.status = 'pending';
@@ -135,9 +150,15 @@ export class DeesForm extends DeesElement {
           inputChild.disabled = true;
         }
         break;
+      case 'error':
+        submitButton.disabled = true;
+        submitButton.status = 'error';
+        for (const inputChild of inputChildren) {
+          inputChild.disabled = true;
+        }
+        break;
     }
 
     submitButton.text = textStateArg;
-
   }
-}
+}

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>
     `;
   }

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;

ts_web/elements/dees-stepper.ts

@@ -0,0 +1,266 @@
+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``,
+          },
+          {
+            title: 'Whats the verification code?',
+            content: html``,
+          },
+          {
+            title: 'Whats your new password?',
+            content: html``,
+          },
+          {
+            title: 'Verification:',
+            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')};
+        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 {
+        pointer-events: all;
+        filter: opacity(1) grayscale(0);
+        box-shadow: 0px 0px 5px #00000010;
+        user-select: auto;
+      }
+
+      .step.hiddenStep {
+        filter: opacity(0);
+      }
+
+      .stp: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];
+  }
+}

ts_web/elements/dees-updater.ts

@@ -4,6 +4,7 @@ import * as domtools from '@designestate/dees-domtools';
 
 
 import './dees-windowlayer';
+import { css, cssManager } from '@designestate/dees-element';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -26,22 +27,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();
+  }
 }

ts_web/elements/dees-windowlayer.ts

@@ -10,8 +10,15 @@ declare global {
 
 @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();
@@ -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;
+  }
 }

ts_web/elements/index.ts

@@ -9,6 +9,7 @@ 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-toast';
 export * from './dees-updater';
 export * from './dees-windowlayer';