diff --git a/projects/angular/src/accordion/stepper/_stepper.clarity.scss b/projects/angular/src/accordion/stepper/_stepper.clarity.scss
index f40f82c2c8..0ed2b75932 100644
--- a/projects/angular/src/accordion/stepper/_stepper.clarity.scss
+++ b/projects/angular/src/accordion/stepper/_stepper.clarity.scss
@@ -104,7 +104,6 @@
}
.clr-step-button {
- display: inline-block;
margin-top: tokens.$cds-global-space-9;
margin-right: tokens.$cds-global-space-6;
}
diff --git a/projects/demo/src/app/stepper/stepper.demo.html b/projects/demo/src/app/stepper/stepper.demo.html
index 39aa22f575..46641a142b 100644
--- a/projects/demo/src/app/stepper/stepper.demo.html
+++ b/projects/demo/src/app/stepper/stepper.demo.html
@@ -31,7 +31,7 @@
Stepper with a nested accordion inside it
Accordion 2 content
-
+
diff --git a/projects/demo/src/app/stepper/stepper.demo.ts b/projects/demo/src/app/stepper/stepper.demo.ts
index 95b5033e0b..34b0161619 100644
--- a/projects/demo/src/app/stepper/stepper.demo.ts
+++ b/projects/demo/src/app/stepper/stepper.demo.ts
@@ -7,12 +7,15 @@
import { Component, ElementRef, inject, ViewChild } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ClrLoadingState } from '@clr/angular';
@Component({
templateUrl: 'stepper.demo.html',
styleUrls: ['./stepper.demo.scss'],
})
export class StepperDemo {
+ state: ClrLoadingState = ClrLoadingState.DEFAULT;
+
showSecondStep = true;
initialStep = 'name';
form: FormGroup = this.getReactiveForm();
@@ -36,6 +39,13 @@ export class StepperDemo {
};
loading = false;
+ loadingDemo() {
+ this.state = ClrLoadingState.LOADING;
+ setTimeout(() => {
+ this.state = ClrLoadingState.SUCCESS;
+ }, 1500);
+ }
+
submit() {
console.log('reactive form submit', this.form.value);
}