intellisoft-mi-claro-interactive-invoice
Advanced tools
Componente web interactivo para mostrar y gestionar facturas en el sistema de facturación de Claro. Construido con Stencil para máxima compatibilidad entre frameworks.
npm install intellisoft-mi-claro-interactive-invoice
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://unpkg.com/intellisoft-mi-claro-interactive-invoice@latest/dist/mi-claro-interactive-invoice/mi-claro-interactive-invoice.esm.js"></script>
</head>
<body>
<mi-claro-interactive-invoice></mi-claro-interactive-invoice>
</body>
</html>
import { defineCustomElements } from 'intellisoft-mi-claro-interactive-invoice/loader';
// Inicializar una vez en tu app
defineCustomElements();
function App() {
const handleInvoicePaid = (event) => {
console.log('Factura pagada:', event.detail);
};
return (
<mi-claro-interactive-invoice
onInvoicePaid={handleInvoicePaid}>
</mi-claro-interactive-invoice>
);
}
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { defineCustomElements } from 'intellisoft-mi-claro-interactive-invoice/loader';
defineCustomElements();
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
// component.ts
@Component({
template: `
<mi-claro-interactive-invoice
(invoicePaid)="onInvoicePaid($event)">
</mi-claro-interactive-invoice>
`
})
export class InvoiceComponent {
onInvoicePaid(event: CustomEvent) {
console.log('Factura pagada:', event.detail);
}
}
<template>
<mi-claro-interactive-invoice
@invoice-paid="handleInvoicePaid">
</mi-claro-interactive-invoice>
</template>
<script setup>
import { defineCustomElements } from 'intellisoft-mi-claro-interactive-invoice/loader';
defineCustomElements();
const handleInvoicePaid = (event) => {
console.log('Factura pagada:', event.detail);
};
</script>
| Propiedad | Tipo | Descripción | Por Defecto |
|---|---|---|---|
| Por definir | - | Se agregarán según lógica de negocio | - |
| Evento | Descripción | Detalle |
|---|---|---|
invoicePaid | Se emite cuando se completa un pago | { invoiceId: string, amount: number, method: string } |
invoiceDetailToggled | Se emite al expandir/contraer detalles | { invoiceId: string, isOpen: boolean } |
El componente soporta CSS Custom Properties para personalización:
mi-claro-interactive-invoice {
--invoice-primary-color: #e60028;
--invoice-background: #ffffff;
--invoice-border-radius: 8px;
/* Más variables por definir según diseño */
}
# Instalar dependencias
npm install
# Servidor de desarrollo
npm start
# Construir para producción
npm run build
# Ejecutar tests
npm test
# Generar nuevo componente
npm run generate
mi-claro-interactive-invoice/
├── src/
│ ├── components/
│ │ └── mi-claro-interactive-invoice/
│ │ ├── mi-claro-interactive-invoice.tsx
│ │ ├── mi-claro-interactive-invoice.css
│ │ └── readme.md
│ └── index.ts
├── examples/ # Ejemplos de integración
│ ├── vanilla-js/
│ ├── react-app/
│ ├── angular-app/
│ └── vue-app/
└── dist/ # Archivos construidos
Sección por definir según políticas internas de Claro
MIT © IntelliSoft
Nota: Este componente está en desarrollo activo. Las propiedades, eventos y estilos se definirán según los requerimientos específicos del negocio de Claro.
FAQs
Stencil Component Starter
We found that intellisoft-mi-claro-interactive-invoice demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
Research
/Security News
Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.
Security News
The MCP Steering Committee has launched the official MCP Registry in preview, a central hub for discovering and publishing MCP servers.