@genexus/genexus-ide-ui 1.0.3 → 1.0.5

package/dist/components/gx-ide-kb-manager-export.js

@@ -1,36 +1,15 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
-import { c as config } from './config.js';
-import { d as defineCustomElement$3 } from './container.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { g as getIconPath } from './assets-manager.js';
+import { d as defineCustomElement$3 } from './gx-ide-empty-state2.js';
+import { d as defineCustomElement$2 } from './ide-loader.js';
 
 const KB_PROPERTY = "property";
 const KB_OBJECT = "object";
-/*
-INDEX:
-1. getObjectIcon
-2. convertObjectTypeToTreeItem
-3. convertObjectToTreeItem
-4. getObjectType
-5. findObjectInTree
-6. findPropertyInTree
-7. convertPropertyToTreeItem
-8. updateTreeModelWithObjects
-9. convertKbPropertiesDataToTreeItemData
-10. clearKbPropertiesFromTree
-*/
-/* 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.
-    const propertyType = kbPropertiesTypes.find(propertyType => propertyType.id === typeId);
-    if (propertyType) {
-        return propertyType.icon;
-    }
-    else {
-        return undefined;
-    }
-};
-/* 2. convertObjectTypeToTreeItem*/
+const getPropertyIcon = (typeId, kbPropertiesTypes) => 
+// The object icon has to be retrieved from the ObjectTypes array, by
+// matching the ObjectData typeId with the ObjectType id
+kbPropertiesTypes.find(propertyType => propertyType.id === typeId).icon;
 const convertObjectTypeToTreeItem = (objectType) => ({
     caption: objectType.name,
     id: objectType.id,
@@ -40,7 +19,6 @@ const convertObjectTypeToTreeItem = (objectType) => ({
     expanded: true,
     items: []
 });
-/* 3. convertObjectToTreeItem*/
 const convertObjectToTreeItem = (object, objectTypes) => ({
     caption: object.name,
     id: object.id,
@@ -49,42 +27,6 @@ const convertObjectToTreeItem = (object, objectTypes) => ({
     metadata: KB_OBJECT,
     leaf: true
 });
-/* 5. findObjectInTree*/
-const findObjectInTree = (object, actualTreeState) => {
-    var _a;
-    const objectTreeItemInfo = {
-        objectExists: false,
-        objectTypeIndex: -1
-    };
-    if (actualTreeState) {
-        const objectTypeTreeItemIndex = actualTreeState.findIndex(objectTypeTreeItem => {
-            return objectTypeTreeItem.id === object.typeId;
-        });
-        if (objectTypeTreeItemIndex !== -1) {
-            objectTreeItemInfo.objectTypeIndex = objectTypeTreeItemIndex;
-            // objectType exists as a node in the actual tree.
-            // Now try to find the object
-            const objectFound = (_a = actualTreeState[objectTypeTreeItemIndex].items) === null || _a === void 0 ? void 0 : _a.find(objectTreeItem => {
-                return objectTreeItem.id === object.id;
-            });
-            if (objectFound) {
-                objectTreeItemInfo.objectExists = true;
-            }
-        }
-    }
-    return objectTreeItemInfo;
-};
-/* 6. findPropertyInTree */
-const findPropertyInTree = (property, updatedTreeData) => {
-    const found = updatedTreeData.find(node => {
-        return node.id === property.id;
-    });
-    if (found) {
-        return true;
-    }
-    return false;
-};
-/* 7. convertPropertyToTreeItem */
 const convertPropertyToTreeItem = (property, kbPropertiesTypes) => ({
     caption: property.name,
     id: property.id,
@@ -93,146 +35,247 @@ const convertPropertyToTreeItem = (property, kbPropertiesTypes) => ({
     metadata: KB_PROPERTY,
     leaf: true
 });
-/* 8. updateTreeModelWithObjects*/
-const updateTreeModelWithObjects = (objects, objectTypes, actualTreeState) => {
-    const updatedTreeData = [...actualTreeState];
+/**
+ * Updates the tree model with the provided objects.
+ * Objects may already exist and are placed under their parent node.
+ * If the parent node doesn't exist (identified by typeId on ObjectTypes),
+ * it is created and added at the bottom.
+ *
+ * @param {ObjectData[] | undefined} objects - The array of objects to update.
+ * @param {Map<string, ObjectType>} objectTypesMap - A map of object types by ID.
+ * @param {Set<string>} objectsSet - A set of existing object IDs.
+ * @param {TreeViewModel} actualTreeState - The current tree state to be updated.
+ * @returns {TreeViewModel} - The updated tree view model.
+ */
+const updateObjectsTreeModel = (objects, objectTypesMap, objectsSet, actualTreeState) => {
     if (!objects) {
-        // nothing to do
-        return updatedTreeData;
+        return [...actualTreeState];
     }
+    const updatedTreeData = [...actualTreeState];
     objects.forEach(object => {
         // objects that already exists in the actual actualTreeState should not be added.
-        // We can find the object in the actual actualTreeState.
-        const objectTreeItemInfo = findObjectInTree(object, updatedTreeData);
-        if (!objectTreeItemInfo.objectExists) {
-            // object does not exists in actualTreeState
-            // 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 = objectTypes.get(object.typeId);
-                if (objectType !== undefined) {
-                    const objectTypeTreeItem = convertObjectTypeToTreeItem(objectType);
-                    objectTreeItemInfo.objectTypeIndex =
-                        updatedTreeData.push(objectTypeTreeItem) - 1;
-                }
+        if (objectsSet.has(object.id)) {
+            // object already exists
+            return;
+        }
+        const objectTreeItem = convertObjectToTreeItem(object, objectTypesMap);
+        // TODO: Improve the algorithm efficiency. This check visits potentially all nodes
+        // from the TreeViewModel on each iteration. Using a Map to pre-store the TreeView
+        // nodes would improve efficiency.
+        const objectTypeTreeItemIndex = updatedTreeData.findIndex(treeItem => treeItem.id === object.typeId);
+        if (objectTypeTreeItemIndex === -1) {
+            // Create and add new object type tree item
+            const objectType = objectTypesMap.get(object.typeId);
+            if (objectType) {
+                const objectTypeTreeItem = convertObjectTypeToTreeItem(objectType);
+                objectTypeTreeItem.items.push(objectTreeItem);
+                updatedTreeData.push(objectTypeTreeItem);
             }
-            const objectAsTreeItem = convertObjectToTreeItem(object, objectTypes);
-            // insert object in tree (under the object type tree node)
-            updatedTreeData[objectTreeItemInfo.objectTypeIndex].items.push(objectAsTreeItem);
         }
+        else {
+            // objectType exists already. insert object as children of the object type tree item.
+            updatedTreeData[objectTypeTreeItemIndex].items.push(objectTreeItem);
+        }
+        objectsSet.add(object.id);
     });
     return updatedTreeData;
 };
-/* 9. convertKbPropertiesDataToTreeItemData*/
+/**
+ * Converts an array of KB properties data into tree item data for a tree view.
+ *
+ * @param {KBPropertyData[]} properties - The array of KB property data.
+ * @param {KBPropertyType[]} kbPropertiesTypes - The array of KB property types.
+ * @param {TreeViewModel} actualTreeState - The current state of the tree.
+ * @returns {TreeViewModel} - The updated tree view item models.
+ */
 const convertKbPropertiesDataToTreeItemData = (properties, kbPropertiesTypes, actualTreeState) => {
-    const updatedTreeData = [...actualTreeState];
     if (!properties) {
-        // nothing to do
-        return updatedTreeData;
+        return [...actualTreeState];
     }
+    const updatedTreeData = [...actualTreeState];
     properties.forEach(property => {
         // properties have no parent node, and they should be added at the beginning of the tree
-        const propertyAlreadyExists = findPropertyInTree(property, updatedTreeData);
-        if (!propertyAlreadyExists) {
-            const propertyTreeItem = convertPropertyToTreeItem(property, kbPropertiesTypes);
-            updatedTreeData.unshift(propertyTreeItem);
+        const propertyAlreadyExists = updatedTreeData.find(node => node.id === property.id) !== undefined;
+        if (propertyAlreadyExists) {
+            return;
         }
+        const propertyTreeItem = convertPropertyToTreeItem(property, kbPropertiesTypes);
+        updatedTreeData.unshift(propertyTreeItem);
     });
     return updatedTreeData;
 };
-/* 10. clearKbPropertiesFromTree*/
-const clearKbPropertiesFromTree = (kBPropertiesData, actualTreeState) => {
-    if (!(actualTreeState.length > 0)) {
-        // nothing to do.
-        return [];
-    }
-    const kBPropertiesDataIds = kBPropertiesData.map(property => {
-        return property.id;
-    });
-    const treeModelWithoutKbProperties = actualTreeState.filter(item => {
-        return !kBPropertiesDataIds.includes(item.id);
-    });
-    return treeModelWithoutKbProperties;
-};
+/**
+ * Removes properties from the tree model.
+ *
+ * @param {TreeViewModel} actualTreeState - The current state of the tree,
+ * containing various tree view items.
+ * @returns {TreeViewModel} - A new array of tree view items that excludes
+ * any items with metadata of type `KB_PROPERTY`.
+ */
+const clearKbPropertiesFromTree = (actualTreeState) => actualTreeState.filter(item => item.metadata !== KB_PROPERTY);
 
-const kbManagerExportCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.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}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content: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(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){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(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}.tree-view-container{display:flex}.header__top{border-top:1px solid var(--gx-ide-container-border-color);display:grid;padding:var(--gx-ide-container__padding) var(--gx-ide-container__padding) 0 var(--gx-ide-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__top .select-directory{grid-area:select-directory}.header__top .export-cancel-buttons-group{grid-area:export-cancel-buttons-group}.header__top .options-btn{grid-area:options-btn}.header__bottom .checkboxes-wrapper{padding:var(--gx-ide-grid-column-gap);display:flex;flex-wrap:wrap;gap:var(--gx-ide-grid-column-gap)}.header__bottom .checkboxes-wrapper .add-checkbox{display:flex}.tree-container{block-size:100%;padding:var(--tree-container-padding)}.tree-container--empty{align-items:center;justify-content:center}.tree-container .gx-ide-message{padding:100px 0}gxg-text{block-size:100%}";
+const kbManagerExportCss = ".section{display:grid;block-size:100%;grid-template:\"export-file-name buttons-container buttons-container buttons-container\" max-content \"checkboxes checkboxes checkboxes checkboxes\" max-content \"main main main main\" 1fr \"footer footer footer footer\" max-content/1fr max-content max-content max-content}.header{display:contents}.header .export-file-name{grid-area:export-file-name}.header__buttons-container{grid-area:buttons-container;display:flex;gap:var(--mer-spacing--sm)}.header__checkboxes{grid-area:checkboxes;grid-template-columns:max-content 1fr}.main{grid-area:main;position:relative}.footer{grid-area:footer;justify-content:space-between}.footer .clear-btn{margin-inline-end:auto}";
 
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GxIdeKbManagerExport_instances, _GxIdeKbManagerExport_addKbDescriptionEl, _GxIdeKbManagerExport_componentLocale, _GxIdeKbManagerExport_animateEmptyState, _GxIdeKbManagerExport_exportAllEl, _GxIdeKbManagerExport_fileNameEl, _GxIdeKbManagerExport_kBPropertiesData, _GxIdeKbManagerExport_objectTypesMap, _GxIdeKbManagerExport_objectsSet, _GxIdeKbManagerExport_addKBPropertiesCallbackHandler, _GxIdeKbManagerExport_addObjectsCallbackHandler, _GxIdeKbManagerExport_addReferencesCallbackHandler, _GxIdeKbManagerExport_cancelCallbackHandler, _GxIdeKbManagerExport_clearButtonHandler, _GxIdeKbManagerExport_evaluateContentToDisplay, _GxIdeKbManagerExport_evaluateObjects, _GxIdeKbManagerExport_evaluateTreeViewFilters, _GxIdeKbManagerExport_exportAllChangedHandler, _GxIdeKbManagerExport_exportCallbackHandler, _GxIdeKbManagerExport_objectsTypesArrayToMap, _GxIdeKbManagerExport_objectsTreeCheckedItemsChangedHandler, _GxIdeKbManagerExport_sortTreeItems, _GxIdeKbManagerExport_renderFooter, _GxIdeKbManagerExport_updateObjects;
+const FILE_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "file",
+    colorType: "on-elevation"
+});
+const SETTINGS_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "settings",
+    colorType: "primary"
+});
+const GENERAL_REFERENCES_ICON = getIconPath({
+    category: "window-tools",
+    name: "references",
+    colorType: "neutral"
+});
+const MENUS_NEW_OBJECT_ICON = getIconPath({
+    category: "menus",
+    name: "new-object",
+    colorType: "on-primary"
+});
+const TREE_VIEW_ICON = getIconPath({
+    category: "controls",
+    name: "treeview"
+});
+const CHECKBOX_CHECKED_VALUE = "true";
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    "utils/form",
-    "utils/layout",
-    "utils/typography",
     "components/button",
     "components/checkbox",
     "components/edit",
-    "components/tree-view"
+    "components/icon",
+    "components/tree-view",
+    "utils/form",
+    "utils/layout",
+    "utils/typography"
 ];
 const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManagerExport extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        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.treeModel) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.treeModel);
-        };
-        this.optionsCallbackHandler = () => {
-            if (this.optionsCallback) {
-                this.optionsCallback();
-                // returns Promise<void>
-            }
-        };
-        this.addKBPropertiesCallbackHandler = async (e) => {
-            const checked = e.detail.value;
-            this.addKbPropertiesIsChecked = checked;
-            if (checked && this.addKBPropertiesCallback) {
-                this.kBPropertiesData = await this.addKBPropertiesCallback();
-                if (this.kBPropertiesData.length === 0) ;
-                else {
-                    // 'convertObjectDataToTreeItemData' can be used for converting KBPropertiesData as well, because the two types share the same properties
-                    const newTreeModel = convertKbPropertiesDataToTreeItemData(this.kBPropertiesData, this.kbPropertiesTypes, this.treeModel);
-                    this.treeModel = newTreeModel;
+        _GxIdeKbManagerExport_instances.add(this);
+        _GxIdeKbManagerExport_addKbDescriptionEl.set(this, void 0);
+        _GxIdeKbManagerExport_componentLocale.set(this, void 0);
+        _GxIdeKbManagerExport_animateEmptyState.set(this, false);
+        _GxIdeKbManagerExport_exportAllEl.set(this, void 0);
+        _GxIdeKbManagerExport_fileNameEl.set(this, void 0);
+        _GxIdeKbManagerExport_kBPropertiesData.set(this, void 0);
+        /**
+         * Stores the object types information (name, and icon)
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeKbManagerExport_objectTypesMap.set(this, new Map());
+        /**
+         * Stores the object's id that have been added.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeKbManagerExport_objectsSet.set(this, new Set());
+        _GxIdeKbManagerExport_addKBPropertiesCallbackHandler.set(this, async (e) => {
+            this.addKbPropertiesIsChecked =
+                e.detail.target.value === CHECKBOX_CHECKED_VALUE;
+            if (this.addKbPropertiesIsChecked) {
+                __classPrivateFieldSet(this, _GxIdeKbManagerExport_kBPropertiesData, await this.addKBPropertiesCallback(), "f");
+                if (__classPrivateFieldGet(this, _GxIdeKbManagerExport_kBPropertiesData, "f").length) {
+                    this.objectsTreeViewModel = convertKbPropertiesDataToTreeItemData(__classPrivateFieldGet(this, _GxIdeKbManagerExport_kBPropertiesData, "f"), this.kbPropertiesTypes, this.objectsTreeViewModel);
                 }
             }
-            else if (!checked) {
+            else {
                 // previous properties (if any) should be removed
-                const objectsWithoutProperties = clearKbPropertiesFromTree(this.kBPropertiesData, this.treeModel);
-                this.treeModel = objectsWithoutProperties;
+                this.objectsTreeViewModel = clearKbPropertiesFromTree(this.objectsTreeViewModel);
             }
-        };
-        this.addObjectsCallbackHandler = async () => {
-            if (this.addObjectsCallback) {
-                const objects = await this.addObjectsCallback();
-                this.updateObjects(objects);
+        });
+        _GxIdeKbManagerExport_addObjectsCallbackHandler.set(this, async () => {
+            __classPrivateFieldGet(this, _GxIdeKbManagerExport_exportAllEl, "f").value = undefined;
+            this.exportAllIsChecked = false;
+            const addedObjects = await this.addObjectsCallback();
+            __classPrivateFieldGet(this, _GxIdeKbManagerExport_updateObjects, "f").call(this, addedObjects);
+        });
+        _GxIdeKbManagerExport_addReferencesCallbackHandler.set(this, async () => {
+            const objects = await this.addReferencesCallback(this.checkedObjectsIds);
+            __classPrivateFieldGet(this, _GxIdeKbManagerExport_updateObjects, "f").call(this, objects);
+        });
+        _GxIdeKbManagerExport_cancelCallbackHandler.set(this, async () => {
+            const cancelled = await this.cancelCallback();
+            if (cancelled) {
+                this.exportingIsInProcess = false;
             }
-        };
-        this.addReferencesCallbackHandler = async () => {
-            if (this.addReferencesCallback) {
-                const objects = await this.addReferencesCallback(this.checkedObjectsIds);
-                this.updateObjects(objects);
+        });
+        _GxIdeKbManagerExport_clearButtonHandler.set(this, () => {
+            this.objectsTreeViewModel = [];
+            __classPrivateFieldGet(this, _GxIdeKbManagerExport_objectsSet, "f").clear();
+            __classPrivateFieldGet(this, _GxIdeKbManagerExport_addKbDescriptionEl, "f").value = undefined;
+            __classPrivateFieldGet(this, _GxIdeKbManagerExport_exportAllEl, "f").value = undefined;
+        });
+        _GxIdeKbManagerExport_evaluateContentToDisplay.set(this, () => {
+            // Nothing to display on the tree-view
+            if (!this.hasObjects && !this.exportAllIsChecked) {
+                return (h("gx-ide-empty-state", { isAnimated: __classPrivateFieldGet(this, _GxIdeKbManagerExport_animateEmptyState, "f"), stateTitle: __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").main.noObjectsToDisplay, key: "no-objects-empty-state" }, h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeKbManagerExport_addObjectsCallbackHandler, "f") }, __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").main.beginByADdingSomeObjects)));
             }
-        };
-        /*
-         * Used to update objects. Objects are updated when calling the 'addObjectsCallback' or 'addReferencesCallback'
-         */
-        this.updateObjects = (objects) => {
-            if (objects.length) {
-                const newTreeModel = updateTreeModelWithObjects(objects, this.flattenedObjectTypes, this.treeModel);
-                this.treeModel = newTreeModel;
+            else {
+                __classPrivateFieldSet(this, _GxIdeKbManagerExport_animateEmptyState, true, "f"); // improve performance if is first render
             }
-        };
-        /*
-         * Update checked objects 'checkedObjectsArray' array. Used for the 'addReferencesCallback'
-         */
-        this.objectsTreeCheckedItemsChangedHandler = (event) => {
+            if (this.exportAllIsChecked) {
+                return (h("gx-ide-empty-state", { isAnimated: __classPrivateFieldGet(this, _GxIdeKbManagerExport_animateEmptyState, "f"), stateIconSrc: TREE_VIEW_ICON, stateTitle: __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").main.exportAllMessage, key: "exporting-all-empty-state" }));
+            }
+            else {
+                __classPrivateFieldSet(this, _GxIdeKbManagerExport_animateEmptyState, true, "f"); // improve performance if is first render
+            }
+            return (h("ch-tree-view-render", { class: "tree-view", checkbox: true, checked: true, dragDisabled: true, dropDisabled: true, filter: __classPrivateFieldGet(this, _GxIdeKbManagerExport_evaluateTreeViewFilters, "f").call(this), filterType: this.addKbPropertiesIsChecked && !this.exportAllIsChecked
+                    ? "none"
+                    : "metadata", model: this.objectsTreeViewModel, showLines: "last", toggleCheckboxes: true, sortItemsCallback: __classPrivateFieldGet(this, _GxIdeKbManagerExport_sortTreeItems, "f"), onCheckedItemsChange: __classPrivateFieldGet(this, _GxIdeKbManagerExport_objectsTreeCheckedItemsChangedHandler, "f") }));
+        });
+        _GxIdeKbManagerExport_evaluateObjects.set(this, () => {
+            this.hasObjects =
+                this.objectsTreeViewModel && this.objectsTreeViewModel.length > 0;
+        });
+        _GxIdeKbManagerExport_evaluateTreeViewFilters.set(this, () => {
+            if (this.addKbPropertiesIsChecked && this.exportAllIsChecked) {
+                return KB_PROPERTY; // only show properties
+            }
+            if (!this.addKbPropertiesIsChecked && !this.exportAllIsChecked) {
+                return KB_OBJECT; // only show objects
+            }
+            return "none";
+        });
+        _GxIdeKbManagerExport_exportAllChangedHandler.set(this, (event) => {
+            this.exportAllIsChecked = event.detail.target.value !== "undefined";
+        });
+        _GxIdeKbManagerExport_exportCallbackHandler.set(this, async () => {
+            this.exportingIsInProcess = true;
+            const fileName = __classPrivateFieldGet(this, _GxIdeKbManagerExport_fileNameEl, "f").value;
+            const checkedKbPropertiesIds = this.addKbPropertiesIsChecked
+                ? this.checkedPropertiesIds
+                : [];
+            const checkedObjectIds = this.exportAllIsChecked
+                ? undefined
+                : this.checkedObjectsIds;
+            this.exportCallback(fileName, checkedKbPropertiesIds, checkedObjectIds).then(() => {
+                this.exportingIsInProcess = false;
+            });
+            // returns Promise<boolean> but no procedure was detailed on the spec.
+        });
+        _GxIdeKbManagerExport_objectsTreeCheckedItemsChangedHandler.set(this, (event) => {
             // filter 'checked objects' and 'checked properties' ids
             const checkedObjectsIds = [];
             const checkedPropertiesIds = [];
@@ -247,197 +290,134 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeKbMan
             });
             this.checkedObjectsIds = checkedObjectsIds;
             this.checkedPropertiesIds = checkedPropertiesIds;
-        };
-        this.exportCallbackHandler = async () => {
-            if (this.exportCallback) {
-                this.exportingIsInProcess = true;
-                const exportAllChecked = this.exportAllCheckboxEl.checked;
-                const fileName = this.fileNameEl.value;
-                const checkedKbPropertiesIds = this.addKbPropertiesIsChecked
-                    ? this.checkedPropertiesIds
-                    : [];
-                const checkedObjectIds = exportAllChecked
-                    ? undefined
-                    : this.checkedObjectsIds;
-                this.exportCallback(fileName, checkedKbPropertiesIds, checkedObjectIds).then(() => {
-                    this.exportingIsInProcess = false;
-                });
-                // returns Promise<boolean> but no procedure was detailed on the spec.
-            }
-        };
-        this.cancelCallbackHandler = async () => {
-            if (this.cancelCallback) {
-                const cancelled = await this.cancelCallback();
-                if (cancelled) {
-                    this.exportingIsInProcess = false;
+            this.atLeastOnePropertyItemIsChecked = this.checkedPropertiesIds.length > 0;
+            this.atLeastOneObjectItemIsChecked = this.checkedObjectsIds.length > 0;
+        });
+        _GxIdeKbManagerExport_sortTreeItems.set(this, (subModel) => {
+            // "property" items should be added on top.
+            // else sort alphabetically by "caption" value.
+            return subModel.sort((a, b) => {
+                if (a.metadata === "property" && b.metadata !== "property") {
+                    return -1;
                 }
-            }
-        };
-        this.clearButtonHandler = () => {
-            /* revisar*/
-            this.objectsTreeEl.updateAllItemsProperties({ checked: false });
-        };
-        this.exportAllChangedHandler = (event) => {
-            this.exportAllIsChecked = event.detail.value;
-        };
-        this.evaluateTreeViewFilters = () => {
-            if (this.addKbPropertiesIsChecked && this.exportAllIsChecked) {
-                // only show properties
-                return KB_PROPERTY;
-            }
-            else if (!this.addKbPropertiesIsChecked && !this.exportAllIsChecked) {
-                // only show objects
-                return KB_OBJECT;
-            }
-            return "none"; // Applies if !this.addKbPropertiesIsChecked && this.exportAllIsChecked
-        };
-        this.evaluateContentToDisplay = () => {
-            // Nothing to display on the tree-view
-            if (this.noObjects) {
-                return this.renderMessage(true);
-            }
-            // The tree should be empty, because all filters are being applied.
-            // Display a message to prevent a white screen.
-            if (!this.addKbPropertiesIsChecked && this.exportAllIsChecked) {
-                return this.renderMessage(false);
-            }
-            return (h("ch-tree-view-render", { model: this.treeModel, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checked: true, checkbox: true, filter: this.evaluateTreeViewFilters(), filterType: this.addKbPropertiesIsChecked && !this.exportAllIsChecked
-                    ? "none"
-                    : "metadata", onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, ref: el => (this.objectsTreeEl = el), "show-lines": "last", class: "tree-view" }));
-        };
-        this.renderMessage = (nothingToDisplay) => {
-            return (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" }, nothingToDisplay ? ([
-                h("span", null, this._componentLocale.main.noObjectsToDisplay),
-                h("gxg-text", { type: "text-link-no-line", textAlign: "center", onClick: this.addObjectsCallbackHandler }, this._componentLocale.main.beginByADdingSomeObjects)
-            ]) : (h("span", null, this._componentLocale.main.exportAllMessage))));
-        };
-        this.clearButtonDisabledConditions = () => {
-            const checkedItems = this.treeModel.filter(item => {
-                return item.checked;
+                if (b.metadata === "property" && a.metadata !== "property") {
+                    return 1;
+                }
+                return a.caption.localeCompare(b.caption);
             });
-            return checkedItems.length === 0;
-        };
-        this.loaderCancelCallbackHandler = async () => {
-            this.cancelCallbackHandler();
-        };
-        this.onClickCancelCallbackHandler = async () => {
-            this.cancelCallbackHandler();
-        };
-        this.exportAllIsChecked = false;
+        });
+        _GxIdeKbManagerExport_renderFooter.set(this, () => {
+            const referencesButtonEnabled = this.atLeastOneObjectItemIsChecked;
+            const clearButtonEnabled = this.objectsTreeViewModel.length > 0;
+            return (h("footer", { class: "footer control-footer-with-border" }, h("button", { class: "button-tertiary clear-btn", disabled: !clearButtonEnabled, part: "clear-button", onClick: clearButtonEnabled && __classPrivateFieldGet(this, _GxIdeKbManagerExport_clearButtonHandler, "f") }, __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").footer.clearButton), h("button", { class: "button-secondary button-icon-and-text", part: "references-button", disabled: !referencesButtonEnabled, onClick: referencesButtonEnabled && __classPrivateFieldGet(this, _GxIdeKbManagerExport_addReferencesCallbackHandler, "f") }, h("ch-image", { class: "icon-sm", disabled: !referencesButtonEnabled, src: GENERAL_REFERENCES_ICON }), __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").footer.addReferencesButton), h("button", {
+                // Add button
+                class: "button-primary button-icon-and-text", disabled: this.exportAllIsChecked, part: "add-button", onClick: !this.exportAllIsChecked && __classPrivateFieldGet(this, _GxIdeKbManagerExport_addObjectsCallbackHandler, "f")
+            }, h("ch-image", { class: "icon-sm", disabled: this.exportAllIsChecked, src: MENUS_NEW_OBJECT_ICON }), __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").footer.addButton)));
+        });
+        _GxIdeKbManagerExport_updateObjects.set(this, (objectsDataArray) => {
+            if (objectsDataArray.length) {
+                const newObjectsTreeModel = updateObjectsTreeModel(objectsDataArray, __classPrivateFieldGet(this, _GxIdeKbManagerExport_objectTypesMap, "f"), __classPrivateFieldGet(this, _GxIdeKbManagerExport_objectsSet, "f"), this.objectsTreeViewModel);
+                this.objectsTreeViewModel = newObjectsTreeModel;
+            }
+        });
         this.addKbPropertiesIsChecked = false;
+        this.atLeastOnePropertyItemIsChecked = false;
+        this.atLeastOneObjectItemIsChecked = false;
         this.checkedObjectsIds = [];
-        this.noObjects = undefined;
-        this.treeModel = [];
+        this.checkedPropertiesIds = [];
+        this.exportAllIsChecked = false;
         this.exportingIsInProcess = false;
-        this.displayTitle = false;
+        this.hasObjects = undefined;
+        this.objectsTreeViewModel = [];
+        this.addKBPropertiesCallback = undefined;
+        this.addObjectsCallback = undefined;
+        this.addReferencesCallback = undefined;
+        this.cancelCallback = undefined;
+        this.exportCallback = undefined;
+        this.exportFileDirectoryCallback = undefined;
         this.fileName = undefined;
-        this.loader = false;
         this.kbPropertiesTypes = undefined;
+        this.loader = false;
         this.objectTypes = undefined;
-        this.exportFileDirectoryCallback = undefined;
         this.optionsCallback = undefined;
-        this.addKBPropertiesCallback = undefined;
-        this.addReferencesCallback = undefined;
-        this.addObjectsCallback = undefined;
-        this.exportCallback = undefined;
-        this.cancelCallback = undefined;
-    }
-    watchTreeModelHandler(newState) {
-        this.noObjects = !!(newState.length === 0 || !newState);
     }
-    watchExportingIsInProcessHandler(isExporting) {
-        if (isExporting && this.loader) {
-            this.loaderEl.show = true;
-        }
-        else if (!isExporting && this.loader) {
-            this.loaderEl.show = false;
+    objectsTreeViewModelChanged(newObjectsTreeViewModel) {
+        this.hasObjects =
+            newObjectsTreeViewModel && newObjectsTreeViewModel.length > 0;
+        if (!this.hasObjects) {
+            this.atLeastOnePropertyItemIsChecked = false;
+            this.atLeastOneObjectItemIsChecked = false;
         }
     }
-    watchObjectTypesHandler(newState) {
-        this.flattenObjectTypes(newState);
+    objectTypesChanged(newObjectTypesArray) {
+        __classPrivateFieldGet(this, _GxIdeKbManagerExport_instances, "m", _GxIdeKbManagerExport_objectsTypesArrayToMap).call(this, newObjectTypesArray);
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
     async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.componentDidLoadEvent.emit(true);
-        this.evaluateObjects();
-        this.flattenObjectTypes(this.objectTypes);
-    }
-    componentDidLoad() {
-        this.fileNameEl.focus();
-    }
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
-        }
-    }
-    flattenObjectTypes(newState) {
-        newState.forEach(objectType => {
-            this.flattenedObjectTypes.set(objectType.id, objectType);
-        });
+        __classPrivateFieldSet(this, _GxIdeKbManagerExport_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        __classPrivateFieldGet(this, _GxIdeKbManagerExport_evaluateObjects, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeKbManagerExport_instances, "m", _GxIdeKbManagerExport_objectsTypesArrayToMap).call(this, this.objectTypes);
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        return (h(Host, { class: "gx-ide-component" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noHeadingPadding: true, headingPaddingTop: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__top" }, h("gxg-form-text", { class: { "select-file-input": true }, value: this.fileName, part: "xpz-file", label: this._componentLocale.header.exportFileName, ref: el => (this.fileNameEl = el), icon: "gemini-tools/file", iconPosition: "start" }), h("gxg-buttons-container", { reduced: true, class: "export-cancel-buttons-group" }, h("gxg-button", { id: "export-kb-btn", part: "export-btn", onClick: this.exportCallbackHandler, disabled: this.noObjects }, this._componentLocale.header.exportButton), h("gxg-button", { id: "cancel-kb-export-btn", part: "cancel-button", onClick: this.onClickCancelCallbackHandler, disabled: !this.exportingIsInProcess || this.noObjects }, 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), onChange: this.exportAllChangedHandler })))), h("div", { class: {
-                "tree-container": true,
-                "tree-container--empty": this.noObjects ||
-                    (!this.noObjects &&
-                        this.exportAllIsChecked &&
-                        !this.addKbPropertiesIsChecked)
-                // "tree-container--export-all": this.exportAllIsChecked
-            } }, this.evaluateContentToDisplay()), h("gxg-text", { type: "button-like", part: "export-button", slot: "footer-start", onClick: this.clearButtonHandler, disabled: this.clearButtonDisabledConditions() }, this._componentLocale.footer.clearButton), h("gxg-button", { onClick: this.addReferencesCallbackHandler, type: "outlined-text-icon", icon: "general/references", part: "export-button", class: { "cancel-btn": true }, disabled: this.exportAllIsChecked, slot: "footer-end" }, 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, slot: "footer-end" }, this._componentLocale.footer.addButton))), this.loader && false ? (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));
+        const exportButtonEnabled = this.atLeastOnePropertyItemIsChecked ||
+            this.atLeastOneObjectItemIsChecked ||
+            this.exportAllIsChecked;
+        const cancelButtonEnabled = this.exportingIsInProcess;
+        return (h(Host, { class: "spacing-body-block-start spacing-body-inline" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section field-group" }, h("header", { class: "header" }, h("div", { class: "field field-inline export-file-name" }, h("label", { class: "label", htmlFor: "xpz-file" }, __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").header.exportFileName), h("ch-edit", { autoFocus: true, id: "xpz-file", class: "form-input", part: "xpz-file", value: this.fileName, startImgSrc: FILE_ICON, ref: (el) => (__classPrivateFieldSet(this, _GxIdeKbManagerExport_fileNameEl, el, "f")) })), h("div", { class: "header__buttons-container" }, h("button", { id: "export-kb-btn", class: "button-primary export-btn", part: "export-btn", disabled: !exportButtonEnabled, onClick: exportButtonEnabled && __classPrivateFieldGet(this, _GxIdeKbManagerExport_exportCallbackHandler, "f") }, __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").header.exportButton), h("button", { id: "cancel-kb-export-btn", class: "button-secondary cancel-btn", part: "cancel-button", disabled: !cancelButtonEnabled, onClick: cancelButtonEnabled && __classPrivateFieldGet(this, _GxIdeKbManagerExport_cancelCallbackHandler, "f") }, __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").header.cancelButton), h("button", { "aria-label": __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").header.optionsButton, title: __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").header.optionsButton, class: "button-tertiary button-icon-only options-btn", part: "select-kb-btn", onClick: this.optionsCallback }, h("ch-image", { class: "icon-md", src: SETTINGS_ICON }))), h("div", { class: "header__checkboxes field-group" }, h("ch-checkbox", { class: "checkbox add-kb-description", part: "add-kb-description", caption: __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").main.addKnowledgeBaseDescription, checkedValue: CHECKBOX_CHECKED_VALUE, onInput: __classPrivateFieldGet(this, _GxIdeKbManagerExport_addKBPropertiesCallbackHandler, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeKbManagerExport_addKbDescriptionEl, el, "f")) }), h("ch-checkbox", { class: "checkbox export-all", part: "export-all-checkbox", checkedValue: CHECKBOX_CHECKED_VALUE, caption: __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").main.exportAll, onInput: __classPrivateFieldGet(this, _GxIdeKbManagerExport_exportAllChangedHandler, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeKbManagerExport_exportAllEl, el, "f")) }))), h("div", { class: "main" }, __classPrivateFieldGet(this, _GxIdeKbManagerExport_evaluateContentToDisplay, "f").call(this), this.loader && this.exportingIsInProcess && (h("gx-ide-loader", { cancelLabel: __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").loader.cancelLabel, loaderTitle: __classPrivateFieldGet(this, _GxIdeKbManagerExport_componentLocale, "f").loader.title, cancelCallback: __classPrivateFieldGet(this, _GxIdeKbManagerExport_cancelCallbackHandler, "f"), show: true, class: "loader" }))), __classPrivateFieldGet(this, _GxIdeKbManagerExport_renderFooter, "f").call(this))));
     }
     static get assetsDirs() { return ["gx-ide-assets/kb-manager-export"]; }
     get el() { return this; }
     static get watchers() { return {
-        "treeModel": ["watchTreeModelHandler"],
-        "exportingIsInProcess": ["watchExportingIsInProcessHandler"],
-        "objectTypes": ["watchObjectTypesHandler"]
+        "objectsTreeViewModel": ["objectsTreeViewModelChanged"],
+        "objectTypes": ["objectTypesChanged"]
     }; }
     static get style() { return kbManagerExportCss; }
 }, [1, "gx-ide-kb-manager-export", {
-        "displayTitle": [4, "display-title"],
+        "addKBPropertiesCallback": [16],
+        "addObjectsCallback": [16],
+        "addReferencesCallback": [16],
+        "cancelCallback": [16],
+        "exportCallback": [16],
+        "exportFileDirectoryCallback": [16],
         "fileName": [1, "file-name"],
-        "loader": [4],
         "kbPropertiesTypes": [16],
+        "loader": [4],
         "objectTypes": [16],
-        "exportFileDirectoryCallback": [16],
         "optionsCallback": [16],
-        "addKBPropertiesCallback": [16],
-        "addReferencesCallback": [16],
-        "addObjectsCallback": [16],
-        "exportCallback": [16],
-        "cancelCallback": [16],
-        "exportAllIsChecked": [32],
         "addKbPropertiesIsChecked": [32],
+        "atLeastOnePropertyItemIsChecked": [32],
+        "atLeastOneObjectItemIsChecked": [32],
         "checkedObjectsIds": [32],
-        "noObjects": [32],
-        "treeModel": [32],
-        "exportingIsInProcess": [32]
+        "checkedPropertiesIds": [32],
+        "exportAllIsChecked": [32],
+        "exportingIsInProcess": [32],
+        "hasObjects": [32],
+        "objectsTreeViewModel": [32]
     }, undefined, {
-        "treeModel": ["watchTreeModelHandler"],
-        "exportingIsInProcess": ["watchExportingIsInProcessHandler"],
-        "objectTypes": ["watchObjectTypesHandler"]
+        "objectsTreeViewModel": ["objectsTreeViewModelChanged"],
+        "objectTypes": ["objectTypesChanged"]
     }]);
+_GxIdeKbManagerExport_addKbDescriptionEl = new WeakMap(), _GxIdeKbManagerExport_componentLocale = new WeakMap(), _GxIdeKbManagerExport_animateEmptyState = new WeakMap(), _GxIdeKbManagerExport_exportAllEl = new WeakMap(), _GxIdeKbManagerExport_fileNameEl = new WeakMap(), _GxIdeKbManagerExport_kBPropertiesData = new WeakMap(), _GxIdeKbManagerExport_objectTypesMap = new WeakMap(), _GxIdeKbManagerExport_objectsSet = new WeakMap(), _GxIdeKbManagerExport_addKBPropertiesCallbackHandler = new WeakMap(), _GxIdeKbManagerExport_addObjectsCallbackHandler = new WeakMap(), _GxIdeKbManagerExport_addReferencesCallbackHandler = new WeakMap(), _GxIdeKbManagerExport_cancelCallbackHandler = new WeakMap(), _GxIdeKbManagerExport_clearButtonHandler = new WeakMap(), _GxIdeKbManagerExport_evaluateContentToDisplay = new WeakMap(), _GxIdeKbManagerExport_evaluateObjects = new WeakMap(), _GxIdeKbManagerExport_evaluateTreeViewFilters = new WeakMap(), _GxIdeKbManagerExport_exportAllChangedHandler = new WeakMap(), _GxIdeKbManagerExport_exportCallbackHandler = new WeakMap(), _GxIdeKbManagerExport_objectsTreeCheckedItemsChangedHandler = new WeakMap(), _GxIdeKbManagerExport_sortTreeItems = new WeakMap(), _GxIdeKbManagerExport_renderFooter = new WeakMap(), _GxIdeKbManagerExport_updateObjects = new WeakMap(), _GxIdeKbManagerExport_instances = new WeakSet(), _GxIdeKbManagerExport_objectsTypesArrayToMap = function _GxIdeKbManagerExport_objectsTypesArrayToMap(objectTypesArray) {
+    objectTypesArray.forEach(objectType => {
+        __classPrivateFieldGet(this, _GxIdeKbManagerExport_objectTypesMap, "f").set(objectType.id, objectType);
+    });
+};
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-kb-manager-export", "gx-ide-container", "gx-ide-title"];
+    const components = ["gx-ide-kb-manager-export", "gx-ide-empty-state", "gx-ide-loader"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-kb-manager-export":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxIdeKbManagerExport$1);
             }
             break;
-        case "gx-ide-container":
+        case "gx-ide-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "gx-ide-title":
+        case "gx-ide-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }