geico-design-kit 7.0.0

package/dist/components/SegmentedControl.js

@@ -0,0 +1,327 @@
+"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); } //Module Imports
+var interact = require('interact.js');
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK Segmented Control : Segmented Control must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "initialActive",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["number"],
+  errorMessage: ["GDK Segmented Control : initialActive must be set to a number"]
+}, {
+  setting: "segmentedControlChange",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK Segmented Control : segmentedControlChange must be a defined and set function"]
+}];
+var SegmentedControl = /*#__PURE__*/function () {
+  /**
+   * Refer to the design kit section of this component for JS examples and setting details.
+   * @param {string, Object} content
+   * A reference to the segmented control component node
+   *
+   * @param {number} [initialActive=1]
+   * The number of the item to set as the active selection on initialization. Must be greater than 0 and equal to or less than the number of segment options
+   *
+   * @param {function} [segmentedControlChange]
+   * A callback function that is triggered when the Segmented Control selection is changed
+   */
+  function SegmentedControl(options) {
+    _classCallCheck(this, SegmentedControl);
+    this._internalVars = {};
+
+    //options with defaults set
+    this._defaults = {
+      initialActive: 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);
+      init.call(this);
+      setEvents.call(this);
+      Array.prototype.forEach.call(this._internalVars.dropZoneObject, function (element) {
+        element.setAttribute('role', 'switch');
+        if (element.classList.contains('active')) {
+          element.setAttribute('aria-checked', 'true');
+        } else {
+          element.setAttribute('aria-checked', 'false');
+        }
+      });
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * setInitialActiveOpt(index)
+   * @param {number} index
+   * sets the initial active segment
+   */
+  return _createClass(SegmentedControl, [{
+    key: "setInitialActiveOpt",
+    value: function setInitialActiveOpt(index) {
+      setInitialActive.call(this, index);
+    }
+
+    /**
+     * activeSegment()
+     * returns the current active segment anchor element
+     * @returns {Element}
+     */
+  }, {
+    key: "activeSegment",
+    value: function activeSegment() {
+      return this._internalVars.selectedSegment;
+    }
+
+    /**
+     * 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];
+        }
+      }
+    }
+  }]);
+}();
+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.segmentedControlObject = this._internalVars.node;
+  this._internalVars.draggableClass = '.sc-draggable';
+  this._internalVars.dropZoneClass = '.dropzone';
+  this._internalVars.animateClass = 'animate-drop';
+  this._internalVars.dropActiveClass = 'drop-active';
+  this._internalVars.dropTargetClass = 'drop-target';
+  this._internalVars.activeClass = 'active';
+  this._internalVars.activeDragClass = 'active-drag';
+  this._internalVars.dropZoneObject = this._internalVars.segmentedControlObject.querySelectorAll(this._internalVars.dropZoneClass);
+  this._internalVars.draggableObject = this._internalVars.segmentedControlObject.querySelector(this._internalVars.draggableClass);
+  this._internalVars.selectedSegment = null;
+}
+function init() {
+  var _this = this;
+  var index = this._options.initialActive;
+  setInitialActive.call(this, index);
+  interact(this._internalVars.draggableObject).draggable({
+    inertia: true,
+    restrict: {
+      restriction: 'parent',
+      endOnly: false,
+      elementRect: {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 1
+      }
+    },
+    autoScroll: false,
+    snap: {
+      targets: [{
+        y: 0,
+        range: Infinity
+      }]
+    },
+    onmove: scDragMoveListener.bind(this)
+  });
+  function scDragMoveListener(event) {
+    var target = event.target,
+      x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
+      y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+    target.style.left = x + "px";
+    target.setAttribute('data-x', x);
+    target.setAttribute('data-y', 0);
+    target.innerText = '';
+    target.style.zIndex = 1;
+    target.classList.add(this._internalVars.activeDragClass);
+  }
+  Array.prototype.forEach.call(this._internalVars.dropZoneObject, function (element) {
+    interact(element).dropzone({
+      accept: _this._internalVars.draggableClass,
+      overlap: 0.4,
+      ondropactivate: dropActivate.bind(_this),
+      ondragenter: dragEnter.bind(_this),
+      ondragleave: dragLeave.bind(_this),
+      ondrop: onDrop.bind(_this),
+      ondropdeactivate: dropDeactivate.bind(_this)
+    });
+  });
+  function dropActivate(event) {
+    event.target.classList.add(this._internalVars.dropActiveClass);
+  }
+  function dragEnter(event) {
+    var dropzoneElement = event.target;
+    dropzoneElement.classList.add(this._internalVars.dropTargetClass);
+  }
+  function dragLeave(event) {
+    event.target.classList.remove(this._internalVars.dropTargetClass);
+  }
+  function onDrop(event) {
+    var xcord = event.target.offsetLeft,
+      delay = setTimeout(setNewSelection.bind(this), 350),
+      current = event.target.offsetParent.querySelector('.' + this._internalVars.activeClass);
+    current.classList.remove(this._internalVars.activeClass);
+    current.setAttribute('aria-checked', 'false');
+    event.target.classList.add(this._internalVars.activeClass);
+    event.target.setAttribute('aria-checked', 'true');
+    event.relatedTarget.classList.add(this._internalVars.animateClass);
+    event.relatedTarget.setAttribute('data-x', xcord);
+    event.relatedTarget.style.left = xcord + 'px';
+    function setNewSelection() {
+      event.relatedTarget.textContent = event.target.textContent;
+      event.relatedTarget.style.zIndex = 2;
+      event.relatedTarget.classList.remove(this._internalVars.animateClass);
+      event.relatedTarget.classList.remove(this._internalVars.activeDragClass);
+      this._internalVars.segmentedControlObject.querySelector('.' + this._internalVars.activeClass).focus();
+    }
+    this._internalVars.selectedSegment = event.target;
+    if (this._options.segmentedControlChange) {
+      this._options.segmentedControlChange(event.target);
+    }
+  }
+  function dropDeactivate(event) {
+    event.target.classList.remove(this._internalVars.dropActiveClass);
+    event.target.classList.remove(this._internalVars.dropTargetClass);
+  }
+}
+function setEvents() {
+  var _this2 = this;
+  var eventName = _UserAgentService["default"]._clickEventName();
+  Array.prototype.forEach.call(this._internalVars.dropZoneObject, function (element) {
+    element.addEventListener(eventName, setActiveSelection.bind(_this2));
+    element.addEventListener('focus', function () {
+      if (element.classList.contains('active')) {
+        element.parentNode.firstElementChild.style.textDecoration = 'underline';
+      } else {
+        element.parentNode.firstElementChild.style.textDecoration = 'none';
+      }
+    });
+    element.addEventListener('blur', function () {
+      element.parentNode.firstElementChild.style.textDecoration = 'none';
+    });
+  });
+  this._internalVars.draggableObject.addEventListener(eventName, function () {
+    this.parentNode.querySelector('.active').focus();
+    this.style.textDecoration = 'underline';
+  });
+  window.addEventListener('resize', resetActiveSelection.bind(this));
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var _this3 = this;
+  var eventName = _UserAgentService["default"]._clickEventName();
+  Array.prototype.forEach.call(this._internalVars.dropZoneObject, function (element) {
+    element.removeEventListener(eventName, setActiveSelection.bind(_this3));
+    element.removeEventListener('focus', function () {
+      if (element.classList.contains('active')) {
+        element.parentNode.firstElementChild.style.textDecoration = 'underline';
+      } else {
+        element.parentNode.firstElementChild.style.textDecoration = 'none';
+      }
+    });
+    element.removeEventListener('blur', function () {
+      element.parentNode.firstElementChild.style.textDecoration = 'none';
+    });
+  });
+  this._internalVars.draggableObject.removeEventListener(eventName, function () {
+    this.parentNode.querySelector('.active').focus();
+    this.style.textDecoration = 'underline';
+  });
+  window.removeEventListener('resize', resetActiveSelection.bind(this));
+}
+function setInitialActive(activeIndex) {
+  var activeElement = this._internalVars.segmentedControlObject.querySelector('.' + this._internalVars.activeClass);
+  if (activeElement) {
+    activeElement.classList.remove(this._internalVars.activeClass);
+    activeElement.setAttribute('aria-checked', 'false');
+  }
+  if (activeIndex <= this._internalVars.dropZoneObject.length && activeIndex > 0) {
+    this._internalVars.dropZoneObject[activeIndex - 1].classList.add(this._internalVars.activeClass);
+  } else {
+    this._internalVars.dropZoneObject[0].classList.add(this._internalVars.activeClass);
+  }
+  activeElement = this._internalVars.segmentedControlObject.querySelector('.' + this._internalVars.activeClass);
+  var activeElementLeft = activeElement.offsetLeft,
+    activeElementContent = activeElement.innerHTML;
+  activeElement.setAttribute('aria-checked', 'true');
+  this._internalVars.draggableObject.style.left = activeElementLeft + 'px';
+  this._internalVars.draggableObject.innerHTML = activeElementContent;
+  this._internalVars.draggableObject.setAttribute('data-x', activeElementLeft);
+  this._internalVars.selectedSegment = activeElement;
+}
+function setActiveSelection(event) {
+  event.preventDefault();
+  var left = event.target.offsetLeft,
+    delay = setTimeout(setNewSelection.bind(this), 350),
+    current = event.target.offsetParent.querySelector('.' + this._internalVars.activeClass);
+  current.classList.remove(this._internalVars.activeClass);
+  current.setAttribute('aria-checked', 'false');
+  event.target.classList.add(this._internalVars.activeClass);
+  event.target.setAttribute('aria-checked', 'true');
+  this._internalVars.draggableObject.classList.add(this._internalVars.animateClass);
+  this._internalVars.draggableObject.classList.add(this._internalVars.activeDragClass);
+  this._internalVars.draggableObject.innerText = '';
+  this._internalVars.draggableObject.style.zIndex = 1;
+  this._internalVars.draggableObject.setAttribute('data-x', left);
+  this._internalVars.draggableObject.style.left = left + 'px';
+  function setNewSelection() {
+    this._internalVars.draggableObject.innerHTML = event.target.innerHTML;
+    this._internalVars.draggableObject.style.zIndex = 2;
+    this._internalVars.draggableObject.classList.remove(this._internalVars.animateClass);
+    this._internalVars.draggableObject.classList.remove(this._internalVars.activeDragClass);
+    this._internalVars.draggableObject.style.textDecoration = 'underline';
+  }
+  this._internalVars.selectedSegment = event.target;
+  if (this._options.segmentedControlChange) {
+    this._options.segmentedControlChange(event.target);
+  }
+}
+function resetActiveSelection() {
+  var current = this._internalVars.segmentedControlObject.querySelector('.' + this._internalVars.activeClass),
+    left = current.offsetLeft;
+  this._internalVars.draggableObject.setAttribute('data-x', left);
+  this._internalVars.draggableObject.style.left = left + 'px';
+}
+var _default = exports["default"] = SegmentedControl;

package/dist/components/SortableTable.js

@@ -0,0 +1,166 @@
+"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 Tablesort = require("tablesort");
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK SortableTableDeprecated : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "descending",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["boolean"],
+  errorMessage: ["GDK SortableTableDeprecated : descending must be a boolean"]
+}];
+var SortableTable = /*#__PURE__*/function () {
+  /**
+   * Refer to the design kit section of this component for JS examples and setting details.
+   * @param {string, Object} content
+   * A reference to the sortable table node
+   *
+   * @param {boolean} [descending=false]
+   * The number of the item to set as the active selection on initialization. Must be greater than 0 and equal to or less than the number of segment options
+   *
+   */
+  function SortableTable(options) {
+    _classCallCheck(this, SortableTable);
+    this._internalVars = {
+      node: null,
+      //used for current node
+      sortableTable: null //hold reference to the sortable table
+    };
+
+    //options with defaults set
+    this._defaults = {
+      descending: 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);
+      init.call(this);
+    }
+  }
+
+  /**
+  * update()
+  * Updates the sort if you have added content
+  */
+  return _createClass(SortableTable, [{
+    key: "update",
+    value: function update() {
+      this._internalVars.sortableTable.refresh();
+    }
+
+    /**
+    * destroy()
+    * removes the node from the dom and any events attached
+    */
+  }, {
+    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];
+        }
+      }
+    }
+  }]);
+}();
+/**
+* init()
+* instantiate the Tablesort
+*/
+function init() {
+  var options = {};
+  if (this._options.descending) {
+    options.descending = true;
+  }
+  Tablesort.extend('date', function (item) {
+    return (item.search(/(Mon|Tue|Wed|Thu|Fri|Sat|Sun)\.?\,?\s*/i) !== -1 || item.search(/\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/) !== -1 || item.search(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)/i) !== -1) && !isNaN(parseDate.call(this, item));
+  }, function (a, b) {
+    a = a.toLowerCase();
+    b = b.toLowerCase();
+    return parseDate.call(this, b) - parseDate.call(this, a);
+  });
+  Tablesort.extend('number', function (item) {
+    return item.match(/^-?[£\x24Û¢´€]?\d+\s*([,\.]\d{0,2})/) ||
+    // Prefixed currency
+    item.match(/^-?\d+\s*([,\.]\d{0,2})?[£\x24Û¢´€]/) ||
+    // Suffixed currency
+    item.match(/^-?(\d)*-?([,\.]){0,1}-?(\d)+([E,e][\-+][\d]+)?%?$/); // Number
+  }, function (a, b) {
+    a = cleanNumber.call(this, a);
+    b = cleanNumber.call(this, b);
+    return compareNumber.call(this, b, a);
+  });
+  this._internalVars.sortableTable = new Tablesort(this._internalVars.node, options);
+}
+
+/**
+* cleanNumber()
+* regex replace for extending Tablsort to sort by numbers (and currency)
+*/
+function cleanNumber(i) {
+  return i.replace(/[^\-?0-9.]/g, '');
+}
+
+/**
+* compareNumber()
+* sort function for numbers
+*/
+function compareNumber(a, b) {
+  a = parseFloat(a);
+  b = parseFloat(b);
+  a = isNaN(a) ? 0 : a;
+  b = isNaN(b) ? 0 : b;
+  return a - b;
+}
+
+/**
+* parseDate()
+* prepares date for sorting
+*/
+function parseDate(date) {
+  date = date.replace(/\-/g, '/');
+  date = date.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/, '$1/$2/$3'); // format before getTime
+
+  return new Date(date).getTime();
+}
+
+/**
+* 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;
+  }
+}
+var _default = exports["default"] = SortableTable;

package/dist/components/Tabs.js

@@ -0,0 +1 @@
+"use strict";