@genexus/genexus-ide-ui 0.0.65 → 0.0.67

package/dist/esm/gx-ide-kb-manager-import.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0aa3977d.js';
 import { L as Locale } from './locale-e183487a.js';
 import { c as config } from './config-2fae16a2.js';
-import { c as countTreeItems } from './helpers-c29a9591.js';
+import { c as countTreeItems } from './helpers-8c78765c.js';
 
 /* objects in file metadata*/
 const KB_OBJECT = "object";
@@ -136,7 +136,7 @@ const addImportItemResultDataItem = (importItemResultData, importCategoryData, i
   return updatedImportStatusTree;
 };
 
-const kbManagerImportCss = ".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}.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{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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}.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}.header{display:flex;flex-direction:row;gap:var(--gx-ide-grid-column-gap)}.header .select-file{flex:1}.main{height:100%;display:flex}.main>*{flex:1}.main .left-grid-item{border-right:1px solid var(--gx-ide-container-border-color)}.main .gx-ide-message{padding:50px 0}.main .tree-container{}.main .tree-container--empty{align-items:center;justify-content:center}.main .tree-container--import-status .tree-view-item--success::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--success::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-success-dark)}.main .tree-container--import-status .tree-view-item--warning::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--warning::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-warning-dark)}.main .tree-container--import-status .tree-view-item--error::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--error::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-error-dark)}.main .tree-container--no-warnings .tree-view-item--warning{display:none}.main .tree-container--no-errors .tree-view-item--error{display:none}.main .tree-container--no-successes .tree-view-item--success{display:none}.ghost-element{display:block;width:0;height:24px;}";
+const kbManagerImportCss = ".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}.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{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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}.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}.header{display:flex;flex-direction:row;gap:var(--gx-ide-grid-column-gap)}.header .select-file{flex:1}.main{height:100%;display:flex}.main>*{flex:1}.main .left-grid-item{border-right:1px solid var(--gx-ide-container-border-color)}.main .gx-ide-message{padding:50px 0}.main .tree-container{}.main .tree-container--empty{align-items:center;justify-content:center}.main .tree-container--import-status .tree-view-item--success::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--success::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-success-dark)}.main .tree-container--import-status .tree-view-item--warning::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--warning::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-warning-dark)}.main .tree-container--import-status .tree-view-item--error::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--error::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-error-dark)}.main .tree-container--no-warnings .tree-view-item--warning{display:none}.main .tree-container--no-errors .tree-view-item--error{display:none}.main .tree-container--no-successes .tree-view-item--success{display:none}.ghost-element{display:block;width:0;height:24px;}";
 
 const GxIdeKbManagerImport = class {
   constructor(hostRef) {
@@ -154,28 +154,6 @@ const GxIdeKbManagerImport = class {
           this.statusInfo.warning.display ||
           this.statusInfo.success.display;
     };
-    this.countMessages = () => {
-      /* totally inefficient way to count. This has to be improved*/
-      let errors = 0;
-      let warnings = 0;
-      let successes = 0;
-      this.importTreeState.forEach(category => {
-        category.items.forEach(object => {
-          if (object.class.includes("tree-view-item--error")) {
-            errors += object.items.length;
-          }
-          else if (object.class.includes("tree-view-item--warning")) {
-            warnings += object.items.length;
-          }
-          else if (object.class.includes("tree-view-item--success")) {
-            successes += object.items.length;
-          }
-        });
-      });
-      this.statusInfo.error.number = errors;
-      this.statusInfo.warning.number = warnings;
-      this.statusInfo.success.number = successes;
-    };
     this.evaluateObjects = () => {
       var _a;
       this.noObjects = !!(((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.objectsTreeState);
@@ -184,7 +162,7 @@ const GxIdeKbManagerImport = class {
       var _a;
       this.noImport = !!(((_a = this.importTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.importTreeState);
     };
-    this.selectFileHandler = () => {
+    this.selectFileAndLoadHandler = () => {
       this.fileInputEl.openFile();
     };
     this.loadFileHandler = async () => {
@@ -201,24 +179,16 @@ const GxIdeKbManagerImport = class {
     this.fileSelectedHandler = (fileEvent) => {
       this.selectedFile = fileEvent.detail[0];
     };
-    this.evaluateHeaderActiveButton = () => {
-      if (!this.selectedFile) {
-        this.headerButtonsGroup.activeButtonId = "select-file-btn";
-        this.fileInputEl.clearInput();
-      }
-      else {
-        this.headerButtonsGroup.activeButtonId = "load-file-btn";
-      }
-    };
     this.importObjectsHandler = async () => {
       if (this.importCallback) {
-        this.importingObjects = true;
+        /* first clear imported objects (this clears errors/warnings/success counts as well)*/
+        this.clearStatusHandler();
+        /* then do the import*/
+        this.importingIsInProcess = true;
         this.objectsButtonsGroup.activeButtonId = "cancel-import-btn";
-        const result = await this.importCallback(this.checkedObjectsIds);
-        if (result || result === false) {
-          this.importingObjects = false;
-          this.objectsButtonsGroup.activeButtonId = "import-btn";
-        }
+        this.importCallback(this.checkedObjectsIds).then(() => {
+          this.importingIsInProcess = false;
+        });
       }
     };
     this.objectsTreeCheckedItemsChangedHandler = (event) => {
@@ -282,10 +252,10 @@ const GxIdeKbManagerImport = class {
     };
     this.objectsTreeContextMenuHandler = (event) => {
       if (this.objectContextMenuCallback && event.detail.metadata === KB_OBJECT) {
-        this.objectContextMenuCallback({
-          objectId: event.detail.id,
-          screenX: event.detail.contextmenuEvent.screenX,
-          screenY: event.detail.contextmenuEvent.screenY
+        this.objectContextMenuCallback("imported", {
+          selection: [event.detail.id],
+          clientX: event.detail.contextmenuEvent.screenX,
+          clientY: event.detail.contextmenuEvent.screenY
         });
       }
     };
@@ -345,6 +315,11 @@ const GxIdeKbManagerImport = class {
     this.fileClearedHandler = () => {
       this.selectedFile = null;
     };
+    this.loaderCancelCallbackHandler = () => {
+      if (this.cancelCallback) {
+        this.cancelCallback();
+      }
+    };
     this.checkedObjectsIds = [];
     this.noObjects = undefined;
     this.showHiddenImportsMessage = false;
@@ -367,7 +342,9 @@ const GxIdeKbManagerImport = class {
     this.someStatusVisible = undefined;
     this.noImport = undefined;
     this.importTreeState = [];
-    this.importingObjects = false;
+    this.importingIsInProcess = false;
+    this.displayTitle = false;
+    this.loader = true;
     this.selectedFile = undefined;
     this.optionsCallback = undefined;
     this.importCallback = undefined;
@@ -391,8 +368,18 @@ const GxIdeKbManagerImport = class {
         this._componentLocale.main.importStatus.importedButHidden;
     }
   }
-  watchSelectedFileHandler() {
-    this.evaluateHeaderActiveButton();
+  watchImportingIsInProcessHandler(isImporting) {
+    if (isImporting && this.loader) {
+      this.loaderEl.show = true;
+    }
+    else if (!isImporting && this.loader) {
+      this.loaderEl.show = false;
+    }
+  }
+  watchSelectedFileHandler(file) {
+    if (file && file.name && file.size > 0) {
+      this.loadFileHandler();
+    }
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
@@ -417,33 +404,33 @@ const GxIdeKbManagerImport = class {
    */
   async addResultItem(item) {
     this.importTreeState = addImportItemResultDataItem(item, this.importCategoryData, this.importTreeState);
-    this.countMessages();
+    this.statusInfo[item.status].number++;
   }
   //  10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noFooterPadding: true, containerTitle: this._componentLocale.componentName }, h("header", { class: "header", slot: "header" }, h("gxg-form-text", { type: "file", class: "select-file", label: this._componentLocale.header.fileNameLabel, placeholder: this._componentLocale.header.fileNamePlaceholder, part: "file-name", acceptFile: ".xpz, .xml", clearButton: true, iconPosition: "start", onFileSelected: this.fileSelectedHandler, onClearButtonClicked: this.fileClearedHandler, ref: (el) => (this.fileInputEl = el) }), h("gxg-button-group", {
-      // default-selected-btn-id="select-file-btn"
-      ref: (el) => (this.headerButtonsGroup = el)
-    }, h("button", { id: "select-file-btn", part: "select-file-button", onClick: this.selectFileHandler, disabled: this.importingObjects }, this._componentLocale.header.selectFileButton), h("button", { id: "load-file-btn", part: "load-file-button", disabled: !this.selectedFile || this.importingObjects, onClick: this.loadFileHandler }, this._componentLocale.header.loadButton))), h("main", { class: "main" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.objectsInFile.title, noContentPadding: true, noBorderFooter: true, class: "left-grid-item", slimmerFooter: true, inactiveTitle: this.noObjects, footerSubtleShadow: !this.noObjects, titleType: "secondary" }, h("div", { class: {
+    var _a;
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noFooterPadding: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("header", { class: "header", slot: "header" }, h("gxg-form-text", { type: "file", class: "select-file", label: this._componentLocale.header.fileNameLabel, placeholder: this._componentLocale.header.fileNamePlaceholder, part: "file-name", acceptFile: ".xpz, .xml", clearButton: true, iconPosition: "start", onFileSelected: this.fileSelectedHandler, onClearButtonClicked: this.fileClearedHandler, ref: (el) => (this.fileInputEl = el) }), h("gxg-button", { type: "primary-text-icon", icon: "gemini-tools/file", part: "select-file-load-button", onClick: this.selectFileAndLoadHandler, disabled: this.importingIsInProcess }, this._componentLocale.header.selectFileButton)), h("main", { class: "main" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.objectsInFile.title, noContentPadding: true, noBorderFooter: true, class: "left-grid-item", slimmerFooter: true, inactiveTitle: this.noObjects, footerSubtleShadow: !this.noObjects, titleType: "secondary" }, h("div", { class: {
         "tree-container": true,
         "tree-container--objects-in-file": true,
         "tree-container--empty": this.noObjects
-      } }, !this.noObjects ? (h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, onItemContextmenu: this.objectsTreeContextMenuHandler, ref: el => (this.objectsTreeEl = el) })) : (h("div", { class: "gx-ide-message" }, h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message" }, "There are no Objects. ", h("br", null), h("gxg-text", { type: "text-link-no-line", onClick: this.selectFileHandler }, "Begin by selecting a file."))))), h("gxg-form-checkbox", { label: this._componentLocale.main.objectsInFile.selectUnselect, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingObjects || this.objectsTreeState.length === 0, checked: this.evaluateCheckAllValue(), onClick: this.toggleSelectionClickHandler, ref: (el) => (this.toggleObjectsCheckboxEl =
-        el) }), h("gxg-button-group", { slot: "footer-end", ref: (el) => (this.objectsButtonsGroup = el) }, h("button", { id: "import-btn", part: "import-button", disabled: this.importingObjects ||
-        this.checkedObjectsIds.length === 0, onClick: this.importObjectsHandler }, this._componentLocale.main.objectsInFile.importButton), h("button", { id: "cancel-import-btn", part: "cancel-import-button", disabled: !this.importingObjects, onClick: this.cancelImportHandler }, this._componentLocale.main.objectsInFile.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", slot: "footer-end", part: "select-kb-btn", onClick: this.optionsHandler }, this._componentLocale.header.optionsButton)), h("gx-ide-container", { containerTitle: this._componentLocale.main.importStatus.title, noContentPadding: true, noBorderFooter: true, slimmerFooter: true, inactiveTitle: this.noImport, footerSubtleShadow: !this.noImport, titleType: "secondary" }, h("div", { class: {
+      } }, !this.noObjects ? (h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, onItemContextmenu: this.objectsTreeContextMenuHandler, ref: el => (this.objectsTreeEl = el) })) : (h("div", { class: "gx-ide-message" }, h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message" }, "There are no Objects. ", h("br", null), h("gxg-text", { type: "text-link-no-line", onClick: this.selectFileAndLoadHandler }, "Begin by selecting a file."))))), h("gxg-form-checkbox", { label: this._componentLocale.main.objectsInFile.selectUnselect, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingIsInProcess ||
+        this.objectsTreeState.length === 0, checked: this.evaluateCheckAllValue(), onClick: this.toggleSelectionClickHandler, ref: (el) => (this.toggleObjectsCheckboxEl =
+        el) }), h("gxg-button-group", { slot: "footer-end", ref: (el) => (this.objectsButtonsGroup = el) }, h("button", { id: "import-btn", part: "import-button", disabled: ((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 ||
+        this.importingIsInProcess, onClick: this.importObjectsHandler }, this._componentLocale.main.objectsInFile.importButton), h("button", { id: "cancel-import-btn", part: "cancel-import-button", disabled: !this.importingIsInProcess, onClick: this.cancelImportHandler }, this._componentLocale.main.objectsInFile.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", slot: "footer-end", part: "select-kb-btn", onClick: this.optionsHandler }, this._componentLocale.header.optionsButton)), h("gx-ide-container", { containerTitle: this._componentLocale.main.importStatus.title, noContentPadding: true, noBorderFooter: true, slimmerFooter: true, inactiveTitle: this.noImport, footerSubtleShadow: !this.noImport, titleType: "secondary" }, h("div", { class: {
         "tree-container": true,
         "tree-container--import-status": true,
         "tree-container--empty": this.noImport || !this.someStatusVisible,
         "tree-container--no-warnings": !this.statusInfo.warning.display,
         "tree-container--no-errors": !this.statusInfo.error.display,
-        "tree-container--no-successes": !this.statusInfo.success.display
-      } }, !this.noImport && this.someStatusVisible ? (h("gxg-tree-view", { treeModel: this.importTreeState, toggleCheckboxes: true, ref: el => (this.objectsTreeEl = el) })) : (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message", class: "gx-ide-message" }, this.importStatusMessage))), h("gxg-text", { type: "button-like", slot: "footer-end", part: "select-kb-btn", onClick: this.clearStatusHandler, disabled: this.noImport || this.importingObjects }, this._componentLocale.main.importStatus.clearButton), h("span", { class: "ghost-element", slot: "footer-start" }))), h("footer", { slot: "footer-start" }, h("gx-ide-status-buttons", { errors: this.statusInfo.error.number, warnings: this.statusInfo.warning.number, successes: this.statusInfo.success.number, compact: true, noBorderTop: true, noBorderBottom: true, noBorderStart: true, minimal: this.statusMinimal, onSelectionChanged: this.statusButtonsSelectionChangedHandler }))), h("gxg-ide-loader", { description: "Importing objects..." }))));
+        "tree-container--no-succeeded": !this.statusInfo.success.display
+      } }, !this.noImport && this.someStatusVisible ? (h("gxg-tree-view", { treeModel: this.importTreeState, toggleCheckboxes: true, ref: el => (this.objectsTreeEl = el) })) : (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message", class: "gx-ide-message" }, this.importStatusMessage))), h("gxg-text", { type: "button-like", slot: "footer-end", part: "select-kb-btn", onClick: this.clearStatusHandler, disabled: this.noImport || this.importingIsInProcess }, this._componentLocale.main.importStatus.clearButton), h("span", { class: "ghost-element", slot: "footer-start" }))), h("footer", { slot: "footer-start" }, h("gx-ide-status-buttons", { errors: this.statusInfo.error.number, warnings: this.statusInfo.warning.number, succeeded: this.statusInfo.success.number, compact: true, noBorderTop: true, noBorderBottom: true, noBorderStart: true, minimal: this.statusMinimal, onSelectionChanged: this.statusButtonsSelectionChangedHandler }))), h("gxg-ide-loader", { description: "Importing objects..." })), this.loader ? (h("gxg-ide-loader", { cancelLabel: this._componentLocale.loader.cancelLabel, container: this.el, loaderTitle: this._componentLocale.loader.title, ref: el => (this.loaderEl = el), cancelCallback: this.loaderCancelCallbackHandler })) : null));
   }
   static get assetsDirs() { return ["gx-ide-assets/kb-manager-import"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
     "objectsTreeState": ["watchObjectsTreeStateHandler"],
     "importTreeState": ["watchImportTreeStateHandler"],
+    "importingIsInProcess": ["watchImportingIsInProcessHandler"],
     "selectedFile": ["watchSelectedFileHandler"]
   }; }
 };

package/dist/esm/gx-ide-new-environment.entry.js

@@ -1,52 +1,83 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0aa3977d.js';
 import { L as Locale } from './locale-e183487a.js';
+import { s as setInitialComboValue } from './helpers-8c78765c.js';
 import { c as config } from './config-2fae16a2.js';
 import { r as renderFormItems } from './common-202491f0.js';
 import { f as formSubmitValidation } from './form-validation-09bd4504.js';
 
-const newEnvironmentCss = ".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}.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{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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}.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)}:host(.gxi-new-environment--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{display:flex}.header__label{flex:none}.main{height:100%}.gxg-tabs{margin-top:0;box-shadow:none}.basic-main{display:flex;height:100%}.basic-main__back-end{flex:1}.basic-main__front-end{flex:1}.advanced-second-row{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr}.advanced-second-row>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(4, 1fr);grid-template-columns:1fr auto}.advanced-second-row-col-left>*{display:flex;align-items:self-end}.advanced-second-row-col-left>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-left>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left>*:nth-child(3){grid-area:2/1/3/2}.advanced-second-row-col-left>*:nth-child(4){grid-area:2/2/3/3}.advanced-second-row-col-left>*:nth-child(5){grid-area:3/1/4/2}.advanced-second-row-col-left>*:nth-child(6){grid-area:3/2/4/3}.advanced-second-row-col-left>*:nth-child(7){grid-area:4/1/5/2}.advanced-second-row-col-left>*:nth-child(8){grid-area:4/2/5/3}.advanced-second-row-col-right{grid-template-columns:1fr;grid-template-rows:repeat(4, 1fr);grid-auto-rows:1fr}.advanced-second-row-col-right *:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-right *:nth-child(2){grid-area:2/1/3/2}.advanced-second-row-col-right *:nth-child(3){grid-area:3/1/4/2}.advanced-second-row-col-right *:nth-child(4){grid-area:4/1/5/2}";
+const newEnvironmentCss = ".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}.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{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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}.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)}:host(.gxi-new-environment--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{display:flex}.header__label{flex:none}.main{height:100%}.gxg-tabs{margin-top:0;box-shadow:none}.basic-main{display:flex;height:100%}.basic-main__back-end{flex:1}.basic-main__front-end{flex:1}.advanced-second-row{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr}.advanced-second-row>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(4, 1fr);grid-template-columns:1fr auto}.advanced-second-row-col-left>*{display:flex;align-items:self-end}.advanced-second-row-col-left>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-left>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left>*:nth-child(3){grid-area:2/1/3/2}.advanced-second-row-col-left>*:nth-child(4){grid-area:2/2/3/3}.advanced-second-row-col-left>*:nth-child(5){grid-area:3/1/4/2}.advanced-second-row-col-left>*:nth-child(6){grid-area:3/2/4/3}.advanced-second-row-col-left>*:nth-child(7){grid-area:4/1/5/2}.advanced-second-row-col-left>*:nth-child(8){grid-area:4/2/5/3}.advanced-second-row-col-right{grid-template-columns:1fr;grid-template-rows:repeat(4, 1fr);grid-auto-rows:1fr}.advanced-second-row-col-right *:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-right *:nth-child(2){grid-area:2/1/3/2}.advanced-second-row-col-right *:nth-child(3){grid-area:3/1/4/2}.advanced-second-row-col-right *:nth-child(4){grid-area:4/1/5/2}";
 
 const GxIdeNewEnvironment = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
     this.renderedFirstTime = false;
+    this.selectedFrontEndsIds = [];
+    this.envNameModifiedByUser = false;
     // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
+    // 8.PUBLIC METHODS API //selectedFrontEndsIds
     // 9.LOCAL METHODS //
-    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;
-    };
-    this.getRuntimeValue = () => {
-      this.runtimeEl = [];
-      const radioGroupOptions = this.runtimeGroup.querySelectorAll("gxg-form-radio");
-      radioGroupOptions === null || radioGroupOptions === void 0 ? void 0 : radioGroupOptions.forEach(radioGroupOption => {
-        this.runtimeEl.push({
-          id: radioGroupOption.id,
-          checked: radioGroupOption.checked
+    // 9.LOCAL METHODS -> Helpers //
+    this.initialSetup = () => {
+      this.updateSelectedFrontEndsIds();
+      this.setInitialRuntimeId();
+      this.setInitialLanguageId();
+      this.setInitialDataStoreId();
+    };
+    this.setInitialRuntimeId = () => {
+      var _a;
+      if ((_a = this.runtimeEnvironmentEl) === null || _a === void 0 ? void 0 : _a.value) {
+        const initialRuntimeEnvironment = this.runtimes.find(runtime => { var _a; return runtime.value === ((_a = this.runtimeEnvironmentEl) === null || _a === void 0 ? void 0 : _a.value); });
+        if (initialRuntimeEnvironment) {
+          this.selectedRuntimeEnvironmentId = initialRuntimeEnvironment.id;
+        }
+      }
+    };
+    this.setInitialLanguageId = () => {
+      var _a;
+      if ((_a = this.languageEl) === null || _a === void 0 ? void 0 : _a.value) {
+        const initialLanguage = this.languages.find(lang => { var _a; return lang.id === ((_a = this.languageEl) === null || _a === void 0 ? void 0 : _a.value); });
+        if (initialLanguage) {
+          this.selectedLanguageId = initialLanguage.id;
+        }
+      }
+    };
+    this.setInitialDataStoreId = () => {
+      var _a;
+      if ((_a = this.dataStoreEl) === null || _a === void 0 ? void 0 : _a.value) {
+        const initialDataStore = this.dataStores.find(dataStore => { var _a; return dataStore.id === ((_a = this.dataStoreEl) === null || _a === void 0 ? void 0 : _a.value); });
+        if (initialDataStore) {
+          this.selectedDataStoreId = initialDataStore.id;
+        }
+      }
+    };
+    // 9.LOCAL METHODS -> Not Helpers //
+    this.envNameInputHandler = (e) => {
+      const newEnvName = (e.detail + "").trim();
+      if (newEnvName !== this.environmentName) {
+        this.environmentName = newEnvName;
+        this.envNameModifiedByUser = true;
+      }
+    };
+    this.updateSelectedFrontEndsIds = () => {
+      this.selectedFrontEndsIds = [];
+      this.frontEndsEl.getValues().then(frontEndsCheckboxesInfo => {
+        frontEndsCheckboxesInfo.forEach(frontEnd => {
+          if (frontEnd.value) {
+            this.selectedFrontEndsIds.push(frontEnd.id);
+          }
         });
       });
-      return this.runtimeEl;
     };
     this.setEnvironmentHandler = async () => {
       if (this.createCallback) {
         const newEnvData = {
-          name: this.nameEl.value,
-          runtime: this.getRuntimeValue(),
+          setAsCurrent: this.setAsCurrentEnvironmentEl.checked,
+          name: this.environmentNameEl.value,
+          runtime: this.runtimeEnvironmentEl.value,
           language: this.languageEl.value,
           dataStores: this.dataStoreEl.value,
-          frontEnds: this.getFrontEndOptionsValues()
+          frontEnds: this.selectedFrontEndsIds
         };
         const createCallbackPromise = this.createCallback(newEnvData);
         createCallbackPromise.then(formSubmitResult => {
@@ -57,50 +88,77 @@ const GxIdeNewEnvironment = class {
     this.cancelButtonClickedHandler = async () => {
       await this.cancelCallback();
     };
-    this.runtimeEnvironmentChangedHandler = () => {
-      this.changedHandler();
+    this.runtimeEnvironmentChangedHandler = (event) => {
+      this.selectedRuntimeEnvironmentId = event.detail.id;
+      this.updateDataSources();
     };
     this.languageValueChangedHandler = () => {
-      this.changedHandler();
+      /* the language item id is used for the value (they are equal)*/
+      this.selectedLanguageId = this.languageEl.value;
+      this.updateDataSources();
+      this.updateFrontEnds();
+      this.updateEnvironmentName();
     };
     this.dataStoreValueChangedHandler = () => {
-      this.changedHandler();
-    };
-    /**
-     * @description This function is called when any of the following data is modified: "Runtime Environment", "Data Store", "Language".
-     */
-    this.changedHandler = () => {
-      const newEnvData = {
-        name: this.nameEl.value,
-        runtime: this.getRuntimeValue(),
-        language: this.languageEl.value,
-        dataStores: this.dataStoreEl.value,
-        frontEnds: this.getFrontEndOptionsValues()
-      };
-      this.changedCallback(newEnvData);
+      /* the data store item id is used for the value (they are equal)*/
+      this.selectedDataStoreId = this.dataStoreEl.value;
+      this.updateEnvironmentName();
+    };
+    this.updateDataSources = async () => {
+      if (this.getDataSourcesCallback) {
+        const updatedDataSources = await this.getDataSourcesCallback(this.selectedLanguageId, this.selectedRuntimeEnvironmentId);
+        if ((updatedDataSources === null || updatedDataSources === void 0 ? void 0 : updatedDataSources.length) > 0) {
+          this.dataStores = updatedDataSources;
+        }
+      }
+    };
+    this.updateFrontEnds = async () => {
+      if (this.getFrontEndsCallback) {
+        const updatedFrontEnds = await this.getFrontEndsCallback(this.selectedLanguageId);
+        if ((updatedFrontEnds === null || updatedFrontEnds === void 0 ? void 0 : updatedFrontEnds.length) > 0) {
+          this.frontEnds = updatedFrontEnds;
+        }
+      }
     };
+    this.updateEnvironmentName = async () => {
+      if (this.getEnvironmentNameCallback &&
+        this.environmentNameEl &&
+        this.envNameModifiedByUser) {
+        const updatedEnvName = await this.getEnvironmentNameCallback(this.selectedLanguageId, this.selectedDataStoreId);
+        if (updatedEnvName) {
+          this.environmentName = updatedEnvName;
+        }
+      }
+    };
+    // 9.LOCAL METHODS -> Renders //
     this.renderTabBasic = () => {
-      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, noContentPadding: true, displayBorderBottom: true }, h("gxg-form-radio-group", { slot: "header", ref: (el) => (this.runtimeGroup = el), row: true, center: true, onChange: this.runtimeEnvironmentChangedHandler }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment")), h("div", { class: "basic-main" }, h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel, class: "basic-main__back-end", contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: this.languages[0]["id"], ref: (el) => (this.languageEl = el), toolTip: config.tooltip, onValueChanged: this.languageValueChangedHandler, part: "language" }, renderFormItems("gxg-combo-box-item", this.languages)), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.dataStores, value: this.dataStores[0]["id"], ref: (el) => (this.dataStoreEl = el), onValueChanged: this.dataStoreValueChangedHandler, toolTip: config.tooltip, part: "data-store" }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel, class: "basic-main__front-end", titleType: "secondary" }, h("gxg-form-checkbox-group", { ref: (el) => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds)))))));
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, noContentPadding: true, displayBorderBottom: true }, h("gxg-form-radio-group", { slot: "header", ref: (el) => (this.runtimeEnvironmentEl = el), row: true, center: true, onChange: this.runtimeEnvironmentChangedHandler }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment")), h("div", { class: "basic-main" }, h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel, class: "basic-main__back-end", contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: setInitialComboValue(this.languages), ref: (el) => (this.languageEl = el), toolTip: config.tooltip, onValueChanged: this.languageValueChangedHandler, part: "language" }, renderFormItems("gxg-combo-box-item", this.languages)), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.dataStores, value: setInitialComboValue(this.dataStores), ref: (el) => (this.dataStoreEl = el), onValueChanged: this.dataStoreValueChangedHandler, toolTip: config.tooltip, part: "data-store" }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel, class: "basic-main__front-end", titleType: "secondary" }, h("gxg-form-checkbox-group", { ref: (el) => (this.frontEndsEl = el), onGroupValuesChanged: this.updateSelectedFrontEndsIds }, renderFormItems("gxg-form-checkbox", this.frontEnds)))))));
     };
     this.renderTabAdvanced = () => {
       return (h("gxg-tab", { tab: "advanced", "no-padding": true }, h("gx-ide-container", null, h("slot", { name: "property-grid" }))));
     };
+    this.displayTitle = false;
+    this.cancelCallback = undefined;
+    this.createCallback = undefined;
     this.dataStores = undefined;
-    this.frontEnd = undefined;
-    this.frontEnds = undefined;
     this.disableAdvanced = false;
-    this.setAsTarget = true;
-    this.runtimes = undefined;
-    this.languages = undefined;
     this.environmentName = undefined;
-    this.createCallback = undefined;
-    this.cancelCallback = undefined;
-    this.changedCallback = undefined;
+    this.frontEnds = undefined;
+    this.getEnvironmentNameCallback = undefined;
+    this.getFrontEndsCallback = undefined;
+    this.getDataSourcesCallback = undefined;
+    this.isAdvanced = false;
+    this.languages = undefined;
+    this.runtimes = undefined;
+    this.setAsTarget = true;
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
   }
+  componentDidLoad() {
+    this.initialSetup();
+  }
   componentDidRender() {
     if (!this.renderedFirstTime) {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
@@ -109,7 +167,8 @@ const GxIdeNewEnvironment = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noBorderFooter: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { class: "header", slot: "header" }, h("gxg-label", { labelPosition: "start", class: "header__label" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "New Environment", "max-width": "100%", value: this.environmentName, ref: (el) => (this.nameEl = el), toolTip: config.tooltip, class: "header__text", part: "environment-name" })), h("main", { class: "main" }, h("gxg-tabs", { class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: this.disableAdvanced })), this.renderTabBasic(), this.renderTabAdvanced())), h("gxg-form-checkbox", { label: this._componentLocale.setCurrentEnvironment, id: "show-current-environment", checked: this.setAsTarget, slot: "footer-start" }), h("gxg-button", { id: "button-create", slot: "footer-end", type: "primary-text-only", onClick: this.setEnvironmentHandler, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnSetNewEnvironment), h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelButtonClickedHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noContentPadding: true, noBorderFooter: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { class: "header", slot: "header" }, h("gxg-label", { labelPosition: "start", class: "header__label" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "New Environment", "max-width": "100%", value: this.environmentName, ref: (el) => (this.environmentNameEl = el), onInput: !this.envNameModifiedByUser && this.envNameInputHandler, toolTip: config.tooltip, class: "header__text", part: "environment-name" })), h("main", { class: "main" }, h("gxg-tabs", { class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true }), this.isAdvanced ? (h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: this.disableAdvanced })) : null), this.renderTabBasic(), this.isAdvanced && this.renderTabAdvanced())), h("gxg-form-checkbox", { label: this._componentLocale.footer.setAsCurrentEnvironment, ref: (el) => (this.setAsCurrentEnvironmentEl =
+        el), checked: this.setAsTarget, part: "set-as-current-environment", slot: "footer-start" }), h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelButtonClickedHandler, 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.setEnvironmentHandler, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnSetNewEnvironment)))));
   }
   static get assetsDirs() { return ["gx-ide-assets/new-environment"]; }
   get el() { return getElement(this); }