refactor(app): rename components, move tinymce to separate file

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'footer',
+  selector: 'ngx-footer',
   styleUrls: ['./footer.component.scss'],
   template: `
     <span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>

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

@@ -4,7 +4,7 @@ import { NgaSidebarService, NgaMenuService } from '@nga/theme';
 import { NgaThemeService } from '@nga/theme/services/theme.service';
 
 @Component({
-  selector: 'header',
+  selector: 'ngx-header',
   styleUrls: ['./header.component.scss'],
   template: `
     <div class="left">
@@ -14,7 +14,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
     </div>
     
     <nga-actions size="medium" inverse class="right">
-      <nga-action><search-input></search-input></nga-action>
+      <nga-action><ngx-search-input></ngx-search-input></nga-action>
       <nga-action icon="ion-ios-email-outline"></nga-action>
       <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
       <nga-action>

src/app/@theme/components/index.ts

@@ -1,3 +1,4 @@
 export * from './header/header.component';
 export * from './footer/footer.component';
-export * from '../components/search-input/search-input.component';
+export * from './search-input/search-input.component';
+export * from './tiny-mce/time-mce.component';

src/app/@theme/components/search-input/search-input.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
 
 @Component({
-  selector: 'search-input',
+  selector: 'ngx-search-input',
   styleUrls: ['./search-input.component.scss'],
   template: `
     <i class="control-icon ion ion-ios-search"

src/app/@theme/components/tiny-mce/time-mce.component.ts

@@ -0,0 +1,33 @@
+import {Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef} from '@angular/core';
+
+@Component({
+  selector: 'ngx-tiny-mce',
+  template: '',
+})
+export class TinyMCEComponent implements OnDestroy, AfterViewInit {
+
+  @Output() editorKeyup = new EventEmitter<any>();
+
+  editor: any;
+
+  constructor(private host: ElementRef) { }
+
+  ngAfterViewInit() {
+    tinymce.init({
+      target: this.host.nativeElement,
+      plugins: ['link', 'paste', 'table'],
+      skin_url: 'assets/skins/lightgray',
+      setup: editor => {
+        this.editor = editor;
+        editor.on('keyup', () => {
+          let content = editor.getContent();
+          this.editorKeyup.emit(content);
+        });
+      },
+    });
+  }
+
+  ngOnDestroy() {
+    tinymce.remove(this.editor);
+  }
+}

src/app/@theme/layouts/one-column/one-column.layout.ts

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
   template: `
     <nga-layout>
       <nga-layout-header fixed>
-        <header></header>
+        <ngx-header></ngx-header>
       </nga-layout-header>
 
       <nga-sidebar>
@@ -17,7 +17,7 @@ import { Component } from '@angular/core';
       </nga-layout-column>
 
       <nga-layout-footer fixed>
-        <footer></footer>
+        <ngx-footer></ngx-footer>
       </nga-layout-footer>
     </nga-layout>
   `,

src/app/@theme/theme.module.ts

@@ -13,7 +13,13 @@ import {
   NgaActionsModule,
 } from '@nga/theme';
 
-import { SearchInputComponent, HeaderComponent, FooterComponent } from './components';
+import {
+  HeaderComponent,
+  FooterComponent,
+  SearchInputComponent,
+  TinyMCEComponent
+} from './components';
+
 import { OneColumnLayoutComponent } from './layouts';
 
 const BASE_MODULES = [
@@ -36,12 +42,8 @@ const COMPONENTS = [
   HeaderComponent,
   FooterComponent,
   SearchInputComponent,
-];
-
-const LAYOUTS = [
+  TinyMCEComponent,
   OneColumnLayoutComponent,
-  HeaderComponent,
-  FooterComponent,
 ];
 
 @NgModule({
@@ -54,11 +56,9 @@ const LAYOUTS = [
     ...BASE_MODULES,
     ...NGA_MODULES,
     ...COMPONENTS,
-    ...LAYOUTS,
   ],
   declarations: [
     ...COMPONENTS,
-    ...LAYOUTS,
   ],
 })
 export class ThemeModule {