@websy/websy-designs 1.11.9 → 1.11.11

package/dist/websy-designs.debug.js

@@ -273,6 +273,9 @@ class ButtonGroup {
         this.options.activeItem = -1
         event.target.classList.remove('active')
       }
+      if (this.options.onClick) {
+        this.options.onClick(this.options.items[index], index, event, this)
+      }
     }    
   }
   on (event, fn) {
@@ -2357,6 +2360,7 @@ class WebsyForm {
       clearAfterSave: false,
       fields: [],
       mode: 'add',
+      useLoader: false,
       onSuccess: function (data) {},
       onError: function (err) { console.log('Error submitting form data:', err) }
     }
@@ -2391,6 +2395,7 @@ class WebsyForm {
     if (this.options.cancelFn) {
       this.options.cancelFn(this.elementId)
     }
+    this.loader.hide()
   }
   checkRecaptcha () {
     return new Promise((resolve, reject) => {
@@ -2441,6 +2446,7 @@ class WebsyForm {
   clear () {
     const formEl = document.getElementById(`${this.elementId}Form`)    
     formEl.reset()
+    this.loader.hide()
   }
   get data () {
     const formEl = document.getElementById(`${this.elementId}Form`)    
@@ -2463,6 +2469,9 @@ class WebsyForm {
         if (this.fieldMap[key] && this.fieldMap[key].type === 'checkbox') {
           data[key] = false
         }
+        else if (this.fieldMap[key] && (this.fieldMap[key].component === 'Switch' || this.fieldMap[key].component === 'WebsySwitch')) {
+          data[key] = this.fieldMap[key].instance.options.enabled
+        }
         else if (this.fieldMap[key] && this.fieldMap[key].instance && this.fieldMap[key].instance.value) {
           data[key] = this.fieldMap[key].instance.value
         }
@@ -2699,6 +2708,7 @@ class WebsyForm {
       this.options.fields.forEach((f, i) => {
         this.fieldMap[f.field] = f
         f.owningElement = this.elementId
+        let inputValue = typeof f.value === 'function' ? f.value() : f.value
         if (f.disabled || f.readOnly || this.options.readOnly) {
           if (!f.options) {
             f.options = {}
@@ -2742,7 +2752,7 @@ class WebsyForm {
                 ${f.disabled || f.readOnly || this.options.readOnly ? 'disabled' : ''}
                 ${(f.attributes || []).join(' ')}
                 class="websy-input websy-textarea ${f.readOnly || this.options.readOnly ? 'websy-input-readonly' : ''}"
-              >${f.value || ''}</textarea>
+              >${inputValue || ''}</textarea>
               <span id='${this.elementId}_${f.field}_error' class='websy-form-validation-error'></span>
             </div><!--
           ` 
@@ -2761,8 +2771,8 @@ class WebsyForm {
                 ${(f.attributes || []).join(' ')}
                 name="${f.field}" 
                 placeholder="${f.placeholder || ''}"
-                value="${f.type === 'date' ? '' : f.value || ''}"
-                valueAsDate="${f.type === 'date' ? f.value : ''}"
+                value="${f.type === 'date' ? '' : inputValue || ''}"
+                valueAsDate="${f.type === 'date' ? inputValue : ''}"
                 ${f.disabled || f.readOnly || this.options.readOnly ? 'disabled' : ''}
                 oninvalidx="this.setCustomValidity('${f.invalidMessage || 'Please fill in this field.'}')"
               />
@@ -2793,8 +2803,12 @@ class WebsyForm {
       html += `          
         </form>
         <div id="${this.elementId}_validationFail" class="websy-validation-failure"></div>
+        <div id="${this.elementId}_loader" class=""></div>
       `
       el.innerHTML = html
+      if (!this.loader) {
+        this.loader = new WebsyDesigns.LoadingDialog(`${this.elementId}_loader`, { title: '&nbsp;' })
+      }
       this.processComponents(componentsToProcess, () => {
         if ((this.options.useRecaptcha === true || this.options.useRecaptchaV3 === true) && typeof grecaptcha !== 'undefined') {
           this.recaptchaReady()
@@ -2847,6 +2861,9 @@ class WebsyForm {
           if (recaptchErrEl) {
             recaptchErrEl.classList.add('websy-hidden')
           }
+          if (this.options.useLoader) {
+            this.loader.show()
+          }
           const formData = new FormData(formEl)
           const data = {}
           const temp = new FormData(formEl)
@@ -2875,10 +2892,13 @@ class WebsyForm {
           }
           else if (this.options.submitFn) {
             this.options.submitFn(data, () => {
+              this.loader.hide()          
               if (this.options.clearAfterSave === true) {
                 // this.render()
                 formEl.reset()
               }
+            }, () => {              
+              this.loader.hide()          
             })            
           }          
         }
@@ -5295,6 +5315,9 @@ class WebsyRouter {
     if (this.options.views[view].load) {
       this.options.views[view].load(callbackFn)
     }
+    else if (callbackFn) {
+      callbackFn()
+    }
   }
   initView (view) {
     return new Promise((resolve, reject) => {
@@ -5375,6 +5398,10 @@ class WebsyRouter {
     this.showView(this.currentView, this.currentParams, 'main')
   }
   navigate (inputPath, group = 'main', event, popped) {
+    if (inputPath.indexOf('http') === 0) {
+      window.open(inputPath, '_blank')
+      return
+    }
     if (typeof popped === 'undefined') {
       popped = false
     }    
@@ -6046,6 +6073,12 @@ class Switch {
       this.render() 
     }    
   }
+  get data () {
+    return this.options.enabled
+  }
+  set data (d) {
+    this.options.enabled = d
+  }
   disable () {
     this.options.enabled = false
     let method = this.options.enabled === true ? 'add' : 'remove'

package/dist/websy-designs.js

@@ -313,6 +313,9 @@ var ButtonGroup = /*#__PURE__*/function () {
           this.options.activeItem = -1;
           event.target.classList.remove('active');
         }
+        if (this.options.onClick) {
+          this.options.onClick(this.options.items[index], index, event, this);
+        }
       }
     }
   }, {
@@ -2321,6 +2324,7 @@ var WebsyForm = /*#__PURE__*/function () {
       clearAfterSave: false,
       fields: [],
       mode: 'add',
+      useLoader: false,
       onSuccess: function onSuccess(data) {},
       onError: function onError(err) {
         console.log('Error submitting form data:', err);
@@ -2359,6 +2363,7 @@ var WebsyForm = /*#__PURE__*/function () {
       if (this.options.cancelFn) {
         this.options.cancelFn(this.elementId);
       }
+      this.loader.hide();
     }
   }, {
     key: "checkRecaptcha",
@@ -2419,6 +2424,7 @@ var WebsyForm = /*#__PURE__*/function () {
     value: function clear() {
       var formEl = document.getElementById("".concat(this.elementId, "Form"));
       formEl.reset();
+      this.loader.hide();
     }
   }, {
     key: "data",
@@ -2442,6 +2448,8 @@ var WebsyForm = /*#__PURE__*/function () {
         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].component === 'Switch' || this.fieldMap[key].component === 'WebsySwitch')) {
+            data[key] = this.fieldMap[key].instance.options.enabled;
           } else if (this.fieldMap[key] && this.fieldMap[key].instance && this.fieldMap[key].instance.value) {
             data[key] = this.fieldMap[key].instance.value;
           }
@@ -2703,6 +2711,7 @@ var WebsyForm = /*#__PURE__*/function () {
         this.options.fields.forEach(function (f, i) {
           _this20.fieldMap[f.field] = f;
           f.owningElement = _this20.elementId;
+          var inputValue = typeof f.value === 'function' ? f.value() : f.value;
           if (f.disabled || f.readOnly || _this20.options.readOnly) {
             if (!f.options) {
               f.options = {};
@@ -2726,9 +2735,9 @@ var WebsyForm = /*#__PURE__*/function () {
             componentsToProcess.push(f);
             html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this20.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', " ").concat(f.component === 'MediaUpload' ? 'media-upload' : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <div id='").concat(_this20.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n              <span id='").concat(_this20.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
           } else if (f.type === 'longtext') {
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this20.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <textarea\n                id=\"").concat(_this20.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                placeholder=\"").concat(f.placeholder || '', "\"\n                data-user-type=\"").concat(f.type, "\"\n                data-index=\"").concat(i, "\"\n                name=\"").concat(f.field, "\" \n                ").concat(f.disabled || f.readOnly || _this20.options.readOnly ? 'disabled' : '', "\n                ").concat((f.attributes || []).join(' '), "\n                class=\"websy-input websy-textarea ").concat(f.readOnly || _this20.options.readOnly ? 'websy-input-readonly' : '', "\"\n              >").concat(f.value || '', "</textarea>\n              <span id='").concat(_this20.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this20.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <textarea\n                id=\"").concat(_this20.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                placeholder=\"").concat(f.placeholder || '', "\"\n                data-user-type=\"").concat(f.type, "\"\n                data-index=\"").concat(i, "\"\n                name=\"").concat(f.field, "\" \n                ").concat(f.disabled || f.readOnly || _this20.options.readOnly ? 'disabled' : '', "\n                ").concat((f.attributes || []).join(' '), "\n                class=\"websy-input websy-textarea ").concat(f.readOnly || _this20.options.readOnly ? 'websy-input-readonly' : '', "\"\n              >").concat(inputValue || '', "</textarea>\n              <span id='").concat(_this20.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
           } else {
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this20.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <input \n                id=\"").concat(_this20.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                type=\"").concat((f.type === 'expiry' ? 'text' : f.type === 'cvv' ? 'number' : f.type) || 'text', "\" \n                data-user-type=\"").concat(f.type, "\"\n                data-index=\"").concat(i, "\"\n                class=\"websy-input ").concat(f.readOnly || _this20.options.readOnly ? 'websy-input-readonly' : '', "\" \n                ").concat((f.attributes || []).join(' '), "\n                name=\"").concat(f.field, "\" \n                placeholder=\"").concat(f.placeholder || '', "\"\n                value=\"").concat(f.type === 'date' ? '' : f.value || '', "\"\n                valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n                ").concat(f.disabled || f.readOnly || _this20.options.readOnly ? 'disabled' : '', "\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n              <span id='").concat(_this20.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this20.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <input \n                id=\"").concat(_this20.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                type=\"").concat((f.type === 'expiry' ? 'text' : f.type === 'cvv' ? 'number' : f.type) || 'text', "\" \n                data-user-type=\"").concat(f.type, "\"\n                data-index=\"").concat(i, "\"\n                class=\"websy-input ").concat(f.readOnly || _this20.options.readOnly ? 'websy-input-readonly' : '', "\" \n                ").concat((f.attributes || []).join(' '), "\n                name=\"").concat(f.field, "\" \n                placeholder=\"").concat(f.placeholder || '', "\"\n                value=\"").concat(f.type === 'date' ? '' : inputValue || '', "\"\n                valueAsDate=\"").concat(f.type === 'date' ? inputValue : '', "\"\n                ").concat(f.disabled || f.readOnly || _this20.options.readOnly ? 'disabled' : '', "\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n              <span id='").concat(_this20.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
           }
         });
         if (this.options.useRecaptcha === true) {
@@ -2742,8 +2751,13 @@ var WebsyForm = /*#__PURE__*/function () {
         if (this.options.cancel) {
           html += "\n          --><button class=\"websy-btn cancel ".concat(this.options.cancel.classes ? this.options.cancel.classes.join(' ') : '', "\">").concat(this.options.cancel.text || 'Cancel', "</button>\n        ");
         }
-        html += "          \n        </form>\n        <div id=\"".concat(this.elementId, "_validationFail\" class=\"websy-validation-failure\"></div>\n      ");
+        html += "          \n        </form>\n        <div id=\"".concat(this.elementId, "_validationFail\" class=\"websy-validation-failure\"></div>\n        <div id=\"").concat(this.elementId, "_loader\" class=\"\"></div>\n      ");
         el.innerHTML = html;
+        if (!this.loader) {
+          this.loader = new WebsyDesigns.LoadingDialog("".concat(this.elementId, "_loader"), {
+            title: '&nbsp;'
+          });
+        }
         this.processComponents(componentsToProcess, function () {
           if ((_this20.options.useRecaptcha === true || _this20.options.useRecaptchaV3 === true) && typeof grecaptcha !== 'undefined') {
             _this20.recaptchaReady();
@@ -2798,6 +2812,9 @@ var WebsyForm = /*#__PURE__*/function () {
             if (recaptchErrEl) {
               recaptchErrEl.classList.add('websy-hidden');
             }
+            if (_this21.options.useLoader) {
+              _this21.loader.show();
+            }
             var formData = new FormData(formEl);
             var data = {};
             var temp = new FormData(formEl);
@@ -2824,10 +2841,13 @@ var WebsyForm = /*#__PURE__*/function () {
               });
             } else if (_this21.options.submitFn) {
               _this21.options.submitFn(data, function () {
+                _this21.loader.hide();
                 if (_this21.options.clearAfterSave === true) {
                   // this.render()
                   formEl.reset();
                 }
+              }, function () {
+                _this21.loader.hide();
               });
             }
           } else {
@@ -5102,6 +5122,8 @@ var WebsyRouter = /*#__PURE__*/function () {
     value: function preloadView(view, callbackFn) {
       if (this.options.views[view].load) {
         this.options.views[view].load(callbackFn);
+      } else if (callbackFn) {
+        callbackFn();
       }
     }
   }, {
@@ -5193,6 +5215,10 @@ var WebsyRouter = /*#__PURE__*/function () {
       var group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'main';
       var event = arguments.length > 2 ? arguments[2] : undefined;
       var popped = arguments.length > 3 ? arguments[3] : undefined;
+      if (inputPath.indexOf('http') === 0) {
+        window.open(inputPath, '_blank');
+        return;
+      }
       if (typeof popped === 'undefined') {
         popped = false;
       }
@@ -5890,6 +5916,14 @@ var Switch = /*#__PURE__*/function () {
     }
   }
   _createClass(Switch, [{
+    key: "data",
+    get: function get() {
+      return this.options.enabled;
+    },
+    set: function set(d) {
+      this.options.enabled = d;
+    }
+  }, {
     key: "disable",
     value: function disable() {
       this.options.enabled = false;