@mattfishcodes/cookie-consent 1.2.3
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/consent.iife.js +161 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +161 -0
- package/dist/src/ConsentProvider.d.ts +3 -0
- package/dist/src/api.d.ts +1 -0
- package/dist/src/gtm.d.ts +4 -0
- package/dist/src/init.d.ts +3 -0
- package/dist/src/shadow-ui.d.ts +1 -0
- package/dist/src/state.d.ts +10 -0
- package/package.json +38 -0
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use strict";(()=>{function m(){gtag("consent","default",{analytics_storage:"denied",ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied"})}function r(t){gtag("consent","update",{analytics_storage:t.analytics?"granted":"denied",ad_storage:t.marketing?"granted":"denied",ad_user_data:t.marketing?"granted":"denied",ad_personalization:t.marketing?"granted":"denied"})}function o(t){try{return JSON.parse(localStorage.getItem(t))}catch{return null}}function w(t,e){localStorage.setItem(e,JSON.stringify(t))}function i(t,e){w(t,e),r(t),window.dispatchEvent(new CustomEvent("consent:change",{detail:t}))}var n="site_consent_v1";function s({gtmId:t}){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"gtm.js","gtm.start":Date.now()});let e=document.createElement("script");e.async=!0,e.id="google-tag-manager",e.src=`https://www.googletagmanager.com/gtm.js?id=${t}`,document.head.append(e),window.__gtmLoaded=!0}var u=`#banner {
|
|
2
|
+
background-color: white;
|
|
3
|
+
border: 1px solid var(--cc-accent, oklch(0.85 0 0));
|
|
4
|
+
border-radius: calc(0.625rem - 2px);
|
|
5
|
+
max-width: 25%;
|
|
6
|
+
position: fixed;
|
|
7
|
+
bottom: 2rem;
|
|
8
|
+
right: 2rem;
|
|
9
|
+
padding: 1rem 2rem 2rem 2rem;
|
|
10
|
+
opacity: 0;
|
|
11
|
+
pointer-events: none;
|
|
12
|
+
transform: translateY(300px);
|
|
13
|
+
|
|
14
|
+
font-family:
|
|
15
|
+
system-ui,
|
|
16
|
+
-apple-system,
|
|
17
|
+
BlinkMacSystemFont,
|
|
18
|
+
"Segoe UI",
|
|
19
|
+
Roboto,
|
|
20
|
+
Oxygen,
|
|
21
|
+
Ubuntu,
|
|
22
|
+
Cantarell,
|
|
23
|
+
"Open Sans",
|
|
24
|
+
"Helvetica Neue",
|
|
25
|
+
sans-serif;
|
|
26
|
+
|
|
27
|
+
transition: all 500ms ease-in-out;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
#banner.visible {
|
|
31
|
+
opacity: 1;
|
|
32
|
+
pointer-events: auto;
|
|
33
|
+
transform: translateY(0);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
#heading {
|
|
37
|
+
display: flex;
|
|
38
|
+
justify-content: space-between;
|
|
39
|
+
align-items: start;
|
|
40
|
+
margin-bottom: 1rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
#cookie-icon {
|
|
44
|
+
width: 4rem;
|
|
45
|
+
height: 4rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
#content {
|
|
49
|
+
margin-bottom: 1rem;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
p {
|
|
53
|
+
margin: 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
button {
|
|
57
|
+
background-color: white;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
display: inline-flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
gap: 0.5rem;
|
|
63
|
+
border-radius: calc(0.625rem - 2px);
|
|
64
|
+
outline: none;
|
|
65
|
+
font-size: 14px;
|
|
66
|
+
border: none;
|
|
67
|
+
|
|
68
|
+
transition: all 300ms ease-in-out;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
button[data-close] {
|
|
72
|
+
color: black;
|
|
73
|
+
width: 36px;
|
|
74
|
+
height: 36px;
|
|
75
|
+
|
|
76
|
+
&:hover {
|
|
77
|
+
color: color-mix(in oklch, black 60%, transparent);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
button[data-accept] {
|
|
82
|
+
margin-bottom: 0.5rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
button[data-accept],
|
|
86
|
+
button[data-reject] {
|
|
87
|
+
padding: 0.5rem 1rem;
|
|
88
|
+
background-color: var(--cc-background, black);
|
|
89
|
+
color: var(--cc-foreground, white);
|
|
90
|
+
border: none;
|
|
91
|
+
width: 100%;
|
|
92
|
+
|
|
93
|
+
&:hover {
|
|
94
|
+
background-color: color-mix(
|
|
95
|
+
in oklch,
|
|
96
|
+
var(--cc-background, black) 90%,
|
|
97
|
+
transparent
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@media (max-width: 768px) {
|
|
103
|
+
#banner {
|
|
104
|
+
left: 2rem;
|
|
105
|
+
max-width: none;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
`;function a(){let t=document.createElement("div"),e=t.attachShadow({mode:"open"});e.innerHTML=`
|
|
109
|
+
<style>
|
|
110
|
+
${u}
|
|
111
|
+
</style>
|
|
112
|
+
<div id="banner">
|
|
113
|
+
<div id="heading">
|
|
114
|
+
<svg
|
|
115
|
+
id="cookie-icon"
|
|
116
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
117
|
+
width="24"
|
|
118
|
+
height="24"
|
|
119
|
+
viewBox="0 0 24 24"
|
|
120
|
+
fill="none"
|
|
121
|
+
stroke="currentColor"
|
|
122
|
+
stroke-width="2"
|
|
123
|
+
stroke-linecap="round"
|
|
124
|
+
stroke-linejoin="round"
|
|
125
|
+
>
|
|
126
|
+
<path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" />
|
|
127
|
+
<path d="M8.5 8.5v.01" />
|
|
128
|
+
<path d="M16 15.5v.01" />
|
|
129
|
+
<path d="M12 12v.01" />
|
|
130
|
+
<path d="M11 17v.01" />
|
|
131
|
+
<path d="M7 14v.01" />
|
|
132
|
+
</svg>
|
|
133
|
+
<button data-close>
|
|
134
|
+
<svg
|
|
135
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
136
|
+
width="24"
|
|
137
|
+
height="24"
|
|
138
|
+
viewBox="0 0 24 24"
|
|
139
|
+
fill="none"
|
|
140
|
+
stroke="currentColor"
|
|
141
|
+
stroke-width="2"
|
|
142
|
+
stroke-linecap="round"
|
|
143
|
+
stroke-linejoin="round"
|
|
144
|
+
>
|
|
145
|
+
<path d="M18 6 6 18"></path>
|
|
146
|
+
<path d="m6 6 12 12"></path>
|
|
147
|
+
</svg>
|
|
148
|
+
</button>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<div id="content">
|
|
152
|
+
<p>
|
|
153
|
+
We use cookies for analytics to improve this site. You can accept or
|
|
154
|
+
reject analytics cookies.
|
|
155
|
+
</p>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<button data-accept>Accept</button>
|
|
159
|
+
<button data-reject>Reject</button>
|
|
160
|
+
</div>
|
|
161
|
+
`;let d=e.querySelector("[data-close]");d&&(d.onclick=()=>{e.querySelector("#banner")?.classList.remove("visible")});let l=e.querySelector("[data-accept]");l&&(l.onclick=()=>{window.cookieConsent.acceptAnalytics(),e.querySelector("#banner")?.classList.remove("visible")});let p=e.querySelector("[data-reject]");p&&(p.onclick=()=>{window.cookieConsent.rejectAll(),e.querySelector("#banner")?.classList.remove("visible")}),document.body.appendChild(t),setTimeout(()=>{e.querySelector("#banner")?.classList.add("visible")},300)}function c(){window.cookieConsent={getState(){return o(n)},acceptAnalytics(){i({analytics:!0,marketing:!1},n)},rejectAll(){i({analytics:!1,marketing:!1},n)},open(){a()}}}function g({gtmId:t}){if(t===void 0){console.error("Must provide a Google Tag Manager id");return}window.dataLayer=window.dataLayer||[],window.gtag=function(){dataLayer.push(arguments)},m(),s({gtmId:t});let e=o(n);e?r(e):a(),c()}var f=document.currentScript;window.onload=()=>{g({gtmId:f?.dataset.gtm})};})();
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use client";function m(){gtag("consent","default",{analytics_storage:"denied",ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied"})}function a(e){gtag("consent","update",{analytics_storage:e.analytics?"granted":"denied",ad_storage:e.marketing?"granted":"denied",ad_user_data:e.marketing?"granted":"denied",ad_personalization:e.marketing?"granted":"denied"})}function o(e){try{return JSON.parse(localStorage.getItem(e))}catch{return null}}function w(e,t){localStorage.setItem(t,JSON.stringify(e))}function i(e,t){w(e,t),a(e),window.dispatchEvent(new CustomEvent("consent:change",{detail:e}))}var n="site_consent_v1";function s({gtmId:e}){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"gtm.js","gtm.start":Date.now()});let t=document.createElement("script");t.async=!0,t.id="google-tag-manager",t.src=`https://www.googletagmanager.com/gtm.js?id=${e}`,document.head.append(t),window.__gtmLoaded=!0}var g=`#banner {
|
|
2
|
+
background-color: white;
|
|
3
|
+
border: 1px solid var(--cc-accent, oklch(0.85 0 0));
|
|
4
|
+
border-radius: calc(0.625rem - 2px);
|
|
5
|
+
max-width: 25%;
|
|
6
|
+
position: fixed;
|
|
7
|
+
bottom: 2rem;
|
|
8
|
+
right: 2rem;
|
|
9
|
+
padding: 1rem 2rem 2rem 2rem;
|
|
10
|
+
opacity: 0;
|
|
11
|
+
pointer-events: none;
|
|
12
|
+
transform: translateY(300px);
|
|
13
|
+
|
|
14
|
+
font-family:
|
|
15
|
+
system-ui,
|
|
16
|
+
-apple-system,
|
|
17
|
+
BlinkMacSystemFont,
|
|
18
|
+
"Segoe UI",
|
|
19
|
+
Roboto,
|
|
20
|
+
Oxygen,
|
|
21
|
+
Ubuntu,
|
|
22
|
+
Cantarell,
|
|
23
|
+
"Open Sans",
|
|
24
|
+
"Helvetica Neue",
|
|
25
|
+
sans-serif;
|
|
26
|
+
|
|
27
|
+
transition: all 500ms ease-in-out;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
#banner.visible {
|
|
31
|
+
opacity: 1;
|
|
32
|
+
pointer-events: auto;
|
|
33
|
+
transform: translateY(0);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
#heading {
|
|
37
|
+
display: flex;
|
|
38
|
+
justify-content: space-between;
|
|
39
|
+
align-items: start;
|
|
40
|
+
margin-bottom: 1rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
#cookie-icon {
|
|
44
|
+
width: 4rem;
|
|
45
|
+
height: 4rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
#content {
|
|
49
|
+
margin-bottom: 1rem;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
p {
|
|
53
|
+
margin: 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
button {
|
|
57
|
+
background-color: white;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
display: inline-flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
gap: 0.5rem;
|
|
63
|
+
border-radius: calc(0.625rem - 2px);
|
|
64
|
+
outline: none;
|
|
65
|
+
font-size: 14px;
|
|
66
|
+
border: none;
|
|
67
|
+
|
|
68
|
+
transition: all 300ms ease-in-out;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
button[data-close] {
|
|
72
|
+
color: black;
|
|
73
|
+
width: 36px;
|
|
74
|
+
height: 36px;
|
|
75
|
+
|
|
76
|
+
&:hover {
|
|
77
|
+
color: color-mix(in oklch, black 60%, transparent);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
button[data-accept] {
|
|
82
|
+
margin-bottom: 0.5rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
button[data-accept],
|
|
86
|
+
button[data-reject] {
|
|
87
|
+
padding: 0.5rem 1rem;
|
|
88
|
+
background-color: var(--cc-background, black);
|
|
89
|
+
color: var(--cc-foreground, white);
|
|
90
|
+
border: none;
|
|
91
|
+
width: 100%;
|
|
92
|
+
|
|
93
|
+
&:hover {
|
|
94
|
+
background-color: color-mix(
|
|
95
|
+
in oklch,
|
|
96
|
+
var(--cc-background, black) 90%,
|
|
97
|
+
transparent
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@media (max-width: 768px) {
|
|
103
|
+
#banner {
|
|
104
|
+
left: 2rem;
|
|
105
|
+
max-width: none;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
`;function r(){let e=document.createElement("div"),t=e.attachShadow({mode:"open"});t.innerHTML=`
|
|
109
|
+
<style>
|
|
110
|
+
${g}
|
|
111
|
+
</style>
|
|
112
|
+
<div id="banner">
|
|
113
|
+
<div id="heading">
|
|
114
|
+
<svg
|
|
115
|
+
id="cookie-icon"
|
|
116
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
117
|
+
width="24"
|
|
118
|
+
height="24"
|
|
119
|
+
viewBox="0 0 24 24"
|
|
120
|
+
fill="none"
|
|
121
|
+
stroke="currentColor"
|
|
122
|
+
stroke-width="2"
|
|
123
|
+
stroke-linecap="round"
|
|
124
|
+
stroke-linejoin="round"
|
|
125
|
+
>
|
|
126
|
+
<path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" />
|
|
127
|
+
<path d="M8.5 8.5v.01" />
|
|
128
|
+
<path d="M16 15.5v.01" />
|
|
129
|
+
<path d="M12 12v.01" />
|
|
130
|
+
<path d="M11 17v.01" />
|
|
131
|
+
<path d="M7 14v.01" />
|
|
132
|
+
</svg>
|
|
133
|
+
<button data-close>
|
|
134
|
+
<svg
|
|
135
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
136
|
+
width="24"
|
|
137
|
+
height="24"
|
|
138
|
+
viewBox="0 0 24 24"
|
|
139
|
+
fill="none"
|
|
140
|
+
stroke="currentColor"
|
|
141
|
+
stroke-width="2"
|
|
142
|
+
stroke-linecap="round"
|
|
143
|
+
stroke-linejoin="round"
|
|
144
|
+
>
|
|
145
|
+
<path d="M18 6 6 18"></path>
|
|
146
|
+
<path d="m6 6 12 12"></path>
|
|
147
|
+
</svg>
|
|
148
|
+
</button>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<div id="content">
|
|
152
|
+
<p>
|
|
153
|
+
We use cookies for analytics to improve this site. You can accept or
|
|
154
|
+
reject analytics cookies.
|
|
155
|
+
</p>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<button data-accept>Accept</button>
|
|
159
|
+
<button data-reject>Reject</button>
|
|
160
|
+
</div>
|
|
161
|
+
`;let l=t.querySelector("[data-close]");l&&(l.onclick=()=>{t.querySelector("#banner")?.classList.remove("visible")});let p=t.querySelector("[data-accept]");p&&(p.onclick=()=>{window.cookieConsent.acceptAnalytics(),t.querySelector("#banner")?.classList.remove("visible")});let u=t.querySelector("[data-reject]");u&&(u.onclick=()=>{window.cookieConsent.rejectAll(),t.querySelector("#banner")?.classList.remove("visible")}),document.body.appendChild(e),setTimeout(()=>{t.querySelector("#banner")?.classList.add("visible")},300)}function c(){window.cookieConsent={getState(){return o(n)},acceptAnalytics(){i({analytics:!0,marketing:!1},n)},rejectAll(){i({analytics:!1,marketing:!1},n)},open(){r()}}}function f({gtmId:e}){if(e===void 0){console.error("Must provide a Google Tag Manager id");return}window.dataLayer=window.dataLayer||[],window.gtag=function(){dataLayer.push(arguments)},m(),s({gtmId:e});let t=o(n);t?a(t):r(),c()}import{useEffect as b}from"react";function d({gtmId:e}){return b(()=>{e!==void 0&&f({gtmId:e})},[]),null}var P=d;export{P as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function exposePublicAPI(): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function createBanner(): void;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type Consent = {
|
|
2
|
+
analytics: boolean;
|
|
3
|
+
marketing: boolean;
|
|
4
|
+
};
|
|
5
|
+
export declare function setDefaultConsent(): void;
|
|
6
|
+
export declare function updateConsent(consent: Consent): void;
|
|
7
|
+
export declare function getStoredConsent(consentKey: string): any;
|
|
8
|
+
export declare function storeConsent(consent: Consent, consentKey: string): void;
|
|
9
|
+
export declare function saveAndApply(consent: Consent, consentKey: string): void;
|
|
10
|
+
export {};
|
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mattfishcodes/cookie-consent",
|
|
3
|
+
"version": "1.2.3",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"import": "./dist/index.js"
|
|
9
|
+
},
|
|
10
|
+
"./iife": {
|
|
11
|
+
"import": "./dist/consent.iife.js"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build:iife": "esbuild iife.ts --bundle --minify --format=iife --loader:.css=text --outfile=dist/consent.iife.js",
|
|
19
|
+
"build:esm": "esbuild index.ts --bundle --minify --format=esm --external:react --external:react-dom --loader:.css=text --outfile=dist/index.js",
|
|
20
|
+
"build:types": "tsc",
|
|
21
|
+
"build": "rm -rf dist && pnpm build:iife && pnpm build:esm && pnpm build:types"
|
|
22
|
+
},
|
|
23
|
+
"packageManager": "pnpm@10.28.2",
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@types/node": "^25.2.0",
|
|
26
|
+
"@types/react": "^19.2.11",
|
|
27
|
+
"@types/react-dom": "^19.2.3",
|
|
28
|
+
"esbuild": "^0.27.2",
|
|
29
|
+
"husky": "^9.1.7",
|
|
30
|
+
"react": "^19.2.4",
|
|
31
|
+
"react-dom": "^19.2.4",
|
|
32
|
+
"typescript": "^5.9.3"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": ">=18",
|
|
36
|
+
"react-dom": ">=18"
|
|
37
|
+
}
|
|
38
|
+
}
|