Stepper

This library was generated with Angular CLI version 16.2.0.

This library is created for stpper form with steps.

This Provide a steps with next previous and submit functionality.

How to use

- import StepperModule from stepper.

• use <ui-stepper> component as wrapper of steps

component.html

	<ui-stepper [customStyle]="myStyle">
	</ui-stepper>

component.ts

import { CountWidgetStyles } from 'stepper';
export class {
    public myStyle:CountWidgetStyles = {
        colors: {
                default:  '#008dff',	
                background:  '#e9ecef',	
                active:  '#3bcb44',
                activeBg:  '#e9ecef',
                completed:  '#ffffff',
                completedBg:  '#008DFF'
                },
        shape:  'circle',
        orientation:  'horizontal'
        }
    }
}

| Name | Type | Description | | ------ | ------ | -------- | | default | string | default color of step | | background | string | default background color of step | | active | string | active state step color | | activeBg | string | active state background step color | | complted | string | completed state step color | | completedBg | string | completed state step background color | | shape | Shape : circle ,square | shape of step | | orientation | Orientation : horizontal , vertical | orientation |

• use <ui-step> selector for your content as wrapper.

<ui-stepper [customStyle]="myStyle">
    <ui-step countTitle="Basic Details">
        <header> <h3>Write your title e.g.Basic Details </h3></header>
        <app-your-form-selecter #formSelector></app-your-form-selecter>
    </ui-step>
</ui-stpper>

Note - Please use #formSelector on form slector component

• Implement StpperForm Interface in yout form componet that you are using as slector.

app-your-form.ts

import { StepperForm } from 'stepper'
export class AppYourForm implements StepperForm    {
    public submitForm():void {
    //trigger this when next, previous or submit click
    }
    public getFormData:FormGroup<any> {
    //your from group instance 
        return this.myFrom
    }
}