@justeattakeaway/pie-cookie-banner 0.5.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/README.md CHANGED
@@ -11,17 +11,53 @@
11
11
  # Table of Contents
12
12
 
13
13
  1. [Introduction](#pie-cookie-banner)
14
- 2. [Local Development](#local-development)
14
+ 2. [Installation](#installation)
15
15
  3. [Importing the component](#importing-the-component)
16
- 4. [Props](#props)
17
- 5. [Testing](#testing)
16
+ 4. [Peer Dependencies](#peer-dependencies)
17
+ 5. [Local Development](#local-development)
18
+ 6. [Props](#props)
19
+ 7. [Testing](#testing)
18
20
 
19
- # pie-cookie-banner
21
+
22
+ ## pie-cookie-banner
20
23
 
21
24
  `pie-cookie-banner` is a Web Component built using the Lit library.
22
25
 
23
26
  This component can be easily integrated into various frontend frameworks and customized through a set of properties.
24
27
 
28
+
29
+ ## Installation
30
+
31
+ To install `pie-cookie-banner` in your application, run the following on your command line:
32
+
33
+ ```bash
34
+ # npm
35
+ $ npm i @justeattakeaway/pie-cookie-banner
36
+
37
+ # yarn
38
+ $ yarn add @justeattakeaway/pie-cookie-banner
39
+ ```
40
+
41
+ For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
42
+
43
+
44
+ ### Importing the component
45
+
46
+ ```js
47
+ // default
48
+ import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner';
49
+
50
+ // react
51
+ import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
52
+ ```
53
+
54
+
55
+ ## Peer Dependencies
56
+
57
+ > [!IMPORTANT]
58
+ > When using `pie-cookie-banner`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
59
+
60
+
25
61
  ## Local development
26
62
 
27
63
  Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
@@ -45,15 +81,6 @@ yarn watch --filter=pie-cookie-banner
45
81
  yarn dev --filter=pie-storybook
46
82
  ```
47
83
 
48
- ### Importing the component
49
-
50
- ```js
51
- // default
52
- import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner';
53
-
54
- // react
55
- import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
56
- ```
57
84
 
58
85
  ## Props
59
86
 
@@ -103,4 +130,4 @@ Under scripts `test:visual` replace the environment variable with the below:
103
130
 
104
131
  ```bash
105
132
  PERCY_TOKEN_PIE_COOKIE_BANNER=abcde
106
- ```
133
+ ```
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 r, nothing as l } from "lit";
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
- const k = `*{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)}@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}
5
- `, v = "pie-cookie-banner-accept-all", u = "pie-cookie-banner-necessary-only", m = "pie-cookie-banner-manage-prefs", y = "pie-cookie-banner-prefs-saved", _ = [
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 B = Object.defineProperty, w = Object.getOwnPropertyDescriptor, d = (c, e, t, n) => {
35
- for (var i = n > 1 ? void 0 : n ? w(e, t) : e, a = c.length - 1, o; a >= 0; a--)
36
- (o = c[a]) && (i = (n ? o(e, t, i) : o(i)) || i);
37
- return n && i && B(e, t, i), 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 C = "pie-cookie-banner";
40
- class s extends g {
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(u), this._isCookieBannerHidden = !0;
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(m), this._isModalOpen = !0;
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(y, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
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: o
101
+ hasDivider: r
99
102
  }) {
100
- return r`
103
+ return s`
101
104
  <div class="c-cookieBanner-preference">
102
105
  <div>
103
106
  <h3 class="c-cookieBanner-subheading">${t}</h3>
104
- ${n ? r`<p class="c-cookieBanner-description">${n}</p>` : l}
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
- ${o ? r`<pie-divider></pie-divider>` : l}`;
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 r`
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 r`
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
- s.styles = p(k);
191
+ c.styles = p(u);
189
192
  d([
190
193
  h()
191
- ], s.prototype, "_isCookieBannerHidden", 2);
194
+ ], c.prototype, "_isCookieBannerHidden", 2);
192
195
  d([
193
196
  h()
194
- ], s.prototype, "_isModalOpen", 2);
197
+ ], c.prototype, "_isModalOpen", 2);
195
198
  d([
196
199
  f("pie-toggle-switch")
197
- ], s.prototype, "_preferencesNodes", 2);
198
- customElements.define(C, s);
200
+ ], c.prototype, "_preferencesNodes", 2);
201
+ k(x, c);
199
202
  export {
200
203
  v as ON_COOKIE_BANNER_ACCEPT_ALL,
201
- m as ON_COOKIE_BANNER_MANAGE_PREFS,
202
- u as ON_COOKIE_BANNER_NECESSARY_ONLY,
203
- y as ON_COOKIE_BANNER_PREFS_SAVED,
204
- s as PieCookieBanner,
205
- _ as preferences
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.5.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.30.0",
32
+ "@justeattakeaway/pie-button": "0.33.0",
33
33
  "@justeattakeaway/pie-components-config": "0.4.0",
34
- "@justeattakeaway/pie-icon-button": "0.16.0",
35
- "@justeattakeaway/pie-link": "0.7.0",
36
- "@justeattakeaway/pie-modal": "0.25.0",
37
- "@justeattakeaway/pie-toggle-switch": "0.11.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.9.1"
40
+ "@justeattakeaway/pie-webc-core": "0.11.0"
41
41
  },
42
42
  "volta": {
43
43
  "extends": "../../../package.json"
@@ -31,6 +31,7 @@ $breakpoint-wide: 700px;
31
31
  right: var(--cb-offset);
32
32
  border-top-left-radius: var(--dt-radius-rounded-c);
33
33
  border-top-right-radius: var(--dt-radius-rounded-c);
34
+ z-index: var(--dt-z-index-cookie-banner);
34
35
 
35
36
 
36
37
  @media (min-width: $breakpoint-wide) and (orientation: landscape) {
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
- customElements.define(componentSelector, PieCookieBanner);
247
+ defineCustomElement(componentSelector, PieCookieBanner);
246
248
 
247
249
  declare global {
248
250
  interface HTMLElementTagNameMap {
package/LICENSE DELETED
@@ -1,17 +0,0 @@
1
- Apache License
2
- Version 2.0, January 2004
3
- http://www.apache.org/licenses/
4
-
5
- Copyright (c) Just Eat Takeaway.com
6
-
7
- Licensed under the Apache License, Version 2.0 (the "License");
8
- you may not use this file except in compliance with the License.
9
- You may obtain a copy of the License at
10
-
11
- http://www.apache.org/licenses/LICENSE-2.0
12
-
13
- Unless required by applicable law or agreed to in writing, software
14
- distributed under the License is distributed on an "AS IS" BASIS,
15
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
- See the License for the specific language governing permissions and
17
- limitations under the License.