@batequero7/mariacomponents

Librería de componentes Angular reutilizables y modernos.

📦 Instalación

npm install @batequero7/mariacomponents

Requisitos:

• Angular 18+
• TypeScript 5.5+

🚀 Componentes disponibles

• Modal Container
• Botones (próximamente)
• Inputs (próximamente)
• Cards (próximamente)

🎭 Modal Container

Sistema de modales dinámico que permite abrir cualquier componente como modal.

✨ Características

• ✅ Abre cualquier componente dentro de un modal
• ✅ Totalmente configurable (tamaño, título, icono)
• ✅ Recibe y emite datos entre componentes
• ✅ Animaciones suaves
• ✅ Responsive
• ✅ Cierre con backdrop o botón X
• ✅ Opción de bloquear cierre

📖 Uso básico

1️⃣ Importar en app.component.ts:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ModalContainerComponent } from '@batequero7/mariacomponents';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    ModalContainerComponent  // ✅ Importar aquí
  ],
  template: `
    <router-outlet></router-outlet>
    <app-modal-container></app-modal-container>
  `
})
export class AppComponent {}

2️⃣ Agregar contenedor en app.component.html:

<router-outlet></router-outlet>

<!-- ✅ Agregar al final -->
<app-modal-container></app-modal-container>

3️⃣ Abrir modal desde cualquier componente:

import { Component, inject } from '@angular/core';
import { ModalContainerService } from '@batequero7/mariacomponents';
import { MiComponenteComponent } from './mi-componente.component';

@Component({
  selector: 'app-home',
  template: `
    <button (click)="openModal()">Abrir Modal</button>
  `
})
export class HomeComponent {
  modalService = inject(ModalContainerService);

  openModal() {
    this.modalService.open({
      component: MiComponenteComponent,
      title: 'Mi Título'
    });
  }
}

⚙️ Configuración completa

this.modalService.open({
  component: MiComponenteComponent,     // Componente a mostrar
  title: 'Título del Modal',            // Título (opcional)
  icon: 'fa-solid fa-check',            // Icono (opcional)
  iconColor: '#22c55e',                 // Color del icono (opcional)
  iconSize: '1.5rem',                   // Tamaño del icono (opcional)
  width: '600px',                       // Ancho del modal (opcional)
  maxWidth: '90%',                      // Ancho máximo (opcional)
  disableClose: false,                  // Bloquear cierre con backdrop (opcional)
  data: { userId: 123 }                 // Datos para el componente (opcional)
});

📤 Pasar datos al componente

Componente padre (abre modal):

this.modalService.open({
  component: EditUserComponent,
  title: 'Editar Usuario',
  data: {
    userId: 123,
    userName: 'Juan Pérez'
  }
});

Componente hijo (recibe datos):

import { Component, inject, OnInit } from '@angular/core';
import { ModalContainerService } from '@batequero7/mariacomponents';

@Component({
  selector: 'app-edit-user',
  template: `
    <div>
      <h3>Editar: {{ userName }}</h3>
      <p>ID: {{ userId }}</p>
      <button (click)="save()">Guardar</button>
    </div>
  `
})
export class EditUserComponent implements OnInit {
  modalService = inject(ModalContainerService);
  
  userId!: number;
  userName!: string;

  ngOnInit() {
    // ✅ Leer datos del modal
    const data = this.modalService.data();
    this.userId = data.userId;
    this.userName = data.userName;
  }

  save() {
    // Cerrar y enviar datos de vuelta
    this.modalService.close({ success: true, userId: this.userId });
  }
}

📥 Recibir datos cuando se cierra

this.modalService.open({
  component: CreateUserComponent,
  title: 'Crear Usuario'
});

// ✅ Escuchar cuando se cierre
this.modalService.onClose$.subscribe(result => {
  if (result) {
    console.log('Usuario creado:', result);
  }
});

🎨 Ejemplos de uso

Modal simple:

this.modalService.open({
  component: HelloComponent,
  title: 'Hola Mundo'
});

Modal con icono de éxito:

this.modalService.open({
  component: SuccessComponent,
  title: '¡Operación exitosa!',
  icon: 'fa-solid fa-circle-check',
  iconColor: '#22c55e'
});

Modal grande sin cierre por backdrop:

this.modalService.open({
  component: LargeFormComponent,
  title: 'Formulario Completo',
  width: '900px',
  disableClose: true
});

Modal con advertencia:

this.modalService.open({
  component: WarningComponent,
  title: 'Advertencia',
  icon: 'fa-solid fa-triangle-exclamation',
  iconColor: '#f59e0b',
  width: '400px'
});

🔧 API del Servicio

ModalContainerService.open(config: ModalConfig)

Abre un modal con la configuración especificada.

Parámetros:

| Propiedad | Tipo | Por defecto | Descripción | |-----------|------|-------------|-------------| | component | Type<any> | requerido | Componente a mostrar | | title | string | '' | Título del modal | | icon | string | '' | Clase del icono (ej: Font Awesome) | | iconColor | string | '#000' | Color del icono | | iconSize | string | '1.25rem' | Tamaño del icono | | data | any | null | Datos para el componente | | width | string | '500px' | Ancho del modal | | maxWidth | string | '90%' | Ancho máximo | | disableClose | boolean | false | Bloquear cierre con backdrop |

ModalContainerService.close(result?: any)

Cierra el modal y opcionalmente envía datos de vuelta.

ModalContainerService.onClose$

Observable que emite cuando el modal se cierra con datos.

🎨 Estilos personalizados

Los estilos por defecto son neutros. Puedes sobrescribirlos en tu styles.scss:

// Cambiar color de fondo del backdrop
.acr_modal {
  background: rgba(0, 0, 0, 0.8) !important;
}

// Cambiar borde del modal
.acr_modal_content {
  border: 2px solid #3b82f6 !important;
}

📝 Notas importantes

• ✅ El componente debe ser standalone (Angular 14+)
• ✅ Funciona con Font Awesome, Material Icons o cualquier librería de iconos
• ✅ Compatible con Angular 18+
• ⚠️ Requiere que <app-modal-container> esté en el template principal

🤝 Contribuir

¿Encontraste un bug o tienes una sugerencia?

• GitHub: batequero7/mariacomponents
• npm: @batequero7/mariacomponents

📄 Licencia

MIT © batequero7

🔮 Próximos componentes

• [ ] Sistema de botones
• [ ] Inputs personalizados
• [ ] Cards
• [ ] Tables con paginación
• [ ] Loaders/Spinners

¿Te gusta la librería? Dale una ⭐ en GitHub