@skyux/flyout 5.0.0-beta.4 → 5.0.3

package/documentation.json

@@ -10,13 +10,13 @@
   "typedoc": {
     "id": 0,
     "name": "@skyux/flyout",
-    "kind": 0,
+    "kind": 1,
     "kindString": "Project",
     "flags": {},
     "originalName": "",
     "children": [
       {
-        "id": 103,
+        "id": 110,
         "name": "SkyFlyoutInstance",
         "kind": 128,
         "kindString": "Class",
@@ -26,7 +26,7 @@
         },
         "children": [
           {
-            "id": 104,
+            "id": 111,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -34,20 +34,20 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-                "line": 112,
+                "line": 103,
                 "character": 2
               }
             ],
             "signatures": [
               {
-                "id": 105,
+                "id": 112,
                 "name": "new SkyFlyoutInstance",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "typeParameter": [
                   {
-                    "id": 106,
+                    "id": 113,
                     "name": "T",
                     "kind": 131072,
                     "kindString": "Type parameter",
@@ -56,10 +56,11 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 103,
+                  "id": 110,
                   "typeArguments": [
                     {
                       "type": "reference",
+                      "id": 113,
                       "name": "T"
                     }
                   ],
@@ -69,7 +70,7 @@
             ]
           },
           {
-            "id": 107,
+            "id": 114,
             "name": "closed",
             "kind": 1024,
             "kindString": "Property",
@@ -82,7 +83,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-                "line": 25,
+                "line": 16,
                 "character": 9
               }
             ],
@@ -99,7 +100,7 @@
             "defaultValue": "..."
           },
           {
-            "id": 108,
+            "id": 115,
             "name": "componentInstance",
             "kind": 1024,
             "kindString": "Property",
@@ -112,17 +113,18 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-                "line": 30,
+                "line": 21,
                 "character": 9
               }
             ],
             "type": {
               "type": "reference",
+              "id": 113,
               "name": "T"
             }
           },
           {
-            "id": 111,
+            "id": 118,
             "name": "isOpen",
             "kind": 1024,
             "kindString": "Property",
@@ -141,7 +143,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-                "line": 44,
+                "line": 35,
                 "character": 9
               }
             ],
@@ -152,26 +154,23 @@
             "defaultValue": "true"
           },
           {
-            "id": 112,
+            "id": 119,
             "name": "iteratorNextButtonClick",
             "kind": 262144,
             "kindString": "Accessor",
             "flags": {
               "isPublic": true
             },
-            "comment": {
-              "shortText": "An event that the flyout instance emits when users click the next iterator button."
-            },
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-                "line": 49,
+                "line": 40,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 113,
+                "id": 120,
                 "name": "iteratorNextButtonClick",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -193,7 +192,7 @@
             ]
           },
           {
-            "id": 116,
+            "id": 123,
             "name": "iteratorNextButtonDisabled",
             "kind": 262144,
             "kindString": "Accessor",
@@ -203,13 +202,13 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-                "line": 64,
+                "line": 55,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 117,
+                "id": 124,
                 "name": "iteratorNextButtonDisabled",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -225,7 +224,7 @@
             ],
             "setSignature": [
               {
-                "id": 118,
+                "id": 125,
                 "name": "iteratorNextButtonDisabled",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -241,7 +240,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 119,
+                    "id": 126,
                     "name": "newValue",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -260,26 +259,23 @@
             ]
           },
           {
-            "id": 114,
+            "id": 121,
             "name": "iteratorPreviousButtonClick",
             "kind": 262144,
             "kindString": "Accessor",
             "flags": {
               "isPublic": true
             },
-            "comment": {
-              "shortText": "An event that the flyout instance emits when users click the previous iterator button."
-            },
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-                "line": 56,
+                "line": 47,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 115,
+                "id": 122,
                 "name": "iteratorPreviousButtonClick",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -301,7 +297,7 @@
             ]
           },
           {
-            "id": 120,
+            "id": 127,
             "name": "iteratorPreviousButtonDisabled",
             "kind": 262144,
             "kindString": "Accessor",
@@ -311,13 +307,13 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-                "line": 85,
+                "line": 76,
                 "character": 13
               }
             ],
             "getSignature": [
               {
-                "id": 121,
+                "id": 128,
                 "name": "iteratorPreviousButtonDisabled",
                 "kind": 524288,
                 "kindString": "Get signature",
@@ -333,7 +329,7 @@
             ],
             "setSignature": [
               {
-                "id": 122,
+                "id": 129,
                 "name": "iteratorPreviousButtonDisabled",
                 "kind": 1048576,
                 "kindString": "Set signature",
@@ -349,7 +345,7 @@
                 },
                 "parameters": [
                   {
-                    "id": 123,
+                    "id": 130,
                     "name": "newValue",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -368,7 +364,7 @@
             ]
           },
           {
-            "id": 129,
+            "id": 136,
             "name": "close",
             "kind": 2048,
             "kindString": "Method",
@@ -378,13 +374,13 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-                "line": 121,
+                "line": 112,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 130,
+                "id": 137,
                 "name": "close",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -405,46 +401,46 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              104
+              111
             ]
           },
           {
             "title": "Properties",
             "kind": 1024,
             "children": [
-              107,
-              108,
-              111
+              114,
+              115,
+              118
             ]
           },
           {
             "title": "Accessors",
             "kind": 262144,
             "children": [
-              112,
-              116,
-              114,
-              120
+              119,
+              123,
+              121,
+              127
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              129
+              136
             ]
           }
         ],
         "sources": [
           {
             "fileName": "projects/flyout/src/modules/flyout/flyout-instance.ts",
-            "line": 20,
+            "line": 12,
             "character": 13
           }
         ],
         "typeParameter": [
           {
-            "id": 131,
+            "id": 138,
             "name": "T",
             "kind": 131072,
             "kindString": "Type parameter",
@@ -453,7 +449,7 @@
         ]
       },
       {
-        "id": 132,
+        "id": 139,
         "name": "SkyFlyoutModule",
         "kind": 128,
         "kindString": "Class",
@@ -466,27 +462,27 @@
               "name": "NgModule"
             },
             "arguments": {
-              "obj": "{\n  declarations: [\n    SkyFlyoutComponent,\n    SkyFlyoutIteratorComponent\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    RouterModule,\n    SkyI18nModule,\n    SkyIconModule,\n    SkyFlyoutResourcesModule,\n    SkyThemeModule,\n    SkyHrefModule\n  ],\n  exports: [\n    SkyFlyoutComponent\n  ],\n  entryComponents: [\n    SkyFlyoutComponent\n  ]\n}"
+              "obj": "{\n  declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    RouterModule,\n    SkyI18nModule,\n    SkyIconModule,\n    SkyFlyoutResourcesModule,\n    SkyThemeModule,\n    SkyHrefModule,\n  ],\n  exports: [SkyFlyoutComponent],\n  entryComponents: [SkyFlyoutComponent],\n}"
             }
           }
         ],
         "children": [
           {
-            "id": 133,
+            "id": 140,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
             "flags": {},
             "signatures": [
               {
-                "id": 134,
+                "id": 141,
                 "name": "new SkyFlyoutModule",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "type": {
                   "type": "reference",
-                  "id": 132,
+                  "id": 139,
                   "name": "SkyFlyoutModule"
                 }
               }
@@ -498,20 +494,20 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              133
+              140
             ]
           }
         ],
         "sources": [
           {
             "fileName": "projects/flyout/src/modules/flyout/flyout.module.ts",
-            "line": 67,
+            "line": 38,
             "character": 13
           }
         ]
       },
       {
-        "id": 135,
+        "id": 142,
         "name": "SkyFlyoutService",
         "kind": 128,
         "kindString": "Class",
@@ -527,13 +523,13 @@
               "name": "Injectable"
             },
             "arguments": {
-              "options": "{\n  providedIn: 'root'\n}"
+              "options": "{\n  providedIn: 'any',\n}"
             }
           }
         ],
         "children": [
           {
-            "id": 136,
+            "id": 143,
             "name": "constructor",
             "kind": 512,
             "kindString": "Constructor",
@@ -541,20 +537,20 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
-                "line": 64,
+                "line": 39,
                 "character": 2
               }
             ],
             "signatures": [
               {
-                "id": 137,
+                "id": 144,
                 "name": "new SkyFlyoutService",
                 "kind": 16384,
                 "kindString": "Constructor signature",
                 "flags": {},
                 "parameters": [
                   {
-                    "id": 138,
+                    "id": 145,
                     "name": "coreAdapter",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -565,7 +561,7 @@
                     }
                   },
                   {
-                    "id": 139,
+                    "id": 146,
                     "name": "windowRef",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -576,7 +572,7 @@
                     }
                   },
                   {
-                    "id": 140,
+                    "id": 147,
                     "name": "dynamicComponentService",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -587,7 +583,7 @@
                     }
                   },
                   {
-                    "id": 141,
+                    "id": 148,
                     "name": "router",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -600,14 +596,14 @@
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 135,
+                  "id": 142,
                   "name": "SkyFlyoutService"
                 }
               }
             ]
           },
           {
-            "id": 148,
+            "id": 155,
             "name": "close",
             "kind": 2048,
             "kindString": "Method",
@@ -617,13 +613,13 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
-                "line": 81,
+                "line": 56,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 149,
+                "id": 156,
                 "name": "close",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -639,7 +635,7 @@
             ]
           },
           {
-            "id": 146,
+            "id": 153,
             "name": "ngOnDestroy",
             "kind": 2048,
             "kindString": "Method",
@@ -649,13 +645,13 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
-                "line": 71,
+                "line": 46,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 147,
+                "id": 154,
                 "name": "ngOnDestroy",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -676,7 +672,7 @@
             }
           },
           {
-            "id": 150,
+            "id": 157,
             "name": "open",
             "kind": 2048,
             "kindString": "Method",
@@ -686,13 +682,13 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
-                "line": 98,
+                "line": 73,
                 "character": 9
               }
             ],
             "signatures": [
               {
-                "id": 151,
+                "id": 158,
                 "name": "open",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -702,7 +698,7 @@
                 },
                 "typeParameter": [
                   {
-                    "id": 152,
+                    "id": 159,
                     "name": "T",
                     "kind": 131072,
                     "kindString": "Type parameter",
@@ -711,19 +707,20 @@
                 ],
                 "parameters": [
                   {
-                    "id": 153,
+                    "id": 160,
                     "name": "component",
                     "kind": 32768,
                     "kindString": "Parameter",
                     "flags": {},
                     "comment": {
-                      "text": "Specifies the component to render. Since you generate the component dynamically instead of\nwith HTML selectors, you must register it with the `entryComponents` property in the\n`app-extras.module.ts` file. For more information, see the\n[entry components tutorial](https://developer.blackbaud.com/skyux/learn/get-started/advanced/entry-components)."
+                      "shortText": "Specifies the component to render. Since you generate the component dynamically instead of\nwith HTML selectors, you must register it with the `entryComponents` property in the\n`app-extras.module.ts` file. For more information, see the\n[entry components tutorial](https://developer.blackbaud.com/skyux/learn/get-started/advanced/entry-components)."
                     },
                     "type": {
                       "type": "reference",
                       "typeArguments": [
                         {
                           "type": "reference",
+                          "id": 159,
                           "name": "T"
                         }
                       ],
@@ -731,7 +728,7 @@
                     }
                   },
                   {
-                    "id": 154,
+                    "id": 161,
                     "name": "config",
                     "kind": 32768,
                     "kindString": "Parameter",
@@ -739,21 +736,22 @@
                       "isOptional": true
                     },
                     "comment": {
-                      "text": "Specifies the flyout configuration passed to the specified component's constructor.\n"
+                      "shortText": "Specifies the flyout configuration passed to the specified component's constructor.\n"
                     },
                     "type": {
                       "type": "reference",
-                      "id": 170,
+                      "id": 177,
                       "name": "SkyFlyoutConfig"
                     }
                   }
                 ],
                 "type": {
                   "type": "reference",
-                  "id": 103,
+                  "id": 110,
                   "typeArguments": [
                     {
                       "type": "reference",
+                      "id": 159,
                       "name": "T"
                     }
                   ],
@@ -768,23 +766,23 @@
             "title": "Constructors",
             "kind": 512,
             "children": [
-              136
+              143
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              148,
-              146,
-              150
+              155,
+              153,
+              157
             ]
           }
         ],
         "sources": [
           {
             "fileName": "projects/flyout/src/modules/flyout/flyout.service.ts",
-            "line": 58,
+            "line": 33,
             "character": 13
           }
         ],
@@ -796,14 +794,14 @@
         ]
       },
       {
-        "id": 165,
+        "id": 172,
         "name": "SkyFlyoutAction",
         "kind": 256,
         "kindString": "Interface",
         "flags": {},
         "children": [
           {
-            "id": 169,
+            "id": 176,
             "name": "closeAfterInvoking",
             "kind": 1024,
             "kindString": "Property",
@@ -816,8 +814,8 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-action.ts",
-                "line": 16,
-                "character": 4
+                "line": 15,
+                "character": 2
               }
             ],
             "type": {
@@ -826,7 +824,7 @@
             }
           },
           {
-            "id": 166,
+            "id": 173,
             "name": "label",
             "kind": 1024,
             "kindString": "Property",
@@ -839,8 +837,8 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-action.ts",
-                "line": 6,
-                "character": 4
+                "line": 5,
+                "character": 2
               }
             ],
             "type": {
@@ -849,7 +847,7 @@
             }
           },
           {
-            "id": 167,
+            "id": 174,
             "name": "callback",
             "kind": 2048,
             "kindString": "Method",
@@ -859,13 +857,13 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-action.ts",
-                "line": 11,
-                "character": 4
+                "line": 10,
+                "character": 2
               }
             ],
             "signatures": [
               {
-                "id": 168,
+                "id": 175,
                 "name": "callback",
                 "kind": 4096,
                 "kindString": "Call signature",
@@ -886,15 +884,15 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              169,
-              166
+              176,
+              173
             ]
           },
           {
             "title": "Methods",
             "kind": 2048,
             "children": [
-              167
+              174
             ]
           }
         ],
@@ -907,7 +905,7 @@
         ]
       },
       {
-        "id": 170,
+        "id": 177,
         "name": "SkyFlyoutConfig",
         "kind": 256,
         "kindString": "Interface",
@@ -917,7 +915,7 @@
         },
         "children": [
           {
-            "id": 171,
+            "id": 178,
             "name": "ariaDescribedBy",
             "kind": 1024,
             "kindString": "Property",
@@ -930,7 +928,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 21,
+                "line": 16,
                 "character": 2
               }
             ],
@@ -940,7 +938,7 @@
             }
           },
           {
-            "id": 172,
+            "id": 179,
             "name": "ariaLabelledBy",
             "kind": 1024,
             "kindString": "Property",
@@ -953,7 +951,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 28,
+                "line": 23,
                 "character": 2
               }
             ],
@@ -963,7 +961,7 @@
             }
           },
           {
-            "id": 173,
+            "id": 180,
             "name": "ariaRole",
             "kind": 1024,
             "kindString": "Property",
@@ -976,7 +974,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 37,
+                "line": 32,
                 "character": 2
               }
             ],
@@ -986,7 +984,7 @@
             }
           },
           {
-            "id": 174,
+            "id": 181,
             "name": "defaultWidth",
             "kind": 1024,
             "kindString": "Property",
@@ -999,7 +997,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 43,
+                "line": 38,
                 "character": 2
               }
             ],
@@ -1009,7 +1007,7 @@
             }
           },
           {
-            "id": 182,
+            "id": 189,
             "name": "iteratorNextButtonDisabled",
             "kind": 1024,
             "kindString": "Property",
@@ -1028,7 +1026,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 92,
+                "line": 87,
                 "character": 2
               }
             ],
@@ -1038,7 +1036,7 @@
             }
           },
           {
-            "id": 181,
+            "id": 188,
             "name": "iteratorPreviousButtonDisabled",
             "kind": 1024,
             "kindString": "Property",
@@ -1057,7 +1055,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 85,
+                "line": 80,
                 "character": 2
               }
             ],
@@ -1067,7 +1065,7 @@
             }
           },
           {
-            "id": 176,
+            "id": 183,
             "name": "maxWidth",
             "kind": 1024,
             "kindString": "Property",
@@ -1086,7 +1084,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 55,
+                "line": 50,
                 "character": 2
               }
             ],
@@ -1096,7 +1094,7 @@
             }
           },
           {
-            "id": 175,
+            "id": 182,
             "name": "minWidth",
             "kind": 1024,
             "kindString": "Property",
@@ -1115,7 +1113,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 49,
+                "line": 44,
                 "character": 2
               }
             ],
@@ -1125,7 +1123,7 @@
             }
           },
           {
-            "id": 177,
+            "id": 184,
             "name": "permalink",
             "kind": 1024,
             "kindString": "Property",
@@ -1138,18 +1136,18 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 61,
+                "line": 56,
                 "character": 2
               }
             ],
             "type": {
               "type": "reference",
-              "id": 193,
+              "id": 200,
               "name": "SkyFlyoutPermalink"
             }
           },
           {
-            "id": 178,
+            "id": 185,
             "name": "primaryAction",
             "kind": 1024,
             "kindString": "Property",
@@ -1162,18 +1160,18 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 66,
+                "line": 61,
                 "character": 2
               }
             ],
             "type": {
               "type": "reference",
-              "id": 165,
+              "id": 172,
               "name": "SkyFlyoutAction"
             }
           },
           {
-            "id": 179,
+            "id": 186,
             "name": "providers",
             "kind": 1024,
             "kindString": "Property",
@@ -1186,7 +1184,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 71,
+                "line": 66,
                 "character": 2
               }
             ],
@@ -1199,7 +1197,7 @@
             }
           },
           {
-            "id": 183,
+            "id": 190,
             "name": "settingsKey",
             "kind": 1024,
             "kindString": "Property",
@@ -1212,7 +1210,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 100,
+                "line": 95,
                 "character": 2
               }
             ],
@@ -1222,7 +1220,7 @@
             }
           },
           {
-            "id": 180,
+            "id": 187,
             "name": "showIterator",
             "kind": 1024,
             "kindString": "Property",
@@ -1241,7 +1239,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-                "line": 78,
+                "line": 73,
                 "character": 2
               }
             ],
@@ -1256,39 +1254,39 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              171,
-              172,
-              173,
-              174,
-              182,
-              181,
-              176,
-              175,
-              177,
               178,
               179,
+              180,
+              181,
+              189,
+              188,
               183,
-              180
+              182,
+              184,
+              185,
+              186,
+              190,
+              187
             ]
           }
         ],
         "sources": [
           {
             "fileName": "projects/flyout/src/modules/flyout/types/flyout-config.ts",
-            "line": 12,
+            "line": 8,
             "character": 17
           }
         ]
       },
       {
-        "id": 193,
+        "id": 200,
         "name": "SkyFlyoutPermalink",
         "kind": 256,
         "kindString": "Interface",
         "flags": {},
         "children": [
           {
-            "id": 194,
+            "id": 201,
             "name": "label",
             "kind": 1024,
             "kindString": "Property",
@@ -1301,7 +1299,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-permalink.ts",
-                "line": 10,
+                "line": 7,
                 "character": 2
               }
             ],
@@ -1311,7 +1309,7 @@
             }
           },
           {
-            "id": 195,
+            "id": 202,
             "name": "route",
             "kind": 1024,
             "kindString": "Property",
@@ -1324,21 +1322,21 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-permalink.ts",
-                "line": 18,
+                "line": 15,
                 "character": 2
               }
             ],
             "type": {
               "type": "reflection",
               "declaration": {
-                "id": 196,
+                "id": 203,
                 "name": "__type",
                 "kind": 65536,
                 "kindString": "Type literal",
                 "flags": {},
                 "children": [
                   {
-                    "id": 197,
+                    "id": 204,
                     "name": "commands",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1346,7 +1344,7 @@
                     "sources": [
                       {
                         "fileName": "projects/flyout/src/modules/flyout/types/flyout-permalink.ts",
-                        "line": 19,
+                        "line": 16,
                         "character": 4
                       }
                     ],
@@ -1359,7 +1357,7 @@
                     }
                   },
                   {
-                    "id": 198,
+                    "id": 205,
                     "name": "extras",
                     "kind": 1024,
                     "kindString": "Property",
@@ -1369,7 +1367,7 @@
                     "sources": [
                       {
                         "fileName": "projects/flyout/src/modules/flyout/types/flyout-permalink.ts",
-                        "line": 20,
+                        "line": 17,
                         "character": 4
                       }
                     ],
@@ -1384,8 +1382,8 @@
                     "title": "Properties",
                     "kind": 1024,
                     "children": [
-                      197,
-                      198
+                      204,
+                      205
                     ]
                   }
                 ]
@@ -1393,7 +1391,7 @@
             }
           },
           {
-            "id": 199,
+            "id": 206,
             "name": "url",
             "kind": 1024,
             "kindString": "Property",
@@ -1406,7 +1404,7 @@
             "sources": [
               {
                 "fileName": "projects/flyout/src/modules/flyout/types/flyout-permalink.ts",
-                "line": 26,
+                "line": 23,
                 "character": 2
               }
             ],
@@ -1421,16 +1419,16 @@
             "title": "Properties",
             "kind": 1024,
             "children": [
-              194,
-              195,
-              199
+              201,
+              202,
+              206
             ]
           }
         ],
         "sources": [
           {
             "fileName": "projects/flyout/src/modules/flyout/types/flyout-permalink.ts",
-            "line": 5,
+            "line": 3,
             "character": 17
           }
         ]
@@ -1441,18 +1439,18 @@
         "title": "Classes",
         "kind": 128,
         "children": [
-          103,
-          132,
-          135
+          110,
+          139,
+          142
         ]
       },
       {
         "title": "Interfaces",
         "kind": 256,
         "children": [
-          165,
-          170,
-          193
+          172,
+          177,
+          200
         ]
       }
     ],
@@ -1465,10 +1463,15 @@
     ]
   },
   "codeExamples": [
+    {
+      "fileName": ".eslintrc.json",
+      "filePath": "/projects/flyout/documentation/code-examples/.eslintrc.json",
+      "rawContents": "{\n  \"extends\": [\"../../.eslintrc.json\"],\n  \"overrides\": [\n    {\n      \"files\": [\"*.ts\"],\n      \"rules\": {\n        \"@angular-eslint/directive-selector\": [\n          \"error\",\n          {\n            \"type\": \"attribute\",\n            \"prefix\": \"app\",\n            \"style\": \"camelCase\"\n          }\n        ],\n        \"@angular-eslint/component-selector\": [\n          \"error\",\n          {\n            \"type\": \"element\",\n            \"prefix\": \"app\",\n            \"style\": \"kebab-case\"\n          }\n        ]\n      }\n    }\n  ]\n}\n"
+    },
     {
       "fileName": "flyout-demo-flyout.component.ts",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo-flyout.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-flyout-demo-flyout',\n  template: `\n    <div\n      class=\"sky-padding-even-large\"\n    >\n      <h2\n        id=\"flyout-title\"\n      >\n        Sample flyout\n      </h2>\n      <p>\n        Flyouts can display large quantities of supplementary information related to a task, including:\n      </p>\n        <ul>\n          <li>lists</li>\n          <li>records</li>\n          <li>analytics</li>\n        </ul>\n    </div>\n  `\n})\nexport class FlyoutDemoFlyoutComponent {}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-flyout-demo-flyout',\n  template: `\n    <div class=\"sky-padding-even-large\">\n      <h2 id=\"flyout-title\">Sample flyout</h2>\n      <p>\n        Flyouts can display large quantities of supplementary information\n        related to a task, including:\n      </p>\n      <ul>\n        <li>lists</li>\n        <li>records</li>\n        <li>analytics</li>\n      </ul>\n    </div>\n  `,\n})\nexport class FlyoutDemoFlyoutComponent {}\n"
     },
     {
       "fileName": "flyout-demo.component.html",
@@ -1478,17 +1481,17 @@
     {
       "fileName": "flyout-demo.component.ts",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\nimport {\n  SkyFlyoutConfig,\n  SkyFlyoutInstance,\n  SkyFlyoutService\n} from '@skyux/flyout';\n\nimport {\n  FlyoutDemoFlyoutComponent\n} from './flyout-demo-flyout.component';\n\n@Component({\n  selector: 'app-flyout-demo',\n  templateUrl: './flyout-demo.component.html'\n})\nexport class FlyoutDemoComponent {\n\n  public flyout: SkyFlyoutInstance<any>;\n\n  constructor(\n    private flyoutService: SkyFlyoutService\n  ) { }\n\n  public closeAndRemoveFlyout(): void {\n    if (this.flyout && this.flyout.isOpen) {\n      this.flyoutService.close();\n    }\n    this.flyout = undefined;\n  }\n\n  public openFlyoutWithCutsomWidth(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      defaultWidth: 350,\n      maxWidth: 500,\n      minWidth: 200\n    };\n    this.flyout = this.flyoutService.open(FlyoutDemoFlyoutComponent, flyoutConfig);\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n\n  public openSimpleFlyout(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog'\n    };\n    this.flyout = this.flyoutService.open(FlyoutDemoFlyoutComponent, flyoutConfig);\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\nimport {\n  SkyFlyoutConfig,\n  SkyFlyoutInstance,\n  SkyFlyoutService,\n} from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n  selector: 'app-flyout-demo',\n  templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n  public flyout: SkyFlyoutInstance<any>;\n\n  constructor(private flyoutService: SkyFlyoutService) {}\n\n  public closeAndRemoveFlyout(): void {\n    if (this.flyout && this.flyout.isOpen) {\n      this.flyoutService.close();\n    }\n    this.flyout = undefined;\n  }\n\n  public openFlyoutWithCutsomWidth(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      defaultWidth: 350,\n      maxWidth: 500,\n      minWidth: 200,\n    };\n    this.flyout = this.flyoutService.open(\n      FlyoutDemoFlyoutComponent,\n      flyoutConfig\n    );\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n\n  public openSimpleFlyout(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n    };\n    this.flyout = this.flyoutService.open(\n      FlyoutDemoFlyoutComponent,\n      flyoutConfig\n    );\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n}\n"
     },
     {
       "fileName": "flyout-demo.module.ts",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyFlyoutModule\n} from '@skyux/flyout';\n\nimport {\n  FlyoutDemoComponent\n} from './flyout-demo.component';\n\nimport {\n  FlyoutDemoFlyoutComponent\n} from './flyout-demo-flyout.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyFlyoutModule\n  ],\n  declarations: [\n    FlyoutDemoComponent,\n    FlyoutDemoFlyoutComponent\n  ],\n  entryComponents: [\n    FlyoutDemoFlyoutComponent\n  ],\n  exports: [\n    FlyoutDemoComponent\n  ]\n})\nexport class AutocompleteDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { SkyFlyoutModule } from '@skyux/flyout';\n\nimport { FlyoutDemoComponent } from './flyout-demo.component';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@NgModule({\n  imports: [CommonModule, SkyFlyoutModule],\n  declarations: [FlyoutDemoComponent, FlyoutDemoFlyoutComponent],\n  entryComponents: [FlyoutDemoFlyoutComponent],\n  exports: [FlyoutDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
     },
     {
       "fileName": "flyout-demo-flyout.component.ts",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/custom-headers/flyout-demo-flyout.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\n@Component({\n  selector: 'app-flyout-demo-flyout',\n  template: `\n    <div\n      class=\"sky-padding-even-large\"\n    >\n      <h2\n        id=\"flyout-title\"\n      >\n        Sample flyout\n      </h2>\n      <p>\n        Flyouts can display large quantities of supplementary information related to a task, including:\n      </p>\n        <ul>\n          <li>lists</li>\n          <li>records</li>\n          <li>analytics</li>\n        </ul>\n    </div>\n  `\n})\nexport class FlyoutDemoFlyoutComponent {}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-flyout-demo-flyout',\n  template: `\n    <div class=\"sky-padding-even-large\">\n      <h2 id=\"flyout-title\">Sample flyout</h2>\n      <p>\n        Flyouts can display large quantities of supplementary information\n        related to a task, including:\n      </p>\n      <ul>\n        <li>lists</li>\n        <li>records</li>\n        <li>analytics</li>\n      </ul>\n    </div>\n  `,\n})\nexport class FlyoutDemoFlyoutComponent {}\n"
     },
     {
       "fileName": "flyout-demo.component.html",
@@ -1498,12 +1501,12 @@
     {
       "fileName": "flyout-demo.component.ts",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/custom-headers/flyout-demo.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\nimport {\n  SkyFlyoutConfig,\n  SkyFlyoutInstance,\n  SkyFlyoutService\n} from '@skyux/flyout';\n\nimport {\n  FlyoutDemoFlyoutComponent\n} from './flyout-demo-flyout.component';\n\n@Component({\n  selector: 'app-flyout-demo',\n  templateUrl: './flyout-demo.component.html'\n})\nexport class FlyoutDemoComponent {\n\n  public flyout: SkyFlyoutInstance<any>;\n\n  constructor(\n    private flyoutService: SkyFlyoutService\n  ) { }\n\n  public openFlyoutWithIterators(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      showIterator: true\n    };\n    this.flyout = this.flyoutService.open(FlyoutDemoFlyoutComponent, flyoutConfig);\n\n    this.flyout.iteratorNextButtonClick.subscribe(() => {\n      alert('Next iterator button clicked!');\n    });\n\n    this.flyout.iteratorPreviousButtonClick.subscribe(() => {\n      alert('Prvious iterator button clicked!');\n    });\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n\n  public openFlyoutWithRoutePermalink(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      permalink: {\n        label: 'Go to Components page',\n        route: {\n          commands: ['/components'],\n          extras: {\n            fragment: 'helloWorld',\n            queryParams: {\n              foo: 'bar'\n            }\n          }\n        }\n      }\n    };\n    this.flyout = this.flyoutService.open(FlyoutDemoFlyoutComponent, flyoutConfig);\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n\n  public openFlyoutWithUrlPermalink(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      permalink: {\n        label: `Visit blackbaud.com`,\n        url: 'http://www.blackbaud.com'\n      }\n    };\n    this.flyout = this.flyoutService.open(FlyoutDemoFlyoutComponent, flyoutConfig);\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\nimport {\n  SkyFlyoutConfig,\n  SkyFlyoutInstance,\n  SkyFlyoutService,\n} from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n  selector: 'app-flyout-demo',\n  templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n  public flyout: SkyFlyoutInstance<any>;\n\n  constructor(private flyoutService: SkyFlyoutService) {}\n\n  public openFlyoutWithIterators(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      showIterator: true,\n    };\n    this.flyout = this.flyoutService.open(\n      FlyoutDemoFlyoutComponent,\n      flyoutConfig\n    );\n\n    this.flyout.iteratorNextButtonClick.subscribe(() => {\n      alert('Next iterator button clicked!');\n    });\n\n    this.flyout.iteratorPreviousButtonClick.subscribe(() => {\n      alert('Prvious iterator button clicked!');\n    });\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n\n  public openFlyoutWithRoutePermalink(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      permalink: {\n        label: 'Go to Components page',\n        route: {\n          commands: ['/components'],\n          extras: {\n            fragment: 'helloWorld',\n            queryParams: {\n              foo: 'bar',\n            },\n          },\n        },\n      },\n    };\n    this.flyout = this.flyoutService.open(\n      FlyoutDemoFlyoutComponent,\n      flyoutConfig\n    );\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n\n  public openFlyoutWithUrlPermalink(): void {\n    const flyoutConfig: SkyFlyoutConfig = {\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      permalink: {\n        label: `Visit blackbaud.com`,\n        url: 'http://www.blackbaud.com',\n      },\n    };\n    this.flyout = this.flyoutService.open(\n      FlyoutDemoFlyoutComponent,\n      flyoutConfig\n    );\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n  }\n}\n"
     },
     {
       "fileName": "flyout-demo.module.ts",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/custom-headers/flyout-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyFlyoutModule\n} from '@skyux/flyout';\n\nimport {\n  FlyoutDemoComponent\n} from './flyout-demo.component';\n\nimport {\n  FlyoutDemoFlyoutComponent\n} from './flyout-demo-flyout.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyFlyoutModule\n  ],\n  declarations: [\n    FlyoutDemoComponent,\n    FlyoutDemoFlyoutComponent\n  ],\n  entryComponents: [\n    FlyoutDemoFlyoutComponent\n  ],\n  exports: [\n    FlyoutDemoComponent\n  ]\n})\nexport class AutocompleteDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { SkyFlyoutModule } from '@skyux/flyout';\n\nimport { FlyoutDemoComponent } from './flyout-demo.component';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@NgModule({\n  imports: [CommonModule, SkyFlyoutModule],\n  declarations: [FlyoutDemoComponent, FlyoutDemoFlyoutComponent],\n  entryComponents: [FlyoutDemoFlyoutComponent],\n  exports: [FlyoutDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
     },
     {
       "fileName": "flyout-demo-context.ts",
@@ -1513,27 +1516,27 @@
     {
       "fileName": "flyout-demo-flyout.component.html",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo-flyout.component.html",
-      "rawContents": "<sky-page-summary>\n  <sky-page-summary-image>\n    <sky-avatar\n      [name]=\"context.name\"\n    >\n    </sky-avatar>\n  </sky-page-summary-image>\n  <sky-page-summary-title\n    id=\"flyout-title\"\n  >\n    {{context.name}}\n  </sky-page-summary-title>\n  <sky-page-summary-subtitle>\n    {{context.constituentCode}}\n  </sky-page-summary-subtitle>\n  <sky-page-summary-status>\n    <sky-label\n      labelType=\"{{ context.status === 'Past due' ? 'danger' : 'success' }}\"\n    >\n      {{ context.status }}\n    </sky-label>\n  </sky-page-summary-status>\n  <sky-page-summary-content>\n    <h2>\n      Constituent Summary\n    </h2>\n    <p>\n      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis quae mollitia rem obcaecati. Aspernatur vitae iusto cum corporis adipisci corrupti dolore odit a impedit enim. Porro ab exercitationem quidem? Maiores!\n    </p>\n  </sky-page-summary-content>\n  <sky-page-summary-key-info>\n    <sky-key-info>\n      <sky-key-info-value>\n        {{ context.latestGift }}\n      </sky-key-info-value>\n      <sky-key-info-label>\n        Latest gift\n      </sky-key-info-label>\n    </sky-key-info>\n  </sky-page-summary-key-info>\n</sky-page-summary>\n"
+      "rawContents": "<sky-page-summary>\n  <sky-page-summary-image>\n    <sky-avatar [name]=\"context.name\"> </sky-avatar>\n  </sky-page-summary-image>\n  <sky-page-summary-title id=\"flyout-title\">\n    {{ context.name }}\n  </sky-page-summary-title>\n  <sky-page-summary-subtitle>\n    {{ context.constituentCode }}\n  </sky-page-summary-subtitle>\n  <sky-page-summary-status>\n    <sky-label\n      labelType=\"{{ context.status === 'Past due' ? 'danger' : 'success' }}\"\n    >\n      {{ context.status }}\n    </sky-label>\n  </sky-page-summary-status>\n  <sky-page-summary-content>\n    <h2>Constituent Summary</h2>\n    <p>\n      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis quae\n      mollitia rem obcaecati. Aspernatur vitae iusto cum corporis adipisci\n      corrupti dolore odit a impedit enim. Porro ab exercitationem quidem?\n      Maiores!\n    </p>\n  </sky-page-summary-content>\n  <sky-page-summary-key-info>\n    <sky-key-info>\n      <sky-key-info-value>\n        {{ context.latestGift }}\n      </sky-key-info-value>\n      <sky-key-info-label> Latest gift </sky-key-info-label>\n    </sky-key-info>\n  </sky-page-summary-key-info>\n</sky-page-summary>\n"
     },
     {
       "fileName": "flyout-demo-flyout.component.ts",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo-flyout.component.ts",
-      "rawContents": "import {\n  Component\n} from '@angular/core';\n\nimport {\n  FlyoutDemoContext\n} from './flyout-demo-context';\n\n@Component({\n  selector: 'app-flyout-demo-flyout',\n  templateUrl: `flyout-demo-flyout.component.html`\n})\nexport class FlyoutDemoFlyoutComponent {\n\n  constructor(\n    public context: FlyoutDemoContext\n  ) { }\n\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { FlyoutDemoContext } from './flyout-demo-context';\n\n@Component({\n  selector: 'app-flyout-demo-flyout',\n  templateUrl: `flyout-demo-flyout.component.html`,\n})\nexport class FlyoutDemoFlyoutComponent {\n  constructor(public context: FlyoutDemoContext) {}\n}\n"
     },
     {
       "fileName": "flyout-demo.component.html",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo.component.html",
-      "rawContents": "<sky-list\n  [data]=\"users\"\n>\n  <sky-list-view-grid\n    [rowHighlightedId]=\"rowHighlightedId\"\n  >\n    <sky-grid-column\n      field=\"name\"\n      heading=\"Name\"\n      [template]=\"customTemplate\"\n    >\n    </sky-grid-column>\n    <sky-grid-column\n      field=\"constituentCode\"\n      heading=\"Constituent code\"\n    >\n    </sky-grid-column>\n    <sky-grid-column\n      field=\"latestGift\"\n      heading=\"Latest gift\"\n    >\n    </sky-grid-column>\n    <sky-grid-column\n      field=\"status\"\n      heading=\"Status\"\n    >\n    </sky-grid-column>\n  </sky-list-view-grid>\n</sky-list>\n\n<ng-template\n  let-row=\"row\"\n  #customTemplate\n>\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onNameClick(row)\"\n  >\n    {{ row.name }}\n  </button>\n</ng-template>\n"
+      "rawContents": "<sky-list [data]=\"users\">\n  <sky-list-view-grid [rowHighlightedId]=\"rowHighlightedId\">\n    <sky-grid-column field=\"name\" heading=\"Name\" [template]=\"customTemplate\">\n    </sky-grid-column>\n    <sky-grid-column field=\"constituentCode\" heading=\"Constituent code\">\n    </sky-grid-column>\n    <sky-grid-column field=\"latestGift\" heading=\"Latest gift\">\n    </sky-grid-column>\n    <sky-grid-column field=\"status\" heading=\"Status\"> </sky-grid-column>\n  </sky-list-view-grid>\n</sky-list>\n\n<ng-template let-row=\"row\" #customTemplate>\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onNameClick(row)\"\n  >\n    {{ row.name }}\n  </button>\n</ng-template>\n"
     },
     {
       "fileName": "flyout-demo.component.ts",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo.component.ts",
-      "rawContents": "import {\n  Component,\n  ViewChild\n} from '@angular/core';\n\nimport {\n  SkyFlyoutConfig,\n  SkyFlyoutInstance,\n  SkyFlyoutService\n} from '@skyux/flyout';\n\nimport {\n  ListItemModel\n} from '@skyux/list-builder-common';\n\nimport {\n  SkyListViewGridComponent\n} from '@skyux/list-builder-view-grids';\n\nimport {\n  of,\n  Subject\n} from 'rxjs';\n\nimport {\n  takeUntil\n} from 'rxjs/operators';\n\nimport {\n  FlyoutDemoContext\n} from './flyout-demo-context';\n\nimport {\n  FlyoutDemoFlyoutComponent\n} from './flyout-demo-flyout.component';\n\n@Component({\n  selector: 'app-flyout-demo',\n  templateUrl: './flyout-demo.component.html'\n})\nexport class FlyoutDemoComponent {\n\n  public flyout: SkyFlyoutInstance<any>;\n\n  public rowHighlightedId: string;\n\n  public users = of([\n    { id: '1', name: 'Troy Barnes', constituentCode: 'Alumnus', latestGift: 175, status: 'Paid' },\n    { id: '2', name: 'Britta Perry', constituentCode: 'Friend', latestGift: 5, status: 'Past due' },\n    { id: '3', name: 'Pierce Hawthorne', constituentCode: 'Board Member', latestGift: 1500, status: 'Paid' },\n    { id: '4', name: 'Annie Edison', constituentCode: 'Alumnus', latestGift: 100, status: 'Paid' },\n    { id: '5', name: 'Shirley Bennett', constituentCode: 'Board Member', latestGift: 250, status: 'Paid' },\n    { id: '6', name: 'Jeff Winger', constituentCode: 'Friend', latestGift: 250, status: 'Paid' },\n    { id: '7', name: 'Abed Nadir', constituentCode: 'Major Donor', latestGift: 100000, status: 'Paid' }\n  ]);\n\n  @ViewChild(SkyListViewGridComponent)\n  public listViewGridComponent: SkyListViewGridComponent;\n\n  private listState: ListItemModel[];\n\n  private openFlyoutStream = new Subject<boolean>();\n\n  constructor(\n    private flyoutService: SkyFlyoutService\n  ) { }\n\n  public onNameClick(record: FlyoutDemoContext): void {\n    this.openRecord(record);\n  }\n\n  private openRecord(record: FlyoutDemoContext) {\n\n    // Prevent highlight from being prematurely removed.\n    this.openFlyoutStream.next(true);\n\n    const flyoutConfig: SkyFlyoutConfig = {\n      providers: [{\n        provide: FlyoutDemoContext,\n        useValue: record\n      }],\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      permalink: {\n        route: {\n          commands: ['/users', record.id],\n          extras: {\n            queryParams: {\n              envid: '123456789'\n            }\n          }\n        }\n      },\n      showIterator: true\n    };\n\n    this.flyout = this.flyoutService.open(FlyoutDemoFlyoutComponent, flyoutConfig);\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n\n    this.initIterators(record, this.flyout);\n  }\n\n  private initIterators(record: any, flyout: SkyFlyoutInstance<any>) {\n    this.rowHighlightedId = record.id;\n\n    // Remove highlights when flyout is closed.\n    flyout.closed\n      .pipe(takeUntil(this.openFlyoutStream))\n      .subscribe(() => {\n        this.rowHighlightedId = undefined;\n    });\n\n    this.listViewGridComponent.items\n      .pipe(takeUntil(this.openFlyoutStream))\n      .subscribe((s: any) => {\n        this.listState = s;\n\n        flyout.iteratorPreviousButtonDisabled = this.isFirstElementInArray(this.rowHighlightedId, this.listState);\n        flyout.iteratorNextButtonDisabled = this.isLastElementInArray(this.rowHighlightedId, this.listState);\n    });\n\n    flyout.iteratorPreviousButtonClick\n      .pipe(takeUntil(this.openFlyoutStream))\n      .subscribe(() => {\n        const previous = this.stepToItemInArray(this.listState, this.rowHighlightedId, -1);\n        this.openRecord(previous.data);\n    });\n\n    flyout.iteratorNextButtonClick\n      .pipe(takeUntil(this.openFlyoutStream))\n      .subscribe(() => {\n        const next = this.stepToItemInArray(this.listState, this.rowHighlightedId, 1);\n        this.openRecord(next.data);\n    });\n\n    flyout.iteratorPreviousButtonDisabled = this.isFirstElementInArray(this.rowHighlightedId, this.listState);\n    flyout.iteratorNextButtonDisabled = this.isLastElementInArray(this.rowHighlightedId, this.listState);\n  }\n\n  private stepToItemInArray(array: Array<any>, currentId: string, step: number) {\n    for (let i = 0; i < array.length; i++) {\n      if (array[i].id === currentId) {\n        return array[i + step];\n      }\n    }\n  }\n\n  private isFirstElementInArray(id: any, array: any[]) {\n    const element = array.find(x => x.id === id);\n    if (array[0] === element) {\n      return true;\n    }\n    return false;\n  }\n\n  private isLastElementInArray(id: any, array: any[]) {\n    const element = array.find(x => x.id === id);\n    if (array[array.length - 1] === element) {\n      return true;\n    }\n    return false;\n  }\n}\n"
+      "rawContents": "import { Component, ViewChild } from '@angular/core';\n\nimport {\n  SkyFlyoutConfig,\n  SkyFlyoutInstance,\n  SkyFlyoutService,\n} from '@skyux/flyout';\n\nimport { ListItemModel } from '@skyux/list-builder-common';\n\nimport { SkyListViewGridComponent } from '@skyux/list-builder-view-grids';\n\nimport { of, Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { FlyoutDemoContext } from './flyout-demo-context';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n  selector: 'app-flyout-demo',\n  templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n  public flyout: SkyFlyoutInstance<any>;\n\n  public rowHighlightedId: string;\n\n  public users = of([\n    {\n      id: '1',\n      name: 'Troy Barnes',\n      constituentCode: 'Alumnus',\n      latestGift: 175,\n      status: 'Paid',\n    },\n    {\n      id: '2',\n      name: 'Britta Perry',\n      constituentCode: 'Friend',\n      latestGift: 5,\n      status: 'Past due',\n    },\n    {\n      id: '3',\n      name: 'Pierce Hawthorne',\n      constituentCode: 'Board Member',\n      latestGift: 1500,\n      status: 'Paid',\n    },\n    {\n      id: '4',\n      name: 'Annie Edison',\n      constituentCode: 'Alumnus',\n      latestGift: 100,\n      status: 'Paid',\n    },\n    {\n      id: '5',\n      name: 'Shirley Bennett',\n      constituentCode: 'Board Member',\n      latestGift: 250,\n      status: 'Paid',\n    },\n    {\n      id: '6',\n      name: 'Jeff Winger',\n      constituentCode: 'Friend',\n      latestGift: 250,\n      status: 'Paid',\n    },\n    {\n      id: '7',\n      name: 'Abed Nadir',\n      constituentCode: 'Major Donor',\n      latestGift: 100000,\n      status: 'Paid',\n    },\n  ]);\n\n  @ViewChild(SkyListViewGridComponent)\n  public listViewGridComponent: SkyListViewGridComponent;\n\n  private listState: ListItemModel[];\n\n  private openFlyoutStream = new Subject<boolean>();\n\n  constructor(private flyoutService: SkyFlyoutService) {}\n\n  public onNameClick(record: FlyoutDemoContext): void {\n    this.openRecord(record);\n  }\n\n  private openRecord(record: FlyoutDemoContext) {\n    // Prevent highlight from being prematurely removed.\n    this.openFlyoutStream.next(true);\n\n    const flyoutConfig: SkyFlyoutConfig = {\n      providers: [\n        {\n          provide: FlyoutDemoContext,\n          useValue: record,\n        },\n      ],\n      ariaLabelledBy: 'flyout-title',\n      ariaRole: 'dialog',\n      permalink: {\n        route: {\n          commands: ['/users', record.id],\n          extras: {\n            queryParams: {\n              envid: '123456789',\n            },\n          },\n        },\n      },\n      showIterator: true,\n    };\n\n    this.flyout = this.flyoutService.open(\n      FlyoutDemoFlyoutComponent,\n      flyoutConfig\n    );\n\n    this.flyout.closed.subscribe(() => {\n      this.flyout = undefined;\n    });\n\n    this.initIterators(record, this.flyout);\n  }\n\n  private initIterators(record: any, flyout: SkyFlyoutInstance<any>) {\n    this.rowHighlightedId = record.id;\n\n    // Remove highlights when flyout is closed.\n    flyout.closed.pipe(takeUntil(this.openFlyoutStream)).subscribe(() => {\n      this.rowHighlightedId = undefined;\n    });\n\n    this.listViewGridComponent.items\n      .pipe(takeUntil(this.openFlyoutStream))\n      .subscribe((s: any) => {\n        this.listState = s;\n\n        flyout.iteratorPreviousButtonDisabled = this.isFirstElementInArray(\n          this.rowHighlightedId,\n          this.listState\n        );\n        flyout.iteratorNextButtonDisabled = this.isLastElementInArray(\n          this.rowHighlightedId,\n          this.listState\n        );\n      });\n\n    flyout.iteratorPreviousButtonClick\n      .pipe(takeUntil(this.openFlyoutStream))\n      .subscribe(() => {\n        const previous = this.stepToItemInArray(\n          this.listState,\n          this.rowHighlightedId,\n          -1\n        );\n        this.openRecord(previous.data);\n      });\n\n    flyout.iteratorNextButtonClick\n      .pipe(takeUntil(this.openFlyoutStream))\n      .subscribe(() => {\n        const next = this.stepToItemInArray(\n          this.listState,\n          this.rowHighlightedId,\n          1\n        );\n        this.openRecord(next.data);\n      });\n\n    flyout.iteratorPreviousButtonDisabled = this.isFirstElementInArray(\n      this.rowHighlightedId,\n      this.listState\n    );\n    flyout.iteratorNextButtonDisabled = this.isLastElementInArray(\n      this.rowHighlightedId,\n      this.listState\n    );\n  }\n\n  private stepToItemInArray(\n    array: Array<any>,\n    currentId: string,\n    step: number\n  ) {\n    for (let i = 0; i < array.length; i++) {\n      if (array[i].id === currentId) {\n        return array[i + step];\n      }\n    }\n  }\n\n  private isFirstElementInArray(id: any, array: any[]) {\n    const element = array.find((x) => x.id === id);\n    if (array[0] === element) {\n      return true;\n    }\n    return false;\n  }\n\n  private isLastElementInArray(id: any, array: any[]) {\n    const element = array.find((x) => x.id === id);\n    if (array[array.length - 1] === element) {\n      return true;\n    }\n    return false;\n  }\n}\n"
     },
     {
       "fileName": "flyout-demo.module.ts",
       "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo.module.ts",
-      "rawContents": "import {\n  NgModule\n} from '@angular/core';\n\nimport {\n  CommonModule\n} from '@angular/common';\n\nimport {\n  SkyAvatarModule\n} from '@skyux/avatar';\n\nimport {\n  SkyFlyoutModule\n} from '@skyux/flyout';\n\nimport {\n  SkyKeyInfoModule,\n  SkyLabelModule\n} from '@skyux/indicators';\n\nimport {\n  SkyPageSummaryModule\n} from '@skyux/layout';\n\nimport {\n  SkyListModule\n} from '@skyux/list-builder';\n\nimport {\n  SkyListViewGridModule\n} from '@skyux/list-builder-view-grids';\n\nimport {\n  FlyoutDemoComponent\n} from './flyout-demo.component';\n\nimport {\n  FlyoutDemoFlyoutComponent\n} from './flyout-demo-flyout.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyAvatarModule,\n    SkyFlyoutModule,\n    SkyListModule,\n    SkyKeyInfoModule,\n    SkyLabelModule,\n    SkyListViewGridModule,\n    SkyPageSummaryModule\n  ],\n  declarations: [\n    FlyoutDemoComponent,\n    FlyoutDemoFlyoutComponent\n  ],\n  entryComponents: [\n    FlyoutDemoFlyoutComponent\n  ],\n  exports: [\n    FlyoutDemoComponent\n  ]\n})\nexport class AutocompleteDemoModule { }\n"
+      "rawContents": "import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { SkyAvatarModule } from '@skyux/avatar';\n\nimport { SkyFlyoutModule } from '@skyux/flyout';\n\nimport { SkyKeyInfoModule, SkyLabelModule } from '@skyux/indicators';\n\nimport { SkyPageSummaryModule } from '@skyux/layout';\n\nimport { SkyListModule } from '@skyux/list-builder';\n\nimport { SkyListViewGridModule } from '@skyux/list-builder-view-grids';\n\nimport { FlyoutDemoComponent } from './flyout-demo.component';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    SkyAvatarModule,\n    SkyFlyoutModule,\n    SkyListModule,\n    SkyKeyInfoModule,\n    SkyLabelModule,\n    SkyListViewGridModule,\n    SkyPageSummaryModule,\n  ],\n  declarations: [FlyoutDemoComponent, FlyoutDemoFlyoutComponent],\n  entryComponents: [FlyoutDemoFlyoutComponent],\n  exports: [FlyoutDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
     }
   ]
 }