D-Net

/**

 * 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);

  }

}

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 { }

/**

 * 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;

}