@genexus/genexus-ide-ui 0.0.63 → 0.0.64

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

@@ -1,24 +1,27 @@
 import { proxyCustomElement, HTMLElement, createEvent, 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$i } from './checkbox.js';
-import { d as defineCustomElement$h } from './icon.js';
-import { d as defineCustomElement$g } from './tree-view.js';
-import { d as defineCustomElement$f } from './tree-view-item.js';
-import { d as defineCustomElement$e } from './tree-view-render.js';
-import { d as defineCustomElement$d } from './container.js';
-import { d as defineCustomElement$c } from './directory-selector.js';
-import { d as defineCustomElement$b } from './title.js';
-import { d as defineCustomElement$a } from './button.js';
-import { d as defineCustomElement$9 } from './button-group.js';
-import { d as defineCustomElement$8 } from './form-checkbox.js';
-import { d as defineCustomElement$7 } from './form-text.js';
-import { d as defineCustomElement$6 } from './icon2.js';
-import { d as defineCustomElement$5 } from './gxg-label2.js';
-import { d as defineCustomElement$4 } from './text.js';
-import { d as defineCustomElement$3 } from './title2.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
+import { d as defineCustomElement$j } from './checkbox.js';
+import { d as defineCustomElement$i } from './icon.js';
+import { d as defineCustomElement$h } from './tree-view.js';
+import { d as defineCustomElement$g } from './tree-view-item.js';
+import { d as defineCustomElement$f } from './tree-view-render.js';
+import { d as defineCustomElement$e } from './container.js';
+import { d as defineCustomElement$d } from './directory-selector.js';
+import { d as defineCustomElement$c } from './title.js';
+import { d as defineCustomElement$b } from './button.js';
+import { d as defineCustomElement$a } from './button-group.js';
+import { d as defineCustomElement$9 } from './form-checkbox.js';
+import { d as defineCustomElement$8 } from './form-text.js';
+import { d as defineCustomElement$7 } from './icon2.js';
+import { d as defineCustomElement$6 } from './gxg-label2.js';
+import { d as defineCustomElement$5 } from './text.js';
+import { d as defineCustomElement$4 } from './title2.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$2 } from './tree-view2.js';
 
+const KB_PROPERTY = "property";
+const KB_OBJECT = "object";
 /*
 INDEX:
 1. getObjectIcon
@@ -49,7 +52,6 @@ const convertObjectTypeToTreeItem = (objectType) => ({
   id: objectType.id,
   leftImgSrc: objectType.icon,
   leaf: false,
-  checkbox: true,
   class: "object-type tree-view-item",
   expanded: true,
   items: []
@@ -59,8 +61,8 @@ const convertObjectToTreeItem = (object, objectTypes) => ({
   caption: object.name,
   id: object.id,
   leftImgSrc: objectTypes.get(object.typeId).icon,
-  checkbox: true,
   class: "object tree-view-item",
+  metadata: KB_OBJECT,
   leaf: true
 });
 /* 5. findObjectInTree*/
@@ -103,9 +105,8 @@ const convertPropertyToTreeItem = (property, kbPropertiesTypes) => ({
   caption: property.name,
   id: property.id,
   leftImgSrc: getPropertyIcon(property.typeId, kbPropertiesTypes),
-  // checkbox: true,
   class: "property tree-view-item",
-  metadata: "property",
+  metadata: KB_PROPERTY,
   leaf: true
 });
 /* 8. updateTreeModelWithObjects*/
@@ -170,9 +171,8 @@ const clearKbPropertiesFromTree = (actualTreeState) => {
   return updatedTreeData;
 };
 
-const kbManagerExportCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}ch-grid-column{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}.tree-view-container{display:flex}.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__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--empty{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-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}}";
+const kbManagerExportCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}ch-grid-column{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}.tree-view-container{display:flex}.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__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--empty{align-items:center;justify-content:center}.tree-container .gx-ide-message{padding:100px 0}.footer-right-wrapper{display:grid;gap:var(--gx-ide-grid-column-gap);grid-template-columns:100px 100px}";
 
-const KB_PROPERTIES = "properties";
 const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -198,6 +198,7 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     };
     this.addKBPropertiesCallbackHandler = async (e) => {
       const checked = e.detail.value;
+      this.addKbPropertiesIsChecked = checked;
       if (checked && this.addKBPropertiesCallback) {
         const kBPropertiesData = await this.addKBPropertiesCallback();
         if (kBPropertiesData.length === 0) ;
@@ -231,7 +232,6 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.updateObjects = (objects) => {
       if (objects.length) {
         const newTreeModel = updateTreeModelWithObjects(objects, this.flattenedObjectTypes, this.treeModel);
-        console.log(JSON.stringify(newTreeModel, undefined, 2));
         this.treeModel = newTreeModel;
       }
     };
@@ -239,32 +239,28 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
      * Update checked objects 'checkedObjectsArray' array. Used for the 'addReferencesCallback'
      */
     this.objectsTreeCheckedItemsChangedHandler = (event) => {
-      const allItemsWithCheckbox = [...event.detail.values()];
-      const checkedItems = allItemsWithCheckbox.filter(node => node.item.checked);
-      // objects checked
-      const checkedObjects = checkedItems.filter(node => node.item.class === "object");
+      // filter 'checked objects' and 'checked properties' ids
       const checkedObjectsIds = [];
-      if (checkedObjects.length > 0) {
-        checkedObjects.forEach(objectChecked => {
-          checkedObjectsIds.push(objectChecked.item.id);
-        });
-      }
-      this.checkedObjectsIds = checkedObjectsIds;
-      // properties checked
-      const checkedProperties = checkedItems.filter(node => node.item.class === "property");
       const checkedPropertiesIds = [];
-      if (checkedProperties.length > 0) {
-        checkedProperties.forEach(propertyChecked => {
-          checkedPropertiesIds.push(propertyChecked.item.id);
-        });
-      }
+      const allItemsWithCheckbox = [...event.detail.values()];
+      allItemsWithCheckbox.forEach(node => {
+        if (node.item.checked && node.item.metadata === KB_OBJECT) {
+          checkedObjectsIds.push(node.item.id);
+        }
+        else if (node.item.checked && node.item.metadata === KB_PROPERTY) {
+          checkedPropertiesIds.push(node.item.id);
+        }
+      });
+      this.checkedObjectsIds = checkedObjectsIds;
       this.checkedPropertiesIds = checkedPropertiesIds;
     };
     this.exportCallbackHandler = async () => {
       if (this.exportCallback) {
         const exportAllChecked = this.exportAllCheckboxEl.checked;
         const fileName = this.fileNameEl.value;
-        const checkedKbPropertiesIds = this.checkedPropertiesIds;
+        const checkedKbPropertiesIds = this.addKbPropertiesIsChecked
+          ? this.checkedPropertiesIds
+          : [];
         const checkedObjectIds = exportAllChecked
           ? undefined
           : this.checkedObjectsIds;
@@ -280,13 +276,45 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     };
     this.clearButtonHandler = () => {
       /* revisar*/
-      console.log("clear button clicked");
       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("gxg-tree-view", { treeModel: 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) }));
+    };
+    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.exportAllIsChecked = false;
+    this.exportingIsInProcess = false;
+    this.addKbPropertiesIsChecked = false;
     this.fileName = "";
     this.exportFilePathName = undefined;
     this.noObjects = undefined;
@@ -302,7 +330,7 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.exportCallback = undefined;
     this.cancelCallback = undefined;
   }
-  watchtreeModelHandler(newState) {
+  watchTreeModelHandler(newState) {
     this.noObjects = !!(newState.length === 0 || !newState);
   }
   watchDummyInitialTreeHandler(newTree) {
@@ -331,19 +359,22 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   // 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), onChange: this.exportAllChangedHandler })))), h("div", { class: {
+    // console.log("checkedObjectsIds", this.checkedObjectsIds);
+    // console.log("checkedPropertiesIds", this.checkedPropertiesIds);
+    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, disabled: this.noObjects }, this._componentLocale.header.exportButton), h("button", { id: "cancel-kb-export-btn", part: "cancel-button", onClick: this.cancelCallbackHandler, disabled: this.noObjects || this.exportingIsInProcess }, 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), disabled: this.noObjects, onChange: this.exportAllChangedHandler })))), h("div", { class: {
         "tree-container": true,
-        "tree-container--empty": this.noObjects
+        "tree-container--empty": this.noObjects ||
+          (!this.noObjects &&
+            this.exportAllIsChecked &&
+            !this.addKbPropertiesIsChecked)
         // "tree-container--export-all": this.exportAllIsChecked
-      } }, !this.noObjects ? (
-    /* objects tree */
-    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))))));
+      } }, this.evaluateContentToDisplay()), h("gxg-text", { type: "button-like", part: "export-button", 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 }, this._componentLocale.footer.addButton))))));
   }
   static get assetsDirs() { return ["gx-ide-assets/kb-manager-export"]; }
   get el() { return this; }
   static get watchers() { return {
-    "treeModel": ["watchtreeModelHandler"],
+    "treeModel": ["watchTreeModelHandler"],
     "dummyInitialTree": ["watchDummyInitialTreeHandler"],
     "objectTypes": ["watchObjectTypeslHandler"]
   }; }
@@ -360,6 +391,8 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "exportCallback": [16],
     "cancelCallback": [16],
     "exportAllIsChecked": [32],
+    "exportingIsInProcess": [32],
+    "addKbPropertiesIsChecked": [32],
     "fileName": [32],
     "exportFilePathName": [32],
     "noObjects": [32],
@@ -369,7 +402,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-kb-manager-export", "ch-checkbox", "ch-icon", "ch-tree-view", "ch-tree-view-item", "ch-tree-view-render", "gx-ide-container", "gx-ide-directory-selector", "gx-ide-title", "gxg-button", "gxg-button-group", "gxg-form-checkbox", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-text", "gxg-title", "gxg-tooltip"];
+  const components = ["gx-ide-kb-manager-export", "ch-checkbox", "ch-icon", "ch-tree-view", "ch-tree-view-item", "ch-tree-view-render", "gx-ide-container", "gx-ide-directory-selector", "gx-ide-title", "gxg-button", "gxg-button-group", "gxg-form-checkbox", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree-view"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-kb-manager-export":
       if (!customElements.get(tagName)) {
@@ -378,85 +411,90 @@ function defineCustomElement$1() {
       break;
     case "ch-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "ch-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "ch-tree-view":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "ch-tree-view-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "ch-tree-view-render":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "gx-ide-container":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "gx-ide-directory-selector":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "gx-ide-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "gxg-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "gxg-button-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "gxg-form-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "gxg-form-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "gxg-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "gxg-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "gxg-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "gxg-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tree-view":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

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

@@ -26,6 +26,7 @@ import { d as defineCustomElement$4 } from './title2.js';
 import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './tree-view2.js';
 
+const KB_OBJECT = "object";
 const convertImportItemToTreeItem = (importCatIcon, importItems) => {
   const importTreeItems = [];
   importItems.forEach(importItem => {
@@ -36,7 +37,8 @@ const convertImportItemToTreeItem = (importCatIcon, importItems) => {
       checkbox: true,
       expanded: true,
       leaf: true,
-      class: "object tree-view-item"
+      class: "object tree-view-item",
+      metadata: KB_OBJECT
     });
   });
   return importTreeItems;
@@ -235,7 +237,8 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       /* End of evaluate 'select/unselect checkbox' state*/
       const checkedItems = allItemsWithCheckbox.filter(node => node.item.checked);
       // objects checked
-      const checkedObjects = checkedItems.filter(node => node.item.class === "object");
+      const checkedObjects = checkedItems.filter(node => node.item.metadata === KB_OBJECT);
+      console.log("checkedObjects", checkedObjects);
       const checkedObjectsIds = [];
       if (checkedObjects.length > 0) {
         checkedObjects.forEach(objectChecked => {

package/dist/components/gxg-card.js

@@ -1,6 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './button.js';
+import { d as defineCustomElement$3 } from './icon2.js';
+import { d as defineCustomElement$2 } from './title-editable.js';
 
-const cardCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{display:block;background:var(--color-on-primary);box-shadow:var(--box-shadow-01);border-radius:var(--border-radius-md);font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}:host([elevation=xs]){box-shadow:var(--box-shadow-01)}:host([elevation=m]){box-shadow:var(--box-shadow-03)}:host([padding=\"0\"]){padding:0}:host([padding=xs]){padding:var(--spacing-comp-01)}:host([padding=s]){padding:var(--spacing-comp-02)}:host([padding=m]){padding:var(--spacing-comp-03)}:host([padding=l]){padding:var(--spacing-comp-04)}:host([padding=xl]){padding:var(--spacing-comp-05)}:host([padding=xxl]){padding:var(--spacing-comp-06)}:host([padding=xxxl]){padding:var(--spacing-comp-07)}:host([background=white]){background:var(--color-background)}:host([background=gray-01]){background:var(--gray-01)}";
+const cardCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{display:block;background:var(--color-on-primary);box-shadow:var(--box-shadow-01);border-radius:var(--border-radius-md);font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}:host([elevation=xs]){box-shadow:var(--box-shadow-01)}:host([elevation=m]){box-shadow:var(--box-shadow-03)}:host([padding=\"0\"]){padding:0}:host([padding=xs]){padding:var(--spacing-comp-01)}:host([padding=s]){padding:var(--spacing-comp-02)}:host([padding=m]){padding:var(--spacing-comp-03)}:host([padding=l]){padding:var(--spacing-comp-04)}:host([padding=xl]){padding:var(--spacing-comp-05)}:host([padding=xxl]){padding:var(--spacing-comp-06)}:host([padding=xxxl]){padding:var(--spacing-comp-07)}:host([background=white]){background:var(--color-background)}:host([background=gray-01]){background:var(--gray-01)}:host(.mercury){font-family:var(--font-family-primary);font-size:var(--mc-font-size-xs);color:var(--gray-03);line-height:var(--line-height-default);font-weight:var(--font-weight-regular);box-sizing:border-box;padding:0;border-radius:0;background-color:var(--gray-10);box-shadow:none;color:var(--gray-04)}:host(.mercury) .content{overflow:auto}:host(.mercury) .content::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}:host(.mercury) .content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}:host(.mercury) .content::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}:host(.mercury) .content::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host(.mercury.card--section) .content{padding:var(--mc-card-section-padding--v) var(--mc-card-section-padding--h)}:host(.mercury.card--section) .card__header{text-transform:capitalize;display:flex;gap:var(--spacing-comp-03);margin:var(--mc-card-section-padding--v) var(--mc-card-section-padding--h) 0 var(--mc-card-section-padding--h);padding-bottom:var(--mc-card-section-padding--v);border-bottom:var(--border-width-sm) solid var(--gray-13)}:host(.mercury.card--article){color:var(--gray-06);font-size:var(--mc-font-size-xs)}:host(.mercury.card--article) .content{padding:var(--mc-card-article-padding--v) var(--mc-card-article-padding--h)}:host(.mercury.card--mini){color:var(--gray-05);font-size:var(--mc-font-size-xxs)}:host(.mercury.card--mini) .card__header{text-transform:capitalize;margin:var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h) 0 var(--mc-card-mini-padding--h)}:host(.mercury.card--mini) .content{padding:var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h)}:host(.mercury.card--article),:host(.mercury.card--mini){border-radius:var(--border-radius-sm);border:var(--border-width-sm) solid var(--gray-00)}:host(.mercury.card--title) .wrapper{display:grid;height:100%;grid-template-rows:auto 1fr}:host(.mercury.card--actionable:hover){cursor:pointer;background-color:var(--gray-11);border-color:var(--gray-01)}";
 
 const GxgCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -31,15 +36,47 @@ const GxgCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * The component max. width
      */
     this.maxWidth = "100%";
+    /*Mercury only properties*/
+    this.titleType = "h2";
+    /**
+     * The card type (only for mercury)
+     */
+    this.cardType = "section";
+    /**
+     * It makes the title editable (only for mercury)
+     */
+    this.editableTitle = false;
+    /**
+     * It applies a different style on hover. Useful when the card is actionable (has an action attached to the click event).
+     */
+    this.actionable = false;
+  }
+  componentWillLoad() {
+    if (this.cardType === "article") {
+      this.titleType = "h2";
+    }
+    else if (this.cardType === "mini") {
+      this.titleType = "h3";
+    }
   }
   render() {
     return (h(Host, { role: "article", class: {
         card: true,
+        mercury: state.mercury,
+        "card--section": this.cardType === "section",
+        "card--article": this.cardType === "article",
+        "card--mini": this.cardType === "mini",
+        "card--title": this.cardTitle !== undefined,
+        "card--actionable": this.actionable &&
+          (this.cardType === "article" || this.cardType === "mini"),
       }, style: {
         maxWidth: this.maxWidth,
         minHeight: this.minHeight,
         height: this.height,
-      } }, h("slot", null)));
+      } }, h("div", { role: this.actionable ? "button" : "none", class: {
+        wrapper: true,
+        "wrapper--header": this.cardTitle !== undefined,
+      } }, this.cardTitle ? (h("header", { class: "card__header" }, this.icon ? (h("gxg-icon", { type: this.icon, color: "mercury" })) : null, h("gxg-title-editable", { class: "card__title", titleType: this.titleType, value: this.cardTitle, disableEdition: !this.editableTitle }))) : null, h("div", { class: "content" }, h("slot", null)))));
   }
   static get style() { return cardCss; }
 }, [1, "gxg-card", {
@@ -48,19 +85,44 @@ const GxgCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "padding": [513],
     "minHeight": [1, "min-height"],
     "height": [1],
-    "maxWidth": [1, "max-width"]
+    "maxWidth": [1, "max-width"],
+    "cardTitle": [1, "card-title"],
+    "cardType": [1, "card-type"],
+    "icon": [1],
+    "editableTitle": [4, "editable-title"],
+    "actionable": [4]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gxg-card"];
+  const components = ["gxg-card", "ch-icon", "gxg-button", "gxg-icon", "gxg-title-editable"];
   components.forEach(tagName => { switch (tagName) {
     case "gxg-card":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, GxgCard$1);
       }
       break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-title-editable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }