{"_id":"@batequero7/mariacomponents","_rev":"3-30b83bba20d1b2c6b3b4915397072066","name":"@batequero7/mariacomponents","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@batequero7/mariacomponents","version":"1.0.0","keywords":["angular","components","modal","ui"],"author":{"name":"batequero7"},"license":"MIT","_id":"@batequero7/mariacomponents@1.0.0","maintainers":[{"name":"batequero7","email":"andresdrums7@outlook.com"}],"homepage":"https://github.com/batequero7/mariacomponents#readme","bugs":{"url":"https://github.com/batequero7/mariacomponents/issues"},"dist":{"shasum":"ccbcefe0d247d3fa4493f89741a231a6e4eef2e8","tarball":"https://registry.npmjs.org/@batequero7/mariacomponents/-/mariacomponents-1.0.0.tgz","fileCount":18,"integrity":"sha512-EPNVpCwHju5lZIObUZV3a9RcLkfcLTqTipT7m3lIqqgmQTt1OZkwb5prv/IdqhJ5FiRvLkLlrjHzG2LNp72pIg==","signatures":[{"sig":"MEYCIQCMs9CyZR163wn4HzkZCsu7cDdmFRDfTPbEpuB7fh4I8wIhAKnU4eBPsmMA1dAdTXFuOx3SpJv2xyv0uf8f5NWpS+Pi","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50697},"module":"fesm2022/batequero7-mariacomponents.mjs","exports":{".":{"esm":"./esm2022/batequero7-mariacomponents.mjs","types":"./index.d.ts","default":"./fesm2022/batequero7-mariacomponents.mjs","esm2022":"./esm2022/batequero7-mariacomponents.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"3d9549f6659ff4c88510d132a05f5d2411c8e2d0","typings":"index.d.ts","_npmUser":{"name":"batequero7","email":"andresdrums7@outlook.com"},"repository":{"url":"git+https://github.com/batequero7/mariacomponents.git","type":"git"},"_npmVersion":"10.8.2","description":"Librería de componentes Angular reutilizables","directories":{},"sideEffects":false,"_nodeVersion":"20.19.5","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^18.0.0","@angular/common":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mariacomponents_1.0.0_1763161748100_0.19527680703477057","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@batequero7/mariacomponents","version":"1.0.1","keywords":["angular","components","modal","ui"],"author":{"name":"batequero7"},"license":"MIT","_id":"@batequero7/mariacomponents@1.0.1","maintainers":[{"name":"batequero7","email":"andresdrums7@outlook.com"}],"homepage":"https://github.com/batequero7/mariacomponents#readme","bugs":{"url":"https://github.com/batequero7/mariacomponents/issues"},"dist":{"shasum":"8c6765da3063f779f182dab63e8ce60333a17ce7","tarball":"https://registry.npmjs.org/@batequero7/mariacomponents/-/mariacomponents-1.0.1.tgz","fileCount":18,"integrity":"sha512-ggW1jlP5lh+gEj13SNvL0J7u5p/OGTCXGN8LAssBfCCvOdmTlUEoizNG/eOkoztEATJqxzB6GiT9ndr6S8ygiQ==","signatures":[{"sig":"MEUCIAwGp+BO5n0/+jU55ZisxyjSr+UO33vHcbSZkb5367sVAiEA4klnDRk3sa06rXyah/hRagxxYXV5dj3Gy2B7kGOsAqo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":57124},"module":"fesm2022/batequero7-mariacomponents.mjs","exports":{".":{"esm":"./esm2022/batequero7-mariacomponents.mjs","types":"./index.d.ts","default":"./fesm2022/batequero7-mariacomponents.mjs","esm2022":"./esm2022/batequero7-mariacomponents.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"3d9549f6659ff4c88510d132a05f5d2411c8e2d0","typings":"index.d.ts","_npmUser":{"name":"batequero7","email":"andresdrums7@outlook.com"},"repository":{"url":"git+https://github.com/batequero7/mariacomponents.git","type":"git"},"_npmVersion":"10.8.2","description":"Librería de componentes Angular reutilizables","directories":{},"sideEffects":false,"_nodeVersion":"20.19.5","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^18.0.0","@angular/common":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mariacomponents_1.0.1_1763161984328_0.20153007501993891","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@batequero7/mariacomponents","version":"1.0.2","description":"Librería de componentes Angular reutilizables","keywords":["angular","components","modal","ui"],"author":{"name":"batequero7"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/batequero7/mariacomponents.git"},"peerDependencies":{"@angular/common":"^18.0.0","@angular/core":"^18.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/batequero7-mariacomponents.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/batequero7-mariacomponents.mjs","esm":"./esm2022/batequero7-mariacomponents.mjs","default":"./fesm2022/batequero7-mariacomponents.mjs"}},"_id":"@batequero7/mariacomponents@1.0.2","gitHead":"3d9549f6659ff4c88510d132a05f5d2411c8e2d0","bugs":{"url":"https://github.com/batequero7/mariacomponents/issues"},"homepage":"https://github.com/batequero7/mariacomponents#readme","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-wA/U14//+zZ/S1rlSqpptEh3TOMQHSIj8kgWrEcSPpdBlI7EDbk7f7OgQWlhbvh7qWv9u4A+5r8GMQN1ZoyIPw==","shasum":"6e6228f92ec9a4803de0d849fa428a1584fa6e7c","tarball":"https://registry.npmjs.org/@batequero7/mariacomponents/-/mariacomponents-1.0.2.tgz","fileCount":20,"unpackedSize":57749,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDuom/OEBDF71n3iYtgm1UWpVD+ddszpuWP0UQtKPSgRwIgILthrchA9CcgkzhiFMmE754Hm/0ZnhWXyTXF50saoEI="}]},"_npmUser":{"name":"batequero7","email":"andresdrums7@outlook.com"},"directories":{},"maintainers":[{"name":"batequero7","email":"andresdrums7@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mariacomponents_1.0.2_1763163283184_0.3621373329415032"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-14T23:09:08.016Z","modified":"2025-11-14T23:34:43.595Z","1.0.0":"2025-11-14T23:09:08.316Z","1.0.1":"2025-11-14T23:13:04.519Z","1.0.2":"2025-11-14T23:34:43.387Z"},"bugs":{"url":"https://github.com/batequero7/mariacomponents/issues"},"author":{"name":"batequero7"},"license":"MIT","homepage":"https://github.com/batequero7/mariacomponents#readme","keywords":["angular","components","modal","ui"],"repository":{"type":"git","url":"git+https://github.com/batequero7/mariacomponents.git"},"description":"Librería de componentes Angular reutilizables","maintainers":[{"name":"batequero7","email":"andresdrums7@outlook.com"}],"readme":"# @batequero7/mariacomponents\r\n\r\nLibrería de componentes Angular reutilizables y modernos.\r\n\r\n![npm version](https://img.shields.io/npm/v/@batequero7/mariacomponents)\r\n![license](https://img.shields.io/npm/l/@batequero7/mariacomponents)\r\n\r\n---\r\n\r\n## 📦 Instalación\r\n```bash\r\nnpm install @batequero7/mariacomponents\r\n```\r\n\r\n**Requisitos:**\r\n- Angular 18+\r\n- TypeScript 5.5+\r\n\r\n---\r\n\r\n## 🚀 Componentes disponibles\r\n\r\n- [Modal Container](#-modal-container)\r\n- Botones *(próximamente)*\r\n- Inputs *(próximamente)*\r\n- Cards *(próximamente)*\r\n\r\n---\r\n\r\n## 🎭 Modal Container\r\n\r\nSistema de modales dinámico que permite abrir cualquier componente como modal.\r\n\r\n### ✨ Características\r\n\r\n- ✅ Abre cualquier componente dentro de un modal\r\n- ✅ Totalmente configurable (tamaño, título, icono)\r\n- ✅ Recibe y emite datos entre componentes\r\n- ✅ Animaciones suaves\r\n- ✅ Responsive\r\n- ✅ Cierre con backdrop o botón X\r\n- ✅ Opción de bloquear cierre\r\n\r\n---\r\n\r\n### 📖 Uso básico\r\n\r\n#### 1️⃣ Importar en `app.component.ts`:\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { RouterOutlet } from '@angular/router';\r\nimport { ModalContainerComponent } from '@batequero7/mariacomponents';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  standalone: true,\r\n  imports: [\r\n    RouterOutlet,\r\n    ModalContainerComponent  // ✅ Importar aquí\r\n  ],\r\n  template: `\r\n    <router-outlet></router-outlet>\r\n    <app-modal-container></app-modal-container>\r\n  `\r\n})\r\nexport class AppComponent {}\r\n```\r\n\r\n#### 2️⃣ Agregar contenedor en `app.component.html`:\r\n```html\r\n<router-outlet></router-outlet>\r\n\r\n<!-- ✅ Agregar al final -->\r\n<app-modal-container></app-modal-container>\r\n```\r\n\r\n#### 3️⃣ Abrir modal desde cualquier componente:\r\n```typescript\r\nimport { Component, inject } from '@angular/core';\r\nimport { ModalContainerService } from '@batequero7/mariacomponents';\r\nimport { MiComponenteComponent } from './mi-componente.component';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  template: `\r\n    <button (click)=\"openModal()\">Abrir Modal</button>\r\n  `\r\n})\r\nexport class HomeComponent {\r\n  modalService = inject(ModalContainerService);\r\n\r\n  openModal() {\r\n    this.modalService.open({\r\n      component: MiComponenteComponent,\r\n      title: 'Mi Título'\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n### ⚙️ Configuración completa\r\n```typescript\r\nthis.modalService.open({\r\n  component: MiComponenteComponent,     // Componente a mostrar\r\n  title: 'Título del Modal',            // Título (opcional)\r\n  icon: 'fa-solid fa-check',            // Icono (opcional)\r\n  iconColor: '#22c55e',                 // Color del icono (opcional)\r\n  iconSize: '1.5rem',                   // Tamaño del icono (opcional)\r\n  width: '600px',                       // Ancho del modal (opcional)\r\n  maxWidth: '90%',                      // Ancho máximo (opcional)\r\n  disableClose: false,                  // Bloquear cierre con backdrop (opcional)\r\n  data: { userId: 123 }                 // Datos para el componente (opcional)\r\n});\r\n```\r\n\r\n---\r\n\r\n### 📤 Pasar datos al componente\r\n\r\n**Componente padre (abre modal):**\r\n```typescript\r\nthis.modalService.open({\r\n  component: EditUserComponent,\r\n  title: 'Editar Usuario',\r\n  data: {\r\n    userId: 123,\r\n    userName: 'Juan Pérez'\r\n  }\r\n});\r\n```\r\n\r\n**Componente hijo (recibe datos):**\r\n```typescript\r\nimport { Component, inject, OnInit } from '@angular/core';\r\nimport { ModalContainerService } from '@batequero7/mariacomponents';\r\n\r\n@Component({\r\n  selector: 'app-edit-user',\r\n  template: `\r\n    <div>\r\n      <h3>Editar: {{ userName }}</h3>\r\n      <p>ID: {{ userId }}</p>\r\n      <button (click)=\"save()\">Guardar</button>\r\n    </div>\r\n  `\r\n})\r\nexport class EditUserComponent implements OnInit {\r\n  modalService = inject(ModalContainerService);\r\n  \r\n  userId!: number;\r\n  userName!: string;\r\n\r\n  ngOnInit() {\r\n    // ✅ Leer datos del modal\r\n    const data = this.modalService.data();\r\n    this.userId = data.userId;\r\n    this.userName = data.userName;\r\n  }\r\n\r\n  save() {\r\n    // Cerrar y enviar datos de vuelta\r\n    this.modalService.close({ success: true, userId: this.userId });\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n### 📥 Recibir datos cuando se cierra\r\n```typescript\r\nthis.modalService.open({\r\n  component: CreateUserComponent,\r\n  title: 'Crear Usuario'\r\n});\r\n\r\n// ✅ Escuchar cuando se cierre\r\nthis.modalService.onClose$.subscribe(result => {\r\n  if (result) {\r\n    console.log('Usuario creado:', result);\r\n  }\r\n});\r\n```\r\n\r\n---\r\n\r\n### 🎨 Ejemplos de uso\r\n\r\n#### Modal simple:\r\n```typescript\r\nthis.modalService.open({\r\n  component: HelloComponent,\r\n  title: 'Hola Mundo'\r\n});\r\n```\r\n\r\n#### Modal con icono de éxito:\r\n```typescript\r\nthis.modalService.open({\r\n  component: SuccessComponent,\r\n  title: '¡Operación exitosa!',\r\n  icon: 'fa-solid fa-circle-check',\r\n  iconColor: '#22c55e'\r\n});\r\n```\r\n\r\n#### Modal grande sin cierre por backdrop:\r\n```typescript\r\nthis.modalService.open({\r\n  component: LargeFormComponent,\r\n  title: 'Formulario Completo',\r\n  width: '900px',\r\n  disableClose: true\r\n});\r\n```\r\n\r\n#### Modal con advertencia:\r\n```typescript\r\nthis.modalService.open({\r\n  component: WarningComponent,\r\n  title: 'Advertencia',\r\n  icon: 'fa-solid fa-triangle-exclamation',\r\n  iconColor: '#f59e0b',\r\n  width: '400px'\r\n});\r\n```\r\n\r\n---\r\n\r\n### 🔧 API del Servicio\r\n\r\n#### `ModalContainerService.open(config: ModalConfig)`\r\n\r\nAbre un modal con la configuración especificada.\r\n\r\n**Parámetros:**\r\n\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n|-----------|------|-------------|-------------|\r\n| `component` | `Type<any>` | *requerido* | Componente a mostrar |\r\n| `title` | `string` | `''` | Título del modal |\r\n| `icon` | `string` | `''` | Clase del icono (ej: Font Awesome) |\r\n| `iconColor` | `string` | `'#000'` | Color del icono |\r\n| `iconSize` | `string` | `'1.25rem'` | Tamaño del icono |\r\n| `data` | `any` | `null` | Datos para el componente |\r\n| `width` | `string` | `'500px'` | Ancho del modal |\r\n| `maxWidth` | `string` | `'90%'` | Ancho máximo |\r\n| `disableClose` | `boolean` | `false` | Bloquear cierre con backdrop |\r\n\r\n#### `ModalContainerService.close(result?: any)`\r\n\r\nCierra el modal y opcionalmente envía datos de vuelta.\r\n\r\n#### `ModalContainerService.onClose$`\r\n\r\nObservable que emite cuando el modal se cierra con datos.\r\n\r\n---\r\n\r\n## 🎨 Estilos personalizados\r\n\r\nLos estilos por defecto son neutros. Puedes sobrescribirlos en tu `styles.scss`:\r\n```scss\r\n// Cambiar color de fondo del backdrop\r\n.acr_modal {\r\n  background: rgba(0, 0, 0, 0.8) !important;\r\n}\r\n\r\n// Cambiar borde del modal\r\n.acr_modal_content {\r\n  border: 2px solid #3b82f6 !important;\r\n}\r\n```\r\n\r\n---\r\n\r\n## 📝 Notas importantes\r\n\r\n- ✅ El componente debe ser **standalone** (Angular 14+)\r\n- ✅ Funciona con Font Awesome, Material Icons o cualquier librería de iconos\r\n- ✅ Compatible con Angular 18+\r\n- ⚠️ Requiere que `<app-modal-container>` esté en el template principal\r\n\r\n---\r\n\r\n## 🤝 Contribuir\r\n\r\n¿Encontraste un bug o tienes una sugerencia?\r\n\r\n- GitHub: [batequero7/mariacomponents](https://github.com/batequero7/mariacomponents)\r\n- npm: [@batequero7/mariacomponents](https://www.npmjs.com/package/@batequero7/mariacomponents)\r\n\r\n---\r\n\r\n## 📄 Licencia\r\n\r\nMIT © batequero7\r\n\r\n---\r\n\r\n## 🔮 Próximos componentes\r\n\r\n- [ ] Sistema de botones\r\n- [ ] Inputs personalizados\r\n- [ ] Cards\r\n- [ ] Tables con paginación\r\n- [ ] Loaders/Spinners\r\n\r\n---\r\n\r\n**¿Te gusta la librería? Dale una ⭐ en [GitHub](https://github.com/batequero7/mariacomponents)**","readmeFilename":"README.md"}