geico-design-kit 7.0.0

package/dist/components/CardSelections.js

@@ -0,0 +1,230 @@
+"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 CardSelections : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "initialActiveCard",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["number"],
+  errorMessage: ["GDK CardSelections : initialActiveCard must be set to a number"]
+}, {
+  setting: "cardSelectionSet",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK CardSelections : cardSelectionClick must be a function"]
+}];
+var CardSelections = /*#__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 html More Background Pattern node
+   *
+   *  @param {number} [initialActiveCard=1]
+   *  The number of the item to set as the active card on initialization. Must be greater than 0 and equal to or less than the number of cards.
+   *
+   *  @param {function} [cardSelectionSet]
+   *   A callback function that is triggered when any card is set to active.
+   */
+  function CardSelections(options) {
+    _classCallCheck(this, CardSelections);
+    this._internalVars = {
+      node: null //used for content item
+    };
+
+    //options with defaults set
+    this._defaults = {
+      initialActiveCard: 1
+    };
+
+    // 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);
+      init.call(this);
+      this._internalVars.cardSelectionSection.setAttribute('role', 'radiogroup');
+      Array.prototype.forEach.call(this._internalVars.cardSelectionsCards, function (element) {
+        if (!element.getAttribute('tabindex')) element.setAttribute('tabindex', '0');
+        if (!element.getElementsByTagName('input')[0].getAttribute('tabindex')) element.getElementsByTagName('input')[0].setAttribute('tabindex', '-1');
+        element.setAttribute('role', 'radio');
+      });
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * Returns the active selected card
+   * @return {Element}
+   */
+  return _createClass(CardSelections, [{
+    key: "currentActiveCard",
+    value: function currentActiveCard() {
+      return this._internalVars.selectedCard;
+    }
+
+    /**
+     * sets the initial active card using an index parameter
+     * @param {Number} index Number indicating what the active card should be set to
+     */
+  }, {
+    key: "setActiveCard",
+    value: function setActiveCard(index) {
+      setInitialActiveCard.call(this, index);
+    }
+
+    /**
+     * 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];
+        }
+      }
+    }
+  }]);
+}(); // Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  var _this = this;
+  var eventName = "click";
+  Array.prototype.forEach.call(this._internalVars.cardSelectionsCards, function (element) {
+    element.addEventListener(eventName, _this._internalVars.handler);
+    element.addEventListener('keyup', _this._internalVars.handler);
+  });
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var _this2 = this;
+  var eventName = "click";
+  Array.prototype.forEach.call(this._internalVars.cardSelectionsCards, function (element) {
+    element.removeEventListener(eventName, _this2._internalVars.handler);
+    element.removeEventListener('keyup', _this2._internalVars.handler);
+  });
+}
+
+/**
+ * init()
+ * Sets the initial values
+ */
+function init() {
+  var index = null;
+  if (this._options.initialActiveCard) {
+    index = this._options.initialActiveCard;
+  } else {
+    index = this._defaults.initialActiveCard;
+  }
+  setInitialActiveCard.call(this, index);
+}
+
+/**
+ * Removes the class and attributes identifying the card as selected
+ */
+function resetSelected() {
+  var _this3 = this;
+  var selected = this._internalVars.cardSelectionsObject.querySelectorAll('.' + this._internalVars.cardSelectedClass);
+  if (selected) {
+    Array.prototype.forEach.call(selected, function (el) {
+      el.classList.remove(_this3._internalVars.cardSelectedClass);
+      el.getElementsByTagName('input')[0].checked = false;
+      el.setAttribute('aria-checked', 'false');
+    });
+  }
+}
+
+/**
+ * Adds attributes identifying the card as selected
+ */
+function setActiveCardAttributes() {
+  this._internalVars.selectedCard = this._internalVars.cardSelectionsObject.querySelector('.' + this._internalVars.cardSelectedClass);
+  this._internalVars.selectedCard.getElementsByTagName('input')[0].checked = true;
+  this._internalVars.selectedCard.setAttribute('aria-checked', 'true');
+  if (this._options.cardSelectionSet) {
+    this._options.cardSelectionSet(this._internalVars.selectedCard);
+  }
+}
+
+/**
+ * setInitialActiveCard()
+ * Sets the initial active card
+ */
+function setInitialActiveCard(index) {
+  resetSelected.call(this);
+  if (index <= this._internalVars.cardSelectionsCards.length && index > 0) {
+    this._internalVars.cardSelectionsCards[index - 1].classList.add(this._internalVars.cardSelectedClass);
+  } else {
+    this._internalVars.cardSelectionsCards[0].classList.add(this._internalVars.cardSelectedClass);
+  }
+  setActiveCardAttributes.call(this);
+}
+
+/**
+ * setActiveCard()
+ * Sets the active card
+ */
+function setActiveCard(event) {
+  if (event.type == 'keypress' || event.type == 'keyup' && (event.keyCode || event.which) != 13) {} else {
+    resetSelected.call(this);
+    event.currentTarget.classList.add(this._internalVars.cardSelectedClass);
+    setActiveCardAttributes.call(this);
+  }
+}
+
+/**
+ * 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.cardSelectionsObject = this._internalVars.node;
+  this._internalVars.cardSelectionSectionClass = 'card-selections';
+  this._internalVars.cardSelectedClass = 'card-selections-selected';
+  this._internalVars.cardSelectionsCardClass = 'card-selections-card';
+  this._internalVars.selectedCard = null;
+  this._internalVars.cardSelectionSection = this._internalVars.cardSelectionsObject.querySelector('.' + this._internalVars.cardSelectionSectionClass);
+  this._internalVars.cardSelectionsCards = this._internalVars.cardSelectionsObject.querySelectorAll('.' + this._internalVars.cardSelectionsCardClass);
+  this._internalVars.handler = setActiveCard.bind(this);
+}
+var _default = exports["default"] = CardSelections;

package/dist/components/CommonQuestionsSquares.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _appState = _interopRequireDefault(require("../../src/appState"));
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+var _UserAgentService = _interopRequireDefault(require("../../src/services/UserAgentService"));
+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 CommonQuestionsSquares : Content must be defined and set to a DOM selector or Node"]
+}];
+var CommonQuestionsSquares = /*#__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 common questions squares node
+   */
+  function CommonQuestionsSquares(options) {
+    _classCallCheck(this, CommonQuestionsSquares);
+    this._internalVars = {
+      node: null,
+      //used for content item
+      individualBoxes: null
+    };
+
+    //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);
+      var allSquares = this._internalVars.node.querySelectorAll('.square');
+      Array.prototype.forEach.call(allSquares, function (el, i) {
+        if (!el.classList.contains('square-link')) el.setAttribute('tabindex', '0');
+      });
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * destroy()
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(CommonQuestionsSquares, [{
+    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 eventName = _UserAgentService["default"]._clickEventName();
+  console.log(this._internalVars.individualBoxes);
+  for (var j = 0; j < this._internalVars.individualBoxes.length - 1; j++) {
+    this._internalVars.individualBoxes[j].addEventListener('mouseover', removeStyleAttr.bind(this, this._internalVars.individualBoxes[j]));
+    this._internalVars.individualBoxes[j].addEventListener(eventName, openPanel.bind(this, this._internalVars.individualBoxes[j]));
+  }
+  for (var h = 0; h < this._internalVars.node.querySelectorAll('a').length; h++) {
+    this._internalVars.anchorArray[h].addEventListener('focus', linkFocus.bind(this, this._internalVars.anchorArray[h]));
+    this._internalVars.anchorArray[h].addEventListener('blur', linkUnfocus.bind(this, this._internalVars.anchorArray[h]));
+  }
+}
+function linkFocus(e) {
+  var squareParent = e.parentNode.parentNode;
+  squareParent.classList.add('flip-back');
+  squareParent.previousElementSibling.classList.add('flip-front');
+}
+function linkUnfocus(e) {
+  var squareParent = e.parentNode.parentNode;
+  squareParent.classList.remove('flip-back');
+  squareParent.previousElementSibling.classList.remove('flip-front');
+}
+function removeStyleAttr(e) {
+  if (_appState["default"].mode !== "mobile") {
+    var el = e.querySelector('.back');
+    el.removeAttribute('style');
+  }
+}
+function openPanel(e) {
+  var el = e.querySelector('.back');
+  if (_appState["default"].mode === "mobile") {
+    e.classList.toggle('open');
+    if (e.classList.contains('open')) {
+      el.style.display = "block";
+      var paragraph = el.querySelector("p");
+      el.style.maxHeight = outerHeight.call(this, paragraph) + "px";
+    } else {
+      el.removeAttribute('style');
+      el.style.display = "block";
+      el.style.maxHeight = "0px";
+    }
+  } else {
+    el.removeAttribute('style');
+  }
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var eventName = _UserAgentService["default"]._clickEventName();
+  for (var j = 0; j < this._internalVars.individualBoxes.length - 1; j++) {
+    this._internalVars.individualBoxes[j].removeEventListener('mouseover', removeStyleAttr.bind(this, this._internalVars.individualBoxes[j]));
+    this._internalVars.individualBoxes[j].removeEventListener(eventName, openPanel.bind(this, this._internalVars.individualBoxes[j]));
+  }
+}
+
+/**
+ * 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.individualBoxes = this._internalVars.node.children;
+  this._internalVars.anchorArray = this._internalVars.node.querySelectorAll('a');
+}
+
+/**
+ * outerHeight()
+ * used to get the height of an element that is the same across all browsers
+ *
+ * @param  {Object} node    DOM node
+ * @return {number}
+ */
+function outerHeight(el) {
+  var height = el.offsetHeight;
+  var style = getComputedStyle(el);
+  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
+  return height;
+}
+var _default = exports["default"] = CommonQuestionsSquares;

package/dist/components/Confirmation.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+var _appState = _interopRequireDefault(require("../../src/appState"));
+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 Confirmation : Content must be defined and set to a DOM selector or Node"]
+}];
+var Confirmation = /*#__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 html accordion node
+   *
+   */
+  function Confirmation(options) {
+    _classCallCheck(this, Confirmation);
+    this._internalVars = {
+      node: null //used for content item
+    };
+
+    //options with defaults set
+    this._defaults = {
+      animateCheckmarkFunction: animateCheckmark.bind(this)
+    };
+
+    // Create options by extending defaults with the passed in arguments
+    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
+
+  /**
+   * animateCheckmarkConfirmation()
+   * animates the check mark icon
+   */
+  return _createClass(Confirmation, [{
+    key: "animateCheckmarkConfirmation",
+    value: function animateCheckmarkConfirmation() {
+      animateCheckmark.call(this);
+    }
+
+    /**
+     * 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];
+        }
+      }
+    }
+  }]);
+}();
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  window.addEventListener("load", this._defaults.animateCheckmarkFunction);
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  window.removeEventListener("load", this._defaults.animateCheckmarkFunction);
+}
+function animateCheckmark() {
+  if (this._internalVars.animationComplete !== true) {
+    setTimeout(svgAnim.bind(this), 2500);
+    this._internalVars.animationComplete = true;
+  }
+}
+var tick = 0;
+function svgAnim() {
+  var svgToAnim = this._internalVars.node.querySelector("svg"),
+    circleWrapper = this._internalVars.node.querySelector(".confirmation-icon-wrapper"),
+    dashArrayComplete = 183,
+    //svg animation settings
+    tickSpeed = 3.5,
+    //svg animation settings
+    tickSpeedMobile = 5; //svg animation settings
+
+  if (_appState["default"].mode === "desktop") {
+    tick += tickSpeed;
+  } else {
+    tick += tickSpeedMobile;
+  }
+  if (!circleWrapper.classList.contains("circleConfirmation")) {
+    circleWrapper.classList.add("circleConfirmation");
+  }
+  var t = tick / 100;
+  var offsetStrokeDasharray = easeInQuad(t, 0, dashArrayComplete, 1);
+  svgToAnim.style.strokeDasharray = "".concat(offsetStrokeDasharray, " , ").concat(dashArrayComplete);
+  if (tick < 100) {
+    requestAnimationFrame(svgAnim.bind(this));
+  } else {
+    tick = 0;
+  }
+}
+
+/**
+ * easeInQuad()
+ * Quadratic easing
+ */
+function easeInQuad(t, b, c, d) {
+  var ts = (t /= d) * t;
+  return b + c * ts;
+}
+
+/**
+ * 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.animationComplete = false;
+}
+var _default = exports["default"] = Confirmation;