slim-select 3.4.2 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/classes.d.ts +46 -0
  2. package/dist/helpers.d.ts +5 -0
  3. package/dist/index.d.ts +53 -318
  4. package/dist/index.umd.d.ts +2 -0
  5. package/dist/react/index.d.ts +4 -318
  6. package/dist/react/index.js +1459 -1696
  7. package/dist/react/index.umd.js +2 -2
  8. package/dist/react/react.d.ts +17 -0
  9. package/dist/react/react.test.d.ts +1 -0
  10. package/dist/react/slim-select/react/index.d.ts +4 -0
  11. package/dist/render.d.ts +88 -0
  12. package/dist/select.d.ts +38 -0
  13. package/dist/settings.d.ts +39 -0
  14. package/dist/slimselect.cjs.js +2 -2
  15. package/dist/slimselect.cjs.js.map +1 -1
  16. package/dist/slimselect.css +1 -1
  17. package/dist/slimselect.css.map +1 -1
  18. package/dist/slimselect.es.js +1233 -1384
  19. package/dist/slimselect.es.js.map +1 -1
  20. package/dist/slimselect.iife.js +2 -2
  21. package/dist/slimselect.iife.js.map +1 -1
  22. package/dist/slimselect.js +2 -2
  23. package/dist/slimselect.js.map +1 -1
  24. package/dist/src/docs/main.d.ts +0 -0
  25. package/dist/src/docs/router.d.ts +2 -0
  26. package/dist/src/docs/store.d.ts +12 -0
  27. package/dist/store.d.ts +53 -0
  28. package/dist/vue/index.d.ts +4 -318
  29. package/dist/vue/index.js +1335 -1503
  30. package/dist/vue/index.umd.js +1 -1
  31. package/dist/vue/slim-select/vue/index.d.ts +4 -0
  32. package/package.json +30 -36
  33. package/src/slim-select/slimselect.scss +34 -5
  34. package/.nvmrc +0 -1
  35. package/.prettierignore +0 -1
  36. package/.prettierrc +0 -7
  37. package/CODE_OF_CONDUCT.md +0 -46
  38. package/CONTRIBUTING.md +0 -1
  39. package/cdn.html +0 -21
  40. package/docs.go +0 -12
  41. package/example.html +0 -25
  42. package/index.html +0 -76
  43. package/release.js +0 -191
  44. package/sitemap.js +0 -108
  45. package/src/slim-select/accessibility.test.ts +0 -782
  46. package/src/slim-select/classes.test.ts +0 -73
  47. package/src/slim-select/classes.ts +0 -117
  48. package/src/slim-select/helpers.test.ts +0 -162
  49. package/src/slim-select/helpers.ts +0 -61
  50. package/src/slim-select/index.test.ts +0 -1356
  51. package/src/slim-select/index.ts +0 -594
  52. package/src/slim-select/index.umd.ts +0 -8
  53. package/src/slim-select/react/index.tsx +0 -9
  54. package/src/slim-select/react/react.test.tsx +0 -498
  55. package/src/slim-select/react/react.tsx +0 -209
  56. package/src/slim-select/render.test.ts +0 -1877
  57. package/src/slim-select/render.ts +0 -1765
  58. package/src/slim-select/select.test.ts +0 -683
  59. package/src/slim-select/select.ts +0 -659
  60. package/src/slim-select/settings.test.ts +0 -285
  61. package/src/slim-select/settings.ts +0 -78
  62. package/src/slim-select/store.test.ts +0 -1007
  63. package/src/slim-select/store.ts +0 -433
  64. package/src/slim-select/vue/index.ts +0 -9
  65. package/src/slim-select/vue/vue.test.ts +0 -1091
  66. package/src/slim-select/vue/vue.vue +0 -224
  67. package/tsconfig.json +0 -26
  68. package/vite.config.docs.mts +0 -29
  69. package/vite.config.lib.es-cjs.ts +0 -40
  70. package/vite.config.lib.umd-iife.ts +0 -34
  71. package/vite.config.react.mts +0 -41
  72. package/vite.config.vue.mts +0 -40
  73. package/vitest.config.ts +0 -30
package/dist/vue/index.js CHANGED
@@ -1,1509 +1,1341 @@
1
- import { defineComponent as L, openBlock as D, createElementBlock as k, renderSlot as N } from "vue";
2
- class M {
3
- main;
4
- // Placeholder
5
- placeholder;
6
- // Values
7
- values;
8
- single;
9
- max;
10
- value;
11
- valueText;
12
- valueDelete;
13
- valueOut;
14
- // Deselect
15
- deselect;
16
- deselectPath;
17
- // Not a class but whatever
18
- // Arrow
19
- arrow;
20
- arrowClose;
21
- // Not a class but whatever
22
- arrowOpen;
23
- // Not a class but whatever
24
- // Content
25
- content;
26
- contentOpen;
27
- dirAbove;
28
- dirBelow;
29
- // Search
30
- search;
31
- searchHighlighter;
32
- searching;
33
- addable;
34
- addablePath;
35
- // Not a class but whatever
36
- // List optgroups/options
37
- list;
38
- // Optgroup
39
- optgroup;
40
- optgroupLabel;
41
- optgroupLabelText;
42
- optgroupActions;
43
- optgroupSelectAll;
44
- // optgroup select all
45
- optgroupSelectAllBox;
46
- // Not a class but whatever
47
- optgroupSelectAllCheck;
48
- // Not a class but whatever
49
- optgroupClosable;
50
- // Option
51
- option;
52
- optionDelete;
53
- // Not a class but whatever
54
- highlighted;
55
- // Misc
56
- mainOpen;
57
- close;
58
- selected;
59
- error;
60
- disabled;
61
- hide;
62
- constructor(e) {
63
- e || (e = {});
64
- let t = (s = "", i = "") => `${s} ${i}`.trim();
65
- this.main = t("ss-main", e.main), this.placeholder = t("ss-placeholder", e.placeholder), this.values = t("ss-values", e.values), this.single = t("ss-single", e.single), this.max = t("ss-max", e.max), this.value = t("ss-value", e.value), this.valueText = t("ss-value-text", e.valueText), this.valueDelete = t("ss-value-delete", e.valueDelete), this.valueOut = t("ss-value-out", e.valueOut), this.deselect = t("ss-deselect", e.deselect), this.deselectPath = e.deselectPath || "M10,10 L90,90 M10,90 L90,10", this.arrow = t("ss-arrow", e.arrow), this.arrowClose = e.arrowClose || "M10,30 L50,70 L90,30", this.arrowOpen = e.arrowOpen || "M10,70 L50,30 L90,70", this.content = t("ss-content", e.content), this.contentOpen = t("ss-open", e.contentOpen), this.dirAbove = t("ss-dir-above", e.dirAbove), this.dirBelow = t("ss-dir-below", e.dirBelow), this.search = t("ss-search", e.search), this.searchHighlighter = t("ss-search-highlight", e.searchHighlighter), this.searching = t("ss-searching", e.searching), this.addable = t("ss-addable", e.addable), this.addablePath = e.addablePath || "M50,10 L50,90 M10,50 L90,50", this.list = t("ss-list", e.list), this.optgroup = t("ss-optgroup", e.optgroup), this.optgroupLabel = t("ss-optgroup-label", e.optgroupLabel), this.optgroupLabelText = t("ss-optgroup-label-text", e.optgroupLabelText), this.optgroupActions = t("ss-optgroup-actions", e.optgroupActions), this.optgroupSelectAll = t("ss-selectall", e.optgroupSelectAll), this.optgroupSelectAllBox = e.optgroupSelectAllBox || "M60,10 L10,10 L10,90 L90,90 L90,50", this.optgroupSelectAllCheck = e.optgroupSelectAllCheck || "M30,45 L50,70 L90,10", this.optgroupClosable = t("ss-closable", e.optgroupClosable), this.option = t("ss-option", e.option), this.optionDelete = e.optionDelete || "M10,10 L90,90 M10,90 L90,10", this.highlighted = t("ss-highlighted", e.highlighted), this.mainOpen = t("ss-open", e.mainOpen), this.close = t("ss-close", e.close), this.selected = t("ss-selected", e.selected), this.error = t("ss-error", e.error), this.disabled = t("ss-disabled", e.disabled), this.hide = t("ss-hide", e.hide);
66
- }
67
- getFirst(e) {
68
- return this[e].split(" ")[0];
69
- }
70
- }
71
- function O() {
72
- return Math.random().toString(36).substring(2, 10);
73
- }
74
- function E(c, e) {
75
- function t(i, l) {
76
- return l && i && i.classList && i.classList.contains(l) || l && i && i.dataset && i.dataset.id && i.dataset.id === e ? i : null;
77
- }
78
- function s(i, l) {
79
- return !i || i === document ? null : t(i, l) ? i : s(i.parentNode, l);
80
- }
81
- return t(c, e) || s(c, e);
82
- }
83
- function S(c, e = 50, t = !1) {
84
- let s;
85
- return function(...i) {
86
- const l = self, n = () => {
87
- s = null, t || c.apply(l, i);
88
- }, a = t && !s;
89
- clearTimeout(s), s = setTimeout(n, e), a && c.apply(l, i);
90
- };
91
- }
92
- function y(c, e) {
93
- return JSON.stringify(c) === JSON.stringify(e);
94
- }
95
- function P(c) {
96
- const e = c.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (t) => "-" + t.toLowerCase());
97
- return c[0] === c[0].toUpperCase() ? e.substring(1) : e;
98
- }
99
- class p {
100
- id;
101
- value;
102
- text;
103
- html;
104
- defaultSelected;
105
- selected;
106
- display;
107
- disabled;
108
- placeholder;
109
- class;
110
- style;
111
- data;
112
- mandatory;
113
- constructor(e) {
114
- this.id = !e.id || e.id === "" ? O() : e.id, this.value = e.value === void 0 ? e.text || "" : e.value || "", this.text = e.text || "", this.html = e.html || "", this.defaultSelected = e.defaultSelected !== void 0 ? e.defaultSelected : !1, this.selected = e.selected !== void 0 ? e.selected : !1, this.display = e.display !== void 0 ? e.display : !0, this.disabled = e.disabled !== void 0 ? e.disabled : !1, this.mandatory = e.mandatory !== void 0 ? e.mandatory : !1, this.placeholder = e.placeholder !== void 0 ? e.placeholder : !1, this.class = e.class || "", this.style = e.style || "", this.data = e.data || {};
115
- }
1
+ import { createElementBlock as e, defineComponent as t, openBlock as n, renderSlot as r } from "vue";
2
+ //#region src/slim-select/classes.ts
3
+ var i = class {
4
+ main;
5
+ placeholder;
6
+ values;
7
+ single;
8
+ multiString;
9
+ max;
10
+ value;
11
+ valueText;
12
+ valueDelete;
13
+ valueOut;
14
+ deselect;
15
+ deselectPath;
16
+ arrow;
17
+ arrowClose;
18
+ arrowOpen;
19
+ content;
20
+ contentOpen;
21
+ dirAbove;
22
+ dirBelow;
23
+ search;
24
+ searchHighlighter;
25
+ searching;
26
+ addable;
27
+ addablePath;
28
+ list;
29
+ optgroup;
30
+ optgroupLabel;
31
+ optgroupLabelText;
32
+ optgroupActions;
33
+ optgroupSelectAll;
34
+ optgroupSelectAllBox;
35
+ optgroupSelectAllCheck;
36
+ optgroupClosable;
37
+ option;
38
+ optionDelete;
39
+ highlighted;
40
+ mainOpen;
41
+ close;
42
+ selected;
43
+ error;
44
+ disabled;
45
+ hide;
46
+ constructor(e) {
47
+ e ||= {};
48
+ let t = (e = "", t = "") => `${e} ${t}`.trim();
49
+ this.main = t("ss-main", e.main), this.placeholder = t("ss-placeholder", e.placeholder), this.values = t("ss-values", e.values), this.single = t("ss-single", e.single), this.multiString = t("ss-multi-string", e.multiString), this.max = t("ss-max", e.max), this.value = t("ss-value", e.value), this.valueText = t("ss-value-text", e.valueText), this.valueDelete = t("ss-value-delete", e.valueDelete), this.valueOut = t("ss-value-out", e.valueOut), this.deselect = t("ss-deselect", e.deselect), this.deselectPath = e.deselectPath || "M10,10 L90,90 M10,90 L90,10", this.arrow = t("ss-arrow", e.arrow), this.arrowClose = e.arrowClose || "M10,30 L50,70 L90,30", this.arrowOpen = e.arrowOpen || "M10,70 L50,30 L90,70", this.content = t("ss-content", e.content), this.contentOpen = t("ss-open", e.contentOpen), this.dirAbove = t("ss-dir-above", e.dirAbove), this.dirBelow = t("ss-dir-below", e.dirBelow), this.search = t("ss-search", e.search), this.searchHighlighter = t("ss-search-highlight", e.searchHighlighter), this.searching = t("ss-searching", e.searching), this.addable = t("ss-addable", e.addable), this.addablePath = e.addablePath || "M50,10 L50,90 M10,50 L90,50", this.list = t("ss-list", e.list), this.optgroup = t("ss-optgroup", e.optgroup), this.optgroupLabel = t("ss-optgroup-label", e.optgroupLabel), this.optgroupLabelText = t("ss-optgroup-label-text", e.optgroupLabelText), this.optgroupActions = t("ss-optgroup-actions", e.optgroupActions), this.optgroupSelectAll = t("ss-selectall", e.optgroupSelectAll), this.optgroupSelectAllBox = e.optgroupSelectAllBox || "M60,10 L10,10 L10,90 L90,90 L90,50", this.optgroupSelectAllCheck = e.optgroupSelectAllCheck || "M30,45 L50,70 L90,10", this.optgroupClosable = t("ss-closable", e.optgroupClosable), this.option = t("ss-option", e.option), this.optionDelete = e.optionDelete || "M10,10 L90,90 M10,90 L90,10", this.highlighted = t("ss-highlighted", e.highlighted), this.mainOpen = t("ss-open", e.mainOpen), this.close = t("ss-close", e.close), this.selected = t("ss-selected", e.selected), this.error = t("ss-error", e.error), this.disabled = t("ss-disabled", e.disabled), this.hide = t("ss-hide", e.hide);
50
+ }
51
+ getFirst(e) {
52
+ return this[e].split(" ")[0];
53
+ }
54
+ };
55
+ //#endregion
56
+ //#region src/slim-select/helpers.ts
57
+ function a() {
58
+ return Math.random().toString(36).substring(2, 10);
116
59
  }
117
- class m {
118
- id;
119
- label;
120
- selectAll;
121
- selectAllText;
122
- closable;
123
- options;
124
- constructor(e) {
125
- if (this.id = !e.id || e.id === "" ? O() : e.id, this.label = e.label || "", this.selectAll = e.selectAll === void 0 ? !1 : e.selectAll, this.selectAllText = e.selectAllText || "Select All", this.closable = e.closable || "off", this.options = [], e.options)
126
- for (const t of e.options)
127
- this.options.push(new p(t));
128
- }
60
+ function o(e, t) {
61
+ function n(e, n) {
62
+ return n && e && e.classList && e.classList.contains(n) || n && e && e.dataset && e.dataset.id && e.dataset.id === t ? e : null;
63
+ }
64
+ function r(e, t) {
65
+ return !e || e === document ? null : n(e, t) ? e : r(e.parentNode, t);
66
+ }
67
+ return n(e, t) || r(e, t);
129
68
  }
130
- class F {
131
- selectType = "single";
132
- // Main data set, never null
133
- data = [];
134
- selectedOrder = [];
135
- constructor(e, t) {
136
- this.selectType = e, this.setData(t);
137
- }
138
- // Validate DataArrayPartial
139
- validateDataArray(e) {
140
- if (!Array.isArray(e))
141
- return new Error("Data must be an array");
142
- for (let t of e)
143
- if (t)
144
- if (t instanceof m || "label" in t) {
145
- if (!("label" in t))
146
- return new Error("Optgroup must have a label");
147
- if ("options" in t && t.options)
148
- for (let s of t.options) {
149
- const i = this.validateOption(s);
150
- if (i)
151
- return i;
152
- }
153
- } else if (t instanceof p || "text" in t) {
154
- const s = this.validateOption(t);
155
- if (s)
156
- return s;
157
- } else
158
- return new Error("Data object must be a valid optgroup or option");
159
- return null;
160
- }
161
- // Validate Option
162
- validateOption(e) {
163
- return "text" in e ? null : new Error("Option must have a text");
164
- }
165
- partialToFullData(e) {
166
- let t = [];
167
- return e.forEach((s) => {
168
- if (s) {
169
- if (s instanceof m || "label" in s) {
170
- let i = [];
171
- "options" in s && s.options && s.options.forEach((l) => {
172
- i.push(new p(l));
173
- }), i.length > 0 && t.push(new m(s));
174
- }
175
- (s instanceof p || "text" in s) && t.push(new p(s));
176
- }
177
- }), t;
178
- }
179
- setData(e, t = !1) {
180
- const s = this.partialToFullData(e);
181
- let i = [];
182
- if (t) {
183
- i = this.getSelectedOptions();
184
- const l = [];
185
- i.forEach((n) => {
186
- let a = !1;
187
- for (const o of s) {
188
- if (o instanceof p && o.id === n.id) {
189
- a = !0;
190
- break;
191
- }
192
- if (o instanceof m) {
193
- for (const r of o.options)
194
- if (r.id === n.id) {
195
- a = !0;
196
- break;
197
- }
198
- }
199
- }
200
- a || l.push(n);
201
- }), this.data = [...l, ...s];
202
- } else
203
- this.data = s;
204
- if (this.selectType === "single") {
205
- const l = t && i.length === 0;
206
- this.setSelectedBy("id", this.getSelected(), l);
207
- }
208
- }
209
- // Get data will return all the data
210
- getData() {
211
- return this.filter(null, !0);
212
- }
213
- // Get data options will return the data as a
214
- // flat array of just options
215
- getDataOptions() {
216
- return this.filter(null, !1);
217
- }
218
- addOption(e, t = !1) {
219
- if (t) {
220
- let s = [new p(e)];
221
- this.setData(s.concat(this.getData()));
222
- } else
223
- this.setData(this.getData().concat(new p(e)));
224
- }
225
- // Pass in an array of id that will loop through
226
- // each option and set the selected property to true
227
- // but also clean selected by determining selectType
228
- // When allowEmptySelection is true (e.g. after search with no prior selection), single select will not auto-select the first option
229
- setSelectedBy(e, t, s = !1) {
230
- let i = null, l = !1;
231
- const n = [];
232
- for (let o of this.data) {
233
- if (o instanceof m)
234
- for (let r of o.options) {
235
- i || (i = r);
236
- let h = r[e] || "";
237
- r.selected = l ? !1 : t.includes(h), r.selected && (n.push(r), this.selectType === "single" && (l = !0));
238
- }
239
- o instanceof p && (i || (i = o), o.selected = l ? !1 : t.includes(o[e]), o.selected && (n.push(o), this.selectType === "single" && (l = !0)));
240
- }
241
- this.selectType === "single" && i && !l && !s && (i.selected = !0, n.push(i));
242
- const a = t.map((o) => n.find((r) => r[e] === o)?.id || "");
243
- this.selectedOrder = a;
244
- }
245
- getSelected() {
246
- return this.getSelectedOptions().map((e) => e.id);
247
- }
248
- getSelectedValues() {
249
- return this.getSelectedOptions().map((e) => e.value);
250
- }
251
- getSelectedOptions() {
252
- return this.filter((e) => e.selected, !1);
253
- }
254
- getOptgroupByID(e) {
255
- for (let t of this.data)
256
- if (t instanceof m && t.id === e)
257
- return t;
258
- return null;
259
- }
260
- getOptionByID(e) {
261
- let t = this.filter((s) => s.id === e, !1);
262
- return t.length ? t[0] : null;
263
- }
264
- getSelectType() {
265
- return this.selectType;
266
- }
267
- getFirstOption() {
268
- let e = null;
269
- for (let t of this.data)
270
- if (t instanceof m ? e = t.options[0] : t instanceof p && (e = t), e)
271
- break;
272
- return e;
273
- }
274
- // Take in search string and return filtered list of values
275
- search(e, t) {
276
- return e = e.trim(), e === "" ? this.getData() : this.filter((s) => t(s, e), !0);
277
- }
278
- // Filter takes in a function that will be used to filter the data
279
- // This will also keep optgroups of sub options meet the filter requirements
280
- filter(e, t) {
281
- const s = [];
282
- return this.data.forEach((i) => {
283
- if (i instanceof m) {
284
- let l = [];
285
- if (i.options.forEach((a) => {
286
- (!e || e(a)) && (t ? l.push(new p(a)) : s.push(new p(a)));
287
- }), l.length > 0) {
288
- let a = new m(i);
289
- a.options = l, s.push(a);
290
- }
291
- }
292
- i instanceof p && (!e || e(i)) && s.push(new p(i));
293
- }), s;
294
- }
295
- // Take in an array of options and reoder them based upon the selected order
296
- selectedOrderOptions(e) {
297
- const t = [];
298
- return this.selectedOrder.forEach((s) => {
299
- const i = e.find((l) => l.id === s);
300
- i && t.push(i);
301
- }), e.forEach((s) => {
302
- let i = !1;
303
- t.forEach((l) => {
304
- if (s.id === l.id) {
305
- i = !0;
306
- return;
307
- }
308
- }), i || t.push(s);
309
- }), t;
310
- }
69
+ function s(e, t = 50, n = !1) {
70
+ let r;
71
+ return function(...i) {
72
+ let a = self, o = () => {
73
+ r = null, n || e.apply(a, i);
74
+ }, s = n && !r;
75
+ clearTimeout(r), r = setTimeout(o, t), s && e.apply(a, i);
76
+ };
311
77
  }
312
- class V {
313
- settings;
314
- store;
315
- callbacks;
316
- // Used to compute the range selection
317
- lastSelectedOption;
318
- // Timeout tracking for cleanup
319
- closeAnimationTimeout = null;
320
- // Elements
321
- main;
322
- content;
323
- // Classes
324
- classes;
325
- constructor(e, t, s, i) {
326
- this.store = s, this.settings = e, this.classes = t, this.callbacks = i, this.lastSelectedOption = null, this.main = this.mainDiv(), this.content = this.contentDiv(), this.updateClassStyles(), this.updateAriaAttributes(), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto"), this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main);
327
- }
328
- // Helper method to add classes that may contain spaces
329
- // Splits by spaces and adds each class individually to avoid DOMException
330
- addClasses(e, t) {
331
- if (!t || t.trim() === "")
332
- return;
333
- const s = t.split(" ").filter((i) => i.trim() !== "");
334
- for (const i of s)
335
- e.classList.add(i.trim());
336
- }
337
- // Helper method to remove classes that may contain spaces
338
- removeClasses(e, t) {
339
- if (!t || t.trim() === "")
340
- return;
341
- const s = t.split(" ").filter((i) => i.trim() !== "");
342
- for (const i of s)
343
- e.classList.remove(i.trim());
344
- }
345
- // Remove disabled classes
346
- enable() {
347
- this.removeClasses(this.main.main, this.classes.disabled), this.main.main.setAttribute("aria-disabled", "false"), this.content.search.input.disabled = !1;
348
- }
349
- // Set disabled classes
350
- disable() {
351
- this.addClasses(this.main.main, this.classes.disabled), this.main.main.setAttribute("aria-disabled", "true"), this.content.search.input.disabled = !0;
352
- }
353
- open() {
354
- this.main.arrow.path.setAttribute("d", this.classes.arrowOpen), this.main.main.setAttribute("aria-expanded", "true"), this.closeAnimationTimeout && (clearTimeout(this.closeAnimationTimeout), this.closeAnimationTimeout = null);
355
- const t = this.settings.openPosition === "up" ? this.classes.dirAbove : this.classes.dirBelow;
356
- this.addClasses(this.main.main, t), this.addClasses(this.content.main, t), this.addClasses(this.content.main, this.classes.contentOpen), this.content.search.input.removeAttribute("aria-hidden"), this.moveContent();
357
- const s = this.store.getSelectedOptions();
358
- if (s.length) {
359
- const i = s[s.length - 1].id, l = this.content.list.querySelector('[data-id="' + i + '"]');
360
- l && this.ensureElementInView(this.content.list, l);
361
- }
362
- }
363
- close() {
364
- this.main.main.setAttribute("aria-expanded", "false"), this.main.arrow.path.setAttribute("d", this.classes.arrowClose), this.removeClasses(this.content.main, this.classes.contentOpen), this.content.search.input.setAttribute("aria-hidden", "true"), this.main.main.removeAttribute("aria-activedescendant");
365
- const e = this.getAnimationTiming();
366
- this.closeAnimationTimeout = setTimeout(() => {
367
- this.removeClasses(this.main.main, this.classes.dirAbove), this.removeClasses(this.main.main, this.classes.dirBelow), this.removeClasses(this.content.main, this.classes.dirAbove), this.removeClasses(this.content.main, this.classes.dirBelow), this.closeAnimationTimeout = null;
368
- }, e);
369
- }
370
- getAnimationTiming() {
371
- const t = getComputedStyle(this.content.main).getPropertyValue("--ss-animation-timing").trim();
372
- if (t) {
373
- if (t.endsWith("ms"))
374
- return parseFloat(t);
375
- if (t.endsWith("s"))
376
- return parseFloat(t) * 1e3;
377
- }
378
- return 200;
379
- }
380
- updateClassStyles() {
381
- if (this.main.main.className = "", this.main.main.removeAttribute("style"), this.content.main.className = "", this.content.main.removeAttribute("style"), this.addClasses(this.main.main, this.classes.main), this.addClasses(this.content.main, this.classes.content), this.settings.style !== "" && (this.main.main.style.cssText = this.settings.style, this.content.main.style.cssText = this.settings.style), this.settings.class.length)
382
- for (const e of this.settings.class)
383
- e.trim() !== "" && (this.main.main.classList.add(e.trim()), this.content.main.classList.add(e.trim()));
384
- (this.settings.contentPosition === "relative" || this.settings.contentPosition === "fixed") && this.content.main.classList.add("ss-" + this.settings.contentPosition);
385
- }
386
- updateAriaAttributes() {
387
- const e = this.content.list.id;
388
- this.main.main.role = "combobox", this.main.main.setAttribute("aria-haspopup", "listbox"), this.main.main.setAttribute("aria-controls", e), this.main.main.setAttribute("aria-expanded", "false"), this.content.list.setAttribute("role", "listbox"), this.content.list.setAttribute("aria-label", this.settings.ariaLabel + " listbox"), this.settings.isMultiple && this.content.list.setAttribute("aria-multiselectable", "true"), this.content.search.input.setAttribute("aria-controls", e);
389
- }
390
- mainDiv() {
391
- const e = document.createElement("div");
392
- e.dataset.id = this.settings.id, e.setAttribute("aria-label", this.settings.ariaLabel), e.tabIndex = 0, e.onkeydown = (r) => {
393
- switch (r.key) {
394
- case "ArrowUp":
395
- case "ArrowDown":
396
- return this.callbacks.open(), r.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
397
- case "Tab":
398
- return this.callbacks.close(), !0;
399
- // Continue doing normal tabbing
400
- case "Enter":
401
- case " ":
402
- this.callbacks.open();
403
- const h = this.content.list.querySelector(
404
- "." + this.classes.getFirst("highlighted")
405
- );
406
- return h && h.click(), !1;
407
- case "Escape":
408
- return this.callbacks.close(), !1;
409
- }
410
- return r.key.length === 1 && this.callbacks.open(), !0;
411
- }, e.onclick = (r) => {
412
- this.settings.disabled || (this.settings.isOpen ? this.callbacks.close() : this.callbacks.open());
413
- };
414
- const t = document.createElement("div");
415
- this.addClasses(t, this.classes.values), e.appendChild(t);
416
- const s = document.createElement("div");
417
- this.addClasses(s, this.classes.deselect);
418
- const i = this.store?.getSelectedOptions();
419
- !this.settings.allowDeselect || this.settings.isMultiple && i && i.length <= 0 ? this.addClasses(s, this.classes.hide) : this.removeClasses(s, this.classes.hide), s.onclick = (r) => {
420
- if (r.stopPropagation(), this.settings.disabled)
421
- return;
422
- let h = !0;
423
- const d = this.store.getSelectedOptions(), f = [];
424
- if (this.callbacks.beforeChange && (h = this.callbacks.beforeChange(f, d) === !0), h) {
425
- if (this.settings.isMultiple)
426
- this.callbacks.setSelected([], !1), this.updateDeselectAll();
427
- else {
428
- const u = this.store.getFirstOption(), g = u ? u.id : "";
429
- this.callbacks.setSelected(g, !1);
430
- }
431
- this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
432
- }
433
- };
434
- const l = document.createElementNS("http://www.w3.org/2000/svg", "svg");
435
- l.setAttribute("viewBox", "0 0 100 100");
436
- const n = document.createElementNS("http://www.w3.org/2000/svg", "path");
437
- n.setAttribute("d", this.classes.deselectPath), l.appendChild(n), s.appendChild(l), e.appendChild(s);
438
- const a = document.createElementNS("http://www.w3.org/2000/svg", "svg");
439
- this.addClasses(a, this.classes.arrow), a.setAttribute("viewBox", "0 0 100 100");
440
- const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
441
- return o.setAttribute("d", this.classes.arrowClose), this.settings.alwaysOpen && this.addClasses(a, this.classes.hide), a.appendChild(o), e.appendChild(a), {
442
- main: e,
443
- values: t,
444
- deselect: {
445
- main: s,
446
- svg: l,
447
- path: n
448
- },
449
- arrow: {
450
- main: a,
451
- path: o
452
- }
453
- };
454
- }
455
- mainFocus(e) {
456
- e !== "click" && this.main.main.focus({ preventScroll: !0 });
457
- }
458
- placeholder() {
459
- const e = this.store.filter((i) => i.placeholder, !1);
460
- let t = this.settings.placeholderText;
461
- e.length && (e[0].html !== "" ? t = e[0].html : e[0].text !== "" && (t = e[0].text));
462
- const s = document.createElement("div");
463
- return this.addClasses(s, this.classes.placeholder), s.innerHTML = t, s;
464
- }
465
- // Get selected values and append to multiSelected values container
466
- // and remove those who shouldnt exist
467
- renderValues() {
468
- if (!this.settings.isMultiple) {
469
- this.renderSingleValue();
470
- return;
471
- }
472
- this.renderMultipleValues(), this.updateDeselectAll();
473
- }
474
- renderSingleValue() {
475
- const e = this.store.filter((s) => s.selected && !s.placeholder, !1), t = e.length > 0 ? e[0] : null;
476
- if (!t)
477
- this.main.values.innerHTML = this.placeholder().outerHTML;
478
- else {
479
- const s = document.createElement("div");
480
- this.addClasses(s, this.classes.single), t.html ? s.innerHTML = t.html : s.innerText = t.text, this.main.values.innerHTML = s.outerHTML;
481
- }
482
- !this.settings.allowDeselect || !e.length ? this.addClasses(this.main.deselect.main, this.classes.hide) : this.removeClasses(this.main.deselect.main, this.classes.hide);
483
- }
484
- renderMultipleValues() {
485
- let e = this.main.values.childNodes, t = this.store.filter((i) => i.selected && i.display, !1);
486
- if (t.length === 0) {
487
- this.main.values.innerHTML = this.placeholder().outerHTML;
488
- return;
489
- } else {
490
- const i = this.main.values.querySelector("." + this.classes.getFirst("placeholder"));
491
- i && i.remove();
492
- }
493
- if (t.length > this.settings.maxValuesShown) {
494
- const i = document.createElement("div");
495
- this.addClasses(i, this.classes.max), i.textContent = this.settings.maxValuesMessage.replace("{number}", t.length.toString()), this.main.values.innerHTML = i.outerHTML;
496
- return;
497
- } else {
498
- const i = this.main.values.querySelector("." + this.classes.getFirst("max"));
499
- i && i.remove();
500
- }
501
- this.settings.keepOrder && (t = this.store.selectedOrderOptions(t));
502
- let s = [];
503
- for (let i = 0; i < e.length; i++) {
504
- const l = e[i], n = l.getAttribute("data-id");
505
- n && (t.filter((o) => o.id === n, !1).length || s.push(l));
506
- }
507
- for (const i of s)
508
- this.addClasses(i, this.classes.valueOut), setTimeout(() => {
509
- this.main.values.hasChildNodes() && this.main.values.contains(i) && this.main.values.removeChild(i);
510
- }, 100);
511
- e = this.main.values.childNodes;
512
- for (let i = 0; i < t.length; i++) {
513
- let l = !0;
514
- for (let n = 0; n < e.length; n++)
515
- t[i].id === String(e[n].dataset.id) && (l = !1);
516
- l && (this.settings.keepOrder ? this.main.values.appendChild(this.multipleValue(t[i])) : e.length === 0 ? this.main.values.appendChild(this.multipleValue(t[i])) : i === 0 ? this.main.values.insertBefore(this.multipleValue(t[i]), e[i]) : e[i - 1].insertAdjacentElement("afterend", this.multipleValue(t[i])));
517
- }
518
- }
519
- multipleValue(e) {
520
- const t = document.createElement("div");
521
- this.addClasses(t, this.classes.value), t.dataset.id = e.id;
522
- const s = document.createElement("div");
523
- if (this.addClasses(s, this.classes.valueText), s.textContent = e.text, t.appendChild(s), !e.mandatory) {
524
- const i = document.createElement("div");
525
- this.addClasses(i, this.classes.valueDelete), i.setAttribute("tabindex", "0"), i.onclick = (a) => {
526
- if (a.preventDefault(), a.stopPropagation(), this.settings.disabled)
527
- return;
528
- let o = !0;
529
- const r = this.store.getSelectedOptions(), h = r.filter((d) => d.selected && d.id !== e.id, !0);
530
- if (!(this.settings.minSelected && h.length < this.settings.minSelected) && (this.callbacks.beforeChange && (o = this.callbacks.beforeChange(h, r) === !0), o)) {
531
- let d = [];
532
- for (const f of h) {
533
- if (f instanceof m)
534
- for (const u of f.options)
535
- u.id && d.push(u.id);
536
- f instanceof p && d.push(f.id);
537
- }
538
- this.callbacks.setSelected(d, !1), this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(h), this.updateDeselectAll();
539
- }
540
- };
541
- const l = document.createElementNS("http://www.w3.org/2000/svg", "svg");
542
- l.setAttribute("viewBox", "0 0 100 100");
543
- const n = document.createElementNS("http://www.w3.org/2000/svg", "path");
544
- n.setAttribute("d", this.classes.optionDelete), l.appendChild(n), i.appendChild(l), t.appendChild(i), i.onkeydown = (a) => {
545
- a.key === "Enter" && i.click();
546
- };
547
- }
548
- return t;
549
- }
550
- contentDiv() {
551
- const e = document.createElement("div");
552
- e.dataset.id = this.settings.id;
553
- const t = this.searchDiv();
554
- e.appendChild(t.main);
555
- const s = this.listDiv();
556
- return e.appendChild(s), {
557
- main: e,
558
- search: t,
559
- list: s
560
- };
561
- }
562
- moveContent() {
563
- if (this.settings.contentPosition === "relative") {
564
- this.moveContentBelow();
565
- return;
566
- }
567
- if (this.settings.openPosition === "down") {
568
- this.moveContentBelow();
569
- return;
570
- } else if (this.settings.openPosition === "up") {
571
- this.moveContentAbove();
572
- return;
573
- }
574
- this.putContent() === "up" ? this.moveContentAbove() : this.moveContentBelow();
575
- }
576
- searchDiv() {
577
- const e = document.createElement("div"), t = document.createElement("input"), s = document.createElement("div");
578
- this.addClasses(e, this.classes.search);
579
- const i = {
580
- main: e,
581
- input: t
582
- };
583
- if (this.settings.showSearch || (this.addClasses(e, this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput = S((l) => {
584
- this.callbacks.search(l.target.value);
585
- }, 100), t.onkeydown = (l) => {
586
- switch (l.key) {
587
- case "ArrowUp":
588
- case "ArrowDown":
589
- return l.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
590
- case "Tab":
591
- return this.callbacks.close(), !0;
592
- // Continue doing normal tabbing
593
- case "Escape":
594
- return this.callbacks.close(), !1;
595
- case " ":
596
- const n = this.content.list.querySelector(
597
- "." + this.classes.getFirst("highlighted")
598
- );
599
- return n ? (n.click(), !1) : !0;
600
- case "Enter":
601
- const a = this.content.list.querySelector(
602
- "." + this.classes.getFirst("highlighted")
603
- );
604
- return a ? (a.click(), !1) : this.callbacks.addable ? (s.click(), !1) : !0;
605
- }
606
- return !0;
607
- }, e.appendChild(t), this.callbacks.addable) {
608
- this.addClasses(s, this.classes.addable);
609
- const l = document.createElementNS("http://www.w3.org/2000/svg", "svg");
610
- l.setAttribute("viewBox", "0 0 100 100");
611
- const n = document.createElementNS("http://www.w3.org/2000/svg", "path");
612
- n.setAttribute("d", this.classes.addablePath), l.appendChild(n), s.appendChild(l), s.onclick = (a) => {
613
- if (a.preventDefault(), a.stopPropagation(), !this.callbacks.addable)
614
- return;
615
- const o = this.content.search.input.value.trim();
616
- if (o === "") {
617
- this.content.search.input.focus();
618
- return;
619
- }
620
- const r = (d) => {
621
- let f = new p(d);
622
- if (this.callbacks.addOption(f), this.settings.isMultiple) {
623
- let u = this.store.getSelected();
624
- u.push(f.id), this.callbacks.setSelected(u, !0);
625
- } else
626
- this.callbacks.setSelected([f.id], !0);
627
- this.callbacks.search(""), this.settings.closeOnSelect && setTimeout(() => {
628
- this.callbacks.close();
629
- }, 100);
630
- }, h = this.callbacks.addable(o);
631
- h === !1 || h === void 0 || h === null || (h instanceof Promise ? h.then((d) => {
632
- typeof d == "string" ? r({
633
- text: d,
634
- value: d
635
- }) : h instanceof Error ? this.renderError(h.message) : r(d);
636
- }) : typeof h == "string" ? r({
637
- text: h,
638
- value: h
639
- }) : h instanceof Error ? this.renderError(h.message) : r(h));
640
- }, e.appendChild(s), i.addable = {
641
- main: s,
642
- svg: l,
643
- path: n
644
- };
645
- }
646
- return i;
647
- }
648
- searchFocus() {
649
- this.content.search.input.focus({ preventScroll: !0 });
650
- }
651
- getOptions(e = !1, t = !1, s = !1) {
652
- let i = "." + this.classes.getFirst("option");
653
- return e && (i += ":not(." + this.classes.getFirst("placeholder") + ")"), t && (i += ":not(." + this.classes.getFirst("disabled") + ")"), s && (i += ":not(." + this.classes.getFirst("hide") + ")"), Array.from(this.content.list.querySelectorAll(i));
654
- }
655
- // highlightUp is used to highlight the previous option in the list
656
- highlight(e) {
657
- const t = this.getOptions(!0, !0, !0);
658
- if (t.length === 0)
659
- return;
660
- if (t.length === 1 && !t[0].classList.contains(this.classes.getFirst("highlighted"))) {
661
- this.addClasses(t[0], this.classes.highlighted);
662
- return;
663
- }
664
- let s = !1;
665
- for (const l of t)
666
- l.classList.contains(this.classes.getFirst("highlighted")) && (s = !0);
667
- if (!s) {
668
- for (const l of t)
669
- if (l.classList.contains(this.classes.getFirst("selected"))) {
670
- this.addClasses(l, this.classes.highlighted);
671
- break;
672
- }
673
- }
674
- for (let l = 0; l < t.length; l++)
675
- if (t[l].classList.contains(this.classes.getFirst("highlighted"))) {
676
- const n = t[l];
677
- this.removeClasses(n, this.classes.highlighted);
678
- const a = n.parentElement;
679
- if (a && a.classList.contains(this.classes.getFirst("mainOpen"))) {
680
- const h = a.querySelector("." + this.classes.getFirst("optgroupLabel"));
681
- h && h.click();
682
- }
683
- let o = t[e === "down" ? l + 1 < t.length ? l + 1 : 0 : l - 1 >= 0 ? l - 1 : t.length - 1];
684
- this.addClasses(o, this.classes.highlighted), this.ensureElementInView(this.content.list, o), o.id && this.main.main.setAttribute("aria-activedescendant", o.id);
685
- const r = o.parentElement;
686
- if (r && r.classList.contains(this.classes.getFirst("close"))) {
687
- const h = r.querySelector(
688
- "." + this.classes.getFirst("optgroupLabel")
689
- );
690
- h && h.click();
691
- }
692
- return;
693
- }
694
- const i = t[e === "down" ? 0 : t.length - 1];
695
- this.addClasses(i, this.classes.highlighted), i.id && this.main.main.setAttribute("aria-activedescendant", i.id), this.ensureElementInView(this.content.list, i);
696
- }
697
- // Create main container that options will reside
698
- listDiv() {
699
- const e = document.createElement("div");
700
- this.addClasses(e, this.classes.list);
701
- const t = this.settings.id + "-list";
702
- return e.id = t, e.dataset.id = t, e;
703
- }
704
- renderError(e) {
705
- this.content.list.innerHTML = "";
706
- const t = document.createElement("div");
707
- this.addClasses(t, this.classes.error), t.textContent = e, this.content.list.appendChild(t);
708
- }
709
- renderSearching() {
710
- this.content.list.innerHTML = "";
711
- const e = document.createElement("div");
712
- this.addClasses(e, this.classes.searching), e.textContent = this.settings.searchingText, this.content.list.appendChild(e);
713
- }
714
- // Take in data and add options to
715
- renderOptions(e) {
716
- if (this.content.list.innerHTML = "", e.length === 0) {
717
- const s = document.createElement("div");
718
- this.addClasses(s, this.classes.search), this.callbacks.addable ? s.innerHTML = this.settings.addableText.replace("{value}", this.content.search.input.value) : s.innerHTML = this.settings.searchText, this.content.list.appendChild(s);
719
- return;
720
- }
721
- this.settings.allowDeselect && !this.settings.isMultiple && (this.store.filter((i) => i.placeholder, !1).length || this.store.addOption(
722
- new p({
723
- text: "",
724
- value: "",
725
- selected: !1,
726
- placeholder: !0
727
- }),
728
- !0
729
- ));
730
- const t = document.createDocumentFragment();
731
- for (const s of e) {
732
- if (s instanceof m) {
733
- const i = document.createElement("div");
734
- this.addClasses(i, this.classes.optgroup);
735
- const l = document.createElement("div");
736
- this.addClasses(l, this.classes.optgroupLabel), i.appendChild(l);
737
- const n = document.createElement("div");
738
- this.addClasses(n, this.classes.optgroupLabelText), n.textContent = s.label, l.appendChild(n);
739
- const a = document.createElement("div");
740
- if (this.addClasses(a, this.classes.optgroupActions), l.appendChild(a), this.settings.isMultiple && s.selectAll) {
741
- const o = document.createElement("div");
742
- this.addClasses(o, this.classes.optgroupSelectAll);
743
- let r = !0;
744
- for (const g of s.options)
745
- if (!g.selected) {
746
- r = !1;
747
- break;
748
- }
749
- r && this.addClasses(o, this.classes.selected);
750
- const h = document.createElement("span");
751
- h.textContent = s.selectAllText, o.appendChild(h);
752
- const d = document.createElementNS("http://www.w3.org/2000/svg", "svg");
753
- d.setAttribute("viewBox", "0 0 100 100"), o.appendChild(d);
754
- const f = document.createElementNS("http://www.w3.org/2000/svg", "path");
755
- f.setAttribute("d", this.classes.optgroupSelectAllBox), d.appendChild(f);
756
- const u = document.createElementNS("http://www.w3.org/2000/svg", "path");
757
- u.setAttribute("d", this.classes.optgroupSelectAllCheck), d.appendChild(u), o.addEventListener("click", (g) => {
758
- g.preventDefault(), g.stopPropagation();
759
- const v = this.store.getSelected();
760
- if (r) {
761
- const C = v.filter((w) => {
762
- for (const b of s.options)
763
- if (w === b.id)
764
- return !1;
765
- return !0;
766
- });
767
- this.callbacks.setSelected(C, !0);
768
- return;
769
- } else {
770
- let C = s.options.map((b) => b.id).filter((b) => b !== void 0);
771
- const w = v.concat(C);
772
- for (const b of s.options)
773
- b.id && !this.store.getOptionByID(b.id) && this.callbacks.addOption(new p(b));
774
- this.callbacks.setSelected(w, !0);
775
- return;
776
- }
777
- }), a.appendChild(o);
778
- }
779
- if (s.closable !== "off") {
780
- const o = document.createElement("div");
781
- this.addClasses(o, this.classes.optgroupClosable);
782
- const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
783
- r.setAttribute("viewBox", "0 0 100 100"), this.addClasses(r, this.classes.arrow), o.appendChild(r);
784
- const h = document.createElementNS("http://www.w3.org/2000/svg", "path");
785
- r.appendChild(h), s.options.some((d) => d.selected) || this.content.search.input.value.trim() !== "" ? (this.addClasses(o, this.classes.mainOpen), h.setAttribute("d", this.classes.arrowOpen)) : s.closable === "open" ? (this.addClasses(i, this.classes.mainOpen), h.setAttribute("d", this.classes.arrowOpen)) : s.closable === "close" && (this.addClasses(i, this.classes.close), h.setAttribute("d", this.classes.arrowClose)), l.addEventListener("click", (d) => {
786
- d.preventDefault(), d.stopPropagation(), i.classList.contains(this.classes.getFirst("close")) ? (this.removeClasses(i, this.classes.close), this.addClasses(i, this.classes.mainOpen), h.setAttribute("d", this.classes.arrowOpen)) : (this.removeClasses(i, this.classes.mainOpen), this.addClasses(i, this.classes.close), h.setAttribute("d", this.classes.arrowClose));
787
- }), a.appendChild(o);
788
- }
789
- i.appendChild(l);
790
- for (const o of s.options)
791
- i.appendChild(this.option(new p(o))), t.appendChild(i);
792
- }
793
- s instanceof p && t.appendChild(this.option(s));
794
- }
795
- this.content.list.appendChild(t);
796
- }
797
- // Create option div element
798
- option(e) {
799
- if (e.placeholder) {
800
- const s = document.createElement("div");
801
- return this.addClasses(s, this.classes.option), this.addClasses(s, this.classes.hide), s;
802
- }
803
- const t = document.createElement("div");
804
- return t.dataset.id = e.id, t.id = this.settings.id + "-" + e.id, this.addClasses(t, this.classes.option), t.setAttribute("role", "option"), e.class && e.class.split(" ").forEach((s) => {
805
- t.classList.add(s);
806
- }), e.style && (t.style.cssText = e.style), this.settings.searchHighlight && this.content.search.input.value.trim() !== "" ? t.innerHTML = this.highlightText(
807
- e.html !== "" ? e.html : e.text,
808
- this.content.search.input.value,
809
- this.classes.searchHighlighter
810
- ) : e.html !== "" ? t.innerHTML = e.html : t.textContent = e.text, this.settings.showOptionTooltips && t.textContent && t.setAttribute("title", t.textContent), e.display || this.addClasses(t, this.classes.hide), e.disabled && this.addClasses(t, this.classes.disabled), e.selected && this.settings.hideSelected && this.addClasses(t, this.classes.hide), e.selected ? (this.addClasses(t, this.classes.selected), t.setAttribute("aria-selected", "true"), this.main.main.setAttribute("aria-activedescendant", t.id)) : (this.removeClasses(t, this.classes.selected), t.setAttribute("aria-selected", "false")), t.addEventListener("click", (s) => {
811
- s.preventDefault(), s.stopPropagation();
812
- const i = this.store.getSelected(), l = s.currentTarget, n = String(l.dataset.id), a = s.ctrlKey || s.metaKey;
813
- if (e.disabled || !this.settings.isMultiple && e.selected && !this.settings.allowDeselect || e.selected && e.mandatory || this.settings.isMultiple && this.settings.maxSelected <= i.length && !e.selected || this.settings.isMultiple && this.settings.minSelected >= i.length && e.selected && !a)
814
- return;
815
- let o = !1;
816
- const r = this.store.getSelectedOptions();
817
- let h = [];
818
- if (this.settings.isMultiple) {
819
- const d = r.some((u) => u.id === n);
820
- if (s.shiftKey && this.lastSelectedOption) {
821
- const u = this.store.getDataOptions(), g = u.findIndex((C) => C.id === this.lastSelectedOption.id), v = u.findIndex((C) => C.id === e.id);
822
- if (g >= 0 && v >= 0) {
823
- const C = Math.min(g, v), w = Math.max(g, v), A = u.slice(C, w + 1).filter((x) => !r.find((T) => T.id === x.id));
824
- r.length + A.length <= this.settings.maxSelected ? h = r.concat(A) : h = r;
825
- } else
826
- h = r;
827
- } else a ? (d ? h = r.filter((u) => u.id !== n) : h = r.concat(e), this.lastSelectedOption = e) : (d ? h = r.filter((u) => u.id !== n) : h = r.concat(e), this.lastSelectedOption = e);
828
- }
829
- if (this.settings.isMultiple || (e.selected ? h = [] : h = [e]), this.callbacks.beforeChange || (o = !0), this.callbacks.beforeChange && (this.callbacks.beforeChange(h, r) === !1 ? o = !1 : o = !0), o) {
830
- this.store.getOptionByID(n) || this.callbacks.addOption(e), this.callbacks.setSelected(
831
- h.map((u) => u.id),
832
- !1
833
- );
834
- const d = s.ctrlKey || s.metaKey || s.shiftKey;
835
- this.settings.closeOnSelect && !(this.settings.isMultiple && d) && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(h);
836
- }
837
- }), t;
838
- }
839
- destroy() {
840
- this.closeAnimationTimeout && (clearTimeout(this.closeAnimationTimeout), this.closeAnimationTimeout = null), this.main.main.remove(), this.content.main.remove();
841
- }
842
- highlightText(e, t, s) {
843
- const i = t.trim();
844
- if (i === "")
845
- return e;
846
- const l = i.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), n = document.createElement("div");
847
- n.innerHTML = e;
848
- const a = (o) => {
849
- if (o.nodeType === Node.TEXT_NODE) {
850
- const r = o.textContent || "", h = new RegExp("(" + l + ")", "i");
851
- if (h.test(r)) {
852
- const d = document.createElement("span");
853
- r.split(h).forEach((u, g) => {
854
- if (u && h.test(u)) {
855
- const v = document.createElement("mark");
856
- v.className = s, v.textContent = u, d.appendChild(v);
857
- } else u && d.appendChild(document.createTextNode(u));
858
- }), o.parentNode?.replaceChild(d, o);
859
- }
860
- } else o.nodeType === Node.ELEMENT_NODE && Array.from(o.childNodes).forEach((r) => a(r));
861
- };
862
- return Array.from(n.childNodes).forEach((o) => a(o)), n.innerHTML;
863
- }
864
- setContentDirection(e) {
865
- const t = e === "above", s = t ? this.classes.dirAbove : this.classes.dirBelow, i = t ? this.classes.dirBelow : this.classes.dirAbove;
866
- if (this.removeClasses(this.main.main, i), this.addClasses(this.main.main, s), this.removeClasses(this.content.main, i), this.addClasses(this.content.main, s), t) {
867
- const l = this.main.main.offsetHeight, n = this.content.main.offsetHeight;
868
- this.content.main.style.margin = "-" + (l + n - 1) + "px 0px 0px 0px";
869
- } else
870
- this.content.main.style.margin = "-1px 0px 0px 0px";
871
- }
872
- setContentPosition() {
873
- if (this.settings.contentPosition === "relative")
874
- return;
875
- const e = this.main.main.getBoundingClientRect();
876
- let t, s;
877
- this.settings.contentPosition === "fixed" ? (t = e.top + e.height, s = e.left) : (t = e.top + window.scrollY + e.height, s = e.left + window.scrollX), this.content.main.style.top = t + "px", this.content.main.style.left = s + "px";
878
- const i = this.settings.contentWidth;
879
- this.content.main.style.width = "", this.content.main.style.minWidth = "", this.content.main.style.maxWidth = "", i ? i.startsWith(">") ? this.content.main.style.minWidth = i.slice(1) : i.startsWith("<") ? this.content.main.style.maxWidth = i.slice(1) : this.content.main.style.width = i : this.content.main.style.width = e.width + "px";
880
- const l = 20, n = window.innerWidth - l, a = () => {
881
- const r = this.content.main.getBoundingClientRect().right;
882
- if (r <= n) return;
883
- const h = r - n, d = parseFloat(this.content.main.style.left) || 0;
884
- if (this.settings.contentPosition === "fixed") {
885
- const f = Math.max(l, d - h);
886
- this.content.main.style.left = f + "px";
887
- } else {
888
- const f = Math.max(window.scrollX + l, d - h);
889
- this.content.main.style.left = f + "px";
890
- }
891
- };
892
- requestAnimationFrame(() => {
893
- a(), requestAnimationFrame(a);
894
- });
895
- }
896
- moveContentAbove() {
897
- this.setContentDirection("above"), this.setContentPosition();
898
- }
899
- moveContentBelow() {
900
- this.setContentDirection("below"), this.setContentPosition();
901
- }
902
- ensureElementInView(e, t) {
903
- const s = e.scrollTop + e.offsetTop, i = s + e.clientHeight, l = t.offsetTop, n = l + t.clientHeight;
904
- l < s ? e.scrollTop -= s - l : n > i && (e.scrollTop += n - i);
905
- }
906
- putContent() {
907
- const e = this.main.main.offsetHeight, t = this.main.main.getBoundingClientRect(), s = this.content.main.offsetHeight;
908
- return window.innerHeight - (t.top + e) <= s && t.top > s ? "up" : "down";
909
- }
910
- // Updates deselect based on item count and allowDeselect setting
911
- updateDeselectAll() {
912
- if (!this.store || !this.settings)
913
- return;
914
- const e = this.store.getSelectedOptions(), t = e && e.length > 0, s = this.settings.isMultiple, i = this.settings.allowDeselect, l = this.main.deselect.main, n = this.classes.hide;
915
- i && !(s && !t) ? this.removeClasses(l, n) : this.addClasses(l, n);
916
- }
78
+ function c(e, t) {
79
+ return JSON.stringify(e) === JSON.stringify(t);
917
80
  }
918
- class B {
919
- select;
920
- // Mutation observer fields
921
- onValueChange;
922
- onClassChange;
923
- onDisabledChange;
924
- onOptionsChange;
925
- onLabelClick;
926
- // Change observers
927
- listen = !1;
928
- observer = null;
929
- isUpdating = !1;
930
- pendingOptionsChange = null;
931
- // Event handlers for preventing native select behavior (especially on iOS Safari)
932
- preventNativeSelect = null;
933
- preventNativeSelectMousedown = null;
934
- preventNativeSelectFocus = null;
935
- constructor(e) {
936
- this.select = e, this.valueChange = this.valueChange.bind(this), this.select.addEventListener("change", this.valueChange, {
937
- // allow bubbling of event
938
- passive: !0
939
- }), this.observer = new MutationObserver(this.observeCall.bind(this)), this.changeListen(!0);
940
- }
941
- enable() {
942
- this.select.disabled = !1;
943
- }
944
- disable() {
945
- this.select.disabled = !0;
946
- }
947
- hideUI() {
948
- this.select.tabIndex = -1, this.select.style.position = "absolute", this.select.style.width = "1px", this.select.style.height = "1px", this.select.style.opacity = "0", this.select.style.overflow = "hidden", this.select.style.pointerEvents = "none", this.select.style.margin = "0", this.select.style.padding = "0", this.select.style.borderWidth = "0", this.select.style.clip = "rect(0 0 0 0)", this.select.setAttribute("aria-hidden", "true"), this.preventNativeSelect || (this.preventNativeSelect = (e) => {
949
- e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
950
- }, this.preventNativeSelectMousedown = (e) => {
951
- e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
952
- }, this.preventNativeSelectFocus = (e) => {
953
- e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
954
- }, this.select.addEventListener("click", this.preventNativeSelect, { capture: !0, passive: !1 }), this.select.addEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0, passive: !1 }), this.select.addEventListener("focus", this.preventNativeSelectFocus, { capture: !0, passive: !1 }));
955
- }
956
- showUI() {
957
- this.select.removeAttribute("tabindex"), this.select.style.position = "", this.select.style.width = "", this.select.style.height = "", this.select.style.opacity = "", this.select.style.overflow = "", this.select.style.pointerEvents = "", this.select.style.margin = "", this.select.style.padding = "", this.select.style.borderWidth = "", this.select.style.clip = "", this.select.removeAttribute("aria-hidden"), this.preventNativeSelect && (this.select.removeEventListener("click", this.preventNativeSelect, { capture: !0 }), this.preventNativeSelect = null), this.preventNativeSelectMousedown && (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0 }), this.preventNativeSelectMousedown = null), this.preventNativeSelectFocus && (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: !0 }), this.preventNativeSelectFocus = null);
958
- }
959
- changeListen(e) {
960
- this.listen = e, e && this.observer && this.observer.observe(this.select, {
961
- subtree: !0,
962
- // subtree for optgroups options
963
- childList: !0,
964
- // children changes
965
- attributes: !0
966
- // attributes changes
967
- }), e || this.observer && this.observer.disconnect();
968
- }
969
- // This function get triggers when the select value changes
970
- // and will call the onValueChange function if it exists
971
- valueChange(e) {
972
- return this.listen && this.onValueChange && this.onValueChange(this.getSelectedOptions()), !0;
973
- }
974
- observeCall(e) {
975
- if (!this.listen)
976
- return;
977
- let t = !1, s = !1, i = !1, l = !1;
978
- for (const n of e) {
979
- if (n.target === this.select && (n.attributeName === "disabled" && (s = !0), n.attributeName === "class" && (t = !0), n.type === "childList")) {
980
- for (const a of Array.from(n.addedNodes))
981
- if (a.nodeName === "OPTION" && a.value === this.select.value) {
982
- l = !0;
983
- break;
984
- }
985
- i = !0;
986
- }
987
- (n.target.nodeName === "OPTGROUP" || n.target.nodeName === "OPTION") && (i = !0);
988
- }
989
- if (t && this.onClassChange && this.onClassChange(this.select.className.split(" ")), s && this.onDisabledChange && (this.changeListen(!1), this.onDisabledChange(this.select.disabled), this.changeListen(!0)), i && this.onOptionsChange) {
990
- if (this.isUpdating) {
991
- if (this.select.options.length > 0) {
992
- const n = this.getData();
993
- n.length > 0 && (this.pendingOptionsChange = n);
994
- }
995
- l && this.select.dispatchEvent(new Event("change"));
996
- return;
997
- }
998
- this.changeListen(!1), this.onOptionsChange(this.getData()), this.changeListen(!0);
999
- }
1000
- l && this.select.dispatchEvent(new Event("change"));
1001
- }
1002
- // From the select element pull optgroup and options into data
1003
- getData() {
1004
- let e = [];
1005
- const t = this.select.childNodes;
1006
- for (const s of t)
1007
- s.nodeName === "OPTGROUP" && e.push(this.getDataFromOptgroup(s)), s.nodeName === "OPTION" && e.push(this.getDataFromOption(s));
1008
- return e;
1009
- }
1010
- getDataFromOptgroup(e) {
1011
- let t = {
1012
- id: e.id,
1013
- label: e.label,
1014
- selectAll: e.dataset ? e.dataset.selectall === "true" : !1,
1015
- selectAllText: e.dataset ? e.dataset.selectalltext : "Select all",
1016
- closable: e.dataset ? e.dataset.closable : "off",
1017
- options: []
1018
- };
1019
- const s = e.childNodes;
1020
- for (const i of s)
1021
- i.nodeName === "OPTION" && t.options.push(this.getDataFromOption(i));
1022
- return t;
1023
- }
1024
- // From passed in option pull pieces of usable information
1025
- getDataFromOption(e) {
1026
- return {
1027
- id: e.id,
1028
- value: e.value,
1029
- text: e.text,
1030
- html: e.dataset && e.dataset.html ? e.dataset.html : "",
1031
- defaultSelected: e.defaultSelected,
1032
- selected: e.selected,
1033
- display: e.style.display !== "none",
1034
- disabled: e.disabled,
1035
- mandatory: e.dataset ? e.dataset.mandatory === "true" : !1,
1036
- placeholder: e.dataset.placeholder === "true",
1037
- class: e.className,
1038
- style: e.style.cssText,
1039
- data: e.dataset
1040
- };
1041
- }
1042
- getSelectedOptions() {
1043
- let e = [];
1044
- const t = this.select.childNodes;
1045
- for (const s of t) {
1046
- if (s.nodeName === "OPTGROUP") {
1047
- const i = s.childNodes;
1048
- for (const l of i)
1049
- if (l.nodeName === "OPTION") {
1050
- const n = l;
1051
- n.selected && e.push(this.getDataFromOption(n));
1052
- }
1053
- }
1054
- if (s.nodeName === "OPTION") {
1055
- const i = s;
1056
- i.selected && e.push(this.getDataFromOption(i));
1057
- }
1058
- }
1059
- return e;
1060
- }
1061
- getSelectedValues() {
1062
- return this.getSelectedOptions().map((e) => e.value);
1063
- }
1064
- setSelected(e) {
1065
- this.changeListen(!1);
1066
- const t = this.select.childNodes;
1067
- for (const s of t) {
1068
- if (s.nodeName === "OPTGROUP") {
1069
- const l = s.childNodes;
1070
- for (const n of l)
1071
- if (n.nodeName === "OPTION") {
1072
- const a = n;
1073
- a.selected = e.includes(a.id);
1074
- }
1075
- }
1076
- if (s.nodeName === "OPTION") {
1077
- const i = s;
1078
- i.selected = e.includes(i.id);
1079
- }
1080
- }
1081
- this.changeListen(!0);
1082
- }
1083
- // Set selected options by value instead of id
1084
- // This is useful when the id is not known
1085
- // and only the value is known
1086
- // but the value is not unique and can be duplicated
1087
- setSelectedByValue(e) {
1088
- this.changeListen(!1);
1089
- const t = this.select.childNodes;
1090
- for (const s of t) {
1091
- if (s.nodeName === "OPTGROUP") {
1092
- const l = s.childNodes;
1093
- for (const n of l)
1094
- if (n.nodeName === "OPTION") {
1095
- const a = n;
1096
- a.selected = e.includes(a.value);
1097
- }
1098
- }
1099
- if (s.nodeName === "OPTION") {
1100
- const i = s;
1101
- i.selected = e.includes(i.value);
1102
- }
1103
- }
1104
- this.changeListen(!0);
1105
- }
1106
- updateSelect(e, t, s) {
1107
- this.changeListen(!1), e && (this.select.dataset.id = e), t && (this.select.style.cssText = t), s && (this.select.className = "", s.forEach((i) => {
1108
- i.trim() !== "" && this.select.classList.add(i.trim());
1109
- })), this.changeListen(!0);
1110
- }
1111
- updateOptions(e) {
1112
- if (!(!e || e.length === 0)) {
1113
- this.isUpdating = !0, this.pendingOptionsChange = null, this.changeListen(!1), this.select.innerHTML = "";
1114
- for (const t of e)
1115
- t instanceof m && this.select.appendChild(this.createOptgroup(t)), t instanceof p && this.select.appendChild(this.createOption(t));
1116
- if (this.select.dispatchEvent(new Event("change", { bubbles: !0 })), this.changeListen(!0), this.isUpdating = !1, this.pendingOptionsChange !== null) {
1117
- const t = this.pendingOptionsChange;
1118
- t.length > 0 && this.onOptionsChange ? (this.pendingOptionsChange = null, this.changeListen(!1), this.onOptionsChange(t), this.changeListen(!0)) : this.pendingOptionsChange = null;
1119
- }
1120
- }
1121
- }
1122
- createOptgroup(e) {
1123
- const t = document.createElement("optgroup");
1124
- if (t.id = e.id, t.label = e.label, e.selectAll && (t.dataset.selectAll = "true"), e.closable !== "off" && (t.dataset.closable = e.closable), e.options)
1125
- for (const s of e.options)
1126
- t.appendChild(this.createOption(s));
1127
- return t;
1128
- }
1129
- createOption(e) {
1130
- const t = document.createElement("option");
1131
- return t.id = e.id, t.value = e.value, t.textContent = e.text, e.html !== "" && t.setAttribute("data-html", e.html), t.defaultSelected = e.defaultSelected, t.selected = e.selected, e.disabled && (t.disabled = !0), e.display || (t.style.display = "none"), e.placeholder && t.setAttribute("data-placeholder", "true"), e.mandatory && t.setAttribute("data-mandatory", "true"), e.class && e.class.split(" ").forEach((s) => {
1132
- t.classList.add(s);
1133
- }), e.data && typeof e.data == "object" && Object.keys(e.data).forEach((s) => {
1134
- t.setAttribute("data-" + P(s), e.data[s]);
1135
- }), t;
1136
- }
1137
- // Find and handle labels associated with this select
1138
- setupLabelHandlers() {
1139
- const e = [], t = this.select.id;
1140
- t && document.querySelectorAll(`label[for="${t}"]`).forEach((n) => e.push(n));
1141
- let s = this.select.parentElement;
1142
- for (; s && s !== document.body; ) {
1143
- if (s.tagName === "LABEL") {
1144
- e.push(s);
1145
- break;
1146
- }
1147
- s = s.parentElement;
1148
- }
1149
- Array.from(new Set(e)).forEach((l) => {
1150
- if (l.__slimSelectLabelHandler)
1151
- return;
1152
- const n = (a) => {
1153
- const o = a.target, r = E(o, this.select.dataset.id);
1154
- a.preventDefault(), !r && this.onLabelClick && this.onLabelClick();
1155
- };
1156
- l.__slimSelectLabelHandler = n, l.addEventListener("click", n, { capture: !0, passive: !1 });
1157
- });
1158
- }
1159
- // Remove label handlers
1160
- removeLabelHandlers() {
1161
- const e = [], t = this.select.id;
1162
- t && document.querySelectorAll(`label[for="${t}"]`).forEach((n) => e.push(n));
1163
- let s = this.select.parentElement;
1164
- for (; s && s !== document.body; ) {
1165
- if (s.tagName === "LABEL") {
1166
- e.push(s);
1167
- break;
1168
- }
1169
- s = s.parentElement;
1170
- }
1171
- Array.from(new Set(e)).forEach((l) => {
1172
- const n = l.__slimSelectLabelHandler;
1173
- n && (l.removeEventListener("click", n, { capture: !0 }), delete l.__slimSelectLabelHandler);
1174
- });
1175
- }
1176
- destroy() {
1177
- this.changeListen(!1), this.select.removeEventListener("change", this.valueChange), this.preventNativeSelect && (this.select.removeEventListener("click", this.preventNativeSelect, { capture: !0 }), this.preventNativeSelect = null), this.preventNativeSelectMousedown && (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0 }), this.preventNativeSelectMousedown = null), this.preventNativeSelectFocus && (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: !0 }), this.preventNativeSelectFocus = null), this.observer && (this.observer.disconnect(), this.observer = null), this.removeLabelHandlers(), delete this.select.dataset.id, this.showUI();
1178
- }
81
+ function l(e) {
82
+ let t = e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (e) => "-" + e.toLowerCase());
83
+ return e[0] === e[0].toUpperCase() ? t.substring(1) : t;
1179
84
  }
1180
- class I {
1181
- id = "";
1182
- // Primary ID for the select
1183
- style = "";
1184
- // Style attribute from the select element
1185
- class = [];
1186
- // Class attribute from the select element
1187
- // Dynamic settings
1188
- isMultiple = !1;
1189
- isOpen = !1;
1190
- isFullOpen = !1;
1191
- intervalMove = null;
1192
- // Fields set from constructor
1193
- disabled;
1194
- alwaysOpen;
1195
- showSearch;
1196
- focusSearch;
1197
- keepSearch;
1198
- ariaLabel;
1199
- searchPlaceholder;
1200
- searchText;
1201
- searchingText;
1202
- searchHighlight;
1203
- closeOnSelect;
1204
- contentLocation;
1205
- contentPosition;
1206
- contentWidth;
1207
- openPosition;
1208
- placeholderText;
1209
- allowDeselect;
1210
- hideSelected;
1211
- keepOrder;
1212
- showOptionTooltips;
1213
- minSelected;
1214
- maxSelected;
1215
- timeoutDelay;
1216
- maxValuesShown;
1217
- maxValuesMessage;
1218
- addableText;
1219
- constructor(e) {
1220
- e || (e = {}), this.id = "ss-" + O(), this.style = e.style || "", this.class = e.class || [], this.disabled = e.disabled !== void 0 ? e.disabled : !1, this.alwaysOpen = e.alwaysOpen !== void 0 ? e.alwaysOpen : !1, this.showSearch = e.showSearch !== void 0 ? e.showSearch : !0, this.focusSearch = e.focusSearch !== void 0 ? e.focusSearch : !0, this.keepSearch = e.keepSearch !== void 0 ? e.keepSearch : !1, this.ariaLabel = e.ariaLabel || "Combobox", this.searchPlaceholder = e.searchPlaceholder || "Search...", this.searchText = e.searchText || "No Results", this.searchingText = e.searchingText || "Searching...", this.searchHighlight = e.searchHighlight !== void 0 ? e.searchHighlight : !1, this.closeOnSelect = e.closeOnSelect !== void 0 ? e.closeOnSelect : !0, this.contentLocation = e.contentLocation || document.body, this.contentPosition = e.contentPosition || "absolute", this.contentWidth = e.contentWidth || "", this.openPosition = e.openPosition || "auto", this.placeholderText = e.placeholderText !== void 0 ? e.placeholderText : "Select Value", this.allowDeselect = e.allowDeselect !== void 0 ? e.allowDeselect : !1, this.hideSelected = e.hideSelected !== void 0 ? e.hideSelected : !1, this.keepOrder = e.keepOrder !== void 0 ? e.keepOrder : !1, this.showOptionTooltips = e.showOptionTooltips !== void 0 ? e.showOptionTooltips : !1, this.minSelected = e.minSelected || 0, this.maxSelected = e.maxSelected || 1e3, this.timeoutDelay = e.timeoutDelay || 200, this.maxValuesShown = e.maxValuesShown || 20, this.maxValuesMessage = e.maxValuesMessage || "{number} selected", this.addableText = e.addableText || 'Press "Enter" to add {value}';
1221
- }
85
+ //#endregion
86
+ //#region src/slim-select/store.ts
87
+ var u = class {
88
+ id;
89
+ value;
90
+ text;
91
+ html;
92
+ defaultSelected;
93
+ selected;
94
+ display;
95
+ disabled;
96
+ placeholder;
97
+ class;
98
+ style;
99
+ data;
100
+ mandatory;
101
+ constructor(e) {
102
+ this.id = !e.id || e.id === "" ? a() : e.id, this.value = e.value === void 0 ? e.text || "" : e.value || "", this.text = e.text || "", this.html = e.html || "", this.defaultSelected = e.defaultSelected === void 0 ? !1 : e.defaultSelected, this.selected = e.selected === void 0 ? !1 : e.selected, this.display = e.display === void 0 ? !0 : e.display, this.disabled = e.disabled === void 0 ? !1 : e.disabled, this.mandatory = e.mandatory === void 0 ? !1 : e.mandatory, this.placeholder = e.placeholder === void 0 ? !1 : e.placeholder, this.class = e.class || "", this.style = e.style || "", this.data = e.data || {};
103
+ }
104
+ }, d = class {
105
+ id;
106
+ label;
107
+ selectAll;
108
+ selectAllText;
109
+ closable;
110
+ options;
111
+ constructor(e) {
112
+ if (this.id = !e.id || e.id === "" ? a() : e.id, this.label = e.label || "", this.selectAll = e.selectAll === void 0 ? !1 : e.selectAll, this.selectAllText = e.selectAllText || "Select All", this.closable = e.closable || "off", this.options = [], e.options) for (let t of e.options) this.options.push(new u(t));
113
+ }
114
+ }, f = class {
115
+ selectType = "single";
116
+ data = [];
117
+ selectedOrder = [];
118
+ constructor(e, t) {
119
+ this.selectType = e, this.setData(t);
120
+ }
121
+ validateDataArray(e) {
122
+ if (!Array.isArray(e)) return /* @__PURE__ */ Error("Data must be an array");
123
+ for (let t of e) if (t) if (t instanceof d || "label" in t) {
124
+ if (!("label" in t)) return /* @__PURE__ */ Error("Optgroup must have a label");
125
+ if ("options" in t && t.options) for (let e of t.options) {
126
+ let t = this.validateOption(e);
127
+ if (t) return t;
128
+ }
129
+ } else if (t instanceof u || "text" in t) {
130
+ let e = this.validateOption(t);
131
+ if (e) return e;
132
+ } else return /* @__PURE__ */ Error("Data object must be a valid optgroup or option");
133
+ return null;
134
+ }
135
+ validateOption(e) {
136
+ return "text" in e ? null : /* @__PURE__ */ Error("Option must have a text");
137
+ }
138
+ partialToFullData(e) {
139
+ let t = [];
140
+ return e.forEach((e) => {
141
+ if (e) {
142
+ if (e instanceof d || "label" in e) {
143
+ let n = [];
144
+ "options" in e && e.options && e.options.forEach((e) => {
145
+ n.push(new u(e));
146
+ }), n.length > 0 && t.push(new d(e));
147
+ }
148
+ (e instanceof u || "text" in e) && t.push(new u(e));
149
+ }
150
+ }), t;
151
+ }
152
+ setData(e, t = !1) {
153
+ let n = this.partialToFullData(e), r = [];
154
+ if (t) {
155
+ r = this.getSelectedOptions();
156
+ let e = [];
157
+ r.forEach((t) => {
158
+ let r = !1;
159
+ for (let e of n) {
160
+ if (e instanceof u && e.id === t.id) {
161
+ r = !0;
162
+ break;
163
+ }
164
+ if (e instanceof d) {
165
+ for (let n of e.options) if (n.id === t.id) {
166
+ r = !0;
167
+ break;
168
+ }
169
+ }
170
+ }
171
+ r || e.push(t);
172
+ }), this.data = [...e, ...n];
173
+ } else this.data = n;
174
+ if (this.selectType === "single") {
175
+ let e = t && r.length === 0;
176
+ this.setSelectedBy("id", this.getSelected(), e);
177
+ }
178
+ }
179
+ getData() {
180
+ return this.filter(null, !0);
181
+ }
182
+ getDataOptions() {
183
+ return this.filter(null, !1);
184
+ }
185
+ addOption(e, t = !1) {
186
+ if (t) {
187
+ let t = [new u(e)];
188
+ this.setData(t.concat(this.getData()));
189
+ } else this.setData(this.getData().concat(new u(e)));
190
+ }
191
+ setSelectedBy(e, t, n = !1) {
192
+ let r = null, i = !1, a = [];
193
+ for (let n of this.data) {
194
+ if (n instanceof d) for (let o of n.options) {
195
+ r ||= o;
196
+ let n = o[e] || "";
197
+ o.selected = i ? !1 : t.includes(n), o.selected && (a.push(o), this.selectType === "single" && (i = !0));
198
+ }
199
+ n instanceof u && (r ||= n, n.selected = i ? !1 : t.includes(n[e]), n.selected && (a.push(n), this.selectType === "single" && (i = !0)));
200
+ }
201
+ this.selectType === "single" && r && !i && !n && (r.selected = !0, a.push(r));
202
+ let o = t.map((t) => a.find((n) => n[e] === t)?.id || "");
203
+ this.selectedOrder = o;
204
+ }
205
+ getSelected() {
206
+ return this.getSelectedOptions().map((e) => e.id);
207
+ }
208
+ getSelectedValues() {
209
+ return this.getSelectedOptions().map((e) => e.value);
210
+ }
211
+ getSelectedOptions() {
212
+ return this.filter((e) => e.selected, !1);
213
+ }
214
+ getOptgroupByID(e) {
215
+ for (let t of this.data) if (t instanceof d && t.id === e) return t;
216
+ return null;
217
+ }
218
+ getOptionByID(e) {
219
+ let t = this.filter((t) => t.id === e, !1);
220
+ return t.length ? t[0] : null;
221
+ }
222
+ getSelectType() {
223
+ return this.selectType;
224
+ }
225
+ getFirstOption() {
226
+ let e = null;
227
+ for (let t of this.data) if (t instanceof d ? e = t.options[0] : t instanceof u && (e = t), e) break;
228
+ return e;
229
+ }
230
+ search(e, t) {
231
+ return e = e.trim(), e === "" ? this.getData() : this.filter((n) => t(n, e), !0);
232
+ }
233
+ filter(e, t) {
234
+ let n = [];
235
+ return this.data.forEach((r) => {
236
+ if (r instanceof d) {
237
+ let i = [];
238
+ if (r.options.forEach((r) => {
239
+ (!e || e(r)) && (t ? i.push(new u(r)) : n.push(new u(r)));
240
+ }), i.length > 0) {
241
+ let e = new d(r);
242
+ e.options = i, n.push(e);
243
+ }
244
+ }
245
+ r instanceof u && (!e || e(r)) && n.push(new u(r));
246
+ }), n;
247
+ }
248
+ selectedOrderOptions(e) {
249
+ let t = [];
250
+ return this.selectedOrder.forEach((n) => {
251
+ let r = e.find((e) => e.id === n);
252
+ r && t.push(r);
253
+ }), e.forEach((e) => {
254
+ let n = !1;
255
+ t.forEach((t) => {
256
+ if (e.id === t.id) {
257
+ n = !0;
258
+ return;
259
+ }
260
+ }), n || t.push(e);
261
+ }), t;
262
+ }
263
+ }, p = class {
264
+ settings;
265
+ store;
266
+ callbacks;
267
+ lastSelectedOption;
268
+ lastRenderedOptions;
269
+ closeAnimationTimeout = null;
270
+ main;
271
+ content;
272
+ classes;
273
+ constructor(e, t, n, r) {
274
+ this.store = n, this.settings = e, this.classes = t, this.callbacks = r, this.lastSelectedOption = null, this.lastRenderedOptions = [], this.main = this.mainDiv(), this.content = this.contentDiv(), this.updateClassStyles(), this.updateAriaAttributes(), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto"), this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main);
275
+ }
276
+ addClasses(e, t) {
277
+ if (!t || t.trim() === "") return;
278
+ let n = t.split(" ").filter((e) => e.trim() !== "");
279
+ for (let t of n) e.classList.add(t.trim());
280
+ }
281
+ removeClasses(e, t) {
282
+ if (!t || t.trim() === "") return;
283
+ let n = t.split(" ").filter((e) => e.trim() !== "");
284
+ for (let t of n) e.classList.remove(t.trim());
285
+ }
286
+ enable() {
287
+ this.removeClasses(this.main.main, this.classes.disabled), this.main.main.setAttribute("aria-disabled", "false"), this.content.search.input.disabled = !1;
288
+ }
289
+ disable() {
290
+ this.addClasses(this.main.main, this.classes.disabled), this.main.main.setAttribute("aria-disabled", "true"), this.content.search.input.disabled = !0;
291
+ }
292
+ open() {
293
+ this.main.arrow.path.setAttribute("d", this.classes.arrowOpen), this.main.main.setAttribute("aria-expanded", "true"), this.closeAnimationTimeout &&= (clearTimeout(this.closeAnimationTimeout), null);
294
+ let e = this.settings.openPosition === "up" ? this.classes.dirAbove : this.classes.dirBelow;
295
+ this.addClasses(this.main.main, e), this.addClasses(this.content.main, e), this.addClasses(this.content.main, this.classes.contentOpen), this.content.search.input.removeAttribute("aria-hidden"), this.moveContent();
296
+ let t = this.store.getSelectedOptions();
297
+ if (t.length) {
298
+ let e = t[t.length - 1].id, n = this.content.list.querySelector("[data-id=\"" + e + "\"]");
299
+ n && this.ensureElementInView(this.content.list, n);
300
+ }
301
+ }
302
+ close() {
303
+ this.main.main.setAttribute("aria-expanded", "false"), this.main.arrow.path.setAttribute("d", this.classes.arrowClose), this.removeClasses(this.content.main, this.classes.contentOpen), this.content.search.input.setAttribute("aria-hidden", "true"), this.main.main.removeAttribute("aria-activedescendant");
304
+ let e = this.getAnimationTiming();
305
+ this.closeAnimationTimeout = setTimeout(() => {
306
+ this.removeClasses(this.main.main, this.classes.dirAbove), this.removeClasses(this.main.main, this.classes.dirBelow), this.removeClasses(this.content.main, this.classes.dirAbove), this.removeClasses(this.content.main, this.classes.dirBelow), this.closeAnimationTimeout = null;
307
+ }, e);
308
+ }
309
+ getAnimationTiming() {
310
+ let e = getComputedStyle(this.content.main).getPropertyValue("--ss-animation-timing").trim();
311
+ if (e) {
312
+ if (e.endsWith("ms")) return parseFloat(e);
313
+ if (e.endsWith("s")) return parseFloat(e) * 1e3;
314
+ }
315
+ return 200;
316
+ }
317
+ updateClassStyles() {
318
+ if (this.main.main.className = "", this.main.main.removeAttribute("style"), this.content.main.className = "", this.content.main.removeAttribute("style"), this.addClasses(this.main.main, this.classes.main), this.addClasses(this.content.main, this.classes.content), this.settings.style !== "" && (this.main.main.style.cssText = this.settings.style, this.content.main.style.cssText = this.settings.style), this.settings.class.length) for (let e of this.settings.class) e.trim() !== "" && (this.main.main.classList.add(e.trim()), this.content.main.classList.add(e.trim()));
319
+ (this.settings.contentPosition === "relative" || this.settings.contentPosition === "fixed") && this.content.main.classList.add("ss-" + this.settings.contentPosition);
320
+ }
321
+ updateAriaAttributes() {
322
+ let e = this.content.list.id;
323
+ this.main.main.role = "combobox", this.main.main.setAttribute("aria-haspopup", "listbox"), this.main.main.setAttribute("aria-controls", e), this.main.main.setAttribute("aria-expanded", "false"), this.content.list.setAttribute("role", "listbox"), this.content.list.setAttribute("aria-label", this.settings.ariaLabel + " listbox"), this.settings.isMultiple && this.content.list.setAttribute("aria-multiselectable", "true"), this.content.search.input.setAttribute("aria-controls", e);
324
+ }
325
+ mainDiv() {
326
+ let e = document.createElement("div");
327
+ e.dataset.id = this.settings.id, e.setAttribute("aria-label", this.settings.ariaLabel), e.tabIndex = 0, e.onkeydown = (e) => {
328
+ switch (e.key) {
329
+ case "ArrowUp":
330
+ case "ArrowDown": return this.callbacks.open(), e.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
331
+ case "Tab": return this.callbacks.close(), !0;
332
+ case "Enter":
333
+ case " ":
334
+ this.callbacks.open();
335
+ let t = this.content.list.querySelector("." + this.classes.getFirst("highlighted"));
336
+ return t && t.click(), !1;
337
+ case "Escape": return this.callbacks.close(), !1;
338
+ }
339
+ return e.key.length === 1 && this.callbacks.open(), !0;
340
+ }, e.onclick = (e) => {
341
+ this.settings.disabled || (this.settings.isOpen ? this.callbacks.close() : this.callbacks.open());
342
+ };
343
+ let t = document.createElement("div");
344
+ this.addClasses(t, this.classes.values), e.appendChild(t);
345
+ let n = document.createElement("div");
346
+ this.addClasses(n, this.classes.deselect), n.setAttribute("role", "button"), n.setAttribute("aria-label", this.settings.deselectText), n.setAttribute("tabindex", "0");
347
+ let r = this.store?.getSelectedOptions();
348
+ !this.settings.allowDeselect || this.settings.isMultiple && r && r.length <= 0 ? this.addClasses(n, this.classes.hide) : this.removeClasses(n, this.classes.hide), n.onclick = (e) => {
349
+ if (e.stopPropagation(), this.settings.disabled) return;
350
+ let t = !0, n = this.store.getSelectedOptions();
351
+ if (this.callbacks.beforeChange && (t = this.callbacks.beforeChange([], n) === !0), t) {
352
+ if (this.settings.isMultiple) this.callbacks.setSelected([], !1), this.updateDeselectAll();
353
+ else {
354
+ let e = this.store.getFirstOption(), t = e ? e.id : "";
355
+ this.callbacks.setSelected(t, !1);
356
+ }
357
+ this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
358
+ }
359
+ }, n.onkeydown = (e) => {
360
+ (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n.click());
361
+ };
362
+ let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
363
+ i.setAttribute("viewBox", "0 0 100 100");
364
+ let a = document.createElementNS("http://www.w3.org/2000/svg", "path");
365
+ a.setAttribute("d", this.classes.deselectPath), i.appendChild(a), n.appendChild(i), e.appendChild(n);
366
+ let o = document.createElementNS("http://www.w3.org/2000/svg", "svg");
367
+ this.addClasses(o, this.classes.arrow), o.setAttribute("viewBox", "0 0 100 100");
368
+ let s = document.createElementNS("http://www.w3.org/2000/svg", "path");
369
+ return s.setAttribute("d", this.classes.arrowClose), this.settings.alwaysOpen && this.addClasses(o, this.classes.hide), o.appendChild(s), e.appendChild(o), {
370
+ main: e,
371
+ values: t,
372
+ deselect: {
373
+ main: n,
374
+ svg: i,
375
+ path: a
376
+ },
377
+ arrow: {
378
+ main: o,
379
+ path: s
380
+ }
381
+ };
382
+ }
383
+ mainFocus(e) {
384
+ e !== "click" && this.main.main.focus({ preventScroll: !0 });
385
+ }
386
+ placeholder() {
387
+ let e = this.store.filter((e) => e.placeholder, !1), t = this.settings.placeholderText;
388
+ e.length && (e[0].html === "" ? e[0].text !== "" && (t = e[0].text) : t = e[0].html);
389
+ let n = document.createElement("div");
390
+ return this.addClasses(n, this.classes.placeholder), n.innerHTML = t, n;
391
+ }
392
+ renderValues() {
393
+ if (!this.settings.isMultiple) {
394
+ this.renderSingleValue();
395
+ return;
396
+ }
397
+ this.renderMultipleValues(), this.updateDeselectAll();
398
+ }
399
+ renderSingleValue() {
400
+ let e = this.store.filter((e) => e.selected && !e.placeholder, !1), t = e.length > 0 ? e[0] : null;
401
+ if (!t) this.main.values.innerHTML = this.placeholder().outerHTML;
402
+ else {
403
+ let e = document.createElement("div");
404
+ this.addClasses(e, this.classes.single), t.html ? e.innerHTML = t.html : e.innerText = t.text, this.main.values.innerHTML = e.outerHTML;
405
+ }
406
+ !this.settings.allowDeselect || !e.length ? this.addClasses(this.main.deselect.main, this.classes.hide) : this.removeClasses(this.main.deselect.main, this.classes.hide);
407
+ }
408
+ renderMultipleValues() {
409
+ let e = this.main.values.childNodes, t = this.store.filter((e) => e.selected && e.display, !1);
410
+ if (t.length === 0) {
411
+ this.main.values.innerHTML = this.placeholder().outerHTML;
412
+ return;
413
+ } else {
414
+ let e = this.main.values.querySelector("." + this.classes.getFirst("placeholder"));
415
+ e && e.remove();
416
+ }
417
+ if (this.settings.multiString) {
418
+ let e = t;
419
+ this.settings.keepOrder && (e = this.store.selectedOrderOptions(e));
420
+ let n = document.createElement("div");
421
+ this.addClasses(n, this.classes.multiString), n.textContent = e.map((e) => e.text).join(", "), this.settings.showOptionTooltips && n.setAttribute("title", n.textContent), this.main.values.innerHTML = n.outerHTML;
422
+ return;
423
+ }
424
+ if (t.length > this.settings.maxValuesShown) {
425
+ let e = document.createElement("div");
426
+ this.addClasses(e, this.classes.max), e.textContent = this.settings.maxValuesMessage.replace("{number}", t.length.toString()), this.main.values.innerHTML = e.outerHTML;
427
+ return;
428
+ } else {
429
+ let e = this.main.values.querySelector("." + this.classes.getFirst("max"));
430
+ e && e.remove();
431
+ }
432
+ this.settings.keepOrder && (t = this.store.selectedOrderOptions(t));
433
+ let n = [];
434
+ for (let r = 0; r < e.length; r++) {
435
+ let i = e[r], a = i.getAttribute("data-id");
436
+ a && (t.filter((e) => e.id === a, !1).length || n.push(i));
437
+ }
438
+ for (let e of n) this.addClasses(e, this.classes.valueOut), setTimeout(() => {
439
+ this.main.values.hasChildNodes() && this.main.values.contains(e) && this.main.values.removeChild(e);
440
+ }, 100);
441
+ e = this.main.values.childNodes;
442
+ for (let n = 0; n < t.length; n++) {
443
+ let r = !0;
444
+ for (let i = 0; i < e.length; i++) t[n].id === String(e[i].dataset.id) && (r = !1);
445
+ r && (this.settings.keepOrder || e.length === 0 ? this.main.values.appendChild(this.multipleValue(t[n])) : n === 0 ? this.main.values.insertBefore(this.multipleValue(t[n]), e[n]) : e[n - 1].insertAdjacentElement("afterend", this.multipleValue(t[n])));
446
+ }
447
+ }
448
+ multipleValue(e) {
449
+ let t = document.createElement("div");
450
+ this.addClasses(t, this.classes.value), t.dataset.id = e.id;
451
+ let n = document.createElement("div");
452
+ if (this.addClasses(n, this.classes.valueText), n.textContent = e.text, t.appendChild(n), !e.mandatory) {
453
+ let n = document.createElement("div");
454
+ this.addClasses(n, this.classes.valueDelete), n.setAttribute("tabindex", "0"), n.setAttribute("role", "button"), n.setAttribute("aria-label", `${this.settings.removeText} ${e.text}`), n.onclick = (t) => {
455
+ if (t.preventDefault(), t.stopPropagation(), this.settings.disabled) return;
456
+ let n = !0, r = this.store.getSelectedOptions(), i = r.filter((t) => t.selected && t.id !== e.id, !0);
457
+ if (!(this.settings.minSelected && i.length < this.settings.minSelected) && (this.callbacks.beforeChange && (n = this.callbacks.beforeChange(i, r) === !0), n)) {
458
+ let e = [];
459
+ for (let t of i) {
460
+ if (t instanceof d) for (let n of t.options) n.id && e.push(n.id);
461
+ t instanceof u && e.push(t.id);
462
+ }
463
+ this.callbacks.setSelected(e, !1), this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(i), this.updateDeselectAll();
464
+ }
465
+ };
466
+ let r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
467
+ r.setAttribute("viewBox", "0 0 100 100");
468
+ let i = document.createElementNS("http://www.w3.org/2000/svg", "path");
469
+ i.setAttribute("d", this.classes.optionDelete), r.appendChild(i), n.appendChild(r), t.appendChild(n), n.onkeydown = (e) => {
470
+ e.key === "Enter" && n.click();
471
+ };
472
+ }
473
+ return t;
474
+ }
475
+ contentDiv() {
476
+ let e = document.createElement("div");
477
+ e.dataset.id = this.settings.id;
478
+ let t = this.searchDiv();
479
+ e.appendChild(t.main);
480
+ let n = this.listDiv();
481
+ return e.appendChild(n), {
482
+ main: e,
483
+ search: t,
484
+ list: n
485
+ };
486
+ }
487
+ moveContent() {
488
+ if (this.settings.contentPosition === "relative") {
489
+ this.moveContentBelow();
490
+ return;
491
+ }
492
+ if (this.settings.openPosition === "down") {
493
+ this.moveContentBelow();
494
+ return;
495
+ } else if (this.settings.openPosition === "up") {
496
+ this.moveContentAbove();
497
+ return;
498
+ }
499
+ this.putContent() === "up" ? this.moveContentAbove() : this.moveContentBelow();
500
+ }
501
+ searchDiv() {
502
+ let e = document.createElement("div"), t = document.createElement("input"), n = document.createElement("div");
503
+ this.addClasses(e, this.classes.search);
504
+ let r = {
505
+ main: e,
506
+ input: t
507
+ };
508
+ if (this.settings.showSearch || (this.addClasses(e, this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput = s((e) => {
509
+ this.callbacks.search(e.target.value);
510
+ }, 100), t.onkeydown = (e) => {
511
+ switch (e.key) {
512
+ case "ArrowUp":
513
+ case "ArrowDown": return e.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
514
+ case "Tab": return this.callbacks.close(), !0;
515
+ case "Escape": return this.callbacks.close(), !1;
516
+ case " ":
517
+ let t = this.content.list.querySelector("." + this.classes.getFirst("highlighted"));
518
+ return t ? (t.click(), !1) : !0;
519
+ case "Enter":
520
+ let r = this.content.list.querySelector("." + this.classes.getFirst("highlighted"));
521
+ return r ? (r.click(), !1) : this.callbacks.addable ? (n.click(), !1) : !0;
522
+ }
523
+ return !0;
524
+ }, e.appendChild(t), this.callbacks.addable) {
525
+ this.addClasses(n, this.classes.addable);
526
+ let t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
527
+ t.setAttribute("viewBox", "0 0 100 100");
528
+ let i = document.createElementNS("http://www.w3.org/2000/svg", "path");
529
+ i.setAttribute("d", this.classes.addablePath), t.appendChild(i), n.appendChild(t), n.onclick = (e) => {
530
+ if (e.preventDefault(), e.stopPropagation(), !this.callbacks.addable) return;
531
+ let t = this.content.search.input.value.trim();
532
+ if (t === "") {
533
+ this.content.search.input.focus();
534
+ return;
535
+ }
536
+ let n = (e) => {
537
+ let t = new u(e);
538
+ if (this.callbacks.addOption(t), this.settings.isMultiple) {
539
+ let e = this.store.getSelected();
540
+ e.push(t.id), this.callbacks.setSelected(e, !0);
541
+ } else this.callbacks.setSelected([t.id], !0);
542
+ this.callbacks.search(""), this.settings.closeOnSelect && setTimeout(() => {
543
+ this.callbacks.close();
544
+ }, 100);
545
+ }, r = this.callbacks.addable(t);
546
+ r === !1 || r == null || (r instanceof Promise ? r.then((e) => {
547
+ typeof e == "string" ? n({
548
+ text: e,
549
+ value: e
550
+ }) : r instanceof Error ? this.renderError(r.message) : n(e);
551
+ }) : typeof r == "string" ? n({
552
+ text: r,
553
+ value: r
554
+ }) : r instanceof Error ? this.renderError(r.message) : n(r));
555
+ }, e.appendChild(n), r.addable = {
556
+ main: n,
557
+ svg: t,
558
+ path: i
559
+ };
560
+ }
561
+ return r;
562
+ }
563
+ searchFocus() {
564
+ this.content.search.input.focus({ preventScroll: !0 });
565
+ }
566
+ getOptions(e = !1, t = !1, n = !1) {
567
+ let r = "." + this.classes.getFirst("option");
568
+ return e && (r += ":not(." + this.classes.getFirst("placeholder") + ")"), t && (r += ":not(." + this.classes.getFirst("disabled") + ")"), n && (r += ":not(." + this.classes.getFirst("hide") + ")"), Array.from(this.content.list.querySelectorAll(r));
569
+ }
570
+ highlight(e) {
571
+ let t = this.getOptions(!0, !0, !0);
572
+ if (t.length === 0) return;
573
+ if (t.length === 1 && !t[0].classList.contains(this.classes.getFirst("highlighted"))) {
574
+ this.addClasses(t[0], this.classes.highlighted);
575
+ return;
576
+ }
577
+ let n = !1;
578
+ for (let e of t) e.classList.contains(this.classes.getFirst("highlighted")) && (n = !0);
579
+ if (!n) {
580
+ for (let e of t) if (e.classList.contains(this.classes.getFirst("selected"))) {
581
+ this.addClasses(e, this.classes.highlighted);
582
+ break;
583
+ }
584
+ }
585
+ for (let n = 0; n < t.length; n++) if (t[n].classList.contains(this.classes.getFirst("highlighted"))) {
586
+ let r = t[n];
587
+ this.removeClasses(r, this.classes.highlighted);
588
+ let i = r.parentElement;
589
+ if (i && i.classList.contains(this.classes.getFirst("mainOpen"))) {
590
+ let e = i.querySelector("." + this.classes.getFirst("optgroupLabel"));
591
+ e && e.click();
592
+ }
593
+ let a = t[e === "down" ? n + 1 < t.length ? n + 1 : 0 : n - 1 >= 0 ? n - 1 : t.length - 1];
594
+ this.addClasses(a, this.classes.highlighted), this.ensureElementInView(this.content.list, a), a.id && this.main.main.setAttribute("aria-activedescendant", a.id);
595
+ let o = a.parentElement;
596
+ if (o && o.classList.contains(this.classes.getFirst("close"))) {
597
+ let e = o.querySelector("." + this.classes.getFirst("optgroupLabel"));
598
+ e && e.click();
599
+ }
600
+ return;
601
+ }
602
+ let r = t[e === "down" ? 0 : t.length - 1];
603
+ this.addClasses(r, this.classes.highlighted), r.id && this.main.main.setAttribute("aria-activedescendant", r.id), this.ensureElementInView(this.content.list, r);
604
+ }
605
+ listDiv() {
606
+ let e = document.createElement("div");
607
+ this.addClasses(e, this.classes.list);
608
+ let t = this.settings.id + "-list";
609
+ return e.id = t, e.dataset.id = t, e;
610
+ }
611
+ renderError(e) {
612
+ this.content.list.innerHTML = "";
613
+ let t = document.createElement("div");
614
+ this.addClasses(t, this.classes.error), t.textContent = e, this.content.list.appendChild(t);
615
+ }
616
+ renderSearching() {
617
+ this.content.list.innerHTML = "";
618
+ let e = document.createElement("div");
619
+ this.addClasses(e, this.classes.searching), e.textContent = this.settings.searchingText, this.content.list.appendChild(e);
620
+ }
621
+ renderOptions(e) {
622
+ if (this.lastRenderedOptions = e.map((e) => e instanceof u ? [e] : e.options.map((e) => new u(e))).flat(), this.content.list.innerHTML = "", e.length === 0) {
623
+ let e = document.createElement("div");
624
+ this.addClasses(e, this.classes.search), this.callbacks.addable ? e.innerHTML = this.settings.addableText.replace("{value}", this.content.search.input.value) : e.innerHTML = this.settings.searchText, this.content.list.appendChild(e);
625
+ return;
626
+ }
627
+ this.settings.allowDeselect && !this.settings.isMultiple && (this.store.filter((e) => e.placeholder, !1).length || this.store.addOption(new u({
628
+ text: "",
629
+ value: "",
630
+ selected: !1,
631
+ placeholder: !0
632
+ }), !0));
633
+ let t = document.createDocumentFragment();
634
+ for (let n of e) {
635
+ if (n instanceof d) {
636
+ let e = document.createElement("div");
637
+ this.addClasses(e, this.classes.optgroup);
638
+ let r = document.createElement("div");
639
+ this.addClasses(r, this.classes.optgroupLabel), e.appendChild(r);
640
+ let i = document.createElement("div");
641
+ this.addClasses(i, this.classes.optgroupLabelText), i.textContent = n.label, r.appendChild(i);
642
+ let a = document.createElement("div");
643
+ if (this.addClasses(a, this.classes.optgroupActions), r.appendChild(a), this.settings.isMultiple && n.selectAll) {
644
+ let e = document.createElement("div");
645
+ this.addClasses(e, this.classes.optgroupSelectAll);
646
+ let t = !0;
647
+ for (let e of n.options) if (!e.selected) {
648
+ t = !1;
649
+ break;
650
+ }
651
+ t && this.addClasses(e, this.classes.selected);
652
+ let r = document.createElement("span");
653
+ r.textContent = n.selectAllText, e.appendChild(r);
654
+ let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
655
+ i.setAttribute("viewBox", "0 0 100 100"), e.appendChild(i);
656
+ let o = document.createElementNS("http://www.w3.org/2000/svg", "path");
657
+ o.setAttribute("d", this.classes.optgroupSelectAllBox), i.appendChild(o);
658
+ let s = document.createElementNS("http://www.w3.org/2000/svg", "path");
659
+ s.setAttribute("d", this.classes.optgroupSelectAllCheck), i.appendChild(s), e.addEventListener("click", (e) => {
660
+ e.preventDefault(), e.stopPropagation();
661
+ let r = this.store.getSelected();
662
+ if (t) {
663
+ let e = r.filter((e) => {
664
+ for (let t of n.options) if (e === t.id) return !1;
665
+ return !0;
666
+ });
667
+ this.callbacks.setSelected(e, !0);
668
+ return;
669
+ } else {
670
+ let e = n.options.map((e) => e.id).filter((e) => e !== void 0), t = r.concat(e);
671
+ for (let e of n.options) e.id && !this.store.getOptionByID(e.id) && this.callbacks.addOption(new u(e));
672
+ this.callbacks.setSelected(t, !0);
673
+ return;
674
+ }
675
+ }), a.appendChild(e);
676
+ }
677
+ if (n.closable !== "off") {
678
+ let t = document.createElement("div");
679
+ this.addClasses(t, this.classes.optgroupClosable);
680
+ let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
681
+ i.setAttribute("viewBox", "0 0 100 100"), this.addClasses(i, this.classes.arrow), t.appendChild(i);
682
+ let o = document.createElementNS("http://www.w3.org/2000/svg", "path");
683
+ i.appendChild(o), n.options.some((e) => e.selected) || this.content.search.input.value.trim() !== "" ? (this.addClasses(t, this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : n.closable === "open" ? (this.addClasses(e, this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : n.closable === "close" && (this.addClasses(e, this.classes.close), o.setAttribute("d", this.classes.arrowClose)), r.addEventListener("click", (t) => {
684
+ t.preventDefault(), t.stopPropagation(), e.classList.contains(this.classes.getFirst("close")) ? (this.removeClasses(e, this.classes.close), this.addClasses(e, this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : (this.removeClasses(e, this.classes.mainOpen), this.addClasses(e, this.classes.close), o.setAttribute("d", this.classes.arrowClose));
685
+ }), a.appendChild(t);
686
+ }
687
+ e.appendChild(r);
688
+ for (let r of n.options) e.appendChild(this.option(new u(r))), t.appendChild(e);
689
+ }
690
+ n instanceof u && t.appendChild(this.option(n));
691
+ }
692
+ this.content.list.appendChild(t);
693
+ }
694
+ option(e) {
695
+ if (e.placeholder) {
696
+ let e = document.createElement("div");
697
+ return this.addClasses(e, this.classes.option), this.addClasses(e, this.classes.hide), e;
698
+ }
699
+ let t = document.createElement("div");
700
+ return t.dataset.id = e.id, t.id = this.settings.id + "-" + e.id, this.addClasses(t, this.classes.option), t.setAttribute("role", "option"), e.class && e.class.split(" ").forEach((e) => {
701
+ t.classList.add(e);
702
+ }), e.style && (t.style.cssText = e.style), this.settings.searchHighlight && this.content.search.input.value.trim() !== "" ? t.innerHTML = this.highlightText(e.html === "" ? e.text : e.html, this.content.search.input.value, this.classes.searchHighlighter) : e.html === "" ? t.textContent = e.text : t.innerHTML = e.html, this.settings.showOptionTooltips && t.textContent && t.setAttribute("title", t.textContent), e.display || this.addClasses(t, this.classes.hide), e.disabled && this.addClasses(t, this.classes.disabled), e.selected && this.settings.hideSelected && this.addClasses(t, this.classes.hide), e.selected ? (this.addClasses(t, this.classes.selected), t.setAttribute("aria-selected", "true"), this.main.main.setAttribute("aria-activedescendant", t.id)) : (this.removeClasses(t, this.classes.selected), t.setAttribute("aria-selected", "false")), t.addEventListener("click", (t) => {
703
+ t.preventDefault(), t.stopPropagation();
704
+ let n = this.store.getSelected(), r = t.currentTarget, i = String(r.dataset.id), a = t.ctrlKey || t.metaKey;
705
+ if (e.disabled || !this.settings.isMultiple && e.selected && !this.settings.allowDeselect || e.selected && e.mandatory || this.settings.isMultiple && this.settings.maxSelected <= n.length && !e.selected || this.settings.isMultiple && this.settings.minSelected >= n.length && e.selected && !a) return;
706
+ let o = !1, s = this.store.getSelectedOptions(), c = [];
707
+ if (this.settings.isMultiple) {
708
+ let n = s.some((e) => e.id === i);
709
+ if (t.shiftKey && this.lastSelectedOption) {
710
+ let t = this.lastRenderedOptions, n = t.findIndex((e) => e.id === this.lastSelectedOption.id), r = t.findIndex((t) => t.id === e.id);
711
+ if (n >= 0 && r >= 0) {
712
+ let e = Math.min(n, r), i = Math.max(n, r), a = t.slice(e, i + 1).filter((e) => !s.find((t) => t.id === e.id));
713
+ c = s.length + a.length <= this.settings.maxSelected ? s.concat(a) : s;
714
+ } else c = s;
715
+ } else c = n ? s.filter((e) => e.id !== i) : s.concat(e), this.lastSelectedOption = e;
716
+ }
717
+ if (this.settings.isMultiple || (c = e.selected ? [] : [e]), this.callbacks.beforeChange || (o = !0), this.callbacks.beforeChange && (o = this.callbacks.beforeChange(c, s) !== !1), o) {
718
+ this.store.getOptionByID(i) || this.callbacks.addOption(e), this.callbacks.setSelected(c.map((e) => e.id), !1);
719
+ let n = t.ctrlKey || t.metaKey || t.shiftKey;
720
+ this.settings.closeOnSelect && !(this.settings.isMultiple && n) && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(c);
721
+ }
722
+ }), t;
723
+ }
724
+ destroy() {
725
+ this.closeAnimationTimeout &&= (clearTimeout(this.closeAnimationTimeout), null), this.main.main.remove(), this.content.main.remove();
726
+ }
727
+ highlightText(e, t, n) {
728
+ let r = t.trim();
729
+ if (r === "") return e;
730
+ let i = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), a = document.createElement("div");
731
+ a.innerHTML = e;
732
+ let o = (e) => {
733
+ if (e.nodeType === Node.TEXT_NODE) {
734
+ let t = e.textContent || "", r = RegExp("(" + i + ")", "i");
735
+ if (r.test(t)) {
736
+ let i = document.createElement("span");
737
+ t.split(r).forEach((e, t) => {
738
+ if (e && r.test(e)) {
739
+ let t = document.createElement("mark");
740
+ t.className = n, t.textContent = e, i.appendChild(t);
741
+ } else e && i.appendChild(document.createTextNode(e));
742
+ }), e.parentNode?.replaceChild(i, e);
743
+ }
744
+ } else e.nodeType === Node.ELEMENT_NODE && Array.from(e.childNodes).forEach((e) => o(e));
745
+ };
746
+ return Array.from(a.childNodes).forEach((e) => o(e)), a.innerHTML;
747
+ }
748
+ setContentDirection(e) {
749
+ let t = e === "above", n = t ? this.classes.dirAbove : this.classes.dirBelow, r = t ? this.classes.dirBelow : this.classes.dirAbove;
750
+ if (this.removeClasses(this.main.main, r), this.addClasses(this.main.main, n), this.removeClasses(this.content.main, r), this.addClasses(this.content.main, n), t) {
751
+ let e = this.main.main.offsetHeight, t = this.content.main.offsetHeight;
752
+ this.content.main.style.margin = "-" + (e + t - 1) + "px 0px 0px 0px";
753
+ } else this.content.main.style.margin = "-1px 0px 0px 0px";
754
+ }
755
+ setContentPosition() {
756
+ if (this.settings.contentPosition === "relative") return;
757
+ let e = this.main.main.getBoundingClientRect(), t, n;
758
+ this.settings.contentPosition === "fixed" ? (t = e.top + e.height, n = e.left) : (t = e.top + window.scrollY + e.height, n = e.left + window.scrollX), this.content.main.style.top = t + "px", this.content.main.style.left = n + "px";
759
+ let r = this.settings.contentWidth;
760
+ this.content.main.style.width = "", this.content.main.style.minWidth = "", this.content.main.style.maxWidth = "", r ? r.startsWith(">") ? this.content.main.style.minWidth = r.slice(1) : r.startsWith("<") ? this.content.main.style.maxWidth = r.slice(1) : this.content.main.style.width = r : this.content.main.style.width = e.width + "px";
761
+ let i = window.innerWidth - 20, a = () => {
762
+ let e = this.content.main.getBoundingClientRect().right;
763
+ if (e <= i) return;
764
+ let t = e - i, n = parseFloat(this.content.main.style.left) || 0;
765
+ if (this.settings.contentPosition === "fixed") {
766
+ let e = Math.max(20, n - t);
767
+ this.content.main.style.left = e + "px";
768
+ } else {
769
+ let e = Math.max(window.scrollX + 20, n - t);
770
+ this.content.main.style.left = e + "px";
771
+ }
772
+ };
773
+ requestAnimationFrame(() => {
774
+ a(), requestAnimationFrame(a);
775
+ });
776
+ }
777
+ moveContentAbove() {
778
+ this.setContentDirection("above"), this.setContentPosition();
779
+ }
780
+ moveContentBelow() {
781
+ this.setContentDirection("below"), this.setContentPosition();
782
+ }
783
+ ensureElementInView(e, t) {
784
+ let n = e.scrollTop + e.offsetTop, r = n + e.clientHeight, i = t.offsetTop, a = i + t.clientHeight;
785
+ i < n ? e.scrollTop -= n - i : a > r && (e.scrollTop += a - r);
786
+ }
787
+ putContent() {
788
+ let e = this.main.main.offsetHeight, t = this.main.main.getBoundingClientRect(), n = this.content.main.offsetHeight;
789
+ return window.innerHeight - (t.top + e) <= n && t.top > n ? "up" : "down";
790
+ }
791
+ updateDeselectAll() {
792
+ if (!this.store || !this.settings) return;
793
+ let e = this.store.getSelectedOptions(), t = e && e.length > 0, n = this.settings.isMultiple, r = this.settings.allowDeselect, i = this.main.deselect.main, a = this.classes.hide;
794
+ r && !(n && !t) ? this.removeClasses(i, a) : this.addClasses(i, a);
795
+ }
796
+ }, m = class {
797
+ select;
798
+ onValueChange;
799
+ onClassChange;
800
+ onDisabledChange;
801
+ onOptionsChange;
802
+ onLabelClick;
803
+ listen = !1;
804
+ observer = null;
805
+ isUpdating = !1;
806
+ pendingOptionsChange = null;
807
+ preventNativeSelect = null;
808
+ preventNativeSelectMousedown = null;
809
+ preventNativeSelectFocus = null;
810
+ constructor(e) {
811
+ this.select = e, this.valueChange = this.valueChange.bind(this), this.select.addEventListener("change", this.valueChange, { passive: !0 }), this.observer = new MutationObserver(this.observeCall.bind(this)), this.changeListen(!0);
812
+ }
813
+ enable() {
814
+ this.select.disabled = !1;
815
+ }
816
+ disable() {
817
+ this.select.disabled = !0;
818
+ }
819
+ hideUI() {
820
+ this.select.tabIndex = -1, this.select.style.position = "absolute", this.select.style.width = "1px", this.select.style.height = "1px", this.select.style.opacity = "0", this.select.style.overflow = "hidden", this.select.style.pointerEvents = "none", this.select.style.margin = "0", this.select.style.padding = "0", this.select.style.borderWidth = "0", this.select.style.clip = "rect(0 0 0 0)", this.select.setAttribute("aria-hidden", "true"), this.preventNativeSelect || (this.preventNativeSelect = (e) => {
821
+ e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
822
+ }, this.preventNativeSelectMousedown = (e) => {
823
+ e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
824
+ }, this.preventNativeSelectFocus = (e) => {
825
+ e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
826
+ }, this.select.addEventListener("click", this.preventNativeSelect, {
827
+ capture: !0,
828
+ passive: !1
829
+ }), this.select.addEventListener("mousedown", this.preventNativeSelectMousedown, {
830
+ capture: !0,
831
+ passive: !1
832
+ }), this.select.addEventListener("focus", this.preventNativeSelectFocus, {
833
+ capture: !0,
834
+ passive: !1
835
+ }));
836
+ }
837
+ showUI() {
838
+ this.select.removeAttribute("tabindex"), this.select.style.position = "", this.select.style.width = "", this.select.style.height = "", this.select.style.opacity = "", this.select.style.overflow = "", this.select.style.pointerEvents = "", this.select.style.margin = "", this.select.style.padding = "", this.select.style.borderWidth = "", this.select.style.clip = "", this.select.removeAttribute("aria-hidden"), this.preventNativeSelect &&= (this.select.removeEventListener("click", this.preventNativeSelect, { capture: !0 }), null), this.preventNativeSelectMousedown &&= (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0 }), null), this.preventNativeSelectFocus &&= (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: !0 }), null);
839
+ }
840
+ changeListen(e) {
841
+ this.listen = e, e && this.observer && this.observer.observe(this.select, {
842
+ subtree: !0,
843
+ childList: !0,
844
+ attributes: !0
845
+ }), e || this.observer && this.observer.disconnect();
846
+ }
847
+ valueChange(e) {
848
+ return this.listen && this.onValueChange && this.onValueChange(this.getSelectedOptions()), !0;
849
+ }
850
+ observeCall(e) {
851
+ if (!this.listen) return;
852
+ let t = !1, n = !1, r = !1, i = !1;
853
+ for (let a of e) {
854
+ if (a.target === this.select && (a.attributeName === "disabled" && (n = !0), a.attributeName === "class" && (t = !0), a.type === "childList")) {
855
+ for (let e of Array.from(a.addedNodes)) if (e.nodeName === "OPTION" && e.value === this.select.value) {
856
+ i = !0;
857
+ break;
858
+ }
859
+ r = !0;
860
+ }
861
+ (a.target.nodeName === "OPTGROUP" || a.target.nodeName === "OPTION") && (r = !0);
862
+ }
863
+ if (t && this.onClassChange && this.onClassChange(this.select.className.split(" ")), n && this.onDisabledChange && (this.changeListen(!1), this.onDisabledChange(this.select.disabled), this.changeListen(!0)), r && this.onOptionsChange) {
864
+ if (this.isUpdating) {
865
+ if (this.select.options.length > 0) {
866
+ let e = this.getData();
867
+ e.length > 0 && (this.pendingOptionsChange = e);
868
+ }
869
+ i && this.select.dispatchEvent(new Event("change"));
870
+ return;
871
+ }
872
+ this.changeListen(!1), this.onOptionsChange(this.getData()), this.changeListen(!0);
873
+ }
874
+ i && this.select.dispatchEvent(new Event("change"));
875
+ }
876
+ getData() {
877
+ let e = [], t = this.select.childNodes;
878
+ for (let n of t) n.nodeName === "OPTGROUP" && e.push(this.getDataFromOptgroup(n)), n.nodeName === "OPTION" && e.push(this.getDataFromOption(n));
879
+ return e;
880
+ }
881
+ getDataFromOptgroup(e) {
882
+ let t = {
883
+ id: e.id,
884
+ label: e.label,
885
+ selectAll: e.dataset ? e.dataset.selectall === "true" : !1,
886
+ selectAllText: e.dataset ? e.dataset.selectalltext : "Select all",
887
+ closable: e.dataset ? e.dataset.closable : "off",
888
+ options: []
889
+ }, n = e.childNodes;
890
+ for (let e of n) e.nodeName === "OPTION" && t.options.push(this.getDataFromOption(e));
891
+ return t;
892
+ }
893
+ getDataFromOption(e) {
894
+ return {
895
+ id: e.id,
896
+ value: e.value,
897
+ text: e.text,
898
+ html: e.dataset && e.dataset.html ? e.dataset.html : "",
899
+ defaultSelected: e.defaultSelected,
900
+ selected: e.selected,
901
+ display: e.style.display !== "none",
902
+ disabled: e.disabled,
903
+ mandatory: e.dataset ? e.dataset.mandatory === "true" : !1,
904
+ placeholder: e.dataset.placeholder === "true",
905
+ class: e.className,
906
+ style: e.style.cssText,
907
+ data: e.dataset
908
+ };
909
+ }
910
+ getSelectedOptions() {
911
+ let e = [], t = this.select.childNodes;
912
+ for (let n of t) {
913
+ if (n.nodeName === "OPTGROUP") {
914
+ let t = n.childNodes;
915
+ for (let n of t) if (n.nodeName === "OPTION") {
916
+ let t = n;
917
+ t.selected && e.push(this.getDataFromOption(t));
918
+ }
919
+ }
920
+ if (n.nodeName === "OPTION") {
921
+ let t = n;
922
+ t.selected && e.push(this.getDataFromOption(t));
923
+ }
924
+ }
925
+ return e;
926
+ }
927
+ getSelectedValues() {
928
+ return this.getSelectedOptions().map((e) => e.value);
929
+ }
930
+ setSelected(e) {
931
+ this.changeListen(!1);
932
+ let t = this.select.childNodes;
933
+ for (let n of t) {
934
+ if (n.nodeName === "OPTGROUP") {
935
+ let t = n.childNodes;
936
+ for (let n of t) if (n.nodeName === "OPTION") {
937
+ let t = n;
938
+ t.selected = e.includes(t.id);
939
+ }
940
+ }
941
+ if (n.nodeName === "OPTION") {
942
+ let t = n;
943
+ t.selected = e.includes(t.id);
944
+ }
945
+ }
946
+ this.changeListen(!0);
947
+ }
948
+ setSelectedByValue(e) {
949
+ this.changeListen(!1);
950
+ let t = this.select.childNodes;
951
+ for (let n of t) {
952
+ if (n.nodeName === "OPTGROUP") {
953
+ let t = n.childNodes;
954
+ for (let n of t) if (n.nodeName === "OPTION") {
955
+ let t = n;
956
+ t.selected = e.includes(t.value);
957
+ }
958
+ }
959
+ if (n.nodeName === "OPTION") {
960
+ let t = n;
961
+ t.selected = e.includes(t.value);
962
+ }
963
+ }
964
+ this.changeListen(!0);
965
+ }
966
+ updateSelect(e, t, n) {
967
+ this.changeListen(!1), e && (this.select.dataset.id = e), t && (this.select.style.cssText = t), n && (this.select.className = "", n.forEach((e) => {
968
+ e.trim() !== "" && this.select.classList.add(e.trim());
969
+ })), this.changeListen(!0);
970
+ }
971
+ updateOptions(e) {
972
+ if (!(!e || e.length === 0)) {
973
+ this.isUpdating = !0, this.pendingOptionsChange = null, this.changeListen(!1), this.select.innerHTML = "";
974
+ for (let t of e) t instanceof d && this.select.appendChild(this.createOptgroup(t)), t instanceof u && this.select.appendChild(this.createOption(t));
975
+ if (this.select.dispatchEvent(new Event("change", { bubbles: !0 })), this.changeListen(!0), this.isUpdating = !1, this.pendingOptionsChange !== null) {
976
+ let e = this.pendingOptionsChange;
977
+ e.length > 0 && this.onOptionsChange ? (this.pendingOptionsChange = null, this.changeListen(!1), this.onOptionsChange(e), this.changeListen(!0)) : this.pendingOptionsChange = null;
978
+ }
979
+ }
980
+ }
981
+ createOptgroup(e) {
982
+ let t = document.createElement("optgroup");
983
+ if (t.id = e.id, t.label = e.label, e.selectAll && (t.dataset.selectAll = "true"), e.closable !== "off" && (t.dataset.closable = e.closable), e.options) for (let n of e.options) t.appendChild(this.createOption(n));
984
+ return t;
985
+ }
986
+ createOption(e) {
987
+ let t = document.createElement("option");
988
+ return t.id = e.id, t.value = e.value, t.textContent = e.text, e.html !== "" && t.setAttribute("data-html", e.html), t.defaultSelected = e.defaultSelected, t.selected = e.selected, e.disabled && (t.disabled = !0), e.display || (t.style.display = "none"), e.placeholder && t.setAttribute("data-placeholder", "true"), e.mandatory && t.setAttribute("data-mandatory", "true"), e.class && e.class.split(" ").forEach((e) => {
989
+ t.classList.add(e);
990
+ }), e.data && typeof e.data == "object" && Object.keys(e.data).forEach((n) => {
991
+ t.setAttribute("data-" + l(n), e.data[n]);
992
+ }), t;
993
+ }
994
+ setupLabelHandlers() {
995
+ let e = [], t = this.select.id;
996
+ t && document.querySelectorAll(`label[for="${t}"]`).forEach((t) => e.push(t));
997
+ let n = this.select.parentElement;
998
+ for (; n && n !== document.body;) {
999
+ if (n.tagName === "LABEL") {
1000
+ e.push(n);
1001
+ break;
1002
+ }
1003
+ n = n.parentElement;
1004
+ }
1005
+ Array.from(new Set(e)).forEach((e) => {
1006
+ if (e.__slimSelectLabelHandler) return;
1007
+ let t = (e) => {
1008
+ let t = e.target, n = o(t, this.select.dataset.id);
1009
+ e.preventDefault(), !n && this.onLabelClick && this.onLabelClick();
1010
+ };
1011
+ e.__slimSelectLabelHandler = t, e.addEventListener("click", t, {
1012
+ capture: !0,
1013
+ passive: !1
1014
+ });
1015
+ });
1016
+ }
1017
+ removeLabelHandlers() {
1018
+ let e = [], t = this.select.id;
1019
+ t && document.querySelectorAll(`label[for="${t}"]`).forEach((t) => e.push(t));
1020
+ let n = this.select.parentElement;
1021
+ for (; n && n !== document.body;) {
1022
+ if (n.tagName === "LABEL") {
1023
+ e.push(n);
1024
+ break;
1025
+ }
1026
+ n = n.parentElement;
1027
+ }
1028
+ Array.from(new Set(e)).forEach((e) => {
1029
+ let t = e.__slimSelectLabelHandler;
1030
+ t && (e.removeEventListener("click", t, { capture: !0 }), delete e.__slimSelectLabelHandler);
1031
+ });
1032
+ }
1033
+ destroy() {
1034
+ this.changeListen(!1), this.select.removeEventListener("change", this.valueChange), this.preventNativeSelect &&= (this.select.removeEventListener("click", this.preventNativeSelect, { capture: !0 }), null), this.preventNativeSelectMousedown &&= (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: !0 }), null), this.preventNativeSelectFocus &&= (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: !0 }), null), this.observer &&= (this.observer.disconnect(), null), this.removeLabelHandlers(), delete this.select.dataset.id, this.showUI();
1035
+ }
1036
+ }, h = class {
1037
+ id = "";
1038
+ style = "";
1039
+ class = [];
1040
+ isMultiple = !1;
1041
+ isOpen = !1;
1042
+ isFullOpen = !1;
1043
+ intervalMove = null;
1044
+ disabled;
1045
+ alwaysOpen;
1046
+ showSearch;
1047
+ focusSearch;
1048
+ keepSearch;
1049
+ ariaLabel;
1050
+ searchPlaceholder;
1051
+ searchText;
1052
+ searchingText;
1053
+ deselectText;
1054
+ removeText;
1055
+ searchHighlight;
1056
+ closeOnSelect;
1057
+ contentLocation;
1058
+ contentPosition;
1059
+ contentWidth;
1060
+ openPosition;
1061
+ placeholderText;
1062
+ allowDeselect;
1063
+ hideSelected;
1064
+ multiString;
1065
+ keepOrder;
1066
+ showOptionTooltips;
1067
+ minSelected;
1068
+ maxSelected;
1069
+ timeoutDelay;
1070
+ maxValuesShown;
1071
+ maxValuesMessage;
1072
+ addableText;
1073
+ constructor(e) {
1074
+ e ||= {}, this.id = "ss-" + a(), this.style = e.style || "", this.class = e.class || [], this.disabled = e.disabled === void 0 ? !1 : e.disabled, this.alwaysOpen = e.alwaysOpen === void 0 ? !1 : e.alwaysOpen, this.showSearch = e.showSearch === void 0 ? !0 : e.showSearch, this.focusSearch = e.focusSearch === void 0 ? !0 : e.focusSearch, this.keepSearch = e.keepSearch === void 0 ? !1 : e.keepSearch, this.ariaLabel = e.ariaLabel || "Combobox", this.searchPlaceholder = e.searchPlaceholder || "Search...", this.searchText = e.searchText || "No Results", this.searchingText = e.searchingText || "Searching...", this.deselectText = e.deselectText || "Clear", this.removeText = e.removeText || "Remove", this.searchHighlight = e.searchHighlight === void 0 ? !1 : e.searchHighlight, this.closeOnSelect = e.closeOnSelect === void 0 ? !0 : e.closeOnSelect, this.contentLocation = e.contentLocation || document.body, this.contentPosition = e.contentPosition || "absolute", this.contentWidth = e.contentWidth || "", this.openPosition = e.openPosition || "auto", this.placeholderText = e.placeholderText === void 0 ? "Select Value" : e.placeholderText, this.allowDeselect = e.allowDeselect === void 0 ? !1 : e.allowDeselect, this.hideSelected = e.hideSelected === void 0 ? !1 : e.hideSelected, this.multiString = e.multiString === void 0 ? !1 : e.multiString, this.keepOrder = e.keepOrder === void 0 ? !1 : e.keepOrder, this.showOptionTooltips = e.showOptionTooltips === void 0 ? !1 : e.showOptionTooltips, this.minSelected = e.minSelected || 0, this.maxSelected = e.maxSelected || 1e3, this.timeoutDelay = e.timeoutDelay || 200, this.maxValuesShown = e.maxValuesShown || 20, this.maxValuesMessage = e.maxValuesMessage || "{number} selected", this.addableText = e.addableText || "Press \"Enter\" to add {value}";
1075
+ }
1076
+ }, g = class {
1077
+ selectEl;
1078
+ settings;
1079
+ cssClasses;
1080
+ select;
1081
+ store;
1082
+ render;
1083
+ openTimeout = null;
1084
+ closeTimeout = null;
1085
+ events = {
1086
+ search: void 0,
1087
+ searchFilter: (e, t) => e.text.toLowerCase().indexOf(t.toLowerCase()) !== -1,
1088
+ addable: void 0,
1089
+ beforeChange: void 0,
1090
+ afterChange: void 0,
1091
+ beforeOpen: void 0,
1092
+ afterOpen: void 0,
1093
+ beforeClose: void 0,
1094
+ afterClose: void 0
1095
+ };
1096
+ constructor(e) {
1097
+ if (this.selectEl = typeof e.select == "string" ? document.querySelector(e.select) : e.select, !this.selectEl) {
1098
+ e.events && e.events.error && e.events.error(/* @__PURE__ */ Error("Could not find select element"));
1099
+ return;
1100
+ }
1101
+ if (this.selectEl.tagName !== "SELECT") {
1102
+ e.events && e.events.error && e.events.error(/* @__PURE__ */ Error("Element isnt of type select"));
1103
+ return;
1104
+ }
1105
+ this.selectEl.dataset.ssid && this.destroy(), this.settings = new h(e.settings), this.cssClasses = new i(e.cssClasses);
1106
+ let t = [
1107
+ "beforeOpen",
1108
+ "afterOpen",
1109
+ "beforeClose",
1110
+ "afterClose"
1111
+ ];
1112
+ for (let n in e.events) e.events.hasOwnProperty(n) && (t.indexOf(n) === -1 ? this.events[n] = e.events[n] : this.events[n] = s(e.events[n], 100));
1113
+ this.settings.disabled = e.settings?.disabled ? e.settings.disabled : this.selectEl.disabled, this.settings.isMultiple = this.selectEl.multiple, this.settings.style = this.selectEl.style.cssText, this.settings.class = this.selectEl.className.split(" "), this.select = new m(this.selectEl), this.selectEl.id || (this.selectEl.id = this.settings.id), this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class), this.select.hideUI(), this.select.onValueChange = (e) => {
1114
+ this.setSelected(e.map((e) => e.id));
1115
+ }, this.select.onClassChange = (e) => {
1116
+ this.settings.class = e, this.render.updateClassStyles();
1117
+ }, this.select.onDisabledChange = (e) => {
1118
+ e ? this.disable() : this.enable();
1119
+ }, this.select.onOptionsChange = (e) => {
1120
+ this.setData(e || []);
1121
+ }, this.select.onLabelClick = () => {
1122
+ this.settings.disabled || (this.settings.isOpen ? this.close() : this.open());
1123
+ };
1124
+ let n = e.data ? e.data : this.select.getData();
1125
+ this.store = new f(this.settings.isMultiple ? "multiple" : "single", n), e.data && this.select.updateOptions(this.store.getData());
1126
+ let r = {
1127
+ open: this.open.bind(this),
1128
+ close: this.close.bind(this),
1129
+ addable: this.events.addable ? this.events.addable : void 0,
1130
+ setSelected: this.setSelected.bind(this),
1131
+ addOption: this.addOption.bind(this),
1132
+ search: this.search.bind(this),
1133
+ beforeChange: this.events.beforeChange,
1134
+ afterChange: this.events.afterChange
1135
+ };
1136
+ this.render = new p(this.settings, this.cssClasses, this.store, r), this.render.renderValues(), this.render.renderOptions(this.store.getData());
1137
+ let a = this.selectEl.getAttribute("aria-label"), o = this.selectEl.getAttribute("aria-labelledby");
1138
+ if (a) this.render.main.main.setAttribute("aria-label", a);
1139
+ else if (o) this.render.main.main.removeAttribute("aria-label"), this.render.main.main.setAttribute("aria-labelledby", o);
1140
+ else if (this.selectEl.labels && this.selectEl.labels.length > 0) {
1141
+ let e = Array.from(this.selectEl.labels).map((e, t) => (e.id ||= `${this.settings.id}-label-${t}`, e.id));
1142
+ this.render.main.main.removeAttribute("aria-label"), this.render.main.main.setAttribute("aria-labelledby", e.join(" "));
1143
+ }
1144
+ this.selectEl.parentNode && this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling), window.addEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.addEventListener("scroll", this.windowScroll, !1), document.addEventListener("visibilitychange", this.windowVisibilityChange), this.settings.disabled && this.disable(), this.settings.alwaysOpen && this.open(), this.select.setupLabelHandlers(), this.selectEl.slim = this;
1145
+ }
1146
+ enable() {
1147
+ this.settings.disabled = !1, this.select.enable(), this.render.enable();
1148
+ }
1149
+ disable() {
1150
+ this.settings.disabled = !0, this.select.disable(), this.render.disable();
1151
+ }
1152
+ getData() {
1153
+ return this.store.getData();
1154
+ }
1155
+ setData(e) {
1156
+ let t = this.store.getSelected(), n = this.store.validateDataArray(e);
1157
+ if (n) {
1158
+ this.events.error && this.events.error(n);
1159
+ return;
1160
+ }
1161
+ this.store.setData(e);
1162
+ let r = this.store.getData();
1163
+ this.select.updateOptions(r), this.render.renderValues(), this.render.renderOptions(r), this.events.afterChange && !c(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
1164
+ }
1165
+ getSelected() {
1166
+ let e = this.store.getSelectedOptions();
1167
+ return this.settings.keepOrder && (e = this.store.selectedOrderOptions(e)), e.map((e) => e.value);
1168
+ }
1169
+ setSelected(e, t = !0) {
1170
+ let n = this.store.getSelected(), r = this.store.getDataOptions();
1171
+ e = Array.isArray(e) ? e : [e];
1172
+ let i = [];
1173
+ for (let t of e) {
1174
+ if (r.find((e) => e.id == t)) {
1175
+ i.push(t);
1176
+ continue;
1177
+ }
1178
+ for (let e of r.filter((e) => e.value == t)) i.push(e.id);
1179
+ }
1180
+ this.store.setSelectedBy("id", i);
1181
+ let a = this.store.getData();
1182
+ this.select.updateOptions(a), this.render.renderValues(), this.render.content.search.input.value === "" ? this.render.renderOptions(a) : this.search(this.render.content.search.input.value), t && this.events.afterChange && !c(n, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
1183
+ }
1184
+ addOption(e) {
1185
+ let t = this.store.getSelected();
1186
+ this.store.getDataOptions().some((t) => t.value === (e.value ?? e.text)) || this.store.addOption(e);
1187
+ let n = this.store.getData();
1188
+ this.select.updateOptions(n), this.render.renderValues(), this.render.renderOptions(n), this.events.afterChange && !c(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
1189
+ }
1190
+ open() {
1191
+ this.settings.disabled || this.settings.isOpen || (this.closeTimeout &&= (clearTimeout(this.closeTimeout), null), this.events.beforeOpen && this.events.beforeOpen(), this.render.open(), this.settings.showSearch && this.settings.focusSearch && this.render.searchFocus(), this.settings.isOpen = !0, this.openTimeout = setTimeout(() => {
1192
+ this.events.afterOpen && this.events.afterOpen(), this.settings.isOpen && (this.settings.isFullOpen = !0), document.addEventListener("click", this.documentClick);
1193
+ }, this.settings.timeoutDelay), this.settings.contentPosition === "absolute" && (this.settings.intervalMove && clearInterval(this.settings.intervalMove), this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500)));
1194
+ }
1195
+ close(e = null) {
1196
+ !this.settings.isOpen || this.settings.alwaysOpen || (this.openTimeout &&= (clearTimeout(this.openTimeout), null), this.events.beforeClose && this.events.beforeClose(), this.render.close(), !this.settings.keepSearch && this.render.content.search.input.value !== "" && this.search(""), this.render.mainFocus(e), this.settings.isOpen = !1, this.settings.isFullOpen = !1, this.closeTimeout = setTimeout(() => {
1197
+ this.events.afterClose && this.events.afterClose(), document.removeEventListener("click", this.documentClick);
1198
+ }, this.settings.timeoutDelay), this.settings.intervalMove && clearInterval(this.settings.intervalMove));
1199
+ }
1200
+ search(e) {
1201
+ if (this.render.content.search.input.value !== e && (this.render.content.search.input.value = e), e === "") {
1202
+ this.render.renderOptions(this.store.getData());
1203
+ return;
1204
+ }
1205
+ if (!this.events.search) {
1206
+ let t = e === "" ? this.store.getData() : this.store.search(e, this.events.searchFilter);
1207
+ this.render.renderOptions(t);
1208
+ return;
1209
+ }
1210
+ this.render.renderSearching();
1211
+ let t = this.events.search(e, this.store.getSelectedOptions());
1212
+ if (t instanceof Promise) {
1213
+ t.then((e) => {
1214
+ this.store.setData(e, !0), this.select.updateOptions(this.store.getData()), this.render.renderOptions(this.store.getData());
1215
+ }).catch((e) => {
1216
+ this.render.renderError(typeof e == "string" ? e : e.message);
1217
+ });
1218
+ return;
1219
+ } else Array.isArray(t) ? (this.store.setData(t, !0), this.select.updateOptions(this.store.getData()), this.render.renderOptions(this.store.getData())) : this.render.renderError("Search event must return a promise or an array of data");
1220
+ }
1221
+ destroy() {
1222
+ this.openTimeout &&= (clearTimeout(this.openTimeout), null), this.closeTimeout &&= (clearTimeout(this.closeTimeout), null), this.settings.intervalMove && (clearInterval(this.settings.intervalMove), this.settings.intervalMove = null), document.removeEventListener("click", this.documentClick), window.removeEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.removeEventListener("scroll", this.windowScroll, !1), document.removeEventListener("visibilitychange", this.windowVisibilityChange), this.store.setData([]), this.render.destroy(), this.select.destroy();
1223
+ }
1224
+ windowResize = s(() => {
1225
+ !this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
1226
+ });
1227
+ windowScroll = s(() => {
1228
+ !this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
1229
+ });
1230
+ documentClick = (e) => {
1231
+ this.settings.isOpen && e.target && !o(e.target, this.settings.id) && this.close(e.type);
1232
+ };
1233
+ windowVisibilityChange = () => {
1234
+ document.hidden && this.close();
1235
+ };
1236
+ }, _ = t({
1237
+ name: "SlimSelect",
1238
+ props: {
1239
+ modelValue: { type: [
1240
+ String,
1241
+ Array,
1242
+ void 0
1243
+ ] },
1244
+ multiple: {
1245
+ type: Boolean,
1246
+ default: !1
1247
+ },
1248
+ data: { type: Array },
1249
+ settings: { type: Object },
1250
+ events: {
1251
+ type: Object,
1252
+ default: () => ({})
1253
+ }
1254
+ },
1255
+ emits: ["update:modelValue"],
1256
+ data() {
1257
+ return { slim: null };
1258
+ },
1259
+ mounted() {
1260
+ this.$slots.default && this.$slots.default().length > 0 && this.data && console.warn("[SlimSelect Vue] Both slot content and data prop are provided. Data prop will take precedence and slot content will be ignored.");
1261
+ let e = { select: this.$refs.slim };
1262
+ this.data && (e.data = this.data), this.settings && (e.settings = this.settings);
1263
+ let t = this.events?.afterChange;
1264
+ e.events = {
1265
+ ...this.events,
1266
+ afterChange: (e) => {
1267
+ this.handleAfterChange(e, t);
1268
+ }
1269
+ }, this.slim = new g(e), this.syncModelValueToSlimSelect(!1);
1270
+ },
1271
+ updated() {
1272
+ if (this.slim && !this.data) {
1273
+ let e = this.slim.getSelected(), t = Array.isArray(this.value) ? this.value : [this.value];
1274
+ JSON.stringify(e.sort()) !== JSON.stringify(t.sort()) && this.syncModelValueToSlimSelect(!1);
1275
+ }
1276
+ },
1277
+ beforeUnmount() {
1278
+ this.slim && this.slim.destroy();
1279
+ },
1280
+ watch: {
1281
+ modelValue: { handler: function(e) {
1282
+ this.slim && this.syncModelValueToSlimSelect(!1);
1283
+ } },
1284
+ data: {
1285
+ handler: function(e) {
1286
+ this.slim && this.slim.setData(e);
1287
+ },
1288
+ deep: !0
1289
+ }
1290
+ },
1291
+ computed: { value: {
1292
+ get() {
1293
+ return this.getCleanValue(this.$props.modelValue);
1294
+ },
1295
+ set(e) {
1296
+ this.$emit("update:modelValue", e);
1297
+ }
1298
+ } },
1299
+ methods: {
1300
+ getSlimSelect() {
1301
+ return this.slim;
1302
+ },
1303
+ handleAfterChange(e, t) {
1304
+ if (!this.slim) return;
1305
+ let n = this.multiple ? e.map((e) => e.value) : e.length > 0 ? e[0].value : "", r = this.getCleanValue(this.$props.modelValue), i = this.slim.store.getDataOptions(), a = Array.isArray(r) ? r.length > 0 && r.every((e) => i.some((t) => t.value === e)) : r !== "" && i.some((e) => e.value === r), o = Array.isArray(n) ? n.length > 0 && n.every((e) => i.some((t) => t.value === e)) : n !== "" && i.some((e) => e.value === n);
1306
+ (Array.isArray(n) && Array.isArray(this.value) ? JSON.stringify(n.sort()) !== JSON.stringify(this.value.sort()) : this.value !== n) && (a || o) && (this.value = n), t && t(e);
1307
+ },
1308
+ getCleanValue(e) {
1309
+ let t = this.$props.multiple;
1310
+ return typeof e == "string" ? t ? [e] : e : Array.isArray(e) ? t ? e : e[0] : t ? [] : "";
1311
+ },
1312
+ syncModelValueToSlimSelect(e = !1) {
1313
+ if (!this.slim || this.$props.modelValue === void 0) return;
1314
+ let t = this.getCleanValue(this.$props.modelValue), n = this.slim.getData().flatMap((e) => "label" in e ? e.options : [e]);
1315
+ if (!(Array.isArray(t) ? t.length > 0 && t.every((e) => n.some((t) => t.value === e)) : t !== "" && n.some((e) => e.value === t)) && !Array.isArray(t) && !n.some((e) => e.placeholder)) {
1316
+ let e = this.slim.getData();
1317
+ this.slim.setData([{
1318
+ value: "",
1319
+ text: "",
1320
+ placeholder: !0
1321
+ }].concat(e));
1322
+ }
1323
+ this.slim.setSelected(t, e);
1324
+ }
1325
+ }
1326
+ }), v = (e, t) => {
1327
+ let n = e.__vccOpts || e;
1328
+ for (let [e, r] of t) n[e] = r;
1329
+ return n;
1330
+ }, y = ["multiple"];
1331
+ function b(t, i, a, o, s, c) {
1332
+ return n(), e("select", {
1333
+ multiple: t.multiple,
1334
+ ref: "slim"
1335
+ }, [r(t.$slots, "default")], 8, y);
1222
1336
  }
1223
- let H = class {
1224
- selectEl;
1225
- // Classes
1226
- settings;
1227
- cssClasses;
1228
- select;
1229
- store;
1230
- render;
1231
- // Timeout tracking for cleanup
1232
- openTimeout = null;
1233
- closeTimeout = null;
1234
- // Events
1235
- events = {
1236
- search: void 0,
1237
- searchFilter: (e, t) => e.text.toLowerCase().indexOf(t.toLowerCase()) !== -1,
1238
- addable: void 0,
1239
- beforeChange: void 0,
1240
- afterChange: void 0,
1241
- beforeOpen: void 0,
1242
- afterOpen: void 0,
1243
- beforeClose: void 0,
1244
- afterClose: void 0
1245
- };
1246
- constructor(e) {
1247
- if (this.selectEl = typeof e.select == "string" ? document.querySelector(e.select) : e.select, !this.selectEl) {
1248
- e.events && e.events.error && e.events.error(new Error("Could not find select element"));
1249
- return;
1250
- }
1251
- if (this.selectEl.tagName !== "SELECT") {
1252
- e.events && e.events.error && e.events.error(new Error("Element isnt of type select"));
1253
- return;
1254
- }
1255
- this.selectEl.dataset.ssid && this.destroy(), this.settings = new I(e.settings), this.cssClasses = new M(e.cssClasses);
1256
- const t = ["beforeOpen", "afterOpen", "beforeClose", "afterClose"];
1257
- for (const a in e.events)
1258
- e.events.hasOwnProperty(a) && (t.indexOf(a) !== -1 ? this.events[a] = S(e.events[a], 100) : this.events[a] = e.events[a]);
1259
- this.settings.disabled = e.settings?.disabled ? e.settings.disabled : this.selectEl.disabled, this.settings.isMultiple = this.selectEl.multiple, this.settings.style = this.selectEl.style.cssText, this.settings.class = this.selectEl.className.split(" "), this.select = new B(this.selectEl), this.selectEl.id || (this.selectEl.id = this.settings.id), this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class), this.select.hideUI(), this.select.onValueChange = (a) => {
1260
- this.setSelected(a.map((o) => o.id));
1261
- }, this.select.onClassChange = (a) => {
1262
- this.settings.class = a, this.render.updateClassStyles();
1263
- }, this.select.onDisabledChange = (a) => {
1264
- a ? this.disable() : this.enable();
1265
- }, this.select.onOptionsChange = (a) => {
1266
- this.setData(a || []);
1267
- }, this.select.onLabelClick = () => {
1268
- this.settings.disabled || (this.settings.isOpen ? this.close() : this.open());
1269
- };
1270
- const s = e.data ? e.data : this.select.getData();
1271
- this.store = new F(this.settings.isMultiple ? "multiple" : "single", s), e.data && this.select.updateOptions(this.store.getData());
1272
- const i = {
1273
- open: this.open.bind(this),
1274
- close: this.close.bind(this),
1275
- addable: this.events.addable ? this.events.addable : void 0,
1276
- setSelected: this.setSelected.bind(this),
1277
- addOption: this.addOption.bind(this),
1278
- search: this.search.bind(this),
1279
- beforeChange: this.events.beforeChange,
1280
- afterChange: this.events.afterChange
1281
- };
1282
- this.render = new V(this.settings, this.cssClasses, this.store, i), this.render.renderValues(), this.render.renderOptions(this.store.getData());
1283
- const l = this.selectEl.getAttribute("aria-label"), n = this.selectEl.getAttribute("aria-labelledby");
1284
- l ? this.render.main.main.setAttribute("aria-label", l) : n && this.render.main.main.setAttribute("aria-labelledby", n), this.selectEl.parentNode && this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling), window.addEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.addEventListener("scroll", this.windowScroll, !1), document.addEventListener("visibilitychange", this.windowVisibilityChange), this.settings.disabled && this.disable(), this.settings.alwaysOpen && this.open(), this.select.setupLabelHandlers(), this.selectEl.slim = this;
1285
- }
1286
- // Set to enabled and remove disabled classes
1287
- enable() {
1288
- this.settings.disabled = !1, this.select.enable(), this.render.enable();
1289
- }
1290
- // Set to disabled and add disabled classes
1291
- disable() {
1292
- this.settings.disabled = !0, this.select.disable(), this.render.disable();
1293
- }
1294
- getData() {
1295
- return this.store.getData();
1296
- }
1297
- setData(e) {
1298
- const t = this.store.getSelected(), s = this.store.validateDataArray(e);
1299
- if (s) {
1300
- this.events.error && this.events.error(s);
1301
- return;
1302
- }
1303
- this.store.setData(e);
1304
- const i = this.store.getData();
1305
- this.select.updateOptions(i), this.render.renderValues(), this.render.renderOptions(i), this.events.afterChange && !y(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
1306
- }
1307
- getSelected() {
1308
- let e = this.store.getSelectedOptions();
1309
- return this.settings.keepOrder && (e = this.store.selectedOrderOptions(e)), e.map((t) => t.value);
1310
- }
1311
- // Will take in a string or array of strings and set the selected by either the id or value
1312
- setSelected(e, t = !0) {
1313
- const s = this.store.getSelected(), i = this.store.getDataOptions();
1314
- e = Array.isArray(e) ? e : [e];
1315
- const l = [];
1316
- for (const a of e) {
1317
- if (i.find((o) => o.id == a)) {
1318
- l.push(a);
1319
- continue;
1320
- }
1321
- for (const o of i.filter((r) => r.value == a))
1322
- l.push(o.id);
1323
- }
1324
- this.store.setSelectedBy("id", l);
1325
- const n = this.store.getData();
1326
- this.select.updateOptions(n), this.render.renderValues(), this.render.content.search.input.value !== "" ? this.search(this.render.content.search.input.value) : this.render.renderOptions(n), t && this.events.afterChange && !y(s, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
1327
- }
1328
- addOption(e) {
1329
- const t = this.store.getSelected();
1330
- this.store.getDataOptions().some((i) => i.value === (e.value ?? e.text)) || this.store.addOption(e);
1331
- const s = this.store.getData();
1332
- this.select.updateOptions(s), this.render.renderValues(), this.render.renderOptions(s), this.events.afterChange && !y(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
1333
- }
1334
- open() {
1335
- this.settings.disabled || this.settings.isOpen || (this.closeTimeout && (clearTimeout(this.closeTimeout), this.closeTimeout = null), this.events.beforeOpen && this.events.beforeOpen(), this.render.open(), this.settings.showSearch && this.settings.focusSearch && this.render.searchFocus(), this.settings.isOpen = !0, this.openTimeout = setTimeout(() => {
1336
- this.events.afterOpen && this.events.afterOpen(), this.settings.isOpen && (this.settings.isFullOpen = !0), document.addEventListener("click", this.documentClick);
1337
- }, this.settings.timeoutDelay), this.settings.contentPosition === "absolute" && (this.settings.intervalMove && clearInterval(this.settings.intervalMove), this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500)));
1338
- }
1339
- close(e = null) {
1340
- !this.settings.isOpen || this.settings.alwaysOpen || (this.openTimeout && (clearTimeout(this.openTimeout), this.openTimeout = null), this.events.beforeClose && this.events.beforeClose(), this.render.close(), !this.settings.keepSearch && this.render.content.search.input.value !== "" && this.search(""), this.render.mainFocus(e), this.settings.isOpen = !1, this.settings.isFullOpen = !1, this.closeTimeout = setTimeout(() => {
1341
- this.events.afterClose && this.events.afterClose(), document.removeEventListener("click", this.documentClick);
1342
- }, this.settings.timeoutDelay), this.settings.intervalMove && clearInterval(this.settings.intervalMove));
1343
- }
1344
- // Take in string value and search current options
1345
- search(e) {
1346
- if (this.render.content.search.input.value !== e && (this.render.content.search.input.value = e), e === "") {
1347
- this.render.renderOptions(this.store.getData());
1348
- return;
1349
- }
1350
- if (!this.events.search) {
1351
- const s = e === "" ? this.store.getData() : this.store.search(e, this.events.searchFilter);
1352
- this.render.renderOptions(s);
1353
- return;
1354
- }
1355
- this.render.renderSearching();
1356
- const t = this.events.search(e, this.store.getSelectedOptions());
1357
- if (t instanceof Promise) {
1358
- t.then((s) => {
1359
- this.store.setData(s, !0), this.select.updateOptions(this.store.getData()), this.render.renderOptions(this.store.getData());
1360
- }).catch((s) => {
1361
- this.render.renderError(typeof s == "string" ? s : s.message);
1362
- });
1363
- return;
1364
- } else Array.isArray(t) ? (this.store.setData(t, !0), this.select.updateOptions(this.store.getData()), this.render.renderOptions(this.store.getData())) : this.render.renderError("Search event must return a promise or an array of data");
1365
- }
1366
- destroy() {
1367
- this.openTimeout && (clearTimeout(this.openTimeout), this.openTimeout = null), this.closeTimeout && (clearTimeout(this.closeTimeout), this.closeTimeout = null), this.settings.intervalMove && (clearInterval(this.settings.intervalMove), this.settings.intervalMove = null), document.removeEventListener("click", this.documentClick), window.removeEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.removeEventListener("scroll", this.windowScroll, !1), document.removeEventListener("visibilitychange", this.windowVisibilityChange), this.store.setData([]), this.render.destroy(), this.select.destroy();
1368
- }
1369
- windowResize = S(() => {
1370
- !this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
1371
- });
1372
- // Event listener for window scrolling
1373
- windowScroll = S(() => {
1374
- !this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
1375
- });
1376
- // Event listener for document click
1377
- documentClick = (e) => {
1378
- this.settings.isOpen && e.target && !E(e.target, this.settings.id) && this.close(e.type);
1379
- };
1380
- // Event Listener for window visibility change
1381
- windowVisibilityChange = () => {
1382
- document.hidden && this.close();
1383
- };
1384
- };
1385
- const R = L({
1386
- name: "SlimSelect",
1387
- props: {
1388
- modelValue: {
1389
- type: [String, Array, void 0]
1390
- },
1391
- multiple: {
1392
- type: Boolean,
1393
- default: !1
1394
- },
1395
- data: {
1396
- type: Array
1397
- },
1398
- settings: {
1399
- type: Object
1400
- },
1401
- events: {
1402
- type: Object,
1403
- default: () => ({})
1404
- }
1405
- },
1406
- emits: ["update:modelValue"],
1407
- data() {
1408
- return {
1409
- slim: null
1410
- };
1411
- },
1412
- mounted() {
1413
- this.$slots.default && this.$slots.default().length > 0 && this.data && console.warn(
1414
- "[SlimSelect Vue] Both slot content and data prop are provided. Data prop will take precedence and slot content will be ignored."
1415
- );
1416
- let e = {
1417
- select: this.$refs.slim
1418
- };
1419
- this.data && (e.data = this.data), this.settings && (e.settings = this.settings);
1420
- const t = this.events?.afterChange;
1421
- e.events = {
1422
- ...this.events,
1423
- afterChange: (s) => {
1424
- this.handleAfterChange(s, t);
1425
- }
1426
- }, this.slim = new H(e), this.syncModelValueToSlimSelect(!1);
1427
- },
1428
- updated() {
1429
- if (this.slim && !this.data) {
1430
- const c = this.slim.getSelected(), e = Array.isArray(this.value) ? this.value : [this.value];
1431
- JSON.stringify(c.sort()) !== JSON.stringify(e.sort()) && this.syncModelValueToSlimSelect(!1);
1432
- }
1433
- },
1434
- beforeUnmount() {
1435
- this.slim && this.slim.destroy();
1436
- },
1437
- watch: {
1438
- modelValue: {
1439
- handler: function(c) {
1440
- this.slim && this.syncModelValueToSlimSelect(!1);
1441
- }
1442
- },
1443
- data: {
1444
- handler: function(c) {
1445
- this.slim && this.slim.setData(c);
1446
- },
1447
- deep: !0
1448
- }
1449
- },
1450
- computed: {
1451
- value: {
1452
- get() {
1453
- return this.getCleanValue(this.$props.modelValue);
1454
- },
1455
- set(c) {
1456
- this.$emit("update:modelValue", c);
1457
- }
1458
- }
1459
- },
1460
- methods: {
1461
- // This allows via a ref to call the SlimSelect methods
1462
- getSlimSelect() {
1463
- return this.slim;
1464
- },
1465
- handleAfterChange(c, e) {
1466
- if (!this.slim) return;
1467
- const t = this.multiple ? c.map((o) => o.value) : c.length > 0 ? c[0].value : "", s = this.getCleanValue(this.$props.modelValue), i = this.slim.store.getDataOptions(), l = Array.isArray(s) ? s.length > 0 && s.every((o) => i.some((r) => r.value === o)) : s !== "" && i.some((o) => o.value === s), n = Array.isArray(t) ? t.length > 0 && t.every((o) => i.some((r) => r.value === o)) : t !== "" && i.some((o) => o.value === t);
1468
- (Array.isArray(t) && Array.isArray(this.value) ? JSON.stringify(t.sort()) !== JSON.stringify(this.value.sort()) : this.value !== t) && (l || n) && (this.value = t), e && e(c);
1469
- },
1470
- getCleanValue(c) {
1471
- const e = this.$props.multiple;
1472
- return typeof c == "string" ? e ? [c] : c : Array.isArray(c) ? e ? c : c[0] : e ? [] : "";
1473
- },
1474
- syncModelValueToSlimSelect(c = !1) {
1475
- if (!this.slim || this.$props.modelValue === void 0)
1476
- return;
1477
- const e = this.getCleanValue(this.$props.modelValue), s = this.slim.getData().flatMap((l) => "label" in l ? l.options : [l]);
1478
- if (!(Array.isArray(e) ? e.length > 0 && e.every((l) => s.some((n) => n.value === l)) : e !== "" && s.some((l) => l.value === e)) && !Array.isArray(e) && !s.some((n) => n.placeholder)) {
1479
- const n = this.slim.getData(), a = {
1480
- value: "",
1481
- text: "",
1482
- placeholder: !0
1483
- };
1484
- this.slim.setData([a].concat(n));
1485
- }
1486
- this.slim.setSelected(e, c);
1487
- }
1488
- }
1489
- }), $ = (c, e) => {
1490
- const t = c.__vccOpts || c;
1491
- for (const [s, i] of e)
1492
- t[s] = i;
1493
- return t;
1494
- }, q = ["multiple"];
1495
- function _(c, e, t, s, i, l) {
1496
- return D(), k("select", {
1497
- multiple: c.multiple,
1498
- ref: "slim"
1499
- }, [
1500
- N(c.$slots, "default")
1501
- ], 8, q);
1502
- }
1503
- const K = /* @__PURE__ */ $(R, [["render", _]]);
1504
- export {
1505
- m as Optgroup,
1506
- p as Option,
1507
- I as Settings,
1508
- K as default
1509
- };
1337
+ //#endregion
1338
+ //#region src/slim-select/vue/index.ts
1339
+ var x = /* @__PURE__ */ v(_, [["render", b]]);
1340
+ //#endregion
1341
+ export { d as Optgroup, u as Option, h as Settings, x as default };