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

package/dist/collection/components/molecules/checkbox/{group.js → checkbox-group.js}

@@ -12,197 +12,245 @@ 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 { Generate } from '../../../helper/generate';
-import Bcm from '../../../models/bcm';
-import { delay, getChildElements } from '../../../utils/utils';
-import checkBoxGroupState from "../states/checkbox-group.states";
-import { CheckboxGroupTemplate } from '../../../templates/checkbox-group-template';
-import snq from 'snq';
-import { LabelTemplate } from '../../../templates/label-template';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-export class BcmCheckboxGroup {
+import { IsLoad } from "@bcm/decorator";
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { CaptionTemplate, LabelTemplate } from "@bcm/template";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+export class BcmCheckBoxGroup {
   constructor() {
     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;
+  }
+  get checkboxes() {
+    return Array.from(this.el.querySelectorAll("bcm-checkbox")).filter(checkbox => checkbox.id !== `checbox-group-indeterminate-${this._id}`);
+  }
+  get checkedItems() {
+    return this.checkboxes.filter(checkbox => checkbox.checked);
   }
-  componentDidLoad() {
-    this.initState();
+  get itemList() {
+    return typeof this.items === "string" ? JSON.parse(this.items) : this.items;
   }
-  disconnectedCallback() {
-    checkBoxGroupState.removeState(this._id);
+  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;
+    }
   }
-  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 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), []);
-  }
-  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 = '');
+  updateValue() {
+    this.value = this.val;
+    this.indeterminate && this.controlIndeterminate();
+  }
+  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 = cs('bcm-checkbox-group', direction, optionType, {
-      hidden,
-      'full-width': fullWidth
-    });
-    const bcmChechboxGroupContainer = cs('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: cs("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: cs("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 })));
   }
   static get is() { return "bcm-checkbox-group"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["group.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
@@ -219,44 +267,17 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "_id",
-        "reflect": false,
+        "attribute": "id",
+        "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "direction": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DirectionTypes",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {
-            "DirectionTypes": {
-              "location": "import",
-              "path": "../../../models/bcm-types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "direction",
-        "reflect": false,
-        "defaultValue": "Bcm.Direction.horizontal"
-      },
-      "items": {
+      "name": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "Array<object> | string",
-          "resolved": "object[] | string",
-          "references": {
-            "Array": {
-              "location": "global"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -264,13 +285,12 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "items",
-        "reflect": false,
-        "defaultValue": "[]"
+        "attribute": "name",
+        "reflect": false
       },
-      "indeterminate": {
+      "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -282,16 +302,16 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "indeterminate",
+        "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
       },
-      "name": {
-        "type": "string",
-        "mutable": true,
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -300,15 +320,16 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
-        "reflect": false
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "value": {
-        "type": "any",
-        "mutable": true,
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -317,12 +338,13 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "value",
-        "reflect": false
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "disabled": {
+      "required": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -334,11 +356,11 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "disabled",
+        "attribute": "required",
         "reflect": false,
         "defaultValue": "false"
       },
-      "readonly": {
+      "checked": {
         "type": "boolean",
         "mutable": true,
         "complexType": {
@@ -352,16 +374,16 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "readonly",
+        "attribute": "checked",
         "reflect": false,
         "defaultValue": "false"
       },
-      "hidden": {
-        "type": "boolean",
+      "value": {
+        "type": "any",
         "mutable": true,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
@@ -370,17 +392,20 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "value",
+        "reflect": false
       },
-      "required": {
-        "type": "boolean",
-        "mutable": true,
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "string | Array<string>",
+          "resolved": "string | string[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -388,13 +413,12 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "default-value",
+        "reflect": false
       },
       "label": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -409,13 +433,18 @@ export class BcmCheckboxGroup {
         "attribute": "label",
         "reflect": false
       },
-      "gap": {
+      "direction": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "DirectionTypes",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "DirectionTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -423,12 +452,13 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "gap",
-        "reflect": false
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "Bcm.Direction.horizontal"
       },
-      "defaultValue": {
+      "gap": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -440,12 +470,12 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "default-value",
+        "attribute": "gap",
         "reflect": false
       },
       "fullWidth": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean | \"flex\"",
           "resolved": "\"flex\" | boolean",
@@ -461,31 +491,18 @@ export class BcmCheckboxGroup {
         "reflect": true,
         "defaultValue": "false"
       },
-      "optionType": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'default' | 'button'",
-          "resolved": "\"button\" | \"default\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "option-type",
-        "reflect": false,
-        "defaultValue": "'default'"
-      },
-      "buttonStyle": {
+      "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "'solid' | 'outline'",
-          "resolved": "\"outline\" | \"solid\"",
-          "references": {}
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -493,20 +510,19 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "button-style",
+        "attribute": "size",
         "reflect": false,
-        "defaultValue": "'solid'"
+        "defaultValue": "Bcm.Size.medium"
       },
-      "size": {
+      "items": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "SizeTypes",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "original": "Array<object> | string",
+          "resolved": "object[] | string",
           "references": {
-            "SizeTypes": {
-              "location": "import",
-              "path": "../../../models/bcm-types"
+            "Array": {
+              "location": "global"
             }
           }
         },
@@ -516,13 +532,13 @@ export class BcmCheckboxGroup {
           "tags": [],
           "text": ""
         },
-        "attribute": "size",
+        "attribute": "items",
         "reflect": false,
-        "defaultValue": "Bcm.Size.medium"
+        "defaultValue": "[]"
       },
       "caption": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -539,7 +555,7 @@ export class BcmCheckboxGroup {
       },
       "noCaption": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -557,14 +573,14 @@ export class BcmCheckboxGroup {
       },
       "captionType": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "StatusTypes",
           "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
           "references": {
             "StatusTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -577,12 +593,65 @@ export class BcmCheckboxGroup {
         "attribute": "caption-type",
         "reflect": false,
         "defaultValue": "Bcm.Status.default"
+      },
+      "captionError": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-error",
+        "reflect": false
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "indeterminateText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "indeterminate-text",
+        "reflect": false,
+        "defaultValue": "\"Check All\""
       }
     };
   }
   static get states() {
     return {
-      "tick": {}
+      "inderminateStatus": {}
     };
   }
   static get events() {
@@ -620,26 +689,29 @@ export class BcmCheckboxGroup {
   }
   static get methods() {
     return {
-      "onBcmFocus": {
+      "get": {
         "complexType": {
-          "signature": "() => Promise<void>",
+          "signature": "() => Promise<string[]>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<string[]>"
         },
         "docs": {
           "text": "",
           "tags": []
         }
       },
-      "onBcmBlur": {
+      "set": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(data: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
@@ -652,7 +724,7 @@ export class BcmCheckboxGroup {
           "tags": []
         }
       },
-      "setClear": {
+      "uncheckAll": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -668,13 +740,22 @@ export class BcmCheckboxGroup {
           "tags": []
         }
       },
-      "resetCaption": {
+      "check": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(items: Array<CheckItem> | string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "CheckItem": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"
@@ -684,9 +765,9 @@ export class BcmCheckboxGroup {
           "tags": []
         }
       },
-      "set": {
+      "getValue": {
         "complexType": {
-          "signature": "(data: any) => Promise<void>",
+          "signature": "(name?: string) => Promise<any>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -696,47 +777,51 @@ export class BcmCheckboxGroup {
               "location": "global"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<any>"
         },
         "docs": {
           "text": "",
           "tags": []
         }
       },
-      "get": {
+      "getCheckedList": {
         "complexType": {
-          "signature": "() => Promise<string[]>",
+          "signature": "() => Promise<{}>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<string[]>"
+          "return": "Promise<{}>"
         },
         "docs": {
           "text": "",
           "tags": []
         }
       },
-      "check": {
+      "onBcmFocus": {
         "complexType": {
-          "signature": "(items: Array<object> | string, checked?: boolean, reset?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "Array": {
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "onBcmBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
               "location": "global"
             }
           },
@@ -747,35 +832,32 @@ export class BcmCheckboxGroup {
           "tags": []
         }
       },
-      "getValue": {
+      "setClear": {
         "complexType": {
-          "signature": "(name?: string) => Promise<any>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<any>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "",
           "tags": []
         }
       },
-      "getCheckedList": {
+      "resetCaption": {
         "complexType": {
-          "signature": "() => Promise<any>",
+          "signature": "() => Promise<void>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<any>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "",
@@ -787,11 +869,20 @@ export class BcmCheckboxGroup {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "items",
-        "methodName": "handleItemsChange"
+        "propName": "defaultValue",
+        "methodName": "watchDefaultValue"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "bcm-change-checkbox",
+        "method": "handleChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }
 __decorate([
   IsLoad()
-], BcmCheckboxGroup.prototype, "el", void 0);
+], BcmCheckBoxGroup.prototype, "el", void 0);