combobox

1import { NgTemplateOutlet } from '@angular/common';
2import {
3  afterNextRender,
4  booleanAttribute,
5  ChangeDetectionStrategy,
6  Component,
7  computed,
8  ElementRef,
9  forwardRef,
10  inject,
11  Injector,
12  input,
13  linkedSignal,
14  output,
15  runInInjectionContext,
16  signal,
17  viewChild,
18  ViewEncapsulation,
19} from '@angular/core';
20import { type ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
21 
22import { NgIcon, provideIcons, type IconName } from '@ng-icons/core';
23import { lucideCheck, lucideChevronsUpDown } from '@ng-icons/lucide';
24import type { ClassValue } from 'clsx';
25 
26import { ZardButtonComponent, type ZardButtonTypeVariants } from '@/shared/components/button';
27import { comboboxVariants, type ZardComboboxWidthVariants } from '@/shared/components/combobox/combobox.variants';
28import {
29  ZardCommandComponent,
30  ZardCommandInputComponent,
31  ZardCommandListComponent,
32  ZardCommandOptionComponent,
33  ZardCommandOptionGroupComponent,
34  type ZardCommandOption,
35} from '@/shared/components/command';
36import { ZardEmptyComponent } from '@/shared/components/empty';
37import { ZardPopoverComponent, ZardPopoverDirective } from '@/shared/components/popover';
38import { mergeClasses } from '@/shared/utils/merge-classes';
39 
40export interface ZardComboboxOption {
41  value: string;
42  label: string;
43  disabled?: boolean;
44  icon?: IconName;
45}
46 
47export interface ZardComboboxGroup {
48  label?: string;
49  options: ZardComboboxOption[];
50}
51 
52@Component({
53  selector: 'z-combobox',
54  imports: [
55    FormsModule,
56    NgTemplateOutlet,
57    NgIcon,
58    ZardButtonComponent,
59    ZardCommandComponent,
60    ZardCommandInputComponent,
61    ZardCommandListComponent,
62    ZardCommandOptionComponent,
63    ZardCommandOptionGroupComponent,
64    ZardPopoverDirective,
65    ZardPopoverComponent,
66    ZardEmptyComponent,
67  ],
68  template: `
69    <button
70      type="button"
71      z-button
72      zPopover
73      role="combobox"
74      [zContent]="popoverContent"
75      [zType]="buttonVariant()"
76      [class]="buttonClasses()"
77      [zDisabled]="disabledState()"
78      [attr.aria-expanded]="open()"
79      [attr.aria-haspopup]="'listbox'"
80      [attr.aria-controls]="'combobox-listbox'"
81      [attr.aria-label]="ariaLabel() || 'Select option'"
82      [attr.aria-describedby]="ariaDescribedBy()"
83      [attr.aria-autocomplete]="searchable() ? 'list' : 'none'"
84      [attr.aria-activedescendant]="null"
85      (zVisibleChange)="setOpen($event)"
86      #popoverTrigger
87    >
88// … truncated