@skyux/pages 8.3.1 → 8.4.0

package/documentation.json

@@ -2,31 +2,36 @@
   "anchorIds": {
     "SkyActionHubModule": "class-skyactionhubmodule",
     "SkyPageHeaderModule": "class-skypageheadermodule",
+    "SkyPageModule": "class-skypagemodule",
     "SkyActionHubComponent": "class-skyactionhubcomponent",
     "SkyActionHubButtonsComponent": "class-skyactionhubbuttonscomponent",
     "SkyActionHubContentComponent": "class-skyactionhubcontentcomponent",
     "SkyPageHeaderComponent": "class-skypageheadercomponent",
     "SkyModalLinkListComponent": "class-skymodallinklistcomponent",
+    "SkyPageComponent": "class-skypagecomponent",
+    "SkyPageContentComponent": "class-skypagecontentcomponent",
     "SkyActionHubNeedsAttention": "interface-skyactionhubneedsattention",
     "SkyPageLink": "interface-skypagelink",
     "SkyPageModalLink": "interface-skypagemodallink",
     "SkyRecentLink": "interface-skyrecentlink",
     "SkyActionHubNeedsAttentionClickHandler": "type-alias-skyactionhubneedsattentionclickhandler",
     "SkyActionHubNeedsAttentionClickHandlerArgs": "type-alias-skyactionhubneedsattentionclickhandlerargs",
+    "SkyPageLayoutType": "type-alias-skypagelayouttype",
     "SkyPageLinksInput": "type-alias-skypagelinksinput",
     "SkyPageModalLinksInput": "type-alias-skypagemodallinksinput",
-    "SkyRecentLinksInput": "type-alias-skyrecentlinksinput"
+    "SkyRecentLinksInput": "type-alias-skyrecentlinksinput",
+    "SkyPageHarness": "class-skypageharness",
+    "SkyPageHarnessFilters": "interface-skypageharnessfilters"
   },
   "typedoc": {
     "id": 0,
     "name": "@skyux/pages",
     "kind": 1,
-    "kindString": "Project",
     "flags": {},
     "originalName": "",
     "children": [
       {
-        "id": 41,
+        "id": 64,
         "name": "SkyActionHubModule",
         "kind": 128,
         "kindString": "Class",
@@ -51,7 +56,7 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              42
+              65
             ]
           }
         ],
@@ -64,7 +69,7 @@
         ]
       },
       {
-        "id": 97,
+        "id": 124,
         "name": "SkyPageHeaderModule",
         "kind": 128,
         "kindString": "Class",
@@ -89,7 +94,7 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              98
+              125
             ]
           }
         ],
@@ -102,7 +107,45 @@
         ]
       },
       {
-        "id": 1,
+        "id": 120,
+        "name": "SkyPageModule",
+        "kind": 128,
+        "kindString": "Class",
+        "flags": {},
+        "decorators": [
+          {
+            "name": "NgModule",
+            "type": {
+              "type": "reference",
+              "qualifiedName": "NgModuleDecorator",
+              "package": "@angular/core",
+              "name": "NgModule"
+            },
+            "arguments": {
+              "obj": "{\n  declarations: [SkyPageComponent, SkyPageContentComponent],\n  imports: [CommonModule],\n  exports: [SkyPageComponent, SkyPageHeaderModule, SkyPageContentComponent],\n}"
+            }
+          }
+        ],
+        "children": [],
+        "groups": [
+          {
+            "title": "Constructors",
+            "kind": 512,
+            "children": [
+              121
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/pages/src/modules/page/page.module.ts",
+            "line": 14,
+            "character": 13
+          }
+        ]
+      },
+      {
+        "id": 3,
         "name": "SkyActionHubComponent",
         "kind": 128,
         "kindString": "Class",
@@ -126,7 +169,7 @@
         ],
         "children": [
           {
-            "id": 13,
+            "id": 15,
             "name": "needsAttentionArray",
             "kind": 1024,
             "kindString": "Property",
@@ -144,14 +187,14 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 44,
+                "id": 67,
                 "name": "SkyActionHubNeedsAttention"
               }
             },
             "defaultValue": "[]"
           },
           {
-            "id": 8,
+            "id": 10,
             "name": "parentLink",
             "kind": 1024,
             "kindString": "Property",
@@ -182,12 +225,12 @@
             ],
             "type": {
               "type": "reference",
-              "id": 62,
+              "id": 85,
               "name": "SkyPageLink"
             }
           },
           {
-            "id": 9,
+            "id": 11,
             "name": "recentLinks",
             "kind": 1024,
             "kindString": "Property",
@@ -218,13 +261,13 @@
             ],
             "type": {
               "type": "reference",
-              "id": 96,
+              "id": 119,
               "name": "SkyRecentLinksInput"
             },
             "defaultValue": "[]"
           },
           {
-            "id": 10,
+            "id": 12,
             "name": "relatedLinks",
             "kind": 1024,
             "kindString": "Property",
@@ -255,13 +298,13 @@
             ],
             "type": {
               "type": "reference",
-              "id": 71,
+              "id": 94,
               "name": "SkyPageLinksInput"
             },
             "defaultValue": "[]"
           },
           {
-            "id": 11,
+            "id": 13,
             "name": "settingsLinks",
             "kind": 1024,
             "kindString": "Property",
@@ -292,13 +335,13 @@
             ],
             "type": {
               "type": "reference",
-              "id": 85,
+              "id": 108,
               "name": "SkyPageModalLinksInput"
             },
             "defaultValue": "[]"
           },
           {
-            "id": 12,
+            "id": 14,
             "name": "title",
             "kind": 1024,
             "kindString": "Property",
@@ -340,7 +383,7 @@
             "defaultValue": "''"
           },
           {
-            "id": 4,
+            "id": 6,
             "name": "needsAttention",
             "kind": 262144,
             "kindString": "Accessor",
@@ -368,7 +411,7 @@
             ],
             "getSignature": [
               {
-                "id": 5,
+                "id": 7,
                 "name": "needsAttention",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -384,7 +427,7 @@
             ],
             "setSignature": [
               {
-                "id": 6,
+                "id": 8,
                 "name": "needsAttention",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -394,7 +437,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 7,
+                    "id": 9,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -418,26 +461,26 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              2
+              4
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              13,
-              8,
-              9,
+              15,
               10,
               11,
-              12
+              12,
+              13,
+              14
             ]
           },
           {
             "title": "Accessors",
             "kind": 262144,
             "children": [
-              4
+              6
             ]
           }
         ],
@@ -450,7 +493,7 @@
         ]
       },
       {
-        "id": 15,
+        "id": 17,
         "name": "SkyActionHubButtonsComponent",
         "kind": 128,
         "kindString": "Class",
@@ -479,7 +522,7 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              16
+              18
             ]
           }
         ],
@@ -492,7 +535,7 @@
         ]
       },
       {
-        "id": 18,
+        "id": 20,
         "name": "SkyActionHubContentComponent",
         "kind": 128,
         "kindString": "Class",
@@ -520,7 +563,7 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              19
+              21
             ]
           }
         ],
@@ -533,11 +576,14 @@
         ]
       },
       {
-        "id": 21,
+        "id": 23,
         "name": "SkyPageHeaderComponent",
         "kind": 128,
         "kindString": "Class",
         "flags": {},
+        "comment": {
+          "shortText": "Displays a page heading. Applies the correct layout spacing if used within a SkyPage."
+        },
         "decorators": [
           {
             "name": "Component",
@@ -554,13 +600,16 @@
         ],
         "children": [
           {
-            "id": 25,
+            "id": 27,
             "name": "pageTitle",
             "kind": 1024,
             "kindString": "Property",
             "flags": {
               "isPublic": true
             },
+            "comment": {
+              "shortText": "The title of the current page."
+            },
             "decorators": [
               {
                 "name": "Input",
@@ -576,7 +625,7 @@
             "sources": [
               {
                 "fileName": "projects/pages/src/modules/page-header/page-header.component.ts",
-                "line": 17,
+                "line": 26,
                 "character": 9
               }
             ],
@@ -586,7 +635,7 @@
             }
           },
           {
-            "id": 24,
+            "id": 26,
             "name": "parentLink",
             "kind": 1024,
             "kindString": "Property",
@@ -594,6 +643,9 @@
               "isPublic": true,
               "isOptional": true
             },
+            "comment": {
+              "shortText": "A link to the parent page of the current page."
+            },
             "decorators": [
               {
                 "name": "Input",
@@ -609,13 +661,13 @@
             "sources": [
               {
                 "fileName": "projects/pages/src/modules/page-header/page-header.component.ts",
-                "line": 14,
+                "line": 20,
                 "character": 9
               }
             ],
             "type": {
               "type": "reference",
-              "id": 62,
+              "id": 85,
               "name": "SkyPageLink"
             }
           }
@@ -625,28 +677,28 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              22
+              24
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              25,
-              24
+              27,
+              26
             ]
           }
         ],
         "sources": [
           {
             "fileName": "projects/pages/src/modules/page-header/page-header.component.ts",
-            "line": 12,
+            "line": 15,
             "character": 13
           }
         ]
       },
       {
-        "id": 26,
+        "id": 28,
         "name": "SkyModalLinkListComponent",
         "kind": 128,
         "kindString": "Class",
@@ -667,7 +719,7 @@
         ],
         "children": [
           {
-            "id": 27,
+            "id": 29,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -681,14 +733,14 @@
             ],
             "signatures": [
               {
-                "id": 28,
+                "id": 30,
                 "name": "SkyModalLinkListComponent",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 29,
+                    "id": 31,
                     "name": "modalService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -701,14 +753,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 26,
+                  "id": 28,
                   "name": "SkyModalLinkListComponent"
                 }
               }
             ]
           },
           {
-            "id": 35,
+            "id": 37,
             "name": "linksArray",
             "kind": 1024,
             "kindString": "Property",
@@ -726,14 +778,14 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 72,
+                "id": 95,
                 "name": "SkyPageModalLink"
               }
             },
             "defaultValue": "[]"
           },
           {
-            "id": 34,
+            "id": 36,
             "name": "title",
             "kind": 1024,
             "kindString": "Property",
@@ -765,7 +817,7 @@
             }
           },
           {
-            "id": 30,
+            "id": 32,
             "name": "links",
             "kind": 262144,
             "kindString": "Accessor",
@@ -793,35 +845,35 @@
             ],
             "getSignature": [
               {
-                "id": 31,
+                "id": 33,
                 "name": "links",
                 "kind": 524288,
                 "kindString": "Get signature",
                 "flags": {},
                 "type": {
                   "type": "reference",
-                  "id": 85,
+                  "id": 108,
                   "name": "SkyPageModalLinksInput"
                 }
               }
             ],
             "setSignature": [
               {
-                "id": 32,
+                "id": 34,
                 "name": "links",
                 "kind": 1048576,
                 "kindString": "Set signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 33,
+                    "id": 35,
                     "name": "value",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 85,
+                      "id": 108,
                       "name": "SkyPageModalLinksInput"
                     }
                   }
@@ -834,7 +886,7 @@
             ]
           },
           {
-            "id": 38,
+            "id": 40,
             "name": "openModal",
             "kind": 2048,
             "kindString": "Method",
@@ -850,21 +902,21 @@
             ],
             "signatures": [
               {
-                "id": 39,
+                "id": 41,
                 "name": "openModal",
                 "kind": 4096,
                 "kindString": "Call signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 40,
+                    "id": 42,
                     "name": "link",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 72,
+                      "id": 95,
                       "name": "SkyPageModalLink"
                     }
                   }
@@ -882,29 +934,29 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              27
+              29
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              35,
-              34
+              37,
+              36
             ]
           },
           {
             "title": "Accessors",
             "kind": 262144,
             "children": [
-              30
+              32
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              38
+              40
             ]
           }
         ],
@@ -917,314 +969,389 @@
         ]
       },
       {
-        "id": 44,
-        "name": "SkyActionHubNeedsAttention",
-        "kind": 256,
-        "kindString": "Interface",
+        "id": 43,
+        "name": "SkyPageComponent",
+        "kind": 128,
+        "kindString": "Class",
         "flags": {},
         "comment": {
-          "shortText": "Specifies action items that require attention and directs users to pages\nwhere they can resolve them."
+          "shortText": "Displays a page using the specified layout."
         },
-        "children": [
+        "decorators": [
           {
-            "id": 54,
-            "name": "click",
-            "kind": 1024,
-            "kindString": "Property",
-            "flags": {
-              "isOptional": true
-            },
-            "comment": {
-              "shortText": "The click handler for the action item."
-            },
-            "sources": [
-              {
-                "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
-                "line": 33,
-                "character": 2
-              }
-            ],
+            "name": "Component",
             "type": {
               "type": "reference",
-              "id": 55,
-              "name": "SkyActionHubNeedsAttentionClickHandler"
+              "qualifiedName": "ComponentDecorator",
+              "package": "@angular/core",
+              "name": "Component"
+            },
+            "arguments": {
+              "obj": "{\n  selector: 'sky-page',\n  template: `<ng-content />`,\n  providers: [SkyPageThemeAdapterService, SkyLayoutHostService],\n}"
             }
-          },
+          }
+        ],
+        "children": [
           {
-            "id": 46,
-            "name": "message",
+            "id": 49,
+            "name": "cssClass",
             "kind": 1024,
             "kindString": "Property",
             "flags": {
-              "isOptional": true
+              "isPublic": true
             },
-            "comment": {
-              "shortText": "Text to display after the title.",
-              "tags": [
-                {
-                  "tag": "deprecated",
-                  "text": "Use `title` instead.\n"
+            "decorators": [
+              {
+                "name": "HostBinding",
+                "type": {
+                  "type": "reference",
+                  "qualifiedName": "HostBindingDecorator",
+                  "package": "@angular/core",
+                  "name": "HostBinding"
+                },
+                "arguments": {
+                  "hostPropertyName": "'class'"
                 }
-              ]
-            },
+              }
+            ],
             "sources": [
               {
-                "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
-                "line": 18,
-                "character": 2
+                "fileName": "projects/pages/src/modules/page/page.component.ts",
+                "line": 46,
+                "character": 9
               }
             ],
             "type": {
               "type": "intrinsic",
               "name": "string"
-            }
+            },
+            "defaultValue": "LAYOUT_CLASS_DEFAULT"
           },
           {
-            "id": 47,
-            "name": "permalink",
-            "kind": 1024,
-            "kindString": "Property",
+            "id": 46,
+            "name": "layout",
+            "kind": 262144,
+            "kindString": "Accessor",
             "flags": {
-              "isOptional": true
-            },
-            "comment": {
-              "shortText": "The link to resolve the action item."
+              "isPublic": true
             },
+            "decorators": [
+              {
+                "name": "Input",
+                "type": {
+                  "type": "reference",
+                  "qualifiedName": "InputDecorator",
+                  "package": "@angular/core",
+                  "name": "Input"
+                },
+                "arguments": {}
+              }
+            ],
             "sources": [
               {
-                "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
-                "line": 22,
-                "character": 2
+                "fileName": "projects/pages/src/modules/page/page.component.ts",
+                "line": 40,
+                "character": 13
               }
             ],
-            "type": {
-              "type": "reflection",
-              "declaration": {
-                "id": 48,
-                "name": "__type",
-                "kind": 65536,
-                "kindString": "Type literal",
+            "setSignature": [
+              {
+                "id": 47,
+                "name": "layout",
+                "kind": 1048576,
+                "kindString": "Set signature",
                 "flags": {},
-                "children": [
-                  {
-                    "id": 49,
-                    "name": "route",
-                    "kind": 1024,
-                    "kindString": "Property",
-                    "flags": {
-                      "isOptional": true
-                    },
-                    "sources": [
-                      {
-                        "fileName": "lib/modules/action-hub/types/action-hub-needs-attention.ts",
-                        "line": 23,
-                        "character": 4
-                      }
-                    ],
-                    "type": {
-                      "type": "reflection",
-                      "declaration": {
-                        "id": 50,
-                        "name": "__type",
-                        "kind": 65536,
-                        "kindString": "Type literal",
-                        "flags": {},
-                        "children": [
-                          {
-                            "id": 51,
-                            "name": "commands",
-                            "kind": 1024,
-                            "kindString": "Property",
-                            "flags": {},
-                            "sources": [
-                              {
-                                "fileName": "lib/modules/action-hub/types/action-hub-needs-attention.ts",
-                                "line": 25,
-                                "character": 6
-                              }
-                            ],
-                            "type": {
-                              "type": "array",
-                              "elementType": {
-                                "type": "intrinsic",
-                                "name": "any"
-                              }
-                            }
-                          },
-                          {
-                            "id": 52,
-                            "name": "extras",
-                            "kind": 1024,
-                            "kindString": "Property",
-                            "flags": {
-                              "isOptional": true
-                            },
-                            "sources": [
-                              {
-                                "fileName": "lib/modules/action-hub/types/action-hub-needs-attention.ts",
-                                "line": 26,
-                                "character": 6
-                              }
-                            ],
-                            "type": {
-                              "type": "reference",
-                              "qualifiedName": "NavigationExtras",
-                              "package": "@angular/router",
-                              "name": "NavigationExtras"
-                            }
-                          }
-                        ],
-                        "groups": [
-                          {
-                            "title": "Properties",
-                            "kind": 1024,
-                            "children": [
-                              51,
-                              52
-                            ]
-                          }
-                        ]
-                      }
+                "comment": {
+                  "shortText": "The page layout that corresponds with the top-level component type\nused on the page. For laying out custom content, use `auto` to allow\nthe page contents to expand beyond the bottom of the browser window\nor `fit` to constrain the page contents to the available viewport.",
+                  "tags": [
+                    {
+                      "tag": "default",
+                      "text": "\"auto\"\n"
                     }
-                  },
+                  ]
+                },
+                "parameters": [
                   {
-                    "id": 53,
-                    "name": "url",
-                    "kind": 1024,
-                    "kindString": "Property",
-                    "flags": {
-                      "isOptional": true
-                    },
-                    "sources": [
-                      {
-                        "fileName": "lib/modules/action-hub/types/action-hub-needs-attention.ts",
-                        "line": 28,
-                        "character": 4
-                      }
-                    ],
+                    "id": 48,
+                    "name": "value",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {},
                     "type": {
-                      "type": "intrinsic",
-                      "name": "string"
+                      "type": "reference",
+                      "id": 123,
+                      "name": "SkyPageLayoutType"
                     }
                   }
                 ],
-                "groups": [
-                  {
-                    "title": "Properties",
-                    "kind": 1024,
-                    "children": [
-                      49,
-                      53
-                    ]
-                  }
-                ]
+                "type": {
+                  "type": "intrinsic",
+                  "name": "void"
+                }
+              }
+            ]
+          },
+          {
+            "id": 57,
+            "name": "ngOnDestroy",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/pages/src/modules/page/page.component.ts",
+                "line": 67,
+                "character": 9
+              }
+            ],
+            "signatures": [
+              {
+                "id": 58,
+                "name": "ngOnDestroy",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "type": {
+                  "type": "intrinsic",
+                  "name": "void"
+                },
+                "implementationOf": {
+                  "type": "reference",
+                  "name": "OnDestroy.ngOnDestroy"
+                }
               }
+            ],
+            "implementationOf": {
+              "type": "reference",
+              "name": "OnDestroy.ngOnDestroy"
             }
           },
           {
-            "id": 45,
-            "name": "title",
-            "kind": 1024,
-            "kindString": "Property",
-            "flags": {},
-            "comment": {
-              "shortText": "The title of the action item."
+            "id": 55,
+            "name": "ngOnInit",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
             },
             "sources": [
               {
-                "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
-                "line": 13,
-                "character": 2
+                "fileName": "projects/pages/src/modules/page/page.component.ts",
+                "line": 56,
+                "character": 9
               }
             ],
-            "type": {
-              "type": "intrinsic",
-              "name": "string"
+            "signatures": [
+              {
+                "id": 56,
+                "name": "ngOnInit",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "type": {
+                  "type": "intrinsic",
+                  "name": "void"
+                },
+                "implementationOf": {
+                  "type": "reference",
+                  "name": "OnInit.ngOnInit"
+                }
+              }
+            ],
+            "implementationOf": {
+              "type": "reference",
+              "name": "OnInit.ngOnInit"
             }
           }
         ],
         "groups": [
+          {
+            "title": "Constructors",
+            "kind": 512,
+            "children": [
+              44
+            ]
+          },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              54,
-              46,
-              47,
-              45
+              49
+            ]
+          },
+          {
+            "title": "Accessors",
+            "kind": 262144,
+            "children": [
+              46
+            ]
+          },
+          {
+            "title": "Methods",
+            "kind": 2048,
+            "children": [
+              57,
+              55
             ]
           }
         ],
         "sources": [
           {
-            "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
-            "line": 9,
-            "character": 17
+            "fileName": "projects/pages/src/modules/page/page.component.ts",
+            "line": 31,
+            "character": 13
+          }
+        ],
+        "implementedTypes": [
+          {
+            "type": "reference",
+            "qualifiedName": "OnInit",
+            "package": "@angular/core",
+            "name": "OnInit"
+          },
+          {
+            "type": "reference",
+            "qualifiedName": "OnDestroy",
+            "package": "@angular/core",
+            "name": "OnDestroy"
           }
         ]
       },
       {
-        "id": 62,
-        "name": "SkyPageLink",
+        "id": 61,
+        "name": "SkyPageContentComponent",
+        "kind": 128,
+        "kindString": "Class",
+        "flags": {},
+        "comment": {
+          "shortText": "Displays page contents using spacing that corresponds to the parent\npage's layout."
+        },
+        "decorators": [
+          {
+            "name": "Component",
+            "type": {
+              "type": "reference",
+              "qualifiedName": "ComponentDecorator",
+              "package": "@angular/core",
+              "name": "Component"
+            },
+            "arguments": {
+              "obj": "{\n  selector: 'sky-page-content',\n  template: `<ng-content />`,\n  styleUrls: ['./page-content.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n}"
+            }
+          }
+        ],
+        "children": [],
+        "groups": [
+          {
+            "title": "Constructors",
+            "kind": 512,
+            "children": [
+              62
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/pages/src/modules/page/page-content.component.ts",
+            "line": 13,
+            "character": 13
+          }
+        ]
+      },
+      {
+        "id": 67,
+        "name": "SkyActionHubNeedsAttention",
         "kind": 256,
         "kindString": "Interface",
         "flags": {},
         "comment": {
-          "shortText": "Displays links to related information or recently accessed items."
+          "shortText": "Specifies action items that require attention and directs users to pages\nwhere they can resolve them."
         },
         "children": [
           {
-            "id": 70,
-            "name": "label",
+            "id": 77,
+            "name": "click",
             "kind": 1024,
             "kindString": "Property",
-            "flags": {},
+            "flags": {
+              "isOptional": true
+            },
             "comment": {
-              "shortText": "The link text."
+              "shortText": "The click handler for the action item."
             },
             "sources": [
               {
-                "fileName": "projects/pages/src/modules/action-hub/types/page-link-interface.ts",
-                "line": 8,
+                "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
+                "line": 33,
+                "character": 2
+              }
+            ],
+            "type": {
+              "type": "reference",
+              "id": 78,
+              "name": "SkyActionHubNeedsAttentionClickHandler"
+            }
+          },
+          {
+            "id": 69,
+            "name": "message",
+            "kind": 1024,
+            "kindString": "Property",
+            "flags": {
+              "isOptional": true
+            },
+            "comment": {
+              "shortText": "Text to display after the title.",
+              "tags": [
+                {
+                  "tag": "deprecated",
+                  "text": "Use `title` instead.\n"
+                }
+              ]
+            },
+            "sources": [
+              {
+                "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
+                "line": 18,
                 "character": 2
               }
             ],
             "type": {
               "type": "intrinsic",
               "name": "string"
-            },
-            "inheritedFrom": {
-              "type": "reference",
-              "name": "SkyPageLinkInterface.label"
             }
           },
           {
-            "id": 63,
+            "id": 70,
             "name": "permalink",
             "kind": 1024,
             "kindString": "Property",
-            "flags": {},
+            "flags": {
+              "isOptional": true
+            },
             "comment": {
-              "shortText": "The link destination."
+              "shortText": "The link to resolve the action item."
             },
             "sources": [
               {
-                "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
-                "line": 12,
+                "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
+                "line": 22,
                 "character": 2
               }
             ],
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 64,
+                "id": 71,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 65,
+                    "id": 72,
                     "name": "route",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1233,30 +1360,30 @@
                     },
                     "sources": [
                       {
-                        "fileName": "lib/modules/action-hub/types/page-link.ts",
-                        "line": 13,
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/action-hub-needs-attention.ts",
+                        "line": 23,
                         "character": 4
                       }
                     ],
                     "type": {
                       "type": "reflection",
                       "declaration": {
-                        "id": 66,
+                        "id": 73,
                         "name": "__type",
                         "kind": 65536,
                         "kindString": "Type literal",
                         "flags": {},
                         "children": [
                           {
-                            "id": 67,
+                            "id": 74,
                             "name": "commands",
                             "kind": 1024,
                             "kindString": "Property",
                             "flags": {},
                             "sources": [
                               {
-                                "fileName": "lib/modules/action-hub/types/page-link.ts",
-                                "line": 14,
+                                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/action-hub-needs-attention.ts",
+                                "line": 25,
                                 "character": 6
                               }
                             ],
@@ -1269,7 +1396,7 @@
                             }
                           },
                           {
-                            "id": 68,
+                            "id": 75,
                             "name": "extras",
                             "kind": 1024,
                             "kindString": "Property",
@@ -1278,8 +1405,8 @@
                             },
                             "sources": [
                               {
-                                "fileName": "lib/modules/action-hub/types/page-link.ts",
-                                "line": 15,
+                                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/action-hub-needs-attention.ts",
+                                "line": 26,
                                 "character": 6
                               }
                             ],
@@ -1296,8 +1423,8 @@
                             "title": "Properties",
                             "kind": 1024,
                             "children": [
-                              67,
-                              68
+                              74,
+                              75
                             ]
                           }
                         ]
@@ -1305,7 +1432,7 @@
                     }
                   },
                   {
-                    "id": 69,
+                    "id": 76,
                     "name": "url",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1314,8 +1441,8 @@
                     },
                     "sources": [
                       {
-                        "fileName": "lib/modules/action-hub/types/page-link.ts",
-                        "line": 17,
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/action-hub-needs-attention.ts",
+                        "line": 28,
                         "character": 4
                       }
                     ],
@@ -1330,13 +1457,34 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      65,
-                      69
+                      72,
+                      76
                     ]
                   }
                 ]
               }
             }
+          },
+          {
+            "id": 68,
+            "name": "title",
+            "kind": 1024,
+            "kindString": "Property",
+            "flags": {},
+            "comment": {
+              "shortText": "The title of the action item."
+            },
+            "sources": [
+              {
+                "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
+                "line": 13,
+                "character": 2
+              }
+            ],
+            "type": {
+              "type": "intrinsic",
+              "name": "string"
+            }
           }
         ],
         "groups": [
@@ -1344,35 +1492,24 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
+              77,
+              69,
               70,
-              63
+              68
             ]
           }
         ],
         "sources": [
           {
-            "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
-            "line": 8,
+            "fileName": "projects/pages/src/modules/action-hub/types/action-hub-needs-attention.ts",
+            "line": 9,
             "character": 17
           }
-        ],
-        "extendedTypes": [
-          {
-            "type": "reference",
-            "name": "SkyPageLinkInterface"
-          }
-        ],
-        "extendedBy": [
-          {
-            "type": "reference",
-            "id": 86,
-            "name": "SkyRecentLink"
-          }
         ]
       },
       {
-        "id": 72,
-        "name": "SkyPageModalLink",
+        "id": 85,
+        "name": "SkyPageLink",
         "kind": 256,
         "kindString": "Interface",
         "flags": {},
@@ -1381,7 +1518,7 @@
         },
         "children": [
           {
-            "id": 84,
+            "id": 93,
             "name": "label",
             "kind": 1024,
             "kindString": "Property",
@@ -1406,41 +1543,248 @@
             }
           },
           {
-            "id": 80,
-            "name": "modal",
+            "id": 86,
+            "name": "permalink",
             "kind": 1024,
             "kindString": "Property",
-            "flags": {
-              "isOptional": true
-            },
+            "flags": {},
             "comment": {
-              "shortText": "The modal parameters."
+              "shortText": "The link destination."
             },
             "sources": [
               {
-                "fileName": "projects/pages/src/modules/action-hub/types/page-modal-link.ts",
-                "line": 23,
+                "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
+                "line": 12,
                 "character": 2
               }
             ],
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 81,
+                "id": 87,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 82,
-                    "name": "component",
+                    "id": 88,
+                    "name": "route",
                     "kind": 1024,
                     "kindString": "Property",
-                    "flags": {},
+                    "flags": {
+                      "isOptional": true
+                    },
+                    "sources": [
+                      {
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-link.ts",
+                        "line": 13,
+                        "character": 4
+                      }
+                    ],
+                    "type": {
+                      "type": "reflection",
+                      "declaration": {
+                        "id": 89,
+                        "name": "__type",
+                        "kind": 65536,
+                        "kindString": "Type literal",
+                        "flags": {},
+                        "children": [
+                          {
+                            "id": 90,
+                            "name": "commands",
+                            "kind": 1024,
+                            "kindString": "Property",
+                            "flags": {},
+                            "sources": [
+                              {
+                                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-link.ts",
+                                "line": 14,
+                                "character": 6
+                              }
+                            ],
+                            "type": {
+                              "type": "array",
+                              "elementType": {
+                                "type": "intrinsic",
+                                "name": "any"
+                              }
+                            }
+                          },
+                          {
+                            "id": 91,
+                            "name": "extras",
+                            "kind": 1024,
+                            "kindString": "Property",
+                            "flags": {
+                              "isOptional": true
+                            },
+                            "sources": [
+                              {
+                                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-link.ts",
+                                "line": 15,
+                                "character": 6
+                              }
+                            ],
+                            "type": {
+                              "type": "reference",
+                              "qualifiedName": "NavigationExtras",
+                              "package": "@angular/router",
+                              "name": "NavigationExtras"
+                            }
+                          }
+                        ],
+                        "groups": [
+                          {
+                            "title": "Properties",
+                            "kind": 1024,
+                            "children": [
+                              90,
+                              91
+                            ]
+                          }
+                        ]
+                      }
+                    }
+                  },
+                  {
+                    "id": 92,
+                    "name": "url",
+                    "kind": 1024,
+                    "kindString": "Property",
+                    "flags": {
+                      "isOptional": true
+                    },
+                    "sources": [
+                      {
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-link.ts",
+                        "line": 17,
+                        "character": 4
+                      }
+                    ],
+                    "type": {
+                      "type": "intrinsic",
+                      "name": "string"
+                    }
+                  }
+                ],
+                "groups": [
+                  {
+                    "title": "Properties",
+                    "kind": 1024,
+                    "children": [
+                      88,
+                      92
+                    ]
+                  }
+                ]
+              }
+            }
+          }
+        ],
+        "groups": [
+          {
+            "title": "Properties",
+            "kind": 1024,
+            "children": [
+              93,
+              86
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/pages/src/modules/action-hub/types/page-link.ts",
+            "line": 8,
+            "character": 17
+          }
+        ],
+        "extendedTypes": [
+          {
+            "type": "reference",
+            "name": "SkyPageLinkInterface"
+          }
+        ],
+        "extendedBy": [
+          {
+            "type": "reference",
+            "id": 109,
+            "name": "SkyRecentLink"
+          }
+        ]
+      },
+      {
+        "id": 95,
+        "name": "SkyPageModalLink",
+        "kind": 256,
+        "kindString": "Interface",
+        "flags": {},
+        "comment": {
+          "shortText": "Displays links to related information or recently accessed items."
+        },
+        "children": [
+          {
+            "id": 107,
+            "name": "label",
+            "kind": 1024,
+            "kindString": "Property",
+            "flags": {},
+            "comment": {
+              "shortText": "The link text."
+            },
+            "sources": [
+              {
+                "fileName": "projects/pages/src/modules/action-hub/types/page-link-interface.ts",
+                "line": 8,
+                "character": 2
+              }
+            ],
+            "type": {
+              "type": "intrinsic",
+              "name": "string"
+            },
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyPageLinkInterface.label"
+            }
+          },
+          {
+            "id": 103,
+            "name": "modal",
+            "kind": 1024,
+            "kindString": "Property",
+            "flags": {
+              "isOptional": true
+            },
+            "comment": {
+              "shortText": "The modal parameters."
+            },
+            "sources": [
+              {
+                "fileName": "projects/pages/src/modules/action-hub/types/page-modal-link.ts",
+                "line": 23,
+                "character": 2
+              }
+            ],
+            "type": {
+              "type": "reflection",
+              "declaration": {
+                "id": 104,
+                "name": "__type",
+                "kind": 65536,
+                "kindString": "Type literal",
+                "flags": {},
+                "children": [
+                  {
+                    "id": 105,
+                    "name": "component",
+                    "kind": 1024,
+                    "kindString": "Property",
+                    "flags": {},
                     "sources": [
                       {
-                        "fileName": "lib/modules/action-hub/types/page-modal-link.ts",
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts",
                         "line": 24,
                         "character": 4
                       }
@@ -1451,7 +1795,7 @@
                     }
                   },
                   {
-                    "id": 83,
+                    "id": 106,
                     "name": "config",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1460,7 +1804,7 @@
                     },
                     "sources": [
                       {
-                        "fileName": "lib/modules/action-hub/types/page-modal-link.ts",
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts",
                         "line": 25,
                         "character": 4
                       }
@@ -1476,8 +1820,8 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      82,
-                      83
+                      105,
+                      106
                     ]
                   }
                 ]
@@ -1485,7 +1829,7 @@
             }
           },
           {
-            "id": 73,
+            "id": 96,
             "name": "permalink",
             "kind": 1024,
             "kindString": "Property",
@@ -1505,14 +1849,14 @@
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 74,
+                "id": 97,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 75,
+                    "id": 98,
                     "name": "route",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1521,7 +1865,7 @@
                     },
                     "sources": [
                       {
-                        "fileName": "lib/modules/action-hub/types/page-modal-link.ts",
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts",
                         "line": 14,
                         "character": 4
                       }
@@ -1529,21 +1873,21 @@
                     "type": {
                       "type": "reflection",
                       "declaration": {
-                        "id": 76,
+                        "id": 99,
                         "name": "__type",
                         "kind": 65536,
                         "kindString": "Type literal",
                         "flags": {},
                         "children": [
                           {
-                            "id": 77,
+                            "id": 100,
                             "name": "commands",
                             "kind": 1024,
                             "kindString": "Property",
                             "flags": {},
                             "sources": [
                               {
-                                "fileName": "lib/modules/action-hub/types/page-modal-link.ts",
+                                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts",
                                 "line": 15,
                                 "character": 6
                               }
@@ -1557,7 +1901,7 @@
                             }
                           },
                           {
-                            "id": 78,
+                            "id": 101,
                             "name": "extras",
                             "kind": 1024,
                             "kindString": "Property",
@@ -1566,7 +1910,7 @@
                             },
                             "sources": [
                               {
-                                "fileName": "lib/modules/action-hub/types/page-modal-link.ts",
+                                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts",
                                 "line": 16,
                                 "character": 6
                               }
@@ -1584,8 +1928,8 @@
                             "title": "Properties",
                             "kind": 1024,
                             "children": [
-                              77,
-                              78
+                              100,
+                              101
                             ]
                           }
                         ]
@@ -1593,7 +1937,7 @@
                     }
                   },
                   {
-                    "id": 79,
+                    "id": 102,
                     "name": "url",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1602,7 +1946,7 @@
                     },
                     "sources": [
                       {
-                        "fileName": "lib/modules/action-hub/types/page-modal-link.ts",
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts",
                         "line": 18,
                         "character": 4
                       }
@@ -1618,8 +1962,8 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      75,
-                      79
+                      98,
+                      102
                     ]
                   }
                 ]
@@ -1632,9 +1976,9 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              84,
-              80,
-              73
+              107,
+              103,
+              96
             ]
           }
         ],
@@ -1653,7 +1997,7 @@
         ]
       },
       {
-        "id": 86,
+        "id": 109,
         "name": "SkyRecentLink",
         "kind": 256,
         "kindString": "Interface",
@@ -1669,7 +2013,7 @@
         },
         "children": [
           {
-            "id": 95,
+            "id": 118,
             "name": "label",
             "kind": 1024,
             "kindString": "Property",
@@ -1690,12 +2034,12 @@
             },
             "inheritedFrom": {
               "type": "reference",
-              "id": 70,
+              "id": 93,
               "name": "SkyPageLink.label"
             }
           },
           {
-            "id": 87,
+            "id": 110,
             "name": "lastAccessed",
             "kind": 1024,
             "kindString": "Property",
@@ -1724,7 +2068,7 @@
             }
           },
           {
-            "id": 88,
+            "id": 111,
             "name": "permalink",
             "kind": 1024,
             "kindString": "Property",
@@ -1742,14 +2086,14 @@
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 89,
+                "id": 112,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 90,
+                    "id": 113,
                     "name": "route",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1758,7 +2102,7 @@
                     },
                     "sources": [
                       {
-                        "fileName": "lib/modules/action-hub/types/page-link.ts",
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-link.ts",
                         "line": 13,
                         "character": 4
                       }
@@ -1766,21 +2110,21 @@
                     "type": {
                       "type": "reflection",
                       "declaration": {
-                        "id": 91,
+                        "id": 114,
                         "name": "__type",
                         "kind": 65536,
                         "kindString": "Type literal",
                         "flags": {},
                         "children": [
                           {
-                            "id": 92,
+                            "id": 115,
                             "name": "commands",
                             "kind": 1024,
                             "kindString": "Property",
                             "flags": {},
                             "sources": [
                               {
-                                "fileName": "lib/modules/action-hub/types/page-link.ts",
+                                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-link.ts",
                                 "line": 14,
                                 "character": 6
                               }
@@ -1794,7 +2138,7 @@
                             }
                           },
                           {
-                            "id": 93,
+                            "id": 116,
                             "name": "extras",
                             "kind": 1024,
                             "kindString": "Property",
@@ -1803,7 +2147,7 @@
                             },
                             "sources": [
                               {
-                                "fileName": "lib/modules/action-hub/types/page-link.ts",
+                                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-link.ts",
                                 "line": 15,
                                 "character": 6
                               }
@@ -1821,8 +2165,8 @@
                             "title": "Properties",
                             "kind": 1024,
                             "children": [
-                              92,
-                              93
+                              115,
+                              116
                             ]
                           }
                         ]
@@ -1830,7 +2174,7 @@
                     }
                   },
                   {
-                    "id": 94,
+                    "id": 117,
                     "name": "url",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1839,7 +2183,7 @@
                     },
                     "sources": [
                       {
-                        "fileName": "lib/modules/action-hub/types/page-link.ts",
+                        "fileName": "libs/components/pages/src/lib/modules/action-hub/types/page-link.ts",
                         "line": 17,
                         "character": 4
                       }
@@ -1855,8 +2199,8 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      90,
-                      94
+                      113,
+                      117
                     ]
                   }
                 ]
@@ -1864,7 +2208,7 @@
             },
             "inheritedFrom": {
               "type": "reference",
-              "id": 63,
+              "id": 86,
               "name": "SkyPageLink.permalink"
             }
           }
@@ -1874,9 +2218,9 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              95,
-              87,
-              88
+              118,
+              110,
+              111
             ]
           }
         ],
@@ -1890,13 +2234,13 @@
         "extendedTypes": [
           {
             "type": "reference",
-            "id": 62,
+            "id": 85,
             "name": "SkyPageLink"
           }
         ]
       },
       {
-        "id": 55,
+        "id": 78,
         "name": "SkyActionHubNeedsAttentionClickHandler",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -1911,35 +2255,35 @@
         "type": {
           "type": "reflection",
           "declaration": {
-            "id": 56,
+            "id": 79,
             "name": "__type",
             "kind": 65536,
             "kindString": "Type literal",
             "flags": {},
             "sources": [
               {
-                "fileName": "lib/modules/action-hub/types/action-hub-needs-attention-click-handler.ts",
+                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/action-hub-needs-attention-click-handler.ts",
                 "line": 1,
                 "character": 53
               }
             ],
             "signatures": [
               {
-                "id": 57,
+                "id": 80,
                 "name": "__type",
                 "kind": 4096,
                 "kindString": "Call signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 58,
+                    "id": 81,
                     "name": "_",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 59,
+                      "id": 82,
                       "name": "SkyActionHubNeedsAttentionClickHandlerArgs"
                     }
                   }
@@ -1954,7 +2298,7 @@
         }
       },
       {
-        "id": 59,
+        "id": 82,
         "name": "SkyActionHubNeedsAttentionClickHandlerArgs",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -1969,21 +2313,21 @@
         "type": {
           "type": "reflection",
           "declaration": {
-            "id": 60,
+            "id": 83,
             "name": "__type",
             "kind": 65536,
             "kindString": "Type literal",
             "flags": {},
             "children": [
               {
-                "id": 61,
+                "id": 84,
                 "name": "item",
                 "kind": 1024,
                 "kindString": "Property",
                 "flags": {},
                 "sources": [
                   {
-                    "fileName": "lib/modules/action-hub/types/action-hub-needs-attention-click-handler.ts",
+                    "fileName": "libs/components/pages/src/lib/modules/action-hub/types/action-hub-needs-attention-click-handler.ts",
                     "line": 6,
                     "character": 2
                   }
@@ -1999,13 +2343,13 @@
                 "title": "Properties",
                 "kind": 1024,
                 "children": [
-                  61
+                  84
                 ]
               }
             ],
             "sources": [
               {
-                "fileName": "lib/modules/action-hub/types/action-hub-needs-attention-click-handler.ts",
+                "fileName": "libs/components/pages/src/lib/modules/action-hub/types/action-hub-needs-attention-click-handler.ts",
                 "line": 5,
                 "character": 57
               }
@@ -2014,7 +2358,46 @@
         }
       },
       {
-        "id": 71,
+        "id": 123,
+        "name": "SkyPageLayoutType",
+        "kind": 4194304,
+        "kindString": "Type alias",
+        "flags": {},
+        "sources": [
+          {
+            "fileName": "projects/pages/src/modules/page/types/page-layout-type.ts",
+            "line": 1,
+            "character": 12
+          }
+        ],
+        "type": {
+          "type": "union",
+          "types": [
+            {
+              "type": "literal",
+              "value": "none"
+            },
+            {
+              "type": "literal",
+              "value": "fit"
+            },
+            {
+              "type": "literal",
+              "value": "blocks"
+            },
+            {
+              "type": "literal",
+              "value": "list"
+            },
+            {
+              "type": "literal",
+              "value": "tabs"
+            }
+          ]
+        }
+      },
+      {
+        "id": 94,
         "name": "SkyPageLinksInput",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -2033,7 +2416,7 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 62,
+                "id": 85,
                 "name": "SkyPageLink"
               }
             },
@@ -2049,7 +2432,7 @@
         }
       },
       {
-        "id": 85,
+        "id": 108,
         "name": "SkyPageModalLinksInput",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -2068,7 +2451,7 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 72,
+                "id": 95,
                 "name": "SkyPageModalLink"
               }
             },
@@ -2084,7 +2467,7 @@
         }
       },
       {
-        "id": 96,
+        "id": 119,
         "name": "SkyRecentLinksInput",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -2106,7 +2489,7 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 86,
+                "id": 109,
                 "name": "SkyRecentLink"
               }
             },
@@ -2124,60 +2507,402 @@
             }
           ]
         }
-      }
-    ],
-    "groups": [
-      {
-        "title": "Classes",
-        "kind": 128,
-        "children": [
-          41,
-          97,
-          1,
-          15,
-          18,
-          21,
-          26
-        ]
-      },
-      {
-        "title": "Interfaces",
-        "kind": 256,
-        "children": [
-          44,
-          62,
-          72,
-          86
-        ]
       },
       {
-        "title": "Type aliases",
-        "kind": 4194304,
+        "id": 127,
+        "name": "SkyPageHarness",
+        "kind": 128,
+        "kindString": "Class",
+        "flags": {},
+        "comment": {
+          "shortText": "Harness for interacting with a page component in tests."
+        },
         "children": [
-          55,
-          59,
-          71,
-          85,
-          96
-        ]
-      }
-    ],
-    "sources": [
-      {
-        "fileName": "index.ts",
-        "line": 1,
-        "character": 0
-      }
-    ]
-  },
-  "codeExamples": [
-    {
-      "fileName": "action-hub-demo.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.component.html",
-      "rawContents": "<sky-action-hub\n  [needsAttention]=\"needsAttention\"\n  [recentLinks]=\"recentLinks\"\n  [relatedLinks]=\"relatedLinks\"\n  [settingsLinks]=\"settingsLinks\"\n  [title]=\"title\"\n>\n  <sky-action-hub-buttons>\n    <a\n      *ngFor=\"let button of buttons\"\n      class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n      [href]=\"button.permalink.url\"\n    >\n      {{ button.label }}\n    </a>\n  </sky-action-hub-buttons>\n\n  <sky-action-hub-content>\n    <h2 class=\"sky-font-heading-2\">Additional content</h2>\n    <p>More content can go here as needed for the functional area.</p>\n  </sky-action-hub-content>\n</sky-action-hub>\n"
-    },
-    {
-      "fileName": "action-hub-demo.component.ts",
+          {
+            "id": 140,
+            "name": "getLayout",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/pages/src/testing/page/page-harness.ts",
+                "line": 35,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 141,
+                "name": "getLayout",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets the current layout."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "reference",
+                      "id": 123,
+                      "name": "SkyPageLayoutType"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                }
+              }
+            ]
+          },
+          {
+            "id": 142,
+            "name": "getPageHeader",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/pages/src/testing/page/page-harness.ts",
+                "line": 51,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 143,
+                "name": "getPageHeader",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets the first page header that matches the given filters."
+                },
+                "parameters": [
+                  {
+                    "id": 144,
+                    "name": "filters",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {
+                      "isOptional": true
+                    },
+                    "comment": {
+                      "shortText": "filters for which page header to return\n"
+                    },
+                    "type": {
+                      "type": "reference",
+                      "name": "SkyPageHeaderHarnessFilters"
+                    }
+                  }
+                ],
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "reference",
+                      "name": "SkyPageHeaderHarness"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                }
+              }
+            ]
+          },
+          {
+            "id": 148,
+            "name": "host",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {},
+            "sources": [
+              {
+                "fileName": "node_modules/@angular/cdk/testing/index.d.ts",
+                "line": 40,
+                "character": 4
+              }
+            ],
+            "signatures": [
+              {
+                "id": 149,
+                "name": "host",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets a `Promise` for the `TestElement` representing the host element of the component."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "reference",
+                      "qualifiedName": "TestElement",
+                      "package": "@angular/cdk",
+                      "name": "TestElement"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyComponentHarness.host"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyComponentHarness.host"
+            }
+          },
+          {
+            "id": 129,
+            "name": "with",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true,
+              "isStatic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/pages/src/testing/page/page-harness.ts",
+                "line": 26,
+                "character": 16
+              }
+            ],
+            "signatures": [
+              {
+                "id": 130,
+                "name": "with",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets a `HarnessPredicate` that can be used to search for a\n`SkyPageHarness` that meets certain criteria."
+                },
+                "parameters": [
+                  {
+                    "id": 131,
+                    "name": "filters",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {},
+                    "type": {
+                      "type": "reference",
+                      "id": 168,
+                      "name": "SkyPageHarnessFilters"
+                    }
+                  }
+                ],
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "reference",
+                      "id": 127,
+                      "name": "SkyPageHarness"
+                    }
+                  ],
+                  "qualifiedName": "HarnessPredicate",
+                  "package": "@angular/cdk",
+                  "name": "HarnessPredicate"
+                }
+              }
+            ]
+          }
+        ],
+        "groups": [
+          {
+            "title": "Constructors",
+            "kind": 512,
+            "children": [
+              137
+            ]
+          },
+          {
+            "title": "Methods",
+            "kind": 2048,
+            "children": [
+              140,
+              142,
+              148,
+              129
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/pages/src/testing/page/page-harness.ts",
+            "line": 16,
+            "character": 13
+          }
+        ],
+        "extendedTypes": [
+          {
+            "type": "reference",
+            "name": "SkyComponentHarness"
+          }
+        ]
+      },
+      {
+        "id": 168,
+        "name": "SkyPageHarnessFilters",
+        "kind": 256,
+        "kindString": "Interface",
+        "flags": {},
+        "comment": {
+          "shortText": "A set of criteria that can be used to filter a list of SkyPageHarness instances."
+        },
+        "children": [
+          {
+            "id": 171,
+            "name": "ancestor",
+            "kind": 1024,
+            "kindString": "Property",
+            "flags": {
+              "isOptional": true
+            },
+            "comment": {
+              "shortText": "Only find instances that are nested under an element with the given selector."
+            },
+            "sources": [
+              {
+                "fileName": "node_modules/@angular/cdk/testing/index.d.ts",
+                "line": 28,
+                "character": 4
+              }
+            ],
+            "type": {
+              "type": "intrinsic",
+              "name": "string"
+            },
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyHarnessFilters.ancestor"
+            }
+          },
+          {
+            "id": 169,
+            "name": "dataSkyId",
+            "kind": 1024,
+            "kindString": "Property",
+            "flags": {
+              "isOptional": true
+            },
+            "comment": {
+              "shortText": "Only find instances whose `data-sky-id` attribute matches the given value."
+            },
+            "sources": [
+              {
+                "fileName": "libs/components/core/testing/src/shared/harness-filters.ts",
+                "line": 11,
+                "character": 2
+              }
+            ],
+            "type": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "intrinsic",
+                  "name": "string"
+                },
+                {
+                  "type": "reference",
+                  "qualifiedName": "RegExp",
+                  "package": "typescript",
+                  "name": "RegExp"
+                }
+              ]
+            },
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyHarnessFilters.dataSkyId"
+            }
+          },
+          {
+            "id": 170,
+            "name": "selector",
+            "kind": 1024,
+            "kindString": "Property",
+            "flags": {
+              "isOptional": true
+            },
+            "comment": {
+              "shortText": "Only find instances whose host element matches the given selector."
+            },
+            "sources": [
+              {
+                "fileName": "node_modules/@angular/cdk/testing/index.d.ts",
+                "line": 26,
+                "character": 4
+              }
+            ],
+            "type": {
+              "type": "intrinsic",
+              "name": "string"
+            },
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyHarnessFilters.selector"
+            }
+          }
+        ],
+        "groups": [
+          {
+            "title": "Properties",
+            "kind": 1024,
+            "children": [
+              171,
+              169,
+              170
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/pages/src/testing/page/page-harness-filters.ts",
+            "line": 7,
+            "character": 17
+          }
+        ],
+        "extendedTypes": [
+          {
+            "type": "reference",
+            "name": "SkyHarnessFilters"
+          }
+        ]
+      }
+    ],
+    "groups": [
+      {
+        "title": "Modules",
+        "kind": 2,
+        "children": [
+          1,
+          2
+        ]
+      }
+    ]
+  },
+  "codeExamples": [
+    {
+      "fileName": "action-hub-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.component.html",
+      "rawContents": "<sky-action-hub\n  [needsAttention]=\"needsAttention\"\n  [recentLinks]=\"recentLinks\"\n  [relatedLinks]=\"relatedLinks\"\n  [settingsLinks]=\"settingsLinks\"\n  [title]=\"title\"\n>\n  <sky-action-hub-buttons>\n    <a\n      *ngFor=\"let button of buttons\"\n      class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n      [href]=\"button.permalink.url\"\n    >\n      {{ button.label }}\n    </a>\n  </sky-action-hub-buttons>\n\n  <sky-action-hub-content>\n    <h2 class=\"sky-font-heading-2\">Additional content</h2>\n    <p>More content can go here as needed for the functional area.</p>\n  </sky-action-hub-content>\n</sky-action-hub>\n"
+    },
+    {
+      "fileName": "action-hub-demo.component.ts",
       "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.component.ts",
       "rawContents": "import { Component } from '@angular/core';\nimport { SkyPageModalLinksInput } from '@skyux/pages';\n\nimport { SettingsModalComponent } from './settings-modal.component';\n\nconst pastHours = Array.from(Array(5).keys()).map((i) => {\n  const date = new Date();\n  date.setHours(date.getHours() - (i + 1));\n  return date;\n});\n\n@Component({\n  selector: 'app-action-hub-visual',\n  templateUrl: './action-hub-demo.component.html',\n})\nexport class ActionHubDemoComponent {\n  public buttons = [\n    {\n      label: 'Action 1',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Action 2',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Action 3',\n      permalink: {\n        url: '#',\n      },\n    },\n  ];\n\n  public needsAttention = [\n    {\n      title: '9',\n      message: 'updates from portal',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '8',\n      message: 'new messages from online donation',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '7',\n      message: 'possible duplicates from constituent lists',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '6',\n      message: 'updates from portal',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '5',\n      message: 'new messages from online donation',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '4',\n      message: 'possible duplicates from constituent lists',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '3',\n      message: 'update from portal',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '2',\n      message: 'new messages from online donation',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '1',\n      message: 'possible duplicate from constituent lists',\n      permalink: {\n        url: '#',\n      },\n    },\n  ];\n\n  public recentLinks = [\n    {\n      label: 'Recent 1',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[0],\n    },\n    {\n      label: 'Recent 2',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[1],\n    },\n    {\n      label: 'Recent 3',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[2],\n    },\n    {\n      label: 'Recent 4',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[3],\n    },\n    {\n      label: 'Recent 5',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[4],\n    },\n  ];\n\n  public relatedLinks = [\n    {\n      label: 'Link 1',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Link 2',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Link 3',\n      permalink: {\n        url: '#',\n      },\n    },\n  ];\n\n  public settingsLinks: SkyPageModalLinksInput = [\n    {\n      label: 'Number',\n      modal: {\n        component: SettingsModalComponent,\n        config: {\n          size: 'large',\n          providers: [\n            {\n              provide: 'modalTitle',\n              useValue: 'Number',\n            },\n          ],\n        },\n      },\n    },\n    {\n      label: 'Color',\n      modal: {\n        component: SettingsModalComponent,\n        config: {\n          size: 'large',\n          providers: [\n            {\n              provide: 'modalTitle',\n              useValue: 'Color',\n            },\n          ],\n        },\n      },\n    },\n  ];\n\n  public title = 'Page title';\n}\n"
     },
@@ -2195,6 +2920,236 @@
       "fileName": "settings-modal.component.ts",
       "filePath": "/projects/pages/documentation/code-examples/action-hub/settings-modal.component.ts",
       "rawContents": "import { Component, Inject } from '@angular/core';\nimport {\n  AbstractControl,\n  UntypedFormBuilder,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-settings-modal',\n  templateUrl: './settings-modal.component.html',\n})\nexport class SettingsModalComponent {\n  public form: UntypedFormGroup;\n  public fields: string[] = [];\n\n  constructor(\n    fb: UntypedFormBuilder,\n    public modal: SkyModalInstance,\n    @Inject('modalTitle') public title: string\n  ) {\n    const controls: Record<string, AbstractControl> = {};\n    for (let i = 1; i <= 5; i++) {\n      const field = `${this.title} ${i}`;\n      this.fields.push(field);\n      controls[field] = fb.control('');\n    }\n    this.form = fb.group(controls);\n    this.modal.closed.subscribe((args) => {\n      if (args.reason === 'save') {\n        console.log(this.form.value);\n      }\n    });\n  }\n}\n"
+    },
+    {
+      "fileName": "dashboards-grid-context-menu.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/dashboards-grid-context-menu.component.html",
+      "rawContents": "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + dashboardName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + dashboardName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Copy ' + dashboardName\">\n        Copy\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + dashboardName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+    },
+    {
+      "fileName": "dashboards-grid-context-menu.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/dashboards-grid-context-menu.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-dashboards-grid-context-menu',\n  templateUrl: './dashboards-grid-context-menu.component.html',\n})\nexport class DashboardGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  public dashboardName = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.dashboardName = params.data && params.data.dashboard;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n}\n"
+    },
+    {
+      "fileName": "list-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-content.component.html",
+      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-primary-item>\n      <button class=\"sky-btn sky-btn-default\" aria-label=\"New dashboard\">\n        <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n        New\n      </button>\n    </sky-data-manager-toolbar-primary-item>\n  </sky-data-manager-toolbar>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Dashboards </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
+    },
+    {
+      "fileName": "list-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-content.component.ts",
+      "rawContents": "import { Component, OnInit, inject } from '@angular/core';\nimport { SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { ColDef, GridOptions, ICellRendererParams } from 'ag-grid-community';\n\nimport { DashboardGridContextMenuComponent } from './dashboards-grid-context-menu.component';\n\n@Component({\n  selector: 'app-list-page-content',\n  templateUrl: './list-page-content.component.html',\n  providers: [SkyDataManagerService],\n})\nexport class ListPageContentComponent implements OnInit {\n  public items = [\n    {\n      dashboard: 'Cash Flow Tracker',\n      name: 'Kanesha Hutto',\n      lastUpdated: '06/21/2023',\n    },\n    {\n      dashboard: 'Accounts Receivable Dashboard',\n      name: 'Kristeen Lunsford',\n      lastUpdated: '06/30/2023',\n    },\n    {\n      dashboard: 'Accounts Payable Dashboard',\n      name: 'Darcel Lenz',\n      lastUpdated: '04/20/2023',\n    },\n    {\n      dashboard: 'Budget vs. Actual',\n      name: 'Barbara Durr',\n      lastUpdated: '12/04/2023',\n    },\n    {\n      dashboard: 'Balance Sheet - New',\n      name: 'Ilene Woo',\n      lastUpdated: '12/20/2023',\n    },\n    {\n      dashboard: 'Debt Management',\n      name: 'Tonja Sanderson',\n      lastUpdated: '09/10/2023',\n    },\n  ];\n  public gridOptions: GridOptions;\n\n  #dataManagerService = inject(SkyDataManagerService);\n  #agGridSvc = inject(SkyAgGridService);\n\n  #columnDefs: ColDef[] = [\n    {\n      colId: 'contextMenu',\n      headerName: '',\n      sortable: false,\n      cellRenderer: DashboardGridContextMenuComponent,\n      maxWidth: 55,\n    },\n    {\n      colId: 'dashboard',\n      field: 'dashboard',\n      headerName: 'Name',\n      width: 150,\n      cellRenderer: (params: ICellRendererParams): string => {\n        return `<a href=\"/\">${params.value}</a>`;\n      },\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Created By',\n    },\n    {\n      colId: 'lastUpdated',\n      field: 'lastUpdated',\n      headerName: 'Last Updated',\n    },\n  ];\n\n  #viewConfig: SkyDataViewConfig = {\n    id: 'gridView',\n    name: 'Grid View',\n    searchEnabled: true,\n  };\n\n  constructor() {\n    this.gridOptions = this.#agGridSvc.getGridOptions({\n      gridOptions: {\n        columnDefs: this.#columnDefs,\n        onGridReady: (args) => {\n          args.api.sizeColumnsToFit();\n        },\n      },\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#dataManagerService.initDataManager({\n      activeViewId: 'gridView',\n      dataManagerConfig: {},\n      defaultDataState: new SkyDataManagerState({\n        views: [\n          {\n            viewId: 'gridView',\n            displayedColumnIds: [\n              'contextMenu',\n              'dashboard',\n              'name',\n              'lastUpdated',\n            ],\n          },\n        ],\n      }),\n    });\n\n    this.#dataManagerService.initDataView(this.#viewConfig);\n  }\n}\n"
+    },
+    {
+      "fileName": "list-page-list-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"list\">\n  <sky-page-header pageTitle=\"Dashboards\" />\n  <sky-page-content>\n    <app-list-page-content></app-list-page-content>\n  </sky-page-content>\n</sky-page>\n"
+    },
+    {
+      "fileName": "list-page-list-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { ListPageListLayoutDemoComponent } from './list-page-list-layout-demo.component';\nimport { ListPageListLayoutDemoModule } from './list-page-list-layout-demo.module';\n\nfdescribe('List page list layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<ListPageListLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(ListPageListLayoutDemoComponent);\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [ListPageListLayoutDemoModule, NoopAnimationsModule],\n    });\n  });\n\n  it('should have a list layout', async () => {\n    const { pageHarness } = await setupTest();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('list');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      'Dashboards'\n    );\n  });\n});\n"
+    },
+    {
+      "fileName": "list-page-list-layout-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-list-page-list-layout-demo',\n  templateUrl: './list-page-list-layout-demo.component.html',\n})\nexport class ListPageListLayoutDemoComponent {}\n"
+    },
+    {
+      "fileName": "list-page-list-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.module.ts",
+      "rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DashboardGridContextMenuComponent } from './dashboards-grid-context-menu.component';\nimport { ListPageContentComponent } from './list-page-content.component';\nimport { ListPageListLayoutDemoComponent } from './list-page-list-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    ListPageListLayoutDemoComponent,\n    DashboardGridContextMenuComponent,\n    ListPageContentComponent,\n  ],\n  exports: [ListPageListLayoutDemoComponent],\n  imports: [\n    SkyPageModule,\n    SkyDropdownModule,\n    SkyAgGridModule,\n    SkyDataManagerModule,\n    SkyIconModule,\n    AgGridModule,\n    SkyKeyInfoModule,\n  ],\n})\nexport class ListPageListLayoutDemoModule {}\n"
+    },
+    {
+      "fileName": "contact-context-menu.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/contact-context-menu.component.html",
+      "rawContents": "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + contactName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + contactName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + contactName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+    },
+    {
+      "fileName": "contact-context-menu.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/contact-context-menu.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-contacts-grid-context-menu',\n  templateUrl: './contact-context-menu.component.html',\n})\nexport class ContactContextMenuComponent implements ICellRendererAngularComp {\n  public contactName = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.contactName = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n}\n"
+    },
+    {
+      "fileName": "list-page-contacts-grid.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-contacts-grid.component.html",
+      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar class=\"sky-margin-stacked-sm\">\n    <sky-data-manager-toolbar-primary-item>\n      <button class=\"sky-btn sky-btn-default\" aria-label=\"New contact\">\n        <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n        New\n      </button>\n    </sky-data-manager-toolbar-primary-item>\n  </sky-data-manager-toolbar>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ contacts.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Contacts </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"contacts\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
+    },
+    {
+      "fileName": "list-page-contacts-grid.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-contacts-grid.component.ts",
+      "rawContents": "import { Component, Input, OnInit, inject } from '@angular/core';\nimport { SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { ColDef, GridOptions, ICellRendererParams } from 'ag-grid-community';\n\nimport { ContactContextMenuComponent } from './contact-context-menu.component';\n\ntype Contact = {\n  name: string;\n  organization: string;\n  emailAddress: string;\n};\n\n@Component({\n  selector: 'app-list-page-contacts-grid',\n  templateUrl: './list-page-contacts-grid.component.html',\n  providers: [SkyDataManagerService],\n})\nexport class ListPageContactsGridComponent implements OnInit {\n  @Input()\n  public contacts: Contact[] = [];\n\n  public gridOptions: GridOptions;\n\n  #dataManagerService = inject(SkyDataManagerService);\n  #agGridSvc = inject(SkyAgGridService);\n\n  #columnDefs: ColDef[] = [\n    {\n      colId: 'contextMenu',\n      headerName: '',\n      sortable: false,\n      cellRenderer: ContactContextMenuComponent,\n      maxWidth: 55,\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Name',\n      width: 150,\n      cellRenderer: (params: ICellRendererParams): string => {\n        return `<a href=\"/\">${params.value}</a>`;\n      },\n    },\n    {\n      colId: 'organization',\n      field: 'organization',\n      headerName: 'Organization',\n    },\n    {\n      colId: 'emailAddress',\n      field: 'emailAddress',\n      headerName: 'Email Address',\n    },\n  ];\n\n  #viewConfig: SkyDataViewConfig = {\n    id: 'gridView',\n    name: 'Grid View',\n    searchEnabled: true,\n    columnPickerEnabled: true,\n    columnOptions: [\n      { id: 'contextMenu', label: 'Context menu', alwaysDisplayed: true },\n      { id: 'name', label: 'Name' },\n      { id: 'organization', label: 'Organization' },\n      { id: 'emailAddress', label: 'Email Address' },\n    ],\n  };\n\n  constructor() {\n    this.gridOptions = this.#agGridSvc.getGridOptions({\n      gridOptions: {\n        columnDefs: this.#columnDefs,\n        onGridReady: (args) => {\n          args.api.sizeColumnsToFit();\n        },\n      },\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#dataManagerService.initDataManager({\n      activeViewId: 'gridView',\n      dataManagerConfig: {},\n      defaultDataState: new SkyDataManagerState({\n        views: [\n          {\n            viewId: 'gridView',\n            displayedColumnIds: [\n              'contextMenu',\n              'name',\n              'organization',\n              'emailAddress',\n            ],\n          },\n        ],\n      }),\n    });\n\n    this.#dataManagerService.initDataView(this.#viewConfig);\n  }\n}\n"
+    },
+    {
+      "fileName": "list-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-content.component.html",
+      "rawContents": "<sky-tabset [(active)]=\"activeTabIndex\">\n  <sky-tab tabHeading=\"My contacts\" layout=\"list\">\n    <app-list-page-contacts-grid\n      *ngIf=\"activeTabIndex === 0\"\n      [contacts]=\"myContacts\"\n    ></app-list-page-contacts-grid>\n  </sky-tab>\n  <sky-tab tabHeading=\"All contacts\" layout=\"list\">\n    <app-list-page-contacts-grid\n      *ngIf=\"activeTabIndex === 1\"\n      [contacts]=\"allContacts\"\n    ></app-list-page-contacts-grid>\n  </sky-tab>\n</sky-tabset>\n"
+    },
+    {
+      "fileName": "list-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-content.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-list-page-content',\n  templateUrl: './list-page-content.component.html',\n})\nexport class ListPageContentComponent {\n  public activeTabIndex: SkyTabIndex = 0;\n\n  public myContacts = [\n    {\n      name: 'Wonda Lumpkin',\n      organization: 'Riverfront College of the Arts',\n      emailAddress: 'wlumpkin@yahoo.com',\n    },\n    {\n      name: 'Eliza Vanhorn',\n      organization: 'Summit School of the Arts',\n      emailAddress: 'evanhorn@outlook.com',\n    },\n    {\n      name: 'Ed Sipes',\n      organization: 'Reflections Middle School',\n      emailAddress: 'esipes@yahoo.com',\n    },\n    {\n      name: 'Elwood Farris',\n      organization: 'Sandy Lagoon College',\n      emailAddress: 'elfarris@gmail.com',\n    },\n    {\n      name: 'Cristen Sizemore',\n      organization: 'Grafton Vision Health',\n      emailAddress: 'cristen.sizemore@aol.com',\n    },\n    {\n      name: 'Latrice Ashmore',\n      organization: 'Food Bank of Rapid City',\n      emailAddress: 'lashmore@gmail.com',\n    },\n  ];\n\n  public allContacts = [\n    ...this.myContacts,\n    {\n      name: 'Kanesha Hutto',\n      organization: 'Los Angeles College of the Arts',\n      emailAddress: 'khutto@yahoo.com',\n    },\n    {\n      name: 'Kristeen Lunsford',\n      organization: 'Food Bank of Los Angeles',\n      emailAddress: 'kristeen.lunsford@yahoo.com',\n    },\n    {\n      name: 'Barbara Durr',\n      organization: 'Riverfront Middle School',\n      emailAddress: 'bdurr@gmail.com',\n    },\n    {\n      name: 'Ilene Woo',\n      organization: 'Rapid City High School',\n      emailAddress: 'ilene.woo@aol.com',\n    },\n    {\n      name: 'Darcel Lenz',\n      organization: 'Riverfront College of the Arts',\n      emailAddress: 'dlenz@yahoo.com',\n    },\n  ];\n}\n"
+    },
+    {
+      "fileName": "list-page-tabs-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"tabs\">\n  <sky-page-header pageTitle=\"Contacts\" />\n  <sky-page-content>\n    <app-list-page-content></app-list-page-content>\n  </sky-page-content>\n</sky-page>\n"
+    },
+    {
+      "fileName": "list-page-tabs-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { ListPageTabsLayoutDemoComponent } from './list-page-tabs-layout-demo.component';\nimport { ListPageTabsLayoutDemoModule } from './list-page-tabs-layout-demo.module';\n\nfdescribe('List page tabs layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<ListPageTabsLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(ListPageTabsLayoutDemoComponent);\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        ListPageTabsLayoutDemoModule,\n        NoopAnimationsModule,\n        RouterTestingModule,\n      ],\n    });\n  });\n\n  it('should have a tabs layout', async () => {\n    const { pageHarness } = await setupTest();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('tabs');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      'Contacts'\n    );\n  });\n});\n"
+    },
+    {
+      "fileName": "list-page-tabs-layout-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-list-page-tabs-layout-demo',\n  templateUrl: './list-page-tabs-layout-demo.component.html',\n})\nexport class ListPageTabsLayoutDemoComponent {}\n"
+    },
+    {
+      "fileName": "list-page-tabs-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkyDropdownModule } from '@skyux/popovers';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { ContactContextMenuComponent } from './contact-context-menu.component';\nimport { ListPageContactsGridComponent } from './list-page-contacts-grid.component';\nimport { ListPageContentComponent } from './list-page-content.component';\nimport { ListPageTabsLayoutDemoComponent } from './list-page-tabs-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    ContactContextMenuComponent,\n    ListPageTabsLayoutDemoComponent,\n    ListPageContentComponent,\n    ListPageContactsGridComponent,\n  ],\n  exports: [ListPageTabsLayoutDemoComponent],\n  imports: [\n    CommonModule,\n    SkyPageModule,\n    SkyTabsModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyKeyInfoModule,\n    SkyDropdownModule,\n    SkyIconModule,\n  ],\n})\nexport class ListPageTabsLayoutDemoModule {}\n"
+    },
+    {
+      "fileName": "record-page-blocks-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"blocks\">\n  <sky-page-header\n    pageTitle=\"$500 pledge\"\n    [parentLink]=\"{\n      label: 'Pledges',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  />\n  <sky-page-content>\n    <app-record-page-content></app-record-page-content>\n  </sky-page-content>\n</sky-page>\n"
+    },
+    {
+      "fileName": "record-page-blocks-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { RecordPageBlocksLayoutDemoComponent } from './record-page-blocks-layout-demo.component';\nimport { RecordPageBlocksLayoutDemoModule } from './record-page-blocks-layout-demo.module';\n\nfdescribe('Record page blocks layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<RecordPageBlocksLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(\n      RecordPageBlocksLayoutDemoComponent\n    );\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        NoopAnimationsModule,\n        RecordPageBlocksLayoutDemoModule,\n        RouterTestingModule,\n      ],\n    });\n  });\n\n  it('should have a blocks layout', async () => {\n    const { pageHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('blocks');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      '$500 pledge'\n    );\n\n    await expectAsync(pageHeaderHarness.getParentLinkText()).toBeResolvedTo(\n      'Pledges'\n    );\n  });\n});\n"
+    },
+    {
+      "fileName": "record-page-blocks-layout-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-block-layout-demo',\n  templateUrl: './record-page-blocks-layout-demo.component.html',\n})\nexport class RecordPageBlocksLayoutDemoComponent {}\n"
+    },
+    {
+      "fileName": "record-page-blocks-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport {\n  SkyBoxModule,\n  SkyDescriptionListModule,\n  SkyFluidGridModule,\n} from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyPageModule } from '@skyux/pages';\n\nimport { RecordPageBlocksLayoutDemoComponent } from './record-page-blocks-layout-demo.component';\nimport { RecordPageContentComponent } from './record-page-content.component';\n\n@NgModule({\n  declarations: [\n    RecordPageBlocksLayoutDemoComponent,\n    RecordPageContentComponent,\n  ],\n  exports: [RecordPageBlocksLayoutDemoComponent],\n  imports: [\n    CommonModule,\n    SkyBoxModule,\n    SkyDescriptionListModule,\n    SkyFluidGridModule,\n    SkyIconModule,\n    SkyKeyInfoModule,\n    SkyPageModule,\n    SkyRepeaterModule,\n  ],\n})\nexport class RecordPageBlocksLayoutDemoModule {}\n"
+    },
+    {
+      "fileName": "record-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-content.component.html",
+      "rawContents": "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Details</h2>\n        </sky-box-header>\n        <sky-box-controls>\n          <button\n            class=\"sky-btn sky-btn-icon-borderless\"\n            aria-label=\"Edit button for details\"\n          >\n            <sky-icon icon=\"edit\" iconType=\"skyux\"></sky-icon>\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            <sky-description-list-content\n              *ngFor=\"let recordDetail of recordDetails\"\n            >\n              <sky-description-list-term>\n                {{ recordDetail.detail }}\n              </sky-description-list-term>\n              <sky-description-list-description>\n                {{ recordDetail.info }}\n              </sky-description-list-description>\n            </sky-description-list-content>\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Payments</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < actualPayments.length - 1\n                }\"\n                *ngFor=\"let actual of actualPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ actual.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n              </sky-key-info>\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                }\"\n                *ngFor=\"let projected of projectedPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ projected.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>\n                  {{ projected.category }}\n                </sky-key-info-label>\n              </sky-key-info>\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box>\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Recent activity</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <sky-repeater>\n            <sky-repeater-item *ngFor=\"let activity of recentActivity\">\n              <sky-repeater-item-content>\n                <div class=\"sky-margin-stacked-xs\">\n                  {{ activity.activity }}\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n              </sky-repeater-item-content>\n            </sky-repeater-item>\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n"
+    },
+    {
+      "fileName": "record-page-content.component.scss",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-content.component.scss",
+      "rawContents": ".box-2-content {\n  display: flex;\n\n  div {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n\n  .box-2-actuals {\n    margin-right: 60px;\n  }\n}\n"
+    },
+    {
+      "fileName": "record-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-content.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-content',\n  templateUrl: './record-page-content.component.html',\n  styleUrls: ['./record-page-content.component.scss'],\n})\nexport class RecordPageContentComponent {\n  public recordDetails = [\n    {\n      detail: 'Designation',\n      info: 'General operating',\n    },\n    {\n      detail: 'Source',\n      info: 'Online donation form',\n    },\n    {\n      detail: 'Status',\n      info: 'Active',\n    },\n    {\n      detail: 'Due date',\n      info: '12/12/2023',\n    },\n    {\n      detail: 'Create date',\n      info: '01/05/2023',\n    },\n    {\n      detail: 'Frequency',\n      info: 'Quarterly',\n    },\n  ];\n\n  public actualPayments = [\n    {\n      category: 'Amount',\n      value: '$845.00',\n    },\n    {\n      category: 'Assigned',\n      value: '$800.00',\n    },\n    {\n      category: 'Applied',\n      value: '$800.00',\n    },\n    {\n      category: 'Payments',\n      value: 25,\n    },\n  ];\n\n  public projectedPayments = [\n    {\n      category: 'Amount',\n      value: '$0',\n    },\n    {\n      category: 'Line items',\n      value: 0,\n    },\n  ];\n\n  public recentActivity = [\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '07/01/2023 12:02 am',\n    },\n    {\n      activity: '$150.00 payment processed successfully.',\n      date: '06/15/2023 12:02 am',\n    },\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '04/01/2023 12:02 am',\n    },\n  ];\n}\n"
+    },
+    {
+      "fileName": "attachments-grid-context-menu.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/attachments-grid-context-menu.component.html",
+      "rawContents": "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + attachmentName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + attachmentName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + attachmentName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+    },
+    {
+      "fileName": "attachments-grid-context-menu.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/attachments-grid-context-menu.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-attachments-grid-context-menu',\n  templateUrl: './attachments-grid-context-menu.component.html',\n})\nexport class AttachmentsGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  public attachmentName = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.attachmentName = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n}\n"
+    },
+    {
+      "fileName": "record-page-attachments-tab.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-attachments-tab.component.html",
+      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-primary-item>\n      <button class=\"sky-btn sky-btn-default\" aria-label=\"New attachment\">\n        <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n        New\n      </button>\n    </sky-data-manager-toolbar-primary-item>\n  </sky-data-manager-toolbar>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Attachments </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
+    },
+    {
+      "fileName": "record-page-attachments-tab.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-attachments-tab.component.ts",
+      "rawContents": "import { Component, OnInit, inject } from '@angular/core';\nimport { SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { ColDef, GridOptions, ICellRendererParams } from 'ag-grid-community';\n\nimport { AttachmentsGridContextMenuComponent } from './attachments-grid-context-menu.component';\n\n@Component({\n  selector: 'app-record-page-attachments-tab',\n  templateUrl: './record-page-attachments-tab.component.html',\n  providers: [SkyDataManagerService],\n})\nexport class RecordPageAttachmentsTabComponent implements OnInit {\n  public items = [\n    {\n      name: 'Agreement.pdf',\n      description: 'Cardholder agreement',\n      size: '10 KB',\n      dateAdded: '01/28/2023',\n    },\n    {\n      name: 'Appendix.pdf',\n      description: 'Updated terms 2023',\n      size: '25 KB',\n      dateAdded: '05/05/2023',\n    },\n  ];\n  public gridOptions: GridOptions;\n\n  #dataManagerService = inject(SkyDataManagerService);\n  #agGridSvc = inject(SkyAgGridService);\n\n  #columnDefs: ColDef[] = [\n    {\n      colId: 'contextMenu',\n      headerName: '',\n      sortable: false,\n      cellRenderer: AttachmentsGridContextMenuComponent,\n      maxWidth: 55,\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Name',\n      width: 150,\n      cellRenderer: (params: ICellRendererParams): string => {\n        return `<a href=\"/\">${params.value}</a>`;\n      },\n    },\n    {\n      colId: 'description',\n      field: 'description',\n      headerName: 'Description',\n    },\n    {\n      colId: 'size',\n      field: 'size',\n      headerName: 'Size',\n    },\n    {\n      colId: 'dateAdded',\n      field: 'dateAdded',\n      headerName: 'Date Added',\n    },\n  ];\n\n  #viewConfig: SkyDataViewConfig = {\n    id: 'gridView',\n    name: 'Grid View',\n    searchEnabled: true,\n  };\n\n  constructor() {\n    this.gridOptions = this.#agGridSvc.getGridOptions({\n      gridOptions: {\n        columnDefs: this.#columnDefs,\n        onGridReady: (args) => {\n          args.api.sizeColumnsToFit();\n        },\n      },\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#dataManagerService.initDataManager({\n      activeViewId: 'gridView',\n      dataManagerConfig: {},\n      defaultDataState: new SkyDataManagerState({\n        views: [\n          {\n            viewId: 'gridView',\n            displayedColumnIds: [\n              'contextMenu',\n              'name',\n              'description',\n              'size',\n              'dateAdded',\n            ],\n          },\n        ],\n      }),\n    });\n\n    this.#dataManagerService.initDataView(this.#viewConfig);\n  }\n}\n"
+    },
+    {
+      "fileName": "record-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-content.component.html",
+      "rawContents": "<sky-tabset [(active)]=\"activeTabIndex\">\n  <sky-tab tabHeading=\"Overview\" layout=\"blocks\">\n    <app-record-page-overview-tab></app-record-page-overview-tab>\n  </sky-tab>\n  <sky-tab tabHeading=\"Notes\" layout=\"list\">\n    <app-record-page-notes-tab></app-record-page-notes-tab>\n  </sky-tab>\n  <sky-tab tabHeading=\"Attachments\" layout=\"list\">\n    <app-record-page-attachments-tab\n      *ngIf=\"activeTabIndex === 2\"\n    ></app-record-page-attachments-tab>\n  </sky-tab>\n</sky-tabset>\n"
+    },
+    {
+      "fileName": "record-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-content.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-record-page-content',\n  templateUrl: './record-page-content.component.html',\n})\nexport class RecordPageContentComponent {\n  public activeTabIndex: SkyTabIndex = 0;\n}\n"
+    },
+    {
+      "fileName": "record-page-notes-tab.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-notes-tab.component.html",
+      "rawContents": "<sky-toolbar>\n  <sky-toolbar-item>\n    <button class=\"sky-btn sky-btn-default\" type=\"button\" aria-label=\"New note\">\n      <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n      New\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-sort [showButtonText]=\"true\">\n      <sky-sort-item>\n        <span aria-label=\"Sort notes by date created (newest first)\">\n          Date created (newest first)\n        </span>\n      </sky-sort-item>\n      <sky-sort-item>\n        <span aria-label=\"Sort notes by date created (oldest first)\">\n          Date created (oldest first)\n        </span>\n      </sky-sort-item>\n    </sky-sort>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      aria-label=\"Export notes\"\n    >\n      <sky-icon iconType=\"skyux\" icon=\"xls-file\"></sky-icon>\n      Export\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search placeholderText=\"Find in notes\"> </sky-search>\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-key-info layout=\"horizontal\">\n  <sky-key-info-value class=\"sky-font-display-4\">\n    {{ notes.length }}\n  </sky-key-info-value>\n  <sky-key-info-label> Notes </sky-key-info-label>\n</sky-key-info>\n<sky-repeater>\n  <sky-repeater-item *ngFor=\"let note of notes\">\n    <sky-repeater-item-context-menu>\n      <sky-dropdown\n        buttonType=\"context-menu\"\n        [label]=\"\n          'Context menu for note ' + note.noteNumber + ' from ' + note.date\n        \"\n      >\n        <sky-dropdown-menu>\n          <sky-dropdown-item>\n            <button\n              type=\"button\"\n              [attr.aria-label]=\"\n                'Edit note ' + note.noteNumber + ' from ' + note.date\n              \"\n            >\n              Edit\n            </button>\n          </sky-dropdown-item>\n          <sky-dropdown-item>\n            <button\n              type=\"button\"\n              [attr.aria-label]=\"\n                'Delete note ' + note.noteNumber + ' from ' + note.date\n              \"\n            >\n              Delete\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </sky-repeater-item-context-menu>\n    <sky-repeater-item-content>\n      <div class=\"sky-margin-stacked-xs\">\n        {{ note.content }}\n      </div>\n      <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n    </sky-repeater-item-content>\n  </sky-repeater-item>\n</sky-repeater>\n"
+    },
+    {
+      "fileName": "record-page-notes-tab.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-notes-tab.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-notes-tab',\n  templateUrl: './record-page-notes-tab.component.html',\n})\nexport class RecordPageNotesTabComponent {\n  public notes = [\n    {\n      noteNumber: 1,\n      content: 'Attended our gala last year and had a great time.',\n      date: '11/17/2024',\n    },\n    {\n      noteNumber: 2,\n      content:\n        'Is a business owner and has a lot of connections in the community.',\n      date: '10/11/2024',\n    },\n  ];\n}\n"
+    },
+    {
+      "fileName": "record-page-overview-tab.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-overview-tab.component.html",
+      "rawContents": "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Details</h2>\n        </sky-box-header>\n        <sky-box-controls>\n          <button\n            class=\"sky-btn sky-btn-icon-borderless\"\n            aria-label=\"Edit button for details\"\n          >\n            <sky-icon icon=\"edit\" iconType=\"skyux\"></sky-icon>\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            <sky-description-list-content\n              *ngFor=\"let recordDetail of recordDetails\"\n            >\n              <sky-description-list-term>\n                {{ recordDetail.detail }}\n              </sky-description-list-term>\n              <sky-description-list-description>\n                {{ recordDetail.info }}\n              </sky-description-list-description>\n            </sky-description-list-content>\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Payments</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < actualPayments.length - 1\n                }\"\n                *ngFor=\"let actual of actualPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ actual.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n              </sky-key-info>\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                }\"\n                *ngFor=\"let projected of projectedPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ projected.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>\n                  {{ projected.category }}\n                </sky-key-info-label>\n              </sky-key-info>\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box>\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Recent activity</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <sky-repeater>\n            <sky-repeater-item *ngFor=\"let activity of recentActivity\">\n              <sky-repeater-item-content>\n                <div class=\"sky-margin-stacked-xs\">\n                  {{ activity.activity }}\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n              </sky-repeater-item-content>\n            </sky-repeater-item>\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n"
+    },
+    {
+      "fileName": "record-page-overview-tab.component.scss",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-overview-tab.component.scss",
+      "rawContents": ".box-2-content {\n  display: flex;\n\n  div {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n\n  .box-2-actuals {\n    margin-right: 60px;\n  }\n}\n"
+    },
+    {
+      "fileName": "record-page-overview-tab.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-overview-tab.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-overview-tab',\n  templateUrl: './record-page-overview-tab.component.html',\n  styleUrls: ['./record-page-overview-tab.component.scss'],\n})\nexport class RecordPageOverviewTabComponent {\n  public recordDetails = [\n    {\n      detail: 'Designation',\n      info: 'General operating',\n    },\n    {\n      detail: 'Source',\n      info: 'Online donation form',\n    },\n    {\n      detail: 'Status',\n      info: 'Active',\n    },\n    {\n      detail: 'Due date',\n      info: '12/12/2023',\n    },\n    {\n      detail: 'Create date',\n      info: '01/05/2023',\n    },\n    {\n      detail: 'Frequency',\n      info: 'Quarterly',\n    },\n  ];\n\n  public actualPayments = [\n    {\n      category: 'Amount',\n      value: '$845.00',\n    },\n    {\n      category: 'Assigned',\n      value: '$800.00',\n    },\n    {\n      category: 'Applied',\n      value: '$800.00',\n    },\n    {\n      category: 'Payments',\n      value: 25,\n    },\n  ];\n\n  public projectedPayments = [\n    {\n      category: 'Amount',\n      value: '$0',\n    },\n    {\n      category: 'Line items',\n      value: 0,\n    },\n  ];\n\n  public recentActivity = [\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '07/01/2023 12:02 am',\n    },\n    {\n      activity: '$150.00 payment processed successfully.',\n      date: '06/15/2023 12:02 am',\n    },\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '04/01/2023 12:02 am',\n    },\n  ];\n}\n"
+    },
+    {
+      "fileName": "record-page-tabs-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"tabs\">\n  <sky-page-header\n    pageTitle=\"Charlene Conners\"\n    [parentLink]=\"{\n      label: 'Contacts',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  />\n  <sky-page-content>\n    <app-record-page-content></app-record-page-content>\n  </sky-page-content>\n</sky-page>\n"
+    },
+    {
+      "fileName": "record-page-tabs-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { RecordPageTabsLayoutDemoComponent } from './record-page-tabs-layout-demo.component';\nimport { RecordPageTabsLayoutDemoModule } from './record-page-tabs-layout-demo.module';\n\nfdescribe('Record page tabs layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<RecordPageTabsLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(RecordPageTabsLayoutDemoComponent);\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        NoopAnimationsModule,\n        RecordPageTabsLayoutDemoModule,\n        RouterTestingModule,\n      ],\n    });\n  });\n\n  it('should have a tabs layout', async () => {\n    const { pageHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('tabs');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      'Charlene Conners'\n    );\n\n    await expectAsync(pageHeaderHarness.getParentLinkText()).toBeResolvedTo(\n      'Contacts'\n    );\n  });\n});\n"
+    },
+    {
+      "fileName": "record-page-tabs-layout-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-tabs-layout-demo',\n  templateUrl: './record-page-tabs-layout-demo.component.html',\n})\nexport class RecordPageTabsLayoutDemoComponent {}\n"
+    },
+    {
+      "fileName": "record-page-tabs-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport {\n  SkyBoxModule,\n  SkyDescriptionListModule,\n  SkyFluidGridModule,\n  SkyToolbarModule,\n} from '@skyux/layout';\nimport { SkyRepeaterModule, SkySortModule } from '@skyux/lists';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkyDropdownModule } from '@skyux/popovers';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { AttachmentsGridContextMenuComponent } from './attachments-grid-context-menu.component';\nimport { RecordPageAttachmentsTabComponent } from './record-page-attachments-tab.component';\nimport { RecordPageContentComponent } from './record-page-content.component';\nimport { RecordPageNotesTabComponent } from './record-page-notes-tab.component';\nimport { RecordPageOverviewTabComponent } from './record-page-overview-tab.component';\nimport { RecordPageTabsLayoutDemoComponent } from './record-page-tabs-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    AttachmentsGridContextMenuComponent,\n    RecordPageAttachmentsTabComponent,\n    RecordPageContentComponent,\n    RecordPageNotesTabComponent,\n    RecordPageOverviewTabComponent,\n    RecordPageTabsLayoutDemoComponent,\n  ],\n  exports: [RecordPageTabsLayoutDemoComponent],\n  imports: [\n    AgGridModule,\n    CommonModule,\n    SkyAgGridModule,\n    SkyBoxModule,\n    SkyDataManagerModule,\n    SkyDescriptionListModule,\n    SkyDropdownModule,\n    SkyFluidGridModule,\n    SkyIconModule,\n    SkyKeyInfoModule,\n    SkyPageModule,\n    SkyRepeaterModule,\n    SkySearchModule,\n    SkySortModule,\n    SkyTabsModule,\n    SkyToolbarModule,\n  ],\n})\nexport class RecordPageTabsLayoutDemoModule {}\n"
+    },
+    {
+      "fileName": "split-view-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-content.component.html",
+      "rawContents": "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      <sky-repeater-item\n        *ngFor=\"let item of items; let i = index\"\n        (click)=\"onItemClick(i)\"\n        (keyup.enter)=\"onItemClick(i)\"\n      >\n        <sky-repeater-item-content>\n          {{ item.amount }} <br />\n          {{ item.date }} <br />\n          {{ item.vendor }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    </sky-repeater>\n  </sky-split-view-drawer>\n\n  <sky-split-view-workspace ariaLabel=\"Transaction form\">\n    <sky-split-view-workspace-content class=\"sky-padding-even-large\">\n      <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n        <sky-description-list class=\"sky-margin-stacked-xl\">\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt amount\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.amount }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Date </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.date }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Vendor </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.vendor }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt image\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.receiptImage }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n        </sky-description-list>\n        <div class=\"sky-form-group\">\n          <sky-input-box>\n            <label class=\"sky-control-label\" [for]=\"amountInput.id\">\n              Approved amount\n            </label>\n            <input\n              class=\"sky-form-control\"\n              formControlName=\"approvedAmount\"\n              name=\"approvedAmount\"\n              type=\"text\"\n              skyId\n              #amountInput\n            />\n          </sky-input-box>\n        </div>\n\n        <div class=\"sky-form-group\">\n          <sky-input-box>\n            <label class=\"sky-control-label\" [for]=\"commentsInput.id\">\n              Comments\n            </label>\n            <textarea\n              class=\"sky-form-control\"\n              formControlName=\"comments\"\n              name=\"comments\"\n              skyId\n              #commentsInput\n            ></textarea>\n          </sky-input-box>\n        </div>\n      </form>\n    </sky-split-view-workspace-content>\n    <sky-split-view-workspace-footer>\n      <sky-summary-action-bar id=\"summary-action-bar\">\n        <sky-summary-action-bar-actions>\n          <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n              Deny expense\n            </sky-summary-action-bar-secondary-action>\n          </sky-summary-action-bar-secondary-actions>\n        </sky-summary-action-bar-actions>\n      </sky-summary-action-bar>\n    </sky-split-view-workspace-footer>\n  </sky-split-view-workspace>\n</sky-split-view>\n"
+    },
+    {
+      "fileName": "split-view-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-content.component.ts",
+      "rawContents": "import { Component, inject } from '@angular/core';\nimport { FormBuilder } from '@angular/forms';\nimport { SkyConfirmService, SkyConfirmType } from '@skyux/modals';\nimport {\n  SkySplitViewMessage,\n  SkySplitViewMessageType,\n} from '@skyux/split-view';\n\nimport { Subject } from 'rxjs';\n\ninterface WorkspaceItem {\n  id: number;\n  amount: number;\n  date: string;\n  vendor: string;\n  receiptImage: string;\n  approvedAmount: number;\n  comments: string;\n}\n\n@Component({\n  selector: 'app-split-view-page-content',\n  templateUrl: './split-view-page-content.component.html',\n})\nexport class SplitViewPageContentComponent {\n  protected set activeIndex(value: number) {\n    this.#_activeIndex = value;\n    this.activeRecord = this.items[this.#_activeIndex];\n    this.#loadFormGroup(this.activeRecord);\n  }\n\n  protected get activeIndex(): number {\n    return this.#_activeIndex;\n  }\n\n  protected items: WorkspaceItem[] = [\n    {\n      id: 1,\n      amount: 73.19,\n      date: '5/13/2020',\n      vendor: 'amazon.com',\n      receiptImage: 'amzn-office-supply-order-5-13-19.png',\n      approvedAmount: 73.19,\n      comments: '',\n    },\n    {\n      id: 2,\n      amount: 214.12,\n      date: '5/14/2020',\n      vendor: 'Office Max',\n      receiptImage: 'office-max-order.png',\n      approvedAmount: 214.12,\n      comments: '',\n    },\n    {\n      id: 3,\n      amount: 29.99,\n      date: '5/14/2020',\n      vendor: 'amazon.com',\n      receiptImage: 'amzn-office-supply-order-5-14-19.png',\n      approvedAmount: 29.99,\n      comments: '',\n    },\n    {\n      id: 4,\n      amount: 1500,\n      date: '5/15/2020',\n      vendor: 'Fresh Catering, LLC',\n      receiptImage: 'fresh-catering-llc-order.png',\n      approvedAmount: 1500,\n      comments: '',\n    },\n    {\n      id: 5,\n      amount: 456.24,\n      date: '5/16/2020',\n      vendor: 'Wish',\n      receiptImage: 'wish-delivery-order.png',\n      approvedAmount: 456.24,\n      comments: '',\n    },\n    {\n      id: 6,\n      amount: 62.37,\n      date: '5/16/2020',\n      vendor: 'Staples',\n      receiptImage: 'staples-paper-bulk-order.png',\n      approvedAmount: 62.37,\n      comments: '',\n    },\n    {\n      id: 7,\n      amount: 51.84,\n      date: '5/17/2020',\n      vendor: 'amazon.com',\n      receiptImage: 'amzn-office-supply-order-5-17-19.png',\n      approvedAmount: 51.84,\n      comments: '',\n    },\n    {\n      id: 8,\n      amount: 92.55,\n      date: '5/18/2020',\n      vendor: 'Home Depot',\n      receiptImage: 'home-depot-order.png',\n      approvedAmount: 0.0,\n      comments: '',\n    },\n    {\n      id: 9,\n      amount: 38.29,\n      date: '5/18/2020',\n      vendor: 'Papa Johns',\n      receiptImage: 'papa-johns-order.png',\n      approvedAmount: 38.29,\n      comments: '',\n    },\n  ];\n\n  protected activeRecord = this.items[0];\n  protected listWidth: number | undefined;\n  protected splitViewStream = new Subject<SkySplitViewMessage>();\n\n  protected splitViewDemoForm = inject(FormBuilder).group({\n    approvedAmount: [this.activeRecord.approvedAmount],\n    comments: [this.activeRecord.comments],\n  });\n\n  #_activeIndex = 0;\n\n  #confirmSvc = inject(SkyConfirmService);\n\n  protected onItemClick(index: number): void {\n    // Prevent workspace from loading new data if the current workspace form is dirty.\n    if (this.splitViewDemoForm.dirty && index !== this.activeIndex) {\n      this.#openConfirmModal(index);\n    } else {\n      this.#loadWorkspace(index);\n    }\n  }\n\n  protected onApprove(): void {\n    console.log('Approved clicked!');\n    this.#saveForm();\n  }\n\n  protected onDeny(): void {\n    console.log('Denied clicked!');\n  }\n\n  #loadFormGroup(record: WorkspaceItem): void {\n    this.splitViewDemoForm.setValue({\n      approvedAmount: record.approvedAmount,\n      comments: record.comments,\n    });\n  }\n\n  #loadWorkspace(index: number): void {\n    this.activeIndex = index;\n    this.#setFocusInWorkspace();\n  }\n\n  #openConfirmModal(index: number): void {\n    this.#confirmSvc\n      .open({\n        message:\n          'You have unsaved work. Would you like to save it before you change records?',\n        type: SkyConfirmType.Custom,\n        buttons: [\n          {\n            action: 'yes',\n            text: 'Yes',\n            styleType: 'primary',\n          },\n          {\n            action: 'discard',\n            text: 'Discard changes',\n            styleType: 'link',\n          },\n        ],\n      })\n      .closed.subscribe((closeArgs) => {\n        if (closeArgs.action === 'yes') {\n          this.#saveForm();\n        }\n\n        this.#loadWorkspace(index);\n      });\n  }\n\n  #saveForm(): void {\n    this.activeRecord = Object.assign(\n      this.activeRecord,\n      this.splitViewDemoForm.value\n    );\n\n    this.splitViewDemoForm.markAsPristine();\n  }\n\n  #setFocusInWorkspace(): void {\n    this.splitViewStream.next({\n      type: SkySplitViewMessageType.FocusWorkspace,\n    });\n  }\n}\n"
+    },
+    {
+      "fileName": "split-view-page-fit-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"fit\">\n  <sky-page-header\n    pageTitle=\"Expenses to approve\"\n    [parentLink]=\"{\n      label: 'Expenses',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  />\n  <sky-page-content>\n    <app-split-view-page-content></app-split-view-page-content>\n  </sky-page-content>\n</sky-page>\n"
+    },
+    {
+      "fileName": "split-view-page-fit-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { SplitViewPageFitLayoutDemoComponent } from './split-view-page-fit-layout-demo.component';\nimport { SplitViewPageFitLayoutDemoModule } from './split-view-page-fit-layout-demo.module';\n\nfdescribe('Split view page fit layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<SplitViewPageFitLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(\n      SplitViewPageFitLayoutDemoComponent\n    );\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        NoopAnimationsModule,\n        RouterTestingModule,\n        SplitViewPageFitLayoutDemoModule,\n      ],\n    });\n  });\n\n  it('should have a fit layout', async () => {\n    const { pageHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('fit');\n  });\n});\n"
+    },
+    {
+      "fileName": "split-view-page-fit-layout-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-split-view-page-fit-layout-demo',\n  templateUrl: './split-view-page-fit-layout-demo.component.html',\n})\nexport class SplitViewPageFitLayoutDemoComponent {}\n"
+    },
+    {
+      "fileName": "split-view-page-fit-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkySummaryActionBarModule } from '@skyux/action-bars';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyDescriptionListModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkySplitViewModule } from '@skyux/split-view';\n\nimport { SplitViewPageContentComponent } from './split-view-page-content.component';\nimport { SplitViewPageFitLayoutDemoComponent } from './split-view-page-fit-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    SplitViewPageFitLayoutDemoComponent,\n    SplitViewPageContentComponent,\n  ],\n  exports: [SplitViewPageFitLayoutDemoComponent],\n  imports: [\n    SkyPageModule,\n    CommonModule,\n    ReactiveFormsModule,\n    SkyDescriptionListModule,\n    SkyInputBoxModule,\n    SkyRepeaterModule,\n    SkySplitViewModule,\n    SkySummaryActionBarModule,\n  ],\n})\nexport class SplitViewPageFitLayoutDemoModule {}\n"
     }
   ]
 }