slim-select 2.0.2 → 2.2.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 (66) hide show
  1. package/README.md +8 -0
  2. package/dist/index.d.ts +1 -1
  3. package/dist/render.d.ts +10 -3
  4. package/dist/select.d.ts +6 -6
  5. package/dist/settings.d.ts +0 -3
  6. package/dist/slimselect.cjs.js +202 -67
  7. package/dist/slimselect.css +1 -1
  8. package/dist/slimselect.css.map +1 -1
  9. package/dist/slimselect.es.js +202 -67
  10. package/dist/slimselect.global.js +202 -67
  11. package/dist/slimselect.js +202 -67
  12. package/dist/slimselect.min.js +1 -1
  13. package/dist/slimselect.umd.js +202 -67
  14. package/dist/slimselect.umd.min.js +1 -1
  15. package/dist/store.d.ts +5 -0
  16. package/docs/assets/data.js +7 -3
  17. package/docs/assets/home.css +1 -1
  18. package/docs/assets/home.js +1 -1
  19. package/docs/assets/index.css +1 -1
  20. package/docs/assets/index.js +7 -7
  21. package/docs/assets/index2.js +119 -35
  22. package/docs/assets/index3.js +39 -23
  23. package/docs/assets/index4.js +1 -1
  24. package/docs/assets/index5.js +147 -9
  25. package/docs/assets/install.js +4 -4
  26. package/docs/assets/selects.js +1 -1
  27. package/package.json +11 -3
  28. package/src/docs/app.vue +6 -5
  29. package/src/docs/{images → assets/images}/check-mark.svg +0 -0
  30. package/src/docs/{images → assets/images}/chrome.svg +0 -0
  31. package/src/docs/{images → assets/images}/firefox.svg +0 -0
  32. package/src/docs/{images → assets/images}/github.png +0 -0
  33. package/src/docs/{images → assets/images}/ie.svg +0 -0
  34. package/src/docs/{images → assets/images}/npm.png +0 -0
  35. package/src/docs/{images → assets/images}/opera.svg +0 -0
  36. package/src/docs/{images → assets/images}/safari.svg +0 -0
  37. package/src/docs/assets/scss/misc.scss +7 -0
  38. package/src/docs/env.d.ts +1 -0
  39. package/src/docs/pages/data.vue +4 -0
  40. package/src/docs/pages/events/addable.vue +22 -6
  41. package/src/docs/pages/events/before_after_change.vue +15 -1
  42. package/src/docs/pages/events/search.vue +31 -16
  43. package/src/docs/pages/frameworks/vue.vue +375 -7
  44. package/src/docs/pages/home.vue +104 -57
  45. package/src/docs/pages/methods/get_data.vue +2 -1
  46. package/src/docs/pages/methods/open_close.vue +1 -1
  47. package/src/docs/pages/settings/closable.vue +128 -0
  48. package/src/docs/pages/settings/index.vue +6 -3
  49. package/src/docs/pages/settings/select_all.vue +88 -0
  50. package/src/slim-select/index.ts +4 -2
  51. package/src/slim-select/render.ts +247 -59
  52. package/src/slim-select/rollup.config.mjs +5 -0
  53. package/src/slim-select/select.ts +48 -31
  54. package/src/slim-select/settings.ts +0 -4
  55. package/src/slim-select/slimselect.scss +112 -11
  56. package/src/slim-select/store.ts +19 -1
  57. package/src/vue/README.md +48 -0
  58. package/src/vue/dist/slimselectvue.es.js +1752 -0
  59. package/src/vue/dist/slimselectvue.global.js +1755 -0
  60. package/src/vue/dist/slimselectvue.ssr.js +1754 -0
  61. package/src/vue/hello.ts +5 -0
  62. package/src/vue/package.json +28 -0
  63. package/src/vue/rollup.config.mjs +44 -0
  64. package/src/vue/slimselect.vue +39 -5
  65. package/src/vue/tsconfig.json +14 -0
  66. package/src/docs/pages/settings/select_by_group.vue +0 -46
@@ -57,6 +57,8 @@
57
57
  constructor(optgroup) {
58
58
  this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
59
59
  this.label = optgroup.label || '';
60
+ this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
61
+ this.closable = optgroup.closable || 'off';
60
62
  this.options = [];
61
63
  if (optgroup.options) {
62
64
  for (const o of optgroup.options) {
@@ -203,6 +205,14 @@
203
205
  });
204
206
  return selectedIDs;
205
207
  }
208
+ getOptgroupByID(id) {
209
+ for (let dataObj of this.data) {
210
+ if (dataObj instanceof Optgroup && dataObj.id === id) {
211
+ return dataObj;
212
+ }
213
+ }
214
+ return null;
215
+ }
206
216
  getOptionByID(id) {
207
217
  let options = this.filter((opt) => {
208
218
  return opt.id === id;
@@ -237,7 +247,7 @@
237
247
  }
238
248
  });
239
249
  if (optOptions.length > 0) {
240
- dataSearch.push(new Optgroup({ id: dataObj.id, label: dataObj.label, options: optOptions }));
250
+ dataSearch.push(new Optgroup(dataObj));
241
251
  }
242
252
  }
243
253
  }
@@ -278,11 +288,18 @@
278
288
  list: 'ss-list',
279
289
  optgroup: 'ss-optgroup',
280
290
  optgroupLabel: 'ss-optgroup-label',
281
- optgroupSelectable: 'ss-optgroup-selectable',
291
+ optgroupLabelText: 'ss-optgroup-label-text',
292
+ optgroupActions: 'ss-optgroup-actions',
293
+ optgroupSelectAll: 'ss-selectall',
294
+ optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
295
+ optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
296
+ optgroupClosable: 'ss-closable',
282
297
  option: 'ss-option',
283
- optionSelected: 'ss-option-selected',
284
298
  optionDelete: 'M10,10 L90,90 M10,90 L90,10',
285
299
  highlighted: 'ss-highlighted',
300
+ open: 'ss-open',
301
+ close: 'ss-close',
302
+ selected: 'ss-selected',
286
303
  error: 'ss-error',
287
304
  disabled: 'ss-disabled',
288
305
  hide: 'ss-hide',
@@ -292,8 +309,6 @@
292
309
  this.callbacks = callbacks;
293
310
  this.main = this.mainDiv();
294
311
  this.content = this.contentDiv();
295
- this.renderValues();
296
- this.renderOptions(this.store.getData());
297
312
  this.settings.contentLocation.appendChild(this.content.main);
298
313
  }
299
314
  enable() {
@@ -401,7 +416,21 @@
401
416
  if (!this.settings.isEnabled) {
402
417
  return;
403
418
  }
404
- this.callbacks.setSelected(['']);
419
+ let shouldDelete = true;
420
+ const before = this.store.getSelectedOptions();
421
+ const after = [];
422
+ if (this.callbacks.beforeChange) {
423
+ shouldDelete = this.callbacks.beforeChange(after, before) === true;
424
+ }
425
+ if (shouldDelete) {
426
+ this.callbacks.setSelected(['']);
427
+ if (this.settings.closeOnSelect) {
428
+ this.callbacks.close();
429
+ }
430
+ if (this.callbacks.afterChange) {
431
+ this.callbacks.afterChange(after);
432
+ }
433
+ }
405
434
  };
406
435
  const deselectSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
407
436
  deselectSvg.setAttribute('viewBox', '0 0 100 100');
@@ -707,23 +736,48 @@
707
736
  this.content.search.input.focus();
708
737
  return;
709
738
  }
739
+ const runFinish = (oo) => {
740
+ let newOption = new Option(oo);
741
+ this.callbacks.addOption(newOption);
742
+ if (this.settings.isMultiple) {
743
+ let values = this.store.getSelected();
744
+ values.push(newOption.value);
745
+ this.callbacks.setSelected(values);
746
+ }
747
+ else {
748
+ this.callbacks.setSelected([newOption.value]);
749
+ }
750
+ this.callbacks.search('');
751
+ if (this.settings.closeOnSelect) {
752
+ setTimeout(() => {
753
+ this.callbacks.close();
754
+ }, 100);
755
+ }
756
+ };
710
757
  const addableValue = this.callbacks.addable(inputValue);
711
- if (typeof addableValue === 'string') {
712
- this.callbacks.addOption(new Option({
758
+ if (addableValue instanceof Promise) {
759
+ addableValue.then((value) => {
760
+ if (typeof value === 'string') {
761
+ runFinish({
762
+ text: value,
763
+ value: value,
764
+ });
765
+ }
766
+ else {
767
+ runFinish(value);
768
+ }
769
+ });
770
+ }
771
+ else if (typeof addableValue === 'string') {
772
+ runFinish({
713
773
  text: addableValue,
714
774
  value: addableValue,
715
- }));
775
+ });
716
776
  }
717
777
  else {
718
- this.callbacks.addOption(new Option(addableValue));
719
- }
720
- this.callbacks.setSelected([inputValue]);
721
- this.callbacks.search('');
722
- if (this.settings.closeOnSelect) {
723
- setTimeout(() => {
724
- this.callbacks.close();
725
- }, 100);
778
+ runFinish(addableValue);
726
779
  }
780
+ return;
727
781
  };
728
782
  main.appendChild(addable);
729
783
  searchReturn.addable = {
@@ -767,25 +821,23 @@
767
821
  }
768
822
  for (let i = 0; i < options.length; i++) {
769
823
  if (options[i].classList.contains(this.classes.highlighted)) {
770
- options[i].classList.remove(this.classes.highlighted);
771
- if (dir === 'down') {
772
- if (i + 1 < options.length) {
773
- options[i + 1].classList.add(this.classes.highlighted);
774
- this.ensureElementInView(this.content.list, options[i + 1]);
775
- }
776
- else {
777
- options[0].classList.add(this.classes.highlighted);
778
- this.ensureElementInView(this.content.list, options[0]);
824
+ const prevOption = options[i];
825
+ prevOption.classList.remove(this.classes.highlighted);
826
+ const prevParent = prevOption.parentElement;
827
+ if (prevParent && prevParent.classList.contains(this.classes.open)) {
828
+ const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel);
829
+ if (optgroupLabel) {
830
+ optgroupLabel.click();
779
831
  }
780
832
  }
781
- else {
782
- if (i - 1 >= 0) {
783
- options[i - 1].classList.add(this.classes.highlighted);
784
- this.ensureElementInView(this.content.list, options[i - 1]);
785
- }
786
- else {
787
- options[options.length - 1].classList.add(this.classes.highlighted);
788
- this.ensureElementInView(this.content.list, options[options.length - 1]);
833
+ let selectOption = options[dir === 'down' ? (i + 1 < options.length ? i + 1 : 0) : i - 1 >= 0 ? i - 1 : options.length - 1];
834
+ selectOption.classList.add(this.classes.highlighted);
835
+ this.ensureElementInView(this.content.list, selectOption);
836
+ const selectParent = selectOption.parentElement;
837
+ if (selectParent && selectParent.classList.contains(this.classes.close)) {
838
+ const optgroupLabel = selectParent.querySelector('.' + this.classes.optgroupLabel);
839
+ if (optgroupLabel) {
840
+ optgroupLabel.click();
789
841
  }
790
842
  }
791
843
  return;
@@ -830,18 +882,95 @@
830
882
  optgroupEl.classList.add(this.classes.optgroup);
831
883
  const optgroupLabel = document.createElement('div');
832
884
  optgroupLabel.classList.add(this.classes.optgroupLabel);
833
- optgroupLabel.innerHTML = d.label;
834
- if (this.settings.selectByGroup && this.settings.isMultiple) {
835
- optgroupLabel.classList.add(this.classes.optgroupSelectable);
885
+ optgroupEl.appendChild(optgroupLabel);
886
+ const optgroupLabelText = document.createElement('div');
887
+ optgroupLabelText.classList.add(this.classes.optgroupLabelText);
888
+ optgroupLabelText.textContent = d.label;
889
+ optgroupLabel.appendChild(optgroupLabelText);
890
+ const optgroupActions = document.createElement('div');
891
+ optgroupActions.classList.add(this.classes.optgroupActions);
892
+ optgroupLabel.appendChild(optgroupActions);
893
+ if (this.settings.isMultiple && d.selectAll) {
894
+ const selectAll = document.createElement('div');
895
+ selectAll.classList.add(this.classes.optgroupSelectAll);
896
+ let allSelected = true;
897
+ for (const o of d.options) {
898
+ if (!o.selected) {
899
+ allSelected = false;
900
+ break;
901
+ }
902
+ }
903
+ if (allSelected) {
904
+ selectAll.classList.add(this.classes.selected);
905
+ }
906
+ const selectAllText = document.createElement('span');
907
+ selectAllText.textContent = 'Select All';
908
+ selectAll.appendChild(selectAllText);
909
+ const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
910
+ selectAllSvg.setAttribute('viewBox', '0 0 100 100');
911
+ selectAll.appendChild(selectAllSvg);
912
+ const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path');
913
+ selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox);
914
+ selectAllSvg.appendChild(selectAllBox);
915
+ const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path');
916
+ selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck);
917
+ selectAllSvg.appendChild(selectAllCheck);
918
+ selectAll.addEventListener('click', (e) => {
919
+ e.preventDefault();
920
+ e.stopPropagation();
921
+ const currentSelected = this.store.getSelected();
922
+ if (allSelected) {
923
+ const newSelected = currentSelected.filter((s) => {
924
+ for (const o of d.options) {
925
+ if (s === o.value) {
926
+ return false;
927
+ }
928
+ }
929
+ return true;
930
+ });
931
+ this.callbacks.setSelected(newSelected);
932
+ return;
933
+ }
934
+ else {
935
+ const newSelected = currentSelected.concat(d.options.map((o) => o.value));
936
+ this.callbacks.setSelected(newSelected);
937
+ }
938
+ });
939
+ optgroupActions.appendChild(selectAll);
940
+ }
941
+ if (d.closable !== 'off') {
942
+ const optgroupClosable = document.createElement('div');
943
+ optgroupClosable.classList.add(this.classes.optgroupClosable);
944
+ const optgroupClosableSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
945
+ optgroupClosableSvg.setAttribute('viewBox', '0 0 100 100');
946
+ optgroupClosableSvg.classList.add(this.classes.arrow);
947
+ optgroupClosable.appendChild(optgroupClosableSvg);
948
+ const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
949
+ optgroupClosableArrow.setAttribute('d', this.classes.arrow);
950
+ optgroupClosableSvg.appendChild(optgroupClosableArrow);
951
+ if (d.closable === 'open') {
952
+ optgroupEl.classList.add(this.classes.open);
953
+ optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
954
+ }
955
+ else if (d.closable === 'close') {
956
+ optgroupEl.classList.add(this.classes.close);
957
+ optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
958
+ }
836
959
  optgroupLabel.addEventListener('click', (e) => {
837
960
  e.preventDefault();
838
961
  e.stopPropagation();
839
- for (const childEl of optgroupEl.children) {
840
- if (childEl.className.indexOf(this.classes.option) !== -1) {
841
- childEl.click();
842
- }
962
+ if (optgroupEl.classList.contains(this.classes.close)) {
963
+ optgroupEl.classList.remove(this.classes.close);
964
+ optgroupEl.classList.add(this.classes.open);
965
+ optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
966
+ }
967
+ else {
968
+ optgroupEl.classList.remove(this.classes.open);
969
+ optgroupEl.classList.add(this.classes.close);
970
+ optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
843
971
  }
844
972
  });
973
+ optgroupActions.appendChild(optgroupClosable);
845
974
  }
846
975
  optgroupEl.appendChild(optgroupLabel);
847
976
  for (const o of d.options) {
@@ -893,10 +1022,10 @@
893
1022
  optionEl.classList.add(this.classes.hide);
894
1023
  }
895
1024
  if (option.selected) {
896
- optionEl.classList.add(this.classes.optionSelected);
1025
+ optionEl.classList.add(this.classes.selected);
897
1026
  }
898
1027
  else {
899
- optionEl.classList.remove(this.classes.optionSelected);
1028
+ optionEl.classList.remove(this.classes.selected);
900
1029
  }
901
1030
  optionEl.addEventListener('click', (e) => {
902
1031
  e.preventDefault();
@@ -1079,7 +1208,9 @@
1079
1208
  }
1080
1209
  observeWrapper(mutations) {
1081
1210
  if (this.onSelectChange) {
1211
+ this.changeListen(false);
1082
1212
  this.onSelectChange(this.getData());
1213
+ this.changeListen(true);
1083
1214
  }
1084
1215
  }
1085
1216
  addObserver() {
@@ -1087,15 +1218,12 @@
1087
1218
  this.disconnectObserver();
1088
1219
  this.observer = null;
1089
1220
  }
1090
- this.observer = new MutationObserver(this.observeWrapper);
1221
+ this.observer = new MutationObserver(this.observeWrapper.bind(this));
1091
1222
  }
1092
1223
  connectObserver() {
1093
1224
  if (this.observer) {
1094
1225
  this.observer.observe(this.select, {
1095
- attributes: true,
1096
1226
  childList: true,
1097
- characterData: true,
1098
- subtree: true,
1099
1227
  });
1100
1228
  }
1101
1229
  }
@@ -1119,8 +1247,10 @@
1119
1247
  }
1120
1248
  getDataFromOptgroup(optgroup) {
1121
1249
  let data = {
1122
- id: '',
1250
+ id: (optgroup.dataset ? optgroup.dataset.id : false) || '',
1123
1251
  label: optgroup.label,
1252
+ selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
1253
+ closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
1124
1254
  options: [],
1125
1255
  };
1126
1256
  const options = optgroup.childNodes;
@@ -1131,6 +1261,22 @@
1131
1261
  }
1132
1262
  return data;
1133
1263
  }
1264
+ getDataFromOption(option) {
1265
+ return {
1266
+ id: (option.dataset ? option.dataset.id : false) || '',
1267
+ value: option.value,
1268
+ text: option.text,
1269
+ html: option.innerHTML,
1270
+ selected: option.selected,
1271
+ display: option.style.display === 'none' ? false : true,
1272
+ disabled: option.disabled,
1273
+ mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
1274
+ placeholder: option.dataset.placeholder === 'true',
1275
+ class: option.className,
1276
+ style: option.style.cssText,
1277
+ data: option.dataset,
1278
+ };
1279
+ }
1134
1280
  getSelectedValues() {
1135
1281
  let values = [];
1136
1282
  const options = this.select.childNodes;
@@ -1155,22 +1301,6 @@
1155
1301
  }
1156
1302
  return values;
1157
1303
  }
1158
- getDataFromOption(option) {
1159
- return {
1160
- id: (option.dataset ? option.dataset.id : false) || generateID(),
1161
- value: option.value,
1162
- text: option.text,
1163
- html: option.innerHTML,
1164
- selected: option.selected,
1165
- display: option.style.display === 'none' ? false : true,
1166
- disabled: option.disabled,
1167
- mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
1168
- placeholder: option.dataset.placeholder === 'true',
1169
- class: option.className,
1170
- style: option.style.cssText,
1171
- data: option.dataset,
1172
- };
1173
- }
1174
1304
  setSelected(value) {
1175
1305
  const options = this.select.childNodes;
1176
1306
  for (const o of options) {
@@ -1225,6 +1355,12 @@
1225
1355
  const optgroupEl = document.createElement('optgroup');
1226
1356
  optgroupEl.id = optgroup.id;
1227
1357
  optgroupEl.label = optgroup.label;
1358
+ if (optgroup.selectAll) {
1359
+ optgroupEl.dataset.selectAll = 'true';
1360
+ }
1361
+ if (optgroup.closable !== 'off') {
1362
+ optgroupEl.dataset.closable = optgroup.closable;
1363
+ }
1228
1364
  if (optgroup.options) {
1229
1365
  for (const o of optgroup.options) {
1230
1366
  optgroupEl.appendChild(this.createOption(o));
@@ -1281,8 +1417,6 @@
1281
1417
  this.isOpen = false;
1282
1418
  this.triggerFocus = true;
1283
1419
  this.intervalMove = null;
1284
- this.mainHeight = 30;
1285
- this.contentHeight = 0;
1286
1420
  if (!settings) {
1287
1421
  settings = {};
1288
1422
  }
@@ -1304,7 +1438,6 @@
1304
1438
  this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
1305
1439
  this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
1306
1440
  this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
1307
- this.selectByGroup = settings.selectByGroup !== undefined ? settings.selectByGroup : false;
1308
1441
  this.minSelected = settings.minSelected || 0;
1309
1442
  this.maxSelected = settings.maxSelected || 1000;
1310
1443
  this.timeoutDelay = settings.timeoutDelay || 200;
@@ -1411,6 +1544,8 @@
1411
1544
  afterChange: this.events.afterChange,
1412
1545
  };
1413
1546
  this.render = new Render(this.settings, this.store, callbacks);
1547
+ this.render.renderValues();
1548
+ this.render.renderOptions(this.store.getData());
1414
1549
  if (this.selectEl.parentNode) {
1415
1550
  this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
1416
1551
  }
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).SlimSelect=t()}(this,(function(){"use strict";function e(){return Math.random().toString(36).substring(2,10)}function t(e,t=50,s=!1){let i;return function(...n){const a=self,l=s&&!i;clearTimeout(i),i=setTimeout((()=>{i=null,s||e.apply(a,n)}),t),l&&e.apply(a,n)}}class s{constructor(t){if(this.id=t.id&&""!==t.id?t.id:e(),this.label=t.label||"",this.options=[],t.options)for(const e of t.options)this.options.push(new i(e))}}class i{constructor(t){this.id=t.id&&""!==t.id?t.id:e(),this.value=void 0===t.value?t.text:t.value,this.text=t.text||"",this.html=t.html||"",this.selected=void 0!==t.selected&&t.selected,this.display=void 0===t.display||t.display,this.disabled=void 0!==t.disabled&&t.disabled,this.mandatory=void 0!==t.mandatory&&t.mandatory,this.placeholder=void 0!==t.placeholder&&t.placeholder,this.class=t.class||"",this.style=t.style||"",this.data=t.data||{}}}class n{constructor(e,t){this.selectType="single",this.data=[],this.selectType=e,this.setData(t)}validateDataArray(e){if(!Array.isArray(e))return new Error("Data must be an array");for(let t of e){if(!(t instanceof s||"label"in t))return t instanceof i||"text"in t?this.validateOption(t):new Error("Data object must be a valid optgroup or option");if(!("label"in t))return new Error("Optgroup must have a label");if("options"in t&&t.options)for(let e of t.options)return this.validateOption(e)}return null}validateOption(e){return"text"in e?null:new Error("Option must have a text")}partialToFullData(e){let t=[];return e.forEach((e=>{if(e instanceof s||"label"in e){let n=[];"options"in e&&e.options&&e.options.forEach((e=>{n.push(new i(e))})),n.length>0&&t.push(new s(e))}(e instanceof i||"text"in e)&&t.push(new i(e))})),t}setData(e){this.data=this.partialToFullData(e),"single"===this.selectType&&this.setSelectedBy("value",this.getSelected())}getData(){return this.filter(null,!0)}getDataOptions(){return this.filter(null,!1)}addOption(e){this.setData(this.getData().concat(new i(e)))}setSelectedBy(e,t){let n=null,a=!1;for(let l of this.data){if(l instanceof s)for(let s of l.options)n||(n=s),s.selected=!a&&t.includes(s[e]),s.selected&&"single"===this.selectType&&(a=!0);l instanceof i&&(n||(n=l),l.selected=!a&&t.includes(l[e]),l.selected&&"single"===this.selectType&&(a=!0))}"single"===this.selectType&&n&&!a&&(n.selected=!0)}getSelected(){let e=this.getSelectedOptions(),t=[];return e.forEach((e=>{t.push(e.value)})),t}getSelectedOptions(){return this.filter((e=>e.selected),!1)}getSelectedIDs(){let e=this.getSelectedOptions(),t=[];return e.forEach((e=>{t.push(e.id)})),t}getOptionByID(e){let t=this.filter((t=>t.id===e),!1);return t.length?t[0]:null}search(e,t){return""===(e=e.trim())?this.getData():this.filter((s=>t(s,e)),!0)}filter(e,t){const n=[];return this.data.forEach((a=>{if(a instanceof s)if(t){let t=[];a.options.forEach((s=>{e&&!e(s)||t.push(new i(s))})),t.length>0&&n.push(new s({id:a.id,label:a.label,options:t}))}else a.options.forEach((t=>{e&&e(t)&&n.push(t)}));a instanceof i&&(e&&!e(a)||n.push(new i(a)))})),n}}class a{constructor(e,t,s){this.classes={main:"ss-main",placeholder:"ss-placeholder",values:"ss-values",single:"ss-single",value:"ss-value",valueText:"ss-value-text",valueDelete:"ss-value-delete",valueOut:"ss-value-out",deselect:"ss-deselect",deselectPath:"M10,10 L90,90 M10,90 L90,10",arrow:"ss-arrow",arrowClose:"M10,30 L50,70 L90,30",arrowOpen:"M10,70 L50,30 L90,70",content:"ss-content",openAbove:"ss-open-above",openBelow:"ss-open-below",search:"ss-search",searchHighlighter:"ss-search-highlight",searching:"ss-searching",addable:"ss-addable",addablePath:"M50,10 L50,90 M10,50 L90,50",list:"ss-list",optgroup:"ss-optgroup",optgroupLabel:"ss-optgroup-label",optgroupSelectable:"ss-optgroup-selectable",option:"ss-option",optionSelected:"ss-option-selected",optionDelete:"M10,10 L90,90 M10,90 L90,10",highlighted:"ss-highlighted",error:"ss-error",disabled:"ss-disabled",hide:"ss-hide"},this.store=t,this.settings=e,this.callbacks=s,this.main=this.mainDiv(),this.content=this.contentDiv(),this.renderValues(),this.renderOptions(this.store.getData()),this.settings.contentLocation.appendChild(this.content.main)}enable(){this.main.main.classList.remove(this.classes.disabled),this.content.search.input.disabled=!1}disable(){this.main.main.classList.add(this.classes.disabled),this.content.search.input.disabled=!0}open(){this.main.arrow.path.setAttribute("d",this.classes.arrowOpen),this.main.main.classList.add("up"===this.settings.openPosition?this.classes.openAbove:this.classes.openBelow),this.moveContent(),this.renderOptions(this.store.getData()),"relative"===this.settings.contentPosition?this.moveContentBelow():"up"===this.settings.openPosition.toLowerCase()?this.moveContentAbove():"down"===this.settings.openPosition.toLowerCase()?this.moveContentBelow():"up"===this.putContent(this.content.main,this.settings.isOpen)?this.moveContentAbove():this.moveContentBelow();const e=this.store.getSelectedOptions();if(e.length){const t=e[e.length-1].id,s=this.content.list.querySelector('[data-id="'+t+'"]');s&&this.ensureElementInView(this.content.list,s)}}close(){this.main.main.classList.remove(this.classes.openAbove),this.main.main.classList.remove(this.classes.openBelow),this.content.main.classList.remove(this.classes.openAbove),this.content.main.classList.remove(this.classes.openBelow),this.main.arrow.path.setAttribute("d",this.classes.arrowClose)}mainDiv(){const e=document.createElement("div");if(e.tabIndex=0,e.style.cssText=""!==this.settings.style?this.settings.style:"",e.className="",e.classList.add(this.settings.id),e.classList.add(this.classes.main),this.settings.class)for(const t of this.settings.class)""!==t.trim()&&e.classList.add(t.trim());e.onfocus=()=>{this.settings.triggerFocus&&this.callbacks.open()},e.onkeydown=e=>{switch(e.key){case"ArrowUp":case"ArrowDown":return this.callbacks.open(),"ArrowDown"===e.key?this.highlight("down"):this.highlight("up"),!1;case"Tab":return this.callbacks.close(),!0;case"Enter":const t=this.content.list.querySelector("."+this.classes.highlighted);return t&&t.click(),!1;case"Escape":return this.callbacks.close(),!1}},e.onclick=e=>{this.settings.isEnabled&&(this.settings.isOpen?this.callbacks.close():this.callbacks.open())};const t=document.createElement("div");t.classList.add(this.classes.values),e.appendChild(t);const s=document.createElement("div");s.classList.add(this.classes.deselect),this.settings.allowDeselect&&!this.settings.isMultiple||s.classList.add(this.classes.hide),s.onclick=e=>{e.stopPropagation(),this.settings.isEnabled&&this.callbacks.setSelected([""])};const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("viewBox","0 0 100 100");const n=document.createElementNS("http://www.w3.org/2000/svg","path");n.setAttribute("d",this.classes.deselectPath),i.appendChild(n),s.appendChild(i),e.appendChild(s);const a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.classList.add(this.classes.arrow),a.setAttribute("viewBox","0 0 100 100");const l=document.createElementNS("http://www.w3.org/2000/svg","path");return l.setAttribute("d",this.classes.arrowClose),this.settings.alwaysOpen&&a.classList.add(this.classes.hide),a.appendChild(l),e.appendChild(a),{main:e,values:t,deselect:{main:s,svg:i,path:n},arrow:{main:a,path:l}}}mainFocus(e){e||(this.settings.triggerFocus=!1),this.main.main.focus({preventScroll:!0}),this.settings.triggerFocus=!0}placeholder(){const e=this.store.filter((e=>e.placeholder),!1);let t=this.settings.placeholderText;e.length&&(""!==e[0].html?t=e[0].html:""!==e[0].text&&(t=e[0].text));const s=document.createElement("div");return s.classList.add(this.classes.placeholder),s.innerHTML=t,s}renderValues(){this.settings.isMultiple?this.renderMultipleValues():this.renderSingleValue()}renderSingleValue(){const e=this.store.filter((e=>e.selected&&!e.placeholder),!1),t=e.length>0?e[0]:null;if(t){const e=document.createElement("div");e.classList.add(this.classes.single),e.innerHTML=t.html?t.html:t.text,this.main.values.innerHTML=e.outerHTML}else this.main.values.innerHTML=this.placeholder().outerHTML;this.settings.allowDeselect&&e.length?this.main.deselect.main.classList.remove(this.classes.hide):this.main.deselect.main.classList.add(this.classes.hide)}renderMultipleValues(){let e=this.main.values.childNodes,t=this.store.filter((e=>e.selected&&e.display),!1);if(0===t.length)return void(this.main.values.innerHTML=this.placeholder().outerHTML);{const e=this.main.values.querySelector("."+this.classes.placeholder);e&&e.remove()}let s=[];for(let i=0;i<e.length;i++){const n=e[i],a=n.getAttribute("data-id");if(a){t.filter((e=>e.id===a),!1).length||s.push(n)}}for(const e of s)e.classList.add(this.classes.valueOut),setTimeout((()=>{this.main.values.removeChild(e)}),100);e=this.main.values.childNodes;for(let s=0;s<t.length;s++){let i=!0;for(let n=0;n<e.length;n++)t[s].id===String(e[n].dataset.id)&&(i=!1);i&&(0===e.length?this.main.values.appendChild(this.multipleValue(t[s])):0===s?this.main.values.insertBefore(this.multipleValue(t[s]),e[s]):e[s-1].insertAdjacentElement("afterend",this.multipleValue(t[s])))}}multipleValue(e){const t=document.createElement("div");t.classList.add(this.classes.value),t.dataset.id=e.id;const n=document.createElement("div");if(n.classList.add(this.classes.valueText),n.innerHTML=e.text,t.appendChild(n),!e.mandatory){const n=document.createElement("div");n.classList.add(this.classes.valueDelete),n.onclick=t=>{t.preventDefault(),t.stopPropagation();let n=!0;const a=this.store.getSelectedOptions(),l=a.filter((t=>t.selected&&t.id!==e.id),!0);if(!(this.settings.minSelected&&l.length<this.settings.minSelected)&&(this.callbacks.beforeChange&&(n=!0===this.callbacks.beforeChange(l,a)),n)){let e=[];for(const t of l){if(t instanceof s)for(const s of t.options)e.push(s.value);t instanceof i&&e.push(t.value)}this.callbacks.setSelected(e),this.settings.closeOnSelect&&this.callbacks.close(),this.callbacks.afterChange&&this.callbacks.afterChange(l)}};const a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.setAttribute("viewBox","0 0 100 100");const l=document.createElementNS("http://www.w3.org/2000/svg","path");l.setAttribute("d",this.classes.optionDelete),a.appendChild(l),n.appendChild(a),t.appendChild(n)}return t}contentDiv(){const e=document.createElement("div");if(e.classList.add(this.classes.content),e.dataset.id=this.settings.id,""!==this.settings.style&&(e.style.cssText=this.settings.style),"relative"===this.settings.contentPosition&&e.classList.add("ss-"+this.settings.contentPosition),this.settings.class.length)for(const t of this.settings.class)""!==t.trim()&&e.classList.add(t.trim());const t=this.searchDiv();e.appendChild(t.main);const s=this.listDiv();return e.appendChild(s),{main:e,search:t,list:s}}moveContent(){if("relative"===this.settings.contentPosition)return;const e=this.main.main.getBoundingClientRect();this.content.main.style.top=e.top+e.height+window.scrollY+"px",this.content.main.style.left=e.left+window.scrollX+"px",this.content.main.style.width=e.width+"px"}searchDiv(){const e=document.createElement("div"),s=document.createElement("input"),n=document.createElement("div");e.classList.add(this.classes.search);const a={main:e,input:s};if(this.settings.showSearch||(e.classList.add(this.classes.hide),s.readOnly=!0),s.type="search",s.placeholder=this.settings.searchPlaceholder,s.tabIndex=-1,s.setAttribute("aria-label",this.settings.searchPlaceholder),s.setAttribute("autocapitalize","off"),s.setAttribute("autocomplete","off"),s.setAttribute("autocorrect","off"),s.oninput=t((e=>{this.callbacks.search(e.target.value)}),100),s.onkeydown=e=>{switch(e.key){case"ArrowUp":case"ArrowDown":return this.callbacks.open(),"ArrowDown"===e.key?this.highlight("down"):this.highlight("up"),!1;case"Tab":return this.callbacks.close(),!0;case"Escape":return this.callbacks.close(),!1;case"Enter":if(this.callbacks.addable&&e.ctrlKey)n.click();else{const e=this.content.list.querySelector("."+this.classes.highlighted);e&&e.click()}return!1}},s.onfocus=()=>{this.settings.isOpen||this.callbacks.open()},e.appendChild(s),this.callbacks.addable){n.classList.add(this.classes.addable);const t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttribute("viewBox","0 0 100 100");const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",this.classes.addablePath),t.appendChild(s),n.appendChild(t),n.onclick=e=>{if(e.preventDefault(),e.stopPropagation(),!this.callbacks.addable)return;const t=this.content.search.input.value.trim();if(""===t)return void this.content.search.input.focus();const s=this.callbacks.addable(t);"string"==typeof s?this.callbacks.addOption(new i({text:s,value:s})):this.callbacks.addOption(new i(s)),this.callbacks.setSelected([t]),this.callbacks.search(""),this.settings.closeOnSelect&&setTimeout((()=>{this.callbacks.close()}),100)},e.appendChild(n),a.addable={main:n,svg:t,path:s}}return a}searchFocus(e){e||(this.settings.triggerFocus=!1),this.content.search.input.focus(),this.settings.triggerFocus=!0}getOptions(e=!1,t=!1,s=!1){let i="."+this.classes.option;return e&&(i+=":not(."+this.classes.placeholder+")"),t&&(i+=":not(."+this.classes.disabled+")"),s&&(i+=":not(."+this.classes.hide+")"),Array.from(this.content.list.querySelectorAll(i))}highlight(e){const t=this.getOptions(!0,!0,!0);if(0!==t.length)if(1!==t.length||t[0].classList.contains(this.classes.highlighted)){for(let s=0;s<t.length;s++)if(t[s].classList.contains(this.classes.highlighted))return t[s].classList.remove(this.classes.highlighted),void("down"===e?s+1<t.length?(t[s+1].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t[s+1])):(t[0].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t[0])):s-1>=0?(t[s-1].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t[s-1])):(t[t.length-1].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t[t.length-1])));t["down"===e?0:t.length-1].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t["down"===e?0:t.length-1])}else t[0].classList.add(this.classes.highlighted)}listDiv(){const e=document.createElement("div");return e.classList.add(this.classes.list),e.setAttribute("role","listbox"),e}renderError(e){this.content.list.innerHTML="";const t=document.createElement("div");t.classList.add(this.classes.error),t.textContent=e,this.content.list.appendChild(t)}renderSearching(){this.content.list.innerHTML="";const e=document.createElement("div");e.classList.add(this.classes.searching),e.textContent=this.settings.searchingText,this.content.list.appendChild(e)}renderOptions(e){if(this.content.list.innerHTML="",0===e.length){const e=document.createElement("div");return e.classList.add(this.classes.option),e.classList.add(this.classes.disabled),e.innerHTML=this.settings.searchText,void this.content.list.appendChild(e)}for(const t of e){if(t instanceof s){const e=document.createElement("div");e.classList.add(this.classes.optgroup);const s=document.createElement("div");s.classList.add(this.classes.optgroupLabel),s.innerHTML=t.label,this.settings.selectByGroup&&this.settings.isMultiple&&(s.classList.add(this.classes.optgroupSelectable),s.addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation();for(const t of e.children)-1!==t.className.indexOf(this.classes.option)&&t.click()}))),e.appendChild(s);for(const s of t.options)e.appendChild(this.option(s));this.content.list.appendChild(e)}t instanceof i&&this.content.list.appendChild(this.option(t))}}option(e){if(e.placeholder){const e=document.createElement("div");return e.classList.add(this.classes.option),e.classList.add(this.classes.hide),e}const t=document.createElement("div");if(t.dataset.id=e.id,t.classList.add(this.classes.option),t.setAttribute("role","option"),e.class&&e.class.split(" ").forEach((e=>{t.classList.add(e)})),e.style&&(t.style.cssText=e.style),this.settings.searchHighlight&&""!==this.content.search.input.value.trim()){const s=""!==e.html?e.html:e.text;t.innerHTML=this.highlightText(s,this.content.search.input.value,this.classes.searchHighlighter)}else""!==e.html?t.innerHTML=e.html:t.textContent=e.text;return this.settings.showOptionTooltips&&t.textContent&&t.setAttribute("title",t.textContent),(e.selected&&!this.settings.allowDeselect||e.disabled&&!this.settings.allowDeselect)&&t.classList.add(this.classes.disabled),e.selected&&this.settings.hideSelected&&t.classList.add(this.classes.hide),e.selected?t.classList.add(this.classes.optionSelected):t.classList.remove(this.classes.optionSelected),t.addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation();const s=this.store.getSelected(),i=t.currentTarget,n=String(i.dataset.id);if(e.disabled||e.selected&&!this.settings.allowDeselect)return;if(this.settings.isMultiple&&Array.isArray(s)&&this.settings.maxSelected<=s.length)return;let a=!1;const l=this.store.getSelectedOptions();let o=[];this.settings.isMultiple&&(o=e.selected?l.filter((e=>e.id!==n)):l.concat(e)),this.settings.isMultiple||(o=e.selected?[]:[e]),this.callbacks.beforeChange||(a=!0),this.callbacks.beforeChange&&(a=!1!==this.callbacks.beforeChange(o,l)),a&&(this.store.getOptionByID(n)||this.callbacks.addOption(e),this.callbacks.setSelected(o.map((e=>e.value))),this.settings.closeOnSelect&&this.callbacks.close(),this.callbacks.afterChange&&this.callbacks.afterChange(o))})),t}destroy(){this.main.main.remove(),this.content.main.remove()}highlightText(e,t,s){let i=e;const n=new RegExp("("+t.trim()+")(?![^<]*>[^<>]*</)","i");if(!e.match(n))return e;const a=e.match(n).index,l=a+e.match(n)[0].toString().length,o=e.substring(a,l);return i=i.replace(n,`<mark class="${s}">${o}</mark>`),i}moveContentAbove(){const e=this.main.main.offsetHeight+this.content.main.offsetHeight-1;this.content.main.style.margin="-"+e+"px 0px 0px 0px",this.content.main.style.transformOrigin="center bottom",this.main.main.classList.remove(this.classes.openBelow),this.main.main.classList.add(this.classes.openAbove),this.content.main.classList.remove(this.classes.openBelow),this.content.main.classList.add(this.classes.openAbove)}moveContentBelow(){this.content.main.style.margin="-1px 0px 0px 0px",this.content.main.style.transformOrigin="center top",this.main.main.classList.remove(this.classes.openAbove),this.main.main.classList.add(this.classes.openBelow),this.content.main.classList.remove(this.classes.openAbove),this.content.main.classList.add(this.classes.openBelow)}ensureElementInView(e,t){const s=e.scrollTop+e.offsetTop,i=s+e.clientHeight,n=t.offsetTop,a=n+t.clientHeight;n<s?e.scrollTop-=s-n:a>i&&(e.scrollTop+=a-i)}putContent(e,t){const s=e.offsetHeight,i=e.getBoundingClientRect(),n=t?i.top:i.top-s,a=t?i.bottom:i.bottom+s;return n<=0?"down":a>=window.innerHeight?"up":"down"}}class l{constructor(e){this.listen=!1,this.observer=null,this.select=e}enable(){this.disconnectObserver(),this.select.disabled=!1,this.connectObserver()}disable(){this.disconnectObserver(),this.select.disabled=!0,this.connectObserver()}hideUI(){this.select.tabIndex=-1,this.select.style.display="none",this.select.setAttribute("aria-hidden","true")}showUI(){this.select.removeAttribute("tabindex"),this.select.style.display="",this.select.removeAttribute("aria-hidden")}changeListen(e){this.listen=e,this.listen?this.connectObserver():this.disconnectObserver()}addSelectChangeListener(e){this.onSelectChange=e,this.addObserver(),this.connectObserver(),this.changeListen(!0)}removeSelectChangeListener(){this.changeListen(!1),this.onSelectChange=void 0}addValueChangeListener(e){this.onValueChange=e,this.select.addEventListener("change",this.valueChange.bind(this))}removeValueChangeListener(){this.onValueChange=void 0,this.select.removeEventListener("change",this.valueChange.bind(this))}valueChange(e){this.onValueChange&&this.onValueChange(this.getSelectedValues())}observeWrapper(e){this.onSelectChange&&this.onSelectChange(this.getData())}addObserver(){this.observer&&(this.disconnectObserver(),this.observer=null),this.observer=new MutationObserver(this.observeWrapper)}connectObserver(){this.observer&&this.observer.observe(this.select,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}disconnectObserver(){this.observer&&this.observer.disconnect()}getData(){let e=[];const t=this.select.childNodes;for(const s of t)"OPTGROUP"===s.nodeName&&e.push(this.getDataFromOptgroup(s)),"OPTION"===s.nodeName&&e.push(this.getDataFromOption(s));return e}getDataFromOptgroup(e){let t={id:"",label:e.label,options:[]};const s=e.childNodes;for(const e of s)"OPTION"===e.nodeName&&t.options.push(this.getDataFromOption(e));return t}getSelectedValues(){let e=[];const t=this.select.childNodes;for(const s of t){if("OPTGROUP"===s.nodeName){const t=s.childNodes;for(const s of t)if("OPTION"===s.nodeName){const t=s;t.selected&&e.push(t.value)}}if("OPTION"===s.nodeName){const t=s;t.selected&&e.push(t.value)}}return e}getDataFromOption(t){return{id:!!t.dataset&&t.dataset.id||e(),value:t.value,text:t.text,html:t.innerHTML,selected:t.selected,display:"none"!==t.style.display,disabled:t.disabled,mandatory:!!t.dataset&&"true"===t.dataset.mandatory,placeholder:"true"===t.dataset.placeholder,class:t.className,style:t.style.cssText,data:t.dataset}}setSelected(e){const t=this.select.childNodes;for(const s of t){if("OPTGROUP"===s.nodeName){const t=s.childNodes;for(const s of t)if("OPTION"===s.nodeName){const t=s;t.selected=e.includes(t.value)}}if("OPTION"===s.nodeName){const t=s;t.selected=e.includes(t.value)}}}updateSelect(e,t,s){this.changeListen(!1),e&&(this.select.id=e),t&&(this.select.style.cssText=t),s&&(this.select.className="",s.forEach((e=>{""!==e.trim()&&this.select.classList.add(e.trim())}))),this.changeListen(!0)}updateOptions(e){this.changeListen(!1),this.select.innerHTML="";for(const t of e)t instanceof s&&this.select.appendChild(this.createOptgroup(t)),t instanceof i&&this.select.appendChild(this.createOption(t));this.changeListen(!0)}createOptgroup(e){const t=document.createElement("optgroup");if(t.id=e.id,t.label=e.label,e.options)for(const s of e.options)t.appendChild(this.createOption(s));return t}createOption(e){const t=document.createElement("option");return t.value=""!==e.value?e.value:e.text,t.innerHTML=e.html||e.text,e.selected&&(t.selected=e.selected),e.disabled&&(t.disabled=!0),!1===e.display&&(t.style.display="none"),e.placeholder&&t.setAttribute("data-placeholder","true"),e.mandatory&&t.setAttribute("data-mandatory","true"),e.class&&e.class.split(" ").forEach((e=>{t.classList.add(e)})),e.data&&"object"==typeof e.data&&Object.keys(e.data).forEach((s=>{t.setAttribute("data-"+function(e){const t=e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase()));return e[0]===e[0].toUpperCase()?t.substring(1):t}(s),e.data[s])})),t}destroy(){this.changeListen(!1),this.disconnectObserver(),this.removeSelectChangeListener(),this.removeValueChangeListener(),this.showUI()}}class o{constructor(t){this.id="",this.style="",this.class=[],this.isMultiple=!1,this.isOpen=!1,this.triggerFocus=!0,this.intervalMove=null,this.mainHeight=30,this.contentHeight=0,t||(t={}),this.id="ss-"+e(),this.style=t.style||"",this.class=t.class||[],this.isEnabled=void 0===t.isEnabled||t.isEnabled,this.alwaysOpen=void 0!==t.alwaysOpen&&t.alwaysOpen,this.showSearch=void 0===t.showSearch||t.showSearch,this.searchPlaceholder=t.searchPlaceholder||"Search",this.searchText=t.searchText||"No Results",this.searchingText=t.searchingText||"Searching...",this.searchHighlight=void 0!==t.searchHighlight&&t.searchHighlight,this.closeOnSelect=void 0===t.closeOnSelect||t.closeOnSelect,this.contentLocation=t.contentLocation||document.body,this.contentPosition=t.contentPosition||"absolute",this.openPosition=t.openPosition||"auto",this.placeholderText=t.placeholderText||"Select Value",this.allowDeselect=void 0!==t.allowDeselect&&t.allowDeselect,this.hideSelected=void 0!==t.hideSelected&&t.hideSelected,this.showOptionTooltips=void 0!==t.showOptionTooltips&&t.showOptionTooltips,this.selectByGroup=void 0!==t.selectByGroup&&t.selectByGroup,this.minSelected=t.minSelected||0,this.maxSelected=t.maxSelected||1e3,this.timeoutDelay=t.timeoutDelay||200}}return class{constructor(e){if(this.events={search:void 0,searchFilter:(e,t)=>-1!==e.text.toLowerCase().indexOf(t.toLowerCase()),addable:void 0,beforeChange:void 0,afterChange:void 0,beforeOpen:void 0,afterOpen:void 0,beforeClose:void 0,afterClose:void 0},this.windowResize=t((()=>{this.settings.isOpen&&this.render.moveContent()})),this.windowScroll=t((()=>{this.settings.isOpen&&("down"!==this.settings.openPosition?"up"!==this.settings.openPosition?"relative"===this.settings.contentPosition?this.render.moveContentBelow():"up"===this.render.putContent(this.render.content.main,this.settings.isOpen)?this.render.moveContentAbove():this.render.moveContentBelow():this.render.moveContentAbove():this.render.moveContentBelow())})),this.documentClick=e=>{this.settings.isOpen&&e.target&&!function(e,t){function s(e,s){return s&&e&&e.classList&&e.classList.contains(s)||s&&e&&e.dataset&&e.dataset.id&&e.dataset.id===t?e:null}return s(e,t)||function e(t,i){return t&&t!==document?s(t,i)?t:e(t.parentNode,i):null}(e,t)}(e.target,this.settings.id)&&this.close()},this.selectEl="string"==typeof e.select?document.querySelector(e.select):e.select,!this.selectEl)return void(e.events&&e.events.error&&e.events.error(new Error("Could not find select element")));if("SELECT"!==this.selectEl.tagName)return void(e.events&&e.events.error&&e.events.error(new Error("Element isnt of type select")));this.selectEl.dataset.ssid&&this.destroy(),this.settings=new o(e.settings);for(const t in e.events)e.events.hasOwnProperty(t)&&(this.events[t]=e.events[t]);this.settings.isMultiple=this.selectEl.multiple,this.settings.style=this.selectEl.style.cssText,this.settings.class=this.selectEl.className.split(" "),this.select=new l(this.selectEl),this.select.updateSelect(this.settings.id,this.settings.style,this.settings.class),this.select.hideUI(),this.select.addSelectChangeListener((e=>{this.setData(e)})),this.select.addValueChangeListener((e=>{this.setSelected(e)})),this.store=new n(this.settings.isMultiple?"multiple":"single",e.data?e.data:this.select.getData()),e.data&&this.select.updateOptions(this.store.getData());const s={open:this.open.bind(this),close:this.close.bind(this),addable:this.events.addable?this.events.addable:void 0,setSelected:this.setSelected.bind(this),addOption:this.addOption.bind(this),search:this.search.bind(this),beforeChange:this.events.beforeChange,afterChange:this.events.afterChange};this.render=new a(this.settings,this.store,s),this.selectEl.parentNode&&this.selectEl.parentNode.insertBefore(this.render.main.main,this.selectEl.nextSibling),document.addEventListener("click",this.documentClick),window.addEventListener("resize",this.windowResize,!1),"auto"===this.settings.openPosition&&window.addEventListener("scroll",this.windowScroll,!1),this.settings.isEnabled||this.disable(),this.settings.alwaysOpen&&this.open(),this.selectEl.slim=this}enable(){this.settings.isEnabled=!0,this.select.enable(),this.render.enable()}disable(){this.settings.isEnabled=!1,this.select.disable(),this.render.disable()}getData(){return this.store.getData()}setData(e){const t=this.store.validateDataArray(e);if(t)return void(this.events.error&&this.events.error(t));this.store.setData(e);const s=this.store.getData();this.select.updateOptions(s),this.render.renderValues(),this.render.renderOptions(s)}getSelected(){return this.store.getSelected()}setSelected(e){this.store.setSelectedBy("value",Array.isArray(e)?e:[e]);const t=this.store.getData();this.select.updateOptions(t),this.render.renderValues(),this.render.renderOptions(t)}addOption(e){this.store.addOption(e);const t=this.store.getData();this.select.updateOptions(t),this.render.renderValues(),this.render.renderOptions(t)}open(){this.settings.isEnabled&&!this.settings.isOpen&&(this.events.beforeOpen&&this.events.beforeOpen(),this.render.open(),this.settings.showSearch&&this.render.searchFocus(!1),setTimeout((()=>{this.events.afterOpen&&this.events.afterOpen(),this.settings.isOpen=!0}),this.settings.timeoutDelay),this.settings.intervalMove&&clearInterval(this.settings.intervalMove),this.settings.intervalMove=setInterval(this.render.moveContent.bind(this.render),500))}close(){this.settings.isOpen&&!this.settings.alwaysOpen&&(this.events.beforeClose&&this.events.beforeClose(),this.render.close(),this.search(""),this.render.mainFocus(!1),setTimeout((()=>{this.events.afterClose&&this.events.afterClose(),this.settings.isOpen=!1}),this.settings.timeoutDelay),this.settings.intervalMove&&clearInterval(this.settings.intervalMove))}search(e){if(this.render.content.search.input.value!==e&&(this.render.content.search.input.value=e),!this.events.search)return void this.render.renderOptions(""===e?this.store.getData():this.store.search(e,this.events.searchFilter));this.render.renderSearching();const t=this.events.search(e,this.store.getSelectedOptions());t instanceof Promise?t.then((e=>{this.render.renderOptions(this.store.partialToFullData(e))})).catch((e=>{this.render.renderError("string"==typeof e?e:e.message)})):Array.isArray(t)?this.render.renderOptions(this.store.partialToFullData(t)):this.render.renderError("Search event must return a promise or an array of data")}destroy(){document.removeEventListener("click",this.documentClick),window.removeEventListener("resize",this.windowResize,!1),"auto"===this.settings.openPosition&&window.removeEventListener("scroll",this.windowScroll,!1),this.store.setData([]),this.render.destroy(),this.select.destroy()}}}));
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).SlimSelect=t()}(this,(function(){"use strict";function e(){return Math.random().toString(36).substring(2,10)}function t(e,t=50,s=!1){let i;return function(...n){const l=self,a=s&&!i;clearTimeout(i),i=setTimeout((()=>{i=null,s||e.apply(l,n)}),t),a&&e.apply(l,n)}}class s{constructor(t){if(this.id=t.id&&""!==t.id?t.id:e(),this.label=t.label||"",this.selectAll=void 0!==t.selectAll&&t.selectAll,this.closable=t.closable||"off",this.options=[],t.options)for(const e of t.options)this.options.push(new i(e))}}class i{constructor(t){this.id=t.id&&""!==t.id?t.id:e(),this.value=void 0===t.value?t.text:t.value,this.text=t.text||"",this.html=t.html||"",this.selected=void 0!==t.selected&&t.selected,this.display=void 0===t.display||t.display,this.disabled=void 0!==t.disabled&&t.disabled,this.mandatory=void 0!==t.mandatory&&t.mandatory,this.placeholder=void 0!==t.placeholder&&t.placeholder,this.class=t.class||"",this.style=t.style||"",this.data=t.data||{}}}class n{constructor(e,t){this.selectType="single",this.data=[],this.selectType=e,this.setData(t)}validateDataArray(e){if(!Array.isArray(e))return new Error("Data must be an array");for(let t of e){if(!(t instanceof s||"label"in t))return t instanceof i||"text"in t?this.validateOption(t):new Error("Data object must be a valid optgroup or option");if(!("label"in t))return new Error("Optgroup must have a label");if("options"in t&&t.options)for(let e of t.options)return this.validateOption(e)}return null}validateOption(e){return"text"in e?null:new Error("Option must have a text")}partialToFullData(e){let t=[];return e.forEach((e=>{if(e instanceof s||"label"in e){let n=[];"options"in e&&e.options&&e.options.forEach((e=>{n.push(new i(e))})),n.length>0&&t.push(new s(e))}(e instanceof i||"text"in e)&&t.push(new i(e))})),t}setData(e){this.data=this.partialToFullData(e),"single"===this.selectType&&this.setSelectedBy("value",this.getSelected())}getData(){return this.filter(null,!0)}getDataOptions(){return this.filter(null,!1)}addOption(e){this.setData(this.getData().concat(new i(e)))}setSelectedBy(e,t){let n=null,l=!1;for(let a of this.data){if(a instanceof s)for(let s of a.options)n||(n=s),s.selected=!l&&t.includes(s[e]),s.selected&&"single"===this.selectType&&(l=!0);a instanceof i&&(n||(n=a),a.selected=!l&&t.includes(a[e]),a.selected&&"single"===this.selectType&&(l=!0))}"single"===this.selectType&&n&&!l&&(n.selected=!0)}getSelected(){let e=this.getSelectedOptions(),t=[];return e.forEach((e=>{t.push(e.value)})),t}getSelectedOptions(){return this.filter((e=>e.selected),!1)}getSelectedIDs(){let e=this.getSelectedOptions(),t=[];return e.forEach((e=>{t.push(e.id)})),t}getOptgroupByID(e){for(let t of this.data)if(t instanceof s&&t.id===e)return t;return null}getOptionByID(e){let t=this.filter((t=>t.id===e),!1);return t.length?t[0]:null}search(e,t){return""===(e=e.trim())?this.getData():this.filter((s=>t(s,e)),!0)}filter(e,t){const n=[];return this.data.forEach((l=>{if(l instanceof s)if(t){let t=[];l.options.forEach((s=>{e&&!e(s)||t.push(new i(s))})),t.length>0&&n.push(new s(l))}else l.options.forEach((t=>{e&&e(t)&&n.push(t)}));l instanceof i&&(e&&!e(l)||n.push(new i(l)))})),n}}class l{constructor(e,t,s){this.classes={main:"ss-main",placeholder:"ss-placeholder",values:"ss-values",single:"ss-single",value:"ss-value",valueText:"ss-value-text",valueDelete:"ss-value-delete",valueOut:"ss-value-out",deselect:"ss-deselect",deselectPath:"M10,10 L90,90 M10,90 L90,10",arrow:"ss-arrow",arrowClose:"M10,30 L50,70 L90,30",arrowOpen:"M10,70 L50,30 L90,70",content:"ss-content",openAbove:"ss-open-above",openBelow:"ss-open-below",search:"ss-search",searchHighlighter:"ss-search-highlight",searching:"ss-searching",addable:"ss-addable",addablePath:"M50,10 L50,90 M10,50 L90,50",list:"ss-list",optgroup:"ss-optgroup",optgroupLabel:"ss-optgroup-label",optgroupLabelText:"ss-optgroup-label-text",optgroupActions:"ss-optgroup-actions",optgroupSelectAll:"ss-selectall",optgroupSelectAllBox:"M60,10 L10,10 L10,90 L90,90 L90,50",optgroupSelectAllCheck:"M30,45 L50,70 L90,10",optgroupClosable:"ss-closable",option:"ss-option",optionDelete:"M10,10 L90,90 M10,90 L90,10",highlighted:"ss-highlighted",open:"ss-open",close:"ss-close",selected:"ss-selected",error:"ss-error",disabled:"ss-disabled",hide:"ss-hide"},this.store=t,this.settings=e,this.callbacks=s,this.main=this.mainDiv(),this.content=this.contentDiv(),this.settings.contentLocation.appendChild(this.content.main)}enable(){this.main.main.classList.remove(this.classes.disabled),this.content.search.input.disabled=!1}disable(){this.main.main.classList.add(this.classes.disabled),this.content.search.input.disabled=!0}open(){this.main.arrow.path.setAttribute("d",this.classes.arrowOpen),this.main.main.classList.add("up"===this.settings.openPosition?this.classes.openAbove:this.classes.openBelow),this.moveContent(),this.renderOptions(this.store.getData()),"relative"===this.settings.contentPosition?this.moveContentBelow():"up"===this.settings.openPosition.toLowerCase()?this.moveContentAbove():"down"===this.settings.openPosition.toLowerCase()?this.moveContentBelow():"up"===this.putContent(this.content.main,this.settings.isOpen)?this.moveContentAbove():this.moveContentBelow();const e=this.store.getSelectedOptions();if(e.length){const t=e[e.length-1].id,s=this.content.list.querySelector('[data-id="'+t+'"]');s&&this.ensureElementInView(this.content.list,s)}}close(){this.main.main.classList.remove(this.classes.openAbove),this.main.main.classList.remove(this.classes.openBelow),this.content.main.classList.remove(this.classes.openAbove),this.content.main.classList.remove(this.classes.openBelow),this.main.arrow.path.setAttribute("d",this.classes.arrowClose)}mainDiv(){const e=document.createElement("div");if(e.tabIndex=0,e.style.cssText=""!==this.settings.style?this.settings.style:"",e.className="",e.classList.add(this.settings.id),e.classList.add(this.classes.main),this.settings.class)for(const t of this.settings.class)""!==t.trim()&&e.classList.add(t.trim());e.onfocus=()=>{this.settings.triggerFocus&&this.callbacks.open()},e.onkeydown=e=>{switch(e.key){case"ArrowUp":case"ArrowDown":return this.callbacks.open(),"ArrowDown"===e.key?this.highlight("down"):this.highlight("up"),!1;case"Tab":return this.callbacks.close(),!0;case"Enter":const t=this.content.list.querySelector("."+this.classes.highlighted);return t&&t.click(),!1;case"Escape":return this.callbacks.close(),!1}},e.onclick=e=>{this.settings.isEnabled&&(this.settings.isOpen?this.callbacks.close():this.callbacks.open())};const t=document.createElement("div");t.classList.add(this.classes.values),e.appendChild(t);const s=document.createElement("div");s.classList.add(this.classes.deselect),this.settings.allowDeselect&&!this.settings.isMultiple||s.classList.add(this.classes.hide),s.onclick=e=>{if(e.stopPropagation(),!this.settings.isEnabled)return;let t=!0;const s=this.store.getSelectedOptions(),i=[];this.callbacks.beforeChange&&(t=!0===this.callbacks.beforeChange(i,s)),t&&(this.callbacks.setSelected([""]),this.settings.closeOnSelect&&this.callbacks.close(),this.callbacks.afterChange&&this.callbacks.afterChange(i))};const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("viewBox","0 0 100 100");const n=document.createElementNS("http://www.w3.org/2000/svg","path");n.setAttribute("d",this.classes.deselectPath),i.appendChild(n),s.appendChild(i),e.appendChild(s);const l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.classList.add(this.classes.arrow),l.setAttribute("viewBox","0 0 100 100");const a=document.createElementNS("http://www.w3.org/2000/svg","path");return a.setAttribute("d",this.classes.arrowClose),this.settings.alwaysOpen&&l.classList.add(this.classes.hide),l.appendChild(a),e.appendChild(l),{main:e,values:t,deselect:{main:s,svg:i,path:n},arrow:{main:l,path:a}}}mainFocus(e){e||(this.settings.triggerFocus=!1),this.main.main.focus({preventScroll:!0}),this.settings.triggerFocus=!0}placeholder(){const e=this.store.filter((e=>e.placeholder),!1);let t=this.settings.placeholderText;e.length&&(""!==e[0].html?t=e[0].html:""!==e[0].text&&(t=e[0].text));const s=document.createElement("div");return s.classList.add(this.classes.placeholder),s.innerHTML=t,s}renderValues(){this.settings.isMultiple?this.renderMultipleValues():this.renderSingleValue()}renderSingleValue(){const e=this.store.filter((e=>e.selected&&!e.placeholder),!1),t=e.length>0?e[0]:null;if(t){const e=document.createElement("div");e.classList.add(this.classes.single),e.innerHTML=t.html?t.html:t.text,this.main.values.innerHTML=e.outerHTML}else this.main.values.innerHTML=this.placeholder().outerHTML;this.settings.allowDeselect&&e.length?this.main.deselect.main.classList.remove(this.classes.hide):this.main.deselect.main.classList.add(this.classes.hide)}renderMultipleValues(){let e=this.main.values.childNodes,t=this.store.filter((e=>e.selected&&e.display),!1);if(0===t.length)return void(this.main.values.innerHTML=this.placeholder().outerHTML);{const e=this.main.values.querySelector("."+this.classes.placeholder);e&&e.remove()}let s=[];for(let i=0;i<e.length;i++){const n=e[i],l=n.getAttribute("data-id");if(l){t.filter((e=>e.id===l),!1).length||s.push(n)}}for(const e of s)e.classList.add(this.classes.valueOut),setTimeout((()=>{this.main.values.removeChild(e)}),100);e=this.main.values.childNodes;for(let s=0;s<t.length;s++){let i=!0;for(let n=0;n<e.length;n++)t[s].id===String(e[n].dataset.id)&&(i=!1);i&&(0===e.length?this.main.values.appendChild(this.multipleValue(t[s])):0===s?this.main.values.insertBefore(this.multipleValue(t[s]),e[s]):e[s-1].insertAdjacentElement("afterend",this.multipleValue(t[s])))}}multipleValue(e){const t=document.createElement("div");t.classList.add(this.classes.value),t.dataset.id=e.id;const n=document.createElement("div");if(n.classList.add(this.classes.valueText),n.innerHTML=e.text,t.appendChild(n),!e.mandatory){const n=document.createElement("div");n.classList.add(this.classes.valueDelete),n.onclick=t=>{t.preventDefault(),t.stopPropagation();let n=!0;const l=this.store.getSelectedOptions(),a=l.filter((t=>t.selected&&t.id!==e.id),!0);if(!(this.settings.minSelected&&a.length<this.settings.minSelected)&&(this.callbacks.beforeChange&&(n=!0===this.callbacks.beforeChange(a,l)),n)){let e=[];for(const t of a){if(t instanceof s)for(const s of t.options)e.push(s.value);t instanceof i&&e.push(t.value)}this.callbacks.setSelected(e),this.settings.closeOnSelect&&this.callbacks.close(),this.callbacks.afterChange&&this.callbacks.afterChange(a)}};const l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.setAttribute("viewBox","0 0 100 100");const a=document.createElementNS("http://www.w3.org/2000/svg","path");a.setAttribute("d",this.classes.optionDelete),l.appendChild(a),n.appendChild(l),t.appendChild(n)}return t}contentDiv(){const e=document.createElement("div");if(e.classList.add(this.classes.content),e.dataset.id=this.settings.id,""!==this.settings.style&&(e.style.cssText=this.settings.style),"relative"===this.settings.contentPosition&&e.classList.add("ss-"+this.settings.contentPosition),this.settings.class.length)for(const t of this.settings.class)""!==t.trim()&&e.classList.add(t.trim());const t=this.searchDiv();e.appendChild(t.main);const s=this.listDiv();return e.appendChild(s),{main:e,search:t,list:s}}moveContent(){if("relative"===this.settings.contentPosition)return;const e=this.main.main.getBoundingClientRect();this.content.main.style.top=e.top+e.height+window.scrollY+"px",this.content.main.style.left=e.left+window.scrollX+"px",this.content.main.style.width=e.width+"px"}searchDiv(){const e=document.createElement("div"),s=document.createElement("input"),n=document.createElement("div");e.classList.add(this.classes.search);const l={main:e,input:s};if(this.settings.showSearch||(e.classList.add(this.classes.hide),s.readOnly=!0),s.type="search",s.placeholder=this.settings.searchPlaceholder,s.tabIndex=-1,s.setAttribute("aria-label",this.settings.searchPlaceholder),s.setAttribute("autocapitalize","off"),s.setAttribute("autocomplete","off"),s.setAttribute("autocorrect","off"),s.oninput=t((e=>{this.callbacks.search(e.target.value)}),100),s.onkeydown=e=>{switch(e.key){case"ArrowUp":case"ArrowDown":return this.callbacks.open(),"ArrowDown"===e.key?this.highlight("down"):this.highlight("up"),!1;case"Tab":return this.callbacks.close(),!0;case"Escape":return this.callbacks.close(),!1;case"Enter":if(this.callbacks.addable&&e.ctrlKey)n.click();else{const e=this.content.list.querySelector("."+this.classes.highlighted);e&&e.click()}return!1}},s.onfocus=()=>{this.settings.isOpen||this.callbacks.open()},e.appendChild(s),this.callbacks.addable){n.classList.add(this.classes.addable);const t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttribute("viewBox","0 0 100 100");const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",this.classes.addablePath),t.appendChild(s),n.appendChild(t),n.onclick=e=>{if(e.preventDefault(),e.stopPropagation(),!this.callbacks.addable)return;const t=this.content.search.input.value.trim();if(""===t)return void this.content.search.input.focus();const s=e=>{let t=new i(e);if(this.callbacks.addOption(t),this.settings.isMultiple){let e=this.store.getSelected();e.push(t.value),this.callbacks.setSelected(e)}else this.callbacks.setSelected([t.value]);this.callbacks.search(""),this.settings.closeOnSelect&&setTimeout((()=>{this.callbacks.close()}),100)},n=this.callbacks.addable(t);n instanceof Promise?n.then((e=>{s("string"==typeof e?{text:e,value:e}:e)})):s("string"==typeof n?{text:n,value:n}:n)},e.appendChild(n),l.addable={main:n,svg:t,path:s}}return l}searchFocus(e){e||(this.settings.triggerFocus=!1),this.content.search.input.focus(),this.settings.triggerFocus=!0}getOptions(e=!1,t=!1,s=!1){let i="."+this.classes.option;return e&&(i+=":not(."+this.classes.placeholder+")"),t&&(i+=":not(."+this.classes.disabled+")"),s&&(i+=":not(."+this.classes.hide+")"),Array.from(this.content.list.querySelectorAll(i))}highlight(e){const t=this.getOptions(!0,!0,!0);if(0!==t.length)if(1!==t.length||t[0].classList.contains(this.classes.highlighted)){for(let s=0;s<t.length;s++)if(t[s].classList.contains(this.classes.highlighted)){const i=t[s];i.classList.remove(this.classes.highlighted);const n=i.parentElement;if(n&&n.classList.contains(this.classes.open)){const e=n.querySelector("."+this.classes.optgroupLabel);e&&e.click()}let l=t["down"===e?s+1<t.length?s+1:0:s-1>=0?s-1:t.length-1];l.classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,l);const a=l.parentElement;if(a&&a.classList.contains(this.classes.close)){const e=a.querySelector("."+this.classes.optgroupLabel);e&&e.click()}return}t["down"===e?0:t.length-1].classList.add(this.classes.highlighted),this.ensureElementInView(this.content.list,t["down"===e?0:t.length-1])}else t[0].classList.add(this.classes.highlighted)}listDiv(){const e=document.createElement("div");return e.classList.add(this.classes.list),e.setAttribute("role","listbox"),e}renderError(e){this.content.list.innerHTML="";const t=document.createElement("div");t.classList.add(this.classes.error),t.textContent=e,this.content.list.appendChild(t)}renderSearching(){this.content.list.innerHTML="";const e=document.createElement("div");e.classList.add(this.classes.searching),e.textContent=this.settings.searchingText,this.content.list.appendChild(e)}renderOptions(e){if(this.content.list.innerHTML="",0===e.length){const e=document.createElement("div");return e.classList.add(this.classes.option),e.classList.add(this.classes.disabled),e.innerHTML=this.settings.searchText,void this.content.list.appendChild(e)}for(const t of e){if(t instanceof s){const e=document.createElement("div");e.classList.add(this.classes.optgroup);const s=document.createElement("div");s.classList.add(this.classes.optgroupLabel),e.appendChild(s);const i=document.createElement("div");i.classList.add(this.classes.optgroupLabelText),i.textContent=t.label,s.appendChild(i);const n=document.createElement("div");if(n.classList.add(this.classes.optgroupActions),s.appendChild(n),this.settings.isMultiple&&t.selectAll){const e=document.createElement("div");e.classList.add(this.classes.optgroupSelectAll);let s=!0;for(const e of t.options)if(!e.selected){s=!1;break}s&&e.classList.add(this.classes.selected);const i=document.createElement("span");i.textContent="Select All",e.appendChild(i);const l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.setAttribute("viewBox","0 0 100 100"),e.appendChild(l);const a=document.createElementNS("http://www.w3.org/2000/svg","path");a.setAttribute("d",this.classes.optgroupSelectAllBox),l.appendChild(a);const o=document.createElementNS("http://www.w3.org/2000/svg","path");o.setAttribute("d",this.classes.optgroupSelectAllCheck),l.appendChild(o),e.addEventListener("click",(e=>{e.preventDefault(),e.stopPropagation();const i=this.store.getSelected();if(s){const e=i.filter((e=>{for(const s of t.options)if(e===s.value)return!1;return!0}));this.callbacks.setSelected(e)}else{const e=i.concat(t.options.map((e=>e.value)));this.callbacks.setSelected(e)}})),n.appendChild(e)}if("off"!==t.closable){const i=document.createElement("div");i.classList.add(this.classes.optgroupClosable);const l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.setAttribute("viewBox","0 0 100 100"),l.classList.add(this.classes.arrow),i.appendChild(l);const a=document.createElementNS("http://www.w3.org/2000/svg","path");a.setAttribute("d",this.classes.arrow),l.appendChild(a),"open"===t.closable?(e.classList.add(this.classes.open),a.setAttribute("d",this.classes.arrowOpen)):"close"===t.closable&&(e.classList.add(this.classes.close),a.setAttribute("d",this.classes.arrowClose)),s.addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation(),e.classList.contains(this.classes.close)?(e.classList.remove(this.classes.close),e.classList.add(this.classes.open),a.setAttribute("d",this.classes.arrowOpen)):(e.classList.remove(this.classes.open),e.classList.add(this.classes.close),a.setAttribute("d",this.classes.arrowClose))})),n.appendChild(i)}e.appendChild(s);for(const s of t.options)e.appendChild(this.option(s));this.content.list.appendChild(e)}t instanceof i&&this.content.list.appendChild(this.option(t))}}option(e){if(e.placeholder){const e=document.createElement("div");return e.classList.add(this.classes.option),e.classList.add(this.classes.hide),e}const t=document.createElement("div");if(t.dataset.id=e.id,t.classList.add(this.classes.option),t.setAttribute("role","option"),e.class&&e.class.split(" ").forEach((e=>{t.classList.add(e)})),e.style&&(t.style.cssText=e.style),this.settings.searchHighlight&&""!==this.content.search.input.value.trim()){const s=""!==e.html?e.html:e.text;t.innerHTML=this.highlightText(s,this.content.search.input.value,this.classes.searchHighlighter)}else""!==e.html?t.innerHTML=e.html:t.textContent=e.text;return this.settings.showOptionTooltips&&t.textContent&&t.setAttribute("title",t.textContent),(e.selected&&!this.settings.allowDeselect||e.disabled&&!this.settings.allowDeselect)&&t.classList.add(this.classes.disabled),e.selected&&this.settings.hideSelected&&t.classList.add(this.classes.hide),e.selected?t.classList.add(this.classes.selected):t.classList.remove(this.classes.selected),t.addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation();const s=this.store.getSelected(),i=t.currentTarget,n=String(i.dataset.id);if(e.disabled||e.selected&&!this.settings.allowDeselect)return;if(this.settings.isMultiple&&Array.isArray(s)&&this.settings.maxSelected<=s.length)return;let l=!1;const a=this.store.getSelectedOptions();let o=[];this.settings.isMultiple&&(o=e.selected?a.filter((e=>e.id!==n)):a.concat(e)),this.settings.isMultiple||(o=e.selected?[]:[e]),this.callbacks.beforeChange||(l=!0),this.callbacks.beforeChange&&(l=!1!==this.callbacks.beforeChange(o,a)),l&&(this.store.getOptionByID(n)||this.callbacks.addOption(e),this.callbacks.setSelected(o.map((e=>e.value))),this.settings.closeOnSelect&&this.callbacks.close(),this.callbacks.afterChange&&this.callbacks.afterChange(o))})),t}destroy(){this.main.main.remove(),this.content.main.remove()}highlightText(e,t,s){let i=e;const n=new RegExp("("+t.trim()+")(?![^<]*>[^<>]*</)","i");if(!e.match(n))return e;const l=e.match(n).index,a=l+e.match(n)[0].toString().length,o=e.substring(l,a);return i=i.replace(n,`<mark class="${s}">${o}</mark>`),i}moveContentAbove(){const e=this.main.main.offsetHeight+this.content.main.offsetHeight-1;this.content.main.style.margin="-"+e+"px 0px 0px 0px",this.content.main.style.transformOrigin="center bottom",this.main.main.classList.remove(this.classes.openBelow),this.main.main.classList.add(this.classes.openAbove),this.content.main.classList.remove(this.classes.openBelow),this.content.main.classList.add(this.classes.openAbove)}moveContentBelow(){this.content.main.style.margin="-1px 0px 0px 0px",this.content.main.style.transformOrigin="center top",this.main.main.classList.remove(this.classes.openAbove),this.main.main.classList.add(this.classes.openBelow),this.content.main.classList.remove(this.classes.openAbove),this.content.main.classList.add(this.classes.openBelow)}ensureElementInView(e,t){const s=e.scrollTop+e.offsetTop,i=s+e.clientHeight,n=t.offsetTop,l=n+t.clientHeight;n<s?e.scrollTop-=s-n:l>i&&(e.scrollTop+=l-i)}putContent(e,t){const s=e.offsetHeight,i=e.getBoundingClientRect(),n=t?i.top:i.top-s,l=t?i.bottom:i.bottom+s;return n<=0?"down":l>=window.innerHeight?"up":"down"}}class a{constructor(e){this.listen=!1,this.observer=null,this.select=e}enable(){this.disconnectObserver(),this.select.disabled=!1,this.connectObserver()}disable(){this.disconnectObserver(),this.select.disabled=!0,this.connectObserver()}hideUI(){this.select.tabIndex=-1,this.select.style.display="none",this.select.setAttribute("aria-hidden","true")}showUI(){this.select.removeAttribute("tabindex"),this.select.style.display="",this.select.removeAttribute("aria-hidden")}changeListen(e){this.listen=e,this.listen?this.connectObserver():this.disconnectObserver()}addSelectChangeListener(e){this.onSelectChange=e,this.addObserver(),this.connectObserver(),this.changeListen(!0)}removeSelectChangeListener(){this.changeListen(!1),this.onSelectChange=void 0}addValueChangeListener(e){this.onValueChange=e,this.select.addEventListener("change",this.valueChange.bind(this))}removeValueChangeListener(){this.onValueChange=void 0,this.select.removeEventListener("change",this.valueChange.bind(this))}valueChange(e){this.onValueChange&&this.onValueChange(this.getSelectedValues())}observeWrapper(e){this.onSelectChange&&(this.changeListen(!1),this.onSelectChange(this.getData()),this.changeListen(!0))}addObserver(){this.observer&&(this.disconnectObserver(),this.observer=null),this.observer=new MutationObserver(this.observeWrapper.bind(this))}connectObserver(){this.observer&&this.observer.observe(this.select,{childList:!0})}disconnectObserver(){this.observer&&this.observer.disconnect()}getData(){let e=[];const t=this.select.childNodes;for(const s of t)"OPTGROUP"===s.nodeName&&e.push(this.getDataFromOptgroup(s)),"OPTION"===s.nodeName&&e.push(this.getDataFromOption(s));return e}getDataFromOptgroup(e){let t={id:!!e.dataset&&e.dataset.id||"",label:e.label,selectAll:!!e.dataset&&"true"===e.dataset.selectall,closable:e.dataset?e.dataset.closable:"off",options:[]};const s=e.childNodes;for(const e of s)"OPTION"===e.nodeName&&t.options.push(this.getDataFromOption(e));return t}getDataFromOption(e){return{id:!!e.dataset&&e.dataset.id||"",value:e.value,text:e.text,html:e.innerHTML,selected:e.selected,display:"none"!==e.style.display,disabled:e.disabled,mandatory:!!e.dataset&&"true"===e.dataset.mandatory,placeholder:"true"===e.dataset.placeholder,class:e.className,style:e.style.cssText,data:e.dataset}}getSelectedValues(){let e=[];const t=this.select.childNodes;for(const s of t){if("OPTGROUP"===s.nodeName){const t=s.childNodes;for(const s of t)if("OPTION"===s.nodeName){const t=s;t.selected&&e.push(t.value)}}if("OPTION"===s.nodeName){const t=s;t.selected&&e.push(t.value)}}return e}setSelected(e){const t=this.select.childNodes;for(const s of t){if("OPTGROUP"===s.nodeName){const t=s.childNodes;for(const s of t)if("OPTION"===s.nodeName){const t=s;t.selected=e.includes(t.value)}}if("OPTION"===s.nodeName){const t=s;t.selected=e.includes(t.value)}}}updateSelect(e,t,s){this.changeListen(!1),e&&(this.select.id=e),t&&(this.select.style.cssText=t),s&&(this.select.className="",s.forEach((e=>{""!==e.trim()&&this.select.classList.add(e.trim())}))),this.changeListen(!0)}updateOptions(e){this.changeListen(!1),this.select.innerHTML="";for(const t of e)t instanceof s&&this.select.appendChild(this.createOptgroup(t)),t instanceof i&&this.select.appendChild(this.createOption(t));this.changeListen(!0)}createOptgroup(e){const t=document.createElement("optgroup");if(t.id=e.id,t.label=e.label,e.selectAll&&(t.dataset.selectAll="true"),"off"!==e.closable&&(t.dataset.closable=e.closable),e.options)for(const s of e.options)t.appendChild(this.createOption(s));return t}createOption(e){const t=document.createElement("option");return t.value=""!==e.value?e.value:e.text,t.innerHTML=e.html||e.text,e.selected&&(t.selected=e.selected),e.disabled&&(t.disabled=!0),!1===e.display&&(t.style.display="none"),e.placeholder&&t.setAttribute("data-placeholder","true"),e.mandatory&&t.setAttribute("data-mandatory","true"),e.class&&e.class.split(" ").forEach((e=>{t.classList.add(e)})),e.data&&"object"==typeof e.data&&Object.keys(e.data).forEach((s=>{t.setAttribute("data-"+function(e){const t=e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase()));return e[0]===e[0].toUpperCase()?t.substring(1):t}(s),e.data[s])})),t}destroy(){this.changeListen(!1),this.disconnectObserver(),this.removeSelectChangeListener(),this.removeValueChangeListener(),this.showUI()}}class o{constructor(t){this.id="",this.style="",this.class=[],this.isMultiple=!1,this.isOpen=!1,this.triggerFocus=!0,this.intervalMove=null,t||(t={}),this.id="ss-"+e(),this.style=t.style||"",this.class=t.class||[],this.isEnabled=void 0===t.isEnabled||t.isEnabled,this.alwaysOpen=void 0!==t.alwaysOpen&&t.alwaysOpen,this.showSearch=void 0===t.showSearch||t.showSearch,this.searchPlaceholder=t.searchPlaceholder||"Search",this.searchText=t.searchText||"No Results",this.searchingText=t.searchingText||"Searching...",this.searchHighlight=void 0!==t.searchHighlight&&t.searchHighlight,this.closeOnSelect=void 0===t.closeOnSelect||t.closeOnSelect,this.contentLocation=t.contentLocation||document.body,this.contentPosition=t.contentPosition||"absolute",this.openPosition=t.openPosition||"auto",this.placeholderText=t.placeholderText||"Select Value",this.allowDeselect=void 0!==t.allowDeselect&&t.allowDeselect,this.hideSelected=void 0!==t.hideSelected&&t.hideSelected,this.showOptionTooltips=void 0!==t.showOptionTooltips&&t.showOptionTooltips,this.minSelected=t.minSelected||0,this.maxSelected=t.maxSelected||1e3,this.timeoutDelay=t.timeoutDelay||200}}return class{constructor(e){if(this.events={search:void 0,searchFilter:(e,t)=>-1!==e.text.toLowerCase().indexOf(t.toLowerCase()),addable:void 0,beforeChange:void 0,afterChange:void 0,beforeOpen:void 0,afterOpen:void 0,beforeClose:void 0,afterClose:void 0},this.windowResize=t((()=>{this.settings.isOpen&&this.render.moveContent()})),this.windowScroll=t((()=>{this.settings.isOpen&&("down"!==this.settings.openPosition?"up"!==this.settings.openPosition?"relative"===this.settings.contentPosition?this.render.moveContentBelow():"up"===this.render.putContent(this.render.content.main,this.settings.isOpen)?this.render.moveContentAbove():this.render.moveContentBelow():this.render.moveContentAbove():this.render.moveContentBelow())})),this.documentClick=e=>{this.settings.isOpen&&e.target&&!function(e,t){function s(e,s){return s&&e&&e.classList&&e.classList.contains(s)||s&&e&&e.dataset&&e.dataset.id&&e.dataset.id===t?e:null}return s(e,t)||function e(t,i){return t&&t!==document?s(t,i)?t:e(t.parentNode,i):null}(e,t)}(e.target,this.settings.id)&&this.close()},this.selectEl="string"==typeof e.select?document.querySelector(e.select):e.select,!this.selectEl)return void(e.events&&e.events.error&&e.events.error(new Error("Could not find select element")));if("SELECT"!==this.selectEl.tagName)return void(e.events&&e.events.error&&e.events.error(new Error("Element isnt of type select")));this.selectEl.dataset.ssid&&this.destroy(),this.settings=new o(e.settings);for(const t in e.events)e.events.hasOwnProperty(t)&&(this.events[t]=e.events[t]);this.settings.isMultiple=this.selectEl.multiple,this.settings.style=this.selectEl.style.cssText,this.settings.class=this.selectEl.className.split(" "),this.select=new a(this.selectEl),this.select.updateSelect(this.settings.id,this.settings.style,this.settings.class),this.select.hideUI(),this.select.addSelectChangeListener((e=>{this.setData(e)})),this.select.addValueChangeListener((e=>{this.setSelected(e)})),this.store=new n(this.settings.isMultiple?"multiple":"single",e.data?e.data:this.select.getData()),e.data&&this.select.updateOptions(this.store.getData());const s={open:this.open.bind(this),close:this.close.bind(this),addable:this.events.addable?this.events.addable:void 0,setSelected:this.setSelected.bind(this),addOption:this.addOption.bind(this),search:this.search.bind(this),beforeChange:this.events.beforeChange,afterChange:this.events.afterChange};this.render=new l(this.settings,this.store,s),this.render.renderValues(),this.render.renderOptions(this.store.getData()),this.selectEl.parentNode&&this.selectEl.parentNode.insertBefore(this.render.main.main,this.selectEl.nextSibling),document.addEventListener("click",this.documentClick),window.addEventListener("resize",this.windowResize,!1),"auto"===this.settings.openPosition&&window.addEventListener("scroll",this.windowScroll,!1),this.settings.isEnabled||this.disable(),this.settings.alwaysOpen&&this.open(),this.selectEl.slim=this}enable(){this.settings.isEnabled=!0,this.select.enable(),this.render.enable()}disable(){this.settings.isEnabled=!1,this.select.disable(),this.render.disable()}getData(){return this.store.getData()}setData(e){const t=this.store.validateDataArray(e);if(t)return void(this.events.error&&this.events.error(t));this.store.setData(e);const s=this.store.getData();this.select.updateOptions(s),this.render.renderValues(),this.render.renderOptions(s)}getSelected(){return this.store.getSelected()}setSelected(e){this.store.setSelectedBy("value",Array.isArray(e)?e:[e]);const t=this.store.getData();this.select.updateOptions(t),this.render.renderValues(),this.render.renderOptions(t)}addOption(e){this.store.addOption(e);const t=this.store.getData();this.select.updateOptions(t),this.render.renderValues(),this.render.renderOptions(t)}open(){this.settings.isEnabled&&!this.settings.isOpen&&(this.events.beforeOpen&&this.events.beforeOpen(),this.render.open(),this.settings.showSearch&&this.render.searchFocus(!1),setTimeout((()=>{this.events.afterOpen&&this.events.afterOpen(),this.settings.isOpen=!0}),this.settings.timeoutDelay),this.settings.intervalMove&&clearInterval(this.settings.intervalMove),this.settings.intervalMove=setInterval(this.render.moveContent.bind(this.render),500))}close(){this.settings.isOpen&&!this.settings.alwaysOpen&&(this.events.beforeClose&&this.events.beforeClose(),this.render.close(),this.search(""),this.render.mainFocus(!1),setTimeout((()=>{this.events.afterClose&&this.events.afterClose(),this.settings.isOpen=!1}),this.settings.timeoutDelay),this.settings.intervalMove&&clearInterval(this.settings.intervalMove))}search(e){if(this.render.content.search.input.value!==e&&(this.render.content.search.input.value=e),!this.events.search)return void this.render.renderOptions(""===e?this.store.getData():this.store.search(e,this.events.searchFilter));this.render.renderSearching();const t=this.events.search(e,this.store.getSelectedOptions());t instanceof Promise?t.then((e=>{this.render.renderOptions(this.store.partialToFullData(e))})).catch((e=>{this.render.renderError("string"==typeof e?e:e.message)})):Array.isArray(t)?this.render.renderOptions(this.store.partialToFullData(t)):this.render.renderError("Search event must return a promise or an array of data")}destroy(){document.removeEventListener("click",this.documentClick),window.removeEventListener("resize",this.windowResize,!1),"auto"===this.settings.openPosition&&window.removeEventListener("scroll",this.windowScroll,!1),this.store.setData([]),this.render.destroy(),this.select.destroy()}}}));