bromcom-ui 2.4.36 → 2.4.37

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

@@ -192,12 +192,14 @@ export class BcmList {
     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();
+        }
       }
     }
   }
@@ -438,6 +440,7 @@ export class BcmList {
     await this.onClearSearch();
     this.isSelectedOther = false;
     this.returnFilterData = {};
+    listState.filterData(this._id, null);
     // this.isOpen = false
   }
   async onClearSearch() {
@@ -676,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;
               }
@@ -712,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();
@@ -1811,7 +1816,7 @@ export class BcmList {
     }, {
       "name": "wheel",
       "method": "handleWheel",
-      "target": "window",
+      "target": "document",
       "capture": false,
       "passive": true
     }, {

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" })),