@skyux/pages 8.4.0 → 8.6.0

package/documentation.json

@@ -4,12 +4,16 @@
     "SkyPageHeaderModule": "class-skypageheadermodule",
     "SkyPageModule": "class-skypagemodule",
     "SkyActionHubComponent": "class-skyactionhubcomponent",
+    "SkyPageHeaderAvatarComponent": "class-skypageheaderavatarcomponent",
+    "SkyPageHeaderAlertsComponent": "class-skypageheaderalertscomponent",
     "SkyActionHubButtonsComponent": "class-skyactionhubbuttonscomponent",
     "SkyActionHubContentComponent": "class-skyactionhubcontentcomponent",
     "SkyPageHeaderComponent": "class-skypageheadercomponent",
     "SkyModalLinkListComponent": "class-skymodallinklistcomponent",
     "SkyPageComponent": "class-skypagecomponent",
     "SkyPageContentComponent": "class-skypagecontentcomponent",
+    "SkyPageHeaderDetailsComponent": "class-skypageheaderdetailscomponent",
+    "SkyPageHeaderActionsComponent": "class-skypageheaderactionscomponent",
     "SkyActionHubNeedsAttention": "interface-skyactionhubneedsattention",
     "SkyPageLink": "interface-skypagelink",
     "SkyPageModalLink": "interface-skypagemodallink",
@@ -31,7 +35,7 @@
     "originalName": "",
     "children": [
       {
-        "id": 64,
+        "id": 81,
         "name": "SkyActionHubModule",
         "kind": 128,
         "kindString": "Class",
@@ -56,7 +60,7 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              65
+              82
             ]
           }
         ],
@@ -69,7 +73,7 @@
         ]
       },
       {
-        "id": 124,
+        "id": 141,
         "name": "SkyPageHeaderModule",
         "kind": 128,
         "kindString": "Class",
@@ -84,7 +88,7 @@
               "name": "NgModule"
             },
             "arguments": {
-              "obj": "{\n  imports: [\n    CommonModule,\n    RouterModule,\n    SkyAppLinkModule,\n    SkyIconModule,\n    SkyThemeModule,\n    SkyHrefModule,\n  ],\n  declarations: [SkyPageHeaderComponent],\n  exports: [SkyPageHeaderComponent],\n}"
+              "obj": "{\n  imports: [\n    CommonModule,\n    RouterModule,\n    SkyAppLinkModule,\n    SkyIconModule,\n    SkyThemeModule,\n    SkyHrefModule,\n  ],\n  declarations: [\n    SkyPageHeaderActionsComponent,\n    SkyPageHeaderAlertsComponent,\n    SkyPageHeaderAvatarComponent,\n    SkyPageHeaderComponent,\n    SkyPageHeaderDetailsComponent,\n  ],\n  exports: [\n    SkyPageHeaderActionsComponent,\n    SkyPageHeaderAlertsComponent,\n    SkyPageHeaderAvatarComponent,\n    SkyPageHeaderComponent,\n    SkyPageHeaderDetailsComponent,\n  ],\n}"
             }
           }
         ],
@@ -94,20 +98,20 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              125
+              142
             ]
           }
         ],
         "sources": [
           {
             "fileName": "projects/pages/src/modules/page-header/page-header.module.ts",
-            "line": 22,
+            "line": 38,
             "character": 13
           }
         ]
       },
       {
-        "id": 120,
+        "id": 137,
         "name": "SkyPageModule",
         "kind": 128,
         "kindString": "Class",
@@ -132,7 +136,7 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              121
+              138
             ]
           }
         ],
@@ -187,7 +191,7 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 67,
+                "id": 84,
                 "name": "SkyActionHubNeedsAttention"
               }
             },
@@ -225,7 +229,7 @@
             ],
             "type": {
               "type": "reference",
-              "id": 85,
+              "id": 102,
               "name": "SkyPageLink"
             }
           },
@@ -261,7 +265,7 @@
             ],
             "type": {
               "type": "reference",
-              "id": 119,
+              "id": 136,
               "name": "SkyRecentLinksInput"
             },
             "defaultValue": "[]"
@@ -298,7 +302,7 @@
             ],
             "type": {
               "type": "reference",
-              "id": 94,
+              "id": 111,
               "name": "SkyPageLinksInput"
             },
             "defaultValue": "[]"
@@ -335,7 +339,7 @@
             ],
             "type": {
               "type": "reference",
-              "id": 108,
+              "id": 125,
               "name": "SkyPageModalLinksInput"
             },
             "defaultValue": "[]"
@@ -492,6 +496,169 @@
           }
         ]
       },
+      {
+        "id": 70,
+        "name": "SkyPageHeaderAvatarComponent",
+        "kind": 128,
+        "kindString": "Class",
+        "flags": {},
+        "comment": {
+          "shortText": "Displays an avatar within the page header to the left of the page title.\nIf no size is specified for the avatar component it will display at size\nsmall on xs breakpoints and size large on small and above breakpoints."
+        },
+        "decorators": [
+          {
+            "name": "Component",
+            "type": {
+              "type": "reference",
+              "qualifiedName": "ComponentDecorator",
+              "package": "@angular/core",
+              "name": "Component"
+            },
+            "arguments": {
+              "obj": "{\n  selector: 'sky-page-header-avatar',\n  templateUrl: './page-header-avatar.component.html',\n  styleUrls: ['./page-header-avatar.component.scss'],\n  providers: [SkyDefaultInputProvider],\n}"
+            }
+          }
+        ],
+        "children": [
+          {
+            "id": 71,
+            "name": "constructor",
+            "kind": 512,
+            "kindString": "Constructor",
+            "flags": {},
+            "sources": [
+              {
+                "fileName": "projects/pages/src/modules/page-header/page-header-avatar.component.ts",
+                "line": 26,
+                "character": 2
+              }
+            ],
+            "signatures": [
+              {
+                "id": 72,
+                "name": "SkyPageHeaderAvatarComponent",
+                "kind": 16384,
+                "kindString": "Constructor signature",
+                "flags": {},
+                "type": {
+                  "type": "reference",
+                  "id": 70,
+                  "name": "SkyPageHeaderAvatarComponent"
+                }
+              }
+            ]
+          },
+          {
+            "id": 76,
+            "name": "ngOnDestroy",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/pages/src/modules/page-header/page-header-avatar.component.ts",
+                "line": 38,
+                "character": 9
+              }
+            ],
+            "signatures": [
+              {
+                "id": 77,
+                "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"
+            }
+          }
+        ],
+        "groups": [
+          {
+            "title": "Constructors",
+            "kind": 512,
+            "children": [
+              71
+            ]
+          },
+          {
+            "title": "Methods",
+            "kind": 2048,
+            "children": [
+              76
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/pages/src/modules/page-header/page-header-avatar.component.ts",
+            "line": 21,
+            "character": 13
+          }
+        ],
+        "implementedTypes": [
+          {
+            "type": "reference",
+            "qualifiedName": "OnDestroy",
+            "package": "@angular/core",
+            "name": "OnDestroy"
+          }
+        ]
+      },
+      {
+        "id": 78,
+        "name": "SkyPageHeaderAlertsComponent",
+        "kind": 128,
+        "kindString": "Class",
+        "flags": {},
+        "comment": {
+          "shortText": "Displays alerts within the page header. Appears above the page title."
+        },
+        "decorators": [
+          {
+            "name": "Component",
+            "type": {
+              "type": "reference",
+              "qualifiedName": "ComponentDecorator",
+              "package": "@angular/core",
+              "name": "Component"
+            },
+            "arguments": {
+              "obj": "{\n  selector: 'sky-page-header-alerts',\n  templateUrl: './page-header-alerts.component.html',\n  styleUrls: ['./page-header-alerts.component.scss'],\n}"
+            }
+          }
+        ],
+        "children": [],
+        "groups": [
+          {
+            "title": "Constructors",
+            "kind": 512,
+            "children": [
+              79
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/pages/src/modules/page-header/page-header-alerts.component.ts",
+            "line": 11,
+            "character": 13
+          }
+        ]
+      },
       {
         "id": 17,
         "name": "SkyActionHubButtonsComponent",
@@ -667,7 +834,7 @@
             ],
             "type": {
               "type": "reference",
-              "id": 85,
+              "id": 102,
               "name": "SkyPageLink"
             }
           }
@@ -778,7 +945,7 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 95,
+                "id": 112,
                 "name": "SkyPageModalLink"
               }
             },
@@ -852,7 +1019,7 @@
                 "flags": {},
                 "type": {
                   "type": "reference",
-                  "id": 108,
+                  "id": 125,
                   "name": "SkyPageModalLinksInput"
                 }
               }
@@ -873,7 +1040,7 @@
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 108,
+                      "id": 125,
                       "name": "SkyPageModalLinksInput"
                     }
                   }
@@ -916,7 +1083,7 @@
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 95,
+                      "id": 112,
                       "name": "SkyPageModalLink"
                     }
                   }
@@ -1062,11 +1229,11 @@
                 "kindString": "Set signature",
                 "flags": {},
                 "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.",
+                  "shortText": "The page layout that applies spacing to the page header and content. Use the layout\nthat corresponds with the top-level component type used on the page, our use `fit` to\nconstrain the page contents to the available viewport.\nUse `none` for custom content that does not adhere to predefined spacing or constraints.",
                   "tags": [
                     {
                       "tag": "default",
-                      "text": "\"auto\"\n"
+                      "text": "\"none\"\n"
                     }
                   ]
                 },
@@ -1079,7 +1246,7 @@
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 123,
+                      "id": 140,
                       "name": "SkyPageLayoutType"
                     }
                   }
@@ -1260,8 +1427,90 @@
           }
         ]
       },
+      {
+        "id": 64,
+        "name": "SkyPageHeaderDetailsComponent",
+        "kind": 128,
+        "kindString": "Class",
+        "flags": {},
+        "comment": {
+          "shortText": "Displays additional information in the page header, like record details.\nAppears below the title and above the page actions."
+        },
+        "decorators": [
+          {
+            "name": "Component",
+            "type": {
+              "type": "reference",
+              "qualifiedName": "ComponentDecorator",
+              "package": "@angular/core",
+              "name": "Component"
+            },
+            "arguments": {
+              "obj": "{\n  selector: 'sky-page-header-details',\n  templateUrl: './page-header-details.component.html',\n  styleUrls: ['./page-header-details.component.scss'],\n}"
+            }
+          }
+        ],
+        "children": [],
+        "groups": [
+          {
+            "title": "Constructors",
+            "kind": 512,
+            "children": [
+              65
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/pages/src/modules/page-header/page-header-details.component.ts",
+            "line": 12,
+            "character": 13
+          }
+        ]
+      },
       {
         "id": 67,
+        "name": "SkyPageHeaderActionsComponent",
+        "kind": 128,
+        "kindString": "Class",
+        "flags": {},
+        "comment": {
+          "shortText": "Displays buttons within the page header for page actions.\nAppears below the page header details."
+        },
+        "decorators": [
+          {
+            "name": "Component",
+            "type": {
+              "type": "reference",
+              "qualifiedName": "ComponentDecorator",
+              "package": "@angular/core",
+              "name": "Component"
+            },
+            "arguments": {
+              "obj": "{\n  selector: 'sky-page-header-actions',\n  templateUrl: './page-header-actions.component.html',\n  styleUrls: ['./page-header-actions.component.scss'],\n}"
+            }
+          }
+        ],
+        "children": [],
+        "groups": [
+          {
+            "title": "Constructors",
+            "kind": 512,
+            "children": [
+              68
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/pages/src/modules/page-header/page-header-actions.component.ts",
+            "line": 12,
+            "character": 13
+          }
+        ]
+      },
+      {
+        "id": 84,
         "name": "SkyActionHubNeedsAttention",
         "kind": 256,
         "kindString": "Interface",
@@ -1271,7 +1520,7 @@
         },
         "children": [
           {
-            "id": 77,
+            "id": 94,
             "name": "click",
             "kind": 1024,
             "kindString": "Property",
@@ -1290,12 +1539,12 @@
             ],
             "type": {
               "type": "reference",
-              "id": 78,
+              "id": 95,
               "name": "SkyActionHubNeedsAttentionClickHandler"
             }
           },
           {
-            "id": 69,
+            "id": 86,
             "name": "message",
             "kind": 1024,
             "kindString": "Property",
@@ -1324,7 +1573,7 @@
             }
           },
           {
-            "id": 70,
+            "id": 87,
             "name": "permalink",
             "kind": 1024,
             "kindString": "Property",
@@ -1344,14 +1593,14 @@
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 71,
+                "id": 88,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 72,
+                    "id": 89,
                     "name": "route",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1368,14 +1617,14 @@
                     "type": {
                       "type": "reflection",
                       "declaration": {
-                        "id": 73,
+                        "id": 90,
                         "name": "__type",
                         "kind": 65536,
                         "kindString": "Type literal",
                         "flags": {},
                         "children": [
                           {
-                            "id": 74,
+                            "id": 91,
                             "name": "commands",
                             "kind": 1024,
                             "kindString": "Property",
@@ -1396,7 +1645,7 @@
                             }
                           },
                           {
-                            "id": 75,
+                            "id": 92,
                             "name": "extras",
                             "kind": 1024,
                             "kindString": "Property",
@@ -1423,8 +1672,8 @@
                             "title": "Properties",
                             "kind": 1024,
                             "children": [
-                              74,
-                              75
+                              91,
+                              92
                             ]
                           }
                         ]
@@ -1432,7 +1681,7 @@
                     }
                   },
                   {
-                    "id": 76,
+                    "id": 93,
                     "name": "url",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1457,8 +1706,8 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      72,
-                      76
+                      89,
+                      93
                     ]
                   }
                 ]
@@ -1466,7 +1715,7 @@
             }
           },
           {
-            "id": 68,
+            "id": 85,
             "name": "title",
             "kind": 1024,
             "kindString": "Property",
@@ -1492,10 +1741,10 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              77,
-              69,
-              70,
-              68
+              94,
+              86,
+              87,
+              85
             ]
           }
         ],
@@ -1508,7 +1757,7 @@
         ]
       },
       {
-        "id": 85,
+        "id": 102,
         "name": "SkyPageLink",
         "kind": 256,
         "kindString": "Interface",
@@ -1518,7 +1767,7 @@
         },
         "children": [
           {
-            "id": 93,
+            "id": 110,
             "name": "label",
             "kind": 1024,
             "kindString": "Property",
@@ -1543,7 +1792,7 @@
             }
           },
           {
-            "id": 86,
+            "id": 103,
             "name": "permalink",
             "kind": 1024,
             "kindString": "Property",
@@ -1561,14 +1810,14 @@
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 87,
+                "id": 104,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 88,
+                    "id": 105,
                     "name": "route",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1585,14 +1834,14 @@
                     "type": {
                       "type": "reflection",
                       "declaration": {
-                        "id": 89,
+                        "id": 106,
                         "name": "__type",
                         "kind": 65536,
                         "kindString": "Type literal",
                         "flags": {},
                         "children": [
                           {
-                            "id": 90,
+                            "id": 107,
                             "name": "commands",
                             "kind": 1024,
                             "kindString": "Property",
@@ -1613,7 +1862,7 @@
                             }
                           },
                           {
-                            "id": 91,
+                            "id": 108,
                             "name": "extras",
                             "kind": 1024,
                             "kindString": "Property",
@@ -1640,8 +1889,8 @@
                             "title": "Properties",
                             "kind": 1024,
                             "children": [
-                              90,
-                              91
+                              107,
+                              108
                             ]
                           }
                         ]
@@ -1649,7 +1898,7 @@
                     }
                   },
                   {
-                    "id": 92,
+                    "id": 109,
                     "name": "url",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1674,8 +1923,8 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      88,
-                      92
+                      105,
+                      109
                     ]
                   }
                 ]
@@ -1688,8 +1937,8 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              93,
-              86
+              110,
+              103
             ]
           }
         ],
@@ -1709,13 +1958,13 @@
         "extendedBy": [
           {
             "type": "reference",
-            "id": 109,
+            "id": 126,
             "name": "SkyRecentLink"
           }
         ]
       },
       {
-        "id": 95,
+        "id": 112,
         "name": "SkyPageModalLink",
         "kind": 256,
         "kindString": "Interface",
@@ -1725,7 +1974,7 @@
         },
         "children": [
           {
-            "id": 107,
+            "id": 124,
             "name": "label",
             "kind": 1024,
             "kindString": "Property",
@@ -1750,7 +1999,7 @@
             }
           },
           {
-            "id": 103,
+            "id": 120,
             "name": "modal",
             "kind": 1024,
             "kindString": "Property",
@@ -1770,14 +2019,14 @@
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 104,
+                "id": 121,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 105,
+                    "id": 122,
                     "name": "component",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1795,7 +2044,7 @@
                     }
                   },
                   {
-                    "id": 106,
+                    "id": 123,
                     "name": "config",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1820,8 +2069,8 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      105,
-                      106
+                      122,
+                      123
                     ]
                   }
                 ]
@@ -1829,7 +2078,7 @@
             }
           },
           {
-            "id": 96,
+            "id": 113,
             "name": "permalink",
             "kind": 1024,
             "kindString": "Property",
@@ -1849,14 +2098,14 @@
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 97,
+                "id": 114,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 98,
+                    "id": 115,
                     "name": "route",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1873,14 +2122,14 @@
                     "type": {
                       "type": "reflection",
                       "declaration": {
-                        "id": 99,
+                        "id": 116,
                         "name": "__type",
                         "kind": 65536,
                         "kindString": "Type literal",
                         "flags": {},
                         "children": [
                           {
-                            "id": 100,
+                            "id": 117,
                             "name": "commands",
                             "kind": 1024,
                             "kindString": "Property",
@@ -1901,7 +2150,7 @@
                             }
                           },
                           {
-                            "id": 101,
+                            "id": 118,
                             "name": "extras",
                             "kind": 1024,
                             "kindString": "Property",
@@ -1928,8 +2177,8 @@
                             "title": "Properties",
                             "kind": 1024,
                             "children": [
-                              100,
-                              101
+                              117,
+                              118
                             ]
                           }
                         ]
@@ -1937,7 +2186,7 @@
                     }
                   },
                   {
-                    "id": 102,
+                    "id": 119,
                     "name": "url",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1962,8 +2211,8 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      98,
-                      102
+                      115,
+                      119
                     ]
                   }
                 ]
@@ -1976,9 +2225,9 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              107,
-              103,
-              96
+              124,
+              120,
+              113
             ]
           }
         ],
@@ -1997,7 +2246,7 @@
         ]
       },
       {
-        "id": 109,
+        "id": 126,
         "name": "SkyRecentLink",
         "kind": 256,
         "kindString": "Interface",
@@ -2013,7 +2262,7 @@
         },
         "children": [
           {
-            "id": 118,
+            "id": 135,
             "name": "label",
             "kind": 1024,
             "kindString": "Property",
@@ -2034,12 +2283,12 @@
             },
             "inheritedFrom": {
               "type": "reference",
-              "id": 93,
+              "id": 110,
               "name": "SkyPageLink.label"
             }
           },
           {
-            "id": 110,
+            "id": 127,
             "name": "lastAccessed",
             "kind": 1024,
             "kindString": "Property",
@@ -2068,7 +2317,7 @@
             }
           },
           {
-            "id": 111,
+            "id": 128,
             "name": "permalink",
             "kind": 1024,
             "kindString": "Property",
@@ -2086,14 +2335,14 @@
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 112,
+                "id": 129,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 113,
+                    "id": 130,
                     "name": "route",
                     "kind": 1024,
                     "kindString": "Property",
@@ -2110,14 +2359,14 @@
                     "type": {
                       "type": "reflection",
                       "declaration": {
-                        "id": 114,
+                        "id": 131,
                         "name": "__type",
                         "kind": 65536,
                         "kindString": "Type literal",
                         "flags": {},
                         "children": [
                           {
-                            "id": 115,
+                            "id": 132,
                             "name": "commands",
                             "kind": 1024,
                             "kindString": "Property",
@@ -2138,7 +2387,7 @@
                             }
                           },
                           {
-                            "id": 116,
+                            "id": 133,
                             "name": "extras",
                             "kind": 1024,
                             "kindString": "Property",
@@ -2165,8 +2414,8 @@
                             "title": "Properties",
                             "kind": 1024,
                             "children": [
-                              115,
-                              116
+                              132,
+                              133
                             ]
                           }
                         ]
@@ -2174,7 +2423,7 @@
                     }
                   },
                   {
-                    "id": 117,
+                    "id": 134,
                     "name": "url",
                     "kind": 1024,
                     "kindString": "Property",
@@ -2199,8 +2448,8 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      113,
-                      117
+                      130,
+                      134
                     ]
                   }
                 ]
@@ -2208,7 +2457,7 @@
             },
             "inheritedFrom": {
               "type": "reference",
-              "id": 86,
+              "id": 103,
               "name": "SkyPageLink.permalink"
             }
           }
@@ -2218,9 +2467,9 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              118,
-              110,
-              111
+              135,
+              127,
+              128
             ]
           }
         ],
@@ -2234,13 +2483,13 @@
         "extendedTypes": [
           {
             "type": "reference",
-            "id": 85,
+            "id": 102,
             "name": "SkyPageLink"
           }
         ]
       },
       {
-        "id": 78,
+        "id": 95,
         "name": "SkyActionHubNeedsAttentionClickHandler",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -2255,7 +2504,7 @@
         "type": {
           "type": "reflection",
           "declaration": {
-            "id": 79,
+            "id": 96,
             "name": "__type",
             "kind": 65536,
             "kindString": "Type literal",
@@ -2269,21 +2518,21 @@
             ],
             "signatures": [
               {
-                "id": 80,
+                "id": 97,
                 "name": "__type",
                 "kind": 4096,
                 "kindString": "Call signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 81,
+                    "id": 98,
                     "name": "_",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 82,
+                      "id": 99,
                       "name": "SkyActionHubNeedsAttentionClickHandlerArgs"
                     }
                   }
@@ -2298,7 +2547,7 @@
         }
       },
       {
-        "id": 82,
+        "id": 99,
         "name": "SkyActionHubNeedsAttentionClickHandlerArgs",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -2313,14 +2562,14 @@
         "type": {
           "type": "reflection",
           "declaration": {
-            "id": 83,
+            "id": 100,
             "name": "__type",
             "kind": 65536,
             "kindString": "Type literal",
             "flags": {},
             "children": [
               {
-                "id": 84,
+                "id": 101,
                 "name": "item",
                 "kind": 1024,
                 "kindString": "Property",
@@ -2343,7 +2592,7 @@
                 "title": "Properties",
                 "kind": 1024,
                 "children": [
-                  84
+                  101
                 ]
               }
             ],
@@ -2358,7 +2607,7 @@
         }
       },
       {
-        "id": 123,
+        "id": 140,
         "name": "SkyPageLayoutType",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -2397,7 +2646,7 @@
         }
       },
       {
-        "id": 94,
+        "id": 111,
         "name": "SkyPageLinksInput",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -2416,7 +2665,7 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 85,
+                "id": 102,
                 "name": "SkyPageLink"
               }
             },
@@ -2432,7 +2681,7 @@
         }
       },
       {
-        "id": 108,
+        "id": 125,
         "name": "SkyPageModalLinksInput",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -2451,7 +2700,7 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 95,
+                "id": 112,
                 "name": "SkyPageModalLink"
               }
             },
@@ -2467,7 +2716,7 @@
         }
       },
       {
-        "id": 119,
+        "id": 136,
         "name": "SkyRecentLinksInput",
         "kind": 4194304,
         "kindString": "Type alias",
@@ -2489,7 +2738,7 @@
               "type": "array",
               "elementType": {
                 "type": "reference",
-                "id": 109,
+                "id": 126,
                 "name": "SkyRecentLink"
               }
             },
@@ -2509,7 +2758,7 @@
         }
       },
       {
-        "id": 127,
+        "id": 144,
         "name": "SkyPageHarness",
         "kind": 128,
         "kindString": "Class",
@@ -2519,7 +2768,7 @@
         },
         "children": [
           {
-            "id": 140,
+            "id": 157,
             "name": "getLayout",
             "kind": 2048,
             "kindString": "Method",
@@ -2535,7 +2784,7 @@
             ],
             "signatures": [
               {
-                "id": 141,
+                "id": 158,
                 "name": "getLayout",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2548,7 +2797,7 @@
                   "typeArguments": [
                     {
                       "type": "reference",
-                      "id": 123,
+                      "id": 140,
                       "name": "SkyPageLayoutType"
                     }
                   ],
@@ -2560,7 +2809,7 @@
             ]
           },
           {
-            "id": 142,
+            "id": 159,
             "name": "getPageHeader",
             "kind": 2048,
             "kindString": "Method",
@@ -2576,7 +2825,7 @@
             ],
             "signatures": [
               {
-                "id": 143,
+                "id": 160,
                 "name": "getPageHeader",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2586,7 +2835,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 144,
+                    "id": 161,
                     "name": "filters",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -2618,7 +2867,7 @@
             ]
           },
           {
-            "id": 148,
+            "id": 165,
             "name": "host",
             "kind": 2048,
             "kindString": "Method",
@@ -2632,7 +2881,7 @@
             ],
             "signatures": [
               {
-                "id": 149,
+                "id": 166,
                 "name": "host",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2666,7 +2915,7 @@
             }
           },
           {
-            "id": 129,
+            "id": 146,
             "name": "with",
             "kind": 2048,
             "kindString": "Method",
@@ -2683,7 +2932,7 @@
             ],
             "signatures": [
               {
-                "id": 130,
+                "id": 147,
                 "name": "with",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -2693,14 +2942,14 @@
                 },
                 "parameters": [
                   {
-                    "id": 131,
+                    "id": 148,
                     "name": "filters",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "type": {
                       "type": "reference",
-                      "id": 168,
+                      "id": 185,
                       "name": "SkyPageHarnessFilters"
                     }
                   }
@@ -2710,7 +2959,7 @@
                   "typeArguments": [
                     {
                       "type": "reference",
-                      "id": 127,
+                      "id": 144,
                       "name": "SkyPageHarness"
                     }
                   ],
@@ -2727,17 +2976,17 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              137
+              154
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              140,
-              142,
-              148,
-              129
+              157,
+              159,
+              165,
+              146
             ]
           }
         ],
@@ -2756,7 +3005,7 @@
         ]
       },
       {
-        "id": 168,
+        "id": 185,
         "name": "SkyPageHarnessFilters",
         "kind": 256,
         "kindString": "Interface",
@@ -2766,7 +3015,7 @@
         },
         "children": [
           {
-            "id": 171,
+            "id": 188,
             "name": "ancestor",
             "kind": 1024,
             "kindString": "Property",
@@ -2793,7 +3042,7 @@
             }
           },
           {
-            "id": 169,
+            "id": 186,
             "name": "dataSkyId",
             "kind": 1024,
             "kindString": "Property",
@@ -2831,7 +3080,7 @@
             }
           },
           {
-            "id": 170,
+            "id": 187,
             "name": "selector",
             "kind": 1024,
             "kindString": "Property",
@@ -2863,9 +3112,9 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              171,
-              169,
-              170
+              188,
+              186,
+              187
             ]
           }
         ],
@@ -2934,7 +3183,7 @@
     {
       "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"
+      "rawContents": "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\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>\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",
@@ -2974,7 +3223,7 @@
     {
       "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"
+      "rawContents": "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\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>\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",
@@ -3059,7 +3308,7 @@
     {
       "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"
+      "rawContents": "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\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>\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",
@@ -3079,7 +3328,7 @@
     {
       "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"
+      "rawContents": "<div class=\"sky-margin-stacked-xs\">\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"New note\"\n      >\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</div>\n<div class=\"sky-margin-stacked-sm\">\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</div>\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",
@@ -3104,12 +3353,12 @@
     {
       "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"
+      "rawContents": "<sky-page layout=\"tabs\">\n  <sky-page-header pageTitle=\"Charlene Conners\">\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        Missing phone number for Charlene Conners.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-avatar>\n      <sky-avatar name=\"Charlene Conners\"> </sky-avatar>\n    </sky-page-header-avatar>\n    <sky-page-header-details>\n      <sky-label labelType=\"info\" descriptionType=\"important-info\">\n        VIP\n      </sky-label>\n    </sky-page-header-details>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\">Email contact</button>\n      <button class=\"sky-btn sky-btn-default\">Add to my contacts</button>\n    </sky-page-header-actions>\n  </sky-page-header>\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"
+      "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});\n"
     },
     {
       "fileName": "record-page-tabs-layout-demo.component.ts",
@@ -3119,7 +3368,7 @@
     {
       "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"
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyAvatarModule } from '@skyux/avatar';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport {\n  SkyAlertModule,\n  SkyIconModule,\n  SkyKeyInfoModule,\n  SkyLabelModule,\n} 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    SkyAlertModule,\n    SkyAvatarModule,\n    SkyBoxModule,\n    SkyDataManagerModule,\n    SkyDescriptionListModule,\n    SkyDropdownModule,\n    SkyFluidGridModule,\n    SkyIconModule,\n    SkyKeyInfoModule,\n    SkyLabelModule,\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",
@@ -3134,7 +3383,7 @@
     {
       "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"
+      "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-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        There are multpile expense approvals due soon.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\">Approve all</button>\n    </sky-page-header-actions>\n  </sky-page-header>\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",
@@ -3149,7 +3398,7 @@
     {
       "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"
+      "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 { SkyAlertModule } from '@skyux/indicators';\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    CommonModule,\n    ReactiveFormsModule,\n    SkyAlertModule,\n    SkyDescriptionListModule,\n    SkyInputBoxModule,\n    SkyPageModule,\n    SkyRepeaterModule,\n    SkySplitViewModule,\n    SkySummaryActionBarModule,\n  ],\n})\nexport class SplitViewPageFitLayoutDemoModule {}\n"
     }
   ]
 }