dropdown

1import { Overlay, OverlayModule, OverlayPositionBuilder, type OverlayRef } from '@angular/cdk/overlay';
2import { TemplatePortal } from '@angular/cdk/portal';
3import { isPlatformBrowser } from '@angular/common';
4import {
5  booleanAttribute,
6  ChangeDetectionStrategy,
7  Component,
8  computed,
9  ElementRef,
10  inject,
11  input,
12  type OnDestroy,
13  output,
14  PLATFORM_ID,
15  signal,
16  type TemplateRef,
17  viewChild,
18  ViewContainerRef,
19  ViewEncapsulation,
20} from '@angular/core';
21 
22import type { ClassValue } from 'clsx';
23 
24import { ZardIdDirective } from '@/shared/core/directives/id.directive';
25import { mergeClasses } from '@/shared/utils/merge-classes';
26 
27import { dropdownContentVariants } from './dropdown.variants';
28 
29@Component({
30  selector: 'z-dropdown-menu',
31  imports: [OverlayModule, ZardIdDirective],
32  template: `
33    <!-- Dropdown Trigger -->
34    <div
35      #triggerContainer
36      zardId="dropdown-trigger"
37      #zId="zardId"
38      [id]="zId.id()"
39      data-slot="dropdown-menu-trigger"
40      (click)="toggle()"
41      (keydown.{enter,space}.prevent)="toggle()"
42      [attr.aria-haspopup]="'menu'"
43      [attr.aria-expanded]="isOpen()"
44      [attr.aria-disabled]="isDisabled()"
45      tabindex="0"
46    >
47      <ng-content select="[dropdown-trigger]" />
48    </div>
49 
50    <!-- Template for overlay content -->
51    <ng-template #dropdownTemplate>
52      <div
53        [class]="contentClasses()"
54        role="menu"
55        data-slot="dropdown-menu-content"
56        [attr.data-state]="'open'"
57        (click)="onDropdownClick($event)"
58        (keydown.{arrowdown,arrowup,enter,space,escape,home,end}.prevent)="onDropdownKeydown($event)"
59        tabindex="-1"
60      >
61        <ng-content />
62      </div>
63    </ng-template>
64  `,
65  changeDetection: ChangeDetectionStrategy.OnPush,
66  encapsulation: ViewEncapsulation.None,
67  host: {
68    class: 'relative inline-block text-left',
69    'data-slot': 'dropdown-menu',
70    '[attr.data-state]': 'isOpen() ? "open" : "closed"',
71    '(document:click)': 'onDocumentClick($event)',
72  },
73  exportAs: 'zDropdownMenu',
74})
75export class ZardDropdownMenuComponent implements OnDestroy {
76  private elementRef = inject(ElementRef);
77  private overlay = inject(Overlay);
78  private overlayPositionBuilder = inject(OverlayPositionBuilder);
79  private viewContainerRef = inject(ViewContainerRef);
80  private platformId = inject(PLATFORM_ID);
81 
82  readonly dropdownTemplate = viewChild.required<TemplateRef<unknown>>('dropdownTemplate');
83// … truncated