Command Palette

import {
  KuiButton,
  KuiCommandGroup,
  KuiCommandItem,
  KuiCommandPalette,
} from '@kikita-labs/ui';

<div class="basic-command-palette-example">
  <button kuiButton type="button" (click)="open.set(true)">Open command palette</button>

  @if (selectedCommand(); as command) {
    <p class="basic-command-palette-example__selection">Selected: {{ command }}</p>
  }

  <kui-command-palette
    [(open)]="open"
    [(query)]="query"
    [groups]="groups"
    (selected)="runCommand($event)"
  />
</div>

const groups: readonly KuiCommandGroup[] = [
  {
    heading: 'Project',
    items: [
      {
        id: 'rename',
        label: 'Rename project',
        description: 'Update the display name.',
        meta: 'Project',
        badge: 'New',
        shortcut: ['F2'],
        icon: 'R',
        keywords: ['edit', 'title'],
      },
      {
        id: 'delete',
        label: 'Delete project',
        danger: true,
        disabled: true,
      },
    ],
  },
];