bromcom-ui 2.3.58 → 2.3.59

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

@@ -1,1339 +0,0 @@
-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
-    }]; }
-}