@genexus/genexus-ide-ui 0.0.66 → 0.0.68

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

@@ -8,9 +8,25 @@ import { formSubmitValidation } from "../../common/form-validation";
 export class GxIdeNewKb {
   constructor() {
     this.renderedFirstTime = false;
+    this.selectedFrontEndsIds = [];
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
+    // 9.LOCAL METHODS -> Helpers //
+    this.initialSetup = () => {
+      this.updateSelectedFrontEndsIds();
+    };
+    // 9.LOCAL METHODS -> Not Helpers //
+    this.updateSelectedFrontEndsIds = () => {
+      this.selectedFrontEndsIds = [];
+      this.frontEndsEl.getValues().then(frontEndsCheckboxesInfo => {
+        frontEndsCheckboxesInfo.forEach(frontEnd => {
+          if (frontEnd.value) {
+            this.selectedFrontEndsIds.push(frontEnd.id);
+          }
+        });
+      });
+    };
     /**
      * @description If Server Name first option is selected, "Create Data in Knowledge Base Folder" should be disabled
      */
@@ -65,20 +81,6 @@ export class GxIdeNewKb {
         }
       });
     };
-    this.getFrontEndOptionsValues = () => {
-      const gxOptions = [];
-      const frontEndValues = this.frontEndsEl.getValues();
-      frontEndValues.then(result => {
-        result.forEach(checkbox => {
-          gxOptions.push({
-            id: checkbox.id,
-            checked: checkbox.value,
-            disabled: checkbox.disabled
-          });
-        });
-      });
-      return gxOptions;
-    };
     /**
      * @description it evaluates what front end options need to be updated on 'getFrontEndsCallback', by comparing the new state (getFrontEndsCallback promise result) and the previous state (previousFrontEndsState)
      */
@@ -141,7 +143,7 @@ export class GxIdeNewKb {
           userInterfaceLanguage: (_d = this.userInterfaceLanguageEl) === null || _d === void 0 ? void 0 : _d.value,
           prototypingEnvironment: (_e = this.prototypingEnvironmentEl) === null || _e === void 0 ? void 0 : _e.value,
           dataSource: (_f = this.dataSourceEl) === null || _f === void 0 ? void 0 : _f.value,
-          frontEnds: this.getFrontEndOptionsValues(),
+          frontEnds: this.selectedFrontEndsIds,
           serverName: (_g = this.serverNameEl) === null || _g === void 0 ? void 0 : _g.value,
           databaseName: (_h = this.databaseNameEl) === null || _h === void 0 ? void 0 : _h.value,
           collation: (_j = this.collationEl) === null || _j === void 0 ? void 0 : _j.value,
@@ -163,20 +165,20 @@ export class GxIdeNewKb {
     };
     // 10.RENDER() FUNCTION //
     this.renderTabBasic = () => {
-      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("div", { class: "basic-row-first" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.prototypingTarget.label, value: getSelectedGxOption(this.prototypingTargets), ref: (el) => (this.prototypingTargetEl = el), disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true, isSelected: !this.isAdvanced }, h("div", { class: "basic-row-first" }, h("div", { class: "basic-row-first__container" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.prototypingTarget.label, value: getSelectedGxOption(this.prototypingTargets), ref: (el) => (this.prototypingTargetEl = el), disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
           ? this._componentLocale.tabBasic.prototypingTarget
             .disabledPlaceholder
           : "", onValueChanged: this.prototypingTargetValueChangedHandler, class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.userInterfaceLanguage.label, value: getSelectedGxOption(this.userInterfaceLanguages), placeholder: this.userInterfaceLanguages.length === 0
           ? this._componentLocale.tabBasic.userInterfaceLanguage
             .disabledPlaceholder
-          : "", disabled: this.userInterfaceLanguages.length === 0, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language"))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel, contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment
+          : "", disabled: this.userInterfaceLanguages.length === 0, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel, contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment
           .label, value: getSelectedGxOption(this.prototypingEnvironments), placeholder: this.prototypingEnvironments.length === 0
           ? this._componentLocale.tabBasic.backEnd
             .prototypingEnvironment.disabledPlaceholder
           : "", disabled: this.prototypingEnvironments.length === 0, ref: (el) => (this.prototypingEnvironmentEl = el), onValueChanged: this.prototypingEnvironmentValueChangedHandler, class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource.label, toolTip: config.tooltip, disableFilter: true, value: getSelectedGxOption(this.defaultDataSources), placeholder: this.defaultDataSources.length === 0
           ? this._componentLocale.tabBasic.backEnd.dataSource
             .disabledPlaceholder
-          : "", disabled: this.defaultDataSources.length === 0, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel, titleType: "secondary" }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
+          : "", disabled: this.defaultDataSources.length === 0, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel, titleType: "secondary" }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el), onGroupValuesChanged: this.updateSelectedFrontEndsIds }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
     };
     this.renderTabAdvanced = () => {
       return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { noContentPadding: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle, titleType: "secondary" }, h("div", { class: "knowledge-base-storage" }, h("div", { class: "knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.serverNames), placeholder: this.serverNames.length === 0
@@ -198,6 +200,7 @@ export class GxIdeNewKb {
     this.userNameVisible = true;
     this.passwordVisible = true;
     this.savePasswordVisible = true;
+    this.displayTitle = false;
     this.defaultDataSources = undefined;
     this.frontEnds = undefined;
     this.isAdvanced = false;
@@ -228,6 +231,9 @@ export class GxIdeNewKb {
     this.evaluateAuthenticationType(null);
     this.previousFrontEndsState = this.frontEnds;
   }
+  componentDidLoad() {
+    this.initialSetup();
+  }
   componentDidRender() {
     if (!this.renderedFirstTime) {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
@@ -238,7 +244,7 @@ export class GxIdeNewKb {
    *  11.RENDER() FUNCTION
    ********************************/
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this._componentLocale.componentName }, h("header", { class: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("header", { class: {
         "header": true,
         "grid": true,
         "header--is-advanced": this.isAdvanced
@@ -248,7 +254,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" }, 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" })), this.renderTabBasic(), this.renderTabAdvanced())), 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-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
+      : 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-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
   }
   static get is() { return "gx-ide-new-kb"; }
   static get encapsulation() { return "shadow"; }
@@ -265,6 +271,24 @@ export class GxIdeNewKb {
   static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "defaultDataSources": {
         "type": "unknown",
         "mutable": true,

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

@@ -1,6 +1,7 @@
 {
-  "name": "Name",
-  "description": "Description",
+  "componentName": "New Object",
+  "objectName": "Name",
+  "objectDescription": "Description",
   "moduleOnly": "Module",
   "folderOnly": "Folder",
   "moduleFolder": "Module/Folder",

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

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found 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.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+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 {
@@ -164,14 +175,25 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found 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.
+*/
 :host {
   display: block;
   border: 1px solid var(--gxg-border-color--regular);
   background-color: var(--color-background);
 }
 
+/*main*/
+.main {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: auto;
+  height: 100%;
+}
+
 .categories-types-container {
-  max-height: 200px;
   display: flex;
   flex-direction: row;
   flex-shrink: 1;

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

@@ -118,6 +118,7 @@ export class GxIdeNewObject {
     this.nameIsValid = false;
     this.name = undefined;
     this.description = undefined;
+    this.displayTitle = false;
     this.shadow = false;
     this.typeCategories = undefined;
     this.parent = undefined;
@@ -150,9 +151,9 @@ export class GxIdeNewObject {
   // 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: "New Object", noHeadingBorder: true }, 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
+    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.name), 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.description), 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)))));
+        : 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)))));
   }
   static get is() { return "gx-ide-new-object"; }
   static get encapsulation() { return "shadow"; }
@@ -169,6 +170,24 @@ export class GxIdeNewObject {
   static get assetsDirs() { return ["gx-ide-assets/new-object"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "shadow": {
         "type": "boolean",
         "mutable": false,

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

@@ -1,5 +1,5 @@
 {
-  "name": "Name",
+  "componentName": "Object Selector",
   "location": "Location",
   "filter": {
     "title": "Filters",
@@ -16,8 +16,16 @@
     "dateTime": "Date/time"
   },
   "objCount": {
-    "selected": "selected object(s)",
-    "matching": "matching object(s)"
+    "selected": {
+      "none": "No Selected Objects",
+      "one": "Selected Object",
+      "many": "Selected Objects"
+    },
+    "matching": {
+      "none": "No Matching Objects",
+      "one": "Matching Object",
+      "many": "Matching Objects"
+    }
   },
   "tableHead": {
     "name": "Name",

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

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found 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.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+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 {
@@ -164,6 +175,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found 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.
+*/
 :host {
   display: block;
   border: 1px solid var(--gxg-border-color--regular);
@@ -196,6 +211,9 @@ gxg-tabs {
 .filter-grid .modified-row {
   grid-area: modified-row;
 }
+.filter-grid--no-title {
+  border-top: 0;
+}
 
 /*modified row*/
 .modified-row {

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

@@ -14,7 +14,10 @@ export class GxIdeObjectSelector {
     // 9.LOCAL METHODS //
     this.renderFilter = () => {
       var _a, _b;
-      return (h("div", { part: "filters-container", class: "filter-grid", 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: {
+      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([
@@ -48,7 +51,18 @@ export class GxIdeObjectSelector {
         }, 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", { "row-selection-mode": 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.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")}`))))))));
+      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.getObjects = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -140,10 +154,32 @@ export class GxIdeObjectSelector {
         e.stopPropagation();
       }
     };
+    this.evaluateObjectsCount = (type) => {
+      if (type === "selected" && this.selectedObjectsIds.length === 0) {
+        return this._componentLocale.objCount.selected.none;
+      }
+      else if (type === "selected" && this.selectedObjectsIds.length === 1) {
+        return `1 ${this._componentLocale.objCount.selected.one}`;
+      }
+      else if (type === "selected" && this.selectedObjectsIds.length > 1) {
+        return `${this.selectedObjectsIds.length} ${this._componentLocale.objCount.selected.many}`;
+      }
+      else if (type === "matching" && this.objects.length === 0) {
+        return this._componentLocale.objCount.matching.none;
+      }
+      else if (type === "matching" && this.objects.length === 1) {
+        return `1 ${this._componentLocale.objCount.matching.one}`;
+      }
+      else {
+        // hopefully: type === "matching" && this.objects.length > 1
+        return `${this.objects.length} ${this._componentLocale.objCount.matching.many}`;
+      }
+    };
     this.filterAfterType = "";
     this.filterModified = false;
     this.objects = [];
     this.selectedObjectsIds = [];
+    this.displayTitle = false;
     this.multiSelection = true;
     this.patternValue = undefined;
     this.types = undefined;
@@ -165,6 +201,7 @@ export class GxIdeObjectSelector {
   componentDidLoad() {
     this.listenChanges();
     this.getObjects();
+    this.filterPatternEl.focus();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -183,7 +220,8 @@ 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._componentLocale.filter.title, headingPaddingTop: true, noContentPadding: true, noHeadingBorder: true, noAboveFooterPadding: 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" }, `${this.selectedObjectsIds.length} ${this._componentLocale.objCount.selected}`), h("gxg-text", { class: "align-end", part: "objects-matching" }, `${this.objects.length} ${this._componentLocale.objCount.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.newObjectCallbackHandle, part: "gxg-button gxg-button--new", slot: "footer-start" }, this._componentLocale.footer.btnNew), h("gxg-button", { type: "secondary-text-only", onClick: this.selectAll, part: "gxg-button gxg-button--select-all", slot: "footer-start" }, this._componentLocale.footer.btnSelectAll)))));
+    console.log(this.selectedObjectsIds.length);
+    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.newObjectCallbackHandle, 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))));
   }
   static get is() { return "gx-ide-object-selector"; }
   static get encapsulation() { return "shadow"; }
@@ -200,6 +238,24 @@ export class GxIdeObjectSelector {
   static get assetsDirs() { return ["gx-ide-assets/object-selector"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "multiSelection": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/references/references.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found 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.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+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 {
@@ -164,6 +175,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found 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.
+*/
 :host {
   display: block;
 }

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

@@ -40,6 +40,7 @@ export class GxIdeReferences {
       });
     };
     this.openObjectCallbackHandler = async () => {
+      console.log("openObjectCallback");
       this.openObjectCallback(this.selectedObject.id);
       /* Returns an empty Promise*/
     };
@@ -122,6 +123,7 @@ export class GxIdeReferences {
     this.objectsSuggestions = undefined;
     this.referencedBy = undefined;
     this.referencesTo = undefined;
+    this.displayTitle = false;
     this.selectedObject = undefined;
     this.selectorSourceCallback = undefined;
     this.loadReferencesCallback = undefined;
@@ -151,7 +153,7 @@ export class GxIdeReferences {
   // 10.RENDER() FUNCTION //
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true, noContentPadding: true, containerTitle: this._componentLocale.componentName }, h("header", { class: "header", slot: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, onSelectionChanged: this.selectObjectSelectionChanged, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true, noContentPadding: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("header", { class: "header", slot: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, onSelectionChanged: this.selectObjectSelectionChanged, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
         "header__bottom": true,
         "header__bottom--hidden": this.barHidden
       } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" })))))), h("main", { class: "main" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, noContentPadding: true, part: "referenced-by-container", contentBorderEnd: true, titleType: "secondary" }, h("div", { class: {
@@ -181,12 +183,30 @@ export class GxIdeReferences {
   static get assetsDirs() { return ["gx-ide-assets/references"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "selectedObject": {
         "type": "unknown",
         "mutable": true,
         "complexType": {
           "original": "ObjectData",
-          "resolved": "{ id: string; icon: string; name: string; description?: string; }",
+          "resolved": "{ id: string; typeName: string; icon: string; name: string; description?: string; }",
           "references": {
             "ObjectData": {
               "location": "local"

package/dist/collection/components/share-kb/share-kb.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found 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.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+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 {
@@ -164,6 +175,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found 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.
+*/
 :host {
   display: block;
 }