feat(consentsoftware-cookieconsent): Enhance consent modal with shake animation on overlay click

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2025-01-20 - 1.5.0 - feat(consentsoftware-cookieconsent)
+Enhance consent modal with shake animation on overlay click
+
+- Added shake animation to the modal and overlay when clicked outside the modal.
+- Updated dependency @consent.software/interfaces to version ^1.0.14.
+
 ## 2025-01-17 - 1.4.5 - fix(elements)
 Fix issues in consentsoftware-cookieconsent component
 

package.json

@@ -15,7 +15,7 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@consent.software/interfaces": "^1.0.11",
+    "@consent.software/interfaces": "^1.0.14",
     "@consent.software/webclient": "^1.1.0",
     "@push.rocks/smartdelay": "^3.0.5",
     "lit": "^3.2.1"

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@consent.software/interfaces':
-        specifier: ^1.0.11
-        version: 1.0.13
+        specifier: ^1.0.14
+        version: 1.0.14
       '@consent.software/webclient':
         specifier: ^1.1.0
         version: 1.1.0
@@ -42,9 +42,6 @@ packages:
   '@api.global/typedrequest-interfaces@2.0.2':
     resolution: {integrity: sha512-D+mkr4IiUZ/eUgrdp5jXjBKOW/iuMcl0z2ZLQsLLypKX/psFGD3viZJ58FNRa+/1OSM38JS5wFyoWl8oPEFLrw==}
 
-  '@api.global/typedrequest-interfaces@3.0.1':
-    resolution: {integrity: sha512-eR2Cr01BYRwIq/X2ajOenWhm8l+/YE4A5kK/9V6I8ZnhtEBMFHG6YjF6Fg8npLJWbvhZXhOms+axZ6JKI71o8g==}
-
   '@api.global/typedrequest-interfaces@3.0.19':
     resolution: {integrity: sha512-uuHUXJeOy/inWSDrwD0Cwax2rovpxYllDhM2RWh+6mVpQuNmZ3uw6IVg6dA2G1rOe24Ebs+Y9SzEogo+jYN7vw==}
 
@@ -227,8 +224,8 @@ packages:
   '@cloudflare/workers-types@4.20241230.0':
     resolution: {integrity: sha512-dtLD4jY35Lb750cCVyO1i/eIfdZJg2Z0i+B1RYX6BVeRPlgaHx/H18ImKAkYmy0g09Ow8R2jZy3hIxMgXun0WQ==}
 
-  '@consent.software/interfaces@1.0.13':
-    resolution: {integrity: sha512-xB1h5n5vltRLBrvQhrKz4K6tz+TN5RHHvcbQbTIphxetiWOJJq/RwyEN2iH8TtwWIGBSqHRtoljBQqY8t8Oanw==}
+  '@consent.software/interfaces@1.0.14':
+    resolution: {integrity: sha512-xfOhDuj4ECEMyutJCSwEOX1SPN/MlReR40D/x7CsKg1mSauoq0pZbZEUb9m4z5EoPfywZl8gkLVzFoiGyg1IcA==}
 
   '@consent.software/webclient@1.1.0':
     resolution: {integrity: sha512-VX7e8ygZwgU8WEzn22fdvvEytLYl4kfp/u40GusaBU4iFtjrCY2hxDy9Z1FTKicpGcRxf3t13lM0Jaugq7Jj/w==}
@@ -2981,8 +2978,6 @@ snapshots:
 
   '@api.global/typedrequest-interfaces@2.0.2': {}
 
-  '@api.global/typedrequest-interfaces@3.0.1': {}
-
   '@api.global/typedrequest-interfaces@3.0.19': {}
 
   '@api.global/typedrequest@3.1.10':
@@ -3569,14 +3564,14 @@ snapshots:
 
   '@cloudflare/workers-types@4.20241230.0': {}
 
-  '@consent.software/interfaces@1.0.13':
+  '@consent.software/interfaces@1.0.14':
     dependencies:
-      '@api.global/typedrequest-interfaces': 3.0.1
+      '@api.global/typedrequest-interfaces': 3.0.19
 
   '@consent.software/webclient@1.1.0':
     dependencies:
       '@api.global/typedrequest': 3.1.10
-      '@consent.software/interfaces': 1.0.13
+      '@consent.software/interfaces': 1.0.14
       '@push.rocks/smarttime': 4.1.1
       '@push.rocks/webstore': 2.0.20
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@consent.software/catalog',
-  version: '1.4.5',
+  version: '1.5.0',
   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

@@ -78,6 +78,11 @@ export class ConsentsoftwareCookieconsent extends LitElement {
       transition: all 0.2s;
     }
 
+    .pageOverlay.shake {
+      background: rgba(0, 0, 0, 0.5) !important;
+      backdrop-filter: blur(20px) !important;
+    }
+
     .modalBox {
       display: block;
       color: var(--text-color);
@@ -97,6 +102,23 @@ export class ConsentsoftwareCookieconsent extends LitElement {
       opacity: 0;
     }
 
+    .modalBox.shake {
+      animation: shake 150ms 2 linear;
+      box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.6);
+    }
+
+    @keyframes shake {
+      0% {
+        transform: translate(3px, 0);
+      }
+      50% {
+        transform: translate(-3px, 0);
+      }
+      100% {
+        transform: translate(0, 0);
+      }
+    }
+
     /* 
      * Toggle display based on [show] attribute 
      * (so if show=false, the banner doesn't show at all).
@@ -173,7 +195,7 @@ export class ConsentsoftwareCookieconsent extends LitElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="pageOverlay">
+      <div class="pageOverlay" @click=${this.pageOverlayClick}>
         <div class="modalBox">
           <div class="content">
             <consentsoftware-header></consentsoftware-header>
@@ -265,7 +287,7 @@ export class ConsentsoftwareCookieconsent extends LitElement {
         const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
         if (pageOverlay) {
           pageOverlay.style.background = 'rgba(255,255,255, 0.1)';
-          pageOverlay.style.backdropFilter = 'blur(1px)';
+          pageOverlay.style.backdropFilter = 'blur(0px)';
         }
         const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
         if (modalBox) {
@@ -321,6 +343,20 @@ export class ConsentsoftwareCookieconsent extends LitElement {
     this.updated();
   }
 
+  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');
+        modalBox.classList.add('shake');
+        await delayFor(300);
+        pageOverlay.classList.remove('shake');
+        modalBox.classList.remove('shake');
+      }
+    }
+  }
+
   /**
    * Dynamically switches the theme between light/dark,
    * respecting `prefers-color-scheme` by default.