Inicio rápido

Esto pone un flujo de importación funcional en tu página. Necesitas acceso a los paquetes publicados y un endpoint de motor autoalojado (o piloto) con una clave de licencia firmada.

Acceso

Los paquetes se publican en GitHub Packages (npm.pkg.github.com, scope @capitality-io, restringido). Un simple npm install contra el registro público no funcionará — el acceso viene con un piloto o una licencia. Escribe a [email protected].

1. Instalar el paquete

npm install @capitality-io/import-suite-ng

2. Definir el custom element

main.ts

import { defineImportSuiteElement } from '@capitality-io/import-suite-ng';

// Framework-agnostic — registers <mildport-import> once, for the whole app.
await defineImportSuiteElement('mildport-import');

3. Colócalo y apúntalo a tu motor

<mildport-import
  api-base-url="https://imports.your-infra.example"
  license-key="SIGNED_TENANT_KEY"
></mildport-import>

wire-it-up.ts

const el = document.querySelector('mildport-import')!;

// The target data model — what a clean row looks like in your product.
el.columnSchema = yourTargetSchema;

// Receive clean rows in the browser…
el.addEventListener('import-applied', e => sync(e.detail));
// …or, in production, take a signed apply webhook on your backend instead.

Esa es toda la superficie de integración: atributos de entrada, eventos DOM de salida. Sin bloqueo de SDK, sin iframe.

Siguiente

• Configurar el widget — columnSchema, atributos, modos de aplicación.
• Eventos y aplicación — los eventos del ciclo de vida y cómo llegan las filas a tu app.
• Tematización — adapta el widget a tu sistema de diseño.