@genexus/genexus-ide-ui 0.0.9

package/dist/components/ch-tree-item.js

@@ -0,0 +1,565 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './ch-form-checkbox2.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const chTreeItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}:host{--text-color:var(--black);--font-family:\"Source Sans Pro\", sans-serif;--font-weight:normal;--font-size:12px;--guide-color:var(--darkGray);--item-hover-color:var(--lightGray);--item-active-color:var(--silverGray);display:block}:host .text{padding-left:var(--spacing-comp-01)}:host li{list-style:none;font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);color:var(--text-color);height:20px;overflow:hidden}:host li.tree-open{height:auto}:host li .li-text{height:100%;padding:0 var(--spacing-comp-02);cursor:pointer;display:flex;align-items:center;position:relative}:host li .li-text:hover{background-color:var(--item-hover-color)}:host li .li-text:active{background-color:var(--item-active-color)}:host li .li-text:focus{outline:none;box-shadow:inset 0px 0px 0px 2px var(--color-primary-active)}:host li .li-text--selected{background-color:var(--item-active-color)}:host li .li-text--selected:hover{background-color:var(--item-hover-color)}:host li .vertical-line{position:absolute;width:1px;height:0;top:21px;left:15px;z-index:1;background-image:linear-gradient(var(--guide-color) 28%, rgba(255, 255, 255, 0) 0%);background-position:right;background-size:1px 4px;background-repeat:repeat-y}:host li .horizontal-line{position:absolute;width:16px;height:1px;top:11px;z-index:1;margin-left:-23px;top:10px;background-image:linear-gradient(to right, var(--guide-color) 33%, rgba(255, 255, 255, 0) 0%);background-position:bottom;background-size:3px 1px;background-repeat:repeat-x}:host li .horizontal-line.display-none{display:none}:host li .closed-opened-icons{position:relative;display:flex;margin-left:-2px}:host li .toggle-icon{position:relative;z-index:2;padding-left:3px;padding-right:3px;transition-property:opacity;transition-duration:0.5s;transition-timing-function:ease}:host .checkbox{margin-right:var(--spacing-comp-01)}:host .icon{height:20px;justify-content:center;align-items:center;padding-left:2px;padding-right:2px}:host .right-icon{margin-inline-start:auto;position:relative;top:0;transition-property:top;transition-duration:0.5s;transition-timing-function:ease}:host .loading{opacity:1;display:inline;right:11px;top:-20px;position:absolute;z-index:1;transition-property:all;transition-duration:0.5s;transition-timing-function:ease;border-radius:50%;width:8px;height:8px;border:0.18rem solid var(--gray-04);border-top-color:var(--gray-01);animation:spin 1s infinite linear}:host .loading--double{border-style:double;border-width:0.5rem}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.label input[disabled]{color:red}:host([disabled]) li .text{color:var(--darkGray)}:host([disabled]) .toggle-icon{pointer-events:none}:host([downloading]){pointer-events:none}:host([downloading]) .right-icon{top:20px}:host([downloading]) .loading{top:3px}:host([downloaded]) .loading,:host([downloaded]) .right-icon{opacity:0}";
+
+let treeRef;
+const ChTreeItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.liItemClicked = createEvent(this, "liItemClicked", 7);
+    this.toggleIconClicked = createEvent(this, "toggleIconClicked", 7);
+    this.checkboxClickedEvent = createEvent(this, "checkboxClickedEvent", 7);
+    // PROPS
+    /**
+     * Set this attribute if you want the ch-tree-item to display a checkbox
+     */
+    this.checkbox = false;
+    /**
+     * Set this attribute if you want the ch-tree-item checkbox to be checked by default
+     */
+    this.checked = false;
+    /**
+     * Set this attribute if this tree-item has a resource to be downloaded;
+     */
+    this.download = false;
+    /**
+     * Set this attribute when you are downloading a resource
+     */
+    this.downloading = false;
+    /**
+     * Set this attribute when you have downloaded the resource
+     */
+    this.downloaded = false;
+    /**
+     * If this tree-item has a nested tree, set this attribute to make the tree open by default
+     */
+    this.opened = false;
+    /**
+     * The presence of this attribute sets the tree-item as selected
+     */
+    this.selected = false;
+    /**
+     * The presence of this attribute displays a +/- icon to toggle/untoggle the tree
+     */
+    this.isLeaf = undefined;
+    // PROPS
+    this.hasChildTree = false;
+    this.firstTreeItem = false;
+    this.disabled = false;
+    // STATE
+    this.numberOfParentTrees = 1;
+    // @State() verticalLineHeight: string;
+    this.horizontalLinePaddingLeft = 0;
+    this.lastTreeItem = false;
+    this.firstTreeItemOfParentTree = false;
+    this.lastTreeItemOfParentTree = false;
+    this.rightIconColor = "auto";
+    this.numberOfDirectTreeItemsDescendants = 0;
+  }
+  componentWillLoad() {
+    if (!treeRef) {
+      treeRef = this.el.parentElement;
+    }
+    // Count number of parent trees in order to set the apporpiate padding-left
+    this.numberOfParentTrees = this.getParents(this.el);
+    // If tree item has not a tree-item inside, is leaf
+    const treeItemHasTree = this.el.querySelector('[slot="tree"]');
+    if (this.isLeaf === undefined) {
+      if (treeItemHasTree === null) {
+        this.isLeaf = true;
+      }
+      else {
+        this.hasChildTree = true;
+      }
+    }
+    // If is first item of tree
+    const prevItem = this.el.previousElementSibling;
+    if (prevItem === null) {
+      this.firstTreeItem = true;
+    }
+    // If is last item of tree
+    const nextItem = this.el.nextElementSibling;
+    if (nextItem === null) {
+      this.lastTreeItem = true;
+    }
+    // If is first item of parent Tree
+    if (this.numberOfParentTrees === 1) {
+      const prevItem = this.el.previousElementSibling;
+      if (prevItem === null) {
+        this.firstTreeItemOfParentTree = true;
+      }
+    }
+    // If is last item of parent Tree
+    if (this.numberOfParentTrees === 1) {
+      const nextItem = this.el.nextElementSibling;
+      if (nextItem === null) {
+        this.lastTreeItemOfParentTree = true;
+      }
+    }
+    // Set right icon color
+    if (this.download && this.rightIcon.includes("download")) {
+      this.rightIconColor = "primary-enabled";
+    }
+    else if (this.disabled) {
+      this.rightIconColor = "disabled";
+    }
+    // If this tree item has a source to download, this item has child tree, and is not leaf. Also, set the tree as not open
+    if (this.download) {
+      this.hasChildTree = true;
+      this.isLeaf = false;
+      this.opened = false;
+    }
+    // CONFIGURATIONS THAT COME FROM FROM MASTER TREE
+    if (treeRef.checkbox) {
+      this.checkbox = true;
+      this.checked = treeRef.checked;
+    }
+  }
+  getNumberOfVisibleDescendants() {
+    const directTree = this.el.querySelector(":scope > ch-tree");
+    if (directTree !== null && this.opened) {
+      // if tree item has a tree inside and is open...
+      const visibleChildren = directTree.querySelectorAll("ch-tree-item.visible");
+      // direct descendants
+      const directDescendants = directTree.querySelectorAll(":scope > ch-tree-item.visible");
+      // last direct descendant
+      const lastDirectDescendant = directDescendants[directDescendants.length - 1];
+      const lastDirectDescendantIsOpened = lastDirectDescendant.opened;
+      let lastDirectDescendantTreeItemsLength = 0;
+      if (lastDirectDescendantIsOpened) {
+        const lastDirectDescendantTree = lastDirectDescendant.querySelector(":scope > ch-tree");
+        lastDirectDescendantTreeItemsLength =
+          lastDirectDescendantTree.querySelectorAll(":scope > ch-tree-item").length;
+      }
+      if (visibleChildren.length > 0) {
+        this.numberOfDirectTreeItemsDescendants =
+          visibleChildren.length - lastDirectDescendantTreeItemsLength;
+      }
+    }
+  }
+  setVisibleTreeItems() {
+    const directTree = this.el.querySelector(":scope > ch-tree");
+    if (directTree !== null) {
+      const directTreeDirectTreeItems = directTree.querySelectorAll(":scope > ch-tree-item");
+      if (this.opened) {
+        directTreeDirectTreeItems.forEach(item => {
+          item.classList.remove("not-visible");
+          item.classList.add("visible");
+        });
+      }
+      else {
+        directTreeDirectTreeItems.forEach(item => {
+          item.classList.remove("visible");
+          item.classList.add("not-visible");
+        });
+      }
+    }
+  }
+  componentDidLoad() {
+    this.setVisibleTreeItems();
+    this.getNumberOfVisibleDescendants();
+  }
+  watchHandler(newValue) {
+  }
+  getParents(elem) {
+    // Returns the number of parent tree items in order to set the appropriate paddding-left
+    // Set up a parent array
+    const numberOfTreeParents = [];
+    // Push each parent element to the array
+    for (; elem && elem !== document; elem = elem.parentNode) {
+      const elemTagNAme = elem.tagName;
+      if (elemTagNAme === "CH-TREE") {
+        numberOfTreeParents.push(elem);
+      }
+    }
+    return numberOfTreeParents.length;
+  }
+  toggleTreeIconClicked() {
+    if (this.opened) {
+      this.opened = false;
+    }
+    else {
+      this.opened = true;
+    }
+    this.setVisibleTreeItems();
+    // this.toggleIconClicked.emit();
+    const event = this.toggleIconClicked.emit();
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  async updateTreeVerticalLineHeight() {
+    this.getNumberOfVisibleDescendants();
+  }
+  liTextClicked() {
+    this.liItemClicked.emit();
+    this.selected = true;
+  }
+  liTextDoubleClicked() {
+    this.toggleTreeIconClicked();
+  }
+  liTextKeyDownPressed(e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault(); // prevents scrolling
+    }
+    // ENTER
+    if (e.key === "Enter") {
+      // Enter should check/uncheck the checkbox (if present)
+      this.checkboxClicked();
+      if (this.download) {
+        // If the item has a resource to be downloaded, download.
+        this.el.click();
+      }
+    }
+    // LEFT/RIGHT NAVIGATION
+    if (e.key === "ArrowRight" && !this.isLeaf) {
+      // Toggle the tree
+      if (!this.opened) {
+        this.opened = true;
+      }
+      else {
+        const childTree = this.el.querySelector("ch-tree");
+        const childTreeFirstChildren = childTree.querySelector("ch-tree-item");
+        const childTreeFirstChildrenLiText = childTreeFirstChildren.shadowRoot.querySelector(".li-text");
+        childTreeFirstChildrenLiText.focus();
+      }
+      this.setVisibleTreeItems();
+      this.toggleIconClicked.emit(); // this recalculates the vertical line height
+    }
+    if (e.key === "ArrowLeft") {
+      let hasParent = false;
+      const parentChTreeItem = this.el.parentElement.parentElement;
+      let parentChTreeItemLiText = null;
+      if (parentChTreeItem.tagName === "CH-TREE-ITEM") {
+        hasParent = true;
+        parentChTreeItemLiText = parentChTreeItem.shadowRoot.querySelector(".li-text");
+      }
+      if (this.isLeaf) {
+        if (hasParent) {
+          parentChTreeItemLiText.focus();
+        }
+      }
+      else {
+        const li = this.el.shadowRoot.querySelector("li");
+        if (li.classList.contains("tree-open")) {
+          this.opened = false;
+        }
+        else if (hasParent) {
+          parentChTreeItemLiText.focus();
+        }
+      }
+      this.setVisibleTreeItems();
+      this.toggleIconClicked.emit(); // this recalculates the vertical line height
+    }
+    // UP/DOWN NAVIGATION
+    if (e.key === "ArrowUp" || (e.key === "Tab" && e.shiftKey)) {
+      e.preventDefault();
+      if (!this.firstTreeItemOfParentTree) {
+        // Is not the first element of the parent
+        // Set focus on the prev item
+        let prevItem;
+        const prevElementSibling = this.el.previousElementSibling;
+        if (e.shiftKey && e.key !== "Tab") {
+          // if shift key was pressed, navigate to the previous sibling
+          if (prevElementSibling !== null) {
+            prevItem =
+              prevElementSibling.shadowRoot.querySelector("li .li-text");
+          }
+        }
+        else if (prevElementSibling === null) {
+          const parentItem = this.el.parentElement;
+          const parentParentItem = parentItem.parentElement;
+          prevItem = parentParentItem.shadowRoot.querySelector("li .li-text");
+        }
+        else {
+          prevItem = prevElementSibling.shadowRoot.querySelector("li .li-text");
+          if (prevElementSibling !== null) {
+            // If the preceding tree-item has tree inside...
+            const prevElementSiblingHasChildTree = prevElementSibling.hasChildTree;
+            if (prevElementSiblingHasChildTree) {
+              const prevElementSiblingHasOpenTree = prevElementSibling.opened;
+              if (prevElementSiblingHasOpenTree && !this.download) {
+                // If preceding tree-item tree is opened, then the prev item is the last item of that tree
+                const prevElemSiblingTreeItem = this.el.previousElementSibling;
+                const prevElemSiblingTreeItemTree = prevElemSiblingTreeItem.querySelector("ch-tree");
+                //
+                if (prevElemSiblingTreeItemTree.lastElementChild.hasChildTree) {
+                  if (prevElemSiblingTreeItemTree.lastElementChild.shadowRoot
+                    .querySelector("li")
+                    .classList.contains("tree-open")) {
+                    prevItem = prevElemSiblingTreeItemTree.lastElementChild
+                      .querySelector("ch-tree")
+                      .lastElementChild.shadowRoot.querySelector("li .li-text");
+                  }
+                  else {
+                    prevItem =
+                      prevElemSiblingTreeItemTree.lastElementChild.shadowRoot.querySelector("li .li-text");
+                  }
+                }
+                else {
+                  prevItem =
+                    prevElemSiblingTreeItemTree.lastElementChild.shadowRoot.querySelector("li .li-text");
+                }
+                //
+              }
+              else {
+                // The preciding item has a tree, but it is closed
+                prevItem =
+                  this.el.previousElementSibling.shadowRoot.querySelector("li .li-text");
+              }
+            }
+          }
+        }
+        if (prevItem !== null && prevItem !== undefined) {
+          prevItem.focus();
+        }
+      }
+    }
+    if (e.key === "ArrowDown" || (e.key === "Tab" && !e.shiftKey)) {
+      e.preventDefault();
+      if (!this.lastTreeItemOfParentTree) {
+        // Set focus on the next item
+        let nextItem;
+        if (e.shiftKey) {
+          // if shift key was pressed, navigate to the next sibling
+          if (this.el.nextElementSibling !== null) {
+            nextItem =
+              this.el.nextElementSibling.shadowRoot.querySelector("li .li-text");
+          }
+        }
+        else if (this.lastTreeItem) {
+          if (this.hasChildTree && this.opened) {
+            nextItem =
+              this.el.firstElementChild.firstElementChild.shadowRoot.querySelector(".li-text");
+          }
+          else {
+            const thisTree = this.el.parentElement;
+            const thisTreeParent = thisTree.parentElement;
+            const thisTreeParentNextTree = thisTreeParent.nextElementSibling;
+            if (thisTreeParentNextTree === null) {
+              if (thisTreeParent.parentElement.parentElement
+                .nextElementSibling !== null) {
+                nextItem =
+                  thisTreeParent.parentElement.parentElement.nextElementSibling.shadowRoot.querySelector(".li-text");
+              }
+            }
+            else {
+              nextItem = thisTreeParentNextTree.shadowRoot.querySelector(".li-text");
+            }
+          }
+        }
+        else if (this.hasChildTree && this.opened && !this.download) {
+          nextItem = this.el
+            .querySelector("ch-tree ch-tree-item")
+            .shadowRoot.querySelector("li .li-text");
+        }
+        else {
+          nextItem =
+            this.el.nextElementSibling.shadowRoot.querySelector(".li-text");
+        }
+        if (nextItem !== null && nextItem !== undefined) {
+          nextItem.focus();
+        }
+      }
+      else {
+        // Last element of parent tree
+        if (this.el.classList.contains("not-leaf") &&
+          this.el.shadowRoot.querySelector("li").classList.contains("tree-open")) {
+          const childTreeFirstTreeItem = this.el.firstElementChild.firstElementChild.shadowRoot.querySelector("li .li-text");
+          childTreeFirstTreeItem.focus();
+        }
+      }
+    }
+  }
+  returnToggleIconType() {
+    // Returns the type of icon : expand or collapse
+    if (!this.opened || this.download) {
+      return "expand-icon";
+    }
+    else {
+      return "collapse-icon";
+    }
+  }
+  returnPaddingLeft() {
+    // returns the appropriate padding left to the .li-text element
+    let paddingLeft = 0;
+    if (this.numberOfParentTrees !== 1) {
+      paddingLeft = (this.numberOfParentTrees - 1) * 31 + 5;
+    }
+    else {
+      paddingLeft = 5;
+    }
+    this.itemPaddingLeft = paddingLeft;
+    return paddingLeft + "px";
+  }
+  returnVerticalLineLeftPosition() {
+    // Returns the left position of the vertical line that associates the chid-items with the parent item
+    if (this.numberOfParentTrees !== 1) {
+      return this.itemPaddingLeft + 5 + "px";
+    }
+    else {
+      return this.itemPaddingLeft + 5 + "px";
+    }
+  }
+  checkboxTabIndex() {
+    return -1;
+  }
+  liTextTabIndex() {
+    return 1;
+  }
+  setIndeterminate() {
+    if (this.indeterminate) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  checkboxClicked() {
+    if (this.checkbox) {
+      this.checked = !this.checked;
+      this.toggleTreeItemsCheckboxes(this.checked);
+      this.checkboxClickedEvent.emit({
+        checked: this.checked,
+        id: this.el.id
+      });
+    }
+    if (treeRef.toggleCheckboxes) {
+      const items = this.el.querySelectorAll("ch-tree-item");
+      items.forEach(item => {
+        if (item.checkbox) {
+          item.checked = !item.checked;
+        }
+      });
+    }
+  }
+  toggleTreeItemsCheckboxes(checked) {
+    // Only do if toggleCheckboxes property exists in parent tree
+    const parentTree = this.el.parentElement;
+    if (parentTree.toggleCheckboxes) {
+      this.indeterminate = false;
+      const childTree = this.el.querySelector("ch-tree");
+      if (childTree !== null) {
+        const childTreeItems = childTree.querySelectorAll("ch-tree-item");
+        childTreeItems.forEach(function (treeItem) {
+          if (checked) {
+            treeItem.checked = true;
+          }
+          else {
+            treeItem.checked = false;
+          }
+        });
+      }
+    }
+  }
+  resolveLeftIcon() {
+    if (this.leftIcon !== undefined) {
+      return this.leftIcon;
+    }
+    else {
+      return "";
+    }
+  }
+  resolveRightIcon() {
+    if (this.rightIcon !== undefined) {
+      return this.rightIcon;
+    }
+    else {
+      return "";
+    }
+  }
+  render() {
+    return (h(Host, { class: { leaf: this.isLeaf, "not-leaf": !this.isLeaf } }, h("li", { class: {
+        "tree-open": this.opened,
+        disabled: this.disabled
+      } }, h("div", { class: {
+        "li-text": true,
+        "li-text--not-leaf": !this.isLeaf,
+        "li-text--leaf": this.isLeaf,
+        "li-text--first-tree-item": this.firstTreeItem,
+        "li-text--has-child-tree": this.hasChildTree,
+        "li-text--selected": this.selected
+      }, style: { paddingLeft: this.returnPaddingLeft() }, onClick: this.liTextClicked.bind(this), onDblClick: this.liTextDoubleClicked.bind(this), onKeyDown: this.liTextKeyDownPressed.bind(this), tabIndex: this.liTextTabIndex() }, !this.isLeaf || this.download
+      ? [
+        h("span", { class: { "vertical-line": true }, style: {
+            // height: this.verticalLineHeight,
+            height: this.numberOfDirectTreeItemsDescendants * 20 -
+              10 +
+              "px",
+            left: this.returnVerticalLineLeftPosition()
+          } }),
+        h("div", { class: { "closed-opened-icons": true } }, h("div", { part: this.returnToggleIconType(), class: "icon toggle-icon", onClick: this.toggleTreeIconClicked.bind(this) }))
+      ]
+      : null, h("span", { class: {
+        "horizontal-line": true,
+        "display-none": this.numberOfParentTrees === 1
+      }, style: {
+        left: this.itemPaddingLeft + "px"
+      } }), this.checkbox ? (h("ch-form-checkbox", { part: "checkbox", checked: this.checked, class: { checkbox: true }, tabIndex: this.checkboxTabIndex(), indeterminate: this.setIndeterminate(), disabled: this.disabled, onClick: this.checkboxClicked.bind(this) })) : null, h("span", { part: "left-icon" }), this.leftIcon ? (h("ch-icon", { src: this.resolveLeftIcon(), "auto-color": this.disabled ? "disabled" : "auto", class: "icon", style: {
+        "--icon-size": "14px"
+      } })) : null, h("span", { class: "text" }, h("slot", null)), this.rightIcon ? (h("ch-icon", { src: this.resolveRightIcon(), color: this.rightIconColor, class: { "right-icon": true }, style: {
+        "--icon-size": "14px"
+      } })) : null, h("span", { part: "right-icon" }), this.download ? h("span", { class: { loading: true } }) : null), h("slot", { name: "tree" }))));
+  }
+  static get assetsDirs() { return ["tree-item-assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "downloaded": ["watchHandler"]
+  }; }
+  static get style() { return chTreeItemCss; }
+}, [1, "ch-tree-item", {
+    "checkbox": [1028],
+    "checked": [1028],
+    "download": [4],
+    "downloading": [4],
+    "downloaded": [4],
+    "leftIcon": [1, "left-icon"],
+    "rightIcon": [1, "right-icon"],
+    "opened": [1028],
+    "selected": [1028],
+    "isLeaf": [1028, "is-leaf"],
+    "hasChildTree": [1028, "has-child-tree"],
+    "firstTreeItem": [1028, "first-tree-item"],
+    "indeterminate": [1028],
+    "disabled": [4],
+    "numberOfParentTrees": [32],
+    "itemPaddingLeft": [32],
+    "horizontalLinePaddingLeft": [32],
+    "lastTreeItem": [32],
+    "firstTreeItemOfParentTree": [32],
+    "lastTreeItemOfParentTree": [32],
+    "rightIconColor": [32],
+    "numberOfDirectTreeItemsDescendants": [32],
+    "updateTreeVerticalLineHeight": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-tree-item", "ch-form-checkbox", "ch-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-tree-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTreeItem$1);
+      }
+      break;
+    case "ch-form-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChTreeItem = ChTreeItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTreeItem, defineCustomElement };

package/dist/components/ch-tree.js

@@ -0,0 +1,104 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const chTreeCss = ":host{display:flex}:host ul{margin:0;padding-left:0;width:100%}:host .nested-tree{width:100%}:host(.main-tree){overflow:hidden}.main-tree-container{position:relative;width:100%}";
+
+const ChTree$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    // PROPS
+    /**
+     * Set this attribute if you want all this tree tree-items to have a checkbox
+     */
+    this.checkbox = false;
+    /**
+     * Set this attribute if you want all this tree tree-items to have the checkbox checked
+     */
+    this.checked = false;
+    /**
+     * Set this attribute if you want all the childen item's checkboxes to be checked when the parent item checkbox is checked, or to be unchecked when the parent item checkbox is unckecked.
+     */
+    this.toggleCheckboxes = false;
+    // STATE
+    this.nestedTree = false;
+    this.mainTree = false;
+  }
+  componentWillLoad() {
+    // Check if this tree is nested
+    const parentElementTagName = this.el.parentElement.tagName;
+    if (parentElementTagName === "CH-TREE-ITEM") {
+      this.nestedTree = true;
+    }
+    // if this is the main tree...
+    const parentTreeTagName = this.el.parentElement.tagName;
+    if (parentTreeTagName !== "CH-TREE-ITEM") {
+      this.mainTree = true;
+    }
+  }
+  liItemClickedHandler() {
+    // Remove 'selected' state from previous selected item
+    const chTreeItems = this.el.querySelectorAll("ch-tree-item");
+    chTreeItems.forEach(chTreeItem => {
+      chTreeItem.selected = false;
+    });
+  }
+  toggleIconClickedHandler() {
+    // Update not leaf tree items vertical line height
+    const treeItems = this.el.querySelectorAll("ch-tree-item.not-leaf");
+    treeItems.forEach(treeItem => {
+      treeItem.updateTreeVerticalLineHeight();
+    });
+  }
+  /**
+   * @returns an array of the ch-tree-items that are checked. Each array item is an object with "id" and "innerText".
+   */
+  async getChecked() {
+    const allTreeItems = this.el.querySelectorAll("ch-tree-item");
+    const checkedTreeItems = [];
+    if (allTreeItems.length) {
+      allTreeItems.forEach(treeItem => {
+        if (treeItem.checked) {
+          checkedTreeItems.push({ id: treeItem.id });
+        }
+      });
+    }
+    return checkedTreeItems;
+  }
+  render() {
+    return this.mainTree ? (h("div", { class: {
+        tree: true,
+        "main-tree": true
+      } }, h("div", { class: "main-tree-container" }, h("ul", { ref: el => (this.ulTree = el) }, h("slot", null))))) : (h("div", { class: {
+        tree: true,
+        "nested-tree": true
+      } }, h("ul", { ref: el => (this.ulTree = el) }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return chTreeCss; }
+}, [1, "ch-tree", {
+    "checkbox": [4],
+    "checked": [4],
+    "toggleCheckboxes": [1028, "toggle-checkboxes"],
+    "nestedTree": [32],
+    "mainTree": [32],
+    "getChecked": [64]
+  }, [[0, "liItemClicked", "liItemClickedHandler"], [0, "toggleIconClicked", "toggleIconClickedHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-tree"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-tree":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTree$1);
+      }
+      break;
+  } });
+}
+
+const ChTree = ChTree$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTree, defineCustomElement };

package/dist/components/ch-window-close.js

@@ -0,0 +1,6 @@
+import { C as ChWindowClose$1, d as defineCustomElement$1 } from './ch-window-close2.js';
+
+const ChWindowClose = ChWindowClose$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChWindowClose, defineCustomElement };