fix(core): update

This commit is contained in:
Philipp Kunz 2024-01-18 02:08:19 +01:00
parent 7e1c5f3dbb
commit 9cdae8ccdb
14 changed files with 335 additions and 123 deletions

View File

@ -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
View File

@ -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

View File

@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '1.0.245',
version: '1.0.246',
description: 'website for lossless.com'
}

View File

@ -1,5 +1,6 @@
import { demoFunc } from './dees-contextmenu.demo.js';
import * as colors from './00colors.js';
import * as plugins from './00plugins.js';
import { demoFunc } from './dees-contextmenu.demo.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 {

View File

@ -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 {

View File

@ -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>

View File

@ -56,6 +56,7 @@ import {
faMoneyCheckDollar as faMoneyCheckDollarSolid,
faMugHot as faMugHotSolid,
faMinus as faMinusSolid,
faPaperclip as faPaperclipSolid,
faPaste as faPasteSolid,
faPenToSquare as faPenToSquareSolid,
faPlus as faPlusSolid,
@ -101,6 +102,7 @@ export const faIcons = {
moneyCheckDollar: faMoneyCheckDollarSolid,
mugHot: faMugHotSolid,
minus: faMinusSolid,
paperclip: faPaperclipSolid,
paste: faPasteRegular,
pasteSolid: faPasteSolid,
penToSquare: faPenToSquareSolid,

View File

@ -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}>
<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>
@ -158,7 +215,6 @@ export class DeesInputFileupload extends DeesElement {
this.buttonText = 'Upload more files...';
}
public async updateValue(eventArg: Event) {
const target: any = eventArg.target;
this.value = target.value;
@ -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) {

View File

@ -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`;

View File

@ -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;

View File

@ -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();

View File

@ -1,4 +1,6 @@
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;

View File

@ -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

View File

@ -1,3 +1,4 @@
import * as colors from './00colors.js';
import * as plugins from './00plugins.js';
import { demoFunc } from './dees-table.demo.js';
import {
@ -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 {
}
`,
];