bromcom-ui 2.9.0-rc.4 → 2.9.0-rc.6

package/dist/esm/bcm-colorpicker.entry.js

@@ -3,9 +3,9 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, a as getAssetPath, H as Host, g as getElement } from './index-348b16ad.js';
-import { E as ElementDragger, D as DragDirections } from './element-dragger-89bb52fd.js';
+import { E as ElementDragger, D as DragDirections } from './element-dragger-7ea06c76.js';
 import { c as classnames } from './index-ed9652af.js';
-import './utils-57652744.js';
+import './utils-b3338faf.js';
 import './_commonjsHelpers-3016b722.js';
 
 const colorpickerCss = "@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{position:relative;margin:0 0 8px 0}.color-picker{position:relative;width:200px}.color-picker.open .picker{opacity:1;visibility:visible;transform:scale(1) translateY(56px)}.picker{width:300px;position:absolute;top:0;z-index:1;background-color:#ffffff;border:1px solid #F6F6F6;box-shadow:0px 3px 3.6px 0.4px rgba(0, 0, 0, 0.15);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px)}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.input{display:flex;cursor:pointer;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.color{position:relative;width:100%;height:166px;user-select:none}.color img{width:100%;height:100%;user-select:none;pointer-events:none}.color-indicator{position:absolute;top:0;left:0;width:17px;height:17px;border:1px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);transform:translate(0, 0);border-radius:100px;user-select:none;box-sizing:border-box;pointer-events:none}.colors{position:relative;width:100%;height:16px;margin-top:8px}.colors img{width:100%;user-select:none;pointer-events:none}.colors-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;user-select:none}.colors-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100px;user-select:none;box-sizing:border-box;pointer-events:none}.transparency{position:relative;width:100%;height:16px;margin-top:8px}.transparency-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;background:transparent none repeat center center/20px}.transparency-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100px;user-select:none;box-sizing:border-box}.colors-transparency{padding:16px}.active-color{display:flex;align-items:center;width:100%;height:30px}.active-color .color-thumb{width:100%;height:100%;background-color:transparent;border-radius:1px 0 0 1px}.active-color .color-text{font-size:14px;color:#656565;margin-left:8px}.icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:30px;color:var(--bcm-color-grey-6)}.color-input{border:none;width:100%;padding:10px;outline:none;-webkit-tap-highlight-color:transparent}";

package/dist/esm/bcm-date-picker.entry.js

@@ -6,9 +6,9 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-34
 import { c as classnames } from './index-ed9652af.js';
 import { I as IsLoad } from './is-load-decorator-07d3502a.js';
 import { D as DateTimeHelper } from './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-e7435a13.js';
+import { G as Generate } from './generate-786bd626.js';
 import { a as Bcm } from './bcm-9f50af9c.js';
-import { d as delay } from './utils-57652744.js';
+import { d as delay } from './utils-b3338faf.js';
 import './_commonjsHelpers-3016b722.js';
 import './colors-44c95e7e.js';
 

package/dist/esm/bcm-datetime-picker.entry.js

@@ -3,11 +3,11 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { D as DragDirections, E as ElementDragger } from './element-dragger-89bb52fd.js';
+import { D as DragDirections, E as ElementDragger } from './element-dragger-7ea06c76.js';
 import { c as classnames } from './index-ed9652af.js';
 import { D as DateTimeHelper } from './datetime-helper-df25808a.js';
-import { d as delay } from './utils-57652744.js';
-import { G as Generate } from './generate-e7435a13.js';
+import { d as delay } from './utils-b3338faf.js';
+import { G as Generate } from './generate-786bd626.js';
 import { a as Bcm } from './bcm-9f50af9c.js';
 import { g as getPlacement, s as setPosition } from './popover-placement-78f86f15.js';
 import { L as LabelTemplate } from './label-template-98dafeb3.js';

package/dist/esm/bcm-default.entry.js

@@ -3,7 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { G as Generate } from './generate-e7435a13.js';
+import { G as Generate } from './generate-786bd626.js';
 import './colors-44c95e7e.js';
 import './_commonjsHelpers-3016b722.js';
 

package/dist/esm/bcm-drawer.entry.js

@@ -3,17 +3,17 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-348b16ad.js';
-import './color-helper-e8ce23d7.js';
+import './color-helper-116755ed.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-e7435a13.js';
-import './number-helper-cb2563aa.js';
+import { G as Generate } from './generate-786bd626.js';
+import './number-helper-d9b73e76.js';
 import './string-helper-6bd24967.js';
-import './validators-0a4134a4.js';
-import './element-dragger-89bb52fd.js';
+import './validators-0b019b63.js';
+import './element-dragger-7ea06c76.js';
 import { B as Bcm } from './bcm-9f50af9c.js';
 import { c as classnames } from './index-ed9652af.js';
 import './colors-1d7854ea.js';
-import './utils-57652744.js';
+import './utils-b3338faf.js';
 import './colors-44c95e7e.js';
 import './_commonjsHelpers-3016b722.js';
 

package/dist/esm/bcm-expansion-panel.entry.js

@@ -3,15 +3,15 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { G as Generate } from './generate-e7435a13.js';
+import { G as Generate } from './generate-786bd626.js';
 import { c as classnames } from './index-ed9652af.js';
 import { S as StringHelper } from './string-helper-6bd24967.js';
-import { C as ColorHelper } from './color-helper-e8ce23d7.js';
+import { C as ColorHelper } from './color-helper-116755ed.js';
 import './colors-44c95e7e.js';
 import './_commonjsHelpers-3016b722.js';
 import './bcm-9f50af9c.js';
 import './colors-1d7854ea.js';
-import './utils-57652744.js';
+import './utils-b3338faf.js';
 
 const expansionPanelCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}*{box-sizing:border-box}.bcm-expansion-panel{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:block;width:100%;background-color:var(--bcm-new-ds-color-white);border-radius:8px;border:1px solid var(--bcm-new-ds-color-slate-300);box-sizing:border-box}.bcm-expansion-panel+.bcm-expansion-panel{margin-top:4px}.bcm-expansion-panel__header{display:flex;align-items:center;justify-content:flex-start;user-select:none;min-height:50px;border-radius:8px;padding:4px 24px;color:var(--bcm-new-ds-color-slate-700);font-weight:600}.bcm-expansion-panel__header-content{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px}.bcm-expansion-panel__header:hover{cursor:pointer}.bcm-expansion-panel__header-title{order:1;user-select:none;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:4px}.bcm-expansion-panel__header-title-description{margin-left:calc(4px / 2);color:var(--bcm-new-ds-color-slate-500);font-size:12px;line-height:calc(12px + 8px)}.bcm-expansion-panel__header-tooltip{line-height:1;color:var(--bcm-new-ds-color-slate-800)}.bcm-expansion-panel__header-toggle{height:100%;order:0;width:20px;display:flex;align-items:center;justify-content:center;transform:rotate(0deg);transition:transform 0.2s ease-in-out;font-size:12px}.bcm-expansion-panel__header-extra{display:none}.bcm-expansion-panel__header-extra:not(:empty){cursor:default;display:flex;align-items:center;order:5;line-height:1;padding:0 8px}.bcm-expansion-panel__header-extra .bcm-expansion-panel__extra-content{display:flex;align-items:center}.bcm-expansion-panel__body{display:none;padding:12px 24px}.bcm-expansion-panel--icon-right .bcm-expansion-panel__header{justify-content:space-between;padding-left:24px}.bcm-expansion-panel--icon-right .bcm-expansion-panel__header-toggle{order:6}.bcm-expansion-panel--invalid .bcm-expansion-panel__header-toggle,.bcm-expansion-panel--invalid .bcm-expansion-panel__header-content{color:var(--bcm-new-ds-color-red-500)}.bcm-expansion-panel--expanded{border-bottom:1px solid var(--bcm-color-grey-5)}.bcm-expansion-panel--expanded .bcm-expansion-panel__header{border-radius:8px 8px 0 0}.bcm-expansion-panel--expanded .bcm-expansion-panel__header-toggle{transform:rotate(180deg)}.bcm-expansion-panel--expanded .bcm-expansion-panel__body{display:block}";
 

package/dist/esm/bcm-form-2.entry.js

@@ -4,7 +4,7 @@
  */
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-348b16ad.js';
 import { I as IsLoad } from './is-load-decorator-07d3502a.js';
-import { G as Generate, s as snq } from './generate-e7435a13.js';
+import { G as Generate, s as snq } from './generate-786bd626.js';
 import { S as StringHelper } from './string-helper-6bd24967.js';
 import { a as Bcm } from './bcm-9f50af9c.js';
 import './colors-44c95e7e.js';

package/dist/esm/bcm-form.entry.js

@@ -0,0 +1,484 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-348b16ad.js';
+import { c as classnames } from './index-ed9652af.js';
+import { I as IsLoad } from './is-load-decorator-07d3502a.js';
+import { S as StringHelper } from './string-helper-6bd24967.js';
+import { d as delay, a as getChildElements } from './utils-b3338faf.js';
+import './_commonjsHelpers-3016b722.js';
+import './bcm-9f50af9c.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}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        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;
+};
+const BcmForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmForm = createEvent(this, "bcm-form", 7);
+    this.formData = {};
+    this.inputs = [];
+    this.duplicateInput = [];
+    this.isValid = true;
+    this.returnCaption = [];
+    this.Bromcom = {
+      errors: {
+        targetFormNotExist: 'target form is not exist --> ',
+      },
+      inputComponents: {
+        CHIP_GROUP: 'chip-group',
+        // 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.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 });
+      }
+      this.bcmForm.emit(this.returnCaption);
+      return this.returnCaption;
+    }
+  }
+  async submit() {
+    return Promise.resolve(this.submitFunction());
+  }
+  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);
+          }
+        }
+      }
+    }
+    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`);
+      }
+    });
+    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);
+  }
+  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");
+      }
+    }
+    await delay(10);
+    return Promise.resolve();
+  }
+  async config(_config) {
+    if (_config['validation']) {
+      typeof _config['validation'] == 'boolean'
+        ? this.validation = _config['validation']
+        : this.validation = false;
+    }
+    return true;
+  }
+  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);
+          }
+        }
+      }
+      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);
+          }
+        }
+      }
+    }
+    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;
+    }
+  }
+  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 userFormData() {
+    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;
+  }
+  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'];
+        }
+      }
+      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))));
+  }
+  get el() { return getElement(this); }
+};
+__decorate([
+  IsLoad()
+], BcmForm.prototype, "el", void 0);
+BcmForm.style = formCss;
+
+export { BcmForm as bcm_form };

package/dist/esm/bcm-input-custom.entry.js

@@ -3,7 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { G as Generate } from './generate-e7435a13.js';
+import { G as Generate } from './generate-786bd626.js';
 import { c as classnames } from './index-ed9652af.js';
 import './colors-44c95e7e.js';
 import './_commonjsHelpers-3016b722.js';