@skyux/lookup 5.2.2 → 5.5.0

package/esm2015/lib/modules/lookup/lookup-adapter.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lookup-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/lookup/src/lib/modules/lookup/lookup-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,eAAe,CAAC;;AAEvD;;GAEG;AAEH,MAAM,OAAO,uBAAuB;IAC3B,UAAU,CAAC,KAAiB;QACjC,MAAM,OAAO,GACX,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAEzD,kBAAkB;QAClB,0BAA0B;QAC1B,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,EAAE,CAAC;SACjB;IACH,CAAC;;qHAVU,uBAAuB;yHAAvB,uBAAuB;4FAAvB,uBAAuB;kBADnC,UAAU","sourcesContent":["import { ElementRef, Injectable } from '@angular/core';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyLookupAdapterService {\n  public focusInput(elRef: ElementRef): void {\n    const inputEl: HTMLElement =\n      elRef.nativeElement.querySelector('.sky-lookup-input');\n\n    /* Sanity check */\n    /* istanbul ignore else */\n    if (inputEl) {\n      inputEl.focus();\n    }\n  }\n}\n"]}

package/esm2015/lib/modules/lookup/lookup-autocomplete-adapter.js

@@ -0,0 +1,72 @@
+import { Directive, EventEmitter, Input, Output, TemplateRef, } from '@angular/core';
+import { skyAutocompleteDefaultSearchFunction } from '../autocomplete/autocomplete-default-search-function';
+import * as i0 from "@angular/core";
+/**
+ * @internal
+ */
+export class SkyLookupAutocompleteAdapter {
+    constructor() {
+        this.searchAsync = new EventEmitter();
+    }
+    /**
+     * Specifies an object property to display in the text input after users
+     * select an item in the dropdown list.
+     * @default "name"
+     */
+    set descriptorProperty(value) {
+        this._descriptorProperty = value;
+    }
+    get descriptorProperty() {
+        return this._descriptorProperty || 'name';
+    }
+    /**
+     * Specifies an array of object properties to search.
+     * @default ["name"]
+     */
+    set propertiesToSearch(value) {
+        this._propertiesToSearch = value;
+    }
+    get propertiesToSearch() {
+        return this._propertiesToSearch || ['name'];
+    }
+    /**
+     * Specifies a function to dynamically manage the data source when users
+     * change the text in the lookup field. The search function must return
+     * an array or a promise of an array. The `search` property is particularly
+     * useful when the data source does not live in the source code.
+     */
+    set search(value) {
+        this._search = value;
+    }
+    get search() {
+        return (this._search ||
+            skyAutocompleteDefaultSearchFunction({
+                propertiesToSearch: this.propertiesToSearch,
+                searchFilters: this.searchFilters,
+            }));
+    }
+}
+SkyLookupAutocompleteAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAutocompleteAdapter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SkyLookupAutocompleteAdapter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupAutocompleteAdapter, inputs: { debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit" }, outputs: { searchAsync: "searchAsync" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupAutocompleteAdapter, decorators: [{
+            type: Directive
+        }], propDecorators: { debounceTime: [{
+                type: Input
+            }], descriptorProperty: [{
+                type: Input
+            }], propertiesToSearch: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], searchResultTemplate: [{
+                type: Input
+            }], searchTextMinimumCharacters: [{
+                type: Input
+            }], searchFilters: [{
+                type: Input
+            }], searchResultsLimit: [{
+                type: Input
+            }], searchAsync: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=lookup-autocomplete-adapter.js.map

package/esm2015/lib/modules/lookup/lookup-autocomplete-adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lookup-autocomplete-adapter.js","sourceRoot":"","sources":["../../../../../../../../libs/components/lookup/src/lib/modules/lookup/lookup-autocomplete-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,YAAY,EACZ,KAAK,EACL,MAAM,EACN,WAAW,GACZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,oCAAoC,EAAE,MAAM,sDAAsD,CAAC;;AAO5G;;GAEG;AAEH,MAAM,OAAO,4BAA4B;IADzC;QA6FS,gBAAW,GAAG,IAAI,YAAY,EAAkC,CAAC;KAKzE;IAxFC;;;;OAIG;IACH,IACW,kBAAkB,CAAC,KAAa;QACzC,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;IACnC,CAAC;IAED,IAAW,kBAAkB;QAC3B,OAAO,IAAI,CAAC,mBAAmB,IAAI,MAAM,CAAC;IAC5C,CAAC;IAED;;;OAGG;IACH,IACW,kBAAkB,CAAC,KAAe;QAC3C,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;IACnC,CAAC;IAED,IAAW,kBAAkB;QAC3B,OAAO,IAAI,CAAC,mBAAmB,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;IAED;;;;;OAKG;IACH,IACW,MAAM,CAAC,KAAoC;QACpD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,IAAW,MAAM;QACf,OAAO,CACL,IAAI,CAAC,OAAO;YACZ,oCAAoC,CAAC;gBACnC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;gBAC3C,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC,CAAC,CACH,CAAC;IACJ,CAAC;;0HAvDU,4BAA4B;8GAA5B,4BAA4B;4FAA5B,4BAA4B;kBADxC,SAAS;8BAQD,YAAY;sBADlB,KAAK;gBASK,kBAAkB;sBAD5B,KAAK;gBAcK,kBAAkB;sBAD5B,KAAK;gBAgBK,MAAM;sBADhB,KAAK;gBAqBC,oBAAoB;sBAD1B,KAAK;gBAUC,2BAA2B;sBADjC,KAAK;gBAWC,aAAa;sBADnB,KAAK;gBAQC,kBAAkB;sBADxB,KAAK;gBAIC,WAAW;sBADjB,MAAM","sourcesContent":["import {\n  Directive,\n  EventEmitter,\n  Input,\n  Output,\n  TemplateRef,\n} from '@angular/core';\n\nimport { skyAutocompleteDefaultSearchFunction } from '../autocomplete/autocomplete-default-search-function';\nimport { SkyAutocompleteSearchAsyncArgs } from '../autocomplete/types/autocomplete-search-async-args';\n\nimport { SkyAutocompleteSearchFunction } from '../autocomplete/types/autocomplete-search-function';\n\nimport { SkyAutocompleteSearchFunctionFilter } from '../autocomplete/types/autocomplete-search-function-filter';\n\n/**\n * @internal\n */\n@Directive()\nexport class SkyLookupAutocompleteAdapter {\n  /**\n   * Specifies how many milliseconds to wait before searching while users\n   * enter text in the lookup field.\n   * @default 0\n   */\n  @Input()\n  public debounceTime: number;\n\n  /**\n   * Specifies an object property to display in the text input after users\n   * select an item in the dropdown list.\n   * @default \"name\"\n   */\n  @Input()\n  public set descriptorProperty(value: string) {\n    this._descriptorProperty = value;\n  }\n\n  public get descriptorProperty(): string {\n    return this._descriptorProperty || 'name';\n  }\n\n  /**\n   * Specifies an array of object properties to search.\n   * @default [\"name\"]\n   */\n  @Input()\n  public set propertiesToSearch(value: string[]) {\n    this._propertiesToSearch = value;\n  }\n\n  public get propertiesToSearch(): string[] {\n    return this._propertiesToSearch || ['name'];\n  }\n\n  /**\n   * Specifies a function to dynamically manage the data source when users\n   * change the text in the lookup field. The search function must return\n   * an array or a promise of an array. The `search` property is particularly\n   * useful when the data source does not live in the source code.\n   */\n  @Input()\n  public set search(value: SkyAutocompleteSearchFunction) {\n    this._search = value;\n  }\n\n  public get search(): SkyAutocompleteSearchFunction {\n    return (\n      this._search ||\n      skyAutocompleteDefaultSearchFunction({\n        propertiesToSearch: this.propertiesToSearch,\n        searchFilters: this.searchFilters,\n      })\n    );\n  }\n\n  /**\n   * Specifies a template to format each option in the dropdown list. The lookup component\n   * injects values into the template as `item` variables that reference all the object\n   * properties of the options.\n   */\n  @Input()\n  public searchResultTemplate: TemplateRef<any>;\n\n  /**\n   * Specifies the minimum number of characters that users must enter before\n   * the lookup component searches the data source and displays search results\n   * in the dropdown list.\n   * @default 1\n   */\n  @Input()\n  public searchTextMinimumCharacters: number;\n\n  /**\n   * Specifies an array of functions to call against each search result in order\n   * to filter the search results when using the default search function. When\n   * using a custom search function via the `search` property filters must be\n   * applied manually inside that function. The function must return `true` or\n   * `false` for each result to indicate whether to display it in the dropdown list.\n   */\n  @Input()\n  public searchFilters: SkyAutocompleteSearchFunctionFilter[];\n\n  /**\n   * Specifies the maximum number of search results to display in the dropdown\n   * list. By default, the lookup component displays all matching results.\n   */\n  @Input()\n  public searchResultsLimit: number;\n\n  @Output()\n  public searchAsync = new EventEmitter<SkyAutocompleteSearchAsyncArgs>();\n\n  private _descriptorProperty: string;\n  private _propertiesToSearch: string[];\n  private _search: SkyAutocompleteSearchFunction;\n}\n"]}

package/esm2015/lib/modules/lookup/lookup-item-selected.pipe.js

@@ -0,0 +1,16 @@
+import { Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SkyLookupItemSelectedPipe {
+    transform(id, selectedIdMap) {
+        return selectedIdMap.has(id);
+    }
+}
+SkyLookupItemSelectedPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupItemSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyLookupItemSelectedPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupItemSelectedPipe, name: "skyLookupItemSelected" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupItemSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyLookupItemSelected',
+                }]
+        }] });
+//# sourceMappingURL=lookup-item-selected.pipe.js.map

package/esm2015/lib/modules/lookup/lookup-item-selected.pipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lookup-item-selected.pipe.js","sourceRoot":"","sources":["../../../../../../../../libs/components/lookup/src/lib/modules/lookup/lookup-item-selected.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAiB,MAAM,eAAe,CAAC;;AAKpD,MAAM,OAAO,yBAAyB;IAC7B,SAAS,CAAC,EAAW,EAAE,aAAoC;QAChE,OAAO,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;;uHAHU,yBAAyB;qHAAzB,yBAAyB;4FAAzB,yBAAyB;kBAHrC,IAAI;mBAAC;oBACJ,IAAI,EAAE,uBAAuB;iBAC9B","sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'skyLookupItemSelected',\n})\nexport class SkyLookupItemSelectedPipe implements PipeTransform {\n  public transform(id: unknown, selectedIdMap: Map<unknown, unknown>): boolean {\n    return selectedIdMap.has(id);\n  }\n}\n"]}

package/esm2015/lib/modules/lookup/lookup-show-more-async-modal.component.js

@@ -0,0 +1,186 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, } from '@angular/core';
+import { SkyModalInstance } from '@skyux/modals';
+import { Subject } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { SkyLookupShowMoreNativePickerAsyncContext } from './types/lookup-show-more-native-picker-async-context';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/modals";
+import * as i2 from "./types/lookup-show-more-native-picker-async-context";
+import * as i3 from "@skyux/indicators";
+import * as i4 from "@skyux/layout";
+import * as i5 from "../search/search.component";
+import * as i6 from "@skyux/forms";
+import * as i7 from "@skyux/lists";
+import * as i8 from "@angular/common";
+import * as i9 from "@skyux/core";
+import * as i10 from "@skyux/theme";
+import * as i11 from "@skyux/i18n";
+import * as i12 from "./lookup-item-selected.pipe";
+/**
+ * @internal
+ * Internal component to implement the native picker.
+ */
+export class SkyLookupShowMoreAsyncModalComponent {
+    constructor(modalInstance, context, changeDetector) {
+        this.modalInstance = modalInstance;
+        this.context = context;
+        this.changeDetector = changeDetector;
+        /**
+         * @internal
+         * Fires when users select the button to add new options to the list.
+         */
+        this.addClick = new Subject();
+        this.displayedItems = [];
+        this.onlyShowSelected = false;
+        this.isSearching = false;
+        this.hasMoreItems = false;
+        this.isLoadingMore = false;
+        this.offset = 0;
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.searchText = this.context.initialSearch;
+        this.createInitialSelectedItemsMap();
+        this.loadSearchResults();
+    }
+    ngOnDestroy() {
+        this.cancelCurrentSearch();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    addButtonClicked() {
+        this.addClick.next();
+    }
+    clearAll() {
+        this.selectedIdMap = new Map(this.selectedIdMap);
+        // Only deselect items that have been loaded; items that would be loaded
+        // after an infinite scroll event should remain selected.
+        for (const item of this.items) {
+            this.selectedIdMap.delete(item[this.context.idProperty]);
+        }
+        this.updateDisplayedItems();
+        this.changeDetector.markForCheck();
+    }
+    itemClick(selectedItem) {
+        if (this.context.selectMode === 'single') {
+            this.onItemSelect(!selectedItem.selected, selectedItem);
+        }
+    }
+    onItemSelect(newSelectState, itemToSelect) {
+        const itemId = itemToSelect[this.context.idProperty];
+        // Create a new Map so the pipe transform will execute on the next
+        // change detection cycle.
+        this.selectedIdMap = new Map(this.selectedIdMap);
+        if (this.context.selectMode === 'single') {
+            if (newSelectState) {
+                this.selectedIdMap.clear();
+                this.selectedIdMap.set(itemId, itemToSelect);
+            }
+        }
+        else {
+            if (newSelectState) {
+                this.selectedIdMap.set(itemId, itemToSelect);
+            }
+            else {
+                this.selectedIdMap.delete(itemId);
+            }
+        }
+        this.updateDisplayedItems();
+    }
+    searchApplied(searchText) {
+        this.offset = 0;
+        this.searchText = searchText;
+        this.loadSearchResults();
+    }
+    selectAll() {
+        this.selectedIdMap = new Map();
+        for (const item of this.items) {
+            this.selectedIdMap.set(item[this.context.idProperty], item);
+        }
+        this.updateDisplayedItems();
+    }
+    infiniteScrollEnd() {
+        this.cancelCurrentSearch();
+        /* Sanity check - else case would only happen if this was called directly */
+        /* istanbul ignore else */
+        if (this.hasMoreItems) {
+            this.isLoadingMore = true;
+            this.performSearch((result) => {
+                this.items = this.items.concat(result.items);
+                this.updateDisplayedItems();
+                this.isLoadingMore = false;
+            });
+        }
+    }
+    save() {
+        const selectedItems = Array.from(this.selectedIdMap.values(), (itemData, index) => ({
+            index,
+            itemData,
+        })).sort((a, b) => {
+            return this.items.indexOf(a.itemData) < this.items.indexOf(b.itemData)
+                ? -1
+                : 1;
+        });
+        this.modalInstance.save(selectedItems);
+    }
+    loadSearchResults() {
+        this.cancelCurrentSearch();
+        this.isSearching = true;
+        this.performSearch((result) => {
+            this.isSearching = false;
+            this.items = result.items;
+        });
+    }
+    createInitialSelectedItemsMap() {
+        this.selectedIdMap = new Map(this.context.initialValue.map((item) => [
+            item[this.context.idProperty],
+            item,
+        ]));
+    }
+    performSearch(processResults) {
+        this.currentSearchSub = this.context
+            .searchAsync({
+            displayType: 'modal',
+            offset: this.offset,
+            searchText: this.searchText || '',
+            continuationData: this.continuationData,
+        })
+            .pipe(take(1))
+            .subscribe((result) => {
+            processResults(result);
+            this.continuationData = result.continuationData;
+            this.hasMoreItems = result.hasMore;
+            this.offset = this.items.length;
+            this.updateDisplayedItems();
+            this.changeDetector.markForCheck();
+        });
+    }
+    updateDisplayedItems() {
+        if (this.onlyShowSelected) {
+            this.displayedItems = this.items.filter((item) => this.selectedIdMap.has(item[this.context.idProperty]));
+        }
+        else {
+            this.displayedItems = this.items;
+        }
+    }
+    cancelCurrentSearch() {
+        if (this.currentSearchSub) {
+            this.currentSearchSub.unsubscribe();
+            this.currentSearchSub = undefined;
+            this.isLoadingMore = false;
+            this.isSearching = false;
+        }
+    }
+}
+SkyLookupShowMoreAsyncModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreAsyncModalComponent, deps: [{ token: i1.SkyModalInstance }, { token: i2.SkyLookupShowMoreNativePickerAsyncContext }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyLookupShowMoreAsyncModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupShowMoreAsyncModalComponent, selector: "sky-lookup-show-more-async-modal", ngImport: i0, template: "<sky-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    <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n    <div\n      [skyViewkeeper]=\"[\n        '.sky-lookup-show-more-modal-toolbar',\n        '.sky-lookup-show-more-modal-muiltiselect-toolbar'\n      ]\"\n    >\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=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\n              \"\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=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\n              \"\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              context.userConfig?.itemTemplate\n                ? context.userConfig?.itemTemplate\n                : 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=\"\n        sky-btn\n        sky-btn-primary\n        sky-margin-inline-compact\n        sky-lookup-show-more-modal-save\n      \"\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.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1.λ4, selector: "sky-modal-header" }, { type: i1.λ2, selector: "sky-modal-content" }, { type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i4.λ37, selector: "sky-toolbar" }, { type: i4.λ38, selector: "sky-toolbar-section" }, { type: i4.λ39, selector: "sky-toolbar-item" }, { type: i5.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i4.λ40, selector: "sky-toolbar-view-actions" }, { type: i3.λ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: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i7.λ10, selector: "sky-repeater-item", inputs: ["itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i7.λ8, selector: "sky-repeater-item-content" }, { type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { type: i1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { type: i10.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i11.SkyLibResourcesPipe, "skyLookupItemSelected": i12.SkyLookupItemSelectedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreAsyncModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-lookup-show-more-async-modal',
+                    templateUrl: './lookup-show-more-async-modal.component.html',
+                    styleUrls: ['./lookup-show-more-async-modal.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyModalInstance }, { type: i2.SkyLookupShowMoreNativePickerAsyncContext }, { type: i0.ChangeDetectorRef }]; } });
+//# sourceMappingURL=lookup-show-more-async-modal.component.js.map

package/esm2015/lib/modules/lookup/lookup-show-more-async-modal.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lookup-show-more-async-modal.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/lookup/src/lib/modules/lookup/lookup-show-more-async-modal.component.ts","../../../../../../../../libs/components/lookup/src/lib/modules/lookup/lookup-show-more-async-modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnDestroy,\n  OnInit,\n} from '@angular/core';\nimport { SkyAutocompleteSearchAsyncResult } from '../autocomplete/types/autocomplete-search-async-result';\n\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { Subject, Subscription } from 'rxjs';\nimport { take } from 'rxjs/operators';\n\nimport { SkyLookupShowMoreNativePickerAsyncContext } from './types/lookup-show-more-native-picker-async-context';\n\n/**\n * @internal\n * Internal component to implement the native picker.\n */\n@Component({\n  selector: 'sky-lookup-show-more-async-modal',\n  templateUrl: './lookup-show-more-async-modal.component.html',\n  styleUrls: ['./lookup-show-more-async-modal.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyLookupShowMoreAsyncModalComponent implements OnInit, OnDestroy {\n  /**\n   * @internal\n   * Fires when users select the button to add new options to the list.\n   */\n  public addClick: Subject<void> = new Subject();\n\n  public items: unknown[];\n\n  public displayedItems: unknown[] = [];\n  public onlyShowSelected: boolean = false;\n  public searchText: string;\n  public isSearching = false;\n  public hasMoreItems = false;\n  public isLoadingMore = false;\n  public selectedIdMap: Map<unknown, unknown>;\n\n  private continuationData: unknown;\n  private offset: number = 0;\n  private ngUnsubscribe = new Subject<void>();\n  private currentSearchSub: Subscription | undefined;\n\n  constructor(\n    public modalInstance: SkyModalInstance,\n    public context: SkyLookupShowMoreNativePickerAsyncContext,\n    private changeDetector: ChangeDetectorRef\n  ) {}\n\n  public ngOnInit(): void {\n    this.searchText = this.context.initialSearch;\n\n    this.createInitialSelectedItemsMap();\n    this.loadSearchResults();\n  }\n\n  public ngOnDestroy(): void {\n    this.cancelCurrentSearch();\n\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n\n  public addButtonClicked(): void {\n    this.addClick.next();\n  }\n\n  public clearAll(): void {\n    this.selectedIdMap = new Map(this.selectedIdMap);\n\n    // Only deselect items that have been loaded; items that would be loaded\n    // after an infinite scroll event should remain selected.\n    for (const item of this.items) {\n      this.selectedIdMap.delete(item[this.context.idProperty]);\n    }\n\n    this.updateDisplayedItems();\n\n    this.changeDetector.markForCheck();\n  }\n\n  public itemClick(selectedItem: any): void {\n    if (this.context.selectMode === 'single') {\n      this.onItemSelect(!selectedItem.selected, selectedItem);\n    }\n  }\n\n  public onItemSelect(newSelectState: boolean, itemToSelect: any): void {\n    const itemId = itemToSelect[this.context.idProperty];\n\n    // Create a new Map so the pipe transform will execute on the next\n    // change detection cycle.\n    this.selectedIdMap = new Map(this.selectedIdMap);\n\n    if (this.context.selectMode === 'single') {\n      if (newSelectState) {\n        this.selectedIdMap.clear();\n        this.selectedIdMap.set(itemId, itemToSelect);\n      }\n    } else {\n      if (newSelectState) {\n        this.selectedIdMap.set(itemId, itemToSelect);\n      } else {\n        this.selectedIdMap.delete(itemId);\n      }\n    }\n\n    this.updateDisplayedItems();\n  }\n\n  public searchApplied(searchText: string) {\n    this.offset = 0;\n    this.searchText = searchText;\n\n    this.loadSearchResults();\n  }\n\n  public selectAll(): void {\n    this.selectedIdMap = new Map();\n\n    for (const item of this.items) {\n      this.selectedIdMap.set(item[this.context.idProperty], item);\n    }\n\n    this.updateDisplayedItems();\n  }\n\n  public infiniteScrollEnd(): void {\n    this.cancelCurrentSearch();\n\n    /* Sanity check - else case would only happen if this was called directly */\n    /* istanbul ignore else */\n    if (this.hasMoreItems) {\n      this.isLoadingMore = true;\n\n      this.performSearch((result) => {\n        this.items = this.items.concat(result.items);\n\n        this.updateDisplayedItems();\n\n        this.isLoadingMore = false;\n      });\n    }\n  }\n\n  public save(): void {\n    const selectedItems = Array.from(\n      this.selectedIdMap.values(),\n      (itemData, index) => ({\n        index,\n        itemData,\n      })\n    ).sort((a, b) => {\n      return this.items.indexOf(a.itemData) < this.items.indexOf(b.itemData)\n        ? -1\n        : 1;\n    });\n\n    this.modalInstance.save(selectedItems);\n  }\n\n  private loadSearchResults(): void {\n    this.cancelCurrentSearch();\n\n    this.isSearching = true;\n\n    this.performSearch((result) => {\n      this.isSearching = false;\n      this.items = result.items;\n    });\n  }\n\n  private createInitialSelectedItemsMap(): void {\n    this.selectedIdMap = new Map(\n      this.context.initialValue.map((item) => [\n        item[this.context.idProperty],\n        item,\n      ])\n    );\n  }\n\n  private performSearch(\n    processResults: (result: SkyAutocompleteSearchAsyncResult) => void\n  ): void {\n    this.currentSearchSub = this.context\n      .searchAsync({\n        displayType: 'modal',\n        offset: this.offset,\n        searchText: this.searchText || '',\n        continuationData: this.continuationData,\n      })\n      .pipe(take(1))\n      .subscribe((result) => {\n        processResults(result);\n\n        this.continuationData = result.continuationData;\n        this.hasMoreItems = result.hasMore;\n        this.offset = this.items.length;\n\n        this.updateDisplayedItems();\n\n        this.changeDetector.markForCheck();\n      });\n  }\n\n  private updateDisplayedItems(): void {\n    if (this.onlyShowSelected) {\n      this.displayedItems = this.items.filter((item) =>\n        this.selectedIdMap.has(item[this.context.idProperty])\n      );\n    } else {\n      this.displayedItems = this.items;\n    }\n  }\n\n  private cancelCurrentSearch(): void {\n    if (this.currentSearchSub) {\n      this.currentSearchSub.unsubscribe();\n      this.currentSearchSub = undefined;\n      this.isLoadingMore = false;\n      this.isSearching = false;\n    }\n  }\n}\n","<sky-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    <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n    <div\n      [skyViewkeeper]=\"[\n        '.sky-lookup-show-more-modal-toolbar',\n        '.sky-lookup-show-more-modal-muiltiselect-toolbar'\n      ]\"\n    >\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=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\n              \"\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=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\n              \"\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              context.userConfig?.itemTemplate\n                ? context.userConfig?.itemTemplate\n                : 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=\"\n        sky-btn\n        sky-btn-primary\n        sky-margin-inline-compact\n        sky-lookup-show-more-modal-save\n      \"\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"]}

package/esm2015/lib/modules/lookup/lookup-show-more-modal.component.js

@@ -0,0 +1,258 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, } from '@angular/core';
+import { SkyModalInstance } from '@skyux/modals';
+import { Subject } from 'rxjs';
+import { SkyLookupShowMoreNativePickerContext } from './types/lookup-show-more-native-picker-context';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/modals";
+import * as i2 from "./types/lookup-show-more-native-picker-context";
+import * as i3 from "@skyux/layout";
+import * as i4 from "../search/search.component";
+import * as i5 from "@skyux/indicators";
+import * as i6 from "@skyux/forms";
+import * as i7 from "@skyux/lists";
+import * as i8 from "@angular/common";
+import * as i9 from "@skyux/core";
+import * as i10 from "@skyux/theme";
+import * as i11 from "@skyux/i18n";
+/**
+ * @internal
+ * Internal component to implement the native picker.
+ */
+export class SkyLookupShowMoreModalComponent {
+    constructor(modalInstance, context, changeDetector) {
+        this.modalInstance = modalInstance;
+        this.context = context;
+        this.changeDetector = changeDetector;
+        /**
+         * @internal
+         * Fires when users select the button to add new options to the list.
+         */
+        this.addClick = new Subject();
+        this.dataManagerConfig = {
+            sortOptions: [
+                {
+                    id: 'az',
+                    label: 'Alphabetical (A - Z)',
+                    descending: false,
+                    propertyName: 'name',
+                },
+                {
+                    id: 'za',
+                    label: 'Alphabetical (Z - A)',
+                    descending: true,
+                    propertyName: 'name',
+                },
+            ],
+        };
+        this.displayedItems = [];
+        this.itemsHaveMore = false;
+        this.onlyShowSelected = false;
+        this.selectedItems = [];
+        this.itemIndex = 0;
+        this.ngUnsubscribe = new Subject();
+    }
+    ngAfterViewInit() {
+        this.searchText = this.context.initialSearch;
+        this.addItems();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    addButtonClicked() {
+        this.addClick.next();
+    }
+    addItems() {
+        if (!this.items || this.items.length === 0) {
+            let selectedItems = this.selectedItems.slice();
+            this.items = this.context.items
+                ? this.context.items.map((item) => {
+                    return {
+                        value: item,
+                        selected: false,
+                    };
+                })
+                : [];
+            this.items.forEach((item) => {
+                const isInitialValue = this.context.initialValue === item.value;
+                const initialIsArray = Array.isArray(this.context.initialValue);
+                const initialValueContainsItem = this.context.initialValue.findIndex((initialItem) => initialItem === item.value) >= 0;
+                if (isInitialValue || (initialIsArray && initialValueContainsItem)) {
+                    item.selected = true;
+                    const itemIndex = this.items.indexOf(item);
+                    if (selectedItems.findIndex((selectedItem) => selectedItem.index === itemIndex) < 0) {
+                        selectedItems.push({ index: itemIndex, itemData: item.value });
+                    }
+                }
+            });
+            this.selectedItems = selectedItems;
+            this.updateDataState();
+            this.changeDetector.markForCheck();
+        }
+        this.itemIndex = this.itemIndex + 10;
+        this.searchItems(this.items).then((searchedItems) => {
+            this.displayedItems = searchedItems.slice(0, this.itemIndex);
+            if (this.itemIndex > searchedItems.length) {
+                this.itemsHaveMore = false;
+            }
+            else {
+                this.itemsHaveMore = true;
+            }
+            this.changeDetector.markForCheck();
+        });
+    }
+    clearAll() {
+        this.displayedItems.forEach((item) => {
+            if (item.selected) {
+                item.selected = false;
+            }
+        });
+        this.selectedItems = [];
+        this.updateDataState();
+        this.changeDetector.markForCheck();
+    }
+    itemClick(selectedItem) {
+        if (this.context.selectMode === 'single') {
+            this.onItemSelect(!selectedItem.selected, selectedItem);
+        }
+    }
+    onItemSelect(newSelectState, itemToSelect) {
+        if (this.context.selectMode === 'single') {
+            /* Sanity check - single select mode should only alow for a `true` select state */
+            /* istanbul ignore else */
+            if (newSelectState) {
+                itemToSelect.selected = true;
+                this.items.forEach((item) => {
+                    if (item.value !== itemToSelect.value) {
+                        item.selected = false;
+                    }
+                });
+                this.displayedItems.forEach((item) => {
+                    if (item.value !== itemToSelect.value) {
+                        item.selected = false;
+                    }
+                });
+                const itemIndex = this.items.findIndex((item) => item.value === itemToSelect.value);
+                this.selectedItems = [
+                    { index: itemIndex, itemData: this.items[itemIndex].value },
+                ];
+            }
+        }
+        else {
+            let selectedItems = this.selectedItems;
+            const allItemsIndex = this.items.findIndex((item) => item.value === itemToSelect.value);
+            let selectedItemsIndex = selectedItems.findIndex((selectedItem) => selectedItem.index === allItemsIndex);
+            if (newSelectState && selectedItemsIndex === -1) {
+                selectedItems.push({
+                    index: allItemsIndex,
+                    itemData: this.items[allItemsIndex].value,
+                });
+            }
+            else if (!newSelectState && selectedItemsIndex !== -1) {
+                selectedItems.splice(selectedItemsIndex, 1);
+            }
+            this.selectedItems = selectedItems;
+        }
+        this.updateDataState();
+        this.changeDetector.markForCheck();
+    }
+    searchApplied(searchText) {
+        /* istanbul ignore else */
+        if (this.searchText !== searchText) {
+            this.itemIndex = 10;
+        }
+        this.searchText = searchText;
+        this.updateDataState();
+    }
+    searchItems(items) {
+        let searchText = this.searchText;
+        if (searchText) {
+            const resultValues = this.context.search(searchText, items.map((item) => {
+                return item.value;
+            }));
+            if (resultValues instanceof Array) {
+                const result = items.filter((item) => resultValues.indexOf(item.value) >= 0);
+                return Promise.resolve(result);
+            }
+            else {
+                return resultValues.then((values) => {
+                    const result = items.filter((item) => values.indexOf(item.value) >= 0);
+                    return Promise.resolve(result);
+                });
+            }
+        }
+        else {
+            return Promise.resolve(items);
+        }
+    }
+    selectAll() {
+        let selectedItems = this.selectedItems;
+        this.displayedItems.forEach((item) => {
+            if (!item.selected) {
+                item.selected = true;
+                const index = this.items.indexOf(item);
+                /* Sanity check */
+                /* istanbul ignore else */
+                if (selectedItems.findIndex((selectedItem) => selectedItem.index === index) < 0) {
+                    selectedItems.push({
+                        index: index,
+                        itemData: this.items[index].value,
+                    });
+                }
+            }
+        });
+        this.selectedItems = selectedItems;
+        this.updateDataState();
+        this.changeDetector.markForCheck();
+    }
+    updateDataState() {
+        let selectedItems = this.selectedItems;
+        this.items.forEach((item, index) => {
+            item.selected =
+                selectedItems.findIndex((selectedItem) => selectedItem.index === index) !== -1;
+        });
+        this.searchItems(this.items).then((searchedItems) => {
+            if (this.onlyShowSelected) {
+                searchedItems = searchedItems.filter((item) => item.selected);
+            }
+            this.displayedItems = searchedItems.slice(0, this.itemIndex);
+            if (this.itemIndex > searchedItems.length) {
+                this.itemsHaveMore = false;
+            }
+            else {
+                this.itemsHaveMore = true;
+            }
+            this.changeDetector.markForCheck();
+        });
+    }
+    updateItemData(data) {
+        this.context.items = data;
+        this.items = undefined;
+        this.itemIndex = 10;
+        this.selectedItems.forEach((selectedItem) => {
+            this.context.items.forEach((item, index) => {
+                if (selectedItem.itemData === item) {
+                    selectedItem.index = index;
+                }
+            });
+        });
+        this.addItems();
+        this.changeDetector.markForCheck();
+    }
+}
+SkyLookupShowMoreModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [{ token: i1.SkyModalInstance }, { token: i2.SkyLookupShowMoreNativePickerContext }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-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    <div\n      [skyViewkeeper]=\"[\n        '.sky-lookup-show-more-modal-toolbar',\n        '.sky-lookup-show-more-modal-muiltiselect-toolbar'\n      ]\"\n    >\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=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\n              \"\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=\"\n                sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\n              \"\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)=\"updateDataState()\"\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=\"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        [selectable]=\"context.selectMode === 'multiple'\"\n        [(isSelected)]=\"item.selected\"\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              context.userConfig?.itemTemplate\n                ? context.userConfig?.itemTemplate\n                : defaultItemTemplate;\n              context: { item: item.value }\n            \"\n          >\n          </ng-container>\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    </sky-repeater>\n    <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"addItems()\">\n    </sky-infinite-scroll>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"\n        sky-btn\n        sky-btn-primary\n        sky-margin-inline-compact\n        sky-lookup-show-more-modal-save\n      \"\n      type=\"button\"\n      (click)=\"modalInstance.save(selectedItems)\"\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.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1.λ4, selector: "sky-modal-header" }, { type: i1.λ2, selector: "sky-modal-content" }, { type: i3.λ37, selector: "sky-toolbar" }, { type: i3.λ38, selector: "sky-toolbar-section" }, { type: i3.λ39, selector: "sky-toolbar-item" }, { type: i4.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i3.λ40, selector: "sky-toolbar-view-actions" }, { type: i5.λ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: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i7.λ10, selector: "sky-repeater-item", inputs: ["itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i7.λ8, selector: "sky-repeater-item-content" }, { type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { type: i1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { type: i10.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i11.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // Suppress this error rather than fix the selector since consumers with unit tests
+                    // may be looking for an element with this selector. We can change it in the next major
+                    // version of SKY UX.
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'skyux-lookup-show-more-modal',
+                    templateUrl: './lookup-show-more-modal.component.html',
+                    styleUrls: ['./lookup-show-more-modal.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyModalInstance }, { type: i2.SkyLookupShowMoreNativePickerContext }, { type: i0.ChangeDetectorRef }]; } });
+//# sourceMappingURL=lookup-show-more-modal.component.js.map