@justeattakeaway/pie-cookie-banner 0.17.2 → 0.17.3
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/custom-elements.json +0 -20
- package/dist/index.d.ts +0 -13
- package/dist/index.js +54 -61
- package/dist/react.d.ts +0 -13
- package/package.json +8 -8
- package/src/index.ts +5 -27
package/custom-elements.json
CHANGED
|
@@ -251,26 +251,6 @@
|
|
|
251
251
|
},
|
|
252
252
|
"description": "Handles saving the user cookie preferences, closing the modal and the cookie banner\nCreates a state object for the save event, indicating the checked status\nof each preference except for the `all` preference."
|
|
253
253
|
},
|
|
254
|
-
{
|
|
255
|
-
"kind": "field",
|
|
256
|
-
"name": "_dispatchCookieBannerCustomEvent",
|
|
257
|
-
"privacy": "private",
|
|
258
|
-
"description": "Note: We should aim to have a shareable event helper system to allow\nus to share this across components in-future.\n\nDispatch a custom event.\n\nTo be used whenever we have behavioral events we want to\nbubble up through the cookie banner.",
|
|
259
|
-
"parameters": [
|
|
260
|
-
{
|
|
261
|
-
"name": "eventType",
|
|
262
|
-
"type": {
|
|
263
|
-
"text": "string"
|
|
264
|
-
}
|
|
265
|
-
},
|
|
266
|
-
{
|
|
267
|
-
"name": "detail",
|
|
268
|
-
"type": {
|
|
269
|
-
"text": "any"
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
]
|
|
273
|
-
},
|
|
274
254
|
{
|
|
275
255
|
"kind": "field",
|
|
276
256
|
"name": "_onNecessaryOnly",
|
package/dist/index.d.ts
CHANGED
|
@@ -136,19 +136,6 @@ export declare class PieCookieBanner extends LitElement implements CookieBannerP
|
|
|
136
136
|
* }
|
|
137
137
|
*/
|
|
138
138
|
private _handlePreferencesSaved;
|
|
139
|
-
/**
|
|
140
|
-
* Note: We should aim to have a shareable event helper system to allow
|
|
141
|
-
* us to share this across components in-future.
|
|
142
|
-
*
|
|
143
|
-
* Dispatch a custom event.
|
|
144
|
-
*
|
|
145
|
-
* To be used whenever we have behavioral events we want to
|
|
146
|
-
* bubble up through the cookie banner.
|
|
147
|
-
*
|
|
148
|
-
* @param {string} eventType
|
|
149
|
-
* @param {any} detail
|
|
150
|
-
*/
|
|
151
|
-
private _dispatchCookieBannerCustomEvent;
|
|
152
139
|
/**
|
|
153
140
|
* Hides the cookie banner and emits the necessary only event
|
|
154
141
|
*/
|
package/dist/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { state as
|
|
3
|
-
import { repeat as
|
|
1
|
+
import { unsafeCSS as x, LitElement as B, html as s, nothing as k } from "lit";
|
|
2
|
+
import { state as b, property as h, queryAll as $ } from "lit/decorators.js";
|
|
3
|
+
import { repeat as A } from "lit/directives/repeat.js";
|
|
4
4
|
import "@justeattakeaway/pie-button";
|
|
5
5
|
import "@justeattakeaway/pie-divider";
|
|
6
6
|
import "@justeattakeaway/pie-icon-button";
|
|
7
7
|
import "@justeattakeaway/pie-link";
|
|
8
8
|
import "@justeattakeaway/pie-modal";
|
|
9
9
|
import "@justeattakeaway/pie-switch";
|
|
10
|
-
import { defineCustomElement as
|
|
11
|
-
const
|
|
12
|
-
`,
|
|
10
|
+
import { defineCustomElement as C, dispatchCustomEvent as f } from "@justeattakeaway/pie-webc-core";
|
|
11
|
+
const T = `*{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-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}
|
|
12
|
+
`, O = "pie-cookie-banner-accept-all", S = "pie-cookie-banner-necessary-only", M = "pie-cookie-banner-manage-prefs", N = "pie-cookie-banner-prefs-saved", P = [
|
|
13
13
|
{
|
|
14
14
|
id: "all",
|
|
15
15
|
hasDivider: !0,
|
|
@@ -34,30 +34,30 @@ const A = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactiv
|
|
|
34
34
|
hasDescription: !0
|
|
35
35
|
}
|
|
36
36
|
];
|
|
37
|
-
function
|
|
37
|
+
function m(a) {
|
|
38
38
|
console.error(`[localisation-utils]: ${a}`);
|
|
39
39
|
}
|
|
40
|
-
function
|
|
40
|
+
function E(a, e) {
|
|
41
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
|
-
function
|
|
44
|
+
function y(a, e) {
|
|
45
45
|
if (!a)
|
|
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 =
|
|
50
|
-
return n || (
|
|
49
|
+
const n = E(a, e);
|
|
50
|
+
return n || (m(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
|
|
51
51
|
}
|
|
52
|
-
function
|
|
52
|
+
function z(a) {
|
|
53
53
|
const n = a.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
|
|
54
54
|
return new RegExp(n, "igm");
|
|
55
55
|
}
|
|
56
|
-
function
|
|
56
|
+
function L(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 = z(n);
|
|
61
61
|
return a.split(i).filter((t) => !!t).map((t) => {
|
|
62
62
|
if (!t.match(i))
|
|
63
63
|
return t;
|
|
@@ -70,20 +70,20 @@ function z(a, e) {
|
|
|
70
70
|
if (!Array.isArray(t))
|
|
71
71
|
return t;
|
|
72
72
|
const [r, p] = t, l = e[r];
|
|
73
|
-
return l || typeof l == "function" ? l(p) : (
|
|
73
|
+
return l || typeof l == "function" ? l(p) : (m(`Custom tag "${r}" does not have a matching enhancer function`), p);
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
|
-
function
|
|
76
|
+
function R(a, e, n) {
|
|
77
77
|
if (!a)
|
|
78
78
|
throw new Error('"locale" parameter cannot be empty');
|
|
79
79
|
if (!e)
|
|
80
80
|
throw new Error('"key" parameter cannot be empty');
|
|
81
81
|
if (!n)
|
|
82
82
|
throw new Error('"customTagEnhancers" parameter cannot be empty');
|
|
83
|
-
const i =
|
|
84
|
-
return
|
|
83
|
+
const i = y(a, e);
|
|
84
|
+
return L(i, n);
|
|
85
85
|
}
|
|
86
|
-
const
|
|
86
|
+
const j = {
|
|
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: {
|
|
@@ -91,7 +91,7 @@ const R = {
|
|
|
91
91
|
necessaryOnly: "Necessary only",
|
|
92
92
|
acceptAll: "Accept all"
|
|
93
93
|
}
|
|
94
|
-
},
|
|
94
|
+
}, H = {
|
|
95
95
|
title: "Manage your preferences",
|
|
96
96
|
description: "You can find all the information in the <linkCookieStatement>Cookie Statement</linkCookieStatement> and <linkCookieTechList>Cookie technology list</linkCookieTechList>.",
|
|
97
97
|
all: {
|
|
@@ -119,38 +119,31 @@ const R = {
|
|
|
119
119
|
ariaLabel: ""
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
|
-
},
|
|
123
|
-
banner:
|
|
124
|
-
preferencesManagement:
|
|
122
|
+
}, D = {
|
|
123
|
+
banner: j,
|
|
124
|
+
preferencesManagement: H
|
|
125
125
|
};
|
|
126
|
-
var
|
|
127
|
-
for (var t = i > 1 ? void 0 : i ?
|
|
126
|
+
var K = Object.defineProperty, F = Object.getOwnPropertyDescriptor, d = (a, e, n, i) => {
|
|
127
|
+
for (var t = i > 1 ? void 0 : i ? F(e, n) : e, o = a.length - 1, r; o >= 0; o--)
|
|
128
128
|
(r = a[o]) && (t = (i ? r(e, n, t) : r(t)) || t);
|
|
129
|
-
return i && t &&
|
|
129
|
+
return i && t && K(e, n, t), t;
|
|
130
130
|
};
|
|
131
|
-
const
|
|
132
|
-
class c extends
|
|
131
|
+
const V = "pie-cookie-banner";
|
|
132
|
+
class c extends B {
|
|
133
133
|
constructor() {
|
|
134
|
-
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.defaultPreferences = {}, this.locale =
|
|
134
|
+
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.defaultPreferences = {}, this.locale = D, this.cookieStatementLink = "", this.cookieTechnologiesLink = "", this._customTagEnhancers = {
|
|
135
135
|
linkStatement: (e) => s`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
|
|
136
136
|
linkNecessaryOnly: (e) => s`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${e}</pie-link>`,
|
|
137
137
|
linkManagePreferences: (e) => s`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${e}</pie-link>`,
|
|
138
138
|
linkAcceptAll: (e) => s`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${e}</pie-link>`,
|
|
139
139
|
linkCookieStatement: (e) => s`<pie-link href="${this.cookieStatementLink}" size="small" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
|
|
140
140
|
linkCookieTechList: (e) => s`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="_blank" data-test-id="cookie-technology-link">${e}</pie-link>`
|
|
141
|
-
}, this._dispatchCookieBannerCustomEvent = (e, n) => {
|
|
142
|
-
const i = new CustomEvent(e, {
|
|
143
|
-
bubbles: !0,
|
|
144
|
-
composed: !0,
|
|
145
|
-
detail: n
|
|
146
|
-
});
|
|
147
|
-
this.dispatchEvent(i);
|
|
148
141
|
}, this._onNecessaryOnly = () => {
|
|
149
|
-
this
|
|
142
|
+
f(this, S), this._isCookieBannerHidden = !0;
|
|
150
143
|
}, this._onAcceptAll = () => {
|
|
151
|
-
this
|
|
144
|
+
f(this, O), this._isCookieBannerHidden = !0;
|
|
152
145
|
}, this._openManagePreferencesModal = () => {
|
|
153
|
-
this._isCookieBannerHidden = !0, this
|
|
146
|
+
this._isCookieBannerHidden = !0, f(this, M), this._isModalOpen = !0;
|
|
154
147
|
}, this._handleSwitchStates = (e) => {
|
|
155
148
|
const { id: n } = e == null ? void 0 : e.currentTarget, i = [...this._preferencesNodes].find(({ id: t }) => t === "all");
|
|
156
149
|
if (n === i.id) {
|
|
@@ -163,10 +156,10 @@ class c extends x {
|
|
|
163
156
|
};
|
|
164
157
|
}
|
|
165
158
|
_localiseText(e) {
|
|
166
|
-
return
|
|
159
|
+
return y(this.locale, e);
|
|
167
160
|
}
|
|
168
161
|
_localiseRichText(e) {
|
|
169
|
-
return
|
|
162
|
+
return R(this.locale, e, this._customTagEnhancers);
|
|
170
163
|
}
|
|
171
164
|
/**
|
|
172
165
|
* Handles closing the modal and re-displaying the cookie banner
|
|
@@ -188,7 +181,7 @@ class c extends x {
|
|
|
188
181
|
let e = {};
|
|
189
182
|
[...this._preferencesNodes].filter(({ id: n }) => n !== "all").forEach(({ id: n, checked: i }) => {
|
|
190
183
|
e = { ...e, [n]: i };
|
|
191
|
-
}), this
|
|
184
|
+
}), f(this, N, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
|
|
192
185
|
}
|
|
193
186
|
/**
|
|
194
187
|
* Renders the content of the preference item.
|
|
@@ -201,25 +194,25 @@ class c extends x {
|
|
|
201
194
|
hasDivider: t,
|
|
202
195
|
hasDescription: o
|
|
203
196
|
}) {
|
|
204
|
-
var
|
|
205
|
-
const r = this._localiseText(`preferencesManagement.${e}.title`), p = `preferencesManagement.${e}.description`, l = o && this._localiseText(p),
|
|
206
|
-
var
|
|
207
|
-
return ((
|
|
197
|
+
var g;
|
|
198
|
+
const r = this._localiseText(`preferencesManagement.${e}.title`), p = `preferencesManagement.${e}.description`, l = o && this._localiseText(p), _ = ["functional", "personalized", "analytical"].every((w) => {
|
|
199
|
+
var u;
|
|
200
|
+
return ((u = this.defaultPreferences) == null ? void 0 : u[w]) === !0;
|
|
208
201
|
});
|
|
209
202
|
return s`
|
|
210
203
|
<div class="c-cookieBanner-preference">
|
|
211
204
|
<div>
|
|
212
205
|
<h3 class="c-cookieBanner-subheading">${r}</h3>
|
|
213
|
-
${l ? s`<p class="c-cookieBanner-description">${l}</p>` :
|
|
206
|
+
${l ? s`<p class="c-cookieBanner-description">${l}</p>` : k}
|
|
214
207
|
</div>
|
|
215
208
|
<pie-switch
|
|
216
209
|
id="${e}"
|
|
217
|
-
?checked="${((
|
|
210
|
+
?checked="${((g = this.defaultPreferences) == null ? void 0 : g[e]) || _ || n}"
|
|
218
211
|
?disabled="${i}"
|
|
219
212
|
@change="${this._handleSwitchStates}">
|
|
220
213
|
</pie-switch>
|
|
221
214
|
</div>
|
|
222
|
-
${t ? s`<pie-divider></pie-divider>` :
|
|
215
|
+
${t ? s`<pie-divider></pie-divider>` : k}`;
|
|
223
216
|
}
|
|
224
217
|
/**
|
|
225
218
|
* Renders the modal content.
|
|
@@ -230,8 +223,8 @@ class c extends x {
|
|
|
230
223
|
<p class="c-cookieBanner-description" data-test-id="modal-description">
|
|
231
224
|
${this._localiseRichText("preferencesManagement.description")}
|
|
232
225
|
</p>
|
|
233
|
-
${
|
|
234
|
-
|
|
226
|
+
${A(
|
|
227
|
+
P,
|
|
235
228
|
({ id: e }) => e,
|
|
236
229
|
(e) => this.renderPreference(e)
|
|
237
230
|
)}`;
|
|
@@ -290,12 +283,12 @@ class c extends x {
|
|
|
290
283
|
</aside>`;
|
|
291
284
|
}
|
|
292
285
|
}
|
|
293
|
-
c.styles =
|
|
286
|
+
c.styles = x(T);
|
|
294
287
|
d([
|
|
295
|
-
|
|
288
|
+
b()
|
|
296
289
|
], c.prototype, "_isCookieBannerHidden", 2);
|
|
297
290
|
d([
|
|
298
|
-
|
|
291
|
+
b()
|
|
299
292
|
], c.prototype, "_isModalOpen", 2);
|
|
300
293
|
d([
|
|
301
294
|
h({ type: Boolean })
|
|
@@ -313,14 +306,14 @@ d([
|
|
|
313
306
|
h({ type: String })
|
|
314
307
|
], c.prototype, "cookieTechnologiesLink", 2);
|
|
315
308
|
d([
|
|
316
|
-
|
|
309
|
+
$("pie-switch")
|
|
317
310
|
], c.prototype, "_preferencesNodes", 2);
|
|
318
|
-
|
|
311
|
+
C(V, c);
|
|
319
312
|
export {
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
313
|
+
O as ON_COOKIE_BANNER_ACCEPT_ALL,
|
|
314
|
+
M as ON_COOKIE_BANNER_MANAGE_PREFS,
|
|
315
|
+
S as ON_COOKIE_BANNER_NECESSARY_ONLY,
|
|
316
|
+
N as ON_COOKIE_BANNER_PREFS_SAVED,
|
|
324
317
|
c as PieCookieBanner,
|
|
325
|
-
|
|
318
|
+
P as preferences
|
|
326
319
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -139,19 +139,6 @@ declare class PieCookieBanner_2 extends LitElement implements CookieBannerProps
|
|
|
139
139
|
* }
|
|
140
140
|
*/
|
|
141
141
|
private _handlePreferencesSaved;
|
|
142
|
-
/**
|
|
143
|
-
* Note: We should aim to have a shareable event helper system to allow
|
|
144
|
-
* us to share this across components in-future.
|
|
145
|
-
*
|
|
146
|
-
* Dispatch a custom event.
|
|
147
|
-
*
|
|
148
|
-
* To be used whenever we have behavioral events we want to
|
|
149
|
-
* bubble up through the cookie banner.
|
|
150
|
-
*
|
|
151
|
-
* @param {string} eventType
|
|
152
|
-
* @param {any} detail
|
|
153
|
-
*/
|
|
154
|
-
private _dispatchCookieBannerCustomEvent;
|
|
155
142
|
/**
|
|
156
143
|
* Hides the cookie banner and emits the necessary only event
|
|
157
144
|
*/
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-cookie-banner",
|
|
3
3
|
"description": "PIE Design System Cookie Banner built using Web Components",
|
|
4
|
-
"version": "0.17.
|
|
4
|
+
"version": "0.17.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-button": "0.45.
|
|
43
|
-
"@justeattakeaway/pie-divider": "0.12.
|
|
44
|
-
"@justeattakeaway/pie-icon-button": "0.27.
|
|
45
|
-
"@justeattakeaway/pie-link": "0.15.
|
|
46
|
-
"@justeattakeaway/pie-modal": "0.38.
|
|
47
|
-
"@justeattakeaway/pie-switch": "0.27.
|
|
48
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
42
|
+
"@justeattakeaway/pie-button": "0.45.5",
|
|
43
|
+
"@justeattakeaway/pie-divider": "0.12.3",
|
|
44
|
+
"@justeattakeaway/pie-icon-button": "0.27.5",
|
|
45
|
+
"@justeattakeaway/pie-link": "0.15.3",
|
|
46
|
+
"@justeattakeaway/pie-modal": "0.38.7",
|
|
47
|
+
"@justeattakeaway/pie-switch": "0.27.1",
|
|
48
|
+
"@justeattakeaway/pie-webc-core": "0.19.0"
|
|
49
49
|
},
|
|
50
50
|
"volta": {
|
|
51
51
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -12,7 +12,7 @@ import '@justeattakeaway/pie-modal';
|
|
|
12
12
|
/* eslint-disable import/no-duplicates */
|
|
13
13
|
import '@justeattakeaway/pie-switch';
|
|
14
14
|
import { PieSwitch } from '@justeattakeaway/pie-switch';
|
|
15
|
-
import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
15
|
+
import { defineCustomElement, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
|
|
16
16
|
/* eslint-enable import/no-duplicates */
|
|
17
17
|
|
|
18
18
|
import styles from './cookie-banner.scss?inline';
|
|
@@ -113,38 +113,16 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
113
113
|
state = { ...state, [id]: checked };
|
|
114
114
|
});
|
|
115
115
|
|
|
116
|
-
this
|
|
116
|
+
dispatchCustomEvent(this, ON_COOKIE_BANNER_PREFS_SAVED, state);
|
|
117
117
|
this._isModalOpen = false;
|
|
118
118
|
this._isCookieBannerHidden = true;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
/**
|
|
122
|
-
* Note: We should aim to have a shareable event helper system to allow
|
|
123
|
-
* us to share this across components in-future.
|
|
124
|
-
*
|
|
125
|
-
* Dispatch a custom event.
|
|
126
|
-
*
|
|
127
|
-
* To be used whenever we have behavioral events we want to
|
|
128
|
-
* bubble up through the cookie banner.
|
|
129
|
-
*
|
|
130
|
-
* @param {string} eventType
|
|
131
|
-
* @param {any} detail
|
|
132
|
-
*/
|
|
133
|
-
private _dispatchCookieBannerCustomEvent = (eventType: string, detail?: CustomEventInit['detail']) : void => {
|
|
134
|
-
const event = new CustomEvent(eventType, {
|
|
135
|
-
bubbles: true,
|
|
136
|
-
composed: true,
|
|
137
|
-
detail,
|
|
138
|
-
});
|
|
139
|
-
|
|
140
|
-
this.dispatchEvent(event);
|
|
141
|
-
};
|
|
142
|
-
|
|
143
121
|
/**
|
|
144
122
|
* Hides the cookie banner and emits the necessary only event
|
|
145
123
|
*/
|
|
146
124
|
private _onNecessaryOnly = () : void => {
|
|
147
|
-
this
|
|
125
|
+
dispatchCustomEvent(this, ON_COOKIE_BANNER_NECESSARY_ONLY);
|
|
148
126
|
this._isCookieBannerHidden = true;
|
|
149
127
|
};
|
|
150
128
|
|
|
@@ -152,7 +130,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
152
130
|
* Hides the cookie banner and emits the accept all event
|
|
153
131
|
*/
|
|
154
132
|
private _onAcceptAll = () : void => {
|
|
155
|
-
this
|
|
133
|
+
dispatchCustomEvent(this, ON_COOKIE_BANNER_ACCEPT_ALL);
|
|
156
134
|
this._isCookieBannerHidden = true;
|
|
157
135
|
};
|
|
158
136
|
|
|
@@ -161,7 +139,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
161
139
|
*/
|
|
162
140
|
private _openManagePreferencesModal = () : void => {
|
|
163
141
|
this._isCookieBannerHidden = true;
|
|
164
|
-
this
|
|
142
|
+
dispatchCustomEvent(this, ON_COOKIE_BANNER_MANAGE_PREFS);
|
|
165
143
|
this._isModalOpen = true;
|
|
166
144
|
};
|
|
167
145
|
|