fontastic 0.1.3

package/src/app/layout/navigation/navigation.component.ts

@@ -0,0 +1,302 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { UtilsService, MessageService, PresentationService, DatabaseService, BreadcrumbService, ModalService } from '@app/core/services';
+import { SystemStats } from '@main/types';
+import { Collection } from '@main/database/entity/Collection.schema';
+
+type CollectionWithChildren<T> = Partial<T> & { children: Collection[] };
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss']
+})
+export class NavigationComponent implements OnInit, OnDestroy {
+
+  resultSet: CollectionWithChildren<Collection>[] = [];
+
+  collectionId: number;
+
+  toggleDetails = false;
+
+  statsCollapsed = true;
+  foldersCollapsed = true;
+  optionsCollapsed = true;
+  toggleCollapsed = false;
+
+  rowCount = 0;
+  activatedCount = 0;
+  favoriteCount = 0;
+  systemCount = 0;
+
+  constructor(
+    private utils: UtilsService,
+    private messageService: MessageService,
+    private modalService: ModalService,
+    private databaseService: DatabaseService,
+    private breadcrumbService: BreadcrumbService,
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit() {
+    this.presentationService._statsCollapsed.subscribe((result) => this.statsCollapsed = result);
+    this.presentationService._foldersCollapsed.subscribe((result) => this.foldersCollapsed = result);
+    this.presentationService._optionsCollapsed.subscribe((result) => this.optionsCollapsed = result);
+
+    // Bootup fetch store.
+    this.databaseService.watchCollectionId$.subscribe((collectionId: number) => {
+      if (collectionId) {
+        this.collectionId = collectionId;
+        this.databaseService.setWhere('collection_id', collectionId).run();
+      } else {
+        this.databaseService.run();
+      }
+    });
+
+    this.databaseService.watchCollectionResultSet$.subscribe((results: Collection[]) => {
+      if (results?.length) {
+        this.breadcrumbService.setNavigation(this.collectionId, results);
+        const copy = results.map(item => ({ ...item }));
+        this.resultSet = this.utils.listToTree(copy);
+      }
+    });
+
+    this.databaseService.watchSystemStats$.subscribe((result: SystemStats) => {
+      this.rowCount = (result?.rowCount) ? result.rowCount : 0;
+      this.favoriteCount = (result?.favoriteCount) ? result.favoriteCount : 0;
+      this.systemCount = (result?.systemCount) ? result.systemCount : 0;
+      this.activatedCount = (result?.activatedCount) ? result.activatedCount : 0;
+    });
+  }
+
+  ngOnDestroy() {
+    console.log('Navigation destroyed: ' + Date.now());
+  }
+
+  handleNavigate(event: Event, collectionId: number): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target = event.target as HTMLElement;
+    const parent = target.parentElement.parentElement as HTMLElement;
+
+    if (collectionId === this.collectionId) {
+      return;
+    }
+
+    this.databaseService.stats = false;
+    this.databaseService.search = false;
+
+    this.toggleSelected(parent);
+    this.clearSelectedStats();
+
+    this.messageService.collectionEnable(collectionId, { enabled: true }).then((results: Collection[]) => {
+      this.databaseService.resetPage(1);
+      this.databaseService.setCollectionId(collectionId);
+      this.databaseService.setCollectionResultSet(results);
+    });
+  }
+
+  handleCollapse(event: Event, collectionId: number): void {
+    event.stopPropagation();
+
+    const target = event.target as HTMLElement;
+    const element = target.parentElement.parentElement.parentElement as HTMLElement;
+
+    const isOpen: boolean = element.hasAttribute('open');
+
+    this.messageService.collectionUpdate(collectionId, { collapsed: !isOpen });
+  }
+
+  handleUpdate(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.modalService.open('collection-update');
+  }
+
+  /**
+   * End collection methods 
+   */
+
+  toggleCollapse(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const item = target.parentElement.parentElement as HTMLElement;
+
+    const collectionId = Number(item.getAttribute('data-collection'));
+
+    const isFigStats: boolean = target.hasAttribute('data-figure-stats');
+    const isFigFolders: boolean = target.hasAttribute('data-figure-folders');
+    const isFigOptions: boolean = target.hasAttribute('data-figure-options');
+
+    const isCollapsed: boolean = item.classList.contains('collapsed');
+
+    if (isCollapsed) {
+      item.classList.remove('collapsed');
+      //target.innerHTML = 'arrow_right';
+    } else {
+      item.classList.add('collapsed');
+      //target.innerHTML = 'arrow_drop_down';
+    }
+
+    if (collectionId) {
+      this.messageService.collectionUpdate(collectionId, { collapsed: isCollapsed ? false : true });
+    }
+
+    if (isFigStats) {
+      this.presentationService.setStatsCollapsed(isCollapsed ? false : true);
+    }
+
+    if (isFigFolders) {
+      this.presentationService.setFoldersCollapsed(isCollapsed ? false : true);
+    }
+
+    if (isFigOptions) {
+      this.presentationService.setOptionsCollapsed(isCollapsed ? false : true);
+    }
+
+    this.presentationService.saveLayoutSettings();
+  }
+
+  toggleFigureCollapse(): void {
+    this.toggleCollapsed = !this.toggleCollapsed;
+
+    this.statsCollapsed = this.toggleCollapsed;
+    this.foldersCollapsed = this.toggleCollapsed;
+    this.optionsCollapsed = this.toggleCollapsed;
+
+    const toggle = this.toggleCollapsed;
+
+    this.presentationService.setStatsCollapsed(toggle);
+    this.presentationService.setFoldersCollapsed(toggle);
+    this.presentationService.setOptionsCollapsed(toggle);
+  }
+
+  toggleDetailsOpen(): void {
+    this.toggleDetails = !this.toggleDetails;
+
+    const elems = document.querySelectorAll('details') as NodeListOf<HTMLElement>;
+
+    const ids = [];
+    elems.forEach((element: HTMLElement) => {
+      ids.push(element.getAttribute('data-id'));
+      if (this.toggleDetails) {
+        if (!element.hasAttribute('open')) {
+          element.setAttribute('open', '1');
+        }
+      } else {
+        if (element.hasAttribute('open')) {
+          element.removeAttribute('open');
+        }
+      }
+    });
+
+    this.messageService.collectionUpdateIds(ids, { collapsed: this.toggleDetails });
+  }
+
+  handleClickAll(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const parent = target.parentNode as HTMLElement;
+
+    this.databaseService.stats = true;
+    this.databaseService.search = false;
+    this.databaseService.resetWhere().run();
+
+    this.clearSelectedStats();
+    this.clearSelectedDetails();
+    this.toggleSelected(parent);
+
+    this.breadcrumbService.set([{
+      title: 'System Statistics',
+      link: '/main',
+      type: 'collection'
+    }, {
+      title: 'Font Count',
+      link: '',
+      type: 'collection'
+    }]);
+  }
+
+  handleClickFavorites(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const parent = target.parentNode as HTMLElement;
+
+    this.databaseService.stats = true;
+    this.databaseService.search = false;
+    this.databaseService.setWhere('store.favorite', 1).run();
+
+    this.clearSelectedStats();
+    this.clearSelectedDetails();
+    this.toggleSelected(parent);
+
+    this.breadcrumbService.set([{
+      title: 'System Statistics',
+      link: '/main',
+      type: 'collection'
+    }, {
+      title: 'My Favorites',
+      link: '',
+      type: 'collection'
+    }]);
+  }
+
+  handleClickSystem(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const parent = target.parentNode as HTMLElement;
+
+    this.databaseService.stats = true;
+    this.databaseService.search = false;
+    this.databaseService.setWhere('store.system', 1).run();
+
+    this.clearSelectedStats();
+    this.clearSelectedDetails();
+    this.toggleSelected(parent);
+
+    this.breadcrumbService.set([{
+      title: 'System Statistics',
+      link: '/main',
+      type: 'collection'
+    }, {
+      title: 'System Fonts',
+      link: '',
+      type: 'collection'
+    }]);
+  }
+
+  handleClickActivated(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const parent = target.parentNode as HTMLElement;
+
+    this.databaseService.stats = true;
+    this.databaseService.search = false;
+    this.databaseService.setWhere('store.activated', 1).run();
+
+    this.clearSelectedStats();
+    this.clearSelectedDetails();
+    this.toggleSelected(parent);
+
+    this.breadcrumbService.set([{
+      title: 'System Statistics',
+      link: '/main',
+      type: 'collection'
+    }, {
+      title: 'Activated Fonts',
+      link: '',
+      type: 'collection'
+    }]);
+  }
+
+  clearSelectedStats(): void {
+    const elms = document.querySelectorAll('ul.statistics > li > a') as NodeListOf<HTMLElement>;
+    elms.forEach((el: HTMLElement) => el.classList.remove('selected'));
+  }
+
+  clearSelectedDetails(): void {
+    const elms = document.querySelectorAll('details > summary') as NodeListOf<HTMLElement>;
+    elms.forEach((el: HTMLElement) => el.classList.remove('selected'));
+  }
+
+  toggleSelected(el: HTMLElement): void {
+    if (!el.classList.contains('selected')) {
+      el.classList.add('selected');
+    }
+  }
+}

package/src/app/pages/main/grid/grid.component.html

@@ -0,0 +1,160 @@
+<div class="component border-top">
+  <div class="component__panel">
+    <div class="hover-scrollbox-y hover-scrollbox-x h-full min-h-full" [class.loading]="isLoading" #gridElement>
+
+      <table class="table striped border-separate border-spacing-1">
+        <thead>
+          <tr>
+            <th class="sorting sort_center sort_input" (click)="handleSort('activated')">
+              <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'activated'">&uarr;</span>
+              <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'activated'">&darr;</span>
+            </th>
+            <th class="sorting sort_center sort_input" (click)="handleSort('temporary')" *ngIf="isWindows">
+              <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'temporary'">&uarr;</span>
+              <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'temporary'">&darr;</span>
+            </th>
+            <th class="sorting text-left" (click)="handleSort('full_name')">
+              <span class="flex items-center justify-between w-full">
+                <span>Name</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'full_name'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'full_name'">&darr;</span>
+                </span>
+              </span>
+            </th>
+            <th class="sorting text-left" (click)="handleSort('font_family')">
+              <span class="flex items-center justify-between w-full">
+                <span>Family</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'font_family'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'font_family'">&darr;</span>
+                </span>
+              </span>
+            </th>
+            <th class="sorting text-left" (click)="handleSort('file_type')">
+              <span class="flex items-center justify-between w-full">
+                <span>Type</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'file_type'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'file_type'">&darr;</span>
+                </span>
+              </span>
+            </th>
+            <th class="sorting text-left" (click)="handleSort('file_size')">
+              <span class="flex items-center justify-between w-full">
+                <span>Size</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'file_size'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'file_size'">&darr;</span>
+                </span>
+              </span>
+            </th>
+            <th class="sorting text-left" (click)="handleSort('designer')">
+              <span class="flex items-center justify-between w-full">
+                <span>Designer</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'designer'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'designer'">&darr;</span>
+                </span>
+              </span>
+            </th>
+            <th class="sorting text-left" (click)="handleSort('manufacturer')">
+              <span class="flex items-center justify-between w-full">
+                <span>Manufacturer</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'manufacturer'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'manufacturer'">&darr;</span>
+                </span>
+              </span>
+            </th>
+            <th class="sorting text-left" (click)="handleSort('version')">
+              <span class="flex items-center justify-between w-full">
+                <span>Version</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'version'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'version'">&darr;</span>
+                </span>
+              </span>
+            </th>
+            <th class="sorting text-left" (click)="handleSort('unique_id')">
+              <span class="flex items-center justify-between w-full">
+                <span>Unique Id</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'unique_id'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'unique_id'">&darr;</span>
+                </span>
+              </span>
+            </th>
+            <th class="sorting text-center" (click)="handleSort('created')">
+              <span class="flex items-center justify-between w-full">
+                <span>Created</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'created'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'created'">&darr;</span>
+                </span>
+              </span>
+            </th>
+            <th class="sorting text-center" (click)="handleSort('updated')">
+              <span class="flex items-center justify-between w-full">
+                <span>Updated</span>
+                <span>
+                  <span *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'updated'">&uarr;</span>
+                  <span *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'updated'">&darr;</span>
+                </span>
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <ng-container *ngFor="let item of resultSet">
+
+            <tr (click)="onRowClick(item.id)" [attr.id]="item.id" [attr.data-row]="item.id">
+
+              <ng-container *ngIf="item.installable; else p1">
+                <td [attr.title]="item.activated ? 'Remove' : 'Add'">
+                  <div class="checkbox" (click)="handleActivate($event, item, false)">
+                    <input type="checkbox" name="activate--{{item.id}}" id="{{item.id}}" value="{{item.id}}"
+                      [checked]="item.activated" />
+                    <label for="{{item.id}}"></label>
+                  </div>
+                </td>
+              </ng-container>
+              <ng-template #p1>
+                <td></td>
+              </ng-template>
+
+              <ng-container *ngIf="isWindows">
+                <ng-container *ngIf="item.installable; else t1">
+                  <td [attr.title]="item.temporary ? 'Remove' : 'Add'">
+                    <div class="radio" (click)="handleActivate($event, item, true)">
+                      <input type="radio" name="temporary--{{item.id}}" id="{{item.id}}" value="{{item.id}}"
+                        [checked]="item.temporary" />
+                      <label for="{{item.id}}"></label>
+                    </div>
+                  </td>
+                </ng-container>
+                <ng-template #t1>
+                  <td></td>
+                </ng-template>
+              </ng-container>
+
+              <td class="text-left">{{ item.full_name }}</td>
+              <td class="text-left">{{ item.font_family }}</td>
+              <td class="text-center">{{ item.file_type }}</td>
+              <td class="text-center">{{ item.file_size_pretty }}</td>
+              <td class="text-left">{{ item.designer }}</td>
+              <td class="text-left">{{ item.manufacturer }}</td>
+              <td class="text-left">{{ item.version }}</td>
+              <td class="text-left">{{ item.unique_id }}</td>
+              <td class="text-center">{{item.created | date :'medium'}}</td>
+              <td class="text-center">{{item.updated | date :'medium'}}</td>
+            </tr>
+
+          </ng-container>
+        </tbody>
+      </table>
+
+
+    </div>
+  </div>
+</div>

package/src/app/pages/main/grid/grid.component.scss

@@ -0,0 +1,3 @@
+:host {
+  margin-top: -1px;
+}

package/src/app/pages/main/grid/grid.component.ts

@@ -0,0 +1,98 @@
+import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
+import { delay } from 'rxjs/operators';
+import { AlertService, ConfigService, UtilsService, DatabaseService, MessageService } from '@app/core/services';
+import { Store } from '@main/database/entity/Store.schema';
+import { QueryOptions } from '@main/types';
+
+@Component({
+  selector: 'app-grid',
+  templateUrl: './grid.component.html',
+  styleUrls: ['./grid.component.scss']
+})
+export class GridComponent implements OnInit, OnDestroy {
+
+  @ViewChild('gridElement', { static: true }) scrollElement: ElementRef;
+
+  resultSet: Store[] = [];
+  queryOptions: QueryOptions;
+
+  isLoading = true;
+  isWindows = false;
+
+  constructor(
+    private utils: UtilsService,
+    private alertService: AlertService,
+    private configService: ConfigService,
+    private messageService: MessageService,
+    private databaseService: DatabaseService,
+  ) {
+    this.isWindows = this.configService.getIsWindows();
+  }
+
+  ngOnInit() {
+    const scrollElement: Element = this.scrollElement.nativeElement;
+
+    this.databaseService.watchStoreResult$.pipe(delay(1e3 / 5)).subscribe((result: Store) => {
+      if (result?.id) {
+        const el: HTMLDivElement = document.querySelector(`[data-row="${result.id}"]`);
+        if (el) {
+          this.utils.scrollTo(scrollElement, el.offsetTop);
+        }
+      }
+    });
+
+    this.databaseService.watchStoreResultSet$.subscribe((result: Store[]) => {
+      this.resultSet = result;
+      this.isLoading = false;
+      scrollElement.scrollTop = 0;
+    });
+
+    // this.databaseService.setOrder('id', 'ASC');
+
+    this.databaseService.watchQueryOptions$.subscribe((result: QueryOptions) => this.queryOptions = result);
+  }
+
+  ngOnDestroy() {
+    this.resultSet = [];
+  }
+
+  onRowClick(id: number): void {
+    this.databaseService.setStoreId(id);
+  }
+
+  handleSort(column: string): void {
+    const collectionId = this.databaseService.getCollectionId();
+    const queryOptions: QueryOptions = this.databaseService.getQueryOptions();
+
+    this.databaseService.setOrder(column, (queryOptions.order.direction === 'DESC') ? 'ASC' : 'DESC').setWhere('collection_id', collectionId).run();
+  }
+
+  handleActivate(event: Event, item: Store, temporary: boolean = false): void {
+    const target = event.target as HTMLElement;
+    const input = target.firstChild as HTMLInputElement;
+    const checked = input.checked ? true : false;
+
+    input.checked = (checked) ? false : true;
+
+    if (!item.installable) {
+      this.alertService.warning('Only (OpenType) and (TrueType) fonts are supported.');
+      return;
+    }
+
+    const files = [];
+
+    files.push({
+      id: item.id,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      file_path: item.file_path
+    });
+
+    const options = { files, activate: !checked, temporary };
+
+    this.messageService.fontActivation(options).then(() => {
+      const message = (checked) ? `Successfully deactivated ${item.file_name}.` : `Successfully activated ${item.file_name}.`;
+      this.messageService.log(message, 1);
+      this.alertService.success(message);
+    }).catch((err) => this.alertService.error(err));
+  }
+}

package/src/app/pages/main/inspect/inspect.component.html

@@ -0,0 +1,7 @@
+<ng-container [ngSwitch]="componentName">
+  <div>
+    <app-glyph-list [fontObject]="fontObject" [fontColor]="fontColor" *ngSwitchCase="'glyph-list'"></app-glyph-list>
+    <app-typescale [fontObject]="fontObject" [fontFamily]="fontFamily" [latestNews]="latestNews" *ngSwitchCase="'typescale'"></app-typescale>
+    <app-pairing [fontObject]="fontObject" [fontFamily]="fontFamily" [latestNews]="latestNews" *ngSwitchCase="'pairing'"></app-pairing>
+  </div>
+</ng-container>

package/src/app/pages/main/inspect/inspect.component.scss

@@ -0,0 +1,3 @@
+:host {
+    margin-top: -1px;
+}

package/src/app/pages/main/inspect/inspect.component.ts

@@ -0,0 +1,66 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { DatabaseService, FontService, NewsService, PresentationService } from '@app/core/services';
+import { NewsArticlesType, NewsType } from '@main/types';
+import { Store } from '@main/database/entity/Store.schema';
+
+@Component({
+  selector: 'app-inspect',
+  templateUrl: './inspect.component.html',
+  styleUrls: ['./inspect.component.scss']
+})
+export class InspectComponent implements OnInit, OnDestroy {
+
+  componentName = 'glyph-list';
+  componentList = ['glyph-list', 'typescale'];
+
+  fontObject: opentype.Font;
+  fontFamily: string;
+  fontColor: string;
+  latestNews: NewsArticlesType[] = [];
+
+  constructor(
+    private fontService: FontService,
+    private databaseService: DatabaseService,
+    private newsService: NewsService,
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit() {
+    this.databaseService.watchStoreResult$.subscribe((result: Store) => {
+      if (result) {
+        this.fontFamily = result.file_name.replace(/\.[^/.]+$/, '');
+      }
+    });
+
+    this.fontService.watchFontObject$.subscribe((result: opentype.Font) => {
+      if (result) {
+        this.fontObject = result;
+      }
+    });
+
+    this.newsService.watchLatestNews$.subscribe((result: NewsType) => {
+      if (result?.articles?.length) {
+        this.latestNews = result.articles;
+      }
+    });
+
+    this.presentationService.watchFontColor$.subscribe((value) => this.fontColor = value);
+
+    this.presentationService._inspectComponent.subscribe((value: string) => {
+      this.componentName = this.componentList.includes(value) ? value : this.componentName;
+    });
+  }
+
+  ngOnDestroy() {
+    this.fontObject = null;
+  }
+
+  startsWithNumber(str: string): boolean {
+    return /^\d/.test(str);
+  }
+
+  onComponentSwitch(): void {
+    this.componentName = (this.componentName === 'glyph-list') ? 'typescale' : 'glyph-list';
+    this.presentationService.setInspectComponent(this.componentName);
+  }
+}

package/src/app/pages/main/main-routing.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { LayoutService } from '../../layout/layout.service';
+import { MainComponent } from './main.component';
+
+const mainModuleRoutes: Routes = [{
+  path: '',
+  redirectTo: '/main',
+  pathMatch: 'full'
+}, {
+  path: 'main',
+  component: MainComponent,
+}];
+
+const routes: Routes = [
+  LayoutService.childRoutes(mainModuleRoutes)
+];
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule, 
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class MainRoutingModule { }

package/src/app/pages/main/main.component.html

@@ -0,0 +1,6 @@
+<div class="panel" [class.preview]="previewEnabled" [class.inspect]="inspectEnabled" [class.toolbar]="toolbarEnabled" [class.grid]="gridEnabled">
+  <app-preview></app-preview>
+  <app-inspect></app-inspect>
+  <app-toolbar></app-toolbar>
+  <app-grid></app-grid>
+</div>