@consent.software/catalog 1.5.4 → 1.6.1
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 +110 -163
- package/dist_bundle/bundle.js.map +4 -4
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/consentsoftware-cookieconsent.d.ts +15 -12
- package/dist_ts_web/elements/consentsoftware-cookieconsent.js +235 -171
- package/dist_ts_web/elements/consentsoftware-header.js +62 -23
- package/dist_ts_web/elements/consentsoftware-mainselection.d.ts +2 -2
- package/dist_ts_web/elements/consentsoftware-mainselection.js +80 -34
- package/dist_ts_web/elements/consentsoftware-tabs.js +79 -33
- package/dist_ts_web/elements/consentsoftware-toggle.js +193 -154
- package/dist_watch/bundle.js +9927 -3913
- package/dist_watch/bundle.js.map +4 -4
- package/package.json +8 -8
- package/readme.md +149 -80
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/consentsoftware-cookieconsent.ts +96 -78
- package/ts_web/elements/consentsoftware-mainselection.ts +2 -2
- package/ts_web/elements/consentsoftware-tabs.ts +9 -2
- package/ts_web/tsconfig.json +4 -4
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@consent.software/catalog',
|
|
6
|
-
version: '1.
|
|
6
|
+
version: '1.6.1',
|
|
7
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
9
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsMkJBQTJCO0lBQ2pDLE9BQU8sRUFBRSxPQUFPO0lBQ2hCLFdBQVcsRUFBRSwrSkFBK0o7Q0FDN0ssQ0FBQSJ9
|
|
@@ -9,35 +9,38 @@ export declare class ConsentsoftwareCookieconsent extends LitElement {
|
|
|
9
9
|
static demo: () => TemplateResult<1>;
|
|
10
10
|
csWebclientInstance: csWebclient.CsWebclient;
|
|
11
11
|
csWebclientRan: boolean;
|
|
12
|
-
theme: 'light' | 'dark';
|
|
12
|
+
accessor theme: 'light' | 'dark';
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
15
|
-
*
|
|
14
|
+
* Define component styles with CSS variables that adjust based on theme.
|
|
15
|
+
* The default variables serve as baseline for the light theme.
|
|
16
|
+
* Theme-specific overrides modify these for dark mode.
|
|
16
17
|
*/
|
|
17
18
|
static styles: import("lit").CSSResult;
|
|
18
19
|
constructor();
|
|
19
20
|
render(): TemplateResult;
|
|
20
21
|
/**
|
|
21
|
-
*
|
|
22
|
+
* Lifecycle method called when the element is connected to the DOM.
|
|
23
|
+
* It sets up the theme and displays the consent banner if no cookie levels are set.
|
|
22
24
|
*/
|
|
23
25
|
connectedCallback(): Promise<void>;
|
|
24
|
-
/**
|
|
25
|
-
* Called after the first render of the component.
|
|
26
|
-
* We measure the actual height of the banner and update the CSS variable.
|
|
27
|
-
*/
|
|
28
26
|
firstUpdated(): Promise<void>;
|
|
29
27
|
/**
|
|
30
|
-
* Called
|
|
28
|
+
* Called after updates. Logs banner height and runs consent scripts if necessary.
|
|
31
29
|
*/
|
|
32
30
|
updated(): Promise<void>;
|
|
33
31
|
/**
|
|
34
|
-
*
|
|
32
|
+
* Handles consent button clicks, sets cookie levels, and hides the banner.
|
|
33
|
+
* Uses theme variables for styling transitions.
|
|
35
34
|
*/
|
|
36
35
|
private handleConsentButtonClick;
|
|
36
|
+
/**
|
|
37
|
+
* Handles clicks on the page overlay. If clicked outside the modal,
|
|
38
|
+
* triggers a shake animation as feedback.
|
|
39
|
+
*/
|
|
37
40
|
private pageOverlayClick;
|
|
38
41
|
/**
|
|
39
|
-
* Dynamically switches the theme between light
|
|
40
|
-
*
|
|
42
|
+
* Dynamically switches the theme between light and dark.
|
|
43
|
+
* Listens for system theme changes to update the component's theme.
|
|
41
44
|
*/
|
|
42
45
|
private updateTheme;
|
|
43
46
|
}
|
|
@@ -1,11 +1,36 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
2
|
+
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
3
|
+
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
4
|
+
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
5
|
+
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
6
|
+
var _, done = false;
|
|
7
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
8
|
+
var context = {};
|
|
9
|
+
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
10
|
+
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
11
|
+
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
12
|
+
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
13
|
+
if (kind === "accessor") {
|
|
14
|
+
if (result === void 0) continue;
|
|
15
|
+
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
16
|
+
if (_ = accept(result.get)) descriptor.get = _;
|
|
17
|
+
if (_ = accept(result.set)) descriptor.set = _;
|
|
18
|
+
if (_ = accept(result.init)) initializers.unshift(_);
|
|
19
|
+
}
|
|
20
|
+
else if (_ = accept(result)) {
|
|
21
|
+
if (kind === "field") initializers.unshift(_);
|
|
22
|
+
else descriptor[key] = _;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
26
|
+
done = true;
|
|
6
27
|
};
|
|
7
|
-
var
|
|
8
|
-
|
|
28
|
+
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
29
|
+
var useValue = arguments.length > 2;
|
|
30
|
+
for (var i = 0; i < initializers.length; i++) {
|
|
31
|
+
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
32
|
+
}
|
|
33
|
+
return useValue ? value : void 0;
|
|
9
34
|
};
|
|
10
35
|
import * as shared from './shared.js';
|
|
11
36
|
import { LitElement, html, css } from 'lit';
|
|
@@ -14,17 +39,42 @@ import { property } from 'lit/decorators/property.js';
|
|
|
14
39
|
import * as csInterfaces from '@consent.software/interfaces';
|
|
15
40
|
import * as csWebclient from '@consent.software/webclient';
|
|
16
41
|
import { delayFor } from '@push.rocks/smartdelay';
|
|
17
|
-
let ConsentsoftwareCookieconsent =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
42
|
+
let ConsentsoftwareCookieconsent = (() => {
|
|
43
|
+
let _classDecorators = [customElement('consentsoftware-cookieconsent')];
|
|
44
|
+
let _classDescriptor;
|
|
45
|
+
let _classExtraInitializers = [];
|
|
46
|
+
let _classThis;
|
|
47
|
+
let _classSuper = LitElement;
|
|
48
|
+
let _theme_decorators;
|
|
49
|
+
let _theme_initializers = [];
|
|
50
|
+
let _theme_extraInitializers = [];
|
|
51
|
+
var ConsentsoftwareCookieconsent = class extends _classSuper {
|
|
52
|
+
static { _classThis = this; }
|
|
53
|
+
static {
|
|
54
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
55
|
+
_theme_decorators = [property({ type: String, reflect: true })];
|
|
56
|
+
__esDecorate(this, null, _theme_decorators, { kind: "accessor", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
|
|
57
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
58
|
+
ConsentsoftwareCookieconsent = _classThis = _classDescriptor.value;
|
|
59
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
60
|
+
}
|
|
61
|
+
static demo = () => html `<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
|
|
62
|
+
csWebclientInstance = new csWebclient.CsWebclient();
|
|
63
|
+
csWebclientRan = false;
|
|
64
|
+
#theme_accessor_storage = __runInitializers(this, _theme_initializers, 'light');
|
|
65
|
+
// Reflects the current theme ('light' or 'dark')
|
|
66
|
+
get theme() { return this.#theme_accessor_storage; }
|
|
67
|
+
set theme(value) { this.#theme_accessor_storage = value; }
|
|
68
|
+
/**
|
|
69
|
+
* Define component styles with CSS variables that adjust based on theme.
|
|
70
|
+
* The default variables serve as baseline for the light theme.
|
|
71
|
+
* Theme-specific overrides modify these for dark mode.
|
|
72
|
+
*/
|
|
73
|
+
static styles = css `
|
|
24
74
|
:host {
|
|
25
75
|
font-family: ${shared.fontStack};
|
|
26
76
|
user-select: none;
|
|
27
|
-
/* Default
|
|
77
|
+
/* Default variables for Light Theme */
|
|
28
78
|
--text-color: #333;
|
|
29
79
|
--background-color: #eeeeee;
|
|
30
80
|
--accent-color: #333333;
|
|
@@ -33,8 +83,14 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
33
83
|
--icon-color: #4496f5;
|
|
34
84
|
--link-color: #333;
|
|
35
85
|
--padding-sides: 16px;
|
|
86
|
+
/* Additional variables for modal and info container styling */
|
|
87
|
+
--info-bg: rgba(0, 0, 0, 0.1);
|
|
88
|
+
--info-text: rgba(255, 255, 255, 0.5);
|
|
89
|
+
--modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
|
36
90
|
}
|
|
37
91
|
|
|
92
|
+
/* Dark Theme Overrides:
|
|
93
|
+
When theme attribute is 'dark', override variables accordingly. */
|
|
38
94
|
:host([theme='dark']) {
|
|
39
95
|
--text-color: #fff;
|
|
40
96
|
--background-color: #111;
|
|
@@ -43,8 +99,14 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
43
99
|
--button-hover-bg: #222222;
|
|
44
100
|
--icon-color: #4496f5;
|
|
45
101
|
--link-color: #fff;
|
|
102
|
+
--info-bg: rgba(0, 0, 0, 0.1);
|
|
103
|
+
--info-text: rgba(255, 255, 255, 0.5);
|
|
104
|
+
--modal-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
|
|
46
105
|
}
|
|
47
106
|
|
|
107
|
+
/* Light Theme Overrides:
|
|
108
|
+
Explicit light theme settings, currently matching defaults.
|
|
109
|
+
Can be customized independently if desired. */
|
|
48
110
|
:host([theme='light']) {
|
|
49
111
|
--text-color: #333;
|
|
50
112
|
--background-color: #eeeeee;
|
|
@@ -53,33 +115,39 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
53
115
|
--button-hover-bg: #f2f2f2;
|
|
54
116
|
--icon-color: #4496f5;
|
|
55
117
|
--link-color: #333;
|
|
118
|
+
--info-bg: rgba(0, 0, 0, 0.1);
|
|
119
|
+
--info-text: rgba(0, 0, 0, 0.5);
|
|
120
|
+
--modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
|
56
121
|
}
|
|
57
122
|
|
|
123
|
+
/* Overlay covering the page behind the modal */
|
|
58
124
|
.pageOverlay {
|
|
59
125
|
position: fixed;
|
|
60
|
-
top:
|
|
61
|
-
bottom:
|
|
62
|
-
right:
|
|
63
|
-
left:
|
|
126
|
+
top: 0;
|
|
127
|
+
bottom: 0;
|
|
128
|
+
right: 0;
|
|
129
|
+
left: 0;
|
|
64
130
|
display: grid;
|
|
65
131
|
align-items: center;
|
|
66
132
|
justify-content: center;
|
|
67
|
-
z-index: 1000; /*
|
|
133
|
+
z-index: 1000; /* Ensures the overlay is on top of other elements */
|
|
68
134
|
background: rgba(255, 255, 255, 0);
|
|
69
135
|
backdrop-filter: blur(0px);
|
|
70
136
|
transition: all 0.2s;
|
|
71
137
|
}
|
|
72
138
|
|
|
139
|
+
/* Shake animation for overlay when clicked */
|
|
73
140
|
.pageOverlay.shake {
|
|
74
141
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
75
142
|
}
|
|
76
143
|
|
|
144
|
+
/* Modal box styling using theme variables for colors and shadows */
|
|
77
145
|
.modalBox {
|
|
78
146
|
display: block;
|
|
79
147
|
color: var(--text-color);
|
|
80
148
|
background: var(--background-color);
|
|
81
|
-
box-shadow:
|
|
82
|
-
position:
|
|
149
|
+
box-shadow: var(--modal-box-shadow);
|
|
150
|
+
position: relative;
|
|
83
151
|
border: 1px dotted rgba(255, 255, 255, 0.1);
|
|
84
152
|
border-top: 1px solid var(--accent-color);
|
|
85
153
|
border-radius: 16px;
|
|
@@ -87,12 +155,22 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
87
155
|
min-width: calc(100vw / 3);
|
|
88
156
|
box-sizing: border-box;
|
|
89
157
|
overflow: hidden;
|
|
90
|
-
will-change: transform;
|
|
158
|
+
will-change: transform;
|
|
91
159
|
transition: all 0.3s;
|
|
92
160
|
transform: scale(0.95);
|
|
93
161
|
opacity: 0;
|
|
94
162
|
}
|
|
95
163
|
|
|
164
|
+
/* Media query for mobile devices: stack buttons vertically */
|
|
165
|
+
@media (max-width: 600px) {
|
|
166
|
+
.modalBox {
|
|
167
|
+
height: 100vh;
|
|
168
|
+
box-shadow: none;
|
|
169
|
+
border-radius: 0px;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Shake animation for modal box */
|
|
96
174
|
.modalBox.shake {
|
|
97
175
|
animation: shake 150ms 2 linear;
|
|
98
176
|
}
|
|
@@ -109,10 +187,7 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
109
187
|
}
|
|
110
188
|
}
|
|
111
189
|
|
|
112
|
-
/*
|
|
113
|
-
* Toggle display based on [show] attribute
|
|
114
|
-
* (so if show=false, the banner doesn't show at all).
|
|
115
|
-
*/
|
|
190
|
+
/* Toggle display based on [show] attribute */
|
|
116
191
|
:host([show='false']) {
|
|
117
192
|
display: none;
|
|
118
193
|
}
|
|
@@ -143,25 +218,14 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
143
218
|
gap: 16px;
|
|
144
219
|
}
|
|
145
220
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
border-top: 1px dotted rgba(255, 255, 255, 0.1);
|
|
152
|
-
font-size: 0.8em;
|
|
153
|
-
color: rgba(255, 255, 255, 0.5);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.info-container a {
|
|
157
|
-
text-decoration: underline;
|
|
158
|
-
color: var(--link-color);
|
|
159
|
-
transition: color 0.2s;
|
|
160
|
-
}
|
|
161
|
-
.info-container a:hover {
|
|
162
|
-
color: #ffffff;
|
|
221
|
+
/* Media query for mobile devices: stack buttons vertically */
|
|
222
|
+
@media (max-width: 600px) {
|
|
223
|
+
.button-container {
|
|
224
|
+
grid-template-columns: 1fr;
|
|
225
|
+
}
|
|
163
226
|
}
|
|
164
227
|
|
|
228
|
+
/* Consent button styling using theme variables */
|
|
165
229
|
.consent-button {
|
|
166
230
|
border-radius: 3px;
|
|
167
231
|
background: var(--button-bg);
|
|
@@ -176,16 +240,34 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
176
240
|
.consent-button:hover {
|
|
177
241
|
background: var(--button-hover-bg);
|
|
178
242
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
243
|
+
|
|
244
|
+
/* Use theme variables for info container background and text */
|
|
245
|
+
.info-container {
|
|
246
|
+
text-align: center;
|
|
247
|
+
line-height: 3em;
|
|
248
|
+
background: var(--info-bg);
|
|
249
|
+
border-top: 1px dotted rgba(255, 255, 255, 0.1);
|
|
250
|
+
font-size: 0.8em;
|
|
251
|
+
color: var(--info-text);
|
|
186
252
|
}
|
|
187
|
-
|
|
188
|
-
|
|
253
|
+
|
|
254
|
+
.info-container a {
|
|
255
|
+
text-decoration: underline;
|
|
256
|
+
color: var(--link-color);
|
|
257
|
+
transition: color 0.2s;
|
|
258
|
+
}
|
|
259
|
+
.info-container a:hover {
|
|
260
|
+
color: #ffffff;
|
|
261
|
+
}
|
|
262
|
+
`;
|
|
263
|
+
constructor() {
|
|
264
|
+
super();
|
|
265
|
+
__runInitializers(this, _theme_extraInitializers);
|
|
266
|
+
// Initially hide the consent banner until needed
|
|
267
|
+
this.setAttribute('show', 'false');
|
|
268
|
+
}
|
|
269
|
+
render() {
|
|
270
|
+
return html `
|
|
189
271
|
<div class="pageOverlay" @click=${this.pageOverlayClick}>
|
|
190
272
|
<div class="modalBox">
|
|
191
273
|
<div class="content">
|
|
@@ -198,32 +280,6 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
198
280
|
and choose which cookie level you are willing to accept.
|
|
199
281
|
</div>
|
|
200
282
|
</div>
|
|
201
|
-
<!-- <div class="button-container">
|
|
202
|
-
<div
|
|
203
|
-
class="consent-button"
|
|
204
|
-
@click=${(event) => this.handleConsentButtonClick(event, ['functional'])}
|
|
205
|
-
>
|
|
206
|
-
Functional cookies
|
|
207
|
-
</div>
|
|
208
|
-
<div
|
|
209
|
-
class="consent-button"
|
|
210
|
-
@click=${(event) => this.handleConsentButtonClick(event, ['functional', 'analytics'])}
|
|
211
|
-
>
|
|
212
|
-
Analytics cookies
|
|
213
|
-
</div>
|
|
214
|
-
<div
|
|
215
|
-
class="consent-button"
|
|
216
|
-
@click=${(event) => this.handleConsentButtonClick(event, ['functional', 'analytics', 'marketing'])}
|
|
217
|
-
>
|
|
218
|
-
Marketing cookies
|
|
219
|
-
</div>
|
|
220
|
-
<div
|
|
221
|
-
class="consent-button"
|
|
222
|
-
@click=${(event) => this.handleConsentButtonClick(event, ['functional', 'analytics', 'marketing', 'all'])}
|
|
223
|
-
>
|
|
224
|
-
All cookies
|
|
225
|
-
</div>
|
|
226
|
-
</div> -->
|
|
227
283
|
<consentsoftware-mainselection></consentsoftware-mainselection>
|
|
228
284
|
<div class="button-container">
|
|
229
285
|
<div
|
|
@@ -248,109 +304,117 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
248
304
|
<div class="info-container">
|
|
249
305
|
consent management powered by
|
|
250
306
|
<a href="https://consent.software">consent.software</a>
|
|
251
|
-
(Open Source)
|
|
252
307
|
</div>
|
|
253
308
|
</div>
|
|
254
309
|
</div>
|
|
255
310
|
</div>
|
|
256
311
|
`;
|
|
257
|
-
}
|
|
258
|
-
/**
|
|
259
|
-
* Called when the element is inserted into the DOM.
|
|
260
|
-
*/
|
|
261
|
-
async connectedCallback() {
|
|
262
|
-
super.connectedCallback();
|
|
263
|
-
this.updateTheme();
|
|
264
|
-
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
|
|
265
|
-
if (!cookieLevel) {
|
|
266
|
-
this.setAttribute('show', 'true');
|
|
267
|
-
requestAnimationFrame(async () => {
|
|
268
|
-
await this.updated();
|
|
269
|
-
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
270
|
-
if (pageOverlay) {
|
|
271
|
-
pageOverlay.style.background = 'rgba(0,0,0, 0.5)';
|
|
272
|
-
pageOverlay.style.backdropFilter = 'blur(20px)';
|
|
273
|
-
}
|
|
274
|
-
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
275
|
-
if (modalBox) {
|
|
276
|
-
modalBox.style.transform = `scale(1)`;
|
|
277
|
-
modalBox.style.opacity = '1';
|
|
278
|
-
}
|
|
279
|
-
});
|
|
280
312
|
}
|
|
281
|
-
|
|
282
|
-
|
|
313
|
+
/**
|
|
314
|
+
* Lifecycle method called when the element is connected to the DOM.
|
|
315
|
+
* It sets up the theme and displays the consent banner if no cookie levels are set.
|
|
316
|
+
*/
|
|
317
|
+
async connectedCallback() {
|
|
318
|
+
super.connectedCallback();
|
|
319
|
+
this.updateTheme(); // Initialize theme based on system preference
|
|
320
|
+
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
|
|
321
|
+
if (!cookieLevel) {
|
|
322
|
+
// Show consent banner if cookie levels haven't been set yet
|
|
323
|
+
this.setAttribute('show', 'true');
|
|
324
|
+
requestAnimationFrame(async () => {
|
|
325
|
+
await this.updated();
|
|
326
|
+
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
327
|
+
if (pageOverlay) {
|
|
328
|
+
// Apply dark overlay styling when modal appears
|
|
329
|
+
pageOverlay.style.background = 'rgba(0,0,0, 0.5)';
|
|
330
|
+
pageOverlay.style.backdropFilter = 'blur(20px)';
|
|
331
|
+
}
|
|
332
|
+
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
333
|
+
if (modalBox) {
|
|
334
|
+
// Animate modal box appearance
|
|
335
|
+
modalBox.style.transform = `scale(1)`;
|
|
336
|
+
modalBox.style.opacity = '1';
|
|
337
|
+
}
|
|
338
|
+
});
|
|
339
|
+
}
|
|
340
|
+
else {
|
|
341
|
+
// Hide banner if cookie levels are already set
|
|
342
|
+
this.setAttribute('show', 'false');
|
|
343
|
+
}
|
|
283
344
|
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
* Called after the first render of the component.
|
|
287
|
-
* We measure the actual height of the banner and update the CSS variable.
|
|
288
|
-
*/
|
|
289
|
-
async firstUpdated() { }
|
|
290
|
-
/**
|
|
291
|
-
* Called whenever the element is updated or re-rendered.
|
|
292
|
-
*/
|
|
293
|
-
async updated() {
|
|
294
|
-
console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
|
|
295
|
-
const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
|
|
296
|
-
if (!this.csWebclientRan && acceptedCookieLevels) {
|
|
297
|
-
this.csWebclientRan = true;
|
|
298
|
-
await this.csWebclientInstance.getAndRunConsentTuples();
|
|
345
|
+
async firstUpdated() {
|
|
346
|
+
// Placeholder for any logic needed after first render
|
|
299
347
|
}
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
}
|
|
311
|
-
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
312
|
-
if (modalBox) {
|
|
313
|
-
modalBox.style.transform = `scale(0.95)`;
|
|
314
|
-
modalBox.style.opacity = '0';
|
|
348
|
+
/**
|
|
349
|
+
* Called after updates. Logs banner height and runs consent scripts if necessary.
|
|
350
|
+
*/
|
|
351
|
+
async updated() {
|
|
352
|
+
console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
|
|
353
|
+
const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
|
|
354
|
+
if (!this.csWebclientRan && acceptedCookieLevels) {
|
|
355
|
+
this.csWebclientRan = true;
|
|
356
|
+
await this.csWebclientInstance.getAndRunConsentTuples();
|
|
357
|
+
}
|
|
315
358
|
}
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
async pageOverlayClick(e) {
|
|
323
|
-
if (e.target === e.currentTarget) {
|
|
359
|
+
/**
|
|
360
|
+
* Handles consent button clicks, sets cookie levels, and hides the banner.
|
|
361
|
+
* Uses theme variables for styling transitions.
|
|
362
|
+
*/
|
|
363
|
+
async handleConsentButtonClick(event, levelsArg) {
|
|
364
|
+
console.log(`Set level to ${levelsArg}`);
|
|
324
365
|
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
366
|
+
if (pageOverlay) {
|
|
367
|
+
// Fade out overlay effect using inline styles for transition
|
|
368
|
+
pageOverlay.style.background = 'rgba(255,255,255, 0)';
|
|
369
|
+
pageOverlay.style.backdropFilter = 'blur(0px)';
|
|
370
|
+
}
|
|
325
371
|
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
326
|
-
if (
|
|
327
|
-
|
|
328
|
-
modalBox.
|
|
329
|
-
|
|
330
|
-
pageOverlay.classList.remove('shake');
|
|
331
|
-
modalBox.classList.remove('shake');
|
|
372
|
+
if (modalBox) {
|
|
373
|
+
// Scale down and fade out modal box before hiding
|
|
374
|
+
modalBox.style.transform = `scale(0.95)`;
|
|
375
|
+
modalBox.style.opacity = '0';
|
|
332
376
|
}
|
|
377
|
+
// Save user consent preferences
|
|
378
|
+
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
|
379
|
+
await delayFor(300);
|
|
380
|
+
this.setAttribute('show', 'false'); // Hide the consent banner
|
|
381
|
+
this.updated(); // Trigger any post-consent actions
|
|
333
382
|
}
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
383
|
+
/**
|
|
384
|
+
* Handles clicks on the page overlay. If clicked outside the modal,
|
|
385
|
+
* triggers a shake animation as feedback.
|
|
386
|
+
*/
|
|
387
|
+
async pageOverlayClick(e) {
|
|
388
|
+
if (e.target === e.currentTarget) {
|
|
389
|
+
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
390
|
+
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
391
|
+
if (pageOverlay && modalBox) {
|
|
392
|
+
pageOverlay.classList.add('shake');
|
|
393
|
+
modalBox.classList.add('shake');
|
|
394
|
+
await delayFor(2000);
|
|
395
|
+
pageOverlay.classList.remove('shake');
|
|
396
|
+
modalBox.classList.remove('shake');
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* Dynamically switches the theme between light and dark.
|
|
402
|
+
* Listens for system theme changes to update the component's theme.
|
|
403
|
+
*/
|
|
404
|
+
updateTheme() {
|
|
405
|
+
// Check the initial system preference for dark mode
|
|
406
|
+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
407
|
+
this.theme = prefersDark ? 'dark' : 'light';
|
|
408
|
+
// Listen for changes in the system color scheme preference
|
|
409
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
410
|
+
this.theme = e.matches ? 'dark' : 'light';
|
|
411
|
+
});
|
|
412
|
+
}
|
|
413
|
+
static {
|
|
414
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
415
|
+
}
|
|
416
|
+
};
|
|
417
|
+
return ConsentsoftwareCookieconsent = _classThis;
|
|
418
|
+
})();
|
|
355
419
|
export { ConsentsoftwareCookieconsent };
|
|
356
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
420
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE1BQU0sYUFBYSxDQUFDO0FBRXRDLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBdUIsTUFBTSxLQUFLLENBQUM7QUFDakUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ2xELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUV0RCxPQUFPLEtBQUssWUFBWSxNQUFNLDhCQUE4QixDQUFDO0FBQzdELE9BQU8sS0FBSyxXQUFXLE1BQU0sNkJBQTZCLENBQUM7QUFDM0QsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0lBU3JDLDRCQUE0Qjs0QkFEeEMsYUFBYSxDQUFDLCtCQUErQixDQUFDOzs7O3NCQUNHLFVBQVU7Ozs7NENBQWxCLFNBQVEsV0FBVTs7OztpQ0FPekQsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUM7WUFDMUMsb0tBQWdCLEtBQUssNkJBQUwsS0FBSyxxRkFBNkI7WUFScEQsNktBaVhDOzs7O1FBaFhRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBLGlFQUFpRSxDQUFDO1FBRTFGLG1CQUFtQixHQUFHLElBQUksV0FBVyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3BELGNBQWMsR0FBRyxLQUFLLENBQUM7UUFJOUIsdUVBQTBDLE9BQU8sRUFBQztRQUZsRCxpREFBaUQ7UUFFakQsSUFBZ0IsS0FBSywyQ0FBNkI7UUFBbEQs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
|