@skyux/lookup 14.17.0 → 14.18.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.
|
@@ -123,7 +123,7 @@ const RESOURCES = {
|
|
|
123
123
|
},
|
|
124
124
|
skyux_lookup_show_more_select: { message: 'Sélectionner' },
|
|
125
125
|
skyux_lookup_show_more_select_context: { message: 'Sélectionner {0}' },
|
|
126
|
-
skyux_lookup_tokens_summary: { message: '{0}
|
|
126
|
+
skyux_lookup_tokens_summary: { message: '{0} éléments sélectionnés' },
|
|
127
127
|
skyux_search_aria_label_descriptor: { message: 'Rechercher {0}' },
|
|
128
128
|
skyux_search_dismiss: { message: 'Omettre la recherche' },
|
|
129
129
|
skyux_search_label: { message: 'Rechercher des articles' },
|
|
@@ -1420,11 +1420,11 @@ class SkyAutocompleteComponent {
|
|
|
1420
1420
|
}
|
|
1421
1421
|
}
|
|
1422
1422
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1423
|
-
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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i6.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1423
|
+
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-comp-override-link-text-decoration-line: var( --sky-font-text_decoration-standalone_link-base );--sky-comp-override-link-text-decoration-line-hover: var( --sky-font-text_decoration-standalone_link-hover );--sky-comp-override-link-text-decoration-line-active: var( --sky-font-text_decoration-standalone_link-active );--sky-comp-override-link-text-decoration-line-focus: var( --sky-font-text_decoration-standalone_link-focus );--sky-comp-override-link-text-decoration-line-disabled: var( --sky-font-text_decoration-standalone_link-disabled )}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i6.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1424
1424
|
}
|
|
1425
1425
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
|
|
1426
1426
|
type: Component,
|
|
1427
|
-
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"] }]
|
|
1427
|
+
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-comp-override-link-text-decoration-line: var( --sky-font-text_decoration-standalone_link-base );--sky-comp-override-link-text-decoration-line-hover: var( --sky-font-text_decoration-standalone_link-hover );--sky-comp-override-link-text-decoration-line-active: var( --sky-font-text_decoration-standalone_link-active );--sky-comp-override-link-text-decoration-line-focus: var( --sky-font-text_decoration-standalone_link-focus );--sky-comp-override-link-text-decoration-line-disabled: var( --sky-font-text_decoration-standalone_link-disabled )}.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"] }]
|
|
1428
1428
|
}], ctorParameters: () => [], propDecorators: { ariaLabelledBy: [{
|
|
1429
1429
|
type: Input
|
|
1430
1430
|
}], data: [{
|