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

Comparing version 4.0.1 to 4.0.2

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

@@ -1,9 +0,9 @@
-import { r as registerInstance, a as createEvent, h } from './index-143e1602.js';
+import { r as registerInstance, a as createEvent, h } from './index-b3282e04.js';
 
 const parseCookies = () => document.cookie.split(";").reduce((acc, curr) => {
-  const [key, value] = curr.split("=");
-  // key and value may be surrounded by whitespace (space and tab characters)
-  const cookieKey = decodeURIComponent(key).trim();
-  const cookieValue = decodeURIComponent(value).trim();
-  return { ...acc, [cookieKey]: cookieValue };
+    const [key, value] = curr.split("=");
+    // key and value may be surrounded by whitespace (space and tab characters)
+    const cookieKey = decodeURIComponent(key).trim();
+    const cookieValue = decodeURIComponent(value).trim();
+    return { ...acc, [cookieKey]: cookieValue };
 }, {});
@@ -14,34 +14,34 @@ const getCookie = (cookieName) => parseCookies()[cookieName];
 const stringifyCookie = (name, value, attributes) => {
-  const cookieAttributes = attributes ?? {};
-  const cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g, decodeURIComponent)}`;
-  const attributesString = Object.entries(cookieAttributes)
-    .filter(isDefined)
-    .map(([attributeKey, attributeValue]) => {
-    if (attributeKey === "expires") {
-      if (typeof attributeValue === "number") {
-        const MILLISECONDS_IN_DAY = 86400000;
-        const expiresAsDate = new Date(Date.now() + attributeValue * MILLISECONDS_IN_DAY);
-        return `${attributeKey}=${expiresAsDate.toUTCString()}`;
-      }
-      return `${attributeKey}=${attributeValue.toUTCString()}`;
-    }
-    if (attributeKey === "secure") {
-      return attributeKey;
-    }
-    return `${attributeKey}=${attributeValue}`;
-  })
-    .join("; ");
-  return `${cookieString}; ${attributesString}`;
+    const cookieAttributes = attributes ?? {};
+    const cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g, decodeURIComponent)}`;
+    const attributesString = Object.entries(cookieAttributes)
+        .filter(isDefined)
+        .map(([attributeKey, attributeValue]) => {
+        if (attributeKey === "expires") {
+            if (typeof attributeValue === "number") {
+                const MILLISECONDS_IN_DAY = 86400000;
+                const expiresAsDate = new Date(Date.now() + attributeValue * MILLISECONDS_IN_DAY);
+                return `${attributeKey}=${expiresAsDate.toUTCString()}`;
+            }
+            return `${attributeKey}=${attributeValue.toUTCString()}`;
+        }
+        if (attributeKey === "secure") {
+            return attributeKey;
+        }
+        return `${attributeKey}=${attributeValue}`;
+    })
+        .join("; ");
+    return `${cookieString}; ${attributesString}`;
 };
 const defaultCookieAttributes = {
-  path: "/",
-  expires: 7,
-  domain: document.location.hostname,
+    path: "/",
+    expires: 7,
+    domain: document.location.hostname,
 };
 const safeCookie = (...attrs) => {
-  const [name, value, attributes] = attrs;
-  document.cookie = stringifyCookie(name, value, {
-    ...defaultCookieAttributes,
-    ...attributes,
-  });
+    const [name, value, attributes] = attrs;
+    document.cookie = stringifyCookie(name, value, {
+        ...defaultCookieAttributes,
+        ...attributes,
+    });
 };
@@ -52,119 +52,119 @@
 const CookieConsentBanner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.eventCookieConsentRestored = createEvent(this, "cookie_consent_preferences_restored", 7);
-    this.eventCookieConsentUpdated = createEvent(this, "cookie_consent_preferences_updated", 7);
-    this.availableCategories = [];
-    this.cookieName = "cookies_accepted_categories";
-    this.cookieAttributes = defaultCookieAttributes;
-    this.disableResetSiteCookiesOnConsentWithdrawn = false;
-    this.disableSlideInAnimation = false;
-    this.headline = undefined;
-    this.btnLabelAcceptAndContinue = undefined;
-    this.btnLabelOnlyEssentialAndContinue = undefined;
-    this.btnLabelSelectAllAndContinue = undefined;
-    this.btnLabelPersistSelectionAndContinue = undefined;
-    this.contentSettingsDescription = undefined;
-    this.handlePreferencesRestored = undefined;
-    this.handlePreferencesUpdated = undefined;
-    this.isShown = false;
-    this.acceptedCategoriesNext = [];
-    this.acceptedCategoriesPersisted = [];
-    this.isShownSettings = false;
-  }
-  // Trigger isShown via Event
-  eventListenerShow() {
-    this.isShown = true;
-  }
-  // Trigger isShown and isShownSettings via Event
-  eventListenerDetailsShow() {
-    this.isShown = true;
-    this.isShownSettings = true;
-  }
-  // ===========================================================================
-  /* eslint-disable-next-line @typescript-eslint/explicit-member-accessibility */
-  componentWillLoad() {
-    const defaultCookies = this.availableCategories
-      .filter((category) => category.isMandatory)
-      .map((category) => category.key);
-    let cookieValues = [];
-    if (document.cookie) {
-      const cookieValueString = getCookie(this.cookieName);
-      cookieValues = cookieValueString ? cookieValueString.split(",") : [];
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.eventCookieConsentRestored = createEvent(this, "cookie_consent_preferences_restored", 7);
+        this.eventCookieConsentUpdated = createEvent(this, "cookie_consent_preferences_updated", 7);
+        this.availableCategories = [];
+        this.cookieName = "cookies_accepted_categories";
+        this.cookieAttributes = defaultCookieAttributes;
+        this.disableResetSiteCookiesOnConsentWithdrawn = false;
+        this.disableSlideInAnimation = false;
+        this.headline = undefined;
+        this.btnLabelAcceptAndContinue = undefined;
+        this.btnLabelOnlyEssentialAndContinue = undefined;
+        this.btnLabelSelectAllAndContinue = undefined;
+        this.btnLabelPersistSelectionAndContinue = undefined;
+        this.contentSettingsDescription = undefined;
+        this.handlePreferencesRestored = undefined;
+        this.handlePreferencesUpdated = undefined;
+        this.isShown = false;
+        this.acceptedCategoriesNext = [];
+        this.acceptedCategoriesPersisted = [];
+        this.isShownSettings = false;
     }
-    if (cookieValues.length === 0) {
-      this.isShown = true;
-      // Nothing stored yet
-      this.acceptedCategoriesPersisted = defaultCookies;
-      this.acceptedCategoriesNext = defaultCookies;
+    // Trigger isShown via Event
+    eventListenerShow() {
+        this.isShown = true;
     }
-    else {
-      this.acceptedCategoriesPersisted = cookieValues;
-      this.acceptedCategoriesNext = cookieValues;
-      this.eventCookieConsentRestored.emit({
-        acceptedCategories: cookieValues,
-      });
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (this.handlePreferencesRestored) {
-        this.handlePreferencesRestored({
-          acceptedCategories: cookieValues,
+    // Trigger isShown and isShownSettings via Event
+    eventListenerDetailsShow() {
+        this.isShown = true;
+        this.isShownSettings = true;
+    }
+    // ===========================================================================
+    /* eslint-disable-next-line @typescript-eslint/explicit-member-accessibility */
+    componentWillLoad() {
+        const defaultCookies = this.availableCategories
+            .filter((category) => category.isMandatory)
+            .map((category) => category.key);
+        let cookieValues = [];
+        if (document.cookie) {
+            const cookieValueString = getCookie(this.cookieName);
+            cookieValues = cookieValueString ? cookieValueString.split(",") : [];
+        }
+        if (cookieValues.length === 0) {
+            this.isShown = true;
+            // Nothing stored yet
+            this.acceptedCategoriesPersisted = defaultCookies;
+            this.acceptedCategoriesNext = defaultCookies;
+        }
+        else {
+            this.acceptedCategoriesPersisted = cookieValues;
+            this.acceptedCategoriesNext = cookieValues;
+            this.eventCookieConsentRestored.emit({
+                acceptedCategories: cookieValues,
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (this.handlePreferencesRestored) {
+                this.handlePreferencesRestored({
+                    acceptedCategories: cookieValues,
+                });
+            }
+        }
+    }
+    persistSelection() {
+        // Need to reset cookies?
+        const consentWithdrawn = Boolean(this.acceptedCategoriesPersisted.filter((x) => !this.acceptedCategoriesNext.includes(x)).length);
+        // Reset cookies
+        if (!this.disableResetSiteCookiesOnConsentWithdrawn && consentWithdrawn) {
+            document.cookie.split(";").forEach((c) => {
+                document.cookie = c
+                    .replace(/^ +/, "")
+                    .replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`);
+            });
+        }
+        this.acceptedCategoriesPersisted = this.acceptedCategoriesNext;
+        const cookieValue = this.acceptedCategoriesNext.join(",");
+        safeCookie(this.cookieName, cookieValue, this.cookieAttributes);
+        this.eventCookieConsentUpdated.emit({
+            acceptedCategories: this.acceptedCategoriesPersisted,
         });
-      }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (this.handlePreferencesUpdated) {
+            this.handlePreferencesUpdated({
+                acceptedCategories: this.acceptedCategoriesPersisted,
+            });
+        }
+        this.isShown = false;
     }
-  }
-  persistSelection() {
-    // Need to reset cookies?
-    const consentWithdrawn = Boolean(this.acceptedCategoriesPersisted.filter((x) => !this.acceptedCategoriesNext.includes(x)).length);
-    // Reset cookies
-    if (!this.disableResetSiteCookiesOnConsentWithdrawn && consentWithdrawn) {
-      document.cookie.split(";").forEach((c) => {
-        document.cookie = c
-          .replace(/^ +/, "")
-          .replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`);
-      });
+    handleAcceptAll() {
+        this.acceptedCategoriesNext = this.availableCategories.map((category) => category.key);
+        this.persistSelection();
     }
-    this.acceptedCategoriesPersisted = this.acceptedCategoriesNext;
-    const cookieValue = this.acceptedCategoriesNext.join(",");
-    safeCookie(this.cookieName, cookieValue, this.cookieAttributes);
-    this.eventCookieConsentUpdated.emit({
-      acceptedCategories: this.acceptedCategoriesPersisted,
-    });
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (this.handlePreferencesUpdated) {
-      this.handlePreferencesUpdated({
-        acceptedCategories: this.acceptedCategoriesPersisted,
-      });
+    handleEssentialsOnly() {
+        const mandatoryCategories = this.availableCategories.filter((category) => category.isMandatory);
+        this.acceptedCategoriesNext = mandatoryCategories.map((category) => category.key);
+        this.persistSelection();
     }
-    this.isShown = false;
-  }
-  handleAcceptAll() {
-    this.acceptedCategoriesNext = this.availableCategories.map((category) => category.key);
-    this.persistSelection();
-  }
-  handleEssentialsOnly() {
-    const mandatoryCategories = this.availableCategories.filter((category) => category.isMandatory);
-    this.acceptedCategoriesNext = mandatoryCategories.map((category) => category.key);
-    this.persistSelection();
-  }
-  render() {
-    if (!this.isShown) {
-      return null;
+    render() {
+        if (!this.isShown) {
+            return null;
+        }
+        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) => {
+                const isChecked = event.currentTarget.checked;
+                if (isChecked) {
+                    this.acceptedCategoriesNext = [
+                        ...this.acceptedCategoriesNext,
+                        category.key,
+                    ];
+                }
+                else {
+                    this.acceptedCategoriesNext =
+                        this.acceptedCategoriesNext.filter((item) => item !== category.key);
+                }
+            } }), " ", category.label, ": ", category.description)))))), h("div", { class: "cc_buttons" }, Boolean(this.isShownSettings) && (h("button", { part: "button-persist-selection", type: "submit", class: "btn_persist_selection secondary", onClick: () => this.persistSelection(), onKeyPress: () => this.persistSelection() }, this.btnLabelPersistSelectionAndContinue)), !this.isShownSettings &&
+            !!this.btnLabelOnlyEssentialAndContinue && (h("button", { part: "button-essential-only", class: "btn_essentials_only secondary", type: "button", onClick: () => this.handleEssentialsOnly(), onKeyPress: () => this.handleEssentialsOnly() }, this.btnLabelOnlyEssentialAndContinue)), h("button", { part: "button-accept-all", "data-test-id": "accept-all-btn", onClick: () => this.handleAcceptAll(), onKeyPress: () => this.handleAcceptAll(), type: "button", class: "btn_accept_all" }, !this.isShownSettings
+            ? this.btnLabelAcceptAndContinue
+            : this.btnLabelSelectAllAndContinue))))));
     }
-    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) => {
-        const isChecked = event.currentTarget.checked;
-        if (isChecked) {
-          this.acceptedCategoriesNext = [
-            ...this.acceptedCategoriesNext,
-            category.key,
-          ];
-        }
-        else {
-          this.acceptedCategoriesNext =
-            this.acceptedCategoriesNext.filter((item) => item !== category.key);
-        }
-      } }), " ", category.label, ": ", category.description)))))), h("div", { class: "cc_buttons" }, Boolean(this.isShownSettings) && (h("button", { part: "button-persist-selection", type: "submit", class: "btn_persist_selection secondary", onClick: () => this.persistSelection(), onKeyPress: () => this.persistSelection() }, this.btnLabelPersistSelectionAndContinue)), !this.isShownSettings &&
-      !!this.btnLabelOnlyEssentialAndContinue && (h("button", { part: "button-essential-only", class: "btn_essentials_only secondary", type: "button", onClick: () => this.handleEssentialsOnly(), onKeyPress: () => this.handleEssentialsOnly() }, this.btnLabelOnlyEssentialAndContinue)), h("button", { part: "button-accept-all", "data-test-id": "accept-all-btn", onClick: () => this.handleAcceptAll(), onKeyPress: () => this.handleAcceptAll(), type: "button", class: "btn_accept_all" }, !this.isShownSettings
-      ? this.btnLabelAcceptAndContinue
-      : this.btnLabelSelectAllAndContinue))))));
-  }
 };
@@ -171,0 +171,0 @@ CookieConsentBanner.style = cookieConsentBannerCss;

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

@@ -1,7 +0,7 @@
-import { B as BUILD, c as consoleDevInfo, H, d as doc, N as NAMESPACE, p as promiseResolve, b as bootstrapLazy } from './index-143e1602.js';
-export { s as setNonce } from './index-143e1602.js';
+import { B as BUILD, c as consoleDevInfo, H, d as doc, N as NAMESPACE, p as promiseResolve, b as bootstrapLazy } from './index-b3282e04.js';
+export { s as setNonce } from './index-b3282e04.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
- Stencil Client Patch Browser v4.2.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.12.0 | MIT Licensed | https://stenciljs.com
  */
@@ -17,14 +17,2 @@ const patchBrowser = () => {
     }
-    if (BUILD.profile && !performance.mark) {
-        // not all browsers support performance.mark/measure (Safari 10)
-        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
-        // simply stub the implementations out.
-        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
-        // @ts-ignore
-        performance.mark = performance.measure = () => {
-            /*noop*/
-        };
-        performance.getEntriesByName = () => [];
-    }
-    // @ts-ignore
     const scriptElm = BUILD.scriptDataOpts
@@ -31,0 +19,0 @@ ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||

dist/types/components.d.ts

@@ -40,3 +40,15 @@ /* eslint-disable */
 declare global {
+    interface HTMLCookieConsentBannerElementEventMap {
+        "cookie_consent_preferences_restored": any;
+        "cookie_consent_preferences_updated": any;
+    }
     interface HTMLCookieConsentBannerElement extends Components.CookieConsentBanner, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCookieConsentBannerElementEventMap>(type: K, listener: (this: HTMLCookieConsentBannerElement, ev: CookieConsentBannerCustomEvent<HTMLCookieConsentBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCookieConsentBannerElementEventMap>(type: K, listener: (this: HTMLCookieConsentBannerElement, ev: CookieConsentBannerCustomEvent<HTMLCookieConsentBannerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
@@ -43,0 +55,0 @@ var HTMLCookieConsentBannerElement: {

dist/types/components/cookie-consent-banner/cookie-consent-banner.d.ts

 import { EventEmitter, JSX } from "../../stencil-public-runtime";
 import { CategoryItem, CookieAttributes } from "./types";
 export declare class CookieConsentBanner {
-  availableCategories: CategoryItem[];
-  cookieName: string;
-  cookieAttributes: CookieAttributes;
-  disableResetSiteCookiesOnConsentWithdrawn: boolean;
-  disableSlideInAnimation: boolean;
-  headline: string;
-  btnLabelAcceptAndContinue: string;
-  btnLabelOnlyEssentialAndContinue: string;
-  btnLabelSelectAllAndContinue: string;
-  btnLabelPersistSelectionAndContinue: string;
-  contentSettingsDescription: string;
-  handlePreferencesRestored: ({ acceptedCategories, }: {
-    acceptedCategories: string[];
-  }) => void;
-  handlePreferencesUpdated: ({ acceptedCategories, }: {
-    acceptedCategories: string[];
-  }) => void;
-  isShown: boolean;
-  acceptedCategoriesNext: string[];
-  acceptedCategoriesPersisted: string[];
-  isShownSettings: boolean;
-  eventListenerShow(): void;
-  eventListenerDetailsShow(): void;
-  eventCookieConsentRestored: EventEmitter;
-  eventCookieConsentUpdated: EventEmitter;
-  componentWillLoad(): void;
-  private persistSelection;
-  private handleAcceptAll;
-  private handleEssentialsOnly;
-  render(): JSX.Element | null;
+    availableCategories: CategoryItem[];
+    cookieName: string;
+    cookieAttributes: CookieAttributes;
+    disableResetSiteCookiesOnConsentWithdrawn: boolean;
+    disableSlideInAnimation: boolean;
+    headline: string;
+    btnLabelAcceptAndContinue: string;
+    btnLabelOnlyEssentialAndContinue: string;
+    btnLabelSelectAllAndContinue: string;
+    btnLabelPersistSelectionAndContinue: string;
+    contentSettingsDescription: string;
+    handlePreferencesRestored: ({ acceptedCategories, }: {
+        acceptedCategories: string[];
+    }) => void;
+    handlePreferencesUpdated: ({ acceptedCategories, }: {
+        acceptedCategories: string[];
+    }) => void;
+    isShown: boolean;
+    acceptedCategoriesNext: string[];
+    acceptedCategoriesPersisted: string[];
+    isShownSettings: boolean;
+    eventListenerShow(): void;
+    eventListenerDetailsShow(): void;
+    eventCookieConsentRestored: EventEmitter;
+    eventCookieConsentUpdated: EventEmitter;
+    componentWillLoad(): void;
+    private persistSelection;
+    private handleAcceptAll;
+    private handleEssentialsOnly;
+    render(): JSX.Element | null;
 }

dist/types/components/cookie-consent-banner/types.d.ts

 export interface CategoryItem {
-  label: string;
-  key: string;
-  isMandatory?: boolean;
-  description: string;
+    label: string;
+    key: string;
+    isMandatory?: boolean;
+    description: string;
 }
 export interface CookieAttributes {
-  /** either number of days from now or a Date object */
-  expires?: number | Date;
-  path?: string;
-  domain?: string;
-  secure?: boolean;
-  sameSite?: "strict" | "lax" | "none";
+    /** either number of days from now or a Date object */
+    expires?: number | Date;
+    path?: string;
+    domain?: string;
+    secure?: boolean;
+    sameSite?: "strict" | "lax" | "none";
 }

dist/types/stencil-public-runtime.d.ts

@@ -7,2 +7,12 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
     /**
+     * When set to `true` this component will be form-associated. See
+     * https://stenciljs.com/docs/next/form-associated documentation on how to
+     * build form-associated Stencil components that integrate into forms like
+     * native browser elements such as `<input>` and `<textarea>`.
+     *
+     * The {@link AttachInternals} decorator allows for access to the
+     * `ElementInternals` object to modify the associated form.
+     */
+    formAssociated?: boolean;
+    /**
      * Tag name of the web component. Ideally, the tag name must be globally unique,
@@ -111,2 +121,5 @@ * so it's recommended to choose an unique prefix for all your components within the same collection.
 }
+export interface AttachInternalsDecorator {
+    (): PropertyDecorator;
+}
 export interface ListenDecorator {
@@ -181,2 +194,8 @@ (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 /**
+ * If the `formAssociated` option is set in options passed to the
+ * `@Component()` decorator then this decorator may be used to get access to the
+ * `ElementInternals` instance associated with the component.
+ */
+export declare const AttachInternals: AttachInternalsDecorator;
+/**
  * The `Listen()` decorator is for listening DOM events, including the ones
@@ -797,2 +816,5 @@ * dispatched from `@Events()`.
         value?: string | string[] | number;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
@@ -959,2 +981,5 @@ interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         width?: number | string;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
@@ -1123,2 +1148,3 @@ interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+        height?: number;
         media?: string;
@@ -1129,2 +1155,3 @@ sizes?: string;
         type?: string;
+        width?: number;
     }
@@ -1212,2 +1239,3 @@ interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
         id?: string;
+        inert?: boolean;
         lang?: string;
@@ -1221,2 +1249,3 @@ spellcheck?: 'true' | 'false' | any;
         title?: string;
+        popover?: string | null;
         inputMode?: string;
@@ -1223,0 +1252,0 @@ inputmode?: string;

package.json

 {
   "name": "@porscheofficial/cookie-consent-banner",
   "license": "MIT",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "repository": {
@@ -47,3 +47,3 @@ "type": "git",
   "dependencies": {
-    "@stencil/core": "4.2.1"
+    "@stencil/core": "4.12.0"
   },
@@ -53,8 +53,8 @@ "devDependencies": {
     "@stencil/react-output-target": "0.5.3",
-    "@types/jest": "27.0.3",
-    "eslint": "8.49.0",
+    "@types/jest": "29.5.12",
+    "eslint": "8.56.0",
     "eslint-plugin-html": "7.1.0",
-    "jest": "27.0.3",
-    "jest-cli": "27.4.5",
-    "prettier": "3.0.3",
+    "jest": "29.7.0",
+    "jest-cli": "29.7.0",
+    "prettier": "3.2.5",
     "puppeteer": "21.2.1",
@@ -61,0 +61,0 @@ "standard-version": "9.5.0",

src/components.d.ts

@@ -40,3 +40,15 @@ /* eslint-disable */
 declare global {
+    interface HTMLCookieConsentBannerElementEventMap {
+        "cookie_consent_preferences_restored": any;
+        "cookie_consent_preferences_updated": any;
+    }
     interface HTMLCookieConsentBannerElement extends Components.CookieConsentBanner, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCookieConsentBannerElementEventMap>(type: K, listener: (this: HTMLCookieConsentBannerElement, ev: CookieConsentBannerCustomEvent<HTMLCookieConsentBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCookieConsentBannerElementEventMap>(type: K, listener: (this: HTMLCookieConsentBannerElement, ev: CookieConsentBannerCustomEvent<HTMLCookieConsentBannerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
@@ -43,0 +55,0 @@ var HTMLCookieConsentBannerElement: {

src/components/cookie-consent-banner/cookie-consent-banner.test.ts

@@ -216,23 +216,30 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing";
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    await page.$eval("cookie-consent-banner", (elm: any) => {
-      /* eslint-disable @typescript-eslint/no-unsafe-member-access, no-param-reassign  */
-      // within the browser's context
-      // let's set new property values on the component
-      elm.availableCategories = [
-        {
-          description:
-            "Enable you to navigate and use the basic functions and to store preferences.",
-          key: "technically_required",
-          label: "Technically necessary cookies",
-          isMandatory: true,
-        },
-      ];
-      elm.cookieAttributes = {
-        expires: new Date("2024-01-01"),
-        secure: true,
-        sameSite: "lax",
-      };
-      /* eslint-enable @typescript-eslint/no-unsafe-member-access, no-param-reassign  */
-    });
+    const inAWeek = new Date();
+    // eslint-disable-next-line no-magic-numbers, @typescript-eslint/no-magic-numbers
+    inAWeek.setDate(inAWeek.getDate() + 7);
+
+    await page.$eval(
+      "cookie-consent-banner",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (elm: any, _inAWeekTimestamp) => {
+        /* eslint-disable @typescript-eslint/no-unsafe-member-access, no-param-reassign  */
+        // within the browser's context
+        // let's set new property values on the component
+        elm.availableCategories = [
+          {
+            description:
+              "Enable you to navigate and use the basic functions and to store preferences.",
+            key: "technically_required",
+            label: "Technically necessary cookies",
+            isMandatory: true,
+          },
+        ];
+        elm.cookieAttributes = {
+          expires: new Date(_inAWeekTimestamp),
+          secure: true,
+          sameSite: "lax",
+        };
+      },
+      inAWeek.getTime(),
+    );
     await page.waitForChanges();
@@ -244,4 +251,6 @@ await clickInCookieBanner(".btn_accept_all");
 
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    expect(cookieAcceptedCategories?.expires).toBe(1704067200);
+    expect(cookieAcceptedCategories?.expires).toBe(
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      Math.floor(inAWeek.getTime() / 1000), // Puppeteer returns seconds, JS uses milliseconds
+    );
     expect(cookieAcceptedCategories?.secure).toBe(true);
@@ -248,0 +257,0 @@ expect(cookieAcceptedCategories?.sameSite).toBe("Lax");

New 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

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-80%

Worsened metrics

Total package byte prevSize

1424268

decreased by-58.83%

Number of package files

43

decreased by-58.65%

Lines of code

7869

decreased by-62.4%

Dependency changes

• + Added@stencil/core@4.12.0(transitive)

• - Removed@stencil/core@4.2.1(transitive)

• Updated@stencil/core@4.12.0