Combobox

import {
    Combobox,
    ComboboxChip,
    ComboboxChips,
    ComboboxChipsInput,
    ComboboxContent,
    ComboboxEmpty,
    ComboboxInput,
    ComboboxItem,
    ComboboxList,
    ComboboxValue,
    Label,
} from '@stroeer-labs/design-library/react';

const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'];

export function ComboboxDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Default</p>
                <div className="grid gap-1.5">
                    <Label htmlFor="combobox-default">Framework</Label>
                    <Combobox items={frameworks}>
                        <ComboboxInput id="combobox-default" placeholder="Select a framework..." className="w-56" />
                        <ComboboxContent>
                            <ComboboxEmpty>No framework found.</ComboboxEmpty>
                            <ComboboxList>
                                {(item: string) => (
                                    <ComboboxItem key={item} value={item}>
                                        {item}
                                    </ComboboxItem>
                                )}
                            </ComboboxList>
                        </ComboboxContent>
                    </Combobox>
                </div>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Multiple</p>
                <div className="grid gap-1.5">
                    <Label htmlFor="combobox-multiple">Frameworks</Label>
                    <Combobox items={frameworks} multiple>
                        <ComboboxChips className="w-72">
                            <ComboboxValue>
                                {(value: Array<string>) => (
                                    <>
                                        {value.map((item) => (
                                            <ComboboxChip key={item} aria-label={item}>
                                                {item}
                                            </ComboboxChip>
                                        ))}
                                        <ComboboxChipsInput id="combobox-multiple" placeholder={value.length > 0 ? '' : 'Select frameworks...'} />
                                    </>
                                )}
                            </ComboboxValue>
                        </ComboboxChips>
                        <ComboboxContent>
                            <ComboboxEmpty>No framework found.</ComboboxEmpty>
                            <ComboboxList>
                                {(item: string) => (
                                    <ComboboxItem key={item} value={item}>
                                        {item}
                                    </ComboboxItem>
                                )}
                            </ComboboxList>
                        </ComboboxContent>
                    </Combobox>
                </div>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">With clear button</p>
                <div className="grid gap-1.5">
                    <Label htmlFor="combobox-clear">Framework</Label>
                    <Combobox items={frameworks}>
                        <ComboboxInput id="combobox-clear" placeholder="Select a framework..." className="w-56" showClear />
                        <ComboboxContent>
                            <ComboboxEmpty>No framework found.</ComboboxEmpty>
                            <ComboboxList>
                                {(item: string) => (
                                    <ComboboxItem key={item} value={item}>
                                        {item}
                                    </ComboboxItem>
                                )}
                            </ComboboxList>
                        </ComboboxContent>
                    </Combobox>
                </div>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Disabled</p>
                <div className="grid gap-1.5">
                    <Label htmlFor="combobox-disabled">Framework</Label>
                    <Combobox items={frameworks} disabled>
                        <ComboboxInput id="combobox-disabled" placeholder="Select a framework..." className="w-56" disabled />
                        <ComboboxContent>
                            <ComboboxEmpty>No framework found.</ComboboxEmpty>
                            <ComboboxList>
                                {(item: string) => (
                                    <ComboboxItem key={item} value={item}>
                                        {item}
                                    </ComboboxItem>
                                )}
                            </ComboboxList>
                        </ComboboxContent>
                    </Combobox>
                </div>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {HlmComboboxImports, HlmLabel} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-combobox-demo',
    standalone: true,
    imports: [HlmComboboxImports, HlmLabel],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Default</p>
        <div class="grid gap-1.5">
          <label hlmLabel for="combobox-default">Framework</label>
          <hlm-combobox>
            <hlm-combobox-input inputId="combobox-default" placeholder="Select a framework..." class="w-56" />
            <hlm-combobox-content *hlmComboboxPortal>
              <hlm-combobox-empty>No framework found.</hlm-combobox-empty>
              <div hlmComboboxList>
                @for (framework of frameworks; track $index) {
                  <hlm-combobox-item [value]="framework">{{ framework }}</hlm-combobox-item>
                }
              </div>
            </hlm-combobox-content>
          </hlm-combobox>
        </div>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Multiple</p>
        <div class="grid gap-1.5">
          <label hlmLabel for="combobox-multiple">Frameworks</label>
          <hlm-combobox-multiple [(value)]="values">
            <hlm-combobox-chips class="w-72">
              <ng-template hlmComboboxValues let-selected>
                @for (item of selected; track $index) {
                  <hlm-combobox-chip [value]="item">{{ item }}</hlm-combobox-chip>
                }
              </ng-template>
              <input hlmComboboxChipInput id="combobox-multiple" [placeholder]="values.length > 0 ? '' : 'Select frameworks...'" />
            </hlm-combobox-chips>
            <hlm-combobox-content *hlmComboboxPortal>
              <hlm-combobox-empty>No framework found.</hlm-combobox-empty>
              <div hlmComboboxList>
                @for (framework of frameworks; track $index) {
                  <hlm-combobox-item [value]="framework">{{ framework }}</hlm-combobox-item>
                }
              </div>
            </hlm-combobox-content>
          </hlm-combobox-multiple>
        </div>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">With clear button</p>
        <div class="grid gap-1.5">
          <label hlmLabel for="combobox-clear">Framework</label>
          <hlm-combobox>
            <hlm-combobox-input inputId="combobox-clear" placeholder="Select a framework..." class="w-56" showClear />
            <hlm-combobox-content *hlmComboboxPortal>
              <hlm-combobox-empty>No framework found.</hlm-combobox-empty>
              <div hlmComboboxList>
                @for (framework of frameworks; track $index) {
                  <hlm-combobox-item [value]="framework">{{ framework }}</hlm-combobox-item>
                }
              </div>
            </hlm-combobox-content>
          </hlm-combobox>
        </div>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Disabled</p>
        <div class="grid gap-1.5">
          <label hlmLabel for="combobox-disabled">Framework</label>
          <hlm-combobox disabled>
            <hlm-combobox-input inputId="combobox-disabled" placeholder="Select a framework..." class="w-56" />
            <hlm-combobox-content *hlmComboboxPortal>
              <hlm-combobox-empty>No framework found.</hlm-combobox-empty>
              <div hlmComboboxList>
                @for (framework of frameworks; track $index) {
                  <hlm-combobox-item [value]="framework">{{ framework }}</hlm-combobox-item>
                }
              </div>
            </hlm-combobox-content>
          </hlm-combobox>
        </div>
      </div>
    </div>
  `,
})
export class ComboboxDemoComponent {
    readonly frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'];
    values: Array<string> = [];
}