feat: docs app

docs/app/blocks/components/styles-table-block/styles-table-block.component.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { NgxStylesService } from '../../../@theme/services/styles.service';
+
+@Component({
+  selector: 'ngx-styles-table-block',
+  template: `
+    <table class="striped" *ngFor="let style of classStyles">
+      <thead>
+      <tr>
+        <td>Name</td>
+        <td *ngFor="let themedValue of style.styles[0].themedValues">{{ themedValue.theme }}</td>
+        <td>Description</td>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let item of style.styles">
+        <td>{{ item.name }}</td>
+        <td *ngFor="let themedValue of item.themedValues" ngxColorSwatch>{{ themedValue.value }}</td>
+        <td>
+          <p *ngIf="item.shortDescription" ngxDescription>{{ item.shortDescription}}</p>
+          <p *ngIf="item.description" ngxDescription>{{ item.description }}</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxStylesTableBlockComponent {
+
+  classStyles: any;
+
+  @Input('source')
+  set setSource(source: any) {
+    this.classStyles = this.stylesService.mapThemedValues(source.styles);
+  }
+
+  constructor(private stylesService: NgxStylesService) {
+  }
+
+}