bromcom-ui 2.7.38-rc.0 → 2.7.38-rc.10

package/dist/cjs/old-bcm-popover.cjs.entry.js

@@ -6,11 +6,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1fda1524.js');
+const index = require('./index-7e2a5376.js');
 const index$1 = require('./index-a2b50e51.js');
-const bcm = require('./bcm-f00ec62c.js');
-const generate = require('./generate-0d51cba6.js');
-const isLoadDecorator = require('./is-load-decorator-77664890.js');
+const bcm = require('./bcm-634604e3.js');
+const generate = require('./generate-79883e13.js');
+const isLoadDecorator = require('./is-load-decorator-c38598ab.js');
 require('./_commonjsHelpers-bd20f4c0.js');
 
 const oldPopoverCss = "@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-popover{display:inline-flex}";
@@ -33,8 +33,8 @@ const OldBcmPopover = class {
     this._title = undefined;
     this._id = generate.Generate.UID();
     this.message = undefined;
-    this.placement = bcm.Bcm$1.Placement.top;
-    this.trigger = bcm.Bcm$1.TriggerType.click;
+    this.placement = bcm.Bcm.Placement.top;
+    this.trigger = bcm.Bcm.TriggerType.click;
     this.open = false;
     this.linkedComponent = undefined;
   }

package/dist/cjs/{popover-placement-ac98d407.js → popover-placement-69d37a5f.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const stringHelper = require('./string-helper-145cd64f.js');
+const stringHelper = require('./string-helper-71b10c53.js');
 
 const opposites = {
   left: 'right',

package/dist/cjs/{slot-template-a4505c70.js → slot-template-7a07f865.js}

@@ -4,8 +4,8 @@
  */
 'use strict';
 
-const index = require('./index-1fda1524.js');
-const stringHelper = require('./string-helper-145cd64f.js');
+const index = require('./index-7e2a5376.js');
+const stringHelper = require('./string-helper-71b10c53.js');
 
 const SlotTemplate = ({ value, className, name }) => {
   return stringHelper.StringHelper.isNullOrEmpty(value) ? index.h("span", { class: className },

package/dist/cjs/{stepper-states-f66c2ae8.js → stepper-states-fcc50d03.js}

@@ -4,8 +4,9 @@
  */
 'use strict';
 
-const index = require('./index-1d2ce51d.js');
-const generate = require('./generate-0d51cba6.js');
+const index = require('./index-56628fe5.js');
+const generate = require('./generate-79883e13.js');
+const index$1 = require('./index-7e2a5376.js');
 
 const { state } = index.createStore({
   value: new Map(),
@@ -18,7 +19,8 @@ const setValue = val => {
         .filter(data => !data.hidden)
         .map((item, index) => ({
         id: item.id || generate.Generate.UID(),
-        title: item.title || item._title || 'Step ' + (index + 1),
+        title: item.title || item._title,
+        _title: item.title || item._title || 'Step ' + (index + 1),
         description: item.description || '',
         status: item.status || 'default',
         disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
@@ -48,14 +50,14 @@ const changeStepStatus = (id, stepId, status) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
-    value.el.tick = generate.Generate.UID();
+    index$1.forceUpdate(value.el);
   }
 };
 const changeStepDisabled = (id, stepId, disabled) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
-    value.el.tick = generate.Generate.UID();
+    index$1.forceUpdate(value.el);
   }
 };
 const setActiveIndex = (id, index) => state.value.get(id).active = index;
@@ -64,7 +66,7 @@ const stepperReset = id => {
   if (value) {
     value.active = 1;
     value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
-    value.el.tick = generate.Generate.UID();
+    index$1.forceUpdate(value.el);
   }
 };
 const getValue = id => generate.snq(() => state.value.get(id), {});

package/dist/cjs/{string-helper-145cd64f.js → string-helper-71b10c53.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const bcm = require('./bcm-f00ec62c.js');
+const bcm = require('./bcm-634604e3.js');
 const _commonjsHelpers = require('./_commonjsHelpers-bd20f4c0.js');
 
 var slugify = _commonjsHelpers.createCommonjsModule(function (module, exports) {
@@ -94,7 +94,7 @@ StringHelper.replace = (str, search, replace) => str.replace(search, replace);
 StringHelper.remove = (str, search) => str.replace(search, '');
 StringHelper.isNullOrEmpty = (str) => str === null || str === undefined || str === '';
 StringHelper.localizationMessage = (str, args) => str.replace(/{(\d+)}/g, (match, number) => (typeof args[number] != 'undefined' ? args[number] : match));
-StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(bcm.Bcm$1.FormErrorMessages[type], args);
+StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(bcm.Bcm.FormErrorMessages[type], args);
 StringHelper.split = (str, separator) => str.split(separator);
 StringHelper.textContains = (str, search) => str && str.indexOf(search) !== -1;
 StringHelper.textLimitter = (str, limit, newLine = false) => (str && str.length > limit ? `${str.substring(0, limit)}...` : str) + `${newLine ? ' <br /> ' : ''}`;

package/dist/cjs/tooltip-helper-c195f187.js

@@ -0,0 +1,119 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+require('./element-dragger-a8562f82.js');
+const stringHelper = require('./string-helper-71b10c53.js');
+const floatingUi = require('./floating-ui-c23acc6c.js');
+const colorHelper = require('./color-helper-c9882bd8.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-79883e13.js');
+require('./number-helper-9b194170.js');
+require('./validators-21bbcbcc.js');
+const bcm = require('./bcm-634604e3.js');
+
+class Tooltip {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium" }) {
+    this.bgColor = () => colorHelper.ColorHelper.twColor(this.color, 700);
+    this.target = () => document.getElementById(this.targetId);
+    this.sizeClass = () => {
+      switch (this.size) {
+        case bcm.Bcm$1.Size.small:
+          return "tw-text-1";
+        case bcm.Bcm$1.Size.medium:
+          return "tw-text-2";
+        case bcm.Bcm$1.Size.large:
+          return "tw-text-3";
+        default:
+          return "tw-text-2";
+      }
+    };
+    this.init = () => {
+      this.el = generate.Generate.createElement("div", {
+        "id": `${this.targetId}-tooltip-box`,
+        "class": `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "role": "tooltip",
+        "aria-hidden": "true",
+        "style": `color: ${colorHelper.ColorHelper.twColorReverse(this.bgColor())}`,
+        "innerHTML": stringHelper.StringHelper.trim(this.message),
+      });
+    };
+    this.update = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+        this.show();
+      }
+    };
+    this.listener = () => {
+      window.addEventListener("resize", this.calculatePosition.bind(this));
+      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.addEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.trigger && this.target()) {
+        switch (this.trigger) {
+          case "click":
+            this.target().addEventListener("click", this.toggle.bind(this));
+            break;
+          case "hover":
+            this.target().addEventListener("mouseenter", this.show.bind(this));
+            this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          case "focus":
+            this.target().addEventListener("focus", this.show.bind(this), true);
+            this.target().addEventListener("blur", this.hide.bind(this), true);
+            break;
+        }
+      }
+      this.calculatePosition();
+    };
+    this.calculatePosition = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        floatingUi.FloatingUI({
+          ref: this.target(),
+          floating: this.el,
+          placement: this.placement,
+          offset: 8,
+          arrow: true,
+          arrowColor: `tw-bg-${this.bgColor()}`,
+        });
+      }
+    };
+    this.show = () => {
+      if (this.message) {
+        this.init();
+        this.calculatePosition();
+      }
+      else {
+        this.hide();
+      }
+    };
+    this.hide = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+      }
+    };
+    this.toggle = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
+    };
+    this.message = message;
+    this.targetId = targetId;
+    this.placement = placement;
+    this.color = color;
+    this.id = targetId + "-tooltip-box";
+    this.trigger = trigger;
+    this.size = size;
+  }
+}
+
+exports.Tooltip = Tooltip;

package/dist/cjs/{validators-424a487a.js → validators-21bbcbcc.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const generate = require('./generate-0d51cba6.js');
+const generate = require('./generate-79883e13.js');
 
 class Validators {
 }

package/dist/collection/collection-manifest.json

@@ -21,6 +21,8 @@
     "./components/molecules/checkbox/checkbox-lite.js",
     "./components/molecules/checkbox/checkbox.js",
     "./components/molecules/checkbox/group.js",
+    "./components/molecules/color-input/color-input.js",
+    "./components/molecules/colorful/colorful.js",
     "./components/molecules/drawer/drawer.js",
     "./components/molecules/dropdown/dropdown.js",
     "./components/molecules/empty/empty.js",
@@ -51,7 +53,6 @@
     "./components/molecules/timeline/timeline.js",
     "./components/molecules/tooltip/tooltip.js",
     "./components/organism/autocomplete/autocomplete.js",
-    "./components/organism/colorpicker/colorpicker.js",
     "./components/organism/date-picker/date-picker.js",
     "./components/organism/datetime-picker/datetime-picker.js",
     "./components/organism/form/form-group.js",
@@ -64,6 +65,7 @@
     "./components/other/default/default.js",
     "./components/other_deprecated/collapse/collapse.js",
     "./components/other_deprecated/collapse/group.js",
+    "./components/other_deprecated/colorpicker/colorpicker.js",
     "./components/other_deprecated/listbox/listbox-group.js",
     "./components/other_deprecated/listbox/listbox-item.js",
     "./components/other_deprecated/listbox/listbox.js",

package/dist/collection/components/atoms/avatar/avatar.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/badge/badge.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/button/button.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/button/button.js

@@ -152,7 +152,7 @@ export class BcmButton {
       hidden,
       'full-width': fullWidth,
     });
-    return (h(Host, { class: hostClasses, tabindex: "-1", style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
+    return (h(Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
   }
   static get is() { return "bcm-button"; }
   static get originalStyleUrls() {

package/dist/collection/components/atoms/chip/chip.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/chip/chip.js

@@ -12,7 +12,7 @@ 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 { Host, h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { IsLoad } from '../../../decorators/is-load-decorator';
 import { Generate } from '../../../helper/generate';
 import cs from 'classnames';
@@ -27,6 +27,7 @@ export class BcmChip {
     this.disabled = undefined;
     this.color = undefined;
   }
+  // @ts-ignore
   setColor() {
     if (!this.color)
       return;
@@ -44,14 +45,23 @@ export class BcmChip {
       '--bcm-chip-background-color-disabled': ColorHelper.dsColor('slate' + '-100'),
     };
   }
+  handleDismiss(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.bcmChipDismiss.emit(this.el);
+  }
+  handleAddable(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.bcmChipAddable.emit(this.el);
+  }
   render() {
     const { type, size, avatar, disabled, color } = this;
     const hostClasses = cs('bcm-chip', `bcm-chip__type-${type}`, `bcm-chip__size-${size}`, {
       'bcm-chip--disabled': disabled,
       'bcm-chip--avatar': avatar,
     });
-    return (h(Host, { class: hostClasses, tabindex: "1", disabled: disabled, style: this.setColor() }, avatar &&
-      h("bcm-avatar", Object.assign({ size: size }, ((color && { color })), ((avatar && { image: avatar })))), h("slot", null), type === 'dismissable' && (h("span", { class: "bcm-chip__type-dismissable-icon" }, h("bcm-icon", { icon: "fal fa-times" })))));
+    return (h(Host, { class: hostClasses, tabindex: "0", disabled: disabled, style: this.setColor(), onClick: e => this.bcmChipSelect.emit(e) }, avatar && h("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === 'addable' && (h("span", { class: "bcm-chip__left" }, h("bcm-icon", { onClick: e => this.handleAddable(e), icon: "far fa-plus" }))), h("slot", null), type === 'dismissable' && (h("span", { class: "bcm-chip__type-dismissable-icon" }, h("bcm-icon", { onClick: e => this.handleDismiss(e), icon: "fal fa-times" })))));
   }
   static get is() { return "bcm-chip"; }
   static get originalStyleUrls() {
@@ -190,6 +200,54 @@ export class BcmChip {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "bcmChipDismiss",
+        "name": "bcm-chip-dismiss",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmChipSelect",
+        "name": "bcm-chip-select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmChipAddable",
+        "name": "bcm-chip-addable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
 }
 __decorate([

package/dist/collection/components/atoms/label/label.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/link/link.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/link/link.js

@@ -44,7 +44,7 @@ export class BcmLink {
       'suffix': this.linkIsExternal(href)
     });
     const ElementTagType = href ? 'a' : 'span';
-    return (h(Host, { disabled: disabled, class: hostClasses, tabindex: "-1" }, h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === Bcm.IconPosition.prefix && h("bcm-icon", { class: "prefix-icon", icon: icon }), h("slot", null), this.linkIsExternal(href) && h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
+    return (h(Host, { disabled: disabled, class: hostClasses }, h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === Bcm.IconPosition.prefix && h("bcm-icon", { class: "prefix-icon", icon: icon }), h("slot", null), this.linkIsExternal(href) && h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
   }
   static get is() { return "bcm-link"; }
   static get originalStyleUrls() {

package/dist/collection/components/molecules/button-group/button-group.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -412,7 +414,11 @@
   justify-content: flex-start;
   flex-wrap: nowrap;
 }
+.bcm-button-group__vertical .bcm-button {
+  width: 100%;
+}
 .bcm-button-group__vertical .bcm-button__container {
+  width: 100%;
   border-radius: 0;
 }
 .bcm-button-group__vertical .bcm-button:first-child .bcm-button__container {

package/dist/collection/components/molecules/card/card.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/molecules/checkbox/checkbox.css

@@ -125,7 +125,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -428,7 +430,9 @@
   min-height: calc(14px + 8px);
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -776,7 +780,9 @@
   margin: 0;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -1061,6 +1067,7 @@
   appearance: none;
   background-color: #fff;
   margin: 0;
+  display: none;
 }
 .bcm-checkbox__input {
   display: flex;

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

@@ -150,7 +150,7 @@ export class BcmCheckbox {
     });
     const bcmCheckboxLabelClass = cs('bcm-checkbox__label');
     const bcmCheckboxInputClass = cs('bcm-checkbox__input');
-    return (h(Host, { tabindex: "1", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: this.setColor(this.color), class: bcmCheckboxClass, disabled: disabled }, h("span", { hidden: true }, h("slot", null)), label && h("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h("div", { class: bcmCheckboxInputClass }, h("input", { id: `input-${_id}`, type: "checkbox", tabindex: "-1", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el) }), h("label", { class: bcmCheckboxLabelClass, htmlFor: `input-${_id}` }, h("span", { class: bcmCheckboxIconClass }, h("bcm-icon", { icon: "far fa-check" })), h(SlotTemplate, { className: "slot" }))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: this.setColor(this.color), class: bcmCheckboxClass, disabled: disabled }, h("span", { hidden: true }, h("slot", null)), label && h("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h("div", { class: bcmCheckboxInputClass }, h("input", { id: `input-${_id}`, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el) }), h("label", { class: bcmCheckboxLabelClass, htmlFor: `input-${_id}` }, h("span", { class: bcmCheckboxIconClass }, h("bcm-icon", { icon: "far fa-check" })), h(SlotTemplate, { className: "slot" }))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   static get is() { return "bcm-checkbox"; }
   static get originalStyleUrls() {