npm package: @jtejidov/cronograma-timeline
Description: Timeline Web Component for medical scheduling built with Angular Elements
Author: Your Name
Latest version: 1.0.23

# 🏥 Cronograma Timeline Web Component

Un componente de timeline médico construido con Angular Elements que puede ser usado en cualquier framework web.

## 🚀 Características

- ✅ **Framework Agnóstico**: Funciona con React, Vue, Angular, o JavaScript vanilla
- ✅ **Timeline Médico**: Diseñado específicamente para cronogramas médicos
- ✅ **Responsive**: Se adapta a diferentes tamaños de pantalla
- ✅ **Tooltips Personalizados**: Información detallada al hacer hover
- ✅ **Eventos Personalizados**: Comunica con la aplicación padre
- ✅ **Modales Integrados**: Detalles completos de múltiples elementos

## 📦 Instalación

```bash
npm install @your-scope/cronograma-timeline
```

## 🔧 Uso

### JavaScript Vanilla

```html
<!DOCTYPE html>
<html>
<head>
    <script src="node_modules/@your-scope/cronograma-timeline/main.js"></script>
    <link rel="stylesheet" href="node_modules/@your-scope/cronograma-timeline/styles.css">
</head>
<body>
    <cronograma-timeline 
        id="timeline"
        visits-data='[]'
        examinations-data='[]'
        emergencies-data='[]'
        admissions-data='[]'
        dur-date="01/03/2025"
        today-week="10"
        total-weeks="54">
    </cronograma-timeline>

    <script>
        const timeline = document.getElementById('timeline');
        
        // Escuchar eventos de documento
        timeline.addEventListener('document-clicked', (event) => {
            console.log('Documento clickeado:', event.detail);
        });
        
        // Cargar datos
        const visitasData = [
            {
                examinationsId: null,
                date: "2025-03-15T00:00:00.000Z",
                description: "Consulta médica",
                document: "12345",
                scheduleId: "visit-1",
                diagnostic: "Control rutinario"
            }
        ];
        
        timeline.setAttribute('visits-data', JSON.stringify(visitasData));
    </script>
</body>
</html>
```

### React

```tsx
import { useEffect, useRef } from 'react';

// Declaración de tipos para TypeScript
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'cronograma-timeline': any;
    }
  }
}

function TimelineComponent() {
  const timelineRef = useRef<HTMLElement>(null);

  useEffect(() => {
    // Importar el Web Component
    import('@your-scope/cronograma-timeline');
    
    // Configurar event listeners
    const timeline = timelineRef.current;
    if (timeline) {
      const handleDocumentClick = (event: CustomEvent) => {
        console.log('Documento clickeado:', event.detail);
      };
      
      timeline.addEventListener('document-clicked', handleDocumentClick);
      return () => timeline.removeEventListener('document-clicked', handleDocumentClick);
    }
  }, []);

  const visitasData = [
    {
      examinationsId: null,
      date: "2025-03-15T00:00:00.000Z", 
      description: "Consulta médica",
      document: "12345",
      scheduleId: "visit-1"
    }
  ];

  return (
    <cronograma-timeline
      ref={timelineRef}
      visits-data={JSON.stringify(visitasData)}
      examinations-data={JSON.stringify([])}
      emergencies-data={JSON.stringify([])}
      admissions-data={JSON.stringify([])}
      dur-date="01/03/2025"
      today-week={10}
      total-weeks={54}
    />
  );
}

export default TimelineComponent;
```

### Vue 3

```vue
<template>
  <cronograma-timeline
    ref="timelineRef"
    :visits-data="JSON.stringify(visitasData)"
    :examinations-data="JSON.stringify([])"
    :emergencies-data="JSON.stringify([])"
    :admissions-data="JSON.stringify([])"
    dur-date="01/03/2025"
    :today-week="10"
    :total-weeks="54"
    @document-clicked="handleDocumentClick"
  />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const timelineRef = ref();

const visitasData = ref([
  {
    examinationsId: null,
    date: "2025-03-15T00:00:00.000Z",
    description: "Consulta médica", 
    document: "12345",
    scheduleId: "visit-1"
  }
]);

onMounted(async () => {
  await import('@your-scope/cronograma-timeline');
});

const handleDocumentClick = (event: CustomEvent) => {
  console.log('Documento clickeado:', event.detail);
};
</script>
```

### Angular

```typescript
// app.component.ts
import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <cronograma-timeline 
      [attr.visits-data]="visitasDataString"
      [attr.examinations-data]="'[]'"
      [attr.emergencies-data]="'[]'"
      [attr.admissions-data]="'[]'"
      [attr.dur-date]="'01/03/2025'"
      [attr.today-week]="10"
      [attr.total-weeks]="54"
      (document-clicked)="onDocumentClick($event)">
    </cronograma-timeline>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent implements OnInit {
  visitasDataString = '';

  ngOnInit() {
    // Importar el Web Component
    import('@your-scope/cronograma-timeline');
    
    const visitasData = [
      {
        examinationsId: null,
        date: "2025-03-15T00:00:00.000Z",
        description: "Consulta médica",
        document: "12345", 
        scheduleId: "visit-1"
      }
    ];
    
    this.visitasDataString = JSON.stringify(visitasData);
  }

  onDocumentClick(event: CustomEvent) {
    console.log('Documento clickeado:', event.detail);
  }
}
```

## 📝 API

### Propiedades

| Propiedad | Tipo | Descripción |
|-----------|------|-------------|
| `visits-data` | `string` | JSON con datos de visitas médicas |
| `examinations-data` | `string` | JSON con datos de exámenes |
| `emergencies-data` | `string` | JSON con datos de urgencias |
| `admissions-data` | `string` | JSON con datos de ingresos |
| `dur-date` | `string` | Fecha de duración (formato: dd/MM/yyyy) |
| `today-week` | `number` | Semana actual para destacar |
| `total-weeks` | `number` | Total de semanas a mostrar (default: 54) |
| `mpi-id` | `string` | ID del paciente |
| `is-expanded` | `boolean` | Si el timeline está expandido |

### Formato de Datos

```typescript
interface TimelineItem {
  examinationsId?: string | null;
  date: string; // ISO string date
  description: string;
  document: string; // ID del documento
  scheduleId?: string | null;
  diagnostic?: string;
  visitId?: string | null;
  emergencyId?: string | null;
  admissionId?: string | null;
}
```

### Eventos

| Evento | Descripción | Datos |
|--------|-------------|-------|
| `document-clicked` | Se dispara al hacer clic en un documento | `{ idDoc, containerLabel, containerIcon, timestamp }` |
| `timeline-ready` | Se dispara cuando el componente está listo | - |

## 🎨 Personalización

El componente incluye estilos CSS encapsulados. Para personalización adicional:

```css
cronograma-timeline {
  display: block;
  width: 100%;
  height: auto;
}

/* Los estilos internos están encapsulados y no requieren personalización externa */
```

## 🔧 Desarrollo

Para desarrollar localmente:

```bash
git clone https://github.com/tu-usuario/cronograma-timeline.git
cd cronograma-timeline
npm install
npm start
```

## 📄 Licencia

MIT © [Tu Nombre]

## 🤝 Contribuir

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature
3. Commit tus cambios
4. Push a la rama
5. Abre un Pull Request

## 📞 Soporte

Si encuentras algún problema o tienes preguntas:

- 🐛 [Reportar un bug](https://github.com/tu-usuario/cronograma-timeline/issues)
- 💡 [Solicitar una feature](https://github.com/tu-usuario/cronograma-timeline/issues)
- 📧 Contacto: tu.email@ejemplo.com