bromcom-ui 2.3.65 → 2.3.69

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

@@ -0,0 +1,1339 @@
+import { Component, h, Element, Prop, Host, Event, State, Method, Listen, Watch } from '@stencil/core';
+import cs from 'classnames';
+import { delay, pluralize } from '../../../utils/utils';
+export class BcmListSelect {
+  constructor() {
+    this.objectMapping = {
+      'id': "id",
+      'text': "text",
+      'selected': "selected",
+    };
+    this.hidden = false;
+    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.variableText = 'item';
+    this.size = 'medium';
+    this.placeholder = "Choose an option";
+    this.noCaption = false;
+    this.captionType = 'default';
+    this.fullWidth = false;
+    this.required = false;
+    this.multiSelect = false;
+    // search variables 
+    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;
+    this.firstRun = true;
+    this.selectArea = null;
+    this.selectAreaWidth = 0;
+    this.selectHiddenData = [];
+    this.otherList = [];
+    this.selectText = null;
+    this.selectData = [];
+    this.focusInput = false;
+  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() {
+    this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
+    this.selectAreaWidth = this.selectArea.clientWidth;
+    setTimeout(() => {
+      const spinner = this.el.shadowRoot.querySelector('.spinner');
+      spinner.classList.remove("first-run");
+    }, 100);
+  }
+  componentWillRender() { }
+  componentDidRender() {
+    if (this.selectAreaWidth === 0) {
+      this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
+      this.selectAreaWidth = this.selectArea.clientWidth;
+    }
+    this.selectArea.style.width = "100%";
+    this.handleTagControl();
+    if (sessionStorage.getItem(this._internal_id + "-config")) {
+      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+    }
+  }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  /**
+   * @descc
+   */
+  handleFocus() {
+    this.focus.emit();
+  }
+  /**
+   * @descc
+   */
+  handleBlur(type = "host") {
+    type === "input" && (this.focusInput = false);
+    this.blur.emit();
+  }
+  /**
+   * @desc
+   */
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  /**
+   * @desc
+   */
+  async setClear() {
+    this.selectText = null;
+    this.value = null;
+    this.selectData = [];
+  }
+  /**
+   * @descc
+   */
+  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 {
+        element.show();
+      }
+    }
+    // if ( this.type === "autocomplete" ) {
+    //     const autocompleteInput:any = this.el.shadowRoot.querySelector("#autocomplete")
+    //     if ( autocompleteInput ) {
+    //         // var inputValue = await autocompleteInput.getValue()
+    //         // if ( inputValue && inputValue.length > 0 ) {
+    //             if ( element != null ){
+    //                 // this.setClear()
+    //                 // autocompleteInput.setFocus()
+    //                 // await delay(100)
+    //                 autocompleteInput.select()
+    //                 // if( element.classList.contains("show") === true ) {
+    //                 //     this.setClear()
+    //                 //     autocompleteInput.setFocus()
+    //                 //     autocompleteInput.select()
+    //                 // }
+    //             }
+    //         // }
+    //     }
+    // }
+  }
+  /**
+   * @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
+   */
+  handleChange(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path
+      && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+      && path.filter((input) => input['id'] == "autocomplete") != undefined) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  /**
+   * @descc
+   */
+  handleClear(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path
+      && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+      && path.filter((input) => input['id'] == "autocomplete") != undefined) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.clickClear();
+    }
+  }
+  /**
+   * @descc
+   */
+  clickClear(event = null) {
+    const element = document.querySelector("#" + this._list_id);
+    if (element) {
+      element.setClear(false);
+    }
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  /**
+   * @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'];
+      }
+      if (_config['mapping']['text']) {
+        this.objectMapping['text'] = _config['mapping']['text'];
+      }
+      if (_config['mapping']['selected']) {
+        this.objectMapping['selected'] = _config['mapping']['selected'];
+      }
+    }
+    return _config;
+  }
+  /**
+   * @descc
+   */
+  async setValue(value, _id = "id", _text = "text") {
+    // debugger;
+    // if ( !value || value.length == 0 ) {
+    //     this.selectText = null; 
+    //     this.value = null; 
+    //     this.selectData = []
+    //     this.otherList = []
+    //     return false;
+    // }
+    let val = "";
+    if (this.multiSelect === false) {
+      if (value && value.length > 0) {
+        val = value[0][_text];
+      }
+      value = val;
+    }
+    var newValue = value;
+    const autocompleteInput = this.el.shadowRoot.querySelector("#autocomplete");
+    if (autocompleteInput) {
+      autocompleteInput.setValue(value);
+      this.searchText = value;
+      this.search("", false);
+    }
+    // this.selectText = newValue
+    // this.searchData = JSON.parse(value as string)
+    this.handleLoading(true);
+    this.selectData = [];
+    this.otherList = [];
+    if (typeof value == 'string') {
+      if (this.value !== value) {
+        this.selectText = String(val);
+        this.value = this.selectText;
+      }
+      this.handleLoading(false);
+    }
+    else {
+      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" 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" />'
+              + '<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>';
+            visibleTags.appendChild(newTag);
+          });
+        }
+      }
+      // this.selectHiddenData = this.value
+    }
+    // console.log('this.otherList: ', this.otherList)
+    // this.resetCaption()
+    // console.log('this.value: ', this.value)
+    // if ( this.type === "autocomplete" ) {
+    //     const autocompleteInput:any = this.el.shadowRoot.querySelector("#autocomplete")
+    //     if ( autocompleteInput ) {
+    //         autocompleteInput.setValue(this.value)
+    //         // autocompleteInput.select()
+    //     }
+    // }
+    return this.value;
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  handleLoading(show = false) {
+    const spinner = this.el.shadowRoot.querySelector('.spinner');
+    if (show == true) {
+      spinner.classList.add("show");
+    }
+    else {
+      spinner.classList.remove("show");
+    }
+  }
+  /**
+   * @descc
+   */
+  resizeEvent() {
+    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";
+  }
+  /**
+   * @descc
+   */
+  async handleTagControl() {
+    this.selectHiddenData = [];
+    const tagcontainer = this.el.shadowRoot.getElementById("tagcontainer");
+    if (tagcontainer) {
+      var tags = tagcontainer.querySelectorAll(".tag");
+      var tagsWidth = 0;
+      // var otherStatus = false
+      var otherTagWidth = 135 + 2;
+      var padding = 16;
+      var visibleTags = [];
+      tags.forEach(element => {
+        element["hidden"] = false;
+        element["style"]["opacity"] = "0";
+        element["style"]["position"] = "absolute";
+      });
+      tags.forEach(element => {
+        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";
+        }
+        else {
+          element["hidden"] = true;
+          // otherStatus = true
+        }
+      });
+      const removeTag = (calcOther = false) => {
+        if ((this.selectAreaWidth - padding) < (calcOther === true ? tagsWidth + otherTagWidth : tagsWidth)) {
+          visibleTags = Array.from(tags).filter(e => e["hidden"] === false);
+          if (visibleTags[visibleTags.length - 1]) {
+            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();
+      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) {
+        removeTag(true);
+        if (otherTagcontainer) {
+          otherTagcontainer.style.display = "flex";
+          const otherTag = otherTagcontainer.querySelector("bcm-tag");
+          if (otherTag) {
+            this.selectHiddenData = this.otherList;
+            Array.from(tags).filter(e => e["hidden"] === false).forEach(element => {
+              this.selectHiddenData = this.selectHiddenData.filter(e => String(e[this.objectMapping['id']]) !== String(element.id));
+            });
+            otherTag.setAttribute("value", this.selectHiddenData.length + " " + pluralize(this.variableText, this.selectHiddenData.length) + " selected");
+            var result = Object.keys(this.selectHiddenData).map((key) => (this.selectHiddenData[key][this.objectMapping['text']]).substring(0, 15) + "...").slice(0, 10) + "\r\n...";
+            const hiddenTagsString = result.toString().split(',').join("\r\n");
+            otherTag.setAttribute("title", hiddenTagsString);
+          }
+        }
+        const cloneList = this.listIsInitialize();
+        if (cloneList) {
+          if (sessionStorage.getItem(this._internal_id + "-config")) {
+            cloneList.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+          }
+          // console.log('selectHiddenData: ',    this.selectHiddenData )
+          cloneList.setDataOther(this.selectHiddenData);
+          // cloneList.show()
+        }
+      }
+      else {
+        if (otherTagcontainer) {
+          otherTagcontainer.style.display = "none";
+        }
+      }
+    }
+    else { }
+    // await delay(100)
+    this.handleLoading(false);
+  }
+  /**
+   * @desc
+   */
+  valueWatch(newValue) {
+    if (Array.isArray(newValue) && newValue.length == 0) {
+      this.value = "";
+    }
+  }
+  /**
+  * @desc
+  */
+  listIsInitialize() {
+    // console.log("olusturuldu")
+    var element;
+    const elementId = "bcm-clone-list-" + this._internal_id;
+    const otherListInternalId = (Math.random() * 4).toString(16).replace('.', '');
+    if (!document.getElementById(elementId)) {
+      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++) {
+        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("_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);
+    }
+    else {
+      element = document.getElementById(elementId);
+    }
+    // 
+    return element;
+  }
+  /**
+   * @descc
+   */
+  inputChange(e) {
+    if (this.searchText !== e) {
+      this.searchText = e;
+      this.search(e);
+    }
+  }
+  search(value, show = true) {
+    const element = document.getElementById(this._list_id);
+    if (element != null) {
+      element.setSearch(value);
+      if (show) {
+        this.show();
+      }
+    }
+    // if ( this.type === "autocomplete" ) {
+    //     const autocompleteInput:any = this.el.shadowRoot.querySelector("#autocomplete")
+    //     if ( autocompleteInput ) {
+    //         autocompleteInput.setFocus()
+    //         // autocompleteInput.select()
+    //     }
+    // }
+  }
+  /**
+   * @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);
+          }
+        }
+      }
+      if (this.type === "autocomplete") {
+        if (path.filter((input) => input['id'] == this._id)[0] !== undefined) {
+          // if ( path.filter((input: HTMLElement) => input['id'] == "autocomplete")[0] 
+          //   || path.filter((input: HTMLElement) => input['id'] == "autocomplete-text")[0]  ) { 
+          const autocompleteInput = this.el.shadowRoot.querySelector("#autocomplete");
+          if (autocompleteInput) {
+            // autocompleteInput.setClear()
+            // if ( element ) {
+            //     element.setClear()
+            // }      
+            // this.setClear()
+            // await delay(100)
+            // autocompleteInput.setFocus()
+            await delay(100);
+            autocompleteInput.select();
+            // this.focusInput = true
+          }
+        }
+      }
+    }
+  }
+  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, 'type-' + this.type, {
+      'full-width': fullWidth
+    });
+    const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
+    const container = cs('container', {
+      'error': captionType == 'error' ? true : false,
+      'full-width': fullWidth
+    });
+    const selectedText = cs('selected-text');
+    const selected = cs('selected', 'selected-' + size, {
+      'size-3': size === 'large',
+      'size-2': size === 'small' || size === 'medium',
+      'disabled': disabled
+    });
+    // const customStyleTag = {
+    //     'cursor': 'pointer',
+    //     'max-width': '164px',
+    //     'text-overflow': 'ellipsis',
+    //     'white-space': 'nowrap',
+    //     'overflow': 'hidden',
+    //     'display': 'block'
+    // }
+    const customStyleOtherTag = {
+      'cursor': 'pointer',
+      'white-space': 'nowrap'
+    };
+    return (
+    // <Host class={hostClasses}>
+    //     <div class={classes}>
+    //       <slot />
+    //     </div>
+    // </Host>
+    h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() },
+      h("div", { class: container },
+        label && h("div", null,
+          h("bcm-label", { onClick: () => this.handleOpen(), tooltip: this.tooltip, type: captionType, value: label, required: required })),
+        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" }),
+            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" }))))),
+            this.type === 'select' && (selectText === null && selectData.length === 0 && placeholder !== null && (h("span", { class: "placeholder" },
+              " ",
+              placeholder,
+              " "))),
+            this.type === 'autocomplete' && (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' && (h("div", { class: "buttons" },
+            clearable && value && (h("button", { id: "clear-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" }))))),
+        noCaption === false && (h("div", { class: "caption-area" }, captionType == "error"
+          ? h("span", { class: captionClasses },
+            " ",
+            captionError,
+            " ")
+          : caption && h("span", { class: captionClasses },
+            " ",
+            caption,
+            " "))))));
+  }
+  static get is() { return "bcm-list-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["list-select.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["list-select.css"]
+  }; }
+  static get properties() { return {
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
+    },
+    "_list_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_list_id",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "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'"
+    },
+    "variableText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variable-text",
+      "reflect": false,
+      "defaultValue": "'item'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SizeProp",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "SizeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clearable",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "\"Choose an option\""
+    },
+    "noCaption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "caption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption",
+      "reflect": false
+    },
+    "captionError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-error",
+      "reflect": false
+    },
+    "captionType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "captionTypeProp",
+        "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
+        "references": {
+          "captionTypeProp": {
+            "location": "import",
+            "path": "../../../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-type",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "multiSelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multiselect",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "reflect": 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 {
+    "selectText": {},
+    "selectData": {},
+    "focusInput": {}
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "bcm-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "clear",
+      "name": "bcm-clear",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "focus",
+      "name": "bcm-focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "blur",
+      "name": "bcm-blur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "resetCaption": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "setClear": {
+      "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[]>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<object[]>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "setValue": {
+      "complexType": {
+        "signature": "(value: any, _id?: string, _text?: string) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "descc",
+            "text": undefined
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueWatch"
+    }]; }
+  static get listeners() { return [{
+      "name": "bcm-change",
+      "method": "handleChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-clear",
+      "method": "handleClear",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "resizeEvent",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "click",
+      "method": "handleClick",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }]; }
+}