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

1. Clone and enter

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

2. Install dependencies

   $/sirius-stepper> npm install

3. Build lib

   Production:

   $/sirius-stepper> ng build sirius-stepper

   Development:

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

4. Link lib build with NPM locally

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

5. Link back in your application

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

6. (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.

7. When you're ready to publish a new version to npm, go to /projects/sirius-stepper and bump the latest version.

   npm version patch

   Or

   npm version minor

   Or

   npm version major

   Then, publish to NPM

   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"
  hover-size="1.5"
  [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.
  

• hover-size (optional)

  Type: string
  Range : any percentual value, where a value of 1 equals 100%. Eg. 1, 1.5, 0.75, etc.

  Set the size of the step bubbles on mouse hover.

• [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.