Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f4aebcf4e6 | |||
| 66bf117bfc | |||
| f7ee4d77fd | |||
| ab19e97c31 |
122
package-lock.json
generated
122
package-lock.json
generated
@ -1,26 +1,26 @@
|
||||
{
|
||||
"name": "@designestate/dees-catalog",
|
||||
"version": "1.0.49",
|
||||
"version": "1.0.51",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@designestate/dees-catalog",
|
||||
"version": "1.0.49",
|
||||
"version": "1.0.51",
|
||||
"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",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"typescript": "^4.3.5"
|
||||
"typescript": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.26",
|
||||
"@gitzone/tsbundle": "^1.0.84",
|
||||
"@gitzone/tsbundle": "^1.0.87",
|
||||
"@gitzone/tstest": "^1.0.57",
|
||||
"@gitzone/tswatch": "^1.0.56",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
@ -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",
|
||||
@ -2121,18 +2121,18 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@gitzone/tsbundle": {
|
||||
"version": "1.0.84",
|
||||
"resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbundle/-/tsbundle-1.0.84.tgz",
|
||||
"integrity": "sha512-BIYZyH+rCo6jqP71yeGAixMhZhjJPNh532iHfOH1Dgt91zLdXqLoC7CYv+CaLTX/J3cPKJG36GuOibC9Zb8PGw==",
|
||||
"version": "1.0.87",
|
||||
"resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbundle/-/tsbundle-1.0.87.tgz",
|
||||
"integrity": "sha512-LEebE9c+Kht30JsARNPXU708pxvf248u5r3nJd9TmNIwSN4ozS5WsNmp2wxHv+qsXuuAGGq0oQh4md/UtzXIYw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.14.8",
|
||||
"@babel/core": "^7.15.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.14.5",
|
||||
"@babel/plugin-proposal-decorators": "^7.14.5",
|
||||
"@babel/plugin-transform-runtime": "^7.14.5",
|
||||
"@babel/preset-env": "^7.14.8",
|
||||
"@babel/runtime": "^7.14.8",
|
||||
"@babel/plugin-transform-runtime": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.0",
|
||||
"@babel/runtime": "^7.15.3",
|
||||
"@pushrocks/early": "^3.0.6",
|
||||
"@pushrocks/smartcli": "^3.0.14",
|
||||
"@pushrocks/smartfile": "^8.0.10",
|
||||
@ -2141,18 +2141,18 @@
|
||||
"@pushrocks/smartparcel": "^1.0.9",
|
||||
"@pushrocks/smartpromise": "^3.1.6",
|
||||
"@pushrocks/smartspawn": "^2.0.9",
|
||||
"@rollup/plugin-commonjs": "^19.0.1",
|
||||
"@rollup/plugin-commonjs": "^20.0.0",
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.2",
|
||||
"@rollup/plugin-typescript": "^8.2.3",
|
||||
"@rollup/plugin-node-resolve": "^13.0.4",
|
||||
"@rollup/plugin-typescript": "^8.2.5",
|
||||
"@types/html-minifier": "^4.0.1",
|
||||
"@types/node": "^16.4.0",
|
||||
"@types/node": "^16.7.4",
|
||||
"html-minifier": "^4.0.0",
|
||||
"rollup": "^2.53.3",
|
||||
"rollup": "^2.56.3",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
"rollup-plugin-sourcemaps": "^0.6.3",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"typescript": "^4.3.5"
|
||||
"typescript": "^4.4.2"
|
||||
},
|
||||
"bin": {
|
||||
"tsbundle": "cli.js"
|
||||
@ -2198,9 +2198,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@gitzone/tsbundle/node_modules/@types/node": {
|
||||
"version": "16.6.2",
|
||||
"resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-16.6.2.tgz",
|
||||
"integrity": "sha512-LSw8TZt12ZudbpHc6EkIyDM3nHVWKYrAvGy6EAJfNfjusbwnThqjqxUKKRwuV3iWYeW/LYMzNgaq3MaLffQ2xA==",
|
||||
"version": "16.7.4",
|
||||
"resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-16.7.4.tgz",
|
||||
"integrity": "sha512-25QXpDsTiDnl2rZGUenagVMwO46way8dOUdvoC3R3p+6TrbpxeJBo/v87BEG1IHI31Jhaa8lPeSHcqwxsVBeYQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@ -3594,9 +3594,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs": {
|
||||
"version": "19.0.2",
|
||||
"resolved": "https://verdaccio.lossless.one/@rollup%2fplugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
|
||||
"integrity": "sha512-gBjarfqlC7qs0AutpRW/hrFNm+cd2/QKxhwyFa+srbg1oX7rDsEU3l+W7LAUhsAp9mPJMAkXDhLbQaVwEaE8bA==",
|
||||
"version": "20.0.0",
|
||||
"resolved": "https://verdaccio.lossless.one/@rollup%2fplugin-commonjs/-/plugin-commonjs-20.0.0.tgz",
|
||||
"integrity": "sha512-5K0g5W2Ol8hAcTHqcTBHiA7M58tfmYi1o9KxeJuuRNpGaTa5iLjcyemBitCBcKXaHamOBBEH2dGom6v6Unmqjg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -13711,9 +13711,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "2.56.2",
|
||||
"resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.56.2.tgz",
|
||||
"integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==",
|
||||
"version": "2.56.3",
|
||||
"resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.56.3.tgz",
|
||||
"integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
@ -15434,9 +15434,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.3.5.tgz",
|
||||
"integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.4.2.tgz",
|
||||
"integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==",
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
@ -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",
|
||||
@ -17614,17 +17614,17 @@
|
||||
}
|
||||
},
|
||||
"@gitzone/tsbundle": {
|
||||
"version": "1.0.84",
|
||||
"resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbundle/-/tsbundle-1.0.84.tgz",
|
||||
"integrity": "sha512-BIYZyH+rCo6jqP71yeGAixMhZhjJPNh532iHfOH1Dgt91zLdXqLoC7CYv+CaLTX/J3cPKJG36GuOibC9Zb8PGw==",
|
||||
"version": "1.0.87",
|
||||
"resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbundle/-/tsbundle-1.0.87.tgz",
|
||||
"integrity": "sha512-LEebE9c+Kht30JsARNPXU708pxvf248u5r3nJd9TmNIwSN4ozS5WsNmp2wxHv+qsXuuAGGq0oQh4md/UtzXIYw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/core": "^7.14.8",
|
||||
"@babel/core": "^7.15.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.14.5",
|
||||
"@babel/plugin-proposal-decorators": "^7.14.5",
|
||||
"@babel/plugin-transform-runtime": "^7.14.5",
|
||||
"@babel/preset-env": "^7.14.8",
|
||||
"@babel/runtime": "^7.14.8",
|
||||
"@babel/plugin-transform-runtime": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.0",
|
||||
"@babel/runtime": "^7.15.3",
|
||||
"@pushrocks/early": "^3.0.6",
|
||||
"@pushrocks/smartcli": "^3.0.14",
|
||||
"@pushrocks/smartfile": "^8.0.10",
|
||||
@ -17633,18 +17633,18 @@
|
||||
"@pushrocks/smartparcel": "^1.0.9",
|
||||
"@pushrocks/smartpromise": "^3.1.6",
|
||||
"@pushrocks/smartspawn": "^2.0.9",
|
||||
"@rollup/plugin-commonjs": "^19.0.1",
|
||||
"@rollup/plugin-commonjs": "^20.0.0",
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.2",
|
||||
"@rollup/plugin-typescript": "^8.2.3",
|
||||
"@rollup/plugin-node-resolve": "^13.0.4",
|
||||
"@rollup/plugin-typescript": "^8.2.5",
|
||||
"@types/html-minifier": "^4.0.1",
|
||||
"@types/node": "^16.4.0",
|
||||
"@types/node": "^16.7.4",
|
||||
"html-minifier": "^4.0.0",
|
||||
"rollup": "^2.53.3",
|
||||
"rollup": "^2.56.3",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
"rollup-plugin-sourcemaps": "^0.6.3",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"typescript": "^4.3.5"
|
||||
"typescript": "^4.4.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@pushrocks/smartfile": {
|
||||
@ -17684,9 +17684,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "16.6.2",
|
||||
"resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-16.6.2.tgz",
|
||||
"integrity": "sha512-LSw8TZt12ZudbpHc6EkIyDM3nHVWKYrAvGy6EAJfNfjusbwnThqjqxUKKRwuV3iWYeW/LYMzNgaq3MaLffQ2xA==",
|
||||
"version": "16.7.4",
|
||||
"resolved": "https://verdaccio.lossless.one/@types%2fnode/-/node-16.7.4.tgz",
|
||||
"integrity": "sha512-25QXpDsTiDnl2rZGUenagVMwO46way8dOUdvoC3R3p+6TrbpxeJBo/v87BEG1IHI31Jhaa8lPeSHcqwxsVBeYQ==",
|
||||
"dev": true
|
||||
},
|
||||
"argparse": {
|
||||
@ -18856,9 +18856,9 @@
|
||||
}
|
||||
},
|
||||
"@rollup/plugin-commonjs": {
|
||||
"version": "19.0.2",
|
||||
"resolved": "https://verdaccio.lossless.one/@rollup%2fplugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
|
||||
"integrity": "sha512-gBjarfqlC7qs0AutpRW/hrFNm+cd2/QKxhwyFa+srbg1oX7rDsEU3l+W7LAUhsAp9mPJMAkXDhLbQaVwEaE8bA==",
|
||||
"version": "20.0.0",
|
||||
"resolved": "https://verdaccio.lossless.one/@rollup%2fplugin-commonjs/-/plugin-commonjs-20.0.0.tgz",
|
||||
"integrity": "sha512-5K0g5W2Ol8hAcTHqcTBHiA7M58tfmYi1o9KxeJuuRNpGaTa5iLjcyemBitCBcKXaHamOBBEH2dGom6v6Unmqjg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@rollup/pluginutils": "^3.1.0",
|
||||
@ -26552,9 +26552,9 @@
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "2.56.2",
|
||||
"resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.56.2.tgz",
|
||||
"integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==",
|
||||
"version": "2.56.3",
|
||||
"resolved": "https://verdaccio.lossless.one/rollup/-/rollup-2.56.3.tgz",
|
||||
"integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fsevents": "~2.3.2"
|
||||
@ -27833,9 +27833,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.3.5.tgz",
|
||||
"integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA=="
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.4.2.tgz",
|
||||
"integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ=="
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.13.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@designestate/dees-catalog",
|
||||
"version": "1.0.49",
|
||||
"version": "1.0.51",
|
||||
"private": false,
|
||||
"description": "website for lossless.com",
|
||||
"main": "dist_ts_web/index.js",
|
||||
@ -13,18 +13,18 @@
|
||||
"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",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"typescript": "^4.3.5"
|
||||
"typescript": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.26",
|
||||
"@gitzone/tsbundle": "^1.0.84",
|
||||
"@gitzone/tsbundle": "^1.0.87",
|
||||
"@gitzone/tstest": "^1.0.57",
|
||||
"@gitzone/tswatch": "^1.0.56",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
|
||||
@ -64,6 +64,7 @@ export class DeesButton extends DeesElement {
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
@ -73,14 +74,15 @@ export class DeesButton extends DeesElement {
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 0.1s ease;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: ${cssManager.bdTheme('#eee', '#333')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
|
||||
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
|
||||
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
|
||||
border-radius: 2px;
|
||||
line-height: 40px;
|
||||
@ -94,7 +96,7 @@ export class DeesButton extends DeesElement {
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
background: #039be5;
|
||||
border: 0px dashed ${cssManager.bdTheme('#eeeff300', '#66666600')};
|
||||
border: 1px solid #039be5;
|
||||
border-top: 1px solid #039be5;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="label">${this.label}</div>
|
||||
<input type="text" @input="${this.updateValue}" .disabled=${this.disabled} />
|
||||
<input type="text" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
172
ts_web/elements/dees-stepper.ts
Normal file
172
ts_web/elements/dees-stepper.ts
Normal file
@ -0,0 +1,172 @@
|
||||
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> `;
|
||||
|
||||
@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();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.stepperContainer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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: ${cssManager.bdTheme('#ffffff', '#222')};
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
filter: opacity(0.5);
|
||||
box-shadow: 0px 0px 3px #00000010;
|
||||
}
|
||||
|
||||
.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 ${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];
|
||||
}
|
||||
}
|
||||
@ -31,17 +31,52 @@ export class DeesUpdater extends LitElement {
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
.modalContainer {
|
||||
background: #333333;
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
background: #222;
|
||||
margin: auto;
|
||||
height: 200px;
|
||||
width: 800px;
|
||||
margin-top: 80px;
|
||||
border-radius: 10px;
|
||||
max-width: 800px;
|
||||
border-radius: 3px;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.headingContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
margin-left: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
</style>
|
||||
<dees-windowlayer>
|
||||
<div class="modalContainer"></div>
|
||||
<dees-windowlayer @clicked="${this.windowLayerClicked}">
|
||||
<div class="modalContainer">
|
||||
<div class="headingContainer">
|
||||
<dees-spinner .size=${60}></dees-spinner>
|
||||
<h1>Updating the application...</h1>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<dees-button>More info</dees-button>
|
||||
<dees-button>Changelog</dees-button>
|
||||
</div>
|
||||
</div>
|
||||
</dees-windowlayer>>
|
||||
`;
|
||||
}
|
||||
|
||||
private windowLayerClicked() {
|
||||
const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
|
||||
windowLayer.toggleVisibility();
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,8 +10,15 @@ declare global {
|
||||
|
||||
@customElement('dees-windowlayer')
|
||||
export class DeesWindowLayer extends LitElement {
|
||||
// STATIC
|
||||
public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public visible = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
@ -22,21 +29,28 @@ export class DeesWindowLayer extends LitElement {
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
.windowOverlay {
|
||||
transition: all 1s;
|
||||
transition: all 0.3s;
|
||||
will-change: transform;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.0);
|
||||
backdrop-filter: blur(0px);
|
||||
backdrop-filter: brightness(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(3px);
|
||||
backdrop-filter: brightness(0.3);
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
<div class="windowOverlay">
|
||||
<div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
@ -44,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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ export * from './dees-input-quantityselector';
|
||||
export * from './dees-input-radio';
|
||||
export * from './dees-input-text';
|
||||
export * from './dees-spinner';
|
||||
export * from './dees-stepper';
|
||||
export * from './dees-toast';
|
||||
export * from './dees-updater';
|
||||
export * from './dees-windowlayer';
|
||||
|
||||
Reference in New Issue
Block a user