design.estate/dees-catalog
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2024-01-10 05:11:55 +01:00
parent f3ca4a114a
commit 93ee42135c
15 changed files with 230 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -32,12 +32,12 @@
},
"devDependencies": {
"@git.zone/tsbuild": "^2.1.72",
"@git.zone/tsbundle": "^2.0.13",
"@git.zone/tsbundle": "^2.0.14",
"@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.7"
"@types/node": "^20.10.8"
},
"files": [
"ts/**/*",

121
pnpm-lock.yaml
View File

@ -53,14 +53,14 @@ devDependencies:
specifier: ^2.1.72
version: 2.1.72
'@git.zone/tsbundle':
specifier: ^2.0.13
version: 2.0.13
specifier: ^2.0.14
version: 2.0.14
'@git.zone/tstest':
specifier: ^1.0.77
version: 1.0.84(@types/node@20.10.7)(sinon@17.0.1)
version: 1.0.84(@types/node@20.10.8)(sinon@17.0.1)
'@git.zone/tswatch':
specifier: ^2.0.21
version: 2.0.21(@types/node@20.10.7)
version: 2.0.21(@types/node@20.10.8)
'@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.7
version: 20.10.7
specifier: ^20.10.8
version: 20.10.8
packages:
@ -130,9 +130,7 @@ packages:
express-force-ssl: 0.3.2
lit: 3.1.0
transitivePeerDependencies:
- bufferutil
- supports-color
- utf-8-validate
dev: true
/@api.global/typedserver@3.0.9:
@ -167,7 +165,9 @@ packages:
express-force-ssl: 0.3.2
lit: 3.1.0
transitivePeerDependencies:
- bufferutil
- supports-color
- utf-8-validate
dev: true
/@api.global/typedsocket@3.0.0:
@ -536,8 +536,8 @@ packages:
typescript: 5.3.3
dev: true
/@git.zone/tsbundle@2.0.13:
resolution: {integrity: sha512-6T2jSGqM6rt00HVuRll/z9KSw6xrfbe/h06K97KqGLstnwQZBn1UAMDJyQjhStHZZZb9BuP4YAczT4IuHcdSqQ==}
/@git.zone/tsbundle@2.0.14:
resolution: {integrity: sha512-4J5QiujPEPa+OYzN9TI9il6FLcJ7MGYWL8NzEhSerZ2jFm/iPjO75/s9x44VjszDmjo3xe/TRnRoHWFELVJQOA==}
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.7):
/@git.zone/tsrun@1.2.46(@types/node@20.10.8):
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.7)(typescript@5.1.6)
ts-node: 10.9.1(@types/node@20.10.8)(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.7)(sinon@17.0.1):
/@git.zone/tstest@1.0.84(@types/node@20.10.8)(sinon@17.0.1):
resolution: {integrity: sha512-HQQvloUWGj4fPxOuhO7Dfxw83szRlIMNJpaJtIgDUWiMm6vF9ygvcMTgpUUkEmWjxQ/t/SkXvHqHjtfp0l4l2g==}
hasBin: true
dependencies:
'@api.global/typedserver': 3.0.9
'@git.zone/tsbundle': 2.0.13
'@git.zone/tsrun': 1.2.46(@types/node@20.10.7)
'@git.zone/tsbundle': 2.0.14
'@git.zone/tsrun': 1.2.46(@types/node@20.10.8)
'@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.7):
/@git.zone/tswatch@2.0.21(@types/node@20.10.8):
resolution: {integrity: sha512-7Q0I0dIZD+ApR4MWeykvf+cYk+I6t1Re+jhAj8xrLqZBetvWv9C315jG6Brx96DEYz4th6EvyVUONQkLndBI4w==}
hasBin: true
dependencies:
'@api.global/typedserver': 3.0.19
'@git.zone/tsbundle': 2.0.13
'@git.zone/tsrun': 1.2.46(@types/node@20.10.7)
'@git.zone/tsbundle': 2.0.14
'@git.zone/tsrun': 1.2.46(@types/node@20.10.8)
'@push.rocks/early': 4.0.4
'@push.rocks/lik': 6.0.12
'@push.rocks/smartchok': 1.0.23
@ -620,9 +620,7 @@ packages:
- '@swc/core'
- '@swc/wasm'
- '@types/node'
- bufferutil
- supports-color
- utf-8-validate
dev: true
/@isaacs/cliui@8.0.2:
@ -1549,12 +1547,6 @@ packages:
type-detect: 4.0.8
dev: true
/@sinonjs/fake-timers@10.3.0:
resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
dependencies:
'@sinonjs/commons': 3.0.0
dev: true
/@sinonjs/fake-timers@11.2.2:
resolution: {integrity: sha512-G2piCSxQ7oWOxwGSAyFHfPIsyeJGXYtc6mFbnFA+kRXkiEnTl8c/8jul2S329iFBnDI9HGoeWWAZvuvOkZccgw==}
dependencies:
@ -1614,7 +1606,7 @@ packages:
/@types/accepts@1.3.7:
resolution: {integrity: sha512-Pay9fq2lM2wXPWbteBsRAGiWH2hig4ZE2asK+mm7kUzlxRTfL961rj89I6zV/E3PcIkDqyuBEcMxFT7rccugeQ==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/babel__code-frame@7.0.6:
@ -1625,7 +1617,7 @@ packages:
resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
dependencies:
'@types/connect': 3.4.38
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/buffer-json@2.0.3:
@ -1651,21 +1643,21 @@ packages:
/@types/clean-css@4.2.11:
resolution: {integrity: sha512-Y8n81lQVTAfP2TOdtJJEsCoYl1AnOkqDqMvXb9/7pfgZZ7r8YrEyurrAvAoAjHOGXKRybay+5CsExqIH6liccw==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
source-map: 0.6.1
dev: true
/@types/co-body@6.1.3:
resolution: {integrity: sha512-UhuhrQ5hclX6UJctv5m4Rfp52AfG9o9+d9/HwjxhVB5NjXxr5t9oKgJxN8xRHgr35oo8meUEHUPFWiKg6y71aA==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
'@types/qs': 6.9.10
dev: true
/@types/connect@3.4.38:
resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/content-disposition@0.5.8:
@ -1686,13 +1678,13 @@ packages:
'@types/connect': 3.4.38
'@types/express': 4.17.21
'@types/keygrip': 1.0.6
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/cors@2.8.17:
resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/debounce@1.2.4:
@ -1706,7 +1698,7 @@ packages:
/@types/express-serve-static-core@4.17.41:
resolution: {integrity: sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
'@types/qs': 6.9.10
'@types/range-parser': 1.2.7
'@types/send': 0.17.4
@ -1724,21 +1716,21 @@ packages:
/@types/from2@2.3.5:
resolution: {integrity: sha512-giavnjf3kNlJnE+HpZA1CQ3UKHxgehzsTuIMGda8pGMbOiLYGVNADEskey44OZcADHm/HOoBany8IV+0x28XFw==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
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.7
'@types/node': 20.10.8
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.7
'@types/node': 20.10.8
dev: true
/@types/html-minifier@4.0.5:
@ -1788,7 +1780,7 @@ packages:
/@types/jsonfile@6.1.4:
resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/keygrip@1.0.6:
@ -1811,7 +1803,7 @@ packages:
'@types/http-errors': 2.0.4
'@types/keygrip': 1.0.6
'@types/koa-compose': 3.2.8
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/mime-types@2.1.4:
@ -1837,8 +1829,8 @@ packages:
resolution: {integrity: sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==}
dev: true
/@types/node@20.10.7:
resolution: {integrity: sha512-fRbIKb8C/Y2lXxB5eVMj4IU7xpdox0Lh8bUPEdtLysaylsml1hOOx1+STloRs/B9nf7C6kPRmmg/V7aQW7usNg==}
/@types/node@20.10.8:
resolution: {integrity: sha512-f8nQs3cLxbAFc00vEU59yf9UyGUftkPaLGfvbVOIDdx2i1b8epBqj2aNGyP19fiyXWvlmZ7qC1XLjAzw/OKIeA==}
dependencies:
undici-types: 5.26.5
@ -1869,7 +1861,7 @@ packages:
resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
dependencies:
'@types/mime': 1.3.5
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/serve-static@1.15.5:
@ -1877,7 +1869,7 @@ packages:
dependencies:
'@types/http-errors': 2.0.4
'@types/mime': 3.0.4
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/shortid@0.0.29:
@ -1907,7 +1899,7 @@ packages:
/@types/through2@2.0.41:
resolution: {integrity: sha512-ryQ0tidWkb1O1JuYvWKyMLYEtOWDqF5mHerJzKz/gQpoAaJq2l/dsMPBF0B5BNVT34rbARYJ5/tsZwLfUi2kwQ==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
/@types/trusted-types@2.0.7:
resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
@ -1937,20 +1929,20 @@ packages:
/@types/ws@7.4.7:
resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/ws@8.5.10:
resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
/@types/yauzl@2.10.3:
resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
requiresBuild: true
dependencies:
'@types/node': 20.10.7
'@types/node': 20.10.8
dev: true
optional: true
@ -2963,7 +2955,7 @@ packages:
dependencies:
'@types/cookie': 0.4.1
'@types/cors': 2.8.17
'@types/node': 20.10.7
'@types/node': 20.10.8
accepts: 1.3.8
base64id: 2.0.0
cookie: 0.4.2
@ -3920,10 +3912,6 @@ packages:
is-docker: 2.2.1
dev: true
/isarray@0.0.1:
resolution: {integrity: sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=}
dev: true
/isarray@1.0.0:
resolution: {integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=}
dev: true
@ -4022,8 +4010,8 @@ packages:
graceful-fs: 4.2.11
dev: true
/just-extend@4.2.1:
resolution: {integrity: sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==}
/just-extend@6.2.0:
resolution: {integrity: sha512-cYofQu2Xpom82S6qD778jBDpwvvy39s1l/hrYij2u9AMdQcGRpaBu6kY4mVhuno5kJVi1DAz4aiphA2WI1/OAw==}
dev: true
/keygrip@1.1.0:
@ -4535,14 +4523,14 @@ packages:
engines: {node: '>= 0.6'}
dev: true
/nise@5.1.5:
resolution: {integrity: sha512-VJuPIfUFaXNRzETTQEEItTOP8Y171ijr+JLq42wHes3DiryR8vT+1TXQW/Rx8JNUhyYYWyIvjXTU6dOhJcs9Nw==}
/nise@5.1.7:
resolution: {integrity: sha512-wWtNUhkT7k58uvWTB/Gy26eA/EJKtPZFVAhEilN5UYVmmGRYOURbejRUyKm0Uu9XVEW7K5nBOZfR8VMB4QR2RQ==}
dependencies:
'@sinonjs/commons': 2.0.0
'@sinonjs/fake-timers': 10.3.0
'@sinonjs/commons': 3.0.0
'@sinonjs/fake-timers': 11.2.2
'@sinonjs/text-encoding': 0.7.2
just-extend: 4.2.1
path-to-regexp: 1.8.0
just-extend: 6.2.0
path-to-regexp: 6.2.1
dev: true
/no-case@2.3.2:
@ -4806,15 +4794,8 @@ packages:
resolution: {integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=}
dev: true
/path-to-regexp@1.8.0:
resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==}
dependencies:
isarray: 0.0.1
dev: true
/path-to-regexp@6.2.1:
resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
dev: false
/path-type@4.0.0:
resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@ -5328,7 +5309,7 @@ packages:
'@sinonjs/fake-timers': 11.2.2
'@sinonjs/samsam': 8.0.0
diff: 5.1.0
nise: 5.1.5
nise: 5.1.7
supports-color: 7.2.0
dev: true
@ -5676,7 +5657,7 @@ packages:
hasBin: true
dev: true
/ts-node@10.9.1(@types/node@20.10.7)(typescript@5.1.6):
/ts-node@10.9.1(@types/node@20.10.8)(typescript@5.1.6):
resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
hasBin: true
peerDependencies:
@ -5695,7 +5676,7 @@ packages:
'@tsconfig/node12': 1.0.11
'@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.4
'@types/node': 20.10.7
'@types/node': 20.10.8
acorn: 8.11.2
acorn-walk: 8.3.0
arg: 4.1.3

2
ts_web/00_commitinfo_data.ts
View File

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

14
ts_web/elements/dees-button.ts
View File

@ -93,15 +93,15 @@ export class DeesButton extends DeesElement {
}
.button:hover {
background: #039be5;
background: #0050b9;
color: #ffffff;
border: 1px solid #039be5;
border-top: 1px solid #039be5;
border: 1px solid #0050b9;
border-top: 1px solid #0050b9;
}
.button:active {
background: #0277bd;
border-top: 1px solid #0277bd;
background: #0069f2;
border-top: 1px solid #0069f2;
}
.button.disabled {
@ -145,8 +145,8 @@ export class DeesButton extends DeesElement {
}
.button.pending {
border: 1px dashed ${cssManager.bdTheme('#0277bd', '#0277bd70')};
background: ${cssManager.bdTheme('#0277bd', '#0277bd70')};
border: 1px dashed ${cssManager.bdTheme('#0069f2', '#0069f270')};
background: ${cssManager.bdTheme('#0069f2', '#0069f270')};
color: #fff;
}

1
ts_web/elements/dees-form.demo.ts
View File

@ -35,6 +35,7 @@ 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-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

4
ts_web/elements/dees-input-checkbox.ts
View File

@ -103,8 +103,8 @@ export class DeesInputCheckbox extends DeesElement {
}
.checkbox.selected {
background: #039BE5;
border: 1px solid #039BE5;
background: #0050b9;
border: 1px solid #0050b9;
}
.checkbox.disabled {

48
ts_web/elements/dees-input-dropdown.ts
View File

@ -128,17 +128,22 @@ export class DeesInputDropdown extends DeesElement {
max-width: 420px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
min-height: 40px;
border-radius: 3px;
border-radius: 8px;
padding: 4px 8px;
transform: scale(0.98, 0.98);
position: absolute;
user-select: none;
}
.selectionBox.top {
transform: translate(0px, 4px);
}
.selectionBox.bottom {
transform: translate(0px, -4px);
}
.selectionBox.show {
pointer-events: all;
transform: scale(1, 1) translate(0px, 0px);
opacity: 1;
transform: scale(1, 1);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
}
@ -151,7 +156,7 @@ export class DeesInputDropdown extends DeesElement {
}
.option.highlighted {
border-left: 2px solid #0277bd;
border-left: 2px solid #0069f2;
padding-left: 6px;
background: #ffffff20;
}
@ -159,29 +164,36 @@ export class DeesInputDropdown extends DeesElement {
.option:hover {
color: #fff;
padding-left: 8px;
background: #0277bd;
background: #0069f2;
}
.search {
padding: 8px;
.search.top {
padding-top: 4px;
}
.search.bottom {
padding-bottom: 4px;
}
.search input {
display: block;
width: 80%;
background: none;
border: none;
height: 24px;
color: inherit;
text-align: center;
text-align: left;
font-size: 12px;
font-weight: 600;
background: ${cssManager.bdTheme('#00000010', '#ffffff08')};
border-radius: 16px;
width: 100%;
margin: auto;
}
.search.top input {
border-bottom: 1px dotted #333;
}
.search.bottom input {
border-top: 1px dotted #333;
}
.search input:focus {
border: none;
outline: none;
}
`,
@ -194,7 +206,7 @@ export class DeesInputDropdown extends DeesElement {
<div class="selectionBox">
${this.enableSearch && !this.opensToTop
? html`
<div class="search">
<div class="search top">
<input type="text" placeholder="Search" @input="${this.handleSearch}" />
</div>
`
@ -214,7 +226,7 @@ export class DeesInputDropdown extends DeesElement {
})}
${this.enableSearch && this.opensToTop
? html`
<div class="search">
<div class="search bottom">
<input type="text" placeholder="Search" @input="${this.handleSearch}" />
</div>
`
@ -304,25 +316,27 @@ export class DeesInputDropdown extends DeesElement {
} else {
if (!selectionBox.classList.contains('show')) {
selectionBox.style.width = selectedBox.clientWidth + 'px';
selectionBox.classList.add('show');
const spaceData = selectedBox.getBoundingClientRect();
if (300 > window.innerHeight - spaceData.bottom) {
this.opensToTop = true;
selectedBox.classList.add('accentTop');
selectionBox.classList.add('top');
selectionBox.style.bottom = selectedBox.clientHeight + 2 + 'px';
} else {
selectedBox.classList.add('accentBottom');
selectionBox.classList.add('bottom');
this.opensToTop = false;
const labelOffset = this.label ? 24 : 0;
selectionBox.style.top = selectedBox.clientHeight + labelOffset + 'px';
}
await domtoolsInstance.convenience.smartdelay.delayFor(0);
const searchInput = selectionBox.querySelector('input');
searchInput.focus();
searchInput?.focus();
selectionBox.classList.add('show');
} else {
selectedBox.style.pointerEvents = 'none';
selectionBox.classList.remove('show');
selectedBox.style.opacity = '0';
// selectedBox.style.opacity = '0';
}
}
}

8
ts_web/elements/dees-input-multitoggle.demo.ts Normal file
View File

@ -0,0 +1,8 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<dees-input-multitoggle
.options=${['option 1', 'option 2', 'option 3']}
.selectedOption=${'option 2'}
></dees-input-multitoggle>
`;

115
ts_web/elements/dees-input-multitoggle.ts Normal file
View File

@ -0,0 +1,115 @@
import {
customElement,
DeesElement,
type TemplateResult,
state,
html,
domtools,
property,
css,
cssManager,
} from '@design.estate/dees-element';
const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
@customElement('dees-input-multitoggle')
export class DeesInputMultitoggle extends DeesElement {
public static demo = demoFunc;
@property()
type: 'boolean' | 'multi' | 'single' = 'multi';
@property()
booleanTrueName: string = 'true';
@property()
booleanFalseName: string = 'false';
@property({
type: Array,
})
options: string[] = [];
@property()
selectedOption: string = '';
@property()
boolValue: boolean = false;
public static styles = [
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme('#333', '#fff')};
user-select: none;
}
.selections {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: #333;
width: min-content;
border-radius: 20px;
height: 40px;
}
.option {
position: relative;
padding: 0px 16px;
line-height: 40px;
cursor: pointer;
width: min-content; /* Make the width as per the content */
white-space: nowrap; /* Prevent text wrapping */
}
.indicator {
opacity: 0;
position: absolute;
height: 32px;
left: 4px;
top: 4px;
border-radius: 16px;
background: #0050b9;
min-width: 36px;
}
`,
];
public render(): TemplateResult {
return html`
<div class="label">MultiSelect</div>
<div class="mainbox">
<div class="selections">
<div class="indicator"></div>
${this.options.map((option) => html` <div class="option" @click=${() => this.handleSelection(option)}>${option}</div> `)}
</div>
</div>
`;
}
public async firstUpdated() {
if (this.type === 'boolean') {
this.options = [this.booleanTrueName || 'true', this.booleanFalseName];
}
this.setIndicator();
}
public async handleSelection(optionArg: string) {
this.selectedOption = optionArg;
this.setIndicator();
}
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})`);
if (indicator && option) {
indicator.style.width = `${option.clientWidth - 8}px`;
indicator.style.left = `${option.offsetLeft + 4}px`;
indicator.style.opacity = '1';
}
setTimeout(() => {
indicator.style.transition = 'all 0.1s';
}, 100);
}
}

4
ts_web/elements/dees-input-radio.ts
View File

@ -90,8 +90,8 @@ export class DeesInputRadio extends DeesElement {
}
.checkbox.selected {
background: #039BE5;
border: 1px solid #039BE5;
background: #0050b9;
border: 1px solid #0050b9;
}
.maincontainer:hover .checkbox.selected {

0
ts_web/elements/dees-input-multiselect.demo.ts → ts_web/elements/dees-input-typelist.demo.ts
View File

6
ts_web/elements/dees-input-multiselect.ts → ts_web/elements/dees-input-typelist.ts
View File

@ -10,10 +10,10 @@ import {
cssManager,
} from '@design.estate/dees-element';
const { demoFunc } = await import('./dees-input-multiselect.demo.js');
const { demoFunc } = await import('./dees-input-typelist.demo.js');
@customElement('dees-input-multiselect')
export class DeesInputMultiselect extends DeesElement {
@customElement('dees-input-typelist')
export class DeesInputTypelist extends DeesElement {
public static demo = demoFunc;
constructor() {

2
ts_web/elements/dees-simple-login.ts
View File

@ -48,7 +48,7 @@ export class DeesSimpleLogin extends DeesElement {
min-height: 100px;
background: ${cssManager.bdTheme('#eeeeeb', '#111')};
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
border-radius: 3px;
border-radius: 8px;
padding: 24px;
transition: opacity 0.3s, transform 0.3s;
}

5
ts_web/elements/dees-stepper.ts
View File

@ -99,7 +99,7 @@ export class DeesStepper extends DeesElement {
transition: all 0.7s ease-in-out;
max-width: 500px;
min-height: 300px;
border-radius: 3px;
border-radius: 8px;
background: ${cssManager.bdTheme('#ffffff', '#181818')};
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
color: ${cssManager.bdTheme('#333', '#fff')};
@ -127,6 +127,7 @@ export class DeesStepper extends DeesElement {
}
.step .stepCounter {
color: #999;
position: absolute;
top: 0px;
right: 0px;
@ -137,6 +138,8 @@ export class DeesStepper extends DeesElement {
}
.step .goBack {
color: #999;
cursor: default;
position: absolute;
top: 0px;
left: 0px;

3
ts_web/elements/index.ts
View File

@ -12,13 +12,14 @@ export * from './dees-input-checkbox.js';
export * from './dees-input-dropdown.js';
export * from './dees-input-fileupload.js';
export * from './dees-input-iban.js';
export * from './dees-input-multiselect.js';
export * from './dees-input-typelist.js';
export * from './dees-input-phone.js';
export * from './dees-input-quantityselector.js';
export * from './dees-input-radio.js';
export * from './dees-input-text.js';
export * from './dees-mobilenavigation.js';
export * from './dees-modal.js';
export * from './dees-input-multitoggle.js';
export * from './dees-pdf.js';
export * from './dees-simple-appdash.js';
export * from './dees-simple-login.js';