geico-design-kit 7.0.0

package/dist/components/MakePayment.js

@@ -0,0 +1,361 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK Make a Payment : Content must be defined and set to a DOM selector or Node"]
+}];
+
+/**
+ * MakePayment Class
+ */
+var MakePayment = /*#__PURE__*/function () {
+  /**
+   * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+   * @param {string|Object} content
+   * A reference to the div form field containing the make payment input node
+   *
+   */
+
+  function MakePayment(options) {
+    _classCallCheck(this, MakePayment);
+    this._internalVars = {};
+
+    //options with defaults set
+    this._defaults = {};
+
+    // Create options by extending defaults with the passed in arugments
+    if (options && _typeof(options) === "object") {
+      this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
+    }
+
+    //if the required options are valid set up the environment
+    if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
+      this._internalVars.contentType = _baseComponent["default"].getContentType(this);
+      setLocalVars.call(this);
+      setEvents.call(this);
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * destroy()
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(MakePayment, [{
+    key: "destroy",
+    value: function destroy() {
+      removeEvents.call(this);
+      this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+      //a little garbage collection
+      for (var variableKey in this) {
+        if (this.hasOwnProperty(variableKey)) {
+          delete this[variableKey];
+        }
+      }
+    }
+  }]);
+}(); // Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  var _this = this;
+  Array.prototype.forEach.call(this._internalVars.radios, function (radio) {
+    radio.addEventListener('change', paymentTypeFieldsDisplay.bind(_this));
+  });
+  Array.prototype.forEach.call(this._internalVars.paymentAmountRadios, function (radio) {
+    radio.addEventListener('change', enableDisableOtherAmount.bind(_this));
+  });
+  this._internalVars.creditCardcarddholderSelect.addEventListener('change', mailingAddressDisplay.bind(this));
+  this._internalVars.checkAccountholderSelect.addEventListener('change', mailingAddressDisplay.bind(this));
+  this._internalVars.creditCardcarddholderSelect.addEventListener('change', prefillName.bind(this));
+  this._internalVars.checkAccountholderSelect.addEventListener('change', prefillName.bind(this));
+  Array.prototype.forEach.call(this._internalVars.newAddressRadios, function (radio) {
+    radio.addEventListener('change', newAddressFieldsDisplay.bind(_this));
+  });
+  if (this._internalVars.nameOnCheckInput) {
+    this._internalVars.nameOnCheckInput.addEventListener('blur', parseFirstName.bind(this));
+  }
+  if (this._internalVars.nameOnCardInput) {
+    this._internalVars.nameOnCardInput.addEventListener('blur', parseFirstName.bind(this));
+  }
+  this._internalVars.saveMethodRadio.addEventListener('change', saveMethodFieldDisplay.bind(this));
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var _this2 = this;
+  Array.prototype.forEach.call(this._internalVars.radios, function (radio) {
+    radio.removeEventListener('change', paymentTypeFieldsDisplay.bind(_this2));
+  });
+  Array.prototype.forEach.call(this._internalVars.paymentAmountRadios, function (radio) {
+    radio.removeEventListener('change', enableDisableOtherAmount.bind(_this2));
+  });
+  this._internalVars.creditCardcarddholderSelect.removeEventListener('change', mailingAddressDisplay.bind(this));
+  this._internalVars.checkAccountholderSelect.removeEventListener('change', mailingAddressDisplay.bind(this));
+  Array.prototype.forEach.call(this._internalVars.newAddressRadios, function (radio) {
+    radio.removeEventListener('change', newAddressFieldsDisplay.bind(_this2));
+  });
+  if (this._internalVars.nameOnCheckInput) {
+    this._internalVars.nameOnCheckInput.removeEventListener('blur', parseFirstName.bind(this));
+  }
+  if (this._internalVars.nameOnCardInput) {
+    this._internalVars.nameOnCardInput.removeEventListener('blur', parseFirstName.bind(this));
+  }
+  this._internalVars.saveMethodRadio.removeEventListener('change', saveMethodFieldDisplay.bind(this));
+}
+function enableDisableOtherAmount(event) {
+  if (event.target.value === 'other') {
+    this._internalVars.currencyInput.removeAttribute('disabled');
+  } else if (event.target.value !== 'other') {
+    this._internalVars.currencyInput.setAttribute('disabled', 'disabled');
+  }
+}
+function paymentTypeFieldsDisplay(event) {
+  //Set variable values for which fields should be displayed
+  var creditCardFieldsDisplay = false,
+    checkFieldsDisplay = false,
+    generalFieldsDisplay = false,
+    saveMethodFieldsDisplay = false;
+  this._internalVars.creditCardSelected = false;
+  this._internalVars.checkSelected = false;
+  if (event.target.value === 'card') {
+    generalFieldsDisplay = true;
+    creditCardFieldsDisplay = true;
+    checkFieldsDisplay = false;
+    this._internalVars.creditCardSelected = true;
+    this._internalVars.addressFieldLabel.innerHTML = "Cardholder's";
+  }
+  if (event.target.value === 'check') {
+    generalFieldsDisplay = true;
+    checkFieldsDisplay = true;
+    creditCardFieldsDisplay = false;
+    this._internalVars.checkSelected = true;
+    this._internalVars.addressFieldLabel.innerHTML = "Account holder's";
+  }
+
+  //Reset values if payment method is changed
+  this._internalVars.creditCardcarddholderSelect.options[0].selected = true;
+  this._internalVars.checkAccountholderSelect.options[0].selected = true;
+  Array.prototype.forEach.call(this._internalVars.newAddressRadios, function (radio) {
+    radio.checked = false;
+  });
+  this._internalVars.saveMethodRadio.checked = false;
+  toggleFieldDisplay.call(this, creditCardFieldsDisplay, checkFieldsDisplay, generalFieldsDisplay, saveMethodFieldsDisplay);
+}
+function toggleFieldDisplay(creditCardFieldsDisplay, checkFieldsDisplay, generalFieldsDisplay, saveMethodFieldsDisplay) {
+  if ($(this._internalVars.dynamicAddressField).is(':visible')) {
+    $(this._internalVars.dynamicAddressField).slideUp();
+  }
+  if ($(this._internalVars.dynamicNewAddressFields).is(':visible')) {
+    $(this._internalVars.dynamicNewAddressFields).slideUp();
+  }
+  if (generalFieldsDisplay === true) {
+    if ($(this._internalVars.dynamicFieldGeneral).is(':hidden')) {
+      $(this._internalVars.dynamicFieldGeneral).slideDown();
+    }
+  } else {
+    if ($(this._internalVars.dynamicFieldGeneral).is(':visible')) {
+      $(this._internalVars.dynamicFieldGeneral).slideUp();
+    }
+  }
+  if (creditCardFieldsDisplay === true) {
+    if ($(this._internalVars.dynamicCardFields).is(':hidden')) {
+      $(this._internalVars.dynamicCardFields).slideDown();
+    }
+  } else {
+    if ($(this._internalVars.dynamicCardFields).is(':visible')) {
+      $(this._internalVars.dynamicCardFields).slideUp();
+    }
+  }
+  if (checkFieldsDisplay === true) {
+    if ($(this._internalVars.dynamicCheckFields).is(':hidden')) {
+      $(this._internalVars.dynamicCheckFields).slideDown();
+    }
+  } else {
+    if ($(this._internalVars.dynamicCheckFields).is(':visible')) {
+      $(this._internalVars.dynamicCheckFields).slideUp();
+    }
+  }
+  if (saveMethodFieldsDisplay === true) {
+    if ($(this._internalVars.dynamicFieldSaveFields).is(':hidden')) {
+      $(this._internalVars.dynamicFieldSaveFields).slideDown();
+    }
+  } else {
+    if ($(this._internalVars.dynamicFieldSaveFields).is(':visible')) {
+      $(this._internalVars.dynamicFieldSaveFields).slideUp();
+    }
+  }
+}
+function mailingAddressDisplay(event) {
+  var mailingAddressFields = false;
+  if (event.target.value === 'Other Payee') {
+    mailingAddressFields = true;
+  }
+  toggleMailingAddressFieldDisplay.call(this, mailingAddressFields);
+}
+function prefillName(event) {
+  var addressLabel;
+  if (this._internalVars.checkSelected === true) {
+    addressLabel = "Account holder's";
+  } else if (this._internalVars.creditCardSelected === true) {
+    addressLabel = "Cardholder's";
+  }
+  if (event.target.value !== 'Other Payee' && event.target.value !== 'Please Select') {
+    var value;
+    for (var i = 0; i < event.target.length; i++) {
+      if (event.target.options[i].value === event.target.value) {
+        value = event.target.options[i].text;
+      }
+    }
+    if (this._internalVars.creditCardSelected === true) {
+      this._internalVars.nameOnCardInput.value = value;
+    } else if (this._internalVars.checkSelected === true) {
+      this._internalVars.nameOnCheckInput.value = value;
+    }
+  } else {
+    this._internalVars.nameOnCardInput.value = '';
+    this._internalVars.nameOnCheckInput.value = '';
+    this._internalVars.addressFieldLabel.innerHTML = addressLabel;
+  }
+}
+function toggleMailingAddressFieldDisplay(mailingAddressFields) {
+  if (mailingAddressFields === true) {
+    if ($(this._internalVars.dynamicAddressField).is(':hidden')) {
+      $(this._internalVars.dynamicAddressField).slideDown();
+    }
+  } else {
+    if ($(this._internalVars.dynamicAddressField).is(':visible')) {
+      $(this._internalVars.dynamicAddressField).slideUp();
+    }
+  }
+}
+function newAddressFieldsDisplay(event) {
+  var newAddressFields = false;
+  if (event.target.value === 'new') {
+    newAddressFields = true;
+  }
+  toggleNewAddressFieldsDisplay.call(this, newAddressFields);
+}
+function toggleNewAddressFieldsDisplay(newAddressFields) {
+  if (newAddressFields === true) {
+    if ($(this._internalVars.dynamicNewAddressFields).is(':hidden')) {
+      $(this._internalVars.dynamicNewAddressFields).slideDown();
+    }
+  } else {
+    if ($(this._internalVars.dynamicNewAddressFields).is(':visible')) {
+      $(this._internalVars.dynamicNewAddressFields).slideUp();
+    }
+  }
+}
+function parseFirstName(event) {
+  var nameField, addressLabel;
+  if (this._internalVars.checkSelected === true) {
+    nameField = this._internalVars.nameOnCheckInput;
+    addressLabel = "Account holder's";
+  } else if (this._internalVars.creditCardSelected === true) {
+    nameField = this._internalVars.nameOnCardInput;
+    addressLabel = "Cardholder's";
+  }
+  if (nameField.value.length > 0) {
+    var firstName = event.target.value.split(" ")[0];
+    if (firstName.slice(-1) === 's' || firstName.slice(-1) === 'S') {
+      this._internalVars.addressFieldLabel.innerHTML = firstName + "'";
+    } else {
+      this._internalVars.addressFieldLabel.innerHTML = firstName + "'s";
+    }
+  } else {
+    this._internalVars.addressFieldLabel.innerHTML = addressLabel;
+  }
+}
+function saveMethodFieldDisplay(event) {
+  if (event.target.checked === true) {
+    if ($(this._internalVars.dynamicFieldSaveFields).is(':hidden')) {
+      $(this._internalVars.dynamicFieldSaveFields).slideDown();
+    }
+  } else {
+    if ($(this._internalVars.dynamicFieldSaveFields).is(':visible')) {
+      $(this._internalVars.dynamicFieldSaveFields).slideUp();
+    }
+  }
+}
+
+/**
+ * setLocalVars()
+ * set all the local vars to passed in options
+ */
+function setLocalVars() {
+  //determine the type of content passed in
+  if (this._internalVars.contentType === 'string') {
+    this._internalVars.node = document.querySelector(this._options.content);
+  } else if (this._internalVars.contentType === 'domNode') {
+    this._internalVars.node = this._options.content;
+  }
+  this._internalVars.makePaymentFields = this._internalVars.node;
+  this._internalVars.paymentAmountID = 'payment-amount';
+  this._internalVars.paymentAmountFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.paymentAmountID);
+  this._internalVars.paymentAmountRadios = this._internalVars.paymentAmountFields.querySelectorAll("input[type='radio']");
+  this._internalVars.currencyInputClass = 'currency-input';
+  this._internalVars.currencyInput = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.currencyInputClass);
+  this._internalVars.paymentMethodID = 'payment-method-selection';
+  this._internalVars.paymentMethodFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.paymentMethodID);
+  this._internalVars.radios = this._internalVars.paymentMethodFields.querySelectorAll('input');
+  this._internalVars.dynamicFieldCheckClass = 'dynamic-fields-check';
+  this._internalVars.dynamicCheckFields = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldCheckClass);
+  this._internalVars.dynamicFieldCardClass = 'dynamic-fields-card';
+  this._internalVars.dynamicCardFields = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldCardClass);
+  this._internalVars.dynamicFieldGeneralClass = 'dynamic-fields-general';
+  this._internalVars.dynamicFieldGeneral = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldGeneralClass);
+  this._internalVars.creditCardCardholderID = 'cardholder-credit-card';
+  this._internalVars.creditCardCardholderField = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.creditCardCardholderID);
+  this._internalVars.creditCardcarddholderSelect = this._internalVars.creditCardCardholderField.querySelector('select');
+  this._internalVars.checkAccountholderID = 'accountholder-check';
+  this._internalVars.checkAccountholderField = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.checkAccountholderID);
+  this._internalVars.checkAccountholderSelect = this._internalVars.checkAccountholderField.querySelector('select');
+  this._internalVars.nameOnCheckID = 'name-on-check';
+  if (this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.nameOnCheckID)) {
+    this._internalVars.nameOnCheckFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.nameOnCheckID);
+    this._internalVars.nameOnCheckInput = this._internalVars.nameOnCheckFields.querySelector('input');
+  }
+  this._internalVars.nameOnCardID = 'name-credit-card';
+  if (this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.nameOnCardID)) {
+    this._internalVars.nameOnCardFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.nameOnCardID);
+    this._internalVars.nameOnCardInput = this._internalVars.nameOnCardFields.querySelector('input');
+  }
+  this._internalVars.dynamicFieldAddressClass = 'dynamic-fields-address';
+  this._internalVars.dynamicAddressField = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldAddressClass);
+  this._internalVars.addressFieldNameLabelID = 'address-name';
+  this._internalVars.addressFieldLabel = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.addressFieldNameLabelID);
+  this._internalVars.newAddressID = 'address';
+  this._internalVars.newAddressFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.newAddressID);
+  this._internalVars.newAddressRadios = this._internalVars.newAddressFields.querySelectorAll('input');
+  this._internalVars.dynamicFieldNewAddressClass = 'dynamic-fields-new-address';
+  this._internalVars.dynamicNewAddressFields = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldNewAddressClass);
+  this._internalVars.saveMethodId = 'save-method';
+  this._internalVars.saveMethodField = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.saveMethodId);
+  this._internalVars.saveMethodRadio = this._internalVars.saveMethodField.querySelector('input');
+  this._internalVars.dynamicFieldSaveClass = 'dynamic-fields-save-method';
+  this._internalVars.dynamicFieldSaveFields = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldSaveClass);
+}
+var _default = exports["default"] = MakePayment;

package/dist/components/Modal.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var utils = _interopRequireWildcard(require("../../src/utils"));
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+var _UserAgentService = _interopRequireDefault(require("../../src/services/UserAgentService"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var PromiseIE = require('es6-promise-polyfill').Promise;
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK Modal : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "autoShow",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["boolean"],
+  errorMessage: ["GDK Modal : autoShow must be a boolean"]
+}, {
+  setting: "overlayShouldCloseModal",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["boolean"],
+  errorMessage: ["GDK Modal : overlayShouldCloseModal must be a boolean"]
+}, {
+  setting: "hideCloseButton",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["boolean"],
+  errorMessage: ["GDK Modal : hideCloseButton must be a boolean"]
+}, {
+  setting: "onOpened",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK Modal : onOpened must be a function"]
+}, {
+  setting: "onClosed",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK Modal : onClosed must be a function"]
+}];
+var modalCloseBtn = '<button class="btn-close icon-close" type="button" aria-label="Close modal"></button>';
+var Modal = /*#__PURE__*/function () {
+  /**
+   * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+   * @param {string|Object} content
+   * A reference to the modal node
+   *
+   * @param {boolean} [autoShow=false]
+   * Use if you want to model to auto show when instantiated
+   *
+   * @param {boolean} [overlayShouldCloseModal=true]
+   * Set to false if you do not want the overlay to have click to close functionality
+   *
+   * @param {boolean} [hideCloseButton=false]
+   * Set to true if you want to hide the close button in the upper right corner of the modal
+   *
+   * @param {function} [onOpened]
+   * A callback function that gets fired when the modal has been opened
+   *
+   * @param {function} [onClosed]
+   * A callback function that gets fired when the modal has been closed
+   *
+   */
+  function Modal(options) {
+    _classCallCheck(this, Modal);
+    this._internalVars = {
+      node: null,
+      //used for current node
+      closeBtn: null
+    };
+
+    //options with defaults set
+    this._defaults = {
+      autoShow: false,
+      overlayShouldCloseModal: true,
+      hideCloseButton: false
+    };
+
+    // Create options by extending defaults with the passed in arugments
+    if (options && _typeof(options) === "object") {
+      this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
+    }
+
+    //if the required options are valid set up the environment
+    if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
+      this._internalVars.contentType = _baseComponent["default"].getContentType(this);
+      setLocalVars.call(this);
+      buildModal.call(this);
+      setEvents.call(this);
+      if (this._options.autoShow) {
+        this.show();
+      }
+    }
+  }
+
+  //Public Methods
+
+  /**
+  * show()
+  * shows the modal
+  */
+  return _createClass(Modal, [{
+    key: "show",
+    value: function show() {
+      var _this = this;
+      this._internalVars.node.style.display = "block";
+      setTimeout(function () {
+        _this._internalVars.node.classList.add("modal--show");
+        if (_this._options.onOpened) _this._options.onOpened();
+      }, 10);
+      this._internalVars.inModalArray = [];
+      document.addEventListener('keyup', this._internalVars.modalTabHandler);
+    }
+
+    /**
+    * hide()
+    * hides the modal
+    */
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this2 = this;
+      var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
+      this._internalVars.inModalArray = [];
+      document.removeEventListener('keyup', this._internalVars.modalTabHandler);
+      return new PromiseIE(function (resolve, reject) {
+        setTimeout(function () {
+          _this2._internalVars.node.classList.remove("modal--show");
+          _this2._internalVars.node.style.display = "none";
+          if (_this2._options.onClosed) _this2._options.onClosed();
+          resolve();
+        }, duration);
+      });
+    }
+
+    /**
+    * destroy()
+    * removes the node from the dom and any events attached
+    */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      removeEvents.call(this);
+      this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+      //a little garbage collection
+      for (var variableKey in this) {
+        if (this.hasOwnProperty(variableKey)) {
+          delete this[variableKey];
+        }
+      }
+    }
+  }]);
+}();
+/**
+* setLocalVars()
+* set all the local vars to passed in options
+*/
+function setLocalVars() {
+  //determine the type of content passed in
+  if (this._internalVars.contentType === 'string') {
+    this._internalVars.node = document.querySelector(this._options.content);
+  } else if (this._internalVars.contentType === 'domNode') {
+    this._internalVars.node = this._options.content;
+  }
+  this._internalVars.modalTabHandler = isolateTab.bind(this);
+}
+
+/**
+* modalClicked()
+* Gets fired when you click anywhere on a model
+*/
+function modalClicked(e) {
+  //NodeList of items that the mouse is currently over in document order.
+  //The last element in the NodeList is the most specific, each preceding
+  //one should be a parent, grandparent, and so on.
+  var nodes = document.querySelectorAll(":hover");
+  if (this._internalVars.node == nodes[nodes.length - 1]) {
+    this.hide();
+  }
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for this component
+ */
+function setEvents() {
+  var eventName = _UserAgentService["default"]._clickEventName();
+  if (this._options.overlayShouldCloseModal) {
+    this._internalVars.node.addEventListener(eventName, modalClicked.bind(this));
+  }
+  if (this._options.hideCloseButton) {
+    this._internalVars.closeBtn.classList.add("hidden");
+  } else {
+    this._internalVars.closeBtn.addEventListener(eventName, this.hide.bind(this));
+  }
+}
+
+/**
+ * removeEvents()
+ * removes all events from this component
+ */
+function removeEvents() {
+  var eventName = _UserAgentService["default"]._clickEventName();
+  if (this._options.overlayShouldCloseModal) {
+    this._internalVars.node.removeEventListener(eventName, modalClicked.bind(this));
+  }
+  this._internalVars.closeBtn.removeEventListener(eventName, this.hide.bind(this));
+}
+
+/**
+* buildModal()
+* Adds needed markup this component
+*/
+function buildModal() {
+  var modalContentDom = this._internalVars.node.querySelector(".modal-container");
+  modalContentDom.insertAdjacentHTML('afterBegin', modalCloseBtn);
+  this._internalVars.closeBtn = this._internalVars.node.querySelector(".btn-close");
+  var spanTab = document.createElement('span');
+  spanTab.setAttribute('tabindex', '0');
+  spanTab.setAttribute('class', 'tab-filler');
+  var cloneSpanTab = spanTab.cloneNode(true);
+  modalContentDom.appendChild(spanTab);
+  modalContentDom.insertBefore(cloneSpanTab, modalContentDom.children[0]);
+}
+function isolateTab(e) {
+  if (e.keyCode == 9 || e.keyCode == 9 && e.shiftKey) {
+    if (utils.isChild("modal", document.activeElement) && !document.activeElement.classList.contains('tab-filler') && !this._internalVars.inModalArray.includes(document.activeElement)) {
+      this._internalVars.inModalArray.push(document.activeElement);
+    }
+    if (document.activeElement.classList.contains('tab-filler')) {
+      if (this._internalVars.inModalArray.length > 0) {
+        this._internalVars.inModalArray[0].focus();
+      }
+    }
+  }
+}
+var _default = exports["default"] = Modal;