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