@skyux/lookup 8.4.0 → 8.5.0

package/documentation.json

@@ -1622,7 +1622,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/selection-modal/selection-modal.service.ts",
-                "line": 24,
+                "line": 25,
                 "character": 2
               }
             ],
@@ -1665,7 +1665,7 @@
             "sources": [
               {
                 "fileName": "projects/lookup/src/modules/selection-modal/selection-modal.service.ts",
-                "line": 32,
+                "line": 33,
                 "character": 9
               }
             ],
@@ -1723,7 +1723,7 @@
         "sources": [
           {
             "fileName": "projects/lookup/src/modules/selection-modal/selection-modal.service.ts",
-            "line": 21,
+            "line": 22,
             "character": 13
           }
         ]
@@ -14639,6 +14639,56 @@
       "filePath": "/projects/lookup/documentation/code-examples/country-field/basic/country-field-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyCountryFieldModule } from '@skyux/lookup';\n\nimport { CountryFieldDemoComponent } from './country-field-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyCountryFieldModule,\n    SkyInputBoxModule,\n  ],\n  declarations: [CountryFieldDemoComponent],\n  exports: [CountryFieldDemoComponent],\n})\nexport class CountryFieldDemoModule {}\n"
     },
+    {
+      "fileName": "lookup-async-demo-search-results.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo-search-results.ts",
+      "rawContents": "import { LookupDemoPerson } from './lookup-demo-person';\n\nexport interface LookupAsyncDemoSearchResults {\n  hasMore: boolean;\n  people: LookupDemoPerson[];\n  totalCount: number;\n}\n"
+    },
+    {
+      "fileName": "lookup-async-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.component.html",
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box data-sky-id=\"favorite-names-field\">\n      <label class=\"sky-control-label\" skyId #favoriteNamesLabel=\"skyId\">\n        Favorite name(s)\n      </label>\n      <sky-lookup\n        formControlName=\"favoriteNames\"\n        idProperty=\"name\"\n        [ariaLabelledBy]=\"favoriteNamesLabel.id\"\n        [enableShowMore]=\"true\"\n        (searchAsync)=\"searchAsync($event)\"\n        [showAddButton]=\"true\"\n        (addClick)=\"addClick($event)\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
+    },
+    {
+      "fileName": "lookup-async-demo.component.scss",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.component.scss",
+      "rawContents": ".lookup-demo-alert {\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #cdcfd2;\n  border-radius: 3px;\n}\n\n.lookup-demo-alert pre {\n  margin: 0;\n}\n"
+    },
+    {
+      "fileName": "lookup-async-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyInputBoxHarness } from '@skyux/forms/testing';\nimport { SkyLookupHarness } from '@skyux/lookup/testing';\n\nimport { of } from 'rxjs';\n\nimport { LookupAsyncDemoComponent } from './lookup-async-demo.component';\nimport { LookupAsyncDemoModule } from './lookup-async-demo.module';\nimport { LookupAsyncDemoService } from './lookup-async-demo.service';\n\ndescribe('Lookup asynchronous search demo', () => {\n  let mockSvc!: jasmine.SpyObj<LookupAsyncDemoService>;\n\n  async function setupTest(): Promise<{\n    lookupHarness: SkyLookupHarness | null;\n    fixture: ComponentFixture<LookupAsyncDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(LookupAsyncDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const lookupHarness = await (\n      await loader.getHarness(\n        SkyInputBoxHarness.with({ dataSkyId: 'favorite-names-field' })\n      )\n    ).queryHarness(SkyLookupHarness);\n\n    return { lookupHarness, fixture };\n  }\n\n  beforeEach(() => {\n    // Create a mock search service. In a real-world application, the search\n    // service would make a web request which should be avoided in unit tests.\n    mockSvc = jasmine.createSpyObj('LookupAsyncDemoService', ['search']);\n\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, LookupAsyncDemoModule],\n      providers: [\n        {\n          provide: LookupAsyncDemoService,\n          useValue: mockSvc,\n        },\n      ],\n    });\n  });\n\n  it('should set the expected initial value', async () => {\n    const { lookupHarness } = await setupTest();\n\n    await expectAsync(lookupHarness?.getSelectionsText()).toBeResolvedTo([\n      'Shirley',\n    ]);\n  });\n\n  it('should update the form control when a favorite name is selected', async () => {\n    const { lookupHarness, fixture } = await setupTest();\n\n    mockSvc.search.and.callFake((searchText) =>\n      of({\n        hasMore: false,\n        people:\n          searchText === 'b'\n            ? [\n                {\n                  id: '21',\n                  name: 'Bernard',\n                },\n              ]\n            : [],\n        totalCount: 1,\n      })\n    );\n\n    await lookupHarness?.enterText('b');\n    await lookupHarness?.selectSearchResult({\n      text: 'Bernard',\n    });\n\n    expect(fixture.componentInstance.favoritesForm.value.favoriteNames).toEqual(\n      [\n        { id: '16', name: 'Shirley' },\n        { id: '21', name: 'Bernard' },\n      ]\n    );\n  });\n});\n"
+    },
+    {
+      "fileName": "lookup-async-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.component.ts",
+      "rawContents": "import { Component, OnDestroy, OnInit, inject } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyWaitService } from '@skyux/indicators';\nimport {\n  SkyAutocompleteSearchAsyncArgs,\n  SkyLookupAddClickEventArgs,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { Subscription } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\nimport { SelectionModalDemoAddItemComponent } from '../../selection-modal/add-item/selection-modal-demo-add-item.component';\n\nimport { LookupAsyncDemoService } from './lookup-async-demo.service';\nimport { LookupDemoPerson } from './lookup-demo-person';\n\n@Component({\n  selector: 'app-async-lookup-demo',\n  templateUrl: './lookup-async-demo.component.html',\n  styleUrls: ['./lookup-async-demo.component.scss'],\n})\nexport class LookupAsyncDemoComponent implements OnInit, OnDestroy {\n  public favoritesForm: FormGroup<{\n    favoriteNames: FormControl<LookupDemoPerson[] | null>;\n  }>;\n\n  #modalService = inject(SkyModalService);\n  #subscriptions = new Subscription();\n  #svc = inject(LookupAsyncDemoService);\n  #waitSvc = inject(SkyWaitService);\n\n  constructor(formBuilder: FormBuilder) {\n    const names = new FormControl<LookupDemoPerson[]>([\n      { id: '16', name: 'Shirley' },\n    ]);\n\n    this.favoritesForm = formBuilder.group({\n      favoriteNames: names,\n    });\n  }\n\n  public ngOnInit(): void {\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.favoritesForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  public ngOnDestroy(): void {\n    this.#subscriptions.unsubscribe();\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.favoritesForm.value));\n  }\n\n  public searchAsync(args: SkyAutocompleteSearchAsyncArgs): void {\n    // In a real-world application the search service might return an Observable\n    // created by calling HttpClient.get(). Assigning that Observable to the result\n    // allows the lookup component to cancel the web request if it does not complete\n    // before the user searches again.\n    args.result = this.#svc.search(args.searchText).pipe(\n      map((result) => ({\n        hasMore: result.hasMore,\n        items: result.people,\n        totalCount: result.totalCount,\n      }))\n    );\n  }\n\n  public addClick(args: SkyLookupAddClickEventArgs): void {\n    const modal = this.#modalService.open(SelectionModalDemoAddItemComponent);\n    this.#subscriptions.add(\n      modal.closed.subscribe((close: SkyModalCloseArgs) => {\n        if (close.reason === 'save') {\n          this.#subscriptions.add(\n            this.#waitSvc\n              .blockingWrap(this.#svc.addPerson(close.data))\n              .subscribe((data) => {\n                args.itemAdded({\n                  item: close.data,\n                  data: data,\n                });\n              })\n          );\n        }\n      })\n    );\n  }\n}\n"
+    },
+    {
+      "fileName": "lookup-async-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyLookupModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { LookupAsyncDemoComponent } from './lookup-async-demo.component';\nimport { LookupDemoAddItemComponent } from './lookup-demo-add-item.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkyLookupModule,\n  ],\n  declarations: [LookupAsyncDemoComponent, LookupDemoAddItemComponent],\n  exports: [LookupAsyncDemoComponent],\n})\nexport class LookupAsyncDemoModule {}\n"
+    },
+    {
+      "fileName": "lookup-async-demo.service.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-async-demo.service.ts",
+      "rawContents": "import { Injectable } from '@angular/core';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\nimport { LookupAsyncDemoSearchResults } from './lookup-async-demo-search-results';\nimport { LookupDemoPerson } from './lookup-demo-person';\n\nconst people: LookupDemoPerson[] = [\n  { id: '1', name: 'Abed' },\n  { id: '2', name: 'Alex' },\n  { id: '3', name: 'Ben' },\n  { id: '4', name: 'Britta' },\n  { id: '5', name: 'Buzz' },\n  { id: '6', name: 'Craig' },\n  { id: '7', name: 'Elroy' },\n  { id: '8', name: 'Garrett' },\n  { id: '9', name: 'Ian' },\n  { id: '10', name: 'Jeff' },\n  { id: '11', name: 'Leonard' },\n  { id: '12', name: 'Neil' },\n  { id: '13', name: 'Pierce' },\n  { id: '14', name: 'Preston' },\n  { id: '15', name: 'Rachel' },\n  { id: '16', name: 'Shirley' },\n  { id: '17', name: 'Todd' },\n  { id: '18', name: 'Troy' },\n  { id: '19', name: 'Vaughn' },\n  { id: '20', name: 'Vicki' },\n];\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class LookupAsyncDemoService {\n  public search(searchText: string): Observable<LookupAsyncDemoSearchResults> {\n    // Simulate a network call with latency. A real-world application might\n    // use Angular's HttpClient to create an Observable from a call to a\n    // web service.\n    searchText = searchText.toUpperCase();\n\n    const matchingPeople = people.filter((person) =>\n      person.name.toUpperCase().includes(searchText)\n    );\n\n    return of({\n      hasMore: false,\n      people: matchingPeople,\n      totalCount: matchingPeople.length,\n    }).pipe(delay(800));\n  }\n\n  public addPerson(person: LookupDemoPerson): Observable<LookupDemoPerson[]> {\n    // Simulate adding a person with a network call.\n    if (!people.some((item) => item.name === person.name)) {\n      people.unshift(person);\n    }\n\n    return of(people.slice()).pipe(delay(800));\n  }\n}\n"
+    },
+    {
+      "fileName": "lookup-demo-add-item.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-demo-add-item.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header>\n    <h2>Add Item</h2>\n  </sky-modal-header>\n  <sky-modal-content>\n    <form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n      <sky-input-box>\n        <label class=\"sky-control-label\">Name</label>\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n          class=\"sky-form-control\"\n        />\n      </sky-input-box>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-default\" (click)=\"close()\">Cancel</button>\n    <button class=\"sky-btn sky-btn-primary\" (click)=\"save()\">Add</button>\n  </sky-modal-footer>\n</sky-modal>\n"
+    },
+    {
+      "fileName": "lookup-demo-add-item.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-demo-add-item.component.ts",
+      "rawContents": "import { Component, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\n\nlet nextId = 21;\n\n@Component({\n  selector: 'app-lookup-demo-add-item',\n  templateUrl: './lookup-demo-add-item.component.html',\n})\nexport class LookupDemoAddItemComponent {\n  public readonly formGroup: FormGroup;\n\n  #modal = inject(SkyModalInstance);\n\n  constructor() {\n    this.formGroup = inject(FormBuilder).group({\n      id: [`${nextId++}`],\n      name: ['', Validators.required],\n    });\n  }\n\n  public close() {\n    this.#modal.close();\n  }\n\n  public save() {\n    if (this.formGroup.valid) {\n      this.#modal.close(this.formGroup.value, 'save');\n    } else {\n      this.formGroup.markAllAsTouched();\n    }\n  }\n}\n"
+    },
+    {
+      "fileName": "lookup-demo-person.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/lookup/add-item/lookup-demo-person.ts",
+      "rawContents": "export interface LookupDemoPerson {\n  id: string;\n  name: string;\n}\n"
+    },
     {
       "fileName": "lookup-async-demo-search-results.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/async/lookup-async-demo-search-results.ts",
@@ -14839,6 +14889,51 @@
       "filePath": "/projects/lookup/documentation/code-examples/search/basic/search-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { SearchDemoComponent } from './search-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyRepeaterModule, SkySearchModule, SkyToolbarModule],\n  declarations: [SearchDemoComponent],\n  exports: [SearchDemoComponent],\n})\nexport class SearchDemoModule {}\n"
     },
+    {
+      "fileName": "selection-modal-demo-add-item.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-add-item.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header>\n    <h2>Add Item</h2>\n  </sky-modal-header>\n  <sky-modal-content>\n    <form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n      <sky-input-box>\n        <label class=\"sky-control-label\">Name</label>\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n          class=\"sky-form-control\"\n        />\n      </sky-input-box>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-default\" (click)=\"close()\">Cancel</button>\n    <button class=\"sky-btn sky-btn-primary\" (click)=\"save()\">Add</button>\n  </sky-modal-footer>\n</sky-modal>\n"
+    },
+    {
+      "fileName": "selection-modal-demo-add-item.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-add-item.component.ts",
+      "rawContents": "import { Component, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\n\nlet nextId = 21;\n\n@Component({\n  selector: 'app-selection-modal-demo-add-item',\n  templateUrl: './selection-modal-demo-add-item.component.html',\n})\nexport class SelectionModalDemoAddItemComponent {\n  public readonly formGroup: FormGroup;\n\n  #modal = inject(SkyModalInstance);\n\n  constructor() {\n    this.formGroup = inject(FormBuilder).group({\n      id: [`${nextId++}`],\n      name: ['', Validators.required],\n    });\n  }\n\n  public close() {\n    this.#modal.close();\n  }\n\n  public save() {\n    if (this.formGroup.valid) {\n      this.#modal.close(this.formGroup.value, 'save');\n    } else {\n      this.formGroup.markAllAsTouched();\n    }\n  }\n}\n"
+    },
+    {
+      "fileName": "selection-modal-demo-person.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-person.ts",
+      "rawContents": "export interface SelectionModalDemoPerson {\n  id: string;\n  name: string;\n}\n"
+    },
+    {
+      "fileName": "selection-modal-demo-search-results.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo-search-results.ts",
+      "rawContents": "import { SelectionModalDemoPerson } from './selection-modal-demo-person';\n\nexport interface SelectionModalAsyncDemoSearchResults {\n  hasMore: boolean;\n  people: SelectionModalDemoPerson[];\n  totalCount: number;\n}\n"
+    },
+    {
+      "fileName": "selection-modal-demo.component.html",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.component.html",
+      "rawContents": "<div class=\"sky-margin-stacked-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-demo-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n<div *ngIf=\"selectedPeople?.length\">\n  Selected people:\n  <ul class=\"selection-modal-demo-selected\">\n    <li *ngFor=\"let selectedPerson of selectedPeople\">\n      {{ selectedPerson.name }}\n    </li>\n  </ul>\n</div>\n"
+    },
+    {
+      "fileName": "selection-modal-demo.component.spec.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkySelectionModalHarness } from '@skyux/lookup/testing';\n\nimport { of } from 'rxjs';\n\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\nimport { SelectionModalDemoModule } from './selection-modal-demo.module';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\ndescribe('Selection modal demo', () => {\n  let mockSvc: jasmine.SpyObj<SelectionModalDemoService>;\n\n  async function setupTest(): Promise<{\n    harness: SkySelectionModalHarness;\n    fixture: ComponentFixture<SelectionModalDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(SelectionModalDemoComponent);\n    const openBtn = fixture.nativeElement.querySelector(\n      '.selection-modal-demo-show-btn'\n    );\n\n    openBtn.click();\n    fixture.detectChanges();\n\n    const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n\n    const harness = await rootLoader.getHarness(SkySelectionModalHarness);\n    return { harness, fixture };\n  }\n\n  beforeEach(() => {\n    // Create a mock search service. In a real-world application, the search\n    // service would make a web request which should be avoided in unit tests.\n    mockSvc = jasmine.createSpyObj('SelectionModalDemoService', ['search']);\n\n    mockSvc.search.and.callFake((searchText) => {\n      return of({\n        hasMore: false,\n        people:\n          searchText === 'ra'\n            ? [\n                {\n                  id: '1',\n                  name: 'Rachel',\n                },\n              ]\n            : [],\n        totalCount: 1,\n      });\n    });\n\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, SelectionModalDemoModule],\n    });\n  });\n\n  it('should update the selected items list when an item is selected', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.saveAndClose();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(1);\n    expect(selectedItemEls[0].innerText.trim()).toBe('Rachel');\n  });\n\n  it('should not update the selected items list when the user cancels the selection modal', async () => {\n    const { harness, fixture } = await setupTest();\n\n    await harness.enterSearchText('ra');\n    await harness.selectSearchResult({\n      contentText: 'Rachel',\n    });\n    await harness.cancel();\n\n    const selectedItemEls = fixture.nativeElement.querySelectorAll(\n      '.selection-modal-demo-selected li'\n    );\n\n    expect(selectedItemEls).toHaveSize(0);\n  });\n});\n"
+    },
+    {
+      "fileName": "selection-modal-demo.component.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.component.ts",
+      "rawContents": "import { Component, OnDestroy, inject } from '@angular/core';\nimport {\n  SkySelectionModalAddClickEventArgs,\n  SkySelectionModalCloseArgs,\n  SkySelectionModalSearchResult,\n  SkySelectionModalService,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { Subscription } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\nimport { SelectionModalDemoAddItemComponent } from './selection-modal-demo-add-item.component';\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalDemoService } from './selection-modal-demo.service';\n\n@Component({\n  selector: 'app-selection-modal-demo',\n  templateUrl: './selection-modal-demo.component.html',\n})\nexport class SelectionModalDemoComponent implements OnDestroy {\n  public selectedPeople: SelectionModalDemoPerson[] | undefined;\n\n  #modalService = inject(SkyModalService);\n  #searchSvc = inject(SelectionModalDemoService);\n  #selectionModalSvc = inject(SkySelectionModalService);\n  #subscriptions = new Subscription();\n\n  public ngOnDestroy(): void {\n    this.#subscriptions.unsubscribe();\n  }\n\n  public showSelectionModal(): void {\n    const instance = this.#selectionModalSvc.open({\n      descriptorProperty: 'name',\n      idProperty: 'id',\n      searchAsync: (args) =>\n        this.#searchSvc.search(args.searchText).pipe(\n          map(\n            (results): SkySelectionModalSearchResult => ({\n              hasMore: results.hasMore,\n              items: results.people,\n              totalCount: results.totalCount,\n            })\n          )\n        ),\n      selectMode: 'single',\n      showAddButton: true,\n      addClick: (args: SkySelectionModalAddClickEventArgs) => {\n        const modal = this.#modalService.open(\n          SelectionModalDemoAddItemComponent\n        );\n        this.#subscriptions.add(\n          modal.closed.subscribe((close: SkyModalCloseArgs) => {\n            if (close.reason === 'save') {\n              this.#searchSvc.addItem(close.data);\n              args.itemAdded({ item: close.data });\n            }\n          })\n        );\n      },\n    });\n\n    this.#subscriptions.add(\n      instance.closed.subscribe((args: SkySelectionModalCloseArgs) => {\n        if (args.reason === 'save') {\n          this.selectedPeople =\n            args.selectedItems as SelectionModalDemoPerson[];\n        }\n      })\n    );\n  }\n}\n"
+    },
+    {
+      "fileName": "selection-modal-demo.module.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkySelectionModalModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { SelectionModalDemoAddItemComponent } from './selection-modal-demo-add-item.component';\nimport { SelectionModalDemoComponent } from './selection-modal-demo.component';\n\n@NgModule({\n  declarations: [\n    SelectionModalDemoAddItemComponent,\n    SelectionModalDemoComponent,\n  ],\n  exports: [SelectionModalDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkySelectionModalModule,\n  ],\n})\nexport class SelectionModalDemoModule {}\n"
+    },
+    {
+      "fileName": "selection-modal-demo.service.ts",
+      "filePath": "/projects/lookup/documentation/code-examples/selection-modal/add-item/selection-modal-demo.service.ts",
+      "rawContents": "import { Injectable } from '@angular/core';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\nimport { SelectionModalDemoPerson } from './selection-modal-demo-person';\nimport { SelectionModalAsyncDemoSearchResults } from './selection-modal-demo-search-results';\n\nconst people: SelectionModalDemoPerson[] = [\n  { id: '1', name: 'Abed' },\n  { id: '2', name: 'Alex' },\n  { id: '3', name: 'Ben' },\n  { id: '4', name: 'Britta' },\n  { id: '5', name: 'Buzz' },\n  { id: '6', name: 'Craig' },\n  { id: '7', name: 'Elroy' },\n  { id: '8', name: 'Garrett' },\n  { id: '9', name: 'Ian' },\n  { id: '10', name: 'Jeff' },\n  { id: '11', name: 'Leonard' },\n  { id: '12', name: 'Neil' },\n  { id: '13', name: 'Pierce' },\n  { id: '14', name: 'Preston' },\n  { id: '15', name: 'Rachel' },\n  { id: '16', name: 'Shirley' },\n  { id: '17', name: 'Todd' },\n  { id: '18', name: 'Troy' },\n  { id: '19', name: 'Vaughn' },\n  { id: '20', name: 'Vicki' },\n];\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SelectionModalDemoService {\n  public addItem(item: SelectionModalDemoPerson): void {\n    people.push(item);\n  }\n\n  public search(\n    searchText: string\n  ): Observable<SelectionModalAsyncDemoSearchResults> {\n    // Simulate a network call with latency. A real-world application might\n    // use Angular's HttpClient to create an Observable from a call to a\n    // web service.\n    searchText = searchText.toUpperCase();\n\n    const matchingPeople = people.filter((person) =>\n      person.name.toUpperCase().includes(searchText)\n    );\n\n    return of({\n      hasMore: false,\n      people: matchingPeople,\n      totalCount: matchingPeople.length,\n    }).pipe(delay(800));\n  }\n}\n"
+    },
     {
       "fileName": "selection-modal-demo-person.ts",
       "filePath": "/projects/lookup/documentation/code-examples/selection-modal/basic/selection-modal-demo-person.ts",

package/esm2020/lib/modules/lookup/lookup-show-more-modal.component.mjs

@@ -263,7 +263,7 @@ export class SkyLookupShowMoreModalComponent {
 }
 _SkyLookupShowMoreModalComponent_changeDetector = new WeakMap(), _SkyLookupShowMoreModalComponent_itemIndex = new WeakMap(), _SkyLookupShowMoreModalComponent_ngUnsubscribe = new WeakMap();
 SkyLookupShowMoreModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [{ token: i1.SkyModalInstance }, { token: i2.SkyLookupShowMoreNativePickerContext }, { token: i0.ChangeDetectorRef }, { token: i3.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
-SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    <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-multiselect-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)=\"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              repeaterItemTemplate ?? 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\n      [enabled]=\"itemsHaveMore\"\n      [loading]=\"itemsLoading\"\n      (scrollEnd)=\"addItems()\"\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      (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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i8.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i9.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i3.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    <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-multiselect-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)=\"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              repeaterItemTemplate ?? 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\n      [enabled]=\"itemsHaveMore\"\n      [loading]=\"itemsLoading\"\n      (scrollEnd)=\"addItems()\"\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      (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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i8.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i9.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i3.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'skyux-lookup-show-more-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    <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-multiselect-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)=\"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              repeaterItemTemplate ?? 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\n      [enabled]=\"itemsHaveMore\"\n      [loading]=\"itemsLoading\"\n      (scrollEnd)=\"addItems()\"\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      (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"] }]

package/esm2020/lib/modules/selection-modal/selection-modal.component.mjs

@@ -191,7 +191,7 @@ _SkySelectionModalComponent_changeDetector = new WeakMap(), _SkySelectionModalCo
     }
 };
 SkySelectionModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalComponent, deps: [{ token: i1.SkyModalInstance }, { token: i2.SkySelectionModalContext }, { token: i0.ChangeDetectorRef }, { token: i3.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
-SkySelectionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySelectionModalComponent, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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-multiselect-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]\n            | skySelectionModalItemSelected : 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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i8.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i9.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i3.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i12.SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkySelectionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySelectionModalComponent, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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-multiselect-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]\n            | skySelectionModalItemSelected : 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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i8.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i9.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i3.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i12.SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-selection-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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-multiselect-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]\n            | skySelectionModalItemSelected : 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"] }]

package/esm2020/lib/modules/selection-modal/selection-modal.service.mjs

@@ -1,6 +1,7 @@
 var _SkySelectionModalService_modalSvc;
 import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { Injectable } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
 import { SkySelectionModalComponent } from './selection-modal.component';
 import { SkySelectionModalContext } from './types/selection-modal-context';
 import { SkySelectionModalInstance } from './types/selection-modal-instance';
@@ -41,7 +42,9 @@ export class SkySelectionModalService {
             wrapperClass: args.wrapperClass,
         });
         const instance = new SkySelectionModalInstance(modalInstance.componentInstance.id);
-        instance.itemAdded.subscribe((item) => {
+        instance.itemAdded
+            .pipe(takeUntil(modalInstance.closed))
+            .subscribe((item) => {
             modalInstance.componentInstance.addItem(item);
         });
         modalInstance.closed.subscribe((modalCloseArgs) => {
@@ -62,7 +65,9 @@ export class SkySelectionModalService {
             instance.close(closeArgs);
         });
         const selectionModal = modalInstance.componentInstance;
-        selectionModal.addClick.subscribe(() => {
+        selectionModal.addClick
+            .pipe(takeUntil(modalInstance.closed))
+            .subscribe(() => {
             if (args.addClick) {
                 const addArgs = {
                     itemAdded(args) {
@@ -84,4 +89,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     providedIn: 'any',
                 }]
         }], ctorParameters: function () { return [{ type: i1.SkyModalService }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLW1vZGFsLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvbG9va3VwL3NyYy9saWIvbW9kdWxlcy9zZWxlY3Rpb24tbW9kYWwvc2VsZWN0aW9uLW1vZGFsLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBTzNDLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBR3pFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7QUFHN0U7O0dBRUc7QUFJSCxNQUFNLE9BQU8sd0JBQXdCO0lBR25DLFlBQVksUUFBeUI7UUFGckMscURBQTJCO1FBR3pCLHVCQUFBLElBQUksc0NBQWEsUUFBUSxNQUFBLENBQUM7SUFDNUIsQ0FBQztJQUVEOzs7T0FHRztJQUNJLElBQUksQ0FBQyxJQUErQjtRQUN6QyxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBRWhDLE1BQU0sT0FBTyxHQUFHLElBQUksd0JBQXdCLENBQzFDLElBQUksQ0FBQyxrQkFBa0IsRUFDdkIsSUFBSSxDQUFDLFVBQVUsRUFDZixJQUFJLENBQUMsYUFBYSxJQUFJLEVBQUUsRUFDeEIsWUFBWSxJQUFJLEVBQUUsRUFDbEIsQ0FBQyxVQUFVLEVBQUUsRUFBRTtZQUNiLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQztnQkFDdEIsTUFBTSxFQUFFLFVBQVUsQ0FBQyxNQUFNO2dCQUN6QixVQUFVLEVBQUUsVUFBVSxDQUFDLFVBQVU7Z0JBQ2pDLGdCQUFnQixFQUFFLFVBQVUsQ0FBQyxnQkFBZ0I7YUFDOUMsQ0FBaUQsQ0FBQztRQUNyRCxDQUFDLEVBQ0QsSUFBSSxDQUFDLFVBQVUsRUFDZixJQUFJLENBQUMsYUFBYSxJQUFJLEtBQUssRUFDM0I7WUFDRSxZQUFZLEVBQUUsSUFBSSxDQUFDLFlBQVk7WUFDL0IsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLO1NBQ2xCLENBQ0YsQ0FBQztRQUVGLE1BQU0sYUFBYSxHQUFHLHVCQUFBLElBQUksMENBQVUsQ0FBQyxJQUFJLENBQUMsMEJBQTBCLEVBQUU7WUFDcEUsU0FBUyxFQUFFO2dCQUNUO29CQUNFLE9BQU8sRUFBRSx3QkFBd0I7b0JBQ2pDLFFBQVEsRUFBRSxPQUFPO2lCQUNsQjthQUNGO1lBQ0QsSUFBSSxFQUFFLE9BQU87WUFDYixZQUFZLEVBQUUsSUFBSSxDQUFDLFlBQVk7U0FDaEMsQ0FBQyxDQUFDO1FBRUgsTUFBTSxRQUFRLEdBQUcsSUFBSSx5QkFBeUIsQ0FDNUMsYUFBYSxDQUFDLGlCQUFpQixDQUFDLEVBQUUsQ0FDbkMsQ0FBQztRQUVGLFFBQVEsQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDbkMsYUFBYSxDQUFDLGlCQUFnRCxDQUFDLE9BQU8sQ0FDckUsSUFBSSxDQUNMLENBQUM7UUFDSixDQUFDLENBQUMsQ0FBQztRQUVILGFBQWEsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsY0FBYyxFQUFFLEVBQUU7WUFDaEQsSUFBSSxTQUFxQyxDQUFDO1lBRTFDLFFBQVEsY0FBYyxDQUFDLE1BQU0sRUFBRTtnQkFDN0IsS0FBSyxNQUFNO29CQUNULFNBQVMsR0FBRzt3QkFDVixNQUFNLEVBQUUsTUFBTTt3QkFDZCxhQUFhLEVBQUUsY0FBYyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQ3BDLENBQUMsSUFBMkIsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FDL0M7cUJBQ0YsQ0FBQztvQkFDRixNQUFNO2dCQUNSLEtBQUssUUFBUTtvQkFDWCxTQUFTLEdBQUcsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLENBQUM7b0JBQ2pDLE1BQU07Z0JBQ1I7b0JBQ0UsU0FBUyxHQUFHLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxDQUFDO2FBQ25DO1lBRUQsUUFBUSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUM1QixDQUFDLENBQUMsQ0FBQztRQUVILE1BQU0sY0FBYyxHQUNsQixhQUFhLENBQUMsaUJBQStDLENBQUM7UUFFaEUsY0FBYyxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ3JDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDakIsTUFBTSxPQUFPLEdBQXVDO29CQUNsRCxTQUFTLENBQUMsSUFBSTt3QkFDWixjQUFjLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztvQkFDcEMsQ0FBQztpQkFDRixDQUFDO2dCQUVGLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLENBQUM7YUFDeEI7UUFDSCxDQUFDLENBQUMsQ0FBQztRQUVILE9BQU8sUUFBUSxDQUFDO0lBQ2xCLENBQUM7OztxSEE3RlUsd0JBQXdCO3lIQUF4Qix3QkFBd0IsY0FGdkIsS0FBSzsyRkFFTix3QkFBd0I7a0JBSHBDLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLEtBQUs7aUJBQ2xCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2t5TW9kYWxTZXJ2aWNlIH0gZnJvbSAnQHNreXV4L21vZGFscyc7XG5cbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgU2t5QXV0b2NvbXBsZXRlU2VhcmNoQXN5bmNSZXN1bHQgfSBmcm9tICcuLi9hdXRvY29tcGxldGUvdHlwZXMvYXV0b2NvbXBsZXRlLXNlYXJjaC1hc3luYy1yZXN1bHQnO1xuXG5pbXBvcnQgeyBTa3lTZWxlY3Rpb25Nb2RhbENvbXBvbmVudCB9IGZyb20gJy4vc2VsZWN0aW9uLW1vZGFsLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTa3lTZWxlY3Rpb25Nb2RhbEFkZENsaWNrRXZlbnRBcmdzIH0gZnJvbSAnLi90eXBlcy9zZWxlY3Rpb24tbW9kYWwtYWRkLWNsaWNrLWV2ZW50LWFyZ3MnO1xuaW1wb3J0IHsgU2t5U2VsZWN0aW9uTW9kYWxDbG9zZUFyZ3MgfSBmcm9tICcuL3R5cGVzL3NlbGVjdGlvbi1tb2RhbC1jbG9zZS1hcmdzJztcbmltcG9ydCB7IFNreVNlbGVjdGlvbk1vZGFsQ29udGV4dCB9IGZyb20gJy4vdHlwZXMvc2VsZWN0aW9uLW1vZGFsLWNvbnRleHQnO1xuaW1wb3J0IHsgU2t5U2VsZWN0aW9uTW9kYWxJbnN0YW5jZSB9IGZyb20gJy4vdHlwZXMvc2VsZWN0aW9uLW1vZGFsLWluc3RhbmNlJztcbmltcG9ydCB7IFNreVNlbGVjdGlvbk1vZGFsT3BlbkFyZ3MgfSBmcm9tICcuL3R5cGVzL3NlbGVjdGlvbi1tb2RhbC1vcGVuLWFyZ3MnO1xuXG4vKipcbiAqIERpc3BsYXlzIGEgbW9kYWwgZm9yIHNlbGVjdGluZyBvbmUgb3IgbW9yZSB2YWx1ZXMuXG4gKi9cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ2FueScsXG59KVxuZXhwb3J0IGNsYXNzIFNreVNlbGVjdGlvbk1vZGFsU2VydmljZSB7XG4gICNtb2RhbFN2YzogU2t5TW9kYWxTZXJ2aWNlO1xuXG4gIGNvbnN0cnVjdG9yKG1vZGFsU3ZjOiBTa3lNb2RhbFNlcnZpY2UpIHtcbiAgICB0aGlzLiNtb2RhbFN2YyA9IG1vZGFsU3ZjO1xuICB9XG5cbiAgLyoqXG4gICAqIE9wZW5zIHRoZSBzZWxlY3Rpb24gbW9kYWwuXG4gICAqIEBwYXJhbSBhcmdzIFBhcmFtZXRlcnMgZm9yIHRoZSBzZWxlY3Rpb24gbW9kYWwuXG4gICAqL1xuICBwdWJsaWMgb3BlbihhcmdzOiBTa3lTZWxlY3Rpb25Nb2RhbE9wZW5BcmdzKTogU2t5U2VsZWN0aW9uTW9kYWxJbnN0YW5jZSB7XG4gICAgY29uc3QgaW5pdGlhbFZhbHVlID0gYXJncy52YWx1ZTtcblxuICAgIGNvbnN0IGNvbnRleHQgPSBuZXcgU2t5U2VsZWN0aW9uTW9kYWxDb250ZXh0KFxuICAgICAgYXJncy5kZXNjcmlwdG9yUHJvcGVydHksXG4gICAgICBhcmdzLmlkUHJvcGVydHksXG4gICAgICBhcmdzLmluaXRpYWxTZWFyY2ggfHwgJycsXG4gICAgICBpbml0aWFsVmFsdWUgfHwgW10sXG4gICAgICAoc2VhcmNoQXJncykgPT4ge1xuICAgICAgICByZXR1cm4gYXJncy5zZWFyY2hBc3luYyh7XG4gICAgICAgICAgb2Zmc2V0OiBzZWFyY2hBcmdzLm9mZnNldCxcbiAgICAgICAgICBzZWFyY2hUZXh0OiBzZWFyY2hBcmdzLnNlYXJjaFRleHQsXG4gICAgICAgICAgY29udGludWF0aW9uRGF0YTogc2VhcmNoQXJncy5jb250aW51YXRpb25EYXRhLFxuICAgICAgICB9KSBhcyBPYnNlcnZhYmxlPFNreUF1dG9jb21wbGV0ZVNlYXJjaEFzeW5jUmVzdWx0PjtcbiAgICAgIH0sXG4gICAgICBhcmdzLnNlbGVjdE1vZGUsXG4gICAgICBhcmdzLnNob3dBZGRCdXR0b24gfHwgZmFsc2UsXG4gICAgICB7XG4gICAgICAgIGl0ZW1UZW1wbGF0ZTogYXJncy5pdGVtVGVtcGxhdGUsXG4gICAgICAgIHRpdGxlOiBhcmdzLnRpdGxlLFxuICAgICAgfVxuICAgICk7XG5cbiAgICBjb25zdCBtb2RhbEluc3RhbmNlID0gdGhpcy4jbW9kYWxTdmMub3BlbihTa3lTZWxlY3Rpb25Nb2RhbENvbXBvbmVudCwge1xuICAgICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBwcm92aWRlOiBTa3lTZWxlY3Rpb25Nb2RhbENvbnRleHQsXG4gICAgICAgICAgdXNlVmFsdWU6IGNvbnRleHQsXG4gICAgICAgIH0sXG4gICAgICBdLFxuICAgICAgc2l6ZTogJ2xhcmdlJyxcbiAgICAgIHdyYXBwZXJDbGFzczogYXJncy53cmFwcGVyQ2xhc3MsXG4gICAgfSk7XG5cbiAgICBjb25zdCBpbnN0YW5jZSA9IG5ldyBTa3lTZWxlY3Rpb25Nb2RhbEluc3RhbmNlKFxuICAgICAgbW9kYWxJbnN0YW5jZS5jb21wb25lbnRJbnN0YW5jZS5pZFxuICAgICk7XG5cbiAgICBpbnN0YW5jZS5pdGVtQWRkZWQuc3Vic2NyaWJlKChpdGVtKSA9PiB7XG4gICAgICAobW9kYWxJbnN0YW5jZS5jb21wb25lbnRJbnN0YW5jZSBhcyBTa3lTZWxlY3Rpb25Nb2RhbENvbXBvbmVudCkuYWRkSXRlbShcbiAgICAgICAgaXRlbVxuICAgICAgKTtcbiAgICB9KTtcblxuICAgIG1vZGFsSW5zdGFuY2UuY2xvc2VkLnN1YnNjcmliZSgobW9kYWxDbG9zZUFyZ3MpID0+IHtcbiAgICAgIGxldCBjbG9zZUFyZ3M6IFNreVNlbGVjdGlvbk1vZGFsQ2xvc2VBcmdzO1xuXG4gICAgICBzd2l0Y2ggKG1vZGFsQ2xvc2VBcmdzLnJlYXNvbikge1xuICAgICAgICBjYXNlICdzYXZlJzpcbiAgICAgICAgICBjbG9zZUFyZ3MgPSB7XG4gICAgICAgICAgICByZWFzb246ICdzYXZlJyxcbiAgICAgICAgICAgIHNlbGVjdGVkSXRlbXM6IG1vZGFsQ2xvc2VBcmdzLmRhdGEubWFwKFxuICAgICAgICAgICAgICAoaXRlbTogeyBpdGVtRGF0YTogdW5rbm93biB9KSA9PiBpdGVtLml0ZW1EYXRhXG4gICAgICAgICAgICApLFxuICAgICAgICAgIH07XG4gICAgICAgICAgYnJlYWs7XG4gICAgICAgIGNhc2UgJ2NhbmNlbCc6XG4gICAgICAgICAgY2xvc2VBcmdzID0geyByZWFzb246ICdjYW5jZWwnIH07XG4gICAgICAgICAgYnJlYWs7XG4gICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgY2xvc2VBcmdzID0geyByZWFzb246ICdjbG9zZScgfTtcbiAgICAgIH1cblxuICAgICAgaW5zdGFuY2UuY2xvc2UoY2xvc2VBcmdzKTtcbiAgICB9KTtcblxuICAgIGNvbnN0IHNlbGVjdGlvbk1vZGFsID1cbiAgICAgIG1vZGFsSW5zdGFuY2UuY29tcG9uZW50SW5zdGFuY2UgYXMgU2t5U2VsZWN0aW9uTW9kYWxDb21wb25lbnQ7XG5cbiAgICBzZWxlY3Rpb25Nb2RhbC5hZGRDbGljay5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgaWYgKGFyZ3MuYWRkQ2xpY2spIHtcbiAgICAgICAgY29uc3QgYWRkQXJnczogU2t5U2VsZWN0aW9uTW9kYWxBZGRDbGlja0V2ZW50QXJncyA9IHtcbiAgICAgICAgICBpdGVtQWRkZWQoYXJncykge1xuICAgICAgICAgICAgc2VsZWN0aW9uTW9kYWwuYWRkSXRlbShhcmdzLml0ZW0pO1xuICAgICAgICAgIH0sXG4gICAgICAgIH07XG5cbiAgICAgICAgYXJncy5hZGRDbGljayhhZGRBcmdzKTtcbiAgICAgIH1cbiAgICB9KTtcblxuICAgIHJldHVybiBpbnN0YW5jZTtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLW1vZGFsLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvbG9va3VwL3NyYy9saWIvbW9kdWxlcy9zZWxlY3Rpb24tbW9kYWwvc2VsZWN0aW9uLW1vZGFsLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBSTNDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUkzQyxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUd6RSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUMzRSxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7O0FBRzdFOztHQUVHO0FBSUgsTUFBTSxPQUFPLHdCQUF3QjtJQUduQyxZQUFZLFFBQXlCO1FBRnJDLHFEQUEyQjtRQUd6Qix1QkFBQSxJQUFJLHNDQUFhLFFBQVEsTUFBQSxDQUFDO0lBQzVCLENBQUM7SUFFRDs7O09BR0c7SUFDSSxJQUFJLENBQUMsSUFBK0I7UUFDekMsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUVoQyxNQUFNLE9BQU8sR0FBRyxJQUFJLHdCQUF3QixDQUMxQyxJQUFJLENBQUMsa0JBQWtCLEVBQ3ZCLElBQUksQ0FBQyxVQUFVLEVBQ2YsSUFBSSxDQUFDLGFBQWEsSUFBSSxFQUFFLEVBQ3hCLFlBQVksSUFBSSxFQUFFLEVBQ2xCLENBQUMsVUFBVSxFQUFFLEVBQUU7WUFDYixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7Z0JBQ3RCLE1BQU0sRUFBRSxVQUFVLENBQUMsTUFBTTtnQkFDekIsVUFBVSxFQUFFLFVBQVUsQ0FBQyxVQUFVO2dCQUNqQyxnQkFBZ0IsRUFBRSxVQUFVLENBQUMsZ0JBQWdCO2FBQzlDLENBQWlELENBQUM7UUFDckQsQ0FBQyxFQUNELElBQUksQ0FBQyxVQUFVLEVBQ2YsSUFBSSxDQUFDLGFBQWEsSUFBSSxLQUFLLEVBQzNCO1lBQ0UsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZO1lBQy9CLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSztTQUNsQixDQUNGLENBQUM7UUFFRixNQUFNLGFBQWEsR0FBRyx1QkFBQSxJQUFJLDBDQUFVLENBQUMsSUFBSSxDQUFDLDBCQUEwQixFQUFFO1lBQ3BFLFNBQVMsRUFBRTtnQkFDVDtvQkFDRSxPQUFPLEVBQUUsd0JBQXdCO29CQUNqQyxRQUFRLEVBQUUsT0FBTztpQkFDbEI7YUFDRjtZQUNELElBQUksRUFBRSxPQUFPO1lBQ2IsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZO1NBQ2hDLENBQUMsQ0FBQztRQUVILE1BQU0sUUFBUSxHQUFHLElBQUkseUJBQXlCLENBQzVDLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxFQUFFLENBQ25DLENBQUM7UUFFRixRQUFRLENBQUMsU0FBUzthQUNmLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDO2FBQ3JDLFNBQVMsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFO1lBQ2pCLGFBQWEsQ0FBQyxpQkFBZ0QsQ0FBQyxPQUFPLENBQ3JFLElBQUksQ0FDTCxDQUFDO1FBQ0osQ0FBQyxDQUFDLENBQUM7UUFFTCxhQUFhLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDLGNBQWMsRUFBRSxFQUFFO1lBQ2hELElBQUksU0FBcUMsQ0FBQztZQUUxQyxRQUFRLGNBQWMsQ0FBQyxNQUFNLEVBQUU7Z0JBQzdCLEtBQUssTUFBTTtvQkFDVCxTQUFTLEdBQUc7d0JBQ1YsTUFBTSxFQUFFLE1BQU07d0JBQ2QsYUFBYSxFQUFFLGNBQWMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUNwQyxDQUFDLElBQTJCLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQy9DO3FCQUNGLENBQUM7b0JBQ0YsTUFBTTtnQkFDUixLQUFLLFFBQVE7b0JBQ1gsU0FBUyxHQUFHLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxDQUFDO29CQUNqQyxNQUFNO2dCQUNSO29CQUNFLFNBQVMsR0FBRyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsQ0FBQzthQUNuQztZQUVELFFBQVEsQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDNUIsQ0FBQyxDQUFDLENBQUM7UUFFSCxNQUFNLGNBQWMsR0FDbEIsYUFBYSxDQUFDLGlCQUErQyxDQUFDO1FBRWhFLGNBQWMsQ0FBQyxRQUFRO2FBQ3BCLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDO2FBQ3JDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7Z0JBQ2pCLE1BQU0sT0FBTyxHQUF1QztvQkFDbEQsU0FBUyxDQUFDLElBQUk7d0JBQ1osY0FBYyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7b0JBQ3BDLENBQUM7aUJBQ0YsQ0FBQztnQkFFRixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxDQUFDO2FBQ3hCO1FBQ0gsQ0FBQyxDQUFDLENBQUM7UUFFTCxPQUFPLFFBQVEsQ0FBQztJQUNsQixDQUFDOzs7cUhBakdVLHdCQUF3Qjt5SEFBeEIsd0JBQXdCLGNBRnZCLEtBQUs7MkZBRU4sd0JBQXdCO2tCQUhwQyxVQUFVO21CQUFDO29CQUNWLFVBQVUsRUFBRSxLQUFLO2lCQUNsQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNreU1vZGFsU2VydmljZSB9IGZyb20gJ0Bza3l1eC9tb2RhbHMnO1xuXG5pbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmltcG9ydCB7IFNreUF1dG9jb21wbGV0ZVNlYXJjaEFzeW5jUmVzdWx0IH0gZnJvbSAnLi4vYXV0b2NvbXBsZXRlL3R5cGVzL2F1dG9jb21wbGV0ZS1zZWFyY2gtYXN5bmMtcmVzdWx0JztcblxuaW1wb3J0IHsgU2t5U2VsZWN0aW9uTW9kYWxDb21wb25lbnQgfSBmcm9tICcuL3NlbGVjdGlvbi1tb2RhbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2t5U2VsZWN0aW9uTW9kYWxBZGRDbGlja0V2ZW50QXJncyB9IGZyb20gJy4vdHlwZXMvc2VsZWN0aW9uLW1vZGFsLWFkZC1jbGljay1ldmVudC1hcmdzJztcbmltcG9ydCB7IFNreVNlbGVjdGlvbk1vZGFsQ2xvc2VBcmdzIH0gZnJvbSAnLi90eXBlcy9zZWxlY3Rpb24tbW9kYWwtY2xvc2UtYXJncyc7XG5pbXBvcnQgeyBTa3lTZWxlY3Rpb25Nb2RhbENvbnRleHQgfSBmcm9tICcuL3R5cGVzL3NlbGVjdGlvbi1tb2RhbC1jb250ZXh0JztcbmltcG9ydCB7IFNreVNlbGVjdGlvbk1vZGFsSW5zdGFuY2UgfSBmcm9tICcuL3R5cGVzL3NlbGVjdGlvbi1tb2RhbC1pbnN0YW5jZSc7XG5pbXBvcnQgeyBTa3lTZWxlY3Rpb25Nb2RhbE9wZW5BcmdzIH0gZnJvbSAnLi90eXBlcy9zZWxlY3Rpb24tbW9kYWwtb3Blbi1hcmdzJztcblxuLyoqXG4gKiBEaXNwbGF5cyBhIG1vZGFsIGZvciBzZWxlY3Rpbmcgb25lIG9yIG1vcmUgdmFsdWVzLlxuICovXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46ICdhbnknLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lTZWxlY3Rpb25Nb2RhbFNlcnZpY2Uge1xuICAjbW9kYWxTdmM6IFNreU1vZGFsU2VydmljZTtcblxuICBjb25zdHJ1Y3Rvcihtb2RhbFN2YzogU2t5TW9kYWxTZXJ2aWNlKSB7XG4gICAgdGhpcy4jbW9kYWxTdmMgPSBtb2RhbFN2YztcbiAgfVxuXG4gIC8qKlxuICAgKiBPcGVucyB0aGUgc2VsZWN0aW9uIG1vZGFsLlxuICAgKiBAcGFyYW0gYXJncyBQYXJhbWV0ZXJzIGZvciB0aGUgc2VsZWN0aW9uIG1vZGFsLlxuICAgKi9cbiAgcHVibGljIG9wZW4oYXJnczogU2t5U2VsZWN0aW9uTW9kYWxPcGVuQXJncyk6IFNreVNlbGVjdGlvbk1vZGFsSW5zdGFuY2Uge1xuICAgIGNvbnN0IGluaXRpYWxWYWx1ZSA9IGFyZ3MudmFsdWU7XG5cbiAgICBjb25zdCBjb250ZXh0ID0gbmV3IFNreVNlbGVjdGlvbk1vZGFsQ29udGV4dChcbiAgICAgIGFyZ3MuZGVzY3JpcHRvclByb3BlcnR5LFxuICAgICAgYXJncy5pZFByb3BlcnR5LFxuICAgICAgYXJncy5pbml0aWFsU2VhcmNoIHx8ICcnLFxuICAgICAgaW5pdGlhbFZhbHVlIHx8IFtdLFxuICAgICAgKHNlYXJjaEFyZ3MpID0+IHtcbiAgICAgICAgcmV0dXJuIGFyZ3Muc2VhcmNoQXN5bmMoe1xuICAgICAgICAgIG9mZnNldDogc2VhcmNoQXJncy5vZmZzZXQsXG4gICAgICAgICAgc2VhcmNoVGV4dDogc2VhcmNoQXJncy5zZWFyY2hUZXh0LFxuICAgICAgICAgIGNvbnRpbnVhdGlvbkRhdGE6IHNlYXJjaEFyZ3MuY29udGludWF0aW9uRGF0YSxcbiAgICAgICAgfSkgYXMgT2JzZXJ2YWJsZTxTa3lBdXRvY29tcGxldGVTZWFyY2hBc3luY1Jlc3VsdD47XG4gICAgICB9LFxuICAgICAgYXJncy5zZWxlY3RNb2RlLFxuICAgICAgYXJncy5zaG93QWRkQnV0dG9uIHx8IGZhbHNlLFxuICAgICAge1xuICAgICAgICBpdGVtVGVtcGxhdGU6IGFyZ3MuaXRlbVRlbXBsYXRlLFxuICAgICAgICB0aXRsZTogYXJncy50aXRsZSxcbiAgICAgIH1cbiAgICApO1xuXG4gICAgY29uc3QgbW9kYWxJbnN0YW5jZSA9IHRoaXMuI21vZGFsU3ZjLm9wZW4oU2t5U2VsZWN0aW9uTW9kYWxDb21wb25lbnQsIHtcbiAgICAgIHByb3ZpZGVyczogW1xuICAgICAgICB7XG4gICAgICAgICAgcHJvdmlkZTogU2t5U2VsZWN0aW9uTW9kYWxDb250ZXh0LFxuICAgICAgICAgIHVzZVZhbHVlOiBjb250ZXh0LFxuICAgICAgICB9LFxuICAgICAgXSxcbiAgICAgIHNpemU6ICdsYXJnZScsXG4gICAgICB3cmFwcGVyQ2xhc3M6IGFyZ3Mud3JhcHBlckNsYXNzLFxuICAgIH0pO1xuXG4gICAgY29uc3QgaW5zdGFuY2UgPSBuZXcgU2t5U2VsZWN0aW9uTW9kYWxJbnN0YW5jZShcbiAgICAgIG1vZGFsSW5zdGFuY2UuY29tcG9uZW50SW5zdGFuY2UuaWRcbiAgICApO1xuXG4gICAgaW5zdGFuY2UuaXRlbUFkZGVkXG4gICAgICAucGlwZSh0YWtlVW50aWwobW9kYWxJbnN0YW5jZS5jbG9zZWQpKVxuICAgICAgLnN1YnNjcmliZSgoaXRlbSkgPT4ge1xuICAgICAgICAobW9kYWxJbnN0YW5jZS5jb21wb25lbnRJbnN0YW5jZSBhcyBTa3lTZWxlY3Rpb25Nb2RhbENvbXBvbmVudCkuYWRkSXRlbShcbiAgICAgICAgICBpdGVtXG4gICAgICAgICk7XG4gICAgICB9KTtcblxuICAgIG1vZGFsSW5zdGFuY2UuY2xvc2VkLnN1YnNjcmliZSgobW9kYWxDbG9zZUFyZ3MpID0+IHtcbiAgICAgIGxldCBjbG9zZUFyZ3M6IFNreVNlbGVjdGlvbk1vZGFsQ2xvc2VBcmdzO1xuXG4gICAgICBzd2l0Y2ggKG1vZGFsQ2xvc2VBcmdzLnJlYXNvbikge1xuICAgICAgICBjYXNlICdzYXZlJzpcbiAgICAgICAgICBjbG9zZUFyZ3MgPSB7XG4gICAgICAgICAgICByZWFzb246ICdzYXZlJyxcbiAgICAgICAgICAgIHNlbGVjdGVkSXRlbXM6IG1vZGFsQ2xvc2VBcmdzLmRhdGEubWFwKFxuICAgICAgICAgICAgICAoaXRlbTogeyBpdGVtRGF0YTogdW5rbm93biB9KSA9PiBpdGVtLml0ZW1EYXRhXG4gICAgICAgICAgICApLFxuICAgICAgICAgIH07XG4gICAgICAgICAgYnJlYWs7XG4gICAgICAgIGNhc2UgJ2NhbmNlbCc6XG4gICAgICAgICAgY2xvc2VBcmdzID0geyByZWFzb246ICdjYW5jZWwnIH07XG4gICAgICAgICAgYnJlYWs7XG4gICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgY2xvc2VBcmdzID0geyByZWFzb246ICdjbG9zZScgfTtcbiAgICAgIH1cblxuICAgICAgaW5zdGFuY2UuY2xvc2UoY2xvc2VBcmdzKTtcbiAgICB9KTtcblxuICAgIGNvbnN0IHNlbGVjdGlvbk1vZGFsID1cbiAgICAgIG1vZGFsSW5zdGFuY2UuY29tcG9uZW50SW5zdGFuY2UgYXMgU2t5U2VsZWN0aW9uTW9kYWxDb21wb25lbnQ7XG5cbiAgICBzZWxlY3Rpb25Nb2RhbC5hZGRDbGlja1xuICAgICAgLnBpcGUodGFrZVVudGlsKG1vZGFsSW5zdGFuY2UuY2xvc2VkKSlcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICBpZiAoYXJncy5hZGRDbGljaykge1xuICAgICAgICAgIGNvbnN0IGFkZEFyZ3M6IFNreVNlbGVjdGlvbk1vZGFsQWRkQ2xpY2tFdmVudEFyZ3MgPSB7XG4gICAgICAgICAgICBpdGVtQWRkZWQoYXJncykge1xuICAgICAgICAgICAgICBzZWxlY3Rpb25Nb2RhbC5hZGRJdGVtKGFyZ3MuaXRlbSk7XG4gICAgICAgICAgICB9LFxuICAgICAgICAgIH07XG5cbiAgICAgICAgICBhcmdzLmFkZENsaWNrKGFkZEFyZ3MpO1xuICAgICAgICB9XG4gICAgICB9KTtcblxuICAgIHJldHVybiBpbnN0YW5jZTtcbiAgfVxufVxuIl19

package/fesm2015/skyux-lookup.mjs

@@ -2283,7 +2283,7 @@ _SkySelectionModalComponent_changeDetector = new WeakMap(), _SkySelectionModalCo
     }
 };
 SkySelectionModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkySelectionModalContext }, { token: i0.ChangeDetectorRef }, { token: i1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
-SkySelectionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySelectionModalComponent, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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-multiselect-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]\n            | skySelectionModalItemSelected : 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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkySelectionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySelectionModalComponent, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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-multiselect-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]\n            | skySelectionModalItemSelected : 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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-selection-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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-multiselect-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]\n            | skySelectionModalItemSelected : 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"] }]
@@ -2604,7 +2604,7 @@ class SkyLookupShowMoreModalComponent {
 }
 _SkyLookupShowMoreModalComponent_changeDetector = new WeakMap(), _SkyLookupShowMoreModalComponent_itemIndex = new WeakMap(), _SkyLookupShowMoreModalComponent_ngUnsubscribe = new WeakMap();
 SkyLookupShowMoreModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyLookupShowMoreNativePickerContext }, { token: i0.ChangeDetectorRef }, { token: i1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
-SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    <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-multiselect-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)=\"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              repeaterItemTemplate ?? 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\n      [enabled]=\"itemsHaveMore\"\n      [loading]=\"itemsLoading\"\n      (scrollEnd)=\"addItems()\"\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      (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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    <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-multiselect-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)=\"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              repeaterItemTemplate ?? 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\n      [enabled]=\"itemsHaveMore\"\n      [loading]=\"itemsLoading\"\n      (scrollEnd)=\"addItems()\"\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      (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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'skyux-lookup-show-more-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n  class=\"sky-lookup-show-more-modal\"\n  [attr.id]=\"id\"\n  [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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    <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-multiselect-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)=\"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              repeaterItemTemplate ?? 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\n      [enabled]=\"itemsHaveMore\"\n      [loading]=\"itemsLoading\"\n      (scrollEnd)=\"addItems()\"\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      (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"] }]
@@ -2822,7 +2822,9 @@ class SkySelectionModalService {
             wrapperClass: args.wrapperClass,
         });
         const instance = new SkySelectionModalInstance(modalInstance.componentInstance.id);
-        instance.itemAdded.subscribe((item) => {
+        instance.itemAdded
+            .pipe(takeUntil(modalInstance.closed))
+            .subscribe((item) => {
             modalInstance.componentInstance.addItem(item);
         });
         modalInstance.closed.subscribe((modalCloseArgs) => {
@@ -2843,7 +2845,9 @@ class SkySelectionModalService {
             instance.close(closeArgs);
         });
         const selectionModal = modalInstance.componentInstance;
-        selectionModal.addClick.subscribe(() => {
+        selectionModal.addClick
+            .pipe(takeUntil(modalInstance.closed))
+            .subscribe(() => {
             if (args.addClick) {
                 const addArgs = {
                     itemAdded(args) {