feat: docs app

docs/app/blocks/components/stacked-example-block/stacked-examples.component.ts

@@ -0,0 +1,59 @@
+import { Component, Input } from '@angular/core';
+
+import { NgxExampleView } from '../../enum.example-view';
+import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations';
+
+export const pulse = animation(
+  animate(
+    '{{ timing }}s {{ delay }}s',
+    keyframes([
+      style({ transform: 'scale3d(1, 1, 1)' }),
+      style({ transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})' }),
+      style({ transform: 'scale3d(1, 1, 1)' }),
+    ]),
+  ),
+  { params: { scale: 1.02, timing: 0.5, delay: 0 } },
+);
+
+@Component({
+  selector: 'ngx-stacked-example-block',
+  template: `
+    <div>
+      <ngx-live-example-block [hidden]="!isLive"
+                              [@exampleState]="isLive ? 'live': 'code'"
+                              [content]="content"
+                              hasViewSwitch="true"
+                              (changeView)="changeView($event)">
+      </ngx-live-example-block>
+
+      <ngx-tabbed-example-block [hidden]="isLive"
+                                [@exampleState]="isLive ? 'live': 'code'"
+                                [content]="content"
+                                hasViewSwitch="true"
+                                (changeView)="changeView($event)">
+      </ngx-tabbed-example-block>
+    </div>
+  `,
+  animations: [
+    trigger('exampleState', [
+      transition('live => code', [
+        useAnimation(pulse),
+      ]),
+      transition('code => live', [
+        useAnimation(pulse),
+      ]),
+    ]),
+  ],
+})
+export class NgxStackedExampleComponent {
+
+  @Input() content: any;
+  isLive = true;
+
+  constructor() {
+  }
+
+  changeView(view: NgxExampleView) {
+    this.isLive = view === NgxExampleView.LIVE;
+  }
+}