@genexus/genexus-ide-ui 0.0.20 → 0.0.21

package/dist/components/tree-x-list-item.js

@@ -0,0 +1,595 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, writeTask, Host } from '@stencil/core/internal/client';
+import { m as mouseEventModifierKey } from './helpers.js';
+import { d as defineCustomElement$1 } from './checkbox.js';
+
+const treeXListItemCss = ":where(button){all:unset;display:flex;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:12px;--tab-width:calc(\n    var(--checkbox-size) + var(--expandable-button-width) +\n      (5px * 2)\n  );display:grid;grid-template-rows:min-content}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--expandable-button-width) + 5px\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:var(--inset-inline-start);height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - 4px );border:0 dashed #a9a9a9;border-block-end-width:1px;pointer-events:none;content-visibility:hidden;contain-intrinsic-size:auto 100px}.last-dashed-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px;pointer-events:none}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em}.left-img{grid-area:left-img;margin-inline-end:6px}.right-img{grid-area:right-img;margin-inline-start:6px}.edit-name{grid-area:text;width:100%;height:100%;background-color:unset;padding:0;margin:0;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
+
+const resetDragImage = new Image();
+// Selectors
+const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
+const DIRECT_TREE_ITEM_CHILDREN = `:scope>*>${TREE_ITEM_TAG_NAME}`;
+const FIRST_ENABLED_SUB_ITEM = `${TREE_ITEM_TAG_NAME}:not([disabled])`;
+const LAST_SUB_ITEM = `:scope>*>${TREE_ITEM_TAG_NAME}:last-child`;
+// Keys
+const EXPANDABLE_ID = "expandable";
+const ENTER_KEY = "Enter";
+const ESCAPE_KEY = "Escape";
+/**
+ * This variable specifies a reference to the main ch-tree-x element
+ */
+let mainTreeRef;
+const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.checkboxChange = createEvent(this, "checkboxChange", 7);
+    this.itemDragStart = createEvent(this, "itemDragStart", 7);
+    this.itemDragEnd = createEvent(this, "itemDragEnd", 7);
+    this.itemDrop = createEvent(this, "itemDrop", 7);
+    this.loadLazyContent = createEvent(this, "loadLazyContent", 7);
+    this.modifyCaption = createEvent(this, "modifyCaption", 7);
+    this.selectedItemChange = createEvent(this, "selectedItemChange", 7);
+    /**
+     * Useful to ignore the checkbox change when it was committed from a children.
+     */
+    this.ignoreCheckboxChange = false;
+    /**
+     * Set this attribute if you want display a checkbox in the control.
+     */
+    this.checkbox = false;
+    /**
+     * Set this attribute if you want the checkbox to be checked by default.
+     * Only works if `checkbox = true`
+     */
+    this.checked = false;
+    /**
+     * This attribute lets you specify if the element is disabled.
+     * If disabled, it will not fire any user interaction related event
+     * (for example, click event).
+     */
+    this.disabled = false;
+    /**
+     * This property lets you define the current state of the item when it's
+     * being dragged.
+     */
+    this.dragState = "none";
+    /**
+     * This attribute lets you specify when items are being lazy loaded in the
+     * control.
+     */
+    this.downloading = false;
+    /**
+     * Set this attribute when the item is in edit mode
+     */
+    this.editing = false;
+    /**
+     * If the item has a sub-tree, this attribute determines if the subtree is
+     * displayed.
+     */
+    this.expanded = false;
+    /**
+     * This attribute specifies if the control is the last items in its subtree
+     */
+    this.lastItem = false;
+    /**
+     * Determine if the items are lazy loaded when opening the first time the
+     * control.
+     */
+    this.lazyLoad = false;
+    /**
+     * The presence of this attribute determine whether the item contains a
+     * subtree. `true` if the item does not have a subtree.
+     */
+    this.leaf = false;
+    /**
+     * Level in the tree at which the item is placed.
+     */
+    this.level = 0;
+    /**
+     * `true` if the checkbox's value is indeterminate.
+     */
+    this.indeterminate = false;
+    /**
+     * This attribute lets you specify if the item is selected
+     */
+    this.selected = false;
+    /**
+     * `true` to show the downloading spinner when lazy loading the sub items of
+     * the control.
+     */
+    this.showDownloadingSpinner = true;
+    /**
+     * `true` to show the expandable button that allows to expand/collapse the
+     * items of the control. Only works if `leaf === false`.
+     */
+    this.showExpandableButton = true;
+    /**
+     * `true` to display the relation between tree items and tree lists using
+     * lines.
+     */
+    this.showLines = true;
+    /**
+     * Set this attribute if you want all the children item's checkboxes to be
+     * checked when the parent item checkbox is checked, or to be unchecked when
+     * the parent item checkbox is unchecked.
+     */
+    this.toggleCheckboxes = false;
+    this.checkIfShouldRemoveEditMode = (event) => {
+      event.stopPropagation();
+      if (event.code !== ENTER_KEY && event.code !== ESCAPE_KEY) {
+        return;
+      }
+      event.preventDefault();
+      const commitEdition = event.code === ENTER_KEY;
+      this.removeEditMode(true, commitEdition)();
+    };
+    this.removeEditModeOnClick = (event) => {
+      // The click is executed outside the input and the pointer type is defined,
+      // meaning that the button click was not triggered by the Enter or Space keys
+      if (!event.composedPath().includes(this.inputRef) && event.pointerType) {
+        this.removeEditMode(false)();
+      }
+    };
+    this.removeEditMode = (shouldFocusHeader, commitEdition = false) => () => {
+      // When pressing the enter key in the input, the removeEditMode event is
+      // triggered twice (due to the headerRef.focus() triggering the onBlur
+      // event in the input), so we need to check if the edit mode was disabled
+      if (!this.editing) {
+        return;
+      }
+      this.editing = false;
+      document.body.removeEventListener("click", this.removeEditModeOnClick, {
+        capture: true
+      });
+      const newCaption = this.inputRef.value;
+      if (commitEdition && newCaption.trim() !== "") {
+        this.modifyCaption.emit({
+          id: this.el.id,
+          caption: newCaption
+        });
+      }
+      if (shouldFocusHeader) {
+        this.headerRef.focus();
+      }
+    };
+    this.toggleExpand = (event) => {
+      event.stopPropagation();
+      if (!this.leaf) {
+        this.expanded = !this.expanded;
+      }
+      this.selected = true;
+      this.selectedItemChange.emit({
+        ctrlKeyPressed: mouseEventModifierKey(event),
+        expanded: this.expanded,
+        goToReference: false,
+        id: this.el.id,
+        itemRef: this.el,
+        parentId: this.el.parentElement.parentElement.id,
+        selected: true
+      });
+    };
+    this.handleActionDblClick = (event) => {
+      event.stopPropagation();
+      if (mouseEventModifierKey(event)) {
+        this.toggleSelected();
+        return;
+      }
+      // The Control key is not pressed, so the control can be expanded
+      this.toggleExpand(event);
+    };
+    /**
+     * Event triggered by the following actions on the main button:
+     *   - Click
+     *   - Enter keydown
+     *   - Space keydown and keyup
+     */
+    this.handleActionClick = (event) => {
+      event.stopPropagation();
+      // Don't perform actions when editing
+      if (this.editing) {
+        return;
+      }
+      event.preventDefault();
+      // Click event
+      if (event.pointerType) {
+        this.toggleOrSelect(event);
+        return;
+      }
+      // Enter or space
+      this.toggleExpand(event);
+    };
+    /**
+     * Event triggered by key events on the main button.
+     */
+    this.handleActionKeyDown = (event) => {
+      // Only toggle if the Enter key was pressed with the Ctrl key
+      if (mouseEventModifierKey(event) && event.code === ENTER_KEY) {
+        event.stopPropagation();
+        this.toggleSelected();
+      }
+    };
+    this.handleCheckedChange = (event) => {
+      event.stopPropagation();
+      const checked = event.target.checked;
+      this.checked = checked;
+      this.checkboxChange.emit(checked);
+    };
+    this.renderImg = (cssClass, src) => (h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" }));
+    this.handleDragStart = (event) => {
+      event.stopPropagation();
+      // Disallow drag when editing the caption
+      if (this.editing) {
+        event.preventDefault();
+        return;
+      }
+      event.dataTransfer.setDragImage(resetDragImage, 0, 0);
+      // this.el.style.cursor = "move";
+      this.dragState = "start";
+      this.itemDragStart.emit({
+        elem: this.el,
+        dataTransfer: event.dataTransfer
+      });
+    };
+    this.handleDragEnd = () => {
+      // event.preventDefault();
+      // this.el.style.cursor = null;
+      this.dragState = "none";
+      this.itemDragEnd.emit();
+    };
+    this.handleDrop = (event) => {
+      event.stopPropagation();
+      this.dragState = "none";
+      this.itemDrop.emit({
+        dropItemId: this.el.id,
+        dataTransfer: event.dataTransfer
+      });
+    };
+  }
+  updateChildrenCheckedValue(newValue) {
+    if (!this.toggleCheckboxes || this.leaf || this.ignoreCheckboxChange) {
+      this.ignoreCheckboxChange = false;
+      return;
+    }
+    const treeItems = this.getDirectTreeItems();
+    treeItems.forEach(treeItem => {
+      treeItem.checked = newValue;
+    });
+  }
+  handleEditingChange(isEditing) {
+    if (!isEditing) {
+      return;
+    }
+    document.body.addEventListener("click", this.removeEditModeOnClick, {
+      capture: true
+    });
+    // Wait until the input is rendered to focus it
+    writeTask(() => {
+      requestAnimationFrame(() => {
+        if (this.inputRef) {
+          this.inputRef.focus();
+        }
+      });
+    });
+  }
+  handleExpandedChange(isExpanded) {
+    this.lazyLoadItems(isExpanded);
+  }
+  handleLasItemChange(isLastItem) {
+    if (isLastItem && this.showLines) {
+      this.setResizeObserver();
+    }
+    else {
+      this.disconnectObserver();
+    }
+  }
+  handleShowLinesChange(newShowLines) {
+    if (newShowLines && this.lastItem) {
+      this.setResizeObserver();
+    }
+    else {
+      this.disconnectObserver();
+    }
+    // @todo BUG: showLines does not update in the mainTreeRef, so we have to
+    // sync the ref with the new value
+    mainTreeRef.showLines = newShowLines;
+  }
+  updateCheckboxValue(event) {
+    // No need to update the checkbox value based on the children checkbox
+    if (!this.toggleCheckboxes) {
+      return;
+    }
+    const updatedCheck = event.detail;
+    const treeItems = this.getDirectTreeItems();
+    // Check if all the items have the same value as the updated item
+    const allItemsHaveTheSameCheckedValue = treeItems.every(treeItem => treeItem.checked === updatedCheck);
+    this.ignoreCheckboxChange = this.checked !== updatedCheck;
+    this.checked = updatedCheck;
+    this.indeterminate = !allItemsHaveTheSameCheckedValue;
+  }
+  /**
+   * Focus the next item in the tree. If the control is expanded, it focuses
+   * the first subitem in its tree.
+   */
+  async focusNextItem(ctrlKeyPressed) {
+    // Focus the first subitem if expanded
+    if (!this.leaf && this.expanded) {
+      const subItem = this.el.querySelector(FIRST_ENABLED_SUB_ITEM);
+      // The tree item could be empty or downloading subitem, so it is uncertain
+      // if the query won't fail
+      if (subItem) {
+        subItem.setFocus(ctrlKeyPressed);
+        return;
+      }
+    }
+    // Otherwise, focus the next sibling
+    this.focusNextSibling(ctrlKeyPressed);
+  }
+  /**
+   * Focus the next sibling item in the tree.
+   */
+  async focusNextSibling(ctrlKeyPressed) {
+    const nextSiblingItem = this.el
+      .nextElementSibling;
+    // Focus the next sibling, if exists
+    if (nextSiblingItem) {
+      // If the next sibling is disabled, ask for its next sibling
+      if (nextSiblingItem.disabled) {
+        nextSiblingItem.focusNextItem(ctrlKeyPressed);
+      }
+      else {
+        nextSiblingItem.setFocus(ctrlKeyPressed);
+      }
+      return;
+    }
+    // The item is the last one of the tree at the first level
+    if (this.level === 0) {
+      return;
+    }
+    // Otherwise, ask the parent to focus the next sibling
+    const parentItem = this.el.parentElement
+      .parentElement;
+    parentItem.focusNextSibling(ctrlKeyPressed);
+  }
+  /**
+   * Focus the previous item in the tree. If the previous item is expanded, it focuses
+   * the last subitem in its tree.
+   */
+  async focusPreviousItem(ctrlKeyPressed) {
+    const previousSiblingItem = this.el
+      .previousElementSibling;
+    // Focus last item of the previous sibling
+    if (previousSiblingItem) {
+      previousSiblingItem.focusLastItem(ctrlKeyPressed);
+      return;
+    }
+    // The item is the first one of the tree at the first level
+    if (this.level === 0) {
+      return;
+    }
+    // Otherwise, set focus in the parent element
+    const parentItem = this.el.parentElement
+      .parentElement;
+    // Check if the parent is not disabled
+    if (parentItem.disabled) {
+      parentItem.focusPreviousItem(ctrlKeyPressed);
+      return;
+    }
+    parentItem.setFocus(ctrlKeyPressed);
+  }
+  /**
+   * Focus the last item in its subtree. If the control is not expanded, it
+   * focus the control
+   */
+  async focusLastItem(ctrlKeyPressed) {
+    // Focus the last subitem if expanded and not lazy loading
+    if (!this.leaf && this.expanded) {
+      const lastSubItem = this.el.querySelector(LAST_SUB_ITEM);
+      // The tree item could be empty or downloading subitem, so it is uncertain
+      // if the query won't fail
+      if (lastSubItem) {
+        lastSubItem.focusLastItem(ctrlKeyPressed);
+        return;
+      }
+    }
+    // If the last item is disabled, try to focus the previous sibling
+    if (this.disabled) {
+      this.focusPreviousItem(ctrlKeyPressed);
+      return;
+    }
+    // Otherwise, it focuses the control
+    this.setFocus(ctrlKeyPressed);
+  }
+  /**
+   * Set focus in the control
+   */
+  async setFocus(ctrlKeyPressed) {
+    this.headerRef.focus();
+    // Normal navigation auto selects the item.
+    if (!ctrlKeyPressed) {
+      this.setSelected(false);
+    }
+  }
+  getDirectTreeItems() {
+    return Array.from(this.el.querySelectorAll(DIRECT_TREE_ITEM_CHILDREN));
+  }
+  setResizeObserver() {
+    this.watcher = new ResizeObserver(() => {
+      const distanceToCheckbox = this.el.getBoundingClientRect().height -
+        this.headerRef.getBoundingClientRect().height / 2;
+      this.el.style.setProperty("--distance-to-checkbox", distanceToCheckbox + "px");
+    });
+    this.watcher.observe(this.el);
+    this.watcher.observe(this.headerRef);
+  }
+  disconnectObserver() {
+    if (!this.watcher) {
+      return;
+    }
+    this.watcher.disconnect();
+    this.watcher = null;
+  }
+  lazyLoadItems(expanded) {
+    if (!this.lazyLoad || !expanded) {
+      return;
+    }
+    // Load items
+    this.lazyLoad = false;
+    this.loadLazyContent.emit(this.el.id);
+  }
+  toggleSelected() {
+    const selected = !this.selected;
+    this.selected = selected;
+    this.selectedItemChange.emit({
+      ctrlKeyPressed: true,
+      expanded: this.expanded,
+      goToReference: false,
+      id: this.el.id,
+      itemRef: this.el,
+      parentId: this.el.parentElement.parentElement.id,
+      selected: selected
+    });
+  }
+  setSelected(goToReference) {
+    this.selected = true;
+    this.selectedItemChange.emit({
+      ctrlKeyPressed: false,
+      expanded: this.expanded,
+      goToReference: goToReference,
+      id: this.el.id,
+      itemRef: this.el,
+      parentId: this.el.parentElement.parentElement.id,
+      selected: true
+    });
+  }
+  toggleOrSelect(event) {
+    if (mouseEventModifierKey(event)) {
+      this.toggleSelected();
+    }
+    else {
+      this.setSelected(true);
+    }
+  }
+  componentWillLoad() {
+    const parentElement = this.el.parentElement;
+    // Set item level
+    this.level = parentElement.level;
+    if (!mainTreeRef) {
+      mainTreeRef = parentElement.parentElement;
+    }
+    this.showLines = mainTreeRef.showLines;
+    // Check if must lazy load
+    this.lazyLoadItems(this.expanded);
+    // No need to update more the status
+    if (this.level === 0) {
+      return;
+    }
+    // Update checkbox status
+    const parentElementItem = parentElement.parentElement;
+    if (parentElementItem.checkbox) {
+      this.checked = parentElementItem.checked;
+    }
+  }
+  componentDidLoad() {
+    if (this.lastItem && this.showLines) {
+      this.setResizeObserver();
+    }
+  }
+  disconnectedCallback() {
+    // If it was disconnected on edit mode, remove the body event handler
+    if (this.editing) {
+      this.removeEditMode(false);
+    }
+    this.disconnectObserver();
+  }
+  render() {
+    const evenLevel = this.level % 2 === 0;
+    const expandableButtonVisible = !this.leaf && this.showExpandableButton;
+    const expandableButtonNotVisible = !this.leaf && !this.showExpandableButton;
+    const acceptDrop = !this.leaf && this.dragState !== "start";
+    const hasContent = !this.leaf && !this.lazyLoad;
+    return (h(Host, { role: "treeitem", "aria-selected": this.selected ? "true" : null, class: {
+        [TREE_ITEM_TAG_NAME + "--downloading"]: this.downloading,
+        [TREE_ITEM_TAG_NAME + "--editing"]: this.editing,
+        [TREE_ITEM_TAG_NAME + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
+        [TREE_ITEM_TAG_NAME + "--accept-drop"]: acceptDrop
+      }, style: { "--level": `${this.level}` },
+      // Drag and drop
+      onDrop: acceptDrop ? this.handleDrop : null }, h("button", { "aria-controls": hasContent ? EXPANDABLE_ID : null, "aria-expanded": hasContent ? this.expanded.toString() : null, class: {
+        header: true,
+        "header--selected": this.selected,
+        "header--disabled": this.disabled,
+        "header--expandable-offset": expandableButtonVisible,
+        "header--checkbox-offset": expandableButtonNotVisible && this.checkbox,
+        "header--even": evenLevel,
+        "header--odd": !evenLevel,
+        "header--even-expandable": evenLevel && expandableButtonVisible,
+        "header--odd-expandable": !evenLevel && expandableButtonVisible,
+        "header--level-0": this.level === 0
+      }, part: `header${this.disabled ? " disabled" : ""}${this.selected ? " selected" : ""}`, type: "button", disabled: this.disabled, onClick: this.handleActionClick, onKeyDown: !this.editing ? this.handleActionKeyDown : null,
+      // Drag and drop
+      draggable: true, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd, ref: el => (this.headerRef = el) }, !this.leaf && this.showExpandableButton && (h("button", { type: "button", class: {
+        "expandable-button": true,
+        "expandable-button--expanded": this.expanded,
+        "expandable-button--collapsed": !this.expanded
+      }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), h("div", { class: {
+        action: true,
+        "readonly-mode": !this.editing
+      }, onDblClick: !this.leaf ? this.handleActionDblClick : null }, this.leftImgSrc && this.renderImg("left-img", this.leftImgSrc), this.editing ? (h("input", { class: "edit-name", part: "edit-name", disabled: this.disabled, type: "text", value: this.caption, onBlur: this.removeEditMode(false), onKeyDown: this.checkIfShouldRemoveEditMode, ref: el => (this.inputRef = el) })) : (this.caption), this.rightImgSrc && this.renderImg("right-img", this.rightImgSrc)), this.showDownloadingSpinner && !this.leaf && this.downloading && (h("div", { class: "downloading", part: "downloading" })), this.showLines && this.level !== 0 && (h("div", { class: { "dashed-line": true, "last-dashed-line": this.lastItem }, part: `dashed-line${this.lastItem ? " last-dashed-line" : ""}` }))), hasContent && (h("div", { "aria-busy": this.downloading.toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: { expandable: true, expanded: this.expanded }, part: `expandable${this.expanded ? " expanded" : ""}` }, h("slot", { name: "tree" })))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "checked": ["updateChildrenCheckedValue"],
+    "editing": ["handleEditingChange"],
+    "expanded": ["handleExpandedChange"],
+    "lastItem": ["handleLasItemChange"],
+    "showLines": ["handleShowLinesChange"]
+  }; }
+  static get style() { return treeXListItemCss; }
+}, [1, "ch-tree-x-list-item", {
+    "caption": [1],
+    "checkbox": [4],
+    "checked": [1540],
+    "disabled": [516],
+    "dragState": [1025, "drag-state"],
+    "downloading": [4],
+    "editing": [1028],
+    "expanded": [1028],
+    "lastItem": [4, "last-item"],
+    "lazyLoad": [1028, "lazy-load"],
+    "leaf": [4],
+    "leftImgSrc": [1, "left-img-src"],
+    "level": [1026],
+    "indeterminate": [1028],
+    "rightImgSrc": [1, "right-img-src"],
+    "selected": [1540],
+    "showDownloadingSpinner": [4, "show-downloading-spinner"],
+    "showExpandableButton": [4, "show-expandable-button"],
+    "showLines": [1028, "show-lines"],
+    "toggleCheckboxes": [4, "toggle-checkboxes"],
+    "focusNextItem": [64],
+    "focusNextSibling": [64],
+    "focusPreviousItem": [64],
+    "focusLastItem": [64],
+    "setFocus": [64]
+  }, [[0, "checkboxChange", "updateCheckboxValue"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-tree-x-list-item", "ch-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-tree-x-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTreeXListItem);
+      }
+      break;
+    case "ch-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ChTreeXListItem as C, defineCustomElement as d };

package/dist/components/tree-x-list.js

@@ -0,0 +1,81 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const treeXListCss = ":host{display:grid;grid-auto-rows:min-content;position:relative;width:100%}";
+
+/**
+ * This variable specifies a reference to the main ch-tree-x element
+ */
+let mainTreeRef;
+const ChTreeListX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Level in the tree at which the control is placed.
+     */
+    this.level = 0;
+    /**
+     * `true` to display the relation between tree items and tree lists using
+     * lines.
+     */
+    this.showLines = true;
+    this.updateLastItemDashedLine = () => {
+      const treeItems = this.slotRef.assignedElements();
+      if (treeItems.length === 0) {
+        return;
+      }
+      const lastItemIndex = treeItems.length - 1;
+      for (let i = 0; i < lastItemIndex; i++) {
+        treeItems[i].lastItem = false;
+      }
+      treeItems[lastItemIndex].lastItem = true;
+    };
+  }
+  handleShowLinesChange(newValue) {
+    // Displayed items may have changed since the last time that `showLines === true`
+    if (newValue) {
+      this.updateLastItemDashedLine();
+    }
+  }
+  componentWillLoad() {
+    // Set tree level
+    const parentElement = this.el.parentElement;
+    // Set item level
+    this.level = parentElement.level + 1;
+    // If the mainTreeRef is not defined, the first item that will load this
+    // reference will be the top tree-x-list
+    if (!mainTreeRef) {
+      mainTreeRef = parentElement;
+    }
+    this.showLines = mainTreeRef.showLines;
+  }
+  render() {
+    return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", { onSlotchange: this.showLines && this.level !== 0
+        ? this.updateLastItemDashedLine
+        : null, ref: el => (this.slotRef = el) })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "showLines": ["handleShowLinesChange"]
+  }; }
+  static get style() { return treeXListCss; }
+}, [1, "ch-tree-x-list", {
+    "level": [1026],
+    "showLines": [1028, "show-lines"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-tree-x-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-tree-x-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTreeListX);
+      }
+      break;
+  } });
+}
+
+export { ChTreeListX as C, defineCustomElement as d };