geico-design-kit 7.0.0

package/dist/components/DotNavigation.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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 DotNavigation : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "onClicked",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK DotNavigation : onClicked must be a function"]
+}, {
+  setting: "startingPos",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["number"],
+  errorMessage: ["GDK DotNavigation : startingPos must be set to a number"]
+}];
+var DotNavigation = /*#__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 Dot Navigation node
+   *
+   * @param {function} [onClicked]
+   * Callback function fired once a item is clicked
+   *
+   * @param {number} [startingPos=1]
+   * The number of the navigation item to display on initialization
+   */
+  function DotNavigation(options) {
+    _classCallCheck(this, DotNavigation);
+    console.log("Initialized Dot Navigation");
+    this._internalVars = {
+      node: null,
+      //used for content item
+      navItem: null,
+      svg: "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\"preserveAspectRatio=\"none\"><circle cx=\"8\" cy=\"8\" r=\"6.215\"/></svg>"
+    };
+
+    //options with defaults set
+    this._defaults = {
+      startingPos: 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);
+      setStartPosition.call(this);
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * @param {number} newIndex
+   * newIndex is the number of the navigation item to display first on initialization
+   */
+  return _createClass(DotNavigation, [{
+    key: "goTo",
+    value: function goTo(newIndex) {
+      var index = newIndex - 1;
+      Array.prototype.map.call(this._internalVars.navItem, function (e, rank) {
+        if (rank === index) {
+          e.parentNode.classList.add("dot-navigation-active");
+        } else {
+          e.parentNode.classList.remove("dot-navigation-active");
+        }
+      });
+    }
+
+    /**
+     * 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];
+        }
+      }
+    }
+  }]);
+}(); // Private Methods
+/**
+ * setLocalVars()
+ * set all the local vars to passed in options
+ */
+function setLocalVars() {
+  var _this = this;
+  //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.navItem = this._internalVars.node.querySelectorAll("li a");
+
+  //set click events
+  Array.prototype.forEach.call(this._internalVars.navItem, function (el, i) {
+    el.insertAdjacentHTML('beforeend', _this._internalVars.svg);
+  });
+  this._internalVars.handler = dotNavigationClickHandler.bind(this);
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  var _this2 = this;
+  var eventName = _UserAgentService["default"]._clickEventName();
+
+  //set click events
+  Array.prototype.forEach.call(this._internalVars.navItem, function (el, i) {
+    el.addEventListener(eventName, _this2._internalVars.handler);
+  });
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var _this3 = this;
+  var eventName = _UserAgentService["default"]._clickEventName();
+
+  //remove click events
+  Array.prototype.forEach.call(this._internalVars.navItem, function (el, i) {
+    el.removeEventListener(eventName, _this3._internalVars.handler);
+  });
+}
+
+/**
+ * dotNavigationClickHandler()
+ * Gets fired when you click on a navigation item
+ */
+function dotNavigationClickHandler(el) {
+  var _this4 = this;
+  el.preventDefault();
+  var currentNode = el.currentTarget;
+  var currentIndex;
+  // add selected class
+  Array.prototype.map.call(this._internalVars.navItem, function (e, rank) {
+    if (e === currentNode) {
+      e.parentNode.classList.add("dot-navigation-active");
+      currentIndex = rank;
+    } else {
+      e.parentNode.classList.remove("dot-navigation-active");
+    }
+  });
+
+  // fire onClicked Callback if there is one
+  setTimeout(function () {
+    if (_this4._options.onClicked) _this4._options.onClicked(currentIndex + 1);
+  }, 10);
+}
+
+/**
+ * setStartPosition()
+ * Set starting link
+ */
+function setStartPosition() {
+  var linkIndex = this._options.startingPos - 1;
+  Array.prototype.map.call(this._internalVars.navItem, function (e, rank) {
+    if (rank === linkIndex) {
+      e.parentNode.classList.add("dot-navigation-active");
+    }
+  });
+}
+var _default = exports["default"] = DotNavigation;

package/dist/components/EditComponent.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _appState = _interopRequireDefault(require("../../src/appState"));
+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 Tabs : Content must be defined and set to a DOM selector or Node"]
+}];
+var EditComponent = /*#__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 edit component node
+   */
+  function EditComponent(options) {
+    _classCallCheck(this, EditComponent);
+    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
+
+  /**
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(EditComponent, [{
+    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];
+        }
+      }
+    }
+  }]);
+}();
+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.editFormPlaceholder = this._internalVars.node.querySelector('.edit-form-placeholder');
+  this._internalVars.editForm = this._internalVars.editFormPlaceholder.querySelector('form');
+  this._internalVars.editBtn = this._internalVars.node.querySelector('.btn--edit-list');
+  this._internalVars.cancelBtn = this._internalVars.editForm.querySelector('.btn-cancel');
+  this._internalVars.submitBtn = this._internalVars.editForm.querySelector('.btn-submit');
+  this._internalVars.editHandler = expandEditForm.bind(this);
+  this._internalVars.cancelHandler = collapseEditForm.bind(this);
+  this._internalVars.submitHandler = handleFormSubmission.bind(this);
+}
+function init() {
+  this._internalVars.editFormPlaceholder.style.maxHeight = 0 + "px";
+}
+function setEvents() {
+  var eventName = 'click';
+  this._internalVars.editBtn.addEventListener(eventName, this._internalVars.editHandler);
+  //    Form Controls
+  this._internalVars.cancelBtn.addEventListener(eventName, this._internalVars.cancelHandler);
+  this._internalVars.submitBtn.addEventListener(eventName, this._internalVars.submitHandler);
+}
+function removeEvents() {
+  var eventName = 'click';
+  this._internalVars.editBtn.addEventListener(eventName, this._internalVars.editHandler);
+  //    Form Controls
+  this._internalVars.cancelBtn.addEventListener(eventName, this._internalVars.cancelHandler);
+  this._internalVars.submitBtn.addEventListener(eventName, this._internalVars.submitHandler);
+}
+function expandEditForm(event) {
+  var editContent = this._internalVars.editFormPlaceholder.querySelector(".edit-content");
+  var editPlaceholder = this._internalVars.editFormPlaceholder;
+  $(editPlaceholder).slideDown();
+  var editButton = event.currentTarget;
+  if (!editButton.classList.contains('hidden')) {
+    editButton.classList.add("hidden");
+  }
+}
+function collapseEditForm(event) {
+  event.preventDefault();
+  var editPlaceholder = this._internalVars.editFormPlaceholder;
+  $(editPlaceholder).slideUp();
+  var editButton = this._internalVars.editBtn;
+  if (editButton.classList.contains('hidden')) {
+    editButton.classList.remove("hidden");
+  }
+}
+function handleFormSubmission(event) {
+  var _this = this;
+  event.preventDefault();
+  collapseEditForm.bind(this, event);
+  setTimeout(function () {
+    _this._internalVars.editForm.submit();
+  }, 700);
+}
+var _default = exports["default"] = EditComponent;

package/dist/components/EditableTable.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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 EditableTableDeprecated : Content must be defined and set to a DOM selector or Node']
+}];
+var EditableTable = /*#__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 editable table with edit buttons and fields node
+   */
+  function EditableTable(options) {
+    _classCallCheck(this, EditableTable);
+    this._internalVars = {
+      node: null,
+      //used for current node
+      editBtn: 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);
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * destroy()
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(EditableTable, [{
+    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
+function setLocalVars() {
+  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.editBtn = this._internalVars.node.querySelectorAll('.table--editable-non-sortable .btn');
+  this._internalVars.handler = toggleEdit.bind(this);
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  var eventName = _UserAgentService["default"]._clickEventName();
+  for (var i = 0; i < this._internalVars.editBtn.length; i++) {
+    this._internalVars.editBtn[i].addEventListener(eventName, this._internalVars.handler);
+  }
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var eventName = _UserAgentService["default"]._clickEventName();
+  for (var i = 0; i < this._internalVars.editBtn.length; i++) {
+    this._internalVars.editBtn[i].removeEventListener("click", this._internalVars.handler);
+  }
+}
+function toggleEdit(e) {
+  var currentEditBtn = e.target;
+  var parentTR = currentEditBtn.parentNode.parentNode;
+  var childrenTD = parentTR.querySelectorAll('td');
+  for (var i = 0; i < childrenTD.length; i++) {
+    childrenTD[i].classList.toggle("td-edit-fields");
+  }
+}
+var _default = exports["default"] = EditableTable;