From 8fb437e7d2389a3316f4246f1fb45590a1b29c09 Mon Sep 17 00:00:00 2001
From: Vito Albano <valbano@MacPro.local>
Date: Fri, 14 Oct 2016 14:20:31 +0100
Subject: [PATCH] added visibility filter for tab widget

---
 .../components/widgets/tabs/tabs.widget.html  |  4 ++--
 .../components/widgets/tabs/tabs.widget.ts    | 20 +++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html
index f79783472b..92a30de165 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html
@@ -1,13 +1,13 @@
 <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
     <div alfresco-mdl-tabs>
         <div class="mdl-tabs__tab-bar">
-            <a *ngFor="let tab of tabs; let isFirst = first"
+            <a *ngFor="let tab of visibleTabs; let isFirst = first"
                [href]="'#' + tab.id"
                class="mdl-tabs__tab" [class.is-active]="isFirst">
                 {{tab.title}}
             </a>
         </div>
-        <div *ngFor="let tab of tabs; let isFirst = first"
+        <div *ngFor="let tab of visibleTabs; let isFirst = first"
              class="mdl-tabs__panel"
              [class.is-active]="isFirst"
              [attr.id]="tab.id">
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts
index 7472231fb6..9110beb9ef 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, AfterViewInit, EventEmitter, Output } from '@angular/core';
+import { Component, Input, AfterViewInit, AfterContentChecked, EventEmitter, Output } from '@angular/core';
 import { TabModel, FormFieldModel } from './../core/index';
 
 @Component({
@@ -23,7 +23,7 @@ import { TabModel, FormFieldModel } from './../core/index';
     selector: 'tabs-widget',
     templateUrl: './tabs.widget.html'
 })
-export class TabsWidget implements AfterViewInit {
+export class TabsWidget implements AfterContentChecked, AfterViewInit {
 
     @Input()
     tabs: TabModel[] = [];
@@ -31,14 +31,26 @@ export class TabsWidget implements AfterViewInit {
     @Output()
     formTabChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
 
+    visibleTabs: TabModel[] = [];
+
     hasTabs() {
         return this.tabs && this.tabs.length > 0;
     }
 
+    ngAfterContentChecked() {
+        this.filterVisibleTabs();
+    }
+
     ngAfterViewInit() {
         this.setupMaterialComponents();
     }
 
+    filterVisibleTabs() {
+        this.visibleTabs = this.tabs.filter(tab => {
+            return tab.isVisible;
+        });
+    }
+
     setupMaterialComponents(): boolean {
         // workaround for MDL issues with dynamic components
         if (componentHandler) {
@@ -48,8 +60,8 @@ export class TabsWidget implements AfterViewInit {
         return false;
     }
 
-    tabChanged( field: FormFieldModel ) {
-         this.formTabChanged.emit(field);
+    tabChanged(field: FormFieldModel) {
+        this.formTabChanged.emit(field);
     }
 
 }