Compare commits
277 Commits
Author | SHA1 | Date | |
---|---|---|---|
f26f0d0450 | |||
53fadfcbd5 | |||
497d3a3ac5 | |||
37524765ae | |||
ab0219d3e4 | |||
7cefd9cba5 | |||
4cf5ca2d7f | |||
a9791220fb | |||
4aed14c7a2 | |||
49d1cba3fd | |||
9bacca3070 | |||
42e7ae6d6b | |||
a8b244520c | |||
9879a2cb6a | |||
e2a54c6f18 | |||
dfd13e641a | |||
2284159b72 | |||
1de86c6bfa | |||
62087a686a | |||
572deb990e | |||
719c63a092 | |||
9d9700214f | |||
bc82e110ef | |||
fe15ebe82d | |||
1b8577d300 | |||
ef4cfb81d8 | |||
abea5942b7 | |||
a6274e9a2d | |||
8b3752f586 | |||
c8e1d24224 | |||
dbd7748ac0 | |||
68984d5702 | |||
5237439f88 | |||
c3df73616f | |||
a03b095d14 | |||
9a18658e09 | |||
2910757e8c | |||
a00bacd4ff | |||
01963447dd | |||
5d1d1ba4ba | |||
7885422033 | |||
fb48425c13 | |||
3792c5edf5 | |||
2abd91ab4a | |||
310910e8ee | |||
3301ad1556 | |||
0f8a7a5a7b | |||
f1a0c5741c | |||
cbf60db9fa | |||
34d5bda579 | |||
916ba68c94 | |||
46fc396772 | |||
0e77baf600 | |||
89fd8b5080 | |||
884f9725b5 | |||
48e093b1ba | |||
2b3875d738 | |||
279d1c2f3f | |||
29f2839d5b | |||
96683b4380 | |||
36fbf7f29e | |||
67d4c216ed | |||
9d51cdd480 | |||
d6679ca41f | |||
baadd1e06b | |||
600ab56026 | |||
ae40a9f541 | |||
48f7768b96 | |||
de3f9fcb34 | |||
313009d3ff | |||
83ede1edea | |||
ec50b4b3a0 | |||
4fbb1caaeb | |||
41a2529275 | |||
41ff71e6b0 | |||
2d07765c16 | |||
15db9fb6d9 | |||
73d92624de | |||
0d77685338 | |||
05bbfccd22 | |||
5cca89de37 | |||
ab5b7a5b89 | |||
253d5623c4 | |||
1048192bfa | |||
289e6d37fa | |||
7308c1454f | |||
cfc880d7c2 | |||
c32cff8126 | |||
4526c0c365 | |||
45e7f39af0 | |||
26b72fbccf | |||
8acf3f4196 | |||
75c8b409cc | |||
6509ddb81c | |||
7cc0173e3c | |||
f797d71e52 | |||
54db88e4b4 | |||
93c73c36c8 | |||
9c9bd4a180 | |||
0a54de3e59 | |||
d6b4b59e6d | |||
c4236d28c6 | |||
5f1b29f742 | |||
e7978a22e4 | |||
15de86774b | |||
8f57647c85 | |||
59c5bcabd5 | |||
cae421e140 | |||
05b2b09395 | |||
4dbd4f84c1 | |||
bb0ca2f19d | |||
55175f9ac7 | |||
0be0f9fa34 | |||
7baab5d7ea | |||
c3bdec176b | |||
2a84e2c270 | |||
c86f7d466c | |||
9a6db7d882 | |||
b69b1179a1 | |||
0df9fe750c | |||
0d05bfa5ff | |||
4dc9e04c2e | |||
5341a0d6b6 | |||
615bea9fc4 | |||
e518bc6976 | |||
076f8c7a91 | |||
b016b959cf | |||
eca68e28a2 | |||
68a164aac2 | |||
9b5448e096 | |||
232d063485 | |||
6a357cb227 | |||
7b8218ab77 | |||
5b6436b023 | |||
57edbb872b | |||
76f82fe15e | |||
0b03718f4a | |||
2754de26d8 | |||
abc91600e2 | |||
6a8a4aa4d2 | |||
6a6f3b1907 | |||
0dc8e21e07 | |||
68ccc02699 | |||
ed1c18b8ac | |||
e8cc4c7c90 | |||
187ebed3ab | |||
b909617271 | |||
9c2fe9f739 | |||
ed49de64bc | |||
162003ba7a | |||
5f793f0acc | |||
d23b298bd5 | |||
f9e2f00e9b | |||
6c3645f2f8 | |||
e3a6798469 | |||
60de4ef674 | |||
02e029edbc | |||
ff5a65bdce | |||
daacbbd042 | |||
42b44be143 | |||
7e4c186e66 | |||
f6823639cc | |||
f292fd9692 | |||
fa2ab7730a | |||
3a2ba14287 | |||
c1b5778d01 | |||
24a5f48ce1 | |||
d43b80298b | |||
27d338420c | |||
81f2e662fb | |||
d8905b687f | |||
75f6da194b | |||
e653450ec5 | |||
9de9f0c202 | |||
75929c089d | |||
6a97e8d020 | |||
6aeb970bbe | |||
ea7fa0816d | |||
1b1de04f86 | |||
7941628d1d | |||
369437ceba | |||
72f7782898 | |||
820d6ae40f | |||
5dd3da9f31 | |||
3ce0683a05 | |||
00d41f1b6e | |||
caba7ada28 | |||
6cff32cc36 | |||
e6e8ac9782 | |||
7a13fdcd95 | |||
c450fb32ea | |||
6554bfd721 | |||
9ce4ca14b8 | |||
76bcda760c | |||
6949aed381 | |||
1f3502685f | |||
8d1451fffa | |||
8b2fedf1d6 | |||
30ffb2650a | |||
55b65c7e4c | |||
5c81dd540a | |||
cb5bc809ea | |||
ab1956c452 | |||
3b99796073 | |||
20755775ea | |||
4e1b797377 | |||
4a3aa2d6d9 | |||
4e49045444 | |||
9e54c973d5 | |||
122c535dec | |||
aabda883cd | |||
5890977009 | |||
f4aebcf4e6 | |||
66bf117bfc | |||
f7ee4d77fd | |||
ab19e97c31 | |||
631502b480 | |||
ea519cf543 | |||
91c97cad1d | |||
de958303e3 | |||
95192ea3ce | |||
0b1e50bbc6 | |||
888f07db79 | |||
e14d83b3a7 | |||
f4055fb8c1 | |||
d0d4638264 | |||
7d63f16fc1 | |||
00cb552f44 | |||
2f52f14cf9 | |||
54ce305cf1 | |||
9d5f0b5ff8 | |||
c1594736ec | |||
4eb1abaa39 | |||
b8c231fc61 | |||
260c4a269a | |||
c1e7629f1f | |||
b84e2c4774 | |||
e9374900a0 | |||
486b8cb6a6 | |||
0adb319616 | |||
a6e7adc983 | |||
59dfbb34bb | |||
cf34cea94d | |||
7f5e72c27f | |||
4311c0fff6 | |||
e028f37493 | |||
c6967156d6 | |||
efaf2a78df | |||
e6adbf9b6d | |||
e88605a4aa | |||
6a161982b7 | |||
22d7883c04 | |||
2a613c96a0 | |||
bdd766e4bc | |||
b1ce8f093f | |||
056090856e | |||
fef0705acc | |||
6eced2321f | |||
05a9042de8 | |||
d369805ee8 | |||
3a2f3500fd | |||
2f9711a094 | |||
cf80efd1ec | |||
cf5cd37ebc | |||
88554396a4 | |||
2f13311098 | |||
5407b158d0 | |||
b171eaf3fc | |||
5585d7e304 | |||
02119a1ce4 | |||
222f06bda7 | |||
8ee99136cc | |||
faf35c3144 | |||
ae53459d56 | |||
5e1a32633a | |||
4b1b3ac615 | |||
9f8a5fedfa |
@ -12,30 +12,38 @@ stages:
|
||||
- release
|
||||
- metadata
|
||||
|
||||
before_script:
|
||||
- pnpm install -g pnpm
|
||||
- pnpm install -g @shipzone/npmci
|
||||
- npmci npm prepare
|
||||
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
mirror:
|
||||
stage: security
|
||||
script:
|
||||
- npmci git mirror
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
audit:
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
auditProductionDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci command npm install --ignore-scripts
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command npm audit --audit-level=high
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command pnpm audit --audit-level=high --prod
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
allow_failure: true
|
||||
|
||||
auditDevDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command pnpm audit --audit-level=high --dev
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
# ====================
|
||||
# test stage
|
||||
@ -44,28 +52,22 @@ audit:
|
||||
testStable:
|
||||
stage: test
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci npm test
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- priv
|
||||
|
||||
testBuild:
|
||||
stage: test
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci command npm run build
|
||||
- npmci npm build
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
release:
|
||||
stage: release
|
||||
@ -85,11 +87,12 @@ release:
|
||||
codequality:
|
||||
stage: metadata
|
||||
allow_failure: true
|
||||
only:
|
||||
- tags
|
||||
script:
|
||||
- npmci command npm install -g tslint typescript
|
||||
- npmci command npm install -g typescript
|
||||
- npmci npm prepare
|
||||
- npmci npm install
|
||||
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
@ -109,11 +112,9 @@ trigger:
|
||||
pages:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci node install lts
|
||||
- npmci command npm install -g @gitzone/tsdoc
|
||||
- npmci npm prepare
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci command tsdoc
|
||||
- npmci command npm run buildDocs
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
|
24
.vscode/launch.json
vendored
24
.vscode/launch.json
vendored
@ -2,28 +2,10 @@
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "current file",
|
||||
"type": "node",
|
||||
"command": "npm test",
|
||||
"name": "Run npm test",
|
||||
"request": "launch",
|
||||
"args": [
|
||||
"${relativeFile}"
|
||||
],
|
||||
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"protocol": "inspector",
|
||||
"internalConsoleOptions": "openOnSessionStart"
|
||||
},
|
||||
{
|
||||
"name": "test.ts",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"args": [
|
||||
"test/test.ts"
|
||||
],
|
||||
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"protocol": "inspector",
|
||||
"internalConsoleOptions": "openOnSessionStart"
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -15,7 +15,7 @@
|
||||
"properties": {
|
||||
"projectType": {
|
||||
"type": "string",
|
||||
"enum": ["website", "element", "service", "npm"]
|
||||
"enum": ["website", "element", "service", "npm", "wcc"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
<!--gitzone element-->
|
||||
<!-- made by Lossless GmbH -->
|
||||
<!-- made by Task Venture Capital GmbH -->
|
||||
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -9,7 +9,12 @@
|
||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
||||
/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
@ -18,9 +23,8 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../ts_web/index.ts"></script>
|
||||
<script type="module" src="/bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<></>
|
||||
</body>
|
||||
</html>
|
||||
|
10
html/index.ts
Normal file
10
html/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
// dees tools
|
||||
import * as deesWccTools from '@designestate/dees-wcctools';
|
||||
import * as deesDomTools from '@designestate/dees-domtools';
|
||||
|
||||
// elements and pages
|
||||
import * as elements from '../ts_web/elements/index.js';
|
||||
import * as pages from '../ts_web/pages/index.js';
|
||||
|
||||
deesWccTools.setupWccTools(elements as any, pages);
|
||||
deesDomTools.elementBasic.setup();
|
5
license
5
license
@ -8,7 +8,10 @@ copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
copies or substantial portions of the Software. You agree to being mentioned
|
||||
as reference by Lossless GmbH. This includes the use of your entity logos
|
||||
or profile picture by Lossless GmbH on websites and readme's, also on third party
|
||||
pages like gitlab.com or github.com.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
|
@ -1,11 +1,11 @@
|
||||
{
|
||||
"gitzone": {
|
||||
"projectType": "element",
|
||||
"projectType": "wcc",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "designestate",
|
||||
"gitrepo": "dees-catalog",
|
||||
"shortDescription": "a webcomponents catalog for handling daily stuff on the web",
|
||||
"description": "a webcomponents catalog for handling daily stuff on the web",
|
||||
"npmPackagename": "@designestate/dees-catalog",
|
||||
"license": "MIT",
|
||||
"projectDomain": "design.estate"
|
||||
|
9798
package-lock.json
generated
9798
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
47
package.json
47
package.json
@ -1,31 +1,41 @@
|
||||
{
|
||||
"name": "@losslessone_private/dees-catalog",
|
||||
"version": "1.0.18",
|
||||
"name": "@designestate/dees-catalog",
|
||||
"version": "1.0.157",
|
||||
"private": false,
|
||||
"description": "website for lossless.com",
|
||||
"main": "dist_ts_web/index.js",
|
||||
"typings": "dist_ts_web/index.d.ts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "npm run build",
|
||||
"build": "tsbuild custom ts_web --web",
|
||||
"watch": "tswatch element"
|
||||
"test": "tstest test/ --web",
|
||||
"build": "tsbuild element --allowimplicitany && tsbundle element --production",
|
||||
"watch": "tswatch element",
|
||||
"buildDocs": "tsdoc"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@gitzone/tsrun": "^1.1.17",
|
||||
"@pushrocks/smartexpress": "^3.0.10",
|
||||
"lit-element": "^2.0.0-rc.5",
|
||||
"lit-html": "^1.0.0-rc.2",
|
||||
"typescript": "^3.2.2"
|
||||
"@designestate/dees-domtools": "^2.0.30",
|
||||
"@designestate/dees-element": "^2.0.20",
|
||||
"@designestate/dees-wcctools": "^1.0.76",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.4.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||
"@pushrocks/smartpromise": "^4.0.0",
|
||||
"@pushrocks/smartstring": "^4.0.5",
|
||||
"@tsclass/tsclass": "^4.0.36",
|
||||
"highlight.js": "11.7.0",
|
||||
"pdfjs-dist": "^2.15.349"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.8",
|
||||
"@gitzone/tswatch": "^1.0.30",
|
||||
"@pushrocks/parcel-plugin-wrapper": "^1.0.5",
|
||||
"@pushrocks/projectinfo": "^4.0.2",
|
||||
"tslint": "^5.11.0",
|
||||
"tslint-config-prettier": "^1.17.0"
|
||||
"@gitzone/tsbuild": "^2.1.65",
|
||||
"@gitzone/tsbundle": "^2.0.7",
|
||||
"@gitzone/tstest": "^1.0.74",
|
||||
"@gitzone/tswatch": "^2.0.7",
|
||||
"@pushrocks/projectinfo": "^5.0.1",
|
||||
"@pushrocks/tapbundle": "^5.0.4",
|
||||
"@types/node": "^18.15.11"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
@ -38,5 +48,8 @@
|
||||
"cli.js",
|
||||
"npmextra.json",
|
||||
"readme.md"
|
||||
],
|
||||
"browserslist": [
|
||||
"last 1 chrome versions"
|
||||
]
|
||||
}
|
||||
|
4617
pnpm-lock.yaml
generated
Normal file
4617
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
readme.md
28
readme.md
@ -8,16 +8,25 @@ a webcomponents catalog for handling daily stuff on the web
|
||||
* [docs (typedoc)](https://designestate.gitlab.io/dees-catalog/)
|
||||
|
||||
## Status for master
|
||||
[](https://gitlab.com/designestate/dees-catalog/commits/master)
|
||||
[](https://gitlab.com/designestate/dees-catalog/commits/master)
|
||||
[](https://www.npmjs.com/package/@designestate/dees-catalog)
|
||||
[](https://snyk.io/test/npm/@designestate/dees-catalog)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://prettier.io/)
|
||||
|
||||
Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||
npm | [](https://lossless.cloud)
|
||||
Snyk | [](https://lossless.cloud)
|
||||
TypeScript Support | [](https://lossless.cloud)
|
||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
|
||||
## Usage
|
||||
|
||||
## Contribution
|
||||
|
||||
We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
|
||||
|
||||
## Contribution
|
||||
|
||||
@ -25,7 +34,6 @@ We are always happy for code contributions. If you are not the code contributing
|
||||
|
||||
For further information read the linked docs at the top of this readme.
|
||||
|
||||
> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
|
||||
## Legal
|
||||
> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||
|
||||
[](https://maintainedby.lossless.com)
|
||||
|
12
test/test.browser.ts
Normal file
12
test/test.browser.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { tap, expect, webhelpers } from '@pushrocks/tapbundle';
|
||||
|
||||
import * as deesCatalog from '../ts_web';
|
||||
|
||||
tap.test('should create a working button', async () => {
|
||||
const button: deesCatalog.DeesButton = await webhelpers.fixture(
|
||||
webhelpers.html`<dees-button></dees-button>`
|
||||
);
|
||||
expect(button).toBeInstanceOf(deesCatalog.DeesButton);
|
||||
});
|
||||
|
||||
tap.start();
|
8
ts_web/00_commitinfo_data.ts
Normal file
8
ts_web/00_commitinfo_data.ts
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@designestate/dees-catalog',
|
||||
version: '1.0.157',
|
||||
description: 'website for lossless.com'
|
||||
}
|
47
ts_web/elements/dees-button-exit.ts
Normal file
47
ts_web/elements/dees-button-exit.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import {
|
||||
cssManager,
|
||||
customElement,
|
||||
DeesElement,
|
||||
html,
|
||||
TemplateResult,
|
||||
css,
|
||||
state,
|
||||
property
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
@customElement('dees-button-exit')
|
||||
export class DeesButtonExit extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = () => html`
|
||||
<dees-button-exit></dees-button-exit>
|
||||
`;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Number
|
||||
})
|
||||
public size: number = 24;
|
||||
|
||||
public styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
|
||||
`
|
||||
]
|
||||
|
||||
public render (): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
.maincontainer {
|
||||
position: relative;
|
||||
width: ${this.size}px;
|
||||
height: ${this.size}px;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="firstLine"></div>
|
||||
<div class="secondLine"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
217
ts_web/elements/dees-button.ts
Normal file
217
ts_web/elements/dees-button.ts
Normal file
@ -0,0 +1,217 @@
|
||||
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-button': DeesButton;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-button')
|
||||
export class DeesButton extends DeesElement {
|
||||
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({
|
||||
reflect: true,
|
||||
hasChanged() {
|
||||
return true;
|
||||
}
|
||||
})
|
||||
public text: string;
|
||||
|
||||
@property()
|
||||
public eventDetailData: string;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public disabled = false;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public isHidden = false;
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 0.1s , color 0s;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: ${cssManager.bdTheme('#fff', '#333')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
|
||||
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
|
||||
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
|
||||
border-radius: 4px;
|
||||
line-height: 40px;
|
||||
padding: 0px 8px;
|
||||
min-width: 100px;
|
||||
user-select: none;
|
||||
color: ${cssManager.bdTheme('#333', ' #ccc')};
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
background: #039be5;
|
||||
color: #ffffff;
|
||||
border: 1px solid #039be5;
|
||||
border-top: 1px solid #039be5;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background: #0277bd;
|
||||
border-top: 1px solid #0277bd;
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
|
||||
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
|
||||
color: #9b9b9e;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.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: ${cssManager.bdTheme('#000', '#fff')};
|
||||
}
|
||||
|
||||
.button.discreet:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
|
||||
}
|
||||
.button.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button.big {
|
||||
width: 300px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0px 48px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.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.status} ${this.disabled
|
||||
? 'disabled'
|
||||
: null}"
|
||||
@click="${this.dispatchClick}"
|
||||
>
|
||||
${this.status === 'normal' ? html``: html`
|
||||
<dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
|
||||
`}
|
||||
<div class="textbox">${this.text ? this.text : this.textContent}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async dispatchClick() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('clicked', {
|
||||
detail: {
|
||||
data: this.eventDetailData,
|
||||
},
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
if (!this.textContent) {
|
||||
this.textContent = 'Button';
|
||||
this.performUpdate();
|
||||
}
|
||||
}
|
||||
}
|
123
ts_web/elements/dees-chips.ts
Normal file
123
ts_web/elements/dees-chips.ts
Normal file
@ -0,0 +1,123 @@
|
||||
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-chips': DeesChips;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-chips')
|
||||
export class DeesChips extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-chips .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
|
||||
<dees-chips selectionMode="multiple" .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
|
||||
|
||||
`;
|
||||
|
||||
@property()
|
||||
public selectionMode: 'single' | 'multiple' = 'single';
|
||||
|
||||
@property({
|
||||
type: Array
|
||||
})
|
||||
public selectableChips: string[] = [];
|
||||
|
||||
@property()
|
||||
public selectedChip: string = null;
|
||||
|
||||
@property({
|
||||
type: Array
|
||||
})
|
||||
public selectedChips: string[] = [];
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
|
||||
}
|
||||
|
||||
.chip {
|
||||
background: #494949;
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
border-radius: 40px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
background: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip.selected {
|
||||
background: #00A3FF;
|
||||
}
|
||||
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainbox">
|
||||
${this.selectableChips.map(chipArg => html`
|
||||
<div @click=${() => this.selectChip(chipArg)} class="chip ${this.selectedChip === chipArg || this.selectedChips.includes(chipArg) ? 'selected' : ''}">
|
||||
${chipArg}
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
if (!this.textContent) {
|
||||
this.textContent = 'Button';
|
||||
this.performUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
public async selectChip(chipArg: string) {
|
||||
if (this.selectionMode === 'single') {
|
||||
if (this.selectedChip === chipArg) {
|
||||
this.selectedChip = null;
|
||||
this.selectedChips = [];
|
||||
} else {
|
||||
this.selectedChip = chipArg;
|
||||
this.selectedChips = [chipArg];
|
||||
}
|
||||
} else if(this.selectionMode === 'multiple') {
|
||||
if (this.selectedChips.includes(chipArg)) {
|
||||
this.selectedChips = this.selectedChips.filter(chipArg2 => chipArg !== chipArg2)
|
||||
} else {
|
||||
this.selectedChips.push(chipArg);
|
||||
}
|
||||
this.requestUpdate();
|
||||
}
|
||||
console.log(this.selectedChips);
|
||||
}
|
||||
}
|
180
ts_web/elements/dees-contextmenu.ts
Normal file
180
ts_web/elements/dees-contextmenu.ts
Normal file
@ -0,0 +1,180 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
DeesElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
import { DeesWindowLayer } from './dees-windowlayer.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-contextmenu': DeesContextmenu;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-contextmenu')
|
||||
export class DeesContextmenu extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = () => html`
|
||||
<style>
|
||||
.withMargin {
|
||||
display: block;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
<dees-button @contextmenu=${(eventArg) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'copy',
|
||||
iconName: 'copySolid',
|
||||
action: async () => {
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
iconName: 'penToSquare',
|
||||
action: async () => {
|
||||
return null;
|
||||
},
|
||||
},{
|
||||
name: 'paste',
|
||||
iconName: 'pasteSolid',
|
||||
action: async () => {
|
||||
return null;
|
||||
},
|
||||
},
|
||||
]);
|
||||
}}>Hello</dees-button>
|
||||
<dees-contextmenu class="withMargin"></dees-contextmenu>
|
||||
<dees-contextmenu
|
||||
class="withMargin"
|
||||
.menuItems=${[
|
||||
{
|
||||
name: 'copy',
|
||||
iconName: 'copySolid',
|
||||
action: async () => {},
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
iconName: 'penToSquare',
|
||||
action: async () => {},
|
||||
},{
|
||||
name: 'paste',
|
||||
iconName: 'pasteSolid',
|
||||
action: async () => {},
|
||||
},
|
||||
] as plugins.tsclass.website.IMenuItem[]}
|
||||
></dees-contextmenu>
|
||||
`;
|
||||
|
||||
// STATIC
|
||||
public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
|
||||
eventArg.preventDefault();
|
||||
const contextMenu = new DeesContextmenu();
|
||||
contextMenu.style.position = 'absolute';
|
||||
contextMenu.style.top = `${eventArg.clientY.toString()}px`;
|
||||
contextMenu.style.left = `${eventArg.clientX.toString()}px`;
|
||||
contextMenu.style.opacity = '0';
|
||||
contextMenu.style.transform = 'scale(0.95,0.95)';
|
||||
contextMenu.style.transformOrigin = 'top left';
|
||||
contextMenu.menuItems = menuItemsArg;
|
||||
document.body.append(contextMenu);
|
||||
await domtools.plugins.smartdelay.delayFor(0);
|
||||
contextMenu.style.opacity = '1';
|
||||
contextMenu.style.transform = 'scale(1,1)';
|
||||
}
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
color: ${cssManager.bdTheme('#222', '#ccc')};
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
border: 1px solid #444;
|
||||
min-height: 40px;
|
||||
border-radius: 3px;
|
||||
background: #222;
|
||||
box-shadow: 0px 1px 4px #000;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mainbox .menuitem {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.mainbox .menuitem dees-icon {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.mainbox .menuitem:hover {
|
||||
cursor: pointer;
|
||||
background: #ffffff10;
|
||||
}
|
||||
|
||||
.mainbox .menuitem:active {
|
||||
cursor: pointer;
|
||||
background: #ffffff05;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainbox">
|
||||
${this.menuItems.map((menuItemArg) => {
|
||||
return html`
|
||||
<div class="menuitem" @click=${() => this.handleClick(menuItemArg)}>
|
||||
<dees-icon .iconFA=${(menuItemArg.iconName as any) || 'minus'}></dees-icon
|
||||
>${menuItemArg.name}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
if (!this.menuItems || this.menuItems.length === 0) {
|
||||
const mainbox = this.shadowRoot.querySelector('.mainbox');
|
||||
mainbox.textContent = 'no menu items present';
|
||||
}
|
||||
}
|
||||
|
||||
public async handleClick(menuItem: plugins.tsclass.website.IMenuItem) {
|
||||
menuItem.action();
|
||||
await this.destroy();
|
||||
}
|
||||
|
||||
public async destroy() {
|
||||
this.style.opacity = '0';
|
||||
this.style.transform = 'scale(0.95,0,95)';
|
||||
await domtools.plugins.smartdelay.delayFor(100);
|
||||
this.parentElement.removeChild(this);
|
||||
}
|
||||
}
|
169
ts_web/elements/dees-dataview-codebox.ts
Normal file
169
ts_web/elements/dees-dataview-codebox.ts
Normal file
@ -0,0 +1,169 @@
|
||||
import {
|
||||
DeesElement,
|
||||
html,
|
||||
customElement,
|
||||
TemplateResult,
|
||||
property,
|
||||
state,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import hlight from 'highlight.js';
|
||||
|
||||
import * as smartstring from '@pushrocks/smartstring';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-dataview-codebox': DeesDataviewCodebox;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-dataview-codebox')
|
||||
export class DeesDataviewCodebox extends DeesElement {
|
||||
public static demo = () => html`<dees-dataview-codebox proglang="typescript">
|
||||
import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
|
||||
console.log('nice one'); }
|
||||
</dees-dataview-codebox>`;
|
||||
|
||||
@property()
|
||||
public progLang: string = 'typescript';
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public codeToDisplay: string = '// no code set';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
color: ${this.goBright ? '#333333' : '#ffffff'};
|
||||
}
|
||||
|
||||
.languageLabel {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
background: #6596ff;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
padding: 4px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.hljs-keyword {
|
||||
color: #ff65ec;
|
||||
}
|
||||
|
||||
.codegrid {
|
||||
display: grid;
|
||||
grid-template-columns: 50px auto;
|
||||
background: ${this.goBright ? '#ffffff' : '#191919'};
|
||||
border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
|
||||
box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lineNumbers {
|
||||
background: ${this.goBright ? '#fafafa' : '#151515'};
|
||||
color: ${this.goBright ? '#acacac' : '#666666'};
|
||||
padding: 30px 16px 0px 0px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.lineCounter:last-child {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
margin: 0px;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: ${this.goBright ? '400' : '300'};
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
code,
|
||||
code *,
|
||||
.lineNumbers {
|
||||
line-height: 1.4em;
|
||||
font-weight: 200;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.hljs-string {
|
||||
color: #ffa465;
|
||||
}
|
||||
|
||||
.hljs-built_in {
|
||||
color: #65ff6a;
|
||||
}
|
||||
|
||||
.hljs-function {
|
||||
color: ${this.goBright ? '#2765DF': '#6596ff' };
|
||||
}
|
||||
|
||||
.hljs-params {
|
||||
color: ${this.goBright ? '#3DB420' : '#65d5ff' };
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: ${this.goBright ? '#EF9300' : '#ffd765' };
|
||||
}
|
||||
</style>
|
||||
<div class="mainbox">
|
||||
<div class="languageLabel">${this.progLang}</div>
|
||||
<div class="codegrid">
|
||||
<div class="lineNumbers">
|
||||
${(() => {
|
||||
let lineCounter = 0;
|
||||
return this.codeToDisplay.split('\n').map(lineArg => {
|
||||
lineCounter++;
|
||||
return html`<div class="lineCounter">${lineCounter}</div>`;
|
||||
})
|
||||
})()}
|
||||
</div>
|
||||
<pre><code class="${this.progLang}">${this.codeToDisplay}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async updated(_changedProperties) {
|
||||
super.updated(_changedProperties);
|
||||
console.log('highlighting now');
|
||||
console.log(this.childNodes);
|
||||
const slottedCodeNodes: Text[] = [];
|
||||
this.childNodes.forEach((childNode) => {
|
||||
if (childNode.nodeName === '#text') {
|
||||
slottedCodeNodes.push(childNode as Text);
|
||||
}
|
||||
});
|
||||
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText) {
|
||||
this.codeToDisplay = smartstring.indent.normalize(slottedCodeNodes[0].wholeText);
|
||||
}
|
||||
await domtools.plugins.smartdelay.delayFor(0);
|
||||
const localCodeNode = this.shadowRoot.querySelector('code');
|
||||
hlight.highlightBlock(localCodeNode);
|
||||
}
|
||||
}
|
168
ts_web/elements/dees-dataview-statusobject.ts
Normal file
168
ts_web/elements/dees-dataview-statusobject.ts
Normal file
@ -0,0 +1,168 @@
|
||||
import {
|
||||
DeesElement,
|
||||
html,
|
||||
customElement,
|
||||
TemplateResult,
|
||||
property,
|
||||
state,
|
||||
cssManager,
|
||||
css,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
import hlight from 'highlight.js';
|
||||
|
||||
import * as smartstring from '@pushrocks/smartstring';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-dataview-statusobject': DeesDataviewStatusobject;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-dataview-statusobject')
|
||||
export class DeesDataviewStatusobject extends DeesElement {
|
||||
public static demo = () => html`<dees-dataview-statusobject
|
||||
.statusObject=${{
|
||||
id: '1',
|
||||
name: 'Demo Item',
|
||||
combinedStatus: 'partly_ok',
|
||||
combinedStatusText: 'partly_ok',
|
||||
details: [
|
||||
{
|
||||
name: 'Detail 1',
|
||||
value: 'Value 1',
|
||||
status: 'ok',
|
||||
statusText: 'OK',
|
||||
},
|
||||
{
|
||||
name: 'Detail 2',
|
||||
value: 'Value 2',
|
||||
status: 'partly_ok',
|
||||
statusText: 'partly_ok',
|
||||
},
|
||||
{
|
||||
name: 'Detail 3',
|
||||
value: 'Value 3',
|
||||
status: 'not_ok',
|
||||
statusText: 'not_ok',
|
||||
},
|
||||
{
|
||||
name: 'Detail 4',
|
||||
value: 'Value 4',
|
||||
status: 'ok',
|
||||
statusText: 'OK',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
</dees-dataview-statusobject>`;
|
||||
|
||||
@property({ type: Object }) statusObject: tsclass.code.IStatusObject;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.mainbox {
|
||||
max-width: 600px;
|
||||
border-radius: 3px;
|
||||
background: #1b1b1b;
|
||||
min-height: 48px;
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 40px auto 120px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: 48px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.statusdot {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 6px;
|
||||
background: grey;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.copyMain {
|
||||
cursor: pointer;
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid ${cssManager.bdTheme('#999', '#444')};
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.statusdot.ok {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.statusdot.not_ok{
|
||||
background: red;
|
||||
}
|
||||
|
||||
.statusdot.partly_ok {
|
||||
background: orange;
|
||||
}
|
||||
|
||||
.detail {
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 40px auto;
|
||||
border-top: 1px dotted ${cssManager.bdTheme('#999', '#444')};
|
||||
}
|
||||
|
||||
.detail .detailsText .label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail .detailsText .value {
|
||||
font-size: 16px;
|
||||
font-family: Roboto Mono;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainbox">
|
||||
<div class="heading">
|
||||
<div class="statusdot ${this.statusObject.combinedStatus}"></div>
|
||||
<h1>${this.statusObject?.name || 'no status object assigned'}</h1>
|
||||
<div class="copyMain">Copy as JSON</div>
|
||||
</div>
|
||||
${this.statusObject.details.map((detailArg) => {
|
||||
return html`
|
||||
<div class="detail">
|
||||
<div class="statusdot ${detailArg.status}"></div>
|
||||
<div class="detailsText">
|
||||
<div class="label">${detailArg.name}</div>
|
||||
<div class="value">${detailArg.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async firstUpdated() {}
|
||||
}
|
56
ts_web/elements/dees-form-submit.ts
Normal file
56
ts_web/elements/dees-form-submit.ts
Normal file
@ -0,0 +1,56 @@
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
DeesElement,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
} from '@designestate/dees-element';
|
||||
import { DeesForm } from './dees-form.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-form-submit': DeesFormSubmit;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-form-submit')
|
||||
export class DeesFormSubmit extends DeesElement {
|
||||
public static demo = () => html`<dees-form-submit>This is a sloted text</dees-form-submit>`;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public disabled = false;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public text: string;
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [cssManager.defaultStyles, css``];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled} .text=${this.text ? this.text : this.textContent}>
|
||||
</dees-button>
|
||||
`;
|
||||
}
|
||||
|
||||
public async submit() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
const parentElement: DeesForm = this.parentElement as DeesForm;
|
||||
parentElement.gatherAndDispatch();
|
||||
}
|
||||
}
|
173
ts_web/elements/dees-form.ts
Normal file
173
ts_web/elements/dees-form.ts
Normal file
@ -0,0 +1,173 @@
|
||||
import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
import { DeesInputCheckbox } from './dees-input-checkbox.js';
|
||||
import { DeesInputText } from './dees-input-text.js';
|
||||
import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
|
||||
import { DeesInputRadio } from './dees-input-radio.js';
|
||||
import { DeesFormSubmit } from './dees-form-submit.js';
|
||||
|
||||
export type TFormElement = Array<
|
||||
DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
|
||||
>;
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-form': DeesForm;
|
||||
}
|
||||
}
|
||||
|
||||
@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('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-form-submit>Submit</dees-form-submit>
|
||||
</dees-form>
|
||||
`;
|
||||
|
||||
public name: string = 'myform';
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
|
||||
public firstUpdated() {
|
||||
const formChildren = this.getFormChildren();
|
||||
this.checkRequiredStatus();
|
||||
for (const child of formChildren) {
|
||||
child.changeSubject.subscribe(async (elementArg: TFormElement) => {
|
||||
const valueObject = await this.gatherData();
|
||||
this.changeSubject.next(valueObject);
|
||||
console.log(valueObject);
|
||||
this.checkRequiredStatus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
) {
|
||||
formChildren.push(child);
|
||||
}
|
||||
}
|
||||
return formChildren;
|
||||
}
|
||||
|
||||
public getSubmitButton() {
|
||||
const children: Array<DeesElement> = this.children as any;
|
||||
let submitButton: DeesFormSubmit;
|
||||
for (const childArg of children) {
|
||||
if (childArg instanceof DeesFormSubmit) {
|
||||
submitButton = childArg;
|
||||
}
|
||||
}
|
||||
return submitButton;
|
||||
}
|
||||
|
||||
public async checkRequiredStatus() {
|
||||
console.log('checking the required status.');
|
||||
|
||||
let requiredOK = true;
|
||||
for (const childArg of this.getFormChildren()) {
|
||||
if (childArg.required && !childArg.value) {
|
||||
requiredOK = false;
|
||||
}
|
||||
}
|
||||
if (this.getSubmitButton()) {
|
||||
this.getSubmitButton().disabled = !requiredOK;
|
||||
}
|
||||
}
|
||||
|
||||
public async gatherData() {
|
||||
const children = this.getFormChildren();
|
||||
const valueObject: { [key: string]: string | number | boolean } = {};
|
||||
for (const child of children) {
|
||||
valueObject[child.key] = child.value;
|
||||
}
|
||||
return valueObject;
|
||||
}
|
||||
|
||||
public async gatherAndDispatch() {
|
||||
const valueObject = await this.gatherData();
|
||||
const formDataEvent = new CustomEvent('formData', {
|
||||
detail: {
|
||||
data: valueObject,
|
||||
},
|
||||
bubbles: true,
|
||||
});
|
||||
this.dispatchEvent(formDataEvent);
|
||||
console.log('dispatched data:');
|
||||
console.log(valueObject);
|
||||
}
|
||||
|
||||
public setStatus(
|
||||
visualStateArg: 'normal' | 'pending' | 'error' | 'success',
|
||||
textStateArg: string
|
||||
) {
|
||||
const inputChildren = this.getFormChildren();
|
||||
const submitButton = this.getSubmitButton();
|
||||
|
||||
switch (visualStateArg) {
|
||||
case 'normal':
|
||||
submitButton.disabled = false;
|
||||
submitButton.status = 'normal';
|
||||
for (const inputChild of inputChildren) {
|
||||
inputChild.disabled = false;
|
||||
}
|
||||
break;
|
||||
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;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
submitButton.text = textStateArg;
|
||||
}
|
||||
}
|
203
ts_web/elements/dees-icon.ts
Normal file
203
ts_web/elements/dees-icon.ts
Normal file
@ -0,0 +1,203 @@
|
||||
import {
|
||||
DeesElement,
|
||||
html,
|
||||
property,
|
||||
customElement,
|
||||
cssManager,
|
||||
css,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
||||
import {
|
||||
faFacebook,
|
||||
faGoogle,
|
||||
faLinkedin,
|
||||
faMedium,
|
||||
faSlackHash,
|
||||
faTwitter,
|
||||
faInstagram,
|
||||
faTiktok,
|
||||
} from '@fortawesome/free-brands-svg-icons';
|
||||
|
||||
import {
|
||||
faCopy as faCopyRegular,
|
||||
faCircleCheck as faCircleCheckRegular,
|
||||
faCircleXmark as faCircleXmarkRegular,
|
||||
faMessage as faMessageRegular,
|
||||
faPaste as faPasteRegular,
|
||||
faSun as faSunRegular,
|
||||
} from '@fortawesome/free-regular-svg-icons';
|
||||
import {
|
||||
faArrowRight as faArrowRightSolid,
|
||||
faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid,
|
||||
faBell as faBellSolid,
|
||||
faBug as faBugSolid,
|
||||
faBuilding as faBuildingSolid,
|
||||
faCaretLeft as faCaretLeftSolid,
|
||||
faCaretRight as faCaretRightSolid,
|
||||
faCheck as faCheckSolid,
|
||||
faCircleInfo as faCircleInfoSolid,
|
||||
faCircleCheck as faCircleCheckSolid,
|
||||
faCircleXmark as faCircleXmarkSolid,
|
||||
faCopy as faCopySolid,
|
||||
faDesktop as faDesktopSolid,
|
||||
faEye as faEyeSolid,
|
||||
faEyeSlash as faEyeSlashSolid,
|
||||
faGrip as faGripSolid,
|
||||
faMessage as faMessageSolid,
|
||||
faMugHot as faMugHotSolid,
|
||||
faMinus as faMinusSolid,
|
||||
faPaste as faPasteSolid,
|
||||
faPenToSquare as faPenToSquareSolid,
|
||||
faRss as faRssSolid,
|
||||
faUsers as faUsersSolid,
|
||||
faShare as faShareSolid,
|
||||
faSun as faSunSolid,
|
||||
faXmark as faXmarkSolid,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export const faIcons = {
|
||||
// normal
|
||||
arrowRight: faArrowRightSolid,
|
||||
arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
|
||||
arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
|
||||
bell: faBellSolid,
|
||||
bellSolid: faBellSolid,
|
||||
bug: faBugSolid,
|
||||
bugSolid: faBugSolid,
|
||||
building: faBuildingSolid,
|
||||
buildingSolid: faBuildingSolid,
|
||||
caretLeft: faCaretLeftSolid,
|
||||
caretLeftSolid: faCaretLeftSolid,
|
||||
caretRight: faCaretRightSolid,
|
||||
caretRightSolid: faCaretRightSolid,
|
||||
check: faCheckSolid,
|
||||
checkSolid: faCheckSolid,
|
||||
circleInfo: faCircleInfoSolid,
|
||||
circleInfoSolid: faCircleInfoSolid,
|
||||
circleCheck: faCircleCheckRegular,
|
||||
circleCheckSolid: faCircleCheckSolid,
|
||||
circleXmark: faCircleXmarkRegular,
|
||||
circleXmarkSolid: faCircleXmarkSolid,
|
||||
copy: faCopyRegular,
|
||||
copySolid: faCopySolid,
|
||||
desktop: faDesktopSolid,
|
||||
desktopSolid: faDesktopSolid,
|
||||
eye: faEyeSolid,
|
||||
eyeSolid: faEyeSolid,
|
||||
eyeSlash: faEyeSlashSolid,
|
||||
eyeSlashSolid: faEyeSlashSolid,
|
||||
grip: faGripSolid,
|
||||
gripSolid: faGripSolid,
|
||||
message: faMessageRegular,
|
||||
messageSolid: faMessageSolid,
|
||||
mugHot: faMugHotSolid,
|
||||
faMugHotSolid: faMugHotSolid,
|
||||
minus: faMinusSolid,
|
||||
minusSolid: faMinusSolid,
|
||||
paste: faPasteRegular,
|
||||
pasteSolid: faPasteSolid,
|
||||
penToSquare: faPenToSquareSolid,
|
||||
penToSquareSolid: faPenToSquareSolid,
|
||||
rss: faRssSolid,
|
||||
rssSolid: faRssSolid,
|
||||
share: faShareSolid,
|
||||
shareSolid: faShareSolid,
|
||||
sun: faSunRegular,
|
||||
sunSolid: faSunSolid,
|
||||
xmark: faXmarkSolid,
|
||||
xmarkSolid: faXmarkSolid,
|
||||
// brands
|
||||
facebook: faFacebook,
|
||||
google: faGoogle,
|
||||
instagram: faInstagram,
|
||||
linkedin: faLinkedin,
|
||||
medium: faMedium,
|
||||
slack: faSlackHash,
|
||||
tiktok: faTiktok,
|
||||
twitter: faTwitter,
|
||||
users: faUsersSolid,
|
||||
};
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-icon': DeesIcon;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-icon')
|
||||
export class DeesIcon extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-icon iconName="visibility"></dees-icon>
|
||||
<div style="background: #fff; padding: 10px; font-size: 30px">
|
||||
<style>
|
||||
dees-icon {
|
||||
transition: color 0.05s;
|
||||
}
|
||||
dees-icon:hover {
|
||||
color: #e4002b;
|
||||
}
|
||||
</style>
|
||||
<dees-icon .iconFA=${'messageSolid'}></dees-icon>
|
||||
<dees-icon .iconFA=${'sun'}></dees-icon>
|
||||
<dees-icon .iconFA=${'sunSolid'}></dees-icon>
|
||||
<dees-icon .iconFA=${'facebook'}></dees-icon>
|
||||
<dees-icon .iconFA=${'arrowUpRightFromSquare'}></dees-icon>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public iconFA: keyof typeof faIcons;
|
||||
|
||||
@property()
|
||||
public iconSize: number;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
* {
|
||||
transition: inherit !important;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
#iconContainer svg {
|
||||
display: block;
|
||||
height: ${this.iconSize}px;
|
||||
}
|
||||
</style>
|
||||
<div id="iconContainer"></div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async updated() {
|
||||
if (!this.iconSize) {
|
||||
this.iconSize = parseInt(globalThis.getComputedStyle(this).fontSize.replace(/\D/g,''));
|
||||
}
|
||||
if (this.iconFA) {
|
||||
this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
|
||||
? icon(faIcons[this.iconFA]).html[0]
|
||||
: 'icon not found';
|
||||
}
|
||||
}
|
||||
}
|
174
ts_web/elements/dees-input-checkbox.ts
Normal file
174
ts_web/elements/dees-input-checkbox.ts
Normal file
@ -0,0 +1,174 @@
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
TemplateResult,
|
||||
property,
|
||||
html,
|
||||
css,
|
||||
cssManager
|
||||
} from '@designestate/dees-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-checkbox': DeesInputCheckbox;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-checkbox')
|
||||
export class DeesInputCheckbox extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public key: string;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public label: string = 'Label';
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public value: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public required: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public disabled: boolean = false;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 20px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: grid;
|
||||
grid-template-columns: 25px auto;
|
||||
padding: 5px 0px;
|
||||
color: ${this.goBright ? '#333' : '#ccc'};
|
||||
}
|
||||
|
||||
.maincontainer:hover {
|
||||
${this.goBright ? '#000' : '#ccc'};
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 15px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px solid #e4002b;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
transition: all 0.1s;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid ${this.goBright ? '#CCC' : '#999'};
|
||||
border-radius: 2px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: inline-block;
|
||||
background: ${this.goBright ? '#fafafa' : '#222'};
|
||||
}
|
||||
|
||||
.checkbox.selected {
|
||||
background: #039BE5;
|
||||
border: 1px solid #039BE5;
|
||||
}
|
||||
|
||||
.checkbox.disabled {
|
||||
background: none;
|
||||
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
|
||||
}
|
||||
|
||||
.checkbox .checkmark {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
-ms-transform: rotate(45deg); /* IE 9 */
|
||||
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.checkbox .checkmark_stem {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 9px;
|
||||
background-color: #fff;
|
||||
left: 11px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.checkbox .checkmark_kick {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #fff;
|
||||
left: 8px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
|
||||
background-color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
}
|
||||
|
||||
img {
|
||||
padding: 4px;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer" @click="${this.toggleSelected}">
|
||||
<div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
|
||||
${this.value
|
||||
? html`
|
||||
<span class="checkmark">
|
||||
<div class="checkmark_stem"></div>
|
||||
<div class="checkmark_kick"></div>
|
||||
</span>
|
||||
`
|
||||
: html``}
|
||||
</div>
|
||||
<div class="label">${this.label}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async toggleSelected() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
this.value = !this.value;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('newValue', {
|
||||
detail: this.value,
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
}
|
173
ts_web/elements/dees-input-dropdown.ts
Normal file
173
ts_web/elements/dees-input-dropdown.ts
Normal file
@ -0,0 +1,173 @@
|
||||
import { customElement, DeesElement, TemplateResult, property, html, css, cssManager } from '@designestate/dees-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-dropdown': DeesInputDropdown;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-dropdown')
|
||||
export class DeesInputDropdown extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-input-dropdown
|
||||
.options=${[
|
||||
{option: 'option 1', key: 'option1'},
|
||||
{option: 'option 2', key: 'option2'},
|
||||
{option: 'option 3', key: 'option3'}
|
||||
]}
|
||||
></dees-input-dropdown>
|
||||
`
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property()
|
||||
public label: string = 'Label';
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@property()
|
||||
public options: {option: string, key: string, payload?: any}[] = [];
|
||||
|
||||
@property()
|
||||
public selectedOption: {option: string, key: string, payload?: any} = {
|
||||
key: null,
|
||||
option: null,
|
||||
payload: null
|
||||
};
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public required: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public disabled: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 40px;
|
||||
color: ${cssManager.bdTheme('#222', '#fff')};
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.selectedBox {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
max-width: 420px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0px 8px;
|
||||
z-index: 0px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#333333')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
|
||||
border-radius: 3px;
|
||||
border-top: 1px solid #CCCCCC00;
|
||||
border-bottom: 1px solid #66666600;
|
||||
}
|
||||
|
||||
.selectedBox.show {
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
|
||||
}
|
||||
|
||||
.selectionBox {
|
||||
will-change:transform;
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#222222')};
|
||||
max-width: 420px;
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
|
||||
min-height: 40px;
|
||||
margin-top: -40px;
|
||||
z-index: 100;
|
||||
border-radius: 3px;
|
||||
padding: 4px;
|
||||
transform: scale(0.99,0.99);
|
||||
}
|
||||
|
||||
.selectionBox.show {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
transform: scale(1,1);
|
||||
}
|
||||
|
||||
.option {
|
||||
transition: all 0.1s;
|
||||
line-height: 40px;
|
||||
padding: 0px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
color: #fff;
|
||||
padding-left: 8px;
|
||||
background: #0277bd;
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="selectedBox show" @click="${event => {this.toggleSelectionBox();}}">
|
||||
${this.selectedOption?.option}
|
||||
</div>
|
||||
<div class="selectionBox">
|
||||
${this.options.map(option => {
|
||||
return html`
|
||||
<div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div>
|
||||
`
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.selectedOption = this.options[0] || null;
|
||||
}
|
||||
|
||||
public async updateSelection(selectedOption) {
|
||||
this.selectedOption = selectedOption;
|
||||
|
||||
this.dispatchEvent(new CustomEvent('selectedOption', {
|
||||
detail: selectedOption,
|
||||
bubbles: true
|
||||
}));
|
||||
this.toggleSelectionBox();
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
|
||||
public toggleSelectionBox() {
|
||||
this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
|
||||
this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
|
||||
}
|
||||
}
|
194
ts_web/elements/dees-input-fileupload.ts
Normal file
194
ts_web/elements/dees-input-fileupload.ts
Normal file
@ -0,0 +1,194 @@
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
TemplateResult,
|
||||
property,
|
||||
html,
|
||||
css,
|
||||
unsafeCSS,
|
||||
cssManager,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-fileupload': DeesInputFileupload;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-fileupload')
|
||||
export class DeesInputFileupload extends DeesElement {
|
||||
public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public label: string = null;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public key: string;
|
||||
|
||||
@property({
|
||||
attribute: false,
|
||||
})
|
||||
public value: File[] = [];
|
||||
|
||||
@property()
|
||||
public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public required: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public disabled: boolean = false;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public buttonText: string = 'Upload File...';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: grid;
|
||||
margin: 10px 0px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.uploadButton {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
max-width: 600px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uploadButton:hover {
|
||||
color: #fff;
|
||||
background: rgb(3, 155, 229);
|
||||
}
|
||||
|
||||
.uploadButton::after {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
transform: scale3d(0.98, 0.9, 1);
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
border: 2px dashed rgba(255, 255, 255, 0);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.uploadButton.dragOver::after {
|
||||
transform: scale3d(1, 1, 1);
|
||||
border: 2px dashed rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.uploadCandidate {
|
||||
text-align: left;
|
||||
border-bottom: 1px dashed #444;
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
padding: 8px;
|
||||
font-family: 'Inter';
|
||||
}
|
||||
|
||||
.uploadButton:hover .uploadCandidate {
|
||||
color: ${cssManager.bdTheme('#fff', '#fff')};
|
||||
border-bottom: 1px dashed #fff;
|
||||
}
|
||||
|
||||
.uploadCandidate:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="hidden">
|
||||
<input type="file"></div>
|
||||
</div>
|
||||
<div class="maincontainer">
|
||||
${this.label ? html`<div class="label">${this.label}</div>` : null}
|
||||
${this.value.map((fileArg) => html` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
|
||||
<div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}" @click=${this.openFileSelector}>
|
||||
${this.buttonText}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async openFileSelector() {
|
||||
const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
|
||||
inputFile.click();
|
||||
}
|
||||
|
||||
public async updateValue(eventArg: Event) {
|
||||
const target: any = eventArg.target;
|
||||
this.value = target.value;
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
|
||||
public firstUpdated() {
|
||||
const dropArea = this.shadowRoot.querySelector('.uploadButton');
|
||||
const handlerFunction = (eventArg: DragEvent) => {
|
||||
eventArg.preventDefault();
|
||||
switch (eventArg.type) {
|
||||
case 'dragover':
|
||||
this.state = 'dragOver';
|
||||
this.buttonText = 'release to upload file...';
|
||||
break;
|
||||
case 'dragleave':
|
||||
this.state = 'idle';
|
||||
this.buttonText = 'Upload File...';
|
||||
break;
|
||||
case 'drop':
|
||||
this.state = 'idle';
|
||||
this.buttonText = 'Upload more files...';
|
||||
}
|
||||
console.log(eventArg);
|
||||
for (const file of Array.from(eventArg.dataTransfer.files)) {
|
||||
this.value.push(file);
|
||||
this.requestUpdate();
|
||||
}
|
||||
console.log(`Got ${this.value.length} files!`);
|
||||
};
|
||||
dropArea.addEventListener('dragenter', handlerFunction, false);
|
||||
dropArea.addEventListener('dragleave', handlerFunction, false);
|
||||
dropArea.addEventListener('dragover', handlerFunction, false);
|
||||
dropArea.addEventListener('drop', handlerFunction, false);
|
||||
}
|
||||
}
|
113
ts_web/elements/dees-input-quantityselector.ts
Normal file
113
ts_web/elements/dees-input-quantityselector.ts
Normal file
@ -0,0 +1,113 @@
|
||||
import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-quantityselector': DeesInputQuantitySelector;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-quantityselector')
|
||||
export class DeesInputQuantitySelector extends DeesElement {
|
||||
public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@property({
|
||||
type: Number
|
||||
})
|
||||
public value: number = 1;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public required: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public disabled: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
width: 110px;
|
||||
user-select: none;
|
||||
}
|
||||
.maincontainer {
|
||||
transition: all 0.1s;
|
||||
font-size: 14px;
|
||||
display: grid;
|
||||
grid-template-columns: 33% 34% 33%;
|
||||
text-align: center;
|
||||
background:none;
|
||||
line-height: 40px;
|
||||
padding: 0px;
|
||||
min-width: 100px;
|
||||
color: ${this.goBright ? '#666' : '#CCC'};
|
||||
border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mainContainer:hover {
|
||||
color: ${this.goBright ? '#333' : '#fff'};
|
||||
border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
|
||||
}
|
||||
|
||||
.minus {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.selector {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.selector:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="maincontainer">
|
||||
<div class="selector minus" @click="${() => {this.decrease();}}">-</div>
|
||||
<div class="quantity">${this.value}</div>
|
||||
<div class="selector plus" @click="${() => {this.increase();}}">+</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public increase () {
|
||||
this.value++;
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
|
||||
public decrease () {
|
||||
if (this.value > 0) {
|
||||
this.value--;
|
||||
} else {
|
||||
// nothing to do here
|
||||
}
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
}
|
125
ts_web/elements/dees-input-radio.ts
Normal file
125
ts_web/elements/dees-input-radio.ts
Normal file
@ -0,0 +1,125 @@
|
||||
import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-radio': DeesInputRadio;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-radio')
|
||||
export class DeesInputRadio extends DeesElement {
|
||||
public static demo = () => html`<dees-input-radio></dees-input-radio>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject();
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@property()
|
||||
public label: string = 'Label';
|
||||
|
||||
@property()
|
||||
public value: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public required: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public disabled: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html `
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 20px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
transition: all 0.3s;
|
||||
display: grid;
|
||||
grid-template-columns: 25px auto;
|
||||
padding: 5px 0px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.maincontainer:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 15px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px solid #e4002b;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #999;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: inline-block;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.checkbox.selected {
|
||||
background: #039BE5;
|
||||
border: 1px solid #039BE5;
|
||||
}
|
||||
|
||||
.maincontainer:hover .checkbox.selected {
|
||||
background: #03A9F4;
|
||||
}
|
||||
|
||||
.innercircle {
|
||||
transition: all 0.3s;
|
||||
margin: 6px 0px 0px 6px;
|
||||
background: #222;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer" @click="${this.toggleSelected}">
|
||||
<div class="checkbox ${this.value ? 'selected' : ''}">
|
||||
${this.value ? html`<div class="innercircle"></div>`: html``}
|
||||
</div>
|
||||
<div class="label">${this.label}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async toggleSelected () {
|
||||
this.value = !this.value;
|
||||
this.dispatchEvent(new CustomEvent('newValue', {
|
||||
detail: this.value,
|
||||
bubbles: true
|
||||
}));
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
}
|
165
ts_web/elements/dees-input-text.ts
Normal file
165
ts_web/elements/dees-input-text.ts
Normal file
@ -0,0 +1,165 @@
|
||||
import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-text': DeesInputText;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-text')
|
||||
export class DeesInputText extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-input-text .label=${'this is a label'}></dees-input-text>
|
||||
<dees-input-text .isPasswordBool=${true}></dees-input-text>
|
||||
`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.rxjs.Subject<DeesInputText>();
|
||||
public valueChangeSubject = new domtools.rxjs.Subject<string>();
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public label: string;
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public key: string;
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public value: string = '';
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public required: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public disabled: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
})
|
||||
public isPasswordBool = false;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
})
|
||||
public showPasswordBool = false;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html `
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: grid;
|
||||
margin: 10px 0px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
color: ${this.goBright ? '#333' : '#ccc'};
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-top: 5px;
|
||||
background: ${this.goBright ? '#fafafa' : '#222'};
|
||||
border-top: ${this.goBright ? '1px solid #CCC' : '1px solid #444'};
|
||||
border-bottom: ${this.goBright ? '1px solid #CCC' : '1px solid #333'};
|
||||
border-right: ${this.goBright ? '1px solid #CCC' : 'none'};
|
||||
border-left: ${this.goBright ? '1px solid #CCC' : 'none'};
|
||||
padding-left:10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
line-height: 48px;
|
||||
transition: all 0.2s;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
font-family: ${this.isPasswordBool ? 'monospace': 'Inter'};
|
||||
letter-spacing: ${this.isPasswordBool ? '1px': 'normal'};
|
||||
color: ${this.goBright ? '#333' : '#ccc'};
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
|
||||
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
|
||||
color: #9b9b9e;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px solid #e4002b;
|
||||
}
|
||||
|
||||
.showPassword {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 10px;
|
||||
border: 1px dashed #444;
|
||||
border-radius: 7px;
|
||||
padding: 8px 0px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.showPassword:hover {
|
||||
cursor: pointer;
|
||||
background: #333;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
${this.label ? html`<div class="label">${this.label}</div>` : html``}
|
||||
<input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
|
||||
${this.isPasswordBool ? html`
|
||||
<div class="showPassword" @click=${this.togglePasswordView}>
|
||||
<dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
|
||||
</div>
|
||||
` : html``}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async updateValue(eventArg: Event) {
|
||||
const target: any = eventArg.target;
|
||||
this.value = target.value;
|
||||
this.changeSubject.next(this);
|
||||
this.valueChangeSubject.next(this.value);
|
||||
}
|
||||
|
||||
public async freeze() {
|
||||
this.disabled = true;
|
||||
}
|
||||
|
||||
public async unfreeze() {
|
||||
this.disabled = false;
|
||||
}
|
||||
|
||||
public async togglePasswordView () {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
this.showPasswordBool = !this.showPasswordBool;
|
||||
console.log(`this.showPasswordBool is: ${this.showPasswordBool}`)
|
||||
}
|
||||
|
||||
public async focus() {
|
||||
const textInput = this.shadowRoot.querySelector('input');
|
||||
textInput.focus();
|
||||
}
|
||||
}
|
188
ts_web/elements/dees-mobilenavigation.ts
Normal file
188
ts_web/elements/dees-mobilenavigation.ts
Normal file
@ -0,0 +1,188 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import {
|
||||
cssManager,
|
||||
css,
|
||||
customElement,
|
||||
DeesElement,
|
||||
domtools,
|
||||
html,
|
||||
property,
|
||||
} from '@designestate/dees-element';
|
||||
import { DeesWindowLayer } from './dees-windowlayer.js';
|
||||
|
||||
@customElement('dees-mobilenavigation')
|
||||
export class DeesMobilenavigation extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html`
|
||||
<dees-mobilenavigation
|
||||
.menuItems="${[
|
||||
{
|
||||
name: 'hello1',
|
||||
action: async () => {},
|
||||
},
|
||||
{
|
||||
name: 'hello2',
|
||||
action: async () => {},
|
||||
},
|
||||
{
|
||||
name: 'hello3',
|
||||
action: async () => {},
|
||||
},
|
||||
]}"
|
||||
></dees-mobilenavigation>
|
||||
`;
|
||||
|
||||
private static singletonRef: DeesMobilenavigation;
|
||||
public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
|
||||
if (!this.singletonRef) {
|
||||
this.singletonRef = new DeesMobilenavigation();
|
||||
document.body.append(this.singletonRef);
|
||||
await this.singletonRef.init();
|
||||
}
|
||||
this.singletonRef.menuItems = menuItemsArg;
|
||||
await this.singletonRef.readyDeferred.promise;
|
||||
this.singletonRef.show();
|
||||
return this.singletonRef;
|
||||
}
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public heading: string = `MENU`;
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
|
||||
|
||||
readyDeferred = domtools.plugins.smartpromise.defer();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
/* this.init().then(() => {
|
||||
this.show();
|
||||
}); */
|
||||
}
|
||||
|
||||
/**
|
||||
* inits the mobile navigation
|
||||
*/
|
||||
public async init() {
|
||||
await this.updateComplete;
|
||||
this.readyDeferred.resolve();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
}
|
||||
|
||||
.main {
|
||||
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
will-change: transform;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
min-width: 280px;
|
||||
transform: translateX(200px);
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
z-index: 250;
|
||||
opacity: 0;
|
||||
padding: 16px 32px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000')};;
|
||||
border-left: 1px dashed #444;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.main.show {
|
||||
pointer-events: all;
|
||||
transform: translateX(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.menuItem:hover {
|
||||
background: ${cssManager.bdTheme('#CCC', '#333')};;
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-align: left;
|
||||
font-size: 24px;
|
||||
padding: 8px 0px;
|
||||
font-family: Inter;
|
||||
font-weight: 300;
|
||||
border-bottom: 1px dashed #444;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<div class="main">
|
||||
<div class="heading">${this.heading}</div>
|
||||
${this.menuItems.map((menuItem) => {
|
||||
return html`
|
||||
<div
|
||||
class="menuItem"
|
||||
@click="${() => {
|
||||
this.hide();
|
||||
menuItem.action();
|
||||
}}"
|
||||
>
|
||||
${menuItem.name}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private windowLayer: DeesWindowLayer;
|
||||
|
||||
/**
|
||||
* inits the show
|
||||
*/
|
||||
public async show() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
const main = this.shadowRoot.querySelector('.main');
|
||||
if (!this.windowLayer) {
|
||||
this.windowLayer = new DeesWindowLayer();
|
||||
this.windowLayer.addEventListener('click', () => {
|
||||
this.hide();
|
||||
});
|
||||
}
|
||||
document.body.append(this.windowLayer);
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
this.windowLayer.show();
|
||||
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
main.classList.add('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* inits the hide function
|
||||
*/
|
||||
public async hide() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
const main = this.shadowRoot.querySelector('.main');
|
||||
main.classList.remove('show');
|
||||
this.windowLayer.hide();
|
||||
}
|
||||
|
||||
async disconnectedCallback() {
|
||||
document.body.removeChild(this.windowLayer);
|
||||
}
|
||||
}
|
119
ts_web/elements/dees-pdf.ts
Normal file
119
ts_web/elements/dees-pdf.ts
Normal file
@ -0,0 +1,119 @@
|
||||
import { DeesElement, property, html, customElement, domtools, TemplateResult } from '@designestate/dees-element';
|
||||
|
||||
import { Deferred } from '@pushrocks/smartpromise';
|
||||
|
||||
import type pdfjsTypes from 'pdfjs-dist';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-pdf': DeesPdf;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-pdf')
|
||||
export class DeesPdf extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = () => html` <dees-pdf></dees-pdf> `;
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@property()
|
||||
public pdfUrl: string =
|
||||
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// you have access to all kinds of things through this.
|
||||
// this.setAttribute('gotIt','true');
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
font-family: 'Inter', sans-serif;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
max-width: 800px;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pdfcanvas {
|
||||
box-shadow: 0px 0px 5px #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<canvas id="pdfcanvas" .height=${0} .width=${0}></canvas>
|
||||
`;
|
||||
}
|
||||
|
||||
public static pdfJsReady: Promise<any>;
|
||||
public static pdfjsLib: typeof pdfjsTypes;
|
||||
public async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (!DeesPdf.pdfJsReady) {
|
||||
const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
|
||||
DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
|
||||
const loadDeferred = domtools.plugins.smartpromise.defer();
|
||||
const script = document.createElement('script');
|
||||
script.addEventListener('load', () => {
|
||||
console.log('pdf.js loaded!');
|
||||
loadDeferred.resolve();
|
||||
});
|
||||
script.src = 'https:////mozilla.github.io/pdf.js/build/pdf.js';
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
// The workerSrc property shall be specified.
|
||||
await loadDeferred.promise;
|
||||
DeesPdf.pdfjsLib = window['pdfjs-dist/build/pdf'];
|
||||
DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
|
||||
pdfJsReadyDeferred.resolve();
|
||||
}
|
||||
await DeesPdf.pdfJsReady;
|
||||
this.displayContent();
|
||||
}
|
||||
|
||||
public async displayContent() {
|
||||
await DeesPdf.pdfJsReady;
|
||||
|
||||
// Asynchronous download of PDF
|
||||
const loadingTask = DeesPdf.pdfjsLib.getDocument(this.pdfUrl);
|
||||
loadingTask.promise.then(
|
||||
(pdf) => {
|
||||
console.log('PDF loaded');
|
||||
|
||||
// Fetch the first page
|
||||
const pageNumber = 1;
|
||||
pdf.getPage(pageNumber).then((page) => {
|
||||
console.log('Page loaded');
|
||||
|
||||
const scale = 10;
|
||||
const viewport = page.getViewport({ scale: scale });
|
||||
|
||||
// Prepare canvas using PDF page dimensions
|
||||
const canvas: any = this.shadowRoot.querySelector('#pdfcanvas');
|
||||
const context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
// Render PDF page into canvas context
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
};
|
||||
|
||||
const renderTask = page.render(renderContext);
|
||||
renderTask.promise.then(function () {
|
||||
console.log('Page rendered');
|
||||
});
|
||||
});
|
||||
},
|
||||
(reason) => {
|
||||
// PDF loading error
|
||||
console.error(reason);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
0
ts_web/elements/dees-search.ts
Normal file
0
ts_web/elements/dees-search.ts
Normal file
0
ts_web/elements/dees-searchbox.ts
Normal file
0
ts_web/elements/dees-searchbox.ts
Normal file
156
ts_web/elements/dees-speechbubble.ts
Normal file
156
ts_web/elements/dees-speechbubble.ts
Normal file
@ -0,0 +1,156 @@
|
||||
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-speechbubble': DeesSpeechbubble;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-speechbubble')
|
||||
export class DeesSpeechbubble extends DeesElement {
|
||||
public static demo = () => html` <dees-speechbubble></dees-speechbubble> `;
|
||||
|
||||
@property()
|
||||
public text: string;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public disabled = false;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public isHidden = false;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
will-change: transform;
|
||||
transition: transform 0.2s;
|
||||
transform: translateX(0px);
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.maincontainer:hover {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
background: ${cssManager.bdTheme('#fff', '#333')};
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
left: 4px;
|
||||
top: 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.speechbubble {
|
||||
background: ${cssManager.bdTheme('#fff', '#333')};
|
||||
padding: 0px 10px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
top: 0px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.wave {
|
||||
animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
|
||||
animation-duration: 2.5s; /* Change to speed up or slow down */
|
||||
animation-iteration-count: infinite; /* Never stop waving :) */
|
||||
transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes wave-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: rotate(14deg);
|
||||
} /* The following five values can be played with to make the waving more or less extreme */
|
||||
20% {
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(14deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotate(0deg);
|
||||
} /* Reset for the last half to pause */
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="maincontainer" @click=${this.handleClick}>
|
||||
<div class="arrow"></div>
|
||||
<div class="speechbubble"><span class="wave">👋</span> We build with launch.sh, and you can too.</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async handleClick() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
globalThis.location.href = "https://launch.sh"
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
if (!this.textContent) {
|
||||
this.textContent = 'Button';
|
||||
this.performUpdate();
|
||||
}
|
||||
}
|
||||
}
|
130
ts_web/elements/dees-spinner.ts
Normal file
130
ts_web/elements/dees-spinner.ts
Normal file
@ -0,0 +1,130 @@
|
||||
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>
|
||||
<dees-spinner size=${64} status="success"></dees-spinner>
|
||||
<dees-spinner .size=${64} status="error"></dees-spinner>
|
||||
`;
|
||||
|
||||
@property({
|
||||
type: Number,
|
||||
})
|
||||
public size = 20;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public bnw: boolean = false;
|
||||
|
||||
@property()
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: relative;
|
||||
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: none;
|
||||
border-radius: 50%;
|
||||
animation: none;
|
||||
-webkit-animation: none;
|
||||
}
|
||||
|
||||
#loading.error {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
animation: none;
|
||||
-webkit-animation: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
dees-icon {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<style>
|
||||
#loading {
|
||||
width: ${this.size}px;
|
||||
height: ${this.size}px;
|
||||
}
|
||||
#loading.success {
|
||||
color: ${cssManager.bdTheme(this.bnw ? '#333': `#8bc34a`, this.bnw ? '#fff' : `#8bc34a`)};
|
||||
|
||||
}
|
||||
#loading.error {
|
||||
color: ${cssManager.bdTheme(this.bnw ? '#333': `#e64a19`, this.bnw ? '#fff' : `#e64a19`)};
|
||||
}
|
||||
dees-icon {
|
||||
font-size: ${this.size}px;
|
||||
}
|
||||
</style>
|
||||
<div class="${this.status}" id="loading">
|
||||
${(() => {
|
||||
if (this.status === 'success') {
|
||||
return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'circleCheck' as any}></dees-icon>`;
|
||||
} else if (this.status === 'error') {
|
||||
return html`<dees-icon .iconFA=${'circleXmark' as any}></dees-icon>`;
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
257
ts_web/elements/dees-stepper.ts
Normal file
257
ts_web/elements/dees-stepper.ts
Normal file
@ -0,0 +1,257 @@
|
||||
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;
|
||||
validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
|
||||
onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
|
||||
validationFuncCalled?: boolean;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-stepper': DeesStepper;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-stepper')
|
||||
export class DeesStepper extends DeesElement {
|
||||
public static demo = () =>
|
||||
html`
|
||||
<dees-stepper
|
||||
.steps=${[
|
||||
{
|
||||
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>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', eventArg => {
|
||||
stepperArg.goNext();
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Whats your mobile number?',
|
||||
content: html``,
|
||||
}
|
||||
] as IStep[]}
|
||||
></dees-stepper>
|
||||
`;
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public steps: IStep[] = [];
|
||||
|
||||
@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')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
filter: opacity(0.5) grayscale(1);
|
||||
box-shadow: 0px 0px 3px #00000010;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.step.selected {
|
||||
border-top: 1px solid #e4002b;
|
||||
pointer-events: all;
|
||||
filter: opacity(1) grayscale(0);
|
||||
box-shadow: 0px 0px 5px #00000010;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
.step.hiddenStep {
|
||||
filter: opacity(0);
|
||||
}
|
||||
|
||||
.step:last-child {
|
||||
margin-bottom: 100vh;
|
||||
}
|
||||
|
||||
.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: Inter;
|
||||
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();
|
||||
}
|
||||
|
||||
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: 'easeInOutExpo',
|
||||
duration: 700,
|
||||
},
|
||||
stepperContainer
|
||||
);
|
||||
}
|
||||
if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
|
||||
this.selectedStep.validationFuncCalled = true;
|
||||
await this.selectedStep.validationFunc(this, selectedStepElement);
|
||||
}
|
||||
this.scroller.to(scrollPosition);
|
||||
}
|
||||
|
||||
public async goBack() {
|
||||
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);
|
||||
this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
|
||||
}
|
||||
|
||||
public goNext() {
|
||||
const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
|
||||
this.selectedStep = this.steps[currentIndex + 1];
|
||||
}
|
||||
}
|
359
ts_web/elements/dees-table.ts
Normal file
359
ts_web/elements/dees-table.ts
Normal file
@ -0,0 +1,359 @@
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
DeesElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
state,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-table': DeesTable<any>;
|
||||
}
|
||||
}
|
||||
|
||||
export interface IDataAction<T = any> {
|
||||
name: string;
|
||||
iconName: string;
|
||||
useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
|
||||
actionFunc: (itemArg: T) => Promise<any>;
|
||||
}
|
||||
|
||||
@customElement('dees-table')
|
||||
export class DeesTable<T> extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<style>
|
||||
.demoWrapper {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 60px;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
<div class="demoWrapper">
|
||||
<dees-table
|
||||
heading1="Current Account Statement"
|
||||
heading2="Bunq - Payment Account 2 - April 2021"
|
||||
.data=${[
|
||||
{
|
||||
date: '2021-04-01',
|
||||
amount: '2464.65 €',
|
||||
description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
|
||||
},
|
||||
{
|
||||
date: '2021-04-02',
|
||||
amount: '165.65 €',
|
||||
description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
|
||||
},
|
||||
{
|
||||
date: '2021-04-03',
|
||||
amount: '2999,00 €',
|
||||
description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
|
||||
},
|
||||
{
|
||||
date: '2021-04-01',
|
||||
amount: '2464.65 €',
|
||||
description: 'Office-Supplies - STAPLES BREMEN',
|
||||
},
|
||||
{
|
||||
date: '2021-04-01',
|
||||
amount: '2464.65 €',
|
||||
description: 'Office-Supplies - STAPLES BREMEN',
|
||||
},
|
||||
]}
|
||||
.dataActions="${[{
|
||||
name: 'upload',
|
||||
iconName: 'upload',
|
||||
useTableBehaviour: 'upload',
|
||||
actionFunc: async (itemArg: any) => {
|
||||
|
||||
},
|
||||
},{
|
||||
name: 'visibility',
|
||||
iconName: 'visibility',
|
||||
useTableBehaviour: 'preview',
|
||||
actionFunc: async (itemArg: any) => {
|
||||
|
||||
},
|
||||
}] as IDataAction[]}"
|
||||
>This is a slotted Text</dees-table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public heading1: string = 'heading 1';
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public heading2: string = 'heading 2';
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public data: T[] = [];
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public dataActions: IDataAction[] = [];
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
})
|
||||
public selectedDataRow: T;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
public files: File[] = [];
|
||||
public fileWeakMap = new WeakMap();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.mainbox {
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
font-family: 'Inter';
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#333333')};
|
||||
border-radius: 3px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.headingSeparation {
|
||||
margin-top: 7px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
|
||||
}
|
||||
|
||||
table,
|
||||
.noDataSet {
|
||||
margin-top: 16px;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.noDataSet {
|
||||
text-align: center;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
|
||||
text-align: left;
|
||||
}
|
||||
tr:last-child {
|
||||
border-bottom: none;
|
||||
text-align: left;
|
||||
}
|
||||
tr:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
tr:hover .innerCellContainer {
|
||||
background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
|
||||
}
|
||||
tr:first-child:hover {
|
||||
cursor: auto;
|
||||
}
|
||||
tr:first-child:hover .innerCellContainer {
|
||||
background: none;
|
||||
}
|
||||
tr.selected .innerCellContainer {
|
||||
background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
|
||||
}
|
||||
th {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 3px 0px;
|
||||
border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
|
||||
}
|
||||
.innerCellContainer {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
th:first-child .innerCellContainer,
|
||||
td:first-child .innerCellContainer {
|
||||
padding-left: 0px;
|
||||
}
|
||||
th:last-child .innerCellContainer,
|
||||
td:last-child .innerCellContainer {
|
||||
padding-right: 0px;
|
||||
}
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin: -8px 0px;
|
||||
padding: 8px;
|
||||
line-height: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.action:first-child {
|
||||
margin-left: -8px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
background: ${cssManager.bdTheme('#CCC', '#111')};
|
||||
}
|
||||
|
||||
.tableStatistics {
|
||||
padding: 4px 16px;
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#111', '#ffffff90')};
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
|
||||
margin: 16px -16px -16px -16px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainbox">
|
||||
<!-- the heading part -->
|
||||
<div>${this.heading1}</div>
|
||||
<div>${this.heading2}</div>
|
||||
<div class="headingSeparation"></div>
|
||||
|
||||
<!-- the actual table -->
|
||||
<style></style>
|
||||
${this.data.length > 0
|
||||
? (() => {
|
||||
const headings: string[] = Object.keys(this.data[0]);
|
||||
return html`
|
||||
<table>
|
||||
<tr>
|
||||
${headings.map(
|
||||
(headingArg) => html`
|
||||
<th>
|
||||
<div class="innerCellContainer">${headingArg}</div>
|
||||
</th>
|
||||
`
|
||||
)}
|
||||
${(() => {
|
||||
if (this.dataActions && this.dataActions.length > 0) {
|
||||
return html`
|
||||
<th>
|
||||
<div class="innerCellContainer">Actions</div>
|
||||
</th>
|
||||
`;
|
||||
}
|
||||
})()}
|
||||
</tr>
|
||||
${this.data.map(
|
||||
(itemArg) => html`
|
||||
<tr
|
||||
@click=${() => {
|
||||
this.selectedDataRow = itemArg;
|
||||
}}
|
||||
@dragenter=${async (eventArg: DragEvent) => {
|
||||
console.log((eventArg.target as HTMLElement).tagName)
|
||||
console.log('dragenter');
|
||||
eventArg.preventDefault();
|
||||
eventArg.stopPropagation();
|
||||
(eventArg.target as HTMLElement).parentElement.style.background = '#800000';
|
||||
}}
|
||||
@dragleave=${async (eventArg: DragEvent) => {
|
||||
console.log((eventArg.target as HTMLElement).tagName)
|
||||
console.log('dragleave');
|
||||
eventArg.preventDefault();
|
||||
eventArg.stopPropagation();
|
||||
(eventArg.target as HTMLElement).parentElement.style.background = 'none';
|
||||
}}
|
||||
@dragover=${async (eventArg: DragEvent) => {
|
||||
eventArg.preventDefault();
|
||||
}}
|
||||
@drop=${async (eventArg: DragEvent) => {
|
||||
eventArg.preventDefault();
|
||||
const newFiles = []
|
||||
for (const file of Array.from(eventArg.dataTransfer.files)) {
|
||||
this.files.push(file);
|
||||
newFiles.push(file);
|
||||
this.requestUpdate();
|
||||
}
|
||||
const result: File[] = this.fileWeakMap.get(itemArg as object);
|
||||
if (!result) {
|
||||
this.fileWeakMap.set(itemArg as object, newFiles)
|
||||
} else {
|
||||
result.push(...newFiles);
|
||||
}
|
||||
}}
|
||||
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
|
||||
>
|
||||
${headings.map(
|
||||
(headingArg) => html`
|
||||
<td>
|
||||
<div class="innerCellContainer">${itemArg[headingArg]}</div>
|
||||
</td>
|
||||
`
|
||||
)}
|
||||
${(() => {
|
||||
if (this.dataActions && this.dataActions.length > 0) {
|
||||
return html`
|
||||
<td>
|
||||
<div class="innerCellContainer">
|
||||
${(() => {
|
||||
const actions: TemplateResult[] = [];
|
||||
for (const action of this.dataActions) {
|
||||
actions.push(html`<div class="action">${action.iconName ? html`
|
||||
<dees-icon .iconName=${'upload_file'}></dees-icon>
|
||||
` : action.name}</div>`)
|
||||
}
|
||||
return actions;
|
||||
})()}
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
}
|
||||
})()}
|
||||
</tr>
|
||||
`
|
||||
)}
|
||||
</table>
|
||||
`;
|
||||
})()
|
||||
: html` <div class="noDataSet">No data set!</div> `}
|
||||
<div class="tableStatistics">
|
||||
${this.data.length} data rows (total) |
|
||||
${this.selectedDataRow
|
||||
? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected`
|
||||
: html`No row selected`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {}
|
||||
}
|
26
ts_web/elements/dees-toast.ts
Normal file
26
ts_web/elements/dees-toast.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { customElement, DeesElement, TemplateResult, html } from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-toast': DeesToast;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-toast')
|
||||
export class DeesToast extends DeesElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style></style>
|
||||
|
||||
`;
|
||||
}
|
||||
}
|
1
ts_web/elements/dees-tooltip.ts
Normal file
1
ts_web/elements/dees-tooltip.ts
Normal file
@ -0,0 +1 @@
|
||||
import {} from '@designestate/dees-element';
|
90
ts_web/elements/dees-updater.ts
Normal file
90
ts_web/elements/dees-updater.ts
Normal file
@ -0,0 +1,90 @@
|
||||
import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
|
||||
import './dees-windowlayer';
|
||||
import { css, cssManager } from '@designestate/dees-element';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-updater': DeesUpdater;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-updater')
|
||||
export class DeesUpdater extends DeesElement {
|
||||
public static demo = () => html`<dees-updater></dees-updater>`;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
currentVersion: string;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
updatedVersion: string;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
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`
|
||||
<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();
|
||||
}
|
||||
}
|
85
ts_web/elements/dees-windowlayer.ts
Normal file
85
ts_web/elements/dees-windowlayer.ts
Normal file
@ -0,0 +1,85 @@
|
||||
import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-windowlayer': DeesWindowLayer;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-windowlayer')
|
||||
export class DeesWindowLayer extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public visible = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
.windowOverlay {
|
||||
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: brightness(1);
|
||||
pointer-events: none;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.visible {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: brightness(0.3);
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
<div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
setTimeout(() => {
|
||||
this.visible = true;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
dispatchClicked() {
|
||||
this.dispatchEvent(new CustomEvent('clicked'));
|
||||
}
|
||||
|
||||
public toggleVisibility () {
|
||||
this.visible = !this.visible;
|
||||
}
|
||||
|
||||
public async show() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
this.visible = true;
|
||||
}
|
||||
|
||||
public async hide() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
this.visible = false;
|
||||
}
|
||||
}
|
24
ts_web/elements/index.ts
Normal file
24
ts_web/elements/index.ts
Normal file
@ -0,0 +1,24 @@
|
||||
export * from './dees-button-exit.js';
|
||||
export * from './dees-button.js';
|
||||
export * from './dees-chips.js';
|
||||
export * from './dees-contextmenu.js';
|
||||
export * from './dees-dataview-codebox.js';
|
||||
export * from './dees-dataview-statusobject.js';
|
||||
export * from './dees-form.js';
|
||||
export * from './dees-form-submit.js';
|
||||
export * from './dees-icon.js';
|
||||
export * from './dees-input-checkbox.js';
|
||||
export * from './dees-input-dropdown.js';
|
||||
export * from './dees-input-fileupload.js';
|
||||
export * from './dees-input-quantityselector.js';
|
||||
export * from './dees-input-radio.js';
|
||||
export * from './dees-input-text.js';
|
||||
export * from './dees-mobilenavigation.js';
|
||||
export * from './dees-pdf.js';
|
||||
export * from './dees-speechbubble.js';
|
||||
export * from './dees-spinner.js';
|
||||
export * from './dees-stepper.js';
|
||||
export * from './dees-table.js';
|
||||
export * from './dees-toast.js';
|
||||
export * from './dees-updater.js';
|
||||
export * from './dees-windowlayer.js';
|
@ -1,35 +0,0 @@
|
||||
import { LitElement, property, html, customElement } from 'lit-element';
|
||||
import { TemplateResult } from 'lit-html';
|
||||
|
||||
@customElement('lele-element')
|
||||
export class LeleElement extends LitElement {
|
||||
@property()
|
||||
public footerText = `Lossless GmbH - 2018`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// you have access to all kinds of things through this.
|
||||
// this.setAttribute('gotIt','true');
|
||||
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
||||
:host {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #FCFCFC;
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
}
|
5
ts_web/elements/plugins.ts
Normal file
5
ts_web/elements/plugins.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
export {
|
||||
tsclass
|
||||
}
|
@ -1,5 +1,2 @@
|
||||
import { LeleElement } from './elements/lele-element';
|
||||
|
||||
export {
|
||||
LeleElement
|
||||
};
|
||||
export * from './elements/index.js';
|
||||
export { commitinfo } from './00_commitinfo_data.js';
|
||||
|
@ -1,16 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["es2017", "dom"],
|
||||
"declaration": true,
|
||||
"inlineSources": true,
|
||||
"inlineSourceMap": true,
|
||||
"noUnusedLocals": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"outDir": "dist/",
|
||||
"skipLibCheck": true,
|
||||
"experimentalDecorators": true
|
||||
}
|
||||
}
|
@ -1,7 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"target": "ES2017",
|
||||
"moduleResolution": "Node"
|
||||
"useDefineForClassFields": false,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "nodenext",
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
|
17
tslint.json
17
tslint.json
@ -1,17 +0,0 @@
|
||||
{
|
||||
"extends": ["tslint:latest", "tslint-config-prettier"],
|
||||
"rules": {
|
||||
"semicolon": [true, "always"],
|
||||
"no-console": false,
|
||||
"ordered-imports": false,
|
||||
"object-literal-sort-keys": false,
|
||||
"member-ordering": {
|
||||
"options":{
|
||||
"order": [
|
||||
"static-method"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultSeverity": "warning"
|
||||
}
|
Reference in New Issue
Block a user