@if (appendBox) {
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="target"
    [cdkConnectedOverlayOpen]="true"
    [cdkConnectedOverlayDisableClose]="true"
  >
    <ng-container *ngTemplateOutlet="sharedPopoverContent"></ng-container>
  </ng-template>
} @else {
  <ng-container *ngTemplateOutlet="sharedPopoverContent"></ng-container>
}

<ng-template #sharedPopoverContent>
  <div
    #popoverElement
    [hidden]="isHidden"
    class="po-popover"
    [style.width.px]="width ?? widthPopover"
    [ngClass]="customClasses()"
  >
    @if (!hideArrow) {
      <div class="po-popover-arrow po-arrow-{{ arrowDirection }}"></div>
    }

    <div class="po-popover-content">
      @if (title) {
        <span class="po-popover-title">{{ title }}</span>
      }
      <ng-content></ng-content>
    </div>
  </div>
</ng-template>