From 9cdae8ccdb6e2b496ce5d39829d96955a4d4b2bd Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Thu, 18 Jan 2024 02:08:19 +0100 Subject: [PATCH] fix(core): update --- package.json | 8 +- pnpm-lock.yaml | 128 +++++++++++------- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/dees-contextmenu.ts | 11 +- ts_web/elements/dees-dataview-statusobject.ts | 26 +++- ts_web/elements/dees-form.demo.ts | 12 +- ts_web/elements/dees-icon.ts | 2 + ts_web/elements/dees-input-fileupload.ts | 127 ++++++++++++----- ts_web/elements/dees-input-multitoggle.ts | 45 ++++-- ts_web/elements/dees-input-text.ts | 8 +- ts_web/elements/dees-input-typelist.ts | 16 ++- ts_web/elements/dees-modal.ts | 28 +++- ts_web/elements/dees-stepper.ts | 22 ++- ts_web/elements/dees-table.ts | 23 +++- 14 files changed, 335 insertions(+), 123 deletions(-) diff --git a/package.json b/package.json index 9994a89..ef9b690 100644 --- a/package.json +++ b/package.json @@ -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/**/*", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 85e0668..2118933 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 6585abc..f7fadfd 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -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' } diff --git a/ts_web/elements/dees-contextmenu.ts b/ts_web/elements/dees-contextmenu.ts index 62160c2..7f1cd2f 100644 --- a/ts_web/elements/dees-contextmenu.ts +++ b/ts_web/elements/dees-contextmenu.ts @@ -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 { diff --git a/ts_web/elements/dees-dataview-statusobject.ts b/ts_web/elements/dees-dataview-statusobject.ts index f7442ee..f78102f 100644 --- a/ts_web/elements/dees-dataview-statusobject.ts +++ b/ts_web/elements/dees-dataview-statusobject.ts @@ -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 { diff --git a/ts_web/elements/dees-form.demo.ts b/ts_web/elements/dees-form.demo.ts index a6805d9..4571696 100644 --- a/ts_web/elements/dees-form.demo.ts +++ b/ts_web/elements/dees-form.demo.ts @@ -35,7 +35,9 @@ export const demoFunc = () => html` { option: 'option 2', key: 'option2' }, { option: 'option 3', key: 'option3' }, ]}> - + html` label="another text" > + + Submit diff --git a/ts_web/elements/dees-icon.ts b/ts_web/elements/dees-icon.ts index f237e98..f26d95a 100644 --- a/ts_web/elements/dees-icon.ts +++ b/ts_web/elements/dees-icon.ts @@ -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, diff --git a/ts_web/elements/dees-input-fileupload.ts b/ts_web/elements/dees-input-fileupload.ts index 48790b6..9ad2470 100644 --- a/ts_web/elements/dees-input-fileupload.ts +++ b/ts_web/elements/dees-input-fileupload.ts @@ -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``; + public static demo = () => + html``; // 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 { -
- ${this.label ? html`
${this.label}
` : null} - ${this.value.map((fileArg) => html`
${fileArg.name} | ${fileArg.size}
`)} -
+ ${this.label ? html`
${this.label}
` : null} +
+ ${this.value.map( + (fileArg) => html` +
{ + DeesContextmenu.openContextMenuWithOptions(eventArg, [{ + iconName: 'trash', + name: 'Remove', + action: async () => { + this.value.splice(this.value.indexOf(fileArg), 1); + this.requestUpdate(); + } + }]); + }}> +
+ +
+
+ ${fileArg.name}
+ ${fileArg.size} +
+
` + )} +
${this.buttonText}
@@ -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) { diff --git a/ts_web/elements/dees-input-multitoggle.ts b/ts_web/elements/dees-input-multitoggle.ts index b27e2b4..0b7ecc5 100644 --- a/ts_web/elements/dees-input-multitoggle.ts +++ b/ts_web/elements/dees-input-multitoggle.ts @@ -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` -
MultiSelect
+ ${this.label ? html`
${this.label}
` : html``}
- ${this.options.map((option) => html`
this.handleSelection(option)}>${option}
`)} + ${this.options.map( + (option) => + html`
this.handleSelection(option)}> + ${option} +
` + )}
`; @@ -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`; diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts index e465166..a48137b 100644 --- a/ts_web/elements/dees-input-text.ts +++ b/ts_web/elements/dees-input-text.ts @@ -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; diff --git a/ts_web/elements/dees-input-typelist.ts b/ts_web/elements/dees-input-typelist.ts index 4be6422..b08a1f5 100644 --- a/ts_web/elements/dees-input-typelist.ts +++ b/ts_web/elements/dees-input-typelist.ts @@ -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` -
Type List
+
${this.label}
{ this.shadowRoot.querySelector('input').focus(); diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts index be825c5..c2e5809 100644 --- a/ts_web/elements/dees-modal.ts +++ b/ts_web/elements/dees-modal.ts @@ -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; diff --git a/ts_web/elements/dees-stepper.ts b/ts_web/elements/dees-stepper.ts index 3d27076..efafbff 100644 --- a/ts_web/elements/dees-stepper.ts +++ b/ts_web/elements/dees-stepper.ts @@ -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`
<- go to previous step
` + ? html`
<- go to previous step
` : ``}
Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts index 35c3f88..2068dc3 100644 --- a/ts_web/elements/dees-table.ts +++ b/ts_web/elements/dees-table.ts @@ -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 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 extends DeesElement { line-height: 36px; height: 36px; display: inline-block; + border-radius: 8px; } .action:first-child { @@ -319,7 +322,15 @@ export class DeesTable 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 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 { + + } `, ];