@skyux/lookup 6.3.3 → 6.6.0

package/fesm2020/skyux-lookup.mjs

@@ -10,14 +10,15 @@ import * as i4 from '@skyux/indicators';
 import { SkyTextHighlightModule, SkyIconModule, SkyWaitModule, SkyTokensMessageType, SkyTokensModule } from '@skyux/indicators';
 import * as i7 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
-import * as i5 from '@skyux/i18n';
+import * as i4$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 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 i4$1 from '@skyux/layout';
+import * as i4$2 from '@skyux/layout';
 import { SkyToolbarModule } from '@skyux/layout';
 import * as i7$1 from '@skyux/lists';
 import { SkyInfiniteScrollModule, SkyRepeaterModule } from '@skyux/lists';
@@ -94,6 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+var _SkyAutocompleteInputDirective_instances, _SkyAutocompleteInputDirective_blur, _SkyAutocompleteInputDirective_control, _SkyAutocompleteInputDirective_elementRef, _SkyAutocompleteInputDirective_focus, _SkyAutocompleteInputDirective_isFirstChange, _SkyAutocompleteInputDirective_ngUnsubscribe, _SkyAutocompleteInputDirective_renderer, _SkyAutocompleteInputDirective_textChanges, _SkyAutocompleteInputDirective__autocompleteAttribute, _SkyAutocompleteInputDirective__blurObs, _SkyAutocompleteInputDirective__disabled, _SkyAutocompleteInputDirective__displayWith, _SkyAutocompleteInputDirective__focusObs, _SkyAutocompleteInputDirective__textChangesObs, _SkyAutocompleteInputDirective__value, _SkyAutocompleteInputDirective_setAttributes, _SkyAutocompleteInputDirective_getValueByKey;
 const SKY_AUTOCOMPLETE_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyAutocompleteInputDirective),
@@ -106,17 +108,33 @@ const SKY_AUTOCOMPLETE_VALIDATOR = {
 };
 class SkyAutocompleteInputDirective {
     constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.isFirstChange = true;
-        this.ngUnsubscribe = new Subject();
-        this._blur = new Subject();
-        this._disabled = false;
-        this._focus = new Subject();
-        this._textChanges = new Subject();
+        _SkyAutocompleteInputDirective_instances.add(this);
+        _SkyAutocompleteInputDirective_blur.set(this, void 0);
+        _SkyAutocompleteInputDirective_control.set(this, void 0);
+        _SkyAutocompleteInputDirective_elementRef.set(this, void 0);
+        _SkyAutocompleteInputDirective_focus.set(this, void 0);
+        _SkyAutocompleteInputDirective_isFirstChange.set(this, true);
+        _SkyAutocompleteInputDirective_ngUnsubscribe.set(this, new Subject());
+        _SkyAutocompleteInputDirective_renderer.set(this, void 0);
+        _SkyAutocompleteInputDirective_textChanges.set(this, void 0);
+        _SkyAutocompleteInputDirective__autocompleteAttribute.set(this, void 0);
+        _SkyAutocompleteInputDirective__blurObs.set(this, void 0);
+        _SkyAutocompleteInputDirective__disabled.set(this, false);
+        _SkyAutocompleteInputDirective__displayWith.set(this, '');
+        _SkyAutocompleteInputDirective__focusObs.set(this, void 0);
+        _SkyAutocompleteInputDirective__textChangesObs.set(this, void 0);
+        _SkyAutocompleteInputDirective__value.set(this, void 0);
         // istanbul ignore next
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onValidatorChange = () => { };
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective_renderer, renderer, "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective_blur, new Subject(), "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective_focus, new Subject(), "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective_textChanges, new Subject(), "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective__blurObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blur, "f").asObservable(), "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective__focusObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_focus, "f").asObservable(), "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective__textChangesObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").asObservable(), "f");
     }
     /**
      * Specifies the value for the `autocomplete` attribute on the form input.
@@ -124,114 +142,109 @@ class SkyAutocompleteInputDirective {
      */
     set autocompleteAttribute(value) {
         if (!value) {
-            this._autocompleteAttribute = 'off';
+            __classPrivateFieldSet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, 'off', "f");
         }
         else {
-            this._autocompleteAttribute = value;
+            __classPrivateFieldSet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, value, "f");
         }
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'autocomplete', this.autocompleteAttribute);
+        __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'autocomplete', __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, "f"));
     }
     get autocompleteAttribute() {
-        return this._autocompleteAttribute || 'off';
+        return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, "f") || 'off';
     }
     /**
      * Indicates whether to disable the autocomplete field.
      * @default false
      */
     set disabled(value) {
-        this._disabled = value;
-        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', value);
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective__disabled, value, "f");
+        __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'disabled', value);
     }
     get disabled() {
-        return this._disabled;
+        return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__disabled, "f");
     }
     get blur() {
-        return this._blur.asObservable();
+        return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__blurObs, "f");
     }
     get displayWith() {
-        return this._displayWith;
+        return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__displayWith, "f");
     }
     set displayWith(value) {
-        this._displayWith = value;
-        this.inputTextValue = this.getValueByKey();
+        __classPrivateFieldSet(this, _SkyAutocompleteInputDirective__displayWith, value, "f");
+        this.inputTextValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
     }
     get focus() {
-        return this._focus.asObservable();
+        return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__focusObs, "f");
     }
     get inputTextValue() {
-        return this.elementRef.nativeElement.value;
+        return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value;
     }
     set inputTextValue(value) {
-        this.elementRef.nativeElement.value = value || '';
+        __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value = value || '';
     }
     get textChanges() {
-        return this._textChanges.asObservable();
+        return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__textChangesObs, "f");
     }
     get value() {
-        return this._value;
+        return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f");
     }
     set value(value) {
-        const isNewValue = value !== this._value;
+        const isNewValue = value !== __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f");
         /* istanbul ignore else */
         if (isNewValue) {
-            this._value = value;
-            this.inputTextValue = this.getValueByKey();
-            this.onChange(this._value);
+            __classPrivateFieldSet(this, _SkyAutocompleteInputDirective__value, value, "f");
+            this.inputTextValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
+            this.onChange(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f"));
             // Do not mark the field as "dirty"
             // if the field has been initialized with a value.
-            if (this.isFirstChange && this.control) {
-                this.control.markAsPristine();
+            if (__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_isFirstChange, "f") && __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_control, "f")) {
+                __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_control, "f").markAsPristine();
             }
-            if (this.isFirstChange && this._value) {
-                this.isFirstChange = false;
+            if (__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_isFirstChange, "f") && __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f")) {
+                __classPrivateFieldSet(this, _SkyAutocompleteInputDirective_isFirstChange, false, "f");
             }
         }
     }
     ngOnInit() {
-        const element = this.elementRef.nativeElement;
-        this.setAttributes(element);
+        const element = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement;
+        __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_setAttributes).call(this, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f"));
         fromEvent(element, 'input')
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
             .subscribe(() => {
-            /** Sanity check */
             if (!this.disabled) {
-                this._textChanges.next({
-                    value: this.elementRef.nativeElement.value,
+                __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").next({
+                    value: __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value,
                 });
             }
         });
         fromEvent(element, 'blur')
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
             .subscribe(() => {
-            /** Sanity check */
             if (!this.disabled) {
-                this._blur.next();
+                __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blur, "f").next();
             }
         });
         fromEvent(element, 'focus')
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
             .subscribe(() => {
-            /** Sanity check */
             if (!this.disabled) {
-                this._focus.next();
+                __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_focus, "f").next();
             }
         });
         fromEvent(element, 'change')
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
             .subscribe(() => {
-            /** Sanity check */
             /* istanbul ignore else */
             if (!this.disabled) {
-                this.isFirstChange = false;
+                __classPrivateFieldSet(this, _SkyAutocompleteInputDirective_isFirstChange, false, "f");
             }
         });
     }
     ngOnDestroy() {
-        this._blur.complete();
-        this._textChanges.complete();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this._blur = this._textChanges = this.ngUnsubscribe = undefined;
+        __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blur, "f").complete();
+        __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").complete();
+        __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f").complete();
     }
     writeValue(value) {
         this.value = value;
@@ -246,7 +259,7 @@ class SkyAutocompleteInputDirective {
         this.onValidatorChange = fn;
     }
     restoreInputTextValueToPreviousState() {
-        const modelValue = this.getValueByKey();
+        const modelValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
         // If the search field contains text, make sure that the value
         // matches the selected descriptor key.
         if (this.inputTextValue !== modelValue) {
@@ -258,18 +271,18 @@ class SkyAutocompleteInputDirective {
         this.disabled = disabled;
     }
     validate(control) {
-        if (!this.control) {
-            this.control = control;
+        if (!__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_control, "f")) {
+            __classPrivateFieldSet(this, _SkyAutocompleteInputDirective_control, control, "f");
         }
-        return;
+        return null;
     }
     // See: https://www.w3.org/TR/wai-aria-practices/#kbd_focus_activedescendant
     setActiveDescendant(descendantId) {
         if (descendantId) {
-            this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-activedescendant', descendantId);
+            __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'aria-activedescendant', descendantId);
         }
         else {
-            this.renderer.removeAttribute(this.elementRef.nativeElement, 'aria-activedescendant');
+            __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").removeAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'aria-activedescendant');
         }
     }
     // Angular automatically constructs these methods.
@@ -277,17 +290,17 @@ class SkyAutocompleteInputDirective {
     onChange(value) { }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onTouched() { }
-    setAttributes(element) {
-        this.renderer.setAttribute(element, 'autocomplete', this.autocompleteAttribute);
-        this.renderer.setAttribute(element, 'autocapitalize', 'none');
-        this.renderer.setAttribute(element, 'autocorrect', 'off');
-        this.renderer.setAttribute(element, 'spellcheck', 'false');
-        this.renderer.addClass(element, 'sky-form-control');
-    }
-    getValueByKey() {
-        return this.value ? this.value[this.displayWith] : undefined;
-    }
 }
+_SkyAutocompleteInputDirective_blur = new WeakMap(), _SkyAutocompleteInputDirective_control = new WeakMap(), _SkyAutocompleteInputDirective_elementRef = new WeakMap(), _SkyAutocompleteInputDirective_focus = new WeakMap(), _SkyAutocompleteInputDirective_isFirstChange = new WeakMap(), _SkyAutocompleteInputDirective_ngUnsubscribe = new WeakMap(), _SkyAutocompleteInputDirective_renderer = new WeakMap(), _SkyAutocompleteInputDirective_textChanges = new WeakMap(), _SkyAutocompleteInputDirective__autocompleteAttribute = new WeakMap(), _SkyAutocompleteInputDirective__blurObs = new WeakMap(), _SkyAutocompleteInputDirective__disabled = new WeakMap(), _SkyAutocompleteInputDirective__displayWith = new WeakMap(), _SkyAutocompleteInputDirective__focusObs = new WeakMap(), _SkyAutocompleteInputDirective__textChangesObs = new WeakMap(), _SkyAutocompleteInputDirective__value = new WeakMap(), _SkyAutocompleteInputDirective_instances = new WeakSet(), _SkyAutocompleteInputDirective_setAttributes = function _SkyAutocompleteInputDirective_setAttributes(elementRef) {
+    const element = elementRef.nativeElement;
+    __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocomplete', this.autocompleteAttribute);
+    __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocapitalize', 'none');
+    __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocorrect', 'off');
+    __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'spellcheck', 'false');
+    __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").addClass(element, 'sky-form-control');
+}, _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: [{
@@ -327,14 +340,16 @@ function normalizeDiacritics(value) {
     return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 }
 
+var _SkyAutocompleteAdapterService_coreAdapterService, _SkyAutocompleteAdapterService_renderer;
 /**
  * @internal
  */
 class SkyAutocompleteAdapterService {
     constructor(coreAdapterService, rendererFactory) {
-        this.coreAdapterService = coreAdapterService;
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+        _SkyAutocompleteAdapterService_coreAdapterService.set(this, void 0);
+        _SkyAutocompleteAdapterService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyAutocompleteAdapterService_coreAdapterService, coreAdapterService, "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
     }
     /**
      * Adds the className for the provided element.
@@ -343,11 +358,11 @@ class SkyAutocompleteAdapterService {
         /* Sanity check */
         /* istanbul ignore else */
         if (element) {
-            this.renderer.addClass(element, className);
+            __classPrivateFieldGet(this, _SkyAutocompleteAdapterService_renderer, "f").addClass(element, className);
         }
     }
     getOverlayFocusableElements(overlay) {
-        return this.coreAdapterService.getFocusableChildren(
+        return __classPrivateFieldGet(this, _SkyAutocompleteAdapterService_coreAdapterService, "f").getFocusableChildren(
         /* Sanity check - calling function also has null check */
         /* istanbul ignore next */
         overlay?.componentRef.location.nativeElement, { ignoreTabIndex: true });
@@ -359,7 +374,7 @@ class SkyAutocompleteAdapterService {
         /* Sanity check */
         /* istanbul ignore else */
         if (element) {
-            this.renderer.removeClass(element, className);
+            __classPrivateFieldGet(this, _SkyAutocompleteAdapterService_renderer, "f").removeClass(element, className);
         }
     }
     setDropdownWidth(elementRef, dropdownRef, isInputBox) {
@@ -368,7 +383,7 @@ class SkyAutocompleteAdapterService {
             : elementRef.nativeElement;
         if (parentElement) {
             const width = parentElement.getBoundingClientRect().width;
-            this.renderer.setStyle(dropdownRef.nativeElement, 'width', `${width}px`);
+            __classPrivateFieldGet(this, _SkyAutocompleteAdapterService_renderer, "f").setStyle(dropdownRef.nativeElement, 'width', `${width}px`);
         }
     }
     /**
@@ -378,6 +393,7 @@ class SkyAutocompleteAdapterService {
         element.tabIndex = tabIndex;
     }
 }
+_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: [{
@@ -437,15 +453,11 @@ var SkyAutocompleteMessageType;
     SkyAutocompleteMessageType[SkyAutocompleteMessageType["RepositionDropdown"] = 1] = "RepositionDropdown";
 })(SkyAutocompleteMessageType || (SkyAutocompleteMessageType = {}));
 
+var _SkyAutocompleteComponent_instances, _SkyAutocompleteComponent_activeElementIndex, _SkyAutocompleteComponent_adapterService, _SkyAutocompleteComponent_affixer, _SkyAutocompleteComponent_affixService, _SkyAutocompleteComponent_changeDetector, _SkyAutocompleteComponent_elementRef, _SkyAutocompleteComponent_inputBoxHostSvc, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, _SkyAutocompleteComponent_messageStreamSub, _SkyAutocompleteComponent_ngUnsubscribe, _SkyAutocompleteComponent_overlay, _SkyAutocompleteComponent_overlayService, _SkyAutocompleteComponent_overlayFocusableElements, _SkyAutocompleteComponent_currentSearchSub, _SkyAutocompleteComponent__data, _SkyAutocompleteComponent__debounceTime, _SkyAutocompleteComponent__descriptorProperty, _SkyAutocompleteComponent__highlightText, _SkyAutocompleteComponent__inputDirective, _SkyAutocompleteComponent__messageStream, _SkyAutocompleteComponent__propertiesToSearch, _SkyAutocompleteComponent__resultsRef, _SkyAutocompleteComponent__search, _SkyAutocompleteComponent__searchResults, _SkyAutocompleteComponent__searchResultTemplate, _SkyAutocompleteComponent__searchResultsLimit, _SkyAutocompleteComponent__searchTextMinimumCharacters, _SkyAutocompleteComponent_searchTextChanged, _SkyAutocompleteComponent_performSearch, _SkyAutocompleteComponent_cancelCurrentSearch, _SkyAutocompleteComponent_getHighlightText, _SkyAutocompleteComponent_selectSearchResultById, _SkyAutocompleteComponent_openDropdown, _SkyAutocompleteComponent_closeDropdown, _SkyAutocompleteComponent_setActiveDescendant, _SkyAutocompleteComponent_removeActiveDescendant, _SkyAutocompleteComponent_resetSearch, _SkyAutocompleteComponent_addInputEventListeners, _SkyAutocompleteComponent_destroyOverlay, _SkyAutocompleteComponent_createAffixer, _SkyAutocompleteComponent_destroyAffixer, _SkyAutocompleteComponent_initMessageStream, _SkyAutocompleteComponent_initOverlayFocusableElements, _SkyAutocompleteComponent_getActiveElement, _SkyAutocompleteComponent_removeFocusedClass, _SkyAutocompleteComponent_addFocusedClass;
 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;
+        _SkyAutocompleteComponent_instances.add(this);
         /**
          * @internal
          * Indicates whether to display a button in the dropdown that opens a picker where users can view all options.
@@ -472,26 +484,59 @@ class SkyAutocompleteComponent {
          * Fires when users select the button to view all options.
          */
         this.showMoreClick = new EventEmitter();
+        /**
+         * Fires when users select items in the dropdown list.
+         */
+        this.selectionChange = new EventEmitter();
         /**
          * Fires when users enter new search information and allows results to be
          * returned via an observable.
          */
         this.searchAsync = new EventEmitter();
         this.isOpen = false;
+        this.searchText = '';
         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();
+        _SkyAutocompleteComponent_activeElementIndex.set(this, -1);
+        _SkyAutocompleteComponent_adapterService.set(this, void 0);
+        _SkyAutocompleteComponent_affixer.set(this, void 0);
+        _SkyAutocompleteComponent_affixService.set(this, void 0);
+        _SkyAutocompleteComponent_changeDetector.set(this, void 0);
+        _SkyAutocompleteComponent_elementRef.set(this, void 0);
+        _SkyAutocompleteComponent_inputBoxHostSvc.set(this, void 0);
+        _SkyAutocompleteComponent_inputDirectiveUnsubscribe.set(this, new Subject());
+        _SkyAutocompleteComponent_messageStreamSub.set(this, void 0);
+        _SkyAutocompleteComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyAutocompleteComponent_overlay.set(this, void 0);
+        _SkyAutocompleteComponent_overlayService.set(this, void 0);
         /**
          * 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();
+        _SkyAutocompleteComponent_overlayFocusableElements.set(this, []);
+        _SkyAutocompleteComponent_currentSearchSub.set(this, void 0);
+        _SkyAutocompleteComponent__data.set(this, void 0);
+        _SkyAutocompleteComponent__debounceTime.set(this, void 0);
+        _SkyAutocompleteComponent__descriptorProperty.set(this, void 0);
+        _SkyAutocompleteComponent__highlightText.set(this, void 0);
+        _SkyAutocompleteComponent__inputDirective.set(this, void 0);
+        _SkyAutocompleteComponent__messageStream.set(this, new Subject());
+        _SkyAutocompleteComponent__propertiesToSearch.set(this, void 0);
+        _SkyAutocompleteComponent__resultsRef.set(this, void 0);
+        _SkyAutocompleteComponent__search.set(this, void 0);
+        _SkyAutocompleteComponent__searchResults.set(this, void 0);
+        _SkyAutocompleteComponent__searchResultTemplate.set(this, void 0);
+        _SkyAutocompleteComponent__searchResultsLimit.set(this, void 0);
+        _SkyAutocompleteComponent__searchTextMinimumCharacters.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_affixService, affixService, "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_overlayService, overlayService, "f");
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_inputBoxHostSvc, inputBoxHostSvc, "f");
         const id = ++uniqueId$1;
         this.resultsListId = `sky-autocomplete-list-${id}`;
         this.resultsWrapperId = `sky-autocomplete-wrapper-${id}`;
@@ -502,10 +547,10 @@ class SkyAutocompleteComponent {
      * changes due to server calls, use `search` or `searchAsync` instead.
      */
     set data(value) {
-        this._data = value;
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__data, value, "f");
     }
     get data() {
-        return this._data || [];
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__data, "f") || [];
     }
     /**
      * Specifies how many milliseconds to wait before searching while users
@@ -513,10 +558,10 @@ class SkyAutocompleteComponent {
      * @default 0
      */
     set debounceTime(value) {
-        this._debounceTime = value;
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__debounceTime, value, "f");
     }
     get debounceTime() {
-        return this._debounceTime || 0;
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__debounceTime, "f") || 0;
     }
     /**
      * Specifies an object property to display in the text input after users
@@ -524,31 +569,31 @@ class SkyAutocompleteComponent {
      * @default "name"
      */
     set descriptorProperty(value) {
-        this._descriptorProperty = value;
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__descriptorProperty, value, "f");
     }
     get descriptorProperty() {
-        return this._descriptorProperty || 'name';
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__descriptorProperty, "f") || 'name';
     }
     /**
      * Specifies an observable of `SkyAutocompleteMessage` that can close the dropdown.
      * @internal
      */
     set messageStream(value) {
-        this._messageStream = value;
-        this.initMessageStream();
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__messageStream, value ?? new Subject(), "f");
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initMessageStream).call(this);
     }
     get messageStream() {
-        return this._messageStream;
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__messageStream, "f");
     }
     /**
      * Specifies the object properties to search.
      * @default ["name"]
      */
     set propertiesToSearch(value) {
-        this._propertiesToSearch = value;
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__propertiesToSearch, value, "f");
     }
     get propertiesToSearch() {
-        return this._propertiesToSearch || ['name'];
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__propertiesToSearch, "f") || ['name'];
     }
     /**
      * Specifies a function to dynamically manage the data source when users
@@ -559,10 +604,10 @@ class SkyAutocompleteComponent {
      * `search`.
      */
     set search(value) {
-        this._search = value;
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__search, value, "f");
     }
     get search() {
-        return (this._search ||
+        return (__classPrivateFieldGet(this, _SkyAutocompleteComponent__search, "f") ||
             skyAutocompleteDefaultSearchFunction({
                 propertiesToSearch: this.propertiesToSearch,
                 searchFilters: this.searchFilters,
@@ -574,10 +619,10 @@ class SkyAutocompleteComponent {
      * as `item` variables that reference all of the object properties of the search results.
      */
     set searchResultTemplate(value) {
-        this._searchResultTemplate = value;
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__searchResultTemplate, value, "f");
     }
     get searchResultTemplate() {
-        return this._searchResultTemplate || this.defaultSearchResultTemplate;
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultTemplate, "f") || this.defaultSearchResultTemplate;
     }
     /**
      * Specifies the minimum number of characters that users must enter before
@@ -586,11 +631,12 @@ class SkyAutocompleteComponent {
      * @default 1
      */
     set searchTextMinimumCharacters(value) {
-        this._searchTextMinimumCharacters = value;
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, value, "f");
     }
     get searchTextMinimumCharacters() {
-        return this._searchTextMinimumCharacters > 0
-            ? this._searchTextMinimumCharacters
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, "f") &&
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, "f") > 0
+            ? __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, "f")
             : 1;
     }
     /**
@@ -598,126 +644,117 @@ class SkyAutocompleteComponent {
      * By default, the component displays all matching results.
      */
     set searchResultsLimit(value) {
-        this._searchResultsLimit = value;
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__searchResultsLimit, value, "f");
     }
     get searchResultsLimit() {
-        if (this._searchResultsLimit) {
-            return this._searchResultsLimit;
+        if (__classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultsLimit, "f") && __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultsLimit, "f") > 0) {
+            return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultsLimit, "f");
         }
         else {
-            return this.enableShowMore ? 5 : this._searchResultsLimit;
+            return this.enableShowMore ? 5 : __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultsLimit, "f");
         }
     }
-    /**
-     * Fires when users select items in the dropdown list.
-     */
-    get selectionChange() {
-        return this._selectionChange;
-    }
     //#endregion
     //#region template_properties
     get searchResults() {
-        return this._searchResults || [];
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResults, "f") || [];
+    }
+    set searchResults(value) {
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__searchResults, value, "f");
     }
     get highlightText() {
-        return this._highlightText || [];
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__highlightText, "f") || [];
+    }
+    set highlightText(value) {
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent__highlightText, value, "f");
     }
     get showActionsArea() {
         return this.showAddButton || this.enableShowMore;
     }
     set inputDirective(directive) {
-        if (this._inputDirective !== directive) {
-            if (!directive) {
-                throw Error([
-                    'The SkyAutocompleteComponent requires a ContentChild input or',
-                    'textarea bound with the SkyAutocomplete directive. For example:',
-                    '`<input type="text" skyAutocomplete>`.',
-                ].join(' '));
-            }
+        if (!directive) {
+            throw Error([
+                'The SkyAutocompleteComponent requires a ContentChild input or',
+                'textarea bound with the SkyAutocomplete directive. For example:',
+                '`<input type="text" skyAutocomplete>`.',
+            ].join(' '));
+        }
+        if (__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f") !== directive) {
             // Unsubscribe from old subscriptions on any previous input directive
-            this.inputDirectiveUnsubscribe.next();
-            this._inputDirective = directive;
-            this._inputDirective.displayWith = this.descriptorProperty;
-            this._inputDirective.textChanges
-                .pipe(takeUntil(this.inputDirectiveUnsubscribe), debounceTime(this.debounceTime), switchMap((change) => {
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f").next();
+            __classPrivateFieldSet(this, _SkyAutocompleteComponent__inputDirective, directive, "f");
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").displayWith = this.descriptorProperty;
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").textChanges
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f")), debounceTime(this.debounceTime), switchMap((change) => {
                 this.isSearchingAsync = true;
                 return of(change);
             }))
                 .subscribe((change) => {
-                this.searchTextChanged(change.value);
+                __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_searchTextChanged).call(this, change.value);
             });
-            this._inputDirective.blur
-                .pipe(takeUntil(this.inputDirectiveUnsubscribe))
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").blur
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f")))
                 .subscribe(() => {
-                this.inputDirective.restoreInputTextValueToPreviousState();
-                this.closeDropdown();
-                this.inputDirective.onTouched();
+                directive.restoreInputTextValueToPreviousState();
+                __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
+                directive.onTouched();
             });
-            this._inputDirective.focus
-                .pipe(takeUntil(this.inputDirectiveUnsubscribe))
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").focus
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f")))
                 .subscribe(() => {
                 if (this.showActionsArea) {
-                    this.openDropdown();
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_openDropdown).call(this);
                 }
             });
         }
     }
     get inputDirective() {
-        return this._inputDirective;
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f");
     }
     set resultsRef(value) {
         if (value) {
-            this._resultsRef = value;
-            this.destroyAffixer();
-            this.createAffixer();
+            __classPrivateFieldSet(this, _SkyAutocompleteComponent__resultsRef, value, "f");
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyAffixer).call(this);
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_createAffixer).call(this);
         }
     }
     get resultsRef() {
-        return this._resultsRef;
-    }
-    ngAfterContentInit() {
-        if (!this.inputDirective) {
-            throw Error([
-                'The SkyAutocompleteComponent requires a ContentChild input or',
-                'textarea bound with the SkyAutocomplete directive. For example:',
-                '`<input type="text" skyAutocomplete>`.',
-            ].join(' '));
-        }
+        return __classPrivateFieldGet(this, _SkyAutocompleteComponent__resultsRef, "f");
     }
     ngAfterViewInit() {
-        this.addInputEventListeners();
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addInputEventListeners).call(this);
     }
     ngOnDestroy() {
-        this.cancelCurrentSearch();
-        this.inputDirectiveUnsubscribe.next();
-        this.inputDirectiveUnsubscribe.complete();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.destroyAffixer();
-        this.destroyOverlay();
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_cancelCurrentSearch).call(this);
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyAffixer).call(this);
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyOverlay).call(this);
     }
     addButtonClicked() {
         this.addClick.emit();
         this.inputDirective.restoreInputTextValueToPreviousState();
-        this.closeDropdown();
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
     }
     handleKeydown(event) {
         /* Sanity check */
         /* istanbul ignore else */
         if (event.key) {
             const key = event.key.toLowerCase();
-            const activeElement = this.getActiveElement();
+            const activeElement = __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_getActiveElement).call(this);
             const activeElementId = activeElement?.id;
             const targetIsSearchResult = this.searchResults.find((r) => r.elementId === activeElementId);
             switch (key) {
                 case 'enter':
                     if (targetIsSearchResult) {
-                        this.selectSearchResultById(activeElementId);
+                        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_selectSearchResultById).call(this, activeElementId);
                         if (!this.showActionsArea) {
-                            this.closeDropdown();
+                            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
                         }
                         else {
-                            this.resetSearch();
+                            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
                         }
                     }
                     else {
@@ -730,43 +767,43 @@ class SkyAutocompleteComponent {
                     break;
                 case 'tab':
                     if (targetIsSearchResult) {
-                        this.selectSearchResultById(activeElementId);
+                        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_selectSearchResultById).call(this, activeElementId);
                     }
                     else {
                         this.inputDirective.restoreInputTextValueToPreviousState();
                     }
-                    this.closeDropdown();
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
                     break;
                 case 'escape':
-                    this.closeDropdown();
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
                     break;
                 case 'arrowdown':
                 case 'down':
-                    this.removeFocusedClass();
-                    if (this.activeElementIndex ===
-                        this.overlayFocusableElements.length - 1 ||
-                        this.activeElementIndex === -1) {
-                        this.activeElementIndex = 0;
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
+                    if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") ===
+                        __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f").length - 1 ||
+                        __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") === -1) {
+                        __classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, 0, "f");
                     }
                     else {
-                        this.activeElementIndex = this.activeElementIndex + 1;
+                        __classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") + 1, "f");
                     }
-                    this.addFocusedClass();
-                    this.changeDetector.markForCheck();
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
                     event.preventDefault();
                     event.stopPropagation();
                     break;
                 case 'arrowup':
                 case 'up':
-                    this.removeFocusedClass();
-                    if (this.activeElementIndex <= 0) {
-                        this.activeElementIndex = this.overlayFocusableElements.length - 1;
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
+                    if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") <= 0) {
+                        __classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f").length - 1, "f");
                     }
                     else {
-                        this.activeElementIndex = this.activeElementIndex - 1;
+                        __classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") - 1, "f");
                     }
-                    this.addFocusedClass();
-                    this.changeDetector.markForCheck();
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
                     event.preventDefault();
                     event.stopPropagation();
                     break;
@@ -776,310 +813,284 @@ class SkyAutocompleteComponent {
     moreButtonClicked() {
         this.showMoreClick.emit({ inputValue: this.searchText });
         this.inputDirective.restoreInputTextValueToPreviousState();
-        this.closeDropdown();
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
     }
     onResultMouseDown(id, event) {
-        this.selectSearchResultById(id);
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_selectSearchResultById).call(this, id);
         if (!this.showActionsArea) {
-            this.closeDropdown();
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
         }
         else {
-            this.resetSearch();
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
         }
         event.preventDefault();
         event.stopPropagation();
     }
     onResultMouseMove(id) {
-        if (id !== this.activeElementIndex) {
-            this.removeFocusedClass();
-            this.activeElementIndex = id;
-            this.addFocusedClass();
-            this.changeDetector.markForCheck();
+        if (id !== __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")) {
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
+            __classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, id, "f");
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
         }
     }
     isElementFocused(ref) {
-        return ref === this.overlayFocusableElements[this.activeElementIndex];
+        return ref === __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")];
     }
-    searchTextChanged(searchText) {
-        const isEmpty = !searchText || !searchText.trim() || searchText.match(/^\s+$/);
-        if (isEmpty) {
-            // Emit selectionChange if value has been cleared.
-            if (this.inputDirective.value) {
-                this.inputDirective.value = undefined;
-                this.selectionChange.emit({
-                    selectedItem: undefined,
-                });
-            }
-            if (!this.showActionsArea) {
-                this.closeDropdown();
-            }
-            else {
-                this.resetSearch();
-            }
-            this.isSearchingAsync = false;
-            this.changeDetector.markForCheck();
-            return;
-        }
-        const isLongEnough = searchText.length >= this.searchTextMinimumCharacters;
-        const isDifferent = searchText !== this.searchText;
-        this.searchText = searchText.trim();
-        if (isLongEnough && isDifferent) {
-            this.cancelCurrentSearch();
-            this.currentSearchSub = this.performSearch()
-                .pipe(take(1))
-                .subscribe((result) => {
-                const items = result.items.filter((item) => {
-                    return item && this.descriptorProperty in item;
-                });
-                this.isSearchingAsync = false;
-                this._searchResults = items.map((r, i) => {
-                    const result = {
-                        elementId: `${this.resultsListId}-item-${i}`,
-                        data: r,
-                    };
-                    return result;
-                });
-                this.searchResultsCount = result.totalCount;
-                this._highlightText = this.getHighlightText(this.searchText);
-                this.removeFocusedClass();
-                this.removeActiveDescendant();
-                if (this.searchResults.length > 0) {
-                    this.activeElementIndex = 0;
-                }
-                else {
-                    this.activeElementIndex = -1;
-                }
-                this.changeDetector.markForCheck();
-                if (this.isOpen) {
-                    // Let the results populate in the DOM before recalculating placement.
-                    setTimeout(() => {
-                        this.affixer.reaffix();
-                        this.changeDetector.detectChanges();
-                        this.initOverlayFocusableElements();
-                    });
-                }
-                else {
-                    this.openDropdown();
-                    this.changeDetector.markForCheck();
-                }
-            });
-        }
-        else {
-            this.isSearchingAsync = false;
-            this.changeDetector.markForCheck();
-        }
-    }
-    performSearch() {
-        if (!this.searchAsyncDisabled && this.searchAsync.observers.length > 0) {
-            const searchAsyncArgs = {
-                displayType: 'popover',
-                offset: 0,
-                searchText: this.searchText,
-            };
-            this.searchAsync.emit(searchAsyncArgs);
-            return searchAsyncArgs.result;
-        }
-        const result = this.search(this.searchText, this.data);
-        if (result instanceof Array) {
-            return of({
-                items: result,
-                totalCount: result.length,
+}
+_SkyAutocompleteComponent_activeElementIndex = new WeakMap(), _SkyAutocompleteComponent_adapterService = new WeakMap(), _SkyAutocompleteComponent_affixer = new WeakMap(), _SkyAutocompleteComponent_affixService = new WeakMap(), _SkyAutocompleteComponent_changeDetector = new WeakMap(), _SkyAutocompleteComponent_elementRef = new WeakMap(), _SkyAutocompleteComponent_inputBoxHostSvc = new WeakMap(), _SkyAutocompleteComponent_inputDirectiveUnsubscribe = new WeakMap(), _SkyAutocompleteComponent_messageStreamSub = new WeakMap(), _SkyAutocompleteComponent_ngUnsubscribe = new WeakMap(), _SkyAutocompleteComponent_overlay = new WeakMap(), _SkyAutocompleteComponent_overlayService = new WeakMap(), _SkyAutocompleteComponent_overlayFocusableElements = new WeakMap(), _SkyAutocompleteComponent_currentSearchSub = new WeakMap(), _SkyAutocompleteComponent__data = new WeakMap(), _SkyAutocompleteComponent__debounceTime = new WeakMap(), _SkyAutocompleteComponent__descriptorProperty = new WeakMap(), _SkyAutocompleteComponent__highlightText = new WeakMap(), _SkyAutocompleteComponent__inputDirective = new WeakMap(), _SkyAutocompleteComponent__messageStream = new WeakMap(), _SkyAutocompleteComponent__propertiesToSearch = new WeakMap(), _SkyAutocompleteComponent__resultsRef = new WeakMap(), _SkyAutocompleteComponent__search = new WeakMap(), _SkyAutocompleteComponent__searchResults = new WeakMap(), _SkyAutocompleteComponent__searchResultTemplate = new WeakMap(), _SkyAutocompleteComponent__searchResultsLimit = new WeakMap(), _SkyAutocompleteComponent__searchTextMinimumCharacters = new WeakMap(), _SkyAutocompleteComponent_instances = new WeakSet(), _SkyAutocompleteComponent_searchTextChanged = function _SkyAutocompleteComponent_searchTextChanged(searchText) {
+    const isEmpty = !searchText || !searchText.trim() || searchText.match(/^\s+$/);
+    if (isEmpty) {
+        // Emit selectionChange if value has been cleared.
+        if (this.inputDirective.value) {
+            this.inputDirective.value = undefined;
+            this.selectionChange.emit({
+                selectedItem: undefined,
             });
         }
-        return from(result).pipe(map((items) => {
-            return {
-                items,
-                totalCount: items.length,
-            };
-        }));
-    }
-    cancelCurrentSearch() {
-        if (this.currentSearchSub) {
-            this.currentSearchSub.unsubscribe();
-            this.currentSearchSub = undefined;
+        if (!this.showActionsArea) {
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
         }
-    }
-    /**
-     * Returns the text to highlight based on exact matches, case-insensitive matches, and matches for corresponding diacritical characters (a will match à).
-     */
-    getHighlightText(searchText) {
-        const normalizedSearchText = normalizeDiacritics(searchText)
-            .toLocaleUpperCase()
-            .trim();
-        if (!normalizedSearchText) {
-            return [];
-        }
-        let matchesToHighlight = [];
-        for (let i = 0, n = this._searchResults.length; i < n; i++) {
-            const value = this._searchResults[i].data[this.descriptorProperty]
-                .toString()
-                .toLocaleUpperCase();
-            const normalizedDataValue = normalizeDiacritics(value);
-            let offset = 0;
-            let index;
-            while ((index = normalizedDataValue.indexOf(normalizedSearchText, offset)) > -1) {
-                const matchedString = value.slice(index, index + searchText.length);
-                offset = index + searchText.length;
-                matchesToHighlight = matchesToHighlight.concat(matchedString);
-            }
+        else {
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
         }
-        // Remove any duplicates from the array.
-        return [...new Set(matchesToHighlight)];
+        this.isSearchingAsync = false;
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
+        return;
     }
-    selectSearchResultById(id) {
-        const result = this.searchResults.find((r) => r.elementId === id).data;
-        /* Sanity check */
-        /* istanbul ignore else */
-        if (result) {
-            this.searchText = result[this.descriptorProperty];
-            this.inputDirective.value = result;
-            this.selectionChange.emit({
-                selectedItem: result,
+    const isLongEnough = searchText.length >= this.searchTextMinimumCharacters;
+    const isDifferent = searchText !== this.searchText;
+    this.searchText = searchText.trim();
+    if (isLongEnough && isDifferent) {
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_cancelCurrentSearch).call(this);
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_currentSearchSub, __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_performSearch).call(this)
+            .pipe(take(1))
+            .subscribe((result) => {
+            const items = result.items.filter((item) => {
+                return item && this.descriptorProperty in item;
             });
-        }
-    }
-    openDropdown() {
-        if (!this.overlay) {
-            const overlay = this.overlayService.create({
-                enableClose: false,
-                enablePointerEvents: true,
-                wrapperClass: this.wrapperClass,
+            this.isSearchingAsync = false;
+            this.searchResults = items.map((r, i) => {
+                const result = {
+                    elementId: `${this.resultsListId}-item-${i}`,
+                    data: r,
+                };
+                return result;
             });
-            overlay.attachTemplate(this.resultsTemplateRef);
-            this.overlay = overlay;
-            this.isOpen = true;
-            this.changeDetector.markForCheck();
-            this.initOverlayFocusableElements();
-        }
-    }
-    closeDropdown() {
-        this.resetSearch();
-        this.isOpen = false;
-        this.destroyOverlay();
-        this.removeActiveDescendant();
-        this.changeDetector.markForCheck();
-    }
-    setActiveDescendant() {
-        const activeElement = this.overlayFocusableElements[this.activeElementIndex];
-        /* Sanity check */
-        /* istanbul ignore else */
-        if (activeElement) {
-            this.inputDirective.setActiveDescendant(activeElement.id);
-        }
-    }
-    removeActiveDescendant() {
-        this.inputDirective.setActiveDescendant(null);
-    }
-    resetSearch() {
-        this._searchResults = [];
-        this.searchText = '';
-        this._highlightText = [];
-        this.activeElementIndex = -1;
-        this.searchResultsCount = undefined;
-        this.removeActiveDescendant();
-        this.initOverlayFocusableElements();
-        this.changeDetector.markForCheck();
-    }
-    addInputEventListeners() {
-        const element = this.elementRef.nativeElement;
-        fromEvent(element, 'keydown')
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((event) => {
-            this.handleKeydown(event);
-        });
-        fromEvent(window, 'resize')
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            /* istanbul ignore else */
+            this.searchResultsCount = result.totalCount;
+            this.highlightText = __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_getHighlightText).call(this, this.searchText);
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeActiveDescendant).call(this);
+            if (this.searchResults.length > 0) {
+                __classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, 0, "f");
+            }
+            else {
+                __classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, -1, "f");
+            }
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
             if (this.isOpen) {
-                this.adapterService.setDropdownWidth(this.elementRef, this.resultsRef, !!this.inputBoxHostSvc);
+                // Let the results populate in the DOM before recalculating placement.
+                setTimeout(() => {
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f").reaffix();
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").detectChanges();
+                    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initOverlayFocusableElements).call(this);
+                });
             }
+            else {
+                __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_openDropdown).call(this);
+                __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
+            }
+        }), "f");
+    }
+    else {
+        this.isSearchingAsync = false;
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
+    }
+}, _SkyAutocompleteComponent_performSearch = function _SkyAutocompleteComponent_performSearch() {
+    if (!this.searchAsyncDisabled && this.searchAsync.observers.length > 0) {
+        const searchAsyncArgs = {
+            displayType: 'popover',
+            offset: 0,
+            searchText: this.searchText,
+        };
+        this.searchAsync.emit(searchAsyncArgs);
+        return searchAsyncArgs.result;
+    }
+    const result = this.search(this.searchText, this.data);
+    if (result instanceof Array) {
+        return of({
+            items: result,
+            totalCount: result.length,
         });
     }
-    destroyOverlay() {
-        if (this.overlay) {
-            this.overlayService.close(this.overlay);
-            this.overlay = undefined;
-        }
+    return from(result).pipe(map((items) => {
+        return {
+            items,
+            totalCount: items.length,
+        };
+    }));
+}, _SkyAutocompleteComponent_cancelCurrentSearch = function _SkyAutocompleteComponent_cancelCurrentSearch() {
+    if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_currentSearchSub, "f")) {
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_currentSearchSub, "f").unsubscribe();
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_currentSearchSub, undefined, "f");
+    }
+}, _SkyAutocompleteComponent_getHighlightText = function _SkyAutocompleteComponent_getHighlightText(searchText) {
+    const normalizedSearchText = normalizeDiacritics(searchText)
+        .toLocaleUpperCase()
+        .trim();
+    if (!normalizedSearchText) {
+        return [];
+    }
+    let matchesToHighlight = [];
+    for (let i = 0, n = this.searchResults.length; i < n; i++) {
+        const value = this.searchResults[i].data[this.descriptorProperty]
+            .toString()
+            .toLocaleUpperCase();
+        const normalizedDataValue = normalizeDiacritics(value);
+        let offset = 0;
+        let index;
+        while ((index = normalizedDataValue.indexOf(normalizedSearchText, offset)) > -1) {
+            const matchedString = value.slice(index, index + searchText.length);
+            offset = index + searchText.length;
+            matchesToHighlight = matchesToHighlight.concat(matchedString);
+        }
+    }
+    // Remove any duplicates from the array.
+    return [...new Set(matchesToHighlight)];
+}, _SkyAutocompleteComponent_selectSearchResultById = function _SkyAutocompleteComponent_selectSearchResultById(id) {
+    const result = this.searchResults.find((r) => r.elementId === id);
+    /* istanbul ignore else */
+    if (result) {
+        const data = result.data;
+        this.searchText = data[this.descriptorProperty];
+        this.inputDirective.value = data;
+        this.selectionChange.emit({
+            selectedItem: data,
+        });
     }
-    createAffixer() {
-        /* Sanity check */
+}, _SkyAutocompleteComponent_openDropdown = function _SkyAutocompleteComponent_openDropdown() {
+    if (!__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")) {
+        const overlay = __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayService, "f").create({
+            enableClose: false,
+            enablePointerEvents: true,
+            wrapperClass: this.wrapperClass,
+        });
+        overlay.attachTemplate(this.resultsTemplateRef);
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_overlay, overlay, "f");
+        this.isOpen = true;
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initOverlayFocusableElements).call(this);
+    }
+}, _SkyAutocompleteComponent_closeDropdown = function _SkyAutocompleteComponent_closeDropdown() {
+    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
+    this.isOpen = false;
+    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyOverlay).call(this);
+    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeActiveDescendant).call(this);
+    __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
+}, _SkyAutocompleteComponent_setActiveDescendant = function _SkyAutocompleteComponent_setActiveDescendant() {
+    const activeElement = __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")];
+    /* Sanity check */
+    /* istanbul ignore else */
+    if (activeElement) {
+        this.inputDirective.setActiveDescendant(activeElement.id);
+    }
+}, _SkyAutocompleteComponent_removeActiveDescendant = function _SkyAutocompleteComponent_removeActiveDescendant() {
+    this.inputDirective.setActiveDescendant(null);
+}, _SkyAutocompleteComponent_resetSearch = function _SkyAutocompleteComponent_resetSearch() {
+    this.searchResults = [];
+    this.searchText = '';
+    this.highlightText = [];
+    __classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, -1, "f");
+    this.searchResultsCount = undefined;
+    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeActiveDescendant).call(this);
+    __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initOverlayFocusableElements).call(this);
+    __classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
+}, _SkyAutocompleteComponent_addInputEventListeners = function _SkyAutocompleteComponent_addInputEventListeners() {
+    const element = __classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f").nativeElement;
+    fromEvent(element, 'keydown')
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f")))
+        .subscribe((event) => {
+        this.handleKeydown(event);
+    });
+    fromEvent(window, 'resize')
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f")))
+        .subscribe(() => {
         /* istanbul ignore else */
-        if (!this.affixer) {
-            const affixer = this.affixService.createAffixer(this.resultsRef);
-            this.adapterService.setDropdownWidth(this.elementRef, this.resultsRef, !!this.inputBoxHostSvc);
-            affixer.affixTo(this.elementRef.nativeElement, {
-                autoFitContext: SkyAffixAutoFitContext.Viewport,
-                enableAutoFit: true,
-                isSticky: true,
-                placement: 'below',
-                horizontalAlignment: 'left',
-            });
-            this.affixer = affixer;
-        }
-    }
-    destroyAffixer() {
-        if (this.affixer) {
-            this.affixer.destroy();
-            this.affixer = undefined;
-        }
-    }
-    initMessageStream() {
-        /* istanbul ignore if */
-        if (this.messageStreamSub) {
-            this.messageStreamSub.unsubscribe();
-        }
-        if (this.messageStream) {
-            this.messageStreamSub = this.messageStream
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe((message) => {
-                switch (message.type) {
-                    case SkyAutocompleteMessageType.CloseDropdown:
-                        this.closeDropdown();
-                        break;
-                    case SkyAutocompleteMessageType.RepositionDropdown:
-                        // Settimeout waits for changes in DOM (e.g., tokens being removed)
-                        setTimeout(() => {
-                            /* istanbul ignore else */
-                            if (this.affixer) {
-                                this.affixer.reaffix();
-                            }
-                        });
-                        break;
-                }
-            });
-        }
-    }
-    initOverlayFocusableElements() {
-        // Wait for dropdown elements to render.
-        setTimeout(() => {
-            if (this.overlay) {
-                this.overlayFocusableElements =
-                    this.adapterService.getOverlayFocusableElements(this.overlay);
-                this.overlayFocusableElements.forEach((el) => {
-                    this.adapterService.setTabIndex(el, -1);
-                });
-                this.addFocusedClass();
-            }
+        if (this.isOpen && this.resultsRef) {
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").setDropdownWidth(__classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f"), this.resultsRef, !!__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputBoxHostSvc, "f"));
+        }
+    });
+}, _SkyAutocompleteComponent_destroyOverlay = function _SkyAutocompleteComponent_destroyOverlay() {
+    if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")) {
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayService, "f").close(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f"));
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_overlay, undefined, "f");
+    }
+}, _SkyAutocompleteComponent_createAffixer = function _SkyAutocompleteComponent_createAffixer() {
+    /* Sanity check */
+    /* istanbul ignore else */
+    if (!__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f") && this.resultsRef) {
+        const affixer = __classPrivateFieldGet(this, _SkyAutocompleteComponent_affixService, "f").createAffixer(this.resultsRef);
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").setDropdownWidth(__classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f"), this.resultsRef, !!__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputBoxHostSvc, "f"));
+        affixer.affixTo(__classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f").nativeElement, {
+            autoFitContext: SkyAffixAutoFitContext.Viewport,
+            enableAutoFit: true,
+            isSticky: true,
+            placement: 'below',
+            horizontalAlignment: 'left',
         });
-    }
-    getActiveElement() {
-        return this.overlayFocusableElements[this.activeElementIndex];
-    }
-    removeFocusedClass() {
-        if (this.activeElementIndex > -1) {
-            this.adapterService.removeCSSClass(this.overlayFocusableElements[this.activeElementIndex], 'sky-autocomplete-descendant-focus');
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_affixer, affixer, "f");
+    }
+}, _SkyAutocompleteComponent_destroyAffixer = function _SkyAutocompleteComponent_destroyAffixer() {
+    if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f")) {
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f").destroy();
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_affixer, undefined, "f");
+    }
+}, _SkyAutocompleteComponent_initMessageStream = function _SkyAutocompleteComponent_initMessageStream() {
+    if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_messageStreamSub, "f")) {
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_messageStreamSub, "f").unsubscribe();
+        __classPrivateFieldSet(this, _SkyAutocompleteComponent_messageStreamSub, undefined, "f");
+    }
+    __classPrivateFieldSet(this, _SkyAutocompleteComponent_messageStreamSub, this.messageStream.subscribe((message) => {
+        switch (message.type) {
+            case SkyAutocompleteMessageType.CloseDropdown:
+                __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
+                break;
+            case SkyAutocompleteMessageType.RepositionDropdown:
+                // Settimeout waits for changes in DOM (e.g., tokens being removed)
+                setTimeout(() => {
+                    /* istanbul ignore else */
+                    if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f")) {
+                        __classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f").reaffix();
+                    }
+                });
+                break;
+        }
+    }), "f");
+}, _SkyAutocompleteComponent_initOverlayFocusableElements = function _SkyAutocompleteComponent_initOverlayFocusableElements() {
+    // Wait for dropdown elements to render.
+    setTimeout(() => {
+        if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")) {
+            __classPrivateFieldSet(this, _SkyAutocompleteComponent_overlayFocusableElements, __classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").getOverlayFocusableElements(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")), "f");
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f").forEach((el) => {
+                __classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").setTabIndex(el, -1);
+            });
+            __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
         }
+    });
+}, _SkyAutocompleteComponent_getActiveElement = function _SkyAutocompleteComponent_getActiveElement() {
+    return __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")];
+}, _SkyAutocompleteComponent_removeFocusedClass = function _SkyAutocompleteComponent_removeFocusedClass() {
+    if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") > -1) {
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").removeCSSClass(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")], 'sky-autocomplete-descendant-focus');
     }
-    addFocusedClass() {
-        if (this.activeElementIndex > -1) {
-            this.adapterService.addCSSClass(this.overlayFocusableElements[this.activeElementIndex], 'sky-autocomplete-descendant-focus');
-            this.setActiveDescendant();
-        }
+}, _SkyAutocompleteComponent_addFocusedClass = function _SkyAutocompleteComponent_addFocusedClass() {
+    if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") > -1) {
+        __classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").addCSSClass(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")], 'sky-autocomplete-descendant-focus');
+        __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: SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i6.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: "defaultSearchResultTemplate", first: true, predicate: ["defaultSearchResultTemplate"], descendants: true, read: TemplateRef }, { 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.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;\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: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe, "skyAutocompleteSearchAsyncDisabled": SkyAutcompleteSearchAsyncDisabledPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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: "defaultSearchResultTemplate", first: true, predicate: ["defaultSearchResultTemplate"], descendants: true, read: TemplateRef, static: true }, { 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.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;\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: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe, "skyAutocompleteSearchAsyncDisabled": SkyAutcompleteSearchAsyncDisabledPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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.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;\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"] }]
@@ -1129,7 +1140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: ViewChild,
                 args: ['defaultSearchResultTemplate', {
                         read: TemplateRef,
-                        static: false,
+                        static: true,
                     }]
             }], inputDirective: [{
                 type: ContentChild,
@@ -1200,6 +1211,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+var _SkyCountryFieldComponent_instances, _SkyCountryFieldComponent_changeDetector, _SkyCountryFieldComponent_defaultCountryData, _SkyCountryFieldComponent_elRef, _SkyCountryFieldComponent_idle, _SkyCountryFieldComponent_injector, _SkyCountryFieldComponent_internalFormChange, _SkyCountryFieldComponent_isInitialChange, _SkyCountryFieldComponent_ngControl, _SkyCountryFieldComponent_ngUnsubscribe, _SkyCountryFieldComponent_themeSvc, _SkyCountryFieldComponent_windowRef, _SkyCountryFieldComponent__defaultCountry, _SkyCountryFieldComponent__disabled, _SkyCountryFieldComponent__includePhoneInfo, _SkyCountryFieldComponent__selectedCountry, _SkyCountryFieldComponent__supportedCountryISOs, _SkyCountryFieldComponent_countriesAreEqual, _SkyCountryFieldComponent_countriesEqual, _SkyCountryFieldComponent_removeEventListeners, _SkyCountryFieldComponent_setupCountries, _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault, _SkyCountryFieldComponent_updateInputBox;
+const DEFAULT_COUNTRY_CODE = 'us';
 const SKY_COUNTRY_FIELD_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => SkyCountryFieldComponent),
@@ -1208,31 +1221,48 @@ const SKY_COUNTRY_FIELD_VALIDATOR = {
 let uniqueId = 0;
 class SkyCountryFieldComponent {
     constructor(changeDetector, elRef, windowRef, injector, inputBoxHostSvc, themeSvc) {
-        this.changeDetector = changeDetector;
-        this.elRef = elRef;
-        this.windowRef = windowRef;
-        this.injector = injector;
         this.inputBoxHostSvc = inputBoxHostSvc;
-        this.themeSvc = themeSvc;
+        _SkyCountryFieldComponent_instances.add(this);
+        /**
+         * Indicates whether to hide the flag in the input element.
+         */
+        this.hideSelectedCountryFlag = false;
         /**
          * Fires when the selected country changes.
          */
         this.selectedCountryChange = new EventEmitter();
+        this.countries = [];
         this.isInputFocused = false;
         this.searchTextMinimumCharacters = 2;
         this.currentTheme = 'default';
-        this.idle = new Subject();
-        this.internalFormChange = false;
-        this.isInitialChange = true;
-        this.ngUnsubscribe = new Subject();
-        this._disabled = false;
-        this._includePhoneInfo = false;
+        _SkyCountryFieldComponent_changeDetector.set(this, void 0);
+        _SkyCountryFieldComponent_defaultCountryData.set(this, void 0);
+        _SkyCountryFieldComponent_elRef.set(this, void 0);
+        _SkyCountryFieldComponent_idle.set(this, new Subject());
+        _SkyCountryFieldComponent_injector.set(this, void 0);
+        _SkyCountryFieldComponent_internalFormChange.set(this, false);
+        _SkyCountryFieldComponent_isInitialChange.set(this, true);
+        _SkyCountryFieldComponent_ngControl.set(this, null);
+        _SkyCountryFieldComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyCountryFieldComponent_themeSvc.set(this, void 0);
+        _SkyCountryFieldComponent_windowRef.set(this, void 0);
+        _SkyCountryFieldComponent__defaultCountry.set(this, void 0);
+        _SkyCountryFieldComponent__disabled.set(this, false);
+        _SkyCountryFieldComponent__includePhoneInfo.set(this, false);
+        _SkyCountryFieldComponent__selectedCountry.set(this, void 0);
+        _SkyCountryFieldComponent__supportedCountryISOs.set(this, void 0);
         // Angular automatically constructs these methods.
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (value) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
-        this.setupCountries();
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent_elRef, elRef, "f");
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent_windowRef, windowRef, "f");
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent_injector, injector, "f");
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent_themeSvc, themeSvc, "f");
+        this.inputId = `sky-country-field-input-${uniqueId++}`;
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_setupCountries).call(this);
         this.countrySearchFormControl = new FormControl();
     }
     /**
@@ -1242,40 +1272,43 @@ class SkyCountryFieldComponent {
      * @default "us"
      */
     set defaultCountry(value) {
-        if (value !== this._defaultCountry) {
-            this._defaultCountry = value.toLowerCase();
-            this.defaultCountryData = this.countries.find((country) => country.iso2 === this._defaultCountry);
-            this.sortCountriesWithSelectedAndDefault(this.selectedCountry);
+        if (!value) {
+            value = DEFAULT_COUNTRY_CODE;
+        }
+        if (value !== __classPrivateFieldGet(this, _SkyCountryFieldComponent__defaultCountry, "f")) {
+            __classPrivateFieldSet(this, _SkyCountryFieldComponent__defaultCountry, value.toLowerCase(), "f");
+            __classPrivateFieldSet(this, _SkyCountryFieldComponent_defaultCountryData, this.countries.find((country) => country.iso2 === __classPrivateFieldGet(this, _SkyCountryFieldComponent__defaultCountry, "f")), "f");
+            __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault).call(this, this.selectedCountry);
         }
     }
     get defaultCountry() {
-        return this._defaultCountry;
+        return __classPrivateFieldGet(this, _SkyCountryFieldComponent__defaultCountry, "f");
     }
     /**
      * Indicates whether to disable the country field.
      * @default false
      */
     set disabled(isDisabled) {
-        this.removeEventListeners();
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_removeEventListeners).call(this);
         if (!isDisabled) {
             this.addEventListeners();
         }
-        this._disabled = isDisabled;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent__disabled, isDisabled, "f");
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
     }
     get disabled() {
-        return this._disabled;
+        return __classPrivateFieldGet(this, _SkyCountryFieldComponent__disabled, "f");
     }
     /**
      * Indicates whether to include phone information in the selected country and country dropdown.
      * @default false
      */
-    set includePhoneInfo(includePhoneInfo) {
-        this._includePhoneInfo = includePhoneInfo;
-        this.setupCountries();
+    set includePhoneInfo(value) {
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent__includePhoneInfo, value, "f");
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_setupCountries).call(this);
     }
     get includePhoneInfo() {
-        return this._includePhoneInfo;
+        return __classPrivateFieldGet(this, _SkyCountryFieldComponent__includePhoneInfo, "f") || false;
     }
     /**
      * Specifies the [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)
@@ -1286,35 +1319,36 @@ class SkyCountryFieldComponent {
         if (Array.isArray(value)) {
             value = value.map((v) => v.toLowerCase());
         }
-        this._supportedCountryISOs = value;
-        this.setupCountries();
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent__supportedCountryISOs, value, "f");
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_setupCountries).call(this);
     }
     get supportedCountryISOs() {
-        return this._supportedCountryISOs;
+        return __classPrivateFieldGet(this, _SkyCountryFieldComponent__supportedCountryISOs, "f") || [];
     }
     set selectedCountry(newCountry) {
-        if (!this.countriesAreEqual(this.selectedCountry, newCountry)) {
-            if (newCountry && newCountry.iso2) {
-                const isoCountry = this.countries.find((country) => country.iso2 === newCountry.iso2);
+        if (!__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_countriesAreEqual).call(this, this.selectedCountry, newCountry)) {
+            const newCountryIso = newCountry && newCountry.iso2;
+            if (newCountryIso) {
+                const isoCountry = this.countries.find((country) => country.iso2 === newCountryIso);
                 if (isoCountry) {
                     newCountry = isoCountry;
                 }
             }
-            this._selectedCountry = newCountry;
-            this.sortCountriesWithSelectedAndDefault(newCountry);
-            this.internalFormChange = true;
+            __classPrivateFieldSet(this, _SkyCountryFieldComponent__selectedCountry, newCountry, "f");
+            __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault).call(this, newCountry);
+            __classPrivateFieldSet(this, _SkyCountryFieldComponent_internalFormChange, true, "f");
             this.countrySearchFormControl.setValue(this.selectedCountry);
-            if (!this.isInitialChange) {
+            if (!__classPrivateFieldGet(this, _SkyCountryFieldComponent_isInitialChange, "f")) {
                 this.onChange(newCountry);
                 this.onTouched();
                 this.selectedCountryChange.emit(newCountry);
             }
             // Do not mark the field as "dirty"
             // if the field has been initialized with a value.
-            if (this.isInitialChange && this.ngControl && this.ngControl.control) {
-                this.ngControl.control.markAsPristine();
+            if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_isInitialChange, "f") && __classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f") && __classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f").control) {
+                __classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f").control.markAsPristine();
             }
-            this.isInitialChange = false;
+            __classPrivateFieldSet(this, _SkyCountryFieldComponent_isInitialChange, false, "f");
             /**
              * The second portion of this if statement is complex. The control type check ensures that
              * we only watch for the initial time through this function on reactive forms. However,
@@ -1322,39 +1356,38 @@ class SkyCountryFieldComponent {
              * so we have to check for when the non-null pass through happens.
              */
         }
-        else if (this.isInitialChange &&
-            (!(this.ngControl instanceof NgModel) || newCountry !== null)) {
-            this.isInitialChange = false;
+        else if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_isInitialChange, "f") &&
+            (!(__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f") instanceof NgModel) || newCountry !== null)) {
+            __classPrivateFieldSet(this, _SkyCountryFieldComponent_isInitialChange, false, "f");
         }
     }
     get selectedCountry() {
-        return this._selectedCountry;
+        return __classPrivateFieldGet(this, _SkyCountryFieldComponent__selectedCountry, "f");
     }
     /**
      * Angular lifecycle hook for when the component is initialized
      * @internal
      */
     ngOnInit() {
-        this.updateInputBox();
-        this.ngControl = this.injector.get(NgControl, null);
-        this.inputId = `sky-country-field-input-${uniqueId++}`;
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_updateInputBox).call(this);
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent_ngControl, __classPrivateFieldGet(this, _SkyCountryFieldComponent_injector, "f").get(NgControl, null), "f");
+        if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f")) {
+            __classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f").valueAccessor = this;
         }
         else {
             /**
              * The initial change boolean is to determine if the form is setting the value. When no form
              * is present we don't want to ignore the first change.
              */
-            this.isInitialChange = false;
+            __classPrivateFieldSet(this, _SkyCountryFieldComponent_isInitialChange, false, "f");
         }
         if (!this.defaultCountry) {
-            this.defaultCountry = 'us';
+            this.defaultCountry = DEFAULT_COUNTRY_CODE;
         }
         this.countrySearchFormControl.valueChanges
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngUnsubscribe, "f")))
             .subscribe((newValue) => {
-            if (newValue && !this.internalFormChange) {
+            if (newValue && !__classPrivateFieldGet(this, _SkyCountryFieldComponent_internalFormChange, "f")) {
                 this.selectedCountry = newValue;
             }
         });
@@ -1364,11 +1397,11 @@ class SkyCountryFieldComponent {
     }
     ngAfterViewInit() {
         /* istanbul ignore else */
-        if (this.themeSvc) {
-            this.themeSvc.settingsChange.subscribe((change) => {
+        if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_themeSvc, "f")) {
+            __classPrivateFieldGet(this, _SkyCountryFieldComponent_themeSvc, "f").settingsChange.subscribe((change) => {
                 this.currentTheme = change.currentSettings.theme.name;
-                this.updateInputBox();
-                this.changeDetector.markForCheck();
+                __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_updateInputBox).call(this);
+                __classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
             });
         }
     }
@@ -1378,9 +1411,9 @@ class SkyCountryFieldComponent {
      */
     ngOnDestroy() {
         this.selectedCountryChange.complete();
-        this.removeEventListeners();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_removeEventListeners).call(this);
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_ngUnsubscribe, "f").complete();
     }
     /**
      * Sets the component's touched value when the autocomplete is blurred
@@ -1422,123 +1455,118 @@ class SkyCountryFieldComponent {
                 return { unsupportedCountry: true };
             }
         }
-        return;
+        return null;
     }
     writeValue(value) {
         this.selectedCountry = value;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
     }
     addEventListeners() {
-        this.removeEventListeners();
-        this.idle = new Subject();
-        const documentObj = this.windowRef.nativeWindow.document;
+        __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_removeEventListeners).call(this);
+        __classPrivateFieldSet(this, _SkyCountryFieldComponent_idle, new Subject(), "f");
+        const documentObj = __classPrivateFieldGet(this, _SkyCountryFieldComponent_windowRef, "f").nativeWindow.document;
         fromEvent(documentObj, 'mousedown')
-            .pipe(takeUntil(this.idle))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyCountryFieldComponent_idle, "f")))
             .subscribe((event) => {
-            this.isInputFocused = this.elRef.nativeElement.contains(event.target);
-            this.changeDetector.markForCheck();
+            this.isInputFocused = __classPrivateFieldGet(this, _SkyCountryFieldComponent_elRef, "f").nativeElement.contains(event.target);
+            __classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
         });
         fromEvent(documentObj, 'focusin')
-            .pipe(takeUntil(this.idle))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyCountryFieldComponent_idle, "f")))
             .subscribe((event) => {
-            this.isInputFocused = this.elRef.nativeElement.contains(event.target);
-            this.changeDetector.markForCheck();
+            this.isInputFocused = __classPrivateFieldGet(this, _SkyCountryFieldComponent_elRef, "f").nativeElement.contains(event.target);
+            __classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
         });
     }
-    countriesAreEqual(country1, country2) {
-        if (country1 && country2) {
-            return country1.iso2 === country2.iso2;
-        }
-        // NOTE: We are doing this in  this way because template forms will send through `null`
-        // and then `undefined` on empty initialization. These are functionally equivalent but will
-        // not pass a standard triple equals check.
-        return !country1 && !country2;
-    }
-    countriesEqual(a, b) {
-        return a.iso2 === b.iso2 && a.name === b.name;
-    }
-    removeEventListeners() {
-        this.idle.next();
-        this.idle.complete();
-    }
-    setupCountries() {
+}
+_SkyCountryFieldComponent_changeDetector = new WeakMap(), _SkyCountryFieldComponent_defaultCountryData = new WeakMap(), _SkyCountryFieldComponent_elRef = new WeakMap(), _SkyCountryFieldComponent_idle = new WeakMap(), _SkyCountryFieldComponent_injector = new WeakMap(), _SkyCountryFieldComponent_internalFormChange = new WeakMap(), _SkyCountryFieldComponent_isInitialChange = new WeakMap(), _SkyCountryFieldComponent_ngControl = new WeakMap(), _SkyCountryFieldComponent_ngUnsubscribe = new WeakMap(), _SkyCountryFieldComponent_themeSvc = new WeakMap(), _SkyCountryFieldComponent_windowRef = new WeakMap(), _SkyCountryFieldComponent__defaultCountry = new WeakMap(), _SkyCountryFieldComponent__disabled = new WeakMap(), _SkyCountryFieldComponent__includePhoneInfo = new WeakMap(), _SkyCountryFieldComponent__selectedCountry = new WeakMap(), _SkyCountryFieldComponent__supportedCountryISOs = new WeakMap(), _SkyCountryFieldComponent_instances = new WeakSet(), _SkyCountryFieldComponent_countriesAreEqual = function _SkyCountryFieldComponent_countriesAreEqual(country1, country2) {
+    if (country1 && country2) {
+        return country1.iso2 === country2.iso2;
+    }
+    // NOTE: We are doing this in  this way because template forms will send through `null`
+    // and then `undefined` on empty initialization. These are functionally equivalent but will
+    // not pass a standard triple equals check.
+    return !country1 && !country2;
+}, _SkyCountryFieldComponent_countriesEqual = function _SkyCountryFieldComponent_countriesEqual(a, b) {
+    return a.iso2 === b.iso2 && a.name === b.name;
+}, _SkyCountryFieldComponent_removeEventListeners = function _SkyCountryFieldComponent_removeEventListeners() {
+    __classPrivateFieldGet(this, _SkyCountryFieldComponent_idle, "f").next();
+    __classPrivateFieldGet(this, _SkyCountryFieldComponent_idle, "f").complete();
+}, _SkyCountryFieldComponent_setupCountries = function _SkyCountryFieldComponent_setupCountries() {
+    /**
+     * The json functions here ensures that we get a copy of the array and not the global original.
+     * This ensures that multiple instances of the component don't overwrite the original data.
+     *
+     * We must type the window object as any here as the intl-tel-input library adds its object
+     * to the main window object.
+     */
+    this.countries = JSON.parse(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    JSON.stringify(window.intlTelInputGlobals.getCountryData()));
+    // Ignoring coverage here as this will be removed in the next release.
+    // istanbul ignore next
+    if (!this.includePhoneInfo && !this.hideSelectedCountryFlag) {
+        if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_elRef, "f").nativeElement.parentElement?.classList?.contains('sky-phone-field-country-search')) {
+            this.includePhoneInfo = true;
+            this.hideSelectedCountryFlag = true;
+        }
+    }
+    /* istanbul ignore else */
+    if (!this.includePhoneInfo) {
         /**
-         * The json functions here ensures that we get a copy of the array and not the global original.
-         * This ensures that multiple instances of the component don't overwrite the original data.
-         *
-         * We must type the window object as any here as the intl-tel-input library adds its object
-         * to the main window object.
+         * The library we get the country data from includes extra phone properties.
+         * We want to remove these unless we are in a phone field
          */
-        this.countries = JSON.parse(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        JSON.stringify(window.intlTelInputGlobals.getCountryData()));
-        // Ignoring coverage here as this will be removed in the next release.
-        // istanbul ignore next
-        if (!this.includePhoneInfo && !this.hideSelectedCountryFlag) {
-            if (this.elRef.nativeElement.parentElement?.classList?.contains('sky-phone-field-country-search')) {
-                this.includePhoneInfo = true;
-                this.hideSelectedCountryFlag = true;
-            }
-        }
-        /* istanbul ignore else */
-        if (!this.includePhoneInfo) {
-            /**
-             * The library we get the country data from includes extra phone properties.
-             * We want to remove these unless we are in a phone field
-             */
-            this.countries.forEach((country) => {
-                delete country.dialCode;
-                delete country.areaCodes;
-                delete country.priority;
-            });
-        }
-        this.sortCountriesWithSelectedAndDefault(this.selectedCountry);
-        if (this.supportedCountryISOs && this.supportedCountryISOs.length > 0) {
-            this.countries = this.countries.filter((country) => {
-                return this.supportedCountryISOs.indexOf(country.iso2) >= 0;
-            });
-        }
+        this.countries.forEach((country) => {
+            delete country.dialCode;
+            delete country.areaCodes;
+            delete country.priority;
+        });
     }
-    sortCountriesWithSelectedAndDefault(selectedCountry) {
-        let selectedCountryIndex;
-        let selectedCountryData;
-        const sortedNewCountries = this.countries.sort((a, b) => {
-            if (((this.defaultCountryData &&
-                this.countriesEqual(a, this.defaultCountryData)) ||
-                a.name < b.name) &&
-                (!this.defaultCountryData ||
-                    !this.countriesEqual(this.defaultCountryData, b))) {
-                return -1;
-            }
-            else {
-                return 1;
-            }
+    __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault).call(this, this.selectedCountry);
+    if (this.supportedCountryISOs && this.supportedCountryISOs.length > 0) {
+        this.countries = this.countries.filter((country) => {
+            return this.supportedCountryISOs.indexOf(country.iso2) >= 0;
         });
-        if (selectedCountry) {
-            // Note: We are looking up this data here to ensure we are using the offical data from the
-            // library and not the data provided by the user on initialization of the component
-            selectedCountryData = this.countries.find((country) => country.iso2 === selectedCountry.iso2.toLocaleLowerCase());
-            selectedCountryIndex = this.countries.indexOf(selectedCountryData);
-            if (selectedCountryIndex >= 0) {
-                this.countries.splice(selectedCountryIndex, 1);
-                sortedNewCountries.splice(0, 0, selectedCountryData);
-            }
-        }
-        this.countries = sortedNewCountries;
     }
-    updateInputBox() {
-        if (this.inputBoxHostSvc) {
-            this.inputBoxHostSvc.populate({
-                inputTemplate: this.inputTemplateRef,
-                iconsInsetTemplate: this.currentTheme === 'modern'
-                    ? this.searchIconTemplateRef
-                    : undefined,
-            });
+}, _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault = function _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault(selectedCountry) {
+    let selectedCountryIndex;
+    let selectedCountryData;
+    const sortedNewCountries = this.countries.sort((a, b) => {
+        if (((__classPrivateFieldGet(this, _SkyCountryFieldComponent_defaultCountryData, "f") &&
+            __classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_countriesEqual).call(this, a, __classPrivateFieldGet(this, _SkyCountryFieldComponent_defaultCountryData, "f"))) ||
+            a.name < b.name) &&
+            (!__classPrivateFieldGet(this, _SkyCountryFieldComponent_defaultCountryData, "f") ||
+                !__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_countriesEqual).call(this, __classPrivateFieldGet(this, _SkyCountryFieldComponent_defaultCountryData, "f"), b))) {
+            return -1;
         }
+        else {
+            return 1;
+        }
+    });
+    if (selectedCountry) {
+        // Note: We are looking up this data here to ensure we are using the offical data from the
+        // library and not the data provided by the user on initialization of the component
+        selectedCountryData = this.countries.find((country) => country.iso2 === selectedCountry.iso2.toLocaleLowerCase());
+        selectedCountryIndex = this.countries.indexOf(selectedCountryData);
+        if (selectedCountryIndex >= 0) {
+            this.countries.splice(selectedCountryIndex, 1);
+            sortedNewCountries.splice(0, 0, selectedCountryData);
+        }
+    }
+    this.countries = sortedNewCountries;
+}, _SkyCountryFieldComponent_updateInputBox = function _SkyCountryFieldComponent_updateInputBox() {
+    if (this.inputBoxHostSvc) {
+        this.inputBoxHostSvc.populate({
+            inputTemplate: this.inputTemplateRef,
+            iconsInsetTemplate: this.currentTheme === 'modern'
+                ? this.searchIconTemplateRef
+                : undefined,
+        });
     }
-}
+};
 SkyCountryFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyCountryFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAppWindowRef }, { token: i0.Injector }, { token: i6.SkyInputBoxHostService, optional: true }, { token: i7.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyCountryFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyCountryFieldComponent, selector: "sky-country-field", inputs: { autocompleteAttribute: "autocompleteAttribute", defaultCountry: "defaultCountry", disabled: "disabled", hideSelectedCountryFlag: "hideSelectedCountryFlag", includePhoneInfo: "includePhoneInfo", supportedCountryISOs: "supportedCountryISOs" }, outputs: { selectedCountryChange: "selectedCountryChange" }, providers: [SKY_COUNTRY_FIELD_VALIDATOR], viewQueries: [{ propertyName: "countrySearchAutocompleteDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <span\n    class=\"sky-country-field-container\"\n    [ngClass]=\"{\n      'sky-country-field-disabled': disabled\n    }\"\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"inputId\"\n      [data]=\"countries\"\n      [propertiesToSearch]=\"['name', 'iso2']\"\n      [searchResultTemplate]=\"countrySearchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      (selectionChange)=\"onCountrySelected($event)\"\n    >\n      <div\n        class=\"sky-country-field-input\"\n        [ngClass]=\"{\n          'sky-country-field-input-with-flag':\n            selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n        }\"\n      >\n        <div\n          *ngIf=\"\n            selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n          \"\n          class=\"sky-country-field-flag\"\n        >\n          <div\n            class=\"iti__flag\"\n            [ngClass]=\"'iti__' + selectedCountry.iso2.toLowerCase()\"\n          ></div>\n        </div>\n        <textarea\n          class=\"sky-form-control\"\n          name=\"selectedCountry\"\n          rows=\"1\"\n          skyAutocomplete\n          [attr.aria-label]=\"\n            'skyux_country_field_search_placeholder' | skyLibResources\n          \"\n          [attr.disabled]=\"disabled ? true : undefined\"\n          [attr.id]=\"inputId\"\n          [autocompleteAttribute]=\"autocompleteAttribute\"\n          [formControl]=\"countrySearchFormControl\"\n          [placeholder]=\"\n            currentTheme === 'default'\n              ? ('skyux_country_field_search_placeholder' | skyLibResources)\n              : ''\n          \"\n          (blur)=\"onAutocompleteBlur()\"\n        ></textarea>\n      </div>\n    </sky-autocomplete>\n  </span>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n  <div\n    class=\"sky-country-field-search-result-flag\"\n    [ngClass]=\"'iti__flag iti__' + item.iso2.toLowerCase()\"\n  ></div>\n  {{ item.name }}\n  <span *ngIf=\"includePhoneInfo\" class=\"sky-deemphasized\">\n    {{ item.dialCode }}\n  </span>\n</ng-template>\n\n<!-- This template should only be used in modern theme input boxes. -->\n<ng-template #searchIconTemplateRef>\n  <div class=\"sky-input-group-icon sky-input-box-icon-inset\">\n    <sky-icon iconType=\"skyux\" icon=\"search\"></sky-icon>\n  </div>\n</ng-template>\n", styles: [".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box;-moz-box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;text-align:left;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px #0003;background-color:#fff;border:1px solid #CCC;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #CCC}.iti__country{padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:#0000000d}.iti__flag-box,.iti__country-name,.iti__dial-code{vertical-align:middle}.iti__flag-box,.iti__country-name{margin-right:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:#0000000d}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:#0000000d}.iti--separate-dial-code .iti__selected-dial-code{margin-left:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{top:30px;bottom:30px;left:30px;right:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0 0 1px #888;background-image:url(../img/flags.png);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-image:url(../img/flags@2x.png)}}.iti__flag.iti__np{background-color:transparent}.sky-country-field-country-btn+::ng-deep .sky-form-control{border-left:none}.sky-country-field-container{width:100%}.sky-country-field-search-result-flag{display:inline-block;margin-right:5px}.sky-country-field-flag{display:none}.sky-country-field-disabled .sky-country-field-input{cursor:default;background-color:#cdcfd2}.sky-country-field-disabled .sky-country-field-flag{opacity:.65}.sky-country-field-input{cursor:text;display:flex;position:relative}.sky-country-field-input .sky-country-field-flag{align-items:center;margin-bottom:auto;margin-top:auto;position:absolute;left:13px;height:35px;bottom:0}.sky-country-field-input textarea{overflow:hidden;resize:none;white-space:nowrap}.sky-country-field-input-with-flag .sky-country-field-flag{display:flex}.sky-country-field-input-with-flag .sky-form-control{padding-left:40px}.sky-country-field-country-selected,.sky-country-field-country-default{border-bottom:1px solid #e2e3e4}:host(.ng-invalid.ng-touched) .sky-country-field-input textarea{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}::ng-deep .sky-theme-modern .sky-country-field-disabled .sky-country-field-flag{filter:grayscale(100%)}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input{background-color:transparent;border-radius:6px}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input textarea.sky-form-control{overflow:hidden;resize:none;white-space:nowrap}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-country-field-flag{height:40px;left:15px;opacity:1}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-form-control{padding-left:45px}.iti__flag{max-width:25px;max-height:13px;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags.webp)!important}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag .iti__flag{background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags@2x.webp)!important}}\n"], components: [{ type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyCountryFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyCountryFieldComponent, selector: "sky-country-field", inputs: { autocompleteAttribute: "autocompleteAttribute", defaultCountry: "defaultCountry", disabled: "disabled", hideSelectedCountryFlag: "hideSelectedCountryFlag", includePhoneInfo: "includePhoneInfo", supportedCountryISOs: "supportedCountryISOs" }, outputs: { selectedCountryChange: "selectedCountryChange" }, providers: [SKY_COUNTRY_FIELD_VALIDATOR], viewQueries: [{ propertyName: "countrySearchAutocompleteDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <span\n    class=\"sky-country-field-container\"\n    [ngClass]=\"{\n      'sky-country-field-disabled': disabled\n    }\"\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"inputId\"\n      [data]=\"countries\"\n      [propertiesToSearch]=\"['name', 'iso2']\"\n      [searchResultTemplate]=\"countrySearchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      (selectionChange)=\"onCountrySelected($event)\"\n    >\n      <div\n        class=\"sky-country-field-input\"\n        [ngClass]=\"{\n          'sky-country-field-input-with-flag':\n            selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n        }\"\n      >\n        <div\n          *ngIf=\"\n            selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n          \"\n          class=\"sky-country-field-flag\"\n        >\n          <div\n            class=\"iti__flag\"\n            [ngClass]=\"'iti__' + selectedCountry.iso2.toLowerCase()\"\n          ></div>\n        </div>\n        <textarea\n          class=\"sky-form-control\"\n          name=\"selectedCountry\"\n          rows=\"1\"\n          skyAutocomplete\n          [attr.aria-label]=\"\n            'skyux_country_field_search_placeholder' | skyLibResources\n          \"\n          [attr.disabled]=\"disabled ? true : undefined\"\n          [attr.id]=\"inputId\"\n          [autocompleteAttribute]=\"autocompleteAttribute\"\n          [formControl]=\"countrySearchFormControl\"\n          [placeholder]=\"\n            currentTheme === 'default'\n              ? ('skyux_country_field_search_placeholder' | skyLibResources)\n              : ''\n          \"\n          (blur)=\"onAutocompleteBlur()\"\n        ></textarea>\n      </div>\n    </sky-autocomplete>\n  </span>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n  <div\n    class=\"sky-country-field-search-result-flag\"\n    [ngClass]=\"'iti__flag iti__' + item.iso2.toLowerCase()\"\n  ></div>\n  {{ item.name }}\n  <span *ngIf=\"includePhoneInfo\" class=\"sky-deemphasized\">\n    {{ item.dialCode }}\n  </span>\n</ng-template>\n\n<!-- This template should only be used in modern theme input boxes. -->\n<ng-template #searchIconTemplateRef>\n  <div class=\"sky-input-group-icon sky-input-box-icon-inset\">\n    <sky-icon iconType=\"skyux\" icon=\"search\"></sky-icon>\n  </div>\n</ng-template>\n", styles: [".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box;-moz-box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;text-align:left;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px #0003;background-color:#fff;border:1px solid #CCC;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #CCC}.iti__country{padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:#0000000d}.iti__flag-box,.iti__country-name,.iti__dial-code{vertical-align:middle}.iti__flag-box,.iti__country-name{margin-right:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:#0000000d}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:#0000000d}.iti--separate-dial-code .iti__selected-dial-code{margin-left:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{top:30px;bottom:30px;left:30px;right:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0 0 1px #888;background-image:url(../img/flags.png);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-image:url(../img/flags@2x.png)}}.iti__flag.iti__np{background-color:transparent}.sky-country-field-country-btn+::ng-deep .sky-form-control{border-left:none}.sky-country-field-container{width:100%}.sky-country-field-search-result-flag{display:inline-block;margin-right:5px}.sky-country-field-flag{display:none}.sky-country-field-disabled .sky-country-field-input{cursor:default;background-color:#cdcfd2}.sky-country-field-disabled .sky-country-field-flag{opacity:.65}.sky-country-field-input{cursor:text;display:flex;position:relative}.sky-country-field-input .sky-country-field-flag{align-items:center;margin-bottom:auto;margin-top:auto;position:absolute;left:13px;height:35px;bottom:0}.sky-country-field-input textarea{overflow:hidden;resize:none;white-space:nowrap}.sky-country-field-input-with-flag .sky-country-field-flag{display:flex}.sky-country-field-input-with-flag .sky-form-control{padding-left:40px}.sky-country-field-country-selected,.sky-country-field-country-default{border-bottom:1px solid #e2e3e4}:host(.ng-invalid.ng-touched) .sky-country-field-input textarea{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}::ng-deep .sky-theme-modern .sky-country-field-disabled .sky-country-field-flag{filter:grayscale(100%)}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input{background-color:transparent;border-radius:6px}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input textarea.sky-form-control{overflow:hidden;resize:none;white-space:nowrap}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-country-field-flag{height:40px;left:15px;opacity:1}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-form-control{padding-left:45px}.iti__flag{max-width:25px;max-height:13px;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags.webp)!important}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag .iti__flag{background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags@2x.webp)!important}}\n"], components: [{ type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyCountryFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-country-field', providers: [SKY_COUNTRY_FIELD_VALIDATOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <span\n    class=\"sky-country-field-container\"\n    [ngClass]=\"{\n      'sky-country-field-disabled': disabled\n    }\"\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"inputId\"\n      [data]=\"countries\"\n      [propertiesToSearch]=\"['name', 'iso2']\"\n      [searchResultTemplate]=\"countrySearchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      (selectionChange)=\"onCountrySelected($event)\"\n    >\n      <div\n        class=\"sky-country-field-input\"\n        [ngClass]=\"{\n          'sky-country-field-input-with-flag':\n            selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n        }\"\n      >\n        <div\n          *ngIf=\"\n            selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n          \"\n          class=\"sky-country-field-flag\"\n        >\n          <div\n            class=\"iti__flag\"\n            [ngClass]=\"'iti__' + selectedCountry.iso2.toLowerCase()\"\n          ></div>\n        </div>\n        <textarea\n          class=\"sky-form-control\"\n          name=\"selectedCountry\"\n          rows=\"1\"\n          skyAutocomplete\n          [attr.aria-label]=\"\n            'skyux_country_field_search_placeholder' | skyLibResources\n          \"\n          [attr.disabled]=\"disabled ? true : undefined\"\n          [attr.id]=\"inputId\"\n          [autocompleteAttribute]=\"autocompleteAttribute\"\n          [formControl]=\"countrySearchFormControl\"\n          [placeholder]=\"\n            currentTheme === 'default'\n              ? ('skyux_country_field_search_placeholder' | skyLibResources)\n              : ''\n          \"\n          (blur)=\"onAutocompleteBlur()\"\n        ></textarea>\n      </div>\n    </sky-autocomplete>\n  </span>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n  <div\n    class=\"sky-country-field-search-result-flag\"\n    [ngClass]=\"'iti__flag iti__' + item.iso2.toLowerCase()\"\n  ></div>\n  {{ item.name }}\n  <span *ngIf=\"includePhoneInfo\" class=\"sky-deemphasized\">\n    {{ item.dialCode }}\n  </span>\n</ng-template>\n\n<!-- This template should only be used in modern theme input boxes. -->\n<ng-template #searchIconTemplateRef>\n  <div class=\"sky-input-group-icon sky-input-box-icon-inset\">\n    <sky-icon iconType=\"skyux\" icon=\"search\"></sky-icon>\n  </div>\n</ng-template>\n", styles: [".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box;-moz-box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;text-align:left;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px #0003;background-color:#fff;border:1px solid #CCC;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #CCC}.iti__country{padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:#0000000d}.iti__flag-box,.iti__country-name,.iti__dial-code{vertical-align:middle}.iti__flag-box,.iti__country-name{margin-right:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:#0000000d}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:#0000000d}.iti--separate-dial-code .iti__selected-dial-code{margin-left:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{top:30px;bottom:30px;left:30px;right:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0 0 1px #888;background-image:url(../img/flags.png);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-image:url(../img/flags@2x.png)}}.iti__flag.iti__np{background-color:transparent}.sky-country-field-country-btn+::ng-deep .sky-form-control{border-left:none}.sky-country-field-container{width:100%}.sky-country-field-search-result-flag{display:inline-block;margin-right:5px}.sky-country-field-flag{display:none}.sky-country-field-disabled .sky-country-field-input{cursor:default;background-color:#cdcfd2}.sky-country-field-disabled .sky-country-field-flag{opacity:.65}.sky-country-field-input{cursor:text;display:flex;position:relative}.sky-country-field-input .sky-country-field-flag{align-items:center;margin-bottom:auto;margin-top:auto;position:absolute;left:13px;height:35px;bottom:0}.sky-country-field-input textarea{overflow:hidden;resize:none;white-space:nowrap}.sky-country-field-input-with-flag .sky-country-field-flag{display:flex}.sky-country-field-input-with-flag .sky-form-control{padding-left:40px}.sky-country-field-country-selected,.sky-country-field-country-default{border-bottom:1px solid #e2e3e4}:host(.ng-invalid.ng-touched) .sky-country-field-input textarea{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}::ng-deep .sky-theme-modern .sky-country-field-disabled .sky-country-field-flag{filter:grayscale(100%)}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input{background-color:transparent;border-radius:6px}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input textarea.sky-form-control{overflow:hidden;resize:none;white-space:nowrap}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-country-field-flag{height:40px;left:15px;opacity:1}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-form-control{padding-left:45px}.iti__flag{max-width:25px;max-height:13px;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags.webp)!important}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag .iti__flag{background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags@2x.webp)!important}}\n"] }]
@@ -1616,49 +1644,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+var _SkySearchAdapterService_instances, _SkySearchAdapterService_renderer, _SkySearchAdapterService_getInputContainerEl, _SkySearchAdapterService_getSearchOpenButtonEl, _SkySearchAdapterService_getSearchContainerEl, _SkySearchAdapterService_getInputEl;
 /**
  * @internal
  */
 class SkySearchAdapterService {
     constructor(renderer) {
-        this.renderer = renderer;
+        _SkySearchAdapterService_instances.add(this);
+        _SkySearchAdapterService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkySearchAdapterService_renderer, renderer, "f");
     }
     selectInput(searchEl) {
-        this.getInputEl(searchEl).select();
+        __classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputEl).call(this, searchEl).select();
     }
     focusInput(searchEl) {
-        this.getInputEl(searchEl).focus();
+        __classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputEl).call(this, searchEl).focus();
     }
     startInputAnimation(searchEl) {
-        const buttonWidth = this.getSearchOpenButtonEl(searchEl).clientWidth;
-        const offsetWidth = this.getSearchContainerEl(searchEl).offsetLeft;
+        const buttonWidth = __classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getSearchOpenButtonEl).call(this, searchEl).clientWidth;
+        const offsetWidth = __classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getSearchContainerEl).call(this, searchEl).offsetLeft;
         const minWidth = buttonWidth + offsetWidth;
-        this.getInputContainerEl(searchEl).style.minWidth =
+        __classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputContainerEl).call(this, searchEl).style.minWidth =
             minWidth.toString() + 'px';
-        this.renderer.setStyle(this.getInputContainerEl(searchEl), 'min-width', minWidth.toString() + 'px');
+        __classPrivateFieldGet(this, _SkySearchAdapterService_renderer, "f").setStyle(__classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputContainerEl).call(this, searchEl), 'min-width', minWidth.toString() + 'px');
     }
     endInputAnimation(searchEl) {
-        this.renderer.setStyle(this.getInputContainerEl(searchEl), 'min-width', '');
-    }
-    getInputContainerEl(searchEl) {
-        return searchEl.nativeElement.querySelector('.sky-search-input-container');
-    }
-    getSearchOpenButtonEl(searchEl) {
-        return searchEl.nativeElement.querySelector('.sky-search-btn-open');
-    }
-    getSearchContainerEl(searchEl) {
-        return searchEl.nativeElement.querySelector('.sky-search-container');
-    }
-    getInputEl(searchEl) {
-        return searchEl.nativeElement.querySelector('input');
+        __classPrivateFieldGet(this, _SkySearchAdapterService_renderer, "f").setStyle(__classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputContainerEl).call(this, searchEl), 'min-width', '');
     }
 }
+_SkySearchAdapterService_renderer = new WeakMap(), _SkySearchAdapterService_instances = new WeakSet(), _SkySearchAdapterService_getInputContainerEl = function _SkySearchAdapterService_getInputContainerEl(searchEl) {
+    return searchEl.nativeElement.querySelector('.sky-search-input-container');
+}, _SkySearchAdapterService_getSearchOpenButtonEl = function _SkySearchAdapterService_getSearchOpenButtonEl(searchEl) {
+    return searchEl.nativeElement.querySelector('.sky-search-btn-open');
+}, _SkySearchAdapterService_getSearchContainerEl = function _SkySearchAdapterService_getSearchContainerEl(searchEl) {
+    return searchEl.nativeElement.querySelector('.sky-search-container');
+}, _SkySearchAdapterService_getInputEl = function _SkySearchAdapterService_getInputEl(searchEl) {
+    return searchEl.nativeElement.querySelector('input');
+};
 SkySearchAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySearchAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkySearchAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySearchAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySearchAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
 
+var _SkySearchComponent_instances, _SkySearchComponent_changeRef, _SkySearchComponent_elRef, _SkySearchComponent_mediaQueryService, _SkySearchComponent_searchAdapter, _SkySearchComponent_searchUpdated, _SkySearchComponent_searchBindingChanged, _SkySearchComponent_expandModeBindingChanged, _SkySearchComponent_shouldOpenInput, _SkySearchComponent_mediaQueryCallback, _SkySearchComponent_searchShouldCollapse;
 const INPUT_SHOWN_STATE = 'inputShown';
 const INPUT_HIDDEN_STATE = 'inputHidden';
 const EXPAND_MODE_RESPONSIVE = 'responsive';
@@ -1666,10 +1695,7 @@ const EXPAND_MODE_FIT = 'fit';
 const EXPAND_MODE_NONE = 'none';
 class SkySearchComponent {
     constructor(mediaQueryService, elRef, searchAdapter, changeRef) {
-        this.mediaQueryService = mediaQueryService;
-        this.elRef = elRef;
-        this.searchAdapter = searchAdapter;
-        this.changeRef = changeRef;
+        _SkySearchComponent_instances.add(this);
         /**
          * Fires when the search text is applied.
          */
@@ -1692,31 +1718,37 @@ class SkySearchComponent {
         this.expandMode = EXPAND_MODE_RESPONSIVE;
         /**
          * Specifies how many milliseconds to wait before searching after users enter text in the search input.
-         * @default 0
          */
         this.debounceTime = 0;
         /**
          * Indicates whether to disable the filter button.
-         * @default false
          */
         this.disabled = false;
-        this.isFullWidth = false;
-        this.isCollapsible = true;
+        this.clearButtonShown = false;
+        this.dismissButtonShown = false;
         this.inputAnimate = INPUT_SHOWN_STATE;
-        this.searchButtonShown = false;
+        this.isCollapsible = true;
+        this.isFullWidth = false;
         this.mobileSearchShown = false;
-        this.dismissButtonShown = false;
-        this.clearButtonShown = false;
-        this.searchUpdated = new Subject();
+        this.searchButtonShown = false;
+        _SkySearchComponent_changeRef.set(this, void 0);
+        _SkySearchComponent_elRef.set(this, void 0);
+        _SkySearchComponent_mediaQueryService.set(this, void 0);
+        _SkySearchComponent_searchAdapter.set(this, void 0);
+        _SkySearchComponent_searchUpdated.set(this, new Subject());
+        __classPrivateFieldSet(this, _SkySearchComponent_mediaQueryService, mediaQueryService, "f");
+        __classPrivateFieldSet(this, _SkySearchComponent_elRef, elRef, "f");
+        __classPrivateFieldSet(this, _SkySearchComponent_searchAdapter, searchAdapter, "f");
+        __classPrivateFieldSet(this, _SkySearchComponent_changeRef, changeRef, "f");
     }
     ngOnInit() {
-        if (this.searchShouldCollapse()) {
-            this.breakpointSubscription = this.mediaQueryService.subscribe((args) => {
-                this.mediaQueryCallback(args);
-                this.changeRef.detectChanges();
+        if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
+            this.breakpointSubscription = __classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").subscribe((args) => {
+                __classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_mediaQueryCallback).call(this, args);
+                __classPrivateFieldGet(this, _SkySearchComponent_changeRef, "f").detectChanges();
             });
         }
-        this.searchUpdated
+        __classPrivateFieldGet(this, _SkySearchComponent_searchUpdated, "f")
             .asObservable()
             .pipe(debounceTime(this.debounceTime), distinctUntilChanged())
             .subscribe((value) => {
@@ -1724,7 +1756,7 @@ class SkySearchComponent {
         });
     }
     ngOnChanges(changes) {
-        if (this.expandModeBindingChanged(changes)) {
+        if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_expandModeBindingChanged).call(this, changes)) {
             switch (this.expandMode) {
                 case EXPAND_MODE_NONE:
                     this.isCollapsible = false;
@@ -1740,18 +1772,18 @@ class SkySearchComponent {
                     break;
             }
         }
-        if (this.searchBindingChanged(changes)) {
-            this.clearButtonShown = this.searchText && this.searchText !== '';
-            if (this.shouldOpenInput()) {
+        if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchBindingChanged).call(this, changes)) {
+            this.clearButtonShown = !!(this.searchText && this.searchText !== '');
+            if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_shouldOpenInput).call(this)) {
                 this.inputAnimate = INPUT_SHOWN_STATE;
             }
         }
-        this.changeRef.detectChanges();
+        __classPrivateFieldGet(this, _SkySearchComponent_changeRef, "f").detectChanges();
     }
     clearSearchText() {
         this.searchText = '';
         this.clearButtonShown = false;
-        this.searchAdapter.focusInput(this.elRef);
+        __classPrivateFieldGet(this, _SkySearchComponent_searchAdapter, "f").focusInput(__classPrivateFieldGet(this, _SkySearchComponent_elRef, "f"));
         this.searchChange.emit(this.searchText);
         this.searchApply.emit(this.searchText);
         this.searchClear.emit();
@@ -1769,18 +1801,18 @@ class SkySearchComponent {
         if (searchText !== this.searchText) {
             this.searchText = searchText;
         }
-        this.clearButtonShown = searchText && searchText !== '';
+        this.clearButtonShown = !!(searchText && searchText !== '');
         if (searchText && searchText !== '') {
-            this.searchAdapter.selectInput(this.elRef);
+            __classPrivateFieldGet(this, _SkySearchComponent_searchAdapter, "f").selectInput(__classPrivateFieldGet(this, _SkySearchComponent_elRef, "f"));
         }
         this.searchApply.emit(searchText);
     }
     searchTextChanged(searchText) {
         this.searchText = searchText;
-        this.searchUpdated.next(searchText);
+        __classPrivateFieldGet(this, _SkySearchComponent_searchUpdated, "f").next(searchText);
     }
     toggleSearchInput(showInput) {
-        if (this.searchShouldCollapse()) {
+        if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
             if (showInput) {
                 this.inputAnimate = INPUT_SHOWN_STATE;
             }
@@ -1790,24 +1822,24 @@ class SkySearchComponent {
         }
     }
     inputAnimationStart(event) {
-        if (this.searchShouldCollapse()) {
-            this.searchAdapter.startInputAnimation(this.elRef);
+        if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
+            __classPrivateFieldGet(this, _SkySearchComponent_searchAdapter, "f").startInputAnimation(__classPrivateFieldGet(this, _SkySearchComponent_elRef, "f"));
             if (event.toState === INPUT_SHOWN_STATE &&
-                this.mediaQueryService.current === SkyMediaBreakpoints.xs) {
+                __classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.xs) {
                 this.mobileSearchShown = true;
                 this.searchButtonShown = false;
             }
         }
     }
     inputAnimationEnd(event) {
-        if (this.searchShouldCollapse()) {
-            this.searchAdapter.endInputAnimation(this.elRef);
+        if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
+            __classPrivateFieldGet(this, _SkySearchComponent_searchAdapter, "f").endInputAnimation(__classPrivateFieldGet(this, _SkySearchComponent_elRef, "f"));
             this.searchButtonShown =
                 event.toState === INPUT_HIDDEN_STATE &&
-                    this.mediaQueryService.current === SkyMediaBreakpoints.xs;
+                    __classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.xs;
             if ((event.toState === INPUT_HIDDEN_STATE &&
-                this.mediaQueryService.current === SkyMediaBreakpoints.xs) ||
-                this.mediaQueryService.current !== SkyMediaBreakpoints.xs) {
+                __classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.xs) ||
+                __classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current !== SkyMediaBreakpoints.xs) {
                 this.mobileSearchShown = false;
             }
         }
@@ -1816,42 +1848,38 @@ class SkySearchComponent {
         if (this.breakpointSubscription) {
             this.breakpointSubscription.unsubscribe();
         }
-        this.searchUpdated.complete();
-    }
-    searchBindingChanged(changes) {
-        return (changes['searchText'] &&
-            changes['searchText'].previousValue !== changes['searchText'].currentValue);
-    }
-    expandModeBindingChanged(changes) {
-        return (changes['expandMode'] &&
-            changes['expandMode'].previousValue !== changes['expandMode'].currentValue);
-    }
-    shouldOpenInput() {
-        return (this.searchText !== '' &&
-            this.mediaQueryService.current === SkyMediaBreakpoints.xs &&
-            this.searchShouldCollapse());
+        __classPrivateFieldGet(this, _SkySearchComponent_searchUpdated, "f").complete();
     }
-    mediaQueryCallback(args) {
-        if (this.searchShouldCollapse()) {
-            if (args === SkyMediaBreakpoints.xs) {
-                this.inputAnimate = INPUT_HIDDEN_STATE;
-            }
-            else if (this.inputAnimate !== INPUT_SHOWN_STATE) {
-                this.inputAnimate = INPUT_SHOWN_STATE;
-            }
-            else {
-                this.mobileSearchShown = false;
-            }
+}
+_SkySearchComponent_changeRef = new WeakMap(), _SkySearchComponent_elRef = new WeakMap(), _SkySearchComponent_mediaQueryService = new WeakMap(), _SkySearchComponent_searchAdapter = new WeakMap(), _SkySearchComponent_searchUpdated = new WeakMap(), _SkySearchComponent_instances = new WeakSet(), _SkySearchComponent_searchBindingChanged = function _SkySearchComponent_searchBindingChanged(changes) {
+    return (changes['searchText'] &&
+        changes['searchText'].previousValue !== changes['searchText'].currentValue);
+}, _SkySearchComponent_expandModeBindingChanged = function _SkySearchComponent_expandModeBindingChanged(changes) {
+    return (changes['expandMode'] &&
+        changes['expandMode'].previousValue !== changes['expandMode'].currentValue);
+}, _SkySearchComponent_shouldOpenInput = function _SkySearchComponent_shouldOpenInput() {
+    return (this.searchText !== '' &&
+        __classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.xs &&
+        __classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this));
+}, _SkySearchComponent_mediaQueryCallback = function _SkySearchComponent_mediaQueryCallback(args) {
+    if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
+        if (args === SkyMediaBreakpoints.xs) {
+            this.inputAnimate = INPUT_HIDDEN_STATE;
+        }
+        else if (this.inputAnimate !== INPUT_SHOWN_STATE) {
+            this.inputAnimate = INPUT_SHOWN_STATE;
+        }
+        else {
+            this.mobileSearchShown = false;
         }
-        this.changeRef.markForCheck();
-    }
-    searchShouldCollapse() {
-        return ((this.isCollapsible || this.isCollapsible === undefined) &&
-            this.isFullWidth !== true);
     }
-}
+    __classPrivateFieldGet(this, _SkySearchComponent_changeRef, "f").markForCheck();
+}, _SkySearchComponent_searchShouldCollapse = function _SkySearchComponent_searchShouldCollapse() {
+    return ((this.isCollapsible || this.isCollapsible === undefined) &&
+        this.isFullWidth !== true);
+};
 SkySearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySearchComponent, deps: [{ token: i1.SkyMediaQueryService }, { token: i0.ElementRef }, { token: SkySearchAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkySearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkySearchComponent, selector: "sky-search", inputs: { searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n      >\n        <sky-input-box>\n          <input\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n            skyId\n            #searchInput=\"skyId\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\"></sky-icon>\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"close\"\n                iconType=\"skyux\"\n                size=\"sm\"\n              ></sky-icon>\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplate\"\n              ></ng-container>\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      <button\n        *ngIf=\"mobileSearchShown\"\n        class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n        type=\"button\"\n        [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n        (click)=\"toggleSearchInput(false)\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n        </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"double-chevron-left\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"search\" size=\"lg\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"search\"\n    iconType=\"skyux\"\n    size=\"lg\"\n  ></sky-icon>\n</ng-template>\n", styles: ["sky-search .sky-search-container .sky-form-group{margin-bottom:0}sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;padding:5px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{flex-basis:auto;width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"], components: [{ type: i6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, animations: [
+SkySearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkySearchComponent, selector: "sky-search", inputs: { searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n      >\n        <sky-input-box>\n          <input\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n            skyId\n            #searchInput=\"skyId\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\"></sky-icon>\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"close\"\n                iconType=\"skyux\"\n                size=\"sm\"\n              ></sky-icon>\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplate\"\n              ></ng-container>\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      <button\n        *ngIf=\"mobileSearchShown\"\n        class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n        type=\"button\"\n        [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n        (click)=\"toggleSearchInput(false)\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n        </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"double-chevron-left\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"search\" size=\"lg\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"search\"\n    iconType=\"skyux\"\n    size=\"lg\"\n  ></sky-icon>\n</ng-template>\n", styles: ["sky-search .sky-search-container .sky-form-group{margin-bottom:0}sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;padding:5px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{flex-basis:auto;width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"], components: [{ type: i6.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, animations: [
         trigger('inputState', [
             state(INPUT_HIDDEN_STATE, style({
                 opacity: 0,
@@ -1954,6 +1982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class SkyLookupShowMoreNativePickerAsyncContext {
 }
 
+var _SkyLookupShowMoreAsyncModalComponent_instances, _SkyLookupShowMoreAsyncModalComponent_changeDetector, _SkyLookupShowMoreAsyncModalComponent_continuationData, _SkyLookupShowMoreAsyncModalComponent_currentSearchSub, _SkyLookupShowMoreAsyncModalComponent_ngUnsubscribe, _SkyLookupShowMoreAsyncModalComponent_offset, _SkyLookupShowMoreAsyncModalComponent_loadSearchResults, _SkyLookupShowMoreAsyncModalComponent_createInitialSelectedItemsMap, _SkyLookupShowMoreAsyncModalComponent_performSearch, _SkyLookupShowMoreAsyncModalComponent_cancelCurrentSearch;
 /**
  * @internal
  * Internal component to implement the native picker.
@@ -1962,29 +1991,37 @@ class SkyLookupShowMoreAsyncModalComponent {
     constructor(modalInstance, context, changeDetector) {
         this.modalInstance = modalInstance;
         this.context = context;
-        this.changeDetector = changeDetector;
+        _SkyLookupShowMoreAsyncModalComponent_instances.add(this);
         /**
          * @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();
+        this.isSearching = false;
+        this.items = [];
+        this.onlyShowSelected = false;
+        this.repeaterItemTemplate = null;
+        this.selectedIdMap = new Map();
+        _SkyLookupShowMoreAsyncModalComponent_changeDetector.set(this, void 0);
+        _SkyLookupShowMoreAsyncModalComponent_continuationData.set(this, void 0);
+        _SkyLookupShowMoreAsyncModalComponent_currentSearchSub.set(this, void 0);
+        _SkyLookupShowMoreAsyncModalComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyLookupShowMoreAsyncModalComponent_offset.set(this, 0);
+        __classPrivateFieldSet(this, _SkyLookupShowMoreAsyncModalComponent_changeDetector, changeDetector, "f");
     }
     ngOnInit() {
+        this.repeaterItemTemplate = this.context.userConfig.itemTemplate || null;
         this.searchText = this.context.initialSearch;
-        this.createInitialSelectedItemsMap();
-        this.loadSearchResults();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_instances, "m", _SkyLookupShowMoreAsyncModalComponent_createInitialSelectedItemsMap).call(this);
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_instances, "m", _SkyLookupShowMoreAsyncModalComponent_loadSearchResults).call(this);
     }
     ngOnDestroy() {
-        this.cancelCurrentSearch();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_instances, "m", _SkyLookupShowMoreAsyncModalComponent_cancelCurrentSearch).call(this);
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_ngUnsubscribe, "f").complete();
     }
     addButtonClicked() {
         this.addClick.next();
@@ -1997,7 +2034,7 @@ class SkyLookupShowMoreAsyncModalComponent {
             this.selectedIdMap.delete(item[this.context.idProperty]);
         }
         this.updateDisplayedItems();
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_changeDetector, "f").markForCheck();
     }
     itemClick(selectedItem) {
         if (this.context.selectMode === 'single') {
@@ -2026,9 +2063,9 @@ class SkyLookupShowMoreAsyncModalComponent {
         this.updateDisplayedItems();
     }
     searchApplied(searchText) {
-        this.offset = 0;
+        __classPrivateFieldSet(this, _SkyLookupShowMoreAsyncModalComponent_offset, 0, "f");
         this.searchText = searchText;
-        this.loadSearchResults();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_instances, "m", _SkyLookupShowMoreAsyncModalComponent_loadSearchResults).call(this);
     }
     selectAll() {
         this.selectedIdMap = new Map();
@@ -2038,12 +2075,12 @@ class SkyLookupShowMoreAsyncModalComponent {
         this.updateDisplayedItems();
     }
     infiniteScrollEnd() {
-        this.cancelCurrentSearch();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_instances, "m", _SkyLookupShowMoreAsyncModalComponent_cancelCurrentSearch).call(this);
         /* Sanity check - else case would only happen if this was called directly */
         /* istanbul ignore else */
         if (this.hasMoreItems) {
             this.isLoadingMore = true;
-            this.performSearch((result) => {
+            __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_instances, "m", _SkyLookupShowMoreAsyncModalComponent_performSearch).call(this, (result) => {
                 this.items = this.items.concat(result.items);
                 this.updateDisplayedItems();
                 this.isLoadingMore = false;
@@ -2061,38 +2098,6 @@ class SkyLookupShowMoreAsyncModalComponent {
         });
         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]));
@@ -2101,20 +2106,49 @@ class SkyLookupShowMoreAsyncModalComponent {
             this.displayedItems = this.items;
         }
     }
-    cancelCurrentSearch() {
-        if (this.currentSearchSub) {
-            this.currentSearchSub.unsubscribe();
-            this.currentSearchSub = undefined;
-            this.isLoadingMore = false;
-            this.isSearching = false;
-        }
-    }
 }
+_SkyLookupShowMoreAsyncModalComponent_changeDetector = new WeakMap(), _SkyLookupShowMoreAsyncModalComponent_continuationData = new WeakMap(), _SkyLookupShowMoreAsyncModalComponent_currentSearchSub = new WeakMap(), _SkyLookupShowMoreAsyncModalComponent_ngUnsubscribe = new WeakMap(), _SkyLookupShowMoreAsyncModalComponent_offset = new WeakMap(), _SkyLookupShowMoreAsyncModalComponent_instances = new WeakSet(), _SkyLookupShowMoreAsyncModalComponent_loadSearchResults = function _SkyLookupShowMoreAsyncModalComponent_loadSearchResults() {
+    __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_instances, "m", _SkyLookupShowMoreAsyncModalComponent_cancelCurrentSearch).call(this);
+    this.isSearching = true;
+    __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_instances, "m", _SkyLookupShowMoreAsyncModalComponent_performSearch).call(this, (result) => {
+        this.isSearching = false;
+        this.items = result.items;
+    });
+}, _SkyLookupShowMoreAsyncModalComponent_createInitialSelectedItemsMap = function _SkyLookupShowMoreAsyncModalComponent_createInitialSelectedItemsMap() {
+    this.selectedIdMap = new Map(this.context.initialValue.map((item) => [
+        item[this.context.idProperty],
+        item,
+    ]));
+}, _SkyLookupShowMoreAsyncModalComponent_performSearch = function _SkyLookupShowMoreAsyncModalComponent_performSearch(processResults) {
+    __classPrivateFieldSet(this, _SkyLookupShowMoreAsyncModalComponent_currentSearchSub, this.context
+        .searchAsync({
+        displayType: 'modal',
+        offset: __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_offset, "f"),
+        searchText: this.searchText || '',
+        continuationData: __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_continuationData, "f"),
+    })
+        .pipe(take(1))
+        .subscribe((result) => {
+        processResults(result);
+        __classPrivateFieldSet(this, _SkyLookupShowMoreAsyncModalComponent_continuationData, result.continuationData, "f");
+        this.hasMoreItems = result.hasMore || false;
+        __classPrivateFieldSet(this, _SkyLookupShowMoreAsyncModalComponent_offset, this.items.length, "f");
+        this.updateDisplayedItems();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_changeDetector, "f").markForCheck();
+    }), "f");
+}, _SkyLookupShowMoreAsyncModalComponent_cancelCurrentSearch = function _SkyLookupShowMoreAsyncModalComponent_cancelCurrentSearch() {
+    if (__classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_currentSearchSub, "f")) {
+        __classPrivateFieldGet(this, _SkyLookupShowMoreAsyncModalComponent_currentSearchSub, "f").unsubscribe();
+        __classPrivateFieldSet(this, _SkyLookupShowMoreAsyncModalComponent_currentSearchSub, undefined, "f");
+        this.isLoadingMore = false;
+        this.isSearching = false;
+    }
+};
 SkyLookupShowMoreAsyncModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", 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: "13.3.2", 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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\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=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\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: ["disabled", "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 });
+SkyLookupShowMoreAsyncModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\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              repeaterItemTemplate ?? 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=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\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$2.λ37, selector: "sky-toolbar" }, { type: i4$2.λ38, selector: "sky-toolbar-section" }, { type: i4$2.λ39, selector: "sky-toolbar-item" }, { type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i4$2.λ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: ["disabled", "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": i4$1.SkyLibResourcesPipe, "skyLookupItemSelected": SkyLookupItemSelectedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupShowMoreAsyncModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-lookup-show-more-async-modal', changeDetection: ChangeDetectionStrategy.OnPush, 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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\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=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\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"] }]
+            args: [{ selector: 'sky-lookup-show-more-async-modal', changeDetection: ChangeDetectionStrategy.OnPush, 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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\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              repeaterItemTemplate ?? 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=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyLookupShowMoreNativePickerAsyncContext }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
@@ -2124,6 +2158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class SkyLookupShowMoreNativePickerContext {
 }
 
+var _SkyLookupShowMoreModalComponent_changeDetector, _SkyLookupShowMoreModalComponent_itemIndex, _SkyLookupShowMoreModalComponent_ngUnsubscribe;
 /**
  * @internal
  * Internal component to implement the native picker.
@@ -2132,12 +2167,12 @@ class SkyLookupShowMoreModalComponent {
     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.items = [];
         this.dataManagerConfig = {
             sortOptions: [
                 {
@@ -2157,17 +2192,22 @@ class SkyLookupShowMoreModalComponent {
         this.displayedItems = [];
         this.itemsHaveMore = false;
         this.onlyShowSelected = false;
+        this.repeaterItemTemplate = null;
+        this.searchText = '';
         this.selectedItems = [];
-        this.itemIndex = 0;
-        this.ngUnsubscribe = new Subject();
+        _SkyLookupShowMoreModalComponent_changeDetector.set(this, void 0);
+        _SkyLookupShowMoreModalComponent_itemIndex.set(this, 0);
+        _SkyLookupShowMoreModalComponent_ngUnsubscribe.set(this, new Subject());
+        __classPrivateFieldSet(this, _SkyLookupShowMoreModalComponent_changeDetector, changeDetector, "f");
     }
     ngAfterViewInit() {
+        this.repeaterItemTemplate = this.context.userConfig.itemTemplate || null;
         this.searchText = this.context.initialSearch;
         this.addItems();
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_ngUnsubscribe, "f").complete();
     }
     addButtonClicked() {
         this.addClick.next();
@@ -2175,14 +2215,12 @@ class SkyLookupShowMoreModalComponent {
     addItems() {
         if (!this.items || this.items.length === 0) {
             const selectedItems = this.selectedItems.slice();
-            this.items = this.context.items
-                ? this.context.items.map((item) => {
-                    return {
-                        value: item,
-                        selected: false,
-                    };
-                })
-                : [];
+            this.items = this.context.items.map((item) => {
+                return {
+                    value: item,
+                    selected: false,
+                };
+            });
             this.items.forEach((item) => {
                 const isInitialValue = this.context.initialValue === item.value;
                 const initialIsArray = Array.isArray(this.context.initialValue);
@@ -2197,18 +2235,18 @@ class SkyLookupShowMoreModalComponent {
             });
             this.selectedItems = selectedItems;
             this.updateDataState();
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
         }
-        this.itemIndex = this.itemIndex + 10;
+        __classPrivateFieldSet(this, _SkyLookupShowMoreModalComponent_itemIndex, __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f") + 10, "f");
         this.searchItems(this.items).then((searchedItems) => {
-            this.displayedItems = searchedItems.slice(0, this.itemIndex);
-            if (this.itemIndex > searchedItems.length) {
+            this.displayedItems = searchedItems.slice(0, __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f"));
+            if (__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f") > searchedItems.length) {
                 this.itemsHaveMore = false;
             }
             else {
                 this.itemsHaveMore = true;
             }
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
         });
     }
     clearAll() {
@@ -2219,7 +2257,7 @@ class SkyLookupShowMoreModalComponent {
         });
         this.selectedItems = [];
         this.updateDataState();
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
     }
     itemClick(selectedItem) {
         if (this.context.selectMode === 'single') {
@@ -2227,12 +2265,13 @@ class SkyLookupShowMoreModalComponent {
         }
     }
     onItemSelect(newSelectState, itemToSelect) {
+        const items = this.items;
         if (this.context.selectMode === 'single') {
             /* Sanity check - single select mode should only alow for a `true` select state */
             /* istanbul ignore else */
             if (newSelectState) {
                 itemToSelect.selected = true;
-                this.items.forEach((item) => {
+                items.forEach((item) => {
                     if (item.value !== itemToSelect.value) {
                         item.selected = false;
                     }
@@ -2242,20 +2281,20 @@ class SkyLookupShowMoreModalComponent {
                         item.selected = false;
                     }
                 });
-                const itemIndex = this.items.findIndex((item) => item.value === itemToSelect.value);
+                const itemIndex = items.findIndex((item) => item.value === itemToSelect.value);
                 this.selectedItems = [
-                    { index: itemIndex, itemData: this.items[itemIndex].value },
+                    { index: itemIndex, itemData: items[itemIndex].value },
                 ];
             }
         }
         else {
             const selectedItems = this.selectedItems;
-            const allItemsIndex = this.items.findIndex((item) => item.value === itemToSelect.value);
+            const allItemsIndex = items.findIndex((item) => item.value === itemToSelect.value);
             const selectedItemsIndex = selectedItems.findIndex((selectedItem) => selectedItem.index === allItemsIndex);
             if (newSelectState && selectedItemsIndex === -1) {
                 selectedItems.push({
                     index: allItemsIndex,
-                    itemData: this.items[allItemsIndex].value,
+                    itemData: items[allItemsIndex].value,
                 });
             }
             else if (!newSelectState && selectedItemsIndex !== -1) {
@@ -2264,12 +2303,12 @@ class SkyLookupShowMoreModalComponent {
             this.selectedItems = selectedItems;
         }
         this.updateDataState();
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
     }
     searchApplied(searchText) {
         /* istanbul ignore else */
         if (this.searchText !== searchText) {
-            this.itemIndex = 10;
+            __classPrivateFieldSet(this, _SkyLookupShowMoreModalComponent_itemIndex, 10, "f");
         }
         this.searchText = searchText;
         this.updateDataState();
@@ -2296,49 +2335,50 @@ class SkyLookupShowMoreModalComponent {
         }
     }
     selectAll() {
+        const items = this.items;
         const selectedItems = this.selectedItems;
         this.displayedItems.forEach((item) => {
             if (!item.selected) {
                 item.selected = true;
-                const index = this.items.indexOf(item);
-                /* Sanity check */
+                const index = items.indexOf(item);
                 /* istanbul ignore else */
                 if (selectedItems.findIndex((selectedItem) => selectedItem.index === index) < 0) {
                     selectedItems.push({
                         index: index,
-                        itemData: this.items[index].value,
+                        itemData: items[index].value,
                     });
                 }
             }
         });
         this.selectedItems = selectedItems;
         this.updateDataState();
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
     }
     updateDataState() {
+        const items = this.items;
         const selectedItems = this.selectedItems;
-        this.items.forEach((item, index) => {
+        items.forEach((item, index) => {
             item.selected =
                 selectedItems.findIndex((selectedItem) => selectedItem.index === index) !== -1;
         });
-        this.searchItems(this.items).then((searchedItems) => {
+        this.searchItems(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.displayedItems = searchedItems.slice(0, __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f"));
+            if (__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f") > searchedItems.length) {
                 this.itemsHaveMore = false;
             }
             else {
                 this.itemsHaveMore = true;
             }
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
         });
     }
     updateItemData(data) {
         this.context.items = data;
-        this.items = undefined;
-        this.itemIndex = 10;
+        this.items = [];
+        __classPrivateFieldSet(this, _SkyLookupShowMoreModalComponent_itemIndex, 10, "f");
         this.selectedItems.forEach((selectedItem) => {
             this.context.items.forEach((item, index) => {
                 if (selectedItem.itemData === item) {
@@ -2347,14 +2387,15 @@ class SkyLookupShowMoreModalComponent {
             });
         });
         this.addItems();
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
     }
 }
+_SkyLookupShowMoreModalComponent_changeDetector = new WeakMap(), _SkyLookupShowMoreModalComponent_itemIndex = new WeakMap(), _SkyLookupShowMoreModalComponent_ngUnsubscribe = new WeakMap();
 SkyLookupShowMoreModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", 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: "13.3.2", 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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\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=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\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: ["disabled", "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 });
+SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\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              repeaterItemTemplate ?? 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=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\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$2.λ37, selector: "sky-toolbar" }, { type: i4$2.λ38, selector: "sky-toolbar-section" }, { type: i4$2.λ39, selector: "sky-toolbar-item" }, { type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i4$2.λ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: ["disabled", "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": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'skyux-lookup-show-more-modal', changeDetection: ChangeDetectionStrategy.OnPush, 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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\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=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\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"] }]
+            args: [{ selector: 'skyux-lookup-show-more-modal', changeDetection: ChangeDetectionStrategy.OnPush, 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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\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=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\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              repeaterItemTemplate ?? 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=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyLookupShowMoreNativePickerContext }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
@@ -2376,6 +2417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             type: Injectable
         }] });
 
+var _SkyLookupAutocompleteAdapter__descriptorProperty, _SkyLookupAutocompleteAdapter__propertiesToSearch, _SkyLookupAutocompleteAdapter__search;
 /**
  * @internal
  */
@@ -2386,6 +2428,9 @@ class SkyLookupAutocompleteAdapter {
          * returned via an observable.
          */
         this.searchAsync = new EventEmitter();
+        _SkyLookupAutocompleteAdapter__descriptorProperty.set(this, void 0);
+        _SkyLookupAutocompleteAdapter__propertiesToSearch.set(this, void 0);
+        _SkyLookupAutocompleteAdapter__search.set(this, void 0);
     }
     /**
      * Specifies an object property to display in the text input after users
@@ -2393,20 +2438,20 @@ class SkyLookupAutocompleteAdapter {
      * @default "name"
      */
     set descriptorProperty(value) {
-        this._descriptorProperty = value;
+        __classPrivateFieldSet(this, _SkyLookupAutocompleteAdapter__descriptorProperty, value, "f");
     }
     get descriptorProperty() {
-        return this._descriptorProperty || 'name';
+        return __classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__descriptorProperty, "f") || 'name';
     }
     /**
      * Specifies an array of object properties to search.
      * @default ["name"]
      */
     set propertiesToSearch(value) {
-        this._propertiesToSearch = value;
+        __classPrivateFieldSet(this, _SkyLookupAutocompleteAdapter__propertiesToSearch, value, "f");
     }
     get propertiesToSearch() {
-        return this._propertiesToSearch || ['name'];
+        return __classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__propertiesToSearch, "f") || ['name'];
     }
     /**
      * Specifies a function to dynamically manage the data source when users
@@ -2417,16 +2462,17 @@ class SkyLookupAutocompleteAdapter {
      * `search`.
      */
     set search(value) {
-        this._search = value;
+        __classPrivateFieldSet(this, _SkyLookupAutocompleteAdapter__search, value, "f");
     }
     get search() {
-        return (this._search ||
+        return (__classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__search, "f") ||
             skyAutocompleteDefaultSearchFunction({
                 propertiesToSearch: this.propertiesToSearch,
                 searchFilters: this.searchFilters,
             }));
     }
 }
+_SkyLookupAutocompleteAdapter__descriptorProperty = new WeakMap(), _SkyLookupAutocompleteAdapter__propertiesToSearch = new WeakMap(), _SkyLookupAutocompleteAdapter__search = new WeakMap();
 SkyLookupAutocompleteAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupAutocompleteAdapter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 SkyLookupAutocompleteAdapter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", 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: "13.3.2", ngImport: i0, type: SkyLookupAutocompleteAdapter, decorators: [{
@@ -2451,17 +2497,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Output
             }] } });
 
+var _SkyLookupComponent_instances, _SkyLookupComponent_adapter, _SkyLookupComponent_elementRef, _SkyLookupComponent_changeDetector, _SkyLookupComponent_idle, _SkyLookupComponent_markForTokenFocusOnKeyUp, _SkyLookupComponent_modalService, _SkyLookupComponent_ngUnsubscribe, _SkyLookupComponent_openNativePicker, _SkyLookupComponent_resourcesService, _SkyLookupComponent_windowRef, _SkyLookupComponent__autocompleteInputDirective, _SkyLookupComponent__data, _SkyLookupComponent__selectMode, _SkyLookupComponent__tokens, _SkyLookupComponent__value, _SkyLookupComponent_createNativePickerInstance, _SkyLookupComponent_addToSelected, _SkyLookupComponent_addEventListeners, _SkyLookupComponent_removeEventListeners, _SkyLookupComponent_focusInputOnHostClick, _SkyLookupComponent_focusInput, _SkyLookupComponent_onAddButtonComplete, _SkyLookupComponent_parseTokens, _SkyLookupComponent_sendAutocompleteMessage, _SkyLookupComponent_sendTokensMessage, _SkyLookupComponent_updateForSelectMode;
 class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
-    constructor(changeDetector, elementRef, windowRef, ngControl, adapter, modalService, resourcesService, inputBoxHostSvc, themeSvc) {
+    constructor(changeDetector, elementRef, windowRef, adapter, modalService, resourcesService, ngControl, inputBoxHostSvc, themeSvc) {
         super();
-        this.changeDetector = changeDetector;
-        this.elementRef = elementRef;
-        this.windowRef = windowRef;
-        this.adapter = adapter;
-        this.modalService = modalService;
-        this.resourcesService = resourcesService;
         this.inputBoxHostSvc = inputBoxHostSvc;
         this.themeSvc = themeSvc;
+        _SkyLookupComponent_instances.add(this);
         /**
          * Indicates whether to disable the lookup field.
          */
@@ -2481,15 +2523,35 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         this.autocompleteController = new Subject();
         this.isInputFocused = false;
         this.tokensController = new Subject();
-        this.ngUnsubscribe = new Subject();
-        this.idle = new Subject();
-        this.markForTokenFocusOnKeyUp = false;
+        _SkyLookupComponent_adapter.set(this, void 0);
+        _SkyLookupComponent_elementRef.set(this, void 0);
+        _SkyLookupComponent_changeDetector.set(this, void 0);
+        _SkyLookupComponent_idle.set(this, new Subject());
+        _SkyLookupComponent_markForTokenFocusOnKeyUp.set(this, false);
+        _SkyLookupComponent_modalService.set(this, void 0);
+        _SkyLookupComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyLookupComponent_openNativePicker.set(this, void 0);
+        _SkyLookupComponent_resourcesService.set(this, void 0);
+        _SkyLookupComponent_windowRef.set(this, void 0);
+        _SkyLookupComponent__autocompleteInputDirective.set(this, void 0);
+        _SkyLookupComponent__data.set(this, void 0);
+        _SkyLookupComponent__selectMode.set(this, void 0);
+        _SkyLookupComponent__tokens.set(this, void 0);
+        _SkyLookupComponent__value.set(this, void 0);
         // Angular automatically constructs these methods.
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (value) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
-        ngControl.valueAccessor = this;
+        __classPrivateFieldSet(this, _SkyLookupComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyLookupComponent_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyLookupComponent_windowRef, windowRef, "f");
+        __classPrivateFieldSet(this, _SkyLookupComponent_adapter, adapter, "f");
+        __classPrivateFieldSet(this, _SkyLookupComponent_modalService, modalService, "f");
+        __classPrivateFieldSet(this, _SkyLookupComponent_resourcesService, resourcesService, "f");
+        if (ngControl) {
+            ngControl.valueAccessor = this;
+        }
     }
     /**
      * Specifies a data source for the lookup component to search when users
@@ -2498,13 +2560,13 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
      * @default []
      */
     set data(value) {
-        this._data = value;
-        if (this.openNativePicker && this.searchAsync.observers.length === 0) {
-            this.openNativePicker.componentInstance.updateItemData(value);
+        __classPrivateFieldSet(this, _SkyLookupComponent__data, value, "f");
+        if (__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f") && this.searchAsync.observers.length === 0) {
+            __classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f").componentInstance.updateItemData(value);
         }
     }
     get data() {
-        return this._data;
+        return __classPrivateFieldGet(this, _SkyLookupComponent__data, "f") || [];
     }
     /**
      * Specifies whether users can select one option or multiple options.
@@ -2512,61 +2574,61 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
      */
     set selectMode(value) {
         const multipleToSingle = value === 'single' && this.selectMode === 'multiple';
-        this._selectMode = value;
-        this.updateForSelectMode();
+        __classPrivateFieldSet(this, _SkyLookupComponent__selectMode, value, "f");
+        __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_updateForSelectMode).call(this);
         if (multipleToSingle) {
             if (this.value && this.value.length > 1) {
                 // The `setTimeout` is needed to avoid a `ExpressionChangedAfterItHasBeenCheckedError` error in template forms.
                 setTimeout(() => {
                     this.writeValue([this.value[0]]);
-                    this.changeDetector.detectChanges();
+                    __classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").detectChanges();
                 });
             }
         }
     }
     get selectMode() {
-        return this._selectMode || 'multiple';
+        return __classPrivateFieldGet(this, _SkyLookupComponent__selectMode, "f") || 'multiple';
     }
     get tokens() {
-        return this._tokens;
+        return __classPrivateFieldGet(this, _SkyLookupComponent__tokens, "f");
     }
     set tokens(value) {
         // Collapse the tokens into a single token if the user has selected many options.
         if (this.enableShowMore && this.value.length > 5) {
-            this.resourcesService
+            __classPrivateFieldGet(this, _SkyLookupComponent_resourcesService, "f")
                 .getString('skyux_lookup_tokens_summary', this.value.length.toString())
                 .pipe(take(1))
                 .subscribe((label) => {
-                this._tokens = [
+                __classPrivateFieldSet(this, _SkyLookupComponent__tokens, [
                     {
                         value: { [this.descriptorProperty]: label },
                     },
-                ];
-                this.changeDetector.markForCheck();
+                ], "f");
+                __classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
             });
         }
         else {
-            this._tokens = value;
-            this.changeDetector.markForCheck();
+            __classPrivateFieldSet(this, _SkyLookupComponent__tokens, value, "f");
+            __classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
         }
     }
     get value() {
-        return this._value ? this._value : [];
+        return __classPrivateFieldGet(this, _SkyLookupComponent__value, "f") ? __classPrivateFieldGet(this, _SkyLookupComponent__value, "f") : [];
     }
     set value(newValue) {
-        this._value = newValue;
-        if (!this.openNativePicker) {
-            this.tokens = this.parseTokens(newValue);
+        __classPrivateFieldSet(this, _SkyLookupComponent__value, newValue, "f");
+        if (!__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f")) {
+            this.tokens = __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_parseTokens).call(this, newValue);
         }
-        this.onChange(this._value);
+        this.onChange(__classPrivateFieldGet(this, _SkyLookupComponent__value, "f"));
         this.onTouched();
     }
     set autocompleteInputDirective(value) {
-        this._autocompleteInputDirective = value;
-        this.updateForSelectMode();
+        __classPrivateFieldSet(this, _SkyLookupComponent__autocompleteInputDirective, value, "f");
+        __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_updateForSelectMode).call(this);
     }
     get autocompleteInputDirective() {
-        return this._autocompleteInputDirective;
+        return __classPrivateFieldGet(this, _SkyLookupComponent__autocompleteInputDirective, "f");
     }
     ngOnInit() {
         if (this.inputBoxHostSvc) {
@@ -2585,32 +2647,32 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             // This is required for the autocomplete directive to be set after elements
             // are rearranged when switching themes.
             this.themeSvc.settingsChange
-                .pipe(takeUntil(this.ngUnsubscribe))
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyLookupComponent_ngUnsubscribe, "f")))
                 .subscribe(() => {
-                this.changeDetector.markForCheck();
+                __classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
             });
         }
     }
     ngAfterViewInit() {
         if (!this.disabled) {
-            this.addEventListeners();
+            __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_addEventListeners).call(this);
         }
     }
     ngOnDestroy() {
-        this.removeEventListeners();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_removeEventListeners).call(this);
+        __classPrivateFieldGet(this, _SkyLookupComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyLookupComponent_ngUnsubscribe, "f").complete();
         this.tokensController.complete();
     }
     addButtonClicked() {
         this.addClick.emit({
-            itemAdded: (args) => this.onAddButtonComplete(args),
+            itemAdded: (args) => __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_onAddButtonComplete).call(this, args),
         });
     }
     onAutocompleteSelectionChange(change) {
         /* istanbul ignore else */
         if (change.selectedItem) {
-            this.addToSelected(change.selectedItem);
+            __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_addToSelected).call(this, change.selectedItem);
         }
         else if (this.selectMode === 'single') {
             this.writeValue([]);
@@ -2625,22 +2687,22 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         }
         if (this.tokens !== change) {
             if (change.length === 0) {
-                this.focusInput();
+                __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInput).call(this);
             }
             // NOTE: We do this here instead of just using the `value` setter because we need to use the
             // set of tokens returned here for the purposes of setting focus (see `onTokensKeyUp`).
-            this._value = change.map((token) => {
+            __classPrivateFieldSet(this, _SkyLookupComponent__value, change.map((token) => {
                 return token.value;
-            });
+            }), "f");
             this.tokens = change;
-            this.sendAutocompleteMessage(SkyAutocompleteMessageType.RepositionDropdown);
-            this.onChange(this._value);
+            __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendAutocompleteMessage).call(this, SkyAutocompleteMessageType.RepositionDropdown);
+            this.onChange(__classPrivateFieldGet(this, _SkyLookupComponent__value, "f"));
             this.onTouched();
         }
     }
     onTokensFocusIndexOverRange() {
-        this.windowRef.nativeWindow.setTimeout(() => {
-            this.focusInput();
+        __classPrivateFieldGet(this, _SkyLookupComponent_windowRef, "f").nativeWindow.setTimeout(() => {
+            __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInput).call(this);
         });
     }
     onTokensKeyUp(event) {
@@ -2648,15 +2710,15 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         if (this.selectMode !== 'single') {
             switch (event.key) {
                 case 'Backspace':
-                    this.sendTokensMessage(SkyTokensMessageType.RemoveActiveToken);
-                    this.sendTokensMessage(SkyTokensMessageType.FocusPreviousToken);
+                    __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.RemoveActiveToken);
+                    __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.FocusPreviousToken);
                     event.preventDefault();
                     break;
                 case 'Del':
                 case 'Delete':
-                    this.sendTokensMessage(SkyTokensMessageType.RemoveActiveToken);
-                    this.windowRef.nativeWindow.setTimeout(() => {
-                        this.sendTokensMessage(SkyTokensMessageType.FocusActiveToken);
+                    __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.RemoveActiveToken);
+                    __classPrivateFieldGet(this, _SkyLookupComponent_windowRef, "f").nativeWindow.setTimeout(() => {
+                        __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.FocusActiveToken);
                     });
                     event.preventDefault();
                     break;
@@ -2665,7 +2727,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     }
     writeValue(value) {
         this.value = value ? value : [];
-        this.updateForSelectMode();
+        __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_updateForSelectMode).call(this);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2675,22 +2737,23 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     }
     // Allows Angular to disable the input.
     setDisabledState(disabled) {
-        this.removeEventListeners();
+        __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_removeEventListeners).call(this);
         if (!disabled) {
-            this.addEventListeners();
+            __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_addEventListeners).call(this);
         }
         this.disabled = disabled;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
     }
     clearSearchText() {
         this.autocompleteInputDirective.value = undefined;
-        this.autocompleteInputDirective.inputTextValue = undefined;
+        this.autocompleteInputDirective.inputTextValue = '';
     }
     // Handles when to focus on the tokens.
     // Check for empty search text on keydown, before the escape key is fully pressed.
     // (Otherwise, a single character being escaped would register as empty on keyup.)
     // If empty on keydown, set a flag so that the appropriate action can be taken on keyup.
-    inputKeydown(event, value) {
+    inputKeydown(event) {
+        const value = event.target.value;
         /* Sanity check as this should only be called when in multiple select mode */
         /* istanbul ignore else */
         if (this.selectMode !== 'single') {
@@ -2702,10 +2765,10 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
                 case 'Backspace':
                 case 'Left':
                     if (value) {
-                        this.markForTokenFocusOnKeyUp = false;
+                        __classPrivateFieldSet(this, _SkyLookupComponent_markForTokenFocusOnKeyUp, false, "f");
                     }
                     else {
-                        this.markForTokenFocusOnKeyUp = true;
+                        __classPrivateFieldSet(this, _SkyLookupComponent_markForTokenFocusOnKeyUp, true, "f");
                     }
                     break;
                 default:
@@ -2726,8 +2789,8 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
                 case 'Backspace':
                 case 'Left':
                     /* istanbul ignore else */
-                    if (this.markForTokenFocusOnKeyUp) {
-                        this.sendTokensMessage(SkyTokensMessageType.FocusLastToken);
+                    if (__classPrivateFieldGet(this, _SkyLookupComponent_markForTokenFocusOnKeyUp, "f")) {
+                        __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.FocusLastToken);
                         event.preventDefault();
                     }
                     break;
@@ -2741,7 +2804,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         if (this.disabled) {
             return;
         }
-        this.sendAutocompleteMessage(SkyAutocompleteMessageType.CloseDropdown);
+        __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendAutocompleteMessage).call(this, SkyAutocompleteMessageType.CloseDropdown);
         let isValueInTextBox = false;
         if (this.selectMode === 'single') {
             isValueInTextBox =
@@ -2759,65 +2822,22 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             this.openPicker(event.inputValue);
         }
     }
-    createNativePickerInstance(initialSearch) {
-        const initialValue = this.value;
-        const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
-        if (!modalConfig.itemTemplate) {
-            modalConfig.itemTemplate = this.searchResultTemplate;
-        }
-        let contextProviderType;
-        let contextProviderValue;
-        let modalComponentType;
-        if (this.searchAsync.observers.length > 0) {
-            contextProviderType = SkyLookupShowMoreNativePickerAsyncContext;
-            modalComponentType = SkyLookupShowMoreAsyncModalComponent;
-            contextProviderValue = new SkyLookupShowMoreNativePickerAsyncContext();
-            contextProviderValue.idProperty = this.idProperty;
-            contextProviderValue.searchAsync = (args) => {
-                this.searchAsync.emit(args);
-                return args.result;
-            };
-        }
-        else {
-            contextProviderType = SkyLookupShowMoreNativePickerContext;
-            modalComponentType = SkyLookupShowMoreModalComponent;
-            contextProviderValue = new SkyLookupShowMoreNativePickerContext();
-            contextProviderValue.items = this.data;
-            contextProviderValue.search = this.search;
-        }
-        contextProviderValue.descriptorProperty = this.descriptorProperty;
-        contextProviderValue.initialSearch = initialSearch;
-        contextProviderValue.initialValue = initialValue;
-        contextProviderValue.selectMode = this.selectMode;
-        contextProviderValue.showAddButton = this.showAddButton;
-        contextProviderValue.userConfig = modalConfig;
-        return this.modalService.open(modalComponentType, {
-            providers: [
-                {
-                    provide: contextProviderType,
-                    useValue: contextProviderValue,
-                },
-            ],
-            size: 'large',
-            wrapperClass: this.wrapperClass,
-        });
-    }
     openPicker(initialSearch) {
         if (this.showMoreConfig?.customPicker) {
             this.showMoreConfig.customPicker.open({
                 items: this.data,
-                initialSearch: initialSearch,
+                initialSearch,
                 initialValue: this.value,
             });
         }
         else {
             const initialValue = this.value;
-            this.openNativePicker = this.createNativePickerInstance(initialSearch);
-            this.openNativePicker.componentInstance.addClick.subscribe(() => {
+            __classPrivateFieldSet(this, _SkyLookupComponent_openNativePicker, __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_createNativePickerInstance).call(this, initialSearch), "f");
+            __classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f").componentInstance.addClick.subscribe(() => {
                 this.addButtonClicked();
             });
-            this.openNativePicker.closed.subscribe((closeArgs) => {
-                this.openNativePicker = undefined;
+            __classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f").closed.subscribe((closeArgs) => {
+                __classPrivateFieldSet(this, _SkyLookupComponent_openNativePicker, undefined, "f");
                 if (closeArgs.reason === 'save') {
                     let selectedItems = [];
                     if (this.searchAsync.observers.length > 0) {
@@ -2837,131 +2857,165 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
                 else {
                     this.writeValue(initialValue);
                 }
-                this.focusInput();
-                this.changeDetector.markForCheck();
+                __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInput).call(this);
+                __classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
             });
         }
     }
     onSearchAsync(args) {
         this.searchAsync.emit(args);
     }
-    addToSelected(item) {
-        let selectedItems;
-        if (this.selectMode === 'single') {
-            selectedItems = [item];
-        }
-        else {
-            selectedItems = this.value;
-            // If items have a unique identifier, don't allow the same item to be added twice.
-            if (!this.idProperty ||
-                !this.value.some((existingItem) => existingItem[this.idProperty] === item[this.idProperty])) {
-                selectedItems.push(item);
-            }
-            this.clearSearchText();
-        }
-        this.writeValue(selectedItems);
-    }
-    addEventListeners() {
-        this.idle = new Subject();
-        this.focusInputOnHostClick();
-    }
-    removeEventListeners() {
-        this.idle.next();
-        this.idle.complete();
+}
+_SkyLookupComponent_adapter = new WeakMap(), _SkyLookupComponent_elementRef = new WeakMap(), _SkyLookupComponent_changeDetector = new WeakMap(), _SkyLookupComponent_idle = new WeakMap(), _SkyLookupComponent_markForTokenFocusOnKeyUp = new WeakMap(), _SkyLookupComponent_modalService = new WeakMap(), _SkyLookupComponent_ngUnsubscribe = new WeakMap(), _SkyLookupComponent_openNativePicker = new WeakMap(), _SkyLookupComponent_resourcesService = new WeakMap(), _SkyLookupComponent_windowRef = new WeakMap(), _SkyLookupComponent__autocompleteInputDirective = new WeakMap(), _SkyLookupComponent__data = new WeakMap(), _SkyLookupComponent__selectMode = new WeakMap(), _SkyLookupComponent__tokens = new WeakMap(), _SkyLookupComponent__value = new WeakMap(), _SkyLookupComponent_instances = new WeakSet(), _SkyLookupComponent_createNativePickerInstance = function _SkyLookupComponent_createNativePickerInstance(initialSearch) {
+    const initialValue = this.value;
+    const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
+    if (!modalConfig.itemTemplate) {
+        modalConfig.itemTemplate = this.searchResultTemplate;
+    }
+    let contextProviderType;
+    let contextProviderValue;
+    let modalComponentType;
+    if (this.searchAsync.observers.length > 0) {
+        contextProviderType = SkyLookupShowMoreNativePickerAsyncContext;
+        modalComponentType = SkyLookupShowMoreAsyncModalComponent;
+        contextProviderValue = new SkyLookupShowMoreNativePickerAsyncContext();
+        contextProviderValue.idProperty = this.idProperty;
+        contextProviderValue.searchAsync = (args) => {
+            this.searchAsync.emit(args);
+            return args.result;
+        };
     }
-    focusInputOnHostClick() {
-        let hostElement = !this.inputBoxHostSvc
-            ? this.elementRef.nativeElement
+    else {
+        contextProviderType = SkyLookupShowMoreNativePickerContext;
+        modalComponentType = SkyLookupShowMoreModalComponent;
+        contextProviderValue = new SkyLookupShowMoreNativePickerContext();
+        contextProviderValue.items = this.data;
+        contextProviderValue.search = this.search;
+    }
+    contextProviderValue.descriptorProperty = this.descriptorProperty;
+    contextProviderValue.initialSearch = initialSearch;
+    contextProviderValue.initialValue = initialValue;
+    contextProviderValue.selectMode = this.selectMode;
+    contextProviderValue.showAddButton = this.showAddButton;
+    contextProviderValue.userConfig = modalConfig;
+    return __classPrivateFieldGet(this, _SkyLookupComponent_modalService, "f").open(modalComponentType, {
+        providers: [
+            {
+                provide: contextProviderType,
+                useValue: contextProviderValue,
+            },
+        ],
+        size: 'large',
+        wrapperClass: this.wrapperClass,
+    });
+}, _SkyLookupComponent_addToSelected = function _SkyLookupComponent_addToSelected(item) {
+    let selectedItems;
+    if (this.selectMode === 'single') {
+        selectedItems = [item];
+    }
+    else {
+        selectedItems = this.value;
+        const idProperty = this.idProperty || '';
+        // If items have a unique identifier, don't allow the same item to be added twice.
+        if (!this.idProperty ||
+            !this.value.some((existingItem) => existingItem[idProperty] === item[idProperty])) {
+            selectedItems.push(item);
+        }
+        this.clearSearchText();
+    }
+    this.writeValue(selectedItems);
+}, _SkyLookupComponent_addEventListeners = function _SkyLookupComponent_addEventListeners() {
+    __classPrivateFieldSet(this, _SkyLookupComponent_idle, new Subject(), "f");
+    __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInputOnHostClick).call(this);
+}, _SkyLookupComponent_removeEventListeners = function _SkyLookupComponent_removeEventListeners() {
+    __classPrivateFieldGet(this, _SkyLookupComponent_idle, "f").next();
+    __classPrivateFieldGet(this, _SkyLookupComponent_idle, "f").complete();
+}, _SkyLookupComponent_focusInputOnHostClick = function _SkyLookupComponent_focusInputOnHostClick() {
+    let hostElement = !this.inputBoxHostSvc
+        ? __classPrivateFieldGet(this, _SkyLookupComponent_elementRef, "f").nativeElement
+        : this.lookupWrapperRef.nativeElement;
+    const documentObj = __classPrivateFieldGet(this, _SkyLookupComponent_windowRef, "f").nativeWindow.document;
+    // Handles focusing the input when the host is clicked.
+    // The input should NOT be focused if other elements (tokens, etc.)
+    // are currently focused or being tabbed through.
+    fromEvent(documentObj, 'mousedown')
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyLookupComponent_idle, "f")))
+        .subscribe((event) => {
+        hostElement = !this.inputBoxHostSvc
+            ? __classPrivateFieldGet(this, _SkyLookupComponent_elementRef, "f").nativeElement
             : this.lookupWrapperRef.nativeElement;
-        const documentObj = this.windowRef.nativeWindow.document;
-        // Handles focusing the input when the host is clicked.
-        // The input should NOT be focused if other elements (tokens, etc.)
-        // are currently focused or being tabbed through.
-        fromEvent(documentObj, 'mousedown')
-            .pipe(takeUntil(this.idle))
-            .subscribe((event) => {
-            hostElement = !this.inputBoxHostSvc
-                ? this.elementRef.nativeElement
-                : this.lookupWrapperRef.nativeElement;
-            this.isInputFocused = hostElement.contains(event.target);
-            this.changeDetector.markForCheck();
-        });
-        fromEvent(documentObj, 'focusin')
-            .pipe(takeUntil(this.idle))
-            .subscribe((event) => {
-            hostElement = !this.inputBoxHostSvc
-                ? this.elementRef.nativeElement
-                : this.lookupWrapperRef.nativeElement;
-            this.isInputFocused = hostElement.contains(event.target);
-            this.changeDetector.markForCheck();
-        });
-        fromEvent(hostElement, 'mouseup')
-            .pipe(takeUntil(this.idle))
-            .subscribe(() => {
-            const classList = documentObj.activeElement.classList;
-            if (!classList || !classList.contains('sky-token')) {
-                this.focusInput();
-            }
-        });
-    }
-    focusInput() {
-        this.adapter.focusInput(this.lookupWrapperRef);
-    }
-    onAddButtonComplete(args) {
-        if (args.data) {
-            this.data = args.data;
+        this.isInputFocused = hostElement.contains(event.target);
+        __classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
+    });
+    fromEvent(documentObj, 'focusin')
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyLookupComponent_idle, "f")))
+        .subscribe((event) => {
+        hostElement = !this.inputBoxHostSvc
+            ? __classPrivateFieldGet(this, _SkyLookupComponent_elementRef, "f").nativeElement
+            : this.lookupWrapperRef.nativeElement;
+        this.isInputFocused = hostElement.contains(event.target);
+        __classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
+    });
+    fromEvent(hostElement, 'mouseup')
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyLookupComponent_idle, "f")))
+        .subscribe(() => {
+        const classList = documentObj.activeElement.classList;
+        if (!classList || !classList.contains('sky-token')) {
+            __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInput).call(this);
+        }
+    });
+}, _SkyLookupComponent_focusInput = function _SkyLookupComponent_focusInput() {
+    __classPrivateFieldGet(this, _SkyLookupComponent_adapter, "f").focusInput(this.lookupWrapperRef);
+}, _SkyLookupComponent_onAddButtonComplete = function _SkyLookupComponent_onAddButtonComplete(args) {
+    if (args.data) {
+        this.data = args.data;
+    }
+    if (this.data.indexOf(args.item) >= 0) {
+        if (__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f")) {
+            __classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f")
+                .componentInstance.onItemSelect(true, { value: args.item, selected: false });
         }
-        if (this.data.indexOf(args.item) >= 0) {
-            if (this.openNativePicker) {
-                this.openNativePicker
-                    .componentInstance.onItemSelect(true, { value: args.item, selected: false });
+        else {
+            let newValue = this.value;
+            if (this.selectMode === 'multiple') {
+                newValue = this.value.concat(args.item);
             }
             else {
-                let newValue = this.value;
-                if (this.selectMode === 'multiple') {
-                    newValue = this.value.concat(args.item);
-                }
-                else {
-                    newValue = [args.item];
-                }
-                this.writeValue(newValue);
+                newValue = [args.item];
             }
+            this.writeValue(newValue);
         }
     }
-    parseTokens(data) {
-        return data.map((item) => {
-            return {
-                value: item,
-            };
-        });
-    }
-    sendAutocompleteMessage(type) {
-        this.autocompleteController.next({ type });
-    }
-    sendTokensMessage(type) {
-        this.tokensController.next({ type });
-    }
-    updateForSelectMode() {
-        if (this.autocompleteInputDirective) {
-            if (this.selectMode === 'single') {
-                this.autocompleteInputDirective.value = this.value && this.value[0];
-            }
-            else {
-                this.clearSearchText();
-            }
+}, _SkyLookupComponent_parseTokens = function _SkyLookupComponent_parseTokens(data) {
+    return data.map((item) => {
+        return {
+            value: item,
+        };
+    });
+}, _SkyLookupComponent_sendAutocompleteMessage = function _SkyLookupComponent_sendAutocompleteMessage(type) {
+    this.autocompleteController.next({ type });
+}, _SkyLookupComponent_sendTokensMessage = function _SkyLookupComponent_sendTokensMessage(type) {
+    this.tokensController.next({ type });
+}, _SkyLookupComponent_updateForSelectMode = function _SkyLookupComponent_updateForSelectMode() {
+    if (this.autocompleteInputDirective) {
+        if (this.selectMode === 'single') {
+            this.autocompleteInputDirective.value = this.value && this.value[0];
+        }
+        else {
+            this.clearSearchText();
         }
     }
-}
-SkyLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAppWindowRef }, { token: i8.NgControl, optional: true, self: true }, { token: SkyLookupAdapterService }, { token: i1$1.SkyModalService }, { token: i5.SkyLibResourcesService }, { token: i6.SkyInputBoxHostService, optional: true }, { token: i7.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          <sky-tokens\n            *ngIf=\"selectMode === 'multiple'\"\n            class=\"sky-lookup-tokens\"\n            [disabled]=\"disabled\"\n            [displayWith]=\"descriptorProperty\"\n            [focusable]=\"false\"\n            [messageStream]=\"tokensController\"\n            [trackWith]=\"idProperty\"\n            [tokens]=\"tokens\"\n            (keyup)=\"onTokensKeyUp($event)\"\n            (tokensChange)=\"onTokensChange($event)\"\n            (tokenSelected)=\"enableShowMore ? openPicker(undefined) : undefined\"\n            (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event, $event.target.value)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n          </sky-tokens>\n          <div\n            *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"searchIconTemplateRef\"\n          ></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n  >\n    <sky-icon\n      *skyThemeIf=\"'default'\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      iconType=\"skyux\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n  </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"], components: [{ type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { type: i4.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+};
+SkyLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAppWindowRef }, { token: SkyLookupAdapterService }, { token: i1$1.SkyModalService }, { token: i4$1.SkyLibResourcesService }, { token: i8.NgControl, optional: true, self: true }, { token: i6.SkyInputBoxHostService, optional: true }, { token: i7.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          <sky-tokens\n            *ngIf=\"selectMode === 'multiple'\"\n            class=\"sky-lookup-tokens\"\n            [disabled]=\"disabled\"\n            [displayWith]=\"descriptorProperty\"\n            [focusable]=\"false\"\n            [messageStream]=\"tokensController\"\n            [trackWith]=\"idProperty\"\n            [tokens]=\"tokens\"\n            (keyup)=\"onTokensKeyUp($event)\"\n            (tokensChange)=\"onTokensChange($event)\"\n            (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n            (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n          </sky-tokens>\n          <div\n            *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"searchIconTemplateRef\"\n          ></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n  >\n    <sky-icon\n      *skyThemeIf=\"'default'\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      iconType=\"skyux\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n  </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"], components: [{ type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { type: i4.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          <sky-tokens\n            *ngIf=\"selectMode === 'multiple'\"\n            class=\"sky-lookup-tokens\"\n            [disabled]=\"disabled\"\n            [displayWith]=\"descriptorProperty\"\n            [focusable]=\"false\"\n            [messageStream]=\"tokensController\"\n            [trackWith]=\"idProperty\"\n            [tokens]=\"tokens\"\n            (keyup)=\"onTokensKeyUp($event)\"\n            (tokensChange)=\"onTokensChange($event)\"\n            (tokenSelected)=\"enableShowMore ? openPicker(undefined) : undefined\"\n            (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event, $event.target.value)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n          </sky-tokens>\n          <div\n            *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"searchIconTemplateRef\"\n          ></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n  >\n    <sky-icon\n      *skyThemeIf=\"'default'\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      iconType=\"skyux\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n  </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAppWindowRef }, { type: i8.NgControl, decorators: [{
+            args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          <sky-tokens\n            *ngIf=\"selectMode === 'multiple'\"\n            class=\"sky-lookup-tokens\"\n            [disabled]=\"disabled\"\n            [displayWith]=\"descriptorProperty\"\n            [focusable]=\"false\"\n            [messageStream]=\"tokensController\"\n            [trackWith]=\"idProperty\"\n            [tokens]=\"tokens\"\n            (keyup)=\"onTokensKeyUp($event)\"\n            (tokensChange)=\"onTokensChange($event)\"\n            (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n            (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n          </sky-tokens>\n          <div\n            *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"searchIconTemplateRef\"\n          ></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n  >\n    <sky-icon\n      *skyThemeIf=\"'default'\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      iconType=\"skyux\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n  </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAppWindowRef }, { type: SkyLookupAdapterService }, { type: i1$1.SkyModalService }, { type: i4$1.SkyLibResourcesService }, { type: i8.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: SkyLookupAdapterService }, { type: i1$1.SkyModalService }, { type: i5.SkyLibResourcesService }, { type: i6.SkyInputBoxHostService, decorators: [{
+                }] }, { type: i6.SkyInputBoxHostService, decorators: [{
                     type: Optional
                 }] }, { type: i7.SkyThemeService, decorators: [{
                     type: Optional