popover

1import { type ConnectedPosition, Overlay, OverlayPositionBuilder, type OverlayRef } from '@angular/cdk/overlay';
2import { TemplatePortal } from '@angular/cdk/portal';
3import { isPlatformBrowser } from '@angular/common';
4import {
5  ChangeDetectionStrategy,
6  Component,
7  computed,
8  DestroyRef,
9  Directive,
10  ElementRef,
11  inject,
12  input,
13  type OnDestroy,
14  type OnInit,
15  output,
16  PLATFORM_ID,
17  Renderer2,
18  signal,
19  type TemplateRef,
20  ViewContainerRef,
21} from '@angular/core';
22import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
23 
24import { filter, type Subscription } from 'rxjs';
25 
26import { mergeClasses } from '@/shared/utils/merge-classes';
27 
28import { popoverVariants } from './popover.variants';
29 
30export type ZardPopoverTrigger = 'click' | 'hover' | null;
31export type ZardPopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
32 
33const POPOVER_POSITIONS_MAP: { [key: string]: ConnectedPosition } = {
34  top: {
35    originX: 'center',
36    originY: 'top',
37    overlayX: 'center',
38    overlayY: 'bottom',
39    offsetX: 0,
40    offsetY: -8,
41  },
42  bottom: {
43    originX: 'center',
44    originY: 'bottom',
45    overlayX: 'center',
46    overlayY: 'top',
47    offsetX: 0,
48    offsetY: 8,
49  },
50  left: {
51    originX: 'start',
52    originY: 'center',
53    overlayX: 'end',
54    overlayY: 'center',
55    offsetX: -8,
56    offsetY: 0,
57  },
58  right: {
59    originX: 'end',
60    originY: 'center',
61    overlayX: 'start',
62    overlayY: 'center',
63    offsetX: 8,
64    offsetY: 0,
65  },
66} as const;
67 
68@Directive({
69  selector: '[zPopover]',
70  standalone: true,
71  exportAs: 'zPopover',
72})
73export class ZardPopoverDirective implements OnInit, OnDestroy {
74  private readonly destroyRef = inject(DestroyRef);
75  private readonly overlay = inject(Overlay);
76  private readonly overlayPositionBuilder = inject(OverlayPositionBuilder);
77  private readonly elementRef = inject(ElementRef);
78  private readonly renderer = inject(Renderer2);
79  private readonly viewContainerRef = inject(ViewContainerRef);
80  private readonly platformId = inject(PLATFORM_ID);
81 
82  private overlayRef?: OverlayRef;
83  private overlayRefSubscription?: Subscription;
84  private listeners: (() => void)[] = [];
85 
86  readonly zTrigger = input<ZardPopoverTrigger>('click');
87  readonly zContent = input.required<TemplateRef<unknown>>();
88  readonly zPlacement = input<ZardPopoverPlacement>('bottom');
89  readonly zOrigin = input<ElementRef>();
90  readonly zVisible = input<boolean>(false);
91  readonly zOverlayClickable = input<boolean>(true);
92// … truncated