@porscheofficial/cookie-consent-banner - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

dist/cookie-consent-banner/cookie-consent-banner.entry.js

@@ -48,3 +48,3 @@ import { r as registerInstance, a as createEvent, h } from './index-b3282e04.js';
 
-const cookieConsentBannerCss = ":host{display:block;-webkit-text-size-adjust:100%;--internal-cookie-consent-banner-colors-primary:var(\n    --cookie-consent-banner-colors-primary,\n    var(--theme-ui-colors-primary, #81c784)\n  );--internal-cookie-consent-banner-colors-primary-border:var(\n    --cookie-consent-banner-colors-primary-border,\n    var(\n      --cookie-consent-banner-colors-primary,\n      var(--theme-ui-colors-primary, #81c784)\n    )\n  );--internal-cookie-consent-banner-colors-primary-content:var(\n    --cookie-consent-banner-colors-primary-content,\n    var(--theme-ui-colors-white, #fff)\n  );--internal-cookie-consent-banner-colors-secondary:var(\n    --cookie-consent-banner-colors-secondary,\n    var(--theme-ui-colors-secondary, transparent)\n  );--internal-cookie-consent-banner-colors-secondary-border:var(\n    --cookie-consent-banner-colors-secondary-border,\n    var(--theme-ui-colors-white, #fff)\n  );--internal-cookie-consent-banner-colors-secondary-content:var(\n    --cookie-consent-banner-colors-secondary-content,\n    var(--theme-ui-colors-white, #fff)\n  );--internal-cookie-consent-banner-colors-background-body:var(\n    --cookie-consent-banner-colors-background-body,\n    var(--theme-ui-colors-background, rgba(25, 31, 34, 0.92))\n  );--internal-cookie-consent-banner-colors-text:var(\n    --cookie-consent-banner-colors-text,\n    var(--theme-ui-colors-text, #fff)\n  );--internal-cookie-consent-banner-font-family-headline:var(\n    --cookie-consent-banner-font-family-headline,\n    var(--theme-ui-fonts-heading, inherit)\n  );--internal-cookie-consent-banner-font-family-body:var(\n    --cookie-consent-banner-font-family-body,\n    var(--theme-ui-fonts-body, inherit)\n  );--internal-cookie-consent-banner-font-size-headline:var(\n    --cookie-consent-banner-font-size-headline,\n    1.5rem\n  );--internal-cookie-consent-banner-font-size-body:var(\n    --cookie-consent-banner-font-size-body,\n    0.875rem\n  );--internal-cookie-consent-banner-border-radius-buttons:var(\n    --cookie-consent-banner-border-radius-buttons,\n    var(--theme-ui-radii-default, 0.6rem)\n  );--internal-cookie-consent-banner-border-radius-body:var(\n    --cookie-consent-banner-border-radius-body,\n    var(--theme-ui-radii-default, 0)\n  );--internal-cookie-consent-banner-spacings-container-padding-top:var(\n    --cookie-consent-banner-spacings-container-padding-top,\n    var(--theme-ui-spacings-2, 1rem)\n  );--internal-cookie-consent-banner-spacings-container-padding-left:var(\n    --cookie-consent-banner-spacings-container-padding-left,\n    var(--theme-ui-spacings-2, 1rem)\n  );--internal-cookie-consent-banner-spacings-container-padding-bottom:var(\n    --cookie-consent-banner-spacings-container-padding-bottom,\n    var(--theme-ui-spacings-2, 1rem)\n  );--internal-cookie-consent-banner-spacings-container-padding-right:var(\n    --cookie-consent-banner-spacings-container-padding-right,\n    var(--theme-ui-spacings-2, 1rem)\n  );--internal-cookie-consent-banner-spacings-body-padding-top:var(\n    --cookie-consent-banner-spacings-body-padding-top,\n    var(--theme-ui-spacings-2, 0)\n  );--internal-cookie-consent-banner-spacings-body-padding-left:var(\n    --cookie-consent-banner-spacings-body-padding-left,\n    var(--theme-ui-spacings-2, 2rem)\n  );--internal-cookie-consent-banner-spacings-body-padding-bottom:var(\n    --cookie-consent-banner-spacings-body-padding-bottom,\n    var(--theme-ui-spacings-2, 0)\n  );--internal-cookie-consent-banner-spacings-body-padding-right:var(\n    --cookie-consent-banner-spacings-body-padding-right,\n    var(--theme-ui-spacings-2, 2rem)\n  );--internal-cookie-consent-banner-z-index-container:var(\n    --cookie-consent-banner-z-index-container,\n    1\n  )}.launcher{position:fixed;left:0;bottom:0;z-index:var(--internal-cookie-consent-banner-z-index-container);margin-left:1rem;padding-top:1.2rem;padding-left:2rem;padding-bottom:1.2rem;padding-right:2rem;background-color:rgba(25, 31, 34, 0.92);box-shadow:0px -3px 13px 0px rgba(57, 57, 57, 0.38);color:#fff;transform:translateY(70%);transition:transform 1s ease}.launcher:hover{transform:translateY(0)}*,*:before,*:after{box-sizing:border-box}@keyframes slideup{0%{transform:translateY(110vh)}100%{transform:translateY(0vh)}}.cc{position:fixed;left:0;bottom:0;z-index:var(--internal-cookie-consent-banner-z-index-container);width:100%;max-height:100%;max-height:stretch;padding-top:calc(\n    var(--internal-cookie-consent-banner-spacings-container-padding-top) +\n      env(safe-area-inset-top)\n  );padding-left:calc(\n    var(--internal-cookie-consent-banner-spacings-container-padding-left) +\n      env(safe-area-inset-left)\n  );padding-bottom:calc(\n    var(--internal-cookie-consent-banner-spacings-container-padding-bottom) +\n      env(safe-area-inset-bottom)\n  );padding-right:calc(\n    var(--internal-cookie-consent-banner-spacings-container-padding-right) +\n      env(safe-area-inset-right)\n  );overflow-y:auto;transform:translateY(110vh);animation:slideup 1s forwards}.cc_disable-slide-in{transform:none;animation:none}.cc_body{background-color:var(\n    --internal-cookie-consent-banner-colors-background-body\n  );border-radius:var(--internal-cookie-consent-banner-border-radius-body);padding-top:var(--internal-cookie-consent-banner-spacings-body-padding-top);padding-left:var(\n    --internal-cookie-consent-banner-spacings-body-padding-left\n  );padding-bottom:var(\n    --internal-cookie-consent-banner-spacings-body-padding-bottom\n  );padding-right:var(\n    --internal-cookie-consent-banner-spacings-body-padding-right\n  );box-shadow:0px -3px 13px 0px rgba(57, 57, 57, 0.38)}.cc_headline{margin:0;padding-top:2rem;padding-bottom:0;font-size:var(--internal-cookie-consent-banner-font-size-headline);color:var(--internal-cookie-consent-banner-colors-text);font-family:var(--internal-cookie-consent-banner-font-family-headline)}.cc_text{padding-top:1rem;padding-bottom:1.5rem;font-family:var(--internal-cookie-consent-banner-font-family-body)}a,.textlink,::slotted(a){text-decoration:underline;color:var(--internal-cookie-consent-banner-colors-text)}.textlink:hover,::slotted(a:hover){cursor:pointer}label,p,::slotted(label),::slotted(p){box-sizing:border-box;margin:0;min-width:0;max-width:100%;font-size:var(--internal-cookie-consent-banner-font-size-body);line-height:1.37;font-weight:400;letter-spacing:0.02em;color:var(--internal-cookie-consent-banner-colors-text)}.cc_settings{padding-bottom:2rem}.cc_settings_description{padding-bottom:1rem}.cc_checkboxes{display:grid}.cc_checkboxes_item{display:block;width:100%;padding-bottom:1rem;padding-left:0.5rem}.cc_buttons{padding-bottom:1rem;text-align:right}.cc_buttons>button{width:100%;margin-bottom:1rem}.cc_buttons>button:hover{cursor:pointer}@media (min-width: 48em){.cc_buttons>button{width:auto;margin-bottom:0}}button{box-sizing:border-box;min-width:0;appearance:none;display:inline-block;margin-top:0;margin-left:0.25rem;margin-bottom:0;margin-right:0.25rem;padding-top:1rem;padding-left:2.5rem;padding-bottom:1rem;padding-right:2.5rem;background-color:var(--internal-cookie-consent-banner-colors-primary);border-radius:var(--internal-cookie-consent-banner-border-radius-buttons);border-width:1px;border-color:var(--internal-cookie-consent-banner-colors-primary-border);border-style:solid;color:var(--internal-cookie-consent-banner-colors-primary-content);font-size:inherit;font-size:1rem;font-weight:700;line-height:inherit;text-decoration:none;text-align:center}button.secondary{background-color:var(--internal-cookie-consent-banner-colors-secondary);border-color:var(--internal-cookie-consent-banner-colors-secondary-border);color:var(--internal-cookie-consent-banner-colors-secondary-content)}";
+const cookieConsentBannerCss = ":host{display:block;-webkit-text-size-adjust:100%;--internal-cookie-consent-banner-colors-primary:var(\n    --cookie-consent-banner-colors-primary,\n    var(--theme-ui-colors-primary, #81c784)\n  );--internal-cookie-consent-banner-colors-primary-border:var(\n    --cookie-consent-banner-colors-primary-border,\n    var(\n      --cookie-consent-banner-colors-primary,\n      var(--theme-ui-colors-primary, #81c784)\n    )\n  );--internal-cookie-consent-banner-colors-primary-content:var(\n    --cookie-consent-banner-colors-primary-content,\n    var(--theme-ui-colors-white, #fff)\n  );--internal-cookie-consent-banner-colors-secondary:var(\n    --cookie-consent-banner-colors-secondary,\n    var(--theme-ui-colors-secondary, transparent)\n  );--internal-cookie-consent-banner-colors-secondary-border:var(\n    --cookie-consent-banner-colors-secondary-border,\n    var(--theme-ui-colors-white, #fff)\n  );--internal-cookie-consent-banner-colors-secondary-content:var(\n    --cookie-consent-banner-colors-secondary-content,\n    var(--theme-ui-colors-white, #fff)\n  );--internal-cookie-consent-banner-colors-background-body:var(\n    --cookie-consent-banner-colors-background-body,\n    var(--theme-ui-colors-background, rgba(25, 31, 34, 0.92))\n  );--internal-cookie-consent-banner-colors-text:var(\n    --cookie-consent-banner-colors-text,\n    var(--theme-ui-colors-text, #fff)\n  );--internal-cookie-consent-banner-font-family-headline:var(\n    --cookie-consent-banner-font-family-headline,\n    var(--theme-ui-fonts-heading, inherit)\n  );--internal-cookie-consent-banner-font-family-body:var(\n    --cookie-consent-banner-font-family-body,\n    var(--theme-ui-fonts-body, inherit)\n  );--internal-cookie-consent-banner-font-size-headline:var(\n    --cookie-consent-banner-font-size-headline,\n    1.5rem\n  );--internal-cookie-consent-banner-font-size-body:var(\n    --cookie-consent-banner-font-size-body,\n    0.875rem\n  );--internal-cookie-consent-banner-border-radius-buttons:var(\n    --cookie-consent-banner-border-radius-buttons,\n    var(--theme-ui-radii-default, 0.6rem)\n  );--internal-cookie-consent-banner-border-radius-body:var(\n    --cookie-consent-banner-border-radius-body,\n    var(--theme-ui-radii-default, 0)\n  );--internal-cookie-consent-banner-box-shadow:var(\n    --cookie-consent-banner-box-shadow,\n    0px -3px 13px 0px rgba(57, 57, 57, 0.38)\n  );--internal-cookie-consent-banner-spacings-container-padding-top:var(\n    --cookie-consent-banner-spacings-container-padding-top,\n    var(--theme-ui-spacings-2, 1rem)\n  );--internal-cookie-consent-banner-spacings-container-padding-left:var(\n    --cookie-consent-banner-spacings-container-padding-left,\n    var(--theme-ui-spacings-2, 1rem)\n  );--internal-cookie-consent-banner-spacings-container-padding-bottom:var(\n    --cookie-consent-banner-spacings-container-padding-bottom,\n    var(--theme-ui-spacings-2, 1rem)\n  );--internal-cookie-consent-banner-spacings-container-padding-right:var(\n    --cookie-consent-banner-spacings-container-padding-right,\n    var(--theme-ui-spacings-2, 1rem)\n  );--internal-cookie-consent-banner-spacings-body-padding-top:var(\n    --cookie-consent-banner-spacings-body-padding-top,\n    var(--theme-ui-spacings-2, 0)\n  );--internal-cookie-consent-banner-spacings-body-padding-left:var(\n    --cookie-consent-banner-spacings-body-padding-left,\n    var(--theme-ui-spacings-2, 2rem)\n  );--internal-cookie-consent-banner-spacings-body-padding-bottom:var(\n    --cookie-consent-banner-spacings-body-padding-bottom,\n    var(--theme-ui-spacings-2, 0)\n  );--internal-cookie-consent-banner-spacings-body-padding-right:var(\n    --cookie-consent-banner-spacings-body-padding-right,\n    var(--theme-ui-spacings-2, 2rem)\n  );--internal-cookie-consent-banner-z-index-container:var(\n    --cookie-consent-banner-z-index-container,\n    1\n  )}.launcher{position:fixed;left:0;bottom:0;z-index:var(--internal-cookie-consent-banner-z-index-container);margin-left:1rem;padding-top:1.2rem;padding-left:2rem;padding-bottom:1.2rem;padding-right:2rem;background-color:rgba(25, 31, 34, 0.92);box-shadow:0px -3px 13px 0px rgba(57, 57, 57, 0.38);color:#fff;transform:translateY(70%);transition:transform 1s ease}.launcher:hover{transform:translateY(0)}*,*:before,*:after{box-sizing:border-box}@keyframes slideup{0%{transform:translateY(110vh)}100%{transform:translateY(0vh)}}.cc{position:fixed;left:0;bottom:0;z-index:var(--internal-cookie-consent-banner-z-index-container);width:100%;max-height:100%;max-height:stretch;padding-top:calc(\n    var(--internal-cookie-consent-banner-spacings-container-padding-top) +\n      env(safe-area-inset-top)\n  );padding-left:calc(\n    var(--internal-cookie-consent-banner-spacings-container-padding-left) +\n      env(safe-area-inset-left)\n  );padding-bottom:calc(\n    var(--internal-cookie-consent-banner-spacings-container-padding-bottom) +\n      env(safe-area-inset-bottom)\n  );padding-right:calc(\n    var(--internal-cookie-consent-banner-spacings-container-padding-right) +\n      env(safe-area-inset-right)\n  );overflow-y:auto;transform:translateY(110vh);animation:slideup 1s forwards}.cc_disable-slide-in{transform:none;animation:none}.cc_body{background-color:var(\n    --internal-cookie-consent-banner-colors-background-body\n  );border-radius:var(--internal-cookie-consent-banner-border-radius-body);padding-top:var(--internal-cookie-consent-banner-spacings-body-padding-top);padding-left:var(\n    --internal-cookie-consent-banner-spacings-body-padding-left\n  );padding-bottom:var(\n    --internal-cookie-consent-banner-spacings-body-padding-bottom\n  );padding-right:var(\n    --internal-cookie-consent-banner-spacings-body-padding-right\n  );box-shadow:var(--internal-cookie-consent-banner-box-shadow)}.cc_headline{margin:0;padding-top:2rem;padding-bottom:0;font-size:var(--internal-cookie-consent-banner-font-size-headline);color:var(--internal-cookie-consent-banner-colors-text);font-family:var(--internal-cookie-consent-banner-font-family-headline)}.cc_text{padding-top:1rem;padding-bottom:1.5rem;font-family:var(--internal-cookie-consent-banner-font-family-body)}a,.textlink,::slotted(a){text-decoration:underline;color:var(--internal-cookie-consent-banner-colors-text)}.textlink:hover,::slotted(a:hover){cursor:pointer}label,p,::slotted(label),::slotted(p){box-sizing:border-box;margin:0;min-width:0;max-width:100%;font-size:var(--internal-cookie-consent-banner-font-size-body);line-height:1.37;font-weight:400;letter-spacing:0.02em;color:var(--internal-cookie-consent-banner-colors-text)}.cc_settings{padding-bottom:2rem}.cc_settings_description{padding-bottom:1rem}.cc_checkboxes{display:grid}.cc_checkboxes_item{display:block;width:100%;padding-bottom:1rem;padding-left:0.5rem}.cc_buttons{padding-bottom:1rem;text-align:right}.cc_buttons>button{width:100%;margin-bottom:1rem}.cc_buttons>button:hover{cursor:pointer}@media (min-width: 48em){.cc_buttons>button{width:auto;margin-bottom:0}}button{box-sizing:border-box;min-width:0;appearance:none;display:inline-block;margin-top:0;margin-left:0.25rem;margin-bottom:0;margin-right:0.25rem;padding-top:1rem;padding-left:2.5rem;padding-bottom:1rem;padding-right:2.5rem;background-color:var(--internal-cookie-consent-banner-colors-primary);border-radius:var(--internal-cookie-consent-banner-border-radius-buttons);border-width:1px;border-color:var(--internal-cookie-consent-banner-colors-primary-border);border-style:solid;color:var(--internal-cookie-consent-banner-colors-primary-content);font-size:inherit;font-size:1rem;font-weight:700;line-height:inherit;text-decoration:none;text-align:center}button.secondary{background-color:var(--internal-cookie-consent-banner-colors-secondary);border-color:var(--internal-cookie-consent-banner-colors-secondary-border);color:var(--internal-cookie-consent-banner-colors-secondary-content)}";
 
@@ -152,3 +152,3 @@ const CookieConsentBanner = class {
         }
-        return (h("div", { class: this.disableSlideInAnimation ? "cc cc_disable-slide-in" : "cc" }, h("div", { class: "cc_body", role: "dialog", "aria-modal": "true", "aria-label": "Cookie Consent Management", tabIndex: -1 }, Boolean(this.headline) && (h("h1", { class: "cc_headline", part: "headline" }, this.headline)), h("form", null, h("p", { class: "cc_text", part: "description-main" }, h("slot", null)), Boolean(this.isShownSettings) && (h("div", { class: "cc_settings" }, h("p", { part: "description-settings", class: "cc_settings_description" }, this.contentSettingsDescription), h("div", { class: "cc_checkboxes" }, this.availableCategories.map((category) => (h("label", { part: "checkbox-label", class: "cc_checkboxes_item", htmlFor: `check-category-${category.label}` }, h("input", { part: "checkbox", id: `check-category-${category.label}`, type: "checkbox", disabled: category.isMandatory ?? false, checked: this.acceptedCategoriesNext.includes(category.key), onChange: (event) => {
+        return (h("div", { class: this.disableSlideInAnimation ? "cc cc_disable-slide-in" : "cc" }, h("div", { class: "cc_body", role: "dialog", part: "body", "aria-modal": "true", "aria-label": "Cookie Consent Management", tabIndex: -1 }, Boolean(this.headline) && (h("h1", { class: "cc_headline", part: "headline" }, this.headline)), h("form", null, h("p", { class: "cc_text", part: "description-main" }, h("slot", null)), Boolean(this.isShownSettings) && (h("div", { class: "cc_settings" }, h("p", { part: "description-settings", class: "cc_settings_description" }, this.contentSettingsDescription), h("div", { class: "cc_checkboxes" }, this.availableCategories.map((category) => (h("label", { part: "checkbox-label", class: "cc_checkboxes_item", htmlFor: `check-category-${category.label}` }, h("input", { part: "checkbox", id: `check-category-${category.label}`, type: "checkbox", disabled: category.isMandatory ?? false, checked: this.acceptedCategoriesNext.includes(category.key), onChange: (event) => {
                 const isChecked = event.currentTarget.checked;
@@ -155,0 +155,0 @@ if (isChecked) {

package.json

 {
   "name": "@porscheofficial/cookie-consent-banner",
   "license": "MIT",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "repository": {
@@ -6,0 +6,0 @@ "type": "git",

README.md

@@ -117,2 +117,5 @@ <div align="center">
 
+    /* BOX-SHADOW */
+    --cookie-consent-banner-box-shadow: 0px -3px 13px 0px rgba(57, 57, 57, 0.38);
+
     /* SPACINGS */
@@ -152,10 +155,12 @@ --cookie-consent-banner-spacings-container-padding-top: 1rem;
 7. `cookie-consent-banner::part(headline)` for styling the headline
+8. `cookie-consent-banner::part(body)` for styling the banner body
 
 ```html
 <style>
-  cookie-consent-banner::part(primary-button) {
+  cookie-consent-banner::part(button-accept-all) {
     text-transform: uppercase;
   }
 
-  cookie-consent-banner::part(secondary-button) {
+  cookie-consent-banner::part(button-persist-selection),
+  cookie-consent-banner::part(button-essential-only) {
     text-transform: uppercase;
@@ -173,2 +178,6 @@ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
   }
+
+  cookie-consent-banner::part(body) {
+    max-width: 80ch;
+  }
 </style>
@@ -245,3 +254,3 @@ ```
   const cookieConsentBannerElement = document.querySelector(
-    "cookie-consent-banner"
+    "cookie-consent-banner",
   );
@@ -291,3 +300,3 @@ cookieConsentBannerElement.availableCategories = [
     "cookie_consent_preferences_restored",
-    loadTagManager
+    loadTagManager,
   );
@@ -362,3 +371,3 @@ window.addEventListener("cookie_consent_preferences_updated", loadTagManager);
   const cookieConsentBannerElement = document.querySelector(
-    "cookie-consent-banner"
+    "cookie-consent-banner",
   );
@@ -413,3 +422,3 @@ cookieConsentBannerElement.availableCategories = [
       "src",
-      "https://www.googletagmanager.com/gtag/js?id=ENTERID"
+      "https://www.googletagmanager.com/gtag/js?id=ENTERID",
     );
@@ -420,3 +429,3 @@ scriptElement.setAttribute("data-scriptid", "ga");
       scriptElement,
-      firstScriptElement
+      firstScriptElement,
     );
@@ -423,0 +432,0 @@ }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1425465

increased by0.08%

Lines of code

7878

increased by0.11%

Number of lines in readme file

455

increased by2.02%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes