@skyux/lookup 8.7.2 → 9.0.0-alpha.1

package/fesm2022/skyux-lookup.mjs

@@ -0,0 +1,3707 @@
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, forwardRef, Directive, Input, Pipe, Injectable, EventEmitter, TemplateRef, ElementRef, Component, ChangeDetectionStrategy, Optional, Inject, Output, ContentChild, ViewChild, InjectionToken, inject, ViewEncapsulation, Self } from '@angular/core';
+import * as i5$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgModel, UntypedFormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@skyux/core';
+import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyIdModule, SkyNumericModule, SkyOverlayModule, SkyMediaBreakpoints, SkyViewkeeperModule } from '@skyux/core';
+import * as i6 from '@skyux/indicators';
+import { SkyTextHighlightModule, SkyIconModule, SkyWaitModule, SkyTokensMessageType, SkyTokensModule } from '@skyux/indicators';
+import * as i8 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import * as i4$1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { Subject, fromEvent, of, from } from 'rxjs';
+import { takeUntil, debounceTime, switchMap, delay, take, map, distinctUntilChanged } from 'rxjs/operators';
+import * as i5 from '@skyux/forms';
+import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
+import 'intl-tel-input';
+import * as i10 from '@skyux/layout';
+import { SkyToolbarModule } from '@skyux/layout';
+import * as i7 from '@skyux/lists';
+import { SkyInfiniteScrollModule, SkyRepeaterModule } from '@skyux/lists';
+import * as i1$1 from '@skyux/modals';
+import { SkyModalModule } from '@skyux/modals';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-lookup' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_autocomplete_add: { message: 'New' },
+        skyux_autocomplete_no_results: { message: 'No matches found' },
+        skyux_autocomplete_show_all: { message: 'Show all' },
+        skyux_autocomplete_show_all_count: { message: 'Show all {0}' },
+        skyux_autocomplete_show_matches_count: { message: 'Show matches ({0})' },
+        skyux_country_field_search_placeholder: { message: 'Search for a country' },
+        skyux_lookup_search_button_show_more: {
+            message: 'Show all search results',
+        },
+        skyux_lookup_show_more_add: { message: 'New' },
+        skyux_lookup_show_more_select_all_button_title: { message: 'Select all' },
+        skyux_lookup_show_more_clear_all_button_title: { message: 'Clear all' },
+        skyux_lookup_show_more_show_selected_option_title: {
+            message: 'Show only selected items',
+        },
+        skyux_lookup_show_more_cancel: { message: 'Cancel' },
+        skyux_lookup_show_more_modal_title_single: { message: 'Select an option' },
+        skyux_lookup_show_more_modal_title_multiple: { message: 'Select options' },
+        skyux_lookup_show_more_no_results: { message: 'No matches found' },
+        skyux_lookup_show_more_select: { message: 'Select' },
+        skyux_lookup_tokens_summary: { message: '{0} items selected' },
+        skyux_search_dismiss: { message: 'Dismiss search' },
+        skyux_search_label: { message: 'Search items' },
+        skyux_search_open: { message: 'Open search' },
+        skyux_search_placeholder: { message: 'Find in this list' },
+    },
+};
+class SkyLookupResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyLookupResourcesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyLookupResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyLookupResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+const SKY_AUTOCOMPLETE_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SkyAutocompleteInputDirective),
+    multi: true,
+};
+const SKY_AUTOCOMPLETE_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SkyAutocompleteInputDirective),
+    multi: true,
+};
+class SkyAutocompleteInputDirective {
+    /**
+     * The value for the `autocomplete` attribute on the form input.
+     * @default "off"
+     */
+    set autocompleteAttribute(value) {
+        if (!value) {
+            this.#_autocompleteAttribute = 'off';
+        }
+        else {
+            this.#_autocompleteAttribute = value;
+        }
+        this.#renderer.setAttribute(this.#elementRef.nativeElement, 'autocomplete', this.#_autocompleteAttribute);
+    }
+    get autocompleteAttribute() {
+        return this.#_autocompleteAttribute || 'off';
+    }
+    /**
+     * Whether to disable the autocomplete field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
+     * To set the disabled state on reactive forms, use the `FormControl` instead.
+     * @default false
+     */
+    set disabled(value) {
+        this.#_disabled = value ?? false;
+        this.#renderer.setProperty(this.#elementRef.nativeElement, 'disabled', value);
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    get blur() {
+        return this.#blurObs;
+    }
+    get displayWith() {
+        return this.#_displayWith;
+    }
+    set displayWith(value) {
+        this.#_displayWith = value;
+        this.inputTextValue = this.#getValueByKey();
+    }
+    get focus() {
+        return this.#focusObs;
+    }
+    get inputTextValue() {
+        return this.#elementRef.nativeElement.value;
+    }
+    set inputTextValue(value) {
+        this.#elementRef.nativeElement.value = value || '';
+    }
+    get textChanges() {
+        return this.#textChangesObs;
+    }
+    get value() {
+        return this.#_value;
+    }
+    set value(value) {
+        const isNewValue = value !== this.#_value;
+        /* istanbul ignore else */
+        if (isNewValue) {
+            this.#_value = value;
+            this.inputTextValue = this.#getValueByKey();
+            this.onChange(this.#_value);
+            // 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 (this.#isFirstChange && this.#_value) {
+                this.#isFirstChange = false;
+            }
+        }
+    }
+    #blur;
+    #blurObs;
+    #control;
+    #elementRef;
+    #focus;
+    #focusObs;
+    #isFirstChange;
+    #ngUnsubscribe;
+    #renderer;
+    #textChanges;
+    #textChangesObs;
+    #_autocompleteAttribute;
+    #_disabled;
+    #_displayWith;
+    #_value;
+    constructor(elementRef, renderer) {
+        this.#isFirstChange = true;
+        this.#ngUnsubscribe = new Subject();
+        this.#_disabled = false;
+        this.#_displayWith = '';
+        // istanbul ignore next
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onValidatorChange = () => { };
+        this.#elementRef = elementRef;
+        this.#renderer = renderer;
+        this.#blur = new Subject();
+        this.#focus = new Subject();
+        this.#textChanges = new Subject();
+        this.#blurObs = this.#blur.asObservable();
+        this.#focusObs = this.#focus.asObservable();
+        this.#textChangesObs = this.#textChanges.asObservable();
+    }
+    ngOnInit() {
+        const element = this.#elementRef.nativeElement;
+        this.#setAttributes(this.#elementRef);
+        fromEvent(element, 'input')
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            if (!this.disabled) {
+                this.#textChanges.next({
+                    value: this.#elementRef.nativeElement.value,
+                });
+            }
+        });
+        fromEvent(element, 'blur')
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            if (!this.disabled) {
+                this.#blur.next();
+            }
+        });
+        fromEvent(element, 'focus')
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            if (!this.disabled) {
+                this.#focus.next();
+            }
+        });
+        fromEvent(element, 'change')
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            /* istanbul ignore else */
+            if (!this.disabled) {
+                this.#isFirstChange = false;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.#blur.complete();
+        this.#textChanges.complete();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    restoreInputTextValueToPreviousState() {
+        const modelValue = this.#getValueByKey();
+        // If the search field contains text, make sure that the value
+        // matches the selected descriptor key.
+        if (this.inputTextValue !== modelValue) {
+            this.inputTextValue = modelValue;
+        }
+        this.onTouched();
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    validate(control) {
+        if (!this.#control) {
+            this.#control = control;
+        }
+        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);
+        }
+        else {
+            this.#renderer.removeAttribute(this.#elementRef.nativeElement, 'aria-activedescendant');
+        }
+    }
+    setAriaOwns(overlayId) {
+        if (overlayId) {
+            this.#renderer.setAttribute(this.#elementRef.nativeElement, 'aria-owns', overlayId);
+        }
+        else {
+            this.#renderer.removeAttribute(this.#elementRef.nativeElement, 'aria-owns');
+        }
+    }
+    // Angular automatically constructs these methods.
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange(value) { }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched() { }
+    #setAttributes(elementRef) {
+        const element = elementRef.nativeElement;
+        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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", ngImport: i0, type: SkyAutocompleteInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[skyAutocomplete], textarea[skyAutocomplete]',
+                    providers: [SKY_AUTOCOMPLETE_VALUE_ACCESSOR, SKY_AUTOCOMPLETE_VALIDATOR],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { autocompleteAttribute: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyAutocompleteSearchAsyncDisabledPipe {
+    transform(searchAsync, searchAsyncDisabled) {
+        return searchAsyncDisabled || searchAsync.observers.length === 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteSearchAsyncDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteSearchAsyncDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyAutocompleteSearchAsyncDisabled',
+                }]
+        }] });
+
+/**
+ * Removes diacritical characters from strings and replaces them with their normalized equivalent.
+ * For example: è becomes e, Å becomes A.
+ */
+function normalizeDiacritics(value) {
+    return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+
+/**
+ * @internal
+ */
+class SkyAutocompleteAdapterService {
+    #coreAdapterService;
+    #renderer;
+    constructor(coreAdapterService, rendererFactory) {
+        this.#coreAdapterService = coreAdapterService;
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    /**
+     * Adds the className for the provided element.
+     */
+    addCSSClass(element, className) {
+        /* Sanity check */
+        /* istanbul ignore else */
+        if (element) {
+            this.#renderer.addClass(element, className);
+        }
+    }
+    getOverlayFocusableElements(overlay) {
+        return this.#coreAdapterService.getFocusableChildren(
+        /* Sanity check - calling function also has null check */
+        /* istanbul ignore next */
+        overlay?.componentRef.location.nativeElement, { ignoreTabIndex: true });
+    }
+    /**
+     * Removes the className for the provided element.
+     */
+    removeCSSClass(element, className) {
+        /* Sanity check */
+        /* istanbul ignore else */
+        if (element) {
+            this.#renderer.removeClass(element, className);
+        }
+    }
+    setDropdownWidth(elementRef, dropdownRef, isInputBox) {
+        const parentElement = isInputBox
+            ? elementRef.nativeElement.closest('.sky-input-box')
+            : elementRef.nativeElement;
+        if (parentElement) {
+            const width = parentElement.getBoundingClientRect().width;
+            this.#renderer.setStyle(dropdownRef.nativeElement, 'width', `${width}px`);
+        }
+    }
+    /**
+     * Sets the `tabIndex` of the `element` to the provided `tabIndex`.
+     */
+    setTabIndex(element, tabIndex) {
+        element.tabIndex = tabIndex;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteAdapterService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
+
+function skyAutocompleteDefaultSearchFunction(options) {
+    const filterData = function (searchText, data, args) {
+        return data.filter((item) => {
+            if (!options.searchFilters || !options.searchFilters.length) {
+                return true;
+            }
+            // Find the first failing filter (we can skip the others if one fails).
+            const failedFilter = options.searchFilters.find((filter) => {
+                return !filter.call({}, searchText, item, args);
+            });
+            return failedFilter === undefined;
+        });
+    };
+    const search = function (searchText, data, args) {
+        const results = [];
+        /* Sanity check - autocomplete will not call search with empty search text */
+        /* istanbul ignore if */
+        if (!searchText) {
+            return results;
+        }
+        const searchTextNormalized = normalizeDiacritics(searchText).toUpperCase();
+        const filteredData = filterData(searchText, data, args);
+        for (let i = 0, n = filteredData.length; i < n; i++) {
+            const result = filteredData[i];
+            const isMatch = options.propertiesToSearch.find((property) => {
+                let value = (result[property] || '').toString();
+                value = normalizeDiacritics(value).toUpperCase();
+                return value.indexOf(searchTextNormalized) > -1;
+            });
+            if (isMatch) {
+                results.push(result);
+            }
+        }
+        return results;
+    };
+    return search;
+}
+
+/**
+ * @internal
+ */
+var SkyAutocompleteMessageType;
+(function (SkyAutocompleteMessageType) {
+    /**
+     * Closes the dropdown.
+     */
+    SkyAutocompleteMessageType[SkyAutocompleteMessageType["CloseDropdown"] = 0] = "CloseDropdown";
+    /**
+     * Repositions the dropdown.
+     */
+    SkyAutocompleteMessageType[SkyAutocompleteMessageType["RepositionDropdown"] = 1] = "RepositionDropdown";
+})(SkyAutocompleteMessageType || (SkyAutocompleteMessageType = {}));
+
+let uniqueId$1 = 0;
+class SkyAutocompleteComponent {
+    /**
+     * The static data source for the autocomplete component to search
+     * when users enter text. For a dynamic data source such as an array that
+     * changes due to server calls, use `search` or `searchAsync` instead.
+     */
+    set data(value) {
+        this.#_data = value ?? [];
+    }
+    get data() {
+        return this.#_data;
+    }
+    /**
+     * How many milliseconds to wait before searching while users
+     * enter text in the autocomplete field.
+     * @default 0
+     */
+    set debounceTime(value) {
+        this.#_debounceTime = value ?? 0;
+    }
+    get debounceTime() {
+        return this.#_debounceTime;
+    }
+    /**
+     * The object property to display in the text input after users
+     * select an item in the dropdown list.
+     * @default "name"
+     */
+    set descriptorProperty(value) {
+        this.#_descriptorProperty = value || 'name';
+    }
+    get descriptorProperty() {
+        return this.#_descriptorProperty;
+    }
+    /**
+     * The observable of `SkyAutocompleteMessage` that can close the dropdown.
+     * @internal
+     */
+    set messageStream(value) {
+        this.#_messageStream = value ?? new Subject();
+        this.#initMessageStream();
+    }
+    get messageStream() {
+        return this.#_messageStream;
+    }
+    /**
+     * The object properties to search.
+     * @default ["name"]
+     * @deprecated We recommend against using this property. To search specific properties, use the `searchAsync` event instead.
+     */
+    set propertiesToSearch(value) {
+        this.#_propertiesToSearch = value ?? ['name'];
+        this.#updateDefaultSearchOptions();
+    }
+    get propertiesToSearch() {
+        return this.#_propertiesToSearch;
+    }
+    /**
+     * The function that dynamically manages the data source when users
+     * change the text in the autocomplete field. The search function must return
+     * an array or a promise of an array. The `search` property is particularly
+     * useful when the data source does not live in the source code.
+     * @deprecated We recommend against using this property. To call a remote data source, use the `searchAsync` event instead.
+     */
+    set search(value) {
+        this.#_search = value;
+        this.searchOrDefault =
+            value ||
+                skyAutocompleteDefaultSearchFunction({
+                    propertiesToSearch: this.propertiesToSearch,
+                    searchFilters: this.searchFilters,
+                });
+    }
+    get search() {
+        return this.#_search;
+    }
+    /**
+     * The minimum number of characters that users must enter before
+     * the autocomplete component searches the data source and displays search
+     * results in the dropdown list.
+     * @default 1
+     */
+    set searchTextMinimumCharacters(value) {
+        this.#_searchTextMinimumCharacters = value && value > 0 ? value : 1;
+    }
+    get searchTextMinimumCharacters() {
+        return this.#_searchTextMinimumCharacters;
+    }
+    /**
+     * The array of functions to call against each search result in order
+     * to filter the search results when using the default search function. When
+     * using the `search` property to specify a custom search function, you must
+     * manually apply filters inside that function. The function must return `true`
+     * or `false` for each result to indicate whether to display it in the dropdown list.
+     * @deprecated We recommend against using this property. To filter results, use the `searchAsync` event instead.
+     */
+    set searchFilters(value) {
+        this.#_searchFilters = value;
+        this.#updateDefaultSearchOptions();
+    }
+    get searchFilters() {
+        return this.#_searchFilters;
+    }
+    /**
+     * The maximum number of search results to display in the dropdown list.
+     * By default, the component displays all matching results.
+     */
+    set searchResultsLimit(value) {
+        this.#_searchResultsLimit = value || 0;
+    }
+    get searchResultsLimit() {
+        return this.#_searchResultsLimit;
+    }
+    //#endregion
+    //#region template_properties
+    get searchResults() {
+        return this.#_searchResults || [];
+    }
+    set searchResults(value) {
+        this.#_searchResults = value;
+    }
+    get highlightText() {
+        return this.#_highlightText || [];
+    }
+    set highlightText(value) {
+        this.#_highlightText = value;
+    }
+    get showActionsArea() {
+        return !!this.showAddButton || !!this.enableShowMore;
+    }
+    //#endregion
+    set 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 (this.#_inputDirective !== 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) => {
+                this.isSearchingAsync = true;
+                return of(change);
+            }))
+                .subscribe((change) => {
+                this.#searchTextChanged(change.value);
+            });
+            // We delay this listener by 25ms to give things watching the value time to respond (such as the search button).
+            this.#_inputDirective.blur
+                .pipe(delay(25), takeUntil(this.#inputDirectiveUnsubscribe))
+                .subscribe(() => {
+                directive.restoreInputTextValueToPreviousState();
+                this.#closeDropdown();
+                this.#cancelCurrentSearch();
+                directive.onTouched();
+                this.#hasFocus = false;
+            });
+            this.#_inputDirective.focus
+                .pipe(takeUntil(this.#inputDirectiveUnsubscribe))
+                .subscribe(() => {
+                this.#hasFocus = true;
+                if (this.showActionsArea) {
+                    this.#openDropdown();
+                }
+            });
+        }
+    }
+    get inputDirective() {
+        return this.#_inputDirective;
+    }
+    set resultsRef(value) {
+        if (value) {
+            this.#_resultsRef = value;
+            this.#destroyAffixer();
+            this.#createAffixer();
+        }
+    }
+    get resultsRef() {
+        return this.#_resultsRef;
+    }
+    /**
+     * Index that indicates which descendant of the overlay currently has focus.
+     */
+    #activeElementIndex;
+    #adapterService;
+    #affixer;
+    #affixService;
+    #changeDetector;
+    #elementRef;
+    #hasFocus;
+    #inputBoxHostSvc;
+    #inputDirectiveUnsubscribe;
+    #messageStreamSub;
+    #ngUnsubscribe;
+    #overlay;
+    #overlayService;
+    /**
+     * 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.
+     */
+    #overlayFocusableElements;
+    #currentSearchSub;
+    #zIndex;
+    #_data;
+    #_debounceTime;
+    #_descriptorProperty;
+    #_highlightText;
+    #_inputDirective;
+    #_messageStream;
+    #_propertiesToSearch;
+    #_resultsRef;
+    #_search;
+    #_searchFilters;
+    #_searchResults;
+    #_searchResultsLimit;
+    #_searchTextMinimumCharacters;
+    constructor(changeDetector, elementRef, affixService, adapterService, overlayService, inputBoxHostSvc, stackingContext) {
+        /**
+         * @internal
+         * Whether to display a button in the dropdown that opens a picker where users can view all options.
+         */
+        this.enableShowMore = false;
+        /**
+         * @internal
+         * Whether to display a button that lets users add options to the data source.
+         * @default false
+         */
+        this.showAddButton = false;
+        /**
+         * @internal
+         * Allows async search to be disabled even when a listener is specified for
+         * the `searchAsync` output.
+         * @default false
+         */
+        this.searchAsyncDisabled = false;
+        /**
+         * @internal
+         * Fires when users select the button to add options to the data source.
+         */
+        this.addClick = new EventEmitter();
+        /**
+         * @internal
+         * Fires when users select the button to view all options.
+         */
+        this.showMoreClick = new EventEmitter();
+        /**
+         * 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.#hasFocus = false;
+        this.#inputDirectiveUnsubscribe = new Subject();
+        this.#ngUnsubscribe = new Subject();
+        /**
+         * Elements within the autocomplete dropdown that are focusable.
+         * These are typically the search results and action buttons, but could also be
+         * elements provided in the consumer's own template.
+         */
+        this.#overlayFocusableElements = [];
+        this.#_data = [];
+        this.#_debounceTime = 0;
+        this.#_descriptorProperty = 'name';
+        this.#_messageStream = new Subject();
+        this.#_propertiesToSearch = ['name'];
+        this.#_searchResultsLimit = 0;
+        this.#_searchTextMinimumCharacters = 1;
+        this.#changeDetector = changeDetector;
+        this.#elementRef = elementRef;
+        this.#affixService = affixService;
+        this.#adapterService = adapterService;
+        this.#overlayService = overlayService;
+        this.#inputBoxHostSvc = inputBoxHostSvc;
+        this.#zIndex = stackingContext?.zIndex;
+        this.searchOrDefault = skyAutocompleteDefaultSearchFunction({
+            propertiesToSearch: ['name'],
+            searchFilters: undefined,
+        });
+        const id = ++uniqueId$1;
+        this.resultsListId = `sky-autocomplete-list-${id}`;
+        this.resultsWrapperId = `sky-autocomplete-wrapper-${id}`;
+    }
+    ngAfterViewInit() {
+        this.#addInputEventListeners();
+    }
+    ngOnDestroy() {
+        this.#cancelCurrentSearch();
+        this.#inputDirectiveUnsubscribe.next();
+        this.#inputDirectiveUnsubscribe.complete();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        this.#destroyAffixer();
+        this.#destroyOverlay();
+    }
+    addButtonClicked() {
+        this.addClick.emit();
+        if (this.inputDirective) {
+            this.inputDirective.restoreInputTextValueToPreviousState();
+        }
+        this.#closeDropdown();
+    }
+    handleKeydown(event) {
+        /* Sanity check */
+        /* istanbul ignore else */
+        if (event.key) {
+            const key = event.key.toLowerCase();
+            const activeElement = this.#getActiveElement();
+            const activeElementId = activeElement?.id;
+            const targetIsSearchResult = this.searchResults.find((r) => r.elementId === activeElementId);
+            switch (key) {
+                case 'enter':
+                    if (targetIsSearchResult) {
+                        this.#selectSearchResultById(activeElementId);
+                        if (!this.showActionsArea) {
+                            this.#closeDropdown();
+                        }
+                        else {
+                            this.#resetSearch();
+                        }
+                    }
+                    else {
+                        if (activeElement) {
+                            activeElement.dispatchEvent(new MouseEvent('mousedown'));
+                        }
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                case 'tab':
+                    if (targetIsSearchResult) {
+                        this.#selectSearchResultById(activeElementId);
+                    }
+                    else {
+                        if (this.inputDirective) {
+                            this.inputDirective.restoreInputTextValueToPreviousState();
+                        }
+                    }
+                    this.#closeDropdown();
+                    break;
+                case 'escape':
+                    this.#closeDropdown();
+                    break;
+                case 'arrowdown':
+                case 'down':
+                    this.#removeFocusedClass();
+                    if (this.#activeElementIndex ===
+                        this.#overlayFocusableElements.length - 1 ||
+                        this.#activeElementIndex === -1) {
+                        this.#activeElementIndex = 0;
+                    }
+                    else {
+                        this.#activeElementIndex = this.#activeElementIndex + 1;
+                    }
+                    this.#addFocusedClass();
+                    this.#changeDetector.markForCheck();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                case 'arrowup':
+                case 'up':
+                    this.#removeFocusedClass();
+                    if (this.#activeElementIndex <= 0) {
+                        this.#activeElementIndex =
+                            this.#overlayFocusableElements.length - 1;
+                    }
+                    else {
+                        this.#activeElementIndex = this.#activeElementIndex - 1;
+                    }
+                    this.#addFocusedClass();
+                    this.#changeDetector.markForCheck();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+            }
+        }
+    }
+    moreButtonClicked() {
+        this.showMoreClick.emit({ inputValue: this.searchText });
+        if (this.inputDirective) {
+            this.inputDirective.restoreInputTextValueToPreviousState();
+        }
+        this.#closeDropdown();
+    }
+    onResultMouseDown(id, event) {
+        this.#selectSearchResultById(id);
+        if (!this.showActionsArea) {
+            this.#closeDropdown();
+        }
+        else {
+            this.#resetSearch();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onResultMouseMove(id) {
+        if (id !== this.#activeElementIndex) {
+            this.#removeFocusedClass();
+            this.#activeElementIndex = id;
+            this.#addFocusedClass();
+            this.#changeDetector.markForCheck();
+        }
+    }
+    isElementFocused(ref) {
+        return ref === this.#overlayFocusableElements[this.#activeElementIndex];
+    }
+    #searchTextChanged(searchText) {
+        if (this.#hasFocus) {
+            const isEmpty = !searchText || !searchText.trim() || searchText.match(/^\s+$/);
+            if (isEmpty) {
+                // Emit selectionChange if value has been cleared.
+                /* istanbul ignore else */
+                if (this.inputDirective && 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 || 0;
+                    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(() => {
+                            if (this.#affixer) {
+                                this.#affixer.reaffix();
+                                this.#changeDetector.detectChanges();
+                                this.#initOverlayFocusableElements();
+                            }
+                        });
+                    }
+                    else {
+                        this.#openDropdown();
+                        this.#changeDetector.markForCheck();
+                    }
+                });
+            }
+            else {
+                this.isSearchingAsync = false;
+                this.#changeDetector.markForCheck();
+            }
+        }
+        else {
+            this.isSearchingAsync = false;
+        }
+    }
+    #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 || of(undefined);
+        }
+        const result = this.searchOrDefault(this.searchText, this.data, {
+            context: 'popover',
+        });
+        if (result instanceof Array) {
+            return of({
+                items: result,
+                totalCount: result.length,
+            });
+        }
+        return from(result).pipe(map((items) => {
+            return {
+                items,
+                totalCount: items.length,
+            };
+        }));
+    }
+    #cancelCurrentSearch() {
+        if (this.#currentSearchSub) {
+            this.#currentSearchSub.unsubscribe();
+            this.#currentSearchSub = undefined;
+        }
+    }
+    /**
+     * 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);
+            }
+        }
+        // Remove any duplicates from the array.
+        return [...new Set(matchesToHighlight)];
+    }
+    #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];
+            if (this.inputDirective) {
+                this.inputDirective.value = data;
+            }
+            this.selectionChange.emit({
+                selectedItem: data,
+            });
+        }
+    }
+    #openDropdown() {
+        if (!this.#overlay && this.resultsTemplateRef) {
+            const overlay = this.#overlayService.create({
+                enableClose: false,
+                enablePointerEvents: true,
+                wrapperClass: this.wrapperClass,
+            });
+            if (this.#zIndex) {
+                this.#zIndex.pipe(takeUntil(overlay.closed)).subscribe((zIndex) => {
+                    overlay.componentRef.instance.zIndex = zIndex.toString(10);
+                });
+            }
+            overlay.attachTemplate(this.resultsTemplateRef);
+            this.#overlay = overlay;
+            this.isOpen = true;
+            this.#changeDetector.markForCheck();
+            this.#updateAriaOwns();
+            this.#initOverlayFocusableElements();
+        }
+    }
+    #closeDropdown() {
+        this.#resetSearch();
+        this.isOpen = false;
+        this.#destroyOverlay();
+        this.#removeActiveDescendant();
+        this.#updateAriaOwns();
+        this.#changeDetector.markForCheck();
+    }
+    #setActiveDescendant() {
+        const activeElement = this.#overlayFocusableElements[this.#activeElementIndex];
+        /* Sanity check */
+        /* istanbul ignore else */
+        if (activeElement && this.inputDirective) {
+            this.inputDirective.setActiveDescendant(activeElement.id);
+        }
+    }
+    #removeActiveDescendant() {
+        if (this.inputDirective) {
+            this.inputDirective.setActiveDescendant(null);
+        }
+    }
+    #updateAriaOwns() {
+        if (this.inputDirective) {
+            this.inputDirective.setAriaOwns(this.#overlay?.id || 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 */
+            if (this.isOpen && this.resultsRef) {
+                this.#adapterService.setDropdownWidth(this.#elementRef, this.resultsRef, !!this.#inputBoxHostSvc);
+            }
+        });
+    }
+    #destroyOverlay() {
+        if (this.#overlay) {
+            this.#overlayService.close(this.#overlay);
+            this.#overlay = undefined;
+        }
+    }
+    #createAffixer() {
+        /* Sanity check */
+        /* istanbul ignore else */
+        if (!this.#affixer && this.resultsRef) {
+            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() {
+        if (this.#messageStreamSub) {
+            this.#messageStreamSub.unsubscribe();
+            this.#messageStreamSub = undefined;
+        }
+        this.#messageStreamSub = this.messageStream.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();
+            }
+        });
+    }
+    #getActiveElement() {
+        return this.#overlayFocusableElements[this.#activeElementIndex];
+    }
+    #removeFocusedClass() {
+        if (this.#activeElementIndex > -1) {
+            this.#adapterService.removeCSSClass(this.#overlayFocusableElements[this.#activeElementIndex], 'sky-autocomplete-descendant-focus');
+        }
+    }
+    #addFocusedClass() {
+        if (this.#activeElementIndex > -1) {
+            this.#adapterService.addCSSClass(this.#overlayFocusableElements[this.#activeElementIndex], 'sky-autocomplete-descendant-focus');
+            this.#setActiveDescendant();
+        }
+    }
+    #updateDefaultSearchOptions() {
+        // Reset default search if it is what is being used.
+        if (this.search !== this.searchOrDefault) {
+            this.searchOrDefault = skyAutocompleteDefaultSearchFunction({
+                propertiesToSearch: this.propertiesToSearch,
+                searchFilters: this.searchFilters,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i5.SkyInputBoxHostService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\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=\"\n          (!searchResultsLimit || i < searchResultsLimit) &&\n          !(enableShowMore && i >= 5)\n        \"\n        class=\"sky-autocomplete-result\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n        [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate || defaultSearchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n      type=\"button\"\n      (mousedown)=\"moreButtonClicked()\"\n    >\n      <ng-container\n        *ngIf=\"\n          !(\n            searchAsync\n            | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled\n          ) &&\n          searchResults.length === 0 &&\n          !searchText\n        \"\n      >\n        {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          (searchAsync\n            | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled) &&\n          !searchText\n        \"\n      >\n        {{\n          'skyux_autocomplete_show_all_count'\n            | skyLibResources : (data.length | skyNumeric : { truncate: false })\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"searchText\">\n        {{\n          'skyux_autocomplete_show_matches_count'\n            | skyLibResources\n              : (searchResultsCount === undefined\n                  ? data.length\n                  : (searchResultsCount | skyNumeric : { truncate: false }))\n        }}\n      </ng-container>\n    </button>\n    <div\n      *ngIf=\"searchText && searchResults.length === 0\"\n      class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n    <button\n      *ngIf=\"showAddButton\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (mousedown)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i8.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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\"\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=\"\n          (!searchResultsLimit || i < searchResultsLimit) &&\n          !(enableShowMore && i >= 5)\n        \"\n        class=\"sky-autocomplete-result\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n        [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate || defaultSearchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n      type=\"button\"\n      (mousedown)=\"moreButtonClicked()\"\n    >\n      <ng-container\n        *ngIf=\"\n          !(\n            searchAsync\n            | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled\n          ) &&\n          searchResults.length === 0 &&\n          !searchText\n        \"\n      >\n        {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          (searchAsync\n            | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled) &&\n          !searchText\n        \"\n      >\n        {{\n          'skyux_autocomplete_show_all_count'\n            | skyLibResources : (data.length | skyNumeric : { truncate: false })\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"searchText\">\n        {{\n          'skyux_autocomplete_show_matches_count'\n            | skyLibResources\n              : (searchResultsCount === undefined\n                  ? data.length\n                  : (searchResultsCount | skyNumeric : { truncate: false }))\n        }}\n      </ng-container>\n    </button>\n    <div\n      *ngIf=\"searchText && searchResults.length === 0\"\n      class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n    <button\n      *ngIf=\"showAddButton\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (mousedown)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: SkyAutocompleteAdapterService }, { type: i1.SkyOverlayService }, { type: i5.SkyInputBoxHostService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SKY_STACKING_CONTEXT]
+                }] }]; }, propDecorators: { ariaLabelledBy: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], debounceTime: [{
+                type: Input
+            }], descriptorProperty: [{
+                type: Input
+            }], enableShowMore: [{
+                type: Input
+            }], messageStream: [{
+                type: Input
+            }], wrapperClass: [{
+                type: Input
+            }], propertiesToSearch: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], searchResultTemplate: [{
+                type: Input
+            }], searchTextMinimumCharacters: [{
+                type: Input
+            }], searchFilters: [{
+                type: Input
+            }], searchResultsLimit: [{
+                type: Input
+            }], showAddButton: [{
+                type: Input
+            }], noResultsFoundText: [{
+                type: Input
+            }], searchAsyncDisabled: [{
+                type: Input
+            }], addClick: [{
+                type: Output
+            }], showMoreClick: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], searchAsync: [{
+                type: Output
+            }], inputDirective: [{
+                type: ContentChild,
+                args: [SkyAutocompleteInputDirective]
+            }], resultsTemplateRef: [{
+                type: ViewChild,
+                args: ['resultsTemplateRef', {
+                        read: TemplateRef,
+                    }]
+            }], resultsRef: [{
+                type: ViewChild,
+                args: ['resultsRef', {
+                        read: ElementRef,
+                    }]
+            }] } });
+
+class SkyAutocompleteModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteModule, declarations: [SkyAutocompleteComponent,
+            SkyAutocompleteInputDirective,
+            SkyAutocompleteSearchAsyncDisabledPipe], imports: [CommonModule,
+            FormsModule,
+            SkyAffixModule,
+            SkyTextHighlightModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyLookupResourcesModule,
+            SkyNumericModule,
+            SkyOverlayModule,
+            SkyThemeModule,
+            SkyWaitModule], exports: [SkyAutocompleteComponent, SkyAutocompleteInputDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteModule, imports: [CommonModule,
+            FormsModule,
+            SkyAffixModule,
+            SkyTextHighlightModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyLookupResourcesModule,
+            SkyNumericModule,
+            SkyOverlayModule,
+            SkyThemeModule,
+            SkyWaitModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyAutocompleteComponent,
+                        SkyAutocompleteInputDirective,
+                        SkyAutocompleteSearchAsyncDisabledPipe,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SkyAffixModule,
+                        SkyTextHighlightModule,
+                        SkyIconModule,
+                        SkyIdModule,
+                        SkyLookupResourcesModule,
+                        SkyNumericModule,
+                        SkyOverlayModule,
+                        SkyThemeModule,
+                        SkyWaitModule,
+                    ],
+                    exports: [SkyAutocompleteComponent, SkyAutocompleteInputDirective],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+const SKY_COUNTRY_FIELD_CONTEXT = new InjectionToken('SkyCountryFieldContext');
+
+const DEFAULT_COUNTRY_CODE = 'us';
+const SKY_COUNTRY_FIELD_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SkyCountryFieldComponent),
+    multi: true,
+};
+let uniqueId = 0;
+class SkyCountryFieldComponent {
+    /**
+     * The [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)
+     * country code for the default country.
+     * When search results include the default country, it appears at the top of the list.
+     * @default "us"
+     */
+    set defaultCountry(value) {
+        if (!value) {
+            value = DEFAULT_COUNTRY_CODE;
+        }
+        if (value !== this.#_defaultCountry) {
+            this.#_defaultCountry = value.toLowerCase();
+            this.#defaultCountryData = this.countries.find((country) => country.iso2 === this.#_defaultCountry);
+            this.#sortCountriesWithSelectedAndDefault(this.selectedCountry);
+        }
+    }
+    get defaultCountry() {
+        return this.#_defaultCountry;
+    }
+    /**
+     * Whether to disable the country field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
+     * To set the disabled state on reactive forms, use the `FormControl` instead.
+     * @default false
+     */
+    set disabled(isDisabled) {
+        this.#removeEventListeners();
+        if (!isDisabled) {
+            this.#addEventListeners();
+        }
+        this.#_disabled = isDisabled ?? false;
+        if (isDisabled) {
+            this.countrySearchFormControl.disable();
+        }
+        else {
+            this.countrySearchFormControl.enable();
+        }
+        this.#changeDetector.markForCheck();
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    /**
+     * Whether to hide the flag in the input element.
+     * @default false
+     */
+    set hideSelectedCountryFlag(value) {
+        this.#_hideSelectedCountryFlag = value ?? false;
+    }
+    get hideSelectedCountryFlag() {
+        return this.#_hideSelectedCountryFlag;
+    }
+    /**
+     * Whether to include phone information in the selected country and country dropdown.
+     * @default false
+     * @internal
+     */
+    set includePhoneInfo(value) {
+        this.#_includePhoneInfo = value ?? false;
+        this.#setupCountries();
+    }
+    get includePhoneInfo() {
+        return this.#_includePhoneInfo;
+    }
+    /**
+     * The [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)
+     * country codes for the countries that users can select. By default, all countries are available.
+     */
+    set supportedCountryISOs(value) {
+        // Ensure all values are the same case.
+        if (Array.isArray(value)) {
+            value = value.map((v) => v.toLowerCase());
+        }
+        this.#_supportedCountryISOs = value;
+        this.#setupCountries();
+    }
+    get supportedCountryISOs() {
+        return this.#_supportedCountryISOs || [];
+    }
+    set selectedCountry(newCountry) {
+        if (!this.#countriesAreEqual(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;
+            this.countrySearchFormControl.setValue(this.selectedCountry);
+            if (!this.#isInitialChange) {
+                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();
+            }
+            this.#isInitialChange = false;
+            /**
+             * 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,
+             * template forms will send through `null` and then `undefined` on empty initialization
+             * 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;
+        }
+    }
+    get selectedCountry() {
+        return this.#_selectedCountry;
+    }
+    #changeDetector;
+    #defaultCountryData;
+    #elRef;
+    #idle;
+    #injector;
+    #internalFormChange;
+    #isInitialChange;
+    #ngControl;
+    #ngUnsubscribe;
+    #themeSvc;
+    #windowRef;
+    #_defaultCountry;
+    #_disabled;
+    #_hideSelectedCountryFlag;
+    #_includePhoneInfo;
+    #_selectedCountry;
+    #_supportedCountryISOs;
+    constructor(changeDetector, elRef, windowRef, injector, inputBoxHostSvc, themeSvc) {
+        this.inputBoxHostSvc = inputBoxHostSvc;
+        /**
+         * Fires when the selected country changes.
+         */
+        this.selectedCountryChange = new EventEmitter();
+        this.countries = [];
+        this.isInputFocused = false;
+        this.searchTextMinimumCharacters = 2;
+        this.context = inject(SKY_COUNTRY_FIELD_CONTEXT, {
+            optional: true,
+        });
+        this.currentTheme = 'default';
+        this.#idle = new Subject();
+        this.#internalFormChange = false;
+        this.#isInitialChange = true;
+        this.#ngControl = null;
+        this.#ngUnsubscribe = new Subject();
+        this.#_disabled = false;
+        this.#_hideSelectedCountryFlag = false;
+        this.#_includePhoneInfo = false;
+        // 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.#changeDetector = changeDetector;
+        this.#elRef = elRef;
+        this.#windowRef = windowRef;
+        this.#injector = injector;
+        this.#themeSvc = themeSvc;
+        this.inputId = `sky-country-field-input-${uniqueId++}`;
+        this.#setupCountries();
+        this.countrySearchFormControl = new UntypedFormControl();
+    }
+    /**
+     * Angular lifecycle hook for when the component is initialized
+     * @internal
+     */
+    ngOnInit() {
+        this.#updateInputBox();
+        this.#ngControl = this.#injector.get(NgControl, null);
+        if (this.#ngControl) {
+            this.#ngControl.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;
+        }
+        if (!this.defaultCountry) {
+            this.defaultCountry = DEFAULT_COUNTRY_CODE;
+        }
+        this.countrySearchFormControl.valueChanges
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((newValue) => {
+            if (newValue && !this.#internalFormChange) {
+                this.selectedCountry = newValue;
+            }
+        });
+        if (!this.disabled) {
+            this.#addEventListeners();
+        }
+    }
+    ngAfterViewInit() {
+        /* istanbul ignore else */
+        if (this.#themeSvc) {
+            this.#themeSvc.settingsChange.subscribe((change) => {
+                this.currentTheme = change.currentSettings.theme.name;
+                this.#updateInputBox();
+                this.#changeDetector.markForCheck();
+            });
+        }
+    }
+    /**
+     * Angular lifecycle hook for when the component is destructed.
+     * @internal
+     */
+    ngOnDestroy() {
+        this.selectedCountryChange.complete();
+        this.#removeEventListeners();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    /**
+     * Sets the component's touched value when the autocomplete is blurred
+     * @internal
+     */
+    onAutocompleteBlur() {
+        this.onTouched();
+    }
+    /**
+     * Sets the country to validate against based on the county's iso2 code.
+     * @param newCountry The International Organization for Standardization's two-letter code
+     * for the default country.
+     * @internal
+     */
+    onCountrySelected(newCountry) {
+        if (newCountry.selectedItem) {
+            this.writeValue(this.countries.find((countryInfo) => countryInfo.iso2 === newCountry.selectedItem.iso2));
+        }
+        else {
+            this.writeValue(undefined);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Allows Angular to disable the input.
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    validate(control) {
+        if (control.value) {
+            if ((this.supportedCountryISOs &&
+                this.supportedCountryISOs.length > 0 &&
+                this.supportedCountryISOs.indexOf(control.value.iso2) < 0) ||
+                !this.countries.find((country) => country.iso2 === control.value.iso2)) {
+                return { unsupportedCountry: true };
+            }
+        }
+        return null;
+    }
+    writeValue(value) {
+        this.selectedCountry = value;
+        this.#changeDetector.markForCheck();
+    }
+    #addEventListeners() {
+        this.#removeEventListeners();
+        this.#idle = new Subject();
+        const documentObj = this.#windowRef.nativeWindow.document;
+        fromEvent(documentObj, 'mousedown')
+            .pipe(takeUntil(this.#idle))
+            .subscribe((event) => {
+            this.isInputFocused = this.#elRef.nativeElement.contains(event.target);
+            this.#changeDetector.markForCheck();
+        });
+        fromEvent(documentObj, 'focusin')
+            .pipe(takeUntil(this.#idle))
+            .subscribe((event) => {
+            this.isInputFocused = this.#elRef.nativeElement.contains(event.target);
+            this.#changeDetector.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() {
+        /**
+         * 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 (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;
+            });
+        }
+    }
+    #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 && a.name < b.name)) &&
+                (!this.#defaultCountryData ||
+                    !this.#countriesEqual(this.#defaultCountryData, b))) {
+                return -1;
+            }
+            else {
+                return 1;
+            }
+        });
+        if (selectedCountry) {
+            // Note: We are looking up this data here to ensure we are using the official data from the
+            // library and not the data provided by the user on initialization of the component
+            const foundCountry = this.countries.find((country) => country.iso2 === selectedCountry.iso2.toLocaleLowerCase());
+            if (foundCountry) {
+                selectedCountryData = foundCountry;
+                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.inputTemplateRef) {
+            this.inputId = this.inputBoxHostSvc.controlId;
+            this.inputBoxHostSvc.populate({
+                inputTemplate: this.inputTemplateRef,
+                iconsInsetTemplate: this.currentTheme === 'modern'
+                    ? this.searchIconTemplateRef
+                    : undefined,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCountryFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAppWindowRef }, { token: i0.Injector }, { token: i5.SkyInputBoxHostService, optional: true }, { token: i8.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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.id]=\"inputId\"\n          [autocompleteAttribute]=\"autocompleteAttribute\"\n          [formControl]=\"countrySearchFormControl\"\n          [placeholder]=\"\n            context?.showPlaceholderText || 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{inset: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 var(--sky-highlight-color-danger);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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", 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"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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.id]=\"inputId\"\n          [autocompleteAttribute]=\"autocompleteAttribute\"\n          [formControl]=\"countrySearchFormControl\"\n          [placeholder]=\"\n            context?.showPlaceholderText || 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{inset: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 var(--sky-highlight-color-danger);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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAppWindowRef }, { type: i0.Injector }, { type: i5.SkyInputBoxHostService, decorators: [{
+                    type: Optional
+                }] }, { type: i8.SkyThemeService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { autocompleteAttribute: [{
+                type: Input
+            }], defaultCountry: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hideSelectedCountryFlag: [{
+                type: Input
+            }], includePhoneInfo: [{
+                type: Input
+            }], supportedCountryISOs: [{
+                type: Input
+            }], selectedCountryChange: [{
+                type: Output
+            }], countrySearchAutocompleteDirective: [{
+                type: ViewChild,
+                args: [SkyAutocompleteInputDirective]
+            }], inputTemplateRef: [{
+                type: ViewChild,
+                args: ['inputTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], searchIconTemplateRef: [{
+                type: ViewChild,
+                args: ['searchIconTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyCountryFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCountryFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyCountryFieldModule, declarations: [SkyCountryFieldComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            SkyAutocompleteModule,
+            SkyIconModule,
+            SkyI18nModule,
+            SkyLookupResourcesModule,
+            SkyThemeModule], exports: [SkyCountryFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCountryFieldModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            SkyAutocompleteModule,
+            SkyIconModule,
+            SkyI18nModule,
+            SkyLookupResourcesModule,
+            SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCountryFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyCountryFieldComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyAutocompleteModule,
+                        SkyIconModule,
+                        SkyI18nModule,
+                        SkyLookupResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [SkyCountryFieldComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkySearchAdapterService {
+    #renderer;
+    constructor(renderer) {
+        this.#renderer = renderer;
+    }
+    selectInput(searchEl) {
+        this.#getInputEl(searchEl).select();
+    }
+    focusInput(searchEl) {
+        this.#getInputEl(searchEl).focus();
+    }
+    startInputAnimation(searchEl) {
+        const buttonWidth = this.#getSearchOpenButtonEl(searchEl).clientWidth;
+        const offsetWidth = this.#getSearchContainerEl(searchEl).offsetLeft;
+        const minWidth = buttonWidth + offsetWidth;
+        this.#getInputContainerEl(searchEl).style.minWidth =
+            minWidth.toString() + 'px';
+        this.#renderer.setStyle(this.#getInputContainerEl(searchEl), 'min-width', minWidth.toString() + 'px');
+    }
+    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');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySearchAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySearchAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySearchAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
+const INPUT_SHOWN_STATE = 'inputShown';
+const INPUT_HIDDEN_STATE = 'inputHidden';
+const EXPAND_MODE_RESPONSIVE = 'responsive';
+const EXPAND_MODE_FIT = 'fit';
+const EXPAND_MODE_NONE = 'none';
+class SkySearchComponent {
+    /**
+     * The expand mode for the search input. The valid options
+     * include `"responsive"` to collapse the search input into a button on
+     * mobile devices, `"none"` to *not* collapse the search input on mobile
+     * devices, and `"fit"` to extend the search input to fit the width of its container.
+     * @default "responsive"
+     */
+    set expandMode(value) {
+        this.#_expandMode = value ?? EXPAND_MODE_RESPONSIVE;
+    }
+    get expandMode() {
+        return this.#_expandMode;
+    }
+    /**
+     * How many milliseconds to wait before searching after users enter text in the search input.
+     * @default 0
+     */
+    set debounceTime(value) {
+        this.#_debounceTime = value ?? 0;
+        this.#setupSearchChangedEvent();
+    }
+    get debounceTime() {
+        return this.#_debounceTime;
+    }
+    /**
+     * Whether to disable the filter button.
+     * @default false
+     */
+    set disabled(value) {
+        this.#_disabled = value ?? false;
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    #changeRef;
+    #elRef;
+    #mediaQueryService;
+    #searchAdapter;
+    #searchUpdated;
+    #searchUpdatedSub;
+    #_debounceTime;
+    #_disabled;
+    #_expandMode;
+    constructor(mediaQueryService, elRef, searchAdapter, changeRef) {
+        /**
+         * Fires when the search text is applied.
+         */
+        this.searchApply = new EventEmitter();
+        /**
+         * Fires when the search text is changed.
+         */
+        this.searchChange = new EventEmitter();
+        /**
+         * Fires when the search text is cleared.
+         */
+        this.searchClear = new EventEmitter();
+        this.clearButtonShown = false;
+        this.dismissButtonShown = false;
+        this.inputAnimate = INPUT_SHOWN_STATE;
+        this.isCollapsible = true;
+        this.isFullWidth = false;
+        this.mobileSearchShown = false;
+        this.searchButtonShown = false;
+        this.#searchUpdated = new Subject();
+        this.#_debounceTime = 0;
+        this.#_disabled = false;
+        this.#_expandMode = EXPAND_MODE_RESPONSIVE;
+        this.#mediaQueryService = mediaQueryService;
+        this.#elRef = elRef;
+        this.#searchAdapter = searchAdapter;
+        this.#changeRef = changeRef;
+    }
+    ngOnInit() {
+        if (this.#searchShouldCollapse()) {
+            this.breakpointSubscription = this.#mediaQueryService.subscribe((args) => {
+                this.#mediaQueryCallback(args);
+                this.#changeRef.detectChanges();
+            });
+        }
+        this.#setupSearchChangedEvent();
+    }
+    ngOnChanges(changes) {
+        if (this.#expandModeBindingChanged(changes)) {
+            switch (this.expandMode) {
+                case EXPAND_MODE_NONE:
+                    this.isCollapsible = false;
+                    this.isFullWidth = false;
+                    break;
+                case EXPAND_MODE_FIT:
+                    this.isCollapsible = false;
+                    this.isFullWidth = true;
+                    break;
+                default:
+                    this.isCollapsible = true;
+                    this.isFullWidth = false;
+                    break;
+            }
+        }
+        if (this.#searchBindingChanged(changes)) {
+            this.clearButtonShown = !!(this.searchText && this.searchText !== '');
+            if (this.#shouldOpenInput()) {
+                this.inputAnimate = INPUT_SHOWN_STATE;
+            }
+        }
+        this.#changeRef.detectChanges();
+    }
+    clearSearchText() {
+        this.searchText = '';
+        this.clearButtonShown = false;
+        this.#searchAdapter.focusInput(this.#elRef);
+        this.searchChange.emit(this.searchText);
+        this.searchApply.emit(this.searchText);
+        this.searchClear.emit();
+    }
+    enterPress(event, searchText) {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+            this.applySearchText(searchText);
+        }
+    }
+    applySearchText(searchText) {
+        // Double check that search text is defined before attempting to trim off whitespace
+        if (searchText) {
+            searchText = searchText.trim();
+        }
+        if (searchText !== this.searchText) {
+            this.searchText = searchText;
+        }
+        this.clearButtonShown = !!(searchText && searchText !== '');
+        if (searchText && searchText !== '') {
+            this.#searchAdapter.selectInput(this.#elRef);
+        }
+        this.searchApply.emit(searchText);
+    }
+    searchTextChanged(searchText) {
+        this.searchText = searchText;
+        this.#searchUpdated.next(searchText);
+    }
+    toggleSearchInput(showInput) {
+        if (this.#searchShouldCollapse()) {
+            if (showInput) {
+                this.inputAnimate = INPUT_SHOWN_STATE;
+            }
+            else {
+                this.inputAnimate = INPUT_HIDDEN_STATE;
+            }
+        }
+    }
+    inputAnimationStart(event) {
+        if (this.#searchShouldCollapse()) {
+            this.#searchAdapter.startInputAnimation(this.#elRef);
+            if (event.toState === INPUT_SHOWN_STATE &&
+                this.#mediaQueryService.current === SkyMediaBreakpoints.xs) {
+                this.mobileSearchShown = true;
+                this.searchButtonShown = false;
+            }
+        }
+    }
+    inputAnimationEnd(event) {
+        if (this.#searchShouldCollapse()) {
+            this.#searchAdapter.endInputAnimation(this.#elRef);
+            this.searchButtonShown =
+                event.toState === INPUT_HIDDEN_STATE &&
+                    this.#mediaQueryService.current === SkyMediaBreakpoints.xs;
+            if ((event.toState === INPUT_HIDDEN_STATE &&
+                this.#mediaQueryService.current === SkyMediaBreakpoints.xs) ||
+                this.#mediaQueryService.current !== SkyMediaBreakpoints.xs) {
+                this.mobileSearchShown = false;
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.breakpointSubscription) {
+            this.breakpointSubscription.unsubscribe();
+        }
+        this.#searchUpdated.complete();
+        this.#searchUpdatedSub?.unsubscribe();
+    }
+    #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());
+    }
+    #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;
+            }
+        }
+        this.#changeRef.markForCheck();
+    }
+    #searchShouldCollapse() {
+        return ((this.isCollapsible || this.isCollapsible === undefined) &&
+            this.isFullWidth !== true);
+    }
+    #setupSearchChangedEvent() {
+        this.#searchUpdatedSub?.unsubscribe();
+        this.#searchUpdatedSub = this.#searchUpdated
+            .pipe(debounceTime(this.debounceTime), distinctUntilChanged())
+            .subscribe((value) => {
+            this.searchChange.emit(value);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySearchComponent, deps: [{ token: i1.SkyMediaQueryService }, { token: i0.ElementRef }, { token: SkySearchAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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 [disabled]=\"disabled\">\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;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.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{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-background-color-input-box-group: transparent}.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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
+            trigger('inputState', [
+                state(INPUT_HIDDEN_STATE, style({
+                    opacity: 0,
+                    width: 0,
+                })),
+                state(INPUT_SHOWN_STATE, style({
+                    opacity: 1,
+                    width: '100%',
+                })),
+                transition('* <=> *', animate('150ms')),
+            ]),
+        ], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-search', encapsulation: ViewEncapsulation.None, animations: [
+                        trigger('inputState', [
+                            state(INPUT_HIDDEN_STATE, style({
+                                opacity: 0,
+                                width: 0,
+                            })),
+                            state(INPUT_SHOWN_STATE, style({
+                                opacity: 1,
+                                width: '100%',
+                            })),
+                            transition('* <=> *', animate('150ms')),
+                        ]),
+                    ], providers: [SkySearchAdapterService], 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 [disabled]=\"disabled\">\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;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.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{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-background-color-input-box-group: transparent}.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"] }]
+        }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }, { type: i0.ElementRef }, { type: SkySearchAdapterService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { searchApply: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }], searchClear: [{
+                type: Output
+            }], searchText: [{
+                type: Input
+            }], expandMode: [{
+                type: Input
+            }], debounceTime: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], placeholderText: [{
+                type: Input
+            }] } });
+
+class SkySearchModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkySearchModule, declarations: [SkySearchComponent], imports: [CommonModule,
+            SkyInputBoxModule,
+            SkyLookupResourcesModule,
+            FormsModule,
+            SkyIconModule,
+            SkyThemeModule,
+            SkyIdModule], exports: [SkySearchComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySearchModule, imports: [CommonModule,
+            SkyInputBoxModule,
+            SkyLookupResourcesModule,
+            FormsModule,
+            SkyIconModule,
+            SkyThemeModule,
+            SkyIdModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySearchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkySearchComponent],
+                    imports: [
+                        CommonModule,
+                        SkyInputBoxModule,
+                        SkyLookupResourcesModule,
+                        FormsModule,
+                        SkyIconModule,
+                        SkyThemeModule,
+                        SkyIdModule,
+                    ],
+                    exports: [SkySearchComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkySelectionModalItemSelectedPipe {
+    transform(id, selectedIdMap) {
+        return selectedIdMap.has(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalItemSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalItemSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skySelectionModalItemSelected',
+                }]
+        }] });
+
+/**
+ * @internal
+ * Context for the selection modal. These values are provided by the selection modal service.
+ */
+class SkySelectionModalContext {
+    constructor(descriptorProperty, idProperty, initialSearch, initialValue, searchAsync, selectMode, showAddButton, userConfig) {
+        this.descriptorProperty = descriptorProperty;
+        this.idProperty = idProperty;
+        this.initialSearch = initialSearch;
+        this.initialValue = initialValue;
+        this.searchAsync = searchAsync;
+        this.selectMode = selectMode;
+        this.showAddButton = showAddButton;
+        this.userConfig = userConfig;
+    }
+}
+
+/**
+ * @internal
+ */
+class SkySelectionModalComponent {
+    #changeDetector;
+    #continuationData;
+    #currentSearchSub;
+    #ngUnsubscribe;
+    #offset;
+    constructor(modalInstance, context, changeDetector, idSvc) {
+        this.modalInstance = modalInstance;
+        this.context = context;
+        /**
+         * @internal
+         * Fires when users select the button to add new options to the list.
+         */
+        this.addClick = new Subject();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.displayedItems = [];
+        this.hasMoreItems = false;
+        this.isLoadingMore = false;
+        this.isSearching = false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.items = [];
+        this.onlyShowSelected = false;
+        this.repeaterItemTemplate = null;
+        this.selectedIdMap = new Map();
+        this.#ngUnsubscribe = new Subject();
+        this.#offset = 0;
+        this.#changeDetector = changeDetector;
+        this.id = idSvc.generateId();
+    }
+    ngOnInit() {
+        this.repeaterItemTemplate = this.context.userConfig.itemTemplate || null;
+        this.searchText = this.context.initialSearch;
+        this.#createInitialSelectedItemsMap();
+        this.#loadSearchResults();
+    }
+    ngOnDestroy() {
+        this.#cancelCurrentSearch();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    addButtonClicked() {
+        this.addClick.next();
+    }
+    clearAll() {
+        this.selectedIdMap = new Map(this.selectedIdMap);
+        // Only deselect items that have been loaded; items that would be loaded
+        // after an infinite scroll event should remain selected.
+        for (const item of this.items) {
+            this.selectedIdMap.delete(item[this.context.idProperty]);
+        }
+        this.updateDisplayedItems();
+        this.#changeDetector.markForCheck();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    itemClick(selectedItem) {
+        if (this.context.selectMode === 'single') {
+            this.onItemSelect(!selectedItem.selected, selectedItem);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    addItem(itemToAdd) {
+        // Add the selected item, then perform the search again in case the
+        // newly-added item should be displayed as a search results.
+        this.#offset = 0;
+        this.onItemSelect(true, itemToAdd);
+        this.#loadSearchResults();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onItemSelect(newSelectState, itemToSelect) {
+        const itemId = itemToSelect[this.context.idProperty];
+        // Create a new Map so the pipe transform will execute on the next
+        // change detection cycle.
+        this.selectedIdMap = new Map(this.selectedIdMap);
+        if (this.context.selectMode === 'single') {
+            if (newSelectState) {
+                this.selectedIdMap.clear();
+                this.selectedIdMap.set(itemId, itemToSelect);
+            }
+        }
+        else {
+            if (newSelectState) {
+                this.selectedIdMap.set(itemId, itemToSelect);
+            }
+            else {
+                this.selectedIdMap.delete(itemId);
+            }
+        }
+        this.updateDisplayedItems();
+    }
+    searchApplied(searchText) {
+        this.#offset = 0;
+        this.searchText = searchText;
+        this.#loadSearchResults();
+    }
+    selectAll() {
+        this.selectedIdMap = new Map();
+        for (const item of this.items) {
+            this.selectedIdMap.set(item[this.context.idProperty], item);
+        }
+        this.updateDisplayedItems();
+    }
+    infiniteScrollEnd() {
+        this.#cancelCurrentSearch();
+        /* Sanity check - else case would only happen if this was called directly */
+        /* istanbul ignore else */
+        if (this.hasMoreItems) {
+            this.isLoadingMore = true;
+            this.#performSearch((result) => {
+                this.items = this.items.concat(result.items);
+                this.updateDisplayedItems();
+                this.isLoadingMore = false;
+            });
+        }
+    }
+    save() {
+        const selectedItems = Array.from(this.selectedIdMap.values(), (itemData, index) => ({
+            index,
+            itemData,
+        })).sort((a, b) => {
+            return this.items.indexOf(a.itemData) < this.items.indexOf(b.itemData)
+                ? -1
+                : 1;
+        });
+        this.modalInstance.save(selectedItems);
+    }
+    updateDisplayedItems() {
+        if (this.onlyShowSelected) {
+            this.displayedItems = this.items.filter((item) => this.selectedIdMap.has(item[this.context.idProperty]));
+        }
+        else {
+            this.displayedItems = this.items;
+        }
+    }
+    #loadSearchResults() {
+        this.#cancelCurrentSearch();
+        this.isSearching = true;
+        this.#performSearch((result) => {
+            this.isSearching = false;
+            this.items = result.items;
+        });
+        this.#changeDetector.markForCheck();
+    }
+    #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 || false;
+            this.#offset = this.items.length;
+            this.updateDisplayedItems();
+            this.#changeDetector.markForCheck();
+        });
+    }
+    #cancelCurrentSearch() {
+        if (this.#currentSearchSub) {
+            this.#currentSearchSub.unsubscribe();
+            this.#currentSearchSub = undefined;
+            this.isLoadingMore = false;
+            this.isSearching = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkySelectionModalContext }, { token: i0.ChangeDetectorRef }, { token: i1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkySelectionModalComponent, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n  >\n    <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n    <div class=\"sky-lookup-show-more-toolbar-wrapper\">\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-multiselect-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]\n            | skySelectionModalItemSelected : 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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-selection-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n  >\n    <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n    <div class=\"sky-lookup-show-more-toolbar-wrapper\">\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-multiselect-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]\n            | skySelectionModalItemSelected : 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: SkySelectionModalContext }, { type: i0.ChangeDetectorRef }, { type: i1.SkyIdService }]; } });
+
+class SkySelectionModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalModule, declarations: [SkySelectionModalComponent, SkySelectionModalItemSelectedPipe], imports: [CommonModule,
+            SkyCheckboxModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyInfiniteScrollModule,
+            SkyModalModule,
+            SkyRepeaterModule,
+            SkySearchModule,
+            SkyThemeModule,
+            SkyToolbarModule,
+            SkyViewkeeperModule,
+            SkyWaitModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalModule, imports: [CommonModule,
+            SkyCheckboxModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyInfiniteScrollModule,
+            SkyModalModule,
+            SkyRepeaterModule,
+            SkySearchModule,
+            SkyThemeModule,
+            SkyToolbarModule,
+            SkyViewkeeperModule,
+            SkyWaitModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkySelectionModalComponent, SkySelectionModalItemSelectedPipe],
+                    imports: [
+                        CommonModule,
+                        SkyCheckboxModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyInfiniteScrollModule,
+                        SkyModalModule,
+                        SkyRepeaterModule,
+                        SkySearchModule,
+                        SkyThemeModule,
+                        SkyToolbarModule,
+                        SkyViewkeeperModule,
+                        SkyWaitModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ * Context for the show more native picker. These values are provided by the lookup component.
+ */
+class SkyLookupShowMoreNativePickerContext {
+    constructor(descriptorProperty, initialSearch, initialValue, items, search, selectMode, showAddButton, userConfig) {
+        this.descriptorProperty = descriptorProperty;
+        this.initialSearch = initialSearch;
+        this.initialValue = initialValue;
+        this.items = items;
+        this.search = search;
+        this.selectMode = selectMode;
+        this.showAddButton = showAddButton;
+        this.userConfig = userConfig;
+    }
+}
+
+/**
+ * @internal
+ * Internal component to implement the native picker.
+ */
+class SkyLookupShowMoreModalComponent {
+    #changeDetector;
+    #itemIndex;
+    #ngUnsubscribe;
+    constructor(modalInstance, context, changeDetector, idSvc) {
+        this.modalInstance = modalInstance;
+        this.context = context;
+        /**
+         * @internal
+         * Fires when users select the button to add new options to the list.
+         */
+        this.addClick = new Subject();
+        this.items = [];
+        this.itemsLoading = false;
+        this.dataManagerConfig = {
+            sortOptions: [
+                {
+                    id: 'az',
+                    label: 'Alphabetical (A - Z)',
+                    descending: false,
+                    propertyName: 'name',
+                },
+                {
+                    id: 'za',
+                    label: 'Alphabetical (Z - A)',
+                    descending: true,
+                    propertyName: 'name',
+                },
+            ],
+        };
+        this.displayedItems = [];
+        this.itemsHaveMore = false;
+        this.onlyShowSelected = false;
+        this.repeaterItemTemplate = null;
+        this.searchText = '';
+        this.selectedItems = [];
+        this.#itemIndex = 0;
+        this.#ngUnsubscribe = new Subject();
+        this.#changeDetector = changeDetector;
+        this.id = idSvc.generateId();
+    }
+    ngAfterViewInit() {
+        this.repeaterItemTemplate = this.context.userConfig.itemTemplate || null;
+        this.searchText = this.context.initialSearch;
+        this.addItems();
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    addButtonClicked() {
+        this.addClick.next();
+    }
+    addItems() {
+        this.itemsLoading = true;
+        if (!this.items || this.items.length === 0) {
+            const selectedItems = this.selectedItems.slice();
+            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);
+                const initialValueContainsItem = this.context.initialValue.findIndex((initialItem) => initialItem === item.value) >= 0;
+                if (isInitialValue || (initialIsArray && initialValueContainsItem)) {
+                    item.selected = true;
+                    const itemIndex = this.items.indexOf(item);
+                    if (selectedItems.findIndex((selectedItem) => selectedItem.index === itemIndex) < 0) {
+                        selectedItems.push({ index: itemIndex, itemData: item.value });
+                    }
+                }
+            });
+            this.selectedItems = selectedItems;
+            this.updateDataState();
+            this.#changeDetector.markForCheck();
+        }
+        // if onlyShowSelected is checked, then only iterate through the initial selection
+        const items = this.onlyShowSelected
+            ? this.items.filter((item) => item.selected)
+            : this.items;
+        this.#itemIndex = this.#itemIndex + 10;
+        this.searchItems(items).then((searchedItems) => {
+            this.displayedItems = searchedItems.slice(0, this.#itemIndex);
+            if (this.#itemIndex > searchedItems.length) {
+                this.itemsHaveMore = false;
+            }
+            else {
+                this.itemsHaveMore = true;
+            }
+            this.itemsLoading = false;
+            this.#changeDetector.markForCheck();
+        });
+    }
+    clearAll() {
+        this.displayedItems.forEach((item) => {
+            if (item.selected) {
+                item.selected = false;
+            }
+        });
+        this.selectedItems = [];
+        this.updateDataState();
+        this.#changeDetector.markForCheck();
+    }
+    itemClick(selectedItem) {
+        if (this.context.selectMode === 'single') {
+            this.onItemSelect(!selectedItem.selected, selectedItem);
+        }
+    }
+    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;
+                items.forEach((item) => {
+                    if (item.value !== itemToSelect.value) {
+                        item.selected = false;
+                    }
+                });
+                this.displayedItems.forEach((item) => {
+                    if (item.value !== itemToSelect.value) {
+                        item.selected = false;
+                    }
+                });
+                const itemIndex = items.findIndex((item) => item.value === itemToSelect.value);
+                this.selectedItems = [
+                    { index: itemIndex, itemData: items[itemIndex].value },
+                ];
+            }
+        }
+        else {
+            const selectedItems = this.selectedItems;
+            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: items[allItemsIndex].value,
+                });
+            }
+            else if (!newSelectState && selectedItemsIndex !== -1) {
+                selectedItems.splice(selectedItemsIndex, 1);
+            }
+            this.selectedItems = selectedItems;
+        }
+        this.updateDataState();
+        this.#changeDetector.markForCheck();
+    }
+    searchApplied(searchText) {
+        /* istanbul ignore else */
+        if (this.searchText !== searchText) {
+            this.#itemIndex = 10;
+            this.modalInstance.scrollContentToTop();
+        }
+        this.searchText = searchText;
+        this.itemsLoading = true;
+        this.#changeDetector.detectChanges();
+        // We need to ensure that the scroll event makes it all the way through the infinite scroll workflow before updating the data state.
+        // Without this, the infinite scroll can add items improperly because it can see the above scroll after the items finish searching.
+        setTimeout(() => {
+            this.updateDataState();
+        }, 100);
+    }
+    searchItems(items) {
+        const searchText = this.searchText;
+        if (searchText) {
+            const resultValues = this.context.search(searchText, items.map((item) => {
+                return item.value;
+            }), { context: 'modal' });
+            if (resultValues instanceof Array) {
+                const result = items.filter((item) => resultValues.indexOf(item.value) >= 0);
+                return Promise.resolve(result);
+            }
+            else {
+                return resultValues.then((values) => {
+                    const result = items.filter((item) => values.indexOf(item.value) >= 0);
+                    return Promise.resolve(result);
+                });
+            }
+        }
+        else {
+            return Promise.resolve(items);
+        }
+    }
+    selectAll() {
+        const items = this.items;
+        const selectedItems = this.selectedItems;
+        this.displayedItems.forEach((item) => {
+            if (!item.selected) {
+                item.selected = true;
+                const index = items.indexOf(item);
+                /* istanbul ignore else */
+                if (selectedItems.findIndex((selectedItem) => selectedItem.index === index) < 0) {
+                    selectedItems.push({
+                        index: index,
+                        itemData: items[index].value,
+                    });
+                }
+            }
+        });
+        this.selectedItems = selectedItems;
+        this.updateDataState();
+        this.#changeDetector.markForCheck();
+    }
+    updateDataState() {
+        const items = this.items;
+        const selectedItems = this.selectedItems;
+        items?.forEach((item, index) => {
+            item.selected =
+                selectedItems.findIndex((selectedItem) => selectedItem.index === index) !== -1;
+        });
+        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.itemsHaveMore = false;
+            }
+            else {
+                this.itemsHaveMore = true;
+            }
+            this.itemsLoading = false;
+            this.#changeDetector.markForCheck();
+        });
+    }
+    updateItemData(data) {
+        this.context.items = data;
+        this.items = [];
+        this.#itemIndex = 10;
+        this.selectedItems.forEach((selectedItem) => {
+            this.context.items.forEach((item, index) => {
+                if (selectedItem.itemData === item) {
+                    selectedItem.index = index;
+                }
+            });
+        });
+        this.addItems();
+        this.#changeDetector.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyLookupShowMoreNativePickerContext }, { token: i0.ChangeDetectorRef }, { token: i1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n  >\n    <div class=\"sky-lookup-show-more-toolbar-wrapper\">\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-multiselect-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\n      [enabled]=\"itemsHaveMore\"\n      [loading]=\"itemsLoading\"\n      (scrollEnd)=\"addItems()\"\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      (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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skyux-lookup-show-more-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n  >\n    <div class=\"sky-lookup-show-more-toolbar-wrapper\">\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-multiselect-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\n      [enabled]=\"itemsHaveMore\"\n      [loading]=\"itemsLoading\"\n      (scrollEnd)=\"addItems()\"\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      (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 }, { type: i1.SkyIdService }]; } });
+
+/**
+ * @internal
+ */
+class SkyLookupAdapterService {
+    focusInput(elRef) {
+        const inputEl = elRef.nativeElement.querySelector('.sky-lookup-input');
+        /* Sanity check */
+        /* istanbul ignore else */
+        if (inputEl) {
+            inputEl.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupAdapterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyLookupAutocompleteAdapter {
+    constructor() {
+        /**
+         * Fires when users enter new search information and allows results to be
+         * returned via an observable.
+         */
+        this.searchAsync = new EventEmitter();
+        this.searchOrDefault = skyAutocompleteDefaultSearchFunction({
+            propertiesToSearch: ['name'],
+            searchFilters: undefined,
+        });
+        this.#_descriptorProperty = 'name';
+        this.#_propertiesToSearch = ['name'];
+    }
+    /**
+     * The object property to display in the text input after users
+     * select an item in the dropdown list.
+     * @default "name"
+     */
+    set descriptorProperty(value) {
+        this.#_descriptorProperty = value || 'name';
+    }
+    get descriptorProperty() {
+        return this.#_descriptorProperty;
+    }
+    /**
+     * The array of object properties to search.
+     * @default ["name"]
+     */
+    set propertiesToSearch(value) {
+        this.#_propertiesToSearch = value ?? ['name'];
+        this.#updateDefaultSearchOptions();
+    }
+    get propertiesToSearch() {
+        return this.#_propertiesToSearch;
+    }
+    /**
+     * The function to dynamically manage the data source when users
+     * change the text in the lookup field. The search function must return
+     * an array or a promise of an array. The `search` property is particularly
+     * useful when the data source does not live in the source code. If the
+     * search requires calling a remote data source, use `searchAsync` instead of
+     * `search`.
+     */
+    set search(value) {
+        this.#_search = value;
+        this.searchOrDefault =
+            value ||
+                skyAutocompleteDefaultSearchFunction({
+                    propertiesToSearch: this.propertiesToSearch,
+                    searchFilters: this.searchFilters,
+                });
+    }
+    get search() {
+        return this.#_search;
+    }
+    /**
+     * The array of functions to call against each search result in order
+     * to filter the search results when using the default search function. When
+     * using a custom search function via the `search` property filters must be
+     * applied manually inside that function. The function must return `true` or
+     * `false` for each result to indicate whether to display it in the dropdown list.
+     */
+    set searchFilters(value) {
+        this.#_searchFilters = value;
+        this.#updateDefaultSearchOptions();
+    }
+    get searchFilters() {
+        return this.#_searchFilters;
+    }
+    #_descriptorProperty;
+    #_propertiesToSearch;
+    #_search;
+    #_searchFilters;
+    #updateDefaultSearchOptions() {
+        // Reset default search if it is what is being used.
+        if (this.search !== this.searchOrDefault) {
+            this.searchOrDefault = skyAutocompleteDefaultSearchFunction({
+                propertiesToSearch: this.propertiesToSearch,
+                searchFilters: this.searchFilters,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupAutocompleteAdapter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", ngImport: i0, type: SkyLookupAutocompleteAdapter, decorators: [{
+            type: Directive
+        }], propDecorators: { debounceTime: [{
+                type: Input
+            }], descriptorProperty: [{
+                type: Input
+            }], propertiesToSearch: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], searchResultTemplate: [{
+                type: Input
+            }], searchTextMinimumCharacters: [{
+                type: Input
+            }], searchFilters: [{
+                type: Input
+            }], searchResultsLimit: [{
+                type: Input
+            }], searchAsync: [{
+                type: Output
+            }] } });
+
+/**
+ * Represents an instance of a selection modal.
+ */
+class SkySelectionModalInstance {
+    /**
+     * An event that the selection modal instance emits when it closes.
+     * It emits a `SkySelectionModalCloseArgs` object with a `selectedItems` property that includes
+     * items selected by users on close or save and a `reason` property that indicates
+     * whether the selection modal was saved or closed without saving.
+     * The `reason` property accepts `"cancel"`, `"close"`, and `"save"`.
+     */
+    get closed() {
+        return this.#closedObs;
+    }
+    /**
+     * @internal
+     */
+    get itemAdded() {
+        return this.#itemAddedObs;
+    }
+    #closed = new Subject();
+    #closedObs;
+    #itemAdded = new Subject();
+    #itemAddedObs;
+    constructor(id) {
+        this.id = id;
+        this.#closedObs = this.#closed.asObservable();
+        this.#itemAddedObs = this.#itemAdded.asObservable();
+    }
+    /**
+     * @internal
+     */
+    close(args) {
+        this.#closed.next(args);
+        this.#closed.complete();
+    }
+    /**
+     * @internal
+     */
+    addItem(itemToAdd) {
+        this.#itemAdded.next(itemToAdd);
+    }
+}
+
+/**
+ * Displays a modal for selecting one or more values.
+ */
+class SkySelectionModalService {
+    #modalSvc;
+    constructor(modalSvc) {
+        this.#modalSvc = modalSvc;
+    }
+    /**
+     * Opens the selection modal.
+     * @param args Parameters for the selection modal.
+     */
+    open(args) {
+        const initialValue = args.value;
+        const context = new SkySelectionModalContext(args.descriptorProperty, args.idProperty, args.initialSearch || '', initialValue || [], (searchArgs) => {
+            return args.searchAsync({
+                offset: searchArgs.offset,
+                searchText: searchArgs.searchText,
+                continuationData: searchArgs.continuationData,
+            });
+        }, args.selectMode, args.showAddButton || false, {
+            itemTemplate: args.itemTemplate,
+            title: args.title,
+        });
+        const modalInstance = this.#modalSvc.open(SkySelectionModalComponent, {
+            providers: [
+                {
+                    provide: SkySelectionModalContext,
+                    useValue: context,
+                },
+            ],
+            size: 'large',
+            wrapperClass: args.wrapperClass,
+        });
+        const instance = new SkySelectionModalInstance(modalInstance.componentInstance.id);
+        instance.itemAdded
+            .pipe(takeUntil(modalInstance.closed))
+            .subscribe((item) => {
+            modalInstance.componentInstance.addItem(item);
+        });
+        modalInstance.closed.subscribe((modalCloseArgs) => {
+            let closeArgs;
+            switch (modalCloseArgs.reason) {
+                case 'save':
+                    closeArgs = {
+                        reason: 'save',
+                        selectedItems: modalCloseArgs.data.map((item) => item.itemData),
+                    };
+                    break;
+                case 'cancel':
+                    closeArgs = { reason: 'cancel' };
+                    break;
+                default:
+                    closeArgs = { reason: 'close' };
+            }
+            instance.close(closeArgs);
+        });
+        const selectionModal = modalInstance.componentInstance;
+        selectionModal.addClick
+            .pipe(takeUntil(modalInstance.closed))
+            .subscribe(() => {
+            if (args.addClick) {
+                const addArgs = {
+                    itemAdded(args) {
+                        selectionModal.addItem(args.item);
+                    },
+                };
+                args.addClick(addArgs);
+            }
+        });
+        return instance;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalService, deps: [{ token: i1$1.SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySelectionModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.SkyModalService }]; } });
+
+class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
+    /**
+     * The data source for the lookup component to search when users
+     * enter text. You can specify static data such as an array of objects, or
+     * you can pull data from a database.
+     * @default []
+     */
+    set data(value) {
+        this.#_data = value;
+        if (this.#openNativePicker && !this.#hasSearchAsync()) {
+            this.#openNativePicker.componentInstance.updateItemData(value);
+        }
+    }
+    get data() {
+        return this.#_data || [];
+    }
+    /**
+     * Whether to disable the lookup field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
+     * To set the disabled state on reactive forms, use the `FormControl` instead.
+     * @default false
+     */
+    set disabled(value) {
+        this.#_disabled = value ?? false;
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    /**
+     * Whether to enable users to open a picker where they can view all options.
+     * @default false
+     */
+    set enableShowMore(value) {
+        this.#_enableShowMore = value ?? false;
+    }
+    get enableShowMore() {
+        return this.#_enableShowMore;
+    }
+    /**
+     * Whether to display a button that lets users add options to the list.
+     * @default false
+     */
+    set showAddButton(value) {
+        this.#_showAddButton = value ?? false;
+    }
+    get showAddButton() {
+        return this.#_showAddButton;
+    }
+    /**
+     * The ability for users to select one option or multiple options.
+     * @default "multiple"
+     */
+    set selectMode(value) {
+        const multipleToSingle = value === 'single' && this.selectMode === 'multiple';
+        this.#_selectMode = value;
+        this.#updateForSelectMode();
+        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();
+                });
+            }
+        }
+    }
+    get selectMode() {
+        return this.#_selectMode || 'multiple';
+    }
+    get tokens() {
+        return this.#_tokens;
+    }
+    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
+                .getString('skyux_lookup_tokens_summary', this.value.length.toString())
+                .pipe(take(1))
+                .subscribe((label) => {
+                this.#_tokens = [
+                    {
+                        value: { [this.descriptorProperty]: label },
+                    },
+                ];
+                this.#changeDetector.markForCheck();
+            });
+        }
+        else {
+            this.#_tokens = value;
+            this.#changeDetector.markForCheck();
+        }
+    }
+    get value() {
+        return this.#_value ? this.#_value : [];
+    }
+    set value(newValue) {
+        this.#_value = newValue;
+        if (!this.#pickerModalOpen()) {
+            this.tokens = this.#parseTokens(newValue);
+        }
+        this.onChange(this.#_value);
+        this.onTouched();
+    }
+    set autocompleteInputDirective(value) {
+        this.#_autocompleteInputDirective = value;
+        this.#updateForSelectMode();
+    }
+    get autocompleteInputDirective() {
+        return this.#_autocompleteInputDirective;
+    }
+    #adapter;
+    #elementRef;
+    #changeDetector;
+    #idle;
+    #markForTokenFocusOnKeyUp;
+    #modalService;
+    #ngUnsubscribe;
+    #openNativePicker;
+    #openSelectionModal;
+    #resourcesService;
+    #selectionModalSvc;
+    #windowRef;
+    #logSvc;
+    #_autocompleteInputDirective;
+    #_data;
+    #_disabled;
+    #_enableShowMore;
+    #_selectMode;
+    #_showAddButton;
+    #_tokens;
+    #_value;
+    constructor(changeDetector, elementRef, windowRef, adapter, modalService, resourcesService, selectionModalSvc, logSvc, ngControl, inputBoxHostSvc, themeSvc) {
+        super();
+        this.inputBoxHostSvc = inputBoxHostSvc;
+        this.themeSvc = themeSvc;
+        /**
+         * Fires when users select the button to add options to the list.
+         */
+        this.addClick = new EventEmitter();
+        this.autocompleteController = new Subject();
+        this.isInputFocused = false;
+        this.tokensController = new Subject();
+        this.#idle = new Subject();
+        this.#markForTokenFocusOnKeyUp = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#_disabled = false;
+        this.#_enableShowMore = false;
+        this.#_showAddButton = false;
+        // 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.#changeDetector = changeDetector;
+        this.#elementRef = elementRef;
+        this.#windowRef = windowRef;
+        this.#adapter = adapter;
+        this.#modalService = modalService;
+        this.#resourcesService = resourcesService;
+        this.#selectionModalSvc = selectionModalSvc;
+        this.#logSvc = logSvc;
+        if (ngControl) {
+            ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        if (this.inputBoxHostSvc && this.inputTemplateRef) {
+            this.controlId = this.inputBoxHostSvc.controlId;
+            this.inputBoxHostSvc.populate({
+                inputTemplate: this.inputTemplateRef,
+                buttonsTemplate: this.enableShowMore
+                    ? this.showMoreButtonTemplateRef
+                    : undefined,
+                iconsInsetTemplate: this.enableShowMore
+                    ? undefined
+                    : this.searchIconTemplateRef,
+            });
+        }
+        /* istanbul ignore else */
+        if (this.themeSvc) {
+            // This is required for the autocomplete directive to be set after elements
+            // are rearranged when switching themes.
+            this.themeSvc.settingsChange
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe(() => {
+                this.#changeDetector.markForCheck();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.disabled) {
+            this.#addEventListeners();
+        }
+    }
+    ngOnDestroy() {
+        this.#removeEventListeners();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        this.tokensController.complete();
+    }
+    addButtonClicked() {
+        this.addClick.emit({
+            itemAdded: (args) => this.#onAddButtonComplete(args),
+        });
+    }
+    onAutocompleteSelectionChange(change) {
+        /* istanbul ignore else */
+        if (change.selectedItem) {
+            this.#addToSelected(change.selectedItem);
+        }
+        else if (this.selectMode === 'single') {
+            this.writeValue([]);
+        }
+    }
+    onAutocompleteBlur() {
+        this.onTouched();
+    }
+    onTokensChange(change) {
+        if (!change) {
+            return;
+        }
+        if (this.tokens !== change) {
+            if (change.length === 0) {
+                this.#focusInput();
+            }
+            // 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) => {
+                return token.value;
+            });
+            this.tokens = change;
+            this.onChange(this.#_value);
+            this.onTouched();
+        }
+    }
+    onTokensFocusIndexOverRange() {
+        this.#windowRef.nativeWindow.setTimeout(() => {
+            this.#focusInput();
+        });
+    }
+    onTokensKeyUp(event) {
+        /* istanbul ignore else */
+        if (this.selectMode !== 'single') {
+            switch (event.key) {
+                case 'Backspace':
+                    this.#sendTokensMessage(SkyTokensMessageType.RemoveActiveToken);
+                    this.#sendTokensMessage(SkyTokensMessageType.FocusPreviousToken);
+                    event.preventDefault();
+                    break;
+                case 'Del':
+                case 'Delete':
+                    this.#sendTokensMessage(SkyTokensMessageType.RemoveActiveToken);
+                    this.#windowRef.nativeWindow.setTimeout(() => {
+                        this.#sendTokensMessage(SkyTokensMessageType.FocusActiveToken);
+                    });
+                    event.preventDefault();
+                    break;
+            }
+        }
+    }
+    onTokensRendered() {
+        this.#sendAutocompleteMessage(SkyAutocompleteMessageType.RepositionDropdown);
+    }
+    writeValue(value) {
+        // Since we are dealing with arrays - clone the array being sent in to ensure we aren't modifying a consumers outer array
+        this.value = value ? value.slice() : [];
+        this.#updateForSelectMode();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Allows Angular to disable the input.
+    setDisabledState(disabled) {
+        this.#removeEventListeners();
+        if (!disabled) {
+            this.#addEventListeners();
+        }
+        this.disabled = disabled;
+        this.#changeDetector.markForCheck();
+    }
+    clearSearchText() {
+        if (this.autocompleteInputDirective) {
+            this.autocompleteInputDirective.value = 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) {
+        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') {
+            switch (event.key) {
+                case 'Enter':
+                    event.preventDefault();
+                    break;
+                case 'ArrowLeft':
+                case 'Backspace':
+                case 'Left':
+                    if (value) {
+                        this.#markForTokenFocusOnKeyUp = false;
+                    }
+                    else {
+                        this.#markForTokenFocusOnKeyUp = true;
+                    }
+                    break;
+                default:
+            }
+        }
+    }
+    inputKeyup(event) {
+        /* Sanity check as this should only be called when in multiple select mode */
+        /* istanbul ignore else */
+        if (this.selectMode !== 'single') {
+            switch (event.key) {
+                case 'Esc':
+                case 'Escape':
+                    this.clearSearchText();
+                    event.preventDefault();
+                    break;
+                case 'ArrowLeft':
+                case 'Backspace':
+                case 'Left':
+                    /* istanbul ignore else */
+                    if (this.#markForTokenFocusOnKeyUp) {
+                        this.#sendTokensMessage(SkyTokensMessageType.FocusLastToken);
+                        event.preventDefault();
+                    }
+                    break;
+                default:
+            }
+            event.stopPropagation();
+        }
+    }
+    onSearchButtonClick() {
+        /*istanbul ignore next*/
+        if (this.disabled) {
+            return;
+        }
+        this.#sendAutocompleteMessage(SkyAutocompleteMessageType.CloseDropdown);
+        let isValueInTextBox = false;
+        if (this.selectMode === 'single') {
+            isValueInTextBox =
+                this.autocompleteInputDirective?.value &&
+                    this.autocompleteInputDirective.inputTextValue ===
+                        this.autocompleteInputDirective.value[this.descriptorProperty];
+        }
+        let searchValue = '';
+        if (!isValueInTextBox && this.autocompleteInputDirective) {
+            searchValue = this.autocompleteInputDirective.inputTextValue;
+        }
+        this.openPicker(searchValue);
+        this.autocompleteInputDirective?.restoreInputTextValueToPreviousState();
+    }
+    onShowMoreClick(event) {
+        /* Sanity check */
+        /* istanbul ignore else*/
+        if (event) {
+            this.openPicker(event.inputValue);
+        }
+    }
+    openPicker(initialSearch) {
+        if (this.showMoreConfig?.customPicker) {
+            this.showMorePickerId = undefined;
+            this.showMoreConfig.customPicker.open({
+                items: this.data,
+                initialSearch,
+                initialValue: this.value,
+            });
+        }
+        else {
+            const initialValue = this.value;
+            if (this.#hasSearchAsync()) {
+                this.#openSelectionModal =
+                    this.#createSelectionModalInstance(initialSearch);
+                this.showMorePickerId = this.#openSelectionModal.id;
+                this.#openSelectionModal.closed.subscribe((closeArgs) => {
+                    this.#processPickerResult(closeArgs.reason === 'save' ? closeArgs.selectedItems : initialValue);
+                });
+            }
+            else {
+                this.#openNativePicker =
+                    this.#createNativePickerInstance(initialSearch);
+                this.showMorePickerId = this.#openNativePicker.componentInstance.id;
+                this.#openNativePicker.componentInstance.addClick.subscribe(() => {
+                    this.addButtonClicked();
+                });
+                this.#openNativePicker.closed.subscribe((closeArgs) => {
+                    let selectedItems;
+                    if (closeArgs.reason === 'save') {
+                        selectedItems = [];
+                        this.data.forEach((item, dataIndex) => {
+                            if (closeArgs.data.some((savedItem) => {
+                                return savedItem.index === dataIndex;
+                            })) {
+                                selectedItems.push(item);
+                            }
+                        });
+                    }
+                    else {
+                        selectedItems = initialValue;
+                    }
+                    this.#processPickerResult(selectedItems);
+                });
+                this.#changeDetector.markForCheck();
+            }
+        }
+    }
+    #createSelectionModalInstance(initialSearch) {
+        const initialValue = this.value;
+        const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
+        if (!modalConfig.itemTemplate) {
+            modalConfig.itemTemplate = this.searchResultTemplate;
+        }
+        if (this.idProperty === undefined) {
+            this.#logSvc.error("The lookup component's 'idProperty' input is required when `enableShowMore` and 'searchAsync' are used together.");
+        }
+        return this.#selectionModalSvc.open({
+            descriptorProperty: this.descriptorProperty,
+            idProperty: this.idProperty,
+            searchAsync: (args) => {
+                const searchAsyncArgs = {
+                    displayType: 'modal',
+                    offset: args.offset,
+                    searchText: args.searchText,
+                    continuationData: args.continuationData,
+                };
+                this.searchAsync.emit(searchAsyncArgs);
+                return searchAsyncArgs.result;
+            },
+            selectMode: this.selectMode,
+            addClick: () => {
+                this.addButtonClicked();
+            },
+            initialSearch,
+            itemTemplate: modalConfig.itemTemplate,
+            showAddButton: this.showAddButton,
+            title: modalConfig.title,
+            value: initialValue,
+            wrapperClass: this.wrapperClass,
+        });
+    }
+    #createNativePickerInstance(initialSearch) {
+        const initialValue = this.value;
+        const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
+        if (!modalConfig.itemTemplate) {
+            modalConfig.itemTemplate = this.searchResultTemplate;
+        }
+        const contextProviderValue = new SkyLookupShowMoreNativePickerContext(this.descriptorProperty, initialSearch, initialValue, this.data, this.searchOrDefault, this.selectMode, this.showAddButton, modalConfig);
+        return this.#modalService.open(SkyLookupShowMoreModalComponent, {
+            providers: [
+                {
+                    provide: SkyLookupShowMoreNativePickerContext,
+                    useValue: contextProviderValue,
+                },
+                {
+                    provide: SkyLookupAdapterService,
+                    useValue: this.#adapter,
+                },
+            ],
+            size: 'large',
+            wrapperClass: this.wrapperClass,
+        });
+    }
+    #processPickerResult(selectedItems) {
+        this.#openSelectionModal = undefined;
+        this.#openNativePicker = undefined;
+        this.showMorePickerId = undefined;
+        /* istanbul ignore next */
+        selectedItems = selectedItems || [];
+        this.writeValue(selectedItems);
+        this.#focusInput();
+        this.#changeDetector.markForCheck();
+    }
+    onSearchAsync(args) {
+        this.searchAsync.emit(args);
+    }
+    #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);
+    }
+    #addEventListeners() {
+        this.#idle = new Subject();
+        this.#focusInputOnHostClick();
+    }
+    #removeEventListeners() {
+        this.#idle.next();
+        this.#idle.complete();
+    }
+    #focusInputOnHostClick() {
+        let hostElement = !this.inputBoxHostSvc
+            ? this.#elementRef.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();
+        });
+        if (hostElement) {
+            fromEvent(hostElement, 'mouseup')
+                .pipe(takeUntil(this.#idle))
+                .subscribe(() => {
+                const classList = documentObj.activeElement.classList;
+                if (!classList || !classList.contains('sky-token')) {
+                    this.#focusInput();
+                }
+            });
+        }
+    }
+    #focusInput() {
+        if (this.lookupWrapperRef) {
+            this.#adapter.focusInput(this.lookupWrapperRef);
+        }
+    }
+    #onAddButtonComplete(args) {
+        if (this.#openSelectionModal) {
+            // Notify the selection modal of the new item. The selection
+            // modal will decide whether the new item should be added
+            // to the value when the user confirms or cancels the
+            // selection modal.
+            this.#openSelectionModal.addItem(args.item);
+        }
+        else {
+            let addItemToValue;
+            if (this.#hasSearchAsync()) {
+                addItemToValue = true;
+            }
+            else {
+                if (args.data) {
+                    this.data = args.data;
+                }
+                if (this.data.indexOf(args.item) >= 0) {
+                    if (this.#openNativePicker) {
+                        // Notify the picker of the new item. The picker will
+                        // decide whether the new item should be added to the
+                        // value when the user confirms or cancels the picker.
+                        this.#openNativePicker
+                            .componentInstance.onItemSelect(true, { value: args.item, selected: false });
+                    }
+                    else {
+                        addItemToValue = true;
+                    }
+                }
+            }
+            if (addItemToValue) {
+                const newValue = this.selectMode === 'multiple'
+                    ? this.value.concat(args.item)
+                    : [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();
+            }
+        }
+    }
+    #hasSearchAsync() {
+        return this.searchAsync.observers.length > 0;
+    }
+    #pickerModalOpen() {
+        return !!(this.#openNativePicker || this.#openSelectionModal);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", 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: SkySelectionModalService }, { token: i1.SkyLogService }, { token: i5$1.NgControl, optional: true, self: true }, { token: i5.SkyInputBoxHostService, optional: true }, { token: i8.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"searchOrDefault\"\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            (tokensRendered)=\"onTokensRendered()\"\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.id]=\"controlId\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n            <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplateRef\"\n              ></ng-container>\n            </ng-container>\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.id]=\"controlId\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n            <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplateRef\"\n              ></ng-container>\n            </ng-container>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\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 *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\" iconType=\"skyux\" icon=\"search\"></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 var(--sky-highlight-color-danger);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{margin-top:-26px;padding-top:26px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}: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{margin-top:-26px;padding-top:26px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", 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"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i6.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"searchOrDefault\"\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            (tokensRendered)=\"onTokensRendered()\"\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.id]=\"controlId\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n            <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplateRef\"\n              ></ng-container>\n            </ng-container>\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.id]=\"controlId\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n            <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplateRef\"\n              ></ng-container>\n            </ng-container>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\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 *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\" iconType=\"skyux\" icon=\"search\"></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 var(--sky-highlight-color-danger);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{margin-top:-26px;padding-top:26px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}: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{margin-top:-26px;padding-top:26px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.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: SkySelectionModalService }, { type: i1.SkyLogService }, { type: i5$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i5.SkyInputBoxHostService, decorators: [{
+                    type: Optional
+                }] }, { type: i8.SkyThemeService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], autocompleteAttribute: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], enableShowMore: [{
+                type: Input
+            }], placeholderText: [{
+                type: Input
+            }], idProperty: [{
+                type: Input
+            }], showAddButton: [{
+                type: Input
+            }], showMoreConfig: [{
+                type: Input
+            }], selectMode: [{
+                type: Input
+            }], wrapperClass: [{
+                type: Input
+            }], addClick: [{
+                type: Output
+            }], autocompleteInputDirective: [{
+                type: ViewChild,
+                args: [SkyAutocompleteInputDirective, {
+                        read: SkyAutocompleteInputDirective,
+                        static: false,
+                    }]
+            }], showMoreButtonTemplateRef: [{
+                type: ViewChild,
+                args: ['showMoreButtonTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], inputTemplateRef: [{
+                type: ViewChild,
+                args: ['inputTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], lookupWrapperRef: [{
+                type: ViewChild,
+                args: ['lookupWrapper', {
+                        read: ElementRef,
+                    }]
+            }], searchIconTemplateRef: [{
+                type: ViewChild,
+                args: ['searchIconTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyLookupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupModule, declarations: [SkyLookupComponent, SkyLookupShowMoreModalComponent], imports: [CommonModule,
+            FormsModule,
+            SkyAutocompleteModule,
+            SkyCheckboxModule,
+            SkyIconModule,
+            SkyInfiniteScrollModule,
+            SkyI18nModule,
+            SkyLookupResourcesModule,
+            SkyModalModule,
+            SkyRepeaterModule,
+            SkySearchModule,
+            SkySelectionModalModule,
+            SkyThemeModule,
+            SkyTokensModule,
+            SkyToolbarModule,
+            SkyViewkeeperModule,
+            SkyWaitModule], exports: [SkyLookupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupModule, imports: [CommonModule,
+            FormsModule,
+            SkyAutocompleteModule,
+            SkyCheckboxModule,
+            SkyIconModule,
+            SkyInfiniteScrollModule,
+            SkyI18nModule,
+            SkyLookupResourcesModule,
+            SkyModalModule,
+            SkyRepeaterModule,
+            SkySearchModule,
+            SkySelectionModalModule,
+            SkyThemeModule,
+            SkyTokensModule,
+            SkyToolbarModule,
+            SkyViewkeeperModule,
+            SkyWaitModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLookupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyLookupComponent, SkyLookupShowMoreModalComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SkyAutocompleteModule,
+                        SkyCheckboxModule,
+                        SkyIconModule,
+                        SkyInfiniteScrollModule,
+                        SkyI18nModule,
+                        SkyLookupResourcesModule,
+                        SkyModalModule,
+                        SkyRepeaterModule,
+                        SkySearchModule,
+                        SkySelectionModalModule,
+                        SkyThemeModule,
+                        SkyTokensModule,
+                        SkyToolbarModule,
+                        SkyViewkeeperModule,
+                        SkyWaitModule,
+                    ],
+                    exports: [SkyLookupComponent],
+                }]
+        }] });
+
+/**
+ * @deprecated Use `SkyLookupSelectModeType` instead.
+ * @internal
+ */
+var SkyLookupSelectMode;
+(function (SkyLookupSelectMode) {
+    /**
+     * Restricts users to a single selection.
+     */
+    SkyLookupSelectMode["single"] = "single";
+    /**
+     * Allows users to select multiple items.
+     */
+    SkyLookupSelectMode["multiple"] = "multiple";
+})(SkyLookupSelectMode || (SkyLookupSelectMode = {}));
+
+/**
+ * Specifies configuration options to launch a custom picker when users select
+ * the button to view all options.
+ */
+class SkyLookupShowMoreCustomPickerContext {
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SKY_COUNTRY_FIELD_CONTEXT, SkyAutocompleteModule, SkyCountryFieldModule, SkyLookupModule, SkyLookupSelectMode, SkyLookupShowMoreCustomPickerContext, SkySearchComponent, SkySearchModule, SkySelectionModalModule, SkySelectionModalService, SkyAutocompleteInputDirective as λ1, SkyAutocompleteComponent as λ2, SkyCountryFieldComponent as λ3, SkyLookupComponent as λ4 };
+//# sourceMappingURL=skyux-lookup.mjs.map