Command

import { FrCommandModule, FrCommandService } from '@frame-ui-ng/components/command';

<section frCommand class="command-demo">
  <input frCommandInput placeholder="Type a command or search..." />
  <div frCommandList>
    <p frCommandEmpty>No results found.</p>
    <div frCommandGroup heading="Suggestions">
      <p frCommandGroupHeading>Suggestions</p>
      <button frCommandItem value="calendar" label="Calendar">Calendar</button>
      <button frCommandItem value="emoji" label="Search Emoji">Search Emoji</button>
      <button frCommandItem value="calculator" label="Calculator" keywords="math,numbers">
        Calculator
      </button>
    </div>
    <div frCommandSeparator></div>
    <div frCommandGroup heading="Settings">
      <p frCommandGroupHeading>Settings</p>
      <button frCommandItem value="profile" label="Profile">
        <span>Profile</span>
        <span frCommandShortcut>⌘P</span>
      </button>
      <button frCommandItem value="billing" label="Billing">
        <span>Billing</span>
        <span frCommandShortcut>⌘B</span>
      </button>
    </div>
  </div>
  <div frCommandFooter>
    <span><kbd>↑↓</kbd> to navigate</span>
    <span><kbd>↵</kbd> to select</span>
    <span><kbd>esc</kbd> to close</span>
  </div>
</section>