Combobox

import {
  KuiComboboxDirective,
  KuiComboboxHighlightPipe,
  KuiDropdownComponent,
  KuiFieldComponent,
  KuiOptionDirective,
  kuiProvideComboboxOptions,
} from '@kikita-labs/ui';

<kui-field label="Assignee" hint="Type to filter projected options">
  <input
    kuiCombobox
    [(value)]="assignee"
    [(query)]="query"
    [kuiLabelFn]="personLabel"
    placeholder="Search people..."
    (search)="query.set($event)"
  />

  <kui-dropdown>
    @for (person of filteredPeople(); track person.id) {
      <button kuiOption [value]="person">
        <span class="kui-combobox-match-label">
          @for (segment of person.name | kuiComboboxHighlight: query(); track $index) {
            @if (segment.match) {
              <mark class="kui-combobox-highlight">{{ segment.text }}</mark>
            } @else {
              <span>{{ segment.text }}</span>
            }
          }
        </span>
      </button>
    } @empty {
      <div class="kui-combobox-empty">No people found</div>
    }
  </kui-dropdown>
</kui-field>

<kui-field label="Reviewer" hint="Simulates a remote lookup with a loading row">
  <input
    kuiCombobox
    mode="async"
    [(value)]="reviewer"
    [(query)]="reviewerQuery"
    [loading]="loading()"
    [kuiLabelFn]="personLabel"
    placeholder="Type to search..."
    (search)="loadReviewers($event)"
  />

  <kui-dropdown>
    @if (loading()) {
      <div class="kui-combobox-loading-row">
        <span class="kui-combobox-loader" aria-hidden="true"></span>
        Loading people
      </div>
    } @else if (errorMessage(); as lookupError) {
      <div class="kui-combobox-empty" role="alert">{{ lookupError }}</div>
    } @else {
      @for (person of reviewers(); track person.id) {
        <button kuiOption [value]="person">{{ person.name }}</button>
      } @empty {
        <div class="kui-combobox-empty">No matches</div>
      }
    }
  </kui-dropdown>
</kui-field>

<kui-field label="Tag" hint="Type a custom tag or choose a suggestion">
  <input kuiCombobox mode="free" [(value)]="tag" placeholder="Type or choose..." />
  <kui-dropdown>
    <button kuiOption value="Bug">Bug</button>
    <button kuiOption value="Feature">Feature</button>
    <button kuiOption value="Regression">Regression</button>
  </kui-dropdown>
</kui-field>

<div class="combobox-field-states-example">
  <kui-field label="Owner" hint="Disabled prevents editing and opening the dropdown">
    <input kuiCombobox disabled [(value)]="disabledOwner" placeholder="Search people..." />
    <kui-dropdown>
      <button kuiOption value="engineer">Software Engineer</button>
      <button kuiOption value="designer">Designer</button>
    </kui-dropdown>
  </kui-field>

  <kui-field label="Owner" error="Choose an owner before continuing">
    <input kuiCombobox invalid [(value)]="invalidOwner" placeholder="Search people..." />
    <kui-dropdown>
      <button kuiOption value="engineer">Software Engineer</button>
      <button kuiOption value="designer">Designer</button>
    </kui-dropdown>
  </kui-field>
</div>

import { kuiProvideComboboxOptions } from '@kikita-labs/ui';

export const appConfig: ApplicationConfig = {
  providers: [
    kuiProvideComboboxOptions({
      clearable: true,
    }),
  ],
};