diff --git a/ts_web/elements/dees-stepper.ts b/ts_web/elements/dees-stepper.ts
index 78d27cd..1462338 100644
--- a/ts_web/elements/dees-stepper.ts
+++ b/ts_web/elements/dees-stepper.ts
@@ -27,40 +27,56 @@ declare global {
@customElement('dees-stepper')
export class DeesStepper extends DeesElement {
- public static demo = () => html` `;
+ public static demo = () =>
+ html`
+
+
+
+
+ Next
+
+ `,
+ 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[]}
+ >
+ `;
@property({
type: Array,
})
- public steps: IStep[] = [
- {
- title: 'Whats your name?',
- content: html`
-
-
-
-
- Next
-
- `,
- },
- {
- 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``,
- },
- ];
+ public steps: IStep[] = [];
@property({
type: Object,
@@ -115,6 +131,10 @@ export class DeesStepper extends DeesElement {
filter: opacity(0);
}
+ .stp:last-child {
+ margin-bottom: 100vh;
+ }
+
.step .stepCounter {
position: absolute;
top: 0px;
@@ -159,9 +179,20 @@ export class DeesStepper extends DeesElement {
${this.steps.map(
(stepArg) =>
- html`
- ${this.getIndexOfStep(stepArg) > 0 ? html`
<- go to previous step
` : ``}
-
Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length}
+ html`
+ ${this.getIndexOfStep(stepArg) > 0
+ ? html`
<- go to previous step
`
+ : ``}
+
+ Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
+ ${this.steps.length}
+
${stepArg.title}
${stepArg.content}
`
@@ -171,8 +202,8 @@ 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];
@@ -191,19 +222,27 @@ 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({
- vertical: true,
- horizontal: false,
- easing: 'easeInOutQuint'
- }, stepperContainer);
+ this.scroller = new domtools.plugins.SweetScroll(
+ {
+ vertical: true,
+ horizontal: false,
+ easing: 'easeInOutQuint',
+ },
+ stepperContainer
+ );
}
if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
this.selectedStep.validationFuncCalled = true;
@@ -213,7 +252,7 @@ export class DeesStepper extends DeesElement {
}
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);
@@ -221,7 +260,7 @@ export class DeesStepper extends DeesElement {
}
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];
}
}