Provide way to use a specified element as reference position

[cwqt]

Nice lib, just bought it but had a problem. Currently the lib only uses a MouseEvent to decide where to place the popover - in the case of a complex element with many child elements - the popover moves all over the place because the srcElement from the mouse event changes depending on where you click inside.

I've implemented a way of providing a single reference component to the lib to stop this behaviour:

    setPosition(properties) {
        const element = properties.metadata.event?.srcElement ?? properties.metadata.refComponent.nativeElement;

export interface PopoverProperties {
    refComponent?: ElementRef;
    event?: MouseEvent

  @ViewChild('hitBox') hitBox:ElementRef

  openUserMenu() {
    this.popover.load({
      refComponent: this.hitBox,
      component: HeaderBarUserMenuComponent,
      offset: 16,
      width: '400px',
      placement: 'bottom-left',
    } as PopoverProperties)
  }

Wasn't sure how to go about doing a PR since the source is private but should give you the general idea :)

[drozhzhin-n-e]

@athencxss I added the targetElement property in version 1.2.1. It takes an HTMLElement as a value. You can download it from the same link that you received in the email.

[drozhzhin-n-e]

In your example, this is this.hitBox.nativeElement

[cwqt]

Verified working