@finqu/cool 1.0.0

package/js/dist/select.js

@@ -0,0 +1,2029 @@
+/*!
+  * Cool UI select.js v1.0.0 (https://finqu.fi)
+  * Copyright 2011-2019 Finqu Oy
+  * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
+  */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) :
+  typeof define === 'function' && define.amd ? define(['jquery'], factory) :
+  (global = global || self, global.Select = factory());
+}(this, function () { 'use strict';
+
+  /*!
+   * perfect-scrollbar v1.4.0
+   * (c) 2018 Hyunje Jun
+   * @license MIT
+   */
+  function get(element) {
+    return getComputedStyle(element);
+  }
+
+  function set(element, obj) {
+    for (var key in obj) {
+      var val = obj[key];
+
+      if (typeof val === 'number') {
+        val = val + "px";
+      }
+
+      element.style[key] = val;
+    }
+
+    return element;
+  }
+
+  function div(className) {
+    var div = document.createElement('div');
+    div.className = className;
+    return div;
+  }
+
+  var elMatches = typeof Element !== 'undefined' && (Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector);
+
+  function matches(element, query) {
+    if (!elMatches) {
+      throw new Error('No element matching method supported');
+    }
+
+    return elMatches.call(element, query);
+  }
+
+  function remove(element) {
+    if (element.remove) {
+      element.remove();
+    } else {
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    }
+  }
+
+  function queryChildren(element, selector) {
+    return Array.prototype.filter.call(element.children, function (child) {
+      return matches(child, selector);
+    });
+  }
+
+  var cls = {
+    main: 'ps',
+    element: {
+      thumb: function (x) {
+        return "ps__thumb-" + x;
+      },
+      rail: function (x) {
+        return "ps__rail-" + x;
+      },
+      consuming: 'ps__child--consume'
+    },
+    state: {
+      focus: 'ps--focus',
+      clicking: 'ps--clicking',
+      active: function (x) {
+        return "ps--active-" + x;
+      },
+      scrolling: function (x) {
+        return "ps--scrolling-" + x;
+      }
+    }
+  };
+  /*
+   * Helper methods
+   */
+
+  var scrollingClassTimeout = {
+    x: null,
+    y: null
+  };
+
+  function addScrollingClass(i, x) {
+    var classList = i.element.classList;
+    var className = cls.state.scrolling(x);
+
+    if (classList.contains(className)) {
+      clearTimeout(scrollingClassTimeout[x]);
+    } else {
+      classList.add(className);
+    }
+  }
+
+  function removeScrollingClass(i, x) {
+    scrollingClassTimeout[x] = setTimeout(function () {
+      return i.isAlive && i.element.classList.remove(cls.state.scrolling(x));
+    }, i.settings.scrollingThreshold);
+  }
+
+  function setScrollingClassInstantly(i, x) {
+    addScrollingClass(i, x);
+    removeScrollingClass(i, x);
+  }
+
+  var EventElement = function EventElement(element) {
+    this.element = element;
+    this.handlers = {};
+  };
+
+  var prototypeAccessors = {
+    isEmpty: {
+      configurable: true
+    }
+  };
+
+  EventElement.prototype.bind = function bind(eventName, handler) {
+    if (typeof this.handlers[eventName] === 'undefined') {
+      this.handlers[eventName] = [];
+    }
+
+    this.handlers[eventName].push(handler);
+    this.element.addEventListener(eventName, handler, false);
+  };
+
+  EventElement.prototype.unbind = function unbind(eventName, target) {
+    var this$1 = this;
+    this.handlers[eventName] = this.handlers[eventName].filter(function (handler) {
+      if (target && handler !== target) {
+        return true;
+      }
+
+      this$1.element.removeEventListener(eventName, handler, false);
+      return false;
+    });
+  };
+
+  EventElement.prototype.unbindAll = function unbindAll() {
+    var this$1 = this;
+
+    for (var name in this$1.handlers) {
+      this$1.unbind(name);
+    }
+  };
+
+  prototypeAccessors.isEmpty.get = function () {
+    var this$1 = this;
+    return Object.keys(this.handlers).every(function (key) {
+      return this$1.handlers[key].length === 0;
+    });
+  };
+
+  Object.defineProperties(EventElement.prototype, prototypeAccessors);
+
+  var EventManager = function EventManager() {
+    this.eventElements = [];
+  };
+
+  EventManager.prototype.eventElement = function eventElement(element) {
+    var ee = this.eventElements.filter(function (ee) {
+      return ee.element === element;
+    })[0];
+
+    if (!ee) {
+      ee = new EventElement(element);
+      this.eventElements.push(ee);
+    }
+
+    return ee;
+  };
+
+  EventManager.prototype.bind = function bind(element, eventName, handler) {
+    this.eventElement(element).bind(eventName, handler);
+  };
+
+  EventManager.prototype.unbind = function unbind(element, eventName, handler) {
+    var ee = this.eventElement(element);
+    ee.unbind(eventName, handler);
+
+    if (ee.isEmpty) {
+      // remove
+      this.eventElements.splice(this.eventElements.indexOf(ee), 1);
+    }
+  };
+
+  EventManager.prototype.unbindAll = function unbindAll() {
+    this.eventElements.forEach(function (e) {
+      return e.unbindAll();
+    });
+    this.eventElements = [];
+  };
+
+  EventManager.prototype.once = function once(element, eventName, handler) {
+    var ee = this.eventElement(element);
+
+    var onceHandler = function (evt) {
+      ee.unbind(eventName, onceHandler);
+      handler(evt);
+    };
+
+    ee.bind(eventName, onceHandler);
+  };
+
+  function createEvent(name) {
+    if (typeof window.CustomEvent === 'function') {
+      return new CustomEvent(name);
+    } else {
+      var evt = document.createEvent('CustomEvent');
+      evt.initCustomEvent(name, false, false, undefined);
+      return evt;
+    }
+  }
+
+  var processScrollDiff = function (i, axis, diff, useScrollingClass, forceFireReachEvent) {
+    if (useScrollingClass === void 0) useScrollingClass = true;
+    if (forceFireReachEvent === void 0) forceFireReachEvent = false;
+    var fields;
+
+    if (axis === 'top') {
+      fields = ['contentHeight', 'containerHeight', 'scrollTop', 'y', 'up', 'down'];
+    } else if (axis === 'left') {
+      fields = ['contentWidth', 'containerWidth', 'scrollLeft', 'x', 'left', 'right'];
+    } else {
+      throw new Error('A proper axis should be provided');
+    }
+
+    processScrollDiff$1(i, diff, fields, useScrollingClass, forceFireReachEvent);
+  };
+
+  function processScrollDiff$1(i, diff, ref, useScrollingClass, forceFireReachEvent) {
+    var contentHeight = ref[0];
+    var containerHeight = ref[1];
+    var scrollTop = ref[2];
+    var y = ref[3];
+    var up = ref[4];
+    var down = ref[5];
+    if (useScrollingClass === void 0) useScrollingClass = true;
+    if (forceFireReachEvent === void 0) forceFireReachEvent = false;
+    var element = i.element; // reset reach
+
+    i.reach[y] = null; // 1 for subpixel rounding
+
+    if (element[scrollTop] < 1) {
+      i.reach[y] = 'start';
+    } // 1 for subpixel rounding
+
+
+    if (element[scrollTop] > i[contentHeight] - i[containerHeight] - 1) {
+      i.reach[y] = 'end';
+    }
+
+    if (diff) {
+      element.dispatchEvent(createEvent("ps-scroll-" + y));
+
+      if (diff < 0) {
+        element.dispatchEvent(createEvent("ps-scroll-" + up));
+      } else if (diff > 0) {
+        element.dispatchEvent(createEvent("ps-scroll-" + down));
+      }
+
+      if (useScrollingClass) {
+        setScrollingClassInstantly(i, y);
+      }
+    }
+
+    if (i.reach[y] && (diff || forceFireReachEvent)) {
+      element.dispatchEvent(createEvent("ps-" + y + "-reach-" + i.reach[y]));
+    }
+  }
+
+  function toInt(x) {
+    return parseInt(x, 10) || 0;
+  }
+
+  function isEditable(el) {
+    return matches(el, 'input,[contenteditable]') || matches(el, 'select,[contenteditable]') || matches(el, 'textarea,[contenteditable]') || matches(el, 'button,[contenteditable]');
+  }
+
+  function outerWidth(element) {
+    var styles = get(element);
+    return toInt(styles.width) + toInt(styles.paddingLeft) + toInt(styles.paddingRight) + toInt(styles.borderLeftWidth) + toInt(styles.borderRightWidth);
+  }
+
+  var env = {
+    isWebKit: typeof document !== 'undefined' && 'WebkitAppearance' in document.documentElement.style,
+    supportsTouch: typeof window !== 'undefined' && ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch),
+    supportsIePointer: typeof navigator !== 'undefined' && navigator.msMaxTouchPoints,
+    isChrome: typeof navigator !== 'undefined' && /Chrome/i.test(navigator && navigator.userAgent)
+  };
+
+  var updateGeometry = function (i) {
+    var element = i.element;
+    var roundedScrollTop = Math.floor(element.scrollTop);
+    i.containerWidth = element.clientWidth;
+    i.containerHeight = element.clientHeight;
+    i.contentWidth = element.scrollWidth;
+    i.contentHeight = element.scrollHeight;
+
+    if (!element.contains(i.scrollbarXRail)) {
+      // clean up and append
+      queryChildren(element, cls.element.rail('x')).forEach(function (el) {
+        return remove(el);
+      });
+      element.appendChild(i.scrollbarXRail);
+    }
+
+    if (!element.contains(i.scrollbarYRail)) {
+      // clean up and append
+      queryChildren(element, cls.element.rail('y')).forEach(function (el) {
+        return remove(el);
+      });
+      element.appendChild(i.scrollbarYRail);
+    }
+
+    if (!i.settings.suppressScrollX && i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth) {
+      i.scrollbarXActive = true;
+      i.railXWidth = i.containerWidth - i.railXMarginWidth;
+      i.railXRatio = i.containerWidth / i.railXWidth;
+      i.scrollbarXWidth = getThumbSize(i, toInt(i.railXWidth * i.containerWidth / i.contentWidth));
+      i.scrollbarXLeft = toInt((i.negativeScrollAdjustment + element.scrollLeft) * (i.railXWidth - i.scrollbarXWidth) / (i.contentWidth - i.containerWidth));
+    } else {
+      i.scrollbarXActive = false;
+    }
+
+    if (!i.settings.suppressScrollY && i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight) {
+      i.scrollbarYActive = true;
+      i.railYHeight = i.containerHeight - i.railYMarginHeight;
+      i.railYRatio = i.containerHeight / i.railYHeight;
+      i.scrollbarYHeight = getThumbSize(i, toInt(i.railYHeight * i.containerHeight / i.contentHeight));
+      i.scrollbarYTop = toInt(roundedScrollTop * (i.railYHeight - i.scrollbarYHeight) / (i.contentHeight - i.containerHeight));
+    } else {
+      i.scrollbarYActive = false;
+    }
+
+    if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {
+      i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth;
+    }
+
+    if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) {
+      i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight;
+    }
+
+    updateCss(element, i);
+
+    if (i.scrollbarXActive) {
+      element.classList.add(cls.state.active('x'));
+    } else {
+      element.classList.remove(cls.state.active('x'));
+      i.scrollbarXWidth = 0;
+      i.scrollbarXLeft = 0;
+      element.scrollLeft = 0;
+    }
+
+    if (i.scrollbarYActive) {
+      element.classList.add(cls.state.active('y'));
+    } else {
+      element.classList.remove(cls.state.active('y'));
+      i.scrollbarYHeight = 0;
+      i.scrollbarYTop = 0;
+      element.scrollTop = 0;
+    }
+  };
+
+  function getThumbSize(i, thumbSize) {
+    if (i.settings.minScrollbarLength) {
+      thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength);
+    }
+
+    if (i.settings.maxScrollbarLength) {
+      thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength);
+    }
+
+    return thumbSize;
+  }
+
+  function updateCss(element, i) {
+    var xRailOffset = {
+      width: i.railXWidth
+    };
+    var roundedScrollTop = Math.floor(element.scrollTop);
+
+    if (i.isRtl) {
+      xRailOffset.left = i.negativeScrollAdjustment + element.scrollLeft + i.containerWidth - i.contentWidth;
+    } else {
+      xRailOffset.left = element.scrollLeft;
+    }
+
+    if (i.isScrollbarXUsingBottom) {
+      xRailOffset.bottom = i.scrollbarXBottom - roundedScrollTop;
+    } else {
+      xRailOffset.top = i.scrollbarXTop + roundedScrollTop;
+    }
+
+    set(i.scrollbarXRail, xRailOffset);
+    var yRailOffset = {
+      top: roundedScrollTop,
+      height: i.railYHeight
+    };
+
+    if (i.isScrollbarYUsingRight) {
+      if (i.isRtl) {
+        yRailOffset.right = i.contentWidth - (i.negativeScrollAdjustment + element.scrollLeft) - i.scrollbarYRight - i.scrollbarYOuterWidth;
+      } else {
+        yRailOffset.right = i.scrollbarYRight - element.scrollLeft;
+      }
+    } else {
+      if (i.isRtl) {
+        yRailOffset.left = i.negativeScrollAdjustment + element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth;
+      } else {
+        yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
+      }
+    }
+
+    set(i.scrollbarYRail, yRailOffset);
+    set(i.scrollbarX, {
+      left: i.scrollbarXLeft,
+      width: i.scrollbarXWidth - i.railBorderXWidth
+    });
+    set(i.scrollbarY, {
+      top: i.scrollbarYTop,
+      height: i.scrollbarYHeight - i.railBorderYWidth
+    });
+  }
+
+  var clickRail = function (i) {
+    i.event.bind(i.scrollbarY, 'mousedown', function (e) {
+      return e.stopPropagation();
+    });
+    i.event.bind(i.scrollbarYRail, 'mousedown', function (e) {
+      var positionTop = e.pageY - window.pageYOffset - i.scrollbarYRail.getBoundingClientRect().top;
+      var direction = positionTop > i.scrollbarYTop ? 1 : -1;
+      i.element.scrollTop += direction * i.containerHeight;
+      updateGeometry(i);
+      e.stopPropagation();
+    });
+    i.event.bind(i.scrollbarX, 'mousedown', function (e) {
+      return e.stopPropagation();
+    });
+    i.event.bind(i.scrollbarXRail, 'mousedown', function (e) {
+      var positionLeft = e.pageX - window.pageXOffset - i.scrollbarXRail.getBoundingClientRect().left;
+      var direction = positionLeft > i.scrollbarXLeft ? 1 : -1;
+      i.element.scrollLeft += direction * i.containerWidth;
+      updateGeometry(i);
+      e.stopPropagation();
+    });
+  };
+
+  var dragThumb = function (i) {
+    bindMouseScrollHandler(i, ['containerWidth', 'contentWidth', 'pageX', 'railXWidth', 'scrollbarX', 'scrollbarXWidth', 'scrollLeft', 'x', 'scrollbarXRail']);
+    bindMouseScrollHandler(i, ['containerHeight', 'contentHeight', 'pageY', 'railYHeight', 'scrollbarY', 'scrollbarYHeight', 'scrollTop', 'y', 'scrollbarYRail']);
+  };
+
+  function bindMouseScrollHandler(i, ref) {
+    var containerHeight = ref[0];
+    var contentHeight = ref[1];
+    var pageY = ref[2];
+    var railYHeight = ref[3];
+    var scrollbarY = ref[4];
+    var scrollbarYHeight = ref[5];
+    var scrollTop = ref[6];
+    var y = ref[7];
+    var scrollbarYRail = ref[8];
+    var element = i.element;
+    var startingScrollTop = null;
+    var startingMousePageY = null;
+    var scrollBy = null;
+
+    function mouseMoveHandler(e) {
+      element[scrollTop] = startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
+      addScrollingClass(i, y);
+      updateGeometry(i);
+      e.stopPropagation();
+      e.preventDefault();
+    }
+
+    function mouseUpHandler() {
+      removeScrollingClass(i, y);
+      i[scrollbarYRail].classList.remove(cls.state.clicking);
+      i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+    }
+
+    i.event.bind(i[scrollbarY], 'mousedown', function (e) {
+      startingScrollTop = element[scrollTop];
+      startingMousePageY = e[pageY];
+      scrollBy = (i[contentHeight] - i[containerHeight]) / (i[railYHeight] - i[scrollbarYHeight]);
+      i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+      i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
+      i[scrollbarYRail].classList.add(cls.state.clicking);
+      e.stopPropagation();
+      e.preventDefault();
+    });
+  }
+
+  var keyboard = function (i) {
+    var element = i.element;
+
+    var elementHovered = function () {
+      return matches(element, ':hover');
+    };
+
+    var scrollbarFocused = function () {
+      return matches(i.scrollbarX, ':focus') || matches(i.scrollbarY, ':focus');
+    };
+
+    function shouldPreventDefault(deltaX, deltaY) {
+      var scrollTop = Math.floor(element.scrollTop);
+
+      if (deltaX === 0) {
+        if (!i.scrollbarYActive) {
+          return false;
+        }
+
+        if (scrollTop === 0 && deltaY > 0 || scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0) {
+          return !i.settings.wheelPropagation;
+        }
+      }
+
+      var scrollLeft = element.scrollLeft;
+
+      if (deltaY === 0) {
+        if (!i.scrollbarXActive) {
+          return false;
+        }
+
+        if (scrollLeft === 0 && deltaX < 0 || scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0) {
+          return !i.settings.wheelPropagation;
+        }
+      }
+
+      return true;
+    }
+
+    i.event.bind(i.ownerDocument, 'keydown', function (e) {
+      if (e.isDefaultPrevented && e.isDefaultPrevented() || e.defaultPrevented) {
+        return;
+      }
+
+      if (!elementHovered() && !scrollbarFocused()) {
+        return;
+      }
+
+      var activeElement = document.activeElement ? document.activeElement : i.ownerDocument.activeElement;
+
+      if (activeElement) {
+        if (activeElement.tagName === 'IFRAME') {
+          activeElement = activeElement.contentDocument.activeElement;
+        } else {
+          // go deeper if element is a webcomponent
+          while (activeElement.shadowRoot) {
+            activeElement = activeElement.shadowRoot.activeElement;
+          }
+        }
+
+        if (isEditable(activeElement)) {
+          return;
+        }
+      }
+
+      var deltaX = 0;
+      var deltaY = 0;
+
+      switch (e.which) {
+        case 37:
+          // left
+          if (e.metaKey) {
+            deltaX = -i.contentWidth;
+          } else if (e.altKey) {
+            deltaX = -i.containerWidth;
+          } else {
+            deltaX = -30;
+          }
+
+          break;
+
+        case 38:
+          // up
+          if (e.metaKey) {
+            deltaY = i.contentHeight;
+          } else if (e.altKey) {
+            deltaY = i.containerHeight;
+          } else {
+            deltaY = 30;
+          }
+
+          break;
+
+        case 39:
+          // right
+          if (e.metaKey) {
+            deltaX = i.contentWidth;
+          } else if (e.altKey) {
+            deltaX = i.containerWidth;
+          } else {
+            deltaX = 30;
+          }
+
+          break;
+
+        case 40:
+          // down
+          if (e.metaKey) {
+            deltaY = -i.contentHeight;
+          } else if (e.altKey) {
+            deltaY = -i.containerHeight;
+          } else {
+            deltaY = -30;
+          }
+
+          break;
+
+        case 32:
+          // space bar
+          if (e.shiftKey) {
+            deltaY = i.containerHeight;
+          } else {
+            deltaY = -i.containerHeight;
+          }
+
+          break;
+
+        case 33:
+          // page up
+          deltaY = i.containerHeight;
+          break;
+
+        case 34:
+          // page down
+          deltaY = -i.containerHeight;
+          break;
+
+        case 36:
+          // home
+          deltaY = i.contentHeight;
+          break;
+
+        case 35:
+          // end
+          deltaY = -i.contentHeight;
+          break;
+
+        default:
+          return;
+      }
+
+      if (i.settings.suppressScrollX && deltaX !== 0) {
+        return;
+      }
+
+      if (i.settings.suppressScrollY && deltaY !== 0) {
+        return;
+      }
+
+      element.scrollTop -= deltaY;
+      element.scrollLeft += deltaX;
+      updateGeometry(i);
+
+      if (shouldPreventDefault(deltaX, deltaY)) {
+        e.preventDefault();
+      }
+    });
+  };
+
+  var wheel = function (i) {
+    var element = i.element;
+
+    function shouldPreventDefault(deltaX, deltaY) {
+      var roundedScrollTop = Math.floor(element.scrollTop);
+      var isTop = element.scrollTop === 0;
+      var isBottom = roundedScrollTop + element.offsetHeight === element.scrollHeight;
+      var isLeft = element.scrollLeft === 0;
+      var isRight = element.scrollLeft + element.offsetWidth === element.scrollWidth;
+      var hitsBound; // pick axis with primary direction
+
+      if (Math.abs(deltaY) > Math.abs(deltaX)) {
+        hitsBound = isTop || isBottom;
+      } else {
+        hitsBound = isLeft || isRight;
+      }
+
+      return hitsBound ? !i.settings.wheelPropagation : true;
+    }
+
+    function getDeltaFromEvent(e) {
+      var deltaX = e.deltaX;
+      var deltaY = -1 * e.deltaY;
+
+      if (typeof deltaX === 'undefined' || typeof deltaY === 'undefined') {
+        // OS X Safari
+        deltaX = -1 * e.wheelDeltaX / 6;
+        deltaY = e.wheelDeltaY / 6;
+      }
+
+      if (e.deltaMode && e.deltaMode === 1) {
+        // Firefox in deltaMode 1: Line scrolling
+        deltaX *= 10;
+        deltaY *= 10;
+      }
+
+      if (deltaX !== deltaX && deltaY !== deltaY
+      /* NaN checks */
+      ) {
+          // IE in some mouse drivers
+          deltaX = 0;
+          deltaY = e.wheelDelta;
+        }
+
+      if (e.shiftKey) {
+        // reverse axis with shift key
+        return [-deltaY, -deltaX];
+      }
+
+      return [deltaX, deltaY];
+    }
+
+    function shouldBeConsumedByChild(target, deltaX, deltaY) {
+      // FIXME: this is a workaround for <select> issue in FF and IE #571
+      if (!env.isWebKit && element.querySelector('select:focus')) {
+        return true;
+      }
+
+      if (!element.contains(target)) {
+        return false;
+      }
+
+      var cursor = target;
+
+      while (cursor && cursor !== element) {
+        if (cursor.classList.contains(cls.element.consuming)) {
+          return true;
+        }
+
+        var style = get(cursor);
+        var overflow = [style.overflow, style.overflowX, style.overflowY].join(''); // if scrollable
+
+        if (overflow.match(/(scroll|auto)/)) {
+          var maxScrollTop = cursor.scrollHeight - cursor.clientHeight;
+
+          if (maxScrollTop > 0) {
+            if (!(cursor.scrollTop === 0 && deltaY > 0) && !(cursor.scrollTop === maxScrollTop && deltaY < 0)) {
+              return true;
+            }
+          }
+
+          var maxScrollLeft = cursor.scrollWidth - cursor.clientWidth;
+
+          if (maxScrollLeft > 0) {
+            if (!(cursor.scrollLeft === 0 && deltaX < 0) && !(cursor.scrollLeft === maxScrollLeft && deltaX > 0)) {
+              return true;
+            }
+          }
+        }
+
+        cursor = cursor.parentNode;
+      }
+
+      return false;
+    }
+
+    function mousewheelHandler(e) {
+      var ref = getDeltaFromEvent(e);
+      var deltaX = ref[0];
+      var deltaY = ref[1];
+
+      if (shouldBeConsumedByChild(e.target, deltaX, deltaY)) {
+        return;
+      }
+
+      var shouldPrevent = false;
+
+      if (!i.settings.useBothWheelAxes) {
+        // deltaX will only be used for horizontal scrolling and deltaY will
+        // only be used for vertical scrolling - this is the default
+        element.scrollTop -= deltaY * i.settings.wheelSpeed;
+        element.scrollLeft += deltaX * i.settings.wheelSpeed;
+      } else if (i.scrollbarYActive && !i.scrollbarXActive) {
+        // only vertical scrollbar is active and useBothWheelAxes option is
+        // active, so let's scroll vertical bar using both mouse wheel axes
+        if (deltaY) {
+          element.scrollTop -= deltaY * i.settings.wheelSpeed;
+        } else {
+          element.scrollTop += deltaX * i.settings.wheelSpeed;
+        }
+
+        shouldPrevent = true;
+      } else if (i.scrollbarXActive && !i.scrollbarYActive) {
+        // useBothWheelAxes and only horizontal bar is active, so use both
+        // wheel axes for horizontal bar
+        if (deltaX) {
+          element.scrollLeft += deltaX * i.settings.wheelSpeed;
+        } else {
+          element.scrollLeft -= deltaY * i.settings.wheelSpeed;
+        }
+
+        shouldPrevent = true;
+      }
+
+      updateGeometry(i);
+      shouldPrevent = shouldPrevent || shouldPreventDefault(deltaX, deltaY);
+
+      if (shouldPrevent && !e.ctrlKey) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }
+
+    if (typeof window.onwheel !== 'undefined') {
+      i.event.bind(element, 'wheel', mousewheelHandler);
+    } else if (typeof window.onmousewheel !== 'undefined') {
+      i.event.bind(element, 'mousewheel', mousewheelHandler);
+    }
+  };
+
+  var touch = function (i) {
+    if (!env.supportsTouch && !env.supportsIePointer) {
+      return;
+    }
+
+    var element = i.element;
+
+    function shouldPrevent(deltaX, deltaY) {
+      var scrollTop = Math.floor(element.scrollTop);
+      var scrollLeft = element.scrollLeft;
+      var magnitudeX = Math.abs(deltaX);
+      var magnitudeY = Math.abs(deltaY);
+
+      if (magnitudeY > magnitudeX) {
+        // user is perhaps trying to swipe up/down the page
+        if (deltaY < 0 && scrollTop === i.contentHeight - i.containerHeight || deltaY > 0 && scrollTop === 0) {
+          // set prevent for mobile Chrome refresh
+          return window.scrollY === 0 && deltaY > 0 && env.isChrome;
+        }
+      } else if (magnitudeX > magnitudeY) {
+        // user is perhaps trying to swipe left/right across the page
+        if (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth || deltaX > 0 && scrollLeft === 0) {
+          return true;
+        }
+      }
+
+      return true;
+    }
+
+    function applyTouchMove(differenceX, differenceY) {
+      element.scrollTop -= differenceY;
+      element.scrollLeft -= differenceX;
+      updateGeometry(i);
+    }
+
+    var startOffset = {};
+    var startTime = 0;
+    var speed = {};
+    var easingLoop = null;
+
+    function getTouch(e) {
+      if (e.targetTouches) {
+        return e.targetTouches[0];
+      } else {
+        // Maybe IE pointer
+        return e;
+      }
+    }
+
+    function shouldHandle(e) {
+      if (e.pointerType && e.pointerType === 'pen' && e.buttons === 0) {
+        return false;
+      }
+
+      if (e.targetTouches && e.targetTouches.length === 1) {
+        return true;
+      }
+
+      if (e.pointerType && e.pointerType !== 'mouse' && e.pointerType !== e.MSPOINTER_TYPE_MOUSE) {
+        return true;
+      }
+
+      return false;
+    }
+
+    function touchStart(e) {
+      if (!shouldHandle(e)) {
+        return;
+      }
+
+      var touch = getTouch(e);
+      startOffset.pageX = touch.pageX;
+      startOffset.pageY = touch.pageY;
+      startTime = new Date().getTime();
+
+      if (easingLoop !== null) {
+        clearInterval(easingLoop);
+      }
+    }
+
+    function shouldBeConsumedByChild(target, deltaX, deltaY) {
+      if (!element.contains(target)) {
+        return false;
+      }
+
+      var cursor = target;
+
+      while (cursor && cursor !== element) {
+        if (cursor.classList.contains(cls.element.consuming)) {
+          return true;
+        }
+
+        var style = get(cursor);
+        var overflow = [style.overflow, style.overflowX, style.overflowY].join(''); // if scrollable
+
+        if (overflow.match(/(scroll|auto)/)) {
+          var maxScrollTop = cursor.scrollHeight - cursor.clientHeight;
+
+          if (maxScrollTop > 0) {
+            if (!(cursor.scrollTop === 0 && deltaY > 0) && !(cursor.scrollTop === maxScrollTop && deltaY < 0)) {
+              return true;
+            }
+          }
+
+          var maxScrollLeft = cursor.scrollLeft - cursor.clientWidth;
+
+          if (maxScrollLeft > 0) {
+            if (!(cursor.scrollLeft === 0 && deltaX < 0) && !(cursor.scrollLeft === maxScrollLeft && deltaX > 0)) {
+              return true;
+            }
+          }
+        }
+
+        cursor = cursor.parentNode;
+      }
+
+      return false;
+    }
+
+    function touchMove(e) {
+      if (shouldHandle(e)) {
+        var touch = getTouch(e);
+        var currentOffset = {
+          pageX: touch.pageX,
+          pageY: touch.pageY
+        };
+        var differenceX = currentOffset.pageX - startOffset.pageX;
+        var differenceY = currentOffset.pageY - startOffset.pageY;
+
+        if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) {
+          return;
+        }
+
+        applyTouchMove(differenceX, differenceY);
+        startOffset = currentOffset;
+        var currentTime = new Date().getTime();
+        var timeGap = currentTime - startTime;
+
+        if (timeGap > 0) {
+          speed.x = differenceX / timeGap;
+          speed.y = differenceY / timeGap;
+          startTime = currentTime;
+        }
+
+        if (shouldPrevent(differenceX, differenceY)) {
+          e.preventDefault();
+        }
+      }
+    }
+
+    function touchEnd() {
+      if (i.settings.swipeEasing) {
+        clearInterval(easingLoop);
+        easingLoop = setInterval(function () {
+          if (i.isInitialized) {
+            clearInterval(easingLoop);
+            return;
+          }
+
+          if (!speed.x && !speed.y) {
+            clearInterval(easingLoop);
+            return;
+          }
+
+          if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+            clearInterval(easingLoop);
+            return;
+          }
+
+          applyTouchMove(speed.x * 30, speed.y * 30);
+          speed.x *= 0.8;
+          speed.y *= 0.8;
+        }, 10);
+      }
+    }
+
+    if (env.supportsTouch) {
+      i.event.bind(element, 'touchstart', touchStart);
+      i.event.bind(element, 'touchmove', touchMove);
+      i.event.bind(element, 'touchend', touchEnd);
+    } else if (env.supportsIePointer) {
+      if (window.PointerEvent) {
+        i.event.bind(element, 'pointerdown', touchStart);
+        i.event.bind(element, 'pointermove', touchMove);
+        i.event.bind(element, 'pointerup', touchEnd);
+      } else if (window.MSPointerEvent) {
+        i.event.bind(element, 'MSPointerDown', touchStart);
+        i.event.bind(element, 'MSPointerMove', touchMove);
+        i.event.bind(element, 'MSPointerUp', touchEnd);
+      }
+    }
+  };
+
+  var defaultSettings = function () {
+    return {
+      handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],
+      maxScrollbarLength: null,
+      minScrollbarLength: null,
+      scrollingThreshold: 1000,
+      scrollXMarginOffset: 0,
+      scrollYMarginOffset: 0,
+      suppressScrollX: false,
+      suppressScrollY: false,
+      swipeEasing: true,
+      useBothWheelAxes: false,
+      wheelPropagation: true,
+      wheelSpeed: 1
+    };
+  };
+
+  var handlers = {
+    'click-rail': clickRail,
+    'drag-thumb': dragThumb,
+    keyboard: keyboard,
+    wheel: wheel,
+    touch: touch
+  };
+
+  var PerfectScrollbar = function PerfectScrollbar(element, userSettings) {
+    var this$1 = this;
+    if (userSettings === void 0) userSettings = {};
+
+    if (typeof element === 'string') {
+      element = document.querySelector(element);
+    }
+
+    if (!element || !element.nodeName) {
+      throw new Error('no element is specified to initialize PerfectScrollbar');
+    }
+
+    this.element = element;
+    element.classList.add(cls.main);
+    this.settings = defaultSettings();
+
+    for (var key in userSettings) {
+      this$1.settings[key] = userSettings[key];
+    }
+
+    this.containerWidth = null;
+    this.containerHeight = null;
+    this.contentWidth = null;
+    this.contentHeight = null;
+
+    var focus = function () {
+      return element.classList.add(cls.state.focus);
+    };
+
+    var blur = function () {
+      return element.classList.remove(cls.state.focus);
+    };
+
+    this.isRtl = get(element).direction === 'rtl';
+
+    this.isNegativeScroll = function () {
+      var originalScrollLeft = element.scrollLeft;
+      var result = null;
+      element.scrollLeft = -1;
+      result = element.scrollLeft < 0;
+      element.scrollLeft = originalScrollLeft;
+      return result;
+    }();
+
+    this.negativeScrollAdjustment = this.isNegativeScroll ? element.scrollWidth - element.clientWidth : 0;
+    this.event = new EventManager();
+    this.ownerDocument = element.ownerDocument || document;
+    this.scrollbarXRail = div(cls.element.rail('x'));
+    element.appendChild(this.scrollbarXRail);
+    this.scrollbarX = div(cls.element.thumb('x'));
+    this.scrollbarXRail.appendChild(this.scrollbarX);
+    this.scrollbarX.setAttribute('tabindex', 0);
+    this.event.bind(this.scrollbarX, 'focus', focus);
+    this.event.bind(this.scrollbarX, 'blur', blur);
+    this.scrollbarXActive = null;
+    this.scrollbarXWidth = null;
+    this.scrollbarXLeft = null;
+    var railXStyle = get(this.scrollbarXRail);
+    this.scrollbarXBottom = parseInt(railXStyle.bottom, 10);
+
+    if (isNaN(this.scrollbarXBottom)) {
+      this.isScrollbarXUsingBottom = false;
+      this.scrollbarXTop = toInt(railXStyle.top);
+    } else {
+      this.isScrollbarXUsingBottom = true;
+    }
+
+    this.railBorderXWidth = toInt(railXStyle.borderLeftWidth) + toInt(railXStyle.borderRightWidth); // Set rail to display:block to calculate margins
+
+    set(this.scrollbarXRail, {
+      display: 'block'
+    });
+    this.railXMarginWidth = toInt(railXStyle.marginLeft) + toInt(railXStyle.marginRight);
+    set(this.scrollbarXRail, {
+      display: ''
+    });
+    this.railXWidth = null;
+    this.railXRatio = null;
+    this.scrollbarYRail = div(cls.element.rail('y'));
+    element.appendChild(this.scrollbarYRail);
+    this.scrollbarY = div(cls.element.thumb('y'));
+    this.scrollbarYRail.appendChild(this.scrollbarY);
+    this.scrollbarY.setAttribute('tabindex', 0);
+    this.event.bind(this.scrollbarY, 'focus', focus);
+    this.event.bind(this.scrollbarY, 'blur', blur);
+    this.scrollbarYActive = null;
+    this.scrollbarYHeight = null;
+    this.scrollbarYTop = null;
+    var railYStyle = get(this.scrollbarYRail);
+    this.scrollbarYRight = parseInt(railYStyle.right, 10);
+
+    if (isNaN(this.scrollbarYRight)) {
+      this.isScrollbarYUsingRight = false;
+      this.scrollbarYLeft = toInt(railYStyle.left);
+    } else {
+      this.isScrollbarYUsingRight = true;
+    }
+
+    this.scrollbarYOuterWidth = this.isRtl ? outerWidth(this.scrollbarY) : null;
+    this.railBorderYWidth = toInt(railYStyle.borderTopWidth) + toInt(railYStyle.borderBottomWidth);
+    set(this.scrollbarYRail, {
+      display: 'block'
+    });
+    this.railYMarginHeight = toInt(railYStyle.marginTop) + toInt(railYStyle.marginBottom);
+    set(this.scrollbarYRail, {
+      display: ''
+    });
+    this.railYHeight = null;
+    this.railYRatio = null;
+    this.reach = {
+      x: element.scrollLeft <= 0 ? 'start' : element.scrollLeft >= this.contentWidth - this.containerWidth ? 'end' : null,
+      y: element.scrollTop <= 0 ? 'start' : element.scrollTop >= this.contentHeight - this.containerHeight ? 'end' : null
+    };
+    this.isAlive = true;
+    this.settings.handlers.forEach(function (handlerName) {
+      return handlers[handlerName](this$1);
+    });
+    this.lastScrollTop = Math.floor(element.scrollTop); // for onScroll only
+
+    this.lastScrollLeft = element.scrollLeft; // for onScroll only
+
+    this.event.bind(this.element, 'scroll', function (e) {
+      return this$1.onScroll(e);
+    });
+    updateGeometry(this);
+  };
+
+  PerfectScrollbar.prototype.update = function update() {
+    if (!this.isAlive) {
+      return;
+    } // Recalcuate negative scrollLeft adjustment
+
+
+    this.negativeScrollAdjustment = this.isNegativeScroll ? this.element.scrollWidth - this.element.clientWidth : 0; // Recalculate rail margins
+
+    set(this.scrollbarXRail, {
+      display: 'block'
+    });
+    set(this.scrollbarYRail, {
+      display: 'block'
+    });
+    this.railXMarginWidth = toInt(get(this.scrollbarXRail).marginLeft) + toInt(get(this.scrollbarXRail).marginRight);
+    this.railYMarginHeight = toInt(get(this.scrollbarYRail).marginTop) + toInt(get(this.scrollbarYRail).marginBottom); // Hide scrollbars not to affect scrollWidth and scrollHeight
+
+    set(this.scrollbarXRail, {
+      display: 'none'
+    });
+    set(this.scrollbarYRail, {
+      display: 'none'
+    });
+    updateGeometry(this);
+    processScrollDiff(this, 'top', 0, false, true);
+    processScrollDiff(this, 'left', 0, false, true);
+    set(this.scrollbarXRail, {
+      display: ''
+    });
+    set(this.scrollbarYRail, {
+      display: ''
+    });
+  };
+
+  PerfectScrollbar.prototype.onScroll = function onScroll(e) {
+    if (!this.isAlive) {
+      return;
+    }
+
+    updateGeometry(this);
+    processScrollDiff(this, 'top', this.element.scrollTop - this.lastScrollTop);
+    processScrollDiff(this, 'left', this.element.scrollLeft - this.lastScrollLeft);
+    this.lastScrollTop = Math.floor(this.element.scrollTop);
+    this.lastScrollLeft = this.element.scrollLeft;
+  };
+
+  PerfectScrollbar.prototype.destroy = function destroy() {
+    if (!this.isAlive) {
+      return;
+    }
+
+    this.event.unbindAll();
+    remove(this.scrollbarX);
+    remove(this.scrollbarY);
+    remove(this.scrollbarXRail);
+    remove(this.scrollbarYRail);
+    this.removePsClasses(); // unset elements
+
+    this.element = null;
+    this.scrollbarX = null;
+    this.scrollbarY = null;
+    this.scrollbarXRail = null;
+    this.scrollbarYRail = null;
+    this.isAlive = false;
+  };
+
+  PerfectScrollbar.prototype.removePsClasses = function removePsClasses() {
+    this.element.className = this.element.className.split(' ').filter(function (name) {
+      return !name.match(/^ps([-_].+|)$/);
+    }).join(' ');
+  };
+
+  const debounce = function (func, wait, immediate) {
+    let timeout;
+    return function () {
+      let context = this;
+      let args = arguments;
+
+      let later = function () {
+        timeout = null;
+
+        if (!immediate) {
+          func.apply(context, args);
+        }
+      };
+
+      let callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+
+      if (callNow) {
+        func.apply(context, args);
+      }
+    };
+  };
+
+  const touchEvents = function () {
+    let result = false;
+
+    if ('ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch) {
+      result = true;
+    }
+
+    return result;
+  };
+
+  class AbstractUIComponent {
+    // Init callback
+    onInit() {
+      let onInit = this.opts.onInit;
+
+      if (typeof onInit === 'function') {
+        onInit.call(this.el);
+      }
+    } // Update callback
+
+
+    onUpdate() {
+      let onUpdate = this.opts.onUpdate;
+
+      if (typeof onUpdate === 'function') {
+        onUpdate.call(this.el);
+      }
+    } // Destroy callback
+
+
+    onDestroy() {
+      let onDestroy = this.opts.onDestroy;
+
+      if (typeof onDestroy === 'function') {
+        onDestroy.call(this.el);
+      }
+    } // Show callback
+
+
+    onShow() {
+      let onShow = this.opts.onShow;
+
+      if (typeof onShow === 'function') {
+        onShow.call(this.el);
+      }
+    } // Close callback
+
+
+    onClose() {
+      let onClose = this.opts.onClose;
+
+      if (typeof onClose === 'function') {
+        onClose.call(this.el);
+      }
+    } // Debug log
+
+
+    log(...args) {
+      if (this.debug) {
+        if (typeof this.debug === 'function') {
+          this.debug(...args);
+        } else {
+          console.log(...args);
+        }
+      }
+    }
+
+  }
+
+  const NAME = 'coolSelect';
+  const DATA_KEY = 'plugin_coolSelect';
+
+  class Select extends AbstractUIComponent {
+    constructor(el, opts) {
+      super();
+      this.opts = {};
+
+      if (window.Cool.settings.select) {
+        $.extend(true, this.opts, $.fn[NAME].defaults, window.Cool.settings.select, opts);
+      } else {
+        $.extend(true, this.opts, $.fn[NAME].defaults, opts);
+      }
+
+      this.el = el;
+      this.debug = this.opts.debug;
+      this.init();
+    } // Init plugin
+
+
+    init() {
+      $.when(this.buildCache()).then(() => {
+        this.buildScroll();
+        this.bindEvents();
+
+        if (this.data[this.name].length > 0) {
+          this.setData();
+        }
+
+        this.onInit();
+      });
+    } // Remove plugin instance completely
+
+
+    destroy() {
+      this.unbindEvents();
+      this.$el.removeData(DATA_KEY);
+      this.onDestroy();
+    } // Update plugin data
+
+
+    update() {
+      this.buildCache();
+      this.bindEvents();
+      this.onUpdate();
+    } // Cache DOM nodes for performance
+
+
+    buildCache() {
+      this.$el = $(this.el);
+      this.$selectHeader = this.$el.find('.select-header');
+      this.$selectIconContainer = this.$selectHeader.find('.select-icon');
+      this.name = this.$el.data('name') ? this.$el.data('name') : this.opts.name;
+      this.scrollContentHeight = this.$el.data('scrollContentHeight') ? this.$el.data('scrollContentHeight') : this.opts.scrollContentHeight;
+      this.items = this.$el.data('items') ? this.$el.data('items') : this.opts.items;
+      this.data = {};
+      this.data[this.name] = [];
+      this.searchData = [];
+      this.searchApi = this.$el.data('searchApi') ? this.$el.data('searchApi') : this.opts.searchApi;
+      this.type = this.$el.data('type') ? this.$el.data('type') : this.opts.type;
+      this.contentOpen = false;
+
+      if (this.$el.data('setData') && this.$el.data('setData') != '') {
+        this.data = this.$el.data('setData');
+      }
+
+      if (this.$el.find('.select-search')) {
+        this.showSearch = true;
+      } else {
+        this.showSearch = this.$el.data('showSearch') ? this.$el.data('showSearch') : this.opts.showSearch;
+      }
+
+      if (this.$el.find('.select-footer')) {
+        this.showFooter = true;
+      } else {
+        this.showFooter = this.$el.data('showFooter') ? this.$el.data('showFooter') : this.opts.showFooter;
+      }
+
+      if (this.items.length) {
+        let items = this._renderItemList(this.items);
+
+        this.$select = $(`
+                <div class="select-content">
+
+                    ${this._renderSearch()}
+
+                    <div class="select-scrollable-content">${items}</div>
+
+                    ${this._renderFooter()}
+
+                </div>
+            `);
+        this.$el.append(this.$select);
+        this.$scrollableContent = this.$select.find('.select-scrollable-content') ? this.$select.find('.select-scrollable-content') : false;
+        this.$selectItems = this.$select.find('.select-item');
+        this.$selectLabels = this.$select.find('[data-label]');
+
+        if (this.showSearch) {
+          this.$searchContainer = this.$select.find('.select-search');
+          this.$searchInput = this.$select.find('[name="select-search"]');
+          this.$searchIconContainer = this.$select.find('.select-search-icon');
+          this.$clearSearchButton = this.$select.find('[data-clear-search]');
+        }
+
+        if (this.showFooter) {
+          this.$footerContainer = this.$select.find('.select-footer');
+          this.$closeButton = this.$select.find('[data-select-close]');
+        }
+
+        $.each(this.$selectLabels, function (i, el) {
+          this.searchData.push({
+            id: i,
+            val: $(el).text().trim()
+          });
+        });
+        this.log(this.$el);
+        this.log(this.$select);
+        this.log(this.$scrollableContent);
+        this.log('Name: ' + this.name);
+        this.log('Show search: ' + this.showSearch);
+        this.log('Show footer: ' + this.showFooter);
+        this.log('Scroll content height: ' + this.scrollContentHeight + 'px');
+        this.log(this.items);
+        this.log(this.searchData);
+      } else {
+        this.$select = this.$el.find('.select-content');
+        this.$scrollableContent = this.$select.find('.select-scrollable-content');
+        this.$selectItems = this.$select.find('.select-item');
+        this.$selectLabels = this.$select.find('[data-label]');
+
+        if (this.showSearch) {
+          this.$searchContainer = this.$select.find('.select-search');
+          this.$searchInput = this.$select.find('[name="select-search"]');
+          this.$searchIconContainer = this.$select.find('.select-search-icon');
+          this.$clearSearchButton = this.$select.find('[data-clear-search]');
+        }
+
+        if (this.showFooter) {
+          this.$footerContainer = this.$select.find('.select-footer');
+          this.$closeButton = this.$select.find('[data-select-close]');
+        }
+
+        $.each(this.$selectLabels, (i, el) => {
+          this.searchData.push({
+            id: i,
+            val: $(el).text().trim()
+          });
+        });
+        this.log(this.$el);
+        this.log(this.$select);
+        this.log(this.$scrollableContent);
+        this.log('Name: ' + this.name);
+        this.log('Show search: ' + this.showSearch);
+        this.log('Show footer: ' + this.showFooter);
+        this.log('Scroll content height: ' + this.scrollContentHeight + 'px');
+        this.log(this.items);
+        this.log(this.searchData);
+        return true;
+      }
+    } // Build scroll
+
+
+    buildScroll() {
+      if (this.$scrollableContent.length > 0) {
+        let scrollContentHeight = this.scrollContentHeight;
+
+        if (this.showSearch) {
+          scrollContentHeight = scrollContentHeight - (this.$searchContainer.outerHeight(true) || 0);
+        }
+
+        if (this.showFooter) {
+          scrollContentHeight = scrollContentHeight - (this.$footerContainer.outerHeight(true) || 0);
+        }
+
+        this.$scrollableContent.css({
+          'max-height': scrollContentHeight - parseInt(this.$scrollableContent.css('marginTop'), 10) - parseInt(this.$scrollableContent.css('marginBottom'), 10) + 'px'
+        });
+
+        if (touchEvents()) {
+          this.$scrollableContent.css({
+            'overflow-y': 'auto'
+          });
+        } else {
+          this.$scrollableContent.addClass('ps-dark');
+          this.scroll = new PerfectScrollbar(this.$scrollableContent[0], {
+            wheelSpeed: 1,
+            wheelPropagation: false,
+            minScrollbarLength: 20,
+            scrollYMarginOffset: -1,
+            suppressScrollY: true,
+            suppressScrollX: true
+          });
+
+          if (this.$scrollableContent[0].offsetHeight < this.$scrollableContent[0].scrollHeight) {
+            this.$scrollableContent.addClass('ps-show-rail-y');
+            this.scroll.settings.suppressScrollY = false;
+          }
+        }
+      }
+    } // Bind events that trigger methods
+
+
+    bindEvents() {
+      let self = this;
+      this.$selectHeader.on('click' + '.' + NAME, () => {
+        if (this.contentOpen) {
+          this.close();
+        } else {
+          this.show();
+        }
+      });
+      this.$el.on('change' + '.' + NAME, 'input[type="checkbox"]', function () {
+        let val = $(this).val();
+
+        if (this.checked) {
+          self.data[self.name].indexOf(val) === -1 ? self.data[self.name].push(val) : false;
+        } else {
+          self.data[self.name] = self.data[self.name].filter(n => n != val);
+        }
+
+        self.onSelect(this);
+      });
+      this.$el.on('change' + '.' + NAME, 'input[type="radio"]', function () {
+        let val = $(this).val();
+
+        if (this.checked) {
+          self.data[self.name] = val;
+          self.$select.find('input[type="radio"]').not($(this)).prop('checked', false);
+          self.$select.find('input[type="radio"]').not($(this)).removeClass('checked');
+        } else {
+          self.data[self.name] = [];
+        }
+      });
+      this.$el.on('click' + '.' + NAME, 'input[type="radio"]', function () {
+        if ($(this).hasClass('checked')) {
+          self.data[plugin.name] = [];
+          $(this).prop('checked', false);
+          $(this).removeClass('checked');
+        } else {
+          $(this).addClass('checked');
+        }
+
+        self.onSelect(this);
+      });
+
+      if (this.scroll) {
+        this.$scrollableContent.find('.ps__thumb-y').mousedown(function () {
+          self.$scrollableContent.addClass('ps-mousedown-scroll');
+        });
+        $(document).mouseup(function () {
+          if (self.$scrollableContent.hasClass('ps-mousedown-scroll')) {
+            self.$scrollableContent.removeClass('ps-mousedown-scroll');
+          }
+        });
+      }
+
+      if (this.showSearch) {
+        this.$searchInput.on('keydown' + '.' + NAME, debounce(function () {
+          self.searchString = $(this).val().trim();
+          self.search.call(self);
+        }, 250));
+        this.$searchInput.on('focusin' + '.' + NAME, function () {
+          self.$searchContainer.addClass('focused');
+        });
+        this.$searchInput.on('focusout' + '.' + NAME, function () {
+          self.$searchContainer.removeClass('focused');
+        });
+        this.$clearSearchButton.on('click' + '.' + NAME, function () {
+          if (self.searchString.length) {
+            self.$searchInput.val('');
+            self.searchString = '';
+            self.search.call(self);
+          } else {
+            return;
+          }
+        });
+      }
+
+      if (this.showFooter) {
+        this.$closeButton.on('click' + '.' + NAME, () => {
+          this.close();
+        });
+      }
+
+      $(document).on('touchstart click', function (e) {
+        if (!self.$el.is(e.target) && self.$el.has(e.target).length === 0 && self.contentOpen) {
+          self.close.call(self);
+        }
+      });
+    } // Unbind events that trigger methods
+
+
+    unbindEvents() {
+      this.$el.off('.' + NAME);
+    } // Get data
+
+
+    getData(data) {
+      if (data) {
+        return this.data[data];
+      } else {
+        return this.data;
+      }
+    } // Set data
+
+
+    setData() {
+      let self = this;
+      let type = null;
+      let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+      this.$selectIconContainer.html(`<i class="${faNameSpace} fa-check text-green icon"></i>`);
+
+      if (this.searchApi.length) {
+        let searchUrl = this.searchApi;
+        let itemCount = this.data[this.name].length;
+        let currentCount = 0;
+        this.data[this.name].forEach(function (value) {
+          searchUrl += encodeURIComponent('#' + value);
+          currentCount++;
+
+          if (currentCount !== itemCount) {
+            searchUrl += '+';
+          }
+        });
+        $.ajax({
+          method: 'GET',
+          url: searchUrl
+        }).done(function (data) {
+          let items = data.map(function (item) {
+            if (item.name) {
+              let label = item.name;
+            } else if (item.label) {
+              let label = item.label;
+            } else if (item.value) {
+              let label = item.value;
+            }
+
+            return {
+              id: item.id.toString(),
+              label: label
+            };
+          });
+          items = items.filter(function (item) {
+            return self.data[self.name].indexOf(item.id) > -1;
+          });
+          let result = $(self._renderItemList(items));
+          $.when(self.$scrollableContent.append(result)).then(function () {
+            if (self.$scrollableContent[0].offsetHeight < self.$scrollableContent[0].scrollHeight) {
+              self.scroll.update();
+              self.scroll.settings.suppressScrollY = false;
+              self.$scrollableContent.addClass('ps-show-rail-y');
+            } else {
+              self.scroll.update();
+              self.scroll.settings.suppressScrollY = true;
+              self.$scrollableContent.removeClass('ps-show-rail-y');
+            }
+
+            if (self.$select.find(':input[type="checkbox"]').length) {
+              type = 'checkbox';
+            } else if (self.$select.find(':input[type="radio"]').length) {
+              type = 'radio';
+            }
+
+            if (type == 'checkbox') {
+              self.data[self.name].forEach(function (value) {
+                let $input = self.$select.find(':input').filter(function () {
+                  return this.value == value;
+                });
+                $input.prop('checked', true);
+                self.onSelect($input[0]);
+              });
+            } else if (type == 'radio') {
+              let $input = self.$select.find(':input').filter(function () {
+                return this.value == self.data[self.name];
+              });
+              $input.prop('checked', true);
+              $input.addClass('checked');
+              self.onSelect($input[0]);
+            }
+          });
+        });
+      } else {
+        if (this.$select.find(':input[type="checkbox"]').length) {
+          type = 'checkbox';
+        } else if (this.$select.find(':input[type="radio"]').length) {
+          type = 'radio';
+        }
+
+        if (type == 'checkbox') {
+          this.data[this.name].forEach(function (value) {
+            let $input = self.$select.find(':input').filter(function () {
+              return this.value == value;
+            });
+            $input.prop('checked', true);
+            self.onSelect($input[0]);
+          });
+        } else if (type == 'radio') {
+          let $input = this.$select.find(':input').filter(function () {
+            return this.value == self.data[self.name];
+          });
+          $input.prop('checked', true);
+          $input.addClass('checked');
+          this.onSelect($input[0]);
+        }
+      }
+    } // Search
+
+
+    search() {
+      let self = this;
+      let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+
+      if (this.searchString.length) {
+        if (this.searchApi.length) {
+          this.$scrollableContent.find('input:not(:checked)').parents('.select-item').not('.static-item').remove();
+          $.ajax({
+            method: 'GET',
+            url: this.searchApi + this.searchString
+          }).done(function (data) {
+            let items = data.map(function (item) {
+              return {
+                id: item.id.toString(),
+                label: item.name || item.label || item.value || null
+              };
+            });
+            items = items.filter(function (item) {
+              return !(self.data[self.name].indexOf(item.id) > -1);
+            }); // Remove 0 id from results
+
+            items = items.filter(function (item) {
+              return [0].indexOf(item.id) > -1;
+            });
+            let result = $(self._renderItemList(items));
+            $.when(self.$scrollableContent.append(result)).then(function () {
+              let faNameSpace = self.opts.faPro ? 'fal' : 'fas';
+              self.$searchIconContainer.html(`<i class="${faNameSpace} fa-times icon"></i>`);
+              self.$searchIconContainer.attr('data-clear-search', 'true');
+
+              if (self.$scrollableContent[0].offsetHeight < self.$scrollableContent[0].scrollHeight) {
+                self.scroll.update();
+                self.scroll.settings.suppressScrollY = false;
+                self.$scrollableContent.addClass('ps-show-rail-y');
+              } else {
+                self.scroll.update();
+                self.scroll.settings.suppressScrollY = true;
+                self.$scrollableContent.removeClass('ps-show-rail-y');
+              }
+            });
+          });
+        } else {
+          let results = this.searchData.filter(function (item) {
+            return item.val.toLocaleLowerCase().indexOf(self.searchString.toLocaleLowerCase()) > -1;
+          });
+          this.$selectItems.removeClass('d-none');
+          this.$selectItems.removeClass('visible');
+          results.forEach(function (item) {
+            $(self.$selectItems[item.id]).addClass('visible');
+          });
+          this.$selectItems.not('.visible').addClass('d-none');
+          this.$searchIconContainer.html(`<i class="${faNameSpace} fa-times icon"></i>`);
+          this.$searchIconContainer.attr('data-clear-search', 'true');
+        }
+      } else {
+        if (this.searchApi.length) {
+          this.$scrollableContent.find('input:not(:checked)').parents('.select-item').not('.static-item').remove();
+          this.$searchIconContainer.html(`<i class="${faNameSpace} fa-search icon"></i>`);
+          this.$searchIconContainer.attr('data-clear-search', '');
+        } else {
+          this.$selectItems.removeClass('d-none');
+          this.$selectItems.removeClass('visible');
+          this.$searchIconContainer.html(`<i class="${faNameSpace} fa-search icon"></i>`);
+          this.$searchIconContainer.attr('data-clear-search', '');
+        }
+      }
+
+      if (this.scroll) {
+        this.scroll.update();
+      }
+
+      this.onUpdate();
+    } // Show
+
+
+    show() {
+      if (this.$el.hasClass('show')) {
+        return;
+      }
+
+      let $otherSelects = $('.select.show');
+      let zindex = 1;
+      let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+
+      if ($otherSelects.length) {
+        zindex = parseInt($otherSelects.first().css('z-index'), 10) + 2;
+      }
+
+      this.$el.css({
+        'max-height': this.scrollContentHeight + this.$selectHeader.outerHeight(true) + 'px'
+      });
+      this.$el.addClass('show');
+
+      if (!$otherSelects.length) {
+        zindex = parseInt(this.$el.css('z-index'), 10) + 1;
+      }
+
+      this.$el.css({
+        'z-index': zindex
+      });
+
+      if (this.scroll && this.$scrollableContent.length) {
+        if (this.$scrollableContent[0].offsetHeight < this.$scrollableContent[0].scrollHeight) {
+          this.$scrollableContent[0].scrollTop = 1;
+          this.$scrollableContent[0].scrollTop = 0;
+        }
+      }
+
+      this.$selectIconContainer.html(`<i class="${faNameSpace} fa-angle-up icon"></i>`);
+      this.contentOpen = true;
+      this.onShow();
+    } // Close
+
+
+    close() {
+      let self = this;
+      let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+      this.$el.css('max-height', '');
+      this.$el.removeClass('show');
+      setTimeout(() => {
+        self.$el.removeAttr('style');
+      }, 300);
+
+      if (this.data[this.name].length > 0) {
+        this.$selectIconContainer.html(`<i class="${faNameSpace} fa-check text-green icon"></i>`);
+      } else {
+        this.$selectIconContainer.html(`<i class="${faNameSpace} fa-angle-down icon"></i>`);
+      }
+
+      this.contentOpen = false;
+      this.onClose();
+    }
+
+    onSelect(el) {
+      let onSelect = this.opts.onSelect;
+
+      if (typeof onSelect === 'function') {
+        onSelect.call(el);
+      }
+    }
+
+    _renderItemList(items) {
+      let html = '';
+
+      for (let i = 0; i < items.length; ++i) {
+        html += `
+
+                <div class="select-item">
+
+                    <div class="select-item-${this.type}">
+
+                        <div class="styled-${this.type}">">
+
+                            <input type="${this.type}">" id="select-${this.name}-${items[i].id}" value="${items[i].id}">
+
+                            <label for="select-${this.name}-${items[i].id}">
+
+                                <span class="radio-inner">
+                                    <svg viewBox="0 0 18 18">
+                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
+                                    </svg>
+                                </span>
+
+                                <span class="${this.type}">-label" data-label>
+                                    ${items[i].label}
+                                </span>
+
+                            </label>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            `;
+      }
+    }
+
+    _renderSearch() {
+      if (!this.showSearch) {
+        return '';
+      }
+
+      let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+      return `
+
+            <div class="select-search">
+
+                <div class="select-search-input">
+
+                    <input type="text" name="select-search" value="" placeholder="${this.opts.searchPlaceholder}">
+
+                </div>
+
+                <div class="select-search-icon">
+
+                    <i class="${faNameSpace} fa-search icon"></i>
+
+                </div>
+
+            </div>
+
+        `;
+    }
+
+    _renderFooter() {
+      if (!this.showFooter) {
+        return '';
+      }
+
+      return `
+
+            <div class="select-footer">
+
+                <button class="btn btn-primary" type="button" data-select-close>
+                    ${this.opts.btnCloseText}
+                </button>
+
+            </div>
+
+        `;
+    }
+
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let data = $(this).data(DATA_KEY);
+
+        const _config = typeof config === 'object' && config;
+
+        if (!data) {
+          data = new Select(this, _config);
+          $(this).data(DATA_KEY, data);
+        }
+
+        if (typeof config === 'string') {
+          if (typeof data[config] === 'undefined') {
+            throw new TypeError(`No method named "${config}"`);
+          }
+
+          data[config]();
+        }
+      });
+    }
+
+  }
+
+  if (typeof $ !== 'undefined') {
+    // jQuery
+    const JQUERY_NO_CONFLICT = $.fn[NAME];
+    $.fn[NAME] = Select._jQueryInterface;
+    $.fn[NAME].Constructor = Select;
+
+    $.fn[NAME].noConflict = () => {
+      $.fn[NAME] = JQUERY_NO_CONFLICT;
+      return Select._jQueryInterface;
+    };
+
+    $.fn[NAME].defaults = {
+      name: '',
+      type: 'checkbox',
+      scrollContentHeight: 100,
+      faPro: false,
+      items: [],
+      showSearch: false,
+      showFooter: false,
+      searchApi: false,
+      onInit: null,
+      onUpdate: null,
+      onDestroy: null,
+      onShow: null,
+      onClose: null,
+      onSearch: null,
+      onSelect: null,
+      buildScroll: null,
+      searchPlaceholder: null,
+      btnCloseText: null,
+      debug: false
+    };
+  }
+
+  return Select;
+
+}));
+//# sourceMappingURL=select.js.map