Select

import {Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue} from '@stroeer-labs/design-library/react';

const fruits = [
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'},
    {label: 'Blueberry', value: 'blueberry'},
    {label: 'Grapes', value: 'grapes'},
    {label: 'Pineapple', value: 'pineapple'},
];

export function SelectDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Default</p>
                <Select items={fruits}>
                    <SelectTrigger className="w-56">
                        <SelectValue placeholder="Select a fruit" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectLabel>Fruits</SelectLabel>
                            {fruits.map((f) => (
                                <SelectItem key={f.value} value={f.value}>
                                    {f.label}
                                </SelectItem>
                            ))}
                        </SelectGroup>
                    </SelectContent>
                </Select>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Small</p>
                <Select items={fruits}>
                    <SelectTrigger size="sm" className="w-56">
                        <SelectValue placeholder="Select a fruit" />
                    </SelectTrigger>
                    <SelectContent>
                        {fruits.map((f) => (
                            <SelectItem key={f.value} value={f.value}>
                                {f.label}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Disabled</p>
                <Select disabled items={fruits}>
                    <SelectTrigger className="w-56">
                        <SelectValue placeholder="Select a fruit" />
                    </SelectTrigger>
                    <SelectContent>
                        {fruits.map((f) => (
                            <SelectItem key={f.value} value={f.value}>
                                {f.label}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </div>
        </div>
    );
}

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

@Component({
    selector: 'dl-select-demo',
    standalone: true,
    imports: [HlmSelectImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Default</p>
        <hlm-select [itemToString]="itemToString">
          <hlm-select-trigger class="w-56">
            <hlm-select-value placeholder="Select a fruit" />
          </hlm-select-trigger>
          <hlm-select-content *hlmSelectPortal>
            <hlm-select-group>
              <hlm-select-label>Fruits</hlm-select-label>
              @for (item of fruits; track item.value) {
                <hlm-select-item [value]="item.value">{{ item.label }}</hlm-select-item>
              }
            </hlm-select-group>
          </hlm-select-content>
        </hlm-select>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Small</p>
        <hlm-select [itemToString]="itemToString">
          <hlm-select-trigger size="sm" class="w-56">
            <hlm-select-value placeholder="Select a fruit" />
          </hlm-select-trigger>
          <hlm-select-content *hlmSelectPortal>
            @for (item of fruits; track item.value) {
              <hlm-select-item [value]="item.value">{{ item.label }}</hlm-select-item>
            }
          </hlm-select-content>
        </hlm-select>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Disabled</p>
        <hlm-select [disabled]="true" [itemToString]="itemToString">
          <hlm-select-trigger class="w-56">
            <hlm-select-value placeholder="Select a fruit" />
          </hlm-select-trigger>
          <hlm-select-content *hlmSelectPortal>
            @for (item of fruits; track item.value) {
              <hlm-select-item [value]="item.value">{{ item.label }}</hlm-select-item>
            }
          </hlm-select-content>
        </hlm-select>
      </div>
    </div>
  `,
})
export class SelectDemoComponent {
    readonly fruits = [
        {label: 'Apple', value: 'apple'},
        {label: 'Banana', value: 'banana'},
        {label: 'Blueberry', value: 'blueberry'},
        {label: 'Grapes', value: 'grapes'},
        {label: 'Pineapple', value: 'pineapple'},
    ];

    readonly itemToString = (value: string) => this.fruits.find((f) => f.value === value)?.label || '';
}