@genexus/genexus-ide-ui 0.0.60 → 0.0.62

package/dist/collection/components/_test/test.js

@@ -5,6 +5,7 @@ import { updateTreeModel } from "../../common/update-tree-model";
 /* CUSTOM IMPORTS */
 export class GxIdeTest {
   constructor() {
+    this.renderedFirstTime = false;
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
     /* Gxg-Tree Methods*/
@@ -59,8 +60,13 @@ export class GxIdeTest {
     this.testUpdateNode = false;
     this.lazyLoadTreeItemsCallback = undefined;
   }
-  // 5.EVENTS (EMIT) //
   // 6.COMPONENT LIFECYCLE METHODS //
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit("test");
+      this.renderedFirstTime = true;
+    }
+  }
   // 7.LISTENERS //
   loadLazyChildrenHandler(e) {
     const treeItemId = e.detail;
@@ -229,6 +235,27 @@ export class GxIdeTest {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "description",
+              "text": "Gets fired when the component has rendered for the first time."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
   static get listeners() {
     return [{
         "name": "loadLazyChildren",

package/dist/collection/components/{team-dev-commit/team-dev-commit.css → bpm-application-declaration/bpm-app-declaration.css}

@@ -55,6 +55,15 @@ 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-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -78,6 +87,7 @@ gxg-tabs {
   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);
@@ -144,52 +154,38 @@ gxg-tabs {
   padding-inline-end: 2px;
 }
 
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /*Gemini*/
 /*Gx Ide*/
 :host {
   display: block;
+  /*data mappings*/
 }
-
-/*HEADER*/
-.header {
-  grid-template-columns: 4fr auto;
-}
-.header .header-button {
-  height: fit-content;
-}
-
-.main {
+:host .header {
   display: flex;
   flex-direction: column;
+  gap: var(--gx-ide-grid-row-gap);
 }
-
-ch-grid {
-  height: auto;
-}
-
-/*SECOND GRID*/
-.second-grid {
-  grid-template-rows: 1fr auto;
-}
-.second-grid .actions-row {
-  grid-template-columns: 1fr auto;
-}
-
-/*THIRD LEVEL GRID*/
-.action-buttons {
-  justify-self: flex-end;
-}
-
-.hidden {
-  display: none;
+:host .header__first-row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gx-ide-grid-column-gap);
 }
-
-.filters-grid {
-  grid-template-rows: repeat(2, 1fr);
+:host .header__first-row .application-suggest {
+  flex: 1;
 }
-.filters-grid .first-row {
-  grid-template-columns: repeat(2, 1fr);
+:host .data-mappings {
+  display: flex;
+  flex-direction: column;
 }
-.filters-grid .second-row {
-  grid-template-columns: repeat(2, 1fr);
+:host .row-button {
+  display: flex;
+  align-items: center;
 }

package/dist/collection/components/{application-declaration → bpm-application-declaration}/bpm-app-declaration.js

@@ -3,12 +3,14 @@ import { Host, h } from "@stencil/core";
 /* OTHER LIBRARIES IMPORTS */
 /* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
+import { config } from "../../common/config";
 import { renderSuggestLists } from "../../common/render-suggest";
 import { renderComboItems } from "../../common/render-combo-items";
 import { convertSuggestedApplicationsToSuggestItems } from "./helpers";
 import { gridCommon } from "../../common/grid";
 export class GxIdeBpmAppDeclaration {
   constructor() {
+    this.renderedFirstTime = false;
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
@@ -88,11 +90,11 @@ export class GxIdeBpmAppDeclaration {
     };
     this.renderDataMappingsGrid = () => {
       var _a;
-      return (h("gxg-grid", { "ellipsis-cell-wrapper": true }, h("ch-grid", { part: "ch-grid-data-mappings" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: ((_a = this.application.application) === null || _a === void 0 ? void 0 : _a.typeIcon) === "objects/transaction"
+      return (h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { part: "ch-grid-data-mappings" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: ((_a = this.application.application) === null || _a === void 0 ? void 0 : _a.typeIcon) === "objects/transaction"
           ? this._componentLocale.dataMappings.firstColName
           : this._componentLocale.dataMappings.firstColNameParameter, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.dataMappings.secondColName, settingable: false, sortable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { settingable: false, sortable: false, size: gridCommon.colSize.auto })), this.application.mappings.map((obj, index) => {
         var _a;
-        return (h("ch-grid-row", { rowId: index + obj.parameter }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${obj.access}: ${obj.parameter}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-combo-box", { disableFilter: true, value: obj.relevantData }, renderComboItems((_a = this.dataOptionsToComboItems(obj.relevantDataOptions)) !== null && _a !== void 0 ? _a : [])))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-button", { "data-index": index, type: "secondary-icon-only", icon: "gemini-tools/add-circle", onClick: this.selectMappingCallbackHandler(obj.parameter) })))));
+        return (h("ch-grid-row", { rowId: index + obj.parameter }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${obj.access}: ${obj.parameter}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-combo-box", { disableFilter: true, value: obj.relevantData }, renderComboItems((_a = this.dataOptionsToComboItems(obj.relevantDataOptions)) !== null && _a !== void 0 ? _a : [])))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-button", { "data-index": index, type: "secondary-icon-only", icon: "gemini-tools/add", onClick: this.selectMappingCallbackHandler(obj.parameter) })))));
       }))));
     };
     this.suggestedApplications = undefined;
@@ -117,12 +119,15 @@ export class GxIdeBpmAppDeclaration {
     this.listenApplicationSelected();
   }
   componentDidRender() {
-    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
   }
   // 10.RENDER() FUNCTION //
   render() {
     var _a;
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", null, h("header", { class: "header" }, h("gxg-label", { class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.applicationLabel), h("gxg-suggest", { class: "application-suggest" }, h("ch-suggest", { value: ((_a = this.application.application) === null || _a === void 0 ? void 0 : _a.name) || null, onValueChanged: this.applicationSuggestValueChangedHandler, ref: el => (this.applicationSuggestEl = el), part: "application-suggest" }, renderSuggestLists(this.suggestedApplications))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.selectApplicationCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" }), h("gxg-button", { type: "outlined", part: "clear-application-button", onClick: this.clearApplicationHandler }, "Clear")), h("div", { class: "grid data-mappings" }, h("gxg-container", { containerTitle: this._componentLocale.dataMappings.title, noHeadingBorder: true }, this.renderDataMappingsGrid())), h("gxg-button", { type: "primary-text-only", slot: "footer", icon: "general/datastore", onClick: this.confirmCallbackHandler }, this._componentLocale.buttons.confirmButton), h("gxg-button", { type: "secondary-text-only", slot: "footer", onClick: this.cancelCallbackHandler }, this._componentLocale.buttons.cancelButton)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, footerSubtleShadow: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this._componentLocale.header.applicationLabel }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__first-row" }, h("gxg-suggest", { class: "application-suggest" }, h("ch-suggest", { value: ((_a = this.application.application) === null || _a === void 0 ? void 0 : _a.name) || null, onValueChanged: this.applicationSuggestValueChangedHandler, ref: el => (this.applicationSuggestEl = el), part: "application-suggest" }, renderSuggestLists(this.suggestedApplications))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.selectApplicationCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" }), h("gxg-button", { type: "outlined", part: "clear-application-button", onClick: this.clearApplicationHandler }, "Clear")), h("div", { class: "header__second-row" }, h("gx-ide-title", { type: "secondary" }, this._componentLocale.dataMappings.title))), h("div", { class: "data-mappings" }, this.renderDataMappingsGrid()), h("gxg-button", { type: "secondary-text-only", slot: "footer-end", onClick: this.cancelCallbackHandler }, this._componentLocale.buttons.cancelButton), h("gxg-button", { type: "primary-text-only", slot: "footer-end", icon: "general/datastore", onClick: this.confirmCallbackHandler }, this._componentLocale.buttons.confirmButton)))));
   }
   static get is() { return "gx-ide-bpm-app-declaration"; }
   static get encapsulation() { return "shadow"; }
@@ -281,8 +286,8 @@ export class GxIdeBpmAppDeclaration {
   }
   static get events() {
     return [{
-        "method": "componentDidRenderEvent",
-        "name": "componentDidRenderEvent",
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/{application-declaration → bpm-application-declaration}/gx-ide-assets/bpm-app-declaration/langs/bpm-app-declaration.lang.en.json

@@ -1,6 +1,6 @@
 {
   "header": {
-    "applicationLabel": "Application"
+    "applicationLabel": "Application Declaration"
   },
   "dataMappings": {
     "title": "Data Mappings",

package/dist/collection/components/create-kb-from-server/create-kb-from-server.css

@@ -55,6 +55,15 @@ 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-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -78,6 +87,7 @@ gxg-tabs {
   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);
@@ -144,6 +154,14 @@ gxg-tabs {
   padding-inline-end: 2px;
 }
 
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /*Gemini*/
 /*Gx Ide*/
 :host {
@@ -166,6 +184,11 @@ gxg-tabs {
   grid-area: 4/2/5/3;
 }
 
+.grid-data-kbs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gx-ide-grid-row-gap);
+}
 .grid-data-kbs .search-kbs {
   width: 100%;
   display: flex;
@@ -175,7 +198,7 @@ gxg-tabs {
 }
 
 .grid-data-kbs-footer {
-  grid-template-columns: repeat(2, auto);
+  display: flex;
 }
 
 .flex {

package/dist/collection/components/create-kb-from-server/create-kb-from-server.js

@@ -5,6 +5,7 @@ import { renderFormItems } from "../../common/common";
 import { formSubmitValidation } from "../../common/form-validation";
 export class GxIdeCreateKbFromServer {
   constructor() {
+    this.renderedFirstTime = false;
     this.kbIdSelected = null;
     this.authenticationTypes = [];
     // 7.LISTENERS //
@@ -99,6 +100,12 @@ export class GxIdeCreateKbFromServer {
     this.serverUrlsEl.focus();
     this.addEventListeners();
   }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
   reset() {
     this.kbs = [];
     this.kbIdSelected = null;
@@ -109,13 +116,13 @@ export class GxIdeCreateKbFromServer {
   // 10.RENDER() FUNCTION //
   // 11.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: { "gx-ide-component": true } }, h("div", { class: `main-wrapper` }, h("gxg-container", null, h("div", { class: "flex" }, h("gxg-label", { labelPosition: "start", class: "kb-label" }, this._componentLocale.label.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, ref: (el) => (this.serverUrlsEl = el), class: "server-urls-combo-box", part: "server-urls" }, this.serverUrls
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this._componentLocale.componentName }, h("div", { class: "flex" }, h("gxg-label", { labelPosition: "start", class: "kb-label" }, this._componentLocale.label.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, ref: (el) => (this.serverUrlsEl = el), class: "server-urls-combo-box", part: "server-urls" }, this.serverUrls
       ? renderFormItems("gxg-combo-box-item", this.serverUrls.map(sUrl => ({
         id: sUrl,
         label: sUrl,
         value: sUrl
       })), "server-urls")
-      : null)), h("div", { class: "grid grid-data" }, h("div", null, h("div", { class: "grid grid-data-account" }, h("gxg-combo-box", { disableFilter: true, value: this.authenticationTypes[0].id, ref: (el) => (this.authenticationTypeEl = el), class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.userName}:`), h("gxg-form-text", { ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" }), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.password}:`), h("gxg-form-text", { password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" }), h("div", null, h("gxg-button", { id: "button-connect", type: "primary-text-only", onClick: this.connectCallbackHandler, part: "button-connect" }, this._componentLocale.btn.btnConnect)))), h("div", { class: "grid" }, h("div", { class: "grid-data-kbs" }, h("div", { class: "search-kbs" }, h("gxg-form-text", { ref: (el) => (this.searchKBEl = el), class: "search-kb-input", part: "search-kb", disabled: this.selectionKbDisabled, placeholder: this._componentLocale.label.searchKbs })), h("div", { class: "box-kbs" }, h("gxg-list-box", { "no-border": true, "single-selection": true, disabled: this.selectionKbDisabled, ref: (el) => (this.listBoxEl = el), part: "kbs", onSelectionChanged: this.kbsOnSelectionChangedHandler }, this.kbs
+      : null)), h("div", { class: "grid grid-data" }, h("div", null, h("div", { class: "grid grid-data-account" }, h("gxg-combo-box", { disableFilter: true, value: this.authenticationTypes[0].id, ref: (el) => (this.authenticationTypeEl = el), class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.userName}:`), h("gxg-form-text", { ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" }), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.password}:`), h("gxg-form-text", { password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" }), h("div", null, h("gxg-button", { id: "button-connect", type: "primary-text-only", onClick: this.connectCallbackHandler, part: "button-connect" }, this._componentLocale.btn.btnConnect)))), h("div", { class: "grid" }, h("div", { class: "grid-data-kbs" }, h("div", { class: "search-kbs" }, h("gxg-form-text", { ref: (el) => (this.searchKBEl = el), class: "search-kb-input", part: "search-kb", disabled: this.selectionKbDisabled, placeholder: this._componentLocale.label.searchKbs })), h("div", { class: "box-kbs" }, h("gxg-list-box", { "single-selection": true, disabled: this.selectionKbDisabled, ref: (el) => (this.listBoxEl = el), part: "kbs", onSelectionChanged: this.kbsOnSelectionChangedHandler }, this.kbs
       .filter(kb => kb.name
       .toLowerCase()
       .includes(this.kbSearchText.toLowerCase()))
@@ -282,8 +289,8 @@ export class GxIdeCreateKbFromServer {
   }
   static get events() {
     return [{
-        "method": "componentDidLoadEvent",
-        "name": "componentDidLoadEvent",
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/create-kb-from-server/gx-ide-assets/create-kb-from-server/langs/create-kb-from-server.lang.en.json

@@ -1,4 +1,5 @@
 {
+  "componentName": "Create Kb From Server",
   "label": {
     "serverUrl": "GXServer URL",
     "authenticationType": "Authentication Type",
@@ -12,6 +13,6 @@
   },
   "btn": {
     "btnCreate": "Create",
-    "btnConnect": "Connect >>"
+    "btnConnect": "Connect"
   }
 }