@justeattakeaway/pie-cookie-banner 0.6.0 → 0.8.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 +1 -1
- package/dist/index.d.ts +6 -0
- package/dist/index.js +47 -41
- package/dist/react.d.ts +6 -0
- package/package.json +7 -7
- package/src/defs.ts +9 -6
- package/src/index.ts +12 -7
package/README.md
CHANGED
|
@@ -86,7 +86,7 @@ yarn dev --filter=pie-storybook
|
|
|
86
86
|
|
|
87
87
|
| Property | Type | Default | Description |
|
|
88
88
|
|---|---|---|---|
|
|
89
|
-
|
|
|
89
|
+
| hasPrimaryActionsOnly | `Boolean` | `false` | When true, sets the "Necessary only" button variant to "primary". |
|
|
90
90
|
|
|
91
91
|
In your markup or JSX, you can then use these to set the properties for the `pie-cookie-banner` component:
|
|
92
92
|
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,10 @@ import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch';
|
|
|
4
4
|
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
6
|
export declare interface CookieBannerProps {
|
|
7
|
+
/**
|
|
8
|
+
* When true, sets the "Necessary only" button variant to "primary".
|
|
9
|
+
*/
|
|
10
|
+
hasPrimaryActionsOnly: boolean;
|
|
7
11
|
}
|
|
8
12
|
|
|
9
13
|
/**
|
|
@@ -35,6 +39,7 @@ export declare const ON_COOKIE_BANNER_NECESSARY_ONLY = "pie-cookie-banner-necess
|
|
|
35
39
|
export declare const ON_COOKIE_BANNER_PREFS_SAVED = "pie-cookie-banner-prefs-saved";
|
|
36
40
|
|
|
37
41
|
/**
|
|
42
|
+
* @tagname pie-cookie-banner
|
|
38
43
|
* @event {CustomEvent} pie-cookie-banner-accept-all - when all cookies are accepted.
|
|
39
44
|
* @event {CustomEvent} pie-cookie-banner-necessary-only - when all only necessary cookies are accepted.
|
|
40
45
|
* @event {CustomEvent} pie-cookie-banner-manage-prefs - when a user clicks manage preferences.
|
|
@@ -43,6 +48,7 @@ export declare const ON_COOKIE_BANNER_PREFS_SAVED = "pie-cookie-banner-prefs-sav
|
|
|
43
48
|
export declare class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
44
49
|
private _isCookieBannerHidden;
|
|
45
50
|
private _isModalOpen;
|
|
51
|
+
hasPrimaryActionsOnly: boolean;
|
|
46
52
|
_preferencesNodes: NodeListOf<PieToggleSwitch>;
|
|
47
53
|
/**
|
|
48
54
|
* Handles closing the modal and re-displaying the cookie banner
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { unsafeCSS as p, LitElement as g, html as
|
|
2
|
-
import { state as h,
|
|
3
|
-
import { repeat as
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { unsafeCSS as p, LitElement as g, html as c, nothing as l } from "lit";
|
|
2
|
+
import { state as h, property as f, queryAll as b } from "lit/decorators.js";
|
|
3
|
+
import { repeat as k } from "lit/directives/repeat.js";
|
|
4
|
+
function u(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 v = `*{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
|
+
`, m = "pie-cookie-banner-accept-all", y = "pie-cookie-banner-necessary-only", _ = "pie-cookie-banner-manage-prefs", B = "pie-cookie-banner-prefs-saved", w = [
|
|
6
9
|
{
|
|
7
10
|
id: "all",
|
|
8
11
|
title: "Turn on all",
|
|
@@ -31,15 +34,15 @@ 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 C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (o, e, t, n) => {
|
|
38
|
+
for (var i = n > 1 ? void 0 : n ? x(e, t) : e, a = o.length - 1, s; a >= 0; a--)
|
|
39
|
+
(s = o[a]) && (i = (n ? s(e, t, i) : s(i)) || i);
|
|
40
|
+
return n && i && C(e, t, i), i;
|
|
38
41
|
};
|
|
39
|
-
const
|
|
40
|
-
class
|
|
42
|
+
const O = "pie-cookie-banner";
|
|
43
|
+
class r extends g {
|
|
41
44
|
constructor() {
|
|
42
|
-
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this._dispatchCookieBannerCustomEvent = (e, t) => {
|
|
45
|
+
super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this._dispatchCookieBannerCustomEvent = (e, t) => {
|
|
43
46
|
const n = new CustomEvent(e, {
|
|
44
47
|
bubbles: !0,
|
|
45
48
|
composed: !0,
|
|
@@ -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(y), this._isCookieBannerHidden = !0;
|
|
51
54
|
}, this._onAcceptAll = () => {
|
|
52
|
-
this._dispatchCookieBannerCustomEvent(
|
|
55
|
+
this._dispatchCookieBannerCustomEvent(m), this._isCookieBannerHidden = !0;
|
|
53
56
|
}, this._openManagePreferencesModal = () => {
|
|
54
|
-
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(
|
|
57
|
+
this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(_), 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(B, 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: s
|
|
99
102
|
}) {
|
|
100
|
-
return
|
|
103
|
+
return c`
|
|
101
104
|
<div class="c-cookieBanner-preference">
|
|
102
105
|
<div>
|
|
103
106
|
<h3 class="c-cookieBanner-subheading">${t}</h3>
|
|
104
|
-
${n ?
|
|
107
|
+
${n ? c`<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
|
+
${s ? c`<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 c`
|
|
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
|
-
${
|
|
125
|
-
|
|
127
|
+
${k(
|
|
128
|
+
w,
|
|
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 c`
|
|
137
140
|
<pie-modal
|
|
138
141
|
.isOpen="${this._isModalOpen}"
|
|
139
142
|
hasBackButton
|
|
@@ -168,7 +171,7 @@ class s extends g {
|
|
|
168
171
|
<pie-button
|
|
169
172
|
data-test-id="actions-necessary-only"
|
|
170
173
|
@click="${this._onNecessaryOnly}"
|
|
171
|
-
variant="outline-inverse"
|
|
174
|
+
variant="${this.hasPrimaryActionsOnly ? "primary" : "outline-inverse"}"
|
|
172
175
|
isFullWidth
|
|
173
176
|
size="small-expressive">
|
|
174
177
|
Necessary only
|
|
@@ -185,22 +188,25 @@ class s extends g {
|
|
|
185
188
|
</aside>`;
|
|
186
189
|
}
|
|
187
190
|
}
|
|
188
|
-
|
|
191
|
+
r.styles = p(v);
|
|
189
192
|
d([
|
|
190
193
|
h()
|
|
191
|
-
],
|
|
194
|
+
], r.prototype, "_isCookieBannerHidden", 2);
|
|
192
195
|
d([
|
|
193
196
|
h()
|
|
194
|
-
],
|
|
197
|
+
], r.prototype, "_isModalOpen", 2);
|
|
198
|
+
d([
|
|
199
|
+
f({ type: Boolean })
|
|
200
|
+
], r.prototype, "hasPrimaryActionsOnly", 2);
|
|
195
201
|
d([
|
|
196
|
-
|
|
197
|
-
],
|
|
198
|
-
|
|
202
|
+
b("pie-toggle-switch")
|
|
203
|
+
], r.prototype, "_preferencesNodes", 2);
|
|
204
|
+
u(O, r);
|
|
199
205
|
export {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
+
m as ON_COOKIE_BANNER_ACCEPT_ALL,
|
|
207
|
+
_ as ON_COOKIE_BANNER_MANAGE_PREFS,
|
|
208
|
+
y as ON_COOKIE_BANNER_NECESSARY_ONLY,
|
|
209
|
+
B as ON_COOKIE_BANNER_PREFS_SAVED,
|
|
210
|
+
r as PieCookieBanner,
|
|
211
|
+
w as preferences
|
|
206
212
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -6,6 +6,10 @@ import type { ReactWebComponent } from '@lit-labs/react';
|
|
|
6
6
|
import type { TemplateResult } from 'lit';
|
|
7
7
|
|
|
8
8
|
export declare interface CookieBannerProps {
|
|
9
|
+
/**
|
|
10
|
+
* When true, sets the "Necessary only" button variant to "primary".
|
|
11
|
+
*/
|
|
12
|
+
hasPrimaryActionsOnly: boolean;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
/**
|
|
@@ -44,6 +48,7 @@ export declare const PieCookieBanner: ReactWebComponent<PieCookieBanner_2, {
|
|
|
44
48
|
}>;
|
|
45
49
|
|
|
46
50
|
/**
|
|
51
|
+
* @tagname pie-cookie-banner
|
|
47
52
|
* @event {CustomEvent} pie-cookie-banner-accept-all - when all cookies are accepted.
|
|
48
53
|
* @event {CustomEvent} pie-cookie-banner-necessary-only - when all only necessary cookies are accepted.
|
|
49
54
|
* @event {CustomEvent} pie-cookie-banner-manage-prefs - when a user clicks manage preferences.
|
|
@@ -52,6 +57,7 @@ export declare const PieCookieBanner: ReactWebComponent<PieCookieBanner_2, {
|
|
|
52
57
|
declare class PieCookieBanner_2 extends LitElement implements CookieBannerProps {
|
|
53
58
|
private _isCookieBannerHidden;
|
|
54
59
|
private _isModalOpen;
|
|
60
|
+
hasPrimaryActionsOnly: boolean;
|
|
55
61
|
_preferencesNodes: NodeListOf<PieToggleSwitch>;
|
|
56
62
|
/**
|
|
57
63
|
* Handles closing the modal and re-displaying the cookie banner
|
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.8.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.34.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.29.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/defs.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export interface CookieBannerProps {
|
|
2
|
+
/**
|
|
3
|
+
* When true, sets the "Necessary only" button variant to "primary".
|
|
4
|
+
*/
|
|
5
|
+
hasPrimaryActionsOnly: boolean;
|
|
6
|
+
}
|
|
4
7
|
|
|
5
8
|
/**
|
|
6
9
|
* Event name for when all cookies are accepted.
|
|
@@ -36,9 +39,9 @@ export interface Preference {
|
|
|
36
39
|
id: PreferenceIds;
|
|
37
40
|
title: string;
|
|
38
41
|
description?: string;
|
|
39
|
-
isDisabled?: boolean
|
|
40
|
-
isChecked?: boolean
|
|
41
|
-
hasDivider?: boolean
|
|
42
|
+
isDisabled?: boolean;
|
|
43
|
+
isChecked?: boolean;
|
|
44
|
+
hasDivider?: boolean;
|
|
42
45
|
}
|
|
43
46
|
|
|
44
47
|
export const preferences: Preference[] = [
|
package/src/index.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
LitElement, html, unsafeCSS, TemplateResult, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
|
-
import {
|
|
4
|
+
import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
5
|
+
import { property, state, queryAll } from 'lit/decorators.js';
|
|
5
6
|
import { repeat } from 'lit/directives/repeat.js';
|
|
6
7
|
import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch';
|
|
7
8
|
import styles from './cookie-banner.scss?inline';
|
|
@@ -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.
|
|
@@ -34,6 +36,9 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
34
36
|
@state()
|
|
35
37
|
private _isModalOpen = false;
|
|
36
38
|
|
|
39
|
+
@property({ type: Boolean })
|
|
40
|
+
public hasPrimaryActionsOnly = false;
|
|
41
|
+
|
|
37
42
|
@queryAll('pie-toggle-switch')
|
|
38
43
|
_preferencesNodes!: NodeListOf<PieToggleSwitch>;
|
|
39
44
|
|
|
@@ -153,9 +158,9 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
153
158
|
<h3 class="c-cookieBanner-subheading">${title}</h3>
|
|
154
159
|
${description ? html`<p class="c-cookieBanner-description">${description}</p>` : nothing}
|
|
155
160
|
</div>
|
|
156
|
-
<pie-toggle-switch
|
|
161
|
+
<pie-toggle-switch
|
|
157
162
|
id="${id}"
|
|
158
|
-
?isChecked="${isChecked}"
|
|
163
|
+
?isChecked="${isChecked}"
|
|
159
164
|
?isDisabled="${isDisabled}"
|
|
160
165
|
@pie-toggle-switch-changed="${this._handleToggleStates}"/>
|
|
161
166
|
</div>
|
|
@@ -168,8 +173,8 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
168
173
|
*/
|
|
169
174
|
private renderModalContent (): TemplateResult {
|
|
170
175
|
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
|
|
176
|
+
<p class="c-cookieBanner-description">You can find all the information in the
|
|
177
|
+
<pie-link href="#" size="small" target="_blank">Cookie Statement</pie-link> and
|
|
173
178
|
<pie-link href="#" size="small" target="_blank">Cookie technology list</pie-link>.
|
|
174
179
|
</p>
|
|
175
180
|
${repeat(
|
|
@@ -221,7 +226,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
221
226
|
<pie-button
|
|
222
227
|
data-test-id="actions-necessary-only"
|
|
223
228
|
@click="${this._onNecessaryOnly}"
|
|
224
|
-
variant="outline-inverse"
|
|
229
|
+
variant="${this.hasPrimaryActionsOnly ? 'primary' : 'outline-inverse'}"
|
|
225
230
|
isFullWidth
|
|
226
231
|
size="small-expressive">
|
|
227
232
|
Necessary only
|
|
@@ -242,7 +247,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
|
|
|
242
247
|
static styles = unsafeCSS(styles);
|
|
243
248
|
}
|
|
244
249
|
|
|
245
|
-
|
|
250
|
+
defineCustomElement(componentSelector, PieCookieBanner);
|
|
246
251
|
|
|
247
252
|
declare global {
|
|
248
253
|
interface HTMLElementTagNameMap {
|