Configuración

Registra el elemento una vez, luego configura cada instancia con atributos (cadenas) y propiedades (objetos/funciones).

import { defineImportSuiteElement, mountImportFlow } from '@capitality-io/mildport-widget';
await defineImportSuiteElement('mildport-import');

Una superficie de configuración: `targets`

Declara qué tipos de registro se pueden crear y qué campos lleva cada uno. Mildport deriva internamente la coincidencia, la validación y la UX capture-first de este catálogo.

Escenario	Ejemplo
Capture-first (PDF, foto, notas)	Varios targets — Contact, Lead, Task…
Hoja de cálculo multi-entidad	`{ id: 'person', fields: [...] }`, `{ id: 'organization', fields: [...] }`
CSV plano único	Un target — `{ id: 'contact', fields: [...] }`

Recomendado: usa mountImportFlow() para agrupar targets, flags de subida, modo de aplicación y memoria de mapeo. Consulta Importaciones capture-first.

Atributos

Atributo	Descripción
`api-base-url`	Origen de tu motor autoalojado (o piloto), p. ej. `https://imports.your-infra.example`.
`license-key`	La clave de licencia de inquilino firmada que el motor verifica sin conexión.
`grid-impl`	Implementación de la cuadrícula de revisión (p. ej. `slickgrid`).

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

Propiedades

Propiedad	Tipo	Descripción
`targets`	`TargetCatalog`	Obligatorio — tipos de registro + metadatos de campos (tipos, validadores, alias de emparejamiento).
`applyMode`	`'webhook' \| 'browser'`	Entregar vía un webhook de aplicación firmado, o devolver las filas en la página.
`mappingIdentifier`	`string \| null`	Id estable para que los mapeos confirmados se recuerden entre importaciones.
`hostConfig`	`ImportSuiteHostConfig`	Formatos aceptados, uniones de varios archivos, hooks de limpieza, datos de ejemplo, nivel de limpieza con IA (`aiTransforms: 'off' \| 'suggest' \| 'full'`) y `actor` de auditoría.
`profile`	`ImportProfile`	Un perfil de importación versionado (`{mapping?, recipe?}`): el mapeo se aplica automáticamente y la receta aparece como sugerencia de limpieza de un clic en la revisión.
`onResults`	`(rows, mapping) => void`	Callback en modo navegador con las filas entregadas + el mapeo.

Ejemplo — `mountImportFlow` (recomendado)

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

mountImportFlow(el, {
  id: 'tenant-contacts',
  version: 'v1',
  targets: [
    {
      id: 'person',
      label: 'Persona',
      fields: [
        {
          key: 'person.firstName',
          label: 'Nombre',
          alternativeMatches: ['given name', 'vorname'],
        },
        {
          key: 'person.email',
          label: 'Correo electrónico',
          columnType: 'email',
          required: true,
        },
      ],
    },
    {
      id: 'organization',
      label: 'Organización',
      fields: [{ key: 'organization.name', label: 'Nombre de la empresa' }],
    },
  ],
  input: { acceptedFormats: ['spreadsheet', 'text', 'pdf', 'image'] },
  delivery: { mode: 'browser' },
});

el.onResults = (rows, mapping) => sync(rows, mapping);

Ejemplo — establecer `targets` directamente

el.targets = [
  {
    id: 'contact',
    label: 'Contacto',
    fields: [
      { key: 'contact.email', label: 'Correo electrónico', columnType: 'email', required: true },
      { key: 'contact.name', label: 'Nombre' },
    ],
  },
];
el.applyMode = 'browser';
el.hostConfig = { acceptedFormats: ['pdf', 'image', 'text', 'spreadsheet'] };

Siguiente: Eventos y aplicación.