@consent.software/catalog 1.4.4 → 1.5.0

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@consent.software/catalog',
-    version: '1.4.4',
+    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.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsMkJBQTJCO0lBQ2pDLE9BQU8sRUFBRSxPQUFPO0lBQ2hCLFdBQVcsRUFBRSwrSkFBK0o7Q0FDN0ssQ0FBQSJ9

package/dist_ts_web/elements/consentsoftware-cookieconsent.d.ts

@@ -33,7 +33,8 @@ export declare class ConsentsoftwareCookieconsent extends LitElement {
     /**
      * Sets the user’s chosen cookie level(s) and hides the banner.
      */
-    private setLevel;
+    private handleConsentButtonClick;
+    private pageOverlayClick;
     /**
      * Dynamically switches the theme between light/dark,
      * respecting `prefers-color-scheme` by default.

package/dist_ts_web/elements/consentsoftware-cookieconsent.js

@@ -65,11 +65,16 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
       align-items: center;
       justify-content: center;
       z-index: 1000; /* standard z-index for fixed elements */
-      background: rgba(0, 0, 0, 0);
+      background: rgba(255, 255, 255, 0);
       backdrop-filter: blur(0px);
       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);
@@ -83,16 +88,29 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
       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;
     }
 
+    .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).
@@ -104,18 +122,6 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
       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;
     }
@@ -178,12 +184,11 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
         this.csWebclientInstance = new csWebclient.CsWebclient();
         this.csWebclientRan = false;
         this.theme = 'light';
-        this.setAttribute('gotIt', 'true');
         this.setAttribute('show', 'false');
     }
     render() {
         return html `
-      <div class="pageOverlay">
+      <div class="pageOverlay" @click=${this.pageOverlayClick}>
         <div class="modalBox">
           <div class="content">
             <consentsoftware-header></consentsoftware-header>
@@ -198,25 +203,25 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
             <!-- <div class="button-container">
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ['functional'])}
+                @click=${(event) => this.handleConsentButtonClick(event, ['functional'])}
               >
                 Functional cookies
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ['functional', 'analytics'])}
+                @click=${(event) => this.handleConsentButtonClick(event, ['functional', 'analytics'])}
               >
                 Analytics cookies
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ['functional', 'analytics', 'marketing'])}
+                @click=${(event) => this.handleConsentButtonClick(event, ['functional', 'analytics', 'marketing'])}
               >
                 Marketing cookies
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])}
+                @click=${(event) => this.handleConsentButtonClick(event, ['functional', 'analytics', 'marketing', 'all'])}
               >
                 All cookies
               </div>
@@ -225,19 +230,19 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
             <div class="button-container">
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ['functional'])}
+                @click=${(event) => this.handleConsentButtonClick(event, ['functional'])}
               >
                 Deny
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ['functional', 'analytics'])}
+                @click=${(event) => this.handleConsentButtonClick(event, ['functional', 'analytics'])}
               >
                 Accept selection
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ['functional', 'analytics', 'marketing'])}
+                @click=${(event) => this.handleConsentButtonClick(event, ['functional', 'analytics', 'marketing'])}
               >
                 Accept all cookies
               </div>
@@ -245,6 +250,7 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
             <div class="info-container">
               consent management powered by
               <a href="https://consent.software">consent.software</a>
+              (Open Source)
             </div>
           </div>
         </div>
@@ -260,13 +266,12 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
         const cookieLevel = await this.csWebclientInstance.getCookieLevels();
         if (!cookieLevel) {
             this.setAttribute('show', 'true');
-            this.setAttribute('gotIt', 'false');
             requestAnimationFrame(async () => {
                 await this.updated();
                 const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
                 if (pageOverlay) {
-                    pageOverlay.style.background = 'rgba(0, 0, 0, 0.1)';
-                    pageOverlay.style.backdropFilter = 'blur(2px)';
+                    pageOverlay.style.background = 'rgba(255,255,255, 0.1)';
+                    pageOverlay.style.backdropFilter = 'blur(0px)';
                 }
                 const modalBox = this.shadowRoot?.querySelector('.modalBox');
                 if (modalBox) {
@@ -277,7 +282,6 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
         }
         else {
             this.setAttribute('show', 'false');
-            this.setAttribute('gotIt', 'true');
         }
     }
     /**
@@ -299,15 +303,37 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
     /**
      * Sets the user’s chosen cookie level(s) and hides the banner.
      */
-    async setLevel(event, levelsArg) {
+    async handleConsentButtonClick(event, levelsArg) {
         console.log(`Set level to ${levelsArg}`);
+        const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
+        if (pageOverlay) {
+            pageOverlay.style.background = 'rgba(255,255,255, 0)';
+            pageOverlay.style.backdropFilter = 'blur(0px)';
+        }
+        const modalBox = this.shadowRoot?.querySelector('.modalBox');
+        if (modalBox) {
+            modalBox.style.transform = `scale(0.95)`;
+            modalBox.style.opacity = '0';
+        }
         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();
     }
+    async pageOverlayClick(e) {
+        if (e.target === e.currentTarget) {
+            const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
+            const modalBox = 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.
@@ -329,4 +355,4 @@ ConsentsoftwareCookieconsent = __decorate([
     __metadata("design:paramtypes", [])
 ], ConsentsoftwareCookieconsent);
 export { ConsentsoftwareCookieconsent };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sTUFBTSxhQUFhLENBQUM7QUFFdEMsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUF1QixNQUFNLEtBQUssQ0FBQztBQUNqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDbEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBRXRELE9BQU8sS0FBSyxZQUFZLE1BQU0sOEJBQThCLENBQUM7QUFDN0QsT0FBTyxLQUFLLFdBQVcsTUFBTSw2QkFBNkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFTM0MsSUFBTSw0QkFBNEIsR0FBbEMsTUFBTSw0QkFBNkIsU0FBUSxVQUFVO2FBQzVDLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEsaUVBQWlFLEFBQTlFLENBQStFO0lBUWpHOzs7T0FHRzthQUNXLFdBQU0sR0FBRyxHQUFHLENBQUE7O3FCQUVQLE1BQU0sQ0FBQyxTQUFTOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzSmxDLEFBeEptQixDQXdKbEI7SUFFRjtRQUNFLEtBQUssRUFBRSxDQUFDO1FBcktILHdCQUFtQixHQUFHLElBQUksV0FBVyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3BELG1CQUFjLEdBQUcs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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sTUFBTSxhQUFhLENBQUM7QUFFdEMsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUF1QixNQUFNLEtBQUssQ0FBQztBQUNqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDbEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBRXRELE9BQU8sS0FBSyxZQUFZLE1BQU0sOEJBQThCLENBQUM7QUFDN0QsT0FBTyxLQUFLLFdBQVcsTUFBTSw2QkFBNkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFTM0MsSUFBTSw0QkFBNEIsR0FBbEMsTUFBTSw0QkFBNkIsU0FBUSxVQUFVO2FBQzVDLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEsaUVBQWlFLEFBQTlFLENBQStFO0lBUWpHOzs7T0FHRzthQUNXLFdBQU0sR0FBRyxHQUFHLENBQUE7O3FCQUVQLE1BQU0sQ0FBQyxTQUFTOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0E0SmxDLEFBOUptQixDQThKbEI7SUFFRjtRQUNFLEtBQUssRUFBRSxDQUFDO1FBM0tILHdCQUFtQixHQUFHLElBQUksV0FBVyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3BELG1CQUFj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

package/dist_watch/bundle.js

@@ -42280,12 +42280,11 @@ var ConsentsoftwareCookieconsent = class extends r4 {
     this.csWebclientInstance = new CsWebclient();
     this.csWebclientRan = false;
     this.theme = "light";
-    this.setAttribute("gotIt", "true");
     this.setAttribute("show", "false");
   }
   render() {
     return x`
-      <div class="pageOverlay">
+      <div class="pageOverlay" @click=${this.pageOverlayClick}>
         <div class="modalBox">
           <div class="content">
             <consentsoftware-header></consentsoftware-header>
@@ -42300,25 +42299,25 @@ var ConsentsoftwareCookieconsent = class extends r4 {
             <!-- <div class="button-container">
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ["functional"])}
+                @click=${(event) => this.handleConsentButtonClick(event, ["functional"])}
               >
                 Functional cookies
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ["functional", "analytics"])}
+                @click=${(event) => this.handleConsentButtonClick(event, ["functional", "analytics"])}
               >
                 Analytics cookies
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ["functional", "analytics", "marketing"])}
+                @click=${(event) => this.handleConsentButtonClick(event, ["functional", "analytics", "marketing"])}
               >
                 Marketing cookies
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ["functional", "analytics", "marketing", "all"])}
+                @click=${(event) => this.handleConsentButtonClick(event, ["functional", "analytics", "marketing", "all"])}
               >
                 All cookies
               </div>
@@ -42327,19 +42326,19 @@ var ConsentsoftwareCookieconsent = class extends r4 {
             <div class="button-container">
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ["functional"])}
+                @click=${(event) => this.handleConsentButtonClick(event, ["functional"])}
               >
                 Deny
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ["functional", "analytics"])}
+                @click=${(event) => this.handleConsentButtonClick(event, ["functional", "analytics"])}
               >
                 Accept selection
               </div>
               <div
                 class="consent-button"
-                @click=${(event) => this.setLevel(event, ["functional", "analytics", "marketing"])}
+                @click=${(event) => this.handleConsentButtonClick(event, ["functional", "analytics", "marketing"])}
               >
                 Accept all cookies
               </div>
@@ -42347,6 +42346,7 @@ var ConsentsoftwareCookieconsent = class extends r4 {
             <div class="info-container">
               consent management powered by
               <a href="https://consent.software">consent.software</a>
+              (Open Source)
             </div>
           </div>
         </div>
@@ -42362,13 +42362,12 @@ var ConsentsoftwareCookieconsent = class extends r4 {
     const cookieLevel = await this.csWebclientInstance.getCookieLevels();
     if (!cookieLevel) {
       this.setAttribute("show", "true");
-      this.setAttribute("gotIt", "false");
       requestAnimationFrame(async () => {
         await this.updated();
         const pageOverlay = this.shadowRoot?.querySelector(".pageOverlay");
         if (pageOverlay) {
-          pageOverlay.style.background = "rgba(0, 0, 0, 0.1)";
-          pageOverlay.style.backdropFilter = "blur(2px)";
+          pageOverlay.style.background = "rgba(255,255,255, 0.1)";
+          pageOverlay.style.backdropFilter = "blur(0px)";
         }
         const modalBox = this.shadowRoot?.querySelector(".modalBox");
         if (modalBox) {
@@ -42378,7 +42377,6 @@ var ConsentsoftwareCookieconsent = class extends r4 {
       });
     } else {
       this.setAttribute("show", "false");
-      this.setAttribute("gotIt", "true");
     }
   }
   /**
@@ -42401,14 +42399,36 @@ var ConsentsoftwareCookieconsent = class extends r4 {
   /**
    * Sets the user’s chosen cookie level(s) and hides the banner.
    */
-  async setLevel(event, levelsArg) {
+  async handleConsentButtonClick(event, levelsArg) {
     console.log(`Set level to ${levelsArg}`);
+    const pageOverlay = this.shadowRoot?.querySelector(".pageOverlay");
+    if (pageOverlay) {
+      pageOverlay.style.background = "rgba(255,255,255, 0)";
+      pageOverlay.style.backdropFilter = "blur(0px)";
+    }
+    const modalBox = this.shadowRoot?.querySelector(".modalBox");
+    if (modalBox) {
+      modalBox.style.transform = `scale(0.95)`;
+      modalBox.style.opacity = "0";
+    }
     await this.csWebclientInstance.setCookieLevels(levelsArg);
-    this.setAttribute("gotIt", "true");
     await delayFor(300);
     this.setAttribute("show", "false");
     this.updated();
   }
+  async pageOverlayClick(e8) {
+    if (e8.target === e8.currentTarget) {
+      const pageOverlay = this.shadowRoot?.querySelector(".pageOverlay");
+      const modalBox = 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.
@@ -42471,11 +42491,16 @@ ConsentsoftwareCookieconsent.styles = i`
       align-items: center;
       justify-content: center;
       z-index: 1000; /* standard z-index for fixed elements */
-      background: rgba(0, 0, 0, 0);
+      background: rgba(255, 255, 255, 0);
       backdrop-filter: blur(0px);
       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);
@@ -42489,16 +42514,29 @@ ConsentsoftwareCookieconsent.styles = i`
       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;
     }
 
+    .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).
@@ -42510,18 +42548,6 @@ ConsentsoftwareCookieconsent.styles = i`
       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;
     }