@vaadin/cookie-consent - npm Package Compare versions

Comparing version 24.7.0-alpha1 to 24.7.0-alpha10

package.json

 {
   "name": "@vaadin/cookie-consent",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
@@ -38,11 +38,14 @@ "access": "public"
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.7.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha1",
-    "cookieconsent": "^3.0.6"
+    "@vaadin/component-base": "24.7.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha10",
+    "cookieconsent": "^3.0.6",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha1",
-    "@vaadin/testing-helpers": "^1.0.0"
+    "@vaadin/chai-plugins": "24.7.0-alpha10",
+    "@vaadin/test-runner-commands": "24.7.0-alpha10",
+    "@vaadin/testing-helpers": "^1.1.0"
   },
@@ -54,3 +57,3 @@ "cvdlName": "vaadin-cookie-consent",
   ],
-  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
+  "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
 }

src/vaadin-cookie-consent.d.ts

 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
@@ -12,2 +12,3 @@ * This program is available under Vaadin Commercial License and Service Terms.
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { CookieConsentMixin } from './vaadin-cookie-consent-mixin.js';
 
@@ -40,43 +41,4 @@ /**
  */
-declare class CookieConsent extends ElementMixin(HTMLElement) {
-  /**
-   * The message to show in the popup.
-   */
-  message: string;
+declare class CookieConsent extends CookieConsentMixin(ElementMixin(HTMLElement)) {}
 
-  /**
-   * The text to show on the dismiss/consent button.
-   */
-  dismiss: string;
-
-  /**
-   * The text to show on the 'learn more' link.
-   * @attr {string} learn-more
-   */
-  learnMore: string;
-
-  /**
-   * The URL the 'learn more' link should open.
-   * @attr {string} learn-more-link
-   */
-  learnMoreLink: string;
-
-  /**
-   * Determines the position of the banner.
-   *
-   * Possible values are: `top`, `bottom`, `top-left`, `top-right`, `bottom-left`, `bottom-right`
-   * For `top` and `bottom`, the banner is shown with full width. For the corner positions,
-   * it is shown as a smaller popup.
-   */
-  position: 'bottom-left' | 'bottom-right' | 'bottom' | 'top-left' | 'top-right' | 'top';
-
-  /**
-   * The name of the cookie to set to remember that the user has consented.
-   *
-   * This rarely needs to be changed.
-   * @attr {string} cookie-name
-   */
-  cookieName: string;
-}
-
 declare global {
@@ -83,0 +45,0 @@ interface HTMLElementTagNameMap {

src/vaadin-cookie-consent.js

 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
@@ -11,6 +11,6 @@ * This program is available under Vaadin Commercial License and Service Terms.
  */
-import 'cookieconsent/build/cookieconsent.min.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { CookieConsentMixin } from './vaadin-cookie-consent-mixin.js';
 
@@ -46,4 +46,5 @@ /**
  * @mixes ElementMixin
+ * @mixes CookieConsentMixin
  */
-class CookieConsent extends ElementMixin(PolymerElement) {
+class CookieConsent extends CookieConsentMixin(ElementMixin(PolymerElement)) {
   static get template() {
@@ -66,199 +67,2 @@ return html`
   }
-
-  static get properties() {
-    return {
-      /**
-       * The message to show in the popup.
-       * @type {string}
-       */
-      message: {
-        type: String,
-        value: 'This website uses cookies to ensure you get the best experience.',
-      },
-
-      /**
-       * The text to show on the dismiss/consent button.
-       * @type {string}
-       */
-      dismiss: {
-        type: String,
-        value: 'Got it!',
-      },
-
-      /**
-       * The text to show on the 'learn more' link.
-       * @attr {string} learn-more
-       * @type {string}
-       */
-      learnMore: {
-        type: String,
-        value: 'Learn more',
-      },
-
-      /**
-       * The URL the 'learn more' link should open.
-       * @attr {string} learn-more-link
-       * @type {string}
-       */
-      learnMoreLink: {
-        type: String,
-        value: 'https://cookiesandyou.com/',
-      },
-
-      /** @private */
-      _showLearnMore: {
-        type: Boolean,
-        computed: '_showLink(learnMoreLink)',
-      },
-
-      /**
-       * Determines the position of the banner.
-       *
-       * Possible values are: `top`, `bottom`, `top-left`, `top-right`, `bottom-left`, `bottom-right`
-       * For `top` and `bottom`, the banner is shown with full width. For the corner positions,
-       * it is shown as a smaller popup.
-       * @type {string}
-       */
-      position: {
-        type: String,
-        value: 'top',
-      },
-
-      /**
-       * The name of the cookie to set to remember that the user has consented.
-       *
-       * This rarely needs to be changed.
-       * @attr {string} cookie-name
-       * @type {string}
-       */
-      cookieName: {
-        type: String,
-        value: 'cookieconsent_status',
-      },
-
-      /** @private */
-      _css: {
-        type: Object,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__initialize(_showLearnMore, message, dismiss, learnMore, learnMoreLink, cookieName, position)'];
-  }
-
-  /** @private */
-  _showLink(learnMoreLink) {
-    return !!learnMoreLink;
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    // CSS is global so it must be injected into head...
-    this._css = document.createElement('style');
-    // prettier-ignore
-    this._css.innerText = '.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}'; // eslint-disable-line max-len
-    document.head.appendChild(this._css);
-
-    this.__initialize(
-      this._showLearnMore,
-      this.message,
-      this.dismiss,
-      this.learnMore,
-      this.learnMoreLink,
-      this.cookieName,
-      this.position,
-    );
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.__closePopup();
-    if (this._css.isConnected) {
-      this._css.remove();
-    }
-  }
-
-  /** @private */
-  __closePopup() {
-    const popup = this._getPopup();
-    if (popup) {
-      popup.parentNode.removeChild(popup);
-    }
-  }
-
-  /** @private */
-  // eslint-disable-next-line @typescript-eslint/max-params
-  __initialize(_showLearnMore, message, dismiss, learnMore, learnMoreLink, cookieName, position) {
-    this.__closePopup();
-
-    window.cookieconsent.initialise({
-      palette: {
-        popup: {
-          background: '#000',
-        },
-        button: {
-          // Cannot use a lumo color 'as is' due to
-          // https://github.com/vaadin/vaadin-lumo-styles/issues/22
-          // var(--lumo-primary-color) at 0.95 opacity
-          background: 'rgba(22, 118, 243, 0.95)',
-          hover: 'rgba(22, 118, 243, 1)',
-        },
-      },
-      showLink: _showLearnMore,
-      content: {
-        message,
-        dismiss,
-        link: learnMore,
-        href: learnMoreLink,
-      },
-      cookie: {
-        name: cookieName,
-      },
-      position,
-      elements: {
-        messagelink: `<span id="cookieconsent:desc" class="cc-message">${message} <a tabindex="0" class="cc-link" href="${learnMoreLink}" target="_blank" rel="noopener noreferrer nofollow">${learnMore}</a></span>`,
-        dismiss: `<a tabindex="0" class="cc-btn cc-dismiss">${dismiss}</a>`,
-      },
-    });
-
-    const popup = this._getPopup();
-    if (popup) {
-      // NVDA announces a popup appearance only if the role is alert
-      popup.setAttribute('role', 'alert');
-
-      // In order to make an `<a>` element act as a button, setting
-      // `role="button"` is not enough: https://developer.mozilla.org/en-US
-      // /docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
-      const dismissButton = popup.querySelector('a.cc-btn');
-      dismissButton.addEventListener('keydown', (event) => {
-        const SPACE = 32;
-        const ENTER = 13;
-        const key = event.keyCode || event.which;
-        if (key === SPACE || key === ENTER) {
-          dismissButton.click();
-        }
-      });
-    }
-  }
-
-  /** @private */
-  _getPopup() {
-    return document.querySelector('[aria-label="cookieconsent"]');
-  }
-
-  /**
-   * Shows the popup even if the user has seen it before.
-   * @protected
-   */
-  _show() {
-    const popup = this._getPopup();
-    if (popup) {
-      popup.classList.remove('cc-invisible');
-      popup.style.display = '';
-    }
-  }
 }
@@ -265,0 +69,0 @@

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/cookie-consent",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
@@ -6,0 +6,0 @@ "contributions": {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/cookie-consent",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
@@ -6,0 +6,0 @@ "framework": "lit",

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

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

28541

increased by12.28%

Number of package files

23

increased by76.92%

Lines of code

649

increased by17.15%

Worsened metrics

Dependency count

7

increased by40%

Dev dependency count

3

increased by50%

Dependency changes

• + Added@open-wc/dedupe-mixin@^1.3.0

• + Addedlit@^3.0.0

• + Added@vaadin/component-base@24.7.0-alpha10(transitive)

• + Added@vaadin/icon@24.7.0-alpha10(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.7.0-alpha10(transitive)

• + Added@vaadin/vaadin-material-styles@24.7.0-alpha10(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.7.0-alpha10(transitive)

• - Removed@vaadin/component-base@24.7.0-alpha1(transitive)

• - Removed@vaadin/icon@24.7.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.7.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@24.7.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.7.0-alpha1(transitive)

• Updated@vaadin/component-base@24.7.0-alpha10

• Updated@vaadin/vaadin-lumo-styles@24.7.0-alpha10

• Updated@vaadin/vaadin-material-styles@24.7.0-alpha10