@genexus/genexus-ide-ui 0.0.85 → 0.0.86

package/dist/collection/components/new-kb/new-kb.js

@@ -10,8 +10,6 @@ export class GxIdeNewKb {
     this.renderedFirstTime = false;
     this.selectedFrontEndsIds = [];
     this.shortcutsSrc = getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`);
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
     // 9.LOCAL METHODS -> Helpers //
     this.initialSetup = () => {
@@ -242,6 +240,19 @@ export class GxIdeNewKb {
       this.renderedFirstTime = true;
     }
   }
+  // 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;
+    }
+  }
   /** *****************************
    *  11.RENDER() FUNCTION
    ********************************/
@@ -256,7 +267,7 @@ export class GxIdeNewKb {
         h("gxg-form-text", { labelPosition: "start", placeholder: "C:\\Models", maxWidth: "100%", value: this.kbLocation, ref: (el) => (this.locationEl = el), disabled: !this.isAdvanced, part: "kb-location", class: "location-input" }),
         h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" })
       ]
-      : null), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { class: "gxg-tabs" }, this.isAdvanced ? (h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", hidden: !this.isAdvanced, part: "tab-button-advanced" }))) : null, this.renderTabBasic(), this.isAdvanced && this.renderTabAdvanced())), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate))), h("gxg-shortcuts", { src: this.shortcutsSrc })));
+      : null), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { class: "gxg-tabs" }, this.isAdvanced ? (h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", hidden: !this.isAdvanced, part: "tab-button-advanced" }))) : null, this.renderTabBasic(), this.isAdvanced && this.renderTabAdvanced())), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate))), h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) })));
   }
   static get is() { return "gx-ide-new-kb"; }
   static get encapsulation() { return "shadow"; }
@@ -730,5 +741,28 @@ export class GxIdeNewKb {
         }
       }];
   }
+  static get methods() {
+    return {
+      "suspendShortcuts": {
+        "complexType": {
+          "signature": "(suspendShortcuts: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Suspends or reactivates the shortcuts",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/new-object/gx-ide-assets/new-object/shortcuts.json

@@ -4,10 +4,7 @@
     "keyShortcuts": "Enter",
     "action": "click",
     "conditions": {
-      "focusExclude": [
-        "[part~='gxg-button--cancel']",
-        "#module::part(button-clear)"
-      ]
+      "focusExclude": "[part~='gxg-button--cancel'] ,#module::part(button-clear)"
     }
   },
   {

package/dist/collection/components/new-object/new-object.js

@@ -8,9 +8,12 @@ export class GxIdeNewObject {
     this.renderedFirstTime = false;
     this.shortcutsSrc = getAssetPath(`./gx-ide-assets/new-object/shortcuts.json`);
     this.descriptionModifiedByUser = false;
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
+    this.setFirstFocusableElement = () => {
+      this.el.addEventListener("focus", () => {
+        this.nameEl.focus();
+      });
+    };
     this.validateInitialName = async () => {
       const result = await this.validateNameCallback(this.name);
       this.validateNameHandler(result);
@@ -139,6 +142,7 @@ export class GxIdeNewObject {
   }
   componentDidLoad() {
     this.nameEl.focus();
+    this.setFirstFocusableElement();
     this.validateInitialName();
     this.componentDidLoadEvent.emit(true);
   }
@@ -148,16 +152,30 @@ export class GxIdeNewObject {
       this.renderedFirstTime = true;
     }
   }
+  // 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;
+    }
+  }
   // 10.LOCAL METHODS (RENDER) //
   // 11.RENDER() FUNCTION //
   render() {
     var _a;
     return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noHeadingBorder: true }, h("main", { class: "main" }, h("div", { class: "categories-types-container" }, h("div", { class: "categories" }, this.typeCategories.length > 0 ? (h("gxg-list-box", { class: "category", "single-selection": true, noBorder: true, borderEnd: true, "the-title": this._componentLocale.categorySelectionTitle, onSelectionChanged: this.categoryOnSelectionChangedHandler }, this.typeCategories.map(category => (h("gxg-list-box-item", { key: category.id, value: category.id, icon: category.icon, part: `category-${category.id}` }, category.name))))) : null), h("div", { class: "types" }, this.selectedCategory.types.length > 0 ? (h("gxg-list-box", { class: "types", "single-selection": true, noBorder: true, theTitle: this.selectedCategory.name
         ? `${this.selectedCategory.name} ${this._componentLocale.typeSelectionTitleSuffix}`
-        : this._componentLocale.typeSelectionTitle, key: this.selectedCategory.id, onSelectionChanged: this.typeOnSelectionChangedHandler }, this.selectedCategory.types.map(type => (h("gxg-list-box-item", { key: `${this.selectedCategory.id}-${type.id}`, icon: type.icon, part: `type-${this.selectedCategory.id}-${type.id}` }, type.name))))) : (h("p", null, "No Categories to display")))), h("div", { class: "api-description" }, h("gxg-title", { type: "title-05" }, (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.description), h("div", { class: "form" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectName), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.selectedType.name, toolTip: config.tooltip, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, onValueChanged: this.onNameValueChangedHandler, debounce: true, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectDescription), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.selectedType.name, ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-create", slot: "footer-end", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate))), h("gxg-shortcuts", { src: this.shortcutsSrc })));
+        : this._componentLocale.typeSelectionTitle, key: this.selectedCategory.id, onSelectionChanged: this.typeOnSelectionChangedHandler }, this.selectedCategory.types.map(type => (h("gxg-list-box-item", { key: `${this.selectedCategory.id}-${type.id}`, icon: type.icon, part: `type-${this.selectedCategory.id}-${type.id}` }, type.name))))) : (h("p", null, "No Categories to display")))), h("div", { class: "api-description" }, h("gxg-title", { type: "title-05" }, (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.description), h("div", { class: "form" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectName), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.selectedType.name, toolTip: config.tooltip, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, onValueChanged: this.onNameValueChangedHandler, debounce: true, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectDescription), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.selectedType.name, ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-create", slot: "footer-end", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate))), h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) })));
   }
   static get is() { return "gx-ide-new-object"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["new-object.scss"]
@@ -435,6 +453,29 @@ export class GxIdeNewObject {
         }
       }];
   }
+  static get methods() {
+    return {
+      "suspendShortcuts": {
+        "complexType": {
+          "signature": "(suspendShortcuts: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Suspends or reactivates the shortcuts",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{

package/dist/collection/components/object-selector/gx-ide-assets/object-selector/langs/object-selector.lang.en.json

@@ -40,5 +40,9 @@
     "btnNew": "New Object",
     "btnConfirm": "Confirm",
     "btnCancel": "Cancel"
+  },
+  "loader": {
+    "title": "Loading Objects...",
+    "cancelLabel": "Cancel Process"
   }
 }

package/dist/collection/components/object-selector/object-selector.css

@@ -270,6 +270,10 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 }
 
 /*gxg-grid*/
+.grid-container {
+  height: 100%;
+}
+
 ch-grid-cell {
   --spacing-comp-02: var(--spacing-comp-03);
 }

package/dist/collection/components/object-selector/object-selector.js

@@ -13,57 +13,8 @@ export class GxIdeObjectSelector {
     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;
@@ -82,17 +33,27 @@ export class GxIdeObjectSelector {
           ? (_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 = () => {
@@ -176,11 +137,65 @@ export class GxIdeObjectSelector {
         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;
@@ -201,6 +216,7 @@ export class GxIdeObjectSelector {
   }
   componentDidLoad() {
     this.listenChanges();
+    this.loaderEl.container = this.chGridEl;
     this.getObjects();
     this.filterPatternEl.focus();
   }
@@ -212,6 +228,17 @@ export class GxIdeObjectSelector {
   }
   // 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
    */
@@ -221,10 +248,11 @@ export class GxIdeObjectSelector {
   }
   // 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 is() { return "gx-ide-object-selector"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["object-selector.scss"]
@@ -256,6 +284,24 @@ export class GxIdeObjectSelector {
         "reflect": false,
         "defaultValue": "false"
       },
+      "loader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, it will display a loader when needed."
+        },
+        "attribute": "loader",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "multiSelection": {
         "type": "boolean",
         "mutable": false,
@@ -524,6 +570,25 @@ export class GxIdeObjectSelector {
   }
   static get methods() {
     return {
+      "suspendShortcuts": {
+        "complexType": {
+          "signature": "(suspendShortcuts: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Suspends or reactivates the shortcuts",
+          "tags": []
+        }
+      },
       "validate": {
         "complexType": {
           "signature": "() => Promise<boolean>",

package/dist/collection/components/references/references.js

@@ -100,12 +100,9 @@ export class GxIdeReferences {
         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
       }
@@ -121,8 +118,6 @@ export class GxIdeReferences {
     this.referencesToTreeData = undefined;
     this.barHidden = false;
     this.objectsSuggestions = undefined;
-    this.referencedBy = undefined;
-    this.referencesTo = undefined;
     this.displayTitle = false;
     this.selectedObject = undefined;
     this.selectorSourceCallback = undefined;
@@ -325,9 +320,7 @@ export class GxIdeReferences {
       "referencedByTreeData": {},
       "referencesToTreeData": {},
       "barHidden": {},
-      "objectsSuggestions": {},
-      "referencedBy": {},
-      "referencesTo": {}
+      "objectsSuggestions": {}
     };
   }
   static get events() {

package/dist/collection/components/start-page/recent-news.js

@@ -53,8 +53,7 @@ export class GxIdeRecentNews {
         }
       }
     };
-    this.NewsClickHandler = async (e) => {
-      const newsId = e.target.id;
+    this.openNewsHandler = (newsId) => async () => {
       if (this.openNewsCallback) {
         await this.openNewsCallback(newsId);
       }
@@ -62,7 +61,7 @@ export class GxIdeRecentNews {
     // 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;
     };