SiriusStepper

An Angular library for a Stepper UI component.

This library was generated with Angular CLI version 13.2.0

Usage

Install library

npm install --save sirius-stepper

Import module in your application

import { SiriusStepperModule } from 'sirius-stepper';

@NgModule({
  ...
  imports: [ SiriusStepperModule ],
  ...
})

Example App

See the example app for a working example.

Development: Build library and link locally

Clone and enter

$/> git clone https://github.com/dav793/sirius-stepper.git
$/> cd sirius-stepper
$/sirius-stepper>

Install dependencies
```
$/sirius-stepper> npm install
```

Build lib

Production:

$/sirius-stepper> ng build sirius-stepper

Development:

$/sirius-stepper> ng build sirius-stepper --watch

Link lib build with NPM locally

$/sirius-stepper> cd dist/sirius-stepper
$/sirius-stepper/dist/sirius-stepper> npm link

Link back in your application

$/> cd ${APP_ROOT}
$/APP_ROOT> npm link sirius-stepper

(Optional) In order for ng serve to work properly, open your application's angular.json and add the following key-value pair under projects.{YOUR APP}.architect.build.options:
```
"preserveSymlinks": true
```
This step should not be necessary if you only build your application in production.
When you're ready to publish a new version to npm, bump the latest version.
```
npm version patch
```
Or
```
npm version minor
```
Or
```
npm version major
```
Then,
```
npm publish
```

Docs

lib-sirius-stepper

This component wraps around your logo and steps, and provides the stepper functionality.

As an example:

<lib-sirius-stepper
  highlight-color="#ff9949"
  muted-color="#aaaaaa"
  font-family="Helvetica"
  font-size="12px"
  [override-step]="overrideStepIndex$"
  (steps)="stepsChanged($event)"
  (step-changes)="stepIndexChanged($event)"
  #stepper
>

    <!-- add your logo here -->
    <!-- add your title here -->
    <!-- add your steps here -->
    
</lib-sirius-stepper>

Properties

highlight-color (optional)

Type: string
Range : any valid CSS color.

Set the color of highlighted graphics and text.
muted-color (optional)

Type: string
Range : any valid CSS color.

Set the color of muted graphics and text.
font-family (optional)

Type: string
Range : any valid CSS font-family.

Set the font used in text.
font-size (optional)

Type: string
Range : any valid value for the CSS property font-size.

Set the size of text.
[override-step] (optional)

Type: Observable<number>

Use this Input to manually override the current step viewed.

If you provide an Observable, whenever it emits a number, it will set the current step index to it.
(steps) (optional)

Type: EventEmitter<number[]>

On this Output, the stepper component will emit an array containing the indexes of all steps, whenever they are changed in the template.
(step-changes) (optional)

Type: EventEmitter<number>

On this Output, the stepper component will emit the current step's index, whenever it changes.
#stepper

Required template reference to link the steps with the stepper component.

sirius-logo

Add an ng-template tag with this directive inside the stepper component to set your company logo.

As an example:

<lib-sirius-stepper
    ...
    #stepper
>
  
  <ng-template sirius-logo>
  
    <!-- Add your logo HTML here -->
    <img src="/assets/logo.png" alt="image">
    
  </ng-template>

</lib-sirius-stepper>

sirius-title

Add an ng-template tag with this directive inside the stepper component to set your company title.

As an example:

<lib-sirius-stepper
    ...
    #stepper
>
  
  <ng-template sirius-title>
  
    <!-- Add your title HTML here -->
    <h1>Your Product Name</h1>
    
  </ng-template>

</lib-sirius-stepper>

sirius-step

Add an ng-template tag with this directive inside the stepper component to insert each step.

As an example:

<lib-sirius-stepper
    ...
    #stepper
>
  
  <!-- Add your steps here -->
  <ng-template sirius-step 
    [link]="stepper" 
    [step]="1" 
    label="YOUR STEP TITLE"
  >
    
    <!-- Put any HTML you want inside the step -->
    <h2>Step 1</h2>
    <label for="name">Name</label>&nbsp;
    <input id="name" type="text" [(ngModel)]="model.name"/>

  </ng-template>

</lib-sirius-stepper>

Properties

[link]

Type: SiriusStepperComponent

Required to link the step with the stepper component.
[step]

Type: number

Set a unique index for the step. The steps will be ordered in ascending order by their step index.
label (optional)

Type: string

Set the text to label this step in the step controls.