From 93ee42135c1293ee2e7469b31f88a48d2fdcd4e4 Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Wed, 10 Jan 2024 05:11:55 +0100 Subject: [PATCH] fix(core): update --- package.json | 4 +- pnpm-lock.yaml | 121 ++++++++---------- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/dees-button.ts | 14 +- ts_web/elements/dees-form.demo.ts | 1 + ts_web/elements/dees-input-checkbox.ts | 4 +- ts_web/elements/dees-input-dropdown.ts | 48 ++++--- .../elements/dees-input-multitoggle.demo.ts | 8 ++ ts_web/elements/dees-input-multitoggle.ts | 115 +++++++++++++++++ ts_web/elements/dees-input-radio.ts | 4 +- ...ct.demo.ts => dees-input-typelist.demo.ts} | 0 ...-multiselect.ts => dees-input-typelist.ts} | 6 +- ts_web/elements/dees-simple-login.ts | 2 +- ts_web/elements/dees-stepper.ts | 5 +- ts_web/elements/index.ts | 3 +- 15 files changed, 230 insertions(+), 107 deletions(-) create mode 100644 ts_web/elements/dees-input-multitoggle.demo.ts create mode 100644 ts_web/elements/dees-input-multitoggle.ts rename ts_web/elements/{dees-input-multiselect.demo.ts => dees-input-typelist.demo.ts} (100%) rename ts_web/elements/{dees-input-multiselect.ts => dees-input-typelist.ts} (89%) diff --git a/package.json b/package.json index 2c1c409..bdaf4dc 100644 --- a/package.json +++ b/package.json @@ -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/**/*", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2997d4a..85e0668 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 05a04d1..7a93181 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.240', + version: '1.0.241', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-button.ts b/ts_web/elements/dees-button.ts index 93c18c1..eebe202 100644 --- a/ts_web/elements/dees-button.ts +++ b/ts_web/elements/dees-button.ts @@ -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; } diff --git a/ts_web/elements/dees-form.demo.ts b/ts_web/elements/dees-form.demo.ts index 5aea2d0..a6805d9 100644 --- a/ts_web/elements/dees-form.demo.ts +++ b/ts_web/elements/dees-form.demo.ts @@ -35,6 +35,7 @@ export const demoFunc = () => html` { option: 'option 2', key: 'option2' }, { option: 'option 3', key: 'option3' }, ]}> + ${this.enableSearch && !this.opensToTop ? html` -
+
` @@ -214,7 +226,7 @@ export class DeesInputDropdown extends DeesElement { })} ${this.enableSearch && this.opensToTop ? html` -
+
` @@ -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'; } } } diff --git a/ts_web/elements/dees-input-multitoggle.demo.ts b/ts_web/elements/dees-input-multitoggle.demo.ts new file mode 100644 index 0000000..8382887 --- /dev/null +++ b/ts_web/elements/dees-input-multitoggle.demo.ts @@ -0,0 +1,8 @@ +import { html } from '@design.estate/dees-element'; + +export const demoFunc = () => html` + +`; \ No newline at end of file diff --git a/ts_web/elements/dees-input-multitoggle.ts b/ts_web/elements/dees-input-multitoggle.ts new file mode 100644 index 0000000..db9c92a --- /dev/null +++ b/ts_web/elements/dees-input-multitoggle.ts @@ -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` +
MultiSelect
+
+
+
+ ${this.options.map((option) => html`
this.handleSelection(option)}>${option}
`)} +
+
+ `; + } + + 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); + } +} diff --git a/ts_web/elements/dees-input-radio.ts b/ts_web/elements/dees-input-radio.ts index c52b7fc..a7f8b74 100644 --- a/ts_web/elements/dees-input-radio.ts +++ b/ts_web/elements/dees-input-radio.ts @@ -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 { diff --git a/ts_web/elements/dees-input-multiselect.demo.ts b/ts_web/elements/dees-input-typelist.demo.ts similarity index 100% rename from ts_web/elements/dees-input-multiselect.demo.ts rename to ts_web/elements/dees-input-typelist.demo.ts diff --git a/ts_web/elements/dees-input-multiselect.ts b/ts_web/elements/dees-input-typelist.ts similarity index 89% rename from ts_web/elements/dees-input-multiselect.ts rename to ts_web/elements/dees-input-typelist.ts index b8a2678..b551eb3 100644 --- a/ts_web/elements/dees-input-multiselect.ts +++ b/ts_web/elements/dees-input-typelist.ts @@ -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() { diff --git a/ts_web/elements/dees-simple-login.ts b/ts_web/elements/dees-simple-login.ts index 02ce5aa..b5f629a 100644 --- a/ts_web/elements/dees-simple-login.ts +++ b/ts_web/elements/dees-simple-login.ts @@ -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; } diff --git a/ts_web/elements/dees-stepper.ts b/ts_web/elements/dees-stepper.ts index c4c7c17..3d27076 100644 --- a/ts_web/elements/dees-stepper.ts +++ b/ts_web/elements/dees-stepper.ts @@ -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; diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts index 4989755..af1ad0f 100644 --- a/ts_web/elements/index.ts +++ b/ts_web/elements/index.ts @@ -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';