@websy/websy-designs 1.2.33 → 1.3.1

package/dist/websy-designs.debug.js

@@ -29,6 +29,7 @@
   WebsySignup
   ResponsiveText
   WebsyDragDrop
+  WebsySearch
   Pager
 */ 
 
@@ -561,6 +562,7 @@ class WebsyDatePicker {
     }
   }
   close (confirm, isRange = false) {
+    console.trace()
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
     const el = document.getElementById(this.elementId)
@@ -577,19 +579,19 @@ class WebsyDatePicker {
             for (let i = this.selectedRangeDates[0]; i < this.selectedRangeDates[1] + 1; i++) {
               hoursOut.push(this.options.hours[i])
             }            
-            this.options.onChange(hoursOut, true)        
+            this.options.onChange(hoursOut, true, this.selectedRange)        
           }     
           else {
-            this.options.onChange(this.selectedRangeDates, true)        
+            this.options.onChange(this.selectedRangeDates, true, this.selectedRange)        
           }          
         }
         else {
           if (this.options.mode === 'hour') {
             let hoursOut = this.currentselection.map(h => this.options.hours[h])
-            this.options.onChange(hoursOut, true)        
+            this.options.onChange(hoursOut, true, this.selectedRange)        
           }     
           else {
-            this.options.onChange(this.currentselection, isRange)
+            this.options.onChange(this.currentselection, isRange, this.selectedRange)
           }
         }
       }
@@ -611,7 +613,8 @@ class WebsyDatePicker {
     if (typeof d === 'number') {
       d = new Date(d)
     }
-    return new Date(d.setHours(0, 0, 0, 0))
+    // d.setTime(d.getTime() + d.getTimezoneOffset() * 60000)
+    return new Date(d.setUTCHours(12, 0, 0, 0))
   }
   handleClick (event) {
     if (event.target.classList.contains('websy-date-picker-header')) {
@@ -629,11 +632,7 @@ class WebsyDatePicker {
       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)
@@ -662,7 +661,8 @@ class WebsyDatePicker {
   handleMouseDown (event) {    
     if (this.shiftPressed === true && this.currentselection.length > 0) {
       this.mouseDownId = this.currentselection[this.currentselection.length - 1]
-      this.selectDate(+event.target.id.split('_')[1])
+      let dateId = event.target.getAttribute('data-id')
+      this.selectDate(+dateId)
     }
     else {
       this.mouseDown = true
@@ -675,7 +675,7 @@ class WebsyDatePicker {
           this.currentselection = []
           this.customRangeSelected = false 
         }       
-        this.mouseDownId = +event.target.id.split('_')[1]       
+        this.mouseDownId = +event.target.getAttribute('data-id')
         this.selectDate(this.mouseDownId)
       }
     }    
@@ -686,9 +686,10 @@ class WebsyDatePicker {
         if (event.target.classList.contains('websy-disabled-date')) {
           return
         }
-        if (event.target.id.split('_')[1] !== this.mouseDownId) {
+        let dateId = +event.target.getAttribute('data-id')
+        if (dateId !== this.mouseDownId) {
           this.dragging = true
-          this.selectDate(+event.target.id.split('_')[1])
+          this.selectDate(dateId)
         }
       }
     }
@@ -736,6 +737,7 @@ class WebsyDatePicker {
         let rangeEnd
         if (this.options.mode === 'date') {          
           d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))          
+          d.setUTCHours(12, 0, 0, 0)
           d = d.getTime()
           rangeStart = this.selectedRangeDates[0].getTime()
           rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
@@ -794,9 +796,11 @@ class WebsyDatePicker {
         else if (this.options.mode === 'hour') {
           dateEl = document.getElementById(`${this.elementId}_${d}_hour`)
         }
-        dateEl.classList.add('selected')
-        dateEl.classList.add('first')
-        dateEl.classList.add('last')
+        if (dateEl) {
+          dateEl.classList.add('selected')
+          dateEl.classList.add('first')
+          dateEl.classList.add('last')
+        }        
       })
     }
   }
@@ -1005,7 +1009,7 @@ class WebsyDatePicker {
           }
           html += paddedDays.join('')
         }
-        html += months[key].map(d => `<li id='${this.elementId}_${d.id}_date' class='websy-dp-date ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.dayOfMonth}</li>`).join('')
+        html += months[key].map(d => `<li id='${this.elementId}_${d.id}_date' data-id='${d.id}' class='websy-dp-date ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.dayOfMonth}</li>`).join('')
         html += `
             </ul>
           </div>
@@ -1018,7 +1022,7 @@ class WebsyDatePicker {
         yearList.reverse()
       }
       html += `<div id='${this.elementId}_dateList' class='websy-dp-date-list'><ul>`
-      html += yearList.map(d => `<li id='${this.elementId}_${d.id}_year' class='websy-dp-date websy-dp-year ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.year}</li>`).join('')
+      html += yearList.map(d => `<li id='${this.elementId}_${d.id}_year' data-id='${d.id}' class='websy-dp-date websy-dp-year ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.year}</li>`).join('')
       html += `</ul></div>`
     }
     else if (this.options.mode === 'monthyear') {
@@ -1035,7 +1039,7 @@ class WebsyDatePicker {
           }
           html += paddedMonths.join('')
         }
-        html += this.monthYears[year].map(d => `<li id='${this.elementId}_${d.id}_monthyear' data-year='${d.year}' class='websy-dp-date websy-dp-monthyear'>${d.month}</li>`).join('')        
+        html += this.monthYears[year].map(d => `<li id='${this.elementId}_${d.id}_monthyear' data-id='${d.id}' data-year='${d.year}' class='websy-dp-date websy-dp-monthyear'>${d.month}</li>`).join('')        
         html += `</ul>`
       }
       html += `</div>`
@@ -1126,17 +1130,8 @@ class WebsyDatePicker {
   selectRange (index, confirm = true) {
     if (this.options.ranges[this.options.mode][index]) {
       this.selectedRangeDates = [...this.options.ranges[this.options.mode][index].range]
-      this.currentselection = [...this.options.ranges[this.options.mode][index].range]
+      this.currentselection = this.options.ranges[this.options.mode][index].range.map(d => d.getTime())
       this.selectedRange = +index
-      const el = document.getElementById(`${this.elementId}_header`)
-      if (el) {
-        if (this.selectedRange === 0) {
-          el.classList.remove('range-selected')
-        }
-        else {
-          el.classList.add('range-selected')
-        }
-      }
       this.highlightRange()
       this.updateRange()      
       this.close(confirm, true)
@@ -1145,14 +1140,16 @@ class WebsyDatePicker {
   selectCustomRange (rangeInput) {
     this.selectedRange = -1
     let isContinuousRange = true
-    if (rangeInput.length === 1) {
-      this.selectedRangeDates = [...rangeInput]
-      this.customRangeSelected = true
-    }
-    else if (rangeInput.length === 2) {      
-      this.selectedRangeDates = [...rangeInput]
-      this.customRangeSelected = true
-    }
+    // if (rangeInput.length === 1) {
+    //   this.selectedRangeDates = [...rangeInput]
+    //   this.customRangeSelected = true
+    // }
+    // else if (rangeInput.length === 2) {      
+    //   this.selectedRangeDates = [...rangeInput]
+    //   this.customRangeSelected = true
+    // }
+    this.selectedRangeDates = [...rangeInput]
+    this.customRangeSelected = true
     rangeInput.forEach((r, i) => {
       if (i > 0) {
         if (this.options.mode === 'date' || this.options.mode === 'monthyear') {          
@@ -1290,6 +1287,15 @@ class WebsyDatePicker {
     if (labelEl) {
       labelEl.innerHTML = range.label      
     }
+    const headerEl = document.getElementById(`${this.elementId}_header`)
+    if (headerEl) {
+      if (this.selectedRange === 0) {
+        headerEl.classList.remove('range-selected')
+      }
+      else {
+        headerEl.classList.add('range-selected')
+      }
+    }
   }
 }
 
@@ -1411,6 +1417,7 @@ class WebsyDropdown {
       if (typeof d.index === 'undefined') {
         d.index = i        
       }
+      d.currentIndex = i
       return d
     })    
     const headerEl = document.getElementById(`${this.elementId}_header`)   
@@ -1418,15 +1425,17 @@ class WebsyDropdown {
       headerEl.classList[`${this.options.allowClear === true ? 'add' : 'remove'}`]('allow-clear')
     }
     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 (el) {
+      if (el.childElementCount === 0) {
+        this.render()
       }
-      this.renderItems()
-    }    
+      else {
+        if (this.options.items.length === 0) {
+          this.options.items = [{label: this.options.noItemsText || 'No Items'}]
+        }
+        this.renderItems()
+      } 
+    }        
   }
   get data () {
     return this.options.items
@@ -1667,6 +1676,10 @@ class WebsyDropdown {
     const labelEl = document.getElementById(`${this.elementId}_selectedItems`)
     const inputEl = document.getElementById(`${this.elementId}_input`)
     const itemEls = el.querySelectorAll(`.websy-dropdown-item`)
+    let dataToUse = this._originalData
+    if (this.options.onSearch) {
+      dataToUse = this.options.items
+    }
     for (let i = 0; i < itemEls.length; i++) {
       itemEls[i].classList.remove('active')
       let index = itemEls[i].getAttribute('data-index')
@@ -1702,14 +1715,14 @@ class WebsyDropdown {
       }
       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)
+          let selectedLabels = this.selectedItems.map(s => dataToUse[s].label || dataToUse[s].value).join(this.options.multiValueDelimiter)
+          let selectedValues = this.selectedItems.map(s => dataToUse[s].value || dataToUse[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)
+          let selectedValues = this.selectedItems.map(s => dataToUse[s].value || dataToUse[s].label).join(this.options.multiValueDelimiter)
           labelEl.innerHTML = `${this.selectedItems.length} selected`
           labelEl.setAttribute('data-info', '')
           inputEl.value = selectedValues
@@ -1723,6 +1736,10 @@ class WebsyDropdown {
     }
   }
   updateSelected (index) {
+    let dataToUse = this._originalData && this._originalData.length > 0 ? this._originalData : this.options.items
+    if (this.options.onSearch) {
+      dataToUse = this.options.items
+    }
     if (typeof index !== 'undefined' && index !== null) {
       let pos = this.selectedItems.indexOf(index)      
       if (this.options.multiSelect === false) {
@@ -1738,10 +1755,10 @@ class WebsyDropdown {
       } 
     }    
     // const item = this.options.items[index]
-    const item = this._originalData[index] || this.options.items[index]
+    const item = dataToUse[index]
     this.updateHeader(item)
     if (item && this.options.onItemSelected) {
-      this.options.onItemSelected(item, this.selectedItems, this._originalData || this.options.items, this.options)
+      this.options.onItemSelected(item, this.selectedItems, dataToUse, this.options)
     }
     if (this.options.closeAfterSelection === true) {
       this.close() 
@@ -1755,7 +1772,8 @@ class WebsyDragDrop {
     const DEFAULTS = {
       items: [],
       orientation: 'horizontal',
-      dropPlaceholder: 'Drop item here'
+      dropPlaceholder: 'Drop item here',
+      accepts: 'application/wd-item'
     }
     this.busy = false
     this.options = Object.assign({}, DEFAULTS, options)
@@ -1781,9 +1799,7 @@ class WebsyDragDrop {
     else {
       console.error(`No element found with ID ${this.elementId}`)
     }
-    GlobalPubSub.subscribe(this.elementId, 'requestForDDItem', this.handleRequestForItem.bind(this))
-    console.log('constructor dd')
-    console.trace()
+    GlobalPubSub.subscribe(this.elementId, 'requestForDDItem', this.handleRequestForItem.bind(this))        
     GlobalPubSub.subscribe(this.elementId, 'add', this.addItem.bind(this))
     this.render()
   }
@@ -1816,7 +1832,7 @@ class WebsyDragDrop {
       item.id = WebsyDesigns.Utils.createIdentity()
     }
     let html = `
-      <div id='${item.id}_item' class='websy-dragdrop-item' draggable='true' data-id='${item.id}'>        
+      <div id='${item.id}_item' class='websy-dragdrop-item ${(item.classes || []).join(' ')}' draggable='true' data-id='${item.id}'>        
         <div id='${item.id}_itemInner' class='websy-dragdrop-item-inner' data-id='${item.id}'>
     `
     if (item.component) {
@@ -1845,24 +1861,27 @@ class WebsyDragDrop {
   }
   handleDragStart (event) {    
     this.draggedId = event.target.getAttribute('data-id')      
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('application/wd-item', JSON.stringify({el: event.target.id, id: this.elementId, itemId: this.draggedId}))
-    console.log('drag start', event)
-    event.target.style.opacity = 0.5
+    event.dataTransfer.effectAllowed = 'move'    
+    event.dataTransfer.setData(this.options.accepts, JSON.stringify({el: event.target.id, id: this.elementId, itemId: this.draggedId}))     
+    event.target.classList.add('dragging')
+    // event.target.style.opacity = 0.5
     this.dragging = true
   }
-  handleDragOver (event) {
-    console.log('drag over', event.target.classList)
+  handleDragOver (event) {    
     if (event.preventDefault) {
       event.preventDefault()
     }
+    console.log('drag', event.target.classList)
     if (!event.target.classList.contains('droppable')) {
       return
     }
+    if (event.dataTransfer.types.indexOf(this.options.accepts) === -1) {
+      return
+    }       
     event.target.classList.add('drag-over')
   }
   handleDragLeave (event) {
-    console.log('drag leave', event.target.classList)
+    // console.log('drag leave', event.target.classList)
     if (!event.target.classList.contains('droppable')) {
       return
     }
@@ -1873,15 +1892,18 @@ class WebsyDragDrop {
     // this.removeExpandedDrop(side, id, droppedItem)  
   }
   handleDrop (event) {
-    console.log('drag drop')
-    console.log(event.dataTransfer.getData('application/wd-item'))
-    const data = JSON.parse(event.dataTransfer.getData('application/wd-item'))
+    // console.log('drag drop')
+    // console.log(event.dataTransfer.getData('application/wd-item'))    
+    const data = JSON.parse(event.dataTransfer.getData(this.options.accepts))
     if (event.preventDefault) {
       event.preventDefault()
     }
     if (!event.target.classList.contains('droppable')) {
       return
     }
+    if (event.dataTransfer.types.indexOf(this.options.accepts) === -1) {
+      return
+    }
     let side = event.target.getAttribute('data-side')
     let id = event.target.getAttribute('data-id')
     let index = this.getItemIndex(id)
@@ -1891,7 +1913,7 @@ class WebsyDragDrop {
       index += 1
     }   
     if (draggedIndex === -1) {
-      console.log('requestForDDItem')
+      // console.log('requestForDDItem')
       GlobalPubSub.publish(data.id, 'requestForDDItem', {
         group: this.options.group,
         source: data.id,
@@ -1929,8 +1951,9 @@ class WebsyDragDrop {
     }
   }
   handleDragEnd (event) {    
-    console.log('drag end')
+    // console.log('drag end')
     event.target.style.opacity = 1
+    event.target.classList.remove('dragging')
     this.draggedId = null
     this.dragging = false
     const startEl = document.getElementById(`${this.elementId}start_item`)
@@ -3002,9 +3025,9 @@ class WebsyPubSub {
       }
     }
     else {
-      if (this.subscriptions[method]) {
-        this.subscriptions[method].forEach(fn => {
-          fn(data)
+      if (this.subscriptions[id]) {
+        this.subscriptions[id].forEach(fn => {
+          fn(method)
         })
       }
     }
@@ -3019,10 +3042,10 @@ class WebsyPubSub {
       }
     }
     else {
-      if (!this.subscriptions[method]) {
-        this.subscriptions[method] = []
+      if (!this.subscriptions[id]) {
+        this.subscriptions[id] = []
       }
-      this.subscriptions[method].push(fn)
+      this.subscriptions[id].push(method)
     }
   }
 }
@@ -4020,6 +4043,55 @@ class WebsyRouter {
   }
 }
 
+class WebsySearch {
+  constructor (elementId, options) {
+    this.elementId = elementId
+    const DEFAULTS = {
+      searchIcon: `<svg class='search' width="20" height="20" viewBox="0 0 512 512"><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`,
+      clearIcon: `<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>`,
+      placeholder: 'Search',
+      searchTimeout: 500,
+      minLength: 2
+    }
+    this.options = Object.assign({}, DEFAULTS, options)
+    this.searchTimeoutFn = null
+    const el = document.getElementById(elementId)
+    if (el) {
+      // el.addEventListener('click', this.handleClick.bind(this))
+      el.addEventListener('keyup', this.handleKeyUp.bind(this))
+      el.innerHTML = `
+          <div class='websy-search-input-container'>
+            ${this.options.searchIcon}
+            <input id='${this.elementId}_search' class='websy-search-input' placeholder='${this.options.placeholder || 'Search'}'>
+            ${this.options.clearIcon}
+          </div>
+        `
+    }
+    else {
+      console.log('No element found with Id', elementId)
+    }
+  }
+  handleKeyUp (event) {
+    if (event.target.classList.contains('websy-search-input')) {
+      if (this.searchTimeoutFn) {
+        clearTimeout(this.searchTimeoutFn)
+      }
+      if (event.target.value.length >= this.options.minLength) {
+        this.searchTimeoutFn = setTimeout(() => {
+          if (this.options.onSearch) {
+            this.options.onSearch(event.target.value)
+          }
+        }, this.options.searchTimeout) 
+      }      
+      else {
+        if (this.options.onSearch) {
+          this.options.onSearch('')
+        }
+      }
+    }
+  }
+}
+
 /* global WebsyDesigns ENVIRONMENT */ 
 class WebsySignup {
   constructor (elementId, options) {
@@ -4295,6 +4367,7 @@ const WebsyUtils = {
     let red = 0
     let green = 0
     let blue = 0
+    let alpha = 1
     if (backgroundColor.indexOf('#') !== -1) {
       // hex color
       backgroundColor = backgroundColor.replace('#', '')
@@ -4306,13 +4379,15 @@ const WebsyUtils = {
     }
     else if (backgroundColor.toLowerCase().indexOf('rgb') !== -1) {
       // rgb color
-      colorParts = backgroundColor.replace(/rgb\(/gi, '').replace(/\)/gi, '')
+      colorParts = backgroundColor.replace(/rgba\(/gi, '').replace(/\)/gi, '')
+      colorParts = colorParts.replace(/rgb\(/gi, '')
       colorParts = colorParts.split(',')
       red = colorParts[0]
       green = colorParts[1]
       blue = colorParts[2]
+      alpha = colorParts[3] || 1
     }
-    return (red * 0.299 + green * 0.587 + blue * 0.114) > 186 ? darkColor : lightColor
+    return ((red * 0.299 + green * 0.587 + blue * 0.114) / alpha) > 186 ? darkColor : lightColor
   },
   measureText (text, rotation = 0, fontSize = '12px') {
     if (!isNaN(fontSize)) {
@@ -4762,8 +4837,15 @@ class WebsyTable {
     }
     let headHTML = '<tr>' + this.options.columns.map((c, i) => {
       if (c.show !== false) {
+        let style = ''             
+        if (c.style) {
+          style += c.style
+        }        
+        if (c.width) {
+          style += `width: ${(c.width || 'auto')};`
+        }   
         return `
-        <th ${c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : ''}>
+        <th style="${style}">
           <div class ="tableHeader">
             <div class="leftSection">
               <div
@@ -5438,7 +5520,8 @@ class WebsyTable3 {
       showTotalsAbove: true,
       minHandleSize: 20,
       maxColWidth: '50%',
-      allowPivoting: false
+      allowPivoting: false,
+      searchIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-f</title><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`
     }
     this.options = Object.assign({}, DEFAULTS, options)
     this.sizes = {}
@@ -5549,9 +5632,29 @@ class WebsyTable3 {
     data.forEach(row => {
       bodyHtml += `<tr class="websy-table-row">`
       row.forEach((cell, cellIndex) => {
+        if (typeof sizingColumns[cellIndex] === 'undefined') {
+          return // need to revisit this logic
+        }
+        let style = ''
+        if (cell.style) {
+          style += cell.style
+        }
+        if (useWidths === true) {
+          style += `max-width: ${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}px!important;`
+        }
+        if (cell.backgroundColor) {
+          style += `background-color: ${cell.backgroundColor}; `
+          if (!cell.color) {
+            style += `color: ${WebsyDesigns.Utils.getLightDark(cell.backgroundColor)}; `  
+          }
+        }
+        if (cell.color) {
+          style += `color: ${cell.color}; `
+        }
+        console.log('rowspan', cell.rowspan)
         bodyHtml += `<td 
-          class='websy-table-cell'
-          style='${cell.style}'
+          class='websy-table-cell ${(cell.classes || []).join(' ')}'
+          style='${style}'
           data-info='${cell.value}'
           colspan='${cell.colspan || 1}'
           rowspan='${cell.rowspan || 1}'
@@ -5590,7 +5693,7 @@ class WebsyTable3 {
         return
       }
       headerHtml += `<tr class="websy-table-row  websy-table-header-row">`
-      row.forEach(col => {
+      row.forEach((col, colIndex) => {
         headerHtml += `<td 
           class='websy-table-cell'  
           style='${col.style}'       
@@ -5605,13 +5708,35 @@ class WebsyTable3 {
         // }
         headerHtml += `        
           >
-          ${col.name}
+          <div>
+            ${col.name}
+            ${col.searchable === true ? this.buildSearchIcon(col, colIndex) : ''}
+          </div>
         </td>`
       })
       headerHtml += `</tr>`
     })
+    const dropdownEl = document.getElementById(`${this.elementId}_dropdownContainer`)          
+    this.options.columns[this.options.columns.length - 1].forEach((c, i) => {
+      if (c.searchable && c.isExternalSearch === true) {      
+        const testEl = document.getElementById(`${this.elementId}_columnSearch_${c.dimId || i}`)
+        if (!testEl) {
+          const newE = document.createElement('div')
+          newE.id = `${this.elementId}_columnSearch_${c.dimId || i}`
+          newE.className = 'websy-modal-dropdown'
+          dropdownEl.appendChild(newE)
+        }
+      }
+    })      
     return headerHtml
   }
+  buildSearchIcon (col, index) {
+    return `
+      <div class="websy-table-search-icon" data-col-id="${col.dimId}" data-col-index="${index}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-f</title><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>
+      </div>
+    `
+  } 
   buildTotalHtml (useWidths = false) {
     if (!this.options.totals) {
       return ''
@@ -5687,11 +5812,13 @@ class WebsyTable3 {
       }
     })
     this.sizes.totalWidth = this.options.columns[this.options.columns.length - 1].reduce((a, b) => a + (b.width || b.actualWidth), 0)
+    this.sizes.totalNonPinnedWidth = this.options.columns[this.options.columns.length - 1].filter((c, i) => i >= this.pinnedColumns).reduce((a, b) => a + (b.width || b.actualWidth), 0)
     const outerSize = outerEl.getBoundingClientRect()
     if (this.sizes.totalWidth < outerSize.width) {
       this.sizes.totalWidth = 0
+      this.sizes.totalNonPinnedWidth = 0
       let equalWidth = outerSize.width / this.options.columns[this.options.columns.length - 1].length
-      this.options.columns[this.options.columns.length - 1].forEach((c, i) => {
+      this.options.columns[this.options.columns.length - 1].forEach((c, i) => {        
         if (!c.width) {
           if (c.actualWidth < equalWidth) {
             // adjust the width
@@ -5699,6 +5826,9 @@ class WebsyTable3 {
           }
         }
         this.sizes.totalWidth += c.width || c.actualWidth
+        if (i < this.pinnedColumns) {
+          this.sizes.totalNonPinnedWidth += c.width || c.actualWidth
+        }
         equalWidth = (outerSize.width - this.sizes.totalWidth) / (this.options.columns[this.options.columns.length - 1].length - (i + 1))
       })
     }
@@ -5719,9 +5849,15 @@ class WebsyTable3 {
     if (this.sizes.rowsToRender < this.totalRowCount) {
       this.vScrollRequired = true      
     }
+    else {
+      this.vScrollRequired = false 
+    }
     if (this.sizes.totalWidth > this.sizes.outer.width) {
       this.hScrollRequired = true
     }
+    else {
+      this.hScrollRequired = false
+    }
     this.options.allColumns = this.options.columns.map(c => c)
     console.log('sizes', this.sizes)
     return this.sizes    
@@ -5748,7 +5884,13 @@ class WebsyTable3 {
     return output
   }
   handleClick (event) {
-
+    if (event.target.classList.contains('websy-table-search-icon')) {     
+      console.log('clicked on search icon')
+      const colIndex = +event.target.getAttribute('data-col-index')      
+      if (this.options.columns[this.options.columns.length - 1][colIndex].onSearch) {
+        this.options.columns[this.options.columns.length - 1][colIndex].onSearch(event, this.options.columns[this.options.columns.length - 1][colIndex])
+      } 
+    }
   }
   handleMouseDown (event) {
     if (event.target.classList.contains('websy-scroll-handle-y')) {
@@ -5845,20 +5987,26 @@ class WebsyTable3 {
     bodyEl.style.height = `calc(100% - ${this.sizes.header.height}px - ${this.sizes.total.height}px)`
     if (this.options.virtualScroll === true) {
       // set the scroll element positions
-      if (this.vScrollRequired === true) {
-        let vScrollEl = document.getElementById(`${this.elementId}_vScrollContainer`)
-        let vHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+      let vScrollEl = document.getElementById(`${this.elementId}_vScrollContainer`)
+      let vHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+      if (this.vScrollRequired === true) {        
         vScrollEl.style.top = `${this.sizes.header.height + this.sizes.total.height}px`
         vScrollEl.style.height = `${this.sizes.bodyHeight}px` 
         vHandleEl.style.height = Math.max(this.options.minHandleSize, this.sizes.bodyHeight * (this.sizes.rowsToRenderPrecise / this.totalRowCount)) + 'px'
-      }   
-      if (this.hScrollRequired === true) {
-        let hScrollEl = document.getElementById(`${this.elementId}_hScrollContainer`)
-        let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      }
+      else {
+        vHandleEl.style.height = '0px'
+      } 
+      let hScrollEl = document.getElementById(`${this.elementId}_hScrollContainer`)
+      let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      if (this.hScrollRequired === true) {        
         hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
         hScrollEl.style.width = `${this.sizes.scrollableWidth - 20}px` 
-        hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalWidth)) + 'px'
-      }   
+        hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px'
+      }  
+      else {
+        hHandleEl.style.width = '0px'
+      } 
     }    
   }
   renderColumnHeaders () {
@@ -5887,9 +6035,7 @@ class WebsyTable3 {
     const el = document.getElementById(`${this.elementId}_tableContainer`)
     if (el) {
       el.classList.add('has-error')
-    }
-    const tableEl = document.getElementById(`${this.elementId}_tableInner`)
-    tableEl.classList.add('hidden')
+    }    
     const containerEl = document.getElementById(`${this.elementId}_errorContainer`)
     if (containerEl) {
       containerEl.classList.add('active')
@@ -5908,6 +6054,19 @@ class WebsyTable3 {
     }
   }
   scrollX (diff) {
+    const el = document.getElementById(`${this.elementId}_tableContainer`)
+    if (!el.classList.contains('scrolling')) {
+      el.classList.add('scrolling')
+    }    
+    if (this.scrollTimeoutFn) {
+      clearTimeout(this.scrollTimeoutFn)
+    }
+    this.scrollTimeoutFn = setTimeout(() => {      
+      el.classList.remove('scrolling')
+    }, 200)    
+    if (this.hScrollRequired === false) {
+      return
+    }
     const scrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
     const scrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)    
     let handlePos
@@ -5921,13 +6080,13 @@ class WebsyTable3 {
     console.log('dragging x', diff, scrollContainerEl.getBoundingClientRect().width - scrollHandleEl.getBoundingClientRect().width)
     scrollHandleEl.style.left = Math.min(scrollableSpace, Math.max(0, handlePos)) + 'px'
     if (this.options.onScroll) {
-      let actualLeft = (this.sizes.totalWidth - this.sizes.scrollableWidth) * (Math.min(scrollableSpace, Math.max(0, handlePos)) / scrollableSpace)
+      let actualLeft = (this.sizes.totalNonPinnedWidth - this.sizes.scrollableWidth) * (Math.min(scrollableSpace, Math.max(0, handlePos)) / scrollableSpace)
       let cumulativeWidth = 0
       this.startCol = 0
       this.endCol = 0
-      for (let i = 0; i < this.options.allColumns[this.options.allColumns.length - 1].length; i++) {            
+      for (let i = this.pinnedColumns; i < this.options.allColumns[this.options.allColumns.length - 1].length; i++) {            
         cumulativeWidth += this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth      
-        console.log(actualLeft, this.sizes.totalWidth, cumulativeWidth, cumulativeWidth + this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth)
+        console.log('actualLeft', actualLeft, this.sizes.totalWidth, cumulativeWidth, cumulativeWidth + this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth)
         if (actualLeft < cumulativeWidth) {
           this.startCol = i  
           break            
@@ -5951,6 +6110,19 @@ class WebsyTable3 {
     } 
   }
   scrollY (diff) {
+    const el = document.getElementById(`${this.elementId}_tableContainer`)
+    if (!el.classList.contains('scrolling')) {
+      el.classList.add('scrolling')
+    }    
+    if (this.scrollTimeoutFn) {
+      clearTimeout(this.scrollTimeoutFn)
+    }
+    this.scrollTimeoutFn = setTimeout(() => {      
+      el.classList.remove('scrolling')
+    }, 200)
+    if (this.vScrollRequired === false) {
+      return
+    }
     const scrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
     const scrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)    
     let handlePos
@@ -6902,7 +7074,7 @@ bars
   .attr('x', getBarX.bind(this))  
   .attr('y', getBarY.bind(this))
   .transition(this.transition)  
-  .attr('fill', d => d.color || series.color)
+  .attr('fill', d => d.y.color || d.color || series.color)
 
 bars
   .enter()
@@ -6912,7 +7084,7 @@ bars
   .attr('x', getBarX.bind(this))  
   .attr('y', getBarY.bind(this))
   // .transition(this.transition)
-  .attr('fill', d => d.color || series.color)
+  .attr('fill', d => d.y.color || d.color || series.color)
   .attr('class', d => {
     return `bar bar_${series.key}`
   })
@@ -6927,7 +7099,7 @@ if (this.options.orientation === 'horizontal') {
   xAxis = 'leftAxis'
   yAxis = 'bottomAxis'
 }
-if (this.options.showLabels) {
+if (this.options.showLabels === true || series.showLabels === true) {
   // need to add logic to handle positioning options
   // e.g. Inside, Outide, Auto (this will also affect the available plot space)
   // We currently only support 'Auto'  
@@ -6941,10 +7113,30 @@ if (this.options.showLabels) {
     .attr('x', getLabelX.bind(this))  
     .attr('y', getLabelY.bind(this))    
     .attr('class', `label_${series.key}`)
-    .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)
-    .style('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.color || series.color))
+    .attr('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
+    .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)    
     .transition(this.transition)
     .text(d => d.y.label || d.y.value)
+    .each(function (d, i) {      
+      if (that.options.orientation === 'horizontal') {
+        if (that.options.grouping === 'stacked') {
+          this.setAttribute('text-anchor', 'middle')
+        }
+        else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
+          this.setAttribute('text-anchor', 'end')
+          this.setAttribute('x', +(this.getAttribute('x')) - 8)        
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
+        }    
+        else {        
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
+        }
+      }
+      else {
+        if (that.plotheight - getLabelX.call(that, d) < (that.options.labelSize || that.options.fontSize)) {          
+          this.setAttribute('y', +(this.getAttribute('y')) + 8)
+        }
+      }
+    })
   
   labels
     .enter()
@@ -6954,8 +7146,8 @@ if (this.options.showLabels) {
     .attr('y', getLabelY.bind(this))    
     .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', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.color || series.color))
+    .attr('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
+    .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)    
     .text(d => d.y.label || d.y.value)
     .each(function (d, i) {      
       if (that.options.orientation === 'horizontal') {
@@ -6964,8 +7156,12 @@ if (this.options.showLabels) {
         }
         else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
           this.setAttribute('text-anchor', 'end')
-          this.setAttribute('x', +(this.getAttribute('x')) - 8)
+          this.setAttribute('x', +(this.getAttribute('x')) - 8)        
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
         }    
+        else {        
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
+        }
       }
       else {
         if (that.plotheight - getLabelX.call(that, d) < (that.options.labelSize || that.options.fontSize)) {          
@@ -7693,7 +7889,9 @@ const WebsyDesigns = {
   ResponsiveText,
   WebsyResponsiveText: ResponsiveText,
   WebsyDragDrop,
-  DragDrop: WebsyDragDrop
+  DragDrop: WebsyDragDrop,
+  WebsySearch,
+  Search: WebsySearch  
 }
 
 WebsyDesigns.service = new WebsyDesigns.APIService('')