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