@consentx/angular 1.0.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.
Files changed (33) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/LICENSE +21 -0
  3. package/README.md +221 -0
  4. package/assets/consentx-logo.svg +550 -0
  5. package/dist/LICENSE +21 -0
  6. package/dist/README.md +221 -0
  7. package/dist/assets/consentx-logo.svg +550 -0
  8. package/dist/esm2022/consentx-angular.mjs +5 -0
  9. package/dist/esm2022/lib/consentx.module.mjs +57 -0
  10. package/dist/esm2022/lib/consentx.providers.mjs +51 -0
  11. package/dist/esm2022/lib/consentx.service.mjs +230 -0
  12. package/dist/esm2022/lib/consentx.tokens.mjs +7 -0
  13. package/dist/esm2022/lib/consentx.types.mjs +11 -0
  14. package/dist/esm2022/public-api.mjs +9 -0
  15. package/dist/fesm2022/consentx-angular.mjs +358 -0
  16. package/dist/fesm2022/consentx-angular.mjs.map +1 -0
  17. package/dist/index.d.ts +5 -0
  18. package/dist/lib/consentx.module.d.ts +39 -0
  19. package/dist/lib/consentx.providers.d.ts +26 -0
  20. package/dist/lib/consentx.service.d.ts +71 -0
  21. package/dist/lib/consentx.tokens.d.ts +7 -0
  22. package/dist/lib/consentx.types.d.ts +82 -0
  23. package/dist/public-api.d.ts +5 -0
  24. package/ng-package.json +10 -0
  25. package/package.json +53 -0
  26. package/src/index.ts +1 -0
  27. package/src/lib/consentx.module.ts +53 -0
  28. package/src/lib/consentx.providers.ts +60 -0
  29. package/src/lib/consentx.service.ts +262 -0
  30. package/src/lib/consentx.tokens.ts +8 -0
  31. package/src/lib/consentx.types.ts +93 -0
  32. package/src/public-api.ts +20 -0
  33. package/tsconfig.json +32 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,22 @@
1
+ # Changelog
2
+
3
+ All notable changes to `@consentx/angular` are documented here. This project
4
+ adheres to [Semantic Versioning](https://semver.org/).
5
+
6
+ ## [1.0.0] - 2026-06-20
7
+
8
+ ### Added
9
+ - `ConsentXModule.forRoot({ siteKey, appUrl?, consentMode?, manualLoad? })` for
10
+ NgModule applications.
11
+ - `provideConsentX(config)` for standalone (`bootstrapApplication`) apps.
12
+ - `ConsentXService` that injects the ConsentX embed
13
+ (`https://app.consentx.io/api/SITE_KEY/embed.js`) into `<head>` on app init
14
+ and exposes consent state from the widget's `cx:consent` event.
15
+ - `state$`, `granted$` observables; `getState()`, `getGranted()`,
16
+ `hasConsent(slug)` synchronous accessors.
17
+ - `load()` (idempotent manual injection) and `openPreferences()`.
18
+ - Optional Google Consent Mode v2 denied-by-default stub via `consentMode: true`.
19
+ - SSR-safe: all DOM access guarded behind `isPlatformBrowser`; embed injected
20
+ after the app boots in the browser.
21
+ - Configurable app host via `appUrl` (default `https://app.consentx.io`).
22
+ - Ships with the ConsentX brand mark in `assets/`.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 ConsentX
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,221 @@
1
+ <p align="left">
2
+ <img src="./assets/consentx-logo.svg" alt="ConsentX" height="56" />
3
+ </p>
4
+
5
+ # @consentx/angular
6
+
7
+ **Cookie consent & CMP for Angular — GDPR, CCPA, DPDPA.**
8
+
9
+ Drop ConsentX into any Angular app. The package injects the ConsentX embed into
10
+ `<head>` on app init and gives you a service to read the visitor's consent state
11
+ reactively. No backend, no redirect handshake — you supply your **Site Key** and
12
+ the banner installs itself.
13
+
14
+ - Renders the ConsentX banner (the widget appends `#consentx-cookie-consent` to
15
+ `document.body` and reads geo/config from the server).
16
+ - Exposes consent decisions via the `cx:consent` event as Angular observables.
17
+ - Optional Google Consent Mode v2 denied-by-default defaults.
18
+ - SSR-safe (Angular Universal): no-op on the server, injects after browser boot.
19
+ - Works with both NgModule and standalone (`bootstrapApplication`) apps.
20
+
21
+ ---
22
+
23
+ ## How connect works (site-key model)
24
+
25
+ ConsentX for Angular uses the **site-key model** (Model C in the ConsentX
26
+ Connect spec). There is no server-side OAuth-style redirect:
27
+
28
+ 1. In the [ConsentX dashboard](https://app.consentx.io) go to **Websites → your
29
+ site** and **copy the Site Key**.
30
+ 2. Make sure your site's domain is on that website's **allowlist** (the
31
+ dashboard "Add website" flow handles this).
32
+ 3. Pass the Site Key to `ConsentXModule.forRoot()` / `provideConsentX()`.
33
+
34
+ That's it — the embed (`https://app.consentx.io/api/SITE_KEY/embed.js`) loads on
35
+ app init and the banner appears.
36
+
37
+ ---
38
+
39
+ ## Install
40
+
41
+ ```bash
42
+ npm install @consentx/angular
43
+ # or
44
+ yarn add @consentx/angular
45
+ # or
46
+ pnpm add @consentx/angular
47
+ ```
48
+
49
+ **Peer dependencies:** `@angular/core`, `@angular/common` (>= 15), `rxjs` (>= 7).
50
+
51
+ ---
52
+
53
+ ## Usage
54
+
55
+ ### Standalone apps (`bootstrapApplication`)
56
+
57
+ ```ts
58
+ // main.ts
59
+ import { bootstrapApplication } from '@angular/platform-browser';
60
+ import { provideConsentX } from '@consentx/angular';
61
+ import { AppComponent } from './app/app.component';
62
+
63
+ bootstrapApplication(AppComponent, {
64
+ providers: [
65
+ provideConsentX({ siteKey: 'YOUR_SITE_KEY' }),
66
+ ],
67
+ });
68
+ ```
69
+
70
+ ### NgModule apps
71
+
72
+ ```ts
73
+ // app.module.ts
74
+ import { NgModule } from '@angular/core';
75
+ import { BrowserModule } from '@angular/platform-browser';
76
+ import { ConsentXModule } from '@consentx/angular';
77
+ import { AppComponent } from './app.component';
78
+
79
+ @NgModule({
80
+ imports: [
81
+ BrowserModule,
82
+ ConsentXModule.forRoot({ siteKey: 'YOUR_SITE_KEY' }),
83
+ ],
84
+ declarations: [AppComponent],
85
+ bootstrap: [AppComponent],
86
+ })
87
+ export class AppModule {}
88
+ ```
89
+
90
+ The embed is injected automatically on app init. There is no component to add to
91
+ your template — the ConsentX widget mounts itself into `#consentx-cookie-consent`
92
+ on `document.body`.
93
+
94
+ ---
95
+
96
+ ## Reading consent state
97
+
98
+ Inject `ConsentXService` anywhere and react to the visitor's choice:
99
+
100
+ ```ts
101
+ import { Component } from '@angular/core';
102
+ import { AsyncPipe, NgIf } from '@angular/common';
103
+ import { ConsentXService } from '@consentx/angular';
104
+
105
+ @Component({
106
+ selector: 'app-analytics',
107
+ standalone: true,
108
+ imports: [AsyncPipe, NgIf],
109
+ template: `
110
+ <div *ngIf="analyticsAllowed$ | async">
111
+ <!-- analytics-dependent UI -->
112
+ </div>
113
+ <button (click)="consentx.openPreferences()">Cookie settings</button>
114
+ `,
115
+ })
116
+ export class AnalyticsComponent {
117
+ // Stream of granted category slugs, e.g. ['analytics', 'marketing'].
118
+ readonly granted$ = this.consentx.granted$;
119
+
120
+ readonly analyticsAllowed$ = this.consentx.state$;
121
+
122
+ constructor(public consentx: ConsentXService) {
123
+ this.consentx.granted$.subscribe((granted) => {
124
+ if (granted.includes('analytics')) {
125
+ // load your analytics SDK here
126
+ }
127
+ });
128
+ }
129
+ }
130
+ ```
131
+
132
+ Synchronous accessors are available too:
133
+
134
+ ```ts
135
+ this.consentx.hasConsent('analytics'); // boolean
136
+ this.consentx.getGranted(); // string[]
137
+ this.consentx.getState(); // { loaded, decided, granted, detail }
138
+ ```
139
+
140
+ ---
141
+
142
+ ## Configuration
143
+
144
+ `provideConsentX(config)` and `ConsentXModule.forRoot(config)` accept:
145
+
146
+ | Option | Type | Default | Description |
147
+ | ------------- | --------- | --------------------------- | -------------------------------------------------------------------------------------------- |
148
+ | `siteKey` | `string` | — (required) | Your ConsentX Site Key (dashboard → Websites → your site). |
149
+ | `appUrl` | `string` | `https://app.consentx.io` | Override the ConsentX app host (e.g. staging). |
150
+ | `consentMode` | `boolean` | `false` | Print the Google Consent Mode v2 denied-by-default stub before any analytics tag fires. |
151
+ | `manualLoad` | `boolean` | `false` | Skip auto-injection on init; call `consentx.load()` yourself at a custom point. |
152
+
153
+ ### Google Consent Mode v2
154
+
155
+ ```ts
156
+ provideConsentX({ siteKey: 'YOUR_SITE_KEY', consentMode: true });
157
+ ```
158
+
159
+ The denied-by-default defaults are pushed to `dataLayer` before the embed loads.
160
+ The ConsentX widget then emits the `gtag('consent','update',…)` calls on the
161
+ visitor's choice.
162
+
163
+ ### Staging / self-hosted host
164
+
165
+ ```ts
166
+ provideConsentX({
167
+ siteKey: 'YOUR_SITE_KEY',
168
+ appUrl: 'https://consentx1.satyamrastogi.com',
169
+ });
170
+ ```
171
+
172
+ ### Manual / deferred load
173
+
174
+ ```ts
175
+ provideConsentX({ siteKey: 'YOUR_SITE_KEY', manualLoad: true });
176
+ // ...later, e.g. inside a route guard or after consent UX is mounted:
177
+ this.consentx.load();
178
+ ```
179
+
180
+ ---
181
+
182
+ ## Service API
183
+
184
+ | Member | Returns | Description |
185
+ | ---------------------------- | ---------------------- | ------------------------------------------------------------------ |
186
+ | `state$` | `Observable<State>` | Full consent state stream. |
187
+ | `granted$` | `Observable<string[]>` | Granted category slugs (distinct). |
188
+ | `getState()` | `ConsentXState` | Synchronous full snapshot. |
189
+ | `getGranted()` | `string[]` | Synchronous granted slugs. |
190
+ | `hasConsent(slug)` | `boolean` | Whether a given category is granted. |
191
+ | `load()` | `void` | Inject the embed (idempotent). |
192
+ | `openPreferences()` | `boolean` | Re-open the ConsentX preferences dialog (`window.ConsentX.open`). |
193
+
194
+ `ConsentXState` is `{ loaded, decided, granted, detail }`.
195
+
196
+ ---
197
+
198
+ ## SSR (Angular Universal)
199
+
200
+ The service guards every DOM call behind `isPlatformBrowser`, so on the server
201
+ it is a no-op. The embed is injected via `APP_INITIALIZER`, which runs after the
202
+ app boots in the browser — the SPA-safe load point that prevents Angular's DOM
203
+ reconciliation from stripping the appended `#consentx-cookie-consent` div.
204
+
205
+ ---
206
+
207
+ ## Build
208
+
209
+ ```bash
210
+ npm install
211
+ npm run build # ng-packagr → ./dist
212
+ ```
213
+
214
+ The build produces an Angular Package Format (APF) distributable in `dist/`,
215
+ publishable to npm.
216
+
217
+ ---
218
+
219
+ ## License
220
+
221
+ MIT © [ConsentX](https://consentx.io)