@websy/websy-designs 0.0.128 → 1.0.1

package/dist/websy-designs.debug.js

@@ -12,313 +12,870 @@
   WebsyTable
   WebsyChart
   WebsyChartTooltip
+  WebsyLegend
   WebsyMap
   WebsyKPI
   WebsyPDFButton
+  Switch
   WebsyTemplate
   APIService
+  ButtonGroup
   WebsyUtils
 */ 
 
-class WebsyPopupDialog {
+/* global XMLHttpRequest fetch ENV */
+class APIService {
+  constructor (baseUrl = '', options = {}) {
+    this.baseUrl = baseUrl
+    this.options = Object.assign({}, options)
+  }
+  add (entity, data, options = {}) {
+    const url = this.buildUrl(entity)
+    return this.run('POST', url, data, options)
+  }
+  buildUrl (entity, id, query) {
+    if (typeof query === 'undefined') {
+      query = []
+    }
+    if (id) {
+      query.push(`id:${id}`)
+    }    
+    return `${this.baseUrl}/${entity}${query.length > 0 ? `${entity.indexOf('?') === -1 ? '?' : '&'}where=${query.join(';')}` : ''}`
+  }
+  delete (entity, id) {
+    const url = this.buildUrl(entity, id)
+    return this.run('DELETE', url)
+  }
+  get (entity, id, query) {
+    const url = this.buildUrl(entity, id, query)
+    return this.run('GET', url)
+  }	
+  update (entity, id, data) {
+    const url = this.buildUrl(entity, id)
+    return this.run('PUT', url, data)
+  }
+  fetchData (method, url, data, options = {}) {
+    return fetch(url, {
+      method,
+      mode: 'cors', // no-cors, *cors, same-origin
+      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+      credentials: 'same-origin', // include, *same-origin, omit
+      headers: {
+        'Content-Type': 'application/json'
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      redirect: 'follow', // manual, *follow, error
+      referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+      body: JSON.stringify(data) // body data type must match "Content-Type" header
+    }).then(response => {
+      return response.json()
+    })
+  } 
+  run (method, url, data, options = {}, returnHeaders = false) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest()
+      xhr.open(method, url)		
+      xhr.setRequestHeader('Content-Type', 'application/json')
+      xhr.responseType = 'text'
+      if (options.responseType) {
+        xhr.responseType = options.responseType
+      }
+      if (options.headers) {
+        for (let key in options.headers) {
+          xhr.setRequestHeader(key, options.headers[key])
+        }
+      }
+      xhr.withCredentials = true      
+      xhr.onload = () => {
+        if (xhr.status === 401 || xhr.status === 403) {
+          if (ENV && ENV.AUTH_REDIRECT) {
+            window.location = ENV.AUTH_REDIRECT
+          }
+          else {
+            window.location = '/login'
+          }
+          // reject('401 - Unauthorized')
+          return
+        }      
+        let response = xhr.responseType === 'text' ? xhr.responseText : xhr.response
+        if (response !== '' && response !== 'null') {
+          try {
+            response = JSON.parse(response)
+          }
+          catch (e) {
+            // Either a bad Url or a string has been returned
+          }
+        }
+        else {
+          response = []
+        }      
+        if (response.err) {					
+          reject(JSON.stringify(response))
+        }
+        else {					
+          if (returnHeaders === true) {
+            resolve([response, parseHeaders(xhr.getAllResponseHeaders())])	 
+          }
+          else {
+            resolve(response)
+          }
+        }				
+      }
+      xhr.onerror = () => reject(xhr.statusText)
+      if (data) {
+        xhr.send(JSON.stringify(data))	
+      }
+      else {
+        xhr.send()
+      }			
+    })
+    function parseHeaders (headers) {
+      headers = headers.split('\r\n')
+      let ouput = {}
+      headers.forEach(h => {
+        h = h.split(':')
+        if (h.length === 2) {
+          ouput[h[0]] = h[1].trim() 
+        }        
+      })
+      return ouput
+    }
+  }	
+}
+
+/* global */
+class ButtonGroup {
+  constructor (elementId, options) {
+    this.elementId = elementId
+    const DEFAULTS = {
+      style: 'button',
+      subscribers: {},
+      activeItem: 0    
+    }
+    this.options = Object.assign({}, DEFAULTS, options)
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      el.addEventListener('click', this.handleClick.bind(this))
+      this.render() 
+    }    
+  }
+  handleClick (event) {    
+    if (event.target.classList.contains('websy-button-group-item')) {
+      const index = +event.target.getAttribute('data-index')
+      if (this.options.activeItem !== index) {
+        if (this.options.onDeactivate) {
+          this.options.onDeactivate(this.options.items[this.options.activeItem], this.options.activeItem)
+        }
+        this.options.activeItem = index
+        if (this.options.onActivate) {
+          this.options.onActivate(this.options.items[index], index)
+        }
+        this.render()
+      } 
+    }    
+  }
+  on (event, fn) {
+    if (!this.options.subscribers[event]) {
+      this.options.subscribers[event] = []
+    }
+    this.options.subscribers[event].push(fn)
+  }
+  publish (event, params) {
+    this.options.subscribers[event].forEach((item) => {
+      item.apply(null, params)
+    })
+  }
+  render () {
+    const el = document.getElementById(this.elementId)
+    if (el && this.options.items) {
+      el.innerHTML = this.options.items.map((t, i) => `
+        <div ${(t.attributes || []).join(' ')} data-id="${t.id || t.label}" data-index="${i}" class="websy-button-group-item ${(t.classes || []).join(' ')} ${this.options.style}-style ${i === this.options.activeItem ? 'active' : ''}">${t.label}</div>
+      `).join('')
+    }
+  }
+}
+
+class WebsyDatePicker {
+  constructor (elementId, options) {
+    this.oneDay = 1000 * 60 * 60 * 24
+    this.currentselection = []
+    this.validDates = []
+    const DEFAULTS = {
+      defaultRange: 0,
+      minAllowedDate: this.floorDate(new Date(new Date((new Date().setFullYear(new Date().getFullYear() - 1))).setDate(1))),
+      maxAllowedDate: this.floorDate(new Date((new Date()))),
+      daysOfWeek: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+      monthMap: {
+        0: 'Jan',
+        1: 'Feb',
+        2: 'Mar',
+        3: 'Apr',
+        4: 'May',
+        5: 'Jun',
+        6: 'Jul',
+        7: 'Aug',
+        8: 'Sep',
+        9: 'Oct',
+        10: 'Nov',
+        11: 'Dec'
+      },
+      ranges: []
+    }
+    DEFAULTS.ranges = [
+      {
+        label: 'All Dates',
+        range: [DEFAULTS.minAllowedDate, DEFAULTS.maxAllowedDate]
+      },
+      {
+        label: 'Today',
+        range: [this.floorDate(new Date())]
+      },
+      {
+        label: 'Yesterday',
+        range: [this.floorDate(new Date().setDate(new Date().getDate() - 1))]
+      },
+      {
+        label: 'Last 7 Days',
+        range: [this.floorDate(new Date().setDate(new Date().getDate() - 6)), this.floorDate(new Date())]
+      },
+      {
+        label: 'This Month',
+        range: [this.floorDate(new Date().setDate(1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() + 1) - this.oneDay)]
+      },
+      {
+        label: 'Last Month',
+        range: [this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() - 1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth()) - this.oneDay)]
+      },
+      {
+        label: 'This Year',
+        range: [this.floorDate(new Date(`1/1/${new Date().getFullYear()}`)), this.floorDate(new Date(`12/31/${new Date().getFullYear()}`))]
+      },
+      {
+        label: 'Last Year',
+        range: [this.floorDate(new Date(`1/1/${new Date().getFullYear() - 1}`)), this.floorDate(new Date(`12/31/${new Date().getFullYear() - 1}`))]
+      }
+    ]
+    this.options = Object.assign({}, DEFAULTS, options)
+    this.selectedRange = this.options.defaultRange || 0
+    this.selectedRangeDates = [...this.options.ranges[this.options.defaultRange || 0].range]
+    this.priorSelectedDates = null
+    if (!elementId) {
+      console.log('No element Id provided')
+      return
+    }
+    const el = document.getElementById(elementId)
+    if (el) {
+      this.elementId = elementId
+      el.addEventListener('click', this.handleClick.bind(this))
+      let html = `
+        <div class='websy-date-picker-container'>
+          <span class='websy-dropdown-header-label'>${this.options.label || 'Date'}</span>
+          <div class='websy-date-picker-header'>
+            <span id='${this.elementId}_selectedRange'>${this.options.ranges[this.selectedRange].label}</span>
+            <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>
+          </div>
+          <div id='${this.elementId}_mask' class='websy-date-picker-mask'></div>
+          <div id='${this.elementId}_content' class='websy-date-picker-content'>
+            <div class='websy-date-picker-ranges'>
+              <ul id='${this.elementId}_rangelist'>
+                ${this.renderRanges()}
+              </ul>
+            </div><!--
+            --><div id='${this.elementId}_datelist' class='websy-date-picker-custom'>${this.renderDates()}</div>
+            <div class='websy-dp-button-container'>
+              <button class='websy-btn websy-dp-cancel'>Cancel</button>
+              <button class='websy-btn websy-dp-confirm'>Confirm</button>
+            </div>
+          </div>          
+        </div>
+      `
+      el.innerHTML = html
+      this.render()
+    }
+    else {
+      console.log('No element found with Id', elementId)
+    }
+  }
+  close (confirm) {
+    const maskEl = document.getElementById(`${this.elementId}_mask`)
+    const contentEl = document.getElementById(`${this.elementId}_content`)
+    maskEl.classList.remove('active')
+    contentEl.classList.remove('active')
+    if (confirm === true) {
+      if (this.options.onChange) {
+        this.options.onChange(this.selectedRangeDates)        
+      }
+      this.updateRange()
+    }
+    else {
+      this.selectedRangeDates = [...this.priorSelectedDates]
+      this.selectedRange = this.priorSelectedRange
+    }
+  }
+  floorDate (d) {
+    if (typeof d === 'number') {
+      d = new Date(d)
+    }
+    return new Date(d.setHours(0, 0, 0, 0))
+  }
+  handleClick (event) {
+    if (event.target.classList.contains('websy-date-picker-header')) {
+      this.open()
+    }
+    else if (event.target.classList.contains('websy-date-picker-mask')) {
+      this.close()
+    }
+    else if (event.target.classList.contains('websy-date-picker-range')) {
+      if (event.target.classList.contains('websy-disabled-range')) {
+        return
+      }
+      const index = event.target.getAttribute('data-index')
+      this.selectRange(index)
+      this.updateRange(index)
+    }
+    else if (event.target.classList.contains('websy-dp-date')) {
+      if (event.target.classList.contains('websy-disabled-date')) {
+        return
+      }
+      const timestamp = event.target.id.split('_')[0]
+      this.selectDate(+timestamp)
+    }
+    else if (event.target.classList.contains('websy-dp-confirm')) {
+      this.close(true)
+    }
+    else if (event.target.classList.contains('websy-dp-cancel')) {
+      this.close()
+    }
+  }
+  highlightRange () {
+    const el = document.getElementById(`${this.elementId}_dateList`)
+    const dateEls = el.querySelectorAll('.websy-dp-date')
+    for (let i = 0; i < dateEls.length; i++) {      
+      dateEls[i].classList.remove('selected')
+      dateEls[i].classList.remove('first')
+      dateEls[i].classList.remove('last')
+    }
+    if (this.selectedRange === 0) {
+      return
+    }
+    let daysDiff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay)
+    if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
+      daysDiff += 1
+    }
+    for (let i = 0; i < daysDiff + 1; i++) {
+      let d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))
+      const dateEl = document.getElementById(`${d.getTime()}_date`)
+      if (dateEl) {
+        dateEl.classList.add('selected')
+        if (d.getTime() === this.selectedRangeDates[0].getTime()) {
+          dateEl.classList.add('first')
+        }
+        if (d.getTime() === this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()) {
+          dateEl.classList.add('last')
+        }
+      }
+    }
+  }
+  open (options, override = false) {
+    const maskEl = document.getElementById(`${this.elementId}_mask`)
+    const contentEl = document.getElementById(`${this.elementId}_content`)
+    maskEl.classList.add('active')
+    contentEl.classList.add('active')
+    this.priorSelectedDates = [...this.selectedRangeDates]
+    this.priorSelectedRange = this.selectedRange
+    this.scrollRangeIntoView()
+  }
+  render (disabledDates) {
+    if (!this.elementId) {
+      console.log('No element Id provided for Websy Loading Dialog')	
+      return
+    }
+    const el = document.getElementById(`${this.elementId}_datelist`)
+    if (el && disabledDates) {
+      el.innerHTML = this.renderDates(disabledDates)
+    }
+    const rangeEl = document.getElementById(`${this.elementId}_rangelist`)
+    if (rangeEl && disabledDates) {
+      rangeEl.innerHTML = this.renderRanges()
+    }
+    this.highlightRange()
+  }
+  renderDates (disabledDates) {
+    let disabled = []
+    this.validDates = []
+    if (disabledDates) {
+      disabled = disabledDates.map(d => d.getTime())
+    }        
+    // first disabled all of the ranges
+    this.options.ranges.forEach(r => (r.disabled = true))
+    let daysDiff = Math.ceil((this.options.maxAllowedDate.getTime() - this.options.minAllowedDate.getTime()) / this.oneDay) + 1
+    let months = {}
+    for (let i = 0; i < daysDiff; i++) {
+      let d = this.floorDate(new Date(this.options.minAllowedDate.getTime() + (i * this.oneDay)))
+      let monthYear = `${this.options.monthMap[d.getMonth()]} ${d.getFullYear()}`
+      if (!months[monthYear]) {
+        months[monthYear] = []
+      }
+      if (disabled.indexOf(d.getTime()) === -1) {
+        this.validDates.push(d.getTime())
+      }
+      months[monthYear].push({date: d, dayOfMonth: d.getDate(), dayOfWeek: d.getDay(), id: d.getTime(), disabled: disabled.indexOf(d.getTime()) !== -1})
+    }
+    // check each range to see if it can be enabled
+    for (let i = 0; i < this.options.ranges.length; i++) {
+      const r = this.options.ranges[i]
+      // check the first date
+      if (this.validDates.indexOf(r.range[0].getTime()) !== -1) {
+        r.disabled = false        
+      }
+      else if (r.range[1]) {
+        // check the last date
+        if (this.validDates.indexOf(r.range[1].getTime()) !== -1) {
+          r.disabled = false
+        }
+        else {
+          // check the full range until a match is found
+          for (let i = r.range[0].getTime(); i <= r.range[1].getTime(); i += this.oneDay) {
+            let testDate = this.floorDate(new Date(i))            
+            if (this.validDates.indexOf(testDate.getTime()) !== -1) {
+              r.disabled = false
+              break
+            }          
+          }
+        }                        
+      }      
+    }    
+    let html = ''
+    html += `
+      <ul class='websy-dp-days-header'>
+    `
+    html += this.options.daysOfWeek.map(d => `<li>${d}</li>`).join('')
+    html += `
+      </ul>
+      <div id='${this.elementId}_dateList' class='websy-dp-date-list'>
+    `
+    for (let key in months) {      
+      html += `
+        <div class='websy-dp-month-container'>
+          <span id='${key.replace(/\s/g, '_')}'>${key}</span>
+          <ul>
+      `
+      if (months[key][0].dayOfWeek > 0) {
+        let paddedDays = []
+        for (let i = 0; i < months[key][0].dayOfWeek; i++) {
+          paddedDays.push(`<li>&nbsp;</li>`)          
+        }
+        html += paddedDays.join('')
+      }
+      html += months[key].map(d => `<li id='${d.id}_date' class='websy-dp-date ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.dayOfMonth}</li>`).join('')
+      html += `
+          </ul>
+        </div>
+      `
+    }
+    html += '</div>'
+    return html
+  }
+  renderRanges () {
+    return this.options.ranges.map((r, i) => `
+      <li data-index='${i}' class='websy-date-picker-range ${i === this.selectedRange ? 'active' : ''} ${r.disabled === true ? 'websy-disabled-range' : ''}'>${r.label}</li>
+    `).join('')
+  }
+  scrollRangeIntoView () {    
+    if (this.selectedRangeDates[0]) {
+      const el = document.getElementById(`${this.selectedRangeDates[0].getTime()}_date`)
+      const parentEl = document.getElementById(`${this.elementId}_dateList`)
+      if (el && parentEl) {        
+        parentEl.scrollTo(0, el.offsetTop)
+      } 
+    }
+  }
+  selectDate (timestamp) {
+    if (this.currentselection.length === 0) {
+      this.currentselection.push(timestamp)
+    }
+    else {
+      if (timestamp > this.currentselection[0]) {
+        this.currentselection.push(timestamp)
+      }
+      else {
+        this.currentselection.splice(0, 0, timestamp)
+      }
+    }
+    this.selectedRangeDates = [new Date(this.currentselection[0]), new Date(this.currentselection[1] || this.currentselection[0])]
+    if (this.currentselection.length === 2) {
+      this.currentselection = [] 
+    }    
+    this.selectedRange = -1
+    this.highlightRange()
+  }
+  selectRange (index) {
+    if (this.options.ranges[index]) {
+      this.selectedRangeDates = [...this.options.ranges[index].range]
+      this.selectedRange = +index
+      this.highlightRange()      
+      this.close(true)
+    }
+  }
+  selectCustomRange (range) {
+    this.selectedRange = -1
+    this.selectedRangeDates = range
+    this.highlightRange()
+    this.updateRange()
+  }
+  setDateBounds (range) {
+    if (this.options.ranges[0].label === 'All Dates') {
+      this.options.ranges[0].range = [range[0], range[1] || range[0]]
+    }
+    this.options.minAllowedDate = range[0]
+    this.options.maxAllowedDate = range[1] || range[0]
+  }
+  updateRange () {    
+    let range
+    if (this.selectedRange === -1) {
+      let start = this.selectedRangeDates[0].toLocaleDateString()
+      let end = ''
+      if (this.selectedRangeDates[1] && (this.selectedRangeDates[0].getTime() !== this.selectedRangeDates[1].getTime())) {
+        end = ` - ${this.selectedRangeDates[1].toLocaleDateString()}`
+      }      
+      range = { label: `${start}${end}` }
+    }
+    else {
+      range = this.options.ranges[this.selectedRange]
+    }    
+    const el = document.getElementById(this.elementId)
+    const labelEl = document.getElementById(`${this.elementId}_selectedRange`)
+    const rangeEls = el.querySelectorAll(`.websy-date-picker-range`)
+    for (let i = 0; i < rangeEls.length; i++) {
+      rangeEls[i].classList.remove('active')
+      if (i === this.selectedRange) {
+        rangeEls[i].classList.add('active')
+      }
+    }
+    if (labelEl) {
+      labelEl.innerHTML = range.label      
+    }
+  }
+}
+
+Date.prototype.floor = function () {
+  return new Date(`${this.getMonth() + 1}/${this.getDate()}/${this.getFullYear()}`)
+}
+
+/* global WebsyUtils */ 
+class WebsyDropdown {
   constructor (elementId, options) {
-    this.DEFAULTS = {
-      buttons: []
+    const DEFAULTS = {
+      multiSelect: false,
+      multiValueDelimiter: ',',
+      allowClear: true,
+      style: 'plain',
+      items: [],
+      label: '',
+      disabled: false,
+      minSearchCharacters: 2,
+      showCompleteSelectedList: false,
+      closeAfterSelection: true
     }
-    this.options = Object.assign({}, this.DEFAULTS, options)
+    this.options = Object.assign({}, DEFAULTS, options)    
+    this.tooltipTimeoutFn = null
+    this._originalData = []
+    this.selectedItems = this.options.selectedItems || []
     if (!elementId) {
-      console.log('No element Id provided for Websy Popup')		
+      console.log('No element Id provided')
       return
     }
-    this.closeOnOutsideClick = true
     const el = document.getElementById(elementId)
-    this.elementId = elementId
-    el.addEventListener('click', this.handleClick.bind(this))			
+    if (el) {
+      this.elementId = elementId
+      el.addEventListener('click', this.handleClick.bind(this))
+      el.addEventListener('keyup', this.handleKeyUp.bind(this))
+      el.addEventListener('mouseout', this.handleMouseOut.bind(this))
+      el.addEventListener('mousemove', this.handleMouseMove.bind(this))
+      this.render()
+    }
+    else {
+      console.log('No element found with Id', elementId)
+    }
   }
-  hide () {
-    const el = document.getElementById(this.elementId)
-    el.innerHTML = ''
+  set selections (d) {
+    this.selectedItems = d || []    
   }
-  handleClick (event) {		
-    if (event.target.classList.contains('websy-btn')) {
-      const buttonIndex = event.target.getAttribute('data-index')
-      const buttonInfo = this.options.buttons[buttonIndex]            
-      if (buttonInfo && buttonInfo.fn) {
-        if (typeof this.options.collectData !== 'undefined') {
-          const collectEl = document.getElementById(`${this.elementId}_collect`)
-          if (collectEl) {
-            buttonInfo.collectedData = collectEl.value
-          }
-        }
-        if (buttonInfo.preventClose !== true) {
-          this.hide()
-        }
-        buttonInfo.fn(buttonInfo)
-      }
-      else if (buttonInfo && buttonInfo.preventClose !== true) {
-        this.hide()
+  set data (d) {
+    this.options.items = d || []    
+    const el = document.getElementById(`${this.elementId}_items`)
+    if (el.childElementCount === 0) {
+      this.render()
+    }
+    else {
+      if (this.options.items.length === 0) {
+        this.options.items = [{label: this.options.noItemsText || 'No Items'}]
       }
+      this.renderItems()
+    }    
+  }
+  get data () {
+    return this.options.items
+  }
+  clearSelected () {
+    this.selectedItems = []
+    this.updateHeader()
+    if (this.options.onClearSelected) {
+      this.options.onClearSelected()
     }
-    else if (this.closeOnOutsideClick === true) {
-      this.hide()
+  }
+  close () {
+    const maskEl = document.getElementById(`${this.elementId}_mask`)
+    const contentEl = document.getElementById(`${this.elementId}_content`)
+    maskEl.classList.remove('active')
+    contentEl.classList.remove('active')
+    contentEl.classList.remove('on-top')
+    const searchEl = document.getElementById(`${this.elementId}_search`)
+    if (searchEl) {
+      if (searchEl.value.length > 0 && this.options.onCancelSearch) {            
+        this.options.onCancelSearch('')
+        searchEl.value = ''
+      }      
     }
   }
-  render () {
-    if (!this.elementId) {
-      console.log('No element Id provided for Websy Popup')	
+  handleClick (event) {
+    if (this.options.disabled === true) {
       return
     }
-    const el = document.getElementById(this.elementId)
-    let html = ''
-    if (this.options.mask === true) {
-      html += `<div class='websy-mask'></div>`
+    if (event.target.classList.contains('websy-dropdown-header')) {
+      this.open()
     }
-    html += `
-			<div class='websy-popup-dialog-container'>
-				<div class='websy-popup-dialog'>
-		`
-    if (this.options.title) {
-      html += `<h1>${this.options.title}</h1>`
+    else if (event.target.classList.contains('websy-dropdown-mask')) {
+      this.close()
     }
-    if (this.options.message) {
-      html += `<p>${this.options.message}</p>`
+    else if (event.target.classList.contains('websy-dropdown-item')) {
+      const index = event.target.getAttribute('data-index')
+      this.updateSelected(+index)
     }
-    if (typeof this.options.collectData !== 'undefined') {
-      html += `
-        <div>
-          <input id="${this.elementId}_collect" class="websy-input" value="${typeof this.options.collectData === 'boolean' ? '' : this.options.collectData}" placeholder="${this.options.collectPlaceholder || ''}">
-        </div>
-      `
+    else if (event.target.classList.contains('clear')) {
+      this.clearSelected()
     }
-    this.closeOnOutsideClick = true
-    if (this.options.buttons) {
-      if (this.options.allowCloseOnOutsideClick !== true) {
-        this.closeOnOutsideClick = false
-      }			
-      html += `<div class='websy-popup-button-panel'>`
-      for (let i = 0; i < this.options.buttons.length; i++) {				
-        html += `
-					<button class='websy-btn ${(this.options.buttons[i].classes || []).join(' ')}' data-index='${i}'>
-						${this.options.buttons[i].label}
-					</button>
-				`
+  }
+  handleKeyUp (event) {
+    if (event.target.classList.contains('websy-dropdown-search')) {
+      if (this._originalData.length === 0) {
+        this._originalData = [...this.options.items]
+      }
+      if (event.target.value.length >= this.options.minSearchCharacters) {
+        if (event.key === 'Enter') {
+          if (this.options.onConfirmSearch) {
+            this.options.onConfirmSearch(event.target.value)
+            event.target.value = ''
+          }
+        }
+        else if (event.key === 'Escape') {
+          if (this.options.onCancelSearch) {            
+            this.options.onCancelSearch(event.target.value)
+            event.target.value = ''
+          }
+          else {
+            this.data = this._originalData
+            this._originalData = []
+          }
+        }
+        else {
+          if (this.options.onSearch) {
+            this.options.onSearch(event.target.value)
+          }
+          else {
+            this.data = this._originalData.filter(d => d.label.toLowerCase().indexOf(event.target.value.toLowerCase()) !== -1)
+          }
+        }
+      }
+      else {
+        if (this.options.onCancelSearch) {            
+          this.options.onCancelSearch(event.target.value)
+        }
       }
-      html += `</div>`
     }
-    html += `
-				</div>
-			</div>
-		`
-    el.innerHTML = html		
   }
-  show (options) {
-    if (options) {
-      this.options = Object.assign({}, this.DEFAULTS, options)
+  handleMouseMove (event) {  
+    if (this.tooltipTimeoutFn) {
+      event.target.classList.remove('websy-delayed')
+      event.target.classList.remove('websy-delayed-info')
+      if (event.target.children[1]) {
+        event.target.children[1].classList.remove('websy-delayed-info')
+      }
+      clearTimeout(this.tooltipTimeoutFn)
+    }  
+    if (event.target.tagName === 'LI') {
+      this.tooltipTimeoutFn = setTimeout(() => {
+        event.target.classList.add('websy-delayed')        
+      }, 500)  
+    }
+    if (event.target.classList.contains('websy-dropdown-header') && event.target.children[1]) {
+      this.tooltipTimeoutFn = setTimeout(() => {
+        event.target.children[1].classList.add('websy-delayed-info')
+      }, 500)  
     }
-    this.render()
   }
-}
-
-class WebsyLoadingDialog {
-  constructor (elementId, options) {
-    this.options = Object.assign({}, options)				
-    if (!elementId) {
-      console.log('No element Id provided')
-      return
+  handleMouseOut (event) {
+    if (this.tooltipTimeoutFn) {
+      event.target.classList.remove('websy-delayed')
+      event.target.classList.remove('websy-delayed-info')
+      if (event.target.children[1]) {
+        event.target.children[1].classList.remove('websy-delayed-info')
+      }
+      clearTimeout(this.tooltipTimeoutFn)
     }
-    this.elementId = elementId
   }
-  hide () {
-    const el = document.getElementById(this.elementId)
-    el.classList.remove('loading')
-    el.innerHTML = ''
+  open (options, override = false) {
+    const maskEl = document.getElementById(`${this.elementId}_mask`)
+    const contentEl = document.getElementById(`${this.elementId}_content`)
+    maskEl.classList.add('active')
+    contentEl.classList.add('active')
+    if (WebsyUtils.getElementPos(contentEl).bottom > window.innerHeight) {
+      contentEl.classList.add('on-top')
+    }
+    if (this.options.disableSearch !== true) {
+      const searchEl = document.getElementById(`${this.elementId}_search`)
+      if (searchEl) {
+        searchEl.focus()
+      }
+    }
   }
   render () {
     if (!this.elementId) {
-      console.log('No element Id provided for Websy Loading Dialog')	
+      console.log('No element Id provided for Websy Dropdown')	
       return
     }
     const el = document.getElementById(this.elementId)
+    const headerLabel = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
+    const headerValue = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
     let html = `
-			<div class='websy-loading-container ${(this.options.classes || []).join(' ')}'>
-				<div class='websy-ripple'>
-					<div></div>
-					<div></div>
-				</div>
-				<h4>${this.options.title || 'Loading...'}</h4>
-		`
-    if (this.options.messages) {
-      for (let i = 0; i < this.options.messages.length; i++) {
-        html += `<p>${this.options.messages[i]}</p>`
-      }
-    }				
+      <div class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''}'>
+        <div id='${this.elementId}_header' class='websy-dropdown-header ${this.selectedItems.length === 1 ? 'one-selected' : ''} ${this.options.allowClear === true ? 'allow-clear' : ''}'>
+          <span id='${this.elementId}_headerLabel' class='websy-dropdown-header-label'>${this.options.label}</span>
+          <span data-info='${headerLabel}' class='websy-dropdown-header-value' id='${this.elementId}_selectedItems'>${headerLabel}</span>
+          <input class='dropdown-input' id='${this.elementId}_input' name='${this.options.field || this.options.label}' value='${headerValue}'>
+          <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>
+    `
+    if (this.options.allowClear === true) {
+      html += `
+        <svg class='clear' 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>
+      `
+    }
+    html += `          
+        </div>
+        <div id='${this.elementId}_mask' class='websy-dropdown-mask'></div>
+        <div id='${this.elementId}_content' class='websy-dropdown-content'>
+    `
+    if (this.options.disableSearch !== true) {
+      html += `
+        <input id='${this.elementId}_search' class='websy-dropdown-search' placeholder='${this.options.searchPlaceholder || 'Search'}'>
+      `
+    }
     html += `
-			</div>	
+          <div class='websy-dropdown-items'>
+            <ul id='${this.elementId}_items'>              
+            </ul>
+          </div><!--
+          --><div class='websy-dropdown-custom'></div>
+        </div>
+      </div>
     `
-    el.classList.add('loading')
     el.innerHTML = html
-  }	
-  show (options, override = false) {
-    if (options) {
-      if (override === true) {
-        this.options = Object.assign({}, options)	
-      }
-      else {
-        this.options = Object.assign({}, this.options, options)
-      }
-    }
-    this.render()
+    this.renderItems()
   }
-}
-
-class WebsyNavigationMenu {
-  constructor (elementId, options) {
-    this.options = Object.assign({}, {
-      collapsable: false,
-      orientation: 'horizontal',
-      parentMap: {},
-      childIndentation: 10
-    }, options)
-    if (!elementId) {
-      console.log('No element Id provided for Websy Menu')		
-      return
-    }
-    const el = document.getElementById(elementId)
+  renderItems () {
+    let html = this.options.items.map((r, i) => `
+      <li data-index='${i}' class='websy-dropdown-item ${(r.classes || []).join(' ')} ${this.selectedItems.indexOf(i) !== -1 ? 'active' : ''}'>${r.label}</li>
+    `).join('')
+    const el = document.getElementById(`${this.elementId}_items`)
     if (el) {
-      this.elementId = elementId
-      el.classList.add(`websy-${this.options.orientation}-list-container`)
-      el.classList.add('websy-menu')
-      if (this.options.classes) {
-        this.options.classes.forEach(c => el.classList.add(c))
-      }
-      el.addEventListener('click', this.handleClick.bind(this))	
-      this.render()      
-    }    
-  }
-  handleClick (event) {
-    if (event.target.classList.contains('websy-menu-icon') || 
-      event.target.nodeName === 'svg' ||
-      event.target.nodeName === 'rect') {
-      this.toggleMobileMenu()
-    }
-    if (event.target.classList.contains('trigger-item') &&
-      event.target.classList.contains('websy-menu-header')) {
-      this.toggleMobileMenu('remove')
+      el.innerHTML = html
     }
-    if (event.target.classList.contains('websy-menu-mask')) {
-      this.toggleMobileMenu()
+    let item
+    if (this.selectedItems.length === 1) {
+      item = this.options.items[this.selectedItems[0]]
     }
+    this.updateHeader(item)
   }
-  normaliseString (text) {
-    return text.replace(/-/g, '').replace(/\s/g, '_')
-  }
-  render () {
+  updateHeader (item) {
     const el = document.getElementById(this.elementId)
-    if (el) {
-      let html = ``
-      if (this.options.collapsable === true) {
-        html += `
-          <div id='${this.elementId}_menuIcon' class='websy-menu-icon'>
-            <svg viewbox="0 0 40 40" width="30" height="40">              
-              <rect x="0" y="0" width="30" height="4" rx="2"></rect>
-              <rect x="0" y="12" width="30" height="4" rx="2"></rect>
-              <rect x="0" y="24" width="30" height="4" rx="2"></rect>
-            </svg>
-          </div>
-        `
+    const headerEl = document.getElementById(`${this.elementId}_header`)
+    const headerLabelEl = document.getElementById(`${this.elementId}_headerLabel`)
+    const labelEl = document.getElementById(`${this.elementId}_selectedItems`)
+    const inputEl = document.getElementById(`${this.elementId}_input`)
+    const itemEls = el.querySelectorAll(`.websy-dropdown-item`)
+    for (let i = 0; i < itemEls.length; i++) {
+      itemEls[i].classList.remove('active')
+      if (this.selectedItems.indexOf(i) !== -1) {
+        itemEls[i].classList.add('active')
       }
-      if (this.options.logo) {
-        html += `          
-          <div 
-            class='logo ${(this.options.logo.classes && this.options.logo.classes.join(' ')) || ''}'
-            ${this.options.logo.attributes && this.options.logo.attributes.join(' ')}
-          >
-          <img src='${this.options.logo.url}'></img>
-          </div>
-          <div id='${this.elementId}_mask' class='websy-menu-mask'></div>
-          <div id="${this.elementId}_menuContainer" class="websy-menu-block-container">
-        `
+    }
+    if (headerLabelEl) {
+      headerLabelEl.innerHTML = this.options.label
+    }
+    if (headerEl) {
+      headerEl.classList.remove('one-selected')
+      headerEl.classList.remove('multi-selected')
+      if (this.selectedItems.length === 1) {
+        headerEl.classList.add('one-selected')
       }
-      html += this.renderBlock(this.options.items, 'main', 1)
-      html += `</div>`
-      el.innerHTML = html
-      if (this.options.navigator) {
-        this.options.navigator.registerElements(el)
+      else if (this.selectedItems.length > 1) {
+        if (this.options.showCompleteSelectedList === true) {
+          headerEl.classList.add('one-selected')
+        }
+        else {
+          headerEl.classList.add('multi-selected')
+        }        
       }
     }
-  }
-  renderBlock (items, block, level) {
-    let html = `
-		  <ul class='websy-${this.options.orientation}-list ${(block !== 'main' ? 'websy-menu-collapsed' : '')}' id='${this.elementId}_${block}_list'
-	  `	
-    if (block !== 'main') {
-      html += ` data-collapsed='${(block !== 'main' ? 'true' : 'false')}'`
-    }
-    html += '>'
-    for (let i = 0; i < items.length; i++) {		
-      // update the block to the current item		
-      let selected = '' // items[i].default === true ? 'selected' : ''
-      let active = items[i].default === true ? 'active' : ''
-      let currentBlock = this.normaliseString(items[i].text)	
-      let blockId = items[i].id || 	`${this.elementId}_${currentBlock}_label`
-      html += `
-			<li class='websy-${this.options.orientation}-list-item'>
-				<div class='websy-menu-header ${items[i].classes && items[i].classes.join(' ')} ${selected} ${active}' 
-						 id='${blockId}' 
-						 data-id='${currentBlock}'
-             data-menu-id='${this.elementId}_${currentBlock}_list'
-						 data-popout-id='${level > 1 ? block : currentBlock}'
-						 data-text='${items[i].text}'
-						 style='padding-left: ${level * this.options.childIndentation}px'
-						 ${items[i].attributes && items[i].attributes.join(' ')}
-        >
-      `
-      if (this.options.orientation === 'horizontal') {
-        html += items[i].text
+    if (labelEl) {
+      if (this.selectedItems.length === 1) {
+        labelEl.innerHTML = item.label
+        labelEl.setAttribute('data-info', item.label)
+        inputEl.value = item.value
       }
-      html += `
-          <span class='selected-bar'></span>
-          <span class='active-square'></span>
-          <span class='${items[i].items && items[i].items.length > 0 ? 'menu-carat' : ''}'></span>
-      `
-      if (this.options.orientation === 'vertical') {
-        html += `
-          &nbsp;
-        `
-      }  
-      html += `    
-				</div>
-		  `
-      if (items[i].items) {
-        html += this.renderBlock(items[i].items, currentBlock, level + 1)			
+      else if (this.selectedItems.length > 1) {
+        if (this.options.showCompleteSelectedList === true) {
+          let selectedLabels = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
+          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
+          labelEl.innerHTML = selectedLabels
+          labelEl.setAttribute('data-info', selectedLabels)
+          inputEl.value = selectedValues
+        }
+        else {
+          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
+          labelEl.innerHTML = `${this.selectedItems.length} selected`
+          labelEl.setAttribute('data-info', '')
+          inputEl.value = selectedValues
+        }        
       }
-      // map the item to it's parent
-      if (block && block !== 'main') {
-        if (!this.options.parentMap[currentBlock]) {
-          this.options.parentMap[currentBlock] = block
-        }			
+      else {        
+        labelEl.innerHTML = ''
+        labelEl.setAttribute('data-info', '')
+        inputEl.value = ''
       }
-      html += `
-			</li>
-		`
     }
-    html += `</ul>`
-    return html
-  }
-  toggleOpen () {
-
   }
-  toggleMobileMenu (method) {
-    if (typeof method === 'undefined') {
-      method = 'toggle'
+  updateSelected (index) {
+    if (typeof index !== 'undefined' && index !== null) {
+      let pos = this.selectedItems.indexOf(index)
+      if (pos !== -1) {
+        this.selectedItems.splice(pos, 1)
+      }
+      if (this.options.multiSelect === false) {
+        this.selectedItems = [index]
+      }
+      else {
+        this.selectedItems.push(index)
+      } 
     }    
-    const el = document.getElementById(`${this.elementId}`)
-    if (el) {
-      el.classList[method]('open')
-    }
-    if (this.options.onToggle) {
-      this.options.onToggle(method)
+    const item = this.options.items[index]
+    this.updateHeader(item)
+    if (item && this.options.onItemSelected) {
+      this.options.onItemSelected(item, this.selectedItems, this.options.items)
     }
+    if (this.options.closeAfterSelection === true) {
+      this.close() 
+    }    
   }
 }
 
@@ -564,691 +1121,535 @@ class WebsyForm {
     }    
   }
   validateRecaptcha (token) {
-    this.recaptchaValue = token
-  }
-}
-
-class WebsyDatePicker {
-  constructor (elementId, options) {
-    this.oneDay = 1000 * 60 * 60 * 24
-    this.currentselection = []
-    this.validDates = []
-    const DEFAULTS = {
-      defaultRange: 0,
-      minAllowedDate: this.floorDate(new Date(new Date((new Date().setFullYear(new Date().getFullYear() - 1))).setDate(1))),
-      maxAllowedDate: this.floorDate(new Date((new Date()))),
-      daysOfWeek: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-      monthMap: {
-        0: 'Jan',
-        1: 'Feb',
-        2: 'Mar',
-        3: 'Apr',
-        4: 'May',
-        5: 'Jun',
-        6: 'Jul',
-        7: 'Aug',
-        8: 'Sep',
-        9: 'Oct',
-        10: 'Nov',
-        11: 'Dec'
-      },
-      ranges: []
-    }
-    DEFAULTS.ranges = [
-      {
-        label: 'All Dates',
-        range: [DEFAULTS.minAllowedDate, DEFAULTS.maxAllowedDate]
-      },
-      {
-        label: 'Today',
-        range: [this.floorDate(new Date())]
-      },
-      {
-        label: 'Yesterday',
-        range: [this.floorDate(new Date().setDate(new Date().getDate() - 1))]
-      },
-      {
-        label: 'Last 7 Days',
-        range: [this.floorDate(new Date().setDate(new Date().getDate() - 6)), this.floorDate(new Date())]
-      },
-      {
-        label: 'This Month',
-        range: [this.floorDate(new Date().setDate(1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() + 1) - this.oneDay)]
-      },
-      {
-        label: 'Last Month',
-        range: [this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() - 1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth()) - this.oneDay)]
-      },
-      {
-        label: 'This Year',
-        range: [this.floorDate(new Date(`1/1/${new Date().getFullYear()}`)), this.floorDate(new Date(`12/31/${new Date().getFullYear()}`))]
-      },
-      {
-        label: 'Last Year',
-        range: [this.floorDate(new Date(`1/1/${new Date().getFullYear() - 1}`)), this.floorDate(new Date(`12/31/${new Date().getFullYear() - 1}`))]
-      }
-    ]
-    this.options = Object.assign({}, DEFAULTS, options)
-    this.selectedRange = this.options.defaultRange || 0
-    this.selectedRangeDates = [...this.options.ranges[this.options.defaultRange || 0].range]
-    this.priorSelectedDates = null
-    if (!elementId) {
-      console.log('No element Id provided')
-      return
-    }
-    const el = document.getElementById(elementId)
-    if (el) {
-      this.elementId = elementId
-      el.addEventListener('click', this.handleClick.bind(this))
-      let html = `
-        <div class='websy-date-picker-container'>
-          <span class='websy-dropdown-header-label'>${this.options.label || 'Date'}</span>
-          <div class='websy-date-picker-header'>
-            <span id='${this.elementId}_selectedRange'>${this.options.ranges[this.selectedRange].label}</span>
-            <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>
-          </div>
-          <div id='${this.elementId}_mask' class='websy-date-picker-mask'></div>
-          <div id='${this.elementId}_content' class='websy-date-picker-content'>
-            <div class='websy-date-picker-ranges'>
-              <ul id='${this.elementId}_rangelist'>
-                ${this.renderRanges()}
-              </ul>
-            </div><!--
-            --><div id='${this.elementId}_datelist' class='websy-date-picker-custom'>${this.renderDates()}</div>
-            <div class='websy-dp-button-container'>
-              <button class='websy-btn websy-dp-cancel'>Cancel</button>
-              <button class='websy-btn websy-dp-confirm'>Confirm</button>
-            </div>
-          </div>          
-        </div>
-      `
-      el.innerHTML = html
-      this.render()
-    }
-    else {
-      console.log('No element found with Id', elementId)
-    }
-  }
-  close (confirm) {
-    const maskEl = document.getElementById(`${this.elementId}_mask`)
-    const contentEl = document.getElementById(`${this.elementId}_content`)
-    maskEl.classList.remove('active')
-    contentEl.classList.remove('active')
-    if (confirm === true) {
-      if (this.options.onChange) {
-        this.options.onChange(this.selectedRangeDates)        
-      }
-      this.updateRange()
-    }
-    else {
-      this.selectedRangeDates = [...this.priorSelectedDates]
-      this.selectedRange = this.priorSelectedRange
-    }
-  }
-  floorDate (d) {
-    if (typeof d === 'number') {
-      d = new Date(d)
-    }
-    return new Date(d.setHours(0, 0, 0, 0))
-  }
-  handleClick (event) {
-    if (event.target.classList.contains('websy-date-picker-header')) {
-      this.open()
-    }
-    else if (event.target.classList.contains('websy-date-picker-mask')) {
-      this.close()
-    }
-    else if (event.target.classList.contains('websy-date-picker-range')) {
-      if (event.target.classList.contains('websy-disabled-range')) {
-        return
-      }
-      const index = event.target.getAttribute('data-index')
-      this.selectRange(index)
-      this.updateRange(index)
-    }
-    else if (event.target.classList.contains('websy-dp-date')) {
-      if (event.target.classList.contains('websy-disabled-date')) {
-        return
-      }
-      const timestamp = event.target.id.split('_')[0]
-      this.selectDate(+timestamp)
-    }
-    else if (event.target.classList.contains('websy-dp-confirm')) {
-      this.close(true)
-    }
-    else if (event.target.classList.contains('websy-dp-cancel')) {
-      this.close()
-    }
-  }
-  highlightRange () {
-    const el = document.getElementById(`${this.elementId}_dateList`)
-    const dateEls = el.querySelectorAll('.websy-dp-date')
-    for (let i = 0; i < dateEls.length; i++) {      
-      dateEls[i].classList.remove('selected')
-      dateEls[i].classList.remove('first')
-      dateEls[i].classList.remove('last')
-    }
-    if (this.selectedRange === 0) {
-      return
-    }
-    let daysDiff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay)
-    if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
-      daysDiff += 1
-    }
-    for (let i = 0; i < daysDiff + 1; i++) {
-      let d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))
-      const dateEl = document.getElementById(`${d.getTime()}_date`)
-      if (dateEl) {
-        dateEl.classList.add('selected')
-        if (d.getTime() === this.selectedRangeDates[0].getTime()) {
-          dateEl.classList.add('first')
-        }
-        if (d.getTime() === this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()) {
-          dateEl.classList.add('last')
-        }
-      }
+    this.recaptchaValue = token
+  }
+}
+
+class WebsyLoadingDialog {
+  constructor (elementId, options) {
+    this.options = Object.assign({}, options)				
+    if (!elementId) {
+      console.log('No element Id provided')
+      return
     }
+    this.elementId = elementId
   }
-  open (options, override = false) {
-    const maskEl = document.getElementById(`${this.elementId}_mask`)
-    const contentEl = document.getElementById(`${this.elementId}_content`)
-    maskEl.classList.add('active')
-    contentEl.classList.add('active')
-    this.priorSelectedDates = [...this.selectedRangeDates]
-    this.priorSelectedRange = this.selectedRange
-    this.scrollRangeIntoView()
+  hide () {
+    const el = document.getElementById(this.elementId)
+    el.classList.remove('loading')
+    el.innerHTML = ''
   }
-  render (disabledDates) {
+  render () {
     if (!this.elementId) {
       console.log('No element Id provided for Websy Loading Dialog')	
       return
     }
-    const el = document.getElementById(`${this.elementId}_datelist`)
-    if (el && disabledDates) {
-      el.innerHTML = this.renderDates(disabledDates)
-    }
-    const rangeEl = document.getElementById(`${this.elementId}_rangelist`)
-    if (rangeEl && disabledDates) {
-      rangeEl.innerHTML = this.renderRanges()
+    const el = document.getElementById(this.elementId)
+    let html = `
+			<div class='websy-loading-container ${(this.options.classes || []).join(' ')}'>
+				<div class='websy-ripple'>
+					<div></div>
+					<div></div>
+				</div>
+				<h4>${this.options.title || 'Loading...'}</h4>
+		`
+    if (this.options.messages) {
+      for (let i = 0; i < this.options.messages.length; i++) {
+        html += `<p>${this.options.messages[i]}</p>`
+      }
+    }				
+    html += `
+			</div>	
+    `
+    el.classList.add('loading')
+    el.innerHTML = html
+  }	
+  show (options, override = false) {
+    if (options) {
+      if (override === true) {
+        this.options = Object.assign({}, options)	
+      }
+      else {
+        this.options = Object.assign({}, this.options, options)
+      }
     }
-    this.highlightRange()
+    this.render()
   }
-  renderDates (disabledDates) {
-    let disabled = []
-    this.validDates = []
-    if (disabledDates) {
-      disabled = disabledDates.map(d => d.getTime())
-    }        
-    // first disabled all of the ranges
-    this.options.ranges.forEach(r => (r.disabled = true))
-    let daysDiff = Math.ceil((this.options.maxAllowedDate.getTime() - this.options.minAllowedDate.getTime()) / this.oneDay) + 1
-    let months = {}
-    for (let i = 0; i < daysDiff; i++) {
-      let d = this.floorDate(new Date(this.options.minAllowedDate.getTime() + (i * this.oneDay)))
-      let monthYear = `${this.options.monthMap[d.getMonth()]} ${d.getFullYear()}`
-      if (!months[monthYear]) {
-        months[monthYear] = []
+}
+
+/* global */ 
+class WebsyNavigationMenu {
+  constructor (elementId, options) {
+    this.options = Object.assign({}, {
+      collapsible: false,
+      orientation: 'horizontal',
+      parentMap: {},
+      childIndentation: 10,
+      activeSymbol: 'none'
+    }, options)
+    if (!elementId) {
+      console.log('No element Id provided for Websy Menu')		
+      return
+    }    
+    const el = document.getElementById(elementId)
+    if (el) {
+      this.elementId = elementId
+      this.lowestLevel = 0
+      this.flatItems = []
+      this.itemMap = {}
+      this.flattenItems(0, this.options.items)    
+      console.log(this.flatItems)
+      el.classList.add(`websy-${this.options.orientation}-list-container`)
+      el.classList.add('websy-menu')
+      if (this.options.align) {
+        el.classList.add(`${this.options.align}-align`)
       }
-      if (disabled.indexOf(d.getTime()) === -1) {
-        this.validDates.push(d.getTime())
+      if (Array.isArray(this.options.classes)) {
+        this.options.classes = this.options.classes.join(' ')
       }
-      months[monthYear].push({date: d, dayOfMonth: d.getDate(), dayOfWeek: d.getDay(), id: d.getTime(), disabled: disabled.indexOf(d.getTime()) !== -1})
-    }
-    // check each range to see if it can be enabled
-    for (let i = 0; i < this.options.ranges.length; i++) {
-      const r = this.options.ranges[i]
-      // check the first date
-      if (this.validDates.indexOf(r.range[0].getTime()) !== -1) {
-        r.disabled = false        
+      if (this.options.classes) {
+        this.options.classes.split(' ').forEach(c => el.classList.add(c))
       }
-      else if (r.range[1]) {
-        // check the last date
-        if (this.validDates.indexOf(r.range[1].getTime()) !== -1) {
-          r.disabled = false
-        }
-        else {
-          // check the full range until a match is found
-          for (let i = r.range[0].getTime(); i <= r.range[1].getTime(); i += this.oneDay) {
-            let testDate = this.floorDate(new Date(i))            
-            if (this.validDates.indexOf(testDate.getTime()) !== -1) {
-              r.disabled = false
-              break
-            }          
-          }
-        }                        
-      }      
+      el.addEventListener('click', this.handleClick.bind(this))	
+      this.render()      
     }    
-    let html = ''
-    html += `
-      <ul class='websy-dp-days-header'>
-    `
-    html += this.options.daysOfWeek.map(d => `<li>${d}</li>`).join('')
-    html += `
-      </ul>
-      <div id='${this.elementId}_dateList' class='websy-dp-date-list'>
-    `
-    for (let key in months) {      
-      html += `
-        <div class='websy-dp-month-container'>
-          <span id='${key.replace(/\s/g, '_')}'>${key}</span>
-          <ul>
-      `
-      if (months[key][0].dayOfWeek > 0) {
-        let paddedDays = []
-        for (let i = 0; i < months[key][0].dayOfWeek; i++) {
-          paddedDays.push(`<li>&nbsp;</li>`)          
-        }
-        html += paddedDays.join('')
+  }
+  flattenItems (index, items, level = 0) {
+    if (items[index]) {
+      this.lowestLevel = Math.max(level, this.lowestLevel)
+      items[index].id = items[index].id || 	`${this.elementId}_${this.normaliseString(items[index].text)}`
+      this.itemMap[items[index].id] = items[index]
+      items[index].level = level
+      this.flatItems.push(items[index])
+      if (items[index].items) {
+        this.flattenItems(0, items[index].items, level + 1)  
       }
-      html += months[key].map(d => `<li id='${d.id}_date' class='websy-dp-date ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.dayOfMonth}</li>`).join('')
-      html += `
-          </ul>
-        </div>
-      `
+      this.flattenItems(++index, items, level)
+    }    
+  }
+  handleClick (event) {
+    if (event.target.classList.contains('websy-menu-icon') || 
+      event.target.nodeName === 'svg' ||
+      event.target.nodeName === 'rect') {
+      this.toggleMobileMenu()
+    }
+    if (event.target.classList.contains('websy-menu-header')) {
+      let item = this.itemMap[event.target.id]
+      if (event.target.classList.contains('trigger-item') && item.level === this.lowestLevel) {
+        this.toggleMobileMenu('remove')
+      } 
+      if (item.items) {
+        event.target.classList.toggle('menu-open')
+        this.toggleMenu(item.id)
+      }
+    }    
+    if (event.target.classList.contains('websy-menu-mask')) {
+      this.toggleMobileMenu()
     }
-    html += '</div>'
-    return html
   }
-  renderRanges () {
-    return this.options.ranges.map((r, i) => `
-      <li data-index='${i}' class='websy-date-picker-range ${i === this.selectedRange ? 'active' : ''} ${r.disabled === true ? 'websy-disabled-range' : ''}'>${r.label}</li>
-    `).join('')
+  normaliseString (text) {
+    return text.replace(/-/g, '').replace(/\s/g, '_')
   }
-  scrollRangeIntoView () {    
-    if (this.selectedRangeDates[0]) {
-      const el = document.getElementById(`${this.selectedRangeDates[0].getTime()}_date`)
-      const parentEl = document.getElementById(`${this.elementId}_dateList`)
-      if (el && parentEl) {        
-        parentEl.scrollTo(0, el.offsetTop)
-      } 
+  render () {
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      let html = ``
+      if (this.options.collapsible === true) {
+        html += `
+          <div id='${this.elementId}_menuIcon' class='websy-menu-icon'>
+            <svg viewbox="0 0 40 40" width="30" height="40">              
+              <rect x="0" y="0" width="30" height="4" rx="2"></rect>
+              <rect x="0" y="12" width="30" height="4" rx="2"></rect>
+              <rect x="0" y="24" width="30" height="4" rx="2"></rect>
+            </svg>
+          </div>
+        `
+      }
+      if (this.options.logo) {
+        if (Array.isArray(this.options.logo.classes)) {
+          this.options.logo.classes = this.options.logo.classes.join(' ')
+        }
+        html += `          
+          <div 
+            class='logo ${this.options.logo.classes || ''}'
+            ${this.options.logo.attributes && this.options.logo.attributes.join(' ')}
+          >
+          <img src='${this.options.logo.url}'></img>
+          </div>
+          <div id='${this.elementId}_mask' class='websy-menu-mask'></div>
+          <div id="${this.elementId}_menuContainer" class="websy-menu-block-container">
+        `
+      }
+      html += this.renderBlock(this.options.items, 'main', 0)
+      html += `</div>`
+      el.innerHTML = html
+      if (this.options.navigator) {
+        this.options.navigator.registerElements(el)
+      }
     }
   }
-  selectDate (timestamp) {
-    if (this.currentselection.length === 0) {
-      this.currentselection.push(timestamp)
+  renderBlock (items, block, level = 0) {
+    let html = `
+		  <ul class='websy-${this.options.orientation}-list ${level > 0 ? 'websy-child-list' : ''} ${(block !== 'main' ? 'websy-menu-collapsed' : '')}' id='${this.elementId}_${block}_list'
+	  `	
+    if (block !== 'main') {
+      html += ` data-collapsed='${(block !== 'main' ? 'true' : 'false')}'`
     }
-    else {
-      if (timestamp > this.currentselection[0]) {
-        this.currentselection.push(timestamp)
+    html += '>'
+    for (let i = 0; i < items.length; i++) {		
+      // update the block to the current item		
+      let selected = '' // items[i].default === true ? 'selected' : ''
+      let active = items[i].default === true ? 'active' : ''
+      let currentBlock = this.normaliseString(items[i].text)	
+      let blockId = items[i].id //  || 	`${this.elementId}_${currentBlock}_label`
+      if (Array.isArray(items[i].classes)) {
+        items[i].classes = items[i].classes.join(' ')
+      }
+      html += `
+			<li class='websy-${this.options.orientation}-list-item'>
+				<div class='websy-menu-header ${items[i].classes || ''} ${selected} ${active}' 
+						 id='${blockId}' 
+						 data-id='${currentBlock}'
+             data-menu-id='${this.elementId}_${currentBlock}_list'
+						 data-popout-id='${level > 1 ? block : currentBlock}'
+						 data-text='${items[i].text}'
+						 style='padding-left: ${level * this.options.childIndentation}px'
+						 ${(items[i].attributes && items[i].attributes.join(' ')) || ''}
+        >
+      `
+      if (this.options.orientation === 'horizontal') {
+        html += items[i].text
+      }
+      if (this.options.activeSymbol === 'line') {
+        html += `
+          <span class='selected-bar'></span>
+        `
+      }
+      if (this.options.activeSymbol === 'triangle') {
+        html += `
+          <span class='active-square'></span>
+        `
+      }
+      html += `          
+          <span class='${items[i].items && items[i].items.length > 0 ? 'menu-carat' : ''}'></span>
+      `
+      if (this.options.orientation === 'vertical') {
+        html += `
+          &nbsp;
+        `
+      }  
+      html += `    
+				</div>
+		  `
+      if (items[i].items) {
+        html += this.renderBlock(items[i].items, currentBlock, items[i].level + 1)			
       }
-      else {
-        this.currentselection.splice(0, 0, timestamp)
+      // map the item to it's parent
+      if (block && block !== 'main') {
+        if (!this.options.parentMap[currentBlock]) {
+          this.options.parentMap[currentBlock] = block
+        }			
       }
+      html += `
+			</li>
+		`
     }
-    this.selectedRangeDates = [new Date(this.currentselection[0]), new Date(this.currentselection[1] || this.currentselection[0])]
-    if (this.currentselection.length === 2) {
-      this.currentselection = [] 
-    }    
-    this.selectedRange = -1
-    this.highlightRange()
-  }
-  selectRange (index) {
-    if (this.options.ranges[index]) {
-      this.selectedRangeDates = [...this.options.ranges[index].range]
-      this.selectedRange = +index
-      this.highlightRange()      
-      this.close(true)
-    }
-  }
-  selectCustomRange (range) {
-    this.selectedRange = -1
-    this.selectedRangeDates = range
-    this.highlightRange()
-    this.updateRange()
-  }
-  setDateBounds (range) {
-    if (this.options.ranges[0].label === 'All Dates') {
-      this.options.ranges[0].range = [range[0], range[1] || range[0]]
+    html += `</ul>`
+    return html
+  }  
+  toggleMenu (id) {
+    const el = document.getElementById(`${id}_list`)
+    if (el) {
+      el.classList.toggle('websy-menu-collapsed')
     }
-    this.options.minAllowedDate = range[0]
-    this.options.maxAllowedDate = range[1] || range[0]
   }
-  updateRange () {    
-    let range
-    if (this.selectedRange === -1) {
-      let start = this.selectedRangeDates[0].toLocaleDateString()
-      let end = ''
-      if (this.selectedRangeDates[1] && (this.selectedRangeDates[0].getTime() !== this.selectedRangeDates[1].getTime())) {
-        end = ` - ${this.selectedRangeDates[1].toLocaleDateString()}`
-      }      
-      range = { label: `${start}${end}` }
-    }
-    else {
-      range = this.options.ranges[this.selectedRange]
+  toggleMobileMenu (method) {
+    if (typeof method === 'undefined') {
+      method = 'toggle'
     }    
-    const el = document.getElementById(this.elementId)
-    const labelEl = document.getElementById(`${this.elementId}_selectedRange`)
-    const rangeEls = el.querySelectorAll(`.websy-date-picker-range`)
-    for (let i = 0; i < rangeEls.length; i++) {
-      rangeEls[i].classList.remove('active')
-      if (i === this.selectedRange) {
-        rangeEls[i].classList.add('active')
-      }
+    const el = document.getElementById(`${this.elementId}`)
+    if (el) {
+      el.classList[method]('open')
     }
-    if (labelEl) {
-      labelEl.innerHTML = range.label      
+    if (this.options.onToggle) {
+      this.options.onToggle(method)
     }
   }
 }
 
-Date.prototype.floor = function () {
-  return new Date(`${this.getMonth() + 1}/${this.getDate()}/${this.getFullYear()}`)
-}
-
-/* global WebsyUtils */ 
-class WebsyDropdown {
+/* global WebsyDesigns Blob */ 
+class WebsyPDFButton {
   constructor (elementId, options) {
     const DEFAULTS = {
-      multiSelect: false,
-      multiValueDelimiter: ',',
-      allowClear: true,
-      style: 'plain',
-      items: [],
-      label: '',
-      disabled: false,
-      minSearchCharacters: 2,
-      showCompleteSelectedList: false,
-      closeAfterSelection: true
-    }
-    this.options = Object.assign({}, DEFAULTS, options)    
-    this.tooltipTimeoutFn = null
-    this._originalData = []
-    this.selectedItems = this.options.selectedItems || []
-    if (!elementId) {
-      console.log('No element Id provided')
-      return
+      classes: [],
+      wait: 0,
+      buttonText: 'Download',
+      directDownload: false
     }
-    const el = document.getElementById(elementId)
+    this.elementId = elementId
+    this.options = Object.assign({}, DEFAULTS, options)
+    this.service = new WebsyDesigns.APIService('/pdf')
+    const el = document.getElementById(this.elementId)
     if (el) {
-      this.elementId = elementId
       el.addEventListener('click', this.handleClick.bind(this))
-      el.addEventListener('keyup', this.handleKeyUp.bind(this))
-      el.addEventListener('mouseout', this.handleMouseOut.bind(this))
-      el.addEventListener('mousemove', this.handleMouseMove.bind(this))
-      this.render()
-    }
-    else {
-      console.log('No element found with Id', elementId)
-    }
-  }
-  set selections (d) {
-    this.selectedItems = d || []    
-  }
-  set data (d) {
-    this.options.items = d || []    
-    const el = document.getElementById(`${this.elementId}_items`)
-    if (el.childElementCount === 0) {
-      this.render()
-    }
-    else {
-      if (this.options.items.length === 0) {
-        this.options.items = [{label: this.options.noItemsText || 'No Items'}]
+      if (options.html) {
+        el.innerHTML = options.html
+      }
+      else {
+        el.innerHTML = `
+          <!--<form style='display: none;' id='${this.elementId}_form' action='/pdf' method='POST'>
+            <input id='${this.elementId}_pdfHeader' value='' name='header'>
+            <input id='${this.elementId}_pdfHTML' value='' name='html'>
+            <input id='${this.elementId}_pdfFooter' value='' name='footer'>
+          </form>-->
+          <button class='websy-btn websy-pdf-button ${this.options.classes.join(' ')}'>
+            Create PDF
+            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                viewBox="0 0 184.153 184.153" style="enable-background:new 0 0 184.153 184.153;" xml:space="preserve">
+              <g>
+                <g>
+                  <g>
+                    <path d="M129.318,0H26.06c-1.919,0-3.475,1.554-3.475,3.475v177.203c0,1.92,1.556,3.475,3.475,3.475h132.034
+                      c1.919,0,3.475-1.554,3.475-3.475V34.131C161.568,22.011,140.771,0,129.318,0z M154.62,177.203H29.535V6.949h99.784
+                      c7.803,0,25.301,18.798,25.301,27.182V177.203z"/>
+                    <path d="M71.23,76.441c15.327,0,27.797-12.47,27.797-27.797c0-15.327-12.47-27.797-27.797-27.797
+                      c-15.327,0-27.797,12.47-27.797,27.797C43.433,63.971,55.902,76.441,71.23,76.441z M71.229,27.797
+                      c11.497,0,20.848,9.351,20.848,20.847c0,0.888-0.074,1.758-0.183,2.617l-18.071-2.708L62.505,29.735
+                      C65.162,28.503,68.112,27.797,71.229,27.797z M56.761,33.668l11.951,19.869c0.534,0.889,1.437,1.49,2.462,1.646l18.669,2.799
+                      c-3.433,6.814-10.477,11.51-18.613,11.51c-11.496,0-20.847-9.351-20.847-20.847C50.381,42.767,52.836,37.461,56.761,33.668z"/>
+                    <rect x="46.907" y="90.339" width="73.058" height="6.949"/>
+                    <rect x="46.907" y="107.712" width="48.644" height="6.949"/>
+                    <rect x="46.907" y="125.085" width="62.542" height="6.949"/>
+                  </g>
+                </g>
+              </g>              
+            </svg>
+          </button>          
+          <div id='${this.elementId}_loader'></div>
+          <div id='${this.elementId}_popup'></div>
+        `
+        this.loader = new WebsyDesigns.WebsyLoadingDialog(`${this.elementId}_loader`, { classes: ['global-loader'] })
+        this.popup = new WebsyDesigns.WebsyPopupDialog(`${this.elementId}_popup`)
+        // const formEl = document.getElementById(`${this.elementId}_form`)
+        // if (formEl) {
+        //   formEl.addEventListener('load', () => {
+        //     this.loader.hide()
+        //   })
+        // }        
       }
-      this.renderItems()
-    }    
-  }
-  get data () {
-    return this.options.items
-  }
-  clearSelected () {
-    this.selectedItems = []
-    this.updateHeader()
-    if (this.options.onClearSelected) {
-      this.options.onClearSelected()
-    }
-  }
-  close () {
-    const maskEl = document.getElementById(`${this.elementId}_mask`)
-    const contentEl = document.getElementById(`${this.elementId}_content`)
-    maskEl.classList.remove('active')
-    contentEl.classList.remove('active')
-    contentEl.classList.remove('on-top')
-    const searchEl = document.getElementById(`${this.elementId}_search`)
-    if (searchEl) {
-      if (searchEl.value.length > 0 && this.options.onCancelSearch) {            
-        this.options.onCancelSearch('')
-        searchEl.value = ''
-      }      
     }
   }
   handleClick (event) {
-    if (this.options.disabled === true) {
-      return
-    }
-    if (event.target.classList.contains('websy-dropdown-header')) {
-      this.open()
+    if (event.target.classList.contains('websy-pdf-button')) {
+      this.loader.show()
+      setTimeout(() => {        
+        if (this.options.targetId) {
+          const el = document.getElementById(this.options.targetId)
+          if (el) {
+            const pdfData = { options: {} }
+            if (this.options.pdfOptions) {
+              pdfData.options = Object.assign({}, this.options.pdfOptions)
+            }
+            if (this.options.header) {
+              if (this.options.header.elementId) {
+                const headerEl = document.getElementById(this.options.header.elementId)
+                if (headerEl) {
+                  pdfData.header = headerEl.outerHTML  
+                  if (this.options.header.css) {
+                    pdfData.options.headerCSS = this.options.header.css
+                  }
+                }
+              }
+              else if (this.options.header.html) {
+                pdfData.header = this.options.header.html
+                if (this.options.header.css) {
+                  pdfData.options.headerCSS = this.options.header.css
+                }
+              }
+              else {
+                pdfData.header = this.options.header
+              }
+            }
+            if (this.options.footer) {
+              if (this.options.footer.elementId) {
+                const footerEl = document.getElementById(this.options.footer.elementId)
+                if (footerEl) {
+                  pdfData.footer = footerEl.outerHTML  
+                  if (this.options.footer.css) {
+                    pdfData.options.footerCSS = this.options.footer.css
+                  }
+                }
+              }
+              else {
+                pdfData.footer = this.options.footer
+              }
+            }
+            pdfData.html = el.outerHTML
+            // document.getElementById(`${this.elementId}_pdfHeader`).value = pdfData.header
+            // document.getElementById(`${this.elementId}_pdfHTML`).value = pdfData.html
+            // document.getElementById(`${this.elementId}_pdfFooter`).value = pdfData.footer
+            // document.getElementById(`${this.elementId}_form`).submit()
+            this.service.add('', pdfData, {responseType: 'blob'}).then(response => {
+              this.loader.hide()
+              const blob = new Blob([response], {type: 'application/pdf'})
+              let msg = `
+                <div class='text-center websy-pdf-download'>
+                  <div>Your file is ready to download</div>
+                  <a href='${URL.createObjectURL(blob)}' target='_blank'
+              `
+              if (this.options.directDownload === true) {
+                msg += `download='${this.options.fileName || 'Export'}.pdf'`
+              }
+              msg += `
+                  >
+                    <button class='websy-btn download-pdf'>${this.options.buttonText}</button>
+                  </a>
+                </div>
+              `
+              this.popup.show({
+                message: msg,
+                mask: true
+              })
+            }, err => {
+              console.error(err)
+            })
+          }
+        } 
+      }, this.options.wait)           
     }
-    else if (event.target.classList.contains('websy-dropdown-mask')) {
-      this.close()
+    else if (event.target.classList.contains('download-pdf')) {
+      this.popup.hide()
+      if (this.options.onClose) {
+        this.options.onClose()
+      }
     }
-    else if (event.target.classList.contains('websy-dropdown-item')) {
-      const index = event.target.getAttribute('data-index')
-      this.updateSelected(+index)
+  }
+  render () {
+    // 
+  }
+}
+
+class WebsyPopupDialog {
+  constructor (elementId, options) {
+    this.DEFAULTS = {
+      buttons: []
     }
-    else if (event.target.classList.contains('clear')) {
-      this.clearSelected()
+    this.options = Object.assign({}, this.DEFAULTS, options)
+    if (!elementId) {
+      console.log('No element Id provided for Websy Popup')		
+      return
     }
+    this.closeOnOutsideClick = true
+    const el = document.getElementById(elementId)
+    this.elementId = elementId
+    el.addEventListener('click', this.handleClick.bind(this))			
   }
-  handleKeyUp (event) {
-    if (event.target.classList.contains('websy-dropdown-search')) {
-      if (this._originalData.length === 0) {
-        this._originalData = [...this.options.items]
-      }
-      if (event.target.value.length >= this.options.minSearchCharacters) {
-        if (event.key === 'Enter') {
-          if (this.options.onConfirmSearch) {
-            this.options.onConfirmSearch(event.target.value)
-            event.target.value = ''
-          }
-        }
-        else if (event.key === 'Escape') {
-          if (this.options.onCancelSearch) {            
-            this.options.onCancelSearch(event.target.value)
-            event.target.value = ''
-          }
-          else {
-            this.data = this._originalData
-            this._originalData = []
-          }
-        }
-        else {
-          if (this.options.onSearch) {
-            this.options.onSearch(event.target.value)
-          }
-          else {
-            this.data = this._originalData.filter(d => d.label.toLowerCase().indexOf(event.target.value.toLowerCase()) !== -1)
+  hide () {
+    const el = document.getElementById(this.elementId)
+    el.innerHTML = ''
+  }
+  handleClick (event) {		
+    if (event.target.classList.contains('websy-btn')) {
+      const buttonIndex = event.target.getAttribute('data-index')
+      const buttonInfo = this.options.buttons[buttonIndex]            
+      if (buttonInfo && buttonInfo.fn) {
+        if (typeof this.options.collectData !== 'undefined') {
+          const collectEl = document.getElementById(`${this.elementId}_collect`)
+          if (collectEl) {
+            buttonInfo.collectedData = collectEl.value
           }
         }
-      }
-      else {
-        if (this.options.onCancelSearch) {            
-          this.options.onCancelSearch(event.target.value)
+        if (buttonInfo.preventClose !== true) {
+          this.hide()
         }
+        buttonInfo.fn(buttonInfo)
       }
-    }
-  }
-  handleMouseMove (event) {  
-    if (this.tooltipTimeoutFn) {
-      event.target.classList.remove('websy-delayed')
-      event.target.classList.remove('websy-delayed-info')
-      if (event.target.children[1]) {
-        event.target.children[1].classList.remove('websy-delayed-info')
-      }
-      clearTimeout(this.tooltipTimeoutFn)
-    }  
-    if (event.target.tagName === 'LI') {
-      this.tooltipTimeoutFn = setTimeout(() => {
-        event.target.classList.add('websy-delayed')        
-      }, 500)  
-    }
-    if (event.target.classList.contains('websy-dropdown-header') && event.target.children[1]) {
-      this.tooltipTimeoutFn = setTimeout(() => {
-        event.target.children[1].classList.add('websy-delayed-info')
-      }, 500)  
-    }
-  }
-  handleMouseOut (event) {
-    if (this.tooltipTimeoutFn) {
-      event.target.classList.remove('websy-delayed')
-      event.target.classList.remove('websy-delayed-info')
-      if (event.target.children[1]) {
-        event.target.children[1].classList.remove('websy-delayed-info')
+      else if (buttonInfo && buttonInfo.preventClose !== true) {
+        this.hide()
       }
-      clearTimeout(this.tooltipTimeoutFn)
-    }
-  }
-  open (options, override = false) {
-    const maskEl = document.getElementById(`${this.elementId}_mask`)
-    const contentEl = document.getElementById(`${this.elementId}_content`)
-    maskEl.classList.add('active')
-    contentEl.classList.add('active')
-    if (WebsyUtils.getElementPos(contentEl).bottom > window.innerHeight) {
-      contentEl.classList.add('on-top')
     }
-    if (this.options.disableSearch !== true) {
-      const searchEl = document.getElementById(`${this.elementId}_search`)
-      if (searchEl) {
-        searchEl.focus()
-      }
+    else if (this.closeOnOutsideClick === true) {
+      this.hide()
     }
   }
   render () {
     if (!this.elementId) {
-      console.log('No element Id provided for Websy Dropdown')	
+      console.log('No element Id provided for Websy Popup')	
       return
     }
     const el = document.getElementById(this.elementId)
-    const headerLabel = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
-    const headerValue = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
-    let html = `
-      <div class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''}'>
-        <div id='${this.elementId}_header' class='websy-dropdown-header ${this.selectedItems.length === 1 ? 'one-selected' : ''} ${this.options.allowClear === true ? 'allow-clear' : ''}'>
-          <span id='${this.elementId}_headerLabel' class='websy-dropdown-header-label'>${this.options.label}</span>
-          <span data-info='${headerLabel}' class='websy-dropdown-header-value' id='${this.elementId}_selectedItems'>${headerLabel}</span>
-          <input class='dropdown-input' id='${this.elementId}_input' name='${this.options.field || this.options.label}' value='${headerValue}'>
-          <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>
-    `
-    if (this.options.allowClear === true) {
-      html += `
-        <svg class='clear' 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>
-      `
-    }
-    html += `          
-        </div>
-        <div id='${this.elementId}_mask' class='websy-dropdown-mask'></div>
-        <div id='${this.elementId}_content' class='websy-dropdown-content'>
-    `
-    if (this.options.disableSearch !== true) {
-      html += `
-        <input id='${this.elementId}_search' class='websy-dropdown-search' placeholder='${this.options.searchPlaceholder || 'Search'}'>
-      `
+    let html = ''
+    if (this.options.mask === true) {
+      html += `<div class='websy-mask'></div>`
     }
     html += `
-          <div class='websy-dropdown-items'>
-            <ul id='${this.elementId}_items'>              
-            </ul>
-          </div><!--
-          --><div class='websy-dropdown-custom'></div>
-        </div>
-      </div>
-    `
-    el.innerHTML = html
-    this.renderItems()
-  }
-  renderItems () {
-    let html = this.options.items.map((r, i) => `
-      <li data-index='${i}' class='websy-dropdown-item ${this.selectedItems.indexOf(i) !== -1 ? 'active' : ''}'>${r.label}</li>
-    `).join('')
-    const el = document.getElementById(`${this.elementId}_items`)
-    if (el) {
-      el.innerHTML = html
-    }
-    let item
-    if (this.selectedItems.length === 1) {
-      item = this.options.items[this.selectedItems[0]]
-    }
-    this.updateHeader(item)
-  }
-  updateHeader (item) {
-    const el = document.getElementById(this.elementId)
-    const headerEl = document.getElementById(`${this.elementId}_header`)
-    const headerLabelEl = document.getElementById(`${this.elementId}_headerLabel`)
-    const labelEl = document.getElementById(`${this.elementId}_selectedItems`)
-    const inputEl = document.getElementById(`${this.elementId}_input`)
-    const itemEls = el.querySelectorAll(`.websy-dropdown-item`)
-    for (let i = 0; i < itemEls.length; i++) {
-      itemEls[i].classList.remove('active')
-      if (this.selectedItems.indexOf(i) !== -1) {
-        itemEls[i].classList.add('active')
-      }
+			<div class='websy-popup-dialog-container'>
+				<div class='websy-popup-dialog'>
+		`
+    if (this.options.title) {
+      html += `<h1>${this.options.title}</h1>`
     }
-    if (headerLabelEl) {
-      headerLabelEl.innerHTML = this.options.label
+    if (this.options.message) {
+      html += `<p>${this.options.message}</p>`
     }
-    if (headerEl) {
-      headerEl.classList.remove('one-selected')
-      headerEl.classList.remove('multi-selected')
-      if (this.selectedItems.length === 1) {
-        headerEl.classList.add('one-selected')
-      }
-      else if (this.selectedItems.length > 1) {
-        if (this.options.showCompleteSelectedList === true) {
-          headerEl.classList.add('one-selected')
-        }
-        else {
-          headerEl.classList.add('multi-selected')
-        }        
-      }
+    if (typeof this.options.collectData !== 'undefined') {
+      html += `
+        <div>
+          <input id="${this.elementId}_collect" class="websy-input" value="${typeof this.options.collectData === 'boolean' ? '' : this.options.collectData}" placeholder="${this.options.collectPlaceholder || ''}">
+        </div>
+      `
     }
-    if (labelEl) {
-      if (this.selectedItems.length === 1) {
-        labelEl.innerHTML = item.label
-        labelEl.setAttribute('data-info', item.label)
-        inputEl.value = item.value
-      }
-      else if (this.selectedItems.length > 1) {
-        if (this.options.showCompleteSelectedList === true) {
-          let selectedLabels = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
-          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
-          labelEl.innerHTML = selectedLabels
-          labelEl.setAttribute('data-info', selectedLabels)
-          inputEl.value = selectedValues
-        }
-        else {
-          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
-          labelEl.innerHTML = `${this.selectedItems.length} selected`
-          labelEl.setAttribute('data-info', '')
-          inputEl.value = selectedValues
-        }        
-      }
-      else {        
-        labelEl.innerHTML = ''
-        labelEl.setAttribute('data-info', '')
-        inputEl.value = ''
+    this.closeOnOutsideClick = true
+    if (this.options.buttons) {
+      if (this.options.allowCloseOnOutsideClick !== true) {
+        this.closeOnOutsideClick = false
+      }			
+      html += `<div class='websy-popup-button-panel'>`
+      for (let i = 0; i < this.options.buttons.length; i++) {				
+        html += `
+					<button class='websy-btn ${(this.options.buttons[i].classes || []).join(' ')}' data-index='${i}'>
+						${this.options.buttons[i].label}
+					</button>
+				`
       }
+      html += `</div>`
     }
+    html += `
+				</div>
+			</div>
+		`
+    el.innerHTML = html		
   }
-  updateSelected (index) {
-    if (typeof index !== 'undefined' && index !== null) {
-      let pos = this.selectedItems.indexOf(index)
-      if (pos !== -1) {
-        this.selectedItems.splice(pos, 1)
-      }
-      if (this.options.multiSelect === false) {
-        this.selectedItems = [index]
-      }
-      else {
-        this.selectedItems.push(index)
-      } 
-    }    
-    const item = this.options.items[index]
-    this.updateHeader(item)
-    if (item && this.options.onItemSelected) {
-      this.options.onItemSelected(item, this.selectedItems, this.options.items)
+  show (options) {
+    if (options) {
+      this.options = Object.assign({}, this.DEFAULTS, options)
     }
-    if (this.options.closeAfterSelection === true) {
-      this.close() 
-    }    
+    this.render()
+  }
+}
+
+class WebsyPubSub {
+  constructor (elementId, options) {
+    this.options = Object.assign({}, options)
+    if (!elementId) {
+      console.log('No element Id provided')
+      return
+    }
+    this.elementId = elementId
+    this.subscriptions = {}
+  }
+  publish (method, data) {
+    if (this.subscriptions[method]) {
+      this.subscriptions[method].forEach(fn => {
+        fn(data)
+      })
+    }
+  }
+  subscribe (method, fn) {
+    if (!this.subscriptions[method]) {
+      this.subscriptions[method] = []
+    }
+    this.subscriptions[method].push(fn)
   }
 }
 
@@ -1404,223 +1805,55 @@ class WebsyResultList {
     for (let i = 0; i < this.rows.length; i++) {
       if (this.rows[i].id === id) {
         return this.rows[i]
-      }      
-    }
-    return null
-  }
-  handleClick (event) {    
-    if (event.target.classList.contains('clickable')) {
-      let l = event.target.getAttribute('data-event')
-      if (l) {
-        l = l.split('(')
-        let params = []
-        const id = event.target.getAttribute('data-id')
-        if (l[1]) {
-          l[1] = l[1].replace(')', '')
-          params = l[1].split(',')      
-        }
-        l = l[0]
-        params = params.map(p => {
-          if (typeof p !== 'string' && typeof p !== 'number') {
-            if (this.rows[+id]) {
-              p = this.rows[+id][p]
-            }
-          }
-          else if (typeof p === 'string') {
-            p = p.replace(/"/g, '').replace(/'/g, '')
-          }
-          return p
-        })
-        if (event.target.classList.contains('clickable') && this.options.listeners.click[l]) {      
-          event.stopPropagation()
-          this.options.listeners.click[l].call(this, event, this.rows[+id], ...params)
-        }  
-      }
-    }
-  }
-  render () {
-    if (this.options.entity) {
-      this.apiService.get(this.options.entity).then(results => {
-        this.rows = results.rows  
-        this.resize()
-      })
-    }
-    else {
-      this.resize()
-    }
-  }
-  resize () {
-    const html = this.buildHTML(this.rows)
-    const el = document.getElementById(this.elementId)
-    el.innerHTML = html.replace(/\n/g, '')    
-  }
-}
-
-/* global WebsyDesigns */ 
-class WebsyTemplate {
-  constructor (elementId, options) {
-    const DEFAULTS = {
-      listeners: {
-        click: {}
-      }
-    }
-    this.options = Object.assign({}, DEFAULTS, options)
-    this.elementId = elementId
-    this.templateService = new WebsyDesigns.APIService('')
-    if (!elementId) {
-      console.log('No element Id provided for Websy Template')		
-      return
-    }
-    const el = document.getElementById(elementId)
-    if (el) {
-      el.addEventListener('click', this.handleClick.bind(this))
-    }
-    if (typeof options.template === 'object' && options.template.url) {
-      this.templateService.get(options.template.url).then(templateString => {
-        this.options.template = templateString
-        this.render()        
-      })
-    }
-    else {
-      this.render()      
-    }    
-  }
-  buildHTML () {
-    let html = ``
-    if (this.options.template) {            
-      let template = this.options.template
-      // find conditional elements
-      let ifMatches = [...template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g)]
-      ifMatches.forEach(m => {
-        // get the condition
-        if (m[0] && m.index > -1) {
-          let conditionMatch = m[0].match(/(\scondition=["|']\w.+)["|']/g)
-          if (conditionMatch && conditionMatch[0]) {
-            let c = conditionMatch[0].trim().replace('condition=', '')
-            if (c.split('')[0] === '"') {
-              c = c.replace(/"/g, '')
-            }
-            else if (c.split('')[0] === '\'') {
-              c = c.replace(/'/g, '')
-            }
-            let parts = []
-            let polarity = true
-            if (c.indexOf('===') !== -1) {
-              parts = c.split('===')
-            }
-            else if (c.indexOf('!==') !== -1) {
-              parts = c.split('!==')
-              polarity = false
-            }
-            else if (c.indexOf('==') !== -1) {
-              parts = c.split('==')
-            }
-            else if (c.indexOf('!=') !== -1) {
-              parts = c.split('!=')
-              polarity = false
-            }
-            let removeAll = true
-            if (parts.length === 2) {
-              if (!isNaN(parts[1])) {
-                parts[1] = +parts[1]
-              }
-              if (parts[1] === 'true') {
-                parts[1] = true
-              }
-              if (parts[1] === 'false') {
-                parts[1] = false
-              }
-              if (typeof parts[1] === 'string') {
-                if (parts[1].indexOf('"') !== -1) {
-                  parts[1] = parts[1].replace(/"/g, '')
-                }
-                else if (parts[1].indexOf('\'') !== -1) {
-                  parts[1] = parts[1].replace(/'/g, '')
-                } 
-              }
-              if (polarity === true) {
-                if (typeof this.options.data[parts[0]] !== 'undefined' && this.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 this.options.data[parts[0]] !== 'undefined' && this.options.data[parts[0]] !== parts[1]) {
-                  // remove the <if> tags
-                  removeAll = false
-                }
-              }                                                
-            }
-            if (removeAll === true) {
-              // remove the whole markup                
-              template = template.replace(m[0], '')
-            }
-            else {
-              // remove the <if> tags
-              let newMarkup = m[0]
-              newMarkup = newMarkup.replace('</if>', '').replace(/<\s*if[^>]*>/g, '')
-              template = template.replace(m[0], newMarkup) 
-            }
-          }
-        }
-      })
-      let tagMatches = [...template.matchAll(/(\sdata-event=["|']\w.+)["|']/g)]
-      tagMatches.forEach(m => {
-        if (m[0] && m.index > -1) {
-          template = template.replace(m[0], `${m[0]}`)
-        }
-      })
-      for (let key in this.options.data) {
-        let rg = new RegExp(`{${key}}`, 'gm')
-        if (rg) {
-          template = template.replace(rg, this.options.data[key])
-        }                                    
-      } 
-      html = template     
-    }
-    return html
-  }
-  handleClick (event) {
-    // 
-  }
-  render () {
-    this.resize()
-  }
-  resize () {    
-    const html = this.buildHTML()
-    const el = document.getElementById(this.elementId)
-    el.innerHTML = html.replace(/\n/g, '')
-    if (this.options.readyCallbackFn) {
-      this.options.readyCallbackFn()
+      }      
     }
+    return null
   }
-}
-
-class WebsyPubSub {
-  constructor (elementId, options) {
-    this.options = Object.assign({}, options)
-    if (!elementId) {
-      console.log('No element Id provided')
-      return
+  handleClick (event) {    
+    if (event.target.classList.contains('clickable')) {
+      let l = event.target.getAttribute('data-event')
+      if (l) {
+        l = l.split('(')
+        let params = []
+        const id = event.target.getAttribute('data-id')
+        if (l[1]) {
+          l[1] = l[1].replace(')', '')
+          params = l[1].split(',')      
+        }
+        l = l[0]
+        params = params.map(p => {
+          if (typeof p !== 'string' && typeof p !== 'number') {
+            if (this.rows[+id]) {
+              p = this.rows[+id][p]
+            }
+          }
+          else if (typeof p === 'string') {
+            p = p.replace(/"/g, '').replace(/'/g, '')
+          }
+          return p
+        })
+        if (event.target.classList.contains('clickable') && this.options.listeners.click[l]) {      
+          event.stopPropagation()
+          this.options.listeners.click[l].call(this, event, this.rows[+id], ...params)
+        }  
+      }
     }
-    this.elementId = elementId
-    this.subscriptions = {}
   }
-  publish (method, data) {
-    if (this.subscriptions[method]) {
-      this.subscriptions[method].forEach(fn => {
-        fn(data)
+  render () {
+    if (this.options.entity) {
+      this.apiService.get(this.options.entity).then(results => {
+        this.rows = results.rows  
+        this.resize()
       })
     }
-  }
-  subscribe (method, fn) {
-    if (!this.subscriptions[method]) {
-      this.subscriptions[method] = []
+    else {
+      this.resize()
     }
-    this.subscriptions[method].push(fn)
+  }
+  resize () {
+    const html = this.buildHTML(this.rows)
+    const el = document.getElementById(this.elementId)
+    el.innerHTML = html.replace(/\n/g, '')    
   }
 }
 
@@ -1628,16 +1861,17 @@ class WebsyPubSub {
 class WebsyRouter {
   constructor (options) {
     const defaults = {
-      triggerClass: 'trigger-item',
-      triggerToggleClass: 'trigger-toggle',
-      viewClass: 'view',
+      triggerClass: 'websy-trigger',
+      triggerToggleClass: 'websy-trigger-toggle',
+      viewClass: 'websy-view',
       activeClass: 'active',
       viewAttribute: 'data-view',
       groupAttribute: 'data-group',
       parentAttribute: 'data-parent',
       defaultView: '',
       defaultGroup: 'main',
-      subscribers: { show: [], hide: [] }
+      subscribers: { show: [], hide: [] },
+      persistentParameters: false
     }  
     this.triggerIdList = []
     this.viewIdList = []    
@@ -1653,27 +1887,40 @@ class WebsyRouter {
     window.addEventListener('keyup', this.handleKeyUp.bind(this))
     window.addEventListener('focus', this.handleFocus.bind(this))
     window.addEventListener('click', this.handleClick.bind(this))
-    this.options = Object.assign({}, defaults, options)
-    // add any necessary CSS if the viewClass has been changed
-    if (this.options.viewClass !== defaults.viewClass || this.options.activeClass !== defaults.activeClass) {
-      let style = `
-        <style>
-          .${this.options.viewClass}{ display: none; }
-          .${this.options.viewClass}.${this.options.activeClass}{ display: initial; }
-          .${this.options.triggerClass}{cursor: pointer;}
-        </style>
-      `
-      document.querySelector('head').innerHTML += style
-    }    
-    // this.navigate(this.currentPath, this.options.defaultGroup)
+    this.options = Object.assign({}, defaults, options)  
+    if (this.options.onShow) {
+      this.on('show', this.options.onShow)
+    }  
+    if (this.options.onHide) {
+      this.on('hide', this.options.onHide)
+    }  
+    this.init()
   }
   addGroup (group) {
     if (!this.groups[group]) {
-      this.groups[group] = {
-        activeView: ''
-      }
+      const els = document.querySelectorAll(`.websy-view[data-group="${group}"]`)
+      if (els) {
+        console.log('els', els)
+        this.getClosestParent(els[0], parent => {
+          this.groups[group] = {
+            activeView: '',
+            views: [],
+            parent: parent.getAttribute('data-view')
+          }          
+        })  
+      }           
     }
   }
+  getClosestParent (el, callbackFn) {
+    if (el && el.parentElement) {
+      if (el.parentElement.attributes['data-view'] || el.tagName === 'BODY') {
+        callbackFn(el.parentElement)
+      }
+      else {
+        this.getClosestParent(el.parentElement, callbackFn)
+      } 
+    }    
+  }
   addUrlParams (params) {    
     if (typeof params === 'undefined') {
       return
@@ -1707,6 +1954,25 @@ class WebsyRouter {
     }
     return path.join('&')
   }
+  checkChildGroups (parent) {
+    if (!this.groups) {
+      this.groups = {}
+    }
+    const parentEl = document.querySelector(`.websy-view[data-view="${parent}"]`)
+    if (parentEl) {
+      const els = parentEl.querySelectorAll(`.websy-view[data-group]`)
+      for (let i = 0; i < els.length; i++) {
+        const g = els[i].getAttribute('data-group')
+        const v = els[i].getAttribute('data-view')
+        if (!this.groups[g]) {
+          this.addGroup(g)
+        }
+        if (this.groups[g].views.indexOf(v) === -1) {
+          this.groups[g].views.push(v)
+        }
+      }      
+    }
+  }
   formatParams (params) {
     const output = {
       path: params,
@@ -1734,11 +2000,15 @@ class WebsyRouter {
     return `${item}_${value.join('')}`
   }
   getActiveViewsFromParent (parent) {
-    let views = []
+    let views = []    
+    this.checkChildGroups(parent)
     for (let g in this.groups) {
       if (this.groups[g].parent === parent) {
         if (this.groups[g].activeView) {
-          views.push(this.groups[g].activeView)
+          views.push({view: this.groups[g].activeView, group: g})
+        }
+        else {
+          views.push({view: this.groups[g].views[0], group: g})
         }        
       }
     }
@@ -1753,7 +2023,7 @@ class WebsyRouter {
     }
   }
   init () {
-    this.registerElements(document)
+    // this.registerElements(document)
     let view = ''    
     let params = this.formatParams(this.queryParams)
     let url
@@ -1793,85 +2063,116 @@ class WebsyRouter {
   handleKeyUp (event) {
     this.controlPressed = false  
   }
-  hideView (view, group) {
-    this.hideTriggerItems(view, group)
-    this.hideViewItems(view, group)    
-    if (group === this.options.defaultGroup) {
-      let children = document.getElementsByClassName(`parent-${view}`)
-      if (children) {
-        for (let c = 0; c < children.length; c++) {
-          if (children[c].classList.contains(this.options.viewClass)) {
-            let viewAttr = children[c].attributes[this.options.viewAttribute]
-            let groupAttr = children[c].attributes[this.options.groupAttribute]
-            if (viewAttr && viewAttr.value !== '') {
-              this.hideView(viewAttr.value, groupAttr.value || this.options.defaultGroup)
-            }
-          }
-        }
-      }
+  hideChildren (view, group) {
+    let children = this.getActiveViewsFromParent(view)
+    for (let c = 0; c < children.length; c++) {      
+      this.hideTriggerItems(children[c].view, group)
+      this.hideViewItems(children[c].view, group)
+      this.publish('hide', [children[c].view])
+    }
+  }
+  hideView (view, group) {            
+    this.hideChildren(view, group)
+    if (this.previousView !== this.currentView) {
+      this.hideTriggerItems(view, group)
+      this.hideViewItems(view, group)
+      this.publish('hide', [view])
+    }    
+  }
+  // registerElements (root) {
+  //   if (root.nodeName === '#document') {
+  //     this.groups = {}  
+  //   }    
+  //   let triggerItems = root.getElementsByClassName(this.options.triggerClass)
+  //   for (let i = 0; i < triggerItems.length; i++) {
+  //     if (!triggerItems[i].id) {
+  //       triggerItems[i].id = this.generateId('trigger')
+  //     }
+  //     if (this.triggerIdList.indexOf(triggerItems[i].id) !== -1) {
+  //       continue
+  //     }
+  //     this.triggerIdList.push(triggerItems[i].id)
+  //     // get the view for each item
+  //     let viewAttr = triggerItems[i].attributes[this.options.viewAttribute]
+  //     if (viewAttr && viewAttr.value !== '') {
+  //       // check to see if the item belongs to a group
+  //       // use the group to add an additional class to the item
+  //       // this combines the triggerClass and groupAttr properties
+  //       let groupAttr = triggerItems[i].attributes[this.options.groupAttribute]
+  //       let group = this.options.defaultGroup
+  //       if (groupAttr && groupAttr.value !== '') {
+  //         // if no group is found, assign it to the default group
+  //         group = groupAttr.value
+  //       }
+  //       let parentAttr = triggerItems[i].attributes[this.options.parentAttribute]
+  //       if (parentAttr && parentAttr.value !== '') {
+  //         triggerItems[i].classList.add(`parent-${parentAttr.value}`)
+  //       }
+  //       triggerItems[i].classList.add(`${this.options.triggerClass}-${group}`)        
+  //     }
+  //   }
+  //   // Assign group class to views
+  //   let viewItems = root.getElementsByClassName(this.options.viewClass)
+  //   for (let i = 0; i < viewItems.length; i++) {
+  //     let groupAttr = viewItems[i].attributes[this.options.groupAttribute]
+  //     let viewAttr = viewItems[i].attributes[this.options.viewAttribute]
+  //     if (!groupAttr || groupAttr.value === '') {
+  //       // if no group is found, assign it to the default group
+  //       viewItems[i].classList.add(`${this.options.viewClass}-${this.options.defaultGroup}`)
+  //     }
+  //     else {
+  //       this.addGroup(groupAttr.value)
+  //       if (viewItems[i].classList.contains(this.options.activeClass)) {
+  //         this.groups[groupAttr.value].activeView = viewAttr.value
+  //       }
+  //       viewItems[i].classList.add(`${this.options.viewClass}-${groupAttr.value}`)
+  //     }
+  //     let parentAttr = viewItems[i].attributes[this.options.parentAttribute]
+  //     if (parentAttr && parentAttr.value !== '') {
+  //       viewItems[i].classList.add(`parent-${parentAttr.value}`)
+  //       if (groupAttr && groupAttr.value !== '' && this.groups[groupAttr.value]) {
+  //         this.groups[groupAttr.value].parent = parentAttr.value
+  //       }
+  //     }
+  //   }
+  // }
+  prepComponent (elementId, options) {
+    let el = document.getElementById(`${elementId}_content`)
+    if (el) {
+      return ''
     }
-    else {
-      if (this.groups[group] && this.groups[group].activeView === view) {
-        this.groups[group].activeView = null
-      }
+    let html = `
+      <article id='${elementId}_content' class='websy-content-article'></article>
+      <div id='${elementId}_loading' class='websy-loading-container'><div class='websy-ripple'><div></div><div></div></div></div>
+    `
+    if (options.help && options.help !== '') {
+      html += `
+        <Help not yet supported>
+      `
     }
-    this.publish('hide', [view])
-  }
-  registerElements (root) {
-    if (root.nodeName === '#document') {
-      this.groups = {}  
-    }    
-    let triggerItems = root.getElementsByClassName(this.options.triggerClass)
-    for (let i = 0; i < triggerItems.length; i++) {
-      if (!triggerItems[i].id) {
-        triggerItems[i].id = this.generateId('trigger')
-      }
-      if (this.triggerIdList.indexOf(triggerItems[i].id) !== -1) {
-        continue
-      }
-      this.triggerIdList.push(triggerItems[i].id)
-      // get the view for each item
-      let viewAttr = triggerItems[i].attributes[this.options.viewAttribute]
-      if (viewAttr && viewAttr.value !== '') {
-        // check to see if the item belongs to a group
-        // use the group to add an additional class to the item
-        // this combines the triggerClass and groupAttr properties
-        let groupAttr = triggerItems[i].attributes[this.options.groupAttribute]
-        let group = this.options.defaultGroup
-        if (groupAttr && groupAttr.value !== '') {
-          // if no group is found, assign it to the default group
-          group = groupAttr.value
-        }
-        let parentAttr = triggerItems[i].attributes[this.options.parentAttribute]
-        if (parentAttr && parentAttr.value !== '') {
-          triggerItems[i].classList.add(`parent-${parentAttr.value}`)
-        }
-        triggerItems[i].classList.add(`${this.options.triggerClass}-${group}`)        
-      }
+    if (options.tooltip && options.tooltip.value && options.tooltip.value !== '') {
+      html += `
+          <div class="websy-info ${this.options.tooltip.classes.join(' ') || ''}" data-info="${this.options.tooltip.value}">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-e</title><path d="M256,56C145.72,56,56,145.72,56,256s89.72,200,200,200,200-89.72,200-200S366.28,56,256,56Zm0,82a26,26,0,1,1-26,26A26,26,0,0,1,256,138Zm48,226H216a16,16,0,0,1,0-32h28V244H228a16,16,0,0,1,0-32h32a16,16,0,0,1,16,16V332h28a16,16,0,0,1,0,32Z"/></svg>
+          </div>   
+        `
     }
-    // Assign group class to views
-    let viewItems = root.getElementsByClassName(this.options.viewClass)
-    for (let i = 0; i < viewItems.length; i++) {
-      let groupAttr = viewItems[i].attributes[this.options.groupAttribute]
-      let viewAttr = viewItems[i].attributes[this.options.viewAttribute]
-      if (!groupAttr || groupAttr.value === '') {
-        // if no group is found, assign it to the default group
-        viewItems[i].classList.add(`${this.options.viewClass}-${this.options.defaultGroup}`)
-      }
-      else {
-        this.addGroup(groupAttr.value)
-        if (viewItems[i].classList.contains(this.options.activeClass)) {
-          this.groups[groupAttr.value].activeView = viewAttr.value
+    el = document.getElementById(elementId)
+    if (el) {
+      el.innerHTML = html 
+    }    
+  }
+  showComponents (view) {
+    if (this.options.views && this.options.views[view] && this.options.views[view].components) {
+      this.options.views[view].components.forEach(c => {
+        if (typeof c.instance === 'undefined') {
+          this.prepComponent(c.elementId, c.options)
+          c.instance = new (c.Component)(c.elementId, c.options)
         }
-        viewItems[i].classList.add(`${this.options.viewClass}-${groupAttr.value}`)
-      }
-      let parentAttr = viewItems[i].attributes[this.options.parentAttribute]
-      if (parentAttr && parentAttr.value !== '') {
-        viewItems[i].classList.add(`parent-${parentAttr.value}`)
-        if (groupAttr && groupAttr.value !== '' && this.groups[groupAttr.value]) {
-          this.groups[groupAttr.value].parent = parentAttr.value
+        else if (c.instance.render) {
+          c.instance.render()
         }
-      }
+      })      
     }
   }
   showView (view, params) {
@@ -1879,21 +2180,26 @@ class WebsyRouter {
     this.activateItem(view, this.options.viewClass)
     let children = this.getActiveViewsFromParent(view)
     for (let c = 0; c < children.length; c++) {
-      this.activateItem(children[c], this.options.triggerClass)
-      this.activateItem(children[c], this.options.viewClass)
-      this.publish('show', [children[c]])
-    }
-    this.publish('show', [view, params])
+      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])
+    }
+    if (this.previousView !== this.currentView) {
+      this.showComponents(view)
+      this.publish('show', [view, params]) 
+    }    
   }
   reloadCurrentView () {
     this.showView(this.currentView, this.currentParams)
   }
-  navigate (inputPath, group, event, popped) {
+  navigate (inputPath, group = 'main', event, popped) {
     if (typeof popped === 'undefined') {
       popped = false
     }    
     this.popped = popped
     let toggle = false
+    let noInputParams = inputPath.indexOf('?') === -1
     let groupActiveView
     let params = {}       
     let newPath = inputPath    
@@ -1904,6 +2210,9 @@ class WebsyRouter {
       if (inputPath.indexOf('?') === -1 && this.queryParams) {
         inputPath += `?${this.queryParams}`
       }
+    }   
+    else {
+      this.currentParams = {}
     } 
     if (this.usesHTMLSuffix === true) {
       if (inputPath.indexOf('?') === -1) {
@@ -1935,14 +2244,17 @@ class WebsyRouter {
         toggle = event
       }
     }
+    if (!this.groups) {
+      this.groups = {}
+    }
+    if (!this.groups[group]) {
+      this.addGroup(group)
+    }
     if (toggle === true && this.groups[group].activeView !== '') {
       newPath = ''
     }        
     this.previousView = this.currentView    
-    this.previousPath = this.currentPath
-    if (!this.groups) {
-      this.groups = {}
-    }
+    this.previousPath = this.currentPath    
     if (this.groups[group]) {
       if (toggle === false) {      
         groupActiveView = this.groups[group].activeView
@@ -1954,7 +2266,7 @@ class WebsyRouter {
         this.hideView(this.previousPath, group)
       }
     }
-    else {
+    else {      
       this.hideView(this.previousView, group)
     }    
     if (toggle === true && newPath === groupActiveView) {
@@ -1994,7 +2306,7 @@ class WebsyRouter {
         if (this.currentParams && this.currentParams.path) {
           historyUrl += `?${this.currentParams.path}`
         }
-        else if (this.queryParams) {
+        else if (this.queryParams && this.options.persistentParameters === true) {
           historyUrl += `?${this.queryParams}`
         }        
         history.pushState({
@@ -2006,6 +2318,9 @@ class WebsyRouter {
       }
     }
   }
+  on (event, fn) {
+    this.options.subscribers[event].push(fn)
+  }
   onPopState (event) {
     if (event.state) {
       let url
@@ -2031,7 +2346,7 @@ class WebsyRouter {
   }
   subscribe (event, fn) {
     this.options.subscribers[event].push(fn)
-  }
+  }  
   get currentPath () {
     let path = window.location.pathname.split('/').pop()    
     if (path.indexOf('.htm') !== -1) {
@@ -2073,277 +2388,383 @@ class WebsyRouter {
     if (els) {
       for (let i = 0; i < els.length; i++) {
         if (els[i].attributes[this.options.viewAttribute] && els[i].attributes[this.options.viewAttribute].value === path) {
-          els[i].classList.add(this.options.activeClass)          
-          break
-        }
-      }
-    }
-  }
-}
-
-/* global XMLHttpRequest fetch ENV */
-class APIService {
-  constructor (baseUrl) {
-    this.baseUrl = baseUrl
-  }
-  add (entity, data, options = {}) {
-    const url = this.buildUrl(entity)
-    return this.run('POST', url, data, options)
-  }
-  buildUrl (entity, id, query) {
-    if (typeof query === 'undefined') {
-      query = []
-    }
-    if (id) {
-      query.push(`id:${id}`)
-    }    
-    return `${this.baseUrl}/${entity}${query.length > 0 ? `${entity.indexOf('?') === -1 ? '?' : '&'}where=${query.join(';')}` : ''}`
-  }
-  delete (entity, id) {
-    const url = this.buildUrl(entity, id)
-    return this.run('DELETE', url)
-  }
-  get (entity, id, query) {
-    const url = this.buildUrl(entity, id, query)
-    return this.run('GET', url)
-  }	
-  update (entity, id, data) {
-    const url = this.buildUrl(entity, id)
-    return this.run('PUT', url, data)
-  }
-  fetchData (method, url, data, options = {}) {
-    return fetch(url, {
-      method,
-      mode: 'cors', // no-cors, *cors, same-origin
-      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-      credentials: 'same-origin', // include, *same-origin, omit
-      headers: {
-        'Content-Type': 'application/json'
-        // 'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      redirect: 'follow', // manual, *follow, error
-      referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
-      body: JSON.stringify(data) // body data type must match "Content-Type" header
-    }).then(response => {
-      return response.json()
-    })
-  } 
-  run (method, url, data, options = {}, returnHeaders = false) {
-    return new Promise((resolve, reject) => {
-      const xhr = new XMLHttpRequest()
-      xhr.open(method, url)		
-      xhr.setRequestHeader('Content-Type', 'application/json')
-      xhr.responseType = 'text'
-      if (options.responseType) {
-        xhr.responseType = options.responseType
-      }
-      if (options.headers) {
-        for (let key in options.headers) {
-          xhr.setRequestHeader(key, options.headers[key])
-        }
-      }
-      xhr.withCredentials = true      
-      xhr.onload = () => {
-        if (xhr.status === 401 || xhr.status === 403) {
-          if (ENV && ENV.AUTH_REDIRECT) {
-            window.location = ENV.AUTH_REDIRECT
-          }
-          else {
-            window.location = '/login'
-          }
-          // reject('401 - Unauthorized')
-          return
-        }      
-        let response = xhr.responseType === 'text' ? xhr.responseText : xhr.response
-        if (response !== '' && response !== 'null') {
-          try {
-            response = JSON.parse(response)
-          }
-          catch (e) {
-            // Either a bad Url or a string has been returned
-          }
-        }
-        else {
-          response = []
-        }      
-        if (response.err) {					
-          reject(JSON.stringify(response))
-        }
-        else {					
-          if (returnHeaders === true) {
-            resolve([response, parseHeaders(xhr.getAllResponseHeaders())])	 
-          }
-          else {
-            resolve(response)
-          }
-        }				
-      }
-      xhr.onerror = () => reject(xhr.statusText)
-      if (data) {
-        xhr.send(JSON.stringify(data))	
-      }
-      else {
-        xhr.send()
-      }			
-    })
-    function parseHeaders (headers) {
-      headers = headers.split('\r\n')
-      let ouput = {}
-      headers.forEach(h => {
-        h = h.split(':')
-        if (h.length === 2) {
-          ouput[h[0]] = h[1].trim() 
-        }        
-      })
-      return ouput
+          els[i].classList.add(this.options.activeClass)          
+          break
+        }
+      }
     }
-  }	
+  }
 }
 
-/* global WebsyDesigns Blob */ 
-class WebsyPDFButton {
+/* global */
+class Switch {
   constructor (elementId, options) {
-    const DEFAULTS = {
-      classes: [],
-      wait: 0,
-      buttonText: 'Download'
-    }
     this.elementId = elementId
+    const DEFAULTS = {      
+      enabled: false
+    }
     this.options = Object.assign({}, DEFAULTS, options)
-    this.service = new WebsyDesigns.APIService('/pdf')
     const el = document.getElementById(this.elementId)
     if (el) {
       el.addEventListener('click', this.handleClick.bind(this))
-      if (options.html) {
-        el.innerHTML = options.html
-      }
-      else {
-        el.innerHTML = `
-          <!--<form style='display: none;' id='${this.elementId}_form' action='/pdf' method='POST'>
-            <input id='${this.elementId}_pdfHeader' value='' name='header'>
-            <input id='${this.elementId}_pdfHTML' value='' name='html'>
-            <input id='${this.elementId}_pdfFooter' value='' name='footer'>
-          </form>-->
-          <button class='websy-btn websy-pdf-button ${this.options.classes.join(' ')}'>
-            Create PDF
-            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-                viewBox="0 0 184.153 184.153" style="enable-background:new 0 0 184.153 184.153;" xml:space="preserve">
-              <g>
-                <g>
-                  <g>
-                    <path d="M129.318,0H26.06c-1.919,0-3.475,1.554-3.475,3.475v177.203c0,1.92,1.556,3.475,3.475,3.475h132.034
-                      c1.919,0,3.475-1.554,3.475-3.475V34.131C161.568,22.011,140.771,0,129.318,0z M154.62,177.203H29.535V6.949h99.784
-                      c7.803,0,25.301,18.798,25.301,27.182V177.203z"/>
-                    <path d="M71.23,76.441c15.327,0,27.797-12.47,27.797-27.797c0-15.327-12.47-27.797-27.797-27.797
-                      c-15.327,0-27.797,12.47-27.797,27.797C43.433,63.971,55.902,76.441,71.23,76.441z M71.229,27.797
-                      c11.497,0,20.848,9.351,20.848,20.847c0,0.888-0.074,1.758-0.183,2.617l-18.071-2.708L62.505,29.735
-                      C65.162,28.503,68.112,27.797,71.229,27.797z M56.761,33.668l11.951,19.869c0.534,0.889,1.437,1.49,2.462,1.646l18.669,2.799
-                      c-3.433,6.814-10.477,11.51-18.613,11.51c-11.496,0-20.847-9.351-20.847-20.847C50.381,42.767,52.836,37.461,56.761,33.668z"/>
-                    <rect x="46.907" y="90.339" width="73.058" height="6.949"/>
-                    <rect x="46.907" y="107.712" width="48.644" height="6.949"/>
-                    <rect x="46.907" y="125.085" width="62.542" height="6.949"/>
-                  </g>
-                </g>
-              </g>              
-            </svg>
-          </button>          
-          <div id='${this.elementId}_loader'></div>
-          <div id='${this.elementId}_popup'></div>
-        `
-        this.loader = new WebsyDesigns.WebsyLoadingDialog(`${this.elementId}_loader`, { classes: ['global-loader'] })
-        this.popup = new WebsyDesigns.WebsyPopupDialog(`${this.elementId}_popup`)
-        // const formEl = document.getElementById(`${this.elementId}_form`)
-        // if (formEl) {
-        //   formEl.addEventListener('load', () => {
-        //     this.loader.hide()
-        //   })
-        // }        
+      this.render() 
+    }    
+  }
+  disabled () {
+    this.options.enabled = false
+    this.render()
+  }
+  enable () {
+    this.options.enabled = true
+    this.render()
+  }  
+  handleClick (event) {        
+    this.options.enabled = !this.options.enabled
+    let method = this.options.enabled === true ? 'add' : 'remove'
+    const el = document.getElementById(`${this.elementId}_switch`)
+    el.classList[method]('enabled')
+    if (this.options.onToggle) {
+      this.options.onToggle(this.options.enabled)      
+    }     
+  }
+  on (event, fn) {
+    if (!this.options.subscribers[event]) {
+      this.options.subscribers[event] = []
+    }
+    this.options.subscribers[event].push(fn)
+  }
+  publish (event, params) {
+    this.options.subscribers[event].forEach((item) => {
+      item.apply(null, params)
+    })
+  }
+  render () {
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      el.innerHTML = `
+        <div class="websy-switch-container">
+          <div class="websy-switch-label">${this.options.label || ''}</div>
+          <div id="${this.elementId}_switch" class="websy-switch ${this.options.enabled === true ? 'enabled' : ''}"></div>      
+        </div>
+      `
+    }
+  }
+}
+
+/* global WebsyDesigns */ 
+class WebsyTemplate {
+  constructor (elementId, options) {
+    const DEFAULTS = {
+      listeners: {
+        click: {}
       }
     }
+    this.options = Object.assign({}, DEFAULTS, options)
+    this.elementId = elementId
+    this.templateService = new WebsyDesigns.APIService('')
+    if (!elementId) {
+      console.log('No element Id provided for Websy Template')		
+      return
+    }
+    const el = document.getElementById(elementId)
+    if (el) {
+      el.addEventListener('click', this.handleClick.bind(this))
+    }
+    if (typeof options.template === 'object' && options.template.url) {
+      this.templateService.get(options.template.url).then(templateString => {
+        this.options.template = templateString
+        this.render()        
+      })
+    }
+    else {
+      this.render()      
+    }    
   }
-  handleClick (event) {
-    if (event.target.classList.contains('websy-pdf-button')) {
-      this.loader.show()
-      setTimeout(() => {        
-        if (this.options.targetId) {
-          const el = document.getElementById(this.options.targetId)
-          if (el) {
-            const pdfData = { options: {} }
-            if (this.options.pdfOptions) {
-              pdfData.options = Object.assign({}, this.options.pdfOptions)
+  buildHTML () {
+    let html = ``
+    if (this.options.template) {            
+      let template = this.options.template
+      // find conditional elements
+      let ifMatches = [...template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g)]
+      ifMatches.forEach(m => {
+        // get the condition
+        if (m[0] && m.index > -1) {
+          let conditionMatch = m[0].match(/(\scondition=["|']\w.+)["|']/g)
+          if (conditionMatch && conditionMatch[0]) {
+            let c = conditionMatch[0].trim().replace('condition=', '')
+            if (c.split('')[0] === '"') {
+              c = c.replace(/"/g, '')
             }
-            if (this.options.header) {
-              if (this.options.header.elementId) {
-                const headerEl = document.getElementById(this.options.header.elementId)
-                if (headerEl) {
-                  pdfData.header = headerEl.outerHTML  
-                  if (this.options.header.css) {
-                    pdfData.options.headerCSS = this.options.header.css
-                  }
-                }
+            else if (c.split('')[0] === '\'') {
+              c = c.replace(/'/g, '')
+            }
+            let parts = []
+            let polarity = true
+            if (c.indexOf('===') !== -1) {
+              parts = c.split('===')
+            }
+            else if (c.indexOf('!==') !== -1) {
+              parts = c.split('!==')
+              polarity = false
+            }
+            else if (c.indexOf('==') !== -1) {
+              parts = c.split('==')
+            }
+            else if (c.indexOf('!=') !== -1) {
+              parts = c.split('!=')
+              polarity = false
+            }
+            let removeAll = true
+            if (parts.length === 2) {
+              if (!isNaN(parts[1])) {
+                parts[1] = +parts[1]
               }
-              else if (this.options.header.html) {
-                pdfData.header = this.options.header.html
-                if (this.options.header.css) {
-                  pdfData.options.headerCSS = this.options.header.css
-                }
+              if (parts[1] === 'true') {
+                parts[1] = true
               }
-              else {
-                pdfData.header = this.options.header
+              if (parts[1] === 'false') {
+                parts[1] = false
               }
-            }
-            if (this.options.footer) {
-              if (this.options.footer.elementId) {
-                const footerEl = document.getElementById(this.options.footer.elementId)
-                if (footerEl) {
-                  pdfData.footer = footerEl.outerHTML  
-                  if (this.options.footer.css) {
-                    pdfData.options.footerCSS = this.options.footer.css
-                  }
+              if (typeof parts[1] === 'string') {
+                if (parts[1].indexOf('"') !== -1) {
+                  parts[1] = parts[1].replace(/"/g, '')
                 }
+                else if (parts[1].indexOf('\'') !== -1) {
+                  parts[1] = parts[1].replace(/'/g, '')
+                } 
               }
-              else {
-                pdfData.footer = this.options.footer
-              }
+              if (polarity === true) {
+                if (typeof this.options.data[parts[0]] !== 'undefined' && this.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 this.options.data[parts[0]] !== 'undefined' && this.options.data[parts[0]] !== parts[1]) {
+                  // remove the <if> tags
+                  removeAll = false
+                }
+              }                                                
+            }
+            if (removeAll === true) {
+              // remove the whole markup                
+              template = template.replace(m[0], '')
+            }
+            else {
+              // remove the <if> tags
+              let newMarkup = m[0]
+              newMarkup = newMarkup.replace('</if>', '').replace(/<\s*if[^>]*>/g, '')
+              template = template.replace(m[0], newMarkup) 
             }
-            pdfData.html = el.outerHTML
-            // document.getElementById(`${this.elementId}_pdfHeader`).value = pdfData.header
-            // document.getElementById(`${this.elementId}_pdfHTML`).value = pdfData.html
-            // document.getElementById(`${this.elementId}_pdfFooter`).value = pdfData.footer
-            // document.getElementById(`${this.elementId}_form`).submit()
-            this.service.add('', pdfData, {responseType: 'blob'}).then(response => {
-              this.loader.hide()
-              const blob = new Blob([response], {type: 'application/pdf'})
-              this.popup.show({
-                message: `
-                  <div class='text-center websy-pdf-download'>
-                    <div>Your file is ready to download</div>
-                    <a href='${URL.createObjectURL(blob)}' target='_blank'>
-                      <button class='websy-btn download-pdf'>${this.options.buttonText}</button>
-                    </a>
-                  </div>
-                `,
-                mask: true
-              })
-            }, err => {
-              console.error(err)
-            })
           }
+        }
+      })
+      let tagMatches = [...template.matchAll(/(\sdata-event=["|']\w.+)["|']/g)]
+      tagMatches.forEach(m => {
+        if (m[0] && m.index > -1) {
+          template = template.replace(m[0], `${m[0]}`)
+        }
+      })
+      for (let key in this.options.data) {
+        let rg = new RegExp(`{${key}}`, 'gm')
+        if (rg) {
+          template = template.replace(rg, this.options.data[key])
+        }                                    
+      } 
+      html = template     
+    }
+    return html
+  }
+  handleClick (event) {
+    // 
+  }
+  render () {
+    this.resize()
+  }
+  resize () {    
+    const html = this.buildHTML()
+    const el = document.getElementById(this.elementId)
+    el.innerHTML = html.replace(/\n/g, '')
+    if (this.options.readyCallbackFn) {
+      this.options.readyCallbackFn()
+    }
+  }
+}
+
+const WebsyUtils = {
+  createIdentity: (size = 6) => {	
+    let text = ''
+    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  
+    for (let i = 0; i < size; i++) {
+      text += possible.charAt(Math.floor(Math.random() * possible.length))
+    }
+    return text
+  },
+  getElementPos: el => {
+    const rect = el.getBoundingClientRect()
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+    return { 
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft,
+      bottom: rect.top + scrollTop + el.clientHeight,
+      right: rect.left + scrollLeft + el.clientWidth
+    }
+  },
+  getLightDark: (backgroundColor, darkColor = '#000000', lightColor = '#ffffff') => {
+    let colorParts
+    let red = 0
+    let green = 0
+    let blue = 0
+    if (backgroundColor.indexOf('#') !== -1) {
+      // hex color
+      backgroundColor = backgroundColor.replace('#', '')
+      colorParts = backgroundColor
+      colorParts = colorParts.split('')
+      red = parseInt(colorParts[0] + colorParts[1], 16)
+      green = parseInt(colorParts[2] + colorParts[3], 16)
+      blue = parseInt(colorParts[4] + colorParts[5], 16)
+    }
+    else if (backgroundColor.toLowerCase().indexOf('rgb') !== -1) {
+      // rgb color
+      colorParts = backgroundColor
+      colorParts = colorParts.split(',')
+      red = colorParts[0]
+      green = colorParts[1]
+      blue = colorParts[2]
+    }
+    return (red * 0.299 + green * 0.587 + blue * 0.114) > 186 ? darkColor : lightColor
+  },
+  parseUrlParams: () => {
+    let queryString = window.location.search.replace('?', '')
+    const params = {}
+    let parts = queryString.split('&')
+    for (let i = 0; i < parts.length; i++) {
+      let keyValue = parts[i].split('=')
+      params[keyValue[0]] = keyValue[1]
+    }
+    return params
+  },
+  buildUrlParams: (params) => {    
+    let out = []
+    for (const key in params) {
+      out.push(`${key}=${params[key]}`)
+    }
+    return out.join('&')
+  },
+  fromQlikDate: d => {    
+    let output = new Date(Math.round((d - 25569) * 86400000))    
+    output.setTime(output.getTime() + output.getTimezoneOffset() * 60000)
+    return output
+  },
+  toReduced: (v, decimals = 0, isPercentage = false, test = false, control) => {
+    let ranges = [{
+      divider: 1e18,
+      suffix: 'E'
+    }, {
+      divider: 1e15,
+      suffix: 'P'
+    }, {
+      divider: 1e12,
+      suffix: 'T'
+    }, {
+      divider: 1e9,
+      suffix: 'G'
+    }, {
+      divider: 1e6,
+      suffix: 'M'
+    }, {
+      divider: 1e3,
+      suffix: 'K'
+    }]  
+    let numOut
+    let divider
+    let suffix = ''  
+    if (control) {    
+      let settings = getDivider(control)
+      divider = settings.divider
+      suffix = settings.suffix    
+    }  
+    if (v === 0) {
+      numOut = 0
+    }
+    else if (control) {
+      numOut = (v / divider) // .toFixed(decimals).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$100,')
+    }
+    else if (v < 1000 && v % 1 === 0) {
+      numOut = v
+      // decimals = 0
+    }
+    else {
+      numOut = v
+      for (let i = 0; i < ranges.length; i++) {
+        if (v >= ranges[i].divider) {
+          numOut = (v / ranges[i].divider) // .toFixed(decimals).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$100,')
+          suffix = ranges[i].suffix
+          break
         } 
-      }, this.options.wait)           
+        // else if (isPercentage === true) {
+        //   numOut = (this * 100).toFixed(decimals)
+        // }
+        // else {
+        //   numOut = (this).toFixed(decimals)
+        // }
+      }
     }
-    else if (event.target.classList.contains('download-pdf')) {
-      this.popup.hide()
-      if (this.options.onClose) {
-        this.options.onClose()
+    if (isPercentage === true) {
+      numOut = numOut * 100    
+    }
+    if (numOut % 1 > 0) {
+      decimals = 1
+    }
+    if (numOut < 1) {
+      decimals = getZeroDecimals(numOut)    
+    }  
+    numOut = (+numOut).toFixed(decimals)
+    if (test === true) {
+      return numOut
+    }
+    if (numOut.replace) {
+      numOut = numOut.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    }
+    function getDivider (n) {
+      let s = ''
+      let d = 1
+      // let out
+      for (let i = 0; i < ranges.length; i++) {      
+        if (n >= ranges[i].divider) {
+          d = ranges[i].divider
+          s = ranges[i].suffix
+          // out = (n / ranges[i].divider).toFixed(decimals).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$100,')                
+          break
+        }       
+      }    
+      return { divider: d, suffix: s }
+    }
+    function getZeroDecimals (n) {
+      let d = 0
+      n = Math.abs(n)
+      if (n === 0) {
+        return 0
       }
+      while (n < 10) {
+        d++
+        n = n * 10
+      }    
+      return d    
     }
-  }
-  render () {
-    // 
+    return `${numOut}${suffix}${isPercentage === true ? '%' : ''}`
+  },
+  toQlikDateNum: d => {
+    return Math.floor(d.getTime() / 86400000 + 25570)
   }
 }
 
+/* global WebsyDesigns */ 
 class WebsyTable {
   constructor (elementId, options) {
     const DEFAULTS = {
@@ -2370,6 +2791,13 @@ class WebsyTable {
             <tfoot id="${this.elementId}_foot">
             </tfoot>
           </table>
+          <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
+            <div>
+              <div id="${this.elementId}_errorTitle"></div>
+              <div id="${this.elementId}_errorMessage"></div>
+            </div>            
+          </div>
+          <div id="${this.elementId}_loadingContainer"></div>
         </div>
       `
       el.addEventListener('click', this.handleClick.bind(this))
@@ -2377,6 +2805,7 @@ class WebsyTable {
       el.addEventListener('mousemove', this.handleMouseMove.bind(this))
       const scrollEl = document.getElementById(`${this.elementId}_tableContainer`)
       scrollEl.addEventListener('scroll', this.handleScroll.bind(this))
+      this.loadingDialog = new WebsyDesigns.LoadingDialog(`${this.elementId}_loadingContainer`)
       this.render()
     } 
     else {
@@ -2384,6 +2813,7 @@ class WebsyTable {
     }
   }
   appendRows (data) {
+    this.hideError()
     let bodyHTML = ''
     if (data) {
       bodyHTML += data.map((r, rowIndex) => {
@@ -2410,12 +2840,13 @@ class WebsyTable {
                   class='${this.options.columns[i].classes || ''}' 
                   style='${style}'
                   colspan='${c.colspan || 1}'
+                  rowspan='${c.rowspan || 1}'
                 >
                   <a href='${c.value}' target='${this.options.columns[i].openInNewTab === true ? '_blank' : '_self'}'>${c.displayText || this.options.columns[i].linkText || c.value}</a>
                 </td>
               `
             } 
-            else if (this.options.columns[i].showAsNavigatorLink === true && c.value.trim() !== '') {
+            else if ((this.options.columns[i].showAsNavigatorLink === true || this.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
               return `
                 <td 
                   data-view='${c.value}' 
@@ -2424,6 +2855,7 @@ class WebsyTable {
                   class='trigger-item ${this.options.columns[i].clickable === true ? 'clickable' : ''} ${this.options.columns[i].classes || ''}' 
                   style='${style}'
                   colspan='${c.colspan || 1}'
+                  rowspan='${c.rowspan || 1}'
                 >${c.displayText || this.options.columns[i].linkText || c.value}</td>
               `
             } 
@@ -2442,6 +2874,7 @@ class WebsyTable {
                   class='${this.options.columns[i].classes || ''}' 
                   style='${style}'
                   colspan='${c.colspan || 1}'
+                  rowspan='${c.rowspan || 1}'
                 >${c.value}</td>
               `
             }
@@ -2533,6 +2966,15 @@ class WebsyTable {
       this.options.onScroll(event)
     }
   } 
+  hideError () {
+    const containerEl = document.getElementById(`${this.elementId}_errorContainer`)
+    if (containerEl) {
+      containerEl.classList.remove('active')
+    }
+  }
+  hideLoading () {
+    this.loadingDialog.hide()
+  }
   internalSort (column, colIndex) {
     this.options.columns.forEach((c, i) => {
       c.activeSort = i === colIndex      
@@ -2573,11 +3015,13 @@ class WebsyTable {
     if (!this.options.columns) {
       return
     }
+    this.hideError()
     this.data = []
     this.rowCount = 0
     const bodyEl = document.getElementById(`${this.elementId}_body`)
     bodyEl.innerHTML = ''
     if (this.options.allowDownload === true) {
+      // doesn't do anything yet
       const el = document.getElementById(this.elementId)
       if (el) {
         el.classList.add('allow-download')
@@ -2622,25 +3066,60 @@ class WebsyTable {
       // this.data = this.data.concat(data)
       this.appendRows(data) 
     }
-  }  
+  } 
+  showError (options) {
+    const containerEl = document.getElementById(`${this.elementId}_errorContainer`)
+    if (containerEl) {
+      containerEl.classList.add('active')
+    }
+    if (options.title) {
+      const titleEl = document.getElementById(`${this.elementId}_errorTitle`)
+      if (titleEl) {
+        titleEl.innerHTML = options.title
+      } 
+    }
+    if (options.message) {
+      const messageEl = document.getElementById(`${this.elementId}_errorTitle`)
+      if (messageEl) {
+        messageEl.innerHTML = options.message
+      } 
+    }
+  } 
+  showLoading (options) {
+    this.loadingDialog.show(options)
+  }
 }
 
-/* global d3 include */ 
+/* global d3 include WebsyDesigns */ 
 class WebsyChart {
   constructor (elementId, options) {
     const DEFAULTS = {
-      margin: { top: 3, left: 3, bottom: 3, right: 3, axisBottom: 0, axisLeft: 0, axisRight: 0, axisTop: 0 },
+      margin: { 
+        top: 10, 
+        left: 3, 
+        bottom: 3, 
+        right: 3, 
+        axisBottom: 0, 
+        axisLeft: 0, 
+        axisRight: 0, 
+        axisTop: 0,
+        legendBottom: 0, 
+        legendLeft: 0, 
+        legendRight: 0, 
+        legendTop: 0 
+      },
       orientation: 'vertical',
-      colors: d3.schemeCategory10,
+      colors: ['#5e4fa2', '#3288bd', '#66c2a5', '#abdda4', '#e6f598', '#fee08b', '#fdae61', '#f46d43', '#d53e4f', '#9e0142'],
       transitionDuration: 650,
       curveStyle: 'curveLinear',
       lineWidth: 2,
       forceZero: true,
       fontSize: 14,
-      symbolSize: 20,
-      dateFormat: '%b/%m/%Y',
-      showTrackingLine: true,
+      symbolSize: 20,      
+      showTrackingLine: true,      
       showTooltip: true,
+      showLegend: false,
+      legendPosition: 'bottom',
       tooltipWidth: 200
     }
     this.elementId = elementId
@@ -2653,6 +3132,27 @@ class WebsyChart {
       console.log('No element Id provided for Websy Chart')		
       return
     }
+    this.invertOverride = (input, input2) => {
+      let xAxis = 'bottomAxis'      
+      if (this.options.orientation === 'horizontal') {
+        xAxis = 'leftAxis'        
+      }
+      let width = this[xAxis].step()      
+      let output
+      let domain = [...this[xAxis].domain()]
+      if (this.options.orientation === 'horizontal') {
+        domain = domain.reverse()
+      }      
+      for (let j = 0; j < domain.length; j++) {                
+        let breakA = this[xAxis](domain[j]) - (width / 2)
+        let breakB = breakA + width
+        if (input > breakA && input <= breakB) {       
+          output = j
+          break
+        }
+      }      
+      return output
+    }
     const el = document.getElementById(this.elementId)    
     if (el) {
       el.classList.add('websy-chart')
@@ -2662,6 +3162,10 @@ class WebsyChart {
       else {
         el.innerHTML = ''        
         this.svg = d3.select(el).append('svg')
+        this.legendArea = d3.select(el).append('div')
+          .attr('id', `${this.elementId}_legend`)
+          .attr('class', 'websy-chart-legend')
+        this.legend = new WebsyDesigns.Legend(`${this.elementId}_legend`, {})
         this.prep()
       }      
     }
@@ -2673,6 +3177,20 @@ class WebsyChart {
     this.options.data = d
     this.render()
   }
+  close () {
+    this.leftAxisLayer.selectAll('*').remove()
+    this.rightAxisLayer.selectAll('*').remove()
+    this.bottomAxisLayer.selectAll('*').remove()
+    this.leftAxisLabel.selectAll('*').remove()
+    this.rightAxisLabel.selectAll('*').remove()
+    this.bottomAxisLabel.selectAll('*').remove()
+    this.plotArea.selectAll('*').remove()
+    this.areaLayer.selectAll('*').remove()
+    this.lineLayer.selectAll('*').remove()
+    this.barLayer.selectAll('*').remove()
+    this.labelLayer.selectAll('*').remove()
+    this.symbolLayer.selectAll('*').remove()
+  }
   createDomain (side) {
     let domain = []
     /* global d3 side domain:writable */ 
@@ -2711,84 +3229,175 @@ if (this.options.data[side].scale === 'Time') {
       .attr('stroke-opacity', 0)
     this.tooltip.hide()
   }
-  handleEventMouseMove (event, d) {
-    // console.log('mouse move', event, d, d3.pointer(event))
+  handleEventMouseMove (event, d) {        
     let bisectDate = d3.bisector(d => {
       return this.parseX(d.x.value)
     }).left
     if (this.options.showTrackingLine === true && d3.pointer(event)) {
+      let xAxis = 'bottomAxis'
+      let xData = 'bottom'    
       let x0 = d3.pointer(event)[0]
+      if (this.options.orientation === 'horizontal') {
+        xAxis = 'leftAxis'
+        xData = 'left'      
+        x0 = d3.pointer(event)[1]
+      }      
       let xPoint
       let data
       let tooltipHTML = ''
       let tooltipTitle = ''
-      let tooltipData = []
-      if (this.bottomAxis.invert) {
-        x0 = this.bottomAxis.invert(x0)
-        this.options.data.series.forEach(s => {          
-          let index = bisectDate(s.data, x0, 1)          
+      let tooltipData = []      
+      if (!this[xAxis].invert) {
+        this[xAxis].invert = this.invertOverride
+      }
+      x0 = this[xAxis].invert(x0)
+      let xDiff
+      if (typeof x0 === 'undefined') {
+        this.tooltip.hide()
+        return
+      }
+      let xLabel = this[xAxis].domain()[x0]
+      if (this.options.orientation === 'horizontal') {
+        xLabel = [...this[xAxis].domain().reverse()][x0]
+      }
+      this.options.data.series.forEach(s => {     
+        if (this.options.data[xData].scale !== 'Time') {
+          xPoint = this[xAxis](this.parseX(xLabel))
+          s.data.forEach(d => {
+            if (d.x.value === xLabel) {
+              if (!d.y.color) {
+                d.y.color = s.color 
+              }
+              tooltipData.push(d.y)
+            }
+          })
+        }
+        else {     
+          let index = bisectDate(s.data, x0, 1)                   
           let pointA = s.data[index - 1]
           let pointB = s.data[index]
-          if (pointA) {
-            xPoint = this.bottomAxis(this.parseX(pointA.x.value))
+          if (this.options.orientation === 'horizontal') {
+            pointA = [...s.data].reverse()[index - 1]
+            pointB = [...s.data].reverse()[index]
+          }                    
+          if (pointA && !pointB) {            
+            xPoint = this[xAxis](this.parseX(pointA.x.value))        
             tooltipTitle = pointA.x.value
+            if (!pointA.y.color) {
+              pointA.y.color = s.color 
+            }          
+            tooltipData.push(pointA.y)
             if (typeof pointA.x.value.getTime !== 'undefined') {
-              tooltipTitle = d3.timeFormat(this.options.dateFormat)(pointA.x.value)
+              tooltipTitle = d3.timeFormat(this.options.dateFormat || this.options.calculatedTimeFormatPattern)(pointA.x.value)
             }
           }
+          if (pointB && !pointA) {            
+            xPoint = this[xAxis](this.parseX(pointB.x.value))
+            tooltipTitle = pointB.x.value
+            if (!pointB.y.color) {
+              pointB.y.color = s.color 
+            }          
+            tooltipData.push(pointB.y)
+            if (typeof pointB.x.value.getTime !== 'undefined') {
+              tooltipTitle = d3.timeFormat(this.options.dateFormat || this.options.calculatedTimeFormatPattern)(pointB.x.value)
+            }          
+          }
           if (pointA && pointB) {
-            let d0 = this.bottomAxis(this.parseX(pointA.x.value))
-            let d1 = this.bottomAxis(this.parseX(pointB.x.value))
+            let d0 = this[xAxis](this.parseX(pointA.x.value))
+            let d1 = this[xAxis](this.parseX(pointB.x.value))
             let mid = Math.abs(d0 - d1) / 2
-            if (d3.pointer(event)[0] - d0 >= mid) {
+            if (d3.pointer(event)[0] - d0 >= mid) {              
               xPoint = d1
               tooltipTitle = pointB.x.value
               if (typeof pointB.x.value.getTime !== 'undefined') {
-                tooltipTitle = d3.timeFormat(this.options.dateFormat)(pointB.x.value)
+                tooltipTitle = d3.timeFormat(this.options.dateFormat || this.options.calculatedTimeFormatPattern)(pointB.x.value)
               }
+              if (!pointB.y.color) {
+                pointB.y.color = s.color 
+              }          
               tooltipData.push(pointB.y)
             }
             else {
-              xPoint = d0              
+              xPoint = d0 
+              tooltipTitle = pointA.x.value              
+              if (typeof pointB.x.value.getTime !== 'undefined') {
+                tooltipTitle = d3.timeFormat(this.options.dateFormat || this.options.calculatedTimeFormatPattern)(pointB.x.value)
+              }                
+              if (!pointA.y.color) {
+                pointA.y.color = s.color 
+              }                 
               tooltipData.push(pointA.y)
             }            
           }
-        })
-        tooltipHTML = `          
-          <ul>
-        `
-        tooltipHTML += tooltipData.map(d => `
-          <li>
-            <i style='background-color: ${d.color};'></i>
-            ${d.tooltipLabel || ''}<span>${d.tooltipValue || d.value}</span>
-          </li>
-        `).join('')
-        tooltipHTML += `</ul>`
-        let posOptions = {
+        }
+      })
+      tooltipHTML = `          
+        <ul>
+      `
+      tooltipHTML += tooltipData.map(d => `
+        <li>
+          <i style='background-color: ${d.color};'></i>
+          ${d.tooltipLabel || ''}<span> - ${d.tooltipValue || d.value}</span>
+        </li>
+      `).join('')
+      tooltipHTML += `</ul>`
+      let posOptions = {
+        width: this.options.tooltipWidth,
+        left: 0,
+        top: 0,          
+        onLeft: xPoint > this.plotWidth / 2
+      }      
+      if (xPoint > this.plotWidth / 2) {
+        posOptions.left = xPoint - this.options.tooltipWidth - 15
+      } 
+      else {
+        posOptions.left = xPoint + this.options.margin.left + this.options.margin.axisLeft + 15
+      }
+      posOptions.top = this.options.margin.top + this.options.margin.axisTop
+      if (this.options.orientation === 'horizontal') {
+        delete posOptions.onLeft
+        let adjuster = 0
+        if (this.options.data[xData].scale !== 'Time') {
+          adjuster = (this[xAxis].bandwidth() / 2) // - this.options.margin.top
+        }
+        posOptions = {
           width: this.options.tooltipWidth,
-          left: 0,
-          top: 0,          
-          onLeft: xPoint > this.plotWidth / 2
+          left: this.options.margin.left + this.options.margin.axisLeft + this.plotWidth - this.options.tooltipWidth,
+          onTop: xPoint > this.plotHeight / 2,
+          positioning: 'vertical'
         }
-        if (xPoint > this.plotWidth / 2) {
-          posOptions.left = xPoint - this.options.tooltipWidth - 15
+        if (xPoint > this.plotHeight / 2) {
+          posOptions.bottom = xPoint + this.options.margin.top + this.options.margin.axisTop
         } 
         else {
-          posOptions.left = xPoint + this.options.margin.left + this.options.margin.axisLeft + 15
+          posOptions.top = xPoint + this.options.margin.top + this.options.margin.axisTop + 15 + adjuster
         }
-        posOptions.top = this.options.margin.top + this.options.margin.axisTop                
-        this.tooltip.show(tooltipTitle, tooltipHTML, posOptions)
-        // data = this.bottomAxis(data)
-      }
-      else {
-        xPoint = x0
       }      
+      this.tooltip.setHeight(this.plotHeight)
+      this.tooltip.show(tooltipTitle, tooltipHTML, posOptions)        
+      // }
+      // else {
+      //   xPoint = x0
+      // }      
+      if (this.options.data[xData].scale !== 'Time') {
+        xPoint += (this[xAxis].bandwidth() / 2) // - this.options.margin.top
+      }
+      let trackingXStart = xPoint
+      let trackingXEnd = xPoint
+      let trackingYStart = 0
+      let trackingYEnd = this.plotHeight
+      if (this.options.orientation === 'horizontal') {
+        trackingXStart = 0
+        trackingXEnd = this.plotWidth
+        trackingYStart = xPoint
+        trackingYEnd = xPoint
+      }
       this.trackingLineLayer
         .select('.tracking-line')
-        .attr('x1', xPoint)
-        .attr('x2', xPoint)
-        .attr('y1', 0)
-        .attr('y2', this.plotHeight)
+        .attr('x1', trackingXStart)
+        .attr('x2', trackingXEnd)
+        .attr('y1', trackingYStart)
+        .attr('y2', trackingYEnd)
         .attr('stroke-width', 1)
         .attr('stroke-dasharray', '4 2')
         .attr('stroke', '#cccccc')
@@ -2797,22 +3406,22 @@ if (this.options.data[side].scale === 'Time') {
   }
   prep () {
     /* global d3 WebsyDesigns */ 
-this.leftAxisLayer = this.svg.append('g')
-this.rightAxisLayer = this.svg.append('g')
-this.bottomAxisLayer = this.svg.append('g')
-this.leftAxisLabel = this.svg.append('g')
-this.rightAxisLabel = this.svg.append('g')
-this.bottomAxisLabel = this.svg.append('g')
-this.plotArea = this.svg.append('g')
-this.areaLayer = this.svg.append('g')
-this.lineLayer = this.svg.append('g')
-this.barLayer = this.svg.append('g')
-this.labelLayer = this.svg.append('g')
-this.symbolLayer = this.svg.append('g')
-this.trackingLineLayer = this.svg.append('g')
+this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer')
+this.rightAxisLayer = this.svg.append('g').attr('class', 'right-axis-layer')
+this.bottomAxisLayer = this.svg.append('g').attr('class', 'bottom-axis-layer')
+this.leftAxisLabel = this.svg.append('g').attr('class', 'left-axis-label-layer')
+this.rightAxisLabel = this.svg.append('g').attr('class', 'right-axis-label-layer')
+this.bottomAxisLabel = this.svg.append('g').attr('class', 'bottom-axis-label-layer')
+this.plotArea = this.svg.append('g').attr('class', 'plot-layer')
+this.areaLayer = this.svg.append('g').attr('class', 'area-layer')
+this.lineLayer = this.svg.append('g').attr('class', 'line-layer')
+this.barLayer = this.svg.append('g').attr('class', 'bar-layer')
+this.labelLayer = this.svg.append('g').attr('class', 'label-layer')
+this.symbolLayer = this.svg.append('g').attr('class', 'symbol-layer')
+this.trackingLineLayer = this.svg.append('g').attr('class', 'tracking-line-layer')
 this.trackingLineLayer.append('line').attr('class', 'tracking-line')
 this.tooltip = new WebsyDesigns.WebsyChartTooltip(this.svg)
-this.eventLayer = this.svg.append('g').append('rect')
+this.eventLayer = this.svg.append('g').attr('class', 'event-line').append('rect')
 this.eventLayer
   .on('mouseout', this.handleEventMouseOut.bind(this))
   .on('mousemove', this.handleEventMouseMove.bind(this))
@@ -2871,9 +3480,44 @@ else {
   if (el) {
     this.width = el.clientWidth
     this.height = el.clientHeight
+    // establish the space and size for the legend
+    // the legend gets rendered so that we can get its actual size
+    if (this.options.showLegend === true) {
+      let legendData = this.options.data.series.map((s, i) => ({value: s.label || s.key, color: s.color || this.options.colors[i % this.options.colors.length]})) 
+      if (this.options.legendPosition === 'top' || this.options.legendPosition === 'bottom') {
+        this.legendArea.style('width', '100%')
+      }
+      if (this.options.legendPosition === 'left' || this.options.legendPosition === 'right') {
+        this.legendArea.style('height', '100%')
+        this.legendArea.style('width', this.legend.testWidth(d3.max(legendData.map(d => d.value))) + 'px')
+      }
+      this.legend.data = legendData
+      let legendSize = this.legend.getSize()
+      this.options.margin.legendTop = 0
+      this.options.margin.legendBottom = 0
+      this.options.margin.legendLeft = 0
+      this.options.margin.legendRight = 0
+      if (this.options.legendPosition === 'top') {
+        this.options.margin.legendTop = legendSize.height
+        this.legendArea.style('top', '0').style('bottom', 'unset')
+      }
+      if (this.options.legendPosition === 'bottom') {
+        this.options.margin.legendBottom = legendSize.height
+        this.legendArea.style('top', 'unset').style('bottom', '0')
+      }
+      if (this.options.legendPosition === 'left') {
+        this.options.margin.legendLeft = legendSize.width
+        this.legendArea.style('left', '0').style('right', 'unset').style('top', '0')
+      }
+      if (this.options.legendPosition === 'right') {
+        this.options.margin.legendRight = legendSize.width
+        this.legendArea.style('left', 'unset').style('right', '0').style('top', '0')
+      }
+    } 
     this.svg
-      .attr('width', this.width)
-      .attr('height', this.height)
+      .attr('width', this.width - this.options.margin.legendLeft - this.options.margin.legendRight)
+      .attr('height', this.height - this.options.margin.legendTop - this.options.margin.legendBottom)
+      .attr('transform', `translate(${this.options.margin.legendLeft}, ${this.options.margin.legendTop})`)
     this.longestLeft = 0
     this.longestRight = 0
     this.longestBottom = 0
@@ -2919,7 +3563,7 @@ else {
     this.options.margin.axisLeft = this.longestLeft * ((this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize) * 0.7
     this.options.margin.axisRight = this.longestRight * ((this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize) * 0.7
     this.options.margin.axisBottom = ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize) + 10
-    this.options.margin.axisTop = 0
+    this.options.margin.axisTop = 0       
     // adjust axis margins based on title options
     if (this.options.data.left && this.options.data.left.showTitle === true) {
       if (this.options.data.left.titlePosition === 1) {
@@ -2960,15 +3604,18 @@ else {
       }
     }    
     // Define the plot size
-    this.plotWidth = this.width - this.options.margin.left - this.options.margin.right - this.options.margin.axisLeft - this.options.margin.axisRight
-    this.plotHeight = this.height - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom - this.options.margin.axisTop
+    this.plotWidth = this.width - this.options.margin.legendLeft - this.options.margin.legendRight - this.options.margin.left - this.options.margin.right - this.options.margin.axisLeft - this.options.margin.axisRight
+    this.plotHeight = this.height - this.options.margin.legendTop - this.options.margin.legendBottom - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom - this.options.margin.axisTop
     // Translate the layers
     this.leftAxisLayer
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .style('font-size', (this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize)
     this.rightAxisLayer
       .attr('transform', `translate(${this.options.margin.left + this.plotWidth + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      .style('font-size', (this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize)
     this.bottomAxisLayer
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
+      .style('font-size', (this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize)
     this.leftAxisLabel
       .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.rightAxisLabel
@@ -3011,28 +3658,55 @@ else {
       this.bottomAxis.padding(this.options.data.bottom.padding || 0)   
     }
     if (this.options.margin.axisBottom > 0) {
+      let timeFormatPattern = ''
       let tickDefinition         
       if (this.options.data.bottom.data) {
         if (this.options.data.bottom.scale === 'Time') {
-          let diff = this.options.data.bottom.max.getTime() - this.options.data.bottom.min.getTime()
+          let diff = this.options.data.bottom.max.getTime() - this.options.data.bottom.min.getTime()          
           let oneDay = 1000 * 60 * 60 * 24
-          if (diff < 7 * oneDay) {
+          if (diff < (oneDay / 24 / 6)) {
+            tickDefinition = d3.timeSecond.every(15) 
+            timeFormatPattern = '%H:%M:%S'
+          }
+          else if (diff < (oneDay / 24)) {
+            tickDefinition = d3.timeMinute.every(1) 
+            timeFormatPattern = '%H:%M'
+          }
+          else if (diff < (oneDay / 6)) {
+            tickDefinition = d3.timeMinute.every(10) 
+            timeFormatPattern = '%H:%M'
+          }
+          else if (diff < (oneDay / 2)) {
+            tickDefinition = d3.timeMinute.every(30)
+            timeFormatPattern = '%H:%M' 
+          }
+          else if (diff < oneDay) {
+            tickDefinition = d3.timeHour.every(1) 
+            timeFormatPattern = '%H:%M'
+          }
+          else if (diff < 7 * oneDay) {
             tickDefinition = d3.timeDay.every(1) 
+            timeFormatPattern = '%d %b @ %H:%M'
           }
           else if (diff < 14 * oneDay) {
             tickDefinition = d3.timeDay.every(2) 
+            timeFormatPattern = '%d %b %Y'
           }
           else if (diff < 21 * oneDay) {
             tickDefinition = d3.timeDay.every(3) 
+            timeFormatPattern = '%d %b %Y'
           }
           else if (diff < 28 * oneDay) {
             tickDefinition = d3.timeDay.every(4) 
+            timeFormatPattern = '%d %b %Y'
           }
           else if (diff < 60 * oneDay) {
             tickDefinition = d3.timeDay.every(7) 
+            timeFormatPattern = '%d %b %Y'
           }
           else {
             tickDefinition = d3.timeMonth.every(1) 
+            timeFormatPattern = '%b %Y'
           }
         }
         else {
@@ -3041,14 +3715,18 @@ else {
       }
       else {
         tickDefinition = this.options.data.bottom.ticks || 5
-      }      
+      }  
+      this.options.calculatedTimeFormatPattern = timeFormatPattern
       let bAxisFunc = d3.axisBottom(this.bottomAxis)
         // .ticks(this.options.data.bottom.ticks || Math.min(this.options.data.bottom.data.length, 5))
         .ticks(tickDefinition)
+      console.log('tickDefinition', tickDefinition)
+      console.log(bAxisFunc)
       if (this.options.data.bottom.formatter) {
         bAxisFunc.tickFormat(d => this.options.data.bottom.formatter(d))        
       }
       this.bottomAxisLayer.call(bAxisFunc)
+      console.log(this.bottomAxisLayer.ticks)
       if (this.options.data.bottom.rotate) {
         this.bottomAxisLayer.selectAll('text')
           .attr('transform', `rotate(${this.options.data.bottom.rotate})`)
@@ -3126,7 +3804,8 @@ else {
       if (this.rightAxis.nice) {
         this.rightAxis.nice()
       }
-      if (this.options.margin.axisRight > 0) {
+      console.log('axis right', this.options.margin.axisRight)
+      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)
@@ -3232,7 +3911,7 @@ areas.enter().append('path')
   // .style('fill-opacity', 0)
   .attr('stroke', 'transparent')
   // .transition(this.transition)
-  .style('fill-opacity', series.opacity || 1)
+  .style('fill-opacity', series.opacity || 0.5)
 
   }
   renderbar (series, index) {
@@ -3240,12 +3919,16 @@ areas.enter().append('path')
 let xAxis = 'bottomAxis'
 let yAxis = 'leftAxis'
 let bars = this.barLayer.selectAll(`.bar_${series.key}`).data(series.data)
+let acummulativeY = new Array(this.options.data.series.length).fill(0)
 if (this.options.orientation === 'horizontal') {
   xAxis = 'leftAxis'
   yAxis = 'bottomAxis'
 }
 let barWidth = this[xAxis].bandwidth()
-function getBarHeight (d) {
+if (this.options.data.series.length > 1 && this.options.grouping !== 'stacked') {
+  barWidth = barWidth / this.options.data.series.length - 4
+}
+function getBarHeight (d, i) {
   if (this.options.orientation === 'horizontal') {
     return barWidth
   }
@@ -3253,28 +3936,50 @@ function getBarHeight (d) {
     return this[yAxis](d.y.value)
   }
 }
-function getBarWidth (d) {
+function getBarWidth (d, i) {
   if (this.options.orientation === 'horizontal') {
-    return this[yAxis](d.y.value)
+    let width = this[yAxis](d.y.value)
+    acummulativeY[d.y.index] += width
+    return width
   }
   else {
     return barWidth
   }
 }
-function getBarX (d) {
+function getBarX (d, i) {
   if (this.options.orientation === 'horizontal') {
-    return 0
+    if (this.options.grouping === 'stacked') {      
+      return this[yAxis](d.y.accumulative)
+    }
+    else {
+      return 0
+    }
   }
   else {
-    return this[xAxis](this.parseX(d.x.value))
+    if (this.options.grouping === 'stacked') {
+      return this[xAxis](this.parseX(d.x.value))
+    }
+    else {
+      return this[xAxis](this.parseX(d.x.value)) + (i * barWidth)
+    }    
   }
 }
-function getBarY (d) {
+function getBarY (d, i) {
   if (this.options.orientation === 'horizontal') {
-    return this[xAxis](this.parseX(d.x.value))
+    if (this.options.grouping === 'stacked') {
+      return this[xAxis](this.parseX(d.x.value))
+    }
+    else {
+      return this[xAxis](this.parseX(d.x.value)) + ((d.y.index || i) * barWidth)
+    }    
   }
   else {
-    return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value)
+    if (this.options.grouping === 'stacked') {      
+      return this[yAxis](d.y.accumulative)
+    }
+    else {
+      return 0
+    }
   }
 }
 bars
@@ -3306,7 +4011,7 @@ bars
 
   }
   renderLabels (series, index) {
-    /* global series index d3 */
+    /* global series index d3 WebsyDesigns */
 let xAxis = 'bottomAxis'
 let yAxis = 'leftAxis'  
 let that = this
@@ -3329,6 +4034,7 @@ if (this.options.showLabels) {
     .attr('y', getLabelY.bind(this))    
     .attr('class', `label_${series.key}`)
     .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)
+    .style('fill', this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(series.color))
     .transition(this.transition)
     .text(d => d.y.label || d.y.value)
   
@@ -3341,6 +4047,7 @@ if (this.options.showLabels) {
     .attr('alignment-baseline', 'central')
     .attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle')
     .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)
+    .style('fill', this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(series.color))
     .text(d => d.y.label || d.y.value)
     .each(function (d, i) {      
       if (that.options.orientation === 'horizontal') {
@@ -3359,18 +4066,28 @@ if (this.options.showLabels) {
 
 function getLabelX (d) {
   if (this.options.orientation === 'horizontal') {
-    return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) + 4
+    if (this.options.grouping === 'stacked') {
+      return this[yAxis](d.y.accumulative) + (this[yAxis](d.y.value) / 2)
+    }
+    else {
+      return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) + 4
+    }
   }
-  else {
+  else {    
     return this[xAxis](this.parseX(d.x.value)) + (this[xAxis].bandwidth() / 2)
   }
 }
 function getLabelY (d) {
-  if (this.options.orientation === 'horizontal') {
+  if (this.options.orientation === 'horizontal') {    
     return this[xAxis](this.parseX(d.x.value)) + (this[xAxis].bandwidth() / 2)
   }
   else {
-    return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) - 4
+    if (this.options.grouping === 'stacked') {
+      // 
+    }
+    else {
+      return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) - 4
+    }
   }
 }
 
@@ -3480,8 +4197,9 @@ if (el) {
   this.width = el.clientWidth
   this.height = el.clientHeight
   this.svg
-    .attr('width', this.width)
-    .attr('height', this.height)
+    .attr('width', this.width - this.options.margin.legendLeft - this.options.margin.legendRight)
+    .attr('height', this.height - this.options.margin.legendTop - this.options.margin.legendBottom)
+    .attr('transform', `translate(${this.options.margin.legendLeft}, ${this.options.margin.legendTop})`)
     // Define the plot height  
   // this.plotWidth = this.width - this.options.margin.left - this.options.margin.right - this.options.margin.axisLeft - this.options.margin.axisRight
   // this.plotHeight = this.height - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom
@@ -3569,6 +4287,99 @@ if (el) {
   }
 }
 
+class WebsyLegend {
+  constructor (elementId, options) {
+    const DEFAULTS = {
+      align: 'center',
+      direction: 'horizontal',
+      style: 'circle',
+      symbolSize: 16,
+      hPadding: 20,
+      vPadding: 10
+    }
+    this.elementId = elementId
+    this.options = Object.assign({}, DEFAULTS, options)
+    this._data = []
+    if (!elementId) {
+      console.log('No element Id provided for Websy Chart')		
+      return
+    }
+    const el = document.getElementById(this.elementId)    
+    if (el) {
+      el.classList.add('websy-legend')
+      this.render()
+    }
+    else {
+      console.error(`No element found with ID ${this.elementId}`)
+    }
+  }
+  getLegendItemHTML (d) {
+    return `
+      <div 
+        class='websy-legend-item ${this.options.direction}' 
+        style='margin: ${this.options.vPadding / 2}px ${this.options.hPadding / 2}px;'
+      >
+        <span 
+          class='symbol ${d.style || this.options.style}' 
+          style='
+            background-color: ${d.color};
+            width: ${this.options.symbolSize}px;
+            height: ${this.options.style === 'line' ? 3 : this.options.symbolSize}px;
+          '
+        ></span>
+        ${d.value}
+      </div>
+    `
+  }
+  getSize () {
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      return {
+        width: el.clientWidth,
+        height: el.clientHeight
+      }
+    }
+  }
+  set data (d) {
+    this._data = d
+    this.render()
+  }
+  render () {
+    this.resize()
+  }
+  resize () {
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      // if (this.options.width) {
+      //   el.width = this.options.width
+      // }
+      // if (this.options.height) {
+      //   el.height = this.options.height
+      // }
+      let html = `
+        <div class='text-${this.options.align}'>
+      `
+      html += this._data.map((d, i) => this.getLegendItemHTML(d)).join('')
+      html += `
+        <div>
+      `
+      el.innerHTML = html
+    }
+  }
+  testWidth (v) {
+    let html = this.getLegendItemHTML({value: v})
+    const el = document.createElement('div')
+    el.style.position = 'absolute'
+    // el.style.width = '100vw'
+    el.style.visibility = 'hidden'
+    el.innerHTML = html
+    document.body.appendChild(el)
+    let w = el.clientWidth + 30 // for padding
+    el.remove()
+    return w
+  }
+}
+
 /* global */
 class WebsyKPI {
   constructor (elementId, options) {
@@ -3638,17 +4449,20 @@ class WebsyKPI {
   }  
 }
 
-/* global L */ 
+/* global d3 L WebsyDesigns */ 
 class WebsyMap {
   constructor (elementId, options) {
     const DEFAULTS = {
-      tileUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      tileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
       disablePan: false,
       disableZoom: false,
       markerSize: 10,
       useClustering: false,
       maxMarkerSize: 50,
-      minMarkerSize: 20
+      minMarkerSize: 20,
+      data: {},
+      legendPosition: 'bottom',
+      colors: ['#5e4fa2', '#3288bd', '#66c2a5', '#abdda4', '#e6f598', '#fee08b', '#fdae61', '#f46d43', '#d53e4f', '#9e0142']
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
@@ -3674,8 +4488,13 @@ class WebsyMap {
       if (typeof L === 'undefined') {
         console.error('Leaflet library has not been loaded')
       }
+      el.innerHTML = `
+        <div id="${this.elementId}_map"></div>
+        <div id="${this.elementId}_legend" class="websy-map-legend"></div>
+      `
       el.addEventListener('click', this.handleClick.bind(this))
-      this.map = L.map(this.elementId, mapOptions)
+      this.legend = new WebsyDesigns.Legend(`${this.elementId}_legend`, {})
+      this.map = L.map(`${this.elementId}_map`, mapOptions)
       this.render()
     }
   }
@@ -3686,14 +4505,60 @@ class WebsyMap {
 
   }
   render () {
-    const el = document.getElementById(`${this.options.elementId}_map`)
-    
+    const mapEl = document.getElementById(`${this.elementId}_map`)
+    const legendEl = document.getElementById(`${this.elementId}_map`)
+    if (this.options.showLegend === true) {            
+      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') {
+        legendEl.style.width = '100%'
+      }
+      if (this.options.legendPosition === 'left' || this.options.legendPosition === 'right') {
+        legendEl.style.height = '100%'
+        legendEl.style.width = this.legend.testWidth(longestValue) + 'px'
+      }
+      this.legend.data = legendData
+      let legendSize = this.legend.getSize()
+      mapEl.style.position = 'relative'
+      if (this.options.legendPosition === 'top') {      
+        legendEl.style.top = 0
+        legendEl.style.bottom = 'unset'
+        mapEl.style.top = legendSize.height
+        mapEl.style.height = `calc(100% - ${legendSize.height}px)`
+      }
+      if (this.options.legendPosition === 'bottom') {      
+        legendEl.style.top = 'unset'
+        legendEl.style.bottom = 0      
+        mapEl.style.height = `calc(100% - ${legendSize.height}px)`
+      }
+      if (this.options.legendPosition === 'left') {      
+        legendEl.style.left = 0
+        legendEl.style.right = 'unset'
+        legendEl.style.top = 0
+        mapEl.style.left = `${legendSize.width}px`
+        mapEl.style.width = `calc(100% - ${legendSize.width}px)`
+      }
+      if (this.options.legendPosition === 'right') {      
+        legendEl.style.left = 'unset'
+        legendEl.style.right = 0
+        legendEl.style.top = 0
+        mapEl.style.width = `calc(100% - ${legendSize.width}px)`
+      } 
+    }
+    else {
+      mapEl.style.width = '100%'
+      mapEl.style.height = '100%'
+    }
     const t = L.tileLayer(this.options.tileUrl, {
       attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(this.map)
     if (this.geo) {
       this.map.removeLayer(this.geo)
     }
+    if (this.polygons) {
+      this.polygons.forEach(p => this.map.removeLayer(p))
+    }
+    this.polygons = []
     if (this.options.geoJSON) {
       this.geo = L.geoJSON(this.options.geoJSON, {
         style: feature => {
@@ -3716,67 +4581,58 @@ class WebsyMap {
         }
       }).addTo(this.map)
     }
-    this.markers = []    
-    if (this.cluster) {
-      this.map.removeLayer(this.cluster)
-    }
-    // this.cluster = L.markerClusterGroup({
-    //   iconCreateFunction: cluster => {
-    //     let markerSize = this.options.minMarkerSize + ((this.options.maxMarkerSize - this.options.minMarkerSize) * (cluster.getChildCount() / this.data.length))
-    //     console.log(this.data.length, cluster.getChildCount(), markerSize)
-    //     return L.divIcon({
-    //       html: `
-    //         <div
-    //           class='simple-marker'
-    //           style='
-    //             height: ${markerSize}px;
-    //             width: ${markerSize}px;
-    //             margin-top: -${markerSize / 2}px;
-    //             margin-left: -${markerSize / 2}px;
-    //             text-align: center;
-    //             line-height: ${markerSize}px;
-    //           '>
-    //           ${cluster.getChildCount()}
-    //         </div>
-    //       `
-    //     })
+    // this.markers = []        
+    // this.data = [] // this.data.filter(d => d.Latitude.qNum !== 0 && d.Longitude.qNum !== 0)    
+    // this.data.forEach(r => {
+    //   // console.log(r)
+    //   if (r.Latitude.qNum !== 0 && r.Longitude.qNum !== 0) {
+    //     const markerOptions = {}
+    //     if (this.options.simpleMarker === true) {
+    //       markerOptions.icon = L.divIcon({className: 'simple-marker'})
+    //     }
+    //     if (this.options.markerUrl) {
+    //       markerOptions.icon = L.icon({iconUrl: this.options.markerUrl})
+    //     }
+    //     markerOptions.data = r
+    //     let m = L.marker([r.Latitude.qText, r.Longitude.qText], markerOptions)
+    //     m.on('click', this.handleMapClick.bind(this))
+    //     if (this.options.useClustering === false) {
+    //       m.addTo(this.map)
+    //     }
+    //     this.markers.push(m)
+    //     if (this.options.useClustering === true) {
+    //       this.cluster.addLayer(m)
+    //     }
     //   }
     // })
-    this.data = [] // this.data.filter(d => d.Latitude.qNum !== 0 && d.Longitude.qNum !== 0)    
-    this.data.forEach(r => {
-      // console.log(r)
-      if (r.Latitude.qNum !== 0 && r.Longitude.qNum !== 0) {
-        const markerOptions = {}
-        if (this.options.simpleMarker === true) {
-          markerOptions.icon = L.divIcon({className: 'simple-marker'})
-        }
-        if (this.options.markerUrl) {
-          markerOptions.icon = L.icon({iconUrl: this.options.markerUrl})
+    if (this.options.data.polygons) {
+      this.options.data.polygons.forEach((p, i) => {
+        if (!p.options) {
+          p.options = {}
         }
-        markerOptions.data = r
-        let m = L.marker([r.Latitude.qText, r.Longitude.qText], markerOptions)
-        m.on('click', this.handleMapClick.bind(this))
-        if (this.options.useClustering === false) {
-          m.addTo(this.map)
+        if (!p.options.color) {
+          p.options.color = this.options.colors[i % this.options.colors.length]
         }
-        this.markers.push(m)
-        if (this.options.useClustering === true) {
-          this.cluster.addLayer(m)
-        }
-      }
-    })
-    if (this.data.length > 0) {            
-      el.classList.remove('hidden')
-      if (this.options.useClustering === true) {
-        this.map.addLayer(this.cluster)
-      }
-      const g = L.featureGroup(this.markers)
-      this.map.fitBounds(g.getBounds())
-      this.map.invalidateSize()
+        const pol = L.polygon(p.data.map(c => c.map(d => [d.Latitude, d.Longitude])), p.options).addTo(this.map)
+        this.polygons.push(pol)
+        this.map.fitBounds(pol.getBounds())
+      })
     }
-    else if (this.geo) {
+    // if (this.data.markers.length > 0) {            
+    //   el.classList.remove('hidden')
+    //   if (this.options.useClustering === true) {
+    //     this.map.addLayer(this.cluster)
+    //   }
+    //   const g = L.featureGroup(this.markers)
+    //   this.map.fitBounds(g.getBounds())
+    //   this.map.invalidateSize()
+    // }
+    if (this.geo) {
       this.map.fitBounds(this.geo.getBounds())
     }
+    else if (this.polygons) {
+      // this.map.fitBounds(this.geo.getBounds())
+    }
     else if (this.options.center) {
       this.map.setView(this.options.center, this.options.zoom || null)
     }
@@ -3810,24 +4666,36 @@ class WebsyChartTooltip {
     title,
     html,
     position = {
-      top: 0,
-      left: 0,
+      top: 'unset',
+      bottom: 'unset',
+      left: 0,      
       width: 0,
       height: 0,
       onLeft: false
     }
   ) {    
+    let classes = ['active']
+    if (position.positioning === 'vertical') {
+      classes.push('vertical')
+    }
+    if (position.onLeft === true) {
+      classes.push('left')
+    }
+    if (position.onTop === true) {
+      classes.push('top')
+    }
+    console.log(classes.join(' '))
     let fO = this.tooltipLayer
       .selectAll('foreignObject')
       .attr('width', `${position.width}px`)
       // .attr('height', `${position.height}px`)
-      .attr('y', `0px`)
-      .classed('left', position.onLeft)
+      // .attr('y', `0px`)      
+      .attr('class', `websy-chart-tooltip ${classes.join(' ')}`)
     this.tooltipContent
-      .classed('active', true)
+      .attr('class', `websy-chart-tooltip-content ${classes.join(' ')}`)
       .style('width', `${position.width}px`)
       // .style('left', '0px')
-      .style('top', `0px`)
+      // .style('top', `0px`)
       .html(`<div class='title'>${title}</div>${html}`)
     if (
       navigator.userAgent.indexOf('Chrome') === -1 &&
@@ -3835,13 +4703,22 @@ class WebsyChartTooltip {
     ) {
       fO.attr('x', '0px')
       this.tooltipContent
-        .style('left', `${position.top}px`)
-        .style('top', `${position.top}px`)
+        .style('left', position.positioning !== 'vertical' ? `${position.left}px` : 'unset')
+        .style('top', position.onTop !== true ? `${position.top}px` : 'unset')
+        .style('bottom', position.onTop === true ? `${position.bottom}px` : 'unset')
       // that.tooltipLayer.selectAll('foreignObject').transform(that.margin.left, that.margin.top)
     }
     else {
-      fO.attr('x', `${position.left}px`)
-      this.tooltipContent.style('left', '0px')
+      if (position.positioning === 'vertical') {
+        fO.attr('x', `${position.left}px`)
+        fO.attr('y', `${position.onTop === true ? position.bottom - this.tooltipContent._groups[0][0].clientHeight : position.top}px`)                
+      }
+      else {
+        fO.attr('x', `${position.left}px`)
+        fO.attr('y', `${position.top}px`)        
+      }            
+      this.tooltipContent.style('left', 'unset')
+      this.tooltipContent.style('top', 'unset')
     }
   }
   transform (x, y) {
@@ -3849,52 +4726,51 @@ class WebsyChartTooltip {
   }
 }
 
-const WebsyUtils = {
-  createIdentity: (size = 6) => {	
-    let text = ''
-    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  
-    for (let i = 0; i < size; i++) {
-      text += possible.charAt(Math.floor(Math.random() * possible.length))
-    }
-    return text
-  },
-  getElementPos: el => {
-    const rect = el.getBoundingClientRect()
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-    return { 
-      top: rect.top + scrollTop,
-      left: rect.left + scrollLeft,
-      bottom: rect.top + scrollTop + el.clientHeight,
-      right: rect.left + scrollLeft + el.clientWidth
-    }
-  }
-}
-
 
 const WebsyDesigns = {
   WebsyPopupDialog,
+  PopupDialog: WebsyPopupDialog,
   WebsyLoadingDialog,
+  LoadingDialog: WebsyLoadingDialog,
   WebsyNavigationMenu,
+  NavigationMenu: WebsyNavigationMenu,
   WebsyForm,
+  Form: WebsyForm,
   WebsyDatePicker,
+  DatePicker: WebsyDatePicker,
   WebsyDropdown,
+  Dropdown: WebsyDropdown,
   WebsyResultList,
+  ResultList: WebsyResultList,
   WebsyTemplate,
+  Template: WebsyTemplate,
   WebsyPubSub,
+  PubSub: WebsyPubSub,
   WebsyRouter,
+  Router: WebsyRouter,
   WebsyTable,
+  Table: WebsyTable,
   WebsyChart,
+  Chart: WebsyChart,
   WebsyChartTooltip,
+  ChartTooltip: WebsyChartTooltip,
+  Legend: WebsyLegend,
   WebsyMap,
+  Map: WebsyMap,
   WebsyKPI,
-  WebsyPDFButton,
+  KPI: WebsyKPI,
+  WebsyPDFButton,  
   PDFButton: WebsyPDFButton,
   APIService,
-  WebsyUtils
+  WebsyUtils,
+  Utils: WebsyUtils,
+  ButtonGroup,
+  WebsySwitch: Switch,
+  Switch
 }
 
+WebsyDesigns.service = new WebsyDesigns.APIService('')
+
 const GlobalPubSub = new WebsyPubSub('empty', {})
 
 function recaptchaReadyCallBack () {