Multiselect

import { NeuMultiselectComponent, NeuMultiselectItemDirective } from '@neural-ui/core/multiselect';
import type { NeuSelectOption } from '@neural-ui/core/select';

import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { NeuMultiselectComponent, NeuMultiselectItemDirective } from '@neural-ui/core/multiselect';
import { NeuSelectOption } from '@neural-ui/core/select';

const options: NeuSelectOption[] = [
  { value: 'angular', label: 'Angular' },
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue.js', disabled: true },
];

// Con campo data — adjunta el objeto de origen sin transformación / With data field — attaches source object without transformation
const users: NeuSelectOption[] = [
  { value: '1', label: 'Ana García', data: { id: 1, role: 'admin' } },
  { value: '2', label: 'Pablo Martín', data: { id: 2, role: 'editor' } },
];

@Component({
  imports: [NeuMultiselectComponent, NeuMultiselectItemDirective, ReactiveFormsModule],
  template: `
    <neu-multiselect label="Tecnologías" [options]="options" [formControl]="selectedCtrl" />

    <!-- Con URL State — persiste en ?skills=angular,react y se restaura al recargar / With URL State — persists in ?skills=angular,react and restores on reload -->
    <neu-multiselect label="Skills" [options]="options" urlParam="skills" />

    <!-- selectionChange: emite NeuSelectOption[] con el array completo (incluyendo data) / selectionChange: emits NeuSelectOption[] with the full array (including data) -->
    <!-- formControl sigue almacenando string[]; selectionChange da acceso a los objetos de origen / formControl still stores string[]; selectionChange gives access to the source objects -->
    <neu-multiselect
      label="Usuarios"
      [options]="users"
      [formControl]="userIdsCtrl"
      [clearable]="true"
      (selectionChange)="onUsersSelect($event)"
    />

    <!-- Template personalizado para ítems del panel / Custom template for panel items -->
    <neu-multiselect label="Tecnologías" [options]="options" [formControl]="selectedCtrl">
      <ng-template neuMultiselectItem let-item>
        <span style="display: inline-flex; align-items: center; gap: 8px">
          <span style="font-size: 16px">{{ item.value === 'angular' ? '🅰️' : '📦' }}</span>
          {{ item.label }}
        </span>
      </ng-template>
    </neu-multiselect>

    <!-- Con Reactive Forms / With Reactive Forms -->
    <neu-multiselect
      label="Países"
      [options]="countries"
      [formControl]="countriesCtrl"
      [errorMessage]="countriesCtrl.invalid ? 'Requerido' : ''"
    />
  `
})
export class MyComponent {
  readonly selectedCtrl = new FormControl<string[]>([], { nonNullable: true });
  readonly userIdsCtrl = new FormControl<string[]>([], { nonNullable: true }); // sigue siendo string[]
  readonly countriesCtrl = new FormControl<string[]>([], Validators.required);

  selectedUsers: { id: number; role: string }[] = [];

  onUsersSelect(opts: NeuSelectOption[]): void {
    // opts incluye el campo data de cada opción con el objeto de origen / opts includes the data field for each option with the source object
    this.selectedUsers = opts.map(o => o.data as { id: number; role: string });
  }
}