npm - @genexus/genexus-ide-ui - Versions diffs - 0.0.9 - Mend

@genexus/genexus-ide-ui 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1131) hide show

package/dist/components/gxg-tree-item2.js ADDED Viewed

@@ -0,0 +1,587 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { e as exportParts } from './export-parts.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './form-checkbox.js';
+import { d as defineCustomElement$3 } from './icon2.js';
+import { d as defineCustomElement$2 } from './gxg-label2.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
+const gxgTreeItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}: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-enabled);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 GxgTreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.toggleIconClicked = createEvent(this, "toggleIconClicked", 7);
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
+    this.checkboxToggled = createEvent(this, "checkboxToggled", 7);
+    this.loadLazyChildren = createEvent(this, "loadLazyChildren", 7);
+    this.parts = {
+      item: "item",
+      checkbox: "checkbox",
+      toggleButton: "toggle-button",
+    };
+    //PROPS
+    /**
+     * Set this attribute if you want this item to display a checkbox. This attribute is affected by the parent tree-item checkbox attribute, unless it is set in this item.
+     */
+    this.checkbox = undefined;
+    /**
+     * Set this attribute if you want this item to be checked by default. This attribute is affected by the parent tree-item checked attribute, unless it is set in this item.
+     */
+    this.checked = undefined;
+    /**
+     * Set this attribute if you want this items child tree to be opened by default. This attribute is affected by the parent tree-item opened attribute, unless it is set in this item.
+     */
+    this.opened = undefined;
+    /**
+     * Set this attribute if you want all the children item's checkboxes to be toggled when this item checkbox is toggled. This attribute is affected by the parent tree-item toggleCheckboxes attribute, unless it is set in this item.
+     */
+    this.toggleCheckboxes = undefined;
+    /**
+     * The presence of this attribute makes this tree item disabled. This attribute is affected by the parent tree type attribute, unless it is set in this item.
+     */
+    this.disabled = undefined;
+    /**
+     * The tree item label.
+     */
+    this.label = null;
+    /**
+     * The presence of this attribute indicates that this tree-item is a leaf, meaning it has no children items. If is not a leaf, it will display a +/- icon to toggle/ontoggle the children tree
+     */
+    this.leaf = false;
+    /**
+     * The presence of this attribute sets the tree-item as selected
+     */
+    this.selected = false;
+    /**
+     * This property is for internal use, when using the treeModel.
+     */
+    this.numberOfChildren = 0;
+    this.hasChildTree = false;
+    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";
+    this.evaluateLazy = () => {
+      if (!this.leaf && this.numberOfChildren === 0) {
+        this.lazy = true;
+      }
+    };
+    this.observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "childList") {
+          this.lazy = false;
+          this.reRender();
+        }
+      }
+    });
+    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.
+     */
+    this.cascadeConfig = () => {
+      const parentTree = this.el
+        .parentElement;
+      this.checkbox =
+        this.checkbox !== undefined ? this.checkbox : parentTree.checkbox;
+      this.checked =
+        this.checked !== undefined ? this.checked : parentTree.checked;
+      this.opened = this.opened !== undefined ? this.opened : parentTree.opened;
+      this.toggleCheckboxes =
+        this.toggleCheckboxes !== undefined
+          ? this.toggleCheckboxes
+          : parentTree.checkbox;
+    };
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+    this.defineLineHeight = () => {
+      let offset = 11.5;
+      if (this.parentTreeIsMasterTree) {
+        offset = 0;
+        if (this.lastItem) {
+          offset = 11;
+        }
+      }
+      let total = 0;
+      if (!this.leaf && !this.lazy) {
+        const allItemsLength = this.el.querySelectorAll("gxg-tree-item").length;
+        const directGxgTree = this.el.querySelector(":scope > gxg-tree");
+        const directTreeItems = directGxgTree.querySelectorAll(":scope > gxg-tree-item");
+        if (!this.parentTreeIsMasterTree) {
+          const lastDirectTreeItem = directTreeItems[directTreeItems.length - 1];
+          const lastDirectItemItemsLength = lastDirectTreeItem.querySelectorAll("gxg-tree-item").length;
+          total = allItemsLength - lastDirectItemItemsLength;
+        }
+        else {
+          total = allItemsLength;
+        }
+      }
+      this.lineHeight = `${total * 24.2 - offset}px`;
+    };
+    /**
+     * @description returns the appropriate start padding and start position for the item, horizontal line, and vertical line.
+     */
+    this.defineStartPosition = () => {
+      let value = 0;
+      let horizontalLineStartPosition = 13;
+      if (this.numberOfParentTrees > 1) {
+        value = (this.numberOfParentTrees - 1) * 45;
+        if (this.numberOfParentTrees > 2) {
+          horizontalLineStartPosition = value - 36;
+        }
+      }
+      else {
+        value = 5;
+      }
+      this.verticalLineStartPosition = `${value + 7}px`;
+      this.leftPadding = `${value}px`;
+      this.horizontalLineStartPosition = `${horizontalLineStartPosition}px`;
+    };
+    this.getAncestorsTreeItems = (item = this.el) => {
+      const ancestorsTreeItems = [];
+      while ((item === null || item === void 0 ? void 0 : item.nodeName) === "GXG-TREE-ITEM" ||
+        (item === null || item === void 0 ? void 0 : item.nodeName) === "GXG-TREE") {
+        if (item.nodeName === "GXG-TREE-ITEM") {
+          ancestorsTreeItems.push(item);
+        }
+        item = item.parentElement;
+      }
+      return ancestorsTreeItems;
+    };
+    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,
+        });
+      }
+    };
+  }
+  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 (!this.el.nextElementSibling) {
+      this.lastItem = true;
+    }
+    this.evaluateLazy();
+    this.defineLineHeight();
+    this.defineStartPosition();
+    this.cascadeConfig();
+    this.attachExportParts();
+    this.evaluateCheckboxStatus();
+    this.initiateMutationObserver();
+  }
+  numberOfChildrenHandler() {
+    /*If number of children changed, we should update the vertical line height of all the ancestors*/
+    const ancestors = this.getAncestorsTreeItems(this.el);
+    if (ancestors.length) {
+      ancestors.forEach((ancestor) => {
+        //ancestor.reRender();
+      });
+    }
+  }
+  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;
+    }
+  }
+  toggleTreeIconClicked() {
+    if (this.lazy) {
+      this.downloading = true;
+      this.loadLazyChildren.emit({ id: this.itemId });
+    }
+    else {
+      this.opened = !this.opened;
+    }
+  }
+  async reRender() {
+    this.defineLineHeight();
+  }
+  liTextClickedHandler(e) {
+    if (e.ctrlKey || !this.selected) {
+      this.selectionChanged.emit({
+        id: this.el.id,
+        label: this.el.label,
+        checked: this.el.checked,
+        selected: this.selected,
+        ctrlKey: e.ctrlKey,
+      });
+    }
+    if (e.ctrlKey) {
+      this.selected = !this.selected;
+    }
+    else if (!this.selected) {
+      this.selected = true;
+    }
+  }
+  liTextDoubleClicked() {
+    this.toggleTreeIconClicked();
+  }
+  liTextKeyDownPressed(e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault(); //prevents scrolling
+    }
+    //ENTER
+    if (e.key === "Enter") {
+      //Enter should check/uncheck the checkbox (if present)
+      this.checkboxClickedHandler();
+    }
+    //LEFT/RIGHT NAVIGATION
+    if (e.key === "ArrowRight" && !this.leaf) {
+      //Toggle the tree
+      if (!this.opened) {
+        this.opened = true;
+      }
+      else {
+        const childTree = this.el.querySelector("gxg-tree");
+        const childTreeFirstChildren = childTree.querySelector("gxg-tree-item");
+        const childTreeFirstChildrenLiText = childTreeFirstChildren.shadowRoot.querySelector(".li-text");
+        childTreeFirstChildrenLiText.focus();
+      }
+      this.toggleIconClicked.emit(); //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();
+        }
+      }
+      else {
+        const li = this.el.shadowRoot.querySelector("li");
+        if (li.classList.contains("tree-open")) {
+          this.opened = false;
+        }
+        else {
+          if (hasParent) {
+            parentGxgTreeItemLiText.focus();
+          }
+        }
+      }
+      this.toggleIconClicked.emit(); //this recalculates the vertical line height
+    }
+    // UP/DOWN NAVIGATION
+    if (e.key === "ArrowUp" || (e.key === "Tab" && e.shiftKey)) {
+      e.preventDefault();
+      if (!this.firstItem) {
+        //Is not the first element of the parent
+        //Set focus on the prev item
+        let prevItem;
+        const prevElementSibling = this.el.previousElementSibling;
+        if (e.shiftKey && e.key !== "Tab") {
+          //if shift key was pressed, navigate to the previous sibling
+          if (prevElementSibling !== null) {
+            prevItem = prevElementSibling.shadowRoot.querySelector("li .li-text");
+          }
+        }
+        else {
+          if (prevElementSibling === null) {
+            const parentItem = this.el.parentElement;
+            const parentParentItem = parentItem.parentElement;
+            prevItem = parentParentItem.shadowRoot.querySelector("li .li-text");
+          }
+          else {
+            prevItem = prevElementSibling.shadowRoot.querySelector("li .li-text");
+            if (prevElementSibling !== null) {
+              //If the preceding tree-item has tree inside...
+              const prevElementSiblingHasChildTree = prevElementSibling
+                .hasChildTree;
+              if (prevElementSiblingHasChildTree) {
+                const prevElementSiblingHasOpenTree = prevElementSibling
+                  .opened;
+                if (prevElementSiblingHasOpenTree) {
+                  //If preceding tree-item tree is opened, then the prev item is the last item of that tree
+                  const prevElemSiblingTreeItem = this.el
+                    .previousElementSibling;
+                  const prevElemSiblingTreeItemTree = prevElemSiblingTreeItem.querySelector("gxg-tree");
+                  //
+                  if (prevElemSiblingTreeItemTree.lastElementChild
+                    .hasChildTree) {
+                    if (prevElemSiblingTreeItemTree.lastElementChild.shadowRoot
+                      .querySelector("li")
+                      .classList.contains("tree-open")) {
+                      prevItem = prevElemSiblingTreeItemTree.lastElementChild
+                        .querySelector("gxg-tree")
+                        .lastElementChild.shadowRoot.querySelector("li .li-text");
+                    }
+                    else {
+                      prevItem = prevElemSiblingTreeItemTree.lastElementChild.shadowRoot.querySelector("li .li-text");
+                    }
+                  }
+                  else {
+                    prevItem = prevElemSiblingTreeItemTree.lastElementChild.shadowRoot.querySelector("li .li-text");
+                  }
+                  //
+                }
+                else {
+                  //The preciding item has a tree, but it is closed
+                  prevItem = this.el.previousElementSibling.shadowRoot.querySelector("li .li-text");
+                }
+              }
+            }
+          }
+        }
+        if (prevItem !== null && prevItem !== undefined) {
+          prevItem.focus();
+        }
+      }
+    }
+    if (e.key === "ArrowDown" || (e.key === "Tab" && !e.shiftKey)) {
+      e.preventDefault();
+      if (!this.lastTreeItemOfParentTree) {
+        //Set focus on the next item
+        let nextItem;
+        if (e.shiftKey) {
+          //if shift key was pressed, navigate to the next sibling
+          if (this.el.nextElementSibling !== null) {
+            nextItem = this.el.nextElementSibling.shadowRoot.querySelector("li .li-text");
+          }
+        }
+        else {
+          if (this.lastTreeItem) {
+            if (this.hasChildTree && this.opened) {
+              nextItem = this.el.firstElementChild.firstElementChild.shadowRoot.querySelector(".li-text");
+            }
+            else {
+              const thisTree = this.el.parentElement;
+              const thisTreeParent = thisTree.parentElement;
+              const thisTreeParentNextTree = thisTreeParent.nextElementSibling;
+              if (thisTreeParentNextTree === null) {
+                if (thisTreeParent.parentElement.parentElement
+                  .nextElementSibling !== null) {
+                  nextItem = thisTreeParent.parentElement.parentElement.nextElementSibling.shadowRoot.querySelector(".li-text");
+                }
+              }
+              else {
+                nextItem = thisTreeParentNextTree.shadowRoot.querySelector(".li-text");
+              }
+            }
+          }
+          else {
+            if (this.hasChildTree && this.opened) {
+              nextItem = this.el
+                .querySelector("gxg-tree gxg-tree-item")
+                .shadowRoot.querySelector("li .li-text");
+            }
+            else {
+              nextItem = this.el.nextElementSibling.shadowRoot.querySelector(".li-text");
+            }
+          }
+        }
+        if (nextItem !== null && nextItem !== undefined) {
+          nextItem.focus();
+        }
+      }
+      else {
+        //Last element of parent tree
+        if (!this.leaf && this.opened) {
+          const childTreeFirstTreeItem = this.el.firstElementChild.firstElementChild.shadowRoot.querySelector("li .li-text");
+          childTreeFirstTreeItem.focus();
+        }
+      }
+    }
+  }
+  returnToggleIconType() {
+    //Returns the type of icon : expand or collapse
+    if (!this.opened || this.lazy) {
+      return "gemini-tools/add";
+    }
+    else {
+      return "gemini-tools/minus";
+    }
+  }
+  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;
+      });
+    }
+  }
+  render() {
+    return (h(Host, { class: { leaf: this.leaf, "not-leaf": !this.leaf }, exportParts: this.exportparts ? this.exportparts : null }, h("li", { class: {
+        "tree-open": this.opened,
+        "tree-closed": !this.opened,
+        disabled: this.disabled,
+      } }, h("div", { class: {
+        "li-text": true,
+        "li-text--not-leaf": !this.leaf,
+        "li-text--leaf": this.leaf,
+        "li-text--first-tree-item": this.firstItem,
+        "li-text--has-child-tree": this.hasChildTree,
+        "li-text--selected": this.selected,
+      }, style: { paddingLeft: this.leftPadding }, onClick: this.liTextClickedHandler.bind(this), onDblClick: this.liTextDoubleClicked.bind(this), onKeyDown: this.liTextKeyDownPressed.bind(this), tabIndex: -1, part: this.parts.item }, !this.leaf
+      ? [
+        h("span", { class: { "vertical-line": true }, style: {
+            height: this.lineHeight,
+            left: this.verticalLineStartPosition,
+          } }),
+        h("div", { class: { "closed-opened-icons": true } }, h("gxg-icon", { onClick: this.toggleTreeIconClicked.bind(this), type: this.returnToggleIconType(), color: "auto", class: "icon toggle-icon", part: this.parts.toggleButton })),
+      ]
+      : null, this.numberOfParentTrees > 1 ? (h("span", { class: {
+        "horizontal-line": true,
+      }, style: {
+        left: this.horizontalLineStartPosition,
+        width: this.horizontalLineWidth,
+      } })) : null, this.checkbox ? (h("gxg-form-checkbox", { checked: this.checked, class: { checkbox: true }, tabIndex: -1, indeterminate: this.indeterminate, disabled: this.disabled, onClick: this.checkboxClickedHandler, part: this.parts.checkbox })) : null, this.icon ? (h("gxg-icon", { type: this.icon, color: "auto", class: "icon icon--left", style: {
+        "--icon-size": "14px",
+      } })) : null, this.downloading && this.lazy ? (h("span", { class: "loading" })) : null, h("span", { class: "text" }, h("slot", null))), h("slot", { name: "tree" }), this.treeModel ? this.treeModel : null)));
+  }
+  static get assetsDirs() { return ["tree-item-assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "numberOfChildren": ["numberOfChildrenHandler"]
+  }; }
+  static get style() { return gxgTreeItemCss; }
+}, [1, "gxg-tree-item", {
+    "checkbox": [1028],
+    "checked": [1028],
+    "opened": [4],
+    "toggleCheckboxes": [4, "toggle-checkboxes"],
+    "type": [1],
+    "disabled": [4],
+    "label": [1],
+    "leaf": [1028],
+    "selected": [1028],
+    "itemId": [1, "item-id"],
+    "icon": [1],
+    "treeModel": [16],
+    "numberOfChildren": [2, "number-of-children"],
+    "hasChildTree": [1028, "has-child-tree"],
+    "indeterminate": [1028],
+    "horizontalLinePaddingLeft": [32],
+    "lastTreeItem": [32],
+    "lastTreeItemOfParentTree": [32],
+    "numberOfVisibleDescendantItems": [32],
+    "time": [32],
+    "lineHeight": [32],
+    "downloading": [32],
+    "reRender": [64]
+  }, [[0, "checkboxToggled", "checkboxToggledHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tree-item", "ch-icon", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tree-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTreeItem);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-form-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+export { GxgTreeItem as G, defineCustomElement as d };

package/dist/components/gxg-tree.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { G as GxgTree$1, d as defineCustomElement$1 } from './gxg-tree2.js';
+const GxgTree = GxgTree$1;
+const defineCustomElement = defineCustomElement$1;
+export { GxgTree, defineCustomElement };