@skyux/lookup 8.7.2 → 9.0.0-alpha.1

package/documentation.json

@@ -14555,214 +14555,204 @@
   },
   "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 } 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": "selection-modal-demo.service.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.service.ts",
+      "rawContents": "import { Injectable } from '@angular/core';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalAsyncDemoSearchResults } from './selection-modal-demo-search-results';\n\nconst people: SelectionModalDemoPerson[] = [\n  { id: '1', name: 'Abed' },\n  { id: '2', name: 'Alex' },\n  { id: '3', name: 'Ben' },\n  { id: '4', name: 'Britta' },\n  { id: '5', name: 'Buzz' },\n  { id: '6', name: 'Craig' },\n  { id: '7', name: 'Elroy' },\n  { id: '8', name: 'Garrett' },\n  { id: '9', name: 'Ian' },\n  { id: '10', name: 'Jeff' },\n  { id: '11', name: 'Leonard' },\n  { id: '12', name: 'Neil' },\n  { id: '13', name: 'Pierce' },\n  { id: '14', name: 'Preston' },\n  { id: '15', name: 'Rachel' },\n  { id: '16', name: 'Shirley' },\n  { id: '17', name: 'Todd' },\n  { id: '18', name: 'Troy' },\n  { id: '19', name: 'Vaughn' },\n  { id: '20', name: 'Vicki' },\n];\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SelectionModalDemoService {\n  public search(\n    searchText: string\n  ): Observable<SelectionModalAsyncDemoSearchResults> {\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": "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": "selection-modal-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkySelectionModalModule } from '@skyux/lookup';\n\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\n\n@NgModule({\n  declarations: [SelectionModalDemoComponent],\n  exports: [SelectionModalDemoComponent],\n  imports: [CommonModule, SkySelectionModalModule],\n})\nexport class SelectionModalDemoModule {}\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": "selection-modal-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport {\n  SkySelectionModalSearchResult,\n  SkySelectionModalService,\n} from '@skyux/lookup';\n\nimport { map } from 'rxjs/operators';\n\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\n@Component({\n  selector: 'app-selection-modal-demo',\n  templateUrl: './selection-modal-demo.component.html',\n})\nexport class SelectionModalDemoComponent {\n  public selectedPeople: SelectionModalDemoPerson[] | undefined;\n\n  #searchSvc: SelectionModalDemoService;\n  #selectionModalSvc: SkySelectionModalService;\n\n  constructor(\n    searchSvc: SelectionModalDemoService,\n    selectionModalSvc: SkySelectionModalService\n  ) {\n    this.#searchSvc = searchSvc;\n    this.#selectionModalSvc = selectionModalSvc;\n  }\n\n  public showSelectionModal(): void {\n    const instance = this.#selectionModalSvc.open({\n      descriptorProperty: 'name',\n      idProperty: 'id',\n      searchAsync: (args) =>\n        this.#searchSvc.search(args.searchText).pipe(\n          map(\n            (results): SkySelectionModalSearchResult => ({\n              hasMore: results.hasMore,\n              items: results.people,\n              totalCount: results.totalCount,\n            })\n          )\n        ),\n      selectMode: 'single',\n    });\n\n    instance.closed.subscribe((args) => {\n      if (args.reason === 'save') {\n        this.selectedPeople = args.selectedItems as SelectionModalDemoPerson[];\n      }\n    });\n  }\n}\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": "selection-modal-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkySelectionModalHarness } from '@skyux/lookup/testing';\n\nimport { of } from 'rxjs';\n\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\nimport { SelectionModalDemoModule } from './selection-modal-demo.module';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\ndescribe('Selection modal demo', () => {\n  let mockSvc: jasmine.SpyObj<SelectionModalDemoService>;\n\n  async function setupTest(): Promise<{\n    harness: SkySelectionModalHarness;\n    fixture: ComponentFixture<SelectionModalDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(SelectionModalDemoComponent);\n    const openBtn = fixture.nativeElement.querySelector(\n      '.selection-modal-demo-show-btn'\n    );\n\n    openBtn.click();\n    fixture.detectChanges();\n\n    const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n\n    const harness = await rootLoader.getHarness(SkySelectionModalHarness);\n    return { harness, 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('SelectionModalDemoService', ['search']);\n\n    mockSvc.search.and.callFake((searchText) => {\n      return of({\n        hasMore: false,\n        people:\n          searchText === 'ra'\n            ? [\n                {\n                  id: '1',\n                  name: 'Rachel',\n                },\n              ]\n            : [],\n        totalCount: 1,\n      });\n    });\n\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, SelectionModalDemoModule],\n    });\n  });\n\n  it('should update the selected items list when an item is selected', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.saveAndClose();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(1);\n    expect(selectedItemEls[0].innerText.trim()).toBe('Rachel');\n  });\n\n  it('should not update the selected items list when the user cancels the selection modal', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.cancel();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(0);\n  });\n});\n"
     },
     {
-      "fileName": "autocomplete-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-demo.component.ts",
-      "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": "selection-modal-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.component.html",
+      "rawContents": "<div class=\"sky-margin-stacked-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-demo-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n<div *ngIf=\"selectedPeople?.length\">\n  Selected people:\n  <ul class=\"selection-modal-demo-selected\">\n    <li *ngFor=\"let selectedPerson of selectedPeople\">\n      {{ selectedPerson.name }}\n    </li>\n  </ul>\n</div>\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 { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [CommonModule, ReactiveFormsModule, SkyAutocompleteModule],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
+      "fileName": "selection-modal-demo-search-results.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo-search-results.ts",
+      "rawContents": "import { SelectionModalDemoPerson } from './selection-modal-demo-person';\n\nexport interface SelectionModalAsyncDemoSearchResults {\n  hasMore: boolean;\n  people: SelectionModalDemoPerson[];\n  totalCount: number;\n}\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": "selection-modal-demo-person.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo-person.ts",
+      "rawContents": "export interface SelectionModalDemoPerson {\n  id: string;\n  name: string;\n}\n"
     },
     {
-      "fileName": "autocomplete-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-demo.component.ts",
-      "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": "selection-modal-demo.service.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.service.ts",
+      "rawContents": "import { Injectable } from '@angular/core';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalAsyncDemoSearchResults } from './selection-modal-demo-search-results';\n\nconst people: SelectionModalDemoPerson[] = [\n  { id: '1', name: 'Abed' },\n  { id: '2', name: 'Alex' },\n  { id: '3', name: 'Ben' },\n  { id: '4', name: 'Britta' },\n  { id: '5', name: 'Buzz' },\n  { id: '6', name: 'Craig' },\n  { id: '7', name: 'Elroy' },\n  { id: '8', name: 'Garrett' },\n  { id: '9', name: 'Ian' },\n  { id: '10', name: 'Jeff' },\n  { id: '11', name: 'Leonard' },\n  { id: '12', name: 'Neil' },\n  { id: '13', name: 'Pierce' },\n  { id: '14', name: 'Preston' },\n  { id: '15', name: 'Rachel' },\n  { id: '16', name: 'Shirley' },\n  { id: '17', name: 'Todd' },\n  { id: '18', name: 'Troy' },\n  { id: '19', name: 'Vaughn' },\n  { id: '20', name: 'Vicki' },\n];\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SelectionModalDemoService {\n  public addItem(item: SelectionModalDemoPerson): void {\n    people.push(item);\n  }\n\n  public search(\n    searchText: string\n  ): Observable<SelectionModalAsyncDemoSearchResults> {\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": "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": "selection-modal-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-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 { SkySelectionModalModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { SelectionModalDemoAddItemComponent } from './selection-modal-demo-add-item.component';\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\n\n@NgModule({\n  declarations: [\n    SelectionModalDemoAddItemComponent,\n    SelectionModalDemoComponent,\n  ],\n  exports: [SelectionModalDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkySelectionModalModule,\n  ],\n})\nexport class SelectionModalDemoModule {}\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": "selection-modal-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.component.ts",
+      "rawContents": "import { Component, OnDestroy, inject } from '@angular/core';\nimport {\n  SkySelectionModalAddClickEventArgs,\n  SkySelectionModalCloseArgs,\n  SkySelectionModalSearchResult,\n  SkySelectionModalService,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { Subscription } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\nimport { SelectionModalDemoAddItemComponent } from './selection-modal-demo-add-item.component';\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\n@Component({\n  selector: 'app-selection-modal-demo',\n  templateUrl: './selection-modal-demo.component.html',\n})\nexport class SelectionModalDemoComponent implements OnDestroy {\n  public selectedPeople: SelectionModalDemoPerson[] | undefined;\n\n  #modalService = inject(SkyModalService);\n  #searchSvc = inject(SelectionModalDemoService);\n  #selectionModalSvc = inject(SkySelectionModalService);\n  #subscriptions = new Subscription();\n\n  public ngOnDestroy(): void {\n    this.#subscriptions.unsubscribe();\n  }\n\n  public showSelectionModal(): void {\n    const instance = this.#selectionModalSvc.open({\n      descriptorProperty: 'name',\n      idProperty: 'id',\n      searchAsync: (args) =>\n        this.#searchSvc.search(args.searchText).pipe(\n          map(\n            (results): SkySelectionModalSearchResult => ({\n              hasMore: results.hasMore,\n              items: results.people,\n              totalCount: results.totalCount,\n            })\n          )\n        ),\n      selectMode: 'single',\n      showAddButton: true,\n      addClick: (args: SkySelectionModalAddClickEventArgs) => {\n        const modal = this.#modalService.open(\n          SelectionModalDemoAddItemComponent\n        );\n        this.#subscriptions.add(\n          modal.closed.subscribe((close: SkyModalCloseArgs) => {\n            if (close.reason === 'save') {\n              this.#searchSvc.addItem(close.data);\n              args.itemAdded({ item: close.data });\n            }\n          })\n        );\n      },\n    });\n\n    this.#subscriptions.add(\n      instance.closed.subscribe((args: SkySelectionModalCloseArgs) => {\n        if (args.reason === 'save') {\n          this.selectedPeople =\n            args.selectedItems as SelectionModalDemoPerson[];\n        }\n      })\n    );\n  }\n}\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": "selection-modal-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkySelectionModalHarness } from '@skyux/lookup/testing';\n\nimport { of } from 'rxjs';\n\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\nimport { SelectionModalDemoModule } from './selection-modal-demo.module';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\ndescribe('Selection modal demo', () => {\n  let mockSvc: jasmine.SpyObj<SelectionModalDemoService>;\n\n  async function setupTest(): Promise<{\n    harness: SkySelectionModalHarness;\n    fixture: ComponentFixture<SelectionModalDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(SelectionModalDemoComponent);\n    const openBtn = fixture.nativeElement.querySelector(\n      '.selection-modal-demo-show-btn'\n    );\n\n    openBtn.click();\n    fixture.detectChanges();\n\n    const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n\n    const harness = await rootLoader.getHarness(SkySelectionModalHarness);\n    return { harness, 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('SelectionModalDemoService', ['search']);\n\n    mockSvc.search.and.callFake((searchText) => {\n      return of({\n        hasMore: false,\n        people:\n          searchText === 'ra'\n            ? [\n                {\n                  id: '1',\n                  name: 'Rachel',\n                },\n              ]\n            : [],\n        totalCount: 1,\n      });\n    });\n\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, SelectionModalDemoModule],\n    });\n  });\n\n  it('should update the selected items list when an item is selected', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.saveAndClose();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(1);\n    expect(selectedItemEls[0].innerText.trim()).toBe('Rachel');\n  });\n\n  it('should not update the selected items list when the user cancels the selection modal', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.cancel();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(0);\n  });\n});\n"
     },
     {
-      "fileName": "autocomplete-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-demo.component.ts",
-      "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": "selection-modal-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.component.html",
+      "rawContents": "<div class=\"sky-margin-stacked-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-demo-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n<div *ngIf=\"selectedPeople?.length\">\n  Selected people:\n  <ul class=\"selection-modal-demo-selected\">\n    <li *ngFor=\"let selectedPerson of selectedPeople\">\n      {{ selectedPerson.name }}\n    </li>\n  </ul>\n</div>\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": "selection-modal-demo-search-results.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-search-results.ts",
+      "rawContents": "import { SelectionModalDemoPerson } from './selection-modal-demo-person';\n\nexport interface SelectionModalAsyncDemoSearchResults {\n  hasMore: boolean;\n  people: SelectionModalDemoPerson[];\n  totalCount: number;\n}\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": "selection-modal-demo-person.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-person.ts",
+      "rawContents": "export interface SelectionModalDemoPerson {\n  id: string;\n  name: string;\n}\n"
     },
     {
-      "fileName": "country-field-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/country-field/basic/country-field-demo.component.ts",
-      "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": "selection-modal-demo-add-item.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-add-item.component.ts",
+      "rawContents": "import { Component, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\n\nlet nextId = 21;\n\n@Component({\n  selector: 'app-selection-modal-demo-add-item',\n  templateUrl: './selection-modal-demo-add-item.component.html',\n})\nexport class SelectionModalDemoAddItemComponent {\n  public readonly formGroup: FormGroup;\n\n  #modal = inject(SkyModalInstance);\n\n  constructor() {\n    this.formGroup = inject(FormBuilder).group({\n      id: [`${nextId++}`],\n      name: ['', Validators.required],\n    });\n  }\n\n  public close() {\n    this.#modal.close();\n  }\n\n  public save() {\n    if (this.formGroup.valid) {\n      this.#modal.close(this.formGroup.value, 'save');\n    } else {\n      this.formGroup.markAllAsTouched();\n    }\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": "selection-modal-demo-add-item.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-add-item.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header>\n    <h2>Add Item</h2>\n  </sky-modal-header>\n  <sky-modal-content>\n    <form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n      <sky-input-box>\n        <label class=\"sky-control-label\">Name</label>\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n          class=\"sky-form-control\"\n        />\n      </sky-input-box>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-default\" (click)=\"close()\">Cancel</button>\n    <button class=\"sky-btn sky-btn-primary\" (click)=\"save()\">Add</button>\n  </sky-modal-footer>\n</sky-modal>\n"
     },
     {
-      "fileName": "lookup-async-demo-search-results.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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": "search-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/search/basic/search-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { SearchDemoComponent } from './search-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyRepeaterModule, SkySearchModule, SkyToolbarModule],\n  declarations: [SearchDemoComponent],\n  exports: [SearchDemoComponent],\n})\nexport class SearchDemoModule {}\n"
     },
     {
-      "fileName": "lookup-async-demo.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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        [showAddButton]=\"true\"\n        (addClick)=\"addClick($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": "search-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/search/basic/search-demo.component.ts",
+      "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": "lookup-async-demo.component.scss",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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": "search-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/search/basic/search-demo.component.html",
+      "rawContents": "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default sky-demo-search-bar-item\"\n      (click)=\"searchApplied('Robert')\"\n    >\n      Predefined search text\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search\n      [searchText]=\"searchText\"\n      [debounceTime]=\"250\"\n      (searchApply)=\"searchApplied($event)\"\n      (searchChange)=\"searchApplied($event)\"\n    >\n    </sky-search>\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  <sky-repeater-item *ngFor=\"let item of displayedItems\">\n    <sky-repeater-item-title>\n      {{ item.title }}\n    </sky-repeater-item-title>\n    <sky-repeater-item-content>\n      <div>\n        {{ item.note }}\n      </div>\n    </sky-repeater-item-content>\n  </sky-repeater-item>\n</sky-repeater>\n"
     },
     {
-      "fileName": "lookup-async-demo.component.spec.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.component.spec.ts",
-      "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                  id: '21',\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      [\n        { id: '16', name: 'Shirley' },\n        { id: '21', name: 'Bernard' },\n      ]\n    );\n  });\n});\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": "lookup-async-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.component.ts",
-      "rawContents": "import { Component, OnDestroy, OnInit, inject } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyWaitService } from '@skyux/indicators';\nimport {\n  SkyAutocompleteSearchAsyncArgs,\n  SkyLookupAddClickEventArgs,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { Subscription } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\nimport { LookupAsyncDemoService } from './lookup-async-demo.service';\nimport { LookupDemoAddItemComponent } from './lookup-demo-add-item.component';\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, OnDestroy {\n  public favoritesForm: FormGroup<{\n    favoriteNames: FormControl<LookupDemoPerson[] | null>;\n  }>;\n\n  #modalService = inject(SkyModalService);\n  #subscriptions = new Subscription();\n  #svc = inject(LookupAsyncDemoService);\n  #waitSvc = inject(SkyWaitService);\n\n  constructor(formBuilder: FormBuilder) {\n    const names = new FormControl<LookupDemoPerson[]>([\n      { id: '16', name: 'Shirley' },\n    ]);\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 ngOnDestroy(): void {\n    this.#subscriptions.unsubscribe();\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.#svc.search(args.searchText).pipe(\n      map((result) => ({\n        hasMore: result.hasMore,\n        items: result.people,\n        totalCount: result.totalCount,\n      }))\n    );\n  }\n\n  public addClick(args: SkyLookupAddClickEventArgs): void {\n    const modal = this.#modalService.open(LookupDemoAddItemComponent);\n    this.#subscriptions.add(\n      modal.closed.subscribe((close: SkyModalCloseArgs) => {\n        if (close.reason === 'save') {\n          this.#subscriptions.add(\n            this.#waitSvc\n              .blockingWrap(this.#svc.addPerson(close.data))\n              .subscribe((data) => {\n                args.itemAdded({\n                  item: close.data,\n                  data: data,\n                });\n              })\n          );\n        }\n      })\n    );\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 { 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    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupSingleSelectDemoComponent],\n  exports: [LookupSingleSelectDemoComponent],\n})\nexport class LookupSingleSelectDemoModule {}\n"
     },
     {
-      "fileName": "lookup-async-demo.module.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { LookupAsyncDemoComponent } from './lookup-async-demo.component';\nimport { LookupDemoAddItemComponent } from './lookup-demo-add-item.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupAsyncDemoComponent, LookupDemoAddItemComponent],\n  exports: [LookupAsyncDemoComponent],\n})\nexport class LookupAsyncDemoModule {}\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[] | 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-async-demo.service.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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  { id: '1', name: 'Abed' },\n  { id: '2', name: 'Alex' },\n  { id: '3', name: 'Ben' },\n  { id: '4', name: 'Britta' },\n  { id: '5', name: 'Buzz' },\n  { id: '6', name: 'Craig' },\n  { id: '7', name: 'Elroy' },\n  { id: '8', name: 'Garrett' },\n  { id: '9', name: 'Ian' },\n  { id: '10', name: 'Jeff' },\n  { id: '11', name: 'Leonard' },\n  { id: '12', name: 'Neil' },\n  { id: '13', name: 'Pierce' },\n  { id: '14', name: 'Preston' },\n  { id: '15', name: 'Rachel' },\n  { id: '16', name: 'Shirley' },\n  { id: '17', name: 'Todd' },\n  { id: '18', name: 'Troy' },\n  { id: '19', name: 'Vaughn' },\n  { id: '20', 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  public addPerson(person: LookupDemoPerson): Observable<LookupDemoPerson[]> {\n    // Simulate adding a person with a network call.\n    if (!people.some((item) => item.name === person.name)) {\n      people.unshift(person);\n    }\n\n    return of(people.slice()).pipe(delay(800));\n  }\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 { 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('be');\n    await lookupHarness?.selectSearchResult({\n      text: 'Ben',\n    });\n\n    expect(fixture.componentInstance.favoritesForm.value.favoriteName).toEqual([\n      { name: 'Ben' },\n    ]);\n  });\n});\n"
     },
     {
-      "fileName": "lookup-demo-add-item.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-demo-add-item.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header>\n    <h2>Add Item</h2>\n  </sky-modal-header>\n  <sky-modal-content>\n    <form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n      <sky-input-box>\n        <label class=\"sky-control-label\">Name</label>\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n          class=\"sky-form-control\"\n        />\n      </sky-input-box>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-default\" (click)=\"close()\">Cancel</button>\n    <button class=\"sky-btn sky-btn-primary\" (click)=\"save()\">Add</button>\n  </sky-modal-footer>\n</sky-modal>\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-demo-add-item.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-demo-add-item.component.ts",
-      "rawContents": "import { Component, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\n\nlet nextId = 21;\n\n@Component({\n  selector: 'app-lookup-demo-add-item',\n  templateUrl: './lookup-demo-add-item.component.html',\n})\nexport class LookupDemoAddItemComponent {\n  public readonly formGroup: FormGroup;\n\n  #modal = inject(SkyModalInstance);\n\n  constructor() {\n    this.formGroup = inject(FormBuilder).group({\n      id: [`${nextId++}`],\n      name: ['', Validators.required],\n    });\n  }\n\n  public close() {\n    this.#modal.close();\n  }\n\n  public save() {\n    if (this.formGroup.valid) {\n      this.#modal.close(this.formGroup.value, 'save');\n    } else {\n      this.formGroup.markAllAsTouched();\n    }\n  }\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\" labelText=\"Favorite name\">\n      <sky-lookup\n        formControlName=\"favoriteName\"\n        selectMode=\"single\"\n        (addClick)=\"onAddButtonClicked()\"\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-demo-person.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-demo-person.ts",
-      "rawContents": "export interface LookupDemoPerson {\n  id: string;\n  name: string;\n}\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"
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-demo-person.ts",
+      "rawContents": "export interface LookupDemoPerson {\n  name: string;\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\n      data-sky-id=\"favorite-names-field\"\n      labelText=\"Favorite name(s)\"\n    >\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        idProperty=\"name\"\n        [enableShowMore]=\"true\"\n        (searchAsync)=\"searchAsync($event)\"\n        [showAddButton]=\"true\"\n        (addClick)=\"addClick($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-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-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-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 { 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    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupResultTemplatesDemoComponent],\n  exports: [LookupResultTemplatesDemoComponent],\n})\nexport class LookupResultTemplatesDemoModule {}\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 { 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-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[] | 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-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 { SkyWaitService } from '@skyux/indicators';\nimport {\n  SkyAutocompleteSearchAsyncArgs,\n  SkyLookupAddClickEventArgs,\n} 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  #svc: LookupAsyncDemoService;\n  #waitSvc: SkyWaitService;\n\n  constructor(\n    formBuilder: FormBuilder,\n    svc: LookupAsyncDemoService,\n    waitSvc: SkyWaitService\n  ) {\n    this.#svc = svc;\n    this.#waitSvc = waitSvc;\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.#svc.search(args.searchText).pipe(\n      map((result) => ({\n        hasMore: result.hasMore,\n        items: result.people,\n        totalCount: result.totalCount,\n      }))\n    );\n  }\n\n  public addClick(args: SkyLookupAddClickEventArgs): void {\n    const person: LookupDemoPerson = {\n      name: 'Newman',\n    };\n\n    this.#waitSvc.blockingWrap(this.#svc.addPerson(person)).subscribe(() => {\n      args.itemAdded({\n        item: person,\n      });\n    });\n  }\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 { 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('be');\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('Abed');\n    await expectAsync(templateItemHarness?.getFormalName()).toBeResolvedTo(\n      'Mr. Nadir'\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('be');\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('Abed');\n    await expectAsync(templateItemHarness?.getFormalName()).toBeResolvedTo(\n      'Mr. Nadir'\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('be');\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: 'Abed', formal: 'Mr. Nadir' },\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 { 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    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupAsyncDemoComponent],\n  exports: [LookupAsyncDemoComponent],\n})\nexport class LookupAsyncDemoModule {}\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-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  public addPerson(person: LookupDemoPerson): Observable<number> {\n    // Simulate adding a person with a network call.\n    if (!people.some((item) => item.name === person.name)) {\n      people.unshift(person);\n    }\n\n    return of(1).pipe(delay(800));\n  }\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\n      data-sky-id=\"favorite-names-field\"\n      labelText=\"Favorite names\"\n    >\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        (addClick)=\"onAddButtonClicked()\"\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-demo-person.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-demo-person.ts",
-      "rawContents": "export interface LookupDemoPerson {\n  name: string;\n}\n"
+      "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-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-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 { 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    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupMultipleSelectDemoComponent],\n  exports: [LookupMultipleSelectDemoComponent],\n})\nexport class LookupMultipleSelectDemoModule {}\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) =>\n        this.peopleForm.value.people && this.peopleForm.value.people[index]\n    );\n\n    this.#modalInstance.save(selectedPeople);\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[] | 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-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\n      data-sky-id=\"favorite-names-field\"\n      labelText=\"Favorite names\"\n    >\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        (addClick)=\"onAddButtonClicked()\"\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-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 { 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('be');\n    await lookupHarness?.selectSearchResult({\n      text: 'Ben',\n    });\n\n    expect(\n      fixture.componentInstance.favoritesForm.controls.favoriteNames.value\n    ).toEqual([{ name: 'Shirley' }, { name: 'Ben' }]);\n  });\n});\n"
     },
     {
-      "fileName": "lookup-custom-picker-demo.component.scss",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo.component.scss",
+      "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-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 { 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('Be');\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: 'Abed', formal: 'Mr. Nadir' },\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/deselecting 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(2); // Ben (Mr. Chang)\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: 'Ben', formal: 'Mr. Chang' },\n        { name: 'Garrett', formal: 'Mr. Lambert' },\n      ]\n    );\n  });\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\n      data-sky-id=\"favorite-names-field\"\n      labelText=\"Favorite names\"\n    >\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        (addClick)=\"onAddButtonClicked()\"\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-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[] | 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-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-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 {\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    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-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-custom-picker-harness.ts",
@@ -14770,204 +14760,214 @@
       "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-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 {\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    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-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-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[] | 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-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\n      data-sky-id=\"favorite-names-field\"\n      labelText=\"Favorite names\"\n    >\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        (addClick)=\"onAddButtonClicked()\"\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-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 { 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('Be');\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: 'Abed', formal: 'Mr. Nadir' },\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/deselecting 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(2); // Ben (Mr. Chang)\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: 'Ben', formal: 'Mr. Chang' },\n        { name: 'Garrett', formal: 'Mr. Lambert' },\n      ]\n    );\n  });\n});\n"
     },
     {
-      "fileName": "lookup-multiple-demo.component.scss",
-      "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-demo.component.scss",
+      "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-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 { 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('be');\n    await lookupHarness?.selectSearchResult({\n      text: 'Ben',\n    });\n\n    expect(\n      fixture.componentInstance.favoritesForm.controls.favoriteNames.value\n    ).toEqual([{ name: 'Shirley' }, { name: 'Ben' }]);\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\n      data-sky-id=\"favorite-names-field\"\n      labelText=\"Favorite names\"\n    >\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        (addClick)=\"onAddButtonClicked()\"\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-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[] | 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-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) =>\n        this.peopleForm.value.people && this.peopleForm.value.people[index]\n    );\n\n    this.#modalInstance.save(selectedPeople);\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 { 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    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupMultipleSelectDemoComponent],\n  exports: [LookupMultipleSelectDemoComponent],\n})\nexport class LookupMultipleSelectDemoModule {}\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-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"
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-demo-person.ts",
+      "rawContents": "export interface LookupDemoPerson {\n  name: 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\n      data-sky-id=\"favorite-names-field\"\n      labelText=\"Favorite names\"\n    >\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        (addClick)=\"onAddButtonClicked()\"\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-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  public addPerson(person: LookupDemoPerson): Observable<number> {\n    // Simulate adding a person with a network call.\n    if (!people.some((item) => item.name === person.name)) {\n      people.unshift(person);\n    }\n\n    return of(1).pipe(delay(800));\n  }\n}\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-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 { 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    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupAsyncDemoComponent],\n  exports: [LookupAsyncDemoComponent],\n})\nexport class LookupAsyncDemoModule {}\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 { 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('be');\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('Abed');\n    await expectAsync(templateItemHarness?.getFormalName()).toBeResolvedTo(\n      'Mr. Nadir'\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('be');\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('Abed');\n    await expectAsync(templateItemHarness?.getFormalName()).toBeResolvedTo(\n      'Mr. Nadir'\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('be');\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: 'Abed', formal: 'Mr. Nadir' },\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 { SkyWaitService } from '@skyux/indicators';\nimport {\n  SkyAutocompleteSearchAsyncArgs,\n  SkyLookupAddClickEventArgs,\n} 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  #svc: LookupAsyncDemoService;\n  #waitSvc: SkyWaitService;\n\n  constructor(\n    formBuilder: FormBuilder,\n    svc: LookupAsyncDemoService,\n    waitSvc: SkyWaitService\n  ) {\n    this.#svc = svc;\n    this.#waitSvc = waitSvc;\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.#svc.search(args.searchText).pipe(\n      map((result) => ({\n        hasMore: result.hasMore,\n        items: result.people,\n        totalCount: result.totalCount,\n      }))\n    );\n  }\n\n  public addClick(args: SkyLookupAddClickEventArgs): void {\n    const person: LookupDemoPerson = {\n      name: 'Newman',\n    };\n\n    this.#waitSvc.blockingWrap(this.#svc.addPerson(person)).subscribe(() => {\n      args.itemAdded({\n        item: person,\n      });\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[] | 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-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 { 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-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 { 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    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupResultTemplatesDemoComponent],\n  exports: [LookupResultTemplatesDemoComponent],\n})\nexport class LookupResultTemplatesDemoModule {}\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-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-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\n      data-sky-id=\"favorite-names-field\"\n      labelText=\"Favorite name(s)\"\n    >\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        idProperty=\"name\"\n        [enableShowMore]=\"true\"\n        (searchAsync)=\"searchAsync($event)\"\n        [showAddButton]=\"true\"\n        (addClick)=\"addClick($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-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-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"
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-demo-person.ts",
+      "rawContents": "export interface LookupDemoPerson {\n  id: string;\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\" labelText=\"Favorite name\">\n      <sky-lookup\n        formControlName=\"favoriteName\"\n        selectMode=\"single\"\n        (addClick)=\"onAddButtonClicked()\"\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-demo-add-item.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-demo-add-item.component.ts",
+      "rawContents": "import { Component, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\n\nlet nextId = 21;\n\n@Component({\n  selector: 'app-lookup-demo-add-item',\n  templateUrl: './lookup-demo-add-item.component.html',\n})\nexport class LookupDemoAddItemComponent {\n  public readonly formGroup: FormGroup;\n\n  #modal = inject(SkyModalInstance);\n\n  constructor() {\n    this.formGroup = inject(FormBuilder).group({\n      id: [`${nextId++}`],\n      name: ['', Validators.required],\n    });\n  }\n\n  public close() {\n    this.#modal.close();\n  }\n\n  public save() {\n    if (this.formGroup.valid) {\n      this.#modal.close(this.formGroup.value, 'save');\n    } else {\n      this.formGroup.markAllAsTouched();\n    }\n  }\n}\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-demo-add-item.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-demo-add-item.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header>\n    <h2>Add Item</h2>\n  </sky-modal-header>\n  <sky-modal-content>\n    <form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n      <sky-input-box>\n        <label class=\"sky-control-label\">Name</label>\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n          class=\"sky-form-control\"\n        />\n      </sky-input-box>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-default\" (click)=\"close()\">Cancel</button>\n    <button class=\"sky-btn sky-btn-primary\" (click)=\"save()\">Add</button>\n  </sky-modal-footer>\n</sky-modal>\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 { 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('be');\n    await lookupHarness?.selectSearchResult({\n      text: 'Ben',\n    });\n\n    expect(fixture.componentInstance.favoritesForm.value.favoriteName).toEqual([\n      { name: 'Ben' },\n    ]);\n  });\n});\n"
+      "fileName": "lookup-async-demo.service.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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  { id: '1', name: 'Abed' },\n  { id: '2', name: 'Alex' },\n  { id: '3', name: 'Ben' },\n  { id: '4', name: 'Britta' },\n  { id: '5', name: 'Buzz' },\n  { id: '6', name: 'Craig' },\n  { id: '7', name: 'Elroy' },\n  { id: '8', name: 'Garrett' },\n  { id: '9', name: 'Ian' },\n  { id: '10', name: 'Jeff' },\n  { id: '11', name: 'Leonard' },\n  { id: '12', name: 'Neil' },\n  { id: '13', name: 'Pierce' },\n  { id: '14', name: 'Preston' },\n  { id: '15', name: 'Rachel' },\n  { id: '16', name: 'Shirley' },\n  { id: '17', name: 'Todd' },\n  { id: '18', name: 'Troy' },\n  { id: '19', name: 'Vaughn' },\n  { id: '20', 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  public addPerson(person: LookupDemoPerson): Observable<LookupDemoPerson[]> {\n    // Simulate adding a person with a network call.\n    if (!people.some((item) => item.name === person.name)) {\n      people.unshift(person);\n    }\n\n    return of(people.slice()).pipe(delay(800));\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[] | 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-async-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { LookupAsyncDemoComponent } from './lookup-async-demo.component';\nimport { LookupDemoAddItemComponent } from './lookup-demo-add-item.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupAsyncDemoComponent, LookupDemoAddItemComponent],\n  exports: [LookupAsyncDemoComponent],\n})\nexport class LookupAsyncDemoModule {}\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 { 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    SkyInputBoxModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupSingleSelectDemoComponent],\n  exports: [LookupSingleSelectDemoComponent],\n})\nexport class LookupSingleSelectDemoModule {}\n"
+      "fileName": "lookup-async-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.component.ts",
+      "rawContents": "import { Component, OnDestroy, OnInit, inject } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyWaitService } from '@skyux/indicators';\nimport {\n  SkyAutocompleteSearchAsyncArgs,\n  SkyLookupAddClickEventArgs,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { Subscription } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\nimport { LookupAsyncDemoService } from './lookup-async-demo.service';\nimport { LookupDemoAddItemComponent } from './lookup-demo-add-item.component';\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, OnDestroy {\n  public favoritesForm: FormGroup<{\n    favoriteNames: FormControl<LookupDemoPerson[] | null>;\n  }>;\n\n  #modalService = inject(SkyModalService);\n  #subscriptions = new Subscription();\n  #svc = inject(LookupAsyncDemoService);\n  #waitSvc = inject(SkyWaitService);\n\n  constructor(formBuilder: FormBuilder) {\n    const names = new FormControl<LookupDemoPerson[]>([\n      { id: '16', name: 'Shirley' },\n    ]);\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 ngOnDestroy(): void {\n    this.#subscriptions.unsubscribe();\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.#svc.search(args.searchText).pipe(\n      map((result) => ({\n        hasMore: result.hasMore,\n        items: result.people,\n        totalCount: result.totalCount,\n      }))\n    );\n  }\n\n  public addClick(args: SkyLookupAddClickEventArgs): void {\n    const modal = this.#modalService.open(LookupDemoAddItemComponent);\n    this.#subscriptions.add(\n      modal.closed.subscribe((close: SkyModalCloseArgs) => {\n        if (close.reason === 'save') {\n          this.#subscriptions.add(\n            this.#waitSvc\n              .blockingWrap(this.#svc.addPerson(close.data))\n              .subscribe((data) => {\n                args.itemAdded({\n                  item: close.data,\n                  data: data,\n                });\n              })\n          );\n        }\n      })\n    );\n  }\n}\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": "lookup-async-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.component.spec.ts",
+      "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                  id: '21',\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      [\n        { id: '16', name: 'Shirley' },\n        { id: '21', name: 'Bernard' },\n      ]\n    );\n  });\n});\n"
     },
     {
-      "fileName": "search-demo.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/search/basic/search-demo.component.html",
-      "rawContents": "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default sky-demo-search-bar-item\"\n      (click)=\"searchApplied('Robert')\"\n    >\n      Predefined search text\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search\n      [searchText]=\"searchText\"\n      [debounceTime]=\"250\"\n      (searchApply)=\"searchApplied($event)\"\n      (searchChange)=\"searchApplied($event)\"\n    >\n    </sky-search>\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  <sky-repeater-item *ngFor=\"let item of displayedItems\">\n    <sky-repeater-item-title>\n      {{ item.title }}\n    </sky-repeater-item-title>\n    <sky-repeater-item-content>\n      <div>\n        {{ item.note }}\n      </div>\n    </sky-repeater-item-content>\n  </sky-repeater-item>\n</sky-repeater>\n"
+      "fileName": "lookup-async-demo.component.scss",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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": "search-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/search/basic/search-demo.component.ts",
-      "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": "lookup-async-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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        [showAddButton]=\"true\"\n        (addClick)=\"addClick($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": "search-demo.module.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/search/basic/search-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { SearchDemoComponent } from './search-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyRepeaterModule, SkySearchModule, SkyToolbarModule],\n  declarations: [SearchDemoComponent],\n  exports: [SearchDemoComponent],\n})\nexport class SearchDemoModule {}\n"
+      "fileName": "lookup-async-demo-search-results.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/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": "selection-modal-demo-add-item.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-add-item.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header>\n    <h2>Add Item</h2>\n  </sky-modal-header>\n  <sky-modal-content>\n    <form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n      <sky-input-box>\n        <label class=\"sky-control-label\">Name</label>\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n          class=\"sky-form-control\"\n        />\n      </sky-input-box>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-default\" (click)=\"close()\">Cancel</button>\n    <button class=\"sky-btn sky-btn-primary\" (click)=\"save()\">Add</button>\n  </sky-modal-footer>\n</sky-modal>\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": "selection-modal-demo-add-item.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-add-item.component.ts",
-      "rawContents": "import { Component, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\n\nlet nextId = 21;\n\n@Component({\n  selector: 'app-selection-modal-demo-add-item',\n  templateUrl: './selection-modal-demo-add-item.component.html',\n})\nexport class SelectionModalDemoAddItemComponent {\n  public readonly formGroup: FormGroup;\n\n  #modal = inject(SkyModalInstance);\n\n  constructor() {\n    this.formGroup = inject(FormBuilder).group({\n      id: [`${nextId++}`],\n      name: ['', Validators.required],\n    });\n  }\n\n  public close() {\n    this.#modal.close();\n  }\n\n  public save() {\n    if (this.formGroup.valid) {\n      this.#modal.close(this.formGroup.value, 'save');\n    } else {\n      this.formGroup.markAllAsTouched();\n    }\n  }\n}\n"
+      "fileName": "country-field-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/country-field/basic/country-field-demo.component.ts",
+      "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": "selection-modal-demo-person.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-person.ts",
-      "rawContents": "export interface SelectionModalDemoPerson {\n  id: string;\n  name: string;\n}\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": "selection-modal-demo-search-results.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-search-results.ts",
-      "rawContents": "import { SelectionModalDemoPerson } from './selection-modal-demo-person';\n\nexport interface SelectionModalAsyncDemoSearchResults {\n  hasMore: boolean;\n  people: SelectionModalDemoPerson[];\n  totalCount: number;\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": "selection-modal-demo.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.component.html",
-      "rawContents": "<div class=\"sky-margin-stacked-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-demo-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n<div *ngIf=\"selectedPeople?.length\">\n  Selected people:\n  <ul class=\"selection-modal-demo-selected\">\n    <li *ngFor=\"let selectedPerson of selectedPeople\">\n      {{ selectedPerson.name }}\n    </li>\n  </ul>\n</div>\n"
+      "fileName": "autocomplete-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-demo.component.ts",
+      "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": "selection-modal-demo.component.spec.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkySelectionModalHarness } from '@skyux/lookup/testing';\n\nimport { of } from 'rxjs';\n\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\nimport { SelectionModalDemoModule } from './selection-modal-demo.module';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\ndescribe('Selection modal demo', () => {\n  let mockSvc: jasmine.SpyObj<SelectionModalDemoService>;\n\n  async function setupTest(): Promise<{\n    harness: SkySelectionModalHarness;\n    fixture: ComponentFixture<SelectionModalDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(SelectionModalDemoComponent);\n    const openBtn = fixture.nativeElement.querySelector(\n      '.selection-modal-demo-show-btn'\n    );\n\n    openBtn.click();\n    fixture.detectChanges();\n\n    const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n\n    const harness = await rootLoader.getHarness(SkySelectionModalHarness);\n    return { harness, 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('SelectionModalDemoService', ['search']);\n\n    mockSvc.search.and.callFake((searchText) => {\n      return of({\n        hasMore: false,\n        people:\n          searchText === 'ra'\n            ? [\n                {\n                  id: '1',\n                  name: 'Rachel',\n                },\n              ]\n            : [],\n        totalCount: 1,\n      });\n    });\n\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, SelectionModalDemoModule],\n    });\n  });\n\n  it('should update the selected items list when an item is selected', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.saveAndClose();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(1);\n    expect(selectedItemEls[0].innerText.trim()).toBe('Rachel');\n  });\n\n  it('should not update the selected items list when the user cancels the selection modal', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.cancel();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(0);\n  });\n});\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": "selection-modal-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.component.ts",
-      "rawContents": "import { Component, OnDestroy, inject } from '@angular/core';\nimport {\n  SkySelectionModalAddClickEventArgs,\n  SkySelectionModalCloseArgs,\n  SkySelectionModalSearchResult,\n  SkySelectionModalService,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { Subscription } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\nimport { SelectionModalDemoAddItemComponent } from './selection-modal-demo-add-item.component';\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\n@Component({\n  selector: 'app-selection-modal-demo',\n  templateUrl: './selection-modal-demo.component.html',\n})\nexport class SelectionModalDemoComponent implements OnDestroy {\n  public selectedPeople: SelectionModalDemoPerson[] | undefined;\n\n  #modalService = inject(SkyModalService);\n  #searchSvc = inject(SelectionModalDemoService);\n  #selectionModalSvc = inject(SkySelectionModalService);\n  #subscriptions = new Subscription();\n\n  public ngOnDestroy(): void {\n    this.#subscriptions.unsubscribe();\n  }\n\n  public showSelectionModal(): void {\n    const instance = this.#selectionModalSvc.open({\n      descriptorProperty: 'name',\n      idProperty: 'id',\n      searchAsync: (args) =>\n        this.#searchSvc.search(args.searchText).pipe(\n          map(\n            (results): SkySelectionModalSearchResult => ({\n              hasMore: results.hasMore,\n              items: results.people,\n              totalCount: results.totalCount,\n            })\n          )\n        ),\n      selectMode: 'single',\n      showAddButton: true,\n      addClick: (args: SkySelectionModalAddClickEventArgs) => {\n        const modal = this.#modalService.open(\n          SelectionModalDemoAddItemComponent\n        );\n        this.#subscriptions.add(\n          modal.closed.subscribe((close: SkyModalCloseArgs) => {\n            if (close.reason === 'save') {\n              this.#searchSvc.addItem(close.data);\n              args.itemAdded({ item: close.data });\n            }\n          })\n        );\n      },\n    });\n\n    this.#subscriptions.add(\n      instance.closed.subscribe((args: SkySelectionModalCloseArgs) => {\n        if (args.reason === 'save') {\n          this.selectedPeople =\n            args.selectedItems as SelectionModalDemoPerson[];\n        }\n      })\n    );\n  }\n}\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": "selection-modal-demo.module.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-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 { SkySelectionModalModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { SelectionModalDemoAddItemComponent } from './selection-modal-demo-add-item.component';\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\n\n@NgModule({\n  declarations: [\n    SelectionModalDemoAddItemComponent,\n    SelectionModalDemoComponent,\n  ],\n  exports: [SelectionModalDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkySelectionModalModule,\n  ],\n})\nexport class SelectionModalDemoModule {}\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": "selection-modal-demo.service.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.service.ts",
-      "rawContents": "import { Injectable } from '@angular/core';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalAsyncDemoSearchResults } from './selection-modal-demo-search-results';\n\nconst people: SelectionModalDemoPerson[] = [\n  { id: '1', name: 'Abed' },\n  { id: '2', name: 'Alex' },\n  { id: '3', name: 'Ben' },\n  { id: '4', name: 'Britta' },\n  { id: '5', name: 'Buzz' },\n  { id: '6', name: 'Craig' },\n  { id: '7', name: 'Elroy' },\n  { id: '8', name: 'Garrett' },\n  { id: '9', name: 'Ian' },\n  { id: '10', name: 'Jeff' },\n  { id: '11', name: 'Leonard' },\n  { id: '12', name: 'Neil' },\n  { id: '13', name: 'Pierce' },\n  { id: '14', name: 'Preston' },\n  { id: '15', name: 'Rachel' },\n  { id: '16', name: 'Shirley' },\n  { id: '17', name: 'Todd' },\n  { id: '18', name: 'Troy' },\n  { id: '19', name: 'Vaughn' },\n  { id: '20', name: 'Vicki' },\n];\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SelectionModalDemoService {\n  public addItem(item: SelectionModalDemoPerson): void {\n    people.push(item);\n  }\n\n  public search(\n    searchText: string\n  ): Observable<SelectionModalAsyncDemoSearchResults> {\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": "autocomplete-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-demo.component.ts",
+      "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": "selection-modal-demo-person.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo-person.ts",
-      "rawContents": "export interface SelectionModalDemoPerson {\n  id: string;\n  name: string;\n}\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": "selection-modal-demo-search-results.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo-search-results.ts",
-      "rawContents": "import { SelectionModalDemoPerson } from './selection-modal-demo-person';\n\nexport interface SelectionModalAsyncDemoSearchResults {\n  hasMore: boolean;\n  people: SelectionModalDemoPerson[];\n  totalCount: number;\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 { SkyAutocompleteModule } from '@skyux/lookup';\n\nimport { AutocompleteDemoComponent } from './autocomplete-demo.component';\n\n@NgModule({\n  imports: [CommonModule, ReactiveFormsModule, SkyAutocompleteModule],\n  declarations: [AutocompleteDemoComponent],\n  exports: [AutocompleteDemoComponent],\n})\nexport class AutocompleteDemoModule {}\n"
     },
     {
-      "fileName": "selection-modal-demo.component.html",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.component.html",
-      "rawContents": "<div class=\"sky-margin-stacked-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-demo-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n<div *ngIf=\"selectedPeople?.length\">\n  Selected people:\n  <ul class=\"selection-modal-demo-selected\">\n    <li *ngFor=\"let selectedPerson of selectedPeople\">\n      {{ selectedPerson.name }}\n    </li>\n  </ul>\n</div>\n"
+      "fileName": "autocomplete-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-demo.component.ts",
+      "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": "selection-modal-demo.component.spec.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkySelectionModalHarness } from '@skyux/lookup/testing';\n\nimport { of } from 'rxjs';\n\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\nimport { SelectionModalDemoModule } from './selection-modal-demo.module';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\ndescribe('Selection modal demo', () => {\n  let mockSvc: jasmine.SpyObj<SelectionModalDemoService>;\n\n  async function setupTest(): Promise<{\n    harness: SkySelectionModalHarness;\n    fixture: ComponentFixture<SelectionModalDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(SelectionModalDemoComponent);\n    const openBtn = fixture.nativeElement.querySelector(\n      '.selection-modal-demo-show-btn'\n    );\n\n    openBtn.click();\n    fixture.detectChanges();\n\n    const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n\n    const harness = await rootLoader.getHarness(SkySelectionModalHarness);\n    return { harness, 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('SelectionModalDemoService', ['search']);\n\n    mockSvc.search.and.callFake((searchText) => {\n      return of({\n        hasMore: false,\n        people:\n          searchText === 'ra'\n            ? [\n                {\n                  id: '1',\n                  name: 'Rachel',\n                },\n              ]\n            : [],\n        totalCount: 1,\n      });\n    });\n\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, SelectionModalDemoModule],\n    });\n  });\n\n  it('should update the selected items list when an item is selected', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.saveAndClose();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(1);\n    expect(selectedItemEls[0].innerText.trim()).toBe('Rachel');\n  });\n\n  it('should not update the selected items list when the user cancels the selection modal', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.cancel();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(0);\n  });\n});\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": "selection-modal-demo.component.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport {\n  SkySelectionModalSearchResult,\n  SkySelectionModalService,\n} from '@skyux/lookup';\n\nimport { map } from 'rxjs/operators';\n\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\n@Component({\n  selector: 'app-selection-modal-demo',\n  templateUrl: './selection-modal-demo.component.html',\n})\nexport class SelectionModalDemoComponent {\n  public selectedPeople: SelectionModalDemoPerson[] | undefined;\n\n  #searchSvc: SelectionModalDemoService;\n  #selectionModalSvc: SkySelectionModalService;\n\n  constructor(\n    searchSvc: SelectionModalDemoService,\n    selectionModalSvc: SkySelectionModalService\n  ) {\n    this.#searchSvc = searchSvc;\n    this.#selectionModalSvc = selectionModalSvc;\n  }\n\n  public showSelectionModal(): void {\n    const instance = this.#selectionModalSvc.open({\n      descriptorProperty: 'name',\n      idProperty: 'id',\n      searchAsync: (args) =>\n        this.#searchSvc.search(args.searchText).pipe(\n          map(\n            (results): SkySelectionModalSearchResult => ({\n              hasMore: results.hasMore,\n              items: results.people,\n              totalCount: results.totalCount,\n            })\n          )\n        ),\n      selectMode: 'single',\n    });\n\n    instance.closed.subscribe((args) => {\n      if (args.reason === 'save') {\n        this.selectedPeople = args.selectedItems as SelectionModalDemoPerson[];\n      }\n    });\n  }\n}\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": "selection-modal-demo.module.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkySelectionModalModule } from '@skyux/lookup';\n\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\n\n@NgModule({\n  declarations: [SelectionModalDemoComponent],\n  exports: [SelectionModalDemoComponent],\n  imports: [CommonModule, SkySelectionModalModule],\n})\nexport class SelectionModalDemoModule {}\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": "selection-modal-demo.service.ts",
-      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo.service.ts",
-      "rawContents": "import { Injectable } from '@angular/core';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalAsyncDemoSearchResults } from './selection-modal-demo-search-results';\n\nconst people: SelectionModalDemoPerson[] = [\n  { id: '1', name: 'Abed' },\n  { id: '2', name: 'Alex' },\n  { id: '3', name: 'Ben' },\n  { id: '4', name: 'Britta' },\n  { id: '5', name: 'Buzz' },\n  { id: '6', name: 'Craig' },\n  { id: '7', name: 'Elroy' },\n  { id: '8', name: 'Garrett' },\n  { id: '9', name: 'Ian' },\n  { id: '10', name: 'Jeff' },\n  { id: '11', name: 'Leonard' },\n  { id: '12', name: 'Neil' },\n  { id: '13', name: 'Pierce' },\n  { id: '14', name: 'Preston' },\n  { id: '15', name: 'Rachel' },\n  { id: '16', name: 'Shirley' },\n  { id: '17', name: 'Todd' },\n  { id: '18', name: 'Troy' },\n  { id: '19', name: 'Vaughn' },\n  { id: '20', name: 'Vicki' },\n];\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SelectionModalDemoService {\n  public search(\n    searchText: string\n  ): Observable<SelectionModalAsyncDemoSearchResults> {\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": "autocomplete-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/autocomplete-demo.component.ts",
+      "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.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"
     }
   ]
 }