diff --git a/package-lock.json b/package-lock.json
index d14c560..cedb708 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
"version": "1.0.50",
"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",
- "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
- "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
+ "version": "1.0.90",
+ "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
+ "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
"license": "MIT",
"dependencies": {
"@apiglobal/typedrequest": "^1.0.56",
@@ -17435,9 +17435,9 @@
}
},
"@designestate/dees-domtools": {
- "version": "1.0.89",
- "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz",
- "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==",
+ "version": "1.0.90",
+ "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz",
+ "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==",
"requires": {
"@apiglobal/typedrequest": "^1.0.56",
"@designestate/dees-comms": "^1.0.9",
diff --git a/package.json b/package.json
index 9d9d435..8751e12 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts
index 9e0bd47..1ca88cf 100644
--- a/ts_web/elements/dees-input-text.ts
+++ b/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 {
`;
}
diff --git a/ts_web/elements/dees-stepper.ts b/ts_web/elements/dees-stepper.ts
index e2be309..6a8f17c 100644
--- a/ts_web/elements/dees-stepper.ts
+++ b/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`
-
- `;
+ public static demo = () => html` `;
+
+ @property({
+ type: Array,
+ })
+ public steps: IStep[] = [
+ {
+ title: 'Who are you?',
+ content: html`
+
+
+
+ `,
+ },
+ {
+ 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`
- ${this.steps.map(stepArg => html`
-
- `)}
+ ${this.steps.map(
+ (stepArg) =>
+ html`
+
${stepArg.title}
+
Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length}
+
${stepArg.content}
+
`
+ )}
`;
}
-}
\ No newline at end of file
+
+ 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];
+ }
+}
diff --git a/ts_web/elements/dees-updater.ts b/ts_web/elements/dees-updater.ts
index a526c35..3e5a48e 100644
--- a/ts_web/elements/dees-updater.ts
+++ b/ts_web/elements/dees-updater.ts
@@ -60,7 +60,7 @@ export class DeesUpdater extends LitElement {
grid-template-columns: 50% 50%;
}
-
+
@@ -74,4 +74,9 @@ export class DeesUpdater extends LitElement {
>
`;
}
+
+ private windowLayerClicked() {
+ const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
+ windowLayer.toggleVisibility();
+ }
}
diff --git a/ts_web/elements/dees-windowlayer.ts b/ts_web/elements/dees-windowlayer.ts
index e4f7732..e6fb646 100644
--- a/ts_web/elements/dees-windowlayer.ts
+++ b/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`
`;
+ // INSTANCE
+ @property({
+ type: Boolean
+ })
+ public visible = false;
+
constructor() {
super();
domtools.elementBasic.setup();
@@ -22,8 +29,8 @@ export class DeesWindowLayer extends LitElement {
${domtools.elementBasic.styles}
-
+
`;
@@ -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;
+ }
}