Cbm Record Detail Metadata (es)

Componente reutilizable que muestra la información de metadatos de un registro (id, fecha, usuario, estado, etiquetas) y un menú de opciones. Está diseñado como componente standalone con Shadow DOM para aislamiento de estilos.

Exporta:

• CbmRecordDetailMetadataComponent — componente principal.
• CbmRecordDetailMetadataModel — tipos para metadata, additionalMetadata y options.

Instalación

1. Desde el monorepo, la librería se importa directamente por su nombre de paquete definido en el workspace. Asegúrate de tener en tsconfig.json la ruta al public-api.ts de la librería (esto ayuda al editor a resolver tipos sin compilar):

"paths": {
  "record-detail-metadata": ["./dist/record-detail-metadata", "./projects/record-detail-metadata/src/public-api.ts"]
}

2. En la aplicación, simplemente importa el componente (al ser standalone) en la declaración del componente que lo use:

import { CbmRecordDetailMetadataComponent } from 'record-detail-metadata';

@Component({
  standalone: true,
  imports: [CbmRecordDetailMetadataComponent],
  template: `
    <cbm-record-detail-metadata [metadata]="itemMeta" [options]="options"></cbm-record-detail-metadata>
  `
})
export class ExampleComponent {}

API / Entradas (inputs)

• metadata: CbmRecordDetailMetadataModel.metadata | null (requerido): Objeto con la información principal del registro. Campos relevantes:

  • _id: string — identificador.
  • title: string — título mostrado en el encabezado.
  • iconClass: string — clases CSS para el icono principal (p. ej. mdi mdi-account).
  • created_at: Date | string — fecha de creación (el componente la formatea).
  • created_user: string — usuario creador.
  • enabled?: boolean — estado lógico.
  • reverse_status?: boolean — indica reversado.
  • eliminated?: boolean — indica eliminado.
  • badge_text?: string y badge_color?: 'danger'|'success'|'info'|'primary'|'secondary'|'warning' — etiqueta adicional.
  • routeToReturn?: string — ruta a la que navegar con el botón "Regresar".

• additionalMetadata?: CbmRecordDetailMetadataModel.additionalMetadata[] (opcional): lista de pares { iconClass?, property, value } que se muestran debajo de la info principal.

• options?: CbmRecordDetailMetadataModel.options[] (opcional): lista de acciones/elementos del menú. Cada opción tiene forma:

  • id?: string — identificador.
  • label?: string — texto mostrado.
  • labelDisabled?: string — texto cuando está deshabilitada.
  • iconClass?: string — clases para icono.
  • loading?: 'init'|'loading'|'success'|'failed' — estado visual.
  • isChangeStatus?: boolean — opción que cambia estado (el componente dispone changeState para actualizar estado internamente).
  • routerLink?: string | any[] — enlace de navegación.
  • queryParams?: Record<string, any> — parámetros de ruta.
  • hiddenOption?: boolean — si true, no se muestra.
  • children?: options[] — sub-opciones.
  • function?: (op: WritableSignal<CbmRecordDetailMetadataModel.OptionsParams>) => void — callback que el componente invoca pasando una WritableSignal que representa el estado de la opción. IMPORTANTE: la firma espera una signal escribible; puedes leer y actualizar el estado desde el callback.

Comportamiento importante: inyección de estilos (icon fonts)

• El componente, al inicializarse, intenta cargar assets/css/style.min.css y extraer las reglas de iconos y fuentes necesarias para que las clases tipo mdi funcionen dentro del Shadow DOM. Luego inyecta estas reglas dentro del shadowRoot utilizando Renderer2.
• Por tanto, para que los iconos funcionen dentro del componente, asegúrate de que tu bundle de estilos público incluya las reglas de icon fonts en assets/css/style.min.css o ajusta la ruta dentro del componente.

Ejemplos

1. Uso básico

<cbm-record-detail-metadata
  [metadata]="{
    _id: '123',
    title: 'Factura #123',
    iconClass: 'mdi mdi-file-document',
    created_at: '2024-01-01T12:00:00Z',
    created_user: 'admin',
    enabled: true
  }"
></cbm-record-detail-metadata>

2. Uso con opciones y callback que recibe la signal

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

const options = [
  {
    id: 'disable',
    label: 'Desactivar',
    iconClass: 'mdi mdi-power',
    isChangeStatus: true,
    function: (opSignal) => {
      // leer estado actual
      const state = opSignal();
      // iniciar cambio visual a loading
      opSignal({ ...state, loading: 'loading' });
      // realizar llamada http y luego actualizar
      setTimeout(() => opSignal({ ...state, loading: 'success' }), 1000);
    }
  }
];

Notas y consideraciones

• El componente usa Shadow DOM para aislar estilos; por eso inyecta CSS específico de icon fonts al shadowRoot. Si tu proyecto carga icon fonts de otra forma, podría ser necesario ajustar la extracción/inyección.
• La propiedad options[].function recibe una WritableSignal: actualiza loading u otros flags para que la UI del menú muestre estados.
• Al usar routerLink en una opción, el componente delega a lib-options (componente hijo) para renderizar enlaces.

Contribuciones

• Si quieres extender la extracción de estilos (por ejemplo, usar otra ruta o múltiples archivos CSS), edita record-detail-metadata.component.ts en la función ngOnInit.

Licencia

• Revisa la licencia del repositorio principal.