bromcom-ui 2.3.57 → 2.3.58

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

@@ -64,6 +64,69 @@ const BcmBadge = class {
 };
 BcmBadge.style = dividerCss;
 
+/**
+ * 'image' prop predefined values
+ */
+var ImageProps;
+(function (ImageProps) {
+  ImageProps["default"] = "default.svg";
+  ImageProps["simple"] = "simple.svg";
+})(ImageProps || (ImageProps = {}));
+/**
+ * 'size' prop predefined values
+ */
+var SizeProps;
+(function (SizeProps) {
+  SizeProps["small"] = "small";
+  SizeProps["medium"] = "medium";
+  SizeProps["big"] = "big";
+})(SizeProps || (SizeProps = {}));
+
+const emptyCss = "@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}:host(.hidden){display:none}.empty.small{max-width:100px}.empty.medium{max-width:140px}.empty.big{max-width:200px}.text{font-size:14px;color:var(--bcm-color-grey-8)}.content{text-align:center}img{max-width:100%}";
+
+const BcmEmpty = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Component Properties
+     */
+    this._image = ImageProps.default;
+    this.size = SizeProps.medium;
+    this.hidden = false;
+  }
+  /**
+  * @ComponentMethod
+  */
+  componentWillLoad() {
+    this.parseImage(this._image);
+  }
+  /**
+  * @desc
+  * @param newValue
+  * @returns {void}
+  */
+  parseImage(newValue) {
+    if (newValue) {
+      newValue in ImageProps
+        ? this.image = ImageProps[newValue]
+        : this.image = ImageProps.default;
+    }
+  }
+  render() {
+    const classes = index$1.classnames('empty', {
+      [this.size]: this.size
+    });
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("img", { src: index.getAssetPath(`./static/${this.image}`) }), index.h("div", { class: "content" }, this.text && (index.h("span", { class: "text" }, this.text)), index.h("slot", null)))));
+  }
+  static get assetsDirs() { return ["static"]; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "_image": ["parseImage"]
+  }; }
+};
+BcmEmpty.style = emptyCss;
+
 const searchCss = "@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}:host(.hidden){display:none}";
 
 const lowercase = (str) => str.toLowerCase();
@@ -224,4 +287,5 @@ BcmSearch.style = searchCss;
 
 exports.bcm_checkbox_lite = BcmCheckboxLite;
 exports.bcm_divider = BcmBadge;
+exports.bcm_empty = BcmEmpty;
 exports.bcm_search = BcmSearch;

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

@@ -399,7 +399,7 @@ const BcmColorPicker = class {
       open: this.open
     });
     const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
-    return (index.h(index.Host, null, index.h("div", { class: classes, onClick: () => this.handleClick() }, label && index.h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), " "), index.h("div", { class: "input" }, index.h("div", { class: "active-color" }, index.h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), index.h("span", { class: "icon", slot: "suffix" }, index.h("bcm-icon", { icon: "bg-colors" }))), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
+    return (index.h(index.Host, null, index.h("div", { class: classes, onClick: () => this.handleClick() }, label && index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), index.h("div", { class: "input" }, index.h("div", { class: "active-color" }, index.h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), index.h("span", { class: "icon", slot: "suffix" }, index.h("bcm-icon", { icon: "bg-colors" }))), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
       ? index.h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && index.h("span", { class: captionClasses }, " ", caption, " "))), index.h("div", { class: "picker" }, index.h("div", { class: "input" }, index.h("input", { type: "text", class: "color-input", maxlength: "7", ref: el => (this.inputElement = el), onKeyUp: (e) => this.handleColorInputKeyUp(e) })), index.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) }, index.h("img", { src: index.getAssetPath('./static/color.svg') }), index.h("div", { class: "color-indicator", ref: el => (this.colorIndicatorElement = el) })), index.h("div", { class: "colors-transparency" }, index.h("div", { class: "colors", onMouseDown: () => this.mouseState = 'down', ref: el => (this.colorsElement = el) }, index.h("div", { class: "colors-holder" }, index.h("img", { src: index.getAssetPath('./static/colors.svg') })), index.h("div", { class: "colors-indicator", ref: el => (this.colorsIndicatorElement = el) })))))));
   }

package/dist/cjs/{bcm-datetime-picker_2.cjs.entry.js → bcm-datetime-picker.cjs.entry.js}

@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ce8878ec.js');
 const index$1 = require('./index-2f62bdaf.js');
-const utils = require('./utils-60414768.js');
+require('./utils-60414768.js');
 const elementDragger = require('./element-dragger-4a91c708.js');
-const popoverPlacement = require('./popover-placement-ac023521.js');
 
 var Months;
 (function (Months) {
@@ -1231,137 +1230,4 @@ const BcmDatetimePicker = class {
 };
 BcmDatetimePicker.style = datetimePickerCss;
 
-const tooltipCss = "@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-flex}:host(.hidden){display:none}:host(:focus){outline:none}.tooltip{position:relative;}.tooltip .box{position:absolute;display:none;box-sizing:border-box;background-color:#262626;border:1px solid #262626;border-radius:2px;z-index:10700;width:max-content;padding:4px 8px;color:var(--bcm-color-grey-1)}.tooltip::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700}.tooltip.open .box,.tooltip.open::after{display:block}.tooltip.top .box{bottom:100%;margin-bottom:8px}.tooltip.top::after{bottom:100%;margin-bottom:-4px;border-color:#262626 transparent transparent transparent}.tooltip.bottom .box{top:100%;margin-top:8px}.tooltip.bottom::after{top:100%;margin-top:-4px;border-color:transparent transparent #262626 transparent}.tooltip.left .box{right:100%;margin-right:8px}.tooltip.left::after{right:100%;margin-right:-4px;border-color:transparent transparent transparent #262626}.tooltip.right .box{left:100%;margin-left:8px}.tooltip.right::after{left:100%;margin-left:-4px;border-color:transparent #262626 transparent transparent}.tooltip.top.center .box,.tooltip.bottom.center .box{left:50%;transform:translateX(-50%)}.tooltip.top.center::after,.tooltip.bottom.center::after{left:50%;transform:translateX(-50%)}.tooltip.top.start .box,.tooltip.bottom.start .box{left:0}.tooltip.top.start::after,.tooltip.bottom.start::after{left:8px}.tooltip.top.end .box,.tooltip.bottom.end .box{right:0}.tooltip.top.end::after,.tooltip.bottom.end::after{right:8px}.tooltip.left.center .box,.tooltip.right.center .box{top:50%;transform:translateY(-50%)}.tooltip.left.center::after,.tooltip.right.center::after{top:50%;transform:translateY(-50%)}.tooltip.left.start .box,.tooltip.right.start .box{top:0}.tooltip.left.start::after,.tooltip.right.start::after{top:4px}.tooltip.left.end .box,.tooltip.right.end .box{bottom:0}.tooltip.left.end::after,.tooltip.right.end::after{bottom:4px}";
-
-const BcmTooltip = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.onShow = index.createEvent(this, "bcm-show", 7);
-    this.onHide = index.createEvent(this, "bcm-hide", 7);
-    this.placement = 'top';
-    this.trigger = 'hover';
-    this.hidden = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-  }
-  async show() {
-    // Prevent subsequent calls
-    if (this.open) {
-      return;
-    }
-    this.open = true;
-    this.onShow.emit();
-  }
-  async hide() {
-    // Prevent subsequent calls
-    if (!this.open) {
-      return;
-    }
-    this.open = false;
-    this.onHide.emit();
-  }
-  handleClickOutside(e) {
-    if (!this.host.contains(e.target)) {
-      if (this.open) {
-        this.open = false;
-      }
-    }
-  }
-  async handleOpen() {
-    await this.createElement();
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement.popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-      tooltipBox.classList.toggle("open");
-    }
-  }
-  async createElement() {
-    var target = this.host.getBoundingClientRect();
-    var placementString = String([...this.getPlacement()]).replace(',', ' ');
-    var element;
-    if (!document.getElementById("box" + this._internal_id)) {
-      element = document.createElement("bcm-tooltip-box");
-      element.setAttribute("id", "box" + this._internal_id);
-    }
-    else {
-      element = document.getElementById("box" + this._internal_id);
-    }
-    element.setAttribute("message", this.message);
-    // element.setAttribute("placement", placementString)
-    element.style.position = "absolute";
-    // element.style.top = target.top + "px"
-    // element.style.left = (target.left + (target.width / 2)) + "px"
-    element.setAttribute("placement", placementString);
-    // element.style.zIndex = "999999999"
-    document.body.appendChild(element);
-    await utils.delay(50);
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement.popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-    }
-    element.style.top = popoverPlacement.popoverBoxPlacement(this.placement, target)[0] + "px";
-    element.style.left = popoverPlacement.popoverBoxPlacement(this.placement, target)[1] + "px";
-  }
-  hasTrigger(trigger) {
-    return this.trigger === trigger;
-  }
-  getPlacement() {
-    const placements = this.placement.split('-');
-    if (placements.length === 1) {
-      placements.push('center');
-    }
-    return placements;
-  }
-  /*
-      Trigger Functions
-  */
-  handleMouseOver() {
-    if (this.hasTrigger('hover')) {
-      this.show();
-    }
-  }
-  handleMouseOut() {
-    if (this.hasTrigger('hover')) {
-      this.hide();
-    }
-  }
-  handleClick() {
-    if (this.hasTrigger('click')) {
-      this.open ? this.hide() : this.show();
-    }
-  }
-  handleFocus() {
-    if (this.hasTrigger('focus')) {
-      this.show();
-    }
-  }
-  handleBlur() {
-    if (this.hasTrigger('focus')) {
-      this.hide();
-    }
-  }
-  async componentDidRender() {
-    await this.createElement();
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement.popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-    }
-  }
-  render() {
-    const classes = index$1.classnames('tooltip', ...this.getPlacement(), {
-    // 'open': this.open
-    });
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses, onClick: () => this.handleClick(), onMouseOver: () => this.handleMouseOver(), onMouseOut: () => this.handleMouseOut(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: 0 }, index.h("span", { class: classes }, index.h("span", { class: "box size-2" }, this.message), index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpen"]
-  }; }
-};
-BcmTooltip.style = tooltipCss;
-
 exports.bcm_datetime_picker = BcmDatetimePicker;
-exports.bcm_tooltip = BcmTooltip;

package/dist/cjs/bcm-list-select.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-ce8878ec.js');
 const index$1 = require('./index-2f62bdaf.js');
 const utils = require('./utils-60414768.js');
 
-const listSelectCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:256px;margin:0 0 8px 0;overflow:hidden;max-width:100%}:host(.hidden){display:none}:host(.full-width){width:100%}:host(.type-autocomplete) #selected-container{border:none}:host(.type-autocomplete) #selected-container .selected-text{padding:0;border:none}:host(.type-autocomplete) #selected-container .selected-text bcm-input{display:contents}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer;border-radius:2px;position:relative}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{padding:0 8px;width:100%;height:100%;flex:1;display:flex;align-items:center;overflow:hidden}.selected .selected-text .text-content{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.selected .selected-text .text-content.autocomplete{position:absolute;z-index:1;padding-left:7px;background-color:#ffffff;margin-left:2px}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:var(--bcm-color-grey-6);user-select:none;font-size:14px;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.9}.spinner.first-run{visibility:visible;opacity:1}.tag{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:default;border-radius:48px;border:1px solid var(--bcm-color-grey-5);user-select:none;min-width:10px;min-height:20px;height:20px}.tag[hidden]{opacity:0 !important;position:absolute !important;z-index:-1}.tag .value{cursor:pointer;max-width:164px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.tag.size-large{padding:calc(40px - 8px) 40px}.tag.size-medium{padding:calc(32px - 8px) 32px}.tag.size-small{padding:calc(24px - 8px) 24px}.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer}.tag.dissmisable .close-button bcm-icon,.tag.dissmisable .close-button .icon *{color:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover bcm-icon,.tag.dissmisable .close-button:hover .icon *{color:var(--bcm-color-grey-10)}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}";
+const listSelectCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:256px;margin:0 0 8px 0;overflow:hidden;max-width:100%}:host(.hidden){display:none}:host(.full-width){width:100%}:host(.type-autocomplete) #selected-container{border:none}:host(.type-autocomplete) #selected-container .selected-text{padding:0;border:none}:host(.type-autocomplete) #selected-container .selected-text bcm-input{display:contents}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer;border-radius:2px;position:relative}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{padding:0 8px;width:100%;height:100%;flex:1;display:flex;align-items:center;overflow:hidden}.selected .selected-text .text-content{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.selected .selected-text .text-content.autocomplete{position:absolute;z-index:1;padding-left:7px;background-color:#ffffff;margin-left:2px}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:var(--bcm-color-grey-6);user-select:none;font-size:14px;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.9}.spinner.first-run{visibility:visible;opacity:1}.tag{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:default;border-radius:48px;border:1px solid var(--bcm-color-grey-5);user-select:none;min-width:10px;min-height:20px;height:20px}.tag[hidden]{opacity:0 !important;position:absolute !important;z-index:-1}.tag .value{cursor:pointer;max-width:164px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.tag.size-large{padding:calc(40px - 8px) 40px}.tag.size-medium{padding:calc(32px - 8px) 32px}.tag.size-small{padding:calc(24px - 8px) 24px}.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer;fill:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover{fill:var(--bcm-color-grey-10)}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}";
 
 const BcmListSelect = class {
   constructor(hostRef) {
@@ -222,11 +222,15 @@ const BcmListSelect = class {
   /**
    * @descc
    */
-  clickClear() {
+  clickClear(event = null) {
     const element = document.querySelector("#" + this._list_id);
     if (element) {
       element.setClear(false);
     }
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
   /**
    * @desc
@@ -339,10 +343,10 @@ const BcmListSelect = class {
             newTag.setAttribute("_internal_id", this._internal_id);
             newTag.innerHTML = '<span class="value"> ' + item["text"] + ' </span>'
               + '<span id="close-button" ' + '_internal_id="' + this._internal_id + '" class="right close-button"> '
-              + '<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> '
+              + '<svg class="icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> '
               + '<g id="icon/outlined/suggested/close">'
-              + '<path id="Vector" d="M18.9275 4.07814L19.9219 5.07251C20.0103 5.1609 20.0103 5.24928 19.9219 5.33767L5.3378 19.9218C5.24941 20.0101 5.16102 20.0101 5.07263 19.9218L4.07826 18.9274C3.98987 18.839 3.98987 18.7506 4.07826 18.6622L18.6623 4.07814C18.7507 3.98975 18.8391 3.98975 18.9275 4.07814Z" fill="black"/>'
-              + '<path id="Vector_2" d="M5.33766 4.07814L19.9217 18.6622C20.0101 18.7506 20.0101 18.839 19.9217 18.9274L18.9274 19.9218C18.839 20.0101 18.7506 20.0101 18.6622 19.9218L4.07813 5.33767C3.98974 5.24928 3.98974 5.1609 4.07813 5.07251L5.0725 4.07814C5.16088 3.98975 5.24927 3.98975 5.33766 4.07814Z" fill="black"/>'
+              + '<path id="Vector" d="M18.9275 4.07814L19.9219 5.07251C20.0103 5.1609 20.0103 5.24928 19.9219 5.33767L5.3378 19.9218C5.24941 20.0101 5.16102 20.0101 5.07263 19.9218L4.07826 18.9274C3.98987 18.839 3.98987 18.7506 4.07826 18.6622L18.6623 4.07814C18.7507 3.98975 18.8391 3.98975 18.9275 4.07814Z" />'
+              + '<path id="Vector_2" d="M5.33766 4.07814L19.9217 18.6622C20.0101 18.7506 20.0101 18.839 19.9217 18.9274L18.9274 19.9218C18.839 20.0101 18.7506 20.0101 18.6622 19.9218L4.07813 5.33767C3.98974 5.24928 3.98974 5.1609 4.07813 5.07251L5.0725 4.07814C5.16088 3.98975 5.24927 3.98975 5.33766 4.07814Z" />'
               + '</g>'
               + '</svg>'
               + '</span>';
@@ -468,6 +472,14 @@ const BcmListSelect = class {
     // await delay(100)
     this.handleLoading(false);
   }
+  /**
+   * @desc
+   */
+  valueWatch(newValue) {
+    if (Array.isArray(newValue) && newValue.length == 0) {
+      this.value = "";
+    }
+  }
   /**
   * @desc
   */
@@ -632,11 +644,14 @@ const BcmListSelect = class {
     //       <slot />
     //     </div>
     // </Host>
-    index.h(index.Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, index.h("div", { class: container }, label && index.h("label", { class: "label size-1", onClick: () => this.handleOpen() }, " ", label, " ", required === true && ('*'), "  "), index.h("div", { id: "selected-container", class: selected, onClick: () => this.handleOpen(), tabIndex: -1 }, index.h("span", { class: selectedText, title: selectText !== null && (selectText) }, index.h("div", { class: "spinner first-run" }), this.type === 'select' && (selectText !== null && (index.h("div", { class: "text-content" }, selectText))), (this.type === 'select' || this.type === 'autocomplete' && this.multiSelect === true) && (selectText === null && (index.h("span", { id: "tagcontainer", class: "tag-container" }, index.h("span", { id: "visible-tags" }), index.h("span", { id: "other-container" }, index.h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleOtherTag, type: "dissmisable", id: "other-tag" }))))), this.type === 'select' && (selectText === null && selectData.length === 0 && placeholder !== null && (index.h("span", { class: "placeholder" }, " ", placeholder, " "))), this.type === 'autocomplete' && (index.h("bcm-input", { _internal_id: this._internal_id, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur("input"), "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", "no-caption": true, "no-margin": true, type: "search", clearable: true }))), this.type === 'select' && (index.h("div", { class: "buttons" }, clearable && value && (index.h("button", { class: "select-clear-button", onClick: () => this.clickClear() }, index.h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))), index.h("span", { class: isOpen ? 'open' : 'close' }, index.h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" }))))), noCaption === false && (index.h("div", { class: "caption-area" }, captionType == "error"
+    index.h(index.Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, index.h("div", { class: container }, label && index.h("div", null, index.h("bcm-label", { onClick: () => this.handleOpen(), tooltip: this.tooltip, type: captionType, value: label, required: required })), index.h("div", { id: "selected-container", class: selected, onClick: () => this.handleOpen(), tabIndex: -1 }, index.h("span", { class: selectedText, title: selectText !== null && (selectText) }, index.h("div", { class: "spinner first-run" }), this.type === 'select' && (selectText !== null && (index.h("div", { class: "text-content" }, selectText))), (this.type === 'select' || this.type === 'autocomplete' && this.multiSelect === true) && (selectText === null && (index.h("span", { id: "tagcontainer", class: "tag-container" }, index.h("span", { id: "visible-tags" }), index.h("span", { id: "other-container" }, index.h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleOtherTag, type: "dissmisable", id: "other-tag" }))))), this.type === 'select' && (selectText === null && selectData.length === 0 && placeholder !== null && (index.h("span", { class: "placeholder" }, " ", placeholder, " "))), this.type === 'autocomplete' && (index.h("bcm-input", { _internal_id: this._internal_id, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur("input"), "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", "no-caption": true, "no-margin": true, type: "search", clearable: true }))), this.type === 'select' && (index.h("div", { class: "buttons" }, clearable && value && (index.h("button", { id: "clear-button", class: "select-clear-button", onClick: (e) => this.clickClear(e) }, index.h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))), index.h("span", { class: isOpen ? 'open' : 'close' }, index.h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" }))))), noCaption === false && (index.h("div", { class: "caption-area" }, captionType == "error"
       ? index.h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && index.h("span", { class: captionClasses }, " ", caption, " "))))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueWatch"]
+  }; }
 };
 BcmListSelect.style = listSelectCss;
 

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

@@ -6,7 +6,7 @@ const index = require('./index-ce8878ec.js');
 const index$1 = require('./index-2f62bdaf.js');
 const utils = require('./utils-60414768.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;position:relative;user-select:none;width:fit-content;height:fit-content}:host main{width:256px;height:256px;background-color:#ffffff;border:1px solid #d9d9d9;box-sizing:border-box;transition:height 1s ease 1s;display:flex;flex-direction:column;position:relative;padding-top:8px}:host(.full-width){width:100%}:host(.full-width) main{width:100%}:host(.linked){z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;visibility:hidden !important;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.linked.show){opacity:1;visibility:visible !important;z-index:100000}:host(.flex){width:100%;height:100%}:host(.flex) main{width:100%}:host(.type-autocomplete) .search-container{height:0;margin:0;padding:0;overflow:hidden}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}:host(.error) .label{color:var(--bcm-color-red-6) !important}:host(.error) main{border:1px solid var(--bcm-color-red-6) !important}.search-container{margin:0 8px;padding-top:8px;background-color:#ffffff}.search-container+.list-container{padding-top:0}.footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.list-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;grid-gap:4px;position:relative}.list-container .list{display:flex;flex-direction:column;grid-gap:4px}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.8}.spinner.first-run{visibility:visible;opacity:0.9}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;margin:0 8px}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.divider{margin:0 8px}";
+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;position:relative;user-select:none;width:fit-content;height:fit-content}:host main{width:256px;height:256px;background-color:#ffffff;border:1px solid #d9d9d9;box-sizing:border-box;transition:height 1s ease 1s;display:flex;flex-direction:column;position:relative;padding-top:8px}:host(.full-width){width:100%}:host(.full-width) main{width:100%}:host(.linked){z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;visibility:hidden !important;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.linked.show){opacity:1;visibility:visible !important;z-index:100000}:host(.flex){width:100%;height:100%}:host(.flex) main{width:100%}:host(.type-autocomplete) .search-container{height:0;margin:0;padding:0;overflow:hidden}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}:host(.error) .label{color:var(--bcm-color-red-6) !important}:host(.error) main{border:1px solid var(--bcm-color-red-6) !important}.search-container{margin:0 8px;padding-top:8px;background-color:#ffffff}.search-container+.list-container{padding-top:0}.footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.list-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;grid-gap:4px;position:relative}.list-container .list{display:flex;flex-direction:column;grid-gap:4px}.check-container{display:block}.check-container.hidden{display:none}.empty{display:none;align-items:center;justify-content:center;flex:1;height:100%}.empty.show{display:flex}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.8}.spinner.first-run{visibility:visible;opacity:0.9}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;margin:0 8px}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.divider{margin:0 8px}";
 
 const lowercase = (str) => str.toLowerCase();
 const BcmList = class {
@@ -91,6 +91,7 @@ const BcmList = class {
     if (this.type !== 'default' || this.linkedComponent !== null) {
       this.isShow = false;
       this.el.classList.add("linked");
+      this.el.classList.remove("show");
       this.handleLinkedComponent();
     }
     const slot = this.el.shadowRoot.querySelectorAll('bcm-list-item');
@@ -142,6 +143,7 @@ const BcmList = class {
     if (this.searchable == true) {
       // var searchInput = null
       const searchInput = this.el.shadowRoot.querySelector("bcm-search");
+      // console.log(searchInput)
       if (searchInput) {
         searchInput.setClear();
         if (select == true) {
@@ -156,11 +158,14 @@ const BcmList = class {
   async show() {
     if (this.processType == 'deselect') {
       this.firstRender = true;
-      this.isRendered = false;
-      this.setData(this.otherList);
+      if (this.items != this.otherList) {
+        this.isRendered = false;
+        this.setData(this.otherList);
+      }
     }
     this.isShow = true;
     this.renderList();
+    this.clearAndSelectSearch(true);
   }
   /**
    * @desc
@@ -606,6 +611,18 @@ const BcmList = class {
    */
   handleClick(event) {
     var path = event.path || (event.composedPath && event.composedPath());
+    // const elementId = "bcm-list-select-" + this._id
+    // console.log ( 
+    //     !!(
+    //         path 
+    //         && path.filter((input: HTMLElement) => input['_internal_id'] == this._internal_id)[0] 
+    //         && ( 
+    //             path.filter((input: HTMLElement) => input['id'] == "clear-button")[0] !== undefined 
+    //             || path.filter((input: HTMLElement) => input['id'] == "close-button")[0] !== undefined 
+    //             || path.filter((input: HTMLElement) => input['id'] == "close")[0] !== undefined 
+    //         )
+    //     )
+    // )
     if (!this.el.contains(event.target)
       || (path
         && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
@@ -923,6 +940,7 @@ const BcmList = class {
    * @desc
    */
   calculatedTotals(calcObject) {
+    var searchResult = -1;
     if (calcObject["selected"] != undefined) {
       if (this.infoFooter == true && this.el.shadowRoot.querySelector("#selected-item")) {
         if (calcObject["selected"] > 0) {
@@ -941,6 +959,7 @@ const BcmList = class {
         else {
           this.el.shadowRoot.querySelector("#search-result").innerHTML = calcObject["searchResult"] + " / ";
         }
+        searchResult = calcObject["searchResult"];
       }
     }
     if (calcObject["total"] != undefined) {
@@ -950,6 +969,24 @@ const BcmList = class {
         this.el.shadowRoot.querySelector("#variable-text").innerHTML = utils.pluralize(this.variableText, calcObject["total"]);
       }
     }
+    const empty = this.el.shadowRoot.querySelector("#empty");
+    const selectAll = this.el.shadowRoot.querySelector("#check-container");
+    if (searchResult == 0 || this.total == 0) {
+      if (empty) {
+        empty.classList.add("show");
+      }
+      if (selectAll) {
+        selectAll.classList.add("hidden");
+      }
+    }
+    else {
+      if (empty) {
+        empty.classList.remove("show");
+      }
+      if (selectAll) {
+        selectAll.classList.remove("hidden");
+      }
+    }
   }
   /**
    * @desc
@@ -1151,7 +1188,7 @@ const BcmList = class {
     };
     var mainStyle = Object.assign({ 'height': styleHeight }, customStyle);
     var hostStyle = Object.assign({ 'height': styleHeight + labelAreaHeight }, customStyle);
-    return (index.h(index.Host, { class: hostClasses, style: hostStyle }, (this.type === 'default' && this.processType === 'default' && this.label) && (index.h("label", { class: "label size-1" }, " ", this.label, " ", this.required && ('*'), "  ")), index.h("main", { style: mainStyle }, this.searchable === true && (index.h("div", { class: searchContainer }, index.h("bcm-search", { id: "search", _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, data: this.searchData, returnField: this.returnField, searchFields: this.searchFields, searchValue: this.searchText, clearable: true }), index.h("bcm-divider", null))), index.h("div", { class: classes }, this.multiSelect === true && (index.h("div", { class: "check-container" }, index.h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) }, index.h("div", { class: "check-content" }, index.h("bcm-checkbox-lite", { id: 'check-lite-' + this._id, name: 'check-lite-' + this._id, checked: false, indeterminate: false, onClick: (e) => this.handleCheckboxClick(e) })), "Select All"), index.h("div", { class: "divider" }, index.h("bcm-divider", null)))), index.h("slot", null), index.h("div", { class: "list" }), index.h("div", { class: "spinner first-run" }, index.h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" }))), this.infoFooter == true && (index.h("div", { class: footer }, index.h("bcm-text", { scale: "size-1", color: "grey-8" }, this.multiSelect === true && (index.h("span", { id: "selected-item" })), "Total ", index.h("span", { id: "search-result" }), " ", index.h("span", { id: "in-total" }, "0"), " ", index.h("span", { id: "variable-text" }, " ", utils.pluralize(this.variableText)), " found.")))), (this.type === 'default' && this.processType === 'default' && !this.noCaption) && (index.h("div", { class: "caption-area" }, this.captionType == "error"
+    return (index.h(index.Host, { class: hostClasses, style: hostStyle }, (this.type === 'default' && this.processType === 'default' && this.label) && (index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, type: this.captionType, value: this.label, required: this.required }))), index.h("main", { style: mainStyle }, this.searchable === true && (index.h("div", { class: searchContainer }, index.h("bcm-search", { id: "search", _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, data: this.searchData, returnField: this.returnField, searchFields: this.searchFields, searchValue: this.searchText, clearable: true }), index.h("bcm-divider", null))), index.h("div", { class: classes }, this.multiSelect === true && (index.h("div", { id: "check-container", class: "check-container" }, index.h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) }, index.h("div", { class: "check-content" }, index.h("bcm-checkbox-lite", { id: 'check-lite-' + this._id, name: 'check-lite-' + this._id, checked: false, indeterminate: false, onClick: (e) => this.handleCheckboxClick(e) })), "Select All"), index.h("div", { class: "divider" }, index.h("bcm-divider", null)))), index.h("slot", null), index.h("div", { class: "list" }), index.h("div", { class: "spinner first-run" }, index.h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" })), index.h("div", { id: "empty", class: "empty" }, index.h("bcm-empty", { size: "small", text: "No Data" }))), this.infoFooter == true && (index.h("div", { class: footer }, index.h("bcm-text", { scale: "size-1", color: "grey-8" }, this.multiSelect === true && (index.h("span", { id: "selected-item" })), "Total ", index.h("span", { id: "search-result" }), " ", index.h("span", { id: "in-total" }, "0"), " ", index.h("span", { id: "variable-text" }, " ", utils.pluralize(this.variableText)), " found.")))), (this.type === 'default' && this.processType === 'default' && !this.noCaption) && (index.h("div", { class: "caption-area" }, this.captionType == "error"
       ? index.h("span", { class: captionClasses }, " ", this.captionError, " ")
       : this.caption && index.h("span", { class: captionClasses }, " ", this.caption, " ")))));
   }

package/dist/cjs/{bcm-empty_6.cjs.entry.js → bcm-listbox_5.cjs.entry.js}

@@ -6,69 +6,6 @@ const index = require('./index-ce8878ec.js');
 const index$1 = require('./index-2f62bdaf.js');
 const utils = require('./utils-60414768.js');
 
-/**
- * 'image' prop predefined values
- */
-var ImageProps;
-(function (ImageProps) {
-  ImageProps["default"] = "default.svg";
-  ImageProps["simple"] = "simple.svg";
-})(ImageProps || (ImageProps = {}));
-/**
- * 'size' prop predefined values
- */
-var SizeProps;
-(function (SizeProps) {
-  SizeProps["small"] = "small";
-  SizeProps["medium"] = "medium";
-  SizeProps["big"] = "big";
-})(SizeProps || (SizeProps = {}));
-
-const emptyCss = "@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}:host(.hidden){display:none}.empty.small{max-width:100px}.empty.medium{max-width:140px}.empty.big{max-width:200px}.text{font-size:14px;color:var(--bcm-color-grey-8)}.content{text-align:center}img{max-width:100%}";
-
-const BcmEmpty = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Component Properties
-     */
-    this._image = ImageProps.default;
-    this.size = SizeProps.medium;
-    this.hidden = false;
-  }
-  /**
-  * @ComponentMethod
-  */
-  componentWillLoad() {
-    this.parseImage(this._image);
-  }
-  /**
-  * @desc
-  * @param newValue
-  * @returns {void}
-  */
-  parseImage(newValue) {
-    if (newValue) {
-      newValue in ImageProps
-        ? this.image = ImageProps[newValue]
-        : this.image = ImageProps.default;
-    }
-  }
-  render() {
-    const classes = index$1.classnames('empty', {
-      [this.size]: this.size
-    });
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("img", { src: index.getAssetPath(`./static/${this.image}`) }), index.h("div", { class: "content" }, this.text && (index.h("span", { class: "text" }, this.text)), index.h("slot", null)))));
-  }
-  static get assetsDirs() { return ["static"]; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "_image": ["parseImage"]
-  }; }
-};
-BcmEmpty.style = emptyCss;
-
 const listboxCss = "@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;width:fit-content;height:fit-content;background-color:#ffffff}:host(.hidden){display:none}:host(.flex){width:100%;height:100%}:host(.flex) .bcm-listbox{max-height:100%;max-width:100%;height:100%;min-width:100%}:host(.full-width){width:100%}:host(.full-width) .bcm-listbox{max-width:100%;min-width:100%}.bcm-listbox{flex:1;background-color:var(--bcm-color-grey-1);width:fit-content;display:flex;flex-direction:column;height:100%;width:100%;min-width:256px;max-width:256px;min-height:auto;max-height:300px;box-sizing:border-box;border:1px solid var(--bcm-color-grey-5)}.bcm-listbox-list{flex:1;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;border-bottom:none}.bcm-listbox-list.loading{min-height:150px;position:relative;margin:0 8px 8px 8px}.bcm-listbox-list .loading{display:none;align-items:center;justify-content:center;height:100%;width:100%;position:absolute;background-color:rgba(255, 255, 255, 0.03)}.bcm-listbox-list .loading.show{display:flex}.bcm-listbox-list .list-container.hidden{display:none}.bcm-listbox .search{padding:8px;padding-bottom:0}.bcm-listbox .search.hidden{display:none !important}.bcm-listbox .empty{display:none;align-items:center;justify-content:center;flex:1;height:100%}.bcm-listbox .empty.show{display:flex}.bcm-listbox-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.listbox-item{display:flex;align-items:stretch;justify-content:flex-start;flex-direction:column;color:var(--bcm-color-grey-8);user-select:none;background-color:var(--bcm-color-grey-1)}.listbox-item.hidden{display:none}.listbox-item .divider{padding:0 8px}.listbox-item-container{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding-left:8px;width:100%}.listbox-item-container .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:4px}.listbox-item-container .check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.listbox-item-container .check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.listbox-item-container .check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.listbox-item-container .check-content .indeterminate:hover:before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.listbox-item-container-text-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;cursor:pointer;width:100%;padding:4px 8px 4px 4px}.listbox-item-container.disabled{color:var(--bcm-color-grey-6)}.listbox-item-container.selected{color:var(--bcm-color-prime-blue-6)}.listbox-item-container.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container:hover:not(.disabled),.listbox-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.caption-area{margin-bottom:8px;min-height:20px}.input-caption{display:block}.error.label{color:var(--bcm-color-red-6) !important}.error.bcm-listbox{border:1px solid var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.input-large{height:38px}.input-medium{height:30px}.input-small{height:20px}";
 
 /**
@@ -368,6 +305,7 @@ const BcmListbox = class {
         ? this.size = _config['size']
         : this.size = 'medium';
     }
+    this.searchSub = this.objectMapping['items'];
     if (_config['mapping']) {
       if (_config['mapping']['id']) {
         this.objectMapping['id'] = String(_config['mapping']['id']);
@@ -403,15 +341,14 @@ const BcmListbox = class {
       if (_config['mapping']['selected']) {
         this.objectMapping['selected'] = _config['mapping']['selected'];
       }
-      if (this.treeview) {
-        if (_config['mapping']['items']) {
-          this.objectMapping['items'] = _config['mapping']['items'];
-          this.searchSub = this.objectMapping['items'];
-        }
-      }
-      else {
+      if (_config['mapping']['items']) {
+        this.objectMapping['items'] = _config['mapping']['items'];
         this.searchSub = this.objectMapping['items'];
       }
+      // if ( this.treeview ) {
+      // }else{
+      //     this.searchSub = this.objectMapping['items']
+      // }
     }
     sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
     // forceUpdate(this.el)
@@ -953,10 +890,7 @@ const BcmListbox = class {
       customStyles = Object.assign(Object.assign({}, customStyles), { 'height': this.height });
     }
     const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const labelClasses = index$1.classnames('size-1', 'label', {
-      'error': captionType == 'error' ? true : false
-    });
-    return (index.h(index.Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && index.h("label", { class: labelClasses }, " ", label, " ", required && ('*'), "  "), treeview === true && (index.h("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (index.h("div", { class: bcmListbox, style: customStyles }, search && (index.h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, index.h("bcm-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), index.h("bcm-divider", null))), index.h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (index.h("div", { class: classes, id: "checkall" }, index.h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, index.h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (index.h("span", { class: "indeterminate" })) || (index.h("bcm-checkbox", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, noCaption: true }))), index.h("div", { class: textContent }, "Select All")), index.h("div", { class: "divider" }, index.h("bcm-divider", null)))), 
+    return (index.h(index.Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), treeview === true && (index.h("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (index.h("div", { class: bcmListbox, style: customStyles }, search && (index.h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, index.h("bcm-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), index.h("bcm-divider", null))), index.h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (index.h("div", { class: classes, id: "checkall" }, index.h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, index.h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (index.h("span", { class: "indeterminate" })) || (index.h("bcm-checkbox", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, noCaption: true }))), index.h("div", { class: textContent }, "Select All")), index.h("div", { class: "divider" }, index.h("bcm-divider", null)))), 
     // this.empty == false && (
     index.h("div", { id: "list-container", class: listContainer, style: listContainerStyle }, this.items.length !== 0 && this.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item)))))
     // )
@@ -2311,7 +2245,6 @@ const BcmtreeviewItem = class {
 };
 BcmtreeviewItem.style = treeviewItemCss;
 
-exports.bcm_empty = BcmEmpty;
 exports.bcm_listbox = BcmListbox;
 exports.bcm_listbox_group = BcmListboxGroup;
 exports.bcm_listbox_item = BcmListboxItem;

package/dist/cjs/bcm-popconfirm-box.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ce8878ec.js');
 const index$1 = require('./index-2f62bdaf.js');
 
-const popconfirmBoxCss = "@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-flex}:host(.hidden){display:none}:host(:focus){outline:none}.popconfirm-box{position:relative;}.popconfirm-box .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:8px 16px}.popconfirm-box .box .content{display:flex}.popconfirm-box .box .content .icon{margin-right:8px;margin-top:4px}.popconfirm-box .box .buttons{display:flex;justify-content:flex-end;margin-top:8px}.popconfirm-box .box .buttons bcm-button:first-child{margin-right:8px}.popconfirm-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700}.popconfirm-box.open .box,.popconfirm-box.open::after{display:block}.popconfirm-box.top .box{bottom:100%;margin-bottom:16px}.popconfirm-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popconfirm-box.bottom .box{top:100%;margin-top:16px}.popconfirm-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popconfirm-box.left .box{right:100%;margin-right:16px}.popconfirm-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popconfirm-box.right .box{left:100%;margin-left:16px}.popconfirm-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popconfirm-box.top.center .box,.popconfirm-box.bottom.center .box{left:50%;transform:translateX(-50%)}.popconfirm-box.top.center::after,.popconfirm-box.bottom.center::after{left:50%;transform:translateX(-50%)}.popconfirm-box.top.start .box,.popconfirm-box.bottom.start .box{left:0}.popconfirm-box.top.start::after,.popconfirm-box.bottom.start::after{left:16px}.popconfirm-box.top.end .box,.popconfirm-box.bottom.end .box{right:0}.popconfirm-box.top.end::after,.popconfirm-box.bottom.end::after{right:16px}.popconfirm-box.left.center .box,.popconfirm-box.right.center .box{top:50%;transform:translateY(-50%)}.popconfirm-box.left.center::after,.popconfirm-box.right.center::after{top:50%;transform:translateY(-50%)}.popconfirm-box.left.start .box,.popconfirm-box.right.start .box{top:0}.popconfirm-box.left.start::after,.popconfirm-box.right.start::after{top:12px}.popconfirm-box.left.end .box,.popconfirm-box.right.end .box{bottom:0}.popconfirm-box.left.end::after,.popconfirm-box.right.end::after{bottom:12px}";
+const popconfirmBoxCss = "@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-flex}:host(.hidden){display:none}:host(:focus){outline:none}.popconfirm-box{position:relative;}.popconfirm-box .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:8px 16px}.popconfirm-box .box .content{display:flex}.popconfirm-box .box .content .icon{margin-right:8px;margin-top:4px}.popconfirm-box .box .buttons{display:flex;justify-content:flex-end;margin-top:8px}.popconfirm-box .box .buttons bcm-button:first-child{margin-right:8px}.popconfirm-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.popconfirm-box.open .box,.popconfirm-box.open::after{display:block}.popconfirm-box.top .box{bottom:100%;margin-bottom:16px}.popconfirm-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popconfirm-box.bottom .box{top:100%;margin-top:16px}.popconfirm-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popconfirm-box.left .box{right:100%;margin-right:16px}.popconfirm-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popconfirm-box.right .box{left:100%;margin-left:16px}.popconfirm-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popconfirm-box.top.center .box,.popconfirm-box.bottom.center .box{left:50%;transform:translateX(-50%)}.popconfirm-box.top.center::after,.popconfirm-box.bottom.center::after{left:50%;transform:translateX(-50%)}.popconfirm-box.top.start .box,.popconfirm-box.bottom.start .box{left:0}.popconfirm-box.top.start::after,.popconfirm-box.bottom.start::after{left:16px}.popconfirm-box.top.end .box,.popconfirm-box.bottom.end .box{right:0}.popconfirm-box.top.end::after,.popconfirm-box.bottom.end::after{right:16px}.popconfirm-box.left.center .box,.popconfirm-box.right.center .box{top:50%;transform:translateY(-50%)}.popconfirm-box.left.center::after,.popconfirm-box.right.center::after{top:50%;transform:translateY(-50%)}.popconfirm-box.left.start .box,.popconfirm-box.right.start .box{top:0}.popconfirm-box.left.start::after,.popconfirm-box.right.start::after{top:12px}.popconfirm-box.left.end .box,.popconfirm-box.right.end .box{bottom:0}.popconfirm-box.left.end::after,.popconfirm-box.right.end::after{bottom:12px}";
 
 const statuses = {
   error: ['close-circle', 'red-6'],