PickList

Transfiere elementos entre listas de disponibles y seleccionados con arrays controlados.

Categoría: Formularios y selección
Import: @neural-ui/core/pick-list
Selector: neu-pick-list

import { NeuPickListComponent } from '@neural-ui/core/pick-list';

Uso

Aplica itemsChange.source e itemsChange.target juntos para no duplicar un elemento entre listas. sourceChange y targetChange aportan propuestas individuales; itemsChange contiene la transferencia completa. moveAllScope="filtered" mueve los elementos visibles habilitados; "all" utiliza la colección completa habilitada. No se mueven elementos disabled.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Disponibles

Seleccionados

Sin proyectos coincidentes

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Disponibles

Seleccionados

Sin proyectos coincidentes

Eventos: 0

filter

dragDrop

Opciones avanzadas · 9

Comportamiento y contenido

sourceFilterValue

targetFilterValue

emptyFilterLabel

filterPlaceholder

sourceFilterLabel

sourceHeader

targetFilterLabel

targetHeader

Los datos estructurados, callbacks y templates se muestran en los ejemplos y en la API.

El código añade las opciones avanzadas cuando difieren del valor predeterminado. Los datos y valores de esta configuración aparecen en el estado del template.

<neu-pick-list
  [source]="available()"
  [target]="chosen()"
  [filter]="true"
  [dragDrop]="false"
  (itemsChange)="
    available.set($event.source);
    chosen.set($event.target);
    record('itemsChange', $event)
  "
  [emptyFilterLabel]="'Sin proyectos coincidentes'"
  [filterPlaceholder]="'Buscar proyectos'"
  [sourceFilterLabel]="'Filtrar proyectos disponibles'"
  [sourceHeader]="'Disponibles'"
  [targetFilterLabel]="'Filtrar proyectos seleccionados'"
  [targetHeader]="'Seleccionados'"
></neu-pick-list>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

import { signal } from '@angular/core';

export const available = signal([
  {
    "value": "atlas",
    "label": "Atlas"
  },
  {
    "value": "birch",
    "label": "Birch"
  },
  {
    "value": "cedar",
    "label": "Cedar"
  },
  {
    "value": "locked",
    "label": "Locked",
    "disabled": true
  }
]);

export const chosen = signal([]);

Inputs de datos, callbacks y configuración estructurada

Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.

filterConfig · Readonly<NeuOptionFilterConfig<T>>

En Código: define filterConfig con este tipo y utiliza [filterConfig]="filterConfig" (o filterConfig() si es una signal).

optionDisabled · NeuOptionDisabledAccessor<T> | null

En Código: define optionDisabled con este tipo y utiliza [optionDisabled]="optionDisabled" (o optionDisabled() si es una signal).

optionLabel · NeuOptionLabelAccessor<T> | null

En Código: define optionLabel con este tipo y utiliza [optionLabel]="optionLabel" (o optionLabel() si es una signal).

optionValue · NeuOptionValueAccessor<T, V> | null

En Código: define optionValue con este tipo y utiliza [optionValue]="optionValue" (o optionValue() si es una signal).

sourceSelectionKeys · readonly V[] | undefined

En Código: define sourceSelectionKeys con este tipo y utiliza [sourceSelectionKeys]="sourceSelectionKeys" (o sourceSelectionKeys() si es una signal).

targetSelectionKeys · readonly V[] | undefined

En Código: define targetSelectionKeys con este tipo y utiliza [targetSelectionKeys]="targetSelectionKeys" (o targetSelectionKeys() si es una signal).

Estado y eventos

Accesibilidad y teclado

Usa Tab para alcanzar los elementos y botones de transferencia. Intro o Espacio selecciona un elemento o activa un botón de transferencia. Estos controles siguen disponibles sin dragDrop.

Tecla	Acción
`Tab`	Recorre los botones de elementos y los controles disponibles para ordenar o transferir.
`Enter`	Selecciona el elemento enfocado o activa el botón de ordenar o transferir. No es necesario arrastrar.
`Space`	Selecciona el elemento enfocado o activa el botón de ordenar o transferir. No es necesario arrastrar.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`dragDrop`	`boolean`	`false`	`[dragDrop]`	Habilita el arrastre opcional; teclado y botones siguen disponibles.
`emptyFilterLabel`	`string`	`'No matching items'`	`[emptyFilterLabel]`	Texto que se muestra cuando no hay entradas coincidentes con el filtro.
`filter`	`boolean`	`false`	`[filter]`	Consulta de búsqueda original modificada por el usuario.
`filterConfig`	`Readonly<NeuOptionFilterConfig<T>>`	`{}`	`[filterConfig]`	Campos, modo de comparación, idioma y estrategia de filtrado local o remoto.
`filterPlaceholder`	`string`	`'Filter items'`	`[filterPlaceholder]`	Nombre accesible o texto de ayuda del filtro de la lista correspondiente.
`moveAllScope`	`NeuPickListMoveAllScope`	`'filtered'`	`[moveAllScope]`	Elige si mover todo transfiere las entradas visibles filtradas o todas las habilitadas.
`optionDisabled`	`NeuOptionDisabledAccessor<T> \| null`	`null`	`[optionDisabled]`	Nombre de campo o función que indica si una opción está deshabilitada.
`optionLabel`	`NeuOptionLabelAccessor<T> \| null`	`null`	`[optionLabel]`	Nombre de campo o función que obtiene la etiqueta visible de la opción.
`optionValue`	`NeuOptionValueAccessor<T, V> \| null`	`null`	`[optionValue]`	Nombre de campo o función que obtiene el valor guardado de la opción.
`source`	`readonly T[]`	`[]`	`[source]`	Colección aplicada en el lado correspondiente de disponibles o seleccionados.
`sourceFilterLabel`	`string`	`'Filter available items'`	`[sourceFilterLabel]`	Nombre accesible o texto de ayuda del filtro de la lista correspondiente.
`sourceFilterValue`	`string \| null`	`null`	`[sourceFilterValue]`	Filtro de texto aplicado; null deja su gestión al componente.
`sourceHeader`	`string`	`'Available'`	`[sourceHeader]`	Título visible de la lista de transferencia correspondiente.
`sourceSelectionKeys`	`readonly V[] \| undefined`	`undefined`	`[sourceSelectionKeys]`	Valores estables aplicados de las opciones seleccionadas. undefined usa selección local.
`target`	`readonly T[]`	`[]`	`[target]`	Colección aplicada en el lado correspondiente de disponibles o seleccionados.
`targetFilterLabel`	`string`	`'Filter selected items'`	`[targetFilterLabel]`	Nombre accesible o texto de ayuda del filtro de la lista correspondiente.
`targetFilterValue`	`string \| null`	`null`	`[targetFilterValue]`	Filtro de texto aplicado; null deja su gestión al componente.
`targetHeader`	`string`	`'Selected'`	`[targetHeader]`	Título visible de la lista de transferencia correspondiente.
`targetSelectionKeys`	`readonly V[] \| undefined`	`undefined`	`[targetSelectionKeys]`	Valores estables aplicados de las opciones seleccionadas. undefined usa selección local.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`itemDrop`	`NeuPickListDropEvent<T>`	`(itemDrop)="onItemDrop($event)"`	Informa del drop por puntero/teclado con elemento, listas e índices. Aplica la propuesta de estado para aceptarlo.
`itemsChange`	`{ source: T[]; target: T[]; }`	`(itemsChange)="onItemsChange($event)"`	Propone los arrays source y target. Aplícalos juntos para aceptar una transferencia atómica.
`sourceChange`	`T[]`	`(sourceChange)="onSourceChange($event)"`	Propone la colección de reemplazo del lado correspondiente de PickList.
`sourceFilterChange`	`string`	`(sourceFilterChange)="onSourceFilterChange($event)"`	Propone el filtro de texto de la lista correspondiente.
`sourceSelectionChange`	`T[]`	`(sourceSelectionChange)="onSourceSelectionChange($event)"`	Informa de los objetos seleccionados en la lista correspondiente.
`targetChange`	`T[]`	`(targetChange)="onTargetChange($event)"`	Propone la colección de reemplazo del lado correspondiente de PickList.
`targetFilterChange`	`string`	`(targetFilterChange)="onTargetFilterChange($event)"`	Propone el filtro de texto de la lista correspondiente.
`targetSelectionChange`	`T[]`	`(targetSelectionChange)="onTargetSelectionChange($event)"`	Informa de los objetos seleccionados en la lista correspondiente.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`NeuPickListItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuPickListItem]`

NeuPickListItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuPickListItem]

Declaración

import type { NeuTransferItem } from '@neural-ui/core/pick-list';

import { NeuPickListItemDirective } from '@neural-ui/core/pick-list';

// Declaración pública (solo referencia)
export declare class NeuPickListItemDirective<T = NeuTransferItem> {
  readonly neuPickListItem: import("@angular/core").InputSignal<"" | readonly T[]>;
}

Contexto completo

import type { NeuPickListItemContext } from '@neural-ui/core/pick-list';

import { NeuPickListItemDirective } from '@neural-ui/core/pick-list';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuPickListItemContext<T>>;

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

NeuPickListItemDirective

NeuPickListItemDirective

Disponibles

Seleccionados

Sin proyectos coincidentes

Eventos: 0

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuListLocationTypeScript

NeuListMoveTypeScript

NeuOptionAccessorTypeScript

import type { NeuOptionPath } from '@neural-ui/core/option-api';

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionAccessor<T, R = unknown> = Exclude<keyof T, string> | NeuOptionPath<T> | ((option: T) => R);

NeuOptionDisabledAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionDisabledAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionDisabledAccessor<T> = NeuOptionAccessor<T, boolean>;

NeuOptionFilterConfigTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';
import type { NeuOptionFilterMatchMode } from '@neural-ui/core/option-api';
import type { NeuOptionFilterStrategy } from '@neural-ui/core/option-api';

import type { NeuOptionFilterConfig } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuOptionFilterConfig<T> {
  readonly fields?: readonly NeuOptionAccessor<T, unknown>[];
  readonly locale?: string;
  readonly matchMode?: NeuOptionFilterMatchMode;
  readonly strategy?: NeuOptionFilterStrategy;
}

NeuOptionFilterMatchModeTypeScript

import type { NeuOptionFilterMatchMode } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionFilterMatchMode = 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals';

NeuOptionFilterStrategyTypeScript

import type { NeuOptionFilterStrategy } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionFilterStrategy = 'client' | 'server';

NeuOptionLabelAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionLabelAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionLabelAccessor<T> = NeuOptionAccessor<T, string>;

NeuOptionPathTypeScript

import type { NeuOptionPath } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionPath<T> = Extract<keyof T, string> | `${Extract<keyof T, string>}.${string}`;

NeuOptionValueAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionValueAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionValueAccessor<T, V> = NeuOptionAccessor<T, V>;

NeuOrderListItemContextTypeScript

import type { NeuOrderListItemContext } from '@neural-ui/core/pick-list';

// Declaración pública (solo referencia)
export interface NeuOrderListItemContext<T> {
  readonly $implicit: T;
  readonly index: number;
  readonly selected: boolean;
}

NeuPickListDropEventTypeScript

import type { NeuListLocation } from '@neural-ui/core/pick-list';

import type { NeuPickListDropEvent } from '@neural-ui/core/pick-list';

// Declaración pública (solo referencia)
export interface NeuPickListDropEvent<T> {
  readonly currentIndex: number;
  readonly from: NeuListLocation;
  readonly interaction: 'pointer' | 'keyboard';
  readonly item: T;
  readonly originalEvent: MouseEvent | TouchEvent | KeyboardEvent | null;
  readonly previousIndex: number;
  readonly to: NeuListLocation;
}

NeuPickListItemContextTypeScript

import type { NeuListLocation } from '@neural-ui/core/pick-list';

import type { NeuPickListItemContext } from '@neural-ui/core/pick-list';

// Declaración pública (solo referencia)
export interface NeuPickListItemContext<T> {
  readonly $implicit: T;
  readonly location: NeuListLocation;
  readonly selected: boolean;
}

NeuPickListMoveAllScopeTypeScript

import type { NeuPickListMoveAllScope } from '@neural-ui/core/pick-list';

// Declaración pública (solo referencia)
export type NeuPickListMoveAllScope = 'filtered' | 'all';

NeuTransferItemTypeScript

import type { NeuTransferItem } from '@neural-ui/core/pick-list';

// Declaración pública (solo referencia)
export interface NeuTransferItem {
  data?: unknown;
  disabled?: boolean;
  label: string;
  value: string;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-border-hover`	Bordes de controles al pasar el puntero	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.16)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-transition`	Duración de los cambios de estado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`200ms ease`