@justeattakeaway/pie-cookie-banner 0.6.0 → 0.7.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.d.ts +1 -0
- package/dist/index.js +36 -33
- package/dist/react.d.ts +1 -0
- package/package.json +7 -7
- package/src/index.ts +7 -5
package/dist/index.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ export declare const ON_COOKIE_BANNER_NECESSARY_ONLY = "pie-cookie-banner-necess
|
|
|
35
35
|
export declare const ON_COOKIE_BANNER_PREFS_SAVED = "pie-cookie-banner-prefs-saved";
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
|
+
* @tagname pie-cookie-banner
|
|
38
39
|
* @event {CustomEvent} pie-cookie-banner-accept-all - when all cookies are accepted.
|
|
39
40
|
* @event {CustomEvent} pie-cookie-banner-necessary-only - when all only necessary cookies are accepted.
|
|
40
41
|
* @event {CustomEvent} pie-cookie-banner-manage-prefs - when a user clicks manage preferences.
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { unsafeCSS as p, LitElement as g, html as
|
|
1
|
+
import { unsafeCSS as p, LitElement as g, html as s, nothing as l } from "lit";
|
|
2
2
|
import { state as h, queryAll as f } from "lit/decorators.js";
|
|
3
3
|
import { repeat as b } from "lit/directives/repeat.js";
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
function k(o, e) {
|
|
5
|
+
customElements.get(o) ? console.warn(`PIE Web Component: "${o}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(o, e);
|
|
6
|
+
}
|
|
7
|
+
const u = `*{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}
|
|
8
|
+
`, v = "pie-cookie-banner-accept-all", m = "pie-cookie-banner-necessary-only", y = "pie-cookie-banner-manage-prefs", _ = "pie-cookie-banner-prefs-saved", B = [
|
|
6
9
|
{
|
|
7
10
|
id: "all",
|
|
8
11
|
title: "Turn on all",
|
|
@@ -31,13 +34,13 @@ const k = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactiv
|
|
|
31
34
|
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."
|
|
32
35
|
}
|
|
33
36
|
];
|
|
34
|
-
var
|
|
35
|
-
for (var i = n > 1 ? void 0 : n ?
|
|
36
|
-
(
|
|
37
|
-
return n && i &&
|
|
37
|
+
var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, d = (o, e, t, n) => {
|
|
38
|
+
for (var i = n > 1 ? void 0 : n ? C(e, t) : e, a = o.length - 1, r; a >= 0; a--)
|
|
39
|
+
(r = o[a]) && (i = (n ? r(e, t, i) : r(i)) || i);
|
|
40
|
+
return n && i && w(e, t, i), i;
|
|
38
41
|
};
|
|
39
|
-
const
|
|
40
|
-
class
|
|
42
|
+
const x = "pie-cookie-banner";
|
|
43
|
+
class c extends g {
|
|
41
44
|
constructor() {
|
|
42
45
|
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this._dispatchCookieBannerCustomEvent = (e, t) => {
|
|
43
46
|
const n = new CustomEvent(e, {
|
|
@@ -47,11 +50,11 @@ class s extends g {
|
|
|
47
50
|
});
|
|
48
51
|
this.dispatchEvent(n);
|
|
49
52
|
}, this._onNecessaryOnly = () => {
|
|
50
|
-
this._dispatchCookieBannerCustomEvent(
|
|
53
|
+
this._dispatchCookieBannerCustomEvent(m), this._isCookieBannerHidden = !0;
|
|
51
54
|
}, this._onAcceptAll = () => {
|
|
52
55
|
this._dispatchCookieBannerCustomEvent(v), this._isCookieBannerHidden = !0;
|
|
53
56
|
}, this._openManagePreferencesModal = () => {
|
|
54
|
-
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(
|
|
57
|
+
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(y), this._isModalOpen = !0;
|
|
55
58
|
}, this._handleToggleStates = (e) => {
|
|
56
59
|
const { id: t } = e == null ? void 0 : e.currentTarget, n = [...this._preferencesNodes].find(({ id: i }) => i === "all");
|
|
57
60
|
if (t === n.id) {
|
|
@@ -83,7 +86,7 @@ class s extends g {
|
|
|
83
86
|
let e = {};
|
|
84
87
|
[...this._preferencesNodes].filter(({ id: t }) => t !== "all").forEach(({ id: t, isChecked: n }) => {
|
|
85
88
|
e = { ...e, [t]: n };
|
|
86
|
-
}), this._dispatchCookieBannerCustomEvent(
|
|
89
|
+
}), this._dispatchCookieBannerCustomEvent(_, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
|
|
87
90
|
}
|
|
88
91
|
/**
|
|
89
92
|
* Renders the content of the preference item.
|
|
@@ -95,34 +98,34 @@ class s extends g {
|
|
|
95
98
|
description: n,
|
|
96
99
|
isChecked: i,
|
|
97
100
|
isDisabled: a,
|
|
98
|
-
hasDivider:
|
|
101
|
+
hasDivider: r
|
|
99
102
|
}) {
|
|
100
|
-
return
|
|
103
|
+
return s`
|
|
101
104
|
<div class="c-cookieBanner-preference">
|
|
102
105
|
<div>
|
|
103
106
|
<h3 class="c-cookieBanner-subheading">${t}</h3>
|
|
104
|
-
${n ?
|
|
107
|
+
${n ? s`<p class="c-cookieBanner-description">${n}</p>` : l}
|
|
105
108
|
</div>
|
|
106
|
-
<pie-toggle-switch
|
|
109
|
+
<pie-toggle-switch
|
|
107
110
|
id="${e}"
|
|
108
|
-
?isChecked="${i}"
|
|
111
|
+
?isChecked="${i}"
|
|
109
112
|
?isDisabled="${a}"
|
|
110
113
|
@pie-toggle-switch-changed="${this._handleToggleStates}"/>
|
|
111
114
|
</div>
|
|
112
|
-
${
|
|
115
|
+
${r ? s`<pie-divider></pie-divider>` : l}`;
|
|
113
116
|
}
|
|
114
117
|
/**
|
|
115
118
|
* Renders the modal content.
|
|
116
119
|
* @private
|
|
117
120
|
*/
|
|
118
121
|
renderModalContent() {
|
|
119
|
-
return
|
|
120
|
-
<p class="c-cookieBanner-description">You can find all the information in the
|
|
121
|
-
<pie-link href="#" size="small" target="_blank">Cookie Statement</pie-link> and
|
|
122
|
+
return s`
|
|
123
|
+
<p class="c-cookieBanner-description">You can find all the information in the
|
|
124
|
+
<pie-link href="#" size="small" target="_blank">Cookie Statement</pie-link> and
|
|
122
125
|
<pie-link href="#" size="small" target="_blank">Cookie technology list</pie-link>.
|
|
123
126
|
</p>
|
|
124
127
|
${b(
|
|
125
|
-
|
|
128
|
+
B,
|
|
126
129
|
({ id: e }) => e,
|
|
127
130
|
(e) => this.renderPreference(e)
|
|
128
131
|
)}`;
|
|
@@ -133,7 +136,7 @@ class s extends g {
|
|
|
133
136
|
variant: "primary",
|
|
134
137
|
ariaLabel: "Save your cookie preferences"
|
|
135
138
|
};
|
|
136
|
-
return
|
|
139
|
+
return s`
|
|
137
140
|
<pie-modal
|
|
138
141
|
.isOpen="${this._isModalOpen}"
|
|
139
142
|
hasBackButton
|
|
@@ -185,22 +188,22 @@ class s extends g {
|
|
|
185
188
|
</aside>`;
|
|
186
189
|
}
|
|
187
190
|
}
|
|
188
|
-
|
|
191
|
+
c.styles = p(u);
|
|
189
192
|
d([
|
|
190
193
|
h()
|
|
191
|
-
],
|
|
194
|
+
], c.prototype, "_isCookieBannerHidden", 2);
|
|
192
195
|
d([
|
|
193
196
|
h()
|
|
194
|
-
],
|
|
197
|
+
], c.prototype, "_isModalOpen", 2);
|
|
195
198
|
d([
|
|
196
199
|
f("pie-toggle-switch")
|
|
197
|
-
],
|
|
198
|
-
|
|
200
|
+
], c.prototype, "_preferencesNodes", 2);
|
|
201
|
+
k(x, c);
|
|
199
202
|
export {
|
|
200
203
|
v as ON_COOKIE_BANNER_ACCEPT_ALL,
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
204
|
+
y as ON_COOKIE_BANNER_MANAGE_PREFS,
|
|
205
|
+
m as ON_COOKIE_BANNER_NECESSARY_ONLY,
|
|
206
|
+
_ as ON_COOKIE_BANNER_PREFS_SAVED,
|
|
207
|
+
c as PieCookieBanner,
|
|
208
|
+
B as preferences
|
|
206
209
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -44,6 +44,7 @@ export declare const PieCookieBanner: ReactWebComponent<PieCookieBanner_2, {
|
|
|
44
44
|
}>;
|
|
45
45
|
|
|
46
46
|
/**
|
|
47
|
+
* @tagname pie-cookie-banner
|
|
47
48
|
* @event {CustomEvent} pie-cookie-banner-accept-all - when all cookies are accepted.
|
|
48
49
|
* @event {CustomEvent} pie-cookie-banner-necessary-only - when all only necessary cookies are accepted.
|
|
49
50
|
* @event {CustomEvent} pie-cookie-banner-manage-prefs - when a user clicks manage preferences.
|
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.
|
|
4
|
+
"version": "0.7.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@justeat/pie-design-tokens": "5.8.2",
|
|
32
|
-
"@justeattakeaway/pie-button": "0.
|
|
32
|
+
"@justeattakeaway/pie-button": "0.33.0",
|
|
33
33
|
"@justeattakeaway/pie-components-config": "0.4.0",
|
|
34
|
-
"@justeattakeaway/pie-icon-button": "0.
|
|
35
|
-
"@justeattakeaway/pie-link": "0.
|
|
36
|
-
"@justeattakeaway/pie-modal": "0.
|
|
37
|
-
"@justeattakeaway/pie-toggle-switch": "0.
|
|
34
|
+
"@justeattakeaway/pie-icon-button": "0.18.0",
|
|
35
|
+
"@justeattakeaway/pie-link": "0.10.0",
|
|
36
|
+
"@justeattakeaway/pie-modal": "0.28.0",
|
|
37
|
+
"@justeattakeaway/pie-toggle-switch": "0.14.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
40
|
+
"@justeattakeaway/pie-webc-core": "0.11.0"
|
|
41
41
|
},
|
|
42
42
|
"volta": {
|
|
43
43
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
LitElement, html, unsafeCSS, TemplateResult, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
|
+
import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
4
5
|
import { state, queryAll } from 'lit/decorators.js';
|
|
5
6
|
import { repeat } from 'lit/directives/repeat.js';
|
|
6
7
|
import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch';
|
|
@@ -22,6 +23,7 @@ export * from './defs';
|
|
|
22
23
|
const componentSelector = 'pie-cookie-banner';
|
|
23
24
|
|
|
24
25
|
/**
|
|
26
|
+
* @tagname pie-cookie-banner
|
|
25
27
|
* @event {CustomEvent} pie-cookie-banner-accept-all - when all cookies are accepted.
|
|
26
28
|
* @event {CustomEvent} pie-cookie-banner-necessary-only - when all only necessary cookies are accepted.
|
|
27
29
|
* @event {CustomEvent} pie-cookie-banner-manage-prefs - when a user clicks manage preferences.
|
|
@@ -153,9 +155,9 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
153
155
|
<h3 class="c-cookieBanner-subheading">${title}</h3>
|
|
154
156
|
${description ? html`<p class="c-cookieBanner-description">${description}</p>` : nothing}
|
|
155
157
|
</div>
|
|
156
|
-
<pie-toggle-switch
|
|
158
|
+
<pie-toggle-switch
|
|
157
159
|
id="${id}"
|
|
158
|
-
?isChecked="${isChecked}"
|
|
160
|
+
?isChecked="${isChecked}"
|
|
159
161
|
?isDisabled="${isDisabled}"
|
|
160
162
|
@pie-toggle-switch-changed="${this._handleToggleStates}"/>
|
|
161
163
|
</div>
|
|
@@ -168,8 +170,8 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
168
170
|
*/
|
|
169
171
|
private renderModalContent (): TemplateResult {
|
|
170
172
|
return html`
|
|
171
|
-
<p class="c-cookieBanner-description">You can find all the information in the
|
|
172
|
-
<pie-link href="#" size="small" target="_blank">Cookie Statement</pie-link> and
|
|
173
|
+
<p class="c-cookieBanner-description">You can find all the information in the
|
|
174
|
+
<pie-link href="#" size="small" target="_blank">Cookie Statement</pie-link> and
|
|
173
175
|
<pie-link href="#" size="small" target="_blank">Cookie technology list</pie-link>.
|
|
174
176
|
</p>
|
|
175
177
|
${repeat(
|
|
@@ -242,7 +244,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
242
244
|
static styles = unsafeCSS(styles);
|
|
243
245
|
}
|
|
244
246
|
|
|
245
|
-
|
|
247
|
+
defineCustomElement(componentSelector, PieCookieBanner);
|
|
246
248
|
|
|
247
249
|
declare global {
|
|
248
250
|
interface HTMLElementTagNameMap {
|