@skyux/lookup 5.2.2 → 5.5.0

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

@@ -0,0 +1,732 @@
+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 { from, fromEvent as observableFromEvent, of, Subject, } from 'rxjs';
+import { debounceTime, map, switchMap, take, takeUntil } from 'rxjs/operators';
+import { SkyAutocompleteMessageType } from './types/autocomplete-message-type';
+import { SkyAutocompleteAdapterService } from './autocomplete-adapter.service';
+import { skyAutocompleteDefaultSearchFunction } from './autocomplete-default-search-function';
+import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
+import { normalizeDiacritics } from '../shared/sky-lookup-string-utils';
+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();
+        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 the `search` property 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.
+     */
+    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;
+                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(this.searchText).toLocaleUpperCase();
+        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