@uibit/consent-guard 0.1.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/LICENSE +21 -0
- package/README.md +27 -0
- package/custom-elements.json +149 -0
- package/dist/consent-guard.d.ts +30 -0
- package/dist/consent-guard.d.ts.map +1 -0
- package/dist/consent-guard.js +90 -0
- package/dist/consent-guard.js.map +1 -0
- package/dist/frameworks/angular/index.ts +20 -0
- package/dist/frameworks/astro/index.d.ts +10 -0
- package/dist/frameworks/nuxt/index.ts +7 -0
- package/dist/frameworks/preact/index.d.ts +13 -0
- package/dist/frameworks/qwik/index.tsx +10 -0
- package/dist/frameworks/react/index.d.ts +18 -0
- package/dist/frameworks/solid/index.d.ts +14 -0
- package/dist/frameworks/stencil/index.d.ts +12 -0
- package/dist/frameworks/svelte/index.svelte +40 -0
- package/dist/frameworks/vue/index.ts +24 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/types.d.ts +28 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/package.json +92 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 UIBit Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Consent Guard
|
|
2
|
+
|
|
3
|
+
[Interactive Demonstration](https://rawlings.github.io/uibit/components/consent-guard)
|
|
4
|
+
|
|
5
|
+
Consent Guard provides a polished, content-specific consent interface that respects user privacy without interrupting the user experience. By replacing third-party embeddings with clear, informative placeholders, it gives users control over which services load, building trust and meeting compliance requirements.
|
|
6
|
+
|
|
7
|
+
## Value Delivery
|
|
8
|
+
|
|
9
|
+
- **Privacy Compliance** – Adhere to international privacy standards by securing explicit consent before loading third-party trackers or resources.
|
|
10
|
+
- **Granular Control** – Allows users to authorize specific content types (such as video embeds, maps, or widgets) individually rather than forcing all-or-nothing decisions.
|
|
11
|
+
- **Seamless UX Integration** – Integrates placeholders directly into the content flow instead of relying on obtrusive overlays.
|
|
12
|
+
- **Brand Alignment** – Custom styling ensures placeholders and consent dialogues match the host application's aesthetic.
|
|
13
|
+
|
|
14
|
+
## Ideal Applications
|
|
15
|
+
|
|
16
|
+
- **Privacy-Conscious Web Applications** – Sites hosting third-party media embeds, interactive maps, or widgets.
|
|
17
|
+
- **Compliance-Driven Landing Pages** – Pages requiring selective loading of analytics, tracking, or marketing scripts.
|
|
18
|
+
- **Enterprise Portals** – Ensuring strict data privacy boundaries for embedded customer service tools.
|
|
19
|
+
|
|
20
|
+
## Further Information
|
|
21
|
+
|
|
22
|
+
Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## Changelog
|
|
26
|
+
|
|
27
|
+
Please see the [Changelog](CHANGELOG.md) for version history.
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/consent-guard.ts",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "Gate any content behind a consent prompt. Shows the `placeholder` slot until\nthe user grants consent, then reveals the default slot.\n\nConsent is triggered by clicking any element with `[data-consent-accept]`\ninside the placeholder slot, or by calling the `accept()` method programmatically.\n\nContent in the default slot is kept `display:none` until consent is granted,\nso iframes with `loading=\"lazy\"` will not make network requests beforehand.",
|
|
12
|
+
"name": "ConsentGuard",
|
|
13
|
+
"cssParts": [
|
|
14
|
+
{
|
|
15
|
+
"description": "Wrapper around the placeholder slot",
|
|
16
|
+
"name": "placeholder"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "Wrapper around the default slot",
|
|
20
|
+
"name": "content"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"slots": [
|
|
24
|
+
{
|
|
25
|
+
"description": "Shown before consent. Put your prompt UI here. Mark your accept button with `data-consent-accept`.",
|
|
26
|
+
"name": "placeholder"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"description": "The content to reveal after consent (e.g. an iframe).",
|
|
30
|
+
"name": "(default)"
|
|
31
|
+
}
|
|
32
|
+
],
|
|
33
|
+
"members": [
|
|
34
|
+
{
|
|
35
|
+
"kind": "field",
|
|
36
|
+
"name": "_consented",
|
|
37
|
+
"type": {
|
|
38
|
+
"text": "boolean"
|
|
39
|
+
},
|
|
40
|
+
"privacy": "private",
|
|
41
|
+
"default": "false"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"kind": "method",
|
|
45
|
+
"name": "accept",
|
|
46
|
+
"description": "Programmatically grant consent."
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"kind": "method",
|
|
50
|
+
"name": "_onPlaceholderClick",
|
|
51
|
+
"privacy": "private",
|
|
52
|
+
"parameters": [
|
|
53
|
+
{
|
|
54
|
+
"name": "e",
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "Event"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
],
|
|
62
|
+
"events": [
|
|
63
|
+
{
|
|
64
|
+
"description": "Fired when consent is granted",
|
|
65
|
+
"name": "consent-accepted"
|
|
66
|
+
}
|
|
67
|
+
],
|
|
68
|
+
"superclass": {
|
|
69
|
+
"name": "UIBitElement",
|
|
70
|
+
"package": "@uibit/core"
|
|
71
|
+
},
|
|
72
|
+
"tagName": "uibit-consent-guard",
|
|
73
|
+
"customElement": true
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
"exports": [
|
|
77
|
+
{
|
|
78
|
+
"kind": "js",
|
|
79
|
+
"name": "ConsentGuard",
|
|
80
|
+
"declaration": {
|
|
81
|
+
"name": "ConsentGuard",
|
|
82
|
+
"module": "src/consent-guard.ts"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"kind": "custom-element-definition",
|
|
87
|
+
"name": "uibit-consent-guard",
|
|
88
|
+
"declaration": {
|
|
89
|
+
"name": "ConsentGuard",
|
|
90
|
+
"module": "src/consent-guard.ts"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"kind": "js",
|
|
95
|
+
"name": "default",
|
|
96
|
+
"declaration": {
|
|
97
|
+
"name": "ConsentGuard",
|
|
98
|
+
"module": "src/consent-guard.ts"
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"kind": "javascript-module",
|
|
105
|
+
"path": "src/index.ts",
|
|
106
|
+
"declarations": [],
|
|
107
|
+
"exports": [
|
|
108
|
+
{
|
|
109
|
+
"kind": "js",
|
|
110
|
+
"name": "default",
|
|
111
|
+
"declaration": {
|
|
112
|
+
"name": "default",
|
|
113
|
+
"module": "./consent-guard"
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"kind": "js",
|
|
118
|
+
"name": "ConsentGuard",
|
|
119
|
+
"declaration": {
|
|
120
|
+
"name": "ConsentGuard",
|
|
121
|
+
"module": "./consent-guard"
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"kind": "js",
|
|
126
|
+
"name": "ConsentGuardConfig",
|
|
127
|
+
"declaration": {
|
|
128
|
+
"name": "ConsentGuardConfig",
|
|
129
|
+
"module": "./types"
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"kind": "js",
|
|
134
|
+
"name": "ConsentGuardType",
|
|
135
|
+
"declaration": {
|
|
136
|
+
"name": "ConsentGuard",
|
|
137
|
+
"module": "./types"
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
]
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"kind": "javascript-module",
|
|
144
|
+
"path": "src/types.ts",
|
|
145
|
+
"declarations": [],
|
|
146
|
+
"exports": []
|
|
147
|
+
}
|
|
148
|
+
]
|
|
149
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { UIBitElement } from '@uibit/core';
|
|
2
|
+
/**
|
|
3
|
+
* Gate any content behind a consent prompt. Shows the `placeholder` slot until
|
|
4
|
+
* the user grants consent, then reveals the default slot.
|
|
5
|
+
*
|
|
6
|
+
* Consent is triggered by clicking any element with `[data-consent-accept]`
|
|
7
|
+
* inside the placeholder slot, or by calling the `accept()` method programmatically.
|
|
8
|
+
*
|
|
9
|
+
* Content in the default slot is kept `display:none` until consent is granted,
|
|
10
|
+
* so iframes with `loading="lazy"` will not make network requests beforehand.
|
|
11
|
+
*
|
|
12
|
+
* @fires consent-accepted - Fired when consent is granted
|
|
13
|
+
*
|
|
14
|
+
* @slot placeholder - Shown before consent. Put your prompt UI here. Mark your
|
|
15
|
+
* accept button with `data-consent-accept`.
|
|
16
|
+
* @slot (default) - The content to reveal after consent (e.g. an iframe).
|
|
17
|
+
*
|
|
18
|
+
* @csspart placeholder - Wrapper around the placeholder slot
|
|
19
|
+
* @csspart content - Wrapper around the default slot
|
|
20
|
+
*/
|
|
21
|
+
export declare class ConsentGuard extends UIBitElement {
|
|
22
|
+
static styles: import("lit").CSSResult;
|
|
23
|
+
private _consented;
|
|
24
|
+
/** Programmatically grant consent. */
|
|
25
|
+
accept(): void;
|
|
26
|
+
private _onPlaceholderClick;
|
|
27
|
+
render(): import("lit").TemplateResult<1>;
|
|
28
|
+
}
|
|
29
|
+
export default ConsentGuard;
|
|
30
|
+
//# sourceMappingURL=consent-guard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"consent-guard.d.ts","sourceRoot":"","sources":["../src/consent-guard.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAG1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,MAAM,CAAC,MAAM,0BAsBX;IAEO,OAAO,CAAC,UAAU,CAAS;IAEpC,sCAAsC;IACtC,MAAM,SAKL;IAED,OAAO,CAAC,mBAAmB;IAO3B,MAAM,oCASL;CACF;eAEc,YAAY"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, css } from 'lit';
|
|
8
|
+
import { customElement, UIBitElement } from '@uibit/core';
|
|
9
|
+
import { state } from 'lit/decorators.js';
|
|
10
|
+
/**
|
|
11
|
+
* Gate any content behind a consent prompt. Shows the `placeholder` slot until
|
|
12
|
+
* the user grants consent, then reveals the default slot.
|
|
13
|
+
*
|
|
14
|
+
* Consent is triggered by clicking any element with `[data-consent-accept]`
|
|
15
|
+
* inside the placeholder slot, or by calling the `accept()` method programmatically.
|
|
16
|
+
*
|
|
17
|
+
* Content in the default slot is kept `display:none` until consent is granted,
|
|
18
|
+
* so iframes with `loading="lazy"` will not make network requests beforehand.
|
|
19
|
+
*
|
|
20
|
+
* @fires consent-accepted - Fired when consent is granted
|
|
21
|
+
*
|
|
22
|
+
* @slot placeholder - Shown before consent. Put your prompt UI here. Mark your
|
|
23
|
+
* accept button with `data-consent-accept`.
|
|
24
|
+
* @slot (default) - The content to reveal after consent (e.g. an iframe).
|
|
25
|
+
*
|
|
26
|
+
* @csspart placeholder - Wrapper around the placeholder slot
|
|
27
|
+
* @csspart content - Wrapper around the default slot
|
|
28
|
+
*/
|
|
29
|
+
let ConsentGuard = class ConsentGuard extends UIBitElement {
|
|
30
|
+
constructor() {
|
|
31
|
+
super(...arguments);
|
|
32
|
+
this._consented = false;
|
|
33
|
+
}
|
|
34
|
+
static { this.styles = css `
|
|
35
|
+
:host {
|
|
36
|
+
display: block;
|
|
37
|
+
width: 100%;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.placeholder {
|
|
41
|
+
width: 100%;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.content {
|
|
45
|
+
display: none;
|
|
46
|
+
width: 100%;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:host([consented]) .placeholder {
|
|
50
|
+
display: none;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:host([consented]) .content {
|
|
54
|
+
display: block;
|
|
55
|
+
}
|
|
56
|
+
`; }
|
|
57
|
+
/** Programmatically grant consent. */
|
|
58
|
+
accept() {
|
|
59
|
+
if (this._consented)
|
|
60
|
+
return;
|
|
61
|
+
this._consented = true;
|
|
62
|
+
this.setAttribute('consented', '');
|
|
63
|
+
this.dispatchCustomEvent('consent-accepted');
|
|
64
|
+
}
|
|
65
|
+
_onPlaceholderClick(e) {
|
|
66
|
+
const path = e.composedPath();
|
|
67
|
+
if (path.some(el => el instanceof HTMLElement && el.hasAttribute('data-consent-accept'))) {
|
|
68
|
+
this.accept();
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
render() {
|
|
72
|
+
return html `
|
|
73
|
+
<div class="placeholder" part="placeholder" @click=${this._onPlaceholderClick}>
|
|
74
|
+
<slot name="placeholder"></slot>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="content" part="content">
|
|
77
|
+
<slot></slot>
|
|
78
|
+
</div>
|
|
79
|
+
`;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
__decorate([
|
|
83
|
+
state()
|
|
84
|
+
], ConsentGuard.prototype, "_consented", void 0);
|
|
85
|
+
ConsentGuard = __decorate([
|
|
86
|
+
customElement('uibit-consent-guard')
|
|
87
|
+
], ConsentGuard);
|
|
88
|
+
export { ConsentGuard };
|
|
89
|
+
export default ConsentGuard;
|
|
90
|
+
//# sourceMappingURL=consent-guard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"consent-guard.js","sourceRoot":"","sources":["../src/consent-guard.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,YAAY;IAAvC;;QAyBY,eAAU,GAAG,KAAK,CAAC;IA2BtC,CAAC;aAnDQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsBlB,AAtBY,CAsBX;IAIF,sCAAsC;IACtC,MAAM;QACJ,IAAI,IAAI,CAAC,UAAU;YAAE,OAAO;QAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;QACnC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;IAC/C,CAAC;IAEO,mBAAmB,CAAC,CAAQ;QAClC,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAe,CAAC;QAC3C,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,CAAC,YAAY,CAAC,qBAAqB,CAAC,CAAC,EAAE,CAAC;YACzF,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;2DAC4C,IAAI,CAAC,mBAAmB;;;;;;KAM9E,CAAC;IACJ,CAAC;CACF,CAAA;AA3BkB;IAAhB,KAAK,EAAE;gDAA4B;AAzBzB,YAAY;IADxB,aAAa,CAAC,qBAAqB,CAAC;GACxB,YAAY,CAoDxB;;AAED,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Component, ChangeDetectionStrategy, ElementRef, output } from '@angular/core';
|
|
2
|
+
import '@uibit/consent-guard';
|
|
3
|
+
import type { ConsentGuard as HTMLElementClass } from '@uibit/consent-guard';
|
|
4
|
+
|
|
5
|
+
@Component({
|
|
6
|
+
selector: 'uibit-consent-guard',
|
|
7
|
+
template: '<ng-content></ng-content>',
|
|
8
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
9
|
+
standalone: true,
|
|
10
|
+
host: {
|
|
11
|
+
'(consent-accepted)': 'consentAccepted.emit($event)'
|
|
12
|
+
}
|
|
13
|
+
})
|
|
14
|
+
export class NgxConsentGuard {
|
|
15
|
+
constructor(private el: ElementRef<HTMLElementClass>) {
|
|
16
|
+
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
readonly consentAccepted = output<CustomEvent<any>>();
|
|
20
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ConsentGuard as HTMLElementClass } from '@uibit/consent-guard';
|
|
2
|
+
import '@uibit/consent-guard';
|
|
3
|
+
|
|
4
|
+
declare global {
|
|
5
|
+
namespace astroHTML.JSX {
|
|
6
|
+
interface IntrinsicElements {
|
|
7
|
+
'uibit-consent-guard': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { JSX } from 'preact';
|
|
2
|
+
import type { ConsentGuard as HTMLElementClass } from '@uibit/consent-guard';
|
|
3
|
+
import '@uibit/consent-guard';
|
|
4
|
+
|
|
5
|
+
declare module 'preact' {
|
|
6
|
+
namespace JSX {
|
|
7
|
+
interface IntrinsicElements {
|
|
8
|
+
'uibit-consent-guard': JSX.HTMLAttributes<HTMLElementClass> & {
|
|
9
|
+
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { HTMLAttributes, ClassAttributes } from 'react';
|
|
2
|
+
import type { ConsentGuard as HTMLElementClass } from '@uibit/consent-guard';
|
|
3
|
+
import '@uibit/consent-guard';
|
|
4
|
+
|
|
5
|
+
declare global {
|
|
6
|
+
namespace React {
|
|
7
|
+
namespace JSX {
|
|
8
|
+
interface IntrinsicElements {
|
|
9
|
+
'uibit-consent-guard': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
class?: string;
|
|
12
|
+
|
|
13
|
+
onConsentAccepted?: (event: any) => void;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { JSX } from 'solid-js';
|
|
2
|
+
import type { ConsentGuard as HTMLElementClass } from '@uibit/consent-guard';
|
|
3
|
+
import '@uibit/consent-guard';
|
|
4
|
+
|
|
5
|
+
declare module 'solid-js' {
|
|
6
|
+
namespace JSX {
|
|
7
|
+
interface IntrinsicElements {
|
|
8
|
+
'uibit-consent-guard': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
|
|
9
|
+
|
|
10
|
+
"on:consent-accepted"?: (event: CustomEvent) => void;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ConsentGuard as HTMLElementClass } from '@uibit/consent-guard';
|
|
2
|
+
import '@uibit/consent-guard';
|
|
3
|
+
|
|
4
|
+
declare module '@stencil/core' {
|
|
5
|
+
export namespace JSX {
|
|
6
|
+
interface IntrinsicElements {
|
|
7
|
+
'uibit-consent-guard': HTMLElementClass & {
|
|
8
|
+
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import '@uibit/consent-guard';
|
|
3
|
+
import type { ConsentGuard as HTMLElementClass } from '@uibit/consent-guard';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
placeholder = undefined,
|
|
7
|
+
(default) = undefined,
|
|
8
|
+
children
|
|
9
|
+
} = $props<{
|
|
10
|
+
children?: any;
|
|
11
|
+
|
|
12
|
+
placeholder?: import('svelte').Snippet;
|
|
13
|
+
(default)?: import('svelte').Snippet;
|
|
14
|
+
}>();
|
|
15
|
+
|
|
16
|
+
let elementRef: HTMLElementClass | null = $state(null);
|
|
17
|
+
|
|
18
|
+
$effect(() => {
|
|
19
|
+
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<uibit-consent-guard bind:this={elementRef} {...$$restProps}>
|
|
25
|
+
{#if placeholder}
|
|
26
|
+
<div slot="placeholder">
|
|
27
|
+
{@render placeholder()}
|
|
28
|
+
</div>
|
|
29
|
+
{/if}
|
|
30
|
+
{#if (default)}
|
|
31
|
+
<div slot="(default)">
|
|
32
|
+
{@render (default)()}
|
|
33
|
+
</div>
|
|
34
|
+
{/if}
|
|
35
|
+
{#if children}
|
|
36
|
+
{@render children()}
|
|
37
|
+
{:else}
|
|
38
|
+
<slot />
|
|
39
|
+
{/if}
|
|
40
|
+
</uibit-consent-guard>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { defineComponent, h } from 'vue';
|
|
2
|
+
import type { ConsentGuard as HTMLElementClass } from '@uibit/consent-guard';
|
|
3
|
+
import '@uibit/consent-guard';
|
|
4
|
+
|
|
5
|
+
export const ConsentGuard = defineComponent({
|
|
6
|
+
name: 'ConsentGuard',
|
|
7
|
+
props: {
|
|
8
|
+
|
|
9
|
+
},
|
|
10
|
+
emits: ['consent-accepted'],
|
|
11
|
+
setup(props, { slots, emit }) {
|
|
12
|
+
return () => {
|
|
13
|
+
const eventListeners: Record<string, any> = {};
|
|
14
|
+
eventListeners['onConsent-accepted'] = (event: Event) => {
|
|
15
|
+
emit('consent-accepted', event);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
return h('uibit-consent-guard', {
|
|
19
|
+
...props,
|
|
20
|
+
...eventListeners
|
|
21
|
+
}, slots.default?.());
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
});
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type ConsentGuardClass from './consent-guard';
|
|
2
|
+
export interface ConsentGuardConfig {
|
|
3
|
+
title?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
placeholderImage?: string;
|
|
6
|
+
src?: string;
|
|
7
|
+
contentType?: 'iframe' | 'script';
|
|
8
|
+
autoHeight?: boolean;
|
|
9
|
+
height?: number | string;
|
|
10
|
+
acceptLabel?: string;
|
|
11
|
+
}
|
|
12
|
+
export interface ConsentGuard {
|
|
13
|
+
title: string;
|
|
14
|
+
description: string;
|
|
15
|
+
placeholderImage?: string;
|
|
16
|
+
src?: string;
|
|
17
|
+
contentType: 'iframe' | 'script';
|
|
18
|
+
autoHeight: boolean;
|
|
19
|
+
height: number | string;
|
|
20
|
+
acceptLabel: string;
|
|
21
|
+
isConsentGiven: boolean;
|
|
22
|
+
}
|
|
23
|
+
declare global {
|
|
24
|
+
interface HTMLElementTagNameMap {
|
|
25
|
+
'uibit-consent-guard': ConsentGuardClass;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,iBAAiB,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,iBAAiB,CAAC;KAC5C;CACA"}
|
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
|
package/package.json
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@uibit/consent-guard",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Gate any third-party content behind a consent prompt. The component manages show/hide state only — you provide both the placeholder UI and the content, keeping it composable and unbiased.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js"
|
|
12
|
+
},
|
|
13
|
+
"./consent-guard.css": "./dist/consent-guard.css",
|
|
14
|
+
"./custom-elements.json": "./custom-elements.json",
|
|
15
|
+
"./react": "./dist/frameworks/react/index.d.ts",
|
|
16
|
+
"./vue": "./dist/frameworks/vue/index.ts",
|
|
17
|
+
"./svelte": "./dist/frameworks/svelte/index.svelte",
|
|
18
|
+
"./angular": "./dist/frameworks/angular/index.ts",
|
|
19
|
+
"./solid": "./dist/frameworks/solid/index.d.ts",
|
|
20
|
+
"./astro": "./dist/frameworks/astro/index.astro",
|
|
21
|
+
"./qwik": "./dist/frameworks/qwik/index.tsx",
|
|
22
|
+
"./nuxt": "./dist/frameworks/nuxt/index.ts",
|
|
23
|
+
"./preact": "./dist/frameworks/preact/index.d.ts",
|
|
24
|
+
"./stencil": "./dist/frameworks/stencil/index.d.ts"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist",
|
|
28
|
+
"package.json",
|
|
29
|
+
"README.md",
|
|
30
|
+
"LICENSE",
|
|
31
|
+
"custom-elements.json"
|
|
32
|
+
],
|
|
33
|
+
"keywords": [
|
|
34
|
+
"consent",
|
|
35
|
+
"privacy",
|
|
36
|
+
"gdpr",
|
|
37
|
+
"cookie",
|
|
38
|
+
"iframe",
|
|
39
|
+
"web-component",
|
|
40
|
+
"lit"
|
|
41
|
+
],
|
|
42
|
+
"author": "Jonathan Rawlings",
|
|
43
|
+
"license": "MIT",
|
|
44
|
+
"repository": {
|
|
45
|
+
"type": "git",
|
|
46
|
+
"url": "https://github.com/Rawlings/uibit",
|
|
47
|
+
"directory": "packages/components/consent-guard"
|
|
48
|
+
},
|
|
49
|
+
"dependencies": {
|
|
50
|
+
"@uibit/core": "0.1.0"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@types/node": "^20.19.43",
|
|
54
|
+
"lit": "^3.3.3",
|
|
55
|
+
"typescript": "7.0.2",
|
|
56
|
+
"@uibit/codegen": "0.1.0"
|
|
57
|
+
},
|
|
58
|
+
"peerDependencies": {
|
|
59
|
+
"lit": "^3.0.0",
|
|
60
|
+
"react": ">=18",
|
|
61
|
+
"vue": ">=3",
|
|
62
|
+
"svelte": ">=4 || ^5",
|
|
63
|
+
"@angular/core": ">=14"
|
|
64
|
+
},
|
|
65
|
+
"customElements": "custom-elements.json",
|
|
66
|
+
"peerDependenciesMeta": {
|
|
67
|
+
"react": {
|
|
68
|
+
"optional": true
|
|
69
|
+
},
|
|
70
|
+
"vue": {
|
|
71
|
+
"optional": true
|
|
72
|
+
},
|
|
73
|
+
"svelte": {
|
|
74
|
+
"optional": true
|
|
75
|
+
},
|
|
76
|
+
"@angular/core": {
|
|
77
|
+
"optional": true
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
"uibit": {
|
|
81
|
+
"id": "consent-guard",
|
|
82
|
+
"title": "Consent Guard",
|
|
83
|
+
"category": "Media",
|
|
84
|
+
"tagName": "uibit-consent-guard"
|
|
85
|
+
},
|
|
86
|
+
"scripts": {
|
|
87
|
+
"build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
|
|
88
|
+
"dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
|
|
89
|
+
"analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
|
|
90
|
+
"typecheck": "tsc --noEmit"
|
|
91
|
+
}
|
|
92
|
+
}
|