diff --git a/projects/demo/package-lock.json b/projects/demo/package-lock.json index 5947fd3..171d60f 100644 --- a/projects/demo/package-lock.json +++ b/projects/demo/package-lock.json @@ -6657,7 +6657,8 @@ }, "ini": { "version": "1.3.5", - "resolved": "", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true }, "inquirer": { @@ -8459,7 +8460,7 @@ }, "ngx-tippy-wrapper": { "version": "file:../../dist/ngx-tippy-wrapper/ngx-tippy-wrapper-3.0.1.tgz", - "integrity": "sha512-kbPxqo+w0JXd2RKTtURE7FI4Dtx+y4ZQddgmJf2Qcw5XaaCYa7xkMN0GS1Es951gDdchHI8P7hqWm07qyRRw3w==", + "integrity": "sha512-rHf66xUdouKhgM2l6+o9ufzYQ6VM8/cQJ2XcUnbkPKg8EmWB04S/kMX+w+0ZMorhRAoSfNDNK+LAigmZObq5CQ==", "requires": { "tippy.js": "^6.3.1", "tslib": "^2.1.0" diff --git a/projects/lib-workboard/package-lock.json b/projects/lib-workboard/package-lock.json index 7280fd1..e903da9 100644 --- a/projects/lib-workboard/package-lock.json +++ b/projects/lib-workboard/package-lock.json @@ -6630,7 +6630,8 @@ }, "ini": { "version": "1.3.5", - "resolved": "", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true }, "inquirer": { @@ -8438,9 +8439,9 @@ }, "dependencies": { "@popperjs/core": { - "version": "2.9.1", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz", - "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA==" + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==" }, "tippy.js": { "version": "6.3.1", @@ -8451,9 +8452,9 @@ } }, "tslib": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", - "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } } }, diff --git a/projects/ngx-tippy-wrapper/src/lib/ngx-tippy-singleton.component.ts b/projects/ngx-tippy-wrapper/src/lib/ngx-tippy-singleton.component.ts index 7d5cfa8..c71b9cd 100644 --- a/projects/ngx-tippy-wrapper/src/lib/ngx-tippy-singleton.component.ts +++ b/projects/ngx-tippy-wrapper/src/lib/ngx-tippy-singleton.component.ts @@ -1,5 +1,5 @@ import { isPlatformServer } from '@angular/common'; -import { AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Inject, Input, OnDestroy, PLATFORM_ID, ViewChild } from '@angular/core'; import { createSingleton } from 'tippy.js'; import { NgxSingletonProps, @@ -20,11 +20,14 @@ import { NgxTippyService } from './ngx-tippy.service'; `, }) -export class NgxTippySingletonComponent implements AfterViewInit { +export class NgxTippySingletonComponent implements AfterViewInit, OnDestroy { @Input() singletonProps?: NgxSingletonProps; @Input() singletonName?: string; @ViewChild('contentWrapper', { read: ElementRef, static: false }) contentWrapper: ElementRef; + private singletonInstance!: NgxTippySingletonInstance; + private currentSingletonChildrenTippyInstances!: NgxTippyInstance[] | undefined; + constructor(@Inject(PLATFORM_ID) private platform: Object, private ngxTippyService: NgxTippyService) {} ngAfterViewInit() { @@ -32,6 +35,10 @@ export class NgxTippySingletonComponent implements AfterViewInit { this.setSingleton(); } + ngOnDestroy() { + this.clearSingletonInstance(); + } + /** * Take projected in component tooltips element * Take initiated tippy instances @@ -46,20 +53,20 @@ export class NgxTippySingletonComponent implements AfterViewInit { const tippyInstances: Map | null = this.ngxTippyService.getInstances(); const tippyInstancesSerialized: NgxTippyInstance[] | undefined = tippyInstances && [...tippyInstances.values()]; - const currentSingletonChildrenTippyInstances: NgxTippyInstance[] | undefined = + this.currentSingletonChildrenTippyInstances = tippyInstancesSerialized && tippyInstancesSerialized.filter((tippyInstance) => singletonTooltipIDs.includes(tippyInstance.id)); - if (currentSingletonChildrenTippyInstances?.length) { - this.initTippySingleton(currentSingletonChildrenTippyInstances); + if (this.currentSingletonChildrenTippyInstances?.length) { + this.initTippySingleton(this.currentSingletonChildrenTippyInstances); } else { throw new Error(`No children tippy instances founded within singleton component`); } } private initTippySingleton(childrenSingletonInstances: NgxTippyInstance[]) { - const singleton: NgxTippySingletonInstance = createSingleton(childrenSingletonInstances, this.singletonProps); - this.writeSingletonInstanceToStorage(singleton); + this.singletonInstance = createSingleton(childrenSingletonInstances, this.singletonProps); + this.writeSingletonInstanceToStorage(this.singletonInstance); } /** @@ -73,7 +80,7 @@ export class NgxTippySingletonComponent implements AfterViewInit { const extendedSingletonInstance = this.extendShowFn(singletonInstance); this.ngxTippyService.setSingletonInstance( - this.singletonName || `singleton-${singletonInstance.id}}`, + this.singletonName || `singleton-${singletonInstance.id}`, extendedSingletonInstance ); } @@ -98,4 +105,21 @@ export class NgxTippySingletonComponent implements AfterViewInit { return singletonInstance; } + + private clearSingletonInstance() { + const singletonInstances = this.ngxTippyService.getSingletonInstances(); + + if (singletonInstances && this.singletonInstance) { + this.destroySingletonInstance(); + this.deleteEntryInStorage(singletonInstances); + } + } + + private destroySingletonInstance() { + this.singletonInstance.destroy(); + } + + private deleteEntryInStorage(singletonInstances: Map) { + singletonInstances.delete(this.singletonName || `singleton-${this.singletonInstance.id}`); + } } diff --git a/projects/ngx-tippy-wrapper/src/lib/ngx-tippy.directive.ts b/projects/ngx-tippy-wrapper/src/lib/ngx-tippy.directive.ts index acd8789..9669b35 100644 --- a/projects/ngx-tippy-wrapper/src/lib/ngx-tippy.directive.ts +++ b/projects/ngx-tippy-wrapper/src/lib/ngx-tippy.directive.ts @@ -29,7 +29,7 @@ export class NgxTippyDirective implements OnInit, OnDestroy { } ngOnDestroy() { - this.deleteEntryInStorage(); + this.clearInstance(); } /** @@ -75,7 +75,22 @@ export class NgxTippyDirective implements OnInit, OnDestroy { this.ngxTippyService.setInstance(this.tippyName || `tippy-${tippyInstance.id}`, tippyInstance); } - private deleteEntryInStorage() { - this.ngxTippyService.getInstances()?.delete(this.tippyName || `tippy-${this.tippyInstance.id}`); + private clearInstance() { + const instances = this.ngxTippyService.getInstances(); + + if (instances && this.tippyInstance) { + const tippyName = this.tippyName || `tippy-${this.tippyInstance.id}`; + + this.destroyTippyInstance(tippyName); + this.deleteEntryInStorage(instances, tippyName); + } + } + + private destroyTippyInstance(tippyName: string) { + this.ngxTippyService.destroy(tippyName); + } + + private deleteEntryInStorage(instances: Map, tippyName: string) { + instances.delete(tippyName); } }