bromcom-ui 2.3.46 → 2.3.50

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

@@ -12,13 +12,21 @@ export class BcmListSelect {
     this._id = (Math.random() * 4).toString(16).replace('.', '');
     this._list_id = null;
     this.value = null;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.type = 'default';
     this.size = 'medium';
     this.placeholder = "Choose an option";
     this.noCaption = false;
     this.captionType = 'default';
     this.fullWidth = false;
     this.required = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.multiSelect = false;
+    this.searchData = null;
+    this.searchPlaceholder = "Search";
+    this.searchFields = ['text'];
+    this.returnField = "id";
+    this.searchSub = "items";
+    this.searchText = "";
     this.captionCache = null;
     this.captionTypeCache = null;
     this.isOpen = false;
@@ -46,8 +54,8 @@ export class BcmListSelect {
       this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
       this.selectAreaWidth = this.selectArea.clientWidth;
     }
+    this.selectArea.style.width = "100%";
     this.handleTagControl();
-    this.selectArea.style.width = this.selectAreaWidth - 16 + "px";
     if (sessionStorage.getItem(this._internal_id + "-config")) {
       this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
     }
@@ -66,20 +74,85 @@ export class BcmListSelect {
   handleBlur() {
     this.blur.emit();
   }
+  /**
+   * @desc
+   */
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
   /**
    * @descc
    */
-  async handleOpen() {
-    if (this._list_id !== null) {
-      const list = document.getElementById(this._list_id);
-      if (list.classList.contains("show") === true) {
-        list.hide();
+  async handleOpen(list = "default") {
+    var element = null;
+    var list_id = null;
+    switch (list) {
+      case "default":
+        list_id = this._list_id;
+        break;
+      case "other":
+        list_id = "bcm-clone-list-" + this._internal_id;
+        break;
+      default: break;
+    }
+    element = document.getElementById(list_id);
+    if (element != null) {
+      if (element.classList.contains("show") === true) {
+        element.hide();
       }
       else {
-        list.show();
+        element.show();
       }
     }
   }
+  /**
+   * @desc
+   */
+  async hide(list = "default") {
+    var element = null;
+    var list_id = null;
+    switch (list) {
+      case "default":
+        list_id = this._list_id;
+        break;
+      case "other":
+        list_id = "bcm-clone-list-" + this._internal_id;
+        break;
+      default: break;
+    }
+    element = document.getElementById(list_id);
+    if (element != null) {
+      element.hide();
+    }
+  }
+  /**
+   * @desc
+   */
+  async show(list = "default") {
+    var element = null;
+    var list_id = null;
+    switch (list) {
+      case "default":
+        list_id = this._list_id;
+        break;
+      case "other":
+        list_id = "bcm-clone-list-" + this._internal_id;
+        break;
+      default: break;
+    }
+    element = document.getElementById(list_id);
+    if (element != null) {
+      element.show();
+    }
+  }
+  /**
+   * @desc
+   */
+  async toggle(list = "default") {
+    this.handleOpen(list);
+  }
   /**
    * @descc
    */
@@ -90,6 +163,26 @@ export class BcmListSelect {
    * @desc
    */
   async config(_config) {
+    this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
+    this.selectArea.style.width = "100%";
+    this.selectAreaWidth = this.selectArea.clientWidth;
+    this.handleTagControl();
+    this.selectArea.style.width = this.selectAreaWidth - 16 + "px";
+    if (_config['searchPlaceholder']) {
+      this.searchPlaceholder = _config['searchPlaceholder'];
+    }
+    if (_config['searchFields']) {
+      this.searchFields = _config['searchFields'];
+    }
+    if (_config['returnField']) {
+      this.returnField = _config['returnField'];
+    }
+    if (_config['searchSub']) {
+      this.searchSub = _config['searchSub'];
+    }
+    if (_config['searchText']) {
+      this.searchText = _config['searchText'];
+    }
     if (_config['mapping']) {
       if (_config['mapping']['id']) {
         this.objectMapping['id'] = _config['mapping']['id'];
@@ -108,55 +201,68 @@ export class BcmListSelect {
    */
   async setValue(value, _id = "id", _text = "text") {
     var newValue = value;
-    // console.log('asd: ', value)
+    // this.searchData = JSON.parse(value as string)
     this.handleLoading(true);
     this.selectData = [];
     this.otherList = [];
     if (typeof value == 'string') {
-      this.selectText = String(value);
-      this.value = this.selectText;
+      if (this.value !== value) {
+        this.selectText = String(value);
+        this.value = this.selectText;
+      }
       this.handleLoading(false);
     }
     else {
-      newValue.forEach(element => {
-        element[this.objectMapping['selected']] = true;
-      });
-      value.forEach(item => {
-        // console.log(item[id] + " " + item[text])
-        this.selectData.push({ id: item[_id], text: item[_text], selected: true });
-      });
-      this.otherList = newValue;
-      this.value = this.selectData;
+      if (value) {
+        value.forEach(item => {
+          // console.log(item[id] + " " + item[text])
+          this.selectData.push({ id: item[_id], text: item[_text], selected: true });
+        });
+      }
+      if (this.value !== this.selectData) {
+        this.value = this.selectData;
+        if (value) {
+          newValue.forEach(element => {
+            // element[this.objectMapping['id']] = element[this.objectMapping['id']]
+            element[this.objectMapping['selected']] = true;
+          });
+        }
+        this.otherList = newValue;
+        var visibleTags = this.el.shadowRoot.getElementById("visible-tags");
+        if (visibleTags) {
+          visibleTags.innerHTML = " ";
+          const maxTags = Math.ceil((this.selectAreaWidth - 16) / 40);
+          const visibleSelectData = this.selectData.slice(0, maxTags);
+          visibleSelectData.map((item) => {
+            const newTag = document.createElement("span");
+            newTag.setAttribute("id", String(item["id"]));
+            newTag.setAttribute("value", item["text"]);
+            newTag.setAttribute("title", item["text"]);
+            newTag.setAttribute("_internal_id", this._internal_id);
+            // newTag.customStyle = customStyleTag
+            newTag.style.opacity = "0";
+            newTag.style.position = "absolute";
+            newTag.classList.add("tag");
+            newTag.classList.add("dissmisable");
+            newTag.classList.add("size-1");
+            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"> '
+              + '<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"/>'
+              + '</g>'
+              + '</svg>'
+              + '</span>';
+            visibleTags.appendChild(newTag);
+          });
+        }
+      }
       // this.selectHiddenData = this.value
     }
     // console.log('this.otherList: ', this.otherList)
-    var visibleTags = this.el.shadowRoot.getElementById("visible-tags");
-    if (visibleTags) {
-      const customStyleTag = {
-        "cursor": "pointer",
-        "max-width": "164px",
-        "text-overflow": "ellipsis",
-        "white-space": "nowrap",
-        "overflow": "hidden",
-        "display": "block"
-      };
-      visibleTags.innerHTML = " ";
-      const maxTags = Math.ceil((this.selectAreaWidth - 16) / 40);
-      const visibleSelectData = this.selectData.slice(0, maxTags);
-      visibleSelectData.map((item) => {
-        const newTag = document.createElement("bcm-tag");
-        newTag.setAttribute("id", String(item["id"]));
-        newTag.setAttribute("value", item["text"]);
-        newTag.setAttribute("title", item["text"]);
-        newTag.setAttribute("type", "dissmisable");
-        newTag.setAttribute("_internal_id", this._internal_id);
-        newTag.customStyle = customStyleTag;
-        newTag.style.opacity = "0";
-        newTag.style.position = "absolute";
-        newTag.classList.add("tag");
-        visibleTags.appendChild(newTag);
-      });
-    }
+    // this.resetCaption()
     return this.value;
   }
   /**
@@ -189,10 +295,10 @@ export class BcmListSelect {
     this.selectHiddenData = [];
     const tagcontainer = this.el.shadowRoot.getElementById("tagcontainer");
     if (tagcontainer) {
-      var tags = tagcontainer.querySelectorAll("bcm-tag.tag");
+      var tags = tagcontainer.querySelectorAll(".tag");
       var tagsWidth = 0;
       // var otherStatus = false
-      var otherTagWidth = 130 + 2;
+      var otherTagWidth = 135 + 2;
       var padding = 16;
       var visibleTags = [];
       tags.forEach(element => {
@@ -200,10 +306,10 @@ export class BcmListSelect {
         element["style"]["opacity"] = "0";
         element["style"]["position"] = "absolute";
       });
-      await delay(100);
       tags.forEach(element => {
-        if ((this.selectAreaWidth - padding) > (element.clientWidth + 2 + tagsWidth)) {
-          tagsWidth += element.clientWidth + 2;
+        var clientWidth = element.clientWidth <= 200 ? element.clientWidth : 200;
+        if ((this.selectAreaWidth - padding) > (clientWidth + 2 + tagsWidth)) {
+          tagsWidth += clientWidth + 2;
           element["style"]["opacity"] = "1";
           element["style"]["position"] = "relative";
         }
@@ -216,14 +322,16 @@ export class BcmListSelect {
         if ((this.selectAreaWidth - padding) < (calcOther === true ? tagsWidth + otherTagWidth : tagsWidth)) {
           visibleTags = Array.from(tags).filter(e => e["hidden"] === false);
           if (visibleTags[visibleTags.length - 1]) {
-            tagsWidth -= visibleTags[visibleTags.length - 1].clientWidth + 2;
+            var clientWidth = visibleTags[visibleTags.length - 1].clientWidth <= 200 ? visibleTags[visibleTags.length - 1].clientWidth : 200;
+            tagsWidth -= clientWidth + 2;
             visibleTags[visibleTags.length - 1]["hidden"] = true;
             removeTag(calcOther);
           }
         }
       };
       removeTag();
-      tags = tagcontainer.querySelectorAll("bcm-tag.tag");
+      await delay(100);
+      tags = tagcontainer.querySelectorAll(".tag");
       var hiddenData = Array.from(tags).filter(e => e["hidden"] === true);
       const otherTagcontainer = this.el.shadowRoot.getElementById("other-container");
       if (Number(hiddenData.length) > 0) {
@@ -256,9 +364,10 @@ export class BcmListSelect {
         cloneList.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
       }
       // console.log('selectHiddenData: ',    this.selectHiddenData )
-      cloneList.setData(this.selectHiddenData);
-      cloneList.show();
+      cloneList.setDataOther(this.selectHiddenData);
+      // cloneList.show()
     }
+    // await delay(100)
     this.handleLoading(false);
   }
   /**
@@ -273,18 +382,18 @@ export class BcmListSelect {
       element = document.createElement("bcm-list");
       var el = document.getElementById(this._list_id);
       for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) {
-        // arr.push(atts[i].nodeName);
-        // console.log(atts[i].nodeName)
-        // console.log(atts[i].nodeValue)
         element.setAttribute(atts[i].nodeName, atts[i].nodeValue);
       }
       element.setAttribute("id", elementId);
       element.setAttribute("_list_id", this._list_id);
-      // element.setAttribute("_list_select_id", this._id)
+      element.setAttribute("_list_select_id", this._id);
       element.setAttribute("_internal_id", otherListInternalId);
       element.searchable = true;
+      element.infoFooter = false;
       element.type = "default";
+      element.processType = "deselect";
       element.setAttribute("linked-component", this._id);
+      element.linkedComponent = this._id;
       element.multiSelect = true;
       const parentNode = this.el.parentNode;
       parentNode.insertBefore(element, this.el);
@@ -298,15 +407,70 @@ export class BcmListSelect {
   /**
    * @descc
    */
-  // handleClickTag(){
-  // }
+  inputChange(e) {
+    this.search(e);
+  }
+  search(value) {
+    const element = document.getElementById(this._list_id);
+    if (element != null) {
+      element.setSearch(value);
+    }
+  }
+  /**
+   * @desc
+   */
+  async handleClick(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0]) {
+      const cloneElementId = "bcm-clone-list-" + this._internal_id;
+      const cloneElement = document.querySelector("#" + cloneElementId);
+      const element = document.querySelector("#" + this._list_id);
+      if (path.filter((input) => input['id'] == "close-button")[0]
+        && path.filter((input) => input['className'] == "tag dissmisable size-1")[0]
+        && path.filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"]) {
+        event.preventDefault();
+        event.stopPropagation();
+        const selectedID = path.filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"];
+        if (element) {
+          element.unChecked(selectedID);
+        }
+      }
+      if (path.filter((input) => input['id'] == "other-tag")[0]) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (path.filter((input) => input['id'] == "close")[0]) {
+          if (cloneElement) {
+            if (await cloneElement.openStatus() === true) {
+              if (element) {
+                element.show();
+              }
+            }
+          }
+          var selectedIDs = [];
+          this.selectHiddenData.forEach(item => {
+            selectedIDs.push(item[this.objectMapping['id']]);
+          });
+          if (element) {
+            element.unChecked(selectedIDs);
+          }
+        }
+        else {
+          if (cloneElement) {
+            setTimeout(() => {
+              cloneElement.show();
+            }, 100);
+          }
+        }
+      }
+    }
+  }
   render() {
     const { label, fullWidth, required, selectText, selectData, placeholder, clearable, value, isOpen, noCaption, captionType, captionError, caption, size, disabled } = this;
     // const classes = cs(
     //     'card',
     //     this.size
     // )
-    const hostClasses = cs(this.hidden ? 'hidden' : null, {
+    const hostClasses = cs(this.hidden ? 'hidden' : null, 'type-' + this.type, {
       'full-width': fullWidth
     });
     const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
@@ -344,24 +508,25 @@ export class BcmListSelect {
           " ",
           label,
           " ",
-          required && ('*'),
+          required === true && ('*'),
           "  "),
         h("div", { id: "selected-container", class: selected, onClick: () => this.handleOpen(), tabIndex: -1 },
           h("span", { class: selectedText, title: selectText !== null && (selectText) },
             h("div", { class: "spinner first-run" }),
-            (selectText !== null && (h("div", { class: "text-content" }, selectText))),
-            (selectText === null && (h("span", { id: "tagcontainer", class: "tag-container" },
+            this.type === 'select' && (selectText !== null && (h("div", { class: "text-content" }, selectText))),
+            (this.type === 'select' || this.type === 'autocomplete' && this.multiSelect === true) && (selectText === null && (h("span", { id: "tagcontainer", class: "tag-container" },
               h("span", { id: "visible-tags" }),
               h("span", { id: "other-container" }, h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleOtherTag, type: "dissmisable", id: "other-tag" }))))),
-            (selectText === null && selectData.length === 0 && placeholder !== null && (h("span", { class: "placeholder" },
+            this.type === 'select' && (selectText === null && selectData.length === 0 && placeholder !== null && (h("span", { class: "placeholder" },
               " ",
               placeholder,
-              " ")))),
-          h("div", { class: "buttons" },
+              " "))),
+            this.type === 'autocomplete' && (h("bcm-input", { "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", value: this.searchText, "no-caption": true, "no-margin": true, type: "search", clearable: true }))),
+          this.type === 'select' && (h("div", { class: "buttons" },
             clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) },
               h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))),
             h("span", { class: isOpen ? 'open' : 'close' },
-              h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" })))),
+              h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" }))))),
         noCaption === false && (h("div", { class: "caption-area" }, captionType == "error"
           ? h("span", { class: captionClasses },
             " ",
@@ -453,6 +618,47 @@ export class BcmListSelect {
       "reflect": false,
       "defaultValue": "null"
     },
+    "_internal_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_internal_id",
+      "reflect": true,
+      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TypeProp",
+        "resolved": "\"autocomplete\" | \"default\" | \"multiselect\" | \"select\"",
+        "references": {
+          "TypeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
     "size": {
       "type": "string",
       "mutable": false,
@@ -584,9 +790,14 @@ export class BcmListSelect {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
+        "original": "captionTypeProp",
         "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
-        "references": {}
+        "references": {
+          "captionTypeProp": {
+            "location": "import",
+            "path": "../../../types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -668,12 +879,12 @@ export class BcmListSelect {
       "reflect": false,
       "defaultValue": "false"
     },
-    "_internal_id": {
-      "type": "string",
+    "multiSelect": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
@@ -682,9 +893,27 @@ export class BcmListSelect {
         "tags": [],
         "text": ""
       },
-      "attribute": "_internal_id",
-      "reflect": true,
-      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
+      "attribute": "multiselect",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "searchData": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search-data",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get states() { return {
@@ -753,6 +982,91 @@ export class BcmListSelect {
       }
     }]; }
   static get methods() { return {
+    "resetCaption": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "(list?: \"default\" | \"other\") => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "show": {
+      "complexType": {
+        "signature": "(list?: \"default\" | \"other\") => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "toggle": {
+      "complexType": {
+        "signature": "(list?: \"default\" | \"other\") => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
     "config": {
       "complexType": {
         "signature": "(_config: Array<object>) => Promise<object[]>",
@@ -817,5 +1131,11 @@ export class BcmListSelect {
       "target": "window",
       "capture": false,
       "passive": true
+    }, {
+      "name": "click",
+      "method": "handleClick",
+      "target": "window",
+      "capture": true,
+      "passive": false
     }]; }
 }