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.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.