@skyux/lookup 12.14.3 → 12.16.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.
|
@@ -1373,11 +1373,11 @@ class SkyAutocompleteComponent {
|
|
|
1373
1373
|
}
|
|
1374
1374
|
}
|
|
1375
1375
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i2.SkyInputBoxHostService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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 (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 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-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-base) .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-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-focus-box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--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)}: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-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-dropdown-hint-text{display:inline-block;padding:var(--sky-override-autocomplete-dropdown-hint-text-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-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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "directive", type: i2$1.λ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: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1376
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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 (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 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-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-base) .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-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-focus-box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--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-comp-dropdown-menu-space-inset-top ) 0 var(--sky-comp-dropdown-menu-space-inset-bottom)}: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-s))}.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));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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "directive", type: i2$1.λ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: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1377
1377
|
}
|
|
1378
1378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
|
|
1379
1379
|
type: Component,
|
|
1380
|
-
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 (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 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-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-base) .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-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-focus-box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--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)}: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-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-dropdown-hint-text{display:inline-block;padding:var(--sky-override-autocomplete-dropdown-hint-text-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-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"] }]
|
|
1380
|
+
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 (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 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-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-base) .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-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-focus-box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--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-comp-dropdown-menu-space-inset-top ) 0 var(--sky-comp-dropdown-menu-space-inset-bottom)}: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-s))}.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));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"] }]
|
|
1381
1381
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: SkyAutocompleteAdapterService }, { type: i1.SkyOverlayService }, { type: i2.SkyInputBoxHostService, decorators: [{
|
|
1382
1382
|
type: Optional
|
|
1383
1383
|
}] }, { type: undefined, decorators: [{
|
|
@@ -2505,7 +2505,7 @@ class SkySelectionModalComponent {
|
|
|
2505
2505
|
});
|
|
2506
2506
|
}
|
|
2507
2507
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkySelectionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2508
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SkySelectionModalComponent, isStandalone: true, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [label]=\"\n 'skyux_lookup_show_more_show_selected_option_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.selectionDescriptor\n \"\n [disabled]=\"isSearching\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\">\n {{ item[context.descriptorProperty] }}\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$2.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$2.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$2.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4$2.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2508
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SkySelectionModalComponent, isStandalone: true, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [label]=\"\n 'skyux_lookup_show_more_show_selected_option_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.selectionDescriptor\n \"\n [disabled]=\"isSearching\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\">\n {{ item[context.descriptorProperty] }}\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$2.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$2.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$2.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4$2.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2509
2509
|
}
|
|
2510
2510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
|
|
2511
2511
|
type: Component,
|
|
@@ -3065,7 +3065,7 @@ class SkyLookupShowMoreModalComponent {
|
|
|
3065
3065
|
});
|
|
3066
3066
|
}
|
|
3067
3067
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3068
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SkyLookupShowMoreModalComponent, isStandalone: true, selector: "sky-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [label]=\"\n 'skyux_lookup_show_more_show_selected_option_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n [selectable]=\"context.selectMode === 'multiple'\"\n [(isSelected)]=\"item.selected\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item.value }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"modalInstance.save(selectedItems)\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\">\n {{ item[context.descriptorProperty] }}\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$2.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$2.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$2.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4$2.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3068
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SkyLookupShowMoreModalComponent, isStandalone: true, selector: "sky-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [label]=\"\n 'skyux_lookup_show_more_show_selected_option_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n [selectable]=\"context.selectMode === 'multiple'\"\n [(isSelected)]=\"item.selected\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item.value }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"modalInstance.save(selectedItems)\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\">\n {{ item[context.descriptorProperty] }}\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$2.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$2.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$2.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4$2.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3069
3069
|
}
|
|
3070
3070
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
|
|
3071
3071
|
type: Component,
|
|
@@ -3760,11 +3760,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3760
3760
|
return !!(this.#openNativePicker || this.#openSelectionModal);
|
|
3761
3761
|
}
|
|
3762
3762
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i4$1.NgControl, optional: true, self: true }, { token: i2.SkyInputBoxHostService, optional: true }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3763
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SkyLookupComponent, isStandalone: false, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", required: ["required", "required", booleanAttribute], enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick", openChange: "openChange", selectionModalOpenChange: "selectionModalOpenChange" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (!inputBoxHostSvc) {\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n <div\n #lookupWrapper\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n @if (selectMode === 'multiple') {\n <sky-tokens\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </sky-tokens>\n } @else if (selectMode === 'single') {\n <div class=\"sky-lookup-single-control\">\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </div>\n }\n </div>\n @if (!inputBoxHostSvc && enableShowMore) {\n <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n }\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-theme-modern:not(.sky-theme-brand-base) .sky-lookup{--sky-override-lookup-input-box-search-disabled-background-color: transparent;--sky-override-lookup-input-box-search-padding: 0 0 0 15px;--sky-override-lookup-input-box-single-control-padding-left: 0;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-space-inset-input_label-top-m) + var(--sky-space-inset-input_label-bottom-m))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-space-inset-input_label-top-m) + var(--sky-space-inset-input_label-bottom-m)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-space-inset-input-left-m));align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-space-inset-input-left-m));resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-space-inset-input-left-m));align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-space-inset-input-left-m));resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "component", type: i5.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3763
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SkyLookupComponent, isStandalone: false, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", required: ["required", "required", booleanAttribute], enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick", openChange: "openChange", selectionModalOpenChange: "selectionModalOpenChange" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (!inputBoxHostSvc) {\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n <div\n #lookupWrapper\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n @if (selectMode === 'multiple') {\n <sky-tokens\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </sky-tokens>\n } @else if (selectMode === 'single') {\n <div class=\"sky-lookup-single-control\">\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </div>\n }\n </div>\n @if (!inputBoxHostSvc && enableShowMore) {\n <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n }\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-theme-modern:not(.sky-theme-brand-base) .sky-lookup{--sky-override-lookup-input-box-search-disabled-background-color: transparent;--sky-override-lookup-input-box-search-padding: 0 0 0 15px;--sky-override-lookup-input-box-single-control-padding-left: 0;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left));align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left));align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "component", type: i5.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3764
3764
|
}
|
|
3765
3765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyLookupComponent, decorators: [{
|
|
3766
3766
|
type: Component,
|
|
3767
|
-
args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!inputBoxHostSvc) {\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n <div\n #lookupWrapper\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n @if (selectMode === 'multiple') {\n <sky-tokens\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </sky-tokens>\n } @else if (selectMode === 'single') {\n <div class=\"sky-lookup-single-control\">\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </div>\n }\n </div>\n @if (!inputBoxHostSvc && enableShowMore) {\n <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n }\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-theme-modern:not(.sky-theme-brand-base) .sky-lookup{--sky-override-lookup-input-box-search-disabled-background-color: transparent;--sky-override-lookup-input-box-search-padding: 0 0 0 15px;--sky-override-lookup-input-box-single-control-padding-left: 0;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-space-inset-input_label-top-m) + var(--sky-space-inset-input_label-bottom-m))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-space-inset-input_label-top-m) + var(--sky-space-inset-input_label-bottom-m)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-space-inset-input-left-m));align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-space-inset-input-left-m));resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-space-inset-input-left-m));align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-space-inset-input-left-m));resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}\n"] }]
|
|
3767
|
+
args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!inputBoxHostSvc) {\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n <div\n #lookupWrapper\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n @if (selectMode === 'multiple') {\n <sky-tokens\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </sky-tokens>\n } @else if (selectMode === 'single') {\n <div class=\"sky-lookup-single-control\">\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </div>\n }\n </div>\n @if (!inputBoxHostSvc && enableShowMore) {\n <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n }\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-theme-modern:not(.sky-theme-brand-base) .sky-lookup{--sky-override-lookup-input-box-search-disabled-background-color: transparent;--sky-override-lookup-input-box-search-padding: 0 0 0 15px;--sky-override-lookup-input-box-single-control-padding-left: 0;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left));align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left));align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}\n"] }]
|
|
3768
3768
|
}], ctorParameters: () => [{ type: i4$1.NgControl, decorators: [{
|
|
3769
3769
|
type: Self
|
|
3770
3770
|
}, {
|