bromcom-ui 2.3.20 → 2.3.24

package/dist/collection/components/molecules/switch/switch.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Event, Host } from '@stencil/core';
+import { Component, h, Prop, Event, Host, State, Method } from '@stencil/core';
 import cs from 'classnames';
 export class BcmSwitch {
   constructor() {
@@ -8,6 +8,14 @@ export class BcmSwitch {
     this.disabled = false;
     this.hidden = false;
     this.value = '';
+    this.label = null;
+    this.required = false;
+    this.noCaption = false;
+    this.captionType = 'default';
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
   }
   handleClick() {
     this.checked = this.input.checked;
@@ -28,8 +36,21 @@ export class BcmSwitch {
       this.disabled = true;
     }
   }
+  async setClear() {
+    if (this.input.checked == true) {
+      this.input.checked = false;
+      this.checked = this.input.checked;
+      this.value = this.checked;
+      this.change.emit(this.checked);
+    }
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
   render() {
-    const { checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled } = this;
+    const { checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled, label, required, noCaption, captionType, captionError, caption } = this;
     const classes = cs('container', size, {
       'switch-checked': checked,
       'disabled': disabled
@@ -38,12 +59,19 @@ export class BcmSwitch {
       'checked': checked,
       'disabled': disabled
     });
+    const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
     const isPermitted = (condition) => {
       return (condition && size === 'medium');
     };
     const isMedium = size === 'medium';
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
+    const hostClasses = cs('switch', this.hidden ? 'hidden' : null);
     return (h(Host, { class: hostClasses },
+      label && h("label", { class: "label size-1" },
+        " ",
+        label,
+        " ",
+        required && ('*'),
+        "  "),
       h("label", { class: wrapperClass },
         isPermitted(inactiveText) && h("span", { class: "inactive-text size-1" }, inactiveText),
         h("div", { class: classes },
@@ -51,7 +79,16 @@ export class BcmSwitch {
           h("span", { class: "handle" }, pending && h("span", { class: "spinner" })),
           isMedium && h("bcm-icon", { icon: inactiveIcon, size: 14, class: "icon-inactive" })),
         h("input", { onClick: () => this.handleClick(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), ref: el => (this.input = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled }),
-        isPermitted(activeText) && h("span", { class: "active-text size-1" }, activeText))));
+        isPermitted(activeText) && h("span", { class: "active-text size-1" }, activeText)),
+      !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+        ? h("span", { class: captionClasses },
+          " ",
+          captionError,
+          " ")
+        : caption && h("span", { class: captionClasses },
+          " ",
+          caption,
+          " ")))));
   }
   static get is() { return "bcm-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -254,8 +291,118 @@ export class BcmSwitch {
       },
       "attribute": "name",
       "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "noCaption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "caption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption",
+      "reflect": false
+    },
+    "captionError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-error",
+      "reflect": false
+    },
+    "captionType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
+        "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-type",
+      "reflect": false,
+      "defaultValue": "'default'"
     }
   }; }
+  static get states() { return {
+    "captionCache": {},
+    "captionTypeCache": {}
+  }; }
   static get events() { return [{
       "method": "change",
       "name": "bcm-change",
@@ -302,4 +449,38 @@ export class BcmSwitch {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "setClear": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "resetCaption": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
 }

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

@@ -1,5 +1,6 @@
 import { Component, h, Host, Listen, Element, Prop, Event, Method } from '@stencil/core';
 import cs from 'classnames';
+import { getChilds } from '../../../utils/utils';
 import { validate } from '../../../utils/validation';
 /**
  * @desc
@@ -163,11 +164,15 @@ export class BcmForm {
   isWrapperComponent(item) {
     return ['bcm-datetime-picker', 'bcm-date-picker', 'bcm-time-picker'].includes(item.toLowerCase());
   }
+  isGroupComponent(item) {
+    return ['bcm-checkbox-group', 'bcm-radio-group'].includes(item.toLowerCase());
+  }
   async userFormData() {
     this.formData = {};
     this.isValid = true;
     this.returnCaption = [];
     for (const item of this.inputs) {
+      const isGroupComponent = this.isGroupComponent(item.tagName);
       const isWrapperComponent = this.isWrapperComponent(item.tagName);
       const wrapperComponent = isWrapperComponent && item;
       const input = isWrapperComponent
@@ -191,6 +196,23 @@ export class BcmForm {
             }
           }
         }
+        else if (isGroupComponent) {
+          getChilds(input, "bcm-checkbox").forEach(element => {
+            if (element.required == true) {
+              valid = validate.required(element.value);
+              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);
         }

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

@@ -151,6 +151,9 @@ export class BcmListbox {
   }
   async addChecked(items) {
     this.setClear();
+    if (sessionStorage.getItem(this._internal_id + "-config")) {
+      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+    }
     this.checkedList = items;
     this.checkedList.forEach((item) => {
       this.handleListboxChecked({ detail: String(item) }, this._internal_id);
@@ -180,7 +183,7 @@ export class BcmListbox {
     }, 100);
   }
   async config(_config) {
-    if (_config['treeview'] === true) {
+    if (_config['treeview']) {
       typeof _config['treeview'] == 'boolean'
         ? this.treeview = _config['treeview']
         : this.treeview = false;
@@ -307,6 +310,7 @@ export class BcmListbox {
         this.searchSub = "x";
       }
     }
+    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
     // forceUpdate(this.el)
     return Promise.resolve(true);
   }
@@ -321,10 +325,12 @@ export class BcmListbox {
       if (this.treeview) {
         await customElements.whenDefined("bcm-treeview");
         const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-        await bcmTreeview.setData(_data);
-        if (this.searchData.length > 0) {
-          this.isEmpty(false);
-          this.isLoading(false);
+        if (bcmTreeview) {
+          await bcmTreeview.setData(_data);
+          if (this.searchData.length > 0) {
+            this.isEmpty(false);
+            this.isLoading(false);
+          }
         }
       }
     }, 100);

package/dist/collection/utils/validation.js

@@ -16,7 +16,7 @@ export class rules {
   }
   required(value, componentValidation) {
     let validation = this.response(true);
-    if (value == '' || value == "" || value == undefined || value == null) {
+    if (value == '' || value == "" || value == undefined || value == null || value === false) {
       validation = this.response(false, 'This field is required.');
     }
     if (componentValidation) {

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, f as forceUpdate } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
 import { C as ColorPalette } from './colors-7c7b35e9.js';
-import { e as extractColor, d as delay, g as getChilds } from './utils-24f85563.js';
+import { e as extractColor, g as getChilds, d as delay } from './utils-24f85563.js';
 
 const badgeCss = "@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}:host{display:inline-block}:host(.hidden){display:none}.success{background-color:#52C41A}.error{background-color:#F5222D}.default{background-color:#D9D9D9}.processing{background-color:#4293CF}.warning{background-color:#FA8C16}.badge-basic{padding:0 8px;border:1px solid #FFFFFF;color:var(--bcm-color-grey-1);border-radius:16px;font-size:14px;height:22px;display:inline-flex;align-items:center;justify-content:center}.badge-info{display:inline-flex;align-items:center}.badge-text{color:var(--bcm-color-grey-7);font-size:14px}.badge-dot{display:inline-block;width:8px;height:8px;border:1px solid #FFFFFF;margin-right:8px;border-radius:100%;box-sizing:border-box;margin-bottom:1px}.badge-dot.basic.medium{width:12px;height:12px;margin-bottom:-1px;line-height:1}.badge-dot.basic.large{width:16px;height:16px;margin-bottom:-1px;line-height:1}";
 
@@ -299,7 +299,7 @@ class rules {
   }
   required(value, componentValidation) {
     let validation = this.response(true);
-    if (value == '' || value == "" || value == undefined || value == null) {
+    if (value == '' || value == "" || value == undefined || value == null || value === false) {
       validation = this.response(false, 'This field is required.');
     }
     if (componentValidation) {
@@ -484,11 +484,15 @@ const BcmForm = class {
   isWrapperComponent(item) {
     return ['bcm-datetime-picker', 'bcm-date-picker', 'bcm-time-picker'].includes(item.toLowerCase());
   }
+  isGroupComponent(item) {
+    return ['bcm-checkbox-group', 'bcm-radio-group'].includes(item.toLowerCase());
+  }
   async userFormData() {
     this.formData = {};
     this.isValid = true;
     this.returnCaption = [];
     for (const item of this.inputs) {
+      const isGroupComponent = this.isGroupComponent(item.tagName);
       const isWrapperComponent = this.isWrapperComponent(item.tagName);
       const wrapperComponent = isWrapperComponent && item;
       const input = isWrapperComponent
@@ -512,6 +516,23 @@ const BcmForm = class {
             }
           }
         }
+        else if (isGroupComponent) {
+          getChilds(input, "bcm-checkbox").forEach(element => {
+            if (element.required == true) {
+              valid = validate.required(element.value);
+              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);
         }
@@ -5984,7 +6005,7 @@ const BcmIcon = class {
 };
 BcmIcon.style = iconCss;
 
-const inputCss = "@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}.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}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}.input-container{display:flex;flex-direction:column;width:100%;max-width:256px}.input-container.full-width{max-width:100%}.input-base{flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);border-radius:2px;vertical-align:middle;overflow:hidden;padding:0 4px;cursor:text}.input-base.focused:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.input-base.focused:not(.disabled) .caret-container{opacity:1}.input-base.focused:not(.disabled) .input-clear-button{opacity:1}.input-base:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-6)}.input-base:hover:not(.disabled) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{background-color:var(--bcm-color-grey-3);cursor:not-allowed}.input-base.empty .input-clear-button{display:none}.input-base.invalid{border-color:var(--bcm-color-red-6)}.error .label{color:var(--bcm-color-red-6) !important}.error .input-base{border:1px solid var(--bcm-color-red-6) !important}.input-base input{color:var(--bcm-color-grey-8);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Roboto\", sans-serif;cursor:inherit;-webkit-appearance:none;appearance:none}.input-base input::-webkit-search-decoration,.input-base input::-webkit-search-cancel-button,.input-base input::-webkit-search-results-button,.input-base input::-webkit-search-results-decoration{-webkit-appearance:none}.input-base input::placeholder{color:var(--bcm-color-grey-6);user-select:none}.input-base input:focus{outline:none}input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;cursor:default;color:var(--bcm-color-grey-7)}.input-prefix ::slotted(*),.input-prefix>span{margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{margin-right:4px}.input-clear-button,.input-password-toggle{display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;transition:0.2s opacity}.input-clear-button:last-child,.input-clear-button:last-of-type,.input-password-toggle:last-child,.input-password-toggle:last-of-type{margin-right:8px}.input-clear-button:focus,.input-password-toggle:focus{outline:none}.input-clear-button{opacity:0}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.unit.input-suffix{width:24px}.unit-prefix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--bcm-color-grey-8)}.caret-container{opacity:0;width:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #D9D9D9;border-right:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box;margin-right:4px}.caret-container:last-of-type{margin-right:-4px;border-right:none}.caret-container .caret{display:inline-flex;height:50%;width:100%;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer}.caret-container .caret:hover{color:var(--bcm-color-prime-blue-6)}.caret-container .caret:active{background-color:var(--bcm-color-grey-3)}.caret-container .caret:last-child{border-top:1px solid #D9D9D9}.caret-container.disabled{background-color:var(--bcm-color-grey-3)}.caret-container.disabled .caret{cursor:not-allowed}.default-icon{margin-right:8px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.input-large{height:38px}.input-medium{height:30px}.input-small{height:20px}";
+const inputCss = "@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}.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}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}:host(.no-margin){margin:0}.input-container{display:flex;flex-direction:column;width:100%;max-width:256px}.input-container.full-width{max-width:100%}.input-base{flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);border-radius:2px;vertical-align:middle;overflow:hidden;padding:0 4px;cursor:text}.input-base.focused:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.input-base.focused:not(.disabled) .caret-container{opacity:1}.input-base.focused:not(.disabled) .input-clear-button{opacity:1}.input-base:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-6)}.input-base:hover:not(.disabled) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{background-color:var(--bcm-color-grey-3);cursor:not-allowed}.input-base.empty .input-clear-button{display:none}.input-base.invalid{border-color:var(--bcm-color-red-6)}.error .label{color:var(--bcm-color-red-6) !important}.error .input-base{border:1px solid var(--bcm-color-red-6) !important}.input-base input{color:var(--bcm-color-grey-8);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Roboto\", sans-serif;cursor:inherit;-webkit-appearance:none;appearance:none}.input-base input::-webkit-search-decoration,.input-base input::-webkit-search-cancel-button,.input-base input::-webkit-search-results-button,.input-base input::-webkit-search-results-decoration{-webkit-appearance:none}.input-base input::placeholder{color:var(--bcm-color-grey-6);user-select:none}.input-base input:focus{outline:none}input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;cursor:default;color:var(--bcm-color-grey-7)}.input-prefix ::slotted(*),.input-prefix>span{margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{margin-right:4px}.input-clear-button,.input-password-toggle{display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;transition:0.2s opacity}.input-clear-button:last-child,.input-clear-button:last-of-type,.input-password-toggle:last-child,.input-password-toggle:last-of-type{margin-right:8px}.input-clear-button:focus,.input-password-toggle:focus{outline:none}.input-clear-button{opacity:0}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.unit.input-suffix{width:24px}.unit-prefix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--bcm-color-grey-8)}.caret-container{opacity:0;width:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #D9D9D9;border-right:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box;margin-right:4px}.caret-container:last-of-type{margin-right:-4px;border-right:none}.caret-container .caret{display:inline-flex;height:50%;width:100%;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer}.caret-container .caret:hover{color:var(--bcm-color-prime-blue-6)}.caret-container .caret:active{background-color:var(--bcm-color-grey-3)}.caret-container .caret:last-child{border-top:1px solid #D9D9D9}.caret-container.disabled{background-color:var(--bcm-color-grey-3)}.caret-container.disabled .caret{cursor:not-allowed}.default-icon{margin-right:8px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.input-large{height:38px}.input-medium{height:30px}.input-small{height:20px}";
 
 let id = 0;
 const defaultIcons = {
@@ -6011,6 +6032,7 @@ const BcmInput = class {
     this.value = '';
     this.size = "medium";
     this.noCaption = false;
+    this.noMargin = false;
     this.captionType = 'default';
     this.fullWidth = false;
     this.disabled = false;
@@ -6338,7 +6360,7 @@ const BcmInput = class {
     });
     const inputClass = size === 'large' ? 'size-3' : 'size-2';
     const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
     return (h(Host, { class: hostClasses }, h("div", { class: containerClasses }, label && h("label", { htmlFor: this.inputId, class: "label size-1" }, " ", label, " ", required && ('*'), " "), h("div", { class: baseClasses }, h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), unitPrefix && h("span", { class: classnames(inputClass, 'unit-prefix') }, unitPrefix)), h("input", { "bcm-internal-id": this._id, id: this.inputId, class: inputClass, ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
         type === 'number' ? 'text' : type, placeholder: placeholder, value: type === 'number' && !this.hasFocus
         ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '')

package/dist/esm/bcm-checkbox-group.entry.js

@@ -61,11 +61,27 @@ const BcmCheckboxGroup = class {
       this.optionType && (checkbox.optionType = this.optionType);
       this.buttonStyle && (checkbox.buttonStyle = this.buttonStyle);
       this.size && (checkbox.size = this.size);
-      this.required && (checkbox.required = true);
-      this.disabled && (checkbox.disabled = true);
+      // this.required == true && checkbox.required == true && (
+      //     checkbox.required = true
+      // )
+      this.disabled == true && (checkbox.disabled = true);
     });
     this.groupChecked().then(values => this.value = values);
   }
+  async setClear() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.setClear();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
+  async resetCaption() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.resetCaption();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
   /**
   * @ComponentMethod
   */
@@ -240,7 +256,7 @@ const BcmCheckboxGroup = class {
     });
     var customStyle = {};
     this.gap && (customStyle = { 'gap': this.gap });
-    return (h(Host, { class: hostClasses, "on-bcm-change": () => this.inputChange() }, label && h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), "  "), indeterminate && (h("div", { class: indeterminateClasses }, h("input", { id: "bcm-indeterminate-element", type: "checkbox", disabled: disabled }), h("label", { htmlFor: "bcm-indeterminate-element", "on-click": () => this.indeterminateClick() }, h("span", null, h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), "Check All"))), h("div", { class: groupContainerClasses, style: customStyle }, checkboxesProp && this.checkboxesProp.map((checkbox) => h("bcm-checkbox", { name: checkbox.name, checked: checkbox.checked, disabled: checkbox.disabled, noCaption: this.noCaption, optionType: this.optionType, buttonStyle: this.buttonStyle, size: this.size, "full-width": this.fullWidth }, checkbox.label)), h("slot", null))));
+    return (h(Host, { class: hostClasses, "on-bcm-change": () => this.inputChange() }, label && h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), "  "), indeterminate && (h("div", { class: indeterminateClasses }, h("input", { id: "bcm-indeterminate-element", type: "checkbox", disabled: disabled }), h("label", { htmlFor: "bcm-indeterminate-element", "on-click": () => this.indeterminateClick() }, h("span", null, h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), "Check All"))), h("div", { class: groupContainerClasses, style: customStyle }, checkboxesProp && this.checkboxesProp.map((checkbox) => h("bcm-checkbox", { name: checkbox.name, checked: checkbox.checked, disabled: checkbox.disabled, required: this.required === true && checkbox.required === true && (true), noCaption: this.noCaption, optionType: this.optionType, buttonStyle: this.buttonStyle, size: this.size, "full-width": this.fullWidth }, checkbox.label)), h("slot", null))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/bcm-checkbox-lite_9.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement, a as getAssetPath
 import { c as classnames } from './index-e58a2d48.js';
 import { g as getChilds } from './utils-24f85563.js';
 
-const checkboxCss = "@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}.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}:host{display:inline-block}:host(.hidden){display:none}input{display:none}.svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}label .icon-checked{display:none}label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px}input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}input:checked+label .icon-checked{display:block}bcm-icon{filter:brightness(0) invert(1)}input[disabled]+label{cursor:not-allowed}input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}:host(.error) input:not([disabled])+label span.icon{border-color:var(--bcm-color-red-6)}.caption-area{margin-bottom:8px;min-height:20px;display:block}.input-caption{display:block}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.radio-button>span.icon{display:none}.radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
+const checkboxCss = "@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}.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}:host{display:inline-block}:host(.hidden){display:none}input{display:none}.svg-icon{filter:brightness(0) invert(1);width:12px;height:12px;display:none}label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px}:host(.indeterminate) label span.icon{position:relative}:host(.indeterminate) label span.icon::after{content:\"\";position:absolute;top:50%;left:8px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}:host(.indeterminate) label span.icon::before{content:\"\";position:absolute;top:-1px;left:-1px;width:16px;height:100%;border-radius:2px;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:1}:host(.indeterminate) label span.icon:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}input:checked+label .icon-checked{display:block}bcm-icon{filter:brightness(0) invert(1)}input[disabled]+label{cursor:not-allowed}input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}:host(.error) input:not([disabled])+label span.icon{border-color:var(--bcm-color-red-6)}.caption-area{margin-bottom:8px;min-height:20px;display:block}.input-caption{display:block}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.radio-button>span.icon{display:none}.radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
 
 const BcmCheckboxLite = class {
   constructor(hostRef) {
@@ -13,6 +13,7 @@ const BcmCheckboxLite = class {
     this.value = '';
     this.name = 'checkbox';
     this.checked = false;
+    this.indeterminate = false;
     this.disabled = false;
     this.readOnly = false;
     this.hidden = false;
@@ -30,8 +31,11 @@ const BcmCheckboxLite = class {
   componentDidUpdate() { }
   render() {
     const { disabled, checked, readOnly, name, required } = this;
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly }), h("label", { htmlFor: name }, h("span", { class: "icon" }, h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))));
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'indeterminate': this.indeterminate
+    });
+    const iconClasses = classnames('icon');
+    return (h(Host, { class: hostClasses }, h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly }), h("label", { htmlFor: name }, h("span", { class: iconClasses }, h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))));
   }
   get el() { return getElement(this); }
 };
@@ -281,6 +285,9 @@ const BcmListbox = class {
   }
   async addChecked(items) {
     this.setClear();
+    if (sessionStorage.getItem(this._internal_id + "-config")) {
+      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+    }
     this.checkedList = items;
     this.checkedList.forEach((item) => {
       this.handleListboxChecked({ detail: String(item) }, this._internal_id);
@@ -310,7 +317,7 @@ const BcmListbox = class {
     }, 100);
   }
   async config(_config) {
-    if (_config['treeview'] === true) {
+    if (_config['treeview']) {
       typeof _config['treeview'] == 'boolean'
         ? this.treeview = _config['treeview']
         : this.treeview = false;
@@ -437,6 +444,7 @@ const BcmListbox = class {
         this.searchSub = "x";
       }
     }
+    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
     // forceUpdate(this.el)
     return Promise.resolve(true);
   }
@@ -451,10 +459,12 @@ const BcmListbox = class {
       if (this.treeview) {
         await customElements.whenDefined("bcm-treeview");
         const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-        await bcmTreeview.setData(_data);
-        if (this.searchData.length > 0) {
-          this.isEmpty(false);
-          this.isLoading(false);
+        if (bcmTreeview) {
+          await bcmTreeview.setData(_data);
+          if (this.searchData.length > 0) {
+            this.isEmpty(false);
+            this.isLoading(false);
+          }
         }
       }
     }, 100);
@@ -1306,7 +1316,7 @@ const BcmSearch = class {
   }
   render() {
     const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("bcm-input", { placeholder: this.searchPlaceholder, "no-caption": true, "full-width": true, disabled: this.disabled, type: "search", "on-bcm-change": e => this.inputChange(e.detail), value: this.searchValue })));
+    return (h(Host, { class: hostClasses }, h("bcm-input", { placeholder: this.searchPlaceholder, "no-caption": true, "no-margin": true, "full-width": true, disabled: this.disabled, type: "search", "on-bcm-change": e => this.inputChange(e.detail), value: this.searchValue })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

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

@@ -30,7 +30,7 @@ var ColorProps;
   ColorProps["bc-orange"] = "bc-orange";
 })(ColorProps || (ColorProps = {}));
 
-const checkboxCss = "@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}.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}:host{display:inline-block}:host(.hidden){display:none}input{display:none}.svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}label .icon-checked{display:none}label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px}input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}input:checked+label .icon-checked{display:block}bcm-icon{filter:brightness(0) invert(1)}input[disabled]+label{cursor:not-allowed}input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}:host(.error) input:not([disabled])+label span.icon{border-color:var(--bcm-color-red-6)}.caption-area{margin-bottom:8px;min-height:20px;display:block}.input-caption{display:block}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.radio-button>span.icon{display:none}.radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
+const checkboxCss = "@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}.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}:host{display:inline-block}:host(.hidden){display:none}input{display:none}.svg-icon{filter:brightness(0) invert(1);width:12px;height:12px;display:none}label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px}:host(.indeterminate) label span.icon{position:relative}:host(.indeterminate) label span.icon::after{content:\"\";position:absolute;top:50%;left:8px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}:host(.indeterminate) label span.icon::before{content:\"\";position:absolute;top:-1px;left:-1px;width:16px;height:100%;border-radius:2px;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:1}:host(.indeterminate) label span.icon:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}input:checked+label .icon-checked{display:block}bcm-icon{filter:brightness(0) invert(1)}input[disabled]+label{cursor:not-allowed}input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}:host(.error) input:not([disabled])+label span.icon{border-color:var(--bcm-color-red-6)}.caption-area{margin-bottom:8px;min-height:20px;display:block}.input-caption{display:block}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.radio-button>span.icon{display:none}.radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
 
 const BcmCheckbox = class {
   constructor(hostRef) {
@@ -59,6 +59,19 @@ const BcmCheckbox = class {
   */
   connectedCallback() {
     this.handleChange = this.handleChange.bind(this);
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  async setClear() {
+    if (this.inputElement.checked == true) {
+      this.inputElement.checked = false;
+      this.handleChange();
+    }
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
   }
   componentDidLoad() {
     this.value = this.inputElement.checked;