bromcom-ui 2.7.37-rc.0 → 2.7.37-rc.2

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

@@ -0,0 +1,1894 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __decorate = (this && this.__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;
+};
+import { IsLoad, JsonParse } from '@bcm/decorator';
+import { Generate, NumberHelper, Validators } from '@bcm/helpers';
+import { Bcm } from '@bcm/model';
+import { CaptionTemplate, LabelTemplate, ListTemplate } from '@bcm/template';
+import { delay, getPlacement, setPosition } from '@bcm/utils';
+import { Component, Element, h, Host, Listen, Method, Prop, State, Watch, Event } from '@stencil/core';
+import cs from 'classnames';
+import snq from 'snq';
+import listState from '../states/bcm-list2.states';
+import { ListKeyControl } from './list-key-control';
+import { ListTagControl } from './list-tag-control';
+export class BcmList {
+  constructor() {
+    this.debounce = null;
+    this._id = Generate.UID();
+    // All types
+    this.type = Bcm.ListType.listbox;
+    this.treeview = false;
+    this.checkboxes = false;
+    this.searchable = false;
+    this.value = null;
+    this.size = Bcm.Size.medium;
+    this.disabled = false;
+    this.readonly = false;
+    this.highlight = false;
+    this.required = false;
+    this.hidden = false;
+    this.fullWidth = false;
+    this.height = '256px';
+    this.maxHeight = '500px';
+    this.minHeight = '150px';
+    this.width = '256px';
+    this.infoFooter = false;
+    this.variableText = 'item';
+    // @Prop({ mutable: true }) showIcon = false;
+    // @Prop({ mutable: true }) favIcon = false;
+    // @Prop({ mutable: true }) favIconOnlyChilds = false;
+    // @Prop({ mutable: true }) contextMenu
+    this.allOpen = false;
+    this.keyControl = false;
+    this.checkAll = true;
+    this.stopDeepClean = false;
+    this.isOpen = false;
+    this.calculatedViewport = false;
+    this.isSelectedOther = false;
+    this.isHaveOtherTag = false;
+    //Only Select and similar
+    this.placeholder = 'Choose an option';
+    this.searchPlaceholder = 'Search';
+    this.searchIsOnlyChilds = false;
+    this.clearable = false;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.emptyIcon = 'fad fa-folder-open';
+    this.tick = {};
+    this.totalData = 0;
+    this.totalRootData = 0;
+    this.limit = 20;
+    this.searchResultLimit = 20; //Gerekliliği düşünülecek
+    this.searchFound = null;
+    this.returnFilterData = {};
+    this.returnOtherData = {};
+    this.options = {
+      rootMargin: '30px',
+    };
+    this.tagContainerWidth = 0;
+    this.selectAllItem = {
+      id: 'select-all',
+      text: 'Select All',
+      value: 'select-all',
+      checked: false,
+      disabled: false,
+      icon: '',
+      status: Bcm.Status.default,
+      indeterminate: 'uncheck',
+    };
+    this.placement = Bcm.Placement['bottom-start'];
+    this.data = [];
+    this.debounceHandler = Generate.debounceInput(() => this.listenResize(), 300, false);
+  }
+  connectedCallback() {
+    if (this.height != '256px') {
+      if (this.height.indexOf('px') > -1) {
+        this.limit = Math.floor(+this.height.replace('px', '') / 10);
+      }
+      else {
+        this.limit = Math.floor(+(window.innerHeight / 10));
+      }
+      this.searchResultLimit = this.limit;
+      this.markForCheck();
+    }
+    const checkElementWithDom = document.querySelectorAll(`#bcm-list-${this._id}`);
+    (checkElementWithDom === null || checkElementWithDom === void 0 ? void 0 : checkElementWithDom.length) > 0 && checkElementWithDom.forEach(item => item.remove());
+  }
+  componentWillRender() {
+    this.calculateLocation();
+  }
+  componentShouldUpdate(newVal, oldVal, propName) {
+    if (Object.keys(this.getOptions()).indexOf(propName) > -1 && newVal !== oldVal) {
+      this.updateOptions();
+    }
+  }
+  async componentDidLoad() {
+    await this.initState();
+    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+      const list = this.el.querySelector(`#bcm-list-${this._id}`);
+      if (list) {
+        document.body.appendChild(list);
+      }
+    }
+  }
+  tagCalculator() {
+    if (this.checkboxes && (this.type == 'select' || this.type == 'autocomplete')) {
+      const tagCalculator = new ListTagControl(`bcm-list-input-tag-container-${this._id}`, this.value, this._id, this.isSelectedOther, this.clearable);
+      tagCalculator.calculateTags();
+      const arrayIds = id => (typeof id == 'string' ? id.split(',') : [id]);
+      const clearAutocomplete = () => {
+        if (this.type == 'autocomplete') {
+          const autocompleteInput = this.getAutoCompleteInput();
+          if (autocompleteInput) {
+            autocompleteInput.handleClear(false);
+          }
+        }
+      };
+      tagCalculator.onClickOtherTag = async (id) => {
+        if (!this.disabled) {
+          clearAutocomplete();
+          if (this.isSelectedOther) {
+            await this.unSelectOther();
+          }
+          else {
+            await this.onClearSearch();
+            this.isSelectedOther = true;
+            this.filterOtherList(arrayIds(id));
+            this.isOpen = true;
+          }
+          this.onSelectSearch();
+        }
+      };
+      tagCalculator.onClickTag = _ => {
+        // console.log(id);
+        clearAutocomplete();
+        this.onSelectSearch();
+        this.unSelectOther();
+      };
+      tagCalculator.onClickDismiss = async (id) => {
+        var _a;
+        if (!this.disabled) {
+          if (this.isSelectedOther) {
+            await this.unSelectOther();
+          }
+          arrayIds(id).length > 1 ? listState.removeOtherTags(this._id, arrayIds(id)) : listState.checkedItem(this._id, arrayIds(id)[0]);
+          this.value = (await this.getCheckedList()).checkedList;
+          this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
+        }
+      };
+    }
+  }
+  disconnectedCallback() {
+    this.isOpen = false;
+    if (this.stopDeepClean)
+      return;
+    listState.removeState(this._id);
+    this.el.innerHTML = '';
+    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+      const list = document.querySelectorAll(`#bcm-list-${this._id}`);
+      if (list === null || list === void 0 ? void 0 : list.length) {
+        list.forEach(item => item.remove());
+        this.el.remove();
+      }
+    }
+  }
+  watchId(_, oldVal) {
+    // console.info('Changed component id:', oldVal + ' -> ' + newVal);
+    listState.removeState(oldVal);
+    this.initState();
+  }
+  handleValueChange(newVal, oldVal) {
+    var _a;
+    if (Generate.objectIsEmpty(this.returnFilterData)) {
+      this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
+    }
+    if (this.checkboxes) {
+      if (!Validators.compareTwoArrayIsSame(newVal, oldVal)) {
+        this.bcmChecklist.emit(this.value);
+        this.change.emit(this.value);
+      }
+    }
+    else {
+      if ((newVal === null || newVal === void 0 ? void 0 : newVal.text) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.text)) {
+        this.change.emit(this.value);
+      }
+    }
+    this.tagCalculator();
+  }
+  watchReturnFilterData(newVal) {
+    var _a;
+    const { checkedItems, visibledItems } = newVal;
+    if (checkedItems && visibledItems) {
+      this.handleIndeterminate(checkedItems.length, visibledItems.length);
+    }
+    else {
+      this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
+    }
+  }
+  handleOtherSelected(newValue) {
+    var _a;
+    const tagContent = (_a = document.getElementById(`bcm-list-input-tag-${this._id}-other-tag`)) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-tag__content');
+    if (tagContent) {
+      if (newValue === true) {
+        tagContent.classList.add('checkable', 'checked');
+      }
+      else {
+        tagContent.classList.remove('checkable', 'checked');
+      }
+    }
+  }
+  async handleOpen() {
+    if (this.isOpen) {
+      this.open.emit();
+      this.calculateLocation();
+      this.onSelectSearch();
+    }
+    else {
+      this.close.emit();
+      await delay(100);
+      this.unSelectOther();
+    }
+  }
+  async dataChanged(newValue, oldValue) {
+    if (!Validators.compareTwoArrayIsSame(newValue, oldValue)) {
+      await this.initState();
+    }
+  }
+  isIntersecting(e) {
+    const target = e === null || e === void 0 ? void 0 : e.target;
+    if (target && target.id === this._id) {
+      this.listenResize();
+    }
+  }
+  handleSlotItems(e) {
+    var _a;
+    if (((_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.data = e.detail;
+    }
+  }
+  handleChange(e) {
+    if (e.target.id == `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
+      e.stopImmediatePropagation();
+    }
+  }
+  handleResize() {
+    this.calculateLocation();
+    this.debounceHandler();
+  }
+  handleWheel(event) {
+    if (this.isOpen) {
+      const list = document.querySelector(`#bcm-list-${this._id}`);
+      const isClickInside = list && Generate.findEventPath(event, list);
+      if (isClickInside) {
+        if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+          this.calculateLocation();
+        }
+      }
+      else {
+        this.hide();
+      }
+    }
+  }
+  handleClick(event) {
+    var _a;
+    if (this.disabled)
+      return;
+    const list = document.querySelector(`#bcm-list-${this._id}`);
+    const isClickInside = Generate.findEventPath(event, this.el) || (list && Generate.findEventPath(event, list));
+    if (isClickInside) {
+      if (this.debounce !== null) {
+        event.preventDefault();
+        event.stopPropagation();
+        clearTimeout(this.debounce);
+        this.debounce = null;
+      }
+      this.debounce = setTimeout(() => {
+        this.debounce = null;
+      }, 300);
+    }
+    if (!isClickInside) {
+      if (this.type == 'autocomplete') {
+        const autocompleteInput = this.getAutoCompleteInput();
+        if (autocompleteInput) {
+          if (this.checkboxes) {
+            autocompleteInput.setValue('');
+          }
+          else {
+            autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
+          }
+        }
+      }
+    }
+    const clickToTag = Generate.findEventPathWithKey(event, 'className', ['bcm-tag']);
+    const clickToOtherTag = Generate.findEventPathWithKey(event, 'className', ['bcm-tag bcm-tag--other']);
+    const clickToSelect = Generate.findEventPathWithKey(event, 'id', [`bcm-list-input-${this._id}`, `bcm-list-label-${this._id}`]);
+    const clickToTagDismiss = Generate.findEventPathWithKey(event, 'className', ['right close-button']);
+    if (clickToSelect && !clickToTagDismiss && this.type != 'autocomplete') {
+      this.isOpen = clickToTag || clickToOtherTag ? true : !this.isOpen;
+    }
+    if (list) {
+      if (this.isOpen) {
+        if (!list.contains(event.target) && !this.el.contains(event.target)) {
+          this.isOpen = false;
+          // this.unSelectOther()
+        }
+      }
+    }
+  }
+  bcmOnSearchClear(event) {
+    var _a, _b;
+    if (this.type == 'autocomplete') {
+      if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
+        if (event.detail) {
+          this.setClear();
+        }
+      }
+    }
+  }
+  bcmOnSearch(event) {
+    var _a, _b, _c, _d, _e, _f;
+    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
+      this.searchGetParents = snq(() => { var _a; return (_a = event.detail) === null || _a === void 0 ? void 0 : _a.parentIndex; }, null);
+      this.searchResultLimit = 10;
+      this.searchFound = ((_c = event.detail) === null || _c === void 0 ? void 0 : _c.matching) != null ? (_d = event.detail) === null || _d === void 0 ? void 0 : _d.matching.length : null;
+      this.returnFilterData = listState.filterData(this._id, (_e = event.detail) === null || _e === void 0 ? void 0 : _e.nestedResult);
+      if (this.searchFound > 0 && this.highlight) {
+        this.highlightText = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.value;
+      }
+      if (this.type == 'autocomplete') {
+        this.isOpen = true;
+      }
+      if (!event.detail.result) {
+        if (this.type == 'autocomplete') {
+          this.isOpen = false;
+        }
+        if (this.isSelectedOther) {
+          this.filterOtherList(this.otherTagIds());
+        }
+        else {
+          this.returnFilterData = {};
+          listState.filterData(this._id, null);
+        }
+        // this.isSelectedOther = false
+        this.searchResultLimit = null;
+        this.highlightText = null;
+      }
+      this.markForCheck();
+    }
+  }
+  //keyboard navigation
+  handleKeyDown(ev) {
+    const keycode = ev.keyCode || ev.which;
+    if (keycode === Bcm.KeyCode.escape) {
+      if (this.isOpen) {
+        this.isOpen = false;
+        ev.preventDefault();
+        ev.stopPropagation();
+        ev.stopImmediatePropagation();
+      }
+    }
+    if (this.keyControl) {
+      const keyboard = new ListKeyControl(keycode, this.el, this.treeview, this.checkboxes);
+      keyboard.openGroup = openGroupId => {
+        this.openGroup(openGroupId);
+      };
+      keyboard.checkedItem = checkedItemId => {
+        this.checkedItem(checkedItemId);
+      };
+      keyboard.keyDown();
+    }
+  }
+  handleKeyUp(ev) {
+    if (this.keyControl) {
+      const focusedList = Generate.findEventPath(ev, this.el);
+      if (focusedList) {
+        const list = document.getElementById(`bcm-list-${this._id}`);
+        if (list) {
+          const items = list.querySelectorAll('.bcm-list__item.focused');
+          if (items.length > 0) {
+            const main = list.querySelector('main');
+            const itemHeight = items[0].offsetHeight;
+            const listHeight = main.offsetHeight;
+            const itemTop = items[0].offsetTop;
+            if (itemTop > listHeight) {
+              main.scrollTop = itemTop - listHeight / 2 + itemHeight / 2;
+            }
+            if (itemTop < listHeight) {
+              main.scrollTop = itemTop - listHeight / 2 - itemHeight / 2;
+            }
+          }
+        }
+      }
+    }
+  }
+  async set(data) {
+    if (data) {
+      if (Array.isArray(data)) {
+        this.addChecked(data);
+      }
+      if (typeof data === 'string' || typeof data === 'number') {
+        this.selectedItem(data);
+      }
+    }
+    else {
+      this.setClear();
+    }
+  }
+  async get() {
+    var _a, _b;
+    return this.value ? (this.checkboxes ? (_b = (_a = (await this.getCheckedList())) === null || _a === void 0 ? void 0 : _a.checkedList) === null || _b === void 0 ? void 0 : _b.map(item => item.id) : this.value.id) : null;
+  }
+  async getCheckedList() {
+    return Promise.resolve(listState.getCheckedList(this._id));
+  }
+  async getSelected() {
+    return Promise.resolve(listState.getSelected(this._id));
+  }
+  async getValue() {
+    return Promise.resolve(this.value);
+  }
+  async addChecked(ids = [], save = false, emit = true) {
+    if (ids && ids.length > 0) {
+      if (!save) {
+        listState.setClear(this._id);
+        await delay(10);
+      }
+      await listState.addChecked(this._id, ids);
+      await delay(10);
+      emit && (this.value = (await this.getCheckedList()).checkedList);
+      this.markForCheck();
+    }
+    return Promise.resolve(this.value);
+  }
+  async selected(id) {
+    if (id) {
+      return Promise.resolve(await this.selectedItem(id));
+    }
+    return false;
+  }
+  async setClear(e) {
+    listState.setClear(this._id);
+    this.value = null;
+    this.inputText = '';
+    this.isOpen = false;
+    this.selectAllItem.indeterminate = 'uncheck';
+    this.tagCalculator();
+    this.markForCheck();
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    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();
+  }
+  async show() {
+    this.isOpen = true;
+    return Promise.resolve();
+  }
+  async hide() {
+    this.isOpen = false;
+    return Promise.resolve();
+  }
+  updateOptions() {
+    listState.updateOptions(this._id, this);
+  }
+  handleIndeterminate(checkeds, total) {
+    this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? (checkeds === total ? 'check' : 'indeterminate') : 'uncheck', checked: this.checkboxes && checkeds > 0 ? (checkeds === total ? true : false) : false });
+  }
+  listenResize() {
+    this.tagCalculator();
+    this.calculateLocation();
+    this.markForCheck();
+  }
+  async unSelectOther() {
+    await this.onClearSearch();
+    this.isSelectedOther = false;
+    this.searchFound = null;
+    this.returnFilterData = {};
+    listState.filterData(this._id, null);
+    await delay(10);
+    return Promise.resolve();
+  }
+  async onClearSearch() {
+    const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
+    if (searchInput) {
+      await searchInput.handleClear();
+    }
+    return Promise.resolve();
+  }
+  async onSelectSearch() {
+    const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
+    if (searchInput) {
+      await delay(100);
+      searchInput.onBcmFocus();
+      searchInput.onBcmSelect();
+    }
+  }
+  otherTagIds() {
+    const otherTag = document.querySelector(`#bcm-list-input-tag-${this._id}-other-tag`);
+    if (otherTag) {
+      return otherTag.getAttribute('data-ids').split(',');
+    }
+  }
+  async filterOtherList(ids) {
+    const checklist = (await this.getCheckedList()).nestedResult;
+    const filter = Generate.convertIdsToNestedData(ids, checklist);
+    this.returnFilterData = await listState.filterData(this._id, filter, null, true);
+    this.searchFound = ids.length || 0;
+    this.limit = 500;
+    this.searchGetParents = null;
+    await delay(1000);
+    this.markForCheck();
+  }
+  async initState() {
+    var _a, _b, _c;
+    this.onClearSearch();
+    await listState.setValue({
+      id: this._id,
+      dataSource: this.data && snq(() => (typeof this.data == 'string' ? JSON.parse(this.data) : this.data), []),
+      options: this,
+    });
+    const { totalRoots, totalItems } = listState.getValue(this._id);
+    this.totalData = totalItems;
+    this.totalRootData = totalRoots;
+    this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
+    if (!this.checkboxes) {
+      this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+    }
+    // checkli olan subparentların indeterminate kontrolü için
+    if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+      const checkedIDs = [];
+      this.value.forEach(item => {
+        if (!item.items || item.items.length === 0) {
+          checkedIDs.push(item.id);
+        }
+      });
+      await this.addChecked(checkedIDs, false, false);
+    }
+    await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
+    await this.markForCheck();
+  }
+  async markForCheck() {
+    await delay(10);
+    this.tick = Generate.UID();
+  }
+  getOptions() {
+    return snq(() => listState.getValue(this._id).options, {});
+  }
+  getItems() {
+    if (this.isSelectedOther) {
+      return this.returnFilterData['checkedItems'];
+    }
+    return snq(() => listState.getData(this._id), []);
+  }
+  getLimitedItems(ids) {
+    return snq(() => listState.getDataPagination(this._id, this.searchResultLimit || this.limit, ids), []);
+  }
+  openGroup(parentId) {
+    listState.openGroup(this._id, parentId);
+    this.markForCheck();
+  }
+  focusItem(e) {
+    if (e.target.classList.contains('bcm-list__item')) {
+      const item = e.target;
+      const list = document.getElementById(`bcm-list-${this._id}`);
+      if (list) {
+        const items = list.querySelectorAll('.bcm-list__item');
+        if (items.length > 0) {
+          const selectedItem = list.querySelector('.bcm-list__item.focused');
+          if (selectedItem) {
+            selectedItem.classList.remove('focused');
+          }
+          item.classList.add('focused');
+        }
+      }
+    }
+  }
+  async selectedItem(itemId) {
+    var _a;
+    if (!this.checkboxes) {
+      this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
+      this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+      this.isOpen = false;
+      this.markForCheck();
+      if (this.type == 'autocomplete' && this.value) {
+        // await delay(100)
+        // this.resetCaption()
+        const autocompleteInput = this.getAutoCompleteInput();
+        if (autocompleteInput) {
+          setTimeout(() => {
+            var _a;
+            autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
+            this.isOpen = false;
+          }, 100);
+        }
+      }
+    }
+    return Promise.resolve(this.value);
+  }
+  async checkedItem(itemId) {
+    const isCheckSelectAll = itemId === 'select-all';
+    if (!isCheckSelectAll) {
+      listState.checkedItem(this._id, itemId);
+    }
+    else {
+      listState.selectAll(this._id, !this.selectAllItem.checked);
+    }
+    this.value = (await this.getCheckedList()).checkedList;
+    this.changeVisibleCheckeds();
+    this.markForCheck();
+  }
+  changeVisibleCheckeds() {
+    const { visibledItems } = this.returnFilterData;
+    this.returnFilterData = {
+      visibledItems,
+      checkedItems: (visibledItems && visibledItems.filter(item => item.checked)) || [],
+    };
+  }
+  getAutoCompleteInput() {
+    return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
+  }
+  dataScrollEvent(event) {
+    let count = 0;
+    let io = new IntersectionObserver((data) => {
+      if (count === 0) {
+        count++;
+        if (data[0].isIntersecting) {
+          this.limit += 15;
+          this.searchResultLimit += 15;
+          io.disconnect();
+          io = null;
+        }
+      }
+    }, this.options);
+    io.observe(event.target.lastElementChild);
+  }
+  async calculateLocation() {
+    var _a, _b;
+    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+      const list = document.getElementById(`bcm-list-${this._id}`);
+      // list && (list.style.height = '256px') //sebebi neydi ki!
+      var placement = this.placement;
+      const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
+      const targetElement = document.getElementById(targetElementId);
+      if (list && targetElement) {
+        getPlacement(list, targetElement, placement, (place) => (placement = place));
+        await delay(10);
+        let pos = setPosition(placement, targetElement);
+        let captionAreaHeight = 0;
+        let labelAreaHeight = 0;
+        if (this.linkedComponent) {
+          const linked = document.getElementById(this.linkedComponent);
+          if (linked) {
+            if (!linked['noCaption']) {
+              const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-caption-area')) || linked.querySelector('.bcm-caption-area');
+              if (captionArea) {
+                captionAreaHeight = captionArea.offsetHeight || captionArea.clientHeight;
+              }
+            }
+            const labelArea = ((_b = linked.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.bcm-label')) || linked.querySelector('.bcm-label');
+            if (labelArea) {
+              labelAreaHeight = labelArea.offsetHeight || labelArea.clientHeight;
+            }
+          }
+        }
+        if (this.fullWidth) {
+          list.style.width = targetElement.offsetWidth + 'px';
+        }
+        else {
+          list.style.width = this.width || 'auto';
+        }
+        if (this.height.indexOf('%') > -1) {
+          list.style.height = NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + 'px';
+        }
+        else {
+          list.style.height = this.height;
+        }
+        list.style.minHeight = this.minHeight;
+        // const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
+        const calculatedMaxHeight = placement.split('-')[0] == 'top' ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
+        if (this.maxHeight.indexOf('%') > -1) {
+          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + 'px';
+        }
+        else {
+          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + 'px';
+        }
+        getPlacement(list, targetElement, placement, (place) => (placement = place));
+        await delay(10);
+        pos = setPosition(placement, targetElement);
+        list.style.top = (placement.split('-')[0] == 'top' ? pos[0] - list.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + 'px';
+        // list.style.left = pos[1] + 'px';
+        list.style.left = placement.split('-')[1] == 'end' ? pos[1] - list.offsetWidth + 'px' : pos[1] + 'px';
+        list.classList.toggle('bcm-list--top', placement.split('-')[0] == 'top');
+        this.calculatedViewport = true;
+      }
+    }
+  }
+  render() {
+    const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
+    const hostClasses = cs('bcm-list', `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === 'large' ? 'size-3' : 'size-2', {
+      'error': this.captionType == Bcm.Status.error,
+      'full-width': fullWidth,
+      'bcm-list__linked': this.linkedComponent,
+      hidden,
+      readonly,
+      disabled,
+    });
+    const bcmListContainer = cs('bcm-list__container', this.linkedComponent ? 'bcm-list__type-linked-component' : `bcm-list__type-${this.type}`, {
+      'is-open': this.isOpen && this.calculatedViewport,
+      'error': this.captionType == Bcm.Status.error,
+      'full-width': fullWidth,
+      hidden,
+      readonly,
+      disabled,
+    });
+    const bcmListInput = cs('bcm-list__input');
+    const openedType = this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent;
+    return (h(Host, { class: hostClasses, tabindex: "0", style: {
+        '--width': fullWidth ? '100%' : this.width,
+        '--height': openedType ? '100%' : this.height,
+        '--max-height': openedType ? 'inherit' : this.maxHeight,
+        '--min-height': openedType ? 'inherit' : this.minHeight,
+      } },
+      h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null,
+        h(LabelTemplate, { size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))),
+      this.type == 'select' && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput },
+        h("span", { class: cs('bcm-list__input-container', { 'type-single': !checkboxes, 'value-empty': !this.value }) },
+          this.checkboxes && h("span", { id: `bcm-list-input-tag-container-${this._id}`, class: "bcm-list__input-tag-container" }),
+          this.checkboxes && !this.value && h("span", { class: "bcm-list__input-placeholder" }, this.placeholder),
+          !this.checkboxes && (this.value ? this.inputText : h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))),
+        h("span", { class: cs('bcm-list__input-buttons', {
+            disabled: disabled,
+          }) },
+          this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" },
+            h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))),
+          h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && 'caret-is-open'}` },
+            h("bcm-icon", { icon: `far fa-angle-down` }))))),
+      this.type === 'autocomplete' && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { 'bcm-list__input-autocomplete': this.type == 'autocomplete' }) },
+        h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` },
+          this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }),
+          h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))),
+      h(ListTemplate, { highlight: this.highlightText, searchable: this.type == 'autocomplete' ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon }),
+      h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+  }
+  static get is() { return "bcm-list"; }
+  static get originalStyleUrls() { return {
+    "$": ["list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["list.css"]
+  }; }
+  static get properties() { return {
+    "_id": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "Generate.UID()"
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "ListTypes",
+        "resolved": "\"autocomplete\" | \"listbox\" | \"select\"",
+        "references": {
+          "ListTypes": {
+            "location": "import",
+            "path": "@bcm/model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "Bcm.ListType.listbox"
+    },
+    "treeview": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "treeview",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checkboxes": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checkboxes",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "searchable": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "searchable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "name": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "SizeTypes",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "SizeTypes": {
+            "location": "import",
+            "path": "@bcm/model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "Bcm.Size.medium"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "readonly": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "highlight": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "highlight",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "highlightText": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "highlight-text",
+      "reflect": false
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "height": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "'256px'"
+    },
+    "maxHeight": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-height",
+      "reflect": false,
+      "defaultValue": "'500px'"
+    },
+    "minHeight": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-height",
+      "reflect": false,
+      "defaultValue": "'150px'"
+    },
+    "width": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "'256px'"
+    },
+    "infoFooter": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "info-footer",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "variableText": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variable-text",
+      "reflect": false,
+      "defaultValue": "'item'"
+    },
+    "template": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "template",
+      "reflect": false
+    },
+    "allOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "all-open",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "keyControl": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "key-control",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checkAll": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "check-all",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "stopDeepClean": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "stop-deep-clean",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "linkedComponent": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "linked-component",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "'Choose an option'"
+    },
+    "searchPlaceholder": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search-placeholder",
+      "reflect": false,
+      "defaultValue": "'Search'"
+    },
+    "searchIsOnlyChilds": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search-is-only-childs",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clearable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "caption": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption",
+      "reflect": false
+    },
+    "noCaption": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "captionType": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "StatusTypes",
+        "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+        "references": {
+          "StatusTypes": {
+            "location": "import",
+            "path": "@bcm/model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-type",
+      "reflect": false,
+      "defaultValue": "Bcm.Status.default"
+    },
+    "captionError": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-error",
+      "reflect": false
+    },
+    "emptyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "empty-text",
+      "reflect": false
+    },
+    "emptyIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "empty-icon",
+      "reflect": false,
+      "defaultValue": "'fad fa-folder-open'"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "PlacementTypes",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "PlacementTypes": {
+            "location": "import",
+            "path": "@bcm/model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "Bcm.Placement['bottom-start']"
+    },
+    "data": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data",
+      "reflect": false,
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "inputText": {},
+    "isOpen": {},
+    "calculatedViewport": {},
+    "isSelectedOther": {},
+    "isHaveOtherTag": {},
+    "captionCache": {},
+    "captionTypeCache": {},
+    "tick": {},
+    "totalData": {},
+    "totalRootData": {},
+    "limit": {},
+    "searchGetParents": {},
+    "searchResultLimit": {},
+    "searchFound": {},
+    "returnFilterData": {},
+    "returnOtherData": {},
+    "options": {},
+    "tagContainerWidth": {},
+    "selectAllItem": {}
+  }; }
+  static get events() { return [{
+      "method": "bcmChecklist",
+      "name": "bcm-checklist",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "bcmSelected",
+      "name": "bcm-selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "bcm-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "open",
+      "name": "bcm-open",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "close",
+      "name": "bcm-close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "set": {
+      "complexType": {
+        "signature": "(data: any) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "get": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "getCheckedList": {
+      "complexType": {
+        "signature": "() => Promise<{ checkedList: any[]; nestedResult: any[]; }>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<{ checkedList: any[]; nestedResult: any[]; }>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "getSelected": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "getValue": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "addChecked": {
+      "complexType": {
+        "signature": "(ids?: any[], save?: boolean, emit?: boolean) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "selected": {
+      "complexType": {
+        "signature": "(id: any) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "setClear": {
+      "complexType": {
+        "signature": "(e?: any) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "resetCaption": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "_id",
+      "methodName": "watchId"
+    }, {
+      "propName": "value",
+      "methodName": "handleValueChange"
+    }, {
+      "propName": "returnFilterData",
+      "methodName": "watchReturnFilterData"
+    }, {
+      "propName": "isSelectedOther",
+      "methodName": "handleOtherSelected"
+    }, {
+      "propName": "isOpen",
+      "methodName": "handleOpen"
+    }, {
+      "propName": "data",
+      "methodName": "dataChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "bcm-is-intersecting",
+      "method": "isIntersecting",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "bcm-items",
+      "method": "handleSlotItems",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "bcm-change",
+      "method": "handleChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "wheel",
+      "method": "handleWheel",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "handleClick",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "bcm-on-search-clear",
+      "method": "bcmOnSearchClear",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "bcm-on-search",
+      "method": "bcmOnSearch",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "keydown",
+      "method": "handleKeyDown",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "keyup",
+      "method": "handleKeyUp",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }]; }
+}
+__decorate([
+  IsLoad()
+], BcmList.prototype, "el", void 0);
+__decorate([
+  JsonParse('data')
+], BcmList.prototype, "data", void 0);
+__decorate([
+  JsonParse('data', true)
+], BcmList.prototype, "dataChanged", null);