Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myWizardPanel = document.createElement("a-wizardpanel").init(config)

Or use the shorthand for it:

const myWizardPanel = createWizardPanel({

  // Can have the same config properties as a panel
  title: "Setup"
  icon: "fas fa-wrench",
  headerBackgroundColor: "#00aaee",
  closable: true,
  draggable: true,
  modal: true,
  display: "flex"
  flexFlow: "column",
  padding: "10px",

  // Wizard pages
  items: [
     wizardPage1,
     wizardPage2,
     wizardPage3
  ],
  actionText: "Proceed",
  action: function() {
     // Get the data of all fields of the wizard
     const data = this.getData()
    // Do something with the data
  }
})

myWizardPanel.render()

Or directly declare the config inside a container component:

const myBlock = createBlock({
  items: [
      {
          type: "wizardpanel",
          title: "Foo",
          items: [
              wizardPage1,
              wizardPage2,
              wizardPage3
          ],
          actionText: "Proceed",
          action: function() {
             // Get the data of all fields of the wizard
             const data = this.getData()
             // Do something with the data
          }
      }
  ]
})
myBlock.render()

If you need to validate a page before navigating to the next one, you can add a validate method to the page:

const wizardPage1 = {
 type: "panel", // or "block"
 items: [
     // Page items
 ],
 methods: {
    validate: function() {
      // Validate the page
      return true // or false
    }
 }
}

Use this in combination with "pageValidation" property in the wizard panel config. If you don't need a specific validation, "pageValidation" will validate all the pages as normal forms, checking for validation rules of each field. A validation function can be asynchronous, returning a Promise that resolves to true or false.

You can navigate to a specific page of the wizard programmatically using the showPage method:

wizardPanel.showPage(2) // Show the 3rd page (index is 0-based)

Note this will skip the validation of the current page, if any.

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myWizardPanel = document.createElement("a-wizardpanel").init(config)

Or use the shorthand for it:

const myWizardPanel = createWizardPanel({

  // Can have the same config properties as a panel
  title: "Setup"
  icon: "fas fa-wrench",
  headerBackgroundColor: "#00aaee",
  closable: true,
  draggable: true,
  modal: true,
  display: "flex"
  flexFlow: "column",
  padding: "10px",

  // Wizard pages
  items: [
     wizardPage1,
     wizardPage2,
     wizardPage3
  ],
  actionText: "Proceed",
  action: function() {
     // Get the data of all fields of the wizard
     const data = this.getData()
    // Do something with the data
  }
})

myWizardPanel.render()

Or directly declare the config inside a container component:

const myBlock = createBlock({
  items: [
      {
          type: "wizardpanel",
          title: "Foo",
          items: [
              wizardPage1,
              wizardPage2,
              wizardPage3
          ],
          actionText: "Proceed",
          action: function() {
             // Get the data of all fields of the wizard
             const data = this.getData()
             // Do something with the data
          }
      }
  ]
})
myBlock.render()

If you need to validate a page before navigating to the next one, you can add a validate method to the page:

const wizardPage1 = {
 type: "panel", // or "block"
 items: [
     // Page items
 ],
 methods: {
    validate: function() {
      // Validate the page
      return true // or false
    }
 }
}

Use this in combination with "pageValidation" property in the wizard panel config. If you don't need a specific validation, "pageValidation" will validate all the pages as normal forms, checking for validation rules of each field. A validation function can be asynchronous, returning a Promise that resolves to true or false.

You can navigate to a specific page of the wizard programmatically using the showPage method:

wizardPanel.showPage(2) // Show the 3rd page (index is 0-based)

Note this will skip the validation of the current page, if any.