@websy/websy-designs 1.10.0 → 1.10.2

package/dist/websy-designs.debug.js

@@ -1485,6 +1485,7 @@ class WebsyDropdown {
       closeAfterSelection: true,
       customActions: [],
       customButtons: [],
+      minWidth: 220,
       searchIcon: `<svg 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 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>`,
       arrowIcon: `<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>`,
@@ -1511,7 +1512,7 @@ class WebsyDropdown {
       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))      
+      el.addEventListener('mousemove', this.handleMouseMove.bind(this))
       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 = `
@@ -1596,6 +1597,15 @@ class WebsyDropdown {
         </div>
       `
       el.innerHTML = html
+      const maskEl = document.getElementById(`${this.elementId}_mask`)
+      if (maskEl) {      
+        maskEl.addEventListener('mousewheel', event => {
+          if (event.target.classList.contains('websy-dropdown-mask')) {
+            event.preventDefault()
+            event.stopPropagation()
+          }
+        })   
+      }
       const scrollEl = document.getElementById(`${this.elementId}_itemsContainer`)
       if (scrollEl) {
         scrollEl.addEventListener('scroll', this.handleScroll.bind(this))
@@ -1826,7 +1836,7 @@ class WebsyDropdown {
     const contentPos = WebsyUtils.getElementPos(contentEl)    
     if (this.options.style === 'plain' && headerPos.width > 0 && headerPos.height > 0) {
       contentEl.style.right = `calc(100vw - ${headerPos.right}px)`
-      contentEl.style.width = `${headerEl.clientWidth}px`
+      contentEl.style.width = `${Math.max(this.options.minWidth, headerEl.clientWidth)}px`
       if (headerPos.bottom + contentPos.height > window.innerHeight) {
         // contentEl.classList.add('on-top')
         contentEl.style.bottom = `calc(100vh - ${headerPos.top}px)`
@@ -1838,7 +1848,7 @@ class WebsyDropdown {
     else if (this.options.style === 'plain' && headerPos.width === 0 && headerPos.height === 0) {
       const targetPos = WebsyUtils.getElementPos(event.target)
       contentEl.style.right = `calc(100vw - ${targetPos.right}px)`  
-      contentEl.style.width = `${targetPos.width}px`
+      contentEl.style.width = `${Math.max(this.options.minWidth, targetPos.width)}px`
     }
     if (this.options.disableSearch !== true) {
       const searchEl = document.getElementById(`${this.elementId}_search`)
@@ -3776,7 +3786,9 @@ class WebsyPDFButton {
       classes: [],
       wait: 0,
       buttonText: 'Download',
-      directDownload: false
+      directDownload: false,
+      preProcess: (callbackFn) => (callbackFn(true)),
+      onError: () => {}
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
@@ -3834,87 +3846,95 @@ class WebsyPDFButton {
   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)
-            }
-            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
-                  }
+      this.options.preProcess((proceed) => {
+        if (proceed === true) {          
+          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)
                 }
-              }
-              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
+                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
                   }
                 }
-              }
-              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) {
-                let fileName
-                if (typeof this.options.fileName === 'function') {
-                  fileName = this.options.fileName() || 'Export'
+                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
+                  }
                 }
-                else {
-                  fileName = this.options.fileName || 'Export'
-                }                
-                msg += `download='${fileName}.pdf'`
+                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) {
+                    let fileName
+                    if (typeof this.options.fileName === 'function') {
+                      fileName = this.options.fileName() || 'Export'
+                    }
+                    else {
+                      fileName = this.options.fileName || 'Export'
+                    }                
+                    msg += `download='${fileName}.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)
+                })
               }
-              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)           
+            } 
+          }, this.options.wait)           
+        }
+        else {
+          this.loader.hide()
+          this.options.onError()
+        }
+      })
     }
     else if (event.target.classList.contains('download-pdf')) {
       this.popup.hide()
@@ -5688,10 +5708,12 @@ const WebsyUtils = {
     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,
+      top: rect.top, // + scrollTop,
+      left: rect.left, // + scrollLeft,
+      // bottom: rect.top + scrollTop + el.clientHeight,
+      bottom: rect.top + el.clientHeight,
+      // right: rect.left + scrollLeft + el.clientWidth,
+      right: rect.left + el.clientWidth,
       width: rect.width,
       height: rect.height
     }
@@ -5879,6 +5901,7 @@ class WebsyTable {
     this.busy = false
     this.tooltipTimeoutFn = null
     this.data = []
+    this._isRendered = false
     const el = document.getElementById(this.elementId)
     if (el) {
       let html = `
@@ -5938,7 +5961,11 @@ class WebsyTable {
       console.error(`No element found with ID ${this.elementId}`)
     }
   }
+  get isRendered () {
+    return this._isRendered
+  }
   appendRows (data) {
+    this._isRendered = false
     this.hideError()
     let bodyHTML = ''
     if (data) {
@@ -6015,6 +6042,7 @@ class WebsyTable {
     }
     const bodyEl = document.getElementById(`${this.elementId}_body`)
     bodyEl.innerHTML += bodyHTML
+    this._isRendered = true
   }
   buildSearchIcon (field) {
     return `
@@ -6154,6 +6182,7 @@ class WebsyTable {
     this.render(this.data)
   } 
   render (data) {
+    this._isRendered = false
     if (!this.options.columns) {
       return
     }
@@ -6868,6 +6897,7 @@ class WebsyTable3 {
       autoFitColumns: true
     }
     this.options = Object.assign({}, DEFAULTS, options)
+    this._isRendered = false
     this.isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
     if (this.options.disableTouch === true) {
       this.isTouchDevice = false
@@ -6962,6 +6992,9 @@ class WebsyTable3 {
       console.error(`No element found with ID ${this.elementId}`)
     }
   }
+  get isRendered () {
+    return this._isRendered
+  }
   set columns (columns) {
     this.options.columns = columns
     this.renderColumnHeaders()
@@ -6971,6 +7004,7 @@ class WebsyTable3 {
     this.renderTotals()
   }
   appendRows (data) {
+    this._isRendered = false
     this.hideError()    
     let bodyEl = document.getElementById(`${this.elementId}_tableBody`)    
     if (bodyEl) {
@@ -6984,6 +7018,7 @@ class WebsyTable3 {
         }        
         else {
           bodyEl.innerHTML += this.buildBodyHtml(data, true)
+          this._isRendered = true
         }
         this.currentData = this.currentData.concat(data)
       }
@@ -7985,10 +8020,12 @@ class WebsyChart {
       maxBandWidth: 100,
       allowUnevenBands: true,
       allowBrushing: true,
-      balancedMinMax: false
+      balancedMinMax: false,
+      onRendered: () => {}
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
+    this._isRendered = false
     this.leftAxis = null
     this.rightAxis = null
     this.topAxis = null
@@ -8027,21 +8064,6 @@ class WebsyChart {
           }
         }
       }
-      // }
-      // else {        
-      //   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
     }  
     let that = this 
@@ -8128,6 +8150,9 @@ class WebsyChart {
     this.options.data = d
     this.render()
   }
+  get isRendered () {
+    return this._isRendered
+  }
   close () {
     this.leftAxisLayer && this.leftAxisLayer.selectAll('*').remove()
     this.rightAxisLayer && this.rightAxisLayer.selectAll('*').remove()
@@ -8438,6 +8463,7 @@ this.render()
   }
   render (options) {
     /* global d3 options WebsyUtils */ 
+this._isRendered = false
 if (typeof options !== 'undefined') {
   this.options = Object.assign({}, this.options, options)
   if (this.options.legendOptions) {
@@ -9304,6 +9330,7 @@ this.refLineLayer.selectAll('.reference-line-label').remove()
 if (this.options.refLines && this.options.refLines.length > 0) {
   this.options.refLines.forEach(l => this.renderRefLine(l))
 }
+this._isRendered = true
 
   }
   renderarea (series, index) {
@@ -10735,9 +10762,14 @@ class WebsyKPI {
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
+    this._isRendered = false
     this.render()
   }
+  get isRendered () {
+    return this._isRendered
+  }
   render (options) {
+    this._isRendered = false
     this.options = Object.assign({}, this.options, options)
     if (!this.options.label.classes) {
       this.options.label.classes = []
@@ -10790,6 +10822,7 @@ class WebsyKPI {
         </div>
       `
       el.innerHTML = html
+      this._isRendered = true
     }
   }  
 }
@@ -10811,6 +10844,7 @@ class WebsyMap {
     }
     this.elementId = elementId
     this.options = Object.assign({}, DEFAULTS, options)
+    this._isRendered = false
     if (!elementId) {
       console.log('No element Id provided for Websy Map')		
       return
@@ -10842,6 +10876,9 @@ class WebsyMap {
       this.render()
     }
   }
+  get isRendered () {
+    return this._isRendered
+  }
   handleClick (event) {
 
   }
@@ -10849,6 +10886,7 @@ class WebsyMap {
 
   }
   render () {
+    this._isRendered = false
     const mapEl = document.getElementById(`${this.elementId}_map`)
     const legendEl = document.getElementById(`${this.elementId}_map`)
     if (this.options.showLegend === true && this.options.data.polygons) {            
@@ -10980,6 +11018,7 @@ class WebsyMap {
     else if (this.options.center) {
       this.map.setView(this.options.center, this.options.zoom || null)
     }
+    this._isRendered = true
   }
 }