@skyux/lookup 5.7.2 → 6.0.0-beta.2

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

@@ -1,610 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Optional, Output, Self, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
-import { NgControl } from '@angular/forms';
-import { SkyAppWindowRef } from '@skyux/core';
-import { SkyInputBoxHostService } from '@skyux/forms';
-import { SkyLibResourcesService } from '@skyux/i18n';
-import { SkyTokensMessageType, } from '@skyux/indicators';
-import { SkyModalService } from '@skyux/modals';
-import { SkyThemeService } from '@skyux/theme';
-import { Subject, fromEvent as observableFromEvent } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
-import { SkyAutocompleteInputDirective } from '../autocomplete/autocomplete-input.directive';
-import { SkyAutocompleteMessageType } from '../autocomplete/types/autocomplete-message-type';
-import { SkyLookupAdapterService } from './lookup-adapter.service';
-import { SkyLookupAutocompleteAdapter } from './lookup-autocomplete-adapter';
-import { SkyLookupShowMoreAsyncModalComponent } from './lookup-show-more-async-modal.component';
-import { SkyLookupShowMoreModalComponent } from './lookup-show-more-modal.component';
-import { SkyLookupShowMoreNativePickerAsyncContext } from './types/lookup-show-more-native-picker-async-context';
-import { SkyLookupShowMoreNativePickerContext } from './types/lookup-show-more-native-picker-context';
-import * as i0 from "@angular/core";
-import * as i1 from "@skyux/core";
-import * as i2 from "@angular/forms";
-import * as i3 from "./lookup-adapter.service";
-import * as i4 from "@skyux/modals";
-import * as i5 from "@skyux/i18n";
-import * as i6 from "@skyux/forms";
-import * as i7 from "@skyux/theme";
-import * as i8 from "../autocomplete/autocomplete.component";
-import * as i9 from "@skyux/indicators";
-import * as i10 from "@angular/common";
-import * as i11 from "../autocomplete/autocomplete-input.directive";
-export class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
-    constructor(changeDetector, elementRef, windowRef, ngControl, adapter, modalService, resourcesService, inputBoxHostSvc, themeSvc) {
-        super();
-        this.changeDetector = changeDetector;
-        this.elementRef = elementRef;
-        this.windowRef = windowRef;
-        this.adapter = adapter;
-        this.modalService = modalService;
-        this.resourcesService = resourcesService;
-        this.inputBoxHostSvc = inputBoxHostSvc;
-        this.themeSvc = themeSvc;
-        /**
-         * Indicates whether to disable the lookup field.
-         */
-        this.disabled = false;
-        /**
-         * Indicates whether to enable users to open a picker where they can view all options.
-         */
-        this.enableShowMore = false;
-        /**
-         * Indicates whether to display a button that lets users add options to the list.
-         */
-        this.showAddButton = false;
-        /**
-         * 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.ngUnsubscribe = new Subject();
-        this.idle = new Subject();
-        this.markForTokenFocusOnKeyUp = 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 = () => { };
-        ngControl.valueAccessor = this;
-    }
-    /**
-     * Specifies a 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.searchAsync.observers.length === 0) {
-            this.openNativePicker.componentInstance.updateItemData(value);
-        }
-    }
-    get data() {
-        return this._data;
-    }
-    /**
-     * Specifies whether users can select one option or multiple options.
-     * @default "mulitple"
-     */
-    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.openNativePicker) {
-            this.tokens = this.parseTokens(newValue);
-        }
-        this.onChange(this._value);
-        this.onTouched();
-    }
-    set autocompleteInputDirective(value) {
-        this._autocompleteInputDirective = value;
-        this.updateForSelectMode();
-    }
-    get autocompleteInputDirective() {
-        return this._autocompleteInputDirective;
-    }
-    ngOnInit() {
-        if (this.inputBoxHostSvc) {
-            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.sendAutocompleteMessage(SkyAutocompleteMessageType.RepositionDropdown);
-            this.onChange(this._value);
-            this.onTouched();
-        }
-    }
-    onTokensFocusIndexOverRange() {
-        this.windowRef.nativeWindow.setTimeout(() => {
-            this.focusInput();
-        });
-    }
-    onTokensKeyUp(event) {
-        /* istanbul ignore else */
-        if (this.selectMode !== 'single') {
-            /* tslint:disable-next-line:switch-default */
-            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;
-            }
-        }
-    }
-    writeValue(value) {
-        this.value = value ? value : [];
-        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() {
-        this.autocompleteInputDirective.value = undefined;
-        this.autocompleteInputDirective.inputTextValue = undefined;
-    }
-    // Handles when to focus on the tokens.
-    // Check for empty search text on keydown, before the escape key is fully pressed.
-    // (Otherwise, a single character being escaped would register as empty on keyup.)
-    // If empty on keydown, set a flag so that the appropriate action can be taken on keyup.
-    inputKeydown(event, value) {
-        /* 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];
-        }
-        this.openPicker(isValueInTextBox ? '' : this.autocompleteInputDirective.inputTextValue);
-        this.autocompleteInputDirective.restoreInputTextValueToPreviousState();
-    }
-    onShowMoreClick(event) {
-        /* Sanity check */
-        /* istanbul ignore else*/
-        if (event) {
-            this.openPicker(event.inputValue);
-        }
-    }
-    createNativePickerInstance(initialSearch) {
-        var _a;
-        const initialValue = this.value;
-        const modalConfig = ((_a = this.showMoreConfig) === null || _a === void 0 ? void 0 : _a.nativePickerConfig) || {};
-        if (!modalConfig.itemTemplate) {
-            modalConfig.itemTemplate = this.searchResultTemplate;
-        }
-        let contextProviderType;
-        let contextProviderValue;
-        let modalComponentType;
-        if (this.searchAsync.observers.length > 0) {
-            contextProviderType = SkyLookupShowMoreNativePickerAsyncContext;
-            modalComponentType = SkyLookupShowMoreAsyncModalComponent;
-            contextProviderValue = new SkyLookupShowMoreNativePickerAsyncContext();
-            contextProviderValue.idProperty = this.idProperty;
-            contextProviderValue.searchAsync = (args) => {
-                this.searchAsync.emit(args);
-                return args.result;
-            };
-        }
-        else {
-            contextProviderType = SkyLookupShowMoreNativePickerContext;
-            modalComponentType = SkyLookupShowMoreModalComponent;
-            contextProviderValue = new SkyLookupShowMoreNativePickerContext();
-            contextProviderValue.items = this.data;
-            contextProviderValue.search = this.search;
-        }
-        contextProviderValue.descriptorProperty = this.descriptorProperty;
-        contextProviderValue.initialSearch = initialSearch;
-        contextProviderValue.initialValue = initialValue;
-        contextProviderValue.selectMode = this.selectMode;
-        contextProviderValue.showAddButton = this.showAddButton;
-        contextProviderValue.userConfig = modalConfig;
-        return this.modalService.open(modalComponentType, {
-            providers: [
-                {
-                    provide: contextProviderType,
-                    useValue: contextProviderValue,
-                },
-            ],
-            wrapperClass: this.wrapperClass,
-        });
-    }
-    openPicker(initialSearch) {
-        var _a;
-        if ((_a = this.showMoreConfig) === null || _a === void 0 ? void 0 : _a.customPicker) {
-            this.showMoreConfig.customPicker.open({
-                items: this.data,
-                initialSearch: initialSearch,
-                initialValue: this.value,
-            });
-        }
-        else {
-            const initialValue = this.value;
-            this.openNativePicker = this.createNativePickerInstance(initialSearch);
-            this.openNativePicker.componentInstance.addClick.subscribe(() => {
-                this.addButtonClicked();
-            });
-            this.openNativePicker.closed.subscribe((closeArgs) => {
-                this.openNativePicker = undefined;
-                if (closeArgs.reason === 'save') {
-                    let selectedItems = [];
-                    if (this.searchAsync.observers.length > 0) {
-                        selectedItems = closeArgs.data.map((item) => item.itemData);
-                    }
-                    else {
-                        this.data.forEach((item, dataIndex) => {
-                            if (closeArgs.data.some((savedItem) => {
-                                return savedItem.index === dataIndex;
-                            })) {
-                                selectedItems.push(item);
-                            }
-                        });
-                    }
-                    this.writeValue(selectedItems);
-                }
-                else {
-                    this.writeValue(initialValue);
-                }
-                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;
-            // If items have a unique identifier, don't allow the same item to be added twice.
-            if (!this.idProperty ||
-                !this.value.some((existingItem) => existingItem[this.idProperty] === item[this.idProperty])) {
-                selectedItems.push(item);
-            }
-            this.clearSearchText();
-        }
-        this.writeValue(selectedItems);
-    }
-    addEventListeners() {
-        this.idle = new Subject();
-        this.focusInputOnHostClick();
-    }
-    removeEventListeners() {
-        this.idle.next();
-        this.idle.complete();
-    }
-    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.
-        observableFromEvent(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();
-        });
-        observableFromEvent(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();
-        });
-        observableFromEvent(hostElement, 'mouseup')
-            .pipe(takeUntil(this.idle))
-            .subscribe(() => {
-            const classList = documentObj.activeElement.classList;
-            if (!classList || !classList.contains('sky-token')) {
-                this.focusInput();
-            }
-        });
-    }
-    focusInput() {
-        this.adapter.focusInput(this.lookupWrapperRef);
-    }
-    onAddButtonComplete(args) {
-        if (args.data) {
-            this.data = args.data;
-        }
-        if (this.data.indexOf(args.item) >= 0) {
-            if (this.openNativePicker) {
-                this.openNativePicker
-                    .componentInstance.onItemSelect(true, { value: args.item, selected: false });
-            }
-            else {
-                let newValue = this.value;
-                if (this.selectMode === 'multiple') {
-                    newValue = this.value.concat(args.item);
-                }
-                else {
-                    newValue = [args.item];
-                }
-                this.writeValue(newValue);
-            }
-        }
-    }
-    parseTokens(data) {
-        return data.map((item) => {
-            return {
-                value: item,
-            };
-        });
-    }
-    sendAutocompleteMessage(type) {
-        this.autocompleteController.next({ type });
-    }
-    sendTokensMessage(type) {
-        this.tokensController.next({ type });
-    }
-    updateForSelectMode() {
-        if (this.autocompleteInputDirective) {
-            if (this.selectMode === 'single') {
-                this.autocompleteInputDirective.value = this.value && this.value[0];
-            }
-            else {
-                this.clearSearchText();
-            }
-        }
-    }
-}
-SkyLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAppWindowRef }, { token: i2.NgControl, optional: true, self: true }, { token: i3.SkyLookupAdapterService }, { token: i4.SkyModalService }, { token: i5.SkyLibResourcesService }, { token: i6.SkyInputBoxHostService, optional: true }, { token: i7.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          <sky-tokens\n            *ngIf=\"selectMode === 'multiple'\"\n            class=\"sky-lookup-tokens\"\n            [disabled]=\"disabled\"\n            [displayWith]=\"descriptorProperty\"\n            [focusable]=\"false\"\n            [messageStream]=\"tokensController\"\n            [trackWith]=\"idProperty\"\n            [tokens]=\"tokens\"\n            (keyup)=\"onTokensKeyUp($event)\"\n            (tokensChange)=\"onTokensChange($event)\"\n            (tokenSelected)=\"enableShowMore ? openPicker(undefined) : undefined\"\n            (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event, $event.target.value)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n          </sky-tokens>\n          <div\n            *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"searchIconTemplateRef\"\n          ></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n  >\n    <sky-icon\n      *skyThemeIf=\"'default'\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      iconType=\"skyux\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n  </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"], components: [{ type: i8.SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { type: i9.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange"] }, { type: i9.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-lookup',
-                    templateUrl: './lookup.component.html',
-                    styleUrls: ['./lookup.component.scss'],
-                    providers: [SkyLookupAdapterService],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAppWindowRef }, { type: i2.NgControl, decorators: [{
-                    type: Self
-                }, {
-                    type: Optional
-                }] }, { type: i3.SkyLookupAdapterService }, { type: i4.SkyModalService }, { type: i5.SkyLibResourcesService }, { type: i6.SkyInputBoxHostService, decorators: [{
-                    type: Optional
-                }] }, { type: i7.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,
-                    }]
-            }] } });
-//# sourceMappingURL=lookup.component.js.map