@justeattakeaway/pie-cookie-banner 0.11.13 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +37 -33
- package/locales/bg-bg.json +4 -0
- package/locales/de-de.json +4 -0
- package/locales/dk-dk.json +4 -0
- package/locales/en-gb.json +4 -0
- package/locales/fr-fr.json +4 -0
- package/locales/it-it.json +4 -0
- package/locales/nl-nl.json +4 -0
- package/locales/pl-pl.json +4 -0
- package/package.json +1 -1
- package/src/index.ts +7 -7
package/dist/index.js
CHANGED
|
@@ -8,8 +8,8 @@ import "@justeattakeaway/pie-link";
|
|
|
8
8
|
import "@justeattakeaway/pie-modal";
|
|
9
9
|
import "@justeattakeaway/pie-switch";
|
|
10
10
|
import { defineCustomElement as _ } from "@justeattakeaway/pie-webc-core";
|
|
11
|
-
const
|
|
12
|
-
`,
|
|
11
|
+
const x = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-m-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}.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:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}
|
|
12
|
+
`, w = "pie-cookie-banner-accept-all", C = "pie-cookie-banner-necessary-only", B = "pie-cookie-banner-manage-prefs", $ = "pie-cookie-banner-prefs-saved", A = [
|
|
13
13
|
{
|
|
14
14
|
id: "all",
|
|
15
15
|
hasDivider: !0,
|
|
@@ -37,8 +37,8 @@ const w = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactiv
|
|
|
37
37
|
function u(a) {
|
|
38
38
|
console.error(`[localisation-utils]: ${a}`);
|
|
39
39
|
}
|
|
40
|
-
function
|
|
41
|
-
const n = (t) => String.prototype.split.call(e, t).filter(Boolean).reduce((
|
|
40
|
+
function T(a, e) {
|
|
41
|
+
const n = (t) => String.prototype.split.call(e, t).filter(Boolean).reduce((o, r) => o != null && typeof o == "object" ? o[r] : o, a), i = n(/[,[\]]+?/) || n(/[,[\].]+?/);
|
|
42
42
|
return typeof i != "string" ? "" : i;
|
|
43
43
|
}
|
|
44
44
|
function b(a, e) {
|
|
@@ -46,34 +46,34 @@ function b(a, e) {
|
|
|
46
46
|
throw new Error('"locale" parameter cannot be empty');
|
|
47
47
|
if (!e)
|
|
48
48
|
throw new Error('"key" parameter cannot be empty');
|
|
49
|
-
const n =
|
|
49
|
+
const n = T(a, e);
|
|
50
50
|
return n || (u(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
|
|
51
51
|
}
|
|
52
|
-
function
|
|
52
|
+
function O(a) {
|
|
53
53
|
const n = a.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
|
|
54
54
|
return new RegExp(n, "igm");
|
|
55
55
|
}
|
|
56
|
-
function
|
|
56
|
+
function E(a, e) {
|
|
57
57
|
const n = Object.keys(e);
|
|
58
58
|
if (n.length === 0)
|
|
59
59
|
return [a];
|
|
60
|
-
const i =
|
|
60
|
+
const i = O(n);
|
|
61
61
|
return a.split(i).filter((t) => !!t).map((t) => {
|
|
62
62
|
if (!t.match(i))
|
|
63
63
|
return t;
|
|
64
|
-
const
|
|
65
|
-
if (!
|
|
64
|
+
const r = t.match(/<(.*)>(.*)<\/.*>/);
|
|
65
|
+
if (!r)
|
|
66
66
|
return t;
|
|
67
|
-
const [, d, c] =
|
|
67
|
+
const [, d, c] = r;
|
|
68
68
|
return [d, c];
|
|
69
69
|
}).map((t) => {
|
|
70
70
|
if (!Array.isArray(t))
|
|
71
71
|
return t;
|
|
72
|
-
const [
|
|
73
|
-
return c || typeof c == "function" ? c(d) : (u(`Custom tag "${
|
|
72
|
+
const [r, d] = t, c = e[r];
|
|
73
|
+
return c || typeof c == "function" ? c(d) : (u(`Custom tag "${r}" does not have a matching enhancer function`), d);
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
|
-
function
|
|
76
|
+
function S(a, e, n) {
|
|
77
77
|
if (!a)
|
|
78
78
|
throw new Error('"locale" parameter cannot be empty');
|
|
79
79
|
if (!e)
|
|
@@ -81,17 +81,21 @@ function M(a, e, n) {
|
|
|
81
81
|
if (!n)
|
|
82
82
|
throw new Error('"customTagEnhancers" parameter cannot be empty');
|
|
83
83
|
const i = b(a, e);
|
|
84
|
-
return
|
|
84
|
+
return E(i, n);
|
|
85
85
|
}
|
|
86
|
-
const
|
|
86
|
+
const M = {
|
|
87
87
|
title: "Cookies",
|
|
88
88
|
description: "We use our own and third party cookies and other tech to enhance and personalise your user experience, optimize analytics, and show ads with third parties (read our <linkStatement>Statement</linkStatement>). Necessary cookies are always set. Click <linkNecessaryOnly>Necessary only</linkNecessaryOnly> to continue without accepting more. Click <linkManagePreferences>Manage preferences</linkManagePreferences> to share your preferences or <linkAcceptAll>Accept all</linkAcceptAll>.",
|
|
89
89
|
cta: {
|
|
90
90
|
managePreferences: "Manage preferences",
|
|
91
91
|
necessaryOnly: "Necessary only",
|
|
92
92
|
acceptAll: "Accept all"
|
|
93
|
+
},
|
|
94
|
+
links: {
|
|
95
|
+
cookieStatement: "en/cookiestatement",
|
|
96
|
+
cookieTechnologies: "en/technologies"
|
|
93
97
|
}
|
|
94
|
-
},
|
|
98
|
+
}, N = {
|
|
95
99
|
title: "Manage your preferences",
|
|
96
100
|
description: "You can find all the information in the <linkCookieStatement>Cookie Statement</linkCookieStatement> and <linkCookieTechList>Cookie technology list</linkCookieTechList>.",
|
|
97
101
|
all: {
|
|
@@ -120,24 +124,24 @@ const N = {
|
|
|
120
124
|
}
|
|
121
125
|
}
|
|
122
126
|
}, z = {
|
|
123
|
-
banner:
|
|
124
|
-
preferencesManagement:
|
|
127
|
+
banner: M,
|
|
128
|
+
preferencesManagement: N
|
|
125
129
|
};
|
|
126
130
|
var P = Object.defineProperty, R = Object.getOwnPropertyDescriptor, p = (a, e, n, i) => {
|
|
127
|
-
for (var t = i > 1 ? void 0 : i ? R(e, n) : e,
|
|
128
|
-
(
|
|
131
|
+
for (var t = i > 1 ? void 0 : i ? R(e, n) : e, o = a.length - 1, r; o >= 0; o--)
|
|
132
|
+
(r = a[o]) && (t = (i ? r(e, n, t) : r(t)) || t);
|
|
129
133
|
return i && t && P(e, n, t), t;
|
|
130
134
|
};
|
|
131
135
|
const D = "pie-cookie-banner";
|
|
132
136
|
class l extends m {
|
|
133
137
|
constructor() {
|
|
134
138
|
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.locale = z, this._customTagEnhancers = {
|
|
135
|
-
linkStatement: (e) => s`<pie-link variant="inverse">${e}</pie-link>`,
|
|
139
|
+
linkStatement: (e) => s`<pie-link href="${this._localiseText("banner.links.cookieStatement")}" variant="inverse" target="_blank">${e}</pie-link>`,
|
|
136
140
|
linkNecessaryOnly: (e) => s`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${e}</pie-link>`,
|
|
137
141
|
linkManagePreferences: (e) => s`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${e}</pie-link>`,
|
|
138
142
|
linkAcceptAll: (e) => s`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${e}</pie-link>`,
|
|
139
|
-
linkCookieStatement: (e) => s`<pie-link href="
|
|
140
|
-
linkCookieTechList: (e) => s`<pie-link href="
|
|
143
|
+
linkCookieStatement: (e) => s`<pie-link href="${this._localiseText("banner.links.cookieStatement")}" size="small" target="_blank">${e}</pie-link>`,
|
|
144
|
+
linkCookieTechList: (e) => s`<pie-link href="${this._localiseText("banner.links.cookieTechnologies")}" size="small" target="_blank">${e}</pie-link>`
|
|
141
145
|
}, this._dispatchCookieBannerCustomEvent = (e, n) => {
|
|
142
146
|
const i = new CustomEvent(e, {
|
|
143
147
|
bubbles: !0,
|
|
@@ -148,15 +152,15 @@ class l extends m {
|
|
|
148
152
|
}, this._onNecessaryOnly = () => {
|
|
149
153
|
this._dispatchCookieBannerCustomEvent(C), this._isCookieBannerHidden = !0;
|
|
150
154
|
}, this._onAcceptAll = () => {
|
|
151
|
-
this._dispatchCookieBannerCustomEvent(
|
|
155
|
+
this._dispatchCookieBannerCustomEvent(w), this._isCookieBannerHidden = !0;
|
|
152
156
|
}, this._openManagePreferencesModal = () => {
|
|
153
157
|
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(B), this._isModalOpen = !0;
|
|
154
158
|
}, this._handleSwitchStates = (e) => {
|
|
155
159
|
const { id: n } = e == null ? void 0 : e.currentTarget, i = [...this._preferencesNodes].find(({ id: t }) => t === "all");
|
|
156
160
|
if (n === i.id) {
|
|
157
161
|
const t = e.target.checked;
|
|
158
|
-
this._preferencesNodes.forEach((
|
|
159
|
-
|
|
162
|
+
this._preferencesNodes.forEach((o) => {
|
|
163
|
+
o.isChecked = o.isDisabled ? o.isChecked : t;
|
|
160
164
|
});
|
|
161
165
|
} else
|
|
162
166
|
i.isChecked = [...this._preferencesNodes].filter(({ id: t }) => t !== "all").every(({ isChecked: t }) => t);
|
|
@@ -166,7 +170,7 @@ class l extends m {
|
|
|
166
170
|
return b(this.locale, e);
|
|
167
171
|
}
|
|
168
172
|
_localiseRichText(e) {
|
|
169
|
-
return
|
|
173
|
+
return S(this.locale, e, this._customTagEnhancers);
|
|
170
174
|
}
|
|
171
175
|
/**
|
|
172
176
|
* Handles closing the modal and re-displaying the cookie banner
|
|
@@ -199,13 +203,13 @@ class l extends m {
|
|
|
199
203
|
isChecked: n,
|
|
200
204
|
isDisabled: i,
|
|
201
205
|
hasDivider: t,
|
|
202
|
-
hasDescription:
|
|
206
|
+
hasDescription: o
|
|
203
207
|
}) {
|
|
204
|
-
const
|
|
208
|
+
const r = this._localiseText(`preferencesManagement.${e}.title`), d = `preferencesManagement.${e}.description`, c = o && this._localiseText(d);
|
|
205
209
|
return s`
|
|
206
210
|
<div class="c-cookieBanner-preference">
|
|
207
211
|
<div>
|
|
208
|
-
<h3 class="c-cookieBanner-subheading">${
|
|
212
|
+
<h3 class="c-cookieBanner-subheading">${r}</h3>
|
|
209
213
|
${c ? s`<p class="c-cookieBanner-description">${c}</p>` : h}
|
|
210
214
|
</div>
|
|
211
215
|
<pie-switch
|
|
@@ -286,7 +290,7 @@ class l extends m {
|
|
|
286
290
|
</aside>`;
|
|
287
291
|
}
|
|
288
292
|
}
|
|
289
|
-
l.styles = k(
|
|
293
|
+
l.styles = k(x);
|
|
290
294
|
p([
|
|
291
295
|
f()
|
|
292
296
|
], l.prototype, "_isCookieBannerHidden", 2);
|
|
@@ -304,7 +308,7 @@ p([
|
|
|
304
308
|
], l.prototype, "_preferencesNodes", 2);
|
|
305
309
|
_(D, l);
|
|
306
310
|
export {
|
|
307
|
-
|
|
311
|
+
w as ON_COOKIE_BANNER_ACCEPT_ALL,
|
|
308
312
|
B as ON_COOKIE_BANNER_MANAGE_PREFS,
|
|
309
313
|
C as ON_COOKIE_BANNER_NECESSARY_ONLY,
|
|
310
314
|
$ as ON_COOKIE_BANNER_PREFS_SAVED,
|
package/locales/bg-bg.json
CHANGED
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
"managePreferences": "Управление на предпочитанията",
|
|
7
7
|
"necessaryOnly": "Само необходимите",
|
|
8
8
|
"acceptAll": "Приемане на всички"
|
|
9
|
+
},
|
|
10
|
+
"links": {
|
|
11
|
+
"cookieStatement": "bg/cookiestatement",
|
|
12
|
+
"cookieTechnologies": "bg/technologies"
|
|
9
13
|
}
|
|
10
14
|
},
|
|
11
15
|
"preferencesManagement": {
|
package/locales/de-de.json
CHANGED
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
"managePreferences": "Einstellungen verwalten",
|
|
7
7
|
"necessaryOnly": "Nur notwendige",
|
|
8
8
|
"acceptAll": "Alle annehmen"
|
|
9
|
+
},
|
|
10
|
+
"links": {
|
|
11
|
+
"cookieStatement": "de/cookiestatement",
|
|
12
|
+
"cookieTechnologies": "de/technologies"
|
|
9
13
|
}
|
|
10
14
|
},
|
|
11
15
|
"preferencesManagement": {
|
package/locales/dk-dk.json
CHANGED
package/locales/en-gb.json
CHANGED
package/locales/fr-fr.json
CHANGED
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
"managePreferences": "Gérer les préférences",
|
|
7
7
|
"necessaryOnly": " Cookies essentiels uniquement",
|
|
8
8
|
"acceptAll": "Tout accepter"
|
|
9
|
+
},
|
|
10
|
+
"links": {
|
|
11
|
+
"cookieStatement": "fr/cookiestatement",
|
|
12
|
+
"cookieTechnologies": "fr/technologies"
|
|
9
13
|
}
|
|
10
14
|
},
|
|
11
15
|
"preferencesManagement": {
|
package/locales/it-it.json
CHANGED
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
"managePreferences": "Gestisci preferenze",
|
|
7
7
|
"necessaryOnly": " Solo necessari",
|
|
8
8
|
"acceptAll": "Accetta tutti"
|
|
9
|
+
},
|
|
10
|
+
"links": {
|
|
11
|
+
"cookieStatement": "it/cookiestatement",
|
|
12
|
+
"cookieTechnologies": "it/technologies"
|
|
9
13
|
}
|
|
10
14
|
},
|
|
11
15
|
"preferencesManagement": {
|
package/locales/nl-nl.json
CHANGED
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
"managePreferences": "Beheer voorkeuren",
|
|
7
7
|
"necessaryOnly": "Alleen noodzakelijk",
|
|
8
8
|
"acceptAll": "Alles accepteren"
|
|
9
|
+
},
|
|
10
|
+
"links": {
|
|
11
|
+
"cookieStatement": "nl/cookieverklaring",
|
|
12
|
+
"cookieTechnologies": "nl/technologies"
|
|
9
13
|
}
|
|
10
14
|
},
|
|
11
15
|
"preferencesManagement": {
|
package/locales/pl-pl.json
CHANGED
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
"managePreferences": "Zarządzaj ustawieniami",
|
|
7
7
|
"necessaryOnly": "Tylko niezbędne",
|
|
8
8
|
"acceptAll": "Zaakceptuj wszystkie"
|
|
9
|
+
},
|
|
10
|
+
"links": {
|
|
11
|
+
"cookieStatement": "pl/polityka-cookies",
|
|
12
|
+
"cookieTechnologies": "pl/technologies"
|
|
9
13
|
}
|
|
10
14
|
},
|
|
11
15
|
"preferencesManagement": {
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -60,13 +60,13 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
60
60
|
@queryAll('pie-switch')
|
|
61
61
|
_preferencesNodes!: NodeListOf<PieSwitch>;
|
|
62
62
|
|
|
63
|
-
private _customTagEnhancers:CustomTagEnhancers = {
|
|
64
|
-
linkStatement: (tagContent:string) => html`<pie-link variant="inverse">${tagContent}</pie-link>`,
|
|
65
|
-
linkNecessaryOnly: (tagContent:string) => html`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${tagContent}</pie-link>`,
|
|
66
|
-
linkManagePreferences: (tagContent:string) => html`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${tagContent}</pie-link>`,
|
|
67
|
-
linkAcceptAll: (tagContent:string) => html`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${tagContent}</pie-link>`,
|
|
68
|
-
linkCookieStatement: (tagContent:string) => html`<pie-link href="
|
|
69
|
-
linkCookieTechList: (tagContent:string) => html`<pie-link href="
|
|
63
|
+
private _customTagEnhancers: CustomTagEnhancers = {
|
|
64
|
+
linkStatement: (tagContent: string) => html`<pie-link href="${this._localiseText('banner.links.cookieStatement')}" variant="inverse" target="_blank">${tagContent}</pie-link>`,
|
|
65
|
+
linkNecessaryOnly: (tagContent: string) => html`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${tagContent}</pie-link>`,
|
|
66
|
+
linkManagePreferences: (tagContent: string) => html`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${tagContent}</pie-link>`,
|
|
67
|
+
linkAcceptAll: (tagContent: string) => html`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${tagContent}</pie-link>`,
|
|
68
|
+
linkCookieStatement: (tagContent: string) => html`<pie-link href="${this._localiseText('banner.links.cookieStatement')}" size="small" target="_blank">${tagContent}</pie-link>`,
|
|
69
|
+
linkCookieTechList: (tagContent: string) => html`<pie-link href="${this._localiseText('banner.links.cookieTechnologies')}" size="small" target="_blank">${tagContent}</pie-link>`,
|
|
70
70
|
};
|
|
71
71
|
|
|
72
72
|
private _localiseText (key:string):string {
|