[Minor] Added new prop defaultCurrentStep in wizard

projects/dxc-ngx-cdk-site/src/app/components/examples/wizard/properties/wizard-table-properties/wizard-table-properties.component.html

@@ -26,6 +26,13 @@
       Defines which step is marked as the current. The numeration starts in 0.
     </td>
   </tr>
+  <tr>
+    <td>defaultCurrentStep: number</td>
+    <td>
+      <code></code>
+    </td>
+    <td>Initially selected step, only when it is uncontrolled.</td>
+  </tr>
   <tr>
     <td>tabIndexValue: number</td>
     <td><code>0</code></td>

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/wizard-preview/wizard-preview.component.html

@@ -1,5 +1,5 @@
 <tbuilder-component-mode text="Default">
-  <dxc-wizard margin="xsmall">
+  <dxc-wizard margin="xsmall" defaultCurrentStep="2">
     <dxc-wizard-step
       label="First step"
       description="Not validated step"
@@ -22,6 +22,19 @@
   </dxc-wizard>
 </tbuilder-component-mode>
 
+<tbuilder-component-mode text="With onStep function">
+  <dxc-wizard
+    (onStepClick)="onStepClick($event)"
+    margin="xsmall"
+    [currentStep]="current"
+  >
+    <dxc-wizard-step label="First step"></dxc-wizard-step>
+    <dxc-wizard-step label="Second step"></dxc-wizard-step>
+    <dxc-wizard-step label="Third step"></dxc-wizard-step>
+    <dxc-wizard-step label="Forth step" valid="false"></dxc-wizard-step>
+  </dxc-wizard>
+</tbuilder-component-mode>
+
 <tbuilder-component-mode text="Icons">
   <dxc-wizard margin="xsmall">
     <dxc-wizard-step

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/wizard-preview/wizard-preview.component.ts

@@ -1,14 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
 
 @Component({
-  selector: 'app-wizard-preview',
-  templateUrl: './wizard-preview.component.html'
+  selector: "app-wizard-preview",
+  templateUrl: "./wizard-preview.component.html",
 })
 export class WizardPreviewComponent implements OnInit {
+  current = 0;
+  constructor() {}
 
-  constructor() { }
+  ngOnInit(): void {}
 
-  ngOnInit(): void {
+  onStepClick(value) {
+    this.current = value;
+    console.log(value);
   }
-
 }

projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard-step/dxc-wizard-step.component.ts

@@ -153,8 +153,8 @@ export class DxcWizardStepComponent {
           : "0 0 0 24px"} !important;
         &:focus {
           margin: ${inputs.mode === "vertical"
-            ? "24px 1px 1px 1px"
-            : "1px 1px 1px 24px"} !important;
+            ? "24px 0px 0px 0px"
+            : "0px 0px 0px 24px"} !important;
         }
       }
       .first {
@@ -163,8 +163,8 @@ export class DxcWizardStepComponent {
           : "0 24px 0 0"} !important;
         &:focus {
           margin: ${inputs.mode === "vertical"
-            ? "1px 1px 24px 1px"
-            : "1px 24px 1px 1px"} !important;
+            ? "0px 0px 24px 0px"
+            : "0px 24px 0px 0px"} !important;
         }
       }
       .step {
@@ -176,12 +176,10 @@ export class DxcWizardStepComponent {
         margin: ${inputs.mode === "vertical" ? "24px 0" : "0 24px"};
         padding: 0px;
         ${inputs.disabled ? "cursor: not-allowed;" : ""}
-        outline-color: var(--wizard-focusColor);
+        margin: ${inputs.mode === "vertical" ? "24px 1px" : "1px 24px"};
         &:focus {
-          padding: 2px;
-          outline: -webkit-focus-ring-color auto 1px;
-          margin: ${inputs.mode === "vertical" ? "24px 1px" : "1px 24px"};
-          outline-color: var(--wizard-focusColor);
+          outline: var(--wizard-focusColor) auto 1px;
+          outline-offset: 2px;
         }
         &:hover {
           ${inputs.disabled ? "" : "cursor: pointer;"}

projects/dxc-ngx-cdk/src/lib/dxc-wizard/dxc-wizard.component.ts

@@ -28,9 +28,28 @@ export class DxcWizardComponent {
    */
   @Input() mode: "horizontal" | "vertical" = "horizontal";
   /**
-   * Defines which step is marked as the current. The numeration starts in 0.
+   * Defines which step is marked as the current. The numeration starts at 0.
+   * If undefined, the component will be uncontrolled and the step will be managed internally by the component.
    */
-  @Input() currentStep: number = 0;
+  @Input()
+  get currentStep(): number {
+    return this._currentStep;
+  }
+  set currentStep(value: number) {
+    this._currentStep = coerceNumberProperty(value);
+  }
+  private _currentStep = 0;
+  /**
+   * Initially selected step, only when it is uncontrolled.
+   */
+  @Input()
+  get defaultCurrentStep(): number {
+    return this._defaultCurrentStep;
+  }
+  set defaultCurrentStep(value: number) {
+    this._defaultCurrentStep = coerceNumberProperty(value);
+  }
+  private _defaultCurrentStep = 0;
   /**
    * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
    * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
@@ -73,6 +92,7 @@ export class DxcWizardComponent {
 
   ngAfterViewInit(): void {
     this.service.setSteps(this.dxcWizardSteps);
+    this.service.innerCurrentStep.next(this.currentStep);
     this.service.newCurrentStep.subscribe((value) => {
       if (value || value === 0) {
         this.handleStepClick(value);
@@ -86,7 +106,10 @@ export class DxcWizardComponent {
 
   ngOnInit() {
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
-    this.service.innerCurrentStep.next(this.currentStep || 0);
+    this.currentStep = this.currentStep
+      ? this.currentStep
+      : this.defaultCurrentStep ?? 0;
+    this.service.innerCurrentStep.next(this.currentStep);
     this.service.mode.next(this.mode || "horizontal");
     this.service.tabIndexValue.next(this.tabIndexValue);
   }
@@ -105,9 +128,7 @@ export class DxcWizardComponent {
   }
 
   public handleStepClick(i) {
-    if (!(this.currentStep || this.currentStep === 0)) {
-      this.service.innerCurrentStep.next(i);
-    }
+    this.service.innerCurrentStep.next(i);
     this.onStepClick.emit(i);
   }
 

projects/dxc-ngx-cdk/src/lib/dxc-wizard/services/wizard.service.ts

@@ -17,9 +17,9 @@ export class WizardService {
   public tabIndexValue: BehaviorSubject<number> = new BehaviorSubject(0);
 
   constructor() {
-    this.innerCurrentStep.subscribe((newCurrent) => {
+    this.innerCurrentStep.subscribe((newCurrent: number) => {
       if (this.steps && (newCurrent || newCurrent === 0)) {
-        this.steps.forEach((element, index) => {
+        this.steps.forEach((element: DxcWizardStepComponent, index: number) => {
           element.setIsCurrent(index === newCurrent, newCurrent);
         });
       }
@@ -33,7 +33,10 @@ export class WizardService {
         element.isFirst = index === 0;
         element.setIsLast(index === this.steps.length - 1);
         element.position = index;
-        element.setIsCurrent(index === this.innerCurrentStep.value, this.innerCurrentStep.value);
+        element.setIsCurrent(
+          index === this.innerCurrentStep.value,
+          this.innerCurrentStep.value
+        );
       });
     }
   }