@websy/websy-designs 1.11.10 → 1.11.12

package/dist/websy-designs-es6.debug.js

@@ -2087,7 +2087,12 @@ class WebsyDropdown {
           labelEl.innerHTML = item.label
           labelEl.setAttribute('data-info', item.label)
           inputEl.value = item.value 
-        }        
+        }
+        else if (this.selectedItems[0]) {
+          labelEl.innerHTML = dataToUse[this.selectedItems[0]].label
+          labelEl.setAttribute('data-info', dataToUse[this.selectedItems[0]].label)
+          inputEl.value = dataToUse[this.selectedItems[0]].value 
+        }         
       }
       else if (this.selectedItems.length > 1) {
         if (this.options.showCompleteSelectedList === true) {
@@ -2116,10 +2121,12 @@ class WebsyDropdown {
     if (this.options.onSearch) {
       dataToUse = this.options.items
     }
+    let item
     if (typeof index !== 'undefined' && index !== null) {
       let pos = this.selectedItems.indexOf(index)      
       if (this.options.multiSelect === false) {
         this.selectedItems = [index]
+        item = dataToUse[index]
       }
       else {
         if (pos !== -1) {
@@ -2127,11 +2134,10 @@ class WebsyDropdown {
         }
         else {
           this.selectedItems.push(index)
+          item = dataToUse[index]
         }
       } 
-    }    
-    // const item = this.options.items[index]
-    const item = dataToUse[index]
+    }        
     this.updateHeader(item)
     if (item && this.options.onItemSelected) {
       this.options.onItemSelected(item, this.selectedItems, dataToUse, this.options)
@@ -2155,6 +2161,7 @@ class WebsyForm {
       clearAfterSave: false,
       fields: [],
       mode: 'add',
+      useLoader: false,
       onSuccess: function (data) {},
       onError: function (err) { console.log('Error submitting form data:', err) }
     }
@@ -2189,6 +2196,7 @@ class WebsyForm {
     if (this.options.cancelFn) {
       this.options.cancelFn(this.elementId)
     }
+    this.loader.hide()
   }
   checkRecaptcha () {
     return new Promise((resolve, reject) => {
@@ -2239,6 +2247,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`)    
@@ -2261,6 +2270,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
         }
@@ -2497,6 +2509,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 = {}
@@ -2540,7 +2553,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><!--
           ` 
@@ -2559,8 +2572,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.'}')"
               />
@@ -2591,8 +2604,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()
@@ -2645,6 +2662,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)
@@ -2673,10 +2693,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()          
             })            
           }          
         }
@@ -4937,6 +4960,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
     }    
@@ -5162,6 +5189,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-es6.js

@@ -2069,6 +2069,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
             labelEl.innerHTML = item.label;
             labelEl.setAttribute('data-info', item.label);
             inputEl.value = item.value;
+          } else if (this.selectedItems[0]) {
+            labelEl.innerHTML = dataToUse[this.selectedItems[0]].label;
+            labelEl.setAttribute('data-info', dataToUse[this.selectedItems[0]].label);
+            inputEl.value = dataToUse[this.selectedItems[0]].value;
           }
         } else if (this.selectedItems.length > 1) {
           if (this.options.showCompleteSelectedList === true) {
@@ -2103,20 +2107,21 @@ var WebsyDropdown = /*#__PURE__*/function () {
       if (this.options.onSearch) {
         dataToUse = this.options.items;
       }
+      var item;
       if (typeof index !== 'undefined' && index !== null) {
         var pos = this.selectedItems.indexOf(index);
         if (this.options.multiSelect === false) {
           this.selectedItems = [index];
+          item = dataToUse[index];
         } else {
           if (pos !== -1) {
             this.selectedItems.splice(pos, 1);
           } else {
             this.selectedItems.push(index);
+            item = dataToUse[index];
           }
         }
       }
-      // const item = this.options.items[index]
-      var item = dataToUse[index];
       this.updateHeader(item);
       if (item && this.options.onItemSelected) {
         this.options.onItemSelected(item, this.selectedItems, dataToUse, this.options);
@@ -2145,6 +2150,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);
@@ -2183,6 +2189,7 @@ var WebsyForm = /*#__PURE__*/function () {
       if (this.options.cancelFn) {
         this.options.cancelFn(this.elementId);
       }
+      this.loader.hide();
     }
   }, {
     key: "checkRecaptcha",
@@ -2243,6 +2250,7 @@ var WebsyForm = /*#__PURE__*/function () {
     value: function clear() {
       var formEl = document.getElementById("".concat(this.elementId, "Form"));
       formEl.reset();
+      this.loader.hide();
     }
   }, {
     key: "data",
@@ -2266,6 +2274,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;
           }
@@ -2527,6 +2537,7 @@ var WebsyForm = /*#__PURE__*/function () {
         this.options.fields.forEach(function (f, i) {
           _this18.fieldMap[f.field] = f;
           f.owningElement = _this18.elementId;
+          var inputValue = typeof f.value === 'function' ? f.value() : f.value;
           if (f.disabled || f.readOnly || _this18.options.readOnly) {
             if (!f.options) {
               f.options = {};
@@ -2550,9 +2561,9 @@ var WebsyForm = /*#__PURE__*/function () {
             componentsToProcess.push(f);
             html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.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(_this18.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n              <span id='").concat(_this18.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(_this18.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(_this18.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 || _this18.options.readOnly ? 'disabled' : '', "\n                ").concat((f.attributes || []).join(' '), "\n                class=\"websy-input websy-textarea ").concat(f.readOnly || _this18.options.readOnly ? 'websy-input-readonly' : '', "\"\n              >").concat(f.value || '', "</textarea>\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.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(_this18.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 || _this18.options.readOnly ? 'disabled' : '', "\n                ").concat((f.attributes || []).join(' '), "\n                class=\"websy-input websy-textarea ").concat(f.readOnly || _this18.options.readOnly ? 'websy-input-readonly' : '', "\"\n              >").concat(inputValue || '', "</textarea>\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
           } else {
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.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(_this18.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 || _this18.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 || _this18.options.readOnly ? 'disabled' : '', "\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.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(_this18.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 || _this18.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 || _this18.options.readOnly ? 'disabled' : '', "\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
           }
         });
         if (this.options.useRecaptcha === true) {
@@ -2566,8 +2577,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 ((_this18.options.useRecaptcha === true || _this18.options.useRecaptchaV3 === true) && typeof grecaptcha !== 'undefined') {
             _this18.recaptchaReady();
@@ -2622,6 +2638,9 @@ var WebsyForm = /*#__PURE__*/function () {
             if (recaptchErrEl) {
               recaptchErrEl.classList.add('websy-hidden');
             }
+            if (_this19.options.useLoader) {
+              _this19.loader.show();
+            }
             var formData = new FormData(formEl);
             var data = {};
             var temp = new FormData(formEl);
@@ -2648,10 +2667,13 @@ var WebsyForm = /*#__PURE__*/function () {
               });
             } else if (_this19.options.submitFn) {
               _this19.options.submitFn(data, function () {
+                _this19.loader.hide();
                 if (_this19.options.clearAfterSave === true) {
                   // this.render()
                   formEl.reset();
                 }
+              }, function () {
+                _this19.loader.hide();
               });
             }
           } else {
@@ -4776,6 +4798,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;
       }
@@ -5017,6 +5043,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;