refactor(popover): use ComponentRef setInput() api, input signals, host bindings

Author: xidedix

projects/coreui-angular/src/lib/popover/popover.directive.spec.ts

@@ -4,27 +4,25 @@ import { IntersectionService, ListenersService } from '../services';
 import { PopoverDirective } from './popover.directive';
 
 describe('PopoverDirective', () => {
-  let document: Document;
   let renderer: Renderer2;
   let hostElement: ElementRef;
   let viewContainerRef: ViewContainerRef;
   let changeDetectorRef: ChangeDetectorRef;
 
   it('should create an instance', () => {
     TestBed.configureTestingModule({
-      providers: [IntersectionService, Renderer2, ListenersService],
+      providers: [IntersectionService, Renderer2, ListenersService]
     });
     const intersectionService = TestBed.inject(IntersectionService);
     const listenersService = TestBed.inject(ListenersService);
     TestBed.runInInjectionContext(() => {
       const directive = new PopoverDirective(
-        document,
         renderer,
         hostElement,
         viewContainerRef,
         listenersService,
         changeDetectorRef,
-        intersectionService,
+        intersectionService
       );
       expect(directive).toBeTruthy();
     });

projects/coreui-angular/src/lib/popover/popover.directive.ts

@@ -1,90 +1,108 @@
+import { DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectorRef,
   ComponentRef,
+  computed,
   DestroyRef,
   Directive,
+  effect,
   ElementRef,
-  HostBinding,
   inject,
-  Inject,
-  Input,
-  OnChanges,
+  input,
+  model,
   OnDestroy,
   OnInit,
   Renderer2,
-  SimpleChanges,
   TemplateRef,
   ViewContainerRef
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { DOCUMENT } from '@angular/common';
 import { debounceTime, filter, finalize } from 'rxjs/operators';
 import { createPopper, Instance, Options } from '@popperjs/core';
 
 import { Triggers } from '../coreui.types';
+import { IListenersConfig, IntersectionService, ListenersService } from '../services';
+import { ElementRefDirective } from '../shared';
 import { PopoverComponent } from './popover/popover.component';
-import { IListenersConfig, ListenersService } from '../services/listeners.service';
-import { IntersectionService } from '../services';
 
 @Directive({
   selector: '[cPopover]',
   exportAs: 'cPopover',
-  providers: [ListenersService],
-  standalone: true
+  providers: [ListenersService, IntersectionService],
+  standalone: true,
+  host: { '[attr.aria-describedby]': 'ariaDescribedBy' }
 })
-export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {
-
+export class PopoverDirective implements OnDestroy, OnInit, AfterViewInit {
   /**
    * Content of popover
    * @type {string | TemplateRef}
    */
-  @Input('cPopover') content: string | TemplateRef<any> = '';
+  readonly content = input<string | TemplateRef<any> | undefined>(undefined, { alias: 'cPopover' });
+
+  contentEffect = effect(() => {
+    if (this.content()) {
+      this.destroyTooltipElement();
+    }
+  });
 
   /**
    * Optional popper Options object, takes precedence over cPopoverPlacement prop
    * @type Partial<Options>
    */
-  @Input('cPopoverOptions')
-  set popperOptions(value: Partial<Options>) {
-    this._popperOptions = { ...this._popperOptions, placement: this.placement, ...value };
-  };
+  readonly popperOptions = input<Partial<Options>>({}, { alias: 'cPopoverOptions' });
 
-  get popperOptions(): Partial<Options> {
-    return { placement: this.placement, ...this._popperOptions };
-  }
+  popperOptionsEffect = effect(() => {
+    this._popperOptions = {
+      ...this._popperOptions,
+      placement: this.placement(),
+      ...this.popperOptions()
+    };
+  });
+
+  popperOptionsComputed = computed(() => {
+    return { placement: this.placement(), ...this._popperOptions };
+  });
 
   /**
    * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+   * @type: 'top' | 'bottom' | 'left' | 'right'
+   * @default: 'top'
    */
-  @Input('cPopoverPlacement') placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
+  readonly placement = input<'top' | 'bottom' | 'left' | 'right'>('top', { alias: 'cPopoverPlacement' });
+
+  /**
+   * ElementRefDirective for positioning the tooltip on reference element
+   * @type: ElementRefDirective
+   * @default: undefined
+   */
+  readonly reference = input<ElementRefDirective | undefined>(undefined, { alias: 'cTooltipRef' });
+
+  readonly referenceRef = computed(() => this.reference()?.elementRef ?? this.hostElement);
+
   /**
    * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
-   * @type {'hover' | 'focus' | 'click'}
+   * @type: 'Triggers | Triggers[]
    */
-  @Input('cPopoverTrigger') trigger?: Triggers | Triggers[] = 'hover';
+  readonly trigger = input<Triggers | Triggers[]>('hover', { alias: 'cPopoverTrigger' });
 
   /**
    * Toggle the visibility of popover component.
+   * @type boolean
    */
-  @Input('cPopoverVisible')
-  set visible(value: boolean) {
-    this._visible = value;
-  }
-
-  get visible() {
-    return this._visible;
-  }
+  readonly visible = model(false, { alias: 'cPopoverVisible' });
 
-  private _visible = false;
+  visibleEffect = effect(() => {
+    this.visible() ? this.addTooltipElement() : this.removeTooltipElement();
+  });
 
-  @HostBinding('attr.aria-describedby') get ariaDescribedBy(): string | null {
-    return this.popoverId ? this.popoverId : null;
+  get ariaDescribedBy(): string | null {
+    return this.tooltipId ? this.tooltipId : null;
   }
 
-  private popover!: HTMLDivElement;
-  private popoverId!: string;
-  private popoverRef!: ComponentRef<PopoverComponent>;
+  private tooltip!: HTMLDivElement;
+  private tooltipId!: string;
+  private tooltipRef!: ComponentRef<PopoverComponent>;
   private popperInstance!: Instance;
 
   private _popperOptions: Partial<Options> = {
@@ -99,9 +117,9 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
   };
 
   readonly #destroyRef = inject(DestroyRef);
+  readonly #document = inject(DOCUMENT);
 
   constructor(
-    @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
     private hostElement: ElementRef,
     private viewContainerRef: ViewContainerRef,
@@ -114,15 +132,9 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
     this.intersectionServiceSubscribe();
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['visible']) {
-      changes['visible'].currentValue ? this.addPopoverElement() : this.removePopoverElement();
-    }
-  }
-
   ngOnDestroy(): void {
     this.clearListeners();
-    this.destroyPopoverElement();
+    this.destroyTooltipElement();
   }
 
   ngOnInit(): void {
@@ -132,18 +144,15 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
   private setListeners(): void {
     const config: IListenersConfig = {
       hostElement: this.hostElement,
-      trigger: this.trigger,
+      trigger: this.trigger(),
       callbackToggle: () => {
-        this.visible = !this.visible;
-        this.visible ? this.addPopoverElement() : this.removePopoverElement();
+        this.visible.set(!this.visible());
       },
       callbackOff: () => {
-        this.visible = false;
-        this.removePopoverElement();
+        this.visible.set(false);
       },
       callbackOn: () => {
-        this.visible = true;
-        this.addPopoverElement();
+        this.visible.set(true);
       }
     };
     this.listenersService.setListeners(config);
@@ -154,93 +163,93 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
   }
 
   private intersectionServiceSubscribe(): void {
-    this.intersectionService.createIntersectionObserver(this.hostElement);
+    this.intersectionService.createIntersectionObserver(this.referenceRef());
     this.intersectionService.intersecting$
       .pipe(
-        filter(next => next.hostElement === this.hostElement),
+        filter((next) => next.hostElement === this.referenceRef()),
         debounceTime(100),
         finalize(() => {
-          this.intersectionService.unobserve(this.hostElement);
+          this.intersectionService.unobserve(this.referenceRef());
         }),
         takeUntilDestroyed(this.#destroyRef)
       )
-      .subscribe(next => {
-        this.visible = next.isIntersecting ? this.visible : false;
-        !this.visible && this.removePopoverElement();
+      .subscribe((next) => {
+        this.visible.set(next.isIntersecting ? this.visible() : false);
       });
   }
 
   private getUID(prefix: string): string {
     let uid = prefix ?? 'random-id';
     do {
       uid = `${prefix}-${Math.floor(Math.random() * 1000000).toString(10)}`;
-    } while (this.document.getElementById(uid));
+    } while (this.#document.getElementById(uid));
 
     return uid;
   }
 
-  private createPopoverElement(): void {
-    if (!this.popoverRef) {
-      this.popoverRef = this.viewContainerRef.createComponent<PopoverComponent>(PopoverComponent);
+  private createTooltipElement(): void {
+    if (!this.tooltipRef) {
+      this.tooltipRef = this.viewContainerRef.createComponent<PopoverComponent>(PopoverComponent);
       // this.viewContainerRef.detach();
     }
   }
 
-  private destroyPopoverElement(): void {
-    this.popover?.remove();
-    this.popoverRef?.destroy();
+  private destroyTooltipElement(): void {
+    this.tooltip?.remove();
+    this.tooltipRef?.destroy();
     // @ts-ignore
-    this.popoverRef = undefined;
+    this.tooltipRef = undefined;
     this.popperInstance?.destroy();
     this.viewContainerRef?.detach();
     this.viewContainerRef?.clear();
   }
 
-  private addPopoverElement(): void {
-    if (!this.popoverRef) {
-      this.createPopoverElement();
+  private addTooltipElement(): void {
+    if (!this.content()) {
+      this.destroyTooltipElement();
+      return;
+    }
+
+    if (!this.tooltipRef) {
+      this.createTooltipElement();
     }
-    this.popoverRef.instance.content = this.content;
-    this.popover = this.popoverRef.location.nativeElement;
-    this.renderer.addClass(this.popover, 'd-none');
-    this.renderer.addClass(this.popover, 'fade');
+
+    this.tooltipRef?.setInput('content', this.content() ?? '');
+
+    this.tooltip = this.tooltipRef?.location.nativeElement;
+    this.renderer.addClass(this.tooltip, 'd-none');
+    this.renderer.addClass(this.tooltip, 'fade');
 
     this.popperInstance?.destroy();
 
-    setTimeout(() => {
-      this.popperInstance = createPopper(
-        this.hostElement.nativeElement,
-        this.popover,
-        { ...this.popperOptions }
-      );
-      this.viewContainerRef.insert(this.popoverRef.hostView);
-      this.renderer.appendChild(this.document.body, this.popover);
-      if (!this.visible) {
-        this.removePopoverElement();
-        return;
-      }
-      setTimeout(() => {
-        this.popoverId = this.getUID('popover');
-        this.popoverRef.instance.id = this.popoverId;
-        if (!this.visible) {
-          this.removePopoverElement();
-          return;
-        }
-        this.renderer.removeClass(this.popover, 'd-none');
-        this.popoverRef.instance.visible = this.visible;
-        this.popperInstance.forceUpdate();
-        this.changeDetectorRef.markForCheck();
-      }, 100);
+    this.viewContainerRef.insert(this.tooltipRef.hostView);
+    this.renderer.appendChild(this.#document.body, this.tooltip);
+
+    this.popperInstance = createPopper(this.referenceRef().nativeElement, this.tooltip, {
+      ...this.popperOptionsComputed()
     });
+
+    if (!this.visible()) {
+      this.removeTooltipElement();
+      return;
+    }
+    setTimeout(() => {
+      this.tooltipId = this.getUID('popover');
+      this.tooltipRef?.setInput('id', this.tooltipId);
+      this.renderer.removeClass(this.tooltip, 'd-none');
+      this.tooltipRef?.setInput('visible', this.visible());
+      this.popperInstance?.forceUpdate();
+      this.changeDetectorRef?.markForCheck();
+    }, 100);
   }
 
-  private removePopoverElement(): void {
-    this.popoverId = '';
-    if (!this.popoverRef) {
+  private removeTooltipElement(): void {
+    this.tooltipId = '';
+    if (!this.tooltipRef) {
       return;
     }
-    this.popoverRef.instance.visible = false;
-    this.popoverRef.instance.id = undefined;
+    this.tooltipRef.setInput('visible', false);
+    this.tooltipRef.setInput('id', undefined);
     this.changeDetectorRef.markForCheck();
     setTimeout(() => {
       this.viewContainerRef?.detach();

projects/coreui-angular/src/lib/popover/popover/popover.component.html

@@ -1,4 +1,4 @@
 <ng-container>
-  <div [ngClass]="{'popover-arrow': !!content}" data-popper-arrow></div>
+  <div [ngClass]="{'popover-arrow': !!content()}" data-popper-arrow></div>
   <ng-container #popoverTemplate />
 </ng-container>