@skyux/lookup 6.0.0-beta.0 → 6.0.0-beta.11

package/documentation.json

@@ -1432,7 +1432,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 163,
+                "line": 161,
                 "character": 2
               }
             ],
@@ -1508,7 +1508,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 50,
+                "line": 48,
                 "character": 13
               }
             ],
@@ -1581,7 +1581,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 82,
+                "line": 80,
                 "character": 13
               }
             ],
@@ -1630,7 +1630,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 73,
+                "line": 71,
                 "character": 13
               }
             ],
@@ -1703,7 +1703,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 86,
+                "line": 84,
                 "character": 13
               }
             ],
@@ -1758,7 +1758,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 102,
+                "line": 100,
                 "character": 13
               }
             ],
@@ -1795,7 +1795,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 106,
+                "line": 104,
                 "character": 13
               }
             ],
@@ -1850,7 +1850,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 114,
+                "line": 112,
                 "character": 13
               }
             ],
@@ -1887,7 +1887,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 118,
+                "line": 116,
                 "character": 13
               }
             ],
@@ -1942,7 +1942,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 210,
+                "line": 208,
                 "character": 9
               }
             ],
@@ -1979,7 +1979,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 165,
+                "line": 163,
                 "character": 9
               }
             ],
@@ -2016,7 +2016,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 277,
+                "line": 275,
                 "character": 9
               }
             ],
@@ -2058,7 +2058,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 279,
+                "line": 277,
                 "character": 9
               }
             ],
@@ -2087,7 +2087,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 282,
+                "line": 280,
                 "character": 9
               }
             ],
@@ -2116,7 +2116,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 224,
+                "line": 222,
                 "character": 9
               }
             ],
@@ -2198,7 +2198,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 228,
+                "line": 226,
                 "character": 9
               }
             ],
@@ -2267,7 +2267,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 232,
+                "line": 230,
                 "character": 9
               }
             ],
@@ -2336,7 +2336,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 236,
+                "line": 234,
                 "character": 9
               }
             ],
@@ -2365,7 +2365,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 260,
+                "line": 258,
                 "character": 9
               }
             ],
@@ -2407,7 +2407,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 248,
+                "line": 246,
                 "character": 9
               }
             ],
@@ -2457,7 +2457,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 252,
+                "line": 250,
                 "character": 9
               }
             ],
@@ -2511,7 +2511,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-                "line": 220,
+                "line": 218,
                 "character": 9
               }
             ],
@@ -2596,7 +2596,7 @@
         "sources": [
           {
             "fileName": "projects/lookup/src/modules/autocomplete/autocomplete-input.directive.ts",
-            "line": 42,
+            "line": 40,
             "character": 13
           }
         ],
@@ -2657,7 +2657,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 442,
+                "line": 444,
                 "character": 2
               }
             ],
@@ -3539,7 +3539,7 @@
                   "typeArguments": [
                     {
                       "type": "intrinsic",
-                      "name": "any"
+                      "name": "unknown"
                     }
                   ],
                   "qualifiedName": "TemplateRef",
@@ -3570,7 +3570,7 @@
                       "typeArguments": [
                         {
                           "type": "intrinsic",
-                          "name": "any"
+                          "name": "unknown"
                         }
                       ],
                       "qualifiedName": "TemplateRef",
@@ -3869,7 +3869,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 481,
+                "line": 483,
                 "character": 9
               }
             ],
@@ -3898,7 +3898,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 487,
+                "line": 489,
                 "character": 9
               }
             ],
@@ -3942,7 +3942,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 596,
+                "line": 597,
                 "character": 9
               }
             ],
@@ -3986,7 +3986,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 568,
+                "line": 569,
                 "character": 9
               }
             ],
@@ -4015,7 +4015,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 455,
+                "line": 457,
                 "character": 9
               }
             ],
@@ -4052,7 +4052,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 467,
+                "line": 469,
                 "character": 9
               }
             ],
@@ -4089,7 +4089,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 471,
+                "line": 473,
                 "character": 9
               }
             ],
@@ -4126,7 +4126,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 574,
+                "line": 575,
                 "character": 9
               }
             ],
@@ -4181,7 +4181,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/autocomplete/autocomplete.component.ts",
-                "line": 587,
+                "line": 588,
                 "character": 9
               }
             ],
@@ -4329,7 +4329,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 261,
+                "line": 259,
                 "character": 2
               }
             ],
@@ -4488,7 +4488,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 67,
+                "line": 65,
                 "character": 9
               }
             ],
@@ -4508,7 +4508,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 160,
+                "line": 158,
                 "character": 9
               }
             ],
@@ -4546,7 +4546,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 169,
+                "line": 167,
                 "character": 9
               }
             ],
@@ -4567,7 +4567,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 162,
+                "line": 160,
                 "character": 9
               }
             ],
@@ -4589,7 +4589,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 223,
+                "line": 221,
                 "character": 9
               }
             ],
@@ -4631,7 +4631,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 118,
+                "line": 116,
                 "character": 9
               }
             ],
@@ -4651,7 +4651,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 225,
+                "line": 223,
                 "character": 9
               }
             ],
@@ -4671,7 +4671,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 164,
+                "line": 162,
                 "character": 9
               }
             ],
@@ -4692,7 +4692,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 166,
+                "line": 164,
                 "character": 9
               }
             ],
@@ -4728,7 +4728,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 158,
+                "line": 156,
                 "character": 9
               }
             ],
@@ -4770,7 +4770,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 76,
+                "line": 74,
                 "character": 13
               }
             ],
@@ -4855,7 +4855,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 97,
+                "line": 95,
                 "character": 13
               }
             ],
@@ -4940,7 +4940,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 125,
+                "line": 123,
                 "character": 13
               }
             ],
@@ -5013,7 +5013,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 171,
+                "line": 169,
                 "character": 13
               }
             ],
@@ -5082,7 +5082,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 140,
+                "line": 138,
                 "character": 13
               }
             ],
@@ -5149,7 +5149,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 316,
+                "line": 313,
                 "character": 9
               }
             ],
@@ -5186,7 +5186,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 366,
+                "line": 363,
                 "character": 9
               }
             ],
@@ -5229,7 +5229,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 369,
+                "line": 366,
                 "character": 9
               }
             ],
@@ -5258,7 +5258,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 371,
+                "line": 368,
                 "character": 9
               }
             ],
@@ -5341,7 +5341,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 375,
+                "line": 372,
                 "character": 9
               }
             ],
@@ -5410,7 +5410,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 380,
+                "line": 377,
                 "character": 9
               }
             ],
@@ -5460,7 +5460,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 384,
+                "line": 381,
                 "character": 9
               }
             ],
@@ -5514,7 +5514,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-                "line": 398,
+                "line": 395,
                 "character": 9
               }
             ],
@@ -5609,7 +5609,7 @@
         "sources": [
           {
             "fileName": "projects/lookup/src/modules/country-field/country-field.component.ts",
-            "line": 59,
+            "line": 57,
             "character": 13
           }
         ],
@@ -6386,7 +6386,7 @@
               "typeArguments": [
                 {
                   "type": "intrinsic",
-                  "name": "any"
+                  "name": "unknown"
                 }
               ],
               "qualifiedName": "TemplateRef",
@@ -7000,7 +7000,7 @@
                   "tags": [
                     {
                       "tag": "default",
-                      "text": "\"mulitple\"\n"
+                      "text": "\"multiple\"\n"
                     }
                   ]
                 },
@@ -7023,7 +7023,7 @@
                   "tags": [
                     {
                       "tag": "default",
-                      "text": "\"mulitple\"\n"
+                      "text": "\"multiple\"\n"
                     }
                   ]
                 },
@@ -7210,7 +7210,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 432,
+                "line": 431,
                 "character": 9
               }
             ],
@@ -7239,7 +7239,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 441,
+                "line": 440,
                 "character": 9
               }
             ],
@@ -7294,7 +7294,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 463,
+                "line": 462,
                 "character": 9
               }
             ],
@@ -7521,7 +7521,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 408,
+                "line": 407,
                 "character": 9
               }
             ],
@@ -7566,7 +7566,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 620,
+                "line": 619,
                 "character": 9
               }
             ],
@@ -7609,7 +7609,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 489,
+                "line": 488,
                 "character": 9
               }
             ],
@@ -7638,7 +7638,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 509,
+                "line": 508,
                 "character": 9
               }
             ],
@@ -7798,7 +7798,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 410,
+                "line": 409,
                 "character": 9
               }
             ],
@@ -7827,7 +7827,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 574,
+                "line": 573,
                 "character": 9
               }
             ],
@@ -7869,7 +7869,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 412,
+                "line": 411,
                 "character": 9
               }
             ],
@@ -7951,7 +7951,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 416,
+                "line": 415,
                 "character": 9
               }
             ],
@@ -8020,7 +8020,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 421,
+                "line": 420,
                 "character": 9
               }
             ],
@@ -8070,7 +8070,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/lookup/lookup.component.ts",
-                "line": 401,
+                "line": 400,
                 "character": 9
               }
             ],
@@ -8984,7 +8984,7 @@
               "typeArguments": [
                 {
                   "type": "intrinsic",
-                  "name": "any"
+                  "name": "unknown"
                 }
               ],
               "qualifiedName": "TemplateRef",
@@ -9332,7 +9332,7 @@
     {
       "fileName": "autocomplete-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/autocomplete-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div class=\"sky-margin-stacked-default\">\n    The following field:<br />\n    <ul>\n      <li>utilizes a custom search result template,</li>\n      <li>searches against the name and description properties,</li>\n      <li>limits the search results to two,</li>\n      <li>runs the search if the query is at least three characters long,</li>\n      <li>and fires an event when a selection is made.</li>\n    </ul>\n  </div>\n\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"planetInput.id\">\n      Farthest planet from the sun\n    </label>\n    <sky-autocomplete\n      [data]=\"planets\"\n      [propertiesToSearch]=\"['name', 'description']\"\n      [searchResultsLimit]=\"2\"\n      [searchResultTemplate]=\"planetSearchResultTemplate\"\n      [searchTextMinimumCharacters]=\"3\"\n      (selectionChange)=\"onPlanetSelection($event)\"\n    >\n      <input\n        formControlName=\"farthestPlanet\"\n        skyAutocomplete\n        skyId\n        type=\"text\"\n        #planetInput\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n\n<ng-template let-item=\"item\" #planetSearchResultTemplate>\n  <strong>\n    {{ item.name }}\n  </strong>\n  <br />\n  {{ item.description }}\n</ng-template>\n"
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div class=\"sky-margin-stacked-lg\">\n    The following field:<br />\n    <ul>\n      <li>utilizes a custom search result template,</li>\n      <li>searches against the name and description properties,</li>\n      <li>limits the search results to two,</li>\n      <li>runs the search if the query is at least three characters long,</li>\n      <li>and fires an event when a selection is made.</li>\n    </ul>\n  </div>\n\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"planetInput.id\">\n      Farthest planet from the sun\n    </label>\n    <sky-autocomplete\n      [data]=\"planets\"\n      [propertiesToSearch]=\"['name', 'description']\"\n      [searchResultsLimit]=\"2\"\n      [searchResultTemplate]=\"planetSearchResultTemplate\"\n      [searchTextMinimumCharacters]=\"3\"\n      (selectionChange)=\"onPlanetSelection($event)\"\n    >\n      <input\n        formControlName=\"farthestPlanet\"\n        skyAutocomplete\n        skyId\n        type=\"text\"\n        #planetInput\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n\n<ng-template let-item=\"item\" #planetSearchResultTemplate>\n  <strong>\n    {{ item.name }}\n  </strong>\n  <br />\n  {{ item.description }}\n</ng-template>\n"
     },
     {
       "fileName": "autocomplete-demo.component.ts",
@@ -9347,7 +9347,7 @@
     {
       "fileName": "autocomplete-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"favoriteColorInput.id\">\n      Favorite color\n    </label>\n    <sky-autocomplete [data]=\"colors\">\n      <input\n        formControlName=\"favoriteColor\"\n        id=\"my-autocomplete-reactive-basic\"\n        type=\"text\"\n        skyAutocomplete\n        skyId\n        #favoriteColorInput\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n"
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"favoriteColorInput.id\">\n      Favorite color\n    </label>\n    <sky-autocomplete [data]=\"colors\">\n      <input\n        formControlName=\"favoriteColor\"\n        id=\"my-autocomplete-reactive-basic\"\n        type=\"text\"\n        skyAutocomplete\n        skyId\n        #favoriteColorInput\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n"
     },
     {
       "fileName": "autocomplete-demo.component.ts",
@@ -9362,7 +9362,7 @@
     {
       "fileName": "autocomplete-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <p>\n    The following field has a preselected value and utilizes a custom search\n    function, as well as a custom template for the search results.\n  </p>\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"largestOceanInput.id\">\n      Largest ocean\n    </label>\n    <sky-autocomplete\n      descriptorProperty=\"title\"\n      [data]=\"oceans\"\n      [search]=\"getOceanSearchFunction()\"\n      [searchResultTemplate]=\"oceanSearchResultTemplate\"\n    >\n      <input\n        formControlName=\"largestOcean\"\n        type=\"text\"\n        skyAutocomplete\n        skyId\n        #largestOceanInput=\"skyId\"\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n\n<ng-template let-item=\"item\" #oceanSearchResultTemplate>\n  <sky-icon icon=\"long-arrow-right\"></sky-icon>\n  {{ item.title }} &bull; ID {{ item.id }}\n</ng-template>\n"
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <p>\n    The following field has a preselected value and utilizes a custom search\n    function, as well as a custom template for the search results.\n  </p>\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"largestOceanInput.id\">\n      Largest ocean\n    </label>\n    <sky-autocomplete\n      descriptorProperty=\"title\"\n      [data]=\"oceans\"\n      [search]=\"getOceanSearchFunction()\"\n      [searchResultTemplate]=\"oceanSearchResultTemplate\"\n    >\n      <input\n        formControlName=\"largestOcean\"\n        type=\"text\"\n        skyAutocomplete\n        skyId\n        #largestOceanInput=\"skyId\"\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n\n<ng-template let-item=\"item\" #oceanSearchResultTemplate>\n  <sky-icon icon=\"long-arrow-right\"></sky-icon>\n  {{ item.title }} &bull; ID {{ item.id }}\n</ng-template>\n"
     },
     {
       "fileName": "autocomplete-demo.component.ts",
@@ -9377,7 +9377,7 @@
     {
       "fileName": "autocomplete-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <p>\n    The following field provides a custom function that filters the data before\n    every search attempt.\n  </p>\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"favoriteColorInput.id\">\n      Color (\"Red\" is not available)\n    </label>\n    <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n      <input\n        formControlName=\"favoriteColor\"\n        skyAutocomplete\n        skyId\n        type=\"text\"\n        #favoriteColorInput=\"skyId\"\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n"
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <p>\n    The following field provides a custom function that filters the data before\n    every search attempt.\n  </p>\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"favoriteColorInput.id\">\n      Color (\"Red\" is not available)\n    </label>\n    <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n      <input\n        formControlName=\"favoriteColor\"\n        skyAutocomplete\n        skyId\n        type=\"text\"\n        #favoriteColorInput=\"skyId\"\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n"
     },
     {
       "fileName": "autocomplete-demo.component.ts",
@@ -9437,7 +9437,7 @@
     {
       "fileName": "lookup-custom-picker-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo.component.html",
-      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n        [showMoreConfig]=\"showMoreConfig\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n        [showMoreConfig]=\"showMoreConfig\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
     },
     {
       "fileName": "lookup-custom-picker-demo.component.scss",
@@ -9447,7 +9447,7 @@
     {
       "fileName": "lookup-custom-picker-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo.component.ts",
-      "rawContents": "import { ChangeDetectorRef, Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n  SkyLookupShowMoreCustomPickerContext,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { LookupCustomPickerDemoModalComponent } from './lookup-custom-picker-demo-modal.component';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-custom-picker-demo.component.html',\n  styleUrls: ['./lookup-custom-picker-demo.component.scss'],\n})\nexport class LookupCustomPickerDemoComponent implements OnInit {\n  public showMoreConfig: SkyLookupShowMoreConfig;\n\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private formBuilder: FormBuilder,\n    private modalService: SkyModalService\n  ) {\n    this.showMoreConfig = {\n      customPicker: {\n        open: (context: SkyLookupShowMoreCustomPickerContext) => {\n          const instance = this.modalService.open(\n            LookupCustomPickerDemoModalComponent,\n            {\n              providers: [\n                {\n                  provide: SkyLookupShowMoreCustomPickerContext,\n                  useValue: context,\n                },\n              ],\n            }\n          );\n\n          instance.closed.subscribe((closeArgs: SkyModalCloseArgs) => {\n            if (closeArgs.reason === 'save') {\n              if (closeArgs.data) {\n                this.myForm.setValue({\n                  names: [this.people[this.people.length - 1]],\n                });\n                this.changeDetector.markForCheck();\n              }\n            }\n          });\n        },\n      },\n    };\n  }\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
+      "rawContents": "import { ChangeDetectorRef, Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n  SkyLookupShowMoreCustomPickerContext,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { LookupCustomPickerDemoModalComponent } from './lookup-custom-picker-demo-modal.component';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-custom-picker-demo.component.html',\n  styleUrls: ['./lookup-custom-picker-demo.component.scss'],\n})\nexport class LookupCustomPickerDemoComponent implements OnInit {\n  public showMoreConfig: SkyLookupShowMoreConfig;\n\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private formBuilder: FormBuilder,\n    private modalService: SkyModalService\n  ) {\n    this.showMoreConfig = {\n      customPicker: {\n        open: (context: SkyLookupShowMoreCustomPickerContext) => {\n          const instance = this.modalService.open(\n            LookupCustomPickerDemoModalComponent,\n            {\n              providers: [\n                {\n                  provide: SkyLookupShowMoreCustomPickerContext,\n                  useValue: context,\n                },\n              ],\n            }\n          );\n\n          instance.closed.subscribe((closeArgs: SkyModalCloseArgs) => {\n            if (closeArgs.reason === 'save') {\n              if (closeArgs.data) {\n                this.myForm.setValue({\n                  names: [this.people[this.people.length - 1]],\n                });\n                this.changeDetector.markForCheck();\n              }\n            }\n          });\n        },\n      },\n    };\n  }\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-custom-picker-demo.module.ts",
@@ -9457,7 +9457,7 @@
     {
       "fileName": "lookup-multiple-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-demo.component.html",
-      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
     },
     {
       "fileName": "lookup-multiple-demo.component.scss",
@@ -9467,7 +9467,7 @@
     {
       "fileName": "lookup-multiple-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-multiple-demo.component.html',\n  styleUrls: ['./lookup-multiple-demo.component.scss'],\n})\nexport class LookupMultipleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-multiple-demo.component.html',\n  styleUrls: ['./lookup-multiple-demo.component.scss'],\n})\nexport class LookupMultipleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-multiple-demo.module.ts",
@@ -9477,7 +9477,7 @@
     {
       "fileName": "lookup-result-templates-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-result-templates-demo.component.html",
-      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [searchResultTemplate]=\"dropdownItemTemplate\"\n        [showAddButton]=\"true\"\n        [showMoreConfig]=\"showMoreConfig\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template let-item=\"item\" #dropdownItemTemplate>\n  <strong>{{ item.name }}</strong\n  ><br />\n  {{ item.formal }}\n</ng-template>\n<ng-template let-item=\"item\" #modalItemTemplate>\n  {{ item.name }}<br />\n  <i>{{ item.formal }}</i>\n</ng-template>\n"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [searchResultTemplate]=\"dropdownItemTemplate\"\n        [showAddButton]=\"true\"\n        [showMoreConfig]=\"showMoreConfig\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template let-item=\"item\" #dropdownItemTemplate>\n  <strong>{{ item.name }}</strong\n  ><br />\n  {{ item.formal }}\n</ng-template>\n<ng-template let-item=\"item\" #modalItemTemplate>\n  {{ item.name }}<br />\n  <i>{{ item.formal }}</i>\n</ng-template>\n"
     },
     {
       "fileName": "lookup-result-templates-demo.component.scss",
@@ -9487,7 +9487,7 @@
     {
       "fileName": "lookup-result-templates-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-result-templates-demo.component.ts",
-      "rawContents": "import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-result-templates-demo.component.html',\n  styleUrls: ['./lookup-result-templates-demo.component.scss'],\n})\nexport class LookupResultTemplatesDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    {\n      name: 'Abed',\n      formal: 'Mr. Nadir',\n    },\n    {\n      name: 'Alex',\n      formal: 'Mr. Osbourne',\n    },\n    {\n      name: 'Ben',\n      formal: 'Mr. Chang',\n    },\n    {\n      name: 'Britta',\n      formal: 'Ms. Perry',\n    },\n    {\n      name: 'Buzz',\n      formal: 'Mr. Hickey',\n    },\n    {\n      name: 'Craig',\n      formal: 'Mr. Pelton',\n    },\n    {\n      name: 'Elroy',\n      formal: 'Mr. Patashnik',\n    },\n    {\n      name: 'Garrett',\n      formal: 'Mr. Lambert',\n    },\n    {\n      name: 'Ian',\n      formal: 'Mr. Duncan',\n    },\n    {\n      name: 'Jeff',\n      formal: 'Mr. Winger',\n    },\n    {\n      name: 'Leonard',\n      formal: 'Mr. Rodriguez',\n    },\n    {\n      name: 'Neil',\n      formal: 'Mr. Neil',\n    },\n    {\n      name: 'Pierce',\n      formal: 'Mr. Hawthorne',\n    },\n    {\n      name: 'Preston',\n      formal: 'Mr. Koogler',\n    },\n    {\n      name: 'Rachel',\n      formal: 'Ms. Rachel',\n    },\n    {\n      name: 'Shirley',\n      formal: 'Ms. Bennett',\n    },\n    {\n      name: 'Todd',\n      formal: 'Mr. Jacobson',\n    },\n    {\n      name: 'Troy',\n      formal: 'Mr. Barnes',\n    },\n    {\n      name: 'Vaughn',\n      formal: 'Mr. Miller',\n    },\n    {\n      name: 'Vicki',\n      formal: 'Ms. Jenkins',\n    },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  public showMoreConfig: SkyLookupShowMoreConfig = {\n    nativePickerConfig: {},\n  };\n\n  @ViewChild('modalItemTemplate')\n  public set modalItemTempalte(template: TemplateRef<any>) {\n    this.showMoreConfig.nativePickerConfig.itemTemplate = template;\n  }\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-result-templates-demo.component.html',\n  styleUrls: ['./lookup-result-templates-demo.component.scss'],\n})\nexport class LookupResultTemplatesDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    {\n      name: 'Abed',\n      formal: 'Mr. Nadir',\n    },\n    {\n      name: 'Alex',\n      formal: 'Mr. Osbourne',\n    },\n    {\n      name: 'Ben',\n      formal: 'Mr. Chang',\n    },\n    {\n      name: 'Britta',\n      formal: 'Ms. Perry',\n    },\n    {\n      name: 'Buzz',\n      formal: 'Mr. Hickey',\n    },\n    {\n      name: 'Craig',\n      formal: 'Mr. Pelton',\n    },\n    {\n      name: 'Elroy',\n      formal: 'Mr. Patashnik',\n    },\n    {\n      name: 'Garrett',\n      formal: 'Mr. Lambert',\n    },\n    {\n      name: 'Ian',\n      formal: 'Mr. Duncan',\n    },\n    {\n      name: 'Jeff',\n      formal: 'Mr. Winger',\n    },\n    {\n      name: 'Leonard',\n      formal: 'Mr. Rodriguez',\n    },\n    {\n      name: 'Neil',\n      formal: 'Mr. Neil',\n    },\n    {\n      name: 'Pierce',\n      formal: 'Mr. Hawthorne',\n    },\n    {\n      name: 'Preston',\n      formal: 'Mr. Koogler',\n    },\n    {\n      name: 'Rachel',\n      formal: 'Ms. Rachel',\n    },\n    {\n      name: 'Shirley',\n      formal: 'Ms. Bennett',\n    },\n    {\n      name: 'Todd',\n      formal: 'Mr. Jacobson',\n    },\n    {\n      name: 'Troy',\n      formal: 'Mr. Barnes',\n    },\n    {\n      name: 'Vaughn',\n      formal: 'Mr. Miller',\n    },\n    {\n      name: 'Vicki',\n      formal: 'Ms. Jenkins',\n    },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  public showMoreConfig: SkyLookupShowMoreConfig = {\n    nativePickerConfig: {},\n  };\n\n  @ViewChild('modalItemTemplate')\n  public set modalItemTempalte(template: TemplateRef<unknown>) {\n    this.showMoreConfig.nativePickerConfig.itemTemplate = template;\n  }\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-result-templates-demo.module.ts",
@@ -9497,7 +9497,7 @@
     {
       "fileName": "lookup-single-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-single-demo.component.html",
-      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #nameLabel=\"skyId\">\n        Favorite name\n      </label>\n      <sky-lookup\n        formControlName=\"name\"\n        selectMode=\"single\"\n        [ariaLabelledBy]=\"nameLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #nameLabel=\"skyId\">\n        Favorite name\n      </label>\n      <sky-lookup\n        formControlName=\"name\"\n        selectMode=\"single\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"nameLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
     },
     {
       "fileName": "lookup-single-demo.component.scss",
@@ -9507,7 +9507,7 @@
     {
       "fileName": "lookup-single-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-single-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-single-select-lookup-demo',\n  templateUrl: './lookup-single-demo.component.html',\n  styleUrls: ['./lookup-single-demo.component.scss'],\n})\nexport class LookupSingleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public name: any[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const name: any[] = this.myForm.controls.name.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = name.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      name: new FormControl(this.name),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-single-select-lookup-demo',\n  templateUrl: './lookup-single-demo.component.html',\n  styleUrls: ['./lookup-single-demo.component.scss'],\n})\nexport class LookupSingleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public name: any[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const name: any[] = this.myForm.controls.name.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = name.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      name: new FormControl(this.name),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-single-demo.module.ts",