@consent.software/catalog 1.3.4 → 1.3.5

package/dist_bundle/bundle.js

@@ -81,7 +81,7 @@ ${n}
           </div>
         </div>
       </div>
-    `}async connectedCallback(){super.connectedCallback(),this.updateTheme(),await this.csWebclientInstance.getCookieLevels()?(this.setAttribute("show","false"),this.setAttribute("gotIt","true")):(this.setAttribute("show","true"),this.setAttribute("gotIt","false"),requestAnimationFrame(async()=>{await this.updated();let o=this.shadowRoot?.querySelector(".pageOverlay");o&&(o.style.background="rgba(0, 0, 0, 0.5)",o.style.backdropFilter="blur(2px)");let n=this.shadowRoot?.querySelector(".modalBox");n&&(n.style.transform="scale(1)",n.style.opacity="1")}))}async firstUpdated(){}async updated(){console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);let r=await this.csWebclientInstance.getCookieLevels();!this.csWebclientRan&&r&&(this.csWebclientRan=!0,await this.csWebclientInstance.getAndRunConsentTuples())}async setLevel(r,o){console.log(`Set level to ${o}`),await this.csWebclientInstance.setCookieLevels(o),this.setAttribute("gotIt","true"),await Ar(300),this.setAttribute("show","false"),this.updated()}updateTheme(){let r=window.matchMedia("(prefers-color-scheme: dark)").matches;this.theme=r?"dark":"light",window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",o=>{this.theme=o.matches?"dark":"light"})}};Or.demo=()=>Ne`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`,Or.styles=Xe`
+    `}async connectedCallback(){super.connectedCallback(),this.updateTheme(),await this.csWebclientInstance.getCookieLevels()?(this.setAttribute("show","false"),this.setAttribute("gotIt","true")):(this.setAttribute("show","true"),this.setAttribute("gotIt","false"),requestAnimationFrame(async()=>{await this.updated();let o=this.shadowRoot?.querySelector(".pageOverlay");o&&(o.style.background="rgba(0, 0, 0, 0.1)",o.style.backdropFilter="blur(2px)");let n=this.shadowRoot?.querySelector(".modalBox");n&&(n.style.transform="scale(1)",n.style.opacity="1")}))}async firstUpdated(){}async updated(){console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);let r=await this.csWebclientInstance.getCookieLevels();!this.csWebclientRan&&r&&(this.csWebclientRan=!0,await this.csWebclientInstance.getAndRunConsentTuples())}async setLevel(r,o){console.log(`Set level to ${o}`),await this.csWebclientInstance.setCookieLevels(o),this.setAttribute("gotIt","true"),await Ar(300),this.setAttribute("show","false"),this.updated()}updateTheme(){let r=window.matchMedia("(prefers-color-scheme: dark)").matches;this.theme=r?"dark":"light",window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",o=>{this.theme=o.matches?"dark":"light"})}};Or.demo=()=>Ne`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`,Or.styles=Xe`
     :host {
       font-family: ${$n};
       /* Default theme variables */
@@ -134,8 +134,9 @@ ${n}
       display: block;
       color: var(--text-color);
       background: var(--background-color);
-      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
+      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;
@@ -201,9 +202,9 @@ ${n}
     .info-container {
       color: var(--text-color);
       text-align: center;
-      line-height: 2em;
+      line-height: 3em;
       background: rgba(0, 0, 0, 0.1);
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      border-top: 1px dotted rgba(255, 255, 255, 0.1);
       font-size: 0.8em;
       color: rgba(255, 255, 255, 0.5);
     }
@@ -238,10 +239,10 @@ ${n}
     `}};go.demo=()=>Ne`<consentsoftware-tabs></consentsoftware-tabs>`,go.styles=Xe`
     :host {
       display: block;
-      line-height: 2em;
+      line-height: 3em;
       text-align: center;
       font-family: ${$n};
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
     }
 
     .heading {
@@ -266,8 +267,6 @@ ${n}
     :host {
       display: block;
       position: relative;
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }
 
     .maincontainer {
@@ -278,7 +277,8 @@ ${n}
     .itemBox {
       padding: 16px;
       text-align: center;
-      border-right: 1px solid rgba(255, 255, 255, 0.1);
+      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;
@@ -351,7 +351,7 @@ ${n}
       <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}>About Cookies</div>
+        <div class="tab" @click=${this.handleClick}>Cookie Policy + Legal Info</div>
       </div>
       <div class="selector"></div>
     `}async handleClick(e){let o=e.target.closest(".tab");if(o){let n=this.shadowRoot?.querySelector(".selector");n&&(n.style.left=`${o.offsetLeft}px`,n.style.width=`${o.offsetWidth}px`)}}};bo.demo=()=>Ne`<consentsoftware-tabs></consentsoftware-tabs>`,bo.styles=Xe`