Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8fa01fbaad | |||
| 9cdae8ccdb | |||
| 7e1c5f3dbb | |||
| 1f3f17247c | |||
| f07f2bb95e | |||
| 0b2f6715e0 |
10
package.json
10
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "1.0.243",
|
||||
"version": "1.0.246",
|
||||
"private": false,
|
||||
"description": "website for lossless.com",
|
||||
"main": "dist_ts_web/index.js",
|
||||
@@ -17,7 +17,7 @@
|
||||
"dependencies": {
|
||||
"@design.estate/dees-domtools": "^2.0.55",
|
||||
"@design.estate/dees-element": "^2.0.33",
|
||||
"@design.estate/dees-wcctools": "^1.0.85",
|
||||
"@design.estate/dees-wcctools": "^1.0.87",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
@@ -27,17 +27,17 @@
|
||||
"@push.rocks/smartstring": "^4.0.13",
|
||||
"@tsclass/tsclass": "^4.0.46",
|
||||
"highlight.js": "11.9.0",
|
||||
"ibantools": "^4.3.8",
|
||||
"ibantools": "^4.3.9",
|
||||
"pdfjs-dist": "^4.0.379"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^2.1.72",
|
||||
"@git.zone/tsbundle": "^2.0.14",
|
||||
"@git.zone/tsbundle": "^2.0.15",
|
||||
"@git.zone/tstest": "^1.0.77",
|
||||
"@git.zone/tswatch": "^2.0.21",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@push.rocks/tapbundle": "^5.0.15",
|
||||
"@types/node": "^20.10.8"
|
||||
"@types/node": "^20.11.5"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
|
||||
128
pnpm-lock.yaml
generated
128
pnpm-lock.yaml
generated
@@ -12,8 +12,8 @@ dependencies:
|
||||
specifier: ^2.0.33
|
||||
version: 2.0.33
|
||||
'@design.estate/dees-wcctools':
|
||||
specifier: ^1.0.85
|
||||
version: 1.0.85
|
||||
specifier: ^1.0.87
|
||||
version: 1.0.87
|
||||
'@fortawesome/fontawesome-svg-core':
|
||||
specifier: ^6.5.1
|
||||
version: 6.5.1
|
||||
@@ -42,8 +42,8 @@ dependencies:
|
||||
specifier: 11.9.0
|
||||
version: 11.9.0
|
||||
ibantools:
|
||||
specifier: ^4.3.8
|
||||
version: 4.3.8
|
||||
specifier: ^4.3.9
|
||||
version: 4.3.9
|
||||
pdfjs-dist:
|
||||
specifier: ^4.0.379
|
||||
version: 4.0.379
|
||||
@@ -53,14 +53,14 @@ devDependencies:
|
||||
specifier: ^2.1.72
|
||||
version: 2.1.72
|
||||
'@git.zone/tsbundle':
|
||||
specifier: ^2.0.14
|
||||
version: 2.0.14
|
||||
specifier: ^2.0.15
|
||||
version: 2.0.15
|
||||
'@git.zone/tstest':
|
||||
specifier: ^1.0.77
|
||||
version: 1.0.84(@types/node@20.10.8)(sinon@17.0.1)
|
||||
version: 1.0.84(@types/node@20.11.5)(sinon@17.0.1)
|
||||
'@git.zone/tswatch':
|
||||
specifier: ^2.0.21
|
||||
version: 2.0.21(@types/node@20.10.8)
|
||||
version: 2.0.21(@types/node@20.11.5)
|
||||
'@push.rocks/projectinfo':
|
||||
specifier: ^5.0.2
|
||||
version: 5.0.2
|
||||
@@ -68,8 +68,8 @@ devDependencies:
|
||||
specifier: ^5.0.15
|
||||
version: 5.0.15(sinon@17.0.1)
|
||||
'@types/node':
|
||||
specifier: ^20.10.8
|
||||
version: 20.10.8
|
||||
specifier: ^20.11.5
|
||||
version: 20.11.5
|
||||
|
||||
packages:
|
||||
|
||||
@@ -268,13 +268,13 @@ packages:
|
||||
lit: 3.1.0
|
||||
dev: false
|
||||
|
||||
/@design.estate/dees-wcctools@1.0.85:
|
||||
resolution: {integrity: sha512-/EfR63jkUWjSZiR9ShRYc3Xcv22uPsg91bqCfhEUvD0avI7FHzpz9+AvxnnE9HuuEKskGgpo5NA+WeyOU8a2KQ==}
|
||||
/@design.estate/dees-wcctools@1.0.87:
|
||||
resolution: {integrity: sha512-bZh7brZDRriN4RbLjMriSh588TryIVZbB5gKDuf+YdZDPjm0AAlCp/nOiyvho3ITA8SERbgIIiqWVf0LbgFyoQ==}
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.0.55
|
||||
'@design.estate/dees-element': 2.0.33
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
lit: 3.1.0
|
||||
lit: 3.1.1
|
||||
dev: false
|
||||
|
||||
/@esbuild/aix-ppc64@0.19.11:
|
||||
@@ -536,8 +536,8 @@ packages:
|
||||
typescript: 5.3.3
|
||||
dev: true
|
||||
|
||||
/@git.zone/tsbundle@2.0.14:
|
||||
resolution: {integrity: sha512-4J5QiujPEPa+OYzN9TI9il6FLcJ7MGYWL8NzEhSerZ2jFm/iPjO75/s9x44VjszDmjo3xe/TRnRoHWFELVJQOA==}
|
||||
/@git.zone/tsbundle@2.0.15:
|
||||
resolution: {integrity: sha512-ZrPkScaBQ7hHx6BUchRFfPB9tvb7RlNXwjk9qjkp6AcBcF38JgLcu/UDKDqRsuaFJpkK9oclyhA5bDA7SjXWZg==}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@push.rocks/early': 4.0.4
|
||||
@@ -557,13 +557,13 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@git.zone/tsrun@1.2.46(@types/node@20.10.8):
|
||||
/@git.zone/tsrun@1.2.46(@types/node@20.11.5):
|
||||
resolution: {integrity: sha512-8miFVBle9Mnjx+uPGI/P+EuWcIOXWjBAkdjN5IYbdp5Ytt4xQODCLh4JSnC9h56UeU1nUxCAxZeJs2e9TXrivA==}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@push.rocks/smartfile': 10.0.41
|
||||
'@push.rocks/smartshell': 3.0.3
|
||||
ts-node: 10.9.1(@types/node@20.10.8)(typescript@5.1.6)
|
||||
ts-node: 10.9.1(@types/node@20.11.5)(typescript@5.1.6)
|
||||
typescript: 5.1.6
|
||||
transitivePeerDependencies:
|
||||
- '@swc/core'
|
||||
@@ -571,13 +571,13 @@ packages:
|
||||
- '@types/node'
|
||||
dev: true
|
||||
|
||||
/@git.zone/tstest@1.0.84(@types/node@20.10.8)(sinon@17.0.1):
|
||||
/@git.zone/tstest@1.0.84(@types/node@20.11.5)(sinon@17.0.1):
|
||||
resolution: {integrity: sha512-HQQvloUWGj4fPxOuhO7Dfxw83szRlIMNJpaJtIgDUWiMm6vF9ygvcMTgpUUkEmWjxQ/t/SkXvHqHjtfp0l4l2g==}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@api.global/typedserver': 3.0.9
|
||||
'@git.zone/tsbundle': 2.0.14
|
||||
'@git.zone/tsrun': 1.2.46(@types/node@20.10.8)
|
||||
'@git.zone/tsbundle': 2.0.15
|
||||
'@git.zone/tsrun': 1.2.46(@types/node@20.11.5)
|
||||
'@push.rocks/consolecolor': 2.0.1
|
||||
'@push.rocks/smartbrowser': 2.0.6
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
@@ -600,13 +600,13 @@ packages:
|
||||
- utf-8-validate
|
||||
dev: true
|
||||
|
||||
/@git.zone/tswatch@2.0.21(@types/node@20.10.8):
|
||||
/@git.zone/tswatch@2.0.21(@types/node@20.11.5):
|
||||
resolution: {integrity: sha512-7Q0I0dIZD+ApR4MWeykvf+cYk+I6t1Re+jhAj8xrLqZBetvWv9C315jG6Brx96DEYz4th6EvyVUONQkLndBI4w==}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@api.global/typedserver': 3.0.19
|
||||
'@git.zone/tsbundle': 2.0.14
|
||||
'@git.zone/tsrun': 1.2.46(@types/node@20.10.8)
|
||||
'@git.zone/tsbundle': 2.0.15
|
||||
'@git.zone/tsrun': 1.2.46(@types/node@20.11.5)
|
||||
'@push.rocks/early': 4.0.4
|
||||
'@push.rocks/lik': 6.0.12
|
||||
'@push.rocks/smartchok': 1.0.23
|
||||
@@ -663,6 +663,12 @@ packages:
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.1.2
|
||||
|
||||
/@lit/reactive-element@2.0.3:
|
||||
resolution: {integrity: sha512-e067EuTNNgOHm1tZcc0Ia7TCzD/9ZpoPegHKgesrGK6pSDRGkGDAQbYuQclqLPIoJ9eC8Kb9mYtGryWcM5AywA==}
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.1.2
|
||||
dev: false
|
||||
|
||||
/@mapbox/node-pre-gyp@1.0.11:
|
||||
resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
|
||||
hasBin: true
|
||||
@@ -1606,7 +1612,7 @@ packages:
|
||||
/@types/accepts@1.3.7:
|
||||
resolution: {integrity: sha512-Pay9fq2lM2wXPWbteBsRAGiWH2hig4ZE2asK+mm7kUzlxRTfL961rj89I6zV/E3PcIkDqyuBEcMxFT7rccugeQ==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/babel__code-frame@7.0.6:
|
||||
@@ -1617,7 +1623,7 @@ packages:
|
||||
resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
|
||||
dependencies:
|
||||
'@types/connect': 3.4.38
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/buffer-json@2.0.3:
|
||||
@@ -1643,21 +1649,21 @@ packages:
|
||||
/@types/clean-css@4.2.11:
|
||||
resolution: {integrity: sha512-Y8n81lQVTAfP2TOdtJJEsCoYl1AnOkqDqMvXb9/7pfgZZ7r8YrEyurrAvAoAjHOGXKRybay+5CsExqIH6liccw==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
source-map: 0.6.1
|
||||
dev: true
|
||||
|
||||
/@types/co-body@6.1.3:
|
||||
resolution: {integrity: sha512-UhuhrQ5hclX6UJctv5m4Rfp52AfG9o9+d9/HwjxhVB5NjXxr5t9oKgJxN8xRHgr35oo8meUEHUPFWiKg6y71aA==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
'@types/qs': 6.9.10
|
||||
dev: true
|
||||
|
||||
/@types/connect@3.4.38:
|
||||
resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/content-disposition@0.5.8:
|
||||
@@ -1678,13 +1684,13 @@ packages:
|
||||
'@types/connect': 3.4.38
|
||||
'@types/express': 4.17.21
|
||||
'@types/keygrip': 1.0.6
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/cors@2.8.17:
|
||||
resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/debounce@1.2.4:
|
||||
@@ -1698,7 +1704,7 @@ packages:
|
||||
/@types/express-serve-static-core@4.17.41:
|
||||
resolution: {integrity: sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
'@types/qs': 6.9.10
|
||||
'@types/range-parser': 1.2.7
|
||||
'@types/send': 0.17.4
|
||||
@@ -1716,21 +1722,21 @@ packages:
|
||||
/@types/from2@2.3.5:
|
||||
resolution: {integrity: sha512-giavnjf3kNlJnE+HpZA1CQ3UKHxgehzsTuIMGda8pGMbOiLYGVNADEskey44OZcADHm/HOoBany8IV+0x28XFw==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/fs-extra@11.0.4:
|
||||
resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
|
||||
dependencies:
|
||||
'@types/jsonfile': 6.1.4
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/glob@8.1.0:
|
||||
resolution: {integrity: sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==}
|
||||
dependencies:
|
||||
'@types/minimatch': 5.1.2
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/html-minifier@4.0.5:
|
||||
@@ -1780,7 +1786,7 @@ packages:
|
||||
/@types/jsonfile@6.1.4:
|
||||
resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/keygrip@1.0.6:
|
||||
@@ -1803,7 +1809,7 @@ packages:
|
||||
'@types/http-errors': 2.0.4
|
||||
'@types/keygrip': 1.0.6
|
||||
'@types/koa-compose': 3.2.8
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/mime-types@2.1.4:
|
||||
@@ -1829,8 +1835,8 @@ packages:
|
||||
resolution: {integrity: sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==}
|
||||
dev: true
|
||||
|
||||
/@types/node@20.10.8:
|
||||
resolution: {integrity: sha512-f8nQs3cLxbAFc00vEU59yf9UyGUftkPaLGfvbVOIDdx2i1b8epBqj2aNGyP19fiyXWvlmZ7qC1XLjAzw/OKIeA==}
|
||||
/@types/node@20.11.5:
|
||||
resolution: {integrity: sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==}
|
||||
dependencies:
|
||||
undici-types: 5.26.5
|
||||
|
||||
@@ -1861,7 +1867,7 @@ packages:
|
||||
resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
|
||||
dependencies:
|
||||
'@types/mime': 1.3.5
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/serve-static@1.15.5:
|
||||
@@ -1869,7 +1875,7 @@ packages:
|
||||
dependencies:
|
||||
'@types/http-errors': 2.0.4
|
||||
'@types/mime': 3.0.4
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/shortid@0.0.29:
|
||||
@@ -1899,7 +1905,7 @@ packages:
|
||||
/@types/through2@2.0.41:
|
||||
resolution: {integrity: sha512-ryQ0tidWkb1O1JuYvWKyMLYEtOWDqF5mHerJzKz/gQpoAaJq2l/dsMPBF0B5BNVT34rbARYJ5/tsZwLfUi2kwQ==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
|
||||
/@types/trusted-types@2.0.7:
|
||||
resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
|
||||
@@ -1929,20 +1935,20 @@ packages:
|
||||
/@types/ws@7.4.7:
|
||||
resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/ws@8.5.10:
|
||||
resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
|
||||
/@types/yauzl@2.10.3:
|
||||
resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
@@ -2121,6 +2127,7 @@ packages:
|
||||
/ansi-regex@5.0.1:
|
||||
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
|
||||
engines: {node: '>=8'}
|
||||
requiresBuild: true
|
||||
|
||||
/ansi-regex@6.0.1:
|
||||
resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
|
||||
@@ -2914,6 +2921,7 @@ packages:
|
||||
|
||||
/emoji-regex@8.0.0:
|
||||
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
||||
requiresBuild: true
|
||||
|
||||
/emoji-regex@9.2.2:
|
||||
resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
|
||||
@@ -2955,7 +2963,7 @@ packages:
|
||||
dependencies:
|
||||
'@types/cookie': 0.4.1
|
||||
'@types/cors': 2.8.17
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
accepts: 1.3.8
|
||||
base64id: 2.0.0
|
||||
cookie: 0.4.2
|
||||
@@ -3661,8 +3669,8 @@ packages:
|
||||
ms: 2.1.3
|
||||
dev: true
|
||||
|
||||
/ibantools@4.3.8:
|
||||
resolution: {integrity: sha512-YBdswuzvCSn3EyFPKj4aolOaJ8fnQ3m+8bCwTbZJaDg2lMWKlQ4C37PodHCrCh6GmzVPpC7b6H+nKcJTDblu/g==}
|
||||
/ibantools@4.3.9:
|
||||
resolution: {integrity: sha512-PxQuxv1vq1CgOtfBZIMThZBZEi/hFMmPiAzq4QPx2rmbrUVF/p4dFqvk9e9Z+hVXZxUmdW1cgJh21lpt1UYZzg==}
|
||||
dev: false
|
||||
|
||||
/iconv-lite@0.4.24:
|
||||
@@ -4114,6 +4122,14 @@ packages:
|
||||
'@lit/reactive-element': 2.0.2
|
||||
lit-html: 3.1.0
|
||||
|
||||
/lit-element@4.0.3:
|
||||
resolution: {integrity: sha512-2vhidmC7gGLfnVx41P8UZpzyS0Fb8wYhS5RCm16cMW3oERO0Khd3EsKwtRpOnttuByI5rURjT2dfoA7NlInCNw==}
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.1.2
|
||||
'@lit/reactive-element': 2.0.3
|
||||
lit-html: 3.1.1
|
||||
dev: false
|
||||
|
||||
/lit-html@1.4.1:
|
||||
resolution: {integrity: sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==}
|
||||
dev: true
|
||||
@@ -4123,6 +4139,12 @@ packages:
|
||||
dependencies:
|
||||
'@types/trusted-types': 2.0.7
|
||||
|
||||
/lit-html@3.1.1:
|
||||
resolution: {integrity: sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==}
|
||||
dependencies:
|
||||
'@types/trusted-types': 2.0.7
|
||||
dev: false
|
||||
|
||||
/lit@3.1.0:
|
||||
resolution: {integrity: sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==}
|
||||
dependencies:
|
||||
@@ -4130,6 +4152,14 @@ packages:
|
||||
lit-element: 4.0.2
|
||||
lit-html: 3.1.0
|
||||
|
||||
/lit@3.1.1:
|
||||
resolution: {integrity: sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==}
|
||||
dependencies:
|
||||
'@lit/reactive-element': 2.0.3
|
||||
lit-element: 4.0.3
|
||||
lit-html: 3.1.1
|
||||
dev: false
|
||||
|
||||
/locate-path@3.0.0:
|
||||
resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
|
||||
engines: {node: '>=6'}
|
||||
@@ -5657,7 +5687,7 @@ packages:
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/ts-node@10.9.1(@types/node@20.10.8)(typescript@5.1.6):
|
||||
/ts-node@10.9.1(@types/node@20.11.5)(typescript@5.1.6):
|
||||
resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
@@ -5676,7 +5706,7 @@ packages:
|
||||
'@tsconfig/node12': 1.0.11
|
||||
'@tsconfig/node14': 1.0.3
|
||||
'@tsconfig/node16': 1.0.4
|
||||
'@types/node': 20.10.8
|
||||
'@types/node': 20.11.5
|
||||
acorn: 8.11.2
|
||||
acorn-walk: 8.3.0
|
||||
arg: 4.1.3
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '1.0.243',
|
||||
version: '1.0.246',
|
||||
description: 'website for lossless.com'
|
||||
}
|
||||
|
||||
11
ts_web/elements/00colors.ts
Normal file
11
ts_web/elements/00colors.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export const dark = {
|
||||
blue: '#0050b9',
|
||||
blueActive: '#0069f2',
|
||||
text: '#ffffff',
|
||||
}
|
||||
|
||||
export const bright = {
|
||||
blue: '#0050b9',
|
||||
blueActive: '#0069f2',
|
||||
text: '#333333',
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import * as plugins from './plugins.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
|
||||
import { DeesContextmenu } from './dees-contextmenu.js';
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import * as colors from './00colors.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
import { demoFunc } from './dees-contextmenu.demo.js';
|
||||
import * as plugins from './plugins.js';
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
@@ -110,16 +111,18 @@ export class DeesContextmenu extends DeesElement {
|
||||
color: ${cssManager.bdTheme('#222', '#ccc')};
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
border: 1px solid ${cssManager.bdTheme('#fff', '#444')};
|
||||
border: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
|
||||
min-height: 34px;
|
||||
border-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#fff', '#222')};
|
||||
box-shadow: 0px 1px 4px ${cssManager.bdTheme('#00000020', '#000000')};
|
||||
user-select: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mainbox .menuitem {
|
||||
padding: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mainbox .menuitem dees-icon {
|
||||
@@ -130,7 +133,7 @@ export class DeesContextmenu extends DeesElement {
|
||||
}
|
||||
|
||||
.mainbox .menuitem:hover {
|
||||
background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
|
||||
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
|
||||
}
|
||||
|
||||
.mainbox .menuitem:active {
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
import * as colors from './00colors.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
|
||||
import { demoFunc } from './dees-dataview-statusobject.demo.js';
|
||||
import {
|
||||
DeesElement,
|
||||
@@ -34,6 +37,7 @@ export class DeesDataviewStatusobject extends DeesElement {
|
||||
box-shadow: 0px 1px 3px #00000030;
|
||||
min-height: 48px;
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@@ -69,7 +73,20 @@ export class DeesDataviewStatusobject extends DeesElement {
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
margin-right: 16px;
|
||||
color: #ffffff80
|
||||
color: #ffffff80;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.copyMain:hover {
|
||||
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
|
||||
border: 1px solid ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.copyMain:active {
|
||||
background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
|
||||
border: 1px solid ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.statusdot.ok {
|
||||
@@ -85,11 +102,16 @@ export class DeesDataviewStatusobject extends DeesElement {
|
||||
}
|
||||
|
||||
.detail {
|
||||
minheight: 60px;
|
||||
min-height: 60px;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 40px auto;
|
||||
border-top: 1px dotted ${cssManager.bdTheme('#999', '#282828')};
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.detail:hover {
|
||||
background: #ffffff05;
|
||||
}
|
||||
|
||||
.detail .detailsText {
|
||||
|
||||
@@ -35,7 +35,9 @@ export const demoFunc = () => html`
|
||||
{ option: 'option 2', key: 'option2' },
|
||||
{ option: 'option 3', key: 'option3' },
|
||||
]}></dees-input-multiselect>
|
||||
<dees-input-typelist></dees-input-typelist>
|
||||
<dees-input-typelist
|
||||
.label=${'a type list'}
|
||||
></dees-input-typelist>
|
||||
<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-text
|
||||
@@ -50,6 +52,14 @@ export const demoFunc = () => html`
|
||||
label="another text"
|
||||
></dees-input-checkbox>
|
||||
<dees-input-iban></dees-input-iban>
|
||||
<dees-input-multitoggle
|
||||
.label=${'multi select'}
|
||||
.options=${['option 1', 'option 2', 'option 3']}
|
||||
.selectedOption=${'option 1'}
|
||||
></dees-input-multitoggle>
|
||||
<dees-input-fileupload
|
||||
.label=${'attachments'}
|
||||
></dees-input-fileupload>
|
||||
<dees-form-submit>Submit</dees-form-submit>
|
||||
</dees-form>
|
||||
</div>
|
||||
|
||||
@@ -50,11 +50,13 @@ import {
|
||||
faEyeSlash as faEyeSlashSolid,
|
||||
faFileInvoice as faFileInvoiceSolid,
|
||||
faFileInvoiceDollar as faFileInvoiceDollarSolid,
|
||||
faGear as faGearSolid,
|
||||
faGrip as faGripSolid,
|
||||
faMessage as faMessageSolid,
|
||||
faMoneyCheckDollar as faMoneyCheckDollarSolid,
|
||||
faMugHot as faMugHotSolid,
|
||||
faMinus as faMinusSolid,
|
||||
faPaperclip as faPaperclipSolid,
|
||||
faPaste as faPasteSolid,
|
||||
faPenToSquare as faPenToSquareSolid,
|
||||
faPlus as faPlusSolid,
|
||||
@@ -93,12 +95,14 @@ export const faIcons = {
|
||||
eyeSlash: faEyeSlashSolid,
|
||||
fileInvoice: faFileInvoiceSolid,
|
||||
fileInvoiceDoller: faFileInvoiceDollarSolid,
|
||||
gear: faGearSolid,
|
||||
grip: faGripSolid,
|
||||
message: faMessageRegular,
|
||||
messageSolid: faMessageSolid,
|
||||
moneyCheckDollar: faMoneyCheckDollarSolid,
|
||||
mugHot: faMugHotSolid,
|
||||
minus: faMinusSolid,
|
||||
paperclip: faPaperclipSolid,
|
||||
paste: faPasteRegular,
|
||||
pasteSolid: faPasteSolid,
|
||||
penToSquare: faPenToSquareSolid,
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
import * as colors from './00colors.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
|
||||
import { DeesContextmenu } from './dees-contextmenu.js';
|
||||
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
@@ -19,7 +24,8 @@ declare global {
|
||||
|
||||
@customElement('dees-input-fileupload')
|
||||
export class DeesInputFileupload extends DeesElement {
|
||||
public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
|
||||
public static demo = () =>
|
||||
html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
|
||||
|
||||
// INSTANCE
|
||||
public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
|
||||
@@ -70,6 +76,7 @@ export class DeesInputFileupload extends DeesElement {
|
||||
display: grid;
|
||||
margin: 10px 0px;
|
||||
margin-bottom: 24px;
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
}
|
||||
|
||||
.hidden {
|
||||
@@ -77,30 +84,15 @@ export class DeesInputFileupload extends DeesElement {
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.uploadButton {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
max-width: 600px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#222222')};
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
border-top: 1px solid #ffffff10;
|
||||
}
|
||||
|
||||
.uploadButton:hover {
|
||||
color: #fff;
|
||||
background: rgb(3, 155, 229);
|
||||
}
|
||||
|
||||
.uploadButton::after {
|
||||
.maincontainer::after {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
left: 2px;
|
||||
@@ -111,28 +103,71 @@ export class DeesInputFileupload extends DeesElement {
|
||||
display: block;
|
||||
border: 2px dashed rgba(255, 255, 255, 0);
|
||||
transition: all 0.2s;
|
||||
pointer-events: none;
|
||||
background: #00000000;
|
||||
}
|
||||
.uploadButton.dragOver::after {
|
||||
.maincontainer.dragOver::after {
|
||||
transform: scale3d(1, 1, 1);
|
||||
border: 2px dashed rgba(255, 255, 255, 0.3);
|
||||
background: #00000080;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.uploadButton {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
max-width: 600px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.uploadButton:hover {
|
||||
color: #fff;
|
||||
background: ${unsafeCSS(colors.dark.blue)};
|
||||
}
|
||||
|
||||
.uploadCandidate {
|
||||
display: grid;
|
||||
grid-template-columns: 48px auto;
|
||||
background: #333;
|
||||
padding: 8px 8px 8px 0px;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
border-bottom: 1px dashed #444;
|
||||
border-radius: 3px;
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
padding: 8px;
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.uploadButton:hover .uploadCandidate {
|
||||
color: ${cssManager.bdTheme('#fff', '#fff')};
|
||||
border-bottom: 1px dashed #fff;
|
||||
cursor: default;
|
||||
transition: all 0.2s;
|
||||
border-top: 1px solid #ffffff10;
|
||||
}
|
||||
|
||||
.uploadCandidate:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.uploadCandidate .icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uploadCandidate:hover {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.uploadCandidate .description {
|
||||
font-size: 14px;
|
||||
border-left: 1px solid #ffffff10;
|
||||
padding-left: 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@@ -141,10 +176,32 @@ export class DeesInputFileupload extends DeesElement {
|
||||
<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.label ? html`<div class="label">${this.label}</div>` : null}
|
||||
<div class="maincontainer ${this.state === 'dragOver' ? 'dragOver' : ''}">
|
||||
${this.value.map(
|
||||
(fileArg) => html`
|
||||
<div class="uploadCandidate" @contextmenu=${eventArg => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [{
|
||||
iconName: 'trash',
|
||||
name: 'Remove',
|
||||
action: async () => {
|
||||
this.value.splice(this.value.indexOf(fileArg), 1);
|
||||
this.requestUpdate();
|
||||
}
|
||||
}]);
|
||||
}}>
|
||||
<div class="icon">
|
||||
<dees-icon .iconFA=${'paperclip'}></dees-icon>
|
||||
</div>
|
||||
<div class="description">
|
||||
<span style="font-weight: 600">${fileArg.name}</span><br />
|
||||
<span style="font-weight: 400">${fileArg.size}</span>
|
||||
</div>
|
||||
</div> `
|
||||
)}
|
||||
<div class="uploadButton" @click=${
|
||||
this.openFileSelector
|
||||
}>
|
||||
${this.buttonText}
|
||||
</div>
|
||||
</div>
|
||||
@@ -157,7 +214,6 @@ export class DeesInputFileupload extends DeesElement {
|
||||
this.state = 'idle';
|
||||
this.buttonText = 'Upload more files...';
|
||||
}
|
||||
|
||||
|
||||
public async updateValue(eventArg: Event) {
|
||||
const target: any = eventArg.target;
|
||||
@@ -178,9 +234,8 @@ export class DeesInputFileupload extends DeesElement {
|
||||
target.value = '';
|
||||
});
|
||||
|
||||
|
||||
// lets handle drag and drop
|
||||
const dropArea = this.shadowRoot.querySelector('.uploadButton');
|
||||
const dropArea = this.shadowRoot.querySelector('.maincontainer');
|
||||
const handlerFunction = (eventArg: DragEvent) => {
|
||||
eventArg.preventDefault();
|
||||
switch (eventArg.type) {
|
||||
|
||||
@@ -16,6 +16,11 @@ const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
|
||||
export class DeesInputMultitoggle extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public label: string;
|
||||
|
||||
@property()
|
||||
type: 'boolean' | 'multi' | 'single' = 'multi';
|
||||
|
||||
@@ -40,9 +45,17 @@ export class DeesInputMultitoggle extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
display: block;
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
user-select: none;
|
||||
margin: 8px 0px 24px 0px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.selections {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -51,30 +64,37 @@ export class DeesInputMultitoggle extends DeesElement {
|
||||
background: #333;
|
||||
width: min-content;
|
||||
border-radius: 20px;
|
||||
height: 40px;
|
||||
height: 32px;
|
||||
border-top: 1px solid #ffffff10;
|
||||
}
|
||||
|
||||
.option {
|
||||
color: #CCC;
|
||||
color: #ccc;
|
||||
position: relative;
|
||||
padding: 0px 16px;
|
||||
line-height: 40px;
|
||||
line-height: 32px;
|
||||
cursor: default;
|
||||
width: min-content; /* Make the width as per the content */
|
||||
white-space: nowrap; /* Prevent text wrapping */
|
||||
transition: all 0.1s;
|
||||
font-size: 14px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.option.selected {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
height: 32px;
|
||||
height: 24px;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
top: 3px;
|
||||
border-radius: 16px;
|
||||
background: #0050b9;
|
||||
min-width: 36px;
|
||||
@@ -84,11 +104,16 @@ export class DeesInputMultitoggle extends DeesElement {
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="label">MultiSelect</div>
|
||||
${this.label ? html`<div class="label">${this.label}</div>` : html``}
|
||||
<div class="mainbox">
|
||||
<div class="selections">
|
||||
<div class="indicator"></div>
|
||||
${this.options.map((option) => html` <div class="option" @click=${() => this.handleSelection(option)}>${option}</div> `)}
|
||||
${this.options.map(
|
||||
(option) =>
|
||||
html`<div class="option ${option === this.selectedOption ? 'selected': ''}" @click=${() => this.handleSelection(option)}>
|
||||
${option}
|
||||
</div> `
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -108,7 +133,9 @@ export class DeesInputMultitoggle extends DeesElement {
|
||||
|
||||
public async setIndicator() {
|
||||
const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
|
||||
const option: HTMLDivElement = this.shadowRoot.querySelector(`.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`);
|
||||
const option: HTMLDivElement = this.shadowRoot.querySelector(
|
||||
`.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`
|
||||
);
|
||||
if (indicator && option) {
|
||||
indicator.style.width = `${option.clientWidth - 8}px`;
|
||||
indicator.style.left = `${option.offsetLeft + 4}px`;
|
||||
|
||||
@@ -100,14 +100,14 @@ export class DeesInputText extends DeesElement {
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-top: 5px;
|
||||
margin-top: 0px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#222')};
|
||||
border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
|
||||
border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
|
||||
border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
|
||||
border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #222')};
|
||||
border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
|
||||
border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
|
||||
padding-left: 10px;
|
||||
|
||||
@@ -16,6 +16,14 @@ const { demoFunc } = await import('./dees-input-typelist.demo.js');
|
||||
export class DeesInputTypelist extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public label: string;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@@ -24,11 +32,13 @@ export class DeesInputTypelist extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#333', '#fff')}
|
||||
display: block;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin: 8px 0px 24px 0px;
|
||||
}
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.mainbox {
|
||||
border-radius: 3px;
|
||||
@@ -74,7 +84,7 @@ export class DeesInputTypelist extends DeesElement {
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="label">Type List</div>
|
||||
<div class="label">${this.label}</div>
|
||||
<div class="mainbox">
|
||||
<div class="tags" @click=${() => {
|
||||
this.shadowRoot.querySelector('input').focus();
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
import {
|
||||
cssManager,
|
||||
css,
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import * as colors from './00colors.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
|
||||
import { demoFunc } from './dees-modal.demo.js';
|
||||
import {
|
||||
customElement,
|
||||
@@ -123,19 +125,35 @@ export class DeesModal extends DeesElement {
|
||||
padding: 16px;
|
||||
}
|
||||
.modal .bottomButtons {
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-top: 1px solid #222;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal .bottomButtons .bottomButton {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 8px 0px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-right: 1px solid #222;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.modal .bottomButtons .bottomButton:first-child {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.modal .bottomButtons .bottomButton:last-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.modal .bottomButtons .bottomButton:hover {
|
||||
background: #222;
|
||||
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
|
||||
}
|
||||
.modal .bottomButtons .bottomButton:active {
|
||||
background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
|
||||
}
|
||||
.modal .bottomButtons .bottomButton:last-child {
|
||||
border-right: none;
|
||||
|
||||
11
ts_web/elements/dees-progressbar.demo.ts
Normal file
11
ts_web/elements/dees-progressbar.demo.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
import { DeesProgressbar } from './dees-progressbar.js';
|
||||
|
||||
export const demoFunc = () => {
|
||||
return html`
|
||||
<dees-progressbar
|
||||
.percentage=${50}
|
||||
></dees-progressbar>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import * as plugins from './00plugins.js';
|
||||
import * as colors from './00colors.js';
|
||||
import { demoFunc } from './dees-progressbar.demo.js';
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
DeesElement,
|
||||
property,
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
type CSSResult,
|
||||
unsafeCSS,
|
||||
unsafeHTML,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
@customElement('dees-progressbar')
|
||||
export class DeesProgressbar extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Number,
|
||||
})
|
||||
public percentage = 0;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: ${cssManager.bdTheme(colors.bright.text, colors.dark.text)};
|
||||
}
|
||||
.progressBarContainer {
|
||||
padding: 8px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#444')};
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border-top: 0.5px solid ${cssManager.bdTheme('none', '#555')};
|
||||
}
|
||||
|
||||
.progressBarFill {
|
||||
background: ${cssManager.bdTheme(colors.dark.blueActive, colors.bright.blueActive)};
|
||||
height: 8px;
|
||||
margin-top: -0.5px;
|
||||
transition: 0.2s width;
|
||||
border-radius: 4px;
|
||||
width: 0px;
|
||||
border-top: 0.5 solid ${cssManager.bdTheme('none', '#398fff')};
|
||||
}
|
||||
|
||||
.progressText {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<div class="progressBarContainer">
|
||||
<div class="progressBar">
|
||||
<div class="progressBarFill"></div>
|
||||
<div class="progressText">
|
||||
${this.percentage}%
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): void {
|
||||
super.firstUpdated(_changedProperties);
|
||||
this.updateComplete.then(() => {
|
||||
this.updatePercentage();
|
||||
});
|
||||
}
|
||||
|
||||
public async updatePercentage() {
|
||||
const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
|
||||
progressBarFill.style.width = `${this.percentage}%`;
|
||||
}
|
||||
|
||||
updated(){
|
||||
this.updatePercentage();
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
import * as plugins from './00plugins.js';
|
||||
import * as colors from './00colors.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
@@ -150,7 +153,22 @@ export class DeesStepper extends DeesElement {
|
||||
}
|
||||
|
||||
.step .goBack:hover {
|
||||
background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
background: ${cssManager.bdTheme('#00000012', colors.dark.blue)};
|
||||
}
|
||||
|
||||
.step .goBack:active {
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
background: ${cssManager.bdTheme('#00000012', colors.dark.blueActive)};
|
||||
}
|
||||
|
||||
.step .goBack span {
|
||||
transition: all 0.2s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.step .goBack:hover span {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.step .title {
|
||||
@@ -180,7 +198,7 @@ export class DeesStepper extends DeesElement {
|
||||
: ''}"
|
||||
>
|
||||
${this.getIndexOfStep(stepArg) > 0
|
||||
? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>`
|
||||
? html`<div class="goBack" @click=${this.goBack}><span style="font-family: Inter"><-</span> go to previous step</div>`
|
||||
: ``}
|
||||
<div class="stepCounter">
|
||||
Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { type ITableAction } from './dees-table.js';
|
||||
import * as plugins from './plugins.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
interface ITableDemoData {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import * as colors from './00colors.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
import { demoFunc } from './dees-table.demo.js';
|
||||
import {
|
||||
customElement,
|
||||
@@ -173,6 +174,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
|
||||
overflow-x: auto;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -311,6 +313,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
display: inline-block;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.action:first-child {
|
||||
@@ -319,7 +322,15 @@ export class DeesTable<T> extends DeesElement {
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
background: ${cssManager.bdTheme('#CCC', '#00000030')};
|
||||
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
|
||||
}
|
||||
|
||||
.action:active {
|
||||
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blueActive)};
|
||||
}
|
||||
|
||||
.action:hover dees-icon {
|
||||
filter: ${cssManager.bdTheme('invert(1) brightness(3)', '')};
|
||||
}
|
||||
|
||||
.footer {
|
||||
@@ -344,16 +355,22 @@ export class DeesTable<T> extends DeesElement {
|
||||
.footerActions .footerAction {
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.footerActions .footerAction:hover {
|
||||
background: ${cssManager.bdTheme('#CCC', '#111')};
|
||||
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footerActions dees-icon {
|
||||
.footerActions .footerAction dees-icon {
|
||||
display: flex;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.footerActions .footerAction:hover dees-icon {
|
||||
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@ import { html } from '@design.estate/dees-element';
|
||||
|
||||
import { DeesUpdater } from './dees-updater.js';
|
||||
|
||||
export const demoFunc = () => {
|
||||
|
||||
export const demoFunc = async () => {
|
||||
const updater = await DeesUpdater.createAndShow();
|
||||
setTimeout(async () => {
|
||||
await updater.destroy();
|
||||
}, 10000);
|
||||
}
|
||||
@@ -1,4 +1,12 @@
|
||||
import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, domtools } from '@design.estate/dees-element';
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
html,
|
||||
property,
|
||||
type CSSResult,
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
import { demoFunc } from './dees-updater.demo.js';
|
||||
|
||||
import './dees-windowlayer';
|
||||
@@ -15,7 +23,9 @@ export class DeesUpdater extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
public static async createAndShow() {
|
||||
|
||||
const updater = new DeesUpdater();
|
||||
document.body.appendChild(updater);
|
||||
return updater;
|
||||
}
|
||||
|
||||
@property({
|
||||
@@ -37,56 +47,64 @@ export class DeesUpdater extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.modalContainer {
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
max-width: 800px;
|
||||
border-radius: 8px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
|
||||
}
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
max-width: 800px;
|
||||
border-radius: 8px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
|
||||
}
|
||||
|
||||
.headingContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 40px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
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%;
|
||||
}
|
||||
`
|
||||
]
|
||||
.buttonContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<dees-windowlayer @clicked="${this.windowLayerClicked}" .options=${{
|
||||
blur: true,
|
||||
}}>
|
||||
<dees-windowlayer
|
||||
@clicked="${this.windowLayerClicked}"
|
||||
.options=${{
|
||||
blur: true,
|
||||
}}
|
||||
>
|
||||
<div class="modalContainer">
|
||||
<div class="headingContainer">
|
||||
<dees-spinner .size=${60}></dees-spinner>
|
||||
<h1>Updating the application...</h1>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<dees-progressbar .progress=${0.5}></dees-progressbar>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<dees-button>More info</dees-button>
|
||||
<dees-button>Changelog</dees-button>
|
||||
</div>
|
||||
</div>
|
||||
</dees-windowlayer>>
|
||||
</div> </dees-windowlayer
|
||||
>>
|
||||
`;
|
||||
}
|
||||
|
||||
private windowLayerClicked() {
|
||||
|
||||
public async destroy() {
|
||||
this.parentElement.removeChild(this);
|
||||
}
|
||||
|
||||
private windowLayerClicked() {}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ export * from './dees-input-fileupload.js';
|
||||
export * from './dees-input-iban.js';
|
||||
export * from './dees-input-typelist.js';
|
||||
export * from './dees-input-phone.js';
|
||||
export * from './dees-progressbar.js';
|
||||
export * from './dees-input-quantityselector.js';
|
||||
export * from './dees-input-radio.js';
|
||||
export * from './dees-input-text.js';
|
||||
|
||||
Reference in New Issue
Block a user