@skyux/lookup 6.3.1 → 6.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +791 -784
- package/esm2020/lib/modules/autocomplete/autocomplete-adapter.service.mjs +12 -8
- package/esm2020/lib/modules/autocomplete/autocomplete-default-search-function.mjs +1 -1
- package/esm2020/lib/modules/autocomplete/autocomplete-input.directive.mjs +82 -69
- package/esm2020/lib/modules/autocomplete/autocomplete.component.mjs +377 -381
- package/esm2020/lib/modules/lookup/lookup.component.mjs +2 -1
- package/fesm2015/skyux-lookup.mjs +467 -455
- package/fesm2015/skyux-lookup.mjs.map +1 -1
- package/fesm2020/skyux-lookup.mjs +467 -455
- package/fesm2020/skyux-lookup.mjs.map +1 -1
- package/lib/modules/autocomplete/autocomplete-adapter.service.d.ts +1 -3
- package/lib/modules/autocomplete/autocomplete-input.directive.d.ts +2 -15
- package/lib/modules/autocomplete/autocomplete.component.d.ts +13 -69
- package/package.json +10 -10
|
@@ -12,6 +12,7 @@ import * as i7 from '@skyux/theme';
|
|
|
12
12
|
import { SkyThemeModule } from '@skyux/theme';
|
|
13
13
|
import * as i5 from '@skyux/i18n';
|
|
14
14
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
15
|
+
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
15
16
|
import { Subject, fromEvent, of, from } from 'rxjs';
|
|
16
17
|
import { takeUntil, debounceTime, switchMap, take, map, distinctUntilChanged } from 'rxjs/operators';
|
|
17
18
|
import * as i6 from '@skyux/forms';
|
|
@@ -94,6 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
94
95
|
}]
|
|
95
96
|
}] });
|
|
96
97
|
|
|
98
|
+
var _SkyAutocompleteInputDirective_instances, _SkyAutocompleteInputDirective_blur, _SkyAutocompleteInputDirective_control, _SkyAutocompleteInputDirective_elementRef, _SkyAutocompleteInputDirective_focus, _SkyAutocompleteInputDirective_isFirstChange, _SkyAutocompleteInputDirective_ngUnsubscribe, _SkyAutocompleteInputDirective_renderer, _SkyAutocompleteInputDirective_textChanges, _SkyAutocompleteInputDirective__autocompleteAttribute, _SkyAutocompleteInputDirective__blurObs, _SkyAutocompleteInputDirective__disabled, _SkyAutocompleteInputDirective__displayWith, _SkyAutocompleteInputDirective__focusObs, _SkyAutocompleteInputDirective__textChangesObs, _SkyAutocompleteInputDirective__value, _SkyAutocompleteInputDirective_setAttributes, _SkyAutocompleteInputDirective_getValueByKey;
|
|
97
99
|
const SKY_AUTOCOMPLETE_VALUE_ACCESSOR = {
|
|
98
100
|
provide: NG_VALUE_ACCESSOR,
|
|
99
101
|
useExisting: forwardRef(() => SkyAutocompleteInputDirective),
|
|
@@ -106,17 +108,33 @@ const SKY_AUTOCOMPLETE_VALIDATOR = {
|
|
|
106
108
|
};
|
|
107
109
|
class SkyAutocompleteInputDirective {
|
|
108
110
|
constructor(elementRef, renderer) {
|
|
109
|
-
this
|
|
110
|
-
this
|
|
111
|
-
this
|
|
112
|
-
this
|
|
113
|
-
this
|
|
114
|
-
this
|
|
115
|
-
this
|
|
116
|
-
this
|
|
111
|
+
_SkyAutocompleteInputDirective_instances.add(this);
|
|
112
|
+
_SkyAutocompleteInputDirective_blur.set(this, void 0);
|
|
113
|
+
_SkyAutocompleteInputDirective_control.set(this, void 0);
|
|
114
|
+
_SkyAutocompleteInputDirective_elementRef.set(this, void 0);
|
|
115
|
+
_SkyAutocompleteInputDirective_focus.set(this, void 0);
|
|
116
|
+
_SkyAutocompleteInputDirective_isFirstChange.set(this, true);
|
|
117
|
+
_SkyAutocompleteInputDirective_ngUnsubscribe.set(this, new Subject());
|
|
118
|
+
_SkyAutocompleteInputDirective_renderer.set(this, void 0);
|
|
119
|
+
_SkyAutocompleteInputDirective_textChanges.set(this, void 0);
|
|
120
|
+
_SkyAutocompleteInputDirective__autocompleteAttribute.set(this, void 0);
|
|
121
|
+
_SkyAutocompleteInputDirective__blurObs.set(this, void 0);
|
|
122
|
+
_SkyAutocompleteInputDirective__disabled.set(this, false);
|
|
123
|
+
_SkyAutocompleteInputDirective__displayWith.set(this, '');
|
|
124
|
+
_SkyAutocompleteInputDirective__focusObs.set(this, void 0);
|
|
125
|
+
_SkyAutocompleteInputDirective__textChangesObs.set(this, void 0);
|
|
126
|
+
_SkyAutocompleteInputDirective__value.set(this, void 0);
|
|
117
127
|
// istanbul ignore next
|
|
118
128
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
119
129
|
this.onValidatorChange = () => { };
|
|
130
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_elementRef, elementRef, "f");
|
|
131
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_renderer, renderer, "f");
|
|
132
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_blur, new Subject(), "f");
|
|
133
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_focus, new Subject(), "f");
|
|
134
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_textChanges, new Subject(), "f");
|
|
135
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__blurObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blur, "f").asObservable(), "f");
|
|
136
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__focusObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_focus, "f").asObservable(), "f");
|
|
137
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__textChangesObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").asObservable(), "f");
|
|
120
138
|
}
|
|
121
139
|
/**
|
|
122
140
|
* Specifies the value for the `autocomplete` attribute on the form input.
|
|
@@ -124,114 +142,109 @@ class SkyAutocompleteInputDirective {
|
|
|
124
142
|
*/
|
|
125
143
|
set autocompleteAttribute(value) {
|
|
126
144
|
if (!value) {
|
|
127
|
-
this
|
|
145
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, 'off', "f");
|
|
128
146
|
}
|
|
129
147
|
else {
|
|
130
|
-
this
|
|
148
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, value, "f");
|
|
131
149
|
}
|
|
132
|
-
this.
|
|
150
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'autocomplete', this.autocompleteAttribute);
|
|
133
151
|
}
|
|
134
152
|
get autocompleteAttribute() {
|
|
135
|
-
return this
|
|
153
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, "f") || 'off';
|
|
136
154
|
}
|
|
137
155
|
/**
|
|
138
156
|
* Indicates whether to disable the autocomplete field.
|
|
139
157
|
* @default false
|
|
140
158
|
*/
|
|
141
159
|
set disabled(value) {
|
|
142
|
-
this
|
|
143
|
-
this.
|
|
160
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__disabled, value, "f");
|
|
161
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'disabled', value);
|
|
144
162
|
}
|
|
145
163
|
get disabled() {
|
|
146
|
-
return this
|
|
164
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__disabled, "f");
|
|
147
165
|
}
|
|
148
166
|
get blur() {
|
|
149
|
-
return this
|
|
167
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__blurObs, "f");
|
|
150
168
|
}
|
|
151
169
|
get displayWith() {
|
|
152
|
-
return this
|
|
170
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__displayWith, "f");
|
|
153
171
|
}
|
|
154
172
|
set displayWith(value) {
|
|
155
|
-
this
|
|
156
|
-
this.inputTextValue = this.
|
|
173
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__displayWith, value, "f");
|
|
174
|
+
this.inputTextValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
|
|
157
175
|
}
|
|
158
176
|
get focus() {
|
|
159
|
-
return this
|
|
177
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__focusObs, "f");
|
|
160
178
|
}
|
|
161
179
|
get inputTextValue() {
|
|
162
|
-
return this.
|
|
180
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value;
|
|
163
181
|
}
|
|
164
182
|
set inputTextValue(value) {
|
|
165
|
-
this.
|
|
183
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value = value || '';
|
|
166
184
|
}
|
|
167
185
|
get textChanges() {
|
|
168
|
-
return this
|
|
186
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__textChangesObs, "f");
|
|
169
187
|
}
|
|
170
188
|
get value() {
|
|
171
|
-
return this
|
|
189
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f");
|
|
172
190
|
}
|
|
173
191
|
set value(value) {
|
|
174
|
-
const isNewValue = value !== this
|
|
192
|
+
const isNewValue = value !== __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f");
|
|
175
193
|
/* istanbul ignore else */
|
|
176
194
|
if (isNewValue) {
|
|
177
|
-
this
|
|
178
|
-
this.inputTextValue = this.
|
|
179
|
-
this.onChange(this
|
|
195
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective__value, value, "f");
|
|
196
|
+
this.inputTextValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
|
|
197
|
+
this.onChange(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f"));
|
|
180
198
|
// Do not mark the field as "dirty"
|
|
181
199
|
// if the field has been initialized with a value.
|
|
182
|
-
if (this
|
|
183
|
-
this.
|
|
200
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_isFirstChange, "f") && __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_control, "f")) {
|
|
201
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_control, "f").markAsPristine();
|
|
184
202
|
}
|
|
185
|
-
if (this
|
|
186
|
-
this
|
|
203
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_isFirstChange, "f") && __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f")) {
|
|
204
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_isFirstChange, false, "f");
|
|
187
205
|
}
|
|
188
206
|
}
|
|
189
207
|
}
|
|
190
208
|
ngOnInit() {
|
|
191
|
-
const element = this.
|
|
192
|
-
this.
|
|
209
|
+
const element = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement;
|
|
210
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_setAttributes).call(this, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f"));
|
|
193
211
|
fromEvent(element, 'input')
|
|
194
|
-
.pipe(takeUntil(this
|
|
212
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
|
|
195
213
|
.subscribe(() => {
|
|
196
|
-
/** Sanity check */
|
|
197
214
|
if (!this.disabled) {
|
|
198
|
-
this.
|
|
199
|
-
value: this.
|
|
215
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").next({
|
|
216
|
+
value: __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value,
|
|
200
217
|
});
|
|
201
218
|
}
|
|
202
219
|
});
|
|
203
220
|
fromEvent(element, 'blur')
|
|
204
|
-
.pipe(takeUntil(this
|
|
221
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
|
|
205
222
|
.subscribe(() => {
|
|
206
|
-
/** Sanity check */
|
|
207
223
|
if (!this.disabled) {
|
|
208
|
-
this.
|
|
224
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blur, "f").next();
|
|
209
225
|
}
|
|
210
226
|
});
|
|
211
227
|
fromEvent(element, 'focus')
|
|
212
|
-
.pipe(takeUntil(this
|
|
228
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
|
|
213
229
|
.subscribe(() => {
|
|
214
|
-
/** Sanity check */
|
|
215
230
|
if (!this.disabled) {
|
|
216
|
-
this.
|
|
231
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_focus, "f").next();
|
|
217
232
|
}
|
|
218
233
|
});
|
|
219
234
|
fromEvent(element, 'change')
|
|
220
|
-
.pipe(takeUntil(this
|
|
235
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_ngUnsubscribe, "f")))
|
|
221
236
|
.subscribe(() => {
|
|
222
|
-
/** Sanity check */
|
|
223
237
|
/* istanbul ignore else */
|
|
224
238
|
if (!this.disabled) {
|
|
225
|
-
this
|
|
239
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_isFirstChange, false, "f");
|
|
226
240
|
}
|
|
227
241
|
});
|
|
228
242
|
}
|
|
229
243
|
ngOnDestroy() {
|
|
230
|
-
this.
|
|
231
|
-
this.
|
|
232
|
-
this.
|
|
233
|
-
this.
|
|
234
|
-
this._blur = this._textChanges = this.ngUnsubscribe = undefined;
|
|
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();
|
|
235
248
|
}
|
|
236
249
|
writeValue(value) {
|
|
237
250
|
this.value = value;
|
|
@@ -246,7 +259,7 @@ class SkyAutocompleteInputDirective {
|
|
|
246
259
|
this.onValidatorChange = fn;
|
|
247
260
|
}
|
|
248
261
|
restoreInputTextValueToPreviousState() {
|
|
249
|
-
const modelValue = this.
|
|
262
|
+
const modelValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
|
|
250
263
|
// If the search field contains text, make sure that the value
|
|
251
264
|
// matches the selected descriptor key.
|
|
252
265
|
if (this.inputTextValue !== modelValue) {
|
|
@@ -258,18 +271,18 @@ class SkyAutocompleteInputDirective {
|
|
|
258
271
|
this.disabled = disabled;
|
|
259
272
|
}
|
|
260
273
|
validate(control) {
|
|
261
|
-
if (!this
|
|
262
|
-
this
|
|
274
|
+
if (!__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_control, "f")) {
|
|
275
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_control, control, "f");
|
|
263
276
|
}
|
|
264
|
-
return;
|
|
277
|
+
return null;
|
|
265
278
|
}
|
|
266
279
|
// See: https://www.w3.org/TR/wai-aria-practices/#kbd_focus_activedescendant
|
|
267
280
|
setActiveDescendant(descendantId) {
|
|
268
281
|
if (descendantId) {
|
|
269
|
-
this.
|
|
282
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'aria-activedescendant', descendantId);
|
|
270
283
|
}
|
|
271
284
|
else {
|
|
272
|
-
this.
|
|
285
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").removeAttribute(__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement, 'aria-activedescendant');
|
|
273
286
|
}
|
|
274
287
|
}
|
|
275
288
|
// Angular automatically constructs these methods.
|
|
@@ -277,17 +290,17 @@ class SkyAutocompleteInputDirective {
|
|
|
277
290
|
onChange(value) { }
|
|
278
291
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
279
292
|
onTouched() { }
|
|
280
|
-
setAttributes(element) {
|
|
281
|
-
this.renderer.setAttribute(element, 'autocomplete', this.autocompleteAttribute);
|
|
282
|
-
this.renderer.setAttribute(element, 'autocapitalize', 'none');
|
|
283
|
-
this.renderer.setAttribute(element, 'autocorrect', 'off');
|
|
284
|
-
this.renderer.setAttribute(element, 'spellcheck', 'false');
|
|
285
|
-
this.renderer.addClass(element, 'sky-form-control');
|
|
286
|
-
}
|
|
287
|
-
getValueByKey() {
|
|
288
|
-
return this.value ? this.value[this.displayWith] : undefined;
|
|
289
|
-
}
|
|
290
293
|
}
|
|
294
|
+
_SkyAutocompleteInputDirective_blur = new WeakMap(), _SkyAutocompleteInputDirective_control = new WeakMap(), _SkyAutocompleteInputDirective_elementRef = new WeakMap(), _SkyAutocompleteInputDirective_focus = new WeakMap(), _SkyAutocompleteInputDirective_isFirstChange = new WeakMap(), _SkyAutocompleteInputDirective_ngUnsubscribe = new WeakMap(), _SkyAutocompleteInputDirective_renderer = new WeakMap(), _SkyAutocompleteInputDirective_textChanges = new WeakMap(), _SkyAutocompleteInputDirective__autocompleteAttribute = new WeakMap(), _SkyAutocompleteInputDirective__blurObs = new WeakMap(), _SkyAutocompleteInputDirective__disabled = new WeakMap(), _SkyAutocompleteInputDirective__displayWith = new WeakMap(), _SkyAutocompleteInputDirective__focusObs = new WeakMap(), _SkyAutocompleteInputDirective__textChangesObs = new WeakMap(), _SkyAutocompleteInputDirective__value = new WeakMap(), _SkyAutocompleteInputDirective_instances = new WeakSet(), _SkyAutocompleteInputDirective_setAttributes = function _SkyAutocompleteInputDirective_setAttributes(elementRef) {
|
|
295
|
+
const element = elementRef.nativeElement;
|
|
296
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocomplete', this.autocompleteAttribute);
|
|
297
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocapitalize', 'none');
|
|
298
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocorrect', 'off');
|
|
299
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'spellcheck', 'false');
|
|
300
|
+
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").addClass(element, 'sky-form-control');
|
|
301
|
+
}, _SkyAutocompleteInputDirective_getValueByKey = function _SkyAutocompleteInputDirective_getValueByKey() {
|
|
302
|
+
return this.value ? this.value[this.displayWith] : undefined;
|
|
303
|
+
};
|
|
291
304
|
SkyAutocompleteInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
292
305
|
SkyAutocompleteInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: { autocompleteAttribute: "autocompleteAttribute", disabled: "disabled" }, providers: [SKY_AUTOCOMPLETE_VALUE_ACCESSOR, SKY_AUTOCOMPLETE_VALIDATOR], ngImport: i0 });
|
|
293
306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteInputDirective, decorators: [{
|
|
@@ -327,14 +340,16 @@ function normalizeDiacritics(value) {
|
|
|
327
340
|
return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
328
341
|
}
|
|
329
342
|
|
|
343
|
+
var _SkyAutocompleteAdapterService_coreAdapterService, _SkyAutocompleteAdapterService_renderer;
|
|
330
344
|
/**
|
|
331
345
|
* @internal
|
|
332
346
|
*/
|
|
333
347
|
class SkyAutocompleteAdapterService {
|
|
334
348
|
constructor(coreAdapterService, rendererFactory) {
|
|
335
|
-
this
|
|
336
|
-
this
|
|
337
|
-
this
|
|
349
|
+
_SkyAutocompleteAdapterService_coreAdapterService.set(this, void 0);
|
|
350
|
+
_SkyAutocompleteAdapterService_renderer.set(this, void 0);
|
|
351
|
+
__classPrivateFieldSet(this, _SkyAutocompleteAdapterService_coreAdapterService, coreAdapterService, "f");
|
|
352
|
+
__classPrivateFieldSet(this, _SkyAutocompleteAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
|
|
338
353
|
}
|
|
339
354
|
/**
|
|
340
355
|
* Adds the className for the provided element.
|
|
@@ -343,11 +358,11 @@ class SkyAutocompleteAdapterService {
|
|
|
343
358
|
/* Sanity check */
|
|
344
359
|
/* istanbul ignore else */
|
|
345
360
|
if (element) {
|
|
346
|
-
this.
|
|
361
|
+
__classPrivateFieldGet(this, _SkyAutocompleteAdapterService_renderer, "f").addClass(element, className);
|
|
347
362
|
}
|
|
348
363
|
}
|
|
349
364
|
getOverlayFocusableElements(overlay) {
|
|
350
|
-
return this.
|
|
365
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteAdapterService_coreAdapterService, "f").getFocusableChildren(
|
|
351
366
|
/* Sanity check - calling function also has null check */
|
|
352
367
|
/* istanbul ignore next */
|
|
353
368
|
overlay === null || overlay === void 0 ? void 0 : overlay.componentRef.location.nativeElement, { ignoreTabIndex: true });
|
|
@@ -359,7 +374,7 @@ class SkyAutocompleteAdapterService {
|
|
|
359
374
|
/* Sanity check */
|
|
360
375
|
/* istanbul ignore else */
|
|
361
376
|
if (element) {
|
|
362
|
-
this.
|
|
377
|
+
__classPrivateFieldGet(this, _SkyAutocompleteAdapterService_renderer, "f").removeClass(element, className);
|
|
363
378
|
}
|
|
364
379
|
}
|
|
365
380
|
setDropdownWidth(elementRef, dropdownRef, isInputBox) {
|
|
@@ -368,7 +383,7 @@ class SkyAutocompleteAdapterService {
|
|
|
368
383
|
: elementRef.nativeElement;
|
|
369
384
|
if (parentElement) {
|
|
370
385
|
const width = parentElement.getBoundingClientRect().width;
|
|
371
|
-
this.
|
|
386
|
+
__classPrivateFieldGet(this, _SkyAutocompleteAdapterService_renderer, "f").setStyle(dropdownRef.nativeElement, 'width', `${width}px`);
|
|
372
387
|
}
|
|
373
388
|
}
|
|
374
389
|
/**
|
|
@@ -378,6 +393,7 @@ class SkyAutocompleteAdapterService {
|
|
|
378
393
|
element.tabIndex = tabIndex;
|
|
379
394
|
}
|
|
380
395
|
}
|
|
396
|
+
_SkyAutocompleteAdapterService_coreAdapterService = new WeakMap(), _SkyAutocompleteAdapterService_renderer = new WeakMap();
|
|
381
397
|
SkyAutocompleteAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteAdapterService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
382
398
|
SkyAutocompleteAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteAdapterService });
|
|
383
399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteAdapterService, decorators: [{
|
|
@@ -437,15 +453,11 @@ var SkyAutocompleteMessageType;
|
|
|
437
453
|
SkyAutocompleteMessageType[SkyAutocompleteMessageType["RepositionDropdown"] = 1] = "RepositionDropdown";
|
|
438
454
|
})(SkyAutocompleteMessageType || (SkyAutocompleteMessageType = {}));
|
|
439
455
|
|
|
456
|
+
var _SkyAutocompleteComponent_instances, _SkyAutocompleteComponent_activeElementIndex, _SkyAutocompleteComponent_adapterService, _SkyAutocompleteComponent_affixer, _SkyAutocompleteComponent_affixService, _SkyAutocompleteComponent_changeDetector, _SkyAutocompleteComponent_elementRef, _SkyAutocompleteComponent_inputBoxHostSvc, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, _SkyAutocompleteComponent_messageStreamSub, _SkyAutocompleteComponent_ngUnsubscribe, _SkyAutocompleteComponent_overlay, _SkyAutocompleteComponent_overlayService, _SkyAutocompleteComponent_overlayFocusableElements, _SkyAutocompleteComponent_currentSearchSub, _SkyAutocompleteComponent__data, _SkyAutocompleteComponent__debounceTime, _SkyAutocompleteComponent__descriptorProperty, _SkyAutocompleteComponent__highlightText, _SkyAutocompleteComponent__inputDirective, _SkyAutocompleteComponent__messageStream, _SkyAutocompleteComponent__propertiesToSearch, _SkyAutocompleteComponent__resultsRef, _SkyAutocompleteComponent__search, _SkyAutocompleteComponent__searchResults, _SkyAutocompleteComponent__searchResultTemplate, _SkyAutocompleteComponent__searchResultsLimit, _SkyAutocompleteComponent__searchTextMinimumCharacters, _SkyAutocompleteComponent_searchTextChanged, _SkyAutocompleteComponent_performSearch, _SkyAutocompleteComponent_cancelCurrentSearch, _SkyAutocompleteComponent_getHighlightText, _SkyAutocompleteComponent_selectSearchResultById, _SkyAutocompleteComponent_openDropdown, _SkyAutocompleteComponent_closeDropdown, _SkyAutocompleteComponent_setActiveDescendant, _SkyAutocompleteComponent_removeActiveDescendant, _SkyAutocompleteComponent_resetSearch, _SkyAutocompleteComponent_addInputEventListeners, _SkyAutocompleteComponent_destroyOverlay, _SkyAutocompleteComponent_createAffixer, _SkyAutocompleteComponent_destroyAffixer, _SkyAutocompleteComponent_initMessageStream, _SkyAutocompleteComponent_initOverlayFocusableElements, _SkyAutocompleteComponent_getActiveElement, _SkyAutocompleteComponent_removeFocusedClass, _SkyAutocompleteComponent_addFocusedClass;
|
|
440
457
|
let uniqueId$1 = 0;
|
|
441
458
|
class SkyAutocompleteComponent {
|
|
442
459
|
constructor(changeDetector, elementRef, affixService, adapterService, overlayService, inputBoxHostSvc) {
|
|
443
|
-
this
|
|
444
|
-
this.elementRef = elementRef;
|
|
445
|
-
this.affixService = affixService;
|
|
446
|
-
this.adapterService = adapterService;
|
|
447
|
-
this.overlayService = overlayService;
|
|
448
|
-
this.inputBoxHostSvc = inputBoxHostSvc;
|
|
460
|
+
_SkyAutocompleteComponent_instances.add(this);
|
|
449
461
|
/**
|
|
450
462
|
* @internal
|
|
451
463
|
* Indicates whether to display a button in the dropdown that opens a picker where users can view all options.
|
|
@@ -472,26 +484,59 @@ class SkyAutocompleteComponent {
|
|
|
472
484
|
* Fires when users select the button to view all options.
|
|
473
485
|
*/
|
|
474
486
|
this.showMoreClick = new EventEmitter();
|
|
487
|
+
/**
|
|
488
|
+
* Fires when users select items in the dropdown list.
|
|
489
|
+
*/
|
|
490
|
+
this.selectionChange = new EventEmitter();
|
|
475
491
|
/**
|
|
476
492
|
* Fires when users enter new search information and allows results to be
|
|
477
493
|
* returned via an observable.
|
|
478
494
|
*/
|
|
479
495
|
this.searchAsync = new EventEmitter();
|
|
480
496
|
this.isOpen = false;
|
|
497
|
+
this.searchText = '';
|
|
481
498
|
this.isSearchingAsync = false;
|
|
482
499
|
/**
|
|
483
500
|
* Index that indicates which descendant of the overlay currently has focus.
|
|
484
501
|
*/
|
|
485
|
-
this
|
|
486
|
-
this
|
|
487
|
-
this
|
|
502
|
+
_SkyAutocompleteComponent_activeElementIndex.set(this, -1);
|
|
503
|
+
_SkyAutocompleteComponent_adapterService.set(this, void 0);
|
|
504
|
+
_SkyAutocompleteComponent_affixer.set(this, void 0);
|
|
505
|
+
_SkyAutocompleteComponent_affixService.set(this, void 0);
|
|
506
|
+
_SkyAutocompleteComponent_changeDetector.set(this, void 0);
|
|
507
|
+
_SkyAutocompleteComponent_elementRef.set(this, void 0);
|
|
508
|
+
_SkyAutocompleteComponent_inputBoxHostSvc.set(this, void 0);
|
|
509
|
+
_SkyAutocompleteComponent_inputDirectiveUnsubscribe.set(this, new Subject());
|
|
510
|
+
_SkyAutocompleteComponent_messageStreamSub.set(this, void 0);
|
|
511
|
+
_SkyAutocompleteComponent_ngUnsubscribe.set(this, new Subject());
|
|
512
|
+
_SkyAutocompleteComponent_overlay.set(this, void 0);
|
|
513
|
+
_SkyAutocompleteComponent_overlayService.set(this, void 0);
|
|
488
514
|
/**
|
|
489
515
|
* Elements within the autocomplete dropdown that are focusable.
|
|
490
516
|
* These are typically the search results and action buttons, but could also be
|
|
491
517
|
* elements provided in the consumer's own template.
|
|
492
518
|
*/
|
|
493
|
-
this
|
|
494
|
-
this
|
|
519
|
+
_SkyAutocompleteComponent_overlayFocusableElements.set(this, []);
|
|
520
|
+
_SkyAutocompleteComponent_currentSearchSub.set(this, void 0);
|
|
521
|
+
_SkyAutocompleteComponent__data.set(this, void 0);
|
|
522
|
+
_SkyAutocompleteComponent__debounceTime.set(this, void 0);
|
|
523
|
+
_SkyAutocompleteComponent__descriptorProperty.set(this, void 0);
|
|
524
|
+
_SkyAutocompleteComponent__highlightText.set(this, void 0);
|
|
525
|
+
_SkyAutocompleteComponent__inputDirective.set(this, void 0);
|
|
526
|
+
_SkyAutocompleteComponent__messageStream.set(this, new Subject());
|
|
527
|
+
_SkyAutocompleteComponent__propertiesToSearch.set(this, void 0);
|
|
528
|
+
_SkyAutocompleteComponent__resultsRef.set(this, void 0);
|
|
529
|
+
_SkyAutocompleteComponent__search.set(this, void 0);
|
|
530
|
+
_SkyAutocompleteComponent__searchResults.set(this, void 0);
|
|
531
|
+
_SkyAutocompleteComponent__searchResultTemplate.set(this, void 0);
|
|
532
|
+
_SkyAutocompleteComponent__searchResultsLimit.set(this, void 0);
|
|
533
|
+
_SkyAutocompleteComponent__searchTextMinimumCharacters.set(this, void 0);
|
|
534
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_changeDetector, changeDetector, "f");
|
|
535
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_elementRef, elementRef, "f");
|
|
536
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_affixService, affixService, "f");
|
|
537
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_adapterService, adapterService, "f");
|
|
538
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_overlayService, overlayService, "f");
|
|
539
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_inputBoxHostSvc, inputBoxHostSvc, "f");
|
|
495
540
|
const id = ++uniqueId$1;
|
|
496
541
|
this.resultsListId = `sky-autocomplete-list-${id}`;
|
|
497
542
|
this.resultsWrapperId = `sky-autocomplete-wrapper-${id}`;
|
|
@@ -502,10 +547,10 @@ class SkyAutocompleteComponent {
|
|
|
502
547
|
* changes due to server calls, use `search` or `searchAsync` instead.
|
|
503
548
|
*/
|
|
504
549
|
set data(value) {
|
|
505
|
-
this
|
|
550
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__data, value, "f");
|
|
506
551
|
}
|
|
507
552
|
get data() {
|
|
508
|
-
return this
|
|
553
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__data, "f") || [];
|
|
509
554
|
}
|
|
510
555
|
/**
|
|
511
556
|
* Specifies how many milliseconds to wait before searching while users
|
|
@@ -513,10 +558,10 @@ class SkyAutocompleteComponent {
|
|
|
513
558
|
* @default 0
|
|
514
559
|
*/
|
|
515
560
|
set debounceTime(value) {
|
|
516
|
-
this
|
|
561
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__debounceTime, value, "f");
|
|
517
562
|
}
|
|
518
563
|
get debounceTime() {
|
|
519
|
-
return this
|
|
564
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__debounceTime, "f") || 0;
|
|
520
565
|
}
|
|
521
566
|
/**
|
|
522
567
|
* Specifies an object property to display in the text input after users
|
|
@@ -524,31 +569,31 @@ class SkyAutocompleteComponent {
|
|
|
524
569
|
* @default "name"
|
|
525
570
|
*/
|
|
526
571
|
set descriptorProperty(value) {
|
|
527
|
-
this
|
|
572
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__descriptorProperty, value, "f");
|
|
528
573
|
}
|
|
529
574
|
get descriptorProperty() {
|
|
530
|
-
return this
|
|
575
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__descriptorProperty, "f") || 'name';
|
|
531
576
|
}
|
|
532
577
|
/**
|
|
533
578
|
* Specifies an observable of `SkyAutocompleteMessage` that can close the dropdown.
|
|
534
579
|
* @internal
|
|
535
580
|
*/
|
|
536
581
|
set messageStream(value) {
|
|
537
|
-
this
|
|
538
|
-
this.
|
|
582
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__messageStream, value !== null && value !== void 0 ? value : new Subject(), "f");
|
|
583
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initMessageStream).call(this);
|
|
539
584
|
}
|
|
540
585
|
get messageStream() {
|
|
541
|
-
return this
|
|
586
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__messageStream, "f");
|
|
542
587
|
}
|
|
543
588
|
/**
|
|
544
589
|
* Specifies the object properties to search.
|
|
545
590
|
* @default ["name"]
|
|
546
591
|
*/
|
|
547
592
|
set propertiesToSearch(value) {
|
|
548
|
-
this
|
|
593
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__propertiesToSearch, value, "f");
|
|
549
594
|
}
|
|
550
595
|
get propertiesToSearch() {
|
|
551
|
-
return this
|
|
596
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__propertiesToSearch, "f") || ['name'];
|
|
552
597
|
}
|
|
553
598
|
/**
|
|
554
599
|
* Specifies a function to dynamically manage the data source when users
|
|
@@ -559,10 +604,10 @@ class SkyAutocompleteComponent {
|
|
|
559
604
|
* `search`.
|
|
560
605
|
*/
|
|
561
606
|
set search(value) {
|
|
562
|
-
this
|
|
607
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__search, value, "f");
|
|
563
608
|
}
|
|
564
609
|
get search() {
|
|
565
|
-
return (this
|
|
610
|
+
return (__classPrivateFieldGet(this, _SkyAutocompleteComponent__search, "f") ||
|
|
566
611
|
skyAutocompleteDefaultSearchFunction({
|
|
567
612
|
propertiesToSearch: this.propertiesToSearch,
|
|
568
613
|
searchFilters: this.searchFilters,
|
|
@@ -574,10 +619,10 @@ class SkyAutocompleteComponent {
|
|
|
574
619
|
* as `item` variables that reference all of the object properties of the search results.
|
|
575
620
|
*/
|
|
576
621
|
set searchResultTemplate(value) {
|
|
577
|
-
this
|
|
622
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__searchResultTemplate, value, "f");
|
|
578
623
|
}
|
|
579
624
|
get searchResultTemplate() {
|
|
580
|
-
return this
|
|
625
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultTemplate, "f") || this.defaultSearchResultTemplate;
|
|
581
626
|
}
|
|
582
627
|
/**
|
|
583
628
|
* Specifies the minimum number of characters that users must enter before
|
|
@@ -586,11 +631,12 @@ class SkyAutocompleteComponent {
|
|
|
586
631
|
* @default 1
|
|
587
632
|
*/
|
|
588
633
|
set searchTextMinimumCharacters(value) {
|
|
589
|
-
this
|
|
634
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, value, "f");
|
|
590
635
|
}
|
|
591
636
|
get searchTextMinimumCharacters() {
|
|
592
|
-
return this
|
|
593
|
-
|
|
637
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, "f") &&
|
|
638
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, "f") > 0
|
|
639
|
+
? __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, "f")
|
|
594
640
|
: 1;
|
|
595
641
|
}
|
|
596
642
|
/**
|
|
@@ -598,126 +644,117 @@ class SkyAutocompleteComponent {
|
|
|
598
644
|
* By default, the component displays all matching results.
|
|
599
645
|
*/
|
|
600
646
|
set searchResultsLimit(value) {
|
|
601
|
-
this
|
|
647
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__searchResultsLimit, value, "f");
|
|
602
648
|
}
|
|
603
649
|
get searchResultsLimit() {
|
|
604
|
-
if (this
|
|
605
|
-
return this
|
|
650
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultsLimit, "f") && __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultsLimit, "f") > 0) {
|
|
651
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultsLimit, "f");
|
|
606
652
|
}
|
|
607
653
|
else {
|
|
608
|
-
return this.enableShowMore ? 5 : this
|
|
654
|
+
return this.enableShowMore ? 5 : __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResultsLimit, "f");
|
|
609
655
|
}
|
|
610
656
|
}
|
|
611
|
-
/**
|
|
612
|
-
* Fires when users select items in the dropdown list.
|
|
613
|
-
*/
|
|
614
|
-
get selectionChange() {
|
|
615
|
-
return this._selectionChange;
|
|
616
|
-
}
|
|
617
657
|
//#endregion
|
|
618
658
|
//#region template_properties
|
|
619
659
|
get searchResults() {
|
|
620
|
-
return this
|
|
660
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchResults, "f") || [];
|
|
661
|
+
}
|
|
662
|
+
set searchResults(value) {
|
|
663
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__searchResults, value, "f");
|
|
621
664
|
}
|
|
622
665
|
get highlightText() {
|
|
623
|
-
return this
|
|
666
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__highlightText, "f") || [];
|
|
667
|
+
}
|
|
668
|
+
set highlightText(value) {
|
|
669
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__highlightText, value, "f");
|
|
624
670
|
}
|
|
625
671
|
get showActionsArea() {
|
|
626
672
|
return this.showAddButton || this.enableShowMore;
|
|
627
673
|
}
|
|
628
674
|
set inputDirective(directive) {
|
|
629
|
-
if (
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
675
|
+
if (!directive) {
|
|
676
|
+
throw Error([
|
|
677
|
+
'The SkyAutocompleteComponent requires a ContentChild input or',
|
|
678
|
+
'textarea bound with the SkyAutocomplete directive. For example:',
|
|
679
|
+
'`<input type="text" skyAutocomplete>`.',
|
|
680
|
+
].join(' '));
|
|
681
|
+
}
|
|
682
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f") !== directive) {
|
|
637
683
|
// Unsubscribe from old subscriptions on any previous input directive
|
|
638
|
-
this.
|
|
639
|
-
this
|
|
640
|
-
this.
|
|
641
|
-
this.
|
|
642
|
-
.pipe(takeUntil(this
|
|
684
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f").next();
|
|
685
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__inputDirective, directive, "f");
|
|
686
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").displayWith = this.descriptorProperty;
|
|
687
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").textChanges
|
|
688
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f")), debounceTime(this.debounceTime), switchMap((change) => {
|
|
643
689
|
this.isSearchingAsync = true;
|
|
644
690
|
return of(change);
|
|
645
691
|
}))
|
|
646
692
|
.subscribe((change) => {
|
|
647
|
-
this.
|
|
693
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_searchTextChanged).call(this, change.value);
|
|
648
694
|
});
|
|
649
|
-
this.
|
|
650
|
-
.pipe(takeUntil(this
|
|
695
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").blur
|
|
696
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f")))
|
|
651
697
|
.subscribe(() => {
|
|
652
|
-
|
|
653
|
-
this.
|
|
654
|
-
|
|
698
|
+
directive.restoreInputTextValueToPreviousState();
|
|
699
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
700
|
+
directive.onTouched();
|
|
655
701
|
});
|
|
656
|
-
this.
|
|
657
|
-
.pipe(takeUntil(this
|
|
702
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f").focus
|
|
703
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f")))
|
|
658
704
|
.subscribe(() => {
|
|
659
705
|
if (this.showActionsArea) {
|
|
660
|
-
this.
|
|
706
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_openDropdown).call(this);
|
|
661
707
|
}
|
|
662
708
|
});
|
|
663
709
|
}
|
|
664
710
|
}
|
|
665
711
|
get inputDirective() {
|
|
666
|
-
return this
|
|
712
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__inputDirective, "f");
|
|
667
713
|
}
|
|
668
714
|
set resultsRef(value) {
|
|
669
715
|
if (value) {
|
|
670
|
-
this
|
|
671
|
-
this.
|
|
672
|
-
this.
|
|
716
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent__resultsRef, value, "f");
|
|
717
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyAffixer).call(this);
|
|
718
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_createAffixer).call(this);
|
|
673
719
|
}
|
|
674
720
|
}
|
|
675
721
|
get resultsRef() {
|
|
676
|
-
return this
|
|
677
|
-
}
|
|
678
|
-
ngAfterContentInit() {
|
|
679
|
-
if (!this.inputDirective) {
|
|
680
|
-
throw Error([
|
|
681
|
-
'The SkyAutocompleteComponent requires a ContentChild input or',
|
|
682
|
-
'textarea bound with the SkyAutocomplete directive. For example:',
|
|
683
|
-
'`<input type="text" skyAutocomplete>`.',
|
|
684
|
-
].join(' '));
|
|
685
|
-
}
|
|
722
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__resultsRef, "f");
|
|
686
723
|
}
|
|
687
724
|
ngAfterViewInit() {
|
|
688
|
-
this.
|
|
725
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addInputEventListeners).call(this);
|
|
689
726
|
}
|
|
690
727
|
ngOnDestroy() {
|
|
691
|
-
this.
|
|
692
|
-
this.
|
|
693
|
-
this.
|
|
694
|
-
this.
|
|
695
|
-
this.
|
|
696
|
-
this.
|
|
697
|
-
this.
|
|
728
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_cancelCurrentSearch).call(this);
|
|
729
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f").next();
|
|
730
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputDirectiveUnsubscribe, "f").complete();
|
|
731
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f").next();
|
|
732
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f").complete();
|
|
733
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyAffixer).call(this);
|
|
734
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyOverlay).call(this);
|
|
698
735
|
}
|
|
699
736
|
addButtonClicked() {
|
|
700
737
|
this.addClick.emit();
|
|
701
738
|
this.inputDirective.restoreInputTextValueToPreviousState();
|
|
702
|
-
this.
|
|
739
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
703
740
|
}
|
|
704
741
|
handleKeydown(event) {
|
|
705
742
|
/* Sanity check */
|
|
706
743
|
/* istanbul ignore else */
|
|
707
744
|
if (event.key) {
|
|
708
745
|
const key = event.key.toLowerCase();
|
|
709
|
-
const activeElement = this.
|
|
746
|
+
const activeElement = __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_getActiveElement).call(this);
|
|
710
747
|
const activeElementId = activeElement === null || activeElement === void 0 ? void 0 : activeElement.id;
|
|
711
748
|
const targetIsSearchResult = this.searchResults.find((r) => r.elementId === activeElementId);
|
|
712
749
|
switch (key) {
|
|
713
750
|
case 'enter':
|
|
714
751
|
if (targetIsSearchResult) {
|
|
715
|
-
this.
|
|
752
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_selectSearchResultById).call(this, activeElementId);
|
|
716
753
|
if (!this.showActionsArea) {
|
|
717
|
-
this.
|
|
754
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
718
755
|
}
|
|
719
756
|
else {
|
|
720
|
-
this.
|
|
757
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
|
|
721
758
|
}
|
|
722
759
|
}
|
|
723
760
|
else {
|
|
@@ -730,43 +767,43 @@ class SkyAutocompleteComponent {
|
|
|
730
767
|
break;
|
|
731
768
|
case 'tab':
|
|
732
769
|
if (targetIsSearchResult) {
|
|
733
|
-
this.
|
|
770
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_selectSearchResultById).call(this, activeElementId);
|
|
734
771
|
}
|
|
735
772
|
else {
|
|
736
773
|
this.inputDirective.restoreInputTextValueToPreviousState();
|
|
737
774
|
}
|
|
738
|
-
this.
|
|
775
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
739
776
|
break;
|
|
740
777
|
case 'escape':
|
|
741
|
-
this.
|
|
778
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
742
779
|
break;
|
|
743
780
|
case 'arrowdown':
|
|
744
781
|
case 'down':
|
|
745
|
-
this.
|
|
746
|
-
if (this
|
|
747
|
-
this.
|
|
748
|
-
this
|
|
749
|
-
this
|
|
782
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
|
|
783
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") ===
|
|
784
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f").length - 1 ||
|
|
785
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") === -1) {
|
|
786
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, 0, "f");
|
|
750
787
|
}
|
|
751
788
|
else {
|
|
752
|
-
this
|
|
789
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") + 1, "f");
|
|
753
790
|
}
|
|
754
|
-
this.
|
|
755
|
-
this.
|
|
791
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
|
|
792
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
756
793
|
event.preventDefault();
|
|
757
794
|
event.stopPropagation();
|
|
758
795
|
break;
|
|
759
796
|
case 'arrowup':
|
|
760
797
|
case 'up':
|
|
761
|
-
this.
|
|
762
|
-
if (this
|
|
763
|
-
this
|
|
798
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
|
|
799
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") <= 0) {
|
|
800
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f").length - 1, "f");
|
|
764
801
|
}
|
|
765
802
|
else {
|
|
766
|
-
this
|
|
803
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") - 1, "f");
|
|
767
804
|
}
|
|
768
|
-
this.
|
|
769
|
-
this.
|
|
805
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
|
|
806
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
770
807
|
event.preventDefault();
|
|
771
808
|
event.stopPropagation();
|
|
772
809
|
break;
|
|
@@ -776,310 +813,284 @@ class SkyAutocompleteComponent {
|
|
|
776
813
|
moreButtonClicked() {
|
|
777
814
|
this.showMoreClick.emit({ inputValue: this.searchText });
|
|
778
815
|
this.inputDirective.restoreInputTextValueToPreviousState();
|
|
779
|
-
this.
|
|
816
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
780
817
|
}
|
|
781
818
|
onResultMouseDown(id, event) {
|
|
782
|
-
this.
|
|
819
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_selectSearchResultById).call(this, id);
|
|
783
820
|
if (!this.showActionsArea) {
|
|
784
|
-
this.
|
|
821
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
785
822
|
}
|
|
786
823
|
else {
|
|
787
|
-
this.
|
|
824
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
|
|
788
825
|
}
|
|
789
826
|
event.preventDefault();
|
|
790
827
|
event.stopPropagation();
|
|
791
828
|
}
|
|
792
829
|
onResultMouseMove(id) {
|
|
793
|
-
if (id !== this
|
|
794
|
-
this.
|
|
795
|
-
this
|
|
796
|
-
this.
|
|
797
|
-
this.
|
|
830
|
+
if (id !== __classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")) {
|
|
831
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
|
|
832
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, id, "f");
|
|
833
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
|
|
834
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
798
835
|
}
|
|
799
836
|
}
|
|
800
837
|
isElementFocused(ref) {
|
|
801
|
-
return ref === this
|
|
838
|
+
return ref === __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")];
|
|
802
839
|
}
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
}
|
|
813
|
-
if (!this.showActionsArea) {
|
|
814
|
-
this.closeDropdown();
|
|
815
|
-
}
|
|
816
|
-
else {
|
|
817
|
-
this.resetSearch();
|
|
818
|
-
}
|
|
819
|
-
this.isSearchingAsync = false;
|
|
820
|
-
this.changeDetector.markForCheck();
|
|
821
|
-
return;
|
|
822
|
-
}
|
|
823
|
-
const isLongEnough = searchText.length >= this.searchTextMinimumCharacters;
|
|
824
|
-
const isDifferent = searchText !== this.searchText;
|
|
825
|
-
this.searchText = searchText.trim();
|
|
826
|
-
if (isLongEnough && isDifferent) {
|
|
827
|
-
this.cancelCurrentSearch();
|
|
828
|
-
this.currentSearchSub = this.performSearch()
|
|
829
|
-
.pipe(take(1))
|
|
830
|
-
.subscribe((result) => {
|
|
831
|
-
const items = result.items.filter((item) => {
|
|
832
|
-
return item && this.descriptorProperty in item;
|
|
833
|
-
});
|
|
834
|
-
this.isSearchingAsync = false;
|
|
835
|
-
this._searchResults = items.map((r, i) => {
|
|
836
|
-
const result = {
|
|
837
|
-
elementId: `${this.resultsListId}-item-${i}`,
|
|
838
|
-
data: r,
|
|
839
|
-
};
|
|
840
|
-
return result;
|
|
841
|
-
});
|
|
842
|
-
this.searchResultsCount = result.totalCount;
|
|
843
|
-
this._highlightText = this.getHighlightText(this.searchText);
|
|
844
|
-
this.removeFocusedClass();
|
|
845
|
-
this.removeActiveDescendant();
|
|
846
|
-
if (this.searchResults.length > 0) {
|
|
847
|
-
this.activeElementIndex = 0;
|
|
848
|
-
}
|
|
849
|
-
else {
|
|
850
|
-
this.activeElementIndex = -1;
|
|
851
|
-
}
|
|
852
|
-
this.changeDetector.markForCheck();
|
|
853
|
-
if (this.isOpen) {
|
|
854
|
-
// Let the results populate in the DOM before recalculating placement.
|
|
855
|
-
setTimeout(() => {
|
|
856
|
-
this.affixer.reaffix();
|
|
857
|
-
this.changeDetector.detectChanges();
|
|
858
|
-
this.initOverlayFocusableElements();
|
|
859
|
-
});
|
|
860
|
-
}
|
|
861
|
-
else {
|
|
862
|
-
this.openDropdown();
|
|
863
|
-
this.changeDetector.markForCheck();
|
|
864
|
-
}
|
|
865
|
-
});
|
|
866
|
-
}
|
|
867
|
-
else {
|
|
868
|
-
this.isSearchingAsync = false;
|
|
869
|
-
this.changeDetector.markForCheck();
|
|
870
|
-
}
|
|
871
|
-
}
|
|
872
|
-
performSearch() {
|
|
873
|
-
if (!this.searchAsyncDisabled && this.searchAsync.observers.length > 0) {
|
|
874
|
-
const searchAsyncArgs = {
|
|
875
|
-
displayType: 'popover',
|
|
876
|
-
offset: 0,
|
|
877
|
-
searchText: this.searchText,
|
|
878
|
-
};
|
|
879
|
-
this.searchAsync.emit(searchAsyncArgs);
|
|
880
|
-
return searchAsyncArgs.result;
|
|
881
|
-
}
|
|
882
|
-
const result = this.search(this.searchText, this.data);
|
|
883
|
-
if (result instanceof Array) {
|
|
884
|
-
return of({
|
|
885
|
-
items: result,
|
|
886
|
-
totalCount: result.length,
|
|
840
|
+
}
|
|
841
|
+
_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_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__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__searchResults = new WeakMap(), _SkyAutocompleteComponent__searchResultTemplate = new WeakMap(), _SkyAutocompleteComponent__searchResultsLimit = new WeakMap(), _SkyAutocompleteComponent__searchTextMinimumCharacters = new WeakMap(), _SkyAutocompleteComponent_instances = new WeakSet(), _SkyAutocompleteComponent_searchTextChanged = function _SkyAutocompleteComponent_searchTextChanged(searchText) {
|
|
842
|
+
const isEmpty = !searchText || !searchText.trim() || searchText.match(/^\s+$/);
|
|
843
|
+
if (isEmpty) {
|
|
844
|
+
// Emit selectionChange if value has been cleared.
|
|
845
|
+
if (this.inputDirective.value) {
|
|
846
|
+
this.inputDirective.value = undefined;
|
|
847
|
+
this.selectionChange.emit({
|
|
848
|
+
selectedItem: undefined,
|
|
887
849
|
});
|
|
888
850
|
}
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
items,
|
|
892
|
-
totalCount: items.length,
|
|
893
|
-
};
|
|
894
|
-
}));
|
|
895
|
-
}
|
|
896
|
-
cancelCurrentSearch() {
|
|
897
|
-
if (this.currentSearchSub) {
|
|
898
|
-
this.currentSearchSub.unsubscribe();
|
|
899
|
-
this.currentSearchSub = undefined;
|
|
851
|
+
if (!this.showActionsArea) {
|
|
852
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
900
853
|
}
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
* Returns the text to highlight based on exact matches, case-insensitive matches, and matches for corresponding diacritical characters (a will match à).
|
|
904
|
-
*/
|
|
905
|
-
getHighlightText(searchText) {
|
|
906
|
-
const normalizedSearchText = normalizeDiacritics(searchText)
|
|
907
|
-
.toLocaleUpperCase()
|
|
908
|
-
.trim();
|
|
909
|
-
if (!normalizedSearchText) {
|
|
910
|
-
return [];
|
|
911
|
-
}
|
|
912
|
-
let matchesToHighlight = [];
|
|
913
|
-
for (let i = 0, n = this._searchResults.length; i < n; i++) {
|
|
914
|
-
const value = this._searchResults[i].data[this.descriptorProperty]
|
|
915
|
-
.toString()
|
|
916
|
-
.toLocaleUpperCase();
|
|
917
|
-
const normalizedDataValue = normalizeDiacritics(value);
|
|
918
|
-
let offset = 0;
|
|
919
|
-
let index;
|
|
920
|
-
while ((index = normalizedDataValue.indexOf(normalizedSearchText, offset)) > -1) {
|
|
921
|
-
const matchedString = value.slice(index, index + searchText.length);
|
|
922
|
-
offset = index + searchText.length;
|
|
923
|
-
matchesToHighlight = matchesToHighlight.concat(matchedString);
|
|
924
|
-
}
|
|
854
|
+
else {
|
|
855
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
|
|
925
856
|
}
|
|
926
|
-
|
|
927
|
-
|
|
857
|
+
this.isSearchingAsync = false;
|
|
858
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
859
|
+
return;
|
|
928
860
|
}
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
861
|
+
const isLongEnough = searchText.length >= this.searchTextMinimumCharacters;
|
|
862
|
+
const isDifferent = searchText !== this.searchText;
|
|
863
|
+
this.searchText = searchText.trim();
|
|
864
|
+
if (isLongEnough && isDifferent) {
|
|
865
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_cancelCurrentSearch).call(this);
|
|
866
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_currentSearchSub, __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_performSearch).call(this)
|
|
867
|
+
.pipe(take(1))
|
|
868
|
+
.subscribe((result) => {
|
|
869
|
+
const items = result.items.filter((item) => {
|
|
870
|
+
return item && this.descriptorProperty in item;
|
|
938
871
|
});
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
wrapperClass: this.wrapperClass,
|
|
872
|
+
this.isSearchingAsync = false;
|
|
873
|
+
this.searchResults = items.map((r, i) => {
|
|
874
|
+
const result = {
|
|
875
|
+
elementId: `${this.resultsListId}-item-${i}`,
|
|
876
|
+
data: r,
|
|
877
|
+
};
|
|
878
|
+
return result;
|
|
947
879
|
});
|
|
948
|
-
|
|
949
|
-
this.
|
|
950
|
-
this
|
|
951
|
-
this.
|
|
952
|
-
this.
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
this.removeActiveDescendant();
|
|
960
|
-
this.changeDetector.markForCheck();
|
|
961
|
-
}
|
|
962
|
-
setActiveDescendant() {
|
|
963
|
-
const activeElement = this.overlayFocusableElements[this.activeElementIndex];
|
|
964
|
-
/* Sanity check */
|
|
965
|
-
/* istanbul ignore else */
|
|
966
|
-
if (activeElement) {
|
|
967
|
-
this.inputDirective.setActiveDescendant(activeElement.id);
|
|
968
|
-
}
|
|
969
|
-
}
|
|
970
|
-
removeActiveDescendant() {
|
|
971
|
-
this.inputDirective.setActiveDescendant(null);
|
|
972
|
-
}
|
|
973
|
-
resetSearch() {
|
|
974
|
-
this._searchResults = [];
|
|
975
|
-
this.searchText = '';
|
|
976
|
-
this._highlightText = [];
|
|
977
|
-
this.activeElementIndex = -1;
|
|
978
|
-
this.searchResultsCount = undefined;
|
|
979
|
-
this.removeActiveDescendant();
|
|
980
|
-
this.initOverlayFocusableElements();
|
|
981
|
-
this.changeDetector.markForCheck();
|
|
982
|
-
}
|
|
983
|
-
addInputEventListeners() {
|
|
984
|
-
const element = this.elementRef.nativeElement;
|
|
985
|
-
fromEvent(element, 'keydown')
|
|
986
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
987
|
-
.subscribe((event) => {
|
|
988
|
-
this.handleKeydown(event);
|
|
989
|
-
});
|
|
990
|
-
fromEvent(window, 'resize')
|
|
991
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
992
|
-
.subscribe(() => {
|
|
993
|
-
/* istanbul ignore else */
|
|
880
|
+
this.searchResultsCount = result.totalCount;
|
|
881
|
+
this.highlightText = __classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_getHighlightText).call(this, this.searchText);
|
|
882
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeFocusedClass).call(this);
|
|
883
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeActiveDescendant).call(this);
|
|
884
|
+
if (this.searchResults.length > 0) {
|
|
885
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, 0, "f");
|
|
886
|
+
}
|
|
887
|
+
else {
|
|
888
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, -1, "f");
|
|
889
|
+
}
|
|
890
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
994
891
|
if (this.isOpen) {
|
|
995
|
-
|
|
892
|
+
// Let the results populate in the DOM before recalculating placement.
|
|
893
|
+
setTimeout(() => {
|
|
894
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f").reaffix();
|
|
895
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").detectChanges();
|
|
896
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initOverlayFocusableElements).call(this);
|
|
897
|
+
});
|
|
898
|
+
}
|
|
899
|
+
else {
|
|
900
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_openDropdown).call(this);
|
|
901
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
996
902
|
}
|
|
903
|
+
}), "f");
|
|
904
|
+
}
|
|
905
|
+
else {
|
|
906
|
+
this.isSearchingAsync = false;
|
|
907
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
908
|
+
}
|
|
909
|
+
}, _SkyAutocompleteComponent_performSearch = function _SkyAutocompleteComponent_performSearch() {
|
|
910
|
+
if (!this.searchAsyncDisabled && this.searchAsync.observers.length > 0) {
|
|
911
|
+
const searchAsyncArgs = {
|
|
912
|
+
displayType: 'popover',
|
|
913
|
+
offset: 0,
|
|
914
|
+
searchText: this.searchText,
|
|
915
|
+
};
|
|
916
|
+
this.searchAsync.emit(searchAsyncArgs);
|
|
917
|
+
return searchAsyncArgs.result;
|
|
918
|
+
}
|
|
919
|
+
const result = this.search(this.searchText, this.data);
|
|
920
|
+
if (result instanceof Array) {
|
|
921
|
+
return of({
|
|
922
|
+
items: result,
|
|
923
|
+
totalCount: result.length,
|
|
997
924
|
});
|
|
998
925
|
}
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
}
|
|
926
|
+
return from(result).pipe(map((items) => {
|
|
927
|
+
return {
|
|
928
|
+
items,
|
|
929
|
+
totalCount: items.length,
|
|
930
|
+
};
|
|
931
|
+
}));
|
|
932
|
+
}, _SkyAutocompleteComponent_cancelCurrentSearch = function _SkyAutocompleteComponent_cancelCurrentSearch() {
|
|
933
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_currentSearchSub, "f")) {
|
|
934
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_currentSearchSub, "f").unsubscribe();
|
|
935
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_currentSearchSub, undefined, "f");
|
|
936
|
+
}
|
|
937
|
+
}, _SkyAutocompleteComponent_getHighlightText = function _SkyAutocompleteComponent_getHighlightText(searchText) {
|
|
938
|
+
const normalizedSearchText = normalizeDiacritics(searchText)
|
|
939
|
+
.toLocaleUpperCase()
|
|
940
|
+
.trim();
|
|
941
|
+
if (!normalizedSearchText) {
|
|
942
|
+
return [];
|
|
943
|
+
}
|
|
944
|
+
let matchesToHighlight = [];
|
|
945
|
+
for (let i = 0, n = this.searchResults.length; i < n; i++) {
|
|
946
|
+
const value = this.searchResults[i].data[this.descriptorProperty]
|
|
947
|
+
.toString()
|
|
948
|
+
.toLocaleUpperCase();
|
|
949
|
+
const normalizedDataValue = normalizeDiacritics(value);
|
|
950
|
+
let offset = 0;
|
|
951
|
+
let index;
|
|
952
|
+
while ((index = normalizedDataValue.indexOf(normalizedSearchText, offset)) > -1) {
|
|
953
|
+
const matchedString = value.slice(index, index + searchText.length);
|
|
954
|
+
offset = index + searchText.length;
|
|
955
|
+
matchesToHighlight = matchesToHighlight.concat(matchedString);
|
|
956
|
+
}
|
|
957
|
+
}
|
|
958
|
+
// Remove any duplicates from the array.
|
|
959
|
+
return [...new Set(matchesToHighlight)];
|
|
960
|
+
}, _SkyAutocompleteComponent_selectSearchResultById = function _SkyAutocompleteComponent_selectSearchResultById(id) {
|
|
961
|
+
const result = this.searchResults.find((r) => r.elementId === id);
|
|
962
|
+
/* istanbul ignore else */
|
|
963
|
+
if (result) {
|
|
964
|
+
const data = result.data;
|
|
965
|
+
this.searchText = data[this.descriptorProperty];
|
|
966
|
+
this.inputDirective.value = data;
|
|
967
|
+
this.selectionChange.emit({
|
|
968
|
+
selectedItem: data,
|
|
969
|
+
});
|
|
1004
970
|
}
|
|
1005
|
-
|
|
1006
|
-
|
|
971
|
+
}, _SkyAutocompleteComponent_openDropdown = function _SkyAutocompleteComponent_openDropdown() {
|
|
972
|
+
if (!__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")) {
|
|
973
|
+
const overlay = __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayService, "f").create({
|
|
974
|
+
enableClose: false,
|
|
975
|
+
enablePointerEvents: true,
|
|
976
|
+
wrapperClass: this.wrapperClass,
|
|
977
|
+
});
|
|
978
|
+
overlay.attachTemplate(this.resultsTemplateRef);
|
|
979
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_overlay, overlay, "f");
|
|
980
|
+
this.isOpen = true;
|
|
981
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
982
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initOverlayFocusableElements).call(this);
|
|
983
|
+
}
|
|
984
|
+
}, _SkyAutocompleteComponent_closeDropdown = function _SkyAutocompleteComponent_closeDropdown() {
|
|
985
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_resetSearch).call(this);
|
|
986
|
+
this.isOpen = false;
|
|
987
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_destroyOverlay).call(this);
|
|
988
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeActiveDescendant).call(this);
|
|
989
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
990
|
+
}, _SkyAutocompleteComponent_setActiveDescendant = function _SkyAutocompleteComponent_setActiveDescendant() {
|
|
991
|
+
const activeElement = __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")];
|
|
992
|
+
/* Sanity check */
|
|
993
|
+
/* istanbul ignore else */
|
|
994
|
+
if (activeElement) {
|
|
995
|
+
this.inputDirective.setActiveDescendant(activeElement.id);
|
|
996
|
+
}
|
|
997
|
+
}, _SkyAutocompleteComponent_removeActiveDescendant = function _SkyAutocompleteComponent_removeActiveDescendant() {
|
|
998
|
+
this.inputDirective.setActiveDescendant(null);
|
|
999
|
+
}, _SkyAutocompleteComponent_resetSearch = function _SkyAutocompleteComponent_resetSearch() {
|
|
1000
|
+
this.searchResults = [];
|
|
1001
|
+
this.searchText = '';
|
|
1002
|
+
this.highlightText = [];
|
|
1003
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_activeElementIndex, -1, "f");
|
|
1004
|
+
this.searchResultsCount = undefined;
|
|
1005
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_removeActiveDescendant).call(this);
|
|
1006
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_initOverlayFocusableElements).call(this);
|
|
1007
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_changeDetector, "f").markForCheck();
|
|
1008
|
+
}, _SkyAutocompleteComponent_addInputEventListeners = function _SkyAutocompleteComponent_addInputEventListeners() {
|
|
1009
|
+
const element = __classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f").nativeElement;
|
|
1010
|
+
fromEvent(element, 'keydown')
|
|
1011
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f")))
|
|
1012
|
+
.subscribe((event) => {
|
|
1013
|
+
this.handleKeydown(event);
|
|
1014
|
+
});
|
|
1015
|
+
fromEvent(window, 'resize')
|
|
1016
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAutocompleteComponent_ngUnsubscribe, "f")))
|
|
1017
|
+
.subscribe(() => {
|
|
1007
1018
|
/* istanbul ignore else */
|
|
1008
|
-
if (
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
if (this.messageStreamSub) {
|
|
1030
|
-
this.messageStreamSub.unsubscribe();
|
|
1031
|
-
}
|
|
1032
|
-
if (this.messageStream) {
|
|
1033
|
-
this.messageStreamSub = this.messageStream
|
|
1034
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1035
|
-
.subscribe((message) => {
|
|
1036
|
-
switch (message.type) {
|
|
1037
|
-
case SkyAutocompleteMessageType.CloseDropdown:
|
|
1038
|
-
this.closeDropdown();
|
|
1039
|
-
break;
|
|
1040
|
-
case SkyAutocompleteMessageType.RepositionDropdown:
|
|
1041
|
-
// Settimeout waits for changes in DOM (e.g., tokens being removed)
|
|
1042
|
-
setTimeout(() => {
|
|
1043
|
-
/* istanbul ignore else */
|
|
1044
|
-
if (this.affixer) {
|
|
1045
|
-
this.affixer.reaffix();
|
|
1046
|
-
}
|
|
1047
|
-
});
|
|
1048
|
-
break;
|
|
1049
|
-
}
|
|
1050
|
-
});
|
|
1051
|
-
}
|
|
1052
|
-
}
|
|
1053
|
-
initOverlayFocusableElements() {
|
|
1054
|
-
// Wait for dropdown elements to render.
|
|
1055
|
-
setTimeout(() => {
|
|
1056
|
-
if (this.overlay) {
|
|
1057
|
-
this.overlayFocusableElements =
|
|
1058
|
-
this.adapterService.getOverlayFocusableElements(this.overlay);
|
|
1059
|
-
this.overlayFocusableElements.forEach((el) => {
|
|
1060
|
-
this.adapterService.setTabIndex(el, -1);
|
|
1061
|
-
});
|
|
1062
|
-
this.addFocusedClass();
|
|
1063
|
-
}
|
|
1019
|
+
if (this.isOpen && this.resultsRef) {
|
|
1020
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").setDropdownWidth(__classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f"), this.resultsRef, !!__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputBoxHostSvc, "f"));
|
|
1021
|
+
}
|
|
1022
|
+
});
|
|
1023
|
+
}, _SkyAutocompleteComponent_destroyOverlay = function _SkyAutocompleteComponent_destroyOverlay() {
|
|
1024
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")) {
|
|
1025
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayService, "f").close(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f"));
|
|
1026
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_overlay, undefined, "f");
|
|
1027
|
+
}
|
|
1028
|
+
}, _SkyAutocompleteComponent_createAffixer = function _SkyAutocompleteComponent_createAffixer() {
|
|
1029
|
+
/* Sanity check */
|
|
1030
|
+
/* istanbul ignore else */
|
|
1031
|
+
if (!__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f") && this.resultsRef) {
|
|
1032
|
+
const affixer = __classPrivateFieldGet(this, _SkyAutocompleteComponent_affixService, "f").createAffixer(this.resultsRef);
|
|
1033
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").setDropdownWidth(__classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f"), this.resultsRef, !!__classPrivateFieldGet(this, _SkyAutocompleteComponent_inputBoxHostSvc, "f"));
|
|
1034
|
+
affixer.affixTo(__classPrivateFieldGet(this, _SkyAutocompleteComponent_elementRef, "f").nativeElement, {
|
|
1035
|
+
autoFitContext: SkyAffixAutoFitContext.Viewport,
|
|
1036
|
+
enableAutoFit: true,
|
|
1037
|
+
isSticky: true,
|
|
1038
|
+
placement: 'below',
|
|
1039
|
+
horizontalAlignment: 'left',
|
|
1064
1040
|
});
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1041
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_affixer, affixer, "f");
|
|
1042
|
+
}
|
|
1043
|
+
}, _SkyAutocompleteComponent_destroyAffixer = function _SkyAutocompleteComponent_destroyAffixer() {
|
|
1044
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f")) {
|
|
1045
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f").destroy();
|
|
1046
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_affixer, undefined, "f");
|
|
1047
|
+
}
|
|
1048
|
+
}, _SkyAutocompleteComponent_initMessageStream = function _SkyAutocompleteComponent_initMessageStream() {
|
|
1049
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_messageStreamSub, "f")) {
|
|
1050
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_messageStreamSub, "f").unsubscribe();
|
|
1051
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_messageStreamSub, undefined, "f");
|
|
1052
|
+
}
|
|
1053
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_messageStreamSub, this.messageStream.subscribe((message) => {
|
|
1054
|
+
switch (message.type) {
|
|
1055
|
+
case SkyAutocompleteMessageType.CloseDropdown:
|
|
1056
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_closeDropdown).call(this);
|
|
1057
|
+
break;
|
|
1058
|
+
case SkyAutocompleteMessageType.RepositionDropdown:
|
|
1059
|
+
// Settimeout waits for changes in DOM (e.g., tokens being removed)
|
|
1060
|
+
setTimeout(() => {
|
|
1061
|
+
/* istanbul ignore else */
|
|
1062
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f")) {
|
|
1063
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_affixer, "f").reaffix();
|
|
1064
|
+
}
|
|
1065
|
+
});
|
|
1066
|
+
break;
|
|
1067
|
+
}
|
|
1068
|
+
}), "f");
|
|
1069
|
+
}, _SkyAutocompleteComponent_initOverlayFocusableElements = function _SkyAutocompleteComponent_initOverlayFocusableElements() {
|
|
1070
|
+
// Wait for dropdown elements to render.
|
|
1071
|
+
setTimeout(() => {
|
|
1072
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")) {
|
|
1073
|
+
__classPrivateFieldSet(this, _SkyAutocompleteComponent_overlayFocusableElements, __classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").getOverlayFocusableElements(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlay, "f")), "f");
|
|
1074
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f").forEach((el) => {
|
|
1075
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").setTabIndex(el, -1);
|
|
1076
|
+
});
|
|
1077
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_addFocusedClass).call(this);
|
|
1072
1078
|
}
|
|
1079
|
+
});
|
|
1080
|
+
}, _SkyAutocompleteComponent_getActiveElement = function _SkyAutocompleteComponent_getActiveElement() {
|
|
1081
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")];
|
|
1082
|
+
}, _SkyAutocompleteComponent_removeFocusedClass = function _SkyAutocompleteComponent_removeFocusedClass() {
|
|
1083
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") > -1) {
|
|
1084
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").removeCSSClass(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")], 'sky-autocomplete-descendant-focus');
|
|
1073
1085
|
}
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
}
|
|
1086
|
+
}, _SkyAutocompleteComponent_addFocusedClass = function _SkyAutocompleteComponent_addFocusedClass() {
|
|
1087
|
+
if (__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f") > -1) {
|
|
1088
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_adapterService, "f").addCSSClass(__classPrivateFieldGet(this, _SkyAutocompleteComponent_overlayFocusableElements, "f")[__classPrivateFieldGet(this, _SkyAutocompleteComponent_activeElementIndex, "f")], 'sky-autocomplete-descendant-focus');
|
|
1089
|
+
__classPrivateFieldGet(this, _SkyAutocompleteComponent_instances, "m", _SkyAutocompleteComponent_setActiveDescendant).call(this);
|
|
1079
1090
|
}
|
|
1080
|
-
}
|
|
1091
|
+
};
|
|
1081
1092
|
SkyAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i6.SkyInputBoxHostService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1082
|
-
SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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: "defaultSearchResultTemplate", first: true, predicate: ["defaultSearchResultTemplate"], descendants: true, read: TemplateRef }, { 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 && searchText\"\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=\"!searchResultsLimit || i < searchResultsLimit\"\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\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;\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"], components: [{ type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe, "skyAutocompleteSearchAsyncDisabled": SkyAutcompleteSearchAsyncDisabledPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1093
|
+
SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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: "defaultSearchResultTemplate", first: true, predicate: ["defaultSearchResultTemplate"], descendants: true, read: TemplateRef, static: true }, { 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 && searchText\"\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=\"!searchResultsLimit || i < searchResultsLimit\"\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\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;\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"], components: [{ type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe, "skyAutocompleteSearchAsyncDisabled": SkyAutcompleteSearchAsyncDisabledPipe, "skyNumeric": i1.SkyNumericPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1083
1094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
|
|
1084
1095
|
type: Component,
|
|
1085
1096
|
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 && searchText\"\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=\"!searchResultsLimit || i < searchResultsLimit\"\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\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;\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"] }]
|
|
@@ -1131,7 +1142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1131
1142
|
type: ViewChild,
|
|
1132
1143
|
args: ['defaultSearchResultTemplate', {
|
|
1133
1144
|
read: TemplateRef,
|
|
1134
|
-
static:
|
|
1145
|
+
static: true,
|
|
1135
1146
|
}]
|
|
1136
1147
|
}], inputDirective: [{
|
|
1137
1148
|
type: ContentChild,
|
|
@@ -2804,6 +2815,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
2804
2815
|
useValue: contextProviderValue,
|
|
2805
2816
|
},
|
|
2806
2817
|
],
|
|
2818
|
+
size: 'large',
|
|
2807
2819
|
wrapperClass: this.wrapperClass,
|
|
2808
2820
|
});
|
|
2809
2821
|
}
|