Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8e325214f8 | |||
| 2c2f843a6e | |||
| 777acd06a5 | |||
| 0d90a7ae7f | |||
| 0b366b360d | |||
| 8a26378689 | |||
| 1e74560aca |
28
changelog.md
28
changelog.md
@@ -1,5 +1,33 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-11-30 - 2.0.1 - fix(consentsoftware-cookieconsent)
|
||||
Refine cookie consent modal shake behaviour and cleanup imports
|
||||
|
||||
- Shorten shake animation delay from 2000ms to 300ms for snappier feedback
|
||||
- Limit shake effect to the modal box only; stop toggling the page overlay to avoid unwanted overlay visual changes
|
||||
- Remove unused 'property' import from @design.estate/dees-element
|
||||
- Introduce an isMobile flag to detect mobile layout in connectedCallback
|
||||
- Simplify DOM queries and use tighter type assertions when manipulating modal elements
|
||||
|
||||
## 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)
|
||||
Update TypeScript config and build tooling; use accessor for Lit properties; bump deps and adjust package metadata
|
||||
|
||||
- ts_web/tsconfig.json: target -> ES2022, module -> ES2022, moduleResolution -> bundler, lib updated to ES2022/DOM/DOM.Iterable
|
||||
- tsconfig.json (root): target -> ES2022, module -> NodeNext, moduleResolution -> NodeNext
|
||||
- Component properties migrated to use the TypeScript 'accessor' modifier (consentsoftware-cookieconsent, consentsoftware-mainselection, consentsoftware-toggle)
|
||||
- Bumped runtime and dev dependencies: lit -> ^3.3.1; upgrades to @design.estate/dees-wcctools, @git.zone/tsbuild, @git.zone/tsbundle, @git.zone/tswatch
|
||||
- Package metadata: author updated to Task Venture Capital GmbH and test script changed to use pnpm
|
||||
|
||||
## 2025-01-22 - 1.6.0 - feat(elements)
|
||||
Enhance theme handling and CSS organization for consent component
|
||||
|
||||
|
||||
18
package.json
18
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@consent.software/catalog",
|
||||
"version": "1.6.0",
|
||||
"version": "2.0.1",
|
||||
"private": false,
|
||||
"description": "A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.",
|
||||
"exports": {
|
||||
@@ -8,23 +8,23 @@
|
||||
},
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "npm run build",
|
||||
"test": "pnpm run build",
|
||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
|
||||
"watch": "tswatch element"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"author": "Task Venture Capital GmbH",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@consent.software/interfaces": "^1.0.14",
|
||||
"@consent.software/webclient": "^1.1.0",
|
||||
"@push.rocks/smartdelay": "^3.0.5",
|
||||
"lit": "^3.2.1"
|
||||
"@design.estate/dees-element": "^2.1.3",
|
||||
"@push.rocks/smartdelay": "^3.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@design.estate/dees-wcctools": "^1.0.90",
|
||||
"@git.zone/tsbuild": "^2.2.0",
|
||||
"@git.zone/tsbundle": "^2.1.0",
|
||||
"@git.zone/tswatch": "^2.0.37",
|
||||
"@design.estate/dees-wcctools": "^1.2.1",
|
||||
"@git.zone/tsbuild": "^3.1.2",
|
||||
"@git.zone/tsbundle": "^2.6.2",
|
||||
"@git.zone/tswatch": "^2.2.1",
|
||||
"@push.rocks/projectinfo": "^5.0.2"
|
||||
},
|
||||
"files": [
|
||||
|
||||
2180
pnpm-lock.yaml
generated
2180
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
259
readme.md
259
readme.md
@@ -1,138 +1,207 @@
|
||||
# @consent.software_private/catalog
|
||||
# @consent.software/catalog
|
||||
|
||||
Webcomponents for consent.software widget.
|
||||
A sleek, modern library of web components for seamless consent management integration. Built with Lit and designed for GDPR/CCPA compliance out of the box.
|
||||
|
||||
## Install
|
||||
## Issue Reporting and Security
|
||||
|
||||
To install this module, you need to have [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed on your machine. You can then run the following command in your terminal to add the module to your project:
|
||||
For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
|
||||
|
||||
```shell
|
||||
npm install @consent.software_private/catalog
|
||||
## Features
|
||||
|
||||
🍪 **Cookie Consent Modal** - Beautiful, responsive consent dialog with light/dark theme support
|
||||
🎛️ **Interactive Toggles** - Draggable toggle switches with smooth animations
|
||||
📱 **Mobile-First Design** - Fully responsive across all device sizes
|
||||
🎨 **Theme-Aware** - Automatically detects system light/dark mode preference
|
||||
🔒 **Privacy-First** - Integrates with consent.software backend for compliant consent tracking
|
||||
⚡ **Zero Config** - Drop-in components that just work
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install @consent.software/catalog
|
||||
# or
|
||||
pnpm add @consent.software/catalog
|
||||
```
|
||||
|
||||
Ensure you have ESM support enabled in your TypeScript configuration, as this package uses ES module syntax.
|
||||
## Quick Start
|
||||
|
||||
## Usage
|
||||
|
||||
The `@consent.software_private/catalog` module offers a set of web components to integrate consent management capabilities into your web application. These components leverage modern browser APIs and employ a system for cookie management that aligns with regulatory requirements.
|
||||
|
||||
### Initial Setup
|
||||
|
||||
First, import the necessary modules and set up your project to use the web components provided:
|
||||
Import the components and add the consent banner to your page:
|
||||
|
||||
```typescript
|
||||
import '@consent.software_private/catalog';
|
||||
import '@consent.software/catalog';
|
||||
|
||||
// That's it! Add the component to your HTML
|
||||
```
|
||||
|
||||
Ensure this import statement is included in your main JavaScript/TypeScript file where you want to utilize the consent management web components. It is vital to transpile with TypeScript compiler settings that support ES modules.
|
||||
|
||||
### Building a Consent Modal
|
||||
|
||||
A primary feature of this module is the `consentsoftware-cookieconsent` component. This component can be embedded into your application to allow users to select their preferred cookie levels.
|
||||
|
||||
#### Setting Up the Environment
|
||||
|
||||
Before creating instances of the components, make sure your project environment is ready. Setup the DOM tools and any associated dependencies:
|
||||
|
||||
```typescript
|
||||
import { domtools } from '@design.estate/dees-domtools';
|
||||
|
||||
domtools.elementBasic.setup();
|
||||
```
|
||||
|
||||
#### Using the Consentsoftware-Cookieconsent Component
|
||||
|
||||
Here's how you can include the `consentsoftware-cookieconsent` component in your application:
|
||||
|
||||
```typescript
|
||||
import { html, render } from 'lit-html';
|
||||
|
||||
const template = html`
|
||||
```html
|
||||
<consentsoftware-cookieconsent></consentsoftware-cookieconsent>
|
||||
`;
|
||||
|
||||
render(template, document.body);
|
||||
```
|
||||
|
||||
This will add the consent banner to the bottom of the page, providing users options to set their preferences.
|
||||
The consent banner automatically:
|
||||
- Shows on first visit when no consent preferences are stored
|
||||
- Hides after user makes a selection
|
||||
- Respects system dark/light mode
|
||||
- Stores preferences via the consent.software backend
|
||||
|
||||
#### Customizing the Component
|
||||
## Components
|
||||
|
||||
The `consentsoftware-cookieconsent` component allows you to customize its design via CSS properties. Leverage light and dark themes through the CSS manager used in styling attributes:
|
||||
### `<consentsoftware-cookieconsent>`
|
||||
|
||||
The main consent modal component. Provides a full-screen overlay with cookie preference options.
|
||||
|
||||
```html
|
||||
<consentsoftware-cookieconsent></consentsoftware-cookieconsent>
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Three-button interface: Deny, Accept Selection, Accept All
|
||||
- Four cookie categories: Required, Preferences, Statistics, Marketing
|
||||
- Animated modal with backdrop blur
|
||||
- Shake feedback when clicking outside the modal
|
||||
- Automatic theme detection (light/dark)
|
||||
|
||||
### `<consentsoftware-toggle>`
|
||||
|
||||
A draggable toggle switch component with touch support.
|
||||
|
||||
```html
|
||||
<consentsoftware-toggle>Label Text</consentsoftware-toggle>
|
||||
<consentsoftware-toggle required>Required</consentsoftware-toggle>
|
||||
```
|
||||
|
||||
**Properties:**
|
||||
- `required` (boolean) - When true, toggle is locked in the "on" position
|
||||
- `selected` (boolean) - Current toggle state
|
||||
|
||||
**Events:**
|
||||
- `toggle` - Fired when state changes, includes `{ selected: boolean }` in detail
|
||||
|
||||
### `<consentsoftware-tabs>`
|
||||
|
||||
Tab navigation component with animated indicator.
|
||||
|
||||
```html
|
||||
<consentsoftware-tabs></consentsoftware-tabs>
|
||||
```
|
||||
|
||||
Displays three tabs: Consent, Details, and Cookie Policy.
|
||||
|
||||
### `<consentsoftware-header>`
|
||||
|
||||
Simple header component for the consent modal.
|
||||
|
||||
```html
|
||||
<consentsoftware-header></consentsoftware-header>
|
||||
```
|
||||
|
||||
### `<consentsoftware-mainselection>`
|
||||
|
||||
Grid layout containing toggle switches for each cookie category.
|
||||
|
||||
```html
|
||||
<consentsoftware-mainselection></consentsoftware-mainselection>
|
||||
```
|
||||
|
||||
## Backend Integration
|
||||
|
||||
This catalog integrates with the `@consent.software/webclient` package for backend communication:
|
||||
|
||||
```typescript
|
||||
const styles = `
|
||||
:host {
|
||||
--cookieconsent-height: 70px;
|
||||
--cookieconsent-background: #222;
|
||||
--cookieconsent-text-color: #fff;
|
||||
import { CsWebclient } from '@consent.software/webclient';
|
||||
|
||||
const client = new CsWebclient();
|
||||
|
||||
// Check current consent levels
|
||||
const levels = await client.getCookieLevels();
|
||||
if (!levels) {
|
||||
// Show consent dialog
|
||||
}
|
||||
`;
|
||||
|
||||
// Set consent levels programmatically
|
||||
await client.setCookieLevels(['functional', 'analytics']);
|
||||
|
||||
// Run consent-dependent scripts
|
||||
await client.getAndRunConsentTuples();
|
||||
```
|
||||
|
||||
Apply these custom styles to modify the appearance to match your site's design language.
|
||||
## Styling & Theming
|
||||
|
||||
#### Handling User Interactions
|
||||
The components use CSS custom properties for easy theming:
|
||||
|
||||
The component is interactive, responding to user actions to set cookie levels. Here’s how the interaction flow works:
|
||||
```css
|
||||
consentsoftware-cookieconsent {
|
||||
/* Text and colors */
|
||||
--text-color: #333;
|
||||
--background-color: #eeeeee;
|
||||
--accent-color: #333333;
|
||||
|
||||
1. **User Interaction**: Users click one of the consent buttons (e.g., "Functional Cookies").
|
||||
2. **Handling Consent Levels**: The component's `setLevel` method is invoked, updating the user's cookie preferences, e.g.:
|
||||
/* Buttons */
|
||||
--button-bg: #ffffff;
|
||||
--button-hover-bg: #f2f2f2;
|
||||
|
||||
```typescript
|
||||
private async setLevel(event: MouseEvent, levelsArg: Array<TCookieLevel>) {
|
||||
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
||||
// Adjust styling and visibility
|
||||
this.setAttribute('gotIt', 'true');
|
||||
await delayFor(300);
|
||||
this.setAttribute('show', 'false');
|
||||
// Update other business logic based on consent levels
|
||||
/* Links */
|
||||
--link-color: #333;
|
||||
--icon-color: #4496f5;
|
||||
|
||||
/* Modal */
|
||||
--modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
||||
--info-bg: rgba(0, 0, 0, 0.1);
|
||||
--info-text: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
```
|
||||
|
||||
The system remembers user choices using a backend managed by the `consent.software` infrastructure.
|
||||
The component automatically switches to dark theme variables when `theme="dark"` is set or when the system prefers dark mode.
|
||||
|
||||
### Integrating with Your Backend
|
||||
## Cookie Levels
|
||||
|
||||
For full functionality, the component interacts with a backend to manage user consent states. Using `@consent.software/webclient`, you can query the user's current consent levels, perform updates, and verify whether consent has been previously granted:
|
||||
The consent system uses three user-selectable levels plus a required baseline:
|
||||
|
||||
```typescript
|
||||
const webclientInstance = new CsWebclient();
|
||||
const cookieLevels = await webclientInstance.getCookieLevels();
|
||||
| Level | Description |
|
||||
|-------|-------------|
|
||||
| `functional` | Required cookies for site operation (always enabled) |
|
||||
| `preferences` | User preference cookies |
|
||||
| `analytics` | Statistics and analytics tracking |
|
||||
| `marketing` | Marketing and advertising cookies |
|
||||
|
||||
if (!cookieLevels) {
|
||||
// Show consent dialog if no consent levels are set
|
||||
document.querySelector('consentsoftware-cookieconsent').show = true;
|
||||
} else {
|
||||
// Apply the consent settings to your analytics, advertisements, etc.
|
||||
applyConsentSettings(cookieLevels);
|
||||
}
|
||||
## Browser Support
|
||||
|
||||
- Chrome (last 2 versions)
|
||||
- Firefox (last 2 versions)
|
||||
- Safari (last 2 versions)
|
||||
- Edge (last 2 versions)
|
||||
|
||||
Built with modern ES modules and requires browsers with native Custom Elements v1 support.
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
pnpm install
|
||||
|
||||
# Build the project
|
||||
pnpm run build
|
||||
|
||||
# Watch mode for development
|
||||
pnpm run watch
|
||||
```
|
||||
|
||||
### Advanced Considerations
|
||||
## License and Legal Information
|
||||
|
||||
#### Responsive Design
|
||||
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
|
||||
|
||||
The component is responsive, optimized for various screen sizes using a grid layout. Ensure your main HTML elements are responsive to accommodate the consent bar.
|
||||
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
|
||||
|
||||
#### Accessibility and Compliance
|
||||
### Trademarks
|
||||
|
||||
Ensure your application properly adheres to legal and accessibility standards by aligning with the consent management system's features. This often involves using correct semantics, polyfills for custom elements, and thorough testing on different devices and browsers.
|
||||
This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.
|
||||
|
||||
#### Managing State Across Sessions
|
||||
Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.
|
||||
|
||||
Store user's consent preferences beyond the session using either localStorage, cookies, or server-side sessions. Adjust the component’s connectedCallback and updated lifecycle methods to fetch and apply these stored settings.
|
||||
### Company Information
|
||||
|
||||
Proper handling ensures a seamless user experience, helping companies comply with international privacy laws like GDPR.
|
||||
Task Venture Capital GmbH
|
||||
Registered at District Court Bremen HRB 35230 HB, Germany
|
||||
|
||||
### Integration and Testing
|
||||
For any legal inquiries or further information, please contact us via email at hello@task.vc.
|
||||
|
||||
Test extensively in your development environment, ensure correct rendering, and simulate various user interactions to gain confidence in production-level functionality. Automated testing might include:
|
||||
|
||||
- Unit tests for lifecycle behavior using testing libraries such as Mocha or Jest.
|
||||
- Integration trials ensuring the component plays well with surrounding UI elements.
|
||||
|
||||
### Conclusion
|
||||
|
||||
With these guidelines, developers can integrate, customize, and extend the consent management capabilities within their applications using `@consent.software_private/catalog`. Adapt the styling, maximize UX, and ensure regulatory compliance for a robust implementation. Mastery of the component enables seamless user consent handling and enhances your app's governance credentials.
|
||||
undefined
|
||||
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@consent.software/catalog',
|
||||
version: '1.6.0',
|
||||
version: '2.0.1',
|
||||
description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.'
|
||||
}
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
import * as shared from './shared.js';
|
||||
import { cssManager, colors } 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 {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as csInterfaces from '@consent.software/interfaces';
|
||||
import * as csWebclient from '@consent.software/webclient';
|
||||
@@ -15,215 +19,191 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement('consentsoftware-cookieconsent')
|
||||
export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
export class ConsentsoftwareCookieconsent extends DeesElement {
|
||||
public static demo = () => html`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
|
||||
|
||||
public csWebclientInstance = new csWebclient.CsWebclient();
|
||||
public csWebclientRan = false;
|
||||
private isMobile = false;
|
||||
|
||||
// Reflects the current theme ('light' or 'dark')
|
||||
@property({ type: String, reflect: true })
|
||||
public theme: 'light' | 'dark' = 'light';
|
||||
|
||||
/**
|
||||
* Define component styles with CSS variables that adjust based on theme.
|
||||
* The default variables serve as baseline for the light theme.
|
||||
* Theme-specific overrides modify these for dark mode.
|
||||
*/
|
||||
public static styles = css`
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
font-family: ${shared.fontStack};
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
/* Default variables for Light Theme */
|
||||
--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;
|
||||
/* Additional variables for modal and info container styling */
|
||||
--info-bg: rgba(0, 0, 0, 0.1);
|
||||
--info-text: rgba(255, 255, 255, 0.5);
|
||||
--modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Dark Theme Overrides:
|
||||
When theme attribute is 'dark', override variables accordingly. */
|
||||
: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;
|
||||
--info-bg: rgba(0, 0, 0, 0.1);
|
||||
--info-text: rgba(255, 255, 255, 0.5);
|
||||
--modal-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* Light Theme Overrides:
|
||||
Explicit light theme settings, currently matching defaults.
|
||||
Can be customized independently if desired. */
|
||||
: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;
|
||||
--info-bg: rgba(0, 0, 0, 0.1);
|
||||
--info-text: rgba(0, 0, 0, 0.5);
|
||||
--modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Overlay covering the page behind the modal */
|
||||
.pageOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000; /* Ensures the overlay is on top of other elements */
|
||||
background: rgba(255, 255, 255, 0);
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
backdrop-filter: blur(0px);
|
||||
transition: all 0.2s;
|
||||
transition: background 0.3s ease, backdrop-filter 0.3s ease;
|
||||
}
|
||||
|
||||
/* Shake animation for overlay when clicked */
|
||||
.pageOverlay.shake {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
background: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
/* Modal box styling using theme variables for colors and shadows */
|
||||
.modalBox {
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
background: var(--background-color);
|
||||
box-shadow: var(--modal-box-shadow);
|
||||
color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
|
||||
background: ${cssManager.bdTheme(colors.light.background, colors.dark.background)};
|
||||
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: 1px dotted rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid var(--accent-color);
|
||||
border-radius: 16px;
|
||||
max-width: 1100px;
|
||||
min-width: calc(100vw / 3);
|
||||
border-radius: 8px;
|
||||
max-width: 520px;
|
||||
min-width: 320px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
transition: all 0.3s;
|
||||
transform: scale(0.95);
|
||||
will-change: transform, opacity;
|
||||
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
|
||||
transform: scale(0.92) translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Media query for mobile devices: stack buttons vertically */
|
||||
@media (max-width: 600px) {
|
||||
.modalBox.visible {
|
||||
transform: scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modalBox.hiding {
|
||||
transform: scale(0.95) translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Mobile: slide up from bottom */
|
||||
@media (max-width: 560px) {
|
||||
.pageOverlay {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.modalBox {
|
||||
height: 100vh;
|
||||
box-shadow: none;
|
||||
border-radius: 0px;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
border-radius: 16px 16px 0 0;
|
||||
transform: translateY(100%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modalBox.visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.modalBox.hiding {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Shake animation for modal box */
|
||||
.modalBox.shake {
|
||||
animation: shake 150ms 2 linear;
|
||||
animation: shake 120ms 2 linear;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate(3px, 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-3px, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
0% { transform: translateX(3px); }
|
||||
50% { transform: translateX(-3px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Toggle display based on [show] attribute */
|
||||
:host([show='false']) {
|
||||
display: none;
|
||||
}
|
||||
:host([show='true']) {
|
||||
display: block;
|
||||
}
|
||||
:host([show='false']) { display: none; }
|
||||
:host([show='true']) { display: block; }
|
||||
|
||||
.content {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
padding-left: var(--padding-sides);
|
||||
padding-right: var(--padding-sides);
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
padding: 12px 16px;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
|
||||
}
|
||||
|
||||
.text-container a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.text-container a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
padding: var(--padding-sides);
|
||||
padding: 12px 16px 16px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Media query for mobile devices: stack buttons vertically */
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 560px) {
|
||||
.button-container {
|
||||
grid-template-columns: 1fr;
|
||||
padding-bottom: max(16px, env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
/* Consent button styling using theme variables */
|
||||
.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;
|
||||
border-radius: 6px;
|
||||
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.2s;
|
||||
transition: all 0.15s ease;
|
||||
color: ${cssManager.bdTheme(colors.light.secondaryForeground, colors.dark.secondaryForeground)};
|
||||
}
|
||||
|
||||
.consent-button:hover {
|
||||
background: var(--button-hover-bg);
|
||||
background: ${cssManager.bdTheme(colors.light.accent, colors.dark.accent)};
|
||||
border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
|
||||
}
|
||||
|
||||
.consent-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.consent-button:last-child {
|
||||
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)};
|
||||
}
|
||||
|
||||
.consent-button:last-child:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Use theme variables for info container background and text */
|
||||
.info-container {
|
||||
text-align: center;
|
||||
line-height: 3em;
|
||||
background: var(--info-bg);
|
||||
border-top: 1px dotted rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.8em;
|
||||
color: var(--info-text);
|
||||
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 {
|
||||
text-decoration: underline;
|
||||
color: var(--link-color);
|
||||
transition: color 0.2s;
|
||||
color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.info-container a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
`,
|
||||
];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
// Initially hide the consent banner until needed
|
||||
this.setAttribute('show', 'false');
|
||||
}
|
||||
|
||||
@@ -234,11 +214,11 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
<div class="content">
|
||||
<consentsoftware-header></consentsoftware-header>
|
||||
<consentsoftware-tabs></consentsoftware-tabs>
|
||||
<div class="text-container" style="padding: 16px;">
|
||||
<div class="text-container">
|
||||
<div class="toptext">
|
||||
This page uses cookies. Please review our
|
||||
We use cookies to enhance your experience. Review our
|
||||
<a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a>
|
||||
and choose which cookie level you are willing to accept.
|
||||
and select your preferences.
|
||||
</div>
|
||||
</div>
|
||||
<consentsoftware-mainselection></consentsoftware-mainselection>
|
||||
@@ -277,46 +257,26 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
super.connectedCallback();
|
||||
this.updateTheme(); // Initialize theme based on system preference
|
||||
await super.connectedCallback();
|
||||
|
||||
// Check if mobile
|
||||
this.isMobile = window.matchMedia('(max-width: 560px)').matches;
|
||||
|
||||
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
|
||||
if (!cookieLevel) {
|
||||
// Show consent banner if cookie levels haven't been set yet
|
||||
this.setAttribute('show', 'true');
|
||||
requestAnimationFrame(async () => {
|
||||
await this.updated();
|
||||
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
|
||||
if (pageOverlay) {
|
||||
// Apply dark overlay styling when modal appears
|
||||
pageOverlay.style.background = 'rgba(0,0,0, 0.5)';
|
||||
pageOverlay.style.backdropFilter = 'blur(20px)';
|
||||
}
|
||||
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
|
||||
if (modalBox) {
|
||||
// Animate modal box appearance
|
||||
modalBox.style.transform = `scale(1)`;
|
||||
modalBox.style.opacity = '1';
|
||||
}
|
||||
});
|
||||
// Small delay to ensure DOM is ready, then animate in
|
||||
await delayFor(50);
|
||||
this.animateIn();
|
||||
} else {
|
||||
// Hide banner if cookie levels are already set
|
||||
this.setAttribute('show', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
// Placeholder for any logic needed after first render
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
if (!this.csWebclientRan && acceptedCookieLevels) {
|
||||
this.csWebclientRan = true;
|
||||
@@ -324,32 +284,58 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private animateIn() {
|
||||
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay') as HTMLDivElement;
|
||||
const modalBox = this.shadowRoot?.querySelector('.modalBox') as HTMLDivElement;
|
||||
|
||||
if (pageOverlay) {
|
||||
pageOverlay.style.background = 'rgba(0, 0, 0, 0.5)';
|
||||
pageOverlay.style.backdropFilter = 'blur(4px)';
|
||||
}
|
||||
|
||||
if (modalBox) {
|
||||
modalBox.classList.remove('hiding');
|
||||
modalBox.classList.add('visible');
|
||||
}
|
||||
}
|
||||
|
||||
private async animateOut() {
|
||||
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay') as HTMLDivElement;
|
||||
const modalBox = this.shadowRoot?.querySelector('.modalBox') as HTMLDivElement;
|
||||
|
||||
if (pageOverlay) {
|
||||
pageOverlay.style.background = 'rgba(0, 0, 0, 0)';
|
||||
pageOverlay.style.backdropFilter = 'blur(0px)';
|
||||
}
|
||||
|
||||
if (modalBox) {
|
||||
modalBox.classList.remove('visible');
|
||||
modalBox.classList.add('hiding');
|
||||
}
|
||||
|
||||
await delayFor(350);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles consent button clicks, sets cookie levels, and hides the banner.
|
||||
* Uses theme variables for styling transitions.
|
||||
*/
|
||||
private async handleConsentButtonClick(
|
||||
event: MouseEvent,
|
||||
_event: MouseEvent,
|
||||
levelsArg: csInterfaces.TCookieLevel[]
|
||||
) {
|
||||
console.log(`Set level to ${levelsArg}`);
|
||||
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
|
||||
if (pageOverlay) {
|
||||
// Fade out overlay effect using inline styles for transition
|
||||
pageOverlay.style.background = 'rgba(255,255,255, 0)';
|
||||
pageOverlay.style.backdropFilter = 'blur(0px)';
|
||||
}
|
||||
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
|
||||
if (modalBox) {
|
||||
// Scale down and fade out modal box before hiding
|
||||
modalBox.style.transform = `scale(0.95)`;
|
||||
modalBox.style.opacity = '0';
|
||||
}
|
||||
|
||||
await this.animateOut();
|
||||
|
||||
// Save user consent preferences
|
||||
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
||||
await delayFor(300);
|
||||
this.setAttribute('show', 'false'); // Hide the consent banner
|
||||
this.updated(); // Trigger any post-consent actions
|
||||
this.setAttribute('show', 'false');
|
||||
|
||||
// Run consent scripts
|
||||
if (!this.csWebclientRan) {
|
||||
this.csWebclientRan = true;
|
||||
await this.csWebclientInstance.getAndRunConsentTuples();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -358,30 +344,12 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
||||
*/
|
||||
private async pageOverlayClick(e: MouseEvent) {
|
||||
if (e.target === e.currentTarget) {
|
||||
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
|
||||
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
|
||||
if (pageOverlay && modalBox) {
|
||||
pageOverlay.classList.add('shake');
|
||||
const modalBox = this.shadowRoot?.querySelector('.modalBox') as HTMLDivElement;
|
||||
if (modalBox) {
|
||||
modalBox.classList.add('shake');
|
||||
await delayFor(2000);
|
||||
pageOverlay.classList.remove('shake');
|
||||
await delayFor(300);
|
||||
modalBox.classList.remove('shake');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,35 +1,52 @@
|
||||
import * as shared from './shared.js';
|
||||
import { cssManager, colors } 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 {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('consentsoftware-header')
|
||||
export class ConsentsoftwareHeader extends LitElement {
|
||||
public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
|
||||
export class ConsentsoftwareHeader extends DeesElement {
|
||||
public static demo = () => html`<consentsoftware-header></consentsoftware-header>`;
|
||||
|
||||
public static styles = css`
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
line-height: 3em;
|
||||
text-align: center;
|
||||
font-family: ${shared.fontStack};
|
||||
border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.95em;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="heading">
|
||||
What about cookies?
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
|
||||
<path d="M12 17h.01"/>
|
||||
</svg>
|
||||
Cookie Preferences
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -1,18 +1,27 @@
|
||||
import { LitElement, html, css, type TemplateResult } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
import { cssManager, colors } from './shared.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
type TemplateResult,
|
||||
property,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('consentsoftware-mainselection')
|
||||
export class ConsentsoftwareMainSelection extends LitElement {
|
||||
export class ConsentsoftwareMainSelection extends DeesElement {
|
||||
public static demo = () => html`<consentsoftware-mainselection></consentsoftware-mainselection>`;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public required = false;
|
||||
public accessor required = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public selected = false;
|
||||
public accessor selected = false;
|
||||
|
||||
public static styles = css`
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -21,23 +30,44 @@ export class ConsentsoftwareMainSelection extends LitElement {
|
||||
.maincontainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.maincontainer {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.itemBox {
|
||||
padding: 16px;
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
border-right: 1px solid;
|
||||
border-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%) 1;
|
||||
border-right: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
|
||||
}
|
||||
|
||||
.itemBox:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@media (max-width: 560px) {
|
||||
.itemBox {
|
||||
padding: 10px 8px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
|
||||
}
|
||||
|
||||
.itemBox:nth-child(odd) {
|
||||
border-right: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
|
||||
}
|
||||
|
||||
.itemBox:nth-last-child(-n+2) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="maincontainer">
|
||||
@@ -57,5 +87,5 @@ export class ConsentsoftwareMainSelection extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
public async getResults(mouseEvent) {}
|
||||
public async getResults() {}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,24 @@
|
||||
import { LitElement, html, css, type TemplateResult } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
import { cssManager, colors } from './shared.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('consentsoftware-tabs')
|
||||
export class ConsentsoftwareTabs extends LitElement {
|
||||
export class ConsentsoftwareTabs extends DeesElement {
|
||||
public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
|
||||
|
||||
public static styles = css`
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
|
||||
}
|
||||
|
||||
.tabs {
|
||||
@@ -20,31 +28,37 @@ export class ConsentsoftwareTabs extends LitElement {
|
||||
|
||||
.tabs .tab {
|
||||
text-align: center;
|
||||
line-height: 3em;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Media query for mobile devices: stack buttons vertically */
|
||||
@media (max-width: 600px) {
|
||||
.tabs .tab:hover {
|
||||
color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.tabs .tab {
|
||||
font-size: 0.8em;
|
||||
font-size: 0.75em;
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selector {
|
||||
position: absolute;
|
||||
width: calc(100% / 3);
|
||||
height: 1px;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
background: orange;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
bottom: 0;
|
||||
background: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
|
||||
transition: all 0.2s ease-out;
|
||||
border-radius: 1px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
@@ -57,7 +71,7 @@ export class ConsentsoftwareTabs extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
public async handleClick(mouseEvent) {
|
||||
public async handleClick(mouseEvent: MouseEvent) {
|
||||
const target = mouseEvent.target as HTMLElement;
|
||||
const tab: HTMLDivElement = target.closest('.tab');
|
||||
if (tab) {
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
import { LitElement, html, css, type TemplateResult } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
import { cssManager, colors } from './shared.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
type TemplateResult,
|
||||
property,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import { delayFor } from '@push.rocks/smartdelay';
|
||||
|
||||
@customElement('consentsoftware-toggle')
|
||||
export class ConsentsoftwareToggle extends LitElement {
|
||||
export class ConsentsoftwareToggle extends DeesElement {
|
||||
@property({ type: Boolean })
|
||||
public accessor required = false;
|
||||
|
||||
@@ -12,9 +20,9 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
public accessor selected = false;
|
||||
|
||||
/**
|
||||
* We always track the knob’s left offset in `currentX`.
|
||||
* - 0 => fully left
|
||||
* - 30 => fully right
|
||||
* Knob position tracking (0 = off, maxTravel = on)
|
||||
* This is the travel distance, not absolute left position.
|
||||
* Actual left = padding + currentX
|
||||
*/
|
||||
private currentX = 0;
|
||||
|
||||
@@ -23,39 +31,54 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
*/
|
||||
private isDragging = false;
|
||||
private hasDragged = false;
|
||||
private startX = 0; // pointerdown offset
|
||||
private readonly knobWidth = 30;
|
||||
private readonly trackWidth = 60;
|
||||
private startX = 0;
|
||||
|
||||
public static styles = css`
|
||||
// Toggle dimensions (with border-box, 1px border reduces inner by 2px)
|
||||
private readonly trackWidth = 36; // outer width
|
||||
private readonly trackHeight = 20; // outer height
|
||||
private readonly knobSize = 14;
|
||||
private readonly padding = 2; // padding from inner edge to knob
|
||||
private readonly maxTravel = 16; // (36 - 2) - 14 - (2 * 2) = 34 - 14 - 4 = 16
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
|
||||
}
|
||||
|
||||
.toggle {
|
||||
user-select: none; /* helps avoid text selection on drag */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.toggleKnobArea {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: 30px;
|
||||
width: 60px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0);
|
||||
height: 20px;
|
||||
width: 36px;
|
||||
border-radius: 10px;
|
||||
background: ${cssManager.bdTheme(colors.light.input, colors.dark.input)};
|
||||
border: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
|
||||
overflow: hidden;
|
||||
transition: background 0.2s ease;
|
||||
transition: all 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggleKnobArea:hover {
|
||||
border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
|
||||
}
|
||||
|
||||
:host([selected]) .toggleKnobArea {
|
||||
background: green;
|
||||
background: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
|
||||
border-color: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
|
||||
}
|
||||
|
||||
.toggleKnobMover {
|
||||
@@ -66,39 +89,37 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
|
||||
.toggleKnobInner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transition: left 0.2s ease, background 0.2s ease;
|
||||
transform: scale(0.7);
|
||||
/* Prevent scroll gestures on mobile */
|
||||
top: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 7px;
|
||||
background: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
|
||||
transition: left 0.15s ease, background 0.15s ease;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.toggleKnobInner.dragging {
|
||||
transition: background 0.2s ease;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
:host([selected]) .toggleKnobInner {
|
||||
background: white;
|
||||
background: ${cssManager.bdTheme(colors.light.primaryForeground, colors.dark.primaryForeground)};
|
||||
}
|
||||
|
||||
:host([required]) .toggleKnobArea {
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:host([required]) .toggleKnobInner {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
:host([required][selected]) .toggleKnobArea {
|
||||
background: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
|
||||
border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
:host([required][selected]) .toggleKnobInner {
|
||||
background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
@@ -110,7 +131,7 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
<!-- The knob itself, with pointer events for dragging. -->
|
||||
<div
|
||||
class="toggleKnobInner"
|
||||
style="left: ${this.currentX}px;"
|
||||
style="left: ${this.padding + this.currentX}px;"
|
||||
@pointerdown=${this.onPointerDown}
|
||||
@pointermove=${this.onPointerMove}
|
||||
@pointerup=${this.onPointerUp}
|
||||
@@ -125,15 +146,14 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
/**
|
||||
* 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 "required" => always selected
|
||||
this.selected = true;
|
||||
this.currentX = this.knobWidth; // 30
|
||||
this.currentX = this.maxTravel;
|
||||
this.requestUpdate();
|
||||
} else {
|
||||
// If not required, set knob to 0 or 30 depending on `selected`
|
||||
this.currentX = this.selected ? this.knobWidth : 0;
|
||||
this.currentX = this.selected ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
@@ -142,7 +162,6 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
* CLICK HANDLER
|
||||
*/
|
||||
public async handleClick(event: MouseEvent) {
|
||||
// If the user truly dragged the knob, skip the normal click toggle.
|
||||
if (this.isDragging || this.hasDragged) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
@@ -150,26 +169,23 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
}
|
||||
|
||||
if (this.required) {
|
||||
// small bounce from 30 -> 20 -> 30
|
||||
this.currentX = this.knobWidth; // ensure at 30
|
||||
// Small bounce animation for required toggles
|
||||
this.currentX = this.maxTravel;
|
||||
this.requestUpdate();
|
||||
await new Promise((r) => setTimeout(r, 10));
|
||||
|
||||
this.currentX = 20; // small bounce left
|
||||
this.currentX = this.maxTravel - 3;
|
||||
this.requestUpdate();
|
||||
await delayFor(200);
|
||||
|
||||
this.currentX = this.knobWidth; // back to 30
|
||||
await delayFor(150);
|
||||
this.currentX = this.maxTravel;
|
||||
this.requestUpdate();
|
||||
return;
|
||||
}
|
||||
|
||||
// Normal toggle if no drag & not required
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
this.selected = !this.selected;
|
||||
this.currentX = this.selected ? this.knobWidth : 0; // snap knob left(0) or right(30)
|
||||
this.currentX = this.selected ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
|
||||
this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
|
||||
@@ -189,7 +205,7 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
|
||||
// Start dragging
|
||||
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;
|
||||
|
||||
// capture pointer so we keep receiving pointermove/pointerup
|
||||
@@ -203,8 +219,8 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
const toggleKnobInner: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobInner');
|
||||
toggleKnobInner.classList.add('dragging');
|
||||
|
||||
// Clamp
|
||||
this.currentX = Math.max(0, Math.min(newX, this.trackWidth - this.knobWidth));
|
||||
// Clamp to valid travel range (0 to maxTravel)
|
||||
this.currentX = Math.max(0, Math.min(newX, this.maxTravel));
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
@@ -213,17 +229,17 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
(event.target as HTMLElement).releasePointerCapture(event.pointerId);
|
||||
this.isDragging = false;
|
||||
|
||||
// If we didn’t truly drag, pointerup does nothing; click handler handles toggling.
|
||||
// If we didn't truly drag, pointerup does nothing; click handler handles toggling.
|
||||
if (!this.hasDragged) {
|
||||
return;
|
||||
}
|
||||
const toggleKnobInner: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobInner');
|
||||
toggleKnobInner.classList.remove('dragging');
|
||||
|
||||
// Real drag => decide final side
|
||||
const midpoint = (this.trackWidth - this.knobWidth) / 2; // 15
|
||||
// Real drag => decide final side based on midpoint
|
||||
const midpoint = this.maxTravel / 2;
|
||||
this.selected = this.currentX > midpoint;
|
||||
this.currentX = this.selected ? this.knobWidth : 0; // snap to edge
|
||||
this.currentX = this.selected ? this.maxTravel : 0; // snap to edge
|
||||
this.requestUpdate();
|
||||
|
||||
// Dispatch toggle event
|
||||
@@ -243,7 +259,7 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
!this.hasDragged &&
|
||||
!this.required
|
||||
) {
|
||||
this.currentX = this.selected ? this.knobWidth : 0;
|
||||
this.currentX = this.selected ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
}
|
||||
super.updated(changedProperties);
|
||||
|
||||
@@ -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');
|
||||
|
||||
// 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',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { html } from 'lit';
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const page1 = () => html``;
|
||||
@@ -1,9 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["es2017", "dom"],
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"declaration": true,
|
||||
"inlineSources": true,
|
||||
"inlineSourceMap": true,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ES2020",
|
||||
"moduleResolution": "node12"
|
||||
"target": "ES2022",
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user