geico-design-kit 7.0.0

package/dist/components/AddressAutoComplete.js

@@ -0,0 +1,220 @@
+"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); } //Require static assets
+/*
+ Problems:
+ 1)      Requiring a specific ID – The code as-is requires a specific ID for the search field (code: let input = document.querySelector('#address-search-field');).  This requires that we only use 1 instance of this address autocomplete on the screen at one time and forces us to use specific IDs. I’ve complained about this pattern repeatedly over the last couple years and it still seems to be the go to solution for the design team implementations of things. (NOTE: it also requires specific IDs for each and every field of the address that directly match data coming back from google’s apis.)
+ 2)      The implementation doesn’t seem to keep in mind anything related to single-page application design (regardless of technology):
+ a.       The implementation requires a global javascript function to be present at page load time.
+ b.      It presumes to know what the IDs and types of all the input fields are and auto-populates them with no ability to notify client code when this has occurred.  This screws up any kind of data binding technology (angular, knockout, etc)
+ 3)      It does not seem to include Zip +4 (which it looks like the Google APIs don’t return)
+ 4)      It hard codes English text (code:  message.innerHTML = 'No Results Found';)
+ 5)      It watches the entire document body for changes to see if a DOM node is inserted. (code:  document.body.addEventListener('DOMNodeInserted', function (event)…).  That can’t possibly be necessary.
+
+ Questions:
+ 1)      Is this supposed to be the new way all addresses are entered in the system, or just an optional component for teams to use? (did you talk to multiple teams to gather requirements or was this just implemented at the request of one team?)
+ */
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK AddressAutoComplete : Content must be defined and set to a DOM selector or Node"]
+}];
+var ieVersion = _UserAgentService["default"]._detectIE();
+var ValueSelected = false;
+var selector;
+var event;
+if (ieVersion) {
+  //set event for IE
+  console.log('This is the Windows IE Setup: ' + ieVersion);
+  event = document.createEvent('HTMLEvents');
+  event.initEvent('gdk-address-updated', true, true);
+} else {
+  //set event for non IE
+  event = new Event('gdk-address-updated');
+}
+var AddressAutoComplete = /*#__PURE__*/function () {
+  function AddressAutoComplete(options) {
+    _classCallCheck(this, AddressAutoComplete);
+    this._internalVars = {
+      node: null //used for content item
+    };
+
+    //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)) {
+      if (document.querySelector(this._options.content)) {
+        selector = this._options.content;
+        this._internalVars.contentType = _baseComponent["default"].getContentType(this);
+        setLocalVars.call(this);
+        setEvents.call(this);
+        init.call(this);
+      }
+    }
+  }
+
+  //Public Methods
+
+  // Bias the autocomplete object to the user's geographical location,
+  // as supplied by the browser's 'navigator.geolocation' object.
+  return _createClass(AddressAutoComplete, [{
+    key: "geolocate",
+    value: function geolocate() {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(function (position) {
+          var geolocation = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          };
+          var circle = new google.maps.Circle({
+            center: geolocation,
+            radius: position.coords.accuracy
+          });
+          this.autoComplete.setBounds(circle.getBounds());
+        });
+      }
+    }
+  }, {
+    key: "getAddressObject",
+    value: function getAddressObject() {
+      var formattedAddress = {
+        formatted_address: this._internalVars.placesObject.formatted_address,
+        address_components: this._internalVars.placesObject.address_components,
+        geolocation: this._internalVars.placesObject.geometry.location
+      };
+      return formattedAddress;
+    }
+  }]);
+}();
+/**
+ * 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.addressSearchField = this._internalVars.node.querySelector('.address-search-field');
+  this._internalVars.searchClearBtn = this._internalVars.node.querySelector('.btn--search-clear');
+
+  // Create the autocomplete object, restricting the search to geographical
+  // location types.
+  this.autoComplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */this._internalVars.addressSearchField, {
+    types: ['geocode']
+  });
+  this._internalVars.componentForm = {
+    street_number: 'short_name',
+    route: 'long_name',
+    locality: 'long_name',
+    administrative_area_level_1: 'short_name',
+    country: 'long_name',
+    postal_code: 'short_name'
+  };
+  this._internalVars.placesObject = {};
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  this._internalVars.searchClearBtn.addEventListener('click', clearSearch.bind(this));
+  this._internalVars.addressSearchField.addEventListener('input', toggleClearButton.bind(this));
+}
+function clearSearch() {
+  this._internalVars.addressSearchField.value = '';
+  toggleClearButton.call(this);
+}
+function toggleClearButton() {
+  if (this._internalVars.addressSearchField.value !== '') {
+    this._internalVars.searchClearBtn.classList.remove('hidden');
+  } else {
+    this._internalVars.searchClearBtn.classList.add('hidden');
+  }
+}
+function init() {
+  console.log('stop here');
+  // Hide the search close button
+  if (this._internalVars.addressSearchField.value === '' && !this._internalVars.searchClearBtn.classList.contains('hidden')) {
+    this._internalVars.searchClearBtn.classList.add('hidden');
+  }
+
+  // When the user selects an address from the dropdown, populate the address
+  // fields in the form.
+  this.autoComplete.addListener('place_changed', fillInAddress.bind(this));
+  var styleInitialized = false;
+  if (document.querySelector(selector).querySelector('.address-search-field') !== null) {
+    document.querySelector(selector).querySelector('.address-search-field').addEventListener('blur', function (event) {
+      if (document.querySelector('.pac-container') && document.querySelector('.pac-container').children.length === 0 && event.target.value.length !== 0 && document.querySelector('.address_1').value.length === 0) {
+        document.querySelector('.address_1').value = event.target.value;
+        event.target.value = '';
+      }
+    });
+  }
+}
+function fillInAddress() {
+  console.log('new results :) ');
+  ValueSelected = true;
+
+  // Get the place details from the autocomplete object.
+  var place = this.autoComplete.getPlace();
+  this._internalVars.placesObject = place;
+  document.dispatchEvent(event);
+
+  // Reset All Fields
+  var address1Element = this._internalVars.node.querySelector('.address_1');
+  address1Element.value = '';
+  address1Element.disabled = false;
+  for (var component in this._internalVars.componentForm) {
+    if (component !== 'street_number' && component !== 'route' && this._internalVars.node.querySelector('.' + component) !== null) {
+      var element = this._internalVars.node.querySelector('.' + component);
+      element.value = '';
+      element.disabled = false;
+    }
+  }
+
+  // Get each component of the address from the place details
+  // and fill the corresponding field on the form.
+  for (var i = 0; i < place.address_components.length; i++) {
+    var addressType = place.address_components[i].types[0];
+    if (this._internalVars.componentForm[addressType]) {
+      var val = place.address_components[i][this._internalVars.componentForm[addressType]];
+      if (addressType === 'street_number') {
+        address1Element.value = val + ' ';
+      } else if (addressType === 'route') {
+        address1Element.value = address1Element.value + val;
+      } else {
+        if (this._internalVars.node.querySelector('.' + addressType)) {
+          this._internalVars.node.querySelector('.' + addressType).value = val;
+        }
+      }
+    }
+  }
+  clearSearch.call(this);
+
+  // document.querySelector(selector).value = '';
+}
+var _default = exports["default"] = AddressAutoComplete;

package/dist/components/Alert.js

@@ -0,0 +1,145 @@
+"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 Alert : Content must be defined and set to a DOM selector or Node']
+}];
+var Alert = /*#__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 alert node
+   */
+  function Alert(options) {
+    _classCallCheck(this, Alert);
+    this._internalVars = {
+      node: null,
+      //used for current node
+      alertContentClass: "alert-content",
+      alertContent: null,
+      alertCloseBtnClass: "icon-close-20",
+      alertCloseBtn: 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
+
+  /**
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(Alert, [{
+    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.alertCloseBtn = this._internalVars.node.querySelectorAll('button.' + this._internalVars.alertCloseBtnClass);
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  for (var i = 0; i < this._internalVars.alertCloseBtn.length; i++) {
+    this._internalVars.alertCloseBtn[i].addEventListener("click", removeAlert.bind(this, this._internalVars.alertCloseBtn[i]));
+  }
+}
+function removeEvents() {
+  for (var i = 0; i < this._internalVars.alertCloseBtn.length; i++) {
+    this._internalVars.alertCloseBtn[i].removeEventListener("click", removeAlert.bind(this, this._internalVars.alertCloseBtn[i]));
+  }
+}
+
+/**
+ * removeAlert()
+ * checks to remove Alert appropriately
+ */
+function removeAlert(e) {
+  if (this._internalVars.node.children.length == 1 && e.parentNode.parentNode.children.length == 1) {
+    fadeAndRemove(this._internalVars.node);
+  }
+  if (e.parentNode.parentNode.children.length == 1) {
+    fadeAndRemove(e.parentNode.parentNode.parentNode);
+  }
+  fadeAndRemove(e.parentNode);
+}
+
+/**
+ * fade()
+ * fade effect
+ */
+function fadeOutEffect(e) {
+  var op = 1; // initial opacity
+  var timer = setInterval(function () {
+    if (op <= 0.01) {
+      clearInterval(timer);
+    }
+    e.style.opacity = op;
+    e.style.filter = 'alpha(opacity=' + op * 100 + ")";
+    op -= op * 0.1;
+  }, 15);
+}
+
+/**
+ * removeChildCall
+ * Instantiate removal of child element
+ */
+function removeChildCall(e) {
+  e.parentNode.removeChild(e);
+}
+
+/**
+ * fadeAndRemove()
+ * Combine fade effect with delayed removal of element
+ */
+function fadeAndRemove(e) {
+  fadeOutEffect(e);
+  setTimeout(removeChildCall, 500, e);
+}
+var _default = exports["default"] = Alert;

package/dist/components/BackgroundPattern.js

@@ -0,0 +1,99 @@
+"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 Trianglify = require('trianglify');
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK BackgroundPattern : Content must be defined and set to a DOM selector or Node"]
+}];
+var BackgroundPattern = /*#__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
+   */
+  function BackgroundPattern(options) {
+    _classCallCheck(this, BackgroundPattern);
+    console.log('BackgroundPattern initialized');
+
+    //SM=75 MED=125 LG=175
+
+    this._internalVars = {
+      node: null //used for current node
+    };
+
+    //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);
+      init.call(this);
+    }
+  }
+
+  /**
+  * destroy()
+  * removes the node from the dom and any events attached
+  */
+  return _createClass(BackgroundPattern, [{
+    key: "destroy",
+    value: function destroy() {
+      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
+/**
+ * init()
+ * Initializes the Trianglify pattern
+ */
+function init() {
+  var pattern = Trianglify({
+    variance: "0.7",
+    cell_size: 175,
+    x_colors: ["#ffffff", "#dcdcdc", "#e6e6e6", "#ffffff", "e8e8e8", "f0f0f0", "#dcdcdc", "#ffffff", "#f5f5f5", "e8e8e8", "#ffffff", "#e6e6e6", "#f5f5f5", "#fafafa", "#ffffff"],
+    width: 3000,
+    height: 800
+  });
+  this._internalVars.node.appendChild(pattern.canvas());
+}
+
+/**
+ * setLocalVars()
+ * set local vars to the ones passed in options
+ */
+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;
+  }
+}
+var _default = exports["default"] = BackgroundPattern;