@genexus/genexus-ide-ui 0.0.16 → 0.0.18

package/dist/esm/gxg-tree_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-4f0a5746.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
 import { e as exportParts } from './export-parts-7f208d57.js';
 
 const gxgTreeCss = ":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}:host{display:block;--gxg-tree-item-inner-spacing:var(--spacing-comp-01);overflow:auto;height:100%}:host::-webkit-scrollbar{width:6px;height:6px}:host::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host ul{margin:0;padding-left:0;width:100%}";
@@ -6,7 +6,24 @@ const gxgTreeCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var
 const GxgTree = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    //PROPS
+    this.treeItemStateChanged = createEvent(this, "treeItemStateChanged", 7);
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE METHODS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES //
+    this.masterTree = false;
+    // 3.STATE() VARIABLES //
+    // 4.PUBLIC PROPERTY API | WATCH'S //
     /**
      * Set this attribute if you want all the items to have a checkbox.
      */
@@ -27,10 +44,7 @@ const GxgTree = class {
      * Set this attribute if you want to allow multi selection of the items. This property should only be set on the master tree.
      */
     this.multiSelection = false;
-    /**
-     * Indicates if this the is master tree
-     */
-    this.masterTree = false;
+    // 9.LOCAL METHODS //
     /**
      * This method evaluates if this tree is the master tree
      */
@@ -57,24 +71,54 @@ const GxgTree = class {
             : this.toggleCheckboxes;
       }
     };
+    /**
+     * @description This functions is supposed to be called from any of the listeners that are attached to the tree-item events that are emitted when the state changes (toggleIconClicked, selectionChanged, checkboxToggled). When an item state is changed, this function emits the update item data, so that the host can update the tree model, if any, if desired.
+     */
+    this.emitTreeItemNewState = (itemData, emittedBy) => {
+      this.treeItemStateChanged.emit({ itemData, emittedBy: emittedBy });
+    };
   }
+  // 6.COMPONENT LIFECYCLE METHODS //
   componentWillLoad() {
-    //this.initialConfig();
     this.initialConfig();
     this.evaluateIsMasterTree();
   }
+  // 7.LISTENERS //
+  checkboxToggledHandler(e) {
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "checkboxToggled");
+    }
+  }
+  doubleClickedHandler(e) {
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "doubleClicked");
+    }
+  }
   selectionChangedHandler(e) {
     //Unselect all items, except the one that triggered this event. This action should be done once, by the master tree.
-    if ((this.masterTree && !this.multiSelection) ||
-      (this.masterTree && this.multiSelection && !e.detail.ctrlKey)) {
-      const allChildren = this.el.querySelectorAll("gxg-tree-item");
-      if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
-        Array.from(allChildren).forEach((item) => {
+    const allChildren = this.el.querySelectorAll("gxg-tree-item");
+    if ((this.masterTree && this.multiSelection && !e.detail.ctrl) ||
+      (this.masterTree && !this.multiSelection)) {
+      Array.from(allChildren).forEach((item) => {
+        if (item !== e.detail.ref) {
           item.selected = false;
-        });
-      }
+        }
+      });
+    }
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "selectionChanged");
+    }
+  }
+  toggleIconClickedHandler(e) {
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "toggleIconClicked");
     }
   }
+  // 8.PUBLIC METHODS API //
   /**
    * Returns an array of the selected tree-items, providing the id, checked status, selected status, and label.
    */
@@ -158,6 +202,7 @@ const GxgTree = class {
     });
     return toggledTreeItems;
   }
+  // 10.RENDER() FUNCTION //
   render() {
     return (h(Host, null, h("div", { class: {
         tree: true,
@@ -167,21 +212,38 @@ const GxgTree = class {
 };
 GxgTree.style = gxgTreeCss;
 
-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}: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(--gray-01);--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-color-selected)}:host li .li-text:focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}:host li .li-text--selected{background-color:var(--gxg-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(--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 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}: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(--gray-01);--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-item-selected)}:host li .li-text:focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}:host li .li-text--selected{background-color:var(--gxg-background-color-item-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(--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 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.toggleIconClicked = createEvent(this, "toggleIconClicked", 7);
-    this.selectionChanged = createEvent(this, "selectionChanged", 7);
-    this.doubleClicked = createEvent(this, "doubleClicked", 7);
     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",
     };
-    //PROPS
+    // 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.
      */
@@ -214,24 +276,15 @@ const GxgTreeItem = class {
      * 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;
-    //STATE
-    this.horizontalLinePaddingLeft = 0;
-    this.lastTreeItem = false;
-    this.lastTreeItemOfParentTree = false;
-    this.numberOfVisibleDescendantItems = 0;
-    this.time = 0;
-    this.downloading = false;
-    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";
+    // 9.LOCAL METHODS //
     this.evaluateId = () => {
       if (!this.id) {
         this.id = this.el.getAttribute("id");
@@ -255,31 +308,6 @@ const GxgTreeItem = class {
     this.initiateMutationObserver = () => {
       this.observer.observe(this.el, { childList: true, subtree: true });
     };
-    this.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;
-        }
-      }
-    };
     /**
      * @description Set some properties based on the parent tree configuration, unless this item has this properties already set.
      */
@@ -344,296 +372,350 @@ const GxgTreeItem = class {
       this.leftPadding = `${value}px`;
       this.horizontalLineStartPosition = `${horizontalLineStartPosition}px`;
     };
-    this.checkboxClickedHandler = () => {
-      if (this.checkbox) {
-        this.checked = !this.checked;
-        if (!this.leaf) {
-          this.toggleChildrenCheckboxes(this.checked);
-        }
-        this.checkboxToggled.emit({
-          id: this.el.id,
-          label: this.el.label,
-          checked: this.checked,
-          selected: this.selected,
-        });
+    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;
       }
-    };
-  }
-  checkboxToggledHandler() {
-    this.evaluateCheckboxStatus();
-  }
-  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;
+      else {
+        this.selected = true;
       }
-    }
-    if (!this.el.nextElementSibling) {
-      this.lastItem = true;
-    }
-    this.evaluateId();
-    this.evaluateLazy();
-    this.defineLineHeight();
-    this.defineStartPosition();
-    this.cascadeConfig();
-    this.attachExportParts();
-    this.initiateMutationObserver();
-  }
-  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;
-  }
-  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;
-    }
-  }
-  toggleClickedHandler(e) {
-    this.toggleIconClicked.emit({ id: this.id, lazy: this.lazy });
-    if (this.lazy && !this.opened) {
-      this.downloading = true;
-    }
-    if (!this.lazy) {
-      this.opened = !this.opened;
-    }
-  }
-  async reRender() {
-    this.defineLineHeight();
-  }
-  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.selectionChanged.emit({
-        id: this.id,
-        label: this.label,
-        checked: this.checked,
-        selected: !this.selected,
-        ctrlKey: e.ctrlKey,
-      });
-    }
-    if (e.ctrlKey) {
-      this.selected = !this.selected;
-    }
-    else if (!this.selected) {
-      this.selected = true;
-    }
-  }
-  liTextDoubleClicked(e) {
-    this.doubleClicked.emit({
-      id: this.id,
-    });
-    !this.leaf && this.toggleClickedHandler(e);
-  }
-  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;
+      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
       }
-      else {
-        const childTree = this.el.querySelector("gxg-tree");
-        const childTreeFirstChildren = childTree.querySelector("gxg-tree-item");
-        const childTreeFirstChildrenLiText = childTreeFirstChildren.shadowRoot.querySelector(".li-text");
-        childTreeFirstChildrenLiText.focus();
+      //ENTER
+      if (e.key === "Enter") {
+        //Enter should check/uncheck the checkbox (if present)
+        this.checkboxClickedHandler();
       }
-      this.toggleIconClicked.emit({ id: this.id }); //this recalculates the vertical line height
-    }
-    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();
+      //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();
         }
       }
-      else {
-        const li = this.el.shadowRoot.querySelector("li");
-        if (li.classList.contains("tree-open")) {
-          this.opened = false;
+      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");
         }
-        else {
+        if (this.leaf) {
           if (hasParent) {
             parentGxgTreeItemLiText.focus();
           }
         }
-      }
-      this.toggleIconClicked.emit({ id: this.id }); //this recalculates the vertical line height
-    }
-    // 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");
+          const li = this.el.shadowRoot.querySelector("li");
+          if (li.classList.contains("tree-open")) {
+            this.opened = false;
           }
           else {
-            prevItem = prevElementSibling.shadowRoot.querySelector("li .li-text");
+            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) {
-              //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");
+              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 {
-                    prevItem = prevElemSiblingTreeItemTree.lastElementChild.shadowRoot.querySelector("li .li-text");
+                    //The preciding item has a tree, but it is closed
+                    prevItem = this.el.previousElementSibling.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 (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");
+      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 {
+            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 {
-              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");
-                }
+              if (this.hasChildTree && this.opened) {
+                nextItem = this.el
+                  .querySelector("gxg-tree gxg-tree-item")
+                  .shadowRoot.querySelector("li .li-text");
               }
               else {
-                nextItem = thisTreeParentNextTree.shadowRoot.querySelector(".li-text");
+                nextItem = this.el.nextElementSibling.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();
           }
         }
-        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 {
-        //Last element of parent tree
-        if (!this.leaf && this.opened) {
-          const childTreeFirstTreeItem = this.el.firstElementChild.firstElementChild.shadowRoot.querySelector("li .li-text");
-          childTreeFirstTreeItem.focus();
+        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));
     }
   }
-  returnToggleIconType() {
-    //Returns the type of icon : expand or collapse
-    if (!this.opened || this.lazy) {
-      return "gemini-tools/add";
+  openedHandler(newValue, oldValue) {
+    if (oldValue !== undefined) {
+      this.toggleIconClicked.emit(this.getItemData(false));
     }
-    else {
-      return "gemini-tools/minus";
+  }
+  // 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();
   }
-  toggleChildrenCheckboxes(checked) {
-    this.indeterminate = false;
+  // 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) => {
-        item.indeterminate = false;
-        item.checked = checked;
+        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,
@@ -665,6 +747,10 @@ const GxgTreeItem = class {
   }
   static get assetsDirs() { return ["tree-item-assets"]; }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "checked": ["checkedHandler"],
+    "opened": ["openedHandler"]
+  }; }
 };
 GxgTreeItem.style = gxgTreeItemCss;