@skyux/lookup 5.2.1 → 5.5.0-alpha.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"lookup-show-more-modal.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/lookup/src/lib/modules/lookup/lookup-show-more-modal.component.ts","../../../../../../../../libs/components/lookup/src/lib/modules/lookup/lookup-show-more-modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnDestroy,\n} from '@angular/core';\n\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { Subject } from 'rxjs';\n\nimport { SkyLookupShowMoreNativePickerContext } from './types/lookup-show-more-native-picker-context';\n\n/**\n * @internal\n * Internal component to implement the native picker.\n */\n@Component({\n  // Suppress this error rather than fix the selector since consumers with unit tests\n  // may be looking for an element with this selector. We can change it in the next major\n  // version of SKY UX.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'skyux-lookup-show-more-modal',\n  templateUrl: './lookup-show-more-modal.component.html',\n  styleUrls: ['./lookup-show-more-modal.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyLookupShowMoreModalComponent\n  implements AfterViewInit, OnDestroy\n{\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: any[];\n\n  public dataManagerConfig = {\n    sortOptions: [\n      {\n        id: 'az',\n        label: 'Alphabetical (A - Z)',\n        descending: false,\n        propertyName: 'name',\n      },\n      {\n        id: 'za',\n        label: 'Alphabetical (Z - A)',\n        descending: true,\n        propertyName: 'name',\n      },\n    ],\n  };\n\n  public displayedItems: any[] = [];\n  public itemsHaveMore: boolean = false;\n  public onlyShowSelected: boolean = false;\n  public searchText: string;\n  public selectedItems: { index: number; itemData: any }[] = [];\n\n  private itemIndex: number = 0;\n  private ngUnsubscribe = new Subject<void>();\n\n  constructor(\n    public modalInstance: SkyModalInstance,\n    public context: SkyLookupShowMoreNativePickerContext,\n    private changeDetector: ChangeDetectorRef\n  ) {}\n\n  public ngAfterViewInit(): void {\n    this.searchText = this.context.initialSearch;\n    this.addItems();\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n\n  public addButtonClicked(): void {\n    this.addClick.next();\n  }\n\n  public addItems(): void {\n    if (!this.items || this.items.length === 0) {\n      let selectedItems: any[] = this.selectedItems.slice();\n\n      this.items = this.context.items\n        ? this.context.items.map((item) => {\n            return {\n              value: item,\n              selected: false,\n            };\n          })\n        : [];\n\n      this.items.forEach((item) => {\n        const isInitialValue: boolean =\n          this.context.initialValue === item.value;\n\n        const initialIsArray: boolean = Array.isArray(\n          this.context.initialValue\n        );\n        const initialValueContainsItem: boolean =\n          this.context.initialValue.findIndex(\n            (initialItem: any) => initialItem === item.value\n          ) >= 0;\n\n        if (isInitialValue || (initialIsArray && initialValueContainsItem)) {\n          item.selected = true;\n          const itemIndex = this.items.indexOf(item);\n          if (\n            selectedItems.findIndex(\n              (selectedItem) => selectedItem.index === itemIndex\n            ) < 0\n          ) {\n            selectedItems.push({ index: itemIndex, itemData: item.value });\n          }\n        }\n      });\n\n      this.selectedItems = selectedItems;\n      this.updateDataState();\n      this.changeDetector.markForCheck();\n    }\n\n    this.itemIndex = this.itemIndex + 10;\n    this.searchItems(this.items).then((searchedItems) => {\n      this.displayedItems = searchedItems.slice(0, this.itemIndex);\n\n      if (this.itemIndex > searchedItems.length) {\n        this.itemsHaveMore = false;\n      } else {\n        this.itemsHaveMore = true;\n      }\n      this.changeDetector.markForCheck();\n    });\n  }\n\n  public clearAll(): void {\n    this.displayedItems.forEach((item) => {\n      if (item.selected) {\n        item.selected = false;\n      }\n    });\n    this.selectedItems = [];\n    this.updateDataState();\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    if (this.context.selectMode === 'single') {\n      /* Sanity check - single select mode should only alow for a `true` select state */\n      /* istanbul ignore else */\n      if (newSelectState) {\n        itemToSelect.selected = true;\n        this.items.forEach((item) => {\n          if (item.value !== itemToSelect.value) {\n            item.selected = false;\n          }\n        });\n        this.displayedItems.forEach((item) => {\n          if (item.value !== itemToSelect.value) {\n            item.selected = false;\n          }\n        });\n        const itemIndex = this.items.findIndex(\n          (item) => item.value === itemToSelect.value\n        );\n        this.selectedItems = [\n          { index: itemIndex, itemData: this.items[itemIndex].value },\n        ];\n      }\n    } else {\n      let selectedItems: { index: number; itemData: any }[] =\n        this.selectedItems;\n      const allItemsIndex = this.items.findIndex(\n        (item) => item.value === itemToSelect.value\n      );\n      let selectedItemsIndex = selectedItems.findIndex(\n        (selectedItem) => selectedItem.index === allItemsIndex\n      );\n\n      if (newSelectState && selectedItemsIndex === -1) {\n        selectedItems.push({\n          index: allItemsIndex,\n          itemData: this.items[allItemsIndex].value,\n        });\n      } else if (!newSelectState && selectedItemsIndex !== -1) {\n        selectedItems.splice(selectedItemsIndex, 1);\n      }\n\n      this.selectedItems = selectedItems;\n    }\n    this.updateDataState();\n    this.changeDetector.markForCheck();\n  }\n\n  public searchApplied(searchText: string) {\n    /* istanbul ignore else */\n    if (this.searchText !== searchText) {\n      this.itemIndex = 10;\n    }\n    this.searchText = searchText;\n    this.updateDataState();\n  }\n\n  public searchItems(items: any[]): Promise<any[]> {\n    let searchText = this.searchText;\n\n    if (searchText) {\n      const resultValues = this.context.search(\n        searchText,\n        items.map((item) => {\n          return item.value;\n        })\n      );\n\n      if (resultValues instanceof Array) {\n        const result = items.filter(\n          (item) => resultValues.indexOf(item.value) >= 0\n        );\n        return Promise.resolve(result);\n      } else {\n        return resultValues.then((values) => {\n          const result = items.filter(\n            (item) => values.indexOf(item.value) >= 0\n          );\n          return Promise.resolve(result);\n        });\n      }\n    } else {\n      return Promise.resolve(items);\n    }\n  }\n\n  public selectAll(): void {\n    let selectedItems: { index: number; itemData: any }[] = this.selectedItems;\n\n    this.displayedItems.forEach((item: any) => {\n      if (!item.selected) {\n        item.selected = true;\n\n        const index = this.items.indexOf(item);\n\n        /* Sanity check */\n        /* istanbul ignore else */\n        if (\n          selectedItems.findIndex(\n            (selectedItem) => selectedItem.index === index\n          ) < 0\n        ) {\n          selectedItems.push({\n            index: index,\n            itemData: this.items[index].value,\n          });\n        }\n      }\n    });\n\n    this.selectedItems = selectedItems;\n    this.updateDataState();\n    this.changeDetector.markForCheck();\n  }\n\n  public updateDataState(): void {\n    let selectedItems: { index: number; itemData: any }[] = this.selectedItems;\n    this.items.forEach((item: any, index: number) => {\n      item.selected =\n        selectedItems.findIndex(\n          (selectedItem) => selectedItem.index === index\n        ) !== -1;\n    });\n\n    this.searchItems(this.items).then((searchedItems) => {\n      if (this.onlyShowSelected) {\n        searchedItems = searchedItems.filter((item) => item.selected);\n      }\n      this.displayedItems = searchedItems.slice(0, this.itemIndex);\n\n      if (this.itemIndex > searchedItems.length) {\n        this.itemsHaveMore = false;\n      } else {\n        this.itemsHaveMore = true;\n      }\n\n      this.changeDetector.markForCheck();\n    });\n  }\n\n  public updateItemData(data: any[]): void {\n    this.context.items = data;\n    this.items = undefined;\n    this.itemIndex = 10;\n    this.selectedItems.forEach((selectedItem) => {\n      this.context.items.forEach((item: any, index: number) => {\n        if (selectedItem.itemData === item) {\n          selectedItem.index = index;\n        }\n      });\n    });\n\n    this.addItems();\n\n    this.changeDetector.markForCheck();\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    <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"]}