tg-controls_cli 0.0.97 → 0.1.1

package/dist/myLib.umd.js

@@ -24309,6 +24309,17 @@ function _unsupportedIterableToArray(r, a) {
 }
 module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
+/***/ }),
+
+/***/ "663a":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Autocomplete_vue_vue_type_style_index_0_id_c293aa98_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("fffa");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Autocomplete_vue_vue_type_style_index_0_id_c293aa98_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Autocomplete_vue_vue_type_style_index_0_id_c293aa98_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "68df":
@@ -25073,6 +25084,13 @@ module.exports = function (argument) {
 };
 
 
+/***/ }),
+
+/***/ "82af":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ }),
 
 /***/ "83ab":
@@ -25301,24 +25319,6 @@ if (!isCallable(store.inspectSource)) {
 module.exports = store.inspectSource;
 
 
-/***/ }),
-
-/***/ "8958":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchableSelect_vue_vue_type_style_index_0_id_688f213e_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("89e0");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchableSelect_vue_vue_type_style_index_0_id_688f213e_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchableSelect_vue_vue_type_style_index_0_id_688f213e_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
-/***/ }),
-
-/***/ "89e0":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
 /***/ }),
 
 /***/ "8b00":
@@ -26070,13 +26070,6 @@ module.exports = function (argument) {
 
 /***/ }),
 
-/***/ "a354":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "a395":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -36031,6 +36024,17 @@ $({ global: true, constructor: true, forced: FORCED }, {
 });
 
 
+/***/ }),
+
+/***/ "ea44":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchableSelect_vue_vue_type_style_index_0_id_76a37974_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("82af");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchableSelect_vue_vue_type_style_index_0_id_76a37974_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchableSelect_vue_vue_type_style_index_0_id_76a37974_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "eaf5":
@@ -36232,17 +36236,6 @@ module.exports = function (key) {
 };
 
 
-/***/ }),
-
-/***/ "f9c7":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Autocomplete_vue_vue_type_style_index_0_id_723cadb2_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("a354");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Autocomplete_vue_vue_type_style_index_0_id_723cadb2_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Autocomplete_vue_vue_type_style_index_0_id_723cadb2_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "fae6":
@@ -36325,7 +36318,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DynamicForm.vue?vue&type=template&id=228fd06e
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DynamicForm.vue?vue&type=template&id=25cf8cc7
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -36478,7 +36471,7 @@ var render = function render() {
 };
 var staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/DynamicForm.vue?vue&type=template&id=228fd06e
+// CONCATENATED MODULE: ./src/components/DynamicForm.vue?vue&type=template&id=25cf8cc7
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__("14d9");
@@ -42185,8 +42178,8 @@ var ColorField_component = normalizeComponent(
 )
 
 /* harmony default export */ var ColorField = (ColorField_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileField.vue?vue&type=template&id=63a4e453
-var FileFieldvue_type_template_id_63a4e453_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileField.vue?vue&type=template&id=a2ae54ee
+var FileFieldvue_type_template_id_a2ae54ee_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -42262,7 +42255,9 @@ var FileFieldvue_type_template_id_63a4e453_render = function render() {
         return _vm.dragOver.apply(null, arguments);
       },
       "dragleave": _vm.dragLeave,
-      "drop": _vm.handleDrop
+      "drop": function ($event) {
+        return _vm.handleDrop($event);
+      }
     }
   }, [_c('div', [_vm.previewFiles.length == 0 ? _c('span', [_vm._v("Drop or click here to upload files")]) : _vm._e(), _c('input', {
     staticClass: "d-none",
@@ -42312,9 +42307,9 @@ var FileFieldvue_type_template_id_63a4e453_render = function render() {
     })])]);
   })], 2)])]);
 };
-var FileFieldvue_type_template_id_63a4e453_staticRenderFns = [];
+var FileFieldvue_type_template_id_a2ae54ee_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/FileField.vue?vue&type=template&id=63a4e453
+// CONCATENATED MODULE: ./src/components/FileField.vue?vue&type=template&id=a2ae54ee
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileField.vue?vue&type=script&lang=js
 
@@ -42651,7 +42646,7 @@ var FileFieldvue_type_template_id_63a4e453_staticRenderFns = [];
         if (this.errors.length == 0) {
           this.fieldInfo.value = files;
           if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.onChange) {
-            this.fieldInfo.config.onChange(e, this.fieldInfo);
+            this.fieldInfo.config.onChange(event, this.fieldInfo);
           }
         }
       }
@@ -42670,8 +42665,8 @@ var FileFieldvue_type_template_id_63a4e453_staticRenderFns = [];
 
 var FileField_component = normalizeComponent(
   components_FileFieldvue_type_script_lang_js,
-  FileFieldvue_type_template_id_63a4e453_render,
-  FileFieldvue_type_template_id_63a4e453_staticRenderFns,
+  FileFieldvue_type_template_id_a2ae54ee_render,
+  FileFieldvue_type_template_id_a2ae54ee_staticRenderFns,
   false,
   null,
   null,
@@ -42680,6 +42675,416 @@ var FileField_component = normalizeComponent(
 )
 
 /* harmony default export */ var FileField = (FileField_component.exports);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/NormalFileField.vue?vue&type=template&id=0df5834b
+var NormalFileFieldvue_type_template_id_0df5834b_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "col-12 p-0 fileFieldAttachment",
+    attrs: {
+      "id": 'File_' + _vm.fieldInfo.name
+    }
+  }, [_c('div', {
+    staticClass: "custom-file"
+  }, [_c('input', {
+    staticClass: "custom-file-input",
+    attrs: {
+      "type": "file",
+      "id": 'NormalFile_' + _vm.fieldInfo.name,
+      "disabled": _vm.fieldInfo.disabled,
+      "multiple": _vm.canUploadMultipleFile(),
+      "aria-describedby": 'NormalFile_' + _vm.fieldInfo.name
+    },
+    on: {
+      "change": function ($event) {
+        return _vm.onChange($event);
+      }
+    }
+  }), _c('label', {
+    staticClass: "custom-file-label",
+    attrs: {
+      "for": 'NormalFile_' + _vm.fieldInfo.name
+    }
+  }, [_vm._v("Choose file")])]), _vm.errors.length > 0 ? _c('div', _vm._l(_vm.errors, function (error, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "file-upload__error"
+    }, [_c('span', {
+      staticClass: "invalid-feedback"
+    }, [_vm._v(_vm._s(error))])]);
+  }), 0) : _vm._e()]);
+};
+var NormalFileFieldvue_type_template_id_0df5834b_staticRenderFns = [];
+
+// CONCATENATED MODULE: ./src/components/NormalFileField.vue?vue&type=template&id=0df5834b
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/NormalFileField.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ var NormalFileFieldvue_type_script_lang_js = ({
+  components: {
+    Field: ValidationProvider
+  },
+  props: {
+    lang: {
+      type: String,
+      default: 'en'
+    },
+    fieldInfo: {
+      type: Object,
+      required: true
+    }
+  },
+  data: function () {
+    return {
+      isDragging: false,
+      maxSize: 0,
+      accept: '',
+      reject: '',
+      errors: [],
+      file: {
+        name: "",
+        size: 0,
+        type: "",
+        fileExtention: "",
+        url: "",
+        isImage: false,
+        isUploaded: false
+      },
+      previewFiles: []
+    };
+  },
+  mounted: function () {
+    this.fieldInfo.validationRules = getValidationRules(this.fieldInfo.validationRules, this.lang);
+    if (this.fieldInfo.placeholder) {
+      this.fileName = this.fieldInfo.placeholder;
+    }
+    if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('maxSize')) {
+      this.maxSize = this.fieldInfo.config.maxSize;
+    }
+    if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('accept')) {
+      this.accept = Array.prototype.map.call(this.fieldInfo.config.accept, function (item) {
+        return item.fileType;
+      }).join(",");
+    }
+    if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('reject')) {
+      this.reject = Array.prototype.map.call(this.fieldInfo.config.reject, function (item) {
+        return item.fileType;
+      }).join(",");
+    }
+  },
+  methods: {
+    openFilePopup() {
+      document.querySelectorAll('#File_' + this.fieldInfo.name + ' [type="file"]')[0].click();
+    },
+    RemoveFile(event, index) {
+      event.stopPropagation();
+      const dt = new DataTransfer();
+      const input = document.querySelectorAll('#File_' + this.fieldInfo.name + ' [type="file"]')[0];
+      const {
+        files
+      } = input;
+      this.previewFiles = [];
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        if (index !== i) {
+          dt.items.add(file);
+          var fileExtention = file.name.split(".").pop();
+          var isImage = ["jpg", "jpeg", "png", "gif"].includes(fileExtention);
+          let reader = new FileReader();
+          reader.addEventListener("load", () => {
+            // Set file data
+            this.file = {
+              name: file.name.split(".").shift(),
+              size: Math.round(file.size / 1024 / 1024 * 100) / 100,
+              type: file.type,
+              fileExtention: fileExtention,
+              isImage: isImage,
+              url: reader.result,
+              isUploaded: true
+            };
+            this.previewFiles.push(this.file);
+          }, false);
+          // Read uploaded file
+          reader.readAsDataURL(file);
+        }
+        // here you exclude the file. thus removing it.
+      }
+      input.files = dt.files; // Assign the updates list
+
+      if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.onRemoveFile) {
+        this.fieldInfo.config.onRemoveFile(event, index, this.fieldInfo);
+      }
+    },
+    onChange(e) {
+      this.errors = [];
+      // Check if file is selected
+      if (e.target.files && e.target.files[0]) {
+        // Check if file is valid
+        for (let index = 0; index < e.target.files.length; index++) {
+          const file = e.target.files[index];
+          if (this.isFileValid(file)) {
+            // Get uploaded file           
+            // Get file size
+            var fileSize = Math.round(file.size / 1024 / 1024 * 100) / 100;
+            // Get file extention
+            var fileExtention = file.name.split(".").pop();
+            // Get file name
+            var fileName = file.name.split(".").shift();
+            // Check if file is an image
+            var isImage = ["jpg", "jpeg", "png", "gif"].includes(fileExtention);
+            // Print to console
+            console.log(fileSize, fileExtention, fileName, isImage);
+            // Load the FileReader API
+            let reader = new FileReader();
+            reader.addEventListener("load", () => {
+              // Set file data
+              this.file = {
+                name: fileName,
+                size: fileSize,
+                type: file.type,
+                fileExtention: fileExtention,
+                isImage: isImage,
+                url: reader.result,
+                isUploaded: true
+              };
+              if (this.canUploadMultipleFile() == false) {
+                this.previewFiles = [];
+              }
+              this.previewFiles.push(this.file);
+            }, false);
+            // Read uploaded file
+            reader.readAsDataURL(file);
+          } else {
+            console.log("Invalid file");
+          }
+        }
+        var fileName = document.getElementById('NormalFile_' + this.fieldInfo.name).files[0].name;
+        var nextSibling = e.target.nextElementSibling;
+        nextSibling.innerText = fileName;
+        if (this.errors.length == 0) {
+          this.fieldInfo.value = e.target.files;
+          if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.onChange) {
+            this.fieldInfo.config.onChange(e, this.fieldInfo);
+          }
+        }
+      }
+    },
+    isFileSizeValid(fileSize) {
+      if (fileSize <= this.maxSize) {
+        console.log("File size is valid");
+      } else {
+        this.errors.push(`File size should be less than ${this.maxSize} MB`);
+      }
+    },
+    isFileTypeValid(fileExtention) {
+      if (this.reject != "" && this.reject.split(",").length > 0 && this.reject.split(",").includes(fileExtention)) {
+        this.errors.push(`File type should not be ${this.reject}`);
+      }
+      if (this.accept != "" && this.accept.split(",").length > 0) {
+        if (this.accept.split(",").includes(fileExtention)) {
+          console.log("File type is valid");
+        } else {
+          this.errors.push(`File type should be ${this.accept}`);
+        }
+      }
+    },
+    isFileValid(file) {
+      this.isFileSizeValid(Math.round(file.size / 1024 / 1024 * 100) / 100);
+      this.isFileTypeValid(file.name.split(".").pop());
+      if (this.errors.length === 0) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    canUploadMultipleFile() {
+      if (this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('multiple')) {
+        return this.fieldInfo.config.multiple;
+      }
+      return false;
+    },
+    getSelectedFile: function () {
+      try {
+        if (this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('showSelectedFiles')) {
+          return this.fieldInfo.config.showSelectedFiles;
+        }
+        return [];
+      } catch (ex) {
+        console.log(ex);
+        return [];
+      }
+    },
+    isShowCrossOnSelectedFile: function () {
+      try {
+        if (this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('showCrossOnSelectedFiles')) {
+          return this.fieldInfo.config.showCrossOnSelectedFiles;
+        }
+        return true;
+      } catch (ex) {
+        console.log(ex);
+        return true;
+      }
+    },
+    getFileName: function (name) {
+      try {
+        let arr = name.split(".");
+        let path = arr[0].length > 4 ? arr[0].substring(0, 4) + "..." + arr[1] : arr[0] + "." + arr[1];
+        return path;
+      } catch (ex) {
+        return name;
+      }
+    },
+    getFileIcon: function (name) {
+      let arr = name.split(".");
+      let icon = "";
+      switch (arr[1]) {
+        case "jpg":
+        case "png":
+        case "jpeg":
+        case "gif":
+          icon = "fa-file-image-o";
+          break;
+        case "doc":
+        case "docs":
+          icon = "fa-file-word-o";
+          break;
+        case "pdf":
+          icon = "fa-file-pdf-o";
+          break;
+        case "xlsx":
+        case "xlsm":
+        case "xlsb":
+        case "xltx":
+        case "xls":
+        case "xlt":
+          icon = "fa-file-excel-o";
+          break;
+        case "mp4":
+        case "mov":
+        case "wmv":
+        case "flv":
+        case "avi":
+        case "webm":
+        case "mkv":
+        case "avchd":
+          icon = "fa-file-video-o";
+          break;
+        case "pptx":
+          icon = "fa-file-powerpoint-o";
+          break;
+        case "mp3":
+        case "aac":
+        case "wav":
+        case "aiff":
+        case "dsd":
+        case "pcm":
+          icon = "fa-file-audio-o";
+          break;
+        default:
+          icon = "fa-file-o";
+      }
+      return icon;
+    },
+    onDelete: function (item) {
+      try {
+        if (this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('onDeleteSelectedFiles')) {
+          this.fieldInfo.config.onDeleteSelectedFiles(item);
+        }
+      } catch (ex) {
+        console.log(ex);
+      }
+    },
+    onClickSelectedFile: function (item) {
+      try {
+        if (this.fieldInfo.config && this.fieldInfo.config.hasOwnProperty('onClickSelectedFiles')) {
+          this.fieldInfo.config.onClickSelectedFiles(item);
+        }
+      } catch (ex) {
+        console.log(ex);
+      }
+    },
+    dragOver: function () {
+      this.isDragging = true;
+    },
+    dragLeave: function () {
+      this.isDragging = false;
+    },
+    handleDrop: function (event) {
+      event.preventDefault();
+      this.isDragging = false;
+      const files = event.target.files || event.dataTransfer.files;
+      if (files.length) {
+        for (let index = 0; index < files.length; index++) {
+          const file = files[index];
+          if (this.isFileValid(file)) {
+            // Get uploaded file           
+            // Get file size
+            var fileSize = Math.round(file.size / 1024 / 1024 * 100) / 100;
+            // Get file extention
+            var fileExtention = file.name.split(".").pop();
+            // Get file name
+            var fileName = file.name.split(".").shift();
+            // Check if file is an image
+            var isImage = ["jpg", "jpeg", "png", "gif"].includes(fileExtention);
+            // Print to console
+            console.log(fileSize, fileExtention, fileName, isImage);
+            // Load the FileReader API
+            let reader = new FileReader();
+            reader.addEventListener("load", () => {
+              // Set file data
+              this.file = {
+                name: fileName,
+                size: fileSize,
+                type: file.type,
+                fileExtention: fileExtention,
+                isImage: isImage,
+                url: reader.result,
+                isUploaded: true
+              };
+              if (this.canUploadMultipleFile() == false) {
+                this.previewFiles = [];
+              }
+              this.previewFiles.push(this.file);
+            }, false);
+            // Read uploaded file
+            reader.readAsDataURL(file);
+          } else {
+            console.log("Invalid file");
+          }
+        }
+        if (this.errors.length == 0) {
+          this.fieldInfo.value = files;
+          if (this.fieldInfo && this.fieldInfo.config && this.fieldInfo.config.onChange) {
+            this.fieldInfo.config.onChange(e, this.fieldInfo);
+          }
+        }
+      }
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/NormalFileField.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_NormalFileFieldvue_type_script_lang_js = (NormalFileFieldvue_type_script_lang_js); 
+// CONCATENATED MODULE: ./src/components/NormalFileField.vue
+
+
+
+
+
+/* normalize component */
+
+var NormalFileField_component = normalizeComponent(
+  components_NormalFileFieldvue_type_script_lang_js,
+  NormalFileFieldvue_type_template_id_0df5834b_render,
+  NormalFileFieldvue_type_template_id_0df5834b_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var NormalFileField = (NormalFileField_component.exports);
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TreeSelectField.vue?vue&type=template&id=4975b454
 var TreeSelectFieldvue_type_template_id_4975b454_render = function render() {
   var _vm = this,
@@ -42922,8 +43327,8 @@ var SlotField_component = normalizeComponent(
 )
 
 /* harmony default export */ var SlotField = (SlotField_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SearchableSelectField.vue?vue&type=template&id=b5b1bf16
-var SearchableSelectFieldvue_type_template_id_b5b1bf16_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SearchableSelectField.vue?vue&type=template&id=080481ab
+var SearchableSelectFieldvue_type_template_id_080481ab_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('Field', {
@@ -42938,7 +43343,7 @@ var SearchableSelectFieldvue_type_template_id_b5b1bf16_render = function render(
         errors
       }) {
         return [_c('div', {
-          staticClass: "w-100 d-flex"
+          staticClass: "w-100"
         }, [_c('SearchableSelect', {
           attrs: {
             "items": _vm.fieldInfo.config.OptionsForBind,
@@ -42947,16 +43352,18 @@ var SearchableSelectFieldvue_type_template_id_b5b1bf16_render = function render(
             "item-fields": _vm.computedItemFields(_vm.fieldInfo),
             "group-fields": _vm.computedGroupFields(_vm.fieldInfo),
             "max-render-items": _vm.computedMaxRenderItems(_vm.fieldInfo),
+            "disabled": _vm.fieldInfo.disabled,
             "lazy-load": true,
             "multiple": _vm.fieldInfo.config.isMultiple,
             "label": _vm.fieldInfo.label,
             "placeholder": _vm.fieldInfo.placeholder,
             "status-field-config": _vm.fieldInfo.config.statusFieldConfig,
-            "min-search-length": _vm.fieldInfo.config.minSearchLength
+            "min-search-length": _vm.fieldInfo.config.minSearchLength,
+            "has-error": errors.length > 0
           },
           on: {
             "change": function ($event) {
-              return _vm.onSearchableChange($event, _vm.field);
+              return _vm.onSearchableChange($event, _vm.fieldInfo);
             }
           },
           model: {
@@ -42973,16 +43380,17 @@ var SearchableSelectFieldvue_type_template_id_b5b1bf16_render = function render(
     }])
   });
 };
-var SearchableSelectFieldvue_type_template_id_b5b1bf16_staticRenderFns = [];
+var SearchableSelectFieldvue_type_template_id_080481ab_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/SearchableSelectField.vue?vue&type=template&id=b5b1bf16
+// CONCATENATED MODULE: ./src/components/SearchableSelectField.vue?vue&type=template&id=080481ab
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SearchableSelect.vue?vue&type=template&id=688f213e&scoped=true
-var SearchableSelectvue_type_template_id_688f213e_scoped_true_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SearchableSelect.vue?vue&type=template&id=76a37974&scoped=true
+var SearchableSelectvue_type_template_id_76a37974_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
-    staticClass: "searchable-select"
+    staticClass: "searchable-select",
+    style: _vm.hasError == true ? 'border:1px solid #dc3545 !important;' : ''
   }, [_c('Autocomplete', {
     attrs: {
       "value": _vm.internalValue,
@@ -43023,12 +43431,12 @@ var SearchableSelectvue_type_template_id_688f213e_scoped_true_render = function
     }
   })], 1);
 };
-var SearchableSelectvue_type_template_id_688f213e_scoped_true_staticRenderFns = [];
+var SearchableSelectvue_type_template_id_76a37974_scoped_true_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/SearchableSelect.vue?vue&type=template&id=688f213e&scoped=true
+// CONCATENATED MODULE: ./src/components/SearchableSelect.vue?vue&type=template&id=76a37974&scoped=true
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Autocomplete.vue?vue&type=template&id=723cadb2&scoped=true
-var Autocompletevue_type_template_id_723cadb2_scoped_true_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4289e630-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Autocomplete.vue?vue&type=template&id=c293aa98&scoped=true
+var Autocompletevue_type_template_id_c293aa98_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -43141,14 +43549,14 @@ var Autocompletevue_type_template_id_723cadb2_scoped_true_render = function rend
     }, [_vm.groupFields.length > 0 ? _c('div', {
       staticClass: "d-flex flex-column"
     }, [_c('div', {
-      staticClass: "font-weight-bold"
-    }, [_vm._v(_vm._s(group.group))]), _c('div', {
+      staticClass: "font-weight-bold font-14"
+    }, [_vm._v(_vm._s(group.group))]), _vm.groupFields.length > 1 ? _c('div', {
       staticClass: "small text-muted mt-1"
     }, _vm._l(_vm.groupFields, function (field, idx) {
       return _c('span', {
         key: field
       }, [idx > 0 ? _c('span', [_vm._v(" • ")]) : _vm._e(), _vm.getGroupFieldValue(group, field) ? _c('span', [_vm._v(_vm._s(field) + ": " + _vm._s(_vm.getGroupFieldValue(group, field)))]) : _vm._e()]);
-    }), 0)]) : _c('div', [_vm._v(_vm._s(group.group))])]), _c('ul', {
+    }), 0) : _vm._e()]) : _c('div', [_vm._v(_vm._s(group.group))])]), _c('ul', {
       staticClass: "list-group list-group-flush"
     }, _vm._l(group.items, function (item, itemIndex) {
       return _c('li', {
@@ -43487,14 +43895,14 @@ var Autocompletevue_type_template_id_723cadb2_scoped_true_render = function rend
     }, [_vm.groupFields.length > 0 ? _c('div', {
       staticClass: "d-flex flex-column"
     }, [_c('div', {
-      staticClass: "font-weight-bold"
-    }, [_vm._v(_vm._s(group.group))]), _c('div', {
+      staticClass: "font-weight-bold font-14"
+    }, [_vm._v(_vm._s(group.group))]), _vm.groupFields.length > 1 ? _c('div', {
       staticClass: "small text-muted mt-1"
     }, _vm._l(_vm.groupFields, function (field, idx) {
       return _c('span', {
         key: field
       }, [idx > 0 ? _c('span', [_vm._v(" • ")]) : _vm._e(), _vm.getGroupFieldValue(group, field) ? _c('span', [_vm._v(_vm._s(field) + ": " + _vm._s(_vm.getGroupFieldValue(group, field)))]) : _vm._e()]);
-    }), 0)]) : _c('div', [_vm._v(_vm._s(group.group))])]), _c('ul', {
+    }), 0) : _vm._e()]) : _c('div', [_vm._v(_vm._s(group.group))])]), _c('ul', {
       staticClass: "list-group list-group-flush"
     }, _vm._l(group.items, function (item, itemIndex) {
       return _c('li', {
@@ -43631,7 +44039,7 @@ var Autocompletevue_type_template_id_723cadb2_scoped_true_render = function rend
     }, [_vm._v(_vm._s(error))]);
   }), 0) : _vm._e()]);
 };
-var Autocompletevue_type_template_id_723cadb2_scoped_true_staticRenderFns = [function () {
+var Autocompletevue_type_template_id_c293aa98_scoped_true_staticRenderFns = [function () {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -43655,7 +44063,7 @@ var Autocompletevue_type_template_id_723cadb2_scoped_true_staticRenderFns = [fun
   }, [_vm._v("Loading...")])]);
 }];
 
-// CONCATENATED MODULE: ./src/components/Autocomplete.vue?vue&type=template&id=723cadb2&scoped=true
+// CONCATENATED MODULE: ./src/components/Autocomplete.vue?vue&type=template&id=c293aa98&scoped=true
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.every.js
 var es_iterator_every = __webpack_require__("d866");
@@ -44517,8 +44925,8 @@ var es_set_union_v2 = __webpack_require__("72c3");
 });
 // CONCATENATED MODULE: ./src/components/Autocomplete.vue?vue&type=script&lang=js
  /* harmony default export */ var components_Autocompletevue_type_script_lang_js = (Autocompletevue_type_script_lang_js); 
-// EXTERNAL MODULE: ./src/components/Autocomplete.vue?vue&type=style&index=0&id=723cadb2&prod&scoped=true&lang=css
-var Autocompletevue_type_style_index_0_id_723cadb2_prod_scoped_true_lang_css = __webpack_require__("f9c7");
+// EXTERNAL MODULE: ./src/components/Autocomplete.vue?vue&type=style&index=0&id=c293aa98&prod&scoped=true&lang=css
+var Autocompletevue_type_style_index_0_id_c293aa98_prod_scoped_true_lang_css = __webpack_require__("663a");
 
 // CONCATENATED MODULE: ./src/components/Autocomplete.vue
 
@@ -44531,11 +44939,11 @@ var Autocompletevue_type_style_index_0_id_723cadb2_prod_scoped_true_lang_css = _
 
 var Autocomplete_component = normalizeComponent(
   components_Autocompletevue_type_script_lang_js,
-  Autocompletevue_type_template_id_723cadb2_scoped_true_render,
-  Autocompletevue_type_template_id_723cadb2_scoped_true_staticRenderFns,
+  Autocompletevue_type_template_id_c293aa98_scoped_true_render,
+  Autocompletevue_type_template_id_c293aa98_scoped_true_staticRenderFns,
   false,
   null,
-  "723cadb2",
+  "c293aa98",
   null
   
 )
@@ -44689,6 +45097,10 @@ function SearchableSelectvue_type_script_lang_js_debounce(func, wait) {
       type: Boolean,
       default: false
     },
+    hasError: {
+      type: Boolean,
+      default: false
+    },
     // Status field configuration for dynamic color formatting
     statusFieldConfig: {
       type: Object,
@@ -45096,8 +45508,8 @@ function SearchableSelectvue_type_script_lang_js_debounce(func, wait) {
 });
 // CONCATENATED MODULE: ./src/components/SearchableSelect.vue?vue&type=script&lang=js
  /* harmony default export */ var components_SearchableSelectvue_type_script_lang_js = (SearchableSelectvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./src/components/SearchableSelect.vue?vue&type=style&index=0&id=688f213e&prod&scoped=true&lang=css
-var SearchableSelectvue_type_style_index_0_id_688f213e_prod_scoped_true_lang_css = __webpack_require__("8958");
+// EXTERNAL MODULE: ./src/components/SearchableSelect.vue?vue&type=style&index=0&id=76a37974&prod&scoped=true&lang=css
+var SearchableSelectvue_type_style_index_0_id_76a37974_prod_scoped_true_lang_css = __webpack_require__("ea44");
 
 // CONCATENATED MODULE: ./src/components/SearchableSelect.vue
 
@@ -45110,11 +45522,11 @@ var SearchableSelectvue_type_style_index_0_id_688f213e_prod_scoped_true_lang_css
 
 var SearchableSelect_component = normalizeComponent(
   components_SearchableSelectvue_type_script_lang_js,
-  SearchableSelectvue_type_template_id_688f213e_scoped_true_render,
-  SearchableSelectvue_type_template_id_688f213e_scoped_true_staticRenderFns,
+  SearchableSelectvue_type_template_id_76a37974_scoped_true_render,
+  SearchableSelectvue_type_template_id_76a37974_scoped_true_staticRenderFns,
   false,
   null,
-  "688f213e",
+  "76a37974",
   null
   
 )
@@ -45311,7 +45723,7 @@ var SearchableSelect_component = normalizeComponent(
     },
     onSearchableChange: function (x, field, e) {
       if (field && field.hasOwnProperty("config") && field.config.hasOwnProperty("onChange")) {
-        field.onChange(field, x);
+        field.config.onChange(field, x);
       }
     },
     RenderOptions() {
@@ -45348,8 +45760,8 @@ var SearchableSelect_component = normalizeComponent(
 
 var SearchableSelectField_component = normalizeComponent(
   components_SearchableSelectFieldvue_type_script_lang_js,
-  SearchableSelectFieldvue_type_template_id_b5b1bf16_render,
-  SearchableSelectFieldvue_type_template_id_b5b1bf16_staticRenderFns,
+  SearchableSelectFieldvue_type_template_id_080481ab_render,
+  SearchableSelectFieldvue_type_template_id_080481ab_staticRenderFns,
   false,
   null,
   null,
@@ -45380,6 +45792,7 @@ var SearchableSelectField_component = normalizeComponent(
 
 
 
+
 
 
 //import { getFormValidationRules } from  "./validationMessages.vue"
@@ -45400,6 +45813,7 @@ var SearchableSelectField_component = normalizeComponent(
     TextAreaField: TextAreaField,
     ColorField: ColorField,
     FileField: FileField,
+    NormalFileField: NormalFileField,
     TreeSelectField: TreeSelectField,
     SlotField: SlotField,
     PasswordField: PasswordField,
@@ -46124,6 +46538,13 @@ function isSymbol(value) {
 module.exports = isSymbol;
 
 
+/***/ }),
+
+/***/ "fffa":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ })
 
 /******/ });