@websy/websy-designs 1.2.6 → 1.2.7

package/dist/websy-designs-es6.js

@@ -278,11 +278,13 @@ var WebsyDatePicker = /*#__PURE__*/function () {
     this.currentselection = [];
     this.validDates = [];
     this.validYears = [];
+    this.validHours = [];
     this.customRangeSelected = true;
     this.shiftPressed = false;
     var DEFAULTS = {
       defaultRange: 0,
       allowClear: true,
+      hideRanges: false,
       minAllowedDate: this.floorDate(new Date(new Date(new Date().setFullYear(new Date().getFullYear() - 1)).setDate(1))),
       maxAllowedDate: this.floorDate(new Date(new Date())),
       minAllowedYear: 1970,
@@ -290,7 +292,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       daysOfWeek: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
       monthsOfYear: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
       hours: new Array(24).fill(0).map(function (d, i) {
-        return (i < 10 ? '0' : '') + i + ':00';
+        return {
+          text: (i < 10 ? '0' : '') + i + ':00',
+          num: 1 / 24 * i
+        };
       }),
       mode: 'date',
       monthMap: {
@@ -358,7 +363,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
         label: 'Last 24 Months',
         range: [this.floorDate(new Date(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() - 24))), this.floorDate(new Date(new Date().setDate(1)))]
       }],
-      hour: []
+      hour: [{
+        label: 'All',
+        range: ['00:00', '23:00']
+      }]
     };
     this.options = _extends({}, DEFAULTS, options);
     this.selectedRange = this.options.defaultRange || 0;
@@ -388,7 +396,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
         html += "\n          <svg class='clear-selection' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 512 512\"><title>ionicons-v5-l</title><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n        ";
       }
 
-      html += "\n          </div>\n          <div id='".concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n          <div id='").concat(this.elementId, "_content' class='websy-date-picker-content'>\n            <div class='websy-date-picker-ranges'>\n              <ul id='").concat(this.elementId, "_rangelist'>\n                ").concat(this.renderRanges(), "\n              </ul>\n            </div><!--\n            --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n            <div class='websy-dp-button-container'>\n              <span class=\"dp-footnote\">Click and drag or hold Shift and click to select a range of values</span>\n              <button class='").concat(this.options.cancelBtnClasses || '', " websy-btn websy-dp-cancel'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n              <button class='").concat(this.options.confirmBtnClasses || '', " websy-btn websy-dp-confirm'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><polyline points=\"416 128 192 384 96 288\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n            </div>\n          </div>          \n        </div>\n      ");
+      html += "\n          </div>\n          <div id='".concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n          <div id='").concat(this.elementId, "_content' class='websy-date-picker-content ").concat(this.options.hideRanges === true ? 'hide-ranges' : '', "'>\n            <div class='websy-date-picker-ranges' >\n              <ul id='").concat(this.elementId, "_rangelist'>\n                ").concat(this.renderRanges(), "\n              </ul>\n            </div><!--\n            --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n            <div class='websy-dp-button-container'>\n              <span class=\"dp-footnote\">Click and drag or hold Shift and click to select a range of values</span>\n              <button class='").concat(this.options.cancelBtnClasses || '', " websy-btn websy-dp-cancel'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n              <button class='").concat(this.options.confirmBtnClasses || '', " websy-btn websy-dp-confirm'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><polyline points=\"416 128 192 384 96 288\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n            </div>\n          </div>          \n        </div>\n      ");
       el.innerHTML = html;
       this.render();
     } else {
@@ -399,6 +407,8 @@ var WebsyDatePicker = /*#__PURE__*/function () {
   _createClass(WebsyDatePicker, [{
     key: "close",
     value: function close(confirm) {
+      var _this2 = this;
+
       var maskEl = document.getElementById("".concat(this.elementId, "_mask"));
       var contentEl = document.getElementById("".concat(this.elementId, "_content"));
       var el = document.getElementById(this.elementId);
@@ -416,9 +426,27 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           console.log('confirm', this.currentselection);
 
           if (this.customRangeSelected === true) {
-            this.options.onChange(this.selectedRangeDates, true);
+            if (this.options.mode === 'hour') {
+              var hoursOut = [];
+
+              for (var i = this.selectedRangeDates[0]; i < this.selectedRangeDates[1] + 1; i++) {
+                hoursOut.push(this.options.hours[i]);
+              }
+
+              this.options.onChange(hoursOut, true);
+            } else {
+              this.options.onChange(this.selectedRangeDates, true);
+            }
           } else {
-            this.options.onChange(this.currentselection, false);
+            if (this.options.mode === 'hour') {
+              var _hoursOut = this.selectedRangeDates.map(function (h) {
+                return _this2.options.hours[h];
+              });
+
+              this.options.onChange(_hoursOut, true);
+            } else {
+              this.options.onChange(this.currentselection, false);
+            }
           }
         }
 
@@ -534,7 +562,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
   }, {
     key: "highlightRange",
     value: function highlightRange() {
-      var _this2 = this;
+      var _this3 = this;
 
       var el = document.getElementById("".concat(this.elementId, "_dateList"));
       var dateEls = el.querySelectorAll('.websy-dp-date');
@@ -570,7 +598,8 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           diff = Math.floor(this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth() - this.selectedRangeDates[0].getMonth()) + yearDiff;
           console.log('year diff', yearDiff);
           console.log('diff', diff);
-        } else if (this.options.mode === 'hour') {// 
+        } else if (this.options.mode === 'hour') {
+          diff = this.selectedRangeDates[this.selectedRangeDates.length - 1] - this.selectedRangeDates[0];
         }
 
         for (var _i = 0; _i < diff + 1; _i++) {
@@ -591,7 +620,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
             d = new Date(this.selectedRangeDates[0].getTime()).setMonth(this.selectedRangeDates[0].getMonth() + _i);
             rangeStart = this.selectedRangeDates[0].getTime();
             rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime();
-          } else if (this.options.mode === 'hour') {// 
+          } else if (this.options.mode === 'hour') {
+            d = this.selectedRangeDates[0] + _i;
+            rangeStart = this.selectedRangeDates[0];
+            rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1];
           }
 
           var dateEl = void 0;
@@ -605,7 +637,8 @@ var WebsyDatePicker = /*#__PURE__*/function () {
             console.log(this.selectedRangeDates);
             console.log(rangeStart, rangeEnd);
             dateEl = document.getElementById("".concat(this.elementId, "_").concat(d, "_monthyear"));
-          } else if (this.options.mode === 'hour') {// 
+          } else if (this.options.mode === 'hour') {
+            dateEl = document.getElementById("".concat(this.elementId, "_").concat(d, "_hour"));
           }
 
           if (dateEl) {
@@ -624,13 +657,14 @@ var WebsyDatePicker = /*#__PURE__*/function () {
         this.currentselection.forEach(function (d) {
           var dateEl;
 
-          if (_this2.options.mode === 'date') {
-            dateEl = document.getElementById("".concat(_this2.elementId, "_").concat(d, "_date"));
-          } else if (_this2.options.mode === 'year') {
-            dateEl = document.getElementById("".concat(_this2.elementId, "_").concat(d, "_year"));
-          } else if (_this2.options.mode === 'monthyear') {
-            dateEl = document.getElementById("".concat(_this2.elementId, "_").concat(d, "_monthyear"));
-          } else if (_this2.options.mode === 'hour') {// 
+          if (_this3.options.mode === 'date') {
+            dateEl = document.getElementById("".concat(_this3.elementId, "_").concat(d, "_date"));
+          } else if (_this3.options.mode === 'year') {
+            dateEl = document.getElementById("".concat(_this3.elementId, "_").concat(d, "_year"));
+          } else if (_this3.options.mode === 'monthyear') {
+            dateEl = document.getElementById("".concat(_this3.elementId, "_").concat(d, "_monthyear"));
+          } else if (_this3.options.mode === 'hour') {
+            dateEl = document.getElementById("".concat(_this3.elementId, "_").concat(d, "_hour"));
           }
 
           dateEl.classList.add('selected');
@@ -684,22 +718,24 @@ var WebsyDatePicker = /*#__PURE__*/function () {
   }, {
     key: "renderDates",
     value: function renderDates(disabledDates) {
-      var _this3 = this;
+      var _this4 = this;
 
       var disabled = [];
       this.validDates = [];
       this.validYears = [];
+      this.validHours = [];
       this.monthYears = {};
       this.monthYearMonths = [];
 
       if (disabledDates) {
         disabled = disabledDates.map(function (d) {
-          if (_this3.options.mode === 'date') {
+          if (_this4.options.mode === 'date') {
             return d.getTime();
-          } else if (_this3.options.mode === 'year') {
+          } else if (_this4.options.mode === 'year') {
+            return d;
+          } else if (_this4.options.mode === 'monthyear') {// 
+          } else if (_this4.options.mode === 'hour') {
             return d;
-          } else if (_this3.options.mode === 'monthyear') {// 
-          } else if (_this3.options.mode === 'hour') {// 
           }
 
           return d.getTime();
@@ -718,7 +754,8 @@ var WebsyDatePicker = /*#__PURE__*/function () {
         diff = this.options.maxAllowedYear - this.options.minAllowedYear + 1;
       } else if (this.options.mode === 'monthyear') {
         diff = Math.ceil((this.options.maxAllowedDate.getTime() - this.options.minAllowedDate.getTime()) / this.oneDay) + 1;
-      } else if (this.options.mode === 'hour') {// 
+      } else if (this.options.mode === 'hour') {
+        diff = 24;
       }
 
       var months = {};
@@ -771,8 +808,16 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           if (disabled.indexOf(_d) === -1) {
             this.validYears.push(_d);
           }
-        } else if (this.options.mode === 'hour') {// 
+        } else if (this.options.mode === 'hour') {//
         }
+      }
+
+      if (this.options.mode === 'hour') {
+        this.options.hours.forEach(function (h) {
+          if (disabled.indexOf(h.text) === -1) {
+            _this4.validHours.push(h);
+          }
+        });
       } // check each range to see if it can be enabled
 
 
@@ -816,7 +861,22 @@ var WebsyDatePicker = /*#__PURE__*/function () {
             }
           }
         } else if (this.options.mode === 'monthyear') {// 
-        } else if (this.options.mode === 'hour') {// 
+        } else if (this.options.mode === 'hour') {
+          if (this.validDates.indexOf(r.range[0]) !== -1) {
+            r.disabled = false;
+          } else if (r.range[1]) {
+            if (this.validDates.indexOf(r.range[1]) !== -1) {
+              r.disabled = false;
+            } else {
+              // check the full range until a match is found
+              for (var _i5 = r.range[0]; _i5 <= r.range[1]; _i5++) {
+                if (this.validDates.indexOf(r.range[0] + _i5) !== -1) {
+                  r.disabled = false;
+                  break;
+                }
+              }
+            }
+          }
         }
       }
 
@@ -835,7 +895,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           if (months[key][0].dayOfWeek > 0) {
             var paddedDays = [];
 
-            for (var _i5 = 0; _i5 < months[key][0].dayOfWeek; _i5++) {
+            for (var _i6 = 0; _i6 < months[key][0].dayOfWeek; _i6++) {
               paddedDays.push("<li>&nbsp;</li>");
             }
 
@@ -843,7 +903,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           }
 
           html += months[key].map(function (d) {
-            return "<li id='".concat(_this3.elementId, "_").concat(d.id, "_date' class='websy-dp-date ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.dayOfMonth, "</li>");
+            return "<li id='".concat(_this4.elementId, "_").concat(d.id, "_date' class='websy-dp-date ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.dayOfMonth, "</li>");
           }).join('');
           html += "\n            </ul>\n          </div>\n        ";
         }
@@ -856,7 +916,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
 
         html += "<div id='".concat(this.elementId, "_dateList' class='websy-dp-date-list'><ul>");
         html += yearList.map(function (d) {
-          return "<li id='".concat(_this3.elementId, "_").concat(d.id, "_year' class='websy-dp-date websy-dp-year ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.year, "</li>");
+          return "<li id='".concat(_this4.elementId, "_").concat(d.id, "_year' class='websy-dp-date websy-dp-year ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.year, "</li>");
         }).join('');
         html += "</ul></div>";
       } else if (this.options.mode === 'monthyear') {
@@ -868,7 +928,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           if (this.monthYears[year][0].monthNum > 0) {
             var paddedMonths = [];
 
-            for (var _i6 = 0; _i6 < this.monthYears[year][0].monthNum; _i6++) {
+            for (var _i7 = 0; _i7 < this.monthYears[year][0].monthNum; _i7++) {
               paddedMonths.push("<li>&nbsp;</li>");
             }
 
@@ -876,13 +936,18 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           }
 
           html += this.monthYears[year].map(function (d) {
-            return "<li id='".concat(_this3.elementId, "_").concat(d.id, "_monthyear' data-year='").concat(d.year, "' class='websy-dp-date websy-dp-monthyear'>").concat(d.month, "</li>");
+            return "<li id='".concat(_this4.elementId, "_").concat(d.id, "_monthyear' data-year='").concat(d.year, "' class='websy-dp-date websy-dp-monthyear'>").concat(d.month, "</li>");
           }).join('');
           html += "</ul>";
         }
 
         html += "</div>";
-      } else if (this.options.mode === 'hour') {// 
+      } else if (this.options.mode === 'hour') {
+        html += "<div id='".concat(this.elementId, "_dateList' class='websy-dp-date-list'><ul>");
+        html += this.options.hours.map(function (h) {
+          return "<li id='".concat(_this4.elementId, "_").concat(+h.text.split(':')[0], "_hour' data-hour='").concat(h.text, "' class='websy-dp-date websy-dp-hour'>").concat(h.text, "</li>");
+        }).join('');
+        html += "</ul></div>";
       }
 
       return html;
@@ -890,10 +955,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
   }, {
     key: "renderRanges",
     value: function renderRanges() {
-      var _this4 = this;
+      var _this5 = this;
 
       return this.options.ranges[this.options.mode].map(function (r, i) {
-        return "\n      <li data-index='".concat(i, "' class='websy-date-picker-range ").concat(i === _this4.selectedRange ? 'active' : '', " ").concat(r.disabled === true ? 'websy-disabled-range' : '', "'>").concat(r.label, "</li>\n    ");
+        return "\n      <li data-index='".concat(i, "' class='websy-date-picker-range ").concat(i === _this5.selectedRange ? 'active' : '', " ").concat(r.disabled === true ? 'websy-disabled-range' : '', "'>").concat(r.label, "</li>\n    ");
       }).join('') + "<li data-index='-1' class='websy-date-picker-range ".concat(this.selectedRange === -1 ? 'active' : '', "'>Custom</li>");
     }
   }, {
@@ -939,7 +1004,14 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           this.customRangeSelected = true;
           console.log('current selection', this.currentselection);
         } else {
-          this.currentselection.push(timestamp);
+          var index = this.currentselection.indexOf(timestamp);
+
+          if (index !== -1) {
+            this.currentselection.splice(index, 1);
+          } else {
+            this.currentselection.push(timestamp);
+          }
+
           this.currentselection.sort(function (a, b) {
             return a - b;
           });
@@ -953,7 +1025,8 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       } else if (this.options.mode === 'year') {
         this.selectedRangeDates = [this.currentselection[0], this.currentselection[1] || this.currentselection[0]];
       } else if (this.options.mode === 'monthyear') {// 
-      } else if (this.options.mode === 'hour') {// 
+      } else if (this.options.mode === 'hour') {
+        this.selectedRangeDates = [this.currentselection[0], this.currentselection[1] || this.currentselection[0]];
       } // if (this.currentselection.length === 2) {
       //   this.currentselection = [] 
       // }    
@@ -1022,33 +1095,36 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       } else if (this.options.mode === 'monthyear') {
         this.options.minAllowedDate = range[0];
         this.options.maxAllowedDate = range[1] || range[0];
-      } else if (this.options.mode === 'hour') {// 
+      } else if (this.options.mode === 'hour') {
+        this.options.minAllowedHour = range[0];
+        this.options.maxAllowedHour = range[1] || range[0];
       }
     }
   }, {
     key: "updateRange",
     value: function updateRange() {
-      var _this5 = this;
+      var _this6 = this;
 
       var range;
 
       if (this.selectedRange === -1) {
         var list = (this.currentselection.length > 0 ? this.currentselection : this.selectedRangeDates).map(function (d) {
-          if (_this5.options.mode === 'date') {
+          if (_this6.options.mode === 'date') {
             if (!d.toLocaleDateString) {
               d = new Date(d);
             }
 
             return d.toLocaleDateString();
-          } else if (_this5.options.mode === 'year') {
+          } else if (_this6.options.mode === 'year') {
             return d;
-          } else if (_this5.options.mode === 'monthyear') {
+          } else if (_this6.options.mode === 'monthyear') {
             if (!d.getMonth) {
               d = new Date(d);
             }
 
-            return "".concat(_this5.options.monthMap[d.getMonth()], " ").concat(d.getFullYear());
-          } else if (_this5.options.mode === 'hour') {// 
+            return "".concat(_this6.options.monthMap[d.getMonth()], " ").concat(d.getFullYear());
+          } else if (_this6.options.mode === 'hour') {
+            return d;
           }
         });
         var start = list[0];
@@ -1060,6 +1136,11 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           start = "".concat(list.length, " selected");
         }
 
+        if (this.options.mode === 'hour') {
+          start = this.options.hours[start].text;
+          end = "".concat(this.customRangeSelected === true ? ' - ' : '').concat(this.options.hours[list[list.length - 1]].text);
+        }
+
         range = {
           label: "".concat(start).concat(end)
         };
@@ -1096,7 +1177,7 @@ Date.prototype.floor = function () {
 
 var WebsyDropdown = /*#__PURE__*/function () {
   function WebsyDropdown(elementId, options) {
-    var _this6 = this;
+    var _this7 = this;
 
     _classCallCheck(this, WebsyDropdown);
 
@@ -1140,10 +1221,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
       el.addEventListener('mouseout', this.handleMouseOut.bind(this));
       el.addEventListener('mousemove', this.handleMouseMove.bind(this));
       var headerLabel = this.selectedItems.map(function (s) {
-        return _this6.options.items[s].label || _this6.options.items[s].value;
+        return _this7.options.items[s].label || _this7.options.items[s].value;
       }).join(this.options.multiValueDelimiter);
       var headerValue = this.selectedItems.map(function (s) {
-        return _this6.options.items[s].value || _this6.options.items[s].label;
+        return _this7.options.items[s].value || _this7.options.items[s].label;
       }).join(this.options.multiValueDelimiter);
       var html = "\n        <div id='".concat(this.elementId, "_container' class='websy-dropdown-container ").concat(this.options.disabled ? 'disabled' : '', " ").concat(this.options.disableSearch !== true ? 'with-search' : '', " ").concat(this.options.style, " ").concat(this.options.customActions.length > 0 ? 'with-actions' : '', "'>\n          <div id='").concat(this.elementId, "_header' class='websy-dropdown-header ").concat(this.selectedItems.length === 1 ? 'one-selected' : '', " ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n            <svg class='search' width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><path d=\"M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><line x1=\"338.29\" y1=\"338.29\" x2=\"448\" y2=\"448\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px\"/></svg>\n            <span id='").concat(this.elementId, "_headerLabel' class='websy-dropdown-header-label'>").concat(this.options.label, "</span>\n            <span data-info='").concat(headerLabel, "' class='websy-dropdown-header-value' id='").concat(this.elementId, "_selectedItems'>").concat(headerLabel, "</span>\n            <input class='dropdown-input' id='").concat(this.elementId, "_input' name='").concat(this.options.field || this.options.label, "' value='").concat(headerValue, "'>\n            <svg class='arrow' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>            \n      ");
 
@@ -1426,10 +1507,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
   }, {
     key: "renderItems",
     value: function renderItems() {
-      var _this7 = this;
+      var _this8 = this;
 
       var html = this.options.items.map(function (r, i) {
-        return "\n      <li data-index='".concat(r.index, "' class='websy-dropdown-item ").concat((r.classes || []).join(' '), " ").concat(_this7.selectedItems.indexOf(r.index) !== -1 ? 'active' : '', "'>").concat(r.label, "</li>\n    ");
+        return "\n      <li data-index='".concat(r.index, "' class='websy-dropdown-item ").concat((r.classes || []).join(' '), " ").concat(_this8.selectedItems.indexOf(r.index) !== -1 ? 'active' : '', "'>").concat(r.label, "</li>\n    ");
       }).join('');
       var el = document.getElementById("".concat(this.elementId, "_items"));
 
@@ -1448,7 +1529,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
   }, {
     key: "updateHeader",
     value: function updateHeader(item) {
-      var _this8 = this;
+      var _this9 = this;
 
       var el = document.getElementById(this.elementId);
       var headerEl = document.getElementById("".concat(this.elementId, "_header"));
@@ -1495,17 +1576,17 @@ var WebsyDropdown = /*#__PURE__*/function () {
         } else if (this.selectedItems.length > 1) {
           if (this.options.showCompleteSelectedList === true) {
             var selectedLabels = this.selectedItems.map(function (s) {
-              return _this8.options.items[s].label || _this8.options.items[s].value;
+              return _this9.options.items[s].label || _this9.options.items[s].value;
             }).join(this.options.multiValueDelimiter);
             var selectedValues = this.selectedItems.map(function (s) {
-              return _this8.options.items[s].value || _this8.options.items[s].label;
+              return _this9.options.items[s].value || _this9.options.items[s].label;
             }).join(this.options.multiValueDelimiter);
             labelEl.innerHTML = selectedLabels;
             labelEl.setAttribute('data-info', selectedLabels);
             inputEl.value = selectedValues;
           } else {
             var _selectedValues = this.selectedItems.map(function (s) {
-              return _this8.options.items[s].value || _this8.options.items[s].label;
+              return _this9.options.items[s].value || _this9.options.items[s].label;
             }).join(this.options.multiValueDelimiter);
 
             labelEl.innerHTML = "".concat(this.selectedItems.length, " selected");
@@ -1642,16 +1723,16 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "checkRecaptcha",
     value: function checkRecaptcha() {
-      var _this9 = this;
+      var _this10 = this;
 
       return new Promise(function (resolve, reject) {
-        if (_this9.options.useRecaptcha === true) {
+        if (_this10.options.useRecaptcha === true) {
           // if (this.recaptchaValue) {                  
           grecaptcha.ready(function () {
             grecaptcha.execute(ENVIRONMENT.RECAPTCHA_KEY, {
               action: 'submit'
             }).then(function (token) {
-              _this9.apiService.add('google/checkrecaptcha', {
+              _this10.apiService.add('google/checkrecaptcha', {
                 grecaptcharesponse: token
               }).then(function (response) {
                 if (response.success && response.success === true) {
@@ -1714,14 +1795,14 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "processComponents",
     value: function processComponents(components, callbackFn) {
-      var _this10 = this;
+      var _this11 = this;
 
       if (components.length === 0) {
         callbackFn();
       } else {
         components.forEach(function (c) {
           if (typeof WebsyDesigns[c.component] !== 'undefined') {
-            c.instance = new WebsyDesigns[c.component]("".concat(_this10.elementId, "_input_").concat(c.field, "_component"), c.options);
+            c.instance = new WebsyDesigns[c.component]("".concat(_this11.elementId, "_input_").concat(c.field, "_component"), c.options);
           } else {// some user feedback here
           }
         });
@@ -1742,7 +1823,7 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render(update, data) {
-      var _this11 = this;
+      var _this12 = this;
 
       var el = document.getElementById(this.elementId);
       var componentsToProcess = [];
@@ -1752,11 +1833,11 @@ var WebsyForm = /*#__PURE__*/function () {
         this.options.fields.forEach(function (f, i) {
           if (f.component) {
             componentsToProcess.push(f);
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes || '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <div id='").concat(_this11.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes || '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <div id='").concat(_this12.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n            </div><!--\n          ");
           } else if (f.type === 'longtext') {
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes || '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <textarea\n                id=\"").concat(_this11.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                placeholder=\"").concat(f.placeholder || '', "\"\n                name=\"").concat(f.field, "\" \n                ").concat((f.attributes || []).join(' '), "\n                class=\"websy-input websy-textarea\"\n              ></textarea>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes || '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <textarea\n                id=\"").concat(_this12.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                placeholder=\"").concat(f.placeholder || '', "\"\n                name=\"").concat(f.field, "\" \n                ").concat((f.attributes || []).join(' '), "\n                class=\"websy-input websy-textarea\"\n              ></textarea>\n            </div><!--\n          ");
           } else {
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes || '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <input \n                id=\"").concat(_this11.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                type=\"").concat(f.type || 'text', "\" \n                class=\"websy-input\" \n                ").concat((f.attributes || []).join(' '), "\n                name=\"").concat(f.field, "\" \n                placeholder=\"").concat(f.placeholder || '', "\"\n                value=\"").concat(f.value || '', "\"\n                valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes || '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <input \n                id=\"").concat(_this12.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                type=\"").concat(f.type || 'text', "\" \n                class=\"websy-input\" \n                ").concat((f.attributes || []).join(' '), "\n                name=\"").concat(f.field, "\" \n                placeholder=\"").concat(f.placeholder || '', "\"\n                value=\"").concat(f.value || '', "\"\n                valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n            </div><!--\n          ");
           }
         });
         html += "\n        --><button class=\"websy-btn submit ".concat(this.options.submit.classes || '', "\">").concat(this.options.submit.text || 'Save', "</button>").concat(this.options.cancel ? '<!--' : '', "\n      ");
@@ -1773,7 +1854,7 @@ var WebsyForm = /*#__PURE__*/function () {
 
         el.innerHTML = html;
         this.processComponents(componentsToProcess, function () {
-          if (_this11.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {// this.recaptchaReady()
+          if (_this12.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {// this.recaptchaReady()
           }
         });
       }
@@ -1781,7 +1862,7 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "submitForm",
     value: function submitForm() {
-      var _this12 = this;
+      var _this13 = this;
 
       var formEl = document.getElementById("".concat(this.elementId, "Form"));
 
@@ -1795,32 +1876,32 @@ var WebsyForm = /*#__PURE__*/function () {
               data[key] = value;
             });
 
-            if (_this12.options.url) {
-              var _this12$apiService;
+            if (_this13.options.url) {
+              var _this13$apiService;
 
-              var params = [_this12.options.url];
+              var params = [_this13.options.url];
 
-              if (_this12.options.mode === 'update') {
-                params.push(_this12.options.id);
+              if (_this13.options.mode === 'update') {
+                params.push(_this13.options.id);
               }
 
               params.push(data);
 
-              (_this12$apiService = _this12.apiService)[_this12.options.mode].apply(_this12$apiService, params).then(function (result) {
-                if (_this12.options.clearAfterSave === true) {
+              (_this13$apiService = _this13.apiService)[_this13.options.mode].apply(_this13$apiService, params).then(function (result) {
+                if (_this13.options.clearAfterSave === true) {
                   // this.render()
                   formEl.reset();
                 }
 
-                _this12.options.onSuccess.call(_this12, result);
+                _this13.options.onSuccess.call(_this13, result);
               }, function (err) {
                 console.log('Error submitting form data:', err);
 
-                _this12.options.onError.call(_this12, err);
+                _this13.options.onError.call(_this13, err);
               });
-            } else if (_this12.options.submitFn) {
-              _this12.options.submitFn(data, function () {
-                if (_this12.options.clearAfterSave === true) {
+            } else if (_this13.options.submitFn) {
+              _this13.options.submitFn(data, function () {
+                if (_this13.options.clearAfterSave === true) {
                   // this.render()
                   formEl.reset();
                 }
@@ -1840,17 +1921,17 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "data",
     set: function set(d) {
-      var _this13 = this;
+      var _this14 = this;
 
       if (!this.options.fields) {
         this.options.fields = [];
       }
 
       var _loop = function _loop(key) {
-        _this13.options.fields.forEach(function (f) {
+        _this14.options.fields.forEach(function (f) {
           if (f.field === key) {
             f.value = d[key];
-            var el = document.getElementById("".concat(_this13.elementId, "_input_").concat(f.field));
+            var el = document.getElementById("".concat(_this14.elementId, "_input_").concat(f.field));
             el.value = f.value;
           }
         });
@@ -2162,7 +2243,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
 
 var Pager = /*#__PURE__*/function () {
   function Pager(elementId, options) {
-    var _this14 = this;
+    var _this15 = this;
 
     _classCallCheck(this, Pager);
 
@@ -2215,8 +2296,8 @@ var Pager = /*#__PURE__*/function () {
           allowClear: false,
           disableSearch: true,
           onItemSelected: function onItemSelected(selectedItem) {
-            if (_this14.options.onChangePageSize) {
-              _this14.options.onChangePageSize(selectedItem.value);
+            if (_this15.options.onChangePageSize) {
+              _this15.options.onChangePageSize(selectedItem.value);
             }
           }
         });
@@ -2240,13 +2321,13 @@ var Pager = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      var _this15 = this;
+      var _this16 = this;
 
       var el = document.getElementById("".concat(this.elementId, "_pageList"));
 
       if (el) {
         var pages = this.options.pages.map(function (item, index) {
-          return "<li data-index=\"".concat(index, "\" class=\"websy-page-num ").concat(_this15.options.activePage === index ? 'active' : '', "\">").concat(index + 1, "</li>");
+          return "<li data-index=\"".concat(index, "\" class=\"websy-page-num ").concat(_this16.options.activePage === index ? 'active' : '', "\">").concat(index + 1, "</li>");
         });
         var startIndex = 0;
 
@@ -2314,58 +2395,58 @@ var WebsyPDFButton = /*#__PURE__*/function () {
   _createClass(WebsyPDFButton, [{
     key: "handleClick",
     value: function handleClick(event) {
-      var _this16 = this;
+      var _this17 = this;
 
       if (event.target.classList.contains('websy-pdf-button')) {
         this.loader.show();
         setTimeout(function () {
-          if (_this16.options.targetId) {
-            var el = document.getElementById(_this16.options.targetId);
+          if (_this17.options.targetId) {
+            var el = document.getElementById(_this17.options.targetId);
 
             if (el) {
               var pdfData = {
                 options: {}
               };
 
-              if (_this16.options.pdfOptions) {
-                pdfData.options = _extends({}, _this16.options.pdfOptions);
+              if (_this17.options.pdfOptions) {
+                pdfData.options = _extends({}, _this17.options.pdfOptions);
               }
 
-              if (_this16.options.header) {
-                if (_this16.options.header.elementId) {
-                  var headerEl = document.getElementById(_this16.options.header.elementId);
+              if (_this17.options.header) {
+                if (_this17.options.header.elementId) {
+                  var headerEl = document.getElementById(_this17.options.header.elementId);
 
                   if (headerEl) {
                     pdfData.header = headerEl.outerHTML;
 
-                    if (_this16.options.header.css) {
-                      pdfData.options.headerCSS = _this16.options.header.css;
+                    if (_this17.options.header.css) {
+                      pdfData.options.headerCSS = _this17.options.header.css;
                     }
                   }
-                } else if (_this16.options.header.html) {
-                  pdfData.header = _this16.options.header.html;
+                } else if (_this17.options.header.html) {
+                  pdfData.header = _this17.options.header.html;
 
-                  if (_this16.options.header.css) {
-                    pdfData.options.headerCSS = _this16.options.header.css;
+                  if (_this17.options.header.css) {
+                    pdfData.options.headerCSS = _this17.options.header.css;
                   }
                 } else {
-                  pdfData.header = _this16.options.header;
+                  pdfData.header = _this17.options.header;
                 }
               }
 
-              if (_this16.options.footer) {
-                if (_this16.options.footer.elementId) {
-                  var footerEl = document.getElementById(_this16.options.footer.elementId);
+              if (_this17.options.footer) {
+                if (_this17.options.footer.elementId) {
+                  var footerEl = document.getElementById(_this17.options.footer.elementId);
 
                   if (footerEl) {
                     pdfData.footer = footerEl.outerHTML;
 
-                    if (_this16.options.footer.css) {
-                      pdfData.options.footerCSS = _this16.options.footer.css;
+                    if (_this17.options.footer.css) {
+                      pdfData.options.footerCSS = _this17.options.footer.css;
                     }
                   }
                 } else {
-                  pdfData.footer = _this16.options.footer;
+                  pdfData.footer = _this17.options.footer;
                 }
               }
 
@@ -2374,31 +2455,31 @@ var WebsyPDFButton = /*#__PURE__*/function () {
               // document.getElementById(`${this.elementId}_pdfFooter`).value = pdfData.footer
               // document.getElementById(`${this.elementId}_form`).submit()
 
-              _this16.service.add('', pdfData, {
+              _this17.service.add('', pdfData, {
                 responseType: 'blob'
               }).then(function (response) {
-                _this16.loader.hide();
+                _this17.loader.hide();
 
                 var blob = new Blob([response], {
                   type: 'application/pdf'
                 });
                 var msg = "\n                <div class='text-center websy-pdf-download'>\n                  <div>Your file is ready to download</div>\n                  <a href='".concat(URL.createObjectURL(blob), "' target='_blank'\n              ");
 
-                if (_this16.options.directDownload === true) {
+                if (_this17.options.directDownload === true) {
                   var fileName;
 
-                  if (typeof _this16.options.fileName === 'function') {
-                    fileName = _this16.options.fileName() || 'Export';
+                  if (typeof _this17.options.fileName === 'function') {
+                    fileName = _this17.options.fileName() || 'Export';
                   } else {
-                    fileName = _this16.options.fileName || 'Export';
+                    fileName = _this17.options.fileName || 'Export';
                   }
 
                   msg += "download='".concat(fileName, ".pdf'");
                 }
 
-                msg += "\n                  >\n                    <button class='websy-btn download-pdf'>".concat(_this16.options.buttonText, "</button>\n                  </a>\n                </div>\n              ");
+                msg += "\n                  >\n                    <button class='websy-btn download-pdf'>".concat(_this17.options.buttonText, "</button>\n                  </a>\n                </div>\n              ");
 
-                _this16.popup.show({
+                _this17.popup.show({
                   message: msg,
                   mask: true
                 });
@@ -2583,7 +2664,7 @@ var WebsyPubSub = /*#__PURE__*/function () {
 
 var ResponsiveText = /*#__PURE__*/function () {
   function ResponsiveText(elementId, options) {
-    var _this17 = this;
+    var _this18 = this;
 
     _classCallCheck(this, ResponsiveText);
 
@@ -2596,7 +2677,7 @@ var ResponsiveText = /*#__PURE__*/function () {
     this.elementId = elementId;
     this.canvas = document.createElement('canvas');
     window.addEventListener('resize', function () {
-      return _this17.render();
+      return _this18.render();
     });
     var el = document.getElementById(this.elementId);
 
@@ -2815,7 +2896,7 @@ var ResponsiveText = /*#__PURE__*/function () {
 
 var WebsyResultList = /*#__PURE__*/function () {
   function WebsyResultList(elementId, options) {
-    var _this18 = this;
+    var _this19 = this;
 
     _classCallCheck(this, WebsyResultList);
 
@@ -2843,9 +2924,9 @@ var WebsyResultList = /*#__PURE__*/function () {
 
     if (_typeof(options.template) === 'object' && options.template.url) {
       this.templateService.get(options.template.url).then(function (templateString) {
-        _this18.options.template = templateString;
+        _this19.options.template = templateString;
 
-        _this18.render();
+        _this19.render();
       });
     } else {
       this.render();
@@ -2864,7 +2945,7 @@ var WebsyResultList = /*#__PURE__*/function () {
   }, {
     key: "buildHTML",
     value: function buildHTML(d) {
-      var _this19 = this;
+      var _this20 = this;
 
       var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var html = "";
@@ -2872,7 +2953,7 @@ var WebsyResultList = /*#__PURE__*/function () {
       if (this.options.template) {
         if (d.length > 0) {
           d.forEach(function (row, ix) {
-            var template = "".concat(ix > 0 ? '-->' : '').concat(_this19.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
+            var template = "".concat(ix > 0 ? '-->' : '').concat(_this20.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
 
             var ifMatches = _toConsumableArray(template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g));
 
@@ -2992,7 +3073,7 @@ var WebsyResultList = /*#__PURE__*/function () {
   }, {
     key: "handleClick",
     value: function handleClick(event) {
-      var _this20 = this;
+      var _this21 = this;
 
       if (event.target.classList.contains('clickable')) {
         var l = event.target.getAttribute('data-event');
@@ -3010,8 +3091,8 @@ var WebsyResultList = /*#__PURE__*/function () {
           l = l[0];
           params = params.map(function (p) {
             if (typeof p !== 'string' && typeof p !== 'number') {
-              if (_this20.rows[+id]) {
-                p = _this20.rows[+id][p];
+              if (_this21.rows[+id]) {
+                p = _this21.rows[+id][p];
               }
             } else if (typeof p === 'string') {
               p = p.replace(/"/g, '').replace(/'/g, '');
@@ -3033,13 +3114,13 @@ var WebsyResultList = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      var _this21 = this;
+      var _this22 = this;
 
       if (this.options.entity) {
         this.apiService.get(this.options.entity).then(function (results) {
-          _this21.rows = results.rows;
+          _this22.rows = results.rows;
 
-          _this21.resize();
+          _this22.resize();
         });
       } else {
         this.resize();
@@ -3118,14 +3199,14 @@ var WebsyRouter = /*#__PURE__*/function () {
   _createClass(WebsyRouter, [{
     key: "addGroup",
     value: function addGroup(group) {
-      var _this22 = this;
+      var _this23 = this;
 
       if (!this.groups[group]) {
         var els = document.querySelectorAll(".websy-view[data-group=\"".concat(group, "\"]"));
 
         if (els) {
           this.getClosestParent(els[0], function (parent) {
-            _this22.groups[group] = {
+            _this23.groups[group] = {
               activeView: '',
               views: [],
               parent: parent.getAttribute('data-view')
@@ -3450,12 +3531,12 @@ var WebsyRouter = /*#__PURE__*/function () {
   }, {
     key: "showComponents",
     value: function showComponents(view) {
-      var _this23 = this;
+      var _this24 = this;
 
       if (this.options.views && this.options.views[view] && this.options.views[view].components) {
         this.options.views[view].components.forEach(function (c) {
           if (typeof c.instance === 'undefined') {
-            _this23.prepComponent(c.elementId, c.options);
+            _this24.prepComponent(c.elementId, c.options);
 
             c.instance = new c.Component(c.elementId, c.options);
           } else if (c.instance.render) {
@@ -3824,7 +3905,7 @@ var Switch = /*#__PURE__*/function () {
 
 var WebsyTemplate = /*#__PURE__*/function () {
   function WebsyTemplate(elementId, options) {
-    var _this24 = this;
+    var _this25 = this;
 
     _classCallCheck(this, WebsyTemplate);
 
@@ -3850,9 +3931,9 @@ var WebsyTemplate = /*#__PURE__*/function () {
 
     if (_typeof(options.template) === 'object' && options.template.url) {
       this.templateService.get(options.template.url).then(function (templateString) {
-        _this24.options.template = templateString;
+        _this25.options.template = templateString;
 
-        _this24.render();
+        _this25.render();
       });
     } else {
       this.render();
@@ -3862,7 +3943,7 @@ var WebsyTemplate = /*#__PURE__*/function () {
   _createClass(WebsyTemplate, [{
     key: "buildHTML",
     value: function buildHTML() {
-      var _this25 = this;
+      var _this26 = this;
 
       var html = "";
 
@@ -3924,14 +4005,14 @@ var WebsyTemplate = /*#__PURE__*/function () {
                 }
 
                 if (polarity === true) {
-                  if (typeof _this25.options.data[parts[0]] !== 'undefined' && _this25.options.data[parts[0]] === parts[1]) {
+                  if (typeof _this26.options.data[parts[0]] !== 'undefined' && _this26.options.data[parts[0]] === parts[1]) {
                     // remove the <if> tags
                     removeAll = false;
                   } else if (parts[0] === parts[1]) {
                     removeAll = false;
                   }
                 } else if (polarity === false) {
-                  if (typeof _this25.options.data[parts[0]] !== 'undefined' && _this25.options.data[parts[0]] !== parts[1]) {
+                  if (typeof _this26.options.data[parts[0]] !== 'undefined' && _this26.options.data[parts[0]] !== parts[1]) {
                     // remove the <if> tags
                     removeAll = false;
                   }
@@ -4177,10 +4258,10 @@ var WebsyUtils = {
       var s = '';
       var d = 1; // let out
 
-      for (var _i7 = 0; _i7 < ranges.length; _i7++) {
-        if (n >= ranges[_i7].divider) {
-          d = ranges[_i7].divider;
-          s = ranges[_i7].suffix; // out = (n / ranges[i].divider).toFixed(decimals).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$100,')                
+      for (var _i8 = 0; _i8 < ranges.length; _i8++) {
+        if (n >= ranges[_i8].divider) {
+          d = ranges[_i8].divider;
+          s = ranges[_i8].suffix; // out = (n / ranges[i].divider).toFixed(decimals).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$100,')                
 
           break;
         }
@@ -4218,7 +4299,7 @@ var WebsyUtils = {
 
 var WebsyTable = /*#__PURE__*/function () {
   function WebsyTable(elementId, options) {
-    var _this26 = this;
+    var _this27 = this;
 
     _classCallCheck(this, WebsyTable);
 
@@ -4256,8 +4337,8 @@ var WebsyTable = /*#__PURE__*/function () {
           allowClear: false,
           disableSearch: true,
           onItemSelected: function onItemSelected(selectedItem) {
-            if (_this26.options.onChangePageSize) {
-              _this26.options.onChangePageSize(selectedItem.value);
+            if (_this27.options.onChangePageSize) {
+              _this27.options.onChangePageSize(selectedItem.value);
             }
           }
         });
@@ -4278,7 +4359,7 @@ var WebsyTable = /*#__PURE__*/function () {
   _createClass(WebsyTable, [{
     key: "appendRows",
     value: function appendRows(data) {
-      var _this27 = this;
+      var _this28 = this;
 
       this.hideError();
       var bodyHTML = '';
@@ -4286,15 +4367,15 @@ var WebsyTable = /*#__PURE__*/function () {
       if (data) {
         bodyHTML += data.map(function (r, rowIndex) {
           return '<tr>' + r.map(function (c, i) {
-            if (_this27.options.columns[i].show !== false) {
+            if (_this28.options.columns[i].show !== false) {
               var style = '';
 
               if (c.style) {
                 style += c.style;
               }
 
-              if (_this27.options.columns[i].width) {
-                style += "width: ".concat(_this27.options.columns[i].width, "; ");
+              if (_this28.options.columns[i].width) {
+                style += "width: ".concat(_this28.options.columns[i].width, "; ");
               }
 
               if (c.backgroundColor) {
@@ -4309,18 +4390,18 @@ var WebsyTable = /*#__PURE__*/function () {
                 style += "color: ".concat(c.color, "; ");
               }
 
-              if (_this27.options.columns[i].showAsLink === true && c.value.trim() !== '') {
-                return "\n                <td \n                  data-row-index='".concat(_this27.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this27.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >\n                  <a href='").concat(c.value, "' target='").concat(_this27.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this27.options.columns[i].linkText || c.value, "</a>\n                </td>\n              ");
-              } else if ((_this27.options.columns[i].showAsNavigatorLink === true || _this27.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
-                return "\n                <td \n                  data-view='".concat(c.value, "' \n                  data-row-index='").concat(_this27.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='websy-trigger trigger-item ").concat(_this27.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this27.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.displayText || _this27.options.columns[i].linkText || c.value, "</td>\n              ");
+              if (_this28.options.columns[i].showAsLink === true && c.value.trim() !== '') {
+                return "\n                <td \n                  data-row-index='".concat(_this28.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this28.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >\n                  <a href='").concat(c.value, "' target='").concat(_this28.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this28.options.columns[i].linkText || c.value, "</a>\n                </td>\n              ");
+              } else if ((_this28.options.columns[i].showAsNavigatorLink === true || _this28.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
+                return "\n                <td \n                  data-view='".concat(c.value, "' \n                  data-row-index='").concat(_this28.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='websy-trigger trigger-item ").concat(_this28.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this28.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.displayText || _this28.options.columns[i].linkText || c.value, "</td>\n              ");
               } else {
                 var info = c.value;
 
-                if (_this27.options.columns[i].showAsImage === true) {
+                if (_this28.options.columns[i].showAsImage === true) {
                   c.value = "\n                  <img src='".concat(c.value, "'>\n                ");
                 }
 
-                return "\n                <td \n                  data-info='".concat(info, "' \n                  data-row-index='").concat(_this27.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this27.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.value, "</td>\n              ");
+                return "\n                <td \n                  data-info='".concat(info, "' \n                  data-row-index='").concat(_this28.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this28.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.value, "</td>\n              ");
               }
             }
           }).join('') + '</tr>';
@@ -4492,7 +4573,7 @@ var WebsyTable = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render(data) {
-      var _this28 = this;
+      var _this29 = this;
 
       if (!this.options.columns) {
         return;
@@ -4517,7 +4598,7 @@ var WebsyTable = /*#__PURE__*/function () {
 
       var headHTML = '<tr>' + this.options.columns.map(function (c, i) {
         if (c.show !== false) {
-          return "\n        <th ".concat(c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : '', ">\n          <div class =\"tableHeader\">\n            <div class=\"leftSection\">\n              <div\n                class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n                data-index=\"").concat(i, "\"                \n                data-sort=\"").concat(c.sort, "\"                \n              >\n                ").concat(c.name, "\n              </div>\n            </div>\n            <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n            <!--").concat(c.searchable === true ? _this28.buildSearchIcon(c.qGroupFieldDefs[0]) : '', "-->\n          </div>\n        </th>\n        ");
+          return "\n        <th ".concat(c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : '', ">\n          <div class =\"tableHeader\">\n            <div class=\"leftSection\">\n              <div\n                class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n                data-index=\"").concat(i, "\"                \n                data-sort=\"").concat(c.sort, "\"                \n              >\n                ").concat(c.name, "\n              </div>\n            </div>\n            <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n            <!--").concat(c.searchable === true ? _this29.buildSearchIcon(c.qGroupFieldDefs[0]) : '', "-->\n          </div>\n        </th>\n        ");
         }
       }).join('') + '</tr>';
       var headEl = document.getElementById("".concat(this.elementId, "_head"));
@@ -4536,7 +4617,7 @@ var WebsyTable = /*#__PURE__*/function () {
 
         if (pagingEl) {
           var pages = new Array(this.options.pageCount).fill('').map(function (item, index) {
-            return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this28.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
+            return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this29.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
           });
           var startIndex = 0;
 
@@ -4604,7 +4685,7 @@ var WebsyTable = /*#__PURE__*/function () {
 
 var WebsyTable2 = /*#__PURE__*/function () {
   function WebsyTable2(elementId, options) {
-    var _this29 = this;
+    var _this30 = this;
 
     _classCallCheck(this, WebsyTable2);
 
@@ -4645,8 +4726,8 @@ var WebsyTable2 = /*#__PURE__*/function () {
           allowClear: false,
           disableSearch: true,
           onItemSelected: function onItemSelected(selectedItem) {
-            if (_this29.options.onChangePageSize) {
-              _this29.options.onChangePageSize(selectedItem.value);
+            if (_this30.options.onChangePageSize) {
+              _this30.options.onChangePageSize(selectedItem.value);
             }
           }
         });
@@ -4670,7 +4751,7 @@ var WebsyTable2 = /*#__PURE__*/function () {
   _createClass(WebsyTable2, [{
     key: "appendRows",
     value: function appendRows(data) {
-      var _this30 = this;
+      var _this31 = this;
 
       this.hideError();
       var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
@@ -4679,15 +4760,15 @@ var WebsyTable2 = /*#__PURE__*/function () {
       if (data) {
         bodyHTML += data.map(function (r, rowIndex) {
           return '<tr>' + r.map(function (c, i) {
-            if (_this30.options.columns[i].show !== false) {
-              var style = "height: ".concat(_this30.options.cellSize, "px; line-height: ").concat(_this30.options.cellSize, "px;");
+            if (_this31.options.columns[i].show !== false) {
+              var style = "height: ".concat(_this31.options.cellSize, "px; line-height: ").concat(_this31.options.cellSize, "px;");
 
               if (c.style) {
                 style += c.style;
               }
 
-              if (_this30.options.columns[i].width) {
-                style += "width: ".concat(_this30.options.columns[i].width, "; ");
+              if (_this31.options.columns[i].width) {
+                style += "width: ".concat(_this31.options.columns[i].width, "; ");
               }
 
               if (c.backgroundColor) {
@@ -4702,18 +4783,18 @@ var WebsyTable2 = /*#__PURE__*/function () {
                 style += "color: ".concat(c.color, "; ");
               }
 
-              if (_this30.options.columns[i].showAsLink === true && c.value.trim() !== '') {
-                return "\n                <td \n                  data-row-index='".concat(_this30.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this30.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >\n                  <a href='").concat(c.value, "' target='").concat(_this30.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this30.options.columns[i].linkText || c.value, "</a>\n                </td>\n              ");
-              } else if ((_this30.options.columns[i].showAsNavigatorLink === true || _this30.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
-                return "\n                <td \n                  data-view='".concat(c.value, "' \n                  data-row-index='").concat(_this30.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='websy-trigger trigger-item ").concat(_this30.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this30.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.displayText || _this30.options.columns[i].linkText || c.value, "</td>\n              ");
+              if (_this31.options.columns[i].showAsLink === true && c.value.trim() !== '') {
+                return "\n                <td \n                  data-row-index='".concat(_this31.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this31.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >\n                  <a href='").concat(c.value, "' target='").concat(_this31.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this31.options.columns[i].linkText || c.value, "</a>\n                </td>\n              ");
+              } else if ((_this31.options.columns[i].showAsNavigatorLink === true || _this31.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
+                return "\n                <td \n                  data-view='".concat(c.value, "' \n                  data-row-index='").concat(_this31.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='websy-trigger trigger-item ").concat(_this31.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this31.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.displayText || _this31.options.columns[i].linkText || c.value, "</td>\n              ");
               } else {
                 var info = c.value;
 
-                if (_this30.options.columns[i].showAsImage === true) {
+                if (_this31.options.columns[i].showAsImage === true) {
                   c.value = "\n                  <img src='".concat(c.value, "'>\n                ");
                 }
 
-                return "\n                <td \n                  data-info='".concat(info, "' \n                  data-row-index='").concat(_this30.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this30.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.value, "</td>\n              ");
+                return "\n                <td \n                  data-info='".concat(info, "' \n                  data-row-index='").concat(_this31.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this31.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.value, "</td>\n              ");
               }
             }
           }).join('') + '</tr>';
@@ -4971,7 +5052,7 @@ var WebsyTable2 = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render(data) {
-      var _this31 = this;
+      var _this32 = this;
 
       if (!this.options.columns) {
         return;
@@ -5007,7 +5088,7 @@ var WebsyTable2 = /*#__PURE__*/function () {
             style += "width: ".concat(c.width || 'auto', "; ");
           }
 
-          return "\n        <th style=\"".concat(style, "\">\n          <div class =\"tableHeader\">\n            <div class=\"leftSection\">\n              <div\n                class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n                data-index=\"").concat(i, "\"                \n                data-sort=\"").concat(c.sort, "\"                \n              >\n                ").concat(c.name, "\n              </div>\n            </div>\n            <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n            ").concat(c.searchable === true ? _this31.buildSearchIcon(i) : '', "\n          </div>\n        </th>\n        ");
+          return "\n        <th style=\"".concat(style, "\">\n          <div class =\"tableHeader\">\n            <div class=\"leftSection\">\n              <div\n                class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n                data-index=\"").concat(i, "\"                \n                data-sort=\"").concat(c.sort, "\"                \n              >\n                ").concat(c.name, "\n              </div>\n            </div>\n            <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n            ").concat(c.searchable === true ? _this32.buildSearchIcon(i) : '', "\n          </div>\n        </th>\n        ");
         }
       }).join('') + '</tr>';
       var headEl = document.getElementById("".concat(this.elementId, "_head"));
@@ -5018,7 +5099,7 @@ var WebsyTable2 = /*#__PURE__*/function () {
         var dropdownHTML = "";
         this.options.columns.forEach(function (c, i) {
           if (c.searchable && c.searchField) {
-            dropdownHTML += "\n            <div id=\"".concat(_this31.elementId, "_columnSearch_").concat(i, "\" class=\"websy-modal-dropdown\"></div>\n          ");
+            dropdownHTML += "\n            <div id=\"".concat(_this32.elementId, "_columnSearch_").concat(i, "\" class=\"websy-modal-dropdown\"></div>\n          ");
           }
         });
         dropdownEl.innerHTML = dropdownHTML;
@@ -5040,7 +5121,7 @@ var WebsyTable2 = /*#__PURE__*/function () {
 
         if (pagingEl) {
           var pages = new Array(this.options.pageCount).fill('').map(function (item, index) {
-            return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this31.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
+            return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this32.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
           });
           var startIndex = 0;
 
@@ -5127,7 +5208,7 @@ var WebsyTable2 = /*#__PURE__*/function () {
   }, {
     key: "getColumnParameters",
     value: function getColumnParameters(values) {
-      var _this32 = this;
+      var _this33 = this;
 
       var tableEl = document.getElementById("".concat(this.elementId, "_table"));
       tableEl.style.tableLayout = 'auto';
@@ -5135,10 +5216,10 @@ var WebsyTable2 = /*#__PURE__*/function () {
       var headEl = document.getElementById("".concat(this.elementId, "_head"));
       var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
       headEl.innerHTML = '<tr style="visibility: hidden;">' + values.map(function (c, i) {
-        return "\n      <th>\n        <div class =\"tableHeader\">\n          <div class=\"leftSection\">\n            <div\n              class=\"tableHeaderField\"              \n            >\n              ".concat(c.value || 'nbsp;', "\n            </div>\n          </div>          \n          ").concat(c.searchable === true ? _this32.buildSearchIcon(i) : '', "\n        </div>\n      </th>\n    ");
+        return "\n      <th>\n        <div class =\"tableHeader\">\n          <div class=\"leftSection\">\n            <div\n              class=\"tableHeaderField\"              \n            >\n              ".concat(c.value || 'nbsp;', "\n            </div>\n          </div>          \n          ").concat(c.searchable === true ? _this33.buildSearchIcon(i) : '', "\n        </div>\n      </th>\n    ");
       }).join('') + '</tr>';
       bodyEl.innerHTML = '<tr style="visibility: hidden;">' + values.map(function (c) {
-        return "\n      <td                 \n        style='height: ".concat(_this32.options.cellSize, "px; line-height: ").concat(_this32.options.cellSize, "px; padding: 10px 5px;'\n      >").concat(c.value || '&nbsp;', "</td>\n    ");
+        return "\n      <td                 \n        style='height: ".concat(_this33.options.cellSize, "px; line-height: ").concat(_this33.options.cellSize, "px; padding: 10px 5px;'\n      >").concat(c.value || '&nbsp;', "</td>\n    ");
       }).join('') + '</tr>'; // get height of the first data cell
 
       var cells = bodyEl.querySelectorAll("tr:first-of-type td");
@@ -5159,8 +5240,8 @@ var WebsyTable2 = /*#__PURE__*/function () {
 
 
       if (accWidth < (tableContainerEl.offsetWidth || tableContainerEl.clientWidth) - nonScrollableWidth) {
-        for (var _i8 = this.options.leftColumns; _i8 < cellWidths.length; _i8++) {
-          cellWidths[_i8] = ((tableContainerEl.offsetWidth || tableContainerEl.clientWidth) - nonScrollableWidth) / (cellWidths.length - this.options.leftColumns);
+        for (var _i9 = this.options.leftColumns; _i9 < cellWidths.length; _i9++) {
+          cellWidths[_i9] = ((tableContainerEl.offsetWidth || tableContainerEl.clientWidth) - nonScrollableWidth) / (cellWidths.length - this.options.leftColumns);
         }
       } // const cellWidth = firstDataCell.offsetWidth || firstDataCell.clientWidth        
       // tableEl.style.width = ''
@@ -5188,7 +5269,7 @@ var WebsyTable2 = /*#__PURE__*/function () {
 
 var WebsyChart = /*#__PURE__*/function () {
   function WebsyChart(elementId, options) {
-    var _this33 = this;
+    var _this34 = this;
 
     _classCallCheck(this, WebsyChart);
 
@@ -5237,22 +5318,22 @@ var WebsyChart = /*#__PURE__*/function () {
     this.invertOverride = function (input, input2) {
       var xAxis = 'bottomAxis';
 
-      if (_this33.options.orientation === 'horizontal') {
+      if (_this34.options.orientation === 'horizontal') {
         xAxis = 'leftAxis';
       }
 
-      var width = _this33[xAxis].step();
+      var width = _this34[xAxis].step();
 
       var output;
 
-      var domain = _toConsumableArray(_this33[xAxis].domain());
+      var domain = _toConsumableArray(_this34[xAxis].domain());
 
-      if (_this33.options.orientation === 'horizontal') {
+      if (_this34.options.orientation === 'horizontal') {
         domain = domain.reverse();
       }
 
       for (var j = 0; j < domain.length; j++) {
-        var breakA = _this33[xAxis](domain[j]) - width / 2;
+        var breakA = _this34[xAxis](domain[j]) - width / 2;
         var breakB = breakA + width;
 
         if (input > breakA && input <= breakB) {
@@ -5352,10 +5433,10 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "handleEventMouseMove",
     value: function handleEventMouseMove(event, d) {
-      var _this34 = this;
+      var _this35 = this;
 
       var bisectDate = d3.bisector(function (d) {
-        return _this34.parseX(d.x.value);
+        return _this35.parseX(d.x.value);
       }).left;
 
       if (this.options.showTrackingLine === true && d3.pointer(event)) {
@@ -5394,8 +5475,8 @@ var WebsyChart = /*#__PURE__*/function () {
         }
 
         this.options.data.series.forEach(function (s) {
-          if (_this34.options.data[xData].scale !== 'Time') {
-            xPoint = _this34[xAxis](_this34.parseX(xLabel));
+          if (_this35.options.data[xData].scale !== 'Time') {
+            xPoint = _this35[xAxis](_this35.parseX(xLabel));
             s.data.forEach(function (d) {
               if (d.x.value === xLabel) {
                 if (!tooltipTitle) {
@@ -5414,13 +5495,13 @@ var WebsyChart = /*#__PURE__*/function () {
             var pointA = s.data[index - 1];
             var pointB = s.data[index];
 
-            if (_this34.options.orientation === 'horizontal') {
+            if (_this35.options.orientation === 'horizontal') {
               pointA = _toConsumableArray(s.data).reverse()[index - 1];
               pointB = _toConsumableArray(s.data).reverse()[index];
             }
 
             if (pointA && !pointB) {
-              xPoint = _this34[xAxis](_this34.parseX(pointA.x.value));
+              xPoint = _this35[xAxis](_this35.parseX(pointA.x.value));
               tooltipTitle = pointA.x.value;
 
               if (!pointA.y.color) {
@@ -5430,12 +5511,12 @@ var WebsyChart = /*#__PURE__*/function () {
               tooltipData.push(pointA.y);
 
               if (typeof pointA.x.value.getTime !== 'undefined') {
-                tooltipTitle = d3.timeFormat(_this34.options.dateFormat || _this34.options.calculatedTimeFormatPattern)(pointA.x.value);
+                tooltipTitle = d3.timeFormat(_this35.options.dateFormat || _this35.options.calculatedTimeFormatPattern)(pointA.x.value);
               }
             }
 
             if (pointB && !pointA) {
-              xPoint = _this34[xAxis](_this34.parseX(pointB.x.value));
+              xPoint = _this35[xAxis](_this35.parseX(pointB.x.value));
               tooltipTitle = pointB.x.value;
 
               if (!pointB.y.color) {
@@ -5445,14 +5526,14 @@ var WebsyChart = /*#__PURE__*/function () {
               tooltipData.push(pointB.y);
 
               if (typeof pointB.x.value.getTime !== 'undefined') {
-                tooltipTitle = d3.timeFormat(_this34.options.dateFormat || _this34.options.calculatedTimeFormatPattern)(pointB.x.value);
+                tooltipTitle = d3.timeFormat(_this35.options.dateFormat || _this35.options.calculatedTimeFormatPattern)(pointB.x.value);
               }
             }
 
             if (pointA && pointB) {
-              var d0 = _this34[xAxis](_this34.parseX(pointA.x.value));
+              var d0 = _this35[xAxis](_this35.parseX(pointA.x.value));
 
-              var d1 = _this34[xAxis](_this34.parseX(pointB.x.value));
+              var d1 = _this35[xAxis](_this35.parseX(pointB.x.value));
 
               var mid = Math.abs(d0 - d1) / 2;
 
@@ -5461,7 +5542,7 @@ var WebsyChart = /*#__PURE__*/function () {
                 tooltipTitle = pointB.x.value;
 
                 if (typeof pointB.x.value.getTime !== 'undefined') {
-                  tooltipTitle = d3.timeFormat(_this34.options.dateFormat || _this34.options.calculatedTimeFormatPattern)(pointB.x.value);
+                  tooltipTitle = d3.timeFormat(_this35.options.dateFormat || _this35.options.calculatedTimeFormatPattern)(pointB.x.value);
                 }
 
                 if (!pointB.y.color) {
@@ -5474,7 +5555,7 @@ var WebsyChart = /*#__PURE__*/function () {
                 tooltipTitle = pointA.x.value;
 
                 if (typeof pointB.x.value.getTime !== 'undefined') {
-                  tooltipTitle = d3.timeFormat(_this34.options.dateFormat || _this34.options.calculatedTimeFormatPattern)(pointB.x.value);
+                  tooltipTitle = d3.timeFormat(_this35.options.dateFormat || _this35.options.calculatedTimeFormatPattern)(pointB.x.value);
                 }
 
                 if (!pointA.y.color) {
@@ -5579,7 +5660,7 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render(options) {
-      var _this35 = this;
+      var _this36 = this;
 
       /* global d3 options WebsyUtils */
       if (typeof options !== 'undefined') {
@@ -5648,7 +5729,7 @@ var WebsyChart = /*#__PURE__*/function () {
             var legendData = this.options.data.series.map(function (s, i) {
               return {
                 value: s.label || s.key,
-                color: s.color || _this35.options.colors[i % _this35.options.colors.length]
+                color: s.color || _this36.options.colors[i % _this36.options.colors.length]
               };
             });
 
@@ -5900,7 +5981,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
             if (this.options.data.bottom.formatter) {
               bAxisFunc.tickFormat(function (d) {
-                return _this35.options.data.bottom.formatter(d);
+                return _this36.options.data.bottom.formatter(d);
               });
             }
 
@@ -5926,8 +6007,8 @@ var WebsyChart = /*#__PURE__*/function () {
 
           if (this.options.margin.axisLeft > 0) {
             this.leftAxisLayer.call(d3.axisLeft(this.leftAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
-              if (_this35.options.data.left.formatter) {
-                d = _this35.options.data.left.formatter(d);
+              if (_this36.options.data.left.formatter) {
+                d = _this36.options.data.left.formatter(d);
               }
 
               return d;
@@ -5964,8 +6045,8 @@ var WebsyChart = /*#__PURE__*/function () {
 
             if (this.options.margin.axisRight > 0 && (this.options.data.right.min !== 0 || this.options.data.right.max !== 0)) {
               this.rightAxisLayer.call(d3.axisRight(this.rightAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
-                if (_this35.options.data.right.formatter) {
-                  d = _this35.options.data.right.formatter(d);
+                if (_this36.options.data.right.formatter) {
+                  d = _this36.options.data.right.formatter(d);
                 }
 
                 return d;
@@ -5991,16 +6072,16 @@ var WebsyChart = /*#__PURE__*/function () {
 
           this.options.data.series.forEach(function (series, index) {
             if (!series.key) {
-              series.key = _this35.createIdentity();
+              series.key = _this36.createIdentity();
             }
 
             if (!series.color) {
-              series.color = _this35.options.colors[index % _this35.options.colors.length];
+              series.color = _this36.options.colors[index % _this36.options.colors.length];
             }
 
-            _this35["render".concat(series.type || 'bar')](series, index);
+            _this36["render".concat(series.type || 'bar')](series, index);
 
-            _this35.renderLabels(series, index);
+            _this36.renderLabels(series, index);
           });
         }
       }
@@ -6008,17 +6089,17 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "renderarea",
     value: function renderarea(series, index) {
-      var _this36 = this;
+      var _this37 = this;
 
       /* global d3 series index */
       var drawArea = function drawArea(xAxis, yAxis, curveStyle) {
         return d3.area().x(function (d) {
-          return _this36[xAxis](_this36.parseX(d.x.value));
+          return _this37[xAxis](_this37.parseX(d.x.value));
         }).y0(function (d) {
-          return _this36[yAxis](0);
+          return _this37[yAxis](0);
         }).y1(function (d) {
-          return _this36[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
-        }).curve(d3[curveStyle || _this36.options.curveStyle]);
+          return _this37[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
+        }).curve(d3[curveStyle || _this37.options.curveStyle]);
       };
 
       var xAxis = 'bottomAxis';
@@ -6193,15 +6274,15 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "renderline",
     value: function renderline(series, index) {
-      var _this37 = this;
+      var _this38 = this;
 
       /* global series index d3 */
       var drawLine = function drawLine(xAxis, yAxis, curveStyle) {
         return d3.line().x(function (d) {
-          return _this37[xAxis](_this37.parseX(d.x.value));
+          return _this38[xAxis](_this38.parseX(d.x.value));
         }).y(function (d) {
-          return _this37[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
-        }).curve(d3[curveStyle || _this37.options.curveStyle]);
+          return _this38[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
+        }).curve(d3[curveStyle || _this38.options.curveStyle]);
       };
 
       var xAxis = 'bottomAxis';
@@ -6239,14 +6320,14 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "rendersymbol",
     value: function rendersymbol(series, index) {
-      var _this38 = this;
+      var _this39 = this;
 
       /* global d3 series index series.key */
       var drawSymbol = function drawSymbol(size) {
         return d3.symbol() // .type(d => {
         //   return d3.symbols[0]
         // })
-        .size(size || _this38.options.symbolSize);
+        .size(size || _this39.options.symbolSize);
       };
 
       var xAxis = 'bottomAxis';
@@ -6264,7 +6345,7 @@ var WebsyChart = /*#__PURE__*/function () {
       symbols.attr('d', function (d) {
         return drawSymbol(d.y.size || series.symbolSize)(d);
       }).transition(this.transition).attr('fill', 'white').attr('stroke', series.color).attr('transform', function (d) {
-        return "translate(".concat(_this38[xAxis](_this38.parseX(d.x.value)), ", ").concat(_this38[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        return "translate(".concat(_this39[xAxis](_this39.parseX(d.x.value)), ", ").concat(_this39[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
       }); // Enter
 
       symbols.enter().append('path').attr('d', function (d) {
@@ -6273,7 +6354,7 @@ var WebsyChart = /*#__PURE__*/function () {
       .attr('fill', 'white').attr('stroke', series.color).attr('class', function (d) {
         return "symbol symbol_".concat(series.key);
       }).attr('transform', function (d) {
-        return "translate(".concat(_this38[xAxis](_this38.parseX(d.x.value)), ", ").concat(_this38[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        return "translate(".concat(_this39[xAxis](_this39.parseX(d.x.value)), ", ").concat(_this39[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
       });
     }
   }, {
@@ -6428,7 +6509,7 @@ var WebsyLegend = /*#__PURE__*/function () {
   }, {
     key: "resize",
     value: function resize() {
-      var _this39 = this;
+      var _this40 = this;
 
       var el = document.getElementById(this.elementId);
 
@@ -6441,7 +6522,7 @@ var WebsyLegend = /*#__PURE__*/function () {
         // }
         var html = "\n        <div class='text-".concat(this.options.align, "'>\n      ");
         html += this._data.map(function (d, i) {
-          return _this39.getLegendItemHTML(d);
+          return _this40.getLegendItemHTML(d);
         }).join('');
         html += "\n        <div>\n      ";
         el.innerHTML = html;
@@ -6613,7 +6694,7 @@ var WebsyMap = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      var _this40 = this;
+      var _this41 = this;
 
       var mapEl = document.getElementById("".concat(this.elementId, "_map"));
       var legendEl = document.getElementById("".concat(this.elementId, "_map"));
@@ -6622,7 +6703,7 @@ var WebsyMap = /*#__PURE__*/function () {
         var legendData = this.options.data.polygons.map(function (s, i) {
           return {
             value: s.label || s.key,
-            color: s.color || _this40.options.colors[i % _this40.options.colors.length]
+            color: s.color || _this41.options.colors[i % _this41.options.colors.length]
           };
         });
         var longestValue = legendData.map(function (s) {
@@ -6686,7 +6767,7 @@ var WebsyMap = /*#__PURE__*/function () {
 
       if (this.polygons) {
         this.polygons.forEach(function (p) {
-          return _this40.map.removeLayer(p);
+          return _this41.map.removeLayer(p);
         });
       }
 
@@ -6744,18 +6825,18 @@ var WebsyMap = /*#__PURE__*/function () {
           }
 
           if (!p.options.color) {
-            p.options.color = _this40.options.colors[i % _this40.options.colors.length];
+            p.options.color = _this41.options.colors[i % _this41.options.colors.length];
           }
 
           var pol = L.polygon(p.data.map(function (c) {
             return c.map(function (d) {
               return [d.Latitude, d.Longitude];
             });
-          }), p.options).addTo(_this40.map);
+          }), p.options).addTo(_this41.map);
 
-          _this40.polygons.push(pol);
+          _this41.polygons.push(pol);
 
-          _this40.map.fitBounds(pol.getBounds());
+          _this41.map.fitBounds(pol.getBounds());
         });
       } // if (this.data.markers.length > 0) {            
       //   el.classList.remove('hidden')