@consent.software/catalog 1.5.4 → 1.6.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 +79 -66
- package/dist_bundle/bundle.js.map +2 -2
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/consentsoftware-cookieconsent.d.ts +14 -11
- package/dist_ts_web/elements/consentsoftware-cookieconsent.js +95 -74
- package/dist_ts_web/elements/consentsoftware-tabs.js +9 -2
- package/dist_watch/bundle.js +85 -69
- package/dist_watch/bundle.js.map +2 -2
- package/package.json +1 -1
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/consentsoftware-cookieconsent.ts +95 -77
- package/ts_web/elements/consentsoftware-tabs.ts +9 -2
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@consent.software/catalog',
|
|
6
|
-
version: '1.
|
|
6
|
+
version: '1.6.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
|
|
@@ -11,33 +11,36 @@ export declare class ConsentsoftwareCookieconsent extends LitElement {
|
|
|
11
11
|
csWebclientRan: boolean;
|
|
12
12
|
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
|
}
|
|
@@ -17,14 +17,15 @@ import { delayFor } from '@push.rocks/smartdelay';
|
|
|
17
17
|
let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends LitElement {
|
|
18
18
|
static { this.demo = () => html `<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`; }
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
21
|
-
*
|
|
20
|
+
* Define component styles with CSS variables that adjust based on theme.
|
|
21
|
+
* The default variables serve as baseline for the light theme.
|
|
22
|
+
* Theme-specific overrides modify these for dark mode.
|
|
22
23
|
*/
|
|
23
24
|
static { this.styles = css `
|
|
24
25
|
:host {
|
|
25
26
|
font-family: ${shared.fontStack};
|
|
26
27
|
user-select: none;
|
|
27
|
-
/* Default
|
|
28
|
+
/* Default variables for Light Theme */
|
|
28
29
|
--text-color: #333;
|
|
29
30
|
--background-color: #eeeeee;
|
|
30
31
|
--accent-color: #333333;
|
|
@@ -33,8 +34,14 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
33
34
|
--icon-color: #4496f5;
|
|
34
35
|
--link-color: #333;
|
|
35
36
|
--padding-sides: 16px;
|
|
37
|
+
/* Additional variables for modal and info container styling */
|
|
38
|
+
--info-bg: rgba(0, 0, 0, 0.1);
|
|
39
|
+
--info-text: rgba(255, 255, 255, 0.5);
|
|
40
|
+
--modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
|
36
41
|
}
|
|
37
42
|
|
|
43
|
+
/* Dark Theme Overrides:
|
|
44
|
+
When theme attribute is 'dark', override variables accordingly. */
|
|
38
45
|
:host([theme='dark']) {
|
|
39
46
|
--text-color: #fff;
|
|
40
47
|
--background-color: #111;
|
|
@@ -43,8 +50,14 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
43
50
|
--button-hover-bg: #222222;
|
|
44
51
|
--icon-color: #4496f5;
|
|
45
52
|
--link-color: #fff;
|
|
53
|
+
--info-bg: rgba(0, 0, 0, 0.1);
|
|
54
|
+
--info-text: rgba(255, 255, 255, 0.5);
|
|
55
|
+
--modal-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
|
|
46
56
|
}
|
|
47
57
|
|
|
58
|
+
/* Light Theme Overrides:
|
|
59
|
+
Explicit light theme settings, currently matching defaults.
|
|
60
|
+
Can be customized independently if desired. */
|
|
48
61
|
:host([theme='light']) {
|
|
49
62
|
--text-color: #333;
|
|
50
63
|
--background-color: #eeeeee;
|
|
@@ -53,33 +66,39 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
53
66
|
--button-hover-bg: #f2f2f2;
|
|
54
67
|
--icon-color: #4496f5;
|
|
55
68
|
--link-color: #333;
|
|
69
|
+
--info-bg: rgba(0, 0, 0, 0.1);
|
|
70
|
+
--info-text: rgba(0, 0, 0, 0.5);
|
|
71
|
+
--modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
|
56
72
|
}
|
|
57
73
|
|
|
74
|
+
/* Overlay covering the page behind the modal */
|
|
58
75
|
.pageOverlay {
|
|
59
76
|
position: fixed;
|
|
60
|
-
top:
|
|
61
|
-
bottom:
|
|
62
|
-
right:
|
|
63
|
-
left:
|
|
77
|
+
top: 0;
|
|
78
|
+
bottom: 0;
|
|
79
|
+
right: 0;
|
|
80
|
+
left: 0;
|
|
64
81
|
display: grid;
|
|
65
82
|
align-items: center;
|
|
66
83
|
justify-content: center;
|
|
67
|
-
z-index: 1000; /*
|
|
84
|
+
z-index: 1000; /* Ensures the overlay is on top of other elements */
|
|
68
85
|
background: rgba(255, 255, 255, 0);
|
|
69
86
|
backdrop-filter: blur(0px);
|
|
70
87
|
transition: all 0.2s;
|
|
71
88
|
}
|
|
72
89
|
|
|
90
|
+
/* Shake animation for overlay when clicked */
|
|
73
91
|
.pageOverlay.shake {
|
|
74
92
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
75
93
|
}
|
|
76
94
|
|
|
95
|
+
/* Modal box styling using theme variables for colors and shadows */
|
|
77
96
|
.modalBox {
|
|
78
97
|
display: block;
|
|
79
98
|
color: var(--text-color);
|
|
80
99
|
background: var(--background-color);
|
|
81
|
-
box-shadow:
|
|
82
|
-
position:
|
|
100
|
+
box-shadow: var(--modal-box-shadow);
|
|
101
|
+
position: relative;
|
|
83
102
|
border: 1px dotted rgba(255, 255, 255, 0.1);
|
|
84
103
|
border-top: 1px solid var(--accent-color);
|
|
85
104
|
border-radius: 16px;
|
|
@@ -87,12 +106,22 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
87
106
|
min-width: calc(100vw / 3);
|
|
88
107
|
box-sizing: border-box;
|
|
89
108
|
overflow: hidden;
|
|
90
|
-
will-change: transform;
|
|
109
|
+
will-change: transform;
|
|
91
110
|
transition: all 0.3s;
|
|
92
111
|
transform: scale(0.95);
|
|
93
112
|
opacity: 0;
|
|
94
113
|
}
|
|
95
114
|
|
|
115
|
+
/* Media query for mobile devices: stack buttons vertically */
|
|
116
|
+
@media (max-width: 600px) {
|
|
117
|
+
.modalBox {
|
|
118
|
+
height: 100vh;
|
|
119
|
+
box-shadow: none;
|
|
120
|
+
border-radius: 0px;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Shake animation for modal box */
|
|
96
125
|
.modalBox.shake {
|
|
97
126
|
animation: shake 150ms 2 linear;
|
|
98
127
|
}
|
|
@@ -109,10 +138,7 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
109
138
|
}
|
|
110
139
|
}
|
|
111
140
|
|
|
112
|
-
/*
|
|
113
|
-
* Toggle display based on [show] attribute
|
|
114
|
-
* (so if show=false, the banner doesn't show at all).
|
|
115
|
-
*/
|
|
141
|
+
/* Toggle display based on [show] attribute */
|
|
116
142
|
:host([show='false']) {
|
|
117
143
|
display: none;
|
|
118
144
|
}
|
|
@@ -143,25 +169,14 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
143
169
|
gap: 16px;
|
|
144
170
|
}
|
|
145
171
|
|
|
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;
|
|
172
|
+
/* Media query for mobile devices: stack buttons vertically */
|
|
173
|
+
@media (max-width: 600px) {
|
|
174
|
+
.button-container {
|
|
175
|
+
grid-template-columns: 1fr;
|
|
176
|
+
}
|
|
163
177
|
}
|
|
164
178
|
|
|
179
|
+
/* Consent button styling using theme variables */
|
|
165
180
|
.consent-button {
|
|
166
181
|
border-radius: 3px;
|
|
167
182
|
background: var(--button-bg);
|
|
@@ -176,12 +191,33 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
176
191
|
.consent-button:hover {
|
|
177
192
|
background: var(--button-hover-bg);
|
|
178
193
|
}
|
|
194
|
+
|
|
195
|
+
/* Use theme variables for info container background and text */
|
|
196
|
+
.info-container {
|
|
197
|
+
text-align: center;
|
|
198
|
+
line-height: 3em;
|
|
199
|
+
background: var(--info-bg);
|
|
200
|
+
border-top: 1px dotted rgba(255, 255, 255, 0.1);
|
|
201
|
+
font-size: 0.8em;
|
|
202
|
+
color: var(--info-text);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.info-container a {
|
|
206
|
+
text-decoration: underline;
|
|
207
|
+
color: var(--link-color);
|
|
208
|
+
transition: color 0.2s;
|
|
209
|
+
}
|
|
210
|
+
.info-container a:hover {
|
|
211
|
+
color: #ffffff;
|
|
212
|
+
}
|
|
179
213
|
`; }
|
|
180
214
|
constructor() {
|
|
181
215
|
super();
|
|
182
216
|
this.csWebclientInstance = new csWebclient.CsWebclient();
|
|
183
217
|
this.csWebclientRan = false;
|
|
218
|
+
// Reflects the current theme ('light' or 'dark')
|
|
184
219
|
this.theme = 'light';
|
|
220
|
+
// Initially hide the consent banner until needed
|
|
185
221
|
this.setAttribute('show', 'false');
|
|
186
222
|
}
|
|
187
223
|
render() {
|
|
@@ -198,32 +234,6 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
198
234
|
and choose which cookie level you are willing to accept.
|
|
199
235
|
</div>
|
|
200
236
|
</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
237
|
<consentsoftware-mainselection></consentsoftware-mainselection>
|
|
228
238
|
<div class="button-container">
|
|
229
239
|
<div
|
|
@@ -248,7 +258,6 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
248
258
|
<div class="info-container">
|
|
249
259
|
consent management powered by
|
|
250
260
|
<a href="https://consent.software">consent.software</a>
|
|
251
|
-
(Open Source)
|
|
252
261
|
</div>
|
|
253
262
|
</div>
|
|
254
263
|
</div>
|
|
@@ -256,39 +265,42 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
256
265
|
`;
|
|
257
266
|
}
|
|
258
267
|
/**
|
|
259
|
-
*
|
|
268
|
+
* Lifecycle method called when the element is connected to the DOM.
|
|
269
|
+
* It sets up the theme and displays the consent banner if no cookie levels are set.
|
|
260
270
|
*/
|
|
261
271
|
async connectedCallback() {
|
|
262
272
|
super.connectedCallback();
|
|
263
|
-
this.updateTheme();
|
|
273
|
+
this.updateTheme(); // Initialize theme based on system preference
|
|
264
274
|
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
|
|
265
275
|
if (!cookieLevel) {
|
|
276
|
+
// Show consent banner if cookie levels haven't been set yet
|
|
266
277
|
this.setAttribute('show', 'true');
|
|
267
278
|
requestAnimationFrame(async () => {
|
|
268
279
|
await this.updated();
|
|
269
280
|
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
270
281
|
if (pageOverlay) {
|
|
282
|
+
// Apply dark overlay styling when modal appears
|
|
271
283
|
pageOverlay.style.background = 'rgba(0,0,0, 0.5)';
|
|
272
284
|
pageOverlay.style.backdropFilter = 'blur(20px)';
|
|
273
285
|
}
|
|
274
286
|
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
275
287
|
if (modalBox) {
|
|
288
|
+
// Animate modal box appearance
|
|
276
289
|
modalBox.style.transform = `scale(1)`;
|
|
277
290
|
modalBox.style.opacity = '1';
|
|
278
291
|
}
|
|
279
292
|
});
|
|
280
293
|
}
|
|
281
294
|
else {
|
|
295
|
+
// Hide banner if cookie levels are already set
|
|
282
296
|
this.setAttribute('show', 'false');
|
|
283
297
|
}
|
|
284
298
|
}
|
|
299
|
+
async firstUpdated() {
|
|
300
|
+
// Placeholder for any logic needed after first render
|
|
301
|
+
}
|
|
285
302
|
/**
|
|
286
|
-
* Called after
|
|
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.
|
|
303
|
+
* Called after updates. Logs banner height and runs consent scripts if necessary.
|
|
292
304
|
*/
|
|
293
305
|
async updated() {
|
|
294
306
|
console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`);
|
|
@@ -299,26 +311,33 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
299
311
|
}
|
|
300
312
|
}
|
|
301
313
|
/**
|
|
302
|
-
*
|
|
314
|
+
* Handles consent button clicks, sets cookie levels, and hides the banner.
|
|
315
|
+
* Uses theme variables for styling transitions.
|
|
303
316
|
*/
|
|
304
317
|
async handleConsentButtonClick(event, levelsArg) {
|
|
305
318
|
console.log(`Set level to ${levelsArg}`);
|
|
306
319
|
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
307
320
|
if (pageOverlay) {
|
|
321
|
+
// Fade out overlay effect using inline styles for transition
|
|
308
322
|
pageOverlay.style.background = 'rgba(255,255,255, 0)';
|
|
309
323
|
pageOverlay.style.backdropFilter = 'blur(0px)';
|
|
310
324
|
}
|
|
311
325
|
const modalBox = this.shadowRoot?.querySelector('.modalBox');
|
|
312
326
|
if (modalBox) {
|
|
327
|
+
// Scale down and fade out modal box before hiding
|
|
313
328
|
modalBox.style.transform = `scale(0.95)`;
|
|
314
329
|
modalBox.style.opacity = '0';
|
|
315
330
|
}
|
|
331
|
+
// Save user consent preferences
|
|
316
332
|
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
|
317
333
|
await delayFor(300);
|
|
318
|
-
this.setAttribute('show', 'false');
|
|
319
|
-
//
|
|
320
|
-
this.updated();
|
|
334
|
+
this.setAttribute('show', 'false'); // Hide the consent banner
|
|
335
|
+
this.updated(); // Trigger any post-consent actions
|
|
321
336
|
}
|
|
337
|
+
/**
|
|
338
|
+
* Handles clicks on the page overlay. If clicked outside the modal,
|
|
339
|
+
* triggers a shake animation as feedback.
|
|
340
|
+
*/
|
|
322
341
|
async pageOverlayClick(e) {
|
|
323
342
|
if (e.target === e.currentTarget) {
|
|
324
343
|
const pageOverlay = this.shadowRoot?.querySelector('.pageOverlay');
|
|
@@ -333,12 +352,14 @@ let ConsentsoftwareCookieconsent = class ConsentsoftwareCookieconsent extends Li
|
|
|
333
352
|
}
|
|
334
353
|
}
|
|
335
354
|
/**
|
|
336
|
-
* Dynamically switches the theme between light
|
|
337
|
-
*
|
|
355
|
+
* Dynamically switches the theme between light and dark.
|
|
356
|
+
* Listens for system theme changes to update the component's theme.
|
|
338
357
|
*/
|
|
339
358
|
updateTheme() {
|
|
359
|
+
// Check the initial system preference for dark mode
|
|
340
360
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
341
361
|
this.theme = prefersDark ? 'dark' : 'light';
|
|
362
|
+
// Listen for changes in the system color scheme preference
|
|
342
363
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
343
364
|
this.theme = e.matches ? 'dark' : 'light';
|
|
344
365
|
});
|
|
@@ -353,4 +374,4 @@ ConsentsoftwareCookieconsent = __decorate([
|
|
|
353
374
|
__metadata("design:paramtypes", [])
|
|
354
375
|
], ConsentsoftwareCookieconsent);
|
|
355
376
|
export { ConsentsoftwareCookieconsent };
|
|
356
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
377
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvY29uc2VudHNvZnR3YXJlLWNvb2tpZWNvbnNlbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sTUFBTSxhQUFhLENBQUM7QUFFdEMsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUF1QixNQUFNLEtBQUssQ0FBQztBQUNqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDbEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBRXRELE9BQU8sS0FBSyxZQUFZLE1BQU0sOEJBQThCLENBQUM7QUFDN0QsT0FBTyxLQUFLLFdBQVcsTUFBTSw2QkFBNkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFTM0MsSUFBTSw0QkFBNEIsR0FBbEMsTUFBTSw0QkFBNkIsU0FBUSxVQUFVO2FBQzVDLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEsaUVBQWlFLEFBQTlFLENBQStFO0lBU2pHOzs7O09BSUc7YUFDVyxXQUFNLEdBQUcsR0FBRyxDQUFBOztxQkFFUCxNQUFNLENBQUMsU0FBUzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTJMbEMsQUE3TG1CLENBNkxsQjtJQUVGO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUE1TUgsd0JBQW1CLEdBQUcsSUFBSSxXQUFX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
|
|
@@ -30,6 +30,13 @@ let ConsentsoftwareTabs = class ConsentsoftwareTabs extends LitElement {
|
|
|
30
30
|
cursor: pointer;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
/* Media query for mobile devices: stack buttons vertically */
|
|
34
|
+
@media (max-width: 600px) {
|
|
35
|
+
.tabs .tab {
|
|
36
|
+
font-size: 0.8em;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
33
40
|
.selector {
|
|
34
41
|
position: absolute;
|
|
35
42
|
width: calc(100% / 3);
|
|
@@ -48,7 +55,7 @@ let ConsentsoftwareTabs = class ConsentsoftwareTabs extends LitElement {
|
|
|
48
55
|
<div class="tabs">
|
|
49
56
|
<div class="tab" @click=${this.handleClick}>Consent</div>
|
|
50
57
|
<div class="tab" @click=${this.handleClick}>Details</div>
|
|
51
|
-
<div class="tab" @click=${this.handleClick}>Cookie Policy
|
|
58
|
+
<div class="tab" @click=${this.handleClick}>Cookie Policy</div>
|
|
52
59
|
</div>
|
|
53
60
|
<div class="selector"></div>
|
|
54
61
|
`;
|
|
@@ -70,4 +77,4 @@ ConsentsoftwareTabs = __decorate([
|
|
|
70
77
|
__metadata("design:paramtypes", [])
|
|
71
78
|
], ConsentsoftwareTabs);
|
|
72
79
|
export { ConsentsoftwareTabs };
|
|
73
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLXRhYnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvY29uc2VudHNvZnR3YXJlLXRhYnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUF1QixNQUFNLEtBQUssQ0FBQztBQUNqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDbEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBRy9DLElBQU0sbUJBQW1CLEdBQXpCLE1BQU0sbUJBQW9CLFNBQVEsVUFBVTthQUNuQyxTQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBLCtDQUErQyxBQUE1RCxDQUE2RDthQUVqRSxXQUFNLEdBQUcsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0N6QixBQWxDbUIsQ0FrQ2xCO0lBRUY7UUFDRSxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7SUFFTSxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7O2tDQUVtQixJQUFJLENBQUMsV0FBVztrQ0FDaEIsSUFBSSxDQUFDLFdBQVc7a0NBQ2hCLElBQUksQ0FBQyxXQUFXOzs7S0FHN0MsQ0FBQztJQUNKLENBQUM7SUFFTSxLQUFLLENBQUMsV0FBVyxDQUFDLFVBQVU7UUFDakMsTUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQXFCLENBQUM7UUFDaEQsTUFBTSxHQUFHLEdBQW1CLE1BQU0sQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDbkQsSUFBSSxHQUFHLEVBQUUsQ0FBQztZQUNSLE1BQU0sUUFBUSxHQUFtQixJQUFJLENBQUMsVUFBVSxFQUFFLGFBQWEsQ0FBQyxXQUFXLENBQUMsQ0FBQztZQUM3RSxJQUFJLFFBQVEsRUFBRSxDQUFDO2dCQUNiLFFBQVEsQ0FBQyxLQUFLLENBQUMsSUFBSSxHQUFHLEdBQUcsR0FBRyxDQUFDLFVBQVUsSUFBSSxDQUFDO2dCQUM1QyxRQUFRLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxHQUFHLEdBQUcsQ0FBQyxXQUFXLElBQUksQ0FBQztZQUNoRCxDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7O0FBaEVVLG1CQUFtQjtJQUQvQixhQUFhLENBQUMsc0JBQXNCLENBQUM7O0dBQ3pCLG1CQUFtQixDQWlFL0IifQ==
|