@genexus/genexus-ide-ui 0.0.55 → 0.0.57

package/dist/components/ch-paginator-pages.js

@@ -1,174 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-
-const chPaginatorPagesCss = "button{all:unset}.pages{display:flex;align-items:center;list-style-type:none;margin:0;padding:0}";
-
-const ChPaginatorPages$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.pageChanged = createEvent(this, "pageChanged", 7);
-    /**
-     * The active page number.
-     */
-    this.page = 1;
-    /**
-     * The total number of pages.
-     */
-    this.totalPages = 1;
-    /**
-     * The maximum number of items to display in the pagination.
-     */
-    this.maxSize = 9;
-    /**
-     * Flag to render the first and last pages.
-     */
-    this.renderFirstLastPages = true;
-    /**
-     * The text to display for the dots.
-     */
-    this.textDots = "...";
-    this.clickHandler = (eventInfo) => {
-      const button = eventInfo.target;
-      this.page = parseInt(button.value);
-    };
-  }
-  pageHandler() {
-    this.pageChanged.emit({ page: this.page });
-  }
-  maxSizeHandler() {
-    this.validateMaxSize();
-  }
-  renderFirstLastPagesHandler() {
-    this.validateMaxSize();
-  }
-  componentDidUpdate() {
-    if (document.activeElement === this.el) {
-      this.buttonActive.focus();
-    }
-  }
-  keyDownHandler(eventInfo) {
-    switch (eventInfo.key) {
-      case "ArrowLeft":
-        this.page = Math.max(this.page - 1, 1);
-        break;
-      case "ArrowRight":
-        this.page = Math.min(this.page + 1, this.totalPages);
-        break;
-    }
-  }
-  focusHandler() {
-    this.buttonActive.focus();
-  }
-  getItems() {
-    const padLeft = Math.ceil((this.maxSize - 1) / 2);
-    const padRight = Math.floor((this.maxSize - 1) / 2);
-    let fillLeft, fillStart;
-    let fillRight, fillEnd;
-    if (this.maxSize === 0 || this.maxSize >= this.totalPages) {
-      fillStart = this.fillStart(false);
-      fillLeft = this.page - 1;
-      fillRight = this.totalPages - this.page;
-      fillEnd = this.fillEnd(false);
-    }
-    else if (this.page <= padLeft && this.page < this.totalPages - padRight) {
-      fillStart = this.fillStart(false);
-      fillLeft = this.page - 1;
-      fillEnd = this.fillEnd(true);
-      fillRight = padRight - fillEnd.length + (padLeft - fillLeft);
-    }
-    else if (this.page > padLeft && this.page < this.totalPages - padRight) {
-      fillStart = this.fillStart(true);
-      fillLeft = padLeft - fillStart.length;
-      fillEnd = this.fillEnd(true);
-      fillRight = padRight - fillEnd.length;
-    }
-    else if (this.page > padLeft && this.page >= this.totalPages - padRight) {
-      fillEnd = this.fillEnd(false);
-      fillRight = this.totalPages - this.page;
-      fillStart = this.fillStart(true);
-      fillLeft = padLeft - fillStart.length + padRight - fillRight;
-    }
-    const items = fillStart
-      .concat(this.getRangeItems(this.page - fillLeft, this.page - 1))
-      .concat([this.page])
-      .concat(this.getRangeItems(this.page + 1, this.page + fillRight))
-      .concat(fillEnd);
-    return {
-      items,
-      activeIndex: fillStart.length + fillLeft
-    };
-  }
-  fillStart(render) {
-    if (render) {
-      return this.renderFirstLastPages ? [1, this.textDots] : [this.textDots];
-    }
-    else {
-      return [];
-    }
-  }
-  fillEnd(render) {
-    if (render) {
-      return this.renderFirstLastPages
-        ? [this.textDots, this.totalPages]
-        : [this.textDots];
-    }
-    else {
-      return [];
-    }
-  }
-  getRangeItems(start, end) {
-    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-  }
-  validateMaxSize() {
-    if (this.maxSize > 0) {
-      if (!this.renderFirstLastPages && this.maxSize < 3) {
-        this.maxSize = 3;
-      }
-      else if (this.renderFirstLastPages && this.maxSize < 5) {
-        this.maxSize = 5;
-      }
-    }
-  }
-  render() {
-    const { items, activeIndex } = this.getItems();
-    return (h("ol", { part: "pages", class: "pages" }, items.map((item, i) => {
-      if (typeof item === "number") {
-        return (h("li", null, h("button", { part: `page button ${i === activeIndex ? "active" : ""}`, value: item, onClick: this.clickHandler, ref: el => (this.buttonActive =
-            i === activeIndex ? el : this.buttonActive) }, item)));
-      }
-      else {
-        return (h("li", null, h("button", { part: "page button dots", disabled: true }, item)));
-      }
-    })));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "page": ["pageHandler"],
-    "maxSize": ["maxSizeHandler"],
-    "renderFirstLastPages": ["renderFirstLastPagesHandler"]
-  }; }
-  static get style() { return chPaginatorPagesCss; }
-}, [1, "ch-paginator-pages", {
-    "page": [1538],
-    "totalPages": [514, "total-pages"],
-    "maxSize": [1538, "max-size"],
-    "renderFirstLastPages": [4, "render-first-last-pages"],
-    "textDots": [1, "text-dots"]
-  }, [[1, "keydown", "keyDownHandler"], [1, "focusin", "focusHandler"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-paginator-pages"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-paginator-pages":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChPaginatorPages$1);
-      }
-      break;
-  } });
-}
+import { C as ChPaginatorPages$1, d as defineCustomElement$1 } from './ch-paginator-pages2.js';
 
 const ChPaginatorPages = ChPaginatorPages$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/ch-paginator-pages.entry.js → components/ch-paginator-pages2.js}

@@ -1,10 +1,12 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-0da01575.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
 const chPaginatorPagesCss = "button{all:unset}.pages{display:flex;align-items:center;list-style-type:none;margin:0;padding:0}";
 
-const ChPaginatorPages = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const ChPaginatorPages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.pageChanged = createEvent(this, "pageChanged", 7);
     /**
      * The active page number.
@@ -140,13 +142,32 @@ const ChPaginatorPages = class {
       }
     })));
   }
-  get el() { return getElement(this); }
+  get el() { return this; }
   static get watchers() { return {
     "page": ["pageHandler"],
     "maxSize": ["maxSizeHandler"],
     "renderFirstLastPages": ["renderFirstLastPagesHandler"]
   }; }
-};
-ChPaginatorPages.style = chPaginatorPagesCss;
+  static get style() { return chPaginatorPagesCss; }
+}, [1, "ch-paginator-pages", {
+    "page": [1538],
+    "totalPages": [514, "total-pages"],
+    "maxSize": [1538, "max-size"],
+    "renderFirstLastPages": [4, "render-first-last-pages"],
+    "textDots": [1, "text-dots"]
+  }, [[1, "keydown", "keyDownHandler"], [1, "focusin", "focusHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-paginator-pages"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-paginator-pages":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChPaginatorPages);
+      }
+      break;
+  } });
+}
 
-export { ChPaginatorPages as ch_paginator_pages };
+export { ChPaginatorPages as C, defineCustomElement as d };

package/dist/components/ch-paginator2.js

@@ -102,10 +102,24 @@ const ChPaginator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   loadElements() {
     this.elPages = this.el.querySelector("ch-paginator-pages");
-    this.elFirst = this.el.querySelector("ch-paginator-navigate[type='first']");
-    this.elPrevious = this.el.querySelector("ch-paginator-navigate[type='previous']");
-    this.elNext = this.el.querySelector("ch-paginator-navigate[type='next']");
-    this.elLast = this.el.querySelector("ch-paginator-navigate[type='last']");
+    this.el
+      .querySelectorAll("ch-paginator-navigate")
+      .forEach((el) => {
+      switch (el.type) {
+        case "first":
+          this.elFirst = el;
+          break;
+        case "previous":
+          this.elPrevious = el;
+          break;
+        case "next":
+          this.elNext = el;
+          break;
+        case "last":
+          this.elLast = el;
+          break;
+      }
+    });
   }
   render() {
     if (this.elPages) {

package/dist/components/ch-suggest2.js

@@ -12,6 +12,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
     this.keyEventsDictionary = {
       ArrowDown: (e) => {
         const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN);
@@ -172,8 +173,10 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // 6.COMPONENT LIFECYCLE EVENTS //
   // 7.LISTENERS //
   itemSelectedHandler(event) {
+    event.stopPropagation();
     this.value = event.detail.value;
     this.closeWindow();
+    this.selectionChanged.emit(event.detail);
   }
   focusChangeAttemptHandler(event) {
     const keyEventHandler = this.keyEventsDictionary[event.detail.code];
@@ -196,6 +199,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   windowClosedHandler() {
     this.textInput.focus();
     this.windowHidden = true;
+    this.el.innerHTML = "";
   }
   // 9.PUBLIC METHODS API //
   /**
@@ -223,7 +227,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "cursorEnd": [4, "cursor-end"],
     "windowHidden": [32],
     "selectInputText": [64]
-  }, [[0, "itemSelected", "itemSelectedHandler"], [0, "focusChangeAttempt", "focusChangeAttemptHandler"], [0, "windowClosed", "windowClosedHandler"]]]);
+  }, [[2, "itemSelected", "itemSelectedHandler"], [0, "focusChangeAttempt", "focusChangeAttemptHandler"], [0, "windowClosed", "windowClosedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/ch-test-tree-x.js

@@ -4,10 +4,11 @@ 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 testTreeXCss = "ch-test-tree-x{display:grid;grid-template-columns:500px max-content;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 testTreeXCss = "ch-test-tree-x{display:contents}";
 
 const DEFAULT_DRAG_DISABLED_VALUE = false;
 const DEFAULT_DROP_DISABLED_VALUE = false;
+const DEFAULT_CLASS_VALUE = "tree-view-item";
 const DEFAULT_EXPANDED_VALUE = false;
 const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
@@ -38,7 +39,7 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     /**
      * This property lets you define the model of the ch-tree-x control.
      */
-    this.treeModel = { items: [] };
+    this.treeModel = [];
     /**
      * Set this attribute if you want to allow multi selection of the items.
      */
@@ -49,14 +50,16 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      */
     this.showLines = "none";
     this.handleDroppableZoneEnter = (event) => {
-      const dropInformation = event.detail;
       if (!this.checkDroppableZoneCallback) {
         return;
       }
+      event.stopPropagation();
+      // Suppose the request is made immediately by executing the callback
       const requestTimestamp = new Date().getTime();
+      const dropInformation = event.detail;
       const promise = this.checkDroppableZoneCallback(dropInformation);
       promise.then(validDrop => {
-        this.treeRef.updateValidDroppableZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
+        this.updateValidDropZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
       });
     };
     this.handleSelectedItemsChange = (event) => {
@@ -90,6 +93,10 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       itemInfo.expanded = detail.expanded;
     };
     this.handleItemsDropped = (event) => {
+      if (!this.dropItemsCallback) {
+        return;
+      }
+      event.stopPropagation();
       const dataTransferInfo = event.detail;
       const newContainer = dataTransferInfo.newContainer;
       const newParentId = newContainer.id;
@@ -98,7 +105,7 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         return;
       }
       const draggedItems = dataTransferInfo.draggedItems;
-      if (draggedItems.length === 0 || !this.dropItemsCallback) {
+      if (draggedItems.length === 0) {
         return;
       }
       const promise = this.dropItemsCallback(dataTransferInfo);
@@ -150,9 +157,9 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     this.renderSubModel = (treeSubModel, lastItem, level) => {
       var _a, _b;
-      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
+      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
         treeSubModel.items != null &&
-        treeSubModel.items.length !== 0 && (h("ch-tree-x-list", { slot: "tree", level: level + 1 }, treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))))));
+        treeSubModel.items.length !== 0 && (h("ch-tree-x-list", { slot: "tree" }, treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))))));
     };
     this.flattenItemUIModel = (parentModel) => (item) => {
       var _a, _b, _c, _d;
@@ -162,6 +169,7 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       });
       // Make sure the properties are with their default values to avoid issues
       // when reusing DOM nodes
+      item.class || (item.class = DEFAULT_CLASS_VALUE);
       (_a = item.expanded) !== null && _a !== void 0 ? _a : (item.expanded = DEFAULT_EXPANDED_VALUE);
       (_b = item.indeterminate) !== null && _b !== void 0 ? _b : (item.indeterminate = DEFAULT_INDETERMINATE_VALUE);
       (_c = item.lazy) !== null && _c !== void 0 ? _c : (item.lazy = DEFAULT_LAZY_VALUE);
@@ -178,6 +186,27 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   handleTreeModelChange() {
     this.flattenModel();
   }
+  /**
+   * Given an item id, an array of items to add, the download status and the
+   * lazy state, updates the item's UI Model.
+   */
+  async loadLazyContent(itemId, items, downloading = false, lazy = false) {
+    const itemToLazyLoadContent = this.flattenedLazyTreeModel.get(itemId);
+    // Establish that the content was lazy loaded
+    this.flattenedLazyTreeModel.delete(itemId);
+    itemToLazyLoadContent.downloading = downloading;
+    itemToLazyLoadContent.lazy = lazy;
+    // Check if there is items to add
+    if (items == null) {
+      return;
+    }
+    // @todo What happens in the server when dropping items on a lazy node?
+    itemToLazyLoadContent.items = items;
+    this.sortItems(itemToLazyLoadContent.items);
+    this.flattenSubModel(itemToLazyLoadContent);
+    // Force re-render
+    forceUpdate(this);
+  }
   /**
    * Given an item id, it displays and scrolls into the item view.
    */
@@ -253,6 +282,16 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
     forceUpdate(this);
   }
+  /**
+   * Update the information about the valid droppable zones.
+   * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
+   * @param newContainerId ID of the container where the drag is trying to be made.
+   * @param draggedItems Information about the dragged items.
+   * @param validDrop Current state of the droppable zone.
+   */
+  async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+    this.treeRef.updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop);
+  }
   updateItemProperty(itemUIModel, properties) {
     if (!itemUIModel) {
       return;
@@ -263,36 +302,22 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   loadLazyChildrenHandler(event) {
+    if (!this.lazyLoadTreeItemsCallback) {
+      return;
+    }
     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);
-      });
-    }
+    const promise = this.lazyLoadTreeItemsCallback(treeItemId);
+    event.target.downloading = true;
+    promise.then(result => {
+      this.loadLazyContent(treeItemId, result);
+    });
   }
   handleCaptionModification(event) {
-    event.stopPropagation();
     if (!this.modifyItemCaptionCallback) {
       return;
     }
+    event.stopPropagation();
     const itemRef = event.target;
     const itemId = event.detail.id;
     const itemUIModel = this.flattenedTreeModel.get(itemId);
@@ -340,13 +365,13 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   flattenModel() {
     this.flattenedTreeModel.clear();
     this.flattenedLazyTreeModel.clear();
-    this.flattenSubModel(this.treeModel);
+    this.flattenSubModel({ id: null, caption: null, items: this.treeModel });
   }
   componentWillLoad() {
     this.flattenModel();
   }
   render() {
-    return (h(Host, null, h("ch-tree-x", { multiSelection: this.multiSelection, 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", { level: 0 }, this.treeModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.items.length - 1, 0)))), h("div", { class: "tree-buttons" })));
+    return (h(Host, null, h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0)))));
   }
   static get watchers() { return {
     "treeModel": ["handleTreeModelChange"]
@@ -354,20 +379,23 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return testTreeXCss; }
 }, [0, "ch-test-tree-x", {
     "checkDroppableZoneCallback": [16],
+    "cssClass": [1, "css-class"],
     "dragDisabled": [4, "drag-disabled"],
     "dropDisabled": [4, "drop-disabled"],
     "dropItemsCallback": [16],
-    "treeModel": [1040],
+    "treeModel": [16],
     "lazyLoadTreeItemsCallback": [16],
     "modifyItemCaptionCallback": [16],
-    "multiSelection": [1028, "multi-selection"],
+    "multiSelection": [4, "multi-selection"],
     "showLines": [1, "show-lines"],
     "sortItemsCallback": [16],
     "waitDropProcessing": [32],
+    "loadLazyContent": [64],
     "scrollIntoVisible": [64],
     "toggleItems": [64],
     "updateAllItemsProperties": [64],
-    "updateItemsProperties": [64]
+    "updateItemsProperties": [64],
+    "updateValidDropZone": [64]
   }, [[0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/checkbox.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { D as DISABLED_CLASS } from './reserverd-names.js';
 
-const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, #000);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px #00000040}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:#000;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
+const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
 
 const CHECKBOX_ID = "checkbox";
 const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;

package/dist/components/combo-box.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as formMessageLogic } from './form.js';
+import { a as formMessageLogic, b as formTooltipLogic } from './form.js';
 import { r as repositionScroll } from './reposition-scroll.js';
 import { K as KeyboardKeys } from './types.js';
 import { e as exportParts } from './export-parts.js';
@@ -28,7 +28,7 @@ function mutationObserverRemoved(target, ref) {
     return observer; // Return the observer instance if needed
 }
 
-const comboBoxCss = "/*! 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}.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{font-family:var(--font-family-primary);display:block}:host gxg-form-text::part(input){padding-inline-end:var(--spacing-comp-05)}:host gxg-form-text.clear-icon::part(input){padding-inline-end:calc(var(--spacing-comp-05) * 2)}:host .main-container{width:100%;position:relative;}:host .main-container .label{font-size:var(--font-size-sm);margin-bottom:var(--spacing-lay-xs)}:host .main-container .search-container{flex:1;position:relative}:host .main-container .search-container .buttons-wrapper{position:absolute;top:2px;height:calc(100% - 4px);display:flex;align-items:center;padding-inline-start:var(--spacing-comp-01);inset-inline-end:2px}:host .main-container .search-container .buttons-wrapper .button-icon{height:20px;width:20px}:host .main-container .items-container{border:var(--border-width-sm) solid var(--gxg-border-color--regular);border-radius:var(--border-radius-md);border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;overflow-y:auto;overscroll-behavior:contain;background-color:var(--color-background);position:fixed;width:inherit;box-sizing:border-box;z-index:999;display:none;}:host .main-container .items-container::-webkit-scrollbar{width:6px;height:6px}:host .main-container .items-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .main-container .items-container--show{display:block}:host .main-container .items-container--no-match{display:none}:host .main-container .items-container .no-ocurrences-found{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);padding:var(--spacing-comp-01);background-color:var(--color-background)}:host .main-container .items-container .no-ocurrences-found span{display:block;color:var(--gray-04)}:host .main-container .items-container.exact-match{overflow-y:hidden}:host .main-container .items-container--above{transform:translateY(calc(-100% - 24px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-md);border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:0;border-bottom-left-radius:0}:host .search-and-items-container{flex:1}:host([label-position=start]) .main-container{display:flex;flex-direction:row}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large) .main-container .label{display:flex;font-size:var(--font-size-lg);margin-bottom:var(--spacing-lay-xs);line-height:1.455em}:host(.large) .main-container .items-container .no-ocurrences-found{font-size:var(--font-size-lg)}";
+const comboBoxCss = "/*! 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}.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{font-family:var(--font-family-primary);display:block}:host gxg-form-text::part(input){padding-inline-end:var(--spacing-comp-05)}:host gxg-form-text.clear-icon::part(input){padding-inline-end:calc(var(--spacing-comp-05) * 2)}:host .main-container{width:100%;position:relative;}:host .main-container .outer-wrapper{display:flex;gap:var(--spacing-comp-01);align-items:center}:host .main-container .label{font-size:var(--font-size-sm);margin-bottom:var(--spacing-lay-xs)}:host .main-container .search-container{flex:1;position:relative}:host .main-container .search-container .buttons-wrapper{position:absolute;top:2px;height:calc(100% - 4px);display:flex;align-items:center;padding-inline-start:var(--spacing-comp-01);inset-inline-end:2px}:host .main-container .search-container .buttons-wrapper .button-icon{height:20px;width:20px}:host .main-container .items-container{border:var(--border-width-sm) solid var(--gxg-border-color--regular);border-radius:var(--border-radius-md);border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;overflow-y:auto;overscroll-behavior:contain;background-color:var(--color-background);position:fixed;width:inherit;box-sizing:border-box;z-index:999;display:none;}:host .main-container .items-container::-webkit-scrollbar{width:6px;height:6px}:host .main-container .items-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .main-container .items-container--show{display:block}:host .main-container .items-container--no-match{display:none}:host .main-container .items-container .no-ocurrences-found{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);padding:var(--spacing-comp-01);background-color:var(--color-background)}:host .main-container .items-container .no-ocurrences-found span{display:block;color:var(--gray-04)}:host .main-container .items-container.exact-match{overflow-y:hidden}:host .main-container .items-container--above{transform:translateY(calc(-100% - 24px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-md);border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:0;border-bottom-left-radius:0}:host .search-and-items-container{flex:1}:host([label-position=start]) .main-container{display:flex;flex-direction:row}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large) .main-container .label{display:flex;font-size:var(--font-size-lg);margin-bottom:var(--spacing-lay-xs);line-height:1.455em}:host(.large) .main-container .items-container .no-ocurrences-found{font-size:var(--font-size-lg)}";
 
 const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -45,6 +45,10 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       toggleButton: "toggle-button",
     };
     this.componentDidLoadFlag = false;
+    /**
+     * The presence of this attribute displays a tooltip message, instead of a block message below the control
+     */
+    this.toolTip = false;
     /**
      * The presence of this attribute makes the input disabled
      */
@@ -599,16 +603,17 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const clearIcon = this.value && !this.disableFilter && !this.disableClear;
     return (h(Host, { class: {
         "gxg-combo-box--disabled": this.disableFilter,
+        tooltip: this.toolTip,
         large: state.large,
       }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
         "main-container": true,
-      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: "start", readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
+      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "outer-wrapper" }, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: "start", readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
         "items-container": true,
         "items-container--show": this.listIsOpen,
         "items-container--no-match": this.noMatch,
         "items-container--below": this.listPosition === "below",
         "items-container--above": this.listPosition === "above",
-      }, style: { maxHeight: this.listMaxHeight }, ref: (el) => (this.itemsContainer = el) }, h("slot", null), this.noMatch && this.strict ? (h("div", { class: "no-ocurrences-found" }, "No occurrences found", h("span", null, "ctrl/cmd + backspace to erase"))) : null))), this.formMessageLogic(this)));
+      }, style: { maxHeight: this.listMaxHeight }, ref: (el) => (this.itemsContainer = el) }, h("slot", null), this.noMatch && this.strict ? (h("div", { class: "no-ocurrences-found" }, "No occurrences found", h("span", null, "ctrl/cmd + backspace to erase"))) : null)), this.toolTip ? formTooltipLogic(this) : null)), !this.toolTip ? formMessageLogic(this) : null));
   }
   static get delegatesFocus() { return true; }
   get el() { return this; }
@@ -621,6 +626,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return comboBoxCss; }
 }, [17, "gxg-combo-box", {
+    "toolTip": [4, "tool-tip"],
     "fixedIcon": [1, "fixed-icon"],
     "disabled": [4],
     "label": [1],

package/dist/components/config.js

@@ -0,0 +1,7 @@
+/* The purpose of config is to provide a simple way to change options/settings that are generally applied on all the components*/
+const config = {
+  // tooltip is a property that exists on some gemini controls. When set to true, it will display the error/warning/success message (if any) by using a tooltip, instead of displaying the message under the control. The tooltip prevents changes on the component total height, which is desired.
+  tooltip: true
+};
+
+export { config as c };