@genexus/genexus-ide-ui 0.0.56 → 0.0.58

package/dist/esm/ch-suggest_4.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 import { s as state } from './store-c2650ca5.js';
-import { a as formMessageLogic } from './form-5e68671c.js';
+import { a as formMessageLogic } from './form-9c41f579.js';
 import { f as formClasses, c as commonClassesNames } from './classesNames-6cd8fadb.js';
 
 const chSuggestCss = "*,::after,::before{box-sizing:border-box}:host{--window-max-height:none;--window-gap:50px}.main-wrapper{display:block}.label-input-wrapper{display:flex}.label-input-wrapper .input{flex:1}:host([label-position=start]) .label-input-wrapper{flex-direction:row}:host([label-position=above]) .label-input-wrapper{flex-direction:column}.input{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0}.ch-window-container{position:relative}ch-window::part(window){width:100%;max-height:calc(var(--window-max-height) - var(--window-gap));overflow-y:auto}";
@@ -11,6 +11,7 @@ const ChSuggest = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
     this.keyEventsDictionary = {
       ArrowDown: (e) => {
         const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN$1);
@@ -171,8 +172,10 @@ const ChSuggest = class {
   // 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];
@@ -195,6 +198,7 @@ const ChSuggest = class {
   windowClosedHandler() {
     this.textInput.focus();
     this.windowHidden = true;
+    this.slot.innerHTML = "";
   }
   // 9.PUBLIC METHODS API //
   /**
@@ -206,7 +210,7 @@ const ChSuggest = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
+    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty, ref: el => (this.slot = el) })))));
   }
   static get delegatesFocus() { return true; }
   get el() { return getElement(this); }
@@ -311,7 +315,7 @@ const ChSuggestListItem = class {
 };
 ChSuggestListItem.style = chSuggestListItemCss;
 
-const stylesCss = "@charset \"UTF-8\";: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(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}ch-suggest{font-family:var(--font-family-primary);font-size:var(--font-size-lg);color:var(--color-on-background);}ch-suggest::-webkit-scrollbar{width:6px;height:6px}ch-suggest::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest ::-webkit-scrollbar{width:6px;height:6px}ch-suggest ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(label){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;display:flex;align-items:center;cursor:default;font-size:inherit}ch-suggest[label-position=start]::part(label){margin-inline-end:var(--gxg-label-margin-horizontal)}ch-suggest[label-position=above]::part(label){margin-block-end:var(--gxg-label-margin-vertical)}ch-suggest::part(input){height:var(--spacing-comp-05);border:var(--border-width-sm) solid var(--gxg-border-color--regular);padding:var(--spacing-comp-01) var(--spacing-comp-02);box-sizing:border-box;background-color:var(--color-background)}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(header){display:block;padding-block-end:var(--spacing-comp-02);display:flex;justify-content:flex-end}ch-suggest::part(close-button){height:var(--spacing-comp-05);width:var(--spacing-comp-05);background-color:var(--color-background);color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-sizing:border-box;cursor:pointer;display:block}ch-suggest::part(close-button):hover{background-color:var(--color-primary-hover-opacity-01)}ch-suggest::part(close-button)::after{content:\"✖\";width:100%;display:block;line-height:24px;text-align:center}ch-suggest::part(close-button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(dropdown){background-color:var(--color-background);margin-top:var(--spacing-comp-01);padding:var(--spacing-comp-02);box-shadow:var(--box-shadow-02);}ch-suggest::part(dropdown)::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(dropdown) ::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown) ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}gxg-suggest.gxg-validation--success ch-suggest::part(input){outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--success ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input){outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input){outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-error-dark)}gxg-suggest.gxg--disabled ch-suggest{pointer-events:none}gxg-suggest.gxg--disabled ch-suggest::part(input){background-color:var(--gray-01);color:var(--color-on-disabled)}gxg-suggest[ellipsis]:not([ellipsis=false]) ch-suggest-list-item::part(content-wrapper){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}ch-suggest-list{margin-block-start:var(--spacing-comp-02);font-family:inherit;border:var(--border-width-sm) solid var(--gxg-border-color--regular)}ch-suggest-list:first-child{margin-block-start:0}ch-suggest-list:last-child{margin-block-end:0}ch-suggest-list::part(title){text-transform:uppercase;font-weight:var(--font-weight-semibold);margin:var(--spacing-comp-01) 0 0 0;padding:var(--spacing-comp-01) var(--spacing-comp-02)}ch-suggest-list:first-child{margin-block-start:0}ch-suggest-list+ch-suggest-list{margin-block-start:0;border-block-start:0}ch-suggest-list+ch-suggest-list::part(title){margin-block-start:0}ch-suggest-list-item{}ch-suggest-list-item::part(button){padding:var(--spacing-comp-01) var(--spacing-comp-02);align-items:center;gap:var(--spacing-comp-01);box-sizing:border-box}ch-suggest-list-item::part(button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest-list-item::part(description)::before{content:\" - \"}ch-suggest-list-item gxg-icon::part(ch-icon){--icon-size:16px;margin-right:2px}ch-suggest-list-item:hover{background-color:var(--gxg-background-color--hover)}";
+const stylesCss = "@charset \"UTF-8\";: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(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}.tooltip-outer-wrapper{display:grid;grid-template-columns:0fr;transition:grid-template-columns var(--timing-02)}:host(.tooltip--visible) .tooltip-outer-wrapper{grid-template-columns:1fr}.tooltip-inner-wrapper gxg-icon{display:flex;position:relative !important;top:0 !important;transform:none !important}ch-suggest{font-family:var(--font-family-primary);font-size:var(--font-size-lg);color:var(--color-on-background);}ch-suggest::-webkit-scrollbar{width:6px;height:6px}ch-suggest::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest ::-webkit-scrollbar{width:6px;height:6px}ch-suggest ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(label){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;display:flex;align-items:center;cursor:default;font-size:inherit}ch-suggest[label-position=start]::part(label){margin-inline-end:var(--gxg-label-margin-horizontal)}ch-suggest[label-position=above]::part(label){margin-block-end:var(--gxg-label-margin-vertical)}ch-suggest::part(input){height:var(--spacing-comp-05);border:var(--border-width-sm) solid var(--gxg-border-color--regular);padding:var(--spacing-comp-01) var(--spacing-comp-02);box-sizing:border-box;background-color:var(--color-background)}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(header){display:block;padding-block-end:var(--spacing-comp-02);display:flex;justify-content:flex-end}ch-suggest::part(close-button){height:var(--spacing-comp-05);width:var(--spacing-comp-05);background-color:var(--color-background);color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-sizing:border-box;cursor:pointer;display:block}ch-suggest::part(close-button):hover{background-color:var(--color-primary-hover-opacity-01)}ch-suggest::part(close-button)::after{content:\"✖\";width:100%;display:block;line-height:24px;text-align:center}ch-suggest::part(close-button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(dropdown){background-color:var(--color-background);margin-top:var(--spacing-comp-01);padding:var(--spacing-comp-02);box-shadow:var(--box-shadow-02);}ch-suggest::part(dropdown)::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(dropdown) ::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown) ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}gxg-suggest.gxg-validation--success ch-suggest::part(input){outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--success ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input){outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input){outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-error-dark)}gxg-suggest.gxg--disabled ch-suggest{pointer-events:none}gxg-suggest.gxg--disabled ch-suggest::part(input){background-color:var(--gray-01);color:var(--color-on-disabled)}gxg-suggest[ellipsis]:not([ellipsis=false]) ch-suggest-list-item::part(content-wrapper){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}ch-suggest-list{margin-block-start:var(--spacing-comp-02);font-family:inherit;border:var(--border-width-sm) solid var(--gxg-border-color--regular)}ch-suggest-list:first-child{margin-block-start:0}ch-suggest-list:last-child{margin-block-end:0}ch-suggest-list::part(title){text-transform:uppercase;font-weight:var(--font-weight-semibold);margin:var(--spacing-comp-01) 0 0 0;padding:var(--spacing-comp-01) var(--spacing-comp-02)}ch-suggest-list:first-child{margin-block-start:0}ch-suggest-list+ch-suggest-list{margin-block-start:0;border-block-start:0}ch-suggest-list+ch-suggest-list::part(title){margin-block-start:0}ch-suggest-list-item{}ch-suggest-list-item::part(button){padding:var(--spacing-comp-01) var(--spacing-comp-02);align-items:center;gap:var(--spacing-comp-01);box-sizing:border-box}ch-suggest-list-item::part(button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest-list-item::part(description)::before{content:\" - \"}ch-suggest-list-item gxg-icon::part(ch-icon){--icon-size:16px;margin-right:2px}ch-suggest-list-item:hover{background-color:var(--gxg-background-color--hover)}";
 
 const GxgSuggest = class {
   constructor(hostRef) {

package/dist/esm/ch-test-suggest.entry.js

@@ -0,0 +1,80 @@
+import { h, r as registerInstance, H as Host } from './index-0da01575.js';
+
+/**
+ * @description This function converts SelectorCategoryData[] SuggestData
+ */
+const convertObjectDataToSuggestData = (selectorCategoriesData) => {
+  const suggestData = {
+    suggestItems: null,
+    suggestLists: []
+  };
+  if (selectorCategoriesData.length) {
+    selectorCategoriesData.forEach(selectorCategory => {
+      const suggestList = {
+        label: selectorCategory.name,
+        items: []
+      };
+      selectorCategory.items.forEach((objectData) => {
+        const suggestItem = {
+          value: objectData.id,
+          description: objectData.description,
+          icon: objectData.icon
+        };
+        suggestList.items.push(suggestItem);
+      });
+      suggestData.suggestLists.push(suggestList);
+    });
+  }
+  return suggestData;
+};
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const renderSuggestLists = (suggestData) => {
+  if (suggestData === null || suggestData === void 0 ? void 0 : suggestData.suggestLists.length) {
+    const randomNumber = Math.random();
+    const result = suggestData.suggestLists.map((list) => {
+      return (h("ch-suggest-list", { label: list.label, key: randomNumber }, list.items.map((item) => {
+        return renderSuggestListsItem(item);
+      })));
+    });
+    return result;
+  }
+  return null;
+};
+const renderSuggestListsItem = (suggestItem) => {
+  return (h("ch-suggest-list-item", { value: suggestItem.value }, [suggestItem.description || suggestItem.value]));
+};
+
+const testSuggestCss = ":host{display:block}:root{--highlight-color:rgb(163, 25, 161)}ch-suggest{display:block}ch-suggest::part(title){display:block;font-weight:bold}ch-suggest::part(label){font-weight:500}ch-suggest[label-position=\"start\"]::part(label){margin-inline-end:8px;display:flex;align-items:center}ch-suggest[label-position=\"above\"]::part(label){margin-block-end:4px}ch-suggest::part(close-button){display:block;width:16px;height:16px}ch-suggest::part(close-button)::after{content:\"✖\";line-height:8px;height:100%;display:block;border:1px solid black;cursor:pointer;text-align:center;line-height:16px}ch-suggest::part(header){display:flex;justify-content:space-between;align-items:center;margin-block-end:8px}ch-suggest::part(ch-window-close){width:10px;height:10px}ch-suggest::part(input){padding:4px 8px;border:1px solid black}ch-suggest::part(input):focus{outline:2px solid var(--highlight-color);border-color:var(--highlight-color)}ch-suggest-list{background-color:rgba(234, 234, 234, 0.224);border:1px solid rgba(128, 128, 128, 0.275);border-radius:4px;padding:8px;margin-block-end:4px}ch-suggest-list::part(title){font-size:14px;font-weight:bold;text-transform:uppercase;margin:4px 0 8px 0}ch-suggest-list-item::part(button){padding:4px 8px;cursor:pointer;gap:4px}ch-suggest-list-item ch-icon{--icon-size:16px;margin-inline-end:2px}ch-suggest-list-item:hover{background-color:var(--ch-color--violet-100)}ch-suggest-list-item:focus,ch-suggest-list-item[selected]:focus{outline:2px solid var(--highlight-color)}ch-suggest-list-item[selected]{background-color:rgba(241, 184, 243, 0.42);outline:none}ch-suggest-list-item::part(button):focus{outline:2px solid var(--highlight-color);border-color:var(--highlight-color)}ch-suggest-list-item::part(content-wrapper){display:flex;gap:8px}ch-suggest::part(dropdown){margin-block-start:4px;border:1px solid black;background-color:white;padding:8px}:focus{outline-style:none !important}";
+
+const ChTestSuggest = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // 5.EVENTS (EMIT) //
+    // 6.COMPONENT LIFECYCLE EVENTS //
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    /**
+     * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
+     */
+    this.selectObjectValueChangedHandler = async (e) => {
+      const value = e.detail;
+      this.selectorSourceCallback(value)
+        .then(result => {
+        /* show suggestions*/
+        this.objectsSuggestions = convertObjectDataToSuggestData(result);
+      })
+        .catch(() => {
+        // to do
+      });
+    };
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, null, h("ch-suggest", { onValueChanged: this.selectObjectValueChangedHandler, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))));
+  }
+};
+ChTestSuggest.style = testSuggestCss;
+
+export { ChTestSuggest as ch_test_suggest };

package/dist/esm/ch-test-tree-x.entry.js

@@ -1,20 +1,25 @@
-import { r as registerInstance, h, f as forceUpdate, H as Host } from './index-0da01575.js';
+import { r as registerInstance, c as createEvent, h, f as forceUpdate } from './index-0da01575.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_EDITABLE_ITEMS_VALUE = true;
 const DEFAULT_EXPANDED_VALUE = false;
 const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
+const DEFAULT_ORDER_VALUE = 0;
 const DEFAULT_SELECTED_VALUE = false;
 const ChTestTreeX = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
+    this.itemOpenReference = createEvent(this, "itemOpenReference", 7);
+    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     // 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.
@@ -22,39 +27,47 @@ const ChTestTreeX = class {
     this.waitDropProcessing = false;
     /**
      * This attribute lets you specify if the drag operation is disabled in all
-     * items by default. If `true`, the control can't be dragged.
+     * items by default. If `true`, the items can't be dragged.
      */
     this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
     /**
      * This attribute lets you specify if the drop operation is disabled in all
-     * items by default. If `true`, the control won't accept any drops.
+     * items by default. If `true`, the items won't accept any drops.
      */
     this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
     /**
      * 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.
      */
     this.multiSelection = false;
+    /**
+     * This attribute lets you specify if the edit operation is enabled in all
+     * items by default. If `true`, the items can edit its caption in place.
+     */
+    this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
     /**
      * `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;
       }
+      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) => {
+      event.stopPropagation();
       const itemsToProcess = new Map(event.detail);
       // Remove no longer selected items
       this.selectedItems.forEach(selectedItemId => {
@@ -78,13 +91,22 @@ const ChTestTreeX = class {
         newSelectedItem.expanded = newSelectedItemInfo.expanded;
         this.selectedItems.add(itemId);
       });
+      this.selectedItemsChange.emit(event.detail);
     };
     this.handleExpandedItemChange = (event) => {
       const detail = event.detail;
       const itemInfo = this.flattenedTreeModel.get(detail.id).item;
       itemInfo.expanded = detail.expanded;
     };
+    this.handleItemContextmenu = (event) => {
+      event.stopPropagation();
+      this.itemContextmenu.emit(event.detail);
+    };
     this.handleItemsDropped = (event) => {
+      if (!this.dropItemsCallback) {
+        return;
+      }
+      event.stopPropagation();
       const dataTransferInfo = event.detail;
       const newContainer = dataTransferInfo.newContainer;
       const newParentId = newContainer.id;
@@ -93,7 +115,7 @@ const ChTestTreeX = class {
         return;
       }
       const draggedItems = dataTransferInfo.draggedItems;
-      if (draggedItems.length === 0 || !this.dropItemsCallback) {
+      if (draggedItems.length === 0) {
         return;
       }
       const promise = this.dropItemsCallback(dataTransferInfo);
@@ -144,26 +166,25 @@ const ChTestTreeX = class {
       itemUIModelExtended.parentItem = newParentUIModel;
     };
     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 &&
+      var _a, _b, _c;
+      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, editable: (_c = treeSubModel.editable) !== null && _c !== void 0 ? _c : this.editableItems, 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.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
     };
     this.flattenItemUIModel = (parentModel) => (item) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e;
       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.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);
-      (_d = item.selected) !== null && _d !== void 0 ? _d : (item.selected = DEFAULT_SELECTED_VALUE);
-      if (item.lazy) {
-        this.flattenedLazyTreeModel.set(item.id, item);
-      }
+      (_d = item.order) !== null && _d !== void 0 ? _d : (item.order = DEFAULT_ORDER_VALUE);
+      (_e = item.selected) !== null && _e !== void 0 ? _e : (item.selected = DEFAULT_SELECTED_VALUE);
       if (item.selected) {
         this.selectedItems.add(item.id);
       }
@@ -173,6 +194,26 @@ const ChTestTreeX = class {
   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.flattenedTreeModel.get(itemId).item;
+    // Establish that the content was lazy loaded
+    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.
    */
@@ -248,6 +289,16 @@ const ChTestTreeX = class {
     });
     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;
@@ -258,36 +309,22 @@ const ChTestTreeX = class {
     });
   }
   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);
@@ -314,11 +351,15 @@ const ChTestTreeX = class {
       }
     });
   }
+  handleOpenReference(event) {
+    event.stopPropagation();
+    this.itemOpenReference.emit(event.detail);
+  }
   flattenSubModel(model) {
     const items = model.items;
     if (!items) {
       // Make sure that subtrees don't have an undefined array
-      if (model.leaf === false) {
+      if (model.leaf !== true) {
         model.items = [];
       }
       return;
@@ -334,14 +375,13 @@ const ChTestTreeX = class {
   }
   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("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, 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"]

package/dist/esm/ch-tooltip.entry.js

@@ -0,0 +1,81 @@
+import { r as registerInstance, h, H as Host } from './index-0da01575.js';
+import { f as focusComposedPath } from './helpers-1ecd5e26.js';
+
+const tooltipCss = "*,::after,::before{box-sizing:border-box}ch-tooltip{--ch-tooltip-separation:12px;--ch-tooltip-separation-x:var(--ch-tooltip-separation);--ch-tooltip-separation-y:var(--ch-tooltip-separation);--ch-tooltip-arrow-size:10px;--ch-tooltip-based:calc( 1px - var(--ch-tooltip-arrow-size));--ch-tooltip-centered:calc( 50% - var(--ch-tooltip-arrow-size) / 2);--ch-tooltip-75:calc( 75% - var(--ch-tooltip-arrow-size) / 2);--ch-tooltip-25:calc( 25% - var(--ch-tooltip-arrow-size) / 2);display:flex;position:relative;width:100%;height:100%}ch-tooltip:not([hidden]){display:contents}ch-window[y-align=outside-start]{--ch-window-separation:var(--ch-tooltip-separation-y);--ch-window-separation-y:calc(var(--ch-tooltip-separation-y) * -1)}ch-window[y-align=outside-end]{--ch-window-separation:var(--ch-tooltip-separation-y);--ch-window-separation-y:var(--ch-tooltip-separation-y)}ch-window[x-align=outside-start]+:not(ch-window[y-align=outside-start],ch-window[y-align=outside-end]){--ch-window-separation:var(--ch-tooltip-separation-x);--ch-window-separation-x:calc(var(--ch-tooltip-separation-x) * -1)}ch-window[x-align=outside-end]+:not(ch-window[y-align=outside-start],ch-window[y-align=outside-end]){--ch-window-separation:var(--ch-tooltip-separation-x);--ch-window-separation-x:var(--ch-tooltip-separation-x)}ch-window[y-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-end] .tooltip-content::after{clip-path:polygon(0 0, 50% 100%, 100% 0);inset-block-end:var(--ch-tooltip-based)}ch-window[y-align=outside-start][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-start][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-end][x-align=outside-start] .tooltip-content::after{inset-inline-end:0}ch-window[y-align=outside-start][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-start][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-end][x-align=outside-end] .tooltip-content::after{inset-inline-start:0}ch-window[y-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-start] .tooltip-content::after{clip-path:polygon(50% 0, 100% 100%, 0 100%);inset-block-start:var(--ch-tooltip-based)}ch-window[y-align=outside-end][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-end][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-start][x-align=outside-start] .tooltip-content::after{inset-inline-end:0}ch-window[y-align=outside-end][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-end][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-start][x-align=outside-end] .tooltip-content::after{inset-inline-start:0}ch-window[x-align=outside-start] .tooltip-content::after{clip-path:polygon(100% 50%, 0 0, 0 100%);inset-inline-end:var(--ch-tooltip-based)}ch-window[x-align=outside-end] .tooltip-content::after{clip-path:polygon(100% 0, 0 50%, 100% 100%);inset-inline-start:var(--ch-tooltip-based)}ch-window[x-align=center] .tooltip-content::after{inset-inline-start:var(--ch-tooltip-centered)}ch-window[x-align=inside-start] .tooltip-content::after{inset-inline-start:var(--ch-tooltip-75)}ch-window[x-align=inside-end] .tooltip-content::after{inset-inline-start:var(--ch-tooltip-25)}ch-window[y-align=inside-start] .tooltip-content::after{inset-block-start:var(--ch-tooltip-75)}ch-window[y-align=center] .tooltip-content::after{inset-block-start:var(--ch-tooltip-centered)}ch-window[y-align=inside-end] .tooltip-content::after{inset-block-start:var(--ch-tooltip-25)}.tooltip-content::after{content:\" \";position:absolute;background-color:inherit;width:var(--ch-tooltip-arrow-size);height:var(--ch-tooltip-arrow-size)}";
+
+const mapTooltipAlignToChWindowAlign = {
+  OutsideStart: "outside-start",
+  InsideStart: "inside-start",
+  Center: "center",
+  InsideEnd: "inside-end",
+  OutsideEnd: "outside-end"
+};
+const EXPORT_PARTS = "window:section,mask";
+const ChTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Determines if the window and the tooltip is hidden or visible.
+     * Inherited from ch-window.
+     */
+    this.hidden = true;
+    /**
+     * Specifies the tooltip description.
+     */
+    this.tooltipId = "Tooltip";
+    /**
+     * Specifies the delay (in ms)
+     * for the tooltip to be displayed.
+     */
+    this.delay = 100;
+    /**
+     * Specifies the position of the tooltip relative to
+     * the container element.
+     */
+    this.position = "OutsideStart_Center";
+    this.showWithDelay = () => {
+      setTimeout(() => {
+        this.hidden = false;
+      }, this.delay);
+    };
+    this.handleEnter = () => {
+      if (!this.hidden) {
+        return;
+      }
+      this.showWithDelay();
+    };
+    this.handleLeave = () => {
+      if (this.container === focusComposedPath()[0]) {
+        this.hidden = false;
+      }
+      this.hidden = true;
+    };
+    this.addListeners = () => {
+      this.container.addEventListener("focus", this.handleEnter);
+      this.container.addEventListener("focusout", this.handleLeave);
+      this.container.addEventListener("mouseenter", this.handleEnter);
+      this.container.addEventListener("mouseleave", this.handleLeave);
+    };
+    this.removeListeners = () => {
+      this.container.removeEventListener("focus", this.handleEnter);
+      this.container.removeEventListener("focusout", this.handleLeave);
+      this.container.removeEventListener("mouseenter", this.handleEnter);
+      this.container.removeEventListener("mouseleave", this.handleLeave);
+    };
+  }
+  componentDidLoad() {
+    this.container = document.querySelector('[slot="container"] > :first-child');
+    this.addListeners();
+  }
+  disconnectedCallback() {
+    this.removeListeners();
+  }
+  render() {
+    const aligns = this.position.split("_");
+    const alignX = aligns[0];
+    const alignY = aligns[1];
+    return (h(Host, null, h("slot", { name: "container" }), h("ch-window", { exportparts: EXPORT_PARTS, "show-header": false, "show-footer": false, modal: false, "close-on-escape": true, hidden: this.hidden, container: this.container, xAlign: mapTooltipAlignToChWindowAlign[alignX], yAlign: mapTooltipAlignToChWindowAlign[alignY] }, h("div", { role: "tooltip", class: "tooltip-content", id: this.tooltipId }, h("slot", { name: "content" })))));
+  }
+};
+ChTooltip.style = tooltipCss;
+
+export { ChTooltip as ch_tooltip };

package/dist/esm/config-94445cc2.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 };

package/dist/esm/{form-5e68671c.js → form-9c41f579.js}

@@ -34,5 +34,18 @@ function formMessageLogic(comp) {
             : null;
     }
 }
+function formTooltipLogic(comp) {
+    {
+        const color = comp.validationStatus;
+        return (
+        // <div class="tooltip-outer-wrapper">
+        comp.validationStatus !== "indeterminate" &&
+            comp.validationMessage.length > 0 ? (h("div", { class: "tooltip-inner-wrapper" },
+            h("gxg-tooltip", { label: comp.validationMessage, noBorder: true, alignEnd: true, flex: true, fixed: true },
+                h("gxg-icon", { color: color, type: `gemini-tools/${comp.validationStatus}` })))) : null
+        // </div>
+        );
+    }
+}
 
-export { formMessageLogic as a, formMessage as f, requiredLabel as r };
+export { formMessageLogic as a, formTooltipLogic as b, formMessage as f, requiredLabel as r };