Skip to content

Commit 9c2d929

Browse files
mmart1nteodosiah
mmart1n
and
teodosiah
committed
feat(stepper): add component implementation
Co-authored-by: Teodosia Hristodorova <[email protected]>
1 parent 5776fa4 commit 9c2d929

14 files changed

+1720
-2
lines changed

‎CHANGELOG.md

+18-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@ All notable changes for each version of this project will be documented in this
55
## 13.0.0
66

77
### New Features
8+
- Added `IgxStepper` component
9+
- Highly customizable component that visualizes content as a process and shows its progress by dividing the content into chronological `igx-steps`.
10+
- Exposed API to control features like step validation, styling, orientation, and easy-to-use keyboard navigation.
11+
- Code example below:
12+
13+
```html
14+
<igx-stepper>
15+
<igx-step *ngFor="let step of stepsData" >
16+
...
17+
</igx-step>
18+
</igx-stepper>
19+
```
20+
21+
- For more information, check out the [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/stepper/README.md), [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Stepper-Specification) and [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper).
22+
823
- `IgxCsvExporterService`, `IgxExcelExporterService`
924
- Exporter services are no longer required to be provided in the application since they are now injected on a root level.
1025
- `IgxGridToolbarPinningComponent`, `IgxGridToolbarHidingComponent`
@@ -34,7 +49,9 @@ All notable changes for each version of this project will be documented in this
3449
Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead.
3550
- `IgxColumnActionsComponent`
3651
- **Breaking Change** - The following input has been removed
37-
- Input `columns`. Use `igxGrid` `columns` input instead.
52+
- Input `columns`. Use `igxGrid` `columns` input instead.
53+
- `IgxCarousel`
54+
- **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`.
3855

3956
## 12.2.3
4057

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ Some of the Angular chart types included are: [Polar chart](https://www.infragis
6565
|select|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)|||||
6666
|slider|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/slider/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)|||||
6767
|snackbar|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/snackbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar)|||||
68+
|stepper|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/stepper/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper)|
6869
|switch|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/switch/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch)|||||
6970
|tabs|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabs/tabs/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)|||||
7071
|time picker|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/time-picker/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker)|||||

‎projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,8 @@ export abstract class ToggleAnimationPlayer implements ToggleAnimationOwner, OnD
133133
if (opposite) {
134134
if (opposite.hasStarted()) {
135135
// .getPosition() still returns 0 sometimes, regardless of the fix for https://github.com/angular/angular/issues/18891;
136-
oppositePosition = (opposite as any)._renderer.engine.players[0].getPosition();
136+
const renderer = (opposite as any)._renderer;
137+
oppositePosition = renderer.engine.players[renderer.engine.players.length - 1].getPosition();
137138
}
138139

139140
this.cleanUpPlayer(oppositeType);

‎projects/igniteui-angular/src/lib/stepper/README.md

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# IgxStepperComponent
2+
3+
## Description
4+
_**IgxStepperComponent** is a collection of **IgxStepComponent**s that delivers a wizard-like workflow:_
5+
6+
A complete walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper).
7+
The specification for the stepper can be found [here](https://github.com/IgniteUI/igniteui-angular/wiki/Stepper-Specification)
8+
9+
----------
10+
11+
## Usage
12+
```html
13+
<igx-stepper>
14+
<igx-step *ngFor="let step of stepsData" [disabled]=”step.disabled”>
15+
<igx-icon igxStepIndicator>
16+
{{step.indicator}}
17+
</igx-icon>
18+
19+
<p igxStepTitle>
20+
{{step.title}}
21+
</p>
22+
23+
<div igxStepContent>
24+
...
25+
</div>
26+
</igx-step>
27+
</igx-stepper>
28+
```
29+
30+
----------
31+
32+
## Keyboard Navigation
33+
34+
The keyboard can be used to navigate through all steps in the stpper.
35+
36+
_Disabled steps are not counted as visible steps for the purpose of keyboard navigation._
37+
38+
|Keys |Description|
39+
|---------------|-----------|
40+
| ARROW DOWN | Focuses the next step header in a vertical stepper. |
41+
| ARROW UP | Focuses the previous step header in a vertical stepper. |
42+
| TAB | Moves the focus to the next tabbable element. |
43+
| SHIFT + TAB | Moves the focus to the previous tabbable element. |
44+
| HOME | Moves the focus to the header of the FIRST enabled step in the _igx-stepper_ |
45+
| END | Moves the focus to the header of the LAST enabled step in the _igx-stepper_ |
46+
| ARROW RIGHT | Moves the focus to the header of the next accessible step in both orientations. |
47+
| ARROW LEFT | Moves the focus to the header of the previous accessible step in both orientations. |
48+
| ENTER / SPACE | Activates the currently focused step. |
49+
| CLICK | Activates the currently focused step. |
50+
51+
_By design when the user presses the **Tab** key over the step header the focus will move to the step content container. In case the container should be skipped the developer should set the content container [tabIndex]="-1"_
52+
53+
----------
54+
55+
## API Summary
56+
57+
### IgxStepperComponent
58+
59+
#### Accessors
60+
61+
**Get**
62+
63+
| Name | Description | Type |
64+
|----------------|------------------------------------------------------------------------------|---------------------|
65+
| steps | Gets the steps that are rendered in the stepper. | `IgxStepComponent[]` |
66+
67+
68+
#### Properties
69+
70+
| Name | Description | Type |
71+
|----------------|------------------------------------------------------------------------------|----------------------------------------|
72+
| id | The id of the stepper. Bound to attr.id | `string` |
73+
| orientation | Gets/sets the orientation of the stepper. Default is `horizontal`. | `IgxStepperOrientation` |
74+
| stepType| Gets/sets the type of the steps in the stepper. Default value is `full` | `IgxStepType` |
75+
| titlePosition | Gets/sets the position of the titles in the stepper. Default value is `bottom` when the stepper is horizontally orientated and `end` when the layout is set to vertical. | `IgxStepperTitlePosition` |
76+
| linear | Whether the validity of previous steps should be checked and only in case, it's valid to be able to move forward or not. Default value is `false`. | `boolean` |
77+
| contentTop| Whether the steps content should be displayed above the steps header when the stepper orientation is Horizontal. Default value is `false`. | `boolean` |
78+
| verticalAnimationType | Gets/sets the animation type of the stepper when the orientation direction is vertical. Default value is `grow`. | `VerticalAnimationType` |
79+
| horizontalAnimationType | Gets/sets the animation type of the stepper when the orientation direction is horizontal. Default value is `slide`. |`HorizontalAnimationType` |
80+
| animationDuration | 320 | `number` |
81+
82+
#### Methods
83+
| Name | Description | Parameters | Returns |
84+
|-----------------|----------------------------|-------------------------|--------|
85+
| navigateTo | Activates the step given by index. | `index: number` | `void` |
86+
| next | Activates the next enabled step. | | `void` |
87+
| prev | Activates the previous enabled step. | | `void` |
88+
| reset | Resets the stepper to its initial state. | | `void` |
89+
90+
#### Events
91+
92+
| Name | Description | Cancelable | Arguments |
93+
|----------------|-------------------------------------------------------------------------|------------|------------|
94+
| activeStepChanging | Emitted when the active step is about to change. | true | `{ oldIndex: number, newIndex: number, owner: IgxStepperComponent, cancel: boolean }` |
95+
| activeStepChanged | Emitted when the active step is changed. | false | `{ index: number, owner: IgxStepperComponent }` |
96+
### IgxStepComponent
97+
98+
#### Accessors
99+
100+
**Get**
101+
102+
| Name | Description | Type |
103+
|-----------------|-------------------------------------------------------------------------------|---------------------|
104+
| index | Gets the step index inside of the stepper. | `number` |
105+
106+
#### Properties
107+
108+
| Name | Description | Type |
109+
|-----------------|-------------------------------------------------------------------------------|---------------------|
110+
| id | The id of the step. Bound to attr.id | `string` |
111+
| disabled | Gets/sets whether the step is interactable. | `boolean` |
112+
| active | Gets/sets whether the step is activе. Two-way data binding. | `boolean` |
113+
| optional | Gets/sets whether the step is optional. | `boolean` |
114+
| complete | Gets/sets whether the step is completed. | `boolean` |
115+
| isValid | Gets/sets whether the step is valid. Default value is `true`. | `boolean` |
116+
117+
#### Events
118+
119+
| Name | Description | Cancelable | Parameters |
120+
|-----------------|-------------------------------------------------------------------------------|------------|---------|
121+
| activeChange | Emitted when the step's active property changes | false | `boolean` |
122+
123+

‎projects/igniteui-angular/src/lib/stepper/public_api.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './stepper.component';
2+
export * from './step/step.component';
3+
export * from './stepper.common';

‎projects/igniteui-angular/src/lib/stepper/step/step.component.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<ng-template #defaultTitle>
2+
<ng-content *ngIf="isTitleVisible" select='[igxStepTitle]'></ng-content>
3+
<ng-content *ngIf="isTitleVisible" select='[igxStepSubTitle]'></ng-content>
4+
</ng-template>
5+
6+
<ng-template #contentTemplate>
7+
<div [ngClass]="contentClasses" #contentContainer>
8+
<ng-content *ngIf="active || collapsing" select='[igxStepContent]'></ng-content>
9+
</div>
10+
</ng-template>
11+
12+
<ng-template #defaultIndicator>
13+
<span>{{ index + 1 }}</span>
14+
</ng-template>
15+
16+
<ng-template #customIndicator>
17+
<ng-content select='[igxStepIndicator]'></ng-content>
18+
</ng-template>
19+
20+
<div class="igx-stepper__step-header" igxRipple [ngClass]="stepHeaderClasses" (keydown)="handleKeydown($event)"
21+
(click)="onPointerDown($event)">
22+
23+
<div *ngIf="isIndicatorVisible" class="igx-stepper__step-indicator">
24+
<ng-container *ngTemplateOutlet="indicatorTemplate ? indicatorTemplate : defaultIndicator"></ng-container>
25+
</div>
26+
27+
<div class="igx-stepper__step-title-wrapper">
28+
<ng-container *ngTemplateOutlet="defaultTitle"></ng-container>
29+
</div>
30+
</div>
31+
32+
<ng-container *ngIf="!isHorizontal">
33+
<div class="igx-stepper__step-content-wrapper">
34+
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
35+
</div>
36+
</ng-container>

0 commit comments

Comments
 (0)