feat(layouts): layouts + theme settings panel preview

src/app/@theme/components/theme-settings/theme-settings.component.scss

@@ -0,0 +1,22 @@
+@import '../../styles/variables';
+
+@include nga-install-component() {
+  .settings-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: 0.5rem;
+    flex-wrap: wrap;
+
+    a {
+      font-size: 2rem;
+      margin-right: 1rem;
+      color: nga-theme(color-white);
+
+      &.selected {
+        color: nga-theme(color-success);
+      }
+    }
+  }
+}
+

src/app/@theme/components/theme-settings/theme-settings.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { StateService } from '../../../@core/data/state.service';
+
+@Component({
+  selector: 'ngx-theme-settings',
+  styleUrls: ['./theme-settings.component.scss'],
+  template: `
+    <strong class="small">LAYOUTS</strong>
+    <div class="settings-row">
+      <a *ngFor="let layout of layouts"
+         href="#"
+         [class.selected]="layout.selected"
+         [attr.title]="layout.name"
+         (click)="layoutSelect(layout)">
+        <i [attr.class]="layout.icon"></i>
+      </a>
+    </div>
+    <strong class="small">SIDEBAR</strong>
+    <div class="settings-row">
+      <a *ngFor="let sidebar of sidebars"
+         href="#"
+         [class.selected]="sidebar.selected"
+         [attr.title]="sidebar.name"
+         (click)="sidebarSelect(sidebar)">
+        <i [attr.class]="sidebar.icon"></i>
+      </a>
+    </div>
+  `,
+})
+export class ThemeSettingsComponent {
+
+  layouts = [];
+  sidebars = [];
+
+  constructor(protected stateService: StateService) {
+    this.stateService.getLayoutStates()
+      .subscribe((layouts: any[]) => this.layouts = layouts);
+
+    this.stateService.getSidebarStates()
+      .subscribe((sidebars: any[]) => this.sidebars = sidebars);
+  }
+
+  layoutSelect(layout: any): boolean {
+    this.layouts = this.layouts.map((l: any) => {
+      l.selected = false;
+      return l;
+    });
+
+    layout.selected = true;
+    this.stateService.setLayoutState(layout);
+    return false;
+  }
+
+  sidebarSelect(sidebars: any): boolean {
+    this.sidebars = this.sidebars.map((s: any) => {
+      s.selected = false;
+      return s;
+    });
+
+    sidebars.selected = true;
+    this.stateService.setSidebarState(sidebars);
+    return false;
+  }
+}