command

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  contentChild,
6  contentChildren,
7  effect,
8  forwardRef,
9  input,
10  output,
11  signal,
12  ViewEncapsulation,
13} from '@angular/core';
14import { type ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
15 
16import type { IconName } from '@ng-icons/core';
17import type { ClassValue } from 'clsx';
18 
19import { ZardCommandInputComponent } from '@/shared/components/command/command-input.component';
20import { ZardCommandOptionComponent } from '@/shared/components/command/command-option.component';
21import { commandVariants } from '@/shared/components/command/command.variants';
22import { mergeClasses } from '@/shared/utils/merge-classes';
23 
24export interface ZardCommandOption {
25  value: unknown;
26  label: string;
27  disabled?: boolean;
28  command?: string;
29  shortcut?: string;
30  icon?: IconName;
31  action?: () => void;
32  key?: string;
33}
34 
35export interface ZardCommandGroup {
36  label: string;
37  options: ZardCommandOption[];
38}
39 
40export interface ZardCommandConfig {
41  placeholder?: string;
42  emptyText?: string;
43  groups: ZardCommandGroup[];
44  dividers?: boolean;
45  onSelect?: (option: ZardCommandOption) => void;
46}
47 
48export abstract class ZardCommand {
49  abstract registerOption(option: ZardCommandOptionComponent): void;
50  abstract unregisterOption(option: ZardCommandOptionComponent): void;
51}
52 
53@Component({
54  selector: 'z-command',
55  imports: [FormsModule],
56  template: `
57    <div [class]="classes()">
58      <div id="command-instructions" class="sr-only">
59        Use arrow keys to navigate, Enter to select, Escape to clear selection.
60      </div>
61      <div id="command-status" class="sr-only" aria-live="polite" aria-atomic="true">
62        {{ statusMessage() }}
63      </div>
64      <ng-content />
65    </div>
66  `,
67  providers: [
68    {
69      provide: NG_VALUE_ACCESSOR,
70      useExisting: forwardRef(() => ZardCommandComponent),
71      multi: true,
72    },
73  ],
74  changeDetection: ChangeDetectionStrategy.OnPush,
75  encapsulation: ViewEncapsulation.None,
76  host: {
77    'data-slot': 'command',
78    role: 'combobox',
79    'aria-haspopup': 'listbox',
80    '[attr.aria-expanded]': 'true',
81    '(keydown.{arrowdown,arrowup,enter,escape}.prevent)': 'onKeyDown($event)',
82  },
83  exportAs: 'zCommand',
84})
85export class ZardCommandComponent implements ControlValueAccessor, ZardCommand {
86  private readonly commandInput = contentChild(ZardCommandInputComponent);
87// … truncated