split up operator components

Author: btroncone

src/app/operators/_operator-theme.scss

@@ -25,6 +25,19 @@ $link-color: #2196F3;
     }
   }
 
+  .section-list {
+    padding: 1px;
+    list-style-type: none;
+    margin-top: 0;
+
+    li {
+      padding-bottom: 5px;
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+  }
+
   a {
     text-decoration: none;
     color: $link-color;

src/app/operators/components/additional-resources/additional-resources.component.html

@@ -0,0 +1,9 @@
+<h2> Additional Resources </h2>
+<ul class="section-list">
+  <li>
+    <a [href]="sourceUrl" target="_blank"> Source Code </a>
+  </li>
+  <li *ngFor="let resource of additionalResources">
+    <a [href]="resource.url" target="_blank"> {{ resource.name }} </a>
+  </li>
+</ul>

src/app/operators/components/additional-resources/additional-resources.component.scss

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { OperatorReference } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-additional-resources',
+  templateUrl: './additional-resources.component.html',
+  styleUrls: ['./additional-resources.component.scss']
+})
+export class AdditionalResourcesComponent {
+  @Input() additionalResources: OperatorReference[];
+  @Input() sourceUrl: string;
+}

src/app/operators/components/additional-resources/additional-resources.component.ts

@@ -0,0 +1,3 @@
+<div class="marble-wrapper mat-elevation-z2">
+  <img class="marble-diagram" [src]="url" *ngIf="url"/>
+</div>

src/app/operators/components/marble-diagram/marble-diagram.component.html

@@ -0,0 +1,14 @@
+@import '../../../../styles/media-helpers';
+
+.marble-wrapper {
+  background-color: white;
+  text-align: center;
+}
+
+.marble-diagram {
+  max-width: 640px;
+
+  @media #{$mat-sm-down} {
+    max-width: 100%;
+  }
+}

src/app/operators/components/marble-diagram/marble-diagram.component.scss

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { OperatorParameters } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-marble-diagram',
+  templateUrl: './marble-diagram.component.html',
+  styleUrls: ['./marble-diagram.component.scss']
+})
+export class MarbleDiagramComponent {
+  @Input() url: string;
+}

src/app/operators/components/marble-diagram/marble-diagram.component.ts

@@ -0,0 +1,22 @@
+<h2 class="examples-header"> Examples </h2>
+<div
+  class="code-example"
+  *ngFor="let example of operatorExamples"
+  appHighlightJs>
+  <h3 [innerHTML]="example.name"></h3>
+  <div class="code-block mat-elevation-z2">
+    <button mat-icon-button [matMenuTriggerFor]="menu" class="menu-button">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <a
+        mat-menu-item
+        [href]="link.url"
+        target="_blank"
+        *ngFor="let link of example.externalLinks">
+        {{link.platform}}
+      </a>
+    </mat-menu>
+    <pre [innerHTML]="example.code"></pre>
+  </div>
+</div>

src/app/operators/components/operator-examples/operator-examples.component.html

@@ -0,0 +1,13 @@
+.examples-header {
+  margin: 32px 0 16px;
+}
+
+.code-block {
+  position: relative;
+}
+
+.menu-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+}

src/app/operators/components/operator-examples/operator-examples.component.scss

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { OperatorExample } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-operator-examples',
+  templateUrl: './operator-examples.component.html',
+  styleUrls: ['./operator-examples.component.scss']
+})
+export class OperatorExamplesComponent {
+  @Input() operatorExamples: OperatorExample[];
+}