DataImportWizard

import '@blukavantui/community/theme.css'

import {createDataImportWizard} from '@blukavantui/pro/data-import-wizard';
import '@blukavantui/community/theme.css';
import '@blukavantui/pro/data-import-wizard.css';
export function mount(host:HTMLElement) {
 const target=document.createElement('div'),status=document.createElement('p'),output=document.createElement('pre');
 status.setAttribute('role','status');host.append(target,status,output);
 const component=createDataImportWizard(target,{
  Fields:[],AllowSchemaEditing:true,OutSystemsNulls:false,
  RecordTypes:[
   {Key:'products',Label:'Products',KeyField:'id',StartKey:100,Fields:[
    {Key:'id',Label:'Product ID',DataType:'Integer',IsRequired:true},
    {Key:'name',Label:'Product name',DataType:'Text',IsRequired:true}]},
   {Key:'variants',Label:'Variants',KeyField:'id',StartKey:500,Fields:[
    {Key:'id',Label:'Variant ID',DataType:'Integer',IsRequired:true},
    {Key:'productId',Label:'Product ID',DataType:'Identifier',IsRequired:true,ReferencesRecordType:'products'},
    {Key:'size',Label:'Size',DataType:'Text'}]}
  ],MaxRows:1000,MaxFileSizeMB:2,
 },{
  FieldsChanged:(type,fields)=>{status.textContent=`${type}: ${fields.length} destination fields. Revalidate schema on your server.`;},
  BundleImportRequested:(requestId,bundle)=>{
   // Runnable preview only. Replace with an awaited application API transaction.
   // The payload contains RecordTypes[].Rows and KeyMap plus Rekeyed.
   // Success must mean the whole transaction committed; reject with false on failure.
   // AutoNumber IDs: insert parents on the server and use returned IDs for children.
   // Do not insert the wizard's preview IDs into AutoNumber columns.
   output.textContent=JSON.stringify(bundle,null,2);
   queueMicrotask(()=>component.update({ImportResultRequestId:requestId,ImportResultSuccess:true,
    ImportResultMessage:'Prepared related records. This example does not write to a database.'}));
  },Error:message=>{status.textContent=message;},
 });
 status.textContent='Products: id,name. Variants: id,productId,size. Select both CSVs together and confirm the header-based suggestions. Re-keying is optional.';
 return {destroy(){component.destroy();target.remove();status.remove();output.remove();}};
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()