fix(tabs): decompose manual selection section (#3547)

Decompose Manual selection to Manual and Disable selection close #3545
valor-software · Mar 1, 2018 · 6c9afd9 · 6c9afd9
1 parent e52b896
commit 6c9afd9
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 10 deletions.
diff --git a/demo/src/app/components/+tabs/demos/disable/disable.html b/demo/src/app/components/+tabs/demos/disable/disable.html
@@ -0,0 +1,15 @@
+<div>
+  <p>Switching Enable/Disable tab</p>
+  <p>
+    <button type="button" class="btn btn-primary btn-sm" (click)="disableEnable()">
+      Enable / Disable third tab
+    </button>
+  </p>
+  <hr/>
+  <tabset #staticTabs>
+    <tab heading="Static title">Static content</tab>
+    <tab heading="Static Title 1">Static content 1</tab>
+    <tab heading="Static Title 2">Static content 2</tab>
+    <tab heading="Static Title 3">Static content 3</tab>
+  </tabset>
+</div>
diff --git a/demo/src/app/components/+tabs/demos/disable/disable.ts b/demo/src/app/components/+tabs/demos/disable/disable.ts
@@ -0,0 +1,14 @@
+import { Component, ViewChild } from '@angular/core';
+import { TabsetComponent } from 'ngx-bootstrap';
+
+@Component({
+  selector: 'demo-tabs-disable',
+  templateUrl: './disable.html'
+})
+export class DemoTabsDisableComponent {
+  @ViewChild('staticTabs') staticTabs: TabsetComponent;
+
+  disableEnable() {
+    this.staticTabs.tabs[2].disabled = !this.staticTabs.tabs[2].disabled;
+  }
+}
diff --git a/demo/src/app/components/+tabs/demos/index.ts b/demo/src/app/components/+tabs/demos/index.ts
@@ -6,12 +6,14 @@ import { DemoTabsVerticalPillsComponent } from './vertical-pills/vertical-pills'
 import { DemoTabsJustifiedComponent } from './justified/justified';
 import { DemoTabsConfigComponent } from './config/config';
 import { DemoTabsManualComponent } from './manual/manual';
+import { DemoTabsDisableComponent } from './disable/disable';
 import { DemoTabsCustomComponent } from './custom-template/custom-template';
 import { DemoTabsSelectEventComponent } from './select-event/select-event';
 
 export const DEMO_COMPONENTS = [
   DemoTabsBasicComponent,
   DemoTabsManualComponent,
+  DemoTabsDisableComponent,
   DemoTabsDynamicComponent,
   DemoTabsStylingComponent,
   DemoTabsPillsComponent,

diff --git a/demo/src/app/components/+tabs/demos/manual/manual.html b/demo/src/app/components/+tabs/demos/manual/manual.html
@@ -4,17 +4,12 @@
     <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(1)">Select second tab</button>
     <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(2)">Select third tab</button>
   </p>
-  <p>
-    <button type="button" class="btn btn-primary btn-sm" (click)="disableEnable()">
-      Enable / Disable third tab
-    </button>
-  </p>
   <hr/>
   <tabset #staticTabs>
     <tab heading="Static title">Static content</tab>
     <tab heading="Static Title 1">Static content 1</tab>
     <tab heading="Static Title 2">Static content 2</tab>
-    <tab heading="Static Title 3" [removable]="true">Static content 3</tab>
+    <tab heading="Static Title 3">Static content 3</tab>
   </tabset>
 </div>
 
diff --git a/demo/src/app/components/+tabs/demos/manual/manual.ts b/demo/src/app/components/+tabs/demos/manual/manual.ts
@@ -11,8 +11,4 @@ export class DemoTabsManualComponent {
   selectTab(tab_id: number) {
     this.staticTabs.tabs[tab_id].active = true;
   }
-
-  disableEnable() {
-    this.staticTabs.tabs[2].disabled = !this.staticTabs.tabs[2].disabled;
-  }
 }
diff --git a/demo/src/app/components/+tabs/tabs-section.list.ts b/demo/src/app/components/+tabs/tabs-section.list.ts
@@ -6,6 +6,7 @@ import { DemoTabsVerticalPillsComponent } from './demos/vertical-pills/vertical-
 import { DemoTabsJustifiedComponent } from './demos/justified/justified';
 import { DemoTabsStylingComponent } from './demos/styling/styling';
 import { DemoTabsConfigComponent } from './demos/config/config';
+import { DemoTabsDisableComponent } from './demos/disable/disable';
 import { DemoTabsCustomComponent } from './demos/custom-template/custom-template';
 import { DemoTabsSelectEventComponent } from './demos/select-event/select-event';
 
@@ -47,6 +48,13 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/manual/manual.html'),
         outlet: DemoTabsManualComponent
       },
+      {
+        title: 'Disable selection',
+        anchor: 'tabs-disable-selection',
+        component: require('!!raw-loader?lang=typescript!./demos/disable/disable'),
+        html: require('!!raw-loader?lang=markup!./demos/disable/disable.html'),
+        outlet: DemoTabsDisableComponent
+      },
       {
         title: 'Dynamic tabs',
         anchor: 'tabs-dynamic',