initial import for Open Source 🎉

static/js/directives/ui/cor-tabs/cor-cookie-tabs/cor-cookie-tabs.directive.spec.ts

@@ -0,0 +1,61 @@
+import { CorCookieTabsDirective } from './cor-cookie-tabs.directive';
+import { CorTabPanelComponent } from '../cor-tab-panel/cor-tab-panel.component';
+import { Mock } from 'ts-mocks';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import Spy = jasmine.Spy;
+
+
+describe("CorCookieTabsDirective", () => {
+  var directive: CorCookieTabsDirective;
+  var panelMock: Mock<CorTabPanelComponent>;
+  var cookieServiceMock: Mock<any>;
+  var activeTab: BehaviorSubject<string>;
+
+  beforeEach(() => {
+    activeTab = new BehaviorSubject<string>(null);
+    spyOn(activeTab, "subscribe").and.returnValue(null);
+    panelMock = new Mock<CorTabPanelComponent>();
+    panelMock.setup(mock => mock.activeTab).is(activeTab);
+    cookieServiceMock = new Mock<any>();
+    cookieServiceMock.setup(mock => mock.putPermanent).is((cookieName, value) => null);
+
+    directive = new CorCookieTabsDirective(panelMock.Object, cookieServiceMock.Object);
+    directive.cookieName = "quay.credentialsTab";
+  });
+
+  describe("ngAfterContentInit", () => {
+    const tabId: string = "description";
+
+    beforeEach(() => {
+      cookieServiceMock.setup(mock => mock.get).is((name) => tabId);
+      spyOn(activeTab, "next").and.returnValue(null);
+    });
+
+    it("calls cookie service to retrieve initial tab id", () => {
+      directive.ngAfterContentInit();
+
+      expect((<Spy>cookieServiceMock.Object.get).calls.argsFor(0)[0]).toEqual(directive.cookieName);
+    });
+
+    it("emits retrieved tab id as next active tab", () => {
+      directive.ngAfterContentInit();
+
+      expect((<Spy>panelMock.Object.activeTab.next).calls.argsFor(0)[0]).toEqual(tabId);
+    });
+
+    it("subscribes to active tab changes", () => {
+      directive.ngAfterContentInit();
+
+      expect((<Spy>panelMock.Object.activeTab.subscribe)).toHaveBeenCalled();
+    });
+
+    it("calls cookie service to put new permanent cookie on active tab changes", () => {
+      directive.ngAfterContentInit();
+      const tabId: string = "description";
+      (<Spy>panelMock.Object.activeTab.subscribe).calls.argsFor(0)[0](tabId);
+
+      expect((<Spy>cookieServiceMock.Object.putPermanent).calls.argsFor(0)[0]).toEqual(directive.cookieName);
+      expect((<Spy>cookieServiceMock.Object.putPermanent).calls.argsFor(0)[1]).toEqual(tabId);
+    });
+  });
+});

static/js/directives/ui/cor-tabs/cor-cookie-tabs/cor-cookie-tabs.directive.ts

@@ -0,0 +1,30 @@
+import { Directive, Inject, Host, AfterContentInit, Input } from 'ng-metadata/core';
+import { CorTabPanelComponent } from '../cor-tab-panel/cor-tab-panel.component';
+
+
+/**
+ * Adds routing capabilities to cor-tab-panel using a browser cookie.
+ */
+@Directive({
+  selector: '[corCookieTabs]'
+})
+export class CorCookieTabsDirective implements AfterContentInit {
+
+  @Input('@corCookieTabs') public cookieName: string;
+
+  constructor(@Host() @Inject(CorTabPanelComponent) private panel: CorTabPanelComponent,
+              @Inject('CookieService') private cookieService: any) {
+
+  }
+
+  public ngAfterContentInit(): void {
+    // Set initial tab
+    const tabId: string = this.cookieService.get(this.cookieName);
+
+    this.panel.activeTab.next(tabId);
+
+    this.panel.activeTab.subscribe((tab: string) => {
+      this.cookieService.putPermanent(this.cookieName, tab);
+    });
+  }
+}

static/js/directives/ui/cor-tabs/cor-nav-tabs/cor-nav-tabs.directive.spec.ts

@@ -0,0 +1,73 @@
+import { CorNavTabsDirective } from './cor-nav-tabs.directive';
+import { CorTabPanelComponent } from '../cor-tab-panel/cor-tab-panel.component';
+import { Mock } from 'ts-mocks';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import Spy = jasmine.Spy;
+
+
+describe("CorNavTabsDirective", () => {
+  var directive: CorNavTabsDirective;
+  var panelMock: Mock<CorTabPanelComponent>;
+  var $locationMock: Mock<ng.ILocationService>;
+  var $rootScopeMock: Mock<ng.IRootScopeService>;
+  var activeTab: BehaviorSubject<string>;
+  const tabId: string = "description";
+
+  beforeEach(() => {
+    activeTab = new BehaviorSubject<string>(null);
+    spyOn(activeTab, "next").and.returnValue(null);
+    panelMock = new Mock<CorTabPanelComponent>();
+    panelMock.setup(mock => mock.activeTab).is(activeTab);
+    $locationMock = new Mock<ng.ILocationService>();
+    $locationMock.setup(mock => mock.search).is(() => <any>{tab: tabId});
+    $rootScopeMock = new Mock<ng.IRootScopeService>();
+    $rootScopeMock.setup(mock => mock.$on);
+
+    directive = new CorNavTabsDirective(panelMock.Object, $locationMock.Object, $rootScopeMock.Object);
+  });
+
+  describe("constructor", () => {
+
+    it("subscribes to $routeUpdate event on the root scope", () => {
+      expect((<Spy>$rootScopeMock.Object.$on).calls.argsFor(0)[0]).toEqual("$routeUpdate");
+    });
+
+    it("calls location service to retrieve tab id from URL query parameters on route update", () => {
+      (<Spy>$rootScopeMock.Object.$on).calls.argsFor(0)[1]();
+
+      expect(<Spy>$locationMock.Object.search).toHaveBeenCalled();
+    });
+
+    it("emits retrieved tab id as next active tab on route update", () => {
+      (<Spy>$rootScopeMock.Object.$on).calls.argsFor(0)[1]();
+
+      expect((<Spy>activeTab.next).calls.argsFor(0)[0]).toEqual(tabId);
+    });
+  });
+
+  describe("ngAfterContentInit", () => {
+    const path: string = "quay.io/repository/devtable/simple";
+
+    beforeEach(() => {
+      $locationMock.setup(mock => mock.path).is(() => <any>path);
+    });
+
+    it("calls location service to retrieve the current URL path and sets panel's base path", () => {
+      directive.ngAfterContentInit();
+
+      expect(panelMock.Object.basePath).toEqual(path);
+    });
+
+    it("calls location service to retrieve tab id from URL query parameters", () => {
+      directive.ngAfterContentInit();
+
+      expect(<Spy>$locationMock.Object.search).toHaveBeenCalled();
+    });
+
+    it("emits retrieved tab id as next active tab", () => {
+      directive.ngAfterContentInit();
+
+      expect((<Spy>activeTab.next).calls.argsFor(0)[0]).toEqual(tabId);
+    });
+  });
+});

static/js/directives/ui/cor-tabs/cor-nav-tabs/cor-nav-tabs.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, Inject, Host, AfterContentInit, Input } from 'ng-metadata/core';
+import { CorTabPanelComponent } from '../cor-tab-panel/cor-tab-panel.component';
+
+
+/**
+ * Adds routing capabilities to cor-tab-panel, either using URL query parameters, or browser cookie.
+ */
+@Directive({
+  selector: '[corNavTabs]'
+})
+export class CorNavTabsDirective implements AfterContentInit {
+
+  constructor(@Host() @Inject(CorTabPanelComponent) private panel: CorTabPanelComponent,
+              @Inject('$location') private $location: ng.ILocationService,
+              @Inject('$rootScope') private $rootScope: ng.IRootScopeService) {
+    this.$rootScope.$on('$routeUpdate', () => {
+      const tabId: string = this.$location.search()['tab'];
+      this.panel.activeTab.next(tabId);
+    });
+  }
+
+  public ngAfterContentInit(): void {
+    this.panel.basePath = this.$location.path();
+
+    // Set initial tab
+    const tabId: string = this.$location.search()['tab'];
+    this.panel.activeTab.next(tabId);
+  }
+}

static/js/directives/ui/cor-tabs/cor-tab-content/cor-tab-content.component.html

@@ -0,0 +1 @@
+<div class="co-tab-content tab-content col-md-11" ng-transclude></div>

static/js/directives/ui/cor-tabs/cor-tab-content/cor-tab-content.component.ts

@@ -0,0 +1,17 @@
+import { Component } from 'ng-metadata/core';
+
+
+/**
+ * A component that is placed under a cor-tabs to wrap tab content with additional styling.
+ */
+@Component({
+  selector: 'cor-tab-content',
+  templateUrl: '/static/js/directives/ui/cor-tabs/cor-tab-content/cor-tab-content.component.html',
+  legacy: {
+    transclude: true,
+    replace: true,
+  }
+})
+export class CorTabContentComponent {
+
+}

static/js/directives/ui/cor-tabs/cor-tab-pane/cor-tab-pane.component.html

@@ -0,0 +1,3 @@
+<div class="co-tab-pane" ng-show="$ctrl.isActiveTab">
+  <div ng-transclude />
+</div>

static/js/directives/ui/cor-tabs/cor-tab-pane/cor-tab-pane.component.spec.ts

@@ -0,0 +1,63 @@
+import { CorTabPaneComponent } from './cor-tab-pane.component';
+import { CorTabPanelComponent } from '../cor-tab-panel/cor-tab-panel.component';
+import { Mock } from 'ts-mocks';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import Spy = jasmine.Spy;
+
+
+describe("CorTabPaneComponent", () => {
+  var component: CorTabPaneComponent;
+  var panelMock: Mock<CorTabPanelComponent>;
+  var activeTab: BehaviorSubject<string>;
+
+  beforeEach(() => {
+    activeTab = new BehaviorSubject<string>(null);
+    spyOn(activeTab, "subscribe").and.callThrough();
+    panelMock = new Mock<CorTabPanelComponent>();
+    panelMock.setup(mock => mock.activeTab).is(activeTab);
+
+    component = new CorTabPaneComponent(panelMock.Object);
+    component.id = 'description';
+  });
+
+  describe("ngOnInit", () => {
+
+    beforeEach(() => {
+      panelMock.setup(mock => mock.addTabPane);
+    });
+
+    it("adds self as tab pane to panel", () => {
+      component.ngOnInit();
+
+      expect((<Spy>panelMock.Object.addTabPane).calls.argsFor(0)[0]).toBe(component);
+    });
+
+    it("subscribes to active tab changes", () => {
+      component.ngOnInit();
+
+      expect((<Spy>panelMock.Object.activeTab.subscribe)).toHaveBeenCalled();
+    });
+
+    it("does nothing if active tab ID is undefined", () => {
+      component.ngOnInit();
+      component.isActiveTab = true;
+      panelMock.Object.activeTab.next(null);
+
+      expect(component.isActiveTab).toEqual(true);
+    });
+
+    it("sets self as active if active tab ID matches tab ID", () => {
+      component.ngOnInit();
+      panelMock.Object.activeTab.next(component.id);
+
+      expect(component.isActiveTab).toEqual(true);
+    });
+
+    it("sets self as inactive if active tab ID does not match tab ID", () => {
+      component.ngOnInit();
+      panelMock.Object.activeTab.next(component.id.split('').reverse().join(''));
+
+      expect(component.isActiveTab).toEqual(false);
+    });
+  });
+});

static/js/directives/ui/cor-tabs/cor-tab-pane/cor-tab-pane.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, Inject, Host, OnInit } from 'ng-metadata/core';
+import { CorTabPanelComponent } from '../cor-tab-panel/cor-tab-panel.component';
+import 'rxjs/add/operator/filter';
+
+
+/**
+ * A component that creates a single tab pane under a cor-tabs component.
+ */
+@Component({
+  selector: 'cor-tab-pane',
+  templateUrl: '/static/js/directives/ui/cor-tabs/cor-tab-pane/cor-tab-pane.component.html',
+  legacy: {
+    transclude: true,
+  }
+})
+export class CorTabPaneComponent implements OnInit {
+
+  @Input('@') public id: string;
+
+  public isActiveTab: boolean = false;
+
+  constructor(@Host() @Inject(CorTabPanelComponent) private panel: CorTabPanelComponent) {
+
+  }
+
+  public ngOnInit(): void {
+    this.panel.addTabPane(this);
+
+    this.panel.activeTab
+      .filter(tabId => tabId != undefined)
+      .subscribe((tabId: string) => {
+        this.isActiveTab = (this.id === tabId);
+      });
+  }
+}

static/js/directives/ui/cor-tabs/cor-tab-panel/cor-tab-panel.component.html

@@ -0,0 +1,3 @@
+<div class="co-main-content-panel co-tab-panel co-fx-box-shadow-heavy">
+    <div class="co-tab-container" ng-class="$ctrl.isVertical() ? 'vertical': 'horizontal'" ng-transclude></div>
+</div>

static/js/directives/ui/cor-tabs/cor-tab-panel/cor-tab-panel.component.spec.ts

@@ -0,0 +1,132 @@
+import { CorTabPanelComponent } from './cor-tab-panel.component';
+import { CorTabComponent } from '../cor-tab/cor-tab.component';
+import { SimpleChanges } from 'ng-metadata/core';
+import Spy = jasmine.Spy;
+
+
+describe("CorTabPanelComponent", () => {
+  var component: CorTabPanelComponent;
+
+  beforeEach(() => {
+    component = new CorTabPanelComponent();
+  });
+
+  describe("ngOnInit", () => {
+    var tabs: CorTabComponent[] = [];
+
+    beforeEach(() => {
+      // Add tabs to panel
+      tabs.push(new CorTabComponent(component));
+      tabs[0].tabId = "info";
+      tabs.forEach((tab) => component.addTab(tab));
+
+      spyOn(component.activeTab, "subscribe").and.callThrough();
+      spyOn(component.activeTab, "next").and.callThrough();
+      spyOn(component.tabChange, "emit").and.returnValue(null);
+    });
+
+    it("subscribes to active tab changes", () => {
+      component.ngOnInit();
+
+      expect(<Spy>component.activeTab.subscribe).toHaveBeenCalled();
+    });
+
+    it("emits next active tab with tab ID of first registered tab if given tab ID is null", () => {
+      component.ngOnInit();
+      component.activeTab.next(null);
+
+      expect((<Spy>component.activeTab.next).calls.argsFor(1)[0]).toEqual(tabs[0].tabId);
+    });
+
+    it("does not emit output event for tab change if tab ID is null", () => {
+      component.ngOnInit();
+      component.activeTab.next(null);
+
+      expect((<Spy>component.tabChange.emit).calls.allArgs).not.toContain(null);
+    });
+
+    it("emits output event for tab change when tab ID is not null", () => {
+      component.ngOnInit();
+      const tabId: string = "description";
+      component.activeTab.next(tabId);
+
+      expect((<Spy>component.tabChange.emit).calls.argsFor(1)[0]).toEqual(tabId);
+    });
+  });
+
+  describe("ngOnChanges", () => {
+    var changes: SimpleChanges;
+    var tabs: CorTabComponent[] = [];
+
+    beforeEach(() => {
+      // Add tabs to panel
+      tabs.push(new CorTabComponent(component));
+      tabs.forEach((tab) => component.addTab(tab));
+
+      changes = {
+        'selectedIndex': {
+          currentValue: 0,
+          previousValue: null,
+          isFirstChange: () => false
+        },
+      };
+
+      spyOn(component.activeTab, "next").and.returnValue(null);
+    });
+
+    it("emits next active tab if 'selectedIndex' input changes and is valid", () => {
+      component.ngOnChanges(changes);
+
+      expect((<Spy>component.activeTab.next).calls.argsFor(0)[0]).toEqual(tabs[changes['selectedIndex'].currentValue].tabId);
+    });
+
+    it("does nothing if 'selectedIndex' input changed to invalid value", () => {
+      changes['selectedIndex'].currentValue = 100;
+      component.ngOnChanges(changes);
+
+      expect(<Spy>component.activeTab.next).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("addTab", () => {
+
+    beforeEach(() => {
+      spyOn(component.activeTab, "next").and.returnValue(null);
+    });
+
+    it("emits next active tab if it is not set", () => {
+      const tab: CorTabComponent = new CorTabComponent(component);
+      component.addTab(tab);
+
+      expect((<Spy>component.activeTab.next).calls.argsFor(0)[0]).toEqual(tab.tabId);
+    });
+
+    it("does not emit next active tab if it is already set", () => {
+      spyOn(component.activeTab, "getValue").and.returnValue("description");
+      const tab: CorTabComponent = new CorTabComponent(component);
+      component.addTab(tab);
+
+      expect(<Spy>component.activeTab.next).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("addTabPane", () => {
+
+  });
+
+  describe("isVertical", () => {
+
+    it("returns true if orientation is 'vertical'", () => {
+      component.orientation = 'vertical';
+      const isVertical: boolean = component.isVertical();
+
+      expect(isVertical).toBe(true);
+    });
+
+    it("returns false if orientation is not 'vertical'", () => {
+      const isVertical: boolean = component.isVertical();
+
+      expect(isVertical).toBe(false);
+    });
+  });
+});

static/js/directives/ui/cor-tabs/cor-tab-panel/cor-tab-panel.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnInit } from 'ng-metadata/core';
+import { CorTabComponent } from '../cor-tab/cor-tab.component';
+import { CorTabPaneComponent } from '../cor-tab-pane/cor-tab-pane.component';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+
+/**
+ * A component that contains a cor-tabs and handles all of its logic.
+ */
+@Component({
+  selector: 'cor-tab-panel',
+  templateUrl: '/static/js/directives/ui/cor-tabs/cor-tab-panel/cor-tab-panel.component.html',
+  legacy: {
+    transclude: true
+  }
+})
+export class CorTabPanelComponent implements OnInit, OnChanges {
+
+  @Input('@') public orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  @Output() public tabChange: EventEmitter<string> = new EventEmitter();
+
+  public basePath: string;
+  public activeTab = new BehaviorSubject<string>(null);
+
+  private tabs: CorTabComponent[] = [];
+  private tabPanes: {[id: string]: CorTabPaneComponent} = {};
+
+  public ngOnInit(): void {
+    this.activeTab.subscribe((tabId: string) => {
+      // Catch null values and replace with tabId of first tab
+      if (!tabId && this.tabs[0]) {
+        this.activeTab.next(this.tabs[0].tabId);
+      } else {
+        this.tabChange.emit(tabId);
+      }
+    });
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    switch (Object.keys(changes)[0]) {
+      case 'selectedIndex':
+        if (this.tabs.length > changes['selectedIndex'].currentValue) {
+          this.activeTab.next(this.tabs[changes['selectedIndex'].currentValue].tabId);
+        }
+        break;
+    }
+  }
+
+  public addTab(tab: CorTabComponent): void {
+    this.tabs.push(tab);
+
+    if (!this.activeTab.getValue()) {
+      this.activeTab.next(this.tabs[0].tabId);
+    }
+  }
+
+  public addTabPane(tabPane: CorTabPaneComponent): void {
+    this.tabPanes[tabPane.id] = tabPane;
+  }
+
+  public isVertical(): boolean {
+    return this.orientation == 'vertical';
+  }
+}

static/js/directives/ui/cor-tabs/cor-tab/cor-tab.component.html

@@ -0,0 +1,13 @@
+<li class="cor-tab-itself" ng-class="{'active': $ctrl.isActive, 'co-top-tab': !$ctrl.parent.isVertical()}">
+  <a href="{{ $ctrl.panel.basePath ? $ctrl.panel.basePath + '?tab=' + $ctrl.tabId : '' }}"
+     ng-click="$ctrl.tabClicked($event)">
+    <span class="cor-tab-icon"
+          data-title="{{ ::($ctrl.panel.isVertical() ? $ctrl.tabTitle : '') }}"
+          data-placement="right"
+          data-container="body"
+          style="display: inline-block"
+          bs-tooltip>
+      <span ng-transclude /><span class="horizontal-label">{{ ::$ctrl.tabTitle }}</span>
+    </span>
+  </a>
+</li>

static/js/directives/ui/cor-tabs/cor-tab/cor-tab.component.spec.ts

@@ -0,0 +1,85 @@
+import { CorTabComponent } from './cor-tab.component';
+import { CorTabPanelComponent } from '../cor-tab-panel/cor-tab-panel.component';
+import { Mock } from 'ts-mocks';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import Spy = jasmine.Spy;
+
+
+describe("CorTabComponent", () => {
+  var component: CorTabComponent;
+  var panelMock: Mock<CorTabPanelComponent>;
+  var activeTab: BehaviorSubject<string>;
+
+  beforeEach(() => {
+    activeTab = new BehaviorSubject<string>(null);
+    spyOn(activeTab, "subscribe").and.callThrough();
+    panelMock = new Mock<CorTabPanelComponent>();
+    panelMock.setup(mock => mock.activeTab).is(activeTab);
+
+    component = new CorTabComponent(panelMock.Object);
+  });
+
+  describe("ngOnInit", () => {
+
+    beforeEach(() => {
+      panelMock.setup(mock => mock.addTab);
+      spyOn(component.tabInit, "emit").and.returnValue(null);
+      spyOn(component.tabShow, "emit").and.returnValue(null);
+      spyOn(component.tabHide, "emit").and.returnValue(null);
+      component.tabId = "description";
+    });
+
+    it("subscribes to active tab changes", () => {
+      component.ngOnInit();
+
+      expect((<Spy>panelMock.Object.activeTab.subscribe)).toHaveBeenCalled();
+    });
+
+    it("does nothing if active tab ID is undefined", () => {
+      component.ngOnInit();
+      panelMock.Object.activeTab.next(null);
+
+      expect(<Spy>component.tabInit.emit).not.toHaveBeenCalled();
+      expect(<Spy>component.tabShow.emit).not.toHaveBeenCalled();
+      expect(<Spy>component.tabHide.emit).not.toHaveBeenCalled();
+    });
+
+    it("emits output event for tab init if it is new active tab", () => {
+      component.ngOnInit();
+      panelMock.Object.activeTab.next(component.tabId);
+
+      expect(<Spy>component.tabInit.emit).toHaveBeenCalled();
+    });
+
+    it("emits output event for tab show if it is new active tab", () => {
+      component.ngOnInit();
+      panelMock.Object.activeTab.next(component.tabId);
+
+      expect(<Spy>component.tabShow.emit).toHaveBeenCalled();
+    });
+
+    it("emits output event for tab hide if active tab changes to different tab", () => {
+      const newTabId: string = component.tabId.split('').reverse().join('');
+      component.ngOnInit();
+      // Call twice, first time to set 'isActive' to true
+      panelMock.Object.activeTab.next(component.tabId);
+      panelMock.Object.activeTab.next(newTabId);
+
+      expect(<Spy>component.tabHide.emit).toHaveBeenCalled();
+    });
+
+    it("does not emit output event for tab hide if was not previously active tab", () => {
+      const newTabId: string = component.tabId.split('').reverse().join('');
+      component.ngOnInit();
+      panelMock.Object.activeTab.next(newTabId);
+
+      expect(<Spy>component.tabHide.emit).not.toHaveBeenCalled();
+    });
+
+    it("adds self as tab to panel", () => {
+      component.ngOnInit();
+
+      expect((<Spy>panelMock.Object.addTab).calls.argsFor(0)[0]).toBe(component);
+    });
+  });
+});

static/js/directives/ui/cor-tabs/cor-tab/cor-tab.component.ts

@@ -0,0 +1,56 @@
+import { Component, Input, Output, Inject, EventEmitter, Host, OnInit } from 'ng-metadata/core';
+import { CorTabPanelComponent } from '../cor-tab-panel/cor-tab-panel.component';
+import 'rxjs/add/operator/filter';
+
+
+/**
+ * A component that creates a single tab under a cor-tabs component.
+ */
+@Component({
+  selector: 'cor-tab',
+  templateUrl: '/static/js/directives/ui/cor-tabs/cor-tab/cor-tab.component.html',
+  legacy: {
+    transclude: true,
+  }
+})
+export class CorTabComponent implements OnInit {
+  @Input('@') public tabId: string;
+  @Input('@') public tabTitle: string;
+  @Input('<') public tabActive: boolean = false;
+
+  @Output() public tabInit: EventEmitter<any> = new EventEmitter();
+  @Output() public tabShow: EventEmitter<any> = new EventEmitter();
+  @Output() public tabHide: EventEmitter<any> = new EventEmitter();
+
+  private isActive: boolean = false;
+
+  constructor(@Host() @Inject(CorTabPanelComponent) private panel: CorTabPanelComponent) {
+
+  }
+
+  public ngOnInit(): void {
+    this.isActive = this.tabActive;
+
+    this.panel.activeTab
+      .filter(tabId => tabId != undefined)
+      .subscribe((tabId: string) => {
+        if (!this.isActive && this.tabId === tabId) {
+          this.isActive = true;
+          this.tabInit.emit({});
+          this.tabShow.emit({});
+        } else if (this.isActive && this.tabId !== tabId) {
+          this.isActive = false;
+          this.tabHide.emit({});
+        }
+      });
+
+    this.panel.addTab(this);
+  }
+
+  private tabClicked(event: MouseEvent): void {
+    if (!this.panel.basePath) {
+      event.preventDefault();
+      this.panel.activeTab.next(this.tabId);
+    }
+  }
+}

static/js/directives/ui/cor-tabs/cor-tabs.component.html

@@ -0,0 +1,4 @@
+<span class="co-tab-element" ng-class="$ctrl.isClosed ? 'closed' : 'open'">
+  <span class="xs-toggle" ng-click="$ctrl.toggleClosed($event)"></span>
+  <ul ng-class="$ctrl.parent.isVertical() ? 'co-tabs col-md-1' : 'co-top-tab-bar'" ng-transclude></ul>
+</span>

static/js/directives/ui/cor-tabs/cor-tabs.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, Output, Inject, EventEmitter, Host } from 'ng-metadata/core';
+import { CorTabPanelComponent } from './cor-tab-panel/cor-tab-panel.component';
+
+
+/**
+ * A component that holds the actual tabs.
+ */
+@Component({
+  selector: 'cor-tabs',
+  templateUrl: '/static/js/directives/ui/cor-tabs/cor-tabs.component.html',
+  legacy: {
+    transclude: true,
+  }
+})
+export class CorTabsComponent {
+
+  private isClosed: boolean = true;
+
+  constructor(@Host() @Inject(CorTabPanelComponent) private parent: CorTabPanelComponent) {
+
+  }
+
+  private toggleClosed(e): void {
+    this.isClosed = !this.isClosed;
+  }
+}

static/js/directives/ui/cor-tabs/cor-tabs.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from 'ng-metadata/core';
+import { CorTabsComponent } from './cor-tabs.component';
+import { CorTabComponent } from './cor-tab/cor-tab.component';
+import { CorNavTabsDirective } from './cor-nav-tabs/cor-nav-tabs.directive';
+import { CorTabContentComponent } from './cor-tab-content/cor-tab-content.component';
+import { CorTabPaneComponent } from './cor-tab-pane/cor-tab-pane.component';
+import { CorTabPanelComponent } from './cor-tab-panel/cor-tab-panel.component';
+import { CorCookieTabsDirective } from './cor-cookie-tabs/cor-cookie-tabs.directive';
+
+
+/**
+ * Module containing everything needed for cor-tabs.
+ */
+@NgModule({
+  imports: [
+
+  ],
+  declarations: [
+    CorNavTabsDirective,
+    CorTabComponent,
+    CorTabContentComponent,
+    CorTabPaneComponent,
+    CorTabPanelComponent,
+    CorTabsComponent,
+    CorCookieTabsDirective,
+  ],
+  providers: [
+
+  ]
+})
+export class CorTabsModule {
+
+}

static/js/directives/ui/cor-tabs/cor-tabs.view-object.ts

@@ -0,0 +1,13 @@
+import { element, by, browser, $, ElementFinder, ExpectedConditions as until } from 'protractor';
+
+
+export class CorTabsViewObject {
+
+  public selectTabByTitle(title: string) {
+    return $(`cor-tab[tab-title="${title}"] a`).click();
+  }
+
+  public isActiveTab(title: string) {
+    return $(`cor-tab[tab-title="${title}"] .cor-tab-itself.active`).isPresent();
+  }
+}