bromcom-ui 2.8.0-rc.8 → 3.0.0-rc.0

package/dist/esm/bcm-avatar_6.entry.js

@@ -0,0 +1,742 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-348b16ad.js';
+import { I as IsLoad } from './is-load-decorator-07d3502a.js';
+import './color-helper-85f2eddb.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-7be7919a.js';
+import './number-helper-cc915c62.js';
+import './string-helper-8e053b44.js';
+import './validators-37bd26a4.js';
+import './element-dragger-7ea06c76.js';
+import { a as Bcm, B as Bcm$1 } from './bcm-a29f0eef.js';
+import { c as classnames } from './index-ed9652af.js';
+import { c as getChilds } from './utils-b3338faf.js';
+import './colors-1d7854ea.js';
+import './colors-e780e48d.js';
+import './_commonjsHelpers-3016b722.js';
+import './snq.es5-d6023241.js';
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmAvatar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.hidden = false;
+    this.image = undefined;
+    this.name = undefined;
+    this.alt = undefined;
+    this.shape = Bcm.Shape.ellipse;
+    this.size = Bcm.Size.medium;
+    this.color = "slate";
+    this.status = undefined;
+    this.isFallback = false;
+  }
+  componentWillLoad() {
+    this.name = (this.name && this.name.trim()) || "";
+  }
+  handleError() {
+    this.isFallback = true;
+  }
+  getFirstLetters(name) {
+    const splitted = name.split(" ");
+    if (splitted.length === 1)
+      return splitted[0].substring(0, 2);
+    return splitted[0].charAt(0) + splitted[splitted.length - 1].charAt(0);
+  }
+  render() {
+    const { image, name, alt, hidden, shape, size, status, color, isFallback } = this;
+    const isCustom = !Object.keys(Bcm.BaseSize).includes(size);
+    const defaultColors = Generate.getTwColor({ color });
+    const IconTemplate = () => (h("i", { class: classnames("far fa-user", {
+        "tw-text-size-2": size === Bcm.Size.small,
+        "tw-text-size-3": size === Bcm.Size.medium,
+        "tw-text-size-4": size === Bcm.Size.large,
+        "tw-px-[18px] tw-py-[17px] tw-text-4": isCustom,
+      }) }));
+    const ImageTemplate = () => {
+      return h("img", { onError: () => this.handleError(), src: image, alt: alt, class: classnames("tw-h-full tw-w-full tw-rounded-full tw-object-cover") });
+    };
+    const NameTemplate = () => {
+      return (h("span", { class: classnames("tw-uppercase", {
+          "tw-p-1 tw-text-size-3": size === Bcm.Size.small,
+          "tw-px-[5px] tw-py-1.5 tw-text-size-4": size === Bcm.Size.medium,
+          "tw-px-[9.5px] tw-py-[9px] tw-text-size-5": size === Bcm.Size.large,
+          "tw-px-[13.5px] tw-py-[13px] tw-text-4": isCustom,
+        }) }, this.getFirstLetters(name)));
+    };
+    const StatusTemplate = () => {
+      return (h("bcm-badge", { class: classnames("tw-absolute", {
+          "tw-right-0 tw-top-0": shape === Bcm.Shape.ellipse,
+          "tw-right-[-2px] tw-top-[-2px]": shape === Bcm.Shape.square,
+        }, {
+          "tw-h-1.5 tw-w-1.5": size === Bcm.Size.small,
+          "tw-h-2 tw-w-2": size === Bcm.Size.medium,
+          "tw-h-2.5 tw-w-2.5": size === Bcm.Size.large,
+        }), status: status }));
+    };
+    return (h(Host, { role: "avatar", class: classnames("bcm-ui-element bcm-ui-content-display bcm-avatar", "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-default-200 tw-text-default-700", {
+        "tw-hidden": hidden,
+        "tw-relative": status,
+        "tw-h-6 tw-w-6": size === Bcm.Size.small,
+        "tw-h-8 tw-w-8": size === Bcm.Size.medium,
+        "tw-h-10 tw-w-10": size === Bcm.Size.large,
+        "tw-h-[50px] tw-w-[50px]": isCustom,
+      }, {
+        "tw-rounded-full": shape === Bcm.Shape.ellipse,
+      }), style: Object.assign({}, defaultColors) }, h("span", { class: "tw-hidden" }, h("slot", null)), image && !isFallback && h(ImageTemplate, null), name && !isFallback && h(NameTemplate, null), status && h(StatusTemplate, null), isFallback ? name ? h(NameTemplate, null) : h(IconTemplate, null) : null, !isFallback && !image && !name && h(IconTemplate, null)));
+  }
+  get el() { return getElement(this); }
+};
+__decorate$3([
+  IsLoad()
+], BcmAvatar.prototype, "el", void 0);
+
+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}.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) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.checked = true;
+    this.indeterminate = null;
+    this.disabled = false;
+    this.hidden = false;
+    this.required = false;
+    this.readOnly = false;
+    this.captionType = 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 = classnames('bcm-checkbox', `bcm-checkbox-size-medium`, {
+      'error': captionType == Bcm$1.Status.error,
+      hidden,
+      checked,
+      disabled,
+      required
+    });
+    const bcmCheckboxIconClass = classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
+      'bcm-checkbox__label-icon-checked': checked,
+    });
+    const bcmCheckboxLabelClass = classnames('bcm-checkbox__label');
+    const bcmCheckboxInputClass = classnames('bcm-checkbox__input');
+    return (h(Host, { class: bcmCheckboxClass, style: { 'margin': '0' } }, h("div", { class: bcmCheckboxInputClass, style: {
+        'padding-top': '5px'
+      } }, h("input", { id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly }), h("label", { class: bcmCheckboxLabelClass, htmlFor: _id }, h("span", { class: bcmCheckboxIconClass }, h("div", { style: {
+        'height': '12px',
+        'min-height': '12px',
+        'width': '12px',
+        'min-width': '12px'
+      } }, h("svg", { class: "bcm-icon-lite", width: "100%", height: "100%", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, 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 getElement(this); }
+};
+BcmCheckboxLite.style = checkboxCss;
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmDivider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hidden = false;
+    this.direction = Bcm.Direction.horizontal;
+  }
+  render() {
+    const { hidden, direction } = this;
+    return (h(Host, { class: classnames("bcm-ui-element bcm-ui-content-display bcm-divider", "tw-block tw-border tw-border-solid tw-border-slate-300", {
+        "tw-mx-auto tw-my-1 tw-h-[1px] tw-w-full": direction === Bcm.Direction.horizontal,
+        "tw-mx-1 tw-my-0 tw-h-auto tw-min-h-[24px] tw-w-[1px]": direction === Bcm.Direction.vertical,
+        "tw-hidden": hidden,
+      }) }, h("span", { hidden: true }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+__decorate$2([
+  IsLoad()
+], BcmDivider.prototype, "el", void 0);
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmEmpty = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.headerText = undefined;
+    this.icon = undefined;
+    this.description = undefined;
+  }
+  render() {
+    const { icon, headerText, description } = this;
+    return (h(Host, { class: "bcm-ui-element bcm-ui-feedback bcm-empty tw-flex tw-h-full tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-3 tw-text-center" }, icon && h("i", { class: icon }), !icon && (h("svg", { width: "105", height: "99", viewBox: "0 0 105 99", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M44.8676 98.6269C69.2871 98.6269 89.083 94.928 89.083 90.3652C89.083 85.8024 69.2871 82.1035 44.8676 82.1035C20.4481 82.1035 0.652176 85.8024 0.652176 90.3652C0.652176 94.928 20.4481 98.6269 44.8676 98.6269Z", fill: "#FEF3C7" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M80.2396 66.0939L64.6363 46.8906C63.8876 45.9867 62.7933 45.4396 61.6409 45.4396H28.093C26.9413 45.4396 25.847 45.9867 25.0983 46.8906L9.49566 66.0939V76.1263H80.2402V66.0939H80.2396Z", fill: "#FDE68A" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.7152 20.6543H67.0193C67.7112 20.6543 68.3748 20.9292 68.864 21.4184C69.3532 21.9076 69.628 22.5712 69.628 23.263V84.1396C69.628 84.8314 69.3532 85.495 68.864 85.9842C68.3748 86.4734 67.7112 86.7483 67.0193 86.7483H22.7152C22.0233 86.7483 21.3598 86.4734 20.8706 85.9842C20.3814 85.495 20.1065 84.8314 20.1065 84.1396V23.263C20.1065 22.5712 20.3814 21.9076 20.8706 21.4184C21.3598 20.9292 22.0233 20.6543 22.7152 20.6543V20.6543Z", fill: "#FEF3C7" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M28.4857 27.1454H61.2489C61.5948 27.1454 61.9266 27.2829 62.1712 27.5275C62.4158 27.7721 62.5533 28.1038 62.5533 28.4498V44.7261C62.5533 45.072 62.4158 45.4038 62.1712 45.6484C61.9266 45.893 61.5948 46.0304 61.2489 46.0304H28.4857C28.1397 46.0304 27.808 45.893 27.5633 45.6484C27.3187 45.4038 27.1813 45.072 27.1813 44.7261V28.4498C27.1813 28.1038 27.3187 27.7721 27.5633 27.5275C27.808 27.2829 28.1397 27.1454 28.4857 27.1454V27.1454ZM28.6565 53.1111H61.078C61.4693 53.1111 61.8445 53.2665 62.1212 53.5432C62.3978 53.8198 62.5533 54.1951 62.5533 54.5863C62.5533 54.9776 62.3978 55.3528 62.1212 55.6294C61.8445 55.9061 61.4693 56.0615 61.078 56.0615H28.6565C28.2653 56.0615 27.89 55.9061 27.6134 55.6294C27.3367 55.3528 27.1813 54.9776 27.1813 54.5863C27.1813 54.1951 27.3367 53.8198 27.6134 53.5432C27.89 53.2665 28.2653 53.1111 28.6565 53.1111V53.1111ZM28.6565 60.7826H61.078C61.4694 60.7826 61.8447 60.9381 62.1214 61.2148C62.3981 61.4915 62.5536 61.8668 62.5536 62.2582C62.5536 62.6495 62.3981 63.0248 62.1214 63.3015C61.8447 63.5782 61.4694 63.7337 61.078 63.7337H28.6565C28.2652 63.7337 27.8899 63.5782 27.6132 63.3015C27.3364 63.0248 27.181 62.6495 27.181 62.2582C27.181 61.8668 27.3364 61.4915 27.6132 61.2148C27.8899 60.9381 28.2652 60.7826 28.6565 60.7826V60.7826ZM80.0954 89.1535C79.59 91.1563 77.8148 92.6491 75.703 92.6491H14.0315C11.9198 92.6491 10.1446 91.1556 9.63979 89.1535C9.54351 88.7718 9.49488 88.3797 9.495 87.9861V66.0946H26.6589C28.5548 66.0946 30.0828 67.6911 30.0828 69.6293V69.6554C30.0828 71.593 31.6285 73.1576 33.5244 73.1576H56.2102C58.1061 73.1576 59.6517 71.5787 59.6517 69.6404V69.6326C59.6517 67.6943 61.1798 66.0939 63.0757 66.0939H80.2396V87.9867C80.2396 88.3891 80.1894 88.7798 80.0954 89.1535V89.1535Z", fill: "#FBBF24" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M82.2528 21.7122L77.7985 23.4404C77.6841 23.4849 77.5594 23.4962 77.4388 23.473C77.3183 23.4498 77.2067 23.393 77.117 23.3092C77.0272 23.2254 76.963 23.118 76.9316 22.9993C76.9002 22.8806 76.903 22.7555 76.9396 22.6383L78.2028 18.5902C76.5143 16.6702 75.523 14.3289 75.523 11.8024C75.523 5.28391 82.1217 0 90.2622 0C98.4006 0 105 5.28391 105 11.8024C105 18.3209 98.4013 23.6048 90.2615 23.6048C87.3085 23.6048 84.5589 22.9096 82.2528 21.7122Z", fill: "#FDE68A" }), h("path", { d: "M96.0678 13.9337C97.094 13.9337 97.9259 13.1117 97.9259 12.0978C97.9259 11.0839 97.094 10.262 96.0678 10.262C95.0417 10.262 94.2098 11.0839 94.2098 12.0978C94.2098 13.1117 95.0417 13.9337 96.0678 13.9337Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M86.3139 13.7041H82.5978L84.4878 10.4915L86.3139 13.7041ZM88.6363 10.4915H91.8874V13.7041H88.6363V10.4915Z", fill: "white" }))), h("section", null, headerText && h("div", { class: "tw-text-size-5 tw-font-medium tw-text-slate-700" }, " ", headerText, " "), description && h("div", { class: "tw-text-size-4 tw-font-normal tw-text-slate-600" }, " ", description, " ")), h("section", { class: "tw-px-3 tw-py-1" }, h("slot", { name: "actions" }))));
+  }
+  get el() { return getElement(this); }
+};
+__decorate$1([
+  IsLoad()
+], BcmEmpty.prototype, "el", void 0);
+
+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}.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}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const lowercase = (str) => str.toLowerCase();
+const BcmOldSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmOnSearch = createEvent(this, "bcm-on-search", 7);
+    this.bcmOnSearchValue = 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(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(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(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(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(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 = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, 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 getElement(this); }
+  static get watchers() { return {
+    "searchValue": ["inputChange"]
+  }; }
+};
+__decorate([
+  IsLoad()
+], BcmOldSearch.prototype, "el", void 0);
+BcmOldSearch.style = oldSearchCss;
+
+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}.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) {
+    registerInstance(this, hostRef);
+    this.treeviewItemSelected = createEvent(this, "bcm-treeview-item-selected", 7);
+    this.treeviewUnchecked = createEvent(this, "bcm-treeview-unchecked", 7);
+    this.treeviewChecked = createEvent(this, "bcm-treeview-checked", 7);
+    this.treeviewChange = createEvent(this, "bcm-treeview-change", 7);
+    this.treeviewIndeterminateUnchecked = createEvent(this, "bcm-treeview-indeterminate-unchecked", 7);
+    this.treeviewIndeterminateChecked = createEvent(this, "bcm-treeview-indeterminate-checked", 7);
+    this.itemChecked = createEvent(this, "bcm-treeview-check-item-checked", 7);
+    this.itemUnchecked = createEvent(this, "bcm-treeview-check-item-unchecked", 7);
+    this.groupCheck = createEvent(this, "bcm-treeview-check-group-check", 7);
+    this.favoriteStatus = 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 getChilds(element, 'bcm-treeview-item');
+  }
+  getAllChilds(element = this.el) {
+    let returnAllItems = [];
+    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 (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 = classnames('text-content', size, 'size-2'
+    // {
+    //     'size-2': size === 'small' || size === 'medium',
+    //     'size-3': size === 'large',
+    // }
+    );
+    const classes = classnames('treeview-item', {
+      'focus': focused,
+      'open': open,
+      'selected': this.selected
+    });
+    const treeviewContextMenu = classnames('treeview-item-context-menu', {
+      'show': contextMenuShow
+    });
+    const treeviewInner = classnames('treeview-inner', {
+      'open': open,
+    });
+    const indeterminate = classnames('indeterminate', {
+      'disabled': this.disabled,
+    });
+    const treeviewItemContainer = classnames('treeview-item-container', {
+      'selected': this.selected,
+      'disabled': this.disabled
+    });
+    const collapseContent = classnames('collapse-content', {
+      'child': childLength > 0,
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    const faviconClass = classnames("favicon", {
+      "favorite": this.favorite
+    });
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: collapseContent, id: "collapse-button", onClick: () => childLength > 0 && this.handleOpen() }, childLength > 0 && (h("bcm-icon", { class: "collapse-icon", icon: `far fa-${open ? 'caret-down' : 'caret-right'}` }))), h("div", { class: treeviewItemContainer }, h("section", { onMouseUp: () => this.handleCheckMouseUp() }, checkboxes && (h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (h("span", { class: indeterminate })) || (h("bcm-checkbox", { id: 'check-' + _id, name: 'check-' + _id, checked: checked, disabled: this.disabled, noCaption: true })))), h("div", { class: textContent, onClick: () => this.handleClick(), title: tooltipText }, showIcon && icon && (h("bcm-icon", { class: "icon", icon: icon })), h("span", { id: "text" }, text))), this.favicon && (h("section", { class: faviconClass, onClick: (e) => this.handleFavClick(e) }, h("bcm-icon", { title: this.favorite ? "Click to remove from favorite list" : "Click to add to your favourites list", icon: "far fa-star" })))), !checkboxes && (h("div", { class: treeviewContextMenu, style: { top: this.contextOffsetTop + 'px', left: this.contextOffsetLeft + 'px' } }, this.contextMenu.length !== 0 && this.contextMenu.map((item) => (this.contextItemRenderer(item)))))), h("div", { class: treeviewInner, style: { paddingLeft: menuPadding } }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "_contextMenu": ["parseItems"]
+  }; }
+};
+BcmtreeviewItem.style = treeviewItemCss;
+
+export { BcmAvatar as bcm_avatar, BcmCheckboxLite as bcm_checkbox_lite, BcmDivider as bcm_divider, BcmEmpty as bcm_empty, BcmOldSearch as bcm_old_search, BcmtreeviewItem as bcm_treeview_item };