angular-fireworks 4.1.3 → 4.2.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/README.md
CHANGED
|
@@ -38,6 +38,12 @@ export class AppModule {}
|
|
|
38
38
|
<ngx-fireworks [id]="id" [options]="fireworksOptions"></ngx-fireworks>
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
+
The component reactively updates when `id` or `options` inputs change — the previous fireworks instance is stopped and a new one is started automatically.
|
|
42
|
+
|
|
43
|
+
### Lifecycle
|
|
44
|
+
|
|
45
|
+
On component destroy (`ngOnDestroy`), the fireworks instance is stopped and cleaned up. A `#destroyed` flag prevents change detection from restarting fireworks after teardown.
|
|
46
|
+
|
|
41
47
|
### Component usage
|
|
42
48
|
|
|
43
49
|
```ts
|
|
@@ -5,26 +5,44 @@ import { fireworks } from '@tsparticles/fireworks';
|
|
|
5
5
|
|
|
6
6
|
class NgxFireworksComponent {
|
|
7
7
|
#fireworksInstance;
|
|
8
|
+
#destroyed;
|
|
8
9
|
constructor(platformId) {
|
|
9
10
|
this.platformId = platformId;
|
|
10
11
|
this.id = "tsparticles";
|
|
12
|
+
this.#destroyed = false;
|
|
11
13
|
}
|
|
12
14
|
ngAfterViewInit() {
|
|
13
15
|
if (isPlatformServer(this.platformId)) {
|
|
14
16
|
return;
|
|
15
17
|
}
|
|
16
|
-
void
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
void this.#startFireworks();
|
|
19
|
+
}
|
|
20
|
+
ngOnChanges(changes) {
|
|
21
|
+
if (isPlatformServer(this.platformId)) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
if (this.#destroyed) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
if (changes["options"] || changes["id"]) {
|
|
28
|
+
void this.#startFireworks();
|
|
29
|
+
}
|
|
19
30
|
}
|
|
20
31
|
ngOnDestroy() {
|
|
21
|
-
this.#
|
|
32
|
+
this.#destroyed = true;
|
|
33
|
+
this.#fireworksInstance?.destroy();
|
|
22
34
|
this.#fireworksInstance = undefined;
|
|
23
35
|
}
|
|
24
|
-
|
|
25
|
-
|
|
36
|
+
async #startFireworks() {
|
|
37
|
+
this.#fireworksInstance?.destroy();
|
|
38
|
+
this.#fireworksInstance = undefined;
|
|
39
|
+
this.#fireworksInstance = await fireworks(this.id, this.options);
|
|
40
|
+
this.#fireworksInstance?.play();
|
|
41
|
+
}
|
|
42
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxFireworksComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
43
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: NgxFireworksComponent, isStandalone: false, selector: "ngx-fireworks", inputs: { options: "options", id: "id" }, usesOnChanges: true, ngImport: i0, template: ` <div [id]="id"></div>`, isInline: true }); }
|
|
26
44
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxFireworksComponent, decorators: [{
|
|
28
46
|
type: Component,
|
|
29
47
|
args: [{ selector: "ngx-fireworks", standalone: false, template: ` <div [id]="id"></div>` }]
|
|
30
48
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -37,18 +55,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
37
55
|
}] } });
|
|
38
56
|
|
|
39
57
|
class NgxFireworksModule {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
58
|
+
constructor() {
|
|
59
|
+
/* Register fireworks plugins before tsParticles.init() is called */
|
|
60
|
+
void fireworks.init();
|
|
61
|
+
}
|
|
62
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxFireworksModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
63
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: NgxFireworksModule, declarations: [NgxFireworksComponent], exports: [NgxFireworksComponent] }); }
|
|
64
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxFireworksModule }); }
|
|
43
65
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxFireworksModule, decorators: [{
|
|
45
67
|
type: NgModule,
|
|
46
68
|
args: [{
|
|
47
69
|
declarations: [NgxFireworksComponent],
|
|
48
70
|
imports: [],
|
|
49
71
|
exports: [NgxFireworksComponent],
|
|
50
72
|
}]
|
|
51
|
-
}] });
|
|
73
|
+
}], ctorParameters: () => [] });
|
|
52
74
|
|
|
53
75
|
/*
|
|
54
76
|
* Public API Surface of ng-fireworks
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"angular-fireworks.mjs","sources":["../../../projects/ng-fireworks/src/lib/ng-fireworks.component.ts","../../../projects/ng-fireworks/src/lib/ng-fireworks.module.ts","../../../projects/ng-fireworks/src/public-api.ts","../../../projects/ng-fireworks/src/angular-fireworks.ts"],"sourcesContent":["import { isPlatformServer } from \"@angular/common\";\nimport {
|
|
1
|
+
{"version":3,"file":"angular-fireworks.mjs","sources":["../../../projects/ng-fireworks/src/lib/ng-fireworks.component.ts","../../../projects/ng-fireworks/src/lib/ng-fireworks.module.ts","../../../projects/ng-fireworks/src/public-api.ts","../../../projects/ng-fireworks/src/angular-fireworks.ts"],"sourcesContent":["import { isPlatformServer } from \"@angular/common\";\nimport {\n AfterViewInit,\n Component,\n Inject,\n Input,\n OnChanges,\n OnDestroy,\n PLATFORM_ID,\n SimpleChanges,\n} from \"@angular/core\";\nimport { FireworkOptions, fireworks } from \"@tsparticles/fireworks\";\n\n@Component({\n selector: \"ngx-fireworks\",\n standalone: false,\n template: ` <div [id]=\"id\"></div>`,\n styles: [],\n})\nexport class NgxFireworksComponent implements AfterViewInit, OnChanges, OnDestroy {\n @Input() options?: FireworkOptions;\n @Input() id = \"tsparticles\";\n\n #fireworksInstance?: Awaited<ReturnType<typeof fireworks>>;\n #destroyed = false;\n\n constructor(@Inject(PLATFORM_ID) protected platformId: string) {}\n\n public ngAfterViewInit(): void {\n if (isPlatformServer(this.platformId)) {\n return;\n }\n\n void this.#startFireworks();\n }\n\n public ngOnChanges(changes: SimpleChanges): void {\n if (isPlatformServer(this.platformId)) {\n return;\n }\n\n if (this.#destroyed) {\n return;\n }\n\n if (changes[\"options\"] || changes[\"id\"]) {\n void this.#startFireworks();\n }\n }\n\n public ngOnDestroy(): void {\n this.#destroyed = true;\n\n this.#fireworksInstance?.destroy();\n\n this.#fireworksInstance = undefined;\n }\n\n async #startFireworks(): Promise<void> {\n this.#fireworksInstance?.destroy();\n\n this.#fireworksInstance = undefined;\n\n this.#fireworksInstance = await fireworks(this.id, this.options);\n\n this.#fireworksInstance?.play();\n }\n}\n","import { NgModule } from \"@angular/core\";\nimport { fireworks } from \"@tsparticles/fireworks\";\nimport { NgxFireworksComponent } from \"./ng-fireworks.component\";\n\n@NgModule({\n declarations: [NgxFireworksComponent],\n imports: [],\n exports: [NgxFireworksComponent],\n})\nexport class NgxFireworksModule {\n constructor() {\n /* Register fireworks plugins before tsParticles.init() is called */\n void (fireworks as unknown as { init: () => Promise<void> }).init();\n }\n}\n","/*\n * Public API Surface of ng-fireworks\n */\n\nexport * from \"./lib/ng-fireworks.component\";\nexport * from \"./lib/ng-fireworks.module\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAmBa,qBAAqB,CAAA;AAIhC,IAAA,kBAAkB;AAClB,IAAA,UAAU;AAEV,IAAA,WAAA,CAA2C,UAAkB,EAAA;QAAlB,IAAA,CAAA,UAAU,GAAV,UAAU;QAL5C,IAAA,CAAA,EAAE,GAAG,aAAa;QAG3B,IAAA,CAAA,UAAU,GAAG,KAAK;IAE8C;IAEzD,eAAe,GAAA;AACpB,QAAA,IAAI,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACrC;QACF;AAEA,QAAA,KAAK,IAAI,CAAC,eAAe,EAAE;IAC7B;AAEO,IAAA,WAAW,CAAC,OAAsB,EAAA;AACvC,QAAA,IAAI,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACrC;QACF;AAEA,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB;QACF;QAEA,IAAI,OAAO,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE;AACvC,YAAA,KAAK,IAAI,CAAC,eAAe,EAAE;QAC7B;IACF;IAEO,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AAEtB,QAAA,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAE;AAElC,QAAA,IAAI,CAAC,kBAAkB,GAAG,SAAS;IACrC;AAEA,IAAA,MAAM,eAAe,GAAA;AACnB,QAAA,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAE;AAElC,QAAA,IAAI,CAAC,kBAAkB,GAAG,SAAS;AAEnC,QAAA,IAAI,CAAC,kBAAkB,GAAG,MAAM,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC;AAEhE,QAAA,IAAI,CAAC,kBAAkB,EAAE,IAAI,EAAE;IACjC;AA/CW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,kBAOZ,WAAW,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAPpB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,yIAHtB,CAAA,sBAAA,CAAwB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;2FAGvB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBANjC,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,KAAK,EAAA,QAAA,EACP,CAAA,sBAAA,CAAwB,EAAA;;0BAUrB,MAAM;2BAAC,WAAW;;sBAN9B;;sBACA;;;MCZU,kBAAkB,CAAA;AAC7B,IAAA,WAAA,GAAA;;AAEE,QAAA,KAAM,SAAsD,CAAC,IAAI,EAAE;IACrE;8GAJW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAlB,kBAAkB,EAAA,YAAA,EAAA,CAJd,qBAAqB,CAAA,EAAA,OAAA,EAAA,CAE1B,qBAAqB,CAAA,EAAA,CAAA,CAAA;+GAEpB,kBAAkB,EAAA,CAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;AACrC,oBAAA,OAAO,EAAE,EAAE;oBACX,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACjC,iBAAA;;;ACRD;;AAEG;;ACFH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "angular-fireworks",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "Official tsParticles Angular Confetti Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Svelte, jQuery, Preact, Riot.js, Solid.js, Inferno.",
|
|
5
5
|
"homepage": "https://confetti.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -82,11 +82,11 @@
|
|
|
82
82
|
}
|
|
83
83
|
],
|
|
84
84
|
"peerDependencies": {
|
|
85
|
-
"@angular/common": ">=
|
|
86
|
-
"@angular/core": ">=
|
|
85
|
+
"@angular/common": ">=12.0.0",
|
|
86
|
+
"@angular/core": ">=12.0.0",
|
|
87
87
|
"rxjs": ">=7.0.0",
|
|
88
|
-
"@tsparticles/fireworks": "^4.
|
|
89
|
-
"@tsparticles/engine": "
|
|
88
|
+
"@tsparticles/fireworks": "^4.2.0",
|
|
89
|
+
"@tsparticles/engine": "^4.2.0"
|
|
90
90
|
},
|
|
91
91
|
"dependencies": {
|
|
92
92
|
"tslib": "^2.8.1"
|
|
@@ -1,20 +1,22 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { AfterViewInit, OnDestroy } from '@angular/core';
|
|
2
|
+
import { AfterViewInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
|
3
3
|
import { FireworkOptions } from '@tsparticles/fireworks';
|
|
4
4
|
|
|
5
|
-
declare class NgxFireworksComponent implements AfterViewInit, OnDestroy {
|
|
5
|
+
declare class NgxFireworksComponent implements AfterViewInit, OnChanges, OnDestroy {
|
|
6
6
|
#private;
|
|
7
7
|
protected platformId: string;
|
|
8
8
|
options?: FireworkOptions;
|
|
9
9
|
id: string;
|
|
10
10
|
constructor(platformId: string);
|
|
11
11
|
ngAfterViewInit(): void;
|
|
12
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
12
13
|
ngOnDestroy(): void;
|
|
13
14
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgxFireworksComponent, never>;
|
|
14
15
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgxFireworksComponent, "ngx-fireworks", never, { "options": { "alias": "options"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, false, never>;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
declare class NgxFireworksModule {
|
|
19
|
+
constructor();
|
|
18
20
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgxFireworksModule, never>;
|
|
19
21
|
static ɵmod: i0.ɵɵNgModuleDeclaration<NgxFireworksModule, [typeof NgxFireworksComponent], never, [typeof NgxFireworksComponent]>;
|
|
20
22
|
static ɵinj: i0.ɵɵInjectorDeclaration<NgxFireworksModule>;
|