@symfony/ux-autocomplete 2.27.0 → 2.28.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/controller.d.ts +6 -3
  2. package/dist/controller.js +385 -383
  3. package/package.json +20 -9
package/dist/controller.d.ts CHANGED
@@ -1,13 +1,14 @@
1
1
  import { Controller } from '@hotwired/stimulus';
2
2
  import TomSelect from 'tom-select';
3
- export interface AutocompletePreConnectOptions {
3
+
4
+ interface AutocompletePreConnectOptions {
4
5
  options: any;
5
6
  }
6
- export interface AutocompleteConnectOptions {
7
+ interface AutocompleteConnectOptions {
7
8
  tomSelect: TomSelect;
8
9
  options: any;
9
10
  }
10
- export default class extends Controller {
11
+ declare class export_default extends Controller {
11
12
  #private;
12
13
  static values: {
13
14
  url: StringConstructor;
@@ -54,3 +55,5 @@ export default class extends Controller {
54
55
  private createOptionsDataStructure;
55
56
  private areOptionsEquivalent;
56
57
  }
58
+
59
+ export { type AutocompleteConnectOptions, type AutocompletePreConnectOptions, export_default as default };
package/dist/controller.js CHANGED
@@ -1,410 +1,412 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- import TomSelect from 'tom-select';
3
-
4
- /******************************************************************************
5
- Copyright (c) Microsoft Corporation.
6
-
7
- Permission to use, copy, modify, and/or distribute this software for any
8
- purpose with or without fee is hereby granted.
9
-
10
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
11
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
12
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
13
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
14
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
15
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
16
- PERFORMANCE OF THIS SOFTWARE.
17
- ***************************************************************************** */
18
- /* global Reflect, Promise, SuppressedError, Symbol */
19
-
20
-
21
- function __classPrivateFieldGet(receiver, state, kind, f) {
22
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
23
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
24
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
25
- }
26
-
27
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
28
- var e = new Error(message);
29
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
1
+ var __typeError = (msg) => {
2
+ throw TypeError(msg);
30
3
  };
4
+ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
5
+ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
6
+ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
7
+ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
31
8
 
32
- var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeConfigs, _default_1_normalizePluginsToHash, _default_1_createTomSelect;
33
- class default_1 extends Controller {
34
- constructor() {
35
- super(...arguments);
36
- _default_1_instances.add(this);
37
- this.isObserving = false;
38
- this.hasLoadedChoicesPreviously = false;
39
- this.originalOptions = [];
40
- _default_1_normalizePluginsToHash.set(this, (plugins) => {
41
- if (Array.isArray(plugins)) {
42
- return plugins.reduce((acc, plugin) => {
43
- if (typeof plugin === 'string') {
44
- acc[plugin] = {};
45
- }
46
- if (typeof plugin === 'object' && plugin.name) {
47
- acc[plugin.name] = plugin.options || {};
48
- }
49
- return acc;
50
- }, {});
51
- }
52
- return plugins;
53
- });
9
+ // src/controller.ts
10
+ import { Controller } from "@hotwired/stimulus";
11
+ import TomSelect from "tom-select";
12
+ var _instances, getCommonConfig_fn, createAutocomplete_fn, createAutocompleteWithHtmlContents_fn, createAutocompleteWithRemoteData_fn, stripTags_fn, mergeConfigs_fn, _normalizePluginsToHash, normalizePlugins_fn, createTomSelect_fn;
13
+ var controller_default = class extends Controller {
14
+ constructor() {
15
+ super(...arguments);
16
+ __privateAdd(this, _instances);
17
+ this.isObserving = false;
18
+ this.hasLoadedChoicesPreviously = false;
19
+ this.originalOptions = [];
20
+ /**
21
+ * Normalizes the plugins to a hash, so that we can merge them easily.
22
+ */
23
+ __privateAdd(this, _normalizePluginsToHash, (plugins) => {
24
+ if (Array.isArray(plugins)) {
25
+ return plugins.reduce((acc, plugin) => {
26
+ if (typeof plugin === "string") {
27
+ acc[plugin] = {};
28
+ }
29
+ if (typeof plugin === "object" && plugin.name) {
30
+ acc[plugin.name] = plugin.options || {};
31
+ }
32
+ return acc;
33
+ }, {});
34
+ }
35
+ return plugins;
36
+ });
37
+ }
38
+ initialize() {
39
+ if (!this.mutationObserver) {
40
+ this.mutationObserver = new MutationObserver((mutations) => {
41
+ this.onMutations(mutations);
42
+ });
54
43
  }
55
- initialize() {
56
- if (!this.mutationObserver) {
57
- this.mutationObserver = new MutationObserver((mutations) => {
58
- this.onMutations(mutations);
59
- });
60
- }
44
+ }
45
+ connect() {
46
+ if (this.selectElement) {
47
+ this.originalOptions = this.createOptionsDataStructure(this.selectElement);
61
48
  }
62
- connect() {
63
- if (this.selectElement) {
64
- this.originalOptions = this.createOptionsDataStructure(this.selectElement);
65
- }
66
- this.initializeTomSelect();
49
+ this.initializeTomSelect();
50
+ }
51
+ initializeTomSelect() {
52
+ if (this.selectElement) {
53
+ this.selectElement.setAttribute("data-skip-morph", "");
67
54
  }
68
- initializeTomSelect() {
69
- if (this.selectElement) {
70
- this.selectElement.setAttribute('data-skip-morph', '');
71
- }
72
- if (this.urlValue) {
73
- this.tomSelect = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createAutocompleteWithRemoteData).call(this, this.urlValue, this.hasMinCharactersValue ? this.minCharactersValue : null);
74
- return;
75
- }
76
- if (this.optionsAsHtmlValue) {
77
- this.tomSelect = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createAutocompleteWithHtmlContents).call(this);
78
- return;
79
- }
80
- this.tomSelect = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createAutocomplete).call(this);
81
- this.startMutationObserver();
55
+ if (this.urlValue) {
56
+ this.tomSelect = __privateMethod(this, _instances, createAutocompleteWithRemoteData_fn).call(this, this.urlValue, this.hasMinCharactersValue ? this.minCharactersValue : null);
57
+ return;
82
58
  }
83
- disconnect() {
84
- this.stopMutationObserver();
85
- let currentSelectedValues = [];
86
- if (this.selectElement) {
87
- if (this.selectElement.multiple) {
88
- currentSelectedValues = Array.from(this.selectElement.options)
89
- .filter((option) => option.selected)
90
- .map((option) => option.value);
91
- }
92
- else {
93
- currentSelectedValues = [this.selectElement.value];
94
- }
95
- }
96
- this.tomSelect.destroy();
97
- if (this.selectElement) {
98
- if (this.selectElement.multiple) {
99
- Array.from(this.selectElement.options).forEach((option) => {
100
- option.selected = currentSelectedValues.includes(option.value);
101
- });
102
- }
103
- else {
104
- this.selectElement.value = currentSelectedValues[0];
105
- }
106
- }
59
+ if (this.optionsAsHtmlValue) {
60
+ this.tomSelect = __privateMethod(this, _instances, createAutocompleteWithHtmlContents_fn).call(this);
61
+ return;
107
62
  }
108
- urlValueChanged() {
109
- this.resetTomSelect();
63
+ this.tomSelect = __privateMethod(this, _instances, createAutocomplete_fn).call(this);
64
+ this.startMutationObserver();
65
+ }
66
+ disconnect() {
67
+ this.stopMutationObserver();
68
+ let currentSelectedValues = [];
69
+ if (this.selectElement) {
70
+ if (this.selectElement.multiple) {
71
+ currentSelectedValues = Array.from(this.selectElement.options).filter((option) => option.selected).map((option) => option.value);
72
+ } else {
73
+ currentSelectedValues = [this.selectElement.value];
74
+ }
110
75
  }
111
- getMaxOptions() {
112
- return this.selectElement ? this.selectElement.options.length : 50;
76
+ this.tomSelect.destroy();
77
+ if (this.selectElement) {
78
+ if (this.selectElement.multiple) {
79
+ Array.from(this.selectElement.options).forEach((option) => {
80
+ option.selected = currentSelectedValues.includes(option.value);
81
+ });
82
+ } else {
83
+ this.selectElement.value = currentSelectedValues[0];
84
+ }
113
85
  }
114
- get selectElement() {
115
- if (!(this.element instanceof HTMLSelectElement)) {
116
- return null;
117
- }
118
- return this.element;
86
+ }
87
+ urlValueChanged() {
88
+ this.resetTomSelect();
89
+ }
90
+ getMaxOptions() {
91
+ return this.selectElement ? this.selectElement.options.length : 50;
92
+ }
93
+ /**
94
+ * Returns the element, but only if it's a select element.
95
+ */
96
+ get selectElement() {
97
+ if (!(this.element instanceof HTMLSelectElement)) {
98
+ return null;
119
99
  }
120
- get formElement() {
121
- if (!(this.element instanceof HTMLInputElement) && !(this.element instanceof HTMLSelectElement)) {
122
- throw new Error('Autocomplete Stimulus controller can only be used on an <input> or <select>.');
123
- }
124
- return this.element;
100
+ return this.element;
101
+ }
102
+ /**
103
+ * Getter to help typing.
104
+ */
105
+ get formElement() {
106
+ if (!(this.element instanceof HTMLInputElement) && !(this.element instanceof HTMLSelectElement)) {
107
+ throw new Error("Autocomplete Stimulus controller can only be used on an <input> or <select>.");
125
108
  }
126
- dispatchEvent(name, payload) {
127
- this.dispatch(name, { detail: payload, prefix: 'autocomplete' });
109
+ return this.element;
110
+ }
111
+ dispatchEvent(name, payload) {
112
+ this.dispatch(name, { detail: payload, prefix: "autocomplete" });
113
+ }
114
+ get preload() {
115
+ if (!this.hasPreloadValue) {
116
+ return "focus";
128
117
  }
129
- get preload() {
130
- if (!this.hasPreloadValue) {
131
- return 'focus';
132
- }
133
- if (this.preloadValue === 'false') {
134
- return false;
135
- }
136
- if (this.preloadValue === 'true') {
137
- return true;
138
- }
139
- return this.preloadValue;
118
+ if (this.preloadValue === "false") {
119
+ return false;
140
120
  }
141
- resetTomSelect() {
142
- if (this.tomSelect) {
143
- this.dispatchEvent('before-reset', { tomSelect: this.tomSelect });
144
- this.stopMutationObserver();
145
- const currentHtml = this.element.innerHTML;
146
- const currentValue = this.tomSelect.getValue();
147
- this.tomSelect.destroy();
148
- this.element.innerHTML = currentHtml;
149
- this.initializeTomSelect();
150
- this.tomSelect.setValue(currentValue);
151
- }
121
+ if (this.preloadValue === "true") {
122
+ return true;
152
123
  }
153
- changeTomSelectDisabledState(isDisabled) {
154
- this.stopMutationObserver();
155
- if (isDisabled) {
156
- this.tomSelect.disable();
157
- }
158
- else {
159
- this.tomSelect.enable();
160
- }
161
- this.startMutationObserver();
124
+ return this.preloadValue;
125
+ }
126
+ resetTomSelect() {
127
+ if (this.tomSelect) {
128
+ this.dispatchEvent("before-reset", { tomSelect: this.tomSelect });
129
+ this.stopMutationObserver();
130
+ const currentHtml = this.element.innerHTML;
131
+ const currentValue = this.tomSelect.getValue();
132
+ this.tomSelect.destroy();
133
+ this.element.innerHTML = currentHtml;
134
+ this.initializeTomSelect();
135
+ this.tomSelect.setValue(currentValue);
162
136
  }
163
- startMutationObserver() {
164
- if (!this.isObserving && this.mutationObserver) {
165
- this.mutationObserver.observe(this.element, {
166
- childList: true,
167
- subtree: true,
168
- attributes: true,
169
- characterData: true,
170
- attributeOldValue: true,
171
- });
172
- this.isObserving = true;
173
- }
137
+ }
138
+ changeTomSelectDisabledState(isDisabled) {
139
+ this.stopMutationObserver();
140
+ if (isDisabled) {
141
+ this.tomSelect.disable();
142
+ } else {
143
+ this.tomSelect.enable();
174
144
  }
175
- stopMutationObserver() {
176
- if (this.isObserving && this.mutationObserver) {
177
- this.mutationObserver.disconnect();
178
- this.isObserving = false;
179
- }
145
+ this.startMutationObserver();
146
+ }
147
+ startMutationObserver() {
148
+ if (!this.isObserving && this.mutationObserver) {
149
+ this.mutationObserver.observe(this.element, {
150
+ childList: true,
151
+ subtree: true,
152
+ attributes: true,
153
+ characterData: true,
154
+ attributeOldValue: true
155
+ });
156
+ this.isObserving = true;
157
+ }
158
+ }
159
+ stopMutationObserver() {
160
+ if (this.isObserving && this.mutationObserver) {
161
+ this.mutationObserver.disconnect();
162
+ this.isObserving = false;
180
163
  }
181
- onMutations(mutations) {
182
- let changeDisabledState = false;
183
- let requireReset = false;
184
- mutations.forEach((mutation) => {
185
- switch (mutation.type) {
186
- case 'attributes':
187
- if (mutation.target === this.element && mutation.attributeName === 'disabled') {
188
- changeDisabledState = true;
189
- break;
190
- }
191
- if (mutation.target === this.element && mutation.attributeName === 'multiple') {
192
- const isNowMultiple = this.element.hasAttribute('multiple');
193
- const wasMultiple = mutation.oldValue === 'multiple';
194
- if (isNowMultiple !== wasMultiple) {
195
- requireReset = true;
196
- }
197
- break;
198
- }
199
- break;
164
+ }
165
+ onMutations(mutations) {
166
+ let changeDisabledState = false;
167
+ let requireReset = false;
168
+ mutations.forEach((mutation) => {
169
+ switch (mutation.type) {
170
+ case "attributes":
171
+ if (mutation.target === this.element && mutation.attributeName === "disabled") {
172
+ changeDisabledState = true;
173
+ break;
174
+ }
175
+ if (mutation.target === this.element && mutation.attributeName === "multiple") {
176
+ const isNowMultiple = this.element.hasAttribute("multiple");
177
+ const wasMultiple = mutation.oldValue === "multiple";
178
+ if (isNowMultiple !== wasMultiple) {
179
+ requireReset = true;
200
180
  }
201
- });
202
- const newOptions = this.selectElement ? this.createOptionsDataStructure(this.selectElement) : [];
203
- const areOptionsEquivalent = this.areOptionsEquivalent(newOptions);
204
- if (!areOptionsEquivalent || requireReset) {
205
- this.originalOptions = newOptions;
206
- this.resetTomSelect();
207
- }
208
- if (changeDisabledState) {
209
- this.changeTomSelectDisabledState(this.formElement.disabled);
210
- }
181
+ break;
182
+ }
183
+ break;
184
+ }
185
+ });
186
+ const newOptions = this.selectElement ? this.createOptionsDataStructure(this.selectElement) : [];
187
+ const areOptionsEquivalent = this.areOptionsEquivalent(newOptions);
188
+ if (!areOptionsEquivalent || requireReset) {
189
+ this.originalOptions = newOptions;
190
+ this.resetTomSelect();
211
191
  }
212
- createOptionsDataStructure(selectElement) {
213
- return Array.from(selectElement.options).map((option) => {
214
- return {
215
- value: option.value,
216
- text: option.text,
217
- };
218
- });
192
+ if (changeDisabledState) {
193
+ this.changeTomSelectDisabledState(this.formElement.disabled);
219
194
  }
220
- areOptionsEquivalent(newOptions) {
221
- const filteredOriginalOptions = this.originalOptions.filter((option) => option.value !== '');
222
- const filteredNewOptions = newOptions.filter((option) => option.value !== '');
223
- const originalPlaceholderOption = this.originalOptions.find((option) => option.value === '');
224
- const newPlaceholderOption = newOptions.find((option) => option.value === '');
225
- if (originalPlaceholderOption &&
226
- newPlaceholderOption &&
227
- originalPlaceholderOption.text !== newPlaceholderOption.text) {
228
- return false;
229
- }
230
- if (filteredOriginalOptions.length !== filteredNewOptions.length) {
231
- return false;
232
- }
233
- const normalizeOption = (option) => `${option.value}-${option.text}`;
234
- const originalOptionsSet = new Set(filteredOriginalOptions.map(normalizeOption));
235
- const newOptionsSet = new Set(filteredNewOptions.map(normalizeOption));
236
- return (originalOptionsSet.size === newOptionsSet.size &&
237
- [...originalOptionsSet].every((option) => newOptionsSet.has(option)));
195
+ }
196
+ createOptionsDataStructure(selectElement) {
197
+ return Array.from(selectElement.options).map((option) => {
198
+ return {
199
+ value: option.value,
200
+ text: option.text
201
+ };
202
+ });
203
+ }
204
+ areOptionsEquivalent(newOptions) {
205
+ const filteredOriginalOptions = this.originalOptions.filter((option) => option.value !== "");
206
+ const filteredNewOptions = newOptions.filter((option) => option.value !== "");
207
+ const originalPlaceholderOption = this.originalOptions.find((option) => option.value === "");
208
+ const newPlaceholderOption = newOptions.find((option) => option.value === "");
209
+ if (originalPlaceholderOption && newPlaceholderOption && originalPlaceholderOption.text !== newPlaceholderOption.text) {
210
+ return false;
238
211
  }
239
- }
240
- _default_1_normalizePluginsToHash = new WeakMap(), _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _default_1_getCommonConfig() {
241
- const plugins = {};
242
- const isMultiple = !this.selectElement || this.selectElement.multiple;
243
- if (!this.formElement.disabled && !isMultiple) {
244
- plugins.clear_button = { title: '' };
212
+ if (filteredOriginalOptions.length !== filteredNewOptions.length) {
213
+ return false;
245
214
  }
246
- if (isMultiple) {
247
- plugins.remove_button = { title: '' };
215
+ const normalizeOption = (option) => `${option.value}-${option.text}`;
216
+ const originalOptionsSet = new Set(filteredOriginalOptions.map(normalizeOption));
217
+ const newOptionsSet = new Set(filteredNewOptions.map(normalizeOption));
218
+ return originalOptionsSet.size === newOptionsSet.size && [...originalOptionsSet].every((option) => newOptionsSet.has(option));
219
+ }
220
+ };
221
+ _instances = new WeakSet();
222
+ getCommonConfig_fn = function() {
223
+ const plugins = {};
224
+ const isMultiple = !this.selectElement || this.selectElement.multiple;
225
+ if (!this.formElement.disabled && !isMultiple) {
226
+ plugins.clear_button = { title: "" };
227
+ }
228
+ if (isMultiple) {
229
+ plugins.remove_button = { title: "" };
230
+ }
231
+ if (this.urlValue) {
232
+ plugins.virtual_scroll = {};
233
+ }
234
+ const render = {
235
+ no_results: () => {
236
+ return `<div class="no-results">${this.noResultsFoundTextValue}</div>`;
237
+ },
238
+ option_create: (data, escapeData) => {
239
+ return `<div class="create">${this.createOptionTextValue.replace("%placeholder%", `<strong>${escapeData(data.input)}</strong>`)}</div>`;
248
240
  }
249
- if (this.urlValue) {
250
- plugins.virtual_scroll = {};
241
+ };
242
+ const config = {
243
+ render,
244
+ plugins,
245
+ // clear the text input after selecting a value
246
+ onItemAdd: () => {
247
+ this.tomSelect.setTextboxValue("");
248
+ },
249
+ closeAfterSelect: true,
250
+ // fix positioning (in the dropdown) of options added through addOption()
251
+ onOptionAdd: (value, data) => {
252
+ let parentElement = this.tomSelect.input;
253
+ let optgroupData = null;
254
+ const optgroup = data[this.tomSelect.settings.optgroupField];
255
+ if (optgroup && this.tomSelect.optgroups) {
256
+ optgroupData = this.tomSelect.optgroups[optgroup];
257
+ if (optgroupData) {
258
+ const optgroupElement = parentElement.querySelector(`optgroup[label="${optgroupData.label}"]`);
259
+ if (optgroupElement) {
260
+ parentElement = optgroupElement;
261
+ }
262
+ }
263
+ }
264
+ const optionElement = document.createElement("option");
265
+ optionElement.value = value;
266
+ optionElement.text = data[this.tomSelect.settings.labelField];
267
+ const optionOrder = data.$order;
268
+ let orderedOption = null;
269
+ for (const [, tomSelectOption] of Object.entries(this.tomSelect.options)) {
270
+ if (tomSelectOption.$order === optionOrder) {
271
+ orderedOption = parentElement.querySelector(
272
+ `:scope > option[value="${CSS.escape(tomSelectOption[this.tomSelect.settings.valueField])}"]`
273
+ );
274
+ break;
275
+ }
276
+ }
277
+ if (orderedOption) {
278
+ orderedOption.insertAdjacentElement("afterend", optionElement);
279
+ } else if (optionOrder >= 0) {
280
+ parentElement.append(optionElement);
281
+ } else {
282
+ parentElement.prepend(optionElement);
283
+ }
251
284
  }
252
- const render = {
253
- no_results: () => {
254
- return `<div class="no-results">${this.noResultsFoundTextValue}</div>`;
255
- },
256
- option_create: (data, escapeData) => {
257
- return `<div class="create">${this.createOptionTextValue.replace('%placeholder%', `<strong>${escapeData(data.input)}</strong>`)}</div>`;
258
- },
259
- };
260
- const config = {
261
- render,
262
- plugins,
263
- onItemAdd: () => {
264
- this.tomSelect.setTextboxValue('');
265
- },
266
- closeAfterSelect: true,
267
- onOptionAdd: (value, data) => {
268
- let parentElement = this.tomSelect.input;
269
- let optgroupData = null;
270
- const optgroup = data[this.tomSelect.settings.optgroupField];
271
- if (optgroup && this.tomSelect.optgroups) {
272
- optgroupData = this.tomSelect.optgroups[optgroup];
273
- if (optgroupData) {
274
- const optgroupElement = parentElement.querySelector(`optgroup[label="${optgroupData.label}"]`);
275
- if (optgroupElement) {
276
- parentElement = optgroupElement;
277
- }
278
- }
279
- }
280
- const optionElement = document.createElement('option');
281
- optionElement.value = value;
282
- optionElement.text = data[this.tomSelect.settings.labelField];
283
- const optionOrder = data.$order;
284
- let orderedOption = null;
285
- for (const [, tomSelectOption] of Object.entries(this.tomSelect.options)) {
286
- if (tomSelectOption.$order === optionOrder) {
287
- orderedOption = parentElement.querySelector(`:scope > option[value="${CSS.escape(tomSelectOption[this.tomSelect.settings.valueField])}"]`);
288
- break;
289
- }
290
- }
291
- if (orderedOption) {
292
- orderedOption.insertAdjacentElement('afterend', optionElement);
293
- }
294
- else if (optionOrder >= 0) {
295
- parentElement.append(optionElement);
296
- }
297
- else {
298
- parentElement.prepend(optionElement);
299
- }
300
- },
301
- };
302
- if (!this.selectElement && !this.urlValue) {
303
- config.shouldLoad = () => false;
285
+ };
286
+ if (!this.selectElement && !this.urlValue) {
287
+ config.shouldLoad = () => false;
288
+ }
289
+ return __privateMethod(this, _instances, mergeConfigs_fn).call(this, config, this.tomSelectOptionsValue);
290
+ };
291
+ createAutocomplete_fn = function() {
292
+ const config = __privateMethod(this, _instances, mergeConfigs_fn).call(this, __privateMethod(this, _instances, getCommonConfig_fn).call(this), {
293
+ maxOptions: this.getMaxOptions()
294
+ });
295
+ return __privateMethod(this, _instances, createTomSelect_fn).call(this, config);
296
+ };
297
+ createAutocompleteWithHtmlContents_fn = function() {
298
+ const commonConfig = __privateMethod(this, _instances, getCommonConfig_fn).call(this);
299
+ const labelField = commonConfig.labelField ?? "text";
300
+ const config = __privateMethod(this, _instances, mergeConfigs_fn).call(this, commonConfig, {
301
+ maxOptions: this.getMaxOptions(),
302
+ score: (search) => {
303
+ const scoringFunction = this.tomSelect.getScoreFunction(search);
304
+ return (item) => {
305
+ return scoringFunction({ ...item, text: __privateMethod(this, _instances, stripTags_fn).call(this, item[labelField]) });
306
+ };
307
+ },
308
+ render: {
309
+ item: (item) => `<div>${item[labelField]}</div>`,
310
+ option: (item) => `<div>${item[labelField]}</div>`
304
311
  }
305
- return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeConfigs).call(this, config, this.tomSelectOptionsValue);
306
- }, _default_1_createAutocomplete = function _default_1_createAutocomplete() {
307
- const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeConfigs).call(this, __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this), {
308
- maxOptions: this.getMaxOptions(),
309
- });
310
- return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
311
- }, _default_1_createAutocompleteWithHtmlContents = function _default_1_createAutocompleteWithHtmlContents() {
312
- const commonConfig = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this);
313
- const labelField = commonConfig.labelField ?? 'text';
314
- const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeConfigs).call(this, commonConfig, {
315
- maxOptions: this.getMaxOptions(),
316
- score: (search) => {
317
- const scoringFunction = this.tomSelect.getScoreFunction(search);
318
- return (item) => {
319
- return scoringFunction({ ...item, text: __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_stripTags).call(this, item[labelField]) });
320
- };
321
- },
322
- render: {
323
- item: (item) => `<div>${item[labelField]}</div>`,
324
- option: (item) => `<div>${item[labelField]}</div>`,
325
- },
326
- });
327
- return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
328
- }, _default_1_createAutocompleteWithRemoteData = function _default_1_createAutocompleteWithRemoteData(autocompleteEndpointUrl, minCharacterLength) {
329
- const commonConfig = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this);
330
- const labelField = commonConfig.labelField ?? 'text';
331
- const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeConfigs).call(this, commonConfig, {
332
- firstUrl: (query) => {
333
- const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
334
- return `${autocompleteEndpointUrl}${separator}query=${encodeURIComponent(query)}`;
335
- },
336
- load: function (query, callback) {
337
- const url = this.getUrl(query);
338
- fetch(url)
339
- .then((response) => response.json())
340
- .then((json) => {
341
- this.setNextUrl(query, json.next_page);
342
- callback(json.results.options || json.results, json.results.optgroups || []);
343
- })
344
- .catch(() => callback([], []));
345
- },
346
- shouldLoad: (query) => {
347
- if (null !== minCharacterLength) {
348
- return query.length >= minCharacterLength;
349
- }
350
- if (this.hasLoadedChoicesPreviously) {
351
- return true;
352
- }
353
- if (query.length > 0) {
354
- this.hasLoadedChoicesPreviously = true;
355
- }
356
- return query.length >= 3;
357
- },
358
- optgroupField: 'group_by',
359
- score: (search) => (item) => 1,
360
- render: {
361
- option: (item) => `<div>${item[labelField]}</div>`,
362
- item: (item) => `<div>${item[labelField]}</div>`,
363
- loading_more: () => {
364
- return `<div class="loading-more-results">${this.loadingMoreTextValue}</div>`;
365
- },
366
- no_more_results: () => {
367
- return `<div class="no-more-results">${this.noMoreResultsTextValue}</div>`;
368
- },
369
- no_results: () => {
370
- return `<div class="no-results">${this.noResultsFoundTextValue}</div>`;
371
- },
372
- option_create: (data, escapeData) => {
373
- return `<div class="create">${this.createOptionTextValue.replace('%placeholder%', `<strong>${escapeData(data.input)}</strong>`)}</div>`;
374
- },
375
- },
376
- preload: this.preload,
377
- });
378
- return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
379
- }, _default_1_stripTags = function _default_1_stripTags(string) {
380
- return string.replace(/(<([^>]+)>)/gi, '');
381
- }, _default_1_mergeConfigs = function _default_1_mergeConfigs(config1, config2) {
382
- return {
383
- ...config1,
384
- ...config2,
385
- plugins: {
386
- ...__classPrivateFieldGet(this, _default_1_normalizePluginsToHash, "f").call(this, config1.plugins || {}),
387
- ...__classPrivateFieldGet(this, _default_1_normalizePluginsToHash, "f").call(this, config2.plugins || {}),
388
- },
389
- };
390
- }, _default_1_createTomSelect = function _default_1_createTomSelect(options) {
391
- const preConnectPayload = { options };
392
- this.dispatchEvent('pre-connect', preConnectPayload);
393
- const tomSelect = new TomSelect(this.formElement, options);
394
- const connectPayload = { tomSelect, options };
395
- this.dispatchEvent('connect', connectPayload);
396
- return tomSelect;
312
+ });
313
+ return __privateMethod(this, _instances, createTomSelect_fn).call(this, config);
397
314
  };
398
- default_1.values = {
399
- url: String,
400
- optionsAsHtml: Boolean,
401
- loadingMoreText: String,
402
- noResultsFoundText: String,
403
- noMoreResultsText: String,
404
- createOptionText: String,
405
- minCharacters: Number,
406
- tomSelectOptions: Object,
407
- preload: String,
315
+ createAutocompleteWithRemoteData_fn = function(autocompleteEndpointUrl, minCharacterLength) {
316
+ const commonConfig = __privateMethod(this, _instances, getCommonConfig_fn).call(this);
317
+ const labelField = commonConfig.labelField ?? "text";
318
+ const config = __privateMethod(this, _instances, mergeConfigs_fn).call(this, commonConfig, {
319
+ firstUrl: (query) => {
320
+ const separator = autocompleteEndpointUrl.includes("?") ? "&" : "?";
321
+ return `${autocompleteEndpointUrl}${separator}query=${encodeURIComponent(query)}`;
322
+ },
323
+ // VERY IMPORTANT: use 'function (query, callback) { ... }' instead of the
324
+ // '(query, callback) => { ... }' syntax because, otherwise,
325
+ // the 'this.XXX' calls inside this method fail
326
+ load: function(query, callback) {
327
+ const url = this.getUrl(query);
328
+ fetch(url).then((response) => response.json()).then((json) => {
329
+ this.setNextUrl(query, json.next_page);
330
+ callback(json.results.options || json.results, json.results.optgroups || []);
331
+ }).catch(() => callback([], []));
332
+ },
333
+ shouldLoad: (query) => {
334
+ if (null !== minCharacterLength) {
335
+ return query.length >= minCharacterLength;
336
+ }
337
+ if (this.hasLoadedChoicesPreviously) {
338
+ return true;
339
+ }
340
+ if (query.length > 0) {
341
+ this.hasLoadedChoicesPreviously = true;
342
+ }
343
+ return query.length >= 3;
344
+ },
345
+ optgroupField: "group_by",
346
+ // avoid extra filtering after results are returned
347
+ score: (search) => (item) => 1,
348
+ render: {
349
+ option: (item) => `<div>${item[labelField]}</div>`,
350
+ item: (item) => `<div>${item[labelField]}</div>`,
351
+ loading_more: () => {
352
+ return `<div class="loading-more-results">${this.loadingMoreTextValue}</div>`;
353
+ },
354
+ no_more_results: () => {
355
+ return `<div class="no-more-results">${this.noMoreResultsTextValue}</div>`;
356
+ },
357
+ no_results: () => {
358
+ return `<div class="no-results">${this.noResultsFoundTextValue}</div>`;
359
+ },
360
+ option_create: (data, escapeData) => {
361
+ return `<div class="create">${this.createOptionTextValue.replace("%placeholder%", `<strong>${escapeData(data.input)}</strong>`)}</div>`;
362
+ }
363
+ },
364
+ preload: this.preload
365
+ });
366
+ return __privateMethod(this, _instances, createTomSelect_fn).call(this, config);
367
+ };
368
+ stripTags_fn = function(string) {
369
+ return string.replace(/(<([^>]+)>)/gi, "");
370
+ };
371
+ mergeConfigs_fn = function(config1, config2) {
372
+ return {
373
+ ...config1,
374
+ ...config2,
375
+ // Plugins from both configs should be merged together.
376
+ plugins: __privateMethod(this, _instances, normalizePlugins_fn).call(this, {
377
+ ...__privateGet(this, _normalizePluginsToHash).call(this, config1.plugins || {}),
378
+ ...__privateGet(this, _normalizePluginsToHash).call(this, config2.plugins || {})
379
+ })
380
+ };
381
+ };
382
+ _normalizePluginsToHash = new WeakMap();
383
+ normalizePlugins_fn = function(plugins) {
384
+ return Object.entries(plugins).reduce((acc, [pluginName, pluginOptions]) => {
385
+ if (pluginOptions !== false) {
386
+ acc[pluginName] = pluginOptions;
387
+ }
388
+ return acc;
389
+ }, {});
390
+ };
391
+ createTomSelect_fn = function(options) {
392
+ const preConnectPayload = { options };
393
+ this.dispatchEvent("pre-connect", preConnectPayload);
394
+ const tomSelect = new TomSelect(this.formElement, options);
395
+ const connectPayload = { tomSelect, options };
396
+ this.dispatchEvent("connect", connectPayload);
397
+ return tomSelect;
398
+ };
399
+ controller_default.values = {
400
+ url: String,
401
+ optionsAsHtml: Boolean,
402
+ loadingMoreText: String,
403
+ noResultsFoundText: String,
404
+ noMoreResultsText: String,
405
+ createOptionText: String,
406
+ minCharacters: Number,
407
+ tomSelectOptions: Object,
408
+ preload: String
409
+ };
410
+ export {
411
+ controller_default as default
408
412
  };
409
-
410
- export { default_1 as default };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@symfony/ux-autocomplete",
3
3
  "description": "JavaScript Autocomplete functionality for Symfony",
4
4
  "license": "MIT",
5
- "version": "2.27.0",
5
+ "version": "2.28.1",
6
6
  "keywords": [
7
7
  "symfony-ux"
8
8
  ],
@@ -14,13 +14,6 @@
14
14
  ],
15
15
  "main": "dist/controller.js",
16
16
  "types": "dist/controller.d.ts",
17
- "scripts": {
18
- "build": "node ../../../bin/build_package.js .",
19
- "watch": "node ../../../bin/build_package.js . --watch",
20
- "test": "../../../bin/test_package.sh .",
21
- "check": "biome check",
22
- "ci": "biome ci"
23
- },
24
17
  "symfony": {
25
18
  "controllers": {
26
19
  "autocomplete": {
@@ -37,7 +30,10 @@
37
30
  },
38
31
  "importmap": {
39
32
  "@hotwired/stimulus": "^3.0.0",
40
- "tom-select": "^2.2.2"
33
+ "tom-select": "^2.2.2",
34
+ "tom-select/dist/css/tom-select.default.css": "^2.2.2",
35
+ "tom-select/dist/css/tom-select.bootstrap4.css": "^2.2.2",
36
+ "tom-select/dist/css/tom-select.bootstrap5.css": "^2.2.2"
41
37
  }
42
38
  },
43
39
  "peerDependencies": {
@@ -46,7 +42,22 @@
46
42
  },
47
43
  "devDependencies": {
48
44
  "@hotwired/stimulus": "^3.0.0",
45
+ "@testing-library/dom": "^10.4.0",
46
+ "@testing-library/jest-dom": "^6.6.3",
47
+ "@testing-library/user-event": "^14.6.1",
48
+ "jsdom": "^26.1.0",
49
49
  "tom-select": "^2.2.2",
50
+ "tslib": "^2.8.1",
51
+ "tsx": "^4.20.3",
52
+ "typescript": "^5.8.3",
53
+ "vitest": "^3.2.4",
50
54
  "vitest-fetch-mock": "^0.2.2"
55
+ },
56
+ "scripts": {
57
+ "build": "tsx ../../../bin/build_package.ts .",
58
+ "watch": "tsx ../../../bin/build_package.ts . --watch",
59
+ "test": "../../../bin/test_package.sh .",
60
+ "check": "biome check",
61
+ "ci": "biome ci"
51
62
  }
52
63
  }