build: starter-kit clean up

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

@@ -8,6 +8,7 @@
   <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
     <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
   </nb-select>
+  <ngx-layout-direction-switcher class="direction-switcher"></ngx-layout-direction-switcher>
 </div>
 
 <div class="header-container">

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

@@ -52,6 +52,11 @@
     }
   }
 
+  .direction-switcher {
+    @include nb-ltr(margin-left, 2rem);
+    @include nb-rtl(margin-right, 2rem);
+  }
+
   @include media-breakpoint-down(sm) {
     .control-item {
       display: none;
@@ -63,7 +68,8 @@
   }
 
   @include media-breakpoint-down(is) {
-    nb-select {
+    nb-select,
+    .direction-switcher {
       display: none;
     }
   }

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

@@ -2,7 +2,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
 
 import { UserData } from '../../../@core/data/users';
-import { LayoutService } from '../../../@core/utils';
 import { map, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
@@ -44,7 +43,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
               private menuService: NbMenuService,
               private themeService: NbThemeService,
               private userService: UserData,
-              private layoutService: LayoutService,
               private breakpointService: NbMediaBreakpointsService) {
   }
 
@@ -82,7 +80,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
   toggleSidebar(): boolean {
     this.sidebarService.toggle(true, 'menu-sidebar');
-    this.layoutService.changeLayoutSize();
 
     return false;
   }

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

@@ -1,4 +1,5 @@
 export * from './header/header.component';
 export * from './footer/footer.component';
 export * from './search-input/search-input.component';
-export * from './tiny-mce/tiny-mce.component';
+export * from './switcher/switcher.component';
+export * from './layout-direction-switcher/layout-direction-switcher.component';

src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnDestroy, Input } from '@angular/core';
+import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'ngx-layout-direction-switcher',
+  template: `
+    <ngx-switcher
+      [firstValue]="directions.RTL"
+      [secondValue]="directions.LTR"
+      [firstValueLabel]="'RTL'"
+      [secondValueLabel]="'LTR'"
+      [value]="currentDirection"
+      (valueChange)="toggleDirection($event)"
+      [vertical]="vertical">
+    </ngx-switcher>
+  `,
+})
+export class LayoutDirectionSwitcherComponent implements OnDestroy {
+
+  protected destroy$ = new Subject<void>();
+
+  directions = NbLayoutDirection;
+  currentDirection: NbLayoutDirection;
+
+  @Input() vertical: boolean = false;
+
+  constructor(private directionService: NbLayoutDirectionService) {
+    this.currentDirection = this.directionService.getDirection();
+
+    this.directionService.onDirectionChange()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(newDirection => this.currentDirection = newDirection);
+  }
+
+  toggleDirection(newDirection) {
+    this.directionService.setDirection(newDirection);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

src/app/@theme/components/switcher/switcher.component.scss

@@ -0,0 +1,91 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  .switch-label {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    cursor: pointer;
+    margin: 0;
+
+    &.vertical {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .first,
+      .second {
+        padding: 0;
+      }
+
+      .switch {
+        margin-top: 0.5em;
+      }
+    }
+
+    & > span {
+      transition: opacity 0.3s ease;
+      color: nb-theme(text-hint-color);
+
+      &.first {
+        @include nb-ltr(padding-right, 10px);
+        @include nb-rtl(padding-left, 10px);
+      }
+
+      &.second {
+        @include nb-ltr(padding-left, 10px);
+        @include nb-rtl(padding-right, 10px);
+      }
+
+      &.active {
+        color: nb-theme(text-basic-color);
+      }
+
+      &:active {
+        opacity: 0.78;
+      }
+    }
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 3rem;
+    height: 1.5rem;
+    margin: 0;
+
+    input {
+      display: none;
+
+      &:checked + .slider::before {
+        @include nb-ltr(transform, translateX(1.5rem));
+        @include nb-rtl(transform, translateX(-1.5rem));
+      }
+    }
+
+    .slider {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 1.75rem;
+      background-color: nb-theme(background-basic-color-2);
+    }
+
+    .slider::before {
+      position: absolute;
+      content: '';
+      height: 1.5rem;
+      width: 1.5rem;
+      border-radius: 50%;
+      background-color: nb-theme(color-primary-default);
+      transition: 0.2s;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    align-items: flex-end;
+  }
+}

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

@@ -0,0 +1,58 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'ngx-switcher',
+  styleUrls: ['./switcher.component.scss'],
+  template: `
+    <label class="switch-label" [class.vertical]="vertical">
+      <span class="first" [class.active]="vertical || isFirstValue()">
+        {{vertical ? currentValueLabel() : firstValueLabel}}
+      </span>
+
+      <div class="switch">
+        <input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
+        <span class="slider"></span>
+      </div>
+
+      <span *ngIf="!vertical"
+            class="second"
+            [class.active]="isSecondValue()">
+          {{secondValueLabel}}
+      </span>
+    </label>
+  `,
+})
+export class SwitcherComponent {
+  @Input() firstValue: any;
+  @Input() secondValue: any;
+
+  @Input() firstValueLabel: string;
+  @Input() secondValueLabel: string;
+
+  @Input() vertical: boolean;
+
+  @Input() value: any;
+  @Output() valueChange = new EventEmitter<any>();
+
+  isFirstValue() {
+    return this.value === this.firstValue;
+  }
+
+  isSecondValue() {
+    return this.value === this.secondValue;
+  }
+
+  currentValueLabel() {
+    return this.isFirstValue()
+      ? this.firstValueLabel
+      : this.secondValueLabel;
+  }
+
+  changeValue() {
+    this.value = this.isFirstValue()
+      ? this.secondValue
+      : this.firstValue;
+
+    this.valueChange.emit(this.value);
+  }
+}

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

@@ -1,33 +0,0 @@
-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', () => {
-          this.editorKeyup.emit(editor.getContent());
-        });
-      },
-      height: '320',
-    });
-  }
-
-  ngOnDestroy() {
-    tinymce.remove(this.editor);
-  }
-}

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

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
         <ngx-header></ngx-header>
       </nb-layout-header>
 
-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 

src/app/@theme/layouts/three-columns/three-columns.layout.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
         <ngx-header></ngx-header>
       </nb-layout-header>
 
-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 

src/app/@theme/layouts/two-columns/two-columns.layout.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
         <ngx-header></ngx-header>
       </nb-layout-header>
 
-      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
         <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 

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

@@ -19,8 +19,9 @@ import { NbSecurityModule } from '@nebular/security';
 import {
   FooterComponent,
   HeaderComponent,
+  LayoutDirectionSwitcherComponent,
   SearchInputComponent,
-  TinyMCEComponent,
+  SwitcherComponent,
 } from './components';
 import {
   CapitalizePipe,
@@ -54,10 +55,11 @@ const NB_MODULES = [
   NbEvaIconsModule,
 ];
 const COMPONENTS = [
+  SwitcherComponent,
+  LayoutDirectionSwitcherComponent,
   HeaderComponent,
   FooterComponent,
   SearchInputComponent,
-  TinyMCEComponent,
   OneColumnLayoutComponent,
   ThreeColumnsLayoutComponent,
   TwoColumnsLayoutComponent,