@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.
Files changed (121) hide show
  1. package/documentation.json +244 -244
  2. package/esm2022/lib/modules/autocomplete/autocomplete-adapter.service.mjs +61 -0
  3. package/esm2022/lib/modules/autocomplete/autocomplete-input.directive.mjs +237 -0
  4. package/{esm2020 → esm2022}/lib/modules/autocomplete/autocomplete-search-async-disabled.pipe.mjs +4 -4
  5. package/esm2022/lib/modules/autocomplete/autocomplete.component.mjs +817 -0
  6. package/{esm2020 → esm2022}/lib/modules/autocomplete/autocomplete.module.mjs +27 -27
  7. package/esm2022/lib/modules/country-field/country-field.component.mjs +444 -0
  8. package/{esm2020 → esm2022}/lib/modules/country-field/country-field.module.mjs +19 -19
  9. package/{esm2020 → esm2022}/lib/modules/lookup/lookup-adapter.service.mjs +4 -4
  10. package/esm2022/lib/modules/lookup/lookup-autocomplete-adapter.mjs +114 -0
  11. package/esm2022/lib/modules/lookup/lookup-show-more-modal.component.mjs +270 -0
  12. package/{esm2020 → esm2022}/lib/modules/lookup/lookup.component.mjs +299 -280
  13. package/{esm2020 → esm2022}/lib/modules/lookup/lookup.module.mjs +37 -37
  14. package/esm2022/lib/modules/search/search-adapter.service.mjs +46 -0
  15. package/esm2022/lib/modules/search/search.component.mjs +285 -0
  16. package/{esm2020 → esm2022}/lib/modules/search/search.module.mjs +17 -17
  17. package/{esm2020 → esm2022}/lib/modules/selection-modal/selection-modal-item-selected.pipe.mjs +4 -4
  18. package/esm2022/lib/modules/selection-modal/selection-modal.component.mjs +201 -0
  19. package/{esm2020 → esm2022}/lib/modules/selection-modal/selection-modal.module.mjs +27 -27
  20. package/esm2022/lib/modules/selection-modal/selection-modal.service.mjs +89 -0
  21. package/esm2022/lib/modules/selection-modal/types/selection-modal-instance.mjs +45 -0
  22. package/esm2022/lib/modules/shared/sky-lookup-resources.module.mjs +71 -0
  23. package/esm2022/testing/autocomplete/autocomplete-harness.mjs +155 -0
  24. package/esm2022/testing/autocomplete/autocomplete-input-harness.mjs +63 -0
  25. package/esm2022/testing/autocomplete/autocomplete-search-result-harness.mjs +44 -0
  26. package/esm2022/testing/country-field/country-field-fixture.mjs +118 -0
  27. package/{esm2020 → esm2022}/testing/country-field/country-field-testing.module.mjs +5 -5
  28. package/esm2022/testing/lookup/lookup-harness.mjs +76 -0
  29. package/{esm2020 → esm2022}/testing/search/search-fixture.mjs +18 -19
  30. package/esm2022/testing/search/search-harness.mjs +80 -0
  31. package/{esm2020 → esm2022}/testing/search/search-testing.module.mjs +5 -5
  32. package/esm2022/testing/selection-modal/selection-modal-harness.mjs +122 -0
  33. package/{fesm2020 → fesm2022}/skyux-lookup-testing.mjs +171 -187
  34. package/{fesm2020 → fesm2022}/skyux-lookup-testing.mjs.map +1 -1
  35. package/fesm2022/skyux-lookup.mjs +3707 -0
  36. package/{fesm2015 → fesm2022}/skyux-lookup.mjs.map +1 -1
  37. package/lib/modules/autocomplete/autocomplete-input.directive.d.ts +1 -1
  38. package/lib/modules/autocomplete/autocomplete.component.d.ts +1 -1
  39. package/lib/modules/country-field/country-field.component.d.ts +1 -1
  40. package/lib/modules/lookup/lookup-autocomplete-adapter.d.ts +1 -1
  41. package/lib/modules/lookup/lookup.component.d.ts +1 -1
  42. package/lib/modules/search/search.component.d.ts +1 -1
  43. package/package.json +23 -31
  44. package/esm2020/lib/modules/autocomplete/autocomplete-adapter.service.mjs +0 -64
  45. package/esm2020/lib/modules/autocomplete/autocomplete-input.directive.mjs +0 -235
  46. package/esm2020/lib/modules/autocomplete/autocomplete.component.mjs +0 -775
  47. package/esm2020/lib/modules/country-field/country-field.component.mjs +0 -433
  48. package/esm2020/lib/modules/lookup/lookup-autocomplete-adapter.mjs +0 -115
  49. package/esm2020/lib/modules/lookup/lookup-show-more-modal.component.mjs +0 -271
  50. package/esm2020/lib/modules/search/search-adapter.service.mjs +0 -46
  51. package/esm2020/lib/modules/search/search.component.mjs +0 -279
  52. package/esm2020/lib/modules/selection-modal/selection-modal.component.mjs +0 -199
  53. package/esm2020/lib/modules/selection-modal/selection-modal.service.mjs +0 -92
  54. package/esm2020/lib/modules/selection-modal/types/selection-modal-instance.mjs +0 -48
  55. package/esm2020/lib/modules/shared/sky-lookup-resources.module.mjs +0 -71
  56. package/esm2020/testing/autocomplete/autocomplete-harness.mjs +0 -161
  57. package/esm2020/testing/autocomplete/autocomplete-input-harness.mjs +0 -63
  58. package/esm2020/testing/autocomplete/autocomplete-search-result-harness.mjs +0 -44
  59. package/esm2020/testing/country-field/country-field-fixture.mjs +0 -114
  60. package/esm2020/testing/lookup/lookup-harness.mjs +0 -82
  61. package/esm2020/testing/search/search-harness.mjs +0 -86
  62. package/esm2020/testing/selection-modal/selection-modal-harness.mjs +0 -128
  63. package/fesm2015/skyux-lookup-testing.mjs +0 -980
  64. package/fesm2015/skyux-lookup-testing.mjs.map +0 -1
  65. package/fesm2015/skyux-lookup.mjs +0 -3642
  66. package/fesm2020/skyux-lookup.mjs +0 -3625
  67. package/fesm2020/skyux-lookup.mjs.map +0 -1
  68. /package/{esm2020 → esm2022}/index.mjs +0 -0
  69. /package/{esm2020 → esm2022}/lib/modules/autocomplete/autocomplete-default-search-function.mjs +0 -0
  70. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-default-search-function-options.mjs +0 -0
  71. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-input-text-change.mjs +0 -0
  72. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-message-type.mjs +0 -0
  73. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-message.mjs +0 -0
  74. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-args.mjs +0 -0
  75. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-async-args.mjs +0 -0
  76. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-async-function.mjs +0 -0
  77. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-async-result-display-type.mjs +0 -0
  78. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-async-result.mjs +0 -0
  79. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-context.mjs +0 -0
  80. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-function-filter.mjs +0 -0
  81. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-function-response.mjs +0 -0
  82. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-search-function.mjs +0 -0
  83. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-selection-change.mjs +0 -0
  84. /package/{esm2020 → esm2022}/lib/modules/autocomplete/types/autocomplete-show-more-args.mjs +0 -0
  85. /package/{esm2020 → esm2022}/lib/modules/country-field/types/country-field-context-token.mjs +0 -0
  86. /package/{esm2020 → esm2022}/lib/modules/country-field/types/country-field-context.mjs +0 -0
  87. /package/{esm2020 → esm2022}/lib/modules/country-field/types/country.mjs +0 -0
  88. /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-add-click-callback-args.mjs +0 -0
  89. /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-add-click-event-args.mjs +0 -0
  90. /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-select-mode-type.mjs +0 -0
  91. /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-select-mode.mjs +0 -0
  92. /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-config.mjs +0 -0
  93. /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-custom-picker-context.mjs +0 -0
  94. /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-custom-picker.mjs +0 -0
  95. /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-native-picker-config.mjs +0 -0
  96. /package/{esm2020 → esm2022}/lib/modules/lookup/types/lookup-show-more-native-picker-context.mjs +0 -0
  97. /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-add-click-callback-args.mjs +0 -0
  98. /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-add-click-event-args.mjs +0 -0
  99. /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-close-args.mjs +0 -0
  100. /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-context.mjs +0 -0
  101. /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-open-args.mjs +0 -0
  102. /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-result.mjs +0 -0
  103. /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-search-args.mjs +0 -0
  104. /package/{esm2020 → esm2022}/lib/modules/selection-modal/types/selection-modal-search-result.mjs +0 -0
  105. /package/{esm2020 → esm2022}/lib/modules/shared/sky-lookup-string-utils.mjs +0 -0
  106. /package/{esm2020 → esm2022}/skyux-lookup.mjs +0 -0
  107. /package/{esm2020 → esm2022}/testing/autocomplete/autocomplete-harness-filters.mjs +0 -0
  108. /package/{esm2020 → esm2022}/testing/autocomplete/autocomplete-search-result-harness-filters.mjs +0 -0
  109. /package/{esm2020 → esm2022}/testing/lookup/lookup-harness-filters.mjs +0 -0
  110. /package/{esm2020 → esm2022}/testing/lookup/lookup-selection-harness-filters.mjs +0 -0
  111. /package/{esm2020 → esm2022}/testing/lookup/lookup-selection-harness.mjs +0 -0
  112. /package/{esm2020 → esm2022}/testing/lookup/lookup-selections-list-harness.mjs +0 -0
  113. /package/{esm2020 → esm2022}/testing/lookup/lookup-show-more-picker-harness-filters.mjs +0 -0
  114. /package/{esm2020 → esm2022}/testing/lookup/lookup-show-more-picker-harness.mjs +0 -0
  115. /package/{esm2020 → esm2022}/testing/lookup/lookup-show-more-picker-search-result-harness-filters.mjs +0 -0
  116. /package/{esm2020 → esm2022}/testing/lookup/lookup-show-more-picker-search-result-harness.mjs +0 -0
  117. /package/{esm2020 → esm2022}/testing/public-api.mjs +0 -0
  118. /package/{esm2020 → esm2022}/testing/search/search-harness-filters.mjs +0 -0
  119. /package/{esm2020 → esm2022}/testing/selection-modal/selection-modal-search-result-harness-filters.mjs +0 -0
  120. /package/{esm2020 → esm2022}/testing/selection-modal/selection-modal-search-result-harness.mjs +0 -0
  121. /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