@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:

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).

Ejemplo de uso

<div cbmResizeContainerDirective [resizeHeight]="20" [observerAttributes]="true" [center-scroll]="true">
  <div>
    <!-- contenido dinámico aquí -->
  </div>
</div>

Ejemplo en componente standalone

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

@Component({
  standalone: true,
  imports: [CbmResizeContainerDirective],
  template: `
    <div cbmResizeContainerDirective>
      <div *ngFor="let i of items">Item {{ i }}</div>
    </div>
  `
})
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:

# 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:

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).