OrderList | Neural UI v2

Uso

Usa valores de opción estables para identificar elementos. selectionChange aporta los seleccionados; orderChange propone el nuevo array. Aplícalo a items para aceptar el orden. El filtro cambia el subconjunto visible, no la colección. dragDrop es opcional; botones y teclado ofrecen la misma operación.

Ejemplos

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

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.

Eventos: 0

filter

dragDrop

Opciones avanzadas · 5

<neu-order-list
  (filterChange)="onFilterChange($event)"
  [items]="available()"
  [filter]="true"
  [dragDrop]="false"
  [selectionKeys]="selected()"
  (selectionChange)="selected.set($event.map(itemKey))"
  (orderChange)="available.set($event); record('orderChange', $event)"
  [ariaLabel]="'Proyectos ordenados'"
  [emptyFilterLabel]="'Sin proyectos coincidentes'"
  [filterLabel]="'Filtrar proyectos'"
  [filterPlaceholder]="'Buscar proyectos'"
></neu-order-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 selected = 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).

Estado y eventos

Usa valores de opción estables para identificar elementos. selectionChange aporta los seleccionados; orderChange propone el nuevo array. Aplícalo a items para aceptar el orden. El filtro cambia el subconjunto visible, no la colección. dragDrop es opcional; botones y teclado ofrecen la misma operación.

Accesibilidad y teclado

Usa Tab para alcanzar los elementos y botones de orden. Intro o Espacio selecciona un elemento o activa un botón de orden. 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
`ariaLabel`	`string`	`'Ordered items'`	`[ariaLabel]`	Nombre accesible del control o regió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.
`filterLabel`	`string`	`'Filter ordered items'`	`[filterLabel]`	Nombre accesible o texto de ayuda del filtro de la lista correspondiente.
`filterPlaceholder`	`string`	`'Filter items'`	`[filterPlaceholder]`	Nombre accesible o texto de ayuda del filtro de la lista correspondiente.
`filterValue`	`string \| null`	`null`	`[filterValue]`	Consulta de búsqueda aplicada. Escucha filterChange si la controla la aplicación.
`items`	`readonly T[]`	`[]`	`[items]`	Colección aplicada de elementos. Claves y accesores estables identifican las entradas; el componente no modifica el array.
`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.
`selectionKeys`	`readonly V[] \| undefined`	`undefined`	`[selectionKeys]`	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
`filterChange`	`string`	`(filterChange)="onFilterChange($event)"`	Propone el array completo de filtros actualizado, incluidos sus estados activos. Sustituye filters para aceptarlo.
`itemDrop`	`NeuPickListDropEvent<T>`	`(itemDrop)="onItemDrop($event)"`	Informa del drop por puntero/teclado con elemento, listas e índices. Aplica la propuesta de estado para aceptarlo.
`orderChange`	`T[]`	`(orderChange)="onOrderChange($event)"`	Propone el array completo reordenado. Sustituye items o tiles para aceptarlo.
`selectionChange`	`T[]`	`(selectionChange)="onSelectionChange($event)"`	Propone la selección, la clave afectada y el origen de la interacción. Aplica payload.selection a selection.

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
`NeuOrderListItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuOrderListItem]`

NeuOrderListItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuOrderListItem]

Declaración

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

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

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

Contexto completo

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

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

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

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

NeuOrderListItemDirective

NeuOrderListItemDirective

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
Sin datos

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.