feat(aio): add API list page (angular#14899)

Author: wardbell

aio/content/marketing/api.html

@@ -0,0 +1 @@
+<aio-api-list></aio-api-list>

aio/src/app/app.module.ts

@@ -16,6 +16,7 @@ import { Platform } from '@angular/material/core';
 import 'rxjs/add/operator/first';
 
 import { AppComponent } from 'app/app.component';
+import { ApiService } from 'app/embedded/api/api.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { embeddedComponents, EmbeddedComponents } from 'app/embedded';
 import { Logger } from 'app/shared/logger.service';
@@ -48,6 +49,7 @@ import { LinkDirective } from 'app/shared/link.directive';
     LinkDirective,
   ],
   providers: [
+    ApiService,
     EmbeddedComponents,
     Logger,
     Location,

aio/src/app/documents/document.service.ts

@@ -57,7 +57,8 @@ export class DocumentService {
     return subject.asObservable();
   }
 
-  private computePath(url) {
+  private computePath(url: string) {
+    url = url.match(/[^#?]*/)[0]; // strip off fragment and query
     url = '/' + url;
     url = url.endsWith('/') ? url + 'index' : url;
     return 'content/docs' + url + '.json';

aio/src/app/embedded/api/api-list.component.html

@@ -0,0 +1,42 @@
+<div class="l-flex-wrap banner is-plain api-filter">
+
+  <div class="form-select-menu">
+    <button class="form-select-button has-symbol" (click)="toggleTypeMenu()">
+      <strong>Type:</strong><span class="symbol {{type.name}}"></span>{{type.title}}
+    </button>
+    <ul class="form-select-dropdown" *ngIf="showTypeMenu">
+      <li *ngFor="let t of types" (click)="setType(t)" [class.selected]="t === type">
+        <span class="symbol {{t.name}}"></span>{{t.title}}
+      </li>
+    </ul>
+  </div>
+
+  <div class="form-select-menu">
+    <button class="form-select-button" (click)="toggleStatusMenu()">
+      <strong>Status:</strong>{{status.title}}
+    </button>
+    <ul class="form-select-dropdown" *ngIf="showStatusMenu">
+      <li *ngFor="let s of statuses" (click)="setStatus(s)" [class.selected]="s === status">
+        {{s.title}}
+      </li>
+    </ul>
+  </div>
+
+  <div class="form-search">
+    <i class="material-icons">search</i>
+    <input #filter placeholder="Filter" (input)="setQuery($event.target.value)">
+  </div>
+</div>
+
+<article class="l-content-small docs-content">
+  <div *ngFor="let section of filteredSections | async" >
+    <h2>{{section.title}}</h2>
+    <ul class="api-list">
+      <ng-container *ngFor="let item of section.items">
+        <li *ngIf="item.show" class="api-item">
+          <a [href]="item.path"><span class="symbol {{item.docType}}"></span> {{item.title}}</a>
+        </li>
+      </ng-container>
+    </ul>
+  </div>
+</article>