@skyux/lookup 8.7.2 → 9.0.0-alpha.1
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.
- package/documentation.json +244 -244
- package/esm2022/lib/modules/autocomplete/autocomplete-adapter.service.mjs +61 -0
- package/esm2022/lib/modules/autocomplete/autocomplete-input.directive.mjs +237 -0
- package/{esm2020 → esm2022}/lib/modules/autocomplete/autocomplete-search-async-disabled.pipe.mjs +4 -4
- package/esm2022/lib/modules/autocomplete/autocomplete.component.mjs +817 -0
- package/{esm2020 → esm2022}/lib/modules/autocomplete/autocomplete.module.mjs +27 -27
- package/esm2022/lib/modules/country-field/country-field.component.mjs +444 -0
- package/{esm2020 → esm2022}/lib/modules/country-field/country-field.module.mjs +19 -19
- package/{esm2020 → esm2022}/lib/modules/lookup/lookup-adapter.service.mjs +4 -4
- package/esm2022/lib/modules/lookup/lookup-autocomplete-adapter.mjs +114 -0
- package/esm2022/lib/modules/lookup/lookup-show-more-modal.component.mjs +270 -0
- package/{esm2020 → esm2022}/lib/modules/lookup/lookup.component.mjs +299 -280
- package/{esm2020 → esm2022}/lib/modules/lookup/lookup.module.mjs +37 -37
- package/esm2022/lib/modules/search/search-adapter.service.mjs +46 -0
- package/esm2022/lib/modules/search/search.component.mjs +285 -0
- package/{esm2020 → esm2022}/lib/modules/search/search.module.mjs +17 -17
- package/{esm2020 → esm2022}/lib/modules/selection-modal/selection-modal-item-selected.pipe.mjs +4 -4
- package/esm2022/lib/modules/selection-modal/selection-modal.component.mjs +201 -0
- package/{esm2020 → esm2022}/lib/modules/selection-modal/selection-modal.module.mjs +27 -27
- package/esm2022/lib/modules/selection-modal/selection-modal.service.mjs +89 -0
- package/esm2022/lib/modules/selection-modal/types/selection-modal-instance.mjs +45 -0
- package/esm2022/lib/modules/shared/sky-lookup-resources.module.mjs +71 -0
- package/esm2022/testing/autocomplete/autocomplete-harness.mjs +155 -0
- package/esm2022/testing/autocomplete/autocomplete-input-harness.mjs +63 -0
- package/esm2022/testing/autocomplete/autocomplete-search-result-harness.mjs +44 -0
- package/esm2022/testing/country-field/country-field-fixture.mjs +118 -0
- package/{esm2020 → esm2022}/testing/country-field/country-field-testing.module.mjs +5 -5
- package/esm2022/testing/lookup/lookup-harness.mjs +76 -0
- package/{esm2020 → esm2022}/testing/search/search-fixture.mjs +18 -19
- package/esm2022/testing/search/search-harness.mjs +80 -0
- package/{esm2020 → esm2022}/testing/search/search-testing.module.mjs +5 -5
- package/esm2022/testing/selection-modal/selection-modal-harness.mjs +122 -0
- package/{fesm2020 → fesm2022}/skyux-lookup-testing.mjs +171 -187
- package/{fesm2020 → fesm2022}/skyux-lookup-testing.mjs.map +1 -1
- package/fesm2022/skyux-lookup.mjs +3707 -0
- package/{fesm2015 → fesm2022}/skyux-lookup.mjs.map +1 -1
- package/lib/modules/autocomplete/autocomplete-input.directive.d.ts +1 -1
- package/lib/modules/autocomplete/autocomplete.component.d.ts +1 -1
- package/lib/modules/country-field/country-field.component.d.ts +1 -1
- package/lib/modules/lookup/lookup-autocomplete-adapter.d.ts +1 -1
- package/lib/modules/lookup/lookup.component.d.ts +1 -1
- package/lib/modules/search/search.component.d.ts +1 -1
- package/package.json +23 -31
- package/esm2020/lib/modules/autocomplete/autocomplete-adapter.service.mjs +0 -64
- package/esm2020/lib/modules/autocomplete/autocomplete-input.directive.mjs +0 -235
- package/esm2020/lib/modules/autocomplete/autocomplete.component.mjs +0 -775
- package/esm2020/lib/modules/country-field/country-field.component.mjs +0 -433
- package/esm2020/lib/modules/lookup/lookup-autocomplete-adapter.mjs +0 -115
- package/esm2020/lib/modules/lookup/lookup-show-more-modal.component.mjs +0 -271
- package/esm2020/lib/modules/search/search-adapter.service.mjs +0 -46
- package/esm2020/lib/modules/search/search.component.mjs +0 -279
- package/esm2020/lib/modules/selection-modal/selection-modal.component.mjs +0 -199
- package/esm2020/lib/modules/selection-modal/selection-modal.service.mjs +0 -92
- package/esm2020/lib/modules/selection-modal/types/selection-modal-instance.mjs +0 -48
- package/esm2020/lib/modules/shared/sky-lookup-resources.module.mjs +0 -71
- package/esm2020/testing/autocomplete/autocomplete-harness.mjs +0 -161
- package/esm2020/testing/autocomplete/autocomplete-input-harness.mjs +0 -63
- package/esm2020/testing/autocomplete/autocomplete-search-result-harness.mjs +0 -44
- package/esm2020/testing/country-field/country-field-fixture.mjs +0 -114
- package/esm2020/testing/lookup/lookup-harness.mjs +0 -82
- package/esm2020/testing/search/search-harness.mjs +0 -86
- package/esm2020/testing/selection-modal/selection-modal-harness.mjs +0 -128
- package/fesm2015/skyux-lookup-testing.mjs +0 -980
- package/fesm2015/skyux-lookup-testing.mjs.map +0 -1
- package/fesm2015/skyux-lookup.mjs +0 -3642
- package/fesm2020/skyux-lookup.mjs +0 -3625
- package/fesm2020/skyux-lookup.mjs.map +0 -1
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/autocomplete-default-search-function.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-default-search-function-options.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-input-text-change.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-message-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-message.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-async-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-async-function.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-async-result-display-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-async-result.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-context.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-function-filter.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-function-response.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-function.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-selection-change.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-show-more-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/country-field/types/country-field-context-token.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/country-field/types/country-field-context.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/country-field/types/country.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-add-click-callback-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-add-click-event-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-select-mode-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-select-mode.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-config.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-custom-picker-context.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-custom-picker.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-native-picker-config.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-native-picker-context.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-add-click-callback-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-add-click-event-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-close-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-context.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-open-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-result.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-search-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-search-result.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/shared/sky-lookup-string-utils.mjs +0 -0
- /package/{esm2020 → esm2022}/skyux-lookup.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/autocomplete/autocomplete-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/autocomplete/autocomplete-search-result-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/lookup/lookup-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/lookup/lookup-selection-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/lookup/lookup-selection-harness.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/lookup/lookup-selections-list-harness.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/lookup/lookup-show-more-picker-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/lookup/lookup-show-more-picker-harness.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/lookup/lookup-show-more-picker-search-result-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/lookup/lookup-show-more-picker-search-result-harness.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/search/search-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/selection-modal/selection-modal-search-result-harness-filters.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/selection-modal/selection-modal-search-result-harness.mjs +0 -0
- /package/{esm2020 → esm2022}/testing/skyux-lookup-testing.mjs +0 -0
|
@@ -1,3625 +0,0 @@
|
|
|
1
|
-
import * as i4 from '@angular/common';
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
3
|
-
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, forwardRef, Directive, Input, Pipe, Injectable, EventEmitter, TemplateRef, ElementRef, Component, ChangeDetectionStrategy, Optional, Inject, Output, ContentChild, ViewChild, InjectionToken, inject, ViewEncapsulation, Self } from '@angular/core';
|
|
5
|
-
import * as i5$1 from '@angular/forms';
|
|
6
|
-
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgModel, UntypedFormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
-
import * as i1 from '@skyux/core';
|
|
8
|
-
import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyIdModule, SkyNumericModule, SkyOverlayModule, SkyMediaBreakpoints, SkyViewkeeperModule } from '@skyux/core';
|
|
9
|
-
import * as i6 from '@skyux/indicators';
|
|
10
|
-
import { SkyTextHighlightModule, SkyIconModule, SkyWaitModule, SkyTokensMessageType, SkyTokensModule } from '@skyux/indicators';
|
|
11
|
-
import * as i8 from '@skyux/theme';
|
|
12
|
-
import { SkyThemeModule } from '@skyux/theme';
|
|
13
|
-
import * as i4$1 from '@skyux/i18n';
|
|
14
|
-
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
15
|
-
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
16
|
-
import { Subject, fromEvent, of, from } from 'rxjs';
|
|
17
|
-
import { takeUntil, debounceTime, switchMap, delay, take, map, distinctUntilChanged } from 'rxjs/operators';
|
|
18
|
-
import * as i5 from '@skyux/forms';
|
|
19
|
-
import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
|
|
20
|
-
import 'intl-tel-input';
|
|
21
|
-
import * as i10 from '@skyux/layout';
|
|
22
|
-
import { SkyToolbarModule } from '@skyux/layout';
|
|
23
|
-
import * as i7 from '@skyux/lists';
|
|
24
|
-
import { SkyInfiniteScrollModule, SkyRepeaterModule } from '@skyux/lists';
|
|
25
|
-
import * as i1$1 from '@skyux/modals';
|
|
26
|
-
import { SkyModalModule } from '@skyux/modals';
|
|
27
|
-
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
31
|
-
* The contents of this file were automatically generated by
|
|
32
|
-
* the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-lookup' schematic.
|
|
33
|
-
* To update this file, simply rerun the command.
|
|
34
|
-
*/
|
|
35
|
-
const RESOURCES = {
|
|
36
|
-
'EN-US': {
|
|
37
|
-
skyux_autocomplete_add: { message: 'New' },
|
|
38
|
-
skyux_autocomplete_no_results: { message: 'No matches found' },
|
|
39
|
-
skyux_autocomplete_show_all: { message: 'Show all' },
|
|
40
|
-
skyux_autocomplete_show_all_count: { message: 'Show all {0}' },
|
|
41
|
-
skyux_autocomplete_show_matches_count: { message: 'Show matches ({0})' },
|
|
42
|
-
skyux_country_field_search_placeholder: { message: 'Search for a country' },
|
|
43
|
-
skyux_lookup_search_button_show_more: {
|
|
44
|
-
message: 'Show all search results',
|
|
45
|
-
},
|
|
46
|
-
skyux_lookup_show_more_add: { message: 'New' },
|
|
47
|
-
skyux_lookup_show_more_select_all_button_title: { message: 'Select all' },
|
|
48
|
-
skyux_lookup_show_more_clear_all_button_title: { message: 'Clear all' },
|
|
49
|
-
skyux_lookup_show_more_show_selected_option_title: {
|
|
50
|
-
message: 'Show only selected items',
|
|
51
|
-
},
|
|
52
|
-
skyux_lookup_show_more_cancel: { message: 'Cancel' },
|
|
53
|
-
skyux_lookup_show_more_modal_title_single: { message: 'Select an option' },
|
|
54
|
-
skyux_lookup_show_more_modal_title_multiple: { message: 'Select options' },
|
|
55
|
-
skyux_lookup_show_more_no_results: { message: 'No matches found' },
|
|
56
|
-
skyux_lookup_show_more_select: { message: 'Select' },
|
|
57
|
-
skyux_lookup_tokens_summary: { message: '{0} items selected' },
|
|
58
|
-
skyux_search_dismiss: { message: 'Dismiss search' },
|
|
59
|
-
skyux_search_label: { message: 'Search items' },
|
|
60
|
-
skyux_search_open: { message: 'Open search' },
|
|
61
|
-
skyux_search_placeholder: { message: 'Find in this list' },
|
|
62
|
-
},
|
|
63
|
-
};
|
|
64
|
-
class SkyLookupResourcesProvider {
|
|
65
|
-
getString(localeInfo, name) {
|
|
66
|
-
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* Import into any component library module that needs to use resource strings.
|
|
71
|
-
*/
|
|
72
|
-
class SkyLookupResourcesModule {
|
|
73
|
-
}
|
|
74
|
-
SkyLookupResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
75
|
-
SkyLookupResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupResourcesModule, exports: [SkyI18nModule] });
|
|
76
|
-
SkyLookupResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupResourcesModule, providers: [
|
|
77
|
-
{
|
|
78
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
79
|
-
useClass: SkyLookupResourcesProvider,
|
|
80
|
-
multi: true,
|
|
81
|
-
},
|
|
82
|
-
], imports: [SkyI18nModule] });
|
|
83
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupResourcesModule, decorators: [{
|
|
84
|
-
type: NgModule,
|
|
85
|
-
args: [{
|
|
86
|
-
exports: [SkyI18nModule],
|
|
87
|
-
providers: [
|
|
88
|
-
{
|
|
89
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
90
|
-
useClass: SkyLookupResourcesProvider,
|
|
91
|
-
multi: true,
|
|
92
|
-
},
|
|
93
|
-
],
|
|
94
|
-
}]
|
|
95
|
-
}] });
|
|
96
|
-
|
|
97
|
-
var _SkyAutocompleteInputDirective_instances, _SkyAutocompleteInputDirective_blur, _SkyAutocompleteInputDirective_blurObs, _SkyAutocompleteInputDirective_control, _SkyAutocompleteInputDirective_elementRef, _SkyAutocompleteInputDirective_focus, _SkyAutocompleteInputDirective_focusObs, _SkyAutocompleteInputDirective_isFirstChange, _SkyAutocompleteInputDirective_ngUnsubscribe, _SkyAutocompleteInputDirective_renderer, _SkyAutocompleteInputDirective_textChanges, _SkyAutocompleteInputDirective_textChangesObs, _SkyAutocompleteInputDirective__autocompleteAttribute, _SkyAutocompleteInputDirective__disabled, _SkyAutocompleteInputDirective__displayWith, _SkyAutocompleteInputDirective__value, _SkyAutocompleteInputDirective_setAttributes, _SkyAutocompleteInputDirective_getValueByKey;
|
|
98
|
-
const SKY_AUTOCOMPLETE_VALUE_ACCESSOR = {
|
|
99
|
-
provide: NG_VALUE_ACCESSOR,
|
|
100
|
-
useExisting: forwardRef(() => SkyAutocompleteInputDirective),
|
|
101
|
-
multi: true,
|
|
102
|
-
};
|
|
103
|
-
const SKY_AUTOCOMPLETE_VALIDATOR = {
|
|
104
|
-
provide: NG_VALIDATORS,
|
|
105
|
-
useExisting: forwardRef(() => SkyAutocompleteInputDirective),
|
|
106
|
-
multi: true,
|
|
107
|
-
};
|
|
108
|
-
class SkyAutocompleteInputDirective {
|
|
109
|
-
/**
|
|
110
|
-
* The value for the `autocomplete` attribute on the form input.
|
|
111
|
-
* @default "off"
|
|
112
|
-
*/
|
|
113
|
-
set autocompleteAttribute(value) {
|
|
114
|
-
if (!value) {
|
|
115
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, 'off', "f");
|
|
116
|
-
}
|
|
117
|
-
else {
|
|
118
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, value, "f");
|
|
119
|
-
}
|
|
120
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'autocomplete', __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, "f"));
|
|
121
|
-
}
|
|
122
|
-
get autocompleteAttribute() {
|
|
123
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, "f") || 'off';
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Whether to disable the autocomplete field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
|
|
127
|
-
* To set the disabled state on reactive forms, use the `FormControl` instead.
|
|
128
|
-
* @default false
|
|
129
|
-
*/
|
|
130
|
-
set disabled(value) {
|
|
131
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__disabled, value ?? false, "f");
|
|
132
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'disabled', value);
|
|
133
|
-
}
|
|
134
|
-
get disabled() {
|
|
135
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__disabled, "f");
|
|
136
|
-
}
|
|
137
|
-
get blur() {
|
|
138
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blurObs, "f");
|
|
139
|
-
}
|
|
140
|
-
get displayWith() {
|
|
141
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__displayWith, "f");
|
|
142
|
-
}
|
|
143
|
-
set displayWith(value) {
|
|
144
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__displayWith, value, "f");
|
|
145
|
-
this.inputTextValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
|
|
146
|
-
}
|
|
147
|
-
get focus() {
|
|
148
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_focusObs, "f");
|
|
149
|
-
}
|
|
150
|
-
get inputTextValue() {
|
|
151
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value;
|
|
152
|
-
}
|
|
153
|
-
set inputTextValue(value) {
|
|
154
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value = value || '';
|
|
155
|
-
}
|
|
156
|
-
get textChanges() {
|
|
157
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChangesObs, "f");
|
|
158
|
-
}
|
|
159
|
-
get value() {
|
|
160
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f");
|
|
161
|
-
}
|
|
162
|
-
set value(value) {
|
|
163
|
-
const isNewValue = value !== __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f");
|
|
164
|
-
/* istanbul ignore else */
|
|
165
|
-
if (isNewValue) {
|
|
166
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__value, value, "f");
|
|
167
|
-
this.inputTextValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
|
|
168
|
-
this.onChange(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f"));
|
|
169
|
-
// Do not mark the field as "dirty"
|
|
170
|
-
// if the field has been initialized with a value.
|
|
171
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_isFirstChange, "f") && __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_control, "f")) {
|
|
172
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_control, "f").markAsPristine();
|
|
173
|
-
}
|
|
174
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_isFirstChange, "f") && __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f")) {
|
|
175
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_isFirstChange, false, "f");
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
constructor(elementRef, renderer) {
|
|
180
|
-
_SkyAutocompleteInputDirective_instances.add(this);
|
|
181
|
-
_SkyAutocompleteInputDirective_blur.set(this, void 0);
|
|
182
|
-
_SkyAutocompleteInputDirective_blurObs.set(this, void 0);
|
|
183
|
-
_SkyAutocompleteInputDirective_control.set(this, void 0);
|
|
184
|
-
_SkyAutocompleteInputDirective_elementRef.set(this, void 0);
|
|
185
|
-
_SkyAutocompleteInputDirective_focus.set(this, void 0);
|
|
186
|
-
_SkyAutocompleteInputDirective_focusObs.set(this, void 0);
|
|
187
|
-
_SkyAutocompleteInputDirective_isFirstChange.set(this, true);
|
|
188
|
-
_SkyAutocompleteInputDirective_ngUnsubscribe.set(this, new Subject());
|
|
189
|
-
_SkyAutocompleteInputDirective_renderer.set(this, void 0);
|
|
190
|
-
_SkyAutocompleteInputDirective_textChanges.set(this, void 0);
|
|
191
|
-
_SkyAutocompleteInputDirective_textChangesObs.set(this, void 0);
|
|
192
|
-
_SkyAutocompleteInputDirective__autocompleteAttribute.set(this, void 0);
|
|
193
|
-
_SkyAutocompleteInputDirective__disabled.set(this, false);
|
|
194
|
-
_SkyAutocompleteInputDirective__displayWith.set(this, '');
|
|
195
|
-
_SkyAutocompleteInputDirective__value.set(this, void 0);
|
|
196
|
-
// istanbul ignore next
|
|
197
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
198
|
-
this.onValidatorChange = () => { };
|
|
199
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_elementRef, elementRef, "f");
|
|
200
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_renderer, renderer, "f");
|
|
201
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_blur, new Subject(), "f");
|
|
202
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_focus, new Subject(), "f");
|
|
203
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_textChanges, new Subject(), "f");
|
|
204
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_blurObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blur, "f").asObservable(), "f");
|
|
205
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_focusObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_focus, "f").asObservable(), "f");
|
|
206
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_textChangesObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").asObservable(), "f");
|
|
207
|
-
}
|
|
208
|
-
ngOnInit() {
|
|
209
|
-
const element = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement;
|
|
210
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_setAttributes).call(this, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f"));
|
|
211
|
-
fromEvent(element, 'input')
|
|
212
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
|
|
213
|
-
.subscribe(() => {
|
|
214
|
-
if (!this.disabled) {
|
|
215
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").next({
|
|
216
|
-
value: __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value,
|
|
217
|
-
});
|
|
218
|
-
}
|
|
219
|
-
});
|
|
220
|
-
fromEvent(element, 'blur')
|
|
221
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
|
|
222
|
-
.subscribe(() => {
|
|
223
|
-
if (!this.disabled) {
|
|
224
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blur, "f").next();
|
|
225
|
-
}
|
|
226
|
-
});
|
|
227
|
-
fromEvent(element, 'focus')
|
|
228
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
|
|
229
|
-
.subscribe(() => {
|
|
230
|
-
if (!this.disabled) {
|
|
231
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_focus, "f").next();
|
|
232
|
-
}
|
|
233
|
-
});
|
|
234
|
-
fromEvent(element, 'change')
|
|
235
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
|
|
236
|
-
.subscribe(() => {
|
|
237
|
-
/* istanbul ignore else */
|
|
238
|
-
if (!this.disabled) {
|
|
239
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_isFirstChange, false, "f");
|
|
240
|
-
}
|
|
241
|
-
});
|
|
242
|
-
}
|
|
243
|
-
ngOnDestroy() {
|
|
244
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blur, "f").complete();
|
|
245
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").complete();
|
|
246
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f").next();
|
|
247
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f").complete();
|
|
248
|
-
}
|
|
249
|
-
writeValue(value) {
|
|
250
|
-
this.value = value;
|
|
251
|
-
}
|
|
252
|
-
registerOnChange(fn) {
|
|
253
|
-
this.onChange = fn;
|
|
254
|
-
}
|
|
255
|
-
registerOnTouched(fn) {
|
|
256
|
-
this.onTouched = fn;
|
|
257
|
-
}
|
|
258
|
-
registerOnValidatorChange(fn) {
|
|
259
|
-
this.onValidatorChange = fn;
|
|
260
|
-
}
|
|
261
|
-
restoreInputTextValueToPreviousState() {
|
|
262
|
-
const modelValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
|
|
263
|
-
// If the search field contains text, make sure that the value
|
|
264
|
-
// matches the selected descriptor key.
|
|
265
|
-
if (this.inputTextValue !== modelValue) {
|
|
266
|
-
this.inputTextValue = modelValue;
|
|
267
|
-
}
|
|
268
|
-
this.onTouched();
|
|
269
|
-
}
|
|
270
|
-
setDisabledState(disabled) {
|
|
271
|
-
this.disabled = disabled;
|
|
272
|
-
}
|
|
273
|
-
validate(control) {
|
|
274
|
-
if (!__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_control, "f")) {
|
|
275
|
-
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_control, control, "f");
|
|
276
|
-
}
|
|
277
|
-
return null;
|
|
278
|
-
}
|
|
279
|
-
// See: https://www.w3.org/TR/wai-aria-practices/#kbd_focus_activedescendant
|
|
280
|
-
setActiveDescendant(descendantId) {
|
|
281
|
-
if (descendantId) {
|
|
282
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'aria-activedescendant', descendantId);
|
|
283
|
-
}
|
|
284
|
-
else {
|
|
285
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").removeAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'aria-activedescendant');
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
setAriaOwns(overlayId) {
|
|
289
|
-
if (overlayId) {
|
|
290
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'aria-owns', overlayId);
|
|
291
|
-
}
|
|
292
|
-
else {
|
|
293
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").removeAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'aria-owns');
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
// Angular automatically constructs these methods.
|
|
297
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
298
|
-
onChange(value) { }
|
|
299
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
300
|
-
onTouched() { }
|
|
301
|
-
}
|
|
302
|
-
_SkyAutocompleteInputDirective_blur = new WeakMap(), _SkyAutocompleteInputDirective_blurObs = new WeakMap(), _SkyAutocompleteInputDirective_control = new WeakMap(), _SkyAutocompleteInputDirective_elementRef = new WeakMap(), _SkyAutocompleteInputDirective_focus = new WeakMap(), _SkyAutocompleteInputDirective_focusObs = new WeakMap(), _SkyAutocompleteInputDirective_isFirstChange = new WeakMap(), _SkyAutocompleteInputDirective_ngUnsubscribe = new WeakMap(), _SkyAutocompleteInputDirective_renderer = new WeakMap(), _SkyAutocompleteInputDirective_textChanges = new WeakMap(), _SkyAutocompleteInputDirective_textChangesObs = new WeakMap(), _SkyAutocompleteInputDirective__autocompleteAttribute = new WeakMap(), _SkyAutocompleteInputDirective__disabled = new WeakMap(), _SkyAutocompleteInputDirective__displayWith = new WeakMap(), _SkyAutocompleteInputDirective__value = new WeakMap(), _SkyAutocompleteInputDirective_instances = new WeakSet(), _SkyAutocompleteInputDirective_setAttributes = function _SkyAutocompleteInputDirective_setAttributes(elementRef) {
|
|
303
|
-
const element = elementRef.nativeElement;
|
|
304
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocomplete', this.autocompleteAttribute);
|
|
305
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocapitalize', 'none');
|
|
306
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocorrect', 'off');
|
|
307
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'spellcheck', 'false');
|
|
308
|
-
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").addClass(element, 'sky-form-control');
|
|
309
|
-
}, _SkyAutocompleteInputDirective_getValueByKey = function _SkyAutocompleteInputDirective_getValueByKey() {
|
|
310
|
-
return this.value ? this.value[this.displayWith] : undefined;
|
|
311
|
-
};
|
|
312
|
-
SkyAutocompleteInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
313
|
-
SkyAutocompleteInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: { autocompleteAttribute: "autocompleteAttribute", disabled: "disabled" }, providers: [SKY_AUTOCOMPLETE_VALUE_ACCESSOR, SKY_AUTOCOMPLETE_VALIDATOR], ngImport: i0 });
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteInputDirective, decorators: [{
|
|
315
|
-
type: Directive,
|
|
316
|
-
args: [{
|
|
317
|
-
selector: 'input[skyAutocomplete], textarea[skyAutocomplete]',
|
|
318
|
-
providers: [SKY_AUTOCOMPLETE_VALUE_ACCESSOR, SKY_AUTOCOMPLETE_VALIDATOR],
|
|
319
|
-
}]
|
|
320
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { autocompleteAttribute: [{
|
|
321
|
-
type: Input
|
|
322
|
-
}], disabled: [{
|
|
323
|
-
type: Input
|
|
324
|
-
}] } });
|
|
325
|
-
|
|
326
|
-
/**
|
|
327
|
-
* @internal
|
|
328
|
-
*/
|
|
329
|
-
class SkyAutocompleteSearchAsyncDisabledPipe {
|
|
330
|
-
transform(searchAsync, searchAsyncDisabled) {
|
|
331
|
-
return searchAsyncDisabled || searchAsync.observers.length === 0;
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
SkyAutocompleteSearchAsyncDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteSearchAsyncDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
335
|
-
SkyAutocompleteSearchAsyncDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" });
|
|
336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteSearchAsyncDisabledPipe, decorators: [{
|
|
337
|
-
type: Pipe,
|
|
338
|
-
args: [{
|
|
339
|
-
name: 'skyAutocompleteSearchAsyncDisabled',
|
|
340
|
-
}]
|
|
341
|
-
}] });
|
|
342
|
-
|
|
343
|
-
/**
|
|
344
|
-
* Removes diacritical characters from strings and replaces them with their normalized equivalent.
|
|
345
|
-
* For example: è becomes e, Å becomes A.
|
|
346
|
-
*/
|
|
347
|
-
function normalizeDiacritics(value) {
|
|
348
|
-
return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
var _SkyAutocompleteAdapterService_coreAdapterService, _SkyAutocompleteAdapterService_renderer;
|
|
352
|
-
/**
|
|
353
|
-
* @internal
|
|
354
|
-
*/
|
|
355
|
-
class SkyAutocompleteAdapterService {
|
|
356
|
-
constructor(coreAdapterService, rendererFactory) {
|
|
357
|
-
_SkyAutocompleteAdapterService_coreAdapterService.set(this, void 0);
|
|
358
|
-
_SkyAutocompleteAdapterService_renderer.set(this, void 0);
|
|
359
|
-
__classPrivateFieldSet(this, _SkyAutocompleteAdapterService_coreAdapterService, coreAdapterService, "f");
|
|
360
|
-
__classPrivateFieldSet(this, _SkyAutocompleteAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
|
|
361
|
-
}
|
|
362
|
-
/**
|
|
363
|
-
* Adds the className for the provided element.
|
|
364
|
-
*/
|
|
365
|
-
addCSSClass(element, className) {
|
|
366
|
-
/* Sanity check */
|
|
367
|
-
/* istanbul ignore else */
|
|
368
|
-
if (element) {
|
|
369
|
-
__classPrivateFieldGet(this, _SkyAutocompleteAdapterService_renderer, "f").addClass(element, className);
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
getOverlayFocusableElements(overlay) {
|
|
373
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteAdapterService_coreAdapterService, "f").getFocusableChildren(
|
|
374
|
-
/* Sanity check - calling function also has null check */
|
|
375
|
-
/* istanbul ignore next */
|
|
376
|
-
overlay?.componentRef.location.nativeElement, { ignoreTabIndex: true });
|
|
377
|
-
}
|
|
378
|
-
/**
|
|
379
|
-
* Removes the className for the provided element.
|
|
380
|
-
*/
|
|
381
|
-
removeCSSClass(element, className) {
|
|
382
|
-
/* Sanity check */
|
|
383
|
-
/* istanbul ignore else */
|
|
384
|
-
if (element) {
|
|
385
|
-
__classPrivateFieldGet(this, _SkyAutocompleteAdapterService_renderer, "f").removeClass(element, className);
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
setDropdownWidth(elementRef, dropdownRef, isInputBox) {
|
|
389
|
-
const parentElement = isInputBox
|
|
390
|
-
? elementRef.nativeElement.closest('.sky-input-box')
|
|
391
|
-
: elementRef.nativeElement;
|
|
392
|
-
if (parentElement) {
|
|
393
|
-
const width = parentElement.getBoundingClientRect().width;
|
|
394
|
-
__classPrivateFieldGet(this, _SkyAutocompleteAdapterService_renderer, "f").setStyle(dropdownRef.nativeElement, 'width', `${width}px`);
|
|
395
|
-
}
|
|
396
|
-
}
|
|
397
|
-
/**
|
|
398
|
-
* Sets the `tabIndex` of the `element` to the provided `tabIndex`.
|
|
399
|
-
*/
|
|
400
|
-
setTabIndex(element, tabIndex) {
|
|
401
|
-
element.tabIndex = tabIndex;
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
_SkyAutocompleteAdapterService_coreAdapterService = new WeakMap(), _SkyAutocompleteAdapterService_renderer = new WeakMap();
|
|
405
|
-
SkyAutocompleteAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteAdapterService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
406
|
-
SkyAutocompleteAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteAdapterService });
|
|
407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteAdapterService, decorators: [{
|
|
408
|
-
type: Injectable
|
|
409
|
-
}], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
|
|
410
|
-
|
|
411
|
-
function skyAutocompleteDefaultSearchFunction(options) {
|
|
412
|
-
const filterData = function (searchText, data, args) {
|
|
413
|
-
return data.filter((item) => {
|
|
414
|
-
if (!options.searchFilters || !options.searchFilters.length) {
|
|
415
|
-
return true;
|
|
416
|
-
}
|
|
417
|
-
// Find the first failing filter (we can skip the others if one fails).
|
|
418
|
-
const failedFilter = options.searchFilters.find((filter) => {
|
|
419
|
-
return !filter.call({}, searchText, item, args);
|
|
420
|
-
});
|
|
421
|
-
return failedFilter === undefined;
|
|
422
|
-
});
|
|
423
|
-
};
|
|
424
|
-
const search = function (searchText, data, args) {
|
|
425
|
-
const results = [];
|
|
426
|
-
/* Sanity check - autocomplete will not call search with empty search text */
|
|
427
|
-
/* istanbul ignore if */
|
|
428
|
-
if (!searchText) {
|
|
429
|
-
return results;
|
|
430
|
-
}
|
|
431
|
-
const searchTextNormalized = normalizeDiacritics(searchText).toUpperCase();
|
|
432
|
-
const filteredData = filterData(searchText, data, args);
|
|
433
|
-
for (let i = 0, n = filteredData.length; i < n; i++) {
|
|
434
|
-
const result = filteredData[i];
|
|
435
|
-
const isMatch = options.propertiesToSearch.find((property) => {
|
|
436
|
-
let value = (result[property] || '').toString();
|
|
437
|
-
value = normalizeDiacritics(value).toUpperCase();
|
|
438
|
-
return value.indexOf(searchTextNormalized) > -1;
|
|
439
|
-
});
|
|
440
|
-
if (isMatch) {
|
|
441
|
-
results.push(result);
|
|
442
|
-
}
|
|
443
|
-
}
|
|
444
|
-
return results;
|
|
445
|
-
};
|
|
446
|
-
return search;
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
/**
|
|
450
|
-
* @internal
|
|
451
|
-
*/
|
|
452
|
-
var SkyAutocompleteMessageType;
|
|
453
|
-
(function (SkyAutocompleteMessageType) {
|
|
454
|
-
/**
|
|
455
|
-
* Closes the dropdown.
|
|
456
|
-
*/
|
|
457
|
-
SkyAutocompleteMessageType[SkyAutocompleteMessageType["CloseDropdown"] = 0] = "CloseDropdown";
|
|
458
|
-
/**
|
|
459
|
-
* Repositions the dropdown.
|
|
460
|
-
*/
|
|
461
|
-
SkyAutocompleteMessageType[SkyAutocompleteMessageType["RepositionDropdown"] = 1] = "RepositionDropdown";
|
|
462
|
-
})(SkyAutocompleteMessageType || (SkyAutocompleteMessageType = {}));
|
|
463
|
-
|
|
464
|
-
var _SkyAutocompleteComponent_instances, _SkyAutocompleteComponent_activeElementIndex, _SkyAutocompleteComponent_adapterService, _SkyAutocompleteComponent_affixer, _SkyAutocompleteComponent_affixService, _SkyAutocompleteComponent_changeDetector, _SkyAutocompleteComponent_elementRef, _SkyAutocompleteComponent_hasFocus, _SkyAutocompleteComponent_inputBoxHostSvc, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, _SkyAutocompleteComponent_messageStreamSub, _SkyAutocompleteComponent_ngUnsubscribe, _SkyAutocompleteComponent_overlay, _SkyAutocompleteComponent_overlayService, _SkyAutocompleteComponent_overlayFocusableElements, _SkyAutocompleteComponent_currentSearchSub, _SkyAutocompleteComponent_zIndex, _SkyAutocompleteComponent__data, _SkyAutocompleteComponent__debounceTime, _SkyAutocompleteComponent__descriptorProperty, _SkyAutocompleteComponent__highlightText, _SkyAutocompleteComponent__inputDirective, _SkyAutocompleteComponent__messageStream, _SkyAutocompleteComponent__propertiesToSearch, _SkyAutocompleteComponent__resultsRef, _SkyAutocompleteComponent__search, _SkyAutocompleteComponent__searchFilters, _SkyAutocompleteComponent__searchResults, _SkyAutocompleteComponent__searchResultsLimit, _SkyAutocompleteComponent__searchTextMinimumCharacters, _SkyAutocompleteComponent_searchTextChanged, _SkyAutocompleteComponent_performSearch, _SkyAutocompleteComponent_cancelCurrentSearch, _SkyAutocompleteComponent_getHighlightText, _SkyAutocompleteComponent_selectSearchResultById, _SkyAutocompleteComponent_openDropdown, _SkyAutocompleteComponent_closeDropdown, _SkyAutocompleteComponent_setActiveDescendant, _SkyAutocompleteComponent_removeActiveDescendant, _SkyAutocompleteComponent_updateAriaOwns, _SkyAutocompleteComponent_resetSearch, _SkyAutocompleteComponent_addInputEventListeners, _SkyAutocompleteComponent_destroyOverlay, _SkyAutocompleteComponent_createAffixer, _SkyAutocompleteComponent_destroyAffixer, _SkyAutocompleteComponent_initMessageStream, _SkyAutocompleteComponent_initOverlayFocusableElements, _SkyAutocompleteComponent_getActiveElement, _SkyAutocompleteComponent_removeFocusedClass, _SkyAutocompleteComponent_addFocusedClass, _SkyAutocompleteComponent_updateDefaultSearchOptions;
|
|
465
|
-
let uniqueId$1 = 0;
|
|
466
|
-
class SkyAutocompleteComponent {
|
|
467
|
-
/**
|
|
468
|
-
* The static data source for the autocomplete component to search
|
|
469
|
-
* when users enter text. For a dynamic data source such as an array that
|
|
470
|
-
* changes due to server calls, use `search` or `searchAsync` instead.
|
|
471
|
-
*/
|
|
472
|
-
set data(value) {
|
|
473
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__data, value ?? [], "f");
|
|
474
|
-
}
|
|
475
|
-
get data() {
|
|
476
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__data, "f");
|
|
477
|
-
}
|
|
478
|
-
/**
|
|
479
|
-
* How many milliseconds to wait before searching while users
|
|
480
|
-
* enter text in the autocomplete field.
|
|
481
|
-
* @default 0
|
|
482
|
-
*/
|
|
483
|
-
set debounceTime(value) {
|
|
484
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__debounceTime, value ?? 0, "f");
|
|
485
|
-
}
|
|
486
|
-
get debounceTime() {
|
|
487
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__debounceTime, "f");
|
|
488
|
-
}
|
|
489
|
-
/**
|
|
490
|
-
* The object property to display in the text input after users
|
|
491
|
-
* select an item in the dropdown list.
|
|
492
|
-
* @default "name"
|
|
493
|
-
*/
|
|
494
|
-
set descriptorProperty(value) {
|
|
495
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__descriptorProperty, value || 'name', "f");
|
|
496
|
-
}
|
|
497
|
-
get descriptorProperty() {
|
|
498
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__descriptorProperty, "f");
|
|
499
|
-
}
|
|
500
|
-
/**
|
|
501
|
-
* The observable of `SkyAutocompleteMessage` that can close the dropdown.
|
|
502
|
-
* @internal
|
|
503
|
-
*/
|
|
504
|
-
set messageStream(value) {
|
|
505
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__messageStream, value ?? new Subject(), "f");
|
|
506
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initMessageStream).call(this);
|
|
507
|
-
}
|
|
508
|
-
get messageStream() {
|
|
509
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__messageStream, "f");
|
|
510
|
-
}
|
|
511
|
-
/**
|
|
512
|
-
* The object properties to search.
|
|
513
|
-
* @default ["name"]
|
|
514
|
-
* @deprecated We recommend against using this property. To search specific properties, use the `searchAsync` event instead.
|
|
515
|
-
*/
|
|
516
|
-
set propertiesToSearch(value) {
|
|
517
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__propertiesToSearch, value ?? ['name'], "f");
|
|
518
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_updateDefaultSearchOptions).call(this);
|
|
519
|
-
}
|
|
520
|
-
get propertiesToSearch() {
|
|
521
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__propertiesToSearch, "f");
|
|
522
|
-
}
|
|
523
|
-
/**
|
|
524
|
-
* The function that dynamically manages the data source when users
|
|
525
|
-
* change the text in the autocomplete field. The search function must return
|
|
526
|
-
* an array or a promise of an array. The `search` property is particularly
|
|
527
|
-
* useful when the data source does not live in the source code.
|
|
528
|
-
* @deprecated We recommend against using this property. To call a remote data source, use the `searchAsync` event instead.
|
|
529
|
-
*/
|
|
530
|
-
set search(value) {
|
|
531
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__search, value, "f");
|
|
532
|
-
this.searchOrDefault =
|
|
533
|
-
value ||
|
|
534
|
-
skyAutocompleteDefaultSearchFunction({
|
|
535
|
-
propertiesToSearch: this.propertiesToSearch,
|
|
536
|
-
searchFilters: this.searchFilters,
|
|
537
|
-
});
|
|
538
|
-
}
|
|
539
|
-
get search() {
|
|
540
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__search, "f");
|
|
541
|
-
}
|
|
542
|
-
/**
|
|
543
|
-
* The minimum number of characters that users must enter before
|
|
544
|
-
* the autocomplete component searches the data source and displays search
|
|
545
|
-
* results in the dropdown list.
|
|
546
|
-
* @default 1
|
|
547
|
-
*/
|
|
548
|
-
set searchTextMinimumCharacters(value) {
|
|
549
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, value && value > 0 ? value : 1, "f");
|
|
550
|
-
}
|
|
551
|
-
get searchTextMinimumCharacters() {
|
|
552
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, "f");
|
|
553
|
-
}
|
|
554
|
-
/**
|
|
555
|
-
* The array of functions to call against each search result in order
|
|
556
|
-
* to filter the search results when using the default search function. When
|
|
557
|
-
* using the `search` property to specify a custom search function, you must
|
|
558
|
-
* manually apply filters inside that function. The function must return `true`
|
|
559
|
-
* or `false` for each result to indicate whether to display it in the dropdown list.
|
|
560
|
-
* @deprecated We recommend against using this property. To filter results, use the `searchAsync` event instead.
|
|
561
|
-
*/
|
|
562
|
-
set searchFilters(value) {
|
|
563
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__searchFilters, value, "f");
|
|
564
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_updateDefaultSearchOptions).call(this);
|
|
565
|
-
}
|
|
566
|
-
get searchFilters() {
|
|
567
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchFilters, "f");
|
|
568
|
-
}
|
|
569
|
-
/**
|
|
570
|
-
* The maximum number of search results to display in the dropdown list.
|
|
571
|
-
* By default, the component displays all matching results.
|
|
572
|
-
*/
|
|
573
|
-
set searchResultsLimit(value) {
|
|
574
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__searchResultsLimit, value || 0, "f");
|
|
575
|
-
}
|
|
576
|
-
get searchResultsLimit() {
|
|
577
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultsLimit, "f");
|
|
578
|
-
}
|
|
579
|
-
//#endregion
|
|
580
|
-
//#region template_properties
|
|
581
|
-
get searchResults() {
|
|
582
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResults, "f") || [];
|
|
583
|
-
}
|
|
584
|
-
set searchResults(value) {
|
|
585
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__searchResults, value, "f");
|
|
586
|
-
}
|
|
587
|
-
get highlightText() {
|
|
588
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__highlightText, "f") || [];
|
|
589
|
-
}
|
|
590
|
-
set highlightText(value) {
|
|
591
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__highlightText, value, "f");
|
|
592
|
-
}
|
|
593
|
-
get showActionsArea() {
|
|
594
|
-
return !!this.showAddButton || !!this.enableShowMore;
|
|
595
|
-
}
|
|
596
|
-
//#endregion
|
|
597
|
-
set inputDirective(directive) {
|
|
598
|
-
if (!directive) {
|
|
599
|
-
throw Error([
|
|
600
|
-
'The SkyAutocompleteComponent requires a ContentChild input or',
|
|
601
|
-
'textarea bound with the SkyAutocomplete directive. For example:',
|
|
602
|
-
'`<input type="text" skyAutocomplete>`.',
|
|
603
|
-
].join(' '));
|
|
604
|
-
}
|
|
605
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f") !== directive) {
|
|
606
|
-
// Unsubscribe from old subscriptions on any previous input directive
|
|
607
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f").next();
|
|
608
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__inputDirective, directive, "f");
|
|
609
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").displayWith = this.descriptorProperty;
|
|
610
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").textChanges
|
|
611
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f")), debounceTime(this.debounceTime), switchMap((change) => {
|
|
612
|
-
this.isSearchingAsync = true;
|
|
613
|
-
return of(change);
|
|
614
|
-
}))
|
|
615
|
-
.subscribe((change) => {
|
|
616
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_searchTextChanged).call(this, change.value);
|
|
617
|
-
});
|
|
618
|
-
// We delay this listener by 25ms to give things watching the value time to respond (such as the search button).
|
|
619
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").blur
|
|
620
|
-
.pipe(delay(25), takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f")))
|
|
621
|
-
.subscribe(() => {
|
|
622
|
-
directive.restoreInputTextValueToPreviousState();
|
|
623
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
624
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_cancelCurrentSearch).call(this);
|
|
625
|
-
directive.onTouched();
|
|
626
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_hasFocus, false, "f");
|
|
627
|
-
});
|
|
628
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").focus
|
|
629
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f")))
|
|
630
|
-
.subscribe(() => {
|
|
631
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_hasFocus, true, "f");
|
|
632
|
-
if (this.showActionsArea) {
|
|
633
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_openDropdown).call(this);
|
|
634
|
-
}
|
|
635
|
-
});
|
|
636
|
-
}
|
|
637
|
-
}
|
|
638
|
-
get inputDirective() {
|
|
639
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f");
|
|
640
|
-
}
|
|
641
|
-
set resultsRef(value) {
|
|
642
|
-
if (value) {
|
|
643
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent__resultsRef, value, "f");
|
|
644
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyAffixer).call(this);
|
|
645
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_createAffixer).call(this);
|
|
646
|
-
}
|
|
647
|
-
}
|
|
648
|
-
get resultsRef() {
|
|
649
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__resultsRef, "f");
|
|
650
|
-
}
|
|
651
|
-
constructor(changeDetector, elementRef, affixService, adapterService, overlayService, inputBoxHostSvc, stackingContext) {
|
|
652
|
-
_SkyAutocompleteComponent_instances.add(this);
|
|
653
|
-
/**
|
|
654
|
-
* @internal
|
|
655
|
-
* Whether to display a button in the dropdown that opens a picker where users can view all options.
|
|
656
|
-
*/
|
|
657
|
-
this.enableShowMore = false;
|
|
658
|
-
/**
|
|
659
|
-
* @internal
|
|
660
|
-
* Whether to display a button that lets users add options to the data source.
|
|
661
|
-
* @default false
|
|
662
|
-
*/
|
|
663
|
-
this.showAddButton = false;
|
|
664
|
-
/**
|
|
665
|
-
* @internal
|
|
666
|
-
* Allows async search to be disabled even when a listener is specified for
|
|
667
|
-
* the `searchAsync` output.
|
|
668
|
-
* @default false
|
|
669
|
-
*/
|
|
670
|
-
this.searchAsyncDisabled = false;
|
|
671
|
-
/**
|
|
672
|
-
* @internal
|
|
673
|
-
* Fires when users select the button to add options to the data source.
|
|
674
|
-
*/
|
|
675
|
-
this.addClick = new EventEmitter();
|
|
676
|
-
/**
|
|
677
|
-
* @internal
|
|
678
|
-
* Fires when users select the button to view all options.
|
|
679
|
-
*/
|
|
680
|
-
this.showMoreClick = new EventEmitter();
|
|
681
|
-
/**
|
|
682
|
-
* Fires when users select items in the dropdown list.
|
|
683
|
-
*/
|
|
684
|
-
this.selectionChange = new EventEmitter();
|
|
685
|
-
/**
|
|
686
|
-
* Fires when users enter new search information and allows results to be
|
|
687
|
-
* returned via an observable.
|
|
688
|
-
*/
|
|
689
|
-
this.searchAsync = new EventEmitter();
|
|
690
|
-
this.isOpen = false;
|
|
691
|
-
this.searchText = '';
|
|
692
|
-
this.isSearchingAsync = false;
|
|
693
|
-
/**
|
|
694
|
-
* Index that indicates which descendant of the overlay currently has focus.
|
|
695
|
-
*/
|
|
696
|
-
_SkyAutocompleteComponent_activeElementIndex.set(this, -1);
|
|
697
|
-
_SkyAutocompleteComponent_adapterService.set(this, void 0);
|
|
698
|
-
_SkyAutocompleteComponent_affixer.set(this, void 0);
|
|
699
|
-
_SkyAutocompleteComponent_affixService.set(this, void 0);
|
|
700
|
-
_SkyAutocompleteComponent_changeDetector.set(this, void 0);
|
|
701
|
-
_SkyAutocompleteComponent_elementRef.set(this, void 0);
|
|
702
|
-
_SkyAutocompleteComponent_hasFocus.set(this, false);
|
|
703
|
-
_SkyAutocompleteComponent_inputBoxHostSvc.set(this, void 0);
|
|
704
|
-
_SkyAutocompleteComponent_inputDirectiveUnsubscribe.set(this, new Subject());
|
|
705
|
-
_SkyAutocompleteComponent_messageStreamSub.set(this, void 0);
|
|
706
|
-
_SkyAutocompleteComponent_ngUnsubscribe.set(this, new Subject());
|
|
707
|
-
_SkyAutocompleteComponent_overlay.set(this, void 0);
|
|
708
|
-
_SkyAutocompleteComponent_overlayService.set(this, void 0);
|
|
709
|
-
/**
|
|
710
|
-
* Elements within the autocomplete dropdown that are focusable.
|
|
711
|
-
* These are typically the search results and action buttons, but could also be
|
|
712
|
-
* elements provided in the consumer's own template.
|
|
713
|
-
*/
|
|
714
|
-
_SkyAutocompleteComponent_overlayFocusableElements.set(this, []);
|
|
715
|
-
_SkyAutocompleteComponent_currentSearchSub.set(this, void 0);
|
|
716
|
-
_SkyAutocompleteComponent_zIndex.set(this, void 0);
|
|
717
|
-
_SkyAutocompleteComponent__data.set(this, []);
|
|
718
|
-
_SkyAutocompleteComponent__debounceTime.set(this, 0);
|
|
719
|
-
_SkyAutocompleteComponent__descriptorProperty.set(this, 'name');
|
|
720
|
-
_SkyAutocompleteComponent__highlightText.set(this, void 0);
|
|
721
|
-
_SkyAutocompleteComponent__inputDirective.set(this, void 0);
|
|
722
|
-
_SkyAutocompleteComponent__messageStream.set(this, new Subject());
|
|
723
|
-
_SkyAutocompleteComponent__propertiesToSearch.set(this, ['name']);
|
|
724
|
-
_SkyAutocompleteComponent__resultsRef.set(this, void 0);
|
|
725
|
-
_SkyAutocompleteComponent__search.set(this, void 0);
|
|
726
|
-
_SkyAutocompleteComponent__searchFilters.set(this, void 0);
|
|
727
|
-
_SkyAutocompleteComponent__searchResults.set(this, void 0);
|
|
728
|
-
_SkyAutocompleteComponent__searchResultsLimit.set(this, 0);
|
|
729
|
-
_SkyAutocompleteComponent__searchTextMinimumCharacters.set(this, 1);
|
|
730
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_changeDetector, changeDetector, "f");
|
|
731
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_elementRef, elementRef, "f");
|
|
732
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_affixService, affixService, "f");
|
|
733
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_adapterService, adapterService, "f");
|
|
734
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_overlayService, overlayService, "f");
|
|
735
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_inputBoxHostSvc, inputBoxHostSvc, "f");
|
|
736
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_zIndex, stackingContext?.zIndex, "f");
|
|
737
|
-
this.searchOrDefault = skyAutocompleteDefaultSearchFunction({
|
|
738
|
-
propertiesToSearch: ['name'],
|
|
739
|
-
searchFilters: undefined,
|
|
740
|
-
});
|
|
741
|
-
const id = ++uniqueId$1;
|
|
742
|
-
this.resultsListId = `sky-autocomplete-list-${id}`;
|
|
743
|
-
this.resultsWrapperId = `sky-autocomplete-wrapper-${id}`;
|
|
744
|
-
}
|
|
745
|
-
ngAfterViewInit() {
|
|
746
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addInputEventListeners).call(this);
|
|
747
|
-
}
|
|
748
|
-
ngOnDestroy() {
|
|
749
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_cancelCurrentSearch).call(this);
|
|
750
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f").next();
|
|
751
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f").complete();
|
|
752
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f").next();
|
|
753
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f").complete();
|
|
754
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyAffixer).call(this);
|
|
755
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyOverlay).call(this);
|
|
756
|
-
}
|
|
757
|
-
addButtonClicked() {
|
|
758
|
-
this.addClick.emit();
|
|
759
|
-
if (this.inputDirective) {
|
|
760
|
-
this.inputDirective.restoreInputTextValueToPreviousState();
|
|
761
|
-
}
|
|
762
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
763
|
-
}
|
|
764
|
-
handleKeydown(event) {
|
|
765
|
-
/* Sanity check */
|
|
766
|
-
/* istanbul ignore else */
|
|
767
|
-
if (event.key) {
|
|
768
|
-
const key = event.key.toLowerCase();
|
|
769
|
-
const activeElement = __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_getActiveElement).call(this);
|
|
770
|
-
const activeElementId = activeElement?.id;
|
|
771
|
-
const targetIsSearchResult = this.searchResults.find((r) => r.elementId === activeElementId);
|
|
772
|
-
switch (key) {
|
|
773
|
-
case 'enter':
|
|
774
|
-
if (targetIsSearchResult) {
|
|
775
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_selectSearchResultById).call(this, activeElementId);
|
|
776
|
-
if (!this.showActionsArea) {
|
|
777
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
778
|
-
}
|
|
779
|
-
else {
|
|
780
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
|
|
781
|
-
}
|
|
782
|
-
}
|
|
783
|
-
else {
|
|
784
|
-
if (activeElement) {
|
|
785
|
-
activeElement.dispatchEvent(new MouseEvent('mousedown'));
|
|
786
|
-
}
|
|
787
|
-
}
|
|
788
|
-
event.preventDefault();
|
|
789
|
-
event.stopPropagation();
|
|
790
|
-
break;
|
|
791
|
-
case 'tab':
|
|
792
|
-
if (targetIsSearchResult) {
|
|
793
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_selectSearchResultById).call(this, activeElementId);
|
|
794
|
-
}
|
|
795
|
-
else {
|
|
796
|
-
if (this.inputDirective) {
|
|
797
|
-
this.inputDirective.restoreInputTextValueToPreviousState();
|
|
798
|
-
}
|
|
799
|
-
}
|
|
800
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
801
|
-
break;
|
|
802
|
-
case 'escape':
|
|
803
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
804
|
-
break;
|
|
805
|
-
case 'arrowdown':
|
|
806
|
-
case 'down':
|
|
807
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
|
|
808
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") ===
|
|
809
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f").length - 1 ||
|
|
810
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") === -1) {
|
|
811
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, 0, "f");
|
|
812
|
-
}
|
|
813
|
-
else {
|
|
814
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") + 1, "f");
|
|
815
|
-
}
|
|
816
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
|
|
817
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
818
|
-
event.preventDefault();
|
|
819
|
-
event.stopPropagation();
|
|
820
|
-
break;
|
|
821
|
-
case 'arrowup':
|
|
822
|
-
case 'up':
|
|
823
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
|
|
824
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") <= 0) {
|
|
825
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f").length - 1, "f");
|
|
826
|
-
}
|
|
827
|
-
else {
|
|
828
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") - 1, "f");
|
|
829
|
-
}
|
|
830
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
|
|
831
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
832
|
-
event.preventDefault();
|
|
833
|
-
event.stopPropagation();
|
|
834
|
-
break;
|
|
835
|
-
}
|
|
836
|
-
}
|
|
837
|
-
}
|
|
838
|
-
moreButtonClicked() {
|
|
839
|
-
this.showMoreClick.emit({ inputValue: this.searchText });
|
|
840
|
-
if (this.inputDirective) {
|
|
841
|
-
this.inputDirective.restoreInputTextValueToPreviousState();
|
|
842
|
-
}
|
|
843
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
844
|
-
}
|
|
845
|
-
onResultMouseDown(id, event) {
|
|
846
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_selectSearchResultById).call(this, id);
|
|
847
|
-
if (!this.showActionsArea) {
|
|
848
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
849
|
-
}
|
|
850
|
-
else {
|
|
851
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
|
|
852
|
-
}
|
|
853
|
-
event.preventDefault();
|
|
854
|
-
event.stopPropagation();
|
|
855
|
-
}
|
|
856
|
-
onResultMouseMove(id) {
|
|
857
|
-
if (id !== __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")) {
|
|
858
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
|
|
859
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, id, "f");
|
|
860
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
|
|
861
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
862
|
-
}
|
|
863
|
-
}
|
|
864
|
-
isElementFocused(ref) {
|
|
865
|
-
return ref === __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")];
|
|
866
|
-
}
|
|
867
|
-
}
|
|
868
|
-
_SkyAutocompleteComponent_activeElementIndex = new WeakMap(), _SkyAutocompleteComponent_adapterService = new WeakMap(), _SkyAutocompleteComponent_affixer = new WeakMap(), _SkyAutocompleteComponent_affixService = new WeakMap(), _SkyAutocompleteComponent_changeDetector = new WeakMap(), _SkyAutocompleteComponent_elementRef = new WeakMap(), _SkyAutocompleteComponent_hasFocus = new WeakMap(), _SkyAutocompleteComponent_inputBoxHostSvc = new WeakMap(), _SkyAutocompleteComponent_inputDirectiveUnsubscribe = new WeakMap(), _SkyAutocompleteComponent_messageStreamSub = new WeakMap(), _SkyAutocompleteComponent_ngUnsubscribe = new WeakMap(), _SkyAutocompleteComponent_overlay = new WeakMap(), _SkyAutocompleteComponent_overlayService = new WeakMap(), _SkyAutocompleteComponent_overlayFocusableElements = new WeakMap(), _SkyAutocompleteComponent_currentSearchSub = new WeakMap(), _SkyAutocompleteComponent_zIndex = new WeakMap(), _SkyAutocompleteComponent__data = new WeakMap(), _SkyAutocompleteComponent__debounceTime = new WeakMap(), _SkyAutocompleteComponent__descriptorProperty = new WeakMap(), _SkyAutocompleteComponent__highlightText = new WeakMap(), _SkyAutocompleteComponent__inputDirective = new WeakMap(), _SkyAutocompleteComponent__messageStream = new WeakMap(), _SkyAutocompleteComponent__propertiesToSearch = new WeakMap(), _SkyAutocompleteComponent__resultsRef = new WeakMap(), _SkyAutocompleteComponent__search = new WeakMap(), _SkyAutocompleteComponent__searchFilters = new WeakMap(), _SkyAutocompleteComponent__searchResults = new WeakMap(), _SkyAutocompleteComponent__searchResultsLimit = new WeakMap(), _SkyAutocompleteComponent__searchTextMinimumCharacters = new WeakMap(), _SkyAutocompleteComponent_instances = new WeakSet(), _SkyAutocompleteComponent_searchTextChanged = function _SkyAutocompleteComponent_searchTextChanged(searchText) {
|
|
869
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_hasFocus, "f")) {
|
|
870
|
-
const isEmpty = !searchText || !searchText.trim() || searchText.match(/^\s+$/);
|
|
871
|
-
if (isEmpty) {
|
|
872
|
-
// Emit selectionChange if value has been cleared.
|
|
873
|
-
/* istanbul ignore else */
|
|
874
|
-
if (this.inputDirective && this.inputDirective.value) {
|
|
875
|
-
this.inputDirective.value = undefined;
|
|
876
|
-
this.selectionChange.emit({
|
|
877
|
-
selectedItem: undefined,
|
|
878
|
-
});
|
|
879
|
-
}
|
|
880
|
-
if (!this.showActionsArea) {
|
|
881
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
882
|
-
}
|
|
883
|
-
else {
|
|
884
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
|
|
885
|
-
}
|
|
886
|
-
this.isSearchingAsync = false;
|
|
887
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
888
|
-
return;
|
|
889
|
-
}
|
|
890
|
-
const isLongEnough = searchText.length >= this.searchTextMinimumCharacters;
|
|
891
|
-
const isDifferent = searchText !== this.searchText;
|
|
892
|
-
this.searchText = searchText.trim();
|
|
893
|
-
if (isLongEnough && isDifferent) {
|
|
894
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_cancelCurrentSearch).call(this);
|
|
895
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_currentSearchSub, __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_performSearch).call(this)
|
|
896
|
-
.pipe(take(1))
|
|
897
|
-
.subscribe((result) => {
|
|
898
|
-
const items = result?.items.filter((item) => {
|
|
899
|
-
return item && this.descriptorProperty in item;
|
|
900
|
-
});
|
|
901
|
-
this.isSearchingAsync = false;
|
|
902
|
-
this.searchResults =
|
|
903
|
-
items?.map((r, i) => {
|
|
904
|
-
const result = {
|
|
905
|
-
elementId: `${this.resultsListId}-item-${i}`,
|
|
906
|
-
data: r,
|
|
907
|
-
};
|
|
908
|
-
return result;
|
|
909
|
-
}) || [];
|
|
910
|
-
this.searchResultsCount = result?.totalCount || 0;
|
|
911
|
-
this.highlightText = __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_getHighlightText).call(this, this.searchText);
|
|
912
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
|
|
913
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeActiveDescendant).call(this);
|
|
914
|
-
if (this.searchResults.length > 0) {
|
|
915
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, 0, "f");
|
|
916
|
-
}
|
|
917
|
-
else {
|
|
918
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, -1, "f");
|
|
919
|
-
}
|
|
920
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
921
|
-
if (this.isOpen) {
|
|
922
|
-
// Let the results populate in the DOM before recalculating placement.
|
|
923
|
-
setTimeout(() => {
|
|
924
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f")) {
|
|
925
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f").reaffix();
|
|
926
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").detectChanges();
|
|
927
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initOverlayFocusableElements).call(this);
|
|
928
|
-
}
|
|
929
|
-
});
|
|
930
|
-
}
|
|
931
|
-
else {
|
|
932
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_openDropdown).call(this);
|
|
933
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
934
|
-
}
|
|
935
|
-
}), "f");
|
|
936
|
-
}
|
|
937
|
-
else {
|
|
938
|
-
this.isSearchingAsync = false;
|
|
939
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
940
|
-
}
|
|
941
|
-
}
|
|
942
|
-
else {
|
|
943
|
-
this.isSearchingAsync = false;
|
|
944
|
-
}
|
|
945
|
-
}, _SkyAutocompleteComponent_performSearch = function _SkyAutocompleteComponent_performSearch() {
|
|
946
|
-
if (!this.searchAsyncDisabled && this.searchAsync.observers.length > 0) {
|
|
947
|
-
const searchAsyncArgs = {
|
|
948
|
-
displayType: 'popover',
|
|
949
|
-
offset: 0,
|
|
950
|
-
searchText: this.searchText,
|
|
951
|
-
};
|
|
952
|
-
this.searchAsync.emit(searchAsyncArgs);
|
|
953
|
-
return searchAsyncArgs.result || of(undefined);
|
|
954
|
-
}
|
|
955
|
-
const result = this.searchOrDefault(this.searchText, this.data, {
|
|
956
|
-
context: 'popover',
|
|
957
|
-
});
|
|
958
|
-
if (result instanceof Array) {
|
|
959
|
-
return of({
|
|
960
|
-
items: result,
|
|
961
|
-
totalCount: result.length,
|
|
962
|
-
});
|
|
963
|
-
}
|
|
964
|
-
return from(result).pipe(map((items) => {
|
|
965
|
-
return {
|
|
966
|
-
items,
|
|
967
|
-
totalCount: items.length,
|
|
968
|
-
};
|
|
969
|
-
}));
|
|
970
|
-
}, _SkyAutocompleteComponent_cancelCurrentSearch = function _SkyAutocompleteComponent_cancelCurrentSearch() {
|
|
971
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_currentSearchSub, "f")) {
|
|
972
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_currentSearchSub, "f").unsubscribe();
|
|
973
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_currentSearchSub, undefined, "f");
|
|
974
|
-
}
|
|
975
|
-
}, _SkyAutocompleteComponent_getHighlightText = function _SkyAutocompleteComponent_getHighlightText(searchText) {
|
|
976
|
-
const normalizedSearchText = normalizeDiacritics(searchText)
|
|
977
|
-
.toLocaleUpperCase()
|
|
978
|
-
.trim();
|
|
979
|
-
if (!normalizedSearchText) {
|
|
980
|
-
return [];
|
|
981
|
-
}
|
|
982
|
-
let matchesToHighlight = [];
|
|
983
|
-
for (let i = 0, n = this.searchResults.length; i < n; i++) {
|
|
984
|
-
const value = this.searchResults[i].data[this.descriptorProperty]
|
|
985
|
-
.toString()
|
|
986
|
-
.toLocaleUpperCase();
|
|
987
|
-
const normalizedDataValue = normalizeDiacritics(value);
|
|
988
|
-
let offset = 0;
|
|
989
|
-
let index;
|
|
990
|
-
while ((index = normalizedDataValue.indexOf(normalizedSearchText, offset)) > -1) {
|
|
991
|
-
const matchedString = value.slice(index, index + searchText.length);
|
|
992
|
-
offset = index + searchText.length;
|
|
993
|
-
matchesToHighlight = matchesToHighlight.concat(matchedString);
|
|
994
|
-
}
|
|
995
|
-
}
|
|
996
|
-
// Remove any duplicates from the array.
|
|
997
|
-
return [...new Set(matchesToHighlight)];
|
|
998
|
-
}, _SkyAutocompleteComponent_selectSearchResultById = function _SkyAutocompleteComponent_selectSearchResultById(id) {
|
|
999
|
-
const result = this.searchResults.find((r) => r.elementId === id);
|
|
1000
|
-
/* istanbul ignore else */
|
|
1001
|
-
if (result) {
|
|
1002
|
-
const data = result.data;
|
|
1003
|
-
this.searchText = data[this.descriptorProperty];
|
|
1004
|
-
if (this.inputDirective) {
|
|
1005
|
-
this.inputDirective.value = data;
|
|
1006
|
-
}
|
|
1007
|
-
this.selectionChange.emit({
|
|
1008
|
-
selectedItem: data,
|
|
1009
|
-
});
|
|
1010
|
-
}
|
|
1011
|
-
}, _SkyAutocompleteComponent_openDropdown = function _SkyAutocompleteComponent_openDropdown() {
|
|
1012
|
-
if (!__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f") && this.resultsTemplateRef) {
|
|
1013
|
-
const overlay = __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayService, "f").create({
|
|
1014
|
-
enableClose: false,
|
|
1015
|
-
enablePointerEvents: true,
|
|
1016
|
-
wrapperClass: this.wrapperClass,
|
|
1017
|
-
});
|
|
1018
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_zIndex, "f")) {
|
|
1019
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_zIndex, "f").pipe(takeUntil(overlay.closed)).subscribe((zIndex) => {
|
|
1020
|
-
overlay.componentRef.instance.zIndex = zIndex.toString(10);
|
|
1021
|
-
});
|
|
1022
|
-
}
|
|
1023
|
-
overlay.attachTemplate(this.resultsTemplateRef);
|
|
1024
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_overlay, overlay, "f");
|
|
1025
|
-
this.isOpen = true;
|
|
1026
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
1027
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_updateAriaOwns).call(this);
|
|
1028
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initOverlayFocusableElements).call(this);
|
|
1029
|
-
}
|
|
1030
|
-
}, _SkyAutocompleteComponent_closeDropdown = function _SkyAutocompleteComponent_closeDropdown() {
|
|
1031
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
|
|
1032
|
-
this.isOpen = false;
|
|
1033
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyOverlay).call(this);
|
|
1034
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeActiveDescendant).call(this);
|
|
1035
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_updateAriaOwns).call(this);
|
|
1036
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
1037
|
-
}, _SkyAutocompleteComponent_setActiveDescendant = function _SkyAutocompleteComponent_setActiveDescendant() {
|
|
1038
|
-
const activeElement = __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")];
|
|
1039
|
-
/* Sanity check */
|
|
1040
|
-
/* istanbul ignore else */
|
|
1041
|
-
if (activeElement && this.inputDirective) {
|
|
1042
|
-
this.inputDirective.setActiveDescendant(activeElement.id);
|
|
1043
|
-
}
|
|
1044
|
-
}, _SkyAutocompleteComponent_removeActiveDescendant = function _SkyAutocompleteComponent_removeActiveDescendant() {
|
|
1045
|
-
if (this.inputDirective) {
|
|
1046
|
-
this.inputDirective.setActiveDescendant(null);
|
|
1047
|
-
}
|
|
1048
|
-
}, _SkyAutocompleteComponent_updateAriaOwns = function _SkyAutocompleteComponent_updateAriaOwns() {
|
|
1049
|
-
if (this.inputDirective) {
|
|
1050
|
-
this.inputDirective.setAriaOwns(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")?.id || null);
|
|
1051
|
-
}
|
|
1052
|
-
}, _SkyAutocompleteComponent_resetSearch = function _SkyAutocompleteComponent_resetSearch() {
|
|
1053
|
-
this.searchResults = [];
|
|
1054
|
-
this.searchText = '';
|
|
1055
|
-
this.highlightText = [];
|
|
1056
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, -1, "f");
|
|
1057
|
-
this.searchResultsCount = undefined;
|
|
1058
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeActiveDescendant).call(this);
|
|
1059
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initOverlayFocusableElements).call(this);
|
|
1060
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
1061
|
-
}, _SkyAutocompleteComponent_addInputEventListeners = function _SkyAutocompleteComponent_addInputEventListeners() {
|
|
1062
|
-
const element = __classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f").nativeElement;
|
|
1063
|
-
fromEvent(element, 'keydown')
|
|
1064
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f")))
|
|
1065
|
-
.subscribe((event) => {
|
|
1066
|
-
this.handleKeydown(event);
|
|
1067
|
-
});
|
|
1068
|
-
fromEvent(window, 'resize')
|
|
1069
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f")))
|
|
1070
|
-
.subscribe(() => {
|
|
1071
|
-
/* istanbul ignore else */
|
|
1072
|
-
if (this.isOpen && this.resultsRef) {
|
|
1073
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").setDropdownWidth(__classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f"), this.resultsRef, !!__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputBoxHostSvc, "f"));
|
|
1074
|
-
}
|
|
1075
|
-
});
|
|
1076
|
-
}, _SkyAutocompleteComponent_destroyOverlay = function _SkyAutocompleteComponent_destroyOverlay() {
|
|
1077
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")) {
|
|
1078
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayService, "f").close(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f"));
|
|
1079
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_overlay, undefined, "f");
|
|
1080
|
-
}
|
|
1081
|
-
}, _SkyAutocompleteComponent_createAffixer = function _SkyAutocompleteComponent_createAffixer() {
|
|
1082
|
-
/* Sanity check */
|
|
1083
|
-
/* istanbul ignore else */
|
|
1084
|
-
if (!__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f") && this.resultsRef) {
|
|
1085
|
-
const affixer = __classPrivateFieldGet(this, _SkyAutocompleteComponent_affixService, "f").createAffixer(this.resultsRef);
|
|
1086
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").setDropdownWidth(__classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f"), this.resultsRef, !!__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputBoxHostSvc, "f"));
|
|
1087
|
-
affixer.affixTo(__classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f").nativeElement, {
|
|
1088
|
-
autoFitContext: SkyAffixAutoFitContext.Viewport,
|
|
1089
|
-
enableAutoFit: true,
|
|
1090
|
-
isSticky: true,
|
|
1091
|
-
placement: 'below',
|
|
1092
|
-
horizontalAlignment: 'left',
|
|
1093
|
-
});
|
|
1094
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_affixer, affixer, "f");
|
|
1095
|
-
}
|
|
1096
|
-
}, _SkyAutocompleteComponent_destroyAffixer = function _SkyAutocompleteComponent_destroyAffixer() {
|
|
1097
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f")) {
|
|
1098
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f").destroy();
|
|
1099
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_affixer, undefined, "f");
|
|
1100
|
-
}
|
|
1101
|
-
}, _SkyAutocompleteComponent_initMessageStream = function _SkyAutocompleteComponent_initMessageStream() {
|
|
1102
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_messageStreamSub, "f")) {
|
|
1103
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_messageStreamSub, "f").unsubscribe();
|
|
1104
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_messageStreamSub, undefined, "f");
|
|
1105
|
-
}
|
|
1106
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_messageStreamSub, this.messageStream.subscribe((message) => {
|
|
1107
|
-
switch (message.type) {
|
|
1108
|
-
case SkyAutocompleteMessageType.CloseDropdown:
|
|
1109
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
1110
|
-
break;
|
|
1111
|
-
case SkyAutocompleteMessageType.RepositionDropdown:
|
|
1112
|
-
// Settimeout waits for changes in DOM (e.g., tokens being removed)
|
|
1113
|
-
setTimeout(() => {
|
|
1114
|
-
/* istanbul ignore else */
|
|
1115
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f")) {
|
|
1116
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f").reaffix();
|
|
1117
|
-
}
|
|
1118
|
-
});
|
|
1119
|
-
break;
|
|
1120
|
-
}
|
|
1121
|
-
}), "f");
|
|
1122
|
-
}, _SkyAutocompleteComponent_initOverlayFocusableElements = function _SkyAutocompleteComponent_initOverlayFocusableElements() {
|
|
1123
|
-
// Wait for dropdown elements to render.
|
|
1124
|
-
setTimeout(() => {
|
|
1125
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")) {
|
|
1126
|
-
__classPrivateFieldSet(this, _SkyAutocompleteComponent_overlayFocusableElements, __classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").getOverlayFocusableElements(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")), "f");
|
|
1127
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f").forEach((el) => {
|
|
1128
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").setTabIndex(el, -1);
|
|
1129
|
-
});
|
|
1130
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
|
|
1131
|
-
}
|
|
1132
|
-
});
|
|
1133
|
-
}, _SkyAutocompleteComponent_getActiveElement = function _SkyAutocompleteComponent_getActiveElement() {
|
|
1134
|
-
return __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")];
|
|
1135
|
-
}, _SkyAutocompleteComponent_removeFocusedClass = function _SkyAutocompleteComponent_removeFocusedClass() {
|
|
1136
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") > -1) {
|
|
1137
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").removeCSSClass(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")], 'sky-autocomplete-descendant-focus');
|
|
1138
|
-
}
|
|
1139
|
-
}, _SkyAutocompleteComponent_addFocusedClass = function _SkyAutocompleteComponent_addFocusedClass() {
|
|
1140
|
-
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") > -1) {
|
|
1141
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").addCSSClass(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")], 'sky-autocomplete-descendant-focus');
|
|
1142
|
-
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_setActiveDescendant).call(this);
|
|
1143
|
-
}
|
|
1144
|
-
}, _SkyAutocompleteComponent_updateDefaultSearchOptions = function _SkyAutocompleteComponent_updateDefaultSearchOptions() {
|
|
1145
|
-
// Reset default search if it is what is being used.
|
|
1146
|
-
if (this.search !== this.searchOrDefault) {
|
|
1147
|
-
this.searchOrDefault = skyAutocompleteDefaultSearchFunction({
|
|
1148
|
-
propertiesToSearch: this.propertiesToSearch,
|
|
1149
|
-
searchFilters: this.searchFilters,
|
|
1150
|
-
});
|
|
1151
|
-
}
|
|
1152
|
-
};
|
|
1153
|
-
SkyAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i5.SkyInputBoxHostService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1154
|
-
SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync" }, 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]=\"isOpen\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n <div\n class=\"sky-autocomplete-results-container\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n (keydown)=\"handleKeydown($event)\"\n #resultsRef\n >\n <div\n *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n class=\"sky-autocomplete-results-waiting\"\n >\n <sky-wait [isWaiting]=\"true\"></sky-wait>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n <div\n *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"resultsListId\"\n >\n <ng-container *ngFor=\"let result of searchResults; let i = index\">\n <div\n *ngIf=\"\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n \"\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 (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n #searchResultEl\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n >\n </ng-container>\n </div>\n </ng-container>\n <div\n *ngIf=\"searchResults.length === 0\"\n class=\"sky-deemphasized sky-padding-squish-default\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n </div>\n <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n <button\n *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (mousedown)=\"moreButtonClicked()\"\n >\n <ng-container\n *ngIf=\"\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText\n \"\n >\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n </ng-container>\n <ng-container\n *ngIf=\"\n (searchAsync\n | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled) &&\n !searchText\n \"\n >\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources : (data.length | skyNumeric : { truncate: false })\n }}\n </ng-container>\n <ng-container *ngIf=\"searchText\">\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount | skyNumeric : { truncate: false }))\n }}\n </ng-container>\n </button>\n <div\n *ngIf=\"searchText && searchResults.length === 0\"\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n <button\n *ngIf=\"showAddButton\"\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 (mousedown)=\"addButtonClicked()\"\n #addButtonEl\n >\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i8.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
|
|
1156
|
-
type: Component,
|
|
1157
|
-
args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n <div\n class=\"sky-autocomplete-results-container\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n (keydown)=\"handleKeydown($event)\"\n #resultsRef\n >\n <div\n *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n class=\"sky-autocomplete-results-waiting\"\n >\n <sky-wait [isWaiting]=\"true\"></sky-wait>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n <div\n *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"resultsListId\"\n >\n <ng-container *ngFor=\"let result of searchResults; let i = index\">\n <div\n *ngIf=\"\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n \"\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 (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n #searchResultEl\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n >\n </ng-container>\n </div>\n </ng-container>\n <div\n *ngIf=\"searchResults.length === 0\"\n class=\"sky-deemphasized sky-padding-squish-default\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n </div>\n <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n <button\n *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (mousedown)=\"moreButtonClicked()\"\n >\n <ng-container\n *ngIf=\"\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText\n \"\n >\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n </ng-container>\n <ng-container\n *ngIf=\"\n (searchAsync\n | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled) &&\n !searchText\n \"\n >\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources : (data.length | skyNumeric : { truncate: false })\n }}\n </ng-container>\n <ng-container *ngIf=\"searchText\">\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount | skyNumeric : { truncate: false }))\n }}\n </ng-container>\n </button>\n <div\n *ngIf=\"searchText && searchResults.length === 0\"\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n <button\n *ngIf=\"showAddButton\"\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 (mousedown)=\"addButtonClicked()\"\n #addButtonEl\n >\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"] }]
|
|
1158
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: SkyAutocompleteAdapterService }, { type: i1.SkyOverlayService }, { type: i5.SkyInputBoxHostService, decorators: [{
|
|
1159
|
-
type: Optional
|
|
1160
|
-
}] }, { type: undefined, decorators: [{
|
|
1161
|
-
type: Optional
|
|
1162
|
-
}, {
|
|
1163
|
-
type: Inject,
|
|
1164
|
-
args: [SKY_STACKING_CONTEXT]
|
|
1165
|
-
}] }]; }, propDecorators: { ariaLabelledBy: [{
|
|
1166
|
-
type: Input
|
|
1167
|
-
}], data: [{
|
|
1168
|
-
type: Input
|
|
1169
|
-
}], debounceTime: [{
|
|
1170
|
-
type: Input
|
|
1171
|
-
}], descriptorProperty: [{
|
|
1172
|
-
type: Input
|
|
1173
|
-
}], enableShowMore: [{
|
|
1174
|
-
type: Input
|
|
1175
|
-
}], messageStream: [{
|
|
1176
|
-
type: Input
|
|
1177
|
-
}], wrapperClass: [{
|
|
1178
|
-
type: Input
|
|
1179
|
-
}], propertiesToSearch: [{
|
|
1180
|
-
type: Input
|
|
1181
|
-
}], search: [{
|
|
1182
|
-
type: Input
|
|
1183
|
-
}], searchResultTemplate: [{
|
|
1184
|
-
type: Input
|
|
1185
|
-
}], searchTextMinimumCharacters: [{
|
|
1186
|
-
type: Input
|
|
1187
|
-
}], searchFilters: [{
|
|
1188
|
-
type: Input
|
|
1189
|
-
}], searchResultsLimit: [{
|
|
1190
|
-
type: Input
|
|
1191
|
-
}], showAddButton: [{
|
|
1192
|
-
type: Input
|
|
1193
|
-
}], noResultsFoundText: [{
|
|
1194
|
-
type: Input
|
|
1195
|
-
}], searchAsyncDisabled: [{
|
|
1196
|
-
type: Input
|
|
1197
|
-
}], addClick: [{
|
|
1198
|
-
type: Output
|
|
1199
|
-
}], showMoreClick: [{
|
|
1200
|
-
type: Output
|
|
1201
|
-
}], selectionChange: [{
|
|
1202
|
-
type: Output
|
|
1203
|
-
}], searchAsync: [{
|
|
1204
|
-
type: Output
|
|
1205
|
-
}], inputDirective: [{
|
|
1206
|
-
type: ContentChild,
|
|
1207
|
-
args: [SkyAutocompleteInputDirective]
|
|
1208
|
-
}], resultsTemplateRef: [{
|
|
1209
|
-
type: ViewChild,
|
|
1210
|
-
args: ['resultsTemplateRef', {
|
|
1211
|
-
read: TemplateRef,
|
|
1212
|
-
}]
|
|
1213
|
-
}], resultsRef: [{
|
|
1214
|
-
type: ViewChild,
|
|
1215
|
-
args: ['resultsRef', {
|
|
1216
|
-
read: ElementRef,
|
|
1217
|
-
}]
|
|
1218
|
-
}] } });
|
|
1219
|
-
|
|
1220
|
-
class SkyAutocompleteModule {
|
|
1221
|
-
}
|
|
1222
|
-
SkyAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1223
|
-
SkyAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteModule, declarations: [SkyAutocompleteComponent,
|
|
1224
|
-
SkyAutocompleteInputDirective,
|
|
1225
|
-
SkyAutocompleteSearchAsyncDisabledPipe], imports: [CommonModule,
|
|
1226
|
-
FormsModule,
|
|
1227
|
-
SkyAffixModule,
|
|
1228
|
-
SkyTextHighlightModule,
|
|
1229
|
-
SkyIconModule,
|
|
1230
|
-
SkyIdModule,
|
|
1231
|
-
SkyLookupResourcesModule,
|
|
1232
|
-
SkyNumericModule,
|
|
1233
|
-
SkyOverlayModule,
|
|
1234
|
-
SkyThemeModule,
|
|
1235
|
-
SkyWaitModule], exports: [SkyAutocompleteComponent, SkyAutocompleteInputDirective] });
|
|
1236
|
-
SkyAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteModule, imports: [CommonModule,
|
|
1237
|
-
FormsModule,
|
|
1238
|
-
SkyAffixModule,
|
|
1239
|
-
SkyTextHighlightModule,
|
|
1240
|
-
SkyIconModule,
|
|
1241
|
-
SkyIdModule,
|
|
1242
|
-
SkyLookupResourcesModule,
|
|
1243
|
-
SkyNumericModule,
|
|
1244
|
-
SkyOverlayModule,
|
|
1245
|
-
SkyThemeModule,
|
|
1246
|
-
SkyWaitModule] });
|
|
1247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAutocompleteModule, decorators: [{
|
|
1248
|
-
type: NgModule,
|
|
1249
|
-
args: [{
|
|
1250
|
-
declarations: [
|
|
1251
|
-
SkyAutocompleteComponent,
|
|
1252
|
-
SkyAutocompleteInputDirective,
|
|
1253
|
-
SkyAutocompleteSearchAsyncDisabledPipe,
|
|
1254
|
-
],
|
|
1255
|
-
imports: [
|
|
1256
|
-
CommonModule,
|
|
1257
|
-
FormsModule,
|
|
1258
|
-
SkyAffixModule,
|
|
1259
|
-
SkyTextHighlightModule,
|
|
1260
|
-
SkyIconModule,
|
|
1261
|
-
SkyIdModule,
|
|
1262
|
-
SkyLookupResourcesModule,
|
|
1263
|
-
SkyNumericModule,
|
|
1264
|
-
SkyOverlayModule,
|
|
1265
|
-
SkyThemeModule,
|
|
1266
|
-
SkyWaitModule,
|
|
1267
|
-
],
|
|
1268
|
-
exports: [SkyAutocompleteComponent, SkyAutocompleteInputDirective],
|
|
1269
|
-
}]
|
|
1270
|
-
}] });
|
|
1271
|
-
|
|
1272
|
-
/**
|
|
1273
|
-
* @internal
|
|
1274
|
-
*/
|
|
1275
|
-
const SKY_COUNTRY_FIELD_CONTEXT = new InjectionToken('SkyCountryFieldContext');
|
|
1276
|
-
|
|
1277
|
-
var _SkyCountryFieldComponent_instances, _SkyCountryFieldComponent_changeDetector, _SkyCountryFieldComponent_defaultCountryData, _SkyCountryFieldComponent_elRef, _SkyCountryFieldComponent_idle, _SkyCountryFieldComponent_injector, _SkyCountryFieldComponent_internalFormChange, _SkyCountryFieldComponent_isInitialChange, _SkyCountryFieldComponent_ngControl, _SkyCountryFieldComponent_ngUnsubscribe, _SkyCountryFieldComponent_themeSvc, _SkyCountryFieldComponent_windowRef, _SkyCountryFieldComponent__defaultCountry, _SkyCountryFieldComponent__disabled, _SkyCountryFieldComponent__hideSelectedCountryFlag, _SkyCountryFieldComponent__includePhoneInfo, _SkyCountryFieldComponent__selectedCountry, _SkyCountryFieldComponent__supportedCountryISOs, _SkyCountryFieldComponent_addEventListeners, _SkyCountryFieldComponent_countriesAreEqual, _SkyCountryFieldComponent_countriesEqual, _SkyCountryFieldComponent_removeEventListeners, _SkyCountryFieldComponent_setupCountries, _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault, _SkyCountryFieldComponent_updateInputBox;
|
|
1278
|
-
const DEFAULT_COUNTRY_CODE = 'us';
|
|
1279
|
-
const SKY_COUNTRY_FIELD_VALIDATOR = {
|
|
1280
|
-
provide: NG_VALIDATORS,
|
|
1281
|
-
useExisting: forwardRef(() => SkyCountryFieldComponent),
|
|
1282
|
-
multi: true,
|
|
1283
|
-
};
|
|
1284
|
-
let uniqueId = 0;
|
|
1285
|
-
class SkyCountryFieldComponent {
|
|
1286
|
-
/**
|
|
1287
|
-
* The [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)
|
|
1288
|
-
* country code for the default country.
|
|
1289
|
-
* When search results include the default country, it appears at the top of the list.
|
|
1290
|
-
* @default "us"
|
|
1291
|
-
*/
|
|
1292
|
-
set defaultCountry(value) {
|
|
1293
|
-
if (!value) {
|
|
1294
|
-
value = DEFAULT_COUNTRY_CODE;
|
|
1295
|
-
}
|
|
1296
|
-
if (value !== __classPrivateFieldGet(this, _SkyCountryFieldComponent__defaultCountry, "f")) {
|
|
1297
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent__defaultCountry, value.toLowerCase(), "f");
|
|
1298
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_defaultCountryData, this.countries.find((country) => country.iso2 === __classPrivateFieldGet(this, _SkyCountryFieldComponent__defaultCountry, "f")), "f");
|
|
1299
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault).call(this, this.selectedCountry);
|
|
1300
|
-
}
|
|
1301
|
-
}
|
|
1302
|
-
get defaultCountry() {
|
|
1303
|
-
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__defaultCountry, "f");
|
|
1304
|
-
}
|
|
1305
|
-
/**
|
|
1306
|
-
* Whether to disable the country field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
|
|
1307
|
-
* To set the disabled state on reactive forms, use the `FormControl` instead.
|
|
1308
|
-
* @default false
|
|
1309
|
-
*/
|
|
1310
|
-
set disabled(isDisabled) {
|
|
1311
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_removeEventListeners).call(this);
|
|
1312
|
-
if (!isDisabled) {
|
|
1313
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_addEventListeners).call(this);
|
|
1314
|
-
}
|
|
1315
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent__disabled, isDisabled ?? false, "f");
|
|
1316
|
-
if (isDisabled) {
|
|
1317
|
-
this.countrySearchFormControl.disable();
|
|
1318
|
-
}
|
|
1319
|
-
else {
|
|
1320
|
-
this.countrySearchFormControl.enable();
|
|
1321
|
-
}
|
|
1322
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
|
|
1323
|
-
}
|
|
1324
|
-
get disabled() {
|
|
1325
|
-
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__disabled, "f");
|
|
1326
|
-
}
|
|
1327
|
-
/**
|
|
1328
|
-
* Whether to hide the flag in the input element.
|
|
1329
|
-
* @default false
|
|
1330
|
-
*/
|
|
1331
|
-
set hideSelectedCountryFlag(value) {
|
|
1332
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent__hideSelectedCountryFlag, value ?? false, "f");
|
|
1333
|
-
}
|
|
1334
|
-
get hideSelectedCountryFlag() {
|
|
1335
|
-
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__hideSelectedCountryFlag, "f");
|
|
1336
|
-
}
|
|
1337
|
-
/**
|
|
1338
|
-
* Whether to include phone information in the selected country and country dropdown.
|
|
1339
|
-
* @default false
|
|
1340
|
-
* @internal
|
|
1341
|
-
*/
|
|
1342
|
-
set includePhoneInfo(value) {
|
|
1343
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent__includePhoneInfo, value ?? false, "f");
|
|
1344
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_setupCountries).call(this);
|
|
1345
|
-
}
|
|
1346
|
-
get includePhoneInfo() {
|
|
1347
|
-
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__includePhoneInfo, "f");
|
|
1348
|
-
}
|
|
1349
|
-
/**
|
|
1350
|
-
* The [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)
|
|
1351
|
-
* country codes for the countries that users can select. By default, all countries are available.
|
|
1352
|
-
*/
|
|
1353
|
-
set supportedCountryISOs(value) {
|
|
1354
|
-
// Ensure all values are the same case.
|
|
1355
|
-
if (Array.isArray(value)) {
|
|
1356
|
-
value = value.map((v) => v.toLowerCase());
|
|
1357
|
-
}
|
|
1358
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent__supportedCountryISOs, value, "f");
|
|
1359
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_setupCountries).call(this);
|
|
1360
|
-
}
|
|
1361
|
-
get supportedCountryISOs() {
|
|
1362
|
-
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__supportedCountryISOs, "f") || [];
|
|
1363
|
-
}
|
|
1364
|
-
set selectedCountry(newCountry) {
|
|
1365
|
-
if (!__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_countriesAreEqual).call(this, this.selectedCountry, newCountry)) {
|
|
1366
|
-
const newCountryIso = newCountry && newCountry.iso2;
|
|
1367
|
-
if (newCountryIso) {
|
|
1368
|
-
const isoCountry = this.countries.find((country) => country.iso2 === newCountryIso);
|
|
1369
|
-
if (isoCountry) {
|
|
1370
|
-
newCountry = isoCountry;
|
|
1371
|
-
}
|
|
1372
|
-
}
|
|
1373
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent__selectedCountry, newCountry, "f");
|
|
1374
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault).call(this, newCountry);
|
|
1375
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_internalFormChange, true, "f");
|
|
1376
|
-
this.countrySearchFormControl.setValue(this.selectedCountry);
|
|
1377
|
-
if (!__classPrivateFieldGet(this, _SkyCountryFieldComponent_isInitialChange, "f")) {
|
|
1378
|
-
this.onChange(newCountry);
|
|
1379
|
-
this.onTouched();
|
|
1380
|
-
this.selectedCountryChange.emit(newCountry);
|
|
1381
|
-
}
|
|
1382
|
-
// Do not mark the field as "dirty"
|
|
1383
|
-
// if the field has been initialized with a value.
|
|
1384
|
-
if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_isInitialChange, "f") && __classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f") && __classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f").control) {
|
|
1385
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f").control.markAsPristine();
|
|
1386
|
-
}
|
|
1387
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_isInitialChange, false, "f");
|
|
1388
|
-
/**
|
|
1389
|
-
* The second portion of this if statement is complex. The control type check ensures that
|
|
1390
|
-
* we only watch for the initial time through this function on reactive forms. However,
|
|
1391
|
-
* template forms will send through `null` and then `undefined` on empty initialization
|
|
1392
|
-
* so we have to check for when the non-null pass through happens.
|
|
1393
|
-
*/
|
|
1394
|
-
}
|
|
1395
|
-
else if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_isInitialChange, "f") &&
|
|
1396
|
-
(!(__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f") instanceof NgModel) || newCountry !== null)) {
|
|
1397
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_isInitialChange, false, "f");
|
|
1398
|
-
}
|
|
1399
|
-
}
|
|
1400
|
-
get selectedCountry() {
|
|
1401
|
-
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__selectedCountry, "f");
|
|
1402
|
-
}
|
|
1403
|
-
constructor(changeDetector, elRef, windowRef, injector, inputBoxHostSvc, themeSvc) {
|
|
1404
|
-
this.inputBoxHostSvc = inputBoxHostSvc;
|
|
1405
|
-
_SkyCountryFieldComponent_instances.add(this);
|
|
1406
|
-
/**
|
|
1407
|
-
* Fires when the selected country changes.
|
|
1408
|
-
*/
|
|
1409
|
-
this.selectedCountryChange = new EventEmitter();
|
|
1410
|
-
this.countries = [];
|
|
1411
|
-
this.isInputFocused = false;
|
|
1412
|
-
this.searchTextMinimumCharacters = 2;
|
|
1413
|
-
this.context = inject(SKY_COUNTRY_FIELD_CONTEXT, {
|
|
1414
|
-
optional: true,
|
|
1415
|
-
});
|
|
1416
|
-
this.currentTheme = 'default';
|
|
1417
|
-
_SkyCountryFieldComponent_changeDetector.set(this, void 0);
|
|
1418
|
-
_SkyCountryFieldComponent_defaultCountryData.set(this, void 0);
|
|
1419
|
-
_SkyCountryFieldComponent_elRef.set(this, void 0);
|
|
1420
|
-
_SkyCountryFieldComponent_idle.set(this, new Subject());
|
|
1421
|
-
_SkyCountryFieldComponent_injector.set(this, void 0);
|
|
1422
|
-
_SkyCountryFieldComponent_internalFormChange.set(this, false);
|
|
1423
|
-
_SkyCountryFieldComponent_isInitialChange.set(this, true);
|
|
1424
|
-
_SkyCountryFieldComponent_ngControl.set(this, null);
|
|
1425
|
-
_SkyCountryFieldComponent_ngUnsubscribe.set(this, new Subject());
|
|
1426
|
-
_SkyCountryFieldComponent_themeSvc.set(this, void 0);
|
|
1427
|
-
_SkyCountryFieldComponent_windowRef.set(this, void 0);
|
|
1428
|
-
_SkyCountryFieldComponent__defaultCountry.set(this, void 0);
|
|
1429
|
-
_SkyCountryFieldComponent__disabled.set(this, false);
|
|
1430
|
-
_SkyCountryFieldComponent__hideSelectedCountryFlag.set(this, false);
|
|
1431
|
-
_SkyCountryFieldComponent__includePhoneInfo.set(this, false);
|
|
1432
|
-
_SkyCountryFieldComponent__selectedCountry.set(this, void 0);
|
|
1433
|
-
_SkyCountryFieldComponent__supportedCountryISOs.set(this, void 0);
|
|
1434
|
-
// Angular automatically constructs these methods.
|
|
1435
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1436
|
-
this.onChange = (value) => { };
|
|
1437
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1438
|
-
this.onTouched = () => { };
|
|
1439
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_changeDetector, changeDetector, "f");
|
|
1440
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_elRef, elRef, "f");
|
|
1441
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_windowRef, windowRef, "f");
|
|
1442
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_injector, injector, "f");
|
|
1443
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_themeSvc, themeSvc, "f");
|
|
1444
|
-
this.inputId = `sky-country-field-input-${uniqueId++}`;
|
|
1445
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_setupCountries).call(this);
|
|
1446
|
-
this.countrySearchFormControl = new UntypedFormControl();
|
|
1447
|
-
}
|
|
1448
|
-
/**
|
|
1449
|
-
* Angular lifecycle hook for when the component is initialized
|
|
1450
|
-
* @internal
|
|
1451
|
-
*/
|
|
1452
|
-
ngOnInit() {
|
|
1453
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_updateInputBox).call(this);
|
|
1454
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_ngControl, __classPrivateFieldGet(this, _SkyCountryFieldComponent_injector, "f").get(NgControl, null), "f");
|
|
1455
|
-
if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f")) {
|
|
1456
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngControl, "f").valueAccessor = this;
|
|
1457
|
-
}
|
|
1458
|
-
else {
|
|
1459
|
-
/**
|
|
1460
|
-
* The initial change boolean is to determine if the form is setting the value. When no form
|
|
1461
|
-
* is present we don't want to ignore the first change.
|
|
1462
|
-
*/
|
|
1463
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_isInitialChange, false, "f");
|
|
1464
|
-
}
|
|
1465
|
-
if (!this.defaultCountry) {
|
|
1466
|
-
this.defaultCountry = DEFAULT_COUNTRY_CODE;
|
|
1467
|
-
}
|
|
1468
|
-
this.countrySearchFormControl.valueChanges
|
|
1469
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngUnsubscribe, "f")))
|
|
1470
|
-
.subscribe((newValue) => {
|
|
1471
|
-
if (newValue && !__classPrivateFieldGet(this, _SkyCountryFieldComponent_internalFormChange, "f")) {
|
|
1472
|
-
this.selectedCountry = newValue;
|
|
1473
|
-
}
|
|
1474
|
-
});
|
|
1475
|
-
if (!this.disabled) {
|
|
1476
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_addEventListeners).call(this);
|
|
1477
|
-
}
|
|
1478
|
-
}
|
|
1479
|
-
ngAfterViewInit() {
|
|
1480
|
-
/* istanbul ignore else */
|
|
1481
|
-
if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_themeSvc, "f")) {
|
|
1482
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_themeSvc, "f").settingsChange.subscribe((change) => {
|
|
1483
|
-
this.currentTheme = change.currentSettings.theme.name;
|
|
1484
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_updateInputBox).call(this);
|
|
1485
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
|
|
1486
|
-
});
|
|
1487
|
-
}
|
|
1488
|
-
}
|
|
1489
|
-
/**
|
|
1490
|
-
* Angular lifecycle hook for when the component is destructed.
|
|
1491
|
-
* @internal
|
|
1492
|
-
*/
|
|
1493
|
-
ngOnDestroy() {
|
|
1494
|
-
this.selectedCountryChange.complete();
|
|
1495
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_removeEventListeners).call(this);
|
|
1496
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngUnsubscribe, "f").next();
|
|
1497
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_ngUnsubscribe, "f").complete();
|
|
1498
|
-
}
|
|
1499
|
-
/**
|
|
1500
|
-
* Sets the component's touched value when the autocomplete is blurred
|
|
1501
|
-
* @internal
|
|
1502
|
-
*/
|
|
1503
|
-
onAutocompleteBlur() {
|
|
1504
|
-
this.onTouched();
|
|
1505
|
-
}
|
|
1506
|
-
/**
|
|
1507
|
-
* Sets the country to validate against based on the county's iso2 code.
|
|
1508
|
-
* @param newCountry The International Organization for Standardization's two-letter code
|
|
1509
|
-
* for the default country.
|
|
1510
|
-
* @internal
|
|
1511
|
-
*/
|
|
1512
|
-
onCountrySelected(newCountry) {
|
|
1513
|
-
if (newCountry.selectedItem) {
|
|
1514
|
-
this.writeValue(this.countries.find((countryInfo) => countryInfo.iso2 === newCountry.selectedItem.iso2));
|
|
1515
|
-
}
|
|
1516
|
-
else {
|
|
1517
|
-
this.writeValue(undefined);
|
|
1518
|
-
}
|
|
1519
|
-
}
|
|
1520
|
-
registerOnChange(fn) {
|
|
1521
|
-
this.onChange = fn;
|
|
1522
|
-
}
|
|
1523
|
-
registerOnTouched(fn) {
|
|
1524
|
-
this.onTouched = fn;
|
|
1525
|
-
}
|
|
1526
|
-
// Allows Angular to disable the input.
|
|
1527
|
-
setDisabledState(disabled) {
|
|
1528
|
-
this.disabled = disabled;
|
|
1529
|
-
}
|
|
1530
|
-
validate(control) {
|
|
1531
|
-
if (control.value) {
|
|
1532
|
-
if ((this.supportedCountryISOs &&
|
|
1533
|
-
this.supportedCountryISOs.length > 0 &&
|
|
1534
|
-
this.supportedCountryISOs.indexOf(control.value.iso2) < 0) ||
|
|
1535
|
-
!this.countries.find((country) => country.iso2 === control.value.iso2)) {
|
|
1536
|
-
return { unsupportedCountry: true };
|
|
1537
|
-
}
|
|
1538
|
-
}
|
|
1539
|
-
return null;
|
|
1540
|
-
}
|
|
1541
|
-
writeValue(value) {
|
|
1542
|
-
this.selectedCountry = value;
|
|
1543
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
|
|
1544
|
-
}
|
|
1545
|
-
}
|
|
1546
|
-
_SkyCountryFieldComponent_changeDetector = new WeakMap(), _SkyCountryFieldComponent_defaultCountryData = new WeakMap(), _SkyCountryFieldComponent_elRef = new WeakMap(), _SkyCountryFieldComponent_idle = new WeakMap(), _SkyCountryFieldComponent_injector = new WeakMap(), _SkyCountryFieldComponent_internalFormChange = new WeakMap(), _SkyCountryFieldComponent_isInitialChange = new WeakMap(), _SkyCountryFieldComponent_ngControl = new WeakMap(), _SkyCountryFieldComponent_ngUnsubscribe = new WeakMap(), _SkyCountryFieldComponent_themeSvc = new WeakMap(), _SkyCountryFieldComponent_windowRef = new WeakMap(), _SkyCountryFieldComponent__defaultCountry = new WeakMap(), _SkyCountryFieldComponent__disabled = new WeakMap(), _SkyCountryFieldComponent__hideSelectedCountryFlag = new WeakMap(), _SkyCountryFieldComponent__includePhoneInfo = new WeakMap(), _SkyCountryFieldComponent__selectedCountry = new WeakMap(), _SkyCountryFieldComponent__supportedCountryISOs = new WeakMap(), _SkyCountryFieldComponent_instances = new WeakSet(), _SkyCountryFieldComponent_addEventListeners = function _SkyCountryFieldComponent_addEventListeners() {
|
|
1547
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_removeEventListeners).call(this);
|
|
1548
|
-
__classPrivateFieldSet(this, _SkyCountryFieldComponent_idle, new Subject(), "f");
|
|
1549
|
-
const documentObj = __classPrivateFieldGet(this, _SkyCountryFieldComponent_windowRef, "f").nativeWindow.document;
|
|
1550
|
-
fromEvent(documentObj, 'mousedown')
|
|
1551
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyCountryFieldComponent_idle, "f")))
|
|
1552
|
-
.subscribe((event) => {
|
|
1553
|
-
this.isInputFocused = __classPrivateFieldGet(this, _SkyCountryFieldComponent_elRef, "f").nativeElement.contains(event.target);
|
|
1554
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
|
|
1555
|
-
});
|
|
1556
|
-
fromEvent(documentObj, 'focusin')
|
|
1557
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyCountryFieldComponent_idle, "f")))
|
|
1558
|
-
.subscribe((event) => {
|
|
1559
|
-
this.isInputFocused = __classPrivateFieldGet(this, _SkyCountryFieldComponent_elRef, "f").nativeElement.contains(event.target);
|
|
1560
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_changeDetector, "f").markForCheck();
|
|
1561
|
-
});
|
|
1562
|
-
}, _SkyCountryFieldComponent_countriesAreEqual = function _SkyCountryFieldComponent_countriesAreEqual(country1, country2) {
|
|
1563
|
-
if (country1 && country2) {
|
|
1564
|
-
return country1.iso2 === country2.iso2;
|
|
1565
|
-
}
|
|
1566
|
-
// NOTE: We are doing this in this way because template forms will send through `null`
|
|
1567
|
-
// and then `undefined` on empty initialization. These are functionally equivalent but will
|
|
1568
|
-
// not pass a standard triple equals check.
|
|
1569
|
-
return !country1 && !country2;
|
|
1570
|
-
}, _SkyCountryFieldComponent_countriesEqual = function _SkyCountryFieldComponent_countriesEqual(a, b) {
|
|
1571
|
-
return a.iso2 === b.iso2 && a.name === b.name;
|
|
1572
|
-
}, _SkyCountryFieldComponent_removeEventListeners = function _SkyCountryFieldComponent_removeEventListeners() {
|
|
1573
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_idle, "f").next();
|
|
1574
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_idle, "f").complete();
|
|
1575
|
-
}, _SkyCountryFieldComponent_setupCountries = function _SkyCountryFieldComponent_setupCountries() {
|
|
1576
|
-
/**
|
|
1577
|
-
* The json functions here ensures that we get a copy of the array and not the global original.
|
|
1578
|
-
* This ensures that multiple instances of the component don't overwrite the original data.
|
|
1579
|
-
*
|
|
1580
|
-
* We must type the window object as any here as the intl-tel-input library adds its object
|
|
1581
|
-
* to the main window object.
|
|
1582
|
-
*/
|
|
1583
|
-
this.countries = JSON.parse(
|
|
1584
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1585
|
-
JSON.stringify(window.intlTelInputGlobals.getCountryData()));
|
|
1586
|
-
// Ignoring coverage here as this will be removed in the next release.
|
|
1587
|
-
// istanbul ignore next
|
|
1588
|
-
if (!this.includePhoneInfo && !this.hideSelectedCountryFlag) {
|
|
1589
|
-
if (__classPrivateFieldGet(this, _SkyCountryFieldComponent_elRef, "f").nativeElement.parentElement?.classList?.contains('sky-phone-field-country-search')) {
|
|
1590
|
-
this.includePhoneInfo = true;
|
|
1591
|
-
this.hideSelectedCountryFlag = true;
|
|
1592
|
-
}
|
|
1593
|
-
}
|
|
1594
|
-
/* istanbul ignore else */
|
|
1595
|
-
if (!this.includePhoneInfo) {
|
|
1596
|
-
/**
|
|
1597
|
-
* The library we get the country data from includes extra phone properties.
|
|
1598
|
-
* We want to remove these unless we are in a phone field
|
|
1599
|
-
*/
|
|
1600
|
-
this.countries.forEach((country) => {
|
|
1601
|
-
delete country.dialCode;
|
|
1602
|
-
delete country.areaCodes;
|
|
1603
|
-
delete country.priority;
|
|
1604
|
-
});
|
|
1605
|
-
}
|
|
1606
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault).call(this, this.selectedCountry);
|
|
1607
|
-
if (this.supportedCountryISOs && this.supportedCountryISOs.length > 0) {
|
|
1608
|
-
this.countries = this.countries.filter((country) => {
|
|
1609
|
-
return this.supportedCountryISOs.indexOf(country.iso2) >= 0;
|
|
1610
|
-
});
|
|
1611
|
-
}
|
|
1612
|
-
}, _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault = function _SkyCountryFieldComponent_sortCountriesWithSelectedAndDefault(selectedCountry) {
|
|
1613
|
-
let selectedCountryIndex;
|
|
1614
|
-
let selectedCountryData;
|
|
1615
|
-
const sortedNewCountries = this.countries.sort((a, b) => {
|
|
1616
|
-
if (((__classPrivateFieldGet(this, _SkyCountryFieldComponent_defaultCountryData, "f") &&
|
|
1617
|
-
__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_countriesEqual).call(this, a, __classPrivateFieldGet(this, _SkyCountryFieldComponent_defaultCountryData, "f"))) ||
|
|
1618
|
-
(a.name && b.name && a.name < b.name)) &&
|
|
1619
|
-
(!__classPrivateFieldGet(this, _SkyCountryFieldComponent_defaultCountryData, "f") ||
|
|
1620
|
-
!__classPrivateFieldGet(this, _SkyCountryFieldComponent_instances, "m", _SkyCountryFieldComponent_countriesEqual).call(this, __classPrivateFieldGet(this, _SkyCountryFieldComponent_defaultCountryData, "f"), b))) {
|
|
1621
|
-
return -1;
|
|
1622
|
-
}
|
|
1623
|
-
else {
|
|
1624
|
-
return 1;
|
|
1625
|
-
}
|
|
1626
|
-
});
|
|
1627
|
-
if (selectedCountry) {
|
|
1628
|
-
// Note: We are looking up this data here to ensure we are using the official data from the
|
|
1629
|
-
// library and not the data provided by the user on initialization of the component
|
|
1630
|
-
const foundCountry = this.countries.find((country) => country.iso2 === selectedCountry.iso2.toLocaleLowerCase());
|
|
1631
|
-
if (foundCountry) {
|
|
1632
|
-
selectedCountryData = foundCountry;
|
|
1633
|
-
selectedCountryIndex = this.countries.indexOf(selectedCountryData);
|
|
1634
|
-
if (selectedCountryIndex >= 0) {
|
|
1635
|
-
this.countries.splice(selectedCountryIndex, 1);
|
|
1636
|
-
sortedNewCountries.splice(0, 0, selectedCountryData);
|
|
1637
|
-
}
|
|
1638
|
-
}
|
|
1639
|
-
}
|
|
1640
|
-
this.countries = sortedNewCountries;
|
|
1641
|
-
}, _SkyCountryFieldComponent_updateInputBox = function _SkyCountryFieldComponent_updateInputBox() {
|
|
1642
|
-
if (this.inputBoxHostSvc && this.inputTemplateRef) {
|
|
1643
|
-
this.inputId = this.inputBoxHostSvc.controlId;
|
|
1644
|
-
this.inputBoxHostSvc.populate({
|
|
1645
|
-
inputTemplate: this.inputTemplateRef,
|
|
1646
|
-
iconsInsetTemplate: this.currentTheme === 'modern'
|
|
1647
|
-
? this.searchIconTemplateRef
|
|
1648
|
-
: undefined,
|
|
1649
|
-
});
|
|
1650
|
-
}
|
|
1651
|
-
};
|
|
1652
|
-
SkyCountryFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCountryFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAppWindowRef }, { token: i0.Injector }, { token: i5.SkyInputBoxHostService, optional: true }, { token: i8.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1653
|
-
SkyCountryFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyCountryFieldComponent, selector: "sky-country-field", inputs: { autocompleteAttribute: "autocompleteAttribute", defaultCountry: "defaultCountry", disabled: "disabled", hideSelectedCountryFlag: "hideSelectedCountryFlag", includePhoneInfo: "includePhoneInfo", supportedCountryISOs: "supportedCountryISOs" }, outputs: { selectedCountryChange: "selectedCountryChange" }, providers: [SKY_COUNTRY_FIELD_VALIDATOR], viewQueries: [{ propertyName: "countrySearchAutocompleteDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <span\n class=\"sky-country-field-container\"\n [ngClass]=\"{\n 'sky-country-field-disabled': disabled\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"inputId\"\n [data]=\"countries\"\n [propertiesToSearch]=\"['name', 'iso2']\"\n [searchResultTemplate]=\"countrySearchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n (selectionChange)=\"onCountrySelected($event)\"\n >\n <div\n class=\"sky-country-field-input\"\n [ngClass]=\"{\n 'sky-country-field-input-with-flag':\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n }\"\n >\n <div\n *ngIf=\"\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n \"\n class=\"sky-country-field-flag\"\n >\n <div\n class=\"iti__flag\"\n [ngClass]=\"'iti__' + selectedCountry.iso2.toLowerCase()\"\n ></div>\n </div>\n <textarea\n class=\"sky-form-control\"\n name=\"selectedCountry\"\n rows=\"1\"\n skyAutocomplete\n [attr.aria-label]=\"\n 'skyux_country_field_search_placeholder' | skyLibResources\n \"\n [attr.id]=\"inputId\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [formControl]=\"countrySearchFormControl\"\n [placeholder]=\"\n context?.showPlaceholderText || currentTheme === 'default'\n ? ('skyux_country_field_search_placeholder' | skyLibResources)\n : ''\n \"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n </div>\n </sky-autocomplete>\n </span>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n <div\n class=\"sky-country-field-search-result-flag\"\n [ngClass]=\"'iti__flag iti__' + item.iso2.toLowerCase()\"\n ></div>\n {{ item.name }}\n <span *ngIf=\"includePhoneInfo\" class=\"sky-deemphasized\">\n {{ item.dialCode }}\n </span>\n</ng-template>\n\n<!-- This template should only be used in modern theme input boxes. -->\n<ng-template #searchIconTemplateRef>\n <div class=\"sky-input-group-icon sky-input-box-icon-inset\">\n <sky-icon iconType=\"skyux\" icon=\"search\"></sky-icon>\n </div>\n</ng-template>\n", styles: [".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box;-moz-box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;text-align:left;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px #0003;background-color:#fff;border:1px solid #CCC;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #CCC}.iti__country{padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:#0000000d}.iti__flag-box,.iti__country-name,.iti__dial-code{vertical-align:middle}.iti__flag-box,.iti__country-name{margin-right:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:#0000000d}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:#0000000d}.iti--separate-dial-code .iti__selected-dial-code{margin-left:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{inset:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0 0 1px #888;background-image:url(../img/flags.png);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-image:url(../img/flags@2x.png)}}.iti__flag.iti__np{background-color:transparent}.sky-country-field-country-btn+::ng-deep .sky-form-control{border-left:none}.sky-country-field-container{width:100%}.sky-country-field-search-result-flag{display:inline-block;margin-right:5px}.sky-country-field-flag{display:none}.sky-country-field-disabled .sky-country-field-input{cursor:default;background-color:#cdcfd2}.sky-country-field-disabled .sky-country-field-flag{opacity:.65}.sky-country-field-input{cursor:text;display:flex;position:relative}.sky-country-field-input .sky-country-field-flag{align-items:center;margin-bottom:auto;margin-top:auto;position:absolute;left:13px;height:35px;bottom:0}.sky-country-field-input textarea{overflow:hidden;resize:none;white-space:nowrap}.sky-country-field-input-with-flag .sky-country-field-flag{display:flex}.sky-country-field-input-with-flag .sky-form-control{padding-left:40px}.sky-country-field-country-selected,.sky-country-field-country-default{border-bottom:1px solid #e2e3e4}:host(.ng-invalid.ng-touched) .sky-country-field-input textarea{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}::ng-deep .sky-theme-modern .sky-country-field-disabled .sky-country-field-flag{filter:grayscale(100%)}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input{background-color:transparent;border-radius:6px}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input textarea.sky-form-control{overflow:hidden;resize:none;white-space:nowrap}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-country-field-flag{height:40px;left:15px;opacity:1}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-form-control{padding-left:45px}.iti__flag{max-width:25px;max-height:13px;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags.webp)!important}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag .iti__flag{background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags@2x.webp)!important}}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1654
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCountryFieldComponent, decorators: [{
|
|
1655
|
-
type: Component,
|
|
1656
|
-
args: [{ selector: 'sky-country-field', providers: [SKY_COUNTRY_FIELD_VALIDATOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <span\n class=\"sky-country-field-container\"\n [ngClass]=\"{\n 'sky-country-field-disabled': disabled\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"inputId\"\n [data]=\"countries\"\n [propertiesToSearch]=\"['name', 'iso2']\"\n [searchResultTemplate]=\"countrySearchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n (selectionChange)=\"onCountrySelected($event)\"\n >\n <div\n class=\"sky-country-field-input\"\n [ngClass]=\"{\n 'sky-country-field-input-with-flag':\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n }\"\n >\n <div\n *ngIf=\"\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n \"\n class=\"sky-country-field-flag\"\n >\n <div\n class=\"iti__flag\"\n [ngClass]=\"'iti__' + selectedCountry.iso2.toLowerCase()\"\n ></div>\n </div>\n <textarea\n class=\"sky-form-control\"\n name=\"selectedCountry\"\n rows=\"1\"\n skyAutocomplete\n [attr.aria-label]=\"\n 'skyux_country_field_search_placeholder' | skyLibResources\n \"\n [attr.id]=\"inputId\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [formControl]=\"countrySearchFormControl\"\n [placeholder]=\"\n context?.showPlaceholderText || currentTheme === 'default'\n ? ('skyux_country_field_search_placeholder' | skyLibResources)\n : ''\n \"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n </div>\n </sky-autocomplete>\n </span>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n <div\n class=\"sky-country-field-search-result-flag\"\n [ngClass]=\"'iti__flag iti__' + item.iso2.toLowerCase()\"\n ></div>\n {{ item.name }}\n <span *ngIf=\"includePhoneInfo\" class=\"sky-deemphasized\">\n {{ item.dialCode }}\n </span>\n</ng-template>\n\n<!-- This template should only be used in modern theme input boxes. -->\n<ng-template #searchIconTemplateRef>\n <div class=\"sky-input-group-icon sky-input-box-icon-inset\">\n <sky-icon iconType=\"skyux\" icon=\"search\"></sky-icon>\n </div>\n</ng-template>\n", styles: [".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box;-moz-box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;text-align:left;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px #0003;background-color:#fff;border:1px solid #CCC;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #CCC}.iti__country{padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:#0000000d}.iti__flag-box,.iti__country-name,.iti__dial-code{vertical-align:middle}.iti__flag-box,.iti__country-name{margin-right:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:#0000000d}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:#0000000d}.iti--separate-dial-code .iti__selected-dial-code{margin-left:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{inset:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0 0 1px #888;background-image:url(../img/flags.png);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-image:url(../img/flags@2x.png)}}.iti__flag.iti__np{background-color:transparent}.sky-country-field-country-btn+::ng-deep .sky-form-control{border-left:none}.sky-country-field-container{width:100%}.sky-country-field-search-result-flag{display:inline-block;margin-right:5px}.sky-country-field-flag{display:none}.sky-country-field-disabled .sky-country-field-input{cursor:default;background-color:#cdcfd2}.sky-country-field-disabled .sky-country-field-flag{opacity:.65}.sky-country-field-input{cursor:text;display:flex;position:relative}.sky-country-field-input .sky-country-field-flag{align-items:center;margin-bottom:auto;margin-top:auto;position:absolute;left:13px;height:35px;bottom:0}.sky-country-field-input textarea{overflow:hidden;resize:none;white-space:nowrap}.sky-country-field-input-with-flag .sky-country-field-flag{display:flex}.sky-country-field-input-with-flag .sky-form-control{padding-left:40px}.sky-country-field-country-selected,.sky-country-field-country-default{border-bottom:1px solid #e2e3e4}:host(.ng-invalid.ng-touched) .sky-country-field-input textarea{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}::ng-deep .sky-theme-modern .sky-country-field-disabled .sky-country-field-flag{filter:grayscale(100%)}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input{background-color:transparent;border-radius:6px}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input textarea.sky-form-control{overflow:hidden;resize:none;white-space:nowrap}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-country-field-flag{height:40px;left:15px;opacity:1}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-form-control{padding-left:45px}.iti__flag{max-width:25px;max-height:13px;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags.webp)!important}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag .iti__flag{background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.2/assets/images/intl-tel-input/flags@2x.webp)!important}}\n"] }]
|
|
1657
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAppWindowRef }, { type: i0.Injector }, { type: i5.SkyInputBoxHostService, decorators: [{
|
|
1658
|
-
type: Optional
|
|
1659
|
-
}] }, { type: i8.SkyThemeService, decorators: [{
|
|
1660
|
-
type: Optional
|
|
1661
|
-
}] }]; }, propDecorators: { autocompleteAttribute: [{
|
|
1662
|
-
type: Input
|
|
1663
|
-
}], defaultCountry: [{
|
|
1664
|
-
type: Input
|
|
1665
|
-
}], disabled: [{
|
|
1666
|
-
type: Input
|
|
1667
|
-
}], hideSelectedCountryFlag: [{
|
|
1668
|
-
type: Input
|
|
1669
|
-
}], includePhoneInfo: [{
|
|
1670
|
-
type: Input
|
|
1671
|
-
}], supportedCountryISOs: [{
|
|
1672
|
-
type: Input
|
|
1673
|
-
}], selectedCountryChange: [{
|
|
1674
|
-
type: Output
|
|
1675
|
-
}], countrySearchAutocompleteDirective: [{
|
|
1676
|
-
type: ViewChild,
|
|
1677
|
-
args: [SkyAutocompleteInputDirective]
|
|
1678
|
-
}], inputTemplateRef: [{
|
|
1679
|
-
type: ViewChild,
|
|
1680
|
-
args: ['inputTemplateRef', {
|
|
1681
|
-
read: TemplateRef,
|
|
1682
|
-
static: true,
|
|
1683
|
-
}]
|
|
1684
|
-
}], searchIconTemplateRef: [{
|
|
1685
|
-
type: ViewChild,
|
|
1686
|
-
args: ['searchIconTemplateRef', {
|
|
1687
|
-
read: TemplateRef,
|
|
1688
|
-
static: true,
|
|
1689
|
-
}]
|
|
1690
|
-
}] } });
|
|
1691
|
-
|
|
1692
|
-
class SkyCountryFieldModule {
|
|
1693
|
-
}
|
|
1694
|
-
SkyCountryFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCountryFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1695
|
-
SkyCountryFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyCountryFieldModule, declarations: [SkyCountryFieldComponent], imports: [CommonModule,
|
|
1696
|
-
FormsModule,
|
|
1697
|
-
ReactiveFormsModule,
|
|
1698
|
-
SkyAutocompleteModule,
|
|
1699
|
-
SkyIconModule,
|
|
1700
|
-
SkyI18nModule,
|
|
1701
|
-
SkyLookupResourcesModule,
|
|
1702
|
-
SkyThemeModule], exports: [SkyCountryFieldComponent] });
|
|
1703
|
-
SkyCountryFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCountryFieldModule, imports: [CommonModule,
|
|
1704
|
-
FormsModule,
|
|
1705
|
-
ReactiveFormsModule,
|
|
1706
|
-
SkyAutocompleteModule,
|
|
1707
|
-
SkyIconModule,
|
|
1708
|
-
SkyI18nModule,
|
|
1709
|
-
SkyLookupResourcesModule,
|
|
1710
|
-
SkyThemeModule] });
|
|
1711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCountryFieldModule, decorators: [{
|
|
1712
|
-
type: NgModule,
|
|
1713
|
-
args: [{
|
|
1714
|
-
declarations: [SkyCountryFieldComponent],
|
|
1715
|
-
imports: [
|
|
1716
|
-
CommonModule,
|
|
1717
|
-
FormsModule,
|
|
1718
|
-
ReactiveFormsModule,
|
|
1719
|
-
SkyAutocompleteModule,
|
|
1720
|
-
SkyIconModule,
|
|
1721
|
-
SkyI18nModule,
|
|
1722
|
-
SkyLookupResourcesModule,
|
|
1723
|
-
SkyThemeModule,
|
|
1724
|
-
],
|
|
1725
|
-
exports: [SkyCountryFieldComponent],
|
|
1726
|
-
}]
|
|
1727
|
-
}] });
|
|
1728
|
-
|
|
1729
|
-
var _SkySearchAdapterService_instances, _SkySearchAdapterService_renderer, _SkySearchAdapterService_getInputContainerEl, _SkySearchAdapterService_getSearchOpenButtonEl, _SkySearchAdapterService_getSearchContainerEl, _SkySearchAdapterService_getInputEl;
|
|
1730
|
-
/**
|
|
1731
|
-
* @internal
|
|
1732
|
-
*/
|
|
1733
|
-
class SkySearchAdapterService {
|
|
1734
|
-
constructor(renderer) {
|
|
1735
|
-
_SkySearchAdapterService_instances.add(this);
|
|
1736
|
-
_SkySearchAdapterService_renderer.set(this, void 0);
|
|
1737
|
-
__classPrivateFieldSet(this, _SkySearchAdapterService_renderer, renderer, "f");
|
|
1738
|
-
}
|
|
1739
|
-
selectInput(searchEl) {
|
|
1740
|
-
__classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputEl).call(this, searchEl).select();
|
|
1741
|
-
}
|
|
1742
|
-
focusInput(searchEl) {
|
|
1743
|
-
__classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputEl).call(this, searchEl).focus();
|
|
1744
|
-
}
|
|
1745
|
-
startInputAnimation(searchEl) {
|
|
1746
|
-
const buttonWidth = __classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getSearchOpenButtonEl).call(this, searchEl).clientWidth;
|
|
1747
|
-
const offsetWidth = __classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getSearchContainerEl).call(this, searchEl).offsetLeft;
|
|
1748
|
-
const minWidth = buttonWidth + offsetWidth;
|
|
1749
|
-
__classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputContainerEl).call(this, searchEl).style.minWidth =
|
|
1750
|
-
minWidth.toString() + 'px';
|
|
1751
|
-
__classPrivateFieldGet(this, _SkySearchAdapterService_renderer, "f").setStyle(__classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputContainerEl).call(this, searchEl), 'min-width', minWidth.toString() + 'px');
|
|
1752
|
-
}
|
|
1753
|
-
endInputAnimation(searchEl) {
|
|
1754
|
-
__classPrivateFieldGet(this, _SkySearchAdapterService_renderer, "f").setStyle(__classPrivateFieldGet(this, _SkySearchAdapterService_instances, "m", _SkySearchAdapterService_getInputContainerEl).call(this, searchEl), 'min-width', '');
|
|
1755
|
-
}
|
|
1756
|
-
}
|
|
1757
|
-
_SkySearchAdapterService_renderer = new WeakMap(), _SkySearchAdapterService_instances = new WeakSet(), _SkySearchAdapterService_getInputContainerEl = function _SkySearchAdapterService_getInputContainerEl(searchEl) {
|
|
1758
|
-
return searchEl.nativeElement.querySelector('.sky-search-input-container');
|
|
1759
|
-
}, _SkySearchAdapterService_getSearchOpenButtonEl = function _SkySearchAdapterService_getSearchOpenButtonEl(searchEl) {
|
|
1760
|
-
return searchEl.nativeElement.querySelector('.sky-search-btn-open');
|
|
1761
|
-
}, _SkySearchAdapterService_getSearchContainerEl = function _SkySearchAdapterService_getSearchContainerEl(searchEl) {
|
|
1762
|
-
return searchEl.nativeElement.querySelector('.sky-search-container');
|
|
1763
|
-
}, _SkySearchAdapterService_getInputEl = function _SkySearchAdapterService_getInputEl(searchEl) {
|
|
1764
|
-
return searchEl.nativeElement.querySelector('input');
|
|
1765
|
-
};
|
|
1766
|
-
SkySearchAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySearchAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1767
|
-
SkySearchAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySearchAdapterService });
|
|
1768
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySearchAdapterService, decorators: [{
|
|
1769
|
-
type: Injectable
|
|
1770
|
-
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
|
|
1771
|
-
|
|
1772
|
-
var _SkySearchComponent_instances, _SkySearchComponent_changeRef, _SkySearchComponent_elRef, _SkySearchComponent_mediaQueryService, _SkySearchComponent_searchAdapter, _SkySearchComponent_searchUpdated, _SkySearchComponent_searchUpdatedSub, _SkySearchComponent__debounceTime, _SkySearchComponent__disabled, _SkySearchComponent__expandMode, _SkySearchComponent_searchBindingChanged, _SkySearchComponent_expandModeBindingChanged, _SkySearchComponent_shouldOpenInput, _SkySearchComponent_mediaQueryCallback, _SkySearchComponent_searchShouldCollapse, _SkySearchComponent_setupSearchChangedEvent;
|
|
1773
|
-
const INPUT_SHOWN_STATE = 'inputShown';
|
|
1774
|
-
const INPUT_HIDDEN_STATE = 'inputHidden';
|
|
1775
|
-
const EXPAND_MODE_RESPONSIVE = 'responsive';
|
|
1776
|
-
const EXPAND_MODE_FIT = 'fit';
|
|
1777
|
-
const EXPAND_MODE_NONE = 'none';
|
|
1778
|
-
class SkySearchComponent {
|
|
1779
|
-
/**
|
|
1780
|
-
* The expand mode for the search input. The valid options
|
|
1781
|
-
* include `"responsive"` to collapse the search input into a button on
|
|
1782
|
-
* mobile devices, `"none"` to *not* collapse the search input on mobile
|
|
1783
|
-
* devices, and `"fit"` to extend the search input to fit the width of its container.
|
|
1784
|
-
* @default "responsive"
|
|
1785
|
-
*/
|
|
1786
|
-
set expandMode(value) {
|
|
1787
|
-
__classPrivateFieldSet(this, _SkySearchComponent__expandMode, value ?? EXPAND_MODE_RESPONSIVE, "f");
|
|
1788
|
-
}
|
|
1789
|
-
get expandMode() {
|
|
1790
|
-
return __classPrivateFieldGet(this, _SkySearchComponent__expandMode, "f");
|
|
1791
|
-
}
|
|
1792
|
-
/**
|
|
1793
|
-
* How many milliseconds to wait before searching after users enter text in the search input.
|
|
1794
|
-
* @default 0
|
|
1795
|
-
*/
|
|
1796
|
-
set debounceTime(value) {
|
|
1797
|
-
__classPrivateFieldSet(this, _SkySearchComponent__debounceTime, value ?? 0, "f");
|
|
1798
|
-
__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_setupSearchChangedEvent).call(this);
|
|
1799
|
-
}
|
|
1800
|
-
get debounceTime() {
|
|
1801
|
-
return __classPrivateFieldGet(this, _SkySearchComponent__debounceTime, "f");
|
|
1802
|
-
}
|
|
1803
|
-
/**
|
|
1804
|
-
* Whether to disable the filter button.
|
|
1805
|
-
* @default false
|
|
1806
|
-
*/
|
|
1807
|
-
set disabled(value) {
|
|
1808
|
-
__classPrivateFieldSet(this, _SkySearchComponent__disabled, value ?? false, "f");
|
|
1809
|
-
}
|
|
1810
|
-
get disabled() {
|
|
1811
|
-
return __classPrivateFieldGet(this, _SkySearchComponent__disabled, "f");
|
|
1812
|
-
}
|
|
1813
|
-
constructor(mediaQueryService, elRef, searchAdapter, changeRef) {
|
|
1814
|
-
_SkySearchComponent_instances.add(this);
|
|
1815
|
-
/**
|
|
1816
|
-
* Fires when the search text is applied.
|
|
1817
|
-
*/
|
|
1818
|
-
this.searchApply = new EventEmitter();
|
|
1819
|
-
/**
|
|
1820
|
-
* Fires when the search text is changed.
|
|
1821
|
-
*/
|
|
1822
|
-
this.searchChange = new EventEmitter();
|
|
1823
|
-
/**
|
|
1824
|
-
* Fires when the search text is cleared.
|
|
1825
|
-
*/
|
|
1826
|
-
this.searchClear = new EventEmitter();
|
|
1827
|
-
this.clearButtonShown = false;
|
|
1828
|
-
this.dismissButtonShown = false;
|
|
1829
|
-
this.inputAnimate = INPUT_SHOWN_STATE;
|
|
1830
|
-
this.isCollapsible = true;
|
|
1831
|
-
this.isFullWidth = false;
|
|
1832
|
-
this.mobileSearchShown = false;
|
|
1833
|
-
this.searchButtonShown = false;
|
|
1834
|
-
_SkySearchComponent_changeRef.set(this, void 0);
|
|
1835
|
-
_SkySearchComponent_elRef.set(this, void 0);
|
|
1836
|
-
_SkySearchComponent_mediaQueryService.set(this, void 0);
|
|
1837
|
-
_SkySearchComponent_searchAdapter.set(this, void 0);
|
|
1838
|
-
_SkySearchComponent_searchUpdated.set(this, new Subject());
|
|
1839
|
-
_SkySearchComponent_searchUpdatedSub.set(this, void 0);
|
|
1840
|
-
_SkySearchComponent__debounceTime.set(this, 0);
|
|
1841
|
-
_SkySearchComponent__disabled.set(this, false);
|
|
1842
|
-
_SkySearchComponent__expandMode.set(this, EXPAND_MODE_RESPONSIVE);
|
|
1843
|
-
__classPrivateFieldSet(this, _SkySearchComponent_mediaQueryService, mediaQueryService, "f");
|
|
1844
|
-
__classPrivateFieldSet(this, _SkySearchComponent_elRef, elRef, "f");
|
|
1845
|
-
__classPrivateFieldSet(this, _SkySearchComponent_searchAdapter, searchAdapter, "f");
|
|
1846
|
-
__classPrivateFieldSet(this, _SkySearchComponent_changeRef, changeRef, "f");
|
|
1847
|
-
}
|
|
1848
|
-
ngOnInit() {
|
|
1849
|
-
if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
|
|
1850
|
-
this.breakpointSubscription = __classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").subscribe((args) => {
|
|
1851
|
-
__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_mediaQueryCallback).call(this, args);
|
|
1852
|
-
__classPrivateFieldGet(this, _SkySearchComponent_changeRef, "f").detectChanges();
|
|
1853
|
-
});
|
|
1854
|
-
}
|
|
1855
|
-
__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_setupSearchChangedEvent).call(this);
|
|
1856
|
-
}
|
|
1857
|
-
ngOnChanges(changes) {
|
|
1858
|
-
if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_expandModeBindingChanged).call(this, changes)) {
|
|
1859
|
-
switch (this.expandMode) {
|
|
1860
|
-
case EXPAND_MODE_NONE:
|
|
1861
|
-
this.isCollapsible = false;
|
|
1862
|
-
this.isFullWidth = false;
|
|
1863
|
-
break;
|
|
1864
|
-
case EXPAND_MODE_FIT:
|
|
1865
|
-
this.isCollapsible = false;
|
|
1866
|
-
this.isFullWidth = true;
|
|
1867
|
-
break;
|
|
1868
|
-
default:
|
|
1869
|
-
this.isCollapsible = true;
|
|
1870
|
-
this.isFullWidth = false;
|
|
1871
|
-
break;
|
|
1872
|
-
}
|
|
1873
|
-
}
|
|
1874
|
-
if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchBindingChanged).call(this, changes)) {
|
|
1875
|
-
this.clearButtonShown = !!(this.searchText && this.searchText !== '');
|
|
1876
|
-
if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_shouldOpenInput).call(this)) {
|
|
1877
|
-
this.inputAnimate = INPUT_SHOWN_STATE;
|
|
1878
|
-
}
|
|
1879
|
-
}
|
|
1880
|
-
__classPrivateFieldGet(this, _SkySearchComponent_changeRef, "f").detectChanges();
|
|
1881
|
-
}
|
|
1882
|
-
clearSearchText() {
|
|
1883
|
-
this.searchText = '';
|
|
1884
|
-
this.clearButtonShown = false;
|
|
1885
|
-
__classPrivateFieldGet(this, _SkySearchComponent_searchAdapter, "f").focusInput(__classPrivateFieldGet(this, _SkySearchComponent_elRef, "f"));
|
|
1886
|
-
this.searchChange.emit(this.searchText);
|
|
1887
|
-
this.searchApply.emit(this.searchText);
|
|
1888
|
-
this.searchClear.emit();
|
|
1889
|
-
}
|
|
1890
|
-
enterPress(event, searchText) {
|
|
1891
|
-
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
1892
|
-
this.applySearchText(searchText);
|
|
1893
|
-
}
|
|
1894
|
-
}
|
|
1895
|
-
applySearchText(searchText) {
|
|
1896
|
-
// Double check that search text is defined before attempting to trim off whitespace
|
|
1897
|
-
if (searchText) {
|
|
1898
|
-
searchText = searchText.trim();
|
|
1899
|
-
}
|
|
1900
|
-
if (searchText !== this.searchText) {
|
|
1901
|
-
this.searchText = searchText;
|
|
1902
|
-
}
|
|
1903
|
-
this.clearButtonShown = !!(searchText && searchText !== '');
|
|
1904
|
-
if (searchText && searchText !== '') {
|
|
1905
|
-
__classPrivateFieldGet(this, _SkySearchComponent_searchAdapter, "f").selectInput(__classPrivateFieldGet(this, _SkySearchComponent_elRef, "f"));
|
|
1906
|
-
}
|
|
1907
|
-
this.searchApply.emit(searchText);
|
|
1908
|
-
}
|
|
1909
|
-
searchTextChanged(searchText) {
|
|
1910
|
-
this.searchText = searchText;
|
|
1911
|
-
__classPrivateFieldGet(this, _SkySearchComponent_searchUpdated, "f").next(searchText);
|
|
1912
|
-
}
|
|
1913
|
-
toggleSearchInput(showInput) {
|
|
1914
|
-
if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
|
|
1915
|
-
if (showInput) {
|
|
1916
|
-
this.inputAnimate = INPUT_SHOWN_STATE;
|
|
1917
|
-
}
|
|
1918
|
-
else {
|
|
1919
|
-
this.inputAnimate = INPUT_HIDDEN_STATE;
|
|
1920
|
-
}
|
|
1921
|
-
}
|
|
1922
|
-
}
|
|
1923
|
-
inputAnimationStart(event) {
|
|
1924
|
-
if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
|
|
1925
|
-
__classPrivateFieldGet(this, _SkySearchComponent_searchAdapter, "f").startInputAnimation(__classPrivateFieldGet(this, _SkySearchComponent_elRef, "f"));
|
|
1926
|
-
if (event.toState === INPUT_SHOWN_STATE &&
|
|
1927
|
-
__classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.xs) {
|
|
1928
|
-
this.mobileSearchShown = true;
|
|
1929
|
-
this.searchButtonShown = false;
|
|
1930
|
-
}
|
|
1931
|
-
}
|
|
1932
|
-
}
|
|
1933
|
-
inputAnimationEnd(event) {
|
|
1934
|
-
if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
|
|
1935
|
-
__classPrivateFieldGet(this, _SkySearchComponent_searchAdapter, "f").endInputAnimation(__classPrivateFieldGet(this, _SkySearchComponent_elRef, "f"));
|
|
1936
|
-
this.searchButtonShown =
|
|
1937
|
-
event.toState === INPUT_HIDDEN_STATE &&
|
|
1938
|
-
__classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.xs;
|
|
1939
|
-
if ((event.toState === INPUT_HIDDEN_STATE &&
|
|
1940
|
-
__classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.xs) ||
|
|
1941
|
-
__classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current !== SkyMediaBreakpoints.xs) {
|
|
1942
|
-
this.mobileSearchShown = false;
|
|
1943
|
-
}
|
|
1944
|
-
}
|
|
1945
|
-
}
|
|
1946
|
-
ngOnDestroy() {
|
|
1947
|
-
if (this.breakpointSubscription) {
|
|
1948
|
-
this.breakpointSubscription.unsubscribe();
|
|
1949
|
-
}
|
|
1950
|
-
__classPrivateFieldGet(this, _SkySearchComponent_searchUpdated, "f").complete();
|
|
1951
|
-
__classPrivateFieldGet(this, _SkySearchComponent_searchUpdatedSub, "f")?.unsubscribe();
|
|
1952
|
-
}
|
|
1953
|
-
}
|
|
1954
|
-
_SkySearchComponent_changeRef = new WeakMap(), _SkySearchComponent_elRef = new WeakMap(), _SkySearchComponent_mediaQueryService = new WeakMap(), _SkySearchComponent_searchAdapter = new WeakMap(), _SkySearchComponent_searchUpdated = new WeakMap(), _SkySearchComponent_searchUpdatedSub = new WeakMap(), _SkySearchComponent__debounceTime = new WeakMap(), _SkySearchComponent__disabled = new WeakMap(), _SkySearchComponent__expandMode = new WeakMap(), _SkySearchComponent_instances = new WeakSet(), _SkySearchComponent_searchBindingChanged = function _SkySearchComponent_searchBindingChanged(changes) {
|
|
1955
|
-
return (changes['searchText'] &&
|
|
1956
|
-
changes['searchText'].previousValue !== changes['searchText'].currentValue);
|
|
1957
|
-
}, _SkySearchComponent_expandModeBindingChanged = function _SkySearchComponent_expandModeBindingChanged(changes) {
|
|
1958
|
-
return (changes['expandMode'] &&
|
|
1959
|
-
changes['expandMode'].previousValue !== changes['expandMode'].currentValue);
|
|
1960
|
-
}, _SkySearchComponent_shouldOpenInput = function _SkySearchComponent_shouldOpenInput() {
|
|
1961
|
-
return (this.searchText !== '' &&
|
|
1962
|
-
__classPrivateFieldGet(this, _SkySearchComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.xs &&
|
|
1963
|
-
__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this));
|
|
1964
|
-
}, _SkySearchComponent_mediaQueryCallback = function _SkySearchComponent_mediaQueryCallback(args) {
|
|
1965
|
-
if (__classPrivateFieldGet(this, _SkySearchComponent_instances, "m", _SkySearchComponent_searchShouldCollapse).call(this)) {
|
|
1966
|
-
if (args === SkyMediaBreakpoints.xs) {
|
|
1967
|
-
this.inputAnimate = INPUT_HIDDEN_STATE;
|
|
1968
|
-
}
|
|
1969
|
-
else if (this.inputAnimate !== INPUT_SHOWN_STATE) {
|
|
1970
|
-
this.inputAnimate = INPUT_SHOWN_STATE;
|
|
1971
|
-
}
|
|
1972
|
-
else {
|
|
1973
|
-
this.mobileSearchShown = false;
|
|
1974
|
-
}
|
|
1975
|
-
}
|
|
1976
|
-
__classPrivateFieldGet(this, _SkySearchComponent_changeRef, "f").markForCheck();
|
|
1977
|
-
}, _SkySearchComponent_searchShouldCollapse = function _SkySearchComponent_searchShouldCollapse() {
|
|
1978
|
-
return ((this.isCollapsible || this.isCollapsible === undefined) &&
|
|
1979
|
-
this.isFullWidth !== true);
|
|
1980
|
-
}, _SkySearchComponent_setupSearchChangedEvent = function _SkySearchComponent_setupSearchChangedEvent() {
|
|
1981
|
-
__classPrivateFieldGet(this, _SkySearchComponent_searchUpdatedSub, "f")?.unsubscribe();
|
|
1982
|
-
__classPrivateFieldSet(this, _SkySearchComponent_searchUpdatedSub, __classPrivateFieldGet(this, _SkySearchComponent_searchUpdated, "f")
|
|
1983
|
-
.pipe(debounceTime(this.debounceTime), distinctUntilChanged())
|
|
1984
|
-
.subscribe((value) => {
|
|
1985
|
-
this.searchChange.emit(value);
|
|
1986
|
-
}), "f");
|
|
1987
|
-
};
|
|
1988
|
-
SkySearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySearchComponent, deps: [{ token: i1.SkyMediaQueryService }, { token: i0.ElementRef }, { token: SkySearchAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1989
|
-
SkySearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySearchComponent, selector: "sky-search", inputs: { searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n skyId\n #searchInput=\"skyId\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"times\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"close\"\n iconType=\"skyux\"\n size=\"sm\"\n ></sky-icon>\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplate\"\n ></ng-container>\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n <button\n *ngIf=\"mobileSearchShown\"\n class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"double-chevron-left\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"search\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"search\"\n iconType=\"skyux\"\n size=\"lg\"\n ></sky-icon>\n</ng-template>\n", styles: ["sky-search .sky-search-container .sky-form-group{margin-bottom:0}sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
|
|
1990
|
-
trigger('inputState', [
|
|
1991
|
-
state(INPUT_HIDDEN_STATE, style({
|
|
1992
|
-
opacity: 0,
|
|
1993
|
-
width: 0,
|
|
1994
|
-
})),
|
|
1995
|
-
state(INPUT_SHOWN_STATE, style({
|
|
1996
|
-
opacity: 1,
|
|
1997
|
-
width: '100%',
|
|
1998
|
-
})),
|
|
1999
|
-
transition('* <=> *', animate('150ms')),
|
|
2000
|
-
]),
|
|
2001
|
-
], encapsulation: i0.ViewEncapsulation.None });
|
|
2002
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySearchComponent, decorators: [{
|
|
2003
|
-
type: Component,
|
|
2004
|
-
args: [{ selector: 'sky-search', encapsulation: ViewEncapsulation.None, animations: [
|
|
2005
|
-
trigger('inputState', [
|
|
2006
|
-
state(INPUT_HIDDEN_STATE, style({
|
|
2007
|
-
opacity: 0,
|
|
2008
|
-
width: 0,
|
|
2009
|
-
})),
|
|
2010
|
-
state(INPUT_SHOWN_STATE, style({
|
|
2011
|
-
opacity: 1,
|
|
2012
|
-
width: '100%',
|
|
2013
|
-
})),
|
|
2014
|
-
transition('* <=> *', animate('150ms')),
|
|
2015
|
-
]),
|
|
2016
|
-
], providers: [SkySearchAdapterService], template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n skyId\n #searchInput=\"skyId\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"times\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"close\"\n iconType=\"skyux\"\n size=\"sm\"\n ></sky-icon>\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplate\"\n ></ng-container>\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n <button\n *ngIf=\"mobileSearchShown\"\n class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"double-chevron-left\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"search\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"search\"\n iconType=\"skyux\"\n size=\"lg\"\n ></sky-icon>\n</ng-template>\n", styles: ["sky-search .sky-search-container .sky-form-group{margin-bottom:0}sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"] }]
|
|
2017
|
-
}], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }, { type: i0.ElementRef }, { type: SkySearchAdapterService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { searchApply: [{
|
|
2018
|
-
type: Output
|
|
2019
|
-
}], searchChange: [{
|
|
2020
|
-
type: Output
|
|
2021
|
-
}], searchClear: [{
|
|
2022
|
-
type: Output
|
|
2023
|
-
}], searchText: [{
|
|
2024
|
-
type: Input
|
|
2025
|
-
}], expandMode: [{
|
|
2026
|
-
type: Input
|
|
2027
|
-
}], debounceTime: [{
|
|
2028
|
-
type: Input
|
|
2029
|
-
}], disabled: [{
|
|
2030
|
-
type: Input
|
|
2031
|
-
}], placeholderText: [{
|
|
2032
|
-
type: Input
|
|
2033
|
-
}] } });
|
|
2034
|
-
|
|
2035
|
-
class SkySearchModule {
|
|
2036
|
-
}
|
|
2037
|
-
SkySearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2038
|
-
SkySearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkySearchModule, declarations: [SkySearchComponent], imports: [CommonModule,
|
|
2039
|
-
SkyInputBoxModule,
|
|
2040
|
-
SkyLookupResourcesModule,
|
|
2041
|
-
FormsModule,
|
|
2042
|
-
SkyIconModule,
|
|
2043
|
-
SkyThemeModule,
|
|
2044
|
-
SkyIdModule], exports: [SkySearchComponent] });
|
|
2045
|
-
SkySearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySearchModule, imports: [CommonModule,
|
|
2046
|
-
SkyInputBoxModule,
|
|
2047
|
-
SkyLookupResourcesModule,
|
|
2048
|
-
FormsModule,
|
|
2049
|
-
SkyIconModule,
|
|
2050
|
-
SkyThemeModule,
|
|
2051
|
-
SkyIdModule] });
|
|
2052
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySearchModule, decorators: [{
|
|
2053
|
-
type: NgModule,
|
|
2054
|
-
args: [{
|
|
2055
|
-
declarations: [SkySearchComponent],
|
|
2056
|
-
imports: [
|
|
2057
|
-
CommonModule,
|
|
2058
|
-
SkyInputBoxModule,
|
|
2059
|
-
SkyLookupResourcesModule,
|
|
2060
|
-
FormsModule,
|
|
2061
|
-
SkyIconModule,
|
|
2062
|
-
SkyThemeModule,
|
|
2063
|
-
SkyIdModule,
|
|
2064
|
-
],
|
|
2065
|
-
exports: [SkySearchComponent],
|
|
2066
|
-
}]
|
|
2067
|
-
}] });
|
|
2068
|
-
|
|
2069
|
-
/**
|
|
2070
|
-
* @internal
|
|
2071
|
-
*/
|
|
2072
|
-
class SkySelectionModalItemSelectedPipe {
|
|
2073
|
-
transform(id, selectedIdMap) {
|
|
2074
|
-
return selectedIdMap.has(id);
|
|
2075
|
-
}
|
|
2076
|
-
}
|
|
2077
|
-
SkySelectionModalItemSelectedPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalItemSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2078
|
-
SkySelectionModalItemSelectedPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" });
|
|
2079
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalItemSelectedPipe, decorators: [{
|
|
2080
|
-
type: Pipe,
|
|
2081
|
-
args: [{
|
|
2082
|
-
name: 'skySelectionModalItemSelected',
|
|
2083
|
-
}]
|
|
2084
|
-
}] });
|
|
2085
|
-
|
|
2086
|
-
/**
|
|
2087
|
-
* @internal
|
|
2088
|
-
* Context for the selection modal. These values are provided by the selection modal service.
|
|
2089
|
-
*/
|
|
2090
|
-
class SkySelectionModalContext {
|
|
2091
|
-
constructor(descriptorProperty, idProperty, initialSearch, initialValue, searchAsync, selectMode, showAddButton, userConfig) {
|
|
2092
|
-
this.descriptorProperty = descriptorProperty;
|
|
2093
|
-
this.idProperty = idProperty;
|
|
2094
|
-
this.initialSearch = initialSearch;
|
|
2095
|
-
this.initialValue = initialValue;
|
|
2096
|
-
this.searchAsync = searchAsync;
|
|
2097
|
-
this.selectMode = selectMode;
|
|
2098
|
-
this.showAddButton = showAddButton;
|
|
2099
|
-
this.userConfig = userConfig;
|
|
2100
|
-
}
|
|
2101
|
-
}
|
|
2102
|
-
|
|
2103
|
-
var _SkySelectionModalComponent_instances, _SkySelectionModalComponent_changeDetector, _SkySelectionModalComponent_continuationData, _SkySelectionModalComponent_currentSearchSub, _SkySelectionModalComponent_ngUnsubscribe, _SkySelectionModalComponent_offset, _SkySelectionModalComponent_loadSearchResults, _SkySelectionModalComponent_createInitialSelectedItemsMap, _SkySelectionModalComponent_performSearch, _SkySelectionModalComponent_cancelCurrentSearch;
|
|
2104
|
-
/**
|
|
2105
|
-
* @internal
|
|
2106
|
-
*/
|
|
2107
|
-
class SkySelectionModalComponent {
|
|
2108
|
-
constructor(modalInstance, context, changeDetector, idSvc) {
|
|
2109
|
-
this.modalInstance = modalInstance;
|
|
2110
|
-
this.context = context;
|
|
2111
|
-
_SkySelectionModalComponent_instances.add(this);
|
|
2112
|
-
/**
|
|
2113
|
-
* @internal
|
|
2114
|
-
* Fires when users select the button to add new options to the list.
|
|
2115
|
-
*/
|
|
2116
|
-
this.addClick = new Subject();
|
|
2117
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2118
|
-
this.displayedItems = [];
|
|
2119
|
-
this.hasMoreItems = false;
|
|
2120
|
-
this.isLoadingMore = false;
|
|
2121
|
-
this.isSearching = false;
|
|
2122
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2123
|
-
this.items = [];
|
|
2124
|
-
this.onlyShowSelected = false;
|
|
2125
|
-
this.repeaterItemTemplate = null;
|
|
2126
|
-
this.selectedIdMap = new Map();
|
|
2127
|
-
_SkySelectionModalComponent_changeDetector.set(this, void 0);
|
|
2128
|
-
_SkySelectionModalComponent_continuationData.set(this, void 0);
|
|
2129
|
-
_SkySelectionModalComponent_currentSearchSub.set(this, void 0);
|
|
2130
|
-
_SkySelectionModalComponent_ngUnsubscribe.set(this, new Subject());
|
|
2131
|
-
_SkySelectionModalComponent_offset.set(this, 0);
|
|
2132
|
-
__classPrivateFieldSet(this, _SkySelectionModalComponent_changeDetector, changeDetector, "f");
|
|
2133
|
-
this.id = idSvc.generateId();
|
|
2134
|
-
}
|
|
2135
|
-
ngOnInit() {
|
|
2136
|
-
this.repeaterItemTemplate = this.context.userConfig.itemTemplate || null;
|
|
2137
|
-
this.searchText = this.context.initialSearch;
|
|
2138
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_instances, "m", _SkySelectionModalComponent_createInitialSelectedItemsMap).call(this);
|
|
2139
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_instances, "m", _SkySelectionModalComponent_loadSearchResults).call(this);
|
|
2140
|
-
}
|
|
2141
|
-
ngOnDestroy() {
|
|
2142
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_instances, "m", _SkySelectionModalComponent_cancelCurrentSearch).call(this);
|
|
2143
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_ngUnsubscribe, "f").next();
|
|
2144
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_ngUnsubscribe, "f").complete();
|
|
2145
|
-
}
|
|
2146
|
-
addButtonClicked() {
|
|
2147
|
-
this.addClick.next();
|
|
2148
|
-
}
|
|
2149
|
-
clearAll() {
|
|
2150
|
-
this.selectedIdMap = new Map(this.selectedIdMap);
|
|
2151
|
-
// Only deselect items that have been loaded; items that would be loaded
|
|
2152
|
-
// after an infinite scroll event should remain selected.
|
|
2153
|
-
for (const item of this.items) {
|
|
2154
|
-
this.selectedIdMap.delete(item[this.context.idProperty]);
|
|
2155
|
-
}
|
|
2156
|
-
this.updateDisplayedItems();
|
|
2157
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_changeDetector, "f").markForCheck();
|
|
2158
|
-
}
|
|
2159
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2160
|
-
itemClick(selectedItem) {
|
|
2161
|
-
if (this.context.selectMode === 'single') {
|
|
2162
|
-
this.onItemSelect(!selectedItem.selected, selectedItem);
|
|
2163
|
-
}
|
|
2164
|
-
}
|
|
2165
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2166
|
-
addItem(itemToAdd) {
|
|
2167
|
-
// Add the selected item, then perform the search again in case the
|
|
2168
|
-
// newly-added item should be displayed as a search results.
|
|
2169
|
-
__classPrivateFieldSet(this, _SkySelectionModalComponent_offset, 0, "f");
|
|
2170
|
-
this.onItemSelect(true, itemToAdd);
|
|
2171
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_instances, "m", _SkySelectionModalComponent_loadSearchResults).call(this);
|
|
2172
|
-
}
|
|
2173
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2174
|
-
onItemSelect(newSelectState, itemToSelect) {
|
|
2175
|
-
const itemId = itemToSelect[this.context.idProperty];
|
|
2176
|
-
// Create a new Map so the pipe transform will execute on the next
|
|
2177
|
-
// change detection cycle.
|
|
2178
|
-
this.selectedIdMap = new Map(this.selectedIdMap);
|
|
2179
|
-
if (this.context.selectMode === 'single') {
|
|
2180
|
-
if (newSelectState) {
|
|
2181
|
-
this.selectedIdMap.clear();
|
|
2182
|
-
this.selectedIdMap.set(itemId, itemToSelect);
|
|
2183
|
-
}
|
|
2184
|
-
}
|
|
2185
|
-
else {
|
|
2186
|
-
if (newSelectState) {
|
|
2187
|
-
this.selectedIdMap.set(itemId, itemToSelect);
|
|
2188
|
-
}
|
|
2189
|
-
else {
|
|
2190
|
-
this.selectedIdMap.delete(itemId);
|
|
2191
|
-
}
|
|
2192
|
-
}
|
|
2193
|
-
this.updateDisplayedItems();
|
|
2194
|
-
}
|
|
2195
|
-
searchApplied(searchText) {
|
|
2196
|
-
__classPrivateFieldSet(this, _SkySelectionModalComponent_offset, 0, "f");
|
|
2197
|
-
this.searchText = searchText;
|
|
2198
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_instances, "m", _SkySelectionModalComponent_loadSearchResults).call(this);
|
|
2199
|
-
}
|
|
2200
|
-
selectAll() {
|
|
2201
|
-
this.selectedIdMap = new Map();
|
|
2202
|
-
for (const item of this.items) {
|
|
2203
|
-
this.selectedIdMap.set(item[this.context.idProperty], item);
|
|
2204
|
-
}
|
|
2205
|
-
this.updateDisplayedItems();
|
|
2206
|
-
}
|
|
2207
|
-
infiniteScrollEnd() {
|
|
2208
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_instances, "m", _SkySelectionModalComponent_cancelCurrentSearch).call(this);
|
|
2209
|
-
/* Sanity check - else case would only happen if this was called directly */
|
|
2210
|
-
/* istanbul ignore else */
|
|
2211
|
-
if (this.hasMoreItems) {
|
|
2212
|
-
this.isLoadingMore = true;
|
|
2213
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_instances, "m", _SkySelectionModalComponent_performSearch).call(this, (result) => {
|
|
2214
|
-
this.items = this.items.concat(result.items);
|
|
2215
|
-
this.updateDisplayedItems();
|
|
2216
|
-
this.isLoadingMore = false;
|
|
2217
|
-
});
|
|
2218
|
-
}
|
|
2219
|
-
}
|
|
2220
|
-
save() {
|
|
2221
|
-
const selectedItems = Array.from(this.selectedIdMap.values(), (itemData, index) => ({
|
|
2222
|
-
index,
|
|
2223
|
-
itemData,
|
|
2224
|
-
})).sort((a, b) => {
|
|
2225
|
-
return this.items.indexOf(a.itemData) < this.items.indexOf(b.itemData)
|
|
2226
|
-
? -1
|
|
2227
|
-
: 1;
|
|
2228
|
-
});
|
|
2229
|
-
this.modalInstance.save(selectedItems);
|
|
2230
|
-
}
|
|
2231
|
-
updateDisplayedItems() {
|
|
2232
|
-
if (this.onlyShowSelected) {
|
|
2233
|
-
this.displayedItems = this.items.filter((item) => this.selectedIdMap.has(item[this.context.idProperty]));
|
|
2234
|
-
}
|
|
2235
|
-
else {
|
|
2236
|
-
this.displayedItems = this.items;
|
|
2237
|
-
}
|
|
2238
|
-
}
|
|
2239
|
-
}
|
|
2240
|
-
_SkySelectionModalComponent_changeDetector = new WeakMap(), _SkySelectionModalComponent_continuationData = new WeakMap(), _SkySelectionModalComponent_currentSearchSub = new WeakMap(), _SkySelectionModalComponent_ngUnsubscribe = new WeakMap(), _SkySelectionModalComponent_offset = new WeakMap(), _SkySelectionModalComponent_instances = new WeakSet(), _SkySelectionModalComponent_loadSearchResults = function _SkySelectionModalComponent_loadSearchResults() {
|
|
2241
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_instances, "m", _SkySelectionModalComponent_cancelCurrentSearch).call(this);
|
|
2242
|
-
this.isSearching = true;
|
|
2243
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_instances, "m", _SkySelectionModalComponent_performSearch).call(this, (result) => {
|
|
2244
|
-
this.isSearching = false;
|
|
2245
|
-
this.items = result.items;
|
|
2246
|
-
});
|
|
2247
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_changeDetector, "f").markForCheck();
|
|
2248
|
-
}, _SkySelectionModalComponent_createInitialSelectedItemsMap = function _SkySelectionModalComponent_createInitialSelectedItemsMap() {
|
|
2249
|
-
this.selectedIdMap = new Map(this.context.initialValue.map((item) => [
|
|
2250
|
-
item[this.context.idProperty],
|
|
2251
|
-
item,
|
|
2252
|
-
]));
|
|
2253
|
-
}, _SkySelectionModalComponent_performSearch = function _SkySelectionModalComponent_performSearch(processResults) {
|
|
2254
|
-
__classPrivateFieldSet(this, _SkySelectionModalComponent_currentSearchSub, this.context
|
|
2255
|
-
.searchAsync({
|
|
2256
|
-
displayType: 'modal',
|
|
2257
|
-
offset: __classPrivateFieldGet(this, _SkySelectionModalComponent_offset, "f"),
|
|
2258
|
-
searchText: this.searchText || '',
|
|
2259
|
-
continuationData: __classPrivateFieldGet(this, _SkySelectionModalComponent_continuationData, "f"),
|
|
2260
|
-
})
|
|
2261
|
-
.pipe(take(1))
|
|
2262
|
-
.subscribe((result) => {
|
|
2263
|
-
processResults(result);
|
|
2264
|
-
__classPrivateFieldSet(this, _SkySelectionModalComponent_continuationData, result.continuationData, "f");
|
|
2265
|
-
this.hasMoreItems = result.hasMore || false;
|
|
2266
|
-
__classPrivateFieldSet(this, _SkySelectionModalComponent_offset, this.items.length, "f");
|
|
2267
|
-
this.updateDisplayedItems();
|
|
2268
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_changeDetector, "f").markForCheck();
|
|
2269
|
-
}), "f");
|
|
2270
|
-
}, _SkySelectionModalComponent_cancelCurrentSearch = function _SkySelectionModalComponent_cancelCurrentSearch() {
|
|
2271
|
-
if (__classPrivateFieldGet(this, _SkySelectionModalComponent_currentSearchSub, "f")) {
|
|
2272
|
-
__classPrivateFieldGet(this, _SkySelectionModalComponent_currentSearchSub, "f").unsubscribe();
|
|
2273
|
-
__classPrivateFieldSet(this, _SkySelectionModalComponent_currentSearchSub, undefined, "f");
|
|
2274
|
-
this.isLoadingMore = false;
|
|
2275
|
-
this.isSearching = false;
|
|
2276
|
-
}
|
|
2277
|
-
};
|
|
2278
|
-
SkySelectionModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkySelectionModalContext }, { token: i0.ChangeDetectorRef }, { token: i1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2279
|
-
SkySelectionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySelectionModalComponent, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-toolbar\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n (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 (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"!isSearching && displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected : selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [disabled]=\"isSearching\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\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: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
|
|
2281
|
-
type: Component,
|
|
2282
|
-
args: [{ selector: 'sky-selection-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-toolbar\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n (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 (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"!isSearching && displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected : selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [disabled]=\"isSearching\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\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"] }]
|
|
2283
|
-
}], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkySelectionModalContext }, { type: i0.ChangeDetectorRef }, { type: i1.SkyIdService }]; } });
|
|
2284
|
-
|
|
2285
|
-
class SkySelectionModalModule {
|
|
2286
|
-
}
|
|
2287
|
-
SkySelectionModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2288
|
-
SkySelectionModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalModule, declarations: [SkySelectionModalComponent, SkySelectionModalItemSelectedPipe], imports: [CommonModule,
|
|
2289
|
-
SkyCheckboxModule,
|
|
2290
|
-
SkyI18nModule,
|
|
2291
|
-
SkyIconModule,
|
|
2292
|
-
SkyInfiniteScrollModule,
|
|
2293
|
-
SkyModalModule,
|
|
2294
|
-
SkyRepeaterModule,
|
|
2295
|
-
SkySearchModule,
|
|
2296
|
-
SkyThemeModule,
|
|
2297
|
-
SkyToolbarModule,
|
|
2298
|
-
SkyViewkeeperModule,
|
|
2299
|
-
SkyWaitModule] });
|
|
2300
|
-
SkySelectionModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalModule, imports: [CommonModule,
|
|
2301
|
-
SkyCheckboxModule,
|
|
2302
|
-
SkyI18nModule,
|
|
2303
|
-
SkyIconModule,
|
|
2304
|
-
SkyInfiniteScrollModule,
|
|
2305
|
-
SkyModalModule,
|
|
2306
|
-
SkyRepeaterModule,
|
|
2307
|
-
SkySearchModule,
|
|
2308
|
-
SkyThemeModule,
|
|
2309
|
-
SkyToolbarModule,
|
|
2310
|
-
SkyViewkeeperModule,
|
|
2311
|
-
SkyWaitModule] });
|
|
2312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalModule, decorators: [{
|
|
2313
|
-
type: NgModule,
|
|
2314
|
-
args: [{
|
|
2315
|
-
declarations: [SkySelectionModalComponent, SkySelectionModalItemSelectedPipe],
|
|
2316
|
-
imports: [
|
|
2317
|
-
CommonModule,
|
|
2318
|
-
SkyCheckboxModule,
|
|
2319
|
-
SkyI18nModule,
|
|
2320
|
-
SkyIconModule,
|
|
2321
|
-
SkyInfiniteScrollModule,
|
|
2322
|
-
SkyModalModule,
|
|
2323
|
-
SkyRepeaterModule,
|
|
2324
|
-
SkySearchModule,
|
|
2325
|
-
SkyThemeModule,
|
|
2326
|
-
SkyToolbarModule,
|
|
2327
|
-
SkyViewkeeperModule,
|
|
2328
|
-
SkyWaitModule,
|
|
2329
|
-
],
|
|
2330
|
-
}]
|
|
2331
|
-
}] });
|
|
2332
|
-
|
|
2333
|
-
/**
|
|
2334
|
-
* @internal
|
|
2335
|
-
* Context for the show more native picker. These values are provided by the lookup component.
|
|
2336
|
-
*/
|
|
2337
|
-
class SkyLookupShowMoreNativePickerContext {
|
|
2338
|
-
constructor(descriptorProperty, initialSearch, initialValue, items, search, selectMode, showAddButton, userConfig) {
|
|
2339
|
-
this.descriptorProperty = descriptorProperty;
|
|
2340
|
-
this.initialSearch = initialSearch;
|
|
2341
|
-
this.initialValue = initialValue;
|
|
2342
|
-
this.items = items;
|
|
2343
|
-
this.search = search;
|
|
2344
|
-
this.selectMode = selectMode;
|
|
2345
|
-
this.showAddButton = showAddButton;
|
|
2346
|
-
this.userConfig = userConfig;
|
|
2347
|
-
}
|
|
2348
|
-
}
|
|
2349
|
-
|
|
2350
|
-
var _SkyLookupShowMoreModalComponent_changeDetector, _SkyLookupShowMoreModalComponent_itemIndex, _SkyLookupShowMoreModalComponent_ngUnsubscribe;
|
|
2351
|
-
/**
|
|
2352
|
-
* @internal
|
|
2353
|
-
* Internal component to implement the native picker.
|
|
2354
|
-
*/
|
|
2355
|
-
class SkyLookupShowMoreModalComponent {
|
|
2356
|
-
constructor(modalInstance, context, changeDetector, idSvc) {
|
|
2357
|
-
this.modalInstance = modalInstance;
|
|
2358
|
-
this.context = context;
|
|
2359
|
-
/**
|
|
2360
|
-
* @internal
|
|
2361
|
-
* Fires when users select the button to add new options to the list.
|
|
2362
|
-
*/
|
|
2363
|
-
this.addClick = new Subject();
|
|
2364
|
-
this.items = [];
|
|
2365
|
-
this.itemsLoading = false;
|
|
2366
|
-
this.dataManagerConfig = {
|
|
2367
|
-
sortOptions: [
|
|
2368
|
-
{
|
|
2369
|
-
id: 'az',
|
|
2370
|
-
label: 'Alphabetical (A - Z)',
|
|
2371
|
-
descending: false,
|
|
2372
|
-
propertyName: 'name',
|
|
2373
|
-
},
|
|
2374
|
-
{
|
|
2375
|
-
id: 'za',
|
|
2376
|
-
label: 'Alphabetical (Z - A)',
|
|
2377
|
-
descending: true,
|
|
2378
|
-
propertyName: 'name',
|
|
2379
|
-
},
|
|
2380
|
-
],
|
|
2381
|
-
};
|
|
2382
|
-
this.displayedItems = [];
|
|
2383
|
-
this.itemsHaveMore = false;
|
|
2384
|
-
this.onlyShowSelected = false;
|
|
2385
|
-
this.repeaterItemTemplate = null;
|
|
2386
|
-
this.searchText = '';
|
|
2387
|
-
this.selectedItems = [];
|
|
2388
|
-
_SkyLookupShowMoreModalComponent_changeDetector.set(this, void 0);
|
|
2389
|
-
_SkyLookupShowMoreModalComponent_itemIndex.set(this, 0);
|
|
2390
|
-
_SkyLookupShowMoreModalComponent_ngUnsubscribe.set(this, new Subject());
|
|
2391
|
-
__classPrivateFieldSet(this, _SkyLookupShowMoreModalComponent_changeDetector, changeDetector, "f");
|
|
2392
|
-
this.id = idSvc.generateId();
|
|
2393
|
-
}
|
|
2394
|
-
ngAfterViewInit() {
|
|
2395
|
-
this.repeaterItemTemplate = this.context.userConfig.itemTemplate || null;
|
|
2396
|
-
this.searchText = this.context.initialSearch;
|
|
2397
|
-
this.addItems();
|
|
2398
|
-
}
|
|
2399
|
-
ngOnDestroy() {
|
|
2400
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_ngUnsubscribe, "f").next();
|
|
2401
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_ngUnsubscribe, "f").complete();
|
|
2402
|
-
}
|
|
2403
|
-
addButtonClicked() {
|
|
2404
|
-
this.addClick.next();
|
|
2405
|
-
}
|
|
2406
|
-
addItems() {
|
|
2407
|
-
this.itemsLoading = true;
|
|
2408
|
-
if (!this.items || this.items.length === 0) {
|
|
2409
|
-
const selectedItems = this.selectedItems.slice();
|
|
2410
|
-
this.items = this.context.items.map((item) => {
|
|
2411
|
-
return {
|
|
2412
|
-
value: item,
|
|
2413
|
-
selected: false,
|
|
2414
|
-
};
|
|
2415
|
-
});
|
|
2416
|
-
this.items.forEach((item) => {
|
|
2417
|
-
const isInitialValue = this.context.initialValue === item.value;
|
|
2418
|
-
const initialIsArray = Array.isArray(this.context.initialValue);
|
|
2419
|
-
const initialValueContainsItem = this.context.initialValue.findIndex((initialItem) => initialItem === item.value) >= 0;
|
|
2420
|
-
if (isInitialValue || (initialIsArray && initialValueContainsItem)) {
|
|
2421
|
-
item.selected = true;
|
|
2422
|
-
const itemIndex = this.items.indexOf(item);
|
|
2423
|
-
if (selectedItems.findIndex((selectedItem) => selectedItem.index === itemIndex) < 0) {
|
|
2424
|
-
selectedItems.push({ index: itemIndex, itemData: item.value });
|
|
2425
|
-
}
|
|
2426
|
-
}
|
|
2427
|
-
});
|
|
2428
|
-
this.selectedItems = selectedItems;
|
|
2429
|
-
this.updateDataState();
|
|
2430
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
|
|
2431
|
-
}
|
|
2432
|
-
// if onlyShowSelected is checked, then only iterate through the initial selection
|
|
2433
|
-
const items = this.onlyShowSelected
|
|
2434
|
-
? this.items.filter((item) => item.selected)
|
|
2435
|
-
: this.items;
|
|
2436
|
-
__classPrivateFieldSet(this, _SkyLookupShowMoreModalComponent_itemIndex, __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f") + 10, "f");
|
|
2437
|
-
this.searchItems(items).then((searchedItems) => {
|
|
2438
|
-
this.displayedItems = searchedItems.slice(0, __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f"));
|
|
2439
|
-
if (__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f") > searchedItems.length) {
|
|
2440
|
-
this.itemsHaveMore = false;
|
|
2441
|
-
}
|
|
2442
|
-
else {
|
|
2443
|
-
this.itemsHaveMore = true;
|
|
2444
|
-
}
|
|
2445
|
-
this.itemsLoading = false;
|
|
2446
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
|
|
2447
|
-
});
|
|
2448
|
-
}
|
|
2449
|
-
clearAll() {
|
|
2450
|
-
this.displayedItems.forEach((item) => {
|
|
2451
|
-
if (item.selected) {
|
|
2452
|
-
item.selected = false;
|
|
2453
|
-
}
|
|
2454
|
-
});
|
|
2455
|
-
this.selectedItems = [];
|
|
2456
|
-
this.updateDataState();
|
|
2457
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
|
|
2458
|
-
}
|
|
2459
|
-
itemClick(selectedItem) {
|
|
2460
|
-
if (this.context.selectMode === 'single') {
|
|
2461
|
-
this.onItemSelect(!selectedItem.selected, selectedItem);
|
|
2462
|
-
}
|
|
2463
|
-
}
|
|
2464
|
-
onItemSelect(newSelectState, itemToSelect) {
|
|
2465
|
-
const items = this.items;
|
|
2466
|
-
if (this.context.selectMode === 'single') {
|
|
2467
|
-
/* Sanity check - single select mode should only alow for a `true` select state */
|
|
2468
|
-
/* istanbul ignore else */
|
|
2469
|
-
if (newSelectState) {
|
|
2470
|
-
itemToSelect.selected = true;
|
|
2471
|
-
items.forEach((item) => {
|
|
2472
|
-
if (item.value !== itemToSelect.value) {
|
|
2473
|
-
item.selected = false;
|
|
2474
|
-
}
|
|
2475
|
-
});
|
|
2476
|
-
this.displayedItems.forEach((item) => {
|
|
2477
|
-
if (item.value !== itemToSelect.value) {
|
|
2478
|
-
item.selected = false;
|
|
2479
|
-
}
|
|
2480
|
-
});
|
|
2481
|
-
const itemIndex = items.findIndex((item) => item.value === itemToSelect.value);
|
|
2482
|
-
this.selectedItems = [
|
|
2483
|
-
{ index: itemIndex, itemData: items[itemIndex].value },
|
|
2484
|
-
];
|
|
2485
|
-
}
|
|
2486
|
-
}
|
|
2487
|
-
else {
|
|
2488
|
-
const selectedItems = this.selectedItems;
|
|
2489
|
-
const allItemsIndex = items.findIndex((item) => item.value === itemToSelect.value);
|
|
2490
|
-
const selectedItemsIndex = selectedItems.findIndex((selectedItem) => selectedItem.index === allItemsIndex);
|
|
2491
|
-
if (newSelectState && selectedItemsIndex === -1) {
|
|
2492
|
-
selectedItems.push({
|
|
2493
|
-
index: allItemsIndex,
|
|
2494
|
-
itemData: items[allItemsIndex].value,
|
|
2495
|
-
});
|
|
2496
|
-
}
|
|
2497
|
-
else if (!newSelectState && selectedItemsIndex !== -1) {
|
|
2498
|
-
selectedItems.splice(selectedItemsIndex, 1);
|
|
2499
|
-
}
|
|
2500
|
-
this.selectedItems = selectedItems;
|
|
2501
|
-
}
|
|
2502
|
-
this.updateDataState();
|
|
2503
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
|
|
2504
|
-
}
|
|
2505
|
-
searchApplied(searchText) {
|
|
2506
|
-
/* istanbul ignore else */
|
|
2507
|
-
if (this.searchText !== searchText) {
|
|
2508
|
-
__classPrivateFieldSet(this, _SkyLookupShowMoreModalComponent_itemIndex, 10, "f");
|
|
2509
|
-
this.modalInstance.scrollContentToTop();
|
|
2510
|
-
}
|
|
2511
|
-
this.searchText = searchText;
|
|
2512
|
-
this.itemsLoading = true;
|
|
2513
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").detectChanges();
|
|
2514
|
-
// We need to ensure that the scroll event makes it all the way through the infinite scroll workflow before updating the data state.
|
|
2515
|
-
// Without this, the infinite scroll can add items improperly because it can see the above scroll after the items finish searching.
|
|
2516
|
-
setTimeout(() => {
|
|
2517
|
-
this.updateDataState();
|
|
2518
|
-
}, 100);
|
|
2519
|
-
}
|
|
2520
|
-
searchItems(items) {
|
|
2521
|
-
const searchText = this.searchText;
|
|
2522
|
-
if (searchText) {
|
|
2523
|
-
const resultValues = this.context.search(searchText, items.map((item) => {
|
|
2524
|
-
return item.value;
|
|
2525
|
-
}), { context: 'modal' });
|
|
2526
|
-
if (resultValues instanceof Array) {
|
|
2527
|
-
const result = items.filter((item) => resultValues.indexOf(item.value) >= 0);
|
|
2528
|
-
return Promise.resolve(result);
|
|
2529
|
-
}
|
|
2530
|
-
else {
|
|
2531
|
-
return resultValues.then((values) => {
|
|
2532
|
-
const result = items.filter((item) => values.indexOf(item.value) >= 0);
|
|
2533
|
-
return Promise.resolve(result);
|
|
2534
|
-
});
|
|
2535
|
-
}
|
|
2536
|
-
}
|
|
2537
|
-
else {
|
|
2538
|
-
return Promise.resolve(items);
|
|
2539
|
-
}
|
|
2540
|
-
}
|
|
2541
|
-
selectAll() {
|
|
2542
|
-
const items = this.items;
|
|
2543
|
-
const selectedItems = this.selectedItems;
|
|
2544
|
-
this.displayedItems.forEach((item) => {
|
|
2545
|
-
if (!item.selected) {
|
|
2546
|
-
item.selected = true;
|
|
2547
|
-
const index = items.indexOf(item);
|
|
2548
|
-
/* istanbul ignore else */
|
|
2549
|
-
if (selectedItems.findIndex((selectedItem) => selectedItem.index === index) < 0) {
|
|
2550
|
-
selectedItems.push({
|
|
2551
|
-
index: index,
|
|
2552
|
-
itemData: items[index].value,
|
|
2553
|
-
});
|
|
2554
|
-
}
|
|
2555
|
-
}
|
|
2556
|
-
});
|
|
2557
|
-
this.selectedItems = selectedItems;
|
|
2558
|
-
this.updateDataState();
|
|
2559
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
|
|
2560
|
-
}
|
|
2561
|
-
updateDataState() {
|
|
2562
|
-
const items = this.items;
|
|
2563
|
-
const selectedItems = this.selectedItems;
|
|
2564
|
-
items?.forEach((item, index) => {
|
|
2565
|
-
item.selected =
|
|
2566
|
-
selectedItems.findIndex((selectedItem) => selectedItem.index === index) !== -1;
|
|
2567
|
-
});
|
|
2568
|
-
this.searchItems(items).then((searchedItems) => {
|
|
2569
|
-
if (this.onlyShowSelected) {
|
|
2570
|
-
searchedItems = searchedItems.filter((item) => item.selected);
|
|
2571
|
-
}
|
|
2572
|
-
this.displayedItems = searchedItems.slice(0, __classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f"));
|
|
2573
|
-
if (__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_itemIndex, "f") > searchedItems.length) {
|
|
2574
|
-
this.itemsHaveMore = false;
|
|
2575
|
-
}
|
|
2576
|
-
else {
|
|
2577
|
-
this.itemsHaveMore = true;
|
|
2578
|
-
}
|
|
2579
|
-
this.itemsLoading = false;
|
|
2580
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
|
|
2581
|
-
});
|
|
2582
|
-
}
|
|
2583
|
-
updateItemData(data) {
|
|
2584
|
-
this.context.items = data;
|
|
2585
|
-
this.items = [];
|
|
2586
|
-
__classPrivateFieldSet(this, _SkyLookupShowMoreModalComponent_itemIndex, 10, "f");
|
|
2587
|
-
this.selectedItems.forEach((selectedItem) => {
|
|
2588
|
-
this.context.items.forEach((item, index) => {
|
|
2589
|
-
if (selectedItem.itemData === item) {
|
|
2590
|
-
selectedItem.index = index;
|
|
2591
|
-
}
|
|
2592
|
-
});
|
|
2593
|
-
});
|
|
2594
|
-
this.addItems();
|
|
2595
|
-
__classPrivateFieldGet(this, _SkyLookupShowMoreModalComponent_changeDetector, "f").markForCheck();
|
|
2596
|
-
}
|
|
2597
|
-
}
|
|
2598
|
-
_SkyLookupShowMoreModalComponent_changeDetector = new WeakMap(), _SkyLookupShowMoreModalComponent_itemIndex = new WeakMap(), _SkyLookupShowMoreModalComponent_ngUnsubscribe = new WeakMap();
|
|
2599
|
-
SkyLookupShowMoreModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyLookupShowMoreNativePickerContext }, { token: i0.ChangeDetectorRef }, { token: i1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2600
|
-
SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-toolbar\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n (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 (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [selectable]=\"context.selectMode === 'multiple'\"\n [(isSelected)]=\"item.selected\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item.value }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n (click)=\"modalInstance.save(selectedItems)\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\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: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2601
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
|
|
2602
|
-
type: Component,
|
|
2603
|
-
args: [{ selector: 'skyux-lookup-show-more-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-toolbar\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n (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 (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [selectable]=\"context.selectMode === 'multiple'\"\n [(isSelected)]=\"item.selected\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item.value }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n (click)=\"modalInstance.save(selectedItems)\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\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"] }]
|
|
2604
|
-
}], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyLookupShowMoreNativePickerContext }, { type: i0.ChangeDetectorRef }, { type: i1.SkyIdService }]; } });
|
|
2605
|
-
|
|
2606
|
-
/**
|
|
2607
|
-
* @internal
|
|
2608
|
-
*/
|
|
2609
|
-
class SkyLookupAdapterService {
|
|
2610
|
-
focusInput(elRef) {
|
|
2611
|
-
const inputEl = elRef.nativeElement.querySelector('.sky-lookup-input');
|
|
2612
|
-
/* Sanity check */
|
|
2613
|
-
/* istanbul ignore else */
|
|
2614
|
-
if (inputEl) {
|
|
2615
|
-
inputEl.focus();
|
|
2616
|
-
}
|
|
2617
|
-
}
|
|
2618
|
-
}
|
|
2619
|
-
SkyLookupAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2620
|
-
SkyLookupAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupAdapterService });
|
|
2621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupAdapterService, decorators: [{
|
|
2622
|
-
type: Injectable
|
|
2623
|
-
}] });
|
|
2624
|
-
|
|
2625
|
-
var _SkyLookupAutocompleteAdapter_instances, _SkyLookupAutocompleteAdapter__descriptorProperty, _SkyLookupAutocompleteAdapter__propertiesToSearch, _SkyLookupAutocompleteAdapter__search, _SkyLookupAutocompleteAdapter__searchFilters, _SkyLookupAutocompleteAdapter_updateDefaultSearchOptions;
|
|
2626
|
-
/**
|
|
2627
|
-
* @internal
|
|
2628
|
-
*/
|
|
2629
|
-
class SkyLookupAutocompleteAdapter {
|
|
2630
|
-
constructor() {
|
|
2631
|
-
_SkyLookupAutocompleteAdapter_instances.add(this);
|
|
2632
|
-
/**
|
|
2633
|
-
* Fires when users enter new search information and allows results to be
|
|
2634
|
-
* returned via an observable.
|
|
2635
|
-
*/
|
|
2636
|
-
this.searchAsync = new EventEmitter();
|
|
2637
|
-
this.searchOrDefault = skyAutocompleteDefaultSearchFunction({
|
|
2638
|
-
propertiesToSearch: ['name'],
|
|
2639
|
-
searchFilters: undefined,
|
|
2640
|
-
});
|
|
2641
|
-
_SkyLookupAutocompleteAdapter__descriptorProperty.set(this, 'name');
|
|
2642
|
-
_SkyLookupAutocompleteAdapter__propertiesToSearch.set(this, ['name']);
|
|
2643
|
-
_SkyLookupAutocompleteAdapter__search.set(this, void 0);
|
|
2644
|
-
_SkyLookupAutocompleteAdapter__searchFilters.set(this, void 0);
|
|
2645
|
-
}
|
|
2646
|
-
/**
|
|
2647
|
-
* The object property to display in the text input after users
|
|
2648
|
-
* select an item in the dropdown list.
|
|
2649
|
-
* @default "name"
|
|
2650
|
-
*/
|
|
2651
|
-
set descriptorProperty(value) {
|
|
2652
|
-
__classPrivateFieldSet(this, _SkyLookupAutocompleteAdapter__descriptorProperty, value || 'name', "f");
|
|
2653
|
-
}
|
|
2654
|
-
get descriptorProperty() {
|
|
2655
|
-
return __classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__descriptorProperty, "f");
|
|
2656
|
-
}
|
|
2657
|
-
/**
|
|
2658
|
-
* The array of object properties to search.
|
|
2659
|
-
* @default ["name"]
|
|
2660
|
-
*/
|
|
2661
|
-
set propertiesToSearch(value) {
|
|
2662
|
-
__classPrivateFieldSet(this, _SkyLookupAutocompleteAdapter__propertiesToSearch, value ?? ['name'], "f");
|
|
2663
|
-
__classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter_instances, "m", _SkyLookupAutocompleteAdapter_updateDefaultSearchOptions).call(this);
|
|
2664
|
-
}
|
|
2665
|
-
get propertiesToSearch() {
|
|
2666
|
-
return __classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__propertiesToSearch, "f");
|
|
2667
|
-
}
|
|
2668
|
-
/**
|
|
2669
|
-
* The function to dynamically manage the data source when users
|
|
2670
|
-
* change the text in the lookup field. The search function must return
|
|
2671
|
-
* an array or a promise of an array. The `search` property is particularly
|
|
2672
|
-
* useful when the data source does not live in the source code. If the
|
|
2673
|
-
* search requires calling a remote data source, use `searchAsync` instead of
|
|
2674
|
-
* `search`.
|
|
2675
|
-
*/
|
|
2676
|
-
set search(value) {
|
|
2677
|
-
__classPrivateFieldSet(this, _SkyLookupAutocompleteAdapter__search, value, "f");
|
|
2678
|
-
this.searchOrDefault =
|
|
2679
|
-
value ||
|
|
2680
|
-
skyAutocompleteDefaultSearchFunction({
|
|
2681
|
-
propertiesToSearch: this.propertiesToSearch,
|
|
2682
|
-
searchFilters: this.searchFilters,
|
|
2683
|
-
});
|
|
2684
|
-
}
|
|
2685
|
-
get search() {
|
|
2686
|
-
return __classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__search, "f");
|
|
2687
|
-
}
|
|
2688
|
-
/**
|
|
2689
|
-
* The array of functions to call against each search result in order
|
|
2690
|
-
* to filter the search results when using the default search function. When
|
|
2691
|
-
* using a custom search function via the `search` property filters must be
|
|
2692
|
-
* applied manually inside that function. The function must return `true` or
|
|
2693
|
-
* `false` for each result to indicate whether to display it in the dropdown list.
|
|
2694
|
-
*/
|
|
2695
|
-
set searchFilters(value) {
|
|
2696
|
-
__classPrivateFieldSet(this, _SkyLookupAutocompleteAdapter__searchFilters, value, "f");
|
|
2697
|
-
__classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter_instances, "m", _SkyLookupAutocompleteAdapter_updateDefaultSearchOptions).call(this);
|
|
2698
|
-
}
|
|
2699
|
-
get searchFilters() {
|
|
2700
|
-
return __classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__searchFilters, "f");
|
|
2701
|
-
}
|
|
2702
|
-
}
|
|
2703
|
-
_SkyLookupAutocompleteAdapter__descriptorProperty = new WeakMap(), _SkyLookupAutocompleteAdapter__propertiesToSearch = new WeakMap(), _SkyLookupAutocompleteAdapter__search = new WeakMap(), _SkyLookupAutocompleteAdapter__searchFilters = new WeakMap(), _SkyLookupAutocompleteAdapter_instances = new WeakSet(), _SkyLookupAutocompleteAdapter_updateDefaultSearchOptions = function _SkyLookupAutocompleteAdapter_updateDefaultSearchOptions() {
|
|
2704
|
-
// Reset default search if it is what is being used.
|
|
2705
|
-
if (this.search !== this.searchOrDefault) {
|
|
2706
|
-
this.searchOrDefault = skyAutocompleteDefaultSearchFunction({
|
|
2707
|
-
propertiesToSearch: this.propertiesToSearch,
|
|
2708
|
-
searchFilters: this.searchFilters,
|
|
2709
|
-
});
|
|
2710
|
-
}
|
|
2711
|
-
};
|
|
2712
|
-
SkyLookupAutocompleteAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupAutocompleteAdapter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2713
|
-
SkyLookupAutocompleteAdapter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SkyLookupAutocompleteAdapter, inputs: { debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit" }, outputs: { searchAsync: "searchAsync" }, ngImport: i0 });
|
|
2714
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupAutocompleteAdapter, decorators: [{
|
|
2715
|
-
type: Directive
|
|
2716
|
-
}], propDecorators: { debounceTime: [{
|
|
2717
|
-
type: Input
|
|
2718
|
-
}], descriptorProperty: [{
|
|
2719
|
-
type: Input
|
|
2720
|
-
}], propertiesToSearch: [{
|
|
2721
|
-
type: Input
|
|
2722
|
-
}], search: [{
|
|
2723
|
-
type: Input
|
|
2724
|
-
}], searchResultTemplate: [{
|
|
2725
|
-
type: Input
|
|
2726
|
-
}], searchTextMinimumCharacters: [{
|
|
2727
|
-
type: Input
|
|
2728
|
-
}], searchFilters: [{
|
|
2729
|
-
type: Input
|
|
2730
|
-
}], searchResultsLimit: [{
|
|
2731
|
-
type: Input
|
|
2732
|
-
}], searchAsync: [{
|
|
2733
|
-
type: Output
|
|
2734
|
-
}] } });
|
|
2735
|
-
|
|
2736
|
-
var _SkySelectionModalInstance_closed, _SkySelectionModalInstance_closedObs, _SkySelectionModalInstance_itemAdded, _SkySelectionModalInstance_itemAddedObs;
|
|
2737
|
-
/**
|
|
2738
|
-
* Represents an instance of a selection modal.
|
|
2739
|
-
*/
|
|
2740
|
-
class SkySelectionModalInstance {
|
|
2741
|
-
/**
|
|
2742
|
-
* An event that the selection modal instance emits when it closes.
|
|
2743
|
-
* It emits a `SkySelectionModalCloseArgs` object with a `selectedItems` property that includes
|
|
2744
|
-
* items selected by users on close or save and a `reason` property that indicates
|
|
2745
|
-
* whether the selection modal was saved or closed without saving.
|
|
2746
|
-
* The `reason` property accepts `"cancel"`, `"close"`, and `"save"`.
|
|
2747
|
-
*/
|
|
2748
|
-
get closed() {
|
|
2749
|
-
return __classPrivateFieldGet(this, _SkySelectionModalInstance_closedObs, "f");
|
|
2750
|
-
}
|
|
2751
|
-
/**
|
|
2752
|
-
* @internal
|
|
2753
|
-
*/
|
|
2754
|
-
get itemAdded() {
|
|
2755
|
-
return __classPrivateFieldGet(this, _SkySelectionModalInstance_itemAddedObs, "f");
|
|
2756
|
-
}
|
|
2757
|
-
constructor(id) {
|
|
2758
|
-
_SkySelectionModalInstance_closed.set(this, new Subject());
|
|
2759
|
-
_SkySelectionModalInstance_closedObs.set(this, void 0);
|
|
2760
|
-
_SkySelectionModalInstance_itemAdded.set(this, new Subject());
|
|
2761
|
-
_SkySelectionModalInstance_itemAddedObs.set(this, void 0);
|
|
2762
|
-
this.id = id;
|
|
2763
|
-
__classPrivateFieldSet(this, _SkySelectionModalInstance_closedObs, __classPrivateFieldGet(this, _SkySelectionModalInstance_closed, "f").asObservable(), "f");
|
|
2764
|
-
__classPrivateFieldSet(this, _SkySelectionModalInstance_itemAddedObs, __classPrivateFieldGet(this, _SkySelectionModalInstance_itemAdded, "f").asObservable(), "f");
|
|
2765
|
-
}
|
|
2766
|
-
/**
|
|
2767
|
-
* @internal
|
|
2768
|
-
*/
|
|
2769
|
-
close(args) {
|
|
2770
|
-
__classPrivateFieldGet(this, _SkySelectionModalInstance_closed, "f").next(args);
|
|
2771
|
-
__classPrivateFieldGet(this, _SkySelectionModalInstance_closed, "f").complete();
|
|
2772
|
-
}
|
|
2773
|
-
/**
|
|
2774
|
-
* @internal
|
|
2775
|
-
*/
|
|
2776
|
-
addItem(itemToAdd) {
|
|
2777
|
-
__classPrivateFieldGet(this, _SkySelectionModalInstance_itemAdded, "f").next(itemToAdd);
|
|
2778
|
-
}
|
|
2779
|
-
}
|
|
2780
|
-
_SkySelectionModalInstance_closed = new WeakMap(), _SkySelectionModalInstance_closedObs = new WeakMap(), _SkySelectionModalInstance_itemAdded = new WeakMap(), _SkySelectionModalInstance_itemAddedObs = new WeakMap();
|
|
2781
|
-
|
|
2782
|
-
var _SkySelectionModalService_modalSvc;
|
|
2783
|
-
/**
|
|
2784
|
-
* Displays a modal for selecting one or more values.
|
|
2785
|
-
*/
|
|
2786
|
-
class SkySelectionModalService {
|
|
2787
|
-
constructor(modalSvc) {
|
|
2788
|
-
_SkySelectionModalService_modalSvc.set(this, void 0);
|
|
2789
|
-
__classPrivateFieldSet(this, _SkySelectionModalService_modalSvc, modalSvc, "f");
|
|
2790
|
-
}
|
|
2791
|
-
/**
|
|
2792
|
-
* Opens the selection modal.
|
|
2793
|
-
* @param args Parameters for the selection modal.
|
|
2794
|
-
*/
|
|
2795
|
-
open(args) {
|
|
2796
|
-
const initialValue = args.value;
|
|
2797
|
-
const context = new SkySelectionModalContext(args.descriptorProperty, args.idProperty, args.initialSearch || '', initialValue || [], (searchArgs) => {
|
|
2798
|
-
return args.searchAsync({
|
|
2799
|
-
offset: searchArgs.offset,
|
|
2800
|
-
searchText: searchArgs.searchText,
|
|
2801
|
-
continuationData: searchArgs.continuationData,
|
|
2802
|
-
});
|
|
2803
|
-
}, args.selectMode, args.showAddButton || false, {
|
|
2804
|
-
itemTemplate: args.itemTemplate,
|
|
2805
|
-
title: args.title,
|
|
2806
|
-
});
|
|
2807
|
-
const modalInstance = __classPrivateFieldGet(this, _SkySelectionModalService_modalSvc, "f").open(SkySelectionModalComponent, {
|
|
2808
|
-
providers: [
|
|
2809
|
-
{
|
|
2810
|
-
provide: SkySelectionModalContext,
|
|
2811
|
-
useValue: context,
|
|
2812
|
-
},
|
|
2813
|
-
],
|
|
2814
|
-
size: 'large',
|
|
2815
|
-
wrapperClass: args.wrapperClass,
|
|
2816
|
-
});
|
|
2817
|
-
const instance = new SkySelectionModalInstance(modalInstance.componentInstance.id);
|
|
2818
|
-
instance.itemAdded
|
|
2819
|
-
.pipe(takeUntil(modalInstance.closed))
|
|
2820
|
-
.subscribe((item) => {
|
|
2821
|
-
modalInstance.componentInstance.addItem(item);
|
|
2822
|
-
});
|
|
2823
|
-
modalInstance.closed.subscribe((modalCloseArgs) => {
|
|
2824
|
-
let closeArgs;
|
|
2825
|
-
switch (modalCloseArgs.reason) {
|
|
2826
|
-
case 'save':
|
|
2827
|
-
closeArgs = {
|
|
2828
|
-
reason: 'save',
|
|
2829
|
-
selectedItems: modalCloseArgs.data.map((item) => item.itemData),
|
|
2830
|
-
};
|
|
2831
|
-
break;
|
|
2832
|
-
case 'cancel':
|
|
2833
|
-
closeArgs = { reason: 'cancel' };
|
|
2834
|
-
break;
|
|
2835
|
-
default:
|
|
2836
|
-
closeArgs = { reason: 'close' };
|
|
2837
|
-
}
|
|
2838
|
-
instance.close(closeArgs);
|
|
2839
|
-
});
|
|
2840
|
-
const selectionModal = modalInstance.componentInstance;
|
|
2841
|
-
selectionModal.addClick
|
|
2842
|
-
.pipe(takeUntil(modalInstance.closed))
|
|
2843
|
-
.subscribe(() => {
|
|
2844
|
-
if (args.addClick) {
|
|
2845
|
-
const addArgs = {
|
|
2846
|
-
itemAdded(args) {
|
|
2847
|
-
selectionModal.addItem(args.item);
|
|
2848
|
-
},
|
|
2849
|
-
};
|
|
2850
|
-
args.addClick(addArgs);
|
|
2851
|
-
}
|
|
2852
|
-
});
|
|
2853
|
-
return instance;
|
|
2854
|
-
}
|
|
2855
|
-
}
|
|
2856
|
-
_SkySelectionModalService_modalSvc = new WeakMap();
|
|
2857
|
-
SkySelectionModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalService, deps: [{ token: i1$1.SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2858
|
-
SkySelectionModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalService, providedIn: 'any' });
|
|
2859
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySelectionModalService, decorators: [{
|
|
2860
|
-
type: Injectable,
|
|
2861
|
-
args: [{
|
|
2862
|
-
providedIn: 'any',
|
|
2863
|
-
}]
|
|
2864
|
-
}], ctorParameters: function () { return [{ type: i1$1.SkyModalService }]; } });
|
|
2865
|
-
|
|
2866
|
-
var _SkyLookupComponent_instances, _SkyLookupComponent_adapter, _SkyLookupComponent_elementRef, _SkyLookupComponent_changeDetector, _SkyLookupComponent_idle, _SkyLookupComponent_markForTokenFocusOnKeyUp, _SkyLookupComponent_modalService, _SkyLookupComponent_ngUnsubscribe, _SkyLookupComponent_openNativePicker, _SkyLookupComponent_openSelectionModal, _SkyLookupComponent_resourcesService, _SkyLookupComponent_selectionModalSvc, _SkyLookupComponent_windowRef, _SkyLookupComponent_logSvc, _SkyLookupComponent__autocompleteInputDirective, _SkyLookupComponent__data, _SkyLookupComponent__disabled, _SkyLookupComponent__enableShowMore, _SkyLookupComponent__selectMode, _SkyLookupComponent__showAddButton, _SkyLookupComponent__tokens, _SkyLookupComponent__value, _SkyLookupComponent_createSelectionModalInstance, _SkyLookupComponent_createNativePickerInstance, _SkyLookupComponent_processPickerResult, _SkyLookupComponent_addToSelected, _SkyLookupComponent_addEventListeners, _SkyLookupComponent_removeEventListeners, _SkyLookupComponent_focusInputOnHostClick, _SkyLookupComponent_focusInput, _SkyLookupComponent_onAddButtonComplete, _SkyLookupComponent_parseTokens, _SkyLookupComponent_sendAutocompleteMessage, _SkyLookupComponent_sendTokensMessage, _SkyLookupComponent_updateForSelectMode, _SkyLookupComponent_hasSearchAsync, _SkyLookupComponent_pickerModalOpen;
|
|
2867
|
-
class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
2868
|
-
/**
|
|
2869
|
-
* The data source for the lookup component to search when users
|
|
2870
|
-
* enter text. You can specify static data such as an array of objects, or
|
|
2871
|
-
* you can pull data from a database.
|
|
2872
|
-
* @default []
|
|
2873
|
-
*/
|
|
2874
|
-
set data(value) {
|
|
2875
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__data, value, "f");
|
|
2876
|
-
if (__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f") && !__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_hasSearchAsync).call(this)) {
|
|
2877
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f").componentInstance.updateItemData(value);
|
|
2878
|
-
}
|
|
2879
|
-
}
|
|
2880
|
-
get data() {
|
|
2881
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent__data, "f") || [];
|
|
2882
|
-
}
|
|
2883
|
-
/**
|
|
2884
|
-
* Whether to disable the lookup field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
|
|
2885
|
-
* To set the disabled state on reactive forms, use the `FormControl` instead.
|
|
2886
|
-
* @default false
|
|
2887
|
-
*/
|
|
2888
|
-
set disabled(value) {
|
|
2889
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__disabled, value ?? false, "f");
|
|
2890
|
-
}
|
|
2891
|
-
get disabled() {
|
|
2892
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent__disabled, "f");
|
|
2893
|
-
}
|
|
2894
|
-
/**
|
|
2895
|
-
* Whether to enable users to open a picker where they can view all options.
|
|
2896
|
-
* @default false
|
|
2897
|
-
*/
|
|
2898
|
-
set enableShowMore(value) {
|
|
2899
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__enableShowMore, value ?? false, "f");
|
|
2900
|
-
}
|
|
2901
|
-
get enableShowMore() {
|
|
2902
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent__enableShowMore, "f");
|
|
2903
|
-
}
|
|
2904
|
-
/**
|
|
2905
|
-
* Whether to display a button that lets users add options to the list.
|
|
2906
|
-
* @default false
|
|
2907
|
-
*/
|
|
2908
|
-
set showAddButton(value) {
|
|
2909
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__showAddButton, value ?? false, "f");
|
|
2910
|
-
}
|
|
2911
|
-
get showAddButton() {
|
|
2912
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent__showAddButton, "f");
|
|
2913
|
-
}
|
|
2914
|
-
/**
|
|
2915
|
-
* The ability for users to select one option or multiple options.
|
|
2916
|
-
* @default "multiple"
|
|
2917
|
-
*/
|
|
2918
|
-
set selectMode(value) {
|
|
2919
|
-
const multipleToSingle = value === 'single' && this.selectMode === 'multiple';
|
|
2920
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__selectMode, value, "f");
|
|
2921
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_updateForSelectMode).call(this);
|
|
2922
|
-
if (multipleToSingle) {
|
|
2923
|
-
if (this.value && this.value.length > 1) {
|
|
2924
|
-
// The `setTimeout` is needed to avoid a `ExpressionChangedAfterItHasBeenCheckedError` error in template forms.
|
|
2925
|
-
setTimeout(() => {
|
|
2926
|
-
this.writeValue([this.value[0]]);
|
|
2927
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").detectChanges();
|
|
2928
|
-
});
|
|
2929
|
-
}
|
|
2930
|
-
}
|
|
2931
|
-
}
|
|
2932
|
-
get selectMode() {
|
|
2933
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent__selectMode, "f") || 'multiple';
|
|
2934
|
-
}
|
|
2935
|
-
get tokens() {
|
|
2936
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent__tokens, "f");
|
|
2937
|
-
}
|
|
2938
|
-
set tokens(value) {
|
|
2939
|
-
// Collapse the tokens into a single token if the user has selected many options.
|
|
2940
|
-
if (this.enableShowMore && this.value.length > 5) {
|
|
2941
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_resourcesService, "f")
|
|
2942
|
-
.getString('skyux_lookup_tokens_summary', this.value.length.toString())
|
|
2943
|
-
.pipe(take(1))
|
|
2944
|
-
.subscribe((label) => {
|
|
2945
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__tokens, [
|
|
2946
|
-
{
|
|
2947
|
-
value: { [this.descriptorProperty]: label },
|
|
2948
|
-
},
|
|
2949
|
-
], "f");
|
|
2950
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
|
|
2951
|
-
});
|
|
2952
|
-
}
|
|
2953
|
-
else {
|
|
2954
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__tokens, value, "f");
|
|
2955
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
|
|
2956
|
-
}
|
|
2957
|
-
}
|
|
2958
|
-
get value() {
|
|
2959
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent__value, "f") ? __classPrivateFieldGet(this, _SkyLookupComponent__value, "f") : [];
|
|
2960
|
-
}
|
|
2961
|
-
set value(newValue) {
|
|
2962
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__value, newValue, "f");
|
|
2963
|
-
if (!__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_pickerModalOpen).call(this)) {
|
|
2964
|
-
this.tokens = __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_parseTokens).call(this, newValue);
|
|
2965
|
-
}
|
|
2966
|
-
this.onChange(__classPrivateFieldGet(this, _SkyLookupComponent__value, "f"));
|
|
2967
|
-
this.onTouched();
|
|
2968
|
-
}
|
|
2969
|
-
set autocompleteInputDirective(value) {
|
|
2970
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__autocompleteInputDirective, value, "f");
|
|
2971
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_updateForSelectMode).call(this);
|
|
2972
|
-
}
|
|
2973
|
-
get autocompleteInputDirective() {
|
|
2974
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent__autocompleteInputDirective, "f");
|
|
2975
|
-
}
|
|
2976
|
-
constructor(changeDetector, elementRef, windowRef, adapter, modalService, resourcesService, selectionModalSvc, logSvc, ngControl, inputBoxHostSvc, themeSvc) {
|
|
2977
|
-
super();
|
|
2978
|
-
this.inputBoxHostSvc = inputBoxHostSvc;
|
|
2979
|
-
this.themeSvc = themeSvc;
|
|
2980
|
-
_SkyLookupComponent_instances.add(this);
|
|
2981
|
-
/**
|
|
2982
|
-
* Fires when users select the button to add options to the list.
|
|
2983
|
-
*/
|
|
2984
|
-
this.addClick = new EventEmitter();
|
|
2985
|
-
this.autocompleteController = new Subject();
|
|
2986
|
-
this.isInputFocused = false;
|
|
2987
|
-
this.tokensController = new Subject();
|
|
2988
|
-
_SkyLookupComponent_adapter.set(this, void 0);
|
|
2989
|
-
_SkyLookupComponent_elementRef.set(this, void 0);
|
|
2990
|
-
_SkyLookupComponent_changeDetector.set(this, void 0);
|
|
2991
|
-
_SkyLookupComponent_idle.set(this, new Subject());
|
|
2992
|
-
_SkyLookupComponent_markForTokenFocusOnKeyUp.set(this, false);
|
|
2993
|
-
_SkyLookupComponent_modalService.set(this, void 0);
|
|
2994
|
-
_SkyLookupComponent_ngUnsubscribe.set(this, new Subject());
|
|
2995
|
-
_SkyLookupComponent_openNativePicker.set(this, void 0);
|
|
2996
|
-
_SkyLookupComponent_openSelectionModal.set(this, void 0);
|
|
2997
|
-
_SkyLookupComponent_resourcesService.set(this, void 0);
|
|
2998
|
-
_SkyLookupComponent_selectionModalSvc.set(this, void 0);
|
|
2999
|
-
_SkyLookupComponent_windowRef.set(this, void 0);
|
|
3000
|
-
_SkyLookupComponent_logSvc.set(this, void 0);
|
|
3001
|
-
_SkyLookupComponent__autocompleteInputDirective.set(this, void 0);
|
|
3002
|
-
_SkyLookupComponent__data.set(this, void 0);
|
|
3003
|
-
_SkyLookupComponent__disabled.set(this, false);
|
|
3004
|
-
_SkyLookupComponent__enableShowMore.set(this, false);
|
|
3005
|
-
_SkyLookupComponent__selectMode.set(this, void 0);
|
|
3006
|
-
_SkyLookupComponent__showAddButton.set(this, false);
|
|
3007
|
-
_SkyLookupComponent__tokens.set(this, void 0);
|
|
3008
|
-
_SkyLookupComponent__value.set(this, void 0);
|
|
3009
|
-
// Angular automatically constructs these methods.
|
|
3010
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3011
|
-
this.onChange = (value) => { };
|
|
3012
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3013
|
-
this.onTouched = () => { };
|
|
3014
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_changeDetector, changeDetector, "f");
|
|
3015
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_elementRef, elementRef, "f");
|
|
3016
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_windowRef, windowRef, "f");
|
|
3017
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_adapter, adapter, "f");
|
|
3018
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_modalService, modalService, "f");
|
|
3019
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_resourcesService, resourcesService, "f");
|
|
3020
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_selectionModalSvc, selectionModalSvc, "f");
|
|
3021
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_logSvc, logSvc, "f");
|
|
3022
|
-
if (ngControl) {
|
|
3023
|
-
ngControl.valueAccessor = this;
|
|
3024
|
-
}
|
|
3025
|
-
}
|
|
3026
|
-
ngOnInit() {
|
|
3027
|
-
if (this.inputBoxHostSvc && this.inputTemplateRef) {
|
|
3028
|
-
this.controlId = this.inputBoxHostSvc.controlId;
|
|
3029
|
-
this.inputBoxHostSvc.populate({
|
|
3030
|
-
inputTemplate: this.inputTemplateRef,
|
|
3031
|
-
buttonsTemplate: this.enableShowMore
|
|
3032
|
-
? this.showMoreButtonTemplateRef
|
|
3033
|
-
: undefined,
|
|
3034
|
-
iconsInsetTemplate: this.enableShowMore
|
|
3035
|
-
? undefined
|
|
3036
|
-
: this.searchIconTemplateRef,
|
|
3037
|
-
});
|
|
3038
|
-
}
|
|
3039
|
-
/* istanbul ignore else */
|
|
3040
|
-
if (this.themeSvc) {
|
|
3041
|
-
// This is required for the autocomplete directive to be set after elements
|
|
3042
|
-
// are rearranged when switching themes.
|
|
3043
|
-
this.themeSvc.settingsChange
|
|
3044
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyLookupComponent_ngUnsubscribe, "f")))
|
|
3045
|
-
.subscribe(() => {
|
|
3046
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
|
|
3047
|
-
});
|
|
3048
|
-
}
|
|
3049
|
-
}
|
|
3050
|
-
ngAfterViewInit() {
|
|
3051
|
-
if (!this.disabled) {
|
|
3052
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_addEventListeners).call(this);
|
|
3053
|
-
}
|
|
3054
|
-
}
|
|
3055
|
-
ngOnDestroy() {
|
|
3056
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_removeEventListeners).call(this);
|
|
3057
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_ngUnsubscribe, "f").next();
|
|
3058
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_ngUnsubscribe, "f").complete();
|
|
3059
|
-
this.tokensController.complete();
|
|
3060
|
-
}
|
|
3061
|
-
addButtonClicked() {
|
|
3062
|
-
this.addClick.emit({
|
|
3063
|
-
itemAdded: (args) => __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_onAddButtonComplete).call(this, args),
|
|
3064
|
-
});
|
|
3065
|
-
}
|
|
3066
|
-
onAutocompleteSelectionChange(change) {
|
|
3067
|
-
/* istanbul ignore else */
|
|
3068
|
-
if (change.selectedItem) {
|
|
3069
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_addToSelected).call(this, change.selectedItem);
|
|
3070
|
-
}
|
|
3071
|
-
else if (this.selectMode === 'single') {
|
|
3072
|
-
this.writeValue([]);
|
|
3073
|
-
}
|
|
3074
|
-
}
|
|
3075
|
-
onAutocompleteBlur() {
|
|
3076
|
-
this.onTouched();
|
|
3077
|
-
}
|
|
3078
|
-
onTokensChange(change) {
|
|
3079
|
-
if (!change) {
|
|
3080
|
-
return;
|
|
3081
|
-
}
|
|
3082
|
-
if (this.tokens !== change) {
|
|
3083
|
-
if (change.length === 0) {
|
|
3084
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInput).call(this);
|
|
3085
|
-
}
|
|
3086
|
-
// NOTE: We do this here instead of just using the `value` setter because we need to use the
|
|
3087
|
-
// set of tokens returned here for the purposes of setting focus (see `onTokensKeyUp`).
|
|
3088
|
-
__classPrivateFieldSet(this, _SkyLookupComponent__value, change.map((token) => {
|
|
3089
|
-
return token.value;
|
|
3090
|
-
}), "f");
|
|
3091
|
-
this.tokens = change;
|
|
3092
|
-
this.onChange(__classPrivateFieldGet(this, _SkyLookupComponent__value, "f"));
|
|
3093
|
-
this.onTouched();
|
|
3094
|
-
}
|
|
3095
|
-
}
|
|
3096
|
-
onTokensFocusIndexOverRange() {
|
|
3097
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_windowRef, "f").nativeWindow.setTimeout(() => {
|
|
3098
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInput).call(this);
|
|
3099
|
-
});
|
|
3100
|
-
}
|
|
3101
|
-
onTokensKeyUp(event) {
|
|
3102
|
-
/* istanbul ignore else */
|
|
3103
|
-
if (this.selectMode !== 'single') {
|
|
3104
|
-
switch (event.key) {
|
|
3105
|
-
case 'Backspace':
|
|
3106
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.RemoveActiveToken);
|
|
3107
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.FocusPreviousToken);
|
|
3108
|
-
event.preventDefault();
|
|
3109
|
-
break;
|
|
3110
|
-
case 'Del':
|
|
3111
|
-
case 'Delete':
|
|
3112
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.RemoveActiveToken);
|
|
3113
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_windowRef, "f").nativeWindow.setTimeout(() => {
|
|
3114
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.FocusActiveToken);
|
|
3115
|
-
});
|
|
3116
|
-
event.preventDefault();
|
|
3117
|
-
break;
|
|
3118
|
-
}
|
|
3119
|
-
}
|
|
3120
|
-
}
|
|
3121
|
-
onTokensRendered() {
|
|
3122
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendAutocompleteMessage).call(this, SkyAutocompleteMessageType.RepositionDropdown);
|
|
3123
|
-
}
|
|
3124
|
-
writeValue(value) {
|
|
3125
|
-
// Since we are dealing with arrays - clone the array being sent in to ensure we aren't modifying a consumers outer array
|
|
3126
|
-
this.value = value ? value.slice() : [];
|
|
3127
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_updateForSelectMode).call(this);
|
|
3128
|
-
}
|
|
3129
|
-
registerOnChange(fn) {
|
|
3130
|
-
this.onChange = fn;
|
|
3131
|
-
}
|
|
3132
|
-
registerOnTouched(fn) {
|
|
3133
|
-
this.onTouched = fn;
|
|
3134
|
-
}
|
|
3135
|
-
// Allows Angular to disable the input.
|
|
3136
|
-
setDisabledState(disabled) {
|
|
3137
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_removeEventListeners).call(this);
|
|
3138
|
-
if (!disabled) {
|
|
3139
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_addEventListeners).call(this);
|
|
3140
|
-
}
|
|
3141
|
-
this.disabled = disabled;
|
|
3142
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
|
|
3143
|
-
}
|
|
3144
|
-
clearSearchText() {
|
|
3145
|
-
if (this.autocompleteInputDirective) {
|
|
3146
|
-
this.autocompleteInputDirective.value = undefined;
|
|
3147
|
-
this.autocompleteInputDirective.inputTextValue = '';
|
|
3148
|
-
}
|
|
3149
|
-
}
|
|
3150
|
-
// Handles when to focus on the tokens.
|
|
3151
|
-
// Check for empty search text on keydown, before the escape key is fully pressed.
|
|
3152
|
-
// (Otherwise, a single character being escaped would register as empty on keyup.)
|
|
3153
|
-
// If empty on keydown, set a flag so that the appropriate action can be taken on keyup.
|
|
3154
|
-
inputKeydown(event) {
|
|
3155
|
-
const value = event.target.value;
|
|
3156
|
-
/* Sanity check as this should only be called when in multiple select mode */
|
|
3157
|
-
/* istanbul ignore else */
|
|
3158
|
-
if (this.selectMode !== 'single') {
|
|
3159
|
-
switch (event.key) {
|
|
3160
|
-
case 'Enter':
|
|
3161
|
-
event.preventDefault();
|
|
3162
|
-
break;
|
|
3163
|
-
case 'ArrowLeft':
|
|
3164
|
-
case 'Backspace':
|
|
3165
|
-
case 'Left':
|
|
3166
|
-
if (value) {
|
|
3167
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_markForTokenFocusOnKeyUp, false, "f");
|
|
3168
|
-
}
|
|
3169
|
-
else {
|
|
3170
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_markForTokenFocusOnKeyUp, true, "f");
|
|
3171
|
-
}
|
|
3172
|
-
break;
|
|
3173
|
-
default:
|
|
3174
|
-
}
|
|
3175
|
-
}
|
|
3176
|
-
}
|
|
3177
|
-
inputKeyup(event) {
|
|
3178
|
-
/* Sanity check as this should only be called when in multiple select mode */
|
|
3179
|
-
/* istanbul ignore else */
|
|
3180
|
-
if (this.selectMode !== 'single') {
|
|
3181
|
-
switch (event.key) {
|
|
3182
|
-
case 'Esc':
|
|
3183
|
-
case 'Escape':
|
|
3184
|
-
this.clearSearchText();
|
|
3185
|
-
event.preventDefault();
|
|
3186
|
-
break;
|
|
3187
|
-
case 'ArrowLeft':
|
|
3188
|
-
case 'Backspace':
|
|
3189
|
-
case 'Left':
|
|
3190
|
-
/* istanbul ignore else */
|
|
3191
|
-
if (__classPrivateFieldGet(this, _SkyLookupComponent_markForTokenFocusOnKeyUp, "f")) {
|
|
3192
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendTokensMessage).call(this, SkyTokensMessageType.FocusLastToken);
|
|
3193
|
-
event.preventDefault();
|
|
3194
|
-
}
|
|
3195
|
-
break;
|
|
3196
|
-
default:
|
|
3197
|
-
}
|
|
3198
|
-
event.stopPropagation();
|
|
3199
|
-
}
|
|
3200
|
-
}
|
|
3201
|
-
onSearchButtonClick() {
|
|
3202
|
-
/*istanbul ignore next*/
|
|
3203
|
-
if (this.disabled) {
|
|
3204
|
-
return;
|
|
3205
|
-
}
|
|
3206
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_sendAutocompleteMessage).call(this, SkyAutocompleteMessageType.CloseDropdown);
|
|
3207
|
-
let isValueInTextBox = false;
|
|
3208
|
-
if (this.selectMode === 'single') {
|
|
3209
|
-
isValueInTextBox =
|
|
3210
|
-
this.autocompleteInputDirective?.value &&
|
|
3211
|
-
this.autocompleteInputDirective.inputTextValue ===
|
|
3212
|
-
this.autocompleteInputDirective.value[this.descriptorProperty];
|
|
3213
|
-
}
|
|
3214
|
-
let searchValue = '';
|
|
3215
|
-
if (!isValueInTextBox && this.autocompleteInputDirective) {
|
|
3216
|
-
searchValue = this.autocompleteInputDirective.inputTextValue;
|
|
3217
|
-
}
|
|
3218
|
-
this.openPicker(searchValue);
|
|
3219
|
-
this.autocompleteInputDirective?.restoreInputTextValueToPreviousState();
|
|
3220
|
-
}
|
|
3221
|
-
onShowMoreClick(event) {
|
|
3222
|
-
/* Sanity check */
|
|
3223
|
-
/* istanbul ignore else*/
|
|
3224
|
-
if (event) {
|
|
3225
|
-
this.openPicker(event.inputValue);
|
|
3226
|
-
}
|
|
3227
|
-
}
|
|
3228
|
-
openPicker(initialSearch) {
|
|
3229
|
-
if (this.showMoreConfig?.customPicker) {
|
|
3230
|
-
this.showMorePickerId = undefined;
|
|
3231
|
-
this.showMoreConfig.customPicker.open({
|
|
3232
|
-
items: this.data,
|
|
3233
|
-
initialSearch,
|
|
3234
|
-
initialValue: this.value,
|
|
3235
|
-
});
|
|
3236
|
-
}
|
|
3237
|
-
else {
|
|
3238
|
-
const initialValue = this.value;
|
|
3239
|
-
if (__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_hasSearchAsync).call(this)) {
|
|
3240
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_openSelectionModal, __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_createSelectionModalInstance).call(this, initialSearch), "f");
|
|
3241
|
-
this.showMorePickerId = __classPrivateFieldGet(this, _SkyLookupComponent_openSelectionModal, "f").id;
|
|
3242
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_openSelectionModal, "f").closed.subscribe((closeArgs) => {
|
|
3243
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_processPickerResult).call(this, closeArgs.reason === 'save' ? closeArgs.selectedItems : initialValue);
|
|
3244
|
-
});
|
|
3245
|
-
}
|
|
3246
|
-
else {
|
|
3247
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_openNativePicker, __classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_createNativePickerInstance).call(this, initialSearch), "f");
|
|
3248
|
-
this.showMorePickerId = __classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f").componentInstance.id;
|
|
3249
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f").componentInstance.addClick.subscribe(() => {
|
|
3250
|
-
this.addButtonClicked();
|
|
3251
|
-
});
|
|
3252
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f").closed.subscribe((closeArgs) => {
|
|
3253
|
-
let selectedItems;
|
|
3254
|
-
if (closeArgs.reason === 'save') {
|
|
3255
|
-
selectedItems = [];
|
|
3256
|
-
this.data.forEach((item, dataIndex) => {
|
|
3257
|
-
if (closeArgs.data.some((savedItem) => {
|
|
3258
|
-
return savedItem.index === dataIndex;
|
|
3259
|
-
})) {
|
|
3260
|
-
selectedItems.push(item);
|
|
3261
|
-
}
|
|
3262
|
-
});
|
|
3263
|
-
}
|
|
3264
|
-
else {
|
|
3265
|
-
selectedItems = initialValue;
|
|
3266
|
-
}
|
|
3267
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_processPickerResult).call(this, selectedItems);
|
|
3268
|
-
});
|
|
3269
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
|
|
3270
|
-
}
|
|
3271
|
-
}
|
|
3272
|
-
}
|
|
3273
|
-
onSearchAsync(args) {
|
|
3274
|
-
this.searchAsync.emit(args);
|
|
3275
|
-
}
|
|
3276
|
-
}
|
|
3277
|
-
_SkyLookupComponent_adapter = new WeakMap(), _SkyLookupComponent_elementRef = new WeakMap(), _SkyLookupComponent_changeDetector = new WeakMap(), _SkyLookupComponent_idle = new WeakMap(), _SkyLookupComponent_markForTokenFocusOnKeyUp = new WeakMap(), _SkyLookupComponent_modalService = new WeakMap(), _SkyLookupComponent_ngUnsubscribe = new WeakMap(), _SkyLookupComponent_openNativePicker = new WeakMap(), _SkyLookupComponent_openSelectionModal = new WeakMap(), _SkyLookupComponent_resourcesService = new WeakMap(), _SkyLookupComponent_selectionModalSvc = new WeakMap(), _SkyLookupComponent_windowRef = new WeakMap(), _SkyLookupComponent_logSvc = new WeakMap(), _SkyLookupComponent__autocompleteInputDirective = new WeakMap(), _SkyLookupComponent__data = new WeakMap(), _SkyLookupComponent__disabled = new WeakMap(), _SkyLookupComponent__enableShowMore = new WeakMap(), _SkyLookupComponent__selectMode = new WeakMap(), _SkyLookupComponent__showAddButton = new WeakMap(), _SkyLookupComponent__tokens = new WeakMap(), _SkyLookupComponent__value = new WeakMap(), _SkyLookupComponent_instances = new WeakSet(), _SkyLookupComponent_createSelectionModalInstance = function _SkyLookupComponent_createSelectionModalInstance(initialSearch) {
|
|
3278
|
-
const initialValue = this.value;
|
|
3279
|
-
const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
|
|
3280
|
-
if (!modalConfig.itemTemplate) {
|
|
3281
|
-
modalConfig.itemTemplate = this.searchResultTemplate;
|
|
3282
|
-
}
|
|
3283
|
-
if (this.idProperty === undefined) {
|
|
3284
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_logSvc, "f").error("The lookup component's 'idProperty' input is required when `enableShowMore` and 'searchAsync' are used together.");
|
|
3285
|
-
}
|
|
3286
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent_selectionModalSvc, "f").open({
|
|
3287
|
-
descriptorProperty: this.descriptorProperty,
|
|
3288
|
-
idProperty: this.idProperty,
|
|
3289
|
-
searchAsync: (args) => {
|
|
3290
|
-
const searchAsyncArgs = {
|
|
3291
|
-
displayType: 'modal',
|
|
3292
|
-
offset: args.offset,
|
|
3293
|
-
searchText: args.searchText,
|
|
3294
|
-
continuationData: args.continuationData,
|
|
3295
|
-
};
|
|
3296
|
-
this.searchAsync.emit(searchAsyncArgs);
|
|
3297
|
-
return searchAsyncArgs.result;
|
|
3298
|
-
},
|
|
3299
|
-
selectMode: this.selectMode,
|
|
3300
|
-
addClick: () => {
|
|
3301
|
-
this.addButtonClicked();
|
|
3302
|
-
},
|
|
3303
|
-
initialSearch,
|
|
3304
|
-
itemTemplate: modalConfig.itemTemplate,
|
|
3305
|
-
showAddButton: this.showAddButton,
|
|
3306
|
-
title: modalConfig.title,
|
|
3307
|
-
value: initialValue,
|
|
3308
|
-
wrapperClass: this.wrapperClass,
|
|
3309
|
-
});
|
|
3310
|
-
}, _SkyLookupComponent_createNativePickerInstance = function _SkyLookupComponent_createNativePickerInstance(initialSearch) {
|
|
3311
|
-
const initialValue = this.value;
|
|
3312
|
-
const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
|
|
3313
|
-
if (!modalConfig.itemTemplate) {
|
|
3314
|
-
modalConfig.itemTemplate = this.searchResultTemplate;
|
|
3315
|
-
}
|
|
3316
|
-
const contextProviderValue = new SkyLookupShowMoreNativePickerContext(this.descriptorProperty, initialSearch, initialValue, this.data, this.searchOrDefault, this.selectMode, this.showAddButton, modalConfig);
|
|
3317
|
-
return __classPrivateFieldGet(this, _SkyLookupComponent_modalService, "f").open(SkyLookupShowMoreModalComponent, {
|
|
3318
|
-
providers: [
|
|
3319
|
-
{
|
|
3320
|
-
provide: SkyLookupShowMoreNativePickerContext,
|
|
3321
|
-
useValue: contextProviderValue,
|
|
3322
|
-
},
|
|
3323
|
-
{
|
|
3324
|
-
provide: SkyLookupAdapterService,
|
|
3325
|
-
useValue: __classPrivateFieldGet(this, _SkyLookupComponent_adapter, "f"),
|
|
3326
|
-
},
|
|
3327
|
-
],
|
|
3328
|
-
size: 'large',
|
|
3329
|
-
wrapperClass: this.wrapperClass,
|
|
3330
|
-
});
|
|
3331
|
-
}, _SkyLookupComponent_processPickerResult = function _SkyLookupComponent_processPickerResult(selectedItems) {
|
|
3332
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_openSelectionModal, undefined, "f");
|
|
3333
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_openNativePicker, undefined, "f");
|
|
3334
|
-
this.showMorePickerId = undefined;
|
|
3335
|
-
/* istanbul ignore next */
|
|
3336
|
-
selectedItems = selectedItems || [];
|
|
3337
|
-
this.writeValue(selectedItems);
|
|
3338
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInput).call(this);
|
|
3339
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
|
|
3340
|
-
}, _SkyLookupComponent_addToSelected = function _SkyLookupComponent_addToSelected(item) {
|
|
3341
|
-
let selectedItems;
|
|
3342
|
-
if (this.selectMode === 'single') {
|
|
3343
|
-
selectedItems = [item];
|
|
3344
|
-
}
|
|
3345
|
-
else {
|
|
3346
|
-
selectedItems = this.value;
|
|
3347
|
-
const idProperty = this.idProperty || '';
|
|
3348
|
-
// If items have a unique identifier, don't allow the same item to be added twice.
|
|
3349
|
-
if (!this.idProperty ||
|
|
3350
|
-
!this.value.some((existingItem) => existingItem[idProperty] === item[idProperty])) {
|
|
3351
|
-
selectedItems.push(item);
|
|
3352
|
-
}
|
|
3353
|
-
this.clearSearchText();
|
|
3354
|
-
}
|
|
3355
|
-
this.writeValue(selectedItems);
|
|
3356
|
-
}, _SkyLookupComponent_addEventListeners = function _SkyLookupComponent_addEventListeners() {
|
|
3357
|
-
__classPrivateFieldSet(this, _SkyLookupComponent_idle, new Subject(), "f");
|
|
3358
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInputOnHostClick).call(this);
|
|
3359
|
-
}, _SkyLookupComponent_removeEventListeners = function _SkyLookupComponent_removeEventListeners() {
|
|
3360
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_idle, "f").next();
|
|
3361
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_idle, "f").complete();
|
|
3362
|
-
}, _SkyLookupComponent_focusInputOnHostClick = function _SkyLookupComponent_focusInputOnHostClick() {
|
|
3363
|
-
let hostElement = !this.inputBoxHostSvc
|
|
3364
|
-
? __classPrivateFieldGet(this, _SkyLookupComponent_elementRef, "f").nativeElement
|
|
3365
|
-
: this.lookupWrapperRef?.nativeElement;
|
|
3366
|
-
const documentObj = __classPrivateFieldGet(this, _SkyLookupComponent_windowRef, "f").nativeWindow.document;
|
|
3367
|
-
// Handles focusing the input when the host is clicked.
|
|
3368
|
-
// The input should NOT be focused if other elements (tokens, etc.)
|
|
3369
|
-
// are currently focused or being tabbed through.
|
|
3370
|
-
fromEvent(documentObj, 'mousedown')
|
|
3371
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyLookupComponent_idle, "f")))
|
|
3372
|
-
.subscribe((event) => {
|
|
3373
|
-
hostElement = !this.inputBoxHostSvc
|
|
3374
|
-
? __classPrivateFieldGet(this, _SkyLookupComponent_elementRef, "f").nativeElement
|
|
3375
|
-
: this.lookupWrapperRef?.nativeElement;
|
|
3376
|
-
this.isInputFocused = hostElement.contains(event.target);
|
|
3377
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
|
|
3378
|
-
});
|
|
3379
|
-
fromEvent(documentObj, 'focusin')
|
|
3380
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyLookupComponent_idle, "f")))
|
|
3381
|
-
.subscribe((event) => {
|
|
3382
|
-
hostElement = !this.inputBoxHostSvc
|
|
3383
|
-
? __classPrivateFieldGet(this, _SkyLookupComponent_elementRef, "f").nativeElement
|
|
3384
|
-
: this.lookupWrapperRef?.nativeElement;
|
|
3385
|
-
this.isInputFocused = hostElement.contains(event.target);
|
|
3386
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_changeDetector, "f").markForCheck();
|
|
3387
|
-
});
|
|
3388
|
-
if (hostElement) {
|
|
3389
|
-
fromEvent(hostElement, 'mouseup')
|
|
3390
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyLookupComponent_idle, "f")))
|
|
3391
|
-
.subscribe(() => {
|
|
3392
|
-
const classList = documentObj.activeElement.classList;
|
|
3393
|
-
if (!classList || !classList.contains('sky-token')) {
|
|
3394
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_focusInput).call(this);
|
|
3395
|
-
}
|
|
3396
|
-
});
|
|
3397
|
-
}
|
|
3398
|
-
}, _SkyLookupComponent_focusInput = function _SkyLookupComponent_focusInput() {
|
|
3399
|
-
if (this.lookupWrapperRef) {
|
|
3400
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_adapter, "f").focusInput(this.lookupWrapperRef);
|
|
3401
|
-
}
|
|
3402
|
-
}, _SkyLookupComponent_onAddButtonComplete = function _SkyLookupComponent_onAddButtonComplete(args) {
|
|
3403
|
-
if (__classPrivateFieldGet(this, _SkyLookupComponent_openSelectionModal, "f")) {
|
|
3404
|
-
// Notify the selection modal of the new item. The selection
|
|
3405
|
-
// modal will decide whether the new item should be added
|
|
3406
|
-
// to the value when the user confirms or cancels the
|
|
3407
|
-
// selection modal.
|
|
3408
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_openSelectionModal, "f").addItem(args.item);
|
|
3409
|
-
}
|
|
3410
|
-
else {
|
|
3411
|
-
let addItemToValue;
|
|
3412
|
-
if (__classPrivateFieldGet(this, _SkyLookupComponent_instances, "m", _SkyLookupComponent_hasSearchAsync).call(this)) {
|
|
3413
|
-
addItemToValue = true;
|
|
3414
|
-
}
|
|
3415
|
-
else {
|
|
3416
|
-
if (args.data) {
|
|
3417
|
-
this.data = args.data;
|
|
3418
|
-
}
|
|
3419
|
-
if (this.data.indexOf(args.item) >= 0) {
|
|
3420
|
-
if (__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f")) {
|
|
3421
|
-
// Notify the picker of the new item. The picker will
|
|
3422
|
-
// decide whether the new item should be added to the
|
|
3423
|
-
// value when the user confirms or cancels the picker.
|
|
3424
|
-
__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f")
|
|
3425
|
-
.componentInstance.onItemSelect(true, { value: args.item, selected: false });
|
|
3426
|
-
}
|
|
3427
|
-
else {
|
|
3428
|
-
addItemToValue = true;
|
|
3429
|
-
}
|
|
3430
|
-
}
|
|
3431
|
-
}
|
|
3432
|
-
if (addItemToValue) {
|
|
3433
|
-
const newValue = this.selectMode === 'multiple'
|
|
3434
|
-
? this.value.concat(args.item)
|
|
3435
|
-
: [args.item];
|
|
3436
|
-
this.writeValue(newValue);
|
|
3437
|
-
}
|
|
3438
|
-
}
|
|
3439
|
-
}, _SkyLookupComponent_parseTokens = function _SkyLookupComponent_parseTokens(data) {
|
|
3440
|
-
return data.map((item) => {
|
|
3441
|
-
return {
|
|
3442
|
-
value: item,
|
|
3443
|
-
};
|
|
3444
|
-
});
|
|
3445
|
-
}, _SkyLookupComponent_sendAutocompleteMessage = function _SkyLookupComponent_sendAutocompleteMessage(type) {
|
|
3446
|
-
this.autocompleteController.next({ type });
|
|
3447
|
-
}, _SkyLookupComponent_sendTokensMessage = function _SkyLookupComponent_sendTokensMessage(type) {
|
|
3448
|
-
this.tokensController.next({ type });
|
|
3449
|
-
}, _SkyLookupComponent_updateForSelectMode = function _SkyLookupComponent_updateForSelectMode() {
|
|
3450
|
-
if (this.autocompleteInputDirective) {
|
|
3451
|
-
if (this.selectMode === 'single') {
|
|
3452
|
-
this.autocompleteInputDirective.value = this.value && this.value[0];
|
|
3453
|
-
}
|
|
3454
|
-
else {
|
|
3455
|
-
this.clearSearchText();
|
|
3456
|
-
}
|
|
3457
|
-
}
|
|
3458
|
-
}, _SkyLookupComponent_hasSearchAsync = function _SkyLookupComponent_hasSearchAsync() {
|
|
3459
|
-
return this.searchAsync.observers.length > 0;
|
|
3460
|
-
}, _SkyLookupComponent_pickerModalOpen = function _SkyLookupComponent_pickerModalOpen() {
|
|
3461
|
-
return !!(__classPrivateFieldGet(this, _SkyLookupComponent_openNativePicker, "f") || __classPrivateFieldGet(this, _SkyLookupComponent_openSelectionModal, "f"));
|
|
3462
|
-
};
|
|
3463
|
-
SkyLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAppWindowRef }, { token: SkyLookupAdapterService }, { token: i1$1.SkyModalService }, { token: i4$1.SkyLibResourcesService }, { token: SkySelectionModalService }, { token: i1.SkyLogService }, { token: i5$1.NgControl, optional: true, self: true }, { token: i5.SkyInputBoxHostService, optional: true }, { token: i8.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3464
|
-
SkyLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick" }, 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: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <div\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n #lookupWrapper\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy\"\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 >\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 <sky-tokens\n *ngIf=\"selectMode === 'multiple'\"\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-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 (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </sky-tokens>\n <div\n *ngIf=\"selectMode === 'single'\"\n class=\"sky-lookup-single-control\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\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 ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\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 [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n iconType=\"skyux\"\n icon=\"search\"\n ></sky-icon>\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 *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" iconType=\"skyux\" icon=\"search\"></sky-icon>\n </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.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:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.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%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}: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}: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}: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}: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-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{background-color:transparent;padding:0 0 0 15px}: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:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}.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}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.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-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.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:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i6.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3465
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupComponent, decorators: [{
|
|
3466
|
-
type: Component,
|
|
3467
|
-
args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <div\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n #lookupWrapper\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy\"\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 >\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 <sky-tokens\n *ngIf=\"selectMode === 'multiple'\"\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-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 (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </sky-tokens>\n <div\n *ngIf=\"selectMode === 'single'\"\n class=\"sky-lookup-single-control\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\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 ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\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 [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n iconType=\"skyux\"\n icon=\"search\"\n ></sky-icon>\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 *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" iconType=\"skyux\" icon=\"search\"></sky-icon>\n </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.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:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.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%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}: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}: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}: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}: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-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{background-color:transparent;padding:0 0 0 15px}: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:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}.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}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.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-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.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:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"] }]
|
|
3468
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAppWindowRef }, { type: SkyLookupAdapterService }, { type: i1$1.SkyModalService }, { type: i4$1.SkyLibResourcesService }, { type: SkySelectionModalService }, { type: i1.SkyLogService }, { type: i5$1.NgControl, decorators: [{
|
|
3469
|
-
type: Self
|
|
3470
|
-
}, {
|
|
3471
|
-
type: Optional
|
|
3472
|
-
}] }, { type: i5.SkyInputBoxHostService, decorators: [{
|
|
3473
|
-
type: Optional
|
|
3474
|
-
}] }, { type: i8.SkyThemeService, decorators: [{
|
|
3475
|
-
type: Optional
|
|
3476
|
-
}] }]; }, propDecorators: { ariaLabel: [{
|
|
3477
|
-
type: Input
|
|
3478
|
-
}], ariaLabelledBy: [{
|
|
3479
|
-
type: Input
|
|
3480
|
-
}], autocompleteAttribute: [{
|
|
3481
|
-
type: Input
|
|
3482
|
-
}], data: [{
|
|
3483
|
-
type: Input
|
|
3484
|
-
}], disabled: [{
|
|
3485
|
-
type: Input
|
|
3486
|
-
}], enableShowMore: [{
|
|
3487
|
-
type: Input
|
|
3488
|
-
}], placeholderText: [{
|
|
3489
|
-
type: Input
|
|
3490
|
-
}], idProperty: [{
|
|
3491
|
-
type: Input
|
|
3492
|
-
}], showAddButton: [{
|
|
3493
|
-
type: Input
|
|
3494
|
-
}], showMoreConfig: [{
|
|
3495
|
-
type: Input
|
|
3496
|
-
}], selectMode: [{
|
|
3497
|
-
type: Input
|
|
3498
|
-
}], wrapperClass: [{
|
|
3499
|
-
type: Input
|
|
3500
|
-
}], addClick: [{
|
|
3501
|
-
type: Output
|
|
3502
|
-
}], autocompleteInputDirective: [{
|
|
3503
|
-
type: ViewChild,
|
|
3504
|
-
args: [SkyAutocompleteInputDirective, {
|
|
3505
|
-
read: SkyAutocompleteInputDirective,
|
|
3506
|
-
static: false,
|
|
3507
|
-
}]
|
|
3508
|
-
}], showMoreButtonTemplateRef: [{
|
|
3509
|
-
type: ViewChild,
|
|
3510
|
-
args: ['showMoreButtonTemplateRef', {
|
|
3511
|
-
read: TemplateRef,
|
|
3512
|
-
static: true,
|
|
3513
|
-
}]
|
|
3514
|
-
}], inputTemplateRef: [{
|
|
3515
|
-
type: ViewChild,
|
|
3516
|
-
args: ['inputTemplateRef', {
|
|
3517
|
-
read: TemplateRef,
|
|
3518
|
-
static: true,
|
|
3519
|
-
}]
|
|
3520
|
-
}], lookupWrapperRef: [{
|
|
3521
|
-
type: ViewChild,
|
|
3522
|
-
args: ['lookupWrapper', {
|
|
3523
|
-
read: ElementRef,
|
|
3524
|
-
}]
|
|
3525
|
-
}], searchIconTemplateRef: [{
|
|
3526
|
-
type: ViewChild,
|
|
3527
|
-
args: ['searchIconTemplateRef', {
|
|
3528
|
-
read: TemplateRef,
|
|
3529
|
-
static: true,
|
|
3530
|
-
}]
|
|
3531
|
-
}] } });
|
|
3532
|
-
|
|
3533
|
-
class SkyLookupModule {
|
|
3534
|
-
}
|
|
3535
|
-
SkyLookupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3536
|
-
SkyLookupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupModule, declarations: [SkyLookupComponent, SkyLookupShowMoreModalComponent], imports: [CommonModule,
|
|
3537
|
-
FormsModule,
|
|
3538
|
-
SkyAutocompleteModule,
|
|
3539
|
-
SkyCheckboxModule,
|
|
3540
|
-
SkyIconModule,
|
|
3541
|
-
SkyInfiniteScrollModule,
|
|
3542
|
-
SkyI18nModule,
|
|
3543
|
-
SkyLookupResourcesModule,
|
|
3544
|
-
SkyModalModule,
|
|
3545
|
-
SkyRepeaterModule,
|
|
3546
|
-
SkySearchModule,
|
|
3547
|
-
SkySelectionModalModule,
|
|
3548
|
-
SkyThemeModule,
|
|
3549
|
-
SkyTokensModule,
|
|
3550
|
-
SkyToolbarModule,
|
|
3551
|
-
SkyViewkeeperModule,
|
|
3552
|
-
SkyWaitModule], exports: [SkyLookupComponent] });
|
|
3553
|
-
SkyLookupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupModule, imports: [CommonModule,
|
|
3554
|
-
FormsModule,
|
|
3555
|
-
SkyAutocompleteModule,
|
|
3556
|
-
SkyCheckboxModule,
|
|
3557
|
-
SkyIconModule,
|
|
3558
|
-
SkyInfiniteScrollModule,
|
|
3559
|
-
SkyI18nModule,
|
|
3560
|
-
SkyLookupResourcesModule,
|
|
3561
|
-
SkyModalModule,
|
|
3562
|
-
SkyRepeaterModule,
|
|
3563
|
-
SkySearchModule,
|
|
3564
|
-
SkySelectionModalModule,
|
|
3565
|
-
SkyThemeModule,
|
|
3566
|
-
SkyTokensModule,
|
|
3567
|
-
SkyToolbarModule,
|
|
3568
|
-
SkyViewkeeperModule,
|
|
3569
|
-
SkyWaitModule] });
|
|
3570
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLookupModule, decorators: [{
|
|
3571
|
-
type: NgModule,
|
|
3572
|
-
args: [{
|
|
3573
|
-
declarations: [SkyLookupComponent, SkyLookupShowMoreModalComponent],
|
|
3574
|
-
imports: [
|
|
3575
|
-
CommonModule,
|
|
3576
|
-
FormsModule,
|
|
3577
|
-
SkyAutocompleteModule,
|
|
3578
|
-
SkyCheckboxModule,
|
|
3579
|
-
SkyIconModule,
|
|
3580
|
-
SkyInfiniteScrollModule,
|
|
3581
|
-
SkyI18nModule,
|
|
3582
|
-
SkyLookupResourcesModule,
|
|
3583
|
-
SkyModalModule,
|
|
3584
|
-
SkyRepeaterModule,
|
|
3585
|
-
SkySearchModule,
|
|
3586
|
-
SkySelectionModalModule,
|
|
3587
|
-
SkyThemeModule,
|
|
3588
|
-
SkyTokensModule,
|
|
3589
|
-
SkyToolbarModule,
|
|
3590
|
-
SkyViewkeeperModule,
|
|
3591
|
-
SkyWaitModule,
|
|
3592
|
-
],
|
|
3593
|
-
exports: [SkyLookupComponent],
|
|
3594
|
-
}]
|
|
3595
|
-
}] });
|
|
3596
|
-
|
|
3597
|
-
/**
|
|
3598
|
-
* @deprecated Use `SkyLookupSelectModeType` instead.
|
|
3599
|
-
* @internal
|
|
3600
|
-
*/
|
|
3601
|
-
var SkyLookupSelectMode;
|
|
3602
|
-
(function (SkyLookupSelectMode) {
|
|
3603
|
-
/**
|
|
3604
|
-
* Restricts users to a single selection.
|
|
3605
|
-
*/
|
|
3606
|
-
SkyLookupSelectMode["single"] = "single";
|
|
3607
|
-
/**
|
|
3608
|
-
* Allows users to select multiple items.
|
|
3609
|
-
*/
|
|
3610
|
-
SkyLookupSelectMode["multiple"] = "multiple";
|
|
3611
|
-
})(SkyLookupSelectMode || (SkyLookupSelectMode = {}));
|
|
3612
|
-
|
|
3613
|
-
/**
|
|
3614
|
-
* Specifies configuration options to launch a custom picker when users select
|
|
3615
|
-
* the button to view all options.
|
|
3616
|
-
*/
|
|
3617
|
-
class SkyLookupShowMoreCustomPickerContext {
|
|
3618
|
-
}
|
|
3619
|
-
|
|
3620
|
-
/**
|
|
3621
|
-
* Generated bundle index. Do not edit.
|
|
3622
|
-
*/
|
|
3623
|
-
|
|
3624
|
-
export { SKY_COUNTRY_FIELD_CONTEXT, SkyAutocompleteModule, SkyCountryFieldModule, SkyLookupModule, SkyLookupSelectMode, SkyLookupShowMoreCustomPickerContext, SkySearchComponent, SkySearchModule, SkySelectionModalModule, SkySelectionModalService, SkyAutocompleteInputDirective as λ1, SkyAutocompleteComponent as λ2, SkyCountryFieldComponent as λ3, SkyLookupComponent as λ4 };
|
|
3625
|
-
//# sourceMappingURL=skyux-lookup.mjs.map
|