@consent.software/catalog 1.6.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist_bundle/bundle.js +626 -329
- 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 +4 -20
- package/dist_ts_web/elements/consentsoftware-cookieconsent.js +143 -222
- package/dist_ts_web/elements/consentsoftware-header.d.ts +3 -4
- package/dist_ts_web/elements/consentsoftware-header.js +35 -23
- package/dist_ts_web/elements/consentsoftware-mainselection.d.ts +4 -5
- package/dist_ts_web/elements/consentsoftware-mainselection.js +54 -28
- package/dist_ts_web/elements/consentsoftware-tabs.d.ts +4 -5
- package/dist_ts_web/elements/consentsoftware-tabs.js +44 -36
- package/dist_ts_web/elements/consentsoftware-toggle.d.ts +11 -9
- package/dist_ts_web/elements/consentsoftware-toggle.js +103 -94
- package/dist_ts_web/elements/shared.d.ts +35 -1
- package/dist_ts_web/elements/shared.js +36 -2
- package/dist_ts_web/pages/page1.d.ts +1 -1
- package/dist_ts_web/pages/page1.js +2 -2
- package/dist_watch/bundle.js +447 -413
- package/dist_watch/bundle.js.map +3 -3
- package/package.json +3 -3
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/consentsoftware-cookieconsent.ts +150 -218
- package/ts_web/elements/consentsoftware-header.ts +40 -23
- package/ts_web/elements/consentsoftware-mainselection.ts +60 -30
- package/ts_web/elements/consentsoftware-tabs.ts +51 -37
- package/ts_web/elements/consentsoftware-toggle.ts +123 -107
- package/ts_web/elements/shared.ts +38 -2
- package/ts_web/pages/page1.ts +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@consent.software/catalog',
|
|
6
|
-
version: '
|
|
6
|
+
version: '2.0.0',
|
|
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
|
|
@@ -1,36 +1,25 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
|
|
2
2
|
import * as csWebclient from '@consent.software/webclient';
|
|
3
3
|
declare global {
|
|
4
4
|
interface HTMLElementTagNameMap {
|
|
5
5
|
'consentsoftware-cookieconsent': ConsentsoftwareCookieconsent;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
export declare class ConsentsoftwareCookieconsent extends
|
|
8
|
+
export declare class ConsentsoftwareCookieconsent extends DeesElement {
|
|
9
9
|
static demo: () => TemplateResult<1>;
|
|
10
10
|
csWebclientInstance: csWebclient.CsWebclient;
|
|
11
11
|
csWebclientRan: boolean;
|
|
12
|
-
|
|
13
|
-
/**
|
|
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.
|
|
17
|
-
*/
|
|
18
|
-
static styles: import("lit").CSSResult;
|
|
12
|
+
static styles: import("@design.estate/dees-element").CSSResult[];
|
|
19
13
|
constructor();
|
|
20
14
|
render(): TemplateResult;
|
|
21
15
|
/**
|
|
22
16
|
* Lifecycle method called when the element is connected to the DOM.
|
|
23
|
-
*
|
|
17
|
+
* Displays the consent banner if no cookie levels are set.
|
|
24
18
|
*/
|
|
25
19
|
connectedCallback(): Promise<void>;
|
|
26
20
|
firstUpdated(): Promise<void>;
|
|
27
|
-
/**
|
|
28
|
-
* Called after updates. Logs banner height and runs consent scripts if necessary.
|
|
29
|
-
*/
|
|
30
|
-
updated(): Promise<void>;
|
|
31
21
|
/**
|
|
32
22
|
* Handles consent button clicks, sets cookie levels, and hides the banner.
|
|
33
|
-
* Uses theme variables for styling transitions.
|
|
34
23
|
*/
|
|
35
24
|
private handleConsentButtonClick;
|
|
36
25
|
/**
|
|
@@ -38,9 +27,4 @@ export declare class ConsentsoftwareCookieconsent extends LitElement {
|
|
|
38
27
|
* triggers a shake animation as feedback.
|
|
39
28
|
*/
|
|
40
29
|
private pageOverlayClick;
|
|
41
|
-
/**
|
|
42
|
-
* Dynamically switches the theme between light and dark.
|
|
43
|
-
* Listens for system theme changes to update the component's theme.
|
|
44
|
-
*/
|
|
45
|
-
private updateTheme;
|
|
46
30
|
}
|
|
@@ -32,10 +32,8 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
|
|
|
32
32
|
}
|
|
33
33
|
return useValue ? value : void 0;
|
|
34
34
|
};
|
|
35
|
-
import
|
|
36
|
-
import {
|
|
37
|
-
import { customElement } from 'lit/decorators.js';
|
|
38
|
-
import { property } from 'lit/decorators/property.js';
|
|
35
|
+
import { cssManager, colors } from './shared.js';
|
|
36
|
+
import { DeesElement, customElement, html, css, property, } from '@design.estate/dees-element';
|
|
39
37
|
import * as csInterfaces from '@consent.software/interfaces';
|
|
40
38
|
import * as csWebclient from '@consent.software/webclient';
|
|
41
39
|
import { delayFor } from '@push.rocks/smartdelay';
|
|
@@ -44,16 +42,11 @@ let ConsentsoftwareCookieconsent = (() => {
|
|
|
44
42
|
let _classDescriptor;
|
|
45
43
|
let _classExtraInitializers = [];
|
|
46
44
|
let _classThis;
|
|
47
|
-
let _classSuper =
|
|
48
|
-
let _theme_decorators;
|
|
49
|
-
let _theme_initializers = [];
|
|
50
|
-
let _theme_extraInitializers = [];
|
|
45
|
+
let _classSuper = DeesElement;
|
|
51
46
|
var ConsentsoftwareCookieconsent = class extends _classSuper {
|
|
52
47
|
static { _classThis = this; }
|
|
53
48
|
static {
|
|
54
49
|
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
50
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
58
51
|
ConsentsoftwareCookieconsent = _classThis = _classDescriptor.value;
|
|
59
52
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
@@ -61,208 +54,154 @@ let ConsentsoftwareCookieconsent = (() => {
|
|
|
61
54
|
static demo = () => html `<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
|
|
62
55
|
csWebclientInstance = new csWebclient.CsWebclient();
|
|
63
56
|
csWebclientRan = false;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
* Theme-specific overrides modify these for dark mode.
|
|
72
|
-
*/
|
|
73
|
-
static styles = css `
|
|
74
|
-
:host {
|
|
75
|
-
font-family: ${shared.fontStack};
|
|
76
|
-
user-select: none;
|
|
77
|
-
/* Default variables for Light Theme */
|
|
78
|
-
--text-color: #333;
|
|
79
|
-
--background-color: #eeeeee;
|
|
80
|
-
--accent-color: #333333;
|
|
81
|
-
--button-bg: #ffffff;
|
|
82
|
-
--button-hover-bg: #f2f2f2;
|
|
83
|
-
--icon-color: #4496f5;
|
|
84
|
-
--link-color: #333;
|
|
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);
|
|
90
|
-
}
|
|
57
|
+
static styles = [
|
|
58
|
+
cssManager.defaultStyles,
|
|
59
|
+
css `
|
|
60
|
+
:host {
|
|
61
|
+
font-size: 14px;
|
|
62
|
+
user-select: none;
|
|
63
|
+
}
|
|
91
64
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
--info-text: rgba(255, 255, 255, 0.5);
|
|
104
|
-
--modal-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
|
|
105
|
-
}
|
|
65
|
+
.pageOverlay {
|
|
66
|
+
position: fixed;
|
|
67
|
+
inset: 0;
|
|
68
|
+
display: grid;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
z-index: 1000;
|
|
72
|
+
background: rgba(0, 0, 0, 0);
|
|
73
|
+
backdrop-filter: blur(0px);
|
|
74
|
+
transition: all 0.2s ease-out;
|
|
75
|
+
}
|
|
106
76
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
:host([theme='light']) {
|
|
111
|
-
--text-color: #333;
|
|
112
|
-
--background-color: #eeeeee;
|
|
113
|
-
--accent-color: #333333;
|
|
114
|
-
--button-bg: #ffffff;
|
|
115
|
-
--button-hover-bg: #f2f2f2;
|
|
116
|
-
--icon-color: #4496f5;
|
|
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);
|
|
121
|
-
}
|
|
77
|
+
.pageOverlay.shake {
|
|
78
|
+
background: rgba(0, 0, 0, 0.6) !important;
|
|
79
|
+
}
|
|
122
80
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
81
|
+
.modalBox {
|
|
82
|
+
display: block;
|
|
83
|
+
color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
|
|
84
|
+
background: ${cssManager.bdTheme(colors.light.background, colors.dark.background)};
|
|
85
|
+
box-shadow:
|
|
86
|
+
0 0 0 1px ${cssManager.bdTheme(colors.light.border, colors.dark.border)},
|
|
87
|
+
0 16px 70px ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(0, 0, 0, 0.35)')};
|
|
88
|
+
position: relative;
|
|
89
|
+
border-radius: 8px;
|
|
90
|
+
max-width: 520px;
|
|
91
|
+
min-width: 320px;
|
|
92
|
+
box-sizing: border-box;
|
|
93
|
+
overflow: hidden;
|
|
94
|
+
will-change: transform;
|
|
95
|
+
transition: all 0.2s ease-out;
|
|
96
|
+
transform: scale(0.96);
|
|
97
|
+
opacity: 0;
|
|
98
|
+
}
|
|
138
99
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
100
|
+
@media (max-width: 560px) {
|
|
101
|
+
.modalBox {
|
|
102
|
+
max-width: 100%;
|
|
103
|
+
min-width: 100%;
|
|
104
|
+
height: 100vh;
|
|
105
|
+
border-radius: 0;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
143
108
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
color: var(--text-color);
|
|
148
|
-
background: var(--background-color);
|
|
149
|
-
box-shadow: var(--modal-box-shadow);
|
|
150
|
-
position: relative;
|
|
151
|
-
border: 1px dotted rgba(255, 255, 255, 0.1);
|
|
152
|
-
border-top: 1px solid var(--accent-color);
|
|
153
|
-
border-radius: 16px;
|
|
154
|
-
max-width: 1100px;
|
|
155
|
-
min-width: calc(100vw / 3);
|
|
156
|
-
box-sizing: border-box;
|
|
157
|
-
overflow: hidden;
|
|
158
|
-
will-change: transform;
|
|
159
|
-
transition: all 0.3s;
|
|
160
|
-
transform: scale(0.95);
|
|
161
|
-
opacity: 0;
|
|
162
|
-
}
|
|
109
|
+
.modalBox.shake {
|
|
110
|
+
animation: shake 120ms 2 linear;
|
|
111
|
+
}
|
|
163
112
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
box-shadow: none;
|
|
169
|
-
border-radius: 0px;
|
|
113
|
+
@keyframes shake {
|
|
114
|
+
0% { transform: translateX(3px); }
|
|
115
|
+
50% { transform: translateX(-3px); }
|
|
116
|
+
100% { transform: translateX(0); }
|
|
170
117
|
}
|
|
171
|
-
}
|
|
172
118
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
animation: shake 150ms 2 linear;
|
|
176
|
-
}
|
|
119
|
+
:host([show='false']) { display: none; }
|
|
120
|
+
:host([show='true']) { display: block; }
|
|
177
121
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
transform: translate(3px, 0);
|
|
122
|
+
.content {
|
|
123
|
+
margin: auto;
|
|
181
124
|
}
|
|
182
|
-
|
|
183
|
-
|
|
125
|
+
|
|
126
|
+
.text-container {
|
|
127
|
+
padding: 12px 16px;
|
|
128
|
+
font-size: 0.9em;
|
|
129
|
+
line-height: 1.5;
|
|
130
|
+
color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
|
|
184
131
|
}
|
|
185
|
-
|
|
186
|
-
|
|
132
|
+
|
|
133
|
+
.text-container a {
|
|
134
|
+
color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
|
|
135
|
+
text-decoration: underline;
|
|
136
|
+
text-underline-offset: 2px;
|
|
187
137
|
}
|
|
188
|
-
}
|
|
189
138
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
}
|
|
194
|
-
:host([show='true']) {
|
|
195
|
-
display: block;
|
|
196
|
-
}
|
|
139
|
+
.text-container a:hover {
|
|
140
|
+
opacity: 0.8;
|
|
141
|
+
}
|
|
197
142
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
143
|
+
.button-container {
|
|
144
|
+
padding: 12px 16px 16px;
|
|
145
|
+
display: grid;
|
|
146
|
+
grid-template-columns: repeat(3, 1fr);
|
|
147
|
+
gap: 8px;
|
|
148
|
+
}
|
|
201
149
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
}
|
|
150
|
+
@media (max-width: 560px) {
|
|
151
|
+
.button-container {
|
|
152
|
+
grid-template-columns: 1fr;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
208
155
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
156
|
+
.consent-button {
|
|
157
|
+
border-radius: 6px;
|
|
158
|
+
background: ${cssManager.bdTheme(colors.light.secondary, colors.dark.secondary)};
|
|
159
|
+
border: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
|
|
160
|
+
padding: 8px 16px;
|
|
161
|
+
font-size: 0.85em;
|
|
162
|
+
font-weight: 500;
|
|
163
|
+
text-align: center;
|
|
164
|
+
cursor: pointer;
|
|
165
|
+
transition: all 0.15s ease;
|
|
166
|
+
color: ${cssManager.bdTheme(colors.light.secondaryForeground, colors.dark.secondaryForeground)};
|
|
167
|
+
}
|
|
213
168
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
gap: 16px;
|
|
219
|
-
}
|
|
169
|
+
.consent-button:hover {
|
|
170
|
+
background: ${cssManager.bdTheme(colors.light.accent, colors.dark.accent)};
|
|
171
|
+
border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
|
|
172
|
+
}
|
|
220
173
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
174
|
+
.consent-button:last-child {
|
|
175
|
+
background: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
|
|
176
|
+
color: ${cssManager.bdTheme(colors.light.primaryForeground, colors.dark.primaryForeground)};
|
|
177
|
+
border-color: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
|
|
225
178
|
}
|
|
226
|
-
}
|
|
227
179
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
background: var(--button-bg);
|
|
232
|
-
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
|
233
|
-
padding: 10px;
|
|
234
|
-
line-height: 30px;
|
|
235
|
-
text-align: center;
|
|
236
|
-
cursor: pointer;
|
|
237
|
-
transition: all 0.2s;
|
|
238
|
-
}
|
|
180
|
+
.consent-button:last-child:hover {
|
|
181
|
+
opacity: 0.9;
|
|
182
|
+
}
|
|
239
183
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
184
|
+
.info-container {
|
|
185
|
+
text-align: center;
|
|
186
|
+
padding: 10px 16px;
|
|
187
|
+
background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
|
|
188
|
+
border-top: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
|
|
189
|
+
font-size: 0.75em;
|
|
190
|
+
color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
|
|
191
|
+
}
|
|
243
192
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
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);
|
|
252
|
-
}
|
|
193
|
+
.info-container a {
|
|
194
|
+
color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
|
|
195
|
+
text-decoration: none;
|
|
196
|
+
}
|
|
253
197
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
.info-container a:hover {
|
|
260
|
-
color: #ffffff;
|
|
261
|
-
}
|
|
262
|
-
`;
|
|
198
|
+
.info-container a:hover {
|
|
199
|
+
text-decoration: underline;
|
|
200
|
+
}
|
|
201
|
+
`,
|
|
202
|
+
];
|
|
263
203
|
constructor() {
|
|
264
204
|
super();
|
|
265
|
-
__runInitializers(this, _theme_extraInitializers);
|
|
266
205
|
// Initially hide the consent banner until needed
|
|
267
206
|
this.setAttribute('show', 'false');
|
|
268
207
|
}
|
|
@@ -273,11 +212,11 @@ let ConsentsoftwareCookieconsent = (() => {
|
|
|
273
212
|
<div class="content">
|
|
274
213
|
<consentsoftware-header></consentsoftware-header>
|
|
275
214
|
<consentsoftware-tabs></consentsoftware-tabs>
|
|
276
|
-
<div class="text-container"
|
|
215
|
+
<div class="text-container">
|
|
277
216
|
<div class="toptext">
|
|
278
|
-
|
|
217
|
+
We use cookies to enhance your experience. Review our
|
|
279
218
|
<a href="https://lossless.gmbh/cookie" target="_blank">cookie policy</a>
|
|
280
|
-
and
|
|
219
|
+
and select your preferences.
|
|
281
220
|
</div>
|
|
282
221
|
</div>
|
|
283
222
|
<consentsoftware-mainselection></consentsoftware-mainselection>
|
|
@@ -312,22 +251,21 @@ let ConsentsoftwareCookieconsent = (() => {
|
|
|
312
251
|
}
|
|
313
252
|
/**
|
|
314
253
|
* Lifecycle method called when the element is connected to the DOM.
|
|
315
|
-
*
|
|
254
|
+
* Displays the consent banner if no cookie levels are set.
|
|
316
255
|
*/
|
|
317
256
|
async connectedCallback() {
|
|
318
|
-
super.connectedCallback();
|
|
319
|
-
this.updateTheme(); // Initialize theme based on system preference
|
|
257
|
+
await super.connectedCallback();
|
|
320
258
|
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
|
|
321
259
|
if (!cookieLevel) {
|
|
322
260
|
// Show consent banner if cookie levels haven't been set yet
|
|
323
261
|
this.setAttribute('show', 'true');
|
|
324
262
|
requestAnimationFrame(async () => {
|
|
325
|
-
await this.
|
|
263
|
+
await this.updateComplete;
|
|
326
264
|
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
327
265
|
if (pageOverlay) {
|
|
328
|
-
// Apply
|
|
329
|
-
pageOverlay.style.background = 'rgba(0,0,0, 0.
|
|
330
|
-
pageOverlay.style.backdropFilter = 'blur(
|
|
266
|
+
// Apply subtle backdrop blur when modal appears
|
|
267
|
+
pageOverlay.style.background = 'rgba(0,0,0, 0.6)';
|
|
268
|
+
pageOverlay.style.backdropFilter = 'blur(4px)';
|
|
331
269
|
}
|
|
332
270
|
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
333
271
|
if (modalBox) {
|
|
@@ -343,13 +281,7 @@ let ConsentsoftwareCookieconsent = (() => {
|
|
|
343
281
|
}
|
|
344
282
|
}
|
|
345
283
|
async firstUpdated() {
|
|
346
|
-
//
|
|
347
|
-
}
|
|
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`);
|
|
284
|
+
// Run consent scripts if levels are already set
|
|
353
285
|
const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
|
|
354
286
|
if (!this.csWebclientRan && acceptedCookieLevels) {
|
|
355
287
|
this.csWebclientRan = true;
|
|
@@ -358,14 +290,12 @@ let ConsentsoftwareCookieconsent = (() => {
|
|
|
358
290
|
}
|
|
359
291
|
/**
|
|
360
292
|
* Handles consent button clicks, sets cookie levels, and hides the banner.
|
|
361
|
-
* Uses theme variables for styling transitions.
|
|
362
293
|
*/
|
|
363
294
|
async handleConsentButtonClick(event, levelsArg) {
|
|
364
295
|
console.log(`Set level to ${levelsArg}`);
|
|
365
296
|
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
366
297
|
if (pageOverlay) {
|
|
367
|
-
|
|
368
|
-
pageOverlay.style.background = 'rgba(255,255,255, 0)';
|
|
298
|
+
pageOverlay.style.background = 'rgba(0,0,0, 0)';
|
|
369
299
|
pageOverlay.style.backdropFilter = 'blur(0px)';
|
|
370
300
|
}
|
|
371
301
|
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
@@ -378,7 +308,11 @@ let ConsentsoftwareCookieconsent = (() => {
|
|
|
378
308
|
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
|
379
309
|
await delayFor(300);
|
|
380
310
|
this.setAttribute('show', 'false'); // Hide the consent banner
|
|
381
|
-
|
|
311
|
+
// Run consent scripts
|
|
312
|
+
if (!this.csWebclientRan) {
|
|
313
|
+
this.csWebclientRan = true;
|
|
314
|
+
await this.csWebclientInstance.getAndRunConsentTuples();
|
|
315
|
+
}
|
|
382
316
|
}
|
|
383
317
|
/**
|
|
384
318
|
* Handles clicks on the page overlay. If clicked outside the modal,
|
|
@@ -397,19 +331,6 @@ let ConsentsoftwareCookieconsent = (() => {
|
|
|
397
331
|
}
|
|
398
332
|
}
|
|
399
333
|
}
|
|
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
334
|
static {
|
|
414
335
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
415
336
|
}
|
|
@@ -417,4 +338,4 @@ let ConsentsoftwareCookieconsent = (() => {
|
|
|
417
338
|
return ConsentsoftwareCookieconsent = _classThis;
|
|
418
339
|
})();
|
|
419
340
|
export { ConsentsoftwareCookieconsent };
|
|
420
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
341
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBRWpELE9BQU8sRUFDTCxXQUFXLEVBQ1gsYUFBYSxFQUNiLElBQUksRUFDSixHQUFHLEVBRUgsUUFBUSxHQUNULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFlBQVksTUFBTSw4QkFBOEIsQ0FBQztBQUM3RCxPQUFPLEtBQUssV0FBVyxNQUFNLDZCQUE2QixDQUFDO0FBQzNELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztJQVNyQyw0QkFBNEI7NEJBRHhDLGFBQWEsQ0FBQywrQkFBK0IsQ0FBQzs7OztzQkFDRyxXQUFXOzRDQUFuQixTQUFRLFdBQVc7Ozs7WUFBN0QsNktBd1NDOzs7O1FBdlNRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBLGlFQUFpRSxDQUFDO1FBRTFGLG1CQUFtQixHQUFHLElBQUksV0FBVyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3BELGNBQWMsR0FBRyxLQUFLLENBQUM7UUFFdkIsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixVQUFVLENBQUMsYUFBYTtZQUN4QixHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQkF3QlUsVUFBVSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLFVBQVUsRUFBRSxNQUFNLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztzQkFDOUQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLFVB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
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare class ConsentsoftwareHeader extends
|
|
1
|
+
import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
|
|
2
|
+
export declare class ConsentsoftwareHeader extends DeesElement {
|
|
3
3
|
static demo: () => TemplateResult<1>;
|
|
4
|
-
static styles: import("
|
|
5
|
-
constructor();
|
|
4
|
+
static styles: import("@design.estate/dees-element").CSSResult[];
|
|
6
5
|
render(): TemplateResult;
|
|
7
6
|
}
|