@skyux/lookup 6.21.0 → 7.0.0-beta.0

package/documentation.json

@@ -2508,6 +2508,16 @@
                     "flags": {},
                     "type": {
                       "type": "reference",
+                      "typeArguments": [
+                        {
+                          "type": "intrinsic",
+                          "name": "any"
+                        },
+                        {
+                          "type": "intrinsic",
+                          "name": "any"
+                        }
+                      ],
                       "qualifiedName": "AbstractControl",
                       "package": "@angular/forms",
                       "name": "AbstractControl"
@@ -4567,9 +4577,9 @@
             ],
             "type": {
               "type": "reference",
-              "qualifiedName": "FormControl",
+              "qualifiedName": "UntypedFormControl",
               "package": "@angular/forms",
-              "name": "FormControl"
+              "name": "UntypedFormControl"
             }
           },
           {
@@ -5469,6 +5479,16 @@
                     "flags": {},
                     "type": {
                       "type": "reference",
+                      "typeArguments": [
+                        {
+                          "type": "intrinsic",
+                          "name": "any"
+                        },
+                        {
+                          "type": "intrinsic",
+                          "name": "any"
+                        }
+                      ],
                       "qualifiedName": "AbstractControl",
                       "package": "@angular/forms",
                       "name": "AbstractControl"
@@ -9415,7 +9435,7 @@
     {
       "fileName": "autocomplete-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/advanced/autocomplete-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyAutocompleteSelectionChange,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public farthestPlanet: any;\n\n  public myForm: FormGroup;\n\n  public planets: any[] = [\n    {\n      name: 'Mercury',\n      description: 'Mercury is a planet in our solar system.',\n    },\n    { name: 'Venus', description: 'Venus is a planet in our solar system.' },\n    { name: 'Earth', description: 'Earth is a planet in our solar system.' },\n    { name: 'Mars', description: 'Mars is a planet in our solar system.' },\n    {\n      name: 'Jupiter',\n      description: 'Jupiter is a planet in our solar system.',\n    },\n    { name: 'Saturn', description: 'Saturn is a planet in our solar system.' },\n    { name: 'Uranus', description: 'Uranus is a planet in our solar system.' },\n    {\n      name: 'Neptune',\n      description: 'Neptune is a planet in our solar system.',\n    },\n  ];\n\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[] = [\n    (searchText: string, item: any): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  public onPlanetSelection(args: SkyAutocompleteSelectionChange): void {\n    alert(`You selected ${args.selectedItem.name}`);\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      farthestPlanet: {},\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyAutocompleteSelectionChange,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public farthestPlanet: any;\n\n  public myForm: UntypedFormGroup;\n\n  public planets: any[] = [\n    {\n      name: 'Mercury',\n      description: 'Mercury is a planet in our solar system.',\n    },\n    { name: 'Venus', description: 'Venus is a planet in our solar system.' },\n    { name: 'Earth', description: 'Earth is a planet in our solar system.' },\n    { name: 'Mars', description: 'Mars is a planet in our solar system.' },\n    {\n      name: 'Jupiter',\n      description: 'Jupiter is a planet in our solar system.',\n    },\n    { name: 'Saturn', description: 'Saturn is a planet in our solar system.' },\n    { name: 'Uranus', description: 'Uranus is a planet in our solar system.' },\n    {\n      name: 'Neptune',\n      description: 'Neptune is a planet in our solar system.',\n    },\n  ];\n\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[] = [\n    (searchText: string, item: any): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  public onPlanetSelection(args: SkyAutocompleteSelectionChange): void {\n    alert(`You selected ${args.selectedItem.name}`);\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      farthestPlanet: {},\n    });\n  }\n}\n"
     },
     {
       "fileName": "autocomplete-demo.module.ts",
@@ -9430,7 +9450,7 @@
     {
       "fileName": "autocomplete-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/basic/autocomplete-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public colors: any[] = [\n    { name: 'Red' },\n    { name: 'Blue' },\n    { name: 'Green' },\n    { name: 'Orange' },\n    { name: 'Pink' },\n    { name: 'Purple' },\n    { name: 'Yellow' },\n    { name: 'Brown' },\n    { name: 'Turquoise' },\n    { name: 'White' },\n    { name: 'Black' },\n  ];\n\n  public myForm: FormGroup;\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public colors: any[] = [\n    { name: 'Red' },\n    { name: 'Blue' },\n    { name: 'Green' },\n    { name: 'Orange' },\n    { name: 'Pink' },\n    { name: 'Purple' },\n    { name: 'Yellow' },\n    { name: 'Brown' },\n    { name: 'Turquoise' },\n    { name: 'White' },\n    { name: 'Black' },\n  ];\n\n  public myForm: UntypedFormGroup;\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
     },
     {
       "fileName": "autocomplete-demo.module.ts",
@@ -9445,7 +9465,7 @@
     {
       "fileName": "autocomplete-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/custom-search/autocomplete-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunction,\n  SkyAutocompleteSearchFunctionResponse,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public largestOcean: any;\n\n  public oceans: any[] = [\n    { title: 'Arctic', id: 1 },\n    { title: 'Atlantic', id: 2 },\n    { title: 'Indian', id: 3 },\n    { title: 'Pacific', id: 4 },\n  ];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  public getOceanSearchFunction(): SkyAutocompleteSearchFunction {\n    const searchFunction = (\n      searchText: string,\n      oceans: any[]\n    ): SkyAutocompleteSearchFunctionResponse => {\n      return new Promise((resolve) => {\n        const searchTextLower = searchText.toLowerCase();\n\n        const results = oceans.filter((ocean: any) => {\n          const val = ocean.title;\n          const isMatch =\n            val && val.toString().toLowerCase().indexOf(searchTextLower) > -1;\n          return isMatch;\n        });\n\n        // Simulate an async request.\n        setTimeout(() => {\n          resolve(results);\n        }, 500);\n      });\n    };\n\n    return searchFunction;\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      largestOcean: { title: 'Arctic', id: 1 },\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunction,\n  SkyAutocompleteSearchFunctionResponse,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public myForm: UntypedFormGroup;\n\n  public largestOcean: any;\n\n  public oceans: any[] = [\n    { title: 'Arctic', id: 1 },\n    { title: 'Atlantic', id: 2 },\n    { title: 'Indian', id: 3 },\n    { title: 'Pacific', id: 4 },\n  ];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  public getOceanSearchFunction(): SkyAutocompleteSearchFunction {\n    const searchFunction = (\n      searchText: string,\n      oceans: any[]\n    ): SkyAutocompleteSearchFunctionResponse => {\n      return new Promise((resolve) => {\n        const searchTextLower = searchText.toLowerCase();\n\n        const results = oceans.filter((ocean: any) => {\n          const val = ocean.title;\n          const isMatch =\n            val && val.toString().toLowerCase().indexOf(searchTextLower) > -1;\n          return isMatch;\n        });\n\n        // Simulate an async request.\n        setTimeout(() => {\n          resolve(results);\n        }, 500);\n      });\n    };\n\n    return searchFunction;\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      largestOcean: { title: 'Arctic', id: 1 },\n    });\n  }\n}\n"
     },
     {
       "fileName": "autocomplete-demo.module.ts",
@@ -9460,7 +9480,7 @@
     {
       "fileName": "autocomplete-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/autocomplete/search-filters/autocomplete-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public colors: any[] = [\n    { name: 'Red' },\n    { name: 'Blue' },\n    { name: 'Green' },\n    { name: 'Orange' },\n    { name: 'Pink' },\n    { name: 'Purple' },\n    { name: 'Yellow' },\n    { name: 'Brown' },\n    { name: 'Turquoise' },\n    { name: 'White' },\n    { name: 'Black' },\n  ];\n\n  public myForm: FormGroup;\n\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[] = [\n    (searchText: string, item: any): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-autocomplete-demo',\n  templateUrl: './autocomplete-demo.component.html',\n})\nexport class AutocompleteDemoComponent implements OnInit {\n  public colors: any[] = [\n    { name: 'Red' },\n    { name: 'Blue' },\n    { name: 'Green' },\n    { name: 'Orange' },\n    { name: 'Pink' },\n    { name: 'Purple' },\n    { name: 'Yellow' },\n    { name: 'Brown' },\n    { name: 'Turquoise' },\n    { name: 'White' },\n    { name: 'Black' },\n  ];\n\n  public myForm: UntypedFormGroup;\n\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[] = [\n    (searchText: string, item: any): boolean => {\n      return item.name !== 'Red';\n    },\n  ];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      favoriteColor: undefined,\n    });\n  }\n}\n"
     },
     {
       "fileName": "autocomplete-demo.module.ts",
@@ -9475,7 +9495,7 @@
     {
       "fileName": "country-field-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/country-field/basic/country-field-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormControl, FormGroup, Validators } from '@angular/forms';\nimport { SkyCountryFieldCountry } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-country-field-demo',\n  templateUrl: './country-field-demo.component.html',\n})\nexport class CountryFieldDemoComponent implements OnInit {\n  public countryControl: FormControl;\n\n  public countryData: SkyCountryFieldCountry;\n\n  public countryForm: FormGroup;\n\n  public ngOnInit(): void {\n    this.countryControl = new FormControl();\n    this.countryControl.setValue({\n      name: 'Australia',\n      iso2: 'au',\n    });\n    this.countryForm = new FormGroup({\n      countryControl: this.countryControl,\n    });\n\n    this.countryControl.setValidators([Validators.required]);\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormControl,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\nimport { SkyCountryFieldCountry } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-country-field-demo',\n  templateUrl: './country-field-demo.component.html',\n})\nexport class CountryFieldDemoComponent implements OnInit {\n  public countryControl: UntypedFormControl;\n\n  public countryData: SkyCountryFieldCountry;\n\n  public countryForm: UntypedFormGroup;\n\n  public ngOnInit(): void {\n    this.countryControl = new UntypedFormControl();\n    this.countryControl.setValue({\n      name: 'Australia',\n      iso2: 'au',\n    });\n    this.countryForm = new UntypedFormGroup({\n      countryControl: this.countryControl,\n    });\n\n    this.countryControl.setValidators([Validators.required]);\n  }\n}\n"
     },
     {
       "fileName": "country-field-demo.module.ts",
@@ -9495,7 +9515,7 @@
     {
       "fileName": "lookup-async-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchAsyncArgs,\n  SkyAutocompleteSearchAsyncResult,\n} from '@skyux/lookup';\n\nimport { Subject } from 'rxjs';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-async-lookup-demo',\n  templateUrl: './lookup-async-demo.component.html',\n  styleUrls: ['./lookup-async-demo.component.scss'],\n})\nexport class LookupAsyncDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: LookupDemoPerson[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public name: LookupDemoPerson[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  public searchAsync($event: SkyAutocompleteSearchAsyncArgs) {\n    const result = new Subject<SkyAutocompleteSearchAsyncResult>();\n    $event.result = result;\n    setTimeout(() => {\n      const searchText = $event.searchText.toLowerCase();\n      const items = this.people.filter((person) => {\n        return person.name.toLowerCase().includes(searchText);\n      });\n      result.next({\n        hasMore: false,\n        items,\n        totalCount: items.length,\n      });\n    }, 800);\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      name: new FormControl(this.name),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport {\n  SkyAutocompleteSearchAsyncArgs,\n  SkyAutocompleteSearchAsyncResult,\n} from '@skyux/lookup';\n\nimport { Subject } from 'rxjs';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-async-lookup-demo',\n  templateUrl: './lookup-async-demo.component.html',\n  styleUrls: ['./lookup-async-demo.component.scss'],\n})\nexport class LookupAsyncDemoComponent implements OnInit {\n  public myForm: UntypedFormGroup;\n\n  public people: LookupDemoPerson[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public name: LookupDemoPerson[] = [this.people[15]];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  public searchAsync($event: SkyAutocompleteSearchAsyncArgs) {\n    const result = new Subject<SkyAutocompleteSearchAsyncResult>();\n    $event.result = result;\n    setTimeout(() => {\n      const searchText = $event.searchText.toLowerCase();\n      const items = this.people.filter((person) => {\n        return person.name.toLowerCase().includes(searchText);\n      });\n      result.next({\n        hasMore: false,\n        items,\n        totalCount: items.length,\n      });\n    }, 800);\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      name: new UntypedFormControl(this.name),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-async-demo.module.ts",
@@ -9515,7 +9535,7 @@
     {
       "fileName": "lookup-custom-picker-demo-modal.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo-modal.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyLookupShowMoreCustomPickerContext } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-lookup-demo-modal',\n  templateUrl: './lookup-custom-picker-demo-modal.component.html',\n})\nexport class LookupCustomPickerDemoModalComponent implements OnInit {\n  public myForm: FormGroup;\n\n  constructor(\n    private formBuilder: FormBuilder,\n    public context: SkyLookupShowMoreCustomPickerContext,\n    public modalInstance: SkyModalInstance\n  ) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      selectLast: new FormControl(false),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport { SkyLookupShowMoreCustomPickerContext } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-lookup-demo-modal',\n  templateUrl: './lookup-custom-picker-demo-modal.component.html',\n})\nexport class LookupCustomPickerDemoModalComponent implements OnInit {\n  public myForm: UntypedFormGroup;\n\n  constructor(\n    private formBuilder: UntypedFormBuilder,\n    public context: SkyLookupShowMoreCustomPickerContext,\n    public modalInstance: SkyModalInstance\n  ) {}\n\n  public ngOnInit(): void {\n    this.myForm = this.formBuilder.group({\n      selectLast: new UntypedFormControl(false),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-custom-picker-demo.component.html",
@@ -9530,7 +9550,7 @@
     {
       "fileName": "lookup-custom-picker-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo.component.ts",
-      "rawContents": "import { ChangeDetectorRef, Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n  SkyLookupShowMoreCustomPickerContext,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { LookupCustomPickerDemoModalComponent } from './lookup-custom-picker-demo-modal.component';\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-custom-picker-demo.component.html',\n  styleUrls: ['./lookup-custom-picker-demo.component.scss'],\n})\nexport class LookupCustomPickerDemoComponent implements OnInit {\n  public showMoreConfig: SkyLookupShowMoreConfig;\n\n  public myForm: FormGroup;\n\n  public people: LookupDemoPerson[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: LookupDemoPerson[] = [this.people[15]];\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private formBuilder: FormBuilder,\n    private modalService: SkyModalService\n  ) {\n    this.showMoreConfig = {\n      customPicker: {\n        open: (context: SkyLookupShowMoreCustomPickerContext) => {\n          const instance = this.modalService.open(\n            LookupCustomPickerDemoModalComponent,\n            {\n              providers: [\n                {\n                  provide: SkyLookupShowMoreCustomPickerContext,\n                  useValue: context,\n                },\n              ],\n              size: 'large',\n            }\n          );\n\n          instance.closed.subscribe((closeArgs: SkyModalCloseArgs) => {\n            if (closeArgs.reason === 'save') {\n              if (closeArgs.data) {\n                this.myForm.setValue({\n                  names: [this.people[this.people.length - 1]],\n                });\n                this.changeDetector.markForCheck();\n              }\n            }\n          });\n        },\n      },\n    };\n  }\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: LookupDemoPerson[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: LookupDemoPerson): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
+      "rawContents": "import { ChangeDetectorRef, Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n  SkyLookupShowMoreCustomPickerContext,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { LookupCustomPickerDemoModalComponent } from './lookup-custom-picker-demo-modal.component';\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-custom-picker-demo.component.html',\n  styleUrls: ['./lookup-custom-picker-demo.component.scss'],\n})\nexport class LookupCustomPickerDemoComponent implements OnInit {\n  public showMoreConfig: SkyLookupShowMoreConfig;\n\n  public myForm: UntypedFormGroup;\n\n  public people: LookupDemoPerson[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: LookupDemoPerson[] = [this.people[15]];\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private formBuilder: UntypedFormBuilder,\n    private modalService: SkyModalService\n  ) {\n    this.showMoreConfig = {\n      customPicker: {\n        open: (context: SkyLookupShowMoreCustomPickerContext) => {\n          const instance = this.modalService.open(\n            LookupCustomPickerDemoModalComponent,\n            {\n              providers: [\n                {\n                  provide: SkyLookupShowMoreCustomPickerContext,\n                  useValue: context,\n                },\n              ],\n              size: 'large',\n            }\n          );\n\n          instance.closed.subscribe((closeArgs: SkyModalCloseArgs) => {\n            if (closeArgs.reason === 'save') {\n              if (closeArgs.data) {\n                this.myForm.setValue({\n                  names: [this.people[this.people.length - 1]],\n                });\n                this.changeDetector.markForCheck();\n              }\n            }\n          });\n        },\n      },\n    };\n  }\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: LookupDemoPerson[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: LookupDemoPerson): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new UntypedFormControl(this.names),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-custom-picker-demo.module.ts",
@@ -9560,7 +9580,7 @@
     {
       "fileName": "lookup-multiple-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchArgs,\n  SkyAutocompleteSearchFunctionFilter,\n} from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-multiple-demo.component.html',\n  styleUrls: ['./lookup-multiple-demo.component.scss'],\n})\nexport class LookupMultipleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: LookupDemoPerson[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: LookupDemoPerson[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  /**\n   * When in the modal view, show all people in the search results, regardless if they have been chosen already.\n   * When in the popover view (or in any other view), show people in the search results that have not been chosen already.\n   */\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: LookupDemoPerson[] = this.myForm.controls.names.value;\n    return [\n      (\n        searchText: string,\n        item: any,\n        args?: SkyAutocompleteSearchArgs\n      ): boolean => {\n        if (args?.context === 'modal') {\n          return true;\n        }\n\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport {\n  SkyAutocompleteSearchArgs,\n  SkyAutocompleteSearchFunctionFilter,\n} from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-multiple-demo.component.html',\n  styleUrls: ['./lookup-multiple-demo.component.scss'],\n})\nexport class LookupMultipleSelectDemoComponent implements OnInit {\n  public myForm: UntypedFormGroup;\n\n  public people: LookupDemoPerson[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: LookupDemoPerson[] = [this.people[15]];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  /**\n   * When in the modal view, show all people in the search results, regardless if they have been chosen already.\n   * When in the popover view (or in any other view), show people in the search results that have not been chosen already.\n   */\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: LookupDemoPerson[] = this.myForm.controls.names.value;\n    return [\n      (\n        searchText: string,\n        item: any,\n        args?: SkyAutocompleteSearchArgs\n      ): boolean => {\n        if (args?.context === 'modal') {\n          return true;\n        }\n\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new UntypedFormControl(this.names),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-multiple-demo.module.ts",
@@ -9585,7 +9605,7 @@
     {
       "fileName": "lookup-result-templates-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-result-templates-demo.component.ts",
-      "rawContents": "import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n} from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-result-templates-demo.component.html',\n  styleUrls: ['./lookup-result-templates-demo.component.scss'],\n})\nexport class LookupResultTemplatesDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: LookupDemoPerson[] = [\n    {\n      name: 'Abed',\n      formal: 'Mr. Nadir',\n    },\n    {\n      name: 'Alex',\n      formal: 'Mr. Osbourne',\n    },\n    {\n      name: 'Ben',\n      formal: 'Mr. Chang',\n    },\n    {\n      name: 'Britta',\n      formal: 'Ms. Perry',\n    },\n    {\n      name: 'Buzz',\n      formal: 'Mr. Hickey',\n    },\n    {\n      name: 'Craig',\n      formal: 'Mr. Pelton',\n    },\n    {\n      name: 'Elroy',\n      formal: 'Mr. Patashnik',\n    },\n    {\n      name: 'Garrett',\n      formal: 'Mr. Lambert',\n    },\n    {\n      name: 'Ian',\n      formal: 'Mr. Duncan',\n    },\n    {\n      name: 'Jeff',\n      formal: 'Mr. Winger',\n    },\n    {\n      name: 'Leonard',\n      formal: 'Mr. Rodriguez',\n    },\n    {\n      name: 'Neil',\n      formal: 'Mr. Neil',\n    },\n    {\n      name: 'Pierce',\n      formal: 'Mr. Hawthorne',\n    },\n    {\n      name: 'Preston',\n      formal: 'Mr. Koogler',\n    },\n    {\n      name: 'Rachel',\n      formal: 'Ms. Rachel',\n    },\n    {\n      name: 'Shirley',\n      formal: 'Ms. Bennett',\n    },\n    {\n      name: 'Todd',\n      formal: 'Mr. Jacobson',\n    },\n    {\n      name: 'Troy',\n      formal: 'Mr. Barnes',\n    },\n    {\n      name: 'Vaughn',\n      formal: 'Mr. Miller',\n    },\n    {\n      name: 'Vicki',\n      formal: 'Ms. Jenkins',\n    },\n  ];\n\n  public names: LookupDemoPerson[] = [this.people[15]];\n\n  public showMoreConfig: SkyLookupShowMoreConfig = {\n    nativePickerConfig: {},\n  };\n\n  @ViewChild('modalItemTemplate')\n  public set modalItemTempalte(template: TemplateRef<unknown>) {\n    this.showMoreConfig.nativePickerConfig.itemTemplate = template;\n  }\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n} from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-result-templates-demo.component.html',\n  styleUrls: ['./lookup-result-templates-demo.component.scss'],\n})\nexport class LookupResultTemplatesDemoComponent implements OnInit {\n  public myForm: UntypedFormGroup;\n\n  public people: LookupDemoPerson[] = [\n    {\n      name: 'Abed',\n      formal: 'Mr. Nadir',\n    },\n    {\n      name: 'Alex',\n      formal: 'Mr. Osbourne',\n    },\n    {\n      name: 'Ben',\n      formal: 'Mr. Chang',\n    },\n    {\n      name: 'Britta',\n      formal: 'Ms. Perry',\n    },\n    {\n      name: 'Buzz',\n      formal: 'Mr. Hickey',\n    },\n    {\n      name: 'Craig',\n      formal: 'Mr. Pelton',\n    },\n    {\n      name: 'Elroy',\n      formal: 'Mr. Patashnik',\n    },\n    {\n      name: 'Garrett',\n      formal: 'Mr. Lambert',\n    },\n    {\n      name: 'Ian',\n      formal: 'Mr. Duncan',\n    },\n    {\n      name: 'Jeff',\n      formal: 'Mr. Winger',\n    },\n    {\n      name: 'Leonard',\n      formal: 'Mr. Rodriguez',\n    },\n    {\n      name: 'Neil',\n      formal: 'Mr. Neil',\n    },\n    {\n      name: 'Pierce',\n      formal: 'Mr. Hawthorne',\n    },\n    {\n      name: 'Preston',\n      formal: 'Mr. Koogler',\n    },\n    {\n      name: 'Rachel',\n      formal: 'Ms. Rachel',\n    },\n    {\n      name: 'Shirley',\n      formal: 'Ms. Bennett',\n    },\n    {\n      name: 'Todd',\n      formal: 'Mr. Jacobson',\n    },\n    {\n      name: 'Troy',\n      formal: 'Mr. Barnes',\n    },\n    {\n      name: 'Vaughn',\n      formal: 'Mr. Miller',\n    },\n    {\n      name: 'Vicki',\n      formal: 'Ms. Jenkins',\n    },\n  ];\n\n  public names: LookupDemoPerson[] = [this.people[15]];\n\n  public showMoreConfig: SkyLookupShowMoreConfig = {\n    nativePickerConfig: {},\n  };\n\n  @ViewChild('modalItemTemplate')\n  public set modalItemTempalte(template: TemplateRef<unknown>) {\n    this.showMoreConfig.nativePickerConfig.itemTemplate = template;\n  }\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new UntypedFormControl(this.names),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-result-templates-demo.module.ts",
@@ -9610,7 +9630,7 @@
     {
       "fileName": "lookup-single-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-single-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-single-select-lookup-demo',\n  templateUrl: './lookup-single-demo.component.html',\n  styleUrls: ['./lookup-single-demo.component.scss'],\n})\nexport class LookupSingleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: LookupDemoPerson[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public name: LookupDemoPerson[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const name: LookupDemoPerson[] = this.myForm.controls.name.value;\n    return [\n      (searchText: string, item: LookupDemoPerson): boolean => {\n        const found = name.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      name: new FormControl(this.name),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-single-select-lookup-demo',\n  templateUrl: './lookup-single-demo.component.html',\n  styleUrls: ['./lookup-single-demo.component.scss'],\n})\nexport class LookupSingleSelectDemoComponent implements OnInit {\n  public myForm: UntypedFormGroup;\n\n  public people: LookupDemoPerson[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public name: LookupDemoPerson[] = [this.people[15]];\n\n  constructor(private formBuilder: UntypedFormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const name: LookupDemoPerson[] = this.myForm.controls.name.value;\n    return [\n      (searchText: string, item: LookupDemoPerson): boolean => {\n        const found = name.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      name: new UntypedFormControl(this.name),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-single-demo.module.ts",

package/esm2020/lib/modules/autocomplete/autocomplete-adapter.service.mjs

@@ -57,9 +57,9 @@ export class SkyAutocompleteAdapterService {
     }
 }
 _SkyAutocompleteAdapterService_coreAdapterService = new WeakMap(), _SkyAutocompleteAdapterService_renderer = new WeakMap();
-SkyAutocompleteAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteAdapterService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAutocompleteAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteAdapterService, decorators: [{
+SkyAutocompleteAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteAdapterService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAutocompleteAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWFkYXB0ZXIuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sb29rdXAvc3JjL2xpYi9tb2R1bGVzL2F1dG9jb21wbGV0ZS9hdXRvY29tcGxldGUtYWRhcHRlci5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxFQUVMLFVBQVUsRUFFVixnQkFBZ0IsR0FDakIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLHFCQUFxQixFQUFzQixNQUFNLGFBQWEsQ0FBQzs7O0FBRXhFOztHQUVHO0FBRUgsTUFBTSxPQUFPLDZCQUE2QjtJQUt4QyxZQUNFLGtCQUF5QyxFQUN6QyxlQUFpQztRQU5uQyxvRUFBMkM7UUFFM0MsMERBQXFCO1FBTW5CLHVCQUFBLElBQUkscURBQXVCLGtCQUFrQixNQUFBLENBQUM7UUFDOUMsdUJBQUEsSUFBSSwyQ0FBYSxlQUFlLENBQUMsY0FBYyxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsTUFBQSxDQUFDO0lBQ25FLENBQUM7SUFFRDs7T0FFRztJQUNJLFdBQVcsQ0FBQyxPQUFvQixFQUFFLFNBQWlCO1FBQ3hELGtCQUFrQjtRQUNsQiwwQkFBMEI7UUFDMUIsSUFBSSxPQUFPLEVBQUU7WUFDWCx1QkFBQSxJQUFJLCtDQUFVLENBQUMsUUFBUSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQztTQUM3QztJQUNILENBQUM7SUFFTSwyQkFBMkIsQ0FDaEMsT0FBMkI7UUFFM0IsT0FBTyx1QkFBQSxJQUFJLHlEQUFvQixDQUFDLG9CQUFvQjtRQUNsRCx5REFBeUQ7UUFDekQsMEJBQTBCO1FBQzFCLE9BQU8sRUFBRSxZQUFZLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFDNUMsRUFBRSxjQUFjLEVBQUUsSUFBSSxFQUFFLENBQ3pCLENBQUM7SUFDSixDQUFDO0lBRUQ7O09BRUc7SUFDSSxjQUFjLENBQUMsT0FBb0IsRUFBRSxTQUFpQjtRQUMzRCxrQkFBa0I7UUFDbEIsMEJBQTBCO1FBQzFCLElBQUksT0FBTyxFQUFFO1lBQ1gsdUJBQUEsSUFBSSwrQ0FBVSxDQUFDLFdBQVcsQ0FBQyxPQUFPLEVBQUUsU0FBUyxDQUFDLENBQUM7U0FDaEQ7SUFDSCxDQUFDO0lBRU0sZ0JBQWdCLENBQ3JCLFVBQXNCLEVBQ3RCLFdBQXVCLEVBQ3ZCLFVBQW1CO1FBRW5CLE1BQU0sYUFBYSxHQUFHLFVBQVU7WUFDOUIsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLGdCQUFnQixDQUFDO1lBQ3BELENBQUMsQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO1FBQzdCLElBQUksYUFBYSxFQUFFO1lBQ2pCLE1BQU0sS0FBSyxHQUFHLGFBQWEsQ0FBQyxxQkFBcUIsRUFBRSxDQUFDLEtBQUssQ0FBQztZQUMxRCx1QkFBQSxJQUFJLCtDQUFVLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxhQUFhLEVBQUUsT0FBTyxFQUFFLEdBQUcsS0FBSyxJQUFJLENBQUMsQ0FBQztTQUMzRTtJQUNILENBQUM7SUFFRDs7T0FFRztJQUNJLFdBQVcsQ0FBQyxPQUFvQixFQUFFLFFBQWdCO1FBQ3ZELE9BQU8sQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO0lBQzlCLENBQUM7OzswSEFqRVUsNkJBQTZCOzhIQUE3Qiw2QkFBNkI7MkZBQTdCLDZCQUE2QjtrQkFEekMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEVsZW1lbnRSZWYsXG4gIEluamVjdGFibGUsXG4gIFJlbmRlcmVyMixcbiAgUmVuZGVyZXJGYWN0b3J5Mixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTa3lDb3JlQWRhcHRlclNlcnZpY2UsIFNreU92ZXJsYXlJbnN0YW5jZSB9IGZyb20gJ0Bza3l1eC9jb3JlJztcblxuLyoqXG4gKiBAaW50ZXJuYWxcbiAqL1xuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIFNreUF1dG9jb21wbGV0ZUFkYXB0ZXJTZXJ2aWNlIHtcbiAgI2NvcmVBZGFwdGVyU2VydmljZTogU2t5Q29yZUFkYXB0ZXJTZXJ2aWNlO1xuXG4gICNyZW5kZXJlcjogUmVuZGVyZXIyO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGNvcmVBZGFwdGVyU2VydmljZTogU2t5Q29yZUFkYXB0ZXJTZXJ2aWNlLFxuICAgIHJlbmRlcmVyRmFjdG9yeTogUmVuZGVyZXJGYWN0b3J5MlxuICApIHtcbiAgICB0aGlzLiNjb3JlQWRhcHRlclNlcnZpY2UgPSBjb3JlQWRhcHRlclNlcnZpY2U7XG4gICAgdGhpcy4jcmVuZGVyZXIgPSByZW5kZXJlckZhY3RvcnkuY3JlYXRlUmVuZGVyZXIodW5kZWZpbmVkLCBudWxsKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBBZGRzIHRoZSBjbGFzc05hbWUgZm9yIHRoZSBwcm92aWRlZCBlbGVtZW50LlxuICAgKi9cbiAgcHVibGljIGFkZENTU0NsYXNzKGVsZW1lbnQ6IEhUTUxFbGVtZW50LCBjbGFzc05hbWU6IHN0cmluZyk6IHZvaWQge1xuICAgIC8qIFNhbml0eSBjaGVjayAqL1xuICAgIC8qIGlzdGFuYnVsIGlnbm9yZSBlbHNlICovXG4gICAgaWYgKGVsZW1lbnQpIHtcbiAgICAgIHRoaXMuI3JlbmRlcmVyLmFkZENsYXNzKGVsZW1lbnQsIGNsYXNzTmFtZSk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIGdldE92ZXJsYXlGb2N1c2FibGVFbGVtZW50cyhcbiAgICBvdmVybGF5OiBTa3lPdmVybGF5SW5zdGFuY2VcbiAgKTogSFRNTEVsZW1lbnRbXSB7XG4gICAgcmV0dXJuIHRoaXMuI2NvcmVBZGFwdGVyU2VydmljZS5nZXRGb2N1c2FibGVDaGlsZHJlbihcbiAgICAgIC8qIFNhbml0eSBjaGVjayAtIGNhbGxpbmcgZnVuY3Rpb24gYWxzbyBoYXMgbnVsbCBjaGVjayAqL1xuICAgICAgLyogaXN0YW5idWwgaWdub3JlIG5leHQgKi9cbiAgICAgIG92ZXJsYXk/LmNvbXBvbmVudFJlZi5sb2NhdGlvbi5uYXRpdmVFbGVtZW50LFxuICAgICAgeyBpZ25vcmVUYWJJbmRleDogdHJ1ZSB9XG4gICAgKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBSZW1vdmVzIHRoZSBjbGFzc05hbWUgZm9yIHRoZSBwcm92aWRlZCBlbGVtZW50LlxuICAgKi9cbiAgcHVibGljIHJlbW92ZUNTU0NsYXNzKGVsZW1lbnQ6IEhUTUxFbGVtZW50LCBjbGFzc05hbWU6IHN0cmluZyk6IHZvaWQge1xuICAgIC8qIFNhbml0eSBjaGVjayAqL1xuICAgIC8qIGlzdGFuYnVsIGlnbm9yZSBlbHNlICovXG4gICAgaWYgKGVsZW1lbnQpIHtcbiAgICAgIHRoaXMuI3JlbmRlcmVyLnJlbW92ZUNsYXNzKGVsZW1lbnQsIGNsYXNzTmFtZSk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIHNldERyb3Bkb3duV2lkdGgoXG4gICAgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBkcm9wZG93blJlZjogRWxlbWVudFJlZixcbiAgICBpc0lucHV0Qm94OiBib29sZWFuXG4gICk6IHZvaWQge1xuICAgIGNvbnN0IHBhcmVudEVsZW1lbnQgPSBpc0lucHV0Qm94XG4gICAgICA/IGVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jbG9zZXN0KCcuc2t5LWlucHV0LWJveCcpXG4gICAgICA6IGVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgICBpZiAocGFyZW50RWxlbWVudCkge1xuICAgICAgY29uc3Qgd2lkdGggPSBwYXJlbnRFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoO1xuICAgICAgdGhpcy4jcmVuZGVyZXIuc2V0U3R5bGUoZHJvcGRvd25SZWYubmF0aXZlRWxlbWVudCwgJ3dpZHRoJywgYCR7d2lkdGh9cHhgKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogU2V0cyB0aGUgYHRhYkluZGV4YCBvZiB0aGUgYGVsZW1lbnRgIHRvIHRoZSBwcm92aWRlZCBgdGFiSW5kZXhgLlxuICAgKi9cbiAgcHVibGljIHNldFRhYkluZGV4KGVsZW1lbnQ6IEhUTUxFbGVtZW50LCB0YWJJbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgZWxlbWVudC50YWJJbmRleCA9IHRhYkluZGV4O1xuICB9XG59XG4iXX0=

package/esm2020/lib/modules/autocomplete/autocomplete-input.directive.mjs

@@ -218,9 +218,9 @@ _SkyAutocompleteInputDirective_blur = new WeakMap(), _SkyAutocompleteInputDirect
 }, _SkyAutocompleteInputDirective_getValueByKey = function _SkyAutocompleteInputDirective_getValueByKey() {
     return this.value ? this.value[this.displayWith] : undefined;
 };
-SkyAutocompleteInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-SkyAutocompleteInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: { autocompleteAttribute: "autocompleteAttribute", disabled: "disabled" }, providers: [SKY_AUTOCOMPLETE_VALUE_ACCESSOR, SKY_AUTOCOMPLETE_VALIDATOR], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteInputDirective, decorators: [{
+SkyAutocompleteInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAutocompleteInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: { autocompleteAttribute: "autocompleteAttribute", disabled: "disabled" }, providers: [SKY_AUTOCOMPLETE_VALUE_ACCESSOR, SKY_AUTOCOMPLETE_VALIDATOR], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[skyAutocomplete], textarea[skyAutocomplete]',

package/esm2020/lib/modules/autocomplete/autocomplete-search-async-disabled.pipe.mjs

@@ -8,9 +8,9 @@ export class SkyAutcompleteSearchAsyncDisabledPipe {
         return searchAsyncDisabled || searchAsync.observers.length === 0;
     }
 }
-SkyAutcompleteSearchAsyncDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutcompleteSearchAsyncDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SkyAutcompleteSearchAsyncDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutcompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutcompleteSearchAsyncDisabledPipe, decorators: [{
+SkyAutcompleteSearchAsyncDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutcompleteSearchAsyncDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyAutcompleteSearchAsyncDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyAutcompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutcompleteSearchAsyncDisabledPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyAutocompleteSearchAsyncDisabled',

package/esm2020/lib/modules/autocomplete/autocomplete.component.mjs

@@ -14,9 +14,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "@skyux/core";
 import * as i2 from "./autocomplete-adapter.service";
 import * as i3 from "@skyux/forms";
-import * as i4 from "@skyux/indicators";
-import * as i5 from "@skyux/theme";
-import * as i6 from "@angular/common";
+import * as i4 from "@angular/common";
+import * as i5 from "@skyux/indicators";
+import * as i6 from "@skyux/theme";
 import * as i7 from "@skyux/i18n";
 import * as i8 from "./autocomplete-search-async-disabled.pipe";
 let uniqueId = 0;
@@ -665,9 +665,9 @@ _SkyAutocompleteComponent_activeElementIndex = new WeakMap(), _SkyAutocompleteCo
         __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_setActiveDescendant).call(this);
     }
 };
-SkyAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: i2.SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i3.SkyInputBoxHostService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen && searchText\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n  [attr.id]=\"resultsWrapperId\"\n>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n  <div\n    class=\"sky-autocomplete-results-container\"\n    [skyThemeClass]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (keydown)=\"handleKeydown($event)\"\n    #resultsRef\n  >\n    <div\n      *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n      class=\"sky-autocomplete-results-waiting\"\n    >\n      <sky-wait [isWaiting]=\"true\"></sky-wait>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n  <div\n    *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n    class=\"sky-autocomplete-results\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.id]=\"resultsListId\"\n  >\n    <ng-container *ngFor=\"let result of searchResults; let i = index\">\n      <div\n        *ngIf=\"!searchResultsLimit || i < searchResultsLimit\"\n        class=\"sky-autocomplete-result\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n        [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate || defaultSearchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n      type=\"button\"\n      (mousedown)=\"moreButtonClicked()\"\n    >\n      <ng-container\n        *ngIf=\"\n          !(\n            searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n          ) &&\n          searchResults.length === 0 &&\n          !searchText\n        \"\n      >\n        {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          (searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n          !searchText\n        \"\n      >\n        {{\n          'skyux_autocomplete_show_all_count'\n            | skyLibResources: (data.length | skyNumeric: { truncate: false })\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"searchText\">\n        {{\n          'skyux_autocomplete_show_matches_count'\n            | skyLibResources\n              : (searchResultsCount === undefined\n                  ? data.length\n                  : (searchResultsCount | skyNumeric: { truncate: false }))\n        }}\n      </ng-container>\n    </button>\n    <div\n      *ngIf=\"searchText && searchResults.length === 0\"\n      class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n    <button\n      *ngIf=\"showAddButton\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (mousedown)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], components: [{ type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i7.SkyLibResourcesPipe, "skyAutocompleteSearchAsyncDisabled": i8.SkyAutcompleteSearchAsyncDisabledPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
+SkyAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: i2.SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i3.SkyInputBoxHostService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen && searchText\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n  [attr.id]=\"resultsWrapperId\"\n>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n  <div\n    class=\"sky-autocomplete-results-container\"\n    [skyThemeClass]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (keydown)=\"handleKeydown($event)\"\n    #resultsRef\n  >\n    <div\n      *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n      class=\"sky-autocomplete-results-waiting\"\n    >\n      <sky-wait [isWaiting]=\"true\"></sky-wait>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n  <div\n    *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n    class=\"sky-autocomplete-results\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.id]=\"resultsListId\"\n  >\n    <ng-container *ngFor=\"let result of searchResults; let i = index\">\n      <div\n        *ngIf=\"!searchResultsLimit || i < searchResultsLimit\"\n        class=\"sky-autocomplete-result\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n        [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate || defaultSearchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n      type=\"button\"\n      (mousedown)=\"moreButtonClicked()\"\n    >\n      <ng-container\n        *ngIf=\"\n          !(\n            searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n          ) &&\n          searchResults.length === 0 &&\n          !searchText\n        \"\n      >\n        {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          (searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n          !searchText\n        \"\n      >\n        {{\n          'skyux_autocomplete_show_all_count'\n            | skyLibResources: (data.length | skyNumeric: { truncate: false })\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"searchText\">\n        {{\n          'skyux_autocomplete_show_matches_count'\n            | skyLibResources\n              : (searchResultsCount === undefined\n                  ? data.length\n                  : (searchResultsCount | skyNumeric: { truncate: false }))\n        }}\n      </ng-container>\n    </button>\n    <div\n      *ngIf=\"searchText && searchResults.length === 0\"\n      class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n    <button\n      *ngIf=\"showAddButton\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (mousedown)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i6.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i6.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { kind: "pipe", type: i7.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: i8.SkyAutcompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen && searchText\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n  [attr.id]=\"resultsWrapperId\"\n>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n  <div\n    class=\"sky-autocomplete-results-container\"\n    [skyThemeClass]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (keydown)=\"handleKeydown($event)\"\n    #resultsRef\n  >\n    <div\n      *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n      class=\"sky-autocomplete-results-waiting\"\n    >\n      <sky-wait [isWaiting]=\"true\"></sky-wait>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n  <div\n    *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n    class=\"sky-autocomplete-results\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.id]=\"resultsListId\"\n  >\n    <ng-container *ngFor=\"let result of searchResults; let i = index\">\n      <div\n        *ngIf=\"!searchResultsLimit || i < searchResultsLimit\"\n        class=\"sky-autocomplete-result\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n        [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate || defaultSearchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n      type=\"button\"\n      (mousedown)=\"moreButtonClicked()\"\n    >\n      <ng-container\n        *ngIf=\"\n          !(\n            searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n          ) &&\n          searchResults.length === 0 &&\n          !searchText\n        \"\n      >\n        {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          (searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n          !searchText\n        \"\n      >\n        {{\n          'skyux_autocomplete_show_all_count'\n            | skyLibResources: (data.length | skyNumeric: { truncate: false })\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"searchText\">\n        {{\n          'skyux_autocomplete_show_matches_count'\n            | skyLibResources\n              : (searchResultsCount === undefined\n                  ? data.length\n                  : (searchResultsCount | skyNumeric: { truncate: false }))\n        }}\n      </ng-container>\n    </button>\n    <div\n      *ngIf=\"searchText && searchResults.length === 0\"\n      class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n    <button\n      *ngIf=\"showAddButton\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (mousedown)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: i2.SkyAutocompleteAdapterService }, { type: i1.SkyOverlayService }, { type: i3.SkyInputBoxHostService, decorators: [{

package/esm2020/lib/modules/autocomplete/autocomplete.module.mjs

@@ -11,8 +11,8 @@ import { SkyAutocompleteComponent } from './autocomplete.component';
 import * as i0 from "@angular/core";
 export class SkyAutocompleteModule {
 }
-SkyAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteModule, declarations: [SkyAutocompleteComponent,
+SkyAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteModule, declarations: [SkyAutocompleteComponent,
         SkyAutocompleteInputDirective,
         SkyAutcompleteSearchAsyncDisabledPipe], imports: [CommonModule,
         FormsModule,
@@ -25,20 +25,18 @@ SkyAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         SkyOverlayModule,
         SkyThemeModule,
         SkyWaitModule], exports: [SkyAutocompleteComponent, SkyAutocompleteInputDirective] });
-SkyAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteModule, imports: [[
-            CommonModule,
-            FormsModule,
-            SkyAffixModule,
-            SkyTextHighlightModule,
-            SkyIconModule,
-            SkyIdModule,
-            SkyLookupResourcesModule,
-            SkyNumericModule,
-            SkyOverlayModule,
-            SkyThemeModule,
-            SkyWaitModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteModule, decorators: [{
+SkyAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteModule, imports: [CommonModule,
+        FormsModule,
+        SkyAffixModule,
+        SkyTextHighlightModule,
+        SkyIconModule,
+        SkyIdModule,
+        SkyLookupResourcesModule,
+        SkyNumericModule,
+        SkyOverlayModule,
+        SkyThemeModule,
+        SkyWaitModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -62,4 +60,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                     exports: [SkyAutocompleteComponent, SkyAutocompleteInputDirective],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sb29rdXAvc3JjL2xpYi9tb2R1bGVzL2F1dG9jb21wbGV0ZS9hdXRvY29tcGxldGUubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQ0wsY0FBYyxFQUNkLFdBQVcsRUFDWCxnQkFBZ0IsRUFDaEIsZ0JBQWdCLEdBQ2pCLE1BQU0sYUFBYSxDQUFDO0FBQ3JCLE9BQU8sRUFDTCxhQUFhLEVBQ2Isc0JBQXNCLEVBQ3RCLGFBQWEsR0FDZCxNQUFNLG1CQUFtQixDQUFDO0FBQzNCLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFOUMsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFFakYsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDL0UsT0FBTyxFQUFFLHFDQUFxQyxFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDbEcsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sMEJBQTBCLENBQUM7O0FBdUJwRSxNQUFNLE9BQU8scUJBQXFCOztrSEFBckIscUJBQXFCO21IQUFyQixxQkFBcUIsaUJBbkI5Qix3QkFBd0I7UUFDeEIsNkJBQTZCO1FBQzdCLHFDQUFxQyxhQUdyQyxZQUFZO1FBQ1osV0FBVztRQUNYLGNBQWM7UUFDZCxzQkFBc0I7UUFDdEIsYUFBYTtRQUNiLFdBQVc7UUFDWCx3QkFBd0I7UUFDeEIsZ0JBQWdCO1FBQ2hCLGdCQUFnQjtRQUNoQixjQUFjO1FBQ2QsYUFBYSxhQUVMLHdCQUF3QixFQUFFLDZCQUE2QjttSEFFdEQscUJBQXFCLFlBZnZCO1lBQ1AsWUFBWTtZQUNaLFdBQVc7WUFDWCxjQUFjO1lBQ2Qsc0JBQXNCO1lBQ3RCLGFBQWE7WUFDYixXQUFXO1lBQ1gsd0JBQXdCO1lBQ3hCLGdCQUFnQjtZQUNoQixnQkFBZ0I7WUFDaEIsY0FBYztZQUNkLGFBQWE7U0FDZDsyRkFHVSxxQkFBcUI7a0JBckJqQyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWix3QkFBd0I7d0JBQ3hCLDZCQUE2Qjt3QkFDN0IscUNBQXFDO3FCQUN0QztvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixXQUFXO3dCQUNYLGNBQWM7d0JBQ2Qsc0JBQXNCO3dCQUN0QixhQUFhO3dCQUNiLFdBQVc7d0JBQ1gsd0JBQXdCO3dCQUN4QixnQkFBZ0I7d0JBQ2hCLGdCQUFnQjt3QkFDaEIsY0FBYzt3QkFDZCxhQUFhO3FCQUNkO29CQUNELE9BQU8sRUFBRSxDQUFDLHdCQUF3QixFQUFFLDZCQUE2QixDQUFDO2lCQUNuRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQge1xuICBTa3lBZmZpeE1vZHVsZSxcbiAgU2t5SWRNb2R1bGUsXG4gIFNreU51bWVyaWNNb2R1bGUsXG4gIFNreU92ZXJsYXlNb2R1bGUsXG59IGZyb20gJ0Bza3l1eC9jb3JlJztcbmltcG9ydCB7XG4gIFNreUljb25Nb2R1bGUsXG4gIFNreVRleHRIaWdobGlnaHRNb2R1bGUsXG4gIFNreVdhaXRNb2R1bGUsXG59IGZyb20gJ0Bza3l1eC9pbmRpY2F0b3JzJztcbmltcG9ydCB7IFNreVRoZW1lTW9kdWxlIH0gZnJvbSAnQHNreXV4L3RoZW1lJztcblxuaW1wb3J0IHsgU2t5TG9va3VwUmVzb3VyY2VzTW9kdWxlIH0gZnJvbSAnLi4vc2hhcmVkL3NreS1sb29rdXAtcmVzb3VyY2VzLm1vZHVsZSc7XG5cbmltcG9ydCB7IFNreUF1dG9jb21wbGV0ZUlucHV0RGlyZWN0aXZlIH0gZnJvbSAnLi9hdXRvY29tcGxldGUtaW5wdXQuZGlyZWN0aXZlJztcbmltcG9ydCB7IFNreUF1dGNvbXBsZXRlU2VhcmNoQXN5bmNEaXNhYmxlZFBpcGUgfSBmcm9tICcuL2F1dG9jb21wbGV0ZS1zZWFyY2gtYXN5bmMtZGlzYWJsZWQucGlwZSc7XG5pbXBvcnQgeyBTa3lBdXRvY29tcGxldGVDb21wb25lbnQgfSBmcm9tICcuL2F1dG9jb21wbGV0ZS5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBTa3lBdXRvY29tcGxldGVDb21wb25lbnQsXG4gICAgU2t5QXV0b2NvbXBsZXRlSW5wdXREaXJlY3RpdmUsXG4gICAgU2t5QXV0Y29tcGxldGVTZWFyY2hBc3luY0Rpc2FibGVkUGlwZSxcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBGb3Jtc01vZHVsZSxcbiAgICBTa3lBZmZpeE1vZHVsZSxcbiAgICBTa3lUZXh0SGlnaGxpZ2h0TW9kdWxlLFxuICAgIFNreUljb25Nb2R1bGUsXG4gICAgU2t5SWRNb2R1bGUsXG4gICAgU2t5TG9va3VwUmVzb3VyY2VzTW9kdWxlLFxuICAgIFNreU51bWVyaWNNb2R1bGUsXG4gICAgU2t5T3ZlcmxheU1vZHVsZSxcbiAgICBTa3lUaGVtZU1vZHVsZSxcbiAgICBTa3lXYWl0TW9kdWxlLFxuICBdLFxuICBleHBvcnRzOiBbU2t5QXV0b2NvbXBsZXRlQ29tcG9uZW50LCBTa3lBdXRvY29tcGxldGVJbnB1dERpcmVjdGl2ZV0sXG59KVxuZXhwb3J0IGNsYXNzIFNreUF1dG9jb21wbGV0ZU1vZHVsZSB7fVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sb29rdXAvc3JjL2xpYi9tb2R1bGVzL2F1dG9jb21wbGV0ZS9hdXRvY29tcGxldGUubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQ0wsY0FBYyxFQUNkLFdBQVcsRUFDWCxnQkFBZ0IsRUFDaEIsZ0JBQWdCLEdBQ2pCLE1BQU0sYUFBYSxDQUFDO0FBQ3JCLE9BQU8sRUFDTCxhQUFhLEVBQ2Isc0JBQXNCLEVBQ3RCLGFBQWEsR0FDZCxNQUFNLG1CQUFtQixDQUFDO0FBQzNCLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFOUMsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFFakYsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDL0UsT0FBTyxFQUFFLHFDQUFxQyxFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDbEcsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sMEJBQTBCLENBQUM7O0FBdUJwRSxNQUFNLE9BQU8scUJBQXFCOztrSEFBckIscUJBQXFCO21IQUFyQixxQkFBcUIsaUJBbkI5Qix3QkFBd0I7UUFDeEIsNkJBQTZCO1FBQzdCLHFDQUFxQyxhQUdyQyxZQUFZO1FBQ1osV0FBVztRQUNYLGNBQWM7UUFDZCxzQkFBc0I7UUFDdEIsYUFBYTtRQUNiLFdBQVc7UUFDWCx3QkFBd0I7UUFDeEIsZ0JBQWdCO1FBQ2hCLGdCQUFnQjtRQUNoQixjQUFjO1FBQ2QsYUFBYSxhQUVMLHdCQUF3QixFQUFFLDZCQUE2QjttSEFFdEQscUJBQXFCLFlBZDlCLFlBQVk7UUFDWixXQUFXO1FBQ1gsY0FBYztRQUNkLHNCQUFzQjtRQUN0QixhQUFhO1FBQ2IsV0FBVztRQUNYLHdCQUF3QjtRQUN4QixnQkFBZ0I7UUFDaEIsZ0JBQWdCO1FBQ2hCLGNBQWM7UUFDZCxhQUFhOzJGQUlKLHFCQUFxQjtrQkFyQmpDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLHdCQUF3Qjt3QkFDeEIsNkJBQTZCO3dCQUM3QixxQ0FBcUM7cUJBQ3RDO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsY0FBYzt3QkFDZCxzQkFBc0I7d0JBQ3RCLGFBQWE7d0JBQ2IsV0FBVzt3QkFDWCx3QkFBd0I7d0JBQ3hCLGdCQUFnQjt3QkFDaEIsZ0JBQWdCO3dCQUNoQixjQUFjO3dCQUNkLGFBQWE7cUJBQ2Q7b0JBQ0QsT0FBTyxFQUFFLENBQUMsd0JBQXdCLEVBQUUsNkJBQTZCLENBQUM7aUJBQ25FIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7XG4gIFNreUFmZml4TW9kdWxlLFxuICBTa3lJZE1vZHVsZSxcbiAgU2t5TnVtZXJpY01vZHVsZSxcbiAgU2t5T3ZlcmxheU1vZHVsZSxcbn0gZnJvbSAnQHNreXV4L2NvcmUnO1xuaW1wb3J0IHtcbiAgU2t5SWNvbk1vZHVsZSxcbiAgU2t5VGV4dEhpZ2hsaWdodE1vZHVsZSxcbiAgU2t5V2FpdE1vZHVsZSxcbn0gZnJvbSAnQHNreXV4L2luZGljYXRvcnMnO1xuaW1wb3J0IHsgU2t5VGhlbWVNb2R1bGUgfSBmcm9tICdAc2t5dXgvdGhlbWUnO1xuXG5pbXBvcnQgeyBTa3lMb29rdXBSZXNvdXJjZXNNb2R1bGUgfSBmcm9tICcuLi9zaGFyZWQvc2t5LWxvb2t1cC1yZXNvdXJjZXMubW9kdWxlJztcblxuaW1wb3J0IHsgU2t5QXV0b2NvbXBsZXRlSW5wdXREaXJlY3RpdmUgfSBmcm9tICcuL2F1dG9jb21wbGV0ZS1pbnB1dC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgU2t5QXV0Y29tcGxldGVTZWFyY2hBc3luY0Rpc2FibGVkUGlwZSB9IGZyb20gJy4vYXV0b2NvbXBsZXRlLXNlYXJjaC1hc3luYy1kaXNhYmxlZC5waXBlJztcbmltcG9ydCB7IFNreUF1dG9jb21wbGV0ZUNvbXBvbmVudCB9IGZyb20gJy4vYXV0b2NvbXBsZXRlLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIFNreUF1dG9jb21wbGV0ZUNvbXBvbmVudCxcbiAgICBTa3lBdXRvY29tcGxldGVJbnB1dERpcmVjdGl2ZSxcbiAgICBTa3lBdXRjb21wbGV0ZVNlYXJjaEFzeW5jRGlzYWJsZWRQaXBlLFxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlLFxuICAgIFNreUFmZml4TW9kdWxlLFxuICAgIFNreVRleHRIaWdobGlnaHRNb2R1bGUsXG4gICAgU2t5SWNvbk1vZHVsZSxcbiAgICBTa3lJZE1vZHVsZSxcbiAgICBTa3lMb29rdXBSZXNvdXJjZXNNb2R1bGUsXG4gICAgU2t5TnVtZXJpY01vZHVsZSxcbiAgICBTa3lPdmVybGF5TW9kdWxlLFxuICAgIFNreVRoZW1lTW9kdWxlLFxuICAgIFNreVdhaXRNb2R1bGUsXG4gIF0sXG4gIGV4cG9ydHM6IFtTa3lBdXRvY29tcGxldGVDb21wb25lbnQsIFNreUF1dG9jb21wbGV0ZUlucHV0RGlyZWN0aXZlXSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5QXV0b2NvbXBsZXRlTW9kdWxlIHt9XG4iXX0=