@skyux/lookup 9.15.0 → 9.16.0

package/fesm2022/skyux-lookup.mjs

@@ -5,14 +5,14 @@ import { NgModule, forwardRef, Directive, Input, Pipe, Injectable, EventEmitter,
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgModel, UntypedFormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@skyux/core';
-import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyIdModule, SkyNumericModule, SkyContentInfoProvider, SkyMediaBreakpoints, SkyIdService, SkyViewkeeperModule, SkyLogService, SkyAppWindowRef } from '@skyux/core';
+import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyIdModule, SkyNumericModule, SkyContentInfoProvider, SkyMediaBreakpoints, SkyIdService, SkyLiveAnnouncerService, SkyViewkeeperModule, SkyLogService, SkyAppWindowRef } from '@skyux/core';
 import * as i5 from '@skyux/indicators';
 import { SkyTextHighlightModule, SkyIconModule, SkyWaitModule, SkyTokensMessageType, SkyTokensModule } from '@skyux/indicators';
 import * as i2$1 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 import * as i8 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import { Subject, fromEvent, of, BehaviorSubject, from } from 'rxjs';
+import { Subject, fromEvent, of, BehaviorSubject, from, take as take$1 } from 'rxjs';
 import { takeUntil, debounceTime, switchMap, delay, take, map, distinctUntilChanged } from 'rxjs/operators';
 import * as i2 from '@skyux/forms';
 import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
@@ -44,6 +44,10 @@ const RESOURCES = {
             message: 'Show all search results',
         },
         skyux_lookup_show_more_add: { message: 'New' },
+        skyux_lookup_show_more_add_button_aria_label: { message: 'Add {0}' },
+        skyux_lookup_show_more_displayed_items_updated: {
+            message: 'Showing {1} items, with {0} selected.',
+        },
         skyux_lookup_show_more_select_all_button_aria_label: {
             message: 'Select all {0}',
         },
@@ -2205,6 +2209,8 @@ class SkySelectionModalComponent {
     #offset;
     #changeDetector;
     #idSvc;
+    #liveAnnouncerSvc;
+    #resourcesSvc;
     constructor() {
         /**
          * @internal
@@ -2227,6 +2233,8 @@ class SkySelectionModalComponent {
         this.modalInstance = inject(SkyModalInstance);
         this.#changeDetector = inject(ChangeDetectorRef);
         this.#idSvc = inject(SkyIdService);
+        this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
+        this.#resourcesSvc = inject(SkyLibResourcesService);
         this.id = this.#idSvc.generateId();
     }
     ngOnInit() {
@@ -2326,12 +2334,17 @@ class SkySelectionModalComponent {
         this.modalInstance.save(selectedItems);
     }
     updateDisplayedItems() {
+        const selectedItems = this.items.filter((item) => this.selectedIdMap.has(item[this.context.idProperty]));
         if (this.onlyShowSelected) {
-            this.displayedItems = this.items.filter((item) => this.selectedIdMap.has(item[this.context.idProperty]));
+            this.displayedItems = selectedItems;
         }
         else {
             this.displayedItems = this.items;
         }
+        setTimeout(() => {
+            this.#announceSelectionState(selectedItems.length, this.displayedItems.length);
+            this.#changeDetector.markForCheck();
+        });
     }
     #loadSearchResults() {
         this.#cancelCurrentSearch();
@@ -2374,8 +2387,16 @@ class SkySelectionModalComponent {
             this.isSearching = false;
         }
     }
+    #announceSelectionState(selectedItemCount, displayedItemCount) {
+        this.#resourcesSvc
+            .getString('skyux_lookup_show_more_displayed_items_updated', selectedItemCount.toString(), displayedItemCount.toString())
+            .pipe(take(1))
+            .subscribe((resourceString) => {
+            this.#liveAnnouncerSvc.announce(resourceString);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySelectionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkySelectionModalComponent, isStandalone: true, 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\n        [listDescriptor]=\"context.selectionDescriptor\"\n        class=\"sky-lookup-show-more-modal-toolbar\"\n      >\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 icon=\"add\" />\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_select_all_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_clear_all_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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              [label]=\"\n                'skyux_lookup_show_more_show_selected_option_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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      [attr.aria-label]=\"\n        'skyux_lookup_show_more_select_context'\n          | skyLibResources : context.selectionDescriptor\n      \"\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  {{\n    'skyux_lookup_show_more_modal_title'\n      | skyLibResources : context.selectionDescriptor\n  }}\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4$1.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkySelectionModalComponent, isStandalone: true, 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\n        [listDescriptor]=\"context.selectionDescriptor\"\n        class=\"sky-lookup-show-more-modal-toolbar\"\n      >\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_add_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\n              type=\"button\"\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n              (click)=\"addButtonClicked()\"\n            >\n              <sky-icon icon=\"add\" />\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_select_all_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_clear_all_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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              [label]=\"\n                'skyux_lookup_show_more_show_selected_option_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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      [attr.aria-label]=\"\n        'skyux_lookup_show_more_select_context'\n          | skyLibResources : context.selectionDescriptor\n      \"\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  {{\n    'skyux_lookup_show_more_modal_title'\n      | skyLibResources : context.selectionDescriptor\n  }}\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4$1.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
             type: Component,
@@ -2393,7 +2414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         SkyToolbarModule,
                         SkyWaitModule,
                         SkyViewkeeperModule,
-                    ], 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\n        [listDescriptor]=\"context.selectionDescriptor\"\n        class=\"sky-lookup-show-more-modal-toolbar\"\n      >\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 icon=\"add\" />\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_select_all_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_clear_all_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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              [label]=\"\n                'skyux_lookup_show_more_show_selected_option_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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      [attr.aria-label]=\"\n        'skyux_lookup_show_more_select_context'\n          | skyLibResources : context.selectionDescriptor\n      \"\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  {{\n    'skyux_lookup_show_more_modal_title'\n      | skyLibResources : context.selectionDescriptor\n  }}\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"] }]
+                    ], 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\n        [listDescriptor]=\"context.selectionDescriptor\"\n        class=\"sky-lookup-show-more-modal-toolbar\"\n      >\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_add_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\n              type=\"button\"\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n              (click)=\"addButtonClicked()\"\n            >\n              <sky-icon icon=\"add\" />\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_select_all_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_clear_all_button_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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              [label]=\"\n                'skyux_lookup_show_more_show_selected_option_aria_label'\n                  | skyLibResources : context.selectionDescriptor\n              \"\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      [attr.aria-label]=\"\n        'skyux_lookup_show_more_select_context'\n          | skyLibResources : context.selectionDescriptor\n      \"\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  {{\n    'skyux_lookup_show_more_modal_title'\n      | skyLibResources : context.selectionDescriptor\n  }}\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"] }]
         }], ctorParameters: function () { return []; } });
 
 /**
@@ -2679,6 +2700,8 @@ class SkyLookupShowMoreModalComponent {
     #ngUnsubscribe;
     #changeDetector;
     #idSvc;
+    #liveAnnouncerSvc;
+    #resourcesSvc;
     constructor() {
         /**
          * @internal
@@ -2715,6 +2738,8 @@ class SkyLookupShowMoreModalComponent {
         this.context = inject(SkyLookupShowMoreNativePickerContext);
         this.#changeDetector = inject(ChangeDetectorRef);
         this.#idSvc = inject(SkyIdService);
+        this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
+        this.#resourcesSvc = inject(SkyLibResourcesService);
         this.id = this.#idSvc.generateId();
     }
     ngAfterViewInit() {
@@ -2769,6 +2794,7 @@ class SkyLookupShowMoreModalComponent {
                 this.itemsHaveMore = true;
             }
             this.itemsLoading = false;
+            this.#announceSelectionState(this.selectedItems.length, this.displayedItems.length);
             this.#changeDetector.markForCheck();
         });
     }
@@ -2903,6 +2929,7 @@ class SkyLookupShowMoreModalComponent {
                 this.itemsHaveMore = true;
             }
             this.itemsLoading = false;
+            this.#announceSelectionState(selectedItems.length, this.displayedItems.length);
             this.#changeDetector.markForCheck();
         });
     }
@@ -2920,8 +2947,16 @@ class SkyLookupShowMoreModalComponent {
         this.addItems();
         this.#changeDetector.markForCheck();
     }
+    #announceSelectionState(selectedItemCount, displayedItemCount) {
+        this.#resourcesSvc
+            .getString('skyux_lookup_show_more_displayed_items_updated', selectedItemCount.toString(), displayedItemCount.toString())
+            .pipe(take$1(1))
+            .subscribe((resourcesString) => {
+            this.#liveAnnouncerSvc.announce(resourcesString);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyLookupShowMoreModalComponent, isStandalone: true, selector: "sky-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\n        [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n        class=\"sky-lookup-show-more-modal-toolbar\"\n      >\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 icon=\"add\" />\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_select_all_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_clear_all_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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              [label]=\"\n                'skyux_lookup_show_more_show_selected_option_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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      [attr.aria-label]=\"\n        'skyux_lookup_show_more_select_context'\n          | skyLibResources : context.userConfig.selectionDescriptor\n      \"\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  {{\n    'skyux_lookup_show_more_modal_title'\n      | skyLibResources : context.userConfig.selectionDescriptor\n  }}\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4$1.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyLookupShowMoreModalComponent, isStandalone: true, selector: "sky-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\n        [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n        class=\"sky-lookup-show-more-modal-toolbar\"\n      >\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_add_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\n              type=\"button\"\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n              (click)=\"addButtonClicked()\"\n            >\n              <sky-icon icon=\"add\" />\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_select_all_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_clear_all_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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              [label]=\"\n                'skyux_lookup_show_more_show_selected_option_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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      [attr.aria-label]=\"\n        'skyux_lookup_show_more_select_context'\n          | skyLibResources : context.userConfig.selectionDescriptor\n      \"\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  {{\n    'skyux_lookup_show_more_modal_title'\n      | skyLibResources : context.userConfig.selectionDescriptor\n  }}\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4$1.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
             type: Component,
@@ -2937,7 +2972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         SkyThemeModule,
                         SkyToolbarModule,
                         SkyViewkeeperModule,
-                    ], 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\n        [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n        class=\"sky-lookup-show-more-modal-toolbar\"\n      >\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 icon=\"add\" />\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_select_all_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_clear_all_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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              [label]=\"\n                'skyux_lookup_show_more_show_selected_option_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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      [attr.aria-label]=\"\n        'skyux_lookup_show_more_select_context'\n          | skyLibResources : context.userConfig.selectionDescriptor\n      \"\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  {{\n    'skyux_lookup_show_more_modal_title'\n      | skyLibResources : context.userConfig.selectionDescriptor\n  }}\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"] }]
+                    ], 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\n        [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n        class=\"sky-lookup-show-more-modal-toolbar\"\n      >\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_add_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\n              type=\"button\"\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n              (click)=\"addButtonClicked()\"\n            >\n              <sky-icon icon=\"add\" />\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_select_all_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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              [attr.aria-label]=\"\n                'skyux_lookup_show_more_clear_all_button_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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              [label]=\"\n                'skyux_lookup_show_more_show_selected_option_aria_label'\n                  | skyLibResources : context.userConfig.selectionDescriptor\n              \"\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      [attr.aria-label]=\"\n        'skyux_lookup_show_more_select_context'\n          | skyLibResources : context.userConfig.selectionDescriptor\n      \"\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  {{\n    'skyux_lookup_show_more_modal_title'\n      | skyLibResources : context.userConfig.selectionDescriptor\n  }}\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"] }]
         }], ctorParameters: function () { return []; } });
 
 class SkyLookupComponent extends SkyLookupAutocompleteAdapter {