bromcom-ui 2.3.49 → 2.3.50

package/dist/collection/components/molecules/list/list.css

@@ -58,6 +58,10 @@
 :host {
   display: block;
   position: relative;
+  user-select: none;
+  width: 256px;
+}
+:host main {
   width: 256px;
   height: 256px;
   background-color: #ffffff;
@@ -67,13 +71,15 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  user-select: none;
-  opacity: 0;
+  padding: 8px;
 }
 
 :host(.full-width) {
   width: 100%;
 }
+:host(.full-width) main {
+  width: 100%;
+}
 
 :host(.linked) {
   z-index: -999;
@@ -93,6 +99,9 @@
   width: 100%;
   height: 100%;
 }
+:host(.flex) main {
+  width: 100%;
+}
 
 :host(.type-autocomplete) .search-container {
   height: 0;
@@ -101,6 +110,43 @@
   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;

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

@@ -67,6 +67,8 @@ export class BcmList {
     this.required = false;
   }
   connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
     this.bodyStyleOverflow = document.querySelector("body").style.overflow;
     const elementId = "bcm-list-select-" + this._id;
     if (this.type === 'select' || this.type === 'autocomplete') {
@@ -92,6 +94,11 @@ export class BcmList {
   componentDidLoad() { }
   componentWillRender() { }
   componentDidRender() {
+    const elementId = "bcm-list-select-" + this._id;
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      this.selectIsInitialize();
+      this.linkedComponent = elementId;
+    }
     if (sessionStorage.getItem(this._internal_id + "-config")) {
       this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
     }
@@ -179,6 +186,12 @@ export class BcmList {
       }
     }
   }
+  /**
+   * @desc
+   */
+  handleChange(newValue) {
+    this.change.emit(newValue);
+  }
   /**
    * @desc
    */
@@ -283,6 +296,14 @@ export class BcmList {
   async getChecklist() {
     return this.checklist;
   }
+  /**
+   * @desc
+   */
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
   /**
    * @desc
    */
@@ -354,7 +375,6 @@ export class BcmList {
           // this.handleIndeterminateStatus()
           // this.sendSelectValue()
         }
-        // console.log("selectedIDs: ", selectedIDs)
         this.checked(selectedIDs, false);
       }
     }
@@ -400,10 +420,7 @@ export class BcmList {
         this.setClear(false);
       }
       if (typeof checkedItems == 'string') {
-        if (this.sendSelectId(String(checkedItems)) !== false) {
-          this.sendSelectId(String(checkedItems));
-          // selectedIDs.push( checkItem )
-        }
+        this.sendSelectId(String(checkedItems));
         if (this.multiSelect === false) {
           this.selectedId = this.items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems));
         }
@@ -411,10 +428,7 @@ export class BcmList {
       else {
         if (this.multiSelect === true) {
           checkedItems.forEach(item => {
-            if (this.sendSelectId(String(item)) !== false) {
-              this.sendSelectId(String(item));
-              // selectedIDs.push( checkItem )
-            }
+            this.sendSelectId(String(item));
           });
         }
       }
@@ -437,13 +451,7 @@ export class BcmList {
    */
   async setClear(eventEmit = true) {
     if (this.items != undefined && this.items.length > 0) {
-      // this.el.shadowRoot.querySelectorAll("bcm-list-item").forEach( item => {
-      //     if ( item.shadowRoot.querySelector(".checkbox") ){
-      //         item.shadowRoot.querySelector(".checkbox").querySelector("input").checked = false
-      //     }
-      //     item.classList.remove("selected")
-      // })
-      this.unChecked(Object.keys(this.items));
+      this.unChecked(this.items.map(item => { return item[this.objectMapping["id"]]; }));
     }
     this.selectedId = null;
     this.checklist = [];
@@ -471,7 +479,6 @@ export class BcmList {
       this.searchData = _data;
       await delay(100);
       _data.map(item => {
-        // console.log(item)
         const element = document.createElement("bcm-list-item");
         element.setAttribute("_internal_id", this._internal_id);
         element.setAttribute("text", item[this.objectMapping['text']]);
@@ -527,44 +534,33 @@ export class BcmList {
    * @desc
    */
   handleClick(event) {
-    // console.log(this.el.contains(event.target as HTMLElement) )
-    // console.log( 
-    //     event["path"] 
-    //     && event["path"].filter((input: HTMLElement) => input['_internal_id'] == this._internal_id)[0] 
-    //     && event["path"].filter((input: HTMLElement) => input['nodeName'] == "BCM-LIST-ITEM")[0]
-    //     && this.multiSelect === false
-    // )
+    var path = event.path || (event.composedPath && event.composedPath());
     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]
+      || (path
+        && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+        && path.filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0]
         && this.multiSelect === false)) {
       if (this.isShow === true) {
         this.hide();
       }
     }
-    // if ( event["path"]
-    // && event["path"].filter((input: HTMLElement) => input['id'] == "other-tag")[0]
-    // && event["path"].filter((input: HTMLElement) => input['_internal_id'] == this._internal_id)[0] ){
-    //     event.preventDefault();
-    //     event.stopPropagation();
-    //     console.log("clone aç")
-    //     // this.show("other")
-    //     const elementId = "bcm-clone-list-" + this._internal_id
-    //     var element:any = document.getElementById(elementId)
-    //     console.log(element)
-    //     // setTimeout(() => {
-    //         // this.hide()
-    //         element.show();
-    //     // }, 100);
-    // }
+  }
+  /**
+   * @desc
+   */
+  wheelEvent(event) {
+    if (!this.el.contains(event.target)) {
+      if (this.isShow === true) {
+        this.hide();
+      }
+    }
   }
   /**
    * @desc
    */
   scrollEvent(event) {
     if (!this.el.contains(event.target)) {
-      if (this.isShow) {
+      if (this.isShow === true) {
         this.hide();
       }
     }
@@ -594,27 +590,28 @@ export class BcmList {
    * @descc
    
    */
-  listenSearchResult(e) {
-    if (e.isEvent == undefined) {
-      if (e["path"] && e["path"].filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+  listenSearchResult(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (event.isEvent == undefined) {
+      if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
         // var childs: any[] = getChilds(this.el, 'bcm-list-item')
         var childs = this.el.shadowRoot.querySelectorAll("bcm-list-item");
         childs.forEach(element => {
           element.classList.add("hidden");
         });
-        if (e.detail.length > 0) {
-          if (e.detail[0] == -1) {
+        if (event.detail.length > 0) {
+          if (event.detail[0] == -1) {
             this.totalSearch = 0;
             this.empty = true;
           }
           else {
-            this.totalSearch = e.detail.length;
+            this.totalSearch = event.detail.length;
             this.empty = false;
             if (this.dataLength > 0) {
               childs.forEach(element => {
                 if (this.highlight) {
-                  e.target.addEventListener('bcm-on-search-value', async (e) => {
-                    var searchValue = await e.detail;
+                  event.target.addEventListener('bcm-on-search-value', async (event) => {
+                    var searchValue = await event.detail;
                     var inputText = element.shadowRoot.getElementById("text");
                     inputText = inputText.textContent || inputText.innerText || "";
                     if (searchValue) {
@@ -628,14 +625,14 @@ export class BcmList {
                     element.shadowRoot.getElementById("text").innerHTML = inputText;
                   });
                 }
-                if (e.detail.indexOf(element._id) >= 0) {
+                if (event.detail.indexOf(element._id) >= 0) {
                   element.classList.remove("hidden");
                 }
               });
             }
           }
         }
-        else if (e.detail === true) {
+        else if (event.detail === true) {
           this.totalSearch = this.dataLength;
           this.empty = false;
           childs.forEach(element => {
@@ -651,7 +648,6 @@ export class BcmList {
    
    */
   sendSelectId(id, status = true) {
-    // console.log(this.items.find( e => e[ this.objectMapping['id'] ] == id ))
     if (this.items && this.items.find(e => e[this.objectMapping['id']] == id)) {
       if (this.isRendered === false) {
         this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
@@ -695,7 +691,7 @@ export class BcmList {
    * @descc
    */
   handleListSelected(event) {
-    // var path = event.path || (event.composedPath && event.composedPath());
+    var path = event.path || (event.composedPath && event.composedPath());
     // console.log(path);
     if (this.isInternal(event) || (!this.isInternal(event) && this.isInternalSlot(event))) {
       var status = false;
@@ -727,8 +723,8 @@ export class BcmList {
         }
       }
       if (this.isInternalSlot(event)) {
-        if (selectedItem = event.path[0]) {
-          this.selectedId = event.path[0].id;
+        if (selectedItem = path[0]) {
+          this.selectedId = path[0].id;
           this.value = event.detail;
           return true;
         }
@@ -847,32 +843,35 @@ export class BcmList {
    * @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;
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['id']
+      && path[0].attributes['id'].value;
     return detect;
   }
   /**
    * @desc
    */
   isInternalSlot(event) {
-    const detect = event.path
-      && event.path[0]
-      && lowercase(event.path[0].tagName) === 'bcm-list-item'
-      && this.el.contains(event.path[0]);
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && lowercase(path[0].tagName) === 'bcm-list-item'
+      && this.el.contains(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;
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['_internal_id']
+      && path[0].attributes['_internal_id'].value;
     return detect == this._internal_id;
   }
   /**
@@ -981,7 +980,7 @@ export class BcmList {
         // }
       });
       if (this.checkStatus === true) {
-        this.checked(selectedIDs);
+        this.checked(selectedIDs, false);
       }
       else {
         this.unChecked(selectedIDs);
@@ -995,9 +994,9 @@ export class BcmList {
           // element.unChecked(this.selectedId)
         }
       }
-      this.listChecked.emit(this.checklist);
-      this.value = this.checklist;
-      this.sendSelectValue();
+      // this.listChecked.emit( this.checklist )
+      // this.value = this.checklist
+      // this.sendSelectValue()
     }
     this.handleIndeterminateStatus();
   }
@@ -1006,7 +1005,6 @@ export class BcmList {
    */
   sendSelectValue() {
     if (this.type === 'select' || this.type === 'autocomplete') {
-      // console.log(this.value)
       const select = document.getElementById("bcm-list-select-" + this._id);
       if (select) {
         if (this.multiSelect === true) {
@@ -1025,6 +1023,7 @@ export class BcmList {
       'size-3': this.size === 'large',
     });
     const hostClasses = cs(this.hidden ? 'hidden' : null, 'type-' + this.type, {
+      'error': this.captionType == 'error' ? true : false,
       'show': this.isShow,
       'flex': this.minHeight != null || this.maxHeight != null,
       'full-width': this.fullWidth
@@ -1033,6 +1032,7 @@ export class BcmList {
       'show': this.searchable,
     });
     const footer = cs('footer');
+    const captionClasses = cs('size-1', 'input-caption', 'caption-' + this.captionType);
     var customStyle = {
       'height': this.minHeight != null || this.maxHeight != null ? 'auto' : this.height,
       'min-height': this.minHeight != null ? this.minHeight : null,
@@ -1043,27 +1043,43 @@ export class BcmList {
       'max-width': this.maxWidth != null ? this.maxWidth == "100%" || this.maxWidth == "auto" ? this.linkedElementWidth : this.maxWidth : null,
     };
     return (h(Host, { class: hostClasses, style: customStyle },
-      this.searchable === true && (h("div", { class: searchContainer },
-        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 }),
-        h("bcm-divider", null))),
-      this.multiSelect === true && (h("div", { class: "check-container" },
-        h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) },
-          h("div", { class: "check-content" },
-            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"),
-        h("div", { class: "divider" },
-          h("bcm-divider", null)))),
-      h("div", { class: classes },
-        h("slot", null),
-        h("div", { class: "list" }),
-        h("div", { class: "spinner first-run" },
-          h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" }))),
-      this.infoFooter == true && (h("div", { class: footer },
-        h("bcm-text", { scale: "size-1", color: "grey-8" },
-          h("span", { id: "selected-item" }),
-          " Total ",
-          h("span", { id: "in-total" }, "0"),
-          " items found.")))));
+      (this.type === 'default' && this.processType === 'default' && this.label) && (h("label", { class: "label size-1" },
+        " ",
+        this.label,
+        " ",
+        this.required && ('*'),
+        "  ")),
+      h("main", { style: customStyle },
+        this.searchable === true && (h("div", { class: searchContainer },
+          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 }),
+          h("bcm-divider", null))),
+        h("div", { class: classes },
+          this.multiSelect === true && (h("div", { class: "check-container" },
+            h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) },
+              h("div", { class: "check-content" },
+                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"),
+            h("div", { class: "divider" },
+              h("bcm-divider", null)))),
+          h("slot", null),
+          h("div", { class: "list" }),
+          h("div", { class: "spinner first-run" },
+            h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" }))),
+        this.infoFooter == true && (h("div", { class: footer },
+          h("bcm-text", { scale: "size-1", color: "grey-8" },
+            h("span", { id: "selected-item" }),
+            " Total ",
+            h("span", { id: "in-total" }, "0"),
+            " items found.")))),
+      (this.type === 'default' && this.processType === 'default' && !this.noCaption) && (h("div", { class: "caption-area" }, this.captionType == "error"
+        ? h("span", { class: captionClasses },
+          " ",
+          this.captionError,
+          " ")
+        : this.caption && h("span", { class: captionClasses },
+          " ",
+          this.caption,
+          " ")))));
   }
   static get is() { return "bcm-list"; }
   static get encapsulation() { return "shadow"; }
@@ -1712,7 +1728,9 @@ export class BcmList {
     }
   }; }
   static get states() { return {
-    "searchText": {}
+    "searchText": {},
+    "captionCache": {},
+    "captionTypeCache": {}
   }; }
   static get events() { return [{
       "method": "listSelected",
@@ -1744,6 +1762,21 @@ export class BcmList {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "change",
+      "name": "bcm-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "hide": {
@@ -1973,6 +2006,25 @@ export class BcmList {
           }]
       }
     },
+    "resetCaption": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
     "toggleChecked": {
       "complexType": {
         "signature": "(checkedItems?: Array<string> | string) => Promise<void>",
@@ -2078,6 +2130,9 @@ export class BcmList {
   static get watchers() { return [{
       "propName": "isShow",
       "methodName": "handleOpen"
+    }, {
+      "propName": "value",
+      "methodName": "handleChange"
     }]; }
   static get listeners() { return [{
       "name": "click",
@@ -2085,6 +2140,12 @@ export class BcmList {
       "target": "window",
       "capture": true,
       "passive": false
+    }, {
+      "name": "wheel",
+      "method": "wheelEvent",
+      "target": "window",
+      "capture": true,
+      "passive": true
     }, {
       "name": "scroll",
       "method": "scrollEvent",