@consent.software/catalog 1.3.1 → 1.3.4
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_bundle/bundle.js +29 -37
- package/dist_bundle/bundle.js.map +4 -4
- package/dist_ts_web/00_commitinfo_data.d.ts +1 -1
- package/dist_ts_web/00_commitinfo_data.js +5 -5
- package/dist_ts_web/elements/consentsoftware-cookieconsent.d.ts +27 -6
- package/dist_ts_web/elements/consentsoftware-cookieconsent.js +264 -178
- package/dist_ts_web/elements/consentsoftware-header.d.ts +7 -0
- package/dist_ts_web/elements/consentsoftware-header.js +45 -0
- package/dist_ts_web/elements/consentsoftware-mainselection.d.ts +10 -0
- package/dist_ts_web/elements/consentsoftware-mainselection.js +75 -0
- package/dist_ts_web/elements/consentsoftware-tabs.d.ts +8 -0
- package/dist_ts_web/elements/consentsoftware-tabs.js +73 -0
- package/dist_ts_web/elements/consentsoftware-toggle.d.ts +13 -0
- package/dist_ts_web/elements/consentsoftware-toggle.js +137 -0
- package/dist_ts_web/elements/index.d.ts +4 -0
- package/dist_ts_web/elements/index.js +5 -1
- package/dist_ts_web/elements/shared.d.ts +1 -0
- package/dist_ts_web/elements/shared.js +3 -0
- package/dist_ts_web/pages/index.d.ts +0 -1
- package/dist_ts_web/pages/index.js +1 -2
- package/dist_ts_web/pages/page1.d.ts +1 -1
- package/dist_ts_web/pages/page1.js +3 -6
- package/package.json +6 -5
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/dist_ts_web/pages/page2.d.ts +0 -1
- package/dist_ts_web/pages/page2.js +0 -5
- package/dist_watch/bundle.js +0 -51416
- package/dist_watch/bundle.js.map +0 -7
- package/dist_watch/index.html +0 -28
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* autocreated commitinfo by @
|
|
2
|
+
* autocreated commitinfo by @push.rocks/commitinfo
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
|
-
name: '@consent.
|
|
6
|
-
version: '1.
|
|
7
|
-
description: '
|
|
5
|
+
name: '@consent.software/catalog',
|
|
6
|
+
version: '1.3.4',
|
|
7
|
+
description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.'
|
|
8
8
|
};
|
|
9
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
9
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsMkJBQTJCO0lBQ2pDLE9BQU8sRUFBRSxPQUFPO0lBQ2hCLFdBQVcsRUFBRSwrSkFBK0o7Q0FDN0ssQ0FBQSJ9
|
|
@@ -1,16 +1,37 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import '@design.estate/dees-catalog';
|
|
1
|
+
import { LitElement, type TemplateResult } from 'lit';
|
|
3
2
|
import * as csWebclient from '@consent.software/webclient';
|
|
4
|
-
export declare class ConsentsoftwareCookieconsent extends
|
|
3
|
+
export declare class ConsentsoftwareCookieconsent extends LitElement {
|
|
5
4
|
static demo: () => TemplateResult<1>;
|
|
6
5
|
csWebclientInstance: csWebclient.CsWebclient;
|
|
7
6
|
csWebclientRan: boolean;
|
|
7
|
+
theme: 'light' | 'dark';
|
|
8
|
+
/**
|
|
9
|
+
* We bind `heightPixels` to a CSS variable (--cookieconsent-height).
|
|
10
|
+
* Then we can do margin-bottom animations in CSS.
|
|
11
|
+
*/
|
|
12
|
+
static styles: import("lit").CSSResult;
|
|
8
13
|
constructor();
|
|
9
|
-
static styles: import("@design.estate/dees-element").CSSResult[];
|
|
10
14
|
render(): TemplateResult;
|
|
11
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Called when the element is inserted into the DOM.
|
|
17
|
+
*/
|
|
12
18
|
connectedCallback(): Promise<void>;
|
|
13
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Called after the first render of the component.
|
|
21
|
+
* We measure the actual height of the banner and update the CSS variable.
|
|
22
|
+
*/
|
|
23
|
+
firstUpdated(): Promise<void>;
|
|
24
|
+
/**
|
|
25
|
+
* Called whenever the element is updated or re-rendered.
|
|
26
|
+
*/
|
|
14
27
|
updated(): Promise<void>;
|
|
28
|
+
/**
|
|
29
|
+
* Sets the user’s chosen cookie level(s) and hides the banner.
|
|
30
|
+
*/
|
|
15
31
|
private setLevel;
|
|
32
|
+
/**
|
|
33
|
+
* Dynamically switches the theme between light/dark,
|
|
34
|
+
* respecting `prefers-color-scheme` by default.
|
|
35
|
+
*/
|
|
36
|
+
private updateTheme;
|
|
16
37
|
}
|
|
@@ -7,205 +7,270 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
9
|
};
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import '
|
|
10
|
+
import * as shared from './shared.js';
|
|
11
|
+
import { LitElement, html, css } from 'lit';
|
|
12
|
+
import { customElement } from 'lit/decorators.js';
|
|
13
|
+
import { property } from 'lit/decorators/property.js';
|
|
13
14
|
import * as csInterfaces from '@consent.software/interfaces';
|
|
14
15
|
import * as csWebclient from '@consent.software/webclient';
|
|
15
16
|
import { delayFor } from '@push.rocks/smartdelay';
|
|
16
|
-
|
|
17
|
+
let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends LitElement {
|
|
17
18
|
static { this.demo = () => html `<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`; }
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
margin: auto;
|
|
36
|
-
line-height: var(--cookieconsent-height);
|
|
37
|
-
padding-bottom: 20px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
.text-container {
|
|
42
|
-
line-height: var(--cookieconsent-height);
|
|
43
|
-
display: grid;
|
|
44
|
-
grid-template-columns: 30px auto;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.text-container .icon-container {
|
|
48
|
-
height: var(--cookieconsent-height);
|
|
49
|
-
display: inline-block;
|
|
50
|
-
color: #4496F5;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.text-container .toptext {
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.text-container a {
|
|
58
|
-
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.button-container {
|
|
62
|
-
display: grid;
|
|
63
|
-
grid-template-columns: ${cssManager.cssGridColumns(4, 20)};
|
|
64
|
-
grid-column-gap: 20px;
|
|
65
|
-
grid-row-gap: 20px;
|
|
66
|
-
}
|
|
19
|
+
/**
|
|
20
|
+
* We bind `heightPixels` to a CSS variable (--cookieconsent-height).
|
|
21
|
+
* Then we can do margin-bottom animations in CSS.
|
|
22
|
+
*/
|
|
23
|
+
static { this.styles = css `
|
|
24
|
+
:host {
|
|
25
|
+
font-family: ${shared.fontStack};
|
|
26
|
+
/* Default theme variables */
|
|
27
|
+
--text-color: #333;
|
|
28
|
+
--background-color: #eeeeee;
|
|
29
|
+
--accent-color: #333333;
|
|
30
|
+
--button-bg: #ffffff;
|
|
31
|
+
--button-hover-bg: #f2f2f2;
|
|
32
|
+
--icon-color: #4496f5;
|
|
33
|
+
--link-color: #333;
|
|
34
|
+
--padding-sides: 16px;
|
|
35
|
+
}
|
|
67
36
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
37
|
+
:host([theme='dark']) {
|
|
38
|
+
--text-color: #fff;
|
|
39
|
+
--background-color: #111;
|
|
40
|
+
--accent-color: #333333;
|
|
41
|
+
--button-bg: #252525;
|
|
42
|
+
--button-hover-bg: #222222;
|
|
43
|
+
--icon-color: #4496f5;
|
|
44
|
+
--link-color: #fff;
|
|
45
|
+
}
|
|
72
46
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
47
|
+
:host([theme='light']) {
|
|
48
|
+
--text-color: #333;
|
|
49
|
+
--background-color: #eeeeee;
|
|
50
|
+
--accent-color: #333333;
|
|
51
|
+
--button-bg: #ffffff;
|
|
52
|
+
--button-hover-bg: #f2f2f2;
|
|
53
|
+
--icon-color: #4496f5;
|
|
54
|
+
--link-color: #333;
|
|
55
|
+
}
|
|
78
56
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
57
|
+
.pageOverlay {
|
|
58
|
+
position: fixed;
|
|
59
|
+
top: 0px;
|
|
60
|
+
bottom: 0px;
|
|
61
|
+
right: 0px;
|
|
62
|
+
left: 0px;
|
|
63
|
+
display: grid;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
z-index: 1000; /* standard z-index for fixed elements */
|
|
67
|
+
background: rgba(0, 0, 0, 0);
|
|
68
|
+
backdrop-filter: blur(0px);
|
|
69
|
+
transition: all 0.2s;
|
|
70
|
+
}
|
|
82
71
|
|
|
72
|
+
.modalBox {
|
|
73
|
+
display: block;
|
|
74
|
+
color: var(--text-color);
|
|
75
|
+
background: var(--background-color);
|
|
76
|
+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
|
|
77
|
+
position: realtive;
|
|
78
|
+
border-top: 1px solid var(--accent-color);
|
|
79
|
+
border-radius: 16px;
|
|
80
|
+
max-width: 1100px;
|
|
81
|
+
min-width: calc(100vw / 3);
|
|
82
|
+
box-sizing: border-box;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
/*
|
|
85
|
+
* We start with margin-bottom as negative to hide the banner.
|
|
86
|
+
* The animation occurs when we toggle the gotIt/show attributes.
|
|
87
|
+
*/
|
|
88
|
+
will-change: transform; /* ensure efficient rendering */
|
|
89
|
+
transition: all 0.3s;
|
|
90
|
+
transform: scale(0.95);
|
|
91
|
+
opacity: 0;
|
|
92
|
+
}
|
|
83
93
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
+
/*
|
|
95
|
+
* Toggle display based on [show] attribute
|
|
96
|
+
* (so if show=false, the banner doesn't show at all).
|
|
97
|
+
*/
|
|
98
|
+
:host([show='false']) {
|
|
99
|
+
display: none;
|
|
100
|
+
}
|
|
101
|
+
:host([show='true']) {
|
|
102
|
+
display: block;
|
|
103
|
+
}
|
|
94
104
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
105
|
+
/*
|
|
106
|
+
* Animate margin-bottom when [gotIt] toggles.
|
|
107
|
+
* If gotIt=true, push the banner down off-screen.
|
|
108
|
+
* If gotIt=false, pull the banner into view.
|
|
109
|
+
*/
|
|
110
|
+
:host([gotIt='true']) {
|
|
111
|
+
background: blue;
|
|
112
|
+
}
|
|
113
|
+
:host([gotIt='false']) {
|
|
114
|
+
background: red;
|
|
115
|
+
}
|
|
98
116
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
117
|
+
.content {
|
|
118
|
+
margin: auto;
|
|
119
|
+
}
|
|
102
120
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
121
|
+
.text-container {
|
|
122
|
+
padding-left: var(--padding-sides);
|
|
123
|
+
padding-right: var(--padding-sides);
|
|
124
|
+
display: grid;
|
|
125
|
+
grid-template-columns: auto;
|
|
126
|
+
}
|
|
109
127
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
128
|
+
.text-container a {
|
|
129
|
+
color: var(--link-color);
|
|
130
|
+
text-decoration: none;
|
|
131
|
+
}
|
|
114
132
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
133
|
+
.button-container {
|
|
134
|
+
padding: var(--padding-sides);
|
|
135
|
+
display: grid;
|
|
136
|
+
grid-template-columns: repeat(3, 1fr);
|
|
137
|
+
gap: 16px;
|
|
138
|
+
}
|
|
118
139
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
140
|
+
.info-container {
|
|
141
|
+
color: var(--text-color);
|
|
142
|
+
text-align: center;
|
|
143
|
+
line-height: 2em;
|
|
144
|
+
background: rgba(0, 0, 0, 0.1);
|
|
145
|
+
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
146
|
+
font-size: 0.8em;
|
|
147
|
+
color: rgba(255, 255, 255, 0.5);
|
|
148
|
+
}
|
|
124
149
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
150
|
+
.info-container a {
|
|
151
|
+
text-decoration: underline;
|
|
152
|
+
color: var(--link-color);
|
|
153
|
+
transition: color 0.2s;
|
|
154
|
+
}
|
|
155
|
+
.info-container a:hover {
|
|
156
|
+
color: #ffffff;
|
|
157
|
+
}
|
|
130
158
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
159
|
+
.consent-button {
|
|
160
|
+
border-radius: 3px;
|
|
161
|
+
background: var(--button-bg);
|
|
162
|
+
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
|
163
|
+
padding: 10px;
|
|
164
|
+
line-height: 30px;
|
|
165
|
+
text-align: center;
|
|
166
|
+
cursor: pointer;
|
|
167
|
+
transition: background 0.2s;
|
|
168
|
+
}
|
|
135
169
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
170
|
+
.consent-button:hover {
|
|
171
|
+
background: var(--button-hover-bg);
|
|
172
|
+
}
|
|
173
|
+
`; }
|
|
174
|
+
constructor() {
|
|
175
|
+
super();
|
|
176
|
+
this.csWebclientInstance = new csWebclient.CsWebclient();
|
|
177
|
+
this.csWebclientRan = false;
|
|
178
|
+
this.theme = 'light';
|
|
179
|
+
this.setAttribute('gotIt', 'true');
|
|
180
|
+
this.setAttribute('show', 'false');
|
|
181
|
+
}
|
|
143
182
|
render() {
|
|
144
183
|
return html `
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
184
|
+
<div class="pageOverlay">
|
|
185
|
+
<div class="modalBox">
|
|
186
|
+
<div class="content">
|
|
187
|
+
<consentsoftware-header></consentsoftware-header>
|
|
188
|
+
<consentsoftware-tabs></consentsoftware-tabs>
|
|
189
|
+
<div class="text-container" style="padding: 16px;">
|
|
190
|
+
<div class="toptext">
|
|
191
|
+
This page uses cookies. Please review our
|
|
192
|
+
<a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a>
|
|
193
|
+
and choose which cookie level you are willing to accept.
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
<!-- <div class="button-container">
|
|
197
|
+
<div
|
|
198
|
+
class="consent-button"
|
|
199
|
+
@click=${(event) => this.setLevel(event, ['functional'])}
|
|
200
|
+
>
|
|
201
|
+
Functional cookies
|
|
202
|
+
</div>
|
|
203
|
+
<div
|
|
204
|
+
class="consent-button"
|
|
205
|
+
@click=${(event) => this.setLevel(event, ['functional', 'analytics'])}
|
|
206
|
+
>
|
|
207
|
+
Analytics cookies
|
|
208
|
+
</div>
|
|
209
|
+
<div
|
|
210
|
+
class="consent-button"
|
|
211
|
+
@click=${(event) => this.setLevel(event, ['functional', 'analytics', 'marketing'])}
|
|
212
|
+
>
|
|
213
|
+
Marketing cookies
|
|
214
|
+
</div>
|
|
215
|
+
<div
|
|
216
|
+
class="consent-button"
|
|
217
|
+
@click=${(event) => this.setLevel(event, ['functional', 'analytics', 'marketing', 'all'])}
|
|
218
|
+
>
|
|
219
|
+
All cookies
|
|
220
|
+
</div>
|
|
221
|
+
</div> -->
|
|
222
|
+
<consentsoftware-mainselection></consentsoftware-mainselection>
|
|
223
|
+
<div class="button-container">
|
|
224
|
+
<div
|
|
225
|
+
class="consent-button"
|
|
226
|
+
@click=${(event) => this.setLevel(event, ['functional'])}
|
|
227
|
+
>
|
|
228
|
+
Deny
|
|
229
|
+
</div>
|
|
230
|
+
<div
|
|
231
|
+
class="consent-button"
|
|
232
|
+
@click=${(event) => this.setLevel(event, ['functional', 'analytics'])}
|
|
233
|
+
>
|
|
234
|
+
Accept selection
|
|
235
|
+
</div>
|
|
236
|
+
<div
|
|
237
|
+
class="consent-button"
|
|
238
|
+
@click=${(event) => this.setLevel(event, ['functional', 'analytics', 'marketing'])}
|
|
239
|
+
>
|
|
240
|
+
Accept all cookies
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="info-container">
|
|
244
|
+
consent management powered by
|
|
245
|
+
<a href="https://consent.software">consent.software</a>
|
|
246
|
+
</div>
|
|
186
247
|
</div>
|
|
187
|
-
<div class="toptext">This page uses cookies. Please review our <a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a> and choose which cookie level you are willing to accept.</div>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="button-container">
|
|
190
|
-
<div class="consent-button" @click=${event => { this.setLevel(event, ['functional']); }}>Functional cookies</div>
|
|
191
|
-
<div class="consent-button" @click=${event => { this.setLevel(event, ['functional', 'analytics']); }}>Analytics cookies</div>
|
|
192
|
-
<div class="consent-button" @click=${event => { this.setLevel(event, ['functional', 'analytics', 'marketing']); }}>Marketing cookies</div>
|
|
193
|
-
<div class="consent-button" @click=${event => { this.setLevel(event, ['functional', 'analytics', 'marketing', 'all']); }}>All cookies</div>
|
|
194
|
-
</div>
|
|
195
|
-
<div class="info-container">
|
|
196
|
-
consent management powered by <a href="https://consent.software">consent.software</a>
|
|
197
248
|
</div>
|
|
198
249
|
</div>
|
|
199
250
|
`;
|
|
200
251
|
}
|
|
252
|
+
/**
|
|
253
|
+
* Called when the element is inserted into the DOM.
|
|
254
|
+
*/
|
|
201
255
|
async connectedCallback() {
|
|
202
256
|
super.connectedCallback();
|
|
203
|
-
this.
|
|
257
|
+
this.updateTheme();
|
|
204
258
|
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
|
|
205
259
|
if (!cookieLevel) {
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
260
|
+
this.setAttribute('show', 'true');
|
|
261
|
+
this.setAttribute('gotIt', 'false');
|
|
262
|
+
requestAnimationFrame(async () => {
|
|
263
|
+
await this.updated();
|
|
264
|
+
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
265
|
+
if (pageOverlay) {
|
|
266
|
+
pageOverlay.style.background = 'rgba(0, 0, 0, 0.5)';
|
|
267
|
+
pageOverlay.style.backdropFilter = 'blur(2px)';
|
|
268
|
+
}
|
|
269
|
+
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
270
|
+
if (modalBox) {
|
|
271
|
+
modalBox.style.transform = `scale(1)`;
|
|
272
|
+
modalBox.style.opacity = '1';
|
|
273
|
+
}
|
|
209
274
|
});
|
|
210
275
|
}
|
|
211
276
|
else {
|
|
@@ -213,32 +278,53 @@ export let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent ext
|
|
|
213
278
|
this.setAttribute('gotIt', 'true');
|
|
214
279
|
}
|
|
215
280
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
281
|
+
/**
|
|
282
|
+
* Called after the first render of the component.
|
|
283
|
+
* We measure the actual height of the banner and update the CSS variable.
|
|
284
|
+
*/
|
|
285
|
+
async firstUpdated() { }
|
|
286
|
+
/**
|
|
287
|
+
* Called whenever the element is updated or re-rendered.
|
|
288
|
+
*/
|
|
219
289
|
async updated() {
|
|
220
|
-
console.log(`The height of the cookie banner is ${this.shadowRoot
|
|
290
|
+
console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
|
|
221
291
|
const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
|
|
222
292
|
if (!this.csWebclientRan && acceptedCookieLevels) {
|
|
223
293
|
this.csWebclientRan = true;
|
|
224
294
|
await this.csWebclientInstance.getAndRunConsentTuples();
|
|
225
295
|
}
|
|
226
296
|
}
|
|
297
|
+
/**
|
|
298
|
+
* Sets the user’s chosen cookie level(s) and hides the banner.
|
|
299
|
+
*/
|
|
227
300
|
async setLevel(event, levelsArg) {
|
|
228
301
|
console.log(`Set level to ${levelsArg}`);
|
|
229
302
|
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
|
230
303
|
this.setAttribute('gotIt', 'true');
|
|
231
304
|
await delayFor(300);
|
|
232
305
|
this.setAttribute('show', 'false');
|
|
306
|
+
// After user selection, re-check for any required scripts to run
|
|
233
307
|
this.updated();
|
|
234
308
|
}
|
|
309
|
+
/**
|
|
310
|
+
* Dynamically switches the theme between light/dark,
|
|
311
|
+
* respecting `prefers-color-scheme` by default.
|
|
312
|
+
*/
|
|
313
|
+
updateTheme() {
|
|
314
|
+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
315
|
+
this.theme = prefersDark ? 'dark' : 'light';
|
|
316
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
317
|
+
this.theme = e.matches ? 'dark' : 'light';
|
|
318
|
+
});
|
|
319
|
+
}
|
|
235
320
|
};
|
|
236
321
|
__decorate([
|
|
237
|
-
property({ type:
|
|
238
|
-
__metadata("design:type",
|
|
239
|
-
], ConsentsoftwareCookieconsent.prototype, "
|
|
322
|
+
property({ type: String, reflect: true }),
|
|
323
|
+
__metadata("design:type", String)
|
|
324
|
+
], ConsentsoftwareCookieconsent.prototype, "theme", void 0);
|
|
240
325
|
ConsentsoftwareCookieconsent = __decorate([
|
|
241
326
|
customElement('consentsoftware-cookieconsent'),
|
|
242
327
|
__metadata("design:paramtypes", [])
|
|
243
328
|
], ConsentsoftwareCookieconsent);
|
|
244
|
-
|
|
329
|
+
export { ConsentsoftwareCookieconsent };
|
|
330
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sTUFBTSxhQUFhLENBQUM7QUFFdEMsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUF1QixNQUFNLEtBQUssQ0FBQztBQUNqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDbEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBRXRELE9BQU8sS0FBSyxZQUFZLE1BQU0sOEJBQThCLENBQUM7QUFDN0QsT0FBTyxLQUFLLFdBQVcsTUFBTSw2QkFBNkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFHM0MsSUFBTSw0QkFBNEIsR0FBbEMsTUFBTSw0QkFBNkIsU0FBUSxVQUFVO2FBQzVDLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEsaUVBQWlFLEFBQTlFLENBQStFO0lBUWpHOzs7T0FHRzthQUNXLFdBQU0sR0FBRyxHQUFHLENBQUE7O3FCQUVQLE1BQU0sQ0FBQyxTQUFTOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBb0psQyxBQXRKbUIsQ0FzSmxCO0lBRUY7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQW5LSCx3QkFBbUIsR0FBRyxJQUFJLFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNwRCxtQkFBYyxHQUFHLEtB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
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
+
};
|
|
10
|
+
import * as shared from './shared.js';
|
|
11
|
+
import { LitElement, html, css } from 'lit';
|
|
12
|
+
import { customElement } from 'lit/decorators.js';
|
|
13
|
+
import { property } from 'lit/decorators/property.js';
|
|
14
|
+
let ConsentsoftwareHeader = class ConsentsoftwareHeader extends LitElement {
|
|
15
|
+
static { this.demo = () => html `<consentsoftware-tabs></consentsoftware-tabs>`; }
|
|
16
|
+
static { this.styles = css `
|
|
17
|
+
:host {
|
|
18
|
+
display: block;
|
|
19
|
+
line-height: 2em;
|
|
20
|
+
text-align: center;
|
|
21
|
+
font-family: ${shared.fontStack};
|
|
22
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.heading {
|
|
26
|
+
|
|
27
|
+
}
|
|
28
|
+
`; }
|
|
29
|
+
constructor() {
|
|
30
|
+
super();
|
|
31
|
+
}
|
|
32
|
+
render() {
|
|
33
|
+
return html `
|
|
34
|
+
<div class="heading">
|
|
35
|
+
What about cookies?
|
|
36
|
+
</div>
|
|
37
|
+
`;
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
ConsentsoftwareHeader = __decorate([
|
|
41
|
+
customElement('consentsoftware-header'),
|
|
42
|
+
__metadata("design:paramtypes", [])
|
|
43
|
+
], ConsentsoftwareHeader);
|
|
44
|
+
export { ConsentsoftwareHeader };
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLWhlYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9jb25zZW50c29mdHdhcmUtaGVhZGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE1BQU0sYUFBYSxDQUFDO0FBRXRDLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBdUIsTUFBTSxLQUFLLENBQUM7QUFDakUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ2xELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUcvQyxJQUFNLHFCQUFxQixHQUEzQixNQUFNLHFCQUFzQixTQUFRLFVBQVU7YUFDckMsU0FBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQSwrQ0FBK0MsQUFBNUQsQ0FBNkQ7YUFFakUsV0FBTSxHQUFHLEdBQUcsQ0FBQTs7Ozs7cUJBS1AsTUFBTSxDQUFDLFNBQVM7Ozs7Ozs7R0FPbEMsQUFabUIsQ0FZbEI7SUFFRjtRQUNFLEtBQUssRUFBRSxDQUFDO0lBQ1YsQ0FBQztJQUVNLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQTs7OztLQUlWLENBQUM7SUFDSixDQUFDOztBQTNCVSxxQkFBcUI7SUFEakMsYUFBYSxDQUFDLHdCQUF3QixDQUFDOztHQUMzQixxQkFBcUIsQ0E0QmpDIn0=
|