@genexus/genexus-ide-ui 0.0.85 → 0.0.86

package/dist/components/gx-ide-object-selector.js

@@ -5,35 +5,36 @@ import { r as renderComboItems } from './render-combo-items.js';
 import { f as formatDate } from './helpers2.js';
 import { g as gridCommon } from './grid.js';
 import { F as FILTER_AFTER } from './constants.js';
-import { d as defineCustomElement$s } from './ch-grid2.js';
-import { d as defineCustomElement$r } from './ch-grid-column2.js';
-import { d as defineCustomElement$q } from './ch-grid-column-resize2.js';
-import { d as defineCustomElement$p } from './ch-grid-column-settings2.js';
-import { d as defineCustomElement$o } from './ch-grid-columnset2.js';
-import { d as defineCustomElement$n } from './ch-grid-settings2.js';
-import { d as defineCustomElement$m } from './ch-grid-settings-columns2.js';
-import { d as defineCustomElement$l } from './icon.js';
-import { d as defineCustomElement$k } from './ch-shortcuts2.js';
-import { d as defineCustomElement$j } from './ch-window2.js';
-import { d as defineCustomElement$i } from './ch-window-close2.js';
-import { d as defineCustomElement$h } from './container.js';
-import { d as defineCustomElement$g } from './entity-selector.js';
-import { d as defineCustomElement$f } from './title.js';
-import { d as defineCustomElement$e } from './button.js';
-import { d as defineCustomElement$d } from './combo-box.js';
-import { d as defineCustomElement$c } from './combo-box-item.js';
-import { d as defineCustomElement$b } from './date-picker.js';
-import { d as defineCustomElement$a } from './form-checkbox.js';
-import { d as defineCustomElement$9 } from './form-text.js';
-import { d as defineCustomElement$8 } from './gxg-grid2.js';
-import { d as defineCustomElement$7 } from './icon2.js';
+import { d as defineCustomElement$t } from './ch-grid2.js';
+import { d as defineCustomElement$s } from './ch-grid-column2.js';
+import { d as defineCustomElement$r } from './ch-grid-column-resize2.js';
+import { d as defineCustomElement$q } from './ch-grid-column-settings2.js';
+import { d as defineCustomElement$p } from './ch-grid-columnset2.js';
+import { d as defineCustomElement$o } from './ch-grid-settings2.js';
+import { d as defineCustomElement$n } from './ch-grid-settings-columns2.js';
+import { d as defineCustomElement$m } from './icon.js';
+import { d as defineCustomElement$l } from './ch-shortcuts2.js';
+import { d as defineCustomElement$k } from './ch-window2.js';
+import { d as defineCustomElement$j } from './ch-window-close2.js';
+import { d as defineCustomElement$i } from './container.js';
+import { d as defineCustomElement$h } from './entity-selector.js';
+import { d as defineCustomElement$g } from './title.js';
+import { d as defineCustomElement$f } from './button.js';
+import { d as defineCustomElement$e } from './combo-box.js';
+import { d as defineCustomElement$d } from './combo-box-item.js';
+import { d as defineCustomElement$c } from './date-picker.js';
+import { d as defineCustomElement$b } from './form-checkbox.js';
+import { d as defineCustomElement$a } from './form-text.js';
+import { d as defineCustomElement$9 } from './gxg-grid2.js';
+import { d as defineCustomElement$8 } from './icon2.js';
+import { d as defineCustomElement$7 } from './ide-loader.js';
 import { d as defineCustomElement$6 } from './gxg-label2.js';
 import { d as defineCustomElement$5 } from './shortcuts.js';
 import { d as defineCustomElement$4 } from './text.js';
 import { d as defineCustomElement$3 } from './title2.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const objectSelectorCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}.layout{display:grid;gap:var(--spacing-comp-05);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--spacing-comp-05)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01);height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.filter-grid{display:grid;padding:var(--spacing-comp-03);row-gap:var(--gx-ide-grid-row-gap);column-gap:var(--gx-ide-grid-column-gap);border-block-start:1px solid var(--gx-ide-container-border-color);border-block-end:1px solid var(--gx-ide-container-border-color);grid-template-columns:1fr 1fr;grid-template-areas:\"pattern type\" \"category module-folder\" \"modified-row modified-row\"}.filter-grid .pattern{grid-area:pattern}.filter-grid .type{grid-area:type}.filter-grid .category{grid-area:category}.filter-grid .module-folder{grid-area:module-folder}.filter-grid .modified-row{grid-area:modified-row}.filter-grid--no-title{border-top:0}.modified-row{min-height:24px;display:flex;align-items:center;gap:var(--gx-ide-grid-column-gap);flex:1}.modified-row__inner-wrapper{display:flex;align-items:center;gap:var(--gx-ide-grid-column-gap);flex:1}.modified-row__inner-wrapper .date-time{display:flex;align-items:center}.modified-row .user{max-width:205px !important}.modified-row .date-time{flex:1}ch-grid-cell{--spacing-comp-02:var(--spacing-comp-03)}.objects-count{display:flex;justify-content:space-around}.objects-count>*{flex:1;padding:var(--spacing-comp-01)}.objects-count>:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}";
+const objectSelectorCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}.layout{display:grid;gap:var(--spacing-comp-05);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--spacing-comp-05)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01);height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.filter-grid{display:grid;padding:var(--spacing-comp-03);row-gap:var(--gx-ide-grid-row-gap);column-gap:var(--gx-ide-grid-column-gap);border-block-start:1px solid var(--gx-ide-container-border-color);border-block-end:1px solid var(--gx-ide-container-border-color);grid-template-columns:1fr 1fr;grid-template-areas:\"pattern type\" \"category module-folder\" \"modified-row modified-row\"}.filter-grid .pattern{grid-area:pattern}.filter-grid .type{grid-area:type}.filter-grid .category{grid-area:category}.filter-grid .module-folder{grid-area:module-folder}.filter-grid .modified-row{grid-area:modified-row}.filter-grid--no-title{border-top:0}.modified-row{min-height:24px;display:flex;align-items:center;gap:var(--gx-ide-grid-column-gap);flex:1}.modified-row__inner-wrapper{display:flex;align-items:center;gap:var(--gx-ide-grid-column-gap);flex:1}.modified-row__inner-wrapper .date-time{display:flex;align-items:center}.modified-row .user{max-width:205px !important}.modified-row .date-time{flex:1}.grid-container{height:100%}ch-grid-cell{--spacing-comp-02:var(--spacing-comp-03)}.objects-count{display:flex;justify-content:space-around}.objects-count>*{flex:1;padding:var(--spacing-comp-01)}.objects-count>:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}";
 
 const GxIdeObjectSelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -45,57 +46,8 @@ const GxIdeObjectSelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.renderedFirstTime = false;
     this.shortcutsSrc = getAssetPath(`./gx-ide-assets/object-selector/shortcuts.json`);
     // 9.LOCAL METHODS //
-    this.renderFilter = () => {
-      var _a, _b;
-      return (h("div", { part: "filters-container", class: {
-          "filter-grid": true,
-          "filter-grid--no-title": !this.displayTitle
-        }, slot: "header" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.pattern, ref: (el) => (this.filterPatternEl = el), value: this.patternValue, class: "pattern", part: "filter-pattern" }), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.type, value: this.defaultType, disabled: !this.types, "display-validation-styles": true, "display-validation-message": true, ref: (el) => (this.filterTypeEl = el), class: "type", part: "filter-type" }, renderComboItems((_a = this.types) !== null && _a !== void 0 ? _a : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.category, value: this.defaultCategory, disabled: !this.categories, "display-validation-styles": true, "display-validation-message": true, ref: (el) => (this.filterCategoryEl = el), class: "category", part: "filter-category" }, renderComboItems((_b = this.categories) !== null && _b !== void 0 ? _b : [])), h("gx-ide-entity-selector", { label: this._componentLocale.filter.module, "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module-folder" }), h("div", { class: "modified-row" }, h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, class: "align-center", ref: (el) => (this.filterModifiedEl = el), part: "filter-modified" }), h("div", { class: "modified-row__inner-wrapper" }, h("gxg-combo-box", { class: {
-          "gxi-hidden": !this.filterModified,
-          "combo-modified": true
-        }, "disable-filter": true, value: this.filterAfterType, "display-validation-styles": true, "display-validation-message": true, ref: (el) => (this.filterAfterTypeEl = el), part: "filter-after-type" }, renderComboItems([
-        {
-          id: FILTER_AFTER.NONE,
-          label: this._componentLocale.filter.afterNone,
-          value: FILTER_AFTER.NONE
-        },
-        {
-          id: FILTER_AFTER.DATE_TIME,
-          label: this._componentLocale.filter[FILTER_AFTER.DATE_TIME],
-          value: FILTER_AFTER.DATE_TIME
-        },
-        {
-          id: FILTER_AFTER.IMPORT,
-          label: this._componentLocale.filter[FILTER_AFTER.IMPORT],
-          value: FILTER_AFTER.IMPORT
-        },
-        {
-          id: FILTER_AFTER.LAST_BUILD,
-          label: this._componentLocale.filter[FILTER_AFTER.LAST_BUILD],
-          value: FILTER_AFTER.LAST_BUILD
-        }
-      ])), h("gxg-form-text", { class: {
-          "gxi-hidden": !this.filterModified,
-          "user": true
-        }, "label-position": "start", label: this._componentLocale.filter.user, "max-width": "150px", ref: (el) => (this.filterUserEl = el), part: "filter-user" }), h("div", { class: {
-          "date-time": true,
-          "gxi-hidden": !this.filterModified ||
-            this.filterAfterType !== FILTER_AFTER.DATE_TIME
-        }, part: "filter-datetime" }, h("gxg-label", { "label-position": "start" }, this._componentLocale.filter.dateTime), h("gxg-date-picker", { ref: (el) => (this.filterModifiedDateEl = el), class: "date-time" }))))));
-    };
-    this.renderObjects = () => {
-      return (h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { rowSelectionMode: this.multiSelection ? "multiple" : "single", ref: (el) => (this.chGridEl = el), onKeyDown: this.chGridKeyDownHandler, part: "ch-grid-objects" }, h("ch-grid-columnset", null, h("ch-grid-column", { "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.name, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.type, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.module, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.description, "column-name-position": "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.modifiedDate, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.importDate, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto })), this.objects
-        .sort((a, b) => {
-        const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();
-        if (nameA < nameB) {
-          return -1;
-        }
-        if (nameA > nameB) {
-          return 1;
-        }
-        return 0;
-      })
-        .map((obj) => (h("ch-grid-row", { rowid: obj.id, onDblClick: this.openSelectionCallbackHandler }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-icon", { type: obj.icon, color: "auto" }))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, " ", obj.name, " ")), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.type)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.module)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.description)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.modifiedDate, "date-time")}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.importDate, "date-time")}`))))))));
+    this.loaderCancelCallbackHandler = async () => {
+      this.cancelCallbackHandler();
     };
     this.getObjects = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -114,17 +66,27 @@ const GxIdeObjectSelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
           ? (_h = this.filterModifiedDateEl) === null || _h === void 0 ? void 0 : _h.value
           : null
       };
-      this.loadCallback(filters).then((items) => {
-        this.objects = items;
-        this.selectedObjectsIds = [];
-        this.deselectAll();
-      });
+      if (this.loadCallback) {
+        if (this.loader) {
+          this.loaderEl.show = true;
+        }
+        this.loadCallback(filters).then((items) => {
+          if (items) {
+            this.objects = items;
+          }
+          this.selectedObjectsIds = [];
+          this.deselectAll();
+          if (this.loader) {
+            this.loaderEl.show = false;
+          }
+        });
+      }
     };
     this.openSelectionCallbackHandler = (e) => {
       e.stopPropagation();
       this.openSelectionCallback(this.selectedObjectsIds);
     };
-    this.cancelCallbackHandle = () => {
+    this.cancelCallbackHandler = () => {
       this.cancelCallback();
     };
     this.selectAll = () => {
@@ -208,11 +170,65 @@ const GxIdeObjectSelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         return `${this.objects.length} ${this._componentLocale.objCount.matching.many}`;
       }
     };
+    // 9.LOCAL METHODS  -> RENDER//
+    this.renderFilter = () => {
+      var _a, _b;
+      return (h("div", { part: "filters-container", class: {
+          "filter-grid": true,
+          "filter-grid--no-title": !this.displayTitle
+        }, slot: "header" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.pattern, ref: (el) => (this.filterPatternEl = el), value: this.patternValue, class: "pattern", part: "filter-pattern" }), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.type, value: this.defaultType, disabled: !this.types, "display-validation-styles": true, "display-validation-message": true, ref: (el) => (this.filterTypeEl = el), class: "type", part: "filter-type" }, renderComboItems((_a = this.types) !== null && _a !== void 0 ? _a : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.category, value: this.defaultCategory, disabled: !this.categories, "display-validation-styles": true, "display-validation-message": true, ref: (el) => (this.filterCategoryEl = el), class: "category", part: "filter-category" }, renderComboItems((_b = this.categories) !== null && _b !== void 0 ? _b : [])), h("gx-ide-entity-selector", { label: this._componentLocale.filter.module, "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module-folder" }), h("div", { class: "modified-row" }, h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, class: "align-center", ref: (el) => (this.filterModifiedEl = el), part: "filter-modified" }), h("div", { class: "modified-row__inner-wrapper" }, h("gxg-combo-box", { class: {
+          "gxi-hidden": !this.filterModified,
+          "combo-modified": true
+        }, "disable-filter": true, value: this.filterAfterType, "display-validation-styles": true, "display-validation-message": true, ref: (el) => (this.filterAfterTypeEl = el), part: "filter-after-type" }, renderComboItems([
+        {
+          id: FILTER_AFTER.NONE,
+          label: this._componentLocale.filter.afterNone,
+          value: FILTER_AFTER.NONE
+        },
+        {
+          id: FILTER_AFTER.DATE_TIME,
+          label: this._componentLocale.filter[FILTER_AFTER.DATE_TIME],
+          value: FILTER_AFTER.DATE_TIME
+        },
+        {
+          id: FILTER_AFTER.IMPORT,
+          label: this._componentLocale.filter[FILTER_AFTER.IMPORT],
+          value: FILTER_AFTER.IMPORT
+        },
+        {
+          id: FILTER_AFTER.LAST_BUILD,
+          label: this._componentLocale.filter[FILTER_AFTER.LAST_BUILD],
+          value: FILTER_AFTER.LAST_BUILD
+        }
+      ])), h("gxg-form-text", { class: {
+          "gxi-hidden": !this.filterModified,
+          "user": true
+        }, "label-position": "start", label: this._componentLocale.filter.user, "max-width": "150px", ref: (el) => (this.filterUserEl = el), part: "filter-user" }), h("div", { class: {
+          "date-time": true,
+          "gxi-hidden": !this.filterModified ||
+            this.filterAfterType !== FILTER_AFTER.DATE_TIME
+        }, part: "filter-datetime" }, h("gxg-label", { "label-position": "start" }, this._componentLocale.filter.dateTime), h("gxg-date-picker", { ref: (el) => (this.filterModifiedDateEl = el), class: "date-time" }))))));
+    };
+    this.renderObjects = () => {
+      return (h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { rowSelectionMode: this.multiSelection ? "multiple" : "single", ref: (el) => (this.chGridEl = el), onKeyDown: this.chGridKeyDownHandler, part: "ch-grid-objects" }, h("ch-grid-columnset", null, h("ch-grid-column", { "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.name, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.type, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.module, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.description, "column-name-position": "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.modifiedDate, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { "column-name": this._componentLocale.tableHead.importDate, "column-name-position": "text", settingable: false, size: gridCommon.colSize.auto })), this.objects
+        .sort((a, b) => {
+        const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();
+        if (nameA < nameB) {
+          return -1;
+        }
+        if (nameA > nameB) {
+          return 1;
+        }
+        return 0;
+      })
+        .map((obj) => (h("ch-grid-row", { rowid: obj.id, onDblClick: this.openSelectionCallbackHandler }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-icon", { type: obj.icon, color: "auto" }))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, " ", obj.name, " ")), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.type)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.module)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.description)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.modifiedDate, "date-time")}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.importDate, "date-time")}`))))))));
+    };
     this.filterAfterType = "";
     this.filterModified = false;
     this.objects = [];
     this.selectedObjectsIds = [];
     this.displayTitle = false;
+    this.loader = false;
     this.multiSelection = true;
     this.patternValue = undefined;
     this.types = undefined;
@@ -233,6 +249,7 @@ const GxIdeObjectSelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   componentDidLoad() {
     this.listenChanges();
+    this.loaderEl.container = this.chGridEl;
     this.getObjects();
     this.filterPatternEl.focus();
   }
@@ -244,6 +261,17 @@ const GxIdeObjectSelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
+  /**
+   * Suspends or reactivates the shortcuts
+   */
+  async suspendShortcuts(suspendShortcuts) {
+    if (suspendShortcuts) {
+      this.gxgShortcutsEl.suspend = true;
+    }
+    else {
+      this.gxgShortcutsEl.suspend = false;
+    }
+  }
   /**
    * Validate necessary data input
    */
@@ -253,13 +281,15 @@ const GxIdeObjectSelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component", onKeyPress: this.hostKeyPressHandler }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noContentPadding: true, noAboveFooterPadding: true, noHeadingPadding: true, headingPaddingTop: true, noHeadingBorder: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, this.renderFilter(), this.renderObjects(), h("div", { class: "objects-count", slot: "footer-above" }, h("gxg-text", { class: "align-end", part: "objects-selected", textAlign: "center" }, this.evaluateObjectsCount("selected")), h("gxg-text", { class: "align-end", part: "objects-matching", textAlign: "center" }, this.evaluateObjectsCount("matching"))), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandle, part: "gxg-button gxg-button--cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { type: "primary-text-only", onClick: this.openSelectionCallbackHandler, part: "gxg-button gxg-button--ok", slot: "footer-end" }, this._componentLocale.footer.btnConfirm), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", onClick: this.newObjectCallbackHandler, part: "gxg-button gxg-button--new", slot: "footer-start" }, this._componentLocale.footer.btnNew), this.multiSelection ? (h("gxg-button", { type: "secondary-text-only", onClick: this.selectAll, part: "gxg-button gxg-button--select-all", slot: "footer-start" }, this._componentLocale.footer.btnSelectAll)) : null)), h("gxg-shortcuts", { src: this.shortcutsSrc })));
+    return (h(Host, { class: "gx-ide-component", onKeyPress: this.hostKeyPressHandler }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noContentPadding: true, noAboveFooterPadding: true, noHeadingPadding: true, headingPaddingTop: true, noHeadingBorder: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, this.renderFilter(), this.renderObjects(), h("div", { class: "objects-count", slot: "footer-above" }, h("gxg-text", { class: "align-end", part: "objects-selected", textAlign: "center" }, this.evaluateObjectsCount("selected")), h("gxg-text", { class: "align-end", part: "objects-matching", textAlign: "center" }, this.evaluateObjectsCount("matching"))), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { type: "primary-text-only", onClick: this.openSelectionCallbackHandler, part: "gxg-button gxg-button--ok", slot: "footer-end" }, this._componentLocale.footer.btnConfirm), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", onClick: this.newObjectCallbackHandler, part: "gxg-button gxg-button--new", slot: "footer-start" }, this._componentLocale.footer.btnNew), this.multiSelection ? (h("gxg-button", { type: "secondary-text-only", onClick: this.selectAll, part: "gxg-button gxg-button--select-all", slot: "footer-start" }, this._componentLocale.footer.btnSelectAll)) : null)), h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) }), this.loader ? (h("gxg-ide-loader", { cancelLabel: this._componentLocale.loader.cancelLabel, loaderTitle: this._componentLocale.loader.title, ref: el => (this.loaderEl = el), cancelCallback: this.loaderCancelCallbackHandler })) : null));
   }
+  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["gx-ide-assets/object-selector"]; }
   get el() { return this; }
   static get style() { return objectSelectorCss; }
-}, [1, "gx-ide-object-selector", {
+}, [17, "gx-ide-object-selector", {
     "displayTitle": [4, "display-title"],
+    "loader": [4],
     "multiSelection": [4, "multi-selection"],
     "patternValue": [1, "pattern-value"],
     "types": [16],
@@ -276,13 +306,14 @@ const GxIdeObjectSelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "filterModified": [32],
     "objects": [32],
     "selectedObjectsIds": [32],
+    "suspendShortcuts": [64],
     "validate": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-object-selector", "ch-grid", "ch-grid-column", "ch-grid-column-resize", "ch-grid-column-settings", "ch-grid-columnset", "ch-grid-settings", "ch-grid-settings-columns", "ch-icon", "ch-shortcuts", "ch-window", "ch-window-close", "gx-ide-container", "gx-ide-entity-selector", "gx-ide-title", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-date-picker", "gxg-form-checkbox", "gxg-form-text", "gxg-grid", "gxg-icon", "gxg-label", "gxg-shortcuts", "gxg-text", "gxg-title", "gxg-tooltip"];
+  const components = ["gx-ide-object-selector", "ch-grid", "ch-grid-column", "ch-grid-column-resize", "ch-grid-column-settings", "ch-grid-columnset", "ch-grid-settings", "ch-grid-settings-columns", "ch-icon", "ch-shortcuts", "ch-window", "ch-window-close", "gx-ide-container", "gx-ide-entity-selector", "gx-ide-title", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-date-picker", "gxg-form-checkbox", "gxg-form-text", "gxg-grid", "gxg-icon", "gxg-ide-loader", "gxg-label", "gxg-shortcuts", "gxg-text", "gxg-title", "gxg-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-object-selector":
       if (!customElements.get(tagName)) {
@@ -291,110 +322,115 @@ function defineCustomElement$1() {
       break;
     case "ch-grid":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "ch-grid-column":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "ch-grid-column-resize":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "ch-grid-column-settings":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "ch-grid-columnset":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "ch-grid-settings":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "ch-grid-settings-columns":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "ch-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "ch-shortcuts":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "ch-window":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "ch-window-close":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "gx-ide-container":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "gx-ide-entity-selector":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "gx-ide-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "gxg-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "gxg-combo-box":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "gxg-combo-box-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "gxg-date-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "gxg-form-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "gxg-form-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "gxg-grid":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-ide-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }

package/dist/components/gx-ide-references.js

@@ -179,12 +179,9 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         resolve([]);
       });
     };
-    this.referenceSelectedHandler = (selectedItem) => {
+    this.referenceSelectedHandler = (event) => {
       if (this.selectReferenceCallback) {
-        const selectedItems = [];
-        selectedItem.detail.forEach(item => {
-          selectedItems.push(item.id);
-        });
+        const selectedItems = event.detail.map(item => item.item.id);
         this.selectReferenceCallback(selectedItems[0]);
         // returns void
       }
@@ -200,8 +197,6 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.referencesToTreeData = undefined;
     this.barHidden = false;
     this.objectsSuggestions = undefined;
-    this.referencedBy = undefined;
-    this.referencesTo = undefined;
     this.displayTitle = false;
     this.selectedObject = undefined;
     this.selectorSourceCallback = undefined;
@@ -267,9 +262,7 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "referencedByTreeData": [32],
     "referencesToTreeData": [32],
     "barHidden": [32],
-    "objectsSuggestions": [32],
-    "referencedBy": [32],
-    "referencesTo": [32]
+    "objectsSuggestions": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/index.js

@@ -2,12 +2,14 @@ export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/intern
 export { ChAccordion, defineCustomElement as defineCustomElementChAccordion } from './ch-accordion.js';
 export { ChActionGroup, defineCustomElement as defineCustomElementChActionGroup } from './ch-action-group.js';
 export { ChActionGroupItem, defineCustomElement as defineCustomElementChActionGroupItem } from './ch-action-group-item.js';
+export { ChActionGroupRender, defineCustomElement as defineCustomElementChActionGroupRender } from './ch-action-group-render.js';
 export { ChAlert, defineCustomElement as defineCustomElementChAlert } from './ch-alert.js';
 export { ChCheckbox, defineCustomElement as defineCustomElementChCheckbox } from './ch-checkbox.js';
 export { ChDragBar, defineCustomElement as defineCustomElementChDragBar } from './ch-drag-bar.js';
 export { ChDropdown, defineCustomElement as defineCustomElementChDropdown } from './ch-dropdown.js';
 export { ChDropdownItem, defineCustomElement as defineCustomElementChDropdownItem } from './ch-dropdown-item.js';
 export { ChDropdownItemSeparator, defineCustomElement as defineCustomElementChDropdownItemSeparator } from './ch-dropdown-item-separator.js';
+export { ChDropdownRender, defineCustomElement as defineCustomElementChDropdownRender } from './ch-dropdown-render.js';
 export { ChFormCheckbox, defineCustomElement as defineCustomElementChFormCheckbox } from './ch-form-checkbox.js';
 export { ChGrid, defineCustomElement as defineCustomElementChGrid } from './ch-grid.js';
 export { ChGridActionRefresh, defineCustomElement as defineCustomElementChGridActionRefresh } from './ch-grid-action-refresh.js';
@@ -49,8 +51,6 @@ export { ChStyle, defineCustomElement as defineCustomElementChStyle } from './ch
 export { ChSuggest, defineCustomElement as defineCustomElementChSuggest } from './ch-suggest.js';
 export { ChSuggestList, defineCustomElement as defineCustomElementChSuggestList } from './ch-suggest-list.js';
 export { ChSuggestListItem, defineCustomElement as defineCustomElementChSuggestListItem } from './ch-suggest-list-item.js';
-export { ChTestActionGroup, defineCustomElement as defineCustomElementChTestActionGroup } from './ch-test-action-group.js';
-export { ChTestDropdown, defineCustomElement as defineCustomElementChTestDropdown } from './ch-test-dropdown.js';
 export { ChTestSuggest, defineCustomElement as defineCustomElementChTestSuggest } from './ch-test-suggest.js';
 export { ChTextblock, defineCustomElement as defineCustomElementChTextblock } from './ch-textblock.js';
 export { ChTimer, defineCustomElement as defineCustomElementChTimer } from './ch-timer.js';

package/dist/components/recent-news.js

@@ -67,8 +67,7 @@ const GxIdeRecentNews = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         }
       }
     };
-    this.NewsClickHandler = async (e) => {
-      const newsId = e.target.id;
+    this.openNewsHandler = (newsId) => async () => {
       if (this.openNewsCallback) {
         await this.openNewsCallback(newsId);
       }
@@ -76,7 +75,7 @@ const GxIdeRecentNews = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     // 9.LOCAL METHODS -> RENDERS //
     this.renderNews = (news) => {
       if (news.id && news.title) {
-        return (h("gxg-card", { id: news.id, key: news.id, cardType: "article", cardTitle: news.title, icon: "gx-test/test-results", iconColor: "auto", actionable: true, onClick: this.NewsClickHandler, titleSemibold: true, noHeaderBorder: true, class: "news-article" }, news.body ? h("p", null, news.body) : null));
+        return (h("gxg-card", { id: news.id, key: news.id, cardType: "article", cardTitle: news.title, icon: "gx-test/test-results", iconColor: "auto", actionable: true, onClick: this.openNewsHandler(news.id), titleSemibold: true, noHeaderBorder: true, class: "news-article" }, news.body ? h("p", null, news.body) : null));
       }
       return null;
     };

package/dist/components/shortcuts.js

@@ -10,6 +10,7 @@ const GxgShortcuts = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.showKey = "F10";
+    this.suspend = false;
     this.showTooltip = false;
     this.show = false;
   }
@@ -17,12 +18,14 @@ const GxgShortcuts = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.showTooltip = true;
   }
   render() {
-    return (h(Host, null, h("ch-shortcuts", { src: this.src, showKey: this.showKey })));
+    console.log("render");
+    return (h(Host, null, h("ch-shortcuts", { suspend: this.suspend, src: this.src, showKey: this.showKey })));
   }
   static get style() { return shortcutsCss; }
 }, [0, "gxg-shortcuts", {
     "src": [1],
     "showKey": [1, "show-key"],
+    "suspend": [4],
     "showTooltip": [1540, "show-tooltip"],
     "show": [32]
   }]);

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

@@ -187,15 +187,18 @@ const ChTreeViewItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.selected = true;
       this.selectedItemChange.emit(this.getSelectedInfo(mouseEventModifierKey(event), true));
     };
-    this.getSelectedInfo = (ctrlKeyPressed, selected) => ({
-      ctrlKeyPressed: ctrlKeyPressed,
-      expanded: this.expanded,
-      id: this.el.id,
-      itemRef: this.el,
-      metadata: this.metadata,
-      parentId: this.el.parentElement.id,
-      selected: selected
-    });
+    this.getSelectedInfo = (ctrlKeyPressed, selected) => {
+      var _a;
+      return ({
+        ctrlKeyPressed: ctrlKeyPressed,
+        expanded: this.expanded,
+        id: this.el.id,
+        itemRef: this.el,
+        metadata: this.metadata,
+        parentId: (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.id,
+        selected: selected
+      });
+    };
     this.handleActionDblClick = (event) => {
       event.stopPropagation();
       if (mouseEventModifierKey(event)) {
@@ -307,7 +310,11 @@ const ChTreeViewItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     });
   }
   handleExpandedChange(isExpanded) {
-    this.lazyLoadItems(isExpanded);
+    // Wait until all properties are updated before lazy loading. Otherwise, the
+    // lazyLoad property could be updated just after the executing of the function
+    setTimeout(() => {
+      this.lazyLoadItems(isExpanded);
+    });
   }
   handleLasItemChange(isLastItem) {
     if (isLastItem && this.showLines) {
@@ -537,6 +544,10 @@ const ChTreeViewItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (this.editing) {
       this.removeEditMode(false);
     }
+    // Sync selected state with the main tree
+    if (this.selected) {
+      this.selectedItemChange.emit(this.getSelectedInfo(true, false));
+    }
     this.disconnectObserver();
   }
   render() {