From 9ab16c85bae0dd1f3c2e1be6f88912f4338a3230 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Mon, 14 Jul 2025 14:54:54 +0000 Subject: [PATCH] update --- demo.html | 56 ++ package.json | 2 +- pnpm-lock.yaml | 824 +----------------- test/test.browser.ts | 48 +- ts_web/elements/00colors.ts | 11 + ts_web/elements/index.ts | 14 +- ts_web/elements/sio-button.ts | 259 ++++++ ts_web/elements/sio-combox.ts | 375 ++++---- ts_web/elements/sio-conversation-selector.ts | 267 ++++++ ts_web/elements/sio-conversation-view.ts | 413 +++++++++ ts_web/elements/sio-fab.ts | 91 +- ts_web/elements/sio-icon.ts | 163 ++++ .../elements/sio-subwidget-conversations.ts | 156 ---- ts_web/elements/sio-subwidget-onboardme.ts | 64 -- ts_web/pages/mainpage.ts | 44 +- 15 files changed, 1546 insertions(+), 1241 deletions(-) create mode 100644 demo.html create mode 100644 ts_web/elements/sio-button.ts create mode 100644 ts_web/elements/sio-conversation-selector.ts create mode 100644 ts_web/elements/sio-conversation-view.ts create mode 100644 ts_web/elements/sio-icon.ts delete mode 100644 ts_web/elements/sio-subwidget-conversations.ts delete mode 100644 ts_web/elements/sio-subwidget-onboardme.ts diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..f72b41c --- /dev/null +++ b/demo.html @@ -0,0 +1,56 @@ + + + + + + Social.io Catalog Demo + + + + +
+

Combox Component

+
+ +
+
+ +
+

FAB with Combox

+
+ +
+
+ + \ No newline at end of file diff --git a/package.json b/package.json index fd71e51..0f533dd 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,12 @@ "author": "Lossless GmbH", "license": "UNLICENSED", "dependencies": { - "@design.estate/dees-catalog": "^1.10.10", "@design.estate/dees-domtools": "^2.3.3", "@design.estate/dees-element": "^2.1.2", "@design.estate/dees-wcctools": "^1.1.1", "@losslessone_private/loint-pubapi": "^1.0.14", "@social.io/interfaces": "^1.2.1", + "lucide": "^0.525.0", "rrweb": "2.0.0-alpha.4", "rrweb-player": "1.0.0-alpha.4", "rrweb-snapshot": "2.0.0-alpha.4" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0bd4816..454ae56 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,6 @@ importers: .: dependencies: - '@design.estate/dees-catalog': - specifier: ^1.10.10 - version: 1.10.10(@tiptap/pm@2.26.1) '@design.estate/dees-domtools': specifier: ^2.3.3 version: 2.3.3 @@ -26,6 +23,9 @@ importers: '@social.io/interfaces': specifier: ^1.2.1 version: 1.2.1 + lucide: + specifier: ^0.525.0 + version: 0.525.0 rrweb: specifier: 2.0.0-alpha.4 version: 2.0.0-alpha.4 @@ -272,9 +272,6 @@ packages: '@dabh/diagnostics@2.0.3': resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==} - '@design.estate/dees-catalog@1.10.10': - resolution: {integrity: sha512-z9svCMZGes2WAM13jpbEXB6fG5/qVC2H5w0M9HWURLAO/fgicJodnP9XdvEl5H5yts2EnlNlmsgZi6MCHHgZSA==} - '@design.estate/dees-comms@1.0.27': resolution: {integrity: sha512-GvzTUwkV442LD60T08iqSoqvhA02Mou5lFvvqBPc4yBUiU7cZISqBx+76xvMgMIEI9Dx9JfTl4/2nW8MoVAanw==} @@ -605,26 +602,6 @@ packages: '@esm-bundle/chai@4.3.4-fix.0': resolution: {integrity: sha512-26SKdM4uvDWlY8/OOOxSB1AqQWeBosCX3wRYUZO7enTAj03CtVxIiCimYVG2WpULcyV51qapK4qTovwkUr5Mlw==} - '@fortawesome/fontawesome-common-types@6.7.2': - resolution: {integrity: sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==} - engines: {node: '>=6'} - - '@fortawesome/fontawesome-svg-core@6.7.2': - resolution: {integrity: sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==} - engines: {node: '>=6'} - - '@fortawesome/free-brands-svg-icons@6.7.2': - resolution: {integrity: sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==} - engines: {node: '>=6'} - - '@fortawesome/free-regular-svg-icons@6.7.2': - resolution: {integrity: sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==} - engines: {node: '>=6'} - - '@fortawesome/free-solid-svg-icons@6.7.2': - resolution: {integrity: sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==} - engines: {node: '>=6'} - '@git.zone/tsbuild@2.6.4': resolution: {integrity: sha512-eeNW5hnXHU9lPzTaMbtdYDkb6cpFFC8fF5849BiwLO4N1Ga9Q5Om/6w5SZyJQcct8rHjcTgOOWdlxhjeKCr6NQ==} hasBin: true @@ -720,70 +697,6 @@ packages: '@mongodb-js/saslprep@1.3.0': resolution: {integrity: sha512-zlayKCsIjYb7/IdfqxorK5+xUMyi4vOKcFy10wKJYc63NSdKI8mNME+uJqfatkPmOSMMUiojrL58IePKBm3gvQ==} - '@napi-rs/canvas-android-arm64@0.1.73': - resolution: {integrity: sha512-s8dMhfYIHVv7gz8BXg3Nb6cFi950Y0xH5R/sotNZzUVvU9EVqHfkqiGJ4UIqu+15UhqguT6mI3Bv1mhpRkmMQw==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [android] - - '@napi-rs/canvas-darwin-arm64@0.1.73': - resolution: {integrity: sha512-bLPCq8Yyq1vMdVdIpQAqmgf6VGUknk8e7NdSZXJJFOA9gxkJ1RGcHOwoXo7h0gzhHxSorg71hIxyxtwXpq10Rw==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [darwin] - - '@napi-rs/canvas-darwin-x64@0.1.73': - resolution: {integrity: sha512-GR1CcehDjdNYXN3bj8PIXcXfYLUUOQANjQpM+KNnmpRo7ojsuqPjT7ZVH+6zoG/aqRJWhiSo+ChQMRazZlRU9g==} - engines: {node: '>= 10'} - cpu: [x64] - os: [darwin] - - '@napi-rs/canvas-linux-arm-gnueabihf@0.1.73': - resolution: {integrity: sha512-cM7F0kBJVFio0+U2iKSW4fWSfYQ8CPg4/DRZodSum/GcIyfB8+UPJSRM1BvvlcWinKLfX1zUYOwonZX9IFRRcw==} - engines: {node: '>= 10'} - cpu: [arm] - os: [linux] - - '@napi-rs/canvas-linux-arm64-gnu@0.1.73': - resolution: {integrity: sha512-PMWNrMON9uz9klz1B8ZY/RXepQSC5dxxHQTowfw93Tb3fLtWO5oNX2k9utw7OM4ypT9BUZUWJnDQ5bfuXc/EUQ==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - - '@napi-rs/canvas-linux-arm64-musl@0.1.73': - resolution: {integrity: sha512-lX0z2bNmnk1PGZ+0a9OZwI2lPPvWjRYzPqvEitXX7lspyLFrOzh2kcQiLL7bhyODN23QvfriqwYqp5GreSzVvA==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - - '@napi-rs/canvas-linux-riscv64-gnu@0.1.73': - resolution: {integrity: sha512-QDQgMElwxAoADsSR3UYvdTTQk5XOyD9J5kq15Z8XpGwpZOZsSE0zZ/X1JaOtS2x+HEZL6z1S6MF/1uhZFZb5ig==} - engines: {node: '>= 10'} - cpu: [riscv64] - os: [linux] - - '@napi-rs/canvas-linux-x64-gnu@0.1.73': - resolution: {integrity: sha512-wbzLJrTalQrpyrU1YRrO6w6pdr5vcebbJa+Aut5QfTaW9eEmMb1WFG6l1V+cCa5LdHmRr8bsvl0nJDU/IYDsmw==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - - '@napi-rs/canvas-linux-x64-musl@0.1.73': - resolution: {integrity: sha512-xbfhYrUufoTAKvsEx2ZUN4jvACabIF0h1F5Ik1Rk4e/kQq6c+Dwa5QF0bGrfLhceLpzHT0pCMGMDeQKQrcUIyA==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - - '@napi-rs/canvas-win32-x64-msvc@0.1.73': - resolution: {integrity: sha512-YQmHXBufFBdWqhx+ympeTPkMfs3RNxaOgWm59vyjpsub7Us07BwCcmu1N5kildhO8Fm0syoI2kHnzGkJBLSvsg==} - engines: {node: '>= 10'} - cpu: [x64] - os: [win32] - - '@napi-rs/canvas@0.1.73': - resolution: {integrity: sha512-9iwPZrNlCK4rG+vWyDvyvGeYjck9MoP0NVQP6N60gqJNFA1GsN0imG05pzNsqfCvFxUxgiTYlR8ff0HC1HXJiw==} - engines: {node: '>= 10'} - '@napi-rs/wasm-runtime@0.2.12': resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==} @@ -960,9 +873,6 @@ packages: '@push.rocks/smarthash@3.2.0': resolution: {integrity: sha512-+dgvrtj9hwE/Xxqy9NLEDw8kmbn4TybFhwHsU6C0baVt7oTy97fj39PO0ooyNCKVfNrfLGhq5iSUTAJiGWnMlQ==} - '@push.rocks/smarti18n@1.0.4': - resolution: {integrity: sha512-bHIi9Iuzp2cbux9q79ZK5jOQYPsYJ9zDDS4p/xEPQH31gr0mcFRosLSQb1kvDQDVmUhI0ADlQMqr2ui9zEXQHA==} - '@push.rocks/smartjson@5.0.20': resolution: {integrity: sha512-ogGBLyOTluphZVwBYNyjhm5sziPGuiAwWihW07OSRxD4HQUyqj9Ek6r1pqH07JUG5EbtRYivM1Yt1cCwnu3JVQ==} @@ -1210,9 +1120,6 @@ packages: resolution: {integrity: sha512-6KGnf2vHR7hW4mQpAD7gkDVL3QVML3jb/No/Uw+qCqvs0TaQr60Yjm+CXoLxJNCKwmrL+I1yx8mhAHBHfYJiJA==} deprecated: This package has been deprecated in favour of the new package at @push.rocks/smarturl - '@remirror/core-constants@3.0.0': - resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==} - '@rolldown/binding-android-arm64@1.0.0-beta.27': resolution: {integrity: sha512-IJL3efUJmvb5MfTEi7bGK4jq3ZFAzVbSy+vmul0DcdrglUd81Tfyy7Zzq2oM0tUgmACG32d8Jz/ykbpbf+3C5A==} cpu: [arm64] @@ -1582,31 +1489,6 @@ packages: '@socket.io/component-emitter@3.1.2': resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==} - '@svgdotjs/svg.draggable.js@3.0.6': - resolution: {integrity: sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==} - peerDependencies: - '@svgdotjs/svg.js': ^3.2.4 - - '@svgdotjs/svg.filter.js@3.0.9': - resolution: {integrity: sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==} - engines: {node: '>= 0.8.0'} - - '@svgdotjs/svg.js@3.2.4': - resolution: {integrity: sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==} - - '@svgdotjs/svg.resize.js@2.0.5': - resolution: {integrity: sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==} - engines: {node: '>= 14.18'} - peerDependencies: - '@svgdotjs/svg.js': ^3.2.4 - '@svgdotjs/svg.select.js': ^4.0.1 - - '@svgdotjs/svg.select.js@4.0.3': - resolution: {integrity: sha512-qkMgso1sd2hXKd1FZ1weO7ANq12sNmQJeGDjs46QwDVsxSRcHmvWKL2NDF7Yimpwf3sl5esOLkPqtV2bQ3v/Jg==} - engines: {node: '>= 14.18'} - peerDependencies: - '@svgdotjs/svg.js': ^3.2.4 - '@szmarczak/http-timer@5.0.1': resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==} engines: {node: '>=14.16'} @@ -1614,138 +1496,6 @@ packages: '@tempfix/idb@8.0.3': resolution: {integrity: sha512-hPJQKO7+oAIY+pDNImrZ9QAINbz9KmwT+yO4iRVwdPanok2YKpaUxdJzIvCUwY0YgAawlvYdffbLvRLV5hbs2g==} - '@tiptap/core@2.26.1': - resolution: {integrity: sha512-fymyd/XZvYiHjBoLt1gxs024xP/LY26d43R1vluYq7AHBL/7DE3ywzy+1GEsGyAv5Je2L0KBhNIR/izbq3Kaqg==} - peerDependencies: - '@tiptap/pm': ^2.7.0 - - '@tiptap/extension-blockquote@2.26.1': - resolution: {integrity: sha512-viQ6AHRhjCYYipKK6ZepBzwZpkuMvO9yhRHeUZDvlSOAh8rvsUTSre0y74nu8QRYUt4a44lJJ6BpphJK7bEgYA==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-bold@2.26.1': - resolution: {integrity: sha512-zCce9PRuTNhadFir71luLo99HERDpGJ0EEflGm7RN8I1SnNi9gD5ooK42BOIQtejGCJqg3hTPZiYDJC2hXvckQ==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-bullet-list@2.26.1': - resolution: {integrity: sha512-HHakuV4ckYCDOnBbne088FvCEP4YICw+wgPBz/V2dfpiFYQ4WzT0LPK9s7OFMCN+ROraoug+1ryN1Z1KdIgujQ==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-code-block@2.26.1': - resolution: {integrity: sha512-/TDDOwONl0qEUc4+B6V9NnWtSjz95eg7/8uCb8Y8iRbGvI9vT4/znRKofFxstvKmW4URu/H74/g0ywV57h0B+A==} - peerDependencies: - '@tiptap/core': ^2.7.0 - '@tiptap/pm': ^2.7.0 - - '@tiptap/extension-code@2.26.1': - resolution: {integrity: sha512-GU9deB1A/Tr4FMPu71CvlcjGKwRhGYz60wQ8m4aM+ELZcVIcZRa1ebR8bExRIEWnvRztQuyRiCQzw2N0xQJ1QQ==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-document@2.26.1': - resolution: {integrity: sha512-2P2IZp1NRAE+21mRuFBiP3X2WKfZ6kUC23NJKpn8bcOamY3obYqCt0ltGPhE4eR8n8QAl2fI/3jIgjR07dC8ow==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-dropcursor@2.26.1': - resolution: {integrity: sha512-JkDQU2ZYFOuT5mNYb8OiWGwD1HcjbtmX8tLNugQbToECmz9WvVPqJmn7V/q8VGpP81iEECz/IsyRmuf2kSD4uA==} - peerDependencies: - '@tiptap/core': ^2.7.0 - '@tiptap/pm': ^2.7.0 - - '@tiptap/extension-gapcursor@2.26.1': - resolution: {integrity: sha512-KOiMZc3PwJS3hR0nSq5d0TJi2jkNZkLZElcT6pCEnhRHzPH6dRMu9GM5Jj798ZRUy0T9UFcKJalFZaDxnmRnpg==} - peerDependencies: - '@tiptap/core': ^2.7.0 - '@tiptap/pm': ^2.7.0 - - '@tiptap/extension-hard-break@2.26.1': - resolution: {integrity: sha512-d6uStdNKi8kjPlHAyO59M6KGWATNwhLCD7dng0NXfwGndc22fthzIk/6j9F6ltQx30huy5qQram6j3JXwNACoA==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-heading@2.26.1': - resolution: {integrity: sha512-KSzL8WZV3pjJG9ke4RaU70+B5UlYR2S6olNt5UCAawM+fi11mobVztiBoC19xtpSVqIXC1AmXOqUgnuSvmE4ZA==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-history@2.26.1': - resolution: {integrity: sha512-m6YR1gkkauIDo3PRl0gP+7Oc4n5OqDzcjVh6LvWREmZP8nmi94hfseYbqOXUb6RPHIc0JKF02eiRifT4MSd2nw==} - peerDependencies: - '@tiptap/core': ^2.7.0 - '@tiptap/pm': ^2.7.0 - - '@tiptap/extension-horizontal-rule@2.26.1': - resolution: {integrity: sha512-mT6baqOhs/NakgrAeDeed194E/ZJFGL692H0C7f1N7WDRaWxUu2oR0LrnRqSH5OyPjELkzu6nQnNy0+0tFGHHg==} - peerDependencies: - '@tiptap/core': ^2.7.0 - '@tiptap/pm': ^2.7.0 - - '@tiptap/extension-italic@2.26.1': - resolution: {integrity: sha512-pOs6oU4LyGO89IrYE4jbE8ZYsPwMMIiKkYfXcfeD9NtpGNBnjeVXXF5I9ndY2ANrCAgC8k58C3/powDRf0T2yA==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-link@2.26.1': - resolution: {integrity: sha512-7yfum5Jymkue/uOSTQPt2SmkZIdZx7t3QhZLqBU7R9ettkdSCBgEGok6N+scJM1R1Zes+maSckLm0JZw5BKYNA==} - peerDependencies: - '@tiptap/core': ^2.7.0 - '@tiptap/pm': ^2.7.0 - - '@tiptap/extension-list-item@2.26.1': - resolution: {integrity: sha512-quOXckC73Luc3x+Dcm88YAEBW+Crh3x5uvtQOQtn2GEG91AshrvbnhGRiYnfvEN7UhWIS+FYI5liHFcRKSUKrQ==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-ordered-list@2.26.1': - resolution: {integrity: sha512-UHKNRxq6TBnXMGFSq91knD6QaHsyyOwLOsXMzupmKM5Su0s+CRXEjfav3qKlbb9e4m7D7S/a0aPm8nC9KIXNhQ==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-paragraph@2.26.1': - resolution: {integrity: sha512-UezvM9VDRAVJlX1tykgHWSD1g3MKfVMWWZ+Tg+PE4+kizOwoYkRWznVPgCAxjmyHajxpCKRXgqTZkOxjJ9Kjzg==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-strike@2.26.1': - resolution: {integrity: sha512-CkoRH+pAi6MgdCh7K0cVZl4N2uR4pZdabXAnFSoLZRSg6imLvEUmWHfSi1dl3Z7JOvd3a4yZ4NxerQn5MWbJ7g==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-text-align@2.26.1': - resolution: {integrity: sha512-x6mpNGELy2QtSPBoQqNgiXO9PjZoB+O2EAfXA9YRiBDSIRNOrw+7vOVpi+IgzswFmhMNgIYUVfQRud4FHUCNew==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-text-style@2.26.1': - resolution: {integrity: sha512-t9Nc/UkrbCfnSHEUi1gvUQ2ZPzvfdYFT5TExoV2DTiUCkhG6+mecT5bTVFGW3QkPmbToL+nFhGn4ZRMDD0SP3Q==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-text@2.26.1': - resolution: {integrity: sha512-p2n8WVMd/2vckdJlol24acaTDIZAhI7qle5cM75bn01sOEZoFlSw6SwINOULrUCzNJsYb43qrLEibZb4j2LeQw==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-typography@2.26.1': - resolution: {integrity: sha512-1zwKWfy7Tjutert1Vn/unN+98E0JFr5C2jx1xuesAEf4X405cQMb/zNMI44ON3xBG+aXZoTRlJuXNoYodeVSAg==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/extension-underline@2.26.1': - resolution: {integrity: sha512-/fufv41WDMdf0a4xmFAxONoAz08TonJXX6NEoSJmuGKO59M/Y0Pz8DTK1g32Wk44kn7dyScDiPlvvndl+UOv0A==} - peerDependencies: - '@tiptap/core': ^2.7.0 - - '@tiptap/pm@2.26.1': - resolution: {integrity: sha512-8aF+mY/vSHbGFqyG663ds84b+vca5Lge3tHdTMTKazxCnhXR9dn2oQJMnZ78YZvdRbkPkMJJHti9h3K7u2UQvw==} - - '@tiptap/starter-kit@2.26.1': - resolution: {integrity: sha512-oziMGCds8SVQ3s5dRpBxVdEKZAmO/O//BjZ69mhA3q4vJdR0rnfLb5fTxSeQvHiqB878HBNn76kNaJrHrV35GA==} - '@tokenizer/token@0.3.0': resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==} @@ -1897,18 +1647,9 @@ packages: '@types/koa@2.15.0': resolution: {integrity: sha512-7QFsywoE5URbuVnG3loe03QXuGajrnotr3gQkXcEBShORai23MePfFYdhz90FEtBBpkyIYQbVD+evKtloCgX3g==} - '@types/linkify-it@5.0.0': - resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==} - - '@types/markdown-it@14.1.2': - resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==} - '@types/mdast@4.0.4': resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} - '@types/mdurl@2.0.0': - resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==} - '@types/mime-types@2.1.4': resolution: {integrity: sha512-lfU4b34HOri+kAY5UheuFMWPDOI+OPceBSHZKp69gEyTL/mmJ4cnU6Y/rlme3UL3GyOn6Y42hyIEw0/q8sWx5w==} @@ -2053,15 +1794,9 @@ packages: resolution: {integrity: sha512-84E1025aUSjvZU1j17eCTwV7m5Zg3cZHErV3+CaJM9JPCesZwLraIa0ONIQ9w4KLgcDgJFw9UnJ0LbFf42h6tg==} engines: {node: '>=18.0.0'} - '@webcontainer/api@1.2.0': - resolution: {integrity: sha512-tzoKBd4lLdhHy5GHFpUkl+ndoSba8JqmB7x0ZQFnWfjbcbQOvKQfxA8MEMUYhgqjWHnbrWdAfnBEHz5f5lYG5A==} - '@xstate/fsm@1.6.5': resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==} - '@yr/monotone-cubic-spline@1.0.3': - resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==} - accepts@1.3.8: resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==} engines: {node: '>= 0.6'} @@ -2114,9 +1849,6 @@ packages: resolution: {integrity: sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w==} engines: {node: '>=14'} - apexcharts@4.7.0: - resolution: {integrity: sha512-iZSrrBGvVlL+nt2B1NpqfDuBZ9jX61X9I2+XV0hlYXHtTwhwLTHDKGXjNXAgFBDLuvSYCB/rq2nPWVPRv2DrGA==} - argparse@1.0.10: resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} @@ -2453,9 +2185,6 @@ packages: typescript: optional: true - crelt@1.0.6: - resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==} - croner@4.4.1: resolution: {integrity: sha512-aqVeeIPCf5/NZFlz4mN4MLEOs9xf4ODCmHQDs+577JFj8mK3RkKJz77h7+Rn94AijUqKdFNOUHM+v88d8p02UQ==} @@ -3043,10 +2772,6 @@ packages: resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} hasBin: true - highlight.js@11.11.1: - resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==} - engines: {node: '>=12.0.0'} - html-escaper@2.0.2: resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} @@ -3099,9 +2824,6 @@ packages: humanize-number@0.0.2: resolution: {integrity: sha1-EcCvakcWQ2M1iFiASPF5lUFInBg=} - ibantools@4.5.1: - resolution: {integrity: sha512-DfKQpLlFq9yEUIEnFuCJzss3XavD7iHZTU5PyqXiAJ+rmaMp+NFP3hboumHKuK8nZjuOJg93WemTzcQ5b9jOZA==} - iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -3389,12 +3111,6 @@ packages: lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - linkify-it@5.0.0: - resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==} - - linkifyjs@4.3.1: - resolution: {integrity: sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg==} - lit-element@4.2.1: resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==} @@ -3497,10 +3213,6 @@ packages: make-error@1.3.6: resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==} - markdown-it@14.1.0: - resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==} - hasBin: true - markdown-table@3.0.4: resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} @@ -3558,9 +3270,6 @@ packages: mdast-util-to-string@4.0.0: resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==} - mdurl@2.0.0: - resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==} - media-typer@0.3.0: resolution: {integrity: sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=} engines: {node: '>= 0.6'} @@ -3749,9 +3458,6 @@ packages: engines: {node: '>=10'} hasBin: true - monaco-editor@0.52.2: - resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==} - mongodb-connection-string-url@2.6.0: resolution: {integrity: sha512-WvTZlI9ab0QYtTYnuMLgobULWhokRjtC7db9LtcVfJ+Hsnyr5eo6ZtNAt3Ly24XZScGMelOcGtm7lSn0332tPQ==} @@ -3887,9 +3593,6 @@ packages: resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==} engines: {node: '>=12'} - orderedmap@2.1.1: - resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==} - p-cancelable@3.0.0: resolution: {integrity: sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==} engines: {node: '>=12.20'} @@ -4020,10 +3723,6 @@ packages: bundledDependencies: - '@xmldom/xmldom' - pdfjs-dist@4.10.38: - resolution: {integrity: sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ==} - engines: {node: '>=20'} - peek-readable@5.4.2: resolution: {integrity: sha512-peBp3qZyuS6cNIJ2akRNG1uo1WJ1d0wTxg/fxMdZ0BqCVhx242bSFHM9eNqflfJVS9SsgkzgT/1UgnsurBOTMg==} engines: {node: '>=14.16'} @@ -4079,64 +3778,6 @@ packages: property-information@7.1.0: resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==} - prosemirror-changeset@2.3.1: - resolution: {integrity: sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==} - - prosemirror-collab@1.3.1: - resolution: {integrity: sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==} - - prosemirror-commands@1.7.1: - resolution: {integrity: sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==} - - prosemirror-dropcursor@1.8.2: - resolution: {integrity: sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==} - - prosemirror-gapcursor@1.3.2: - resolution: {integrity: sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==} - - prosemirror-history@1.4.1: - resolution: {integrity: sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==} - - prosemirror-inputrules@1.5.0: - resolution: {integrity: sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA==} - - prosemirror-keymap@1.2.3: - resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==} - - prosemirror-markdown@1.13.2: - resolution: {integrity: sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g==} - - prosemirror-menu@1.2.5: - resolution: {integrity: sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==} - - prosemirror-model@1.25.2: - resolution: {integrity: sha512-BVypCAJ4SL6jOiTsDffP3Wp6wD69lRhI4zg/iT8JXjp3ccZFiq5WyguxvMKmdKFC3prhaig7wSr8dneDToHE1Q==} - - prosemirror-schema-basic@1.2.4: - resolution: {integrity: sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==} - - prosemirror-schema-list@1.5.1: - resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==} - - prosemirror-state@1.4.3: - resolution: {integrity: sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==} - - prosemirror-tables@1.7.1: - resolution: {integrity: sha512-eRQ97Bf+i9Eby99QbyAiyov43iOKgWa7QCGly+lrDt7efZ1v8NWolhXiB43hSDGIXT1UXgbs4KJN3a06FGpr1Q==} - - prosemirror-trailing-node@3.0.0: - resolution: {integrity: sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==} - peerDependencies: - prosemirror-model: ^1.22.1 - prosemirror-state: ^1.4.2 - prosemirror-view: ^1.33.8 - - prosemirror-transform@1.10.4: - resolution: {integrity: sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw==} - - prosemirror-view@1.40.0: - resolution: {integrity: sha512-2G3svX0Cr1sJjkD/DYWSe3cfV5VPVTBOxI9XQEGWJDFEpsZb/gh4MV29ctv+OJx2RFX4BLt09i+6zaGM/ldkCw==} - proto-list@1.2.4: resolution: {integrity: sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=} @@ -4164,10 +3805,6 @@ packages: pumpify@1.5.1: resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==} - punycode.js@2.3.1: - resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==} - engines: {node: '>=6'} - punycode@1.4.1: resolution: {integrity: sha1-wNWmOycYgArY4esPpSachN1BhF4=} @@ -4301,9 +3938,6 @@ packages: resolution: {integrity: sha512-aYiJmzKoUHoaaEZLRegYVfZkXW7gzdgSbq+u5cXQ6iXc/y8tnQ3zGffQo44Pr1lTKeLluw3bDIDUCx/NAzqKeA==} hasBin: true - rope-sequence@1.3.4: - resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==} - rrdom@0.1.7: resolution: {integrity: sha512-ZLd8f14z9pUy2Hk9y636cNv5Y2BMnNEY99wxzW9tD2BLDfe1xFxtLjB4q/xCBYo6HRe0wofzKzjm4JojmpBfFw==} @@ -4677,9 +4311,6 @@ packages: engines: {node: '>=14.17'} hasBin: true - uc.micro@2.1.0: - resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==} - uglify-js@3.19.3: resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==} engines: {node: '>=0.8.0'} @@ -4753,9 +4384,6 @@ packages: vfile@6.0.3: resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} - w3c-keyname@2.2.8: - resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==} - webidl-conversions@7.0.0: resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} engines: {node: '>=12'} @@ -4865,14 +4493,6 @@ packages: resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==} engines: {node: '>=0.4'} - xterm-addon-fit@0.8.0: - resolution: {integrity: sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==} - peerDependencies: - xterm: ^5.0.0 - - xterm@5.3.0: - resolution: {integrity: sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==} - y18n@5.0.8: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} engines: {node: '>=10'} @@ -5563,41 +5183,6 @@ snapshots: enabled: 2.0.0 kuler: 2.0.0 - '@design.estate/dees-catalog@1.10.10(@tiptap/pm@2.26.1)': - dependencies: - '@design.estate/dees-domtools': 2.3.3 - '@design.estate/dees-element': 2.1.2 - '@design.estate/dees-wcctools': 1.1.1 - '@fortawesome/fontawesome-svg-core': 6.7.2 - '@fortawesome/free-brands-svg-icons': 6.7.2 - '@fortawesome/free-regular-svg-icons': 6.7.2 - '@fortawesome/free-solid-svg-icons': 6.7.2 - '@push.rocks/smarti18n': 1.0.4 - '@push.rocks/smartpromise': 4.2.3 - '@push.rocks/smartstring': 4.0.15 - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - '@tiptap/extension-link': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1) - '@tiptap/extension-text-align': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-typography': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-underline': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/starter-kit': 2.26.1 - '@tsclass/tsclass': 9.2.0 - '@webcontainer/api': 1.2.0 - apexcharts: 4.7.0 - highlight.js: 11.11.1 - ibantools: 4.5.1 - lucide: 0.525.0 - monaco-editor: 0.52.2 - pdfjs-dist: 4.10.38 - xterm: 5.3.0 - xterm-addon-fit: 0.8.0(xterm@5.3.0) - transitivePeerDependencies: - - '@nuxt/kit' - - '@tiptap/pm' - - react - - supports-color - - vue - '@design.estate/dees-comms@1.0.27': dependencies: '@api.global/typedrequest': 3.1.10 @@ -5828,24 +5413,6 @@ snapshots: dependencies: '@types/chai': 4.3.20 - '@fortawesome/fontawesome-common-types@6.7.2': {} - - '@fortawesome/fontawesome-svg-core@6.7.2': - dependencies: - '@fortawesome/fontawesome-common-types': 6.7.2 - - '@fortawesome/free-brands-svg-icons@6.7.2': - dependencies: - '@fortawesome/fontawesome-common-types': 6.7.2 - - '@fortawesome/free-regular-svg-icons@6.7.2': - dependencies: - '@fortawesome/fontawesome-common-types': 6.7.2 - - '@fortawesome/free-solid-svg-icons@6.7.2': - dependencies: - '@fortawesome/fontawesome-common-types': 6.7.2 - '@git.zone/tsbuild@2.6.4': dependencies: '@git.zone/tspublish': 1.9.1 @@ -6059,50 +5626,6 @@ snapshots: dependencies: sparse-bitfield: 3.0.3 - '@napi-rs/canvas-android-arm64@0.1.73': - optional: true - - '@napi-rs/canvas-darwin-arm64@0.1.73': - optional: true - - '@napi-rs/canvas-darwin-x64@0.1.73': - optional: true - - '@napi-rs/canvas-linux-arm-gnueabihf@0.1.73': - optional: true - - '@napi-rs/canvas-linux-arm64-gnu@0.1.73': - optional: true - - '@napi-rs/canvas-linux-arm64-musl@0.1.73': - optional: true - - '@napi-rs/canvas-linux-riscv64-gnu@0.1.73': - optional: true - - '@napi-rs/canvas-linux-x64-gnu@0.1.73': - optional: true - - '@napi-rs/canvas-linux-x64-musl@0.1.73': - optional: true - - '@napi-rs/canvas-win32-x64-msvc@0.1.73': - optional: true - - '@napi-rs/canvas@0.1.73': - optionalDependencies: - '@napi-rs/canvas-android-arm64': 0.1.73 - '@napi-rs/canvas-darwin-arm64': 0.1.73 - '@napi-rs/canvas-darwin-x64': 0.1.73 - '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.73 - '@napi-rs/canvas-linux-arm64-gnu': 0.1.73 - '@napi-rs/canvas-linux-arm64-musl': 0.1.73 - '@napi-rs/canvas-linux-riscv64-gnu': 0.1.73 - '@napi-rs/canvas-linux-x64-gnu': 0.1.73 - '@napi-rs/canvas-linux-x64-musl': 0.1.73 - '@napi-rs/canvas-win32-x64-msvc': 0.1.73 - optional: true - '@napi-rs/wasm-runtime@0.2.12': dependencies: '@emnapi/core': 1.4.4 @@ -6514,8 +6037,6 @@ snapshots: '@types/through2': 2.0.41 through2: 4.0.2 - '@push.rocks/smarti18n@1.0.4': {} - '@push.rocks/smartjson@5.0.20': dependencies: '@push.rocks/smartenv': 5.0.12 @@ -7082,8 +6603,6 @@ snapshots: '@pushrocks/smarturl@2.0.1': {} - '@remirror/core-constants@3.0.0': {} - '@rolldown/binding-android-arm64@1.0.0-beta.27': optional: true @@ -7530,179 +7049,12 @@ snapshots: '@socket.io/component-emitter@3.1.2': {} - '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.4)': - dependencies: - '@svgdotjs/svg.js': 3.2.4 - - '@svgdotjs/svg.filter.js@3.0.9': - dependencies: - '@svgdotjs/svg.js': 3.2.4 - - '@svgdotjs/svg.js@3.2.4': {} - - '@svgdotjs/svg.resize.js@2.0.5(@svgdotjs/svg.js@3.2.4)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.4))': - dependencies: - '@svgdotjs/svg.js': 3.2.4 - '@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.4) - - '@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.4)': - dependencies: - '@svgdotjs/svg.js': 3.2.4 - '@szmarczak/http-timer@5.0.1': dependencies: defer-to-connect: 2.0.1 '@tempfix/idb@8.0.3': {} - '@tiptap/core@2.26.1(@tiptap/pm@2.26.1)': - dependencies: - '@tiptap/pm': 2.26.1 - - '@tiptap/extension-blockquote@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-bold@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-bullet-list@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-code-block@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - '@tiptap/pm': 2.26.1 - - '@tiptap/extension-code@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-document@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-dropcursor@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - '@tiptap/pm': 2.26.1 - - '@tiptap/extension-gapcursor@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - '@tiptap/pm': 2.26.1 - - '@tiptap/extension-hard-break@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-heading@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-history@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - '@tiptap/pm': 2.26.1 - - '@tiptap/extension-horizontal-rule@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - '@tiptap/pm': 2.26.1 - - '@tiptap/extension-italic@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-link@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - '@tiptap/pm': 2.26.1 - linkifyjs: 4.3.1 - - '@tiptap/extension-list-item@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-ordered-list@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-paragraph@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-strike@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-text-align@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-text-style@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-text@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-typography@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/extension-underline@2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - - '@tiptap/pm@2.26.1': - dependencies: - prosemirror-changeset: 2.3.1 - prosemirror-collab: 1.3.1 - prosemirror-commands: 1.7.1 - prosemirror-dropcursor: 1.8.2 - prosemirror-gapcursor: 1.3.2 - prosemirror-history: 1.4.1 - prosemirror-inputrules: 1.5.0 - prosemirror-keymap: 1.2.3 - prosemirror-markdown: 1.13.2 - prosemirror-menu: 1.2.5 - prosemirror-model: 1.25.2 - prosemirror-schema-basic: 1.2.4 - prosemirror-schema-list: 1.5.1 - prosemirror-state: 1.4.3 - prosemirror-tables: 1.7.1 - prosemirror-trailing-node: 3.0.0(prosemirror-model@1.25.2)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0) - prosemirror-transform: 1.10.4 - prosemirror-view: 1.40.0 - - '@tiptap/starter-kit@2.26.1': - dependencies: - '@tiptap/core': 2.26.1(@tiptap/pm@2.26.1) - '@tiptap/extension-blockquote': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-bold': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-bullet-list': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-code': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-code-block': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1) - '@tiptap/extension-document': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-dropcursor': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1) - '@tiptap/extension-gapcursor': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1) - '@tiptap/extension-hard-break': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-heading': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-history': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1) - '@tiptap/extension-horizontal-rule': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1) - '@tiptap/extension-italic': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-list-item': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-ordered-list': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-paragraph': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-strike': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-text': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/extension-text-style': 2.26.1(@tiptap/core@2.26.1(@tiptap/pm@2.26.1)) - '@tiptap/pm': 2.26.1 - '@tokenizer/token@0.3.0': {} '@tootallnate/quickjs-emscripten@0.23.0': {} @@ -7889,19 +7241,10 @@ snapshots: '@types/koa-compose': 3.2.8 '@types/node': 22.14.1 - '@types/linkify-it@5.0.0': {} - - '@types/markdown-it@14.1.2': - dependencies: - '@types/linkify-it': 5.0.0 - '@types/mdurl': 2.0.0 - '@types/mdast@4.0.4': dependencies: '@types/unist': 3.0.3 - '@types/mdurl@2.0.0': {} - '@types/mime-types@2.1.4': {} '@types/mime@1.3.5': {} @@ -8100,12 +7443,8 @@ snapshots: - supports-color - utf-8-validate - '@webcontainer/api@1.2.0': {} - '@xstate/fsm@1.6.5': {} - '@yr/monotone-cubic-spline@1.0.3': {} - accepts@1.3.8: dependencies: mime-types: 2.1.35 @@ -8146,15 +7485,6 @@ snapshots: ansis@4.1.0: {} - apexcharts@4.7.0: - dependencies: - '@svgdotjs/svg.draggable.js': 3.0.6(@svgdotjs/svg.js@3.2.4) - '@svgdotjs/svg.filter.js': 3.0.9 - '@svgdotjs/svg.js': 3.2.4 - '@svgdotjs/svg.resize.js': 2.0.5(@svgdotjs/svg.js@3.2.4)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.4)) - '@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.4) - '@yr/monotone-cubic-spline': 1.0.3 - argparse@1.0.10: dependencies: sprintf-js: 1.0.3 @@ -8484,8 +7814,6 @@ snapshots: optionalDependencies: typescript: 5.8.3 - crelt@1.0.6: {} - croner@4.4.1: {} croner@5.7.0: {} @@ -9185,8 +8513,6 @@ snapshots: he@1.2.0: {} - highlight.js@11.11.1: {} - html-escaper@2.0.2: {} html-minifier@4.0.0: @@ -9258,8 +8584,6 @@ snapshots: humanize-number@0.0.2: {} - ibantools@4.5.1: {} - iconv-lite@0.4.24: dependencies: safer-buffer: 2.1.2 @@ -9551,12 +8875,6 @@ snapshots: lines-and-columns@1.2.4: {} - linkify-it@5.0.0: - dependencies: - uc.micro: 2.1.0 - - linkifyjs@4.3.1: {} - lit-element@4.2.1: dependencies: '@lit-labs/ssr-dom-shim': 1.4.0 @@ -9664,15 +8982,6 @@ snapshots: make-error@1.3.6: {} - markdown-it@14.1.0: - dependencies: - argparse: 2.0.1 - entities: 4.5.0 - linkify-it: 5.0.0 - mdurl: 2.0.0 - punycode.js: 2.3.1 - uc.micro: 2.1.0 - markdown-table@3.0.4: {} matcher@3.0.0: @@ -9812,8 +9121,6 @@ snapshots: dependencies: '@types/mdast': 4.0.4 - mdurl@2.0.0: {} - media-typer@0.3.0: {} memory-pager@1.5.0: {} @@ -10082,8 +9389,6 @@ snapshots: mkdirp@1.0.4: {} - monaco-editor@0.52.2: {} - mongodb-connection-string-url@2.6.0: dependencies: '@types/whatwg-url': 8.2.2 @@ -10222,8 +9527,6 @@ snapshots: is-docker: 2.2.1 is-wsl: 2.2.0 - orderedmap@2.1.1: {} - p-cancelable@3.0.0: {} p-event@4.2.0: @@ -10342,10 +9645,6 @@ snapshots: pdf2json@3.1.5: {} - pdfjs-dist@4.10.38: - optionalDependencies: - '@napi-rs/canvas': 0.1.73 - peek-readable@5.4.2: {} peek-stream@1.1.3: @@ -10392,109 +9691,6 @@ snapshots: property-information@7.1.0: {} - prosemirror-changeset@2.3.1: - dependencies: - prosemirror-transform: 1.10.4 - - prosemirror-collab@1.3.1: - dependencies: - prosemirror-state: 1.4.3 - - prosemirror-commands@1.7.1: - dependencies: - prosemirror-model: 1.25.2 - prosemirror-state: 1.4.3 - prosemirror-transform: 1.10.4 - - prosemirror-dropcursor@1.8.2: - dependencies: - prosemirror-state: 1.4.3 - prosemirror-transform: 1.10.4 - prosemirror-view: 1.40.0 - - prosemirror-gapcursor@1.3.2: - dependencies: - prosemirror-keymap: 1.2.3 - prosemirror-model: 1.25.2 - prosemirror-state: 1.4.3 - prosemirror-view: 1.40.0 - - prosemirror-history@1.4.1: - dependencies: - prosemirror-state: 1.4.3 - prosemirror-transform: 1.10.4 - prosemirror-view: 1.40.0 - rope-sequence: 1.3.4 - - prosemirror-inputrules@1.5.0: - dependencies: - prosemirror-state: 1.4.3 - prosemirror-transform: 1.10.4 - - prosemirror-keymap@1.2.3: - dependencies: - prosemirror-state: 1.4.3 - w3c-keyname: 2.2.8 - - prosemirror-markdown@1.13.2: - dependencies: - '@types/markdown-it': 14.1.2 - markdown-it: 14.1.0 - prosemirror-model: 1.25.2 - - prosemirror-menu@1.2.5: - dependencies: - crelt: 1.0.6 - prosemirror-commands: 1.7.1 - prosemirror-history: 1.4.1 - prosemirror-state: 1.4.3 - - prosemirror-model@1.25.2: - dependencies: - orderedmap: 2.1.1 - - prosemirror-schema-basic@1.2.4: - dependencies: - prosemirror-model: 1.25.2 - - prosemirror-schema-list@1.5.1: - dependencies: - prosemirror-model: 1.25.2 - prosemirror-state: 1.4.3 - prosemirror-transform: 1.10.4 - - prosemirror-state@1.4.3: - dependencies: - prosemirror-model: 1.25.2 - prosemirror-transform: 1.10.4 - prosemirror-view: 1.40.0 - - prosemirror-tables@1.7.1: - dependencies: - prosemirror-keymap: 1.2.3 - prosemirror-model: 1.25.2 - prosemirror-state: 1.4.3 - prosemirror-transform: 1.10.4 - prosemirror-view: 1.40.0 - - prosemirror-trailing-node@3.0.0(prosemirror-model@1.25.2)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0): - dependencies: - '@remirror/core-constants': 3.0.0 - escape-string-regexp: 4.0.0 - prosemirror-model: 1.25.2 - prosemirror-state: 1.4.3 - prosemirror-view: 1.40.0 - - prosemirror-transform@1.10.4: - dependencies: - prosemirror-model: 1.25.2 - - prosemirror-view@1.40.0: - dependencies: - prosemirror-model: 1.25.2 - prosemirror-state: 1.4.3 - prosemirror-transform: 1.10.4 - proto-list@1.2.4: {} proxy-addr@2.0.7: @@ -10540,8 +9736,6 @@ snapshots: inherits: 2.0.4 pump: 2.0.1 - punycode.js@2.3.1: {} - punycode@1.4.1: {} punycode@2.3.1: {} @@ -10736,8 +9930,6 @@ snapshots: '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.27 '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.27 - rope-sequence@1.3.4: {} - rrdom@0.1.7: dependencies: rrweb-snapshot: 2.0.0-alpha.4 @@ -11183,8 +10375,6 @@ snapshots: typescript@5.8.3: {} - uc.micro@2.1.0: {} - uglify-js@3.19.3: {} uint8array-extras@1.4.0: {} @@ -11257,8 +10447,6 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.2 - w3c-keyname@2.2.8: {} - webidl-conversions@7.0.0: {} whatwg-mimetype@3.0.0: {} @@ -11349,12 +10537,6 @@ snapshots: xtend@4.0.2: {} - xterm-addon-fit@0.8.0(xterm@5.3.0): - dependencies: - xterm: 5.3.0 - - xterm@5.3.0: {} - y18n@5.0.8: {} yallist@4.0.0: {} diff --git a/test/test.browser.ts b/test/test.browser.ts index 49c456c..2e8333d 100644 --- a/test/test.browser.ts +++ b/test/test.browser.ts @@ -1,9 +1,49 @@ -import { expect, expectAsync, tap, webhelpers } from '@git.zone/tstest/tapbundle'; +import { expect, tap } from '@git.zone/tstest/tapbundle'; import * as socialioCatalog from '../ts_web/index.js'; -tap.test('', async () => { - const sioFab: socialioCatalog.SioFab = webhelpers.fixture(webhelpers.html``); +tap.test('render combox component', async () => { + // Create and add combox + const combox = new socialioCatalog.SioCombox(); + combox.style.position = 'relative'; + combox.style.width = '800px'; + combox.style.height = '600px'; + document.body.appendChild(combox); + + await combox.updateComplete; + + expect(combox).toBeInstanceOf(socialioCatalog.SioCombox); + + // Check that the component rendered its content + const container = combox.shadowRoot.querySelector('.container'); + expect(container).toBeTruthy(); + + const conversationSelector = combox.shadowRoot.querySelector('sio-conversation-selector'); + expect(conversationSelector).toBeTruthy(); + + const conversationView = combox.shadowRoot.querySelector('sio-conversation-view'); + expect(conversationView).toBeTruthy(); + + console.log('Combox component rendered successfully with all main elements'); + + document.body.removeChild(combox); }); -tap.start(); +tap.test('render fab component', async () => { + // Create and add fab + const fab = new socialioCatalog.SioFab(); + document.body.appendChild(fab); + + await fab.updateComplete; + expect(fab).toBeInstanceOf(socialioCatalog.SioFab); + + // Check main elements + const mainbox = fab.shadowRoot.querySelector('#mainbox'); + expect(mainbox).toBeTruthy(); + + console.log('FAB component rendered successfully'); + + document.body.removeChild(fab); +}); + +tap.start(); \ No newline at end of file diff --git a/ts_web/elements/00colors.ts b/ts_web/elements/00colors.ts index f0e750f..7663b5d 100644 --- a/ts_web/elements/00colors.ts +++ b/ts_web/elements/00colors.ts @@ -108,6 +108,17 @@ export const colors = { dark: 'hsl(212.7 26.8% 83.9%)' }, + // Success colors + success: { + light: 'hsl(142 76% 36%)', + dark: 'hsl(142 70% 45%)' + }, + + successForeground: { + light: 'hsl(0 0% 100%)', + dark: 'hsl(0 0% 100%)' + }, + // Chart colors chart1: { light: 'hsl(12 76% 61%)', diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts index efe2639..60ed8ee 100644 --- a/ts_web/elements/index.ts +++ b/ts_web/elements/index.ts @@ -3,9 +3,15 @@ export * from './00colors.js'; export * from './00fonts.js'; export * from './00tokens.js'; -// Components -export * from './sio-fab.js'; +// Core components +export * from './sio-icon.js'; +export * from './sio-button.js'; + +// Conversation components +export * from './sio-conversation-selector.js'; +export * from './sio-conversation-view.js'; export * from './sio-combox.js'; -export * from './sio-subwidget-onboardme.js'; -export * from './sio-subwidget-conversations.js'; + +// Other components +export * from './sio-fab.js'; export * from './sio-recorder.js'; diff --git a/ts_web/elements/sio-button.ts b/ts_web/elements/sio-button.ts new file mode 100644 index 0000000..19a512f --- /dev/null +++ b/ts_web/elements/sio-button.ts @@ -0,0 +1,259 @@ +import { + DeesElement, + html, + property, + customElement, + cssManager, + css, + unsafeCSS, + type TemplateResult, +} from '@design.estate/dees-element'; + +// Import design tokens +import { colors, bdTheme } from './00colors.js'; +import { spacing, radius, shadows, transitions } from './00tokens.js'; +import { fontFamilies, typography } from './00fonts.js'; + +declare global { + interface HTMLElementTagNameMap { + 'sio-button': SioButton; + } +} + +@customElement('sio-button') +export class SioButton extends DeesElement { + public static demo = () => html` +
+ Default + Primary + Delete + Outline + Ghost + Small + Large + Disabled +
+ `; + + @property({ type: String }) + public text: string = ''; + + @property({ type: String }) + public type: 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' = 'default'; + + @property({ type: String }) + public size: 'sm' | 'default' | 'lg' = 'default'; + + @property({ type: Boolean, reflect: true }) + public disabled: boolean = false; + + @property({ type: String }) + public status: 'normal' | 'pending' | 'success' | 'error' = 'normal'; + + public static styles = [ + cssManager.defaultStyles, + css` + :host { + display: inline-block; + font-family: ${unsafeCSS(fontFamilies.sans)}; + } + + :host([disabled]) { + pointer-events: none; + } + + .button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + white-space: nowrap; + border-radius: ${unsafeCSS(radius.md)}; + font-weight: 500; + transition: ${unsafeCSS(transitions.all)}; + cursor: pointer; + user-select: none; + outline: none; + border: 1px solid transparent; + gap: ${unsafeCSS(spacing[2])}; + font-size: 0.875rem; + line-height: 1.5; + } + + /* Size variants */ + .button.size-sm { + height: 32px; + padding: 0 ${unsafeCSS(spacing[3])}; + font-size: 13px; + } + + .button.size-default { + height: 36px; + padding: 0 ${unsafeCSS(spacing[4])}; + font-size: 14px; + } + + .button.size-lg { + height: 44px; + padding: 0 ${unsafeCSS(spacing[6])}; + font-size: 16px; + } + + /* Type variants */ + .button.default { + background: ${bdTheme('secondary')}; + color: ${bdTheme('secondaryForeground')}; + border-color: ${bdTheme('border')}; + } + + .button.default:hover:not(.disabled) { + background: ${bdTheme('secondary')}; + opacity: 0.8; + } + + .button.default:active:not(.disabled) { + transform: translateY(1px); + } + + .button.primary { + background: ${bdTheme('primary')}; + color: ${bdTheme('primaryForeground')}; + } + + .button.primary:hover:not(.disabled) { + opacity: 0.9; + } + + .button.primary:active:not(.disabled) { + transform: translateY(1px); + } + + .button.destructive { + background: ${bdTheme('destructive')}; + color: ${bdTheme('destructiveForeground')}; + } + + .button.destructive:hover:not(.disabled) { + opacity: 0.9; + } + + .button.destructive:active:not(.disabled) { + transform: translateY(1px); + } + + .button.outline { + background: transparent; + color: ${bdTheme('foreground')}; + border-color: ${bdTheme('border')}; + } + + .button.outline:hover:not(.disabled) { + background: ${bdTheme('accent')}; + color: ${bdTheme('accentForeground')}; + } + + .button.outline:active:not(.disabled) { + transform: translateY(1px); + } + + .button.ghost { + background: transparent; + color: ${bdTheme('foreground')}; + } + + .button.ghost:hover:not(.disabled) { + background: ${bdTheme('accent')}; + color: ${bdTheme('accentForeground')}; + } + + .button.ghost:active:not(.disabled) { + transform: translateY(1px); + } + + /* Status states */ + .button.pending { + pointer-events: none; + opacity: 0.7; + } + + .spinner { + position: absolute; + left: ${unsafeCSS(spacing[3])}; + animation: spin 1s linear infinite; + } + + @keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } + + .button.success { + background: ${bdTheme('success')}; + color: ${bdTheme('successForeground')}; + pointer-events: none; + } + + .button.error { + background: ${bdTheme('destructive')}; + color: ${bdTheme('destructiveForeground')}; + pointer-events: none; + } + + /* Disabled state */ + .button.disabled { + opacity: 0.5; + cursor: not-allowed; + } + + /* Focus state */ + .button:focus-visible { + outline: 2px solid ${bdTheme('ring')}; + outline-offset: 2px; + } + `, + ]; + + public render(): TemplateResult { + const buttonClasses = [ + 'button', + this.type === 'primary' ? 'primary' : this.type, + `size-${this.size}`, + this.disabled ? 'disabled' : '', + this.status, + ].filter(Boolean).join(' '); + + return html` + + `; + } + + private handleClick(event: MouseEvent) { + if (this.disabled || this.status !== 'normal') { + event.preventDefault(); + event.stopPropagation(); + return; + } + + // Dispatch a custom event with any data + this.dispatchEvent(new CustomEvent('click', { + detail: { originalEvent: event }, + bubbles: true, + composed: true + })); + } +} \ No newline at end of file diff --git a/ts_web/elements/sio-combox.ts b/ts_web/elements/sio-combox.ts index 5aa0a74..ec6b46b 100644 --- a/ts_web/elements/sio-combox.ts +++ b/ts_web/elements/sio-combox.ts @@ -5,11 +5,30 @@ import { customElement, type TemplateResult, cssManager, + css, + unsafeCSS, + state, } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; -import * as deesCatalog from '@design.estate/dees-catalog'; -deesCatalog; +// Import design tokens +import { colors, bdTheme } from './00colors.js'; +import { spacing, radius, shadows, transitions } from './00tokens.js'; +import { fontFamilies, typography } from './00fonts.js'; + +// Import components +import { SioConversationSelector, type IConversation } from './sio-conversation-selector.js'; +import { SioConversationView, type IMessage, type IConversationData } from './sio-conversation-view.js'; + +// Make sure components are loaded +SioConversationSelector; +SioConversationView; + +declare global { + interface HTMLElementTagNameMap { + 'sio-combox': SioCombox; + } +} @customElement('sio-combox') export class SioCombox extends DeesElement { @@ -18,183 +37,231 @@ export class SioCombox extends DeesElement { @property({ type: Object }) public referenceObject: HTMLElement; - /** - * computes the button offset - */ - public cssComputeHeight() { - let height = window.innerHeight < 760 ? window.innerHeight : 760; - if (!this.referenceObject) { - console.log('SioCombox: no reference object set'); - } - if (this.referenceObject) { - console.log(`referenceObject height is ${this.referenceObject.clientHeight}`); - height = height - (this.referenceObject.clientHeight + 60); - } - return height; - } + @state() + private selectedConversationId: string | null = null; - public cssComputeInnerScroll() { - console.log( - `SioCombox clientHeight: ${this.shadowRoot.querySelector('.mainbox').clientHeight}` - ); - console.log( - `SioCombox content scrollheight is: ${ - this.shadowRoot.querySelector('.contentbox').clientHeight - }` - ); - if ( - this.shadowRoot.querySelector('.mainbox').clientHeight < - this.shadowRoot.querySelector('.contentbox').clientHeight - ) { - (this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'scroll'; - } else { - (this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'hidden'; + @state() + private conversations: IConversation[] = [ + { + id: '1', + title: 'Technical Support', + lastMessage: 'Thanks for your help with the login issue!', + time: '2 min ago', + unread: true, + }, + { + id: '2', + title: 'Billing Question', + lastMessage: 'I need help understanding my invoice', + time: '1 hour ago', + }, + { + id: '3', + title: 'Feature Request', + lastMessage: 'That would be great! Looking forward to it', + time: 'Yesterday', + }, + { + id: '4', + title: 'General Inquiry', + lastMessage: 'Thank you for the information', + time: '2 days ago', } - } + ]; + + @state() + private messages: { [conversationId: string]: IMessage[] } = { + '1': [ + { id: '1', text: 'Hi, I\'m having trouble logging in', sender: 'user', time: '10:00 AM' }, + { id: '2', text: 'I can help you with that. Can you tell me what error you\'re seeing?', sender: 'support', time: '10:02 AM' }, + { id: '3', text: 'It says "Invalid credentials" but I\'m sure my password is correct', sender: 'user', time: '10:03 AM' }, + { id: '4', text: 'Let me check your account. Please try resetting your password using the forgot password link.', sender: 'support', time: '10:05 AM' }, + { id: '5', text: 'Thanks for your help with the login issue!', sender: 'user', time: '10:10 AM' }, + ], + '2': [ + { id: '1', text: 'I need help understanding my invoice', sender: 'user', time: '9:00 AM' }, + { id: '2', text: 'I\'d be happy to help explain your invoice. Which part is unclear?', sender: 'support', time: '9:05 AM' }, + ], + '3': [ + { id: '1', text: 'I\'d love to see dark mode support in your app!', sender: 'user', time: 'Yesterday' }, + { id: '2', text: 'Thanks for the suggestion! We\'re actually working on dark mode and it should be available next month.', sender: 'support', time: 'Yesterday' }, + { id: '3', text: 'That would be great! Looking forward to it', sender: 'user', time: 'Yesterday' }, + ], + '4': [ + { id: '1', text: 'Can you tell me more about your enterprise plans?', sender: 'user', time: '2 days ago' }, + { id: '2', text: 'Of course! Our enterprise plans include advanced features like SSO, dedicated support, and custom integrations.', sender: 'support', time: '2 days ago' }, + { id: '3', text: 'Thank you for the information', sender: 'user', time: '2 days ago' }, + ] + }; constructor() { super(); domtools.DomTools.setupDomTools(); } - public render(): TemplateResult { - return html` - ${domtools.elementBasic.styles} - -
-
-
-
Hello :)
-
Ask us anything or share your feedback!
-
- - -
+
-
-
-
- -
-
Conversations
-
-
-
- -
-
Onboarding
-
-
-
powered by social.io
`; } - async updated() { - this.cssComputeHeight(); - window.requestAnimationFrame(() => { - setTimeout(() => { - this.cssComputeInnerScroll(); - }, 200); - }); + private handleConversationSelected(event: CustomEvent) { + const conversation = event.detail.conversation as IConversation; + this.selectedConversationId = conversation.id; + + // Mark conversation as read + const convIndex = this.conversations.findIndex(c => c.id === conversation.id); + if (convIndex !== -1) { + this.conversations[convIndex] = { ...this.conversations[convIndex], unread: false }; + this.conversations = [...this.conversations]; + } } -} + + private handleBack() { + // For mobile view, go back to conversation list + this.selectedConversationId = null; + } + + private handleSendMessage(event: CustomEvent) { + const message = event.detail.message as IMessage; + const conversationId = this.selectedConversationId; + + if (conversationId) { + // Add message to the conversation + if (!this.messages[conversationId]) { + this.messages[conversationId] = []; + } + this.messages[conversationId] = [...this.messages[conversationId], message]; + this.messages = { ...this.messages }; + + // Update conversation's last message + const convIndex = this.conversations.findIndex(c => c.id === conversationId); + if (convIndex !== -1) { + this.conversations[convIndex] = { + ...this.conversations[convIndex], + lastMessage: message.text, + time: 'Just now' + }; + // Move conversation to top + const [conv] = this.conversations.splice(convIndex, 1); + this.conversations = [conv, ...this.conversations]; + } + + // Simulate a response after a delay (remove in production) + setTimeout(() => { + const responseMessage: IMessage = { + id: Date.now().toString(), + text: 'Thanks for your message! We\'ll get back to you shortly.', + sender: 'support', + time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + }; + + this.messages[conversationId] = [...this.messages[conversationId], responseMessage]; + this.messages = { ...this.messages }; + }, 3000); + } + } +} \ No newline at end of file diff --git a/ts_web/elements/sio-conversation-selector.ts b/ts_web/elements/sio-conversation-selector.ts new file mode 100644 index 0000000..71cd554 --- /dev/null +++ b/ts_web/elements/sio-conversation-selector.ts @@ -0,0 +1,267 @@ +import { + DeesElement, + property, + html, + customElement, + type TemplateResult, + cssManager, + css, + unsafeCSS, + state, +} from '@design.estate/dees-element'; + +// Import design tokens +import { colors, bdTheme } from './00colors.js'; +import { spacing, radius, shadows, transitions } from './00tokens.js'; +import { fontFamilies, typography } from './00fonts.js'; + +// Types +export interface IConversation { + id: string; + title: string; + lastMessage: string; + time: string; + unread?: boolean; + avatar?: string; +} + +declare global { + interface HTMLElementTagNameMap { + 'sio-conversation-selector': SioConversationSelector; + } +} + +@customElement('sio-conversation-selector') +export class SioConversationSelector extends DeesElement { + public static demo = () => html` + + `; + + @property({ type: Array }) + public conversations: IConversation[] = []; + + @property({ type: String }) + public selectedConversationId: string | null = null; + + @state() + private searchQuery: string = ''; + + public static styles = [ + cssManager.defaultStyles, + css` + :host { + display: flex; + flex-direction: column; + height: 100%; + background: ${bdTheme('card')}; + border-right: 1px solid ${bdTheme('border')}; + font-family: ${unsafeCSS(fontFamilies.sans)}; + } + + .header { + padding: ${unsafeCSS(spacing[4])}; + border-bottom: 1px solid ${bdTheme('border')}; + } + + .title { + font-size: 1.125rem; + line-height: 1.5; + font-weight: 600; + margin: 0 0 ${unsafeCSS(spacing[3])} 0; + color: ${bdTheme('foreground')}; + } + + .search-box { + position: relative; + } + + .search-input { + width: 100%; + padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[10])} ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])}; + background: ${bdTheme('muted')}; + border: 1px solid ${bdTheme('border')}; + border-radius: ${unsafeCSS(radius.md)}; + font-size: 14px; + color: ${bdTheme('foreground')}; + outline: none; + transition: ${unsafeCSS(transitions.all)}; + font-family: ${unsafeCSS(fontFamilies.sans)}; + } + + .search-input::placeholder { + color: ${bdTheme('mutedForeground')}; + } + + .search-input:focus { + background: ${bdTheme('background')}; + border-color: ${bdTheme('ring')}; + } + + .search-icon { + position: absolute; + right: ${unsafeCSS(spacing[3])}; + top: 50%; + transform: translateY(-50%); + color: ${bdTheme('mutedForeground')}; + } + + .conversation-list { + flex: 1; + overflow-y: auto; + padding: ${unsafeCSS(spacing[2])}; + } + + .conversation-item { + padding: ${unsafeCSS(spacing[3])}; + margin-bottom: ${unsafeCSS(spacing[2])}; + background: ${bdTheme('background')}; + border: 1px solid ${bdTheme('border')}; + border-radius: ${unsafeCSS(radius.md)}; + cursor: pointer; + transition: ${unsafeCSS(transitions.all)}; + } + + .conversation-item:hover { + background: ${bdTheme('accent')}; + } + + .conversation-item.selected { + background: ${bdTheme('accent')}; + border-color: ${bdTheme('primary')}; + } + + .conversation-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: ${unsafeCSS(spacing[1])}; + } + + .conversation-title { + font-weight: 600; + color: ${bdTheme('foreground')}; + display: flex; + align-items: center; + gap: ${unsafeCSS(spacing[2])}; + } + + .conversation-time { + font-size: 0.75rem; + line-height: 1.5; + color: ${bdTheme('mutedForeground')}; + } + + .conversation-preview { + font-size: 0.875rem; + line-height: 1.5; + color: ${bdTheme('mutedForeground')}; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .unread-dot { + display: inline-block; + width: 8px; + height: 8px; + background: ${bdTheme('primary')}; + border-radius: 50%; + } + + .empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + padding: ${unsafeCSS(spacing[4])}; + text-align: center; + color: ${bdTheme('mutedForeground')}; + gap: ${unsafeCSS(spacing[3])}; + } + + .empty-icon { + font-size: 48px; + opacity: 0.5; + } + + /* Scrollbar styling */ + .conversation-list::-webkit-scrollbar { + width: 6px; + } + + .conversation-list::-webkit-scrollbar-track { + background: transparent; + } + + .conversation-list::-webkit-scrollbar-thumb { + background: ${bdTheme('border')}; + border-radius: 3px; + } + + .conversation-list::-webkit-scrollbar-thumb:hover { + background: ${bdTheme('mutedForeground')}; + } + `, + ]; + + public render(): TemplateResult { + const filteredConversations = this.conversations.filter(conv => + conv.title.toLowerCase().includes(this.searchQuery.toLowerCase()) || + conv.lastMessage.toLowerCase().includes(this.searchQuery.toLowerCase()) + ); + + return html` +
+

Messages

+
+ this.searchQuery = (e.target as HTMLInputElement).value} + /> + +
+
+ + ${filteredConversations.length > 0 ? html` +
+ ${filteredConversations.map(conv => html` +
this.selectConversation(conv)} + > +
+ + ${conv.title} + ${conv.unread ? html`` : ''} + + ${conv.time} +
+
${conv.lastMessage}
+
+ `)} +
+ ` : html` +
+ +

${this.searchQuery ? 'No matching conversations' : 'No conversations yet'}

+

${this.searchQuery ? 'Try a different search term' : 'Start a new conversation to get started'}

+
+ `} + `; + } + + private selectConversation(conversation: IConversation) { + this.selectedConversationId = conversation.id; + + // Dispatch event for parent components + this.dispatchEvent(new CustomEvent('conversation-selected', { + detail: { conversation }, + bubbles: true, + composed: true + })); + } +} \ No newline at end of file diff --git a/ts_web/elements/sio-conversation-view.ts b/ts_web/elements/sio-conversation-view.ts new file mode 100644 index 0000000..b0e4599 --- /dev/null +++ b/ts_web/elements/sio-conversation-view.ts @@ -0,0 +1,413 @@ +import { + DeesElement, + property, + html, + customElement, + type TemplateResult, + cssManager, + css, + unsafeCSS, + state, +} from '@design.estate/dees-element'; + +// Import design tokens +import { colors, bdTheme } from './00colors.js'; +import { spacing, radius, shadows, transitions } from './00tokens.js'; +import { fontFamilies, typography } from './00fonts.js'; + +// Types +export interface IMessage { + id: string; + text: string; + sender: 'user' | 'support'; + time: string; + status?: 'sending' | 'sent' | 'delivered' | 'read'; +} + +export interface IConversationData { + id: string; + title: string; + messages: IMessage[]; +} + +declare global { + interface HTMLElementTagNameMap { + 'sio-conversation-view': SioConversationView; + } +} + +@customElement('sio-conversation-view') +export class SioConversationView extends DeesElement { + public static demo = () => html` + + `; + + @property({ type: Object }) + public conversation: IConversationData | null = null; + + @state() + private messageText: string = ''; + + @state() + private isTyping: boolean = false; + + public static styles = [ + cssManager.defaultStyles, + css` + :host { + display: flex; + flex-direction: column; + height: 100%; + background: ${bdTheme('background')}; + font-family: ${unsafeCSS(fontFamilies.sans)}; + } + + .header { + padding: ${unsafeCSS(spacing[4])}; + border-bottom: 1px solid ${bdTheme('border')}; + background: ${bdTheme('card')}; + display: flex; + align-items: center; + gap: ${unsafeCSS(spacing[3])}; + } + + .back-button { + display: none; + } + + @media (max-width: 600px) { + .back-button { + display: block; + } + } + + .header-title { + font-size: 1.125rem; + line-height: 1.5; + font-weight: 600; + margin: 0; + color: ${bdTheme('foreground')}; + flex: 1; + } + + .header-actions { + display: flex; + gap: ${unsafeCSS(spacing[2])}; + } + + .messages-container { + flex: 1; + overflow-y: auto; + padding: ${unsafeCSS(spacing[4])}; + display: flex; + flex-direction: column; + gap: ${unsafeCSS(spacing[3])}; + } + + .message { + display: flex; + align-items: flex-start; + gap: ${unsafeCSS(spacing[3])}; + max-width: 70%; + } + + .message.user { + align-self: flex-end; + flex-direction: row-reverse; + } + + .message-bubble { + padding: ${unsafeCSS(spacing[3])}; + border-radius: ${unsafeCSS(radius.lg)}; + font-size: 0.875rem; + line-height: 1.5; + position: relative; + } + + .message.support .message-bubble { + background: ${bdTheme('muted')}; + color: ${bdTheme('foreground')}; + border-bottom-left-radius: ${unsafeCSS(spacing[1])}; + } + + .message.user .message-bubble { + background: ${bdTheme('primary')}; + color: ${bdTheme('primaryForeground')}; + border-bottom-right-radius: ${unsafeCSS(spacing[1])}; + } + + .message-time { + font-size: 0.75rem; + line-height: 1.5; + color: ${bdTheme('mutedForeground')}; + margin-top: ${unsafeCSS(spacing[1])}; + } + + .message.user .message-time { + text-align: right; + } + + .typing-indicator { + display: flex; + align-items: center; + gap: ${unsafeCSS(spacing[1])}; + padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])}; + background: ${bdTheme('muted')}; + border-radius: ${unsafeCSS(radius.lg)}; + width: fit-content; + } + + .typing-dot { + width: 8px; + height: 8px; + background: ${bdTheme('mutedForeground')}; + border-radius: 50%; + animation: typing 1.4s infinite; + } + + .typing-dot:nth-child(2) { + animation-delay: 0.2s; + } + + .typing-dot:nth-child(3) { + animation-delay: 0.4s; + } + + @keyframes typing { + 0%, 60%, 100% { + opacity: 0.3; + transform: scale(0.8); + } + 30% { + opacity: 1; + transform: scale(1); + } + } + + .input-container { + padding: ${unsafeCSS(spacing[4])}; + border-top: 1px solid ${bdTheme('border')}; + background: ${bdTheme('card')}; + } + + .input-wrapper { + display: flex; + gap: ${unsafeCSS(spacing[2])}; + align-items: flex-end; + } + + .message-input { + flex: 1; + min-height: 40px; + max-height: 120px; + padding: ${unsafeCSS(spacing[2])} ${unsafeCSS(spacing[3])}; + background: ${bdTheme('background')}; + border: 1px solid ${bdTheme('border')}; + border-radius: ${unsafeCSS(radius.md)}; + font-size: 14px; + color: ${bdTheme('foreground')}; + outline: none; + resize: none; + font-family: ${unsafeCSS(fontFamilies.sans)}; + line-height: 1.5; + transition: ${unsafeCSS(transitions.all)}; + } + + .message-input::placeholder { + color: ${bdTheme('mutedForeground')}; + } + + .message-input:focus { + border-color: ${bdTheme('ring')}; + } + + .input-actions { + display: flex; + gap: ${unsafeCSS(spacing[1])}; + } + + .empty-state { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: ${unsafeCSS(spacing[4])}; + padding: ${unsafeCSS(spacing[8])}; + text-align: center; + color: ${bdTheme('mutedForeground')}; + } + + .empty-icon { + font-size: 64px; + opacity: 0.5; + } + + /* Scrollbar styling */ + .messages-container::-webkit-scrollbar { + width: 6px; + } + + .messages-container::-webkit-scrollbar-track { + background: transparent; + } + + .messages-container::-webkit-scrollbar-thumb { + background: ${bdTheme('border')}; + border-radius: 3px; + } + + .messages-container::-webkit-scrollbar-thumb:hover { + background: ${bdTheme('mutedForeground')}; + } + `, + ]; + + public render(): TemplateResult { + if (!this.conversation) { + return html` +
+ +

Select a conversation

+

Choose a conversation from the sidebar to start messaging

+
+ `; + } + + return html` +
+ + + +

${this.conversation.title}

+
+ + + + + + +
+
+ +
+ ${this.conversation.messages.map(msg => html` +
+
+
+ ${msg.text} +
+
${msg.time}
+
+
+ `)} + + ${this.isTyping ? html` +
+
+
+
+
+
+
+ ` : ''} +
+ +
+
+ +
+ + + + + + +
+
+
+ `; + } + + private handleBack() { + this.dispatchEvent(new CustomEvent('back', { + bubbles: true, + composed: true + })); + } + + private handleInput(e: Event) { + const textarea = e.target as HTMLTextAreaElement; + this.messageText = textarea.value; + + // Auto-resize textarea + textarea.style.height = 'auto'; + textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'; + } + + private handleKeyDown(e: KeyboardEvent) { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + this.sendMessage(); + } + } + + private sendMessage() { + if (!this.messageText.trim()) return; + + const message: IMessage = { + id: Date.now().toString(), + text: this.messageText.trim(), + sender: 'user', + time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), + status: 'sending' + }; + + // Dispatch event for parent to handle + this.dispatchEvent(new CustomEvent('send-message', { + detail: { message }, + bubbles: true, + composed: true + })); + + // Clear input + this.messageText = ''; + const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement; + if (textarea) { + textarea.style.height = 'auto'; + } + + // Simulate typing indicator (remove in production) + setTimeout(() => { + this.isTyping = true; + setTimeout(() => { + this.isTyping = false; + }, 2000); + }, 1000); + } + + public updated() { + // Scroll to bottom when new messages arrive + const container = this.shadowRoot?.querySelector('#messages'); + if (container) { + container.scrollTop = container.scrollHeight; + } + } +} \ No newline at end of file diff --git a/ts_web/elements/sio-fab.ts b/ts_web/elements/sio-fab.ts index 4c15d0d..5fdae52 100644 --- a/ts_web/elements/sio-fab.ts +++ b/ts_web/elements/sio-fab.ts @@ -10,7 +10,14 @@ import { import * as domtools from '@design.estate/dees-domtools'; import { SioCombox } from './sio-combox.js'; +import { SioIcon } from './sio-icon.js'; SioCombox; +SioIcon; + +// Import design tokens +import { colors, bdTheme } from './00colors.js'; +import { spacing, radius, shadows, transitions, sizes } from './00tokens.js'; +import { fontFamilies, typography } from './00fonts.js'; declare global { interface HTMLElementTagNameMap { @@ -20,7 +27,7 @@ declare global { @customElement('sio-fab') export class SioFab extends DeesElement { - @property() + @property({ type: Boolean }) public showCombox = false; public static demo = () => html` `; @@ -45,30 +52,31 @@ export class SioFab extends DeesElement { } #mainbox { - transition: all 0.2s; + transition: ${transitions.all}; position: absolute; bottom: 0px; right: 0px; - height: 60px; - width: 60px; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - line-height: 60px; + height: 56px; + width: 56px; + box-shadow: ${cssManager.bdTheme(shadows.md, shadows.lg)}; + line-height: 56px; text-align: center; - color: #ccc; cursor: pointer; - background: ${this.goBright - ? 'linear-gradient(-45deg, #eeeeeb, #eeeeeb)' - : 'linear-gradient(-45deg, #222222, #333333)'}; - border-radius: 50% 50% 50% 50%; + background: ${bdTheme('primary')}; + color: ${bdTheme('primaryForeground')}; + border-radius: ${radius.full}; user-select: none; + border: 1px solid ${bdTheme('border')}; } #mainbox:hover { - transform: scale(1.05); + box-shadow: ${cssManager.bdTheme(shadows.lg, shadows.xl)}; + transform: translateY(-2px); } #mainbox:active { - transform: scale(0.95); + transform: translateY(0); + box-shadow: ${cssManager.bdTheme(shadows.sm, shadows.md)}; } #mainbox .icon { @@ -77,7 +85,7 @@ export class SioFab extends DeesElement { left: 0px; will-change: transform; transform: ${this.showCombox ? 'rotate(0deg)' : 'rotate(-360deg)'}; - transition: all 0.2s; + transition: ${transitions.transform}; height: 100%; width: 100%; object-fit: contain; @@ -85,11 +93,10 @@ export class SioFab extends DeesElement { -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; - user-drag: none; } #mainbox .icon img { - filter: grayscale(1) ${cssManager.bdTheme('invert(1)', '')}; + filter: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(1)')}; position: absolute; width: 100%; top: 0px; @@ -98,7 +105,7 @@ export class SioFab extends DeesElement { transform: scale(0.2, 0.2) translateY(-5px); } #mainbox .icon.open:hover img { - filter: grayscale(0); + filter: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(1.2)')}; } #mainbox .icon.open { @@ -110,40 +117,52 @@ export class SioFab extends DeesElement { opacity: ${this.showCombox ? '1' : '0'}; pointer-events: ${this.showCombox ? 'all' : 'none'}; } - #mainbox .icon.close:hover dees-icon { - color: ${cssManager.bdTheme('#111', '#fff')}; + #mainbox .icon.close:hover sio-icon { + color: ${bdTheme('primaryForeground')}; } - #mainbox .icon.open dees-icon { + #mainbox .icon.open sio-icon { position: absolute; width: 100%; height: 100%; - font-size: 32px; - color: ${cssManager.bdTheme('#777', '#999')}; - top: 0px; - left: 0px; - transform: translateY(2px); + display: flex; + align-items: center; + justify-content: center; + color: ${bdTheme('primaryForeground')}; } - #mainbox .icon.close dees-icon { + #mainbox .icon.close sio-icon { position: absolute; width: 100%; height: 100%; - font-size: 24px; - top: 0px; - left: 0px; - color: ${cssManager.bdTheme('#666', '#CCC')}; + display: flex; + align-items: center; + justify-content: center; + color: ${bdTheme('primaryForeground')}; + } + + #comboxContainer { + position: absolute; + bottom: 0; + right: 0; + pointer-events: none; } #comboxContainer sio-combox { - transition: transform 0.2s, opacity 0.2s; + position: absolute; + bottom: calc(56px + ${spacing[4]}); + right: 0; + transition: ${transitions.all}; will-change: transform; - transform: translateY(20px); - bottom: 80px; + transform: translateY(${spacing[5]}); opacity: 0; pointer-events: none; } + #comboxContainer.show { + pointer-events: all; + } + #comboxContainer.show sio-combox { transform: translateY(0px); opacity: 1; @@ -152,15 +171,15 @@ export class SioFab extends DeesElement {
- +
- +
- + this.showCombox = false}>
`; } diff --git a/ts_web/elements/sio-icon.ts b/ts_web/elements/sio-icon.ts new file mode 100644 index 0000000..b51f7e3 --- /dev/null +++ b/ts_web/elements/sio-icon.ts @@ -0,0 +1,163 @@ +import { + DeesElement, + html, + property, + customElement, + cssManager, + css, + type TemplateResult, +} from '@design.estate/dees-element'; + +import * as lucideIcons from 'lucide'; +import { createElement } from 'lucide'; + +declare global { + interface HTMLElementTagNameMap { + 'sio-icon': SioIcon; + } +} + +@customElement('sio-icon') +export class SioIcon extends DeesElement { + public static demo = () => html` +
+ + + + +
+ `; + + @property({ type: String }) + public icon: string; + + @property({ type: Number }) + public size: number = 24; + + @property({ type: String }) + public color: string = 'currentColor'; + + @property({ type: Number }) + public strokeWidth: number = 2; + + // Cache for rendered icons + private static iconCache = new Map(); + private static readonly MAX_CACHE_SIZE = 100; + + // Track last rendered properties to avoid unnecessary updates + private lastIcon: string | null = null; + private lastSize: number | null = null; + private lastColor: string | null = null; + private lastStrokeWidth: number | null = null; + + public static styles = [ + cssManager.defaultStyles, + css` + :host { + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + vertical-align: middle; + } + + #iconContainer { + display: flex; + align-items: center; + justify-content: center; + } + + #iconContainer svg { + display: block; + width: 100%; + height: 100%; + } + `, + ]; + + public render(): TemplateResult { + return html` +
+ `; + } + + public updated() { + // Check if we need to update + if ( + this.lastIcon === this.icon && + this.lastSize === this.size && + this.lastColor === this.color && + this.lastStrokeWidth === this.strokeWidth + ) { + return; + } + + // Update tracking properties + this.lastIcon = this.icon; + this.lastSize = this.size; + this.lastColor = this.color; + this.lastStrokeWidth = this.strokeWidth; + + const container = this.shadowRoot?.querySelector('#iconContainer') as HTMLElement; + if (!container || !this.icon) return; + + // Clear container + container.innerHTML = ''; + + // Create cache key + const cacheKey = `${this.icon}:${this.size}:${this.color}:${this.strokeWidth}`; + + // Check cache + if (SioIcon.iconCache.has(cacheKey)) { + container.innerHTML = SioIcon.iconCache.get(cacheKey)!; + return; + } + + try { + // Convert icon name to PascalCase (e.g., 'message-square' -> 'MessageSquare') + const pascalCaseName = this.icon + .split('-') + .map(part => part.charAt(0).toUpperCase() + part.slice(1)) + .join(''); + + const iconComponent = (lucideIcons as any)[pascalCaseName]; + if (!iconComponent) { + console.warn(`Lucide icon '${pascalCaseName}' not found`); + return; + } + + // Create the icon element + const svgElement = createElement(iconComponent, { + size: this.size, + color: this.color, + strokeWidth: this.strokeWidth, + }); + + if (svgElement) { + // Cache the result + const svgString = svgElement.outerHTML; + SioIcon.iconCache.set(cacheKey, svgString); + + // Limit cache size + if (SioIcon.iconCache.size > SioIcon.MAX_CACHE_SIZE) { + const firstKey = SioIcon.iconCache.keys().next().value; + SioIcon.iconCache.delete(firstKey); + } + + // Append to container + container.appendChild(svgElement); + } + } catch (error) { + console.error(`Error rendering icon ${this.icon}:`, error); + } + } + + public async disconnectedCallback() { + await super.disconnectedCallback(); + // Clear references + this.lastIcon = null; + this.lastSize = null; + this.lastColor = null; + this.lastStrokeWidth = null; + } +} \ No newline at end of file diff --git a/ts_web/elements/sio-subwidget-conversations.ts b/ts_web/elements/sio-subwidget-conversations.ts deleted file mode 100644 index a3fffca..0000000 --- a/ts_web/elements/sio-subwidget-conversations.ts +++ /dev/null @@ -1,156 +0,0 @@ -import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element'; -import * as domtools from '@design.estate/dees-domtools'; - -import * as sioInterfaces from '@social.io/interfaces'; - -@customElement('sio-subwidget-conversations') -export class SioSubwidgetConversations extends DeesElement { - // STATIC - - // INSTANCE - public conversations: sioInterfaces.ISioConversation[] = [ - { - subject: 'Pricing page', - parties: [ - { - id: '1', - description: 'Lossless Support', - name: 'Lossless Support', - }, - { - id: '2', - description: 'you', - name: 'you', - }, - ], - conversationBlocks: [ - { - partyId: '1', - text: 'Hello there :) How can we help you?', - }, - { - partyId: '2', - text: 'Hi! Where is your pricing page?', - }, - ], - },{ - subject: 'Pricing page', - parties: [ - { - id: '1', - description: 'Lossless Support', - name: 'Lossless Support', - }, - { - id: '2', - description: 'you', - name: 'you', - }, - ], - conversationBlocks: [ - { - partyId: '1', - text: 'Hello there :) How can we help you?', - }, - { - partyId: '2', - text: 'Hi! Where is your pricing page?', - }, - ], - }, - ]; - - public static demo = () => html``; - public render(): TemplateResult { - return html` - ${domtools.elementBasic.styles} - -
-
Your conversations:
- - ${this.conversations.map((conversationArg) => { - return html` -
-
-
-
-
Today at 8:01
-
${conversationArg.subject}
-
-
-
- `; - })} - View more -
- `; - } -} diff --git a/ts_web/elements/sio-subwidget-onboardme.ts b/ts_web/elements/sio-subwidget-onboardme.ts deleted file mode 100644 index fc993e9..0000000 --- a/ts_web/elements/sio-subwidget-onboardme.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element'; -import * as domtools from '@design.estate/dees-domtools'; - -import * as deesCatalog from '@design.estate/dees-catalog'; -deesCatalog; - -@customElement('sio-subwidget-onboardme') -export class SioSubwidgetOnboardme extends DeesElement { - @property() - public showCombox = false; - - public static demo = () => html` - - `; - - constructor() { - super(); - domtools.DomTools.setupDomTools(); - } - - public render(): TemplateResult { - return html` - ${domtools.elementBasic.styles} - - Or search through our documentation - - Search -
last updated: ${new Date().toISOString()}
- `; - } -} \ No newline at end of file diff --git a/ts_web/pages/mainpage.ts b/ts_web/pages/mainpage.ts index 1c6ed2e..75e5f64 100644 --- a/ts_web/pages/mainpage.ts +++ b/ts_web/pages/mainpage.ts @@ -1,3 +1,45 @@ import { html } from '@design.estate/dees-element'; -export const mainpage = () => html` `; +export const mainpage = () => html` + +
+
+

Social.io Catalog Components

+ +
+

FAB with Combox Demo

+ +
+
+
+`; \ No newline at end of file