bromcom-ui 2.7.37-rc.3 → 2.7.37-rc.4-0

package/dist/components/bcm-select.js

@@ -0,0 +1,1385 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { S as StringHelper } from './string-helper.js';
+import { a as dropInComponent } from './utils.js';
+import { I as IsLoad } from './is-load-decorator.js';
+import { d as defineCustomElement$l } from './avatar.js';
+import { d as defineCustomElement$k } from './badge.js';
+import { d as defineCustomElement$j } from './checkbox.js';
+import { d as defineCustomElement$i } from './checkbox-lite.js';
+import { d as defineCustomElement$h } from './divider.js';
+import { d as defineCustomElement$g } from './empty.js';
+import { d as defineCustomElement$f } from './icon.js';
+import { d as defineCustomElement$e } from './label.js';
+import { d as defineCustomElement$d } from './listbox.js';
+import { d as defineCustomElement$c } from './listbox-group.js';
+import { d as defineCustomElement$b } from './listbox-item.js';
+import { d as defineCustomElement$a } from './old-input.js';
+import { d as defineCustomElement$9 } from './old-search.js';
+import { d as defineCustomElement$8 } from './old-tag.js';
+import { d as defineCustomElement$7 } from './select-box.js';
+import { d as defineCustomElement$6 } from './text.js';
+import { d as defineCustomElement$5 } from './tooltip.js';
+import { d as defineCustomElement$4 } from './treeview.js';
+import { d as defineCustomElement$3 } from './treeview-item.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const selectCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-block;width:100%;margin:0}:host(.hidden){display:none}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;padding:0 8px;width:100%}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:var(--bcm-color-grey-6);user-select:none;font-size:14px;height:100%;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.options-viewport{display:block}.options-viewport bcm-select-option,.options-viewport ::slotted(bcm-select-option){white-space:normal}.options-viewport.hidden{display:none}.options-viewport.vertical{height:fit-content;max-height:200px}.options-viewport.horizontal:not(.flex){overflow-x:auto;width:100%}.options-viewport.horizontal:not(.flex) bcm-select-option,.options-viewport.horizontal:not(.flex) ::slotted(bcm-select-option){white-space:nowrap}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9)}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const delay = ms => new Promise(res => setTimeout(res, ms));
+const BcmSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "bcm-change", 7);
+    this.clear = createEvent(this, "bcm-clear", 7);
+    this.focus = createEvent(this, "bcm-focus", 7);
+    this.blur = createEvent(this, "bcm-blur", 7);
+    this.listboxUnchecked = createEvent(this, "bcm-listbox-unchecked", 7);
+    this.listboxSendCheck = createEvent(this, "bcm-listbox-send-check", 7);
+    this.isRendered = false;
+    this.cleaned = false;
+    this.objectMapping = {
+      'value': "value",
+      'id': "id",
+      'text': "text",
+      'icon': "icon",
+      'avatar': "avatar",
+      'avatarName': "avatarName",
+      'avatarImage': "avatarImage",
+      'secondaryText': "secondaryText",
+      'tooltipText': "tooltipText",
+      'selected': "selected",
+      'checked': "checked",
+      'disabled': "disabled",
+    };
+    this.firstRun = true;
+    this.currentItemWidth = 0;
+    this.otherTagsWidth = 0;
+    this.areaWidth = 0;
+    this.itemsWidth = [];
+    this.itemsWidthArray = [];
+    this.checklist = [];
+    this.pastItem = [];
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.value = null;
+    this.value2 = null;
+    this.size = 'medium';
+    this.scrollable = 'vertical';
+    this.placeholder = "Choose an option";
+    this.search = false;
+    this.noCaption = false;
+    this.captionType = 'default';
+    this.searchFields = ['value', 'text'];
+    this.fullWidth = false;
+    this.hidden = false;
+    this.checkboxes = false;
+    this.searchable = false;
+    this.required = false;
+    this.treeview = false;
+    this.numberOfColumns = 1;
+    this.viewportWidth = "100%";
+    this.viewportMinWidth = null;
+    this.viewportMaxWidth = null;
+    this.template = null;
+    this.maxHeight = "200px";
+    this.infoFooter = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.alignment = 'left';
+    this._items = null;
+    this._data = null;
+    this.placement = 'bottom-start';
+    this.otherTagStatus = false;
+    this.firstSetData = true;
+    this.visibleTags = [];
+    this.hiddenTags = [];
+    this.onShowVisibleTags = [];
+    this.onShowHiddenTags = [];
+    this.hiddenTagsString = "";
+    this.clientWidth = 0;
+    this.tagLabel = [];
+    this.selectText = null;
+    this.isOpen = false;
+    this.searchResults = [];
+    this.optionViewportStyleAlignment = {};
+  }
+  async componentWillLoad() {
+    // this.createElement()
+    this.createElement();
+    await delay(50);
+  }
+  disconnectedCallback() {
+    if (document.getElementById("select-box" + this._internal_id)) {
+      document.getElementById("select-box" + this._internal_id).remove();
+    }
+  }
+  componentWillRender() {
+    var selectedTextArea = this.el.shadowRoot.getElementById("selected-container");
+    if (selectedTextArea && this.el.clientWidth > 200) {
+      selectedTextArea.style.maxWidth = (this.el.clientWidth) + "px";
+    }
+    // if( sessionStorage.getItem(this._internal_id + "-config") ){
+    //     this.config( JSON.parse( sessionStorage.getItem( this._internal_id + "-config" ) ) )
+    // }
+  }
+  async config(_config) {
+    this._config = _config;
+    this.maxHeight && (_config['maxHeight'] = this.maxHeight);
+    if (this.template) {
+      _config['template'] = this.template;
+    }
+    if (_config['treeview']) {
+      typeof _config['treeview'] == 'boolean'
+        ? this.treeview = _config['treeview']
+        : this.treeview = false;
+    }
+    if (_config['checkable']) {
+      typeof _config['checkable'] == 'boolean'
+        ? this.checkboxes = true
+        : this.checkboxes = false;
+    }
+    if (_config['numberOfColumns']) {
+      typeof _config['numberOfColumns'] == 'number'
+        ? this.numberOfColumns = _config['numberOfColumns']
+        : this.numberOfColumns = 1;
+    }
+    if (_config['viewportWidth']) {
+      typeof _config['viewportWidth'] == 'string'
+        ? this.viewportWidth = _config['viewportWidth']
+        : this.viewportWidth = "100%";
+    }
+    if (_config['viewportMinWidth']) {
+      typeof _config['viewportMinWidth'] == 'string'
+        ? this.viewportMinWidth = _config['viewportMinWidth']
+        : this.viewportMinWidth = null;
+    }
+    if (_config['viewportMaxWidth']) {
+      typeof _config['viewportMaxWidth'] == 'string'
+        ? this.viewportMaxWidth = _config['viewportMaxWidth']
+        : this.viewportMaxWidth = null;
+    }
+    // if ( _config['maxHeight'] ) {
+    //     typeof _config['maxHeight'] == 'string'
+    //         ? this.maxHeight = _config['maxHeight']
+    //         : this.maxHeight = this.maxHeight
+    // } 
+    if (_config['clearable']) {
+      typeof _config['clearable'] == 'boolean'
+        ? this.clearable = _config['clearable']
+        : this.clearable = false;
+    }
+    if (_config['searchable']) {
+      typeof _config['searchable'] == 'boolean'
+        ? this.searchable = _config['searchable']
+        : this.searchable = false;
+    }
+    if (_config['fullWidth']) {
+      typeof _config['fullWidth'] == 'boolean'
+        ? this.fullWidth = _config['fullWidth']
+        : this.fullWidth = false;
+    }
+    if (_config['label']) {
+      typeof _config['label'] == 'string'
+        ? this.label = _config['label']
+        : this.label = null;
+    }
+    if (_config['placeholder']) {
+      typeof _config['placeholder'] == 'string'
+        ? this.placeholder = _config['placeholder']
+        : this.placeholder = "Choose an option";
+    }
+    if (_config['infoFooter']) {
+      typeof _config['infoFooter'] == 'boolean'
+        ? this.infoFooter = _config['infoFooter']
+        : this.infoFooter = false;
+    }
+    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']['value']) {
+        this.objectMapping['value'] = _config['mapping']['value'];
+      }
+    }
+    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
+    this.createElement();
+    await delay(50);
+    var element;
+    if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
+      element = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
+      if (sessionStorage.getItem(this._internal_id + "-config")) {
+        element.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+      }
+      // await element.config(_config)
+    }
+  }
+  async renderListbox() {
+    if (this.isRendered == false) {
+      this.isRendered = true;
+      var element = null;
+      if (this.cleaned) {
+        const recurviseControl = (items) => {
+          const data = items.map(item => {
+            if (this.checkboxes === true) {
+              if (item[this.objectMapping['checked']]) {
+                item[this.objectMapping['checked']] = false;
+              }
+            }
+            else {
+              if (item[this.objectMapping['selected']]) {
+                item[this.objectMapping['selected']] = false;
+              }
+            }
+            if (item.items && item.items.length > 0) {
+              item.items = recurviseControl(item.items);
+            }
+            return item;
+          });
+          return data;
+        };
+        // recurviseControl(this._items);
+        this._data = JSON.stringify(recurviseControl(this._items));
+      }
+      if (element = document.getElementById("select-box" + this._internal_id)) {
+        if (element = element.shadowRoot.querySelector("bcm-listbox")) {
+          if (sessionStorage.getItem(this._internal_id + "-config")) {
+            element.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+          }
+          element.setData(this._data);
+        }
+      }
+      return element;
+    }
+  }
+  async setData(_data = []) {
+    if (this.firstSetData === true) {
+      this.firstSetData = false;
+    }
+    else {
+      this.itemsWidth = [];
+      if (this.value != null) {
+        this.value = null;
+      }
+      this.checklist = [];
+    }
+    this._data = _data;
+    this.isRendered = true;
+    typeof _data == 'string'
+      ? this._items = JSON.parse(_data)
+      : this._items = _data;
+    if (this._items.length > 0) ;
+    else {
+      this.handleClear();
+      this.isRendered = false;
+    }
+    var element = null;
+    if (element = document.getElementById("select-box" + this._internal_id)) {
+      if (element = element.shadowRoot.querySelector("bcm-listbox")) {
+        element.setData(_data);
+      }
+    }
+  }
+  async setDataAsync(_data = []) {
+    let newValue = null;
+    if (this.isRendered == true) {
+      this.setData(_data);
+    }
+    else {
+      this._data = _data;
+      typeof _data == 'string'
+        ? this._items = JSON.parse(_data)
+        : this._items = _data;
+      var _checkedItems = [];
+      if (this._items.length > 0) {
+        const recurviseControl = (items) => {
+          items.forEach(item => {
+            if (this.checkboxes === true) {
+              if (item[this.objectMapping['checked']] === true) {
+                _checkedItems.push(item);
+              }
+            }
+            else {
+              if (item[this.objectMapping['selected']] === true) {
+                newValue = item;
+                this.selectText = item[this.objectMapping['text']];
+              }
+            }
+            if (item.items && item.items.length > 0) {
+              recurviseControl(item.items);
+            }
+          });
+        };
+        recurviseControl(this._items);
+      }
+      else {
+        this.handleClear();
+        this.isRendered = false;
+      }
+      this.itemsWidth = [];
+      if (this.checkboxes == true) {
+        // this.value = String(_checkedItems)
+        this.handleTagControl2(_checkedItems);
+        this.checklist = _checkedItems;
+      }
+      else {
+        if (newValue != null) {
+          // this.value = null
+          newValue.selected && (delete newValue.selected);
+          newValue.checked && (delete newValue.checked);
+          this.value = newValue;
+        }
+        this.checklist = [];
+      }
+    }
+  }
+  async clearAndSelectSearch(select = true) {
+    this.renderListbox();
+    if (this.searchable === true) {
+      // await this.createElement()
+      setTimeout(() => {
+        var searchInput = null;
+        if (document.getElementById("select-box" + this._internal_id)
+          && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
+          if (this.treeview) {
+            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox").shadowRoot.querySelector("bcm-treeview");
+          }
+          else {
+            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
+          }
+          if (searchInput) {
+            searchInput.clearAndSelectSearch();
+            if (select == true) {
+              searchInput.clearAndSelectSearch(true);
+            }
+          }
+        }
+      }, 100);
+    }
+  }
+  async selected(id) {
+    this.renderListbox();
+    this.createElement();
+    await delay(150);
+    if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
+      this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
+      this.bcmListbox.selected(id);
+    }
+  }
+  async addChecked(id = []) {
+    if (this.isRendered == true) {
+      this.renderListbox();
+      this.createElement();
+      await delay(50);
+      if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
+        this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
+        this.bcmListbox.addChecked(id);
+      }
+    }
+    else {
+      var checkedItems = id;
+      var _checkedItems = [];
+      if (this._items && this._items.length > 0) {
+        if (this.checkboxes === true) {
+          if (this._items.find(e => String(e[this.objectMapping['checked']]) === "true")) {
+            this._items.filter(e => String(e[this.objectMapping['checked']]) === "true").forEach(element => {
+              element[this.objectMapping['checked']] = false;
+            });
+          }
+        }
+        else {
+          if (this._items.find(e => String(e[this.objectMapping['selected']]) === "true")) {
+            this._items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+              element[this.objectMapping['selected']] = false;
+            });
+          }
+        }
+        if (typeof checkedItems == 'string') {
+          if (this.checkboxes === false) {
+            const item = this._items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems))[this.objectMapping['id']];
+            this.value = item;
+            this.selectText = item[this.objectMapping['text']];
+          }
+        }
+        else {
+          if (this.checkboxes === true) {
+            checkedItems.forEach(id => {
+              var findItem = this._items.find(e => String(e[this.objectMapping['id']]) == String(id));
+              if (findItem) {
+                findItem[this.objectMapping['checked']] = "true";
+              }
+            });
+          }
+          if (this._items && this._items.find(e => String(e[this.objectMapping['checked']]) === "true")) {
+            this._items.filter(e => String(e[this.objectMapping['checked']]) === "true").forEach(item => {
+              _checkedItems.push(item);
+            });
+          }
+        }
+      }
+      else {
+        this.handleClear();
+      }
+      this._data = JSON.stringify(this._items);
+      this.itemsWidth = [];
+      if (this.checkboxes == true) {
+        this.value = String(_checkedItems);
+        this.handleTagControl2(_checkedItems);
+        this.checklist = _checkedItems;
+      }
+      else {
+        if (this.value != null) {
+          this.value = null;
+        }
+        this.checklist = [];
+      }
+    }
+  }
+  async updateChecked(id = []) {
+    this.renderListbox();
+    this.createElement();
+    await delay(50);
+    if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
+      this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
+      this.bcmListbox.updateChecked(id);
+    }
+  }
+  async getValue() {
+    return this.value;
+  }
+  async getChecklist() {
+    return this.checklist;
+  }
+  async get() {
+    var _a;
+    return this.value ? (this.checkboxes ? (_a = this.checklist) === null || _a === void 0 ? void 0 : _a.map(item => item[this.objectMapping['id']]) : this.value[this.objectMapping['id']]) : null;
+  }
+  async set(data) {
+    if (data) {
+      if (Array.isArray(data)) {
+        this.addChecked(data);
+      }
+      if (typeof data === 'string' || typeof data === 'number') {
+        this.selected(data);
+      }
+    }
+    else {
+      this.setClear();
+    }
+  }
+  async setClear() {
+    await this.handleClear();
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  handleChange(newValue, oldValue) {
+    const oldVal = oldValue ? oldValue : null;
+    const newVal = newValue ? newValue : null;
+    if (oldVal != newVal) {
+      if (this.checkboxes == true) {
+        this.change.emit(newVal);
+      }
+      else {
+        if (newVal && newVal[this.objectMapping['id']] && oldVal && oldVal[this.objectMapping['id']]) {
+          if (newVal[this.objectMapping['id']] != oldVal[this.objectMapping['id']]) {
+            this.change.emit(newVal);
+          }
+        }
+        else {
+          this.change.emit(newVal);
+        }
+      }
+    }
+  }
+  async handleOpenState() {
+    if (this.isOpen == false) {
+      this.searchResults = [];
+      // this.otherTagStatus = false
+    }
+    await this.createElement(this.isOpen);
+    await delay(100);
+    this.viewportCoordinateUpdater();
+  }
+  async handleOpen(event, otherTag = false) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path && path.filter((input) => input['id'] == "close")[0] != undefined) {
+      this.isOpen = this.isOpen;
+    }
+    else if (event == false) {
+      this.isOpen = false;
+    }
+    else {
+      if (!this.disabled) {
+        if (lowercase(event.target.nodeName) !== 'bcm-old-tag') {
+          this.isOpen = !this.isOpen;
+        }
+        else if (!this.isOpen) {
+          this.isOpen = true;
+        }
+      }
+    }
+    if (this.isOpen && this.searchable && !otherTag) {
+      // await this.createElement()
+      setTimeout(() => {
+        var searchInput = null;
+        if (document.getElementById("select-box" + this._internal_id)
+          && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
+          if (this.treeview) {
+            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox").shadowRoot.querySelector("bcm-treeview");
+          }
+          else {
+            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
+          }
+          if (searchInput) {
+            searchInput.clearAndSelectSearch();
+          }
+        }
+      }, 100);
+    }
+    if (this.isOpen == true && this.isRendered == false) {
+      this.renderListbox();
+    }
+  }
+  onwheelEvent(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path
+      && (path.filter((input) => input['_internal_id'] == this._internal_id)[0] == undefined
+        || path.filter((input) => input['nodeName'] == "BCM-SELECT")[0] !== undefined)) {
+      if (this.isOpen === true) {
+        this.isOpen = false;
+        var element;
+        if (document.getElementById("select-box" + this._internal_id)) {
+          element = document.getElementById("select-box" + this._internal_id);
+          element.classList.remove("show");
+        }
+      }
+    }
+  }
+  async scrollEvent(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path && path.filter((input) => input['nodeName'] == "BCM-MODAL")[0] == undefined) {
+      if (this.isOpen === true) {
+        this.viewportCoordinateUpdater();
+      }
+    }
+    else {
+      if (this.isOpen === true) {
+        this.isOpen = false;
+        var element;
+        if (document.getElementById("select-box" + this._internal_id)) {
+          element = document.getElementById("select-box" + this._internal_id);
+          element.classList.remove("show");
+        }
+      }
+    }
+  }
+  viewportCoordinateUpdater() {
+    if (document.getElementById("select-box" + this._internal_id)) {
+      var element;
+      element = document.getElementById("select-box" + this._internal_id);
+      dropInComponent(element, "#" + this._id);
+    }
+  }
+  async createElement(isOpen = false) {
+    var element = document.getElementById("select-box" + this._internal_id);
+    if (!element) {
+      element = document.createElement("bcm-select-box");
+      element.setAttribute("id", "select-box" + this._internal_id);
+      element.setAttribute("_internal_id", this._internal_id);
+      await delay(10);
+    }
+    document.body.appendChild(element);
+    dropInComponent(element, "#" + this._id);
+    element.style.width = this.el.clientWidth + "px";
+    if (this.viewportMinWidth != null || this.viewportMaxWidth != null) {
+      element.style.width = "100%";
+    }
+    else if (this.viewportWidth != "100%") {
+      element.style.width = this.viewportWidth;
+    }
+    else if (this.numberOfColumns > 1) {
+      element.style.width = "auto";
+    }
+    else {
+      element.style.width = this.el.clientWidth + "px";
+    }
+    if (this.viewportMinWidth != null) {
+      if (this.viewportMaxWidth == null) {
+        element.style.maxWidth = this.el.clientWidth + "px";
+      }
+      element.style.minWidth = this.viewportMinWidth;
+    }
+    if (this.viewportMaxWidth != null) {
+      if (this.viewportMinWidth == null) {
+        element.style.minWidth = this.el.clientWidth + "px";
+      }
+      element.style.maxWidth = this.viewportMaxWidth;
+    }
+    element.style.maxHeight = this.maxHeight;
+    if (isOpen === true) {
+      element.classList.add("show");
+    }
+    else {
+      element.classList.remove("show");
+    }
+  }
+  getPlacement() {
+    const placements = this.placement.split('-');
+    if (placements.length === 1) {
+      placements.push('center');
+    }
+    return placements;
+  }
+  clickClear(e) {
+    this.handleClear();
+    e.stopPropagation();
+  }
+  async handleClear() {
+    this.cleaned = true;
+    this.value = null;
+    this.selectText = null;
+    // const allitem:any = [...this.onShowVisibleTags, ...this.onShowHiddenTags]
+    // if ( allitem.length > 0 ) {
+    //     allitem.map(item => {
+    //         this.bcmOldTagDissmisable({detail: {id: String(item[this.objectMapping['id']])}}, this._internal_id) 
+    //     })
+    // }
+    var subComponent = null;
+    if (document.getElementById("select-box" + this._internal_id)
+      && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box")) {
+      if (this.treeview === true) {
+        subComponent = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box").shadowRoot.querySelector("bcm-treeview");
+      }
+      else {
+        subComponent = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box");
+      }
+    }
+    if (subComponent) {
+      await subComponent.setClear();
+    }
+    this.onShowVisibleTags = [];
+    this.onShowHiddenTags = [];
+    this.searchResults = [];
+    this.watchSearchResults();
+    var searchInput = null;
+    // await this.createElement()
+    if (document.getElementById("select-box" + this._internal_id)
+      && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box")) {
+      if (this.treeview) {
+        searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box").shadowRoot.querySelector("bcm-treeview");
+      }
+      else {
+        searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box");
+      }
+    }
+    if (searchInput) {
+      searchInput.clearAndSelectSearch();
+    }
+    this.clear.emit();
+    return Promise.resolve();
+  }
+  handleFocus() {
+    this.focus.emit();
+  }
+  handleBlur() {
+    this.blur.emit();
+  }
+  handleScreenResize() {
+    if (this.isOpen === true) {
+      this.createElement(true);
+    }
+  }
+  handleClickOutside(event) {
+    var _a;
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path && path.filter((input) => input['id'] == "other-tag")[0] == undefined
+      && path && path.filter((input) => input['id'] == "listbox")[0] == undefined) {
+      this.otherTagStatus = false;
+      setTimeout(() => {
+        if (this.otherTag) {
+          this.otherTag.setAttribute('color', 'grey-9');
+        }
+      }, 50);
+    }
+    if (((event === null || event === void 0 ? void 0 : event.target) && ((_a = this.el) === null || _a === void 0 ? void 0 : _a.contains(event.target)))
+      || (path && path.filter((input) => input['id'] == "select-box" + this._internal_id)[0] != undefined)) {
+      // this.searchResults = []
+      // this.watchSearchResults()
+      this.optionViewportStyleAlignment = {};
+      var targetId = event.target["id"];
+      if (document.querySelector('#' + targetId)) {
+        var paddingBottom = 8;
+        var offsetTop = document.querySelector('#' + targetId).getBoundingClientRect().top;
+        var einnerHeight = event.view.innerHeight;
+        var eclientHeight = event.target["clientHeight"];
+        var enoCaption = event.target["noCaption"];
+        // var elementTop = einnerHeight - offsetTop
+        var elementBottom = einnerHeight - offsetTop - (enoCaption ? eclientHeight : eclientHeight - 20) + paddingBottom;
+        if (Number(this.maxHeight.replace("px", "")) > elementBottom) {
+          this.optionViewportStyleAlignment = {
+            'bottom': (this.infoFooter ? 30 : 0) + 50 + "px",
+            'box-shadow': '0px -2px 8px rgb(0 0 0 / 15%)'
+          };
+        }
+      }
+      if (this.checkboxes == false
+        && path
+        && path.filter((input) => input['id'] == "collapse-button")[0] == undefined
+        && (path.filter((input) => input['nodeName'] == "BCM-LISTBOX-ITEM")[0]
+          || path.filter((input) => input['nodeName'] == "BCM-TREEVIEW-ITEM")[0])) {
+        this.isOpen = false;
+      }
+    }
+    else {
+      if (this.isOpen) {
+        this.isOpen = false;
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  handleTreeviewUnchecked(event) {
+    this.handleListboxUnchecked(event);
+  }
+  handleListboxUnchecked(event) {
+    const index = this.searchResults.indexOf(event.detail);
+    if (index > -1) {
+      this.searchResults.splice(index, 1);
+      if (this.onShowHiddenTags.length <= 2) {
+        this.searchResults = [];
+        this.otherTagStatus = false;
+      }
+      this.watchSearchResults();
+    }
+  }
+  async bcmOldTagDissmisable(event, internal_id = null) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if ((this.el.contains(event.target)
+      && (path
+        && path.filter((input) => input['_internal_id'] == this._internal_id)[0])
+      || internal_id == this._internal_id)) {
+      if (this.isRendered == false) {
+        await this.renderListbox();
+        await delay(50);
+      }
+      await this.createElement();
+      await delay(50);
+      const bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box");
+      if (event.detail.id == "other-tag") {
+        this.onShowHiddenTags.map(async (item) => {
+          await bcmListbox.listboxUncheckedMethod(String(item[this.objectMapping['id']]), this._internal_id);
+        });
+        this.onShowHiddenTags = [];
+      }
+      else {
+        await bcmListbox.listboxUncheckedMethod(event.detail.id, this._internal_id);
+      }
+      this.watchSearchResults();
+    }
+  }
+  /**
+   * @desc
+   */
+  handleListboxSelected(event) {
+    // console.log(event)
+    // debugger;
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+      setTimeout(() => {
+        if (this.checkboxes !== true) {
+          const optionValue = event.detail;
+          optionValue.selected && (delete optionValue.selected);
+          optionValue.checked && (delete optionValue.checked);
+          optionValue != this.value && (this.value = optionValue);
+          this.selectText = optionValue[this.objectMapping['text']];
+        }
+      }, 100);
+    }
+  }
+  /**
+   * @desc
+   */
+  handleListboxCheckedList(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+      setTimeout(() => {
+        if (JSON.stringify(this.checklist) !== JSON.stringify(event.detail)) {
+          // this.handleTagControl(e.detail)
+          this.handleTagControl2(event.detail);
+          this.checklist = event.detail;
+        }
+      }, 100);
+    }
+  }
+  handleTreeviewCheckedList(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+      // setTimeout(() => {
+      // if(JSON.stringify(this.checklist) !== JSON.stringify(e.detail)){
+      // this.handleTagControl(e.detail)
+      this.handleTagControl2(event.detail);
+      this.checklist = event.detail;
+      // }
+      // }, 50);
+    }
+  }
+  async handleTagControl2(value) {
+    this.visibleTags = [];
+    this.hiddenTags = [];
+    // this.itemsWidth = []
+    this.onShowVisibleTags = [];
+    this.onShowHiddenTags = [];
+    if (value.length > 0) {
+      value.map(async (item) => {
+        this.visibleTags.push(item);
+      });
+    }
+    this.visibleTags = [...new Set(this.visibleTags)];
+    this.hiddenTags = [...new Set(this.hiddenTags)];
+    this.onShowVisibleTags = this.visibleTags;
+    this.onShowHiddenTags = this.hiddenTags;
+    if (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) {
+      var cacheValue = JSON.parse(JSON.stringify([...this.onShowVisibleTags, ...this.onShowHiddenTags]));
+      if (this.value2 !== cacheValue) {
+        this.value2 = cacheValue;
+      }
+    }
+    else {
+      if (this.value2 !== null) {
+        this.value2 = null;
+      }
+    }
+    this.calculateContainer();
+  }
+  async calculateContainer() {
+    // await delay(10)
+    const container = this.el.shadowRoot.querySelector(".selected-text");
+    this.otherTagsWidth = 135;
+    await delay(50);
+    this.areaWidth = container.clientWidth && container.clientWidth > 100 ? container.clientWidth : 100;
+    if (this.clearable === true) {
+      this.areaWidth = this.areaWidth - 22;
+    }
+    this.itemsWidth = 0;
+    this.itemsWidthArray = [];
+    const bcmoldtags = container.querySelectorAll("bcm-old-tag");
+    await delay(50);
+    if (bcmoldtags && bcmoldtags.length > 0) {
+      bcmoldtags.forEach((item) => {
+        const itemClientWidth = item.clientWidth && item.clientWidth > 40 ? item.clientWidth : 40;
+        this.itemsWidthArray.push({ "id": String(item.id), "clientWidth": itemClientWidth });
+        this.itemsWidth += itemClientWidth + 4;
+        if (this.itemsWidth > this.areaWidth) {
+          const tagitem = this.visibleTags[this.visibleTags.findIndex(x => String(x[this.objectMapping['id']]) === String(item.id))];
+          if (item && tagitem) {
+            if (item.id && tagitem[this.objectMapping['id']]) {
+              if (StringHelper.lowercase(String(item.id)) == StringHelper.lowercase(String(tagitem[this.objectMapping['id']]))) {
+                // if (String(item.id) == String(tagitem[this.objectMapping['id']])) {
+                this.visibleTags.splice(this.visibleTags.findIndex(x => String(x[this.objectMapping['id']]) === String(item.id)), 1);
+                this.hiddenTags.push(tagitem);
+              }
+            }
+          }
+        }
+      });
+    }
+    this.visibleTags = [...new Set(this.visibleTags)];
+    this.hiddenTags = [...new Set(this.hiddenTags)];
+    if (this.hiddenTags.length > 0) {
+      if (this.hiddenTags.length > 10) {
+        this.otherTagsWidth += 20;
+      }
+      else if (this.hiddenTags.length > 100) {
+        this.otherTagsWidth += 20;
+      }
+      var bcmoldtags2 = Array.prototype.slice.call(container.querySelectorAll("bcm-old-tag"));
+      this.itemsWidth = 0;
+      bcmoldtags2.forEach((item) => {
+        if (item.id != "other-tag") {
+          var tagitem = this.visibleTags[this.visibleTags.findIndex(x => String(x[this.objectMapping['id']]) === String(item.id))];
+          if (tagitem && tagitem[this.objectMapping['id']]) {
+            if (StringHelper.lowercase(String(item.id)) == StringHelper.lowercase(String(tagitem[this.objectMapping['id']]))) {
+              this.itemsWidth += (item.clientWidth + 4);
+              if (this.itemsWidth + this.otherTagsWidth > this.areaWidth) {
+                this.visibleTags.splice(this.visibleTags.findIndex(x => String(x[this.objectMapping['id']]) === String(item.id)), 1);
+                this.hiddenTags.push(tagitem);
+              }
+            }
+          }
+        }
+      });
+    }
+    this.visibleTags = [...new Set(this.visibleTags)];
+    this.hiddenTags = [...new Set(this.hiddenTags)];
+    this.onShowVisibleTags = this.visibleTags;
+    this.onShowHiddenTags = this.hiddenTags;
+    if (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) {
+      var cacheValue = JSON.parse(JSON.stringify([...this.onShowVisibleTags, ...this.onShowHiddenTags]));
+      if (this.value !== cacheValue) {
+        this.value = cacheValue;
+      }
+    }
+    else {
+      if (this.value !== null) {
+        this.value = null;
+      }
+    }
+    if (this.otherTagStatus) {
+      this.searchResults = this.onShowHiddenTags.map(item => {
+        return String(item[this.objectMapping['id']]);
+      });
+      if (this.onShowHiddenTags.length <= 2) {
+        this.searchResults = [];
+        this.otherTagStatus = false;
+      }
+      this.watchSearchResults();
+    }
+  }
+  async handleTagControl(value) {
+    if (value.length > 0) {
+      const container = this.el.shadowRoot.querySelector(".selected-text");
+      this.visibleTags = [];
+      this.hiddenTags = [];
+      this.itemsWidth = [];
+      this.onShowVisibleTags = [];
+      this.onShowHiddenTags = [];
+      this.areaWidth = container.clientWidth - 16;
+      this.otherTagsWidth = 130;
+      this.currentItemWidth = 0;
+      value.map(async (item) => {
+        const newTag = document.createElement("bcm-old-tag");
+        newTag.setAttribute("id", String(item[this.objectMapping['id']]));
+        newTag.setAttribute("value", item[this.objectMapping['text']]);
+        newTag.setAttribute("type", "dissmisable");
+        newTag.setAttribute("_internal_id", this._internal_id);
+        newTag.style.visibility = "hidden";
+        document.body.appendChild(newTag);
+        await delay(50);
+        var visible = true;
+        var tagwidth = newTag.clientWidth >= 200 ? 200 : newTag.clientWidth;
+        this.currentItemWidth = this.currentItemWidth + tagwidth,
+          this.itemsWidth.push({ "id": String(item[this.objectMapping['id']]), "clientWidth": tagwidth });
+        // item = {...item, "clientWidth": newTag.clientWidth}
+        if (this.areaWidth > this.currentItemWidth) {
+          visible = true;
+        }
+        else {
+          visible = false;
+        }
+        if (visible) {
+          this.visibleTags.push(item);
+        }
+        else {
+          this.hiddenTags.push(item);
+        }
+        newTag.remove();
+      });
+      await delay(100);
+      if (this.visibleTags.length > 1) {
+        const lastItem = this.itemsWidth[this.itemsWidth.findIndex(x => x.id === String(this.visibleTags[this.visibleTags.length - 1][this.objectMapping['id']]))];
+        if (this.areaWidth <= (this.currentItemWidth + this.otherTagsWidth) - lastItem["clientWidth"]) {
+          this.hiddenTags.push(this.visibleTags[this.visibleTags.length - 1]);
+          this.visibleTags.splice(-1, 1);
+        }
+      }
+    }
+    else {
+      this.visibleTags = [];
+      this.hiddenTags = [];
+    }
+    this.visibleTags.forEach((item) => {
+      const index = this.hiddenTags.indexOf(item);
+      if (index > -1) {
+        this.hiddenTags.splice(index, 1);
+      }
+    });
+    if (this.hiddenTags.length > 0) {
+      this.hiddenTags = [...new Set(this.hiddenTags), ...new Set(this.visibleTags)];
+      this.visibleTags = [];
+    }
+    this.visibleTags = [...new Set(this.visibleTags)];
+    this.hiddenTags = [...new Set(this.hiddenTags)];
+    this.onShowVisibleTags = this.visibleTags;
+    this.onShowHiddenTags = this.hiddenTags;
+    // if(this.firstRun){
+    if (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) {
+      var cacheValue = JSON.parse(JSON.stringify([...this.onShowVisibleTags, ...this.onShowHiddenTags]));
+      if (this.value !== cacheValue) {
+        this.value = cacheValue;
+      }
+    }
+    else {
+      if (this.value !== null) {
+        this.value = null;
+      }
+    }
+    // this.firstRun = false
+    // }
+    var result = Object.keys(this.onShowHiddenTags).map((key) => this.onShowHiddenTags[key][this.objectMapping['text']]);
+    this.hiddenTagsString = result.toString().split(',').join("\r\n");
+  }
+  handleClickTag() {
+    this.searchResults = [];
+    this.otherTagStatus = false;
+    setTimeout(() => {
+      if (this.otherTag) {
+        this.otherTag.setAttribute('color', 'grey-9');
+        // this.isOpen = false
+      }
+    }, 100);
+    this.watchSearchResults();
+  }
+  showHiddenTags(e) {
+    e.stopPropagation();
+    this.handleOpen(e, true);
+    this.otherTag = e.target;
+    if (this.otherTagStatus) {
+      this.searchResults = [];
+      this.otherTagStatus = false;
+    }
+    else {
+      this.otherTagStatus = true;
+      this.searchResults = this.onShowHiddenTags.map(item => {
+        return String(item[this.objectMapping['id']]);
+      });
+    }
+    this.watchSearchResults();
+  }
+  async watchSearchResults() {
+    var element = null;
+    // await this.createElement()
+    if (this.treeview == true) {
+      if (element = document.getElementById("select-box" + this._internal_id)) {
+        if (element = element.shadowRoot.querySelector(".listbox-box")) {
+          if (element = element.shadowRoot.querySelector("bcm-treeview")) {
+            await element.searchResultMethod(this.searchResults);
+          }
+        }
+      }
+    }
+    else {
+      if (element = document.getElementById("select-box" + this._internal_id)) {
+        if (element = element.shadowRoot.querySelector(".listbox-box")) {
+          await element.searchResultMethod(this.searchResults);
+        }
+      }
+    }
+    if (this.searchResults.length > 0) {
+      setTimeout(() => {
+        if (this.otherTag) {
+          this.otherTag.setAttribute('color', 'prime-blue');
+          // this.isOpen = true
+        }
+      }, 100);
+      if (this._config['searchable'] == true) {
+        if (element) {
+          await element.showSearchMethod(false);
+        }
+      }
+    }
+    else {
+      setTimeout(() => {
+        if (this.otherTag) {
+          this.otherTag.setAttribute('color', 'grey-9');
+          // this.isOpen = false
+        }
+      }, 100);
+      if (element) {
+        await element.showSearchMethod(this.searchable);
+      }
+    }
+  }
+  render() {
+    const { size, clearable, value, label, caption, captionError, captionType, disabled, flex, placeholder, noCaption, fullWidth, required } = this;
+    const selected = classnames('selected', 'selected-' + this.size, {
+      'size-3': size === 'large',
+      'size-2': size === 'small' || size === 'medium',
+      'disabled': disabled
+    });
+    const menu = classnames('option-container', 'alignment-' + this.alignment, {
+      'hidden': !this.isOpen,
+      // [this.scrollable]: this.scrollable === 'horizontal' || this.scrollable === 'vertical',
+      // 'horizontal vertical': this.scrollable === 'both',
+      // 'flex': flex,
+      // 'empty': this.searchResults[0] as any == '-1' 
+    }, {
+      'column-1': this.numberOfColumns <= 1,
+      'column-2': this.numberOfColumns == 2,
+      'column-3': this.numberOfColumns >= 3,
+    });
+    const optionsViewport = classnames('options-viewport', {
+      'hidden': !this.isOpen,
+      [this.scrollable]: this.scrollable === 'horizontal' || this.scrollable === 'vertical',
+      'horizontal vertical': this.scrollable === 'both',
+      'flex': flex,
+      // 'empty': this.searchResults[0] as any == '-1' 
+    });
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
+    const container = classnames('container', {
+      'error': captionType == 'error' ? true : false,
+      'full-width': fullWidth
+    });
+    const selectedText = classnames('selected-text', {
+      'selected-tags': this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    var optionViewportStyle = {
+      'width': this.viewportMinWidth != null || this.viewportMaxWidth != null ? 'max-content' :
+        this.viewportWidth != "100%" ? this.viewportWidth :
+          this.numberOfColumns > 1 ? 'auto' : '100%',
+      'min-width': this.viewportMinWidth != null ? this.viewportMinWidth : null,
+      'max-width': this.viewportMaxWidth != null ? this.viewportMaxWidth : null,
+    };
+    if (this.optionViewportStyleAlignment) {
+      optionViewportStyle = Object.assign(Object.assign({}, optionViewportStyle), this.optionViewportStyleAlignment);
+    }
+    // if(this.viewportWidth != "100%" ){
+    //     optionViewportStyle = {...{'width': 'max-content', 'min-width': this.viewportWidth}}
+    // }
+    const customStyleOtherTag = {
+      'cursor': 'pointer',
+      'white-space': 'nowrap',
+      // 'width': '134px',
+      // 'display': '-webkit-box',
+      // '-webkit-line-clamp': '1',
+      // '-webkit-box-orient': 'vertical',
+      // 'overflow': 'hidden'
+    };
+    const customStyleTag = {
+      'cursor': 'pointer',
+      'max-width': '164px',
+      // 'display': '-webkit-box',
+      // '-webkit-line-clamp': '1',
+      // '-webkit-box-orient': 'vertical',
+      // 'overflow': 'hidden'
+      // 'display': '-webkit-box',
+      // 'overflow': 'hidden',
+      // '-webkit-line-clamp': '1',
+      // '-webkit-box-orient': 'vertical'
+      'text-overflow': 'ellipsis',
+      'white-space': 'nowrap',
+      'overflow': 'hidden',
+      'display': 'block'
+    };
+    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required }), h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e), tabIndex: -1 }, h("span", { class: selectedText, title: this.selectText && (this.selectText) }, (this.selectText && (this.selectText)), ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-old-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))), h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-old-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))), (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" }, " ", placeholder, " ")))), h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z" })))), h("span", { class: this.isOpen ? 'open' : 'close' }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z" }))))), h("div", { class: menu, style: optionViewportStyle }, h("div", { class: optionsViewport })), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+      ? h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && h("span", { class: captionClasses }, " ", caption, " "))))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "value": ["handleChange"],
+    "isOpen": ["handleOpenState"]
+  }; }
+  static get style() { return selectCss; }
+}, [1, "bcm-select", {
+    "_id": [1537, "id"],
+    "value": [1025],
+    "value2": [1025],
+    "size": [1025],
+    "scrollable": [1025],
+    "clearable": [1028],
+    "label": [1025],
+    "placeholder": [1025],
+    "search": [1028],
+    "noCaption": [1028, "no-caption"],
+    "caption": [1025],
+    "captionError": [1025, "caption-error"],
+    "captionType": [1025, "caption-type"],
+    "disabled": [1028],
+    "flex": [1028],
+    "name": [1025],
+    "searchFields": [1040],
+    "fullWidth": [1028, "full-width"],
+    "defaultValue": [1025, "default-value"],
+    "hidden": [1028],
+    "checkboxes": [1028],
+    "searchable": [1028],
+    "required": [1028],
+    "treeview": [1028],
+    "numberOfColumns": [1026, "number-of-columns"],
+    "viewportWidth": [1025, "viewport-width"],
+    "viewportMinWidth": [1025, "viewport-min-width"],
+    "viewportMaxWidth": [1025, "viewport-max-width"],
+    "template": [1025],
+    "maxHeight": [1025, "max-height"],
+    "infoFooter": [1028, "info-footer"],
+    "_internal_id": [1537],
+    "alignment": [1025],
+    "_items": [1032],
+    "_data": [1032],
+    "placement": [1537],
+    "tooltip": [1025],
+    "selectText": [32],
+    "isOpen": [32],
+    "captionCache": [32],
+    "captionTypeCache": [32],
+    "config": [64],
+    "setData": [64],
+    "setDataAsync": [64],
+    "clearAndSelectSearch": [64],
+    "selected": [64],
+    "addChecked": [64],
+    "updateChecked": [64],
+    "getValue": [64],
+    "getChecklist": [64],
+    "get": [64],
+    "set": [64],
+    "setClear": [64],
+    "resetCaption": [64]
+  }, [[11, "wheel", "onwheelEvent"], [7, "scroll", "scrollEvent"], [11, "resize", "handleScreenResize"], [10, "click", "handleClickOutside"], [6, "bcm-treeview-unchecked", "handleTreeviewUnchecked"], [6, "bcm-listbox-unchecked", "handleListboxUnchecked"], [6, "bcm-old-tag-dissmisable", "bcmOldTagDissmisable"], [4, "bcm-listbox-item-selected", "handleListboxSelected"], [4, "bcm-treeview-checklist", "handleListboxCheckedList"], [4, "bcm-listbox-checklist", "handleTreeviewCheckedList"]]]);
+__decorate([
+  IsLoad()
+], BcmSelect$1.prototype, "el", void 0);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-select", "bcm-avatar", "bcm-badge", "bcm-checkbox", "bcm-checkbox-lite", "bcm-divider", "bcm-empty", "bcm-icon", "bcm-label", "bcm-listbox", "bcm-listbox-group", "bcm-listbox-item", "bcm-old-input", "bcm-old-search", "bcm-old-tag", "bcm-select-box", "bcm-text", "bcm-tooltip", "bcm-treeview", "bcm-treeview-item", "bcm-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmSelect$1);
+      }
+      break;
+    case "bcm-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "bcm-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "bcm-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "bcm-checkbox-lite":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "bcm-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "bcm-empty":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "bcm-listbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "bcm-listbox-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "bcm-listbox-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "bcm-old-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "bcm-old-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "bcm-old-tag":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "bcm-select-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "bcm-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "bcm-treeview":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-treeview-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmSelect = BcmSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmSelect, defineCustomElement };