feat(lib): add popper API demo

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

@@ -45,9 +45,9 @@ export class HelipopperService {
     directive.helipopperClass = options?.helipopperClass;
     directive.helipopperOffset = options?.helipopperOffset;
     directive.injector = options?.helipopperInjector;
-    directive.placement = options?.helipopperPlacement;
-    directive.variation = options?.helipopperVariation;
-    directive.disabled = options?.helipopperDisabled;
+    directive.placement = options?.helipopperPlacement || 'top';
+    directive.variation = options?.helipopperVariation || 'tooltip';
+    directive.disabled = options?.helipopperDisabled || false;
     directive.sticky = options?.helipopperSticky;
 
     directive.whenStable.subscribe(() => directive.show());

src/app/app.component.html

@@ -177,7 +177,23 @@ <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>
+<div class="block">
+  <h2>Attach the popper manually</h2>
+  <fieldset>
+    <legend>Enter your name</legend>
+    <input #inputName type="text" [formControl]="formControl" (keyup.enter)="submit()" />
+  </fieldset>
+</div>
+
+<div class="block">
+  <h2>Attach the popper manually (with provided component)</h2>
+  <fieldset>
+    <legend>Enter your name</legend>
+    <input #inputNameComp type="text" [formControl]="formControlWithComp" (keyup.enter)="submitWithComp()" />
+  </fieldset>
+</div>
+
+<div class="block">
+  <h2>Attach the popper manually (with provided component with nested popper)</h2>
+  <app-nested-popper (submit)="submitWithNestedComp($event)"></app-nested-popper>
+</div>

src/app/app.component.ts

@@ -4,6 +4,7 @@ import { ExampleComponent } from './example/example.component';
 import { interval } from 'rxjs';
 import { finalize } from 'rxjs/operators';
 import { HelipopperDirective, HelipopperService } from '@ngneat/helipopper';
+import { NestedPopperComponent } from './nested-popper/nested-popper.component';
 
 @Component({
   selector: 'app-root',
@@ -49,8 +50,12 @@ export class AppComponent implements AfterViewInit {
   text = `Long Long All Text`;
   isSticky = false;
   comp = ExampleComponent;
+  nestedPopperComp = NestedPopperComponent;
   formControl = new FormControl();
+  formControlWithComp = new FormControl();
   popper: HelipopperDirective;
+  popperWithComp: HelipopperDirective;
+  popperWithNestedComp: HelipopperDirective;
 
   changeContent() {
     this.text = this.text === `Long Long All Text` ? `Short` : `Long Long All Text`;
@@ -59,6 +64,8 @@ export class AppComponent implements AfterViewInit {
   constructor(private fb: FormBuilder, private service: HelipopperService) {}
 
   @ViewChild('inputName', { static: true }) inputName: ElementRef;
+  @ViewChild('inputNameComp', { static: true }) inputNameComp: ElementRef;
+  @ViewChild(NestedPopperComponent, { static: true }) nestedComp: NestedPopperComponent;
 
   ngAfterViewInit() {
     this.formControl.valueChanges.subscribe(value => {
@@ -68,6 +75,14 @@ export class AppComponent implements AfterViewInit {
         this.popper.show();
       }
     });
+
+    this.formControlWithComp.valueChanges.subscribe(value => {
+      if (value && this.popperWithComp) {
+        this.popperWithComp.hide();
+      } else if (!value && this.popperWithComp) {
+        this.popperWithComp.show();
+      }
+    });
   }
 
   toggleSticky() {
@@ -92,4 +107,17 @@ export class AppComponent implements AfterViewInit {
       this.popper = this.service.open(this.inputName, 'this field is required');
     }
   }
+
+  submitWithComp(): void {
+    if (!this.formControlWithComp.value) {
+      this.popperWithComp = this.service.open(this.inputNameComp, this.comp);
+    }
+  }
+
+  submitWithNestedComp(value: string): void {
+    if (!value) {
+      console.log(this.inputName);
+      this.popperWithNestedComp = this.service.open(this.nestedComp.inputName, this.comp);
+    }
+  }
 }

src/app/app.module.ts

@@ -6,9 +6,10 @@ import { AppComponent } from './app.component';
 import { HelipopperModule } from '@ngneat/helipopper';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ExampleComponent } from './example/example.component';
+import { NestedPopperComponent } from './nested-popper/nested-popper.component';
 
 @NgModule({
-  declarations: [AppComponent, ExampleComponent],
+  declarations: [AppComponent, ExampleComponent, NestedPopperComponent],
   imports: [BrowserModule, AppRoutingModule, ReactiveFormsModule, HelipopperModule.forRoot()],
   providers: [],
   bootstrap: [AppComponent]

src/app/nested-popper/nested-popper.component.html

@@ -0,0 +1,4 @@
+<fieldset>
+  <legend>Enter your name</legend>
+  <input #inputName type="text" [formControl]="formControl" (keyup.enter)="submit.emit(inputName.value)" />
+</fieldset>

src/app/nested-popper/nested-popper.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NestedPopperComponent } from './nested-popper.component';
+
+describe('NestedPopperComponent', () => {
+  let component: NestedPopperComponent;
+  let fixture: ComponentFixture<NestedPopperComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [NestedPopperComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NestedPopperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/nested-popper/nested-popper.component.ts

@@ -0,0 +1,14 @@
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-nested-popper',
+  templateUrl: './nested-popper.component.html',
+  styleUrls: ['./nested-popper.component.scss']
+})
+export class NestedPopperComponent {
+  formControl = new FormControl();
+  @Output() submit: EventEmitter<string> = new EventEmitter<string>();
+
+  @ViewChild('inputName', { static: true }) public inputName: ElementRef;
+}