Referencia API

Aquí tienes el contrato completo de panels: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta panels a tu gusto con 29 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`type`	`'tabs' \| 'pills' \| 'accordion' \| 'card'`	`'tabs'`	Visualización del contenedor: tabs subrayadas, pills redondeadas o paneles de accordion apilados.
`vertical`	`boolean`	`false`	Apila la tira de cabeceras verticalmente junto al contenido (vistas tabs / pills).
`justified`	`boolean`	`false`	Estira las cabeceras para repartir equitativamente el ancho disponible.
`scrollable`	`boolean`	`false`	Añade botones de desplazamiento hacia atrás/adelante cuando la tira de cabeceras desborda.
`isKeysAllowed`	`boolean`	`true`	Habilita la navegación con teclado (flechas / Home / End / Delete).
`multiple`	`boolean`	`false`	Permite que varios paneles estén activos a la vez. En la vista de accordion todos se expanden; en las vistas de tabs/pills cada cabecera activa inicia un bloque de panel visible y las cabeceras inactivas siguientes permanecen agrupadas encima de ese bloque hasta que la siguiente cabecera activa inicia uno nuevo. El valor del formulario pasa a ser un array.
`flush`	`boolean`	`false`	Vista de accordion: paneles de borde a borde sin bordes exteriores ni radio.
`togglePosition`	`'start' \| 'end'`	`'end'`	En <hub-panels> (vista accordion): en qué lado de la fila de cabecera se sitúa el chevron de despliegue. "end" (por defecto) lo deja detrás del encabezado; "start" lo pone delante. Solo cambia el orden visual — el DOM no se toca — y los desplazamientos son lógicos, así que "start" es el borde izquierdo en LTR y el derecho en RTL. Fija el valor por defecto de toda la app con PanelsConfig.togglePosition.
`bindValue`	`string`	`undefined`	Ruta en notación de puntos aplicada al valor de cada panel para obtener el valor de formulario emitido (p. ej. 'meta.key').
`compareWith`	`(a: unknown, b: unknown) => boolean`	`(a, b) => a === b`	Igualdad utilizada para comparar los valores de formulario con los valores de los paneles.
`heading`	`string`	`undefined`	hub-panel: cabecera de texto plano. Se ignora cuando se proporciona una plantilla hubPanelHeading.
`appearance`	`'card' \| 'alert'`	`'card'`	hub-panel: apariencia visual de un panel independiente — 'card' (por defecto) o un aviso semántico 'alert'. Se ignora en las vistas de tabs/pills/accordion.
`variant`	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'info'`	`undefined`	hub-panel: color semántico de una alerta ('primary' \| 'success' \| 'danger' \| 'warning' \| 'info'). Omítelo para una alerta neutra.
`fill`	`boolean`	`false`	Solo panel card: llena la altura del padre y deja que el cuerpo haga scroll, de modo que una región interna flex:1/min-height:0 (p. ej. una tira de pestañas + panel con scroll) quede acotada. El padre debe ser una columna flex.
`standalone`	`boolean (static attribute)`	`false`	Solo panel card, atributo estático: excluye un <hub-panel> suelto de un grupo tabs/pills/accordion ancestro en la misma plantilla, de modo que se renderice como una card normal en lugar de ser capturado como una pestaña oculta.
`value`	`unknown`	`id`	hub-panel: valor aportado cuando el contenedor se usa como control de formulario.
`active`	`boolean (model)`	`false`	hub-panel: estado active/expanded con binding bidireccional.
`disabled`	`boolean`	`false`	hub-panel: impide que el panel pueda activarse.
`removable`	`boolean`	`false`	hub-panel: muestra un control ✕ y habilita la eliminación con la tecla Delete.
`removeLabel`	`string`	`'Remove panel'`	hub-panel: nombre accesible (aria-label) que se anuncia para el botón ✕ de eliminación; sobrescríbelo para localizar el control.
`routerLink`	`string \| string[]`	`undefined`	hub-panel: convierte el panel en un panel enrutado respaldado por un <router-outlet>.
`queryParams`	`Params`	`undefined`	hub-panel: parámetros de consulta añadidos al navegar a routerLink.
`pathMatch`	`'route' \| 'full'`	`'route'`	hub-panel: comparación de URL utilizada para marcar como activo un panel enrutado.
`customClass`	`string`	`undefined`	hub-panel: clases CSS adicionales aplicadas tanto al elemento del nav como al panel.
`items`	`HubTabNavItem[]`	`[]`	Las pestañas seleccionables de un <hub-tab-nav>, en orden de renderizado. Cada elemento es un descriptor ligero { value, label, disabled?, id? } — la tira no posee contenido, así que value es lo que emite cuando se elige la pestaña.
`active`	`unknown (model)`	`undefined`	Valor seleccionado con enlace bidireccional de un <hub-tab-nav>. Establécelo para preseleccionar una pestaña y léelo de vuelta a través de activeChange; el elemento coincidente es aquel cuyo value es igual a este.
`appearance`	`'tabs' \| 'pills'`	`'tabs'`	Aspecto visual de la tira <hub-tab-nav>: 'tabs' clásicas con subrayado (por defecto) o 'pills' redondeadas.
`justified`	`boolean`	`false`	Cuando es true, las pestañas del <hub-tab-nav> se estiran para repartir el ancho disponible por igual.
`vertical`	`boolean`	`false`	Cuando es true, la tira <hub-tab-nav> apila sus pestañas en vertical en lugar de disponerlas en una fila.

Outputs

Reacciona a lo que hace panels: 5 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`panelChange`	`EventEmitter<PanelChangeEvent>`	hub-panels: se emite cuando el usuario activa (abre) un panel diferente. Proporciona { current, prev }.
`selectPanel`	`EventEmitter<PanelComponent>`	hub-panel: se emite cuando el panel pasa a estar activo.
`deselectPanel`	`EventEmitter<PanelComponent>`	hub-panel: se emite cuando el panel deja de estar activo.
`removed`	`EventEmitter<PanelComponent>`	hub-panel: se emite cuando el panel se elimina mediante el botón ✕ o la tecla Delete.
`activeChange`	`EventEmitter<unknown>`	Emitido por <hub-tab-nav> cada vez que cambia el valor seleccionado (la mitad de cambio del modelo bidireccional active), transportando el value del elemento recién seleccionado.

Templates

Hazlo tuyo — 3 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`hubPanelHeading`	Marca un <ng-template> dentro de un hub-panel como la cabecera personalizada de ese panel (enlace de la tira en tabs/pills, botón de despliegue en accordion), reemplazando el input de cabecera de texto plano.	`<hub-panel> <ng-template hubPanelHeading> <i class="fa-solid fa-gear"></i> Settings <span class="badge text-bg-primary">3</span> </ng-template> Panel content </hub-panel>`
`hubPanelHeader / hubPanelFooter`	Marca un elemento dentro de un hub-panel como banda de cabecera/pie de contenido del panel. Se renderiza en todas las vistas (tabs, pills, accordion, card), distinto de hubPanelHeading.	`<hub-panel> <div hubPanelHeader>Card title</div> Card content <div hubPanelFooter>Actions</div> </hub-panel>`
`type="card"`	La visualización en tarjeta sin cromo: sin tira de navegación, todos los paneles siempre visibles. Un hub-panel también puede usarse de forma independiente, fuera de cualquier hub-panels, donde se renderiza como tarjeta.	`<hub-panels type="card"> <hub-panel>…</hub-panel> <hub-panel>…</hub-panel> </hub-panels>`