bromcom-ui 2.9.0-rc.4 → 2.9.0-rc.6

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ddfd6d8f.js');
 const index$1 = require('./index-fdbf5226.js');
-const generate = require('./generate-d246df02.js');
+const generate = require('./generate-d3f8c970.js');
 require('./_commonjsHelpers-bd20f4c0.js');
 require('./colors-e1d142ad.js');
 

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

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ddfd6d8f.js');
-const generate = require('./generate-d246df02.js');
+const generate = require('./generate-d3f8c970.js');
 const bcm = require('./bcm-ab921827.js');
 const index$1 = require('./index-fdbf5226.js');
 const stringHelper = require('./string-helper-d681e5c7.js');

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

@@ -8,8 +8,8 @@ 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-d246df02.js');
+const colorHelper = require('./color-helper-7ab15732.js');
+const generate = require('./generate-d3f8c970.js');
 const stringHelper = require('./string-helper-d681e5c7.js');
 const slotTemplate = require('./slot-template-d70ea082.js');
 require('./_commonjsHelpers-bd20f4c0.js');

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

@@ -6,12 +6,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
+const index$1 = require('./index-ddfd6d8f.js');
 const index$2 = require('./index-fdbf5226.js');
-const generate = require('./generate-d246df02.js');
+const generate = require('./generate-d3f8c970.js');
 const bcm = require('./bcm-ab921827.js');
 const utils = require('./utils-fc077139.js');
-const index$1 = require('./index-4506fcd7.js');
+const index = require('./index-4506fcd7.js');
 const labelTemplate = require('./label-template-4d5f99a5.js');
 const isLoadDecorator = require('./is-load-decorator-137dded1.js');
 require('./_commonjsHelpers-bd20f4c0.js');
@@ -19,13 +19,7 @@ require('./colors-e1d142ad.js');
 require('./slot-template-d70ea082.js');
 require('./string-helper-d681e5c7.js');
 
-const CheckboxGroupTemplate = ({ customStyle, groupContainerClasses, onBcmSelect, items }) => {
-  return (index.h("div", { class: groupContainerClasses, style: customStyle }, items.childs && items.childs.map((checkbox) => {
-    return (index.h("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (onBcmSelect(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
-  })));
-};
-
-const { state } = index$1.createStore({
+const { state } = index.createStore({
   group: new Map(),
   allChecked: true,
   allUnchecked: true,
@@ -218,6 +212,12 @@ const checkBoxGroupState = {
   changeIndeterminate,
 };
 
+const CheckboxGroupTemplate = ({ customStyle, groupContainerClasses, onBcmSelect, items }) => {
+  return (index$1.h("div", { class: groupContainerClasses, style: customStyle }, items.childs && items.childs.map((checkbox) => {
+    return (index$1.h("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (onBcmSelect(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
+  })));
+};
+
 const groupCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-checkbox-group{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-bottom:8px}.bcm-checkbox-group.hidden{display:none}.bcm-checkbox-group__container{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;width:100%}.bcm-checkbox-group__container.full-width{max-width:100%}.bcm-checkbox-group__container.vertical{gap:8px;flex-direction:column}.bcm-checkbox-group__container.button{gap:unset}.bcm-checkbox-group__container.indeterminate{padding-top:16px;margin-top:16px;border-top:1px solid #efefef}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -232,9 +232,9 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const BcmCheckboxGroup = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.change = index.createEvent(this, "bcm-change", 7);
-    this.groupCheckedList = index.createEvent(this, "bcm-group-checked-list", 7);
+    index$1.registerInstance(this, hostRef);
+    this.change = index$1.createEvent(this, "bcm-change", 7);
+    this.groupCheckedList = index$1.createEvent(this, "bcm-group-checked-list", 7);
     this._id = generate.Generate.UID();
     this.direction = bcm.Bcm$1.Direction.horizontal;
     this.items = [];
@@ -399,11 +399,11 @@ const BcmCheckboxGroup = class {
       hidden,
       'full-width': fullWidth
     });
-    return (index.h(index.Host, { class: bcmChechboxGroup }, index.h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, index.h("slot", null)), index.h("div", { class: "bcm-checkbox-group__label" }, label &&
-      index.h("div", null, index.h(labelTemplate.LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))), indeterminate &&
-      index.h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), index.h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
+    return (index$1.h(index$1.Host, { class: bcmChechboxGroup }, index$1.h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, index$1.h("slot", null)), index$1.h("div", { class: "bcm-checkbox-group__label" }, label &&
+      index$1.h("div", null, index$1.h(labelTemplate.LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))), indeterminate &&
+      index$1.h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), index$1.h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
   }
-  get el() { return index.getElement(this); }
+  get el() { return index$1.getElement(this); }
   static get watchers() { return {
     "items": ["handleItemsChange"]
   }; }

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ddfd6d8f.js');
 const index$1 = require('./index-fdbf5226.js');
-const generate = require('./generate-d246df02.js');
+const generate = require('./generate-d3f8c970.js');
 const bcm = require('./bcm-ab921827.js');
 const utils = require('./utils-fc077139.js');
 require('./_commonjsHelpers-bd20f4c0.js');

package/dist/cjs/{bcm-checkbox_2.cjs.entry.js → bcm-checkbox.cjs.entry.js}

@@ -9,11 +9,11 @@ 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-d246df02.js');
+const generate = require('./generate-d3f8c970.js');
 const slotTemplate = require('./slot-template-d70ea082.js');
 const bcm = require('./bcm-ab921827.js');
 const utils = require('./utils-fc077139.js');
-const colorHelper = require('./color-helper-d6d2028b.js');
+const colorHelper = require('./color-helper-7ab15732.js');
 const isLoadDecorator = require('./is-load-decorator-137dded1.js');
 require('./_commonjsHelpers-bd20f4c0.js');
 require('./colors-e1d142ad.js');
@@ -179,15 +179,4 @@ __decorate([
 ], BcmCheckbox.prototype, "el", void 0);
 BcmCheckbox.style = checkboxCss;
 
-const BcmTypography = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
-  get el() { return index.getElement(this); }
-};
-
 exports.bcm_checkbox = BcmCheckbox;
-exports.bcm_typography = BcmTypography;

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

@@ -0,0 +1,128 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ddfd6d8f.js');
+require('./color-helper-7ab15732.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-d3f8c970.js');
+require('./number-helper-66fe9479.js');
+require('./string-helper-d681e5c7.js');
+require('./validators-aa39e3ec.js');
+require('./element-dragger-a8562f82.js');
+const bcm = require('./bcm-ab921827.js');
+const captionTemplate = require('./caption-template-8d099fd6.js');
+const index$1 = require('./index-fdbf5226.js');
+require('./types-cc4adee7.js');
+const labelTemplate = require('./label-template-4d5f99a5.js');
+require('./types-7523fd99.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./colors-e1d142ad.js');
+require('./_commonjsHelpers-bd20f4c0.js');
+require('./slot-template-d70ea082.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.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,90 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ddfd6d8f.js');
+const index$1 = require('./index-fdbf5226.js');
+const colorHelper = require('./color-helper-7ab15732.js');
+const generate = require('./generate-d3f8c970.js');
+require('./_commonjsHelpers-bd20f4c0.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./colors-e1d142ad.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.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ddfd6d8f.js');
 const index$1 = require('./index-fdbf5226.js');
-const generate = require('./generate-d246df02.js');
+const generate = require('./generate-d3f8c970.js');
 require('./_commonjsHelpers-bd20f4c0.js');
 require('./colors-e1d142ad.js');
 

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

@@ -7,12 +7,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ddfd6d8f.js');
-require('./color-helper-d6d2028b.js');
+require('./color-helper-7ab15732.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-d246df02.js');
-require('./number-helper-26df0c91.js');
+const generate = require('./generate-d3f8c970.js');
+require('./number-helper-66fe9479.js');
 require('./string-helper-d681e5c7.js');
-require('./validators-095e7611.js');
+require('./validators-aa39e3ec.js');
 require('./element-dragger-a8562f82.js');
 require('./bcm-ab921827.js');
 require('./colors-56282b00.js');