feat: 🎸 add allow close input

ngneat · Aug 30, 2020 · 236a9dc · 236a9dc
1 parent f8259c0
commit 236a9dc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/projects/ngneat/helipopper/src/lib/helipopper-options.ts b/projects/ngneat/helipopper/src/lib/helipopper-options.ts
@@ -9,7 +9,8 @@ export const initialHelipopperOptions: Partial<HelipopperOptions> = {
   appendTo: document.body,
   placement: 'top',
   variation: 'tooltip',
-  disabled: false
+  disabled: false,
+  allowClose: true
 };
 
 export interface HelipopperOptions {
@@ -25,4 +26,5 @@ export interface HelipopperOptions {
   variation: Variation;
   disabled: boolean;
   sticky: boolean;
+  allowClose: boolean;
 }
diff --git a/projects/ngneat/helipopper/src/lib/helipopper.directive.ts b/projects/ngneat/helipopper/src/lib/helipopper.directive.ts
@@ -60,6 +60,9 @@ export class HelipopperDirective implements OnDestroy {
   @Input()
   helipopperTrigger: string | undefined;
 
+  @Input()
+  helipopperAllowClose: boolean = initialOptions.allowClose;
+
   @Input()
   helipopperClass: string | Array<string> | undefined;
 
@@ -173,6 +176,10 @@ export class HelipopperDirective implements OnDestroy {
     this._destroy.next();
   }
 
+  destroy() {
+    this.ngOnDestroy();
+  }
+
   private destroyView() {
     this.tplPortal && this.destroyTemplate();
     this.innerComponentRef && this.destroyComponent();
@@ -202,16 +209,17 @@ export class HelipopperDirective implements OnDestroy {
       trigger: this.helipopperTrigger,
       placement: this._placement,
       triggerTarget: this._tooltipTarget,
+      hideOnClick: this.helipopperAllowClose,
       // TODO: Merge the following methods with the passed config
       onCreate: instance => {
         this.helipopperClass && addClass(instance.popper, this.helipopperClass);
       },
       onShow: instance => {
         this.zone.run(() => this.instance.setContent(this.resolveContent()));
-        this.isPopper && this.addCloseButton(instance as InstanceWithClose);
+        this.helipopperAllowClose && this.isPopper && this.addCloseButton(instance as InstanceWithClose);
       },
       onHidden: instance => {
-        this.isPopper && this.removeCloseButton(instance as InstanceWithClose);
+        this.helipopperAllowClose && this.isPopper && this.removeCloseButton(instance as InstanceWithClose);
         this.destroyView();
         this.helipopperClose.next();
       },

diff --git a/projects/ngneat/helipopper/src/lib/helipopper.service.ts b/projects/ngneat/helipopper/src/lib/helipopper.service.ts
@@ -49,6 +49,7 @@ export class HelipopperService {
     directive.variation = options?.variation || initialOptions.variation;
     directive.disabled = options?.disabled || initialOptions.disabled;
     directive.sticky = options?.sticky;
+    directive.helipopperAllowClose = options?.allowClose || initialOptions.allowClose;
 
     directive.whenStable.subscribe(() => directive.show());