1.0.61

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.52",
+  "version": "1.0.61",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.52",
+      "version": "1.0.61",
       "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",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
-      "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
+      "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",
@@ -17435,9 +17435,9 @@
       }
     },
     "@designestate/dees-domtools": {
-      "version": "1.0.90",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
-      "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
+      "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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.52",
+  "version": "1.0.61",
   "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,6 +14,15 @@ 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')
@@ -90,14 +99,16 @@ 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 {
@@ -166,16 +177,13 @@ export class DeesStepper extends DeesElement {
   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);
@@ -191,18 +199,25 @@ export class DeesStepper extends DeesElement {
     console.log(scrollPosition);
     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,
         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);
     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() {