diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 3cfea18..3c9c58f 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -8,9 +8,6 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- - uses: actions/setup-node@v2
- with:
- node-version: '12'
- name: Get branch name
shell: bash
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index d616449..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,34 +0,0 @@
-dist: trusty
-sudo: false
-language: node_js
-node_js: lts/*
-
-install:
- - npm run add-fa-config
- - npm ci
-cache:
- directories:
- - $HOME/.npm
-
-script:
-- npm run build
-- npm run build:demo
-
-deploy:
- - provider: pages
- skip-cleanup: true
- github-token: $GITHUB_TOKEN
- keep-history: true
- local-dir: dist/ng-wizard-demo
- on:
- all_branches: true
-
-git:
- depth: 3
-
-after_success:
-- npm run travis-deploy-once "npm run semantic-release"
-
-branches:
- except:
- - /^v\d+\.\d+\.\d+$/
diff --git a/README.md b/README.md
index ea7bd0a..ac2d77e 100644
--- a/README.md
+++ b/README.md
@@ -1,101 +1,131 @@
# @sebgroup/ng-wizard
-[](https://travis-ci.com/sebgroup/ng-wizard)
+[](https://github.com/sebgroup/ng-wizard/actions/workflows/main.yml)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/semantic-release/semantic-release)
-A reusable angular component for a Wizard according to the seb-style guide. It manages all the css for you. It does require the use of Angulars router to keep track of what step in the wizard the user is currently on.
+
+ This is a wizard component built for angular. It uses routes and route guards to control steps and it relies on
+ Bootstrap for markup and styling as well as Font Awesome for icons.
+
+
Requirements
+
+
+ Angular - This component is built for Angular and tested with version 12+.
+
+
+ A route for each step - Each step in the wizard is a route with an optional route guard using
+ CanActivate (for protected
+ steps). Step controls are provided using route data objects.
+
+
+ Bootstrap - This component relies on styles provided by SEB:s Bootstrap theme:
+ @sebgroup/bootstrap.
+
+
+ Font Awesome - This component uses Font Awesome regular icons (dependency might be removed in a
+ future release).
+
+ Note that you need to have a pro license for Font Awesome or use SEB:s internal npm registry to install this
+ package.
+
+
+
+
+## Demo and documentation
+
+[View demo and documentation](https://sebgroup.github.io/ng-wizard/)
## Quick start
-Import the module.
+### Install
+
+```
+npm install @sebgroup/ng-wizard
+```
+
+### Import the module.
+
+app.module.ts
```TypeScript
+import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { SebNgWizardModule, WizardSteps } from '@sebgroup/ng-wizard';
+
+import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
-import { WizardModule } from 'ng-wizard';
+import { StepOneComponent } from './steps/step-one/step-one.component';
+import { StepTwoComponent } from './steps/step-two/step-two.component';
@NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- WizardModule
- ],
- providers: [],
- bootstrap: [AppComponent]
+ declarations: [AppComponent, StepOneComponent, StepTwoComponent],
+ imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, FontAwesomeModule, SebNgWizardModule.forRoot()],
+ providers: [WizardSteps],
+ bootstrap: [AppComponent],
})
-export class AppModule { }
+export class AppModule {
+ constructor(library: FaIconLibrary) {
+ // add icons that should be available in the app/module
+ }
+}
```
-Setup the steps and event-listeners in your component.
+### Setup steps as routes
-```TypeScript
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { WizardStep } from 'ng-wizard';
-
-@Component({
- selector: 'app-root', // tslint:disable-line
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
- steps: WizardStep[] = [
- { path: '/first', text: 'First step' },
- { path: '/second', text: 'Second step' },
- { path: '/third', text: 'Third step' }
- ];
+app-routing.module.ts
- constructor(private router: Router) {}
+```TypeScript
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { WizardStep } from '@sebgroup/ng-wizard';
+import { StepOneComponent } from './steps/step-one/step-one.component';
+import { StepTwoComponent } from './steps/step-two/step-two.component';
+
+const routes: WizardStep[] = [
+ {
+ path: '',
+ redirectTo: 'step-one',
+ pathMatch: 'full',
+ },
+ {
+ path: 'step-one',
+ component: StepOneComponent,
+ data: {
+ heading: 'Step one',
+ },
+ },
+ {
+ path: 'step-two',
+ component: StepTwoComponent,
+ data: {
+ heading: 'Step two',
+ }
+ },
+];
- onClose() {
- console.log('close');
- }
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule],
+})
+export class AppRoutingModule {}
- onStep(step: WizardStep) {
- this.router.navigateByUrl(step.path);
- }
-}
```
-Write the markup for your template.
+### Add component
+
+app.component.ts
```Html
-
+
+
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/basic/basic.module.ts b/projects/seb-ng-wizard-lazy-demo/src/app/basic/basic.module.ts
index af6d8ae..090e434 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/basic/basic.module.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/basic/basic.module.ts
@@ -1,14 +1,16 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { WizardModule } from '../../../../seb-ng-wizard/src/lib/wizard/wizard.module';
+import { SebNgWizardModule, WizardSteps } from '@sebgroup/ng-wizard';
import { SharedModule } from '../shared/shared.module';
import { BasicRoutingModule } from './basic-routing.module';
import { BasicComponent } from './basic.component';
+import { StepFinalComponent } from './components/step-final/step-final.component';
import { StepOneComponent } from './components/step-one/step-one.component';
import { StepTwoComponent } from './components/step-two/step-two.component';
@NgModule({
- declarations: [StepOneComponent, StepTwoComponent, BasicComponent],
- imports: [CommonModule, SharedModule, WizardModule, BasicRoutingModule],
+ declarations: [StepOneComponent, StepTwoComponent, BasicComponent, StepFinalComponent],
+ imports: [CommonModule, SharedModule, SebNgWizardModule.forRoot(), BasicRoutingModule],
+ providers: [WizardSteps],
})
export class BasicModule {}
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-final/step-final.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-final/step-final.component.html
new file mode 100644
index 0000000..75ad6bf
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-final/step-final.component.html
@@ -0,0 +1 @@
+
Lorem ipsum, receipt example will be added here.
diff --git a/projects/seb-ng-wizard-demo/src/app/third-page/third-page.component.spec.ts b/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-final/step-final.component.spec.ts
similarity index 54%
rename from projects/seb-ng-wizard-demo/src/app/third-page/third-page.component.spec.ts
rename to projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-final/step-final.component.spec.ts
index 280ca34..353277c 100644
--- a/projects/seb-ng-wizard-demo/src/app/third-page/third-page.component.spec.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-final/step-final.component.spec.ts
@@ -1,19 +1,19 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ThirdPageComponent } from './third-page.component';
+import { StepFinalComponent } from './step-final.component';
-describe('ThirdPageComponent', () => {
- let component: ThirdPageComponent;
- let fixture: ComponentFixture;
+describe('StepFinalComponent', () => {
+ let component: StepFinalComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ThirdPageComponent],
+ declarations: [StepFinalComponent],
}).compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(ThirdPageComponent);
+ fixture = TestBed.createComponent(StepFinalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-final/step-final.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-final/step-final.component.ts
new file mode 100644
index 0000000..81bb643
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-final/step-final.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-step-final',
+ templateUrl: './step-final.component.html',
+})
+export class StepFinalComponent implements OnInit {
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-one/step-one.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-one/step-one.component.html
index 5900039..700d171 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-one/step-one.component.html
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/basic/components/step-one/step-one.component.html
@@ -5,9 +5,14 @@
Setup component and routes
wizard-component, a router outlet and a router config to our app. Usually you'd add the wizard-component and router
outlet to your app component but it could be to any component at any level in the router tree.
-
This sub step is added dynamically when needed and could contain some fancy KYC from.
+
+ We'll leave this part to you're imagination. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula
+ ex in mauris finibus finibus. Proin id dui eget risus euismod varius sed sit amet augue.
+
diff --git a/projects/seb-ng-wizard-demo/src/app/first-page/first-page.component.spec.ts b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/account-details/kyc/kyc.component.spec.ts
similarity index 54%
rename from projects/seb-ng-wizard-demo/src/app/first-page/first-page.component.spec.ts
rename to projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/account-details/kyc/kyc.component.spec.ts
index 7624b4d..9d24eeb 100644
--- a/projects/seb-ng-wizard-demo/src/app/first-page/first-page.component.spec.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/account-details/kyc/kyc.component.spec.ts
@@ -1,19 +1,19 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FirstPageComponent } from './first-page.component';
+import { KycComponent } from './kyc.component';
-describe('FirstPageComponent', () => {
- let component: FirstPageComponent;
- let fixture: ComponentFixture;
+describe('KycComponent', () => {
+ let component: KycComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [FirstPageComponent],
+ declarations: [KycComponent],
}).compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(FirstPageComponent);
+ fixture = TestBed.createComponent(KycComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/account-details/kyc/kyc.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/account-details/kyc/kyc.component.ts
new file mode 100644
index 0000000..1207569
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/account-details/kyc/kyc.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-kyc',
+ templateUrl: './kyc.component.html',
+})
+export class KycComponent implements OnInit {
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/confirmation/confirmation.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/confirmation/confirmation.component.html
new file mode 100644
index 0000000..d6d3375
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/confirmation/confirmation.component.html
@@ -0,0 +1,8 @@
+
+
Congratulations!
+ This is just a dummy placeholder and this design will be updated.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula ex in mauris finibus finibus. Proin id dui
+ eget risus euismod varius sed sit amet augue.
+
+ Wizards are generally used when we need to gather information that can be divided into steps or when we want guide the
+ user through a process ie. KYC and AML, application for new service etc.
+
+
+ Basic concept for this component built for Angular, involves using a route guard with
+ CanActivate to prevent
+ navigation to a specific route. In this example we're going to use a simple service to store the form data which in
+ turn will be used by the route guard to determine if navigation is allowed or not. We're also going to implement form
+ validation to make sure the information we enter is valid before storing it in our service.
+
+
+ There are many ways to set up a form in angular, this example uses
+ Form Builder and
+ Reactive Forms which provides a
+ model-driven approach for forms. Feel free to use whatever you like and whatever suits your needs, the complete code
+ with comments for this example can be found
+ in github.
+
- Basic concept involves using a route guard with
- CanActivate to prevent
- navigation to a specif route. In this example we're going to use a simple service to store the form data which in turn
- will be used by the route guard to determine if navigation is allowed or not. We're also going to implement form
- validation to make sure the information we enter is valid before storing it in our service.
-
-
- There are many ways to set up a form in angular, this example uses
- Form Builder and
- Reactive Forms which provides a
- model-driven approach for forms. Feel free to use whatever you like and what suits your needs, the complete code with
- comments for this example can be found here.
-
+
+
+ The form contains error, you need to correct them before proceeding.
+ You need to save the information before continuing to the next step.
+
+
+ You're profile was successfully saved!
+
+
+
+
+ You need to accept the terms
+
+
+ Terms accepted
+
+
-
-
- The form contains error, you need to correct them before proceeding.
- You need to save the information before continuing to the next step.
-
-
- You're profile was successfully saved!
-
-
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/personal-details/personal-details.component.spec.ts b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/personal-details/personal-details.component.spec.ts
new file mode 100644
index 0000000..9015488
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/personal-details/personal-details.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PersonalDetailsComponent } from './personal-details.component';
+
+describe('PersonalDetailsComponent', () => {
+ let component: PersonalDetailsComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [PersonalDetailsComponent],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PersonalDetailsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/reactive-form/reactive-form.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/personal-details/personal-details.component.ts
similarity index 61%
rename from projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/reactive-form/reactive-form.component.ts
rename to projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/personal-details/personal-details.component.ts
index 02eaaf1..4b0151f 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/reactive-form/reactive-form.component.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/personal-details/personal-details.component.ts
@@ -1,16 +1,15 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
-import { Observable, Subject } from 'rxjs';
+import { WizardControlService } from '@sebgroup/ng-wizard';
+import { Subject } from 'rxjs';
import { filter, takeUntil, tap } from 'rxjs/operators';
-import { WizardControlService } from '../../../../../../../seb-ng-wizard/src/lib/controls/wizard-control.service';
-import { StepService, StepState } from '../../../services/step.service';
+import { StepService } from '../../../services/step.service';
@Component({
- selector: 'app-reactive-form',
- templateUrl: './reactive-form.component.html',
+ selector: 'app-personal-details',
+ templateUrl: './personal-details.component.html',
})
-export class ReactiveFormComponent implements OnInit, OnDestroy {
- $stepStatus: Observable; // observable for step status
+export class PersonalDetailsComponent implements OnInit, OnDestroy {
unsubscribe$ = new Subject();
profileForm: FormGroup;
submitted = false;
@@ -38,7 +37,7 @@ export class ReactiveFormComponent implements OnInit, OnDestroy {
public stepService: StepService,
private fb: FormBuilder,
public controls: WizardControlService,
- private cdr: ChangeDetectorRef,
+ private el: ElementRef,
) {
this.profileForm = fb.group({
firstName: ['', Validators.required],
@@ -51,20 +50,35 @@ export class ReactiveFormComponent implements OnInit, OnDestroy {
accept: ['', Validators.requiredTrue],
help: [true],
});
-
- this.$stepStatus = this.stepService.getState('/form-and-route-guard/form-step').pipe(
- filter(res => res && res.data),
- tap(res => this.profileForm.setValue(res.data)),
- tap(_ => this.cdr.detectChanges()),
- );
}
-
+ stepStatus$ = this.stepService.getState().pipe(
+ filter(res => res && res.data),
+ tap(res => this.profileForm.setValue(res.data)),
+ );
/**
* Save form data if form is valid
*/
save() {
- if (this.profileForm.valid) {
- this.stepService.saveState('/form-and-route-guard/form-step', this.profileForm.valid, this.profileForm.value);
+ this.stepService.saveState(this.profileForm.valid ? 'success' : 'danger', this.profileForm.value);
+ }
+
+ /**
+ * Focus first invalid form control or alert message if it exists
+ */
+ private _focusInvalid() {
+ if (this.profileForm.invalid) {
+ const invalid: string = Object.keys(this.profileForm.controls).find(
+ key => this.profileForm.controls[key].invalid,
+ );
+
+ if (invalid) {
+ this.el.nativeElement.querySelector('[formcontrolname="' + invalid + '"]').focus();
+ }
+ } else {
+ const alertMessage = this.el.nativeElement.querySelector('.alert.alert-danger');
+ if (alertMessage) {
+ alertMessage.focus();
+ }
}
}
@@ -91,15 +105,18 @@ export class ReactiveFormComponent implements OnInit, OnDestroy {
case 'next':
this.submitted = true;
this.profileForm.markAllAsTouched();
+ this._focusInvalid();
+ this.save();
break;
case 'save':
this.submitted = true;
this.profileForm.markAllAsTouched();
this.save();
+ this._focusInvalid();
break;
case 'cancel':
this.profileForm.reset();
- this.stepService.saveState('/form-and-route-guard/form-step', this.profileForm.valid, this.profileForm.value);
+ this.save();
this.submitted = false;
}
});
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/protected-step/protected-step.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/protected-step/protected-step.component.html
deleted file mode 100644
index 6f1d106..0000000
--- a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/protected-step/protected-step.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-`;
-
- // expose route outlet
- routerOutletTs = `import { Component } from '@angular/core';
-import { WizardControlService } from '@sebgroup/ng-wizard';
-
-@Component({
- selector: 'app-form-and-route-guard',
- templateUrl: './form-and-route-guard.component.html',
- styleUrls: ['./form-and-route-guard.component.scss']
-})
-export class FormAndRouteGuardComponent {
-
- constructor(private controls: WizardControlService) {}
-
- /**
- * Global close function - function is available on all steps
- */
- onClose(event?: MouseEvent) {
- console.log('Close function called');
- }
-
- /**
- * Global save function - function is available on all steps
- */
- save($event: MouseEvent) {
- console.log('Save function called');
-
- // optionally the wizard control service can be used to emit an control event
- this.controls.click($event, { type: 'save', name: 'Save' });
- }
-}
-
-`;
-
- // expose template
- template = `
Basic concept involves using a route guard with CanActivate to prevent navigation to a specif route. In this example we're going to use a simple service to store the form data which in turn will be used by the route guard to determine if navigation is allowed or not. We're also going to implement form validation to make sure the information we enter is valid before storing it in our service.
-
- There are many ways to set up a form in angular, this example uses Form Builder and Reactive Forms which provides a model-driven approach for forms. Feel free to use whatever you like and what suits your needs, the complete code with comments for this example can be found here.
-
- Please create an issue
- here if you have
- questions or if you miss something.
+ Please create an
+ issue in Github if you
+ have questions or if you miss something.
+
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/examples.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/examples.component.ts
index 22e794f..7612838 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/examples.component.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/examples.component.ts
@@ -2,32 +2,9 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-examples',
- templateUrl: './examples.component.html',
+ template: '',
})
-export class ExamplesComponent implements OnInit {
- examples = [
- {
- title: 'Basic example',
- description: 'A basic example with two routes and custom action in modal footer.',
- path: '/basic',
- },
- {
- title: 'Using route guards',
- description:
- 'A wizard using reactive forms, form validation and route guards to prevent user from navigating to steps unless previous step has been completed.',
- path: '/form-and-route-guard',
- },
- {
- title: 'Secondary content (right content)',
- description: 'Coming soon...',
- path: '',
- },
- {
- title: 'With language and translations',
- description: 'Coming soon...',
- path: '',
- },
- ];
+export class ExamplesWrapperComponent implements OnInit {
constructor() {}
ngOnInit() {}
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/examples/examples.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/examples/examples.component.html
new file mode 100644
index 0000000..b1278ee
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/examples/examples.component.html
@@ -0,0 +1,6 @@
+
Need help with the wizard or want to know how to implement something?
+
+ The wizard is built to streamline the wizard experience and make it more coherent. Somethings might therefore feel a
+ bit opinionated but we've tried to keep it flexible enough to cater for most needs.
+
+
The sub steps here are intended to give you some ideas on how things can be implemented using the wizard.
diff --git a/projects/seb-ng-wizard/src/lib/seb-ng-wizard.component.spec.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/examples/examples.component.spec.ts
similarity index 53%
rename from projects/seb-ng-wizard/src/lib/seb-ng-wizard.component.spec.ts
rename to projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/examples/examples.component.spec.ts
index 27b03c5..439cec3 100644
--- a/projects/seb-ng-wizard/src/lib/seb-ng-wizard.component.spec.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/examples/examples.component.spec.ts
@@ -1,19 +1,19 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { SebNgWizardComponent } from './seb-ng-wizard.component';
+import { ExamplesComponent } from './examples.component';
-describe('SebNgWizardComponent', () => {
- let component: SebNgWizardComponent;
- let fixture: ComponentFixture;
+describe('ExamplesComponent', () => {
+ let component: ExamplesComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [SebNgWizardComponent],
+ declarations: [ExamplesComponent],
}).compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(SebNgWizardComponent);
+ fixture = TestBed.createComponent(ExamplesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/examples/examples.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/examples/examples.component.ts
new file mode 100644
index 0000000..0fa611a
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/examples/examples.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-examples',
+ templateUrl: './examples.component.html',
+})
+export class ExamplesComponent implements OnInit {
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/language/language.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/language/language.component.html
new file mode 100644
index 0000000..7484ef5
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/language/language.component.html
@@ -0,0 +1,8 @@
+
+ Use the wizard with different languages and pass translations to the wizard using a translations provider.
+
+
+ The example on the link below uses transloco but you could use any library or custom setup as long as it returns
+ translations as key value pairs.
+
+ You can prevent route/step navigation using regular route guards in angular.
+
+
+ Typically you create a service or hook up your app with some state management lib like ngrx or akita and check if
+ routing should be allowed based on a state. Maybe the user needs to complete a certain step before advancing or
+ correct a form error.
+
+
The link below show as simple example using forms and a simple service.
+Show example
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/secondary-content/protected-step-info/protected-step-info.component.spec.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/prevent-navigation/prevent-navigation.component.spec.ts
similarity index 50%
rename from projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/secondary-content/protected-step-info/protected-step-info.component.spec.ts
rename to projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/prevent-navigation/prevent-navigation.component.spec.ts
index 36295ad..5c7f24e 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/secondary-content/protected-step-info/protected-step-info.component.spec.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/prevent-navigation/prevent-navigation.component.spec.ts
@@ -1,19 +1,19 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ProtectedStepInfoComponent } from './protected-step-info.component';
+import { PreventNavigationComponent } from './prevent-navigation.component';
-describe('ProtectedStepInfoComponent', () => {
- let component: ProtectedStepInfoComponent;
- let fixture: ComponentFixture;
+describe('PreventNavigationComponent', () => {
+ let component: PreventNavigationComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ProtectedStepInfoComponent],
+ declarations: [PreventNavigationComponent],
}).compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(ProtectedStepInfoComponent);
+ fixture = TestBed.createComponent(PreventNavigationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/prevent-navigation/prevent-navigation.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/prevent-navigation/prevent-navigation.component.ts
new file mode 100644
index 0000000..3efb4c4
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/prevent-navigation/prevent-navigation.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-prevent-navigation',
+ templateUrl: './prevent-navigation.component.html',
+})
+export class PreventNavigationComponent implements OnInit {
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/secondary-content/additional-content/additional-content.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/secondary-content/additional-content/additional-content.component.html
new file mode 100644
index 0000000..22c044b
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/examples/sub-steps/secondary-content/additional-content/additional-content.component.html
@@ -0,0 +1,19 @@
+
+
{{ data.heading }}
+
+ This is just a regular alert box i.e "alert alert-secondary" with a link to github.
+ View repo in github.
+
+
+
Pie chart
+
+
+
+ You can add anything you like as secondary content to your step. Like this svg symbolizing some fancy pie chart or
+ diagram that you might want to add.
+
Currently the wizard supports main and secondary content. This example shows how to add the latter.
+
+ It's possible to add any content as secondary content, just create a component with the content you want to add and
+ extend it using the SecondaryContentComponent class. Once you've done that it's just a matter of hooking
+ it up with your step and optionally pass some data to it.
+
+
+
Create a component for secondary content
+
We're creating a component called additional content which contains a content box and a moc chart.
+ Use the status property of a step to highlight and clarify wizard progress - completed steps, errors etc.
+
+
+ By default steps will be marked as finished or completed when you've passed them. If you want to handle step states
+ manually it's possible to do so using the markPassedAsSuccess config option. It's also possible to set
+ other states using the setState method provided by WizardSteps.
+
+
Set state using setState method
+
+
+
+
Available states
+
The wizard supports the following states.
+
+
info
+
success
+
warning
+
danger
+
null (emtpy)
+
+
Set state for active step
+
Set state for active step using the setState method.
+
+
+
+
+
+
Set state for step based on route path
+
Set state of any step by passing the route path to the setState method.
- Import module - Import SebNgWizardModule like this:
-
-
-
- Add/use component - Use SebNgWizardComponent in template like this:
-
-
-
- Add steps (routes) - Add steps to AppRoutingModule like this:
-
-
-
+
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/getting-started.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/getting-started.component.ts
index 12b206d..11fcd9c 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/getting-started.component.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/getting-started.component.ts
@@ -6,15 +6,27 @@ import { Component, OnInit } from '@angular/core';
})
export class GettingStartedComponent implements OnInit {
importModule = `// app.module.ts
-import { WizardModule } from '@sebgroup/ng-wizard'; // <-- Add this line
+import { SebNgWizardModule, WizardStepsService } from '@sebgroup/ng-wizard'; // <-- Add this line
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // <-- Add this line to get animations
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome'; // <-- Add this line to use correct icons
@NgModule({
imports: [
AppRoutingModule, // holds wizard steps as routes
- WizardModule // <-- Add this line
+ BrowserAnimationsModule, // <-- Add this line to get animations
+ SebNgWizardModule.forRoot(), // <-- Add wizard (pass optional config)
+ FontAwesomeModule // <-- Add this line to get correct icons
],
+ providers: [WizardStepsService] // <-- Add wizard steps service
})
-export class AppModule {}`;
+export class AppModule {
+ constructor(library: FaIconLibrary) {
+ // add icons that should be available in the app/module
+ library.addIcons(
+ faCalendarAlt
+ );
+ }
+}`;
addComponent = `
@@ -33,34 +45,34 @@ import { StepTwoComponent } from './components/step-two/step-two.component';
const routes: WizardSteps = [
{
path: '',
+ redirectTo: 'step-one'
+ }, {
+ path: 'step-one',
component: StepOneComponent,
- children: [
- { path: '', redirectTo: 'step-one' },
- { path: 'step-one', component: StepOneComponent,
- data: {
- heading: 'Step one',
- controls: [{
- name: 'Step two',
- path: 'step-two',
- type: 'next'
- }]
- }
- },
- { path: 'step-two', component: StepTwoComponent,
- data: {
- heading: 'Step two',
- controls: [{
- name: 'Step one',
- path: 'step-one',
- type: 'prev'
- }, {
- name: 'Save',
- path: 'step-completed',
- type: 'save'
- }]
- }
- }],
- },
+ data: {
+ heading: 'Step one',
+ controls: [{
+ type: 'next'
+ }]
+ }
+ }, {
+ path: 'step-two',
+ component: StepTwoComponent,
+ data: {
+ heading: 'Step two',
+ controls: [{
+ type: 'prev'
+ }, {
+ name: 'Save',
+ path: 'step-completed',
+ type: 'save'
+ }]
+ },
+ }, {
+ path: '**',
+ redirectTo: 'step-one',
+ pathMatch: 'full'
+ }
];
@NgModule({
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/add-component/add-component.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/add-component/add-component.component.html
new file mode 100644
index 0000000..61ff682
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/add-component/add-component.component.html
@@ -0,0 +1,20 @@
+
+ The wizard component is basically just a wrapper for a router outlet which adds a header, footer and navigation based
+ on the data passed to the route config.
+
+
+ For more info and available config options checkout out the
+ options part or view examples for more ideas on how you can use
+ and setup the wizard.
+
+
Basic usage
+Use SebNgWizardComponent in template like this:
+
+
+
+
+
With custom actions/content in header
+Use SebNgWizardComponent in template like this:
+
+
+
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/reactive-form/reactive-form.component.spec.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/add-component/add-component.component.spec.ts
similarity index 53%
rename from projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/reactive-form/reactive-form.component.spec.ts
rename to projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/add-component/add-component.component.spec.ts
index e307341..5e17ea3 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/form-and-route-guard/components/steps/reactive-form/reactive-form.component.spec.ts
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/add-component/add-component.component.spec.ts
@@ -1,19 +1,19 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormComponent } from './reactive-form.component';
+import { AddComponentComponent } from './add-component.component';
-describe('ReactiveFormComponent', () => {
- let component: ReactiveFormComponent;
- let fixture: ComponentFixture;
+describe('AddComponentComponent', () => {
+ let component: AddComponentComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ReactiveFormComponent],
+ declarations: [AddComponentComponent],
}).compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(ReactiveFormComponent);
+ fixture = TestBed.createComponent(AddComponentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/add-component/add-component.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/add-component/add-component.component.ts
new file mode 100644
index 0000000..4faf960
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/add-component/add-component.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-add-component',
+ templateUrl: './add-component.component.html',
+})
+export class AddComponentComponent implements OnInit {
+ constructor() {}
+ addComponent = `
+
+
+ A wizard without steps is like a pizza without topping. Add steps to your wizard in a breeze by declaring them as
+ routes.
+
+
+ Each step in the wizard consists of an angular component exposed on a route, i.e. the
+ WizardStep interface extends angulars built in interface for Routes. Add steps by adding
+ WizardSteps(routes) to your routing module.
+
+
Basic example
+
+ To create a simple wizard with two steps ("Step one" and "Step two"), add steps (routes) to
+ AppRoutingModule like this:
+
Import the module to your app to add the ability to use wizards inside your app.
+
+ You'll likely want to add the SebNgWizardModule to one of your modules e.g AppModule. It's
+ however possible to import it into several modules if you want to provide different wizards with different steps and
+ configuration within a single app (like in this demo).
+
+
+ Note that you need to provide an instance of WizardSteps which holds information about all the steps used
+ by the wizard.
+
+
Basic usage
+
Import SebNgWizardModule (and other required modules) like this:
+
+
+
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/import-module/import-module.component.spec.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/import-module/import-module.component.spec.ts
new file mode 100644
index 0000000..fe5ab40
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/import-module/import-module.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImportModuleComponent } from './import-module.component';
+
+describe('ImportModuleComponent', () => {
+ let component: ImportModuleComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ImportModuleComponent],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ImportModuleComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/import-module/import-module.component.ts b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/import-module/import-module.component.ts
new file mode 100644
index 0000000..7c24778
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/getting-started/sub-steps/import-module/import-module.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-import-module',
+ templateUrl: './import-module.component.html',
+ styles: [],
+})
+export class ImportModuleComponent implements OnInit {
+ constructor() {}
+ importModule = `// app.module.ts
+import { SebNgWizardModule, WizardSteps } from '@sebgroup/ng-wizard'; // <-- Add this line
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // <-- Add this line to get animations
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome'; // <-- Add this line to use correct icons
+
+@NgModule({
+ imports: [
+ AppRoutingModule, // holds wizard steps as routes
+ BrowserAnimationsModule, // <-- Add this line to get animations
+ SebNgWizardModule.forRoot(), // <-- Add wizard (pass optional config)
+ FontAwesomeModule // <-- Add this line to get correct icons
+ ],
+ providers: [WizardSteps] // <-- Add wizard steps
+})
+export class AppModule {
+ constructor(library: FaIconLibrary) {
+ // add icons that should be available in the app/module
+ library.addIcons(
+ faCalendarAlt
+ );
+ }
+}`;
+ ngOnInit() {}
+}
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/introduction/introduction.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/introduction/introduction.component.html
index f9a101a..21ecded 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/introduction/introduction.component.html
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/introduction/introduction.component.html
@@ -1,11 +1,11 @@
-
+
This is a wizard component built for angular. It uses routes and route guards to control steps and it relies on
Bootstrap for markup and styling as well as Font Awesome for icons.
Requirements
- Angular - This component is built for Angular and tested with version 8+.
+ Angular - This component is built for Angular and tested with version 12+.
A route for each step - Each step in the wizard is a route with an optional route guard using
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/options/options.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/options/options.component.html
index b02abab..95eb773 100644
--- a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/options/options.component.html
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/options/options.component.html
@@ -1,4 +1,6 @@
-
+
+
diff --git a/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/options/sub-steps/options-and-configuration/options-and-configuration.component.html b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/options/sub-steps/options-and-configuration/options-and-configuration.component.html
new file mode 100644
index 0000000..1154a41
--- /dev/null
+++ b/projects/seb-ng-wizard-lazy-demo/src/app/wizard-tutorial/components/steps/options/sub-steps/options-and-configuration/options-and-configuration.component.html
@@ -0,0 +1,41 @@
+
+ Customize the wizard to make it work for your application and flow.
+
+
+ Pass a wizard configuration using .forRoot() method of the SebNgWizardModule. The first
+ parameter is for the configuration, the second is for custom texts, translations and language support.
+
+
Add custom configuration
+
+
+
+
Config options
+
Below are all the config options currently available.
+
+
+
+
+
Property
+
Description
+
Default
+
+
+
+
+
markPassedAsSuccess
+
Mark passed steps as completed/finished.
+
true
+
+
+
hideClose
+
Remove close button/action from wizard header.
+
false
+
+
+
useFullWidth
+
Allow main content to span across the whole viewport.
Wizard steps extends angular Routes and relies on the data property of the route.
+
Step data options
+
The list below describes the different properties you can declare for your step/route in the data object.
+
+
+
+
+
Property
+
Type
+
Description
+
+
+
+
+
+
heading
+
string
+
+ Heading/text for link to step in navigation and as a category/label heading in each step. If no page header is
+ defined the heading will be used as page heading too.
+
+
+
+
+
pageHeading
+
string
+
Page heading for step. If no page heading is defined the wizard will fall back to heading instead.
+
(Optional)
+
+
+
controls
+
WizardControl[]
+
+ Add controls/actions in footer of the step, if no controls are declared, controls for previous and next will
+ be added by default. For more info see
+ Step controls.
+
+
(Optional)
+
+
+
state
+
'success' | 'warning' | 'danger' | 'info'
+
+ Set state for a step (adds icon and highlights state in navigation). For more info see
+ Step states.
+
+
(Optional)
+
+
+
secondaryContent
+
SecondaryContent
+
+ Add secondary content to step. For more info see
+ Secondary content.
+
+
(Optional)
+
+
+
subSteps
+
string[]
+
+ List of sub steps available for step. Declare sub steps as children to route to let angular know that the
+ route is available. Add the path to subSteps to add it to the wizard navigation. For more info
+ see Sub steps.
+
Add an array of controls to the data object of the step to add them in the footer.
+
The wizard will try to be smart when laying out the controls/buttons in the footer,
+
+
+
+
+
Property
+
Type
+
Description
+
+
+
+
+
+
type
+
'next' | 'prev' | 'cancel' | 'save' | 'close'
+
+ Type of control. Both next and prev will add icons and by default as well as try to
+ navigate to next/previous step if no path is passed.
+
+
+
+
+
text
+
string
+
+ Text that will be added to the control. Use a unique key instead if you want to use translations, see
+ language example for more info.
+
+
(Optional)
+
+
+
title
+
string
+
+ Title that will be added to control (useful for screen readers etc.) if no title is added the text will be
+ used instead. Use a unique key if you want to use translations, see language example for
+ more info.
+
+
(Optional)
+
+
+
path
+
string
+
Add a path to the control which will be used a path for the router link.