DataImportWizard

import '@blukavantui/web/theme.css'

import {createDataImportWizard} from '@blukavantui/web/data-import-wizard';
import '@blukavantui/web/data-import-wizard.css';
export function mount(host:HTMLElement) {
  const status=document.createElement("p");status.setAttribute("role","status");
  const component=createDataImportWizard(host, {
  "Fields": [
    {
      "Key": "Name",
      "Label": "Customer name",
      "DataType": "Text",
      "IsRequired": true,
      "Description": "Required customer or company name."
    },
    {
      "Key": "Email",
      "Label": "Email",
      "DataType": "Text",
      "IsRequired": true,
      "IsUnique": true,
      "Description": "Unique within this file. Your application can apply email validation."
    },
    {
      "Key": "Seats",
      "Label": "Seats",
      "DataType": "Integer",
      "IsRequired": true,
      "DefaultValue": "1"
    },
    {
      "Key": "Active",
      "Label": "Active",
      "DataType": "Boolean",
      "DefaultValue": "true"
    },
    {
      "Key": "Joined",
      "Label": "Joined",
      "DataType": "Date",
      "IsRequired": true
    }
  ],
  "MaxRows": 10000,
  "MaxFileSizeMB": 5,
  "Delimiter": "Auto",
  "IsDisabled": false
}, { ImportRequested: (requestId, rows, fileName) => {
      // Sample acknowledgement only: connect your validated server import here.
      status.textContent = `${fileName}: ${rows.length} validated records received. No database was written.`;
      queueMicrotask(() => component.update({ImportResultRequestId:requestId, ImportResultSuccess:true, ImportResultMessage:'Sample received the rows.'}));
    } });
  host.append(status);
  return {destroy(){component.destroy();status.remove();}};
}

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

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