@consent.software/catalog 2.0.0 → 2.0.2

package/license.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Lossless GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consent.software/catalog",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": false,
   "description": "A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.",
   "exports": {
@@ -17,10 +17,11 @@
   },
   "devDependencies": {
     "@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"
+    "@git.zone/tsbuild": "^4.4.2",
+    "@git.zone/tsbundle": "^2.13.0",
+    "@git.zone/tswatch": "^3.3.5",
+    "@push.rocks/projectinfo": "^5.0.2",
+    "@types/node": "^26.4.1"
   },
   "files": [
     "ts/**/*",
@@ -31,7 +32,8 @@
     "dist_ts_web/**/*",
     "assets/**/*",
     "cli.js",
-    "npmextra.json",
+    ".smartconfig.json",
+    "license.md",
     "readme.md"
   ],
   "browserslist": [
@@ -51,7 +53,7 @@
   ],
   "scripts": {
     "test": "pnpm run build",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders && tsbundle element --production",
     "watch": "tswatch element"
   }
 }

package/readme.md

@@ -187,7 +187,7 @@ pnpm run watch
 
 ## License and Legal Information
 
-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license.md](./license.md) file.
 
 **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.
 

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/elements/consentsoftware-cookieconsent.ts

@@ -6,7 +6,6 @@ import {
   html,
   css,
   type TemplateResult,
-  property,
 } from '@design.estate/dees-element';
 
 import * as csInterfaces from '@consent.software/interfaces';
@@ -25,6 +24,7 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
 
   public csWebclientInstance = new csWebclient.CsWebclient();
   public csWebclientRan = false;
+  private isMobile = false;
 
   public static styles = [
     cssManager.defaultStyles,
@@ -43,7 +43,7 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
         z-index: 1000;
         background: rgba(0, 0, 0, 0);
         backdrop-filter: blur(0px);
-        transition: all 0.2s ease-out;
+        transition: background 0.3s ease, backdrop-filter 0.3s ease;
       }
 
       .pageOverlay.shake {
@@ -63,18 +63,42 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
         min-width: 320px;
         box-sizing: border-box;
         overflow: hidden;
-        will-change: transform;
-        transition: all 0.2s ease-out;
-        transform: scale(0.96);
+        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;
       }
 
+      .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 {
           max-width: 100%;
           min-width: 100%;
-          height: 100vh;
-          border-radius: 0;
+          border-radius: 16px 16px 0 0;
+          transform: translateY(100%);
+          opacity: 1;
+        }
+
+        .modalBox.visible {
+          transform: translateY(0);
+        }
+
+        .modalBox.hiding {
+          transform: translateY(100%);
         }
       }
 
@@ -122,6 +146,7 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
       @media (max-width: 560px) {
         .button-container {
           grid-template-columns: 1fr;
+          padding-bottom: max(16px, env(safe-area-inset-bottom));
         }
       }
 
@@ -143,6 +168,10 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
         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)};
@@ -175,7 +204,6 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
 
   constructor() {
     super();
-    // Initially hide the consent banner until needed
     this.setAttribute('show', 'false');
   }
 
@@ -234,33 +262,21 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
   public async connectedCallback() {
     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.updateComplete;
-        const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
-        if (pageOverlay) {
-          // Apply subtle backdrop blur when modal appears
-          pageOverlay.style.background = 'rgba(0,0,0, 0.6)';
-          pageOverlay.style.backdropFilter = 'blur(4px)';
-        }
-        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() {
-    // Run consent scripts if levels are already set
     const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
     if (!this.csWebclientRan && acceptedCookieLevels) {
       this.csWebclientRan = true;
@@ -268,29 +284,52 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
     }
   }
 
+  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.
    */
   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) {
-      pageOverlay.style.background = 'rgba(0,0,0, 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.setAttribute('show', 'false');
 
     // Run consent scripts
     if (!this.csWebclientRan) {
@@ -305,13 +344,10 @@ export class ConsentsoftwareCookieconsent extends DeesElement {
    */
   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');
       }
     }

package/ts_web/elements/consentsoftware-tabs.ts

@@ -73,9 +73,9 @@ export class ConsentsoftwareTabs extends DeesElement {
 
   public async handleClick(mouseEvent: MouseEvent) {
     const target = mouseEvent.target as HTMLElement;
-    const tab: HTMLDivElement = target.closest('.tab');
+    const tab = target.closest<HTMLDivElement>('.tab');
     if (tab) {
-      const selector: HTMLDivElement = this.shadowRoot?.querySelector('.selector');
+      const selector = this.shadowRoot?.querySelector<HTMLDivElement>('.selector');
       if (selector) {
         selector.style.left = `${tab.offsetLeft}px`;
         selector.style.width = `${tab.offsetWidth}px`;

package/ts_web/elements/consentsoftware-toggle.ts

@@ -216,7 +216,7 @@ export class ConsentsoftwareToggle extends DeesElement {
     if (!this.isDragging) return;
     const newX = event.clientX - this.startX;
     this.hasDragged = true;
-    const toggleKnobInner: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobInner');
+    const toggleKnobInner = event.currentTarget as HTMLDivElement;
     toggleKnobInner.classList.add('dragging');
 
     // Clamp to valid travel range (0 to maxTravel)
@@ -233,7 +233,7 @@ export class ConsentsoftwareToggle extends DeesElement {
     if (!this.hasDragged) {
       return;
     }
-    const toggleKnobInner: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobInner');
+    const toggleKnobInner = event.currentTarget as HTMLDivElement;
     toggleKnobInner.classList.remove('dragging');
 
     // Real drag => decide final side based on midpoint

package/npmextra.json

@@ -1,31 +0,0 @@
-{
-  "gitzone": {
-    "projectType": "wcc",
-    "module": {
-      "githost": "gitlab.com",
-      "gitscope": "consentsoftware",
-      "gitrepo": "private/catalog",
-      "description": "A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.",
-      "npmPackagename": "@consentsoftware_private/catalog",
-      "license": "UNLICENSED",
-      "projectDomain": "consent.software",
-      "keywords": [
-        "consent management",
-        "web components",
-        "cookie consent",
-        "privacy compliance",
-        "GDPR",
-        "ES modules",
-        "frontend",
-        "typescript",
-        "user privacy",
-        "modern web"
-      ]
-    }
-  },
-  "npmci": {
-    "npmGlobalTools": [],
-    "npmAccessLevel": "private",
-    "npmRegistryUrl": "verdaccio.lossless.one"
-  }
-}