slim-select 2.4.4 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/render.d.ts +1 -0
  2. package/dist/slimselect.cjs.js +45 -5
  3. package/dist/slimselect.es.js +45 -5
  4. package/dist/slimselect.global.js +45 -5
  5. package/dist/slimselect.js +45 -5
  6. package/dist/slimselect.min.js +1 -1
  7. package/dist/slimselect.umd.js +45 -5
  8. package/dist/slimselect.umd.min.js +1 -1
  9. package/dist/store.d.ts +1 -0
  10. package/package.json +15 -15
  11. package/src/slim-select/index.test.ts +99 -0
  12. package/src/slim-select/render.ts +45 -6
  13. package/src/slim-select/store.ts +4 -0
  14. package/src/vue/dist/slim-select/helpers.d.ts +5 -5
  15. package/src/vue/dist/slim-select/index.d.ts +46 -46
  16. package/src/vue/dist/slim-select/render.d.ts +120 -119
  17. package/src/vue/dist/slim-select/select.d.ts +28 -28
  18. package/src/vue/dist/slim-select/settings.d.ts +32 -32
  19. package/src/vue/dist/slim-select/store.d.ts +77 -76
  20. package/src/vue/dist/slimselectvue.es.js +1903 -1863
  21. package/src/vue/dist/slimselectvue.global.js +1903 -1863
  22. package/src/vue/dist/slimselectvue.ssr.js +1903 -1863
  23. package/src/vue/dist/vue/hello.d.ts +2 -2
  24. package/src/vue/dist/vue/slimselect.vue.d.ts +317 -314
  25. package/src/vue/package.json +2 -2
package/src/vue/dist/slimselectvue.ssr.js CHANGED
@@ -2,1881 +2,1921 @@
2
2
 
3
3
  var vue = require('vue');
4
4
 
5
- function generateID() {
6
- return Math.random().toString(36).substring(2, 10);
7
- }
8
- function hasClassInTree(element, className) {
9
- function hasClass(e, c) {
10
- if (c && e && e.classList && e.classList.contains(c)) {
11
- return e;
12
- }
13
- if (c && e && e.dataset && e.dataset.id && e.dataset.id === className) {
14
- return e;
15
- }
16
- return null;
17
- }
18
- function parentByClass(e, c) {
19
- if (!e || e === document) {
20
- return null;
21
- }
22
- else if (hasClass(e, c)) {
23
- return e;
24
- }
25
- else {
26
- return parentByClass(e.parentNode, c);
27
- }
28
- }
29
- return hasClass(element, className) || parentByClass(element, className);
30
- }
31
- function debounce(func, wait = 50, immediate = false) {
32
- let timeout;
33
- return function (...args) {
34
- const context = self;
35
- const later = () => {
36
- timeout = null;
37
- if (!immediate) {
38
- func.apply(context, args);
39
- }
40
- };
41
- const callNow = immediate && !timeout;
42
- clearTimeout(timeout);
43
- timeout = setTimeout(later, wait);
44
- if (callNow) {
45
- func.apply(context, args);
46
- }
47
- };
48
- }
49
- function isEqual(a, b) {
50
- return JSON.stringify(a) === JSON.stringify(b);
51
- }
52
- function kebabCase(str) {
53
- const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
54
- return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
5
+ function generateID() {
6
+ return Math.random().toString(36).substring(2, 10);
7
+ }
8
+ function hasClassInTree(element, className) {
9
+ function hasClass(e, c) {
10
+ if (c && e && e.classList && e.classList.contains(c)) {
11
+ return e;
12
+ }
13
+ if (c && e && e.dataset && e.dataset.id && e.dataset.id === className) {
14
+ return e;
15
+ }
16
+ return null;
17
+ }
18
+ function parentByClass(e, c) {
19
+ if (!e || e === document) {
20
+ return null;
21
+ }
22
+ else if (hasClass(e, c)) {
23
+ return e;
24
+ }
25
+ else {
26
+ return parentByClass(e.parentNode, c);
27
+ }
28
+ }
29
+ return hasClass(element, className) || parentByClass(element, className);
30
+ }
31
+ function debounce(func, wait = 50, immediate = false) {
32
+ let timeout;
33
+ return function (...args) {
34
+ const context = self;
35
+ const later = () => {
36
+ timeout = null;
37
+ if (!immediate) {
38
+ func.apply(context, args);
39
+ }
40
+ };
41
+ const callNow = immediate && !timeout;
42
+ clearTimeout(timeout);
43
+ timeout = setTimeout(later, wait);
44
+ if (callNow) {
45
+ func.apply(context, args);
46
+ }
47
+ };
48
+ }
49
+ function isEqual(a, b) {
50
+ return JSON.stringify(a) === JSON.stringify(b);
51
+ }
52
+ function kebabCase(str) {
53
+ const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
54
+ return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
55
55
  }
56
56
 
57
- class Settings {
58
- constructor(settings) {
59
- this.id = '';
60
- this.style = '';
61
- this.class = [];
62
- this.isMultiple = false;
63
- this.isOpen = false;
64
- this.isFullOpen = false;
65
- this.intervalMove = null;
66
- if (!settings) {
67
- settings = {};
68
- }
69
- this.id = 'ss-' + generateID();
70
- this.style = settings.style || '';
71
- this.class = settings.class || [];
72
- this.disabled = settings.disabled !== undefined ? settings.disabled : false;
73
- this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
74
- this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
75
- this.searchPlaceholder = settings.searchPlaceholder || 'Search';
76
- this.searchText = settings.searchText || 'No Results';
77
- this.searchingText = settings.searchingText || 'Searching...';
78
- this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
79
- this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
80
- this.contentLocation = settings.contentLocation || document.body;
81
- this.contentPosition = settings.contentPosition || 'absolute';
82
- this.openPosition = settings.openPosition || 'auto';
83
- this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
84
- this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
85
- this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
86
- this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
87
- this.minSelected = settings.minSelected || 0;
88
- this.maxSelected = settings.maxSelected || 1000;
89
- this.timeoutDelay = settings.timeoutDelay || 200;
90
- this.maxValuesShown = settings.maxValuesShown || 20;
91
- this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
92
- }
57
+ class Settings {
58
+ constructor(settings) {
59
+ this.id = '';
60
+ this.style = '';
61
+ this.class = [];
62
+ this.isMultiple = false;
63
+ this.isOpen = false;
64
+ this.isFullOpen = false;
65
+ this.intervalMove = null;
66
+ if (!settings) {
67
+ settings = {};
68
+ }
69
+ this.id = 'ss-' + generateID();
70
+ this.style = settings.style || '';
71
+ this.class = settings.class || [];
72
+ this.disabled = settings.disabled !== undefined ? settings.disabled : false;
73
+ this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
74
+ this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
75
+ this.searchPlaceholder = settings.searchPlaceholder || 'Search';
76
+ this.searchText = settings.searchText || 'No Results';
77
+ this.searchingText = settings.searchingText || 'Searching...';
78
+ this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
79
+ this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
80
+ this.contentLocation = settings.contentLocation || document.body;
81
+ this.contentPosition = settings.contentPosition || 'absolute';
82
+ this.openPosition = settings.openPosition || 'auto';
83
+ this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
84
+ this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
85
+ this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
86
+ this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
87
+ this.minSelected = settings.minSelected || 0;
88
+ this.maxSelected = settings.maxSelected || 1000;
89
+ this.timeoutDelay = settings.timeoutDelay || 200;
90
+ this.maxValuesShown = settings.maxValuesShown || 20;
91
+ this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
92
+ }
93
93
  }
94
94
 
95
- class Optgroup {
96
- constructor(optgroup) {
97
- this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
98
- this.label = optgroup.label || '';
99
- this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
100
- this.closable = optgroup.closable || 'off';
101
- this.options = [];
102
- if (optgroup.options) {
103
- for (const o of optgroup.options) {
104
- this.options.push(new Option(o));
105
- }
106
- }
107
- }
108
- }
109
- class Option {
110
- constructor(option) {
111
- this.id = !option.id || option.id === '' ? generateID() : option.id;
112
- this.value = option.value === undefined ? option.text : option.value;
113
- this.text = option.text || '';
114
- this.html = option.html || '';
115
- this.selected = option.selected !== undefined ? option.selected : false;
116
- this.display = option.display !== undefined ? option.display : true;
117
- this.disabled = option.disabled !== undefined ? option.disabled : false;
118
- this.mandatory = option.mandatory !== undefined ? option.mandatory : false;
119
- this.placeholder = option.placeholder !== undefined ? option.placeholder : false;
120
- this.class = option.class || '';
121
- this.style = option.style || '';
122
- this.data = option.data || {};
123
- }
124
- }
125
- class Store {
126
- constructor(type, data) {
127
- this.selectType = 'single';
128
- this.data = [];
129
- this.selectType = type;
130
- this.setData(data);
131
- }
132
- validateDataArray(data) {
133
- if (!Array.isArray(data)) {
134
- return new Error('Data must be an array');
135
- }
136
- for (let dataObj of data) {
137
- if (dataObj instanceof Optgroup || 'label' in dataObj) {
138
- if (!('label' in dataObj)) {
139
- return new Error('Optgroup must have a label');
140
- }
141
- if ('options' in dataObj && dataObj.options) {
142
- for (let option of dataObj.options) {
143
- return this.validateOption(option);
144
- }
145
- }
146
- }
147
- else if (dataObj instanceof Option || 'text' in dataObj) {
148
- return this.validateOption(dataObj);
149
- }
150
- else {
151
- return new Error('Data object must be a valid optgroup or option');
152
- }
153
- }
154
- return null;
155
- }
156
- validateOption(option) {
157
- if (!('text' in option)) {
158
- return new Error('Option must have a text');
159
- }
160
- return null;
161
- }
162
- partialToFullData(data) {
163
- let dataFinal = [];
164
- data.forEach((dataObj) => {
165
- if (dataObj instanceof Optgroup || 'label' in dataObj) {
166
- let optOptions = [];
167
- if ('options' in dataObj && dataObj.options) {
168
- dataObj.options.forEach((option) => {
169
- optOptions.push(new Option(option));
170
- });
171
- }
172
- if (optOptions.length > 0) {
173
- dataFinal.push(new Optgroup(dataObj));
174
- }
175
- }
176
- if (dataObj instanceof Option || 'text' in dataObj) {
177
- dataFinal.push(new Option(dataObj));
178
- }
179
- });
180
- return dataFinal;
181
- }
182
- setData(data) {
183
- this.data = this.partialToFullData(data);
184
- if (this.selectType === 'single') {
185
- this.setSelectedBy('value', this.getSelected());
186
- }
187
- }
188
- getData() {
189
- return this.filter(null, true);
190
- }
191
- getDataOptions() {
192
- return this.filter(null, false);
193
- }
194
- addOption(option) {
195
- this.setData(this.getData().concat(new Option(option)));
196
- }
197
- setSelectedBy(selectedType, selectedValues) {
198
- let firstOption = null;
199
- let hasSelected = false;
200
- for (let dataObj of this.data) {
201
- if (dataObj instanceof Optgroup) {
202
- for (let option of dataObj.options) {
203
- if (!firstOption) {
204
- firstOption = option;
205
- }
206
- option.selected = hasSelected ? false : selectedValues.includes(option[selectedType]);
207
- if (option.selected && this.selectType === 'single') {
208
- hasSelected = true;
209
- }
210
- }
211
- }
212
- if (dataObj instanceof Option) {
213
- if (!firstOption) {
214
- firstOption = dataObj;
215
- }
216
- dataObj.selected = hasSelected ? false : selectedValues.includes(dataObj[selectedType]);
217
- if (dataObj.selected && this.selectType === 'single') {
218
- hasSelected = true;
219
- }
220
- }
221
- }
222
- if (this.selectType === 'single' && firstOption && !hasSelected) {
223
- firstOption.selected = true;
224
- }
225
- }
226
- getSelected() {
227
- let selectedOptions = this.getSelectedOptions();
228
- let selectedValues = [];
229
- selectedOptions.forEach((option) => {
230
- selectedValues.push(option.value);
231
- });
232
- return selectedValues;
233
- }
234
- getSelectedOptions() {
235
- return this.filter((opt) => {
236
- return opt.selected;
237
- }, false);
238
- }
239
- getSelectedIDs() {
240
- let selectedOptions = this.getSelectedOptions();
241
- let selectedIDs = [];
242
- selectedOptions.forEach((op) => {
243
- selectedIDs.push(op.id);
244
- });
245
- return selectedIDs;
246
- }
247
- getOptgroupByID(id) {
248
- for (let dataObj of this.data) {
249
- if (dataObj instanceof Optgroup && dataObj.id === id) {
250
- return dataObj;
251
- }
252
- }
253
- return null;
254
- }
255
- getOptionByID(id) {
256
- let options = this.filter((opt) => {
257
- return opt.id === id;
258
- }, false);
259
- return options.length ? options[0] : null;
260
- }
261
- search(search, searchFilter) {
262
- search = search.trim();
263
- if (search === '') {
264
- return this.getData();
265
- }
266
- return this.filter((opt) => {
267
- return searchFilter(opt, search);
268
- }, true);
269
- }
270
- filter(filter, includeOptgroup) {
271
- const dataSearch = [];
272
- this.data.forEach((dataObj) => {
273
- if (dataObj instanceof Optgroup) {
274
- let optOptions = [];
275
- dataObj.options.forEach((option) => {
276
- if (!filter || filter(option)) {
277
- if (!includeOptgroup) {
278
- dataSearch.push(new Option(option));
279
- }
280
- else {
281
- optOptions.push(new Option(option));
282
- }
283
- }
284
- });
285
- if (optOptions.length > 0) {
286
- let optgroup = new Optgroup(dataObj);
287
- optgroup.options = optOptions;
288
- dataSearch.push(optgroup);
289
- }
290
- }
291
- if (dataObj instanceof Option) {
292
- if (!filter || filter(dataObj)) {
293
- dataSearch.push(new Option(dataObj));
294
- }
295
- }
296
- });
297
- return dataSearch;
298
- }
95
+ class Optgroup {
96
+ constructor(optgroup) {
97
+ this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
98
+ this.label = optgroup.label || '';
99
+ this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
100
+ this.closable = optgroup.closable || 'off';
101
+ this.options = [];
102
+ if (optgroup.options) {
103
+ for (const o of optgroup.options) {
104
+ this.options.push(new Option(o));
105
+ }
106
+ }
107
+ }
108
+ }
109
+ class Option {
110
+ constructor(option) {
111
+ this.id = !option.id || option.id === '' ? generateID() : option.id;
112
+ this.value = option.value === undefined ? option.text : option.value;
113
+ this.text = option.text || '';
114
+ this.html = option.html || '';
115
+ this.selected = option.selected !== undefined ? option.selected : false;
116
+ this.display = option.display !== undefined ? option.display : true;
117
+ this.disabled = option.disabled !== undefined ? option.disabled : false;
118
+ this.mandatory = option.mandatory !== undefined ? option.mandatory : false;
119
+ this.placeholder = option.placeholder !== undefined ? option.placeholder : false;
120
+ this.class = option.class || '';
121
+ this.style = option.style || '';
122
+ this.data = option.data || {};
123
+ }
124
+ }
125
+ class Store {
126
+ constructor(type, data) {
127
+ this.selectType = 'single';
128
+ this.data = [];
129
+ this.selectType = type;
130
+ this.setData(data);
131
+ }
132
+ validateDataArray(data) {
133
+ if (!Array.isArray(data)) {
134
+ return new Error('Data must be an array');
135
+ }
136
+ for (let dataObj of data) {
137
+ if (dataObj instanceof Optgroup || 'label' in dataObj) {
138
+ if (!('label' in dataObj)) {
139
+ return new Error('Optgroup must have a label');
140
+ }
141
+ if ('options' in dataObj && dataObj.options) {
142
+ for (let option of dataObj.options) {
143
+ return this.validateOption(option);
144
+ }
145
+ }
146
+ }
147
+ else if (dataObj instanceof Option || 'text' in dataObj) {
148
+ return this.validateOption(dataObj);
149
+ }
150
+ else {
151
+ return new Error('Data object must be a valid optgroup or option');
152
+ }
153
+ }
154
+ return null;
155
+ }
156
+ validateOption(option) {
157
+ if (!('text' in option)) {
158
+ return new Error('Option must have a text');
159
+ }
160
+ return null;
161
+ }
162
+ partialToFullData(data) {
163
+ let dataFinal = [];
164
+ data.forEach((dataObj) => {
165
+ if (dataObj instanceof Optgroup || 'label' in dataObj) {
166
+ let optOptions = [];
167
+ if ('options' in dataObj && dataObj.options) {
168
+ dataObj.options.forEach((option) => {
169
+ optOptions.push(new Option(option));
170
+ });
171
+ }
172
+ if (optOptions.length > 0) {
173
+ dataFinal.push(new Optgroup(dataObj));
174
+ }
175
+ }
176
+ if (dataObj instanceof Option || 'text' in dataObj) {
177
+ dataFinal.push(new Option(dataObj));
178
+ }
179
+ });
180
+ return dataFinal;
181
+ }
182
+ setData(data) {
183
+ this.data = this.partialToFullData(data);
184
+ if (this.selectType === 'single') {
185
+ this.setSelectedBy('value', this.getSelected());
186
+ }
187
+ }
188
+ getData() {
189
+ return this.filter(null, true);
190
+ }
191
+ getDataOptions() {
192
+ return this.filter(null, false);
193
+ }
194
+ addOption(option) {
195
+ this.setData(this.getData().concat(new Option(option)));
196
+ }
197
+ setSelectedBy(selectedType, selectedValues) {
198
+ let firstOption = null;
199
+ let hasSelected = false;
200
+ for (let dataObj of this.data) {
201
+ if (dataObj instanceof Optgroup) {
202
+ for (let option of dataObj.options) {
203
+ if (!firstOption) {
204
+ firstOption = option;
205
+ }
206
+ option.selected = hasSelected ? false : selectedValues.includes(option[selectedType]);
207
+ if (option.selected && this.selectType === 'single') {
208
+ hasSelected = true;
209
+ }
210
+ }
211
+ }
212
+ if (dataObj instanceof Option) {
213
+ if (!firstOption) {
214
+ firstOption = dataObj;
215
+ }
216
+ dataObj.selected = hasSelected ? false : selectedValues.includes(dataObj[selectedType]);
217
+ if (dataObj.selected && this.selectType === 'single') {
218
+ hasSelected = true;
219
+ }
220
+ }
221
+ }
222
+ if (this.selectType === 'single' && firstOption && !hasSelected) {
223
+ firstOption.selected = true;
224
+ }
225
+ }
226
+ getSelected() {
227
+ let selectedOptions = this.getSelectedOptions();
228
+ let selectedValues = [];
229
+ selectedOptions.forEach((option) => {
230
+ selectedValues.push(option.value);
231
+ });
232
+ return selectedValues;
233
+ }
234
+ getSelectedOptions() {
235
+ return this.filter((opt) => {
236
+ return opt.selected;
237
+ }, false);
238
+ }
239
+ getSelectedIDs() {
240
+ let selectedOptions = this.getSelectedOptions();
241
+ let selectedIDs = [];
242
+ selectedOptions.forEach((op) => {
243
+ selectedIDs.push(op.id);
244
+ });
245
+ return selectedIDs;
246
+ }
247
+ getOptgroupByID(id) {
248
+ for (let dataObj of this.data) {
249
+ if (dataObj instanceof Optgroup && dataObj.id === id) {
250
+ return dataObj;
251
+ }
252
+ }
253
+ return null;
254
+ }
255
+ getOptionByID(id) {
256
+ let options = this.filter((opt) => {
257
+ return opt.id === id;
258
+ }, false);
259
+ return options.length ? options[0] : null;
260
+ }
261
+ search(search, searchFilter) {
262
+ search = search.trim();
263
+ if (search === '') {
264
+ return this.getData();
265
+ }
266
+ return this.filter((opt) => {
267
+ return searchFilter(opt, search);
268
+ }, true);
269
+ }
270
+ filter(filter, includeOptgroup) {
271
+ const dataSearch = [];
272
+ this.data.forEach((dataObj) => {
273
+ if (dataObj instanceof Optgroup) {
274
+ let optOptions = [];
275
+ dataObj.options.forEach((option) => {
276
+ if (!filter || filter(option)) {
277
+ if (!includeOptgroup) {
278
+ dataSearch.push(new Option(option));
279
+ }
280
+ else {
281
+ optOptions.push(new Option(option));
282
+ }
283
+ }
284
+ });
285
+ if (optOptions.length > 0) {
286
+ let optgroup = new Optgroup(dataObj);
287
+ optgroup.options = optOptions;
288
+ dataSearch.push(optgroup);
289
+ }
290
+ }
291
+ if (dataObj instanceof Option) {
292
+ if (!filter || filter(dataObj)) {
293
+ dataSearch.push(new Option(dataObj));
294
+ }
295
+ }
296
+ });
297
+ return dataSearch;
298
+ }
299
+ getSelectType() {
300
+ return this.selectType;
301
+ }
299
302
  }
300
303
 
301
- class Render {
302
- constructor(settings, store, callbacks) {
303
- this.classes = {
304
- main: 'ss-main',
305
- placeholder: 'ss-placeholder',
306
- values: 'ss-values',
307
- single: 'ss-single',
308
- max: 'ss-max',
309
- value: 'ss-value',
310
- valueText: 'ss-value-text',
311
- valueDelete: 'ss-value-delete',
312
- valueOut: 'ss-value-out',
313
- deselect: 'ss-deselect',
314
- deselectPath: 'M10,10 L90,90 M10,90 L90,10',
315
- arrow: 'ss-arrow',
316
- arrowClose: 'M10,30 L50,70 L90,30',
317
- arrowOpen: 'M10,70 L50,30 L90,70',
318
- content: 'ss-content',
319
- openAbove: 'ss-open-above',
320
- openBelow: 'ss-open-below',
321
- search: 'ss-search',
322
- searchHighlighter: 'ss-search-highlight',
323
- searching: 'ss-searching',
324
- addable: 'ss-addable',
325
- addablePath: 'M50,10 L50,90 M10,50 L90,50',
326
- list: 'ss-list',
327
- optgroup: 'ss-optgroup',
328
- optgroupLabel: 'ss-optgroup-label',
329
- optgroupLabelText: 'ss-optgroup-label-text',
330
- optgroupActions: 'ss-optgroup-actions',
331
- optgroupSelectAll: 'ss-selectall',
332
- optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
333
- optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
334
- optgroupClosable: 'ss-closable',
335
- option: 'ss-option',
336
- optionDelete: 'M10,10 L90,90 M10,90 L90,10',
337
- highlighted: 'ss-highlighted',
338
- open: 'ss-open',
339
- close: 'ss-close',
340
- selected: 'ss-selected',
341
- error: 'ss-error',
342
- disabled: 'ss-disabled',
343
- hide: 'ss-hide',
344
- };
345
- this.store = store;
346
- this.settings = settings;
347
- this.callbacks = callbacks;
348
- this.main = this.mainDiv();
349
- this.content = this.contentDiv();
350
- this.updateClassStyles();
351
- this.updateAriaAttributes();
352
- this.settings.contentLocation.appendChild(this.content.main);
353
- }
354
- enable() {
355
- this.main.main.classList.remove(this.classes.disabled);
356
- this.content.search.input.disabled = false;
357
- }
358
- disable() {
359
- this.main.main.classList.add(this.classes.disabled);
360
- this.content.search.input.disabled = true;
361
- }
362
- open() {
363
- this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
364
- this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
365
- this.main.main.setAttribute('aria-expanded', 'true');
366
- this.moveContent();
367
- const selectedOptions = this.store.getSelectedOptions();
368
- if (selectedOptions.length) {
369
- const selectedId = selectedOptions[selectedOptions.length - 1].id;
370
- const selectedOption = this.content.list.querySelector('[data-id="' + selectedId + '"]');
371
- if (selectedOption) {
372
- this.ensureElementInView(this.content.list, selectedOption);
373
- }
374
- }
375
- }
376
- close() {
377
- this.main.main.classList.remove(this.classes.openAbove);
378
- this.main.main.classList.remove(this.classes.openBelow);
379
- this.main.main.setAttribute('aria-expanded', 'false');
380
- this.content.main.classList.remove(this.classes.openAbove);
381
- this.content.main.classList.remove(this.classes.openBelow);
382
- this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
383
- }
384
- updateClassStyles() {
385
- this.main.main.className = '';
386
- this.main.main.removeAttribute('style');
387
- this.content.main.className = '';
388
- this.content.main.removeAttribute('style');
389
- this.main.main.classList.add(this.classes.main);
390
- this.content.main.classList.add(this.classes.content);
391
- if (this.settings.style !== '') {
392
- this.main.main.style.cssText = this.settings.style;
393
- this.content.main.style.cssText = this.settings.style;
394
- }
395
- if (this.settings.class.length) {
396
- for (const c of this.settings.class) {
397
- if (c.trim() !== '') {
398
- this.main.main.classList.add(c.trim());
399
- this.content.main.classList.add(c.trim());
400
- }
401
- }
402
- }
403
- if (this.settings.contentPosition === 'relative') {
404
- this.content.main.classList.add('ss-' + this.settings.contentPosition);
405
- }
406
- }
407
- updateAriaAttributes() {
408
- this.main.main.role = 'combobox';
409
- this.main.main.setAttribute('aria-haspopup', 'listbox');
410
- this.main.main.setAttribute('aria-controls', this.content.main.id);
411
- this.main.main.setAttribute('aria-expanded', 'false');
412
- this.content.main.setAttribute('role', 'listbox');
413
- }
414
- mainDiv() {
415
- const main = document.createElement('div');
416
- main.dataset.id = this.settings.id;
417
- main.id = this.settings.id;
418
- main.tabIndex = 0;
419
- main.onkeydown = (e) => {
420
- switch (e.key) {
421
- case 'ArrowUp':
422
- case 'ArrowDown':
423
- this.callbacks.open();
424
- e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
425
- return false;
426
- case 'Tab':
427
- this.callbacks.close();
428
- return true;
429
- case 'Enter':
430
- case ' ':
431
- this.callbacks.open();
432
- const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
433
- if (highlighted) {
434
- highlighted.click();
435
- }
436
- return false;
437
- case 'Escape':
438
- this.callbacks.close();
439
- return false;
440
- }
441
- };
442
- main.onclick = (e) => {
443
- if (this.settings.disabled) {
444
- return;
445
- }
446
- this.settings.isOpen ? this.callbacks.close() : this.callbacks.open();
447
- };
448
- const values = document.createElement('div');
449
- values.classList.add(this.classes.values);
450
- main.appendChild(values);
451
- const deselect = document.createElement('div');
452
- deselect.classList.add(this.classes.deselect);
453
- if (!this.settings.allowDeselect || this.settings.isMultiple) {
454
- deselect.classList.add(this.classes.hide);
455
- }
456
- deselect.onclick = (e) => {
457
- e.stopPropagation();
458
- if (this.settings.disabled) {
459
- return;
460
- }
461
- let shouldDelete = true;
462
- const before = this.store.getSelectedOptions();
463
- const after = [];
464
- if (this.callbacks.beforeChange) {
465
- shouldDelete = this.callbacks.beforeChange(after, before) === true;
466
- }
467
- if (shouldDelete) {
468
- this.callbacks.setSelected([''], false);
469
- if (this.settings.closeOnSelect) {
470
- this.callbacks.close();
471
- }
472
- if (this.callbacks.afterChange) {
473
- this.callbacks.afterChange(after);
474
- }
475
- }
476
- };
477
- const deselectSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
478
- deselectSvg.setAttribute('viewBox', '0 0 100 100');
479
- const deselectPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
480
- deselectPath.setAttribute('d', this.classes.deselectPath);
481
- deselectSvg.appendChild(deselectPath);
482
- deselect.appendChild(deselectSvg);
483
- main.appendChild(deselect);
484
- const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
485
- arrow.classList.add(this.classes.arrow);
486
- arrow.setAttribute('viewBox', '0 0 100 100');
487
- const arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
488
- arrowPath.setAttribute('d', this.classes.arrowClose);
489
- if (this.settings.alwaysOpen) {
490
- arrow.classList.add(this.classes.hide);
491
- }
492
- arrow.appendChild(arrowPath);
493
- main.appendChild(arrow);
494
- return {
495
- main: main,
496
- values: values,
497
- deselect: {
498
- main: deselect,
499
- svg: deselectSvg,
500
- path: deselectPath,
501
- },
502
- arrow: {
503
- main: arrow,
504
- path: arrowPath,
505
- },
506
- };
507
- }
508
- mainFocus(eventType) {
509
- if (eventType !== 'click') {
510
- this.main.main.focus({ preventScroll: true });
511
- }
512
- }
513
- placeholder() {
514
- const placeholderOption = this.store.filter((o) => o.placeholder, false);
515
- let placeholderText = this.settings.placeholderText;
516
- if (placeholderOption.length) {
517
- if (placeholderOption[0].html !== '') {
518
- placeholderText = placeholderOption[0].html;
519
- }
520
- else if (placeholderOption[0].text !== '') {
521
- placeholderText = placeholderOption[0].text;
522
- }
523
- }
524
- const placeholder = document.createElement('div');
525
- placeholder.classList.add(this.classes.placeholder);
526
- placeholder.innerHTML = placeholderText;
527
- return placeholder;
528
- }
529
- renderValues() {
530
- if (!this.settings.isMultiple) {
531
- this.renderSingleValue();
532
- return;
533
- }
534
- this.renderMultipleValues();
535
- }
536
- renderSingleValue() {
537
- const selected = this.store.filter((o) => {
538
- return o.selected && !o.placeholder;
539
- }, false);
540
- const selectedSingle = selected.length > 0 ? selected[0] : null;
541
- if (!selectedSingle) {
542
- this.main.values.innerHTML = this.placeholder().outerHTML;
543
- }
544
- else {
545
- const singleValue = document.createElement('div');
546
- singleValue.classList.add(this.classes.single);
547
- singleValue.innerHTML = selectedSingle.html ? selectedSingle.html : selectedSingle.text;
548
- this.main.values.innerHTML = singleValue.outerHTML;
549
- }
550
- if (!this.settings.allowDeselect || !selected.length) {
551
- this.main.deselect.main.classList.add(this.classes.hide);
552
- }
553
- else {
554
- this.main.deselect.main.classList.remove(this.classes.hide);
555
- }
556
- }
557
- renderMultipleValues() {
558
- let currentNodes = this.main.values.childNodes;
559
- let selectedOptions = this.store.filter((opt) => {
560
- return opt.selected && opt.display;
561
- }, false);
562
- if (selectedOptions.length === 0) {
563
- this.main.values.innerHTML = this.placeholder().outerHTML;
564
- return;
565
- }
566
- else {
567
- const placeholder = this.main.values.querySelector('.' + this.classes.placeholder);
568
- if (placeholder) {
569
- placeholder.remove();
570
- }
571
- }
572
- if (selectedOptions.length > this.settings.maxValuesShown) {
573
- const singleValue = document.createElement('div');
574
- singleValue.classList.add(this.classes.max);
575
- singleValue.textContent = this.settings.maxValuesMessage.replace('{number}', selectedOptions.length.toString());
576
- this.main.values.innerHTML = singleValue.outerHTML;
577
- return;
578
- }
579
- else {
580
- const maxValuesMessage = this.main.values.querySelector('.' + this.classes.max);
581
- if (maxValuesMessage) {
582
- maxValuesMessage.remove();
583
- }
584
- }
585
- let removeNodes = [];
586
- for (let i = 0; i < currentNodes.length; i++) {
587
- const node = currentNodes[i];
588
- const id = node.getAttribute('data-id');
589
- if (id) {
590
- const found = selectedOptions.filter((opt) => {
591
- return opt.id === id;
592
- }, false);
593
- if (!found.length) {
594
- removeNodes.push(node);
595
- }
596
- }
597
- }
598
- for (const n of removeNodes) {
599
- n.classList.add(this.classes.valueOut);
600
- setTimeout(() => {
601
- this.main.values.removeChild(n);
602
- }, 100);
603
- }
604
- currentNodes = this.main.values.childNodes;
605
- for (let d = 0; d < selectedOptions.length; d++) {
606
- let shouldAdd = true;
607
- for (let i = 0; i < currentNodes.length; i++) {
608
- if (selectedOptions[d].id === String(currentNodes[i].dataset.id)) {
609
- shouldAdd = false;
610
- }
611
- }
612
- if (shouldAdd) {
613
- if (currentNodes.length === 0) {
614
- this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
615
- }
616
- else if (d === 0) {
617
- this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
618
- }
619
- else {
620
- currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]));
621
- }
622
- }
623
- }
624
- }
625
- multipleValue(option) {
626
- const value = document.createElement('div');
627
- value.classList.add(this.classes.value);
628
- value.dataset.id = option.id;
629
- const text = document.createElement('div');
630
- text.classList.add(this.classes.valueText);
631
- text.innerHTML = option.text;
632
- value.appendChild(text);
633
- if (!option.mandatory) {
634
- const deleteDiv = document.createElement('div');
635
- deleteDiv.classList.add(this.classes.valueDelete);
636
- deleteDiv.onclick = (e) => {
637
- e.preventDefault();
638
- e.stopPropagation();
639
- if (this.settings.disabled) {
640
- return;
641
- }
642
- let shouldDelete = true;
643
- const before = this.store.getSelectedOptions();
644
- const after = before.filter((o) => {
645
- return o.selected && o.id !== option.id;
646
- }, true);
647
- if (this.settings.minSelected && after.length < this.settings.minSelected) {
648
- return;
649
- }
650
- if (this.callbacks.beforeChange) {
651
- shouldDelete = this.callbacks.beforeChange(after, before) === true;
652
- }
653
- if (shouldDelete) {
654
- let selectedValues = [];
655
- for (const o of after) {
656
- if (o instanceof Optgroup) {
657
- for (const c of o.options) {
658
- selectedValues.push(c.value);
659
- }
660
- }
661
- if (o instanceof Option) {
662
- selectedValues.push(o.value);
663
- }
664
- }
665
- this.callbacks.setSelected(selectedValues, false);
666
- if (this.settings.closeOnSelect) {
667
- this.callbacks.close();
668
- }
669
- if (this.callbacks.afterChange) {
670
- this.callbacks.afterChange(after);
671
- }
672
- }
673
- };
674
- const deleteSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
675
- deleteSvg.setAttribute('viewBox', '0 0 100 100');
676
- const deletePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
677
- deletePath.setAttribute('d', this.classes.optionDelete);
678
- deleteSvg.appendChild(deletePath);
679
- deleteDiv.appendChild(deleteSvg);
680
- value.appendChild(deleteDiv);
681
- }
682
- return value;
683
- }
684
- contentDiv() {
685
- const main = document.createElement('div');
686
- main.dataset.id = this.settings.id;
687
- main.id = this.settings.id;
688
- const search = this.searchDiv();
689
- main.appendChild(search.main);
690
- const list = this.listDiv();
691
- main.appendChild(list);
692
- return {
693
- main: main,
694
- search: search,
695
- list: list,
696
- };
697
- }
698
- moveContent() {
699
- if (this.settings.contentPosition === 'relative') {
700
- this.moveContentBelow();
701
- return;
702
- }
703
- if (this.settings.openPosition === 'down') {
704
- this.moveContentBelow();
705
- return;
706
- }
707
- else if (this.settings.openPosition === 'up') {
708
- this.moveContentAbove();
709
- return;
710
- }
711
- if (this.putContent() === 'up') {
712
- this.moveContentAbove();
713
- }
714
- else {
715
- this.moveContentBelow();
716
- }
717
- }
718
- searchDiv() {
719
- const main = document.createElement('div');
720
- const input = document.createElement('input');
721
- const addable = document.createElement('div');
722
- main.classList.add(this.classes.search);
723
- const searchReturn = {
724
- main,
725
- input,
726
- };
727
- if (!this.settings.showSearch) {
728
- main.classList.add(this.classes.hide);
729
- input.readOnly = true;
730
- }
731
- input.type = 'search';
732
- input.placeholder = this.settings.searchPlaceholder;
733
- input.tabIndex = -1;
734
- input.setAttribute('aria-label', this.settings.searchPlaceholder);
735
- input.setAttribute('autocapitalize', 'off');
736
- input.setAttribute('autocomplete', 'off');
737
- input.setAttribute('autocorrect', 'off');
738
- input.oninput = debounce((e) => {
739
- this.callbacks.search(e.target.value);
740
- }, 100);
741
- input.onkeydown = (e) => {
742
- switch (e.key) {
743
- case 'ArrowUp':
744
- case 'ArrowDown':
745
- e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
746
- return false;
747
- case 'Tab':
748
- this.callbacks.close();
749
- return true;
750
- case 'Escape':
751
- this.callbacks.close();
752
- return false;
753
- case 'Enter':
754
- case ' ':
755
- if (this.callbacks.addable && e.ctrlKey) {
756
- addable.click();
757
- return false;
758
- }
759
- else {
760
- const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
761
- if (highlighted) {
762
- highlighted.click();
763
- return false;
764
- }
765
- }
766
- return true;
767
- }
768
- };
769
- main.appendChild(input);
770
- if (this.callbacks.addable) {
771
- addable.classList.add(this.classes.addable);
772
- const plus = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
773
- plus.setAttribute('viewBox', '0 0 100 100');
774
- const plusPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
775
- plusPath.setAttribute('d', this.classes.addablePath);
776
- plus.appendChild(plusPath);
777
- addable.appendChild(plus);
778
- addable.onclick = (e) => {
779
- e.preventDefault();
780
- e.stopPropagation();
781
- if (!this.callbacks.addable) {
782
- return;
783
- }
784
- const inputValue = this.content.search.input.value.trim();
785
- if (inputValue === '') {
786
- this.content.search.input.focus();
787
- return;
788
- }
789
- const runFinish = (oo) => {
790
- let newOption = new Option(oo);
791
- this.callbacks.addOption(newOption);
792
- if (this.settings.isMultiple) {
793
- let values = this.store.getSelected();
794
- values.push(newOption.value);
795
- this.callbacks.setSelected(values, true);
796
- }
797
- else {
798
- this.callbacks.setSelected([newOption.value], true);
799
- }
800
- this.callbacks.search('');
801
- if (this.settings.closeOnSelect) {
802
- setTimeout(() => {
803
- this.callbacks.close();
804
- }, 100);
805
- }
806
- };
807
- const addableValue = this.callbacks.addable(inputValue);
808
- if (addableValue === false || addableValue === undefined || addableValue === null) {
809
- return;
810
- }
811
- if (addableValue instanceof Promise) {
812
- addableValue.then((value) => {
813
- if (typeof value === 'string') {
814
- runFinish({
815
- text: value,
816
- value: value,
817
- });
818
- }
819
- else {
820
- runFinish(value);
821
- }
822
- });
823
- }
824
- else if (typeof addableValue === 'string') {
825
- runFinish({
826
- text: addableValue,
827
- value: addableValue,
828
- });
829
- }
830
- else {
831
- runFinish(addableValue);
832
- }
833
- return;
834
- };
835
- main.appendChild(addable);
836
- searchReturn.addable = {
837
- main: addable,
838
- svg: plus,
839
- path: plusPath,
840
- };
841
- }
842
- return searchReturn;
843
- }
844
- searchFocus() {
845
- this.content.search.input.focus();
846
- }
847
- getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
848
- let query = '.' + this.classes.option;
849
- if (notPlaceholder) {
850
- query += ':not(.' + this.classes.placeholder + ')';
851
- }
852
- if (notDisabled) {
853
- query += ':not(.' + this.classes.disabled + ')';
854
- }
855
- if (notHidden) {
856
- query += ':not(.' + this.classes.hide + ')';
857
- }
858
- return Array.from(this.content.list.querySelectorAll(query));
859
- }
860
- highlight(dir) {
861
- const options = this.getOptions(true, true, true);
862
- if (options.length === 0) {
863
- return;
864
- }
865
- if (options.length === 1) {
866
- if (!options[0].classList.contains(this.classes.highlighted)) {
867
- options[0].classList.add(this.classes.highlighted);
868
- return;
869
- }
870
- }
871
- for (let i = 0; i < options.length; i++) {
872
- if (options[i].classList.contains(this.classes.highlighted)) {
873
- const prevOption = options[i];
874
- prevOption.classList.remove(this.classes.highlighted);
875
- const prevParent = prevOption.parentElement;
876
- if (prevParent && prevParent.classList.contains(this.classes.open)) {
877
- const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel);
878
- if (optgroupLabel) {
879
- optgroupLabel.click();
880
- }
881
- }
882
- let selectOption = options[dir === 'down' ? (i + 1 < options.length ? i + 1 : 0) : i - 1 >= 0 ? i - 1 : options.length - 1];
883
- selectOption.classList.add(this.classes.highlighted);
884
- this.ensureElementInView(this.content.list, selectOption);
885
- const selectParent = selectOption.parentElement;
886
- if (selectParent && selectParent.classList.contains(this.classes.close)) {
887
- const optgroupLabel = selectParent.querySelector('.' + this.classes.optgroupLabel);
888
- if (optgroupLabel) {
889
- optgroupLabel.click();
890
- }
891
- }
892
- return;
893
- }
894
- }
895
- options[dir === 'down' ? 0 : options.length - 1].classList.add(this.classes.highlighted);
896
- this.ensureElementInView(this.content.list, options[dir === 'down' ? 0 : options.length - 1]);
897
- }
898
- listDiv() {
899
- const options = document.createElement('div');
900
- options.classList.add(this.classes.list);
901
- return options;
902
- }
903
- renderError(error) {
904
- this.content.list.innerHTML = '';
905
- const errorDiv = document.createElement('div');
906
- errorDiv.classList.add(this.classes.error);
907
- errorDiv.textContent = error;
908
- this.content.list.appendChild(errorDiv);
909
- }
910
- renderSearching() {
911
- this.content.list.innerHTML = '';
912
- const searchingDiv = document.createElement('div');
913
- searchingDiv.classList.add(this.classes.searching);
914
- searchingDiv.textContent = this.settings.searchingText;
915
- this.content.list.appendChild(searchingDiv);
916
- }
917
- renderOptions(data) {
918
- this.content.list.innerHTML = '';
919
- if (data.length === 0) {
920
- const noResults = document.createElement('div');
921
- noResults.classList.add(this.classes.search);
922
- noResults.innerHTML = this.settings.searchText;
923
- this.content.list.appendChild(noResults);
924
- return;
925
- }
926
- for (const d of data) {
927
- if (d instanceof Optgroup) {
928
- const optgroupEl = document.createElement('div');
929
- optgroupEl.classList.add(this.classes.optgroup);
930
- const optgroupLabel = document.createElement('div');
931
- optgroupLabel.classList.add(this.classes.optgroupLabel);
932
- optgroupEl.appendChild(optgroupLabel);
933
- const optgroupLabelText = document.createElement('div');
934
- optgroupLabelText.classList.add(this.classes.optgroupLabelText);
935
- optgroupLabelText.textContent = d.label;
936
- optgroupLabel.appendChild(optgroupLabelText);
937
- const optgroupActions = document.createElement('div');
938
- optgroupActions.classList.add(this.classes.optgroupActions);
939
- optgroupLabel.appendChild(optgroupActions);
940
- if (this.settings.isMultiple && d.selectAll) {
941
- const selectAll = document.createElement('div');
942
- selectAll.classList.add(this.classes.optgroupSelectAll);
943
- let allSelected = true;
944
- for (const o of d.options) {
945
- if (!o.selected) {
946
- allSelected = false;
947
- break;
948
- }
949
- }
950
- if (allSelected) {
951
- selectAll.classList.add(this.classes.selected);
952
- }
953
- const selectAllText = document.createElement('span');
954
- selectAllText.textContent = 'Select All';
955
- selectAll.appendChild(selectAllText);
956
- const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
957
- selectAllSvg.setAttribute('viewBox', '0 0 100 100');
958
- selectAll.appendChild(selectAllSvg);
959
- const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path');
960
- selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox);
961
- selectAllSvg.appendChild(selectAllBox);
962
- const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path');
963
- selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck);
964
- selectAllSvg.appendChild(selectAllCheck);
965
- selectAll.addEventListener('click', (e) => {
966
- e.preventDefault();
967
- e.stopPropagation();
968
- const currentSelected = this.store.getSelected();
969
- if (allSelected) {
970
- const newSelected = currentSelected.filter((s) => {
971
- for (const o of d.options) {
972
- if (s === o.value) {
973
- return false;
974
- }
975
- }
976
- return true;
977
- });
978
- this.callbacks.setSelected(newSelected, true);
979
- return;
980
- }
981
- else {
982
- const newSelected = currentSelected.concat(d.options.map((o) => o.value));
983
- this.callbacks.setSelected(newSelected, true);
984
- }
985
- });
986
- optgroupActions.appendChild(selectAll);
987
- }
988
- if (d.closable !== 'off') {
989
- const optgroupClosable = document.createElement('div');
990
- optgroupClosable.classList.add(this.classes.optgroupClosable);
991
- const optgroupClosableSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
992
- optgroupClosableSvg.setAttribute('viewBox', '0 0 100 100');
993
- optgroupClosableSvg.classList.add(this.classes.arrow);
994
- optgroupClosable.appendChild(optgroupClosableSvg);
995
- const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
996
- optgroupClosableSvg.appendChild(optgroupClosableArrow);
997
- if (d.options.some((o) => o.selected) || this.content.search.input.value.trim() !== '') {
998
- optgroupClosable.classList.add(this.classes.open);
999
- optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
1000
- }
1001
- else if (d.closable === 'open') {
1002
- optgroupEl.classList.add(this.classes.open);
1003
- optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
1004
- }
1005
- else if (d.closable === 'close') {
1006
- optgroupEl.classList.add(this.classes.close);
1007
- optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
1008
- }
1009
- optgroupLabel.addEventListener('click', (e) => {
1010
- e.preventDefault();
1011
- e.stopPropagation();
1012
- if (optgroupEl.classList.contains(this.classes.close)) {
1013
- optgroupEl.classList.remove(this.classes.close);
1014
- optgroupEl.classList.add(this.classes.open);
1015
- optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
1016
- }
1017
- else {
1018
- optgroupEl.classList.remove(this.classes.open);
1019
- optgroupEl.classList.add(this.classes.close);
1020
- optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
1021
- }
1022
- });
1023
- optgroupActions.appendChild(optgroupClosable);
1024
- }
1025
- optgroupEl.appendChild(optgroupLabel);
1026
- for (const o of d.options) {
1027
- optgroupEl.appendChild(this.option(o));
1028
- }
1029
- this.content.list.appendChild(optgroupEl);
1030
- }
1031
- if (d instanceof Option) {
1032
- this.content.list.appendChild(this.option(d));
1033
- }
1034
- }
1035
- }
1036
- option(option) {
1037
- if (option.placeholder) {
1038
- const placeholder = document.createElement('div');
1039
- placeholder.classList.add(this.classes.option);
1040
- placeholder.classList.add(this.classes.hide);
1041
- return placeholder;
1042
- }
1043
- const optionEl = document.createElement('div');
1044
- optionEl.dataset.id = option.id;
1045
- optionEl.id = option.id;
1046
- optionEl.classList.add(this.classes.option);
1047
- optionEl.setAttribute('role', 'option');
1048
- if (option.class) {
1049
- option.class.split(' ').forEach((dataClass) => {
1050
- optionEl.classList.add(dataClass);
1051
- });
1052
- }
1053
- if (option.style) {
1054
- optionEl.style.cssText = option.style;
1055
- }
1056
- if (this.settings.searchHighlight && this.content.search.input.value.trim() !== '') {
1057
- optionEl.innerHTML = this.highlightText(option.html !== '' ? option.html : option.text, this.content.search.input.value, this.classes.searchHighlighter);
1058
- }
1059
- else if (option.html !== '') {
1060
- optionEl.innerHTML = option.html;
1061
- }
1062
- else {
1063
- optionEl.textContent = option.text;
1064
- }
1065
- if (this.settings.showOptionTooltips && optionEl.textContent) {
1066
- optionEl.setAttribute('title', optionEl.textContent);
1067
- }
1068
- if (!option.display) {
1069
- optionEl.classList.add(this.classes.hide);
1070
- }
1071
- if (option.disabled) {
1072
- optionEl.classList.add(this.classes.disabled);
1073
- }
1074
- if (option.selected && this.settings.hideSelected) {
1075
- optionEl.classList.add(this.classes.hide);
1076
- }
1077
- if (option.selected) {
1078
- optionEl.classList.add(this.classes.selected);
1079
- optionEl.setAttribute('aria-selected', 'true');
1080
- this.main.main.setAttribute('aria-activedescendant', optionEl.id);
1081
- }
1082
- else {
1083
- optionEl.classList.remove(this.classes.selected);
1084
- optionEl.setAttribute('aria-selected', 'false');
1085
- }
1086
- optionEl.addEventListener('click', (e) => {
1087
- e.preventDefault();
1088
- e.stopPropagation();
1089
- const selectedOptions = this.store.getSelected();
1090
- const element = e.currentTarget;
1091
- const elementID = String(element.dataset.id);
1092
- if (option.disabled || (option.selected && !this.settings.allowDeselect)) {
1093
- return;
1094
- }
1095
- if ((this.settings.isMultiple && this.settings.maxSelected <= selectedOptions.length && !option.selected) ||
1096
- (this.settings.isMultiple && this.settings.minSelected >= selectedOptions.length && option.selected)) {
1097
- return;
1098
- }
1099
- let shouldUpdate = false;
1100
- const before = this.store.getSelectedOptions();
1101
- let after = [];
1102
- if (this.settings.isMultiple) {
1103
- if (option.selected) {
1104
- after = before.filter((o) => o.id !== elementID);
1105
- }
1106
- else {
1107
- after = before.concat(option);
1108
- }
1109
- }
1110
- if (!this.settings.isMultiple) {
1111
- if (option.selected) {
1112
- after = [];
1113
- }
1114
- else {
1115
- after = [option];
1116
- }
1117
- }
1118
- if (!this.callbacks.beforeChange) {
1119
- shouldUpdate = true;
1120
- }
1121
- if (this.callbacks.beforeChange) {
1122
- if (this.callbacks.beforeChange(after, before) === false) {
1123
- shouldUpdate = false;
1124
- }
1125
- else {
1126
- shouldUpdate = true;
1127
- }
1128
- }
1129
- if (shouldUpdate) {
1130
- if (!this.store.getOptionByID(elementID)) {
1131
- this.callbacks.addOption(option);
1132
- }
1133
- this.callbacks.setSelected(after.map((o) => o.value), false);
1134
- if (this.settings.closeOnSelect) {
1135
- this.callbacks.close();
1136
- }
1137
- if (this.callbacks.afterChange) {
1138
- this.callbacks.afterChange(after);
1139
- }
1140
- }
1141
- });
1142
- return optionEl;
1143
- }
1144
- destroy() {
1145
- this.main.main.remove();
1146
- this.content.main.remove();
1147
- }
1148
- highlightText(str, search, className) {
1149
- let completedString = str;
1150
- const regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i');
1151
- if (!str.match(regex)) {
1152
- return str;
1153
- }
1154
- const matchStartPosition = str.match(regex).index;
1155
- const matchEndPosition = matchStartPosition + str.match(regex)[0].toString().length;
1156
- const originalTextFoundByRegex = str.substring(matchStartPosition, matchEndPosition);
1157
- completedString = completedString.replace(regex, `<mark class="${className}">${originalTextFoundByRegex}</mark>`);
1158
- return completedString;
1159
- }
1160
- moveContentAbove() {
1161
- const mainHeight = this.main.main.offsetHeight;
1162
- const contentHeight = this.content.main.offsetHeight;
1163
- this.main.main.classList.remove(this.classes.openBelow);
1164
- this.main.main.classList.add(this.classes.openAbove);
1165
- this.content.main.classList.remove(this.classes.openBelow);
1166
- this.content.main.classList.add(this.classes.openAbove);
1167
- const containerRect = this.main.main.getBoundingClientRect();
1168
- this.content.main.style.margin = '-' + (mainHeight + contentHeight - 1) + 'px 0px 0px 0px';
1169
- this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
1170
- this.content.main.style.left = containerRect.left + window.scrollX + 'px';
1171
- this.content.main.style.width = containerRect.width + 'px';
1172
- }
1173
- moveContentBelow() {
1174
- this.main.main.classList.remove(this.classes.openAbove);
1175
- this.main.main.classList.add(this.classes.openBelow);
1176
- this.content.main.classList.remove(this.classes.openAbove);
1177
- this.content.main.classList.add(this.classes.openBelow);
1178
- const containerRect = this.main.main.getBoundingClientRect();
1179
- this.content.main.style.margin = '-1px 0px 0px 0px';
1180
- if (this.settings.contentPosition !== 'relative') {
1181
- this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
1182
- this.content.main.style.left = containerRect.left + window.scrollX + 'px';
1183
- this.content.main.style.width = containerRect.width + 'px';
1184
- }
1185
- }
1186
- ensureElementInView(container, element) {
1187
- const cTop = container.scrollTop + container.offsetTop;
1188
- const cBottom = cTop + container.clientHeight;
1189
- const eTop = element.offsetTop;
1190
- const eBottom = eTop + element.clientHeight;
1191
- if (eTop < cTop) {
1192
- container.scrollTop -= cTop - eTop;
1193
- }
1194
- else if (eBottom > cBottom) {
1195
- container.scrollTop += eBottom - cBottom;
1196
- }
1197
- }
1198
- putContent() {
1199
- const mainHeight = this.main.main.offsetHeight;
1200
- const mainRect = this.main.main.getBoundingClientRect();
1201
- const contentHeight = this.content.main.offsetHeight;
1202
- const spaceBelow = window.innerHeight - (mainRect.top + mainHeight);
1203
- if (spaceBelow <= contentHeight) {
1204
- if (mainRect.top > contentHeight) {
1205
- return 'up';
1206
- }
1207
- else {
1208
- return 'down';
1209
- }
1210
- }
1211
- return 'down';
1212
- }
304
+ class Render {
305
+ constructor(settings, store, callbacks) {
306
+ this.classes = {
307
+ main: 'ss-main',
308
+ placeholder: 'ss-placeholder',
309
+ values: 'ss-values',
310
+ single: 'ss-single',
311
+ max: 'ss-max',
312
+ value: 'ss-value',
313
+ valueText: 'ss-value-text',
314
+ valueDelete: 'ss-value-delete',
315
+ valueOut: 'ss-value-out',
316
+ deselect: 'ss-deselect',
317
+ deselectPath: 'M10,10 L90,90 M10,90 L90,10',
318
+ arrow: 'ss-arrow',
319
+ arrowClose: 'M10,30 L50,70 L90,30',
320
+ arrowOpen: 'M10,70 L50,30 L90,70',
321
+ content: 'ss-content',
322
+ openAbove: 'ss-open-above',
323
+ openBelow: 'ss-open-below',
324
+ search: 'ss-search',
325
+ searchHighlighter: 'ss-search-highlight',
326
+ searching: 'ss-searching',
327
+ addable: 'ss-addable',
328
+ addablePath: 'M50,10 L50,90 M10,50 L90,50',
329
+ list: 'ss-list',
330
+ optgroup: 'ss-optgroup',
331
+ optgroupLabel: 'ss-optgroup-label',
332
+ optgroupLabelText: 'ss-optgroup-label-text',
333
+ optgroupActions: 'ss-optgroup-actions',
334
+ optgroupSelectAll: 'ss-selectall',
335
+ optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
336
+ optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
337
+ optgroupClosable: 'ss-closable',
338
+ option: 'ss-option',
339
+ optionDelete: 'M10,10 L90,90 M10,90 L90,10',
340
+ highlighted: 'ss-highlighted',
341
+ open: 'ss-open',
342
+ close: 'ss-close',
343
+ selected: 'ss-selected',
344
+ error: 'ss-error',
345
+ disabled: 'ss-disabled',
346
+ hide: 'ss-hide',
347
+ };
348
+ this.store = store;
349
+ this.settings = settings;
350
+ this.callbacks = callbacks;
351
+ this.main = this.mainDiv();
352
+ this.content = this.contentDiv();
353
+ this.updateClassStyles();
354
+ this.updateAriaAttributes();
355
+ this.settings.contentLocation.appendChild(this.content.main);
356
+ }
357
+ enable() {
358
+ this.main.main.classList.remove(this.classes.disabled);
359
+ this.content.search.input.disabled = false;
360
+ }
361
+ disable() {
362
+ this.main.main.classList.add(this.classes.disabled);
363
+ this.content.search.input.disabled = true;
364
+ }
365
+ open() {
366
+ this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
367
+ this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
368
+ this.main.main.setAttribute('aria-expanded', 'true');
369
+ this.moveContent();
370
+ const selectedOptions = this.store.getSelectedOptions();
371
+ if (selectedOptions.length) {
372
+ const selectedId = selectedOptions[selectedOptions.length - 1].id;
373
+ const selectedOption = this.content.list.querySelector('[data-id="' + selectedId + '"]');
374
+ if (selectedOption) {
375
+ this.ensureElementInView(this.content.list, selectedOption);
376
+ }
377
+ }
378
+ }
379
+ close() {
380
+ this.main.main.classList.remove(this.classes.openAbove);
381
+ this.main.main.classList.remove(this.classes.openBelow);
382
+ this.main.main.setAttribute('aria-expanded', 'false');
383
+ this.content.main.classList.remove(this.classes.openAbove);
384
+ this.content.main.classList.remove(this.classes.openBelow);
385
+ this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
386
+ }
387
+ updateClassStyles() {
388
+ this.main.main.className = '';
389
+ this.main.main.removeAttribute('style');
390
+ this.content.main.className = '';
391
+ this.content.main.removeAttribute('style');
392
+ this.main.main.classList.add(this.classes.main);
393
+ this.content.main.classList.add(this.classes.content);
394
+ if (this.settings.style !== '') {
395
+ this.main.main.style.cssText = this.settings.style;
396
+ this.content.main.style.cssText = this.settings.style;
397
+ }
398
+ if (this.settings.class.length) {
399
+ for (const c of this.settings.class) {
400
+ if (c.trim() !== '') {
401
+ this.main.main.classList.add(c.trim());
402
+ this.content.main.classList.add(c.trim());
403
+ }
404
+ }
405
+ }
406
+ if (this.settings.contentPosition === 'relative') {
407
+ this.content.main.classList.add('ss-' + this.settings.contentPosition);
408
+ }
409
+ }
410
+ updateAriaAttributes() {
411
+ this.main.main.role = 'combobox';
412
+ this.main.main.setAttribute('aria-haspopup', 'listbox');
413
+ this.main.main.setAttribute('aria-controls', this.content.main.id);
414
+ this.main.main.setAttribute('aria-expanded', 'false');
415
+ this.content.main.setAttribute('role', 'listbox');
416
+ }
417
+ mainDiv() {
418
+ var _a;
419
+ const main = document.createElement('div');
420
+ main.dataset.id = this.settings.id;
421
+ main.id = this.settings.id;
422
+ main.tabIndex = 0;
423
+ main.onkeydown = (e) => {
424
+ switch (e.key) {
425
+ case 'ArrowUp':
426
+ case 'ArrowDown':
427
+ this.callbacks.open();
428
+ e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
429
+ return false;
430
+ case 'Tab':
431
+ this.callbacks.close();
432
+ return true;
433
+ case 'Enter':
434
+ case ' ':
435
+ this.callbacks.open();
436
+ const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
437
+ if (highlighted) {
438
+ highlighted.click();
439
+ }
440
+ return false;
441
+ case 'Escape':
442
+ this.callbacks.close();
443
+ return false;
444
+ }
445
+ };
446
+ main.onclick = (e) => {
447
+ if (this.settings.disabled) {
448
+ return;
449
+ }
450
+ this.settings.isOpen ? this.callbacks.close() : this.callbacks.open();
451
+ };
452
+ const values = document.createElement('div');
453
+ values.classList.add(this.classes.values);
454
+ main.appendChild(values);
455
+ const deselect = document.createElement('div');
456
+ deselect.classList.add(this.classes.deselect);
457
+ const selectedOptions = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getSelectedOptions();
458
+ if (!this.settings.allowDeselect || (this.settings.isMultiple && selectedOptions && selectedOptions.length <= 0)) {
459
+ deselect.classList.add(this.classes.hide);
460
+ }
461
+ else {
462
+ deselect.classList.remove(this.classes.hide);
463
+ }
464
+ deselect.onclick = (e) => {
465
+ e.stopPropagation();
466
+ if (this.settings.disabled) {
467
+ return;
468
+ }
469
+ let shouldDelete = true;
470
+ const before = this.store.getSelectedOptions();
471
+ const after = [];
472
+ if (this.callbacks.beforeChange) {
473
+ shouldDelete = this.callbacks.beforeChange(after, before) === true;
474
+ }
475
+ if (shouldDelete) {
476
+ if (this.settings.isMultiple) {
477
+ this.callbacks.setSelected([], false);
478
+ this.updateDeselectAll();
479
+ }
480
+ else {
481
+ this.callbacks.setSelected([''], false);
482
+ }
483
+ if (this.settings.closeOnSelect) {
484
+ this.callbacks.close();
485
+ }
486
+ if (this.callbacks.afterChange) {
487
+ this.callbacks.afterChange(after);
488
+ }
489
+ }
490
+ };
491
+ const deselectSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
492
+ deselectSvg.setAttribute('viewBox', '0 0 100 100');
493
+ const deselectPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
494
+ deselectPath.setAttribute('d', this.classes.deselectPath);
495
+ deselectSvg.appendChild(deselectPath);
496
+ deselect.appendChild(deselectSvg);
497
+ main.appendChild(deselect);
498
+ const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
499
+ arrow.classList.add(this.classes.arrow);
500
+ arrow.setAttribute('viewBox', '0 0 100 100');
501
+ const arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
502
+ arrowPath.setAttribute('d', this.classes.arrowClose);
503
+ if (this.settings.alwaysOpen) {
504
+ arrow.classList.add(this.classes.hide);
505
+ }
506
+ arrow.appendChild(arrowPath);
507
+ main.appendChild(arrow);
508
+ return {
509
+ main: main,
510
+ values: values,
511
+ deselect: {
512
+ main: deselect,
513
+ svg: deselectSvg,
514
+ path: deselectPath,
515
+ },
516
+ arrow: {
517
+ main: arrow,
518
+ path: arrowPath,
519
+ },
520
+ };
521
+ }
522
+ mainFocus(eventType) {
523
+ if (eventType !== 'click') {
524
+ this.main.main.focus({ preventScroll: true });
525
+ }
526
+ }
527
+ placeholder() {
528
+ const placeholderOption = this.store.filter((o) => o.placeholder, false);
529
+ let placeholderText = this.settings.placeholderText;
530
+ if (placeholderOption.length) {
531
+ if (placeholderOption[0].html !== '') {
532
+ placeholderText = placeholderOption[0].html;
533
+ }
534
+ else if (placeholderOption[0].text !== '') {
535
+ placeholderText = placeholderOption[0].text;
536
+ }
537
+ }
538
+ const placeholder = document.createElement('div');
539
+ placeholder.classList.add(this.classes.placeholder);
540
+ placeholder.innerHTML = placeholderText;
541
+ return placeholder;
542
+ }
543
+ renderValues() {
544
+ if (!this.settings.isMultiple) {
545
+ this.renderSingleValue();
546
+ return;
547
+ }
548
+ this.renderMultipleValues();
549
+ }
550
+ renderSingleValue() {
551
+ const selected = this.store.filter((o) => {
552
+ return o.selected && !o.placeholder;
553
+ }, false);
554
+ const selectedSingle = selected.length > 0 ? selected[0] : null;
555
+ if (!selectedSingle) {
556
+ this.main.values.innerHTML = this.placeholder().outerHTML;
557
+ }
558
+ else {
559
+ const singleValue = document.createElement('div');
560
+ singleValue.classList.add(this.classes.single);
561
+ if (selectedSingle.html) {
562
+ singleValue.innerHTML = selectedSingle.html;
563
+ }
564
+ else {
565
+ singleValue.innerText = selectedSingle.text;
566
+ }
567
+ this.main.values.innerHTML = singleValue.outerHTML;
568
+ }
569
+ if (!this.settings.allowDeselect || !selected.length) {
570
+ this.main.deselect.main.classList.add(this.classes.hide);
571
+ }
572
+ else {
573
+ this.main.deselect.main.classList.remove(this.classes.hide);
574
+ }
575
+ }
576
+ renderMultipleValues() {
577
+ let currentNodes = this.main.values.childNodes;
578
+ let selectedOptions = this.store.filter((opt) => {
579
+ return opt.selected && opt.display;
580
+ }, false);
581
+ if (selectedOptions.length === 0) {
582
+ this.main.values.innerHTML = this.placeholder().outerHTML;
583
+ return;
584
+ }
585
+ else {
586
+ const placeholder = this.main.values.querySelector('.' + this.classes.placeholder);
587
+ if (placeholder) {
588
+ placeholder.remove();
589
+ }
590
+ }
591
+ if (selectedOptions.length > this.settings.maxValuesShown) {
592
+ const singleValue = document.createElement('div');
593
+ singleValue.classList.add(this.classes.max);
594
+ singleValue.textContent = this.settings.maxValuesMessage.replace('{number}', selectedOptions.length.toString());
595
+ this.main.values.innerHTML = singleValue.outerHTML;
596
+ return;
597
+ }
598
+ else {
599
+ const maxValuesMessage = this.main.values.querySelector('.' + this.classes.max);
600
+ if (maxValuesMessage) {
601
+ maxValuesMessage.remove();
602
+ }
603
+ }
604
+ let removeNodes = [];
605
+ for (let i = 0; i < currentNodes.length; i++) {
606
+ const node = currentNodes[i];
607
+ const id = node.getAttribute('data-id');
608
+ if (id) {
609
+ const found = selectedOptions.filter((opt) => {
610
+ return opt.id === id;
611
+ }, false);
612
+ if (!found.length) {
613
+ removeNodes.push(node);
614
+ }
615
+ }
616
+ }
617
+ for (const n of removeNodes) {
618
+ n.classList.add(this.classes.valueOut);
619
+ setTimeout(() => {
620
+ if (this.main.values.hasChildNodes() && this.main.values.contains(n)) {
621
+ this.main.values.removeChild(n);
622
+ }
623
+ }, 100);
624
+ }
625
+ currentNodes = this.main.values.childNodes;
626
+ for (let d = 0; d < selectedOptions.length; d++) {
627
+ let shouldAdd = true;
628
+ for (let i = 0; i < currentNodes.length; i++) {
629
+ if (selectedOptions[d].id === String(currentNodes[i].dataset.id)) {
630
+ shouldAdd = false;
631
+ }
632
+ }
633
+ if (shouldAdd) {
634
+ if (currentNodes.length === 0) {
635
+ this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
636
+ }
637
+ else if (d === 0) {
638
+ this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
639
+ }
640
+ else {
641
+ currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]));
642
+ }
643
+ }
644
+ }
645
+ this.updateDeselectAll();
646
+ }
647
+ multipleValue(option) {
648
+ const value = document.createElement('div');
649
+ value.classList.add(this.classes.value);
650
+ value.dataset.id = option.id;
651
+ const text = document.createElement('div');
652
+ text.classList.add(this.classes.valueText);
653
+ text.innerText = option.text;
654
+ value.appendChild(text);
655
+ if (!option.mandatory) {
656
+ const deleteDiv = document.createElement('div');
657
+ deleteDiv.classList.add(this.classes.valueDelete);
658
+ deleteDiv.onclick = (e) => {
659
+ e.preventDefault();
660
+ e.stopPropagation();
661
+ if (this.settings.disabled) {
662
+ return;
663
+ }
664
+ let shouldDelete = true;
665
+ const before = this.store.getSelectedOptions();
666
+ const after = before.filter((o) => {
667
+ return o.selected && o.id !== option.id;
668
+ }, true);
669
+ if (this.settings.minSelected && after.length < this.settings.minSelected) {
670
+ return;
671
+ }
672
+ if (this.callbacks.beforeChange) {
673
+ shouldDelete = this.callbacks.beforeChange(after, before) === true;
674
+ }
675
+ if (shouldDelete) {
676
+ let selectedValues = [];
677
+ for (const o of after) {
678
+ if (o instanceof Optgroup) {
679
+ for (const c of o.options) {
680
+ selectedValues.push(c.value);
681
+ }
682
+ }
683
+ if (o instanceof Option) {
684
+ selectedValues.push(o.value);
685
+ }
686
+ }
687
+ this.callbacks.setSelected(selectedValues, false);
688
+ if (this.settings.closeOnSelect) {
689
+ this.callbacks.close();
690
+ }
691
+ if (this.callbacks.afterChange) {
692
+ this.callbacks.afterChange(after);
693
+ }
694
+ this.updateDeselectAll();
695
+ }
696
+ };
697
+ const deleteSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
698
+ deleteSvg.setAttribute('viewBox', '0 0 100 100');
699
+ const deletePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
700
+ deletePath.setAttribute('d', this.classes.optionDelete);
701
+ deleteSvg.appendChild(deletePath);
702
+ deleteDiv.appendChild(deleteSvg);
703
+ value.appendChild(deleteDiv);
704
+ }
705
+ return value;
706
+ }
707
+ contentDiv() {
708
+ const main = document.createElement('div');
709
+ main.dataset.id = this.settings.id;
710
+ main.id = this.settings.id;
711
+ const search = this.searchDiv();
712
+ main.appendChild(search.main);
713
+ const list = this.listDiv();
714
+ main.appendChild(list);
715
+ return {
716
+ main: main,
717
+ search: search,
718
+ list: list,
719
+ };
720
+ }
721
+ moveContent() {
722
+ if (this.settings.contentPosition === 'relative') {
723
+ this.moveContentBelow();
724
+ return;
725
+ }
726
+ if (this.settings.openPosition === 'down') {
727
+ this.moveContentBelow();
728
+ return;
729
+ }
730
+ else if (this.settings.openPosition === 'up') {
731
+ this.moveContentAbove();
732
+ return;
733
+ }
734
+ if (this.putContent() === 'up') {
735
+ this.moveContentAbove();
736
+ }
737
+ else {
738
+ this.moveContentBelow();
739
+ }
740
+ }
741
+ searchDiv() {
742
+ const main = document.createElement('div');
743
+ const input = document.createElement('input');
744
+ const addable = document.createElement('div');
745
+ main.classList.add(this.classes.search);
746
+ const searchReturn = {
747
+ main,
748
+ input,
749
+ };
750
+ if (!this.settings.showSearch) {
751
+ main.classList.add(this.classes.hide);
752
+ input.readOnly = true;
753
+ }
754
+ input.type = 'search';
755
+ input.placeholder = this.settings.searchPlaceholder;
756
+ input.tabIndex = -1;
757
+ input.setAttribute('aria-label', this.settings.searchPlaceholder);
758
+ input.setAttribute('autocapitalize', 'off');
759
+ input.setAttribute('autocomplete', 'off');
760
+ input.setAttribute('autocorrect', 'off');
761
+ input.oninput = debounce((e) => {
762
+ this.callbacks.search(e.target.value);
763
+ }, 100);
764
+ input.onkeydown = (e) => {
765
+ switch (e.key) {
766
+ case 'ArrowUp':
767
+ case 'ArrowDown':
768
+ e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
769
+ return false;
770
+ case 'Tab':
771
+ this.callbacks.close();
772
+ return true;
773
+ case 'Escape':
774
+ this.callbacks.close();
775
+ return false;
776
+ case 'Enter':
777
+ case ' ':
778
+ if (this.callbacks.addable && e.ctrlKey) {
779
+ addable.click();
780
+ return false;
781
+ }
782
+ else {
783
+ const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
784
+ if (highlighted) {
785
+ highlighted.click();
786
+ return false;
787
+ }
788
+ }
789
+ return true;
790
+ }
791
+ };
792
+ main.appendChild(input);
793
+ if (this.callbacks.addable) {
794
+ addable.classList.add(this.classes.addable);
795
+ const plus = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
796
+ plus.setAttribute('viewBox', '0 0 100 100');
797
+ const plusPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
798
+ plusPath.setAttribute('d', this.classes.addablePath);
799
+ plus.appendChild(plusPath);
800
+ addable.appendChild(plus);
801
+ addable.onclick = (e) => {
802
+ e.preventDefault();
803
+ e.stopPropagation();
804
+ if (!this.callbacks.addable) {
805
+ return;
806
+ }
807
+ const inputValue = this.content.search.input.value.trim();
808
+ if (inputValue === '') {
809
+ this.content.search.input.focus();
810
+ return;
811
+ }
812
+ const runFinish = (oo) => {
813
+ let newOption = new Option(oo);
814
+ this.callbacks.addOption(newOption);
815
+ if (this.settings.isMultiple) {
816
+ let values = this.store.getSelected();
817
+ values.push(newOption.value);
818
+ this.callbacks.setSelected(values, true);
819
+ }
820
+ else {
821
+ this.callbacks.setSelected([newOption.value], true);
822
+ }
823
+ this.callbacks.search('');
824
+ if (this.settings.closeOnSelect) {
825
+ setTimeout(() => {
826
+ this.callbacks.close();
827
+ }, 100);
828
+ }
829
+ };
830
+ const addableValue = this.callbacks.addable(inputValue);
831
+ if (addableValue === false || addableValue === undefined || addableValue === null) {
832
+ return;
833
+ }
834
+ if (addableValue instanceof Promise) {
835
+ addableValue.then((value) => {
836
+ if (typeof value === 'string') {
837
+ runFinish({
838
+ text: value,
839
+ value: value,
840
+ });
841
+ }
842
+ else {
843
+ runFinish(value);
844
+ }
845
+ });
846
+ }
847
+ else if (typeof addableValue === 'string') {
848
+ runFinish({
849
+ text: addableValue,
850
+ value: addableValue,
851
+ });
852
+ }
853
+ else {
854
+ runFinish(addableValue);
855
+ }
856
+ return;
857
+ };
858
+ main.appendChild(addable);
859
+ searchReturn.addable = {
860
+ main: addable,
861
+ svg: plus,
862
+ path: plusPath,
863
+ };
864
+ }
865
+ return searchReturn;
866
+ }
867
+ searchFocus() {
868
+ this.content.search.input.focus();
869
+ }
870
+ getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
871
+ let query = '.' + this.classes.option;
872
+ if (notPlaceholder) {
873
+ query += ':not(.' + this.classes.placeholder + ')';
874
+ }
875
+ if (notDisabled) {
876
+ query += ':not(.' + this.classes.disabled + ')';
877
+ }
878
+ if (notHidden) {
879
+ query += ':not(.' + this.classes.hide + ')';
880
+ }
881
+ return Array.from(this.content.list.querySelectorAll(query));
882
+ }
883
+ highlight(dir) {
884
+ const options = this.getOptions(true, true, true);
885
+ if (options.length === 0) {
886
+ return;
887
+ }
888
+ if (options.length === 1) {
889
+ if (!options[0].classList.contains(this.classes.highlighted)) {
890
+ options[0].classList.add(this.classes.highlighted);
891
+ return;
892
+ }
893
+ }
894
+ for (let i = 0; i < options.length; i++) {
895
+ if (options[i].classList.contains(this.classes.highlighted)) {
896
+ const prevOption = options[i];
897
+ prevOption.classList.remove(this.classes.highlighted);
898
+ const prevParent = prevOption.parentElement;
899
+ if (prevParent && prevParent.classList.contains(this.classes.open)) {
900
+ const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel);
901
+ if (optgroupLabel) {
902
+ optgroupLabel.click();
903
+ }
904
+ }
905
+ let selectOption = options[dir === 'down' ? (i + 1 < options.length ? i + 1 : 0) : i - 1 >= 0 ? i - 1 : options.length - 1];
906
+ selectOption.classList.add(this.classes.highlighted);
907
+ this.ensureElementInView(this.content.list, selectOption);
908
+ const selectParent = selectOption.parentElement;
909
+ if (selectParent && selectParent.classList.contains(this.classes.close)) {
910
+ const optgroupLabel = selectParent.querySelector('.' + this.classes.optgroupLabel);
911
+ if (optgroupLabel) {
912
+ optgroupLabel.click();
913
+ }
914
+ }
915
+ return;
916
+ }
917
+ }
918
+ options[dir === 'down' ? 0 : options.length - 1].classList.add(this.classes.highlighted);
919
+ this.ensureElementInView(this.content.list, options[dir === 'down' ? 0 : options.length - 1]);
920
+ }
921
+ listDiv() {
922
+ const options = document.createElement('div');
923
+ options.classList.add(this.classes.list);
924
+ return options;
925
+ }
926
+ renderError(error) {
927
+ this.content.list.innerHTML = '';
928
+ const errorDiv = document.createElement('div');
929
+ errorDiv.classList.add(this.classes.error);
930
+ errorDiv.textContent = error;
931
+ this.content.list.appendChild(errorDiv);
932
+ }
933
+ renderSearching() {
934
+ this.content.list.innerHTML = '';
935
+ const searchingDiv = document.createElement('div');
936
+ searchingDiv.classList.add(this.classes.searching);
937
+ searchingDiv.textContent = this.settings.searchingText;
938
+ this.content.list.appendChild(searchingDiv);
939
+ }
940
+ renderOptions(data) {
941
+ this.content.list.innerHTML = '';
942
+ if (data.length === 0) {
943
+ const noResults = document.createElement('div');
944
+ noResults.classList.add(this.classes.search);
945
+ noResults.innerHTML = this.settings.searchText;
946
+ this.content.list.appendChild(noResults);
947
+ return;
948
+ }
949
+ for (const d of data) {
950
+ if (d instanceof Optgroup) {
951
+ const optgroupEl = document.createElement('div');
952
+ optgroupEl.classList.add(this.classes.optgroup);
953
+ const optgroupLabel = document.createElement('div');
954
+ optgroupLabel.classList.add(this.classes.optgroupLabel);
955
+ optgroupEl.appendChild(optgroupLabel);
956
+ const optgroupLabelText = document.createElement('div');
957
+ optgroupLabelText.classList.add(this.classes.optgroupLabelText);
958
+ optgroupLabelText.textContent = d.label;
959
+ optgroupLabel.appendChild(optgroupLabelText);
960
+ const optgroupActions = document.createElement('div');
961
+ optgroupActions.classList.add(this.classes.optgroupActions);
962
+ optgroupLabel.appendChild(optgroupActions);
963
+ if (this.settings.isMultiple && d.selectAll) {
964
+ const selectAll = document.createElement('div');
965
+ selectAll.classList.add(this.classes.optgroupSelectAll);
966
+ let allSelected = true;
967
+ for (const o of d.options) {
968
+ if (!o.selected) {
969
+ allSelected = false;
970
+ break;
971
+ }
972
+ }
973
+ if (allSelected) {
974
+ selectAll.classList.add(this.classes.selected);
975
+ }
976
+ const selectAllText = document.createElement('span');
977
+ selectAllText.textContent = 'Select All';
978
+ selectAll.appendChild(selectAllText);
979
+ const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
980
+ selectAllSvg.setAttribute('viewBox', '0 0 100 100');
981
+ selectAll.appendChild(selectAllSvg);
982
+ const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path');
983
+ selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox);
984
+ selectAllSvg.appendChild(selectAllBox);
985
+ const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path');
986
+ selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck);
987
+ selectAllSvg.appendChild(selectAllCheck);
988
+ selectAll.addEventListener('click', (e) => {
989
+ e.preventDefault();
990
+ e.stopPropagation();
991
+ const currentSelected = this.store.getSelected();
992
+ if (allSelected) {
993
+ const newSelected = currentSelected.filter((s) => {
994
+ for (const o of d.options) {
995
+ if (s === o.value) {
996
+ return false;
997
+ }
998
+ }
999
+ return true;
1000
+ });
1001
+ this.callbacks.setSelected(newSelected, true);
1002
+ return;
1003
+ }
1004
+ else {
1005
+ const newSelected = currentSelected.concat(d.options.map((o) => o.value));
1006
+ this.callbacks.setSelected(newSelected, true);
1007
+ }
1008
+ });
1009
+ optgroupActions.appendChild(selectAll);
1010
+ }
1011
+ if (d.closable !== 'off') {
1012
+ const optgroupClosable = document.createElement('div');
1013
+ optgroupClosable.classList.add(this.classes.optgroupClosable);
1014
+ const optgroupClosableSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
1015
+ optgroupClosableSvg.setAttribute('viewBox', '0 0 100 100');
1016
+ optgroupClosableSvg.classList.add(this.classes.arrow);
1017
+ optgroupClosable.appendChild(optgroupClosableSvg);
1018
+ const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
1019
+ optgroupClosableSvg.appendChild(optgroupClosableArrow);
1020
+ if (d.options.some((o) => o.selected) || this.content.search.input.value.trim() !== '') {
1021
+ optgroupClosable.classList.add(this.classes.open);
1022
+ optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
1023
+ }
1024
+ else if (d.closable === 'open') {
1025
+ optgroupEl.classList.add(this.classes.open);
1026
+ optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
1027
+ }
1028
+ else if (d.closable === 'close') {
1029
+ optgroupEl.classList.add(this.classes.close);
1030
+ optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
1031
+ }
1032
+ optgroupLabel.addEventListener('click', (e) => {
1033
+ e.preventDefault();
1034
+ e.stopPropagation();
1035
+ if (optgroupEl.classList.contains(this.classes.close)) {
1036
+ optgroupEl.classList.remove(this.classes.close);
1037
+ optgroupEl.classList.add(this.classes.open);
1038
+ optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
1039
+ }
1040
+ else {
1041
+ optgroupEl.classList.remove(this.classes.open);
1042
+ optgroupEl.classList.add(this.classes.close);
1043
+ optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
1044
+ }
1045
+ });
1046
+ optgroupActions.appendChild(optgroupClosable);
1047
+ }
1048
+ optgroupEl.appendChild(optgroupLabel);
1049
+ for (const o of d.options) {
1050
+ optgroupEl.appendChild(this.option(o));
1051
+ }
1052
+ this.content.list.appendChild(optgroupEl);
1053
+ }
1054
+ if (d instanceof Option) {
1055
+ this.content.list.appendChild(this.option(d));
1056
+ }
1057
+ }
1058
+ }
1059
+ option(option) {
1060
+ if (option.placeholder) {
1061
+ const placeholder = document.createElement('div');
1062
+ placeholder.classList.add(this.classes.option);
1063
+ placeholder.classList.add(this.classes.hide);
1064
+ return placeholder;
1065
+ }
1066
+ const optionEl = document.createElement('div');
1067
+ optionEl.dataset.id = option.id;
1068
+ optionEl.id = option.id;
1069
+ optionEl.classList.add(this.classes.option);
1070
+ optionEl.setAttribute('role', 'option');
1071
+ if (option.class) {
1072
+ option.class.split(' ').forEach((dataClass) => {
1073
+ optionEl.classList.add(dataClass);
1074
+ });
1075
+ }
1076
+ if (option.style) {
1077
+ optionEl.style.cssText = option.style;
1078
+ }
1079
+ if (this.settings.searchHighlight && this.content.search.input.value.trim() !== '') {
1080
+ optionEl.innerHTML = this.highlightText(option.html !== '' ? option.html : option.text, this.content.search.input.value, this.classes.searchHighlighter);
1081
+ }
1082
+ else if (option.html !== '') {
1083
+ optionEl.innerHTML = option.html;
1084
+ }
1085
+ else {
1086
+ optionEl.textContent = option.text;
1087
+ }
1088
+ if (this.settings.showOptionTooltips && optionEl.textContent) {
1089
+ optionEl.setAttribute('title', optionEl.textContent);
1090
+ }
1091
+ if (!option.display) {
1092
+ optionEl.classList.add(this.classes.hide);
1093
+ }
1094
+ if (option.disabled) {
1095
+ optionEl.classList.add(this.classes.disabled);
1096
+ }
1097
+ if (option.selected && this.settings.hideSelected) {
1098
+ optionEl.classList.add(this.classes.hide);
1099
+ }
1100
+ if (option.selected) {
1101
+ optionEl.classList.add(this.classes.selected);
1102
+ optionEl.setAttribute('aria-selected', 'true');
1103
+ this.main.main.setAttribute('aria-activedescendant', optionEl.id);
1104
+ }
1105
+ else {
1106
+ optionEl.classList.remove(this.classes.selected);
1107
+ optionEl.setAttribute('aria-selected', 'false');
1108
+ }
1109
+ optionEl.addEventListener('click', (e) => {
1110
+ e.preventDefault();
1111
+ e.stopPropagation();
1112
+ const selectedOptions = this.store.getSelected();
1113
+ const element = e.currentTarget;
1114
+ const elementID = String(element.dataset.id);
1115
+ if (option.disabled || (option.selected && !this.settings.allowDeselect)) {
1116
+ return;
1117
+ }
1118
+ if ((this.settings.isMultiple && this.settings.maxSelected <= selectedOptions.length && !option.selected) ||
1119
+ (this.settings.isMultiple && this.settings.minSelected >= selectedOptions.length && option.selected)) {
1120
+ return;
1121
+ }
1122
+ let shouldUpdate = false;
1123
+ const before = this.store.getSelectedOptions();
1124
+ let after = [];
1125
+ if (this.settings.isMultiple) {
1126
+ if (option.selected) {
1127
+ after = before.filter((o) => o.id !== elementID);
1128
+ }
1129
+ else {
1130
+ after = before.concat(option);
1131
+ }
1132
+ }
1133
+ if (!this.settings.isMultiple) {
1134
+ if (option.selected) {
1135
+ after = [];
1136
+ }
1137
+ else {
1138
+ after = [option];
1139
+ }
1140
+ }
1141
+ if (!this.callbacks.beforeChange) {
1142
+ shouldUpdate = true;
1143
+ }
1144
+ if (this.callbacks.beforeChange) {
1145
+ if (this.callbacks.beforeChange(after, before) === false) {
1146
+ shouldUpdate = false;
1147
+ }
1148
+ else {
1149
+ shouldUpdate = true;
1150
+ }
1151
+ }
1152
+ if (shouldUpdate) {
1153
+ if (!this.store.getOptionByID(elementID)) {
1154
+ this.callbacks.addOption(option);
1155
+ }
1156
+ this.callbacks.setSelected(after.map((o) => o.value), false);
1157
+ if (this.settings.closeOnSelect) {
1158
+ this.callbacks.close();
1159
+ }
1160
+ if (this.callbacks.afterChange) {
1161
+ this.callbacks.afterChange(after);
1162
+ }
1163
+ }
1164
+ });
1165
+ return optionEl;
1166
+ }
1167
+ destroy() {
1168
+ this.main.main.remove();
1169
+ this.content.main.remove();
1170
+ }
1171
+ highlightText(str, search, className) {
1172
+ let completedString = str;
1173
+ const regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i');
1174
+ if (!str.match(regex)) {
1175
+ return str;
1176
+ }
1177
+ const matchStartPosition = str.match(regex).index;
1178
+ const matchEndPosition = matchStartPosition + str.match(regex)[0].toString().length;
1179
+ const originalTextFoundByRegex = str.substring(matchStartPosition, matchEndPosition);
1180
+ completedString = completedString.replace(regex, `<mark class="${className}">${originalTextFoundByRegex}</mark>`);
1181
+ return completedString;
1182
+ }
1183
+ moveContentAbove() {
1184
+ const mainHeight = this.main.main.offsetHeight;
1185
+ const contentHeight = this.content.main.offsetHeight;
1186
+ this.main.main.classList.remove(this.classes.openBelow);
1187
+ this.main.main.classList.add(this.classes.openAbove);
1188
+ this.content.main.classList.remove(this.classes.openBelow);
1189
+ this.content.main.classList.add(this.classes.openAbove);
1190
+ const containerRect = this.main.main.getBoundingClientRect();
1191
+ this.content.main.style.margin = '-' + (mainHeight + contentHeight - 1) + 'px 0px 0px 0px';
1192
+ this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
1193
+ this.content.main.style.left = containerRect.left + window.scrollX + 'px';
1194
+ this.content.main.style.width = containerRect.width + 'px';
1195
+ }
1196
+ moveContentBelow() {
1197
+ this.main.main.classList.remove(this.classes.openAbove);
1198
+ this.main.main.classList.add(this.classes.openBelow);
1199
+ this.content.main.classList.remove(this.classes.openAbove);
1200
+ this.content.main.classList.add(this.classes.openBelow);
1201
+ const containerRect = this.main.main.getBoundingClientRect();
1202
+ this.content.main.style.margin = '-1px 0px 0px 0px';
1203
+ if (this.settings.contentPosition !== 'relative') {
1204
+ this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
1205
+ this.content.main.style.left = containerRect.left + window.scrollX + 'px';
1206
+ this.content.main.style.width = containerRect.width + 'px';
1207
+ }
1208
+ }
1209
+ ensureElementInView(container, element) {
1210
+ const cTop = container.scrollTop + container.offsetTop;
1211
+ const cBottom = cTop + container.clientHeight;
1212
+ const eTop = element.offsetTop;
1213
+ const eBottom = eTop + element.clientHeight;
1214
+ if (eTop < cTop) {
1215
+ container.scrollTop -= cTop - eTop;
1216
+ }
1217
+ else if (eBottom > cBottom) {
1218
+ container.scrollTop += eBottom - cBottom;
1219
+ }
1220
+ }
1221
+ putContent() {
1222
+ const mainHeight = this.main.main.offsetHeight;
1223
+ const mainRect = this.main.main.getBoundingClientRect();
1224
+ const contentHeight = this.content.main.offsetHeight;
1225
+ const spaceBelow = window.innerHeight - (mainRect.top + mainHeight);
1226
+ if (spaceBelow <= contentHeight) {
1227
+ if (mainRect.top > contentHeight) {
1228
+ return 'up';
1229
+ }
1230
+ else {
1231
+ return 'down';
1232
+ }
1233
+ }
1234
+ return 'down';
1235
+ }
1236
+ updateDeselectAll() {
1237
+ if (!this.store || !this.settings) {
1238
+ return;
1239
+ }
1240
+ const selected = this.store.getSelectedOptions();
1241
+ const hasSelectedItems = selected && selected.length > 0;
1242
+ const isMultiple = this.settings.isMultiple;
1243
+ const allowDeselect = this.settings.allowDeselect;
1244
+ const deselectButton = this.main.deselect.main;
1245
+ const hideClass = this.classes.hide;
1246
+ if (allowDeselect && !(isMultiple && !hasSelectedItems)) {
1247
+ deselectButton.classList.remove(hideClass);
1248
+ }
1249
+ else {
1250
+ deselectButton.classList.add(hideClass);
1251
+ }
1252
+ }
1213
1253
  }
1214
1254
 
1215
- class Select {
1216
- constructor(select) {
1217
- this.listen = false;
1218
- this.observer = null;
1219
- this.select = select;
1220
- this.select.addEventListener('change', this.valueChange.bind(this), {
1221
- passive: true,
1222
- });
1223
- this.observer = new MutationObserver(this.observeCall.bind(this));
1224
- this.changeListen(true);
1225
- }
1226
- enable() {
1227
- this.select.disabled = false;
1228
- }
1229
- disable() {
1230
- this.select.disabled = true;
1231
- }
1232
- hideUI() {
1233
- this.select.tabIndex = -1;
1234
- this.select.style.display = 'none';
1235
- this.select.setAttribute('aria-hidden', 'true');
1236
- }
1237
- showUI() {
1238
- this.select.removeAttribute('tabindex');
1239
- this.select.style.display = '';
1240
- this.select.removeAttribute('aria-hidden');
1241
- }
1242
- changeListen(listen) {
1243
- this.listen = listen;
1244
- if (listen) {
1245
- if (this.observer) {
1246
- this.observer.observe(this.select, {
1247
- subtree: true,
1248
- childList: true,
1249
- attributes: true,
1250
- });
1251
- }
1252
- }
1253
- if (!listen) {
1254
- if (this.observer) {
1255
- this.observer.disconnect();
1256
- }
1257
- }
1258
- }
1259
- valueChange(ev) {
1260
- if (this.listen && this.onValueChange) {
1261
- this.onValueChange(this.getSelectedValues());
1262
- }
1263
- return true;
1264
- }
1265
- observeCall(mutations) {
1266
- if (!this.listen) {
1267
- return;
1268
- }
1269
- let classChanged = false;
1270
- let disabledChanged = false;
1271
- let optgroupOptionChanged = false;
1272
- for (const m of mutations) {
1273
- if (m.target === this.select) {
1274
- if (m.attributeName === 'disabled') {
1275
- disabledChanged = true;
1276
- }
1277
- if (m.attributeName === 'class') {
1278
- classChanged = true;
1279
- }
1280
- }
1281
- if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
1282
- optgroupOptionChanged = true;
1283
- }
1284
- }
1285
- if (classChanged && this.onClassChange) {
1286
- this.onClassChange(this.select.className.split(' '));
1287
- }
1288
- if (disabledChanged && this.onDisabledChange) {
1289
- this.changeListen(false);
1290
- this.onDisabledChange(this.select.disabled);
1291
- this.changeListen(true);
1292
- }
1293
- if (optgroupOptionChanged && this.onOptionsChange) {
1294
- this.changeListen(false);
1295
- this.onOptionsChange(this.getData());
1296
- this.changeListen(true);
1297
- }
1298
- }
1299
- getData() {
1300
- let data = [];
1301
- const nodes = this.select.childNodes;
1302
- for (const n of nodes) {
1303
- if (n.nodeName === 'OPTGROUP') {
1304
- data.push(this.getDataFromOptgroup(n));
1305
- }
1306
- if (n.nodeName === 'OPTION') {
1307
- data.push(this.getDataFromOption(n));
1308
- }
1309
- }
1310
- return data;
1311
- }
1312
- getDataFromOptgroup(optgroup) {
1313
- let data = {
1314
- id: optgroup.id,
1315
- label: optgroup.label,
1316
- selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
1317
- closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
1318
- options: [],
1319
- };
1320
- const options = optgroup.childNodes;
1321
- for (const o of options) {
1322
- if (o.nodeName === 'OPTION') {
1323
- data.options.push(this.getDataFromOption(o));
1324
- }
1325
- }
1326
- return data;
1327
- }
1328
- getDataFromOption(option) {
1329
- return {
1330
- id: option.id,
1331
- value: option.value,
1332
- text: option.text,
1333
- html: option.dataset && option.dataset.html ? option.dataset.html : '',
1334
- selected: option.selected,
1335
- display: option.style.display === 'none' ? false : true,
1336
- disabled: option.disabled,
1337
- mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
1338
- placeholder: option.dataset.placeholder === 'true',
1339
- class: option.className,
1340
- style: option.style.cssText,
1341
- data: option.dataset,
1342
- };
1343
- }
1344
- getSelectedValues() {
1345
- let values = [];
1346
- const options = this.select.childNodes;
1347
- for (const o of options) {
1348
- if (o.nodeName === 'OPTGROUP') {
1349
- const optgroupOptions = o.childNodes;
1350
- for (const oo of optgroupOptions) {
1351
- if (oo.nodeName === 'OPTION') {
1352
- const option = oo;
1353
- if (option.selected) {
1354
- values.push(option.value);
1355
- }
1356
- }
1357
- }
1358
- }
1359
- if (o.nodeName === 'OPTION') {
1360
- const option = o;
1361
- if (option.selected) {
1362
- values.push(option.value);
1363
- }
1364
- }
1365
- }
1366
- return values;
1367
- }
1368
- setSelected(value) {
1369
- this.changeListen(false);
1370
- const options = this.select.childNodes;
1371
- for (const o of options) {
1372
- if (o.nodeName === 'OPTGROUP') {
1373
- const optgroup = o;
1374
- const optgroupOptions = optgroup.childNodes;
1375
- for (const oo of optgroupOptions) {
1376
- if (oo.nodeName === 'OPTION') {
1377
- const option = oo;
1378
- option.selected = value.includes(option.value);
1379
- }
1380
- }
1381
- }
1382
- if (o.nodeName === 'OPTION') {
1383
- const option = o;
1384
- option.selected = value.includes(option.value);
1385
- }
1386
- }
1387
- this.changeListen(true);
1388
- }
1389
- updateSelect(id, style, classes) {
1390
- this.changeListen(false);
1391
- if (id) {
1392
- this.select.dataset.id = id;
1393
- }
1394
- if (style) {
1395
- this.select.style.cssText = style;
1396
- }
1397
- if (classes) {
1398
- this.select.className = '';
1399
- classes.forEach((c) => {
1400
- if (c.trim() !== '') {
1401
- this.select.classList.add(c.trim());
1402
- }
1403
- });
1404
- }
1405
- this.changeListen(true);
1406
- }
1407
- updateOptions(data) {
1408
- this.changeListen(false);
1409
- this.select.innerHTML = '';
1410
- for (const d of data) {
1411
- if (d instanceof Optgroup) {
1412
- this.select.appendChild(this.createOptgroup(d));
1413
- }
1414
- if (d instanceof Option) {
1415
- this.select.appendChild(this.createOption(d));
1416
- }
1417
- }
1418
- this.select.dispatchEvent(new Event('change'));
1419
- this.changeListen(true);
1420
- }
1421
- createOptgroup(optgroup) {
1422
- const optgroupEl = document.createElement('optgroup');
1423
- optgroupEl.id = optgroup.id;
1424
- optgroupEl.label = optgroup.label;
1425
- if (optgroup.selectAll) {
1426
- optgroupEl.dataset.selectAll = 'true';
1427
- }
1428
- if (optgroup.closable !== 'off') {
1429
- optgroupEl.dataset.closable = optgroup.closable;
1430
- }
1431
- if (optgroup.options) {
1432
- for (const o of optgroup.options) {
1433
- optgroupEl.appendChild(this.createOption(o));
1434
- }
1435
- }
1436
- return optgroupEl;
1437
- }
1438
- createOption(info) {
1439
- const optionEl = document.createElement('option');
1440
- optionEl.id = info.id;
1441
- optionEl.value = info.value;
1442
- optionEl.innerHTML = info.text;
1443
- if (info.html !== '') {
1444
- optionEl.setAttribute('data-html', info.html);
1445
- }
1446
- if (info.selected) {
1447
- optionEl.selected = info.selected;
1448
- }
1449
- if (info.disabled) {
1450
- optionEl.disabled = true;
1451
- }
1452
- if (info.display === false) {
1453
- optionEl.style.display = 'none';
1454
- }
1455
- if (info.placeholder) {
1456
- optionEl.setAttribute('data-placeholder', 'true');
1457
- }
1458
- if (info.mandatory) {
1459
- optionEl.setAttribute('data-mandatory', 'true');
1460
- }
1461
- if (info.class) {
1462
- info.class.split(' ').forEach((optionClass) => {
1463
- optionEl.classList.add(optionClass);
1464
- });
1465
- }
1466
- if (info.data && typeof info.data === 'object') {
1467
- Object.keys(info.data).forEach((key) => {
1468
- optionEl.setAttribute('data-' + kebabCase(key), info.data[key]);
1469
- });
1470
- }
1471
- return optionEl;
1472
- }
1473
- destroy() {
1474
- this.changeListen(false);
1475
- this.select.removeEventListener('change', this.valueChange.bind(this));
1476
- if (this.observer) {
1477
- this.observer.disconnect();
1478
- this.observer = null;
1479
- }
1480
- delete this.select.dataset.id;
1481
- this.showUI();
1482
- }
1255
+ class Select {
1256
+ constructor(select) {
1257
+ this.listen = false;
1258
+ this.observer = null;
1259
+ this.select = select;
1260
+ this.select.addEventListener('change', this.valueChange.bind(this), {
1261
+ passive: true,
1262
+ });
1263
+ this.observer = new MutationObserver(this.observeCall.bind(this));
1264
+ this.changeListen(true);
1265
+ }
1266
+ enable() {
1267
+ this.select.disabled = false;
1268
+ }
1269
+ disable() {
1270
+ this.select.disabled = true;
1271
+ }
1272
+ hideUI() {
1273
+ this.select.tabIndex = -1;
1274
+ this.select.style.display = 'none';
1275
+ this.select.setAttribute('aria-hidden', 'true');
1276
+ }
1277
+ showUI() {
1278
+ this.select.removeAttribute('tabindex');
1279
+ this.select.style.display = '';
1280
+ this.select.removeAttribute('aria-hidden');
1281
+ }
1282
+ changeListen(listen) {
1283
+ this.listen = listen;
1284
+ if (listen) {
1285
+ if (this.observer) {
1286
+ this.observer.observe(this.select, {
1287
+ subtree: true,
1288
+ childList: true,
1289
+ attributes: true,
1290
+ });
1291
+ }
1292
+ }
1293
+ if (!listen) {
1294
+ if (this.observer) {
1295
+ this.observer.disconnect();
1296
+ }
1297
+ }
1298
+ }
1299
+ valueChange(ev) {
1300
+ if (this.listen && this.onValueChange) {
1301
+ this.onValueChange(this.getSelectedValues());
1302
+ }
1303
+ return true;
1304
+ }
1305
+ observeCall(mutations) {
1306
+ if (!this.listen) {
1307
+ return;
1308
+ }
1309
+ let classChanged = false;
1310
+ let disabledChanged = false;
1311
+ let optgroupOptionChanged = false;
1312
+ for (const m of mutations) {
1313
+ if (m.target === this.select) {
1314
+ if (m.attributeName === 'disabled') {
1315
+ disabledChanged = true;
1316
+ }
1317
+ if (m.attributeName === 'class') {
1318
+ classChanged = true;
1319
+ }
1320
+ }
1321
+ if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
1322
+ optgroupOptionChanged = true;
1323
+ }
1324
+ }
1325
+ if (classChanged && this.onClassChange) {
1326
+ this.onClassChange(this.select.className.split(' '));
1327
+ }
1328
+ if (disabledChanged && this.onDisabledChange) {
1329
+ this.changeListen(false);
1330
+ this.onDisabledChange(this.select.disabled);
1331
+ this.changeListen(true);
1332
+ }
1333
+ if (optgroupOptionChanged && this.onOptionsChange) {
1334
+ this.changeListen(false);
1335
+ this.onOptionsChange(this.getData());
1336
+ this.changeListen(true);
1337
+ }
1338
+ }
1339
+ getData() {
1340
+ let data = [];
1341
+ const nodes = this.select.childNodes;
1342
+ for (const n of nodes) {
1343
+ if (n.nodeName === 'OPTGROUP') {
1344
+ data.push(this.getDataFromOptgroup(n));
1345
+ }
1346
+ if (n.nodeName === 'OPTION') {
1347
+ data.push(this.getDataFromOption(n));
1348
+ }
1349
+ }
1350
+ return data;
1351
+ }
1352
+ getDataFromOptgroup(optgroup) {
1353
+ let data = {
1354
+ id: optgroup.id,
1355
+ label: optgroup.label,
1356
+ selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
1357
+ closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
1358
+ options: [],
1359
+ };
1360
+ const options = optgroup.childNodes;
1361
+ for (const o of options) {
1362
+ if (o.nodeName === 'OPTION') {
1363
+ data.options.push(this.getDataFromOption(o));
1364
+ }
1365
+ }
1366
+ return data;
1367
+ }
1368
+ getDataFromOption(option) {
1369
+ return {
1370
+ id: option.id,
1371
+ value: option.value,
1372
+ text: option.text,
1373
+ html: option.dataset && option.dataset.html ? option.dataset.html : '',
1374
+ selected: option.selected,
1375
+ display: option.style.display === 'none' ? false : true,
1376
+ disabled: option.disabled,
1377
+ mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
1378
+ placeholder: option.dataset.placeholder === 'true',
1379
+ class: option.className,
1380
+ style: option.style.cssText,
1381
+ data: option.dataset,
1382
+ };
1383
+ }
1384
+ getSelectedValues() {
1385
+ let values = [];
1386
+ const options = this.select.childNodes;
1387
+ for (const o of options) {
1388
+ if (o.nodeName === 'OPTGROUP') {
1389
+ const optgroupOptions = o.childNodes;
1390
+ for (const oo of optgroupOptions) {
1391
+ if (oo.nodeName === 'OPTION') {
1392
+ const option = oo;
1393
+ if (option.selected) {
1394
+ values.push(option.value);
1395
+ }
1396
+ }
1397
+ }
1398
+ }
1399
+ if (o.nodeName === 'OPTION') {
1400
+ const option = o;
1401
+ if (option.selected) {
1402
+ values.push(option.value);
1403
+ }
1404
+ }
1405
+ }
1406
+ return values;
1407
+ }
1408
+ setSelected(value) {
1409
+ this.changeListen(false);
1410
+ const options = this.select.childNodes;
1411
+ for (const o of options) {
1412
+ if (o.nodeName === 'OPTGROUP') {
1413
+ const optgroup = o;
1414
+ const optgroupOptions = optgroup.childNodes;
1415
+ for (const oo of optgroupOptions) {
1416
+ if (oo.nodeName === 'OPTION') {
1417
+ const option = oo;
1418
+ option.selected = value.includes(option.value);
1419
+ }
1420
+ }
1421
+ }
1422
+ if (o.nodeName === 'OPTION') {
1423
+ const option = o;
1424
+ option.selected = value.includes(option.value);
1425
+ }
1426
+ }
1427
+ this.changeListen(true);
1428
+ }
1429
+ updateSelect(id, style, classes) {
1430
+ this.changeListen(false);
1431
+ if (id) {
1432
+ this.select.dataset.id = id;
1433
+ }
1434
+ if (style) {
1435
+ this.select.style.cssText = style;
1436
+ }
1437
+ if (classes) {
1438
+ this.select.className = '';
1439
+ classes.forEach((c) => {
1440
+ if (c.trim() !== '') {
1441
+ this.select.classList.add(c.trim());
1442
+ }
1443
+ });
1444
+ }
1445
+ this.changeListen(true);
1446
+ }
1447
+ updateOptions(data) {
1448
+ this.changeListen(false);
1449
+ this.select.innerHTML = '';
1450
+ for (const d of data) {
1451
+ if (d instanceof Optgroup) {
1452
+ this.select.appendChild(this.createOptgroup(d));
1453
+ }
1454
+ if (d instanceof Option) {
1455
+ this.select.appendChild(this.createOption(d));
1456
+ }
1457
+ }
1458
+ this.select.dispatchEvent(new Event('change'));
1459
+ this.changeListen(true);
1460
+ }
1461
+ createOptgroup(optgroup) {
1462
+ const optgroupEl = document.createElement('optgroup');
1463
+ optgroupEl.id = optgroup.id;
1464
+ optgroupEl.label = optgroup.label;
1465
+ if (optgroup.selectAll) {
1466
+ optgroupEl.dataset.selectAll = 'true';
1467
+ }
1468
+ if (optgroup.closable !== 'off') {
1469
+ optgroupEl.dataset.closable = optgroup.closable;
1470
+ }
1471
+ if (optgroup.options) {
1472
+ for (const o of optgroup.options) {
1473
+ optgroupEl.appendChild(this.createOption(o));
1474
+ }
1475
+ }
1476
+ return optgroupEl;
1477
+ }
1478
+ createOption(info) {
1479
+ const optionEl = document.createElement('option');
1480
+ optionEl.id = info.id;
1481
+ optionEl.value = info.value;
1482
+ optionEl.innerHTML = info.text;
1483
+ if (info.html !== '') {
1484
+ optionEl.setAttribute('data-html', info.html);
1485
+ }
1486
+ if (info.selected) {
1487
+ optionEl.selected = info.selected;
1488
+ }
1489
+ if (info.disabled) {
1490
+ optionEl.disabled = true;
1491
+ }
1492
+ if (info.display === false) {
1493
+ optionEl.style.display = 'none';
1494
+ }
1495
+ if (info.placeholder) {
1496
+ optionEl.setAttribute('data-placeholder', 'true');
1497
+ }
1498
+ if (info.mandatory) {
1499
+ optionEl.setAttribute('data-mandatory', 'true');
1500
+ }
1501
+ if (info.class) {
1502
+ info.class.split(' ').forEach((optionClass) => {
1503
+ optionEl.classList.add(optionClass);
1504
+ });
1505
+ }
1506
+ if (info.data && typeof info.data === 'object') {
1507
+ Object.keys(info.data).forEach((key) => {
1508
+ optionEl.setAttribute('data-' + kebabCase(key), info.data[key]);
1509
+ });
1510
+ }
1511
+ return optionEl;
1512
+ }
1513
+ destroy() {
1514
+ this.changeListen(false);
1515
+ this.select.removeEventListener('change', this.valueChange.bind(this));
1516
+ if (this.observer) {
1517
+ this.observer.disconnect();
1518
+ this.observer = null;
1519
+ }
1520
+ delete this.select.dataset.id;
1521
+ this.showUI();
1522
+ }
1483
1523
  }
1484
1524
 
1485
- class SlimSelect {
1486
- constructor(config) {
1487
- var _a;
1488
- this.events = {
1489
- search: undefined,
1490
- searchFilter: (opt, search) => {
1491
- return opt.text.toLowerCase().indexOf(search.toLowerCase()) !== -1;
1492
- },
1493
- addable: undefined,
1494
- beforeChange: undefined,
1495
- afterChange: undefined,
1496
- beforeOpen: undefined,
1497
- afterOpen: undefined,
1498
- beforeClose: undefined,
1499
- afterClose: undefined,
1500
- };
1501
- this.windowResize = debounce(() => {
1502
- if (!this.settings.isOpen && !this.settings.isFullOpen) {
1503
- return;
1504
- }
1505
- this.render.moveContent();
1506
- });
1507
- this.windowScroll = debounce(() => {
1508
- if (!this.settings.isOpen && !this.settings.isFullOpen) {
1509
- return;
1510
- }
1511
- this.render.moveContent();
1512
- });
1513
- this.documentClick = (e) => {
1514
- if (!this.settings.isOpen) {
1515
- return;
1516
- }
1517
- if (e.target && !hasClassInTree(e.target, this.settings.id)) {
1518
- this.close(e.type);
1519
- }
1520
- };
1521
- this.windowVisibilityChange = () => {
1522
- if (document.hidden) {
1523
- this.close();
1524
- }
1525
- };
1526
- this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
1527
- if (!this.selectEl) {
1528
- if (config.events && config.events.error) {
1529
- config.events.error(new Error('Could not find select element'));
1530
- }
1531
- return;
1532
- }
1533
- if (this.selectEl.tagName !== 'SELECT') {
1534
- if (config.events && config.events.error) {
1535
- config.events.error(new Error('Element isnt of type select'));
1536
- }
1537
- return;
1538
- }
1539
- if (this.selectEl.dataset.ssid) {
1540
- this.destroy();
1541
- }
1542
- this.settings = new Settings(config.settings);
1543
- const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose'];
1544
- for (const key in config.events) {
1545
- if (!config.events.hasOwnProperty(key)) {
1546
- continue;
1547
- }
1548
- if (debounceEvents.indexOf(key) !== -1) {
1549
- this.events[key] = debounce(config.events[key], 100);
1550
- }
1551
- else {
1552
- this.events[key] = config.events[key];
1553
- }
1554
- }
1555
- this.settings.disabled = ((_a = config.settings) === null || _a === void 0 ? void 0 : _a.disabled) ? config.settings.disabled : this.selectEl.disabled;
1556
- this.settings.isMultiple = this.selectEl.multiple;
1557
- this.settings.style = this.selectEl.style.cssText;
1558
- this.settings.class = this.selectEl.className.split(' ');
1559
- this.select = new Select(this.selectEl);
1560
- this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class);
1561
- this.select.hideUI();
1562
- this.select.onValueChange = (values) => {
1563
- this.setSelected(values);
1564
- };
1565
- this.select.onClassChange = (classes) => {
1566
- this.settings.class = classes;
1567
- this.render.updateClassStyles();
1568
- };
1569
- this.select.onDisabledChange = (disabled) => {
1570
- if (disabled) {
1571
- this.disable();
1572
- }
1573
- else {
1574
- this.enable();
1575
- }
1576
- };
1577
- this.select.onOptionsChange = (data) => {
1578
- this.setData(data);
1579
- };
1580
- this.store = new Store(this.settings.isMultiple ? 'multiple' : 'single', config.data ? config.data : this.select.getData());
1581
- if (config.data) {
1582
- this.select.updateOptions(this.store.getData());
1583
- }
1584
- const callbacks = {
1585
- open: this.open.bind(this),
1586
- close: this.close.bind(this),
1587
- addable: this.events.addable ? this.events.addable : undefined,
1588
- setSelected: this.setSelected.bind(this),
1589
- addOption: this.addOption.bind(this),
1590
- search: this.search.bind(this),
1591
- beforeChange: this.events.beforeChange,
1592
- afterChange: this.events.afterChange,
1593
- };
1594
- this.render = new Render(this.settings, this.store, callbacks);
1595
- this.render.renderValues();
1596
- this.render.renderOptions(this.store.getData());
1597
- const selectAriaLabel = this.selectEl.getAttribute('aria-label');
1598
- const selectAriaLabelledBy = this.selectEl.getAttribute('aria-labelledby');
1599
- if (selectAriaLabel) {
1600
- this.render.main.main.setAttribute('aria-label', selectAriaLabel);
1601
- }
1602
- else if (selectAriaLabelledBy) {
1603
- this.render.main.main.setAttribute('aria-labelledby', selectAriaLabelledBy);
1604
- }
1605
- if (this.selectEl.parentNode) {
1606
- this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
1607
- }
1608
- document.addEventListener('click', this.documentClick);
1609
- window.addEventListener('resize', this.windowResize, false);
1610
- if (this.settings.openPosition === 'auto') {
1611
- window.addEventListener('scroll', this.windowScroll, false);
1612
- }
1613
- document.addEventListener('visibilitychange', this.windowVisibilityChange);
1614
- if (this.settings.disabled) {
1615
- this.disable();
1616
- }
1617
- if (this.settings.alwaysOpen) {
1618
- this.open();
1619
- }
1620
- this.selectEl.slim = this;
1621
- }
1622
- enable() {
1623
- this.settings.disabled = false;
1624
- this.select.enable();
1625
- this.render.enable();
1626
- }
1627
- disable() {
1628
- this.settings.disabled = true;
1629
- this.select.disable();
1630
- this.render.disable();
1631
- }
1632
- getData() {
1633
- return this.store.getData();
1634
- }
1635
- setData(data) {
1636
- const selected = this.store.getSelected();
1637
- const err = this.store.validateDataArray(data);
1638
- if (err) {
1639
- if (this.events.error) {
1640
- this.events.error(err);
1641
- }
1642
- return;
1643
- }
1644
- this.store.setData(data);
1645
- const dataClean = this.store.getData();
1646
- this.select.updateOptions(dataClean);
1647
- this.render.renderValues();
1648
- this.render.renderOptions(dataClean);
1649
- if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1650
- this.events.afterChange(this.store.getSelectedOptions());
1651
- }
1652
- }
1653
- getSelected() {
1654
- return this.store.getSelected();
1655
- }
1656
- setSelected(value, runAfterChange = true) {
1657
- const selected = this.store.getSelected();
1658
- this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
1659
- const data = this.store.getData();
1660
- this.select.updateOptions(data);
1661
- this.render.renderValues();
1662
- if (this.render.content.search.input.value !== '') {
1663
- this.search(this.render.content.search.input.value);
1664
- }
1665
- else {
1666
- this.render.renderOptions(data);
1667
- }
1668
- if (runAfterChange && this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1669
- this.events.afterChange(this.store.getSelectedOptions());
1670
- }
1671
- }
1672
- addOption(option) {
1673
- const selected = this.store.getSelected();
1674
- if (!this.store.getDataOptions().some((o) => { var _a; return o.value === ((_a = option.value) !== null && _a !== void 0 ? _a : option.text); })) {
1675
- this.store.addOption(option);
1676
- }
1677
- const data = this.store.getData();
1678
- this.select.updateOptions(data);
1679
- this.render.renderValues();
1680
- this.render.renderOptions(data);
1681
- if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1682
- this.events.afterChange(this.store.getSelectedOptions());
1683
- }
1684
- }
1685
- open() {
1686
- if (this.settings.disabled || this.settings.isOpen) {
1687
- return;
1688
- }
1689
- if (this.events.beforeOpen) {
1690
- this.events.beforeOpen();
1691
- }
1692
- this.render.open();
1693
- if (this.settings.showSearch) {
1694
- this.render.searchFocus();
1695
- }
1696
- this.settings.isOpen = true;
1697
- setTimeout(() => {
1698
- if (this.events.afterOpen) {
1699
- this.events.afterOpen();
1700
- }
1701
- if (this.settings.isOpen) {
1702
- this.settings.isFullOpen = true;
1703
- }
1704
- }, this.settings.timeoutDelay);
1705
- if (this.settings.contentPosition === 'absolute') {
1706
- if (this.settings.intervalMove) {
1707
- clearInterval(this.settings.intervalMove);
1708
- }
1709
- this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
1710
- }
1711
- }
1712
- close(eventType = null) {
1713
- if (!this.settings.isOpen || this.settings.alwaysOpen) {
1714
- return;
1715
- }
1716
- if (this.events.beforeClose) {
1717
- this.events.beforeClose();
1718
- }
1719
- this.render.close();
1720
- if (this.render.content.search.input.value !== '') {
1721
- this.search('');
1722
- }
1723
- this.render.mainFocus(eventType);
1724
- this.settings.isOpen = false;
1725
- this.settings.isFullOpen = false;
1726
- setTimeout(() => {
1727
- if (this.events.afterClose) {
1728
- this.events.afterClose();
1729
- }
1730
- }, this.settings.timeoutDelay);
1731
- if (this.settings.intervalMove) {
1732
- clearInterval(this.settings.intervalMove);
1733
- }
1734
- }
1735
- search(value) {
1736
- if (this.render.content.search.input.value !== value) {
1737
- this.render.content.search.input.value = value;
1738
- }
1739
- if (!this.events.search) {
1740
- this.render.renderOptions(value === '' ? this.store.getData() : this.store.search(value, this.events.searchFilter));
1741
- return;
1742
- }
1743
- this.render.renderSearching();
1744
- const searchResp = this.events.search(value, this.store.getSelectedOptions());
1745
- if (searchResp instanceof Promise) {
1746
- searchResp
1747
- .then((data) => {
1748
- this.render.renderOptions(this.store.partialToFullData(data));
1749
- })
1750
- .catch((err) => {
1751
- this.render.renderError(typeof err === 'string' ? err : err.message);
1752
- });
1753
- return;
1754
- }
1755
- else if (Array.isArray(searchResp)) {
1756
- this.render.renderOptions(this.store.partialToFullData(searchResp));
1757
- }
1758
- else {
1759
- this.render.renderError('Search event must return a promise or an array of data');
1760
- }
1761
- }
1762
- destroy() {
1763
- document.removeEventListener('click', this.documentClick);
1764
- window.removeEventListener('resize', this.windowResize, false);
1765
- if (this.settings.openPosition === 'auto') {
1766
- window.removeEventListener('scroll', this.windowScroll, false);
1767
- }
1768
- document.removeEventListener('visibilitychange', this.windowVisibilityChange);
1769
- this.store.setData([]);
1770
- this.render.destroy();
1771
- this.select.destroy();
1772
- }
1525
+ class SlimSelect {
1526
+ constructor(config) {
1527
+ var _a;
1528
+ this.events = {
1529
+ search: undefined,
1530
+ searchFilter: (opt, search) => {
1531
+ return opt.text.toLowerCase().indexOf(search.toLowerCase()) !== -1;
1532
+ },
1533
+ addable: undefined,
1534
+ beforeChange: undefined,
1535
+ afterChange: undefined,
1536
+ beforeOpen: undefined,
1537
+ afterOpen: undefined,
1538
+ beforeClose: undefined,
1539
+ afterClose: undefined,
1540
+ };
1541
+ this.windowResize = debounce(() => {
1542
+ if (!this.settings.isOpen && !this.settings.isFullOpen) {
1543
+ return;
1544
+ }
1545
+ this.render.moveContent();
1546
+ });
1547
+ this.windowScroll = debounce(() => {
1548
+ if (!this.settings.isOpen && !this.settings.isFullOpen) {
1549
+ return;
1550
+ }
1551
+ this.render.moveContent();
1552
+ });
1553
+ this.documentClick = (e) => {
1554
+ if (!this.settings.isOpen) {
1555
+ return;
1556
+ }
1557
+ if (e.target && !hasClassInTree(e.target, this.settings.id)) {
1558
+ this.close(e.type);
1559
+ }
1560
+ };
1561
+ this.windowVisibilityChange = () => {
1562
+ if (document.hidden) {
1563
+ this.close();
1564
+ }
1565
+ };
1566
+ this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
1567
+ if (!this.selectEl) {
1568
+ if (config.events && config.events.error) {
1569
+ config.events.error(new Error('Could not find select element'));
1570
+ }
1571
+ return;
1572
+ }
1573
+ if (this.selectEl.tagName !== 'SELECT') {
1574
+ if (config.events && config.events.error) {
1575
+ config.events.error(new Error('Element isnt of type select'));
1576
+ }
1577
+ return;
1578
+ }
1579
+ if (this.selectEl.dataset.ssid) {
1580
+ this.destroy();
1581
+ }
1582
+ this.settings = new Settings(config.settings);
1583
+ const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose'];
1584
+ for (const key in config.events) {
1585
+ if (!config.events.hasOwnProperty(key)) {
1586
+ continue;
1587
+ }
1588
+ if (debounceEvents.indexOf(key) !== -1) {
1589
+ this.events[key] = debounce(config.events[key], 100);
1590
+ }
1591
+ else {
1592
+ this.events[key] = config.events[key];
1593
+ }
1594
+ }
1595
+ this.settings.disabled = ((_a = config.settings) === null || _a === void 0 ? void 0 : _a.disabled) ? config.settings.disabled : this.selectEl.disabled;
1596
+ this.settings.isMultiple = this.selectEl.multiple;
1597
+ this.settings.style = this.selectEl.style.cssText;
1598
+ this.settings.class = this.selectEl.className.split(' ');
1599
+ this.select = new Select(this.selectEl);
1600
+ this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class);
1601
+ this.select.hideUI();
1602
+ this.select.onValueChange = (values) => {
1603
+ this.setSelected(values);
1604
+ };
1605
+ this.select.onClassChange = (classes) => {
1606
+ this.settings.class = classes;
1607
+ this.render.updateClassStyles();
1608
+ };
1609
+ this.select.onDisabledChange = (disabled) => {
1610
+ if (disabled) {
1611
+ this.disable();
1612
+ }
1613
+ else {
1614
+ this.enable();
1615
+ }
1616
+ };
1617
+ this.select.onOptionsChange = (data) => {
1618
+ this.setData(data);
1619
+ };
1620
+ this.store = new Store(this.settings.isMultiple ? 'multiple' : 'single', config.data ? config.data : this.select.getData());
1621
+ if (config.data) {
1622
+ this.select.updateOptions(this.store.getData());
1623
+ }
1624
+ const callbacks = {
1625
+ open: this.open.bind(this),
1626
+ close: this.close.bind(this),
1627
+ addable: this.events.addable ? this.events.addable : undefined,
1628
+ setSelected: this.setSelected.bind(this),
1629
+ addOption: this.addOption.bind(this),
1630
+ search: this.search.bind(this),
1631
+ beforeChange: this.events.beforeChange,
1632
+ afterChange: this.events.afterChange,
1633
+ };
1634
+ this.render = new Render(this.settings, this.store, callbacks);
1635
+ this.render.renderValues();
1636
+ this.render.renderOptions(this.store.getData());
1637
+ const selectAriaLabel = this.selectEl.getAttribute('aria-label');
1638
+ const selectAriaLabelledBy = this.selectEl.getAttribute('aria-labelledby');
1639
+ if (selectAriaLabel) {
1640
+ this.render.main.main.setAttribute('aria-label', selectAriaLabel);
1641
+ }
1642
+ else if (selectAriaLabelledBy) {
1643
+ this.render.main.main.setAttribute('aria-labelledby', selectAriaLabelledBy);
1644
+ }
1645
+ if (this.selectEl.parentNode) {
1646
+ this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
1647
+ }
1648
+ document.addEventListener('click', this.documentClick);
1649
+ window.addEventListener('resize', this.windowResize, false);
1650
+ if (this.settings.openPosition === 'auto') {
1651
+ window.addEventListener('scroll', this.windowScroll, false);
1652
+ }
1653
+ document.addEventListener('visibilitychange', this.windowVisibilityChange);
1654
+ if (this.settings.disabled) {
1655
+ this.disable();
1656
+ }
1657
+ if (this.settings.alwaysOpen) {
1658
+ this.open();
1659
+ }
1660
+ this.selectEl.slim = this;
1661
+ }
1662
+ enable() {
1663
+ this.settings.disabled = false;
1664
+ this.select.enable();
1665
+ this.render.enable();
1666
+ }
1667
+ disable() {
1668
+ this.settings.disabled = true;
1669
+ this.select.disable();
1670
+ this.render.disable();
1671
+ }
1672
+ getData() {
1673
+ return this.store.getData();
1674
+ }
1675
+ setData(data) {
1676
+ const selected = this.store.getSelected();
1677
+ const err = this.store.validateDataArray(data);
1678
+ if (err) {
1679
+ if (this.events.error) {
1680
+ this.events.error(err);
1681
+ }
1682
+ return;
1683
+ }
1684
+ this.store.setData(data);
1685
+ const dataClean = this.store.getData();
1686
+ this.select.updateOptions(dataClean);
1687
+ this.render.renderValues();
1688
+ this.render.renderOptions(dataClean);
1689
+ if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1690
+ this.events.afterChange(this.store.getSelectedOptions());
1691
+ }
1692
+ }
1693
+ getSelected() {
1694
+ return this.store.getSelected();
1695
+ }
1696
+ setSelected(value, runAfterChange = true) {
1697
+ const selected = this.store.getSelected();
1698
+ this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
1699
+ const data = this.store.getData();
1700
+ this.select.updateOptions(data);
1701
+ this.render.renderValues();
1702
+ if (this.render.content.search.input.value !== '') {
1703
+ this.search(this.render.content.search.input.value);
1704
+ }
1705
+ else {
1706
+ this.render.renderOptions(data);
1707
+ }
1708
+ if (runAfterChange && this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1709
+ this.events.afterChange(this.store.getSelectedOptions());
1710
+ }
1711
+ }
1712
+ addOption(option) {
1713
+ const selected = this.store.getSelected();
1714
+ if (!this.store.getDataOptions().some((o) => { var _a; return o.value === ((_a = option.value) !== null && _a !== void 0 ? _a : option.text); })) {
1715
+ this.store.addOption(option);
1716
+ }
1717
+ const data = this.store.getData();
1718
+ this.select.updateOptions(data);
1719
+ this.render.renderValues();
1720
+ this.render.renderOptions(data);
1721
+ if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
1722
+ this.events.afterChange(this.store.getSelectedOptions());
1723
+ }
1724
+ }
1725
+ open() {
1726
+ if (this.settings.disabled || this.settings.isOpen) {
1727
+ return;
1728
+ }
1729
+ if (this.events.beforeOpen) {
1730
+ this.events.beforeOpen();
1731
+ }
1732
+ this.render.open();
1733
+ if (this.settings.showSearch) {
1734
+ this.render.searchFocus();
1735
+ }
1736
+ this.settings.isOpen = true;
1737
+ setTimeout(() => {
1738
+ if (this.events.afterOpen) {
1739
+ this.events.afterOpen();
1740
+ }
1741
+ if (this.settings.isOpen) {
1742
+ this.settings.isFullOpen = true;
1743
+ }
1744
+ }, this.settings.timeoutDelay);
1745
+ if (this.settings.contentPosition === 'absolute') {
1746
+ if (this.settings.intervalMove) {
1747
+ clearInterval(this.settings.intervalMove);
1748
+ }
1749
+ this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
1750
+ }
1751
+ }
1752
+ close(eventType = null) {
1753
+ if (!this.settings.isOpen || this.settings.alwaysOpen) {
1754
+ return;
1755
+ }
1756
+ if (this.events.beforeClose) {
1757
+ this.events.beforeClose();
1758
+ }
1759
+ this.render.close();
1760
+ if (this.render.content.search.input.value !== '') {
1761
+ this.search('');
1762
+ }
1763
+ this.render.mainFocus(eventType);
1764
+ this.settings.isOpen = false;
1765
+ this.settings.isFullOpen = false;
1766
+ setTimeout(() => {
1767
+ if (this.events.afterClose) {
1768
+ this.events.afterClose();
1769
+ }
1770
+ }, this.settings.timeoutDelay);
1771
+ if (this.settings.intervalMove) {
1772
+ clearInterval(this.settings.intervalMove);
1773
+ }
1774
+ }
1775
+ search(value) {
1776
+ if (this.render.content.search.input.value !== value) {
1777
+ this.render.content.search.input.value = value;
1778
+ }
1779
+ if (!this.events.search) {
1780
+ this.render.renderOptions(value === '' ? this.store.getData() : this.store.search(value, this.events.searchFilter));
1781
+ return;
1782
+ }
1783
+ this.render.renderSearching();
1784
+ const searchResp = this.events.search(value, this.store.getSelectedOptions());
1785
+ if (searchResp instanceof Promise) {
1786
+ searchResp
1787
+ .then((data) => {
1788
+ this.render.renderOptions(this.store.partialToFullData(data));
1789
+ })
1790
+ .catch((err) => {
1791
+ this.render.renderError(typeof err === 'string' ? err : err.message);
1792
+ });
1793
+ return;
1794
+ }
1795
+ else if (Array.isArray(searchResp)) {
1796
+ this.render.renderOptions(this.store.partialToFullData(searchResp));
1797
+ }
1798
+ else {
1799
+ this.render.renderError('Search event must return a promise or an array of data');
1800
+ }
1801
+ }
1802
+ destroy() {
1803
+ document.removeEventListener('click', this.documentClick);
1804
+ window.removeEventListener('resize', this.windowResize, false);
1805
+ if (this.settings.openPosition === 'auto') {
1806
+ window.removeEventListener('scroll', this.windowScroll, false);
1807
+ }
1808
+ document.removeEventListener('visibilitychange', this.windowVisibilityChange);
1809
+ this.store.setData([]);
1810
+ this.render.destroy();
1811
+ this.select.destroy();
1812
+ }
1773
1813
  }
1774
1814
 
1775
- var script = vue.defineComponent({
1776
- name: 'SlimSelect',
1777
- props: {
1778
- modelValue: {
1779
- type: [String, Array, undefined],
1780
- },
1781
- multiple: {
1782
- type: Boolean,
1783
- default: false,
1784
- },
1785
- data: {
1786
- type: Array,
1787
- },
1788
- settings: {
1789
- type: Object,
1790
- },
1791
- events: {
1792
- type: Object,
1793
- },
1794
- },
1795
- emits: ['update:modelValue'],
1796
- data() {
1797
- return {
1798
- slim: null,
1799
- };
1800
- },
1801
- mounted() {
1802
- let config = {
1803
- select: this.$refs.slim,
1804
- };
1805
- if (this.data) {
1806
- config.data = this.data;
1807
- }
1808
- if (this.settings) {
1809
- config.settings = this.settings;
1810
- }
1811
- if (this.events) {
1812
- config.events = this.events;
1813
- }
1814
- if (!config.events) {
1815
- config.events = {};
1816
- }
1817
- const ogAfterChange = config.events.afterChange;
1818
- config.events.afterChange = (newVal) => {
1819
- const value = this.multiple ? newVal.map((option) => option.value) : newVal[0].value;
1820
- if (this.value !== value) {
1821
- this.value = value;
1822
- }
1823
- if (config.events && ogAfterChange) {
1824
- ogAfterChange(newVal);
1825
- }
1826
- };
1827
- this.slim = new SlimSelect(config);
1828
- let selected = this.$props.multiple ? this.slim.getSelected() : this.slim.getSelected()[0];
1829
- if (this.value !== selected) {
1830
- this.slim.setSelected(this.value);
1831
- }
1832
- },
1833
- beforeUnmount() {
1834
- if (this.slim) {
1835
- this.slim.destroy();
1836
- }
1837
- },
1838
- watch: {
1839
- modelValue: {
1840
- handler: function (newVal) {
1841
- var _a;
1842
- (_a = this.slim) === null || _a === void 0 ? void 0 : _a.setSelected(this.getCleanValue(newVal));
1843
- },
1844
- immediate: true,
1845
- },
1846
- data: {
1847
- handler: function (newData) {
1848
- if (this.slim) {
1849
- this.slim.setData(newData);
1850
- }
1851
- },
1852
- deep: true,
1853
- },
1854
- },
1855
- computed: {
1856
- value: {
1857
- get() {
1858
- return this.getCleanValue(this.$props.modelValue);
1859
- },
1860
- set(value) {
1861
- this.$emit('update:modelValue', value);
1862
- },
1863
- },
1864
- },
1865
- methods: {
1866
- getSlimSelect() {
1867
- return this.slim;
1868
- },
1869
- getCleanValue(val) {
1870
- const multi = this.$props.multiple;
1871
- if (typeof val === 'string') {
1872
- return multi ? [val] : val;
1873
- }
1874
- if (Array.isArray(val)) {
1875
- return multi ? val : val[0];
1876
- }
1877
- return multi ? [] : '';
1878
- },
1879
- },
1815
+ var script = vue.defineComponent({
1816
+ name: 'SlimSelect',
1817
+ props: {
1818
+ modelValue: {
1819
+ type: [String, Array, undefined],
1820
+ },
1821
+ multiple: {
1822
+ type: Boolean,
1823
+ default: false,
1824
+ },
1825
+ data: {
1826
+ type: Array,
1827
+ },
1828
+ settings: {
1829
+ type: Object,
1830
+ },
1831
+ events: {
1832
+ type: Object,
1833
+ },
1834
+ },
1835
+ emits: ['update:modelValue'],
1836
+ data() {
1837
+ return {
1838
+ slim: null,
1839
+ };
1840
+ },
1841
+ mounted() {
1842
+ let config = {
1843
+ select: this.$refs.slim,
1844
+ };
1845
+ if (this.data) {
1846
+ config.data = this.data;
1847
+ }
1848
+ if (this.settings) {
1849
+ config.settings = this.settings;
1850
+ }
1851
+ if (this.events) {
1852
+ config.events = this.events;
1853
+ }
1854
+ if (!config.events) {
1855
+ config.events = {};
1856
+ }
1857
+ const ogAfterChange = config.events.afterChange;
1858
+ config.events.afterChange = (newVal) => {
1859
+ const value = this.multiple ? newVal.map((option) => option.value) : newVal[0].value;
1860
+ if (this.value !== value) {
1861
+ this.value = value;
1862
+ }
1863
+ if (config.events && ogAfterChange) {
1864
+ ogAfterChange(newVal);
1865
+ }
1866
+ };
1867
+ this.slim = new SlimSelect(config);
1868
+ let selected = this.$props.multiple ? this.slim.getSelected() : this.slim.getSelected()[0];
1869
+ if (this.value !== selected) {
1870
+ this.slim.setSelected(this.value);
1871
+ }
1872
+ },
1873
+ beforeUnmount() {
1874
+ if (this.slim) {
1875
+ this.slim.destroy();
1876
+ }
1877
+ },
1878
+ watch: {
1879
+ modelValue: {
1880
+ handler: function (newVal) {
1881
+ var _a;
1882
+ (_a = this.slim) === null || _a === void 0 ? void 0 : _a.setSelected(this.getCleanValue(newVal));
1883
+ },
1884
+ immediate: true,
1885
+ },
1886
+ data: {
1887
+ handler: function (newData) {
1888
+ if (this.slim) {
1889
+ this.slim.setData(newData);
1890
+ }
1891
+ },
1892
+ deep: true,
1893
+ },
1894
+ },
1895
+ computed: {
1896
+ value: {
1897
+ get() {
1898
+ return this.getCleanValue(this.$props.modelValue);
1899
+ },
1900
+ set(value) {
1901
+ this.$emit('update:modelValue', value);
1902
+ },
1903
+ },
1904
+ },
1905
+ methods: {
1906
+ getSlimSelect() {
1907
+ return this.slim;
1908
+ },
1909
+ getCleanValue(val) {
1910
+ const multi = this.$props.multiple;
1911
+ if (typeof val === 'string') {
1912
+ return multi ? [val] : val;
1913
+ }
1914
+ if (Array.isArray(val)) {
1915
+ return multi ? val : val[0];
1916
+ }
1917
+ return multi ? [] : '';
1918
+ },
1919
+ },
1880
1920
  });
1881
1921
 
1882
1922
  const _hoisted_1 = ["multiple"];