feat(core): Refactor and enhance consent management components
This commit is contained in:
parent
78a62196f3
commit
de925b28fa
@ -1,5 +1,13 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-01-13 - 1.1.0 - feat(core)
|
||||
Refactor and enhance consent management components
|
||||
|
||||
- Replaced usage of custom elements with LitElement for core components.
|
||||
- Introduced new layout and design for consent modal using modern CSS approaches.
|
||||
- Removed dependency on '@design.estate/dees-domtools'.
|
||||
- Added support for dynamic theme switching with light and dark modes.
|
||||
|
||||
## 2025-01-09 - 1.0.81 - fix(core)
|
||||
Package updated to ensure compliance with privacy regulations.
|
||||
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
// dees tools
|
||||
import * as deesWccTools from '@design.estate/dees-wcctools';
|
||||
import * as deesDomTools from '@design.estate/dees-domtools';
|
||||
|
||||
// elements and pages
|
||||
import * as elements from '../ts_web/elements/index.js';
|
||||
import * as pages from '../ts_web/pages/index.js';
|
||||
|
||||
deesWccTools.setupWccTools(elements as any, pages);
|
||||
deesDomTools.elementBasic.setup();
|
||||
|
||||
@ -12,14 +12,12 @@
|
||||
"watch": "tswatch element"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@consent.software/interfaces": "^1.0.11",
|
||||
"@consent.software/webclient": "^1.0.14",
|
||||
"@design.estate/dees-catalog": "^1.3.3",
|
||||
"@design.estate/dees-domtools": "^2.1.1",
|
||||
"@design.estate/dees-element": "^2.0.39",
|
||||
"@push.rocks/smartdelay": "^3.0.5"
|
||||
"@push.rocks/smartdelay": "^3.0.5",
|
||||
"lit": "^3.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@design.estate/dees-wcctools": "^1.0.90",
|
||||
|
||||
315
pnpm-lock.yaml
generated
315
pnpm-lock.yaml
generated
@ -14,18 +14,12 @@ importers:
|
||||
'@consent.software/webclient':
|
||||
specifier: ^1.0.14
|
||||
version: 1.0.17
|
||||
'@design.estate/dees-catalog':
|
||||
specifier: ^1.3.3
|
||||
version: 1.3.3
|
||||
'@design.estate/dees-domtools':
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
'@design.estate/dees-element':
|
||||
specifier: ^2.0.39
|
||||
version: 2.0.39
|
||||
'@push.rocks/smartdelay':
|
||||
specifier: ^3.0.5
|
||||
version: 3.0.5
|
||||
lit:
|
||||
specifier: ^3.2.1
|
||||
version: 3.2.1
|
||||
devDependencies:
|
||||
'@design.estate/dees-wcctools':
|
||||
specifier: ^1.0.90
|
||||
@ -261,9 +255,6 @@ packages:
|
||||
'@consent.software/webclient@1.0.17':
|
||||
resolution: {integrity: sha512-nqYVlIhm6wmpCLppBID/xpQytJlZV52YPafKOHl/jOkQeQmzNd5UdaDFRnZo6DEU77OE4CwbsswIy+CC3NS0TA==}
|
||||
|
||||
'@design.estate/dees-catalog@1.3.3':
|
||||
resolution: {integrity: sha512-pE2BUFks2lWjjAm4wgby+5aBwtd3VrgCsvwbE3k39DMQpcgxNB64lZa5tUV4XUxwMluECfDluI2uQuslTUQqvQ==}
|
||||
|
||||
'@design.estate/dees-comms@1.0.27':
|
||||
resolution: {integrity: sha512-GvzTUwkV442LD60T08iqSoqvhA02Mou5lFvvqBPc4yBUiU7cZISqBx+76xvMgMIEI9Dx9JfTl4/2nW8MoVAanw==}
|
||||
|
||||
@ -570,26 +561,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@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.2.0':
|
||||
resolution: {integrity: sha512-lsF1VvqzTjrcOPW7mvsK0E6jlQJ9UHF37s6Z0JhVS/COXWtPdRT4Dm7/hhbwqH62yu44B+mRz1gJhc7NgBoA5Q==}
|
||||
hasBin: true
|
||||
@ -633,70 +604,6 @@ packages:
|
||||
'@mixmark-io/domino@2.2.0':
|
||||
resolution: {integrity: sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==}
|
||||
|
||||
'@napi-rs/canvas-android-arm64@0.1.65':
|
||||
resolution: {integrity: sha512-ZYwqFYEKcT5Zr8lbiaJNJj/poLaeK2TncolY914r+gD2TJNeP7ZqvE7A2SX/1C9MB4E3DQEwm3YhL3WEf0x3MQ==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
|
||||
'@napi-rs/canvas-darwin-arm64@0.1.65':
|
||||
resolution: {integrity: sha512-Pg1pfiJEyDIsX+V0QaJPRWvXbw5zmWAk3bivFCvt/5pwZb37/sT6E/RqPHT9NnqpDyKW6SriwY9ypjljysUA1Q==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@napi-rs/canvas-darwin-x64@0.1.65':
|
||||
resolution: {integrity: sha512-3Tr+/HjdJN7Z/VKIcsxV2DvDIibZCExgfYTgljCkUSFuoI7iNkOE6Dc1Q6j212EB9PeO8KmfrViBqHYT6IwWkA==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.65':
|
||||
resolution: {integrity: sha512-3KP+dYObH7CVkZMZWwk1WX9jRjL+EKdQtD43H8MOI+illf+dwqLlecdQ4d9bQRIxELKJ8dyPWY4fOp/Ngufrdg==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
|
||||
'@napi-rs/canvas-linux-arm64-gnu@0.1.65':
|
||||
resolution: {integrity: sha512-Ka3StKz7Dq7kjTF3nNJCq43UN/VlANS7qGE3dWkn1d+tQNsCRy/wRmyt1TUFzIjRqcTFMQNRbgYq84+53UBA0A==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@napi-rs/canvas-linux-arm64-musl@0.1.65':
|
||||
resolution: {integrity: sha512-O4xMASm2JrmqYoiDyxVWi+z5C14H+oVEag2rZ5iIA67dhWqYZB+iO7wCFpBYRj31JPBR29FOsu6X9zL+DwBFdw==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@napi-rs/canvas-linux-riscv64-gnu@0.1.65':
|
||||
resolution: {integrity: sha512-dblWDaA59ZU8bPbkfM+riSke7sFbNZ70LEevUdI5rgiFEUzYUQlU34gSBzemTACj5rCWt1BYeu0GfkLSjNMBSw==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
|
||||
'@napi-rs/canvas-linux-x64-gnu@0.1.65':
|
||||
resolution: {integrity: sha512-wsp+atutw13OJXGU3DDkdngtBDoEg01IuK5xMe0L6VFPV8maGkh17CXze078OD5QJOc6kFyw3DDscMLOPF8+oA==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@napi-rs/canvas-linux-x64-musl@0.1.65':
|
||||
resolution: {integrity: sha512-odX+nN+IozWzhdj31INcHz3Iy9+EckNw+VqsZcaUxZOTu7/3FmktRNI6aC1qe5minZNv1m05YOS1FVf7fvmjlA==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@napi-rs/canvas-win32-x64-msvc@0.1.65':
|
||||
resolution: {integrity: sha512-RZQX3luWnlNWgdMnLMQ1hyfQraeAn9lnxWWVCHuUM4tAWEV8UDdeb7cMwmJW7eyt8kAosmjeHt3cylQMHOxGFg==}
|
||||
engines: {node: '>= 10'}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@napi-rs/canvas@0.1.65':
|
||||
resolution: {integrity: sha512-YcFhXQcp+b2d38zFOJNbpyPHnIL7KAEkhJQ+UeeKI5IpE9B8Cpf/M6RiHPQXSsSqnYbrfFylnW49dyh2oeSblQ==}
|
||||
engines: {node: '>= 10'}
|
||||
|
||||
'@oozcitak/dom@1.15.10':
|
||||
resolution: {integrity: sha512-0JT29/LaxVgRcGKvHmSrUTEvZ8BXvZhGl2LASRUgHqDTC1M5g1pLmVv56IYNyt3bG2CUjDkc67wnyZC14pbQrQ==}
|
||||
engines: {node: '>=8.0'}
|
||||
@ -807,9 +714,6 @@ packages:
|
||||
'@push.rocks/smarthash@3.0.4':
|
||||
resolution: {integrity: sha512-HJ/fSx41jm0CvSaqMLa6b2nuNK5rHAqAeAq3dAB7Sq9BCPm2M0J5ZVDTzEAH8pS91XYniUiwuE0jwPERNn9hmw==}
|
||||
|
||||
'@push.rocks/smarti18n@1.0.4':
|
||||
resolution: {integrity: sha512-bHIi9Iuzp2cbux9q79ZK5jOQYPsYJ9zDDS4p/xEPQH31gr0mcFRosLSQb1kvDQDVmUhI0ADlQMqr2ui9zEXQHA==}
|
||||
|
||||
'@push.rocks/smartjson@5.0.10':
|
||||
resolution: {integrity: sha512-yuntSMGZ+XNHMrbS9RxotaD+eOgoNTcuDoWsttis+N3Mkc9DIam0pt/ER4NU8TgfMmhT/hKwQH+3DJceDzntoA==}
|
||||
|
||||
@ -1604,12 +1508,6 @@ packages:
|
||||
'@ungap/structured-clone@1.2.1':
|
||||
resolution: {integrity: sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==}
|
||||
|
||||
'@webcontainer/api@1.2.0':
|
||||
resolution: {integrity: sha512-tzoKBd4lLdhHy5GHFpUkl+ndoSba8JqmB7x0ZQFnWfjbcbQOvKQfxA8MEMUYhgqjWHnbrWdAfnBEHz5f5lYG5A==}
|
||||
|
||||
'@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'}
|
||||
@ -1646,9 +1544,6 @@ packages:
|
||||
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
apexcharts@3.54.1:
|
||||
resolution: {integrity: sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==}
|
||||
|
||||
argparse@1.0.10:
|
||||
resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
|
||||
|
||||
@ -2299,10 +2194,6 @@ packages:
|
||||
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
|
||||
hasBin: true
|
||||
|
||||
highlight.js@11.10.0:
|
||||
resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
|
||||
html-minifier@4.0.0:
|
||||
resolution: {integrity: sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==}
|
||||
engines: {node: '>=6'}
|
||||
@ -2325,9 +2216,6 @@ packages:
|
||||
humanize-ms@1.2.1:
|
||||
resolution: {integrity: sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=}
|
||||
|
||||
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'}
|
||||
@ -2782,9 +2670,6 @@ packages:
|
||||
engines: {node: '>=10'}
|
||||
hasBin: true
|
||||
|
||||
monaco-editor@0.52.2:
|
||||
resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
|
||||
|
||||
ms@2.0.0:
|
||||
resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=}
|
||||
|
||||
@ -2929,10 +2814,6 @@ packages:
|
||||
resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
|
||||
engines: {node: '>=16'}
|
||||
|
||||
pdfjs-dist@4.10.38:
|
||||
resolution: {integrity: sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ==}
|
||||
engines: {node: '>=20'}
|
||||
|
||||
peek-readable@5.3.1:
|
||||
resolution: {integrity: sha512-GVlENSDW6KHaXcd9zkZltB7tCLosKB/4Hg0fqBJkAoBgYG2Tn1xtMgXtSUuMU9AK/gCm/tTdT8mgAeF4YNeeqw==}
|
||||
engines: {node: '>=14.16'}
|
||||
@ -3263,37 +3144,6 @@ packages:
|
||||
stubborn-fs@1.2.5:
|
||||
resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
|
||||
|
||||
svg.draggable.js@2.2.2:
|
||||
resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
svg.easing.js@2.0.0:
|
||||
resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
svg.filter.js@2.0.2:
|
||||
resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
svg.js@2.7.1:
|
||||
resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
|
||||
|
||||
svg.pathmorphing.js@0.1.3:
|
||||
resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
svg.resize.js@1.4.3:
|
||||
resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
svg.select.js@2.1.2:
|
||||
resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
svg.select.js@3.0.1:
|
||||
resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
sweet-scroll@4.0.0:
|
||||
resolution: {integrity: sha512-mR6fRsAQANtm3zpzhUE73KAOt2aT4ZsWzNSggiEsSqdO6Zh4gM7ioJG81EngrZEl0XAc3ZvzEfhxggOoEBc8jA==}
|
||||
|
||||
@ -3574,14 +3424,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==}
|
||||
|
||||
yallist@4.0.0:
|
||||
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
|
||||
|
||||
@ -4286,30 +4128,6 @@ snapshots:
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
|
||||
'@design.estate/dees-catalog@1.3.3':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.1.1
|
||||
'@design.estate/dees-element': 2.0.39
|
||||
'@design.estate/dees-wcctools': 1.0.90
|
||||
'@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.1.0
|
||||
'@push.rocks/smartstring': 4.0.15
|
||||
'@tsclass/tsclass': 4.2.0
|
||||
'@webcontainer/api': 1.2.0
|
||||
apexcharts: 3.54.1
|
||||
highlight.js: 11.10.0
|
||||
ibantools: 4.5.1
|
||||
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:
|
||||
- supports-color
|
||||
|
||||
'@design.estate/dees-comms@1.0.27':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.1.10
|
||||
@ -4504,24 +4322,6 @@ snapshots:
|
||||
'@esbuild/win32-x64@0.24.2':
|
||||
optional: true
|
||||
|
||||
'@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.2.0':
|
||||
dependencies:
|
||||
'@git.zone/tspublish': 1.9.1
|
||||
@ -4620,50 +4420,6 @@ snapshots:
|
||||
|
||||
'@mixmark-io/domino@2.2.0': {}
|
||||
|
||||
'@napi-rs/canvas-android-arm64@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas-darwin-arm64@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas-darwin-x64@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas-linux-arm-gnueabihf@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas-linux-arm64-gnu@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas-linux-arm64-musl@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas-linux-riscv64-gnu@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas-linux-x64-gnu@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas-linux-x64-musl@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas-win32-x64-msvc@0.1.65':
|
||||
optional: true
|
||||
|
||||
'@napi-rs/canvas@0.1.65':
|
||||
optionalDependencies:
|
||||
'@napi-rs/canvas-android-arm64': 0.1.65
|
||||
'@napi-rs/canvas-darwin-arm64': 0.1.65
|
||||
'@napi-rs/canvas-darwin-x64': 0.1.65
|
||||
'@napi-rs/canvas-linux-arm-gnueabihf': 0.1.65
|
||||
'@napi-rs/canvas-linux-arm64-gnu': 0.1.65
|
||||
'@napi-rs/canvas-linux-arm64-musl': 0.1.65
|
||||
'@napi-rs/canvas-linux-riscv64-gnu': 0.1.65
|
||||
'@napi-rs/canvas-linux-x64-gnu': 0.1.65
|
||||
'@napi-rs/canvas-linux-x64-musl': 0.1.65
|
||||
'@napi-rs/canvas-win32-x64-msvc': 0.1.65
|
||||
optional: true
|
||||
|
||||
'@oozcitak/dom@1.15.10':
|
||||
dependencies:
|
||||
'@oozcitak/infra': 1.0.8
|
||||
@ -4818,7 +4574,7 @@ snapshots:
|
||||
|
||||
'@push.rocks/smartdelay@3.0.5':
|
||||
dependencies:
|
||||
'@push.rocks/smartpromise': 4.0.3
|
||||
'@push.rocks/smartpromise': 4.1.0
|
||||
|
||||
'@push.rocks/smartenv@5.0.12':
|
||||
dependencies:
|
||||
@ -4919,8 +4675,6 @@ snapshots:
|
||||
'@types/through2': 2.0.41
|
||||
through2: 4.0.2
|
||||
|
||||
'@push.rocks/smarti18n@1.0.4': {}
|
||||
|
||||
'@push.rocks/smartjson@5.0.10':
|
||||
dependencies:
|
||||
'@push.rocks/smartstring': 4.0.8
|
||||
@ -6209,10 +5963,6 @@ snapshots:
|
||||
|
||||
'@ungap/structured-clone@1.2.1': {}
|
||||
|
||||
'@webcontainer/api@1.2.0': {}
|
||||
|
||||
'@yr/monotone-cubic-spline@1.0.3': {}
|
||||
|
||||
accepts@1.3.8:
|
||||
dependencies:
|
||||
mime-types: 2.1.35
|
||||
@ -6243,16 +5993,6 @@ snapshots:
|
||||
normalize-path: 3.0.0
|
||||
picomatch: 2.3.1
|
||||
|
||||
apexcharts@3.54.1:
|
||||
dependencies:
|
||||
'@yr/monotone-cubic-spline': 1.0.3
|
||||
svg.draggable.js: 2.2.2
|
||||
svg.easing.js: 2.0.0
|
||||
svg.filter.js: 2.0.2
|
||||
svg.pathmorphing.js: 0.1.3
|
||||
svg.resize.js: 1.4.3
|
||||
svg.select.js: 3.0.1
|
||||
|
||||
argparse@1.0.10:
|
||||
dependencies:
|
||||
sprintf-js: 1.0.3
|
||||
@ -7106,8 +6846,6 @@ snapshots:
|
||||
|
||||
he@1.2.0: {}
|
||||
|
||||
highlight.js@11.10.0: {}
|
||||
|
||||
html-minifier@4.0.0:
|
||||
dependencies:
|
||||
camel-case: 3.0.0
|
||||
@ -7139,8 +6877,6 @@ snapshots:
|
||||
dependencies:
|
||||
ms: 2.1.3
|
||||
|
||||
ibantools@4.5.1: {}
|
||||
|
||||
iconv-lite@0.4.24:
|
||||
dependencies:
|
||||
safer-buffer: 2.1.2
|
||||
@ -7741,8 +7477,6 @@ snapshots:
|
||||
|
||||
mkdirp@1.0.4: {}
|
||||
|
||||
monaco-editor@0.52.2: {}
|
||||
|
||||
ms@2.0.0: {}
|
||||
|
||||
ms@2.1.2: {}
|
||||
@ -7854,10 +7588,6 @@ snapshots:
|
||||
|
||||
path-to-regexp@8.2.0: {}
|
||||
|
||||
pdfjs-dist@4.10.38:
|
||||
optionalDependencies:
|
||||
'@napi-rs/canvas': 0.1.65
|
||||
|
||||
peek-readable@5.3.1: {}
|
||||
|
||||
peek-stream@1.1.3:
|
||||
@ -8317,37 +8047,6 @@ snapshots:
|
||||
|
||||
stubborn-fs@1.2.5: {}
|
||||
|
||||
svg.draggable.js@2.2.2:
|
||||
dependencies:
|
||||
svg.js: 2.7.1
|
||||
|
||||
svg.easing.js@2.0.0:
|
||||
dependencies:
|
||||
svg.js: 2.7.1
|
||||
|
||||
svg.filter.js@2.0.2:
|
||||
dependencies:
|
||||
svg.js: 2.7.1
|
||||
|
||||
svg.js@2.7.1: {}
|
||||
|
||||
svg.pathmorphing.js@0.1.3:
|
||||
dependencies:
|
||||
svg.js: 2.7.1
|
||||
|
||||
svg.resize.js@1.4.3:
|
||||
dependencies:
|
||||
svg.js: 2.7.1
|
||||
svg.select.js: 2.1.2
|
||||
|
||||
svg.select.js@2.1.2:
|
||||
dependencies:
|
||||
svg.js: 2.7.1
|
||||
|
||||
svg.select.js@3.0.1:
|
||||
dependencies:
|
||||
svg.js: 2.7.1
|
||||
|
||||
sweet-scroll@4.0.0: {}
|
||||
|
||||
symbol-tree@3.2.4: {}
|
||||
@ -8597,12 +8296,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: {}
|
||||
|
||||
yallist@4.0.0: {}
|
||||
|
||||
yargs-parser@21.1.1: {}
|
||||
|
||||
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@consent.software/catalog',
|
||||
version: '1.0.81',
|
||||
version: '1.1.0',
|
||||
description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.'
|
||||
}
|
||||
|
||||
@ -1,210 +1,266 @@
|
||||
import { customElement, DeesElement, property, html, type TemplateResult, cssManager, css } from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import '@design.estate/dees-catalog';
|
||||
import * as shared from './shared.js';
|
||||
|
||||
import { LitElement, html, css, type TemplateResult } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
|
||||
import * as csInterfaces from '@consent.software/interfaces';
|
||||
import * as csWebclient from '@consent.software/webclient';
|
||||
|
||||
import { delayFor } from '@push.rocks/smartdelay';
|
||||
|
||||
@customElement('consentsoftware-cookieconsent')
|
||||
export class ConsentsoftwareCookieconsent extends DeesElement {
|
||||
export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
public static demo = () => html`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
|
||||
|
||||
public csWebclientInstance = new csWebclient.CsWebclient();
|
||||
public csWebclientRan = false;
|
||||
|
||||
@property({ type: String, reflect: true })
|
||||
public theme: 'light' | 'dark' = 'light';
|
||||
|
||||
@property({ type: Number })
|
||||
public heightPixels = 60;
|
||||
|
||||
/**
|
||||
* We bind `heightPixels` to a CSS variable (--cookieconsent-height).
|
||||
* Then we can do margin-bottom animations in CSS.
|
||||
*/
|
||||
public static styles = css`
|
||||
:host {
|
||||
font-family: ${shared.fontStack};
|
||||
/* Default theme variables */
|
||||
--text-color: #333;
|
||||
--background-color: #eeeeee;
|
||||
--accent-color: #333333;
|
||||
--button-bg: #ffffff;
|
||||
--button-hover-bg: #f2f2f2;
|
||||
--icon-color: #4496f5;
|
||||
--link-color: #333;
|
||||
--padding-sides: 16px;
|
||||
}
|
||||
|
||||
:host([theme='dark']) {
|
||||
--text-color: #fff;
|
||||
--background-color: #111;
|
||||
--accent-color: #333333;
|
||||
--button-bg: #252525;
|
||||
--button-hover-bg: #222222;
|
||||
--icon-color: #4496f5;
|
||||
--link-color: #fff;
|
||||
}
|
||||
|
||||
:host([theme='light']) {
|
||||
--text-color: #333;
|
||||
--background-color: #eeeeee;
|
||||
--accent-color: #333333;
|
||||
--button-bg: #ffffff;
|
||||
--button-hover-bg: #f2f2f2;
|
||||
--icon-color: #4496f5;
|
||||
--link-color: #333;
|
||||
}
|
||||
|
||||
.pageOverlay {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000; /* standard z-index for fixed elements */
|
||||
}
|
||||
|
||||
.modalBox {
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
background: var(--background-color);
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
|
||||
position: realtive;
|
||||
border-top: 1px solid var(--accent-color);
|
||||
border-radius: 16px;
|
||||
max-width: 1100px;
|
||||
min-width: calc(100vw / 3);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
/*
|
||||
* We start with margin-bottom as negative to hide the banner.
|
||||
* The animation occurs when we toggle the gotIt/show attributes.
|
||||
*/
|
||||
will-change: transform; /* ensure efficient rendering */
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/*
|
||||
* Toggle display based on [show] attribute
|
||||
* (so if show=false, the banner doesn't show at all).
|
||||
*/
|
||||
:host([show='false']) {
|
||||
display: none;
|
||||
}
|
||||
:host([show='true']) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Animate margin-bottom when [gotIt] toggles.
|
||||
* If gotIt=true, push the banner down off-screen.
|
||||
* If gotIt=false, pull the banner into view.
|
||||
*/
|
||||
:host([gotIt='true']) {
|
||||
background: blue;
|
||||
}
|
||||
:host([gotIt='false']) {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
padding-left: var(--padding-sides);
|
||||
padding-right: var(--padding-sides);
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.text-container a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
padding: var(--padding-sides);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.8em;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.info-container a {
|
||||
text-decoration: underline;
|
||||
color: var(--link-color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.info-container a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.consent-button {
|
||||
border-radius: 3px;
|
||||
background: var(--button-bg);
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
padding: 10px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.consent-button:hover {
|
||||
background: var(--button-hover-bg);
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
// lets determine wether to show the cookieconsent dialog or not
|
||||
this.setAttribute('gotIt', 'true');
|
||||
this.setAttribute('show', 'false');
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 1100px;
|
||||
margin: auto;
|
||||
line-height: var(--cookieconsent-height);
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.text-container {
|
||||
line-height: var(--cookieconsent-height);
|
||||
display: grid;
|
||||
grid-template-columns: 30px auto;
|
||||
}
|
||||
|
||||
.text-container .icon-container {
|
||||
height: var(--cookieconsent-height);
|
||||
display: inline-block;
|
||||
color: #4496F5;
|
||||
}
|
||||
|
||||
.text-container .toptext {
|
||||
|
||||
}
|
||||
|
||||
.text-container a {
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: grid;
|
||||
grid-template-columns: ${cssManager.cssGridColumns(4, 20)};
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
color: ${cssManager.bdTheme('#444', '#CCC')};
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-container a {
|
||||
text-decoration: underline;
|
||||
color: ${cssManager.bdTheme('#444', '#CCC')};
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.info-container a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.consent-button {
|
||||
border-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#252525')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.2)', '0px 0px 5px rgba(0,0,0,0.4)')};
|
||||
padding: 10px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.consent-button:hover {
|
||||
background: ${cssManager.bdTheme('#f2f2f2', '#222222')};
|
||||
}
|
||||
|
||||
.consent-button:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
${cssManager.cssForNotebook(css`
|
||||
.content {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
`)}
|
||||
|
||||
${cssManager.cssForTablet(css`
|
||||
:host {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
margin-top: -10px;
|
||||
line-height: 50px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
line-height: 20px;
|
||||
margin-bottom: 10px;
|
||||
grid-template-columns: 50px auto;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
grid-template-columns: ${cssManager.cssGridColumns(2, 20)};
|
||||
}
|
||||
`)}
|
||||
|
||||
${cssManager.cssForPhablet(css`
|
||||
.button-container {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
`)}
|
||||
`
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
background: ${cssManager.bdTheme('#eeeeee', '#111')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 0px 15px rgba(0,0,0,0.4)', '0px -30px 30px rgba(0,0,0,1)')};
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
border-top: ${cssManager.bdTheme('none', '1px solid #e4002b')};
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
--cookieconsent-height: 60px;
|
||||
min-height: var(--cookieconsent-height);
|
||||
margin-bottom: -${this.heightPixels}px;
|
||||
will-change: transform; /* make sure it is rendered efficiently */
|
||||
z-index: 1000; /* the standard z-index for fixed elements at Lossless */
|
||||
}
|
||||
|
||||
:host([show=false]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([show=true]) {
|
||||
display: block;
|
||||
transition: margin-bottom 0.3s ease;
|
||||
}
|
||||
|
||||
:host([gotIt=true]) {
|
||||
margin-bottom: -${this.heightPixels + 1}px;
|
||||
}
|
||||
|
||||
:host([gotIt=false]) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="content">
|
||||
<div class="text-container">
|
||||
<div class="icon-container">
|
||||
<dees-icon iconName="info"></dees-icon>
|
||||
<div class="pageOverlay">
|
||||
<div class="modalBox">
|
||||
<div class="content">
|
||||
<consentsoftware-header></consentsoftware-header>
|
||||
<consentsoftware-tabs></consentsoftware-tabs>
|
||||
<div class="text-container" style="padding: 16px;">
|
||||
<div class="toptext">
|
||||
This page uses cookies. Please review our
|
||||
<a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a>
|
||||
and choose which cookie level you are willing to accept.
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="button-container">
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) => this.setLevel(event, ['functional'])}
|
||||
>
|
||||
Functional cookies
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) => this.setLevel(event, ['functional', 'analytics'])}
|
||||
>
|
||||
Analytics cookies
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.setLevel(event, ['functional', 'analytics', 'marketing'])}
|
||||
>
|
||||
Marketing cookies
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])}
|
||||
>
|
||||
All cookies
|
||||
</div>
|
||||
</div> -->
|
||||
<consentsoftware-mainselection></consentsoftware-mainselection>
|
||||
<div class="button-container">
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) => this.setLevel(event, ['functional'])}
|
||||
>
|
||||
Deny
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) => this.setLevel(event, ['functional', 'analytics'])}
|
||||
>
|
||||
Accept selection
|
||||
</div>
|
||||
<div
|
||||
class="consent-button"
|
||||
@click=${(event: MouseEvent) =>
|
||||
this.setLevel(event, ['functional', 'analytics', 'marketing'])}
|
||||
>
|
||||
Accept all cookies
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-container">
|
||||
consent management powered by
|
||||
<a href="https://consent.software">consent.software</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toptext">This page uses cookies. Please review our <a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a> and choose which cookie level you are willing to accept.</div>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<div class="consent-button" @click=${event => {this.setLevel(event, ['functional']);}}>Functional cookies</div>
|
||||
<div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics']);}}>Analytics cookies</div>
|
||||
<div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing']);}}>Marketing cookies</div>
|
||||
<div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing', 'all']);}}>All cookies</div>
|
||||
</div>
|
||||
<div class="info-container">
|
||||
consent management powered by <a href="https://consent.software">consent.software</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@property({type: Number})
|
||||
public heightPixels: number = 60;
|
||||
|
||||
/**
|
||||
* Called when the element is inserted into the DOM.
|
||||
*/
|
||||
public async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.setAttribute('gotIt', 'true');
|
||||
this.updateTheme();
|
||||
|
||||
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
|
||||
if(!cookieLevel) {
|
||||
if (!cookieLevel) {
|
||||
delayFor(300).then(() => {
|
||||
this.setAttribute('show', 'true');
|
||||
this.setAttribute('gotIt', 'false');
|
||||
@ -215,28 +271,46 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
public firstUpdated() {
|
||||
this.heightPixels = this.shadowRoot.host.clientHeight;
|
||||
}
|
||||
/**
|
||||
* Called after the first render of the component.
|
||||
* We measure the actual height of the banner and update the CSS variable.
|
||||
*/
|
||||
public firstUpdated() {}
|
||||
|
||||
/**
|
||||
* Called whenever the element is updated or re-rendered.
|
||||
*/
|
||||
public async updated() {
|
||||
console.log(`The height of the cookie banner is ${this.shadowRoot.host.clientHeight}px`);
|
||||
console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
|
||||
const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
|
||||
if (!this.csWebclientRan && acceptedCookieLevels) {
|
||||
this.csWebclientRan = true;
|
||||
await this.csWebclientInstance.getAndRunConsentTuples();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
private async setLevel (event: MouseEvent, levelsArg: csInterfaces.TCookieLevel[]) {
|
||||
/**
|
||||
* Sets the user’s chosen cookie level(s) and hides the banner.
|
||||
*/
|
||||
private async setLevel(event: MouseEvent, levelsArg: csInterfaces.TCookieLevel[]) {
|
||||
console.log(`Set level to ${levelsArg}`);
|
||||
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
||||
this.setAttribute('gotIt', 'true');
|
||||
await delayFor(300);
|
||||
this.setAttribute('show', 'false');
|
||||
// After user selection, re-check for any required scripts to run
|
||||
this.updated();
|
||||
}
|
||||
|
||||
/**
|
||||
* Dynamically switches the theme between light/dark,
|
||||
* respecting `prefers-color-scheme` by default.
|
||||
*/
|
||||
private updateTheme() {
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
this.theme = prefersDark ? 'dark' : 'light';
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
||||
this.theme = e.matches ? 'dark' : 'light';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
36
ts_web/elements/consentsoftware-header.ts
Normal file
36
ts_web/elements/consentsoftware-header.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import * as shared from './shared.js';
|
||||
|
||||
import { LitElement, html, css, type TemplateResult } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
|
||||
@customElement('consentsoftware-header')
|
||||
export class ConsentsoftwareHeader extends LitElement {
|
||||
public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
|
||||
|
||||
public static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
font-family: ${shared.fontStack};
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="heading">
|
||||
What about cookies?
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
62
ts_web/elements/consentsoftware-mainselection.ts
Normal file
62
ts_web/elements/consentsoftware-mainselection.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import { LitElement, html, css, type TemplateResult } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
|
||||
@customElement('consentsoftware-mainselection')
|
||||
export class ConsentsoftwareMainSelection extends LitElement {
|
||||
public static demo = () => html`<consentsoftware-mainselection></consentsoftware-mainselection>`;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public required = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public selected = false;
|
||||
|
||||
public static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.itemBox {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.itemBox:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="maincontainer">
|
||||
<div class="itemBox">
|
||||
<consentsoftware-toggle>Required</consentsoftware-toggle>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<consentsoftware-toggle>Preferences</consentsoftware-toggle>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<consentsoftware-toggle>Statistics</consentsoftware-toggle>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<consentsoftware-toggle>Marketing</consentsoftware-toggle>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async getResults(mouseEvent) {}
|
||||
}
|
||||
64
ts_web/elements/consentsoftware-tabs.ts
Normal file
64
ts_web/elements/consentsoftware-tabs.ts
Normal file
@ -0,0 +1,64 @@
|
||||
import { LitElement, html, css, type TemplateResult } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
|
||||
@customElement('consentsoftware-tabs')
|
||||
export class ConsentsoftwareTabs extends LitElement {
|
||||
public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
|
||||
|
||||
public static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.tabs .tab {
|
||||
text-align: center;
|
||||
line-height: 3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selector {
|
||||
position: absolute;
|
||||
width: calc(100% / 3);
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
background: orange;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="tabs">
|
||||
<div class="tab" @click=${this.handleClick}>Consent</div>
|
||||
<div class="tab" @click=${this.handleClick}>Details</div>
|
||||
<div class="tab" @click=${this.handleClick}>About Cookies</div>
|
||||
</div>
|
||||
<div class="selector"></div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async handleClick(mouseEvent) {
|
||||
const target = mouseEvent.target as HTMLElement;
|
||||
const tab: HTMLDivElement = target.closest('.tab');
|
||||
if (tab) {
|
||||
const selector: HTMLDivElement = this.shadowRoot?.querySelector('.selector');
|
||||
if (selector) {
|
||||
selector.style.left = `${tab.offsetLeft}px`;
|
||||
selector.style.width = `${tab.offsetWidth}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
96
ts_web/elements/consentsoftware-toggle.ts
Normal file
96
ts_web/elements/consentsoftware-toggle.ts
Normal file
@ -0,0 +1,96 @@
|
||||
import { LitElement, html, css, type TemplateResult } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
|
||||
@customElement('consentsoftware-toggle')
|
||||
export class ConsentsoftwareToggle extends LitElement {
|
||||
public static demo = () => html`<consentsoftware-toggle></consentsoftware-toggle>`;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public required = false;
|
||||
|
||||
@property({ type: Boolean, reflect: true })
|
||||
public selected = false;
|
||||
|
||||
public static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.toggleKnobArea {
|
||||
cursor: pointer;
|
||||
margin: auto;
|
||||
height: 30px;
|
||||
width: 60px;
|
||||
border-radius: 15px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
:host([selected]) .toggleKnobArea {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.toggleKnobMover {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toggleKnobInner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 15px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 0.2s;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
:host([selected]) .toggleKnobInner {
|
||||
background: white;
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="label">${this.getText()}</div>
|
||||
<div class="toggle" @click=${this.handleClick}>
|
||||
<div class="toggleKnobArea">
|
||||
<div class="toggleKnobMover">
|
||||
<div class="toggleKnobInner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async handleClick(mouseEvent) {
|
||||
this.selected = !this.selected;
|
||||
mouseEvent.stopPropagation();
|
||||
mouseEvent.preventDefault();
|
||||
this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
|
||||
console.log(`Selected ${this.selected}`);
|
||||
const moverElement: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobMover');
|
||||
if (this.selected) {
|
||||
moverElement.style.transform = 'translateX(30px)';
|
||||
} else {
|
||||
moverElement.style.transform = 'translateX(0px)';
|
||||
}
|
||||
}
|
||||
|
||||
public getText() {
|
||||
return this.textContent;
|
||||
}
|
||||
}
|
||||
@ -1 +1,5 @@
|
||||
export * from './consentsoftware-cookieconsent.js';
|
||||
export * from './consentsoftware-header.js';
|
||||
export * from './consentsoftware-mainselection.js';
|
||||
export * from './consentsoftware-toggle.js';
|
||||
export * from './consentsoftware-tabs.js';
|
||||
3
ts_web/elements/shared.ts
Normal file
3
ts_web/elements/shared.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { unsafeCSS } from 'lit'
|
||||
|
||||
export const fontStack = unsafeCSS('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
|
||||
Loading…
x
Reference in New Issue
Block a user