@justeattakeaway/pie-cookie-banner 0.9.0 → 0.10.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/README.md +35 -3
- package/dist/index.d.ts +63 -11
- package/dist/index.js +198 -97
- package/dist/react.d.ts +63 -11
- package/dist/react.js +51 -43
- package/locales/en-gb.json +40 -0
- package/locales/es-es.json +40 -0
- package/locales/index.js +8 -0
- package/package.json +11 -8
- package/src/defs.ts +59 -11
- package/src/index.ts +68 -33
- package/src/localisation-utils.ts +159 -0
package/README.md
CHANGED
|
@@ -42,14 +42,28 @@ For full information on using PIE components as part of an application, check ou
|
|
|
42
42
|
|
|
43
43
|
### Importing the component
|
|
44
44
|
|
|
45
|
+
#### JavaScript
|
|
45
46
|
```js
|
|
46
|
-
//
|
|
47
|
+
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
47
48
|
import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner';
|
|
48
49
|
|
|
49
|
-
//
|
|
50
|
+
// If you don't need to reference the imported object, you can simply
|
|
51
|
+
// import the module which registers the component as a custom element.
|
|
52
|
+
import '@justeattakeaway/pie-cookie-banner';
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
#### React
|
|
56
|
+
```js
|
|
57
|
+
// React
|
|
58
|
+
// For React, you will need to import our React-specific component build
|
|
59
|
+
// which wraps the web component using @lit-labs/react
|
|
50
60
|
import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
|
|
51
61
|
```
|
|
52
62
|
|
|
63
|
+
> [!NOTE]
|
|
64
|
+
> When using the React version of the component, please make sure to also
|
|
65
|
+
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
66
|
+
|
|
53
67
|
|
|
54
68
|
## Peer Dependencies
|
|
55
69
|
|
|
@@ -61,6 +75,7 @@ import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
|
|
|
61
75
|
| Property | Type | Default | Description |
|
|
62
76
|
|---|---|---|---|
|
|
63
77
|
| hasPrimaryActionsOnly | `Boolean` | `false` | When true, sets the variant to "primary" for the button which accepts necessary cookies only. |
|
|
78
|
+
| locale | `Object` | {English language locale} | Assigns the localisation data for the component strings |
|
|
64
79
|
|
|
65
80
|
In your markup or JSX, you can then use these to set the properties for the `pie-cookie-banner` component:
|
|
66
81
|
|
|
@@ -72,6 +87,23 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
72
87
|
<PieCookieBanner></PieCookieBanner>
|
|
73
88
|
```
|
|
74
89
|
|
|
90
|
+
### Localisation
|
|
91
|
+
|
|
92
|
+
By default the component displays its content in English language. To display the content in another language, you need to import the locale data for that language and pass it in the `locale` prop. For example, to display the content in Dutch, you need to import the Dutch locale data:
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
import locale from '@justeattakeaway/pie-cookie-banner/locales/nl-nl.json';
|
|
96
|
+
|
|
97
|
+
<!-- JSX -->
|
|
98
|
+
<PieCookieBanner locale={locale}></PieCookieBanner>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
It's possible to import all locales at once, if necessary:
|
|
102
|
+
|
|
103
|
+
```js
|
|
104
|
+
import allLocales from '@justeattakeaway/pie-cookie-banner/locales';
|
|
105
|
+
```
|
|
106
|
+
|
|
75
107
|
## Contributing
|
|
76
108
|
|
|
77
|
-
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
|
109
|
+
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,62 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
3
|
+
import { PieSwitch } from '@justeattakeaway/pie-switch';
|
|
4
|
+
import { TemplateResult } from 'lit';
|
|
5
|
+
|
|
6
|
+
export declare interface CookieBannerLocale {
|
|
7
|
+
banner: {
|
|
8
|
+
title: string;
|
|
9
|
+
description: string;
|
|
10
|
+
cta: {
|
|
11
|
+
managePreferences: string;
|
|
12
|
+
necessaryOnly: string;
|
|
13
|
+
acceptAll: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
preferencesManagement: {
|
|
17
|
+
title: string;
|
|
18
|
+
description: string;
|
|
19
|
+
all: {
|
|
20
|
+
title: string;
|
|
21
|
+
};
|
|
22
|
+
necessary: {
|
|
23
|
+
title: string;
|
|
24
|
+
description: string;
|
|
25
|
+
};
|
|
26
|
+
functional: {
|
|
27
|
+
title: string;
|
|
28
|
+
description: string;
|
|
29
|
+
};
|
|
30
|
+
analytical: {
|
|
31
|
+
title: string;
|
|
32
|
+
description: string;
|
|
33
|
+
};
|
|
34
|
+
personalized: {
|
|
35
|
+
title: string;
|
|
36
|
+
description: string;
|
|
37
|
+
};
|
|
38
|
+
cta: {
|
|
39
|
+
save: {
|
|
40
|
+
label: string;
|
|
41
|
+
ariaLabel: string;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
}
|
|
5
46
|
|
|
6
47
|
export declare interface CookieBannerProps {
|
|
7
48
|
/**
|
|
8
49
|
* When true, sets the variant to "primary" for the button which accepts necessary cookies only.
|
|
9
50
|
*/
|
|
10
51
|
hasPrimaryActionsOnly: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Assigns the data for localising the component strings
|
|
54
|
+
*/
|
|
55
|
+
locale: CookieBannerLocale;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export declare interface CustomTagEnhancers {
|
|
59
|
+
[key: string]: (tagContent: string) => TemplateResult;
|
|
11
60
|
}
|
|
12
61
|
|
|
13
62
|
/**
|
|
@@ -49,7 +98,11 @@ export declare class PieCookieBanner extends LitElement implements CookieBannerP
|
|
|
49
98
|
private _isCookieBannerHidden;
|
|
50
99
|
private _isModalOpen;
|
|
51
100
|
hasPrimaryActionsOnly: boolean;
|
|
52
|
-
|
|
101
|
+
locale: CookieBannerLocale;
|
|
102
|
+
_preferencesNodes: NodeListOf<PieSwitch>;
|
|
103
|
+
private _customTagEnhancers;
|
|
104
|
+
private _localiseText;
|
|
105
|
+
private _localiseRichText;
|
|
53
106
|
/**
|
|
54
107
|
* Handles closing the modal and re-displaying the cookie banner
|
|
55
108
|
* and making the cookie banner visible
|
|
@@ -91,14 +144,14 @@ export declare class PieCookieBanner extends LitElement implements CookieBannerP
|
|
|
91
144
|
*/
|
|
92
145
|
private _openManagePreferencesModal;
|
|
93
146
|
/**
|
|
94
|
-
* Handles the logic of the
|
|
95
|
-
* Clicking the “all”
|
|
96
|
-
* When the “all”
|
|
97
|
-
* then the “all”
|
|
98
|
-
* if all
|
|
147
|
+
* Handles the logic of the switch nodes (preferences).
|
|
148
|
+
* Clicking the “all” switch should turn on all preferences.
|
|
149
|
+
* When the “all” switch is checked, and one of the other preferences is clicked,
|
|
150
|
+
* then the “all” switch should be unchecked.
|
|
151
|
+
* if all switches are checked, the `all` switch should
|
|
99
152
|
* be turned on automatically
|
|
100
153
|
*/
|
|
101
|
-
private
|
|
154
|
+
private _handleSwitchStates;
|
|
102
155
|
/**
|
|
103
156
|
* Renders the content of the preference item.
|
|
104
157
|
* @private
|
|
@@ -115,11 +168,10 @@ export declare class PieCookieBanner extends LitElement implements CookieBannerP
|
|
|
115
168
|
|
|
116
169
|
export declare interface Preference {
|
|
117
170
|
id: PreferenceIds;
|
|
118
|
-
title: string;
|
|
119
|
-
description?: string;
|
|
120
171
|
isDisabled?: boolean;
|
|
121
172
|
isChecked?: boolean;
|
|
122
173
|
hasDivider?: boolean;
|
|
174
|
+
hasDescription?: boolean;
|
|
123
175
|
}
|
|
124
176
|
|
|
125
177
|
export declare type PreferenceIds = 'all' | 'necessary' | 'functional' | 'analytical' | 'personalized';
|
package/dist/index.js
CHANGED
|
@@ -1,71 +1,173 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { state as
|
|
3
|
-
import { repeat as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { unsafeCSS as k, LitElement as m, html as s, nothing as h } from "lit";
|
|
2
|
+
import { state as f, property as g, queryAll as v } from "lit/decorators.js";
|
|
3
|
+
import { repeat as y } from "lit/directives/repeat.js";
|
|
4
|
+
import "@justeattakeaway/pie-button";
|
|
5
|
+
import "@justeattakeaway/pie-divider";
|
|
6
|
+
import "@justeattakeaway/pie-icon-button";
|
|
7
|
+
import "@justeattakeaway/pie-link";
|
|
8
|
+
import "@justeattakeaway/pie-modal";
|
|
9
|
+
import "@justeattakeaway/pie-switch";
|
|
10
|
+
import { defineCustomElement as _ } from "@justeattakeaway/pie-webc-core";
|
|
11
|
+
const w = `*{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
|
+
`, x = "pie-cookie-banner-accept-all", C = "pie-cookie-banner-necessary-only", B = "pie-cookie-banner-manage-prefs", $ = "pie-cookie-banner-prefs-saved", A = [
|
|
9
13
|
{
|
|
10
14
|
id: "all",
|
|
11
|
-
|
|
12
|
-
|
|
15
|
+
hasDivider: !0,
|
|
16
|
+
hasDescription: !1
|
|
13
17
|
},
|
|
14
18
|
{
|
|
15
19
|
id: "necessary",
|
|
16
|
-
title: "Necessary",
|
|
17
|
-
description: "These cookies are necessary to ensure that the website and its features function properly. Services you have asked for cannot be provided without these cookies.",
|
|
18
20
|
isDisabled: !0,
|
|
19
|
-
isChecked: !0
|
|
21
|
+
isChecked: !0,
|
|
22
|
+
hasDescription: !0
|
|
20
23
|
},
|
|
21
24
|
{
|
|
22
25
|
id: "functional",
|
|
23
|
-
|
|
24
|
-
description: "These cookies allow the website to remember the choices you make to give you better functionality and personal features."
|
|
26
|
+
hasDescription: !0
|
|
25
27
|
},
|
|
26
28
|
{
|
|
27
29
|
id: "analytical",
|
|
28
|
-
|
|
29
|
-
description: "These analytical cookies, including statistics, are used to understand how visitors interact with the website and we can measure and improve the performance of our website."
|
|
30
|
+
hasDescription: !0
|
|
30
31
|
},
|
|
31
32
|
{
|
|
32
33
|
id: "personalized",
|
|
34
|
+
hasDescription: !0
|
|
35
|
+
}
|
|
36
|
+
];
|
|
37
|
+
function u(a) {
|
|
38
|
+
console.error(`[localisation-utils]: ${a}`);
|
|
39
|
+
}
|
|
40
|
+
function O(a, e) {
|
|
41
|
+
const n = (t) => String.prototype.split.call(e, t).filter(Boolean).reduce((r, o) => r != null && typeof r == "object" ? r[o] : r, a), i = n(/[,[\]]+?/) || n(/[,[\].]+?/);
|
|
42
|
+
return typeof i != "string" ? "" : i;
|
|
43
|
+
}
|
|
44
|
+
function b(a, e) {
|
|
45
|
+
if (!a)
|
|
46
|
+
throw new Error('"locale" parameter cannot be empty');
|
|
47
|
+
if (!e)
|
|
48
|
+
throw new Error('"key" parameter cannot be empty');
|
|
49
|
+
const n = O(a, e);
|
|
50
|
+
return n || (u(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
|
|
51
|
+
}
|
|
52
|
+
function E(a) {
|
|
53
|
+
const n = a.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
|
|
54
|
+
return new RegExp(n, "igm");
|
|
55
|
+
}
|
|
56
|
+
function T(a, e) {
|
|
57
|
+
const n = Object.keys(e);
|
|
58
|
+
if (n.length === 0)
|
|
59
|
+
return [a];
|
|
60
|
+
const i = E(n);
|
|
61
|
+
return a.split(i).filter((t) => !!t).map((t) => {
|
|
62
|
+
if (!t.match(i))
|
|
63
|
+
return t;
|
|
64
|
+
const o = t.match(/<(.*)>(.*)<\/.*>/);
|
|
65
|
+
if (!o)
|
|
66
|
+
return t;
|
|
67
|
+
const [, d, c] = o;
|
|
68
|
+
return [d, c];
|
|
69
|
+
}).map((t) => {
|
|
70
|
+
if (!Array.isArray(t))
|
|
71
|
+
return t;
|
|
72
|
+
const [o, d] = t, c = e[o];
|
|
73
|
+
return c || typeof c == "function" ? c(d) : (u(`Custom tag "${o}" does not have a matching enhancer function`), d);
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
function M(a, e, n) {
|
|
77
|
+
if (!a)
|
|
78
|
+
throw new Error('"locale" parameter cannot be empty');
|
|
79
|
+
if (!e)
|
|
80
|
+
throw new Error('"key" parameter cannot be empty');
|
|
81
|
+
if (!n)
|
|
82
|
+
throw new Error('"customTagEnhancers" parameter cannot be empty');
|
|
83
|
+
const i = b(a, e);
|
|
84
|
+
return T(i, n);
|
|
85
|
+
}
|
|
86
|
+
const N = {
|
|
87
|
+
title: "Cookies",
|
|
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
|
+
cta: {
|
|
90
|
+
managePreferences: "Manage preferences",
|
|
91
|
+
necessaryOnly: "Necessary only",
|
|
92
|
+
acceptAll: "Accept all"
|
|
93
|
+
}
|
|
94
|
+
}, S = {
|
|
95
|
+
title: "Manage your preferences",
|
|
96
|
+
description: "You can find all the information in the <linkCookieStatement>Cookie Statement</linkCookieStatement> and <linkCookieTechList>Cookie technology list</linkCookieTechList>.",
|
|
97
|
+
all: {
|
|
98
|
+
title: "Turn all on"
|
|
99
|
+
},
|
|
100
|
+
necessary: {
|
|
101
|
+
title: "Necessary",
|
|
102
|
+
description: "These cookies are necessary to ensure that the website and its features function properly. Services you have asked for cannot be provided without these cookies."
|
|
103
|
+
},
|
|
104
|
+
functional: {
|
|
105
|
+
title: "Functional",
|
|
106
|
+
description: "These cookies allow the website to remember the choices you make to give you better functionality and personal features."
|
|
107
|
+
},
|
|
108
|
+
analytical: {
|
|
109
|
+
title: "Analytical",
|
|
110
|
+
description: "These analytical cookies, including statistics, are used to understand how visitors interact with the website and we can measure and improve the performance of our website."
|
|
111
|
+
},
|
|
112
|
+
personalized: {
|
|
33
113
|
title: "Personalized (targeting and advertising)",
|
|
34
114
|
description: "These marketing cookies are used to tailor the delivery of information to you based upon your interest and to measure the effectiveness of such advertisements, both on our website and our advertising partners' websites."
|
|
115
|
+
},
|
|
116
|
+
cta: {
|
|
117
|
+
save: {
|
|
118
|
+
label: "Save",
|
|
119
|
+
ariaLabel: ""
|
|
120
|
+
}
|
|
35
121
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
122
|
+
}, z = {
|
|
123
|
+
banner: N,
|
|
124
|
+
preferencesManagement: S
|
|
125
|
+
};
|
|
126
|
+
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, r = a.length - 1, o; r >= 0; r--)
|
|
128
|
+
(o = a[r]) && (t = (i ? o(e, n, t) : o(t)) || t);
|
|
129
|
+
return i && t && P(e, n, t), t;
|
|
41
130
|
};
|
|
42
|
-
const
|
|
43
|
-
class
|
|
131
|
+
const D = "pie-cookie-banner";
|
|
132
|
+
class l extends m {
|
|
44
133
|
constructor() {
|
|
45
|
-
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.
|
|
46
|
-
|
|
134
|
+
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>`,
|
|
136
|
+
linkNecessaryOnly: (e) => s`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${e}</pie-link>`,
|
|
137
|
+
linkManagePreferences: (e) => s`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${e}</pie-link>`,
|
|
138
|
+
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="#" size="small" target="_blank">${e}</pie-link>`,
|
|
140
|
+
linkCookieTechList: (e) => s`<pie-link href="#" size="small" target="_blank">${e}</pie-link>`
|
|
141
|
+
}, this._dispatchCookieBannerCustomEvent = (e, n) => {
|
|
142
|
+
const i = new CustomEvent(e, {
|
|
47
143
|
bubbles: !0,
|
|
48
144
|
composed: !0,
|
|
49
|
-
detail:
|
|
145
|
+
detail: n
|
|
50
146
|
});
|
|
51
|
-
this.dispatchEvent(
|
|
147
|
+
this.dispatchEvent(i);
|
|
52
148
|
}, this._onNecessaryOnly = () => {
|
|
53
|
-
this._dispatchCookieBannerCustomEvent(
|
|
149
|
+
this._dispatchCookieBannerCustomEvent(C), this._isCookieBannerHidden = !0;
|
|
54
150
|
}, this._onAcceptAll = () => {
|
|
55
|
-
this._dispatchCookieBannerCustomEvent(
|
|
151
|
+
this._dispatchCookieBannerCustomEvent(x), this._isCookieBannerHidden = !0;
|
|
56
152
|
}, this._openManagePreferencesModal = () => {
|
|
57
|
-
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(
|
|
58
|
-
}, this.
|
|
59
|
-
const { id:
|
|
60
|
-
if (
|
|
61
|
-
const
|
|
62
|
-
this._preferencesNodes.forEach((
|
|
63
|
-
|
|
153
|
+
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(B), this._isModalOpen = !0;
|
|
154
|
+
}, this._handleSwitchStates = (e) => {
|
|
155
|
+
const { id: n } = e == null ? void 0 : e.currentTarget, i = [...this._preferencesNodes].find(({ id: t }) => t === "all");
|
|
156
|
+
if (n === i.id) {
|
|
157
|
+
const t = e.detail;
|
|
158
|
+
this._preferencesNodes.forEach((r) => {
|
|
159
|
+
r.isChecked = r.isDisabled ? r.isChecked : t;
|
|
64
160
|
});
|
|
65
161
|
} else
|
|
66
|
-
|
|
162
|
+
i.isChecked = [...this._preferencesNodes].filter(({ id: t }) => t !== "all").every(({ isChecked: t }) => t);
|
|
67
163
|
};
|
|
68
164
|
}
|
|
165
|
+
_localiseText(e) {
|
|
166
|
+
return b(this.locale, e);
|
|
167
|
+
}
|
|
168
|
+
_localiseRichText(e) {
|
|
169
|
+
return M(this.locale, e, this._customTagEnhancers);
|
|
170
|
+
}
|
|
69
171
|
/**
|
|
70
172
|
* Handles closing the modal and re-displaying the cookie banner
|
|
71
173
|
* and making the cookie banner visible
|
|
@@ -84,9 +186,9 @@ class r extends g {
|
|
|
84
186
|
*/
|
|
85
187
|
_handlePreferencesSaved() {
|
|
86
188
|
let e = {};
|
|
87
|
-
[...this._preferencesNodes].filter(({ id:
|
|
88
|
-
e = { ...e, [
|
|
89
|
-
}), this._dispatchCookieBannerCustomEvent(
|
|
189
|
+
[...this._preferencesNodes].filter(({ id: n }) => n !== "all").forEach(({ id: n, isChecked: i }) => {
|
|
190
|
+
e = { ...e, [n]: i };
|
|
191
|
+
}), this._dispatchCookieBannerCustomEvent($, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
|
|
90
192
|
}
|
|
91
193
|
/**
|
|
92
194
|
* Renders the content of the preference item.
|
|
@@ -94,69 +196,65 @@ class r extends g {
|
|
|
94
196
|
*/
|
|
95
197
|
renderPreference({
|
|
96
198
|
id: e,
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
hasDivider: s
|
|
199
|
+
isChecked: n,
|
|
200
|
+
isDisabled: i,
|
|
201
|
+
hasDivider: t,
|
|
202
|
+
hasDescription: r
|
|
102
203
|
}) {
|
|
103
|
-
|
|
204
|
+
const o = this._localiseText(`preferencesManagement.${e}.title`), d = `preferencesManagement.${e}.description`, c = r && this._localiseText(d);
|
|
205
|
+
return s`
|
|
104
206
|
<div class="c-cookieBanner-preference">
|
|
105
207
|
<div>
|
|
106
|
-
<h3 class="c-cookieBanner-subheading">${
|
|
107
|
-
${
|
|
208
|
+
<h3 class="c-cookieBanner-subheading">${o}</h3>
|
|
209
|
+
${c ? s`<p class="c-cookieBanner-description">${c}</p>` : h}
|
|
108
210
|
</div>
|
|
109
|
-
<pie-
|
|
211
|
+
<pie-switch
|
|
110
212
|
id="${e}"
|
|
111
|
-
?isChecked="${
|
|
112
|
-
?isDisabled="${
|
|
113
|
-
@pie-
|
|
114
|
-
</
|
|
115
|
-
|
|
213
|
+
?isChecked="${n}"
|
|
214
|
+
?isDisabled="${i}"
|
|
215
|
+
@pie-switch-changed="${this._handleSwitchStates}">
|
|
216
|
+
</pie-switch>
|
|
217
|
+
</div>
|
|
218
|
+
${t ? s`<pie-divider></pie-divider>` : h}`;
|
|
116
219
|
}
|
|
117
220
|
/**
|
|
118
221
|
* Renders the modal content.
|
|
119
222
|
* @private
|
|
120
223
|
*/
|
|
121
224
|
renderModalContent() {
|
|
122
|
-
return
|
|
123
|
-
<p class="c-cookieBanner-description">
|
|
124
|
-
|
|
125
|
-
<pie-link href="#" size="small" target="_blank">Cookie technology list</pie-link>.
|
|
225
|
+
return s`
|
|
226
|
+
<p class="c-cookieBanner-description" data-test-id="modal-description">
|
|
227
|
+
${this._localiseRichText("preferencesManagement.description")}
|
|
126
228
|
</p>
|
|
127
|
-
${
|
|
128
|
-
|
|
229
|
+
${y(
|
|
230
|
+
A,
|
|
129
231
|
({ id: e }) => e,
|
|
130
232
|
(e) => this.renderPreference(e)
|
|
131
233
|
)}`;
|
|
132
234
|
}
|
|
133
235
|
render() {
|
|
134
236
|
const e = {
|
|
135
|
-
text: "
|
|
237
|
+
text: this._localiseText("preferencesManagement.cta.save.label"),
|
|
136
238
|
variant: "primary",
|
|
137
|
-
ariaLabel: "
|
|
239
|
+
ariaLabel: this._localiseText("preferencesManagement.cta.save.label")
|
|
240
|
+
// TODO: Replace with the appropriate "ariaLabel" as soon as the spreadsheet is updated
|
|
138
241
|
};
|
|
139
|
-
return
|
|
242
|
+
return s`
|
|
140
243
|
<pie-modal
|
|
141
244
|
.isOpen="${this._isModalOpen}"
|
|
142
245
|
hasBackButton
|
|
143
246
|
hasStackedActions
|
|
144
247
|
isFullWidthBelowMid
|
|
145
|
-
heading="
|
|
248
|
+
heading="${this._localiseText("preferencesManagement.title")}"
|
|
146
249
|
.leadingAction="${e}"
|
|
147
250
|
@pie-modal-leading-action-click="${this._handlePreferencesSaved}"
|
|
148
251
|
@pie-modal-back="${this._displayCookieBanner}">
|
|
149
252
|
${this.renderModalContent()}
|
|
150
|
-
|
|
253
|
+
</pie-modal>
|
|
151
254
|
<aside data-test-id="pie-cookie-banner" class="c-cookieBanner" ?isCookieBannerHidden=${this._isCookieBannerHidden}>
|
|
152
|
-
<h2 class="c-cookieBanner-title"
|
|
153
|
-
<div class="c-cookieBanner-body">
|
|
154
|
-
<p>
|
|
155
|
-
optimize analytics, and show ads with third parties
|
|
156
|
-
(read our <pie-link variant="inverse">Statement</pie-link>).
|
|
157
|
-
Necessary cookies are always set. Click <pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">Necessary only</pie-link>
|
|
158
|
-
to continue without accepting more. Click <pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">Manage preferences</pie-link>
|
|
159
|
-
to share your preferences or <pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">Accept all</pie-link>.</p>
|
|
255
|
+
<h2 class="c-cookieBanner-title">${this._localiseText("banner.title")}</h2>
|
|
256
|
+
<div class="c-cookieBanner-body" data-test-id="banner-description">
|
|
257
|
+
<p>${this._localiseRichText("banner.description")}</p>
|
|
160
258
|
</div>
|
|
161
259
|
|
|
162
260
|
<div class="c-cookieBanner-actions">
|
|
@@ -166,7 +264,7 @@ class r extends g {
|
|
|
166
264
|
variant="primary"
|
|
167
265
|
isFullWidth
|
|
168
266
|
size="small-expressive">
|
|
169
|
-
|
|
267
|
+
${this._localiseText("banner.cta.acceptAll")}
|
|
170
268
|
</pie-button>
|
|
171
269
|
<pie-button
|
|
172
270
|
data-test-id="actions-necessary-only"
|
|
@@ -174,7 +272,7 @@ class r extends g {
|
|
|
174
272
|
variant="${this.hasPrimaryActionsOnly ? "primary" : "outline-inverse"}"
|
|
175
273
|
isFullWidth
|
|
176
274
|
size="small-expressive">
|
|
177
|
-
|
|
275
|
+
${this._localiseText("banner.cta.necessaryOnly")}
|
|
178
276
|
</pie-button>
|
|
179
277
|
<pie-link
|
|
180
278
|
data-test-id="actions-manage-prefs"
|
|
@@ -182,31 +280,34 @@ class r extends g {
|
|
|
182
280
|
tag="button"
|
|
183
281
|
variant="inverse"
|
|
184
282
|
isBold="true">
|
|
185
|
-
|
|
283
|
+
${this._localiseText("banner.cta.managePreferences")}
|
|
186
284
|
</pie-link>
|
|
187
285
|
</div>
|
|
188
286
|
</aside>`;
|
|
189
287
|
}
|
|
190
288
|
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
],
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
],
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
],
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
],
|
|
204
|
-
|
|
289
|
+
l.styles = k(w);
|
|
290
|
+
p([
|
|
291
|
+
f()
|
|
292
|
+
], l.prototype, "_isCookieBannerHidden", 2);
|
|
293
|
+
p([
|
|
294
|
+
f()
|
|
295
|
+
], l.prototype, "_isModalOpen", 2);
|
|
296
|
+
p([
|
|
297
|
+
g({ type: Boolean })
|
|
298
|
+
], l.prototype, "hasPrimaryActionsOnly", 2);
|
|
299
|
+
p([
|
|
300
|
+
g({ type: Object })
|
|
301
|
+
], l.prototype, "locale", 2);
|
|
302
|
+
p([
|
|
303
|
+
v("pie-switch")
|
|
304
|
+
], l.prototype, "_preferencesNodes", 2);
|
|
305
|
+
_(D, l);
|
|
205
306
|
export {
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
307
|
+
x as ON_COOKIE_BANNER_ACCEPT_ALL,
|
|
308
|
+
B as ON_COOKIE_BANNER_MANAGE_PREFS,
|
|
309
|
+
C as ON_COOKIE_BANNER_NECESSARY_ONLY,
|
|
310
|
+
$ as ON_COOKIE_BANNER_PREFS_SAVED,
|
|
311
|
+
l as PieCookieBanner,
|
|
312
|
+
A as preferences
|
|
212
313
|
};
|