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

package/dist/cjs/bcm-card.cjs.entry.js

@@ -6,17 +6,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-const index$1 = require('./index-fdbf5226.js');
-const colorHelper = require('./color-helper-d6d2028b.js');
-const generate = require('./generate-21143214.js');
-const stringHelper = require('./string-helper-d681e5c7.js');
-const slotTemplate = require('./slot-template-d70ea082.js');
-require('./_commonjsHelpers-bd20f4c0.js');
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+const colorHelper = require('./color-helper-c3a819ea.js');
+const generate = require('./generate-225c30c9.js');
+const stringHelper = require('./string-helper-b89a9828.js');
+const slotTemplate = require('./slot-template-758beb71.js');
+require('./_commonjsHelpers-ed84c3ca.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
-require('./colors-e1d142ad.js');
-require('./bcm-ab921827.js');
+require('./colors-078851ec.js');
+require('./package-e7a4d8ef.js');
+require('./bcm-03727f3b.js');
 
 const cardCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-card{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:block;width:100%;background-color:var(--bcm-new-ds-color-white);border-radius:8px;box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1);box-sizing:border-box}.bcm-card__header,.bcm-card__body,.bcm-card__footer{display:block;width:100%}.bcm-card__header{border-radius:8px 8px 0 0;padding:12px 24px;color:var(--bcm-new-ds-color-slate-700);font-weight:600}.bcm-card__body{padding:12px 24px}.bcm-card__footer{padding:12px 24px;border-radius:0 0 8px 8px}";
 

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

@@ -6,18 +6,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-const index$2 = require('./index-fdbf5226.js');
-const generate = require('./generate-21143214.js');
-const bcm = require('./bcm-ab921827.js');
+const index = require('./index-c591ecec.js');
+const index$2 = require('./index-95ae50d0.js');
+const generate = require('./generate-225c30c9.js');
+const bcm = require('./bcm-03727f3b.js');
 const utils = require('./utils-fc077139.js');
-const index$1 = require('./index-4506fcd7.js');
-const labelTemplate = require('./label-template-4d5f99a5.js');
-const isLoadDecorator = require('./is-load-decorator-137dded1.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-require('./colors-e1d142ad.js');
-require('./slot-template-d70ea082.js');
-require('./string-helper-d681e5c7.js');
+const index$1 = require('./index-d321de96.js');
+const labelTemplate = require('./label-template-8d34230f.js');
+const isLoadDecorator = require('./is-load-decorator-7575fbd2.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-e7a4d8ef.js');
+require('./colors-078851ec.js');
+require('./slot-template-758beb71.js');
+require('./string-helper-b89a9828.js');
 
 const CheckboxGroupTemplate = ({ customStyle, groupContainerClasses, onBcmSelect, items }) => {
   return (index.h("div", { class: groupContainerClasses, style: customStyle }, items.childs && items.childs.map((checkbox) => {
@@ -236,7 +237,7 @@ const BcmCheckboxGroup = class {
     this.change = index.createEvent(this, "bcm-change", 7);
     this.groupCheckedList = index.createEvent(this, "bcm-group-checked-list", 7);
     this._id = generate.Generate.UID();
-    this.direction = bcm.Bcm$1.Direction.horizontal;
+    this.direction = bcm.Bcm.Direction.horizontal;
     this.items = [];
     this.indeterminate = false;
     this.name = undefined;
@@ -251,10 +252,10 @@ const BcmCheckboxGroup = class {
     this.fullWidth = false;
     this.optionType = 'default';
     this.buttonStyle = 'solid';
-    this.size = bcm.Bcm$1.Size.medium;
+    this.size = bcm.Bcm.Size.medium;
     this.caption = undefined;
     this.noCaption = false;
-    this.captionType = bcm.Bcm$1.Status.default;
+    this.captionType = bcm.Bcm.Status.default;
     this.tick = {};
   }
   componentDidLoad() {

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

@@ -6,13 +6,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-const index$1 = require('./index-fdbf5226.js');
-const generate = require('./generate-21143214.js');
-const bcm = require('./bcm-ab921827.js');
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+const generate = require('./generate-225c30c9.js');
+const bcm = require('./bcm-03727f3b.js');
 const utils = require('./utils-fc077139.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-require('./colors-e1d142ad.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-e7a4d8ef.js');
+require('./colors-078851ec.js');
 
 const checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}";
 
@@ -26,7 +27,7 @@ const BcmCheckboxLite = class {
     this.hidden = false;
     this.required = false;
     this.readOnly = false;
-    this.captionType = bcm.Bcm$1.Status.default;
+    this.captionType = bcm.Bcm.Status.default;
   }
   render() {
     const { disabled, checked, readOnly, required, indeterminate, hidden, captionType, _id } = this;
@@ -54,7 +55,7 @@ const BcmCheckboxLite = class {
     //     'bcm-checkbox__label'
     // )
     const bcmCheckboxClass = index$1.classnames('bcm-checkbox', `bcm-checkbox-size-medium`, {
-      'error': captionType == bcm.Bcm$1.Status.error,
+      'error': captionType == bcm.Bcm.Status.error,
       hidden,
       checked,
       disabled,
@@ -84,7 +85,7 @@ const BcmDivider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.hidden = false;
-    this.direction = bcm.Bcm$1.Direction.horizontal;
+    this.direction = bcm.Bcm.Direction.horizontal;
   }
   render() {
     const { hidden, direction } = this;

package/dist/cjs/bcm-checkbox_2.cjs.entry.js

@@ -6,18 +6,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-const index$1 = require('./index-fdbf5226.js');
-const captionTemplate = require('./caption-template-8d099fd6.js');
-const generate = require('./generate-21143214.js');
-const slotTemplate = require('./slot-template-d70ea082.js');
-const bcm = require('./bcm-ab921827.js');
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+const captionTemplate = require('./caption-template-81dbc490.js');
+const generate = require('./generate-225c30c9.js');
+const slotTemplate = require('./slot-template-758beb71.js');
+const bcm = require('./bcm-03727f3b.js');
 const utils = require('./utils-fc077139.js');
-const colorHelper = require('./color-helper-d6d2028b.js');
-const isLoadDecorator = require('./is-load-decorator-137dded1.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-require('./colors-e1d142ad.js');
-require('./string-helper-d681e5c7.js');
+const colorHelper = require('./color-helper-c3a819ea.js');
+const isLoadDecorator = require('./is-load-decorator-7575fbd2.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-e7a4d8ef.js');
+require('./colors-078851ec.js');
+require('./string-helper-b89a9828.js');
 require('./colors-56282b00.js');
 
 const checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}";
@@ -49,13 +50,13 @@ const BcmCheckbox = class {
     this.required = false;
     this.label = undefined;
     this.readonly = false;
-    this.size = bcm.Bcm$1.Size.medium;
+    this.size = bcm.Bcm.Size.medium;
     this.indeterminate = null;
     this.color = "blue";
     this.caption = undefined;
     this.noCaption = false;
     this.captionError = undefined;
-    this.captionType = bcm.Bcm$1.Status.default;
+    this.captionType = bcm.Bcm.Status.default;
     this.captionCache = undefined;
     this.captionTypeCache = undefined;
   }
@@ -100,7 +101,7 @@ const BcmCheckbox = class {
   }
   watchIndeterminate(newValue, oldValue) {
     if (newValue != oldValue) {
-      this.inputElement.checked = this.indeterminate == bcm.Bcm$1.IndeterminateType.determinate ? true : false;
+      this.inputElement.checked = this.indeterminate == bcm.Bcm.IndeterminateType.determinate ? true : false;
       this.handleChange();
     }
   }
@@ -117,7 +118,7 @@ const BcmCheckbox = class {
     this.handleChange();
   }
   handleKeyUp(ev) {
-    if (ev.keyCode == bcm.Bcm$1.KeyCode.space || ev.keyCode == bcm.Bcm$1.KeyCode.enter) {
+    if (ev.keyCode == bcm.Bcm.KeyCode.space || ev.keyCode == bcm.Bcm.KeyCode.enter) {
       if (!this.disabled && !this.readonly) {
         this.inputElement.checked = !this.inputElement.checked;
         this.handleChange();
@@ -154,7 +155,7 @@ const BcmCheckbox = class {
     const { label, _id, indeterminate, hidden, disabled, checked, readonly, required, caption, captionError, captionType, noCaption, size } = this;
     //////
     const bcmCheckboxClass = index$1.classnames('bcm-checkbox', `bcm-checkbox-size-${size}`, {
-      'error': captionType == bcm.Bcm$1.Status.error,
+      'error': captionType == bcm.Bcm.Status.error,
       hidden,
       checked,
       disabled,
@@ -184,7 +185,7 @@ const BcmTypography = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
+    return (index.h(index.Host, { class: "bcm-ui-element bcm-ui-content-display" }, index.h("slot", null)));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/bcm-chip-group.cjs.entry.js

@@ -0,0 +1,129 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+require('./color-helper-c3a819ea.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-225c30c9.js');
+require('./number-helper-2b3bd61e.js');
+require('./string-helper-b89a9828.js');
+require('./validators-9e7f7995.js');
+require('./element-dragger-a8562f82.js');
+const bcm = require('./bcm-03727f3b.js');
+const captionTemplate = require('./caption-template-81dbc490.js');
+const index$1 = require('./index-95ae50d0.js');
+require('./types-cc4adee7.js');
+const labelTemplate = require('./label-template-8d34230f.js');
+require('./types-7523fd99.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./colors-078851ec.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-e7a4d8ef.js');
+require('./slot-template-758beb71.js');
+
+const chipGroupCss = "@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-chip-group .bcm-chip{cursor:pointer}";
+
+const BcmChipGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.change = index.createEvent(this, "bcm-change", 7);
+    this._id = generate.Generate.UID();
+    this.name = undefined;
+    this.value = undefined;
+    this.required = false;
+    this.size = "medium";
+    this.label = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = bcm.Bcm$1.Status.default;
+    this.captionError = undefined;
+  }
+  handleSelectItem(e) {
+    const target = e === null || e === void 0 ? void 0 : e.target;
+    if (target instanceof HTMLElement) {
+      const data = e.detail;
+      const chipItem = document.createElement("bcm-chip");
+      // chipItem.setAttribute("type", "dismissable");
+      chipItem.setAttribute("value", data.id);
+      chipItem.innerHTML = data.text;
+      target.parentNode.insertBefore(chipItem, target);
+      this.setSelect(data.id);
+    }
+  }
+  handleDismiss(e) {
+    const target = e === null || e === void 0 ? void 0 : e.target;
+    if (target instanceof HTMLElement) {
+      target.remove();
+      this.setSelect();
+    }
+  }
+  handleSelect(e) {
+    const target = e === null || e === void 0 ? void 0 : e.target;
+    if (target instanceof HTMLElement) {
+      if (target.type === "addable") {
+        this.showListComponent(target.id);
+      }
+      else {
+        this.setSelect(target.value);
+      }
+    }
+  }
+  showListComponent(id) {
+    const listComponent = document.getElementById(id + "-list");
+    if (listComponent) {
+      listComponent.show();
+    }
+  }
+  getSlots() {
+    return this.el.querySelectorAll("bcm-chip");
+  }
+  setSelect(val = this.value, noEvent = false) {
+    const slots = this.getSlots();
+    if ((slots === null || slots === void 0 ? void 0 : slots.length) === 0)
+      return;
+    const slotArray = Array.from(slots);
+    const selectedSlot = slotArray.find(slot => slot.value === val);
+    if (!selectedSlot) {
+      this.value = slotArray[0].value;
+    }
+    else {
+      this.value = val;
+    }
+    slotArray.forEach(slot => {
+      slot.selected = slot.value === this.value;
+    });
+    if (!noEvent) {
+      this.change.emit(this.value);
+    }
+  }
+  setAttr() {
+    const slots = this.getSlots();
+    if ((slots === null || slots === void 0 ? void 0 : slots.length) === 0)
+      return;
+    const slotArray = Array.from(slots);
+    slotArray.forEach(slot => {
+      slot.setAttribute("size", this.size);
+    });
+  }
+  componentWillLoad() {
+    this.setSelect();
+  }
+  componentDidRender() {
+    this.setAttr();
+  }
+  render() {
+    const { label, required, noCaption, captionType, captionError, caption } = this;
+    const hostClasses = index$1.classnames("bcm-chip-group");
+    return (index.h(index.Host, { class: hostClasses }, label && (index.h("div", null, index.h(labelTemplate.LabelTemplate, { type: captionType, value: label, required: required }))), index.h("div", { class: "tw-flex tw-flex-wrap tw-gap-1" }, index.h("slot", null)), index.h(captionTemplate.CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmChipGroup.style = chipGroupCss;
+
+exports.bcm_chip_group = BcmChipGroup;

package/dist/cjs/bcm-chip.cjs.entry.js

@@ -0,0 +1,91 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+const colorHelper = require('./color-helper-c3a819ea.js');
+const generate = require('./generate-225c30c9.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./colors-078851ec.js');
+require('./package-e7a4d8ef.js');
+
+const chipCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-chip{--bcm-chip-color:var(--bcm-new-ds-color-slate-500);--bcm-chip-color-hover:var(--bcm-new-ds-color-slate-500);--bcm-chip-color-focus:var(--bcm-new-ds-color-slate-700);--bcm-chip-color-active:var(--bcm-new-ds-color-slate-700);--bcm-chip-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-chip-background-color:var(--bcm-new-ds-color-slate-200);--bcm-chip-background-color-hover:var(--bcm-new-ds-color-slate-300);--bcm-chip-background-color-focus:var(--bcm-new-ds-color-slate-300);--bcm-chip-background-color-active:var(--bcm-new-ds-color-slate-400);--bcm-chip-background-color-disabled:var(--bcm-new-ds-color-slate-100);display:inline-flex;justify-content:center;align-items:center;width:fit-content;height:fit-content;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;padding:0 8px;gap:4px;color:var(--bcm-chip-color);background-color:var(--bcm-chip-background-color);border-radius:100px;transition:background-color 0.1s ease-in-out;outline:none}.bcm-chip:not(.bcm-chip--disabled):hover{background-color:var(--bcm-chip-background-color-hover)}.bcm-chip:not(.bcm-chip--disabled):focus{background-color:var(--bcm-chip-background-color-focus);color:var(--bcm-chip-color-focus)}.bcm-chip:not(.bcm-chip--disabled):active{background-color:var(--bcm-chip-background-color-active);color:var(--bcm-chip-color-active)}.bcm-chip--disabled{color:var(--bcm-chip-color-disabled);background-color:var(--bcm-chip-background-color-disabled)}.bcm-chip--avatar{padding-left:2px}.bcm-chip__type-dismissable-icon:hover{cursor:pointer;color:var(--bcm-chip-color-active)}.bcm-chip__size-small{font-size:10px;line-height:calc(10px + 8px)}.bcm-chip__size-small .bcm-avatar{width:14px;height:14px}.bcm-chip__size-small .bcm-chip--selected-icon{width:8px}.bcm-chip__size-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-chip__size-medium .bcm-avatar{width:16px;height:16px}.bcm-chip__size-medium .bcm-chip--selected-icon{width:10px}.bcm-chip__size-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-chip__size-large .bcm-avatar{width:18px;height:18px}.bcm-chip__size-large .bcm-chip--selected-icon{width:12px}";
+
+const BcmChip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmChipDismiss = index.createEvent(this, "bcm-chip-dismiss", 7);
+    this.bcmChipSelect = index.createEvent(this, "bcm-chip-select", 7);
+    this.bcmChipAddable = index.createEvent(this, "bcm-chip-addable", 7);
+    this.bcmChipSelectItem = index.createEvent(this, "bcm-chip-select-item", 7);
+    this._id = generate.Generate.UID();
+    this.type = "default";
+    this.size = "medium";
+    this.avatar = undefined;
+    this.icon = undefined;
+    this.disabled = undefined;
+    this.color = undefined;
+    this.selected = false;
+    this.value = undefined;
+    this.data = [];
+  }
+  // @ts-ignore
+  setColor() {
+    if (!this.color && !this.selected)
+      return;
+    const color = this.selected ? "indigo" : this.color; // Important: Find a solution for this in V3! ( selected ? this.color : "indigo" )
+    return {
+      "--bcm-chip-color": colorHelper.ColorHelper.dsColor(color + "-500"),
+      "--bcm-chip-color-hover": colorHelper.ColorHelper.dsColor(color + "-500"),
+      "--bcm-chip-color-focus": colorHelper.ColorHelper.dsColor(color + "-600"),
+      "--bcm-chip-color-active": colorHelper.ColorHelper.dsColor(color + "-700"),
+      "--bcm-chip-color-disabled": colorHelper.ColorHelper.dsColor("slate" + "-300"),
+      "--bcm-chip-background-color": colorHelper.ColorHelper.dsColor(color + "-100"),
+      "--bcm-chip-background-color-hover": colorHelper.ColorHelper.dsColor(color + "-200"),
+      "--bcm-chip-background-color-focus": colorHelper.ColorHelper.dsColor(color + "-300"),
+      "--bcm-chip-background-color-active": colorHelper.ColorHelper.dsColor(color + "-200"),
+      "--bcm-chip-background-color-disabled": colorHelper.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);
+  }
+  listSelectedItems(e) {
+    // To be added to v3
+    e.stopPropagation();
+    e.preventDefault();
+    if (e.detail) {
+      this.bcmChipSelectItem.emit(e.detail);
+      e.target.setClear();
+      this.data = this.data.filter(item => item.id !== e.detail.id);
+    }
+  }
+  render() {
+    const { type, size, avatar, disabled, color } = this;
+    const hostClasses = index$1.classnames("bcm-chip", `bcm-chip__type-${type}`, `bcm-chip__size-${size}`, {
+      "bcm-chip--disabled": disabled,
+      "bcm-chip--avatar": avatar,
+    });
+    return (index.h(index.Host, { class: hostClasses, tabindex: "0", disabled: disabled, style: this.setColor(), onClick: e => this.bcmChipSelect.emit(e) }, index.h("div", { class: index$1.classnames(this.selected ? "bcm-chip--selected-icon" : "tw-hidden tw-w-0") }, index.h("bcm-icon", { icon: "fal fa-check" })), avatar && index.h("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === "addable" && (index.h("span", { class: "bcm-chip__left" }, index.h("bcm-icon", { onClick: e => this.handleAddable(e), icon: "far fa-plus" }))), index.h("slot", null), type === "dismissable" && (index.h("span", { class: "bcm-chip__type-dismissable-icon" }, index.h("bcm-icon", { onClick: e => this.handleDismiss(e), icon: "fal fa-times" }))), this.data &&
+      this.data.length > 0 && ( // To be added to v3
+    index.h("bcm-list", { "onBcm-change": e => this.listSelectedItems(e), id: this._id + "-list", data: this.data, linkedComponent: this._id, searchable: true, highlight: true }))));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmChip.style = chipCss;
+
+exports.bcm_chip = BcmChip;

package/dist/cjs/bcm-collapse-group.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
+const index = require('./index-c591ecec.js');
 const utils = require('./utils-fc077139.js');
 
 const BcmCollapseGroup = class {

package/dist/cjs/bcm-collapse.cjs.entry.js

@@ -6,11 +6,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-const index$1 = require('./index-fdbf5226.js');
-const generate = require('./generate-21143214.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-require('./colors-e1d142ad.js');
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+const generate = require('./generate-225c30c9.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-e7a4d8ef.js');
+require('./colors-078851ec.js');
 
 const collapseCss = "@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-collapse{display:block;border:1px solid var(--bcm-color-grey-5)}.bcm-collapse ::-webkit-details-marker{display:none}.bcm-collapse__header{display:flex;align-items:center;color:var(--bcm-color-grey-9);padding:16px;background-color:var(--bcm-color-grey-2);border-bottom:1px solid var(--bcm-color-grey-5);cursor:default;user-select:none}.bcm-collapse__header:focus{outline:none}.bcm-collapse__header .collapse-icon{margin-right:8px;display:flex;align-items:center;justify-content:center}.bcm-collapse__body{padding:16px;background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8)}.bcm-collapse--borderless{border:none}.bcm-collapse--borderless:not(.bcm-collapse--no-border){border-bottom:1px solid var(--bcm-color-grey-5)}.bcm-collapse--borderless .bcm-collapse__header{border-bottom:none}.bcm-collapse--borderless .bcm-collapse__body{background-color:var(--bcm-color-grey-2);padding:0 40px 16px}.bcm-collapse:not(.bcm-collapse--open) .bcm-collapse__header{border-bottom:none}.bcm-collapse:not(:first-child) .collapse{border-top:none}.bcm-collapse.hidden{display:none}";
 

package/dist/cjs/bcm-color-input.cjs.entry.js

@@ -6,19 +6,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-require('./color-helper-d6d2028b.js');
+const index = require('./index-c591ecec.js');
+require('./color-helper-c3a819ea.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-21143214.js');
-require('./number-helper-08a7ff70.js');
-require('./string-helper-d681e5c7.js');
-require('./validators-6a0077a8.js');
+const generate = require('./generate-225c30c9.js');
+require('./number-helper-2b3bd61e.js');
+require('./string-helper-b89a9828.js');
+require('./validators-9e7f7995.js');
 require('./element-dragger-a8562f82.js');
-require('./bcm-ab921827.js');
+require('./bcm-03727f3b.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
-require('./colors-e1d142ad.js');
-require('./_commonjsHelpers-bd20f4c0.js');
+require('./colors-078851ec.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-e7a4d8ef.js');
 
 const BcmColorInput = class {
   constructor(hostRef) {

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

@@ -6,11 +6,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
+const index = require('./index-c591ecec.js');
 const elementDragger = require('./element-dragger-a8562f82.js');
-const index$1 = require('./index-fdbf5226.js');
+const index$1 = require('./index-95ae50d0.js');
 require('./utils-fc077139.js');
-require('./_commonjsHelpers-bd20f4c0.js');
+require('./_commonjsHelpers-ed84c3ca.js');
 
 const colorpickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{position:relative;margin:0 0 8px 0}.color-picker{position:relative;width:200px}.color-picker.open .picker{opacity:1;visibility:visible;transform:scale(1) translateY(56px)}.picker{width:300px;position:absolute;top:0;z-index:1;background-color:#ffffff;border:1px solid #F6F6F6;box-shadow:0px 3px 3.6px 0.4px rgba(0, 0, 0, 0.15);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px)}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.input{display:flex;cursor:pointer;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.color{position:relative;width:100%;height:166px;user-select:none}.color img{width:100%;height:100%;user-select:none;pointer-events:none}.color-indicator{position:absolute;top:0;left:0;width:17px;height:17px;border:1px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);transform:translate(0, 0);border-radius:100px;user-select:none;box-sizing:border-box;pointer-events:none}.colors{position:relative;width:100%;height:16px;margin-top:8px}.colors img{width:100%;user-select:none;pointer-events:none}.colors-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;user-select:none}.colors-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100px;user-select:none;box-sizing:border-box;pointer-events:none}.transparency{position:relative;width:100%;height:16px;margin-top:8px}.transparency-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;background:transparent none repeat center center/20px}.transparency-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100px;user-select:none;box-sizing:border-box}.colors-transparency{padding:16px}.active-color{display:flex;align-items:center;width:100%;height:30px}.active-color .color-thumb{width:100%;height:100%;background-color:transparent;border-radius:1px 0 0 1px}.active-color .color-text{font-size:14px;color:#656565;margin-left:8px}.icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:30px;color:var(--bcm-color-grey-6)}.color-input{border:none;width:100%;padding:10px;outline:none;-webkit-tap-highlight-color:transparent}";
 

package/dist/cjs/bcm-content.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
+const index = require('./index-c591ecec.js');
 
 const BcmContent = class {
   constructor(hostRef) {

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

@@ -6,15 +6,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-const index$1 = require('./index-fdbf5226.js');
-const isLoadDecorator = require('./is-load-decorator-137dded1.js');
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+const isLoadDecorator = require('./is-load-decorator-7575fbd2.js');
 const datetimeHelper = require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-21143214.js');
-const bcm = require('./bcm-ab921827.js');
+const generate = require('./generate-225c30c9.js');
+const bcm = require('./bcm-03727f3b.js');
 const utils = require('./utils-fc077139.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-require('./colors-e1d142ad.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-e7a4d8ef.js');
+require('./colors-078851ec.js');
 
 const datePickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-block;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
 
@@ -50,7 +51,7 @@ const BcmDatePicker = class {
     this.captionType = 'default';
     this.alignment = undefined;
     this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.placement = bcm.Bcm$1.Placement['bottom-start'];
+    this.placement = bcm.Bcm.Placement['bottom-start'];
     this.linkedComponent = undefined;
     this.clearable = false;
     this.stateStartDate = null;