@skyux/lookup 11.22.0 → 11.24.0

package/esm2022/lib/modules/autocomplete/autocomplete.component.mjs

@@ -829,11 +829,11 @@ export class SkyAutocompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: i2.SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i3.SkyInputBoxHostService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, 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 && (showActionsArea || (isResultsVisible | async))\n  \"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-controls]=\"\n    isOpen && (showActionsArea || (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]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (mousedown)=\"$event.preventDefault()\"\n    (keydown)=\"handleKeydown($event)\"\n  >\n    @if (isSearchingAsync) {\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; 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 (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      }\n      @if (showActionsArea) {\n        <div class=\"sky-autocomplete-actions\">\n          @if (enableShowMore && (!searchText || searchResults.length > 0)) {\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              ) {\n                {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n              }\n              @if (\n                (searchAsync\n                  | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n                !searchText\n              ) {\n                {{\n                  'skyux_autocomplete_show_all_count'\n                    | skyLibResources\n                      : (data.length | 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 (searchText && searchResults.length === 0) {\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 icon=\"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-results-container-background-color: #ffffff;--sky-override-autocomplete-results-container-border-radius: 0;--sky-override-autocomplete-results-padding: 4px;--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-margin-bottom: 4px;--sky-override-autocomplete-result-padding: 3px 20px;--sky-override-autocomplete-result-background-color: transparent;--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-no-results-font-size: 15px;--sky-override-autocomplete-results-no-results-padding: 4px}::ng-deep .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-autocomplete-results-container{--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-margin-bottom: 0;--sky-override-autocomplete-result-padding: 10px 0 10px 15px;--sky-override-autocomplete-no-results-font-size: 15px;--sky-override-autocomplete-results-no-results-padding: var( --sky-space-inset-vertical-top-s ) 0 var(--sky-space-inset-vertical-bottom-s)}.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-s))}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:var(--sky-override-autocomplete-results-padding, var(--sky-space-inset-vertical-top-s) 0 var(--sky-space-inset-vertical-bottom-s));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));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-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-no-results{padding:var(--sky-override-autocomplete-no-results-padding, var(--sky-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));font-size:var(--sky-override-autocomplete-no-results-font-size, inherit)}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.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), var(--sky-elevation-focus))}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { 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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: i9.SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, 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 && (showActionsArea || (isResultsVisible | async))\n  \"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-controls]=\"\n    isOpen && (showActionsArea || (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]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (mousedown)=\"$event.preventDefault()\"\n    (keydown)=\"handleKeydown($event)\"\n  >\n    @if (isSearchingAsync) {\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; 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 (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      }\n      @if (showActionsArea) {\n        <div class=\"sky-autocomplete-actions\">\n          @if (enableShowMore && (!searchText || searchResults.length > 0)) {\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              ) {\n                {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n              }\n              @if (\n                (searchAsync\n                  | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n                !searchText\n              ) {\n                {{\n                  'skyux_autocomplete_show_all_count'\n                    | skyLibResources\n                      : (data.length | 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 (searchText && searchResults.length === 0) {\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 icon=\"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-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-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}::ng-deep .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-autocomplete-results-container{--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-no-results-font-size: 15px;--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-margin-bottom: 0;--sky-override-autocomplete-result-padding: 10px 0 10px 15px;--sky-override-autocomplete-results-no-results-padding: var( --sky-space-inset-vertical-top-s ) 0 var(--sky-space-inset-vertical-bottom-s)}.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-s))}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:var(--sky-override-autocomplete-results-padding, var(--sky-space-inset-vertical-top-s) 0 var(--sky-space-inset-vertical-bottom-s));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));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-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-no-results{padding:var(--sky-override-autocomplete-no-results-padding, var(--sky-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));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-space-inset-pillarbox-1_2-top-m) 0 var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));line-height:var(--sky-override-autocomplete-actions-no-results-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), var(--sky-elevation-focus))}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { 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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: i9.SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"\n    isOpen && (showActionsArea || (isResultsVisible | async))\n  \"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-controls]=\"\n    isOpen && (showActionsArea || (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]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (mousedown)=\"$event.preventDefault()\"\n    (keydown)=\"handleKeydown($event)\"\n  >\n    @if (isSearchingAsync) {\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; 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 (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      }\n      @if (showActionsArea) {\n        <div class=\"sky-autocomplete-actions\">\n          @if (enableShowMore && (!searchText || searchResults.length > 0)) {\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              ) {\n                {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n              }\n              @if (\n                (searchAsync\n                  | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n                !searchText\n              ) {\n                {{\n                  'skyux_autocomplete_show_all_count'\n                    | skyLibResources\n                      : (data.length | 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 (searchText && searchResults.length === 0) {\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 icon=\"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-results-container-background-color: #ffffff;--sky-override-autocomplete-results-container-border-radius: 0;--sky-override-autocomplete-results-padding: 4px;--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-margin-bottom: 4px;--sky-override-autocomplete-result-padding: 3px 20px;--sky-override-autocomplete-result-background-color: transparent;--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-no-results-font-size: 15px;--sky-override-autocomplete-results-no-results-padding: 4px}::ng-deep .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-autocomplete-results-container{--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-margin-bottom: 0;--sky-override-autocomplete-result-padding: 10px 0 10px 15px;--sky-override-autocomplete-no-results-font-size: 15px;--sky-override-autocomplete-results-no-results-padding: var( --sky-space-inset-vertical-top-s ) 0 var(--sky-space-inset-vertical-bottom-s)}.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-s))}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:var(--sky-override-autocomplete-results-padding, var(--sky-space-inset-vertical-top-s) 0 var(--sky-space-inset-vertical-bottom-s));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));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-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-no-results{padding:var(--sky-override-autocomplete-no-results-padding, var(--sky-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));font-size:var(--sky-override-autocomplete-no-results-font-size, inherit)}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.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), var(--sky-elevation-focus))}\n"] }]
+            args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  aria-autocomplete=\"list\"\n  aria-haspopup=\"listbox\"\n  class=\"sky-autocomplete\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"\n    isOpen && (showActionsArea || (isResultsVisible | async))\n  \"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.aria-controls]=\"\n    isOpen && (showActionsArea || (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]=\"{\n      'sky-shadow': 'default',\n      'sky-elevation-4': 'modern'\n    }\"\n    (mousedown)=\"$event.preventDefault()\"\n    (keydown)=\"handleKeydown($event)\"\n  >\n    @if (isSearchingAsync) {\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; 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 (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      }\n      @if (showActionsArea) {\n        <div class=\"sky-autocomplete-actions\">\n          @if (enableShowMore && (!searchText || searchResults.length > 0)) {\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              ) {\n                {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n              }\n              @if (\n                (searchAsync\n                  | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n                !searchText\n              ) {\n                {{\n                  'skyux_autocomplete_show_all_count'\n                    | skyLibResources\n                      : (data.length | 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 (searchText && searchResults.length === 0) {\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 icon=\"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-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-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}::ng-deep .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-autocomplete-results-container{--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-no-results-font-size: 15px;--sky-override-autocomplete-no-results-padding: 5px 10px 5px 10px;--sky-override-autocomplete-result-margin-bottom: 0;--sky-override-autocomplete-result-padding: 10px 0 10px 15px;--sky-override-autocomplete-results-no-results-padding: var( --sky-space-inset-vertical-top-s ) 0 var(--sky-space-inset-vertical-bottom-s)}.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-s))}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:var(--sky-override-autocomplete-results-padding, var(--sky-space-inset-vertical-top-s) 0 var(--sky-space-inset-vertical-bottom-s));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));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-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-no-results{padding:var(--sky-override-autocomplete-no-results-padding, var(--sky-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));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-space-inset-pillarbox-1_2-top-m) 0 var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));line-height:var(--sky-override-autocomplete-actions-no-results-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), var(--sky-elevation-focus))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: i2.SkyAutocompleteAdapterService }, { type: i1.SkyOverlayService }, { type: i3.SkyInputBoxHostService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{