@skyux/lookup 7.0.0 → 7.1.0

package/documentation.json

@@ -11591,13 +11591,18 @@
     {
       "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"
+      "rawContents": "import { Component } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyAutocompleteSelectionChange,\n} from '@skyux/lookup';\n\nimport { Planet } from './planet';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent {\n  public farthestPlanet: UntypedFormControl;\n\n  public myForm: UntypedFormGroup;\n\n  public planets: Planet[] = [\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: Planet): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(formBuilder: UntypedFormBuilder) {\n    this.farthestPlanet = formBuilder.control({});\n    this.myForm = formBuilder.group({\n      farthestPlanet: this.farthestPlanet,\n    });\n  }\n\n  public onPlanetSelection(args: SkyAutocompleteSelectionChange): void {\n    alert(`You selected ${args.selectedItem.name}`);\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": "planet.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/planet.ts",
+      "rawContents": "export interface Planet {\n  name?: string;\n  description?: string;\n}\n"
+    },
     {
       "fileName": "autocomplete-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-demo.component.html",
@@ -11606,7 +11611,7 @@
     {
       "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"
+      "rawContents": "import { Component } 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 {\n  public colors: { name: string }[] = [\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(formBuilder: UntypedFormBuilder) {\n    this.myForm = formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
     },
     {
       "fileName": "autocomplete-demo.module.ts",
@@ -11621,13 +11626,18 @@
     {
       "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"
+      "rawContents": "import { Component } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunction,\n  SkyAutocompleteSearchFunctionResponse,\n} from '@skyux/lookup';\n\nimport { Ocean } from './ocean';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent {\n  public myForm: UntypedFormGroup;\n\n  public largestOcean: UntypedFormControl;\n\n  public oceans: Ocean[] = [\n    { title: 'Arctic', id: 1 },\n    { title: 'Atlantic', id: 2 },\n    { title: 'Indian', id: 3 },\n    { title: 'Pacific', id: 4 },\n  ];\n\n  constructor(formBuilder: UntypedFormBuilder) {\n    this.largestOcean = formBuilder.control({ title: 'Arctic', id: 1 });\n    this.myForm = formBuilder.group({\n      largestOcean: this.largestOcean,\n    });\n  }\n\n  public getOceanSearchFunction(): SkyAutocompleteSearchFunction {\n    const searchFunction = (\n      searchText: string,\n      oceans: Ocean[]\n    ): SkyAutocompleteSearchFunctionResponse => {\n      return new Promise((resolve) => {\n        const searchTextLower = searchText.toLowerCase();\n\n        const results = oceans.filter((ocean: Ocean) => {\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"
     },
     {
       "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": "ocean.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/ocean.ts",
+      "rawContents": "export interface Ocean {\n  id: number;\n  title: string;\n}\n"
+    },
     {
       "fileName": "autocomplete-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-demo.component.html",
@@ -11636,7 +11646,7 @@
     {
       "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"
+      "rawContents": "import { Component } 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 {\n  public colors: { name: string }[] = [\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: { name: string }): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(formBuilder: UntypedFormBuilder) {\n    this.myForm = formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
     },
     {
       "fileName": "autocomplete-demo.module.ts",
@@ -11651,7 +11661,7 @@
     {
       "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"
+      "rawContents": "import { Component } from '@angular/core';\nimport {\n  UntypedFormControl,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\n\n@Component({\n  selector: 'app-country-field-demo',\n  templateUrl: './country-field-demo.component.html',\n})\nexport class CountryFieldDemoComponent {\n  public countryControl: UntypedFormControl;\n\n  public countryForm: UntypedFormGroup;\n\n  constructor() {\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",
@@ -11676,12 +11686,12 @@
     {
       "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"
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, 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(): Promise<{\n    lookupHarness: SkyLookupHarness | null;\n    fixture: ComponentFixture<LookupAsyncDemoComponent>;\n  }> {\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"
+      "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[] | null>;\n  }>;\n\n  #searchSvc: LookupAsyncDemoService;\n\n  constructor(formBuilder: FormBuilder, searchSvc: LookupAsyncDemoService) {\n    this.#searchSvc = searchSvc;\n\n    const names = new FormControl<LookupDemoPerson[]>([{ name: 'Shirley' }]);\n\n    this.favoritesForm = formBuilder.group({\n      favoriteNames: names,\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",
@@ -11706,7 +11716,7 @@
     {
       "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"
+      "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) =>\n        this.peopleForm.value.people && this.peopleForm.value.people[index]\n    );\n\n    this.#modalInstance.save(selectedPeople);\n  }\n}\n"
     },
     {
       "fileName": "lookup-custom-picker-demo.component.html",
@@ -11721,12 +11731,12 @@
     {
       "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"
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, 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(): Promise<{\n    lookupHarness: SkyLookupHarness | null;\n    fixture: ComponentFixture<LookupCustomPickerDemoComponent>;\n  }> {\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 allResultHarnesses = await lookupHarness?.getSearchResults();\n    const firstResultHarness = allResultHarnesses && allResultHarnesses[0];\n\n    if (firstResultHarness) {\n      await firstResultHarness.select();\n    }\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"
+      "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[] | null>;\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): boolean => {\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): void => {\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",
@@ -11761,12 +11771,12 @@
     {
       "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"
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, 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(): Promise<{\n    lookupHarness: SkyLookupHarness | null;\n    fixture: ComponentFixture<LookupMultipleSelectDemoComponent>;\n  }> {\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"
+      "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[] | null>;\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): boolean => {\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",
@@ -11791,12 +11801,12 @@
     {
       "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"
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, 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(): Promise<{\n    lookupHarness: SkyLookupHarness | null;\n    fixture: ComponentFixture<LookupResultTemplatesDemoComponent>;\n  }> {\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 =\n      results &&\n      (await results[0].queryHarness(LookupResultTemplatesItemHarness));\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 =\n      results &&\n      (await results[0].queryHarness(LookupResultTemplatesItemHarness));\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 allResultHarnesses = await lookupHarness?.getSearchResults();\n    const firstResultHarness = allResultHarnesses && allResultHarnesses[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"
+      "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[] | null>;\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    if (this.showMoreConfig.nativePickerConfig) {\n      this.showMoreConfig.nativePickerConfig.itemTemplate = template;\n    } else {\n      this.showMoreConfig.nativePickerConfig = { itemTemplate: template };\n    }\n  }\n\n  constructor(formBuilder: FormBuilder) {\n    this.favoritesForm = formBuilder.group({\n      favoriteNames: [[this.people[15]]],\n    });\n\n    this.searchFilters = [\n      (_, item): boolean => {\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",
@@ -11826,18 +11836,23 @@
     {
       "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"
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, 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(): Promise<{\n    lookupHarness: SkyLookupHarness | null;\n    fixture: ComponentFixture<LookupSingleSelectDemoComponent>;\n  }> {\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 { 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"
+      "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[] | null>;\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): boolean => {\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",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-single-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 { LookupSingleSelectDemoComponent } from './lookup-single-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupSingleSelectDemoComponent],\n  exports: [LookupSingleSelectDemoComponent],\n})\nexport class LookupSingleSelectDemoModule {}\n"
     },
+    {
+      "fileName": "lookup-demo-item.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/search/basic/lookup-demo-item.ts",
+      "rawContents": "export interface LookupDemoItem {\n  title: string;\n  note: string;\n}\n"
+    },
     {
       "fileName": "search-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/search/basic/search-demo.component.html",
@@ -11846,7 +11861,7 @@
     {
       "fileName": "search-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/search/basic/search-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-search-demo',\n  templateUrl: './search-demo.component.html',\n})\nexport class SearchDemoComponent {\n  public displayedItems: any;\n\n  private items: any[] = [\n    {\n      title: 'Call Robert Hernandez',\n      note: 'Robert recently gave a very generous gift. We should call to thank him.',\n    },\n    {\n      title: 'Send invitation to ball',\n      note: \"The Spring Ball is coming up soon. Let's get those invitations out!\",\n    },\n    {\n      title: 'Clean up desk',\n      note: 'File and organize papers.',\n    },\n    {\n      title: 'Investigate leads',\n      note: 'Check out leads for important charity event funding.',\n    },\n    {\n      title: 'Send thank you note',\n      note: 'Send a thank you note to Timothy for his donation.',\n    },\n  ];\n\n  public searchText: string;\n\n  constructor() {\n    this.displayedItems = this.items;\n  }\n\n  public searchApplied(searchText: string): void {\n    let filteredItems = this.items;\n    this.searchText = searchText;\n\n    if (searchText) {\n      filteredItems = this.items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            (property === 'title' || property === 'note')\n          ) {\n            if (item[property].indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n    this.displayedItems = filteredItems;\n  }\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { LookupDemoItem } from './lookup-demo-item';\n\n@Component({\n  selector: 'app-search-demo',\n  templateUrl: './search-demo.component.html',\n})\nexport class SearchDemoComponent {\n  public displayedItems: LookupDemoItem[];\n\n  private items: LookupDemoItem[] = [\n    {\n      title: 'Call Robert Hernandez',\n      note: 'Robert recently gave a very generous gift. We should call to thank him.',\n    },\n    {\n      title: 'Send invitation to ball',\n      note: \"The Spring Ball is coming up soon. Let's get those invitations out!\",\n    },\n    {\n      title: 'Clean up desk',\n      note: 'File and organize papers.',\n    },\n    {\n      title: 'Investigate leads',\n      note: 'Check out leads for important charity event funding.',\n    },\n    {\n      title: 'Send thank you note',\n      note: 'Send a thank you note to Timothy for his donation.',\n    },\n  ];\n\n  public searchText = '';\n\n  constructor() {\n    this.displayedItems = this.items;\n  }\n\n  public searchApplied(searchText: string): void {\n    let filteredItems = this.items;\n    this.searchText = searchText;\n\n    if (searchText) {\n      filteredItems = this.items.filter(function (item: LookupDemoItem) {\n        let property: keyof typeof item;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            (property === 'title' || property === 'note')\n          ) {\n            if (item[property].indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n    this.displayedItems = filteredItems;\n  }\n}\n"
     },
     {
       "fileName": "search-demo.module.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/lookup",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -46,15 +46,15 @@
     "@angular/core": "^14.2.11",
     "@angular/forms": "^14.2.11",
     "@angular/platform-browser": "^14.2.11",
-    "@skyux-sdk/testing": "7.0.0",
-    "@skyux/core": "7.0.0",
-    "@skyux/forms": "7.0.0",
-    "@skyux/i18n": "7.0.0",
-    "@skyux/indicators": "7.0.0",
-    "@skyux/layout": "7.0.0",
-    "@skyux/lists": "7.0.0",
-    "@skyux/modals": "7.0.0",
-    "@skyux/theme": "7.0.0"
+    "@skyux-sdk/testing": "7.1.0",
+    "@skyux/core": "7.1.0",
+    "@skyux/forms": "7.1.0",
+    "@skyux/i18n": "7.1.0",
+    "@skyux/indicators": "7.1.0",
+    "@skyux/layout": "7.1.0",
+    "@skyux/lists": "7.1.0",
+    "@skyux/modals": "7.1.0",
+    "@skyux/theme": "7.1.0"
   },
   "dependencies": {
     "intl-tel-input": "17.0.19",