diff --git a/.gitpod.yml b/.gitpod.yml
index 9d1d9771..c9bcb516 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -6,7 +6,7 @@ image:
# Command to start on workspace startup (optional)
tasks:
-- command: "npm install"
+ - command: "npm install"
github:
prebuilds:
diff --git a/README.md b/README.md
index 330a8e55..ce8c1f6c 100644
--- a/README.md
+++ b/README.md
@@ -1,26 +1,30 @@
# Overview angular-archwizard
+
[](https://travis-ci.com/madoar/angular-archwizard)
[](https://david-dm.org/madoar/angular-archwizard)
[](https://david-dm.org/madoar/angular-archwizard?type=dev)
-[](https://www.codacy.com/app/marc.arndt/angular-archwizard?utm_source=github.com&utm_medium=referral&utm_content=madoar/angular-archwizard&utm_campaign=Badge_Grade)
+[](https://www.codacy.com/app/marc.arndt/angular-archwizard?utm_source=github.com&utm_medium=referral&utm_content=madoar/angular-archwizard&utm_campaign=Badge_Grade)
[](https://www.codacy.com/app/marc.arndt/angular-archwizard?utm_source=github.com&utm_medium=referral&utm_content=madoar/angular-archwizard&utm_campaign=Badge_Coverage)
[](https://www.npmjs.com/package/angular-archwizard)
This project contains a functional module with a wizard component and some supportive components and directives for [Angular](https://angular.io/) version 9 or later.
## Build
+
Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
## Running unit tests
+
Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Compatibility
+
Latest `angular-archwizard` is compatible with Angular 9+.
Older versions of `angular-archwizard` can be used together with older versions of Angular.
The following table shows which version of `angular-archwizard` has been built with which Angular version:
| `angular-archwizard` version | Angular version |
-|------------------------------|-----------------|
+| ---------------------------- | --------------- |
| `3.0.0` | Angular 5 |
| `4.0.0` | Angular 7 |
| `5.0.1` | Angular 8 |
@@ -28,6 +32,7 @@ The following table shows which version of `angular-archwizard` has been built w
| `7.0.0` | Angular 10 |
## Gitpod
+
`angular-archwizard` can be developed with Gitpod, a free one-click online IDE for GitHub:
[](https://gitpod.io/#https://github.com/madoar/angular-archwizard)
@@ -35,6 +40,7 @@ The following table shows which version of `angular-archwizard` has been built w
## Installation
### Step 1: Install `angular-archwizard`
+
`angular-archwizard` is available as a NPM package. To install `angular-archwizard` in your project directory run:
```bash
@@ -42,24 +48,24 @@ $ npm install --save angular-archwizard
```
### Step 2: Import the ArchwizardModule
+
After installation you can import `angular-archwizard` into your Angular project by adding the `ArchwizardModule` to your module declaration as follows:
```typescript
-import { ArchwizardModule } from 'angular-archwizard';
+import { ArchwizardModule } from "angular-archwizard";
@NgModule({
- imports: [
- ArchwizardModule
- ],
+ imports: [ArchwizardModule],
})
-export class Module { }
+export class Module {}
```
### Step 3: Include styles
+
To allow customization, `angular-archwizard` bundles CSS styles separately. If you are using Angular CLI, import them into your `styles.css`...
```css
-@import '../node_modules/angular-archwizard/styles/archwizard.css';
+@import "../node_modules/angular-archwizard/styles/archwizard.css";
```
...or include them into `angular.json`:
@@ -79,6 +85,7 @@ If you are using SCSS, you can include the styles in the form of a `.scss` file:
This way you can easily customize wizard's appearance by tweaking SCSS variables as described in [Styles Customization](#styles-customization).
## How to use the wizard
+
To use this wizard component in an angular project simply add a `aw-wizard` component to the html template of your component:
```html
@@ -86,7 +93,9 @@ To use this wizard component in an angular project simply add a `aw-wizard` comp
Content of Step 1
-
+
Content of Step 2
@@ -104,11 +113,13 @@ To use this wizard component in an angular project simply add a `aw-wizard` comp
## Components
### \
+
The `` environment is the environment in which you define the steps belonging to your wizard.
In addition to the contained wizard steps, `angular-archwizard` enables you to define the location and the layout of the navigation bar inside your wizard.
To set the location, the layout of the navigation bar and many other settings, you can pass the following parameters to the `aw-wizard` component:
#### \[navBarLocation\]
+
The location of the navigation bar, contained inside the wizard, can be specified through the `navBarLocation` input value.
This value can be either `top`, `bottom`, `left` or `right`, where the values specify the position at which the navigation bar will be shown.
In addition `top` and `bottom` will lead to a horizontal navigation bar, when `left` and `right` lead to a vertical navigation bar at the
@@ -116,6 +127,7 @@ left or right side.
If no `navBarLocation` is given the navigation bar will be shown at the top of the wizard.
#### \[navBarLayout\]
+
Another option that can be changed is the design or layout of the navigation bar.
Currently five different navigation bar layouts exist.
These are `small`, `large-filled`, `large-empty`, `large-filled-symbols` and `large-empty-symbols`.
@@ -125,11 +137,13 @@ The second two layouts `large-filled-symbols` and `large-empty-symbols` optional
for each step of your wizard, in the navigation bar, if such a symbol has been defined for the step.
#### \[navBarDirection\]
+
Normally the steps in the navigation bar are layed out from left to right or from top to bottom.
In some cases, like with languages that are written from right to left, it may be required to change this direction to layout the steps from right to left.
To layout the steps from right to left you can pass `right-to-left` to the `navBarDirection` input of the wizard component.
#### \[defaultStepIndex\]
+
Per default the wizard always starts with the first wizard step, after initialisation. The same applies for a reset, where the wizard normally resets to the first step.
Sometimes this needs to be changed. If another default wizard step needs to be used, you can set it, by using the `[defaultStepIndex]` input of the wizard component.
For example, to start the wizard in the second step, `[defaultStepIndex]="2"` needs to be set.
@@ -137,6 +151,7 @@ For example, to start the wizard in the second step, `[defaultStepIndex]="2"` ne
Please be aware, that angular will interpret the given input value as a string if it's not enclosed by `[]`!
#### \[disableNavigationBar\]
+
Sometimes it may be necessary to disable navigation via the navigation bar.
In such a case you can disable navigation via the navigation bar by setting the input `[disableNavigationBar]` of the wizard component to `true`.
@@ -144,6 +159,7 @@ After disabling the navigation bar, the user can't use the navigation bar anymor
Disabling the navigation bar doesn't restrict the use of elements (buttons or links) with an `awNextStep`, `awPreviousStep` or `awGoToStep` directive.
#### Parameter overview
+
Possible `` parameters:
| Parameter name | Possible Values | Default Value |
@@ -155,19 +171,23 @@ Possible `` parameters:
| `[disableNavigationBar]` | `boolean` | `false` |
### \
+
`angular-archwizard` contains two ways to define a wizard step.
One of these two ways is by using the `` component.
#### \[stepId\]
+
A wizard step can have its own unique id.
This id can then be used to navigate to the step.
In addition the `[stepId]` of a wizard step is used as the `id` of the `li` element for the wizard step in the navigation bar.
#### \[stepTitle\]
+
A wizard step needs to contain a title, which is shown in the navigation bar of the wizard.
To set the title of a step, add the `stepTitle` input attribute, with the choosen step title, to the definition of your wizard step.
#### \[navigationSymbol\]
+
Sometimes it's useful to add a symbol in the center of the circle in the navigation bar, which belongs to the step.
`angular-archwizard` supports this through the `[navigationSymbol]` input attribute of the wizard step.
@@ -193,12 +213,16 @@ For example, if you want to show the icon with the unicode `\f2dd` of [FontAweso
you can do this via the following `[navigationSymbol]` input attribute:
```html
-
+
...
```
#### \[canEnter\]
+
Sometimes it's required to only allow the user to enter a specific step if a certain validation method returns true.
In such a case you can use the `[canEnter]` input of the targeted wizard step.
This input can be either a boolean, which directly tells the wizard if the targeted step can be entered,
@@ -207,6 +231,7 @@ This function will then be called, with the direction in which the targeted step
It then returns true, when the step change should succeed and false otherwise.
#### \[canExit\]
+
If you have an additional check or validation you need to perform to decide, if the step can be exited (both to the next step and to the previous step),
you can either pass a boolean or a function, taking a `MovingDirection` enum and returning a boolean or a `Promise`, to the `[canExit]` attribute of the wizard step.
This boolean, or function, is taken into account, when an operation has been performed, which leads to a transition of the current step.
@@ -215,6 +240,7 @@ If only exiting in one direction should be covered, you can pass a function, tak
This function will then be called whenever an operation has been performed, that leads to a change of the current step.
#### \(stepEnter\)
+
If you need to call a function to do some initialisation work before entering a wizard step you can add a `stepEnter` attribute to the wizard step environment like this:
```html
@@ -231,24 +257,27 @@ If the user went backwards, for example from the third step to the second or fir
If the user went forwards `MovingDirection.Forwards` will be passed to the function.
#### \(stepExit\)
+
Similar to `stepEnter` you can add a `stepExit` attribute to the wizard step environment, if you want to call a function every time a wizard step is exited
either by pressing on a component with an `awNextStep` or `awPreviousStep` directive, or by a click on the navigation bar.
`stepExit`, like `stepEnter` can call the given function with an argument of type `MovingDirection` that signalises in which direction the step was exited.
#### Parameter overview
+
Possible `` parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------- |
-| `[stepId]` | `string` | `null` |
-| `[stepTitle]` | `string` | `null` |
-| `[navigationSymbol]` | `{symbol: string, fontFamily?: string}` | `{symbol: ''}` |
-| `[canEnter]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
-| `[canExit]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
-| `(stepEnter)` | `function(MovingDirection): void` | `null` |
-| `(stepExit)` | `function(MovingDirection): void` | `null` |
+| Parameter name | Possible Values | Default Value |
+| -------------------- | -------------------------------------------------------------------------------------------------- | -------------- |
+| `[stepId]` | `string` | `null` |
+| `[stepTitle]` | `string` | `null` |
+| `[navigationSymbol]` | `{symbol: string, fontFamily?: string}` | `{symbol: ''}` |
+| `[canEnter]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
+| `[canExit]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
+| `(stepEnter)` | `function(MovingDirection): void` | `null` |
+| `(stepExit)` | `function(MovingDirection): void` | `null` |
### \
+
In addition to the "normal" step component `` it's also possible to define an optional ``.
The `aw-wizard-completion-step` is meant as the final wizard step, which signalises the user, that he or she successfully completed the wizard.
When an `aw-wizard-completion-step` has been entered by the user, all wizard steps, including the optional steps belonging to the wizard, are marked as completed.
@@ -258,19 +287,21 @@ The given parameters for the wizard completion step are identical to the normal
The only difference is, that it isn't possible to pass a `(stepExit)` and `[canExit]` parameter to the `aw-wizard-completion-step`, because it can't be exited.
#### Parameter overview
+
Possible `` parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------- |
-| `[stepId]` | `string` | `null` |
-| `[stepTitle]` | `string` | `null` |
-| `[navigationSymbol]` | `{symbol: string, fontFamily?: string}` | `{symbol: ''}` |
-| `[canEnter]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
-| `(stepEnter)` | `function(MovingDirection): void` | `null` |
+| Parameter name | Possible Values | Default Value |
+| -------------------- | -------------------------------------------------------------------------------------------------- | -------------- |
+| `[stepId]` | `string` | `null` |
+| `[stepTitle]` | `string` | `null` |
+| `[navigationSymbol]` | `{symbol: string, fontFamily?: string}` | `{symbol: ''}` |
+| `[canEnter]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
+| `(stepEnter)` | `function(MovingDirection): void` | `null` |
## Directives
### \[awNavigationMode\]
+
By default `angular-archwizard` operates in a "strict" navigation mode.
It requires users to navigate through the wizard steps in a linear fashion, where they can only enter the next step if all previous steps have been completed and the exit condition of the current step have been fulfilled.
The only exception to this rule are optional steps, which a user can skip.
@@ -279,12 +310,12 @@ Using the navigation bar, the user can navigate back to steps they already visit
You can alter this behavior by applying to the `` element an additional `[awNavigationMode]` directive, which can be used in two ways.
The easiest option is to tweak the default navigation mode with `[navigateBackward]` and/or `[navigateForward]` inputs which control the navigation bar and have the following options:
-| Parameter name | Possible Values | Default Value |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------- |
-| `[navigateBackward]` | `'allow'` \| `'deny'` | `'allow'` |
-| `[navigateForward]` | `'allow'` \| `'deny'` \| `'visited'` | `'deny'` |
+| Parameter name | Possible Values | Default Value |
+| -------------------- | ------------------------------------ | ------------- |
+| `[navigateBackward]` | `'allow'` \| `'deny'` | `'allow'` |
+| `[navigateForward]` | `'allow'` \| `'deny'` \| `'visited'` | `'deny'` |
-Take notice that the `'allow'` and `'visited'` options still respect step exit conditions. Also, the completion step still only becomes enterable after all previous steps are completed. Example usage:
+Take notice that the `'allow'` and `'visited'` options still respect step exit conditions. Also, the completion step still only becomes enterable after all previous steps are completed. Example usage:
```html
@@ -292,17 +323,16 @@ Take notice that the `'allow'` and `'visited'` options still respect step exit c
```
-If changes you need are more radical, you can define your own navigation mode. In order to do this, create a class implementing the `NavigationMode` interface and pass an instance of this class into the `[awNavigationMode]` directive.
+If changes you need are more radical, you can define your own navigation mode. In order to do this, create a class implementing the `NavigationMode` interface and pass an instance of this class into the `[awNavigationMode]` directive.
This takes priority over `[navigateBackward]` and `[navigateForward]` inputs.
Example usage:
custom-navigation-mode.ts:
```typescript
-import { NavigationMode } from 'angular-archwizard'
+import { NavigationMode } from "angular-archwizard";
class CustomNavigationMode implements NavigationMode {
-
// ...
}
```
@@ -314,7 +344,6 @@ my.component.ts:
// ...
})
class MyComponent {
-
navigationMode = new CustomNavigationMode();
}
```
@@ -322,30 +351,30 @@ class MyComponent {
my.component.html:
```html
-
- ...
-
+ ...
```
Instead of implementing the `NavigationMode` interface from scratch, you can extend one of the classes provided by `angular-archwizard`:
-- `BaseNavigationMode`: This class contains an abstract method called `isNavigable`, which you will have to override to define wizard's behavior towards navigation using the navigation bar.
+- `BaseNavigationMode`: This class contains an abstract method called `isNavigable`, which you will have to override to define wizard's behavior towards navigation using the navigation bar.
-- `ConfigurableNavigationMode`: This class defines the default navigation mode used by `angular-archwizard`.
- In some cases, it might be more convenient to base your custom implementation on it.
+- `ConfigurableNavigationMode`: This class defines the default navigation mode used by `angular-archwizard`.
+ In some cases, it might be more convenient to base your custom implementation on it.
This way of customizing the wizard is advanced, so be prepared to refer to documentation comments and source code for help.
#### Parameter overview
+
Possible `awNavigationMode` parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------- |
-| `[awNavigationMode]` | `NavigationMode` | `null` |
-| `[navigateBackward]` | `'allow'` \| `'deny'` | `'deny'` |
-| `[navigateForward]` | `'allow'` \| `'deny'` \| `'visited'` | `'allow'` |
+| Parameter name | Possible Values | Default Value |
+| -------------------- | ------------------------------------ | ------------- |
+| `[awNavigationMode]` | `NavigationMode` | `null` |
+| `[navigateBackward]` | `'allow'` \| `'deny'` | `'deny'` |
+| `[navigateForward]` | `'allow'` \| `'deny'` \| `'visited'` | `'allow'` |
### \[awEnableBackLinks\]
+
In some cases it may be required that the user is allowed to leave an entered `aw-wizard-completion-step`.
In such a case you can enable this by adding the directive `[awEnableBackLinks]` to the `aw-wizard-completion-step`.
@@ -356,13 +385,15 @@ In such a case you can enable this by adding the directive `[awEnableBackLinks]`
```
#### Parameter overview
+
Possible `awEnableBackLinks` parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------- |
-| `(stepExit)` | `function(MovingDirection): void` | `null` |
+| Parameter name | Possible Values | Default Value |
+| -------------- | --------------------------------- | ------------- |
+| `(stepExit)` | `function(MovingDirection): void` | `null` |
### \[awWizardStepTitle\]
+
Sometimes it's not enough to define a title with the `stepTitle` attribute in `` and ``.
One example for such a case is, if the title should be written in another font.
Another example would be if it's desired that the title should be chosen depending on the available width of your screen or window.
@@ -390,6 +421,7 @@ This for example allows customization of the step title depending on the state o
```
### \[awWizardStepSymbol\]
+
In addition to the step title, the navigation symbol/step symbol can also be set via a directive.
This is required, if the navigation step symbol is not a simple character or a symbol, but something more complex, like a html component.
In such a case, the the navigation symbol can be specified using the `[awWizardStepSymbol]` directive, inside a wizard step on a `ng-template` component.
@@ -418,58 +450,54 @@ This for example allows customization of the navigation symbol depending on the
```
### \[awOptionalStep\]
+
If you need to define an optional step, that doesn't need to be done to continue to the next steps, you can define an optional step
by adding the `awOptionalStep` directive to the step you want to declare as optional:
```html
-
- ...
-
+ ...
```
-Sometimes a wizard step should only be marked as optional if some condition has been fulfilled.
-In such a case you can pass the condition to the `awOptionalStep` input parameter of the `awOptionalStep` directive
+Sometimes a wizard step should only be marked as optional if some condition has been fulfilled.
+In such a case you can pass the condition to the `awOptionalStep` input parameter of the `awOptionalStep` directive
to tell the wizard whether the step should be marked as optional:
```html
-
- ...
-
+ ...
```
It is important to note that the condition input value can not be changed after initialization.
### \[awCompletedStep\]
+
In some cases it is required to specify a step as completed by default.
This means that the step should be shown as completed directly after initialization.
-A step can be marked as completed by default by adding the `awCompletedStep` directive to
+A step can be marked as completed by default by adding the `awCompletedStep` directive to
the step you want to declare as completed:
```html
-
- ...
-
+ ...
```
-Sometimes a wizard step should only be marked as completed if some condition has been fulfilled.
+Sometimes a wizard step should only be marked as completed if some condition has been fulfilled.
In such cases you can pass the condition to the `awCompletedStep` input parameter of the `awCompletedStep` directive
to tell the wizard, whether the step should be marked as complete:
```html
-
- ...
-
+ ...
```
It is important to note that the condition input value can not be changed after initialization.
### \[awSelectedStep\]
+
In some cases it may be a better choice to set the default wizard step not via a static number.
Another way to set the default wizard step is by using the `awSelectedStep` directive.
When attaching the `awSelectedStep` directive to an arbitrary wizard step, it will be marked as the default wizard step,
which is shown directly after the wizard startup.
### \[awGoToStep\]
+
`angular-archwizard` has three directives, which allow moving between steps.
These directives are the `awPreviousStep`, `asNextStep` and `awGoToStep` directives.
@@ -478,35 +506,44 @@ when the element with the `awGoToStep` directive has been clicked.
This input accepts different arguments:
-- a destination **step index**:
- One possible argument for the input is a destination step index.
- A destination step index is always zero-based, i.e. the index of the first step inside the wizard is always zero.
-
- To pass a destination step index to an `awGoToStep` directive,
- you need to pass the following json object to the directive:
-
- ```html
-
- ```
-
-- a destination **step id**:
- Another possible argument for the input is a the unique step id of the destination step.
- This step id can be set for all wizard steps through their input `[stepId]`.
-
- To pass a unique destination step id to an `awGoToStep` directive,
- you need to pass the following json object to the directive:
-
- ```html
-
- ```
-
-- a **step offset** between the current step and the destination step:
- Alternatively to an absolute step index or an unique step id,
- it's also possible to set the destination wizard step as an offset to the source step:
-
- ```html
-
- ```
+- a destination **step index**:
+ One possible argument for the input is a destination step index.
+ A destination step index is always zero-based, i.e. the index of the first step inside the wizard is always zero.
+
+ To pass a destination step index to an `awGoToStep` directive,
+ you need to pass the following json object to the directive:
+
+ ```html
+
+ ```
+
+- a destination **step id**:
+ Another possible argument for the input is a the unique step id of the destination step.
+ This step id can be set for all wizard steps through their input `[stepId]`.
+
+ To pass a unique destination step id to an `awGoToStep` directive,
+ you need to pass the following json object to the directive:
+
+ ```html
+
+ ```
+
+- a **step offset** between the current step and the destination step:
+ Alternatively to an absolute step index or an unique step id,
+ it's also possible to set the destination wizard step as an offset to the source step:
+
+ ```html
+
+ ```
In all above examples a click on the "Go to the third Step" button will move
the user to the next step (the third step) compared to the step the button belongs to (the second step).
@@ -520,29 +557,34 @@ This can be useful if your step transitions depend on some application dependent
Here again it's important to use `[]` around the `awGoToStep` directive to tell angular that the argument is to be interpreted as javascript.
#### \(preFinalize\)
+
Sometimes it's required to bind an event emitter to a specific element, which can perform a step transition.
Such an event emitter can be bound to the `(preFinalize)` output of the element, which contains the `awGoToStep` directive.
This event emitter is then called, directly before the wizard transitions to the given step.
#### \(postFinalize\)
+
Alternatively you can also bind an event emitter to `(postFinalize)`,
which is executed directly after the wizard transitions to the given step.
#### \(finalize\)
+
In case you don't really care when the finalization event emitter is called, you can also bind it simply to `(finalize)`.
`finalize` is a synonym for `preFinalize`.
#### Parameter overview
+
Possible parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------- | ----------------------------------------------------------------- | ------------- |
-| `[goToStep]` | `WizardStep` \| `StepOffset` \| `StepIndex` \| `StepId` | `null` |
-| `(preFinalize)` | `function(): void` | `null` |
-| `(postFinalize)` | `function(): void` | `null` |
-| `(finalize)` | `function(): void` | `null` |
+| Parameter name | Possible Values | Default Value |
+| ---------------- | ------------------------------------------------------- | ------------- |
+| `[goToStep]` | `WizardStep` \| `StepOffset` \| `StepIndex` \| `StepId` | `null` |
+| `(preFinalize)` | `function(): void` | `null` |
+| `(postFinalize)` | `function(): void` | `null` |
+| `(finalize)` | `function(): void` | `null` |
### \[awNextStep\]
+
By adding a `awNextStep` directive to a button or a link inside a step, you automatically add a `onClick` listener to the button or link, that leads to the next step.
This listener will automatically change the currently selected wizard step to the next wizard step after a click on the component.
@@ -551,21 +593,24 @@ This listener will automatically change the currently selected wizard step to th
```
#### \(finalize\)
+
Like the `awGoToStep` directive the `awNextStep` directive provides a `preFinalize`, `postFinalize` and `finalize` output, which are called every time
the current step is successfully exited, by clicking on the element containing the `nextStep` directive.
In the given code snipped above, a click on the button with the text `Next Step` leads to a call of the `finalize` function every time the button has been pressed.
#### Parameter overview
+
Possible parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------- | ----------------------------------------------------------------- | ------------- |
-| `(preFinalize)` | `function(): void` | `null` |
-| `(postFinalize)` | `function(): void` | `null` |
-| `(finalize)` | `function(): void` | `null` |
+| Parameter name | Possible Values | Default Value |
+| ---------------- | ------------------ | ------------- |
+| `(preFinalize)` | `function(): void` | `null` |
+| `(postFinalize)` | `function(): void` | `null` |
+| `(finalize)` | `function(): void` | `null` |
### \[awPreviousStep\]
+
By adding a `awPreviousStep` directive to a button or a link, you automatically add a `onClick` listener to the button or link, that changes your wizard to the previous step.
This listener will automatically change the currently selected wizard step to the previous wizard step after a click on the component.
@@ -574,50 +619,49 @@ This listener will automatically change the currently selected wizard step to th
```
#### \(finalize\)
+
Like both the `awGoToStep` and `awNextStep` directives the `awPreviousStep` directives provides a `preFinalize`, `postFinalize` and `finalize` output, which are called every time
the current step is successfully exited, by clicking on the element containing the `awPreviousStep` directive.
#### Parameter overview
+
Possible parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------- | ----------------------------------------------------------------- | ------------- |
-| `(preFinalize)` | `function(): void` | `null` |
-| `(postFinalize)` | `function(): void` | `null` |
-| `(finalize)` | `function(): void` | `null` |
+| Parameter name | Possible Values | Default Value |
+| ---------------- | ------------------ | ------------- |
+| `(preFinalize)` | `function(): void` | `null` |
+| `(postFinalize)` | `function(): void` | `null` |
+| `(finalize)` | `function(): void` | `null` |
### \[awWizardStep\]
+
In some cases it may be a good idea to move a wizard step to a custom component.
This can be done by defining adding the `awWizardStep` directive to the component that contains the wizard step.
```html
-
- Step 1
-
-
- ...
-
-
- Step 3
-
+ Step 1
+ ...
+ Step 3
```
#### Parameter overview
+
Possible `awWizardStep` parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------- |
-| `[stepId]` | `string` | `null` |
-| `[stepTitle]` | `string` | `null` |
-| `[navigationSymbol]` | `{symbol: string, fontFamily?: string}` | `{symbol: ''}` |
-| `[canEnter]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
-| `[canExit]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
-| `(stepEnter)` | `function(MovingDirection): void` | `null` |
-| `(stepExit)` | `function(MovingDirection): void` | `null` |
+| Parameter name | Possible Values | Default Value |
+| -------------------- | -------------------------------------------------------------------------------------------------- | -------------- |
+| `[stepId]` | `string` | `null` |
+| `[stepTitle]` | `string` | `null` |
+| `[navigationSymbol]` | `{symbol: string, fontFamily?: string}` | `{symbol: ''}` |
+| `[canEnter]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
+| `[canExit]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
+| `(stepEnter)` | `function(MovingDirection): void` | `null` |
+| `(stepExit)` | `function(MovingDirection): void` | `null` |
### \[awWizardCompletionStep\]
+
In addition to the possibility of defining a normal wizard step in a custom component,
it is also possible to define a wizard completion step in a custom component.
To define a wizard completion step in a custom component you need to add the `[awWizardCompletionStep]` directive to the custom component
@@ -625,9 +669,7 @@ that contains the wizard completion step.
```html
-
- Step 1
-
+ Step 1
...
@@ -635,17 +677,19 @@ that contains the wizard completion step.
```
#### Parameter overview
+
Possible `awWizardCompletionStep` parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------- |
-| `[stepId]` | `string` | `null` |
-| `[stepTitle]` | `string` | `null` |
-| `[navigationSymbol]` | `{symbol: string, fontFamily?: string}` | `{symbol: ''}` |
-| `[canEnter]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
-| `(stepEnter)` | `function(MovingDirection): void` | `null` |
+| Parameter name | Possible Values | Default Value |
+| -------------------- | -------------------------------------------------------------------------------------------------- | -------------- |
+| `[stepId]` | `string` | `null` |
+| `[stepTitle]` | `string` | `null` |
+| `[navigationSymbol]` | `{symbol: string, fontFamily?: string}` | `{symbol: ''}` |
+| `[canEnter]` | `function(MovingDirection): boolean` \| `function(MovingDirection): Promise` \| `boolean` | `true` |
+| `(stepEnter)` | `function(MovingDirection): void` | `null` |
### \[awResetWizard\]
+
Sometimes it's also required to reset the wizard to its initial state.
In such a case you can use the `awResetWizard` directive.
This directive can be added to a button or a link for example.
@@ -655,13 +699,15 @@ In addition it's possible to define an `EventEmitter`, that is called when the w
This `EventEmitter` can be bound to the `(finalize)` input of the `awResetWizard` directive.
#### Parameter overview
+
Possible `awResetWizard` parameters:
-| Parameter name | Possible Values | Default Value |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------- |
-| `(finalize)` | `function(): void` | `null` |
+| Parameter name | Possible Values | Default Value |
+| -------------- | ------------------ | ------------- |
+| `(finalize)` | `function(): void` | `null` |
### Accessing the wizard component instance
+
Sometimes it's required to access the wizard component directly.
In such a case you can get the instance of the used wizard component in your own component via:
@@ -673,7 +719,7 @@ public wizard: WizardComponent;
### Navigating the wizard programmatically
In addition to letting the user navigate the wizard with `awNextStep`, `awPreviousStep` and `awGoToStep` directives,
-you can trigger navigation programmatically. Use navigation methods exposed by the `WizardComponent` class:
+you can trigger navigation programmatically. Use navigation methods exposed by the `WizardComponent` class:
```typescript
wizard.goToNextStep();
@@ -682,24 +728,22 @@ wizard.goToStep(desinationIndex);
```
### Customizing the wizard stylesheets
+
Sometimes you like to use your own custom CSS for some parts of the wizard like its navigation bar.
This is quite easy to do.
Different ways are possible:
1. Either use a wrapper around the wizard:
+
```html
-
- ...
-
+ ...
```
2. Or add your css wrapper class directly to the wizard element:
```html
-
- ...
-
+ ...
```
When overriding css properties already defined in the existing navigation bar layouts, it is required to use `!important`.
@@ -707,6 +751,7 @@ In addition it is required to add `encapsulation: ViewEncapsulation.None` to the
For additional information about how to write your own navigation bar please take a look at the existing navigation bar layouts, which can be found in the [archwizard.scss](styles/archwizard.scss) file.
### Working with dynamically inserted and removed steps
+
In some cases it may be required to remove or insert one or multiple steps after the wizard initialization.
For example after a user does some interaction with the wizard, it may be required to add or remove a later step.
In such situations the wizard supports the removal and insertion of steps in the DOM.
@@ -729,33 +774,34 @@ In the following example, we configure a simple color theme which only defines s
// styles.scss
$aw-colors: (
- '_': (
- 'default': (
- 'border-color-default': #76b900,
- 'background-color-default': null,
- 'symbol-color-default': #68aa20,
- 'border-color-hover': #569700,
- 'background-color-hover': null,
- 'symbol-color-hover': #569700,
+ "_": (
+ "default": (
+ "border-color-default": #76b900,
+ "background-color-default": null,
+ "symbol-color-default": #68aa20,
+ "border-color-hover": #569700,
+ "background-color-hover": null,
+ "symbol-color-hover": #569700,
),
- 'current': (
- 'border-color-default': #bbdc80,
- 'background-color-default': #bbdc80,
- 'symbol-color-default': #808080,
- 'border-color-hover': #76b900,
- 'background-color-hover': #76b900,
- 'symbol-color-hover': #808080,
- )
- )
+ "current": (
+ "border-color-default": #bbdc80,
+ "background-color-default": #bbdc80,
+ "symbol-color-default": #808080,
+ "border-color-hover": #76b900,
+ "background-color-hover": #76b900,
+ "symbol-color-hover": #808080,
+ ),
+ ),
);
-@import '../node_modules/angular-archwizard/styles/archwizard.scss';
+@import "../node_modules/angular-archwizard/styles/archwizard.scss";
```
Please don't hesitate to look inside `node_modules/angular-archwizard/styles/variables.scss` for documentation
on the `$aw-colors` variable and other variables you can tweak to tune the wizard to your needs.
## Example
+
You can find an basic example project using `angular-archwizard` [here](https://madoar.github.io/angular-archwizard-demo).
The sources for the example can be found in the [angular-archwizard-demo](https://github.com/madoar/angular-archwizard-demo) repository.
It illustrates how the wizard looks like and how the different settings can change its layout and behavior.
diff --git a/angular.json b/angular.json
index a3939a92..e1831a61 100644
--- a/angular.json
+++ b/angular.json
@@ -41,4 +41,4 @@
}
},
"defaultProject": "angular-archwizard"
-}
+}
\ No newline at end of file
diff --git a/karma-shim.js b/karma-shim.js
index 4441783c..b64c0224 100644
--- a/karma-shim.js
+++ b/karma-shim.js
@@ -1,25 +1,25 @@
-import 'zone.js/dist/zone';
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
+import "zone.js/dist/zone";
+import "zone.js/dist/long-stack-trace-zone";
+import "zone.js/dist/proxy.js";
+import "zone.js/dist/sync-test";
+import "zone.js/dist/jasmine-patch";
+import "zone.js/dist/async-test";
+import "zone.js/dist/fake-async-test";
-import { getTestBed } from '@angular/core/testing';
+import { getTestBed } from "@angular/core/testing";
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+} from "@angular/platform-browser-dynamic/testing";
-import 'rxjs';
+import "rxjs";
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
-const testContext = require.context('./src', true, /\.spec\.ts/);
+const testContext = require.context("./src", true, /\.spec\.ts/);
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
diff --git a/karma.conf.js b/karma.conf.js
index be7cd4ea..2ba482c9 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -3,37 +3,37 @@
module.exports = function (config) {
config.set({
- basePath: '',
- frameworks: ['jasmine', '@angular-devkit/build-angular', 'detectBrowsers'],
+ basePath: "",
+ frameworks: ["jasmine", "@angular-devkit/build-angular", "detectBrowsers"],
plugins: [
- 'karma-jasmine',
- 'karma-chrome-launcher',
- 'karma-firefox-launcher',
- 'karma-safari-launcher',
- 'karma-detect-browsers',
- 'karma-jasmine-html-reporter',
- 'karma-coverage-istanbul-reporter',
- '@angular-devkit/build-angular/plugins/karma'
+ "karma-jasmine",
+ "karma-chrome-launcher",
+ "karma-firefox-launcher",
+ "karma-safari-launcher",
+ "karma-detect-browsers",
+ "karma-jasmine-html-reporter",
+ "karma-coverage-istanbul-reporter",
+ "@angular-devkit/build-angular/plugins/karma"
],
coverageIstanbulReporter: {
- reports: ['html', 'lcovonly'],
+ reports: ["html", "lcovonly"],
fixWebpackSourcePaths: true,
thresholds: {
statements: 80,
lines: 80,
branches: 80,
functions: 80
- }
+ },
},
customLaunchers: {
ChromeHeadlessNoSandbox: {
- base: 'ChromeHeadless',
- flags: ['--no-sandbox']
+ base: "ChromeHeadless",
+ flags: ["--no-sandbox"]
},
ChromiumHeadlessNoSandbox: {
- base: 'ChromiumHeadless',
- flags: ['--no-sandbox']
- }
+ base: "ChromiumHeadless",
+ flags: ["--no-sandbox"]
+ },
},
detectBrowsers: {
// enable/disable, default is true
@@ -46,16 +46,16 @@ module.exports = function (config) {
preferHeadless: true,
postDetection: function (availableBrowsers) {
- if (availableBrowsers.includes('ChromeHeadless')) {
- const index = availableBrowsers.indexOf('ChromeHeadless');
+ if (availableBrowsers.includes("ChromeHeadless")) {
+ const index = availableBrowsers.indexOf("ChromeHeadless");
- availableBrowsers[index] = 'ChromeHeadlessNoSandbox';
+ availableBrowsers[index] = "ChromeHeadlessNoSandbox";
}
- if (availableBrowsers.includes('ChromiumHeadless')) {
- const index = availableBrowsers.indexOf('ChromiumHeadless');
+ if (availableBrowsers.includes("ChromiumHeadless")) {
+ const index = availableBrowsers.indexOf("ChromiumHeadless");
- availableBrowsers[index] = 'ChromiumHeadlessNoSandbox';
+ availableBrowsers[index] = "ChromiumHeadlessNoSandbox";
}
return availableBrowsers;
diff --git a/ng-package.json b/ng-package.json
index 49ab29ac..1b7ccf39 100644
--- a/ng-package.json
+++ b/ng-package.json
@@ -7,4 +7,4 @@
"lib": {
"entryFile": "src/index.ts"
}
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0b1079cb..13112f17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15762,4 +15762,4 @@
"dev": true
}
}
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 08cf2ce5..36bcb2dd 100644
--- a/package.json
+++ b/package.json
@@ -76,4 +76,4 @@
"dependencies": {
"tslib": "^2.0.0"
}
-}
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index b661d232..69ede7ff 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,37 +1,37 @@
// export the components
-export {WizardCompletionStepComponent} from './lib/components/wizard-completion-step.component';
-export {WizardNavigationBarComponent} from './lib/components/wizard-navigation-bar.component';
-export {WizardStepComponent} from './lib/components/wizard-step.component';
-export {WizardComponent} from './lib/components/wizard.component';
+export { WizardCompletionStepComponent } from './lib/components/wizard-completion-step.component';
+export { WizardNavigationBarComponent } from './lib/components/wizard-navigation-bar.component';
+export { WizardStepComponent } from './lib/components/wizard-step.component';
+export { WizardComponent } from './lib/components/wizard.component';
// export the directives
-export {EnableBackLinksDirective} from './lib/directives/enable-back-links.directive';
-export {GoToStepDirective} from './lib/directives/go-to-step.directive';
-export {NextStepDirective} from './lib/directives/next-step.directive';
-export {OptionalStepDirective} from './lib/directives/optional-step.directive';
-export {PreviousStepDirective} from './lib/directives/previous-step.directive';
-export {ResetWizardDirective} from './lib/directives/reset-wizard.directive';
-export {SelectedStepDirective} from './lib/directives/selected-step.directive';
-export {WizardCompletionStepDirective} from './lib/directives/wizard-completion-step.directive';
-export {WizardStepDirective} from './lib/directives/wizard-step.directive';
-export {WizardStepTitleDirective} from './lib/directives/wizard-step-title.directive';
-export {NavigationModeDirective} from './lib/directives/navigation-mode.directive';
-export {CompletedStepDirective} from './lib/directives/completed-step.directive';
-export {WizardStepSymbolDirective} from './lib/directives/wizard-step-symbol.directive';
+export { EnableBackLinksDirective } from './lib/directives/enable-back-links.directive';
+export { GoToStepDirective } from './lib/directives/go-to-step.directive';
+export { NextStepDirective } from './lib/directives/next-step.directive';
+export { OptionalStepDirective } from './lib/directives/optional-step.directive';
+export { PreviousStepDirective } from './lib/directives/previous-step.directive';
+export { ResetWizardDirective } from './lib/directives/reset-wizard.directive';
+export { SelectedStepDirective } from './lib/directives/selected-step.directive';
+export { WizardCompletionStepDirective } from './lib/directives/wizard-completion-step.directive';
+export { WizardStepDirective } from './lib/directives/wizard-step.directive';
+export { WizardStepTitleDirective } from './lib/directives/wizard-step-title.directive';
+export { NavigationModeDirective } from './lib/directives/navigation-mode.directive';
+export { CompletedStepDirective } from './lib/directives/completed-step.directive';
+export { WizardStepSymbolDirective } from './lib/directives/wizard-step-symbol.directive';
// export the navigation classes
-export {NavigationMode} from './lib/navigation/navigation-mode.interface';
-export {ConfigurableNavigationMode} from './lib/navigation/configurable-navigation-mode';
-export {BaseNavigationMode} from './lib/navigation/base-navigation-mode.interface';
+export { NavigationMode } from './lib/navigation/navigation-mode.interface';
+export { ConfigurableNavigationMode } from './lib/navigation/configurable-navigation-mode';
+export { BaseNavigationMode } from './lib/navigation/base-navigation-mode.interface';
// export the utility functions
-export {MovingDirection} from './lib/util/moving-direction.enum';
-export {NavigationSymbol} from './lib/util/navigation-symbol.interface';
-export {StepId, isStepId} from './lib/util/step-id.interface';
-export {StepIndex, isStepIndex} from './lib/util/step-index.interface';
-export {StepOffset, isStepOffset} from './lib/util/step-offset.interface';
-export {WizardCompletionStep} from './lib/util/wizard-completion-step.interface';
-export {WizardStep} from './lib/util/wizard-step.interface';
+export { MovingDirection } from './lib/util/moving-direction.enum';
+export { NavigationSymbol } from './lib/util/navigation-symbol.interface';
+export { StepId, isStepId } from './lib/util/step-id.interface';
+export { StepIndex, isStepIndex } from './lib/util/step-index.interface';
+export { StepOffset, isStepOffset } from './lib/util/step-offset.interface';
+export { WizardCompletionStep } from './lib/util/wizard-completion-step.interface';
+export { WizardStep } from './lib/util/wizard-step.interface';
// export the module
-export {ArchwizardModule} from './lib/archwizard.module';
+export { ArchwizardModule } from './lib/archwizard.module';
diff --git a/src/lib/archwizard.module.ts b/src/lib/archwizard.module.ts
index 291e5941..fc8dfd89 100644
--- a/src/lib/archwizard.module.ts
+++ b/src/lib/archwizard.module.ts
@@ -1,22 +1,22 @@
-import {CommonModule} from '@angular/common';
-import {ModuleWithProviders, NgModule} from '@angular/core';
-import {WizardCompletionStepComponent} from './components/wizard-completion-step.component';
-import {WizardNavigationBarComponent} from './components/wizard-navigation-bar.component';
-import {WizardStepComponent} from './components/wizard-step.component';
-import {WizardComponent} from './components/wizard.component';
-import {EnableBackLinksDirective} from './directives/enable-back-links.directive';
-import {GoToStepDirective} from './directives/go-to-step.directive';
-import {NextStepDirective} from './directives/next-step.directive';
-import {OptionalStepDirective} from './directives/optional-step.directive';
-import {PreviousStepDirective} from './directives/previous-step.directive';
-import {ResetWizardDirective} from './directives/reset-wizard.directive';
-import {SelectedStepDirective} from './directives/selected-step.directive';
-import {WizardCompletionStepDirective} from './directives/wizard-completion-step.directive';
-import {WizardStepSymbolDirective} from './directives/wizard-step-symbol.directive';
-import {WizardStepTitleDirective} from './directives/wizard-step-title.directive';
-import {WizardStepDirective} from './directives/wizard-step.directive';
-import {NavigationModeDirective} from './directives/navigation-mode.directive';
-import {CompletedStepDirective} from './directives/completed-step.directive';
+import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { WizardCompletionStepComponent } from './components/wizard-completion-step.component';
+import { WizardNavigationBarComponent } from './components/wizard-navigation-bar.component';
+import { WizardStepComponent } from './components/wizard-step.component';
+import { WizardComponent } from './components/wizard.component';
+import { EnableBackLinksDirective } from './directives/enable-back-links.directive';
+import { GoToStepDirective } from './directives/go-to-step.directive';
+import { NextStepDirective } from './directives/next-step.directive';
+import { OptionalStepDirective } from './directives/optional-step.directive';
+import { PreviousStepDirective } from './directives/previous-step.directive';
+import { ResetWizardDirective } from './directives/reset-wizard.directive';
+import { SelectedStepDirective } from './directives/selected-step.directive';
+import { WizardCompletionStepDirective } from './directives/wizard-completion-step.directive';
+import { WizardStepSymbolDirective } from './directives/wizard-step-symbol.directive';
+import { WizardStepTitleDirective } from './directives/wizard-step-title.directive';
+import { WizardStepDirective } from './directives/wizard-step.directive';
+import { NavigationModeDirective } from './directives/navigation-mode.directive';
+import { CompletedStepDirective } from './directives/completed-step.directive';
/**
diff --git a/src/lib/components/wizard-completion-step.component.html b/src/lib/components/wizard-completion-step.component.html
index 6dbc7430..95a0b70b 100644
--- a/src/lib/components/wizard-completion-step.component.html
+++ b/src/lib/components/wizard-completion-step.component.html
@@ -1 +1 @@
-
+
\ No newline at end of file
diff --git a/src/lib/components/wizard-completion-step.component.ts b/src/lib/components/wizard-completion-step.component.ts
index ca5bb57b..22f81239 100644
--- a/src/lib/components/wizard-completion-step.component.ts
+++ b/src/lib/components/wizard-completion-step.component.ts
@@ -1,6 +1,6 @@
-import {Component, forwardRef} from '@angular/core';
-import {WizardCompletionStep} from '../util/wizard-completion-step.interface';
-import {WizardStep} from '../util/wizard-step.interface';
+import { Component, forwardRef } from '@angular/core';
+import { WizardCompletionStep } from '../util/wizard-completion-step.interface';
+import { WizardStep } from '../util/wizard-step.interface';
/**
* The `aw-wizard-completion-step` component can be used to define a completion/success step at the end of your wizard
@@ -42,8 +42,8 @@ import {WizardStep} from '../util/wizard-step.interface';
selector: 'aw-wizard-completion-step',
templateUrl: 'wizard-completion-step.component.html',
providers: [
- {provide: WizardStep, useExisting: forwardRef(() => WizardCompletionStepComponent)},
- {provide: WizardCompletionStep, useExisting: forwardRef(() => WizardCompletionStepComponent)}
+ { provide: WizardStep, useExisting: forwardRef(() => WizardCompletionStepComponent) },
+ { provide: WizardCompletionStep, useExisting: forwardRef(() => WizardCompletionStepComponent) }
]
})
export class WizardCompletionStepComponent extends WizardCompletionStep {
diff --git a/src/lib/components/wizard-navigation-bar.component.html b/src/lib/components/wizard-navigation-bar.component.html
index c62df6ab..e742ae1b 100644
--- a/src/lib/components/wizard-navigation-bar.component.html
+++ b/src/lib/components/wizard-navigation-bar.component.html
@@ -21,4 +21,4 @@
-
+
\ No newline at end of file
diff --git a/src/lib/components/wizard-step.component.html b/src/lib/components/wizard-step.component.html
index 6dbc7430..95a0b70b 100644
--- a/src/lib/components/wizard-step.component.html
+++ b/src/lib/components/wizard-step.component.html
@@ -1 +1 @@
-
+
\ No newline at end of file
diff --git a/src/lib/components/wizard-step.component.ts b/src/lib/components/wizard-step.component.ts
index 41ad430c..8414556e 100644
--- a/src/lib/components/wizard-step.component.ts
+++ b/src/lib/components/wizard-step.component.ts
@@ -1,5 +1,5 @@
-import {Component, forwardRef} from '@angular/core';
-import {WizardStep} from '../util/wizard-step.interface';
+import { Component, forwardRef } from '@angular/core';
+import { WizardStep } from '../util/wizard-step.interface';
/**
* The `aw-wizard-step` component is used to define a normal step inside a wizard.
@@ -59,7 +59,7 @@ import {WizardStep} from '../util/wizard-step.interface';
selector: 'aw-wizard-step',
templateUrl: 'wizard-step.component.html',
providers: [
- {provide: WizardStep, useExisting: forwardRef(() => WizardStepComponent)}
+ { provide: WizardStep, useExisting: forwardRef(() => WizardStepComponent) }
]
})
export class WizardStepComponent extends WizardStep {
diff --git a/src/lib/components/wizard.component.html b/src/lib/components/wizard.component.html
index fe98481c..78999ad6 100644
--- a/src/lib/components/wizard.component.html
+++ b/src/lib/components/wizard.component.html
@@ -1,6 +1,4 @@
-
-
+
\ No newline at end of file
diff --git a/src/lib/components/wizard.component.ts b/src/lib/components/wizard.component.ts
index 88bd75ed..50e75ab4 100644
--- a/src/lib/components/wizard.component.ts
+++ b/src/lib/components/wizard.component.ts
@@ -7,10 +7,10 @@ import {
QueryList,
EventEmitter,
} from '@angular/core';
-import {NavigationMode} from '../navigation/navigation-mode.interface';
-import {WizardStep} from '../util/wizard-step.interface';
-import {MovingDirection} from '../util/moving-direction.enum';
-import {ConfigurableNavigationMode} from '../navigation/configurable-navigation-mode';
+import { NavigationMode } from '../navigation/navigation-mode.interface';
+import { WizardStep } from '../util/wizard-step.interface';
+import { MovingDirection } from '../util/moving-direction.enum';
+import { ConfigurableNavigationMode } from '../navigation/configurable-navigation-mode';
/**
* The `aw-wizard` component defines the root component of a wizard.
diff --git a/src/lib/directives/completed-step.directive.ts b/src/lib/directives/completed-step.directive.ts
index 73d7653d..626136d8 100644
--- a/src/lib/directives/completed-step.directive.ts
+++ b/src/lib/directives/completed-step.directive.ts
@@ -1,59 +1,59 @@
-import {Directive, Host, Input, OnInit} from '@angular/core';
-import {WizardStep} from '../util/wizard-step.interface';
-
-/**
- * The `awCompletedStep` directive can be used to make a wizard step initially completed.
- *
- * Initially completed steps are shown as completed when the wizard is presented to the user.
- *
- * A typical use case is to make a step initially completed if it is automatically filled with some derived/predefined information.
- *
- * ### Syntax
- *
- * ```html
- *
- * ...
- *
- * ```
- *
- * An optional boolean condition can be specified:
- *
- * ```html
- *
- * ...
- *
- * ```
- *
- * ### Example
- *
- * ```html
- *
- * ...
- *
- * ```
- */
-@Directive({
- selector: '[awCompletedStep]'
-})
-export class CompletedStepDirective implements OnInit {
-
- // tslint:disable-next-line:no-input-rename
- @Input('awCompletedStep')
- public initiallyCompleted = true;
-
- /**
- * Constructor
- *
- * @param wizardStep The wizard step, which contains this [[CompletedStepDirective]]
- */
- constructor(@Host() private wizardStep: WizardStep) {
- }
-
- /**
- * Initialization work
- */
- public ngOnInit(): void {
- // The input receives '' when specified in the template without a value. In this case, apply the default value (`true`).
- this.wizardStep.initiallyCompleted = this.initiallyCompleted || this.initiallyCompleted as any === '';
- }
-}
+import { Directive, Host, Input, OnInit } from '@angular/core';
+import { WizardStep } from '../util/wizard-step.interface';
+
+/**
+ * The `awCompletedStep` directive can be used to make a wizard step initially completed.
+ *
+ * Initially completed steps are shown as completed when the wizard is presented to the user.
+ *
+ * A typical use case is to make a step initially completed if it is automatically filled with some derived/predefined information.
+ *
+ * ### Syntax
+ *
+ * ```html
+ *
+ * ...
+ *
+ * ```
+ *
+ * An optional boolean condition can be specified:
+ *
+ * ```html
+ *
+ * ...
+ *
+ * ```
+ *
+ * ### Example
+ *
+ * ```html
+ *
+ * ...
+ *
+ * ```
+ */
+@Directive({
+ selector: '[awCompletedStep]'
+})
+export class CompletedStepDirective implements OnInit {
+
+ // tslint:disable-next-line:no-input-rename
+ @Input('awCompletedStep')
+ public initiallyCompleted = true;
+
+ /**
+ * Constructor
+ *
+ * @param wizardStep The wizard step, which contains this [[CompletedStepDirective]]
+ */
+ constructor(@Host() private wizardStep: WizardStep) {
+ }
+
+ /**
+ * Initialization work
+ */
+ public ngOnInit(): void {
+ // The input receives '' when specified in the template without a value. In this case, apply the default value (`true`).
+ this.wizardStep.initiallyCompleted = this.initiallyCompleted || this.initiallyCompleted as any === '';
+ }
+}
diff --git a/src/lib/directives/navigation-mode.directive.ts b/src/lib/directives/navigation-mode.directive.ts
index 4a029e2c..8f79f2a3 100644
--- a/src/lib/directives/navigation-mode.directive.ts
+++ b/src/lib/directives/navigation-mode.directive.ts
@@ -1,8 +1,8 @@
-import {Directive, Input, OnChanges, SimpleChanges} from '@angular/core';
+import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
-import {NavigationMode} from '../navigation/navigation-mode.interface';
-import {ConfigurableNavigationMode} from '../navigation/configurable-navigation-mode';
-import {WizardComponent} from '../components/wizard.component';
+import { NavigationMode } from '../navigation/navigation-mode.interface';
+import { ConfigurableNavigationMode } from '../navigation/configurable-navigation-mode';
+import { WizardComponent } from '../components/wizard.component';
/**
@@ -61,7 +61,7 @@ export class NavigationModeDirective implements OnChanges {
* Custom navigation mode instance (optional).
*/
@Input()
- public awNavigationMode: NavigationMode|null;
+ public awNavigationMode: NavigationMode | null;
/**
* A parameter for the default navigation mode. Controls whether wizard steps before the current step are navigable:
@@ -70,7 +70,7 @@ export class NavigationModeDirective implements OnChanges {
* - `navigateBackward="allow"` -- the steps are navigable
*/
@Input()
- public navigateBackward: 'allow'|'deny'|null;
+ public navigateBackward: 'allow' | 'deny' | null;
/**
* A parameter for the default navigation mode. Controls whether wizard steps after the current step are navigable:
@@ -80,7 +80,7 @@ export class NavigationModeDirective implements OnChanges {
* - `navigateForward="visited"` -- a step is navigable iff it was already visited before
*/
@Input()
- public navigateForward: 'allow'|'deny'|'visited'|null;
+ public navigateForward: 'allow' | 'deny' | 'visited' | null;
constructor(private wizard: WizardComponent) { }
diff --git a/src/lib/directives/next-step.directive.ts b/src/lib/directives/next-step.directive.ts
index aaa87e87..507a2ff1 100644
--- a/src/lib/directives/next-step.directive.ts
+++ b/src/lib/directives/next-step.directive.ts
@@ -1,5 +1,5 @@
-import {Directive, EventEmitter, HostListener, Output} from '@angular/core';
-import {WizardComponent} from '../components/wizard.component';
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+import { WizardComponent } from '../components/wizard.component';
/**
* The `awNextStep` directive can be used to navigate to the next step.
diff --git a/src/lib/directives/optional-step.directive.ts b/src/lib/directives/optional-step.directive.ts
index e883242e..6fdf9635 100644
--- a/src/lib/directives/optional-step.directive.ts
+++ b/src/lib/directives/optional-step.directive.ts
@@ -1,5 +1,5 @@
-import {Directive, Host, Input, OnInit} from '@angular/core';
-import {WizardStep} from '../util/wizard-step.interface';
+import { Directive, Host, Input, OnInit } from '@angular/core';
+import { WizardStep } from '../util/wizard-step.interface';
/**
* The `awOptionalStep` directive can be used to define an optional `wizard-step`.
diff --git a/src/lib/directives/previous-step.directive.ts b/src/lib/directives/previous-step.directive.ts
index 2b33ddc8..33f9829e 100644
--- a/src/lib/directives/previous-step.directive.ts
+++ b/src/lib/directives/previous-step.directive.ts
@@ -1,5 +1,5 @@
-import {Directive, EventEmitter, HostListener, Output} from '@angular/core';
-import {WizardComponent} from '../components/wizard.component';
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+import { WizardComponent } from '../components/wizard.component';
/**
* The `awPreviousStep` directive can be used to navigate to the previous step.
diff --git a/src/lib/directives/reset-wizard.directive.ts b/src/lib/directives/reset-wizard.directive.ts
index 3ad65617..232f34e7 100644
--- a/src/lib/directives/reset-wizard.directive.ts
+++ b/src/lib/directives/reset-wizard.directive.ts
@@ -1,5 +1,5 @@
-import {Directive, EventEmitter, HostListener, Output} from '@angular/core';
-import {WizardComponent} from '../components/wizard.component';
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+import { WizardComponent } from '../components/wizard.component';
/**
* The `awResetWizard` directive can be used to reset the wizard to its initial state.
diff --git a/src/lib/directives/selected-step.directive.ts b/src/lib/directives/selected-step.directive.ts
index b5182d42..db8a9b57 100644
--- a/src/lib/directives/selected-step.directive.ts
+++ b/src/lib/directives/selected-step.directive.ts
@@ -1,5 +1,5 @@
-import {Directive, Host, OnInit} from '@angular/core';
-import {WizardStep} from '../util/wizard-step.interface';
+import { Directive, Host, OnInit } from '@angular/core';
+import { WizardStep } from '../util/wizard-step.interface';
/**
* The `awSelectedStep` directive can be used on a [[WizardStep]] to set it as selected after the wizard initialisation or a reset.
diff --git a/src/lib/directives/wizard-completion-step.directive.ts b/src/lib/directives/wizard-completion-step.directive.ts
index 9e975fcb..baea7ef4 100644
--- a/src/lib/directives/wizard-completion-step.directive.ts
+++ b/src/lib/directives/wizard-completion-step.directive.ts
@@ -1,6 +1,6 @@
-import {Directive, forwardRef} from '@angular/core';
-import {WizardCompletionStep} from '../util/wizard-completion-step.interface';
-import {WizardStep} from '../util/wizard-step.interface';
+import { Directive, forwardRef } from '@angular/core';
+import { WizardCompletionStep } from '../util/wizard-completion-step.interface';
+import { WizardStep } from '../util/wizard-step.interface';
/**
* The `awWizardCompletionStep` directive can be used to define a completion/success step at the end of your wizard
@@ -41,8 +41,8 @@ import {WizardStep} from '../util/wizard-step.interface';
@Directive({
selector: '[awWizardCompletionStep]',
providers: [
- {provide: WizardStep, useExisting: forwardRef(() => WizardCompletionStepDirective)},
- {provide: WizardCompletionStep, useExisting: forwardRef(() => WizardCompletionStepDirective)}
+ { provide: WizardStep, useExisting: forwardRef(() => WizardCompletionStepDirective) },
+ { provide: WizardCompletionStep, useExisting: forwardRef(() => WizardCompletionStepDirective) }
]
})
export class WizardCompletionStepDirective extends WizardCompletionStep {
diff --git a/src/lib/directives/wizard-step-symbol.directive.ts b/src/lib/directives/wizard-step-symbol.directive.ts
index de416e54..18a80640 100644
--- a/src/lib/directives/wizard-step-symbol.directive.ts
+++ b/src/lib/directives/wizard-step-symbol.directive.ts
@@ -1,4 +1,4 @@
-import {Directive, TemplateRef} from '@angular/core';
+import { Directive, TemplateRef } from '@angular/core';
/**
* The `awWizardStepSymbol` directive can be used as an alternative to the `navigationSymbol` input of a [[WizardStep]]
diff --git a/src/lib/directives/wizard-step-title.directive.ts b/src/lib/directives/wizard-step-title.directive.ts
index b531b27d..03dfdc41 100644
--- a/src/lib/directives/wizard-step-title.directive.ts
+++ b/src/lib/directives/wizard-step-title.directive.ts
@@ -1,4 +1,4 @@
-import {Directive, TemplateRef} from '@angular/core';
+import { Directive, TemplateRef } from '@angular/core';
/**
* The `awWizardStepTitle` directive can be used as an alternative to the `stepTitle` input of a [[WizardStep]]
diff --git a/src/lib/directives/wizard-step.directive.ts b/src/lib/directives/wizard-step.directive.ts
index 3872b4ad..fa6ad4f9 100644
--- a/src/lib/directives/wizard-step.directive.ts
+++ b/src/lib/directives/wizard-step.directive.ts
@@ -1,5 +1,5 @@
-import {Directive, forwardRef} from '@angular/core';
-import {WizardStep} from '../util/wizard-step.interface';
+import { Directive, forwardRef } from '@angular/core';
+import { WizardStep } from '../util/wizard-step.interface';
/**
* The `awWizardStep` directive can be used to define a normal step inside a wizard.
@@ -57,7 +57,7 @@ import {WizardStep} from '../util/wizard-step.interface';
@Directive({
selector: '[awWizardStep]',
providers: [
- {provide: WizardStep, useExisting: forwardRef(() => WizardStepDirective)}
+ { provide: WizardStep, useExisting: forwardRef(() => WizardStepDirective) }
]
})
export class WizardStepDirective extends WizardStep {
diff --git a/src/lib/navigation/base-navigation-mode.interface.ts b/src/lib/navigation/base-navigation-mode.interface.ts
index 70fd23e7..1df29366 100644
--- a/src/lib/navigation/base-navigation-mode.interface.ts
+++ b/src/lib/navigation/base-navigation-mode.interface.ts
@@ -1,7 +1,7 @@
-import {EventEmitter} from '@angular/core';
-import {MovingDirection} from '../util/moving-direction.enum';
-import {NavigationMode} from './navigation-mode.interface';
-import {WizardComponent} from '../components/wizard.component';
+import { EventEmitter } from '@angular/core';
+import { MovingDirection } from '../util/moving-direction.enum';
+import { NavigationMode } from './navigation-mode.interface';
+import { WizardComponent } from '../components/wizard.component';
/**
* Base implementation of [[NavigationMode]]
diff --git a/src/lib/navigation/configurable-navigation-mode.ts b/src/lib/navigation/configurable-navigation-mode.ts
index 8548669c..07eb348f 100644
--- a/src/lib/navigation/configurable-navigation-mode.ts
+++ b/src/lib/navigation/configurable-navigation-mode.ts
@@ -1,6 +1,6 @@
-import {BaseNavigationMode} from './base-navigation-mode.interface';
-import {WizardComponent} from '../components/wizard.component';
-import {WizardCompletionStep} from '../util/wizard-completion-step.interface';
+import { BaseNavigationMode } from './base-navigation-mode.interface';
+import { WizardComponent } from '../components/wizard.component';
+import { WizardCompletionStep } from '../util/wizard-completion-step.interface';
/**
* The default navigation mode used by [[WizardComponent]] and [[NavigationModeDirective]].
@@ -31,8 +31,8 @@ export class ConfigurableNavigationMode extends BaseNavigationMode {
* @param navigateForward Controls whether wizard steps before the current step are navigable
*/
constructor(
- private navigateBackward: 'allow'|'deny'|null = null,
- private navigateForward: 'allow'|'deny'|'visited'|null = null,
+ private navigateBackward: 'allow' | 'deny' | null = null,
+ private navigateForward: 'allow' | 'deny' | 'visited' | null = null,
) {
super();
this.navigateBackward = this.navigateBackward || 'allow';
@@ -52,8 +52,8 @@ export class ConfigurableNavigationMode extends BaseNavigationMode {
// navigation with [goToStep] is permitted if all previous steps
// to the destination step have been completed or are optional
return wizard.wizardSteps
- .filter((step, index) => index < destinationIndex && index !== wizard.currentStepIndex)
- .every(step => step.completed || step.optional);
+ .filter((step, index) => index < destinationIndex && index !== wizard.currentStepIndex)
+ .every(step => step.completed || step.optional);
}
/**
diff --git a/src/lib/navigation/navigation-mode.interface.ts b/src/lib/navigation/navigation-mode.interface.ts
index 7f88cf14..d0ba6dc2 100644
--- a/src/lib/navigation/navigation-mode.interface.ts
+++ b/src/lib/navigation/navigation-mode.interface.ts
@@ -1,5 +1,5 @@
-import {EventEmitter} from '@angular/core';
-import {WizardComponent} from '../components/wizard.component';
+import { EventEmitter } from '@angular/core';
+import { WizardComponent } from '../components/wizard.component';
/**
* An interface containing the basic functionality, which must be provided by a navigation mode.
diff --git a/src/lib/util/step-id.interface.ts b/src/lib/util/step-id.interface.ts
index 865c60b7..b0ff5aa3 100644
--- a/src/lib/util/step-id.interface.ts
+++ b/src/lib/util/step-id.interface.ts
@@ -1,4 +1,4 @@
-import {WizardStep} from './wizard-step.interface';
+import { WizardStep } from './wizard-step.interface';
/**
* An unique identifier of a wizard step
diff --git a/src/lib/util/test-utils.ts b/src/lib/util/test-utils.ts
index 746b6c67..f412f2e5 100644
--- a/src/lib/util/test-utils.ts
+++ b/src/lib/util/test-utils.ts
@@ -73,7 +73,7 @@ export function checkWizardNavigableSteps(
* @param expectedClasses Expected element classes
*/
export function checkClasses(classes: { [key: string]: boolean }, expectedClasses: string[]) {
- expect(
- Object.keys(classes).filter(m => classes[m] === true)
- ).toEqual(expectedClasses);
+ expect(
+ Object.keys(classes).filter(m => classes[m] === true)
+ ).toEqual(expectedClasses);
}
diff --git a/src/lib/util/wizard-completion-step.interface.ts b/src/lib/util/wizard-completion-step.interface.ts
index 36ed925a..150da010 100644
--- a/src/lib/util/wizard-completion-step.interface.ts
+++ b/src/lib/util/wizard-completion-step.interface.ts
@@ -1,6 +1,6 @@
-import {EventEmitter, Directive} from '@angular/core';
-import {WizardStep} from './wizard-step.interface';
-import {MovingDirection} from './moving-direction.enum';
+import { EventEmitter, Directive } from '@angular/core';
+import { WizardStep } from './wizard-step.interface';
+import { MovingDirection } from './moving-direction.enum';
/**
* Basic functionality every wizard completion step needs to provide
diff --git a/src/lib/util/wizard-step.interface.ts b/src/lib/util/wizard-step.interface.ts
index 66775f9c..84d2d30b 100644
--- a/src/lib/util/wizard-step.interface.ts
+++ b/src/lib/util/wizard-step.interface.ts
@@ -1,8 +1,8 @@
import { ContentChild, EventEmitter, HostBinding, Input, Output, Directive } from '@angular/core';
-import {WizardStepSymbolDirective} from '../directives/wizard-step-symbol.directive';
-import {WizardStepTitleDirective} from '../directives/wizard-step-title.directive';
-import {MovingDirection} from './moving-direction.enum';
-import {NavigationSymbol} from './navigation-symbol.interface';
+import { WizardStepSymbolDirective } from '../directives/wizard-step-symbol.directive';
+import { WizardStepTitleDirective } from '../directives/wizard-step-title.directive';
+import { MovingDirection } from './moving-direction.enum';
+import { NavigationSymbol } from './navigation-symbol.interface';
/**
* Basic functionality every type of wizard step needs to provide
@@ -45,7 +45,7 @@ export abstract class WizardStep {
* Takes effect when `stepSymbolTemplate` is not defined or null.
*/
@Input()
- public navigationSymbol: NavigationSymbol = {symbol: ''};
+ public navigationSymbol: NavigationSymbol = { symbol: '' };
/**
* A boolean describing if the wizard step is currently selected
@@ -126,10 +126,10 @@ export abstract class WizardStep {
* @throws An `Error` is thrown if `condition` is neither a function nor a boolean
*/
private static canTransitionStep(condition: ((direction: MovingDirection) => boolean) |
- ((direction: MovingDirection) => Promise) |
- boolean,
- direction: MovingDirection): Promise {
- if (typeof(condition) === typeof(true)) {
+ ((direction: MovingDirection) => Promise) |
+ boolean,
+ direction: MovingDirection): Promise {
+ if (typeof (condition) === typeof (true)) {
return Promise.resolve(condition as boolean);
} else if (condition instanceof Function) {
return Promise.resolve(condition(direction));
diff --git a/styles/archwizard.scss b/styles/archwizard.scss
index b630b11e..60133cff 100644
--- a/styles/archwizard.scss
+++ b/styles/archwizard.scss
@@ -1,638 +1,677 @@
-// Wizard layouts to be generated (all by default).
-// Override this variable to exclude layouts you don't need.
-$aw-layouts: 'horizontal' 'vertical' !default;
-
-// Wizard indicator styles to be generated (all by default).
-// Override this variable to exclude indicator styles you don't use.
-$aw-indicator-styles: 'small', 'large-filled', 'large-empty', 'large-filled-symbols', 'large-empty-symbols' !default;
-
-// Color definitions - a mapping from indicator style and wizard step state to colors.
-//
-// Predefined indicator styles are: 'small', 'large-filled', 'large-empty', 'large-filled-symbols', 'large-empty-symbols'.
-//
-// Wizard step states are: 'default', 'current', 'done', 'optional', 'editing'.
-//
-// Colors are: 'border-color-default', 'background-color-default', 'symbol-color-default', 'border-color-hover',
-// 'background-color-hover', 'symbol-color-hover'. The 'hover' values are applied when the user hovers the mouse
-// pointer over a navigable wizard step indicator. Otherwise the 'default' values are used.
-//
-// Notes:
-// - The order of wizard step states in this mapping does not affect the order of resulting CSS rules, which is fixed
-// internally by angular-archwizard (see `aw-define-style` mixin).
-// - Depending on the active indicator style, some colors may not be used. For example, 'background-color-default' and
-// 'background-color-hover' do not make sense in 'large-empty-symbols' indicator style.
-//
-// 'Null' colors
-// -------------
-//
-// You can use `null` instead of a color value to exclude the corresponding property from CSS output. For example,
-//
-// $aw-colors: (
-// '_': (
-// 'editing': (
-// 'border-color-default': null,
-// 'border-color-hover': null
-// )
-// )
-// )
-//
-// will turn off red border for wizard steps in 'editing' state.
-//
-// Default colors
-// --------------
-//
-// You can set default colors by using '_' in place of an indicator style or a wizard step state.
-// The `aw-get-color` function looks up the requested color in the following order, picking the first defined entry:
-//
-// - $aw-colors[$indicator-style][$step-state][$color]
-// - $aw-colors[$indicator-style]['_'][$color]
-// - $aw-colors['_'][$step-state][$color]
-// - $aw-colors['_']['_'][$color]
-//
-$aw-colors: (
- '_': (
- 'default': (
- 'border-color-default': #E6E6E6,
- 'background-color-default': #E6E6E6,
- 'symbol-color-default': #E6E6E6,
- 'border-color-hover': darken(#E6E6E6, 10%),
- 'background-color-hover': darken(#E6E6E6, 5%),
- 'symbol-color-hover': darken(#E6E6E6, 10%),
- ),
- 'current': (
- 'border-color-default': #808080,
- 'background-color-default': #808080,
- 'symbol-color-default': #808080,
- 'border-color-hover': darken(#808080, 10%),
- 'background-color-hover': darken(#808080, 5%),
- 'symbol-color-hover': darken(#808080, 10%),
- ),
- 'done': (
- 'border-color-default': #339933,
- 'background-color-default': #339933,
- 'symbol-color-default': #339933,
- 'border-color-hover': darken(#339933, 10%),
- 'background-color-hover': darken(#339933, 5%),
- 'symbol-color-hover': darken(#339933, 10%),
- ),
- 'optional': (
- 'border-color-default': #38ef38,
- 'background-color-default': #38ef38,
- 'symbol-color-default': #38ef38,
- 'border-color-hover': darken(#38ef38, 10%),
- 'background-color-hover': darken(#38ef38, 5%),
- 'symbol-color-hover': darken(#38ef38, 10%),
- ),
- 'editing': (
- 'border-color-default': #FF0000,
- 'background-color-default': #FF0000,
- 'symbol-color-default': #FF0000,
- 'border-color-hover': darken(#FF0000, 10%),
- 'background-color-hover': darken(#FF0000, 5%),
- 'symbol-color-hover': darken(#FF0000, 10%),
- ),
- ),
- 'large-filled-symbols': (
- '_': (
- 'symbol-color-default': black,
- 'symbol-color-hover': black,
- )
- )
-) !default;
-
-// line color
-$aw-line-color: #E6E6E6 !default;
-
-// label colors
-$aw-label-color-default: #808080 !default;
-$aw-label-color-hover: darken($aw-label-color-default, 20%) !default;
-
-// Circle definitions
-//
-// Circles are the visual representation of wizard steps in the navigation bar. Depending on
-// the step indicator style selected for the wizard, circles are either small (indicator style 'small')
-// or big (indicator styles 'large-filled', 'large-empty', 'large-filled-symbols' etc.).
-//
-// A short summary of available configuration options:
-// - dot-border-width defines circle border width
-// - dot-width defines the horizontal dimension of circles
-// - dot-height defines the vertical dimension of circles
-//
-// It is recommended to always have dot-width equal to dot-height.
-//
-$aw-circle-border-width: 2px !default;
-
-// small definitions
-$aw-small-circle-width: 14px !default;
-$aw-small-circle-height: 14px !default;
-
-// big definitions
-$aw-big-circle-width: 50px !default;
-$aw-big-circle-height: 50px !default;
-
-// padding between text and baseline, for horizonal navigation bar
-$aw-text-padding-bottom: 10px !default;
-
-// padding between text and baseline, for vertical navigation bar
-$aw-text-margin-left: 15px !default;
-
-// distance between steps, for vertical navigation bar
-$aw-distance-between-steps: 10px !default;
-
-$aw-text-height: 14px !default;
-
-// declare global variables
-$aw-param-indicator-width: null;
-$aw-param-indicator-height: null;
-$aw-param-indicator-border-width: null;
-
-aw-wizard {
- display: flex;
- justify-content: flex-start;
-
- .wizard-steps {
- top: 0;
- display: flex;
- }
-}
-
-aw-wizard.horizontal {
- flex-direction: column;
-
- .wizard-steps {
- width: 100%;
- flex-direction: row;
- }
-}
-
-aw-wizard.vertical {
- flex-direction: row;
-
- .wizard-steps {
- min-width: calc(100% - 280px);
- width: 80%;
- height: 100%;
- flex-direction: column;
- }
-}
-
-
-aw-wizard-step,
-aw-wizard-completion-step {
- height: auto;
- width: 100%;
-}
-
-
-// Temporary variables used to pass parameters from the `define-style` mixin to its content block.
-// They will no longer be needed after content arguments support is released:
-//
-// - https://github.com/sass/sass/issues/871
-// - https://github.com/sass/libsass/releases
-// - https://github.com/sass/node-sass/releases/
-//
-// Using global variables is the recommended workaround
-//
-// - https://github.com/sass/sass/issues/626#issuecomment-345432420
-// - https://github.com/sass/sass/issues/871
-//
-// indicator state: 'default' or 'hover'
-$aw-param-indicator-state: null;
-
-// wizard step state: 'default', 'current', 'done' etc.
-$aw-param-step-state: null;
-
-@mixin rtl {
- @at-root [dir="rtl"] #{&} {
- @content;
- }
-}
-
-// Defines the line that strings together circles representing wizard steps, in the horizontal layout
-@mixin aw-horizontal-line($dot-width, $dot-height, $line-color) {
- background-color: $line-color;
- content: '';
- position: absolute;
- height: 1px;
- width: calc(100% - #{$dot-width});
- top: -($dot-height / 2);
- left: calc(50% + #{$dot-width / 2});
-
- @include rtl {
- left: auto;
- right: calc(50% + #{$dot-width / 2});
- }
-}
-
-// Defines the line that strings together circles representing wizard steps, in the vertical layout
-@mixin aw-vertical-line($dot-width, $dot-height, $line-color) {
- background-color: $line-color;
- content: '';
- position: absolute;
- left: -($dot-height / 2);
- top: $dot-height;
- height: calc(100% - #{$dot-height});
- width: 1px;
-
- @include rtl {
- left: auto;
- right: -($dot-height / 2);
- }
-}
-
-// Defines a circle representing a wizard step
-@mixin aw-circle($dot-width, $dot-height, $dot-border-width) {
- position: absolute;
- width: $dot-width;
- height: $dot-height;
- text-align: center;
- vertical-align: middle;
- line-height: $dot-height - 2 * $dot-border-width;
- transition: 0.25s;
- border-radius: 100%;
-}
-
-// Positions a circle in the horizontal layout of the navigation bar
-@mixin aw-circle-position-horizontal($dot-width, $dot-height, $dot-border-width) {
- top: -$dot-height;
- left: calc(50% - #{$dot-width / 2});
-
- @include rtl {
- left: auto;
- right: calc(50% - #{$dot-width / 2});;
- }
-}
-
-// Positions a circle in the vertical layout of the navigation bar
-@mixin aw-circle-position-vertical($dot-width, $dot-height, $dot-border-width) {
- top: 0;
- left: -$dot-width;
-
- @include rtl {
- left: auto;
- right: -$dot-width;
- }
-}
-
-// Define a step indicator style like 'small', 'large-filled' etc.
-//
-// Arguments:
-// $layout - 'horizontal' | 'vertical'
-// $width - step indicator width
-// $height - step indicator height
-// $border-width - step indicator border width
-//
-// Apart from the arguments, the `define-style` mixin receives a content block,
-// which is applied for .step-indicator elements and is expected to customize indicator representation.
-// The content block is invoked several times, each time with different arguments passed through global variables:
-//
-// - $aw-param-indicator-state - indicator state: 'default' or 'hover'
-// - $aw-param-step-state - wizard step state: 'default', 'current', 'done' etc.
-//
-// In addition to these variables, the content block can use the following
-// variables passed through the `define-style` mixin:
-//
-// - $aw-param-indicator-width - equals to $width argument of the `define-style` mixin
-// - $aw-param-indicator-height - equals to $height argument of the `define-style` mixin
-// - $aw-param-indicator-border-width - equals to $border-width argument of the `define-style` mixin
-//
-@mixin aw-define-style($layout, $width: $aw-big-circle-height, $height: $aw-big-circle-height, $border-width: $aw-circle-border-width) {
-
- // Make variables accessible from the content block
- $aw-param-indicator-width: $width !global;
- $aw-param-indicator-height: $height !global;
- $aw-param-indicator-border-width: $border-width !global;
-
- @if ($layout == 'horizontal') {
- padding: ($height + $aw-text-padding-bottom) 0 $aw-text-padding-bottom 0;
- }
- @else if ($layout == 'vertical') {
- padding: ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2 + $height);
-
- @include rtl {
- padding: ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2 + $height) ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2);
- }
- }
-
- li {
- &:not(:last-child):after {
- @if ($layout == 'horizontal') {
- @include aw-horizontal-line($width, $height, $aw-line-color);
- }
- @else if ($layout == 'vertical') {
- @include aw-vertical-line($width, $height, $aw-line-color);
- }
- }
-
- @if ($layout == 'vertical') {
- a {
- min-height: $height;
- }
- }
-
- .step-indicator {
- @if ($layout == 'horizontal') {
- @include aw-circle-position-horizontal($width, $height, $border-width);
- }
- @else if ($layout == 'vertical') {
- @include aw-circle-position-vertical($width, $height, $border-width);
- }
-
- $aw-param-indicator-state: 'default' !global;
- $aw-param-step-state: 'default' !global;
- @include aw-circle($width, $height, $border-width);
- @content;
- }
- &.optional .step-indicator {
- $aw-param-indicator-state: 'default' !global;
- $aw-param-step-state: 'optional' !global;
- @content;
- }
- &.done .step-indicator {
- $aw-param-indicator-state: 'default' !global;
- $aw-param-step-state: 'done' !global;
- @content;
- }
- &.current .step-indicator {
- $aw-param-indicator-state: 'default' !global;
- $aw-param-step-state: 'current' !global;
- @content;
- }
- &.editing .step-indicator {
- $aw-param-indicator-state: 'default' !global;
- $aw-param-step-state: 'editing' !global;
- @content;
- }
- // 'completed' class takes priority
- // https://github.com/madoar/angular-archwizard/pull/221
- &.completed .step-indicator {
- $aw-param-indicator-state: 'default' !global;
- $aw-param-step-state: 'done' !global;
- @content;
- }
-
- &.navigable a:hover .step-indicator {
- $aw-param-indicator-state: 'hover' !global;
- $aw-param-step-state: 'default' !global;
- @include aw-circle($width, $height, $border-width);
- @content;
- }
- &.navigable.optional a:hover .step-indicator {
- $aw-param-indicator-state: 'hover' !global;
- $aw-param-step-state: 'optional' !global;
- @content;
- }
- &.navigable.done a:hover .step-indicator {
- $aw-param-indicator-state: 'hover' !global;
- $aw-param-step-state: 'done' !global;
- @content;
- }
- &.navigable.current a:hover .step-indicator {
- $aw-param-indicator-state: 'hover' !global;
- $aw-param-step-state: 'current' !global;
- @content;
- }
- &.navigable.editing a:hover .step-indicator {
- $aw-param-indicator-state: 'hover' !global;
- $aw-param-step-state: 'editing' !global;
- @content;
- }
- // 'completed' class takes priority
- // https://github.com/madoar/angular-archwizard/pull/221
- &.navigable.completed a:hover .step-indicator {
- $aw-param-indicator-state: 'hover' !global;
- $aw-param-step-state: 'done' !global;
- @content;
- }
- }
-}
-
-
-// Define wizard styles specific to the configurated layouts (`$aw-layouts`) and indicator styles (`$aw-indicator-styles`)
-@mixin aw-define-styles() {
-
- // For each layout and indicator style...
- @each $layout in $aw-layouts {
- aw-wizard-navigation-bar.#{$layout} {
- @each $indicator-style in $aw-indicator-styles {
- &.#{$indicator-style} ul.steps-indicator {
- // ...we are emitting CSS styles for `aw-wizard-navigation-bar.. ul.steps-indicator`
-
- // Each indicator style is defined with its specific values (like `$border-width: 0` in this case) and CSS
- // properties. For indicator style 'small' we only define background color, while for other indicator styles
- // below we define border and/or color properties. The `aw-define-style` mixin here is used to apply CSS
- // properties in a proper order for each wizard step state ('default', 'current', 'done' etc.)
- @if $indicator-style == 'small' {
- @include aw-define-style($layout, $width: $aw-small-circle-width, $height: $aw-small-circle-height, $border-width: 0) {
- background-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'background-color');
- }
- }
-
- @else if $indicator-style == 'large-filled' {
- @include aw-define-style($layout, $border-width: 0) {
- background-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'background-color');
- }
- }
-
- @else if $indicator-style == 'large-empty' {
- @include aw-define-style($layout) {
- $border-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'border-color');
- @if $border-color != null {
- // To optimize CSS output size, do not define any border styles when border-color is null
- border: $aw-param-indicator-border-width solid $border-color;
- }
- }
- }
-
- @else if $indicator-style == 'large-filled-symbols' {
- @include aw-define-style($layout, $border-width: 0) {
- background-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'background-color');
- color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'symbol-color');
- }
- }
-
- @else if $indicator-style == 'large-empty-symbols' {
- @include aw-define-style($layout) {
- $border-color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'border-color');
- @if $border-color != null {
- // To optimize CSS output size, do not define any border styles when border-color is null
- border: $aw-param-indicator-border-width solid $border-color;
- }
- color: aw-get-color($indicator-style, $aw-param-step-state, $aw-param-indicator-state, 'symbol-color');
- }
- }
- }
- }
- }
- }
-}
-
-// Retrieve color from the color definitions map ($aw-colors)
-//
-// Arguments:
-// $indicator-style: Indicator style: 'small', 'large-filled' etc.
-// $step-state: Wizard step state: 'default', 'current', 'done' etc.
-// $indicator-state: Indicator state: 'default' or 'hover'
-// $property: Property to retrieve: 'background-color', 'border-color', 'symbol-color'
-//
-// Returns:
-// Color value like #E6E6E6 or `null` if
-// - the requested property is not specified in the color definitions map
-// - the corresponding color definitions map entry is explicit `null`
-//
-@function aw-get-color($indicator-style, $step-state, $indicator-state, $property) {
- //
- // Gather a list of candidate maps to search for the requested property.
- // As documented in archwizard.scss, "Default Colors" section, the order should be as follows:
- //
- // - $aw-colors[$indicator-style][$step-state][$color]
- // - $aw-colors[$indicator-style]['_'][$color]
- // - $aw-colors['_'][$step-state][$color]
- // - $aw-colors['_']['_'][$color]
- //
- // Additional "or ()" expressions are necessary because calling `map-get(null)` causes an SCSS compilation error
- //
- $maps: (
- map-get(map-get($aw-colors, $indicator-style) or (), $step-state) or (),
- map-get(map-get($aw-colors, $indicator-style) or (), '_') or (),
- map-get(map-get($aw-colors, '_') or (), $step-state) or (),
- map-get(map-get($aw-colors, '_') or (), '_') or (),
- );
-
- // Loop through $maps until we find the requested property
- $key: '#{$property}-#{$indicator-state}';
- @each $map in $maps {
- @if map-has-key($map, $key) {
- @return map-get($map, $key);
- }
- }
- @return null;
-}
-
-
-aw-wizard-navigation-bar {
-
- ul.steps-indicator {
-
- // http://www.paulirish.com/2012/box-sizing-border-box-ftw/
- * {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- li {
- position: relative;
- pointer-events: none;
-
- a .label {
- color: $aw-label-color-default;
- line-height: $aw-text-height;
- font-size: $aw-text-height;
- text-decoration: none;
- text-transform: uppercase;
- font-weight: bold;
- transition: 0.25s;
- }
- }
-
- li.navigable {
- pointer-events: auto;
-
- a {
- cursor: pointer;
- }
-
- a:hover .label {
- color: $aw-label-color-hover;
- }
- }
- }
-}
-
-@if 'horizontal' is in $aw-layouts {
- aw-wizard-navigation-bar.horizontal {
-
- ul.steps-indicator {
- display: flex;
- flex-direction: row;
- justify-content: center;
-
- margin: 0;
- width: 100%;
- list-style: none;
-
- @for $number-of-components from 2 through 10 {
- &.steps-#{$number-of-components} {
- &:after {
- left: 100% / $number-of-components / 2;
- right: 100% / $number-of-components / 2;
- }
-
- li {
- width: 100% / $number-of-components;
- }
- }
- }
-
- li {
- margin: 0;
- padding: 0;
- text-align: center;
-
- a .label {
- display: inline-block;
- padding-top: $aw-text-padding-bottom;
- text-align: center;
- }
- }
- }
- }
-}
-
-@if 'vertical' is in $aw-layouts {
- aw-wizard-navigation-bar.vertical {
- max-width: 280px;
- width: 20%;
- height: 100%;
- position: sticky;
- top: 0;
-
- ul.steps-indicator {
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- list-style: none;
- margin: auto;
-
- li {
-
- &:not(:last-child) {
- margin-bottom: 0;
- padding-bottom: $aw-distance-between-steps;
- }
-
- a {
- // center labels vertically
- display: flex;
- flex-direction: row;
- align-items: center;
-
- .label {
- margin-left: $aw-text-margin-left;
- text-align: left;
-
- @include rtl {
- margin-left: 0;
- margin-right: $aw-text-margin-left;
- text-align: right;
- }
- }
- }
- }
- }
- }
-}
-
-@include aw-define-styles();
+// Wizard layouts to be generated (all by default).
+// Override this variable to exclude layouts you don't need.
+$aw-layouts: "horizontal" "vertical" !default;
+
+// Wizard indicator styles to be generated (all by default).
+// Override this variable to exclude indicator styles you don't use.
+$aw-indicator-styles: "small", "large-filled", "large-empty",
+ "large-filled-symbols", "large-empty-symbols" !default;
+
+// Color definitions - a mapping from indicator style and wizard step state to colors.
+//
+// Predefined indicator styles are: 'small', 'large-filled', 'large-empty', 'large-filled-symbols', 'large-empty-symbols'.
+//
+// Wizard step states are: 'default', 'current', 'done', 'optional', 'editing'.
+//
+// Colors are: 'border-color-default', 'background-color-default', 'symbol-color-default', 'border-color-hover',
+// 'background-color-hover', 'symbol-color-hover'. The 'hover' values are applied when the user hovers the mouse
+// pointer over a navigable wizard step indicator. Otherwise the 'default' values are used.
+//
+// Notes:
+// - The order of wizard step states in this mapping does not affect the order of resulting CSS rules, which is fixed
+// internally by angular-archwizard (see `aw-define-style` mixin).
+// - Depending on the active indicator style, some colors may not be used. For example, 'background-color-default' and
+// 'background-color-hover' do not make sense in 'large-empty-symbols' indicator style.
+//
+// 'Null' colors
+// -------------
+//
+// You can use `null` instead of a color value to exclude the corresponding property from CSS output. For example,
+//
+// $aw-colors: (
+// '_': (
+// 'editing': (
+// 'border-color-default': null,
+// 'border-color-hover': null
+// )
+// )
+// )
+//
+// will turn off red border for wizard steps in 'editing' state.
+//
+// Default colors
+// --------------
+//
+// You can set default colors by using '_' in place of an indicator style or a wizard step state.
+// The `aw-get-color` function looks up the requested color in the following order, picking the first defined entry:
+//
+// - $aw-colors[$indicator-style][$step-state][$color]
+// - $aw-colors[$indicator-style]['_'][$color]
+// - $aw-colors['_'][$step-state][$color]
+// - $aw-colors['_']['_'][$color]
+//
+$aw-colors: (
+ "_": (
+ "default": (
+ "border-color-default": #e6e6e6,
+ "background-color-default": #e6e6e6,
+ "symbol-color-default": #e6e6e6,
+ "border-color-hover": darken(#e6e6e6, 10%),
+ "background-color-hover": darken(#e6e6e6, 5%),
+ "symbol-color-hover": darken(#e6e6e6, 10%),
+ ),
+ "current": (
+ "border-color-default": #808080,
+ "background-color-default": #808080,
+ "symbol-color-default": #808080,
+ "border-color-hover": darken(#808080, 10%),
+ "background-color-hover": darken(#808080, 5%),
+ "symbol-color-hover": darken(#808080, 10%),
+ ),
+ "done": (
+ "border-color-default": #339933,
+ "background-color-default": #339933,
+ "symbol-color-default": #339933,
+ "border-color-hover": darken(#339933, 10%),
+ "background-color-hover": darken(#339933, 5%),
+ "symbol-color-hover": darken(#339933, 10%),
+ ),
+ "optional": (
+ "border-color-default": #38ef38,
+ "background-color-default": #38ef38,
+ "symbol-color-default": #38ef38,
+ "border-color-hover": darken(#38ef38, 10%),
+ "background-color-hover": darken(#38ef38, 5%),
+ "symbol-color-hover": darken(#38ef38, 10%),
+ ),
+ "editing": (
+ "border-color-default": #ff0000,
+ "background-color-default": #ff0000,
+ "symbol-color-default": #ff0000,
+ "border-color-hover": darken(#ff0000, 10%),
+ "background-color-hover": darken(#ff0000, 5%),
+ "symbol-color-hover": darken(#ff0000, 10%),
+ ),
+ ),
+ "large-filled-symbols": (
+ "_": (
+ "symbol-color-default": black,
+ "symbol-color-hover": black,
+ ),
+ ),
+) !default;
+
+// line color
+$aw-line-color: #e6e6e6 !default;
+
+// label colors
+$aw-label-color-default: #808080 !default;
+$aw-label-color-hover: darken($aw-label-color-default, 20%) !default;
+
+// Circle definitions
+//
+// Circles are the visual representation of wizard steps in the navigation bar. Depending on
+// the step indicator style selected for the wizard, circles are either small (indicator style 'small')
+// or big (indicator styles 'large-filled', 'large-empty', 'large-filled-symbols' etc.).
+//
+// A short summary of available configuration options:
+// - dot-border-width defines circle border width
+// - dot-width defines the horizontal dimension of circles
+// - dot-height defines the vertical dimension of circles
+//
+// It is recommended to always have dot-width equal to dot-height.
+//
+$aw-circle-border-width: 2px !default;
+
+// small definitions
+$aw-small-circle-width: 14px !default;
+$aw-small-circle-height: 14px !default;
+
+// big definitions
+$aw-big-circle-width: 50px !default;
+$aw-big-circle-height: 50px !default;
+
+// padding between text and baseline, for horizonal navigation bar
+$aw-text-padding-bottom: 10px !default;
+
+// padding between text and baseline, for vertical navigation bar
+$aw-text-margin-left: 15px !default;
+
+// distance between steps, for vertical navigation bar
+$aw-distance-between-steps: 10px !default;
+
+$aw-text-height: 14px !default;
+
+// declare global variables
+$aw-param-indicator-width: null;
+$aw-param-indicator-height: null;
+$aw-param-indicator-border-width: null;
+
+aw-wizard {
+ display: flex;
+ justify-content: flex-start;
+
+ .wizard-steps {
+ top: 0;
+ display: flex;
+ }
+}
+
+aw-wizard.horizontal {
+ flex-direction: column;
+
+ .wizard-steps {
+ width: 100%;
+ flex-direction: row;
+ }
+}
+
+aw-wizard.vertical {
+ flex-direction: row;
+
+ .wizard-steps {
+ min-width: calc(100% - 280px);
+ width: 80%;
+ height: 100%;
+ flex-direction: column;
+ }
+}
+
+aw-wizard-step,
+aw-wizard-completion-step {
+ height: auto;
+ width: 100%;
+}
+
+// Temporary variables used to pass parameters from the `define-style` mixin to its content block.
+// They will no longer be needed after content arguments support is released:
+//
+// - https://github.com/sass/sass/issues/871
+// - https://github.com/sass/libsass/releases
+// - https://github.com/sass/node-sass/releases/
+//
+// Using global variables is the recommended workaround
+//
+// - https://github.com/sass/sass/issues/626#issuecomment-345432420
+// - https://github.com/sass/sass/issues/871
+//
+// indicator state: 'default' or 'hover'
+$aw-param-indicator-state: null;
+
+// wizard step state: 'default', 'current', 'done' etc.
+$aw-param-step-state: null;
+
+@mixin rtl {
+ @at-root [dir="rtl"] #{&} {
+ @content;
+ }
+}
+
+// Defines the line that strings together circles representing wizard steps, in the horizontal layout
+@mixin aw-horizontal-line($dot-width, $dot-height, $line-color) {
+ background-color: $line-color;
+ content: "";
+ position: absolute;
+ height: 1px;
+ width: calc(100% - $dot-width);
+ top: -($dot-height / 2);
+ left: calc(50% + $dot-width / 2);
+
+ @include rtl {
+ left: auto;
+ right: calc(50% + $dot-width / 2);
+ }
+}
+
+// Defines the line that strings together circles representing wizard steps, in the vertical layout
+@mixin aw-vertical-line($dot-width, $dot-height, $line-color) {
+ background-color: $line-color;
+ content: "";
+ position: absolute;
+ left: -($dot-height / 2);
+ top: $dot-height;
+ height: calc(100% - $dot-height);
+ width: 1px;
+
+ @include rtl {
+ left: auto;
+ right: -($dot-height / 2);
+ }
+}
+
+// Defines a circle representing a wizard step
+@mixin aw-circle($dot-width, $dot-height, $dot-border-width) {
+ position: absolute;
+ width: $dot-width;
+ height: $dot-height;
+ text-align: center;
+ vertical-align: middle;
+ line-height: $dot-height - 2 * $dot-border-width;
+ transition: 0.25s;
+ border-radius: 100%;
+}
+
+// Positions a circle in the horizontal layout of the navigation bar
+@mixin aw-circle-position-horizontal(
+ $dot-width,
+ $dot-height,
+ $dot-border-width
+) {
+ top: -$dot-height;
+ left: calc(50% - $dot-width / 2);
+
+ @include rtl {
+ left: auto;
+ right: calc(50% - $dot-width / 2);
+ }
+}
+
+// Positions a circle in the vertical layout of the navigation bar
+@mixin aw-circle-position-vertical($dot-width, $dot-height, $dot-border-width) {
+ top: 0;
+ left: -$dot-width;
+
+ @include rtl {
+ left: auto;
+ right: -$dot-width;
+ }
+}
+
+// Define a step indicator style like 'small', 'large-filled' etc.
+//
+// Arguments:
+// $layout - 'horizontal' | 'vertical'
+// $width - step indicator width
+// $height - step indicator height
+// $border-width - step indicator border width
+//
+// Apart from the arguments, the `define-style` mixin receives a content block,
+// which is applied for .step-indicator elements and is expected to customize indicator representation.
+// The content block is invoked several times, each time with different arguments passed through global variables:
+//
+// - $aw-param-indicator-state - indicator state: 'default' or 'hover'
+// - $aw-param-step-state - wizard step state: 'default', 'current', 'done' etc.
+//
+// In addition to these variables, the content block can use the following
+// variables passed through the `define-style` mixin:
+//
+// - $aw-param-indicator-width - equals to $width argument of the `define-style` mixin
+// - $aw-param-indicator-height - equals to $height argument of the `define-style` mixin
+// - $aw-param-indicator-border-width - equals to $border-width argument of the `define-style` mixin
+//
+@mixin aw-define-style(
+ $layout,
+ $width: $aw-big-circle-height,
+ $height: $aw-big-circle-height,
+ $border-width: $aw-circle-border-width
+) {
+ // Make variables accessible from the content block
+ $aw-param-indicator-width: $width !global;
+ $aw-param-indicator-height: $height !global;
+ $aw-param-indicator-border-width: $border-width !global;
+
+ @if ($layout == "horizontal") {
+ padding: ($height + $aw-text-padding-bottom) 0 $aw-text-padding-bottom 0;
+ } @else if ($layout == "vertical") {
+ padding: ($aw-distance-between-steps / 2)
+ ($aw-distance-between-steps / 2)
+ ($aw-distance-between-steps / 2)
+ ($aw-distance-between-steps / 2 + $height);
+
+ @include rtl {
+ padding: ($aw-distance-between-steps / 2)
+ ($aw-distance-between-steps / 2 + $height)
+ ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2);
+ }
+ }
+
+ li {
+ &:not(:last-child):after {
+ @if ($layout == "horizontal") {
+ @include aw-horizontal-line($width, $height, $aw-line-color);
+ } @else if ($layout == "vertical") {
+ @include aw-vertical-line($width, $height, $aw-line-color);
+ }
+ }
+
+ @if ($layout == "vertical") {
+ a {
+ min-height: $height;
+ }
+ }
+
+ .step-indicator {
+ @if ($layout == "horizontal") {
+ @include aw-circle-position-horizontal($width, $height, $border-width);
+ } @else if ($layout == "vertical") {
+ @include aw-circle-position-vertical($width, $height, $border-width);
+ }
+
+ $aw-param-indicator-state: "default" !global;
+ $aw-param-step-state: "default" !global;
+ @include aw-circle($width, $height, $border-width);
+ @content;
+ }
+ &.optional .step-indicator {
+ $aw-param-indicator-state: "default" !global;
+ $aw-param-step-state: "optional" !global;
+ @content;
+ }
+ &.done .step-indicator {
+ $aw-param-indicator-state: "default" !global;
+ $aw-param-step-state: "done" !global;
+ @content;
+ }
+ &.current .step-indicator {
+ $aw-param-indicator-state: "default" !global;
+ $aw-param-step-state: "current" !global;
+ @content;
+ }
+ &.editing .step-indicator {
+ $aw-param-indicator-state: "default" !global;
+ $aw-param-step-state: "editing" !global;
+ @content;
+ }
+ // 'completed' class takes priority
+ // https://github.com/madoar/angular-archwizard/pull/221
+ &.completed .step-indicator {
+ $aw-param-indicator-state: "default" !global;
+ $aw-param-step-state: "done" !global;
+ @content;
+ }
+
+ &.navigable a:hover .step-indicator {
+ $aw-param-indicator-state: "hover" !global;
+ $aw-param-step-state: "default" !global;
+ @include aw-circle($width, $height, $border-width);
+ @content;
+ }
+ &.navigable.optional a:hover .step-indicator {
+ $aw-param-indicator-state: "hover" !global;
+ $aw-param-step-state: "optional" !global;
+ @content;
+ }
+ &.navigable.done a:hover .step-indicator {
+ $aw-param-indicator-state: "hover" !global;
+ $aw-param-step-state: "done" !global;
+ @content;
+ }
+ &.navigable.current a:hover .step-indicator {
+ $aw-param-indicator-state: "hover" !global;
+ $aw-param-step-state: "current" !global;
+ @content;
+ }
+ &.navigable.editing a:hover .step-indicator {
+ $aw-param-indicator-state: "hover" !global;
+ $aw-param-step-state: "editing" !global;
+ @content;
+ }
+ // 'completed' class takes priority
+ // https://github.com/madoar/angular-archwizard/pull/221
+ &.navigable.completed a:hover .step-indicator {
+ $aw-param-indicator-state: "hover" !global;
+ $aw-param-step-state: "done" !global;
+ @content;
+ }
+ }
+}
+
+// Define wizard styles specific to the configurated layouts (`$aw-layouts`) and indicator styles (`$aw-indicator-styles`)
+@mixin aw-define-styles() {
+ // For each layout and indicator style...
+ @each $layout in $aw-layouts {
+ aw-wizard-navigation-bar.#{$layout} {
+ @each $indicator-style in $aw-indicator-styles {
+ &.#{$indicator-style} ul.steps-indicator {
+ // ...we are emitting CSS styles for `aw-wizard-navigation-bar.. ul.steps-indicator`
+
+ // Each indicator style is defined with its specific values (like `$border-width: 0` in this case) and CSS
+ // properties. For indicator style 'small' we only define background color, while for other indicator styles
+ // below we define border and/or color properties. The `aw-define-style` mixin here is used to apply CSS
+ // properties in a proper order for each wizard step state ('default', 'current', 'done' etc.)
+ @if $indicator-style == "small" {
+ @include aw-define-style(
+ $layout,
+ $width: $aw-small-circle-width,
+ $height: $aw-small-circle-height,
+ $border-width: 0
+ ) {
+ background-color: aw-get-color(
+ $indicator-style,
+ $aw-param-step-state,
+ $aw-param-indicator-state,
+ "background-color"
+ );
+ }
+ } @else if $indicator-style == "large-filled" {
+ @include aw-define-style($layout, $border-width: 0) {
+ background-color: aw-get-color(
+ $indicator-style,
+ $aw-param-step-state,
+ $aw-param-indicator-state,
+ "background-color"
+ );
+ }
+ } @else if $indicator-style == "large-empty" {
+ @include aw-define-style($layout) {
+ $border-color: aw-get-color(
+ $indicator-style,
+ $aw-param-step-state,
+ $aw-param-indicator-state,
+ "border-color"
+ );
+ @if $border-color != null {
+ // To optimize CSS output size, do not define any border styles when border-color is null
+ border: $aw-param-indicator-border-width solid $border-color;
+ }
+ }
+ } @else if $indicator-style == "large-filled-symbols" {
+ @include aw-define-style($layout, $border-width: 0) {
+ background-color: aw-get-color(
+ $indicator-style,
+ $aw-param-step-state,
+ $aw-param-indicator-state,
+ "background-color"
+ );
+ color: aw-get-color(
+ $indicator-style,
+ $aw-param-step-state,
+ $aw-param-indicator-state,
+ "symbol-color"
+ );
+ }
+ } @else if $indicator-style == "large-empty-symbols" {
+ @include aw-define-style($layout) {
+ $border-color: aw-get-color(
+ $indicator-style,
+ $aw-param-step-state,
+ $aw-param-indicator-state,
+ "border-color"
+ );
+ @if $border-color != null {
+ // To optimize CSS output size, do not define any border styles when border-color is null
+ border: $aw-param-indicator-border-width solid $border-color;
+ }
+ color: aw-get-color(
+ $indicator-style,
+ $aw-param-step-state,
+ $aw-param-indicator-state,
+ "symbol-color"
+ );
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+// Retrieve color from the color definitions map ($aw-colors)
+//
+// Arguments:
+// $indicator-style: Indicator style: 'small', 'large-filled' etc.
+// $step-state: Wizard step state: 'default', 'current', 'done' etc.
+// $indicator-state: Indicator state: 'default' or 'hover'
+// $property: Property to retrieve: 'background-color', 'border-color', 'symbol-color'
+//
+// Returns:
+// Color value like #E6E6E6 or `null` if
+// - the requested property is not specified in the color definitions map
+// - the corresponding color definitions map entry is explicit `null`
+//
+@function aw-get-color(
+ $indicator-style,
+ $step-state,
+ $indicator-state,
+ $property
+) {
+ //
+ // Gather a list of candidate maps to search for the requested property.
+ // As documented in archwizard.scss, "Default Colors" section, the order should be as follows:
+ //
+ // - $aw-colors[$indicator-style][$step-state][$color]
+ // - $aw-colors[$indicator-style]['_'][$color]
+ // - $aw-colors['_'][$step-state][$color]
+ // - $aw-colors['_']['_'][$color]
+ //
+ // Additional "or ()" expressions are necessary because calling `map-get(null)` causes an SCSS compilation error
+ //
+ $maps: (
+ map-get(map-get($aw-colors, $indicator-style) or (), $step-state) or (),
+ map-get(map-get($aw-colors, $indicator-style) or (), "_") or (),
+ map-get(map-get($aw-colors, "_") or (), $step-state) or (),
+ map-get(map-get($aw-colors, "_") or (), "_") or ()
+ );
+
+ // Loop through $maps until we find the requested property
+ $key: "#{$property}-#{$indicator-state}";
+ @each $map in $maps {
+ @if map-has-key($map, $key) {
+ @return map-get($map, $key);
+ }
+ }
+ @return null;
+}
+
+aw-wizard-navigation-bar {
+ ul.steps-indicator {
+ // http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+ * {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ li {
+ position: relative;
+ pointer-events: none;
+
+ a .label {
+ color: $aw-label-color-default;
+ line-height: $aw-text-height;
+ font-size: $aw-text-height;
+ text-decoration: none;
+ text-transform: uppercase;
+ font-weight: bold;
+ transition: 0.25s;
+ }
+ }
+
+ li.navigable {
+ pointer-events: auto;
+
+ a {
+ cursor: pointer;
+ }
+
+ a:hover .label {
+ color: $aw-label-color-hover;
+ }
+ }
+ }
+}
+
+@if "horizontal" is in $aw-layouts {
+ aw-wizard-navigation-bar.horizontal {
+ ul.steps-indicator {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ margin: 0;
+ width: 100%;
+ list-style: none;
+
+ @for $number-of-components from 2 through 10 {
+ &.steps-#{$number-of-components} {
+ &:after {
+ left: 100% / $number-of-components / 2;
+ right: 100% / $number-of-components / 2;
+ }
+
+ li {
+ width: 100% / $number-of-components;
+ }
+ }
+ }
+
+ li {
+ margin: 0;
+ padding: 0;
+ text-align: center;
+
+ a .label {
+ display: inline-block;
+ padding-top: $aw-text-padding-bottom;
+ text-align: center;
+ }
+ }
+ }
+ }
+}
+
+@if "vertical" is in $aw-layouts {
+ aw-wizard-navigation-bar.vertical {
+ max-width: 280px;
+ width: 20%;
+ height: 100%;
+ position: sticky;
+ top: 0;
+
+ ul.steps-indicator {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ list-style: none;
+ margin: auto;
+
+ li {
+ &:not(:last-child) {
+ margin-bottom: 0;
+ padding-bottom: $aw-distance-between-steps;
+ }
+
+ a {
+ // center labels vertically
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .label {
+ margin-left: $aw-text-margin-left;
+ text-align: left;
+
+ @include rtl {
+ margin-left: 0;
+ margin-right: $aw-text-margin-left;
+ text-align: right;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+@include aw-define-styles();
diff --git a/tsconfig-noIvy.spec.json b/tsconfig-noIvy.spec.json
index a81f83bc..bd713981 100644
--- a/tsconfig-noIvy.spec.json
+++ b/tsconfig-noIvy.spec.json
@@ -3,4 +3,4 @@
"angularCompilerOptions": {
"enableIvy": false
}
-}
+}
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
index dada66bf..84f30831 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -28,4 +28,4 @@
]
}
}
-}
+}
\ No newline at end of file
diff --git a/tsconfig.lib.json b/tsconfig.lib.json
index fe8c898b..41bc71c0 100644
--- a/tsconfig.lib.json
+++ b/tsconfig.lib.json
@@ -29,4 +29,4 @@
"src/test.ts",
"**/*.spec.ts"
]
-}
+}
\ No newline at end of file
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 930a0f69..8550c677 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -17,4 +17,4 @@
"angularCompilerOptions": {
"enableIvy": true
}
-}
+}
\ No newline at end of file
diff --git a/tslint.json b/tslint.json
index c49cb9bf..d8c251d5 100644
--- a/tslint.json
+++ b/tslint.json
@@ -139,4 +139,4 @@
"aw",
"kebab-case"
]
-}
+}
\ No newline at end of file