@genexus/genexus-ide-ui 0.0.63 → 0.0.65

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

@@ -26,6 +26,9 @@ 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';
 
+/* objects in file metadata*/
+const KB_OBJECT = "object";
+const KB_CATEGORY = "category";
 const convertImportItemToTreeItem = (importCatIcon, importItems) => {
   const importTreeItems = [];
   importItems.forEach(importItem => {
@@ -33,10 +36,10 @@ const convertImportItemToTreeItem = (importCatIcon, importItems) => {
       id: importItem.id,
       caption: importItem.name,
       leftImgSrc: importCatIcon,
-      checkbox: true,
       expanded: true,
       leaf: true,
-      class: "object tree-view-item"
+      class: "object tree-view-item",
+      metadata: KB_OBJECT
     });
   });
   return importTreeItems;
@@ -52,12 +55,13 @@ const convertImportCategoryToTreeView = (importCategoryData) => {
   importCategoryData.forEach(importCat => {
     const importCategoryTreeItem = {
       id: importCat.id,
+      // caption: importCat.name,
       caption: `${importCat.name} (${importCat.items.length})`,
       leftImgSrc: importCat.icon,
-      checkbox: true,
       expanded: true,
       leaf: false,
       class: "category tree-view-item",
+      metadata: KB_CATEGORY,
       items: convertImportItemToTreeItem(importCat.icon, importCat.items)
     };
     treeData.push(importCategoryTreeItem);
@@ -88,7 +92,7 @@ const updateImportStatusTree = (importItemResultFullData, importTreeActualState)
       // the count is (1), because this is the first item for this category
       caption: `${importItemResultFullData.categoryName} (1)`,
       leftImgSrc: importItemResultFullData.categoryIcon,
-      class: `tree-view-item tree-view-item--${importItemResultFullData.status}`,
+      class: `tree-view-item`,
       expanded: true,
       items: [
         {
@@ -155,7 +159,7 @@ const addImportItemResultDataItem = (importItemResultData, importCategoryData, i
   return updatedImportStatusTree;
 };
 
-const kbManagerImportCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}ch-grid-column{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block}.header{display:flex;flex-direction:row;gap:var(--gx-ide-grid-column-gap)}.header .select-file{flex:1}.main{height:100%;display:flex}.main>*{flex:1}.main .left-grid-item{border-right:1px solid var(--gx-ide-container-border-color)}.main .gx-ide-message{padding:50px 0}.main .tree-container{}.main .tree-container--empty{align-items:center;justify-content:center}.main .tree-container--import-status .tree-view-item--success::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--success::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);background-color:var(--color-success-dark)}.main .tree-container--import-status .tree-view-item--warning::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--warning::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);background-color:var(--color-warning-dark)}.main .tree-container--import-status .tree-view-item--error::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--error::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);background-color:var(--color-error-dark)}.main .tree-container--no-warnings .tree-view-item--warning{display:none}.main .tree-container--no-errors .tree-view-item--error{display:none}.main .tree-container--no-successes .tree-view-item--success{display:none}.ghost-element{display:block;width:0;height:24px;}";
+const kbManagerImportCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}ch-grid-column{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block}.header{display:flex;flex-direction:row;gap:var(--gx-ide-grid-column-gap)}.header .select-file{flex:1}.main{height:100%;display:flex}.main>*{flex:1}.main .left-grid-item{border-right:1px solid var(--gx-ide-container-border-color)}.main .gx-ide-message{padding:50px 0}.main .tree-container{}.main .tree-container--empty{align-items:center;justify-content:center}.main .tree-container--import-status .tree-view-item--success::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--success::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-success-dark)}.main .tree-container--import-status .tree-view-item--warning::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--warning::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-warning-dark)}.main .tree-container--import-status .tree-view-item--error::part(action){grid-template:\"first-img left-img text right-img\"/max-content max-content 1fr max-content}.main .tree-container--import-status .tree-view-item--error::part(action)::before{grid-area:first-img;content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);border-radius:50%;background-color:var(--gray-03);margin-inline-end:var(--spacing-comp-01);background-color:var(--color-error-dark)}.main .tree-container--no-warnings .tree-view-item--warning{display:none}.main .tree-container--no-errors .tree-view-item--error{display:none}.main .tree-container--no-successes .tree-view-item--success{display:none}.ghost-element{display:block;width:0;height:24px;}";
 
 const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -169,6 +173,34 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.importCategoryData = [];
     this.objectsInFileTotalNodes = 0;
     // 9.LOCAL METHODS //
+    this.evaluateImportStatusMessage = () => {
+      this.someStatusVisible =
+        this.statusInfo.error.display ||
+          this.statusInfo.warning.display ||
+          this.statusInfo.success.display;
+    };
+    this.countMessages = () => {
+      /* totally inefficient way to count. This has to be improved*/
+      let errors = 0;
+      let warnings = 0;
+      let successes = 0;
+      this.importTreeState.forEach(category => {
+        category.items.forEach(object => {
+          if (object.class.includes("tree-view-item--error")) {
+            errors += object.items.length;
+          }
+          else if (object.class.includes("tree-view-item--warning")) {
+            warnings += object.items.length;
+          }
+          else if (object.class.includes("tree-view-item--success")) {
+            successes += object.items.length;
+          }
+        });
+      });
+      this.statusInfo.error.number = errors;
+      this.statusInfo.warning.number = warnings;
+      this.statusInfo.success.number = successes;
+    };
     this.evaluateObjects = () => {
       var _a;
       this.noObjects = !!(((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.objectsTreeState);
@@ -197,7 +229,7 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.evaluateHeaderActiveButton = () => {
       if (!this.selectedFile) {
         this.headerButtonsGroup.activeButtonId = "select-file-btn";
-        this.fileInputEl.value = undefined;
+        this.fileInputEl.clearInput();
       }
       else {
         this.headerButtonsGroup.activeButtonId = "load-file-btn";
@@ -215,7 +247,7 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       }
     };
     this.objectsTreeCheckedItemsChangedHandler = (event) => {
-      /* Begin of evaluate 'select/unselect checkbox' state*/
+      /* 1. Begin of evaluate 'select/unselect checkbox' state*/
       if (event.detail == null) {
         this.toggleObjectsCheckboxEl.checked = false;
         this.toggleObjectsCheckboxEl.indeterminate = false;
@@ -232,18 +264,56 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       this.toggleObjectsCheckboxEl.checked = firstItemCheckedValue;
       this.toggleObjectsCheckboxEl.indeterminate =
         !allItemsHaveTheSameCheckedValue;
-      /* End of evaluate 'select/unselect checkbox' state*/
+      /* /End of evaluate 'select/unselect checkbox' state*/
+      /* 2. Begin of checked items evaluation*/
       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);
       const checkedObjectsIds = [];
       if (checkedObjects.length > 0) {
         checkedObjects.forEach(objectChecked => {
           checkedObjectsIds.push(objectChecked.item.id);
         });
       }
+      /* /End of checked items evaluation*/
+      /* 3. Begin of caption update*/
+      /* TO DO (when we can differentiate the caption from the number of children)*/
+      // const categoryItems = allItemsWithCheckbox.filter(
+      //   node => node.item.metadata === KB_CATEGORY
+      // );
+      // categoryItems.forEach(category => {
+      //   const itemInfo = category.item;
+      //   // Update the amount of checked values
+      //   if (itemInfo.leaf !== true) {
+      //     const totalItems = itemInfo.items.length;
+      //     const totalItemsChecked = itemInfo.items.filter(
+      //       itemUIModel => itemUIModel.checked
+      //     ).length;
+      //     const newItemCaption =
+      //       totalItems !== totalItemsChecked
+      //         ? `${itemInfo.caption} (${totalItemsChecked}/${totalItems})`
+      //         : `${itemInfo.caption} (${totalItems})`;
+      //     // Only update the item caption if needed
+      //     if (newItemCaption !== itemInfo.caption) {
+      //       this.objectsTreeEl.updateItemsProperties([itemInfo.id], {
+      //         id: itemInfo.id,
+      //         caption: newItemCaption
+      //       });
+      //     }
+      //   }
+      // });
+      /* /End of caption update*/
       this.checkedObjectsIds = checkedObjectsIds;
     };
+    this.objectsTreeContextMenuHandler = (event) => {
+      if (this.objectContextMenuCallback && event.detail.metadata === KB_OBJECT) {
+        this.objectContextMenuCallback({
+          objectId: event.detail.id,
+          screenX: event.detail.contextmenuEvent.screenX,
+          screenY: event.detail.contextmenuEvent.screenY
+        });
+      }
+    };
     this.cancelImportHandler = () => {
       if (this.cancelCallback) {
         this.cancelCallback();
@@ -262,23 +332,31 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       this.statusInfo.warning.number = 0;
       this.statusInfo.success.number = 0;
     };
-    this.toggleSelectionHandler = (e) => {
-      const checked = e.detail.value;
+    this.toggleSelectionClickHandler = (e) => {
+      const checked = e.target.checked;
       this.toggleObjectsCheckboxEl.indeterminate = false;
       this.objectsTreeEl.updateAllItemsProperties({ checked: checked });
     };
     this.statusButtonsSelectionChangedHandler = (e) => {
       const activeStates = e.detail;
-      const newStatusInfo = Object.assign({}, this.statusInfo);
-      newStatusInfo.warning.display = false;
-      newStatusInfo.error.display = false;
-      newStatusInfo.success.display = false;
-      activeStates.forEach(activeState => {
-        const status = activeState.itemId;
-        newStatusInfo[status].display = true;
-        this.statusInfo = newStatusInfo;
-      });
-      this.evaluateHiddenImportsMessage();
+      const errorIndex = activeStates.findIndex(state => state.itemId === "error");
+      const warningIndex = activeStates.findIndex(state => state.itemId === "warning");
+      const successIndex = activeStates.findIndex(state => state.itemId === "success");
+      this.statusInfo = {
+        error: {
+          display: errorIndex !== -1,
+          number: this.statusInfo.error.number
+        },
+        warning: {
+          display: warningIndex !== -1,
+          number: this.statusInfo.warning.number
+        },
+        success: {
+          display: successIndex !== -1,
+          number: this.statusInfo.success.number
+        }
+      };
+      this.evaluateImportStatusMessage();
     };
     this.evaluateCheckAllValue = () => {
       let checked = true;
@@ -289,8 +367,8 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       }
       return checked;
     };
-    this.evaluateHiddenImportsMessage = () => {
-      /* to do*/
+    this.fileClearedHandler = () => {
+      this.selectedFile = null;
     };
     this.checkedObjectsIds = [];
     this.noObjects = undefined;
@@ -310,6 +388,8 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
       }
     };
     this.objectsTreeState = [];
+    this.importStatusMessage = undefined;
+    this.someStatusVisible = undefined;
     this.noImport = undefined;
     this.importTreeState = [];
     this.importingObjects = false;
@@ -319,6 +399,7 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.loadCallback = undefined;
     this.cancelCallback = undefined;
     this.statusMinimal = false;
+    this.objectContextMenuCallback = undefined;
   }
   watchObjectsTreeStateHandler(newState) {
     this.noObjects = !!(newState.length === 0 || !newState);
@@ -326,6 +407,14 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   watchImportTreeStateHandler(newState) {
     this.noImport = !!(newState.length === 0 || !newState);
+    if (this.noImport) {
+      this.importStatusMessage =
+        this._componentLocale.main.importStatus.noImportedFiles;
+    }
+    else {
+      this.importStatusMessage =
+        this._componentLocale.main.importStatus.importedButHidden;
+    }
   }
   watchSelectedFileHandler() {
     this.evaluateHeaderActiveButton();
@@ -336,6 +425,9 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.componentDidLoadEvent.emit(true);
     this.evaluateObjects();
     this.evaluateImport();
+    this.importStatusMessage =
+      this._componentLocale.main.importStatus.noImportedFiles;
+    this.evaluateImportStatusMessage();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -350,27 +442,27 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
    */
   async addResultItem(item) {
     this.importTreeState = addImportItemResultDataItem(item, this.importCategoryData, this.importTreeState);
-    this.statusInfo[`${item.status}`].number += item.messages.length;
+    this.countMessages();
   }
   //  10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noFooterPadding: true, containerTitle: this._componentLocale.componentName }, h("header", { class: "header", slot: "header" }, h("gxg-form-text", { type: "file", class: "select-file", label: this._componentLocale.header.fileNameLabel, placeholder: this._componentLocale.header.fileNamePlaceholder, part: "file-name", acceptFile: ".xpz, .xml", clearButton: true, iconPosition: "start", onFileSelected: this.fileSelectedHandler, ref: (el) => (this.fileInputEl = el) }), h("gxg-button-group", {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noFooterPadding: true, containerTitle: this._componentLocale.componentName }, h("header", { class: "header", slot: "header" }, h("gxg-form-text", { type: "file", class: "select-file", label: this._componentLocale.header.fileNameLabel, placeholder: this._componentLocale.header.fileNamePlaceholder, part: "file-name", acceptFile: ".xpz, .xml", clearButton: true, iconPosition: "start", onFileSelected: this.fileSelectedHandler, onClearButtonClicked: this.fileClearedHandler, ref: (el) => (this.fileInputEl = el) }), h("gxg-button-group", {
       // default-selected-btn-id="select-file-btn"
       ref: (el) => (this.headerButtonsGroup = el)
-    }, h("button", { id: "select-file-btn", part: "select-file-button", onClick: this.selectFileHandler }, this._componentLocale.header.selectFileButton), h("button", { id: "load-file-btn", part: "load-file-button", disabled: !this.selectedFile, onClick: this.loadFileHandler }, this._componentLocale.header.loadButton))), h("main", { class: "main" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.objectsInFile.title, noContentPadding: true, noBorderFooter: true, class: "left-grid-item", slimmerFooter: true, inactiveTitle: this.noObjects, footerSubtleShadow: !this.noObjects, titleType: "secondary" }, h("div", { class: {
+    }, h("button", { id: "select-file-btn", part: "select-file-button", onClick: this.selectFileHandler, disabled: this.importingObjects }, this._componentLocale.header.selectFileButton), h("button", { id: "load-file-btn", part: "load-file-button", disabled: !this.selectedFile || this.importingObjects, onClick: this.loadFileHandler }, this._componentLocale.header.loadButton))), h("main", { class: "main" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.objectsInFile.title, noContentPadding: true, noBorderFooter: true, class: "left-grid-item", slimmerFooter: true, inactiveTitle: this.noObjects, footerSubtleShadow: !this.noObjects, titleType: "secondary" }, h("div", { class: {
         "tree-container": true,
         "tree-container--objects-in-file": true,
         "tree-container--empty": this.noObjects
-      } }, !this.noObjects ? (h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, ref: el => (this.objectsTreeEl = el) })) : (h("div", { class: "gx-ide-message" }, h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message" }, "There are no Objects. ", h("br", null), h("gxg-text", { type: "text-link-no-line", onClick: this.selectFileHandler }, "Begin by selecting a file."))))), h("gxg-form-checkbox", { label: this._componentLocale.main.objectsInFile.selectUnselect, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingObjects || this.objectsTreeState.length === 0, checked: this.evaluateCheckAllValue(), onChange: this.toggleSelectionHandler, ref: (el) => (this.toggleObjectsCheckboxEl =
+      } }, !this.noObjects ? (h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, onItemContextmenu: this.objectsTreeContextMenuHandler, ref: el => (this.objectsTreeEl = el) })) : (h("div", { class: "gx-ide-message" }, h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message" }, "There are no Objects. ", h("br", null), h("gxg-text", { type: "text-link-no-line", onClick: this.selectFileHandler }, "Begin by selecting a file."))))), h("gxg-form-checkbox", { label: this._componentLocale.main.objectsInFile.selectUnselect, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingObjects || this.objectsTreeState.length === 0, checked: this.evaluateCheckAllValue(), onClick: this.toggleSelectionClickHandler, ref: (el) => (this.toggleObjectsCheckboxEl =
         el) }), h("gxg-button-group", { slot: "footer-end", ref: (el) => (this.objectsButtonsGroup = el) }, h("button", { id: "import-btn", part: "import-button", disabled: this.importingObjects ||
         this.checkedObjectsIds.length === 0, onClick: this.importObjectsHandler }, this._componentLocale.main.objectsInFile.importButton), h("button", { id: "cancel-import-btn", part: "cancel-import-button", disabled: !this.importingObjects, onClick: this.cancelImportHandler }, this._componentLocale.main.objectsInFile.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", slot: "footer-end", part: "select-kb-btn", onClick: this.optionsHandler }, this._componentLocale.header.optionsButton)), h("gx-ide-container", { containerTitle: this._componentLocale.main.importStatus.title, noContentPadding: true, noBorderFooter: true, slimmerFooter: true, inactiveTitle: this.noImport, footerSubtleShadow: !this.noImport, titleType: "secondary" }, h("div", { class: {
         "tree-container": true,
         "tree-container--import-status": true,
-        "tree-container--empty": this.noImport,
+        "tree-container--empty": this.noImport || !this.someStatusVisible,
         "tree-container--no-warnings": !this.statusInfo.warning.display,
         "tree-container--no-errors": !this.statusInfo.error.display,
-        "tree-container--no-successes": this.statusInfo.success.display === false
-      } }, !this.noImport ? (h("gxg-tree-view", { treeModel: this.importTreeState, toggleCheckboxes: true, ref: el => (this.objectsTreeEl = el) })) : (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message", class: "gx-ide-message" }, "There are no Imported files."))), h("gxg-text", { type: "button-like", slot: "footer-end", part: "select-kb-btn", onClick: this.clearStatusHandler, disabled: this.noImport }, this._componentLocale.main.importStatus.clearButton), h("span", { class: "ghost-element", slot: "footer-start" }))), h("footer", { slot: "footer-start" }, h("gx-ide-status-buttons", { errors: this.statusInfo.error.number, warnings: this.statusInfo.warning.number, successes: this.statusInfo.success.number, compact: true, noBorderTop: true, noBorderBottom: true, noBorderStart: true, minimal: this.statusMinimal, onSelectionChanged: this.statusButtonsSelectionChangedHandler }))), h("gxg-ide-loader", { description: "Importing objects..." }))));
+        "tree-container--no-successes": !this.statusInfo.success.display
+      } }, !this.noImport && this.someStatusVisible ? (h("gxg-tree-view", { treeModel: this.importTreeState, toggleCheckboxes: true, ref: el => (this.objectsTreeEl = el) })) : (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message", class: "gx-ide-message" }, this.importStatusMessage))), h("gxg-text", { type: "button-like", slot: "footer-end", part: "select-kb-btn", onClick: this.clearStatusHandler, disabled: this.noImport || this.importingObjects }, this._componentLocale.main.importStatus.clearButton), h("span", { class: "ghost-element", slot: "footer-start" }))), h("footer", { slot: "footer-start" }, h("gx-ide-status-buttons", { errors: this.statusInfo.error.number, warnings: this.statusInfo.warning.number, successes: this.statusInfo.success.number, compact: true, noBorderTop: true, noBorderBottom: true, noBorderStart: true, minimal: this.statusMinimal, onSelectionChanged: this.statusButtonsSelectionChangedHandler }))), h("gxg-ide-loader", { description: "Importing objects..." }))));
   }
   static get assetsDirs() { return ["gx-ide-assets/kb-manager-import"]; }
   get el() { return this; }
@@ -387,11 +479,14 @@ const GxIdeKbManagerImport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "loadCallback": [16],
     "cancelCallback": [16],
     "statusMinimal": [4, "status-minimal"],
+    "objectContextMenuCallback": [16],
     "checkedObjectsIds": [32],
     "noObjects": [32],
     "showHiddenImportsMessage": [32],
     "statusInfo": [32],
     "objectsTreeState": [32],
+    "importStatusMessage": [32],
+    "someStatusVisible": [32],
     "noImport": [32],
     "importTreeState": [32],
     "importingObjects": [32],

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;
   } });
 }
 

package/dist/components/gxg-pill.js

@@ -4,7 +4,7 @@ import { e as exportParts } from './export-parts.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon2.js';
 
-const pillCss = "/*! 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:inline-flex;align-items:center;border-color:var(--gray-02);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:11px;padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03);opacity:1;height:var(--spacing-comp-04);box-sizing:border-box;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .title{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 .clear-button{margin-inline-start:10px;cursor:pointer;opacity:0.7}:host .clear-button:hover{opacity:1}:host gxg-icon{transform:scale(0.84)}:host gxg-icon.clear-button{transform:scale(0.65)}:host(.no-icon) gxg-icon.custom{width:0}:host(.has-icon){padding-inline-start:0}:host([type=static]),:host([type=static-with-action]){background-color:var(--gray-01);border-color:var(--gray-01);font-style:italic}:host([type=static-with-action]),:host([type=button-with-action]){padding-inline-end:0}:host([type=button]){padding-inline-end:var(--spacing-comp-02)}:host([type=button]:hover),:host([type=button-with-action]:hover){border-color:var(--gray-07);cursor:pointer}:host([type=button]:focus),:host([type=button-with-action]:focus){border-color:var(--gray-07)}:host([type=button]:active),:host([type=button-with-action]:active){border-color:var(--gray-07)}:host([type=button-with-action]){padding-inline-end:2px}:host([type=button-with-action]) .clear-button{cursor:pointer;opacity:0.5;margin-inline-start:8px}:host([type=button-with-action]) .clear-button:hover{opacity:0.75}:host(.hide){opacity:0}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .title{color:var(--gray-03)}:host([disabled]) gxg-icon{opacity:0.3}:host([disabled][type=button]),:host([disabled][type=button-with-action]){border-color:var(--gray-03)}:host([disabled]:focus){box-shadow:none}:host([height-auto]){height:auto}:host(.large){height:20px}:host(.large) .title{font-size:var(--font-size-lg)}:host(.large) gxg-icon.clear-button{transform:scale(0.85)}";
+const pillCss = "/*! 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:inline-flex;align-items:center;border-color:var(--gray-02);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:11px;padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03);opacity:1;height:var(--spacing-comp-04);box-sizing:border-box;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .title{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 .clear-button{margin-inline-start:10px;cursor:pointer;opacity:0.7}:host .clear-button:hover{opacity:1}:host gxg-icon{transform:scale(0.84)}:host gxg-icon.clear-button{transform:scale(0.65)}:host(.no-icon) gxg-icon.custom{width:0}:host(.has-icon){padding-inline-start:0}:host([type=static]),:host([type=static-with-action]){background-color:var(--gray-01);border-color:var(--gray-01);font-style:italic}:host([type=static-with-action]),:host([type=button-with-action]){padding-inline-end:0}:host([type=button]){padding-inline-end:var(--spacing-comp-02)}:host([type=button]:hover),:host([type=button-with-action]:hover){border-color:var(--gray-07);cursor:pointer}:host([type=button]:focus),:host([type=button-with-action]:focus){border-color:var(--gray-07)}:host([type=button]:active),:host([type=button-with-action]:active){border-color:var(--gray-07)}:host([type=button-with-action]){padding-inline-end:2px}:host([type=button-with-action]) .clear-button{cursor:pointer;opacity:0.5;margin-inline-start:8px}:host([type=button-with-action]) .clear-button:hover{opacity:0.75}:host(.hide){opacity:0}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .title{color:var(--gray-03)}:host([disabled]) gxg-icon{opacity:0.3}:host([disabled][type=button]),:host([disabled][type=button-with-action]){border-color:var(--gray-03)}:host([disabled]:focus){box-shadow:none}:host([height-auto]){height:auto}:host(.large){height:20px}:host(.large) .title{font-size:var(--font-size-lg)}:host(.large) gxg-icon.clear-button{transform:scale(0.85)}:host(.mercury){background-color:var(--gray-10);padding:var(--spacing-comp-01) var(--spacing-comp-04);border-radius:var(--border-radius-xl);height:34px;border-color:transparent}:host(.mercury) .title{font-size:var(--font-size--xs);color:var(--gray-07)}:host(.mercury[type=static]),:host(.mercury[type=static-with-action]){background-color:var(--gray-10)}:host(.mercury[type=static]) .title,:host(.mercury[type=static-with-action]) .title{color:var(--gray-03)}:host(.mercury[italic]) .title{font-style:italic}";
 
 const GxgPill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -27,6 +27,10 @@ const GxgPill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * The presence of this attribute sets auto-height. Useful when the text overflows.
      */
     this.heightAuto = false;
+    /**
+     * Stylizes the font with italic (only used in mercury)
+     */
+    this.italic = false;
     /**
      * The type of pill
      */
@@ -56,7 +60,10 @@ const GxgPill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   iconColor() {
-    if (this.disabled) {
+    if (state.mercury) {
+      return "mercury";
+    }
+    else if (this.disabled) {
       return "disabled";
     }
     else {
@@ -68,6 +75,7 @@ const GxgPill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "no-icon": this.icon === undefined,
         "has-icon": this.icon !== undefined,
         large: state.large,
+        mercury: state.mercury,
       }, exportParts: this.exportparts ? this.exportparts : null }, h("gxg-icon", { class: "custom", type: this.iconType(), size: "regular", color: this.iconColor() }), h("span", { class: "title" }, h("slot", null)), this.type === "button-with-action" ||
       this.type === "static-with-action" ? (h("gxg-icon", { class: "clear-button", type: "gemini-tools/close", size: "small", color: "onbackground", onClick: this.removeButtonFunc.bind(this), part: this.parts.removeButton })) : null));
   }
@@ -78,6 +86,7 @@ const GxgPill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "icon": [1],
     "heightAuto": [4, "height-auto"],
     "id": [1],
+    "italic": [4],
     "type": [513]
   }]);
 function defineCustomElement$1() {

package/dist/components/gxg-pills.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
 
-const pillsCss = ":host{display:block}.pills-wrapper{display:flex;gap:var(--spacing-comp-02);flex-wrap:wrap}";
+const pillsCss = ":host{display:block}.pills-wrapper{display:flex;gap:var(--spacing-comp-02);flex-wrap:wrap}:host(.mercury) .pills-wrapper{gap:var(--spacing-comp-04)}";
 
 const GxgPills$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -23,7 +24,7 @@ const GxgPills$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return pillsIds;
   }
   render() {
-    return (h(Host, null, h("div", { class: "pills-wrapper" }, h("slot", null))));
+    return (h(Host, { class: { mercury: state.mercury } }, h("div", { class: "pills-wrapper" }, h("slot", null))));
   }
   get el() { return this; }
   static get style() { return pillsCss; }