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

package/dist/components/treeview-item.js

@@ -0,0 +1,419 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { b as getChilds } from './utils.js';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$4 } from './checkbox.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './label.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 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 this; }
+  static get watchers() { return {
+    "_contextMenu": ["parseItems"]
+  }; }
+  static get style() { return treeviewItemCss; }
+}, [1, "bcm-treeview-item", {
+    "items": [1032],
+    "itemObject": [1025, "item-object"],
+    "text": [1025],
+    "tooltipText": [1025, "tooltip-text"],
+    "_id": [1537, "id"],
+    "parentId": [1025, "parent-id"],
+    "hasChild": [1028, "has-child"],
+    "size": [1025],
+    "icon": [1025],
+    "open": [1540],
+    "selected": [1028],
+    "checkboxes": [1028],
+    "showIcon": [1028, "show-icon"],
+    "favicon": [1028],
+    "favorite": [1028],
+    "checked": [1540],
+    "checkTrigger": [1540, "checktrigger"],
+    "focused": [1540],
+    "disabled": [1540],
+    "contextMenuShow": [1028, "context-menu-show"],
+    "_contextMenu": [1025, "context-menu"],
+    "indeterminateState": [1025, "indeterminate-state"],
+    "_internal_id": [1537],
+    "menuPadding": [32],
+    "childLength": [32],
+    "indeterminate": [32],
+    "hidden": [32],
+    "contextMenu": [32],
+    "contextOffsetLeft": [32],
+    "contextOffsetTop": [32]
+  }, [[4, "bcm-treeview-clear-selecteds", "handletreeviewClearSelecteds"], [4, "bcm-treeview-change", "ListentreeviewChange"], [4, "bcm-treeview-send-check", "ListentreeviewShowContext"], [4, "bcm-treeview-send-uncheck", "ListentreeviewShowContext"], [4, "bcm-treeview-show-context", "ListentreeviewShowContext"], [8, "click", "handleWindowClick"], [0, "bcm-treeview-check-group-check", "checkGroup"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-treeview-item", "bcm-checkbox", "bcm-icon", "bcm-label", "bcm-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-treeview-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmtreeviewItem);
+      }
+      break;
+    case "bcm-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { BcmtreeviewItem as B, defineCustomElement as d };