feat(stepper): add disable step navigation setting (#1155)

Closes #902
akveo · Jan 16, 2019 · e1503cc · e1503cc
1 parent db5d214
commit e1503cc
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 1 deletion.
diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts
@@ -952,6 +952,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'StepperVerticalComponent',
         name: 'Stepper Vertical',
       },
+      {
+        path: 'stepper-disabled-step-nav.component',
+        link: '/stepper/stepper-disabled-step-nav.component',
+        component: 'StepperDisabledStepNavComponent',
+        name: 'Stepper Disabled Step Nav',
+      },
       {
         path: 'stepper-linear.component',
         link: '/stepper/stepper-linear.component',

diff --git a/src/framework/theme/components/stepper/stepper.component.html b/src/framework/theme/components/stepper/stepper.component.html
@@ -9,7 +9,8 @@
     <div *ngIf="!step.hidden" class="step"
          [class.selected]="isStepSelected(step)"
          [class.completed]="!isStepSelected(step) && step.completed"
-         (click)="step.select()">
+         [class.noninteractive]="disableStepNavigation"
+         (click)="!disableStepNavigation && step.select()">
       <div class="label-index">
         <span *ngIf="!step.completed || isStepSelected(step)">{{ index + 1 }}</span>
         <i *ngIf="!isStepSelected(step) && step.completed" class="icon nb-checkmark"></i>

diff --git a/src/framework/theme/components/stepper/stepper.component.scss b/src/framework/theme/components/stepper/stepper.component.scss
@@ -41,6 +41,9 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    &.noninteractive {
+      cursor: default;
+    }
   }
 
   .label-index {

diff --git a/src/framework/theme/components/stepper/stepper.component.ts b/src/framework/theme/components/stepper/stepper.component.ts
@@ -77,6 +77,10 @@ export enum NbStepperOrientation {
  * Stepper component has two layout options - `vertical` & `horizontal`
  * @stacked-example(Vertical, stepper/stepper-vertical.component)
  *
+ * `disableStepNavigation` disables navigation by clicking on steps, so user can navigate only using
+ * 'nbStepperPrevious' and 'nbStepperNext' buttons.
+ * @stacked-example(Disabled steps navigation, stepper/stepper-disabled-step-nav.component)
+ *
  * @styles
  *
  * stepper-index-size:
@@ -129,6 +133,19 @@ export class NbStepperComponent {
     }
   }
 
+  /**
+   * Disables navigation by clicking on steps. False by default
+   * @param {boolean} value
+   */
+  @Input()
+  set disableStepNavigation(value: boolean) {
+    this.disableStepNavigationValue = convertToBoolProperty(value);
+  }
+  get disableStepNavigation(): boolean {
+    return this.disableStepNavigationValue;
+  }
+  disableStepNavigationValue: boolean = false;
+
   /**
    * Selected step component
    *

diff --git a/src/playground/with-layout/stepper/stepper-disabled-step-nav.component.ts b/src/playground/with-layout/stepper/stepper-disabled-step-nav.component.ts
@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+    <nb-card>
+      <nb-card-body>
+        <nb-stepper orientation="horizontal" disableStepNavigation>
+          <nb-step [label]="labelOne">
+            <ng-template #labelOne>First step</ng-template>
+            <h3>Step content #1</h3>
+            <button nbButton disabled nbStepperNext>prev</button>
+            <button nbButton nbStepperNext>next</button>
+          </nb-step>
+          <nb-step [label]="labelTwo">
+            <ng-template #labelTwo>Second step</ng-template>
+            <h3>Step content #2</h3>
+            <button nbButton nbStepperPrevious>prev</button>
+            <button nbButton nbStepperNext>next</button>
+          </nb-step>
+          <nb-step label="Third step">
+            <h3>Step content #3</h3>
+            <button nbButton nbStepperPrevious>prev</button>
+            <button nbButton nbStepperNext>next</button>
+          </nb-step>
+          <nb-step [label]="labelFour">
+            <ng-template #labelFour>Fourth step</ng-template>
+            <h3>Step content #4</h3>
+            <button nbButton nbStepperPrevious>prev</button>
+            <button nbButton disabled nbStepperNext>next</button>
+          </nb-step>
+        </nb-stepper>
+      </nb-card-body>
+    </nb-card>
+
+  `,
+})
+export class StepperDisabledStepNavComponent {}
diff --git a/src/playground/with-layout/stepper/stepper-routing.module.ts b/src/playground/with-layout/stepper/stepper-routing.module.ts
@@ -10,6 +10,7 @@ import { StepperShowcaseComponent } from './stepper-showcase.component';
 import { StepperTestComponent } from './stepper-test.component';
 import { StepperValidationComponent } from './stepper-validation.component';
 import { StepperVerticalComponent } from './stepper-vertical.component';
+import { StepperDisabledStepNavComponent } from './stepper-disabled-step-nav.component';
 import { StepperLinearComponent } from './stepper-linear.component';
 
 const routes: Route[] = [
@@ -29,6 +30,10 @@ const routes: Route[] = [
     path: 'stepper-vertical.component',
     component: StepperVerticalComponent,
   },
+  {
+    path: 'stepper-disabled-step-nav.component',
+    component: StepperDisabledStepNavComponent,
+  },
   {
     path: 'stepper-linear.component',
     component: StepperLinearComponent,

diff --git a/src/playground/with-layout/stepper/stepper.module.ts b/src/playground/with-layout/stepper/stepper.module.ts
@@ -13,6 +13,7 @@ import { StepperShowcaseComponent } from './stepper-showcase.component';
 import { StepperTestComponent } from './stepper-test.component';
 import { StepperValidationComponent } from './stepper-validation.component';
 import { StepperVerticalComponent } from './stepper-vertical.component';
+import { StepperDisabledStepNavComponent } from './stepper-disabled-step-nav.component';
 import { StepperLinearComponent } from './stepper-linear.component';
 
 @NgModule({
@@ -21,6 +22,7 @@ import { StepperLinearComponent } from './stepper-linear.component';
     StepperTestComponent,
     StepperValidationComponent,
     StepperVerticalComponent,
+    StepperDisabledStepNavComponent,
     StepperLinearComponent,
   ],
   imports: [