@consent.software/catalog 1.0.81
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 +5799 -0
- package/dist_bundle/bundle.js.map +7 -0
- package/dist_ts_web/00_commitinfo_data.d.ts +8 -0
- package/dist_ts_web/00_commitinfo_data.js +9 -0
- package/dist_ts_web/elements/consentsoftware-cookieconsent.d.ts +16 -0
- package/dist_ts_web/elements/consentsoftware-cookieconsent.js +244 -0
- package/dist_ts_web/elements/index.d.ts +1 -0
- package/dist_ts_web/elements/index.js +2 -0
- package/dist_ts_web/index.d.ts +1 -0
- package/dist_ts_web/index.js +2 -0
- package/dist_ts_web/pages/index.d.ts +2 -0
- package/dist_ts_web/pages/index.js +3 -0
- package/dist_ts_web/pages/page1.d.ts +1 -0
- package/dist_ts_web/pages/page1.js +6 -0
- package/dist_ts_web/pages/page2.d.ts +1 -0
- package/dist_ts_web/pages/page2.js +5 -0
- package/dist_watch/bundle.js +135619 -0
- package/dist_watch/bundle.js.map +7 -0
- package/dist_watch/index.html +28 -0
- package/npmextra.json +31 -0
- package/package.json +58 -0
- package/readme.hints.md +0 -0
- package/readme.md +138 -0
- package/ts_web/00_commitinfo_data.ts +8 -0
- package/ts_web/elements/consentsoftware-cookieconsent.ts +242 -0
- package/ts_web/elements/index.ts +1 -0
- package/ts_web/index.ts +1 -0
- package/ts_web/pages/index.ts +2 -0
- package/ts_web/pages/page1.ts +6 -0
- package/ts_web/pages/page2.ts +5 -0
- package/ts_web/tsconfig.json +16 -0
|
@@ -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/npmextra.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"gitzone": {
|
|
3
|
+
"projectType": "wcc",
|
|
4
|
+
"module": {
|
|
5
|
+
"githost": "gitlab.com",
|
|
6
|
+
"gitscope": "consentsoftware",
|
|
7
|
+
"gitrepo": "private/catalog",
|
|
8
|
+
"description": "A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.",
|
|
9
|
+
"npmPackagename": "@consentsoftware_private/catalog",
|
|
10
|
+
"license": "UNLICENSED",
|
|
11
|
+
"projectDomain": "consent.software",
|
|
12
|
+
"keywords": [
|
|
13
|
+
"consent management",
|
|
14
|
+
"web components",
|
|
15
|
+
"cookie consent",
|
|
16
|
+
"privacy compliance",
|
|
17
|
+
"GDPR",
|
|
18
|
+
"ES modules",
|
|
19
|
+
"frontend",
|
|
20
|
+
"typescript",
|
|
21
|
+
"user privacy",
|
|
22
|
+
"modern web"
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"npmci": {
|
|
27
|
+
"npmGlobalTools": [],
|
|
28
|
+
"npmAccessLevel": "private",
|
|
29
|
+
"npmRegistryUrl": "verdaccio.lossless.one"
|
|
30
|
+
}
|
|
31
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@consent.software/catalog",
|
|
3
|
+
"version": "1.0.81",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.",
|
|
6
|
+
"main": "dist_ts_web/index.js",
|
|
7
|
+
"typings": "dist_ts_web/index.d.ts",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"author": "Lossless GmbH",
|
|
10
|
+
"license": "UNLICENSED",
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"@consent.software/interfaces": "^1.0.11",
|
|
13
|
+
"@consent.software/webclient": "^1.0.14",
|
|
14
|
+
"@design.estate/dees-catalog": "^1.3.3",
|
|
15
|
+
"@design.estate/dees-domtools": "^2.1.1",
|
|
16
|
+
"@design.estate/dees-element": "^2.0.39",
|
|
17
|
+
"@push.rocks/smartdelay": "^3.0.5"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@design.estate/dees-wcctools": "^1.0.90",
|
|
21
|
+
"@git.zone/tsbuild": "^2.2.0",
|
|
22
|
+
"@git.zone/tsbundle": "^2.1.0",
|
|
23
|
+
"@git.zone/tswatch": "^2.0.37",
|
|
24
|
+
"@push.rocks/projectinfo": "^5.0.2"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"ts/**/*",
|
|
28
|
+
"ts_web/**/*",
|
|
29
|
+
"dist/**/*",
|
|
30
|
+
"dist_*/**/*",
|
|
31
|
+
"dist_ts/**/*",
|
|
32
|
+
"dist_ts_web/**/*",
|
|
33
|
+
"assets/**/*",
|
|
34
|
+
"cli.js",
|
|
35
|
+
"npmextra.json",
|
|
36
|
+
"readme.md"
|
|
37
|
+
],
|
|
38
|
+
"browserslist": [
|
|
39
|
+
"last 1 Chrome versions"
|
|
40
|
+
],
|
|
41
|
+
"keywords": [
|
|
42
|
+
"consent management",
|
|
43
|
+
"web components",
|
|
44
|
+
"cookie consent",
|
|
45
|
+
"privacy compliance",
|
|
46
|
+
"GDPR",
|
|
47
|
+
"ES modules",
|
|
48
|
+
"frontend",
|
|
49
|
+
"typescript",
|
|
50
|
+
"user privacy",
|
|
51
|
+
"modern web"
|
|
52
|
+
],
|
|
53
|
+
"scripts": {
|
|
54
|
+
"test": "npm run build",
|
|
55
|
+
"build": "tsbuild element --allowimplicitany && tsbundle element --production",
|
|
56
|
+
"watch": "tswatch element"
|
|
57
|
+
}
|
|
58
|
+
}
|
package/readme.hints.md
ADDED
|
File without changes
|
package/readme.md
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
# @consent.software_private/catalog
|
|
2
|
+
|
|
3
|
+
Webcomponents for consent.software widget.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
To install this module, you need to have [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed on your machine. You can then run the following command in your terminal to add the module to your project:
|
|
8
|
+
|
|
9
|
+
```shell
|
|
10
|
+
npm install @consent.software_private/catalog
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Ensure you have ESM support enabled in your TypeScript configuration, as this package uses ES module syntax.
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
The `@consent.software_private/catalog` module offers a set of web components to integrate consent management capabilities into your web application. These components leverage modern browser APIs and employ a system for cookie management that aligns with regulatory requirements.
|
|
18
|
+
|
|
19
|
+
### Initial Setup
|
|
20
|
+
|
|
21
|
+
First, import the necessary modules and set up your project to use the web components provided:
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import '@consent.software_private/catalog';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Ensure this import statement is included in your main JavaScript/TypeScript file where you want to utilize the consent management web components. It is vital to transpile with TypeScript compiler settings that support ES modules.
|
|
28
|
+
|
|
29
|
+
### Building a Consent Modal
|
|
30
|
+
|
|
31
|
+
A primary feature of this module is the `consentsoftware-cookieconsent` component. This component can be embedded into your application to allow users to select their preferred cookie levels.
|
|
32
|
+
|
|
33
|
+
#### Setting Up the Environment
|
|
34
|
+
|
|
35
|
+
Before creating instances of the components, make sure your project environment is ready. Setup the DOM tools and any associated dependencies:
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
import { domtools } from '@design.estate/dees-domtools';
|
|
39
|
+
|
|
40
|
+
domtools.elementBasic.setup();
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
#### Using the Consentsoftware-Cookieconsent Component
|
|
44
|
+
|
|
45
|
+
Here's how you can include the `consentsoftware-cookieconsent` component in your application:
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
import { html, render } from 'lit-html';
|
|
49
|
+
|
|
50
|
+
const template = html`
|
|
51
|
+
<consentsoftware-cookieconsent></consentsoftware-cookieconsent>
|
|
52
|
+
`;
|
|
53
|
+
|
|
54
|
+
render(template, document.body);
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
This will add the consent banner to the bottom of the page, providing users options to set their preferences.
|
|
58
|
+
|
|
59
|
+
#### Customizing the Component
|
|
60
|
+
|
|
61
|
+
The `consentsoftware-cookieconsent` component allows you to customize its design via CSS properties. Leverage light and dark themes through the CSS manager used in styling attributes:
|
|
62
|
+
|
|
63
|
+
```typescript
|
|
64
|
+
const styles = `
|
|
65
|
+
:host {
|
|
66
|
+
--cookieconsent-height: 70px;
|
|
67
|
+
--cookieconsent-background: #222;
|
|
68
|
+
--cookieconsent-text-color: #fff;
|
|
69
|
+
}
|
|
70
|
+
`;
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Apply these custom styles to modify the appearance to match your site's design language.
|
|
74
|
+
|
|
75
|
+
#### Handling User Interactions
|
|
76
|
+
|
|
77
|
+
The component is interactive, responding to user actions to set cookie levels. Here’s how the interaction flow works:
|
|
78
|
+
|
|
79
|
+
1. **User Interaction**: Users click one of the consent buttons (e.g., "Functional Cookies").
|
|
80
|
+
2. **Handling Consent Levels**: The component's `setLevel` method is invoked, updating the user's cookie preferences, e.g.:
|
|
81
|
+
|
|
82
|
+
```typescript
|
|
83
|
+
private async setLevel(event: MouseEvent, levelsArg: Array<TCookieLevel>) {
|
|
84
|
+
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
|
85
|
+
// Adjust styling and visibility
|
|
86
|
+
this.setAttribute('gotIt', 'true');
|
|
87
|
+
await delayFor(300);
|
|
88
|
+
this.setAttribute('show', 'false');
|
|
89
|
+
// Update other business logic based on consent levels
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
The system remembers user choices using a backend managed by the `consent.software` infrastructure.
|
|
94
|
+
|
|
95
|
+
### Integrating with Your Backend
|
|
96
|
+
|
|
97
|
+
For full functionality, the component interacts with a backend to manage user consent states. Using `@consent.software/webclient`, you can query the user's current consent levels, perform updates, and verify whether consent has been previously granted:
|
|
98
|
+
|
|
99
|
+
```typescript
|
|
100
|
+
const webclientInstance = new CsWebclient();
|
|
101
|
+
const cookieLevels = await webclientInstance.getCookieLevels();
|
|
102
|
+
|
|
103
|
+
if (!cookieLevels) {
|
|
104
|
+
// Show consent dialog if no consent levels are set
|
|
105
|
+
document.querySelector('consentsoftware-cookieconsent').show = true;
|
|
106
|
+
} else {
|
|
107
|
+
// Apply the consent settings to your analytics, advertisements, etc.
|
|
108
|
+
applyConsentSettings(cookieLevels);
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Advanced Considerations
|
|
113
|
+
|
|
114
|
+
#### Responsive Design
|
|
115
|
+
|
|
116
|
+
The component is responsive, optimized for various screen sizes using a grid layout. Ensure your main HTML elements are responsive to accommodate the consent bar.
|
|
117
|
+
|
|
118
|
+
#### Accessibility and Compliance
|
|
119
|
+
|
|
120
|
+
Ensure your application properly adheres to legal and accessibility standards by aligning with the consent management system's features. This often involves using correct semantics, polyfills for custom elements, and thorough testing on different devices and browsers.
|
|
121
|
+
|
|
122
|
+
#### Managing State Across Sessions
|
|
123
|
+
|
|
124
|
+
Store user's consent preferences beyond the session using either localStorage, cookies, or server-side sessions. Adjust the component’s connectedCallback and updated lifecycle methods to fetch and apply these stored settings.
|
|
125
|
+
|
|
126
|
+
Proper handling ensures a seamless user experience, helping companies comply with international privacy laws like GDPR.
|
|
127
|
+
|
|
128
|
+
### Integration and Testing
|
|
129
|
+
|
|
130
|
+
Test extensively in your development environment, ensure correct rendering, and simulate various user interactions to gain confidence in production-level functionality. Automated testing might include:
|
|
131
|
+
|
|
132
|
+
- Unit tests for lifecycle behavior using testing libraries such as Mocha or Jest.
|
|
133
|
+
- Integration trials ensuring the component plays well with surrounding UI elements.
|
|
134
|
+
|
|
135
|
+
### Conclusion
|
|
136
|
+
|
|
137
|
+
With these guidelines, developers can integrate, customize, and extend the consent management capabilities within their applications using `@consent.software_private/catalog`. Adapt the styling, maximize UX, and ensure regulatory compliance for a robust implementation. Mastery of the component enables seamless user consent handling and enhances your app's governance credentials.
|
|
138
|
+
undefined
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* autocreated commitinfo by @push.rocks/commitinfo
|
|
3
|
+
*/
|
|
4
|
+
export const commitinfo = {
|
|
5
|
+
name: '@consent.software/catalog',
|
|
6
|
+
version: '1.0.81',
|
|
7
|
+
description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.'
|
|
8
|
+
}
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
import { customElement, DeesElement, property, html, type TemplateResult, cssManager, css } from '@design.estate/dees-element';
|
|
2
|
+
import * as domtools from '@design.estate/dees-domtools';
|
|
3
|
+
import '@design.estate/dees-catalog';
|
|
4
|
+
|
|
5
|
+
import * as csInterfaces from '@consent.software/interfaces';
|
|
6
|
+
import * as csWebclient from '@consent.software/webclient';
|
|
7
|
+
|
|
8
|
+
import { delayFor } from '@push.rocks/smartdelay';
|
|
9
|
+
|
|
10
|
+
@customElement('consentsoftware-cookieconsent')
|
|
11
|
+
export class ConsentsoftwareCookieconsent extends DeesElement {
|
|
12
|
+
public static demo = () => html`<consentsoftware-cookieconsent></consentsoftware-cookieconsent>`;
|
|
13
|
+
|
|
14
|
+
public csWebclientInstance = new csWebclient.CsWebclient();
|
|
15
|
+
public csWebclientRan = false;
|
|
16
|
+
|
|
17
|
+
constructor() {
|
|
18
|
+
super();
|
|
19
|
+
domtools.elementBasic.setup();
|
|
20
|
+
// lets determine wether to show the cookieconsent dialog or not
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
public static styles = [
|
|
24
|
+
cssManager.defaultStyles,
|
|
25
|
+
css`
|
|
26
|
+
* {
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.content {
|
|
31
|
+
max-width: 1100px;
|
|
32
|
+
margin: auto;
|
|
33
|
+
line-height: var(--cookieconsent-height);
|
|
34
|
+
padding-bottom: 20px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
.text-container {
|
|
39
|
+
line-height: var(--cookieconsent-height);
|
|
40
|
+
display: grid;
|
|
41
|
+
grid-template-columns: 30px auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.text-container .icon-container {
|
|
45
|
+
height: var(--cookieconsent-height);
|
|
46
|
+
display: inline-block;
|
|
47
|
+
color: #4496F5;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.text-container .toptext {
|
|
51
|
+
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.text-container a {
|
|
55
|
+
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.button-container {
|
|
59
|
+
display: grid;
|
|
60
|
+
grid-template-columns: ${cssManager.cssGridColumns(4, 20)};
|
|
61
|
+
grid-column-gap: 20px;
|
|
62
|
+
grid-row-gap: 20px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.info-container {
|
|
66
|
+
color: ${cssManager.bdTheme('#444', '#CCC')};
|
|
67
|
+
text-align: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.info-container a {
|
|
71
|
+
text-decoration: underline;
|
|
72
|
+
color: ${cssManager.bdTheme('#444', '#CCC')};
|
|
73
|
+
transition: color 0.2s;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.info-container a:hover {
|
|
77
|
+
color: #ffffff;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
.consent-button {
|
|
82
|
+
border-radius: 3px;
|
|
83
|
+
background: ${cssManager.bdTheme('#ffffff', '#252525')};
|
|
84
|
+
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.2)', '0px 0px 5px rgba(0,0,0,0.4)')};
|
|
85
|
+
padding: 10px;
|
|
86
|
+
line-height: 30px;
|
|
87
|
+
text-align: center;
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
transition: background 0.2s;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.consent-button:hover {
|
|
93
|
+
background: ${cssManager.bdTheme('#f2f2f2', '#222222')};
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.consent-button:first-child {
|
|
97
|
+
margin-left: 0px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
${cssManager.cssForNotebook(css`
|
|
101
|
+
.content {
|
|
102
|
+
padding-left: 30px;
|
|
103
|
+
padding-right: 30px;
|
|
104
|
+
}
|
|
105
|
+
`)}
|
|
106
|
+
|
|
107
|
+
${cssManager.cssForTablet(css`
|
|
108
|
+
:host {
|
|
109
|
+
text-align: center;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.content {
|
|
113
|
+
padding-top: 20px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.icon-container {
|
|
117
|
+
margin-top: -10px;
|
|
118
|
+
line-height: 50px;
|
|
119
|
+
font-size: 40px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.text-container {
|
|
123
|
+
line-height: 20px;
|
|
124
|
+
margin-bottom: 10px;
|
|
125
|
+
grid-template-columns: 50px auto;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.button-container {
|
|
129
|
+
grid-template-columns: ${cssManager.cssGridColumns(2, 20)};
|
|
130
|
+
}
|
|
131
|
+
`)}
|
|
132
|
+
|
|
133
|
+
${cssManager.cssForPhablet(css`
|
|
134
|
+
.button-container {
|
|
135
|
+
grid-template-columns: 100%;
|
|
136
|
+
}
|
|
137
|
+
`)}
|
|
138
|
+
`
|
|
139
|
+
]
|
|
140
|
+
|
|
141
|
+
public render(): TemplateResult {
|
|
142
|
+
return html`
|
|
143
|
+
<style>
|
|
144
|
+
:host {
|
|
145
|
+
display: block;
|
|
146
|
+
font-family: 'Roboto', sans-serif;
|
|
147
|
+
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
148
|
+
background: ${cssManager.bdTheme('#eeeeee', '#111')};
|
|
149
|
+
box-shadow: ${cssManager.bdTheme('0px 0px 15px rgba(0,0,0,0.4)', '0px -30px 30px rgba(0,0,0,1)')};
|
|
150
|
+
position: fixed;
|
|
151
|
+
bottom: 0px;
|
|
152
|
+
border-top: ${cssManager.bdTheme('none', '1px solid #e4002b')};
|
|
153
|
+
left: 0px;
|
|
154
|
+
width: 100%;
|
|
155
|
+
box-sizing: border-box;
|
|
156
|
+
--cookieconsent-height: 60px;
|
|
157
|
+
min-height: var(--cookieconsent-height);
|
|
158
|
+
margin-bottom: -${this.heightPixels}px;
|
|
159
|
+
will-change: transform; /* make sure it is rendered efficiently */
|
|
160
|
+
z-index: 1000; /* the standard z-index for fixed elements at Lossless */
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
:host([show=false]) {
|
|
164
|
+
display: none;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
:host([show=true]) {
|
|
168
|
+
display: block;
|
|
169
|
+
transition: margin-bottom 0.3s ease;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:host([gotIt=true]) {
|
|
173
|
+
margin-bottom: -${this.heightPixels + 1}px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
:host([gotIt=false]) {
|
|
177
|
+
margin-bottom: 0px;
|
|
178
|
+
}
|
|
179
|
+
</style>
|
|
180
|
+
<div class="content">
|
|
181
|
+
<div class="text-container">
|
|
182
|
+
<div class="icon-container">
|
|
183
|
+
<dees-icon iconName="info"></dees-icon>
|
|
184
|
+
</div>
|
|
185
|
+
<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>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="button-container">
|
|
188
|
+
<div class="consent-button" @click=${event => {this.setLevel(event, ['functional']);}}>Functional cookies</div>
|
|
189
|
+
<div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics']);}}>Analytics cookies</div>
|
|
190
|
+
<div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing']);}}>Marketing cookies</div>
|
|
191
|
+
<div class="consent-button" @click=${event => {this.setLevel(event, ['functional', 'analytics', 'marketing', 'all']);}}>All cookies</div>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="info-container">
|
|
194
|
+
consent management powered by <a href="https://consent.software">consent.software</a>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
`;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
@property({type: Number})
|
|
201
|
+
public heightPixels: number = 60;
|
|
202
|
+
|
|
203
|
+
public async connectedCallback() {
|
|
204
|
+
super.connectedCallback();
|
|
205
|
+
this.setAttribute('gotIt', 'true');
|
|
206
|
+
const cookieLevel = await this.csWebclientInstance.getCookieLevels();
|
|
207
|
+
if(!cookieLevel) {
|
|
208
|
+
delayFor(300).then(() => {
|
|
209
|
+
this.setAttribute('show', 'true');
|
|
210
|
+
this.setAttribute('gotIt', 'false');
|
|
211
|
+
});
|
|
212
|
+
} else {
|
|
213
|
+
this.setAttribute('show', 'false');
|
|
214
|
+
this.setAttribute('gotIt', 'true');
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
public firstUpdated() {
|
|
219
|
+
this.heightPixels = this.shadowRoot.host.clientHeight;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
public async updated() {
|
|
223
|
+
console.log(`The height of the cookie banner is ${this.shadowRoot.host.clientHeight}px`);
|
|
224
|
+
const acceptedCookieLevels = await this.csWebclientInstance.getCookieLevels();
|
|
225
|
+
if (!this.csWebclientRan && acceptedCookieLevels) {
|
|
226
|
+
this.csWebclientRan = true;
|
|
227
|
+
await this.csWebclientInstance.getAndRunConsentTuples();
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
private async setLevel (event: MouseEvent, levelsArg: csInterfaces.TCookieLevel[]) {
|
|
234
|
+
console.log(`Set level to ${levelsArg}`);
|
|
235
|
+
await this.csWebclientInstance.setCookieLevels(levelsArg);
|
|
236
|
+
this.setAttribute('gotIt', 'true');
|
|
237
|
+
await delayFor(300);
|
|
238
|
+
this.setAttribute('show', 'false');
|
|
239
|
+
this.updated();
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './consentsoftware-cookieconsent.js';
|
package/ts_web/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './elements/index.js';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "es2017",
|
|
4
|
+
"module": "es2015",
|
|
5
|
+
"moduleResolution": "node",
|
|
6
|
+
"lib": ["es2017", "dom"],
|
|
7
|
+
"declaration": true,
|
|
8
|
+
"inlineSources": true,
|
|
9
|
+
"inlineSourceMap": true,
|
|
10
|
+
"noUnusedLocals": true,
|
|
11
|
+
"noFallthroughCasesInSwitch": true,
|
|
12
|
+
"outDir": "dist/",
|
|
13
|
+
"skipLibCheck": true,
|
|
14
|
+
"experimentalDecorators": true
|
|
15
|
+
}
|
|
16
|
+
}
|