@genexus/genexus-ide-ui 0.0.15 → 0.0.17

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

@@ -10,7 +10,24 @@ const gxgTreeCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var
 const GxgTree = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    //PROPS
+    this.treeItemStateChanged = index.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.
      */
@@ -31,10 +48,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
      */
@@ -61,12 +75,19 @@ 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 //
   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) ||
@@ -78,7 +99,24 @@ const GxgTree = class {
         });
       }
     }
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "selectionChanged");
+    }
   }
+  checkboxToggledHandler(e) {
+    const itemData = e.detail;
+    if (this.masterTree) {
+      this.emitTreeItemNewState(itemData, "checkboxToggled");
+    }
+  }
+  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.
    */
@@ -162,6 +200,7 @@ const GxgTree = class {
     });
     return toggledTreeItems;
   }
+  // 10.RENDER() FUNCTION //
   render() {
     return (index.h(index.Host, null, index.h("div", { class: {
         tree: true,
@@ -171,7 +210,7 @@ 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) {
@@ -180,12 +219,29 @@ const GxgTreeItem = class {
     this.selectionChanged = index.createEvent(this, "selectionChanged", 7);
     this.doubleClicked = index.createEvent(this, "doubleClicked", 7);
     this.checkboxToggled = index.createEvent(this, "checkboxToggled", 7);
+    this.lazyChanged = index.createEvent(this, "lazyChanged", 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.
      */
@@ -218,24 +274,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");
@@ -259,31 +306,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.
      */
@@ -348,296 +370,375 @@ 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,
+    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.selectionChanged.emit({
+          id: this.id,
+          label: this.label,
           checked: this.checked,
-          selected: this.selected,
+          selected: !this.selected,
+          ctrlKey: e.ctrlKey,
         });
       }
-    };
-  }
-  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;
+      if (e.ctrlKey) {
+        this.selected = !this.selected;
       }
-    }
-    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({
+      else if (!this.selected) {
+        this.selected = true;
+      }
+    };
+    this.liTextDoubleClicked = () => {
+      this.doubleClicked.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.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({
+          checked: this.checked,
+          description: this.description,
+          icon: this.icon,
+          id: this.id,
+          indeterminate: this.indeterminate,
+          label: this.label,
+          lazy: this.lazy,
+          leaf: this.leaf,
+          opened: this.opened,
+          selected: this.selected,
+        });
+      }
+      if (!this.lazy) {
+        this.opened = !this.opened;
+      }
+    };
+  }
+  checkedHandler(newValue, oldValue) {
+    if (oldValue !== undefined) {
+      this.checkboxToggled.emit({
+        checked: newValue,
+        description: this.description,
+        icon: this.icon,
+        id: this.id,
+        indeterminate: this.indeterminate,
+        label: this.label,
+        lazy: this.lazy,
+        leaf: this.leaf,
+        opened: this.opened,
+        selected: this.selected,
+      });
     }
   }
-  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({
+        checked: this.checked,
+        description: this.description,
+        icon: this.icon,
+        id: this.id,
+        indeterminate: this.indeterminate,
+        label: this.label,
+        lazy: this.lazy,
+        leaf: this.leaf,
+        opened: newValue,
+        selected: this.selected,
+      });
     }
-    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 (index.h(index.Host, { class: { leaf: this.leaf, "not-leaf": !this.leaf }, exportParts: this.exportparts ? this.exportparts : null }, index.h("li", { class: {
         "tree-open": this.opened,
@@ -669,6 +770,10 @@ const GxgTreeItem = class {
   }
   static get assetsDirs() { return ["tree-item-assets"]; }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["checkedHandler"],
+    "opened": ["openedHandler"]
+  }; }
 };
 GxgTreeItem.style = gxgTreeItemCss;