1.0.62

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.52",
+  "version": "1.0.62",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.52",
+      "version": "1.0.62",
       "license": "MIT",
       "dependencies": {
-        "@designestate/dees-domtools": "^1.0.90",
+        "@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",
@@ -1893,9 +1893,9 @@
       }
     },
     "node_modules/@designestate/dees-domtools": {
-      "version": "1.0.90",
+      "version": "1.0.91",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.91.tgz",
-      "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
+      "integrity": "sha512-1lsp3iBfI7dX1sm+TUI7U5xjSsxlaYjs7May9LmOaxg1M8oYJtcwnFsyQ4yeAAw7Nopucm+rOGjmdODcAr8V/Q==",
       "license": "MIT",
       "dependencies": {
         "@apiglobal/typedrequest": "^1.0.56",
@@ -17435,9 +17435,9 @@
       }
     },
     "@designestate/dees-domtools": {
-      "version": "1.0.90",
+      "version": "1.0.91",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.91.tgz",
-      "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
+      "integrity": "sha512-1lsp3iBfI7dX1sm+TUI7U5xjSsxlaYjs7May9LmOaxg1M8oYJtcwnFsyQ4yeAAw7Nopucm+rOGjmdODcAr8V/Q==",
       "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.52",
+  "version": "1.0.62",
   "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.90",
+    "@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",

ts_web/elements/dees-stepper.ts

@@ -14,44 +14,69 @@ 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></dees-stepper> `;
+  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[] = [
+  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,
@@ -90,20 +115,26 @@ export class DeesStepper extends DeesElement {
         color: ${cssManager.bdTheme('#333', '#fff')};
         margin: auto;
         margin-bottom: 20px;
-        filter: opacity(0.5);
+        filter: opacity(0.5) grayscale(1);
         box-shadow: 0px 0px 3px #00000010;
+        user-select: none;
       }
 
       .step.selected {
         pointer-events: all;
-        filter: opacity(1);
+        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;
@@ -148,9 +179,20 @@ export class DeesStepper extends DeesElement {
       <div class="stepperContainer">
         ${this.steps.map(
           (stepArg) =>
-            html`<div class="step ${stepArg === this.selectedStep ? 'selected' : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? 'hiddenStep' : ''}">
+            html`<div
-              ${this.getIndexOfStep(stepArg) > 0 ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>` : ``}
+              class="step ${stepArg === this.selectedStep
-              <div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div>
+                ? '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> `
@@ -160,22 +202,19 @@ export class DeesStepper extends DeesElement {
   }
 
   public getIndexOfStep = (stepArg: IStep): number => {
-    return this.steps.findIndex(stepArg2 => stepArg === stepArg2 )
+    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 scroller: typeof domtools.plugins.SweetScroll.prototype;
 
   public async setScrollStatus() {
     await domtools.plugins.smartdelay.delayFor(50);
@@ -183,30 +222,45 @@ export class DeesStepper extends DeesElement {
     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`;
+      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) ;
+    const scrollPosition =
+      selectedStepElement.offsetTop -
+      stepperContainer.offsetHeight / 2 +
+      selectedStepElement.offsetHeight / 2;
     console.log(scrollPosition);
-    const domtoolsInstance = await domtools.DomTools.setupDomTools()
+    const domtoolsInstance = await domtools.DomTools.setupDomTools();
     if (!this.scroller) {
-      this.scroller = new domtools.plugins.sweetScroll({
+      this.scroller = new domtools.plugins.SweetScroll(
-        vertical: true,
+        {
-        horizontal: false,
+          vertical: true,
-        easing: 'easeInOutQuint'
+          horizontal: false,
-      }, stepperContainer);
+          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 goBack() {
+  public async goBack() {
-    const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
+    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);
+    const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
     this.selectedStep = this.steps[currentIndex + 1];
   }
 }