fix(core): update

ts_web/elements/dees-stepper.ts

@@ -1,26 +1,60 @@
-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`
-    <dees-stepper></dees-stepper>
-  `;
+  public static demo = () => html` <dees-stepper></dees-stepper> `;
+
+  @property({
+    type: Array,
+  })
+  public steps: IStep[] = [
+    {
+      title: 'Who are you?',
+      content: html`
+        <dees-form>
+          <dees-input-text label="Your Email" value="hello@something.com" disabled></dees-input-text>
+        </dees-form>
+      `,
+    },
+    {
+      title: 'Verification:',
+      content: html``,
+    },
+    {
+      title: 'Verification:',
+      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 +67,106 @@ export class DeesStepper extends DeesElement {
         position: absolute;
         width: 100%;
         height: 100%;
-        background: #111;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
         overflow: hidden;
       }
 
       .step {
+        position: relative;
+        overflow: hidden;
+        transition: all 0.7s ease-out;
         max-width: 600px;
         min-height: 300px;
         border-radius: 10px;
-        background: #222;
+        background: ${cssManager.bdTheme('#ffffff', '#222')};
+        color: ${cssManager.bdTheme('#333', '#fff')};
         margin: auto;
         margin-bottom: 20px;
-
+        filter: opacity(0.5);
+        box-shadow: 0px 0px 3px #00000010;
       }
-    `
-  ]
 
-  public render () {
+      .step.selected {
+        filter: opacity(1);
+        box-shadow: 0px 0px 5px #00000010;
+      }
+
+      .step .stepCounter {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        padding: 10px 15px;
+        font-size: 12px;
+        border-bottom-left-radius: 10px;
+        background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
+      }
+
+      .step .title {
+        text-align: center;
+        padding: 30px;
+        font-family: Roboto;
+        font-size: 25px;
+        font-weight: 300;
+      }
+    `,
+  ];
+
+  public render() {
     return html`
       <div class="stepperContainer">
-        ${this.steps.map(stepArg => html`
-          <div class="step"></div>
-        `)}
+        ${this.steps.map(
+          (stepArg) =>
+            html` <div class="step ${stepArg === this.selectedStep ? 'selected' : null}">
+              <div class="title">${stepArg.title}</div>
+              <div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div>
+              <div class="content">${stepArg.content}</div>
+            </div> `
+        )}
       </div>
     `;
   }
-}
+
+  public firstUpdated() {
+    this.selectedStep = this.steps[0];
+    this.setScrollStatus();
+    domtools.plugins.smartdelay.delayFor(2000).then(() => {
+      this.selectedStep = this.steps[1];
+      domtools.plugins.smartdelay.delayFor(2000).then(() => {
+        this.goBack();
+      })
+    })
+  }
+
+  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');
+    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({}, 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];
+  }
+}