Merge pull request #674 from dxc-technology/aida-wizard-types

Added wizard types

Author: Jialecl

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

@@ -29,14 +29,14 @@
   <tr>
     <td>tabIndexValue: number</td>
     <td><code>0</code></td>
-    <td>Value of the tabindex that is given to all the steps.</td>
+    <td>Value of the tabindex attribute that is given to all the steps.</td>
   </tr>
   <tr>
     <td>onStepClick: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user clicks a step. The step number
-      will be passed as a parameter.
+      This event will emit in case the user clicks a step. The step number will
+      be passed as a parameter.
     </td>
   </tr>
   <tr>

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

@@ -21,8 +21,17 @@ import { WizardService } from "../services/wizard.service";
   templateUrl: "./dxc-wizard-step.component.html",
 })
 export class DxcWizardStepComponent {
+  /**
+   * Step label.
+   */
   @Input() label: string;
+  /**
+   * Description that will be placed next to the step.
+   */
   @Input() description: string;
+  /**
+   * Whether the step is disabled or not.
+   */
   @Input()
   get disabled(): boolean {
     return this._disabled;
@@ -31,6 +40,9 @@ export class DxcWizardStepComponent {
     this._disabled = coerceBooleanProperty(value);
   }
   private _disabled = false;
+  /**
+   * Whether the step is valid or not.
+   */
   @Input()
   get valid(): boolean {
     return this._valid;
@@ -228,7 +240,8 @@ export class DxcWizardStepComponent {
         .number {
           color: var(--wizard-disabledFontColor);
         }
-        .infoContainer .label, .infoContainer .description {
+        .infoContainer .label,
+        .infoContainer .description {
           color: var(--wizard-disabledFontColor);
         }
       }

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

@@ -14,26 +14,58 @@ import { CssUtils } from "../utils";
 import { DxcWizardStepComponent } from "./dxc-wizard-step/dxc-wizard-step.component";
 import { WizardService } from "./services/wizard.service";
 import { ChangeDetectorRef } from "@angular/core";
-import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { coerceNumberProperty } from "@angular/cdk/coercion";
+
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
 
 @Component({
   selector: "dxc-wizard",
   templateUrl: "./dxc-wizard.component.html",
   providers: [CssUtils, WizardService],
 })
 export class DxcWizardComponent {
-  @Input() mode: string = "horizontal";
-  @Input() currentStep: number;
-  @Input() margin: any;
+  /**
+   * The wizard can be showed in horizontal or vertical.
+   */
+  @Input() mode: "horizontal" | "vertical" = "horizontal";
+  /**
+   * Defines which step is marked as the current. The numeration starts in 0.
+   */
+  @Input() currentStep: number = 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.
+   */
+  @Input() margin: Margin | Space;
+  /**
+   * Value of the tabindex attribute that is given to all the steps.
+   */
   @Input()
   get tabIndexValue(): number {
     return this._tabIndexValue;
   }
   set tabIndexValue(value: number) {
     this._tabIndexValue = coerceNumberProperty(value);
   }
-  private _tabIndexValue;
-  @Output() onStepClick = new EventEmitter<any>();
+  private _tabIndexValue = 0;
+  /**
+   * This event will emit in case the user clicks a step. The step
+   * number will be passed as a parameter.
+   */
+  @Output() onStepClick: EventEmitter<number> = new EventEmitter<number>();
 
   @ContentChildren(DxcWizardStepComponent)
   dxcWizardSteps: QueryList<DxcWizardStepComponent>;
@@ -42,7 +74,7 @@ export class DxcWizardComponent {
 
   defaultInputs = new BehaviorSubject<any>({
     mode: "horizontal",
-    currentStep: null,
+    currentStep: 0,
     margin: null,
   });