@genexus/genexus-ide-ui 0.0.61 → 0.0.63

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"
   }
 }

package/dist/collection/components/kb-manager-export/gx-ide-assets/kb-manager-export/langs/kb-manager-export.lang.en.json

@@ -1,4 +1,5 @@
 {
+  "componentName": "Kb Manager Export",
   "header": {
     "exportFileName": "Export File Name",
     "selectKbButton": "Select Kb",

package/dist/collection/components/kb-manager-export/helpers.js

@@ -7,21 +7,10 @@ INDEX:
 5. findObjectInTree
 6. findPropertyInTree
 7. convertPropertyToTreeItem
-8. convertObjectDataToTreeItemData
+8. updateTreeModelWithObjects
 9. convertKbPropertiesDataToTreeItemData
 10. clearKbPropertiesFromTree
 */
-/* 1.1 getIcon (for objects)*/
-const getObjectIcon = (typeId, objectTypes) => {
-  // The object icon has to be retrieved from the ObjetTypes array, by matching the ObjectData typeId with the ObjectType id.
-  const objectType = objectTypes.find(objectType => objectType.id === typeId);
-  if (objectType) {
-    return objectType.icon;
-  }
-  else {
-    return undefined;
-  }
-};
 /* 1.2 getIcon (for properties)*/
 const getPropertyIcon = (typeId, kbPropertiesTypes) => {
   // The object icon has to be retrieved from the ObjetTypes array, by matching the ObjectData typeId with the ObjectType id.
@@ -40,7 +29,7 @@ const convertObjectTypeToTreeItem = (objectType) => ({
   leftImgSrc: objectType.icon,
   leaf: false,
   checkbox: true,
-  class: "object-type",
+  class: "object-type tree-view-item",
   expanded: true,
   items: []
 });
@@ -48,17 +37,11 @@ const convertObjectTypeToTreeItem = (objectType) => ({
 const convertObjectToTreeItem = (object, objectTypes) => ({
   caption: object.name,
   id: object.id,
-  leftImgSrc: getObjectIcon(object.typeId, objectTypes),
+  leftImgSrc: objectTypes.get(object.typeId).icon,
   checkbox: true,
-  class: "object",
+  class: "object tree-view-item",
   leaf: true
 });
-/* 4. getObjectType*/
-const getObjectType = (object, objectTypes) => {
-  return objectTypes.find(objectType => {
-    return objectType.id === object.typeId;
-  });
-};
 /* 5. findObjectInTree*/
 const findObjectInTree = (object, actualTreeState) => {
   var _a;
@@ -99,12 +82,13 @@ const convertPropertyToTreeItem = (property, kbPropertiesTypes) => ({
   caption: property.name,
   id: property.id,
   leftImgSrc: getPropertyIcon(property.typeId, kbPropertiesTypes),
-  checkbox: true,
-  class: "property",
+  // checkbox: true,
+  class: "property tree-view-item",
+  metadata: "property",
   leaf: true
 });
-/* 8. convertObjectDataToTreeItemData*/
-export const convertObjectDataToTreeItemData = (objects, objectTypes, actualTreeState) => {
+/* 8. updateTreeModelWithObjects*/
+export const updateTreeModelWithObjects = (objects, objectTypes, actualTreeState) => {
   const updatedTreeData = [...actualTreeState];
   if (!objects) {
     // nothing to do
@@ -119,7 +103,7 @@ export const convertObjectDataToTreeItemData = (objects, objectTypes, actualTree
       // if the objectType tree node exists, insert inside.
       // if the objectType tree node does not exists, create object type node first.
       if (objectTreeItemInfo.objectTypeIndex === -1) {
-        const objectType = getObjectType(object, objectTypes);
+        const objectType = objectTypes.get(object.typeId);
         if (objectType !== undefined) {
           const objectTypeTreeItem = convertObjectTypeToTreeItem(objectType);
           objectTreeItemInfo.objectTypeIndex =

package/dist/collection/components/kb-manager-export/kb-manager-export.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*/
 /*general*/
@@ -152,51 +170,65 @@ gxg-tabs {
 }
 
 /*Header*/
-.header {
+.header__top {
+  border-top: 1px solid var(--gx-ide-container-border-color);
   display: grid;
+  padding: var(--gxg-container--padding) var(--gxg-container--padding) 0 var(--gxg-container--padding);
   gap: var(--gx-ide-grid-column-gap);
   grid-template-columns: 1fr auto;
   grid-template-areas: "select-directory export-cancel-buttons-group options-btn";
 }
-.header .select-directory {
+.header__top .select-directory {
   grid-area: select-directory;
 }
-.header .export-cancel-buttons-group {
+.header__top .export-cancel-buttons-group {
   grid-area: export-cancel-buttons-group;
 }
-.header .options-btn {
+.header__top .options-btn {
   grid-area: options-btn;
 }
-
-/*Main*/
-.checkboxes-wrapper {
+.header__bottom .checkboxes-wrapper {
   padding: var(--gx-ide-grid-column-gap);
   display: flex;
   flex-wrap: wrap;
   gap: var(--gx-ide-grid-column-gap);
-  border-bottom: 1px solid var(--gx-ide-container-border-color);
 }
-.checkboxes-wrapper .add-checkbox {
+.header__bottom .checkboxes-wrapper .add-checkbox {
   display: flex;
 }
 
-.tree-container {
-  display: flex;
-  min-height: 150px;
-  max-height: 350px;
-  padding-left: var(--gx-ide-grid-column-gap);
-  width: 100%;
-  box-sizing: border-box;
-}
+/*Main*/
 .tree-container--empty {
-  padding-left: 0;
   align-items: center;
   justify-content: center;
 }
+.tree-container .tree-view-item.object-type {
+  animation-duration: 200ms;
+  animation-fill-mode: forwards;
+}
+.tree-container--export-all .tree-view-item.object-type {
+  animation-name: toggleTreeObjectsVisibility;
+}
+.tree-container .gx-ide-message {
+  padding: 100px 0;
+}
 
 /*Footer*/
 .footer-right-wrapper {
   display: grid;
   gap: var(--gx-ide-grid-column-gap);
   grid-template-columns: 100px 100px;
+}
+
+@keyframes toggleTreeObjectsVisibility {
+  0% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    display: none;
+  }
 }