@skyux/lookup 14.0.0-alpha.9 → 14.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/fesm2022/skyux-lookup-testing.mjs +5 -4
  2. package/fesm2022/skyux-lookup-testing.mjs.map +1 -1
  3. package/fesm2022/skyux-lookup.mjs +38 -100
  4. package/fesm2022/skyux-lookup.mjs.map +1 -1
  5. package/package.json +11 -12
  6. package/types/skyux-lookup-testing.d.ts +2 -3
  7. package/types/skyux-lookup.d.ts +4 -10
package/fesm2022/skyux-lookup.mjs CHANGED
@@ -1,11 +1,11 @@
1
1
  import * as i1$1 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { NgModule, forwardRef, inject, ElementRef, Renderer2, Input, Directive, Pipe, Injectable, input, booleanAttribute, EventEmitter, EnvironmentInjector, TemplateRef, ViewChild, ContentChild, Output, Optional, Inject, ChangeDetectionStrategy, Component, InjectionToken, output, computed, ChangeDetectorRef, Injector, signal, effect, ViewEncapsulation, DestroyRef, Self } from '@angular/core';
4
+ import { NgModule, forwardRef, inject, ElementRef, Renderer2, Input, Directive, Pipe, Injectable, input, booleanAttribute, EventEmitter, EnvironmentInjector, TemplateRef, ViewChild, ContentChild, Output, Optional, Inject, ChangeDetectionStrategy, Component, InjectionToken, output, computed, ChangeDetectorRef, Injector, signal, effect, ViewEncapsulation, DestroyRef, afterNextRender, Self } from '@angular/core';
5
5
  import * as i2$1 from '@angular/forms';
6
6
  import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, UntypedFormControl, NgControl, NgModel, ReactiveFormsModule } from '@angular/forms';
7
7
  import * as i1 from '@skyux/core';
8
- import { SkyLiveAnnouncerService, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyIdModule, SkyNumericModule, SkyContentInfoProvider, SkyMediaQueryService, SkyIdService, SkyViewkeeperModule, SkyLogService, SkyAppWindowRef } from '@skyux/core';
8
+ import { SkyLiveAnnouncerService, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyIdModule, SkyNumericModule, SkyContentInfoProvider, SkyMediaQueryService, _SkyTransitionEndHandlerDirective, SkyIdService, SkyViewkeeperModule, SkyLogService, SkyAppWindowRef } from '@skyux/core';
9
9
  import * as i3 from '@skyux/icon';
10
10
  import { SkyIconModule } from '@skyux/icon';
11
11
  import * as i5 from '@skyux/indicators';
@@ -27,7 +27,6 @@ import * as i8$1 from '@skyux/layout';
27
27
  import { SkyToolbarModule } from '@skyux/layout';
28
28
  import * as i4 from '@skyux/lists';
29
29
  import { SkyInfiniteScrollModule, SkyRepeaterModule } from '@skyux/lists';
30
- import { trigger, state, style, transition, animate } from '@angular/animations';
31
30
 
32
31
  /* istanbul ignore file */
33
32
  /**
@@ -1393,11 +1392,11 @@ class SkyAutocompleteComponent {
1393
1392
  }
1394
1393
  }
1395
1394
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i2.SkyInputBoxHostService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
1396
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyAutocompleteComponent, isStandalone: false, selector: "sky-autocomplete", inputs: { ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: false, isRequired: false, transformFunction: null }, descriptorProperty: { classPropertyName: "descriptorProperty", publicName: "descriptorProperty", isSignal: false, isRequired: false, transformFunction: null }, dropdownHintText: { classPropertyName: "dropdownHintText", publicName: "dropdownHintText", isSignal: false, isRequired: false, transformFunction: null }, enableShowMore: { classPropertyName: "enableShowMore", publicName: "enableShowMore", isSignal: false, isRequired: false, transformFunction: null }, messageStream: { classPropertyName: "messageStream", publicName: "messageStream", isSignal: false, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: false, isRequired: false, transformFunction: null }, propertiesToSearch: { classPropertyName: "propertiesToSearch", publicName: "propertiesToSearch", isSignal: false, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, searchResultTemplate: { classPropertyName: "searchResultTemplate", publicName: "searchResultTemplate", isSignal: false, isRequired: false, transformFunction: null }, searchTextMinimumCharacters: { classPropertyName: "searchTextMinimumCharacters", publicName: "searchTextMinimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, searchFilters: { classPropertyName: "searchFilters", publicName: "searchFilters", isSignal: false, isRequired: false, transformFunction: null }, searchResultsLimit: { classPropertyName: "searchResultsLimit", publicName: "searchResultsLimit", isSignal: false, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: null }, noResultsFoundText: { classPropertyName: "noResultsFoundText", publicName: "noResultsFoundText", isSignal: false, isRequired: false, transformFunction: null }, searchAsyncDisabled: { classPropertyName: "searchAsyncDisabled", publicName: "searchAsyncDisabled", isSignal: false, isRequired: false, transformFunction: null }, allowAnyValue: { classPropertyName: "allowAnyValue", publicName: "allowAnyValue", isSignal: true, isRequired: false, transformFunction: null }, highlightSearchText: { classPropertyName: "highlightSearchText", publicName: "highlightSearchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync", openChange: "openChange" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"\n isOpen &&\n (showActionsArea || dropdownHintText || (isResultsVisible | async))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-controls]=\"\n isOpen &&\n (showActionsArea || dropdownHintText || (isResultsVisible | async))\n ? resultsListId\n : null\n \"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content />\n</div>\n\n<ng-template #resultsTemplateRef>\n <!-- We do not want the blur to fire here so that the dropdown does not close. This is why we are preventing the mousedown default. -->\n <div\n #resultsRef\n class=\"sky-autocomplete-results-container\"\n [attr.id]=\"resultsListId\"\n [skyThemeClass]=\"{ 'sky-shadow': 'default', 'sky-elevation-4': 'modern' }\"\n (mousedown)=\"$event.preventDefault()\"\n (keydown)=\"handleKeydown($event)\"\n >\n @if (isSearchingAsync && !allowAnyValue()) {\n <div class=\"sky-autocomplete-results-waiting\">\n <sky-wait [isWaiting]=\"true\" />\n </div>\n } @else {\n @if (isResultsVisible | async) {\n <div\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n >\n @for (result of searchResults; track result.data; let i = $index) {\n @if (\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n ) {\n <div\n #searchResultEl\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n [attr.id]=\"result.elementId\"\n [skyHighlight]=\"highlightText\"\n (click)=\"onResultClick(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n />\n </div>\n }\n }\n @if (isSearchingAsync && allowAnyValue()) {\n <div class=\"sky-autocomplete-results-waiting\">\n <sky-wait [isWaiting]=\"true\" />\n </div>\n }\n @if (searchResults.length === 0) {\n <div class=\"sky-font-deemphasized sky-autocomplete-no-results\">\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n }\n </div>\n } @else if (dropdownHintText) {\n <div class=\"sky-autocomplete-dropdown-hint-text sky-font-deemphasized\">\n {{ dropdownHintText }}\n </div>\n }\n @if (showActionsArea) {\n <div class=\"sky-autocomplete-actions\">\n @if (\n enableShowMore &&\n (searchTextMinimumCharacters === 0 ||\n !searchText ||\n searchResults.length > 0)\n ) {\n <button\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"moreButtonClicked()\"\n >\n @if (\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText &&\n searchTextMinimumCharacters !== 0\n ) {\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n }\n @if (\n ((searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) ||\n (searchTextMinimumCharacters === 0 &&\n searchResultsCount !== undefined &&\n searchResultsCount > 0)) &&\n !searchText\n ) {\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount\n | skyNumeric: { truncate: false }))\n }}\n }\n @if (searchText) {\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount\n | skyNumeric: { truncate: false }))\n }}\n }\n </button>\n }\n @if (\n (searchText || searchTextMinimumCharacters === 0) &&\n searchResults.length === 0\n ) {\n <div\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n }\n @if (showAddButton) {\n <button\n #addButtonEl\n class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n tabindex=\"0\"\n type=\"button\"\n [class.focused]=\"isElementFocused(addButtonEl)\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n }\n </div>\n }\n }\n </div>\n</ng-template>\n\n<ng-template #defaultSearchResultTemplate let-item=\"item\">\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container:not(.sky-theme-modern *){--sky-override-autocomplete-actions-add-icon-padding-right: 5px;--sky-override-autocomplete-actions-no-results-line-height: normal;--sky-override-autocomplete-actions-no-results-padding: 7px 13px;--sky-override-autocomplete-actions-top-border: 1px solid #cdcfd2;--sky-override-autocomplete-dropdown-hint-text-line-height: normal;--sky-override-autocomplete-dropdown-hint-text-padding: 7px 13px;--sky-override-autocomplete-no-results-font-size: 15px;--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-background-color: transparent;--sky-override-autocomplete-result-border-radius: 0;--sky-override-autocomplete-result-box-shadow: none;--sky-override-autocomplete-result-focus-background-color: #eeeeef;--sky-override-autocomplete-result-focus-box-shadow: none;--sky-override-autocomplete-result-margin-bottom: 4px;--sky-override-autocomplete-result-padding: 3px 20px;--sky-override-autocomplete-results-container-background-color: #ffffff;--sky-override-autocomplete-results-container-border-radius: 0;--sky-override-autocomplete-results-no-results-padding: 4px;--sky-override-autocomplete-results-padding: 4px}:host-context(sky-input-box) :host{width:100%}.sky-autocomplete-results-container{position:fixed;background-color:var(--sky-override-autocomplete-results-container-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-autocomplete-results-container-border-radius, var(--sky-border-radius-m))}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:var(--sky-override-autocomplete-results-padding, var(--sky-comp-dropdown-menu-space-inset-top) 0 var(--sky-comp-dropdown-menu-space-inset-bottom));overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-results:has(.sky-autocomplete-no-results){padding:var(--sky-override-autocomplete-results-no-results-padding, 0)}.sky-autocomplete-result{background-color:var(--sky-override-autocomplete-result-background-color, var(--sky-color-background-action-tertiary-base));border-radius:var(--sky-override-autocomplete-result-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-autocomplete-result-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base));margin-bottom:var(--sky-override-autocomplete-result-margin-bottom, var(--sky-space-gap-action_group-s));padding:var(--sky-override-autocomplete-result-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-right) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-no-results{padding:var(--sky-override-autocomplete-no-results-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-right) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));font-size:var(--sky-override-autocomplete-no-results-font-size, inherit)}.sky-autocomplete-actions{border-top:var(--sky-override-autocomplete-actions-top-border, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:var(--sky-override-autocomplete-actions-no-results-padding, var(--sky-comp-dropdown-option-space-inset-top) 0 var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));line-height:var(--sky-override-autocomplete-actions-no-results-line-height, var(--sky-font-line_height-body-m))}.sky-autocomplete-dropdown-hint-text{display:inline-block;padding:var(--sky-override-autocomplete-dropdown-hint-text-padding, var(--sky-comp-dropdown-option-space-inset-top) 0 var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));line-height:var(--sky-override-autocomplete-dropdown-hint-text-line-height, var(--sky-font-line_height-body-m))}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:var(--sky-override-autocomplete-actions-add-icon-padding-right, var(--sky-space-gap-icon-s))}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:var(--sky-override-autocomplete-result-focus-background-color, inherit)}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-autocomplete-descendant-focus{border:none;box-shadow:var(--sky-override-autocomplete-result-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1395
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyAutocompleteComponent, isStandalone: false, selector: "sky-autocomplete", inputs: { ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: false, isRequired: false, transformFunction: null }, descriptorProperty: { classPropertyName: "descriptorProperty", publicName: "descriptorProperty", isSignal: false, isRequired: false, transformFunction: null }, dropdownHintText: { classPropertyName: "dropdownHintText", publicName: "dropdownHintText", isSignal: false, isRequired: false, transformFunction: null }, enableShowMore: { classPropertyName: "enableShowMore", publicName: "enableShowMore", isSignal: false, isRequired: false, transformFunction: null }, messageStream: { classPropertyName: "messageStream", publicName: "messageStream", isSignal: false, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: false, isRequired: false, transformFunction: null }, propertiesToSearch: { classPropertyName: "propertiesToSearch", publicName: "propertiesToSearch", isSignal: false, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, searchResultTemplate: { classPropertyName: "searchResultTemplate", publicName: "searchResultTemplate", isSignal: false, isRequired: false, transformFunction: null }, searchTextMinimumCharacters: { classPropertyName: "searchTextMinimumCharacters", publicName: "searchTextMinimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, searchFilters: { classPropertyName: "searchFilters", publicName: "searchFilters", isSignal: false, isRequired: false, transformFunction: null }, searchResultsLimit: { classPropertyName: "searchResultsLimit", publicName: "searchResultsLimit", isSignal: false, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: null }, noResultsFoundText: { classPropertyName: "noResultsFoundText", publicName: "noResultsFoundText", isSignal: false, isRequired: false, transformFunction: null }, searchAsyncDisabled: { classPropertyName: "searchAsyncDisabled", publicName: "searchAsyncDisabled", isSignal: false, isRequired: false, transformFunction: null }, allowAnyValue: { classPropertyName: "allowAnyValue", publicName: "allowAnyValue", isSignal: true, isRequired: false, transformFunction: null }, highlightSearchText: { classPropertyName: "highlightSearchText", publicName: "highlightSearchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync", openChange: "openChange" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"\n isOpen &&\n !!(showActionsArea || dropdownHintText || (isResultsVisible | async))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-controls]=\"\n isOpen &&\n (showActionsArea || dropdownHintText || (isResultsVisible | async))\n ? resultsListId\n : null\n \"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content />\n</div>\n\n<ng-template #resultsTemplateRef>\n <!-- We do not want the blur to fire here so that the dropdown does not close. This is why we are preventing the mousedown default. -->\n <div\n #resultsRef\n class=\"sky-autocomplete-results-container\"\n [attr.id]=\"resultsListId\"\n [skyThemeClass]=\"{ 'sky-shadow': 'default', 'sky-elevation-4': 'modern' }\"\n (mousedown)=\"$event.preventDefault()\"\n (keydown)=\"handleKeydown($event)\"\n >\n @if (isSearchingAsync && !allowAnyValue()) {\n <div class=\"sky-autocomplete-results-waiting\">\n <sky-wait [isWaiting]=\"true\" />\n </div>\n } @else {\n @if (isResultsVisible | async) {\n <div\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n >\n @for (result of searchResults; track result.data; let i = $index) {\n @if (\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n ) {\n <div\n #searchResultEl\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n [attr.id]=\"result.elementId\"\n [skyHighlight]=\"highlightText\"\n (click)=\"onResultClick(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n />\n </div>\n }\n }\n @if (isSearchingAsync && allowAnyValue()) {\n <div class=\"sky-autocomplete-results-waiting\">\n <sky-wait [isWaiting]=\"true\" />\n </div>\n }\n @if (searchResults.length === 0) {\n <div class=\"sky-font-deemphasized sky-autocomplete-no-results\">\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n }\n </div>\n } @else if (dropdownHintText) {\n <div class=\"sky-autocomplete-dropdown-hint-text sky-font-deemphasized\">\n {{ dropdownHintText }}\n </div>\n }\n @if (showActionsArea) {\n <div class=\"sky-autocomplete-actions\">\n @if (\n enableShowMore &&\n (searchTextMinimumCharacters === 0 ||\n !searchText ||\n searchResults.length > 0)\n ) {\n <button\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"moreButtonClicked()\"\n >\n @if (\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText &&\n searchTextMinimumCharacters !== 0\n ) {\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n }\n @if (\n ((searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) ||\n (searchTextMinimumCharacters === 0 &&\n searchResultsCount !== undefined &&\n searchResultsCount > 0)) &&\n !searchText\n ) {\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount\n | skyNumeric: { truncate: false }))\n }}\n }\n @if (searchText) {\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount\n | skyNumeric: { truncate: false }))\n }}\n }\n </button>\n }\n @if (\n (searchText || searchTextMinimumCharacters === 0) &&\n searchResults.length === 0\n ) {\n <div\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n }\n @if (showAddButton) {\n <button\n #addButtonEl\n class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n tabindex=\"0\"\n type=\"button\"\n [class.focused]=\"isElementFocused(addButtonEl)\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n }\n </div>\n }\n }\n </div>\n</ng-template>\n\n<ng-template #defaultSearchResultTemplate let-item=\"item\">\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container:not(.sky-theme-modern *){--sky-override-autocomplete-actions-add-icon-padding-right: 5px;--sky-override-autocomplete-actions-no-results-line-height: normal;--sky-override-autocomplete-actions-no-results-padding: 7px 13px;--sky-override-autocomplete-actions-top-border: 1px solid #cdcfd2;--sky-override-autocomplete-dropdown-hint-text-line-height: normal;--sky-override-autocomplete-dropdown-hint-text-padding: 7px 13px;--sky-override-autocomplete-no-results-font-size: 15px;--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-background-color: transparent;--sky-override-autocomplete-result-border-radius: 0;--sky-override-autocomplete-result-box-shadow: none;--sky-override-autocomplete-result-focus-background-color: #eeeeef;--sky-override-autocomplete-result-focus-box-shadow: none;--sky-override-autocomplete-result-margin-bottom: 4px;--sky-override-autocomplete-result-padding: 3px 20px;--sky-override-autocomplete-results-container-background-color: #ffffff;--sky-override-autocomplete-results-container-border-radius: 0;--sky-override-autocomplete-results-no-results-padding: 4px;--sky-override-autocomplete-results-padding: 4px}:host-context(sky-input-box) :host{width:100%}.sky-autocomplete-results-container{position:fixed;background-color:var(--sky-override-autocomplete-results-container-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-autocomplete-results-container-border-radius, var(--sky-border-radius-m))}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:var(--sky-override-autocomplete-results-padding, var(--sky-comp-dropdown-menu-space-inset-top) 0 var(--sky-comp-dropdown-menu-space-inset-bottom));overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-results:has(.sky-autocomplete-no-results){padding:var(--sky-override-autocomplete-results-no-results-padding, 0)}.sky-autocomplete-result{background-color:var(--sky-override-autocomplete-result-background-color, var(--sky-color-background-action-tertiary-base));border-radius:var(--sky-override-autocomplete-result-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-autocomplete-result-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base));margin-bottom:var(--sky-override-autocomplete-result-margin-bottom, var(--sky-space-gap-action_group-s));padding:var(--sky-override-autocomplete-result-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-right) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-no-results{padding:var(--sky-override-autocomplete-no-results-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-right) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));font-size:var(--sky-override-autocomplete-no-results-font-size, inherit)}.sky-autocomplete-actions{border-top:var(--sky-override-autocomplete-actions-top-border, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:var(--sky-override-autocomplete-actions-no-results-padding, var(--sky-comp-dropdown-option-space-inset-top) 0 var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));line-height:var(--sky-override-autocomplete-actions-no-results-line-height, var(--sky-font-line_height-body-m))}.sky-autocomplete-dropdown-hint-text{display:inline-block;padding:var(--sky-override-autocomplete-dropdown-hint-text-padding, var(--sky-comp-dropdown-option-space-inset-top) 0 var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));line-height:var(--sky-override-autocomplete-dropdown-hint-text-line-height, var(--sky-font-line_height-body-m))}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:var(--sky-override-autocomplete-actions-add-icon-padding-right, var(--sky-space-gap-icon-s))}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:var(--sky-override-autocomplete-result-focus-background-color, inherit)}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-autocomplete-descendant-focus{border:none;box-shadow:var(--sky-override-autocomplete-result-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1397
1396
  }
1398
1397
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
1399
1398
  type: Component,
1400
- args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"\n isOpen &&\n (showActionsArea || dropdownHintText || (isResultsVisible | async))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-controls]=\"\n isOpen &&\n (showActionsArea || dropdownHintText || (isResultsVisible | async))\n ? resultsListId\n : null\n \"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content />\n</div>\n\n<ng-template #resultsTemplateRef>\n <!-- We do not want the blur to fire here so that the dropdown does not close. This is why we are preventing the mousedown default. -->\n <div\n #resultsRef\n class=\"sky-autocomplete-results-container\"\n [attr.id]=\"resultsListId\"\n [skyThemeClass]=\"{ 'sky-shadow': 'default', 'sky-elevation-4': 'modern' }\"\n (mousedown)=\"$event.preventDefault()\"\n (keydown)=\"handleKeydown($event)\"\n >\n @if (isSearchingAsync && !allowAnyValue()) {\n <div class=\"sky-autocomplete-results-waiting\">\n <sky-wait [isWaiting]=\"true\" />\n </div>\n } @else {\n @if (isResultsVisible | async) {\n <div\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n >\n @for (result of searchResults; track result.data; let i = $index) {\n @if (\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n ) {\n <div\n #searchResultEl\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n [attr.id]=\"result.elementId\"\n [skyHighlight]=\"highlightText\"\n (click)=\"onResultClick(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n />\n </div>\n }\n }\n @if (isSearchingAsync && allowAnyValue()) {\n <div class=\"sky-autocomplete-results-waiting\">\n <sky-wait [isWaiting]=\"true\" />\n </div>\n }\n @if (searchResults.length === 0) {\n <div class=\"sky-font-deemphasized sky-autocomplete-no-results\">\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n }\n </div>\n } @else if (dropdownHintText) {\n <div class=\"sky-autocomplete-dropdown-hint-text sky-font-deemphasized\">\n {{ dropdownHintText }}\n </div>\n }\n @if (showActionsArea) {\n <div class=\"sky-autocomplete-actions\">\n @if (\n enableShowMore &&\n (searchTextMinimumCharacters === 0 ||\n !searchText ||\n searchResults.length > 0)\n ) {\n <button\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"moreButtonClicked()\"\n >\n @if (\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText &&\n searchTextMinimumCharacters !== 0\n ) {\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n }\n @if (\n ((searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) ||\n (searchTextMinimumCharacters === 0 &&\n searchResultsCount !== undefined &&\n searchResultsCount > 0)) &&\n !searchText\n ) {\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount\n | skyNumeric: { truncate: false }))\n }}\n }\n @if (searchText) {\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount\n | skyNumeric: { truncate: false }))\n }}\n }\n </button>\n }\n @if (\n (searchText || searchTextMinimumCharacters === 0) &&\n searchResults.length === 0\n ) {\n <div\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n }\n @if (showAddButton) {\n <button\n #addButtonEl\n class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n tabindex=\"0\"\n type=\"button\"\n [class.focused]=\"isElementFocused(addButtonEl)\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n }\n </div>\n }\n }\n </div>\n</ng-template>\n\n<ng-template #defaultSearchResultTemplate let-item=\"item\">\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container:not(.sky-theme-modern *){--sky-override-autocomplete-actions-add-icon-padding-right: 5px;--sky-override-autocomplete-actions-no-results-line-height: normal;--sky-override-autocomplete-actions-no-results-padding: 7px 13px;--sky-override-autocomplete-actions-top-border: 1px solid #cdcfd2;--sky-override-autocomplete-dropdown-hint-text-line-height: normal;--sky-override-autocomplete-dropdown-hint-text-padding: 7px 13px;--sky-override-autocomplete-no-results-font-size: 15px;--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-background-color: transparent;--sky-override-autocomplete-result-border-radius: 0;--sky-override-autocomplete-result-box-shadow: none;--sky-override-autocomplete-result-focus-background-color: #eeeeef;--sky-override-autocomplete-result-focus-box-shadow: none;--sky-override-autocomplete-result-margin-bottom: 4px;--sky-override-autocomplete-result-padding: 3px 20px;--sky-override-autocomplete-results-container-background-color: #ffffff;--sky-override-autocomplete-results-container-border-radius: 0;--sky-override-autocomplete-results-no-results-padding: 4px;--sky-override-autocomplete-results-padding: 4px}:host-context(sky-input-box) :host{width:100%}.sky-autocomplete-results-container{position:fixed;background-color:var(--sky-override-autocomplete-results-container-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-autocomplete-results-container-border-radius, var(--sky-border-radius-m))}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:var(--sky-override-autocomplete-results-padding, var(--sky-comp-dropdown-menu-space-inset-top) 0 var(--sky-comp-dropdown-menu-space-inset-bottom));overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-results:has(.sky-autocomplete-no-results){padding:var(--sky-override-autocomplete-results-no-results-padding, 0)}.sky-autocomplete-result{background-color:var(--sky-override-autocomplete-result-background-color, var(--sky-color-background-action-tertiary-base));border-radius:var(--sky-override-autocomplete-result-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-autocomplete-result-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base));margin-bottom:var(--sky-override-autocomplete-result-margin-bottom, var(--sky-space-gap-action_group-s));padding:var(--sky-override-autocomplete-result-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-right) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-no-results{padding:var(--sky-override-autocomplete-no-results-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-right) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));font-size:var(--sky-override-autocomplete-no-results-font-size, inherit)}.sky-autocomplete-actions{border-top:var(--sky-override-autocomplete-actions-top-border, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:var(--sky-override-autocomplete-actions-no-results-padding, var(--sky-comp-dropdown-option-space-inset-top) 0 var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));line-height:var(--sky-override-autocomplete-actions-no-results-line-height, var(--sky-font-line_height-body-m))}.sky-autocomplete-dropdown-hint-text{display:inline-block;padding:var(--sky-override-autocomplete-dropdown-hint-text-padding, var(--sky-comp-dropdown-option-space-inset-top) 0 var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));line-height:var(--sky-override-autocomplete-dropdown-hint-text-line-height, var(--sky-font-line_height-body-m))}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:var(--sky-override-autocomplete-actions-add-icon-padding-right, var(--sky-space-gap-icon-s))}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:var(--sky-override-autocomplete-result-focus-background-color, inherit)}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-autocomplete-descendant-focus{border:none;box-shadow:var(--sky-override-autocomplete-result-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}\n"] }]
1399
+ args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"\n isOpen &&\n !!(showActionsArea || dropdownHintText || (isResultsVisible | async))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-controls]=\"\n isOpen &&\n (showActionsArea || dropdownHintText || (isResultsVisible | async))\n ? resultsListId\n : null\n \"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content />\n</div>\n\n<ng-template #resultsTemplateRef>\n <!-- We do not want the blur to fire here so that the dropdown does not close. This is why we are preventing the mousedown default. -->\n <div\n #resultsRef\n class=\"sky-autocomplete-results-container\"\n [attr.id]=\"resultsListId\"\n [skyThemeClass]=\"{ 'sky-shadow': 'default', 'sky-elevation-4': 'modern' }\"\n (mousedown)=\"$event.preventDefault()\"\n (keydown)=\"handleKeydown($event)\"\n >\n @if (isSearchingAsync && !allowAnyValue()) {\n <div class=\"sky-autocomplete-results-waiting\">\n <sky-wait [isWaiting]=\"true\" />\n </div>\n } @else {\n @if (isResultsVisible | async) {\n <div\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n >\n @for (result of searchResults; track result.data; let i = $index) {\n @if (\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n ) {\n <div\n #searchResultEl\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n [attr.id]=\"result.elementId\"\n [skyHighlight]=\"highlightText\"\n (click)=\"onResultClick(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n />\n </div>\n }\n }\n @if (isSearchingAsync && allowAnyValue()) {\n <div class=\"sky-autocomplete-results-waiting\">\n <sky-wait [isWaiting]=\"true\" />\n </div>\n }\n @if (searchResults.length === 0) {\n <div class=\"sky-font-deemphasized sky-autocomplete-no-results\">\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n }\n </div>\n } @else if (dropdownHintText) {\n <div class=\"sky-autocomplete-dropdown-hint-text sky-font-deemphasized\">\n {{ dropdownHintText }}\n </div>\n }\n @if (showActionsArea) {\n <div class=\"sky-autocomplete-actions\">\n @if (\n enableShowMore &&\n (searchTextMinimumCharacters === 0 ||\n !searchText ||\n searchResults.length > 0)\n ) {\n <button\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"moreButtonClicked()\"\n >\n @if (\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText &&\n searchTextMinimumCharacters !== 0\n ) {\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n }\n @if (\n ((searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) ||\n (searchTextMinimumCharacters === 0 &&\n searchResultsCount !== undefined &&\n searchResultsCount > 0)) &&\n !searchText\n ) {\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount\n | skyNumeric: { truncate: false }))\n }}\n }\n @if (searchText) {\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount\n | skyNumeric: { truncate: false }))\n }}\n }\n </button>\n }\n @if (\n (searchText || searchTextMinimumCharacters === 0) &&\n searchResults.length === 0\n ) {\n <div\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n }\n @if (showAddButton) {\n <button\n #addButtonEl\n class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n tabindex=\"0\"\n type=\"button\"\n [class.focused]=\"isElementFocused(addButtonEl)\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n }\n </div>\n }\n }\n </div>\n</ng-template>\n\n<ng-template #defaultSearchResultTemplate let-item=\"item\">\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container:not(.sky-theme-modern *){--sky-override-autocomplete-actions-add-icon-padding-right: 5px;--sky-override-autocomplete-actions-no-results-line-height: normal;--sky-override-autocomplete-actions-no-results-padding: 7px 13px;--sky-override-autocomplete-actions-top-border: 1px solid #cdcfd2;--sky-override-autocomplete-dropdown-hint-text-line-height: normal;--sky-override-autocomplete-dropdown-hint-text-padding: 7px 13px;--sky-override-autocomplete-no-results-font-size: 15px;--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-background-color: transparent;--sky-override-autocomplete-result-border-radius: 0;--sky-override-autocomplete-result-box-shadow: none;--sky-override-autocomplete-result-focus-background-color: #eeeeef;--sky-override-autocomplete-result-focus-box-shadow: none;--sky-override-autocomplete-result-margin-bottom: 4px;--sky-override-autocomplete-result-padding: 3px 20px;--sky-override-autocomplete-results-container-background-color: #ffffff;--sky-override-autocomplete-results-container-border-radius: 0;--sky-override-autocomplete-results-no-results-padding: 4px;--sky-override-autocomplete-results-padding: 4px}:host-context(sky-input-box) :host{width:100%}.sky-autocomplete-results-container{position:fixed;background-color:var(--sky-override-autocomplete-results-container-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-autocomplete-results-container-border-radius, var(--sky-border-radius-m))}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:var(--sky-override-autocomplete-results-padding, var(--sky-comp-dropdown-menu-space-inset-top) 0 var(--sky-comp-dropdown-menu-space-inset-bottom));overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-results:has(.sky-autocomplete-no-results){padding:var(--sky-override-autocomplete-results-no-results-padding, 0)}.sky-autocomplete-result{background-color:var(--sky-override-autocomplete-result-background-color, var(--sky-color-background-action-tertiary-base));border-radius:var(--sky-override-autocomplete-result-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-autocomplete-result-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base));margin-bottom:var(--sky-override-autocomplete-result-margin-bottom, var(--sky-space-gap-action_group-s));padding:var(--sky-override-autocomplete-result-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-right) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-no-results{padding:var(--sky-override-autocomplete-no-results-padding, var(--sky-comp-dropdown-option-space-inset-top) var(--sky-comp-dropdown-option-space-inset-right) var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));font-size:var(--sky-override-autocomplete-no-results-font-size, inherit)}.sky-autocomplete-actions{border-top:var(--sky-override-autocomplete-actions-top-border, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:var(--sky-override-autocomplete-actions-no-results-padding, var(--sky-comp-dropdown-option-space-inset-top) 0 var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));line-height:var(--sky-override-autocomplete-actions-no-results-line-height, var(--sky-font-line_height-body-m))}.sky-autocomplete-dropdown-hint-text{display:inline-block;padding:var(--sky-override-autocomplete-dropdown-hint-text-padding, var(--sky-comp-dropdown-option-space-inset-top) 0 var(--sky-comp-dropdown-option-space-inset-bottom) var(--sky-comp-dropdown-option-space-inset-left));line-height:var(--sky-override-autocomplete-dropdown-hint-text-line-height, var(--sky-font-line_height-body-m))}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:var(--sky-override-autocomplete-actions-add-icon-padding-right, var(--sky-space-gap-icon-s))}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:var(--sky-override-autocomplete-result-focus-background-color, inherit)}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-autocomplete-descendant-focus{border:none;box-shadow:var(--sky-override-autocomplete-result-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}\n"] }]
1401
1400
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: SkyAutocompleteAdapterService }, { type: i1.SkyOverlayService }, { type: i2.SkyInputBoxHostService, decorators: [{
1402
1401
  type: Optional
1403
1402
  }] }, { type: undefined, decorators: [{
@@ -1885,48 +1884,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
1885
1884
  * @internal
1886
1885
  */
1887
1886
  class SkySearchAdapterService {
1888
- #renderer;
1889
- constructor(renderer) {
1890
- this.#renderer = renderer;
1891
- }
1892
1887
  selectInput(searchEl) {
1893
1888
  this.#getInputEl(searchEl).select();
1894
1889
  }
1895
1890
  focusInput(searchEl) {
1896
1891
  this.#getInputEl(searchEl).focus();
1897
1892
  }
1898
- startInputAnimation(searchEl) {
1899
- const buttonWidth = this.#getSearchOpenButtonEl(searchEl).clientWidth;
1900
- const offsetWidth = this.#getSearchContainerEl(searchEl).offsetLeft;
1901
- const minWidth = buttonWidth + offsetWidth;
1902
- this.#getInputContainerEl(searchEl).style.minWidth =
1903
- minWidth.toString() + 'px';
1904
- this.#renderer.setStyle(this.#getInputContainerEl(searchEl), 'min-width', minWidth.toString() + 'px');
1905
- }
1906
- endInputAnimation(searchEl) {
1907
- this.#renderer.setStyle(this.#getInputContainerEl(searchEl), 'min-width', '');
1908
- }
1909
- #getInputContainerEl(searchEl) {
1910
- return searchEl.nativeElement.querySelector('.sky-search-input-container');
1911
- }
1912
- #getSearchOpenButtonEl(searchEl) {
1913
- return searchEl.nativeElement.querySelector('.sky-search-btn-open');
1914
- }
1915
- #getSearchContainerEl(searchEl) {
1916
- return searchEl.nativeElement.querySelector('.sky-search-container');
1917
- }
1918
1893
  #getInputEl(searchEl) {
1919
1894
  return searchEl.nativeElement.querySelector('input');
1920
1895
  }
1921
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySearchAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
1896
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySearchAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1922
1897
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySearchAdapterService }); }
1923
1898
  }
1924
1899
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySearchAdapterService, decorators: [{
1925
1900
  type: Injectable
1926
- }], ctorParameters: () => [{ type: i0.Renderer2 }] });
1901
+ }] });
1927
1902
 
1928
- const INPUT_SHOWN_STATE = 'inputShown';
1929
- const INPUT_HIDDEN_STATE = 'inputHidden';
1930
1903
  const EXPAND_MODE_RESPONSIVE = 'responsive';
1931
1904
  const EXPAND_MODE_FIT = 'fit';
1932
1905
  const EXPAND_MODE_NONE = 'none';
@@ -1968,7 +1941,6 @@ class SkySearchComponent {
1968
1941
  #changeRef;
1969
1942
  #contentInfoProvider;
1970
1943
  #elRef;
1971
- #manualFocus;
1972
1944
  #searchAdapter;
1973
1945
  #searchUpdated;
1974
1946
  #searchUpdatedSub;
@@ -1976,6 +1948,7 @@ class SkySearchComponent {
1976
1948
  #_disabled;
1977
1949
  #_expandMode;
1978
1950
  #destroyRef;
1951
+ #injector;
1979
1952
  #mediaQuerySvc;
1980
1953
  #breakpoint;
1981
1954
  constructor(elRef, searchAdapter, changeRef) {
@@ -1992,19 +1965,18 @@ class SkySearchComponent {
1992
1965
  */
1993
1966
  this.searchClear = new EventEmitter();
1994
1967
  this.clearButtonShown = false;
1995
- this.dismissButtonShown = false;
1996
- this.inputAnimate = INPUT_SHOWN_STATE;
1968
+ this.inputShown = true;
1997
1969
  this.isCollapsible = true;
1998
1970
  this.isFullWidth = false;
1999
1971
  this.mobileSearchShown = false;
2000
1972
  this.searchButtonShown = false;
2001
1973
  this.#contentInfoProvider = inject(SkyContentInfoProvider, { optional: true });
2002
- this.#manualFocus = false;
2003
1974
  this.#searchUpdated = new Subject();
2004
1975
  this.#_debounceTime = 0;
2005
1976
  this.#_disabled = false;
2006
1977
  this.#_expandMode = EXPAND_MODE_RESPONSIVE;
2007
1978
  this.#destroyRef = inject(DestroyRef);
1979
+ this.#injector = inject(Injector);
2008
1980
  this.#mediaQuerySvc = inject(SkyMediaQueryService);
2009
1981
  this.#breakpoint = toSignal(this.#mediaQuerySvc.breakpointChange);
2010
1982
  this.#elRef = elRef;
@@ -2043,7 +2015,9 @@ class SkySearchComponent {
2043
2015
  this.#searchUpdated.next(this.searchText ?? '');
2044
2016
  this.clearButtonShown = !!(this.searchText && this.searchText !== '');
2045
2017
  if (this.#shouldOpenInput()) {
2046
- this.inputAnimate = INPUT_SHOWN_STATE;
2018
+ this.inputShown = true;
2019
+ this.mobileSearchShown = true;
2020
+ this.searchButtonShown = false;
2047
2021
  }
2048
2022
  }
2049
2023
  this.#changeRef.detectChanges();
@@ -2081,40 +2055,24 @@ class SkySearchComponent {
2081
2055
  }
2082
2056
  toggleSearchInput(showInput) {
2083
2057
  if (this.#searchShouldCollapse()) {
2084
- this.#manualFocus = true;
2085
- if (showInput) {
2086
- this.inputAnimate = INPUT_SHOWN_STATE;
2087
- }
2088
- else {
2089
- this.inputAnimate = INPUT_HIDDEN_STATE;
2090
- }
2091
- }
2092
- }
2093
- inputAnimationStart(event) {
2094
- if (this.#searchShouldCollapse()) {
2095
- this.#searchAdapter.startInputAnimation(this.#elRef);
2096
- if (event.toState === INPUT_SHOWN_STATE && this.#breakpoint() === 'xs') {
2058
+ this.inputShown = showInput;
2059
+ if (showInput && this.#breakpoint() === 'xs') {
2097
2060
  this.mobileSearchShown = true;
2098
2061
  this.searchButtonShown = false;
2099
2062
  }
2063
+ if (showInput) {
2064
+ afterNextRender(() => {
2065
+ this.#searchAdapter.focusInput(this.#elRef);
2066
+ }, { injector: this.#injector });
2067
+ }
2100
2068
  }
2101
2069
  }
2102
- inputAnimationEnd(event) {
2103
- if (this.#searchShouldCollapse()) {
2104
- this.#searchAdapter.endInputAnimation(this.#elRef);
2105
- const breakpoint = this.#breakpoint();
2106
- this.searchButtonShown =
2107
- event.toState === INPUT_HIDDEN_STATE && breakpoint === 'xs';
2108
- if ((event.toState === INPUT_HIDDEN_STATE && breakpoint === 'xs') ||
2109
- breakpoint !== 'xs') {
2110
- this.mobileSearchShown = false;
2070
+ onInputTransitionEnd() {
2071
+ if (!this.inputShown) {
2072
+ if (this.#breakpoint() === 'xs' && this.#searchShouldCollapse()) {
2073
+ this.searchButtonShown = true;
2111
2074
  }
2112
- setTimeout(() => {
2113
- if (this.#manualFocus && !this.searchButtonShown) {
2114
- this.#searchAdapter.focusInput(this.#elRef);
2115
- this.#manualFocus = false;
2116
- }
2117
- });
2075
+ this.mobileSearchShown = false;
2118
2076
  }
2119
2077
  }
2120
2078
  ngOnDestroy() {
@@ -2137,10 +2095,12 @@ class SkySearchComponent {
2137
2095
  #mediaQueryCallback(breakpoint) {
2138
2096
  if (this.#searchShouldCollapse()) {
2139
2097
  if (breakpoint === 'xs') {
2140
- this.inputAnimate = INPUT_HIDDEN_STATE;
2098
+ this.inputShown = false;
2141
2099
  }
2142
- else if (this.inputAnimate !== INPUT_SHOWN_STATE) {
2143
- this.inputAnimate = INPUT_SHOWN_STATE;
2100
+ else if (!this.inputShown) {
2101
+ this.inputShown = true;
2102
+ this.searchButtonShown = false;
2103
+ this.mobileSearchShown = false;
2144
2104
  }
2145
2105
  else {
2146
2106
  this.mobileSearchShown = false;
@@ -2161,35 +2121,11 @@ class SkySearchComponent {
2161
2121
  });
2162
2122
  }
2163
2123
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySearchComponent, deps: [{ token: i0.ElementRef }, { token: SkySearchAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
2164
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkySearchComponent, isStandalone: false, selector: "sky-search", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n #searchInput=\"skyId\"\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n skyId\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources\n : (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_search_label' | skyLibResources))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon iconName=\"close\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n @if (mobileSearchShown) {\n <button\n class=\"sky-btn sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" iconName=\"chevron-left\" />\n <sky-icon *skyThemeIf=\"'modern'\" iconName=\"chevron-double-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon iconName=\"search\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-applied-background-color: #fff;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-clear-padding-right: 6px;--sky-override-search-container-padding: 5px;--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-font-size: 15px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-apply{padding-left:6px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media(min-width:768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media(max-width:767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:var(--sky-override-search-mobile-font-size, var(--sky-font-size-body-m))}}sky-search .sky-btn.sky-search-btn-open{padding-top:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open{padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied .sky-btn.sky-search-btn-open:hover{background-color:var(--sky-override-search-applied-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-search-applied-border, none);box-shadow:var(--sky-override-search-applied-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-search-applied-color, var(--sky-color-border-selected)));color:var(--sky-override-search-applied-color, var(--sky-color-icon-action))}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:var(--sky-override-search-mobile-background-color, var(--sky-comp-override-list-header-background-color));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-comp-search-space-offset-top) var(--sky-comp-search-space-offset-right) var(--sky-comp-search-space-offset-bottom) var(--sky-comp-search-space-offset-left));z-index:1}.sky-theme-modern sky-search sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-action-secondary-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-action-secondary-active );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-action-secondary-focus );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-action-secondary-hover )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-top) + var(--sky-comp-search-space-inset-bottom));width:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-left) + var(--sky-comp-search-space-inset-right))}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:var(--sky-color-icon-default);font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-dismiss{color:var(--sky-color-icon-default);padding:var(--sky-comp-button-toolbar-space-inset-top) var(--sky-comp-button-toolbar-space-inset-right) var(--sky-comp-button-toolbar-space-inset-bottom) var(--sky-comp-button-toolbar-space-inset-left)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-disabled .sky-input-box-group .sky-input-box-group-form-control .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-disabled )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-base );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-base )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover:not(.sky-input-box-group-form-control-focus,:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-hover );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-hover )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control.sky-input-box-group-form-control-focus:not(:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-focus );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-focus )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:has(:active) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-active );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-active )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-selected),var(--sky-elevation-action-toolbar-base);--sky-comp-override-input-box-group-background-color: var( --sky-color-background-selected-soft )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(:focus-within:not(:active)) .sky-form-group input{color:var(--sky-color-text-selected)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 var(--sky-space-gap-icon-m)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{color:var(--sky-color-icon-default)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:var(--sky-comp-search-space-inset-top) var(--sky-comp-search-space-inset-right) var(--sky-comp-search-space-inset-bottom) 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:var(--sky-font-style-body-s);color:var(--sky-color-text-deemphasized);font-weight:var(--bb-font-weight-regular)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
2165
- trigger('inputState', [
2166
- state(INPUT_HIDDEN_STATE, style({
2167
- opacity: 0,
2168
- width: 0,
2169
- })),
2170
- state(INPUT_SHOWN_STATE, style({
2171
- opacity: 1,
2172
- width: '100%',
2173
- })),
2174
- transition('* <=> *', animate('150ms')),
2175
- ]),
2176
- ], encapsulation: i0.ViewEncapsulation.None }); }
2124
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkySearchComponent, isStandalone: false, selector: "sky-search", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"opacity\"\n [class.sky-search-input-hidden]=\"!inputShown\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n [transitionTrigger]=\"inputShown\"\n (transitionEnd)=\"onInputTransitionEnd()\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n #searchInput=\"skyId\"\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n skyId\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources\n : (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_search_label' | skyLibResources))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon iconName=\"close\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n @if (mobileSearchShown) {\n <button\n class=\"sky-btn sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" iconName=\"chevron-left\" />\n <sky-icon *skyThemeIf=\"'modern'\" iconName=\"chevron-double-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon iconName=\"search\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-applied-background-color: #fff;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-clear-padding-right: 6px;--sky-override-search-container-padding: 5px;--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-font-size: 15px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-apply{padding-left:6px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container{opacity:1;width:100%;transition-property:opacity,width;transition-duration:var(--sky-global-duration-short);transition-timing-function:ease}sky-search .sky-search-input-container.sky-search-input-hidden{opacity:0;width:0;overflow:hidden}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media(min-width:768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media(max-width:767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:var(--sky-override-search-mobile-font-size, var(--sky-font-size-body-m))}}sky-search .sky-btn.sky-search-btn-open{padding-top:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open{padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied .sky-btn.sky-search-btn-open:hover{background-color:var(--sky-override-search-applied-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-search-applied-border, none);box-shadow:var(--sky-override-search-applied-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-search-applied-color, var(--sky-color-border-selected)));color:var(--sky-override-search-applied-color, var(--sky-color-icon-action))}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:var(--sky-override-search-mobile-background-color, var(--sky-comp-override-list-header-background-color));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-comp-search-space-offset-top) var(--sky-comp-search-space-offset-right) var(--sky-comp-search-space-offset-bottom) var(--sky-comp-search-space-offset-left));z-index:1}.sky-theme-modern sky-search sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-action-secondary-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-action-secondary-active );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-action-secondary-focus );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-action-secondary-hover )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-top) + var(--sky-comp-search-space-inset-bottom));width:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-left) + var(--sky-comp-search-space-inset-right))}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:var(--sky-color-icon-default);font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-dismiss{color:var(--sky-color-icon-default);padding:var(--sky-comp-button-toolbar-space-inset-top) var(--sky-comp-button-toolbar-space-inset-right) var(--sky-comp-button-toolbar-space-inset-bottom) var(--sky-comp-button-toolbar-space-inset-left)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-disabled .sky-input-box-group .sky-input-box-group-form-control .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-disabled )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-base );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-base )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover:not(.sky-input-box-group-form-control-focus,:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-hover );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-hover )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control.sky-input-box-group-form-control-focus:not(:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-focus );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-focus )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:has(:active) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-active );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-active )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-selected),var(--sky-elevation-action-toolbar-base);--sky-comp-override-input-box-group-background-color: var( --sky-color-background-selected-soft )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(:focus-within:not(:active)) .sky-form-group input{color:var(--sky-color-text-selected)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 var(--sky-space-gap-icon-m)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{color:var(--sky-color-icon-default)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:var(--sky-comp-search-space-inset-top) var(--sky-comp-search-space-inset-right) var(--sky-comp-search-space-inset-bottom) 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:var(--sky-font-style-body-s);color:var(--sky-color-text-deemphasized);font-weight:var(--bb-font-weight-regular)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], encapsulation: i0.ViewEncapsulation.None }); }
2177
2125
  }
2178
2126
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySearchComponent, decorators: [{
2179
2127
  type: Component,
2180
- args: [{ selector: 'sky-search', encapsulation: ViewEncapsulation.None, animations: [
2181
- trigger('inputState', [
2182
- state(INPUT_HIDDEN_STATE, style({
2183
- opacity: 0,
2184
- width: 0,
2185
- })),
2186
- state(INPUT_SHOWN_STATE, style({
2187
- opacity: 1,
2188
- width: '100%',
2189
- })),
2190
- transition('* <=> *', animate('150ms')),
2191
- ]),
2192
- ], providers: [SkySearchAdapterService], standalone: false, template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n #searchInput=\"skyId\"\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n skyId\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources\n : (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_search_label' | skyLibResources))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon iconName=\"close\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n @if (mobileSearchShown) {\n <button\n class=\"sky-btn sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" iconName=\"chevron-left\" />\n <sky-icon *skyThemeIf=\"'modern'\" iconName=\"chevron-double-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon iconName=\"search\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-applied-background-color: #fff;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-clear-padding-right: 6px;--sky-override-search-container-padding: 5px;--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-font-size: 15px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-apply{padding-left:6px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media(min-width:768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media(max-width:767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:var(--sky-override-search-mobile-font-size, var(--sky-font-size-body-m))}}sky-search .sky-btn.sky-search-btn-open{padding-top:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open{padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied .sky-btn.sky-search-btn-open:hover{background-color:var(--sky-override-search-applied-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-search-applied-border, none);box-shadow:var(--sky-override-search-applied-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-search-applied-color, var(--sky-color-border-selected)));color:var(--sky-override-search-applied-color, var(--sky-color-icon-action))}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:var(--sky-override-search-mobile-background-color, var(--sky-comp-override-list-header-background-color));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-comp-search-space-offset-top) var(--sky-comp-search-space-offset-right) var(--sky-comp-search-space-offset-bottom) var(--sky-comp-search-space-offset-left));z-index:1}.sky-theme-modern sky-search sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-action-secondary-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-action-secondary-active );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-action-secondary-focus );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-action-secondary-hover )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-top) + var(--sky-comp-search-space-inset-bottom));width:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-left) + var(--sky-comp-search-space-inset-right))}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:var(--sky-color-icon-default);font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-dismiss{color:var(--sky-color-icon-default);padding:var(--sky-comp-button-toolbar-space-inset-top) var(--sky-comp-button-toolbar-space-inset-right) var(--sky-comp-button-toolbar-space-inset-bottom) var(--sky-comp-button-toolbar-space-inset-left)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-disabled .sky-input-box-group .sky-input-box-group-form-control .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-disabled )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-base );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-base )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover:not(.sky-input-box-group-form-control-focus,:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-hover );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-hover )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control.sky-input-box-group-form-control-focus:not(:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-focus );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-focus )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:has(:active) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-active );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-active )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-selected),var(--sky-elevation-action-toolbar-base);--sky-comp-override-input-box-group-background-color: var( --sky-color-background-selected-soft )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(:focus-within:not(:active)) .sky-form-group input{color:var(--sky-color-text-selected)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 var(--sky-space-gap-icon-m)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{color:var(--sky-color-icon-default)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:var(--sky-comp-search-space-inset-top) var(--sky-comp-search-space-inset-right) var(--sky-comp-search-space-inset-bottom) 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:var(--sky-font-style-body-s);color:var(--sky-color-text-deemphasized);font-weight:var(--bb-font-weight-regular)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}\n"] }]
2128
+ args: [{ selector: 'sky-search', encapsulation: ViewEncapsulation.None, providers: [SkySearchAdapterService], standalone: false, template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"opacity\"\n [class.sky-search-input-hidden]=\"!inputShown\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n [transitionTrigger]=\"inputShown\"\n (transitionEnd)=\"onInputTransitionEnd()\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n #searchInput=\"skyId\"\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n skyId\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources\n : (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_search_label' | skyLibResources))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon iconName=\"close\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n @if (mobileSearchShown) {\n <button\n class=\"sky-btn sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" iconName=\"chevron-left\" />\n <sky-icon *skyThemeIf=\"'modern'\" iconName=\"chevron-double-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon iconName=\"search\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-applied-background-color: #fff;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-clear-padding-right: 6px;--sky-override-search-container-padding: 5px;--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-font-size: 15px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-apply{padding-left:6px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container{opacity:1;width:100%;transition-property:opacity,width;transition-duration:var(--sky-global-duration-short);transition-timing-function:ease}sky-search .sky-search-input-container.sky-search-input-hidden{opacity:0;width:0;overflow:hidden}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media(min-width:768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media(max-width:767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:var(--sky-override-search-mobile-font-size, var(--sky-font-size-body-m))}}sky-search .sky-btn.sky-search-btn-open{padding-top:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open{padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied .sky-btn.sky-search-btn-open:hover{background-color:var(--sky-override-search-applied-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-search-applied-border, none);box-shadow:var(--sky-override-search-applied-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-search-applied-color, var(--sky-color-border-selected)));color:var(--sky-override-search-applied-color, var(--sky-color-icon-action))}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:var(--sky-override-search-mobile-background-color, var(--sky-comp-override-list-header-background-color));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-comp-search-space-offset-top) var(--sky-comp-search-space-offset-right) var(--sky-comp-search-space-offset-bottom) var(--sky-comp-search-space-offset-left));z-index:1}.sky-theme-modern sky-search sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-action-secondary-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-action-secondary-active );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-action-secondary-focus );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-action-secondary-hover )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-top) + var(--sky-comp-search-space-inset-bottom));width:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-left) + var(--sky-comp-search-space-inset-right))}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:var(--sky-color-icon-default);font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-dismiss{color:var(--sky-color-icon-default);padding:var(--sky-comp-button-toolbar-space-inset-top) var(--sky-comp-button-toolbar-space-inset-right) var(--sky-comp-button-toolbar-space-inset-bottom) var(--sky-comp-button-toolbar-space-inset-left)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-disabled .sky-input-box-group .sky-input-box-group-form-control .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-disabled )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-base );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-base )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover:not(.sky-input-box-group-form-control-focus,:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-hover );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-hover )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control.sky-input-box-group-form-control-focus:not(:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-focus );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-focus )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:has(:active) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-active );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-active )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-selected),var(--sky-elevation-action-toolbar-base);--sky-comp-override-input-box-group-background-color: var( --sky-color-background-selected-soft )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(:focus-within:not(:active)) .sky-form-group input{color:var(--sky-color-text-selected)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 var(--sky-space-gap-icon-m)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{color:var(--sky-color-icon-default)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:var(--sky-comp-search-space-inset-top) var(--sky-comp-search-space-inset-right) var(--sky-comp-search-space-inset-bottom) 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:var(--sky-font-style-body-s);color:var(--sky-color-text-deemphasized);font-weight:var(--bb-font-weight-regular)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}\n"] }]
2193
2129
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkySearchAdapterService }, { type: i0.ChangeDetectorRef }], propDecorators: { ariaLabel: [{
2194
2130
  type: Input
2195
2131
  }], ariaLabelledBy: [{
@@ -2220,7 +2156,8 @@ class SkySearchModule {
2220
2156
  FormsModule,
2221
2157
  SkyIconModule,
2222
2158
  SkyThemeModule,
2223
- SkyIdModule], exports: [SkySearchComponent] }); }
2159
+ SkyIdModule,
2160
+ _SkyTransitionEndHandlerDirective], exports: [SkySearchComponent] }); }
2224
2161
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySearchModule, imports: [CommonModule,
2225
2162
  SkyInputBoxModule,
2226
2163
  SkyLookupResourcesModule,
@@ -2241,6 +2178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
2241
2178
  SkyIconModule,
2242
2179
  SkyThemeModule,
2243
2180
  SkyIdModule,
2181
+ _SkyTransitionEndHandlerDirective,
2244
2182
  ],
2245
2183
  exports: [SkySearchComponent],
2246
2184
  }]
@@ -2483,7 +2421,7 @@ class SkySelectionModalComponent {
2483
2421
  });
2484
2422
  }
2485
2423
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySelectionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2486
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\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-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\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: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary 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 [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ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.λ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: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { 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", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2424
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\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-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\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: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary 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 [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ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.λ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: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { 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", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2487
2425
  }
2488
2426
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
2489
2427
  type: Component,
@@ -2501,7 +2439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
2501
2439
  SkyToolbarModule,
2502
2440
  SkyWaitModule,
2503
2441
  SkyViewkeeperModule,
2504
- ], 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\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-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\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: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary 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 [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"] }]
2442
+ ], 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\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-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\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: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary 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 [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"] }]
2505
2443
  }], ctorParameters: () => [] });
2506
2444
 
2507
2445
  /**
@@ -3043,7 +2981,7 @@ class SkyLookupShowMoreModalComponent {
3043
2981
  });
3044
2982
  }
3045
2983
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3046
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\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 class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\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-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\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: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary 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 [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\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}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ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.λ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: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { 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", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2984
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\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 class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\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-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\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: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary 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 [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\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}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ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.λ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: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { 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", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3047
2985
  }
3048
2986
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
3049
2987
  type: Component,
@@ -3059,7 +2997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
3059
2997
  SkyThemeModule,
3060
2998
  SkyToolbarModule,
3061
2999
  SkyViewkeeperModule,
3062
- ], 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\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 class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\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-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\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: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary 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 [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\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}label.selection-modal-item-label{display:block}\n"] }]
3000
+ ], 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\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 class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\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-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\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: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary 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 [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\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}label.selection-modal-item-label{display:block}\n"] }]
3063
3001
  }], ctorParameters: () => [] });
3064
3002
 
3065
3003
  class SkyLookupComponent extends SkyLookupAutocompleteAdapter {