@consent.software/catalog 1.3.4 → 1.4.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 +61 -40
- package/dist_bundle/bundle.js.map +3 -3
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/consentsoftware-cookieconsent.js +6 -5
- package/dist_ts_web/elements/consentsoftware-header.js +2 -2
- package/dist_ts_web/elements/consentsoftware-mainselection.js +3 -4
- package/dist_ts_web/elements/consentsoftware-tabs.js +1 -1
- package/dist_ts_web/elements/consentsoftware-toggle.d.ts +33 -5
- package/dist_ts_web/elements/consentsoftware-toggle.js +142 -31
- package/dist_watch/bundle.js +43156 -0
- package/dist_watch/bundle.js.map +7 -0
- package/dist_watch/index.html +28 -0
- package/package.json +1 -1
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/consentsoftware-cookieconsent.ts +5 -4
- package/ts_web/elements/consentsoftware-header.ts +2 -2
- package/ts_web/elements/consentsoftware-mainselection.ts +2 -3
- package/ts_web/elements/consentsoftware-tabs.ts +1 -1
- package/ts_web/elements/consentsoftware-toggle.ts +159 -33
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!--gitzone element-->
|
|
2
|
+
<!-- made by Task Venture Capital GmbH -->
|
|
3
|
+
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
|
4
|
+
<html lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<!--Lets set some basic meta tags-->
|
|
7
|
+
<meta
|
|
8
|
+
name="viewport"
|
|
9
|
+
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
|
10
|
+
/>
|
|
11
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
12
|
+
|
|
13
|
+
<!--Lets load standard fonts-->
|
|
14
|
+
<link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
|
|
15
|
+
<link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
|
|
16
|
+
|
|
17
|
+
<style>
|
|
18
|
+
body {
|
|
19
|
+
margin: 0px;
|
|
20
|
+
background: #222222;
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
|
|
24
|
+
<script type="module" src="/bundle.js"></script>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
</body>
|
|
28
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@consent.software/catalog",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.",
|
|
6
6
|
"exports": {
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@consent.software/catalog',
|
|
6
|
-
version: '1.
|
|
6
|
+
version: '1.4.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
|
}
|
|
@@ -75,8 +75,9 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
|
|
75
75
|
display: block;
|
|
76
76
|
color: var(--text-color);
|
|
77
77
|
background: var(--background-color);
|
|
78
|
-
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.
|
|
78
|
+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6);
|
|
79
79
|
position: realtive;
|
|
80
|
+
border: 1px dotted rgba(255, 255, 255, 0.1);
|
|
80
81
|
border-top: 1px solid var(--accent-color);
|
|
81
82
|
border-radius: 16px;
|
|
82
83
|
max-width: 1100px;
|
|
@@ -142,9 +143,9 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
|
|
142
143
|
.info-container {
|
|
143
144
|
color: var(--text-color);
|
|
144
145
|
text-align: center;
|
|
145
|
-
line-height:
|
|
146
|
+
line-height: 3em;
|
|
146
147
|
background: rgba(0, 0, 0, 0.1);
|
|
147
|
-
border-top: 1px
|
|
148
|
+
border-top: 1px dotted rgba(255, 255, 255, 0.1);
|
|
148
149
|
font-size: 0.8em;
|
|
149
150
|
color: rgba(255, 255, 255, 0.5);
|
|
150
151
|
}
|
|
@@ -269,7 +270,7 @@ export class ConsentsoftwareCookieconsent extends LitElement {
|
|
|
269
270
|
await this.updated();
|
|
270
271
|
const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay');
|
|
271
272
|
if (pageOverlay) {
|
|
272
|
-
pageOverlay.style.background = 'rgba(0, 0, 0, 0.
|
|
273
|
+
pageOverlay.style.background = 'rgba(0, 0, 0, 0.1)';
|
|
273
274
|
pageOverlay.style.backdropFilter = 'blur(2px)';
|
|
274
275
|
}
|
|
275
276
|
const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox');
|
|
@@ -11,10 +11,10 @@ export class ConsentsoftwareHeader extends LitElement {
|
|
|
11
11
|
public static styles = css`
|
|
12
12
|
:host {
|
|
13
13
|
display: block;
|
|
14
|
-
line-height:
|
|
14
|
+
line-height: 3em;
|
|
15
15
|
text-align: center;
|
|
16
16
|
font-family: ${shared.fontStack};
|
|
17
|
-
border-bottom: 1px
|
|
17
|
+
border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.heading {
|
|
@@ -16,8 +16,6 @@ export class ConsentsoftwareMainSelection extends LitElement {
|
|
|
16
16
|
:host {
|
|
17
17
|
display: block;
|
|
18
18
|
position: relative;
|
|
19
|
-
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
20
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
21
19
|
}
|
|
22
20
|
|
|
23
21
|
.maincontainer {
|
|
@@ -28,7 +26,8 @@ export class ConsentsoftwareMainSelection extends LitElement {
|
|
|
28
26
|
.itemBox {
|
|
29
27
|
padding: 16px;
|
|
30
28
|
text-align: center;
|
|
31
|
-
border-right: 1px solid
|
|
29
|
+
border-right: 1px solid;
|
|
30
|
+
border-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%) 1;
|
|
32
31
|
}
|
|
33
32
|
.itemBox:last-child {
|
|
34
33
|
border-right: none;
|
|
@@ -44,7 +44,7 @@ export class ConsentsoftwareTabs extends LitElement {
|
|
|
44
44
|
<div class="tabs">
|
|
45
45
|
<div class="tab" @click=${this.handleClick}>Consent</div>
|
|
46
46
|
<div class="tab" @click=${this.handleClick}>Details</div>
|
|
47
|
-
<div class="tab" @click=${this.handleClick}>
|
|
47
|
+
<div class="tab" @click=${this.handleClick}>Cookie Policy + Legal Info</div>
|
|
48
48
|
</div>
|
|
49
49
|
<div class="selector"></div>
|
|
50
50
|
`;
|
|
@@ -1,19 +1,32 @@
|
|
|
1
1
|
import { LitElement, html, css, type TemplateResult } from 'lit';
|
|
2
2
|
import { customElement } from 'lit/decorators.js';
|
|
3
3
|
import { property } from 'lit/decorators/property.js';
|
|
4
|
-
|
|
5
4
|
import { delayFor } from '@push.rocks/smartdelay';
|
|
6
5
|
|
|
7
6
|
@customElement('consentsoftware-toggle')
|
|
8
7
|
export class ConsentsoftwareToggle extends LitElement {
|
|
9
|
-
public static demo = () => html`<consentsoftware-toggle></consentsoftware-toggle>`;
|
|
10
|
-
|
|
11
8
|
@property({ type: Boolean })
|
|
12
9
|
public required = false;
|
|
13
10
|
|
|
14
11
|
@property({ type: Boolean, reflect: true })
|
|
15
12
|
public selected = false;
|
|
16
13
|
|
|
14
|
+
/**
|
|
15
|
+
* We always track the knob’s left offset in `currentX`.
|
|
16
|
+
* - 0 => fully left
|
|
17
|
+
* - 30 => fully right
|
|
18
|
+
*/
|
|
19
|
+
private currentX = 0;
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Drag state
|
|
23
|
+
*/
|
|
24
|
+
private isDragging = false;
|
|
25
|
+
private hasDragged = false;
|
|
26
|
+
private startX = 0; // pointerdown offset
|
|
27
|
+
private readonly knobWidth = 30;
|
|
28
|
+
private readonly trackWidth = 60;
|
|
29
|
+
|
|
17
30
|
public static styles = css`
|
|
18
31
|
:host {
|
|
19
32
|
display: block;
|
|
@@ -24,17 +37,21 @@ export class ConsentsoftwareToggle extends LitElement {
|
|
|
24
37
|
margin-bottom: 16px;
|
|
25
38
|
}
|
|
26
39
|
|
|
40
|
+
.toggle {
|
|
41
|
+
user-select: none; /* helps avoid text selection on drag */
|
|
42
|
+
}
|
|
43
|
+
|
|
27
44
|
.toggleKnobArea {
|
|
28
|
-
|
|
45
|
+
position: relative;
|
|
29
46
|
margin: auto;
|
|
30
47
|
height: 30px;
|
|
31
48
|
width: 60px;
|
|
32
49
|
border-radius: 20px;
|
|
33
50
|
background: rgba(255, 255, 255, 0.1);
|
|
34
|
-
position: relative;
|
|
35
|
-
overflow: hidden;
|
|
36
|
-
transition: all 0.2s;
|
|
37
51
|
border: 1px solid rgba(255, 255, 255, 0);
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
transition: background 0.2s ease;
|
|
54
|
+
cursor: pointer;
|
|
38
55
|
}
|
|
39
56
|
|
|
40
57
|
:host([selected]) .toggleKnobArea {
|
|
@@ -42,19 +59,27 @@ export class ConsentsoftwareToggle extends LitElement {
|
|
|
42
59
|
}
|
|
43
60
|
|
|
44
61
|
.toggleKnobMover {
|
|
45
|
-
|
|
62
|
+
position: relative;
|
|
63
|
+
height: 100%;
|
|
64
|
+
width: 100%;
|
|
46
65
|
}
|
|
47
66
|
|
|
48
67
|
.toggleKnobInner {
|
|
49
|
-
height: 30px;
|
|
50
|
-
width: 30px;
|
|
51
|
-
border-radius: 15px;
|
|
52
|
-
background: rgba(255, 255, 255, 0.5);
|
|
53
68
|
position: absolute;
|
|
54
69
|
top: 0;
|
|
55
70
|
left: 0;
|
|
56
|
-
|
|
71
|
+
width: 30px;
|
|
72
|
+
height: 30px;
|
|
73
|
+
border-radius: 15px;
|
|
74
|
+
background: rgba(255, 255, 255, 0.5);
|
|
75
|
+
transition: left 0.2s ease, background 0.2s ease;
|
|
57
76
|
transform: scale(0.7);
|
|
77
|
+
/* Prevent scroll gestures on mobile */
|
|
78
|
+
touch-action: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.toggleKnobInner.dragging {
|
|
82
|
+
transition: background 0.2s ease;
|
|
58
83
|
}
|
|
59
84
|
|
|
60
85
|
:host([selected]) .toggleKnobInner {
|
|
@@ -78,50 +103,151 @@ export class ConsentsoftwareToggle extends LitElement {
|
|
|
78
103
|
public render(): TemplateResult {
|
|
79
104
|
return html`
|
|
80
105
|
<div class="label">${this.getText()}</div>
|
|
106
|
+
<!-- A user can click anywhere in this toggle area. -->
|
|
81
107
|
<div class="toggle" @click=${this.handleClick}>
|
|
82
108
|
<div class="toggleKnobArea">
|
|
83
109
|
<div class="toggleKnobMover">
|
|
84
|
-
|
|
110
|
+
<!-- The knob itself, with pointer events for dragging. -->
|
|
111
|
+
<div
|
|
112
|
+
class="toggleKnobInner"
|
|
113
|
+
style="left: ${this.currentX}px;"
|
|
114
|
+
@pointerdown=${this.onPointerDown}
|
|
115
|
+
@pointermove=${this.onPointerMove}
|
|
116
|
+
@pointerup=${this.onPointerUp}
|
|
117
|
+
@pointercancel=${this.onPointerUp}
|
|
118
|
+
></div>
|
|
85
119
|
</div>
|
|
86
120
|
</div>
|
|
87
121
|
</div>
|
|
88
122
|
`;
|
|
89
123
|
}
|
|
90
124
|
|
|
91
|
-
|
|
92
|
-
|
|
125
|
+
/**
|
|
126
|
+
* If required = true on first render, auto-select and set the knob to the right.
|
|
127
|
+
*/
|
|
128
|
+
public async firstUpdated() {
|
|
93
129
|
if (this.required) {
|
|
130
|
+
// If "required" => always selected
|
|
94
131
|
this.selected = true;
|
|
95
|
-
this.
|
|
132
|
+
this.currentX = this.knobWidth; // 30
|
|
133
|
+
this.requestUpdate();
|
|
134
|
+
} else {
|
|
135
|
+
// If not required, set knob to 0 or 30 depending on `selected`
|
|
136
|
+
this.currentX = this.selected ? this.knobWidth : 0;
|
|
137
|
+
this.requestUpdate();
|
|
96
138
|
}
|
|
97
139
|
}
|
|
98
140
|
|
|
99
|
-
|
|
141
|
+
/**
|
|
142
|
+
* CLICK HANDLER
|
|
143
|
+
*/
|
|
144
|
+
public async handleClick(event: MouseEvent) {
|
|
145
|
+
// If the user truly dragged the knob, skip the normal click toggle.
|
|
146
|
+
if (this.isDragging || this.hasDragged) {
|
|
147
|
+
event.stopPropagation();
|
|
148
|
+
event.preventDefault();
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
|
|
100
152
|
if (this.required) {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
153
|
+
// small bounce from 30 -> 20 -> 30
|
|
154
|
+
this.currentX = this.knobWidth; // ensure at 30
|
|
155
|
+
this.requestUpdate();
|
|
156
|
+
await new Promise((r) => setTimeout(r, 10));
|
|
157
|
+
|
|
158
|
+
this.currentX = 20; // small bounce left
|
|
159
|
+
this.requestUpdate();
|
|
160
|
+
await delayFor(200);
|
|
161
|
+
|
|
162
|
+
this.currentX = this.knobWidth; // back to 30
|
|
163
|
+
this.requestUpdate();
|
|
105
164
|
return;
|
|
106
165
|
}
|
|
166
|
+
|
|
167
|
+
// Normal toggle if no drag & not required
|
|
168
|
+
event.stopPropagation();
|
|
169
|
+
event.preventDefault();
|
|
170
|
+
|
|
107
171
|
this.selected = !this.selected;
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
172
|
+
this.currentX = this.selected ? this.knobWidth : 0; // snap knob left(0) or right(30)
|
|
173
|
+
this.requestUpdate();
|
|
174
|
+
|
|
111
175
|
this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
|
|
176
|
+
delayFor(0).then(() => {
|
|
177
|
+
this.hasDragged = false;
|
|
178
|
+
});
|
|
112
179
|
}
|
|
113
180
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
181
|
+
/**
|
|
182
|
+
* DRAG HANDLERS (pointer events)
|
|
183
|
+
*/
|
|
184
|
+
private onPointerDown(event: PointerEvent) {
|
|
185
|
+
if (this.required) {
|
|
186
|
+
// If "required", disallow manual dragging
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// Start dragging
|
|
191
|
+
this.isDragging = true;
|
|
192
|
+
this.hasDragged = false;
|
|
193
|
+
// The difference between the pointer’s X and the knob’s current position
|
|
194
|
+
this.startX = event.clientX - this.currentX;
|
|
195
|
+
|
|
196
|
+
// capture pointer so we keep receiving pointermove/pointerup
|
|
197
|
+
(event.target as HTMLElement).setPointerCapture(event.pointerId);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
private onPointerMove(event: PointerEvent) {
|
|
201
|
+
if (!this.isDragging) return;
|
|
202
|
+
const newX = event.clientX - this.startX;
|
|
203
|
+
this.hasDragged = true;
|
|
204
|
+
const toggleKnobInner: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobInner');
|
|
205
|
+
toggleKnobInner.classList.add('dragging');
|
|
206
|
+
|
|
207
|
+
// Clamp
|
|
208
|
+
this.currentX = Math.max(0, Math.min(newX, this.trackWidth - this.knobWidth));
|
|
209
|
+
this.requestUpdate();
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
private onPointerUp(event: PointerEvent) {
|
|
213
|
+
if (!this.isDragging) return;
|
|
214
|
+
(event.target as HTMLElement).releasePointerCapture(event.pointerId);
|
|
215
|
+
this.isDragging = false;
|
|
216
|
+
|
|
217
|
+
// If we didn’t truly drag, pointerup does nothing; click handler handles toggling.
|
|
218
|
+
if (!this.hasDragged) {
|
|
219
|
+
return;
|
|
220
|
+
}
|
|
221
|
+
const toggleKnobInner: HTMLDivElement = this.shadowRoot.querySelector('.toggleKnobInner');
|
|
222
|
+
toggleKnobInner.classList.remove('dragging');
|
|
223
|
+
|
|
224
|
+
// Real drag => decide final side
|
|
225
|
+
const midpoint = (this.trackWidth - this.knobWidth) / 2; // 15
|
|
226
|
+
this.selected = this.currentX > midpoint;
|
|
227
|
+
this.currentX = this.selected ? this.knobWidth : 0; // snap to edge
|
|
228
|
+
this.requestUpdate();
|
|
229
|
+
|
|
230
|
+
// Dispatch toggle event
|
|
231
|
+
this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/**
|
|
235
|
+
* If external code sets `selected = true/false`, we also sync the knob position
|
|
236
|
+
*/
|
|
237
|
+
protected updated(changedProperties: Map<PropertyKey, unknown>): void {
|
|
238
|
+
if (
|
|
239
|
+
changedProperties.has('selected') &&
|
|
240
|
+
!this.isDragging &&
|
|
241
|
+
!this.hasDragged &&
|
|
242
|
+
!this.required
|
|
243
|
+
) {
|
|
244
|
+
this.currentX = this.selected ? this.knobWidth : 0;
|
|
245
|
+
this.requestUpdate();
|
|
121
246
|
}
|
|
247
|
+
super.updated(changedProperties);
|
|
122
248
|
}
|
|
123
249
|
|
|
124
|
-
public getText() {
|
|
250
|
+
public getText(): string | null {
|
|
125
251
|
return this.textContent;
|
|
126
252
|
}
|
|
127
253
|
}
|