@genexus/genexus-ide-ui 0.0.62 → 0.0.63

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

@@ -1,4 +1,617 @@
-import { G as GxgTreeItem$1, d as defineCustomElement$1 } from './gxg-tree-item2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { e as exportParts } from './export-parts.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './form-checkbox.js';
+import { d as defineCustomElement$4 } from './icon2.js';
+import { d as defineCustomElement$3 } from './gxg-label2.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const gxgTreeItemCss = "/*! 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}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{--text-color:var(--color-on-background);--font-family:\"Source Sans Pro\", sans-serif;--font-weight:normal;--font-size:12px;--guide-color:var(--gray-06);--item-hover-color:var(--gxg-background-color--hover);--item-active-color:var(--silverGray);color:var(--color-on-background);width:100%;display:block}:host li{list-style:none;font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);color:var(--text-color);overflow:hidden}:host li>::slotted(gxg-tree){display:none}:host li.tree-open>::slotted(gxg-tree){display:block}:host li.tree-closed .vertical-line{display:none}:host li .li-text{min-height:24px;cursor:pointer;display:flex;align-items:center;position:relative;padding-inline-end:var(--spacing-comp-01)}:host li .li-text:hover{background-color:var(--item-hover-color)}:host li .li-text:active{background-color:var(--gxg-background-color--selected)}:host li .li-text:focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host li .li-text--selected{background-color:var(--gxg-background-color--selected)}:host li .li-text>*{flex-shrink:0}:host li .vertical-line{position:absolute;width:1px;height:0;top:23px;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;height:1px;top:11px;z-index:1;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;transform:scale(0.75, 0.75);margin-inline-end:var(--spacing-comp-00);transition-property:opacity;transition-duration:0.5s;transition-timing-function:ease;background-color:var(--gxg-background-color--hover)}:host li .toggle-icon:hover{background-color:var(--color-background)}:host .checkbox{margin-inline-end:var(--spacing-comp-01)}:host .icon--left{margin:0 var(--spacing-comp-01) 0 var(--spacing-comp-00)}: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;z-index:1;margin-inline-end:var(--spacing-comp-01);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)}}:host([disabled]) li .text{color:var(--darkGray)}:host([disabled]) .toggle-icon{pointer-events:none}";
+
+const GxgTreeItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.checkboxToggled = createEvent(this, "checkboxToggled", 7);
+    this.doubleClicked = createEvent(this, "doubleClicked", 7);
+    this.lazyChanged = createEvent(this, "lazyChanged", 7);
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
+    this.toggleIconClicked = createEvent(this, "toggleIconClicked", 7);
+    this.lazy = false; //True if not leaf but no children.
+    this.parentTreeIsMasterTree = false;
+    this.numberOfParentTrees = 1;
+    this.firstItem = false;
+    this.lastItem = false;
+    this.leftPadding = "0px";
+    this.verticalLineStartPosition = "0px";
+    this.horizontalLineWidth = "24px";
+    this.horizontalLineStartPosition = "0px";
+    this.parts = {
+      item: "item",
+      checkbox: "checkbox",
+      toggleButton: "toggle-button",
+    };
+    // 3.STATE() VARIABLES //
+    this.horizontalLinePaddingLeft = 0;
+    this.lastTreeItem = false;
+    this.lastTreeItemOfParentTree = false;
+    this.numberOfVisibleDescendantItems = 0;
+    this.time = 0;
+    this.downloading = false;
+    // 4.PUBLIC PROPERTY API | WATCH'S //
+    /**
+     * Set this attribute if you want this item to display a checkbox. This attribute is affected by the parent tree-item checkbox attribute, unless it is set in this item.
+     */
+    this.checkbox = undefined;
+    /**
+     * Set this attribute if you want this item to be checked by default. This attribute is affected by the parent tree-item checked attribute, unless it is set in this item.
+     */
+    this.checked = undefined;
+    /**
+     * Set this attribute if you want this items child tree to be opened by default. This attribute is affected by the parent tree-item opened attribute, unless it is set in this item.
+     */
+    this.opened = undefined;
+    /**
+     * Set this attribute if you want all the children item's checkboxes to be toggled when this item checkbox is toggled. This attribute is affected by the parent tree-item toggleCheckboxes attribute, unless it is set in this item.
+     */
+    this.toggleCheckboxes = undefined;
+    /**
+     * The presence of this attribute makes this tree item disabled. This attribute is affected by the parent tree type attribute, unless it is set in this item.
+     */
+    this.disabled = undefined;
+    /**
+     * The presence of this attribute indicates that this tree-item is a leaf, meaning it has no children items. If is not a leaf, it will display a +/- icon to toggle/ontoggle the children tree
+     */
+    this.leaf = false;
+    /**
+     * The presence of this attribute sets the tree-item as selected
+     */
+    this.selected = false;
+    /**
+     * This property is for internal use, when using the treeModel.
+     */
+    this.numberOfChildren = 0;
+    /**
+     * This property is for internal use. It indicates that the item has children.
+     */
+    this.hasChildTree = false;
+    /**
+     * This property is for internal use. It indicates that the checkbox has an indeterminate state.
+     */
+    this.indeterminate = false;
+    // 9.LOCAL METHODS //
+    this.evaluateId = () => {
+      if (!this.id) {
+        this.id = this.el.getAttribute("id");
+      }
+    };
+    this.evaluateLazy = () => {
+      if (!this.leaf && this.numberOfChildren === 0) {
+        this.lazy = true;
+        this.opened = false;
+      }
+    };
+    this.observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "childList") {
+          this.lazy = false;
+          this.opened = true;
+          this.reRender();
+        }
+      }
+    });
+    this.initiateMutationObserver = () => {
+      this.observer.observe(this.el, { childList: true, subtree: true });
+    };
+    /**
+     * @description Set some properties based on the parent tree configuration, unless this item has this properties already set.
+     */
+    this.cascadeConfig = () => {
+      const parentTree = this.el
+        .parentElement;
+      this.checkbox =
+        this.checkbox !== undefined ? this.checkbox : parentTree.checkbox;
+      this.checked =
+        this.checked !== undefined ? this.checked : parentTree.checked;
+      this.opened = this.opened !== undefined ? this.opened : parentTree.opened;
+      this.toggleCheckboxes =
+        this.toggleCheckboxes !== undefined
+          ? this.toggleCheckboxes
+          : parentTree.checkbox;
+    };
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+    this.defineLineHeight = () => {
+      let offset = 11.5;
+      if (this.parentTreeIsMasterTree) {
+        offset = 0;
+        if (this.lastItem) {
+          offset = 11;
+        }
+      }
+      let total = 0;
+      if (!this.leaf && !this.lazy) {
+        const allItemsLength = this.el.querySelectorAll("gxg-tree-item").length;
+        const directGxgTree = this.el.querySelector(":scope > gxg-tree");
+        const directTreeItems = directGxgTree.querySelectorAll(":scope > gxg-tree-item");
+        if (!this.parentTreeIsMasterTree) {
+          const lastDirectTreeItem = directTreeItems[directTreeItems.length - 1];
+          const lastDirectItemItemsLength = lastDirectTreeItem.querySelectorAll("gxg-tree-item").length;
+          total = allItemsLength - lastDirectItemItemsLength;
+        }
+        else {
+          total = allItemsLength;
+        }
+      }
+      this.lineHeight = `${total * 24.2 - offset}px`;
+    };
+    /**
+     * @description returns the appropriate start padding and start position for the item, horizontal line, and vertical line.
+     */
+    this.defineStartPosition = () => {
+      let value = 0;
+      let horizontalLineStartPosition = 13;
+      if (this.numberOfParentTrees > 1) {
+        value = (this.numberOfParentTrees - 1) * 45;
+        if (this.numberOfParentTrees > 2) {
+          horizontalLineStartPosition = value - 36;
+        }
+      }
+      else {
+        value = 5;
+      }
+      this.verticalLineStartPosition = `${value + 7}px`;
+      this.leftPadding = `${value}px`;
+      this.horizontalLineStartPosition = `${horizontalLineStartPosition}px`;
+    };
+    this.liTextClickedHandler = (e) => {
+      const toggleWasClicked = e.target.classList.contains("toggle-icon");
+      const checkboxClicked = e.target.nodeName === "GXG-FORM-CHECKBOX";
+      if (toggleWasClicked || checkboxClicked)
+        return;
+      if (e.ctrlKey) {
+        this.selected = !this.selected;
+      }
+      else {
+        this.selected = true;
+      }
+      this.selectionChanged.emit(this.getItemData(e.ctrlKey));
+    };
+    this.liTextDoubleClicked = () => {
+      this.doubleClicked.emit(this.getItemData(false));
+      !this.leaf && this.toggleClickedHandler();
+    };
+    this.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.checkboxClickedHandler();
+      }
+      //LEFT/RIGHT NAVIGATION
+      if (e.key === "ArrowRight" && !this.leaf) {
+        //Toggle the tree
+        if (!this.opened) {
+          this.opened = true;
+        }
+        else {
+          const childTree = this.el.querySelector("gxg-tree");
+          const childTreeFirstChildren = childTree.querySelector("gxg-tree-item");
+          const childTreeFirstChildrenLiText = childTreeFirstChildren.shadowRoot.querySelector(".li-text");
+          childTreeFirstChildrenLiText.focus();
+        }
+      }
+      if (e.key === "ArrowLeft") {
+        let hasParent = false;
+        const parentGxgTreeItem = this.el.parentElement.parentElement;
+        let parentGxgTreeItemLiText = null;
+        if (parentGxgTreeItem.tagName === "GXG-TREE-ITEM") {
+          hasParent = true;
+          parentGxgTreeItemLiText = parentGxgTreeItem.shadowRoot.querySelector(".li-text");
+        }
+        if (this.leaf) {
+          if (hasParent) {
+            parentGxgTreeItemLiText.focus();
+          }
+        }
+        else {
+          const li = this.el.shadowRoot.querySelector("li");
+          if (li.classList.contains("tree-open")) {
+            this.opened = false;
+          }
+          else {
+            if (hasParent) {
+              parentGxgTreeItemLiText.focus();
+            }
+          }
+        }
+      }
+      // UP/DOWN NAVIGATION
+      if (e.key === "ArrowUp" || (e.key === "Tab" && e.shiftKey)) {
+        e.preventDefault();
+        if (!this.firstItem) {
+          //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) {
+                    //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("gxg-tree");
+                    //
+                    if (prevElemSiblingTreeItemTree.lastElementChild
+                      .hasChildTree) {
+                      if (prevElemSiblingTreeItemTree.lastElementChild.shadowRoot
+                        .querySelector("li")
+                        .classList.contains("tree-open")) {
+                        prevItem = prevElemSiblingTreeItemTree.lastElementChild
+                          .querySelector("gxg-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) {
+                nextItem = this.el
+                  .querySelector("gxg-tree gxg-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.leaf && this.opened) {
+            const childTreeFirstTreeItem = this.el.firstElementChild.firstElementChild.shadowRoot.querySelector("li .li-text");
+            childTreeFirstTreeItem.focus();
+          }
+        }
+      }
+    };
+    this.returnToggleIconType = () => {
+      //Returns the type of icon : expand or collapse
+      if (!this.opened || this.lazy) {
+        return "gemini-tools/add";
+      }
+      else {
+        return "gemini-tools/minus";
+      }
+    };
+    /**
+     * When a checkbox is clicked, it state changes and so it's children, and parent items do.
+     * First evaluate the children, and then the parent items.
+     */
+    this.checkboxClickedHandler = () => {
+      if (this.checkbox) {
+        this.checked = !this.checked;
+        if (!this.leaf) {
+          this.toggleChildrenCheckboxes(this.checked);
+        }
+        const parentItems = this.getParentItems();
+        parentItems.forEach((parentItem) => {
+          parentItem.evaluateCheckboxStatus();
+        });
+      }
+    };
+    this.toggleChildrenCheckboxes = (checked) => {
+      this.indeterminate = false;
+      const allChildren = this.el.querySelectorAll("gxg-tree-item");
+      if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
+        Array.from(allChildren).forEach((item) => {
+          item.indeterminate = false;
+          item.checked = checked;
+        });
+      }
+    };
+    this.getParentItems = () => {
+      var _a;
+      const parentItems = [];
+      let parentItem = this.el.parentElement.parentElement;
+      while ((parentItem === null || parentItem === void 0 ? void 0 : parentItem.nodeName) === "GXG-TREE-ITEM") {
+        parentItems.push(parentItem);
+        parentItem = (_a = parentItem.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+      }
+      return parentItems;
+    };
+    this.getParentsNumber = () => {
+      var _a;
+      let count = 0;
+      let parentElement = this.el.parentElement;
+      while ((parentElement === null || parentElement === void 0 ? void 0 : parentElement.nodeName) === "GXG-TREE") {
+        count++;
+        parentElement = (_a = parentElement.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+      }
+      return count;
+    };
+    this.getChildrenNumber = () => {
+      if (this.numberOfChildren === 0) {
+        //If this.numberOfChildren === 0 it might be because the whole tree was created with markup, and not by passing a model. In that case, count the children with querySelectorAll.
+        return this.el.querySelectorAll("gxg-tree-item").length;
+      }
+    };
+    this.toggleClickedHandler = () => {
+      if (this.lazy && !this.opened) {
+        this.downloading = true;
+        this.toggleIconClicked.emit(this.getItemData());
+      }
+      if (!this.lazy) {
+        this.opened = !this.opened;
+      }
+    };
+    this.getItemData = (ctrl = false) => {
+      return {
+        ref: this.el,
+        checkbox: this.checkbox,
+        checked: this.checked,
+        ctrl: ctrl,
+        description: this.description,
+        disabled: this.disabled,
+        icon: this.icon,
+        id: this.id,
+        indeterminate: this.indeterminate,
+        label: this.label,
+        lazy: this.lazy,
+        leaf: this.leaf,
+        opened: this.opened,
+        selected: this.selected,
+      };
+    };
+  }
+  checkedHandler(newValue, oldValue) {
+    if (oldValue !== undefined) {
+      this.checkboxToggled.emit(this.getItemData(false));
+    }
+  }
+  openedHandler(newValue, oldValue) {
+    if (oldValue !== undefined) {
+      this.toggleIconClicked.emit(this.getItemData(false));
+    }
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  componentWillLoad() {
+    //Count number of parent trees in order to set the appropriate padding-left
+    this.numberOfParentTrees = this.getParentsNumber();
+    this.numberOfChildren = this.getChildrenNumber();
+    //If is last item of tree
+    const nextItem = this.el.nextElementSibling;
+    if (nextItem === null) {
+      this.lastTreeItem = true;
+    }
+    if (this.numberOfParentTrees === 1) {
+      this.parentTreeIsMasterTree = true;
+      const prevItem = this.el.previousElementSibling;
+      if (prevItem === null) {
+        //If is first item of parent tree...
+        this.firstItem = true;
+      }
+    }
+    if (!this.el.nextElementSibling) {
+      this.lastItem = true;
+    }
+    this.evaluateId();
+    this.evaluateLazy();
+    this.defineLineHeight();
+    this.defineStartPosition();
+    this.cascadeConfig();
+    this.attachExportParts();
+    this.initiateMutationObserver();
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  async reRender() {
+    this.defineLineHeight();
+  }
+  evaluateCheckboxStatus() {
+    const allChildren = this.el.querySelectorAll("gxg-tree-item");
+    let checked = 0;
+    if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
+      Array.from(allChildren).forEach((item) => {
+        if (item.checked) {
+          checked++;
+        }
+      });
+      if (allChildren.length === checked) {
+        //all checked
+        this.checked = true;
+        this.indeterminate = false;
+      }
+      else if (checked === 0) {
+        //all unchecked
+        this.checked = false;
+        this.indeterminate = false;
+      }
+      else {
+        //indeterminate
+        this.indeterminate = true;
+      }
+    }
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: { leaf: this.leaf, "not-leaf": !this.leaf }, exportParts: this.exportparts ? this.exportparts : null }, h("li", { class: {
+        "tree-open": this.opened,
+        "tree-closed": !this.opened,
+        disabled: this.disabled,
+      } }, h("div", { class: {
+        "li-text": true,
+        "li-text--not-leaf": !this.leaf,
+        "li-text--leaf": this.leaf,
+        "li-text--first-tree-item": this.firstItem,
+        "li-text--has-child-tree": this.hasChildTree,
+        "li-text--selected": this.selected,
+      }, style: { paddingLeft: this.leftPadding }, onClick: this.liTextClickedHandler.bind(this), onDblClick: this.liTextDoubleClicked.bind(this), onKeyDown: this.liTextKeyDownPressed.bind(this), tabIndex: -1, part: this.parts.item }, !this.leaf
+      ? [
+        h("span", { class: { "vertical-line": true }, style: {
+            height: this.lineHeight,
+            left: this.verticalLineStartPosition,
+          } }),
+        h("div", { class: { "closed-opened-icons": true } }, h("gxg-icon", { onClick: this.toggleClickedHandler.bind(this), type: this.returnToggleIconType(), color: "auto", class: "icon toggle-icon", part: this.parts.toggleButton })),
+      ]
+      : null, this.numberOfParentTrees > 1 ? (h("span", { class: {
+        "horizontal-line": true,
+      }, style: {
+        left: this.horizontalLineStartPosition,
+        width: this.horizontalLineWidth,
+      } })) : null, this.checkbox ? (h("gxg-form-checkbox", { checked: this.checked, class: { checkbox: true }, tabIndex: -1, indeterminate: this.indeterminate, disabled: this.disabled, onClick: this.checkboxClickedHandler, part: this.parts.checkbox })) : null, this.icon ? (h("gxg-icon", { type: this.icon, color: "auto", class: "icon icon--left", style: {
+        "--icon-size": "14px",
+      } })) : null, this.downloading && this.lazy ? (h("span", { class: "loading" })) : null, h("span", { class: "text" }, h("slot", null))), h("slot", { name: "tree" }), this.treeModel ? this.treeModel : null)));
+  }
+  static get assetsDirs() { return ["tree-item-assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "checked": ["checkedHandler"],
+    "opened": ["openedHandler"]
+  }; }
+  static get style() { return gxgTreeItemCss; }
+}, [1, "gxg-tree-item", {
+    "checkbox": [1028],
+    "checked": [1028],
+    "opened": [4],
+    "toggleCheckboxes": [4, "toggle-checkboxes"],
+    "type": [1],
+    "disabled": [4],
+    "label": [1],
+    "description": [1],
+    "leaf": [1028],
+    "selected": [1028],
+    "icon": [1],
+    "treeModel": [16],
+    "numberOfChildren": [2, "number-of-children"],
+    "hasChildTree": [1028, "has-child-tree"],
+    "indeterminate": [1028],
+    "horizontalLinePaddingLeft": [32],
+    "lastTreeItem": [32],
+    "lastTreeItemOfParentTree": [32],
+    "numberOfVisibleDescendantItems": [32],
+    "time": [32],
+    "lineHeight": [32],
+    "downloading": [32],
+    "reRender": [64],
+    "evaluateCheckboxStatus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tree-item", "ch-icon", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tree-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTreeItem$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-form-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
 
 const GxgTreeItem = GxgTreeItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gxg-tree-view.js

@@ -1,6 +1,6 @@
-import { G as GxgTreeView$1, d as defineCustomElement$1 } from './tree-view.js';
+import { C as ChTreeViewRenderWrapper, d as defineCustomElement$1 } from './tree-view2.js';
 
-const GxgTreeView = GxgTreeView$1;
+const GxgTreeView = ChTreeViewRenderWrapper;
 const defineCustomElement = defineCustomElement$1;
 
 export { GxgTreeView, defineCustomElement };