@skyux/lookup 6.12.0 → 6.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -401,19 +401,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
401
401
  }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
402
402
 
403
403
  function skyAutocompleteDefaultSearchFunction(options) {
404
- const filterData = function (searchText, data) {
404
+ const filterData = function (searchText, data, args) {
405
405
  return data.filter((item) => {
406
406
  if (!options.searchFilters || !options.searchFilters.length) {
407
407
  return true;
408
408
  }
409
409
  // Find the first failing filter (we can skip the others if one fails).
410
410
  const failedFilter = options.searchFilters.find((filter) => {
411
- return !filter.call({}, searchText, item);
411
+ return !filter.call({}, searchText, item, args);
412
412
  });
413
413
  return failedFilter === undefined;
414
414
  });
415
415
  };
416
- const search = function (searchText, data) {
416
+ const search = function (searchText, data, args) {
417
417
  const results = [];
418
418
  /* Sanity check - autocomplete will not call search with empty search text */
419
419
  /* istanbul ignore if */
@@ -421,7 +421,7 @@ function skyAutocompleteDefaultSearchFunction(options) {
421
421
  return results;
422
422
  }
423
423
  const searchTextNormalized = normalizeDiacritics(searchText).toUpperCase();
424
- const filteredData = filterData(searchText, data);
424
+ const filteredData = filterData(searchText, data, args);
425
425
  for (let i = 0, n = filteredData.length; i < n; i++) {
426
426
  const result = filteredData[i];
427
427
  const isMatch = options.propertiesToSearch.find((property) => {
@@ -915,7 +915,9 @@ _SkyAutocompleteComponent_activeElementIndex = new WeakMap(), _SkyAutocompleteCo
915
915
  this.searchAsync.emit(searchAsyncArgs);
916
916
  return searchAsyncArgs.result || of(undefined);
917
917
  }
918
- const result = this.search(this.searchText, this.data);
918
+ const result = this.search(this.searchText, this.data, {
919
+ context: 'popover',
920
+ });
919
921
  if (result instanceof Array) {
920
922
  return of({
921
923
  items: result,
@@ -2150,10 +2152,10 @@ _SkyLookupShowMoreAsyncModalComponent_changeDetector = new WeakMap(), _SkyLookup
2150
2152
  }
2151
2153
  };
2152
2154
  SkyLookupShowMoreAsyncModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupShowMoreAsyncModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyLookupShowMoreNativePickerAsyncContext }, { token: i0.ChangeDetectorRef }, { token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
2153
- SkyLookupShowMoreAsyncModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyLookupShowMoreAsyncModalComponent, selector: "sky-lookup-show-more-async-modal", ngImport: i0, template: "<sky-modal class=\"sky-lookup-show-more-modal\">\n <sky-modal-header>\n <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-muiltiselect-toolbar\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <div\n *ngIf=\"!isSearching && displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty] | skyLookupItemSelected: selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n >\n </sky-infinite-scroll>\n </div>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [disabled]=\"isSearching\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"], components: [{ type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1$1.λ4, selector: "sky-modal-header" }, { type: i1$1.λ2, selector: "sky-modal-content" }, { type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i5.λ37, selector: "sky-toolbar" }, { type: i5.λ38, selector: "sky-toolbar-section" }, { type: i5.λ39, selector: "sky-toolbar-item" }, { type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i5.λ40, selector: "sky-toolbar-view-actions" }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.λ4, selector: "sky-checkbox-label" }, { type: i8$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i8$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i8$1.λ8, selector: "sky-repeater-item-content" }, { type: i8$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { type: i1$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe, "skyLookupItemSelected": SkyLookupItemSelectedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
2155
+ SkyLookupShowMoreAsyncModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyLookupShowMoreAsyncModalComponent, selector: "sky-lookup-show-more-async-modal", ngImport: i0, template: "<sky-modal class=\"sky-lookup-show-more-modal\">\n <sky-modal-header>\n <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-muiltiselect-toolbar\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"!isSearching && displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty] | skyLookupItemSelected: selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [disabled]=\"isSearching\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"], components: [{ type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1$1.λ4, selector: "sky-modal-header" }, { type: i1$1.λ2, selector: "sky-modal-content" }, { type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i5.λ37, selector: "sky-toolbar" }, { type: i5.λ38, selector: "sky-toolbar-section" }, { type: i5.λ39, selector: "sky-toolbar-item" }, { type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i5.λ40, selector: "sky-toolbar-view-actions" }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.λ4, selector: "sky-checkbox-label" }, { type: i8$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i8$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i8$1.λ8, selector: "sky-repeater-item-content" }, { type: i8$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { type: i1$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe, "skyLookupItemSelected": SkyLookupItemSelectedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
2154
2156
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupShowMoreAsyncModalComponent, decorators: [{
2155
2157
  type: Component,
2156
- args: [{ selector: 'sky-lookup-show-more-async-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal class=\"sky-lookup-show-more-modal\">\n <sky-modal-header>\n <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-muiltiselect-toolbar\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <div\n *ngIf=\"!isSearching && displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty] | skyLookupItemSelected: selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n >\n </sky-infinite-scroll>\n </div>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [disabled]=\"isSearching\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"] }]
2158
+ args: [{ selector: 'sky-lookup-show-more-async-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal class=\"sky-lookup-show-more-modal\">\n <sky-modal-header>\n <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-muiltiselect-toolbar\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"!isSearching && displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty] | skyLookupItemSelected: selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [disabled]=\"isSearching\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"] }]
2157
2159
  }], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyLookupShowMoreNativePickerAsyncContext }, { type: i0.ChangeDetectorRef }, { type: i1.SkyLogService }]; } });
2158
2160
 
2159
2161
  /**
@@ -2323,7 +2325,7 @@ class SkyLookupShowMoreModalComponent {
2323
2325
  if (searchText) {
2324
2326
  const resultValues = this.context.search(searchText, items.map((item) => {
2325
2327
  return item.value;
2326
- }));
2328
+ }), { context: 'modal' });
2327
2329
  if (resultValues instanceof Array) {
2328
2330
  const result = items.filter((item) => resultValues.indexOf(item.value) >= 0);
2329
2331
  return Promise.resolve(result);