@skyux/lookup 7.0.0-beta.1 → 7.0.0-beta.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,
@@ -7105,6 +7106,12 @@
                   "type": "array",
                   "elementType": {
                     "type": "reference",
+                    "typeArguments": [
+                      {
+                        "type": "intrinsic",
+                        "name": "any"
+                      }
+                    ],
                     "name": "SkyToken"
                   }
                 }
@@ -7128,6 +7135,12 @@
                       "type": "array",
                       "elementType": {
                         "type": "reference",
+                        "typeArguments": [
+                          {
+                            "type": "intrinsic",
+                            "name": "any"
+                          }
+                        ],
                         "name": "SkyToken"
                       }
                     }
@@ -7722,6 +7735,12 @@
                       "type": "array",
                       "elementType": {
                         "type": "reference",
+                        "typeArguments": [
+                          {
+                            "type": "intrinsic",
+                            "name": "any"
+                          }
+                        ],
                         "name": "SkyToken"
                       }
                     }
@@ -9413,224 +9432,1332 @@
             }
           ]
         }
-      }
-    ],
-    "groups": [
+      },
       {
-        "title": "Modules",
-        "kind": 2,
+        "id": 872,
+        "name": "SkyLookupHarness",
+        "kind": 128,
+        "kindString": "Class",
+        "flags": {},
+        "comment": {
+          "shortText": "Harness for interacting with a lookup component in tests."
+        },
         "children": [
-          1,
-          2
-        ]
-      }
-    ]
-  },
-  "codeExamples": [
-    {
-      "fileName": "autocomplete-demo.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/autocomplete-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div class=\"sky-margin-stacked-lg\">\n    The following field:<br />\n    <ul>\n      <li>utilizes a custom search result template,</li>\n      <li>searches against the name and description properties,</li>\n      <li>limits the search results to two,</li>\n      <li>runs the search if the query is at least three characters long,</li>\n      <li>and fires an event when a selection is made.</li>\n    </ul>\n  </div>\n\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"planetInput.id\">\n      Farthest planet from the sun\n    </label>\n    <sky-autocomplete\n      [data]=\"planets\"\n      [propertiesToSearch]=\"['name', 'description']\"\n      [searchResultsLimit]=\"2\"\n      [searchResultTemplate]=\"planetSearchResultTemplate\"\n      [searchTextMinimumCharacters]=\"3\"\n      (selectionChange)=\"onPlanetSelection($event)\"\n    >\n      <input\n        formControlName=\"farthestPlanet\"\n        skyAutocomplete\n        skyId\n        type=\"text\"\n        #planetInput\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n\n<ng-template let-item=\"item\" #planetSearchResultTemplate>\n  <strong>\n    {{ item.name }}\n  </strong>\n  <br />\n  {{ item.description }}\n</ng-template>\n"
-    },
-    {
-      "fileName": "autocomplete-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/autocomplete-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyAutocompleteSelectionChange,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public farthestPlanet: any;\n\n  public myForm: UntypedFormGroup;\n\n  public planets: any[] = [\n    {\n      name: 'Mercury',\n      description: 'Mercury is a planet in our solar system.',\n    },\n    { name: 'Venus', description: 'Venus is a planet in our solar system.' },\n    { name: 'Earth', description: 'Earth is a planet in our solar system.' },\n    { name: 'Mars', description: 'Mars is a planet in our solar system.' },\n    {\n      name: 'Jupiter',\n      description: 'Jupiter is a planet in our solar system.',\n    },\n    { name: 'Saturn', description: 'Saturn is a planet in our solar system.' },\n    { name: 'Uranus', description: 'Uranus is a planet in our solar system.' },\n    {\n      name: 'Neptune',\n      description: 'Neptune is a planet in our solar system.',\n    },\n  ];\n\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[] = [\n    (searchText: string, item: any): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  public onPlanetSelection(args: SkyAutocompleteSelectionChange): void {\n    alert(`You selected ${args.selectedItem.name}`);\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      farthestPlanet: {},\n    });\n  }\n}\n"
-    },
-    {
-      "fileName": "autocomplete-demo.module.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/autocomplete-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAutocompleteModule,\n    SkyIconModule,\n  ],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
-    },
-    {
-      "fileName": "autocomplete-demo.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"favoriteColorInput.id\">\n      Favorite color\n    </label>\n    <sky-autocomplete [data]=\"colors\">\n      <input\n        formControlName=\"favoriteColor\"\n        type=\"text\"\n        skyAutocomplete\n        skyId\n        #favoriteColorInput\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n"
-    },
-    {
-      "fileName": "autocomplete-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public colors: any[] = [\n    { name: 'Red' },\n    { name: 'Blue' },\n    { name: 'Green' },\n    { name: 'Orange' },\n    { name: 'Pink' },\n    { name: 'Purple' },\n    { name: 'Yellow' },\n    { name: 'Brown' },\n    { name: 'Turquoise' },\n    { name: 'White' },\n    { name: 'Black' },\n  ];\n\n  public myForm: UntypedFormGroup;\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
-    },
-    {
-      "fileName": "autocomplete-demo.module.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-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 { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAutocompleteModule,\n    SkyIdModule,\n  ],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
-    },
-    {
-      "fileName": "autocomplete-demo.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <p>\n    The following field has a preselected value and utilizes a custom search\n    function, as well as a custom template for the search results.\n  </p>\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"largestOceanInput.id\">\n      Largest ocean\n    </label>\n    <sky-autocomplete\n      descriptorProperty=\"title\"\n      [data]=\"oceans\"\n      [search]=\"getOceanSearchFunction()\"\n      [searchResultTemplate]=\"oceanSearchResultTemplate\"\n    >\n      <input\n        formControlName=\"largestOcean\"\n        type=\"text\"\n        skyAutocomplete\n        skyId\n        #largestOceanInput=\"skyId\"\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n\n<ng-template let-item=\"item\" #oceanSearchResultTemplate>\n  <sky-icon icon=\"long-arrow-right\"></sky-icon>\n  {{ item.title }} &bull; ID {{ item.id }}\n</ng-template>\n"
-    },
-    {
-      "fileName": "autocomplete-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunction,\n  SkyAutocompleteSearchFunctionResponse,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public myForm: UntypedFormGroup;\n\n  public largestOcean: any;\n\n  public oceans: any[] = [\n    { title: 'Arctic', id: 1 },\n    { title: 'Atlantic', id: 2 },\n    { title: 'Indian', id: 3 },\n    { title: 'Pacific', id: 4 },\n  ];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  public getOceanSearchFunction(): SkyAutocompleteSearchFunction {\n    const searchFunction = (\n      searchText: string,\n      oceans: any[]\n    ): SkyAutocompleteSearchFunctionResponse => {\n      return new Promise((resolve) => {\n        const searchTextLower = searchText.toLowerCase();\n\n        const results = oceans.filter((ocean: any) => {\n          const val = ocean.title;\n          const isMatch =\n            val && val.toString().toLowerCase().indexOf(searchTextLower) > -1;\n          return isMatch;\n        });\n\n        // Simulate an async request.\n        setTimeout(() => {\n          resolve(results);\n        }, 500);\n      });\n    };\n\n    return searchFunction;\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      largestOcean: { title: 'Arctic', id: 1 },\n    });\n  }\n}\n"
-    },
-    {
-      "fileName": "autocomplete-demo.module.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-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 { SkyIconModule } from '@skyux/indicators';\nimport { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAutocompleteModule,\n    SkyIconModule,\n    SkyIdModule,\n  ],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
-    },
-    {
-      "fileName": "autocomplete-demo.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <p>\n    The following field provides a custom function that filters the data before\n    every search attempt.\n  </p>\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"favoriteColorInput.id\">\n      Color (\"Red\" is not available)\n    </label>\n    <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n      <input\n        formControlName=\"favoriteColor\"\n        skyAutocomplete\n        skyId\n        type=\"text\"\n        #favoriteColorInput=\"skyId\"\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n"
-    },
-    {
-      "fileName": "autocomplete-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public colors: any[] = [\n    { name: 'Red' },\n    { name: 'Blue' },\n    { name: 'Green' },\n    { name: 'Orange' },\n    { name: 'Pink' },\n    { name: 'Purple' },\n    { name: 'Yellow' },\n    { name: 'Brown' },\n    { name: 'Turquoise' },\n    { name: 'White' },\n    { name: 'Black' },\n  ];\n\n  public myForm: UntypedFormGroup;\n\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[] = [\n    (searchText: string, item: any): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
-    },
-    {
-      "fileName": "autocomplete-demo.module.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-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 { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAutocompleteModule,\n    SkyIdModule,\n  ],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
-    },
-    {
-      "fileName": "country-field-demo.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/country-field/basic/country-field-demo.component.html",
-      "rawContents": "<form [formGroup]=\"countryForm\">\n  <sky-input-box>\n    <sky-country-field formControlName=\"countryControl\"> </sky-country-field>\n  </sky-input-box>\n</form>\n"
-    },
-    {
-      "fileName": "country-field-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/country-field/basic/country-field-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormControl,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\nimport { SkyCountryFieldCountry } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-country-field-demo',\n  templateUrl: './country-field-demo.component.html',\n})\nexport class CountryFieldDemoComponent implements OnInit {\n  public countryControl: UntypedFormControl;\n\n  public countryData: SkyCountryFieldCountry;\n\n  public countryForm: UntypedFormGroup;\n\n  public ngOnInit(): void {\n    this.countryControl = new UntypedFormControl();\n    this.countryControl.setValue({\n      name: 'Australia',\n      iso2: 'au',\n    });\n    this.countryForm = new UntypedFormGroup({\n      countryControl: this.countryControl,\n    });\n\n    this.countryControl.setValidators([Validators.required]);\n  }\n}\n"
-    },
-    {
-      "fileName": "country-field-demo.module.ts",
-      "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.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"
-    },
-    {
-      "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.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} 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: UntypedFormGroup;\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: UntypedFormBuilder) {}\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 UntypedFormControl(this.name),\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-demo-person.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-demo-person.ts",
-      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n}\n"
-    },
-    {
-      "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"
-    },
-    {
-      "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 {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} 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: UntypedFormGroup;\n\n  constructor(\n    private formBuilder: UntypedFormBuilder,\n    public context: SkyLookupShowMoreCustomPickerContext,\n    public modalInstance: SkyModalInstance\n  ) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      selectLast: new UntypedFormControl(false),\n    });\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"
-    },
-    {
-      "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.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 {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} 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: UntypedFormGroup;\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: UntypedFormBuilder,\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 UntypedFormControl(this.names),\n    });\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"
-    },
-    {
-      "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"
-    },
-    {
-      "fileName": "lookup-demo-person.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-demo-person.ts",
-      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n}\n"
-    },
-    {
-      "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"
-    },
-    {
-      "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.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} 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: UntypedFormGroup;\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: UntypedFormBuilder) {}\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 UntypedFormControl(this.names),\n    });\n  }\n}\n"
-    },
-    {
-      "fileName": "lookup-multiple-demo.module.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-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 { LookupMultipleSelectDemoComponent } from './lookup-multiple-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupMultipleSelectDemoComponent],\n  exports: [LookupMultipleSelectDemoComponent],\n})\nexport class LookupMultipleSelectDemoModule {}\n"
-    },
-    {
-      "fileName": "lookup-demo-person.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-demo-person.ts",
-      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n  formal?: string;\n}\n"
-    },
-    {
-      "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"
-    },
-    {
-      "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.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 {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} 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: UntypedFormGroup;\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: UntypedFormBuilder) {}\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 UntypedFormControl(this.names),\n    });\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-demo-person.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-demo-person.ts",
-      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n}\n"
-    },
-    {
-      "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"
-    },
-    {
-      "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"
+          {
+            "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/index.d.ts",
+                "line": 40,
+                "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": [
+      {
+        "title": "Modules",
+        "kind": 2,
+        "children": [
+          1,
+          2
+        ]
+      }
+    ]
+  },
+  "codeExamples": [
+    {
+      "fileName": "autocomplete-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/autocomplete-demo.component.html",
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div class=\"sky-margin-stacked-lg\">\n    The following field:<br />\n    <ul>\n      <li>utilizes a custom search result template,</li>\n      <li>searches against the name and description properties,</li>\n      <li>limits the search results to two,</li>\n      <li>runs the search if the query is at least three characters long,</li>\n      <li>and fires an event when a selection is made.</li>\n    </ul>\n  </div>\n\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"planetInput.id\">\n      Farthest planet from the sun\n    </label>\n    <sky-autocomplete\n      [data]=\"planets\"\n      [propertiesToSearch]=\"['name', 'description']\"\n      [searchResultsLimit]=\"2\"\n      [searchResultTemplate]=\"planetSearchResultTemplate\"\n      [searchTextMinimumCharacters]=\"3\"\n      (selectionChange)=\"onPlanetSelection($event)\"\n    >\n      <input\n        formControlName=\"farthestPlanet\"\n        skyAutocomplete\n        skyId\n        type=\"text\"\n        #planetInput\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n\n<ng-template let-item=\"item\" #planetSearchResultTemplate>\n  <strong>\n    {{ item.name }}\n  </strong>\n  <br />\n  {{ item.description }}\n</ng-template>\n"
+    },
+    {
+      "fileName": "autocomplete-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/autocomplete-demo.component.ts",
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyAutocompleteSelectionChange,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public farthestPlanet: any;\n\n  public myForm: UntypedFormGroup;\n\n  public planets: any[] = [\n    {\n      name: 'Mercury',\n      description: 'Mercury is a planet in our solar system.',\n    },\n    { name: 'Venus', description: 'Venus is a planet in our solar system.' },\n    { name: 'Earth', description: 'Earth is a planet in our solar system.' },\n    { name: 'Mars', description: 'Mars is a planet in our solar system.' },\n    {\n      name: 'Jupiter',\n      description: 'Jupiter is a planet in our solar system.',\n    },\n    { name: 'Saturn', description: 'Saturn is a planet in our solar system.' },\n    { name: 'Uranus', description: 'Uranus is a planet in our solar system.' },\n    {\n      name: 'Neptune',\n      description: 'Neptune is a planet in our solar system.',\n    },\n  ];\n\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[] = [\n    (searchText: string, item: any): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  public onPlanetSelection(args: SkyAutocompleteSelectionChange): void {\n    alert(`You selected ${args.selectedItem.name}`);\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      farthestPlanet: {},\n    });\n  }\n}\n"
+    },
+    {
+      "fileName": "autocomplete-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/autocomplete-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAutocompleteModule,\n    SkyIconModule,\n  ],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
+    },
+    {
+      "fileName": "autocomplete-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-demo.component.html",
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"favoriteColorInput.id\">\n      Favorite color\n    </label>\n    <sky-autocomplete [data]=\"colors\">\n      <input\n        formControlName=\"favoriteColor\"\n        type=\"text\"\n        skyAutocomplete\n        skyId\n        #favoriteColorInput\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n"
+    },
+    {
+      "fileName": "autocomplete-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-demo.component.ts",
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public colors: any[] = [\n    { name: 'Red' },\n    { name: 'Blue' },\n    { name: 'Green' },\n    { name: 'Orange' },\n    { name: 'Pink' },\n    { name: 'Purple' },\n    { name: 'Yellow' },\n    { name: 'Brown' },\n    { name: 'Turquoise' },\n    { name: 'White' },\n    { name: 'Black' },\n  ];\n\n  public myForm: UntypedFormGroup;\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
+    },
+    {
+      "fileName": "autocomplete-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-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 { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAutocompleteModule,\n    SkyIdModule,\n  ],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
+    },
+    {
+      "fileName": "autocomplete-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-demo.component.html",
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <p>\n    The following field has a preselected value and utilizes a custom search\n    function, as well as a custom template for the search results.\n  </p>\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"largestOceanInput.id\">\n      Largest ocean\n    </label>\n    <sky-autocomplete\n      descriptorProperty=\"title\"\n      [data]=\"oceans\"\n      [search]=\"getOceanSearchFunction()\"\n      [searchResultTemplate]=\"oceanSearchResultTemplate\"\n    >\n      <input\n        formControlName=\"largestOcean\"\n        type=\"text\"\n        skyAutocomplete\n        skyId\n        #largestOceanInput=\"skyId\"\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n\n<ng-template let-item=\"item\" #oceanSearchResultTemplate>\n  <sky-icon icon=\"long-arrow-right\"></sky-icon>\n  {{ item.title }} &bull; ID {{ item.id }}\n</ng-template>\n"
+    },
+    {
+      "fileName": "autocomplete-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-demo.component.ts",
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunction,\n  SkyAutocompleteSearchFunctionResponse,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public myForm: UntypedFormGroup;\n\n  public largestOcean: any;\n\n  public oceans: any[] = [\n    { title: 'Arctic', id: 1 },\n    { title: 'Atlantic', id: 2 },\n    { title: 'Indian', id: 3 },\n    { title: 'Pacific', id: 4 },\n  ];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  public getOceanSearchFunction(): SkyAutocompleteSearchFunction {\n    const searchFunction = (\n      searchText: string,\n      oceans: any[]\n    ): SkyAutocompleteSearchFunctionResponse => {\n      return new Promise((resolve) => {\n        const searchTextLower = searchText.toLowerCase();\n\n        const results = oceans.filter((ocean: any) => {\n          const val = ocean.title;\n          const isMatch =\n            val && val.toString().toLowerCase().indexOf(searchTextLower) > -1;\n          return isMatch;\n        });\n\n        // Simulate an async request.\n        setTimeout(() => {\n          resolve(results);\n        }, 500);\n      });\n    };\n\n    return searchFunction;\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      largestOcean: { title: 'Arctic', id: 1 },\n    });\n  }\n}\n"
+    },
+    {
+      "fileName": "autocomplete-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-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 { SkyIconModule } from '@skyux/indicators';\nimport { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAutocompleteModule,\n    SkyIconModule,\n    SkyIdModule,\n  ],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
+    },
+    {
+      "fileName": "autocomplete-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-demo.component.html",
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <p>\n    The following field provides a custom function that filters the data before\n    every search attempt.\n  </p>\n  <div class=\"sky-form-group\">\n    <label class=\"sky-control-label\" [for]=\"favoriteColorInput.id\">\n      Color (\"Red\" is not available)\n    </label>\n    <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n      <input\n        formControlName=\"favoriteColor\"\n        skyAutocomplete\n        skyId\n        type=\"text\"\n        #favoriteColorInput=\"skyId\"\n      />\n    </sky-autocomplete>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ myForm.value | json }}</pre>\n</form>\n"
+    },
+    {
+      "fileName": "autocomplete-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-demo.component.ts",
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public colors: any[] = [\n    { name: 'Red' },\n    { name: 'Blue' },\n    { name: 'Green' },\n    { name: 'Orange' },\n    { name: 'Pink' },\n    { name: 'Purple' },\n    { name: 'Yellow' },\n    { name: 'Brown' },\n    { name: 'Turquoise' },\n    { name: 'White' },\n    { name: 'Black' },\n  ];\n\n  public myForm: UntypedFormGroup;\n\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[] = [\n    (searchText: string, item: any): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
+    },
+    {
+      "fileName": "autocomplete-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-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 { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAutocompleteModule,\n    SkyIdModule,\n  ],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
+    },
+    {
+      "fileName": "country-field-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/country-field/basic/country-field-demo.component.html",
+      "rawContents": "<form [formGroup]=\"countryForm\">\n  <sky-input-box>\n    <sky-country-field formControlName=\"countryControl\"> </sky-country-field>\n  </sky-input-box>\n</form>\n"
+    },
+    {
+      "fileName": "country-field-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/country-field/basic/country-field-demo.component.ts",
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormControl,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\nimport { SkyCountryFieldCountry } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-country-field-demo',\n  templateUrl: './country-field-demo.component.html',\n})\nexport class CountryFieldDemoComponent implements OnInit {\n  public countryControl: UntypedFormControl;\n\n  public countryData: SkyCountryFieldCountry;\n\n  public countryForm: UntypedFormGroup;\n\n  public ngOnInit(): void {\n    this.countryControl = new UntypedFormControl();\n    this.countryControl.setValue({\n      name: 'Australia',\n      iso2: 'au',\n    });\n    this.countryForm = new UntypedFormGroup({\n      countryControl: this.countryControl,\n    });\n\n    this.countryControl.setValidators([Validators.required]);\n  }\n}\n"
+    },
+    {
+      "fileName": "country-field-demo.module.ts",
+      "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]=\"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(fixture.componentInstance.favoritesForm.value.favoriteNames).toEqual(\n      [{ name: 'Shirley' }, { name: 'Bernard' }]\n    );\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 { 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    favoriteNames: FormControl<LookupDemoPerson[]>;\n  }>;\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          },\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",
+      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n}\n"
+    },
+    {
+      "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 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=\"\n            let personControl of peopleForm.controls.people.controls;\n            let i = index\n          \"\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 } from '@angular/core';\nimport { FormArray, 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    people: FormArray<FormControl<boolean>>;\n  }>;\n\n  public people: LookupDemoPerson[];\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.peopleForm = formBuilder.group({\n      people: formBuilder.array(\n        context.items.map((item) =>\n          formBuilder.control(context.initialValue?.includes(item))\n        )\n      ),\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.peopleForm.value.people[index]\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]=\"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(fixture.componentInstance.favoritesForm.value.favoriteNames).toEqual(\n      [\n        { name: 'Shirley', formal: 'Ms. Bennett' },\n        { name: 'Vicki', formal: 'Ms. Jenkins' },\n      ]\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(fixture.componentInstance.favoritesForm.value.favoriteNames).toEqual(\n      [\n        { name: 'Britta', formal: 'Ms. Perry' },\n        { name: 'Garrett', formal: 'Mr. Lambert' },\n      ]\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 { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, 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 favoritesForm: FormGroup<{\n    favoriteNames: FormControl<LookupDemoPerson[]>;\n  }>;\n\n  public showMoreConfig: SkyLookupShowMoreConfig;\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 = this.favoritesForm.value.favoriteNames;\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 {\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  formal?: string;\n}\n"
+    },
+    {
+      "fileName": "lookup-demo-person.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-demo-person.ts",
+      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n}\n"
+    },
+    {
+      "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]=\"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 { 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    favoriteNames: FormControl<LookupDemoPerson[]>;\n  }>;\n\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 = this.favoritesForm.value.favoriteNames;\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",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-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 { LookupMultipleSelectDemoComponent } from './lookup-multiple-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupMultipleSelectDemoComponent],\n  exports: [LookupMultipleSelectDemoComponent],\n})\nexport class LookupMultipleSelectDemoModule {}\n"
+    },
+    {
+      "fileName": "lookup-demo-person.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-demo-person.ts",
+      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n  formal?: string;\n}\n"
+    },
+    {
+      "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]=\"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 favoritesForm: FormGroup<{\n    favoriteNames: FormControl<LookupDemoPerson[]>;\n  }>;\n\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 = this.favoritesForm.value.favoriteNames;\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",
+      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n}\n"
+    },
+    {
+      "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]=\"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(fixture.componentInstance.favoritesForm.value.favoriteName).toEqual([\n      { name: 'Vicki' },\n    ]);\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 {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} 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: UntypedFormGroup;\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: UntypedFormBuilder) {}\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 UntypedFormControl(this.name),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\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    favoriteName: FormControl<LookupDemoPerson[]>;\n  }>;\n\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 = this.favoritesForm.value.favoriteName;\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",