feat(lib): add popper API

add service
add demo
add type
remove unused tests

projects/ngneat/helipopper/src/lib/helipopper.directive.ts

@@ -124,6 +124,7 @@ export class HelipopperDirective implements OnDestroy {
   private tplPortal: TemplatePortal;
   private mergedConfig: HelipopperConfig;
   private innerComponentRef: ComponentRef<any>;
+  public whenStable: Subject<boolean> = new Subject<boolean>();
 
   constructor(
     private host: ElementRef,
@@ -217,6 +218,7 @@ export class HelipopperDirective implements OnDestroy {
       ...this.helipopperOptions
     });
 
+    this.whenStable.next(true);
     this.markDisabled(this._disabled);
   }
 

projects/ngneat/helipopper/src/lib/helipopper.service.ts

@@ -0,0 +1,47 @@
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  ElementRef,
+  Inject,
+  Injectable,
+  Injector,
+  NgZone,
+  TemplateRef
+} from '@angular/core';
+import { HELIPOPPER_CONFIG, HelipopperConfig, HelipopperOptions } from './helipopper.types';
+import { HelipopperDirective } from './helipopper.directive';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HelipopperService {
+  constructor(
+    private appRef: ApplicationRef,
+    private zone: NgZone,
+    private resolver: ComponentFactoryResolver,
+    private hostInjector: Injector,
+    @Inject(HELIPOPPER_CONFIG) private config: HelipopperConfig
+  ) {}
+
+  open(host: ElementRef, helipopper: string | TemplateRef<any>, options?: HelipopperOptions) {
+    let directive: HelipopperDirective = new HelipopperDirective(
+      host,
+      this.appRef,
+      this.zone,
+      this.resolver,
+      this.hostInjector,
+      this.config
+    );
+
+    //todo :  if helipopperAppendTo === undefined then document.body;
+    //todo :  if helipopperOptions === undeifned then {}
+    // todo : if helipopperTextOverflow === undefined then showOnlyOnTextOverflow = false
+    directive.helipopper = helipopper;
+
+    directive.whenStable.subscribe(() => {
+      directive.show();
+    });
+
+    return directive;
+  }
+}

projects/ngneat/helipopper/src/lib/helipopper.types.ts

@@ -1,6 +1,7 @@
-import { Instance } from 'tippy.js';
+import { Instance, Props } from 'tippy.js';
 import { Subscription } from 'rxjs';
 import { ElementRef, InjectionToken } from '@angular/core';
+import { Options as PopperOptions } from '@popperjs/core';
 
 export type Variation = 'popper' | 'tooltip';
 export type InstanceWithClose = Instance & { closeButtonElement: HTMLElement; closeButtonSubscription: Subscription };
@@ -11,4 +12,17 @@ export type HelipopperConfig = {
   closeIcon?: string;
 };
 
+export interface HelipopperOptions {
+  helipopperVariation: Variation;
+  helipopperPlacement: PopperOptions['placement'];
+  helipopperClass: string | Array<string> | undefined;
+  helipopperOffset: [number, number] | undefined;
+  helipopperDisabled: boolean;
+  helipopperAppendTo: string | HTMLElement;
+  helipopperOptions: Partial<Props>;
+  helipopperTextOverflow: boolean;
+  helipopperSticky: boolean;
+  helipopperTarget: Element;
+}
+
 export const HELIPOPPER_CONFIG = new InjectionToken<HelipopperConfig>('HELIPOPPER_CONFIG');

projects/ngneat/helipopper/src/public-api.ts

@@ -1,2 +1,3 @@
 export * from './lib/helipopper.module';
 export * from './lib/helipopper.directive';
+export * from './lib/helipopper.service';

src/app/app.component.html

@@ -176,3 +176,8 @@ <h2>Sticky</h2>
   <h2>Custom Component</h2>
   <button [helipopper]="comp" helipopperVariation="popper" (helipopperClose)="close()">Open component</button>
 </div>
+
+<fieldset>
+  <legend>Enter your name</legend>
+  <input #inputName type="text" [formControl]="formControl" (keyup.enter)="submit()" />
+</fieldset>

src/app/app.component.spec.ts

@@ -5,12 +5,8 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
+      imports: [RouterTestingModule],
+      declarations: [AppComponent]
     }).compileComponents();
   }));
 
@@ -19,17 +15,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have as title 'helipopper-playground'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('helipopper-playground');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('helipopper-playground app is running!');
-  });
 });

src/app/app.component.ts

@@ -1,15 +1,16 @@
-import { Component } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl } from '@angular/forms';
 import { ExampleComponent } from './example/example.component';
 import { interval } from 'rxjs';
 import { finalize } from 'rxjs/operators';
+import { HelipopperDirective, HelipopperService } from '@ngneat/helipopper';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements AfterViewInit {
   tooltipPositions = ['auto', 'top', 'right', 'bottom', 'left'];
   tooltipAlignments = [
     { label: 'start', value: '-start' },
@@ -48,12 +49,26 @@ export class AppComponent {
   text = `Long Long All Text`;
   isSticky = false;
   comp = ExampleComponent;
+  formControl = new FormControl();
+  popper: HelipopperDirective;
 
   changeContent() {
     this.text = this.text === `Long Long All Text` ? `Short` : `Long Long All Text`;
   }
 
-  constructor(private fb: FormBuilder) {}
+  constructor(private fb: FormBuilder, private service: HelipopperService) {}
+
+  @ViewChild('inputName', { static: true }) inputName: ElementRef;
+
+  ngAfterViewInit() {
+    this.formControl.valueChanges.subscribe(value => {
+      if (value && this.popper) {
+        this.popper.hide();
+      } else if (!value && this.popper) {
+        this.popper.show();
+      }
+    });
+  }
 
   toggleSticky() {
     this.isSticky = !this.isSticky;
@@ -71,4 +86,10 @@ export class AppComponent {
   close() {
     console.log('close');
   }
+
+  submit(): void {
+    if (!this.formControl.value) {
+      this.popper = this.service.open(this.inputName, 'this field is required');
+    }
+  }
 }