[Trunk | Library]: [NEW] tab.component & tabs.component & tabs.module added in /utils folder - skeleton structure for tabs used in landing pages and community home page.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58710 d315682c-612b-4755-9ff5-7f18f6832af3

utils/tabs/tab.component.ts

@@ -0,0 +1,36 @@
+/**
+ * A single tab page. It renders the passed template
+ * via the @Input properties by using the ngTemplateOutlet
+ * and ngTemplateOutletContext directives.
+ */
+
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'my-tab',
+  // styles: [
+  //   `
+  //   .pane{
+  //     padding: 1em;
+  //   }
+  // `
+  // ],
+  template: `
+<!--    [class]="active ? 'uk-active' : ''" [hidden]="!active"-->
+<!--    <div  [class]="active ? 'uk-active' : ''" [hidden]="!active">-->
+    <div [hidden]="!active" class="pane">
+      <ng-content></ng-content>
+    </div>
+    
+<!--    <div [hidden]="!active" class="pane">-->
+<!--      <ng-content></ng-content>-->
+<!--    </div>-->
+  `
+})
+export class TabComponent {
+  @Input('tabTitle') title: string;
+  @Input('tabNumber') num: number;
+  @Input('statistics') statistics: boolean = false;
+  @Input('tabId') tabId: string;
+  @Input() active = false;
+}

utils/tabs/tabs.component.ts

@@ -0,0 +1,80 @@
+/**
+ * The main component that renders single TabComponent
+ * instances.
+ */
+
+import {
+  Component,
+  ContentChildren,
+  QueryList,
+  AfterContentInit, Output, EventEmitter,
+} from '@angular/core';
+
+import { TabComponent } from './tab.component';
+
+@Component({
+  selector: 'my-tabs',
+  template: `
+    <ul uk-tab class="uk-tab uk-text-truncate main-tabs uk-margin-remove uk-child-width-expand uk-width-3-4" uk-switcher="connect: .main-tabs-content">
+      <!--          + (tab.active ? ' uk-active' : '')-->
+      <li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active" [class]="'uk-padding-remove '+(tab.statistics ? ' statistics ' : '')">
+        <a class="uk-width-1-1 uk-height-1-1">
+          <div class="tab-header">{{tab.title}}</div>
+          <div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
+          <div *ngIf="tab.statistics" class="number">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"></path>
+            </svg>
+          </div>
+        </a>
+      </li>
+    </ul>
+    <div class="uk-switcher main-tabs-content">
+      <ng-content></ng-content>
+    </div>
+
+<!--    <ul class="nav nav-tabs">-->
+<!--      <li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">-->
+<!--        <a href="#">{{tab.title}}</a>-->
+<!--      </li>-->
+<!--    </ul>-->
+<!--    <ng-content></ng-content>-->
+  `//,
+  // styles: [
+  //   `
+  //   .tab-close {
+  //     color: gray;
+  //     text-align: right;
+  //     cursor: pointer;
+  //   }
+  //   `
+  // ]
+})
+export class TabsComponent implements AfterContentInit {
+
+  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
+  @Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
+
+  // contentChildren are set
+  ngAfterContentInit() {
+    // get all active tabs
+    let activeTabs = this.tabs.filter((tab)=>tab.active);
+console.log("ACTIVE TABS: "+activeTabs.length);
+    // if there is no active tab set, activate the first
+    if(activeTabs.length === 0) {
+      this.selectTab(this.tabs.first);
+    }
+  }
+
+  selectTab(tab: TabComponent){
+    // deactivate all tabs
+    this.tabs.toArray().forEach(tab => tab.active = false);
+
+    // activate the tab the user has clicked on.
+    tab.active = true;
+    console.log("ACTIVE TAB SET TO: "+tab.title);
+    this.selectedActiveTab.emit(tab.tabId);
+
+  }
+}

utils/tabs/tabs.module.ts

@@ -0,0 +1,19 @@
+import { NgModule }            from '@angular/core';
+import { CommonModule }        from '@angular/common';
+import { FormsModule }         from '@angular/forms';
+
+import {TabsComponent} from './tabs.component';
+import {TabComponent} from "./tab.component";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule
+  ],
+  declarations: [
+    TabsComponent, TabComponent
+  ],
+  exports: [
+    TabsComponent, TabComponent
+  ]
+})
+export class TabsModule { }