Configuration

Enregistrez l’élément une fois, puis configurez chaque instance avec des attributs (chaînes) et des propriétés (objets/fonctions).

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

Une surface de configuration : `targets`

Déclarez quels types d’enregistrements peuvent être créés et quels champs chacun porte. Mildport dérive en interne la correspondance, la validation et l’UX capture-first de ce catalogue.

Scénario	Exemple
Capture-first (PDF, photo, notes)	Plusieurs cibles — Contact, Lead, Task…
Tableur multi-entités	`{ id: 'person', fields: [...] }`, `{ id: 'organization', fields: [...] }`
CSV plat unique	Une cible — `{ id: 'contact', fields: [...] }`

Recommandé : utilisez mountImportFlow() pour regrouper les cibles, les drapeaux d’upload, le mode d’application et la mémoire de mapping. Voir Imports capture-first.

Attributs

Attribut	Description
`api-base-url`	Origine de votre moteur auto-hébergé (ou pilote), p. ex. `https://imports.your-infra.example`.
`license-key`	La clé de licence de locataire signée que le moteur vérifie hors ligne.
`grid-impl`	Implémentation de la grille de revue (p. ex. `slickgrid`).

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

Propriétés

Propriété	Type	Description
`targets`	`TargetCatalog`	Requis — types d’enregistrements + métadonnées de champs (types, validateurs, alias de correspondance).
`applyMode`	`'webhook' \| 'browser'`	Livrer via un webhook d’application signé, ou rendre les lignes dans la page.
`mappingIdentifier`	`string \| null`	Id stable pour que les correspondances confirmées soient mémorisées d’un import à l’autre.
`hostConfig`	`ImportSuiteHostConfig`	Formats acceptés, jointures multi-fichiers, hooks de nettoyage, données d’exemple, niveau de nettoyage IA (`aiTransforms: 'off' \| 'suggest' \| 'full'`) et `actor` d’audit.
`profile`	`ImportProfile`	Un profil d’import versionné (`{mapping?, recipe?}`) : le mapping s’applique automatiquement, la recette apparaît comme suggestion de nettoyage en un clic à la revue.
`onResults`	`(rows, mapping) => void`	Callback en mode navigateur avec les lignes livrées + le mapping.

Exemple — `mountImportFlow` (recommandé)

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

mountImportFlow(el, {
  id: 'tenant-contacts',
  version: 'v1',
  targets: [
    {
      id: 'person',
      label: 'Personne',
      fields: [
        {
          key: 'person.firstName',
          label: 'Prénom',
          alternativeMatches: ['given name', 'vorname'],
        },
        {
          key: 'person.email',
          label: 'E-mail',
          columnType: 'email',
          required: true,
        },
      ],
    },
    {
      id: 'organization',
      label: 'Organisation',
      fields: [{ key: 'organization.name', label: "Nom de l'entreprise" }],
    },
  ],
  input: { acceptedFormats: ['spreadsheet', 'text', 'pdf', 'image'] },
  delivery: { mode: 'browser' },
});

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

Exemple — définir `targets` directement

el.targets = [
  {
    id: 'contact',
    label: 'Contact',
    fields: [
      { key: 'contact.email', label: 'E-mail', columnType: 'email', required: true },
      { key: 'contact.name', label: 'Nom' },
    ],
  },
];
el.applyMode = 'browser';
el.hostConfig = { acceptedFormats: ['pdf', 'image', 'text', 'spreadsheet'] };

Suite : Événements et application.