Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| aabda883cd | |||
| 5890977009 | |||
| f4aebcf4e6 | |||
| 66bf117bfc | |||
| f7ee4d77fd | |||
| ab19e97c31 | |||
| 631502b480 | |||
| ea519cf543 | |||
| 91c97cad1d | |||
| de958303e3 | |||
| 95192ea3ce | |||
| 0b1e50bbc6 | |||
| 888f07db79 | |||
| e14d83b3a7 | |||
| f4055fb8c1 | |||
| d0d4638264 | |||
| 7d63f16fc1 | |||
| 00cb552f44 | |||
| 2f52f14cf9 |
122
package-lock.json
generated
122
package-lock.json
generated
@ -1,26 +1,26 @@
|
||||
{
|
||||
"name": "@designestate/dees-catalog",
|
||||
"version": "1.0.42",
|
||||
"version": "1.0.52",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@designestate/dees-catalog",
|
||||
"version": "1.0.42",
|
||||
"version": "1.0.52",
|
||||
"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.42",
|
||||
"version": "1.0.52",
|
||||
"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",
|
||||
|
||||
@ -19,7 +19,17 @@ declare global {
|
||||
|
||||
@customElement('dees-button')
|
||||
export class DeesButton extends DeesElement {
|
||||
public static demo = () => html`<dees-button>This is a slotted Text</dees-button>`;
|
||||
public static demo = () => html`
|
||||
<dees-button>This is a slotted Text</dees-button>
|
||||
<p><dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button></p>
|
||||
<p><dees-button type="discreet">This is discreete button</dees-button></p>
|
||||
<p><dees-button disabled>This is a disabled button</dees-button></p>
|
||||
<p><dees-button type="big">This is a slotted Text</dees-button></p>
|
||||
<p><dees-button status="normal">Normal Status</dees-button></p>
|
||||
<p><dees-button disabled status="pending">Pending Status</dees-button></p>
|
||||
<p><dees-button disabled status="success">Success Status</dees-button></p>
|
||||
<p><dees-button disabled status="error">Error Status</dees-button></p>
|
||||
`;
|
||||
|
||||
@property()
|
||||
public text: string;
|
||||
@ -32,12 +42,21 @@ export class DeesButton extends DeesElement {
|
||||
})
|
||||
public disabled = false;
|
||||
|
||||
@property()
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public isHidden = false;
|
||||
|
||||
@property()
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@ -45,6 +64,7 @@ export class DeesButton extends DeesElement {
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
@ -54,12 +74,15 @@ export class DeesButton extends DeesElement {
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.1s ease;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
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;
|
||||
@ -67,12 +90,13 @@ export class DeesButton extends DeesElement {
|
||||
min-width: 100px;
|
||||
user-select: none;
|
||||
color: ${cssManager.bdTheme('#333', ' #ccc')};
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
background: #039be5;
|
||||
border: 0px dashed ${cssManager.bdTheme('#eeeff300', '#66666600')};
|
||||
border: 1px solid #039be5;
|
||||
border-top: 1px solid #039be5;
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -91,41 +115,74 @@ export class DeesButton extends DeesElement {
|
||||
|
||||
.button.highlighted {
|
||||
background: #e4002b;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.highlighted:hover {
|
||||
background: #b50021;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.discreet {
|
||||
background: none;
|
||||
border: 1px solid #9b9b9e;
|
||||
color: #000;
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
}
|
||||
|
||||
.button.discreet:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
|
||||
}
|
||||
.hidden {
|
||||
.button.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.big {
|
||||
display: inline-block;
|
||||
.button.big {
|
||||
width: 300px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0px 48px;
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.button.pending {
|
||||
border: 1px dashed ${cssManager.bdTheme('#0277bd', '#0277bd70')};
|
||||
background: ${cssManager.bdTheme('#0277bd', '#0277bd70')};
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.success {
|
||||
border: 1px dashed ${cssManager.bdTheme('#689F38', '#8BC34A70')};
|
||||
background: ${cssManager.bdTheme('#689F38', '#8BC34A70')};
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.error {
|
||||
border: 1px dashed ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
|
||||
background: ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
dees-spinner {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div
|
||||
class="button ${this.isHidden ? 'hidden' : 'block'} ${this.type} ${this.disabled
|
||||
class="button ${this.isHidden ? 'hidden' : 'block'} ${this.type} ${this.status} ${this.disabled
|
||||
? 'disabled'
|
||||
: null}"
|
||||
@click="${this.dispatchClick}"
|
||||
>
|
||||
${this.text ? this.text : html`<slot></slot>`}
|
||||
${this.status === 'normal' ? html``: html`
|
||||
<dees-spinner status="${this.status}"></dees-spinner>
|
||||
`}
|
||||
<div class="textbox">${this.text ? this.text : html`<slot></slot>`}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -28,6 +28,11 @@ export class DeesFormSubmit extends DeesElement {
|
||||
})
|
||||
public text: string;
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@ -36,7 +41,7 @@ export class DeesFormSubmit extends DeesElement {
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<dees-button @click="${this.submit}" .disabled="${this.disabled}">
|
||||
<dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled}>
|
||||
${this.text ? this.text : html`<slot></slot>`}
|
||||
</dees-button>
|
||||
`;
|
||||
|
||||
@ -7,7 +7,9 @@ import { DeesInputRadio } from './dees-input-radio';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
import { DeesFormSubmit } from './dees-form-submit';
|
||||
|
||||
export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>;
|
||||
export type TFormElement = Array<
|
||||
DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
|
||||
>;
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -18,18 +20,25 @@ declare global {
|
||||
@customElement('dees-form')
|
||||
export class DeesForm extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => {
|
||||
const form: DeesForm = eventArg.currentTarget;
|
||||
form.setStatus('freeze', 'authenticating...');
|
||||
await domtools.plugins.smartdelay.delayFor(1000);
|
||||
form.setStatus('success', 'authenticated!');
|
||||
}}>
|
||||
<dees-form
|
||||
style="display: block; margin:auto; max-width: 500px; padding: 20px"
|
||||
@formData=${async (eventArg) => {
|
||||
const form: DeesForm = eventArg.currentTarget;
|
||||
form.setStatus('pending', 'authenticating...');
|
||||
await domtools.plugins.smartdelay.delayFor(1000);
|
||||
form.setStatus('success', 'authenticated!');
|
||||
}}
|
||||
>
|
||||
<dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
|
||||
<dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
|
||||
<dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
|
||||
<dees-input-checkbox
|
||||
.required="${true}"
|
||||
key="hello3"
|
||||
label="another text"
|
||||
></dees-input-checkbox>
|
||||
<dees-form-submit>Submit</dees-form-submit>
|
||||
</dees-form>
|
||||
`;
|
||||
`;
|
||||
|
||||
public name: string = 'myform';
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
@ -61,9 +70,13 @@ export class DeesForm extends DeesElement {
|
||||
public getFormChildren() {
|
||||
const children: Array<DeesElement> = this.children as any;
|
||||
const formChildren: TFormElement = [];
|
||||
|
||||
|
||||
for (const child of children) {
|
||||
if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
|
||||
if (
|
||||
child instanceof DeesInputCheckbox ||
|
||||
child instanceof DeesInputText ||
|
||||
child instanceof DeesInputQuantitySelector
|
||||
) {
|
||||
formChildren.push(child);
|
||||
}
|
||||
}
|
||||
@ -74,7 +87,7 @@ export class DeesForm extends DeesElement {
|
||||
const children: Array<DeesElement> = this.children as any;
|
||||
let submitButton: DeesFormSubmit;
|
||||
for (const childArg of children) {
|
||||
if(childArg instanceof DeesFormSubmit) {
|
||||
if (childArg instanceof DeesFormSubmit) {
|
||||
submitButton = childArg;
|
||||
}
|
||||
}
|
||||
@ -82,9 +95,8 @@ export class DeesForm extends DeesElement {
|
||||
}
|
||||
|
||||
public async checkRequiredStatus() {
|
||||
console.log('checking the required status.')
|
||||
|
||||
|
||||
console.log('checking the required status.');
|
||||
|
||||
let requiredOK = true;
|
||||
for (const childArg of this.getFormChildren()) {
|
||||
if (childArg.required && !childArg.value) {
|
||||
@ -96,7 +108,7 @@ export class DeesForm extends DeesElement {
|
||||
|
||||
public async gatherData() {
|
||||
const children = this.getFormChildren();
|
||||
const valueObject: { [key: string]: string | number | boolean} = {};
|
||||
const valueObject: { [key: string]: string | number | boolean } = {};
|
||||
for (const child of children) {
|
||||
valueObject[child.key] = child.value;
|
||||
}
|
||||
@ -107,22 +119,40 @@ export class DeesForm extends DeesElement {
|
||||
const valueObject = await this.gatherData();
|
||||
const formDataEvent = new CustomEvent('formData', {
|
||||
detail: {
|
||||
data: valueObject
|
||||
data: valueObject,
|
||||
},
|
||||
bubbles: true
|
||||
bubbles: true,
|
||||
});
|
||||
this.dispatchEvent(formDataEvent);
|
||||
console.log('dispatched data:')
|
||||
console.log('dispatched data:');
|
||||
console.log(valueObject);
|
||||
}
|
||||
|
||||
public setStatus (visualStateArg: 'normal' | 'freeze' | 'error' | 'success', textStateArg: string) {
|
||||
public setStatus(
|
||||
visualStateArg: 'normal' | 'pending' | 'error' | 'success',
|
||||
textStateArg: string
|
||||
) {
|
||||
const inputChildren = this.getFormChildren();
|
||||
const submitButton = this.getSubmitButton();
|
||||
|
||||
switch(visualStateArg) {
|
||||
case 'freeze':
|
||||
switch (visualStateArg) {
|
||||
case 'pending':
|
||||
submitButton.disabled = true;
|
||||
submitButton.status = 'pending';
|
||||
for (const inputChild of inputChildren) {
|
||||
inputChild.disabled = true;
|
||||
}
|
||||
break;
|
||||
case 'success':
|
||||
submitButton.disabled = true;
|
||||
submitButton.status = 'success';
|
||||
for (const inputChild of inputChildren) {
|
||||
inputChild.disabled = true;
|
||||
}
|
||||
break;
|
||||
case 'error':
|
||||
submitButton.disabled = true;
|
||||
submitButton.status = 'error';
|
||||
for (const inputChild of inputChildren) {
|
||||
inputChild.disabled = true;
|
||||
}
|
||||
@ -130,6 +160,5 @@ export class DeesForm extends DeesElement {
|
||||
}
|
||||
|
||||
submitButton.text = textStateArg;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +107,7 @@ export class DeesInputCheckbox extends DeesElement {
|
||||
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
.checkbox .checkmark {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@ -116,16 +116,16 @@ export class DeesInputCheckbox extends DeesElement {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.checkmark_stem {
|
||||
.checkbox .checkmark_stem {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 9px;
|
||||
background-color: #ccc;
|
||||
background-color: #fff;
|
||||
left: 11px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.checkmark_kick {
|
||||
.checkbox .checkmark_kick {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
@ -134,6 +134,10 @@ export class DeesInputCheckbox extends DeesElement {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
|
||||
background-color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
}
|
||||
|
||||
img {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
}
|
||||
|
||||
141
ts_web/elements/dees-spinner.ts
Normal file
141
ts_web/elements/dees-spinner.ts
Normal file
@ -0,0 +1,141 @@
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
DeesElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-spinner': DeesSpinner;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-spinner')
|
||||
export class DeesSpinner extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-spinner></dees-spinner>
|
||||
<dees-spinner status="success"></dees-spinner>
|
||||
<dees-spinner status="error"></dees-spinner>
|
||||
`;
|
||||
|
||||
@property({
|
||||
type: Number,
|
||||
})
|
||||
public size = 20;
|
||||
|
||||
@property()
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#loading {
|
||||
transition: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
background: #8bc34a00;
|
||||
border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.3)')};
|
||||
border-radius: 50%;
|
||||
border-top-color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
-webkit-animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
#loading.success {
|
||||
border: 0px solid rgba(255, 255, 255, 0);
|
||||
background: #8bc34a;
|
||||
border-radius: 50%;
|
||||
animation: none;
|
||||
-webkit-animation: none;
|
||||
}
|
||||
|
||||
#loading.error {
|
||||
border: 0px solid rgba(255, 255, 255, 0);
|
||||
background: #e64a19;
|
||||
border-radius: 50%;
|
||||
animation: none;
|
||||
-webkit-animation: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#loading .checkmark {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
-ms-transform: rotate(45deg); /* IE 9 */
|
||||
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#loading .checkmark_stem {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 9px;
|
||||
background-color: #fff;
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
#loading .checkmark_kick {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #fff;
|
||||
left: 6px;
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
#loading.disabled .checkmark_stem,
|
||||
#loading.disabled .checkmark_kick {
|
||||
background-color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<style>
|
||||
#loading {
|
||||
width: ${this.size}px;
|
||||
height: ${this.size}px;
|
||||
}
|
||||
</style>
|
||||
<div class="${this.status}" id="loading">
|
||||
${this.status === 'success' || this.status === 'error'
|
||||
? html`
|
||||
<span class="checkmark">
|
||||
<div class="checkmark_stem"></div>
|
||||
<div class="checkmark_kick"></div>
|
||||
</span>
|
||||
`
|
||||
: null}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
212
ts_web/elements/dees-stepper.ts
Normal file
212
ts_web/elements/dees-stepper.ts
Normal file
@ -0,0 +1,212 @@
|
||||
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: 'Whats your name?',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text key="email" label="Your Email" value="hello@something.com" disabled></dees-input-text>
|
||||
<dees-input-text key="firstName" required label="Vorname"></dees-input-text>
|
||||
<dees-input-text key="lastName" required label="Nachname"></dees-input-text>
|
||||
<dees-form-submit>Next</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
},
|
||||
{
|
||||
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``,
|
||||
},
|
||||
];
|
||||
|
||||
@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;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
transition: all 0.7s ease-in-out;
|
||||
max-width: 500px;
|
||||
min-height: 300px;
|
||||
border-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#181818')};
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
filter: opacity(0.5);
|
||||
box-shadow: 0px 0px 3px #00000010;
|
||||
}
|
||||
|
||||
.step.selected {
|
||||
pointer-events: all;
|
||||
filter: opacity(1);
|
||||
box-shadow: 0px 0px 5px #00000010;
|
||||
}
|
||||
|
||||
.step.hiddenStep {
|
||||
filter: opacity(0);
|
||||
}
|
||||
|
||||
.step .stepCounter {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
border-bottom-left-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
|
||||
}
|
||||
|
||||
.step .goBack {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.step .goBack:hover {
|
||||
background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
|
||||
}
|
||||
|
||||
.step .title {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
font-family: Roboto;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.step .content {
|
||||
padding: 20px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<div class="stepperContainer">
|
||||
${this.steps.map(
|
||||
(stepArg) =>
|
||||
html`<div class="step ${stepArg === this.selectedStep ? 'selected' : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? 'hiddenStep' : ''}">
|
||||
${this.getIndexOfStep(stepArg) > 0 ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>` : ``}
|
||||
<div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div>
|
||||
<div class="title">${stepArg.title}</div>
|
||||
<div class="content">${stepArg.content}</div>
|
||||
</div> `
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public getIndexOfStep = (stepArg: IStep): number => {
|
||||
return this.steps.findIndex(stepArg2 => stepArg === stepArg2 )
|
||||
}
|
||||
|
||||
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 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');
|
||||
if (!stepperContainer.style.paddingTop) {
|
||||
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({
|
||||
vertical: true,
|
||||
horizontal: false,
|
||||
easing: 'easeInOutQuint'
|
||||
}, 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];
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@ import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
|
||||
import './dees-windowlayer';
|
||||
import { css, cssManager } from '@designestate/dees-element';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -26,22 +27,60 @@ export class DeesUpdater extends LitElement {
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.modalContainer {
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
margin: auto;
|
||||
max-width: 800px;
|
||||
border-radius: 3px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
|
||||
}
|
||||
|
||||
.headingContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: none;
|
||||
font-size: 20px;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin-left: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
.modalContainer {
|
||||
background: #333333;
|
||||
margin: auto;
|
||||
height: 200px;
|
||||
width: 800px;
|
||||
margin-top: 80px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,8 @@ export * from './dees-input-fileupload';
|
||||
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