bromcom-ui 2.8.0-rc.9 → 3.0.0-rc.0

package/dist/collection/components/organism/form/form.js

@@ -12,434 +12,169 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
+import { forceUpdate, h, Host } from '@stencil/core';
 import { IsLoad } from '../../../decorators/is-load-decorator';
+import { Generate } from '../../../helper/generate';
 import { StringHelper } from '../../../helper/string-helper';
-import { delay, getChildElements } from '../../../utils/utils';
-import { validate } from '../../../utils/validation';
+import Bcm from '../../../models/bcm';
+import { BcmFormComponents } from './bcm-form-components';
+import snq from 'snq';
 export class BcmForm {
   constructor() {
+    this.isLoad = false;
     this.formData = {};
-    this.inputs = [];
-    this.duplicateInput = [];
-    this.isValid = true;
-    this.returnCaption = [];
-    this.Bromcom = {
-      errors: {
-        targetFormNotExist: 'target form is not exist --> ',
-      },
-      inputComponents: {
-        // Birbirinin aynısı
-        INPUT: 'input',
-        TEXTAREA: 'textarea',
-        //çok benzer
-        SWITCH: 'switch',
-        CHECKBOX: 'checkbox',
-        RADIO_GROUP: 'radio-group',
-        CHECKBOX_GROUP: 'checkbox-group',
-        RANGE: 'range',
-        // sadece value fırlatıyor
-        FORM: 'form',
-        FORM_GROUP: 'form-group',
-        // *En vakit alacak => içinde select, autocomplete, listbox, treeview özellikleri var
-        LIST: 'list',
-        //
-        COLORPICKER: 'colorpicker',
-        // picker aslında tek komponent hepsi datetimepicker
-        DATE_PICKER: 'date-picker',
-        TIME_PICKER: 'time-picker',
-        DATETIME_PICKER: 'datetime-picker',
-        // silinecek komponentler
-        SELECT: 'select',
-        LISTBOX: 'listbox'
-      },
-      helpers: {
-        randomId: function () {
-          return Math.random().toString(16).slice(2, -1);
-        },
-      },
-    };
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.hidden = false;
+    this.formObj = new Map();
+    this._id = Generate.UID();
     this.validation = false;
-    this.name = "";
-    this.value = undefined;
-    this.autocomplete = false;
   }
-  handleSubmit() {
-    // if (lowercase(e.target.nodeName) === 'bcm-button') {
-    //     if (e.target.type === 'submit') {
-    //         this.submitFunction()
-    //     }
-    // }
+  componentDidLoad() {
+    this.isLoad = true;
+    forceUpdate(this);
   }
-  async submitFunction() {
-    this.formData = {};
-    this.inputs = [];
-    this.selector = this.el;
-    await this.getInputs();
-    await delay(10);
-    const usrFrmData = await this.userFormData();
-    var formData = { isValid: true, formData: usrFrmData };
-    if (this.name) {
-      formData = Object.assign(Object.assign({}, formData), { formName: this.name });
-    }
-    if (this.isValid) {
-      this.bcmForm.emit(formData);
-      return formData;
-    }
-    else {
-      this.returnCaption = { isValid: false, 'message': 'Please fill in all inputs', 'errorDetails': this.returnCaption, formData: usrFrmData };
-      if (this.name) {
-        this.returnCaption = Object.assign(Object.assign({}, this.returnCaption), { formName: this.name });
+  componentIsValid(element) {
+    if (!element.hidden) {
+      this.checkIsGroup(element);
+      const noValid = ['bcm-checkbox', 'bcm-switch'].includes(StringHelper.lowercase(element.tagName)) ? element.value == false : StringHelper.isNullOrEmpty(element.value);
+      if (element.required) {
+        if (noValid) {
+          element.captionError = Bcm.FormErrorMessages.required;
+          element.captionType = 'error';
+          this.formObj.set(element.id, {
+            name: element.name,
+            valid: false,
+            errorDetails: element.captionError,
+          });
+        }
+        else {
+          element.captionError = null;
+          element.captionType = 'default';
+          this.formObj.delete(element.id);
+        }
       }
-      this.bcmForm.emit(this.returnCaption);
-      return this.returnCaption;
     }
   }
-  async submit() {
-    return Promise.resolve(this.submitFunction());
+  isGroup(el) {
+    return ['bcm-checkbox-group'].includes(StringHelper.lowercase(el.tagName));
   }
-  async set(data) {
-    var _a;
-    const validate = this.validation;
-    this.validation = false;
-    // debugger
-    this.selector = this.el;
-    await this.getInputs();
-    if (data && ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      for (const key of Object.keys(data)) {
-        const item = this.inputs.find(item => item.name === key);
-        if (item) {
-          try {
-            await item.set(data[key]);
-          }
-          catch (error) {
-            console.log(item.nodeName, "set", error);
-          }
-        }
+  checkIsGroup(element) {
+    if (this.isGroup(element)) {
+      for (let checkbox of Array.from(element.querySelectorAll('bcm-checkbox'))) {
+        checkbox && this.componentIsValid(checkbox);
       }
     }
-    this.validation = validate;
   }
-  async get() {
-    var _a;
-    let formData = {};
-    this.selector = this.el;
-    const inputsCache = this.inputs;
-    await this.getInputs();
-    ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.inputs.forEach(async (item) => {
-      try {
-        const value = await item.get();
-        formData = Object.assign(Object.assign({}, formData), { [item.name]: value });
+  changeCheckboxGroup(event) {
+    const element = event.target;
+    const { changed } = event.detail;
+    const checkboxes = Array.from(element.querySelectorAll('bcm-checkbox'));
+    for (let checkbox of checkboxes) {
+      if (checkbox.id == changed.element.id) {
+        checkbox.value = changed.event.value;
+        this.componentIsValid(checkbox);
       }
-      catch (error) {
-        console.log(`${item.nodeName} get error`);
-      }
-    });
-    this.inputs = inputsCache;
-    await delay(10);
-    return Promise.resolve(formData);
+    }
   }
-  async setClear() {
-    this.formData = {};
-    this.inputs = [];
-    this.selector = this.el;
-    let clear = [];
-    await this.getInputs();
-    this.inputs.forEach(async (item) => {
-      try {
-        clear.push(await item.setClear());
-      }
-      catch (error) {
-        console.log(error);
-      }
-    });
-    await Promise.all(clear).then(() => {
-      this.formData = {};
-      this.inputs = [];
-      this.duplicateInput = [];
-      this.selector;
-      this.isValid = true;
-      this.returnCaption = [];
-    });
-    await delay(10);
-    return Promise.resolve(true);
+  bcmComponentList() {
+    return snq(() => Array.from(this.el.querySelectorAll('*'))
+      .filter(item => BcmFormComponents.includes(item.tagName) && (!item['s-hn'] || item['s-hn'] == 'BCM-FORM-2'))
+      .filter(Boolean), []);
   }
-  async resetCaption() {
-    await delay(10);
-    this.formData = {};
-    this.inputs = [];
-    this.selector = this.el;
-    await this.getInputs();
-    for (const item of this.inputs) {
-      try {
-        await item.resetCaption();
-      }
-      catch (error) {
-        console.log(item.nodeName, "rc p");
+  formResponse() {
+    const formRespObj = {
+      formData: this.formData,
+      isValid: this.formObj.size == 0,
+      errorDetails: Object.assign({}, (this.formObj.size > 0 &&
+        Array.from(this.formObj).map(([_, value]) => ({
+          [value.name]: value.errorDetails,
+        })))),
+      message: this.formObj.size == 0 ? '' : 'Please fill in all inputs',
+    };
+    this.bcmForm.emit(formRespObj);
+    return formRespObj;
+  }
+  async setMethodType(type) {
+    const { isLoad, validation } = this;
+    if (isLoad) {
+      for (const component of this.bcmComponentList()) {
+        try {
+          await component[type]();
+          type == 'setClear' && validation && (this.componentIsValid(component));
+        }
+        catch (e) {
+          console.error(component.nodeName, type, e);
+        }
       }
     }
-    await delay(10);
     return Promise.resolve();
   }
-  async config(_config) {
-    if (_config['validation']) {
-      typeof _config['validation'] == 'boolean'
-        ? this.validation = _config['validation']
-        : this.validation = false;
+  async submit() {
+    const { isLoad, validation } = this;
+    if (isLoad) {
+      for (const item of this.bcmComponentList()) {
+        const { name, value } = item;
+        this.formData[name] = StringHelper.isNullOrEmpty(value) ? null : value;
+        validation && this.componentIsValid(item);
+      }
     }
-    return true;
+    return Promise.resolve(this.formResponse());
   }
-  async getInputs() {
-    var form = this.selector;
-    if (!form) {
-      console.warn(this.Bromcom.errors.targetFormNotExist + this.selector);
-      return;
-    }
-    const inputs = Array.from(form.querySelectorAll('bcm-' + Object.values(this.Bromcom.inputComponents).join(',bcm-')));
-    this.duplicateInput = [];
-    // s-hn: Stencil private flag that contains host web component
-    // https://github.com/ionic-team/stencil/blob/45388e95edb46ef357eb9ae37cd32bbb5bc1ed23/src/runtime/vdom/vdom-render.ts#L116
-    const rootInputs = inputs.filter((input) => { var _a; return !input['s-hn'] || ((_a = input['s-hn']) === null || _a === void 0 ? void 0 : _a.nodeName) !== 'BcmForm'; });
-    // debugger;
-    for (const item of rootInputs) {
-      if (StringHelper.lowercase(item.nodeName) == "bcm-checkbox-group") {
-        let checkboxs = item.querySelectorAll("bcm-checkbox");
-        if (checkboxs) {
-          for (const checkbox of checkboxs) {
-            this.duplicateInput.push(checkbox.name);
+  async set(data) {
+    var _a, _b, _c;
+    if (this.isLoad && data && ((_a = this.bcmComponentList()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      for (let key of Object.keys(data)) {
+        const element = (_c = (_b = this.bcmComponentList()) === null || _b === void 0 ? void 0 : _b.find((item) => item.name == key)) !== null && _c !== void 0 ? _c : {};
+        if (element) {
+          try {
+            await element.set(data[key]);
+            this.componentIsValid(element);
           }
-        }
-      }
-      if (StringHelper.lowercase(item.nodeName) == "bcm-form") {
-        const groupInputs = Array.from(item.querySelectorAll('bcm-' + Object.values(this.Bromcom.inputComponents).join(',bcm-')));
-        let itemObject = {};
-        for (const element of groupInputs) {
-          var name = element.name;
-          var value = element.value;
-          itemObject = Object.assign(Object.assign({}, itemObject), { [name]: value });
-          this.duplicateInput.push(element.name);
-        }
-        item.value = itemObject;
-        let checkboxs = item.querySelectorAll("bcm-checkbox");
-        if (checkboxs) {
-          for (const checkbox of checkboxs) {
-            this.duplicateInput.push(checkbox.name);
+          catch (error) {
+            console.warn('set: ', key, element.nodeName);
           }
         }
       }
     }
-    await delay(10);
-    this.inputs = rootInputs;
   }
-  getItemValue(item) {
-    const tagName = item.tagName.toLowerCase().replace('bcm-', '');
-    switch (tagName) {
-      /*   case 'date-picker':
-        case 'datetime-picker':
-            return item.value.timestamp
-        case 'time-picker':
-            return item.value.time */
-      default:
-        return item.value;
+  async get() {
+    var _a;
+    let form = {};
+    if (((_a = this.bcmComponentList()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      for (let element of this.bcmComponentList()) {
+        const value = await element.get();
+        form = Object.assign(Object.assign({}, form), { [element.name]: StringHelper.isNullOrEmpty(value) ? null : value });
+      }
     }
+    return Promise.resolve(form);
   }
-  isWrapperComponent(item) {
-    return ['bcm-datetime-picker', 'bcm-date-picker', 'bcm-time-picker'].includes(item.toLowerCase());
-  }
-  isGroupComponent(item) {
-    return ['bcm-checkbox-group'].includes(item.toLowerCase());
-  }
-  isListComponent(item) {
-    return ['bcm-list'].includes(item.toLowerCase());
+  async resetCaption() {
+    return Promise.resolve(await this.setMethodType('resetCaption'));
   }
-  async userFormData() {
+  async setClear() {
     this.formData = {};
-    this.isValid = true;
-    this.returnCaption = [];
-    for (const item of this.inputs) {
-      // const isListComponent = this.isListComponent(item.tagName);
-      const isGroupComponent = this.isGroupComponent(item.tagName);
-      const isWrapperComponent = this.isWrapperComponent(item.tagName);
-      const wrapperComponent = isWrapperComponent && item;
-      const input = isWrapperComponent
-        ? await item.getInput() && item
-        : item;
-      // input.caption = ''
-      // input.captionType = ''
-      if (this.validation) {
-        let valid = null;
-        // if (isListComponent) {
-        //     valid = !(input.value && input.value.length > 0) && validate.required(input.value)
-        // } else
-        if (isWrapperComponent) {
-          const isPickerValid = await wrapperComponent.isValid();
-          valid = validate.required(input.value, isPickerValid);
-          if (valid) {
-            if (input.value instanceof Object) {
-              if (input.value["isValid"] == false) {
-                valid = validate.required("", isPickerValid);
-              }
-            }
-            else {
-              valid = validate.required(input.value, isPickerValid);
-            }
-          }
-        }
-        else if (isGroupComponent) {
-          const childsCheckbox = getChildElements(input, 'bcm-checkbox:not(#bcm-indeterminate-element)');
-          if (childsCheckbox && childsCheckbox.length > 0) {
-            for (const element of childsCheckbox) {
-              if (element && element.required === true) {
-                valid = validate.required(element.checked);
-                if (!valid['valid']) {
-                  element.noCaption = false;
-                  element.captionError = valid['message'];
-                  element.captionType = valid['type'];
-                }
-                else {
-                  element.noCaption = input.noCaption;
-                  element.captionError = null;
-                  element.captionType = "default";
-                }
-              }
-            }
-          }
-        }
-        else {
-          valid = validate.required(input.value);
-        }
-        if (input.required) {
-          if (!valid['valid']) {
-            input.captionError = valid['message'];
-            input.captionType = valid['type'];
-          }
-          else {
-            input.captionError = null;
-            input.captionType = "default";
-          }
-          await delay(10);
-          const selfValidation = validate.selfValidation(input);
-          if (valid['valid']) {
-            if (!selfValidation['valid']) {
-              input.captionError = selfValidation['message'];
-              input.captionType = selfValidation['type'];
-            }
-          }
-        }
-        let name = input.name;
-        let value = input.captionError;
-        !input.hidden && input.captionType == 'error' && (this.returnCaption = [...Array.from(this.returnCaption), { [name]: value }],
-          this.isValid = false);
-      }
-      if (input.name && !this.duplicateInput.includes(input.name)) {
-        var itemValue = this.getItemValue(input);
-        if (!itemValue || itemValue == undefined || itemValue == null) {
-          itemValue = null;
-        }
-        this.formData[input.name] = itemValue;
-      }
-    }
-    return this.formData;
+    this.formObj = new Map();
+    return Promise.resolve(await this.setMethodType('setClear'));
   }
-  async handleChange(e) {
-    const isWrapperComponent = this.isWrapperComponent(e.target.tagName);
-    const isGroupComponent = this.isGroupComponent(e.target.tagName);
-    let target;
-    if (isWrapperComponent) {
-      target = e.target.getInput && await e.target.getInput() || e.target;
-    }
-    else if (isGroupComponent) {
-      let req = false;
-      const childsCheckbox = getChildElements(e.target, 'bcm-checkbox:not(#bcm-indeterminate-element)');
-      childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
-        if (element && element.required === true) {
-          req = true;
-        }
-      }));
-      target = Object.assign(Object.assign({}, e.target), { required: req });
-    }
-    else {
-      target = e.target;
-    }
-    const value = e.target.value;
-    const wrapperComponent = isWrapperComponent && e.target;
-    var isPickerValid;
-    if (isWrapperComponent) {
-      isPickerValid = await wrapperComponent.isValid();
-    }
-    const tick = setTimeout(() => {
-      if (target.required) {
-        let valid = null;
-        if (isWrapperComponent) {
-          valid = validate.required(value, isPickerValid);
-          if (valid) {
-            if (value instanceof Object) {
-              if (value["isValid"] == false) {
-                valid = validate.required("", isPickerValid);
-              }
-            }
-            else {
-              valid = validate.required(value, isPickerValid);
-            }
-          }
-        }
-        else if (isGroupComponent) {
-          const childsCheckbox = getChildElements(e.target, 'bcm-checkbox:not(#bcm-indeterminate-element)');
-          childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
-            if (element && element.required === true) {
-              valid = validate.required(element.checked);
-              if (!valid['valid']) {
-                element.noCaption = false;
-                element.captionError = valid['message'];
-                element.captionType = valid['type'];
-              }
-              else {
-                element.noCaption = e.target.noCaption;
-                element.captionError = null;
-                element.captionType = "default";
-              }
-            }
-          }));
-        }
-        else {
-          valid = validate.required(value);
-        }
-        if (valid['valid']) {
-          target.captionError = null;
-          target.captionType = null;
-        }
-        else {
-          target.captionError = valid['message'];
-          target.captionType = valid['type'];
-        }
+  onChange(event) {
+    const { isLoad, validation } = this;
+    if (isLoad) {
+      const target = event.target;
+      const isBcmElement = target && target.tagName.toLowerCase().startsWith('bcm-');
+      if (validation && isBcmElement) {
+        if (this.isGroup(target))
+          return this.changeCheckboxGroup(event);
+        this.componentIsValid(target);
       }
-      clearTimeout(tick);
-    });
-    this.value = await this.userFormData();
+    }
   }
   render() {
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("form", { class: "bcm-form", autocomplete: this.autocomplete ? "on" : "off" }, h("slot", null))));
+    return (h(Host, { class: "tw-block" }, h("slot", null)));
   }
   static get is() { return "bcm-form"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["form.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["form.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -453,29 +188,11 @@ export class BcmForm {
         },
         "attribute": "id",
         "reflect": true,
-        "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
-      },
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "Generate.UID()"
       },
       "validation": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -488,60 +205,7 @@ export class BcmForm {
           "text": ""
         },
         "attribute": "validation",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "name": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "value": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "autocomplete": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "autocomplete",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       }
     };
@@ -568,14 +232,14 @@ export class BcmForm {
     return {
       "submit": {
         "complexType": {
-          "signature": "() => Promise<any>",
+          "signature": "() => Promise<object>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<any>"
+          "return": "Promise<object>"
         },
         "docs": {
           "text": "",
@@ -584,7 +248,7 @@ export class BcmForm {
       },
       "set": {
         "complexType": {
-          "signature": "(data: object) => Promise<void>",
+          "signature": "(data: Object) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -592,6 +256,9 @@ export class BcmForm {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "Object": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"
@@ -617,22 +284,6 @@ export class BcmForm {
           "tags": []
         }
       },
-      "setClear": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
       "resetCaption": {
         "complexType": {
           "signature": "() => Promise<void>",
@@ -649,22 +300,16 @@ export class BcmForm {
           "tags": []
         }
       },
-      "config": {
+      "setClear": {
         "complexType": {
-          "signature": "(_config: Array<object>) => Promise<boolean>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "Array": {
-              "location": "global"
             }
           },
-          "return": "Promise<boolean>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "",
@@ -676,14 +321,8 @@ export class BcmForm {
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{
-        "name": "click",
-        "method": "handleSubmit",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
         "name": "bcm-change",
-        "method": "handleChange",
+        "method": "onChange",
         "target": undefined,
         "capture": false,
         "passive": false