feat(tabs): component Tabs

package.json

@@ -159,6 +159,7 @@
         "server-dev:radio": "npm run server-dev -- --env.component radio",
         "server-dev:select": "npm run server-dev -- --env.component select",
         "server-dev:splitter": "npm run server-dev -- --env.component splitter",
+        "server-dev:tabs": "npm run server-dev -- --env.component tabs",
         "server-dev:tag": "npm run server-dev -- --env.component tag",
         "server-dev:toggle": "npm run server-dev -- --env.component toggle",
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",

src/lib-dev/tabs/module.ts

@@ -0,0 +1,103 @@
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { FormsModule, FormControl } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { Observable, Observer } from 'rxjs';
+
+import { McCheckboxModule } from '../../lib/checkbox';
+import { McFormFieldModule } from '../../lib/form-field';
+import { McIconModule } from '../../lib/icon';
+import { McInputModule } from '../../lib/input/';
+import { McRadioModule } from '../../lib/radio';
+import { McTabsModule } from '../../lib/tabs/';
+
+
+export interface ExampleTab {
+    label: string;
+    content: string;
+}
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TabsDemoComponent {
+    asyncTabs: Observable<ExampleTab[]>;
+
+    tabs = ['First', 'Second', 'Third'];
+    selected = new FormControl(0);
+
+    tabLoadTimes: Date[] = [];
+
+    links = ['First', 'Second', 'Third'];
+    activeLink = this.links[0];
+    background = '';
+
+    constructor() {
+        this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
+            setTimeout(() => {
+                observer.next([
+                    { label: 'First', content: 'Content 1' },
+                    { label: 'Second', content: 'Content 2' },
+                    { label: 'Third', content: 'Content 3' }
+                ]);
+            }, 1000);
+        });
+    }
+
+    onSelectionChanged(e) {
+        console.log(e);
+    }
+
+    addTab(selectAfterAdding: boolean) {
+        this.tabs.push('New');
+
+        if (selectAfterAdding) {
+            this.selected.setValue(this.tabs.length - 1);
+        }
+    }
+
+    removeTab(index: number) {
+        this.tabs.splice(index, 1);
+    }
+
+    getTimeLoaded(index: number) {
+        if (!this.tabLoadTimes[index]) {
+            this.tabLoadTimes[index] = new Date();
+        }
+
+        return this.tabLoadTimes[index];
+    }
+
+    toggleBackground() {
+        this.background = this.background ? '' : 'primary';
+    }
+}
+
+
+@NgModule({
+    declarations: [
+        TabsDemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        McFormFieldModule,
+        McIconModule,
+        McCheckboxModule,
+        McRadioModule,
+        McTabsModule,
+        McInputModule,
+        FormsModule
+    ],
+    bootstrap: [
+        TabsDemoComponent
+    ]
+})
+export class TabsDemoModule { }
+
+platformBrowserDynamic()
+    .bootstrapModule(TabsDemoModule)
+    .catch((error) => console.error(error));
+

src/lib-dev/tabs/styles.scss

@@ -0,0 +1,17 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+
+@import '../../lib/core/theming/prebuilt/default-theme';
+
+.example-stretched-tabs {
+    max-width: 800px;
+  }
+
+  .example-button-toggle-label {
+    display: inline-block;
+    margin: 16px;
+  }
+
+
+  .example-action-button {
+    margin-bottom: 8px;
+  }

src/lib-dev/tabs/template.html

@@ -0,0 +1,89 @@
+<div>
+    <mc-tab-group mc-light-tabs
+                  mc-align-tabs="start">
+        <mc-tab label="First">Content 1</mc-tab>
+        <mc-tab label="Second">Content 2</mc-tab>
+        <mc-tab disabled
+                label="Third">Content 3</mc-tab>
+        <mc-tab label="4">Content 4</mc-tab>
+        <mc-tab label="5">Content 5</mc-tab>
+    </mc-tab-group>
+
+    <mc-tab-group mc-align-tabs="center">
+        <mc-tab label="First">Content 1</mc-tab>
+        <mc-tab disabled
+                label="Second">Content 2</mc-tab>
+        <mc-tab label="Third">Content 3</mc-tab>
+        <mc-tab label="4">Content 4</mc-tab>
+        <mc-tab label="5">Content 5</mc-tab>
+    </mc-tab-group>
+
+    <h3>Navigation</h3>
+
+    <nav mc-tab-nav-bar
+         mc-light-tabs>
+        <a mc-tab-link
+           disabled
+           *ngFor="let link of links"
+           (click)="activeLink = link"
+           [active]="activeLink == link"> {{link}} </a>
+        <a mc-tab-link
+           disabled
+           (click)="activeLink = 1"
+           [active]="activeLink == 1">Disabled Link</a>
+    </nav>
+
+    <nav mc-tab-nav-bar
+         mc-light-tabs>
+        <a mc-tab-link
+           *ngFor="let link of links"
+           (click)="activeLink = link"
+           [active]="activeLink == link"> {{link}} </a>
+        <a mc-tab-link
+           (click)="activeLink = 1"
+           [active]="activeLink == 1">Link 1</a>
+        <a mc-tab-link
+           (click)="activeLink = 2"
+           [active]="activeLink == 2"
+           disabled>Link 2</a>
+        <a mc-tab-link
+           (click)="activeLink = 3"
+           [active]="activeLink == 3">Link 3</a>
+        <a mc-tab-link
+           (click)="activeLink = 4"
+           [active]="activeLink == 4">Link 4</a>
+    </nav>
+
+    <h3>Very slow animation</h3>
+    <mc-tab-group animationDuration="2000ms">
+        <mc-tab label="First">Content 1</mc-tab>
+        <mc-tab label="Second">Content 2</mc-tab>
+        <mc-tab label="Third">Content 3</mc-tab>
+    </mc-tab-group>
+
+    <mc-tab-group>
+        <mc-tab>
+            <ng-template mc-tab-label>
+                <i mc-icon="mc-search_16"></i>
+                First
+            </ng-template>
+            Content 1
+        </mc-tab>
+
+        <mc-tab>
+            <ng-template mc-tab-label>
+                Second
+                <i mc-icon="mc-search_16"></i>
+            </ng-template>
+            Content 2
+        </mc-tab>
+
+        <mc-tab>
+            <ng-template mc-tab-label>
+                <i mc-icon="mc-search_16"></i>
+                Third
+            </ng-template>
+            Content 3
+        </mc-tab>
+    </mc-tab-group>
+</div>

src/lib/core/common-behaviors/common-module.ts

@@ -16,7 +16,7 @@ export function MC_SANITY_CHECKS_FACTORY(): boolean {
  * Module that captures anything that should be loaded and/or run for *all* Mosaic
  * components. This includes Bidi, etc.
  *
- * This module should be imported to each top-level component module (e.g., MatTabsModule).
+ * This module should be imported to each top-level component module (e.g., McTabsModule).
  */
 @NgModule({
     imports: [ BidiModule ],

src/lib/core/styles/typography/_all-typography.scss

@@ -4,6 +4,7 @@
 @import '../../../button/button-theme';
 @import '../../../link/link-theme';
 @import '../../../list/list-theme';
+@import '../../../tabs/tabs-theme';
 @import '../../../tree/tree-theme';
 @import '../../../radio/radio-theme';
 @import '../../../checkbox/checkbox-theme';
@@ -31,6 +32,7 @@
     @include mc-list-typography($config);
     @include mc-radio-typography($config);
     @include mc-checkbox-typography($config);
+    @include mc-tabs-typography($config);
     @include mc-tree-typography($config);
     @include mc-navbar-typography($config);
     @include mc-input-typography($config);

src/lib/core/theming/_all-theme.scss

@@ -12,6 +12,7 @@
 @import '../../progress-spinner/progress-spinner-theme';
 @import '../../radio/radio-theme';
 @import '../../checkbox/checkbox-theme';
+@import '../../tabs/tabs-theme';
 @import '../../tree/tree-theme';
 @import '../../navbar/navbar-theme';
 @import '../../input/input-theme';
@@ -41,6 +42,7 @@
     @include mc-progress-spinner-theme($theme);
     @include mc-radio-theme($theme);
     @include mc-checkbox-theme($theme);
+    @include mc-tabs-theme($theme);
     @include mc-tree-theme($theme);
     @include mc-navbar-theme($theme);
     @include mc-input-theme($theme);

src/lib/list/_list-theme.scss

@@ -26,11 +26,6 @@
 
             color: mc-color($foreground, text);
 
-            &:hover,
-            &.mc-hovered {
-                background: mc-color($background, 'hover');
-            }
-
             &.mc-focused {
                 border-color: mc-color($primary, 500);
             }

src/lib/public-api.ts

@@ -18,6 +18,7 @@ export * from '@ptsecurity/mosaic/progress-bar';
 export * from '@ptsecurity/mosaic/progress-spinner';
 export * from '@ptsecurity/mosaic/radio';
 export * from '@ptsecurity/mosaic/tree';
+export * from '@ptsecurity/mosaic/tabs';
 export * from '@ptsecurity/mosaic/tag';
 export * from '@ptsecurity/mosaic/timepicker';
 export * from '@ptsecurity/mosaic/select';