feat: docs app

docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html

@@ -0,0 +1,13 @@
+<button type="button"
+        *ngIf="hasViewSwitch"
+        class="btn action-item action-button"
+        (click)="switchToLiveView()">
+  <i class="icon feather-image"></i>
+  <span class="text">Live view</span>
+</button>
+
+<nb-tabset class="tabs-container">
+  <nb-tab *ngFor="let example of examples" tabTitle="{{ example.extension }}" [active]="example.active">
+    <ngx-code-block [path]="example.path" [code]="example.code"></ngx-code-block>
+  </nb-tab>
+</nb-tabset>

docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.scss

@@ -0,0 +1,84 @@
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+
+  $tab-fg: nb-theme(color-fg-heading-light);
+  $tab-active-fg: #ffffff;
+  $tab-active-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%);
+  $tabs-bb: #ebeff5;
+
+  display: block;
+  position: relative;
+
+  button {
+    background: transparent;
+    color: $tab-fg;
+    text-transform: inherit;
+    padding: 0.45rem 1.5rem;
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+    font-weight: normal;
+    font-size: 0.9rem;
+
+    .icon {
+      font-size: 0.95rem;
+    }
+
+    &:focus, &:active, &:hover {
+      cursor: pointer;
+      color: $tab-fg;
+      outline: 0;
+    }
+
+    .text {
+      display: none;
+    }
+  }
+
+  ::ng-deep nb-tabset.tabs-container {
+    border-radius: 0.5rem 0.5rem 0 0;
+
+    > ul {
+      padding: 0;
+      margin-bottom: 0!important; // TODO: check selectors
+      border-radius: 0.5rem 0.5rem 0 0;
+      background-color: $tabs-bb;
+      overflow: hidden;
+
+      li {
+        padding: 0.4rem;
+        width: 20%;
+        margin-bottom: 0!important; // TODO: check selectors
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        a {
+          color: $tab-fg;
+        }
+
+        &.active {
+          background: $tab-active-bg;
+
+          a {
+            color: $tab-active-fg;
+          }
+        }
+      }
+    }
+    .container {
+      border-radius: 0 0 0.5rem 0.5rem;
+    }
+  }
+
+  @include media-breakpoint-up(is) {
+    button .text {
+      display: inline;
+    }
+  }
+}
+

docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.ts

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { forkJoin,  of as observableOf,  Observable } from 'rxjs';
+import { map,  catchError } from 'rxjs/operators';
+import { NgxExampleView } from '../../enum.example-view';
+import { NgxCodeLoaderService } from '../../../@theme/services/code-loader.service';
+
+@Component({
+  selector: 'ngx-tabbed-example-block',
+  styleUrls: ['./tabbed-example-block.component.scss'],
+  templateUrl: './tabbed-example-block.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxTabbedExampleBlockComponent {
+
+
+  @Input() hasViewSwitch = false;
+  @Output() changeView = new EventEmitter<NgxExampleView>();
+  examples = [];
+
+  @Input()
+  set content({ files }) {
+    forkJoin(files.map(file => this.load(file)))
+      .subscribe(loadedFiles => {
+        (loadedFiles[0] as any).active = true;
+        this.examples = loadedFiles;
+        this.cd.detectChanges();
+      });
+  }
+
+  constructor(private codeLoader: NgxCodeLoaderService, private cd: ChangeDetectorRef) {
+  }
+
+  switchToLiveView() {
+    this.changeView.emit(NgxExampleView.LIVE);
+  }
+
+  private load(path): Observable<any> {
+    const extension = path.split('.').pop();
+    return this.codeLoader.load(path)
+      .pipe(
+        map(code => ({ code, path, extension })),
+        catchError(e => observableOf('')),
+      );
+  }
+}