diff --git a/packages/oui-button/src/button.html b/packages/oui-button/src/button.html
index 1106a01d..ef95d5c2 100644
--- a/packages/oui-button/src/button.html
+++ b/packages/oui-button/src/button.html
@@ -16,7 +16,7 @@
>
- {{::$ctrl.text}}
+ {{$ctrl.text}}
diff --git a/packages/oui-stepper/README.md b/packages/oui-stepper/README.md
index 78864fca..a3ccda0d 100644
--- a/packages/oui-stepper/README.md
+++ b/packages/oui-stepper/README.md
@@ -167,13 +167,14 @@
| `description` | string | @? | yes | n/a | n/a | description of the step
| `cancel-href` | string | @? | yes | n/a | n/a | link url on cancel
| `cancel-text` | string | @? | yes | n/a | n/a | text for the cancel button
-| `submit-text` | string | @? | yes | n/a | `Submit` | text for the submit button
+| `submit-text` | string | @? | no | n/a | `Submit` | text for the submit button
| `loading-text` | string | @? | no | n/a | n/a | text for the loading state
| `loading` | boolean | | no | `true`, `false` | `false` | display the loading state
| `disabled` | boolean | | no | `true`, `false` | `false` | disable the step and shrink it
| `navigation` | boolean | | no | `true`, `false` | `true` | show the navigation buttons
| `skippable` | boolean | | no | `true`, `false` | `false` | add button to skip facultative step
| `valid` | boolean | | no | `true`, `false` | `true` | custom validation for the form
+| `position` | number | @? | no | n/a | n/a | position where to insert step if used with ngIf
| `on-cancel` | function | &? | no | n/a | n/a | cancel step function
| `on-focus` | function | & | no | n/a | n/a | focused step function
| `on-submit` | function | & | no | n/a | n/a | submit step function
diff --git a/packages/oui-stepper/src/index.spec.js b/packages/oui-stepper/src/index.spec.js
index 4cd8b78b..8d85123d 100644
--- a/packages/oui-stepper/src/index.spec.js
+++ b/packages/oui-stepper/src/index.spec.js
@@ -152,6 +152,38 @@ describe("ouiStepper", () => {
// Final condition
expect(form2.hasClass(disabledClass)).toBe(false);
});
+
+ it("should display dynamically steps", () => {
+ const element = TestUtils.compileTemplate(`
+
+
+
+
+ `, { isForm2: false });
+
+ $timeout.flush();
+
+ // it should be 2 forms
+ expect(element.find("form").length).toBe(2);
+
+ element.scope().$ctrl.isForm2 = true;
+
+ element.scope().$digest();
+
+ // it should be 3 forms
+ expect(element.find("form").length).toBe(3);
+
+ const form1 = element.find("form").eq(0);
+ const form2 = element.find("form").eq(1);
+ const form3 = element.find("form").eq(2);
+
+ // submit the form and be sure that second form is active
+ element.find("form").eq(0).triggerHandler("submit");
+ element.scope().$digest();
+ expect(form1.hasClass(completeClass)).toBe(true);
+ expect(form2.hasClass(disabledClass)).toBe(false);
+ expect(form3.hasClass(disabledClass)).toBe(true);
+ });
});
});
});
diff --git a/packages/oui-stepper/src/step-form/step-form.component.js b/packages/oui-stepper/src/step-form/step-form.component.js
index 66adfbdf..374332d0 100644
--- a/packages/oui-stepper/src/step-form/step-form.component.js
+++ b/packages/oui-stepper/src/step-form/step-form.component.js
@@ -21,6 +21,7 @@ export default {
navigation: "",
skippable: "",
valid: "",
+ position: "@?",
onCancel: "&?",
onFocus: "&",
diff --git a/packages/oui-stepper/src/step-form/step-form.controller.js b/packages/oui-stepper/src/step-form/step-form.controller.js
index fa689b80..3d260915 100644
--- a/packages/oui-stepper/src/step-form/step-form.controller.js
+++ b/packages/oui-stepper/src/step-form/step-form.controller.js
@@ -51,6 +51,12 @@ export default class StepFormController {
);
}
+ $onDestroy () {
+ if (this.stepperCtrl) {
+ this.stepperCtrl.removeStep(this);
+ }
+ }
+
onFormSubmit (form) {
if (form.$valid && this.valid) {
this.onSubmit({ form });
diff --git a/packages/oui-stepper/src/step-form/step-form.html b/packages/oui-stepper/src/step-form/step-form.html
index 30ea02fc..548e590b 100644
--- a/packages/oui-stepper/src/step-form/step-form.html
+++ b/packages/oui-stepper/src/step-form/step-form.html
@@ -45,7 +45,7 @@
ng-if="$ctrl.navigation"
ng-show="!$ctrl.loading && $ctrl.stepper.focused">
+ text="{{$ctrl.submitText || ($ctrl.stepper.last ? $ctrl.translations.submitButtonLabel : $ctrl.translations.nextButtonLabel)}}">
-1) {
+ this.steps.splice(indexOfStep, 1);
+ }
+ }
+
addForm (form, index) {
this.forms[index] = form;
this.nextStep();