menu

1import type { BooleanInput } from '@angular/cdk/coercion';
2import { CdkMenuTrigger } from '@angular/cdk/menu';
3import type { ConnectedPosition } from '@angular/cdk/overlay';
4import { isPlatformBrowser } from '@angular/common';
5import {
6  booleanAttribute,
7  computed,
8  Directive,
9  DOCUMENT,
10  effect,
11  ElementRef,
12  inject,
13  input,
14  type OnDestroy,
15  type OnInit,
16  PLATFORM_ID,
17  type TemplateRef,
18  untracked,
19} from '@angular/core';
20 
21import { ZardMenuManagerService } from './menu-manager.service';
22import { MENU_POSITIONS_MAP, type ZardMenuPlacement } from './menu-positions';
23 
24export type ZardMenuTrigger = 'click' | 'hover';
25 
26@Directive({
27  selector: '[z-menu]',
28  host: {
29    role: 'button',
30    '[attr.tabindex]': "'0'",
31    '[attr.aria-haspopup]': "'menu'",
32    '[attr.aria-expanded]': 'cdkTrigger.isOpen()',
33    '[attr.data-state]': "cdkTrigger.isOpen() ? 'open': 'closed'",
34    '[attr.data-disabled]': "zDisabled() ? '' : undefined",
35    '[style.cursor]': "'pointer'",
36  },
37  hostDirectives: [
38    {
39      directive: CdkMenuTrigger,
40      inputs: ['cdkMenuTriggerFor: zMenuTriggerFor'],
41    },
42  ],
43})
44export class ZardMenuDirective implements OnInit, OnDestroy {
45  private static readonly MENU_CONTENT_SELECTOR = '.cdk-overlay-pane [z-menu-content]';
46 
47  protected readonly cdkTrigger = inject(CdkMenuTrigger, { host: true });
48  private readonly document = inject(DOCUMENT);
49  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
50  private readonly menuManager = inject(ZardMenuManagerService);
51  private readonly platformId = inject(PLATFORM_ID);
52 
53  private closeTimeout: ReturnType<typeof setTimeout> | null = null;
54  private readonly cleanupFunctions: Array<() => void> = [];
55 
56  readonly zMenuTriggerFor = input.required<TemplateRef<void>>();
57  readonly zDisabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
58  readonly zTrigger = input<ZardMenuTrigger>('click');
59  readonly zHoverDelay = input<number>(100);
60  readonly zPlacement = input<ZardMenuPlacement>('bottomLeft');
61 
62  private readonly menuPositions = computed(() => this.getPositionsByPlacement(this.zPlacement()));
63 
64  constructor() {
65    effect(() => {
66      const positions = this.menuPositions();
67      untracked(() => {
68        this.cdkTrigger.menuPosition = positions;
69      });
70    });
71  }
72 
73  private getPositionsByPlacement(placement: ZardMenuPlacement): ConnectedPosition[] {
74    return MENU_POSITIONS_MAP[placement] || MENU_POSITIONS_MAP['bottomLeft'];
75  }
76 
77// … truncated