feat(ui-features): add the tabs component

package.json

@@ -12,6 +12,7 @@
     "build:prod:aot": "npm run build:prod -- --aot",
     "build:ci": "npm-run-all -p -r build:prod build:prod:aot",
     "build:ghpages": "npm run build:prod:aot -- --base-href \"https://akveo.github.io/ng2-admin/\" && ngh",
+    "build:stg": "npm run build:prod:aot -- --base-href \"http://akveo.com/ngx-admin/\"",
     "test": "ng test -sr",
     "test:coverage": "rimraf coverage && npm run test -- -cc",
     "lint": "ng lint",

src/app/@theme/components/header/header.component.ts

@@ -11,8 +11,9 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
       <i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
       <span class="logo" (click)="goToHome()">NgX&nbsp;<a>Admin</a></span>
       <button (click)="switchTheme()">Switch Theme!</button>
+      <button (click)="selectDefaultTheme()">Default Theme!</button>
     </div>
-    
+
     <nga-actions size="medium" inverse class="right">
       <nga-action><ngx-search-input></ngx-search-input></nga-action>
       <nga-action icon="ion-ios-email-outline"></nga-action>
@@ -55,4 +56,8 @@ export class HeaderComponent {
       this.themeService.changeTheme('light');
     }
   }
+
+  selectDefaultTheme() {
+    this.themeService.changeTheme('default');
+  }
 }

src/app/@theme/styles/cosmic/cosmic.theme.scss

@@ -3,6 +3,7 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
+
 @import '../components';
 @import 'variables';
 

src/app/@theme/styles/default/default.theme.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../components';
+@import 'overrides/all';
+
+@import '~@nga/theme/styles/themes/nga.theme.default';
+
+$theme-name: 'default';
+
+// @nga/theme module styles
+@include nga-theme($theme-name) {
+  @include nga-theme-overrides($theme-name);
+  @include custom-components-theme($theme-name);
+}
+
+// @nga/bootstrap module styles
+@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
+@include nga-bootstrap($theme-name);
+
+// @nga/maps module styles
+@import '~@nga/theme/overrides/maps/styles/themes/nga.theme.default';
+@include nga-maps($theme-name);
+
+// @nga/typography module styles
+@import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default';
+@include nga-typography($theme-name);

src/app/@theme/styles/default/overrides/all.scss

@@ -0,0 +1,2 @@
+@mixin nga-theme-overrides($theme-name) {
+}

src/app/@theme/styles/light/light.theme.scss

@@ -3,6 +3,7 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
+
 @import '../components';
 @import 'overrides/all';
 

src/app/pages/editors/ckeditor.component.ts

@@ -1,25 +0,0 @@
-import {
-  Component,
-  OnDestroy,
-  AfterViewInit,
-  Input,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-
-import './ckeditor.loader';
-import 'ckeditor';
-
-@Component({
-  selector: 'ngx-ckeditor',
-  template: `
-    <nga-card>
-      <nga-card-body>
-        <ckeditor [config]="{extraPlugins: 'divarea'}"></ckeditor>
-      </nga-card-body>
-    </nga-card>
-  `,
-})
-export class CKEditorComponent {
-
-}

src/app/pages/editors/ckeditor.loader.ts

@@ -1 +0,0 @@
-window['CKEDITOR_BASEPATH'] = '//cdn.ckeditor.com/4.6.2/full-all/';

src/app/pages/editors/editors-routing.module.ts

@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { EditorsComponent } from './editors.component';
 import { TinyMCEComponent } from './tiny-mce/tiny-mce.component';
-import { CKEditorComponent } from './ckeditor.component';
+import { CKEditorComponent } from './ckeditor/ckeditor.component';
 
 const routes: Routes = [{
   path: '',

src/app/pages/pages-menu.ts

@@ -29,6 +29,9 @@ export const menuItems: List<NgaMenuItem> = List([{
   }, {
     title: 'Typography',
     link: '/pages/ui-features/typography',
+  }, {
+    title: 'Tabs',
+    link: '/pages/ui-features/tabs',
   }]),
 }, {
   title: 'Components',

src/app/pages/pages.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 import 'style-loader!../@theme/styles/cosmic/cosmic.theme.scss';
 import 'style-loader!../@theme/styles/light/light.theme.scss';
+import 'style-loader!../@theme/styles/default/default.theme.scss';
 
 @Component({
   selector: 'ngx-pages',

src/app/pages/ui-features/tabs/tabs.component.html

@@ -0,0 +1,26 @@
+<div class="row">
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>Tabset</nga-card-header>
+      <nga-card-body>
+        <nga-tabset>
+          <nga-tab tabTitle="Tab #1">
+            <span>Content #1</span>
+          </nga-tab>
+          <nga-tab tabTitle="Tab #2">
+            <span>Content #2</span>
+          </nga-tab>
+          <nga-tab tabTitle="Tab #3">
+            <span>Content #3</span>
+          </nga-tab>
+        </nga-tabset>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>Route Tabset</nga-card-header>
+      <nga-card-body></nga-card-body>
+    </nga-card>
+  </div>
+</div>

src/app/pages/ui-features/tabs/tabs.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-tabs',
+  styleUrls: ['./tabs.component.scss'],
+  templateUrl: './tabs.component.html',
+})
+export class TabsComponent {
+}

src/app/pages/ui-features/ui-features-routing.module.ts

@@ -7,6 +7,7 @@ import { GridComponent } from './grid/grid.component';
 import { IconsComponent } from './icons/icons.component';
 import { ModalsComponent } from './modals/modals.component';
 import { TypographyComponent } from './typography/typography.component';
+import { TabsComponent } from './tabs/tabs.component';
 
 const routes: Routes = [{
   path: '',
@@ -26,6 +27,9 @@ const routes: Routes = [{
   }, {
     path: 'typography',
     component: TypographyComponent,
+  }, {
+    path: 'tabs',
+    component: TabsComponent,
   }],
 }];
 

src/app/pages/ui-features/ui-features.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { NgaTabsetModule, NgaRouteTabsetModule } from '@nga/theme';
 
 import { SharedModule } from '../../shared.module';
 
@@ -18,6 +19,7 @@ import { GroupButtonsComponent } from './buttons/group/group.component';
 import { LargeButtonsComponent } from './buttons/large/large.component';
 import { ModalComponent } from './modals/modal/modal.component';
 import { TypographyComponent } from './typography/typography.component';
+import { TabsComponent } from './tabs/tabs.component';
 
 const COMPONENTS = [
   UiFeaturesComponent,
@@ -35,12 +37,15 @@ const COMPONENTS = [
   LargeButtonsComponent,
   ModalComponent,
   TypographyComponent,
+  TabsComponent,
 ];
 
 @NgModule({
   imports: [
     SharedModule,
     UiFeaturesRoutingModule,
+    NgaTabsetModule,
+    NgaRouteTabsetModule,
   ],
   declarations: [
     ...COMPONENTS,