build(docs-infra): implement the 'package' API template (#24631)

PR Close #24631

aio/src/app/custom-elements/api/api-list.component.html

@@ -21,7 +21,7 @@
 
 <article class="api-list-container l-content-small docs-content">
   <div *ngFor="let section of filteredSections | async" >
-    <h2>{{section.title}}</h2>
+    <h2><a [href]="section.path">{{section.title}}</a></h2>
     <ul class="api-list">
       <ng-container *ngFor="let item of section.items">
         <li *ngIf="item.show" class="api-item">

aio/src/app/custom-elements/api/api-list.component.spec.ts

@@ -218,6 +218,7 @@ const apiSections: ApiSection[] = [
   {
     "name": "common",
     "title": "common",
+    "path": "api/common",
     "items": [
       {
         "name": "class_1",
@@ -256,6 +257,7 @@ const apiSections: ApiSection[] = [
   {
     "name": "core",
     "title": "core",
+    "path": "api/core",
     "items": [
       {
         "name": "class_3",

aio/src/app/custom-elements/api/api.service.spec.ts

@@ -50,7 +50,7 @@ describe('ApiService', () => {
   describe('#sections', () => {
 
     it('first subscriber should fetch sections', done => {
-      const data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
+      const data = [{name: 'a', title: 'A', path: '', items: []}, {name: 'b', title: 'B', path: '', items: []}];
 
       service.sections.subscribe(sections => {
         expect(sections).toEqual(data);
@@ -61,7 +61,7 @@ describe('ApiService', () => {
     });
 
     it('second subscriber should get previous sections and NOT trigger refetch', done => {
-      const data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
+      const data = [{name: 'a', title: 'A', path: '', items: []}, {name: 'b', title: 'B', path: '', items: []}];
       let subscriptions = 0;
 
       service.sections.subscribe(sections => {
@@ -91,7 +91,7 @@ describe('ApiService', () => {
 
       let call = 0;
 
-      let data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
+      let data = [{name: 'a', title: 'A', path: '', items: []}, {name: 'b', title: 'B', path: '', items: []}];
 
       service.sections.subscribe(sections => {
         // called twice during this test
@@ -103,7 +103,7 @@ describe('ApiService', () => {
       httpMock.expectOne({}).flush(data);
 
       // refresh/refetch
-      data = [{name: 'c', title: 'C', items: []}];
+      data = [{name: 'c', title: 'C', path: '', items: []}];
       service.fetchSections();
       httpMock.expectOne({}).flush(data);
 

aio/src/app/custom-elements/api/api.service.ts

@@ -19,6 +19,7 @@ export interface ApiItem {
 }
 
 export interface ApiSection {
+  path: string;
   name: string;
   title: string;
   items: ApiItem[];

aio/src/styles/0-base/_typography.scss

@@ -28,7 +28,7 @@ h2 {
 h3 {
   font-size: 20px;
   font-weight: 400;
-  margin: 24px 0px;
+  margin: 24px 0px 12px;
   clear: both;
 }
 
@@ -55,6 +55,10 @@ h6 {
 }
 
 h2, h3, h4, h5, h6 {
+  a {
+    font-size: inherit;
+  }
+
   @media screen and (max-width: 600px) {
     margin: 8px 0;
   }
@@ -105,7 +109,7 @@ table {
   border-collapse: collapse;
   border-radius: 2px;
   border-spacing: 0;
-  margin: 0 0 32px 0;
+  margin: 12px 0 32px;
 }
 
 table tbody th {

aio/src/styles/1-layouts/_api-pages.scss

@@ -3,6 +3,7 @@
     max-width: 1200px;
 
     table {
+        margin: 12px 0 24px;
 
         th {
             text-transform: none;

aio/src/styles/2-modules/_api-pages.scss

@@ -30,7 +30,7 @@
     }
   }
 
-  .method-table, .option-table {
+  .method-table, .option-table, .list-table {
     th {
       display: flex;
       align-items: center;

aio/src/styles/_constants.scss

@@ -105,7 +105,7 @@ $api-symbols: (
     content: 'T',
     background: $light-green-600
   ),
-  module: (
+  package: (
     content: 'Pk',
     background: $purple-600
   )