quang 19.3.15-2 → 19.3.15-4
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/components/autocomplete/README.md +4 -1
- package/components/autocomplete/autocomplete.component.d.ts +252 -39
- package/components/select/select.component.d.ts +21 -0
- package/components/shared/option-list/option-list.component.d.ts +14 -2
- package/fesm2022/quang-components-autocomplete.mjs +618 -214
- package/fesm2022/quang-components-autocomplete.mjs.map +1 -1
- package/fesm2022/quang-components-select.mjs +59 -2
- package/fesm2022/quang-components-select.mjs.map +1 -1
- package/fesm2022/quang-components-shared.mjs +36 -2
- package/fesm2022/quang-components-shared.mjs.map +1 -1
- package/package.json +28 -28
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, NgStyle } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, viewChild, signal, computed,
|
|
3
|
+
import { input, output, viewChild, signal, computed, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
import { TranslocoPipe } from '@jsverse/transloco';
|
|
@@ -17,298 +17,702 @@ import { QuangBaseComponent, OptionListParentType, QuangOptionListComponent } fr
|
|
|
17
17
|
* `searchTextDebounce` is by default set to 300ms.
|
|
18
18
|
*/
|
|
19
19
|
class QuangAutocompleteComponent extends QuangBaseComponent {
|
|
20
|
+
/**
|
|
21
|
+
* Finds an option whose label exactly matches the given text (case-insensitive, trimmed).
|
|
22
|
+
* @param text The text to match against option labels
|
|
23
|
+
* @returns The matching option, or undefined if no match
|
|
24
|
+
*/
|
|
25
|
+
findMatchingOption(text) {
|
|
26
|
+
if (!text)
|
|
27
|
+
return undefined;
|
|
28
|
+
const searchTextLower = text.trim().toLowerCase();
|
|
29
|
+
return this.selectOptions().find((x) => x.label.trim().toLowerCase() === searchTextLower);
|
|
30
|
+
}
|
|
31
|
+
// ============================================
|
|
32
|
+
// CONSTRUCTOR
|
|
33
|
+
// ============================================
|
|
20
34
|
constructor() {
|
|
21
35
|
super();
|
|
22
|
-
//
|
|
36
|
+
// ============================================
|
|
37
|
+
// INPUTS - Configuration properties
|
|
38
|
+
// ============================================
|
|
39
|
+
/**
|
|
40
|
+
* The list of options to display in the autocomplete dropdown.
|
|
41
|
+
*/
|
|
42
|
+
this.selectOptions = input.required();
|
|
43
|
+
/**
|
|
44
|
+
* When true, allows any text input as a valid form value, not just option values.
|
|
45
|
+
* The form value will sync with whatever text the user types.
|
|
46
|
+
* When false (default), the form value must match one of the option values.
|
|
47
|
+
* @default false
|
|
48
|
+
*/
|
|
49
|
+
this.allowFreeText = input(false);
|
|
50
|
+
/**
|
|
51
|
+
* When true and allowFreeText is false, automatically selects an option if the user's
|
|
52
|
+
* input text matches an option's label exactly (case-insensitive, trimmed).
|
|
53
|
+
* This provides a better UX by auto-selecting when users type a complete option label.
|
|
54
|
+
* @default true
|
|
55
|
+
*/
|
|
56
|
+
this.autoSelectOnExactMatch = input(true);
|
|
57
|
+
/**
|
|
58
|
+
* When true, updates the form value as the user types (after debounce).
|
|
59
|
+
* When false (default), the form value is only updated when:
|
|
60
|
+
* - User selects an option from the dropdown
|
|
61
|
+
* - User stops typing and the input loses focus (blur)
|
|
62
|
+
* @default false
|
|
63
|
+
*/
|
|
64
|
+
this.updateValueOnType = input(false);
|
|
65
|
+
/**
|
|
66
|
+
* Whether the form value can be any text or must match one of the options.
|
|
67
|
+
* When true, the form value syncs with the input text.
|
|
68
|
+
* When false (default), the form value must be one of the option values.
|
|
69
|
+
* @default false
|
|
70
|
+
* @deprecated Use `allowFreeText` instead. This input will be removed in a future version.
|
|
71
|
+
*/
|
|
23
72
|
this.syncFormWithText = input(false);
|
|
73
|
+
/**
|
|
74
|
+
* Maximum height of the option list before scrolling.
|
|
75
|
+
* @default '200px'
|
|
76
|
+
*/
|
|
24
77
|
this.optionListMaxHeight = input('200px');
|
|
25
|
-
|
|
78
|
+
/**
|
|
79
|
+
* Whether to translate option labels.
|
|
80
|
+
* @default true
|
|
81
|
+
*/
|
|
26
82
|
this.translateValue = input(true);
|
|
83
|
+
/**
|
|
84
|
+
* Scroll behavior when the option list opens.
|
|
85
|
+
* @default 'smooth'
|
|
86
|
+
*/
|
|
27
87
|
this.scrollBehaviorOnOpen = input('smooth');
|
|
28
88
|
/**
|
|
29
|
-
*
|
|
89
|
+
* When true, only emits the value without saving it to ngControl.
|
|
90
|
+
* @default false
|
|
30
91
|
*/
|
|
31
92
|
this.emitOnly = input(false);
|
|
93
|
+
/**
|
|
94
|
+
* Enable multiple selection mode with chips.
|
|
95
|
+
* @default false
|
|
96
|
+
*/
|
|
32
97
|
this.multiple = input(false);
|
|
33
98
|
/**
|
|
34
|
-
*
|
|
99
|
+
* Maximum length in characters for chip display text.
|
|
100
|
+
* When set, chips will be truncated and show a tooltip with full text.
|
|
101
|
+
* @default 0 (no limit)
|
|
35
102
|
*/
|
|
36
103
|
this.chipMaxLength = input(0);
|
|
104
|
+
/**
|
|
105
|
+
* Layout direction for chips in multiple selection mode.
|
|
106
|
+
* @default 'vertical'
|
|
107
|
+
*/
|
|
37
108
|
this.multiSelectDisplayMode = input('vertical');
|
|
109
|
+
/**
|
|
110
|
+
* Debounce time in milliseconds for search text changes.
|
|
111
|
+
* @default 300
|
|
112
|
+
*/
|
|
113
|
+
this.searchTextDebounce = input(300);
|
|
114
|
+
/**
|
|
115
|
+
* Whether to filter options internally based on input text.
|
|
116
|
+
* When false, filtering should be handled externally via searchTextChange event.
|
|
117
|
+
* @default true
|
|
118
|
+
*/
|
|
119
|
+
this.internalFilterOptions = input(true);
|
|
120
|
+
// ============================================
|
|
121
|
+
// OUTPUTS - Event emitters
|
|
122
|
+
// ============================================
|
|
123
|
+
/**
|
|
124
|
+
* Emitted when an option is selected.
|
|
125
|
+
* Emits the selected option's value, or null when cleared.
|
|
126
|
+
*/
|
|
127
|
+
this.selectedOption = output();
|
|
128
|
+
/**
|
|
129
|
+
* Emitted when the search text changes (after debounce).
|
|
130
|
+
* Useful for external filtering or API calls.
|
|
131
|
+
*/
|
|
132
|
+
this.searchTextChange = output();
|
|
133
|
+
// ============================================
|
|
134
|
+
// VIEW CHILDREN - Template references
|
|
135
|
+
// ============================================
|
|
136
|
+
/** Reference to the option list component */
|
|
38
137
|
this.optionList = viewChild('optionList');
|
|
39
|
-
|
|
40
|
-
this.
|
|
41
|
-
|
|
42
|
-
this.
|
|
43
|
-
|
|
44
|
-
this.
|
|
45
|
-
|
|
46
|
-
|
|
138
|
+
/** Reference to the input element */
|
|
139
|
+
this.selectInput = viewChild('selectInput');
|
|
140
|
+
/** Reference to the chip container element */
|
|
141
|
+
this.chipContainer = viewChild('chipContainer');
|
|
142
|
+
/** Reference to the main autocomplete container */
|
|
143
|
+
this.autocompleteContainer = viewChild('autocompleteContainer');
|
|
144
|
+
// ============================================
|
|
145
|
+
// PUBLIC STATE - Used in template
|
|
146
|
+
// ============================================
|
|
147
|
+
/** Constant for option list parent type */
|
|
148
|
+
this.ParentType = OptionListParentType.AUTOCOMPLETE;
|
|
149
|
+
/** Height of the input element (used for positioning) */
|
|
150
|
+
this.inputHeight = signal(0);
|
|
151
|
+
/**
|
|
152
|
+
* The display text for the input field.
|
|
153
|
+
* - When searching: shows what the user typed
|
|
154
|
+
* - When allowFreeText/syncFormWithText is true and no matching option: shows the raw value
|
|
155
|
+
* - When not searching: shows the selected option's label (derived from _value)
|
|
156
|
+
*/
|
|
157
|
+
this._inputValue = computed(() => {
|
|
158
|
+
if (this._isSearching()) {
|
|
159
|
+
return this._userSearchText();
|
|
160
|
+
}
|
|
161
|
+
// Derive display text from _value by finding the matching option
|
|
47
162
|
const value = this._value();
|
|
48
|
-
if (
|
|
49
|
-
|
|
163
|
+
if (value === null || value === undefined || value === '' || Array.isArray(value)) {
|
|
164
|
+
return '';
|
|
50
165
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
166
|
+
const option = this.selectOptions().find((x) => x.value === value);
|
|
167
|
+
// When free text is allowed and no matching option found, display the value itself
|
|
168
|
+
// (since the value IS the text the user typed)
|
|
169
|
+
if (!option && this._allowFreeTextInternal()) {
|
|
170
|
+
return String(value);
|
|
55
171
|
}
|
|
172
|
+
return option?.label ?? '';
|
|
56
173
|
});
|
|
174
|
+
/** Whether the option list is currently visible */
|
|
175
|
+
this._showOptions = signal(null);
|
|
176
|
+
/** List of selected chip values (for multiple mode) */
|
|
177
|
+
this._chipList = signal([]);
|
|
178
|
+
/** List of selected option objects (for multiple mode) */
|
|
179
|
+
this._selectedOptions = signal([]);
|
|
180
|
+
/** Filtered options based on search text and chip selection */
|
|
57
181
|
this._filteredOptions = computed(() => {
|
|
58
|
-
const
|
|
182
|
+
const searchText = this._isSearching() ? this._userSearchText() : '';
|
|
59
183
|
if (this.multiple()) {
|
|
60
|
-
return this.filterOptions(
|
|
184
|
+
return this.filterOptions(searchText).filter((x) => !this._chipList().some((chip) => chip === x.value));
|
|
61
185
|
}
|
|
62
|
-
|
|
63
|
-
|
|
186
|
+
return searchText?.length ? this.filterOptions(searchText) : this.selectOptions();
|
|
187
|
+
});
|
|
188
|
+
/**
|
|
189
|
+
* The value to use for highlighting in the option list.
|
|
190
|
+
* When searching: shows the matched option (if any) based on exact label match
|
|
191
|
+
* When not searching: shows the current form value
|
|
192
|
+
* This keeps highlighting in sync with what will be selected on blur.
|
|
193
|
+
*/
|
|
194
|
+
this._highlightedValue = computed(() => {
|
|
195
|
+
if (this._isSearching() && !this.multiple()) {
|
|
196
|
+
const searchText = this._userSearchText();
|
|
197
|
+
if (!searchText?.trim()) {
|
|
198
|
+
// If search text is empty, don't highlight anything
|
|
199
|
+
return null;
|
|
200
|
+
}
|
|
201
|
+
// Find exact match for highlighting
|
|
202
|
+
const matchingOption = this.findMatchingOption(searchText);
|
|
203
|
+
if (matchingOption && this.autoSelectOnExactMatch()) {
|
|
204
|
+
return matchingOption.value;
|
|
205
|
+
}
|
|
206
|
+
// If free text is allowed, don't highlight any option
|
|
207
|
+
// (the typed text itself will be the value)
|
|
208
|
+
return null;
|
|
64
209
|
}
|
|
210
|
+
// When not searching, use the current value
|
|
211
|
+
return this._value();
|
|
65
212
|
});
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
this.
|
|
71
|
-
|
|
72
|
-
this.
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
213
|
+
// ============================================
|
|
214
|
+
// PROTECTED STATE - Internal but accessible to subclasses
|
|
215
|
+
// ============================================
|
|
216
|
+
/** Whether the user is actively typing/searching */
|
|
217
|
+
this._isSearching = signal(false);
|
|
218
|
+
/** The text the user is currently typing while searching */
|
|
219
|
+
this._userSearchText = signal('');
|
|
220
|
+
/**
|
|
221
|
+
* Internal computed that returns true if free text input is allowed.
|
|
222
|
+
* Combines both `allowFreeText` and deprecated `syncFormWithText` inputs.
|
|
223
|
+
*/
|
|
224
|
+
this._allowFreeTextInternal = computed(() => {
|
|
225
|
+
return this.allowFreeText() || this.syncFormWithText();
|
|
226
|
+
});
|
|
227
|
+
// ============================================
|
|
228
|
+
// PRIVATE STATE - Internal implementation details
|
|
229
|
+
// ============================================
|
|
230
|
+
/** Timer for search text debounce */
|
|
76
231
|
this._searchDebounceTimer = null;
|
|
232
|
+
/** Last emitted search text (for distinctUntilChanged behavior) */
|
|
77
233
|
this._lastEmittedSearchText = null;
|
|
234
|
+
/** Whether the component has been destroyed */
|
|
78
235
|
this._isDestroyed = false;
|
|
79
|
-
|
|
236
|
+
/** Subscription to form value changes */
|
|
237
|
+
this.formValueChangeSubscription = undefined;
|
|
238
|
+
// ============================================
|
|
239
|
+
// EFFECTS - Reactive side effects
|
|
240
|
+
// ============================================
|
|
241
|
+
/** Effect to handle input element setup and keyboard events */
|
|
242
|
+
this.onChangeSelectInputEffect = effect(() => {
|
|
80
243
|
const selectInput = this.selectInput();
|
|
81
|
-
if (selectInput)
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
const chipContainer = this.chipContainer()?.nativeElement;
|
|
88
|
-
if (chipContainer) {
|
|
89
|
-
const chips = chipContainer.querySelectorAll('.chip button.btn-chip');
|
|
90
|
-
if (chips.length > 0) {
|
|
91
|
-
const focusChip = chips[chips.length - 1];
|
|
92
|
-
focusChip.focus();
|
|
93
|
-
focusChip.addEventListener('keydown', (event) => {
|
|
94
|
-
if (event.key === 'Backspace') {
|
|
95
|
-
event.preventDefault();
|
|
96
|
-
this.deleteChip(this._chipList()[this._chipList().length - 1]);
|
|
97
|
-
selectInput.nativeElement.focus();
|
|
98
|
-
}
|
|
99
|
-
else {
|
|
100
|
-
event.preventDefault();
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
}
|
|
244
|
+
if (!selectInput)
|
|
245
|
+
return;
|
|
246
|
+
this.inputHeight.set(selectInput.nativeElement.getBoundingClientRect().height);
|
|
247
|
+
selectInput.nativeElement.addEventListener('keydown', (e) => {
|
|
248
|
+
this.handleInputKeydown(e, selectInput.nativeElement);
|
|
249
|
+
});
|
|
108
250
|
});
|
|
109
|
-
|
|
110
|
-
this.
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
251
|
+
/** Subscription to options changes */
|
|
252
|
+
this.selectOptionsChangeSubscription = toObservable(this.selectOptions)
|
|
253
|
+
.pipe(takeUntilDestroyed())
|
|
254
|
+
.subscribe(() => {
|
|
255
|
+
this.handleOptionsChange();
|
|
115
256
|
});
|
|
116
|
-
|
|
257
|
+
/** Subscription to show options changes */
|
|
258
|
+
this.showOptionsChangeSubscription = toObservable(this._showOptions)
|
|
117
259
|
.pipe(takeUntilDestroyed())
|
|
118
260
|
.subscribe((data) => {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
261
|
+
// Note: Form value processing is now handled directly in onBlurHandler
|
|
262
|
+
// for immediate processing. This subscription is kept for backwards compatibility
|
|
263
|
+
// but the _isSearching check prevents double-processing since onBlurHandler
|
|
264
|
+
// already sets _isSearching to false before this subscription fires.
|
|
265
|
+
if (!(!data && data !== null && this._isSearching()))
|
|
266
|
+
return;
|
|
267
|
+
// Only process if still in search mode (which means onBlurHandler didn't run)
|
|
268
|
+
this.processTextToFormValue(this._userSearchText(), {
|
|
269
|
+
exitSearchMode: true,
|
|
270
|
+
updateOnMatch: true,
|
|
271
|
+
clearSearchText: true,
|
|
272
|
+
});
|
|
122
273
|
});
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
* @param value The input value to emit after debounce
|
|
127
|
-
*/
|
|
128
|
-
emitDebouncedSearchText(value) {
|
|
129
|
-
// Clear any pending debounce timer
|
|
130
|
-
if (this._searchDebounceTimer) {
|
|
131
|
-
clearTimeout(this._searchDebounceTimer);
|
|
132
|
-
}
|
|
133
|
-
// Set up new debounce timer
|
|
134
|
-
this._searchDebounceTimer = setTimeout(() => {
|
|
135
|
-
if (this._isDestroyed)
|
|
274
|
+
this.destroyRef.onDestroy(() => {
|
|
275
|
+
this._isDestroyed = true;
|
|
276
|
+
if (!this._searchDebounceTimer)
|
|
136
277
|
return;
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
this._lastEmittedSearchText = value;
|
|
140
|
-
this.searchTextChange.emit(value || '');
|
|
141
|
-
if (this.syncFormWithText()) {
|
|
142
|
-
this.onValueChange(value, false);
|
|
143
|
-
}
|
|
144
|
-
if (!value?.length && !this.emitOnly() && !this.multiple()) {
|
|
145
|
-
this._ngControl()?.control?.patchValue(null);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}, this.searchTextDebounce());
|
|
278
|
+
clearTimeout(this._searchDebounceTimer);
|
|
279
|
+
});
|
|
149
280
|
}
|
|
281
|
+
// ============================================
|
|
282
|
+
// LIFECYCLE HOOKS / OVERRIDES
|
|
283
|
+
// ============================================
|
|
150
284
|
setupFormControl() {
|
|
151
285
|
super.setupFormControl();
|
|
152
286
|
const formControl = this._ngControl()?.control;
|
|
153
|
-
if (this.
|
|
154
|
-
this.
|
|
155
|
-
this.
|
|
287
|
+
if (this.formValueChangeSubscription) {
|
|
288
|
+
this.formValueChangeSubscription.unsubscribe();
|
|
289
|
+
this.formValueChangeSubscription = undefined;
|
|
156
290
|
}
|
|
157
|
-
if (formControl)
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
if (!this.syncFormWithText() && !value) {
|
|
174
|
-
this._inputValue.set('');
|
|
175
|
-
}
|
|
291
|
+
if (!formControl)
|
|
292
|
+
return;
|
|
293
|
+
this.formValueChangeSubscription = formControl.valueChanges
|
|
294
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
295
|
+
.subscribe((value) => {
|
|
296
|
+
this.handleFormValueChange(value);
|
|
297
|
+
});
|
|
298
|
+
}
|
|
299
|
+
writeValue(val) {
|
|
300
|
+
// Simply update the value - _inputValue is computed and will automatically
|
|
301
|
+
// show the correct display text based on _value and _isSearching state.
|
|
302
|
+
super.writeValue(val);
|
|
303
|
+
// Handle array values for multiple mode
|
|
304
|
+
if (Array.isArray(val)) {
|
|
305
|
+
val.forEach((x) => {
|
|
306
|
+
this.handleSelectValue(x);
|
|
176
307
|
});
|
|
177
308
|
}
|
|
178
309
|
}
|
|
310
|
+
onChangedHandler(value) {
|
|
311
|
+
super.onChangedHandler(value);
|
|
312
|
+
// Exit search mode - _inputValue will now derive from _value
|
|
313
|
+
// Note: Don't clear _userSearchText here - it's needed for processTextToFormValue matching
|
|
314
|
+
this._isSearching.set(false);
|
|
315
|
+
}
|
|
316
|
+
onBlurHandler() {
|
|
317
|
+
// Process form value and exit search mode immediately to avoid visual glitches
|
|
318
|
+
this.processTextToFormValue(this._userSearchText(), {
|
|
319
|
+
exitSearchMode: true,
|
|
320
|
+
updateOnMatch: true,
|
|
321
|
+
clearSearchText: true,
|
|
322
|
+
});
|
|
323
|
+
// Hide dropdown immediately - click events on options are protected by onBlurInput
|
|
324
|
+
// which checks if focus moved to the option list before calling this handler
|
|
325
|
+
this.hideOptionVisibility();
|
|
326
|
+
super.onBlurHandler();
|
|
327
|
+
}
|
|
328
|
+
// ============================================
|
|
329
|
+
// PUBLIC METHODS - Used in template
|
|
330
|
+
// ============================================
|
|
331
|
+
/**
|
|
332
|
+
* Shows the option list dropdown.
|
|
333
|
+
*/
|
|
179
334
|
showOptionVisibility() {
|
|
180
|
-
if (this._optionHideTimeout()) {
|
|
181
|
-
clearTimeout(this._optionHideTimeout());
|
|
182
|
-
this._optionHideTimeout.set(null);
|
|
183
|
-
}
|
|
184
335
|
this._showOptions.set(true);
|
|
336
|
+
// Initialize _userSearchText with current input value when showing options
|
|
337
|
+
// This ensures that if user focuses and blurs without typing, the value is preserved
|
|
338
|
+
// Also enter search mode to enable filtering
|
|
339
|
+
if (this._isSearching())
|
|
340
|
+
return;
|
|
341
|
+
const currentInputValue = this._inputValue();
|
|
342
|
+
this._userSearchText.set(currentInputValue || '');
|
|
343
|
+
this._isSearching.set(true);
|
|
185
344
|
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
this.
|
|
191
|
-
this._showOptions.set(false);
|
|
192
|
-
}, skipTimeout ? 0 : 50));
|
|
345
|
+
/**
|
|
346
|
+
* Hides the option list dropdown.
|
|
347
|
+
*/
|
|
348
|
+
hideOptionVisibility() {
|
|
349
|
+
this._showOptions.set(false);
|
|
193
350
|
}
|
|
351
|
+
/**
|
|
352
|
+
* Handles input text changes (typing).
|
|
353
|
+
* @param event The input event
|
|
354
|
+
*/
|
|
194
355
|
onChangeInput(event) {
|
|
195
356
|
this.showOptionVisibility();
|
|
196
357
|
const value = event.target?.value ?? '';
|
|
197
|
-
this.
|
|
358
|
+
this._isSearching.set(true);
|
|
359
|
+
this._userSearchText.set(value);
|
|
198
360
|
this.emitDebouncedSearchText(value);
|
|
199
361
|
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
return options;
|
|
206
|
-
}
|
|
207
|
-
onChangedHandler(value) {
|
|
208
|
-
super.onChangedHandler(value);
|
|
209
|
-
this.setInputValue();
|
|
210
|
-
}
|
|
362
|
+
/**
|
|
363
|
+
* Handles option selection from the dropdown.
|
|
364
|
+
* @param value The selected option's value
|
|
365
|
+
* @param hideOptions Whether to hide the dropdown after selection
|
|
366
|
+
*/
|
|
211
367
|
onValueChange(value, hideOptions = true) {
|
|
368
|
+
// When allowFreeText is true and a null/undefined value is received (e.g., from selecting
|
|
369
|
+
// a non-existent option in the dropdown), use the typed text as the value instead of clearing
|
|
370
|
+
if ((value === null || value === undefined) && this._allowFreeTextInternal()) {
|
|
371
|
+
const typedText = this._userSearchText()?.trim();
|
|
372
|
+
if (typedText) {
|
|
373
|
+
this.onChangedHandler(typedText);
|
|
374
|
+
if (hideOptions) {
|
|
375
|
+
this.hideOptionVisibility();
|
|
376
|
+
this.focusInput();
|
|
377
|
+
}
|
|
378
|
+
this.selectedOption.emit(typedText);
|
|
379
|
+
return;
|
|
380
|
+
}
|
|
381
|
+
}
|
|
212
382
|
if (this.multiple()) {
|
|
213
|
-
this.
|
|
383
|
+
this.handleSelectValue(value);
|
|
214
384
|
this.onChangedHandler(this._chipList());
|
|
215
385
|
if (this._chipList().some((x) => x === value)) {
|
|
216
|
-
this.
|
|
386
|
+
this._userSearchText.set('');
|
|
387
|
+
this._isSearching.set(false);
|
|
217
388
|
}
|
|
389
|
+
return;
|
|
218
390
|
}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
391
|
+
// Update _userSearchText to the selected option's label
|
|
392
|
+
// This enables processTextToFormValue to match correctly on blur
|
|
393
|
+
const selectedOption = this.selectOptions().find((x) => x.value === value);
|
|
394
|
+
if (selectedOption) {
|
|
395
|
+
this._userSearchText.set(selectedOption.label);
|
|
396
|
+
}
|
|
397
|
+
this.onChangedHandler(value);
|
|
398
|
+
if (hideOptions) {
|
|
399
|
+
this.hideOptionVisibility();
|
|
400
|
+
// Return focus to input after selection
|
|
401
|
+
this.focusInput();
|
|
402
|
+
}
|
|
403
|
+
this.selectedOption.emit(value);
|
|
404
|
+
}
|
|
405
|
+
/**
|
|
406
|
+
* Handles keydown events on the input element for accessibility.
|
|
407
|
+
* @param event The keyboard event
|
|
408
|
+
*/
|
|
409
|
+
onInputKeydown(event) {
|
|
410
|
+
switch (event.key) {
|
|
411
|
+
case 'ArrowDown':
|
|
412
|
+
// Open dropdown if closed, or let option-list handle navigation
|
|
413
|
+
if (!this._showOptions()) {
|
|
414
|
+
event.preventDefault();
|
|
415
|
+
this.showOptionVisibility();
|
|
416
|
+
}
|
|
417
|
+
break;
|
|
418
|
+
case 'ArrowUp':
|
|
419
|
+
// Open dropdown if closed
|
|
420
|
+
if (!this._showOptions()) {
|
|
421
|
+
event.preventDefault();
|
|
422
|
+
this.showOptionVisibility();
|
|
423
|
+
}
|
|
424
|
+
break;
|
|
425
|
+
case 'Escape':
|
|
426
|
+
// Close dropdown and keep focus on input
|
|
427
|
+
if (this._showOptions()) {
|
|
428
|
+
event.preventDefault();
|
|
429
|
+
this.onEscapePressed();
|
|
430
|
+
}
|
|
431
|
+
break;
|
|
432
|
+
case 'Enter':
|
|
433
|
+
// When allowFreeText is true and dropdown is open, handle Enter specially
|
|
434
|
+
if (this._showOptions() && this._allowFreeTextInternal()) {
|
|
435
|
+
// Check if there are any filtered options
|
|
436
|
+
const filteredOptions = this._filteredOptions();
|
|
437
|
+
if (filteredOptions.length === 0) {
|
|
438
|
+
// No options to select - use the typed text as the value
|
|
439
|
+
event.preventDefault();
|
|
440
|
+
this.processTextToFormValue(this._userSearchText(), {
|
|
441
|
+
exitSearchMode: true,
|
|
442
|
+
updateOnMatch: true,
|
|
443
|
+
clearSearchText: false,
|
|
444
|
+
});
|
|
445
|
+
this.hideOptionVisibility();
|
|
446
|
+
}
|
|
447
|
+
// If there are filtered options, let option-list handle the selection
|
|
448
|
+
}
|
|
449
|
+
break;
|
|
225
450
|
}
|
|
226
451
|
}
|
|
227
|
-
|
|
228
|
-
|
|
452
|
+
/**
|
|
453
|
+
* Handles Escape key press from option list.
|
|
454
|
+
* Closes dropdown and returns focus to input.
|
|
455
|
+
*/
|
|
456
|
+
onEscapePressed() {
|
|
457
|
+
this.hideOptionVisibility();
|
|
458
|
+
this.focusInput();
|
|
459
|
+
}
|
|
460
|
+
/**
|
|
461
|
+
* Handles Tab key press from option list.
|
|
462
|
+
* Closes dropdown and allows natural tab navigation.
|
|
463
|
+
*/
|
|
464
|
+
onTabPressed(_event) {
|
|
465
|
+
// Close the dropdown, tab will naturally move focus
|
|
466
|
+
this.hideOptionVisibility();
|
|
467
|
+
// Process any pending input value
|
|
468
|
+
this.processTextToFormValue(this._userSearchText(), {
|
|
469
|
+
exitSearchMode: true,
|
|
470
|
+
updateOnMatch: true,
|
|
471
|
+
clearSearchText: true,
|
|
472
|
+
});
|
|
473
|
+
}
|
|
474
|
+
/**
|
|
475
|
+
* Sets focus to the input element.
|
|
476
|
+
*/
|
|
477
|
+
focusInput() {
|
|
478
|
+
const inputEl = this.selectInput()?.nativeElement;
|
|
479
|
+
if (!inputEl)
|
|
480
|
+
return;
|
|
481
|
+
inputEl.focus();
|
|
482
|
+
}
|
|
483
|
+
/**
|
|
484
|
+
* Handles input blur event.
|
|
485
|
+
* @param event The focus event
|
|
486
|
+
*/
|
|
487
|
+
onBlurInput(event) {
|
|
488
|
+
const relatedTarget = event.relatedTarget;
|
|
489
|
+
const optionListId = this.optionList()?.optionListContainer()?.nativeElement?.id;
|
|
490
|
+
if (relatedTarget?.id === optionListId)
|
|
491
|
+
return;
|
|
492
|
+
this.onBlurHandler();
|
|
493
|
+
}
|
|
494
|
+
/**
|
|
495
|
+
* Handles blur event on the option list.
|
|
496
|
+
* @param event The blur event (truthy if should hide)
|
|
497
|
+
*/
|
|
498
|
+
onBlurOptionList(event) {
|
|
499
|
+
if (!event)
|
|
500
|
+
return;
|
|
501
|
+
this.hideOptionVisibility();
|
|
502
|
+
}
|
|
503
|
+
/**
|
|
504
|
+
* Gets the display description for a chip value.
|
|
505
|
+
* @param chipValue The chip's value
|
|
506
|
+
* @returns The chip's display label
|
|
507
|
+
*/
|
|
508
|
+
getDescription(chipValue) {
|
|
509
|
+
const option = this.selectOptions().find((x) => x.value === chipValue);
|
|
510
|
+
return option?.label?.toString() ?? '';
|
|
511
|
+
}
|
|
512
|
+
/**
|
|
513
|
+
* Removes a chip from the selection (multiple mode).
|
|
514
|
+
* @param chipValue The chip value to remove
|
|
515
|
+
*/
|
|
516
|
+
deleteChip(chipValue) {
|
|
517
|
+
const stringChipValue = chipValue?.toString();
|
|
518
|
+
const index = this._chipList().findIndex((x) => x.toString() === stringChipValue);
|
|
519
|
+
if (index < 0)
|
|
520
|
+
return;
|
|
521
|
+
this._chipList.update((list) => list.filter((_, i) => i !== index));
|
|
522
|
+
this.onChangedHandler(this._chipList());
|
|
523
|
+
}
|
|
524
|
+
// ============================================
|
|
525
|
+
// PROTECTED METHODS - Internal logic, accessible to subclasses
|
|
526
|
+
// ============================================
|
|
527
|
+
/**
|
|
528
|
+
* Filters options based on input text.
|
|
529
|
+
* @param value The search text
|
|
530
|
+
* @returns Filtered options
|
|
531
|
+
*/
|
|
532
|
+
filterOptions(value) {
|
|
533
|
+
const options = this.selectOptions();
|
|
534
|
+
const trimmedValue = value?.trim();
|
|
535
|
+
return this.internalFilterOptions() && trimmedValue
|
|
536
|
+
? options.filter((x) => x.label.toLowerCase().includes(trimmedValue.toLowerCase()))
|
|
537
|
+
: options;
|
|
538
|
+
}
|
|
539
|
+
// ============================================
|
|
540
|
+
// PRIVATE METHODS - Internal implementation
|
|
541
|
+
// ============================================
|
|
542
|
+
/**
|
|
543
|
+
* Core method that processes text input and updates form value accordingly.
|
|
544
|
+
*
|
|
545
|
+
* Matching logic:
|
|
546
|
+
* - If text matches an option label (case-insensitive, trimmed) and autoSelectOnExactMatch is true, select that option
|
|
547
|
+
* - If no match and allowFreeText is true, use the typed text as value
|
|
548
|
+
* - If no match and allowFreeText is false, clear the value
|
|
549
|
+
*
|
|
550
|
+
* @param text The text to process
|
|
551
|
+
* @param options Configuration options:
|
|
552
|
+
* - exitSearchMode: If true, uses onChangedHandler which exits search mode. If false, stays in search mode.
|
|
553
|
+
* - updateOnMatch: If true, updates form when match found. If false, only clears on no-match.
|
|
554
|
+
* - clearSearchText: If true, clears _userSearchText after processing.
|
|
555
|
+
*/
|
|
556
|
+
processTextToFormValue(text, options) {
|
|
557
|
+
const searchText = text?.trim();
|
|
558
|
+
// Find matching option: exact match (case-insensitive, trimmed)
|
|
559
|
+
const matchingOption = this.findMatchingOption(text);
|
|
229
560
|
if (!this.multiple()) {
|
|
230
|
-
|
|
561
|
+
// If the found option is already selected, nothing to do except exit search mode
|
|
562
|
+
if (matchingOption?.value === this._value()) {
|
|
563
|
+
if (options.exitSearchMode) {
|
|
564
|
+
this._isSearching.set(false);
|
|
565
|
+
}
|
|
566
|
+
if (options.clearSearchText) {
|
|
567
|
+
this._userSearchText.set('');
|
|
568
|
+
}
|
|
231
569
|
return;
|
|
232
|
-
if (option) {
|
|
233
|
-
this.onChangedHandler(option.value ?? '');
|
|
234
570
|
}
|
|
235
|
-
|
|
236
|
-
|
|
571
|
+
// Determine what action to take based on match status and settings
|
|
572
|
+
const shouldAutoSelect = matchingOption && this.autoSelectOnExactMatch() && options.updateOnMatch;
|
|
573
|
+
const shouldUseFreeText = this._allowFreeTextInternal() && searchText && options.updateOnMatch;
|
|
574
|
+
// Clear logic differs between typing and blur:
|
|
575
|
+
// - On blur (exitSearchMode=true): clear when input is empty (regardless of allowFreeText setting)
|
|
576
|
+
// - On blur: also clear when no valid selection and free text not allowed
|
|
577
|
+
// - During typing (exitSearchMode=false): only clear when updateOnMatch is true and text doesn't match
|
|
578
|
+
const shouldClearOnBlurEmpty = options.exitSearchMode && !searchText;
|
|
579
|
+
const shouldClearOnBlurNoMatch = options.exitSearchMode && !this._allowFreeTextInternal() && (!matchingOption || !this.autoSelectOnExactMatch());
|
|
580
|
+
const shouldClearWhileTyping = !options.exitSearchMode && options.updateOnMatch && !matchingOption && !this._allowFreeTextInternal();
|
|
581
|
+
if (shouldAutoSelect) {
|
|
582
|
+
// Auto-select the matching option
|
|
583
|
+
if (options.exitSearchMode) {
|
|
584
|
+
this.onChangedHandler(matchingOption.value ?? '');
|
|
585
|
+
}
|
|
586
|
+
else {
|
|
587
|
+
this.onValueChange(matchingOption.value ?? '', false);
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
else if (shouldUseFreeText) {
|
|
591
|
+
// Free text allowed: use the typed text as value
|
|
592
|
+
if (options.exitSearchMode) {
|
|
593
|
+
this.onChangedHandler(searchText);
|
|
594
|
+
}
|
|
595
|
+
else {
|
|
596
|
+
this.onValueChange(searchText, false);
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
else if (shouldClearOnBlurEmpty || shouldClearOnBlurNoMatch) {
|
|
600
|
+
// On blur with empty input or no valid selection: clear the value to null
|
|
601
|
+
this.onChangedHandler(null);
|
|
237
602
|
}
|
|
603
|
+
else if (shouldClearWhileTyping) {
|
|
604
|
+
// While typing, text doesn't match any option: clear the value but stay in search mode
|
|
605
|
+
this.updateValueWithoutExitingSearchMode('');
|
|
606
|
+
}
|
|
607
|
+
}
|
|
608
|
+
if (options.clearSearchText) {
|
|
609
|
+
this._userSearchText.set('');
|
|
238
610
|
}
|
|
239
611
|
}
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
if (this.syncFormWithText() && this._showOptions() && !Array.isArray(val)) {
|
|
246
|
-
// User is actively searching - preserve their typed text
|
|
247
|
-
// Only update _value without touching _inputValue
|
|
248
|
-
super.writeValue(val);
|
|
612
|
+
/**
|
|
613
|
+
* Handles keyboard events on the input element.
|
|
614
|
+
*/
|
|
615
|
+
handleInputKeydown(e, inputElement) {
|
|
616
|
+
if (!(this.multiple() && this._chipList().length > 0 && !this._inputValue()?.length && e.key === 'Backspace')) {
|
|
249
617
|
return;
|
|
250
618
|
}
|
|
251
|
-
|
|
252
|
-
this.
|
|
253
|
-
if (
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
619
|
+
e.preventDefault();
|
|
620
|
+
const chipContainerEl = this.chipContainer()?.nativeElement;
|
|
621
|
+
if (chipContainerEl) {
|
|
622
|
+
const chips = chipContainerEl.querySelectorAll('.chip button.btn-chip');
|
|
623
|
+
if (chips.length > 0) {
|
|
624
|
+
const lastChip = chips[chips.length - 1];
|
|
625
|
+
lastChip.focus();
|
|
626
|
+
lastChip.addEventListener('keydown', (event) => {
|
|
627
|
+
if (event.key === 'Backspace') {
|
|
628
|
+
event.preventDefault();
|
|
629
|
+
this.deleteChip(this._chipList()[this._chipList().length - 1]);
|
|
630
|
+
inputElement.focus();
|
|
631
|
+
return;
|
|
632
|
+
}
|
|
633
|
+
event.preventDefault();
|
|
634
|
+
});
|
|
635
|
+
}
|
|
257
636
|
}
|
|
258
637
|
}
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
this._ngControl()?.control?.patchValue(null);
|
|
638
|
+
/**
|
|
639
|
+
* Handles changes to the select options input.
|
|
640
|
+
*/
|
|
641
|
+
handleOptionsChange() {
|
|
642
|
+
const value = this._value();
|
|
643
|
+
if (this.multiple() && Array.isArray(value) && value.length > 0) {
|
|
644
|
+
for (const valueElement of value) {
|
|
645
|
+
this.handleSelectValue(valueElement);
|
|
268
646
|
}
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
}
|
|
272
|
-
onBlurOptionList(event) {
|
|
273
|
-
if (event)
|
|
274
|
-
this.hideOptionVisibility();
|
|
275
|
-
}
|
|
276
|
-
setInputValue(resetOnMiss = false) {
|
|
277
|
-
this._inputValue.set(this.selectOptions().find((x) => x.value === this._value())?.label ?? (resetOnMiss ? '' : this._inputValue()));
|
|
647
|
+
}
|
|
648
|
+
// For single mode: _inputValue is computed, so it automatically updates
|
|
278
649
|
}
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
650
|
+
/**
|
|
651
|
+
* Handles form value changes from external sources.
|
|
652
|
+
*/
|
|
653
|
+
handleFormValueChange(value) {
|
|
654
|
+
if (!(this.multiple() && Array.isArray(value))) {
|
|
655
|
+
return;
|
|
656
|
+
}
|
|
657
|
+
this._chipList.set([]);
|
|
658
|
+
this._selectedOptions.set([]);
|
|
659
|
+
value.forEach((x) => {
|
|
660
|
+
this.handleSelectValue(x);
|
|
661
|
+
});
|
|
662
|
+
// Note: Don't clear _userSearchText here - it's managed by processTextToFormValue
|
|
663
|
+
// which runs when options are hidden and needs _userSearchText for matching.
|
|
282
664
|
}
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
665
|
+
/**
|
|
666
|
+
* Handles selecting a value (adding to chip list in multiple mode).
|
|
667
|
+
*/
|
|
668
|
+
handleSelectValue(value) {
|
|
669
|
+
const option = this.selectOptions().find((x) => x.value === value);
|
|
670
|
+
if (option && !this._chipList().some((x) => x === option.value)) {
|
|
671
|
+
this._chipList.update((list) => [...list, option.value]);
|
|
672
|
+
this._selectedOptions.update((list) => [...list, option]);
|
|
288
673
|
}
|
|
289
674
|
}
|
|
290
675
|
/**
|
|
291
|
-
*
|
|
292
|
-
*
|
|
676
|
+
* Emits search text change after debounce.
|
|
677
|
+
* When `updateValueOnType` is true, also updates the form value using the same
|
|
678
|
+
* matching logic as processTextToFormValue (auto-select matching options, or use free text).
|
|
293
679
|
*/
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
if (i >= 0) {
|
|
298
|
-
const currentList = this._chipList();
|
|
299
|
-
if (Array.isArray(currentList) && currentList.length > 0) {
|
|
300
|
-
this._chipList.update((list) => list.filter((_, index) => index !== i));
|
|
301
|
-
this.onChangedHandler(this._chipList());
|
|
302
|
-
}
|
|
680
|
+
emitDebouncedSearchText(value) {
|
|
681
|
+
if (this._searchDebounceTimer) {
|
|
682
|
+
clearTimeout(this._searchDebounceTimer);
|
|
303
683
|
}
|
|
684
|
+
this._searchDebounceTimer = setTimeout(() => {
|
|
685
|
+
if (this._isDestroyed) {
|
|
686
|
+
return;
|
|
687
|
+
}
|
|
688
|
+
if (value === this._lastEmittedSearchText) {
|
|
689
|
+
return;
|
|
690
|
+
}
|
|
691
|
+
this._lastEmittedSearchText = value;
|
|
692
|
+
this.searchTextChange.emit(value || '');
|
|
693
|
+
// Update form value based on what the user typed
|
|
694
|
+
// - When updateValueOnType is true: update on both match and no-match
|
|
695
|
+
// - When updateValueOnType is false: only clear the value when text doesn't match
|
|
696
|
+
this.processTextToFormValue(value, {
|
|
697
|
+
exitSearchMode: false,
|
|
698
|
+
updateOnMatch: this.updateValueOnType(),
|
|
699
|
+
clearSearchText: false,
|
|
700
|
+
});
|
|
701
|
+
}, this.searchTextDebounce());
|
|
304
702
|
}
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
703
|
+
/**
|
|
704
|
+
* Updates the form value and internal _value signal without exiting search mode.
|
|
705
|
+
* This is used when clearing the value during typing - we want to update the form
|
|
706
|
+
* but keep the user in search mode so they can continue typing.
|
|
707
|
+
*/
|
|
708
|
+
updateValueWithoutExitingSearchMode(value) {
|
|
709
|
+
this._value.set(value);
|
|
710
|
+
if (this.onChange) {
|
|
711
|
+
this.onChange(value);
|
|
308
712
|
}
|
|
309
713
|
}
|
|
310
714
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
311
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: QuangAutocompleteComponent, isStandalone: true, selector: "quang-autocomplete", inputs: {
|
|
715
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: QuangAutocompleteComponent, isStandalone: true, selector: "quang-autocomplete", inputs: { selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, allowFreeText: { classPropertyName: "allowFreeText", publicName: "allowFreeText", isSignal: true, isRequired: false, transformFunction: null }, autoSelectOnExactMatch: { classPropertyName: "autoSelectOnExactMatch", publicName: "autoSelectOnExactMatch", isSignal: true, isRequired: false, transformFunction: null }, updateValueOnType: { classPropertyName: "updateValueOnType", publicName: "updateValueOnType", isSignal: true, isRequired: false, transformFunction: null }, syncFormWithText: { classPropertyName: "syncFormWithText", publicName: "syncFormWithText", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, emitOnly: { classPropertyName: "emitOnly", publicName: "emitOnly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, chipMaxLength: { classPropertyName: "chipMaxLength", publicName: "chipMaxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelectDisplayMode: { classPropertyName: "multiSelectDisplayMode", publicName: "multiSelectDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null }, internalFilterOptions: { classPropertyName: "internalFilterOptions", publicName: "internalFilterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOption", searchTextChange: "searchTextChange" }, providers: [
|
|
312
716
|
{
|
|
313
717
|
provide: NG_VALUE_ACCESSOR,
|
|
314
718
|
useExisting: forwardRef(() => QuangAutocompleteComponent),
|
|
@@ -318,7 +722,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
|
|
|
318
722
|
provide: QuangOptionListComponent,
|
|
319
723
|
multi: false,
|
|
320
724
|
},
|
|
321
|
-
], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n #autocompleteContainer\n class=\"autocomplete-container\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n #chipContainer\n class=\"container-wrap\"\n >\n @if (multiple() && _chipList().length > 0) {\n @for (chip of _chipList(); track chip) {\n @if (getDescription(chip)) {\n <div\n [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n class=\"chip chip-hover\"\n >\n <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n {{ getDescription(chip) }}\n </p>\n @if (!isReadonly() && !_isDisabled()) {\n <button\n [tabIndex]=\"$index + 1\"\n (click)=\"deleteChip(chip)\"\n class=\"btn btn-chip\"\n type=\"button\"\n >\n <svg\n class=\"ionicon\"\n fill=\"currentColor\"\n height=\"24\"\n viewBox=\"0 0 512 512\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M368 368L144 144M368 144L144 368\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n />\n </svg>\n </button>\n }\n </div>\n }\n }\n }\n\n <input\n [attr.required]=\"getIsRequiredControl()\"\n [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [disabled]=\"_isDisabled() || isReadonly()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_inputValue()\"\n (blur)=\"onBlurInput($event)\"\n (input)=\"onChangeInput($event)\"\n (mousedown)=\"showOptionVisibility()\"\n #selectInput\n autocomplete=\"off\"\n type=\"text\"\n />\n </div>\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"
|
|
725
|
+
], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n #autocompleteContainer\n class=\"autocomplete-container\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n #chipContainer\n class=\"container-wrap\"\n >\n @if (multiple() && _chipList().length > 0) {\n @for (chip of _chipList(); track chip) {\n @if (getDescription(chip)) {\n <div\n [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n class=\"chip chip-hover\"\n >\n <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n {{ getDescription(chip) }}\n </p>\n @if (!isReadonly() && !_isDisabled()) {\n <button\n [tabIndex]=\"$index + 1\"\n (click)=\"deleteChip(chip)\"\n class=\"btn btn-chip\"\n type=\"button\"\n >\n <svg\n class=\"ionicon\"\n fill=\"currentColor\"\n height=\"24\"\n viewBox=\"0 0 512 512\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M368 368L144 144M368 144L144 368\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n />\n </svg>\n </button>\n }\n </div>\n }\n }\n }\n\n <input\n [attr.aria-activedescendant]=\"_showOptions() ? optionList()?.getActiveDescendantId() : null\"\n [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n [attr.aria-expanded]=\"_showOptions()\"\n [attr.required]=\"getIsRequiredControl()\"\n [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [disabled]=\"_isDisabled() || isReadonly()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_inputValue()\"\n (blur)=\"onBlurInput($event)\"\n (input)=\"onChangeInput($event)\"\n (keydown)=\"onInputKeydown($event)\"\n (mousedown)=\"showOptionVisibility()\"\n #selectInput\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n role=\"combobox\"\n type=\"text\"\n />\n </div>\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_highlightedValue()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"false\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentID]=\"componentId()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"autocompleteContainer\"\n [selectOptions]=\"_filteredOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurOptionList($event)\"\n (changedHandler)=\"onValueChange($event)\"\n (escapePressed)=\"onEscapePressed()\"\n (tabPressed)=\"onTabPressed($event)\"\n #optionList\n selectionMode=\"single\"\n />\n }\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);height:2rem}.chip p{margin:0;max-width:var(--chip-max-length);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler", "escapePressed", "tabPressed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
322
726
|
}
|
|
323
727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
|
|
324
728
|
type: Component,
|
|
@@ -332,7 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
332
736
|
provide: QuangOptionListComponent,
|
|
333
737
|
multi: false,
|
|
334
738
|
},
|
|
335
|
-
], template: "<div\n [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n #autocompleteContainer\n class=\"autocomplete-container\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n #chipContainer\n class=\"container-wrap\"\n >\n @if (multiple() && _chipList().length > 0) {\n @for (chip of _chipList(); track chip) {\n @if (getDescription(chip)) {\n <div\n [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n class=\"chip chip-hover\"\n >\n <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n {{ getDescription(chip) }}\n </p>\n @if (!isReadonly() && !_isDisabled()) {\n <button\n [tabIndex]=\"$index + 1\"\n (click)=\"deleteChip(chip)\"\n class=\"btn btn-chip\"\n type=\"button\"\n >\n <svg\n class=\"ionicon\"\n fill=\"currentColor\"\n height=\"24\"\n viewBox=\"0 0 512 512\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M368 368L144 144M368 144L144 368\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n />\n </svg>\n </button>\n }\n </div>\n }\n }\n }\n\n <input\n [attr.required]=\"getIsRequiredControl()\"\n [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [disabled]=\"_isDisabled() || isReadonly()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_inputValue()\"\n (blur)=\"onBlurInput($event)\"\n (input)=\"onChangeInput($event)\"\n (mousedown)=\"showOptionVisibility()\"\n #selectInput\n autocomplete=\"off\"\n type=\"text\"\n />\n </div>\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"
|
|
739
|
+
], template: "<div\n [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n #autocompleteContainer\n class=\"autocomplete-container\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n #chipContainer\n class=\"container-wrap\"\n >\n @if (multiple() && _chipList().length > 0) {\n @for (chip of _chipList(); track chip) {\n @if (getDescription(chip)) {\n <div\n [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n class=\"chip chip-hover\"\n >\n <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n {{ getDescription(chip) }}\n </p>\n @if (!isReadonly() && !_isDisabled()) {\n <button\n [tabIndex]=\"$index + 1\"\n (click)=\"deleteChip(chip)\"\n class=\"btn btn-chip\"\n type=\"button\"\n >\n <svg\n class=\"ionicon\"\n fill=\"currentColor\"\n height=\"24\"\n viewBox=\"0 0 512 512\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M368 368L144 144M368 144L144 368\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n />\n </svg>\n </button>\n }\n </div>\n }\n }\n }\n\n <input\n [attr.aria-activedescendant]=\"_showOptions() ? optionList()?.getActiveDescendantId() : null\"\n [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n [attr.aria-expanded]=\"_showOptions()\"\n [attr.required]=\"getIsRequiredControl()\"\n [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [disabled]=\"_isDisabled() || isReadonly()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_inputValue()\"\n (blur)=\"onBlurInput($event)\"\n (input)=\"onChangeInput($event)\"\n (keydown)=\"onInputKeydown($event)\"\n (mousedown)=\"showOptionVisibility()\"\n #selectInput\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n role=\"combobox\"\n type=\"text\"\n />\n </div>\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_highlightedValue()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"false\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentID]=\"componentId()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"autocompleteContainer\"\n [selectOptions]=\"_filteredOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurOptionList($event)\"\n (changedHandler)=\"onValueChange($event)\"\n (escapePressed)=\"onEscapePressed()\"\n (tabPressed)=\"onTabPressed($event)\"\n #optionList\n selectionMode=\"single\"\n />\n }\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);height:2rem}.chip p{margin:0;max-width:var(--chip-max-length);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"] }]
|
|
336
740
|
}], ctorParameters: () => [] });
|
|
337
741
|
|
|
338
742
|
/**
|