bromcom-ui 2.3.8 → 2.3.12

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement, a as getAssetPath, c as createEvent } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
-import { g as getChilds } from './utils-e794f7cb.js';
+import { g as getChilds } from './utils-24f85563.js';
 
 const checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block}:host(.hidden){display:none}input{display:none}.svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}label .icon-checked{display:none}label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px}input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}input:checked+label .icon-checked{display:block}bcm-icon{filter:brightness(0) invert(1)}input[disabled]+label{cursor:not-allowed}input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}:host(.error) input:not([disabled])+label span.icon{border-color:var(--bcm-color-red-6)}.caption-area{margin-bottom:8px;min-height:20px;display:block}.input-caption{display:block}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.radio-button>span.icon{display:none}.radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
 
@@ -221,6 +221,7 @@ const BcmListbox = class {
   async resetCaption() {
     this.caption = this.captionCache;
     this.captionType = this.captionTypeCache;
+    this.captionError = null;
   }
   connectedCallback() {
     this.captionCache = this.caption;
@@ -257,7 +258,9 @@ const BcmListbox = class {
       if (this.treeview) {
         await customElements.whenDefined("bcm-treeview");
         const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-        await bcmTreeview.selected(id);
+        if (bcmTreeview) {
+          await bcmTreeview.selected(id);
+        }
       }
     }, 100);
   }
@@ -311,13 +314,15 @@ const BcmListbox = class {
         : this.treeview = false;
     }
     setTimeout(async () => {
-      if (this.treeview) {
+      if (this.treeview === true) {
         await customElements.whenDefined("bcm-treeview");
         const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-        await bcmTreeview.config(_config);
-        await bcmTreeview.selected(this.selectedId);
+        if (bcmTreeview) {
+          await bcmTreeview.config(_config);
+          await bcmTreeview.selected(this.selectedId);
+        }
       }
-    }, 100);
+    }, 300);
     if (_config['searchFields']) {
       if (Array.isArray(_config['searchFields'])) {
         this.searchFields = _config['searchFields'];
@@ -634,7 +639,10 @@ const BcmListbox = class {
    * @param item
    */
   itemRenderer(item) {
-    if (item.selected != true && this.selectedId == item[this.objectMapping['id']]) {
+    if (item[this.objectMapping['id']] && String(this.selectedId) == String(item[this.objectMapping['id']])) {
+      this.listboxItemSelected.emit(item);
+    }
+    if (item[this.objectMapping['selected']] && item[this.objectMapping['selected']] === true) {
       this.listboxItemSelected.emit(item);
     }
     // var checkedListCache = this.checkedList;
@@ -654,11 +662,8 @@ const BcmListbox = class {
     //         this.listboxChecked.emit(item[this.objectMapping['id']])
     //     }
     // }
-    if (item.selected != true && item[this.objectMapping['selected']]) {
-      this.listboxItemSelected.emit(item);
-    }
-    return (h("bcm-listbox-item", Object.assign({ _internal_id: this._internal_id, id: item[this.objectMapping['id']], text: item[this.objectMapping['text']] }, (item[this.objectMapping['icon']] && { icon: item[this.objectMapping['icon']] }), (item[this.objectMapping['avatar']] && { avatar: item[this.objectMapping['avatar']] }), (item[this.objectMapping['avatarName']] && { avatarName: item[this.objectMapping['avatarName']] }), (item[this.objectMapping['avatarImage']] && { avatarImage: item[this.objectMapping['avatarImage']] }), (item[this.objectMapping['secondaryText']] && { secondaryText: item[this.objectMapping['secondaryText']] }), (item[this.objectMapping['tooltipText']] && { tooltipText: item[this.objectMapping['tooltipText']] }), (item[this.objectMapping['checked']] && { checked: item[this.objectMapping['checked']] }), (item[this.objectMapping['disabled']] && { disabled: true }), (item[this.objectMapping['selected']] && this.checkboxes == false && { selected: item[this.objectMapping['selected']] }), (this.template && { template: this.template }), (this.checkboxes && { checkboxes: true }), (this.size && { size: this.size }), { itemObject: item, objectMapping: this.objectMapping }, (this.checkedList && this.checkedList.find(e => e == item[this.objectMapping['id']])) && { checked: true }, (this.updateCheckedList.length > 0 &&
-      ((this.updateCheckedList.find(e => e == item[this.objectMapping['id']])) ? { checked: true } : { checked: false })))));
+    return (h("bcm-listbox-item", Object.assign({ _internal_id: this._internal_id, id: item[this.objectMapping['id']], text: item[this.objectMapping['text']] }, (item[this.objectMapping['icon']] && { icon: item[this.objectMapping['icon']] }), (item[this.objectMapping['avatar']] && { avatar: item[this.objectMapping['avatar']] }), (item[this.objectMapping['avatarName']] && { avatarName: item[this.objectMapping['avatarName']] }), (item[this.objectMapping['avatarImage']] && { avatarImage: item[this.objectMapping['avatarImage']] }), (item[this.objectMapping['secondaryText']] && { secondaryText: item[this.objectMapping['secondaryText']] }), (item[this.objectMapping['tooltipText']] && { tooltipText: item[this.objectMapping['tooltipText']] }), (item[this.objectMapping['checked']] === true && { checked: item[this.objectMapping['checked']] }), (item[this.objectMapping['disabled']] === true && { disabled: true }), (item[this.objectMapping['selected']] === true && this.checkboxes == false && { selected: item[this.objectMapping['selected']] }), (this.template && { template: this.template }), (this.checkboxes && { checkboxes: true }), (this.size && { size: this.size }), { itemObject: item, objectMapping: this.objectMapping }, (this.checkedList && this.checkedList.find(e => e === item[this.objectMapping['id']])) && { checked: true }, (this.updateCheckedList.length > 0 &&
+      ((this.updateCheckedList.find(e => e === item[this.objectMapping['id']])) ? { checked: true } : { checked: false })))));
   }
   /**
    * @desc
@@ -907,7 +912,7 @@ const BcmListbox = class {
     this.onFocus = focusEvent;
   }
   render() {
-    const { innerComponent, label, required, treeview, searchText, checkboxes, search, size, fullWidth, total, indeterminateState, checked, checklist, searchData, searchFields, _flex, returnField, searchSub, infoFooter, showSearch, noCaption, caption, captionType } = this;
+    const { innerComponent, label, required, treeview, searchText, checkboxes, search, size, fullWidth, total, indeterminateState, checked, checklist, searchData, searchFields, _flex, returnField, searchSub, infoFooter, showSearch, noCaption, caption, captionError, captionType } = this;
     const bcmListbox = classnames('bcm-listbox', {
       'error': captionType == 'error' ? true : false,
       'full-width': fullWidth,
@@ -960,7 +965,9 @@ const BcmListbox = class {
     // ( this.empty || total == 0 ) && (
     h("div", { id: "empty", class: "empty" }, h("bcm-empty", { size: "small", text: "No Data" }))
     // )
-    ), infoFooter == true && (h("div", { class: "bcm-listbox-footer" }, h("bcm-text", { scale: "size-1", color: "grey-8" }, checklist.length > 0 && (' ( ' + checklist.length + ' selected ) '), "Total ", h("span", { id: "in-search" }), " ", h("span", { id: "in-total" }, total), " items found."))))), !noCaption && (h("div", { class: "caption-area" }, caption && h("span", { class: captionClasses }, " ", caption, " ")))));
+    ), infoFooter == true && (h("div", { class: "bcm-listbox-footer" }, h("bcm-text", { scale: "size-1", color: "grey-8" }, checklist.length > 0 && (' ( ' + checklist.length + ' selected ) '), "Total ", h("span", { id: "in-search" }), " ", h("span", { id: "in-total" }, total), " items found."))))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+      ? h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -1039,10 +1046,10 @@ const BcmListboxItem = class {
   }
   componentDidLoad() {
     if (!this.disabled) {
-      if (this.selected == true) {
+      if (this.selected === true) {
         this.listboxItemSelected.emit(this.itemObject);
       }
-      this.checkboxes && (this.checked == true && (this.listboxChecked.emit(this._id)));
+      this.checkboxes && (this.checked === true && (this.listboxChecked.emit(this._id)));
     }
   }
   /**

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
 import { C as ColorPalette } from './colors-7c7b35e9.js';
-import { e as extractColor } from './utils-e794f7cb.js';
+import { e as extractColor } from './utils-24f85563.js';
 
 /**
  * 'color' prop predefined values
@@ -101,7 +101,7 @@ const BcmCheckbox = class {
       };
   }
   render() {
-    const { disabled, checked, readOnly, name, handleChange, required, caption, captionType, noCaption, buttonStyle, size, optionType } = this;
+    const { disabled, checked, readOnly, name, handleChange, required, caption, captionError, captionType, noCaption, buttonStyle, size, optionType } = this;
     const hostClasses = classnames(this.hidden ? 'hidden' : null, {
       'error': captionType == 'error' ? true : false
     });
@@ -115,7 +115,9 @@ const BcmCheckbox = class {
     });
     var fontColor = extractColor(ColorPalette, ColorProps[this.color] + '-6');
     var style = "<style>.radio-button:not(.checked):hover{color: " + fontColor + "} </style>";
-    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly, onChange: handleChange, ref: el => (this.inputElement = el) }), optionType == 'button' && (h("span", { innerHTML: style })), h("label", { title: optionType == 'button' ? this.el.innerHTML : null, htmlFor: name, class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, h("span", { class: "icon" }, h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), h("span", { class: "slot" }, h("slot", null))), !noCaption && (h("div", { class: "caption-area" }, caption && h("span", { class: captionClasses }, " ", caption, " ")))));
+    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly, onChange: handleChange, ref: el => (this.inputElement = el) }), optionType == 'button' && (h("span", { innerHTML: style })), h("label", { title: optionType == 'button' ? this.el.innerHTML : null, htmlFor: name, class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, h("span", { class: "icon" }, h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), h("span", { class: "slot" }, h("slot", null))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+      ? h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
   }
   get el() { return getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, a as getAssetPath, H as Host, g as getElement } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
-import './utils-e794f7cb.js';
-import { E as ElementDragger, D as DragDirections } from './element-dragger-69122b76.js';
+import './utils-24f85563.js';
+import { E as ElementDragger, D as DragDirections } from './element-dragger-9c68536d.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}: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:100%;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:100%;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:100%;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}";
 
@@ -389,12 +389,14 @@ const BcmColorPicker = class {
     this._setColor(color);
   }
   render() {
-    const { label, required, noCaption, caption, captionType } = this;
+    const { label, required, noCaption, caption, captionError, captionType } = this;
     const classes = classnames('color-picker', {
       open: this.open
     });
     const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    return (h(Host, null, h("div", { class: classes, onClick: () => this.handleClick() }, label && h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), " "), h("div", { class: "input" }, h("div", { class: "active-color" }, h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), h("span", { class: "icon", slot: "suffix" }, h("bcm-icon", { icon: "bg-colors" }))), !noCaption && (h("div", { class: "caption-area" }, caption && h("span", { class: captionClasses }, " ", caption, " "))), h("div", { class: "picker" }, h("div", { class: "input" }, h("input", { type: "text", class: "color-input", maxlength: "7", ref: el => (this.inputElement = el), onKeyUp: (e) => this.handleColorInputKeyUp(e) })), h("div", { class: "color", onMouseDown: () => this.mouseState = 'down', style: { backgroundColor: this.hsvtorgb({ h: this.h, s: this.s, v: this.v }).hex }, ref: el => (this.colorElement = el) }, h("img", { src: getAssetPath('./static/color.svg') }), h("div", { class: "color-indicator", ref: el => (this.colorIndicatorElement = el) })), h("div", { class: "colors-transparency" }, h("div", { class: "colors", onMouseDown: () => this.mouseState = 'down', ref: el => (this.colorsElement = el) }, h("div", { class: "colors-holder" }, h("img", { src: getAssetPath('./static/colors.svg') })), h("div", { class: "colors-indicator", ref: el => (this.colorsIndicatorElement = el) })))))));
+    return (h(Host, null, h("div", { class: classes, onClick: () => this.handleClick() }, label && h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), " "), h("div", { class: "input" }, h("div", { class: "active-color" }, h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), h("span", { class: "icon", slot: "suffix" }, h("bcm-icon", { icon: "bg-colors" }))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+      ? h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && h("span", { class: captionClasses }, " ", caption, " "))), h("div", { class: "picker" }, h("div", { class: "input" }, h("input", { type: "text", class: "color-input", maxlength: "7", ref: el => (this.inputElement = el), onKeyUp: (e) => this.handleColorInputKeyUp(e) })), h("div", { class: "color", onMouseDown: () => this.mouseState = 'down', style: { backgroundColor: this.hsvtorgb({ h: this.h, s: this.s, v: this.v }).hex }, ref: el => (this.colorElement = el) }, h("img", { src: getAssetPath('./static/color.svg') }), h("div", { class: "color-indicator", ref: el => (this.colorIndicatorElement = el) })), h("div", { class: "colors-transparency" }, h("div", { class: "colors", onMouseDown: () => this.mouseState = 'down', ref: el => (this.colorsElement = el) }, h("div", { class: "colors-holder" }, h("img", { src: getAssetPath('./static/colors.svg') })), h("div", { class: "colors-indicator", ref: el => (this.colorsIndicatorElement = el) })))))));
   }
   static get assetsDirs() { return ["static"]; }
   get el() { return getElement(this); }

package/dist/esm/bcm-datetime-picker_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
-import { b as delay } from './utils-e794f7cb.js';
-import { D as DragDirections, E as ElementDragger } from './element-dragger-69122b76.js';
+import { d as delay } from './utils-24f85563.js';
+import { D as DragDirections, E as ElementDragger } from './element-dragger-9c68536d.js';
 import { p as popoverPlacement, a as popoverBoxPlacement } from './popover-placement-a4ab1587.js';
 
 var Months;

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
-import { g as getChilds } from './utils-e794f7cb.js';
+import { g as getChilds } from './utils-24f85563.js';
 
 const dropdownCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:fit-content}:host(.hidden){display:none}*{box-sizing:border-box}::-webkit-details-marker{display:none}summary{display:inline-block}.items-container{--group-shadow:0px 4px 4px rgba(0, 0, 0, 0.25)}details{position:relative}.items-container{min-width:150px;transition:height 0.3s ease;position:absolute;left:0;transition:height 0.3s ease;background-color:#ffffff;border-radius:2px;box-shadow:var(--group-shadow);z-index:10000}";
 

package/dist/esm/bcm-list-item.entry.js

@@ -0,0 +1,66 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
+import { c as classnames } from './index-e58a2d48.js';
+
+const listItemCss = "@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}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer}.list-item.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.list-item.selected{color:var(--bcm-color-prime-blue-6)}.list-item.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6)}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-prime-blue-6)}";
+
+const BcmListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.listSelected = createEvent(this, "bcm-list-selected", 7);
+    this.size = 'medium';
+    this.hidden = false;
+    this.disabled = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.template = null;
+    this._uniq_id = (Math.random() * 4).toString(16).replace('.', '');
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.itemObject = null;
+    this.selected = false;
+  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  async select() {
+    if (!this.disabled) {
+      if (this.itemObject) {
+        this.listSelected.emit(this.itemObject);
+      }
+      else {
+        this.listSelected.emit(this._id);
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    if (!this.disabled) {
+      if (this.itemObject) {
+        this.listSelected.emit(this.itemObject);
+      }
+      else {
+        this.listSelected.emit(this._id);
+      }
+    }
+  }
+  render() {
+    const { size, disabled, selected, hidden } = this;
+    const classes = classnames('list-item', size, {
+      'disabled': disabled,
+      'selected': selected,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const hostClasses = classnames(hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses, onClick: () => this.handleClick() }, h("div", { class: classes }, this.text ? this.text : h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+BcmListItem.style = listItemCss;
+
+export { BcmListItem as bcm_list_item };

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

@@ -0,0 +1,272 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
+import { c as classnames } from './index-e58a2d48.js';
+import { g as getChilds, b as dropInComponent } from './utils-24f85563.js';
+
+const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block;opacity:0;width:256px;height:256px;background-color:#ffffff;overflow-y:auto;padding:4px;border:1px solid #D9D9D9;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;transition:height 1s ease 1s;z-index:-999;position:absolute;top:-10000;left:-10000}:host(.full-width){width:100%}:host(.flex){width:100%;height:100%}:host(.show){opacity:1;z-index:100000}.spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;background-color:#ffffff}.spinner.show{display:flex}";
+
+const BcmList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.listSelected = createEvent(this, "bcm-list-selected", 7);
+    this.isRendered = false;
+    this.linkedElementWidth = "100%";
+    this.bodyStyleOverflow = '';
+    this.objectMapping = {
+      'id': "id",
+      'text': "text",
+      'selected': "selected",
+    };
+    this.size = 'medium';
+    this.hidden = false;
+    this.fullWidth = false;
+    this.flex = false;
+    this.items = [];
+    this.isShow = true;
+    this.linkedComponent = null;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.value = null;
+    this.width = "100%";
+    this.height = "256px";
+    this.minWidth = null;
+    this.maxWidth = null;
+    this.configured = false;
+  }
+  connectedCallback() {
+    this.bodyStyleOverflow = document.querySelector("body").style.overflow;
+    if (this.linkedComponent) {
+      this.isShow = false;
+      this.handleLinkedComponent();
+    }
+    const slot = this.el.shadowRoot.querySelectorAll('bcm-list-item');
+    if (slot) {
+      slot.forEach(el => {
+        if (String(el.tagName).toLowerCase() === 'bcm-list-item') {
+          el.setAttribute("_internal_id", this._internal_id);
+        }
+      });
+    }
+  }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  /**
+   * @desc
+   */
+  async hide() {
+    this.isShow = false;
+    document.querySelector("body").style.overflow = this.bodyStyleOverflow;
+  }
+  /**
+   * @desc
+   */
+  async show() {
+    this.isShow = true;
+    if (this.items && !this.isRendered) {
+      this.isRendered = true;
+      this.processData(this.items);
+    }
+    this.handleLinkedComponent();
+  }
+  /**
+   * @desc
+   */
+  async toggle() {
+    this.isShow = !this.isShow;
+  }
+  /**
+   * @desc
+   */
+  async config(_config) {
+    if (_config['linkedComponent']) {
+      typeof _config['linkedComponent'] == 'string'
+        ? this.linkedComponent = _config['linkedComponent']
+        : this.linkedComponent = null;
+    }
+    if (_config['mapping']) {
+      if (_config['mapping']['id']) {
+        this.objectMapping['id'] = _config['mapping']['id'];
+      }
+      if (_config['mapping']['text']) {
+        this.objectMapping['text'] = _config['mapping']['text'];
+      }
+      if (_config['mapping']['selected']) {
+        this.objectMapping['selected'] = _config['mapping']['selected'];
+      }
+    }
+    this.configured = true;
+    return _config;
+  }
+  /**
+   * @desc
+   */
+  async setData(_data = []) {
+    if (_data) {
+      typeof _data == 'string'
+        ? this.items = JSON.parse(_data)
+        : this.items = _data;
+      this.isRendered = false;
+    }
+  }
+  processData(_data) {
+    this.handleLoading(true);
+    const list = this.el.shadowRoot.querySelector('.list');
+    list.innerHTML = "";
+    this.selectedId = null;
+    this.value = null;
+    if (_data.length > 0) {
+      _data.forEach((item, index) => {
+        setTimeout(() => {
+          const element = document.createElement("bcm-list-item");
+          element.setAttribute("_internal_id", this._internal_id);
+          element.setAttribute("text", item[this.objectMapping['text']]);
+          element.setAttribute("id", item[this.objectMapping['id']]);
+          if (item[this.objectMapping['selected']]) {
+            element.select();
+          }
+          element.itemObject = item;
+          list.appendChild(element);
+          if (_data.length == index + 1) {
+            this.handleLoading(false);
+          }
+        }, 100);
+      });
+    }
+    else {
+      this.handleLoading(false);
+      // console.log("no data")
+    }
+  }
+  handleLoading(show = false) {
+    const spinner = this.el.shadowRoot.querySelector('.spinner');
+    if (show == true) {
+      spinner.classList.add("show");
+    }
+    else {
+      spinner.classList.remove("show");
+    }
+    this.handleLinkedComponent();
+  }
+  /**
+   * @desc
+   */
+  handleClick(event) {
+    if (!this.el.contains(event.target)
+      || (event["path"]
+        && event["path"].filter((input) => input['_internal_id'] == this._internal_id)[0]
+        && event["path"].filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0])) {
+      if (this.isShow) {
+        this.hide();
+      }
+    }
+  }
+  scrollEvent(event) {
+    if (!this.el.contains(event.target)) {
+      if (this.isShow) {
+        this.hide();
+      }
+    }
+  }
+  onmousemove(e) {
+    if (this.el.contains(e.target)) {
+      if (document.querySelector("body").style.overflow != "hidden") {
+        document.querySelector("body").style.overflow = "hidden";
+      }
+    }
+    else {
+      if (document.querySelector("body").style.overflow != this.bodyStyleOverflow) {
+        document.querySelector("body").style.overflow = this.bodyStyleOverflow;
+      }
+    }
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  handleListboxClearSelecteds(event) {
+    if (this.isInternal(event) || (!this.isInternal(event) && this.isInternalSlot(event))) {
+      var selectedItem = null;
+      if (selectedItem = getChilds(this.el, "bcm-list-item").find(x => x.id === this.selectedId)) {
+        selectedItem.selected = false;
+      }
+      if (selectedItem = this.el.shadowRoot.getElementById(this.getItemId(event))) {
+        this.selectedId = this.getItemId(event);
+        selectedItem.selected = true;
+      }
+      if (this.isInternalSlot(event)) {
+        if (selectedItem = event.path[0]) {
+          this.selectedId = event.path[0].id;
+          selectedItem.selected = true;
+        }
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  getItemId(event) {
+    const detect = event.path
+      && event.path[0]
+      && event.path[0].attributes
+      && event.path[0].attributes['id']
+      && event.path[0].attributes['id'].value;
+    return detect;
+  }
+  /**
+   * @desc
+   */
+  isInternalSlot(event) {
+    const detect = event.path
+      && event.path[0]
+      && String(event.path[0].tagName).toLowerCase() === 'bcm-list-item'
+      && this.el.contains(event.path[0]);
+    return detect;
+  }
+  /**
+   * @desc
+   */
+  isInternal(event) {
+    const detect = event.path
+      && event.path[0]
+      && event.path[0].attributes
+      && event.path[0].attributes['_internal_id']
+      && event.path[0].attributes['_internal_id'].value;
+    return detect == this._internal_id;
+  }
+  /**
+   * @desc
+   */
+  handleLinkedComponent() {
+    dropInComponent(this.el, "#" + this.linkedComponent);
+    var element = null;
+    if (this.width == "100%" && (element = document.querySelector("#" + this.linkedComponent))) {
+      this.linkedElementWidth = element.clientWidth + "px";
+    }
+  }
+  render() {
+    const classes = classnames('list-container', this.size);
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'show': this.isShow,
+      'full-width': this.fullWidth
+    });
+    // const customStyle = {
+    //     'width': this.width 
+    // }
+    var customStyle = {
+      'height': "auto",
+      'max-height': this.height,
+      'width': this.minWidth != null || this.maxWidth != null ? 'max-content' :
+        this.width != "100%" ? this.width : this.linkedElementWidth,
+      'min-width': this.minWidth != null ? this.minWidth == "100%" || this.minWidth == "auto" ? this.linkedElementWidth : this.minWidth : null,
+      'max-width': this.maxWidth != null ? this.maxWidth == "100%" || this.maxWidth == "auto" ? this.linkedElementWidth : this.maxWidth : null,
+    };
+    return (h(Host, { class: hostClasses, style: customStyle }, h("div", { class: classes }, h("slot", null), h("div", { class: "list" }), h("div", { class: "spinner" }, h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" })))));
+  }
+  get el() { return getElement(this); }
+};
+BcmList.style = listCss;
+
+export { BcmList as bcm_list };