@skyux/lookup 6.24.0 → 6.25.1

package/fesm2020/skyux-lookup.mjs

@@ -1109,10 +1109,10 @@ _SkyAutocompleteComponent_activeElementIndex = new WeakMap(), _SkyAutocompleteCo
     }
 };
 SkyAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i7.SkyInputBoxHostService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "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.data-descriptor-value]=\"result.data[descriptorProperty]\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate || defaultSearchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n      type=\"button\"\n      (mousedown)=\"moreButtonClicked()\"\n    >\n      <ng-container\n        *ngIf=\"\n          !(\n            searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n          ) &&\n          searchResults.length === 0 &&\n          !searchText\n        \"\n      >\n        {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          (searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n          !searchText\n        \"\n      >\n        {{\n          'skyux_autocomplete_show_all_count'\n            | skyLibResources: (data.length | skyNumeric: { truncate: false })\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"searchText\">\n        {{\n          'skyux_autocomplete_show_matches_count'\n            | skyLibResources\n              : (searchResultsCount === undefined\n                  ? data.length\n                  : (searchResultsCount | skyNumeric: { truncate: false }))\n        }}\n      </ng-container>\n    </button>\n    <div\n      *ngIf=\"searchText && searchResults.length === 0\"\n      class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n    <button\n      *ngIf=\"showAddButton\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (mousedown)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], components: [{ type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i7$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe, "skyAutocompleteSearchAsyncDisabled": SkyAutcompleteSearchAsyncDisabledPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n  [attr.id]=\"resultsWrapperId\"\n>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n  <div\n    class=\"sky-autocomplete-results-container\"\n    [skyThemeClass]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (keydown)=\"handleKeydown($event)\"\n    #resultsRef\n  >\n    <div\n      *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n      class=\"sky-autocomplete-results-waiting\"\n    >\n      <sky-wait [isWaiting]=\"true\"></sky-wait>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n  <div\n    *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n    class=\"sky-autocomplete-results\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.id]=\"resultsListId\"\n  >\n    <ng-container *ngFor=\"let result of searchResults; let i = index\">\n      <div\n        *ngIf=\"!searchResultsLimit || i < searchResultsLimit\"\n        class=\"sky-autocomplete-result\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n        [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate || defaultSearchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n      type=\"button\"\n      (mousedown)=\"moreButtonClicked()\"\n    >\n      <ng-container\n        *ngIf=\"\n          !(\n            searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n          ) &&\n          searchResults.length === 0 &&\n          !searchText\n        \"\n      >\n        {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          (searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n          !searchText\n        \"\n      >\n        {{\n          'skyux_autocomplete_show_all_count'\n            | skyLibResources: (data.length | skyNumeric: { truncate: false })\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"searchText\">\n        {{\n          'skyux_autocomplete_show_matches_count'\n            | skyLibResources\n              : (searchResultsCount === undefined\n                  ? data.length\n                  : (searchResultsCount | skyNumeric: { truncate: false }))\n        }}\n      </ng-container>\n    </button>\n    <div\n      *ngIf=\"searchText && searchResults.length === 0\"\n      class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n    <button\n      *ngIf=\"showAddButton\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (mousedown)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], components: [{ type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i7$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe, "skyAutocompleteSearchAsyncDisabled": SkyAutcompleteSearchAsyncDisabledPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen && searchText\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n  [attr.id]=\"resultsWrapperId\"\n>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n  <div\n    class=\"sky-autocomplete-results-container\"\n    [skyThemeClass]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (keydown)=\"handleKeydown($event)\"\n    #resultsRef\n  >\n    <div\n      *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n      class=\"sky-autocomplete-results-waiting\"\n    >\n      <sky-wait [isWaiting]=\"true\"></sky-wait>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n  <div\n    *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n    class=\"sky-autocomplete-results\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.id]=\"resultsListId\"\n  >\n    <ng-container *ngFor=\"let result of searchResults; let i = index\">\n      <div\n        *ngIf=\"!searchResultsLimit || i < searchResultsLimit\"\n        class=\"sky-autocomplete-result\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n        [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate || defaultSearchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n      type=\"button\"\n      (mousedown)=\"moreButtonClicked()\"\n    >\n      <ng-container\n        *ngIf=\"\n          !(\n            searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n          ) &&\n          searchResults.length === 0 &&\n          !searchText\n        \"\n      >\n        {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          (searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n          !searchText\n        \"\n      >\n        {{\n          'skyux_autocomplete_show_all_count'\n            | skyLibResources: (data.length | skyNumeric: { truncate: false })\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"searchText\">\n        {{\n          'skyux_autocomplete_show_matches_count'\n            | skyLibResources\n              : (searchResultsCount === undefined\n                  ? data.length\n                  : (searchResultsCount | skyNumeric: { truncate: false }))\n        }}\n      </ng-container>\n    </button>\n    <div\n      *ngIf=\"searchText && searchResults.length === 0\"\n      class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n    <button\n      *ngIf=\"showAddButton\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (mousedown)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"] }]
+            args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n  [attr.id]=\"resultsWrapperId\"\n>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n  <div\n    class=\"sky-autocomplete-results-container\"\n    [skyThemeClass]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (keydown)=\"handleKeydown($event)\"\n    #resultsRef\n  >\n    <div\n      *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n      class=\"sky-autocomplete-results-waiting\"\n    >\n      <sky-wait [isWaiting]=\"true\"></sky-wait>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n  <div\n    *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n    class=\"sky-autocomplete-results\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.id]=\"resultsListId\"\n  >\n    <ng-container *ngFor=\"let result of searchResults; let i = index\">\n      <div\n        *ngIf=\"!searchResultsLimit || i < searchResultsLimit\"\n        class=\"sky-autocomplete-result\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n        [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n        [attr.id]=\"result.elementId\"\n        [skyHighlight]=\"highlightText\"\n        (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n        (mousemove)=\"onResultMouseMove(i)\"\n        #searchResultEl\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            searchResultTemplate || defaultSearchResultTemplate;\n            context: { item: result.data }\n          \"\n        >\n        </ng-container>\n      </div>\n    </ng-container>\n    <div\n      *ngIf=\"searchResults.length === 0\"\n      class=\"sky-deemphasized sky-padding-squish-default\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n  </div>\n  <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n    <button\n      *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n      type=\"button\"\n      (mousedown)=\"moreButtonClicked()\"\n    >\n      <ng-container\n        *ngIf=\"\n          !(\n            searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n          ) &&\n          searchResults.length === 0 &&\n          !searchText\n        \"\n      >\n        {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          (searchAsync\n            | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n          !searchText\n        \"\n      >\n        {{\n          'skyux_autocomplete_show_all_count'\n            | skyLibResources: (data.length | skyNumeric: { truncate: false })\n        }}\n      </ng-container>\n      <ng-container *ngIf=\"searchText\">\n        {{\n          'skyux_autocomplete_show_matches_count'\n            | skyLibResources\n              : (searchResultsCount === undefined\n                  ? data.length\n                  : (searchResultsCount | skyNumeric: { truncate: false }))\n        }}\n      </ng-container>\n    </button>\n    <div\n      *ngIf=\"searchText && searchResults.length === 0\"\n      class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n    >\n      {{\n        noResultsFoundText ||\n          ('skyux_autocomplete_no_results' | skyLibResources)\n      }}\n    </div>\n    <button\n      *ngIf=\"showAddButton\"\n      class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n      tabindex=\"0\"\n      type=\"button\"\n      [class.focused]=\"isElementFocused(addButtonEl)\"\n      (mousedown)=\"addButtonClicked()\"\n      #addButtonEl\n    >\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n      {{ 'skyux_autocomplete_add' | skyLibResources }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n  {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: SkyAutocompleteAdapterService }, { type: i1.SkyOverlayService }, { type: i7.SkyInputBoxHostService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { ariaLabelledBy: [{
@@ -1895,7 +1895,7 @@ _SkySearchComponent_changeRef = new WeakMap(), _SkySearchComponent_elRef = new W
         this.isFullWidth !== true);
 };
 SkySearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySearchComponent, deps: [{ token: i1.SkyMediaQueryService }, { token: i0.ElementRef }, { token: SkySearchAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkySearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkySearchComponent, selector: "sky-search", inputs: { searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n      >\n        <sky-input-box>\n          <input\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n            skyId\n            #searchInput=\"skyId\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\"></sky-icon>\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"close\"\n                iconType=\"skyux\"\n                size=\"sm\"\n              ></sky-icon>\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplate\"\n              ></ng-container>\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      <button\n        *ngIf=\"mobileSearchShown\"\n        class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n        type=\"button\"\n        [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n        (click)=\"toggleSearchInput(false)\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n        </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"double-chevron-left\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"search\" size=\"lg\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"search\"\n    iconType=\"skyux\"\n    size=\"lg\"\n  ></sky-icon>\n</ng-template>\n", styles: ["sky-search .sky-search-container .sky-form-group{margin-bottom:0}sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;padding:5px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{flex-basis:auto;width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"], components: [{ type: i7.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, animations: [
+SkySearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkySearchComponent, selector: "sky-search", inputs: { searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n      >\n        <sky-input-box>\n          <input\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n            skyId\n            #searchInput=\"skyId\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\"></sky-icon>\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"close\"\n                iconType=\"skyux\"\n                size=\"sm\"\n              ></sky-icon>\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplate\"\n              ></ng-container>\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      <button\n        *ngIf=\"mobileSearchShown\"\n        class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n        type=\"button\"\n        [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n        (click)=\"toggleSearchInput(false)\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n        </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"double-chevron-left\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"search\" size=\"lg\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"search\"\n    iconType=\"skyux\"\n    size=\"lg\"\n  ></sky-icon>\n</ng-template>\n", styles: ["sky-search .sky-search-container .sky-form-group{margin-bottom:0}sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;padding:5px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"], components: [{ type: i7.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, animations: [
         trigger('inputState', [
             state(INPUT_HIDDEN_STATE, style({
                 opacity: 0,
@@ -1922,7 +1922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                             })),
                             transition('* <=> *', animate('150ms')),
                         ]),
-                    ], providers: [SkySearchAdapterService], template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n      >\n        <sky-input-box>\n          <input\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n            skyId\n            #searchInput=\"skyId\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\"></sky-icon>\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"close\"\n                iconType=\"skyux\"\n                size=\"sm\"\n              ></sky-icon>\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplate\"\n              ></ng-container>\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      <button\n        *ngIf=\"mobileSearchShown\"\n        class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n        type=\"button\"\n        [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n        (click)=\"toggleSearchInput(false)\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n        </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"double-chevron-left\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"search\" size=\"lg\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"search\"\n    iconType=\"skyux\"\n    size=\"lg\"\n  ></sky-icon>\n</ng-template>\n", styles: ["sky-search .sky-search-container .sky-form-group{margin-bottom:0}sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;padding:5px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{flex-basis:auto;width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"] }]
+                    ], providers: [SkySearchAdapterService], template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n      >\n        <sky-input-box>\n          <input\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n            skyId\n            #searchInput=\"skyId\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\"></sky-icon>\n              <sky-icon\n                *skyThemeIf=\"'modern'\"\n                icon=\"close\"\n                iconType=\"skyux\"\n                size=\"sm\"\n              ></sky-icon>\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplate\"\n              ></ng-container>\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      <button\n        *ngIf=\"mobileSearchShown\"\n        class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n        type=\"button\"\n        [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n        (click)=\"toggleSearchInput(false)\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n        </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"double-chevron-left\"\n          iconType=\"skyux\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"search\" size=\"lg\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"search\"\n    iconType=\"skyux\"\n    size=\"lg\"\n  ></sky-icon>\n</ng-template>\n", styles: ["sky-search .sky-search-container .sky-form-group{margin-bottom:0}sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;padding:5px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }, { type: i0.ElementRef }, { type: SkySearchAdapterService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { searchApply: [{
                 type: Output
             }], searchChange: [{
@@ -3038,10 +3038,10 @@ _SkyLookupComponent_adapter = new WeakMap(), _SkyLookupComponent_elementRef = ne
     }
 };
 SkyLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAppWindowRef }, { token: SkyLookupAdapterService }, { token: i1$1.SkyModalService }, { token: i4$1.SkyLibResourcesService }, { token: i8.NgControl, optional: true, self: true }, { token: i7.SkyInputBoxHostService, optional: true }, { token: i7$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          <sky-tokens\n            *ngIf=\"selectMode === 'multiple'\"\n            class=\"sky-lookup-tokens\"\n            [disabled]=\"disabled\"\n            [displayWith]=\"descriptorProperty\"\n            [focusable]=\"false\"\n            [messageStream]=\"tokensController\"\n            [trackWith]=\"idProperty\"\n            [tokens]=\"tokens\"\n            (keyup)=\"onTokensKeyUp($event)\"\n            (tokensChange)=\"onTokensChange($event)\"\n            (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n            (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n          </sky-tokens>\n          <div\n            *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"searchIconTemplateRef\"\n          ></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n  >\n    <sky-icon\n      *skyThemeIf=\"'default'\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      iconType=\"skyux\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n  </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"], components: [{ type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { type: i4.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i7$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SkyLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          <sky-tokens\n            *ngIf=\"selectMode === 'multiple'\"\n            class=\"sky-lookup-tokens\"\n            [disabled]=\"disabled\"\n            [displayWith]=\"descriptorProperty\"\n            [focusable]=\"false\"\n            [messageStream]=\"tokensController\"\n            [trackWith]=\"idProperty\"\n            [tokens]=\"tokens\"\n            (keyup)=\"onTokensKeyUp($event)\"\n            (tokensChange)=\"onTokensChange($event)\"\n            (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n            (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n            <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplateRef\"\n              ></ng-container>\n            </ng-container>\n          </sky-tokens>\n          <div\n            *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n            <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplateRef\"\n              ></ng-container>\n            </ng-container>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n          ></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n  >\n    <sky-icon\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-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"], components: [{ type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { type: i4.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i7$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          <sky-tokens\n            *ngIf=\"selectMode === 'multiple'\"\n            class=\"sky-lookup-tokens\"\n            [disabled]=\"disabled\"\n            [displayWith]=\"descriptorProperty\"\n            [focusable]=\"false\"\n            [messageStream]=\"tokensController\"\n            [trackWith]=\"idProperty\"\n            [tokens]=\"tokens\"\n            (keyup)=\"onTokensKeyUp($event)\"\n            (tokensChange)=\"onTokensChange($event)\"\n            (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n            (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n          </sky-tokens>\n          <div\n            *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"searchIconTemplateRef\"\n          ></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n  >\n    <sky-icon\n      *skyThemeIf=\"'default'\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      iconType=\"skyux\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n  </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044;outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"] }]
+            args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          <sky-tokens\n            *ngIf=\"selectMode === 'multiple'\"\n            class=\"sky-lookup-tokens\"\n            [disabled]=\"disabled\"\n            [displayWith]=\"descriptorProperty\"\n            [focusable]=\"false\"\n            [messageStream]=\"tokensController\"\n            [trackWith]=\"idProperty\"\n            [tokens]=\"tokens\"\n            (keyup)=\"onTokensKeyUp($event)\"\n            (tokensChange)=\"onTokensChange($event)\"\n            (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n            (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n            <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplateRef\"\n              ></ng-container>\n            </ng-container>\n          </sky-tokens>\n          <div\n            *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n            <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n              <ng-container\n                *ngTemplateOutlet=\"searchIconTemplateRef\"\n              ></ng-container>\n            </ng-container>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container\n            *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n          ></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n  >\n    <sky-icon\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-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAppWindowRef }, { type: SkyLookupAdapterService }, { type: i1$1.SkyModalService }, { type: i4$1.SkyLibResourcesService }, { type: i8.NgControl, decorators: [{
                     type: Self
                 }, {