@skyux/lookup 5.5.0 → 5.6.0

package/fesm2015/skyux-lookup.js

@@ -1,7 +1,7 @@
 import * as i6$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, forwardRef, Directive, Input, Pipe, EventEmitter, TemplateRef, ElementRef, Component, ChangeDetectionStrategy, Optional, Output, ViewChild, ContentChild, ViewEncapsulation, Self } from '@angular/core';
+import { NgModule, forwardRef, Directive, Input, Pipe, Injectable, EventEmitter, TemplateRef, ElementRef, Component, ChangeDetectionStrategy, Optional, Output, ViewChild, ContentChild, ViewEncapsulation, Self } from '@angular/core';
 import * as i8 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormControl, NgModel, NgControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@skyux/core';
@@ -12,12 +12,12 @@ import * as i7 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 import * as i5 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import * as i6 from '@skyux/forms';
-import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
 import { Subject, fromEvent, of, from } from 'rxjs';
 import { takeUntil, debounceTime, switchMap, take, map, distinctUntilChanged } from 'rxjs/operators';
+import * as i6 from '@skyux/forms';
+import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
 import 'intl-tel-input';
-import * as i3 from '@skyux/layout';
+import * as i4$1 from '@skyux/layout';
 import { SkyToolbarModule } from '@skyux/layout';
 import * as i7$1 from '@skyux/lists';
 import { SkyInfiniteScrollModule, SkyRepeaterModule } from '@skyux/lists';
@@ -94,154 +94,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-/**
- * @internal
- */
-var SkyAutocompleteMessageType;
-(function (SkyAutocompleteMessageType) {
-    /**
-     * Closes the dropdown.
-     */
-    SkyAutocompleteMessageType[SkyAutocompleteMessageType["CloseDropdown"] = 0] = "CloseDropdown";
-    /**
-     * Repositions the dropdown.
-     */
-    SkyAutocompleteMessageType[SkyAutocompleteMessageType["RepositionDropdown"] = 1] = "RepositionDropdown";
-})(SkyAutocompleteMessageType || (SkyAutocompleteMessageType = {}));
-
-// tslint:disable:no-null-keyword
-/* istanbul ignore file */
-// Polyfill for Element.closest().
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
-// Returns the closest ancestor of the current element (or the current element itself) which
-// matches the selectors given in parameter. If there isn't such an ancestor, it returns null.
-if (!Element.prototype.closest) {
-    Element.prototype.closest = function (s) {
-        let el = this;
-        if (!document.documentElement.contains(el)) {
-            return null;
-        }
-        do {
-            if (el.matches(s)) {
-                return el;
-            }
-            el = el.parentElement || el.parentNode;
-        } while (el !== null && el.nodeType === 1);
-        return null;
-    };
-}
-// Polyfill for Element.matches().
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
-// Returns true if the element would be selected by the specified selector string.
-if (!Element.prototype.matches) {
-    Element.prototype.matches =
-        Element.prototype.msMatchesSelector ||
-            /* istanbul ignore next */ Element.prototype.webkitMatchesSelector;
-}
-
-/**
- * @internal
- */
-class SkyAutocompleteAdapterService {
-    constructor(coreAdapterService, rendererFactory) {
-        this.coreAdapterService = coreAdapterService;
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
-    }
-    /**
-     * Adds the className for the provided element.
-     */
-    addCSSClass(element, className) {
-        /* Sanity check */
-        /* istanbul ignore else */
-        if (element) {
-            this.renderer.addClass(element, className);
-        }
-    }
-    getOverlayFocusableElements(overlay) {
-        return this.coreAdapterService.getFocusableChildren(
-        /* Sanity check - calling function also has null check */
-        /* istanbul ignore next */
-        overlay === null || overlay === void 0 ? void 0 : overlay.componentRef.location.nativeElement, { ignoreTabIndex: true });
-    }
-    /**
-     * Removes the className for the provided element.
-     */
-    removeCSSClass(element, className) {
-        /* Sanity check */
-        /* istanbul ignore else */
-        if (element) {
-            this.renderer.removeClass(element, className);
-        }
-    }
-    setDropdownWidth(elementRef, dropdownRef, isInputBox) {
-        const parentElement = isInputBox
-            ? elementRef.nativeElement.closest('.sky-input-box')
-            : elementRef.nativeElement;
-        if (parentElement) {
-            const width = parentElement.getBoundingClientRect().width;
-            this.renderer.setStyle(dropdownRef.nativeElement, 'width', `${width}px`);
-        }
-    }
-    /**
-     * Sets the `tabIndex` of the `element` to the provided `tabIndex`.
-     */
-    setTabIndex(element, tabIndex) {
-        element.tabIndex = tabIndex;
-    }
-}
-SkyAutocompleteAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAutocompleteAdapterService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAutocompleteAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAutocompleteAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAutocompleteAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
-
-/**
- * Removes diacritical characters from strings and replaces them with their normalized equivalent.
- * For example: è becomes e, Å becomes A.
- */
-function normalizeDiacritics(value) {
-    return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-}
-
-function skyAutocompleteDefaultSearchFunction(options) {
-    const filterData = function (searchText, data) {
-        return data.filter((item) => {
-            if (!options.searchFilters || !options.searchFilters.length) {
-                return true;
-            }
-            // Find the first failing filter (we can skip the others if one fails).
-            const failedFilter = options.searchFilters.find((filter) => {
-                return !filter.call({}, searchText, item);
-            });
-            return failedFilter === undefined;
-        });
-    };
-    const search = function (searchText, data) {
-        const results = [];
-        /* Sanity check - autocomplete will not call search with empty search text */
-        /* istanbul ignore if */
-        if (!searchText) {
-            return results;
-        }
-        const searchTextNormalized = normalizeDiacritics(searchText).toUpperCase();
-        const filteredData = filterData(searchText, data);
-        for (let i = 0, n = filteredData.length; i < n; i++) {
-            const result = filteredData[i];
-            const isMatch = options.propertiesToSearch.find((property) => {
-                let value = (result[property] || '').toString();
-                value = normalizeDiacritics(value).toUpperCase();
-                return value.indexOf(searchTextNormalized) > -1;
-            });
-            if (isMatch) {
-                results.push(result);
-            }
-        }
-        return results;
-    };
-    return search;
-}
-
 // tslint:disable:no-forward-ref no-use-before-declare
 const SKY_AUTOCOMPLETE_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -474,65 +326,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-let uniqueId$1 = 0;
-class SkyAutocompleteComponent {
-    constructor(changeDetector, elementRef, affixService, adapterService, overlayService, inputBoxHostSvc) {
-        this.changeDetector = changeDetector;
-        this.elementRef = elementRef;
-        this.affixService = affixService;
-        this.adapterService = adapterService;
-        this.overlayService = overlayService;
-        this.inputBoxHostSvc = inputBoxHostSvc;
-        /**
-         * @internal
-         * Indicates whether to display a button in the dropdown that opens a picker where users can view all options.
-         */
-        this.enableShowMore = false;
-        /**
-         * @internal
-         * Indicates whether to display a button that lets users add options to the data source.
-         */
-        this.showAddButton = false;
-        /**
-         * @internal
-         * Allows async search to be disabled even when a listener is specified for
-         * the `searchAsync` output.
-         */
-        this.searchAsyncDisabled = false;
-        /**
-         * @internal
-         * Fires when users select the button to add options to the data source.
-         */
-        this.addClick = new EventEmitter();
-        /**
-         * @internal
-         * Fires when users select the button to view all options.
-         */
-        this.showMoreClick = new EventEmitter();
-        this.searchAsync = new EventEmitter();
-        this.isOpen = false;
-        this.isSearchingAsync = false;
-        /**
-         * Index that indicates which descendant of the overlay currently has focus.
-         */
-        this.activeElementIndex = -1;
-        this.inputDirectiveUnsubscribe = new Subject();
-        this.ngUnsubscribe = new Subject();
-        /**
-         * Elements within the autocomplete dropdown that are focusable.
-         * These are typically the search results and action buttons, but could also be
-         * elements provided in the consumer's own template.
-         */
-        this.overlayFocusableElements = [];
-        this._selectionChange = new EventEmitter();
-        const id = ++uniqueId$1;
-        this.resultsListId = `sky-autocomplete-list-${id}`;
-        this.resultsWrapperId = `sky-autocomplete-wrapper-${id}`;
+/**
+ * Removes diacritical characters from strings and replaces them with their normalized equivalent.
+ * For example: è becomes e, Å becomes A.
+ */
+function normalizeDiacritics(value) {
+    return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+
+// tslint:disable:no-null-keyword
+/* istanbul ignore file */
+// Polyfill for Element.closest().
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+// Returns the closest ancestor of the current element (or the current element itself) which
+// matches the selectors given in parameter. If there isn't such an ancestor, it returns null.
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function (s) {
+        let el = this;
+        if (!document.documentElement.contains(el)) {
+            return null;
+        }
+        do {
+            if (el.matches(s)) {
+                return el;
+            }
+            el = el.parentElement || el.parentNode;
+        } while (el !== null && el.nodeType === 1);
+        return null;
+    };
+}
+// Polyfill for Element.matches().
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+// Returns true if the element would be selected by the specified selector string.
+if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.msMatchesSelector ||
+            /* istanbul ignore next */ Element.prototype.webkitMatchesSelector;
+}
+
+/**
+ * @internal
+ */
+class SkyAutocompleteAdapterService {
+    constructor(coreAdapterService, rendererFactory) {
+        this.coreAdapterService = coreAdapterService;
+        this.rendererFactory = rendererFactory;
+        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
     }
     /**
-     * Specifies a static data source for the autocomplete component to search
-     * when users enter text. For a dynamic data source such as an array that
-     * changes due to server calls, use the `search` property instead.
+     * Adds the className for the provided element.
+     */
+    addCSSClass(element, className) {
+        /* Sanity check */
+        /* istanbul ignore else */
+        if (element) {
+            this.renderer.addClass(element, className);
+        }
+    }
+    getOverlayFocusableElements(overlay) {
+        return this.coreAdapterService.getFocusableChildren(
+        /* Sanity check - calling function also has null check */
+        /* istanbul ignore next */
+        overlay === null || overlay === void 0 ? void 0 : overlay.componentRef.location.nativeElement, { ignoreTabIndex: true });
+    }
+    /**
+     * Removes the className for the provided element.
+     */
+    removeCSSClass(element, className) {
+        /* Sanity check */
+        /* istanbul ignore else */
+        if (element) {
+            this.renderer.removeClass(element, className);
+        }
+    }
+    setDropdownWidth(elementRef, dropdownRef, isInputBox) {
+        const parentElement = isInputBox
+            ? elementRef.nativeElement.closest('.sky-input-box')
+            : elementRef.nativeElement;
+        if (parentElement) {
+            const width = parentElement.getBoundingClientRect().width;
+            this.renderer.setStyle(dropdownRef.nativeElement, 'width', `${width}px`);
+        }
+    }
+    /**
+     * Sets the `tabIndex` of the `element` to the provided `tabIndex`.
+     */
+    setTabIndex(element, tabIndex) {
+        element.tabIndex = tabIndex;
+    }
+}
+SkyAutocompleteAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAutocompleteAdapterService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAutocompleteAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAutocompleteAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAutocompleteAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
+
+function skyAutocompleteDefaultSearchFunction(options) {
+    const filterData = function (searchText, data) {
+        return data.filter((item) => {
+            if (!options.searchFilters || !options.searchFilters.length) {
+                return true;
+            }
+            // Find the first failing filter (we can skip the others if one fails).
+            const failedFilter = options.searchFilters.find((filter) => {
+                return !filter.call({}, searchText, item);
+            });
+            return failedFilter === undefined;
+        });
+    };
+    const search = function (searchText, data) {
+        const results = [];
+        /* Sanity check - autocomplete will not call search with empty search text */
+        /* istanbul ignore if */
+        if (!searchText) {
+            return results;
+        }
+        const searchTextNormalized = normalizeDiacritics(searchText).toUpperCase();
+        const filteredData = filterData(searchText, data);
+        for (let i = 0, n = filteredData.length; i < n; i++) {
+            const result = filteredData[i];
+            const isMatch = options.propertiesToSearch.find((property) => {
+                let value = (result[property] || '').toString();
+                value = normalizeDiacritics(value).toUpperCase();
+                return value.indexOf(searchTextNormalized) > -1;
+            });
+            if (isMatch) {
+                results.push(result);
+            }
+        }
+        return results;
+    };
+    return search;
+}
+
+/**
+ * @internal
+ */
+var SkyAutocompleteMessageType;
+(function (SkyAutocompleteMessageType) {
+    /**
+     * Closes the dropdown.
+     */
+    SkyAutocompleteMessageType[SkyAutocompleteMessageType["CloseDropdown"] = 0] = "CloseDropdown";
+    /**
+     * Repositions the dropdown.
+     */
+    SkyAutocompleteMessageType[SkyAutocompleteMessageType["RepositionDropdown"] = 1] = "RepositionDropdown";
+})(SkyAutocompleteMessageType || (SkyAutocompleteMessageType = {}));
+
+let uniqueId$1 = 0;
+class SkyAutocompleteComponent {
+    constructor(changeDetector, elementRef, affixService, adapterService, overlayService, inputBoxHostSvc) {
+        this.changeDetector = changeDetector;
+        this.elementRef = elementRef;
+        this.affixService = affixService;
+        this.adapterService = adapterService;
+        this.overlayService = overlayService;
+        this.inputBoxHostSvc = inputBoxHostSvc;
+        /**
+         * @internal
+         * Indicates whether to display a button in the dropdown that opens a picker where users can view all options.
+         */
+        this.enableShowMore = false;
+        /**
+         * @internal
+         * Indicates whether to display a button that lets users add options to the data source.
+         */
+        this.showAddButton = false;
+        /**
+         * @internal
+         * Allows async search to be disabled even when a listener is specified for
+         * the `searchAsync` output.
+         */
+        this.searchAsyncDisabled = false;
+        /**
+         * @internal
+         * Fires when users select the button to add options to the data source.
+         */
+        this.addClick = new EventEmitter();
+        /**
+         * @internal
+         * Fires when users select the button to view all options.
+         */
+        this.showMoreClick = new EventEmitter();
+        this.searchAsync = new EventEmitter();
+        this.isOpen = false;
+        this.isSearchingAsync = false;
+        /**
+         * Index that indicates which descendant of the overlay currently has focus.
+         */
+        this.activeElementIndex = -1;
+        this.inputDirectiveUnsubscribe = new Subject();
+        this.ngUnsubscribe = new Subject();
+        /**
+         * Elements within the autocomplete dropdown that are focusable.
+         * These are typically the search results and action buttons, but could also be
+         * elements provided in the consumer's own template.
+         */
+        this.overlayFocusableElements = [];
+        this._selectionChange = new EventEmitter();
+        const id = ++uniqueId$1;
+        this.resultsListId = `sky-autocomplete-list-${id}`;
+        this.resultsWrapperId = `sky-autocomplete-wrapper-${id}`;
+    }
+    /**
+     * Specifies a static data source for the autocomplete component to search
+     * when users enter text. For a dynamic data source such as an array that
+     * changes due to server calls, use the `search` property instead.
      */
     set data(value) {
         this._data = value;
@@ -1338,7 +1338,7 @@ class SkyCountryFieldComponent {
     set selectedCountry(newCountry) {
         if (!this.countriesAreEqual(this.selectedCountry, newCountry)) {
             if (newCountry && newCountry.iso2) {
-                let isoCountry = this.countries.find((country) => country.iso2 === newCountry.iso2);
+                const isoCountry = this.countries.find((country) => country.iso2 === newCountry.iso2);
                 if (isoCountry) {
                     newCountry = isoCountry;
                 }
@@ -1518,7 +1518,7 @@ class SkyCountryFieldComponent {
         // Ignoring coverage here as this will be removed in the next release.
         // istanbul ignore next
         if (!this.includePhoneInfo && !this.hideSelectedCountryFlag) {
-            if ((_b = (_a = (this.elRef.nativeElement.parentElement)) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('sky-phone-field-country-search')) {
+            if ((_b = (_a = this.elRef.nativeElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('sky-phone-field-country-search')) {
                 this.includePhoneInfo = true;
                 this.hideSelectedCountryFlag = true;
             }
@@ -1545,7 +1545,7 @@ class SkyCountryFieldComponent {
     sortCountriesWithSelectedAndDefault(selectedCountry) {
         let selectedCountryIndex;
         let selectedCountryData;
-        let sortedNewCountries = this.countries.sort((a, b) => {
+        const sortedNewCountries = this.countries.sort((a, b) => {
             if (((this.defaultCountryData &&
                 this.countriesEqual(a, this.defaultCountryData)) ||
                 a.name < b.name) &&
@@ -1665,101 +1665,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-/**
- * @internal
- */
-class SkyLookupAutocompleteAdapter {
-    constructor() {
-        this.searchAsync = new EventEmitter();
-    }
-    /**
-     * Specifies an object property to display in the text input after users
-     * select an item in the dropdown list.
-     * @default "name"
-     */
-    set descriptorProperty(value) {
-        this._descriptorProperty = value;
-    }
-    get descriptorProperty() {
-        return this._descriptorProperty || 'name';
-    }
-    /**
-     * Specifies an array of object properties to search.
-     * @default ["name"]
-     */
-    set propertiesToSearch(value) {
-        this._propertiesToSearch = value;
-    }
-    get propertiesToSearch() {
-        return this._propertiesToSearch || ['name'];
-    }
-    /**
-     * Specifies a function to dynamically manage the data source when users
-     * change the text in the lookup field. The search function must return
-     * an array or a promise of an array. The `search` property is particularly
-     * useful when the data source does not live in the source code.
-     */
-    set search(value) {
-        this._search = value;
-    }
-    get search() {
-        return (this._search ||
-            skyAutocompleteDefaultSearchFunction({
-                propertiesToSearch: this.propertiesToSearch,
-                searchFilters: this.searchFilters,
-            }));
-    }
-}
-SkyLookupAutocompleteAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAutocompleteAdapter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SkyLookupAutocompleteAdapter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupAutocompleteAdapter, inputs: { debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit" }, outputs: { searchAsync: "searchAsync" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAutocompleteAdapter, decorators: [{
-            type: Directive
-        }], propDecorators: { debounceTime: [{
-                type: Input
-            }], descriptorProperty: [{
-                type: Input
-            }], propertiesToSearch: [{
-                type: Input
-            }], search: [{
-                type: Input
-            }], searchResultTemplate: [{
-                type: Input
-            }], searchTextMinimumCharacters: [{
-                type: Input
-            }], searchFilters: [{
-                type: Input
-            }], searchResultsLimit: [{
-                type: Input
-            }], searchAsync: [{
-                type: Output
-            }] } });
-
-/**
- * @internal
- */
-class SkyLookupAdapterService {
-    focusInput(elRef) {
-        const inputEl = elRef.nativeElement.querySelector('.sky-lookup-input');
-        /* Sanity check */
-        /* istanbul ignore else */
-        if (inputEl) {
-            inputEl.focus();
-        }
-    }
-}
-SkyLookupAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyLookupAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAdapterService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @internal
- * Context for the show more native picker. These values are provided by the lookup component.
- */
-class SkyLookupShowMoreNativePickerContext {
-}
-
 /**
  * @internal
  */
@@ -1774,9 +1679,9 @@ class SkySearchAdapterService {
         this.getInputEl(searchEl).focus();
     }
     startInputAnimation(searchEl) {
-        let buttonWidth = this.getSearchOpenButtonEl(searchEl).clientWidth;
-        let offsetWidth = this.getSearchContainerEl(searchEl).offsetLeft;
-        let minWidth = buttonWidth + offsetWidth;
+        const buttonWidth = this.getSearchOpenButtonEl(searchEl).clientWidth;
+        const offsetWidth = this.getSearchContainerEl(searchEl).offsetLeft;
+        const minWidth = buttonWidth + offsetWidth;
         this.getInputContainerEl(searchEl).style.minWidth =
             minWidth.toString() + 'px';
         this.renderer.setStyle(this.getInputContainerEl(searchEl), 'min-width', minWidth.toString() + 'px');
@@ -2048,9 +1953,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-/**
- * @internal
- * Internal component to implement the native picker.
+class SkySearchModule {
+}
+SkySearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkySearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySearchModule, declarations: [SkySearchComponent], imports: [CommonModule,
+        SkyInputBoxModule,
+        SkyLookupResourcesModule,
+        FormsModule,
+        SkyIconModule,
+        SkyThemeModule,
+        SkyIdModule], exports: [SkySearchComponent] });
+SkySearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySearchModule, imports: [[
+            CommonModule,
+            SkyInputBoxModule,
+            SkyLookupResourcesModule,
+            FormsModule,
+            SkyIconModule,
+            SkyThemeModule,
+            SkyIdModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySearchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkySearchComponent],
+                    imports: [
+                        CommonModule,
+                        SkyInputBoxModule,
+                        SkyLookupResourcesModule,
+                        FormsModule,
+                        SkyIconModule,
+                        SkyThemeModule,
+                        SkyIdModule,
+                    ],
+                    exports: [SkySearchComponent],
+                }]
+        }] });
+
+class SkyLookupItemSelectedPipe {
+    transform(id, selectedIdMap) {
+        return selectedIdMap.has(id);
+    }
+}
+SkyLookupItemSelectedPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupItemSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyLookupItemSelectedPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupItemSelectedPipe, name: "skyLookupItemSelected" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupItemSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyLookupItemSelected',
+                }]
+        }] });
+
+/**
+ * @internal
+ * Context for the show more native picker. These values are provided by the lookup component.
+ */
+class SkyLookupShowMoreNativePickerAsyncContext {
+}
+
+/**
+ * @internal
+ * Internal component to implement the native picker.
+ */
+class SkyLookupShowMoreAsyncModalComponent {
+    constructor(modalInstance, context, changeDetector) {
+        this.modalInstance = modalInstance;
+        this.context = context;
+        this.changeDetector = changeDetector;
+        /**
+         * @internal
+         * Fires when users select the button to add new options to the list.
+         */
+        this.addClick = new Subject();
+        this.displayedItems = [];
+        this.onlyShowSelected = false;
+        this.isSearching = false;
+        this.hasMoreItems = false;
+        this.isLoadingMore = false;
+        this.offset = 0;
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.searchText = this.context.initialSearch;
+        this.createInitialSelectedItemsMap();
+        this.loadSearchResults();
+    }
+    ngOnDestroy() {
+        this.cancelCurrentSearch();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    addButtonClicked() {
+        this.addClick.next();
+    }
+    clearAll() {
+        this.selectedIdMap = new Map(this.selectedIdMap);
+        // Only deselect items that have been loaded; items that would be loaded
+        // after an infinite scroll event should remain selected.
+        for (const item of this.items) {
+            this.selectedIdMap.delete(item[this.context.idProperty]);
+        }
+        this.updateDisplayedItems();
+        this.changeDetector.markForCheck();
+    }
+    itemClick(selectedItem) {
+        if (this.context.selectMode === 'single') {
+            this.onItemSelect(!selectedItem.selected, selectedItem);
+        }
+    }
+    onItemSelect(newSelectState, itemToSelect) {
+        const itemId = itemToSelect[this.context.idProperty];
+        // Create a new Map so the pipe transform will execute on the next
+        // change detection cycle.
+        this.selectedIdMap = new Map(this.selectedIdMap);
+        if (this.context.selectMode === 'single') {
+            if (newSelectState) {
+                this.selectedIdMap.clear();
+                this.selectedIdMap.set(itemId, itemToSelect);
+            }
+        }
+        else {
+            if (newSelectState) {
+                this.selectedIdMap.set(itemId, itemToSelect);
+            }
+            else {
+                this.selectedIdMap.delete(itemId);
+            }
+        }
+        this.updateDisplayedItems();
+    }
+    searchApplied(searchText) {
+        this.offset = 0;
+        this.searchText = searchText;
+        this.loadSearchResults();
+    }
+    selectAll() {
+        this.selectedIdMap = new Map();
+        for (const item of this.items) {
+            this.selectedIdMap.set(item[this.context.idProperty], item);
+        }
+        this.updateDisplayedItems();
+    }
+    infiniteScrollEnd() {
+        this.cancelCurrentSearch();
+        /* Sanity check - else case would only happen if this was called directly */
+        /* istanbul ignore else */
+        if (this.hasMoreItems) {
+            this.isLoadingMore = true;
+            this.performSearch((result) => {
+                this.items = this.items.concat(result.items);
+                this.updateDisplayedItems();
+                this.isLoadingMore = false;
+            });
+        }
+    }
+    save() {
+        const selectedItems = Array.from(this.selectedIdMap.values(), (itemData, index) => ({
+            index,
+            itemData,
+        })).sort((a, b) => {
+            return this.items.indexOf(a.itemData) < this.items.indexOf(b.itemData)
+                ? -1
+                : 1;
+        });
+        this.modalInstance.save(selectedItems);
+    }
+    loadSearchResults() {
+        this.cancelCurrentSearch();
+        this.isSearching = true;
+        this.performSearch((result) => {
+            this.isSearching = false;
+            this.items = result.items;
+        });
+    }
+    createInitialSelectedItemsMap() {
+        this.selectedIdMap = new Map(this.context.initialValue.map((item) => [
+            item[this.context.idProperty],
+            item,
+        ]));
+    }
+    performSearch(processResults) {
+        this.currentSearchSub = this.context
+            .searchAsync({
+            displayType: 'modal',
+            offset: this.offset,
+            searchText: this.searchText || '',
+            continuationData: this.continuationData,
+        })
+            .pipe(take(1))
+            .subscribe((result) => {
+            processResults(result);
+            this.continuationData = result.continuationData;
+            this.hasMoreItems = result.hasMore;
+            this.offset = this.items.length;
+            this.updateDisplayedItems();
+            this.changeDetector.markForCheck();
+        });
+    }
+    updateDisplayedItems() {
+        if (this.onlyShowSelected) {
+            this.displayedItems = this.items.filter((item) => this.selectedIdMap.has(item[this.context.idProperty]));
+        }
+        else {
+            this.displayedItems = this.items;
+        }
+    }
+    cancelCurrentSearch() {
+        if (this.currentSearchSub) {
+            this.currentSearchSub.unsubscribe();
+            this.currentSearchSub = undefined;
+            this.isLoadingMore = false;
+            this.isSearching = false;
+        }
+    }
+}
+SkyLookupShowMoreAsyncModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreAsyncModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyLookupShowMoreNativePickerAsyncContext }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyLookupShowMoreAsyncModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupShowMoreAsyncModalComponent, selector: "sky-lookup-show-more-async-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n      {{ context.userConfig.title }}\n    </ng-container>\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n    <div\n      [skyViewkeeper]=\"[\n        '.sky-lookup-show-more-modal-toolbar',\n        '.sky-lookup-show-more-modal-muiltiselect-toolbar'\n      ]\"\n    >\n      <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <sky-search\n              [debounceTime]=\"250\"\n              [searchText]=\"searchText\"\n              (searchApply)=\"searchApplied($event)\"\n            >\n            </sky-search>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <button\n              *ngIf=\"context.showAddButton\"\n              type=\"button\"\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n              (click)=\"addButtonClicked()\"\n            >\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"add\"\n                iconType=\"skyux\"\n              ></sky-icon>\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n              {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n            </button>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n      <sky-toolbar\n        *ngIf=\"context.selectMode === 'multiple'\"\n        class=\"sky-lookup-show-more-modal-muiltiselect-toolbar\"\n      >\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <button\n              class=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\n              \"\n              type=\"button\"\n              (click)=\"selectAll()\"\n            >\n              {{\n                'skyux_lookup_show_more_select_all_button_title'\n                  | skyLibResources\n              }}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-item>\n            <button\n              class=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\n              \"\n              type=\"button\"\n              (click)=\"clearAll()\"\n            >\n              {{\n                'skyux_lookup_show_more_clear_all_button_title'\n                  | skyLibResources\n              }}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <sky-checkbox\n              [(checked)]=\"onlyShowSelected\"\n              (change)=\"updateDisplayedItems()\"\n            >\n              <sky-checkbox-label>\n                {{\n                  'skyux_lookup_show_more_show_selected_option_title'\n                    | skyLibResources\n                }}\n              </sky-checkbox-label>\n            </sky-checkbox>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n    </div>\n    <div\n      *ngIf=\"!isSearching && displayedItems.length === 0\"\n      class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n    >\n      {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n    </div>\n    <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n      <sky-repeater-item\n        *ngFor=\"let item of displayedItems\"\n        [isSelected]=\"\n          item[context.idProperty] | skyLookupItemSelected: selectedIdMap\n        \"\n        [selectable]=\"context.selectMode === 'multiple'\"\n        (click)=\"itemClick(item)\"\n        (keyup.enter)=\"itemClick(item)\"\n        (isSelectedChange)=\"onItemSelect($event, item)\"\n      >\n        <sky-repeater-item-content>\n          <ng-container\n            *ngTemplateOutlet=\"\n              context.userConfig?.itemTemplate\n                ? context.userConfig?.itemTemplate\n                : defaultItemTemplate;\n              context: { item: item }\n            \"\n          >\n          </ng-container>\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    </sky-repeater>\n    <sky-infinite-scroll\n      [enabled]=\"hasMoreItems\"\n      [loading]=\"isLoadingMore\"\n      (scrollEnd)=\"infiniteScrollEnd()\"\n    >\n    </sky-infinite-scroll>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"\n        sky-btn\n        sky-btn-primary\n        sky-margin-inline-compact\n        sky-lookup-show-more-modal-save\n      \"\n      type=\"button\"\n      [disabled]=\"isSearching\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n      type=\"button\"\n      (click)=\"modalInstance.close()\"\n    >\n      {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n  {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n  <ng-container *ngIf=\"context.selectMode === 'single'\">\n    {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n  </ng-container>\n  <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n    {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n  </ng-container>\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"], components: [{ type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1$1.λ4, selector: "sky-modal-header" }, { type: i1$1.λ2, selector: "sky-modal-content" }, { type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i4$1.λ37, selector: "sky-toolbar" }, { type: i4$1.λ38, selector: "sky-toolbar-section" }, { type: i4$1.λ39, selector: "sky-toolbar-item" }, { type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i4$1.λ40, selector: "sky-toolbar-view-actions" }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.λ4, selector: "sky-checkbox-label" }, { type: i7$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i7$1.λ10, selector: "sky-repeater-item", inputs: ["itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i7$1.λ8, selector: "sky-repeater-item-content" }, { type: i7$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { type: i1$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe, "skyLookupItemSelected": SkyLookupItemSelectedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreAsyncModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-lookup-show-more-async-modal',
+                    templateUrl: './lookup-show-more-async-modal.component.html',
+                    styleUrls: ['./lookup-show-more-async-modal.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyLookupShowMoreNativePickerAsyncContext }, { type: i0.ChangeDetectorRef }]; } });
+
+/**
+ * @internal
+ * Context for the show more native picker. These values are provided by the lookup component.
+ */
+class SkyLookupShowMoreNativePickerContext {
+}
+
+/**
+ * @internal
+ * Internal component to implement the native picker.
  */
 class SkyLookupShowMoreModalComponent {
     constructor(modalInstance, context, changeDetector) {
@@ -2098,7 +2235,7 @@ class SkyLookupShowMoreModalComponent {
     }
     addItems() {
         if (!this.items || this.items.length === 0) {
-            let selectedItems = this.selectedItems.slice();
+            const selectedItems = this.selectedItems.slice();
             this.items = this.context.items
                 ? this.context.items.map((item) => {
                     return {
@@ -2173,9 +2310,9 @@ class SkyLookupShowMoreModalComponent {
             }
         }
         else {
-            let selectedItems = this.selectedItems;
+            const selectedItems = this.selectedItems;
             const allItemsIndex = this.items.findIndex((item) => item.value === itemToSelect.value);
-            let selectedItemsIndex = selectedItems.findIndex((selectedItem) => selectedItem.index === allItemsIndex);
+            const selectedItemsIndex = selectedItems.findIndex((selectedItem) => selectedItem.index === allItemsIndex);
             if (newSelectState && selectedItemsIndex === -1) {
                 selectedItems.push({
                     index: allItemsIndex,
@@ -2199,7 +2336,7 @@ class SkyLookupShowMoreModalComponent {
         this.updateDataState();
     }
     searchItems(items) {
-        let searchText = this.searchText;
+        const searchText = this.searchText;
         if (searchText) {
             const resultValues = this.context.search(searchText, items.map((item) => {
                 return item.value;
@@ -2220,7 +2357,7 @@ class SkyLookupShowMoreModalComponent {
         }
     }
     selectAll() {
-        let selectedItems = this.selectedItems;
+        const selectedItems = this.selectedItems;
         this.displayedItems.forEach((item) => {
             if (!item.selected) {
                 item.selected = true;
@@ -2239,245 +2376,144 @@ class SkyLookupShowMoreModalComponent {
         this.updateDataState();
         this.changeDetector.markForCheck();
     }
-    updateDataState() {
-        let selectedItems = this.selectedItems;
-        this.items.forEach((item, index) => {
-            item.selected =
-                selectedItems.findIndex((selectedItem) => selectedItem.index === index) !== -1;
-        });
-        this.searchItems(this.items).then((searchedItems) => {
-            if (this.onlyShowSelected) {
-                searchedItems = searchedItems.filter((item) => item.selected);
-            }
-            this.displayedItems = searchedItems.slice(0, this.itemIndex);
-            if (this.itemIndex > searchedItems.length) {
-                this.itemsHaveMore = false;
-            }
-            else {
-                this.itemsHaveMore = true;
-            }
-            this.changeDetector.markForCheck();
-        });
-    }
-    updateItemData(data) {
-        this.context.items = data;
-        this.items = undefined;
-        this.itemIndex = 10;
-        this.selectedItems.forEach((selectedItem) => {
-            this.context.items.forEach((item, index) => {
-                if (selectedItem.itemData === item) {
-                    selectedItem.index = index;
-                }
-            });
-        });
-        this.addItems();
-        this.changeDetector.markForCheck();
-    }
-}
-SkyLookupShowMoreModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyLookupShowMoreNativePickerContext }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n      {{ context.userConfig.title }}\n    </ng-container>\n  </sky-modal-header>\n  <sky-modal-content>\n    <div\n      [skyViewkeeper]=\"[\n        '.sky-lookup-show-more-modal-toolbar',\n        '.sky-lookup-show-more-modal-muiltiselect-toolbar'\n      ]\"\n    >\n      <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <sky-search\n              [debounceTime]=\"250\"\n              [searchText]=\"searchText\"\n              (searchApply)=\"searchApplied($event)\"\n            >\n            </sky-search>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <button\n              *ngIf=\"context.showAddButton\"\n              type=\"button\"\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n              (click)=\"addButtonClicked()\"\n            >\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"add\"\n                iconType=\"skyux\"\n              ></sky-icon>\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n              {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n            </button>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n      <sky-toolbar\n        *ngIf=\"context.selectMode === 'multiple'\"\n        class=\"sky-lookup-show-more-modal-muiltiselect-toolbar\"\n      >\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <button\n              class=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\n              \"\n              type=\"button\"\n              (click)=\"selectAll()\"\n            >\n              {{\n                'skyux_lookup_show_more_select_all_button_title'\n                  | skyLibResources\n              }}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-item>\n            <button\n              class=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\n              \"\n              type=\"button\"\n              (click)=\"clearAll()\"\n            >\n              {{\n                'skyux_lookup_show_more_clear_all_button_title'\n                  | skyLibResources\n              }}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <sky-checkbox\n              [(checked)]=\"onlyShowSelected\"\n              (change)=\"updateDataState()\"\n            >\n              <sky-checkbox-label>\n                {{\n                  'skyux_lookup_show_more_show_selected_option_title'\n                    | skyLibResources\n                }}\n              </sky-checkbox-label>\n            </sky-checkbox>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n    </div>\n    <div\n      *ngIf=\"displayedItems.length === 0\"\n      class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n    >\n      {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n    </div>\n    <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n      <sky-repeater-item\n        *ngFor=\"let item of displayedItems\"\n        [selectable]=\"context.selectMode === 'multiple'\"\n        [(isSelected)]=\"item.selected\"\n        (click)=\"itemClick(item)\"\n        (keyup.enter)=\"itemClick(item)\"\n        (isSelectedChange)=\"onItemSelect($event, item)\"\n      >\n        <sky-repeater-item-content>\n          <ng-container\n            *ngTemplateOutlet=\"\n              context.userConfig?.itemTemplate\n                ? context.userConfig?.itemTemplate\n                : defaultItemTemplate;\n              context: { item: item.value }\n            \"\n          >\n          </ng-container>\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    </sky-repeater>\n    <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"addItems()\">\n    </sky-infinite-scroll>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"\n        sky-btn\n        sky-btn-primary\n        sky-margin-inline-compact\n        sky-lookup-show-more-modal-save\n      \"\n      type=\"button\"\n      (click)=\"modalInstance.save(selectedItems)\"\n    >\n      {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n      type=\"button\"\n      (click)=\"modalInstance.close()\"\n    >\n      {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n  {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n  <ng-container *ngIf=\"context.selectMode === 'single'\">\n    {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n  </ng-container>\n  <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n    {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n  </ng-container>\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"], components: [{ type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1$1.λ4, selector: "sky-modal-header" }, { type: i1$1.λ2, selector: "sky-modal-content" }, { type: i3.λ37, selector: "sky-toolbar" }, { type: i3.λ38, selector: "sky-toolbar-section" }, { type: i3.λ39, selector: "sky-toolbar-item" }, { type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i3.λ40, selector: "sky-toolbar-view-actions" }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.λ4, selector: "sky-checkbox-label" }, { type: i7$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i7$1.λ10, selector: "sky-repeater-item", inputs: ["itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i7$1.λ8, selector: "sky-repeater-item-content" }, { type: i7$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { type: i1$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // Suppress this error rather than fix the selector since consumers with unit tests
-                    // may be looking for an element with this selector. We can change it in the next major
-                    // version of SKY UX.
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: 'skyux-lookup-show-more-modal',
-                    templateUrl: './lookup-show-more-modal.component.html',
-                    styleUrls: ['./lookup-show-more-modal.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyLookupShowMoreNativePickerContext }, { type: i0.ChangeDetectorRef }]; } });
-
-/**
- * @internal
- * Context for the show more native picker. These values are provided by the lookup component.
- */
-class SkyLookupShowMoreNativePickerAsyncContext {
-}
-
-class SkyLookupItemSelectedPipe {
-    transform(id, selectedIdMap) {
-        return selectedIdMap.has(id);
-    }
-}
-SkyLookupItemSelectedPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupItemSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SkyLookupItemSelectedPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupItemSelectedPipe, name: "skyLookupItemSelected" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupItemSelectedPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'skyLookupItemSelected',
-                }]
-        }] });
-
-/**
- * @internal
- * Internal component to implement the native picker.
- */
-class SkyLookupShowMoreAsyncModalComponent {
-    constructor(modalInstance, context, changeDetector) {
-        this.modalInstance = modalInstance;
-        this.context = context;
-        this.changeDetector = changeDetector;
-        /**
-         * @internal
-         * Fires when users select the button to add new options to the list.
-         */
-        this.addClick = new Subject();
-        this.displayedItems = [];
-        this.onlyShowSelected = false;
-        this.isSearching = false;
-        this.hasMoreItems = false;
-        this.isLoadingMore = false;
-        this.offset = 0;
-        this.ngUnsubscribe = new Subject();
-    }
-    ngOnInit() {
-        this.searchText = this.context.initialSearch;
-        this.createInitialSelectedItemsMap();
-        this.loadSearchResults();
-    }
-    ngOnDestroy() {
-        this.cancelCurrentSearch();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-    addButtonClicked() {
-        this.addClick.next();
-    }
-    clearAll() {
-        this.selectedIdMap = new Map(this.selectedIdMap);
-        // Only deselect items that have been loaded; items that would be loaded
-        // after an infinite scroll event should remain selected.
-        for (const item of this.items) {
-            this.selectedIdMap.delete(item[this.context.idProperty]);
-        }
-        this.updateDisplayedItems();
-        this.changeDetector.markForCheck();
-    }
-    itemClick(selectedItem) {
-        if (this.context.selectMode === 'single') {
-            this.onItemSelect(!selectedItem.selected, selectedItem);
-        }
-    }
-    onItemSelect(newSelectState, itemToSelect) {
-        const itemId = itemToSelect[this.context.idProperty];
-        // Create a new Map so the pipe transform will execute on the next
-        // change detection cycle.
-        this.selectedIdMap = new Map(this.selectedIdMap);
-        if (this.context.selectMode === 'single') {
-            if (newSelectState) {
-                this.selectedIdMap.clear();
-                this.selectedIdMap.set(itemId, itemToSelect);
+    updateDataState() {
+        const selectedItems = this.selectedItems;
+        this.items.forEach((item, index) => {
+            item.selected =
+                selectedItems.findIndex((selectedItem) => selectedItem.index === index) !== -1;
+        });
+        this.searchItems(this.items).then((searchedItems) => {
+            if (this.onlyShowSelected) {
+                searchedItems = searchedItems.filter((item) => item.selected);
             }
-        }
-        else {
-            if (newSelectState) {
-                this.selectedIdMap.set(itemId, itemToSelect);
+            this.displayedItems = searchedItems.slice(0, this.itemIndex);
+            if (this.itemIndex > searchedItems.length) {
+                this.itemsHaveMore = false;
             }
             else {
-                this.selectedIdMap.delete(itemId);
+                this.itemsHaveMore = true;
             }
-        }
-        this.updateDisplayedItems();
-    }
-    searchApplied(searchText) {
-        this.offset = 0;
-        this.searchText = searchText;
-        this.loadSearchResults();
+            this.changeDetector.markForCheck();
+        });
     }
-    selectAll() {
-        this.selectedIdMap = new Map();
-        for (const item of this.items) {
-            this.selectedIdMap.set(item[this.context.idProperty], item);
-        }
-        this.updateDisplayedItems();
+    updateItemData(data) {
+        this.context.items = data;
+        this.items = undefined;
+        this.itemIndex = 10;
+        this.selectedItems.forEach((selectedItem) => {
+            this.context.items.forEach((item, index) => {
+                if (selectedItem.itemData === item) {
+                    selectedItem.index = index;
+                }
+            });
+        });
+        this.addItems();
+        this.changeDetector.markForCheck();
     }
-    infiniteScrollEnd() {
-        this.cancelCurrentSearch();
-        /* Sanity check - else case would only happen if this was called directly */
+}
+SkyLookupShowMoreModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyLookupShowMoreNativePickerContext }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n      {{ context.userConfig.title }}\n    </ng-container>\n  </sky-modal-header>\n  <sky-modal-content>\n    <div\n      [skyViewkeeper]=\"[\n        '.sky-lookup-show-more-modal-toolbar',\n        '.sky-lookup-show-more-modal-muiltiselect-toolbar'\n      ]\"\n    >\n      <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <sky-search\n              [debounceTime]=\"250\"\n              [searchText]=\"searchText\"\n              (searchApply)=\"searchApplied($event)\"\n            >\n            </sky-search>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <button\n              *ngIf=\"context.showAddButton\"\n              type=\"button\"\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n              (click)=\"addButtonClicked()\"\n            >\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"add\"\n                iconType=\"skyux\"\n              ></sky-icon>\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n              {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n            </button>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n      <sky-toolbar\n        *ngIf=\"context.selectMode === 'multiple'\"\n        class=\"sky-lookup-show-more-modal-muiltiselect-toolbar\"\n      >\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <button\n              class=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\n              \"\n              type=\"button\"\n              (click)=\"selectAll()\"\n            >\n              {{\n                'skyux_lookup_show_more_select_all_button_title'\n                  | skyLibResources\n              }}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-item>\n            <button\n              class=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\n              \"\n              type=\"button\"\n              (click)=\"clearAll()\"\n            >\n              {{\n                'skyux_lookup_show_more_clear_all_button_title'\n                  | skyLibResources\n              }}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <sky-checkbox\n              [(checked)]=\"onlyShowSelected\"\n              (change)=\"updateDataState()\"\n            >\n              <sky-checkbox-label>\n                {{\n                  'skyux_lookup_show_more_show_selected_option_title'\n                    | skyLibResources\n                }}\n              </sky-checkbox-label>\n            </sky-checkbox>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n    </div>\n    <div\n      *ngIf=\"displayedItems.length === 0\"\n      class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n    >\n      {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n    </div>\n    <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n      <sky-repeater-item\n        *ngFor=\"let item of displayedItems\"\n        [selectable]=\"context.selectMode === 'multiple'\"\n        [(isSelected)]=\"item.selected\"\n        (click)=\"itemClick(item)\"\n        (keyup.enter)=\"itemClick(item)\"\n        (isSelectedChange)=\"onItemSelect($event, item)\"\n      >\n        <sky-repeater-item-content>\n          <ng-container\n            *ngTemplateOutlet=\"\n              context.userConfig?.itemTemplate\n                ? context.userConfig?.itemTemplate\n                : defaultItemTemplate;\n              context: { item: item.value }\n            \"\n          >\n          </ng-container>\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    </sky-repeater>\n    <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"addItems()\">\n    </sky-infinite-scroll>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"\n        sky-btn\n        sky-btn-primary\n        sky-margin-inline-compact\n        sky-lookup-show-more-modal-save\n      \"\n      type=\"button\"\n      (click)=\"modalInstance.save(selectedItems)\"\n    >\n      {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n      type=\"button\"\n      (click)=\"modalInstance.close()\"\n    >\n      {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n  {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n  <ng-container *ngIf=\"context.selectMode === 'single'\">\n    {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n  </ng-container>\n  <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n    {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n  </ng-container>\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"], components: [{ type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1$1.λ4, selector: "sky-modal-header" }, { type: i1$1.λ2, selector: "sky-modal-content" }, { type: i4$1.λ37, selector: "sky-toolbar" }, { type: i4$1.λ38, selector: "sky-toolbar-section" }, { type: i4$1.λ39, selector: "sky-toolbar-item" }, { type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i4$1.λ40, selector: "sky-toolbar-view-actions" }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.λ4, selector: "sky-checkbox-label" }, { type: i7$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i7$1.λ10, selector: "sky-repeater-item", inputs: ["itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i7$1.λ8, selector: "sky-repeater-item-content" }, { type: i7$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { type: i1$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // Suppress this error rather than fix the selector since consumers with unit tests
+                    // may be looking for an element with this selector. We can change it in the next major
+                    // version of SKY UX.
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'skyux-lookup-show-more-modal',
+                    templateUrl: './lookup-show-more-modal.component.html',
+                    styleUrls: ['./lookup-show-more-modal.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyLookupShowMoreNativePickerContext }, { type: i0.ChangeDetectorRef }]; } });
+
+/**
+ * @internal
+ */
+class SkyLookupAdapterService {
+    focusInput(elRef) {
+        const inputEl = elRef.nativeElement.querySelector('.sky-lookup-input');
+        /* Sanity check */
         /* istanbul ignore else */
-        if (this.hasMoreItems) {
-            this.isLoadingMore = true;
-            this.performSearch((result) => {
-                this.items = this.items.concat(result.items);
-                this.updateDisplayedItems();
-                this.isLoadingMore = false;
-            });
+        if (inputEl) {
+            inputEl.focus();
         }
     }
-    save() {
-        const selectedItems = Array.from(this.selectedIdMap.values(), (itemData, index) => ({
-            index,
-            itemData,
-        })).sort((a, b) => {
-            return this.items.indexOf(a.itemData) < this.items.indexOf(b.itemData)
-                ? -1
-                : 1;
-        });
-        this.modalInstance.save(selectedItems);
+}
+SkyLookupAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyLookupAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAdapterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyLookupAutocompleteAdapter {
+    constructor() {
+        this.searchAsync = new EventEmitter();
     }
-    loadSearchResults() {
-        this.cancelCurrentSearch();
-        this.isSearching = true;
-        this.performSearch((result) => {
-            this.isSearching = false;
-            this.items = result.items;
-        });
+    /**
+     * Specifies an object property to display in the text input after users
+     * select an item in the dropdown list.
+     * @default "name"
+     */
+    set descriptorProperty(value) {
+        this._descriptorProperty = value;
     }
-    createInitialSelectedItemsMap() {
-        this.selectedIdMap = new Map(this.context.initialValue.map((item) => [
-            item[this.context.idProperty],
-            item,
-        ]));
+    get descriptorProperty() {
+        return this._descriptorProperty || 'name';
     }
-    performSearch(processResults) {
-        this.currentSearchSub = this.context
-            .searchAsync({
-            displayType: 'modal',
-            offset: this.offset,
-            searchText: this.searchText || '',
-            continuationData: this.continuationData,
-        })
-            .pipe(take(1))
-            .subscribe((result) => {
-            processResults(result);
-            this.continuationData = result.continuationData;
-            this.hasMoreItems = result.hasMore;
-            this.offset = this.items.length;
-            this.updateDisplayedItems();
-            this.changeDetector.markForCheck();
-        });
+    /**
+     * Specifies an array of object properties to search.
+     * @default ["name"]
+     */
+    set propertiesToSearch(value) {
+        this._propertiesToSearch = value;
     }
-    updateDisplayedItems() {
-        if (this.onlyShowSelected) {
-            this.displayedItems = this.items.filter((item) => this.selectedIdMap.has(item[this.context.idProperty]));
-        }
-        else {
-            this.displayedItems = this.items;
-        }
+    get propertiesToSearch() {
+        return this._propertiesToSearch || ['name'];
     }
-    cancelCurrentSearch() {
-        if (this.currentSearchSub) {
-            this.currentSearchSub.unsubscribe();
-            this.currentSearchSub = undefined;
-            this.isLoadingMore = false;
-            this.isSearching = false;
-        }
+    /**
+     * Specifies a function to dynamically manage the data source when users
+     * change the text in the lookup field. The search function must return
+     * an array or a promise of an array. The `search` property is particularly
+     * useful when the data source does not live in the source code.
+     */
+    set search(value) {
+        this._search = value;
+    }
+    get search() {
+        return (this._search ||
+            skyAutocompleteDefaultSearchFunction({
+                propertiesToSearch: this.propertiesToSearch,
+                searchFilters: this.searchFilters,
+            }));
     }
 }
-SkyLookupShowMoreAsyncModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreAsyncModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyLookupShowMoreNativePickerAsyncContext }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyLookupShowMoreAsyncModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupShowMoreAsyncModalComponent, selector: "sky-lookup-show-more-async-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n      {{ context.userConfig.title }}\n    </ng-container>\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n    <div\n      [skyViewkeeper]=\"[\n        '.sky-lookup-show-more-modal-toolbar',\n        '.sky-lookup-show-more-modal-muiltiselect-toolbar'\n      ]\"\n    >\n      <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <sky-search\n              [debounceTime]=\"250\"\n              [searchText]=\"searchText\"\n              (searchApply)=\"searchApplied($event)\"\n            >\n            </sky-search>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <button\n              *ngIf=\"context.showAddButton\"\n              type=\"button\"\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n              (click)=\"addButtonClicked()\"\n            >\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"add\"\n                iconType=\"skyux\"\n              ></sky-icon>\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n              {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n            </button>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n      <sky-toolbar\n        *ngIf=\"context.selectMode === 'multiple'\"\n        class=\"sky-lookup-show-more-modal-muiltiselect-toolbar\"\n      >\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <button\n              class=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\n              \"\n              type=\"button\"\n              (click)=\"selectAll()\"\n            >\n              {{\n                'skyux_lookup_show_more_select_all_button_title'\n                  | skyLibResources\n              }}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-item>\n            <button\n              class=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\n              \"\n              type=\"button\"\n              (click)=\"clearAll()\"\n            >\n              {{\n                'skyux_lookup_show_more_clear_all_button_title'\n                  | skyLibResources\n              }}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <sky-checkbox\n              [(checked)]=\"onlyShowSelected\"\n              (change)=\"updateDisplayedItems()\"\n            >\n              <sky-checkbox-label>\n                {{\n                  'skyux_lookup_show_more_show_selected_option_title'\n                    | skyLibResources\n                }}\n              </sky-checkbox-label>\n            </sky-checkbox>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n    </div>\n    <div\n      *ngIf=\"!isSearching && displayedItems.length === 0\"\n      class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n    >\n      {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n    </div>\n    <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n      <sky-repeater-item\n        *ngFor=\"let item of displayedItems\"\n        [isSelected]=\"\n          item[context.idProperty] | skyLookupItemSelected: selectedIdMap\n        \"\n        [selectable]=\"context.selectMode === 'multiple'\"\n        (click)=\"itemClick(item)\"\n        (keyup.enter)=\"itemClick(item)\"\n        (isSelectedChange)=\"onItemSelect($event, item)\"\n      >\n        <sky-repeater-item-content>\n          <ng-container\n            *ngTemplateOutlet=\"\n              context.userConfig?.itemTemplate\n                ? context.userConfig?.itemTemplate\n                : defaultItemTemplate;\n              context: { item: item }\n            \"\n          >\n          </ng-container>\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    </sky-repeater>\n    <sky-infinite-scroll\n      [enabled]=\"hasMoreItems\"\n      [loading]=\"isLoadingMore\"\n      (scrollEnd)=\"infiniteScrollEnd()\"\n    >\n    </sky-infinite-scroll>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"\n        sky-btn\n        sky-btn-primary\n        sky-margin-inline-compact\n        sky-lookup-show-more-modal-save\n      \"\n      type=\"button\"\n      [disabled]=\"isSearching\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n      type=\"button\"\n      (click)=\"modalInstance.close()\"\n    >\n      {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n  {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n  <ng-container *ngIf=\"context.selectMode === 'single'\">\n    {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n  </ng-container>\n  <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n    {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n  </ng-container>\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"], components: [{ type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1$1.λ4, selector: "sky-modal-header" }, { type: i1$1.λ2, selector: "sky-modal-content" }, { type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i3.λ37, selector: "sky-toolbar" }, { type: i3.λ38, selector: "sky-toolbar-section" }, { type: i3.λ39, selector: "sky-toolbar-item" }, { type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i3.λ40, selector: "sky-toolbar-view-actions" }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.λ4, selector: "sky-checkbox-label" }, { type: i7$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i7$1.λ10, selector: "sky-repeater-item", inputs: ["itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i7$1.λ8, selector: "sky-repeater-item-content" }, { type: i7$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { type: i1$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe, "skyLookupItemSelected": SkyLookupItemSelectedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreAsyncModalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-lookup-show-more-async-modal',
-                    templateUrl: './lookup-show-more-async-modal.component.html',
-                    styleUrls: ['./lookup-show-more-async-modal.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyLookupShowMoreNativePickerAsyncContext }, { type: i0.ChangeDetectorRef }]; } });
+SkyLookupAutocompleteAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAutocompleteAdapter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SkyLookupAutocompleteAdapter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupAutocompleteAdapter, inputs: { debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit" }, outputs: { searchAsync: "searchAsync" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAutocompleteAdapter, decorators: [{
+            type: Directive
+        }], propDecorators: { debounceTime: [{
+                type: Input
+            }], descriptorProperty: [{
+                type: Input
+            }], propertiesToSearch: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], searchResultTemplate: [{
+                type: Input
+            }], searchTextMinimumCharacters: [{
+                type: Input
+            }], searchFilters: [{
+                type: Input
+            }], searchResultsLimit: [{
+                type: Input
+            }], searchAsync: [{
+                type: Output
+            }] } });
 
 class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     constructor(changeDetector, elementRef, windowRef, ngControl, adapter, modalService, resourcesService, inputBoxHostSvc, themeSvc) {
@@ -2539,7 +2575,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
      * @default "mulitple"
      */
     set selectMode(value) {
-        let multipleToSingle = value === 'single' && this.selectMode === 'multiple';
+        const multipleToSingle = value === 'single' && this.selectMode === 'multiple';
         this._selectMode = value;
         this.updateForSelectMode();
         if (multipleToSingle) {
@@ -2789,7 +2825,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     }
     createNativePickerInstance(initialSearch) {
         var _a;
-        let initialValue = this.value;
+        const initialValue = this.value;
         const modalConfig = ((_a = this.showMoreConfig) === null || _a === void 0 ? void 0 : _a.nativePickerConfig) || {};
         if (!modalConfig.itemTemplate) {
             modalConfig.itemTemplate = this.searchResultTemplate;
@@ -2840,7 +2876,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             });
         }
         else {
-            let initialValue = this.value;
+            const initialValue = this.value;
             this.openNativePicker = this.createNativePickerInstance(initialSearch);
             this.openNativePicker.componentInstance.addClick.subscribe(() => {
                 this.addButtonClicked();
@@ -2942,7 +2978,8 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         }
         if (this.data.indexOf(args.item) >= 0) {
             if (this.openNativePicker) {
-                (this.openNativePicker.componentInstance).onItemSelect(true, { value: args.item, selected: false });
+                this.openNativePicker
+                    .componentInstance.onItemSelect(true, { value: args.item, selected: false });
             }
             else {
                 let newValue = this.value;
@@ -3057,42 +3094,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     }]
             }] } });
 
-class SkySearchModule {
-}
-SkySearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkySearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySearchModule, declarations: [SkySearchComponent], imports: [CommonModule,
-        SkyInputBoxModule,
-        SkyLookupResourcesModule,
-        FormsModule,
-        SkyIconModule,
-        SkyThemeModule,
-        SkyIdModule], exports: [SkySearchComponent] });
-SkySearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySearchModule, imports: [[
-            CommonModule,
-            SkyInputBoxModule,
-            SkyLookupResourcesModule,
-            FormsModule,
-            SkyIconModule,
-            SkyThemeModule,
-            SkyIdModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySearchModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkySearchComponent],
-                    imports: [
-                        CommonModule,
-                        SkyInputBoxModule,
-                        SkyLookupResourcesModule,
-                        FormsModule,
-                        SkyIconModule,
-                        SkyThemeModule,
-                        SkyIdModule,
-                    ],
-                    exports: [SkySearchComponent],
-                }]
-        }] });
-
 class SkyLookupModule {
 }
 SkyLookupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });