consent.software/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BREAKING CHANGE(elements): Migrate web components to @design.estate/dees-element, introduce shared theme colors and cssManager, and update imports/usages across ts_web.

Browse Source
This commit is contained in:
Jürgen Kunz
2025-11-30 21:54:10 +00:00
parent 0b366b360d
commit 0d90a7ae7f
11 changed files with 428 additions and 486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
changelog.md
View File

@@ -1,5 +1,15 @@
# Changelog # Changelog
## 2025-11-30 - 2.0.0 - BREAKING CHANGE(elements)
Migrate web components to @design.estate/dees-element, introduce shared theme colors and cssManager, and update imports/usages across ts_web.
- Replaced direct lit usage with @design.estate/dees-element across the project (imports and base classes).
- Added cssManager export and a Shadcn-inspired color palette (colors) in ts_web/elements/shared.ts to centralize theming.
- Updated all components to extend DeesElement and include cssManager.defaultStyles in their static styles.
- Adjusted lifecycle and event typings (firstUpdated signatures, pointer/mouse event typing) and minor behaviour refinements in consentsoftware-toggle (drag handling, sync logic).
- Updated package.json dependencies to remove 'lit' and add '@design.estate/dees-element'.
- Updated page imports (ts_web/pages/page1.ts) to use the new html export from @design.estate/dees-element.
## 2025-11-30 - 1.6.1 - fix(build) ## 2025-11-30 - 1.6.1 - fix(build)
Update TypeScript config and build tooling; use accessor for Lit properties; bump deps and adjust package metadata Update TypeScript config and build tooling; use accessor for Lit properties; bump deps and adjust package metadata

4
package.json
View File

@@ -17,8 +17,8 @@
"dependencies": { "dependencies": {
"@consent.software/interfaces": "^1.0.14", "@consent.software/interfaces": "^1.0.14",
"@consent.software/webclient": "^1.1.0", "@consent.software/webclient": "^1.1.0",
"@push.rocks/smartdelay": "^3.0.5", "@design.estate/dees-element": "^2.1.3",
"lit": "^3.3.1" "@push.rocks/smartdelay": "^3.0.5"
}, },
"devDependencies": { "devDependencies": {
"@design.estate/dees-wcctools": "^1.2.1", "@design.estate/dees-wcctools": "^1.2.1",

69
pnpm-lock.yaml generated
View File

@@ -14,12 +14,12 @@ importers:
'@consent.software/webclient': '@consent.software/webclient':
specifier: ^1.1.0 specifier: ^1.1.0
version: 1.1.0 version: 1.1.0
'@design.estate/dees-element':
specifier: ^2.1.3
version: 2.1.3
'@push.rocks/smartdelay': '@push.rocks/smartdelay':
specifier: ^3.0.5 specifier: ^3.0.5
version: 3.0.5 version: 3.0.5
lit:
specifier: ^3.3.1
version: 3.3.1
devDependencies: devDependencies:
'@design.estate/dees-wcctools': '@design.estate/dees-wcctools':
specifier: ^1.2.1 specifier: ^1.2.1
@@ -236,15 +236,9 @@ packages:
'@design.estate/dees-comms@1.0.27': '@design.estate/dees-comms@1.0.27':
resolution: {integrity: sha512-GvzTUwkV442LD60T08iqSoqvhA02Mou5lFvvqBPc4yBUiU7cZISqBx+76xvMgMIEI9Dx9JfTl4/2nW8MoVAanw==} resolution: {integrity: sha512-GvzTUwkV442LD60T08iqSoqvhA02Mou5lFvvqBPc4yBUiU7cZISqBx+76xvMgMIEI9Dx9JfTl4/2nW8MoVAanw==}
'@design.estate/dees-domtools@2.1.1':
resolution: {integrity: sha512-ZYe7rt2pOWZ6av4YDc88i+Li9WquOHuvE4Xyf+Wo9jAZ37XyTw53wzzviaW3zDG77ggX2VlCLFkAs8Tm5Lf4gg==}
'@design.estate/dees-domtools@2.3.6': '@design.estate/dees-domtools@2.3.6':
resolution: {integrity: sha512-cKaPNtSpp/ZuuXVx2dXO3K2FU3/HjC4ZkqtXb8Kl6yy9rNDbgtjcI4PuOk9Ux1SJzw7FgcxqVh7OSEV60htbmg==} resolution: {integrity: sha512-cKaPNtSpp/ZuuXVx2dXO3K2FU3/HjC4ZkqtXb8Kl6yy9rNDbgtjcI4PuOk9Ux1SJzw7FgcxqVh7OSEV60htbmg==}
'@design.estate/dees-element@2.0.39':
resolution: {integrity: sha512-AQdGU/+GmWmU5M5pDf+GWT7GU8UN073WZvtIkfqQZemxd35HYU1vpi629m8/PjKd5dIHAU7QN2mKb6IQ8anPgw==}
'@design.estate/dees-element@2.1.3': '@design.estate/dees-element@2.1.3':
resolution: {integrity: sha512-TjXWxVcdSPaT1IOk31ckfxvAZnJLuTxhFGsNCKoh63/UE2FVf6slp8//UFvN+ADigiA9ZsY0azkY99XbJCwDDA==} resolution: {integrity: sha512-TjXWxVcdSPaT1IOk31ckfxvAZnJLuTxhFGsNCKoh63/UE2FVf6slp8//UFvN+ADigiA9ZsY0azkY99XbJCwDDA==}
@@ -820,9 +814,6 @@ packages:
'@push.rocks/smartrequest@4.4.2': '@push.rocks/smartrequest@4.4.2':
resolution: {integrity: sha512-Om4y1Ce4YdSu8VoXREz2SgFz9pDxcFEm0+SC1YYa3RXd0AH2Mknaj/1XfvfMqojnK9L7N2z1fY4xX8tO1IwqFQ==} resolution: {integrity: sha512-Om4y1Ce4YdSu8VoXREz2SgFz9pDxcFEm0+SC1YYa3RXd0AH2Mknaj/1XfvfMqojnK9L7N2z1fY4xX8tO1IwqFQ==}
'@push.rocks/smartrouter@1.3.2':
resolution: {integrity: sha512-JtkxClN4CaHXMSeLDNvfWPwiVEPdEoQVSX2ee3gLgbXNO9dt9hvXdIhFrnFeLwyeA6M8nJdb9SqjrjZroYJsxw==}
'@push.rocks/smartrouter@1.3.3': '@push.rocks/smartrouter@1.3.3':
resolution: {integrity: sha512-1+xZEnWlhzqLWAaJ1zFNhQ0zgbfCWQl1DBT72LygLxTs+P0K8AwJKgqo/IX6CT55kGCFnPAZIYSbVJlGsgrB0w==} resolution: {integrity: sha512-1+xZEnWlhzqLWAaJ1zFNhQ0zgbfCWQl1DBT72LygLxTs+P0K8AwJKgqo/IX6CT55kGCFnPAZIYSbVJlGsgrB0w==}
@@ -847,9 +838,6 @@ packages:
'@push.rocks/smartspawn@3.0.3': '@push.rocks/smartspawn@3.0.3':
resolution: {integrity: sha512-DyrGPV69wwOiJgKkyruk5hS3UEGZ99xFAqBE9O2nM8VXCRLbbty3xt1Ug5Z092ZZmJYaaGMSnMw3ijyZJFCT0Q==} resolution: {integrity: sha512-DyrGPV69wwOiJgKkyruk5hS3UEGZ99xFAqBE9O2nM8VXCRLbbty3xt1Ug5Z092ZZmJYaaGMSnMw3ijyZJFCT0Q==}
'@push.rocks/smartstate@2.0.19':
resolution: {integrity: sha512-Rx2/2n8YaSBW6b4Ww+lYceq5dwkD+QzcnRwAjQDXlsEe8K+KU2T6revTZyf9PchBoC9pNFaAJofIZNebEGMzYA==}
'@push.rocks/smartstate@2.0.27': '@push.rocks/smartstate@2.0.27':
resolution: {integrity: sha512-q4UKir7GV3hakJWXQR4DoA4tUVwT5GRkJ/MtanHYF0wZLHfS19+nGmyO9y974zk3eT9hmy3+Lq5cKtU2W6+Y3w==} resolution: {integrity: sha512-q4UKir7GV3hakJWXQR4DoA4tUVwT5GRkJ/MtanHYF0wZLHfS19+nGmyO9y974zk3eT9hmy3+Lq5cKtU2W6+Y3w==}
@@ -3774,28 +3762,6 @@ snapshots:
'@push.rocks/smartdelay': 3.0.5 '@push.rocks/smartdelay': 3.0.5
broadcast-channel: 7.0.0 broadcast-channel: 7.0.0
'@design.estate/dees-domtools@2.1.1':
dependencies:
'@api.global/typedrequest': 3.1.10
'@design.estate/dees-comms': 1.0.27
'@push.rocks/lik': 6.2.2
'@push.rocks/smartdelay': 3.0.5
'@push.rocks/smartjson': 5.2.0
'@push.rocks/smartmarkdown': 3.0.3
'@push.rocks/smartpromise': 4.2.3
'@push.rocks/smartrouter': 1.3.2
'@push.rocks/smartrx': 3.0.10
'@push.rocks/smartstate': 2.0.19
'@push.rocks/smartstring': 4.0.15
'@push.rocks/smarturl': 3.1.0
'@push.rocks/webrequest': 3.0.37
'@push.rocks/websetup': 3.0.19
'@push.rocks/webstore': 2.0.20
lit: 3.3.1
sweet-scroll: 4.0.0
transitivePeerDependencies:
- supports-color
'@design.estate/dees-domtools@2.3.6': '@design.estate/dees-domtools@2.3.6':
dependencies: dependencies:
'@api.global/typedrequest': 3.1.10 '@api.global/typedrequest': 3.1.10
@@ -3822,15 +3788,6 @@ snapshots:
- supports-color - supports-color
- vue - vue
'@design.estate/dees-element@2.0.39':
dependencies:
'@design.estate/dees-domtools': 2.1.1
'@push.rocks/isounique': 1.0.5
'@push.rocks/smartrx': 3.0.10
lit: 3.3.1
transitivePeerDependencies:
- supports-color
'@design.estate/dees-element@2.1.3': '@design.estate/dees-element@2.1.3':
dependencies: dependencies:
'@design.estate/dees-domtools': 2.3.6 '@design.estate/dees-domtools': 2.3.6
@@ -4547,12 +4504,15 @@ snapshots:
'@push.rocks/smartntml@2.0.8': '@push.rocks/smartntml@2.0.8':
dependencies: dependencies:
'@design.estate/dees-element': 2.0.39 '@design.estate/dees-element': 2.1.3
'@happy-dom/global-registrator': 15.11.7 '@happy-dom/global-registrator': 15.11.7
'@push.rocks/smartpromise': 4.2.3 '@push.rocks/smartpromise': 4.2.3
fake-indexeddb: 6.0.0 fake-indexeddb: 6.0.0
transitivePeerDependencies: transitivePeerDependencies:
- '@nuxt/kit'
- react
- supports-color - supports-color
- vue
'@push.rocks/smartobject@1.0.12': '@push.rocks/smartobject@1.0.12':
dependencies: dependencies:
@@ -4598,12 +4558,6 @@ snapshots:
agentkeepalive: 4.6.0 agentkeepalive: 4.6.0
form-data: 4.0.5 form-data: 4.0.5
'@push.rocks/smartrouter@1.3.2':
dependencies:
'@push.rocks/lik': 6.2.2
'@push.rocks/smartrx': 3.0.10
path-to-regexp: 8.2.0
'@push.rocks/smartrouter@1.3.3': '@push.rocks/smartrouter@1.3.3':
dependencies: dependencies:
'@push.rocks/lik': 6.2.2 '@push.rocks/lik': 6.2.2
@@ -4677,15 +4631,6 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@push.rocks/smartstate@2.0.19':
dependencies:
'@push.rocks/isohash': 2.0.1
'@push.rocks/lik': 6.2.2
'@push.rocks/smartjson': 5.2.0
'@push.rocks/smartpromise': 4.2.3
'@push.rocks/smartrx': 3.0.10
'@push.rocks/webstore': 2.0.20
'@push.rocks/smartstate@2.0.27': '@push.rocks/smartstate@2.0.27':
dependencies: dependencies:
'@push.rocks/lik': 6.2.2 '@push.rocks/lik': 6.2.2

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@consent.software/catalog', name: '@consent.software/catalog',
version: '1.6.1', version: '2.0.0',
description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.' description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.'
} }

354
ts_web/elements/consentsoftware-cookieconsent.ts
View File

@@ -1,8 +1,13 @@
import * as shared from './shared.js'; import { cssManager, colors } from './shared.js';
import { LitElement, html, css, type TemplateResult } from 'lit'; import {
import { customElement } from 'lit/decorators.js'; DeesElement,
import { property } from 'lit/decorators/property.js'; customElement,
html,
css,
type TemplateResult,
property,
} from '@design.estate/dees-element';
import * as csInterfaces from '@consent.software/interfaces'; import * as csInterfaces from '@consent.software/interfaces';
import * as csWebclient from '@consent.software/webclient'; import * as csWebclient from '@consent.software/webclient';
@@ -15,212 +20,158 @@ declare global {
} }
@customElement('consentsoftware-cookieconsent') @customElement('consentsoftware-cookieconsent')
export class ConsentsoftwareCookieconsent extends LitElement { export class ConsentsoftwareCookieconsent extends DeesElement {
public static demo = () => html`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`; public static demo = () => html`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
public csWebclientInstance = new csWebclient.CsWebclient(); public csWebclientInstance = new csWebclient.CsWebclient();
public csWebclientRan = false; public csWebclientRan = false;
// Reflects the current theme ('light' or 'dark') public static styles = [
@property({ type: String, reflect: true }) cssManager.defaultStyles,
public accessor theme: 'light' | 'dark' = 'light'; css`
:host {
font-size: 14px;
user-select: none;
}
/** .pageOverlay {
* Define component styles with CSS variables that adjust based on theme. position: fixed;
* The default variables serve as baseline for the light theme. inset: 0;
* Theme-specific overrides modify these for dark mode. display: grid;
*/ align-items: center;
public static styles = css` justify-content: center;
:host { z-index: 1000;
font-family: ${shared.fontStack}; background: rgba(0, 0, 0, 0);
font-size: 14px; backdrop-filter: blur(0px);
user-select: none; transition: all 0.2s ease-out;
/* Shadcn-inspired Dark Theme (default) */ }
--background: hsl(0 0% 7%);
--foreground: hsl(0 0% 95%);
--muted: hsl(0 0% 15%);
--muted-foreground: hsl(0 0% 64%);
--border: hsl(0 0% 18%);
--input: hsl(0 0% 15%);
--primary: hsl(0 0% 98%);
--primary-foreground: hsl(0 0% 9%);
--secondary: hsl(0 0% 15%);
--secondary-foreground: hsl(0 0% 98%);
--accent: hsl(0 0% 15%);
--accent-foreground: hsl(0 0% 98%);
--ring: hsl(0 0% 30%);
--radius: 8px;
}
:host([theme='dark']) { .pageOverlay.shake {
--background: hsl(0 0% 7%); background: rgba(0, 0, 0, 0.6) !important;
--foreground: hsl(0 0% 95%); }
--muted: hsl(0 0% 15%);
--muted-foreground: hsl(0 0% 64%);
--border: hsl(0 0% 18%);
--input: hsl(0 0% 15%);
--primary: hsl(0 0% 98%);
--primary-foreground: hsl(0 0% 9%);
--secondary: hsl(0 0% 15%);
--secondary-foreground: hsl(0 0% 98%);
--accent: hsl(0 0% 15%);
--accent-foreground: hsl(0 0% 98%);
--ring: hsl(0 0% 30%);
}
:host([theme='light']) {
--background: hsl(0 0% 100%);
--foreground: hsl(0 0% 9%);
--muted: hsl(0 0% 96%);
--muted-foreground: hsl(0 0% 45%);
--border: hsl(0 0% 90%);
--input: hsl(0 0% 90%);
--primary: hsl(0 0% 9%);
--primary-foreground: hsl(0 0% 98%);
--secondary: hsl(0 0% 96%);
--secondary-foreground: hsl(0 0% 9%);
--accent: hsl(0 0% 96%);
--accent-foreground: hsl(0 0% 9%);
--ring: hsl(0 0% 64%);
}
.pageOverlay {
position: fixed;
inset: 0;
display: grid;
align-items: center;
justify-content: center;
z-index: 1000;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
transition: all 0.2s ease-out;
}
.pageOverlay.shake {
background: rgba(0, 0, 0, 0.6) !important;
}
.modalBox {
display: block;
color: var(--foreground);
background: var(--background);
box-shadow:
0 0 0 1px var(--border),
0 16px 70px rgba(0, 0, 0, 0.35);
position: relative;
border-radius: var(--radius);
max-width: 520px;
min-width: 320px;
box-sizing: border-box;
overflow: hidden;
will-change: transform;
transition: all 0.2s ease-out;
transform: scale(0.96);
opacity: 0;
}
@media (max-width: 560px) {
.modalBox { .modalBox {
max-width: 100%; display: block;
min-width: 100%; color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
height: 100vh; background: ${cssManager.bdTheme(colors.light.background, colors.dark.background)};
border-radius: 0; box-shadow:
0 0 0 1px ${cssManager.bdTheme(colors.light.border, colors.dark.border)},
0 16px 70px ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(0, 0, 0, 0.35)')};
position: relative;
border-radius: 8px;
max-width: 520px;
min-width: 320px;
box-sizing: border-box;
overflow: hidden;
will-change: transform;
transition: all 0.2s ease-out;
transform: scale(0.96);
opacity: 0;
} }
}
.modalBox.shake { @media (max-width: 560px) {
animation: shake 120ms 2 linear; .modalBox {
} max-width: 100%;
min-width: 100%;
height: 100vh;
border-radius: 0;
}
}
@keyframes shake { .modalBox.shake {
0% { transform: translateX(3px); } animation: shake 120ms 2 linear;
50% { transform: translateX(-3px); } }
100% { transform: translateX(0); }
}
:host([show='false']) { display: none; } @keyframes shake {
:host([show='true']) { display: block; } 0% { transform: translateX(3px); }
50% { transform: translateX(-3px); }
100% { transform: translateX(0); }
}
.content { :host([show='false']) { display: none; }
margin: auto; :host([show='true']) { display: block; }
}
.text-container { .content {
padding: 12px 16px; margin: auto;
font-size: 0.9em; }
line-height: 1.5;
color: var(--muted-foreground);
}
.text-container a { .text-container {
color: var(--foreground); padding: 12px 16px;
text-decoration: underline; font-size: 0.9em;
text-underline-offset: 2px; line-height: 1.5;
} color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
}
.text-container a:hover { .text-container a {
opacity: 0.8; color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
} text-decoration: underline;
text-underline-offset: 2px;
}
.button-container { .text-container a:hover {
padding: 12px 16px 16px; opacity: 0.8;
display: grid; }
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (max-width: 560px) {
.button-container { .button-container {
grid-template-columns: 1fr; padding: 12px 16px 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
} }
}
.consent-button { @media (max-width: 560px) {
border-radius: calc(var(--radius) - 2px); .button-container {
background: var(--secondary); grid-template-columns: 1fr;
border: 1px solid var(--border); }
padding: 8px 16px; }
font-size: 0.85em;
font-weight: 500;
text-align: center;
cursor: pointer;
transition: all 0.15s ease;
color: var(--secondary-foreground);
}
.consent-button:hover { .consent-button {
background: var(--accent); border-radius: 6px;
border-color: var(--ring); background: ${cssManager.bdTheme(colors.light.secondary, colors.dark.secondary)};
} border: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
padding: 8px 16px;
font-size: 0.85em;
font-weight: 500;
text-align: center;
cursor: pointer;
transition: all 0.15s ease;
color: ${cssManager.bdTheme(colors.light.secondaryForeground, colors.dark.secondaryForeground)};
}
.consent-button:last-child { .consent-button:hover {
background: var(--primary); background: ${cssManager.bdTheme(colors.light.accent, colors.dark.accent)};
color: var(--primary-foreground); border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
border-color: var(--primary); }
}
.consent-button:last-child:hover { .consent-button:last-child {
opacity: 0.9; background: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
} color: ${cssManager.bdTheme(colors.light.primaryForeground, colors.dark.primaryForeground)};
border-color: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
}
.info-container { .consent-button:last-child:hover {
text-align: center; opacity: 0.9;
padding: 10px 16px; }
background: var(--muted);
border-top: 1px solid var(--border);
font-size: 0.75em;
color: var(--muted-foreground);
}
.info-container a { .info-container {
color: var(--foreground); text-align: center;
text-decoration: none; padding: 10px 16px;
} background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
border-top: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
font-size: 0.75em;
color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
}
.info-container a:hover { .info-container a {
text-decoration: underline; color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
} text-decoration: none;
`; }
.info-container a:hover {
text-decoration: underline;
}
`,
];
constructor() { constructor() {
super(); super();
@@ -278,18 +229,17 @@ export class ConsentsoftwareCookieconsent extends LitElement {
/** /**
* Lifecycle method called when the element is connected to the DOM. * Lifecycle method called when the element is connected to the DOM.
* It sets up the theme and displays the consent banner if no cookie levels are set. * Displays the consent banner if no cookie levels are set.
*/ */
public async connectedCallback() { public async connectedCallback() {
super.connectedCallback(); await super.connectedCallback();
this.updateTheme(); // Initialize theme based on system preference
const cookieLevel = await this.csWebclientInstance.getCookieLevels(); const cookieLevel = await this.csWebclientInstance.getCookieLevels();
if (!cookieLevel) { if (!cookieLevel) {
// Show consent banner if cookie levels haven't been set yet // Show consent banner if cookie levels haven't been set yet
this.setAttribute('show', 'true'); this.setAttribute('show', 'true');
requestAnimationFrame(async () => { requestAnimationFrame(async () => {
await this.updated(); await this.updateComplete;
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay'); const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
if (pageOverlay) { if (pageOverlay) {
// Apply subtle backdrop blur when modal appears // Apply subtle backdrop blur when modal appears
@@ -310,14 +260,7 @@ export class ConsentsoftwareCookieconsent extends LitElement {
} }
public async firstUpdated() { public async firstUpdated() {
// Placeholder for any logic needed after first render // Run consent scripts if levels are already set
}
/**
* Called after updates. Logs banner height and runs consent scripts if necessary.
*/
public async updated() {
console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels(); const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
if (!this.csWebclientRan && acceptedCookieLevels) { if (!this.csWebclientRan && acceptedCookieLevels) {
this.csWebclientRan = true; this.csWebclientRan = true;
@@ -327,7 +270,6 @@ export class ConsentsoftwareCookieconsent extends LitElement {
/** /**
* Handles consent button clicks, sets cookie levels, and hides the banner. * Handles consent button clicks, sets cookie levels, and hides the banner.
* Uses theme variables for styling transitions.
*/ */
private async handleConsentButtonClick( private async handleConsentButtonClick(
event: MouseEvent, event: MouseEvent,
@@ -349,7 +291,12 @@ export class ConsentsoftwareCookieconsent extends LitElement {
await this.csWebclientInstance.setCookieLevels(levelsArg); await this.csWebclientInstance.setCookieLevels(levelsArg);
await delayFor(300); await delayFor(300);
this.setAttribute('show', 'false'); // Hide the consent banner this.setAttribute('show', 'false'); // Hide the consent banner
this.updated(); // Trigger any post-consent actions
// Run consent scripts
if (!this.csWebclientRan) {
this.csWebclientRan = true;
await this.csWebclientInstance.getAndRunConsentTuples();
}
} }
/** /**
@@ -369,19 +316,4 @@ export class ConsentsoftwareCookieconsent extends LitElement {
} }
} }
} }
/**
* Dynamically switches the theme between light and dark.
* Listens for system theme changes to update the component's theme.
*/
private updateTheme() {
// Check the initial system preference for dark mode
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
this.theme = prefersDark ? 'dark' : 'light';
// Listen for changes in the system color scheme preference
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
this.theme = e.matches ? 'dark' : 'light';
});
}
} }

64
ts_web/elements/consentsoftware-header.ts
View File

@@ -1,40 +1,42 @@
import * as shared from './shared.js'; import { cssManager, colors } from './shared.js';
import { LitElement, html, css, type TemplateResult } from 'lit'; import {
import { customElement } from 'lit/decorators.js'; DeesElement,
import { property } from 'lit/decorators/property.js'; customElement,
html,
css,
type TemplateResult,
} from '@design.estate/dees-element';
@customElement('consentsoftware-header') @customElement('consentsoftware-header')
export class ConsentsoftwareHeader extends LitElement { export class ConsentsoftwareHeader extends DeesElement {
public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`; public static demo = () => html`<consentsoftware-header></consentsoftware-header>`;
public static styles = css` public static styles = [
:host { cssManager.defaultStyles,
display: block; css`
padding: 14px 16px; :host {
font-family: ${shared.fontStack}; display: block;
border-bottom: 1px solid var(--border, hsl(0 0% 18%)); padding: 14px 16px;
} border-bottom: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
}
.heading { .heading {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 0.95em; font-size: 0.95em;
font-weight: 600; font-weight: 600;
color: var(--foreground, hsl(0 0% 95%)); color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
} }
.icon { .icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
opacity: 0.7; opacity: 0.7;
} }
`; `,
];
constructor() {
super();
}
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`

92
ts_web/elements/consentsoftware-mainselection.ts
View File

@@ -1,9 +1,16 @@
import { LitElement, html, css, type TemplateResult } from 'lit'; import { cssManager, colors } from './shared.js';
import { customElement } from 'lit/decorators.js';
import { property } from 'lit/decorators/property.js'; import {
DeesElement,
customElement,
html,
css,
type TemplateResult,
property,
} from '@design.estate/dees-element';
@customElement('consentsoftware-mainselection') @customElement('consentsoftware-mainselection')
export class ConsentsoftwareMainSelection extends LitElement { export class ConsentsoftwareMainSelection extends DeesElement {
public static demo = () => html`<consentsoftware-mainselection></consentsoftware-mainselection>`; public static demo = () => html`<consentsoftware-mainselection></consentsoftware-mainselection>`;
@property({ type: Boolean }) @property({ type: Boolean })
@@ -12,55 +19,54 @@ export class ConsentsoftwareMainSelection extends LitElement {
@property({ type: Boolean }) @property({ type: Boolean })
public accessor selected = false; public accessor selected = false;
public static styles = css` public static styles = [
:host { cssManager.defaultStyles,
display: block; css`
position: relative; :host {
} display: block;
position: relative;
}
.maincontainer {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 8px 0;
}
@media (max-width: 560px) {
.maincontainer { .maincontainer {
grid-template-columns: repeat(2, 1fr); display: grid;
gap: 4px; grid-template-columns: repeat(4, 1fr);
padding: 8px 0;
} }
}
.itemBox { @media (max-width: 560px) {
padding: 12px 8px; .maincontainer {
text-align: center; grid-template-columns: repeat(2, 1fr);
border-right: 1px solid var(--border, hsl(0 0% 18%)); gap: 4px;
} }
}
.itemBox:last-child {
border-right: none;
}
@media (max-width: 560px) {
.itemBox { .itemBox {
padding: 10px 8px; padding: 12px 8px;
text-align: center;
border-right: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
}
.itemBox:last-child {
border-right: none; border-right: none;
border-bottom: 1px solid var(--border, hsl(0 0% 18%));
} }
.itemBox:nth-child(odd) { @media (max-width: 560px) {
border-right: 1px solid var(--border, hsl(0 0% 18%)); .itemBox {
} padding: 10px 8px;
border-right: none;
border-bottom: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
}
.itemBox:nth-last-child(-n+2) { .itemBox:nth-child(odd) {
border-bottom: none; border-right: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
} }
}
`;
constructor() { .itemBox:nth-last-child(-n+2) {
super(); border-bottom: none;
} }
}
`,
];
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
@@ -81,5 +87,5 @@ export class ConsentsoftwareMainSelection extends LitElement {
`; `;
} }
public async getResults(mouseEvent) {} public async getResults() {}
} }

105
ts_web/elements/consentsoftware-tabs.ts
View File

@@ -1,59 +1,64 @@
import { LitElement, html, css, type TemplateResult } from 'lit'; import { cssManager, colors } from './shared.js';
import { customElement } from 'lit/decorators.js';
import { property } from 'lit/decorators/property.js'; import {
DeesElement,
customElement,
html,
css,
type TemplateResult,
} from '@design.estate/dees-element';
@customElement('consentsoftware-tabs') @customElement('consentsoftware-tabs')
export class ConsentsoftwareTabs extends LitElement { export class ConsentsoftwareTabs extends DeesElement {
public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`; public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
public static styles = css` public static styles = [
:host { cssManager.defaultStyles,
display: block; css`
position: relative; :host {
background: var(--muted, hsl(0 0% 15%)); display: block;
} position: relative;
background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
.tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.tabs .tab {
text-align: center;
padding: 8px 0;
font-size: 0.8em;
font-weight: 500;
color: var(--muted-foreground, hsl(0 0% 64%));
cursor: pointer;
transition: color 0.15s ease;
}
.tabs .tab:hover {
color: var(--foreground, hsl(0 0% 95%));
}
@media (max-width: 560px) {
.tabs .tab {
font-size: 0.75em;
padding: 6px 0;
} }
}
.selector { .tabs {
position: absolute; display: grid;
width: calc(100% / 3); grid-template-columns: repeat(3, 1fr);
height: 2px; }
left: 0;
bottom: 0;
background: var(--foreground, hsl(0 0% 95%));
transition: all 0.2s ease-out;
border-radius: 1px;
}
`;
constructor() { .tabs .tab {
super(); text-align: center;
} padding: 8px 0;
font-size: 0.8em;
font-weight: 500;
color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
cursor: pointer;
transition: color 0.15s ease;
}
.tabs .tab:hover {
color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
}
@media (max-width: 560px) {
.tabs .tab {
font-size: 0.75em;
padding: 6px 0;
}
}
.selector {
position: absolute;
width: calc(100% / 3);
height: 2px;
left: 0;
bottom: 0;
background: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
transition: all 0.2s ease-out;
border-radius: 1px;
}
`,
];
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
@@ -66,7 +71,7 @@ export class ConsentsoftwareTabs extends LitElement {
`; `;
} }
public async handleClick(mouseEvent) { public async handleClick(mouseEvent: MouseEvent) {
const target = mouseEvent.target as HTMLElement; const target = mouseEvent.target as HTMLElement;
const tab: HTMLDivElement = target.closest('.tab'); const tab: HTMLDivElement = target.closest('.tab');
if (tab) { if (tab) {

170
ts_web/elements/consentsoftware-toggle.ts
View File

@@ -1,10 +1,18 @@
import { LitElement, html, css, type TemplateResult } from 'lit'; import { cssManager, colors } from './shared.js';
import { customElement } from 'lit/decorators.js';
import { property } from 'lit/decorators/property.js'; import {
DeesElement,
customElement,
html,
css,
type TemplateResult,
property,
} from '@design.estate/dees-element';
import { delayFor } from '@push.rocks/smartdelay'; import { delayFor } from '@push.rocks/smartdelay';
@customElement('consentsoftware-toggle') @customElement('consentsoftware-toggle')
export class ConsentsoftwareToggle extends LitElement { export class ConsentsoftwareToggle extends DeesElement {
@property({ type: Boolean }) @property({ type: Boolean })
public accessor required = false; public accessor required = false;
@@ -25,96 +33,93 @@ export class ConsentsoftwareToggle extends LitElement {
private hasDragged = false; private hasDragged = false;
private startX = 0; private startX = 0;
// Toggle dimensions // Toggle dimensions (with border-box, 1px border reduces inner by 2px)
private readonly trackWidth = 36; private readonly trackWidth = 36; // outer width
private readonly trackHeight = 20; private readonly trackHeight = 20; // outer height
private readonly knobSize = 14; private readonly knobSize = 14;
private readonly padding = 3; // padding from track edge to knob private readonly padding = 2; // padding from inner edge to knob
private readonly maxTravel = 16; // trackWidth - knobSize - (2 * padding) = 36 - 14 - 6 = 16 private readonly maxTravel = 16; // (36 - 2) - 14 - (2 * 2) = 34 - 14 - 4 = 16
public static styles = css` public static styles = [
:host { cssManager.defaultStyles,
display: block; css`
position: relative; :host {
} display: block;
position: relative;
}
.label { .label {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 0.8em; font-size: 0.8em;
font-weight: 500; font-weight: 500;
color: var(--muted-foreground, hsl(0 0% 64%)); color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
} }
.toggle { .toggle {
user-select: none; user-select: none;
} }
.toggleKnobArea { .toggleKnobArea {
position: relative; position: relative;
margin: auto; margin: auto;
height: 20px; height: 20px;
width: 36px; width: 36px;
border-radius: 10px; border-radius: 10px;
background: var(--input, hsl(0 0% 15%)); background: ${cssManager.bdTheme(colors.light.input, colors.dark.input)};
border: 1px solid var(--border, hsl(0 0% 18%)); border: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
overflow: hidden; overflow: hidden;
transition: all 0.15s ease; transition: all 0.15s ease;
cursor: pointer; cursor: pointer;
} }
.toggleKnobArea:hover { .toggleKnobArea:hover {
border-color: var(--ring, hsl(0 0% 30%)); border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
} }
:host([selected]) .toggleKnobArea { :host([selected]) .toggleKnobArea {
background: var(--primary, hsl(0 0% 98%)); background: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
border-color: var(--primary, hsl(0 0% 98%)); border-color: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
} }
.toggleKnobMover { .toggleKnobMover {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.toggleKnobInner { .toggleKnobInner {
position: absolute; position: absolute;
top: 3px; top: 2px;
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 7px; border-radius: 7px;
background: var(--muted-foreground, hsl(0 0% 64%)); background: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
transition: left 0.15s ease, background 0.15s ease; transition: left 0.15s ease, background 0.15s ease;
touch-action: none; touch-action: none;
} }
.toggleKnobInner.dragging { .toggleKnobInner.dragging {
transition: background 0.15s ease; transition: background 0.15s ease;
} }
:host([selected]) .toggleKnobInner { :host([selected]) .toggleKnobInner {
background: var(--primary-foreground, hsl(0 0% 9%)); background: ${cssManager.bdTheme(colors.light.primaryForeground, colors.dark.primaryForeground)};
} }
:host([required]) .toggleKnobArea { :host([required]) .toggleKnobArea {
background: var(--muted, hsl(0 0% 15%)); cursor: not-allowed;
border-color: var(--border, hsl(0 0% 18%)); }
opacity: 0.6;
cursor: not-allowed;
}
:host([required]) .toggleKnobInner { :host([required][selected]) .toggleKnobArea {
background: var(--muted-foreground, hsl(0 0% 45%)); background: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
} border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
}
:host([required][selected]) .toggleKnobArea { :host([required][selected]) .toggleKnobInner {
background: var(--muted-foreground, hsl(0 0% 45%)); background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
} }
`; `,
];
constructor() {
super();
}
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
@@ -141,7 +146,8 @@ export class ConsentsoftwareToggle extends LitElement {
/** /**
* If required = true on first render, auto-select and set the knob to the right. * If required = true on first render, auto-select and set the knob to the right.
*/ */
public async firstUpdated() { public async firstUpdated(_changedProperties: Map<PropertyKey, unknown>) {
await super.firstUpdated(_changedProperties);
if (this.required) { if (this.required) {
this.selected = true; this.selected = true;
this.currentX = this.maxTravel; this.currentX = this.maxTravel;
@@ -199,7 +205,7 @@ export class ConsentsoftwareToggle extends LitElement {
// Start dragging // Start dragging
this.isDragging = true; this.isDragging = true;
// The difference between the pointer’s X and the knob’s current position // The difference between the pointer's X and the knob's current position
this.startX = event.clientX - this.currentX; this.startX = event.clientX - this.currentX;
// capture pointer so we keep receiving pointermove/pointerup // capture pointer so we keep receiving pointermove/pointerup

38
ts_web/elements/shared.ts
View File

@@ -1,3 +1,39 @@
import { unsafeCSS } from 'lit' import { unsafeCSS, cssManager } from '@design.estate/dees-element';
export { cssManager };
export const fontStack = unsafeCSS('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'); export const fontStack = unsafeCSS('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
// Shadcn-inspired color palette
export const colors = {
light: {
background: '#ffffff',
foreground: '#09090b',
muted: '#f4f4f5',
mutedForeground: '#71717a',
border: '#e4e4e7',
input: '#e4e4e7',
primary: '#18181b',
primaryForeground: '#fafafa',
secondary: '#f4f4f5',
secondaryForeground: '#18181b',
accent: '#f4f4f5',
accentForeground: '#18181b',
ring: '#a1a1aa',
},
dark: {
background: '#09090b',
foreground: '#fafafa',
muted: '#27272a',
mutedForeground: '#a1a1aa',
border: '#27272a',
input: '#27272a',
primary: '#fafafa',
primaryForeground: '#18181b',
secondary: '#27272a',
secondaryForeground: '#fafafa',
accent: '#27272a',
accentForeground: '#fafafa',
ring: '#52525b',
},
};

2
ts_web/pages/page1.ts
View File

@@ -1,3 +1,3 @@
import { html } from 'lit'; import { html } from '@design.estate/dees-element';
export const page1 = () => html``; export const page1 = () => html``;