@websy/websy-designs 1.1.9 → 1.1.12

package/dist/websy-designs.debug.js

@@ -318,7 +318,7 @@ class WebsyCarousel {
         html += `<div class="websy-btn-parent">`
         this.options.frames.forEach((frame, frameIndex) => {
           html += `
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-index="${frameIndex}" id="${this.elementId}_selector_${frameIndex}" 
+          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 512 512" data-index="${frameIndex}" id="${this.elementId}_selector_${frameIndex}" 
             class="websy-progress-btn ${this.options.currentFrame === frameIndex ? 'websy-progress-btn-active' : ''}">
           <title>Ellipse</title><circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
           </svg>
@@ -333,7 +333,7 @@ class WebsyCarousel {
       <title>Caret Back</title>
       <path d="M321.94 98L158.82 237.78a24 24 0 000 36.44L321.94 414c15.57 13.34 39.62 2.28 39.62-18.22v-279.6c0-20.5-24.05-31.56-39.62-18.18z"/>
       </svg>
-      </div>
+    
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="websy-next-arrow">
       <title>Caret Forward</title>
       <path d="M190.06 414l163.12-139.78a24 24 0 000-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z"/>
@@ -390,6 +390,7 @@ class WebsyDatePicker {
     this.validDates = []
     this.validYears = []
     this.customRangeSelected = true
+    this.shiftPressed = false
     const DEFAULTS = {
       defaultRange: 0,
       minAllowedDate: this.floorDate(new Date(new Date((new Date().setFullYear(new Date().getFullYear() - 1))).setDate(1))),
@@ -481,6 +482,8 @@ class WebsyDatePicker {
       el.addEventListener('mousedown', this.handleMouseDown.bind(this))
       el.addEventListener('mouseover', this.handleMouseOver.bind(this))
       el.addEventListener('mouseup', this.handleMouseUp.bind(this))
+      document.addEventListener('keydown', this.handleKeyDown.bind(this))
+      document.addEventListener('keyup', this.handleKeyUp.bind(this))
       let html = `
         <div class='websy-date-picker-container'>
           <span class='websy-dropdown-header-label'>${this.options.label || 'Date'}</span>
@@ -497,6 +500,7 @@ class WebsyDatePicker {
             </div><!--
             --><div id='${this.elementId}_datelist' class='websy-date-picker-custom'>${this.renderDates()}</div>
             <div class='websy-dp-button-container'>
+              <span class="dp-footnote">Click and drag or hold Shift and click to select a range of values</span>
               <button class='${this.options.cancelBtnClasses || ''} websy-btn websy-dp-cancel'>
                 <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>
               </button>
@@ -573,20 +577,37 @@ class WebsyDatePicker {
       this.close()
     }
   }
-  handleMouseDown (event) {
-    this.mouseDown = true
-    this.dragging = false       
-    if (event.target.classList.contains('websy-dp-date')) {
-      if (event.target.classList.contains('websy-disabled-date')) {
-        return
-      }
-      if (this.customRangeSelected === true) {
-        this.currentselection = []
-        this.customRangeSelected = false 
-      }      
-      this.mouseDownId = +event.target.id.split('_')[0]
-      this.selectDate(this.mouseDownId)
+  handleKeyDown (event) {
+    console.log('key down', event)
+    if (event.key === 'Shift') {
+      this.dragging = true
+      this.shiftPressed = true
+    }
+  }
+  handleKeyUp (event) {
+    this.dragging = false
+    this.shiftPressed = false
+  }
+  handleMouseDown (event) {    
+    if (this.shiftPressed === true && this.currentselection.length > 0) {
+      this.mouseDownId = this.currentselection[this.currentselection.length - 1]
+      this.selectDate(+event.target.id.split('_')[0])
     }
+    else {
+      this.mouseDown = true
+      this.dragging = false       
+      if (event.target.classList.contains('websy-dp-date')) {
+        if (event.target.classList.contains('websy-disabled-date')) {
+          return
+        }
+        if (this.customRangeSelected === true) {
+          this.currentselection = []
+          this.customRangeSelected = false 
+        }       
+        this.mouseDownId = +event.target.id.split('_')[0]       
+        this.selectDate(this.mouseDownId)
+      }
+    }    
   }
   handleMouseOver (event) {
     if (this.mouseDown === true) {
@@ -635,8 +656,8 @@ class WebsyDatePicker {
         let d
         let rangeStart
         let rangeEnd
-        if (this.options.mode === 'date') {
-          d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))
+        if (this.options.mode === 'date') {          
+          d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))          
           d = d.getTime()
           rangeStart = this.selectedRangeDates[0].getTime()
           rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
@@ -648,7 +669,7 @@ class WebsyDatePicker {
         }
         let dateEl 
         if (this.options.mode === 'date') {
-          dateEl = document.getElementById(`${d.getTime()}_date`)
+          dateEl = document.getElementById(`${d}_date`)
         }
         else if (this.options.mode === 'year') {
           dateEl = document.getElementById(`${d}_year`)
@@ -942,7 +963,10 @@ class WebsyDatePicker {
     let range
     if (this.selectedRange === -1) {
       const list = (this.currentselection.length > 0 ? this.currentselection : this.selectedRangeDates).map(d => {
-        if (this.options.mode === 'date') {        
+        if (this.options.mode === 'date') {      
+          if (!d.toLocaleDateString) {
+            d = new Date(d)
+          }  
           return d.toLocaleDateString()
         }
         else if (this.options.mode === 'year') {
@@ -1087,9 +1111,11 @@ class WebsyDropdown {
   close () {
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
+    const scrollEl = document.getElementById(`${this.elementId}_itemsContainer`)
+    scrollEl.scrollTop = 0
     maskEl.classList.remove('active')
     contentEl.classList.remove('active')
-    contentEl.classList.remove('on-top')
+    contentEl.classList.remove('on-top')    
     const searchEl = document.getElementById(`${this.elementId}_search`)
     if (searchEl) {
       if (searchEl.value.length > 0 && this.options.onCancelSearch) {            
@@ -1097,6 +1123,9 @@ class WebsyDropdown {
         searchEl.value = ''
       }      
     }
+    if (this.options.onClose) {
+      this.options.onClose(this.elementId)
+    }
   }
   handleClick (event) {
     if (this.options.disabled === true) {
@@ -1209,6 +1238,9 @@ class WebsyDropdown {
         searchEl.focus()
       }
     }
+    if (this.options.onOpen) {
+      this.options.onOpen(this.elementId)
+    }
   }
   render () {
     if (!this.elementId) {
@@ -2611,7 +2643,7 @@ class WebsyRouter {
       this.currentViewMain = this.options.defaultView
     }    
     if (view !== '') {
-      this.showView(view, params)      
+      this.showView(view, params, 'main')      
     }
   }
   handleFocus (event) {
@@ -2642,6 +2674,11 @@ class WebsyRouter {
       this.hideTriggerItems(view, group)
       this.hideViewItems(view, group)
       this.publish('hide', [view])
+    }
+    else if (group !== this.options.defaultGroup) {
+      this.hideTriggerItems(view, group)
+      this.hideViewItems(view, group)
+      this.publish('hide', [view])
     }    
   }
   // registerElements (root) {
@@ -2740,7 +2777,7 @@ class WebsyRouter {
       })      
     }
   }
-  showView (view, params) {
+  showView (view, params, group) {
     this.activateItem(view, this.options.triggerClass)
     this.activateItem(view, this.options.viewClass)
     let children = this.getActiveViewsFromParent(view)
@@ -2748,15 +2785,15 @@ class WebsyRouter {
       this.activateItem(children[c].view, this.options.triggerClass)
       this.activateItem(children[c].view, this.options.viewClass)
       this.showComponents(children[c].view)
-      this.publish('show', [children[c].view])
+      this.publish('show', [children[c].view, null, group])
     }
-    if (this.previousView !== this.currentView) {
+    if (this.previousView !== this.currentView || group !== 'main') {
       this.showComponents(view)
-      this.publish('show', [view, params]) 
+      this.publish('show', [view, params, group]) 
     }    
   }
   reloadCurrentView () {
-    this.showView(this.currentView, this.currentParams)
+    this.showView(this.currentView, this.currentParams, 'main')
   }
   navigate (inputPath, group = 'main', event, popped) {
     if (typeof popped === 'undefined') {
@@ -2853,10 +2890,10 @@ class WebsyRouter {
       return
     }
     if (toggle === false) {
-      this.showView(this.currentView, this.currentParams)
+      this.showView(this.currentView, this.currentParams, group)
     }
     else if (newPath && newPath !== '') {      
-      this.showView(newPath)
+      this.showView(newPath, null, group)
     }
     if (this.usesHTMLSuffix === true) {
       inputPath = window.location.pathname.split('/').pop() + inputPath
@@ -2975,7 +3012,7 @@ class Switch {
       this.render() 
     }    
   }
-  disabled () {
+  disable () {
     this.options.enabled = false
     this.render()
   }
@@ -3774,7 +3811,7 @@ class WebsyTable2 {
           selectedItems: [pageOptions.indexOf(this.options.pageSize)],
           items: pageOptions.map(p => ({ label: p.toString(), value: p })),
           allowClear: false,
-          disableSearch: true,
+          disableSearch: true,          
           onItemSelected: (selectedItem) => {
             if (this.options.onChangePageSize) {
               this.options.onChangePageSize(selectedItem.value)
@@ -4413,8 +4450,11 @@ if (this.options.data[side].scale === 'Time') {
       this.options.data.series.forEach(s => {     
         if (this.options.data[xData].scale !== 'Time') {
           xPoint = this[xAxis](this.parseX(xLabel))
-          s.data.forEach(d => {
+          s.data.forEach(d => {            
             if (d.x.value === xLabel) {
+              if (!tooltipTitle) {
+                tooltipTitle = d.x.value
+              }
               if (!d.y.color) {
                 d.y.color = s.color 
               }
@@ -5075,7 +5115,7 @@ if (this.options.orientation === 'horizontal') {
   yAxis = 'bottomAxis'
 }
 let barWidth = this[xAxis].bandwidth()
-if (this.options.data.series.length > 1 && this.options.grouping !== 'stacked') {
+if (this.options.data.series.length > 1 && this.options.grouping === 'grouped') {
   barWidth = barWidth / this.options.data.series.length - 4
 }
 function getBarHeight (d, i) {
@@ -5106,7 +5146,7 @@ function getBarX (d, i) {
     }
   }
   else {
-    if (this.options.grouping !== 'stacked') {
+    if (this.options.grouping !== 'grouped') {
       return this[xAxis](this.parseX(d.x.value))
     }
     else {
@@ -5116,7 +5156,7 @@ function getBarX (d, i) {
 }
 function getBarY (d, i) {
   if (this.options.orientation === 'horizontal') {
-    if (this.options.grouping !== 'stacked') {
+    if (this.options.grouping !== 'grouped') {
       return this[xAxis](this.parseX(d.x.value))
     }
     else {
@@ -5201,7 +5241,10 @@ if (this.options.showLabels) {
     .text(d => d.y.label || d.y.value)
     .each(function (d, i) {      
       if (that.options.orientation === 'horizontal') {
-        if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
+        if (that.options.grouping === 'stacked') {
+          this.setAttribute('text-anchor', 'middle')
+        }
+        else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
           this.setAttribute('text-anchor', 'end')
           this.setAttribute('x', +(this.getAttribute('x')) - 8)
         }    
@@ -5657,7 +5700,7 @@ class WebsyMap {
   render () {
     const mapEl = document.getElementById(`${this.elementId}_map`)
     const legendEl = document.getElementById(`${this.elementId}_map`)
-    if (this.options.showLegend === true) {            
+    if (this.options.showLegend === true && this.options.data.polygons) {            
       let legendData = this.options.data.polygons.map((s, i) => ({value: s.label || s.key, color: s.color || this.options.colors[i % this.options.colors.length]})) 
       let longestValue = legendData.map(s => s.value).reduce((a, b) => a.length > b.length ? a : b)
       if (this.options.legendPosition === 'top' || this.options.legendPosition === 'bottom') {

package/dist/websy-designs.js

@@ -424,13 +424,13 @@ var WebsyCarousel = /*#__PURE__*/function () {
         if (this.options.showFrameSelector === true) {
           html += "<div class=\"websy-btn-parent\">";
           this.options.frames.forEach(function (frame, frameIndex) {
-            html += "\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" data-index=\"".concat(frameIndex, "\" id=\"").concat(_this3.elementId, "_selector_").concat(frameIndex, "\" \n            class=\"websy-progress-btn ").concat(_this3.options.currentFrame === frameIndex ? 'websy-progress-btn-active' : '', "\">\n          <title>Ellipse</title><circle cx=\"256\" cy=\"256\" r=\"192\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\"/>\n          </svg>\n          ");
+            html += "\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 512 512\" data-index=\"".concat(frameIndex, "\" id=\"").concat(_this3.elementId, "_selector_").concat(frameIndex, "\" \n            class=\"websy-progress-btn ").concat(_this3.options.currentFrame === frameIndex ? 'websy-progress-btn-active' : '', "\">\n          <title>Ellipse</title><circle cx=\"256\" cy=\"256\" r=\"192\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\"/>\n          </svg>\n          ");
           });
           html += "</div>";
         }
 
         if (this.options.showPrevNext === true) {
-          html += "\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"websy-prev-arrow\"\n      viewBox=\"0 0 512 512\">\n      <title>Caret Back</title>\n      <path d=\"M321.94 98L158.82 237.78a24 24 0 000 36.44L321.94 414c15.57 13.34 39.62 2.28 39.62-18.22v-279.6c0-20.5-24.05-31.56-39.62-18.18z\"/>\n      </svg>\n      </div>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"websy-next-arrow\">\n      <title>Caret Forward</title>\n      <path d=\"M190.06 414l163.12-139.78a24 24 0 000-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z\"/>\n      </svg>\n      ";
+          html += "\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"websy-prev-arrow\"\n      viewBox=\"0 0 512 512\">\n      <title>Caret Back</title>\n      <path d=\"M321.94 98L158.82 237.78a24 24 0 000 36.44L321.94 414c15.57 13.34 39.62 2.28 39.62-18.22v-279.6c0-20.5-24.05-31.56-39.62-18.18z\"/>\n      </svg>\n    \n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"websy-next-arrow\">\n      <title>Caret Forward</title>\n      <path d=\"M190.06 414l163.12-139.78a24 24 0 000-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z\"/>\n      </svg>\n      ";
         }
 
         html += "\n      </div>\n      ";
@@ -485,6 +485,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
     this.validDates = [];
     this.validYears = [];
     this.customRangeSelected = true;
+    this.shiftPressed = false;
     var DEFAULTS = {
       defaultRange: 0,
       minAllowedDate: this.floorDate(new Date(new Date(new Date().setFullYear(new Date().getFullYear() - 1)).setDate(1))),
@@ -566,7 +567,9 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       el.addEventListener('mousedown', this.handleMouseDown.bind(this));
       el.addEventListener('mouseover', this.handleMouseOver.bind(this));
       el.addEventListener('mouseup', this.handleMouseUp.bind(this));
-      var html = "\n        <div class='websy-date-picker-container'>\n          <span class='websy-dropdown-header-label'>".concat(this.options.label || 'Date', "</span>\n          <div class='websy-date-picker-header'>\n            <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.options.mode][this.selectedRange].label, "</span>\n            <svg 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          </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              <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      ");
+      document.addEventListener('keydown', this.handleKeyDown.bind(this));
+      document.addEventListener('keyup', this.handleKeyUp.bind(this));
+      var html = "\n        <div class='websy-date-picker-container'>\n          <span class='websy-dropdown-header-label'>".concat(this.options.label || 'Date', "</span>\n          <div class='websy-date-picker-header'>\n            <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.options.mode][this.selectedRange].label, "</span>\n            <svg 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          </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      ");
       el.innerHTML = html;
       this.render();
     } else {
@@ -635,24 +638,45 @@ var WebsyDatePicker = /*#__PURE__*/function () {
         this.close();
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(event) {
+      console.log('key down', event);
+
+      if (event.key === 'Shift') {
+        this.dragging = true;
+        this.shiftPressed = true;
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(event) {
+      this.dragging = false;
+      this.shiftPressed = false;
+    }
   }, {
     key: "handleMouseDown",
     value: function handleMouseDown(event) {
-      this.mouseDown = true;
-      this.dragging = false;
+      if (this.shiftPressed === true && this.currentselection.length > 0) {
+        this.mouseDownId = this.currentselection[this.currentselection.length - 1];
+        this.selectDate(+event.target.id.split('_')[0]);
+      } else {
+        this.mouseDown = true;
+        this.dragging = false;
 
-      if (event.target.classList.contains('websy-dp-date')) {
-        if (event.target.classList.contains('websy-disabled-date')) {
-          return;
-        }
+        if (event.target.classList.contains('websy-dp-date')) {
+          if (event.target.classList.contains('websy-disabled-date')) {
+            return;
+          }
 
-        if (this.customRangeSelected === true) {
-          this.currentselection = [];
-          this.customRangeSelected = false;
-        }
+          if (this.customRangeSelected === true) {
+            this.currentselection = [];
+            this.customRangeSelected = false;
+          }
 
-        this.mouseDownId = +event.target.id.split('_')[0];
-        this.selectDate(this.mouseDownId);
+          this.mouseDownId = +event.target.id.split('_')[0];
+          this.selectDate(this.mouseDownId);
+        }
       }
     }
   }, {
@@ -731,7 +755,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           var dateEl = void 0;
 
           if (this.options.mode === 'date') {
-            dateEl = document.getElementById("".concat(d.getTime(), "_date"));
+            dateEl = document.getElementById("".concat(d, "_date"));
           } else if (this.options.mode === 'year') {
             dateEl = document.getElementById("".concat(d, "_year"));
           }
@@ -1085,6 +1109,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       if (this.selectedRange === -1) {
         var list = (this.currentselection.length > 0 ? this.currentselection : this.selectedRangeDates).map(function (d) {
           if (_this7.options.mode === 'date') {
+            if (!d.toLocaleDateString) {
+              d = new Date(d);
+            }
+
             return d.toLocaleDateString();
           } else if (_this7.options.mode === 'year') {
             return d;
@@ -1215,6 +1243,8 @@ var WebsyDropdown = /*#__PURE__*/function () {
     value: function close() {
       var maskEl = document.getElementById("".concat(this.elementId, "_mask"));
       var contentEl = document.getElementById("".concat(this.elementId, "_content"));
+      var scrollEl = document.getElementById("".concat(this.elementId, "_itemsContainer"));
+      scrollEl.scrollTop = 0;
       maskEl.classList.remove('active');
       contentEl.classList.remove('active');
       contentEl.classList.remove('on-top');
@@ -1226,6 +1256,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
           searchEl.value = '';
         }
       }
+
+      if (this.options.onClose) {
+        this.options.onClose(this.elementId);
+      }
     }
   }, {
     key: "handleClick",
@@ -1355,6 +1389,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
           searchEl.focus();
         }
       }
+
+      if (this.options.onOpen) {
+        this.options.onOpen(this.elementId);
+      }
     }
   }, {
     key: "render",
@@ -3026,7 +3064,7 @@ var WebsyRouter = /*#__PURE__*/function () {
       }
 
       if (view !== '') {
-        this.showView(view, params);
+        this.showView(view, params, 'main');
       }
     }
   }, {
@@ -3069,6 +3107,10 @@ var WebsyRouter = /*#__PURE__*/function () {
         this.hideTriggerItems(view, group);
         this.hideViewItems(view, group);
         this.publish('hide', [view]);
+      } else if (group !== this.options.defaultGroup) {
+        this.hideTriggerItems(view, group);
+        this.hideViewItems(view, group);
+        this.publish('hide', [view]);
       }
     } // registerElements (root) {
     //   if (root.nodeName === '#document') {
@@ -3172,7 +3214,7 @@ var WebsyRouter = /*#__PURE__*/function () {
     }
   }, {
     key: "showView",
-    value: function showView(view, params) {
+    value: function showView(view, params, group) {
       this.activateItem(view, this.options.triggerClass);
       this.activateItem(view, this.options.viewClass);
       var children = this.getActiveViewsFromParent(view);
@@ -3181,18 +3223,18 @@ var WebsyRouter = /*#__PURE__*/function () {
         this.activateItem(children[c].view, this.options.triggerClass);
         this.activateItem(children[c].view, this.options.viewClass);
         this.showComponents(children[c].view);
-        this.publish('show', [children[c].view]);
+        this.publish('show', [children[c].view, null, group]);
       }
 
-      if (this.previousView !== this.currentView) {
+      if (this.previousView !== this.currentView || group !== 'main') {
         this.showComponents(view);
-        this.publish('show', [view, params]);
+        this.publish('show', [view, params, group]);
       }
     }
   }, {
     key: "reloadCurrentView",
     value: function reloadCurrentView() {
-      this.showView(this.currentView, this.currentParams);
+      this.showView(this.currentView, this.currentParams, 'main');
     }
   }, {
     key: "navigate",
@@ -3312,9 +3354,9 @@ var WebsyRouter = /*#__PURE__*/function () {
       }
 
       if (toggle === false) {
-        this.showView(this.currentView, this.currentParams);
+        this.showView(this.currentView, this.currentParams, group);
       } else if (newPath && newPath !== '') {
-        this.showView(newPath);
+        this.showView(newPath, null, group);
       }
 
       if (this.usesHTMLSuffix === true) {
@@ -3471,8 +3513,8 @@ var Switch = /*#__PURE__*/function () {
   }
 
   _createClass(Switch, [{
-    key: "disabled",
-    value: function disabled() {
+    key: "disable",
+    value: function disable() {
       this.options.enabled = false;
       this.render();
     }
@@ -5031,6 +5073,10 @@ var WebsyChart = /*#__PURE__*/function () {
             xPoint = _this35[xAxis](_this35.parseX(xLabel));
             s.data.forEach(function (d) {
               if (d.x.value === xLabel) {
+                if (!tooltipTitle) {
+                  tooltipTitle = d.x.value;
+                }
+
                 if (!d.y.color) {
                   d.y.color = s.color;
                 }
@@ -5683,7 +5729,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
       var barWidth = this[xAxis].bandwidth();
 
-      if (this.options.data.series.length > 1 && this.options.grouping !== 'stacked') {
+      if (this.options.data.series.length > 1 && this.options.grouping === 'grouped') {
         barWidth = barWidth / this.options.data.series.length - 4;
       }
 
@@ -5713,7 +5759,7 @@ var WebsyChart = /*#__PURE__*/function () {
             return 0;
           }
         } else {
-          if (this.options.grouping !== 'stacked') {
+          if (this.options.grouping !== 'grouped') {
             return this[xAxis](this.parseX(d.x.value));
           } else {
             return this[xAxis](this.parseX(d.x.value)) + i * barWidth;
@@ -5723,7 +5769,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
       function getBarY(d, i) {
         if (this.options.orientation === 'horizontal') {
-          if (this.options.grouping !== 'stacked') {
+          if (this.options.grouping !== 'grouped') {
             return this[xAxis](this.parseX(d.x.value));
           } else {
             return this[xAxis](this.parseX(d.x.value)) + (d.y.index || i) * barWidth;
@@ -5770,7 +5816,9 @@ var WebsyChart = /*#__PURE__*/function () {
           return d.y.label || d.y.value;
         }).each(function (d, i) {
           if (that.options.orientation === 'horizontal') {
-            if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
+            if (that.options.grouping === 'stacked') {
+              this.setAttribute('text-anchor', 'middle');
+            } else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
               this.setAttribute('text-anchor', 'end');
               this.setAttribute('x', +this.getAttribute('x') - 8);
             }
@@ -6234,7 +6282,7 @@ var WebsyMap = /*#__PURE__*/function () {
       var mapEl = document.getElementById("".concat(this.elementId, "_map"));
       var legendEl = document.getElementById("".concat(this.elementId, "_map"));
 
-      if (this.options.showLegend === true) {
+      if (this.options.showLegend === true && this.options.data.polygons) {
         var legendData = this.options.data.polygons.map(function (s, i) {
           return {
             value: s.label || s.key,