From 5466ed580f454a9fc853e7bb7d5de128fd6ede8b Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Wed, 9 Jan 2019 19:37:17 +0300
Subject: [PATCH 1/2] feat(tabs): add `disabled` property

---
 .../_route-tabset.component.theme.scss        | 15 +++++++++++-
 .../route-tabset/route-tabset.component.scss  |  1 -
 .../route-tabset/route-tabset.component.ts    | 14 +++++++----
 .../tabset/_tabset.component.theme.scss       | 13 +++++++++++
 .../components/tabset/tabset.component.scss   |  1 -
 .../components/tabset/tabset.component.ts     | 23 +++++++++++++++++--
 .../theme/styles/themes/_default.scss         |  2 ++
 .../tabset/route-tabset-showcase.component.ts |  6 +++++
 .../tabset/tabset-showcase.component.html     |  2 +-
 9 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
index 80bdfbc88a..a5ff6d6edb 100644
--- a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
+++ b/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,19 @@
             }
           }
         }
+
+
+        &.disabled {
+          pointer-events: none;
+          cursor: default;
+          a {
+            color: nb-theme(route-tabs-fg-disabled);
+            cursor: default;
+            &:hover {
+              color: nb-theme(route-tabs-fg-disabled);
+            }
+          }
+        }
       }
     }
   }
diff --git a/src/framework/theme/components/route-tabset/route-tabset.component.scss b/src/framework/theme/components/route-tabset/route-tabset.component.scss
index c7c992b6fd..fb30b44a16 100644
--- a/src/framework/theme/components/route-tabset/route-tabset.component.scss
+++ b/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;
 
diff --git a/src/framework/theme/components/route-tabset/route-tabset.component.ts b/src/framework/theme/components/route-tabset/route-tabset.component.ts
index 25406c1c0e..9f91cf50a7 100644
--- a/src/framework/theme/components/route-tabset/route-tabset.component.ts
+++ b/src/framework/theme/components/route-tabset/route-tabset.component.ts
@@ -70,8 +70,11 @@ import { convertToBoolProperty } from '../helpers';
           routerLinkActive="active"
           [routerLinkActiveOptions]="{ exact: true }"
           [class.responsive]="tab.responsive"
+          [class.disabled]="tab.disabled"
+          [attr.disabled]="tab.disabled"
+          [attr.aria-disabled]="tab.disabled"
           class="route-tab">
-        <a href>
+        <a href (click)="$event.preventDefault()">
           <i *ngIf="tab.icon" [class]="tab.icon"></i>
           <span *ngIf="tab.title">{{ tab.title }}</span>
         </a>
@@ -86,7 +89,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 +112,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]);
+    }
   }
 }
diff --git a/src/framework/theme/components/tabset/_tabset.component.theme.scss b/src/framework/theme/components/tabset/_tabset.component.theme.scss
index 4c7185fc91..408aa86d58 100644
--- a/src/framework/theme/components/tabset/_tabset.component.theme.scss
+++ b/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,18 @@
             }
           }
         }
+
+        &.disabled {
+          cursor: default;
+          a {
+            color: nb-theme(tabs-fg-disabled);
+            cursor: default;
+            pointer-events: none;
+            &:hover {
+              color: nb-theme(tabs-fg-disabled);
+            }
+          }
+        }
       }
     }
 
diff --git a/src/framework/theme/components/tabset/tabset.component.scss b/src/framework/theme/components/tabset/tabset.component.scss
index f5f9084eb5..13a6f5d206 100644
--- a/src/framework/theme/components/tabset/tabset.component.scss
+++ b/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;
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 22e3a35178..193a6b5349 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/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
@@ -201,6 +215,9 @@ export class NbTabComponent {
           (click)="selectTab(tab)"
           [class.responsive]="tab.responsive"
           [class.active]="tab.active"
+          [class.disabled]="tab.disabled"
+          [attr.disabled]="tab.disabled"
+          [attr.aria-disabled]="tab.disabled"
           class="tab">
         <a href (click)="$event.preventDefault()">
           <i *ngIf="tab.tabIcon" [class]="tab.tabIcon"></i>
@@ -266,7 +283,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);
+    }
   }
 }
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index df32a229d8..4678a4d95a 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/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,
diff --git a/src/playground/with-layout/tabset/route-tabset-showcase.component.ts b/src/playground/with-layout/tabset/route-tabset-showcase.component.ts
index 634903a139..a97ee67838 100644
--- a/src/playground/with-layout/tabset/route-tabset-showcase.component.ts
+++ b/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,
+    },
   ];
 }
diff --git a/src/playground/with-layout/tabset/tabset-showcase.component.html b/src/playground/with-layout/tabset/tabset-showcase.component.html
index 7513621a18..ee2663aaf4 100644
--- a/src/playground/with-layout/tabset/tabset-showcase.component.html
+++ b/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>

From 7cf33acec2ecf70c39c8a6c612df6053417b5c9b Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Thu, 10 Jan 2019 18:02:08 +0300
Subject: [PATCH 2/2] fix(tabs): fix styles and attribues, add examples

---
 src/app/playground-components.ts              |  6 ++++++
 .../_route-tabset.component.theme.scss        |  1 +
 .../route-tabset/route-tabset.component.ts    |  5 ++---
 .../tabset/_tabset.component.theme.scss       |  1 +
 .../components/tabset/tabset.component.ts     |  8 +++++---
 .../tabset/tabset-disabled.component.html     | 16 +++++++++++++++
 .../tabset/tabset-disabled.component.ts       | 20 +++++++++++++++++++
 .../tabset/tabset-routing.module.ts           |  5 +++++
 .../with-layout/tabset/tabset.module.ts       |  2 ++
 9 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 src/playground/with-layout/tabset/tabset-disabled.component.html
 create mode 100644 src/playground/with-layout/tabset/tabset-disabled.component.ts

diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts
index 5d0eb266ef..f1d8bdd904 100644
--- a/src/app/playground-components.ts
+++ b/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',
+      },
     ],
   },
   {
diff --git a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
index a5ff6d6edb..a320ab07d4 100644
--- a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
+++ b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
@@ -65,6 +65,7 @@
           a {
             color: nb-theme(route-tabs-fg-disabled);
             cursor: default;
+            pointer-events: none;
             &:hover {
               color: nb-theme(route-tabs-fg-disabled);
             }
diff --git a/src/framework/theme/components/route-tabset/route-tabset.component.ts b/src/framework/theme/components/route-tabset/route-tabset.component.ts
index 9f91cf50a7..ef28481fd6 100644
--- a/src/framework/theme/components/route-tabset/route-tabset.component.ts
+++ b/src/framework/theme/components/route-tabset/route-tabset.component.ts
@@ -71,10 +71,9 @@ import { convertToBoolProperty } from '../helpers';
           [routerLinkActiveOptions]="{ exact: true }"
           [class.responsive]="tab.responsive"
           [class.disabled]="tab.disabled"
-          [attr.disabled]="tab.disabled"
-          [attr.aria-disabled]="tab.disabled"
+          [attr.tabindex]="tab.disabled ? -1 : 0"
           class="route-tab">
-        <a href (click)="$event.preventDefault()">
+        <a href (click)="$event.preventDefault()" tabindex="-1">
           <i *ngIf="tab.icon" [class]="tab.icon"></i>
           <span *ngIf="tab.title">{{ tab.title }}</span>
         </a>
diff --git a/src/framework/theme/components/tabset/_tabset.component.theme.scss b/src/framework/theme/components/tabset/_tabset.component.theme.scss
index 408aa86d58..fa6a9a6f1f 100644
--- a/src/framework/theme/components/tabset/_tabset.component.theme.scss
+++ b/src/framework/theme/components/tabset/_tabset.component.theme.scss
@@ -63,6 +63,7 @@
 
         &.disabled {
           cursor: default;
+          pointer-events: none;
           a {
             color: nb-theme(tabs-fg-disabled);
             cursor: default;
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 193a6b5349..a367ed9f71 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -186,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:
@@ -216,10 +219,9 @@ export class NbTabComponent {
           [class.responsive]="tab.responsive"
           [class.active]="tab.active"
           [class.disabled]="tab.disabled"
-          [attr.disabled]="tab.disabled"
-          [attr.aria-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>
diff --git a/src/playground/with-layout/tabset/tabset-disabled.component.html b/src/playground/with-layout/tabset/tabset-disabled.component.html
new file mode 100644
index 0000000000..969e4e0d00
--- /dev/null
+++ b/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>
diff --git a/src/playground/with-layout/tabset/tabset-disabled.component.ts b/src/playground/with-layout/tabset/tabset-disabled.component.ts
new file mode 100644
index 0000000000..fb27f8ead6
--- /dev/null
+++ b/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 {
+}
diff --git a/src/playground/with-layout/tabset/tabset-routing.module.ts b/src/playground/with-layout/tabset/tabset-routing.module.ts
index 9444af921e..bcad1bba3b 100644
--- a/src/playground/with-layout/tabset/tabset-routing.module.ts
+++ b/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({
diff --git a/src/playground/with-layout/tabset/tabset.module.ts b/src/playground/with-layout/tabset/tabset.module.ts
index 0eb584d61e..dc0a1d5c0b 100644
--- a/src/playground/with-layout/tabset/tabset.module.ts
+++ b/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,