@genexus/genexus-ide-ui 0.0.85 → 0.0.87

package/dist/cjs/gx-ide-new-kb.cjs.entry.js

@@ -8,7 +8,7 @@ const config = require('./config-8cf5ba3b.js');
 const common = require('./common-fbd24d42.js');
 const formValidation = require('./form-validation-b7fb4ca8.js');
 
-const newKbCss = "/*Gemini*/\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n/* Helper Classes */\n.gxi-hidden {\n  display: none !important;\n}\n\n.gxi-full-height {\n  height: 100%;\n}\n\n.gxi-overflow-auto {\n  overflow: auto;\n}\n\n.gxi-display-flex {\n  display: flex;\n}\n\n.align-start {\n  display: flex;\n  align-items: start;\n}\n\n.align-center {\n  display: flex;\n  align-items: center;\n}\n\n.align-end {\n  display: flex;\n  align-items: end;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.justify-start {\n  display: flex;\n  justify-content: start;\n}\n\n.justify-center {\n  display: flex;\n  justify-content: center;\n}\n\n.justify-end {\n  display: flex;\n  justify-content: end;\n}\n\n/* Grids */\n.grid {\n  display: grid;\n  grid-row-gap: var(--gx-ide-grid-row-gap);\n  grid-column-gap: var(--gx-ide-grid-column-gap);\n  grid-template-rows: auto;\n}\n\nch-grid-cell {\n  display: flex;\n}\n\nch-grid {\n  overflow: auto;\n  height: 100%;\n}\n\nch-grid-column {\n  /*to be removed when this works inside a component with shadow: true*/\n  z-index: 99;\n  border-bottom: 1px solid var(--gray-01);\n}\n\nch-grid-column:first-child {\n  padding-inline-start: var(--gxg-container--padding) !important;\n}\n\nch-grid-column:last-child {\n  padding-inline-end: var(--gxg-container--padding) !important;\n}\n\nch-grid-cell {\n  --spacing-comp-02: var(--gxg-container--padding);\n}\n\n/*--- Layout ---*/\n.layout {\n  display: grid;\n  gap: var(--spacing-comp-05);\n  box-sizing: border-box;\n}\n.layout--two-cols {\n  grid-template-columns: 1fr 1fr;\n}\n.layout--space-above {\n  padding-block-start: var(--spacing-comp-05);\n}\n\n/*Gxg Tabs*/\ngxg-tabs {\n  box-shadow: none;\n}\n\n/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/\n:host(.gx-ide-component) {\n  box-shadow: var(--box-shadow-01);\n  height: 100% !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n/*stylize the top bar*/\n:host(:focus-within) gx-ide-top-bar::part(wrapper) {\n  background-color: var(--color-secondary-enabled);\n}\n\n/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */\n.gx-ide-main-wrapper {\n  color: var(--gx-ide-component-text-color);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-lg);\n  font-family: var(--font-family-primary);\n  line-height: 1.6em;\n  height: 100%;\n  background-color: var(--gx-ide-component-background-color);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  box-sizing: border-box;\n}\n\n/*This is the main element. This is the one that take the remaining vertical space*/\n.gx-ide-main {\n  flex-grow: 1;\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-main::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.gx-ide-main::-webkit-scrollbar-track {\n  background-color: var(--gray-02);\n  border-radius: 10px;\n}\n.gx-ide-main::-webkit-scrollbar-thumb {\n  background: var(--gray-05);\n  border-radius: 10px;\n}\n.gx-ide-main::-webkit-scrollbar-thumb:hover {\n  background: var(--gray-04);\n  cursor: pointer;\n}\n.gx-ide-main .gxg-scroll {\n  display: block;\n  overflow-y: auto;\n  padding-inline-end: 2px;\n}\n\n.gx-ide-overflow {\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-overflow::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.gx-ide-overflow::-webkit-scrollbar-track {\n  background-color: var(--gray-02);\n  border-radius: 10px;\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb {\n  background: var(--gray-05);\n  border-radius: 10px;\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb:hover {\n  background: var(--gray-04);\n  cursor: pointer;\n}\n.gx-ide-overflow .gxg-scroll {\n  display: block;\n  overflow-y: auto;\n  padding-inline-end: 2px;\n}\n\n/*gxg-tree-view*/\n.tree-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/*Gemini*/\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n:host {\n  display: block;\n  border: 1px solid var(--gxg-border-color--regular);\n  background-color: var(--color-background);\n}\n\n/*HEADER*/\n.header {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"kb-name-label kb-input\";\n}\n.header--is-advanced {\n  grid-template-columns: auto 1fr min-content;\n  grid-template-areas: \"kb-name-label kb-input .\" \"location-label location-input location-icon\";\n}\n.header .kb-input {\n  grid-area: kb-input;\n}\n.header .kb-name-label {\n  grid-area: kb-label;\n}\n.header .location-label {\n  grid-area: location-label;\n}\n.header .location-input {\n  grid-area: location-input;\n}\n.header .location-icon {\n  grid-area: location-icon;\n}\n\n/*GXG-TABS*/\n.gxg-tabs {\n  margin-top: 0;\n  box-shadow: none;\n}\n\n/*Basic*/\n.basic-row-first {\n  container-name: basic-row-first;\n  container-type: inline-size;\n}\n.basic-row-first__container {\n  display: grid;\n  gap: var(--gx-ide-grid-column-gap);\n  padding: var(--gxg-container--padding);\n  border-bottom: 1px solid var(--gx-ide-container-border-color);\n  grid-template-columns: repeat(2, 1fr);\n}\n@container (max-width: 640px) {\n  .basic-row-first {\n    /* this will work but you will see the vs-code complaining about some syntax error, so just ignore it */\n  }\n  .basic-row-first .basic-row-first__container {\n    grid-template-columns: 1fr;\n  }\n}\n\n.basic-row-second {\n  grid-template-columns: repeat(2, 1fr);\n  grid-column-gap: 0;\n  grid-row-gap: 0;\n  flex-grow: 1;\n}\n\n/*Advanced*/\n.knowledge-base-storage {\n  display: grid;\n  grid-template-areas: \"knowledge-base-storage__col-left knowledge-base-storage__col-right\";\n  grid-template-columns: repeat(2, 1fr);\n  flex-grow: 1;\n  gap: 0;\n}\n.knowledge-base-storage > *:first-child {\n  border-right: 1px solid var(--gx-ide-container-border-color);\n}\n.knowledge-base-storage__col-left {\n  display: grid;\n  gap: var(--gx-ide-grid-row-gap);\n  padding: var(--gxg-container--padding);\n  grid-area: knowledge-base-storage__col-left;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: repeat(4, min-content);\n  grid-template-areas: \"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\";\n}\n.knowledge-base-storage__col-left .server-name-combo-box {\n  grid-area: server-name-combo-box;\n}\n.knowledge-base-storage__col-left .server-name-button {\n  grid-area: server-name-button;\n  align-self: end;\n}\n.knowledge-base-storage__col-left .database-name {\n  grid-area: database-name;\n}\n.knowledge-base-storage__col-left .collation-combo-box {\n  grid-area: collation-combo-box;\n}\n.knowledge-base-storage__col-left .collation-button {\n  grid-area: collation-button;\n  align-self: end;\n}\n.knowledge-base-storage__col-left .create-data-in-kb {\n  grid-area: create-data-in-kb;\n}\n.knowledge-base-storage__col-right {\n  display: grid;\n  padding: var(--gxg-container--padding);\n  gap: var(--gx-ide-grid-row-gap);\n  grid-area: knowledge-base-storage__col-right;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(4, min-content);\n  grid-template-areas: \"authentication-type\" \"user-name\" \"password\" \"save-password\";\n}\n.knowledge-base-storage__col-right .authentication-type {\n  grid-area: authentication-type;\n}\n.knowledge-base-storage__col-right .user-name {\n  grid-area: user-name;\n}\n.knowledge-base-storage__col-right .password {\n  grid-area: password;\n}\n.knowledge-base-storage__col-right .save-password {\n  grid-area: save-password;\n}\n.knowledge-base-storage__col-right--windows-authentication {\n  grid-template-areas: \"authentication-type\";\n}";
+const newKbCss = ".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)}.header{grid-template-columns:auto 1fr;grid-template-areas:\"kb-name-label kb-input\"}.header--is-advanced{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-name-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-name-label{grid-area:kb-label}.header .location-label{grid-area:location-label}.header .location-input{grid-area:location-input}.header .location-icon{grid-area:location-icon}.gxg-tabs{margin-top:0;box-shadow:none}.basic-row-first{container-name:basic-row-first;}.basic-row-first__container{display:grid;gap:var(--gx-ide-grid-column-gap);padding:var(--gxg-container--padding);border-bottom:1px solid var(--gx-ide-container-border-color);grid-template-columns:repeat(2, 1fr)}.basic-row-second{grid-template-columns:repeat(2, 1fr);grid-column-gap:0;grid-row-gap:0;flex-grow:1}.knowledge-base-storage{display:grid;grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);flex-grow:1;gap:0}.knowledge-base-storage>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage__col-left{display:grid;gap:var(--gx-ide-grid-row-gap);padding:var(--gxg-container--padding);grid-area:knowledge-base-storage__col-left;grid-template-columns:1fr auto;grid-template-rows:repeat(4, min-content);grid-template-areas:\"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\"}.knowledge-base-storage__col-left .server-name-combo-box{grid-area:server-name-combo-box}.knowledge-base-storage__col-left .server-name-button{grid-area:server-name-button;align-self:end}.knowledge-base-storage__col-left .database-name{grid-area:database-name}.knowledge-base-storage__col-left .collation-combo-box{grid-area:collation-combo-box}.knowledge-base-storage__col-left .collation-button{grid-area:collation-button;align-self:end}.knowledge-base-storage__col-left .create-data-in-kb{grid-area:create-data-in-kb}.knowledge-base-storage__col-right{display:grid;padding:var(--gxg-container--padding);gap:var(--gx-ide-grid-row-gap);grid-area:knowledge-base-storage__col-right;grid-template-columns:1fr;grid-template-rows:repeat(4, min-content);grid-template-areas:\"authentication-type\" \"user-name\" \"password\" \"save-password\"}.knowledge-base-storage__col-right .authentication-type{grid-area:authentication-type}.knowledge-base-storage__col-right .user-name{grid-area:user-name}.knowledge-base-storage__col-right .password{grid-area:password}.knowledge-base-storage__col-right .save-password{grid-area:save-password}.knowledge-base-storage__col-right--windows-authentication{grid-template-areas:\"authentication-type\"}";
 
 const GxIdeNewKb = class {
   constructor(hostRef) {
@@ -17,8 +17,6 @@ const GxIdeNewKb = class {
     this.renderedFirstTime = false;
     this.selectedFrontEndsIds = [];
     this.shortcutsSrc = index.getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`);
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
     // 9.LOCAL METHODS -> Helpers //
     this.initialSetup = () => {
@@ -246,6 +244,19 @@ const GxIdeNewKb = class {
       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
    ********************************/
@@ -260,7 +271,7 @@ const GxIdeNewKb = class {
         index.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" }),
         index.h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" })
       ]
-      : null), index.h("main", { class: "gxi-full-height" }, index.h("gxg-tabs", { class: "gxg-tabs" }, this.isAdvanced ? (index.h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar", displayBorder: true }, index.h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), index.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())), index.h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), index.h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate))), index.h("gxg-shortcuts", { src: this.shortcutsSrc })));
+      : null), index.h("main", { class: "gxi-full-height" }, index.h("gxg-tabs", { class: "gxg-tabs" }, this.isAdvanced ? (index.h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar", displayBorder: true }, index.h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), index.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())), index.h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), index.h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate))), index.h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) })));
   }
   static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
   get el() { return index.getElement(this); }

package/dist/cjs/gx-ide-new-object.cjs.entry.js

@@ -19,9 +19,12 @@ const GxIdeNewObject = class {
     this.renderedFirstTime = false;
     this.shortcutsSrc = index.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);
@@ -150,6 +153,7 @@ const GxIdeNewObject = class {
   }
   componentDidLoad() {
     this.nameEl.focus();
+    this.setFirstFocusableElement();
     this.validateInitialName();
     this.componentDidLoadEvent.emit(true);
   }
@@ -159,14 +163,28 @@ const GxIdeNewObject = class {
       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 (index.h(index.Host, { class: "gx-ide-component" }, index.h("div", { class: "gx-ide-main-wrapper" }, index.h("gx-ide-container", { noContentPadding: true, noContentGap: true, slimmerFooter: config.config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noHeadingBorder: true }, index.h("main", { class: "main" }, index.h("div", { class: "categories-types-container" }, index.h("div", { class: "categories" }, this.typeCategories.length > 0 ? (index.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 => (index.h("gxg-list-box-item", { key: category.id, value: category.id, icon: category.icon, part: `category-${category.id}` }, category.name))))) : null), index.h("div", { class: "types" }, this.selectedCategory.types.length > 0 ? (index.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 => (index.h("gxg-list-box-item", { key: `${this.selectedCategory.id}-${type.id}`, icon: type.icon, part: `type-${this.selectedCategory.id}-${type.id}` }, type.name))))) : (index.h("p", null, "No Categories to display")))), index.h("div", { class: "api-description" }, index.h("gxg-title", { type: "title-05" }, (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.description), index.h("div", { class: "form" }, index.h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectName), index.h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.selectedType.name, toolTip: config.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 }), index.h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectDescription), index.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()))), index.h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel), index.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))), index.h("gxg-shortcuts", { src: this.shortcutsSrc })));
+        : this._componentLocale.typeSelectionTitle, key: this.selectedCategory.id, onSelectionChanged: this.typeOnSelectionChangedHandler }, this.selectedCategory.types.map(type => (index.h("gxg-list-box-item", { key: `${this.selectedCategory.id}-${type.id}`, icon: type.icon, part: `type-${this.selectedCategory.id}-${type.id}` }, type.name))))) : (index.h("p", null, "No Categories to display")))), index.h("div", { class: "api-description" }, index.h("gxg-title", { type: "title-05" }, (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.description), index.h("div", { class: "form" }, index.h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectName), index.h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.selectedType.name, toolTip: config.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 }), index.h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectDescription), index.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()))), index.h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel), index.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))), index.h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) })));
   }
+  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["gx-ide-assets/new-object"]; }
   get el() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/gx-ide-object-selector.cjs.entry.js

@@ -10,7 +10,7 @@ const helpers = require('./helpers-cd8bd90a.js');
 const grid = require('./grid-d12c16c7.js');
 const constants = require('./constants-e63c0ad9.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 = class {
   constructor(hostRef) {
@@ -20,57 +20,8 @@ const GxIdeObjectSelector = class {
     this.renderedFirstTime = false;
     this.shortcutsSrc = index.getAssetPath(`./gx-ide-assets/object-selector/shortcuts.json`);
     // 9.LOCAL METHODS //
-    this.renderFilter = () => {
-      var _a, _b;
-      return (index.h("div", { part: "filters-container", class: {
-          "filter-grid": true,
-          "filter-grid--no-title": !this.displayTitle
-        }, slot: "header" }, index.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" }), index.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.renderComboItems((_a = this.types) !== null && _a !== void 0 ? _a : [])), index.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.renderComboItems((_b = this.categories) !== null && _b !== void 0 ? _b : [])), index.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" }), index.h("div", { class: "modified-row" }, index.h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, class: "align-center", ref: (el) => (this.filterModifiedEl = el), part: "filter-modified" }), index.h("div", { class: "modified-row__inner-wrapper" }, index.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.renderComboItems([
-        {
-          id: constants.FILTER_AFTER.NONE,
-          label: this._componentLocale.filter.afterNone,
-          value: constants.FILTER_AFTER.NONE
-        },
-        {
-          id: constants.FILTER_AFTER.DATE_TIME,
-          label: this._componentLocale.filter[constants.FILTER_AFTER.DATE_TIME],
-          value: constants.FILTER_AFTER.DATE_TIME
-        },
-        {
-          id: constants.FILTER_AFTER.IMPORT,
-          label: this._componentLocale.filter[constants.FILTER_AFTER.IMPORT],
-          value: constants.FILTER_AFTER.IMPORT
-        },
-        {
-          id: constants.FILTER_AFTER.LAST_BUILD,
-          label: this._componentLocale.filter[constants.FILTER_AFTER.LAST_BUILD],
-          value: constants.FILTER_AFTER.LAST_BUILD
-        }
-      ])), index.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" }), index.h("div", { class: {
-          "date-time": true,
-          "gxi-hidden": !this.filterModified ||
-            this.filterAfterType !== constants.FILTER_AFTER.DATE_TIME
-        }, part: "filter-datetime" }, index.h("gxg-label", { "label-position": "start" }, this._componentLocale.filter.dateTime), index.h("gxg-date-picker", { ref: (el) => (this.filterModifiedDateEl = el), class: "date-time" }))))));
-    };
-    this.renderObjects = () => {
-      return (index.h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true }, index.h("ch-grid", { rowSelectionMode: this.multiSelection ? "multiple" : "single", ref: (el) => (this.chGridEl = el), onKeyDown: this.chGridKeyDownHandler, part: "ch-grid-objects" }, index.h("ch-grid-columnset", null, index.h("ch-grid-column", { "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.name, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.type, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.module, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.description, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.common }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.modifiedDate, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.importDate, "column-name-position": "text", settingable: false, size: grid.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) => (index.h("ch-grid-row", { rowid: obj.id, onDblClick: this.openSelectionCallbackHandler }, index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, index.h("gxg-icon", { type: obj.icon, color: "auto" }))), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, " ", obj.name, " ")), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, obj.type)), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, obj.module)), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, obj.description)), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, `${helpers.formatDate(obj.modifiedDate, "date-time")}`)), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, `${helpers.formatDate(obj.importDate, "date-time")}`))))))));
+    this.loaderCancelCallbackHandler = async () => {
+      this.cancelCallbackHandler();
     };
     this.getObjects = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -89,17 +40,27 @@ const GxIdeObjectSelector = class {
           ? (_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 = () => {
@@ -183,11 +144,65 @@ const GxIdeObjectSelector = class {
         return `${this.objects.length} ${this._componentLocale.objCount.matching.many}`;
       }
     };
+    // 9.LOCAL METHODS  -> RENDER//
+    this.renderFilter = () => {
+      var _a, _b;
+      return (index.h("div", { part: "filters-container", class: {
+          "filter-grid": true,
+          "filter-grid--no-title": !this.displayTitle
+        }, slot: "header" }, index.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" }), index.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.renderComboItems((_a = this.types) !== null && _a !== void 0 ? _a : [])), index.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.renderComboItems((_b = this.categories) !== null && _b !== void 0 ? _b : [])), index.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" }), index.h("div", { class: "modified-row" }, index.h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, class: "align-center", ref: (el) => (this.filterModifiedEl = el), part: "filter-modified" }), index.h("div", { class: "modified-row__inner-wrapper" }, index.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.renderComboItems([
+        {
+          id: constants.FILTER_AFTER.NONE,
+          label: this._componentLocale.filter.afterNone,
+          value: constants.FILTER_AFTER.NONE
+        },
+        {
+          id: constants.FILTER_AFTER.DATE_TIME,
+          label: this._componentLocale.filter[constants.FILTER_AFTER.DATE_TIME],
+          value: constants.FILTER_AFTER.DATE_TIME
+        },
+        {
+          id: constants.FILTER_AFTER.IMPORT,
+          label: this._componentLocale.filter[constants.FILTER_AFTER.IMPORT],
+          value: constants.FILTER_AFTER.IMPORT
+        },
+        {
+          id: constants.FILTER_AFTER.LAST_BUILD,
+          label: this._componentLocale.filter[constants.FILTER_AFTER.LAST_BUILD],
+          value: constants.FILTER_AFTER.LAST_BUILD
+        }
+      ])), index.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" }), index.h("div", { class: {
+          "date-time": true,
+          "gxi-hidden": !this.filterModified ||
+            this.filterAfterType !== constants.FILTER_AFTER.DATE_TIME
+        }, part: "filter-datetime" }, index.h("gxg-label", { "label-position": "start" }, this._componentLocale.filter.dateTime), index.h("gxg-date-picker", { ref: (el) => (this.filterModifiedDateEl = el), class: "date-time" }))))));
+    };
+    this.renderObjects = () => {
+      return (index.h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true }, index.h("ch-grid", { rowSelectionMode: this.multiSelection ? "multiple" : "single", ref: (el) => (this.chGridEl = el), onKeyDown: this.chGridKeyDownHandler, part: "ch-grid-objects" }, index.h("ch-grid-columnset", null, index.h("ch-grid-column", { "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.name, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.type, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.module, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.description, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.common }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.modifiedDate, "column-name-position": "text", settingable: false, size: grid.gridCommon.colSize.auto }), index.h("ch-grid-column", { "column-name": this._componentLocale.tableHead.importDate, "column-name-position": "text", settingable: false, size: grid.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) => (index.h("ch-grid-row", { rowid: obj.id, onDblClick: this.openSelectionCallbackHandler }, index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, index.h("gxg-icon", { type: obj.icon, color: "auto" }))), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, " ", obj.name, " ")), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, obj.type)), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, obj.module)), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, obj.description)), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, `${helpers.formatDate(obj.modifiedDate, "date-time")}`)), index.h("ch-grid-cell", null, index.h("span", { class: "cell-wrapper" }, `${helpers.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;
@@ -208,6 +223,7 @@ const GxIdeObjectSelector = class {
   }
   componentDidLoad() {
     this.listenChanges();
+    this.loaderEl.container = this.chGridEl;
     this.getObjects();
     this.filterPatternEl.focus();
   }
@@ -219,6 +235,17 @@ const GxIdeObjectSelector = class {
   }
   // 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
    */
@@ -228,8 +255,9 @@ const GxIdeObjectSelector = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (index.h(index.Host, { class: "gx-ide-component", onKeyPress: this.hostKeyPressHandler }, index.h("div", { class: "gx-ide-main-wrapper" }, index.h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noContentPadding: true, noAboveFooterPadding: true, noHeadingPadding: true, headingPaddingTop: true, noHeadingBorder: true, slimmerFooter: config.config.gxIdeContainer.slimmerFooter }, this.renderFilter(), this.renderObjects(), index.h("div", { class: "objects-count", slot: "footer-above" }, index.h("gxg-text", { class: "align-end", part: "objects-selected", textAlign: "center" }, this.evaluateObjectsCount("selected")), index.h("gxg-text", { class: "align-end", part: "objects-matching", textAlign: "center" }, this.evaluateObjectsCount("matching"))), index.h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandle, part: "gxg-button gxg-button--cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), index.h("gxg-button", { type: "primary-text-only", onClick: this.openSelectionCallbackHandler, part: "gxg-button gxg-button--ok", slot: "footer-end" }, this._componentLocale.footer.btnConfirm), index.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 ? (index.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)), index.h("gxg-shortcuts", { src: this.shortcutsSrc })));
+    return (index.h(index.Host, { class: "gx-ide-component", onKeyPress: this.hostKeyPressHandler }, index.h("div", { class: "gx-ide-main-wrapper" }, index.h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noContentPadding: true, noAboveFooterPadding: true, noHeadingPadding: true, headingPaddingTop: true, noHeadingBorder: true, slimmerFooter: config.config.gxIdeContainer.slimmerFooter }, this.renderFilter(), this.renderObjects(), index.h("div", { class: "objects-count", slot: "footer-above" }, index.h("gxg-text", { class: "align-end", part: "objects-selected", textAlign: "center" }, this.evaluateObjectsCount("selected")), index.h("gxg-text", { class: "align-end", part: "objects-matching", textAlign: "center" }, this.evaluateObjectsCount("matching"))), index.h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), index.h("gxg-button", { type: "primary-text-only", onClick: this.openSelectionCallbackHandler, part: "gxg-button gxg-button--ok", slot: "footer-end" }, this._componentLocale.footer.btnConfirm), index.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 ? (index.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)), index.h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) }), this.loader ? (index.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 index.getElement(this); }
 };

package/dist/cjs/gx-ide-recent-news.cjs.entry.js

@@ -58,8 +58,7 @@ const GxIdeRecentNews = class {
         }
       }
     };
-    this.NewsClickHandler = async (e) => {
-      const newsId = e.target.id;
+    this.openNewsHandler = (newsId) => async () => {
       if (this.openNewsCallback) {
         await this.openNewsCallback(newsId);
       }
@@ -67,7 +66,7 @@ const GxIdeRecentNews = class {
     // 9.LOCAL METHODS -> RENDERS //
     this.renderNews = (news) => {
       if (news.id && news.title) {
-        return (index.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 ? index.h("p", null, news.body) : null));
+        return (index.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 ? index.h("p", null, news.body) : null));
       }
       return null;
     };

package/dist/cjs/gx-ide-references.cjs.entry.js

@@ -158,12 +158,9 @@ const GxIdeReferences = class {
         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
       }
@@ -179,8 +176,6 @@ const GxIdeReferences = class {
     this.referencesToTreeData = undefined;
     this.barHidden = false;
     this.objectsSuggestions = undefined;
-    this.referencedBy = undefined;
-    this.referencesTo = undefined;
     this.displayTitle = false;
     this.selectedObject = undefined;
     this.selectorSourceCallback = undefined;

package/dist/cjs/gxg-combo-box_2.cjs.entry.js

@@ -45,15 +45,11 @@ const GxgComboBox = class {
     /**
      * The presence of this attribute applies the popover attribute to the list of items. This is useful if the combo-box is wrapped inside a "@container" responsive container, since at the time of writing, fixed positioned elements that are inside a "@container" container, are relative to the container, not the viewport.
      */
-    this.popOver = true;
+    this.popOver = false;
     /**
      * The presence of this attribute displays a tooltip message, instead of a block message below the control
      */
     this.toolTip = false;
-    /**
-     * If true, it will prevent Enter key propagation only when the list is open. This prop. was created to prevent issues with ch-shortcuts, when an Enter key has to fire a callback on another element (such as a button) but it has to be ignored when the list is open, since an Enter key on a list-box-item, has to select the item only.
-     */
-    this.preventEnterPropagation = false;
     /**
      * The presence of this attribute makes the input disabled
      */
@@ -173,9 +169,6 @@ const GxgComboBox = class {
         repositionScroll.repositionScroll(this.itemsContainer, this.selectedItem, types.KeyboardKeys.ARROW_UP);
       }
       else if (e.code === types.KeyboardKeys.ENTER) {
-        if (this.preventEnterPropagation && this.listIsOpen) {
-          e.stopPropagation();
-        }
         this.hideList();
         this.showAllItems();
       }
@@ -613,6 +606,7 @@ const GxgComboBox = class {
   render() {
     const clearIcon = this.value && !this.disableFilter && !this.disableClear;
     return (index.h(index.Host, { class: {
+        "list-is-opem": this.listIsOpen,
         "gxg-combo-box--disabled": this.disableFilter,
         tooltip: this.toolTip,
         large: store.state.large,