1.0.52

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.50",
+      "version": "1.0.52",
       "license": "MIT",
       "dependencies": {
-        "@designestate/dees-domtools": "^1.0.89",
+        "@designestate/dees-domtools": "^1.0.90",
         "@designestate/dees-element": "^1.0.19",
         "@designestate/dees-wcctools": "^1.0.57",
         "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -1893,9 +1893,9 @@
       }
     },
     "node_modules/@designestate/dees-domtools": {
-      "version": "1.0.89",
+      "version": "1.0.90",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
-      "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
+      "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
       "license": "MIT",
       "dependencies": {
         "@apiglobal/typedrequest": "^1.0.56",
@@ -17435,9 +17435,9 @@
       }
     },
     "@designestate/dees-domtools": {
-      "version": "1.0.89",
+      "version": "1.0.90",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
-      "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
+      "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
       "requires": {
         "@apiglobal/typedrequest": "^1.0.56",
         "@designestate/dees-comms": "^1.0.9",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -13,7 +13,7 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.89",
+    "@designestate/dees-domtools": "^1.0.90",
     "@designestate/dees-element": "^1.0.19",
     "@designestate/dees-wcctools": "^1.0.57",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",

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-stepper.ts

@@ -1,26 +1,67 @@
-import { DeesElement, customElement, html, css, unsafeCSS, cssManager, property } from '@designestate/dees-element';
+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;
+}
+
 @customElement('dees-stepper')
 export class DeesStepper extends DeesElement {
-  public static demo = () => html`
+  public static demo = () => html` <dees-stepper></dees-stepper> `;
-    <dees-stepper></dees-stepper>
+
-  `;
+  @property({
+    type: Array,
+  })
+  public steps: IStep[] = [
+    {
+      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>
+      `,
+    },
+    {
+      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``,
+    },
+  ];
+
+  @property({
+    type: Object,
+  })
+  public selectedStep: IStep;
 
   constructor() {
     super();
   }
 
-  @property({
-    type: Array
-  })
-  public steps = [{
-    title: 'Who are you?'
-  }, {
-    title: 'Verification:'
-  }]
-
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -33,29 +74,139 @@ export class DeesStepper extends DeesElement {
         position: absolute;
         width: 100%;
         height: 100%;
-        background: #111;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
         overflow: hidden;
       }
 
       .step {
-        max-width: 600px;
+        position: relative;
+        pointer-events: none;
+        overflow: hidden;
+        transition: all 0.7s ease-in-out;
+        max-width: 500px;
         min-height: 300px;
-        border-radius: 10px;
+        border-radius: 3px;
-        background: #222;
+        background: ${cssManager.bdTheme('#ffffff', '#181818')};
+        color: ${cssManager.bdTheme('#333', '#fff')};
         margin: auto;
         margin-bottom: 20px;
-
+        filter: opacity(0.5);
+        box-shadow: 0px 0px 3px #00000010;
       }
-    `
-  ]
 
-  public render () {
+      .step.selected {
+        pointer-events: all;
+        filter: opacity(1);
+        box-shadow: 0px 0px 5px #00000010;
+      }
+
+      .step.hiddenStep {
+        filter: opacity(0);
+      }
+
+      .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`
+        ${this.steps.map(
-          <div class="step"></div>
+          (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();
+    domtools.plugins.smartdelay.delayFor(2000).then(() => {
+      this.goNext();
+    })
+  }
+
+  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);
+    }
+    this.scroller.to(scrollPosition);
+  }
+
+  public goBack() {
+    const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
+    this.selectedStep = this.steps[currentIndex - 1];
+  }
+
+  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,18 +27,17 @@ export class DeesUpdater extends LitElement {
     domtools.elementBasic.setup();
   }
 
-  public render(): TemplateResult {
+  public static styles = [
-    return html`
+    cssManager.defaultStyles,
-      ${domtools.elementBasic.styles}
+    css`
-      <style>
+      .modalContainer {
-        .modalContainer {
           will-change: transform;
           position: relative;
-          background: #222;
+          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
           margin: auto;
           max-width: 800px;
           border-radius: 3px;
-          border-top: 1px solid #333;
+          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
         }
 
         .headingContainer {
@@ -50,7 +50,7 @@ export class DeesUpdater extends LitElement {
         h1 {
           margin: none;
           font-size: 20px;
-          color: #fff;
+          color: ${cssManager.bdTheme('#333', '#fff')};
           margin-left: 20px;
           font-weight: normal;
         }
@@ -59,8 +59,12 @@ export class DeesUpdater extends LitElement {
           display: grid;
           grid-template-columns: 50% 50%;
         }
-      </style>
+    `
-      <dees-windowlayer>
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <dees-windowlayer @clicked="${this.windowLayerClicked}">
         <div class="modalContainer">
           <div class="headingContainer">
             <dees-spinner .size=${60}></dees-spinner>
@@ -74,4 +78,9 @@ export class DeesUpdater extends LitElement {
       </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,8 +29,8 @@ export class DeesWindowLayer extends LitElement {
       ${domtools.elementBasic.styles}
       <style>
         .windowOverlay {
+          transition: all 0.3s;
           will-change: transform;
-          transition: all 1s;
           position: fixed;
           top: 0px;
           left: 0px;
@@ -33,15 +40,17 @@ export class DeesWindowLayer extends LitElement {
           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: brightness(0.3);
+          pointer-events: all;
         }
       </style>
-      <div class="windowOverlay">
+      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
         <slot></slot>
       </div>
     `;
@@ -49,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;
+  }
 }