(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
'use strict';

var _chat = require('./chat');

// initialize all elements
var componentsList = document.querySelectorAll(_chat.Chat.getSelector()); // Import all components

for (var i = 0; i < componentsList.length; i++) {
  new _chat.Chat(componentsList[i]);
}
},{"./chat":2}],2:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Chat = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _elementHelpers = require('../helpers/element-helpers');

var _elementHelpers2 = _interopRequireDefault(_elementHelpers);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/**
 * Declare constants
 */
var attributeBase = 'data-rs-chat';

var Chat = exports.Chat = function () {
  function Chat(element) {
    _classCallCheck(this, Chat);

    this.element = element;
    this.box = _elementHelpers2.default.getElementsByAttribute(this.attributes.box);
    this.header = _elementHelpers2.default.getElementByAttribute(this.attributes.header);
    this.textarea = _elementHelpers2.default.getElementByAttribute(this.attributes.textarea);
    this.button = _elementHelpers2.default.getElementByAttribute(this.attributes.button);
    this.quickSuggestButton = _elementHelpers2.default.getElementsByAttribute(this.attributes.quickSuggestButton);
    this.minimized = _elementHelpers2.default.getElementByAttribute(this.attributes.minimized);
    this.close = _elementHelpers2.default.getElementByAttribute(this.attributes.close);
    this.settingsButton = _elementHelpers2.default.getElementsByAttribute(this.attributes.settingsButton);
    this.settings = _elementHelpers2.default.getElementByAttribute(this.attributes.settings);
    this.languageSelector = _elementHelpers2.default.getElementByAttribute(this.attributes.languageSelector);
    this.languageSaveButton = _elementHelpers2.default.getElementByAttribute(this.attributes.languageSaveButton);
    this.languageNotification = _elementHelpers2.default.getElementByAttribute(this.attributes.languageNotification);
    this.popup = _elementHelpers2.default.getElementByAttribute(this.attributes.popup);
    this.popupShow = _elementHelpers2.default.getElementByAttribute(this.attributes.popupShow);
    this.popupHide = _elementHelpers2.default.getElementsByAttribute(this.attributes.popupHide);
    this.saveLanguageButton = _elementHelpers2.default.getElementByAttribute(this.attributes.languageSaveButton);
    this.addEventHandlers();
  }

  /**
   * Declare classes
   */


  _createClass(Chat, [{
    key: 'addEventHandlers',


    /**
     * Add event handlers
     */
    value: function addEventHandlers() {
      this.handleHeaderDivider();
      this.toggleInputButton();
      this.quickSuggestButtonsHandler();
      this.openChat();
      this.closeChat();
      this.userInputToSpeechBubble();
      this.toggleSettingsHandler();
      this.languageSelectorHandler();
      this.popUpHandler();
      this.languageSaveButtonHandler();
    }

    /**
     * Adds a divider to the header when scrolling in the chat box
     */

  }, {
    key: 'handleHeaderDivider',
    value: function handleHeaderDivider() {
      var _this2 = this;

      this.box.forEach(function (element) {
        element.addEventListener('scroll', function () {
          var scrollTop = element.scrollTop;

          var header = element.previousElementSibling;

          var headerClassList = header.classList;

          if (scrollTop > 1) {
            headerClassList.remove(_this2.classes.dividerIsHidden);
          } else {
            headerClassList.add(_this2.classes.dividerIsHidden);
          }
        });
      });
    }

    /**
     * Toggles the button from enabled to disabled when typing in the textarea
     */

  }, {
    key: 'toggleInputButton',
    value: function toggleInputButton() {
      var _this3 = this;

      this.textarea.addEventListener('input', function () {
        if (_this3.textarea.value.length === 0) {
          _this3.button.disabled = true;
        } else {
          _this3.button.disabled = false;
        }
      });
    }

    /**
     * Opens the chat box when clicking on the chat-minimized button
     */

  }, {
    key: 'openChat',
    value: function openChat() {
      if (this.minimized) {
        var _this = this;

        this.minimized.addEventListener('click', function () {
          this.classList.add(_this.classes.displayNone);
          _this.element.classList.remove(_this.classes.displayNone);
        });
      }
    }

    /**
     * Closes the chatbox when clicking on the close button
     */

  }, {
    key: 'closeChat',
    value: function closeChat() {
      var _this4 = this;

      if (this.close && this.minimized) {
        this.close.addEventListener('click', function (e) {
          e.preventDefault();
          _this4.element.classList.add(_this4.classes.displayNone);
          _this4.minimized.classList.remove(_this4.classes.displayNone);
        });
      }
    }

    /**
     * Creates a speech bubbel when clicking on the quick suggestion buttons
     */

  }, {
    key: 'quickSuggestButtonsHandler',
    value: function quickSuggestButtonsHandler() {
      var _this5 = this;

      if (this.quickSuggestButton) {
        this.quickSuggestButton.forEach(function (item) {
          item.addEventListener('click', function () {
            var text = item.innerHTML;
            var parentElement = item.parentElement;
            parentElement.removeAttribute(_this5.attributes.content);
            parentElement.removeAttribute(_this5.attributes.quickSuggest);
            parentElement.setAttribute(_this5.attributes.content, 'user');
            parentElement.innerHTML = '<div class="chat__content chat__content--user speech-bubble speech-bubble--user">\n            ' + text + '\n          </div>';

            _this5.box.scrollTop = _this5.box.scrollHeight;
          });
        });
      }
    }

    /**
     * Changes the input text to a user speech bubble when clicking on the button
     */

  }, {
    key: 'userInputToSpeechBubble',
    value: function userInputToSpeechBubble() {
      var _this6 = this;

      var createSpeechBubble = function createSpeechBubble(e) {
        if (e.type === 'click' || e.key === 'Enter') {
          var inputText = _this6.textarea.value;

          // Remove the quickSuggestionButtons if they exist;
          var quickSuggestion = _elementHelpers2.default.getElementByAttribute(_this6.attributes.quickSuggest);
          if (quickSuggestion) {
            quickSuggestion.remove();
          }

          // If the last element is from the bot it should add a --first modifier to it
          var box = _elementHelpers2.default.getElementByAttribute(_this6.attributes.box, 'chat');

          box.innerHTML = box.innerHTML += '<div class=\'chat-content__wrapper\' data-rs-chat-content=\'user\'><div class="chat__content chat__content--user speech-bubble speech-bubble--user">\n        ' + inputText + '</div></div>';

          if (box.lastElementChild) {
            var islastElementFromBot = box.lastElementChild.getAttribute(_this6.attributes.content) === 'bot';

            if (islastElementFromBot) {
              box.lastElementChild.classList.add('chat-content__wrapper--first');
            }
          }

          // Empty the text box
          _this6.textarea.value = '';
          // Set height back to original'
          _this6.textarea.style.height = 'auto';

          // Disable the button
          _this6.button.disabled = true;
          // Scroll to the bottom of the box
          box.scrollTop = box.scrollHeight;
        }
      };

      this.button.addEventListener('click', createSpeechBubble);
      this.textarea.addEventListener('keydown', createSpeechBubble);
    }
  }, {
    key: 'toggleSettingsHandler',
    value: function toggleSettingsHandler() {
      var _this7 = this;

      this.settingsButton.forEach(function (item) {
        item.addEventListener('click', function () {
          _this7.openAndCloseSettings();
        });
      });
    }
  }, {
    key: 'languageSelectorHandler',
    value: function languageSelectorHandler() {
      var _this8 = this;

      this.languageSelector.addEventListener('change', function () {
        var value = _this8.languageSelector.value;
        if (value !== '') {
          _this8.languageSaveButton.removeAttribute('disabled');
          _this8.languageNotification.classList.remove('display-none');
        } else {
          _this8.languageSaveButton.setAttribute('disabled', 'disabled');
          _this8.languageNotification.classList.add('display-none');
        }
      });
    }
  }, {
    key: 'popUpHandler',
    value: function popUpHandler() {
      var _this9 = this;

      this.popupShow.addEventListener('click', function () {
        _this9.popup.classList.add('is-active');
      });

      this.popupHide.forEach(function (element) {
        element.addEventListener('click', function () {
          _this9.popup.classList.remove('is-active');
        });
      });
    }
  }, {
    key: 'languageSaveButtonHandler',
    value: function languageSaveButtonHandler() {
      var _this10 = this;

      this.saveLanguageButton.addEventListener('click', function () {
        var box = _elementHelpers2.default.getElementByAttribute(_this10.attributes.box, 'chat');

        // Empty the box content
        box.innerHTML = '';

        _this10.openAndCloseSettings();
      });
    }
  }, {
    key: 'openAndCloseSettings',
    value: function openAndCloseSettings() {
      var settingsPanelClasses = this.settings.classList;
      if (!settingsPanelClasses.contains(this.classes.isActive)) {
        settingsPanelClasses.add(this.classes.isActive);
      } else {
        settingsPanelClasses.remove(this.classes.isActive);
      }
    }

    /**
     * Get selector
     */

  }, {
    key: 'classes',
    get: function get() {
      return {
        dividerIsHidden: 'divider--is-hidden',
        displayNone: 'display-none',
        isActive: 'is-active'
      };
    }

    /**
     * Declare attribute constants
     */

  }, {
    key: 'attributes',
    get: function get() {
      return {
        box: attributeBase + '-box',
        header: attributeBase + '-header',
        textarea: attributeBase + '-textarea',
        button: attributeBase + '-button',
        quickSuggest: attributeBase + '-quick-suggest',
        quickSuggestButton: attributeBase + '-quick-suggest-button',
        minimized: attributeBase + '-minimized',
        close: attributeBase + '-close',
        content: attributeBase + '-content',
        settingsButton: attributeBase + '-settings-button',
        settings: attributeBase + '-settings',
        languageSelector: attributeBase + '-language-selector',
        languageSaveButton: attributeBase + '-language-save-button',
        languageNotification: attributeBase + '-language-notification',
        popupShow: attributeBase + '-popup-show',
        popupHide: attributeBase + '-popup-hide',
        popup: attributeBase + '-popup',
        saveLanguageButton: attributeBase + '-save-language'
      };
    }
  }], [{
    key: 'getSelector',
    value: function getSelector() {
      return '[' + attributeBase + ']';
    }
  }]);

  return Chat;
}();
},{"../helpers/element-helpers":3}],3:[function(require,module,exports){
'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ElementHelpers = function () {
	function ElementHelpers() {
		_classCallCheck(this, ElementHelpers);
	}

	_createClass(ElementHelpers, null, [{
		key: 'triggerEvent',


		/**
   * Trigger an event on a specified element
   * @param element {Node}
   * @param eventType
   */
		value: function triggerEvent(element, eventType) {
			var event = void 0;

			if (typeof Event === 'function') {
				event = new Event(eventType);
			} else {
				event = document.createEvent('Event');
				event.initEvent(eventType, true, true);
			}
			element.dispatchEvent(event);
		}

		/**
   * Get element by attribute and optional by attribute value
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementByAttribute',
		value: function getElementByAttribute(attributeName, attributeValue) {
			if (attributeValue) {
				return document.querySelector('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return document.querySelector('[' + attributeName + ']');
			}
		}

		/**
   * Get multiple elements by attribute and optional by attribute value
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementsByAttribute',
		value: function getElementsByAttribute(attributeName, attributeValue) {
			if (attributeValue) {
				return document.querySelectorAll('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return document.querySelectorAll('[' + attributeName + ']');
			}
		}

		/**
   * Get element by attribute and optional by attribute value, within an element
   * @param element
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementByAttributeWithinElement',
		value: function getElementByAttributeWithinElement(element, attributeName, attributeValue) {
			if (attributeValue) {
				return element.querySelector('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return element.querySelector('[' + attributeName + ']');
			}
		}

		/**
   * check if mouse pointer is on element
   * @param element
   */

	}, {
		key: 'isMouseOver',
		value: function isMouseOver(element) {
			return Array.prototype.slice.call(element.parentElement.querySelectorAll(':hover')).filter(function () {
				return element[0] == this;
			}).length > 0;
		}

		/**
   * Get multiple elements by attribute and optional by attribute value, within an element
   * @param element
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementsByAttributeWithinElement',
		value: function getElementsByAttributeWithinElement(element, attributeName, attributeValue) {
			if (attributeValue) {
				return element.querySelectorAll('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return element.querySelectorAll('[' + attributeName + ']');
			}
		}

		/**
   * Get element by class, within an element
   * @param element
   * @param className
   */

	}, {
		key: 'getElementByClassWithinElement',
		value: function getElementByClassWithinElement(element, className) {
			return element.querySelector('.' + className);
		}

		/**
   * get max width for mobile viewports 
   */

	}, {
		key: 'maxWidthMobileViewports',
		value: function maxWidthMobileViewports() {
			return 940;
		}

		/**
   * Create an event
   * @param eventType
   */

	}, {
		key: 'createEvent',
		value: function createEvent(eventType) {
			var event = void 0;
			if (typeof Event === 'function') {
				event = new Event(eventType);
			} else {
				event = document.createEvent('Event');
				event.initEvent(eventType, true, true);
			}
			return event;
		}

		/**
   * checks if viewport is desktop size
   */

	}, {
		key: 'isDesktop',
		value: function isDesktop() {
			return Math.max(document.documentElement.clientWidth, window.innerWidth || 0) > this.maxWidthMobileViewports();
		}
	}, {
		key: 'isIE11',
		value: function isIE11() {
			return navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1;
		}

		/**
   * Get keycode on keydown event, as fallback if event.code is not supported yet by the browser
   * @param event
   */

	}, {
		key: 'getKeyCodeOnKeyDownEvent',
		value: function getKeyCodeOnKeyDownEvent(event) {
			var keyCode = void 0;
			if (event != null) {
				if (typeof event.code === 'undefined') {
					switch (event.keyCode) {
						case 13:
							keyCode = 'Enter';
							break;
						case 38:
							keyCode = 'ArrowUp';
							break;
						case 40:
							keyCode = 'ArrowDown';
							break;
						case 9:
							keyCode = 'Tab';
							break;
						case 27:
							keyCode = 'Escape';
							break;
						case 33:
							keyCode = 'PageUp';
							break;
						case 34:
							keyCode = 'PageDown';
							break;
						default:
							keyCode = undefined;
							break;
					}
				} else {
					keyCode = event.code;
				}
			}
			return keyCode;
		}
	}]);

	return ElementHelpers;
}();

module.exports = ElementHelpers;
},{}]},{},[1]);
