npm package: @rolesvillesoftware/ng-wizard
Description: NgWizard is a simple step wizard for Angular. This is a very simple wizard at the moment was was written for a specific reason. I would like to expand it, but would also like for others to identify functionality they need in their current projects.  ## In
Latest version: 1.2.11

# Rolesville Software LLC - NgWizard
NgWizard is a simple step wizard for Angular. This is a very simple wizard at the moment was was written for a specific reason. I would like to expand it, but would also like for others to identify functionality they need in their current projects. 
## Installation
    npm install --save @rolesvillesoftware/ng-wizard
## Module Configuration
 To use the NgWizard, its module needs to be imported into your application module.

    import { BrowserModule } from '@angular/platform-browser';  
    import { NgModule } from '@angular/core';  
    import { FormsModule } from '@angular/forms';  
      
    import { NgWizardModule } from '@rolesvillesoftware/ng-wizard/NgWizardModule';  
    import { AppComponent } from './app.component';  
         
    @NgModule({  
      declarations: [  
        AppComponent  
      ],  
      imports: [  
        BrowserModule,  
        FormsModule,  
        NgWizardModule  
      ],  
      providers: [],  
      bootstrap: [AppComponent]  
    })  
    export class AppModule { }
## Simple Sample Application
### app.component.ts
    import {Component} from '@angular/core';  
    import {NgWizardStepEvent} from '@rolesvillesoftware/ng-wizard/NgWizardStepEvent';  
      
    @Component({  
      selector: 'app-root',  
      templateUrl: './app.component.html',  
      styleUrls: ['./app.component.css']  
    })  
    export class AppComponent {  
      title = 'app';  
      textValue: string = null;  
      
      onDone(event: NgWizardStepEvent) {  
        alert('Wizard Completed');  
      }  
      onStepChange(event: NgWizardStepEvent) {  
        alert(`Step Change - Previous Step: ${event.previousStep} \- Current Step: ${event.currentStep}`)  
      }  
    }

### app.component.html

    <div style="text-align:center">  
      <h1>  
        Welcome to {{ title }}!  
      </h1>  
      <img width="300" alt="Angular Logo"  
      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">  
    </div>  
    <ngWizard (done)="onDone($event)" (stepChange)="onStepChange($event)" [doneText]="'Complete Wizard'" [backText]="'< Previous'" [nextText]="'Next >'">  
      <ngWizardStep [title]="'Step One'">  
        <p>Step one - Click Next</p>  
      </ngWizardStep>  
      <ngWizardStep [title]="'Step Two'" [canMoveBack]="(textValue || '').length === 0" [canMoveNext]="textValue?.length > 0" >  
        <p>Step Two - Enter Value in Text Box to Move Next</p>  
        <p>  
          <input type="text" [(ngModel)]="textValue" />  
        </p>  
      </ngWizardStep>  
      <ngWizardStep [title]="'Step Three / Final'">  
        <p>Validate Value from Text Box: {{ textValue }}</p>  
      </ngWizardStep>  
    </ngWizard>
## Components
### ngWizard
This is the main container for the wizard. 
**Selector:** `<ngWizard></ngWizard>`

|Parameter|In/Out |Type|Description|
|--|--|--|--|
|nextText|IN|string|Text to display on the button to step to the next wizard step. (Default: Next)|
|doneText|IN|string|Text to display on the button on last wizard step to complete the wizard. (Default: Done)|
|backText|IN|string|Text to display on the back button. (Default: Back)|
|stepChange|OUT|NgWizardStepEvent|Event that is signaled when the wizard changes active step (EventEmitter)|
|done|OUT|NgtWizardStepEvent|Event that is signaled with the "done" button is pressed on the last step pane. (EventEmitter)|

### ngWizardStep
**Selector:**`<ngWizardStep></ngWizardStep>`
Container to house the step controls and HTML. 

|Parameter|In/Out |Type|Description|
|--|--|--|--|
|title|IN|string|The title of the step displayed on the header region (Default: Null)|
|canMoveNext|IN|boolean|Flag to indicate if the "next" button can be enabled. (Default: true)|
|canMoveBack|IN|boolean|Flag to indicate if the "back" button can be enabled. (Default: true)|

## CSS Controls/Override
### Default CSS 

Below is the default CSS settings of the wizard. They can be overriden by adding the following class in your CSS: `rsWizardMainOverride`.

    @import url("https://fonts.googleapis.com/css?family=Lato");
    .rsWizardMain { display: flex; flex-direction: column; font-family: "Lato", sans-serif; background: #fff; font-size: 1em; border: 1px solid #C7CDD1; box-shadow: 0 1px 3px 0 rgba(0 0 0 0.15); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 41%; max-height: 65%; min-width: 41%; max-width: 65% }
    .rsWizardMain>div { flex: 1; overflow: hidden; overflow-y: auto; }
    .rsWizardMain>div:first-child { flex: 0; font-size: 20px; padding: 3.99vh 3.18vw; color: #2D3B45; font-weight: bold; background: #f2f2f2; border: 1px solid #C7CDD1; border-radius: 3px 3px 0 0; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15); }
    .rsWizardMain>div:first-child>div { width: 50%; }
    .rsWizardMain>div:last-child { flex: 0; padding: 3.42vh 3.36vw; border-top: 1px solid #efefef; }
    .rsWizardMain>div:last-child>div { display: inline-block; width: 50%; text-align: center }
    .rsWizardMain>div:last-child>div:first-child { text-align: left;}
    .rsWizardMain>div:last-child>div:last-child { text-align: right; }
    .rsWizardMain button { font-family: "Lato", sans-serif; font-size: 14px; line-height: 17px; border: 1px solid #C4CDD1; border-radius: 2px; background-color: #F5F5F5; color: #2D3B45; padding: 7px 17px; cursor: pointer; }
    .rsWizardMain button.next { background-color: #00ACBD; color: #fff; border-color: #008592; }  
    .rsWizardMain button:disabled { cursor: not-allowed; opacity: 0.45; }
----------
> Written with [StackEdit](https://stackedit.io/).