bromcom-ui 2.3.58 → 2.3.59

package/dist/bromcom-ui/bcm-tooltip.entry.js

@@ -0,0 +1,138 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { d as delay } from './utils-1feb01eb.js';
+import { p as popoverPlacement, a as popoverBoxPlacement } from './popover-placement-fb1f91e9.js';
+
+const tooltipCss = "@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}:host{display:inline-flex}:host(.hidden){display:none}:host(:focus){outline:none}.tooltip{position:relative;}.tooltip .box{position:absolute;display:none;box-sizing:border-box;background-color:#262626;border:1px solid #262626;border-radius:2px;z-index:10700;width:max-content;padding:4px 8px;color:var(--bcm-color-grey-1)}.tooltip::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.tooltip.open .box,.tooltip.open::after{display:block}.tooltip.top .box{bottom:100%;margin-bottom:8px}.tooltip.top::after{bottom:100%;margin-bottom:-4px;border-color:#262626 transparent transparent transparent}.tooltip.bottom .box{top:100%;margin-top:8px}.tooltip.bottom::after{top:100%;margin-top:-4px;border-color:transparent transparent #262626 transparent}.tooltip.left .box{right:100%;margin-right:8px}.tooltip.left::after{right:100%;margin-right:-4px;border-color:transparent transparent transparent #262626}.tooltip.right .box{left:100%;margin-left:8px}.tooltip.right::after{left:100%;margin-left:-4px;border-color:transparent #262626 transparent transparent}.tooltip.top.center .box,.tooltip.bottom.center .box{left:50%;transform:translateX(-50%)}.tooltip.top.center::after,.tooltip.bottom.center::after{left:50%;transform:translateX(-50%)}.tooltip.top.start .box,.tooltip.bottom.start .box{left:0}.tooltip.top.start::after,.tooltip.bottom.start::after{left:8px}.tooltip.top.end .box,.tooltip.bottom.end .box{right:0}.tooltip.top.end::after,.tooltip.bottom.end::after{right:8px}.tooltip.left.center .box,.tooltip.right.center .box{top:50%;transform:translateY(-50%)}.tooltip.left.center::after,.tooltip.right.center::after{top:50%;transform:translateY(-50%)}.tooltip.left.start .box,.tooltip.right.start .box{top:0}.tooltip.left.start::after,.tooltip.right.start::after{top:4px}.tooltip.left.end .box,.tooltip.right.end .box{bottom:0}.tooltip.left.end::after,.tooltip.right.end::after{bottom:4px}";
+
+const BcmTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onShow = createEvent(this, "bcm-show", 7);
+    this.onHide = createEvent(this, "bcm-hide", 7);
+    this.placement = 'top';
+    this.trigger = 'hover';
+    this.hidden = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+  }
+  async show() {
+    // Prevent subsequent calls
+    if (this.open) {
+      return;
+    }
+    this.open = true;
+    this.onShow.emit();
+  }
+  async hide() {
+    // Prevent subsequent calls
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.onHide.emit();
+  }
+  handleClickOutside(e) {
+    if (!this.host.contains(e.target)) {
+      if (this.open) {
+        this.open = false;
+      }
+    }
+  }
+  async handleOpen() {
+    await this.createElement();
+    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
+    if (tooltipBox && tooltipBox.querySelector(".box")) {
+      var tooltipBoxIn = tooltipBox.querySelector(".box");
+      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
+      tooltipBox.classList.toggle("open");
+    }
+  }
+  async createElement() {
+    var target = this.host.getBoundingClientRect();
+    var placementString = String([...this.getPlacement()]).replace(',', ' ');
+    var element;
+    if (!document.getElementById("box" + this._internal_id)) {
+      element = document.createElement("bcm-tooltip-box");
+      element.setAttribute("id", "box" + this._internal_id);
+    }
+    else {
+      element = document.getElementById("box" + this._internal_id);
+    }
+    element.setAttribute("message", this.message);
+    // element.setAttribute("placement", placementString)
+    element.style.position = "absolute";
+    // element.style.top = target.top + "px"
+    // element.style.left = (target.left + (target.width / 2)) + "px"
+    element.setAttribute("placement", placementString);
+    // element.style.zIndex = "999999999"
+    document.body.appendChild(element);
+    await delay(50);
+    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
+    if (tooltipBox && tooltipBox.querySelector(".box")) {
+      var tooltipBoxIn = tooltipBox.querySelector(".box");
+      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
+    }
+    element.style.top = popoverBoxPlacement(this.placement, target)[0] + "px";
+    element.style.left = popoverBoxPlacement(this.placement, target)[1] + "px";
+  }
+  hasTrigger(trigger) {
+    return this.trigger === trigger;
+  }
+  getPlacement() {
+    const placements = this.placement.split('-');
+    if (placements.length === 1) {
+      placements.push('center');
+    }
+    return placements;
+  }
+  /*
+      Trigger Functions
+  */
+  handleMouseOver() {
+    if (this.hasTrigger('hover')) {
+      this.show();
+    }
+  }
+  handleMouseOut() {
+    if (this.hasTrigger('hover')) {
+      this.hide();
+    }
+  }
+  handleClick() {
+    if (this.hasTrigger('click')) {
+      this.open ? this.hide() : this.show();
+    }
+  }
+  handleFocus() {
+    if (this.hasTrigger('focus')) {
+      this.show();
+    }
+  }
+  handleBlur() {
+    if (this.hasTrigger('focus')) {
+      this.hide();
+    }
+  }
+  async componentDidRender() {
+    await this.createElement();
+    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
+    if (tooltipBox && tooltipBox.querySelector(".box")) {
+      var tooltipBoxIn = tooltipBox.querySelector(".box");
+      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
+    }
+  }
+  render() {
+    const classes = classnames('tooltip', ...this.getPlacement(), {
+    // 'open': this.open
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses, onClick: () => this.handleClick(), onMouseOver: () => this.handleMouseOver(), onMouseOut: () => this.handleMouseOut(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: 0 }, h("span", { class: classes }, h("span", { class: "box size-2" }, this.message), h("slot", null))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpen"]
+  }; }
+};
+BcmTooltip.style = tooltipCss;
+
+export { BcmTooltip as bcm_tooltip };

package/dist/{esm → bromcom-ui}/bcm-treeview-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8fe7aea4.js';
+import { r as registerInstance, h } from './index-9dbea026.js';
 
 const treeviewGroupCss = "";
 

package/dist/bromcom-ui/bcm-treeview-item.entry.js

@@ -0,0 +1,354 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { a as getChilds } from './utils-1feb01eb.js';
+
+const iconSizes = {
+  default: {
+    large: 16,
+    medium: 14,
+    small: 14,
+  }
+};
+
+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}: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._id = (Math.random() * 4).toString(16).replace('.', '');
+    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;
+    // @State() checkTrigger: boolean = 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 iconSize = iconSizes.default[size];
+    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", size: 8, icon: open ? 'caret-down' : 'caret-right', type: "fill", color: "grey-10" }))), 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", { type: "fill", class: "icon", icon: icon, size: iconSize })), 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", size: iconSize, type: (this.favorite ? "fill" : "outlined"), icon: "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 { BcmtreeviewItem as bcm_treeview_item };