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

package/dist/components/bcm-checkbox-group.js

@@ -2,220 +2,23 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { G as Generate, s as snq } from './generate.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { I as IsLoad } from './is-load-decorator.js';
+import './color-helper.js';
+import './element-dragger.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
 import { B as Bcm } from './bcm.js';
-import { d as delay, g as getChildElements } from './utils.js';
-import { c as createStore } from './index3.js';
+import { C as CaptionTemplate } from './caption-template.js';
+import { c as classnames } from './index2.js';
+import './types.js';
 import { L as LabelTemplate } from './label-template.js';
-import { I as IsLoad } from './is-load-decorator.js';
 import { d as defineCustomElement$5 } from './checkbox.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './label.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const { state } = createStore({
-  group: new Map(),
-  allChecked: true,
-  allUnchecked: true,
-  changeInderminate: {},
-});
-const setValue = async ({ fullWidth, optionType, buttonStyle, size, defaultCheckedItems, el, id, label, required, captionType, hidden, direction, childs, indeterminate, gap, noCaption, }) => {
-  if (el) {
-    state.group.set(id, {
-      fullWidth,
-      optionType,
-      buttonStyle,
-      size,
-      defaultCheckedItems,
-      label,
-      required,
-      captionType,
-      hidden,
-      direction,
-      indeterminate,
-      gap,
-      noCaption,
-      childs: childs === null || childs === void 0 ? void 0 : childs.map(child => {
-        child.checked && (state.allUnchecked = false);
-        !child.checked && (state.allChecked = false);
-        // fullWidth && (fullWidth == 'flex' ? (child.style.flex = 'auto') : (child.style.width = '100%'));
-        optionType && (child.optionType = optionType);
-        buttonStyle && (child.buttonStyle = buttonStyle);
-        size && (child.size = size);
-        defaultCheckedItems && defaultCheckedItems.find(e => e === child.name) && (child.checked = true);
-        child.noCaption = noCaption;
-        return {
-          id: child.id || Generate.UID(),
-          checked: child.checked || false,
-          name: child.name,
-          size: child.size,
-          buttonStyle: child.buttonStyle,
-          optionType: child.optionType,
-          style: child.style,
-          noCaption: child.noCaption,
-          color: child.color,
-          disabled: child.disabled,
-          readonly: child.readonly,
-          label: child.label || child.name,
-          slot: child.slot || snq(() => child.querySelector('.slot').textContent, child.textContent),
-          required: child.required || required,
-          el: child,
-          captionType,
-          hidden,
-        };
-      }),
-      indeterminateState: !state.allChecked && !state.allUnchecked ? 'indeterminate' : state.allChecked ? 'determinate' : 'uncheck',
-    });
-  }
-};
-const getProperty = id => {
-  return snq(() => state.group.get(id), {});
-};
-const getValue = (id, name) => {
-  var _a;
-  const group = getProperty(id);
-  let value = {};
-  (_a = group.childs) === null || _a === void 0 ? void 0 : _a.map(child => {
-    if (name) {
-      if (child.name === name) {
-        value[child.name] = {
-          value: !!child.checked,
-          name: child.name,
-        };
-      }
-    }
-    else {
-      value[child.name] = {
-        value: !!child.checked,
-        name: child.name,
-      };
-    }
-  });
-  return value;
-};
-const getCheckedList = id => {
-  var _a;
-  const group = getProperty(id);
-  let value = {};
-  (_a = group.childs) === null || _a === void 0 ? void 0 : _a.map(child => {
-    if (child.checked === true) {
-      value[child.name] = {
-        value: !!child.checked,
-        name: child.name,
-      };
-    }
-  });
-  return value;
-};
-const setClear = id => {
-  var _a;
-  (_a = getProperty(id).childs) === null || _a === void 0 ? void 0 : _a.forEach(child => {
-    child.checked = false;
-  });
-  checkInderminate(id);
-};
-const setCheckedItems = (id, items, checked, reset) => {
-  var _a;
-  const checkedItems = items && (typeof items == 'string' ? JSON.parse(items) : items);
-  (_a = getProperty(id).childs) === null || _a === void 0 ? void 0 : _a.forEach(child => {
-    if (checkedItems) {
-      const checkedItem = checkedItems.find(e => e === child.name || e.name === child.name);
-      if (checkedItem) {
-        if (typeof checkedItem == 'object') {
-          Object.keys(checkedItem).map(key => {
-            if (key === 'checked') {
-              child.checked = checkedItem[key];
-            }
-            else {
-              child.checked = checked;
-            }
-          });
-        }
-        else {
-          child.checked = checked;
-        }
-      }
-      else {
-        reset && (child.checked = false);
-      }
-    }
-    else {
-      child.checked = false;
-    }
-  });
-  checkInderminate(id);
-};
-const resetCaption = id => {
-  var _a;
-  // const noCaption = getProperty(id).noCaption;
-  (_a = getProperty(id).childs) === null || _a === void 0 ? void 0 : _a.forEach(child => {
-    child.resetCaption();
-    // child.noCaption = noCaption;
-  });
-};
-const changeIndeterminate = id => {
-  var _a;
-  const group = getProperty(id);
-  if (!group.disabled) {
-    let checkAll = true;
-    if (group.indeterminateState === 'determinate') {
-      checkAll = false;
-    }
-    (_a = getProperty(id).childs) === null || _a === void 0 ? void 0 : _a.map(child => {
-      child.checked = checkAll;
-    });
-    checkInderminate(id);
-  }
-};
-const checkInderminate = id => {
-  var _a;
-  const group = getProperty(id);
-  let allChecked = true;
-  let allUnchecked = true;
-  (_a = group.childs) === null || _a === void 0 ? void 0 : _a.map(child => {
-    child.checked && (allUnchecked = false);
-    !child.checked && (allChecked = false);
-  });
-  group.indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
-};
-const onChange = (obj) => {
-  var _a;
-  (_a = getProperty(obj.id).childs) === null || _a === void 0 ? void 0 : _a.map(child => {
-    child.checked = child.id === obj.childId ? !child.checked : child.checked;
-  });
-  checkInderminate(obj.id);
-};
-const removeState = id => {
-  return Promise.resolve(state.group.delete(id));
-};
-const getStatesKeys = id => {
-  return Object.keys(state.group.get(id));
-};
-const checkBoxGroupState = {
-  setValue,
-  getValue,
-  setCheckedItems,
-  getCheckedList,
-  getProperty,
-  setClear,
-  resetCaption,
-  onChange,
-  getStatesKeys,
-  state,
-  removeState,
-  changeIndeterminate,
-};
-
-const CheckboxGroupTemplate = ({ customStyle, groupContainerClasses, onBcmSelect, items }) => {
-  return (h("div", { class: groupContainerClasses, style: customStyle }, items.childs && items.childs.map((checkbox) => {
-    return (h("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (onBcmSelect(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
-  })));
-};
-
-const groupCss = "@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}.bcm-checkbox-group{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-bottom:8px}.bcm-checkbox-group.hidden{display:none}.bcm-checkbox-group__container{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;width:100%}.bcm-checkbox-group__container.full-width{max-width:100%}.bcm-checkbox-group__container.vertical{gap:8px;flex-direction:column}.bcm-checkbox-group__container.button{gap:unset}.bcm-checkbox-group__container.indeterminate{padding-top:16px;margin-top:16px;border-top:1px solid #efefef}";
-
 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")
@@ -226,220 +29,283 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
         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 BcmCheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const BcmCheckBoxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.change = createEvent(this, "bcm-change", 7);
     this.groupCheckedList = createEvent(this, "bcm-group-checked-list", 7);
     this._id = Generate.UID();
-    this.direction = Bcm.Direction.horizontal;
-    this.items = [];
-    this.indeterminate = false;
     this.name = undefined;
-    this.value = undefined;
     this.disabled = false;
     this.readonly = false;
     this.hidden = false;
     this.required = false;
+    this.checked = false;
+    this.value = undefined;
+    this.defaultValue = undefined;
     this.label = undefined;
+    this.direction = Bcm.Direction.horizontal;
     this.gap = undefined;
-    this.defaultValue = undefined;
     this.fullWidth = false;
-    this.optionType = 'default';
-    this.buttonStyle = 'solid';
     this.size = Bcm.Size.medium;
+    this.items = [];
     this.caption = undefined;
     this.noCaption = false;
     this.captionType = Bcm.Status.default;
-    this.tick = {};
+    this.captionError = undefined;
+    this.indeterminate = false;
+    this.indeterminateText = "Check All";
+    this.inderminateStatus = undefined;
   }
-  componentDidLoad() {
-    this.initState();
+  get checkboxes() {
+    return Array.from(this.el.querySelectorAll("bcm-checkbox")).filter(checkbox => checkbox.id !== `checbox-group-indeterminate-${this._id}`);
   }
-  disconnectedCallback() {
-    checkBoxGroupState.removeState(this._id);
+  get checkedItems() {
+    return this.checkboxes.filter(checkbox => checkbox.checked);
   }
-  componentShouldUpdate(newVal, oldVal, propName) {
-    if (propName == 'tick' && newVal !== oldVal) {
-      const isHaveChild = snq(() => checkBoxGroupState.getProperty(this._id).childs.length > 0, false);
-      if (isHaveChild) {
-        this.getValue().then(values => this.value = values);
+  get itemList() {
+    return typeof this.items === "string" ? JSON.parse(this.items) : this.items;
+  }
+  get val() {
+    const value = {};
+    this.checkboxes.forEach(checkbox => {
+      value[checkbox.name] = {
+        value: checkbox.checked,
+        name: checkbox.name,
+      };
+    });
+    return value;
+  }
+  get defaultValues() {
+    const { defaultValue } = this;
+    if (defaultValue) {
+      return typeof defaultValue === "string" ? defaultValue.split(",") : defaultValue;
+    }
+  }
+  get checkedList() {
+    const value = {};
+    this.checkboxes.forEach(checkbox => {
+      if (checkbox.checked) {
+        value[checkbox.name] = {
+          value: checkbox.checked,
+          name: checkbox.name,
+        };
       }
+    });
+    return value;
+  }
+  componentWillLoad() {
+    this.setDefaultValue();
+    this.updateValue();
+    this.initOptions();
+  }
+  initOptions() {
+    var _a;
+    (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach(checkbox => {
+      checkbox.noCaption = checkbox.noCaption || this.noCaption;
+      checkbox.disabled = checkbox.disabled || this.disabled;
+      checkbox.readonly = checkbox.readonly || this.readonly;
+      checkbox.required = checkbox.required || this.required;
+      checkbox.size = this.size;
+    });
+  }
+  componentShouldUpdate(newVal, _oldVal, propName) {
+    var _a;
+    const allowed = ["disabled", "readonly", "required", "size", "noCaption"];
+    if (allowed.includes(propName)) {
+      (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach(checkbox => {
+        if (allowed.includes(propName)) {
+          checkbox[propName] = newVal;
+        }
+      });
     }
-    if (this.getOptions().indexOf(propName) > -1 && newVal !== oldVal) {
-      this.initState();
+  }
+  setDefaultValue() {
+    var _a;
+    const { defaultValues } = this;
+    if (defaultValues) {
+      (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach(checkbox => {
+        if (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.includes(checkbox.name)) {
+          checkbox.checked = true;
+        }
+      });
+      this.updateValue();
+      this.emitChange();
     }
   }
-  getOptions() {
-    return snq(() => checkBoxGroupState.getStatesKeys(this._id), []);
+  updateValue() {
+    this.value = this.val;
+    this.indeterminate && this.controlIndeterminate();
   }
-  async initState() {
-    const { fullWidth, optionType, buttonStyle, size, noCaption, defaultValue, label, required, captionType, hidden, direction, indeterminate, gap, items } = this;
-    const defaultCheckedItems = defaultValue && (typeof defaultValue == 'string' ? JSON.parse(defaultValue) : defaultValue);
-    const childElements = items.length > 0 ? items : await this.getCheckboxes();
-    await checkBoxGroupState.setValue({
-      id: this._id,
-      el: this.el,
-      indeterminate,
-      fullWidth,
-      optionType,
-      buttonStyle,
-      size,
-      defaultCheckedItems,
-      label,
-      noCaption,
-      required,
-      captionType,
-      hidden,
-      gap,
-      direction,
-      childs: childElements
-    });
-    const slotArea = this.el.querySelector(`#bcm-checkbox-group__items-${this._id}`);
-    if (slotArea) {
-      slotArea.innerHTML && (slotArea.innerHTML = '');
+  controlIndeterminate() {
+    var _a, _b, _c, _d, _e;
+    if (this.indeterminate) {
+      this.inderminateStatus =
+        ((_a = this.checkedItems) === null || _a === void 0 ? void 0 : _a.length) > 0
+          ? ((_b = this.checkedItems) === null || _b === void 0 ? void 0 : _b.length) == ((_c = this.checkboxes) === null || _c === void 0 ? void 0 : _c.length)
+            ? "determinate"
+            : ((_d = this.checkedItems) === null || _d === void 0 ? void 0 : _d.length) < ((_e = this.checkboxes) === null || _e === void 0 ? void 0 : _e.length)
+              ? "indeterminate"
+              : "uncheck"
+          : "uncheck";
     }
-    this.value = await this.getValue();
   }
-  async markForCheck() {
-    await delay(10);
-    this.tick = Generate.UID();
+  checkIndeterminate(e) {
+    var _a, _b, _c;
+    const checked = (_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
+    (_c = this.checkboxes) === null || _c === void 0 ? void 0 : _c.forEach(checkbox => {
+      checkbox.checked = checked;
+    });
+    this.inderminateStatus = checked ? "determinate" : "uncheck";
+    this.handleChange(e);
   }
-  async onBcmFocus() {
-    //focus first item
-    const childs = this.getCheckboxes();
-    if (childs.length > 0) {
-      childs[0].onBcmFocus();
+  emitChange() {
+    var _a;
+    if (!this.disabled && !this.readonly) {
+      this.change.emit({ value: this.value, changed: (_a = this.el) !== null && _a !== void 0 ? _a : {} });
+      this.groupCheckedList.emit(this.checkedList);
     }
   }
-  async onBcmBlur() {
-    this.el.blur();
+  watchDefaultValue() {
+    this.setDefaultValue();
   }
-  async setClear() {
-    checkBoxGroupState.setClear(this._id);
-    await delay(10);
-    this.getCheckboxes().forEach(item => {
-      item.setClear();
-    });
-    this.markForCheck();
-    await delay(10);
-    return Promise.resolve();
+  handleChange(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.updateValue();
+    this.emitChange();
   }
-  async resetCaption() {
-    await delay(10);
-    this.getCheckboxes().forEach(item => {
-      item.resetCaption();
-    });
-    await delay(10);
-    return Promise.resolve();
+  async get() {
+    var _a;
+    return (_a = this.checkedItems) === null || _a === void 0 ? void 0 : _a.map(item => item.name);
   }
   async set(data) {
     if (Array.isArray(data)) {
-      await this.check(data, true, true);
+      await this.check(data);
     }
   }
-  async get() {
-    const checklist = await this.getCheckedList() && Object.keys(await this.getCheckedList());
-    return checklist.length > 0 ? checklist : [];
+  async uncheckAll() {
+    var _a;
+    (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach(checkbox => {
+      checkbox.checked = false;
+    });
+    this.updateValue();
+    this.emitChange();
   }
-  async check(items, checked = true, reset = false) {
-    checkBoxGroupState.setCheckedItems(this._id, items, checked, reset);
-    this.markForCheck();
+  async check(items) {
+    var _a, _b;
+    if (items) {
+      if (Array.isArray(items)) {
+        items.forEach(item => {
+          var _a;
+          (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach(checkbox => {
+            var _a;
+            if (checkbox.name == item.name) {
+              checkbox.checked = (_a = item === null || item === void 0 ? void 0 : item.checked) !== null && _a !== void 0 ? _a : true;
+            }
+          });
+        });
+      }
+      else {
+        (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach(checkbox => {
+          if (checkbox.name == items) {
+            checkbox.checked = true;
+          }
+        });
+      }
+    }
+    else {
+      (_b = this.checkboxes) === null || _b === void 0 ? void 0 : _b.forEach(checkbox => {
+        checkbox.checked = false;
+      });
+    }
+    this.updateValue();
+    this.emitChange();
   }
   async getValue(name) {
-    return Promise.resolve(checkBoxGroupState.getValue(this._id, name));
+    return name ? this.val[name] : this.val;
   }
   async getCheckedList() {
-    return checkBoxGroupState.getCheckedList(this._id);
+    return this.checkedList;
   }
-  handleItemsChange() {
-    this.initState();
-  }
-  getCheckboxes() {
-    return getChildElements(this.el, 'bcm-checkbox:not(#bcm-indeterminate-element)');
-  }
-  async getCheckbox(id) {
-    const element = this.el.querySelector(`bcm-checkbox[id="${id}"]`);
-    if (element) {
-      const name = element["name"];
-      const value = await this.getValue(name);
-      return { element, event: snq(() => value[name], null) };
-    }
-    return {};
+  async onBcmFocus() {
+    var _a, _b;
+    (_b = (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.onBcmFocus();
   }
-  async indeterminateClick() {
-    checkBoxGroupState.changeIndeterminate(this._id);
-    this.markForCheck();
+  async onBcmBlur() {
+    this.el.blur();
   }
-  async changeCheckBox(id) {
-    checkBoxGroupState.onChange({ id: this._id, childId: id });
-    this.markForCheck();
-    await delay(10);
-    this.value = await this.getValue();
-    this.change.emit({ value: this.value, changed: Object.assign({}, await this.getCheckbox(id)) });
-    this.groupCheckedList.emit(await this.getCheckedList());
+  async setClear() {
+    var _a;
+    (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach(checkbox => {
+      checkbox.checked && (checkbox.checked = false);
+    });
+    this.updateValue();
+    this.emitChange();
   }
-  getItems() {
-    return checkBoxGroupState.getProperty(this._id);
+  async resetCaption() {
+    var _a;
+    (_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.forEach(async (checkbox) => {
+      await checkbox.resetCaption();
+    });
   }
   render() {
-    const items = this.getItems();
-    const { disabled, captionType, label, indeterminate, indeterminateState, required, direction, optionType, hidden, fullWidth, gap } = items;
-    const bcmChechboxGroup = classnames('bcm-checkbox-group', direction, optionType, {
-      hidden,
-      'full-width': fullWidth
-    });
-    const bcmChechboxGroupContainer = classnames('bcm-checkbox-group__container', optionType, {
-      [direction]: optionType === 'default',
-      indeterminate,
-      hidden,
-      'full-width': fullWidth
-    });
-    return (h(Host, { class: bcmChechboxGroup }, h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, h("slot", null)), h("div", { class: "bcm-checkbox-group__label" }, label &&
-      h("div", null, h(LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))), indeterminate &&
-      h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
+    var _a, _b;
+    const { _id, label, size, required, captionType, direction, indeterminate, disabled, readonly, indeterminateText, inderminateStatus, caption, noCaption, captionError, hidden, fullWidth, } = this;
+    let gap = ((_a = this.gap) !== null && _a !== void 0 ? _a : direction == Bcm.Direction.vertical) ? "4px" : "8px";
+    return (h(Host, { class: classnames("tw-mb-2 tw-flex tw-w-full tw-flex-col tw-items-start", {
+        "tw-hidden": hidden,
+      }) }, label && (h("div", null, h(LabelTemplate, { size: size, type: captionType, value: label, required: required }))), indeterminate && (h("div", null, h("bcm-checkbox", Object.assign({ id: `checbox-group-indeterminate-${_id}`, onChange: e => !disabled && !readonly && this.checkIndeterminate(e) }, { size, disabled, readonly, indeterminate: inderminateStatus, noCaption: true }), indeterminateText))), h("div", { class: classnames("tw-flex tw-w-full tw-items-start", {
+        "tw-flex-col": direction == Bcm.Direction.vertical,
+        "tw-flex-row": direction == Bcm.Direction.horizontal,
+        "tw-w-full": fullWidth,
+      }), style: { gap: gap } }, h("slot", null), (_b = this.itemList) === null || _b === void 0 ? void 0 :
+      _b.map((item, index) => {
+        return (h("bcm-checkbox", Object.assign({ key: index, name: item === null || item === void 0 ? void 0 : item.name, value: item === null || item === void 0 ? void 0 : item.value, checked: item === null || item === void 0 ? void 0 : item.checked, disabled: item === null || item === void 0 ? void 0 : item.disabled, readonly: item === null || item === void 0 ? void 0 : item.readonly, "no-caption": true }, { size, disabled, readonly }), (item === null || item === void 0 ? void 0 : item.slot) || (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value)));
+      })), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return this; }
   static get watchers() { return {
-    "items": ["handleItemsChange"]
+    "defaultValue": ["watchDefaultValue"]
   }; }
-  static get style() { return groupCss; }
 }, [4, "bcm-checkbox-group", {
-    "_id": [1025],
-    "direction": [1025],
-    "items": [1025],
-    "indeterminate": [1028],
-    "name": [1025],
+    "_id": [1537, "id"],
+    "name": [1],
+    "disabled": [4],
+    "readonly": [4],
+    "hidden": [4],
+    "required": [4],
+    "checked": [1028],
     "value": [1032],
-    "disabled": [1028],
-    "readonly": [1028],
-    "hidden": [1028],
-    "required": [1028],
-    "label": [1025],
-    "gap": [1025],
-    "defaultValue": [1025, "default-value"],
-    "fullWidth": [1544, "full-width"],
-    "optionType": [1025, "option-type"],
-    "buttonStyle": [1025, "button-style"],
-    "size": [1025],
-    "caption": [1025],
-    "noCaption": [1028, "no-caption"],
-    "captionType": [1025, "caption-type"],
-    "tick": [32],
-    "onBcmFocus": [64],
-    "onBcmBlur": [64],
-    "setClear": [64],
-    "resetCaption": [64],
-    "set": [64],
+    "defaultValue": [1, "default-value"],
+    "label": [1],
+    "direction": [1],
+    "gap": [1],
+    "fullWidth": [520, "full-width"],
+    "size": [1],
+    "items": [1],
+    "caption": [1],
+    "noCaption": [4, "no-caption"],
+    "captionType": [1, "caption-type"],
+    "captionError": [1, "caption-error"],
+    "indeterminate": [4],
+    "indeterminateText": [1, "indeterminate-text"],
+    "inderminateStatus": [32],
     "get": [64],
+    "set": [64],
+    "uncheckAll": [64],
     "check": [64],
     "getValue": [64],
-    "getCheckedList": [64]
-  }]);
+    "getCheckedList": [64],
+    "onBcmFocus": [64],
+    "onBcmBlur": [64],
+    "setClear": [64],
+    "resetCaption": [64]
+  }, [[0, "bcm-change-checkbox", "handleChange"]]]);
 __decorate([
   IsLoad()
-], BcmCheckboxGroup$1.prototype, "el", void 0);
+], BcmCheckBoxGroup.prototype, "el", void 0);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
@@ -448,7 +314,7 @@ function defineCustomElement$1() {
   components.forEach(tagName => { switch (tagName) {
     case "bcm-checkbox-group":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, BcmCheckboxGroup$1);
+        customElements.define(tagName, BcmCheckBoxGroup);
       }
       break;
     case "bcm-checkbox":
@@ -474,7 +340,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const BcmCheckboxGroup = BcmCheckboxGroup$1;
+const BcmCheckboxGroup = BcmCheckBoxGroup;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmCheckboxGroup, defineCustomElement };