bromcom-ui 2.8.1-rc.2 → 2.8.1-rc.3

package/dist/cjs/bcm-search.cjs.entry.js

@@ -1,245 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$1 = require('./index-ddfd6d8f.js');
-const generate = require('./generate-227da8fb.js');
-const bcm = require('./bcm-634604e3.js');
-const inputTemplate = require('./input-template-3af2733b.js');
-const utils = require('./utils-fc077139.js');
-const index = require('./index-4506fcd7.js');
-const stringHelper = require('./string-helper-45cffee0.js');
-require('./colors-e1d142ad.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-require('./types-cc4adee7.js');
-require('./index-fdbf5226.js');
-
-const { state } = index.createStore({
-  value: new Map(),
-});
-const setValue = val => {
-  const { id, dataSource } = val;
-  const data = {
-    id: generate.snq(() => id, generate.Generate.UID),
-    dataSource: dataSource && dataSource.length > 0 && recursive(dataSource),
-    searchIsOnlyChilds: val.searchIsOnlyChilds,
-  };
-  state.value.set(data.id, data);
-};
-const recursive = (data, parentId) => {
-  let recData = [];
-  if (data) {
-    recData = data.map(item => (Object.assign(Object.assign(Object.assign({}, item), { parentId: generate.snq(() => parentId, null) }), (item.items && item.items.length > 0 && { items: generate.snq(() => recursive(item.items, item.id), []) }))));
-  }
-  return recData;
-};
-const removeValue = _id => {
-  state.value.delete(_id);
-};
-const getValue = id => generate.snq(() => state.value.get(id), {});
-const getDataPagination = (id, limit = 3) => {
-  let data = [];
-  const value = getValue(id);
-  if (value) {
-    const { dataSource } = value;
-    data = dataSource.slice(0, limit);
-  }
-  return data;
-};
-// //search treeview data by text
-// const searchData = (id, search, items?) => {
-//     let dataSource
-//     if (items && items.length > 0) {
-//         dataSource = items
-//     } else {
-//         const value = getValue(id);
-//         dataSource = value.dataSource;
-//     }
-//     let result = []
-//     if (dataSource) {
-//         dataSource.forEach(child => {
-//             if (child.text.toLowerCase().includes(search.toLowerCase())) {
-//                 result.push(child)
-//             }
-//             result = result.concat(searchData(id, search, child.items))
-//         })
-//     };
-//     return result
-// };
-//nested search
-const searchData = (id, searchText, items) => {
-  let dataSource;
-  if (items && items.length > 0) {
-    dataSource = items;
-  }
-  else {
-    const value = getValue(id);
-    dataSource = value.dataSource;
-  }
-  let results = [];
-  if (dataSource) {
-    results.push(nestedSearch(id, dataSource, searchText));
-    //return with their parents
-    // dataSource.forEach(child => {
-    //     if (child.text.toLowerCase().includes(searchText.toLowerCase())) {
-    //         results.push(child)
-    //     } else if (child.items && child.items.length > 0) {
-    //         child.items = nestedSearch(child.items, searchText)
-    //         if (child.items.length > 0) {
-    //             results.push(child)
-    //         }
-    //     }
-    // })
-  }
-  return {
-    result: generate.snq(() => generate.Generate.flatArray(results[0].result), []),
-    matching: generate.snq(() => results[0].matching, []),
-    parentIndex: generate.snq(() => results[0].parentIndex, []),
-    nestedResult: generate.snq(() => results[0].nestedResult, []),
-  };
-};
-const nestedSearch = (id, items, searchText) => {
-  let matching = [];
-  let parentIndex = [];
-  let result = [];
-  let nestedResult = [];
-  const { searchIsOnlyChilds } = getValue(id);
-  if (items && items.length > 0) {
-    items.forEach(child => {
-      let isChild = searchIsOnlyChilds && child.parentId !== null;
-      let isMatching = stringHelper.StringHelper.slugify(child.text).indexOf(stringHelper.StringHelper.slugify(searchText)) > -1 ||
-        (child.keywords && stringHelper.StringHelper.slugify(child.keywords).indexOf(stringHelper.StringHelper.slugify(searchText)) > -1);
-      if (isMatching && (!searchIsOnlyChilds || (searchIsOnlyChilds && isChild))) {
-        result.push(child.id);
-        matching.push(child.id);
-        parentIndex.push(child.id);
-        nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId });
-        if (child.items && child.items.length > 0) {
-          const found = nestedSearch(id, child.items, searchText);
-          if (found.matching.length > 0) {
-            found.matching.forEach(chi => {
-              matching.push(chi);
-            });
-          }
-        }
-      }
-      else if (child.items && child.items.length > 0) {
-        const found = nestedSearch(id, child.items, searchText);
-        if (found.result.length > 0) {
-          found.result.forEach(chi => {
-            result.push(chi);
-          });
-          result.push(child.id);
-          parentIndex.push(child.id);
-          nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId, items: found.nestedResult });
-        }
-        if (found.matching.length > 0) {
-          matching.push(...found.matching);
-        }
-      }
-    });
-  }
-  return { result, matching, parentIndex, nestedResult };
-};
-const searchState = {
-  setValue,
-  removeValue,
-  getValue,
-  getDataPagination,
-  searchData,
-};
-
-const searchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea .bcm-input-element{white-space:normal}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
-
-const BcmSearch = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmOnSearch = index$1.createEvent(this, "bcm-on-search", 7);
-    this.bcmOnSearchClear = index$1.createEvent(this, "bcm-on-search-clear", 7);
-    this.debounceHandler = generate.Generate.debounceInput((event) => this.onSearchValue(event, this), 300, false, () => {
-      var _a, _b;
-      this.isActiveClearable = ((_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.clearable;
-    });
-    this._id = generate.Generate.UID();
-    this.placeholder = "Search";
-    this.disabled = false;
-    this.readonly = false;
-    this.clearable = true;
-    this.size = bcm.Bcm.Size.medium;
-    this.limit = 10;
-    this.searchIsOnlyChilds = false;
-    this.minSearchLength = 2;
-    this.data = [];
-    this.tick = {};
-    this.isActiveClearable = false;
-  }
-  async componentDidLoad() {
-    await this.initState();
-  }
-  async dataChanged(newValue, oldValue) {
-    // console.log('data changed', newValue, oldValue)
-    if (newValue !== oldValue) {
-      await this.initState();
-    }
-  }
-  async initState() {
-    await searchState.setValue({
-      id: this._id + "-input",
-      dataSource: this.data,
-      searchIsOnlyChilds: this.searchIsOnlyChilds,
-    });
-    await this.markForCheck();
-  }
-  markForCheck() {
-    this.tick = generate.Generate.UID();
-  }
-  handleInput() {
-    // console.log("aheyya")
-  }
-  async onBcmFocus() {
-    this.inputElement.focus();
-  }
-  async onBcmBlur() {
-    this.inputElement.blur();
-  }
-  async onBcmSelect() {
-    this.inputElement.select();
-  }
-  async setValue(newValue) {
-    this.inputElement.value = newValue;
-  }
-  handleFocus() { }
-  handleBlur() { }
-  handleChange() { }
-  async handleClear(eventEmit = true) {
-    this.inputElement.value = '';
-    const { value, id } = this.inputElement;
-    searchState.searchData(id, value);
-    this.isActiveClearable = false;
-    this.bcmOnSearch.emit({ result: null, value: null, matching: null, parentIndex: null });
-    this.bcmOnSearchClear.emit(eventEmit);
-    await utils.delay(10);
-    return Promise.resolve();
-  }
-  onSearchValue(event, instance) {
-    const { value, id } = event.target;
-    const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= this.minSearchLength ? searchState.searchData(id, value, null) : null;
-    const { bcmOnSearch, inputElement } = instance;
-    bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
-  }
-  render() {
-    const { _id, placeholder, disabled, readonly } = this;
-    return index$1.h(index$1.Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, index$1.h(inputTemplate.InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
-  }
-  get el() { return index$1.getElement(this); }
-  static get watchers() { return {
-    "data": ["dataChanged"]
-  }; }
-};
-BcmSearch.style = searchCss;
-
-exports.bcm_search = BcmSearch;

package/dist/collection/components/organism/list/list-tag-control.js

@@ -1,173 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { Tooltip } from '@bcm/helpers';
-import snq from 'snq';
-import { StringHelper } from '../../../helper/string-helper';
-import { pluralize } from '../../../utils/utils';
-export class ListTagControl {
-  constructor(containerId, values, listId, selectedOtherTag, clearable) {
-    this.clearable = false;
-    this.containerId = containerId;
-    this.values = values;
-    this.listId = listId;
-    this.selectedOtherTag = selectedOtherTag;
-    this.clearable = clearable;
-  }
-  getTooltip(id, text) {
-    return new Tooltip({ message: text, targetId: id, placement: 'bottom' });
-  }
-  tagHtmlTemplate(tag, isOtherTag = false, otherTagIsSingle = false) {
-    return `<span class="bcm-tag__content dismissable ${!otherTagIsSingle && isOtherTag && (this.selectedOtherTag ? 'checkable checked' : '')}">
-                    <span class="value">${tag.text}</span>
-                    ${otherTagIsSingle
-      ? ''
-      : `
-                    <span class="right close-button" bcm-list-tag-dismiss >
-                        <bcm-icon icon="fal fa-times"></bcm-icon>
-                    </span>`}
-                </span>`;
-  }
-  getContainer() {
-    return document.getElementById(this.containerId);
-  }
-  getContainerWidth() {
-    let tagContainerWidth = snq(() => document.getElementById(this.containerId).clientWidth, 0);
-    tagContainerWidth = (this.clearable ? tagContainerWidth - 20 : tagContainerWidth) - 20;
-    return [tagContainerWidth < 130 ? 130 : tagContainerWidth - 20, tagContainerWidth];
-  }
-  isClickDismiss(e) {
-    const path = e.path || (e.composedPath && e.composedPath());
-    const tag = path.find(element => element.attributes && element.attributes['bcm-list-tag-dismiss']);
-    return !!tag;
-  }
-  onClickControl(e, id, isOtherTag = false) {
-    const isDismiss = this.isClickDismiss(e);
-    let tooltipId = '';
-    if (isDismiss) {
-      this.onClickDismiss(id);
-      tooltipId = isOtherTag ? `bcm-list-input-tag-${this.listId}-other-tag` : `list-${this.listId}-${id}`;
-      this.getTooltip(tooltipId, '').hide();
-    }
-    else {
-      isOtherTag ? this.onClickOtherTag(id) : this.onClickTag(id);
-    }
-  }
-  calculateTags() {
-    const containerWidth = this.getContainerWidth();
-    const virtualDom = this.getContainer();
-    if (virtualDom) {
-      if (this.values && this.values.length > 0) {
-        if (containerWidth[0] > 0 && virtualDom) {
-          virtualDom.innerHTML = '';
-          this.values.slice(0, 50).map(value => {
-            const tag = document.createElement('div');
-            tag.classList.add('bcm-tag');
-            tag.id = `list-${this.listId}-${value.id}`;
-            // tag.title = value.tagTitle || value.text || '';
-            tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').show();
-            tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').hide();
-            tag.dataset.id = value.id;
-            tag.onclick = e => this.onClickControl(e, value.id);
-            tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, value), { text: StringHelper.textLimitter(value.text, 10) }));
-            virtualDom.appendChild(tag);
-          });
-          let tags = virtualDom.querySelectorAll('.bcm-tag');
-          let otherTags = [];
-          let visibleTags = [];
-          const checkControl = () => {
-            const virtualDomTags = virtualDom.querySelectorAll('.bcm-tag');
-            if (visibleTags.length === 1 && (virtualDomTags === null || virtualDomTags === void 0 ? void 0 : virtualDomTags.length) === 1) {
-              visibleTags[0].innerHTML = this.tagHtmlTemplate({ text: '+1' }, false, true);
-            }
-          };
-          let tagsWidth = Array.from(tags).reduce((acc, tag) => {
-            const tagClientWidth = tag.clientWidth > 50 ? tag.clientWidth : 50;
-            if (tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0]) {
-              acc += tagClientWidth + 10;
-              visibleTags.push(tag);
-              const checkFreeSpace = tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0];
-              !checkFreeSpace && containerWidth[1] < 70 && checkControl();
-            }
-            else {
-              otherTags.push(tag);
-              tag.remove();
-            }
-            return acc;
-          }, 0);
-          const otherTagElement = this.values.slice(visibleTags.length);
-          const virtualDomLastElements = virtualDom.lastElementChild;
-          const otherTagTextControl = args => {
-            const { count, width } = args;
-            if (count > 999)
-              return '999+' + pluralize('item', count);
-            if (width >= 100)
-              return `${count} ` + pluralize('item', count) + ' selected';
-            if (width < 100)
-              return `+${count < 10 ? count : '9'}`;
-          };
-          if (otherTags && otherTags.length > 0 && virtualDomLastElements && virtualDomLastElements.id !== `bcm-list-input-tag-${this.listId}-other-tag`) {
-            otherTags.push(virtualDomLastElements);
-            if (otherTags.length > 0) {
-              const otherCounter = otherTagElement.length + 1;
-              const createOthertagElement = {
-                id: `bcm-list-input-tag-${this.listId}-other-tag`,
-                text: otherTagTextControl({ count: otherCounter, width: containerWidth[1] }),
-                title: snq(() => otherTags
-                  .map(tag => this.values.find(value => value.id == tag.dataset.id))
-                  .sort((a, b) => +a.ct - +b.ct)
-                  .slice(0, 15)
-                  .map(item => StringHelper.textLimitter(item.tagTitle || item.text, 40, true))
-                  .toString()
-                  .split(',')
-                  .join('\r\n') + (otherTags.length > 15 ? ('\r\n...') : ''), '...'),
-              };
-              virtualDomLastElements.remove();
-              visibleTags = visibleTags.filter(tag => tag.id !== virtualDomLastElements.id);
-              const hiddenTags = this.values.filter(value => !visibleTags.find(tag => tag.dataset.id == value.id)).map(value => value.id);
-              const otherTag = document.createElement('div');
-              const otherTagIds = hiddenTags.join(',');
-              const otherTagIsSingle = visibleTags.length === 0;
-              otherTag.classList.add('bcm-tag');
-              !otherTagIsSingle && otherTag.classList.add('bcm-tag--other');
-              otherTag.id = createOthertagElement.id;
-              // otherTag.title = createOthertagElement.title || false;
-              if (createOthertagElement.title) {
-                otherTag.onmouseenter = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).show();
-                otherTag.onmouseleave = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).hide();
-              }
-              otherTag.onclick = e => this.onClickControl(e, otherTagIds, otherTagIsSingle ? false : true);
-              otherTag.innerHTML = this.tagHtmlTemplate(createOthertagElement, true, otherTagIsSingle);
-              otherTag.dataset.ids = hiddenTags.join(',');
-              virtualDom.appendChild(otherTag);
-            }
-          }
-          const otherTag = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
-          const otherTagWidth = otherTag ? (otherTag.clientWidth && otherTag.clientWidth < 50 ? 50 : otherTag.clientWidth) : 200;
-          const tagsPerRow = Math.floor(containerWidth[0] - tagsWidth);
-          if (tagsPerRow > otherTagWidth) {
-            if (otherTag) {
-              const findElement = this.values.find(value => value.id == otherTag.dataset.ids.split(',')[0]);
-              const tag = document.createElement('div');
-              tag.classList.add('bcm-tag');
-              tag.id = `list-${this.listId}-${findElement.id}`;
-              // tag.title = findElement?.title || '';
-              tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').show();
-              tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').hide();
-              tag.dataset.id = findElement.id;
-              tag.onclick = e => this.onClickControl(e, findElement === null || findElement === void 0 ? void 0 : findElement.id);
-              tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, findElement), { text: StringHelper.textLimitter(findElement.text, 10) }));
-              const otherTagElement = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
-              otherTagElement.remove();
-              virtualDom.appendChild(tag);
-            }
-          }
-        }
-      }
-      else {
-        virtualDom.innerHTML = '';
-      }
-    }
-  }
-}