1.4.3

.gitignore

@@ -3,7 +3,6 @@
 # artifacts
 coverage/
 public/
-pages/
 
 # installs
 node_modules/
@@ -17,4 +16,4 @@ node_modules/
 dist/
 dist_*/
 
-# custom
+#------# custom

changelog.md

@@ -1,5 +1,77 @@
 # Changelog
 
+## 2025-01-17 - 1.4.3 - fix(consentsoftware-cookieconsent)
+Fix transition property in consent button styles and add HTMLElementTagNameMap declaration for global interface.
+
+- Updated the transition property for consent buttons to transition all properties instead of just the background.
+- Added global interface HTMLElementTagNameMap for custom element type support.
+
+## 2025-01-16 - 1.4.2 - fix(cookieconsent)
+Fix user-select property in consentsoftware-cookieconsent component for consistency in interaction.
+
+
+## 2025-01-16 - 1.4.1 - fix(consentsoftware-toggle)
+Fix issue in drag event handling logic for the toggle component.
+
+- Corrected dragging functionality to accurately track dragging state.
+- Included logic to delay the reset of the dragging state after toggling.
+
+## 2025-01-16 - 1.4.0 - feat(toggle component)
+Enhanced consent toggle component with drag functionality
+
+- Implemented drag functionality for the toggle knob.
+- Added smooth transitions for the toggle knob movement.
+- Handled drag state management to differentiate between actual click and drag.
+- Improved user interaction by allowing click anywhere in the toggle area.
+
+## 2025-01-16 - 1.3.5 - fix(elements)
+Improved styling consistency across several components
+
+- Increased box-shadow intensity for better visual separation
+- Changed border-bottom styles to use dotted lines for consistency
+- Adjusted line-height for better vertical spacing
+- Fixed border-right gradient on itemBox for better styling
+
+## 2025-01-14 - 1.3.4 - fix(dependencies)
+Corrected build script and updated @consent.software/webclient dependency version
+
+- Corrected the build script entry in package.json.
+- Updated @consent.software/webclient dependency to version ^1.1.0.
+
+## 2025-01-14 - 1.3.3 - fix(package.json)
+Fixed incorrect main and typings fields, replacing with exports field
+
+- Updated package.json to use the 'exports' field instead of 'main' and 'typings' for module entry points
+
+## 2025-01-14 - 1.3.2 - fix(core)
+No code changes detected, maintain current state.
+
+
+## 2025-01-14 - 1.3.1 - fix(package setup)
+Fix package metadata and dependency consistency
+
+
+## 2025-01-14 - 1.3.0 - feat(elements)
+Enhance consent management components with advanced styling and interaction
+
+- Added delayed animation effect to 'consentsoftware-toggle' when required.
+- Improved styling for better visual feedback on selections and requirements.
+- Enhanced modal transition and visibility settings for the 'consentsoftware-cookieconsent'.
+
+## 2025-01-13 - 1.2.0 - feat(pages)
+Add initial structure for pages with page1 component
+
+- Added page1 export module in ts_web/pages/index.ts
+- Implemented page1 component returning an empty template using lit-html
+
+## 2025-01-13 - 1.1.0 - feat(core)
+Refactor and enhance consent management components
+
+- Replaced usage of custom elements with LitElement for core components.
+- Introduced new layout and design for consent modal using modern CSS approaches.
+- Removed dependency on '@design.estate/dees-domtools'.
+- Added support for dynamic theme switching with light and dark modes.
+
 ## 2025-01-09 - 1.0.81 - fix(core)
 Package updated to ensure compliance with privacy regulations.
 

html/index.ts

@@ -1,10 +1,8 @@
 // dees tools
 import * as deesWccTools from '@design.estate/dees-wcctools';
-import * as deesDomTools from '@design.estate/dees-domtools';
 
 // elements and pages
 import * as elements from '../ts_web/elements/index.js';
 import * as pages from '../ts_web/pages/index.js';
 
 deesWccTools.setupWccTools(elements as any, pages);
-deesDomTools.elementBasic.setup();

package.json

@@ -1,25 +1,24 @@
 {
   "name": "@consent.software/catalog",
-  "version": "1.0.81",
+  "version": "1.4.3",
   "private": false,
   "description": "A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.",
-  "main": "dist_ts_web/index.js",
+  "exports": {
-  "typings": "dist_ts_web/index.d.ts",
+    ".": "./dist_ts_web/index.js"
+  },
   "type": "module",
   "scripts": {
     "test": "npm run build",
-    "build": "tsbuild element --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "dependencies": {
     "@consent.software/interfaces": "^1.0.11",
-    "@consent.software/webclient": "^1.0.14",
+    "@consent.software/webclient": "^1.1.0",
-    "@design.estate/dees-catalog": "^1.3.3",
+    "@push.rocks/smartdelay": "^3.0.5",
-    "@design.estate/dees-domtools": "^2.1.1",
+    "lit": "^3.2.1"
-    "@design.estate/dees-element": "^2.0.39",
-    "@push.rocks/smartdelay": "^3.0.5"
   },
   "devDependencies": {
     "@design.estate/dees-wcctools": "^1.0.90",

ts_web/00_commitinfo_data.ts

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

ts_web/elements/consentsoftware-cookieconsent.ts

@@ -1,213 +1,290 @@
-import { customElement, DeesElement, property, html, type TemplateResult, cssManager, css } from '@design.estate/dees-element';
+import * as shared from './shared.js';
-import * as domtools from '@design.estate/dees-domtools';
+
-import '@design.estate/dees-catalog';
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
 
 import * as csInterfaces from '@consent.software/interfaces';
 import * as csWebclient from '@consent.software/webclient';
-
 import { delayFor } from '@push.rocks/smartdelay';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'consentsoftware-cookieconsent': ConsentsoftwareCookieconsent;
+  }
+}
+
 @customElement('consentsoftware-cookieconsent')
-export class ConsentsoftwareCookieconsent extends DeesElement {
+export class ConsentsoftwareCookieconsent extends LitElement {
   public static demo = () => html`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
 
   public csWebclientInstance = new csWebclient.CsWebclient();
   public csWebclientRan = false;
 
+  @property({ type: String, reflect: true })
+  public theme: 'light' | 'dark' = 'light';
+
+  /**
+   * We bind `heightPixels` to a CSS variable (--cookieconsent-height).
+   * Then we can do margin-bottom animations in CSS.
+   */
+  public static styles = css`
+    :host {
+      font-family: ${shared.fontStack};
+      user-select: none;
+      /* Default theme variables */
+      --text-color: #333;
+      --background-color: #eeeeee;
+      --accent-color: #333333;
+      --button-bg: #ffffff;
+      --button-hover-bg: #f2f2f2;
+      --icon-color: #4496f5;
+      --link-color: #333;
+      --padding-sides: 16px;
+    }
+
+    :host([theme='dark']) {
+      --text-color: #fff;
+      --background-color: #111;
+      --accent-color: #333333;
+      --button-bg: #252525;
+      --button-hover-bg: #222222;
+      --icon-color: #4496f5;
+      --link-color: #fff;
+    }
+
+    :host([theme='light']) {
+      --text-color: #333;
+      --background-color: #eeeeee;
+      --accent-color: #333333;
+      --button-bg: #ffffff;
+      --button-hover-bg: #f2f2f2;
+      --icon-color: #4496f5;
+      --link-color: #333;
+    }
+
+    .pageOverlay {
+      position: fixed;
+      top: 0px;
+      bottom: 0px;
+      right: 0px;
+      left: 0px;
+      display: grid;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000; /* standard z-index for fixed elements */
+      background: rgba(0, 0, 0, 0);
+      backdrop-filter: blur(0px);
+      transition: all 0.2s;
+    }
+
+    .modalBox {
+      display: block;
+      color: var(--text-color);
+      background: var(--background-color);
+      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6);
+      position: realtive;
+      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);
+      box-sizing: border-box;
+      overflow: hidden;
+      /* 
+       * We start with margin-bottom as negative to hide the banner.
+       * The animation occurs when we toggle the gotIt/show attributes.
+       */
+      will-change: transform; /* ensure efficient rendering */
+      transition: all 0.3s;
+      transform: scale(0.95);
+      opacity: 0;
+    }
+
+    /* 
+     * Toggle display based on [show] attribute 
+     * (so if show=false, the banner doesn't show at all).
+     */
+    :host([show='false']) {
+      display: none;
+    }
+    :host([show='true']) {
+      display: block;
+    }
+
+    /* 
+     * Animate margin-bottom when [gotIt] toggles.
+     * If gotIt=true, push the banner down off-screen.
+     * If gotIt=false, pull the banner into view.
+     */
+    :host([gotIt='true']) {
+      background: blue;
+    }
+    :host([gotIt='false']) {
+      background: red;
+    }
+
+    .content {
+      margin: auto;
+    }
+
+    .text-container {
+      padding-left: var(--padding-sides);
+      padding-right: var(--padding-sides);
+      display: grid;
+      grid-template-columns: auto;
+    }
+
+    .text-container a {
+      color: var(--link-color);
+      text-decoration: none;
+    }
+
+    .button-container {
+      padding: var(--padding-sides);
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+    }
+
+    .info-container {
+      color: var(--text-color);
+      text-align: center;
+      line-height: 3em;
+      background: rgba(0, 0, 0, 0.1);
+      border-top: 1px dotted rgba(255, 255, 255, 0.1);
+      font-size: 0.8em;
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    .info-container a {
+      text-decoration: underline;
+      color: var(--link-color);
+      transition: color 0.2s;
+    }
+    .info-container a:hover {
+      color: #ffffff;
+    }
+
+    .consent-button {
+      border-radius: 3px;
+      background: var(--button-bg);
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+      padding: 10px;
+      line-height: 30px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .consent-button:hover {
+      background: var(--button-hover-bg);
+    }
+  `;
+
   constructor() {
     super();
-    domtools.elementBasic.setup();
+    this.setAttribute('gotIt', 'true');
-    // lets determine wether to show the cookieconsent dialog or not
+    this.setAttribute('show', 'false');
   }
 
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-        * {
-          box-sizing: border-box;
-        }
-
-        .content {
-          max-width: 1100px;
-          margin: auto;
-          line-height: var(--cookieconsent-height);
-          padding-bottom: 20px;
-        }
-
-
-        .text-container {
-          line-height: var(--cookieconsent-height);
-          display: grid;
-          grid-template-columns: 30px auto;
-        }
-
-        .text-container .icon-container {
-          height: var(--cookieconsent-height);
-          display: inline-block;
-          color: #4496F5;
-        }
-
-        .text-container .toptext {
-
-        }
-
-        .text-container a {
-          color: ${cssManager.bdTheme('#333', '#fff')};
-        }
-
-        .button-container {
-          display: grid;
-          grid-template-columns: ${cssManager.cssGridColumns(4, 20)};
-          grid-column-gap: 20px;
-          grid-row-gap: 20px;
-        }
-
-        .info-container {
-          color: ${cssManager.bdTheme('#444', '#CCC')};
-          text-align: center;
-        }
-
-        .info-container a {
-          text-decoration: underline;
-          color: ${cssManager.bdTheme('#444', '#CCC')};
-          transition: color 0.2s;
-        }
-
-        .info-container a:hover {
-          color: #ffffff;
-        }
-
-
-        .consent-button {
-          border-radius: 3px;
-          background: ${cssManager.bdTheme('#ffffff', '#252525')};
-          box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.2)', '0px 0px 5px rgba(0,0,0,0.4)')};
-          padding: 10px;
-          line-height: 30px;
-          text-align: center;
-          cursor: pointer;
-          transition: background 0.2s;
-        }
-
-        .consent-button:hover {
-          background: ${cssManager.bdTheme('#f2f2f2', '#222222')};
-        }
-
-        .consent-button:first-child {
-          margin-left: 0px;
-        }
-
-        ${cssManager.cssForNotebook(css`
-          .content {
-            padding-left: 30px;
-            padding-right: 30px;
-          }
-        `)}
-
-        ${cssManager.cssForTablet(css`
-          :host {
-            text-align: center;
-          }
-
-          .content {
-            padding-top: 20px;
-          }
-
-          .icon-container {
-            margin-top: -10px;
-            line-height: 50px;
-            font-size: 40px;
-          }
-
-          .text-container {
-            line-height: 20px;
-            margin-bottom: 10px;
-            grid-template-columns: 50px auto;
-          }
-
-          .button-container {
-            grid-template-columns: ${cssManager.cssGridColumns(2, 20)};
-          }
-        `)}
-
-        ${cssManager.cssForPhablet(css`
-          .button-container {
-            grid-template-columns: 100%;
-          }
-        `)}
-    `
-  ]
-
   public render(): TemplateResult {
     return html`
-      <style>
+      <div class="pageOverlay">
-        :host {
+        <div class="modalBox">
-          display: block;
+          <div class="content">
-          font-family: 'Roboto', sans-serif;
+            <consentsoftware-header></consentsoftware-header>
-          color: ${cssManager.bdTheme('#333', '#fff')};
+            <consentsoftware-tabs></consentsoftware-tabs>
-          background: ${cssManager.bdTheme('#eeeeee', '#111')};
+            <div class="text-container" style="padding: 16px;">
-          box-shadow: ${cssManager.bdTheme('0px 0px 15px rgba(0,0,0,0.4)', '0px -30px 30px rgba(0,0,0,1)')};
+              <div class="toptext">
-          position: fixed;
+                This page uses cookies. Please review our
-          bottom: 0px;
+                <a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a>
-          border-top: ${cssManager.bdTheme('none', '1px solid  #e4002b')};
+                and choose which cookie level you are willing to accept.
-          left: 0px;
+              </div>
-          width: 100%;
+            </div>
-          box-sizing: border-box;
+            <!-- <div class="button-container">
-          --cookieconsent-height: 60px;
+              <div
-          min-height: var(--cookieconsent-height);
+                class="consent-button"
-          margin-bottom: -${this.heightPixels}px;
+                @click=${(event: MouseEvent) => this.setLevel(event, ['functional'])}
-          will-change: transform; /* make sure it is rendered efficiently */
+              >
-          z-index: 1000; /* the standard z-index for fixed elements at Lossless */
+                Functional cookies
-        }
+              </div>
-
+              <div
-        :host([show=false]) {
+                class="consent-button"
-          display: none;
+                @click=${(event: MouseEvent) => this.setLevel(event, ['functional', 'analytics'])}
-        }
+              >
-
+                Analytics cookies
-        :host([show=true]) {
+              </div>
-          display: block;
+              <div
-          transition: margin-bottom 0.3s ease;
+                class="consent-button"
-        }
+                @click=${(event: MouseEvent) =>
-
+              this.setLevel(event, ['functional', 'analytics', 'marketing'])}
-        :host([gotIt=true]) {
+              >
-          margin-bottom: -${this.heightPixels + 1}px;
+                Marketing cookies
-        }
+              </div>
-
+              <div
-        :host([gotIt=false]) {
+                class="consent-button"
-          margin-bottom: 0px;
+                @click=${(event: MouseEvent) =>
-        }
+              this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])}
-      </style>
+              >
-      <div class="content">
+                All cookies
-        <div class="text-container">
+              </div>
-          <div class="icon-container">
+            </div> -->
-            <dees-icon iconName="info"></dees-icon>
+            <consentsoftware-mainselection></consentsoftware-mainselection>
+            <div class="button-container">
+              <div
+                class="consent-button"
+                @click=${(event: MouseEvent) => this.setLevel(event, ['functional'])}
+              >
+                Deny
+              </div>
+              <div
+                class="consent-button"
+                @click=${(event: MouseEvent) => this.setLevel(event, ['functional', 'analytics'])}
+              >
+                Accept selection
+              </div>
+              <div
+                class="consent-button"
+                @click=${(event: MouseEvent) =>
+                  this.setLevel(event, ['functional', 'analytics', 'marketing'])}
+              >
+                Accept all cookies
+              </div>
+            </div>
+            <div class="info-container">
+              consent management powered by
+              <a href="https://consent.software">consent.software</a>
+            </div>
           </div>
-          <div class="toptext">This page uses cookies. Please review our <a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a> and choose which cookie level you are willing to accept.</div>
-        </div>
-        <div class="button-container">
-          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional']);}}>Functional cookies</div>
-          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics']);}}>Analytics cookies</div>
-          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing']);}}>Marketing cookies</div>
-          <div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing', 'all']);}}>All cookies</div>
-        </div>
-        <div class="info-container">
-          consent management powered by <a href="https://consent.software">consent.software</a>
         </div>
       </div>
     `;
   }
 
-  @property({type: Number})
+  /**
-  public heightPixels: number = 60;
+   * Called when the element is inserted into the DOM.
-
+   */
   public async connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('gotIt', 'true');
+    this.updateTheme();
+
     const cookieLevel = await this.csWebclientInstance.getCookieLevels();
-    if(!cookieLevel) {
+    if (!cookieLevel) {
-      delayFor(300).then(() => {
+      this.setAttribute('show', 'true');
-        this.setAttribute('show', 'true');
+      this.setAttribute('gotIt', 'false');
-        this.setAttribute('gotIt', 'false');
+      requestAnimationFrame(async () => {
+        await this.updated();
+        const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
+        if (pageOverlay) {
+          pageOverlay.style.background = 'rgba(0, 0, 0, 0.1)';
+          pageOverlay.style.backdropFilter = 'blur(2px)';
+        }
+        const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
+        if (modalBox) {
+          modalBox.style.transform = `scale(1)`;
+          modalBox.style.opacity = '1';
+        }
       });
     } else {
       this.setAttribute('show', 'false');
@@ -215,28 +292,46 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
     }
   }
 
-  public firstUpdated() {
+  /**
-    this.heightPixels = this.shadowRoot.host.clientHeight;
+   * Called after the first render of the component.
-  }
+   * We measure the actual height of the banner and update the CSS variable.
+   */
+  public async firstUpdated() {}
 
+  /**
+   * Called whenever the element is updated or re-rendered.
+   */
   public async updated() {
-    console.log(`The height of the cookie banner is ${this.shadowRoot.host.clientHeight}px`);
+    console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
     const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
     if (!this.csWebclientRan && acceptedCookieLevels) {
       this.csWebclientRan = true;
       await this.csWebclientInstance.getAndRunConsentTuples();
     }
-
   }
 
-  
+  /**
-  private async setLevel (event: MouseEvent, levelsArg: csInterfaces.TCookieLevel[]) {
+   * Sets the user’s chosen cookie level(s) and hides the banner.
+   */
+  private async setLevel(event: MouseEvent, levelsArg: csInterfaces.TCookieLevel[]) {
     console.log(`Set level to ${levelsArg}`);
     await this.csWebclientInstance.setCookieLevels(levelsArg);
     this.setAttribute('gotIt', 'true');
     await delayFor(300);
     this.setAttribute('show', 'false');
+    // After user selection, re-check for any required scripts to run
     this.updated();
   }
 
+  /**
+   * Dynamically switches the theme between light/dark,
+   * respecting `prefers-color-scheme` by default.
+   */
+  private updateTheme() {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    this.theme = prefersDark ? 'dark' : 'light';
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      this.theme = e.matches ? 'dark' : 'light';
+    });
+  }
 }

ts_web/elements/consentsoftware-header.ts

@@ -0,0 +1,36 @@
+import * as shared from './shared.js';
+
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-header')
+export class ConsentsoftwareHeader extends LitElement {
+  public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
+
+  public static styles = css`
+    :host {
+      display: block;
+      line-height: 3em;
+      text-align: center;
+      font-family: ${shared.fontStack};
+      border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
+    }
+
+    .heading {
+      
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="heading">
+        What about cookies?
+      </div>
+    `;
+  }
+}

ts_web/elements/consentsoftware-mainselection.ts

@@ -0,0 +1,61 @@
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-mainselection')
+export class ConsentsoftwareMainSelection extends LitElement {
+  public static demo = () => html`<consentsoftware-mainselection></consentsoftware-mainselection>`;
+
+  @property({ type: Boolean })
+  public required = false;
+
+  @property({ type: Boolean })
+  public selected = false;
+
+  public static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    .maincontainer {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    .itemBox {
+      padding: 16px;
+      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;
+    }
+    .itemBox:last-child {
+      border-right: none;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        <div class="itemBox">
+          <consentsoftware-toggle required>Required</consentsoftware-toggle>
+        </div>
+        <div class="itemBox">
+          <consentsoftware-toggle>Preferences</consentsoftware-toggle>
+        </div>
+        <div class="itemBox">
+          <consentsoftware-toggle>Statistics</consentsoftware-toggle>
+        </div>
+        <div class="itemBox">
+          <consentsoftware-toggle>Marketing</consentsoftware-toggle>
+        </div>
+      </div>
+    `;
+  }
+
+  public async getResults(mouseEvent) {}
+}

ts_web/elements/consentsoftware-tabs.ts

@@ -0,0 +1,64 @@
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+
+@customElement('consentsoftware-tabs')
+export class ConsentsoftwareTabs extends LitElement {
+  public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;
+
+  public static styles = css`
+    :host {
+      display: block;
+      position: relative;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .tabs {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .tabs .tab {
+      text-align: center;
+      line-height: 3em;
+      cursor: pointer;
+    }
+
+    .selector {
+      position: absolute;
+      width: calc(100% / 3);
+      height: 1px;
+      left: 0;
+      bottom: 0px;
+      background: orange;
+      transition: all 0.2s;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="tabs">
+        <div class="tab" @click=${this.handleClick}>Consent</div>
+        <div class="tab" @click=${this.handleClick}>Details</div>
+        <div class="tab" @click=${this.handleClick}>Cookie Policy + Legal Info</div>
+      </div>
+      <div class="selector"></div>
+    `;
+  }
+
+  public async handleClick(mouseEvent) {
+    const target = mouseEvent.target as HTMLElement;
+    const tab: HTMLDivElement = target.closest('.tab');
+    if (tab) {
+      const selector: HTMLDivElement = this.shadowRoot?.querySelector('.selector');
+      if (selector) {
+        selector.style.left = `${tab.offsetLeft}px`;
+        selector.style.width = `${tab.offsetWidth}px`;
+      }
+    }
+  }
+}

ts_web/elements/consentsoftware-toggle.ts

@@ -0,0 +1,255 @@
+import { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+import { delayFor } from '@push.rocks/smartdelay';
+
+@customElement('consentsoftware-toggle')
+export class ConsentsoftwareToggle extends LitElement {
+  @property({ type: Boolean })
+  public required = false;
+
+  @property({ type: Boolean, reflect: true })
+  public selected = false;
+
+  /**
+   * We always track the knob’s left offset in `currentX`.
+   * - 0 => fully left
+   * - 30 => fully right
+   */
+  private currentX = 0;
+
+  /**
+   * Drag state
+   */
+  private isDragging = false;
+  private hasDragged = false;
+  private startX = 0; // pointerdown offset
+  private readonly knobWidth = 30;
+  private readonly trackWidth = 60;
+
+  public static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    .label {
+      margin-bottom: 16px;
+    }
+
+    .toggle {
+      user-select: none; /* helps avoid text selection on drag */
+    }
+
+    .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);
+      overflow: hidden;
+      transition: background 0.2s ease;
+      cursor: pointer;
+    }
+
+    :host([selected]) .toggleKnobArea {
+      background: green;
+    }
+
+    .toggleKnobMover {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+
+    .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 */
+      touch-action: none;
+    }
+
+    .toggleKnobInner.dragging {
+      transition: background 0.2s ease;
+    }
+
+    :host([selected]) .toggleKnobInner {
+      background: white;
+    }
+
+    :host([required]) .toggleKnobArea {
+      background: none;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    :host([required]) .toggleKnobInner {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="label">${this.getText()}</div>
+      <!-- A user can click anywhere in this toggle area. -->
+      <div class="toggle" @click=${this.handleClick}>
+        <div class="toggleKnobArea">
+          <div class="toggleKnobMover">
+            <!-- The knob itself, with pointer events for dragging. -->
+            <div
+              class="toggleKnobInner"
+              style="left: ${this.currentX}px;"
+              @pointerdown=${this.onPointerDown}
+              @pointermove=${this.onPointerMove}
+              @pointerup=${this.onPointerUp}
+              @pointercancel=${this.onPointerUp}
+            ></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * If required = true on first render, auto-select and set the knob to the right.
+   */
+  public async firstUpdated() {
+    if (this.required) {
+      // If "required" => always selected
+      this.selected = true;
+      this.currentX = this.knobWidth; // 30
+      this.requestUpdate();
+    } else {
+      // If not required, set knob to 0 or 30 depending on `selected`
+      this.currentX = this.selected ? this.knobWidth : 0;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * 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();
+      return;
+    }
+
+    if (this.required) {
+      // small bounce from 30 -> 20 -> 30
+      this.currentX = this.knobWidth; // ensure at 30
+      this.requestUpdate();
+      await new Promise((r) => setTimeout(r, 10));
+
+      this.currentX = 20; // small bounce left
+      this.requestUpdate();
+      await delayFor(200);
+
+      this.currentX = this.knobWidth; // back to 30
+      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.requestUpdate();
+
+    this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
+    delayFor(0).then(() => {
+      this.hasDragged = false;
+    });
+  }
+
+  /**
+   * DRAG HANDLERS (pointer events)
+   */
+  private onPointerDown(event: PointerEvent) {
+    if (this.required) {
+      // If "required", disallow manual dragging
+      return;
+    }
+
+    // Start dragging
+    this.isDragging = true;
+    // 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
+    (event.target as HTMLElement).setPointerCapture(event.pointerId);
+  }
+
+  private onPointerMove(event: PointerEvent) {
+    if (!this.isDragging) return;
+    const newX = event.clientX - this.startX;
+    this.hasDragged = true;
+    const toggleKnobInner: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobInner');
+    toggleKnobInner.classList.add('dragging');
+
+    // Clamp
+    this.currentX = Math.max(0, Math.min(newX, this.trackWidth - this.knobWidth));
+    this.requestUpdate();
+  }
+
+  private onPointerUp(event: PointerEvent) {
+    if (!this.isDragging) return;
+    (event.target as HTMLElement).releasePointerCapture(event.pointerId);
+    this.isDragging = false;
+
+    // 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
+    this.selected = this.currentX > midpoint;
+    this.currentX = this.selected ? this.knobWidth : 0; // snap to edge
+    this.requestUpdate();
+
+    // Dispatch toggle event
+    this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
+    delayFor(0).then(() => {
+      this.hasDragged = false;
+    });
+  }
+
+  /**
+   * If external code sets `selected = true/false`, we also sync the knob position
+   */
+  protected updated(changedProperties: Map<PropertyKey, unknown>): void {
+    if (
+      changedProperties.has('selected') &&
+      !this.isDragging &&
+      !this.hasDragged &&
+      !this.required
+    ) {
+      this.currentX = this.selected ? this.knobWidth : 0;
+      this.requestUpdate();
+    }
+    super.updated(changedProperties);
+  }
+
+  public getText(): string | null {
+    return this.textContent;
+  }
+}

ts_web/elements/index.ts

@@ -1 +1,5 @@
 export * from './consentsoftware-cookieconsent.js';
+export * from './consentsoftware-header.js';
+export * from './consentsoftware-mainselection.js';
+export * from './consentsoftware-toggle.js';
+export * from './consentsoftware-tabs.js';

ts_web/elements/shared.ts

@@ -0,0 +1,3 @@
+import { unsafeCSS } from 'lit'
+
+export const fontStack = unsafeCSS('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');

ts_web/pages/index.ts

@@ -0,0 +1 @@
+export * from './page1.js';

ts_web/pages/page1.ts

@@ -0,0 +1,3 @@
+import { html } from 'lit';
+
+export const page1 = () => html``;