feat(elements): Enhance consent management components with advanced styling and interaction

ts_web/elements/consentsoftware-toggle.ts

@@ -2,6 +2,8 @@ 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 {
   public static demo = () => html`<consentsoftware-toggle></consentsoftware-toggle>`;
@@ -27,15 +29,16 @@ export class ConsentsoftwareToggle extends LitElement {
       margin: auto;
       height: 30px;
       width: 60px;
-      border-radius: 15px;
+      border-radius: 20px;
       background: rgba(255, 255, 255, 0.1);
       position: relative;
       overflow: hidden;
       transition: all 0.2s;
+      border: 1px solid rgba(255, 255, 255, 0);
     }
 
     :host([selected]) .toggleKnobArea {
-      background: blue;
+      background: green;
     }
 
     .toggleKnobMover {
@@ -51,12 +54,21 @@ export class ConsentsoftwareToggle extends LitElement {
       top: 0;
       left: 0;
       transition: all 0.2s;
-      transform: scale(0.8);
+      transform: scale(0.7);
     }
 
     :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() {
@@ -76,11 +88,30 @@ export class ConsentsoftwareToggle extends LitElement {
     `;
   }
 
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(_changedProperties);
+    if (this.required) {
+      this.selected = true;
+      this.syncSelection();
+    }
+  }
+
   public async handleClick(mouseEvent) {
+    if (this.required) {
+      const moverElement: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobMover');
+      moverElement.style.transform = 'translateX(20px)';
+      await delayFor(250);
+      moverElement.style.transform = 'translateX(30px)';
+      return;
+    }
     this.selected = !this.selected;
     mouseEvent.stopPropagation();
     mouseEvent.preventDefault();
+    this.syncSelection();
     this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
+  }
+
+  public async syncSelection() {
     console.log(`Selected ${this.selected}`);
     const moverElement: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobMover');
     if (this.selected) {