@genexus/genexus-ide-ui 0.0.62 → 0.0.63

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

@@ -1,3 +1,8 @@
 :host {
   display: block;
+}
+
+.tree-container {
+  display: flex;
+  height: 200px;
 }

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

@@ -1,64 +1,32 @@
 /* STENCIL IMPORTS */
-import { Host, h } from "@stencil/core";
-import { renderTreeItems } from "../../common/render-tree";
-import { updateTreeModel } from "../../common/update-tree-model";
+import { 
+// Host,
+h } from "@stencil/core";
 /* CUSTOM IMPORTS */
 export class GxIdeTest {
   constructor() {
+    /* THIS IS A COMPONENT FOR TESTING PURPOSES. DO WHATEVER YOU WANT.*/
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE METHODS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES //
     this.renderedFirstTime = false;
+    // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
-    /* Gxg-Tree Methods*/
-    this.closeTreeNodeHandler = () => {
-      this.tree.toggleItems(["number-1-1-2"], false);
+    this.checkAllHandler = () => {
+      this.treeViewEl.updateAllItemsProperties({ checked: true });
     };
-    this.openTreeNodeHandler = () => {
-      this.tree.toggleItems(["number-1-1-2"], true);
-    };
-    this.toggleTreeNodeHandler = () => {
-      this.tree.toggleItems(["number-1-1-2"]);
-    };
-    this.getSelectedItemsHandler = () => {
-      (async () => {
-        const selected = await this.tree.getSelectedItems();
-        console.log(selected);
-      })();
-    };
-    this.getCheckedItemsHandler = () => {
-      (async () => {
-        const checked = await this.tree.getCheckedItems();
-        console.log(checked);
-      })();
-    };
-    this.deleteNodeHandler = () => {
-      this.treeModel = [];
-    };
-    /* Update model test*/
-    // private showTree = () => {
-    //   this.treeModel = [];
-    // };
-    // private updateTree = () => {
-    //   this.treeModel = [];
-    // };
-    this.treeItemStateChangedHandler = (e) => {
-      // const event = e.detail.emittedBy;
-      const nodeData = e.detail.itemData;
-      const nodeId = e.detail.itemData.id;
-      if (nodeData.lazy) {
-        this.updateLazyCallback(nodeId).then(children => {
-          if (children === null || children === void 0 ? void 0 : children.length) {
-            const updatedTreeModel = updateTreeModel(this.treeModel, { id: nodeId, label: nodeData.label, items: children }, nodeId);
-            this.treeModel = updatedTreeModel;
-          }
-        });
-      }
-    };
-    this.treeModel = undefined;
-    this.lazyNode = undefined;
-    this.updateLazyCallback = undefined;
-    this.newNode = undefined;
-    this.testUpdateNode = false;
-    this.lazyLoadTreeItemsCallback = undefined;
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   componentDidRender() {
@@ -67,33 +35,97 @@ export class GxIdeTest {
       this.renderedFirstTime = true;
     }
   }
-  // 7.LISTENERS //
-  loadLazyChildrenHandler(e) {
-    const treeItemId = e.detail;
-    if (this.lazyLoadTreeItemsCallback) {
-      const promise = this.lazyLoadTreeItemsCallback(treeItemId);
-      setTimeout(() => {
-        promise.then(result => {
-          this.treeModel = result;
-        });
-      }, 1000);
-    }
-  }
-  treeItemStateChanged(event) {
-    const updatedTreeModel = updateTreeModel(this.treeModel, event.detail, event.detail.id);
-    console.log("updatedTreeModel", updatedTreeModel);
+  componentDidLoad() {
+    this.treeViewEl.treeModel = [
+      {
+        id: "number-1",
+        caption: "number-1 label (always editable)",
+        class: "tree-view-item tree-view-item--success",
+        leaf: false,
+        leftImgSrc: "./objects/datastore",
+        editable: true,
+        checkbox: true,
+        items: [
+          {
+            id: "number-1-1",
+            caption: "number-1-1 (always editable)",
+            leaf: false,
+            leftImgSrc: "/build/ch-icon-assets/patterns",
+            editable: true,
+            checkbox: true,
+            items: [
+              {
+                id: "number-1-1-1",
+                caption: "number-1-1-1",
+                leaf: true,
+                checkbox: true,
+                leftImgSrc: "./objects/knowledge-base"
+              },
+              {
+                id: "number-1-1-2",
+                caption: "number-1-1-2",
+                leaf: false,
+                checkbox: true,
+                leftImgSrc: "./objects/knowledge-base",
+                items: [
+                  {
+                    id: "number-1-1-2-1",
+                    caption: "number-1-1-2-1 (lazy, drag disabled)",
+                    leaf: false,
+                    leftImgSrc: "./objects/knowledge-base",
+                    lazy: true,
+                    checkbox: true,
+                    dragDisabled: true,
+                    toggleCheckboxes: true
+                  },
+                  {
+                    id: "number-1-1-2-2",
+                    caption: "number-1-1-2-2",
+                    leaf: true,
+                    checkbox: true,
+                    leftImgSrc: "/build/ch-icon-assets/java"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: "number-1-2",
+            caption: "number-1-2",
+            leaf: true,
+            checkbox: true,
+            leftImgSrc: "./objects/knowledge-base"
+          }
+        ]
+      },
+      {
+        id: "number-2",
+        caption: "number-2",
+        class: "tree-view-item tree-view-item--custom-image",
+        checkbox: true,
+        leaf: false,
+        items: [
+          {
+            id: "number-2-1",
+            caption: "number-2-1",
+            leaf: true,
+            checkbox: true,
+            leftImgSrc: "/build/ch-icon-assets/java"
+          },
+          {
+            id: "number-2-2",
+            caption: "number-2-2",
+            leaf: true,
+            checkbox: true,
+            leftImgSrc: "./objects/knowledge-base"
+          }
+        ]
+      }
+    ];
   }
   // 10.RENDER() FUNCTION //
   render() {
-    if (!this.testUpdateNode && this.treeModel) {
-      return (h(Host, null, h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el) }, renderTreeItems(this.treeModel)), ",", h("div", { class: "tree-buttons" }, h("gxg-button", { type: "outlined", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.getSelectedItemsHandler }, "Get Selected Items"), h("gxg-button", { type: "outlined", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), h("gxg-button", { type: "outlined", onClick: this.deleteNodeHandler }, "Delete Tree"))));
-    }
-    else if (this.testUpdateNode) {
-      return (h(Host, null, h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el), onTreeItemStateChanged: this.treeItemStateChangedHandler }, renderTreeItems(this.treeModel))));
-    }
-    else {
-      return h("slot", null);
-    }
+    return (h("div", null, h("div", { class: "tree-container" }, h("gxg-tree-view", { ref: el => (this.treeViewEl = el) })), h("label", null, "Check item", h("input", { type: "checkbox", name: "", id: "check-all", onInput: this.checkAllHandler }))));
   }
   static get is() { return "gx-ide-test"; }
   static get encapsulation() { return "shadow"; }
@@ -107,134 +139,6 @@ export class GxIdeTest {
       "$": ["test.css"]
     };
   }
-  static get properties() {
-    return {
-      "treeModel": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "GxgTreeItemData[]",
-          "resolved": "GxgTreeItemData[]",
-          "references": {
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The model for a gxg-tree"
-        }
-      },
-      "lazyNode": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "GxgTreeItemData[]",
-          "resolved": "GxgTreeItemData[]",
-          "references": {
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A new lazy node"
-        }
-      },
-      "updateLazyCallback": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(\n    id: string\n  ) => Promise<GxgTreeItemData[]>",
-          "resolved": "(id: string) => Promise<GxgTreeItemData[]>",
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A new lazy node"
-        }
-      },
-      "newNode": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "GxgTreeItemData[]",
-          "resolved": "GxgTreeItemData[]",
-          "references": {
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The new tree node to update"
-        }
-      },
-      "testUpdateNode": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "false",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Update tree model test"
-        },
-        "attribute": "test-update-node",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "lazyLoadTreeItemsCallback": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(\n    treeItemId: string\n  ) => Promise<GxgTreeItemData[]>",
-          "resolved": "(treeItemId: string) => Promise<GxgTreeItemData[]>",
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A callback that returns a Promise with the new tree model"
-        }
-      }
-    };
-  }
   static get events() {
     return [{
         "method": "componentDidRenderFirstTime",
@@ -256,19 +160,4 @@ export class GxIdeTest {
         }
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "loadLazyChildren",
-        "method": "loadLazyChildrenHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "treeItemStateChanged",
-        "method": "treeItemStateChanged",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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.
@@ -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 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,
+  // 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

@@ -202,6 +202,13 @@ gxg-tabs {
   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;
 }
@@ -211,4 +218,17 @@ gxg-tabs {
   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;
+  }
 }

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

@@ -3,18 +3,20 @@ import { Host, h } from "@stencil/core";
 /* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
 import { config } from "../../common/config";
-import { convertObjectDataToTreeItemData, convertKbPropertiesDataToTreeItemData, clearKbPropertiesFromTree } from "./helpers";
+import { updateTreeModelWithObjects, convertKbPropertiesDataToTreeItemData, clearKbPropertiesFromTree } from "./helpers";
+const KB_PROPERTIES = "properties";
 export class GxIdeKbManagerExport {
   constructor() {
     this.checkedObjectsIds = [];
     this.checkedPropertiesIds = [];
     this.renderedFirstTime = false;
+    this.flattenedObjectTypes = new Map();
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
     this.evaluateObjects = () => {
       var _a;
-      this.noObjects = !!(((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.objectsTreeState);
+      this.noObjects = !!(((_a = this.treeModel) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.treeModel);
     };
     this.optionsCallbackHandler = () => {
       if (this.optionsCallback) {
@@ -31,14 +33,14 @@ export class GxIdeKbManagerExport {
         }
         else {
           // 'convertObjectDataToTreeItemData' can be used for converting KBPropertiesData as well, because the two types share the same properties
-          const objectsNewTreeState = convertKbPropertiesDataToTreeItemData(kBPropertiesData, this.kbPropertiesTypes, this.objectsTreeState);
-          this.objectsTreeState = objectsNewTreeState;
+          const newTreeModel = convertKbPropertiesDataToTreeItemData(kBPropertiesData, this.kbPropertiesTypes, this.treeModel);
+          this.treeModel = newTreeModel;
         }
       }
       else if (!checked) {
         // previous properties (if any) should be removed
-        const objectsWithoutProperties = clearKbPropertiesFromTree(this.objectsTreeState);
-        this.objectsTreeState = objectsWithoutProperties;
+        const objectsWithoutProperties = clearKbPropertiesFromTree(this.treeModel);
+        this.treeModel = objectsWithoutProperties;
       }
     };
     this.addObjectsCallbackHandler = async () => {
@@ -58,9 +60,9 @@ export class GxIdeKbManagerExport {
      */
     this.updateObjects = (objects) => {
       if (objects.length) {
-        const objectsNewTreeState = convertObjectDataToTreeItemData(objects, this.objectTypes, this.objectsTreeState);
-        // console.log("objectsNewTreeState", objectsNewTreeState);
-        this.objectsTreeState = objectsNewTreeState;
+        const newTreeModel = updateTreeModelWithObjects(objects, this.flattenedObjectTypes, this.treeModel);
+        console.log(JSON.stringify(newTreeModel, undefined, 2));
+        this.treeModel = newTreeModel;
       }
     };
     /*
@@ -108,12 +110,17 @@ export class GxIdeKbManagerExport {
     };
     this.clearButtonHandler = () => {
       /* revisar*/
+      console.log("clear button clicked");
       this.objectsTreeEl.updateAllItemsProperties({ checked: false });
     };
+    this.exportAllChangedHandler = (event) => {
+      this.exportAllIsChecked = event.detail.value;
+    };
+    this.exportAllIsChecked = false;
     this.fileName = "";
     this.exportFilePathName = undefined;
     this.noObjects = undefined;
-    this.objectsTreeState = [];
+    this.treeModel = [];
     this.dummyInitialTree = undefined;
     this.kbPropertiesTypes = undefined;
     this.objectTypes = undefined;
@@ -125,17 +132,21 @@ export class GxIdeKbManagerExport {
     this.exportCallback = undefined;
     this.cancelCallback = undefined;
   }
-  watchObjectsTreeStateHandler(newState) {
+  watchtreeModelHandler(newState) {
     this.noObjects = !!(newState.length === 0 || !newState);
   }
   watchDummyInitialTreeHandler(newTree) {
-    this.objectsTreeState = newTree;
+    this.treeModel = newTree;
+  }
+  watchObjectTypeslHandler(newState) {
+    this.flattenObjectTypes(newState);
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
     this.componentDidLoadEvent.emit(true);
     this.evaluateObjects();
+    this.flattenObjectTypes(this.objectTypes);
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -143,18 +154,23 @@ export class GxIdeKbManagerExport {
       this.renderedFirstTime = true;
     }
   }
+  flattenObjectTypes(newState) {
+    newState.forEach(objectType => {
+      this.flattenedObjectTypes.set(objectType.id, objectType);
+    });
+  }
   // 10.RENDER() FUNCTION //
   render() {
     return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noHeadingPadding: true, headingPaddingTop: true, containerTitle: this._componentLocale.componentName, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__top" }, h("gx-ide-directory-selector", { class: { "select-file-input": true }, value: this.exportFilePathName, part: "xpz-file", label: this._componentLocale.header.exportFileName, ref: el => (this.fileNameEl = el), selectDirectoryCallback: this.exportFileDirectoryCallback }), h("gxg-button-group", { class: "export-cancel-buttons-group", "default-selected-btn-id": "responsive-tablet-btn" }, h("button", { id: "export-kb-btn", part: "export-btn", onClick: this.exportCallbackHandler }, this._componentLocale.header.exportButton), h("button", { id: "cancel-kb-export-btn", part: "cancel-button", onClick: this.cancelCallbackHandler }, this._componentLocale.header.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", part: "select-kb-btn", class: { "options-btn": true }, onClick: this.optionsCallbackHandler }, this._componentLocale.header.optionsButton)), h("div", { class: "header__bottom" }, h("div", { class: { "checkboxes-wrapper": true } }, h("gxg-form-checkbox", { label: this._componentLocale.main.addKnowledgeBaseDescription, onChange: this.addKBPropertiesCallbackHandler, part: "add-kb-checkbox" }), h("gxg-form-checkbox", { label: this._componentLocale.main.exportAll, part: "export-all-checkbox", ref: el => (this.exportAllCheckboxEl =
-        el) })))), h("div", { class: {
+        el), onChange: this.exportAllChangedHandler })))), h("div", { class: {
         "tree-container": true,
         "tree-container--empty": this.noObjects
+        // "tree-container--export-all": this.exportAllIsChecked
       } }, !this.noObjects ? (
     /* objects tree */
-    h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, 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, class: "gx-ide-message gx-ide-message--short", part: "referenced-by-empty-status-message" }, "There are no Objects to display. ", h("br", null), h("gxg-text", { type: "text-link-no-line", textAlign: "center", onClick: this.addObjectsCallbackHandler }, "Begin by adding some.")))), h("gxg-button", { type: "secondary-text-only", part: "export-button", class: { "cancel-btn": true }, slot: "footer-start", onClick: this.clearButtonHandler }, this._componentLocale.footer.clearButton), h("div", { class: { "footer-right-wrapper": true }, slot: "footer-end" }, h("gxg-button", { onClick: this.addReferencesCallbackHandler, type: "outlined-text-icon", icon: "general/references", part: "export-button", class: { "cancel-btn": true } }, this._componentLocale.footer.referencesButton), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", part: "export-button", class: { "cancel-btn": true }, onClick: this.addObjectsCallbackHandler, grabAttention: this.noObjects }, this._componentLocale.footer.addButton))))));
+    h("ch-tree-view-render", { treeModel: this.treeModel, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checked: true, checkbox: true, filter: KB_PROPERTIES, filterType: this.exportAllIsChecked ? "metadata" : "none", onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, 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, class: "gx-ide-message gx-ide-message--short", part: "referenced-by-empty-status-message" }, "There are no Objects to display. ", h("br", null), h("gxg-text", { type: "text-link-no-line", textAlign: "center", onClick: this.addObjectsCallbackHandler }, "Begin by adding some.")))), h("gxg-button", { type: "secondary-text-only", part: "export-button", class: { "cancel-btn": true }, slot: "footer-start", onClick: this.clearButtonHandler }, this._componentLocale.footer.clearButton), h("div", { class: { "footer-right-wrapper": true }, slot: "footer-end" }, h("gxg-button", { onClick: this.addReferencesCallbackHandler, type: "outlined-text-icon", icon: "general/references", part: "export-button", class: { "cancel-btn": true }, disabled: this.exportAllIsChecked }, this._componentLocale.footer.referencesButton), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", part: "export-button", class: { "cancel-btn": true }, onClick: this.addObjectsCallbackHandler, disabled: this.exportAllIsChecked, grabAttention: this.noObjects }, this._componentLocale.footer.addButton))))));
   }
   static get is() { return "gx-ide-kb-manager-export"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["kb-manager-export.scss"]
@@ -172,12 +188,12 @@ export class GxIdeKbManagerExport {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "TreeXItemModel[]",
-          "resolved": "TreeXItemModel[]",
+          "original": "TreeViewItemModel[]",
+          "resolved": "TreeViewItemModel[]",
           "references": {
-            "TreeXItemModel": {
+            "TreeViewItemModel": {
               "location": "import",
-              "path": "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-x/types"
+              "path": "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types"
             }
           }
         },
@@ -381,10 +397,11 @@ export class GxIdeKbManagerExport {
   }
   static get states() {
     return {
+      "exportAllIsChecked": {},
       "fileName": {},
       "exportFilePathName": {},
       "noObjects": {},
-      "objectsTreeState": {}
+      "treeModel": {}
     };
   }
   static get events() {
@@ -423,11 +440,14 @@ export class GxIdeKbManagerExport {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "objectsTreeState",
-        "methodName": "watchObjectsTreeStateHandler"
+        "propName": "treeModel",
+        "methodName": "watchtreeModelHandler"
       }, {
         "propName": "dummyInitialTree",
         "methodName": "watchDummyInitialTreeHandler"
+      }, {
+        "propName": "objectTypes",
+        "methodName": "watchObjectTypeslHandler"
       }];
   }
 }

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

@@ -9,6 +9,7 @@
   "main": {
     "objectsInFile": {
       "title": "Objects in File",
+      "selectUnselect": "Select All / Unselect All",
       "selectAll": "Click to select all",
       "deselectAll": "Click to deselect all",
       "importButton": "Import",