@genexus/genexus-ide-ui 0.0.45 → 0.0.47

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

@@ -0,0 +1,393 @@
+import { proxyCustomElement, HTMLElement, h, forceUpdate, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './checkbox.js';
+import { d as defineCustomElement$4 } from './tree-x.js';
+import { d as defineCustomElement$3 } from './tree-x-list.js';
+import { d as defineCustomElement$2 } from './tree-x-list-item.js';
+
+const treeViewCss = "gxg-tree-view{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;height:100%}.tree-buttons{display:grid;grid-auto-rows:max-content;row-gap:8px}:not(.ch-tree-x-dragging-item) ch-tree-x-list-item:not([selected])::part(header):hover{background-color:#e8e8e9}.ch-tree-x-list-item--drag-enter{background-color:#eee;box-shadow:inset 0 0 1px 0px black}.ch-tree-x-list-item--drag-enter[selected]::part(header){background-color:#eee}ch-tree-x-list-item::part(header){border:1px solid transparent}ch-tree-x-list-item[selected]::part(header){background-color:#cfdee6;border-color:#0266a0}ch-tree-x-list-item.ch-tree-x-list-item--editing::part(header){background-color:rgba(207, 222, 230, 0.5);border-color:transparent}ch-tree-x-list-item:not(.ch-tree-x-list-item--editing)::part(header):focus-visible{border-color:black;z-index:1}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
+
+const DEFAULT_EXPANDED_VALUE = false;
+const DEFAULT_INDETERMINATE_VALUE = false;
+const DEFAULT_LAZY_VALUE = false;
+const DEFAULT_SELECTED_VALUE = false;
+const ChTestTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    // UI Models
+    this.flattenedTreeModel = new Map();
+    this.selectedItems = new Set();
+    this.flattenedLazyTreeModel = new Map();
+    /**
+     * This property lets you specify if the tree is waiting to process the drop
+     * of items.
+     */
+    this.waitDropProcessing = false;
+    /**
+     * This property lets you define the model of the ch-tree-x control.
+     */
+    this.treeModel = { items: [] };
+    /**
+     * Set this attribute if you want to allow multi selection of the items.
+     */
+    this.multiSelection = false;
+    /**
+     * `true` to display the relation between tree items and tree lists using
+     * lines.
+     */
+    this.showLines = "none";
+    this.handleDroppableZoneEnter = (event) => {
+      const dropInformation = event.detail;
+      if (!this.checkDroppableZoneCallback) {
+        return;
+      }
+      const requestTimestamp = new Date().getTime();
+      const promise = this.checkDroppableZoneCallback(dropInformation);
+      promise.then((validDrop) => {
+        this.treeRef.updateValidDroppableZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
+      });
+    };
+    this.handleSelectedItemsChange = (event) => {
+      const itemsToProcess = new Map(event.detail);
+      // Remove no longer selected items
+      this.selectedItems.forEach((selectedItemId) => {
+        const itemUIModel = this.flattenedTreeModel.get(selectedItemId).item;
+        const itemIsStillSelected = itemsToProcess.get(selectedItemId);
+        // The item does not need to be added. Remove it from the processed list
+        if (itemIsStillSelected) {
+          itemUIModel.expanded = itemIsStillSelected.expanded; // Update expanded state
+          itemsToProcess.delete(selectedItemId);
+        }
+        // The item must be un-selected in the UI Model
+        else {
+          itemUIModel.selected = false;
+          this.selectedItems.delete(selectedItemId);
+        }
+      });
+      // Add new selected items
+      itemsToProcess.forEach((newSelectedItemInfo, itemId) => {
+        const newSelectedItem = this.flattenedTreeModel.get(itemId).item;
+        newSelectedItem.selected = true;
+        newSelectedItem.expanded = newSelectedItemInfo.expanded;
+        this.selectedItems.add(itemId);
+      });
+    };
+    this.handleExpandedItemChange = (event) => {
+      const detail = event.detail;
+      const itemInfo = this.flattenedTreeModel.get(detail.id).item;
+      itemInfo.expanded = detail.expanded;
+    };
+    this.handleItemsDropped = (event) => {
+      const dataTransferInfo = event.detail;
+      const newContainer = dataTransferInfo.newContainer;
+      const newParentId = newContainer.id;
+      // Check if the parent exists in the UI Model
+      if (!this.flattenedTreeModel.get(newParentId)) {
+        return;
+      }
+      const draggedItems = dataTransferInfo.draggedItems;
+      if (draggedItems.length === 0 || !this.dropItemsCallback) {
+        return;
+      }
+      const promise = this.dropItemsCallback(dataTransferInfo);
+      this.waitDropProcessing = true;
+      promise.then((response) => {
+        this.waitDropProcessing = false;
+        if (!response.acceptDrop) {
+          return;
+        }
+        const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
+        // Only move the items to the new parent, keeping the state
+        if (dataTransferInfo.dropInTheSameTree) {
+          // Add the UI models to the new container and remove the UI models from
+          // the old containers
+          draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
+        }
+        // Add the new items
+        else {
+          if (response.items == null) {
+            return;
+          }
+          // Add new items to the parent
+          newParentUIModel.items.push(...response.items);
+          // Flatten the new UI models
+          response.items.forEach(this.flattenItemUIModel(newParentUIModel));
+        }
+        this.sortItems(newParentUIModel.items);
+        // Open the item to visualize the new subitems
+        newParentUIModel.expanded = true;
+        // There is no need to force and update, since the waitDropProcessing
+        // prop was modified
+      });
+    };
+    this.moveItemToNewParent = (newParentUIModel) => (dataTransferInfo) => {
+      const itemUIModelExtended = this.flattenedTreeModel.get(dataTransferInfo.id);
+      const item = itemUIModelExtended.item;
+      const oldParentItem = itemUIModelExtended.parentItem;
+      // Remove the UI model from the previous parent
+      oldParentItem.items.splice(oldParentItem.items.indexOf(item), 1);
+      // Add the UI Model to the new parent
+      newParentUIModel.items.push(item);
+      // Reference the new parent in the item
+      itemUIModelExtended.parentItem = newParentUIModel;
+    };
+    this.renderSubModel = (treeSubModel) => (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
+      treeSubModel.items != null &&
+      treeSubModel.items.length !== 0 && (h("ch-tree-x-list", { slot: "tree" }, treeSubModel.items.map(this.renderSubModel)))));
+    this.flattenItemUIModel = (parentModel) => (item) => {
+      this.flattenedTreeModel.set(item.id, {
+        parentItem: parentModel,
+        item: item,
+      });
+      // Make sure the properties are with their default values to avoid issues
+      // when reusing DOM nodes
+      item.expanded =
+        item.expanded == null ? DEFAULT_EXPANDED_VALUE : item.expanded;
+      item.indeterminate =
+        item.indeterminate == null
+          ? DEFAULT_INDETERMINATE_VALUE
+          : item.indeterminate;
+      item.lazy = item.lazy == null ? DEFAULT_LAZY_VALUE : item.lazy;
+      item.selected =
+        item.selected == null ? DEFAULT_SELECTED_VALUE : item.selected;
+      if (item.lazy) {
+        this.flattenedLazyTreeModel.set(item.id, item);
+      }
+      if (item.selected) {
+        this.selectedItems.add(item.id);
+      }
+      this.flattenSubModel(item);
+    };
+  }
+  handleTreeModelChange() {
+    this.flattenModel();
+  }
+  /**
+   * Given an item id, it displays and scrolls into the item view.
+   */
+  async scrollIntoVisible(treeItemId) {
+    const itemUIModel = this.flattenedTreeModel.get(treeItemId);
+    if (!itemUIModel) {
+      // @todo Check if the item is on the server?
+      return;
+    }
+    let visitedNode = itemUIModel.parentItem;
+    // While the parent is not the root, update the UI Models
+    while (visitedNode && visitedNode.id != null) {
+      // Expand the item
+      visitedNode.expanded = true;
+      const visitedNodeUIModel = this.flattenedTreeModel.get(visitedNode.id);
+      visitedNode = visitedNodeUIModel.parentItem;
+    }
+    forceUpdate(this);
+    // @todo For some reason, when the model is created using the "big model" option,
+    // this implementation does not work when only the UI Model is updated. So, to
+    // expand the items, we have to delegate the responsibility to the tree-x
+    this.treeRef.scrollIntoVisible(treeItemId);
+  }
+  /**
+   * This method is used to toggle a tree item by the tree item id/ids.
+   *
+   * @param treeItemIds An array id the tree items to be toggled.
+   * @param expand A boolean indicating that the tree item should be expanded or collapsed. (optional)
+   * @returns The modified items after the method was called.
+   */
+  async toggleItems(treeItemIds, expand) {
+    if (!treeItemIds) {
+      return [];
+    }
+    const modifiedTreeItems = [];
+    treeItemIds.forEach((treeItemId) => {
+      const itemInfo = this.flattenedTreeModel.get(treeItemId).item;
+      if (itemInfo) {
+        itemInfo.expanded = expand !== null && expand !== void 0 ? expand : !itemInfo.expanded;
+        modifiedTreeItems.push({
+          id: itemInfo.id,
+          expanded: itemInfo.expanded,
+        });
+      }
+    });
+    // Force re-render
+    forceUpdate(this);
+    return modifiedTreeItems;
+  }
+  /**
+   * Given a subset of item's properties, it updates all item UI models.
+   */
+  async updateAllItemsProperties(properties) {
+    [...this.flattenedTreeModel.values()].forEach((itemUIModel) => {
+      if (properties.expanded != null) {
+        itemUIModel.item.expanded = properties.expanded;
+      }
+      if (properties.checked != null) {
+        itemUIModel.item.checked = properties.checked;
+        itemUIModel.item.indeterminate = false;
+      }
+    });
+    forceUpdate(this);
+  }
+  /**
+   * Given a item list and the properties to update, it updates the properties
+   * of the items in the list.
+   */
+  async updateItemsProperties(items, properties) {
+    items.forEach((item) => {
+      const itemUIModel = this.flattenedTreeModel.get(item);
+      this.updateItemProperty(itemUIModel, properties);
+    });
+    forceUpdate(this);
+  }
+  updateItemProperty(itemUIModel, properties) {
+    if (!itemUIModel) {
+      return;
+    }
+    const itemInfo = itemUIModel.item;
+    Object.keys(properties).forEach((propertyName) => {
+      itemInfo[propertyName] = properties[propertyName];
+    });
+  }
+  loadLazyChildrenHandler(event) {
+    event.stopPropagation();
+    const treeItemId = event.detail;
+    if (this.lazyLoadTreeItemsCallback) {
+      const promise = this.lazyLoadTreeItemsCallback(treeItemId);
+      const itemRef = event.target;
+      itemRef.downloading = true;
+      promise.then((result) => {
+        const itemToLazyLoadContent = this.flattenedLazyTreeModel.get(treeItemId);
+        // Establish that the content was lazy loaded
+        this.flattenedLazyTreeModel.delete(treeItemId);
+        itemToLazyLoadContent.lazy = false;
+        itemRef.downloading = false;
+        // Check if there is items to add
+        if (result == null) {
+          return;
+        }
+        // @todo What happens in the server when dropping items on a lazy node?
+        itemToLazyLoadContent.items = result;
+        this.sortItems(itemToLazyLoadContent.items);
+        this.flattenSubModel(itemToLazyLoadContent);
+        // Force re-render
+        forceUpdate(this);
+      });
+    }
+  }
+  handleCaptionModification(event) {
+    event.stopPropagation();
+    if (!this.modifyItemCaptionCallback) {
+      return;
+    }
+    const itemRef = event.target;
+    const itemId = event.detail.id;
+    const itemUIModel = this.flattenedTreeModel.get(itemId);
+    const itemInfo = itemUIModel.item;
+    const newCaption = event.detail.caption;
+    const oldCaption = itemInfo.caption;
+    // Optimistic UI: Update the caption in the UI Model before the change is
+    // completed in the server
+    itemInfo.caption = newCaption;
+    // Due to performance reasons, we don't make a shallow copy of the
+    // treeModel to force a re-render
+    itemRef.caption = newCaption;
+    const promise = this.modifyItemCaptionCallback(itemId, newCaption);
+    promise.then((status) => {
+      if (status.success) {
+        this.sortItems(itemUIModel.parentItem.items);
+        // Force re-render
+        forceUpdate(this);
+      }
+      else {
+        itemRef.caption = oldCaption;
+        itemInfo.caption = oldCaption;
+        // Do something with the error message
+      }
+    });
+  }
+  flattenSubModel(model) {
+    const items = model.items;
+    if (!items) {
+      // Make sure that subtrees don't have an undefined array
+      if (model.leaf === false) {
+        model.items = [];
+      }
+      return;
+    }
+    this.sortItems(items);
+    items.forEach(this.flattenItemUIModel(model));
+  }
+  sortItems(items) {
+    // Ensure that items are sorted
+    if (this.sortItemsCallback) {
+      this.sortItemsCallback(items);
+    }
+  }
+  flattenModel() {
+    this.flattenedTreeModel.clear();
+    this.flattenedLazyTreeModel.clear();
+    this.flattenSubModel(this.treeModel);
+  }
+  componentWillLoad() {
+    this.flattenModel();
+  }
+  render() {
+    return (h(Host, null, h("ch-tree-x", { multiSelection: this.multiSelection,
+      // showLines={this.showLines}
+      waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: (el) => (this.treeRef = el) }, h("ch-tree-x-list", null, this.treeModel.items.map(this.renderSubModel))), h("div", { class: "tree-buttons" })));
+  }
+  static get watchers() { return {
+    "treeModel": ["handleTreeModelChange"]
+  }; }
+  static get style() { return treeViewCss; }
+}, [0, "gxg-tree-view", {
+    "checkDroppableZoneCallback": [16],
+    "dropItemsCallback": [16],
+    "treeModel": [1040],
+    "lazyLoadTreeItemsCallback": [16],
+    "modifyItemCaptionCallback": [16],
+    "multiSelection": [1028, "multi-selection"],
+    "showLines": [1025, "show-lines"],
+    "sortItemsCallback": [16],
+    "waitDropProcessing": [32],
+    "scrollIntoVisible": [64],
+    "toggleItems": [64],
+    "updateAllItemsProperties": [64],
+    "updateItemsProperties": [64]
+  }, [[0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tree-view", "ch-checkbox", "ch-tree-x", "ch-tree-x-list", "ch-tree-x-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tree-view":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTestTreeX);
+      }
+      break;
+    case "ch-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ch-tree-x":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-tree-x-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-tree-x-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgTreeView = ChTestTreeX;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgTreeView, defineCustomElement };

package/dist/components/helpers.js

@@ -18,5 +18,14 @@ var MouseEventButtons;
   MouseEventButtons[MouseEventButtons["BACK"] = 8] = "BACK";
   MouseEventButtons[MouseEventButtons["FORWARD"] = 16] = "FORWARD";
 })(MouseEventButtons || (MouseEventButtons = {}));
+function focusComposedPath() {
+  const composedPath = [];
+  let root = document;
+  while (root && root.activeElement) {
+    composedPath.push(root.activeElement);
+    root = root.activeElement.shadowRoot;
+  }
+  return composedPath.reverse();
+}
 
-export { MouseEventButton as M, mouseEventHasButtonPressed as a, MouseEventButtons as b, mouseEventModifierKey as m };
+export { MouseEventButton as M, mouseEventHasButtonPressed as a, MouseEventButtons as b, focusComposedPath as f, mouseEventModifierKey as m };

package/dist/components/index.js

@@ -18,6 +18,7 @@ export { ChGridColumnDisplay, defineCustomElement as defineCustomElementChGridCo
 export { ChGridColumnResize, defineCustomElement as defineCustomElementChGridColumnResize } from './ch-grid-column-resize.js';
 export { ChGridColumnSettings, defineCustomElement as defineCustomElementChGridColumnSettings } from './ch-grid-column-settings.js';
 export { ChGridColumnset, defineCustomElement as defineCustomElementChGridColumnset } from './ch-grid-columnset.js';
+export { ChGridInfiniteScroll, defineCustomElement as defineCustomElementChGridInfiniteScroll } from './ch-grid-infinite-scroll.js';
 export { ChGridRowActions, defineCustomElement as defineCustomElementChGridRowActions } from './ch-grid-row-actions.js';
 export { ChGridRowsetEmpty, defineCustomElement as defineCustomElementChGridRowsetEmpty } from './ch-grid-rowset-empty.js';
 export { ChGridRowsetLegend, defineCustomElement as defineCustomElementChGridRowsetLegend } from './ch-grid-rowset-legend.js';
@@ -158,6 +159,7 @@ export { GxgTooltip, defineCustomElement as defineCustomElementGxgTooltip } from
 export { GxgTree, defineCustomElement as defineCustomElementGxgTree } from './gxg-tree.js';
 export { GxgTreeGridDivs, defineCustomElement as defineCustomElementGxgTreeGridDivs } from './gxg-tree-grid-divs.js';
 export { GxgTreeItem, defineCustomElement as defineCustomElementGxgTreeItem } from './gxg-tree-item.js';
+export { GxgTreeView, defineCustomElement as defineCustomElementGxgTreeView } from './gxg-tree-view.js';
 export { GxgWindow, defineCustomElement as defineCustomElementGxgWindow } from './gxg-window.js';
 
 function appGlobalScript () {

package/dist/components/list-box-item.js

@@ -8,7 +8,7 @@ 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 listBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:block;font-family:var(--font-family-primary);font-size:inherit;color:inherit;display:flex;box-sizing:border-box;align-items:center;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;outline:none}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-02);width:100%;height:var(--gxg-list-item-height--spaced);box-sizing:border-box}:host .icon{margin-inline-end:var(--spacing-comp-01);flex-shrink:0}:host gxg-form-checkbox{margin-inline-end:var(--spacing-comp-01)}:host gxg-form-checkbox::part(box){outline:none}:host(:not([disabled])){cursor:pointer !important}:host(:hover:not([selected])){background-color:var(--gxg-background-color-item-hover)}:host(.has-icon.no-checkbox) .container{padding-inline-start:var(--spacing-comp-01)}.description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}:host([highlighted]){background-color:var(--gxg-background-color-item-selected);color:var(--color-on-background)}:host([selected]){background-color:var(--gxg-background-color-item-active);color:var(--gxg-color-item-active)}:host(.large) .container{padding:var(--spacing-comp-01)}";
+const listBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--gxg-background-color--disabled) !important;color:var(--gxg-color--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:block;font-family:var(--font-family-primary);font-size:inherit;color:inherit;display:flex;box-sizing:border-box;align-items:center;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;outline:none;border-bottom:1px solid transparent}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-02);width:100%;height:var(--gxg-list-item-height--spaced);box-sizing:border-box}:host .icon{margin-inline-end:var(--spacing-comp-01);flex-shrink:0}:host gxg-form-checkbox{margin-inline-end:var(--spacing-comp-01)}:host gxg-form-checkbox::part(box){outline:none}:host(:not([disabled])){cursor:pointer !important}:host([disabled]){pointer-events:none}:host(:hover:not([selected])){background-color:var(--gxg-background-color--hover)}:host(.has-icon.no-checkbox) .container{padding-inline-start:var(--spacing-comp-01)}.description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}:host([active]){outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px;background-color:var(--gxg-background-color--hover);color:var(--gxg-color--hover)}:host([selected]){background-color:var(--gxg-background-color--selected);color:var(--gxg-color--selected);border-bottom-color:var(--color-secondary-hover)}:host([selected]:hover){background-color:var(--gxg-background-color--selected-hover)}:host(:not([sibling-is-selected])){border-bottom-color:transparent}:host(.large) .container{padding:var(--spacing-comp-01)}";
 
 const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -30,6 +30,10 @@ const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      * The presence of this attribute sets this item as selected
      */
     this.selected = false;
+    /**
+     * This property is for internal use
+     */
+    this.siblingIsSelected = false;
     /**
      * The presence of this attribute sets this item as highlighted
      */
@@ -71,19 +75,9 @@ const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       const exportPartsResult = exportParts(part, this.parts);
       exportPartsResult.length && (this.exportparts = exportPartsResult);
     };
-    this.getIndex = () => {
-      const listBox = this.el.parentElement;
-      const listBoxItems = listBox.querySelectorAll("gxg-list-box-item");
-      const itemIndex = Array.from(listBoxItems).findIndex((item) => {
-        return item === this.el;
-      });
-      if (itemIndex !== -1) {
-        return itemIndex;
-      }
-      else {
-        return undefined;
-      }
-    };
+  }
+  watchPropHandler() {
+    this.itemSelected.emit();
   }
   checkboxChangedHandler(e) {
     const checked = e.detail.value;
@@ -97,8 +91,8 @@ const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (this.disabled) {
       return "disabled";
     }
-    else if (this.selected || this.highlighted || this.mouseOver) {
-      return "negative";
+    else if (this.selected) {
+      return "primary-enabled";
     }
     else {
       return "auto";
@@ -111,13 +105,12 @@ const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.itemLoaded.emit();
   }
   itemClickedFunc(e) {
-    const index = this.getIndex();
     this.itemClicked.emit({
       clickedItem: this.el,
       ctrlKey: e.ctrlKey,
       cmdKey: e.metaKey,
       shiftKey: e.shiftKey,
-      index: index,
+      index: this.index,
     });
   }
   onMouseOver() {
@@ -138,11 +131,15 @@ const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: { container: true, "form-element": true } }, this.checkbox && !this.disabled ? (h("gxg-form-checkbox", { tabindex: "-1", checked: this.checked, onClick: this.handleCheckboxClick, disabled: this.disabled, part: this.parts.checkbox })) : null, this.icon !== undefined ? (h("gxg-icon", { class: "icon", color: this.iconColor(), size: "regular", type: this.icon })) : null, h("div", { class: "description" }, h("slot", null)))));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "selected": ["watchPropHandler"]
+  }; }
   static get style() { return listBoxItemCss; }
 }, [1, "gxg-list-box-item", {
     "disabled": [516],
     "icon": [1],
     "selected": [516],
+    "siblingIsSelected": [516, "sibling-is-selected"],
     "highlighted": [516],
     "active": [516],
     "index": [514],