bromcom-ui 2.4.34 → 2.4.37

package/dist/collection/components/molecules/popconfirm/popconfirm-box.js

@@ -26,8 +26,15 @@ export class BcmPopconfirmBox {
     this.getPopconfirm().hide();
     this.hide();
   }
+  showHandler(e) {
+    if (e.detail != this._target_id) {
+      this.getPopconfirm().hide();
+      this.hide();
+    }
+  }
   async show() {
     this.open = true;
+    this.onShow.emit(this._target_id);
   }
   async hide() {
     this.open = false;
@@ -300,6 +307,21 @@ export class BcmPopconfirmBox {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "onShow",
+      "name": "bcm-popconfirm-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "show": {
@@ -342,6 +364,12 @@ export class BcmPopconfirmBox {
       "target": "window",
       "capture": false,
       "passive": false
+    }, {
+      "name": "bcm-popconfirm-show",
+      "method": "showHandler",
+      "target": "document",
+      "capture": false,
+      "passive": false
     }, {
       "name": "resize",
       "method": "calculateLocation",

package/dist/collection/components/molecules/popover/popover-box.css

@@ -18514,7 +18514,7 @@
   box =  box
   after  =  arrow
   */
-  position: absolute;
+  position: fixed;
   transition: transform 0.2s ease-in-out;
   /*
   PLACEMENTS

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

@@ -447,7 +447,7 @@ export class BcmSelect {
         this.change.emit(newVal);
       }
       else {
-        if (newVal[this.objectMapping['id']] && oldVal[this.objectMapping['id']]) {
+        if (newVal && newVal[this.objectMapping['id']] && oldVal && oldVal[this.objectMapping['id']]) {
           if (newVal[this.objectMapping['id']] != oldVal[this.objectMapping['id']]) {
             this.change.emit(newVal);
           }

package/dist/collection/components/molecules/tooltip/tooltip-box.css

@@ -18516,7 +18516,7 @@
   box =  box
   after  =  arrow
   */
-  position: absolute;
+  position: fixed;
   transition: transform 0.2s ease-in-out;
   /*
   PLACEMENTS

package/dist/collection/components/organism/form/form.js

@@ -53,6 +53,7 @@ export class BcmForm {
     this.hidden = false;
     this.validation = false;
     this.name = "";
+    this.autocomplete = false;
   }
   handleSubmit(e) {
     if (lowercase(e.target.nodeName) === 'bcm-button') {
@@ -316,7 +317,7 @@ export class BcmForm {
   render() {
     const hostClasses = cs(this.hidden ? 'hidden' : null);
     return (h(Host, { class: hostClasses },
-      h("form", { class: "bcm-form" },
+      h("form", { class: "bcm-form", autocomplete: this.autocomplete ? "on" : "off" },
         h("slot", null))));
   }
   static get is() { return "bcm-form"; }
@@ -416,6 +417,24 @@ export class BcmForm {
       },
       "attribute": "value",
       "reflect": false
+    },
+    "autocomplete": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "autocomplete",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/organism/list/list.js

@@ -67,8 +67,6 @@ export class BcmList {
     this.searchFound = null;
     this.returnFilterData = {};
     this.returnOtherData = {};
-    this.isLoadingInput = true;
-    this.isLoadingList = true;
     this.options = {
       rootMargin: '30px'
     };
@@ -191,16 +189,17 @@ export class BcmList {
     }
   }
   handleResize() {
-    this.isLoadingInput = true;
     this.calculateLocation();
     this.debounceHandler();
   }
-  //mouse wheel event
-  handleWheel() {
+  handleWheel(event) {
     if (this.isOpen) {
-      if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
-        this.calculateLocation();
-        this.debounceHandler();
+      const list = document.querySelector(`#bcm-list-${this._id}`);
+      const isClickInside = list && (Generate.findEventPath(event, list));
+      if (isClickInside) {
+        if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+          this.calculateLocation();
+        }
       }
     }
   }
@@ -396,7 +395,6 @@ export class BcmList {
     return false;
   }
   async setClear(e) {
-    // this.isLoadingInput = true
     listState.setClear(this._id);
     this.value = null;
     this.inputText = '';
@@ -434,14 +432,15 @@ export class BcmList {
     this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? checkeds === total ? 'check' : 'indeterminate' : 'uncheck', checked: this.checkboxes && checkeds > 0 ? checkeds === total ? true : false : false });
   }
   listenResize() {
-    this.isLoadingInput = true;
     this.tagControl();
     this.calculateLocation();
+    this.markForCheck();
   }
   async unSelectOther() {
     await this.onClearSearch();
     this.isSelectedOther = false;
     this.returnFilterData = {};
+    listState.filterData(this._id, null);
     // this.isOpen = false
   }
   async onClearSearch() {
@@ -478,7 +477,6 @@ export class BcmList {
   }
   async initState() {
     var _a, _b, _c;
-    this.isLoadingInput = true;
     await listState.setValue({
       id: this._id,
       dataSource: this.data && snq(() => typeof this.data == 'string' ? JSON.parse(this.data) : this.data, []),
@@ -490,12 +488,10 @@ export class BcmList {
     this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
     // value && value.length > 0 && (this.value = value)
     if (this.checkboxes) {
-      await delay(100);
       this.tagControl();
     }
     else {
       this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
-      this.isLoadingInput = false;
     }
     const checkedIDs = [];
     ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.value.forEach(item => {
@@ -631,13 +627,19 @@ export class BcmList {
           list.style.width = targetElement.offsetWidth + "px";
         }
         if (this.height.indexOf('%') > -1) {
-          list.style.height = NumberHelper.toNumber(this.height.replace('%', '')) * 0.01 * window.innerHeight - pos[0] - 50 + "px";
+          list.style.height = NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + "px";
         }
         else {
           list.style.height = this.height;
         }
-        list.style.minHeight = "156px";
-        list.style.maxHeight = window.innerHeight - pos[0] - 50 + 'px';
+        list.style.minHeight = this.minHeight;
+        const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
+        if (this.maxHeight.indexOf('%') > -1) {
+          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + "px";
+        }
+        else {
+          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + "px";
+        }
       }
     }
   }
@@ -677,9 +679,10 @@ export class BcmList {
               if (item.text.length > 10) {
                 element.title = item.text;
               }
-              itemsWidth += element.offsetWidth + 8;
+              const elementOffsetWidth = element.offsetWidth > 20 ? element.offsetWidth : 95;
+              itemsWidth += elementOffsetWidth + 8;
               if (itemsWidth > tagContainerWidth) {
-                itemsWidth -= element.offsetWidth + 8;
+                itemsWidth -= elementOffsetWidth + 8;
                 element.remove();
                 throw BreakException;
               }
@@ -713,7 +716,8 @@ export class BcmList {
                     otherText = `${otherTag.length} ${pluralize('item', otherTag.length)} selected`;
                     otherElement = await this.createTag({ id: 'other-tag', text: otherText });
                     await delay(10);
-                    if (otherElement.offsetWidth + 20 > (tagContainerWidth - itemsWidth)) {
+                    const otherOffsetWidth = otherElement.offsetWidth > 40 ? otherElement.offsetWidth : 140;
+                    if (otherOffsetWidth + 20 > (tagContainerWidth - itemsWidth)) {
                       itemsWidth -= item.offsetWidth + 4;
                       item.remove();
                       await removeItems();
@@ -1569,8 +1573,6 @@ export class BcmList {
     "searchFound": {},
     "returnFilterData": {},
     "returnOtherData": {},
-    "isLoadingInput": {},
-    "isLoadingList": {},
     "options": {},
     "tagContainerWidth": {},
     "selectAllItem": {}
@@ -1814,7 +1816,7 @@ export class BcmList {
     }, {
       "name": "wheel",
       "method": "handleWheel",
-      "target": "window",
+      "target": "document",
       "capture": false,
       "passive": true
     }, {
@@ -1864,3 +1866,6 @@ export class BcmList {
 __decorate([
   JsonParse('data')
 ], BcmList.prototype, "data", void 0);
+__decorate([
+  JsonParse('data', true)
+], BcmList.prototype, "dataChanged", null);

package/dist/collection/decorators/json-parse-decarator.js

@@ -1,8 +1,8 @@
 import { getElement } from "@stencil/core";
 import snq from 'snq';
-export function JsonParse(attribute) {
+export function JsonParse(attribute, isMethod = false) {
   return (proto, propName) => {
-    const { connectedCallback } = proto;
+    const { connectedCallback, componentWillRender } = proto;
     proto.connectedCallback = function () {
       const host = getElement(this);
       if (host[propName]) {
@@ -14,5 +14,18 @@ export function JsonParse(attribute) {
       }
       return connectedCallback && connectedCallback.call(this);
     };
+    proto.componentWillRender = async function () {
+      if (isMethod) {
+        const host = getElement(this);
+        if (isMethod) {
+          const value = snq(() => host.hasAttribute(attribute) ? host.getAttribute(attribute).valueOf() : host[attribute].valueOf(), null);
+          if (value && value.length > 0 && typeof value === 'string') {
+            this[attribute] = snq(() => JSON.parse(value), []);
+          }
+          host.removeAttribute(attribute);
+        }
+        return componentWillRender && componentWillRender.call(this);
+      }
+    };
   };
 }

package/dist/collection/templates/input-template.js

@@ -10,7 +10,7 @@ id, internalId, type, placeholder, value, size,
 //,
 unit, unitPrefix, maxLength, 
 //boolean
-disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, 
+disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, autocomplete, 
 // custom functions
 changePasswordVisibility, handleClear, steps, 
 //event functions
@@ -49,7 +49,10 @@ ref, handleBlur, handleFocus, handleInput, handleChange }) => {
     h("span", { class: "input-prefix" },
       h("slot", { name: "prefix" }),
       unitPrefix && h("span", { class: unitClass }, unitPrefix)),
-    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && { type: type })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => handleInput(e), onChange: (e) => handleChange(e) })),
+    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && {
+      type,
+      autocomplete: autocomplete ? 'on' : 'off'
+    })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => handleInput(e), onChange: (e) => handleChange(e) })),
     (clearable && !disabled) &&
       h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
         h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes[size], color: "grey-7" })),