feat(tabs): add disabled property

src/app/playground-components.ts

@@ -1013,6 +1013,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'TabsetWidthComponent',
         name: 'Tabset Width',
       },
+      {
+        path: 'tabset-disabled.component',
+        link: '/tabset/tabset-disabled.component',
+        component: 'TabsetDisabledComponent',
+        name: 'Tabset Disabled',
+      },
     ],
   },
   {

src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss

@@ -22,7 +22,7 @@
       .route-tab {
         background: nb-theme(route-tabs-header-bg);
         min-width: nb-theme(route-tabs-header-min-width);
-
+        cursor: pointer;
         a {
           padding: nb-theme(route-tabs-padding);
           color: nb-theme(route-tabs-fg);
@@ -57,6 +57,20 @@
             }
           }
         }
+
+
+        &.disabled {
+          pointer-events: none;
+          cursor: default;
+          a {
+            color: nb-theme(route-tabs-fg-disabled);
+            cursor: default;
+            pointer-events: none;
+            &:hover {
+              color: nb-theme(route-tabs-fg-disabled);
+            }
+          }
+        }
       }
     }
   }

src/framework/theme/components/route-tabset/route-tabset.component.scss

@@ -13,7 +13,6 @@
   margin: 0;
 
   .route-tab {
-    cursor: pointer;
     margin-bottom: -1px;
     text-align: center;
 

src/framework/theme/components/route-tabset/route-tabset.component.ts

@@ -70,8 +70,10 @@ import { convertToBoolProperty } from '../helpers';
           routerLinkActive="active"
           [routerLinkActiveOptions]="{ exact: true }"
           [class.responsive]="tab.responsive"
+          [class.disabled]="tab.disabled"
+          [attr.tabindex]="tab.disabled ? -1 : 0"
           class="route-tab">
-        <a href>
+        <a href (click)="$event.preventDefault()" tabindex="-1">
           <i *ngIf="tab.icon" [class]="tab.icon"></i>
           <span *ngIf="tab.title">{{ tab.title }}</span>
         </a>
@@ -86,7 +88,7 @@ export class NbRouteTabsetComponent {
 
   /**
    * Tabs configuration
-   * @param Object{route: string, title: string, tag?: string}
+   * @param Object{route: string, title: string, tag?: string, responsive?: boolean, disabled?: boolean}
    */
   @Input() tabs: any[];
 
@@ -109,8 +111,9 @@ export class NbRouteTabsetComponent {
   }
 
   selectTab(tab: any) {
-    this.changeTab.emit(tab);
-
-    this.router.navigate([tab.route]);
+    if (!tab.disabled) {
+      this.changeTab.emit(tab);
+      this.router.navigate([tab.route]);
+    }
   }
 }

src/framework/theme/components/tabset/_tabset.component.theme.scss

@@ -22,6 +22,7 @@
 
       .tab {
         background: nb-theme(tabs-header-bg);
+        cursor: pointer;
 
         a {
           padding: nb-theme(tabs-padding);
@@ -59,6 +60,19 @@
             }
           }
         }
+
+        &.disabled {
+          cursor: default;
+          pointer-events: none;
+          a {
+            color: nb-theme(tabs-fg-disabled);
+            cursor: default;
+            pointer-events: none;
+            &:hover {
+              color: nb-theme(tabs-fg-disabled);
+            }
+          }
+        }
       }
     }
 

src/framework/theme/components/tabset/tabset.component.scss

@@ -31,7 +31,6 @@
     margin: 0;
 
     .tab {
-      cursor: pointer;
       margin-bottom: -1px;
       text-align: center;
       position: relative;

src/framework/theme/components/tabset/tabset.component.ts

@@ -53,6 +53,19 @@ export class NbTabComponent {
    */
   @Input() tabIcon: string;
 
+  /**
+   * Item is disabled and cannot be opened.
+   * @type {boolean}
+   */
+  @Input('disabled')
+  @HostBinding('class.disabled')
+  get disabled(): boolean {
+    return this.disabledValue;
+  }
+  set disabled(val: boolean) {
+    this.disabledValue = convertToBoolProperty(val);
+  }
+
   /**
    * Show only icons when width is smaller than `tabs-icon-only-max-width`
    * @type {boolean}
@@ -72,6 +85,7 @@ export class NbTabComponent {
   activeValue: boolean = false;
 
   responsiveValue: boolean = false;
+  disabledValue = false;
 
   /**
    * Specifies active tab
@@ -172,6 +186,9 @@ export class NbTabComponent {
  *
  * @stacked-example(Icon, tabset/tabset-icon.component)
  *
+ * It is also possible to disable a tab using `disabled` property:
+ * @stacked-example(Disabled Tab, tabset/tabset-disabled.component)
+ *
  * @styles
  *
  * tabs-font-family:
@@ -201,8 +218,10 @@ export class NbTabComponent {
           (click)="selectTab(tab)"
           [class.responsive]="tab.responsive"
           [class.active]="tab.active"
+          [class.disabled]="tab.disabled"
+          [attr.tabindex]="tab.disabled ? -1 : 0"
           class="tab">
-        <a href (click)="$event.preventDefault()">
+        <a href (click)="$event.preventDefault()" tabindex="-1">
           <i *ngIf="tab.tabIcon" [class]="tab.tabIcon"></i>
           <span *ngIf="tab.tabTitle">{{ tab.tabTitle }}</span>
         </a>
@@ -266,7 +285,9 @@ export class NbTabsetComponent implements AfterContentInit {
 
   // TODO: navigate to routeParam
   selectTab(selectedTab: NbTabComponent) {
-    this.tabs.forEach(tab => tab.active = tab === selectedTab);
-    this.changeTab.emit(selectedTab);
+    if (!selectedTab.disabled) {
+      this.tabs.forEach(tab => tab.active = tab === selectedTab);
+      this.changeTab.emit(selectedTab);
+    }
   }
 }

src/framework/theme/styles/themes/_default.scss

@@ -206,6 +206,7 @@ $theme: (
   tabs-header-bg: transparent,
   tabs-separator: separator,
   tabs-fg: color-fg,
+  tabs-fg-disabled: tabs-fg,
   tabs-fg-text: color-fg-text,
   tabs-fg-heading: color-fg-heading,
   tabs-bg: transparent,
@@ -222,6 +223,7 @@ $theme: (
   route-tabs-header-bg: transparent,
   route-tabs-separator: separator,
   route-tabs-fg: color-fg,
+  route-tabs-fg-disabled: route-tabs-fg,
   route-tabs-fg-heading: color-fg-heading,
   route-tabs-bg: transparent,
   route-tabs-selected: color-success,

src/playground/with-layout/tabset/route-tabset-showcase.component.ts

@@ -35,5 +35,11 @@ export class RouteTabsetShowcaseComponent {
       responsive: true,
       route: '/tabset/route-tabset-showcase.component/tab2',
     },
+    {
+      title: 'Transaction',
+      icon: 'nb-notifications',
+      responsive: true,
+      disabled: true,
+    },
   ];
 }

src/playground/with-layout/tabset/tabset-disabled.component.html

@@ -0,0 +1,16 @@
+<nb-card>
+  <nb-card-body>
+
+    <nb-tabset>
+      <nb-tab tabTitle="Users">
+        <p>List of <strong>users</strong>.</p>
+      </nb-tab>
+      <nb-tab tabTitle="Orders">
+        <p>List of <strong>orders</strong>.</p>
+      </nb-tab>
+      <nb-tab tabTitle="Disabled Tab" disabled>
+      </nb-tab>
+    </nb-tabset>
+
+  </nb-card-body>
+</nb-card>

src/playground/with-layout/tabset/tabset-disabled.component.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-tabset-disabled',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './tabset-disabled.component.html',
+  styles: [`
+    :host nb-tab {
+      padding: 1.25rem;
+    }
+  `],
+})
+export class TabsetDisabledComponent {
+}

src/playground/with-layout/tabset/tabset-routing.module.ts

@@ -16,6 +16,7 @@ import { TabsetIconComponent } from './tabset-icon.component';
 import { TabsetShowcaseComponent } from './tabset-showcase.component';
 import { TabsetTestComponent } from './tabset-test.component';
 import { TabsetWidthComponent } from './tabset-width.component';
+import { TabsetDisabledComponent } from './tabset-disabled.component';
 
 const routes: Route[] = [
   {
@@ -61,6 +62,10 @@ const routes: Route[] = [
     path: 'tabset-width.component',
     component: TabsetWidthComponent,
   },
+  {
+    path: 'tabset-disabled.component',
+    component: TabsetDisabledComponent,
+  },
 ];
 
 @NgModule({

src/playground/with-layout/tabset/tabset-showcase.component.html

@@ -8,7 +8,7 @@
       <nb-tab tabTitle="Orders">
         <p>List of <strong>orders</strong>.</p>
       </nb-tab>
-      <nb-tab tabTitle="Transactions">
+      <nb-tab tabTitle="Transactions" disabled>
         <p>List of <strong>transactions</strong>.</p>
       </nb-tab>
     </nb-tabset>

src/playground/with-layout/tabset/tabset.module.ts

@@ -17,6 +17,7 @@ import {
   RouteTabsetShowcaseChild1Component,
   RouteTabsetShowcaseChild2Component,
 } from './components/route-tabset-children.component';
+import { TabsetDisabledComponent } from './tabset-disabled.component';
 
 @NgModule({
   declarations: [
@@ -28,6 +29,7 @@ import {
     TabsetWidthComponent,
     RouteTabsetShowcaseChild1Component,
     RouteTabsetShowcaseChild2Component,
+    TabsetDisabledComponent,
   ],
   imports: [
     NbTabsetModule,