@justeattakeaway/pie-cookie-banner 1.6.39 → 1.7.0

package/custom-elements.json

@@ -78,7 +78,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    hasPrimaryActionsOnly: false,\n    defaultPreferences: {},\n    country: Country.GREAT_BRITAIN,\n    language: Language.ENGLISH,\n    cookieStatementLink: '',\n    cookieTechnologiesLink: '',\n}"
+          "default": "{\n    hasPrimaryActionsOnly: false,\n    defaultPreferences: {},\n    country: Country.GREAT_BRITAIN,\n    language: Language.ENGLISH,\n    cookieStatementLink: '',\n    cookieTechnologiesLink: '',\n    openLinksInSameTab: false,\n}"
         },
         {
           "kind": "variable",
@@ -240,6 +240,11 @@
               "name": "language",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "openLinksInSameTab",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "_preferencesNodes",
@@ -247,6 +252,13 @@
                 "text": "NodeListOf<PieSwitch>"
               }
             },
+            {
+              "kind": "field",
+              "name": "_linkTargetAttribute",
+              "privacy": "private",
+              "description": "Returns the target attribute value for external links based on the openLinksInSameTab prop.\n- false (default): returns '_blank' (new tab)\n- true: returns '_self' (same tab)",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_setLocaleBasedOnCountryAndLanguage",
@@ -299,7 +311,7 @@
                 "text": "CustomTagEnhancers"
               },
               "privacy": "private",
-              "default": "{\n        linkStatement: (tagContent: string) => html`<pie-link href=\"${this.cookieStatementLink}\" variant=\"inverse\" target=\"_blank\" data-test-id=\"cookie-statement-link\">${tagContent}</pie-link>`,\n        linkNecessaryOnly: (tagContent: string) => html`<pie-link data-test-id=\"body-necessary-only\" tag=\"button\" variant=\"inverse\" @click=\"${this._onNecessaryOnly}\">${tagContent}</pie-link>`,\n        linkManagePreferences: (tagContent: string) => html`<pie-link data-test-id=\"body-manage-prefs\" tag=\"button\" variant=\"inverse\" @click=\"${this._openManagePreferencesModal}\">${tagContent}</pie-link>`,\n        linkAcceptAll: (tagContent: string) => html`<pie-link data-test-id=\"body-accept-all\" tag=\"button\" variant=\"inverse\" @click=\"${this._onAcceptAll}\">${tagContent}</pie-link>`,\n        linkCookieStatement: (tagContent: string) => html`<pie-link href=\"${this.cookieStatementLink}\" size=\"small\" target=\"_blank\" data-test-id=\"cookie-statement-link\">${tagContent}</pie-link>`,\n        linkCookieTechList: (tagContent: string) => html`<pie-link href=\"${this.cookieTechnologiesLink}\" size=\"small\" target=\"_blank\" data-test-id=\"cookie-technology-link\">${tagContent}</pie-link>`,\n    }"
+              "default": "{\n        linkStatement: (tagContent: string) => html`<pie-link href=\"${this.cookieStatementLink}\" variant=\"inverse\" target=\"${this._linkTargetAttribute}\" data-test-id=\"cookie-statement-link\">${tagContent}</pie-link>`,\n        linkNecessaryOnly: (tagContent: string) => html`<pie-link data-test-id=\"body-necessary-only\" tag=\"button\" variant=\"inverse\" @click=\"${this._onNecessaryOnly}\">${tagContent}</pie-link>`,\n        linkManagePreferences: (tagContent: string) => html`<pie-link data-test-id=\"body-manage-prefs\" tag=\"button\" variant=\"inverse\" @click=\"${this._openManagePreferencesModal}\">${tagContent}</pie-link>`,\n        linkAcceptAll: (tagContent: string) => html`<pie-link data-test-id=\"body-accept-all\" tag=\"button\" variant=\"inverse\" @click=\"${this._onAcceptAll}\">${tagContent}</pie-link>`,\n        linkCookieStatement: (tagContent: string) => html`<pie-link href=\"${this.cookieStatementLink}\" size=\"small\" target=\"${this._linkTargetAttribute}\" data-test-id=\"cookie-statement-link\">${tagContent}</pie-link>`,\n        linkCookieTechList: (tagContent: string) => html`<pie-link href=\"${this.cookieTechnologiesLink}\" size=\"small\" target=\"${this._linkTargetAttribute}\" data-test-id=\"cookie-technology-link\">${tagContent}</pie-link>`,\n    }"
             },
             {
               "kind": "method",

package/dist/index.d.ts

@@ -78,6 +78,12 @@ export declare interface CookieBannerProps {
      * or { 'functional': true, 'personalized': true, 'analytical': true }
      */
     defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
+    /**
+     * When true, external links (Cookie Statement, Cookie Technologies)
+     * will open in the same tab (`target="_self"`).
+     * When false (default), links open in a new browser tab (`target="_blank"`).
+     */
+    openLinksInSameTab?: boolean;
 }
 
 export declare const Country: {
@@ -147,7 +153,14 @@ export declare class PieCookieBanner extends PieElement implements CookieBannerP
     cookieTechnologiesLink: string;
     country: string;
     language: string;
+    openLinksInSameTab: boolean;
     _preferencesNodes: NodeListOf<PieSwitch>;
+    /**
+     * Returns the target attribute value for external links based on the openLinksInSameTab prop.
+     * - false (default): returns '_blank' (new tab)
+     * - true: returns '_self' (same tab)
+     */
+    private get _linkTargetAttribute();
     updated(changedProperties: PropertyValues<this>): Promise<void>;
     private _setLocaleBasedOnCountryAndLanguage;
     /**

package/dist/index.js

@@ -1,15 +1,15 @@
-import { LitElement as x, unsafeCSS as R, html as d, nothing as N } from "lit";
-import { state as y, property as u, queryAll as T } from "lit/decorators.js";
-import { repeat as C } from "lit/directives/repeat.js";
+import { LitElement as T, unsafeCSS as x, html as p, nothing as N } from "lit";
+import { state as y, property as f, queryAll as I } from "lit/decorators.js";
+import { repeat as R } from "lit/directives/repeat.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-divider";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-link";
 import "@justeattakeaway/pie-modal";
 import "@justeattakeaway/pie-switch";
-import { safeCustomElement as w, dispatchCustomEvent as b } from "@justeattakeaway/pie-webc-core";
-import E from "@justeattakeaway/pie-cookie-banner/locales/en.js";
-const I = (e, t, n) => {
+import { safeCustomElement as C, dispatchCustomEvent as b } from "@justeattakeaway/pie-webc-core";
+import L from "@justeattakeaway/pie-cookie-banner/locales/en.js";
+const w = (e, t, n) => {
   const a = e[t];
   return a ? typeof a == "function" ? a() : Promise.resolve(a) : new Promise((o, s) => {
     (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
@@ -21,12 +21,12 @@ const I = (e, t, n) => {
       )
     );
   });
-}, k = class k extends x {
+}, k = class k extends T {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", k.v);
   }
 };
-k.v = "1.6.39";
+k.v = "1.7.0";
 let A = k;
 const O = "*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-l-family);--cb-font-size: calc(var(--dt-font-body-l-size) * 1px);--cb-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--cb-font-weight: var(--dt-font-body-l-weight);--cb-padding-inline: var(--dt-spacing-d);--cb-padding-block: var(--dt-spacing-d);--cb-offset: 0;color-scheme:only dark;background-color:var(--dt-color-background-dark);color:var(--dt-color-content-inverse);font-family:var(--cb-font-family);font-size:var(--cb-font-size);line-height:var(--cb-line-height);font-weight:var(--cb-font-weight);padding-block-start:var(--cb-padding-block);padding-block-end:var(--cb-padding-block);max-height:432px;position:fixed;bottom:var(--cb-offset);left:var(--cb-offset);right:var(--cb-offset);border-top-left-radius:var(--dt-radius-rounded-c);border-top-right-radius:var(--dt-radius-rounded-c);z-index:var(--dt-z-index-cookie-banner)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner{--cb-padding-inline: var(--dt-spacing-f);--cb-offset: var(--dt-spacing-d);max-height:90%;border-bottom-left-radius:var(--dt-radius-rounded-c);border-bottom-right-radius:var(--dt-radius-rounded-c)}}.c-cookieBanner[isCookieBannerHidden]{display:none}@media (prefers-reduced-motion: no-preference){.c-cookieBanner{animation:.5s animate-enter ease-out}@keyframes animate-enter{0%{transform:translate3d(0,75%,0)}to{transform:translateZ(0)}}}.c-cookieBanner-title,.c-cookieBanner-body,.c-cookieBanner-actions{padding-inline-start:var(--cb-padding-inline);padding-inline-end:var(--cb-padding-inline)}.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--narrow);--cb-title-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-title-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-title-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--wide);--cb-title-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-body{--cb-scroll-shadow-color: var(--dt-color-black);margin-block-start:var(--dt-spacing-a);max-height:200px;overflow-y:auto;background:linear-gradient(to bottom,transparent,var(--dt-color-background-dark) 75%) center bottom,linear-gradient(transparent,var(--cb-scroll-shadow-color)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 8px;background-attachment:local,scroll}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-body{max-height:150px}}.c-cookieBanner-actions{--cb-actions-flex-dir: column;margin-block-start:var(--dt-spacing-d);display:flex;gap:var(--dt-spacing-d);flex-direction:var(--cb-actions-flex-dir)}.c-cookieBanner-actions>pie-link{text-align:center;align-self:center}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-actions{--cb-actions-flex-dir: row-reverse;justify-content:flex-start;align-items:center}}.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--narrow);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-subheading-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-subheading-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--wide);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-description{font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px)}.c-cookieBanner-preference{display:flex;gap:var(--dt-spacing-d);justify-content:space-between;margin-block-start:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}", i = {
   BULGARIAN: "bg",
@@ -84,13 +84,14 @@ const O = "*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb
     id: "personalized",
     hasDescription: !0
   }
-], g = {
+], h = {
   hasPrimaryActionsOnly: !1,
   defaultPreferences: {},
   country: r.GREAT_BRITAIN,
   language: i.ENGLISH,
   cookieStatementLink: "",
-  cookieTechnologiesLink: ""
+  cookieTechnologiesLink: "",
+  openLinksInSameTab: !1
 }, m = /* @__PURE__ */ new Set([
   `${i.BULGARIAN}`,
   `${i.DANISH}`,
@@ -126,18 +127,18 @@ const O = "*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb
   [r.SPAIN, `${i.SPANISH}`],
   [r.SWITZERLAND, `${i.GERMAN}`]
 ]);
-function L(e) {
+function E(e) {
   console.error(`[localisation-utils]: ${e}`);
 }
 function j(e, t) {
-  const n = (o) => String.prototype.split.call(t, o).filter(Boolean).reduce((s, c) => s != null && typeof s == "object" ? s[c] : s, e), a = n(/[,[\]]+?/) || n(/[,[\].]+?/);
+  const n = (o) => String.prototype.split.call(t, o).filter(Boolean).reduce((s, l) => s != null && typeof s == "object" ? s[l] : s, e), a = n(/[,[\]]+?/) || n(/[,[\].]+?/);
   return typeof a != "string" ? "" : a;
 }
 function S(e, t) {
   if (!e) throw new Error('"locale" parameter cannot be empty');
   if (!t) throw new Error('"key" parameter cannot be empty');
   const n = j(e, t);
-  return n || (L(`Couldn't find a value for the key "${t}", it will be used as fallback.`), t);
+  return n || (E(`Couldn't find a value for the key "${t}", it will be used as fallback.`), t);
 }
 function U(e) {
   const n = e.map((o) => `(<${o}.*>.*</${o}>)`).join("|");
@@ -149,14 +150,14 @@ function F(e, t) {
   const a = U(n);
   return e.split(a).filter((o) => !!o).map((o) => {
     if (!o.match(a)) return o;
-    const c = o.match(/<(.*)>(.*)<\/.*>/);
-    if (!c) return o;
-    const [, h, f] = c;
-    return [h, f];
+    const l = o.match(/<(.*)>(.*)<\/.*>/);
+    if (!l) return o;
+    const [, g, u] = l;
+    return [g, u];
   }).map((o) => {
     if (!Array.isArray(o)) return o;
-    const [c, h] = o, f = t[c];
-    return f || typeof f == "function" ? f(h) : (L(`Custom tag "${c}" does not have a matching enhancer function`), h);
+    const [l, g] = o, u = t[l];
+    return u || typeof u == "function" ? u(g) : (E(`Custom tag "${l}" does not have a matching enhancer function`), g);
   });
 }
 function K(e, t, n) {
@@ -166,26 +167,26 @@ function K(e, t, n) {
   const a = S(e, t);
   return F(a, n);
 }
-var V = Object.defineProperty, W = Object.getOwnPropertyDescriptor, p = (e, t, n, a) => {
-  for (var o = a > 1 ? void 0 : a ? W(t, n) : t, s = e.length - 1, c; s >= 0; s--)
-    (c = e[s]) && (o = (a ? c(t, n, o) : c(o)) || o);
+var V = Object.defineProperty, W = Object.getOwnPropertyDescriptor, d = (e, t, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? W(t, n) : t, s = e.length - 1, l; s >= 0; s--)
+    (l = e[s]) && (o = (a ? l(t, n, o) : l(o)) || o);
   return a && o && V(t, n, o), o;
 };
-let l = class extends A {
+let c = class extends A {
   constructor() {
-    super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this._locale = E, this.hasPrimaryActionsOnly = g.hasPrimaryActionsOnly, this.defaultPreferences = g.defaultPreferences, this.cookieStatementLink = g.cookieStatementLink, this.cookieTechnologiesLink = g.cookieTechnologiesLink, this.country = g.country, this.language = g.language, this._getLocaleString = (e, t) => {
+    super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this._locale = L, this.hasPrimaryActionsOnly = h.hasPrimaryActionsOnly, this.defaultPreferences = h.defaultPreferences, this.cookieStatementLink = h.cookieStatementLink, this.cookieTechnologiesLink = h.cookieTechnologiesLink, this.country = h.country, this.language = h.language, this.openLinksInSameTab = h.openLinksInSameTab, this._getLocaleString = (e, t) => {
       let n = `${e}-${t}`.toLowerCase();
       if (m.has(n) || (n = `${e}`.toLowerCase(), m.has(n)))
         return n;
       const a = G.get(t.toLowerCase());
-      return a && m.has(a) ? a : `${g.language}`;
+      return a && m.has(a) ? a : `${h.language}`;
     }, this._customTagEnhancers = {
-      linkStatement: (e) => d`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
-      linkNecessaryOnly: (e) => d`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${e}</pie-link>`,
-      linkManagePreferences: (e) => d`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${e}</pie-link>`,
-      linkAcceptAll: (e) => d`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${e}</pie-link>`,
-      linkCookieStatement: (e) => d`<pie-link href="${this.cookieStatementLink}" size="small" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
-      linkCookieTechList: (e) => d`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="_blank" data-test-id="cookie-technology-link">${e}</pie-link>`
+      linkStatement: (e) => p`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="${this._linkTargetAttribute}" data-test-id="cookie-statement-link">${e}</pie-link>`,
+      linkNecessaryOnly: (e) => p`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${e}</pie-link>`,
+      linkManagePreferences: (e) => p`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${e}</pie-link>`,
+      linkAcceptAll: (e) => p`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${e}</pie-link>`,
+      linkCookieStatement: (e) => p`<pie-link href="${this.cookieStatementLink}" size="small" target="${this._linkTargetAttribute}" data-test-id="cookie-statement-link">${e}</pie-link>`,
+      linkCookieTechList: (e) => p`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="${this._linkTargetAttribute}" data-test-id="cookie-technology-link">${e}</pie-link>`
     }, this._onNecessaryOnly = () => {
       b(this, P), this._isCookieBannerHidden = !0;
     }, this._onAcceptAll = () => {
@@ -203,6 +204,14 @@ let l = class extends A {
         n.checked = [...this._preferencesNodes].filter(({ id: a }) => a !== "all").every(({ checked: a }) => a);
     };
   }
+  /**
+   * Returns the target attribute value for external links based on the openLinksInSameTab prop.
+   * - false (default): returns '_blank' (new tab)
+   * - true: returns '_self' (same tab)
+   */
+  get _linkTargetAttribute() {
+    return this.openLinksInSameTab ? "_self" : "_blank";
+  }
   async updated(e) {
     (e.has("language") || e.has("country")) && await this._setLocaleBasedOnCountryAndLanguage(this.language, this.country);
   }
@@ -210,9 +219,9 @@ let l = class extends A {
   async _setLocaleBasedOnCountryAndLanguage(e, t) {
     try {
       const n = this._getLocaleString(e, t);
-      this._locale = (await I(/* @__PURE__ */ Object.assign({ "../locales/bg.js": () => import("./bg-DGJESQ4e.js"), "../locales/ca.js": () => import("./ca-Bcf7sXQS.js"), "../locales/da.js": () => import("./da-zmkmo2qP.js"), "../locales/de.js": () => import("./de-CCDQDaL_.js"), "../locales/en-fr.js": () => import("./en-fr-B3W1OBz4.js"), "../locales/en.js": () => import("./en-Cg12pw29.js"), "../locales/es.js": () => import("./es-BGd5IeE8.js"), "../locales/fr-fr.js": () => import("./fr-fr-Bj0z2tFA.js"), "../locales/fr.js": () => import("./fr-ZJirJTQ1.js"), "../locales/he.js": () => import("./he-CD4nZodw.js"), "../locales/it.js": () => import("./it-C20n5M6-.js"), "../locales/nl.js": () => import("./nl-potC62A2.js"), "../locales/pl.js": () => import("./pl-BZMXvf-W.js"), "../locales/sk.js": () => import("./sk-B2GkzqzB.js") }), `../locales/${n}.js`, 3)).default;
+      this._locale = (await w(/* @__PURE__ */ Object.assign({ "../locales/bg.js": () => import("./bg-DGJESQ4e.js"), "../locales/ca.js": () => import("./ca-Bcf7sXQS.js"), "../locales/da.js": () => import("./da-zmkmo2qP.js"), "../locales/de.js": () => import("./de-CCDQDaL_.js"), "../locales/en-fr.js": () => import("./en-fr-B3W1OBz4.js"), "../locales/en.js": () => import("./en-Cg12pw29.js"), "../locales/es.js": () => import("./es-BGd5IeE8.js"), "../locales/fr-fr.js": () => import("./fr-fr-Bj0z2tFA.js"), "../locales/fr.js": () => import("./fr-ZJirJTQ1.js"), "../locales/he.js": () => import("./he-CD4nZodw.js"), "../locales/it.js": () => import("./it-C20n5M6-.js"), "../locales/nl.js": () => import("./nl-potC62A2.js"), "../locales/pl.js": () => import("./pl-BZMXvf-W.js"), "../locales/sk.js": () => import("./sk-B2GkzqzB.js") }), `../locales/${n}.js`, 3)).default;
     } catch {
-      this._locale = E;
+      this._locale = L;
     }
   }
   _localiseText(e) {
@@ -255,15 +264,15 @@ let l = class extends A {
     hasDescription: o
   }) {
     var _;
-    const s = this._localiseText(`preferencesManagement.${e}.title`), c = `preferencesManagement.${e}.description`, h = o && this._localiseText(c), v = ["functional", "personalized", "analytical"].every((B) => {
+    const s = this._localiseText(`preferencesManagement.${e}.title`), l = `preferencesManagement.${e}.description`, g = o && this._localiseText(l), v = ["functional", "personalized", "analytical"].every((B) => {
       var $;
       return (($ = this.defaultPreferences) == null ? void 0 : $[B]) === !0;
     });
-    return d`
+    return p`
             <div class="c-cookieBanner-preference">
                 <div>
                     <h3 class="c-cookieBanner-subheading">${s}</h3>
-                     ${h ? d`<p class="c-cookieBanner-description">${h}</p>` : N}
+                     ${g ? p`<p class="c-cookieBanner-description">${g}</p>` : N}
                  </div>
                 <pie-switch
                     id="${e}"
@@ -272,18 +281,18 @@ let l = class extends A {
                     @change="${this._handleSwitchStates}">
                 </pie-switch>
             </div>
-            ${a ? d`<pie-divider></pie-divider>` : N}`;
+            ${a ? p`<pie-divider></pie-divider>` : N}`;
   }
   /**
    * Renders the modal content.
    * @private
    */
   renderModalContent() {
-    return d`
+    return p`
             <p class="c-cookieBanner-description" data-test-id="modal-description">
                 ${this._localiseRichText("preferencesManagement.description")}
             </p>
-            ${C(
+            ${R(
       z,
       ({ id: e }) => e,
       (e) => this.renderPreference(e)
@@ -294,7 +303,7 @@ let l = class extends A {
       text: this._localiseText("preferencesManagement.cta.save.label"),
       ariaLabel: this._localiseText("preferencesManagement.cta.save.label")
     };
-    return d`
+    return p`
         <pie-modal
             .isOpen="${this._isModalOpen}"
             hasBackButton
@@ -341,40 +350,43 @@ let l = class extends A {
         </aside>`;
   }
 };
-l.styles = R(O);
-p([
+c.styles = x(O);
+d([
   y()
-], l.prototype, "_isCookieBannerHidden", 2);
-p([
+], c.prototype, "_isCookieBannerHidden", 2);
+d([
   y()
-], l.prototype, "_isModalOpen", 2);
-p([
+], c.prototype, "_isModalOpen", 2);
+d([
   y()
-], l.prototype, "_locale", 2);
-p([
-  u({ type: Boolean })
-], l.prototype, "hasPrimaryActionsOnly", 2);
-p([
-  u({ type: Object })
-], l.prototype, "defaultPreferences", 2);
-p([
-  u({ type: String })
-], l.prototype, "cookieStatementLink", 2);
-p([
-  u({ type: String })
-], l.prototype, "cookieTechnologiesLink", 2);
-p([
-  u({ type: String })
-], l.prototype, "country", 2);
-p([
-  u({ type: String })
-], l.prototype, "language", 2);
-p([
-  T("pie-switch")
-], l.prototype, "_preferencesNodes", 2);
-l = p([
-  w("pie-cookie-banner")
-], l);
+], c.prototype, "_locale", 2);
+d([
+  f({ type: Boolean })
+], c.prototype, "hasPrimaryActionsOnly", 2);
+d([
+  f({ type: Object })
+], c.prototype, "defaultPreferences", 2);
+d([
+  f({ type: String })
+], c.prototype, "cookieStatementLink", 2);
+d([
+  f({ type: String })
+], c.prototype, "cookieTechnologiesLink", 2);
+d([
+  f({ type: String })
+], c.prototype, "country", 2);
+d([
+  f({ type: String })
+], c.prototype, "language", 2);
+d([
+  f({ type: Boolean })
+], c.prototype, "openLinksInSameTab", 2);
+d([
+  I("pie-switch")
+], c.prototype, "_preferencesNodes", 2);
+c = d([
+  C("pie-cookie-banner")
+], c);
 export {
   r as Country,
   i as Language,
@@ -382,9 +394,9 @@ export {
   M as ON_COOKIE_BANNER_MANAGE_PREFS,
   P as ON_COOKIE_BANNER_NECESSARY_ONLY,
   D as ON_COOKIE_BANNER_PREFS_SAVED,
-  l as PieCookieBanner,
+  c as PieCookieBanner,
   m as availableLocales,
   G as defaultLocaleForCountry,
-  g as defaultProps,
+  h as defaultProps,
   z as preferences
 };

package/dist/react.d.ts

@@ -79,6 +79,12 @@ export declare interface CookieBannerProps {
      * or { 'functional': true, 'personalized': true, 'analytical': true }
      */
     defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
+    /**
+     * When true, external links (Cookie Statement, Cookie Technologies)
+     * will open in the same tab (`target="_self"`).
+     * When false (default), links open in a new browser tab (`target="_blank"`).
+     */
+    openLinksInSameTab?: boolean;
 }
 
 export declare const Country: {
@@ -150,7 +156,14 @@ declare class PieCookieBanner_2 extends PieElement implements CookieBannerProps
     cookieTechnologiesLink: string;
     country: string;
     language: string;
+    openLinksInSameTab: boolean;
     _preferencesNodes: NodeListOf<PieSwitch>;
+    /**
+     * Returns the target attribute value for external links based on the openLinksInSameTab prop.
+     * - false (default): returns '_blank' (new tab)
+     * - true: returns '_self' (same tab)
+     */
+    private get _linkTargetAttribute();
     updated(changedProperties: PropertyValues<this>): Promise<void>;
     private _setLocaleBasedOnCountryAndLanguage;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-cookie-banner",
   "description": "PIE Design System Cookie Banner built using Web Components",
-  "version": "1.6.39",
+  "version": "1.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -51,19 +51,19 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.26.0",
+    "@justeattakeaway/pie-css": "0.26.1",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.10.1",
-    "@justeattakeaway/pie-divider": "1.5.6",
-    "@justeattakeaway/pie-icon-button": "2.3.5",
-    "@justeattakeaway/pie-link": "1.3.7",
-    "@justeattakeaway/pie-modal": "1.22.2",
-    "@justeattakeaway/pie-switch": "2.3.9",
-    "@justeattakeaway/pie-webc-core": "6.0.0"
+    "@justeattakeaway/pie-button": "1.10.2",
+    "@justeattakeaway/pie-divider": "1.5.7",
+    "@justeattakeaway/pie-icon-button": "2.4.0",
+    "@justeattakeaway/pie-link": "1.3.8",
+    "@justeattakeaway/pie-modal": "1.22.4",
+    "@justeattakeaway/pie-switch": "2.3.10",
+    "@justeattakeaway/pie-webc-core": "6.0.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -120,6 +120,13 @@ export interface CookieBannerProps {
      * or { 'functional': true, 'personalized': true, 'analytical': true }
      */
     defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
+
+    /**
+     * When true, external links (Cookie Statement, Cookie Technologies)
+     * will open in the same tab (`target="_self"`).
+     * When false (default), links open in a new browser tab (`target="_blank"`).
+     */
+    openLinksInSameTab?: boolean;
 }
 
 /**
@@ -199,6 +206,7 @@ export const defaultProps: DefaultProps = {
     language: Language.ENGLISH,
     cookieStatementLink: '',
     cookieTechnologiesLink: '',
+    openLinksInSameTab: false,
 };
 
 // Available locale files

package/src/index.ts

@@ -82,9 +82,21 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
     @property({ type: String })
     public language = defaultProps.language;
 
+    @property({ type: Boolean })
+    public openLinksInSameTab = defaultProps.openLinksInSameTab;
+
     @queryAll('pie-switch')
         _preferencesNodes!: NodeListOf<PieSwitch>;
 
+    /**
+     * Returns the target attribute value for external links based on the openLinksInSameTab prop.
+     * - false (default): returns '_blank' (new tab)
+     * - true: returns '_self' (same tab)
+     */
+    private get _linkTargetAttribute () {
+        return this.openLinksInSameTab ? '_self' : '_blank';
+    }
+
     async updated (changedProperties: PropertyValues<this>) {
         // Re-fetch locale when country or language changes
         if (changedProperties.has('language') || changedProperties.has('country')) {
@@ -133,12 +145,12 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
     };
 
     private _customTagEnhancers: CustomTagEnhancers = {
-        linkStatement: (tagContent: string) => html`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="_blank" data-test-id="cookie-statement-link">${tagContent}</pie-link>`,
+        linkStatement: (tagContent: string) => html`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="${this._linkTargetAttribute}" data-test-id="cookie-statement-link">${tagContent}</pie-link>`,
         linkNecessaryOnly: (tagContent: string) => html`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${tagContent}</pie-link>`,
         linkManagePreferences: (tagContent: string) => html`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${tagContent}</pie-link>`,
         linkAcceptAll: (tagContent: string) => html`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${tagContent}</pie-link>`,
-        linkCookieStatement: (tagContent: string) => html`<pie-link href="${this.cookieStatementLink}" size="small" target="_blank" data-test-id="cookie-statement-link">${tagContent}</pie-link>`,
-        linkCookieTechList: (tagContent: string) => html`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="_blank" data-test-id="cookie-technology-link">${tagContent}</pie-link>`,
+        linkCookieStatement: (tagContent: string) => html`<pie-link href="${this.cookieStatementLink}" size="small" target="${this._linkTargetAttribute}" data-test-id="cookie-statement-link">${tagContent}</pie-link>`,
+        linkCookieTechList: (tagContent: string) => html`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="${this._linkTargetAttribute}" data-test-id="cookie-technology-link">${tagContent}</pie-link>`,
     };
 
     private _localiseText (key: string) {