@websy/websy-designs 1.10.0 → 1.10.2

package/dist/websy-designs.js

@@ -1459,6 +1459,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
       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>",
@@ -1526,6 +1527,15 @@ var WebsyDropdown = /*#__PURE__*/function () {
       }
       html += "\n            <div id='".concat(this.elementId, "_itemsContainer' class='websy-dropdown-items'>\n              <ul id='").concat(this.elementId, "_items'>              \n              </ul>\n            </div><!--\n            --><div class='websy-dropdown-custom'></div>\n          </div>\n        </div>\n      ");
       el.innerHTML = html;
+      var maskEl = document.getElementById("".concat(this.elementId, "_mask"));
+      if (maskEl) {
+        maskEl.addEventListener('mousewheel', function (event) {
+          if (event.target.classList.contains('websy-dropdown-mask')) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        });
+      }
       var scrollEl = document.getElementById("".concat(this.elementId, "_itemsContainer"));
       if (scrollEl) {
         scrollEl.addEventListener('scroll', this.handleScroll.bind(this));
@@ -1767,7 +1777,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
       var contentPos = WebsyUtils.getElementPos(contentEl);
       if (this.options.style === 'plain' && headerPos.width > 0 && headerPos.height > 0) {
         contentEl.style.right = "calc(100vw - ".concat(headerPos.right, "px)");
-        contentEl.style.width = "".concat(headerEl.clientWidth, "px");
+        contentEl.style.width = "".concat(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 - ".concat(headerPos.top, "px)");
@@ -1777,7 +1787,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
       } else if (this.options.style === 'plain' && headerPos.width === 0 && headerPos.height === 0) {
         var targetPos = WebsyUtils.getElementPos(event.target);
         contentEl.style.right = "calc(100vw - ".concat(targetPos.right, "px)");
-        contentEl.style.width = "".concat(targetPos.width, "px");
+        contentEl.style.width = "".concat(Math.max(this.options.minWidth, targetPos.width), "px");
       }
       if (this.options.disableSearch !== true) {
         var searchEl = document.getElementById("".concat(this.elementId, "_search"));
@@ -3585,7 +3595,11 @@ var WebsyPDFButton = /*#__PURE__*/function () {
       classes: [],
       wait: 0,
       buttonText: 'Download',
-      directDownload: false
+      directDownload: false,
+      preProcess: function preProcess(callbackFn) {
+        return callbackFn(true);
+      },
+      onError: function onError() {}
     };
     this.elementId = elementId;
     this.options = _extends({}, DEFAULTS, options);
@@ -3616,80 +3630,87 @@ var WebsyPDFButton = /*#__PURE__*/function () {
       var _this27 = this;
       if (event.target.classList.contains('websy-pdf-button')) {
         this.loader.show();
-        setTimeout(function () {
-          if (_this27.options.targetId) {
-            var el = document.getElementById(_this27.options.targetId);
-            if (el) {
-              var pdfData = {
-                options: {}
-              };
-              if (_this27.options.pdfOptions) {
-                pdfData.options = _extends({}, _this27.options.pdfOptions);
-              }
-              if (_this27.options.header) {
-                if (_this27.options.header.elementId) {
-                  var headerEl = document.getElementById(_this27.options.header.elementId);
-                  if (headerEl) {
-                    pdfData.header = headerEl.outerHTML;
-                    if (_this27.options.header.css) {
-                      pdfData.options.headerCSS = _this27.options.header.css;
-                    }
+        this.options.preProcess(function (proceed) {
+          if (proceed === true) {
+            setTimeout(function () {
+              if (_this27.options.targetId) {
+                var el = document.getElementById(_this27.options.targetId);
+                if (el) {
+                  var pdfData = {
+                    options: {}
+                  };
+                  if (_this27.options.pdfOptions) {
+                    pdfData.options = _extends({}, _this27.options.pdfOptions);
                   }
-                } else if (_this27.options.header.html) {
-                  pdfData.header = _this27.options.header.html;
-                  if (_this27.options.header.css) {
-                    pdfData.options.headerCSS = _this27.options.header.css;
+                  if (_this27.options.header) {
+                    if (_this27.options.header.elementId) {
+                      var headerEl = document.getElementById(_this27.options.header.elementId);
+                      if (headerEl) {
+                        pdfData.header = headerEl.outerHTML;
+                        if (_this27.options.header.css) {
+                          pdfData.options.headerCSS = _this27.options.header.css;
+                        }
+                      }
+                    } else if (_this27.options.header.html) {
+                      pdfData.header = _this27.options.header.html;
+                      if (_this27.options.header.css) {
+                        pdfData.options.headerCSS = _this27.options.header.css;
+                      }
+                    } else {
+                      pdfData.header = _this27.options.header;
+                    }
                   }
-                } else {
-                  pdfData.header = _this27.options.header;
-                }
-              }
-              if (_this27.options.footer) {
-                if (_this27.options.footer.elementId) {
-                  var footerEl = document.getElementById(_this27.options.footer.elementId);
-                  if (footerEl) {
-                    pdfData.footer = footerEl.outerHTML;
-                    if (_this27.options.footer.css) {
-                      pdfData.options.footerCSS = _this27.options.footer.css;
+                  if (_this27.options.footer) {
+                    if (_this27.options.footer.elementId) {
+                      var footerEl = document.getElementById(_this27.options.footer.elementId);
+                      if (footerEl) {
+                        pdfData.footer = footerEl.outerHTML;
+                        if (_this27.options.footer.css) {
+                          pdfData.options.footerCSS = _this27.options.footer.css;
+                        }
+                      }
+                    } else {
+                      pdfData.footer = _this27.options.footer;
                     }
                   }
-                } else {
-                  pdfData.footer = _this27.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()
+                  _this27.service.add('', pdfData, {
+                    responseType: 'blob'
+                  }).then(function (response) {
+                    _this27.loader.hide();
+                    var blob = new Blob([response], {
+                      type: 'application/pdf'
+                    });
+                    var msg = "\n                    <div class='text-center websy-pdf-download'>\n                      <div>Your file is ready to download</div>\n                      <a href='".concat(URL.createObjectURL(blob), "' target='_blank'\n                  ");
+                    if (_this27.options.directDownload === true) {
+                      var fileName;
+                      if (typeof _this27.options.fileName === 'function') {
+                        fileName = _this27.options.fileName() || 'Export';
+                      } else {
+                        fileName = _this27.options.fileName || 'Export';
+                      }
+                      msg += "download='".concat(fileName, ".pdf'");
+                    }
+                    msg += "\n                      >\n                        <button class='websy-btn download-pdf'>".concat(_this27.options.buttonText, "</button>\n                      </a>\n                    </div>\n                  ");
+                    _this27.popup.show({
+                      message: msg,
+                      mask: true
+                    });
+                  }, function (err) {
+                    console.error(err);
+                  });
                 }
               }
-              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()
-              _this27.service.add('', pdfData, {
-                responseType: 'blob'
-              }).then(function (response) {
-                _this27.loader.hide();
-                var blob = new Blob([response], {
-                  type: 'application/pdf'
-                });
-                var msg = "\n                <div class='text-center websy-pdf-download'>\n                  <div>Your file is ready to download</div>\n                  <a href='".concat(URL.createObjectURL(blob), "' target='_blank'\n              ");
-                if (_this27.options.directDownload === true) {
-                  var fileName;
-                  if (typeof _this27.options.fileName === 'function') {
-                    fileName = _this27.options.fileName() || 'Export';
-                  } else {
-                    fileName = _this27.options.fileName || 'Export';
-                  }
-                  msg += "download='".concat(fileName, ".pdf'");
-                }
-                msg += "\n                  >\n                    <button class='websy-btn download-pdf'>".concat(_this27.options.buttonText, "</button>\n                  </a>\n                </div>\n              ");
-                _this27.popup.show({
-                  message: msg,
-                  mask: true
-                });
-              }, function (err) {
-                console.error(err);
-              });
-            }
+            }, _this27.options.wait);
+          } else {
+            _this27.loader.hide();
+            _this27.options.onError();
           }
-        }, this.options.wait);
+        });
       } else if (event.target.classList.contains('download-pdf')) {
         this.popup.hide();
         if (this.options.onClose) {
@@ -5521,10 +5542,14 @@ var WebsyUtils = {
     var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
     var 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
     };
@@ -5722,6 +5747,7 @@ var WebsyTable = /*#__PURE__*/function () {
     this.busy = false;
     this.tooltipTimeoutFn = null;
     this.data = [];
+    this._isRendered = false;
     var el = document.getElementById(this.elementId);
     if (el) {
       var html = "\n        <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table ").concat(this.options.paging === 'pages' ? 'with-paging' : '', "'>\n          <!--<div class=\"download-button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n          </div>-->\n          <table>\n            <thead id=\"").concat(this.elementId, "_head\">\n            </thead>\n            <tbody id=\"").concat(this.elementId, "_body\">\n            </tbody>\n            <tfoot id=\"").concat(this.elementId, "_foot\">\n            </tfoot>\n          </table>      \n          <div id=\"").concat(this.elementId, "_errorContainer\" class='websy-vis-error-container'>\n            <div>\n              <div id=\"").concat(this.elementId, "_errorTitle\"></div>\n              <div id=\"").concat(this.elementId, "_errorMessage\"></div>\n            </div>            \n          </div>\n          <div id=\"").concat(this.elementId, "_loadingContainer\"></div>\n        </div>\n      ");
@@ -5760,9 +5786,15 @@ var WebsyTable = /*#__PURE__*/function () {
     }
   }
   _createClass(WebsyTable, [{
+    key: "isRendered",
+    get: function get() {
+      return this._isRendered;
+    }
+  }, {
     key: "appendRows",
     value: function appendRows(data) {
       var _this39 = this;
+      this._isRendered = false;
       this.hideError();
       var bodyHTML = '';
       if (data) {
@@ -5804,6 +5836,7 @@ var WebsyTable = /*#__PURE__*/function () {
       }
       var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
       bodyEl.innerHTML += bodyHTML;
+      this._isRendered = true;
     }
   }, {
     key: "buildSearchIcon",
@@ -5954,6 +5987,7 @@ var WebsyTable = /*#__PURE__*/function () {
     key: "render",
     value: function render(data) {
       var _this40 = this;
+      this._isRendered = false;
       if (!this.options.columns) {
         return;
       }
@@ -6584,6 +6618,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
       autoFitColumns: true
     };
     this.options = _extends({}, DEFAULTS, options);
+    this._isRendered = false;
     this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
     if (this.options.disableTouch === true) {
       this.isTouchDevice = false;
@@ -6644,6 +6679,11 @@ var WebsyTable3 = /*#__PURE__*/function () {
     }
   }
   _createClass(WebsyTable3, [{
+    key: "isRendered",
+    get: function get() {
+      return this._isRendered;
+    }
+  }, {
     key: "columns",
     set: function set(columns) {
       this.options.columns = columns;
@@ -6658,6 +6698,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
   }, {
     key: "appendRows",
     value: function appendRows(data) {
+      this._isRendered = false;
       this.hideError();
       var bodyEl = document.getElementById("".concat(this.elementId, "_tableBody"));
       if (bodyEl) {
@@ -6669,6 +6710,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
             bodyEl.querySelector('tbody').innerHTML += this.buildBodyHtml(data, true, true);
           } else {
             bodyEl.innerHTML += this.buildBodyHtml(data, true);
+            this._isRendered = true;
           }
           this.currentData = this.currentData.concat(data);
         }
@@ -7674,10 +7716,12 @@ var WebsyChart = /*#__PURE__*/function () {
       maxBandWidth: 100,
       allowUnevenBands: true,
       allowBrushing: true,
-      balancedMinMax: false
+      balancedMinMax: false,
+      onRendered: function onRendered() {}
     };
     this.elementId = elementId;
     this.options = _extends({}, DEFAULTS, options);
+    this._isRendered = false;
     this.leftAxis = null;
     this.rightAxis = null;
     this.topAxis = null;
@@ -7716,21 +7760,6 @@ var WebsyChart = /*#__PURE__*/function () {
           }
         }
       }
-      // }
-      // 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;
     };
     var that = this;
@@ -7805,6 +7834,11 @@ var WebsyChart = /*#__PURE__*/function () {
       this.options.data = d;
       this.render();
     }
+  }, {
+    key: "isRendered",
+    get: function get() {
+      return this._isRendered;
+    }
   }, {
     key: "close",
     value: function close() {
@@ -8110,6 +8144,7 @@ var WebsyChart = /*#__PURE__*/function () {
     value: function render(options) {
       var _this53 = this;
       /* global d3 options WebsyUtils */
+      this._isRendered = false;
       if (typeof options !== 'undefined') {
         this.options = _extends({}, this.options, options);
         if (this.options.legendOptions) {
@@ -8850,6 +8885,7 @@ var WebsyChart = /*#__PURE__*/function () {
           return _this54.renderRefLine(l);
         });
       }
+      this._isRendered = true;
     }
   }, {
     key: "renderarea",
@@ -10193,11 +10229,18 @@ var WebsyKPI = /*#__PURE__*/function () {
     };
     this.elementId = elementId;
     this.options = _extends({}, DEFAULTS, options);
+    this._isRendered = false;
     this.render();
   }
   _createClass(WebsyKPI, [{
+    key: "isRendered",
+    get: function get() {
+      return this._isRendered;
+    }
+  }, {
     key: "render",
     value: function render(options) {
+      this._isRendered = false;
       this.options = _extends({}, this.options, options);
       if (!this.options.label.classes) {
         this.options.label.classes = [];
@@ -10232,6 +10275,7 @@ var WebsyKPI = /*#__PURE__*/function () {
         }
         html += "                                \n          </div>\n        </div>\n      ";
         el.innerHTML = html;
+        this._isRendered = true;
       }
     }
   }]);
@@ -10255,6 +10299,7 @@ var WebsyMap = /*#__PURE__*/function () {
     };
     this.elementId = elementId;
     this.options = _extends({}, DEFAULTS, options);
+    this._isRendered = false;
     if (!elementId) {
       console.log('No element Id provided for Websy Map');
       return;
@@ -10284,6 +10329,11 @@ var WebsyMap = /*#__PURE__*/function () {
     }
   }
   _createClass(WebsyMap, [{
+    key: "isRendered",
+    get: function get() {
+      return this._isRendered;
+    }
+  }, {
     key: "handleClick",
     value: function handleClick(event) {}
   }, {
@@ -10293,6 +10343,7 @@ var WebsyMap = /*#__PURE__*/function () {
     key: "render",
     value: function render() {
       var _this61 = this;
+      this._isRendered = false;
       var mapEl = document.getElementById("".concat(this.elementId, "_map"));
       var legendEl = document.getElementById("".concat(this.elementId, "_map"));
       if (this.options.showLegend === true && this.options.data.polygons) {
@@ -10434,6 +10485,7 @@ var WebsyMap = /*#__PURE__*/function () {
       } else if (this.options.center) {
         this.map.setView(this.options.center, this.options.zoom || null);
       }
+      this._isRendered = true;
     }
   }]);
   return WebsyMap;