@cbm-common/resize-container-directive

Directiva para ajustar automáticamente la altura de un contenedor a su contenido interno y controlar el scroll centrado. Diseñada para Angular 20 y migrada desde mf-common.

Descripción

CbmResizeContainerDirective observa cambios en el DOM del elemento (mutations) y adapta la altura del contenedor padre para ajustarse al contenido. Opcionalmente puede centrar el scroll horizontalmente y reaccionar a eventos personalizados de "resize".

Características principales

- Ajusta la altura del contenedor según el contenido interno.
- Observa cambios (childList, subtree, attributes) mediante MutationObserver.
- Permite centrar el scroll horizontalmente.
- Permite escuchar eventos personalizados para forzar recalculo.
- Compatible con Angular 20 (signals/effects).

Instalación (local / monorepo)

Si trabajas en este monorepo, referencia la librería local desde projects/resize-container-directive/src/lib/resize-container.directive en los componentes de prueba.

Si publicas y usas desde npm, instala con:

``bash
npm install @cbm-common/resize-container-directive
`

Asegúrate de tener en peerDependencies versiones compatibles de Angular (ver package.json).

API - Atributos / Inputs

Aplica la directiva al elemento que actúa como contenedor exterior (el hijo directo contendrá el contenido):

- cbmResizeContainerDirective - selector de la directiva.
- resizeHeight (string | number) - valor numérico adicional que se suma al scrollHeight del contenido (por defecto 15).
- observerAttributes (boolean) - si observar atributos con MutationObserver (false por defecto).
- child-list (boolean | 'true' | 'false') - si observar childList (true por defecto).
- sub-tree (boolean | 'true' | 'false') - si observar subtree (true por defecto).
- center-scroll (boolean) - si centrar el scroll horizontal al inicializar y cuando cambie (false por defecto).
- resizeEvent (string) - nombre de evento personalizado para forzar recalculo (opcional).

$3

`html

`

$3

`ts
import { Component } from '@angular/core';
import { CbmResizeContainerDirective } from 'projects/resize-container-directive/src/lib/resize-container.directive';

@Component({
standalone: true,
imports: [CbmResizeContainerDirective],
template:


})
export class DemoComponent { items = [1,2,3]; }
`

> Nota: en monorepo preferimos importar la directiva desde projects/.../src/lib/... durante el desarrollo.

Desarrollo y build

Desde la raíz del workspace:

`powershell

compilar la librería

npx -p @angular/cli@20 ng build resize-container-directive

(opcional) servir la app de ejemplo

npm start
`

Pruebas

Ejecuta las pruebas unitarias:

`bash
ng test resize-container-directive
`

Publicación

1. Ejecuta ng build resize-container-directive.
2. Ve a dist/resize-container-directive.
3. Ejecuta npm publish (o publica en tu registry privado).

Migración y compatibilidad

- Esta versión apunta a Angular 20.1.5 como peerDependencies. Si migras desde Angular 17 o versiones anteriores, revisa el uso de signals, computed y effect en la directiva.

Contribuciones

Pull requests y correcciones son bienvenidas. Sigue las convenciones del monorepo y ejecuta ng test antes de enviar PR.

Licencia

Licencia del proyecto (ver package.json` del monorepo).