bromcom-ui 2.11.1-rc.9-5 → 2.11.1-rc.9-7

package/dist/cjs/bcm-checkbox-lite_8.cjs.entry.js

@@ -1,2509 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-c591ecec.js');
-const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-e4106db0.js');
-const bcm = require('./bcm-1d1fcf21.js');
-const utils = require('./utils-fc077139.js');
-require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-822a0e3f.js');
-require('./colors-250d0982.js');
-
-const checkboxCss = "@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\"); .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-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}";
-
-const BcmCheckboxLite = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this._id = generate.Generate.UID();
-    this.checked = true;
-    this.indeterminate = null;
-    this.disabled = false;
-    this.hidden = false;
-    this.required = false;
-    this.readOnly = false;
-    this.captionType = bcm.Bcm$1.Status.default;
-  }
-  render() {
-    const { disabled, checked, readOnly, required, indeterminate, hidden, captionType, _id } = this;
-    // const hostClasses = cs(
-    //     'bcm-checkbox',
-    //     'bcm-checkbox__type-default',
-    //     {
-    //         'error': captionType == Bcm.Status.error,
-    //         hidden,
-    //         checked,
-    //         disabled,
-    //         required,
-    //         readOnly,
-    //     }
-    // )
-    // const bcmCheckboxIconClass = cs(
-    //     'bcm-checkbox__icon',
-    //     'bcm-checkbox__icon-lite',
-    //     'bcm-checkbox__icon-' + indeterminate,
-    //     {
-    //         checked
-    //     }
-    // )
-    // const bcmCheckboxLabelClass = cs(
-    //     'bcm-checkbox__label'
-    // )
-    const bcmCheckboxClass = index$1.classnames('bcm-checkbox', `bcm-checkbox-size-medium`, {
-      'error': captionType == bcm.Bcm$1.Status.error,
-      hidden,
-      checked,
-      disabled,
-      required
-    });
-    const bcmCheckboxIconClass = index$1.classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
-      'bcm-checkbox__label-icon-checked': checked,
-    });
-    const bcmCheckboxLabelClass = index$1.classnames('bcm-checkbox__label');
-    const bcmCheckboxInputClass = index$1.classnames('bcm-checkbox__input');
-    return (index.h(index.Host, { class: bcmCheckboxClass, style: { 'margin': '0' } }, index.h("div", { class: bcmCheckboxInputClass, style: {
-        'padding-top': '5px'
-      } }, index.h("input", { id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly }), index.h("label", { class: bcmCheckboxLabelClass, htmlFor: _id }, index.h("span", { class: bcmCheckboxIconClass }, index.h("div", { style: {
-        'height': '12px',
-        'min-height': '12px',
-        'width': '12px',
-        'min-width': '12px'
-      } }, index.h("svg", { class: "bcm-icon-lite", width: "100%", height: "100%", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#ffffff" }))))))));
-  }
-  get el() { return index.getElement(this); }
-};
-BcmCheckboxLite.style = checkboxCss;
-
-const BcmEmpty = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.icon = undefined;
-  }
-  render() {
-    return (index.h(index.Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && index.h("i", { class: `tw-text-8 tw-text-amber-500 ${this.icon}` }), index.h("bcm-typography", { class: "tw-text-slate-700 tw-text-2" }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-};
-
-const listboxCss = "@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:block;width:fit-content;height:fit-content;background-color:#ffffff}:host(.hidden){display:none}:host(.flex){width:100%;height:100%}:host(.flex) .bcm-listbox{max-height:100%;max-width:100%;height:100%;min-width:100%}:host(.full-width){width:100%}:host(.full-width) .bcm-listbox{max-width:100%;min-width:100%}.bcm-listbox{flex:1;background-color:var(--bcm-color-grey-1);width:fit-content;display:flex;flex-direction:column;height:100%;width:100%;min-width:256px;max-width:256px;min-height:auto;max-height:300px;box-sizing:border-box;border:1px solid var(--bcm-color-grey-5)}.bcm-listbox-list{flex:1;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;border-bottom:none}.bcm-listbox-list.loading{min-height:150px;position:relative;margin:0 8px 8px 8px}.bcm-listbox-list .loading{display:none;align-items:center;justify-content:center;height:100%;width:100%;position:absolute;background-color:rgba(255, 255, 255, 0.03)}.bcm-listbox-list .loading.show{display:flex}.bcm-listbox-list .list-container.hidden{display:none}.bcm-listbox .search{padding:8px;padding-bottom:0}.bcm-listbox .search.hidden{display:none !important}.bcm-listbox .empty{display:none;align-items:center;justify-content:center;flex:1;height:100%}.bcm-listbox .empty.show{display:flex}.bcm-listbox-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.listbox-item{display:flex;align-items:stretch;justify-content:flex-start;flex-direction:column;color:var(--bcm-color-grey-8);user-select:none;background-color:var(--bcm-color-grey-1)}.listbox-item.hidden{display:none}.listbox-item .divider{padding:0 8px}.listbox-item-container{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding-left:8px;width:100%}.listbox-item-container .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:4px}.listbox-item-container .check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.listbox-item-container .check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.listbox-item-container .check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.listbox-item-container .check-content .indeterminate:hover:before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.listbox-item-container-text-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;cursor:pointer;width:100%;padding:4px 8px 4px 4px}.listbox-item-container.disabled{color:var(--bcm-color-grey-6)}.listbox-item-container.selected{color:var(--bcm-color-prime-blue-6)}.listbox-item-container.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container:hover:not(.disabled),.listbox-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.caption-area{margin-bottom:8px;min-height:20px}.input-caption{display:block}.error.label{color:var(--bcm-color-red-6) !important}.error.bcm-listbox{border:1px solid var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.input-large{height:38px}.input-medium{height:30px}.input-small{height:20px}";
-
-/**
- * @desc
- * @param str
- */
-const lowercase$2 = (str) => str.toLowerCase();
-const BcmListbox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.listboxItemSelected = index.createEvent(this, "bcm-listbox-item-selected", 7);
-    this.listboxClearSelected = index.createEvent(this, "bcm-listbox-clear-selecteds", 7);
-    this.listboxSendCheck = index.createEvent(this, "bcm-listbox-send-check", 7);
-    this.listboxSendUncheck = index.createEvent(this, "bcm-listbox-send-uncheck", 7);
-    this.listboxChecklist = index.createEvent(this, "bcm-listbox-checklist", 7);
-    this.listboxChange = index.createEvent(this, "bcm-listbox-change", 7);
-    this.listboxChecked = index.createEvent(this, "bcm-listbox-checked", 7);
-    this.change = index.createEvent(this, "bcm-change", 7);
-    this.objectMapping = {
-      'id': "id",
-      'text': "text",
-      'icon': "icon",
-      'avatar': "avatar",
-      'avatarName': "avatarName",
-      'avatarImage': "avatarImage",
-      'secondaryText': "secondaryText",
-      'tooltipText': "tooltipText",
-      'selected': "selected",
-      'checked': "checked",
-      'disabled': "disabled",
-    };
-    this.checkedObjectList = [];
-    this.cacheCheckedObjectList = [];
-    this.allChilds = [];
-    this.onlyChilds = [];
-    this.firstRun = true;
-    this.firstCheck = false;
-    this.onFocus = false;
-    this.isSetData = false;
-    this.isGroupArray = [];
-    this.intersection = [];
-    /**
-     * Component States
-     */
-    this.searchResults = [];
-    this.totalSearch = 0;
-    this.showSearch = true;
-    this.empty = false;
-    this.runClearAndSelect = false;
-    this.innerComponent = false;
-    this.checkboxes = false;
-    this.label = undefined;
-    this.required = false;
-    this.value = null;
-    this.search = false;
-    this.infoFooter = false;
-    this.showIcon = false;
-    this.size = 'medium';
-    this.selectedId = undefined;
-    this.checkedList = [];
-    this.updateCheckedList = [];
-    this._items = [];
-    this.fullWidth = false;
-    this.searchFields = ['text', 'secondaryText', 'tooltipText'];
-    this._flex = undefined;
-    this.hidden = false;
-    this.returnField = "id";
-    this.searchSub = "items";
-    this.searchText = "";
-    this.treeview = false;
-    this.searchPlaceholder = "Search";
-    this.numberOfColumns = 1;
-    this.height = null;
-    this.maxHeight = null;
-    this.template = null;
-    this.highlight = false;
-    this.loading = true;
-    this.noCaption = false;
-    this.caption = undefined;
-    this.captionError = undefined;
-    this.captionType = 'default';
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.tooltip = undefined;
-    this.total = 0;
-    this.items = [];
-    this.checklist = [];
-    this.sortedChecklist = [];
-    this.indeterminateState = 'uncheck';
-    this.checked = false;
-    this.jsonItem = undefined;
-    this.searchData = undefined;
-    this.captionCache = undefined;
-    this.captionTypeCache = undefined;
-    this.checklistSorted = [];
-  }
-  async setClear() {
-    this.listboxChecklist.emit([]);
-    this.value = null;
-    this.selectedId = null;
-    this.listboxClearSelected.emit([]);
-    // this.checkedObjectList.forEach(item => {
-    //     this.listboxUncheckedMethod(String(item[this.objectMapping['id']]), this._internal_id)
-    // });
-    let isItem = utils.getChilds(this.el, 'bcm-listbox-item');
-    let elementStatuses = [];
-    if (isItem) {
-      isItem.map(element => {
-        elementStatuses.push(element.checked = false);
-      });
-    }
-    // console.log("uncheck")
-    await Promise.all(elementStatuses);
-    // if ( allStatuses ){
-    //     console.log("bitti")
-    // }
-    this.checklist = [];
-    this.sortedChecklist = [];
-    this.checklistSorted = [];
-    this.checkedObjectList = [];
-    await utils.delay(10);
-    return Promise.resolve();
-  }
-  async resetCaption() {
-    await utils.delay(10);
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-    await utils.delay(10);
-    return Promise.resolve();
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  async getValue() {
-    if (this.checkboxes) {
-      return this.checkedObjectList;
-    }
-    else {
-      return this.value;
-    }
-  }
-  async getChecklist() {
-    return this.checkedObjectList;
-  }
-  async showSearchMethod(val = true) {
-    if (this.treeview == false && this.search == true) {
-      this.showSearch = val;
-      var search = null;
-      if (search = this.el.shadowRoot.getElementById("search")) {
-        if (val) {
-          search.classList.remove('hidden');
-        }
-        else {
-          search.classList.add('hidden');
-        }
-      }
-    }
-  }
-  async selected(id) {
-    this.selectedId = String(id);
-    if (this.treeview === true) {
-      setTimeout(async () => {
-        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-        if (bcmTreeview) {
-          await bcmTreeview.selected(this.selectedId);
-        }
-      }, 100);
-    }
-  }
-  async clearAndSelectSearch(select = true) {
-    this.runClearAndSelect = true;
-    if (this.search == true) {
-      setTimeout(() => {
-        var searchInput = null;
-        searchInput = this.el.shadowRoot.querySelector("bcm-old-search");
-        if (searchInput) {
-          searchInput.setClear();
-          if (select == true) {
-            searchInput.select();
-          }
-        }
-      }, 100);
-    }
-  }
-  async addChecked(items) {
-    await this.setClear();
-    if (items) {
-      if (typeof items != 'string') {
-        await utils.delay(50);
-        if (sessionStorage.getItem(this._internal_id + "-config")) {
-          this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
-        }
-        this.checkedList = items;
-        this.checkedList.forEach((item) => {
-          this.handleListboxChecked({ detail: String(item) }, this._internal_id);
-        });
-        this.updateCheckedList = [];
-        if (this.treeview === true) {
-          setTimeout(async () => {
-            await customElements.whenDefined("bcm-treeview");
-            const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-            if (bcmTreeview) {
-              await bcmTreeview.addChecked(items);
-            }
-          }, 50);
-        }
-      }
-    }
-  }
-  async updateChecked(items) {
-    this.setClear();
-    this.checkedList = [];
-    this.updateCheckedList = items;
-    this.updateCheckedList.forEach((item) => {
-      this.handleListboxChecked({ detail: item });
-    });
-    setTimeout(async () => {
-      if (this.treeview === true) {
-        await customElements.whenDefined("bcm-treeview");
-        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-        if (bcmTreeview) {
-          await bcmTreeview.updateChecked(items);
-        }
-      }
-    }, 100);
-  }
-  async config(_config) {
-    if (_config['treeview'] && _config['treeview'] === true) {
-      typeof _config['treeview'] == 'boolean'
-        ? this.treeview = _config['treeview']
-        : this.treeview = false;
-    }
-    setTimeout(async () => {
-      if (this.treeview === true) {
-        await customElements.whenDefined("bcm-treeview");
-        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-        if (bcmTreeview) {
-          await bcmTreeview.config(_config);
-          if (this.selectedId) {
-            await bcmTreeview.selected(this.selectedId);
-          }
-        }
-      }
-    }, 300);
-    if (_config['searchFields']) {
-      if (Array.isArray(_config['searchFields'])) {
-        this.searchFields = _config['searchFields'];
-      }
-    }
-    if (_config['searchPlaceholder']) {
-      typeof _config['searchPlaceholder'] == 'string'
-        ? this.searchPlaceholder = _config['searchPlaceholder']
-        : this.searchPlaceholder = null;
-    }
-    if (_config['maxHeight']) {
-      typeof _config['maxHeight'] == 'string'
-        ? this.maxHeight = _config['maxHeight']
-        : this.maxHeight = "100%";
-    }
-    if (_config['height']) {
-      typeof _config['height'] == 'string'
-        ? this.height = _config['height']
-        : this.height = "100%";
-    }
-    if (_config['template']) {
-      typeof _config['template'] == 'string'
-        ? this.template = _config['template']
-        : this.template = null;
-    }
-    if (_config['searchable']) {
-      typeof _config['searchable'] == 'boolean'
-        ? this.search = _config['searchable']
-        : this.search = false;
-    }
-    if (_config['highlight']) {
-      typeof _config['highlight'] == 'boolean'
-        ? this.highlight = _config['highlight']
-        : this.highlight = false;
-    }
-    if (_config['fullWidth']) {
-      typeof _config['fullWidth'] == 'boolean'
-        ? this.fullWidth = _config['fullWidth']
-        : this.fullWidth = false;
-    }
-    if (_config['numberOfColumns']) {
-      typeof _config['numberOfColumns'] == 'number'
-        ? this.numberOfColumns = _config['numberOfColumns']
-        : this.numberOfColumns = 1;
-    }
-    if (_config['infoFooter']) {
-      typeof _config['infoFooter'] == 'boolean'
-        ? this.infoFooter = _config['infoFooter']
-        : this.infoFooter = false;
-    }
-    if (_config['checkable']) {
-      typeof _config['checkable'] == 'boolean'
-        ? this.checkboxes = _config['checkable']
-        : this.checkboxes = false;
-    }
-    if (_config['showIcon']) {
-      typeof _config['showIcon'] == 'boolean'
-        ? this.showIcon = _config['showIcon']
-        : this.showIcon = false;
-    }
-    if (_config['size']) {
-      (["small", "medium", "large"].indexOf(_config['size']) >= 0)
-        ? this.size = _config['size']
-        : this.size = 'medium';
-    }
-    this.searchSub = this.objectMapping['items'];
-    if (_config['mapping']) {
-      if (_config['mapping']['id']) {
-        this.objectMapping['id'] = String(_config['mapping']['id']);
-        this.returnField = this.objectMapping['id'];
-      }
-      if (_config['mapping']['text']) {
-        this.objectMapping['text'] = _config['mapping']['text'];
-      }
-      if (_config['mapping']['icon']) {
-        this.objectMapping['icon'] = _config['mapping']['icon'];
-      }
-      if (_config['mapping']['avatar']) {
-        this.objectMapping['avatar'] = _config['mapping']['avatar'];
-      }
-      if (_config['mapping']['avatarName']) {
-        this.objectMapping['avatarName'] = _config['mapping']['avatarName'];
-      }
-      if (_config['mapping']['avatarImage']) {
-        this.objectMapping['avatarImage'] = _config['mapping']['avatarImage'];
-      }
-      if (_config['mapping']['secondaryText']) {
-        this.objectMapping['secondaryText'] = _config['mapping']['secondaryText'];
-      }
-      if (_config['mapping']['tooltipText']) {
-        this.objectMapping['tooltipText'] = _config['mapping']['tooltipText'];
-      }
-      if (_config['mapping']['disabled']) {
-        this.objectMapping['disabled'] = _config['mapping']['disabled'];
-      }
-      if (_config['mapping']['checked']) {
-        this.objectMapping['checked'] = _config['mapping']['checked'];
-      }
-      if (_config['mapping']['selected']) {
-        this.objectMapping['selected'] = _config['mapping']['selected'];
-      }
-      if (_config['mapping']['items']) {
-        this.objectMapping['items'] = _config['mapping']['items'];
-        this.searchSub = this.objectMapping['items'];
-      }
-      // if ( this.treeview ) {
-      // }else{
-      //     this.searchSub = this.objectMapping['items']
-      // }
-    }
-    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
-    // forceUpdate(this.el)
-    return Promise.resolve(true);
-  }
-  async setData(_data = []) {
-    this.clearAndSelectSearch(false);
-    this.isLoading(true);
-    this._items = _data;
-    this.searchData = JSON.parse(_data);
-    this.isSetData = true;
-    // this.isEmpty(false)
-    setTimeout(async () => {
-      if (this.treeview === true) {
-        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-        if (bcmTreeview) {
-          await bcmTreeview.setData(_data);
-          if (this.searchData.length > 0) {
-            this.isEmpty(false);
-            this.isLoading(false);
-          }
-        }
-      }
-    }, 100);
-  }
-  // componentDidLoad(){
-  //     console.log("kilitle")
-  //     setTimeout(() => {
-  //         if(this.isSetData) {
-  //             this.isLoading(true)
-  //             this.isEmpty(false)
-  //         }else{
-  //             this.isLoading(false)
-  //             this.isEmpty(true)
-  //         }
-  //     }, 100);
-  // }
-  componentWillRender() {
-    if (this.isSetData) {
-      this.onlyChilds = this.getAllGroup(this.el, true);
-      this.allChilds = this.getAllGroup();
-      if (this.onlyChilds.length != this.total) {
-        this.total = this.onlyChilds.length;
-      }
-      if (this.checkboxes === true) {
-        this.setIndeterminateState();
-        if (this.checklistSorted.length > 0) {
-          this.checkedObjectList = [];
-          this.getAllGroup(this.el).forEach(element => {
-            element.checked == true && (this.firstCheck = true,
-              this.checkedObjectList.indexOf(element.itemObject) == -1 && (this.checkedObjectList.push(element.itemObject)));
-          });
-          if (JSON.stringify(this.cacheCheckedObjectList) !== JSON.stringify(this.checkedObjectList)) {
-            this.listboxChecklist.emit(this.checkedObjectList);
-            this.cacheCheckedObjectList = this.checkedObjectList;
-            this.value = this.checkedObjectList;
-          }
-        }
-        else {
-          if (this.firstCheck) {
-            this.listboxChecklist.emit([]);
-            this.cacheCheckedObjectList = [];
-            if (this.value != null) {
-              this.value = null;
-            }
-          }
-        }
-      }
-    }
-  }
-  componentDidRender() {
-    // this.isEmpty(true)
-    // this.isLoading(true)
-    // if(this.total > 0) {
-    //     this.isLoading(false)
-    //     this.isEmpty(false)
-    // }
-    // this.isEmpty(true)
-    if (this.isSetData) {
-      if (this.total > 0) {
-        this.isEmpty(false);
-        this.isLoading(false);
-      }
-      else {
-        this.isEmpty(true);
-      }
-    }
-  }
-  /**
-   * @desc
-   * @returns {void}
-   */
-  setIndeterminateState() {
-    let state = 'uncheck';
-    let allChecked = true;
-    let allUnchecked = true;
-    this.getAllGroup(this.el, true).map((item) => {
-      item.checked && (allUnchecked = false);
-      !item.checked && (allChecked = false);
-    });
-    !allChecked && !allUnchecked
-      ? state = 'indeterminate'
-      : allChecked
-        ? state = 'determinate'
-        : state = 'uncheck';
-    this.indeterminateState = state;
-    this.checked = state == 'determinate' ? true : false;
-    // this.listboxChecklist.emit(this.sortedChecklist)
-  }
-  getAllGroup(element = this.el, onlyItem = false) {
-    let returnAllItems = [];
-    let isGroup = utils.getChilds(element, 'bcm-listbox-group');
-    let isItem = utils.getChilds(element, 'bcm-listbox-item');
-    if (isGroup.length > 0) {
-      isGroup.forEach(group => {
-        if (this.isGroupArray.indexOf(Number(group.id)) === -1) {
-          this.isGroupArray.push(Number(group.id));
-        }
-        if (onlyItem == false) {
-          returnAllItems = [...returnAllItems,
-            group
-          ];
-        }
-        utils.getChilds(group, 'bcm-listbox-item').forEach(items => {
-          if (!(returnAllItems.indexOf(items) >= 0)) {
-            returnAllItems = [...returnAllItems,
-              items
-            ];
-          }
-        });
-      });
-    }
-    if (isItem.length > 0) {
-      isItem.forEach(items => {
-        if (!(returnAllItems.indexOf(items) >= 0)) {
-          returnAllItems = [...returnAllItems,
-            items
-          ];
-        }
-      });
-    }
-    return returnAllItems;
-  }
-  getAllChilds(element = this.el, type = null) {
-    let returnAllItems = [];
-    let oldItems = [];
-    if (!this._items || type === "slot") {
-      utils.getChilds(element, 'bcm-listbox-item').forEach(items => {
-        returnAllItems = [...returnAllItems,
-          items
-        ];
-      });
-    }
-    else if (this._items && this._items.length > 0) {
-      oldItems = JSON.parse(this._items);
-      oldItems.map((item) => (((item.type === 'group') ? (item.items.map((item) => ((returnAllItems = [...returnAllItems, item])))) :
-        (returnAllItems = [...returnAllItems, item]))));
-    }
-    return returnAllItems;
-  }
-  /**
-   * @desc
-   */
-  handleCheckList(process = 'add', checkId) {
-    checkId = String(checkId);
-    if (this.checkboxes) {
-      if (this.items && this.items.find(e => e[this.objectMapping['id']] == checkId)) {
-        // checkId = Number(checkId)
-        switch (process) {
-          case 'add':
-            if (this.checklist.length > 0) {
-              if (!this.checklist.includes(checkId)) {
-                this.checklist = [...this.checklist, checkId];
-              }
-            }
-            else {
-              this.checklist = [checkId];
-            }
-            break;
-          case 'remove':
-            this.checklist = this.checklist.filter(item => item !== checkId);
-            break;
-        }
-        let sorted = this.checklist.sort(function (a, b) { return a - b; });
-        this.sortedChecklist = this.checklist;
-        this.checklistSorted = sorted;
-        // forceUpdate(this.el)
-      }
-    }
-  }
-  handleIndeterminateClick() {
-    let state = 'uncheck';
-    let allChecked = true;
-    let allUnchecked = true;
-    let visibleItem = [];
-    this.getAllGroup(this.el, true).map((item) => {
-      if (item.hidden === false) {
-        visibleItem.push(item);
-        item.checked && (allUnchecked = false);
-        !item.checked && (allChecked = false);
-      }
-    });
-    !allChecked && !allUnchecked
-      ? state = 'indeterminate'
-      : allChecked
-        ? state = 'determinate'
-        : state = 'uncheck';
-    visibleItem.map((item) => {
-      if (state !== 'uncheck') {
-        item.checked = false;
-        this.handleCheckList('remove', String(item.id));
-      }
-      else {
-        item.checked = true;
-        this.handleCheckList('add', String(item.id));
-      }
-    });
-    this.setIndeterminateState();
-  }
-  handleCheckboxClick(e) {
-    e.preventDefault();
-  }
-  /**
-   * @desc
-   * @param item
-   */
-  itemRenderer(item) {
-    if (item[this.objectMapping['id']] && String(this.selectedId) == String(item[this.objectMapping['id']])) {
-      this.listboxItemSelected.emit(item);
-    }
-    // if(item[this.objectMapping['selected']] && item[this.objectMapping['selected']] === true){
-    //     this.listboxItemSelected.emit(item)
-    // }
-    // var checkedListCache = this.checkedList;
-    // if(checkedListCache && checkedListCache.find(e => e == item[this.objectMapping['id']])){
-    //     this.handleListboxChecked({detail: item[this.objectMapping['id']]})
-    // }
-    // const index = checkedListCache.indexOf(item[this.objectMapping['id']]);
-    // if (index > -1) {
-    //     checkedListCache.splice(index, 1);
-    // }
-    // if(this.updateCheckedList.length > 0 ){
-    //     if( this.updateCheckedList.find(e => e == item[this.objectMapping['id']]) ){
-    //         const index = this.updateCheckedList.indexOf(item[this.objectMapping['id']]);
-    //         if (index > -1) {
-    //             this.updateCheckedList.splice(index, 1);
-    //         }
-    //         this.listboxChecked.emit(item[this.objectMapping['id']])
-    //     }
-    // }
-    return (index.h("bcm-listbox-item", Object.assign({ _internal_id: this._internal_id, id: String(item[this.objectMapping['id']]), text: item[this.objectMapping['text']] }, (item[this.objectMapping['icon']] && { icon: item[this.objectMapping['icon']] }), (item[this.objectMapping['avatar']] && { avatar: item[this.objectMapping['avatar']] }), (item[this.objectMapping['avatarName']] && { avatarName: item[this.objectMapping['avatarName']] }), (item[this.objectMapping['avatarImage']] && { avatarImage: item[this.objectMapping['avatarImage']] }), (item[this.objectMapping['secondaryText']] && { secondaryText: item[this.objectMapping['secondaryText']] }), (item[this.objectMapping['tooltipText']] && { tooltipText: item[this.objectMapping['tooltipText']] }), (Boolean(item[this.objectMapping['checked']]) === Boolean(true) && { checked: Boolean(item[this.objectMapping['checked']]) }), (item[this.objectMapping['disabled']] === true && { disabled: true }), (Boolean(item[this.objectMapping['selected']]) === Boolean(true) && this.checkboxes == false && { selected: Boolean(item[this.objectMapping['selected']]) }), (this.template && { template: this.template }), (this.checkboxes && { checkboxes: true }), (this.size && { size: this.size }), { itemObject: item, objectMapping: this.objectMapping })));
-  }
-  /**
-   * @desc
-   * @param group
-   */
-  recursiveGroupRenderer(group) {
-    return (index.h("bcm-listbox-group", { id: group[this.objectMapping['id']], text: group[this.objectMapping['text']] }, group.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item))))));
-  }
-  async searchResultMethod(items = []) {
-    if (this.treeview == true) {
-      const bcmtreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-      // await bcmListbox.config(this._config)   
-      if (bcmtreeview) {
-        bcmtreeview.searchResultMethod({ detail: (items.length > 0 ? items : true) });
-      }
-    }
-    else {
-      this.listenSearchResult({ detail: (items.length > 0 ? items : true), isEvent: true });
-    }
-    // return true
-  }
-  handleListboxSelected(event) {
-    this.listboxItemSelected.emit(event.detail);
-  }
-  /**
-   * @desc
-   */
-  // @Listen('bcm-treeview-checklist')
-  // handleListboxCheckedList(e) {
-  //    this.listboxChecklist.emit(e.detail)
-  // }
-  isLoading(val) {
-    var listContainer = this.el.shadowRoot.getElementById("bcm-listbox-list");
-    var loading = this.el.shadowRoot.getElementById("loading");
-    var searchInput = this.el.shadowRoot.querySelector("bcm-old-search");
-    // var listcontainer = this.el.shadowRoot.getElementById("list-container")
-    if (val) {
-      if (searchInput) {
-        searchInput.disabled = true;
-      }
-      listContainer && listContainer.classList.add('loading');
-      loading && loading.classList.add('show');
-      // listcontainer && listcontainer.classList.add('hidden')
-    }
-    else {
-      if (searchInput) {
-        searchInput.disabled = false;
-      }
-      listContainer && listContainer.classList.remove('loading');
-      loading && loading.classList.remove('show');
-      // listcontainer && listcontainer.classList.remove('hidden')
-    }
-  }
-  isEmpty(val) {
-    var empty = this.el.shadowRoot.getElementById("empty");
-    var listcontainer = this.el.shadowRoot.getElementById("list-container");
-    var checkall = this.el.shadowRoot.getElementById("checkall");
-    if (val) {
-      empty && empty.classList.add('show');
-      listcontainer && listcontainer.classList.add('hidden');
-      checkall && checkall.classList.add('hidden');
-    }
-    else {
-      empty && empty.classList.remove('show');
-      listcontainer && listcontainer.classList.remove('hidden');
-      checkall && checkall.classList.remove('hidden');
-    }
-  }
-  isSearchCount(val = false) {
-    if (this.infoFooter) {
-      var inSearch = this.el.shadowRoot.getElementById("in-search");
-      var inTotal = this.el.shadowRoot.getElementById("in-total");
-      if (val !== false && val >= 0 && val != null && inSearch && inTotal) {
-        inSearch.innerHTML = val;
-        inTotal.style.display = "none";
-      }
-      else {
-        inTotal.style.display = "inline";
-        inSearch.innerHTML = "";
-      }
-    }
-  }
-  listenSearchResult(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (event.isEvent == undefined) {
-      if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
-        var searchValue = '';
-        if (this.treeview == false) {
-          // var checkall = null
-          // this.checkboxes && (checkall = this.el.shadowRoot.getElementById("checkall"))
-          var totalSearch = event.detail.length;
-          // this.empty = false
-          this.isEmpty(false);
-          this.intersection = [];
-          if (event.detail.length > 0) {
-            if (event.detail[0] == -1) {
-              totalSearch = 0;
-              this.empty = true;
-              this.isEmpty(true);
-            }
-            if (this.allChilds.length > 0) {
-              // this.checkboxes && ( checkall && checkall.classList.add('hidden') )
-              this.allChilds.map((item) => {
-                if (this.highlight) {
-                  event.target.addEventListener('bcm-on-search-value', async (e) => {
-                    var inputText = item.shadowRoot.getElementById("text");
-                    if (inputText) {
-                      searchValue = await e.detail;
-                      inputText = (inputText === null || inputText === void 0 ? void 0 : inputText.textContent) || (inputText === null || inputText === void 0 ? void 0 : inputText.innerText) || "";
-                      if (searchValue) {
-                        var cacheInputText = lowercase$2(inputText);
-                        var cacheSearchValue = lowercase$2(searchValue);
-                        var index = cacheInputText.indexOf(cacheSearchValue);
-                        if (index >= 0) {
-                          inputText = inputText.substring(0, index) + "<span class='highlight'>" + inputText.substring(index, index + searchValue.length) + "</span>" + inputText.substring(index + searchValue.length);
-                        }
-                      }
-                      item.shadowRoot.getElementById("text").innerHTML = inputText;
-                    }
-                  });
-                }
-                item.hidden = true;
-                var _ids = String(item.id);
-                if (event.detail.indexOf(_ids) >= 0) {
-                  item.hidden = false;
-                }
-                else {
-                  item.hidden = true;
-                }
-              });
-            }
-            this.intersection = event.detail[0] == -1 ? [0] : event.detail.filter(x => this.isGroupArray.includes(x));
-          }
-          else {
-            if (this.allChilds.length > 0) {
-              this.allChilds.map((item) => {
-                item.hidden = false;
-              });
-              // this.checkboxes && ( checkall && checkall.classList.remove('hidden') )
-            }
-            // this.isEmpty(true)
-          }
-          if (this.search || this.checkboxes) {
-            setTimeout(() => {
-              if (totalSearch >= 0) {
-                var totals = totalSearch;
-                this.isSearchCount(totals);
-              }
-              else {
-                this.isSearchCount(0);
-              }
-              if (event.detail[0] === -1) {
-                this.isSearchCount(0);
-              }
-              if (event.detail === true) {
-                this.isSearchCount();
-              }
-            }, 100);
-          }
-          if (event.detail === true) {
-            this.isEmpty(false);
-          }
-          if (this.runClearAndSelect) {
-            this.runClearAndSelect = false;
-            this.isSearchCount(true);
-          }
-        }
-      }
-    }
-  }
-  /**
-   * @desc
-   * @param newValue
-   * @returns {void}
-   */
-  parseItems(newValue) {
-    if (newValue) {
-      typeof newValue == 'string'
-        ? this.items = JSON.parse(newValue)
-        : this.items = newValue;
-    }
-    this.handleChildProcess();
-  }
-  handleChange(newValue) {
-    this.change.emit(newValue);
-    this.listboxChange.emit(newValue);
-  }
-  handleChildProcess() {
-    setTimeout(() => {
-      this.onlyChilds = this.getAllGroup(this.el, true);
-      this.total = this.onlyChilds.length;
-      // console.log(this.total)
-      // this.allChilds = this.getAllChilds()
-      // this.total = this.allChilds.filter((v, i, a) => a.indexOf(v) === i).length
-      if (this.total > 0) {
-        // setTimeout(() => {
-        this.isLoading(false);
-        // }, 100);
-        this.isEmpty(false);
-      }
-      else {
-        // setTimeout(() => {
-        this.isLoading(false);
-        this.isEmpty(true);
-        // }, 100);
-      }
-    }, 100);
-  }
-  /**
-   * @desc
-   */
-  handleListboxClearSelected(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (this.checkboxes == false && path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
-      this.value = event.detail;
-      this.selectedId = String(event.detail[this.objectMapping['id']]);
-      this.listboxClearSelected.emit(event.detail);
-    }
-  }
-  /**
-   * @desc
-   */
-  handleListboxChecked(event, _internal_id = this._internal_id) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if ((path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) || _internal_id == this._internal_id) {
-      this.listboxSendCheck.emit(event.detail);
-      this.handleCheckList('add', event.detail);
-      this.setIndeterminateState();
-    }
-  }
-  /**
-   * @desc
-   */
-  handleListboxUnchecked(event, _internal_id = this._internal_id) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if ((path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) || _internal_id == this._internal_id) {
-      this.listboxSendUncheck.emit(event.detail);
-      this.handleCheckList('remove', event.detail);
-      this.setIndeterminateState();
-    }
-  }
-  async listboxUncheckedMethod(item, internal_id = this._internal_id) {
-    if (this.treeview) {
-      await customElements.whenDefined("bcm-treeview");
-      const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
-      if (bcmTreeview) {
-        await bcmTreeview.treeviewUncheckedMethod(item);
-      }
-    }
-    else {
-      this.handleListboxUnchecked({ "detail": item }, internal_id);
-    }
-  }
-  handleFocus(focusEvent = false) {
-    this.onFocus = focusEvent;
-  }
-  render() {
-    const { innerComponent, label, required, treeview, searchText, checkboxes, search, size, fullWidth, total, indeterminateState, checked, checklist, searchData, searchFields, _flex, returnField, searchSub, infoFooter, showSearch, noCaption, caption, captionError, captionType } = this;
-    const bcmListbox = index$1.classnames('bcm-listbox', {
-      'error': captionType == 'error' ? true : false,
-      'full-width': fullWidth,
-      'flex': _flex
-    });
-    const classes = index$1.classnames('listbox-item', {
-      'hidden': this.totalSearch > 0
-    });
-    const classesContainer = index$1.classnames('listbox-item-container');
-    const textContent = index$1.classnames('listbox-item-container-text-content', size, {
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-    });
-    const listContainer = index$1.classnames('list-container', {
-      'column-1': this.numberOfColumns <= 1,
-      'column-2': this.numberOfColumns == 2,
-      'column-3': this.numberOfColumns >= 3,
-    });
-    const listContainerStyle = {
-      'grid-template-columns': this.numberOfColumns <= 1 ? '1fr' : 'repeat(' + this.numberOfColumns + ', ' + (210 - (this.numberOfColumns * 10)) + 'px)'
-    };
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, 
-    // this.totalSearch > 0 ? 'hidden' : null,
-    {
-      'flex': _flex,
-      'full-width': fullWidth
-    });
-    var customStyles = {
-      'max-height': this.maxHeight
-    };
-    const customStylesList = {
-      'min-height': this.height ? "inherit" : this.maxHeight ? "auto" : "200px"
-    };
-    if (this.height) {
-      customStyles = Object.assign(Object.assign({}, customStyles), { 'height': this.height });
-    }
-    const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
-    return (index.h(index.Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), treeview === true && (index.h("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (index.h("div", { class: bcmListbox, style: customStyles }, search && (index.h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, index.h("bcm-old-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), index.h("bcm-divider", null))), index.h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (index.h("div", { class: classes, id: "checkall" }, index.h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, index.h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (index.h("span", { class: "indeterminate" })) || (index.h("bcm-checkbox-lite", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, "no-caption": true }))), index.h("div", { class: textContent }, "Select All")), index.h("div", { class: "divider" }, index.h("bcm-divider", null)))), 
-    // this.empty == false && (
-    index.h("div", { id: "list-container", class: listContainer, style: listContainerStyle }, this.items.length !== 0 && this.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item)))))
-    // )
-    , 
-    // this.loading && (
-    index.h("div", { id: "loading", class: "loading show" }, index.h("bcm-icon", { class: "prefix", icon: "far fa-spinner-third fa-spin" }))
-    // )
-    , 
-    // ( this.empty || total == 0 ) && (
-    index.h("div", { id: "empty", class: "empty" }, index.h("bcm-empty", null, "No Data"))
-    // )
-    ), infoFooter == true && (index.h("div", { class: "bcm-listbox-footer" }, index.h("bcm-text", { scale: "size-1", color: "grey-8" }, checklist.length > 0 && (' ( ' + checklist.length + ' selected ) '), "Total ", index.h("span", { id: "in-search" }), " ", index.h("span", { id: "in-total" }, total), " items found."))))), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
-      ? index.h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && index.h("span", { class: captionClasses }, " ", caption, " ")))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "_items": ["parseItems"],
-    "value": ["handleChange"]
-  }; }
-};
-BcmListbox.style = listboxCss;
-
-const listboxGroupCss = "@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:block}:host(.hidden){display:none}.listbox-group-title{padding:4px 16px;background-color:var(--bcm-color-grey-7);position:sticky;top:0;z-index:1}";
-
-const uppercase = (str) => str.toUpperCase();
-const BcmListboxGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.text = undefined;
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.hidden = false;
-  }
-  componentWillLoad() {
-    this.text = uppercase(this.text);
-  }
-  render() {
-    const { text } = this;
-    const classes = index$1.classnames('listbox-group');
-    const classesTitle = index$1.classnames('listbox-group-title');
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("div", { class: classesTitle }, index.h("bcm-text", { "font-size": "3", color: "slate-100" }, " ", text, " ")), index.h("slot", null))));
-  }
-};
-BcmListboxGroup.style = listboxGroupCss;
-
-const listboxItemCss = "@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:flex;flex:1}:host(.hidden){display:none}.listbox-item{display:flex;flex:1;align-items:stretch;justify-content:flex-start;color:var(--bcm-color-grey-8);user-select:none;background-color:var(--bcm-color-grey-1);display:none}.listbox-item.display{display:flex}.listbox-item-container{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding-left:8px;flex:1}.listbox-item-container .avatar{margin-right:4px}.listbox-item-container .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:4px}.listbox-item-container .check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.listbox-item-container .check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.listbox-item-container .check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.listbox-item-container .check-content .indeterminate:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.listbox-item-container-html-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;cursor:pointer;flex:1}.listbox-item-container-html-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.listbox-item-container-html-content.small{padding:0 8px 0 4px;padding:4px 8px 4px 4px}.listbox-item-container-html-content.medium{padding:8px 8px 8px 4px}.listbox-item-container-html-content.large{padding:8px 8px 8px 4px}.listbox-item-container-text-content{display:flex;align-items:center;justify-content:space-between;flex-direction:row;cursor:pointer;width:100%}.listbox-item-container-text-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.listbox-item-container-text-content.small{padding:0 8px 0 4px;padding:4px 8px 4px 4px}.listbox-item-container-text-content.medium{padding:8px 8px 8px 4px}.listbox-item-container-text-content.large{padding:8px 8px 8px 4px}.listbox-item-container-text-content .icon{text-align:center;margin-right:8px}.listbox-item-container-text-content>div{display:flex;align-items:center;flex-direction:row;word-wrap:break-word}.listbox-item-container.disabled{color:var(--bcm-color-grey-6)}.listbox-item-container.selected{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container:hover:not(.disabled),.listbox-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}";
-
-const BcmListboxItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.listboxItemSelected = index.createEvent(this, "bcm-listbox-item-selected", 7);
-    this.listboxUnchecked = index.createEvent(this, "bcm-listbox-unchecked", 7);
-    this.listboxChecked = index.createEvent(this, "bcm-listbox-checked", 7);
-    this.objectMapping = {
-      'id': "id",
-      'text': "text",
-      'icon': "icon",
-      'avatar': "avatar",
-      'avatarName': "avatarName",
-      'avatarImage': "avatarImage",
-      'secondaryText': "secondaryText",
-      'tooltipText': "tooltipText",
-      'selected': "selected",
-      'checked': "checked",
-      'disabled': "disabled",
-    };
-    this.display = true;
-    this.avatar = false;
-    this.avatarImage = undefined;
-    this.avatarName = undefined;
-    this.secondaryText = undefined;
-    this.tooltipText = undefined;
-    this.text = undefined;
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.size = 'medium';
-    this.icon = 'bug';
-    this.open = false;
-    this.selected = false;
-    this.checkboxes = false;
-    this.showIcon = false;
-    this.checked = false;
-    this.focused = false;
-    this.hidden = false;
-    this.itemObject = undefined;
-    this.disabled = false;
-    this.highlight = undefined;
-    this._internal_id = "";
-    this.template = null;
-  }
-  componentDidLoad() {
-    if (!this.disabled) {
-      if (this.selected === true) {
-        this.listboxItemSelected.emit(this.itemObject);
-      }
-      this.checkboxes === true && (this.checked === true && (this.listboxChecked.emit(this._id)));
-    }
-  }
-  /**
-   * @desc
-   */
-  handleClick() {
-    if (!this.disabled) {
-      this.checkboxes === true && (this.checked === true && (this.listboxUnchecked.emit(this._id)) || (this.listboxChecked.emit(this._id)));
-      this.checkboxes === false && (this.selected = true,
-        this.listboxItemSelected.emit(this.itemObject));
-    }
-  }
-  handleCheckboxClick(e) {
-    e.preventDefault();
-  }
-  isInternal(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    const detect = path
-      && path[0]
-      && path[0].attributes
-      && path[0].attributes['bcm-internal-id']
-      && path[0].attributes['bcm-internal-id'].value;
-    return detect == this._internal_id;
-  }
-  /**
-   * @descc
-   * @param event
-   */
-  ListenListboxCheck(event) {
-    if (this.isInternal(event)) {
-      if (!this.disabled) {
-        if (event.detail && event.detail === this._id) {
-          this.checked = true;
-        }
-      }
-    }
-  }
-  /**
-   * @descc
-   * @param event
-   */
-  ListenListboxUncheck(event) {
-    if (this.isInternal(event)) {
-      if (!this.disabled) {
-        if (event.detail && event.detail === this._id) {
-          this.checked = false;
-        }
-      }
-    }
-  }
-  /**
-   * @descc
-   * @param event
-   */
-  handleListboxClearSelecteds(event) {
-    if (this.checkboxes == false && this.isInternal(event)) {
-      if (!this.disabled) {
-        if (event.detail) {
-          if (event.detail !== this.itemObject) {
-            this.selected = false;
-          }
-          else {
-            this.selected = true;
-          }
-        }
-      }
-    }
-  }
-  templateParser(template) {
-    var rxp = /{{([^}]+)}}/g, str = template, curMatch;
-    while (curMatch = rxp.exec(str)) {
-      template = template.replace("{{" + curMatch[1] + "}}", this.itemObject[curMatch[1]]);
-    }
-    return template;
-  }
-  render() {
-    const { display, focused, selected, size, showIcon, icon, checkboxes, _id, checked, text, avatarName, avatarImage, avatar, secondaryText, tooltipText } = this;
-    const classes = index$1.classnames('listbox-item', {
-      'disabled': this.disabled,
-      'display': display
-    });
-    const classesContainer = index$1.classnames('listbox-item-container', {
-      'disabled': this.disabled,
-      'focus': focused,
-      'selected': selected
-    });
-    const textContent = index$1.classnames('listbox-item-container-text-content', size, {
-      'disabled': this.disabled,
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-    });
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    const htmlContent = index$1.classnames('listbox-item-container-html-content', size, {
-      'disabled': this.disabled,
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-    });
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("div", { class: classesContainer, onClick: () => this.handleClick() }, checkboxes && (index.h("div", { class: "check-content" }, index.h("bcm-checkbox-lite", { id: 'check-' + _id, onClick: (e) => this.handleCheckboxClick(e), checked: checked, disabled: this.disabled }))), this.template && (index.h("div", { class: htmlContent, title: tooltipText, innerHTML: this.templateParser(this.template) })), this.template == null && (index.h("div", { class: textContent, title: tooltipText }, index.h("div", null, (avatar || avatarName || avatarImage) && (index.h("div", { class: "avatar" }, index.h("bcm-avatar", Object.assign({ size: "small", name: text }, avatarName && { name: avatarName }, avatarImage && { image: avatarImage })))), showIcon && icon && (index.h("bcm-icon", { class: "icon", icon: icon })), text && (index.h("span", { id: "text" }, text)) || (index.h("slot", null))), index.h("div", null, (secondaryText) && (index.h("div", { class: "secondaryText size-1" }, secondaryText)))))))));
-  }
-  get el() { return index.getElement(this); }
-};
-BcmListboxItem.style = listboxItemCss;
-
-const oldSearchCss = "@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:block}:host(.hidden){display:none}";
-
-const lowercase$1 = (str) => str.toLowerCase();
-const BcmOldSearch = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.bcmOnSearch = index.createEvent(this, "bcm-on-search", 7);
-    this.bcmOnSearchValue = index.createEvent(this, "bcm-on-search-value", 7);
-    this.data = [];
-    this.searchFields = ['text', 'value' /*, ...*/];
-    this.returnField = 'idx';
-    this.searchSub = null;
-    this.hidden = false;
-    this.onlyChild = false;
-    this.clearable = false;
-    this.searchValue = '';
-    this.searchPlaceholder = 'Search';
-    this.disabled = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.results = [];
-  }
-  getInput() {
-    return this.el.shadowRoot.querySelector('bcm-old-input');
-  }
-  componentDidLoad() {
-    this.getInput().clearable = this.clearable;
-  }
-  listenBcmChange(e) {
-    e.stopPropagation();
-  }
-  async setValue(value) {
-    await this.getInput().setValue(value);
-    return value;
-  }
-  async select() {
-    await this.getInput().select();
-    this.bcmOnSearch.emit(true);
-    return true;
-  }
-  async setClear() {
-    await this.getInput().setClear();
-    this.bcmOnSearch.emit(true);
-    return true;
-  }
-  async searchArray(value, idFields = null) {
-    // console.log(this.data)
-    let cacheSearchFields = this.searchFields;
-    let arrayResult = [];
-    if (idFields) {
-      this.searchFields = [idFields];
-    }
-    value.forEach(item => {
-      // item = {[idFields]:item}
-      this.results = [];
-      // console.log(this.data)
-      this.nestedSearch(this.data, item, true);
-      arrayResult.push(...this.results);
-    });
-    this.searchFields = cacheSearchFields;
-    return arrayResult;
-    // await this.getInput().setValue( value )
-    // return value
-  }
-  nestedSearch(items, value, equal = false) {
-    var result;
-    items && (items.map((item) => {
-      this.searchFields.map(searchField => {
-        if (searchField in item) {
-          // debugger;
-          item[searchField] = lowercase$1(String(item[searchField]));
-          if (this.onlyChild) {
-            if (item[this.searchSub]) {
-              var temp = this.nestedSearch(item[this.searchSub], value, equal);
-              if (temp) {
-                this.results.push((result = String(item[this.returnField])));
-                this.results.push(temp);
-              }
-            }
-            else {
-              if (equal) {
-                // console.log(value)
-                if (item[searchField] == lowercase$1(String(value))) {
-                  // if (item == lowercase(value)) {
-                  this.results.push((result = String(item[this.returnField])));
-                  // this.results.push (result = String(item))
-                }
-              }
-              else {
-                if (item[searchField].indexOf(lowercase$1(value)) !== -1) {
-                  this.results.push((result = String(item[this.returnField])));
-                }
-              }
-            }
-          }
-          else {
-            if (item[this.searchSub]) {
-              var temp = this.nestedSearch(item[this.searchSub], value, equal);
-              if (temp) {
-                this.results.push((result = String(item[this.returnField])));
-                this.results.push(temp);
-              }
-            }
-            if (equal) {
-              // console.log(value)
-              if (item[searchField] == lowercase$1(String(value))) {
-                // if (item == lowercase(value)) {
-                this.results.push((result = String(item[this.returnField])));
-                // this.results.push (result = String(item))
-              }
-            }
-            else {
-              if (item[searchField].indexOf(lowercase$1(value)) !== -1) {
-                this.results.push((result = String(item[this.returnField])));
-              }
-            }
-          }
-        }
-      });
-    }));
-    return result;
-  }
-  /**
-   * @desc
-   * @param value
-   */
-  inputChange(value) {
-    this.results = [];
-    // data prop'unda arama yapılacak (searchFields prop'u içerisindeki alanlar ile)
-    // arama sonucunda eşleyen itemların 'idx', index
-    // değerleri, array şeklinde root component'e
-    // event ile gönderilecek
-    // Örneğin value == 'to' olduğunda aşağıdaki
-    // sonuçlar filtrelenmeli
-    // -->
-    //{ text: 'Mateusz Eaton', idx: 2 },
-    //{ text: 'Tony Vickers', idx: 3 },
-    // result array'i eşleşen itemların
-    // index numaralarını tutacak
-    // results = [2, 3]
-    // Örnek arama
-    // #
-    this.nestedSearch(this.data, value);
-    this.results = Array.from(new Set(this.results));
-    (value && ((this.results.length > 0 && this.bcmOnSearch.emit(this.results)) || this.bcmOnSearch.emit([-1]))) || this.bcmOnSearch.emit(true);
-    this.bcmOnSearchValue.emit(value);
-  }
-  render() {
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses }, index.h("bcm-old-input", { placeholder: this.searchPlaceholder, "no-caption": true, "no-margin": true, "full-width": true, disabled: this.disabled, type: "search", "on-bcm-change": e => this.inputChange(e.detail), value: this.searchValue })));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "searchValue": ["inputChange"]
-  }; }
-};
-BcmOldSearch.style = oldSearchCss;
-
-const treeviewCss = "@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:flex;flex-direction:column;height:100%;max-height:100%;border:1px solid var(--bcm-color-grey-5);box-sizing:border-box;background-color:#ffffff}:host(.empty) .treeview{display:flex;align-items:center;justify-content:center}.search{padding:8px;padding-bottom:0;margin-bottom:4px}.treeview{height:100%;max-height:100%;overflow:auto;background-color:var(--bcm-color-grey-1);padding:0 8px 8px 0}.treeview.loading{min-height:150px;position:relative;margin:0 8px 8px 8px}.treeview .loading{display:none;align-items:center;justify-content:center;height:100%;width:100%;position:absolute;background-color:rgba(255, 255, 255, 0.03)}.treeview .loading.show{display:flex}.treeview .empty{display:none;align-items:center;justify-content:center;height:100%}.treeview .empty bcm-empty{width:fit-content;margin:auto}.treeview .empty.show{display:flex}footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3);user-select:none}";
-
-/**
- * @desc
- * @param str
- */
-const lowercase = (str) => str.toLowerCase();
-const Bcmtreeview = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.treeviewChange = index.createEvent(this, "bcm-treeview-change", 7);
-    this.treeviewSendCheck = index.createEvent(this, "bcm-treeview-send-check", 7);
-    this.treeviewSendUncheck = index.createEvent(this, "bcm-treeview-send-uncheck", 7);
-    this.treeviewChecklist = index.createEvent(this, "bcm-treeview-checklist", 7);
-    this.treeviewItemSelected = index.createEvent(this, "bcm-treeview-item-selected", 7);
-    this.treeviewClearSelecteds = index.createEvent(this, "bcm-treeview-clear-selecteds", 7);
-    this.treeviewShowContext = index.createEvent(this, "bcm-treeview-show-context", 7);
-    this.treeviewUnchecked = index.createEvent(this, "bcm-treeview-unchecked", 7);
-    this.treeviewChecked = index.createEvent(this, "bcm-treeview-checked", 7);
-    this.objectMapping = {
-      'text': 'text',
-      'icon': 'icon',
-      'id': 'id',
-      'items': 'items',
-      'open': 'open',
-      'selected': 'selected',
-      'checked': 'checked',
-      'tooltipText': 'tooltipText',
-      'disabled': "disabled",
-      'favorite': "favorite",
-    };
-    this.checkedObjectList = [];
-    this.allChilds = [];
-    this.onFocus = false;
-    this.minHeight = 200;
-    this.minWidth = 200;
-    this.allOpenCache = false;
-    this.allOpenOnSearch = false;
-    this.parentLength = [{}];
-    this.isSetData = false;
-    this.runClearAndSelect = false;
-    /**
-     * Component States
-     */
-    this.empty = false;
-    this.checkboxes = false;
-    this.showIcon = false;
-    this.size = 'medium';
-    this.selectedId = undefined;
-    this.checkedList = [];
-    this.updateCheckedList = [];
-    this.hidden = false;
-    this.search = false;
-    this.searchOnlyChild = false;
-    this.keydown = false;
-    this.allOpen = false;
-    this.fullWidth = false;
-    this.infoFooter = false;
-    this.searchFields = ['text', 'secondaryText', 'tooltipText'];
-    this.searchSub = "items";
-    this.returnField = "id";
-    this._items = [];
-    this.searchPlaceholder = "Search";
-    this.maxHeight = null;
-    this.highlight = false;
-    this.loading = true;
-    this.favIcon = false;
-    this.favIconOnlyChilds = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.showSearch = true;
-    this.items = [];
-    this.total = 0;
-    this.checkCount = 0;
-    this.focusedElement = undefined;
-    this.keyMapForFocus = { 18: false, 87: false };
-    this.checklist = [];
-    this.favoriteList = [];
-    this.checklistSorted = [];
-    this.searchData = undefined;
-    this.searchResults = [];
-  }
-  async setData(_data = []) {
-    this.clearAndSelectSearch(false);
-    this.isLoading(true);
-    this.isSetData = true;
-    this.checkedObjectList = [];
-    this.selectedId = null;
-    setTimeout(() => {
-      this._items = _data;
-      this.searchData = JSON.parse(_data);
-      this.calculateMinSizes();
-      this.handleChildProcess();
-    }, 100);
-    return Promise.resolve(true);
-  }
-  async getChecklist() {
-    return this.checkedObjectList;
-  }
-  async getFavorites() {
-    this.getChildItem(this.el).forEach(element => {
-      element[this.objectMapping['favorite']] == true && (this.favIconOnlyChilds && element[this.objectMapping['items']].length == 0 && (this.favoriteList.indexOf(element.itemObject) < 0 && (this.favoriteList.push(element.itemObject))),
-        !this.favIconOnlyChilds && (this.favoriteList.indexOf(element.itemObject) < 0 && (this.favoriteList.push(element.itemObject))));
-    });
-    return this.favoriteList;
-  }
-  async selected(id) {
-    this.selectedId = id;
-  }
-  async clearAndSelectSearch(select = true) {
-    this.runClearAndSelect = true;
-    if (this.search === true) {
-      setTimeout(() => {
-        var searchInput = null;
-        searchInput = this.el.shadowRoot.querySelector("bcm-old-search");
-        if (searchInput) {
-          searchInput.setClear();
-          if (select == true) {
-            searchInput.select();
-          }
-        }
-      }, 100);
-    }
-  }
-  async addChecked(items = []) {
-    this.checkedList = items;
-  }
-  async updateChecked(items = []) {
-    this.updateCheckedList = items;
-  }
-  async config(_config) {
-    if (_config['maxHeight']) {
-      typeof _config['maxHeight'] == 'string'
-        ? this.maxHeight = _config['maxHeight']
-        : this.maxHeight = "100%";
-    }
-    if (_config['searchFields']) {
-      if (Array.isArray(_config['searchFields'])) {
-        this.searchFields = _config['searchFields'];
-      }
-    }
-    if (_config['searchable']) {
-      typeof _config['searchable'] == 'boolean'
-        ? this.search = _config['searchable']
-        : this.search = false;
-    }
-    if (_config['searchOnlyChild']) {
-      typeof _config['searchOnlyChild'] == 'boolean'
-        ? this.searchOnlyChild = _config['searchOnlyChild']
-        : this.searchOnlyChild = false;
-    }
-    if (_config['searchPlaceholder']) {
-      typeof _config['searchPlaceholder'] == 'string'
-        ? this.searchPlaceholder = _config['searchPlaceholder']
-        : this.searchPlaceholder = null;
-    }
-    if (_config['fullWidth']) {
-      typeof _config['fullWidth'] == 'boolean'
-        ? this.fullWidth = _config['fullWidth']
-        : this.fullWidth = false;
-    }
-    if (_config['infoFooter']) {
-      typeof _config['infoFooter'] == 'boolean'
-        ? this.infoFooter = _config['infoFooter']
-        : this.infoFooter = false;
-    }
-    if (_config['highlight']) {
-      typeof _config['highlight'] == 'boolean'
-        ? this.highlight = _config['highlight']
-        : this.highlight = false;
-    }
-    if (_config['checkable']) {
-      typeof _config['checkable'] == 'boolean'
-        ? this.checkboxes = _config['checkable']
-        : this.checkboxes = false;
-    }
-    if (_config['showIcon']) {
-      typeof _config['showIcon'] == 'boolean'
-        ? this.showIcon = _config['showIcon']
-        : this.showIcon = false;
-    }
-    if (_config['favIcon']) {
-      typeof _config['favIcon'] == 'boolean'
-        ? this.favIcon = _config['favIcon']
-        : this.favIcon = false;
-    }
-    if (_config['favIconOnlyChilds']) {
-      typeof _config['favIconOnlyChilds'] == 'boolean'
-        ? this.favIconOnlyChilds = _config['favIconOnlyChilds']
-        : this.favIconOnlyChilds = false;
-    }
-    if (_config['allOpen']) {
-      typeof _config['allOpen'] == 'boolean'
-        ? this.allOpen = _config['allOpen']
-        : this.allOpen = false;
-    }
-    this.allOpenCache = this.allOpen;
-    if (_config['size']) {
-      (["small", "medium", "large"].indexOf(_config['size']) >= 0)
-        ? this.size = _config['size']
-        : this.size = 'medium';
-    }
-    if (_config['mapping']) {
-      if (_config['mapping']['text']) {
-        this.objectMapping['text'] = _config['mapping']['text'];
-      }
-      if (_config['mapping']['icon']) {
-        this.objectMapping['icon'] = _config['mapping']['icon'];
-      }
-      if (_config['mapping']['id']) {
-        this.objectMapping['id'] = _config['mapping']['id'];
-        this.returnField = this.objectMapping['id'];
-      }
-      if (_config['mapping']['items']) {
-        this.objectMapping['items'] = _config['mapping']['items'];
-        this.searchSub = this.objectMapping['items'];
-      }
-      if (_config['mapping']['open']) {
-        this.objectMapping['open'] = _config['mapping']['open'];
-      }
-      if (_config['mapping']['selected']) {
-        this.objectMapping['selected'] = _config['mapping']['selected'];
-      }
-      if (_config['mapping']['checked']) {
-        this.objectMapping['checked'] = _config['mapping']['checked'];
-      }
-      if (_config['mapping']['tooltipText']) {
-        this.objectMapping['tooltipText'] = _config['mapping']['tooltipText'];
-      }
-      if (_config['mapping']['disabled']) {
-        this.objectMapping['disabled'] = _config['mapping']['disabled'];
-      }
-      if (_config['mapping']['favorite']) {
-        this.objectMapping['favorite'] = _config['mapping']['favorite'];
-      }
-    }
-    // sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
-    return Promise.resolve(true);
-  }
-  calculateMinSizes() {
-    if (this.minHeight < this.el.clientHeight) {
-      this.minHeight = this.el.clientHeight;
-    }
-  }
-  connectedCallback() { }
-  componentWillLoad() { }
-  componentWillRender() {
-    if (sessionStorage.getItem(this._internal_id + "-config")) {
-      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
-    }
-  }
-  componentDidRender() {
-    // this.isEmpty(true)
-    // if(this.total > 0) {
-    //     this.isEmpty(false)
-    // }
-  }
-  // componentDidLoad(){
-  //     this.handleChildProcess()
-  //     setTimeout(() => {
-  //         if(this.isSetData) {
-  //             this.isLoading(true)
-  //             this.isEmpty(false)
-  //         }else{
-  //             this.isLoading(false)
-  //             this.isEmpty(true)
-  //         }
-  //     }, 1000);
-  //     // this.isEmpty(true)
-  // }
-  componentWillUpdate() { }
-  // componentWillRender(){}
-  // componentDidRender(){}
-  componentDidUpdate() {
-    if (this.checkboxes === true) {
-      this.checkedObjectList = [];
-      if (this.checklistSorted.length > 0) {
-        this.getChildItem(this.el).forEach(element => {
-          element.checked == true && (this.checkedObjectList.indexOf(element.itemObject) < 0 && (this.checkedObjectList.push(element.itemObject)));
-        });
-        this.treeviewChecklist.emit(this.checkedObjectList);
-      }
-      else {
-        this.treeviewChecklist.emit([]);
-      }
-    }
-  }
-  parseItems(newValue) {
-    if (newValue) {
-      typeof newValue == 'string'
-        ? this.items = JSON.parse(newValue)
-        : this.items = newValue;
-    }
-    this.handleChildProcess();
-  }
-  handleChildProcess() {
-    setTimeout(() => {
-      this.allChilds = this.getAllChilds();
-      this.total = this.allChilds.filter((v, i, a) => a.indexOf(v) === i).length;
-      if (this.total > 0) {
-        // setTimeout(() => {
-        this.isLoading(false);
-        // }, 100);
-        this.isEmpty(false);
-      }
-      else {
-        // setTimeout(() => {
-        this.isLoading(false);
-        this.isEmpty(true);
-        // }, 100);
-      }
-    }, 100);
-  }
-  /**
-   * @desc
-   * @param group
-   */
-  recursiveItemRenderer(group, parentGroup) {
-    const sId = String(this.selectedId);
-    const gId = String(group[this.objectMapping['id']]);
-    const isSelected = String(group[this.objectMapping['selected']]) === 'true' ? true : false;
-    if (sId === gId || isSelected) {
-      this.treeviewItemSelected.emit(group);
-    }
-    return (index.h("bcm-treeview-item", Object.assign({ _internal_id: this._internal_id, text: group[this.objectMapping['text']], icon: group[this.objectMapping['icon']], id: group[this.objectMapping['id']], size: this.size, "has-child": !!group[this.objectMapping['items']] }, (parentGroup && { 'parent-id': parentGroup[this.objectMapping['id']] }), (group[this.objectMapping['tooltipText']] && { tooltipText: group[this.objectMapping['tooltipText']] }), (String(group[this.objectMapping['checked']]) === "true" && { checkTrigger: true }), (String(group[this.objectMapping['open']]) === "true" && { open: true }), (String(group[this.objectMapping['selected']]) === "true" && { selected: true }), (String(group[this.objectMapping['disabled']]) === "true" && { disabled: true }), (group[this.objectMapping['items']] && { items: group[this.objectMapping['items']] }), (this.favIcon && !this.favIconOnlyChilds && { favicon: true }), (this.favIcon && this.favIconOnlyChilds && group[this.objectMapping['items']].length == 0 && { favicon: true }), (this.favIcon && group.rightSlot && { favorite: group.rightSlot[this.objectMapping['favorite']] }), (this.showIcon && { showIcon: true }), (String(this.checkboxes) === "true" && { checkboxes: true }), ((this.allOpen || this.allOpenOnSearch) && { open: true }), { itemObject: group }, ((this.checkedList && this.checkedList.find(e => e == group[this.objectMapping['id']]))) && { checkTrigger: true }, (this.updateCheckedList.length > 0 &&
-      ((this.updateCheckedList.find(e => e == group[this.objectMapping['id']])) && { checkTrigger: true }))), group[this.objectMapping['items']] && group[this.objectMapping['items']].map((item) => (this.recursiveItemRenderer(item, group)))));
-  }
-  /**
-   * @desc
-   */
-  handleCheckList(process = 'add', checkId) {
-    //  console.log(checkId)
-    if (this.checkboxes === true) {
-      // const { checklist } = this
-      // checkId = Number(checkId)
-      switch (process) {
-        case 'add':
-          if (this.checklist.length > 0) {
-            this.checklist.indexOf(checkId) < 0 && (this.checklist = [...this.checklist, checkId]);
-          }
-          else {
-            this.checklist = [checkId];
-          }
-          break;
-        case 'remove':
-          this.checklist = this.checklist.filter(item => item !== checkId);
-          break;
-      }
-      let sorted = this.checklist.sort(function (a, b) { return a - b; });
-      this.checklistSorted = sorted;
-      // console.log('sorted: ', sorted)
-      this.checkCount = this.checklistSorted.length;
-    }
-  }
-  async showSearchMethod(val = true) {
-    this.showSearch = val;
-    // return val
-  }
-  async searchResultMethod(items = []) {
-    // this.listenSearchResult({ detail: items })
-    await customElements.whenDefined("bcm-old-search");
-    const search = this.el.shadowRoot.querySelector("bcm-old-search");
-    const detail = await search.searchArray(items, this.objectMapping['id']);
-    await this.listenSearchResult({ detail: detail });
-    // return true
-  }
-  isLoading(val) {
-    var treeview = this.el.shadowRoot.getElementById("treeview");
-    var loading = this.el.shadowRoot.getElementById("loading");
-    var searchInput = this.el.shadowRoot.querySelector("bcm-old-search");
-    // var listcontainer = this.el.shadowRoot.getElementById("list-container")
-    if (val === true) {
-      treeview && treeview.classList.add('loading');
-      loading && loading.classList.add('show');
-      if (searchInput) {
-        searchInput.disabled = true;
-      }
-      // listcontainer && listcontainer.classList.add('hidden')
-    }
-    else {
-      treeview && treeview.classList.remove('loading');
-      loading && loading.classList.remove('show');
-      if (searchInput) {
-        searchInput.disabled = false;
-      }
-      // listcontainer && listcontainer.classList.remove('hidden')
-    }
-    return false;
-  }
-  isEmpty(val) {
-    var empty = this.el.shadowRoot.getElementById("empty");
-    // var listcontainer = this.el.shadowRoot.getElementById("list-container")
-    if (val === true) {
-      empty && empty.classList.add('show');
-      // listcontainer && listcontainer.classList.add('hidden')
-    }
-    else {
-      empty && empty.classList.remove('show');
-      // listcontainer && listcontainer.classList.remove('hidden')
-    }
-  }
-  isSearchCount(val = null) {
-    if (this.infoFooter === true) {
-      var inSearch = this.el.shadowRoot.getElementById("in-search");
-      var inTotal = this.el.shadowRoot.getElementById("in-total");
-      if (val >= 0 && val != null && inSearch && inTotal) {
-        inSearch.innerHTML = val;
-        inTotal.style.display = "none";
-      }
-      else {
-        inTotal.style.display = "inline";
-        inSearch.innerHTML = "";
-      }
-    }
-    // if (val > 0){
-    //     this.isEmpty(false)
-    // }
-  }
-  listenSearchResult(e) {
-    this.parentLength = [];
-    var searchValue = '';
-    // this.searchResults = e.detail
-    var totalSearch = e.detail.length;
-    this.empty = false;
-    var getAllChilds = this.getAllChilds();
-    this.isEmpty(false);
-    if (e.detail.length > 0) {
-      // this.allOpenOnSearch = true
-      if (e.detail[0] == -1) {
-        totalSearch = 0;
-        this.empty = true;
-        this.isEmpty(true);
-      }
-      if (getAllChilds.length > 0) {
-        getAllChilds.map((item) => {
-          var isParent = false;
-          if (this.searchOnlyChild && item.items && item.items.length > 0) {
-            isParent = true;
-          }
-          e.target.addEventListener('bcm-on-search-value', async (e) => {
-            searchValue = await e.detail;
-            var inputText = item.shadowRoot.getElementById("text");
-            inputText = inputText.textContent || inputText.innerText || "";
-            if (searchValue) {
-              var cacheInputText = lowercase(inputText);
-              var cacheSearchValue = lowercase(searchValue);
-              var index = cacheInputText.indexOf(cacheSearchValue);
-              if (index >= 0) {
-                if (isParent == false) {
-                  if (this.parentLength.indexOf(item.id) === -1) {
-                    this.parentLength.push(item.id);
-                  }
-                  if (this.highlight) {
-                    inputText = inputText.substring(0, index)
-                      + "<span class='highlight'>"
-                      + inputText.substring(index, index + searchValue.length)
-                      + "</span>"
-                      + inputText.substring(index + searchValue.length);
-                  }
-                }
-              }
-            }
-            item.shadowRoot.getElementById("text").innerHTML = inputText;
-          });
-          item.hidden = true;
-          var _ids = item.id;
-          if (e.detail.indexOf(_ids) >= 0) {
-            item.hidden = false;
-            item.open = true;
-            setTimeout(() => {
-              if (this.parentLength.indexOf(item.id) !== -1 && item.items && item.items.length > 0 && this.searchOnlyChild == false) {
-                const getChilds = (item) => {
-                  this.getAllChilds(item).map(element => {
-                    element.hidden = false;
-                    element.open = true;
-                    getChilds(element);
-                  });
-                };
-                getChilds(item);
-              }
-            }, 1);
-          }
-          else {
-            item.hidden = true;
-          }
-        });
-      }
-    }
-    else {
-      // this.allOpenOnSearch = this.allOpenCache
-      if (getAllChilds.length > 0) {
-        getAllChilds.map((item) => {
-          item.hidden = false;
-        });
-      }
-      // this.isEmpty(true)
-    }
-    // if ( this.searchOnlyChild ) {
-    // this.isSearchCount(highlightLength)
-    // }else{
-    setTimeout(() => {
-      if (totalSearch >= 0) {
-        var totals = totalSearch - Number(totalSearch - this.parentLength.length);
-        this.isSearchCount(totals > 0 ? totals : 0);
-      }
-      else {
-        this.isSearchCount();
-      }
-      if (e.detail[0] === -1) {
-        this.isSearchCount(0);
-      }
-      if (e.detail === true) {
-        this.isSearchCount();
-      }
-    }, 100);
-    // }
-    if (e.detail === true) {
-      this.isEmpty(false);
-    }
-  }
-  getAllChilds(element = this.el) {
-    let returnAllItems = [];
-    utils.getChilds(element, 'bcm-treeview-item').forEach(items => {
-      this.getAllChilds(items) && (returnAllItems.indexOf(items) < 0 && (returnAllItems.push(items))
-      // returnAllItems = [...returnAllItems, ...this.getAllChilds(items)]
-      );
-      returnAllItems.indexOf(items) < 0 && (returnAllItems.push(items));
-      // returnAllItems = [...returnAllItems,
-      //     items
-      // ]
-    });
-    return returnAllItems;
-  }
-  /**
-   * @desc
-   */
-  handletreeviewItemSelected(event) {
-    this.treeviewClearSelecteds.emit(event.detail);
-  }
-  /**
-   * @desc
-   */
-  handletreeviewChecked(event) {
-    //  this.treeviewSendCheck.emit(event.detail)
-    this.handleCheckList('add', event.detail);
-    //  this.treeviewChange.emit(event.detail)
-  }
-  /**
-   * @desc
-   */
-  //  @Listen('bcm-treeview-check-group-check')
-  //  bcmTreeviewCheckGroupChecked(event: any) {
-  //  console.log(event)
-  //  this.treeviewSendCheck.emit(event.detail)
-  //  this.handleCheckList('add',event.detail)
-  //  this.treeviewChange.emit(event.detail)
-  //  }
-  /**
-   * @desc
-   */
-  handletreeviewUnchecked(event) {
-    // this.treeviewSendUncheck.emit(event.detail)
-    this.handleCheckList('remove', event.detail);
-    // this.treeviewChange.emit(event.detail)
-  }
-  /**
-   * @desc
-   */
-  handletreeviewIndeterminateChecked(event) {
-    this.handleCheckList('add', event.detail);
-  }
-  /**
-   * @desc
-   */
-  handletreeviewIndeterminateUnchecked(event) {
-    this.handleCheckList('remove', event.detail);
-  }
-  treeviewUncheckedMethod(item) {
-    this.handletreeviewUnchecked({ "detail": item });
-    this.componentDidUpdate();
-    return Promise.resolve(true);
-  }
-  /**
-   * @desc
-   * Keyboard Navigation
-   */
-  getIndex(item) {
-    return Array.from(item.parentNode.children).indexOf(item);
-  }
-  /**
-   * @desc
-   * Keyboard Navigation
-   */
-  getNext(item) {
-    let returnItem = this.getChildItem(item.parentElement)[this.getIndex(item) + 1];
-    if (returnItem)
-      return returnItem;
-    return false;
-  }
-  /**
-   * @desc
-   * Keyboard Navigation
-   */
-  getPrev(item) {
-    let returnItem = this.getChildItem(item.parentElement)[this.getIndex(item) - 1];
-    if (returnItem)
-      return returnItem;
-    return false;
-  }
-  /**
-   * @desc
-   * Keyboard Navigation
-   */
-  getParent(item) {
-    if (lowercase(item.parentElement.tagName) == 'bcm-treeview') {
-      return false;
-    }
-    else {
-      return this.getChildItem(item.parentElement.parentElement)[this.getIndex(item.parentElement)];
-    }
-  }
-  /**
-   * @desc
-   * Keyboard Navigation
-   */
-  getNextParent(item) {
-    let getParent = this.getParent(item);
-    let getNext;
-    if (getParent) {
-      getNext = this.getNext(getParent);
-      if (getNext) {
-        return getNext;
-      }
-      else {
-        return this.getNextParent(getParent);
-      }
-    }
-  }
-  /**
-   * @desc
-   * Keyboard Navigation
-   */
-  getFirstItem(el = this.el) {
-    return this.getChildItem(el)[0];
-  }
-  /**
-   * @desc
-   * Keyboard Navigation
-   */
-  getLastItem(el = this.el) {
-    let childLength = this.getChildItem(el).length;
-    let lastChild = this.getChildItem(el)[childLength - 1];
-    if (this.getChildItem(lastChild).length > 0 && lastChild.open == true) {
-      return this.getLastItem(lastChild);
-    }
-    else {
-      return lastChild;
-    }
-  }
-  /**
-   * @desc
-   * Keyboard Navigation
-   */
-  getChildItem(element = this.el) {
-    let returnItems = utils.getChilds(element, 'bcm-treeview-item');
-    if (returnItems)
-      return returnItems;
-    return 0;
-  }
-  /**
-   * @desc
-   */
-  handleRightClick(e) {
-    this.treeviewShowContext.emit([e.target.id, e.clientY, e.clientX]);
-    e.preventDefault();
-  }
-  /**
-   * @desc
-   */
-  keyboardNavigationUp(e) {
-    let { keyMapForFocus } = this;
-    if (e.keyCode in keyMapForFocus) {
-      keyMapForFocus[e.keyCode] = false;
-    }
-  }
-  /**
-   * @desc
-   */
-  keyboardNavigation(e) {
-    if (this.keydown) {
-      const { keyMapForFocus, focusedElement, el } = this;
-      this.focusedElement = !focusedElement ? el : focusedElement;
-      const which = e.which || 0;
-      if (this.getChildItem(el).length > 0) {
-        if (e.keyCode in keyMapForFocus) {
-          keyMapForFocus[e.keyCode] = true;
-          if (keyMapForFocus[18] && keyMapForFocus[87]) {
-            e.preventDefault();
-            this.focusedElement = this.getFirstItem(this.focusedElement);
-          }
-        }
-        if (which == 9 || //tab
-          which == 13 || //enter
-          which == 18 || //alt
-          which == 32 || //space
-          which == 35 || // end
-          which == 36 || // home
-          (which >= 35 && which <= 40) //end, home, left arrow, up arrow, right arrow, down arrow
-        ) {
-          e.preventDefault();
-          if (!focusedElement) {
-            this.focusedElement = this.getFirstItem(this.focusedElement);
-          }
-          else {
-            this.focusedElement.focused = false;
-            switch (which) {
-              case 13: // enter
-                this.focusedElement.selected = true;
-                break;
-              case 32: // space
-                this.focusedElement.checked && (this.treeviewUnchecked.emit(this.focusedElement.id)) || (this.treeviewChecked.emit(this.focusedElement.id));
-                break;
-              case 35: // end
-                this.focusedElement = this.getLastItem(this.focusedElement.parentElement);
-                break;
-              case 36: // home
-                this.focusedElement = this.getFirstItem(this.focusedElement.parentElement);
-                break;
-              case 37: // left arrow
-                if (this.getChildItem(this.focusedElement).length > 0 && this.focusedElement.open == true) {
-                  this.focusedElement.open = false;
-                }
-                else {
-                  if (this.getParent(this.focusedElement)) {
-                    this.focusedElement = this.getParent(this.focusedElement);
-                  }
-                }
-                break;
-              case 38: // up arrow
-                if (this.getPrev(this.focusedElement)) {
-                  this.focusedElement = this.getPrev(this.focusedElement);
-                  if (this.getChildItem(this.focusedElement).length > 0 && this.focusedElement.open == true) {
-                    this.focusedElement = this.getLastItem(this.focusedElement);
-                  }
-                }
-                else if (this.getParent(this.focusedElement)) {
-                  this.focusedElement = this.getParent(this.focusedElement);
-                }
-                break;
-              case 39: // right arrow
-                if (this.getChildItem(this.focusedElement).length > 0) {
-                  if (this.focusedElement.open == true) {
-                    this.focusedElement = this.getFirstItem(this.focusedElement);
-                  }
-                  else {
-                    this.focusedElement.open = true;
-                  }
-                }
-                break;
-              case 40: // down arrow
-                if (this.getChildItem(this.focusedElement).length > 0 && this.focusedElement.open == true) {
-                  this.focusedElement = this.getFirstItem(this.focusedElement);
-                }
-                else if (this.getNext(this.focusedElement)) {
-                  this.focusedElement = this.getNext(this.focusedElement);
-                }
-                else if (this.getNextParent(this.focusedElement)) {
-                  this.focusedElement = this.getNextParent(this.focusedElement);
-                }
-                break;
-            }
-          }
-        }
-        if (this.focusedElement)
-          this.focusedElement.focused = true;
-      }
-    }
-  }
-  handleFocus(focusEvent = false) {
-    this.onFocus = focusEvent;
-  }
-  render() {
-    const { searchOnlyChild, searchPlaceholder, search, checkCount, searchData, searchFields, searchSub, returnField, total, fullWidth, infoFooter, showSearch } = this;
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
-      'empty': this.empty,
-      'full-width': fullWidth
-    });
-    const customStyles = {
-      // 'min-height': this.minHeight + 'px',
-      'min-width': this.minWidth + 'px',
-      'max-height': this.maxHeight
-    };
-    return (index.h(index.Host, { class: hostClasses, style: customStyles }, search && (index.h("div", { class: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, index.h("bcm-old-search", { onlyChild: searchOnlyChild, searchPlaceholder: searchPlaceholder, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), index.h("bcm-divider", null))), index.h("div", { id: "treeview", class: "treeview loading" }, 
-    // this.loading && (
-    index.h("div", { id: "loading", class: "loading show" }, index.h("bcm-icon", { class: "prefix", icon: "far fa-spinner-third fa-spin" }))
-    // )
-    , 
-    // this.empty && (
-    index.h("div", { id: "empty", class: "empty" }, index.h("bcm-empty", null, "No Data"))
-    // )
-    , !this.empty && this.items.length !== 0 && this.items.map((item) => (this.recursiveItemRenderer(item, null)))), infoFooter == true && (index.h("footer", null, index.h("bcm-text", { scale: "size-1", color: "grey-8" }, checkCount > 0 && ('( ' + checkCount + ' items selected ) '), "Total ", index.h("span", { id: "in-search" }), " ", index.h("span", { id: "in-total" }, total), " items found.")))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "_items": ["parseItems"]
-  }; }
-};
-Bcmtreeview.style = treeviewCss;
-
-const treeviewItemCss = "@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(.hidden){display:none}.treeview-item{display:flex;align-items:stretch;justify-content:flex-start;color:var(--bcm-color-grey-8);padding-left:8px;user-select:none;background-color:var(--bcm-color-grey-1)}.treeview-item-context-menu{display:none;position:absolute;height:auto;background-color:#ffffff;align-items:center;justify-content:center;flex-direction:column;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25)}.treeview-item-context-menu.show{display:flex}.treeview-item-context-menu span{text-align:left;min-width:100px;padding:5px 8px;font-size:14px;line-height:22px;color:var(--bcm-color-grey-8)}.treeview-item-context-menu span:hover{cursor:pointer;color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.treeview-item.focus .treeview-item-container{border:2px solid var(--bcm-color-prime-blue-2)}.treeview-item-container{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.treeview-item-container.disabled{color:var(--bcm-color-grey-6)}.treeview-item-container.disabled .text-content{cursor:not-allowed}.treeview-item-container.selected:not(.disabled){color:var(--bcm-color-prime-blue-6)}.treeview-item-container.selected:not(.disabled):hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.treeview-item-container:hover:not(.disabled),.treeview-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.treeview-item-container>section:not(.favicon){display:flex;align-items:stretch;justify-content:flex-start;border:2px solid transparent;flex:1}.treeview-item-container>section.favicon{display:flex;align-items:center;justify-content:center;padding:0 5px;height:100%;cursor:pointer}.treeview-item-container>section.favicon:not(.favorite){display:none}.treeview-item-container:hover:not(.disabled) .favicon{display:flex}.treeview-inner{display:none}.treeview-inner.open{display:block}.collapse-content{display:flex;align-items:center;justify-content:center;width:16px;min-width:16px}.collapse-content.child{cursor:pointer}.check-content{display:flex;align-items:center;justify-content:flex-start;width:24px;min-width:24px;padding-left:8px}.check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.check-content .indeterminate:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.check-content .indeterminate.disabled{cursor:not-allowed;background:linear-gradient(90deg, var(--bcm-color-grey-3) 18px, transparent 0px);border-color:var(--bcm-color-grey-3)}.check-content .indeterminate.disabled:after{background-color:var(--bcm-color-grey-6)}.check-content .indeterminate.disabled bcm-icon{filter:brightness(0);opacity:0.3}.text-content{display:flex;align-items:center;justify-content:space-between;cursor:pointer;width:100%;flex:1}.text-content .favicon{display:flex;flex-direction:row;align-items:center;grid-gap:4px}.text-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.text-content.small{padding:0 8px 0 4px}.text-content.medium{padding:4px 8px 4px 4px}.text-content.large{padding:8px 8px 8px 4px}.text-content .icon{text-align:center;margin-right:8px}";
-
-const BcmtreeviewItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.treeviewItemSelected = index.createEvent(this, "bcm-treeview-item-selected", 7);
-    this.treeviewUnchecked = index.createEvent(this, "bcm-treeview-unchecked", 7);
-    this.treeviewChecked = index.createEvent(this, "bcm-treeview-checked", 7);
-    this.treeviewChange = index.createEvent(this, "bcm-treeview-change", 7);
-    this.treeviewIndeterminateUnchecked = index.createEvent(this, "bcm-treeview-indeterminate-unchecked", 7);
-    this.treeviewIndeterminateChecked = index.createEvent(this, "bcm-treeview-indeterminate-checked", 7);
-    this.itemChecked = index.createEvent(this, "bcm-treeview-check-item-checked", 7);
-    this.itemUnchecked = index.createEvent(this, "bcm-treeview-check-item-unchecked", 7);
-    this.groupCheck = index.createEvent(this, "bcm-treeview-check-group-check", 7);
-    this.favoriteStatus = index.createEvent(this, "bcm-favorite-status", 7);
-    this.firstRun = true;
-    this.items = undefined;
-    this.itemObject = undefined;
-    this.text = undefined;
-    this.tooltipText = undefined;
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.parentId = undefined;
-    this.hasChild = false;
-    this.size = 'medium';
-    this.icon = 'bug';
-    this.open = false;
-    this.selected = false;
-    this.checkboxes = false;
-    this.showIcon = false;
-    this.favicon = false;
-    this.favorite = false;
-    this.checked = false;
-    this.checkTrigger = false;
-    this.focused = false;
-    this.disabled = false;
-    this.contextMenuShow = false;
-    this._contextMenu = [];
-    this.indeterminateState = 'uncheck';
-    this._internal_id = "";
-    this.menuPadding = 0;
-    this.childLength = 0;
-    this.indeterminate = false;
-    this.hidden = false;
-    this.contextMenu = [];
-    this.contextOffsetLeft = 0;
-    this.contextOffsetTop = 0;
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentWillLoad() {
-    this.menuPadding = 24;
-    this.childLength = this.el.children.length;
-    this.parseItems(this._contextMenu);
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentDidLoad() {
-    // if (!this.disabled){
-    //     // if (this.selected) this.treeviewItemSelected.emit(this.itemObject)
-    //     if (this.checked){ 
-    //         // this.treeviewChecked.emit(this._id)
-    //         this.handleCheckMouseUp()
-    //     }
-    // }
-    if (!this.disabled && this.firstRun && this.checkTrigger) {
-      this.firstRun = false;
-      this.handleCheckMouseUp();
-    }
-  }
-  /**
-   * @desc
-   * @returns {void}
-   */
-  /*  setIndeterminateState() {
-       if(this.getAllChilds().length > 0) {
-           
-           let state: string = 'uncheck'
-           let allChecked: boolean = true
-           let allUnchecked: boolean = true
-
-           this.getAllChilds().map((item) => {
-               item.checked && (allUnchecked = false)
-               !item.checked && (allChecked = false)
-           });
-           
-           !allChecked && !allUnchecked
-           ? state = 'indeterminate'
-           : allChecked
-           ? state = 'determinate'
-           : state = 'uncheck'
-           
-           this.indeterminateState = state as any;
-           
-       }
-   } */
-  /* @Watch('indeterminateState')
-  onCheckedChange() {
-      if (this.indeterminateState == 'determinate') {
-          this.treeviewChecked.emit(this._id)
-      }else if (this.indeterminateState == 'uncheck') {
-          this.treeviewIndeterminateUnchecked.emit(this._id)
-          this.checked = false
-      }else{
-          this.treeviewIndeterminateUnchecked.emit(this._id)
-          this.checked = false
-      }
-  } */
-  /**
-   * @descc
-   * @param event
-   */
-  handletreeviewClearSelecteds(event) {
-    if (!this.disabled) {
-      if (event.detail && event.detail !== this.itemObject)
-        this.selected = false;
-    }
-  }
-  /**
-   * @descc
-   * @param event
-   */
-  ListentreeviewChange() {
-    //this.setIndeterminateState();
-  }
-  /**
-   * @descc
-   * @param event
-   */
-  ListentreeviewShowContext(event) {
-    this.contextOffsetTop = event.detail[1];
-    this.contextOffsetLeft = event.detail[2];
-    if (event.detail[0] && event.detail[0] === this._id) {
-      this.contextMenuShow = true;
-    }
-    else {
-      this.contextMenuShow = false;
-    }
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleWindowClick(event) {
-    const target = event.target;
-    if (target === this.el)
-      return;
-    this.contextMenuShow = false;
-  }
-  /**
-   * @desc
-   */
-  handleClick() {
-    if (!this.disabled) {
-      this.selected = true;
-      this.treeviewItemSelected.emit(this.itemObject);
-    }
-  }
-  /**
-   * @desc
-   */
-  handleFavClick(e) {
-    if (!this.disabled) {
-      this.favorite = !this.favorite;
-      if (!this.itemObject["rightSlot"]) {
-        this.itemObject["rightSlot"] = {};
-      }
-      this.itemObject["rightSlot"]["favorite"] = this.favorite;
-      this.favoriteStatus.emit(this.itemObject);
-      e.stopPropagation();
-      e.preventDefault();
-    }
-  }
-  /**
-   * @desc
-   */
-  handleOpen() {
-    this.open = !this.open;
-  }
-  getRootChilds(element = this.el) {
-    return utils.getChilds(element, 'bcm-treeview-item');
-  }
-  getAllChilds(element = this.el) {
-    let returnAllItems = [];
-    utils.getChilds(element, 'bcm-treeview-item').forEach(items => {
-      this.getAllChilds(items) && (returnAllItems = [...returnAllItems, ...this.getAllChilds(items)]);
-      returnAllItems = [...returnAllItems,
-        items
-      ];
-    });
-    return returnAllItems;
-  }
-  /**
-   * @desc
-   * -
-   */
-  checkGroupState() {
-    // debugger;
-    const childsRoot = this.getRootChilds();
-    let [state, allChecked, allUnchecked] = ['uncheck', true, true];
-    if (childsRoot.length > 0) {
-      childsRoot.forEach(checkbox => {
-        (checkbox.checked || checkbox.indeterminateState === 'indeterminate') && (allUnchecked = false);
-        !checkbox.checked && (allChecked = false);
-      });
-      !allChecked && !allUnchecked
-        ? state = 'indeterminate'
-        : allChecked
-          ? state = 'determinate'
-          : state = 'uncheck';
-      this.indeterminateState = state;
-      if (state === 'determinate') {
-        this.checked = true;
-        // if(this.checked) {
-        this.treeviewChecked.emit(this._id);
-        // }
-      }
-      else {
-        this.checked = false;
-        this.treeviewUnchecked.emit(this._id);
-      }
-    }
-    else {
-      if (this.checked) {
-        this.checked = false;
-        this.treeviewUnchecked.emit(this._id);
-      }
-      else {
-        this.checked = true;
-        this.treeviewChecked.emit(this._id);
-      }
-    }
-  }
-  /**
-   * @Event
-   * @desc
-   * -
-   */
-  handleCheckMouseUp() {
-    const checked = this.checked;
-    const state = this.indeterminateState;
-    if (!this.hasChild) {
-      !checked
-        ? this.checked = true
-        : this.checked = false;
-      if (this.checked) {
-        this.treeviewChecked.emit(this._id);
-      }
-      else {
-        this.treeviewUnchecked.emit(this._id);
-      }
-      this.groupCheck.emit(this.parentId);
-      return;
-    }
-    const childs = this.getAllChilds();
-    if (state === 'indeterminate' || state === 'uncheck') {
-      childs.forEach(child => {
-        child.checked = true;
-        // if(this.checked) {
-        this.treeviewChecked.emit(child._id);
-        // }
-        child.indeterminateState = 'determined';
-      });
-    }
-    else {
-      childs.forEach(child => {
-        child.checked = false;
-        this.treeviewUnchecked.emit(child._id);
-        child.indeterminateState = 'uncheck';
-      });
-    }
-    this.checkGroupState();
-    this.groupCheck.emit(this.parentId);
-  }
-  checkGroup(e) {
-    const { detail: groupId } = e;
-    if (!groupId || this._id !== groupId)
-      return;
-    this.checkGroupState();
-    this.groupCheck.emit(this.parentId);
-  }
-  /**
-   * @desc
-   * @param item
-   */
-  contextItemRenderer(item) {
-    return (index.h("span", null, item.title));
-  }
-  /**
-   * @desc
-   * @param newValue
-   * @returns {void}
-   */
-  parseItems(newValue) {
-    if (newValue) {
-      typeof newValue == 'string'
-        ? this.contextMenu = JSON.parse(newValue)
-        : this.contextMenu = newValue;
-    }
-  }
-  render() {
-    const { _id, text, tooltipText, size, icon, open, childLength, checkboxes, showIcon, checked, indeterminateState, focused, contextMenuShow } = this;
-    const menuPadding = this.menuPadding + 'px';
-    const textContent = index$1.classnames('text-content', size, 'size-2'
-    // {
-    //     'size-2': size === 'small' || size === 'medium',
-    //     'size-3': size === 'large',
-    // }
-    );
-    const classes = index$1.classnames('treeview-item', {
-      'focus': focused,
-      'open': open,
-      'selected': this.selected
-    });
-    const treeviewContextMenu = index$1.classnames('treeview-item-context-menu', {
-      'show': contextMenuShow
-    });
-    const treeviewInner = index$1.classnames('treeview-inner', {
-      'open': open,
-    });
-    const indeterminate = index$1.classnames('indeterminate', {
-      'disabled': this.disabled,
-    });
-    const treeviewItemContainer = index$1.classnames('treeview-item-container', {
-      'selected': this.selected,
-      'disabled': this.disabled
-    });
-    const collapseContent = index$1.classnames('collapse-content', {
-      'child': childLength > 0,
-    });
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    const faviconClass = index$1.classnames("favicon", {
-      "favorite": this.favorite
-    });
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("div", { class: collapseContent, id: "collapse-button", onClick: () => childLength > 0 && this.handleOpen() }, childLength > 0 && (index.h("bcm-icon", { class: "collapse-icon", icon: `far fa-${open ? 'caret-down' : 'caret-right'}` }))), index.h("div", { class: treeviewItemContainer }, index.h("section", { onMouseUp: () => this.handleCheckMouseUp() }, checkboxes && (index.h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (index.h("span", { class: indeterminate })) || (index.h("bcm-checkbox", { id: 'check-' + _id, name: 'check-' + _id, checked: checked, disabled: this.disabled, noCaption: true })))), index.h("div", { class: textContent, onClick: () => this.handleClick(), title: tooltipText }, showIcon && icon && (index.h("bcm-icon", { class: "icon", icon: icon })), index.h("span", { id: "text" }, text))), this.favicon && (index.h("section", { class: faviconClass, onClick: (e) => this.handleFavClick(e) }, index.h("bcm-icon", { title: this.favorite ? "Click to remove from favorite list" : "Click to add to your favourites list", icon: "far fa-star" })))), !checkboxes && (index.h("div", { class: treeviewContextMenu, style: { top: this.contextOffsetTop + 'px', left: this.contextOffsetLeft + 'px' } }, this.contextMenu.length !== 0 && this.contextMenu.map((item) => (this.contextItemRenderer(item)))))), index.h("div", { class: treeviewInner, style: { paddingLeft: menuPadding } }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "_contextMenu": ["parseItems"]
-  }; }
-};
-BcmtreeviewItem.style = treeviewItemCss;
-
-exports.bcm_checkbox_lite = BcmCheckboxLite;
-exports.bcm_empty = BcmEmpty;
-exports.bcm_listbox = BcmListbox;
-exports.bcm_listbox_group = BcmListboxGroup;
-exports.bcm_listbox_item = BcmListboxItem;
-exports.bcm_old_search = BcmOldSearch;
-exports.bcm_treeview = Bcmtreeview;
-exports.bcm_treeview_item = BcmtreeviewItem;