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

package/dist/components/bcm-form.js

@@ -2,57 +2,31 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { I as IsLoad } from './is-load-decorator.js';
+import { G as Generate } from './generate.js';
 import { S as StringHelper } from './string-helper.js';
-import { d as delay, g as getChildElements } from './utils.js';
+import { a as Bcm } from './bcm.js';
+import { s as snq } from './snq.es5.js';
 
-// /**
-//  * 
-//  * @param type 
-//  */
-// export const required = (value:any) => {
-//   if ( value || value != null ) {
-//     return true
-//   } else {
-//     return true
-//   }
-// }
-class rules {
-  constructor() { }
-  response(status, message) {
-    return Object.assign(Object.assign({ valid: status }, (message && { message })), (!status && { type: 'error' }));
-  }
-  required(value, componentValidation) {
-    let validation = this.response(true);
-    if (value == '' || value == "" || value == undefined || value == null || value === false) {
-      validation = this.response(false, 'This field is required.');
-    }
-    if (componentValidation) {
-      if (!componentValidation.valid) {
-        validation = this.response(false, componentValidation.errorText);
-      }
-      if (value instanceof Object) {
-        if (value.isValid) {
-          if (value.isValid == false)
-            validation = this.response(false, 'This field is required.');
-        }
-      }
-    }
-    return validation;
-  }
-  selfValidation(input) {
-    let validation = this.response(true);
-    if (input.captionError != null || input.captionType == 'error') {
-      validation = this.response(false, input.captionError);
-    }
-    return validation;
-  }
-}
-const validate = new rules;
-
-const formCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block;margin-bottom:8px}:host(.hidden){display:none}";
+const BcmFormComponents = [
+  'BCM-INPUT',
+  'BCM-TEXTAREA',
+  'BCM-SWITCH',
+  'BCM-CHECKBOX',
+  'BCM-RADIO-GROUP',
+  'BCM-CHECKBOX-GROUP',
+  'BCM-RANGE',
+  'BCM-FORM',
+  'BCM-FORM-GROUP',
+  'BCM-LIST',
+  'BCM-COLORPICKER',
+  'BCM-DATE-PICKER',
+  'BCM-TIME-PICKER',
+  'BCM-DATETIME-PICKER',
+  'BCM-SELECT',
+  'BCM-LISTBOX',
+];
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -69,425 +43,164 @@ const BcmForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.bcmForm = createEvent(this, "bcm-form", 7);
+    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()
-    //     }
-    // }
   }
-  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 });
+  componentDidLoad() {
+    this.isLoad = true;
+    forceUpdate(this);
+  }
+  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 });
-      }
-      catch (error) {
-        console.log(`${item.nodeName} get error`);
+  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);
       }
-    });
-    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.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 = classnames(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)));
   }
   get el() { return this; }
-  static get style() { return formCss; }
 }, [4, "bcm-form", {
-    "_id": [1537, "id"],
-    "hidden": [1028],
-    "validation": [1028],
-    "name": [1025],
-    "value": [1032],
-    "autocomplete": [1028],
+    "_id": [513, "id"],
+    "validation": [516],
     "submit": [64],
     "set": [64],
     "get": [64],
-    "setClear": [64],
     "resetCaption": [64],
-    "config": [64]
-  }, [[0, "click", "handleSubmit"], [0, "bcm-change", "handleChange"]]]);
+    "setClear": [64]
+  }, [[0, "bcm-change", "onChange"]]]);
 __decorate([
   IsLoad()
 ], BcmForm$1.prototype, "el", void 0);