@skyux/lookup 5.7.2 → 6.0.0-beta.2

package/esm2015/lib/modules/autocomplete/autocomplete.component.js

@@ -1,745 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, Optional, Output, TemplateRef, ViewChild, } from '@angular/core';
-import { SkyAffixAutoFitContext, SkyAffixService, SkyOverlayService, } from '@skyux/core';
-import { SkyInputBoxHostService } from '@skyux/forms';
-import { Subject, from, fromEvent as observableFromEvent, of, } from 'rxjs';
-import { debounceTime, map, switchMap, take, takeUntil } from 'rxjs/operators';
-import { normalizeDiacritics } from '../shared/sky-lookup-string-utils';
-import { SkyAutocompleteAdapterService } from './autocomplete-adapter.service';
-import { skyAutocompleteDefaultSearchFunction } from './autocomplete-default-search-function';
-import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
-import { SkyAutocompleteMessageType } from './types/autocomplete-message-type';
-import * as i0 from "@angular/core";
-import * as i1 from "@skyux/core";
-import * as i2 from "./autocomplete-adapter.service";
-import * as i3 from "@skyux/forms";
-import * as i4 from "@skyux/indicators";
-import * as i5 from "@skyux/theme";
-import * as i6 from "@angular/common";
-import * as i7 from "@skyux/i18n";
-import * as i8 from "./autocomplete-search-async-disabled.pipe";
-let uniqueId = 0;
-export class SkyAutocompleteComponent {
-    constructor(changeDetector, elementRef, affixService, adapterService, overlayService, inputBoxHostSvc) {
-        this.changeDetector = changeDetector;
-        this.elementRef = elementRef;
-        this.affixService = affixService;
-        this.adapterService = adapterService;
-        this.overlayService = overlayService;
-        this.inputBoxHostSvc = inputBoxHostSvc;
-        /**
-         * @internal
-         * Indicates whether to display a button in the dropdown that opens a picker where users can view all options.
-         */
-        this.enableShowMore = false;
-        /**
-         * @internal
-         * Indicates whether to display a button that lets users add options to the data source.
-         */
-        this.showAddButton = false;
-        /**
-         * @internal
-         * Allows async search to be disabled even when a listener is specified for
-         * the `searchAsync` output.
-         */
-        this.searchAsyncDisabled = false;
-        /**
-         * @internal
-         * Fires when users select the button to add options to the data source.
-         */
-        this.addClick = new EventEmitter();
-        /**
-         * @internal
-         * Fires when users select the button to view all options.
-         */
-        this.showMoreClick = new EventEmitter();
-        /**
-         * Fires when users enter new search information and allows results to be
-         * returned via an observable.
-         */
-        this.searchAsync = new EventEmitter();
-        this.isOpen = false;
-        this.isSearchingAsync = false;
-        /**
-         * Index that indicates which descendant of the overlay currently has focus.
-         */
-        this.activeElementIndex = -1;
-        this.inputDirectiveUnsubscribe = new Subject();
-        this.ngUnsubscribe = new Subject();
-        /**
-         * Elements within the autocomplete dropdown that are focusable.
-         * These are typically the search results and action buttons, but could also be
-         * elements provided in the consumer's own template.
-         */
-        this.overlayFocusableElements = [];
-        this._selectionChange = new EventEmitter();
-        const id = ++uniqueId;
-        this.resultsListId = `sky-autocomplete-list-${id}`;
-        this.resultsWrapperId = `sky-autocomplete-wrapper-${id}`;
-    }
-    /**
-     * Specifies a static data source for the autocomplete component to search
-     * when users enter text. For a dynamic data source such as an array that
-     * changes due to server calls, use `search` or `searchAsync` instead.
-     */
-    set data(value) {
-        this._data = value;
-    }
-    get data() {
-        return this._data || [];
-    }
-    /**
-     * Specifies how many milliseconds to wait before searching while users
-     * enter text in the autocomplete field.
-     * @default 0
-     */
-    set debounceTime(value) {
-        this._debounceTime = value;
-    }
-    get debounceTime() {
-        return this._debounceTime || 0;
-    }
-    /**
-     * Specifies an object property to display in the text input after users
-     * select an item in the dropdown list.
-     * @default "name"
-     */
-    set descriptorProperty(value) {
-        this._descriptorProperty = value;
-    }
-    get descriptorProperty() {
-        return this._descriptorProperty || 'name';
-    }
-    /**
-     * Specifies an observable of `SkyAutocompleteMessage` that can close the dropdown.
-     * @internal
-     */
-    set messageStream(value) {
-        this._messageStream = value;
-        this.initMessageStream();
-    }
-    get messageStream() {
-        return this._messageStream;
-    }
-    /**
-     * Specifies the object properties to search.
-     * @default ["name"]
-     */
-    set propertiesToSearch(value) {
-        this._propertiesToSearch = value;
-    }
-    get propertiesToSearch() {
-        return this._propertiesToSearch || ['name'];
-    }
-    /**
-     * Specifies a function to dynamically manage the data source when users
-     * change the text in the 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. If the
-     * search requires calling a remote data source, use `searchAsync` instead of
-     * `search`.
-     */
-    set search(value) {
-        this._search = value;
-    }
-    get search() {
-        return (this._search ||
-            skyAutocompleteDefaultSearchFunction({
-                propertiesToSearch: this.propertiesToSearch,
-                searchFilters: this.searchFilters,
-            }));
-    }
-    /**
-     * Specifies a template to format each search result in the dropdown list.
-     * The autocomplete component injects search result values into the template
-     * as `item` variables that reference all of the object properties of the search results.
-     */
-    set searchResultTemplate(value) {
-        this._searchResultTemplate = value;
-    }
-    get searchResultTemplate() {
-        return this._searchResultTemplate || this.defaultSearchResultTemplate;
-    }
-    /**
-     * Specifies 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;
-    }
-    get searchTextMinimumCharacters() {
-        return this._searchTextMinimumCharacters > 0
-            ? this._searchTextMinimumCharacters
-            : 1;
-    }
-    /**
-     * Specifies 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;
-    }
-    get searchResultsLimit() {
-        if (this._searchResultsLimit) {
-            return this._searchResultsLimit;
-        }
-        else {
-            return this.enableShowMore ? 5 : this._searchResultsLimit;
-        }
-    }
-    /**
-     * Fires when users select items in the dropdown list.
-     */
-    get selectionChange() {
-        return this._selectionChange;
-    }
-    //#endregion
-    //#region template_properties
-    get searchResults() {
-        return this._searchResults || [];
-    }
-    get highlightText() {
-        return this._highlightText || [];
-    }
-    get showActionsArea() {
-        return this.showAddButton || this.enableShowMore;
-    }
-    set inputDirective(directive) {
-        if (this._inputDirective !== directive) {
-            if (!directive) {
-                throw Error([
-                    'The SkyAutocompleteComponent requires a ContentChild input or',
-                    'textarea bound with the SkyAutocomplete directive. For example:',
-                    '`<input type="text" skyAutocomplete>`.',
-                ].join(' '));
-            }
-            // 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);
-            });
-            this._inputDirective.blur
-                .pipe(takeUntil(this.inputDirectiveUnsubscribe))
-                .subscribe(() => {
-                this.inputDirective.onTouched();
-            });
-            this._inputDirective.focus
-                .pipe(takeUntil(this.inputDirectiveUnsubscribe))
-                .subscribe(() => {
-                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;
-    }
-    ngAfterContentInit() {
-        if (!this.inputDirective) {
-            throw Error([
-                'The SkyAutocompleteComponent requires a ContentChild input or',
-                'textarea bound with the SkyAutocomplete directive. For example:',
-                '`<input type="text" skyAutocomplete>`.',
-            ].join(' '));
-        }
-    }
-    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();
-        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 === null || activeElement === void 0 ? void 0 : activeElement.id;
-            const targetIsSearchResult = this.searchResults.find((r) => r.elementId === activeElementId);
-            /* tslint:disable-next-line:switch-default */
-            switch (key) {
-                case 'enter':
-                    if (targetIsSearchResult) {
-                        this.selectSearchResultById(activeElementId);
-                        if (!this.showActionsArea) {
-                            this.closeDropdown();
-                        }
-                        else {
-                            this.resetSearch();
-                        }
-                    }
-                    else {
-                        if (activeElement) {
-                            activeElement.click();
-                        }
-                    }
-                    event.preventDefault();
-                    event.stopPropagation();
-                    break;
-                case 'tab':
-                    if (targetIsSearchResult) {
-                        this.selectSearchResultById(activeElementId);
-                    }
-                    else {
-                        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 });
-        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) {
-        const isEmpty = !searchText || !searchText.trim() || searchText.match(/^\s+$/);
-        if (isEmpty) {
-            // Emit selectionChange if value has been cleared.
-            if (this.inputDirective.value) {
-                this.inputDirective.value = undefined;
-                this.selectionChange.emit({
-                    selectedItem: undefined,
-                });
-            }
-            if (!this.showActionsArea) {
-                this.closeDropdown();
-            }
-            else {
-                this.resetSearch();
-            }
-            this.isSearchingAsync = false;
-            this.changeDetector.markForCheck();
-            return;
-        }
-        const isLongEnough = searchText.length >= this.searchTextMinimumCharacters;
-        const isDifferent = searchText !== this.searchText;
-        this.searchText = searchText.trim();
-        if (isLongEnough && isDifferent) {
-            this.cancelCurrentSearch();
-            this.currentSearchSub = this.performSearch()
-                .pipe(take(1))
-                .subscribe((result) => {
-                const items = result.items.filter((item) => {
-                    return item && this.descriptorProperty in item;
-                });
-                this.isSearchingAsync = false;
-                this._searchResults = items.map((r, i) => {
-                    const result = {
-                        elementId: `${this.resultsListId}-item-${i}`,
-                        data: r,
-                    };
-                    return result;
-                });
-                this.searchResultsCount = result.totalCount;
-                this._highlightText = this.getHighlightText(this.searchText);
-                this.removeFocusedClass();
-                this.removeActiveDescendant();
-                if (this.searchResults.length > 0) {
-                    this.activeElementIndex = 0;
-                }
-                else {
-                    this.activeElementIndex = -1;
-                }
-                this.changeDetector.markForCheck();
-                if (this.isOpen) {
-                    // Let the results populate in the DOM before recalculating placement.
-                    setTimeout(() => {
-                        this.affixer.reaffix();
-                        this.changeDetector.detectChanges();
-                        this.initOverlayFocusableElements();
-                    });
-                }
-                else {
-                    this.openDropdown();
-                    this.changeDetector.markForCheck();
-                }
-            });
-        }
-        else {
-            this.isSearchingAsync = false;
-            this.changeDetector.markForCheck();
-        }
-    }
-    performSearch() {
-        if (!this.searchAsyncDisabled && this.searchAsync.observers.length > 0) {
-            const searchAsyncArgs = {
-                displayType: 'popover',
-                offset: 0,
-                searchText: this.searchText,
-            };
-            this.searchAsync.emit(searchAsyncArgs);
-            return searchAsyncArgs.result;
-        }
-        const result = this.search(this.searchText, this.data);
-        if (result instanceof Array) {
-            return of({
-                items: result,
-                totalCount: result.length,
-            });
-        }
-        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).data;
-        /* Sanity check */
-        /* istanbul ignore else */
-        if (result) {
-            this.searchText = result[this.descriptorProperty];
-            this.inputDirective.value = result;
-            this.selectionChange.emit({
-                selectedItem: result,
-            });
-        }
-    }
-    openDropdown() {
-        if (!this.overlay) {
-            const overlay = this.overlayService.create({
-                enableClose: false,
-                enablePointerEvents: true,
-                wrapperClass: this.wrapperClass,
-            });
-            overlay.attachTemplate(this.resultsTemplateRef);
-            this.overlay = overlay;
-            this.isOpen = true;
-            this.changeDetector.markForCheck();
-            this.initOverlayFocusableElements();
-            overlay.backdropClick
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe(() => {
-                /* Sanity check as you should not be able to active the directive from the backdrop */
-                /* istanbul ignore else */
-                if (document.activeElement !== this.inputDirective.inputElement) {
-                    this.inputDirective.restoreInputTextValueToPreviousState();
-                    this.closeDropdown();
-                }
-            });
-        }
-    }
-    closeDropdown() {
-        this.resetSearch();
-        this.isOpen = false;
-        this.destroyOverlay();
-        this.removeActiveDescendant();
-        this.changeDetector.markForCheck();
-    }
-    setActiveDescendant() {
-        const activeElement = this.overlayFocusableElements[this.activeElementIndex];
-        /* Sanity check */
-        /* istanbul ignore else */
-        if (activeElement) {
-            this.inputDirective.setActiveDescendant(activeElement.id);
-        }
-    }
-    removeActiveDescendant() {
-        /* tslint:disable-next-line:no-null-keyword */
-        this.inputDirective.setActiveDescendant(null);
-    }
-    resetSearch() {
-        this._searchResults = [];
-        this.searchText = '';
-        this._highlightText = [];
-        this.activeElementIndex = -1;
-        this.searchResultsCount = undefined;
-        this.removeActiveDescendant();
-        this.initOverlayFocusableElements();
-        this.changeDetector.markForCheck();
-    }
-    addInputEventListeners() {
-        const element = this.elementRef.nativeElement;
-        observableFromEvent(element, 'keydown')
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((event) => {
-            this.handleKeydown(event);
-        });
-        observableFromEvent(window, 'resize')
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            /* istanbul ignore else */
-            if (this.isOpen) {
-                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) {
-            const affixer = this.affixService.createAffixer(this.resultsRef);
-            this.adapterService.setDropdownWidth(this.elementRef, this.resultsRef, !!this.inputBoxHostSvc);
-            affixer.affixTo(this.elementRef.nativeElement, {
-                autoFitContext: SkyAffixAutoFitContext.Viewport,
-                enableAutoFit: true,
-                isSticky: true,
-                placement: 'below',
-                horizontalAlignment: 'left',
-            });
-            this.affixer = affixer;
-        }
-    }
-    destroyAffixer() {
-        if (this.affixer) {
-            this.affixer.destroy();
-            this.affixer = undefined;
-        }
-    }
-    initMessageStream() {
-        /* istanbul ignore if */
-        if (this.messageStreamSub) {
-            this.messageStreamSub.unsubscribe();
-        }
-        if (this.messageStream) {
-            this.messageStreamSub = this.messageStream
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe((message) => {
-                /* tslint:disable-next-line:switch-default */
-                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();
-        }
-    }
-}
-SkyAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: i2.SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i3.SkyInputBoxHostService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "defaultSearchResultTemplate", first: true, predicate: ["defaultSearchResultTemplate"], descendants: true, read: TemplateRef }, { propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen && searchText\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n  [attr.id]=\"resultsWrapperId\"\n>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n  <div\n    class=\"sky-autocomplete-results-container\"\n    [skyThemeClass]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (keydown)=\"handleKeydown($event)\"\n    #resultsRef\n  >\n    <div\n      *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n      class=\"sky-autocomplete-results-waiting\"\n    >\n      <sky-wait [isWaiting]=\"true\"></sky-wait>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n  <div\n    *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n    class=\"sky-autocomplete-results\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.id]=\"resultsListId\"\n  >\n    <ng-container *ngFor=\"let result of searchResults; let i = index\">\n      <div\n        *ngIf=\"!searchResultsLimit || i < searchResultsLimit\"\n        class=\"sky-autocomplete-result\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"\n        sky-autocomplete-action\n        sky-autocomplete-action-more\n        sky-btn\n        sky-btn-link\n      \"\n      type=\"button\"\n      (click)=\"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=\"\n        sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\n      \"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (click)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], components: [{ type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i7.SkyLibResourcesPipe, "skyAutocompleteSearchAsyncDisabled": i8.SkyAutcompleteSearchAsyncDisabledPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-autocomplete',
-                    templateUrl: './autocomplete.component.html',
-                    styleUrls: ['./autocomplete.component.scss'],
-                    providers: [SkyAutocompleteAdapterService],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: i2.SkyAutocompleteAdapterService }, { type: i1.SkyOverlayService }, { type: i3.SkyInputBoxHostService, decorators: [{
-                    type: Optional
-                }] }]; }, 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
-            }], defaultSearchResultTemplate: [{
-                type: ViewChild,
-                args: ['defaultSearchResultTemplate', {
-                        read: TemplateRef,
-                        static: false,
-                    }]
-            }], inputDirective: [{
-                type: ContentChild,
-                args: [SkyAutocompleteInputDirective]
-            }], resultsTemplateRef: [{
-                type: ViewChild,
-                args: ['resultsTemplateRef', {
-                        read: TemplateRef,
-                    }]
-            }], resultsRef: [{
-                type: ViewChild,
-                args: ['resultsRef', {
-                        read: ElementRef,
-                    }]
-            }] } });
-//# sourceMappingURL=autocomplete.component.js.map