diff --git a/packages/oui-stepper/README.md b/packages/oui-stepper/README.md
index 468edea8..b817a5a1 100644
--- a/packages/oui-stepper/README.md
+++ b/packages/oui-stepper/README.md
@@ -98,6 +98,24 @@
```
+### Open Steps
+
+```html:preview
+
+
+ Random content
+
+
+
+ Go to Step 1
+
+
+
+```
+
### Events on `oui-stepper`
**Note**: If you want to access the forms inside `on-finish` callback, you need to use the `forms` variable as below.
@@ -154,6 +172,7 @@
| ---- | ---- | ---- | ---- | ---- | ---- | ----
| `name` | string | @? | yes | n/a | n/a | stepper name used to identify step
| `id` | string | @? | yes | n/a | n/a | stepper id used to identify step
+| `current-index` | number | =? | no | n/a | 0 | current step index
| `on-init` | function | & | no | n/a | n/a | initialization function
| `on-finish` | function | & | no | n/a | n/a | submit all steps function
diff --git a/packages/oui-stepper/src/index.spec.js b/packages/oui-stepper/src/index.spec.js
index a135172d..afc7890d 100644
--- a/packages/oui-stepper/src/index.spec.js
+++ b/packages/oui-stepper/src/index.spec.js
@@ -230,6 +230,33 @@ describe("ouiStepper", () => {
expect(form2.hasClass(disabledClass)).toBe(false);
expect(form3.hasClass(disabledClass)).toBe(true);
});
+
+ it("should open designated step", () => {
+ const element = TestUtils.compileTemplate(`
+
+
+
+
+ `, { index: 1 });
+
+ $timeout.flush();
+
+ const form1 = element.find("form").eq(0);
+ const form2 = element.find("form").eq(1);
+ const form3 = element.find("form").eq(2);
+
+ expect(form1.scope().$ctrl.stepper.focused).toBe(false);
+ expect(form2.scope().$ctrl.stepper.focused).toBe(true);
+ expect(form3.scope().$ctrl.stepper.focused).toBe(false);
+
+ element.scope().$ctrl.index = 2;
+
+ element.scope().$digest();
+
+ expect(form1.scope().$ctrl.stepper.focused).toBe(false);
+ expect(form2.scope().$ctrl.stepper.focused).toBe(false);
+ expect(form3.scope().$ctrl.stepper.focused).toBe(true);
+ });
});
});
});
diff --git a/packages/oui-stepper/src/stepper.component.js b/packages/oui-stepper/src/stepper.component.js
index e0c7b8ec..c6c091e5 100644
--- a/packages/oui-stepper/src/stepper.component.js
+++ b/packages/oui-stepper/src/stepper.component.js
@@ -6,7 +6,8 @@ export default {
name: "@",
id: "@",
onInit: "&",
- onFinish: "&"
+ onFinish: "&",
+ currentIndex: "=?"
},
controller,
template,
diff --git a/packages/oui-stepper/src/stepper.controller.js b/packages/oui-stepper/src/stepper.controller.js
index 31edb0c2..4a50bddc 100644
--- a/packages/oui-stepper/src/stepper.controller.js
+++ b/packages/oui-stepper/src/stepper.controller.js
@@ -1,16 +1,19 @@
+import get from "lodash/get";
+
export default class {
- constructor ($attrs, $element, $timeout) {
+ constructor ($attrs, $element, $scope, $timeout) {
"ngInject";
this.$attrs = $attrs;
this.$element = $element;
+ this.$scope = $scope;
this.$timeout = $timeout;
}
$onInit () {
this.forms = [];
this.steps = [];
- this.currentIndex = 0;
+ this.currentIndex = get(this, "currentIndex", 0);
this.onInit();
}
@@ -21,6 +24,11 @@ export default class {
.removeAttr("name")
.addClass("oui-stepper")
);
+
+ this.$scope.$watch(
+ () => this.currentIndex,
+ (index) => this.focusStep(index)
+ );
}
addStep (step) {