@skyux/lookup 6.23.0 → 6.23.2

package/documentation.json

@@ -25,7 +25,8 @@
     "SkyAutocompleteSearchFunction": "type-alias-skyautocompletesearchfunction",
     "SkyAutocompleteSearchFunctionFilter": "type-alias-skyautocompletesearchfunctionfilter",
     "SkyAutocompleteSearchFunctionResponse": "type-alias-skyautocompletesearchfunctionresponse",
-    "SkyLookupSelectModeType": "type-alias-skylookupselectmodetype"
+    "SkyLookupSelectModeType": "type-alias-skylookupselectmodetype",
+    "SkyLookupHarness": "class-skylookupharness"
   },
   "typedoc": {
     "id": 0,
@@ -9393,6 +9394,1069 @@
             }
           ]
         }
+      },
+      {
+        "id": 872,
+        "name": "SkyLookupHarness",
+        "kind": 128,
+        "kindString": "Class",
+        "flags": {},
+        "comment": {
+          "shortText": "Harness for interacting with a lookup component in tests."
+        },
+        "children": [
+          {
+            "id": 905,
+            "name": "blur",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 36,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 906,
+                "name": "blur",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Blurs the autocomplete input."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "void"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.blur"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.blur"
+            }
+          },
+          {
+            "id": 907,
+            "name": "clear",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 43,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 908,
+                "name": "clear",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Clears the input value."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "void"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.clear"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.clear"
+            }
+          },
+          {
+            "id": 889,
+            "name": "clickAddButton",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/lookup/lookup-harness.ts",
+                "line": 43,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 890,
+                "name": "clickAddButton",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Clicks the \"Add\" button on the search results panel."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "void"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "overwrites": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.clickAddButton"
+                }
+              }
+            ],
+            "overwrites": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.clickAddButton"
+            }
+          },
+          {
+            "id": 891,
+            "name": "clickShowMoreButton",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/lookup/lookup-harness.ts",
+                "line": 51,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 892,
+                "name": "clickShowMoreButton",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Clicks the \"Show more\" button on the search results panel."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "void"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "overwrites": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.clickShowMoreButton"
+                }
+              }
+            ],
+            "overwrites": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.clickShowMoreButton"
+            }
+          },
+          {
+            "id": 893,
+            "name": "dismissSelections",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/lookup/lookup-harness.ts",
+                "line": 59,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 894,
+                "name": "dismissSelections",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Dismisses the selections made with a multiselect lookup."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "void"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                }
+              }
+            ]
+          },
+          {
+            "id": 909,
+            "name": "enterText",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 50,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 910,
+                "name": "enterText",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Enters text into the autocomplete input."
+                },
+                "parameters": [
+                  {
+                    "id": 911,
+                    "name": "value",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {},
+                    "type": {
+                      "type": "intrinsic",
+                      "name": "string"
+                    }
+                  }
+                ],
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "void"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.enterText"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.enterText"
+            }
+          },
+          {
+            "id": 912,
+            "name": "focus",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 57,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 913,
+                "name": "focus",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Focuses the autocomplete input."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "void"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.focus"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.focus"
+            }
+          },
+          {
+            "id": 914,
+            "name": "getSearchResults",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 64,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 915,
+                "name": "getSearchResults",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Returns search result harnesses."
+                },
+                "parameters": [
+                  {
+                    "id": 916,
+                    "name": "filters",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {
+                      "isOptional": true
+                    },
+                    "type": {
+                      "type": "reference",
+                      "name": "SkyAutocompleteSearchResultHarnessFilters"
+                    }
+                  }
+                ],
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "array",
+                      "elementType": {
+                        "type": "reference",
+                        "name": "SkyAutocompleteSearchResultHarness"
+                      }
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.getSearchResults"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.getSearchResults"
+            }
+          },
+          {
+            "id": 917,
+            "name": "getSearchResultsText",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 98,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 918,
+                "name": "getSearchResultsText",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Returns the text content for each search result."
+                },
+                "parameters": [
+                  {
+                    "id": 919,
+                    "name": "filters",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {
+                      "isOptional": true
+                    },
+                    "type": {
+                      "type": "reference",
+                      "name": "SkyAutocompleteSearchResultHarnessFilters"
+                    }
+                  }
+                ],
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "array",
+                      "elementType": {
+                        "type": "intrinsic",
+                        "name": "string"
+                      }
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.getSearchResultsText"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.getSearchResultsText"
+            }
+          },
+          {
+            "id": 897,
+            "name": "getSelections",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/lookup/lookup-harness.ts",
+                "line": 87,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 898,
+                "name": "getSelections",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets a list of selections made with a multiselect lookup."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "array",
+                      "elementType": {
+                        "type": "reference",
+                        "name": "SkyLookupSelectionHarness"
+                      }
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                }
+              }
+            ]
+          },
+          {
+            "id": 899,
+            "name": "getSelectionsText",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/lookup/lookup-harness.ts",
+                "line": 94,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 900,
+                "name": "getSelectionsText",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets the text content of all selections made with a multiselect lookup."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "array",
+                      "elementType": {
+                        "type": "intrinsic",
+                        "name": "string"
+                      }
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                }
+              }
+            ]
+          },
+          {
+            "id": 895,
+            "name": "getShowMorePicker",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/lookup/lookup-harness.ts",
+                "line": 66,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 896,
+                "name": "getShowMorePicker",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets the \"Show more\" picker harness."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "reference",
+                      "name": "SkyLookupShowMorePickerHarness"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                }
+              }
+            ]
+          },
+          {
+            "id": 920,
+            "name": "getValue",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 114,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 921,
+                "name": "getValue",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets the value of the autocomplete input."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "string"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.getValue"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.getValue"
+            }
+          },
+          {
+            "id": 936,
+            "name": "host",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {},
+            "sources": [
+              {
+                "fileName": "node_modules/@angular/cdk/testing/component-harness.d.ts",
+                "line": 221,
+                "character": 4
+              }
+            ],
+            "signatures": [
+              {
+                "id": 937,
+                "name": "host",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets a `Promise` for the `TestElement` representing the host element of the component."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "reference",
+                      "qualifiedName": "TestElement",
+                      "package": "@angular/cdk",
+                      "name": "TestElement"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.host"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.host"
+            }
+          },
+          {
+            "id": 922,
+            "name": "isDisabled",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 121,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 923,
+                "name": "isDisabled",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Whether the autocomplete input is disabled."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "boolean"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.isDisabled"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.isDisabled"
+            }
+          },
+          {
+            "id": 924,
+            "name": "isFocused",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 128,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 925,
+                "name": "isFocused",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Whether the autocomplete input is focused."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "boolean"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.isFocused"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.isFocused"
+            }
+          },
+          {
+            "id": 901,
+            "name": "isMultiselect",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/lookup/lookup-harness.ts",
+                "line": 101,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 902,
+                "name": "isMultiselect",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Whether the lookup allows for multiple selections."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "boolean"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                }
+              }
+            ]
+          },
+          {
+            "id": 926,
+            "name": "isOpen",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 135,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 927,
+                "name": "isOpen",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Whether the autocomplete is open."
+                },
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "boolean"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.isOpen"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.isOpen"
+            }
+          },
+          {
+            "id": 928,
+            "name": "selectSearchResult",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/autocomplete/autocomplete-harness.ts",
+                "line": 143,
+                "character": 15
+              }
+            ],
+            "signatures": [
+              {
+                "id": 929,
+                "name": "selectSearchResult",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Selects a search result."
+                },
+                "parameters": [
+                  {
+                    "id": 930,
+                    "name": "filters",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {},
+                    "type": {
+                      "type": "reference",
+                      "name": "SkyAutocompleteSearchResultHarnessFilters"
+                    }
+                  }
+                ],
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "intrinsic",
+                      "name": "void"
+                    }
+                  ],
+                  "qualifiedName": "Promise",
+                  "package": "typescript",
+                  "name": "Promise"
+                },
+                "inheritedFrom": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.selectSearchResult"
+                }
+              }
+            ],
+            "inheritedFrom": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.selectSearchResult"
+            }
+          },
+          {
+            "id": 874,
+            "name": "with",
+            "kind": 2048,
+            "kindString": "Method",
+            "flags": {
+              "isPublic": true,
+              "isStatic": true
+            },
+            "sources": [
+              {
+                "fileName": "projects/lookup/src/testing/lookup/lookup-harness.ts",
+                "line": 34,
+                "character": 16
+              }
+            ],
+            "signatures": [
+              {
+                "id": 875,
+                "name": "with",
+                "kind": 4096,
+                "kindString": "Call signature",
+                "flags": {},
+                "comment": {
+                  "shortText": "Gets a `HarnessPredicate` that can be used to search for a\n`SkyLookupHarness` that meets certain criteria."
+                },
+                "parameters": [
+                  {
+                    "id": 876,
+                    "name": "filters",
+                    "kind": 32768,
+                    "kindString": "Parameter",
+                    "flags": {},
+                    "type": {
+                      "type": "reference",
+                      "name": "SkyLookupHarnessFilters"
+                    }
+                  }
+                ],
+                "type": {
+                  "type": "reference",
+                  "typeArguments": [
+                    {
+                      "type": "reference",
+                      "id": 872,
+                      "name": "SkyLookupHarness"
+                    }
+                  ],
+                  "qualifiedName": "HarnessPredicate",
+                  "package": "@angular/cdk",
+                  "name": "HarnessPredicate"
+                },
+                "overwrites": {
+                  "type": "reference",
+                  "name": "SkyAutocompleteHarness.with"
+                }
+              }
+            ],
+            "overwrites": {
+              "type": "reference",
+              "name": "SkyAutocompleteHarness.with"
+            }
+          }
+        ],
+        "groups": [
+          {
+            "title": "Constructors",
+            "kind": 512,
+            "children": [
+              882
+            ]
+          },
+          {
+            "title": "Methods",
+            "kind": 2048,
+            "children": [
+              905,
+              907,
+              889,
+              891,
+              893,
+              909,
+              912,
+              914,
+              917,
+              897,
+              899,
+              895,
+              920,
+              936,
+              922,
+              924,
+              901,
+              926,
+              928,
+              874
+            ]
+          }
+        ],
+        "sources": [
+          {
+            "fileName": "projects/lookup/src/testing/lookup/lookup-harness.ts",
+            "line": 13,
+            "character": 13
+          }
+        ],
+        "extendedTypes": [
+          {
+            "type": "reference",
+            "name": "SkyAutocompleteHarness"
+          }
+        ]
       }
     ],
     "groups": [
@@ -9482,26 +10546,41 @@
       "filePath": "/projects/lookup/documentation/code-examples/country-field/basic/country-field-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyCountryFieldModule } from '@skyux/lookup';\n\nimport { CountryFieldDemoComponent } from './country-field-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyCountryFieldModule,\n    SkyInputBoxModule,\n  ],\n  declarations: [CountryFieldDemoComponent],\n  exports: [CountryFieldDemoComponent],\n})\nexport class CountryFieldDemoModule {}\n"
     },
+    {
+      "fileName": "lookup-async-demo-search-results.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-demo-search-results.ts",
+      "rawContents": "import { LookupDemoPerson } from './lookup-demo-person';\n\nexport interface LookupAsyncDemoSearchResults {\n  hasMore: boolean;\n  people: LookupDemoPerson[];\n  totalCount: number;\n}\n"
+    },
     {
       "fileName": "lookup-async-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-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        idProperty=\"name\"\n        [ariaLabelledBy]=\"nameLabel.id\"\n        [enableShowMore]=\"true\"\n        (searchAsync)=\"searchAsync($event)\"\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]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box data-sky-id=\"favorite-names-field\">\n      <label class=\"sky-control-label\" skyId #favoriteNamesLabel=\"skyId\">\n        Favorite name(s)\n      </label>\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        idProperty=\"name\"\n        [ariaLabelledBy]=\"favoriteNamesLabel.id\"\n        [enableShowMore]=\"true\"\n        (searchAsync)=\"searchAsync($event)\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
     },
     {
       "fileName": "lookup-async-demo.component.scss",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-demo.component.scss",
       "rawContents": ".lookup-demo-alert {\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #cdcfd2;\n  border-radius: 3px;\n}\n\n.lookup-demo-alert pre {\n  margin: 0;\n}\n"
     },
+    {
+      "fileName": "lookup-async-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyInputBoxHarness } from '@skyux/forms/testing';\nimport { SkyLookupHarness } from '@skyux/lookup/testing';\n\nimport { of } from 'rxjs';\n\nimport { LookupAsyncDemoComponent } from './lookup-async-demo.component';\nimport { LookupAsyncDemoModule } from './lookup-async-demo.module';\nimport { LookupAsyncDemoService } from './lookup-async-demo.service';\n\ndescribe('Lookup asynchronous search demo', () => {\n  let mockSvc!: jasmine.SpyObj<LookupAsyncDemoService>;\n\n  async function setupTest() {\n    const fixture = TestBed.createComponent(LookupAsyncDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const lookupHarness = await (\n      await loader.getHarness(\n        SkyInputBoxHarness.with({ dataSkyId: 'favorite-names-field' })\n      )\n    ).queryHarness(SkyLookupHarness);\n\n    return { lookupHarness, fixture };\n  }\n\n  beforeEach(() => {\n    // Create a mock search service. In a real-world application, the search\n    // service would make a web request which should be avoided in unit tests.\n    mockSvc = jasmine.createSpyObj('LookupAsyncDemoService', ['search']);\n\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, LookupAsyncDemoModule],\n      providers: [\n        {\n          provide: LookupAsyncDemoService,\n          useValue: mockSvc,\n        },\n      ],\n    });\n  });\n\n  it('should set the expected initial value', async () => {\n    const { lookupHarness } = await setupTest();\n\n    await expectAsync(lookupHarness.getSelectionsText()).toBeResolvedTo([\n      'Shirley',\n    ]);\n  });\n\n  it('should update the form control when a favorite name is selected', async () => {\n    const { lookupHarness, fixture } = await setupTest();\n\n    mockSvc.search.and.callFake((searchText) =>\n      of({\n        hasMore: false,\n        people:\n          searchText === 'b'\n            ? [\n                {\n                  name: 'Bernard',\n                },\n              ]\n            : [],\n        totalCount: 1,\n      })\n    );\n\n    await lookupHarness.enterText('b');\n    await lookupHarness.selectSearchResult({\n      text: 'Bernard',\n    });\n\n    expect(\n      fixture.componentInstance.favoritesForm.controls.favoriteNames.value\n    ).toEqual([{ name: 'Shirley' }, { name: 'Bernard' }]);\n  });\n});\n"
+    },
     {
       "fileName": "lookup-async-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchAsyncArgs,\n  SkyAutocompleteSearchAsyncResult,\n} from '@skyux/lookup';\n\nimport { Subject } from 'rxjs';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-async-lookup-demo',\n  templateUrl: './lookup-async-demo.component.html',\n  styleUrls: ['./lookup-async-demo.component.scss'],\n})\nexport class LookupAsyncDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: LookupDemoPerson[] = [\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: LookupDemoPerson[] = [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  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  public searchAsync($event: SkyAutocompleteSearchAsyncArgs) {\n    const result = new Subject<SkyAutocompleteSearchAsyncResult>();\n    $event.result = result;\n    setTimeout(() => {\n      const searchText = $event.searchText.toLowerCase();\n      const items = this.people.filter((person) => {\n        return person.name.toLowerCase().includes(searchText);\n      });\n      result.next({\n        hasMore: false,\n        items,\n        totalCount: items.length,\n      });\n    }, 800);\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, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchAsyncArgs } from '@skyux/lookup';\n\nimport { map } from 'rxjs/operators';\n\nimport { LookupAsyncDemoService } from './lookup-async-demo.service';\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-async-lookup-demo',\n  templateUrl: './lookup-async-demo.component.html',\n  styleUrls: ['./lookup-async-demo.component.scss'],\n})\nexport class LookupAsyncDemoComponent implements OnInit {\n  public favoritesForm: FormGroup;\n\n  #searchSvc: LookupAsyncDemoService;\n\n  constructor(formBuilder: FormBuilder, searchSvc: LookupAsyncDemoService) {\n    this.#searchSvc = searchSvc;\n\n    this.favoritesForm = formBuilder.group({\n      favoriteNames: [\n        [\n          {\n            name: 'Shirley',\n          } as LookupDemoPerson,\n        ],\n      ],\n    });\n  }\n\n  public ngOnInit(): void {\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.favoritesForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.favoritesForm.value));\n  }\n\n  public searchAsync(args: SkyAutocompleteSearchAsyncArgs): void {\n    // In a real-world application the search service might return an Observable\n    // created by calling HttpClient.get(). Assigning that Observable to the result\n    // allows the lookup component to cancel the web request if it does not complete\n    // before the user searches again.\n    args.result = this.#searchSvc.search(args.searchText).pipe(\n      map((result) => ({\n        hasMore: result.hasMore,\n        items: result.people,\n        totalCount: result.totalCount,\n      }))\n    );\n  }\n}\n"
     },
     {
       "fileName": "lookup-async-demo.module.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyLookupModule } from '@skyux/lookup';\n\nimport { LookupAsyncDemoComponent } from './lookup-async-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupAsyncDemoComponent],\n  exports: [LookupAsyncDemoComponent],\n})\nexport class LookupAsyncDemoModule {}\n"
     },
+    {
+      "fileName": "lookup-async-demo.service.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-demo.service.ts",
+      "rawContents": "import { Injectable } from '@angular/core';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\nimport { LookupAsyncDemoSearchResults } from './lookup-async-demo-search-results';\nimport { LookupDemoPerson } from './lookup-demo-person';\n\nconst people: LookupDemoPerson[] = [\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@Injectable({\n  providedIn: 'root',\n})\nexport class LookupAsyncDemoService {\n  public search(searchText: string): Observable<LookupAsyncDemoSearchResults> {\n    // Simulate a network call with latency. A real-world application might\n    // use Angular's HttpClient to create an Observable from a call to a\n    // web service.\n    searchText = searchText.toUpperCase();\n\n    const matchingPeople = people.filter((person) =>\n      person.name.toUpperCase().includes(searchText)\n    );\n\n    return of({\n      hasMore: false,\n      people: matchingPeople,\n      totalCount: matchingPeople.length,\n    }).pipe(delay(800));\n  }\n}\n"
+    },
     {
       "fileName": "lookup-demo-person.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-demo-person.ts",
@@ -9510,37 +10589,47 @@
     {
       "fileName": "lookup-custom-picker-demo-modal.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo-modal.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header> Custom picker </sky-modal-header>\n  <sky-modal-content>\n    This is a custom picker!\n    <form [formGroup]=\"myForm\">\n      <sky-checkbox formControlName=\"selectLast\">\n        <sky-checkbox-label> Select last item </sky-checkbox-label>\n      </sky-checkbox>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save(myForm.get('selectLast').value)\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+      "rawContents": "<sky-modal class=\"lookup-custom-picker-modal\">\n  <sky-modal-header>Names</sky-modal-header>\n  <sky-modal-content>\n    <form [formGroup]=\"peopleForm\">\n      <sky-selection-box-grid>\n        <sky-selection-box\n          *ngFor=\"let personControl of peopleControls; let i = index\"\n          [control]=\"checkbox\"\n        >\n          <sky-icon icon=\"user\" iconType=\"skyux\"></sky-icon>\n          <sky-selection-box-header>\n            {{ people[i].name }}\n          </sky-selection-box-header>\n          <sky-selection-box-description>\n            {{ people[i].formal }}\n          </sky-selection-box-description>\n          <sky-checkbox [formControl]=\"personControl\" #checkbox></sky-checkbox>\n        </sky-selection-box>\n      </sky-selection-box-grid>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary lookup-custom-picker-save-button\"\n      type=\"button\"\n      (click)=\"save()\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
     },
     {
       "fileName": "lookup-custom-picker-demo-modal.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo-modal.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyLookupShowMoreCustomPickerContext } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-lookup-demo-modal',\n  templateUrl: './lookup-custom-picker-demo-modal.component.html',\n})\nexport class LookupCustomPickerDemoModalComponent implements OnInit {\n  public myForm: FormGroup;\n\n  constructor(\n    private formBuilder: FormBuilder,\n    public context: SkyLookupShowMoreCustomPickerContext,\n    public modalInstance: SkyModalInstance\n  ) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      selectLast: new FormControl(false),\n    });\n  }\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyLookupShowMoreCustomPickerContext } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-lookup-demo-modal',\n  templateUrl: './lookup-custom-picker-demo-modal.component.html',\n})\nexport class LookupCustomPickerDemoModalComponent {\n  public peopleForm: FormGroup;\n  public people: LookupDemoPerson[];\n  public peopleControls: FormControl[];\n\n  #modalInstance: SkyModalInstance;\n\n  constructor(\n    context: SkyLookupShowMoreCustomPickerContext,\n    modalInstance: SkyModalInstance,\n    formBuilder: FormBuilder\n  ) {\n    this.#modalInstance = modalInstance;\n\n    // This list of people will be rendered as selection boxes.\n    this.people = context.items;\n\n    // Create a control for each selection box.\n    this.peopleControls = context.items.map((item) =>\n      formBuilder.control(context.initialValue?.includes(item))\n    );\n\n    this.peopleForm = formBuilder.group({\n      people: formBuilder.array(this.peopleControls),\n    });\n  }\n\n  public save(): void {\n    // Return a list of selected people to the lookup component.\n    const selectedPeople = this.people.filter(\n      (_, index) => this.peopleControls[index].value\n    );\n\n    this.#modalInstance.save(selectedPeople);\n  }\n}\n"
     },
     {
       "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        (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"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box data-sky-id=\"favorite-names-field\">\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"searchFilters\"\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>{{ favoritesForm.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",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo.component.scss",
       "rawContents": ".lookup-demo-alert {\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #cdcfd2;\n  border-radius: 3px;\n}\n\n.lookup-demo-alert pre {\n  margin: 0;\n}\n"
     },
+    {
+      "fileName": "lookup-custom-picker-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyInputBoxHarness } from '@skyux/forms/testing';\nimport { SkyLookupHarness } from '@skyux/lookup/testing';\n\nimport { LookupCustomPickerDemoComponent } from './lookup-custom-picker-demo.component';\nimport { LookupCustomPickerDemoModule } from './lookup-custom-picker-demo.module';\nimport { LookupCustomPickerHarness } from './lookup-custom-picker-harness';\n\ndescribe('Lookup custom picker demo', () => {\n  async function setupTest() {\n    const fixture = TestBed.createComponent(LookupCustomPickerDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const lookupHarness = await (\n      await loader.getHarness(\n        SkyInputBoxHarness.with({ dataSkyId: 'favorite-names-field' })\n      )\n    ).queryHarness(SkyLookupHarness);\n\n    return { lookupHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [LookupCustomPickerDemoModule, NoopAnimationsModule],\n    });\n  });\n\n  it('should set the expected initial value', async () => {\n    const { lookupHarness } = await setupTest();\n\n    await expectAsync(lookupHarness.getSelectionsText()).toBeResolvedTo([\n      'Shirley',\n    ]);\n  });\n\n  it('should update the form control when a favorite name is selected', async () => {\n    const { lookupHarness, fixture } = await setupTest();\n\n    await lookupHarness.enterText('vick');\n\n    const firstResultHarness = (await lookupHarness.getSearchResults())[0];\n    await firstResultHarness.select();\n\n    expect(\n      fixture.componentInstance.favoritesForm.controls.favoriteNames.value\n    ).toEqual([\n      { name: 'Shirley', formal: 'Ms. Bennett' },\n      { name: 'Vicki', formal: 'Ms. Jenkins' },\n    ]);\n  });\n\n  it('should use a custom picker', async () => {\n    const { lookupHarness, fixture } = await setupTest();\n\n    // Show the custom picker.\n    await lookupHarness.clickShowMoreButton();\n\n    // Use the custom picker harness to validate that selecting/deslecting items\n    // updates the lookup form field.\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n\n    const customPickerHarness = await loader.getHarness(\n      LookupCustomPickerHarness\n    );\n\n    await customPickerHarness.checkItemAt(3); // Britta (Ms. Perry)\n    await customPickerHarness.checkItemAt(7); // Garret (Mr. Lambert)\n    await customPickerHarness.uncheckItemAt(15); // Shirley (Ms. Bennett)\n\n    await customPickerHarness.save();\n\n    expect(\n      fixture.componentInstance.favoritesForm.controls.favoriteNames.value\n    ).toEqual([\n      { name: 'Britta', formal: 'Ms. Perry' },\n      { name: 'Garrett', formal: 'Mr. Lambert' },\n    ]);\n  });\n});\n"
+    },
     {
       "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';\nimport { LookupDemoPerson } from './lookup-demo-person';\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: LookupDemoPerson[] = [\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: LookupDemoPerson[] = [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              size: 'large',\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: LookupDemoPerson[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: LookupDemoPerson): 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"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n  SkyLookupShowMoreCustomPickerContext,\n} from '@skyux/lookup';\nimport { SkyModalService } from '@skyux/modals';\n\nimport { LookupCustomPickerDemoModalComponent } from './lookup-custom-picker-demo-modal.component';\nimport { LookupDemoPerson } from './lookup-demo-person';\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  public favoritesForm: FormGroup;\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[];\n\n  public people: LookupDemoPerson[] = [\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  constructor(formBuilder: FormBuilder, modalService: SkyModalService) {\n    this.favoritesForm = formBuilder.group({\n      favoriteNames: [[this.people[15]]],\n    });\n\n    this.searchFilters = [\n      (_, item) => {\n        const names: LookupDemoPerson[] =\n          this.favoritesForm.controls.favoriteNames.value;\n\n        // Only show people in the search results that have not been chosen already.\n        return !names.some((option) => option.name === item.name);\n      },\n    ];\n\n    this.showMoreConfig = {\n      customPicker: {\n        open: (context) => {\n          const instance = modalService.open(\n            LookupCustomPickerDemoModalComponent,\n            {\n              providers: [\n                {\n                  provide: SkyLookupShowMoreCustomPickerContext,\n                  useValue: context,\n                },\n              ],\n              size: 'large',\n            }\n          );\n\n          instance.closed.subscribe((closeArgs) => {\n            if (closeArgs.reason === 'save') {\n              this.favoritesForm.controls.favoriteNames.setValue(\n                closeArgs.data\n              );\n            }\n          });\n        },\n      },\n    };\n  }\n\n  public ngOnInit(): void {\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.favoritesForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\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.favoritesForm.value));\n  }\n}\n"
     },
     {
       "fileName": "lookup-custom-picker-demo.module.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';\nimport { SkyLookupModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { LookupCustomPickerDemoModalComponent } from './lookup-custom-picker-demo-modal.component';\nimport { LookupCustomPickerDemoComponent } from './lookup-custom-picker-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyCheckboxModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyLookupModule,\n    SkyModalModule,\n  ],\n  declarations: [\n    LookupCustomPickerDemoComponent,\n    LookupCustomPickerDemoModalComponent,\n  ],\n  exports: [LookupCustomPickerDemoComponent],\n})\nexport class LookupCustomPickerDemoModule {}\n"
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport {\n  SkyCheckboxModule,\n  SkyInputBoxModule,\n  SkySelectionBoxModule,\n} from '@skyux/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyLookupModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { LookupCustomPickerDemoModalComponent } from './lookup-custom-picker-demo-modal.component';\nimport { LookupCustomPickerDemoComponent } from './lookup-custom-picker-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyCheckboxModule,\n    SkyIconModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyLookupModule,\n    SkyModalModule,\n    SkySelectionBoxModule,\n  ],\n  declarations: [\n    LookupCustomPickerDemoComponent,\n    LookupCustomPickerDemoModalComponent,\n  ],\n  exports: [LookupCustomPickerDemoComponent],\n})\nexport class LookupCustomPickerDemoModule {}\n"
+    },
+    {
+      "fileName": "lookup-custom-picker-harness.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-harness.ts",
+      "rawContents": "import { ComponentHarness } from '@angular/cdk/testing';\nimport { SkyCheckboxHarness } from '@skyux/forms/testing';\n\nexport class LookupCustomPickerHarness extends ComponentHarness {\n  public static hostSelector = '.lookup-custom-picker-modal';\n\n  #getCheckboxes = this.locatorForAll(SkyCheckboxHarness);\n  #getSaveButton = this.locatorFor('.lookup-custom-picker-save-button');\n\n  public async checkItemAt(index: number): Promise<void> {\n    return (await this.#getCheckboxes())[index].check();\n  }\n\n  public async uncheckItemAt(index: number): Promise<void> {\n    return (await this.#getCheckboxes())[index].uncheck();\n  }\n\n  public async save(): Promise<void> {\n    return (await this.#getSaveButton()).click();\n  }\n}\n"
     },
     {
       "fileName": "lookup-demo-person.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-demo-person.ts",
-      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n}\n"
+      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n  formal?: string;\n}\n"
     },
     {
       "fileName": "lookup-demo-person.ts",
@@ -9550,17 +10639,22 @@
     {
       "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        (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"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box data-sky-id=\"favorite-names-field\">\n      <label class=\"sky-control-label\" skyId #favoriteNamesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"favoriteNamesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"searchFilters\"\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>{{ favoritesForm.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",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-demo.component.scss",
       "rawContents": ".lookup-demo-alert {\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #cdcfd2;\n  border-radius: 3px;\n}\n\n.lookup-demo-alert pre {\n  margin: 0;\n}\n"
     },
+    {
+      "fileName": "lookup-multiple-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyInputBoxHarness } from '@skyux/forms/testing';\nimport { SkyLookupHarness } from '@skyux/lookup/testing';\n\nimport { LookupMultipleSelectDemoComponent } from './lookup-multiple-demo.component';\nimport { LookupMultipleSelectDemoModule } from './lookup-multiple-demo.module';\n\ndescribe('Lookup multi-select demo', () => {\n  async function setupTest() {\n    const fixture = TestBed.createComponent(LookupMultipleSelectDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const lookupHarness = await (\n      await loader.getHarness(\n        SkyInputBoxHarness.with({ dataSkyId: 'favorite-names-field' })\n      )\n    ).queryHarness(SkyLookupHarness);\n\n    return { lookupHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [LookupMultipleSelectDemoModule, NoopAnimationsModule],\n    });\n  });\n\n  it('should set the expected initial value', async () => {\n    const { lookupHarness } = await setupTest();\n\n    await expectAsync(lookupHarness.getSelectionsText()).toBeResolvedTo([\n      'Shirley',\n    ]);\n  });\n\n  it('should update the form control when a favorite name is selected', async () => {\n    const { lookupHarness, fixture } = await setupTest();\n\n    await lookupHarness.enterText('vick');\n    await lookupHarness.selectSearchResult({\n      text: 'Vicki',\n    });\n\n    expect(\n      fixture.componentInstance.favoritesForm.controls.favoriteNames.value\n    ).toEqual([{ name: 'Shirley' }, { name: 'Vicki' }]);\n  });\n});\n"
+    },
     {
       "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 {\n  SkyAutocompleteSearchArgs,\n  SkyAutocompleteSearchFunctionFilter,\n} from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\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: LookupDemoPerson[] = [\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: LookupDemoPerson[] = [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  /**\n   * When in the modal view, show all people in the search results, regardless if they have been chosen already.\n   * When in the popover view (or in any other view), show people in the search results that have not been chosen already.\n   */\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: LookupDemoPerson[] = this.myForm.controls.names.value;\n    return [\n      (\n        searchText: string,\n        item: any,\n        args?: SkyAutocompleteSearchArgs\n      ): boolean => {\n        if (args?.context === 'modal') {\n          return true;\n        }\n\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"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\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 favoritesForm: FormGroup;\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[];\n\n  public people: LookupDemoPerson[] = [\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  constructor(formBuilder: FormBuilder) {\n    this.favoritesForm = formBuilder.group({\n      favoriteNames: [[this.people[15]]],\n    });\n  }\n\n  public ngOnInit(): void {\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.favoritesForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n\n    this.searchFilters = [\n      (_, item, args) => {\n        // When in the modal view, show all people in the search results, regardless if they have been chosen already.\n        if (args.context === 'modal') {\n          return true;\n        }\n\n        const names: LookupDemoPerson[] =\n          this.favoritesForm.controls.favoriteNames.value;\n\n        // When in the popover view (or in any other view), show people in the search results that have not been chosen already.\n        return !names.some((option) => option.name === item.name);\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.favoritesForm.value));\n  }\n}\n"
     },
     {
       "fileName": "lookup-multiple-demo.module.ts",
@@ -9575,23 +10669,33 @@
     {
       "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        (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"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box data-sky-id=\"favorite-names-field\">\n      <label class=\"sky-control-label\" skyId #favoriteNamesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"favoriteNamesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"searchFilters\"\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>{{ favoritesForm.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  <span class=\"lookup-demo-template-item\">\n    <strong class=\"lookup-demo-template-name\">{{ item.name }}</strong\n    ><br />\n    <span class=\"lookup-demo-template-formal-name\">\n      {{ item.formal }}\n    </span>\n  </span>\n</ng-template>\n<ng-template let-item=\"item\" #modalItemTemplate>\n  <span class=\"lookup-demo-template-item\">\n    <span class=\"lookup-demo-template-name\">{{ item.name }}</span\n    ><br />\n    <i class=\"lookup-demo-template-formal-name\">{{ item.formal }}</i>\n  </span>\n</ng-template>\n"
     },
     {
       "fileName": "lookup-result-templates-demo.component.scss",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-result-templates-demo.component.scss",
       "rawContents": ".lookup-demo-alert {\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #cdcfd2;\n  border-radius: 3px;\n}\n\n.lookup-demo-alert pre {\n  margin: 0;\n}\n"
     },
+    {
+      "fileName": "lookup-result-templates-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-result-templates-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyInputBoxHarness } from '@skyux/forms/testing';\nimport { SkyLookupHarness } from '@skyux/lookup/testing';\n\nimport { LookupResultTemplatesDemoComponent } from './lookup-result-templates-demo.component';\nimport { LookupResultTemplatesDemoModule } from './lookup-result-templates-demo.module';\nimport { LookupResultTemplatesItemHarness } from './lookup-result-templates-item-harness';\n\ndescribe('Lookup result templates demo', () => {\n  async function setupTest() {\n    const fixture = TestBed.createComponent(LookupResultTemplatesDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const lookupHarness = await (\n      await loader.getHarness(\n        SkyInputBoxHarness.with({ dataSkyId: 'favorite-names-field' })\n      )\n    ).queryHarness(SkyLookupHarness);\n\n    return { lookupHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [LookupResultTemplatesDemoModule, NoopAnimationsModule],\n    });\n  });\n\n  it('should set the expected initial value', async () => {\n    const { lookupHarness } = await setupTest();\n\n    await expectAsync(lookupHarness.getSelectionsText()).toBeResolvedTo([\n      'Shirley',\n    ]);\n  });\n\n  it('should use the expected dropdown item template', async () => {\n    const { lookupHarness } = await setupTest();\n\n    await lookupHarness.enterText('vick');\n\n    const results = await lookupHarness.getSearchResults();\n    const templateItemHarness = await results[0].queryHarness(\n      LookupResultTemplatesItemHarness\n    );\n\n    await expectAsync(templateItemHarness.getName()).toBeResolvedTo('Vicki');\n    await expectAsync(templateItemHarness.getFormalName()).toBeResolvedTo(\n      'Ms. Jenkins'\n    );\n  });\n\n  it('should use the expected modal item template', async () => {\n    const { lookupHarness } = await setupTest();\n\n    await lookupHarness.clickShowMoreButton();\n\n    const pickerHarness = await lookupHarness.getShowMorePicker();\n    await pickerHarness.enterSearchText('vick');\n\n    const results = await pickerHarness.getSearchResults();\n    const templateItemHarness = await results[0].queryHarness(\n      LookupResultTemplatesItemHarness\n    );\n\n    await expectAsync(templateItemHarness.getName()).toBeResolvedTo('Vicki');\n    await expectAsync(templateItemHarness.getFormalName()).toBeResolvedTo(\n      'Ms. Jenkins'\n    );\n  });\n\n  it('should update the form control when a favorite name is selected', async () => {\n    const { lookupHarness, fixture } = await setupTest();\n\n    await lookupHarness.enterText('vick');\n\n    const firstResultHarness = (await lookupHarness.getSearchResults())[0];\n    await firstResultHarness.select();\n\n    expect(\n      fixture.componentInstance.favoritesForm.controls.favoriteNames.value\n    ).toEqual([\n      { name: 'Shirley', formal: 'Ms. Bennett' },\n      { name: 'Vicki', formal: 'Ms. Jenkins' },\n    ]);\n  });\n});\n"
+    },
     {
       "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\nimport { LookupDemoPerson } from './lookup-demo-person';\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: LookupDemoPerson[] = [\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: LookupDemoPerson[] = [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"
+      "rawContents": "import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n} from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\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 favoritesForm: FormGroup;\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[];\n\n  public people: LookupDemoPerson[] = [\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 showMoreConfig: SkyLookupShowMoreConfig = {\n    nativePickerConfig: {},\n  };\n\n  @ViewChild('modalItemTemplate')\n  public set modalItemTemplate(template: TemplateRef<unknown>) {\n    this.showMoreConfig.nativePickerConfig.itemTemplate = template;\n  }\n\n  constructor(formBuilder: FormBuilder) {\n    this.favoritesForm = formBuilder.group({\n      favoriteNames: [[this.people[15]]],\n    });\n\n    this.searchFilters = [\n      (_, item) => {\n        const names: LookupDemoPerson[] =\n          this.favoritesForm.controls.favoriteNames.value;\n\n        // Only show people in the search results that have not been chosen already.\n        return !names.some((option) => option.name === item.name);\n      },\n    ];\n  }\n\n  public ngOnInit(): void {\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.favoritesForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\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.favoritesForm.value));\n  }\n}\n"
     },
     {
       "fileName": "lookup-result-templates-demo.module.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-result-templates-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyLookupModule } from '@skyux/lookup';\n\nimport { LookupResultTemplatesDemoComponent } from './lookup-result-templates-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupResultTemplatesDemoComponent],\n  exports: [LookupResultTemplatesDemoComponent],\n})\nexport class LookupResultTemplatesDemoModule {}\n"
     },
+    {
+      "fileName": "lookup-result-templates-item-harness.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-result-templates-item-harness.ts",
+      "rawContents": "import { ComponentHarness } from '@angular/cdk/testing';\n\n/**\n * Harness for interacting with a lookup component in tests.\n * @internal\n */\nexport class LookupResultTemplatesItemHarness extends ComponentHarness {\n  public static hostSelector = '.lookup-demo-template-item';\n\n  #getName = this.locatorFor('.lookup-demo-template-name');\n  #getFormalName = this.locatorFor('.lookup-demo-template-formal-name');\n\n  public async getName(): Promise<string> {\n    return (await this.#getName()).text();\n  }\n\n  public async getFormalName(): Promise<string> {\n    return (await this.#getFormalName()).text();\n  }\n}\n"
+    },
     {
       "fileName": "lookup-demo-person.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-demo-person.ts",
@@ -9600,17 +10704,22 @@
     {
       "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        (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"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box data-sky-id=\"favorite-name-field\">\n      <label class=\"sky-control-label\" skyId #favoriteNameLabel=\"skyId\">\n        Favorite name\n      </label>\n      <sky-lookup\n        formControlName=\"favoriteName\"\n        selectMode=\"single\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"favoriteNameLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"searchFilters\"\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>{{ favoritesForm.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",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-single-demo.component.scss",
       "rawContents": ".lookup-demo-alert {\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #cdcfd2;\n  border-radius: 3px;\n}\n\n.lookup-demo-alert pre {\n  margin: 0;\n}\n"
     },
+    {
+      "fileName": "lookup-single-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-single-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyInputBoxHarness } from '@skyux/forms/testing';\nimport { SkyLookupHarness } from '@skyux/lookup/testing';\n\nimport { LookupSingleSelectDemoComponent } from './lookup-single-demo.component';\nimport { LookupSingleSelectDemoModule } from './lookup-single-demo.module';\n\ndescribe('Lookup single select demo', () => {\n  async function setupTest() {\n    const fixture = TestBed.createComponent(LookupSingleSelectDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const lookupHarness = await (\n      await loader.getHarness(\n        SkyInputBoxHarness.with({ dataSkyId: 'favorite-name-field' })\n      )\n    ).queryHarness(SkyLookupHarness);\n\n    return { lookupHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [LookupSingleSelectDemoModule, NoopAnimationsModule],\n    });\n  });\n\n  it('should set the expected initial value', async () => {\n    const { lookupHarness } = await setupTest();\n\n    await expectAsync(lookupHarness.getValue()).toBeResolvedTo('Shirley');\n  });\n\n  it('should update the form control when a favorite name is selected', async () => {\n    const { lookupHarness, fixture } = await setupTest();\n\n    await lookupHarness.enterText('vick');\n    await lookupHarness.selectSearchResult({\n      text: 'Vicki',\n    });\n\n    expect(\n      fixture.componentInstance.favoritesForm.get('favoriteName').value\n    ).toEqual([{ name: 'Vicki' }]);\n  });\n});\n"
+    },
     {
       "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\nimport { LookupDemoPerson } from './lookup-demo-person';\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: LookupDemoPerson[] = [\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: LookupDemoPerson[] = [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: LookupDemoPerson[] = this.myForm.controls.name.value;\n    return [\n      (searchText: string, item: LookupDemoPerson): 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"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\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 favoritesForm: FormGroup;\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[];\n\n  public people: LookupDemoPerson[] = [\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: LookupDemoPerson[] = [this.people[15]];\n\n  constructor(formBuilder: FormBuilder) {\n    this.favoritesForm = formBuilder.group({\n      favoriteName: [[this.people[15]]],\n    });\n\n    this.searchFilters = [\n      (_, item) => {\n        const names: LookupDemoPerson[] =\n          this.favoritesForm.controls.favoriteName.value;\n\n        // Only show people in the search results that have not been chosen already.\n        return !names.some((option) => option.name === item.name);\n      },\n    ];\n  }\n\n  public ngOnInit(): void {\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.favoritesForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\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.favoritesForm.value));\n  }\n}\n"
     },
     {
       "fileName": "lookup-single-demo.module.ts",