@orcden/od-wizard

A component to quickly create a step-by-step wizard

<od-wizard> is a simple component that allows the user to define a set of pages to be displayed in an orderly fashion. The wizard allows users to progress to the first incomplete step and backtrack to any previous step. It provides a callback hook when the user has completed the wizard.

<od-wizard-page> is a simple component that allows the user to define a page name for od-wizard steps. It provides callback hooks for when the user loads the page andd when the user advances the page.

Installation

• Install with npm

npm i @orcden/od-wizard

Usage

import '@orcden/od-wizard';

<od-wizard>
    <label slot='title'>Example Wizard</label>
    <od-wizard-page title='Step 1'>
        <p>Step 1</p>    
    </od-wizard-page>
    <od-wizard-page title='Step 2'>
        <p>Step 2</p>
    </od-wizard-page>
</od-wizard>

Attributes

OD-Wizard-Page

Attribute	Type	Default	Description
title	String	undefined	Required This is the title that the wizard will use to generate the navigation item

Properties

OD-Wizard

Attribute	Type	Default	Description
doneCallback	function	undefined	Params: od-wizard - this function will be called once the final step of the wizard returns true for its callback

OD-Wizard-Page

Attribute	Type	Default	Description
loadCallback	function	undefined	Params: od-wizard-page - this function will be called when the page is loaded
doneCallback	function	undefined	Params: od-wizard-page - this function will be called when the user hits the next button. It must return true or false to indicate to the wizard if it is allowed to progress to the next step.

Functions

OD-Wizard-Page

Name	Parameters	Description
executeLoad	None	Manually call the load function of the page with its scope pased through
executeDone	None	Manually call the done function of the page with its scope pased through

Styling

• CSS variables are available to alter the default styling provided

OD-Wizard

Shadow Parts	Description
title-slot	The slot used to hold the Title item
nav-container	The div used to hold the nav and the pages container
nav	The actual navigation list
nav-item	The individual "links" in the navigation
nav-item-enabled	The enabled links in the navigation
nav-item-current	The current link/step in the navigation
pages-container	The div the holds the individual pages and gthe buttons container
buttons-container	The div that holds the control buttons
prev-button	The Back Button
next-button	The Next Button
finish-button	The Finish Button

Development

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Run tests

npm run test

Build for production

npm run build