@websy/websy-designs 1.9.14 → 1.10.1

package/dist/websy-designs.debug.js

@@ -60,6 +60,10 @@ class APIService {
     const url = this.buildUrl(entity, id)
     return this.run('DELETE', url)
   }
+  deleteMany (entity, query) {
+    const url = this.buildUrl(entity, null, query)
+    return this.run('DELETE', url)
+  }
   get (entity, id, query, offset, limit) {
     let url = this.buildUrl(entity, id, query)
     if (offset) {
@@ -70,12 +74,12 @@ class APIService {
         url += `?offset=${offset}`
       }
     }
-    if (limit) {
+    if (limit || this.options.rowLimit) {
       if (url.indexOf('?') !== -1) {
-        url += `&limit=${limit}`
+        url += `&limit=${limit || this.options.rowLimit}`
       }
       else {
-        url += `?limit=${limit}`
+        url += `?limit=${limit || this.options.rowLimit}`
       }
     }
     return this.run('GET', url)
@@ -193,16 +197,51 @@ class ButtonGroup {
       this.render() 
     }    
   }
+  get value () {
+    if (this.options.activeItem > -1) {
+      return [this.options.items[this.options.activeItem]]
+    }
+    else if (this.options.multiSelect === true) {
+      return this.options.items.filter(d => d.selected)
+    }
+    return []
+  }
+  set value (value) {
+    let activeIndex = -1
+    if (this.options.multiSelect === true) {
+      if (Array.isArray(value)) {
+        this.options.items.forEach(d => {
+          if (value.indexOf(d.value) !== -1) {
+            d.selected = true
+          }
+          else {
+            d.selected = false
+          }
+        })
+      }
+    }
+    else {
+      for (let i = 0; i < this.options.items.length; i++) {
+        if ((this.options.items[i].value || this.options.items[i].label) === value) {
+          activeIndex = i
+        }
+      }    
+      this.options.activeItem = activeIndex
+    }
+    this.render()
+  }
   handleClick (event) {    
     if (event.target.classList.contains('websy-button-group-item')) {
       const index = +event.target.getAttribute('data-index')
       if (this.options.multiSelect === true) {
         if (event.target.classList.contains('active')) {
+          this.options.items[index].selected = false
           this.options.onDeactivate(this.options.items[index], index, event)
           event.target.classList.remove('active')  
           event.target.classList.add('inactive')               
         }
         else {
+          this.options.items[index].selected = true
           this.options.onActivate(this.options.items[index], index, event)                 
           event.target.classList.add('active')  
           event.target.classList.remove('inactive')
@@ -253,7 +292,10 @@ class ButtonGroup {
         let activeClass = ''
         if (this.options.activeItem !== -1) {
           activeClass = i === this.options.activeItem ? 'active' : 'inactive'
-        }        
+        }    
+        else if (this.options.multiSelect === true) {
+          activeClass = t.selected === true ? 'active' : 'inactive'
+        }    
         return `
           <${this.options.tag} ${(t.attributes || []).join(' ')} data-id="${t.id || t.label}" data-index="${i}" class="websy-button-group-item ${(t.classes || []).join(' ')} ${this.options.style}-style ${activeClass}">${t.label}</${this.options.tag}>
         `
@@ -272,7 +314,12 @@ class WebsyCarousel {
       showFrameSelector: true,
       showPrevNext: true,
       autoPlay: true,
-      frames: []      
+      frames: [],
+      frameSelectorIcon: `
+        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 512 512">
+          <circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+        </svg>
+      `   
     }
     this.playTimeoutFn = null
     this.options = Object.assign({}, DEFAULTS, options)
@@ -383,10 +430,10 @@ class WebsyCarousel {
         html += `<div class="websy-btn-parent">`
         this.options.frames.forEach((frame, frameIndex) => {
           html += `
-          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 512 512" data-index="${frameIndex}" id="${this.elementId}_selector_${frameIndex}" 
-            class="websy-progress-btn ${this.options.currentFrame === frameIndex ? 'websy-progress-btn-active' : ''}">
-          <title>Ellipse</title><circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
-          </svg>
+            <div data-index="${frameIndex}" id="${this.elementId}_selector_${frameIndex}" 
+              class="websy-progress-btn ${this.options.currentFrame === frameIndex ? 'websy-progress-btn-active' : ''}">
+              ${this.options.frameSelectorIcon}
+            </div>
           `
         })
         html += `</div>`
@@ -1779,6 +1826,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`
       if (headerPos.bottom + contentPos.height > window.innerHeight) {
         // contentEl.classList.add('on-top')
         contentEl.style.bottom = `calc(100vh - ${headerPos.top}px)`
@@ -1790,6 +1838,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`
     }
     if (this.options.disableSearch !== true) {
       const searchEl = document.getElementById(`${this.elementId}_search`)
@@ -1801,6 +1850,19 @@ class WebsyDropdown {
       this.options.onOpen(this.elementId)
     }
   }
+  set items (items) {
+    this.options.items = [...items]
+    if (this.options.items.length > 0) {
+      this.options.items = this.options.items.map((d, i) => {
+        if (typeof d.index === 'undefined') {          
+          d.index = i
+        }
+        return d
+      }) 
+    }
+    this._originalData = [...this.options.items]
+    this.render()
+  }
   render () {
     if (!this.elementId) {
       console.log('No element Id provided for Websy Dropdown')	
@@ -2277,9 +2339,7 @@ class WebsyForm {
     }
     GlobalPubSub.subscribe('recaptchaready', this.recaptchaReady.bind(this))
     this.recaptchaResult = null
-    this.options = Object.assign(defaults, {}, {
-      // defaults go here
-    }, options)
+    this.options = Object.assign({}, defaults, options)
     if (!elementId) {
       console.log('No element Id provided')
       return
@@ -2347,8 +2407,27 @@ class WebsyForm {
     const data = {}
     const temp = new FormData(formEl)
     temp.forEach((value, key) => {
-      data[key] = value
+      if (this.fieldMap[key] && this.fieldMap[key].type === 'checkbox') {
+        data[key] = true
+      }
+      if (this.fieldMap[key] && this.fieldMap[key].instance && this.fieldMap[key].instance.value) {
+        data[key] = this.fieldMap[key].instance.value
+      }
+      else {
+        data[key] = value
+      }
     })
+    let keys = Object.keys(data)
+    for (const key in this.fieldMap) {
+      if (keys.indexOf(key) === -1) {
+        if (this.fieldMap[key] && this.fieldMap[key].type === 'checkbox') {
+          data[key] = false
+        }
+        else if (this.fieldMap[key] && this.fieldMap[key].instance && this.fieldMap[key].instance.value) {
+          data[key] = this.fieldMap[key].instance.value
+        }
+      }
+    }
     return data
   }
   set data (d) {
@@ -2406,6 +2485,7 @@ class WebsyForm {
   handleClick (event) {    
     if (event.target.classList.contains('submit')) {
       event.preventDefault()
+      event.stopPropagation()
       this.submitForm()
     }
     else if (event.target.classList.contains('cancel')) {
@@ -2578,6 +2658,7 @@ class WebsyForm {
       `
       this.options.fields.forEach((f, i) => {
         this.fieldMap[f.field] = f
+        f.owningElement = this.elementId
         if (f.component) {
           componentsToProcess.push(f)
           html += `
@@ -2664,6 +2745,10 @@ class WebsyForm {
         const el = document.getElementById(`${this.elementId}_input_${field}`)
         if (el) {
           el.value = value
+          el.setAttribute('value', value)
+          if (this.fieldMap[field].type === 'checkbox') {
+            el.checked = value
+          }
         }
         else {
           console.error(`Input for ${field} does not exist in form.`)    
@@ -2821,6 +2906,10 @@ class MultiForm {
     }    
     this.render()
   }
+  addData (data) {
+    this.formData = this.formData.concat(data)
+    this.render()
+  }
   addEntry () {
     const el = document.getElementById(`${this.elementId}_container`)
     let newId = WebsyDesigns.Utils.createIdentity()
@@ -2838,7 +2927,7 @@ class MultiForm {
       </button>   
     `
     el.appendChild(newFormEl)
-    let formOptions = Object.assign({}, this.options)
+    let formOptions = Object.assign({}, this.options, { fields: [...this.options.fields.map(f => Object.assign({}, f))] })
     this.forms.push(new WebsyDesigns.Form(`${this.elementId}_${newId}_form`, formOptions))
   }
   clear () {
@@ -2852,14 +2941,20 @@ class MultiForm {
   }
   get data () {
     const d = this.forms.map(f => (f.data))
-    // we don't return the last form
-    d.pop()
+    console.log('forms data', d)
+    if (this.options.allowAdd !== false) {      
+      // we don't return the last form
+      d.pop()
+    }
     return d
   }
   set data (d) {
     this.formData = d
     this.render()
   }
+  get deleted () {
+    return this.formData.filter(d => this.recordsToDelete.includes(`${d.id}`))
+  }
   handleClick (event) {
     if (event.target.classList.contains('websy-multi-form-add')) {
       let id = event.target.getAttribute('data-formid')
@@ -2939,15 +3034,17 @@ class MultiForm {
         `
       }
       el.innerHTML = html
-      this.formData.forEach(d => {
-        let formOptions = Object.assign({}, this.options)
+      this.forms = new Array(this.formData.length)
+      this.formData.forEach((d, i) => {
+        let formOptions = Object.assign({}, this.options, { fields: [...this.options.fields.map(f => Object.assign({}, f))] })
         let formObject = new WebsyDesigns.Form(`${this.elementId}_${d.formId}_form`, formOptions)
         formObject.data = d
-        this.forms.push(formObject)
+        this.forms[i] = formObject
       })
       if (this.options.allowAdd === true) {
-        let formOptions = Object.assign({}, this.options)
-        this.forms.push(new WebsyDesigns.Form(`${this.elementId}_${id}_form`, formOptions))
+        let formOptions = Object.assign({}, this.options, { fields: [...this.options.fields.map(f => Object.assign({}, f))] })
+        let formObject = new WebsyDesigns.Form(`${this.elementId}_${id}_form`, formOptions)
+        this.forms.push(formObject)
       }
     }
   }
@@ -3679,7 +3776,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)
@@ -3737,87 +3836,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()
@@ -3957,6 +4064,9 @@ class WebsyPubSub {
     }
   }
   subscribe (id, method, fn) {
+    if (!this.subscriptions) {
+      this.subscriptions = {}
+    }
     if (arguments.length === 3) {      
       if (!this.subscriptions[id]) {
         this.subscriptions[id] = {}
@@ -5513,7 +5623,52 @@ class WebsyTemplate {
     return html
   }
   handleClick (event) {
-    // 
+    if (event.target.classList.contains('clickable')) {
+      this.handleEvent(event, 'clickable', 'click')
+    }
+  }
+  handleEvent (event, eventType, action) {
+    let l = event.target.getAttribute('data-event')
+    if (l) {
+      l = l.split('(')
+      let params = []
+      const id = event.target.getAttribute('data-id')
+      // const locator = event.target.getAttribute('data-locator')
+      // if (l[1]) {
+      //   l[1] = l[1].replace(')', '')
+      //   params = l[1].split(',')      
+      // }
+      // l = l[0]
+      let data = this.options.data
+      // if (locator !== '') {
+      //   let locatorItems = locator.split(';')
+      //   locatorItems.forEach(loc => {
+      //     let locatorParts = loc.split(':')
+      //     if (data[locatorParts[0]]) {
+      //       data = data[locatorParts[0]]
+      //       let parts = locatorParts[1].split('.')
+      //       parts.forEach(p => {
+      //         data = data[p]
+      //       })              
+      //     }
+      //   })
+      // }
+      // params = params.map(p => {
+      //   if (typeof p !== 'string' && typeof p !== 'number') {
+      //     if (data[+id]) {
+      //       p = data[+id][p]
+      //     }
+      //   }
+      //   else if (typeof p === 'string') {
+      //     p = p.replace(/"/g, '').replace(/'/g, '')
+      //   }
+      //   return p
+      // })
+      if (event.target.classList.contains(eventType) && this.options.listeners[action] && this.options.listeners[action][l]) {      
+        event.stopPropagation()
+        this.options.listeners[action][l].call(this, event, data[+id], ...params)
+      }  
+    }
   }
   render () {
     this.resize()
@@ -6723,6 +6878,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
@@ -6817,6 +6973,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()
@@ -6826,6 +6985,7 @@ class WebsyTable3 {
     this.renderTotals()
   }
   appendRows (data) {
+    this._isRendered = false
     this.hideError()    
     let bodyEl = document.getElementById(`${this.elementId}_tableBody`)    
     if (bodyEl) {
@@ -6839,6 +6999,7 @@ class WebsyTable3 {
         }        
         else {
           bodyEl.innerHTML += this.buildBodyHtml(data, true)
+          this._isRendered = true
         }
         this.currentData = this.currentData.concat(data)
       }
@@ -7840,10 +8001,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
@@ -7882,21 +8045,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 
@@ -7983,6 +8131,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()
@@ -8293,6 +8444,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) {
@@ -9159,6 +9311,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) {
@@ -10590,9 +10743,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 = []
@@ -10645,6 +10803,7 @@ class WebsyKPI {
         </div>
       `
       el.innerHTML = html
+      this._isRendered = true
     }
   }  
 }
@@ -10666,6 +10825,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
@@ -10697,6 +10857,9 @@ class WebsyMap {
       this.render()
     }
   }
+  get isRendered () {
+    return this._isRendered
+  }
   handleClick (event) {
 
   }
@@ -10704,6 +10867,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) {            
@@ -10835,6 +10999,7 @@ class WebsyMap {
     else if (this.options.center) {
       this.map.setView(this.options.center, this.options.zoom || null)
     }
+    this._isRendered = true
   }
 }