feat: docs app

docs/app/blocks/components/theme-block/theme-block.component.html

@@ -0,0 +1,43 @@
+<nb-card>
+  <nb-card-body>
+    <h2>{{ vm.themeTitle }} Theme</h2>
+    <p *ngIf="vm.parentTheme">inherited from {{ vm.parentTheme }} theme</p>
+
+    <div class="search-wrapper">
+      <input class="search-control" placeholder="Search for..." [formControl]="searchControl">
+    </div>
+
+    <table class="striped">
+      <thead>
+        <tr>
+          <td>Name</td>
+          <td>Value</td>
+          <td>Parent</td>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr *ngFor="let prop of vm.filteredThemeProperties | async"
+            [ngxFragment]="prop.name"
+            [ngxFragmentSync]="false"
+            ngxFragmentClass="highlighted-row">
+          <td>
+            <a [routerLink]="" fragment="{{ prop.name }}">{{ prop.name }}</a>
+          </td>
+
+          <td ngxColorSwatch>{{ prop.value }}</td>
+
+          <td>
+            <a [routerLink]="['/docs/themes', parent.theme]" fragment="{{ parent.prop }}"
+              [class.inheritance-property]="index > 0"
+              *ngFor="let parent of prop.parents; let index = index">
+              <i *ngIf="index > 0" class="inheritance-icon feather-arrow-left"></i>
+              <span>{{ parent.prop }}</span>
+              <span *ngIf="parent.theme !== vm.themeName" class="parent-theme-name">({{ parent.theme }})</span>
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </nb-card-body>
+</nb-card>

docs/app/blocks/components/theme-block/theme-block.component.scss

@@ -0,0 +1,40 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  $inherited-fg: nb-theme(color-fg);
+  $search-fg: nb-theme(color-fg);
+  $search-bg: nb-theme(color-white);
+  $search-border: 1px solid nb-theme(color-gray-light);
+  $selected-row-bg: nb-theme(color-gray-light);
+
+  .inheritance-icon {
+    margin: 0 0.25rem;
+  }
+
+  .inheritance-property {
+    color: $inherited-fg;
+  }
+
+  .parent-theme-name {
+    margin-left: 0.25rem;
+  }
+
+  .highlighted-row {
+    background-color: $selected-row-bg !important;
+  }
+
+  .search-control {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: $search-fg;
+    background-color: $search-bg;
+    background-clip: padding-box;
+    border: $search-border;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+}

docs/app/blocks/components/theme-block/theme-block.component.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { takeWhile, skip, distinctUntilChanged, debounceTime } from 'rxjs/operators';
+
+import { ThemeBlockModel } from './theme-block.model';
+import { ThemeBlockViewModel } from './theme-block.viewmodel';
+
+@Component({
+  selector: 'ngx-theme-block',
+  styleUrls: ['./theme-block.component.scss'],
+  templateUrl: './theme-block.component.html',
+  providers: [ThemeBlockModel, ThemeBlockViewModel],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxThemeComponent implements OnInit, OnDestroy {
+  searchControl = new FormControl();
+
+  private alive: boolean = true;
+
+  @Input('block')
+  set setBlock(block: any) {
+    this.vm.themeTitle = block.name;
+    this.vm.themeName = block.source.name;
+    this.vm.parentTheme = block.source.parent;
+    this.vm.themeProperties = block.source.data;
+  }
+
+  constructor(public vm: ThemeBlockViewModel) {}
+
+  ngOnInit() {
+    this.searchControl.valueChanges
+      .pipe(skip(1), distinctUntilChanged(), debounceTime(300), takeWhile(() => this.alive))
+      .subscribe(value => this.vm.changeSearch(value));
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}

docs/app/blocks/components/theme-block/theme-block.model.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ThemeBlockModel {
+  themeTitle: string;
+  themeName: string;
+  parentTheme: string;
+  themeProperties: any[];
+
+  setThemeTitle(value) {
+    this.themeTitle = value;
+  }
+
+  setThemeName(value) {
+    this.themeName = value;
+  }
+
+  setParentTheme(value) {
+    this.parentTheme = value;
+  }
+
+  setThemeProperties(value) {
+    this.themeProperties = value;
+  }
+}

docs/app/blocks/components/theme-block/theme-block.viewmodel.ts

@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject, of as observableOf } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+import { ThemeBlockModel } from './theme-block.model';
+
+@Injectable()
+export class ThemeBlockViewModel {
+  private searchChanges$ = new BehaviorSubject<string>(null);
+
+  constructor(private model: ThemeBlockModel) {}
+
+  changeSearch(value) {
+    this.searchChanges$.next(value);
+  }
+
+  get themeTitle(): string {
+    return this.model.themeTitle;
+  }
+
+  set themeTitle(value) {
+    this.model.setThemeTitle(value);
+  }
+
+  get themeName(): string {
+    return this.model.themeName;
+  }
+
+  set themeName(value) {
+    this.model.setThemeName(value);
+  }
+
+  get parentTheme(): string {
+    return this.model.parentTheme;
+  }
+
+  set parentTheme(value) {
+    this.model.setParentTheme(value);
+  }
+
+  get themeProperties(): any[] {
+    return this.model.themeProperties;
+  }
+
+  set themeProperties(value) {
+    const result = Object.entries(value).map(([key, data]) => {
+      const propertyValue = data['value'];
+      return {
+        name: key,
+        value: Array.isArray(propertyValue) ? propertyValue.join(' ') : propertyValue,
+        parents: data['parents'],
+      };
+    });
+    this.model.setThemeProperties(result);
+  }
+
+  get filteredThemeProperties(): Observable<any[]> {
+    return this.searchChanges$.asObservable().pipe(
+      switchMap(value => {
+        if (value) {
+          return observableOf(
+            this.themeProperties.filter(({ name }) => name.toLowerCase().includes(value.toLowerCase())),
+          );
+        }
+        return observableOf(this.themeProperties);
+      }),
+    );
+  }
+}