slim-select 1.27.0 → 2.0.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 (155) hide show
  1. package/.nvmrc +1 -0
  2. package/.prettierrc +6 -0
  3. package/.vscode/extensions.json +3 -0
  4. package/.vscode/settings.json +15 -5
  5. package/README.md +2 -1
  6. package/dist/helper.d.ts +1 -4
  7. package/dist/index.d.ts +38 -58
  8. package/dist/render.d.ts +109 -0
  9. package/dist/select.d.ts +31 -20
  10. package/dist/settings.d.ts +33 -0
  11. package/dist/slimselect.cjs.js +2 -0
  12. package/dist/slimselect.cjs.js.map +1 -0
  13. package/dist/slimselect.css +1 -2
  14. package/dist/slimselect.css.map +1 -0
  15. package/dist/slimselect.es.js +2 -0
  16. package/dist/slimselect.es.js.map +1 -0
  17. package/dist/slimselect.global.js +2 -0
  18. package/dist/slimselect.global.js.map +1 -0
  19. package/dist/slimselect.js +2 -1956
  20. package/dist/slimselect.js.map +1 -0
  21. package/dist/slimselect.umd.js +2 -0
  22. package/dist/slimselect.umd.js.map +1 -0
  23. package/dist/store.d.ts +71 -0
  24. package/docs/assets/check-mark.svg +6 -0
  25. package/docs/assets/data.js +59 -0
  26. package/docs/assets/home.css +1 -0
  27. package/docs/assets/home.js +1 -0
  28. package/docs/assets/index.css +1 -0
  29. package/docs/assets/index.js +16 -0
  30. package/docs/assets/index2.js +274 -0
  31. package/docs/assets/index3.js +126 -0
  32. package/docs/assets/index4.js +60 -0
  33. package/docs/assets/install.js +34 -0
  34. package/docs/assets/selects.js +55 -0
  35. package/docs/index.html +18 -5
  36. package/docs.go +3 -1
  37. package/index.html +16 -0
  38. package/jest.config.js +7 -0
  39. package/package.json +39 -39
  40. package/src/docs/app.vue +185 -76
  41. package/src/docs/assets/scss/_variables.scss +26 -10
  42. package/src/docs/assets/scss/alert.scss +12 -0
  43. package/src/docs/assets/scss/animations.scss +5 -3
  44. package/src/docs/assets/scss/button.scss +21 -0
  45. package/src/docs/assets/scss/index.scss +8 -6
  46. package/src/docs/assets/scss/input.scss +2 -2
  47. package/src/docs/assets/scss/layout.scss +195 -65
  48. package/src/docs/assets/scss/misc.scss +144 -34
  49. package/src/docs/assets/scss/prism.scss +155 -153
  50. package/src/docs/env.d.ts +12 -0
  51. package/src/docs/images/check-mark.svg +6 -0
  52. package/src/docs/images/chrome.svg +22 -0
  53. package/src/docs/images/firefox.svg +58 -0
  54. package/src/docs/images/github.png +0 -0
  55. package/src/docs/images/ie.svg +11 -0
  56. package/src/docs/images/npm.png +0 -0
  57. package/src/docs/images/opera.svg +15 -0
  58. package/src/docs/images/safari.svg +22 -0
  59. package/src/docs/main.ts +27 -0
  60. package/src/docs/pages/data.vue +130 -0
  61. package/src/docs/pages/events/addable.vue +79 -0
  62. package/src/docs/pages/events/before_after_change.vue +140 -0
  63. package/src/docs/pages/events/before_after_open_close.vue +122 -0
  64. package/src/docs/pages/events/error.vue +59 -0
  65. package/src/docs/pages/events/index.vue +33 -0
  66. package/src/docs/pages/events/search.vue +154 -0
  67. package/src/docs/pages/events/search_filter.vue +45 -0
  68. package/src/docs/pages/home.vue +96 -116
  69. package/src/docs/pages/install.vue +47 -74
  70. package/src/docs/pages/methods/destroy.vue +66 -0
  71. package/src/docs/pages/methods/enable_disable.vue +70 -0
  72. package/src/docs/pages/methods/get_data.vue +81 -0
  73. package/src/docs/pages/methods/get_selected.vue +78 -0
  74. package/src/docs/pages/methods/index.vue +36 -0
  75. package/src/docs/pages/methods/open_close.vue +63 -0
  76. package/src/docs/pages/methods/search.vue +62 -0
  77. package/src/docs/pages/methods/set_data.vue +106 -0
  78. package/src/docs/pages/methods/set_selected.vue +70 -0
  79. package/src/docs/pages/selects.vue +108 -114
  80. package/src/docs/pages/settings/always_open.vue +88 -0
  81. package/src/docs/pages/settings/close_on_select.vue +69 -0
  82. package/src/docs/pages/settings/content_location.vue +64 -0
  83. package/src/docs/pages/settings/content_position.vue +86 -0
  84. package/src/docs/pages/settings/css.vue +73 -0
  85. package/src/docs/pages/settings/data_attributes.vue +39 -0
  86. package/src/docs/pages/settings/deselect.vue +69 -0
  87. package/src/docs/pages/settings/display.vue +88 -0
  88. package/src/docs/pages/settings/hide_selected.vue +73 -0
  89. package/src/docs/pages/settings/html.vue +86 -0
  90. package/src/docs/pages/settings/index.vue +73 -0
  91. package/src/docs/pages/settings/mandatory.vue +91 -0
  92. package/src/docs/pages/settings/min_max.vue +61 -0
  93. package/src/docs/pages/settings/open_position.vue +60 -0
  94. package/src/docs/pages/settings/placeholder.vue +72 -0
  95. package/src/docs/pages/settings/search.vue +140 -0
  96. package/src/docs/pages/settings/select.vue +32 -0
  97. package/src/docs/pages/settings/select_by_group.vue +46 -0
  98. package/src/docs/pages/settings/show_tooltip.vue +44 -0
  99. package/src/docs/pages/settings/styles.vue +51 -0
  100. package/src/docs/router.ts +41 -13
  101. package/src/slim-select/helper.ts +25 -86
  102. package/src/slim-select/index.ts +318 -413
  103. package/src/slim-select/render.test.ts +39 -0
  104. package/src/slim-select/render.ts +1129 -0
  105. package/src/slim-select/rollup.config.mjs +39 -0
  106. package/src/slim-select/select.test.ts +155 -0
  107. package/src/slim-select/select.ts +280 -107
  108. package/src/slim-select/settings.ts +68 -0
  109. package/src/slim-select/slimselect.scss +263 -278
  110. package/src/slim-select/store.test.ts +220 -0
  111. package/src/slim-select/store.ts +320 -0
  112. package/src/slim-select/tsconfig.json +11 -5
  113. package/src/vue/slimselect.vue +61 -0
  114. package/tsconfig.json +10 -29
  115. package/vite.config.ts +18 -0
  116. package/.browserslistrc +0 -4
  117. package/.postcssrc.js +0 -5
  118. package/.travis.yml +0 -22
  119. package/babel.config.js +0 -5
  120. package/dist/config.d.ts +0 -83
  121. package/dist/data.d.ts +0 -50
  122. package/dist/slim.d.ts +0 -50
  123. package/dist/slimselect.min.css +0 -1
  124. package/dist/slimselect.min.js +0 -1
  125. package/dist/slimselect.min.mjs +0 -1
  126. package/docs/css/app.d5840d21.css +0 -1
  127. package/docs/css/chunk-vendors.4db6930d.css +0 -1
  128. package/docs/css/home.57020178.css +0 -1
  129. package/docs/css/install.baa5d3fb.css +0 -1
  130. package/docs/css/methods.728c742a.css +0 -1
  131. package/docs/css/options.b28a32ef.css +0 -1
  132. package/docs/css/selects.1a7e1e6a.css +0 -1
  133. package/docs/js/app.db13c724.js +0 -2
  134. package/docs/js/app.db13c724.js.map +0 -1
  135. package/docs/js/chunk-vendors.cc40aa28.js +0 -28
  136. package/docs/js/chunk-vendors.cc40aa28.js.map +0 -1
  137. package/docs/js/home.8bcb44fd.js +0 -2
  138. package/docs/js/home.8bcb44fd.js.map +0 -1
  139. package/docs/js/install.02f31028.js +0 -2
  140. package/docs/js/install.02f31028.js.map +0 -1
  141. package/docs/js/methods.1b31e988.js +0 -11
  142. package/docs/js/methods.1b31e988.js.map +0 -1
  143. package/docs/js/options.39fe1005.js +0 -2
  144. package/docs/js/options.39fe1005.js.map +0 -1
  145. package/docs/js/selects.f4d0b859.js +0 -2
  146. package/docs/js/selects.f4d0b859.js.map +0 -1
  147. package/src/docs/pages/methods.vue +0 -427
  148. package/src/docs/pages/options.vue +0 -1480
  149. package/src/main.ts +0 -29
  150. package/src/shims-vue.d.ts +0 -8
  151. package/src/slim-select/config.ts +0 -118
  152. package/src/slim-select/data.ts +0 -377
  153. package/src/slim-select/slim.ts +0 -770
  154. package/tslint.json +0 -26
  155. package/vue.config.js +0 -23
@@ -1,1956 +1,2 @@
1
- (function webpackUniversalModuleDefinition(root, factory) {
2
- if(typeof exports === 'object' && typeof module === 'object')
3
- module.exports = factory();
4
- else if(typeof define === 'function' && define.amd)
5
- define([], factory);
6
- else if(typeof exports === 'object')
7
- exports["SlimSelect"] = factory();
8
- else
9
- root["SlimSelect"] = factory();
10
- })(window, function() {
11
- return /******/ (function(modules) { // webpackBootstrap
12
- /******/ // The module cache
13
- /******/ var installedModules = {};
14
- /******/
15
- /******/ // The require function
16
- /******/ function __webpack_require__(moduleId) {
17
- /******/
18
- /******/ // Check if module is in cache
19
- /******/ if(installedModules[moduleId]) {
20
- /******/ return installedModules[moduleId].exports;
21
- /******/ }
22
- /******/ // Create a new module (and put it into the cache)
23
- /******/ var module = installedModules[moduleId] = {
24
- /******/ i: moduleId,
25
- /******/ l: false,
26
- /******/ exports: {}
27
- /******/ };
28
- /******/
29
- /******/ // Execute the module function
30
- /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
31
- /******/
32
- /******/ // Flag the module as loaded
33
- /******/ module.l = true;
34
- /******/
35
- /******/ // Return the exports of the module
36
- /******/ return module.exports;
37
- /******/ }
38
- /******/
39
- /******/
40
- /******/ // expose the modules object (__webpack_modules__)
41
- /******/ __webpack_require__.m = modules;
42
- /******/
43
- /******/ // expose the module cache
44
- /******/ __webpack_require__.c = installedModules;
45
- /******/
46
- /******/ // define getter function for harmony exports
47
- /******/ __webpack_require__.d = function(exports, name, getter) {
48
- /******/ if(!__webpack_require__.o(exports, name)) {
49
- /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
50
- /******/ }
51
- /******/ };
52
- /******/
53
- /******/ // define __esModule on exports
54
- /******/ __webpack_require__.r = function(exports) {
55
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
56
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
57
- /******/ }
58
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
59
- /******/ };
60
- /******/
61
- /******/ // create a fake namespace object
62
- /******/ // mode & 1: value is a module id, require it
63
- /******/ // mode & 2: merge all properties of value into the ns
64
- /******/ // mode & 4: return value when already ns object
65
- /******/ // mode & 8|1: behave like require
66
- /******/ __webpack_require__.t = function(value, mode) {
67
- /******/ if(mode & 1) value = __webpack_require__(value);
68
- /******/ if(mode & 8) return value;
69
- /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
70
- /******/ var ns = Object.create(null);
71
- /******/ __webpack_require__.r(ns);
72
- /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
73
- /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
74
- /******/ return ns;
75
- /******/ };
76
- /******/
77
- /******/ // getDefaultExport function for compatibility with non-harmony modules
78
- /******/ __webpack_require__.n = function(module) {
79
- /******/ var getter = module && module.__esModule ?
80
- /******/ function getDefault() { return module['default']; } :
81
- /******/ function getModuleExports() { return module; };
82
- /******/ __webpack_require__.d(getter, 'a', getter);
83
- /******/ return getter;
84
- /******/ };
85
- /******/
86
- /******/ // Object.prototype.hasOwnProperty.call
87
- /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
88
- /******/
89
- /******/ // __webpack_public_path__
90
- /******/ __webpack_require__.p = "";
91
- /******/
92
- /******/
93
- /******/ // Load entry module and return exports
94
- /******/ return __webpack_require__(__webpack_require__.s = 2);
95
- /******/ })
96
- /************************************************************************/
97
- /******/ ([
98
- /* 0 */
99
- /***/ (function(module, exports, __webpack_require__) {
100
-
101
- "use strict";
102
-
103
- exports.__esModule = true;
104
- function hasClassInTree(element, className) {
105
- function hasClass(e, c) {
106
- if (!(!c || !e || !e.classList || !e.classList.contains(c))) {
107
- return e;
108
- }
109
- return null;
110
- }
111
- function parentByClass(e, c) {
112
- if (!e || e === document) {
113
- return null;
114
- }
115
- else if (hasClass(e, c)) {
116
- return e;
117
- }
118
- else {
119
- return parentByClass(e.parentNode, c);
120
- }
121
- }
122
- return hasClass(element, className) || parentByClass(element, className);
123
- }
124
- exports.hasClassInTree = hasClassInTree;
125
- function ensureElementInView(container, element) {
126
- var cTop = container.scrollTop + container.offsetTop;
127
- var cBottom = cTop + container.clientHeight;
128
- var eTop = element.offsetTop;
129
- var eBottom = eTop + element.clientHeight;
130
- if (eTop < cTop) {
131
- container.scrollTop -= (cTop - eTop);
132
- }
133
- else if (eBottom > cBottom) {
134
- container.scrollTop += (eBottom - cBottom);
135
- }
136
- }
137
- exports.ensureElementInView = ensureElementInView;
138
- function putContent(el, currentPosition, isOpen) {
139
- var height = el.offsetHeight;
140
- var rect = el.getBoundingClientRect();
141
- var elemTop = (isOpen ? rect.top : rect.top - height);
142
- var elemBottom = (isOpen ? rect.bottom : rect.bottom + height);
143
- if (elemTop <= 0) {
144
- return 'below';
145
- }
146
- if (elemBottom >= window.innerHeight) {
147
- return 'above';
148
- }
149
- return (isOpen ? currentPosition : 'below');
150
- }
151
- exports.putContent = putContent;
152
- function debounce(func, wait, immediate) {
153
- if (wait === void 0) { wait = 100; }
154
- if (immediate === void 0) { immediate = false; }
155
- var timeout;
156
- return function () {
157
- var args = [];
158
- for (var _i = 0; _i < arguments.length; _i++) {
159
- args[_i] = arguments[_i];
160
- }
161
- var context = self;
162
- var later = function () {
163
- timeout = null;
164
- if (!immediate) {
165
- func.apply(context, args);
166
- }
167
- };
168
- var callNow = immediate && !timeout;
169
- clearTimeout(timeout);
170
- timeout = setTimeout(later, wait);
171
- if (callNow) {
172
- func.apply(context, args);
173
- }
174
- };
175
- }
176
- exports.debounce = debounce;
177
- function isValueInArrayOfObjects(selected, key, value) {
178
- if (!Array.isArray(selected)) {
179
- return selected[key] === value;
180
- }
181
- for (var _i = 0, selected_1 = selected; _i < selected_1.length; _i++) {
182
- var s = selected_1[_i];
183
- if (s && s[key] && s[key] === value) {
184
- return true;
185
- }
186
- }
187
- return false;
188
- }
189
- exports.isValueInArrayOfObjects = isValueInArrayOfObjects;
190
- function highlight(str, search, className) {
191
- var completedString = str;
192
- var regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i');
193
- if (!str.match(regex)) {
194
- return str;
195
- }
196
- var matchStartPosition = str.match(regex).index;
197
- var matchEndPosition = matchStartPosition + str.match(regex)[0].toString().length;
198
- var originalTextFoundByRegex = str.substring(matchStartPosition, matchEndPosition);
199
- completedString = completedString.replace(regex, "<mark class=\"" + className + "\">" + originalTextFoundByRegex + "</mark>");
200
- return completedString;
201
- }
202
- exports.highlight = highlight;
203
- function kebabCase(str) {
204
- var result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, function (match) { return '-' + match.toLowerCase(); });
205
- return (str[0] === str[0].toUpperCase())
206
- ? result.substring(1)
207
- : result;
208
- }
209
- exports.kebabCase = kebabCase;
210
- (function () {
211
- var w = window;
212
- if (typeof w.CustomEvent === 'function') {
213
- return;
214
- }
215
- function CustomEvent(event, params) {
216
- params = params || { bubbles: false, cancelable: false, detail: undefined };
217
- var evt = document.createEvent('CustomEvent');
218
- evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
219
- return evt;
220
- }
221
- CustomEvent.prototype = w.Event.prototype;
222
- w.CustomEvent = CustomEvent;
223
- })();
224
-
225
-
226
- /***/ }),
227
- /* 1 */
228
- /***/ (function(module, exports, __webpack_require__) {
229
-
230
- "use strict";
231
-
232
- exports.__esModule = true;
233
- var Data = (function () {
234
- function Data(info) {
235
- this.contentOpen = false;
236
- this.contentPosition = 'below';
237
- this.isOnChangeEnabled = true;
238
- this.main = info.main;
239
- this.searchValue = '';
240
- this.data = [];
241
- this.filtered = null;
242
- this.parseSelectData();
243
- this.setSelectedFromSelect();
244
- }
245
- Data.prototype.newOption = function (info) {
246
- return {
247
- id: (info.id ? info.id : String(Math.floor(Math.random() * 100000000))),
248
- value: (info.value ? info.value : ''),
249
- text: (info.text ? info.text : ''),
250
- innerHTML: (info.innerHTML ? info.innerHTML : ''),
251
- selected: (info.selected ? info.selected : false),
252
- display: (info.display !== undefined ? info.display : true),
253
- disabled: (info.disabled ? info.disabled : false),
254
- placeholder: (info.placeholder ? info.placeholder : false),
255
- "class": (info["class"] ? info["class"] : undefined),
256
- data: (info.data ? info.data : {}),
257
- mandatory: (info.mandatory ? info.mandatory : false)
258
- };
259
- };
260
- Data.prototype.add = function (data) {
261
- this.data.push({
262
- id: String(Math.floor(Math.random() * 100000000)),
263
- value: data.value,
264
- text: data.text,
265
- innerHTML: '',
266
- selected: false,
267
- display: true,
268
- disabled: false,
269
- placeholder: false,
270
- "class": undefined,
271
- mandatory: data.mandatory,
272
- data: {}
273
- });
274
- };
275
- Data.prototype.parseSelectData = function () {
276
- this.data = [];
277
- var nodes = this.main.select.element.childNodes;
278
- for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
279
- var n = nodes_1[_i];
280
- if (n.nodeName === 'OPTGROUP') {
281
- var node = n;
282
- var optgroup = {
283
- label: node.label,
284
- options: []
285
- };
286
- var options = n.childNodes;
287
- for (var _a = 0, options_1 = options; _a < options_1.length; _a++) {
288
- var o = options_1[_a];
289
- if (o.nodeName === 'OPTION') {
290
- var option = this.pullOptionData(o);
291
- optgroup.options.push(option);
292
- if (option.placeholder && option.text.trim() !== '') {
293
- this.main.config.placeholderText = option.text;
294
- }
295
- }
296
- }
297
- this.data.push(optgroup);
298
- }
299
- else if (n.nodeName === 'OPTION') {
300
- var option = this.pullOptionData(n);
301
- this.data.push(option);
302
- if (option.placeholder && option.text.trim() !== '') {
303
- this.main.config.placeholderText = option.text;
304
- }
305
- }
306
- }
307
- };
308
- Data.prototype.pullOptionData = function (option) {
309
- return {
310
- id: (option.dataset ? option.dataset.id : false) || String(Math.floor(Math.random() * 100000000)),
311
- value: option.value,
312
- text: option.text,
313
- innerHTML: option.innerHTML,
314
- selected: option.selected,
315
- disabled: option.disabled,
316
- placeholder: option.dataset.placeholder === 'true',
317
- "class": option.className,
318
- style: option.style.cssText,
319
- data: option.dataset,
320
- mandatory: (option.dataset ? option.dataset.mandatory === 'true' : false)
321
- };
322
- };
323
- Data.prototype.setSelectedFromSelect = function () {
324
- if (this.main.config.isMultiple) {
325
- var options = this.main.select.element.options;
326
- var newSelected = [];
327
- for (var _i = 0, options_2 = options; _i < options_2.length; _i++) {
328
- var o = options_2[_i];
329
- if (o.selected) {
330
- var newOption = this.getObjectFromData(o.value, 'value');
331
- if (newOption && newOption.id) {
332
- newSelected.push(newOption.id);
333
- }
334
- }
335
- }
336
- this.setSelected(newSelected, 'id');
337
- }
338
- else {
339
- var element = this.main.select.element;
340
- if (element.selectedIndex !== -1) {
341
- var option = element.options[element.selectedIndex];
342
- var value = option.value;
343
- this.setSelected(value, 'value');
344
- }
345
- }
346
- };
347
- Data.prototype.setSelected = function (value, type) {
348
- if (type === void 0) { type = 'id'; }
349
- for (var _i = 0, _a = this.data; _i < _a.length; _i++) {
350
- var d = _a[_i];
351
- if (d.hasOwnProperty('label')) {
352
- if (d.hasOwnProperty('options')) {
353
- var options = d.options;
354
- if (options) {
355
- for (var _b = 0, options_3 = options; _b < options_3.length; _b++) {
356
- var o = options_3[_b];
357
- if (o.placeholder) {
358
- continue;
359
- }
360
- o.selected = this.shouldBeSelected(o, value, type);
361
- }
362
- }
363
- }
364
- }
365
- else {
366
- d.selected = this.shouldBeSelected(d, value, type);
367
- }
368
- }
369
- };
370
- Data.prototype.shouldBeSelected = function (option, value, type) {
371
- if (type === void 0) { type = 'id'; }
372
- if (Array.isArray(value)) {
373
- for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {
374
- var v = value_1[_i];
375
- if (type in option && String(option[type]) === String(v)) {
376
- return true;
377
- }
378
- }
379
- }
380
- else {
381
- if (type in option && String(option[type]) === String(value)) {
382
- return true;
383
- }
384
- }
385
- return false;
386
- };
387
- Data.prototype.getSelected = function () {
388
- var value = { text: '', placeholder: this.main.config.placeholderText };
389
- var values = [];
390
- for (var _i = 0, _a = this.data; _i < _a.length; _i++) {
391
- var d = _a[_i];
392
- if (d.hasOwnProperty('label')) {
393
- if (d.hasOwnProperty('options')) {
394
- var options = d.options;
395
- if (options) {
396
- for (var _b = 0, options_4 = options; _b < options_4.length; _b++) {
397
- var o = options_4[_b];
398
- if (o.selected) {
399
- if (!this.main.config.isMultiple) {
400
- value = o;
401
- }
402
- else {
403
- values.push(o);
404
- }
405
- }
406
- }
407
- }
408
- }
409
- }
410
- else {
411
- if (d.selected) {
412
- if (!this.main.config.isMultiple) {
413
- value = d;
414
- }
415
- else {
416
- values.push(d);
417
- }
418
- }
419
- }
420
- }
421
- if (this.main.config.isMultiple) {
422
- return values;
423
- }
424
- return value;
425
- };
426
- Data.prototype.addToSelected = function (value, type) {
427
- if (type === void 0) { type = 'id'; }
428
- if (this.main.config.isMultiple) {
429
- var values = [];
430
- var selected = this.getSelected();
431
- if (Array.isArray(selected)) {
432
- for (var _i = 0, selected_1 = selected; _i < selected_1.length; _i++) {
433
- var s = selected_1[_i];
434
- values.push(s[type]);
435
- }
436
- }
437
- values.push(value);
438
- this.setSelected(values, type);
439
- }
440
- };
441
- Data.prototype.removeFromSelected = function (value, type) {
442
- if (type === void 0) { type = 'id'; }
443
- if (this.main.config.isMultiple) {
444
- var values = [];
445
- var selected = this.getSelected();
446
- for (var _i = 0, selected_2 = selected; _i < selected_2.length; _i++) {
447
- var s = selected_2[_i];
448
- if (String(s[type]) !== String(value)) {
449
- values.push(s[type]);
450
- }
451
- }
452
- this.setSelected(values, type);
453
- }
454
- };
455
- Data.prototype.onDataChange = function () {
456
- if (this.main.onChange && this.isOnChangeEnabled) {
457
- this.main.onChange(JSON.parse(JSON.stringify(this.getSelected())));
458
- }
459
- };
460
- Data.prototype.getObjectFromData = function (value, type) {
461
- if (type === void 0) { type = 'id'; }
462
- for (var _i = 0, _a = this.data; _i < _a.length; _i++) {
463
- var d = _a[_i];
464
- if (type in d && String(d[type]) === String(value)) {
465
- return d;
466
- }
467
- if (d.hasOwnProperty('options')) {
468
- var optgroupObject = d;
469
- if (optgroupObject.options) {
470
- for (var _b = 0, _c = optgroupObject.options; _b < _c.length; _b++) {
471
- var oo = _c[_b];
472
- if (String(oo[type]) === String(value)) {
473
- return oo;
474
- }
475
- }
476
- }
477
- }
478
- }
479
- return null;
480
- };
481
- Data.prototype.search = function (search) {
482
- this.searchValue = search;
483
- if (search.trim() === '') {
484
- this.filtered = null;
485
- return;
486
- }
487
- var searchFilter = this.main.config.searchFilter;
488
- var valuesArray = this.data.slice(0);
489
- search = search.trim();
490
- var filtered = valuesArray.map(function (obj) {
491
- if (obj.hasOwnProperty('options')) {
492
- var optgroupObj = obj;
493
- var options = [];
494
- if (optgroupObj.options) {
495
- options = optgroupObj.options.filter(function (opt) {
496
- return searchFilter(opt, search);
497
- });
498
- }
499
- if (options.length !== 0) {
500
- var optgroup = Object.assign({}, optgroupObj);
501
- optgroup.options = options;
502
- return optgroup;
503
- }
504
- }
505
- if (obj.hasOwnProperty('text')) {
506
- var optionObj = obj;
507
- if (searchFilter(optionObj, search)) {
508
- return obj;
509
- }
510
- }
511
- return null;
512
- });
513
- this.filtered = filtered.filter(function (info) { return info; });
514
- };
515
- return Data;
516
- }());
517
- exports.Data = Data;
518
- function validateData(data) {
519
- if (!data) {
520
- console.error('Data must be an array of objects');
521
- return false;
522
- }
523
- var isValid = false;
524
- var errorCount = 0;
525
- for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
526
- var d = data_1[_i];
527
- if (d.hasOwnProperty('label')) {
528
- if (d.hasOwnProperty('options')) {
529
- var optgroup = d;
530
- var options = optgroup.options;
531
- if (options) {
532
- for (var _a = 0, options_5 = options; _a < options_5.length; _a++) {
533
- var o = options_5[_a];
534
- isValid = validateOption(o);
535
- if (!isValid) {
536
- errorCount++;
537
- }
538
- }
539
- }
540
- }
541
- }
542
- else {
543
- var option = d;
544
- isValid = validateOption(option);
545
- if (!isValid) {
546
- errorCount++;
547
- }
548
- }
549
- }
550
- return errorCount === 0;
551
- }
552
- exports.validateData = validateData;
553
- function validateOption(option) {
554
- if (option.text === undefined) {
555
- console.error('Data object option must have at least have a text value. Check object: ' + JSON.stringify(option));
556
- return false;
557
- }
558
- return true;
559
- }
560
- exports.validateOption = validateOption;
561
-
562
-
563
- /***/ }),
564
- /* 2 */
565
- /***/ (function(module, exports, __webpack_require__) {
566
-
567
- "use strict";
568
-
569
- exports.__esModule = true;
570
- var config_1 = __webpack_require__(3);
571
- var select_1 = __webpack_require__(4);
572
- var slim_1 = __webpack_require__(5);
573
- var data_1 = __webpack_require__(1);
574
- var helper_1 = __webpack_require__(0);
575
- var SlimSelect = (function () {
576
- function SlimSelect(info) {
577
- var _this = this;
578
- this.ajax = null;
579
- this.addable = null;
580
- this.beforeOnChange = null;
581
- this.onChange = null;
582
- this.beforeOpen = null;
583
- this.afterOpen = null;
584
- this.beforeClose = null;
585
- this.afterClose = null;
586
- this.windowScroll = helper_1.debounce(function (e) {
587
- if (_this.data.contentOpen) {
588
- if (helper_1.putContent(_this.slim.content, _this.data.contentPosition, _this.data.contentOpen) === 'above') {
589
- _this.moveContentAbove();
590
- }
591
- else {
592
- _this.moveContentBelow();
593
- }
594
- }
595
- });
596
- this.documentClick = function (e) {
597
- if (e.target && !helper_1.hasClassInTree(e.target, _this.config.id)) {
598
- _this.close();
599
- }
600
- };
601
- var selectElement = this.validate(info);
602
- if (selectElement.dataset.ssid) {
603
- this.destroy(selectElement.dataset.ssid);
604
- }
605
- if (info.ajax) {
606
- this.ajax = info.ajax;
607
- }
608
- if (info.addable) {
609
- this.addable = info.addable;
610
- }
611
- this.config = new config_1.Config({
612
- select: selectElement,
613
- isAjax: (info.ajax ? true : false),
614
- showSearch: info.showSearch,
615
- searchPlaceholder: info.searchPlaceholder,
616
- searchText: info.searchText,
617
- searchingText: info.searchingText,
618
- searchFocus: info.searchFocus,
619
- searchHighlight: info.searchHighlight,
620
- searchFilter: info.searchFilter,
621
- closeOnSelect: info.closeOnSelect,
622
- showContent: info.showContent,
623
- placeholderText: info.placeholder,
624
- allowDeselect: info.allowDeselect,
625
- allowDeselectOption: info.allowDeselectOption,
626
- hideSelectedOption: info.hideSelectedOption,
627
- deselectLabel: info.deselectLabel,
628
- isEnabled: info.isEnabled,
629
- valuesUseText: info.valuesUseText,
630
- showOptionTooltips: info.showOptionTooltips,
631
- selectByGroup: info.selectByGroup,
632
- limit: info.limit,
633
- timeoutDelay: info.timeoutDelay,
634
- addToBody: info.addToBody
635
- });
636
- this.select = new select_1.Select({
637
- select: selectElement,
638
- main: this
639
- });
640
- this.data = new data_1.Data({ main: this });
641
- this.slim = new slim_1.Slim({ main: this });
642
- if (this.select.element.parentNode) {
643
- this.select.element.parentNode.insertBefore(this.slim.container, this.select.element.nextSibling);
644
- }
645
- if (info.data) {
646
- this.setData(info.data);
647
- }
648
- else {
649
- this.render();
650
- }
651
- document.addEventListener('click', this.documentClick);
652
- if (this.config.showContent === 'auto') {
653
- window.addEventListener('scroll', this.windowScroll, false);
654
- }
655
- if (info.beforeOnChange) {
656
- this.beforeOnChange = info.beforeOnChange;
657
- }
658
- if (info.onChange) {
659
- this.onChange = info.onChange;
660
- }
661
- if (info.beforeOpen) {
662
- this.beforeOpen = info.beforeOpen;
663
- }
664
- if (info.afterOpen) {
665
- this.afterOpen = info.afterOpen;
666
- }
667
- if (info.beforeClose) {
668
- this.beforeClose = info.beforeClose;
669
- }
670
- if (info.afterClose) {
671
- this.afterClose = info.afterClose;
672
- }
673
- if (!this.config.isEnabled) {
674
- this.disable();
675
- }
676
- }
677
- SlimSelect.prototype.validate = function (info) {
678
- var select = (typeof info.select === 'string' ? document.querySelector(info.select) : info.select);
679
- if (!select) {
680
- throw new Error('Could not find select element');
681
- }
682
- if (select.tagName !== 'SELECT') {
683
- throw new Error('Element isnt of type select');
684
- }
685
- return select;
686
- };
687
- SlimSelect.prototype.selected = function () {
688
- if (this.config.isMultiple) {
689
- var selected = this.data.getSelected();
690
- var outputSelected = [];
691
- for (var _i = 0, selected_1 = selected; _i < selected_1.length; _i++) {
692
- var s = selected_1[_i];
693
- outputSelected.push(s.value);
694
- }
695
- return outputSelected;
696
- }
697
- else {
698
- var selected = this.data.getSelected();
699
- return (selected ? selected.value : '');
700
- }
701
- };
702
- SlimSelect.prototype.set = function (value, type, close, render) {
703
- if (type === void 0) { type = 'value'; }
704
- if (close === void 0) { close = true; }
705
- if (render === void 0) { render = true; }
706
- if (this.config.isMultiple && !Array.isArray(value)) {
707
- this.data.addToSelected(value, type);
708
- }
709
- else {
710
- this.data.setSelected(value, type);
711
- }
712
- this.select.setValue();
713
- this.data.onDataChange();
714
- this.render();
715
- if (close) {
716
- this.close();
717
- }
718
- };
719
- SlimSelect.prototype.setSelected = function (value, type, close, render) {
720
- if (type === void 0) { type = 'value'; }
721
- if (close === void 0) { close = true; }
722
- if (render === void 0) { render = true; }
723
- this.set(value, type, close, render);
724
- };
725
- SlimSelect.prototype.setData = function (data) {
726
- var isValid = data_1.validateData(data);
727
- if (!isValid) {
728
- console.error('Validation problem on: #' + this.select.element.id);
729
- return;
730
- }
731
- var newData = JSON.parse(JSON.stringify(data));
732
- var selected = this.data.getSelected();
733
- for (var i = 0; i < newData.length; i++) {
734
- if (!newData[i].value && !newData[i].placeholder) {
735
- newData[i].value = newData[i].text;
736
- }
737
- }
738
- if (this.config.isAjax && selected) {
739
- if (this.config.isMultiple) {
740
- var reverseSelected = selected.reverse();
741
- for (var _i = 0, reverseSelected_1 = reverseSelected; _i < reverseSelected_1.length; _i++) {
742
- var r = reverseSelected_1[_i];
743
- newData.unshift(r);
744
- }
745
- }
746
- else {
747
- newData.unshift(selected);
748
- for (var i = 0; i < newData.length; i++) {
749
- if (!newData[i].placeholder && newData[i].value === selected.value && newData[i].text === selected.text) {
750
- delete newData[i];
751
- }
752
- }
753
- var hasPlaceholder = false;
754
- for (var i = 0; i < newData.length; i++) {
755
- if (newData[i].placeholder) {
756
- hasPlaceholder = true;
757
- }
758
- }
759
- if (!hasPlaceholder) {
760
- newData.unshift({ text: '', placeholder: true });
761
- }
762
- }
763
- }
764
- this.select.create(newData);
765
- this.data.parseSelectData();
766
- this.data.setSelectedFromSelect();
767
- };
768
- SlimSelect.prototype.addData = function (data) {
769
- var isValid = data_1.validateData([data]);
770
- if (!isValid) {
771
- console.error('Validation problem on: #' + this.select.element.id);
772
- return;
773
- }
774
- this.data.add(this.data.newOption(data));
775
- this.select.create(this.data.data);
776
- this.data.parseSelectData();
777
- this.data.setSelectedFromSelect();
778
- this.render();
779
- };
780
- SlimSelect.prototype.open = function () {
781
- var _this = this;
782
- if (!this.config.isEnabled) {
783
- return;
784
- }
785
- if (this.data.contentOpen) {
786
- return;
787
- }
788
- if (this.beforeOpen) {
789
- this.beforeOpen();
790
- }
791
- if (this.config.isMultiple && this.slim.multiSelected) {
792
- this.slim.multiSelected.plus.classList.add('ss-cross');
793
- }
794
- else if (this.slim.singleSelected) {
795
- this.slim.singleSelected.arrowIcon.arrow.classList.remove('arrow-down');
796
- this.slim.singleSelected.arrowIcon.arrow.classList.add('arrow-up');
797
- }
798
- this.slim[(this.config.isMultiple ? 'multiSelected' : 'singleSelected')].container.classList.add((this.data.contentPosition === 'above' ? this.config.openAbove : this.config.openBelow));
799
- if (this.config.addToBody) {
800
- var containerRect = this.slim.container.getBoundingClientRect();
801
- this.slim.content.style.top = (containerRect.top + containerRect.height + window.scrollY) + 'px';
802
- this.slim.content.style.left = (containerRect.left + window.scrollX) + 'px';
803
- this.slim.content.style.width = containerRect.width + 'px';
804
- }
805
- this.slim.content.classList.add(this.config.open);
806
- if (this.config.showContent.toLowerCase() === 'up') {
807
- this.moveContentAbove();
808
- }
809
- else if (this.config.showContent.toLowerCase() === 'down') {
810
- this.moveContentBelow();
811
- }
812
- else {
813
- if (helper_1.putContent(this.slim.content, this.data.contentPosition, this.data.contentOpen) === 'above') {
814
- this.moveContentAbove();
815
- }
816
- else {
817
- this.moveContentBelow();
818
- }
819
- }
820
- if (!this.config.isMultiple) {
821
- var selected = this.data.getSelected();
822
- if (selected) {
823
- var selectedId = selected.id;
824
- var selectedOption = this.slim.list.querySelector('[data-id="' + selectedId + '"]');
825
- if (selectedOption) {
826
- helper_1.ensureElementInView(this.slim.list, selectedOption);
827
- }
828
- }
829
- }
830
- setTimeout(function () {
831
- _this.data.contentOpen = true;
832
- if (_this.config.searchFocus) {
833
- _this.slim.search.input.focus();
834
- }
835
- if (_this.afterOpen) {
836
- _this.afterOpen();
837
- }
838
- }, this.config.timeoutDelay);
839
- };
840
- SlimSelect.prototype.close = function () {
841
- var _this = this;
842
- if (!this.data.contentOpen) {
843
- return;
844
- }
845
- if (this.beforeClose) {
846
- this.beforeClose();
847
- }
848
- if (this.config.isMultiple && this.slim.multiSelected) {
849
- this.slim.multiSelected.container.classList.remove(this.config.openAbove);
850
- this.slim.multiSelected.container.classList.remove(this.config.openBelow);
851
- this.slim.multiSelected.plus.classList.remove('ss-cross');
852
- }
853
- else if (this.slim.singleSelected) {
854
- this.slim.singleSelected.container.classList.remove(this.config.openAbove);
855
- this.slim.singleSelected.container.classList.remove(this.config.openBelow);
856
- this.slim.singleSelected.arrowIcon.arrow.classList.add('arrow-down');
857
- this.slim.singleSelected.arrowIcon.arrow.classList.remove('arrow-up');
858
- }
859
- this.slim.content.classList.remove(this.config.open);
860
- this.data.contentOpen = false;
861
- this.search('');
862
- setTimeout(function () {
863
- _this.slim.content.removeAttribute('style');
864
- _this.data.contentPosition = 'below';
865
- if (_this.config.isMultiple && _this.slim.multiSelected) {
866
- _this.slim.multiSelected.container.classList.remove(_this.config.openAbove);
867
- _this.slim.multiSelected.container.classList.remove(_this.config.openBelow);
868
- }
869
- else if (_this.slim.singleSelected) {
870
- _this.slim.singleSelected.container.classList.remove(_this.config.openAbove);
871
- _this.slim.singleSelected.container.classList.remove(_this.config.openBelow);
872
- }
873
- _this.slim.search.input.blur();
874
- if (_this.afterClose) {
875
- _this.afterClose();
876
- }
877
- }, this.config.timeoutDelay);
878
- };
879
- SlimSelect.prototype.moveContentAbove = function () {
880
- var selectHeight = 0;
881
- if (this.config.isMultiple && this.slim.multiSelected) {
882
- selectHeight = this.slim.multiSelected.container.offsetHeight;
883
- }
884
- else if (this.slim.singleSelected) {
885
- selectHeight = this.slim.singleSelected.container.offsetHeight;
886
- }
887
- var contentHeight = this.slim.content.offsetHeight;
888
- var height = selectHeight + contentHeight - 1;
889
- this.slim.content.style.margin = '-' + height + 'px 0 0 0';
890
- this.slim.content.style.height = (height - selectHeight + 1) + 'px';
891
- this.slim.content.style.transformOrigin = 'center bottom';
892
- this.data.contentPosition = 'above';
893
- if (this.config.isMultiple && this.slim.multiSelected) {
894
- this.slim.multiSelected.container.classList.remove(this.config.openBelow);
895
- this.slim.multiSelected.container.classList.add(this.config.openAbove);
896
- }
897
- else if (this.slim.singleSelected) {
898
- this.slim.singleSelected.container.classList.remove(this.config.openBelow);
899
- this.slim.singleSelected.container.classList.add(this.config.openAbove);
900
- }
901
- };
902
- SlimSelect.prototype.moveContentBelow = function () {
903
- this.data.contentPosition = 'below';
904
- if (this.config.isMultiple && this.slim.multiSelected) {
905
- this.slim.multiSelected.container.classList.remove(this.config.openAbove);
906
- this.slim.multiSelected.container.classList.add(this.config.openBelow);
907
- }
908
- else if (this.slim.singleSelected) {
909
- this.slim.singleSelected.container.classList.remove(this.config.openAbove);
910
- this.slim.singleSelected.container.classList.add(this.config.openBelow);
911
- }
912
- };
913
- SlimSelect.prototype.enable = function () {
914
- this.config.isEnabled = true;
915
- if (this.config.isMultiple && this.slim.multiSelected) {
916
- this.slim.multiSelected.container.classList.remove(this.config.disabled);
917
- }
918
- else if (this.slim.singleSelected) {
919
- this.slim.singleSelected.container.classList.remove(this.config.disabled);
920
- }
921
- this.select.triggerMutationObserver = false;
922
- this.select.element.disabled = false;
923
- this.slim.search.input.disabled = false;
924
- this.select.triggerMutationObserver = true;
925
- };
926
- SlimSelect.prototype.disable = function () {
927
- this.config.isEnabled = false;
928
- if (this.config.isMultiple && this.slim.multiSelected) {
929
- this.slim.multiSelected.container.classList.add(this.config.disabled);
930
- }
931
- else if (this.slim.singleSelected) {
932
- this.slim.singleSelected.container.classList.add(this.config.disabled);
933
- }
934
- this.select.triggerMutationObserver = false;
935
- this.select.element.disabled = true;
936
- this.slim.search.input.disabled = true;
937
- this.select.triggerMutationObserver = true;
938
- };
939
- SlimSelect.prototype.search = function (value) {
940
- if (this.data.searchValue === value) {
941
- return;
942
- }
943
- this.slim.search.input.value = value;
944
- if (this.config.isAjax) {
945
- var master_1 = this;
946
- this.config.isSearching = true;
947
- this.render();
948
- if (this.ajax) {
949
- this.ajax(value, function (info) {
950
- master_1.config.isSearching = false;
951
- if (Array.isArray(info)) {
952
- info.unshift({ text: '', placeholder: true });
953
- master_1.setData(info);
954
- master_1.data.search(value);
955
- master_1.render();
956
- }
957
- else if (typeof info === 'string') {
958
- master_1.slim.options(info);
959
- }
960
- else {
961
- master_1.render();
962
- }
963
- });
964
- }
965
- }
966
- else {
967
- this.data.search(value);
968
- this.render();
969
- }
970
- };
971
- SlimSelect.prototype.setSearchText = function (text) {
972
- this.config.searchText = text;
973
- };
974
- SlimSelect.prototype.render = function () {
975
- if (this.config.isMultiple) {
976
- this.slim.values();
977
- }
978
- else {
979
- this.slim.placeholder();
980
- this.slim.deselect();
981
- }
982
- this.slim.options();
983
- };
984
- SlimSelect.prototype.destroy = function (id) {
985
- if (id === void 0) { id = null; }
986
- var slim = (id ? document.querySelector('.' + id + '.ss-main') : this.slim.container);
987
- var select = (id ? document.querySelector("[data-ssid=" + id + "]") : this.select.element);
988
- if (!slim || !select) {
989
- return;
990
- }
991
- document.removeEventListener('click', this.documentClick);
992
- if (this.config.showContent === 'auto') {
993
- window.removeEventListener('scroll', this.windowScroll, false);
994
- }
995
- select.style.display = '';
996
- delete select.dataset.ssid;
997
- var el = select;
998
- el.slim = null;
999
- if (slim.parentElement) {
1000
- slim.parentElement.removeChild(slim);
1001
- }
1002
- if (this.config.addToBody) {
1003
- var slimContent = (id ? document.querySelector('.' + id + '.ss-content') : this.slim.content);
1004
- if (!slimContent) {
1005
- return;
1006
- }
1007
- document.body.removeChild(slimContent);
1008
- }
1009
- };
1010
- return SlimSelect;
1011
- }());
1012
- exports["default"] = SlimSelect;
1013
-
1014
-
1015
- /***/ }),
1016
- /* 3 */
1017
- /***/ (function(module, exports, __webpack_require__) {
1018
-
1019
- "use strict";
1020
-
1021
- exports.__esModule = true;
1022
- var Config = (function () {
1023
- function Config(info) {
1024
- this.id = '';
1025
- this.isMultiple = false;
1026
- this.isAjax = false;
1027
- this.isSearching = false;
1028
- this.showSearch = true;
1029
- this.searchFocus = true;
1030
- this.searchHighlight = false;
1031
- this.closeOnSelect = true;
1032
- this.showContent = 'auto';
1033
- this.searchPlaceholder = 'Search';
1034
- this.searchText = 'No Results';
1035
- this.searchingText = 'Searching...';
1036
- this.placeholderText = 'Select Value';
1037
- this.allowDeselect = false;
1038
- this.allowDeselectOption = false;
1039
- this.hideSelectedOption = false;
1040
- this.deselectLabel = 'x';
1041
- this.isEnabled = true;
1042
- this.valuesUseText = false;
1043
- this.showOptionTooltips = false;
1044
- this.selectByGroup = false;
1045
- this.limit = 0;
1046
- this.timeoutDelay = 200;
1047
- this.addToBody = false;
1048
- this.main = 'ss-main';
1049
- this.singleSelected = 'ss-single-selected';
1050
- this.arrow = 'ss-arrow';
1051
- this.multiSelected = 'ss-multi-selected';
1052
- this.add = 'ss-add';
1053
- this.plus = 'ss-plus';
1054
- this.values = 'ss-values';
1055
- this.value = 'ss-value';
1056
- this.valueText = 'ss-value-text';
1057
- this.valueDelete = 'ss-value-delete';
1058
- this.content = 'ss-content';
1059
- this.open = 'ss-open';
1060
- this.openAbove = 'ss-open-above';
1061
- this.openBelow = 'ss-open-below';
1062
- this.search = 'ss-search';
1063
- this.searchHighlighter = 'ss-search-highlight';
1064
- this.addable = 'ss-addable';
1065
- this.list = 'ss-list';
1066
- this.optgroup = 'ss-optgroup';
1067
- this.optgroupLabel = 'ss-optgroup-label';
1068
- this.optgroupLabelSelectable = 'ss-optgroup-label-selectable';
1069
- this.option = 'ss-option';
1070
- this.optionSelected = 'ss-option-selected';
1071
- this.highlighted = 'ss-highlighted';
1072
- this.disabled = 'ss-disabled';
1073
- this.hide = 'ss-hide';
1074
- this.id = 'ss-' + Math.floor(Math.random() * 100000);
1075
- this.style = info.select.style.cssText;
1076
- this["class"] = info.select.className.split(' ');
1077
- this.isMultiple = info.select.multiple;
1078
- this.isAjax = info.isAjax;
1079
- this.showSearch = (info.showSearch === false ? false : true);
1080
- this.searchFocus = (info.searchFocus === false ? false : true);
1081
- this.searchHighlight = (info.searchHighlight === true ? true : false);
1082
- this.closeOnSelect = (info.closeOnSelect === false ? false : true);
1083
- if (info.showContent) {
1084
- this.showContent = info.showContent;
1085
- }
1086
- this.isEnabled = (info.isEnabled === false ? false : true);
1087
- if (info.searchPlaceholder) {
1088
- this.searchPlaceholder = info.searchPlaceholder;
1089
- }
1090
- if (info.searchText) {
1091
- this.searchText = info.searchText;
1092
- }
1093
- if (info.searchingText) {
1094
- this.searchingText = info.searchingText;
1095
- }
1096
- if (info.placeholderText) {
1097
- this.placeholderText = info.placeholderText;
1098
- }
1099
- this.allowDeselect = (info.allowDeselect === true ? true : false);
1100
- this.allowDeselectOption = (info.allowDeselectOption === true ? true : false);
1101
- this.hideSelectedOption = (info.hideSelectedOption === true ? true : false);
1102
- if (info.deselectLabel) {
1103
- this.deselectLabel = info.deselectLabel;
1104
- }
1105
- if (info.valuesUseText) {
1106
- this.valuesUseText = info.valuesUseText;
1107
- }
1108
- if (info.showOptionTooltips) {
1109
- this.showOptionTooltips = info.showOptionTooltips;
1110
- }
1111
- if (info.selectByGroup) {
1112
- this.selectByGroup = info.selectByGroup;
1113
- }
1114
- if (info.limit) {
1115
- this.limit = info.limit;
1116
- }
1117
- if (info.searchFilter) {
1118
- this.searchFilter = info.searchFilter;
1119
- }
1120
- if (info.timeoutDelay != null) {
1121
- this.timeoutDelay = info.timeoutDelay;
1122
- }
1123
- this.addToBody = (info.addToBody === true ? true : false);
1124
- }
1125
- Config.prototype.searchFilter = function (opt, search) {
1126
- return opt.text.toLowerCase().indexOf(search.toLowerCase()) !== -1;
1127
- };
1128
- return Config;
1129
- }());
1130
- exports.Config = Config;
1131
-
1132
-
1133
- /***/ }),
1134
- /* 4 */
1135
- /***/ (function(module, exports, __webpack_require__) {
1136
-
1137
- "use strict";
1138
-
1139
- exports.__esModule = true;
1140
- var helper_1 = __webpack_require__(0);
1141
- var Select = (function () {
1142
- function Select(info) {
1143
- this.triggerMutationObserver = true;
1144
- this.element = info.select;
1145
- this.main = info.main;
1146
- if (this.element.disabled) {
1147
- this.main.config.isEnabled = false;
1148
- }
1149
- this.addAttributes();
1150
- this.addEventListeners();
1151
- this.mutationObserver = null;
1152
- this.addMutationObserver();
1153
- var el = this.element;
1154
- el.slim = info.main;
1155
- }
1156
- Select.prototype.setValue = function () {
1157
- if (!this.main.data.getSelected()) {
1158
- return;
1159
- }
1160
- if (this.main.config.isMultiple) {
1161
- var selected = this.main.data.getSelected();
1162
- var options = this.element.options;
1163
- for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
1164
- var o = options_1[_i];
1165
- o.selected = false;
1166
- for (var _a = 0, selected_1 = selected; _a < selected_1.length; _a++) {
1167
- var s = selected_1[_a];
1168
- if (s.value === o.value) {
1169
- o.selected = true;
1170
- }
1171
- }
1172
- }
1173
- }
1174
- else {
1175
- var selected = this.main.data.getSelected();
1176
- this.element.value = (selected ? selected.value : '');
1177
- }
1178
- this.main.data.isOnChangeEnabled = false;
1179
- this.element.dispatchEvent(new CustomEvent('change', { bubbles: true }));
1180
- this.main.data.isOnChangeEnabled = true;
1181
- };
1182
- Select.prototype.addAttributes = function () {
1183
- this.element.tabIndex = -1;
1184
- this.element.style.display = 'none';
1185
- this.element.dataset.ssid = this.main.config.id;
1186
- };
1187
- Select.prototype.addEventListeners = function () {
1188
- var _this = this;
1189
- this.element.addEventListener('change', function (e) {
1190
- _this.main.data.setSelectedFromSelect();
1191
- _this.main.render();
1192
- });
1193
- };
1194
- Select.prototype.addMutationObserver = function () {
1195
- var _this = this;
1196
- if (this.main.config.isAjax) {
1197
- return;
1198
- }
1199
- this.mutationObserver = new MutationObserver(function (mutations) {
1200
- if (!_this.triggerMutationObserver) {
1201
- return;
1202
- }
1203
- _this.main.data.parseSelectData();
1204
- _this.main.data.setSelectedFromSelect();
1205
- _this.main.render();
1206
- mutations.forEach(function (mutation) {
1207
- if (mutation.attributeName === 'class') {
1208
- _this.main.slim.updateContainerDivClass(_this.main.slim.container);
1209
- }
1210
- });
1211
- });
1212
- this.observeMutationObserver();
1213
- };
1214
- Select.prototype.observeMutationObserver = function () {
1215
- if (!this.mutationObserver) {
1216
- return;
1217
- }
1218
- this.mutationObserver.observe(this.element, {
1219
- attributes: true,
1220
- childList: true,
1221
- characterData: true
1222
- });
1223
- };
1224
- Select.prototype.disconnectMutationObserver = function () {
1225
- if (this.mutationObserver) {
1226
- this.mutationObserver.disconnect();
1227
- }
1228
- };
1229
- Select.prototype.create = function (data) {
1230
- this.element.innerHTML = '';
1231
- for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
1232
- var d = data_1[_i];
1233
- if (d.hasOwnProperty('options')) {
1234
- var optgroupObject = d;
1235
- var optgroupEl = document.createElement('optgroup');
1236
- optgroupEl.label = optgroupObject.label;
1237
- if (optgroupObject.options) {
1238
- for (var _a = 0, _b = optgroupObject.options; _a < _b.length; _a++) {
1239
- var oo = _b[_a];
1240
- optgroupEl.appendChild(this.createOption(oo));
1241
- }
1242
- }
1243
- this.element.appendChild(optgroupEl);
1244
- }
1245
- else {
1246
- this.element.appendChild(this.createOption(d));
1247
- }
1248
- }
1249
- };
1250
- Select.prototype.createOption = function (info) {
1251
- var optionEl = document.createElement('option');
1252
- optionEl.value = info.value !== '' ? info.value : info.text;
1253
- optionEl.innerHTML = info.innerHTML || info.text;
1254
- if (info.selected) {
1255
- optionEl.selected = info.selected;
1256
- }
1257
- if (info.display === false) {
1258
- optionEl.style.display = 'none';
1259
- }
1260
- if (info.disabled) {
1261
- optionEl.disabled = true;
1262
- }
1263
- if (info.placeholder) {
1264
- optionEl.setAttribute('data-placeholder', 'true');
1265
- }
1266
- if (info.mandatory) {
1267
- optionEl.setAttribute('data-mandatory', 'true');
1268
- }
1269
- if (info["class"]) {
1270
- info["class"].split(' ').forEach(function (optionClass) {
1271
- optionEl.classList.add(optionClass);
1272
- });
1273
- }
1274
- if (info.data && typeof info.data === 'object') {
1275
- Object.keys(info.data).forEach(function (key) {
1276
- optionEl.setAttribute('data-' + helper_1.kebabCase(key), info.data[key]);
1277
- });
1278
- }
1279
- return optionEl;
1280
- };
1281
- return Select;
1282
- }());
1283
- exports.Select = Select;
1284
-
1285
-
1286
- /***/ }),
1287
- /* 5 */
1288
- /***/ (function(module, exports, __webpack_require__) {
1289
-
1290
- "use strict";
1291
-
1292
- exports.__esModule = true;
1293
- var helper_1 = __webpack_require__(0);
1294
- var data_1 = __webpack_require__(1);
1295
- var Slim = (function () {
1296
- function Slim(info) {
1297
- this.main = info.main;
1298
- this.container = this.containerDiv();
1299
- this.content = this.contentDiv();
1300
- this.search = this.searchDiv();
1301
- this.list = this.listDiv();
1302
- this.options();
1303
- this.singleSelected = null;
1304
- this.multiSelected = null;
1305
- if (this.main.config.isMultiple) {
1306
- this.multiSelected = this.multiSelectedDiv();
1307
- if (this.multiSelected) {
1308
- this.container.appendChild(this.multiSelected.container);
1309
- }
1310
- }
1311
- else {
1312
- this.singleSelected = this.singleSelectedDiv();
1313
- this.container.appendChild(this.singleSelected.container);
1314
- }
1315
- if (this.main.config.addToBody) {
1316
- this.content.classList.add(this.main.config.id);
1317
- document.body.appendChild(this.content);
1318
- }
1319
- else {
1320
- this.container.appendChild(this.content);
1321
- }
1322
- this.content.appendChild(this.search.container);
1323
- this.content.appendChild(this.list);
1324
- }
1325
- Slim.prototype.containerDiv = function () {
1326
- var container = document.createElement('div');
1327
- container.style.cssText = this.main.config.style;
1328
- this.updateContainerDivClass(container);
1329
- return container;
1330
- };
1331
- Slim.prototype.updateContainerDivClass = function (container) {
1332
- this.main.config["class"] = this.main.select.element.className.split(' ');
1333
- container.className = '';
1334
- container.classList.add(this.main.config.id);
1335
- container.classList.add(this.main.config.main);
1336
- for (var _i = 0, _a = this.main.config["class"]; _i < _a.length; _i++) {
1337
- var c = _a[_i];
1338
- if (c.trim() !== '') {
1339
- container.classList.add(c);
1340
- }
1341
- }
1342
- };
1343
- Slim.prototype.singleSelectedDiv = function () {
1344
- var _this = this;
1345
- var container = document.createElement('div');
1346
- container.classList.add(this.main.config.singleSelected);
1347
- var placeholder = document.createElement('span');
1348
- placeholder.classList.add('placeholder');
1349
- container.appendChild(placeholder);
1350
- var deselect = document.createElement('span');
1351
- deselect.innerHTML = this.main.config.deselectLabel;
1352
- deselect.classList.add('ss-deselect');
1353
- deselect.onclick = function (e) {
1354
- e.stopPropagation();
1355
- if (!_this.main.config.isEnabled) {
1356
- return;
1357
- }
1358
- _this.main.set('');
1359
- };
1360
- container.appendChild(deselect);
1361
- var arrowContainer = document.createElement('span');
1362
- arrowContainer.classList.add(this.main.config.arrow);
1363
- var arrowIcon = document.createElement('span');
1364
- arrowIcon.classList.add('arrow-down');
1365
- arrowContainer.appendChild(arrowIcon);
1366
- container.appendChild(arrowContainer);
1367
- container.onclick = function () {
1368
- if (!_this.main.config.isEnabled) {
1369
- return;
1370
- }
1371
- _this.main.data.contentOpen ? _this.main.close() : _this.main.open();
1372
- };
1373
- return {
1374
- container: container,
1375
- placeholder: placeholder,
1376
- deselect: deselect,
1377
- arrowIcon: {
1378
- container: arrowContainer,
1379
- arrow: arrowIcon
1380
- }
1381
- };
1382
- };
1383
- Slim.prototype.placeholder = function () {
1384
- var selected = this.main.data.getSelected();
1385
- if (selected === null || (selected && selected.placeholder)) {
1386
- var placeholder = document.createElement('span');
1387
- placeholder.classList.add(this.main.config.disabled);
1388
- placeholder.innerHTML = this.main.config.placeholderText;
1389
- if (this.singleSelected) {
1390
- this.singleSelected.placeholder.innerHTML = placeholder.outerHTML;
1391
- }
1392
- }
1393
- else {
1394
- var selectedValue = '';
1395
- if (selected) {
1396
- selectedValue = selected.innerHTML && this.main.config.valuesUseText !== true ? selected.innerHTML : selected.text;
1397
- }
1398
- if (this.singleSelected) {
1399
- this.singleSelected.placeholder.innerHTML = (selected ? selectedValue : '');
1400
- }
1401
- }
1402
- };
1403
- Slim.prototype.deselect = function () {
1404
- if (this.singleSelected) {
1405
- if (!this.main.config.allowDeselect) {
1406
- this.singleSelected.deselect.classList.add('ss-hide');
1407
- return;
1408
- }
1409
- if (this.main.selected() === '') {
1410
- this.singleSelected.deselect.classList.add('ss-hide');
1411
- }
1412
- else {
1413
- this.singleSelected.deselect.classList.remove('ss-hide');
1414
- }
1415
- }
1416
- };
1417
- Slim.prototype.multiSelectedDiv = function () {
1418
- var _this = this;
1419
- var container = document.createElement('div');
1420
- container.classList.add(this.main.config.multiSelected);
1421
- var values = document.createElement('div');
1422
- values.classList.add(this.main.config.values);
1423
- container.appendChild(values);
1424
- var add = document.createElement('div');
1425
- add.classList.add(this.main.config.add);
1426
- var plus = document.createElement('span');
1427
- plus.classList.add(this.main.config.plus);
1428
- plus.onclick = function (e) {
1429
- if (_this.main.data.contentOpen) {
1430
- _this.main.close();
1431
- e.stopPropagation();
1432
- }
1433
- };
1434
- add.appendChild(plus);
1435
- container.appendChild(add);
1436
- container.onclick = function (e) {
1437
- if (!_this.main.config.isEnabled) {
1438
- return;
1439
- }
1440
- var target = e.target;
1441
- if (!target.classList.contains(_this.main.config.valueDelete)) {
1442
- _this.main.data.contentOpen ? _this.main.close() : _this.main.open();
1443
- }
1444
- };
1445
- return {
1446
- container: container,
1447
- values: values,
1448
- add: add,
1449
- plus: plus
1450
- };
1451
- };
1452
- Slim.prototype.values = function () {
1453
- if (!this.multiSelected) {
1454
- return;
1455
- }
1456
- var currentNodes = this.multiSelected.values.childNodes;
1457
- var selected = this.main.data.getSelected();
1458
- var exists;
1459
- var nodesToRemove = [];
1460
- for (var _i = 0, currentNodes_1 = currentNodes; _i < currentNodes_1.length; _i++) {
1461
- var c = currentNodes_1[_i];
1462
- exists = true;
1463
- for (var _a = 0, selected_1 = selected; _a < selected_1.length; _a++) {
1464
- var s = selected_1[_a];
1465
- if (String(s.id) === String(c.dataset.id)) {
1466
- exists = false;
1467
- }
1468
- }
1469
- if (exists) {
1470
- nodesToRemove.push(c);
1471
- }
1472
- }
1473
- for (var _b = 0, nodesToRemove_1 = nodesToRemove; _b < nodesToRemove_1.length; _b++) {
1474
- var n = nodesToRemove_1[_b];
1475
- n.classList.add('ss-out');
1476
- this.multiSelected.values.removeChild(n);
1477
- }
1478
- currentNodes = this.multiSelected.values.childNodes;
1479
- for (var s = 0; s < selected.length; s++) {
1480
- exists = false;
1481
- for (var _c = 0, currentNodes_2 = currentNodes; _c < currentNodes_2.length; _c++) {
1482
- var c = currentNodes_2[_c];
1483
- if (String(selected[s].id) === String(c.dataset.id)) {
1484
- exists = true;
1485
- }
1486
- }
1487
- if (!exists) {
1488
- if (currentNodes.length === 0 || !HTMLElement.prototype.insertAdjacentElement) {
1489
- this.multiSelected.values.appendChild(this.valueDiv(selected[s]));
1490
- }
1491
- else if (s === 0) {
1492
- this.multiSelected.values.insertBefore(this.valueDiv(selected[s]), currentNodes[s]);
1493
- }
1494
- else {
1495
- currentNodes[s - 1].insertAdjacentElement('afterend', this.valueDiv(selected[s]));
1496
- }
1497
- }
1498
- }
1499
- if (selected.length === 0) {
1500
- var placeholder = document.createElement('span');
1501
- placeholder.classList.add(this.main.config.disabled);
1502
- placeholder.innerHTML = this.main.config.placeholderText;
1503
- this.multiSelected.values.innerHTML = placeholder.outerHTML;
1504
- }
1505
- };
1506
- Slim.prototype.valueDiv = function (optionObj) {
1507
- var _this = this;
1508
- var value = document.createElement('div');
1509
- value.classList.add(this.main.config.value);
1510
- value.dataset.id = optionObj.id;
1511
- var text = document.createElement('span');
1512
- text.classList.add(this.main.config.valueText);
1513
- text.innerHTML = (optionObj.innerHTML && this.main.config.valuesUseText !== true ? optionObj.innerHTML : optionObj.text);
1514
- value.appendChild(text);
1515
- if (!optionObj.mandatory) {
1516
- var deleteSpan = document.createElement('span');
1517
- deleteSpan.classList.add(this.main.config.valueDelete);
1518
- deleteSpan.innerHTML = this.main.config.deselectLabel;
1519
- deleteSpan.onclick = function (e) {
1520
- e.preventDefault();
1521
- e.stopPropagation();
1522
- var shouldUpdate = false;
1523
- if (!_this.main.beforeOnChange) {
1524
- shouldUpdate = true;
1525
- }
1526
- if (_this.main.beforeOnChange) {
1527
- var selected = _this.main.data.getSelected();
1528
- var currentValues = JSON.parse(JSON.stringify(selected));
1529
- for (var i = 0; i < currentValues.length; i++) {
1530
- if (currentValues[i].id === optionObj.id) {
1531
- currentValues.splice(i, 1);
1532
- }
1533
- }
1534
- var beforeOnchange = _this.main.beforeOnChange(currentValues);
1535
- if (beforeOnchange !== false) {
1536
- shouldUpdate = true;
1537
- }
1538
- }
1539
- if (shouldUpdate) {
1540
- _this.main.data.removeFromSelected(optionObj.id, 'id');
1541
- _this.main.render();
1542
- _this.main.select.setValue();
1543
- _this.main.data.onDataChange();
1544
- }
1545
- };
1546
- value.appendChild(deleteSpan);
1547
- }
1548
- return value;
1549
- };
1550
- Slim.prototype.contentDiv = function () {
1551
- var container = document.createElement('div');
1552
- container.classList.add(this.main.config.content);
1553
- return container;
1554
- };
1555
- Slim.prototype.searchDiv = function () {
1556
- var _this = this;
1557
- var container = document.createElement('div');
1558
- var input = document.createElement('input');
1559
- var addable = document.createElement('div');
1560
- container.classList.add(this.main.config.search);
1561
- var searchReturn = {
1562
- container: container,
1563
- input: input
1564
- };
1565
- if (!this.main.config.showSearch) {
1566
- container.classList.add(this.main.config.hide);
1567
- input.readOnly = true;
1568
- }
1569
- input.type = 'search';
1570
- input.placeholder = this.main.config.searchPlaceholder;
1571
- input.tabIndex = 0;
1572
- input.setAttribute('aria-label', this.main.config.searchPlaceholder);
1573
- input.setAttribute('autocapitalize', 'off');
1574
- input.setAttribute('autocomplete', 'off');
1575
- input.setAttribute('autocorrect', 'off');
1576
- input.onclick = function (e) {
1577
- setTimeout(function () {
1578
- var target = e.target;
1579
- if (target.value === '') {
1580
- _this.main.search('');
1581
- }
1582
- }, 10);
1583
- };
1584
- input.onkeydown = function (e) {
1585
- if (e.key === 'ArrowUp') {
1586
- _this.main.open();
1587
- _this.highlightUp();
1588
- e.preventDefault();
1589
- }
1590
- else if (e.key === 'ArrowDown') {
1591
- _this.main.open();
1592
- _this.highlightDown();
1593
- e.preventDefault();
1594
- }
1595
- else if (e.key === 'Tab') {
1596
- if (!_this.main.data.contentOpen) {
1597
- setTimeout(function () { _this.main.close(); }, _this.main.config.timeoutDelay);
1598
- }
1599
- else {
1600
- _this.main.close();
1601
- }
1602
- }
1603
- else if (e.key === 'Enter') {
1604
- e.preventDefault();
1605
- }
1606
- };
1607
- input.onkeyup = function (e) {
1608
- var target = e.target;
1609
- if (e.key === 'Enter') {
1610
- if (_this.main.addable && e.ctrlKey) {
1611
- addable.click();
1612
- e.preventDefault();
1613
- e.stopPropagation();
1614
- return;
1615
- }
1616
- var highlighted = _this.list.querySelector('.' + _this.main.config.highlighted);
1617
- if (highlighted) {
1618
- highlighted.click();
1619
- }
1620
- }
1621
- else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
1622
- }
1623
- else if (e.key === 'Escape') {
1624
- _this.main.close();
1625
- }
1626
- else {
1627
- if (_this.main.config.showSearch && _this.main.data.contentOpen) {
1628
- _this.main.search(target.value);
1629
- }
1630
- else {
1631
- input.value = '';
1632
- }
1633
- }
1634
- e.preventDefault();
1635
- e.stopPropagation();
1636
- };
1637
- input.onfocus = function () { _this.main.open(); };
1638
- container.appendChild(input);
1639
- if (this.main.addable) {
1640
- addable.classList.add(this.main.config.addable);
1641
- addable.innerHTML = '+';
1642
- addable.onclick = function (e) {
1643
- if (_this.main.addable) {
1644
- e.preventDefault();
1645
- e.stopPropagation();
1646
- var inputValue = _this.search.input.value;
1647
- if (inputValue.trim() === '') {
1648
- _this.search.input.focus();
1649
- return;
1650
- }
1651
- var addableValue = _this.main.addable(inputValue);
1652
- var addableValueStr_1 = '';
1653
- if (!addableValue) {
1654
- return;
1655
- }
1656
- if (typeof addableValue === 'object') {
1657
- var validValue = data_1.validateOption(addableValue);
1658
- if (validValue) {
1659
- _this.main.addData(addableValue);
1660
- addableValueStr_1 = (addableValue.value ? addableValue.value : addableValue.text);
1661
- }
1662
- }
1663
- else {
1664
- _this.main.addData(_this.main.data.newOption({
1665
- text: addableValue,
1666
- value: addableValue
1667
- }));
1668
- addableValueStr_1 = addableValue;
1669
- }
1670
- _this.main.search('');
1671
- setTimeout(function () {
1672
- _this.main.set(addableValueStr_1, 'value', false, false);
1673
- }, 100);
1674
- if (_this.main.config.closeOnSelect) {
1675
- setTimeout(function () {
1676
- _this.main.close();
1677
- }, 100);
1678
- }
1679
- }
1680
- };
1681
- container.appendChild(addable);
1682
- searchReturn.addable = addable;
1683
- }
1684
- return searchReturn;
1685
- };
1686
- Slim.prototype.highlightUp = function () {
1687
- var highlighted = this.list.querySelector('.' + this.main.config.highlighted);
1688
- var prev = null;
1689
- if (highlighted) {
1690
- prev = highlighted.previousSibling;
1691
- while (prev !== null) {
1692
- if (prev.classList.contains(this.main.config.disabled)) {
1693
- prev = prev.previousSibling;
1694
- continue;
1695
- }
1696
- else {
1697
- break;
1698
- }
1699
- }
1700
- }
1701
- else {
1702
- var allOptions = this.list.querySelectorAll('.' + this.main.config.option + ':not(.' + this.main.config.disabled + ')');
1703
- prev = allOptions[allOptions.length - 1];
1704
- }
1705
- if (prev && prev.classList.contains(this.main.config.optgroupLabel)) {
1706
- prev = null;
1707
- }
1708
- if (prev === null) {
1709
- var parent_1 = highlighted.parentNode;
1710
- if (parent_1.classList.contains(this.main.config.optgroup)) {
1711
- if (parent_1.previousSibling) {
1712
- var prevNodes = parent_1.previousSibling.querySelectorAll('.' + this.main.config.option + ':not(.' + this.main.config.disabled + ')');
1713
- if (prevNodes.length) {
1714
- prev = prevNodes[prevNodes.length - 1];
1715
- }
1716
- }
1717
- }
1718
- }
1719
- if (prev) {
1720
- if (highlighted) {
1721
- highlighted.classList.remove(this.main.config.highlighted);
1722
- }
1723
- prev.classList.add(this.main.config.highlighted);
1724
- helper_1.ensureElementInView(this.list, prev);
1725
- }
1726
- };
1727
- Slim.prototype.highlightDown = function () {
1728
- var highlighted = this.list.querySelector('.' + this.main.config.highlighted);
1729
- var next = null;
1730
- if (highlighted) {
1731
- next = highlighted.nextSibling;
1732
- while (next !== null) {
1733
- if (next.classList.contains(this.main.config.disabled)) {
1734
- next = next.nextSibling;
1735
- continue;
1736
- }
1737
- else {
1738
- break;
1739
- }
1740
- }
1741
- }
1742
- else {
1743
- next = this.list.querySelector('.' + this.main.config.option + ':not(.' + this.main.config.disabled + ')');
1744
- }
1745
- if (next === null && highlighted !== null) {
1746
- var parent_2 = highlighted.parentNode;
1747
- if (parent_2.classList.contains(this.main.config.optgroup)) {
1748
- if (parent_2.nextSibling) {
1749
- var sibling = parent_2.nextSibling;
1750
- next = sibling.querySelector('.' + this.main.config.option + ':not(.' + this.main.config.disabled + ')');
1751
- }
1752
- }
1753
- }
1754
- if (next) {
1755
- if (highlighted) {
1756
- highlighted.classList.remove(this.main.config.highlighted);
1757
- }
1758
- next.classList.add(this.main.config.highlighted);
1759
- helper_1.ensureElementInView(this.list, next);
1760
- }
1761
- };
1762
- Slim.prototype.listDiv = function () {
1763
- var list = document.createElement('div');
1764
- list.classList.add(this.main.config.list);
1765
- return list;
1766
- };
1767
- Slim.prototype.options = function (content) {
1768
- if (content === void 0) { content = ''; }
1769
- var data = this.main.data.filtered || this.main.data.data;
1770
- this.list.innerHTML = '';
1771
- if (content !== '') {
1772
- var searching = document.createElement('div');
1773
- searching.classList.add(this.main.config.option);
1774
- searching.classList.add(this.main.config.disabled);
1775
- searching.innerHTML = content;
1776
- this.list.appendChild(searching);
1777
- return;
1778
- }
1779
- if (this.main.config.isAjax && this.main.config.isSearching) {
1780
- var searching = document.createElement('div');
1781
- searching.classList.add(this.main.config.option);
1782
- searching.classList.add(this.main.config.disabled);
1783
- searching.innerHTML = this.main.config.searchingText;
1784
- this.list.appendChild(searching);
1785
- return;
1786
- }
1787
- if (data.length === 0) {
1788
- var noResults = document.createElement('div');
1789
- noResults.classList.add(this.main.config.option);
1790
- noResults.classList.add(this.main.config.disabled);
1791
- noResults.innerHTML = this.main.config.searchText;
1792
- this.list.appendChild(noResults);
1793
- return;
1794
- }
1795
- var _loop_1 = function (d) {
1796
- if (d.hasOwnProperty('label')) {
1797
- var item = d;
1798
- var optgroupEl_1 = document.createElement('div');
1799
- optgroupEl_1.classList.add(this_1.main.config.optgroup);
1800
- var optgroupLabel = document.createElement('div');
1801
- optgroupLabel.classList.add(this_1.main.config.optgroupLabel);
1802
- if (this_1.main.config.selectByGroup && this_1.main.config.isMultiple) {
1803
- optgroupLabel.classList.add(this_1.main.config.optgroupLabelSelectable);
1804
- }
1805
- optgroupLabel.innerHTML = item.label;
1806
- optgroupEl_1.appendChild(optgroupLabel);
1807
- var options = item.options;
1808
- if (options) {
1809
- for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
1810
- var o = options_1[_i];
1811
- optgroupEl_1.appendChild(this_1.option(o));
1812
- }
1813
- if (this_1.main.config.selectByGroup && this_1.main.config.isMultiple) {
1814
- var master_1 = this_1;
1815
- optgroupLabel.addEventListener('click', function (e) {
1816
- e.preventDefault();
1817
- e.stopPropagation();
1818
- for (var _i = 0, _a = optgroupEl_1.children; _i < _a.length; _i++) {
1819
- var childEl = _a[_i];
1820
- if (childEl.className.indexOf(master_1.main.config.option) !== -1) {
1821
- childEl.click();
1822
- }
1823
- }
1824
- });
1825
- }
1826
- }
1827
- this_1.list.appendChild(optgroupEl_1);
1828
- }
1829
- else {
1830
- this_1.list.appendChild(this_1.option(d));
1831
- }
1832
- };
1833
- var this_1 = this;
1834
- for (var _i = 0, data_2 = data; _i < data_2.length; _i++) {
1835
- var d = data_2[_i];
1836
- _loop_1(d);
1837
- }
1838
- };
1839
- Slim.prototype.option = function (data) {
1840
- if (data.placeholder) {
1841
- var placeholder = document.createElement('div');
1842
- placeholder.classList.add(this.main.config.option);
1843
- placeholder.classList.add(this.main.config.hide);
1844
- return placeholder;
1845
- }
1846
- var optionEl = document.createElement('div');
1847
- optionEl.classList.add(this.main.config.option);
1848
- if (data["class"]) {
1849
- data["class"].split(' ').forEach(function (dataClass) {
1850
- optionEl.classList.add(dataClass);
1851
- });
1852
- }
1853
- if (data.style) {
1854
- optionEl.style.cssText = data.style;
1855
- }
1856
- var selected = this.main.data.getSelected();
1857
- optionEl.dataset.id = data.id;
1858
- if (this.main.config.searchHighlight && this.main.slim && data.innerHTML && this.main.slim.search.input.value.trim() !== '') {
1859
- optionEl.innerHTML = helper_1.highlight(data.innerHTML, this.main.slim.search.input.value, this.main.config.searchHighlighter);
1860
- }
1861
- else if (data.innerHTML) {
1862
- optionEl.innerHTML = data.innerHTML;
1863
- }
1864
- if (this.main.config.showOptionTooltips && optionEl.textContent) {
1865
- optionEl.setAttribute('title', optionEl.textContent);
1866
- }
1867
- var master = this;
1868
- optionEl.addEventListener('click', function (e) {
1869
- e.preventDefault();
1870
- e.stopPropagation();
1871
- var element = this;
1872
- var elementID = element.dataset.id;
1873
- if (data.selected === true && master.main.config.allowDeselectOption) {
1874
- var shouldUpdate = false;
1875
- if (!master.main.beforeOnChange || !master.main.config.isMultiple) {
1876
- shouldUpdate = true;
1877
- }
1878
- if (master.main.beforeOnChange && master.main.config.isMultiple) {
1879
- var selectedValues = master.main.data.getSelected();
1880
- var currentValues = JSON.parse(JSON.stringify(selectedValues));
1881
- for (var i = 0; i < currentValues.length; i++) {
1882
- if (currentValues[i].id === elementID) {
1883
- currentValues.splice(i, 1);
1884
- }
1885
- }
1886
- var beforeOnchange = master.main.beforeOnChange(currentValues);
1887
- if (beforeOnchange !== false) {
1888
- shouldUpdate = true;
1889
- }
1890
- }
1891
- if (shouldUpdate) {
1892
- if (master.main.config.isMultiple) {
1893
- master.main.data.removeFromSelected(elementID, 'id');
1894
- master.main.render();
1895
- master.main.select.setValue();
1896
- master.main.data.onDataChange();
1897
- }
1898
- else {
1899
- master.main.set('');
1900
- }
1901
- }
1902
- }
1903
- else {
1904
- if (data.disabled || data.selected) {
1905
- return;
1906
- }
1907
- if (master.main.config.limit && Array.isArray(selected) && master.main.config.limit <= selected.length) {
1908
- return;
1909
- }
1910
- if (master.main.beforeOnChange) {
1911
- var value = void 0;
1912
- var objectInfo = JSON.parse(JSON.stringify(master.main.data.getObjectFromData(elementID)));
1913
- objectInfo.selected = true;
1914
- if (master.main.config.isMultiple) {
1915
- value = JSON.parse(JSON.stringify(selected));
1916
- value.push(objectInfo);
1917
- }
1918
- else {
1919
- value = JSON.parse(JSON.stringify(objectInfo));
1920
- }
1921
- var beforeOnchange = master.main.beforeOnChange(value);
1922
- if (beforeOnchange !== false) {
1923
- master.main.set(elementID, 'id', master.main.config.closeOnSelect);
1924
- }
1925
- }
1926
- else {
1927
- master.main.set(elementID, 'id', master.main.config.closeOnSelect);
1928
- }
1929
- }
1930
- });
1931
- var isSelected = selected && helper_1.isValueInArrayOfObjects(selected, 'id', data.id);
1932
- if (data.disabled || isSelected) {
1933
- optionEl.onclick = null;
1934
- if (!master.main.config.allowDeselectOption) {
1935
- optionEl.classList.add(this.main.config.disabled);
1936
- }
1937
- if (master.main.config.hideSelectedOption) {
1938
- optionEl.classList.add(this.main.config.hide);
1939
- }
1940
- }
1941
- if (isSelected) {
1942
- optionEl.classList.add(this.main.config.optionSelected);
1943
- }
1944
- else {
1945
- optionEl.classList.remove(this.main.config.optionSelected);
1946
- }
1947
- return optionEl;
1948
- };
1949
- return Slim;
1950
- }());
1951
- exports.Slim = Slim;
1952
-
1953
-
1954
- /***/ })
1955
- /******/ ])["default"];
1956
- });
1
+ function e(){return Math.random().toString(36).substring(2,10)}function t(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)}function s(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)}}function i(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}class n{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 a(e))}}class a{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 l{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 n||"label"in t))return t instanceof a||"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 n||"label"in e){let s=[];"options"in e&&e.options&&e.options.forEach((e=>{s.push(new a(e))})),s.length>0&&t.push(new n(e))}(e instanceof a||"text"in e)&&t.push(new a(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 a(e)))}setSelectedBy(e,t){let s=null,i=!1;for(let l of this.data){if(l instanceof n)for(let n of l.options)s||(s=n),n.selected=!i&&t.includes(n[e]),n.selected&&"single"===this.selectType&&(i=!0);l instanceof a&&(s||(s=l),l.selected=!i&&t.includes(l[e]),l.selected&&"single"===this.selectType&&(i=!0))}"single"===this.selectType&&s&&!i&&(s.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 s=[];return this.data.forEach((i=>{if(i instanceof n)if(t){let t=[];i.options.forEach((s=>{e&&!e(s)||t.push(new a(s))})),t.length>0&&s.push(new n({id:i.id,label:i.label,options:t}))}else i.options.forEach((t=>{e&&e(t)&&s.push(t)}));i instanceof a&&(e&&!e(i)||s.push(new a(i)))})),s}}class o{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 s=document.createElement("div");if(s.classList.add(this.classes.valueText),s.innerHTML=e.text,t.appendChild(s),!e.mandatory){const s=document.createElement("div");s.classList.add(this.classes.valueDelete),s.onclick=t=>{t.preventDefault(),t.stopPropagation();let s=!0;const i=this.store.getSelectedOptions(),l=i.filter((t=>t.selected&&t.id!==e.id),!0);if(!(this.settings.minSelected&&l.length<this.settings.minSelected)&&(this.callbacks.beforeChange&&(s=!0===this.callbacks.beforeChange(l,i)),s)){let e=[];for(const t of l){if(t instanceof n)for(const s of t.options)e.push(s.value);t instanceof a&&e.push(t.value)}this.callbacks.setSelected(e),this.settings.closeOnSelect&&this.callbacks.close(),this.callbacks.afterChange&&this.callbacks.afterChange(l)}};const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("viewBox","0 0 100 100");const l=document.createElementNS("http://www.w3.org/2000/svg","path");l.setAttribute("d",this.classes.optionDelete),i.appendChild(l),s.appendChild(i),t.appendChild(s)}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"),t=document.createElement("input"),i=document.createElement("div");e.classList.add(this.classes.search);const n={main:e,input:t};if(this.settings.showSearch||(e.classList.add(this.classes.hide),t.readOnly=!0),t.type="search",t.placeholder=this.settings.searchPlaceholder,t.tabIndex=-1,t.setAttribute("aria-label",this.settings.searchPlaceholder),t.setAttribute("autocapitalize","off"),t.setAttribute("autocomplete","off"),t.setAttribute("autocorrect","off"),t.oninput=s((e=>{this.callbacks.search(e.target.value)}),100),t.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)i.click();else{const e=this.content.list.querySelector("."+this.classes.highlighted);e&&e.click()}return!1}},t.onfocus=()=>{this.settings.isOpen||this.callbacks.open()},e.appendChild(t),this.callbacks.addable){i.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),i.appendChild(t),i.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 a({text:s,value:s})):this.callbacks.addOption(new a(s)),this.callbacks.setSelected([t]),this.callbacks.search(""),this.settings.closeOnSelect&&setTimeout((()=>{this.callbacks.close()}),100)},e.appendChild(i),n.addable={main:i,svg:t,path:s}}return n}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 n){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 a&&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 h{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 n&&this.select.appendChild(this.createOptgroup(t)),t instanceof a&&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-"+i(s),e.data[s])})),t}destroy(){this.changeListen(!1),this.disconnectObserver(),this.removeSelectChangeListener(),this.removeValueChangeListener(),this.showUI()}}class c{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}}class r{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=s((()=>{this.settings.isOpen&&this.render.moveContent()})),this.windowScroll=s((()=>{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&&!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 c(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 h(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 l(this.settings.isMultiple?"multiple":"single",e.data?e.data:this.select.getData()),e.data&&this.select.updateOptions(this.store.getData());const i={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 o(this.settings,this.store,i),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()}}export{n as Optgroup,a as Option,o as Render,h as Select,c as Settings,l as Store,s as debounce,r as default,e as generateID,t as hasClassInTree,i as kebabCase};
2
+ //# sourceMappingURL=slimselect.js.map