@genexus/genexus-ide-ui 0.0.15 → 0.0.17

package/dist/components/ch-grid2.js

@@ -319,7 +319,6 @@ var ChGridCellType;
   ChGridCellType["Plain"] = "plain";
   ChGridCellType["Rich"] = "rich";
   ChGridCellType["TreeNode"] = "node";
-  ChGridCellType["RowAction"] = "action";
 })(ChGridCellType || (ChGridCellType = {}));
 /**
  * The `ch-grid-cell` component represents a grid cell.
@@ -328,6 +327,29 @@ class HTMLChGridCellElement extends HTMLElement {
   constructor() {
     super();
     this.cellType = ChGridCellType.Plain;
+    this.defineFocusHandler();
+  }
+  static get observedAttributes() {
+    return ["cell-type", "row-drag", "row-selector", "row-actions"];
+  }
+  connectedCallback() {
+    if (this.cellType !== ChGridCellType.Plain) {
+      this.define();
+    }
+  }
+  attributeChangedCallback(name, _oldValue, value) {
+    if (name === "cell-type") {
+      this.cellType = value;
+    }
+    if (name === "row-drag") {
+      this.rowDrag = value !== null ? value !== "false" : false;
+    }
+    if (name === "row-selector") {
+      this.rowSelector = value !== null ? value !== "false" : false;
+    }
+    if (name === "row-actions") {
+      this.rowActions = value !== null ? value !== "false" : false;
+    }
   }
   /**
    * One of "plain", "rich", or "node", indicating the type of cell.
@@ -336,16 +358,9 @@ class HTMLChGridCellElement extends HTMLElement {
     return this.cellType;
   }
   set type(value) {
-    switch (value) {
-      case ChGridCellType.Plain:
-        this.definePlain();
-        break;
-      case ChGridCellType.Rich:
-        this.defineRich();
-        break;
-      case ChGridCellType.TreeNode:
-        this.defineTreeNode();
-        break;
+    if (this.cellType !== value) {
+      this.cellType = value;
+      this.define();
     }
   }
   /**
@@ -412,6 +427,11 @@ class HTMLChGridCellElement extends HTMLElement {
       this.selector.setAttribute("part", "selector");
     }
   }
+  defineFocusHandler() {
+    this.addEventListener("focusin", () => {
+      this.dispatchEvent(new CustomEvent("cellFocused", { bubbles: true, composed: true }));
+    });
+  }
   caretMouseDownHandler(eventInfo) {
     eventInfo.stopPropagation();
     this.dispatchEvent(new CustomEvent("cellCaretClicked", { bubbles: true, composed: true }));
@@ -449,12 +469,18 @@ class HTMLChGridCellElement extends HTMLElement {
       composed: true
     }));
   }
-  definePlain() {
-    this.cellType = ChGridCellType.Plain;
+  define() {
+    switch (this.cellType) {
+      case ChGridCellType.Rich:
+        this.defineRich();
+        break;
+      case ChGridCellType.TreeNode:
+        this.defineTreeNode();
+        break;
+    }
   }
   defineRich() {
     let html = "";
-    this.cellType = ChGridCellType.Rich;
     if (!this.shadowRoot || this.shadowRoot.innerHTML === "") {
       this.attachShadow({ mode: "open" });
       if (this.rowDrag) {
@@ -498,7 +524,6 @@ class HTMLChGridCellElement extends HTMLElement {
     }
   }
   defineTreeNode() {
-    this.cellType = ChGridCellType.TreeNode;
     if (!this.shadowRoot || this.shadowRoot.innerHTML === "") {
       this.attachShadow({ mode: "open" });
       this.shadowRoot.innerHTML = `
@@ -1003,14 +1028,26 @@ class ChGridManagerSelection {
     return { rowFocused, rowsSelected, cellSelected };
   }
   selectSet(state, row, cell, value = true) {
+    let append = true;
+    if (this.manager.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    else if (this.manager.grid.rowSelectionMode !== "multiple") {
+      append = false;
+    }
     let rowFocused = state.rowFocused;
     let rowsSelected = state.rowsSelected;
     let cellSelected = state.cellSelected;
     rowFocused = row;
     if (value) {
-      rowsSelected = rowsSelected.includes(row)
-        ? rowsSelected
-        : [...rowsSelected, row];
+      if (append) {
+        rowsSelected = rowsSelected.includes(row)
+          ? rowsSelected
+          : [...rowsSelected, row];
+      }
+      else {
+        rowsSelected = rowsSelected.includes(row) ? rowsSelected : [row];
+      }
       cellSelected = cell;
     }
     else {
@@ -1918,6 +1955,12 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   blurHandler() {
     this.rowFocused = null;
   }
+  cellFocusedHandler(eventInfo) {
+    const cell = eventInfo.target;
+    if (this.rowSelectionMode !== "none" && !cell.selected) {
+      this.setCellSelected(cell);
+    }
+  }
   windowKeyDownHandler(eventInfo) {
     if (document.activeElement === this.el &&
       [
@@ -2166,15 +2209,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   async selectCell(cellId, rowId, columnId, selected = true) {
     const cell = this.manager.getCell(cellId, rowId, columnId);
     if (cell) {
-      const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.selectSet({
-        rowFocused: this.rowFocused,
-        rowsSelected: this.rowsSelected,
-        cellSelected: this.cellSelected
-      }, cell.row, cell, selected);
-      this.rowFocused = rowFocused;
-      this.rowsSelected = rowsSelected;
-      this.cellSelected = cellSelected;
-      rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
+      this.setCellSelected(cell, selected);
     }
   }
   /**
@@ -2356,6 +2391,17 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       row.collapsed = false;
     }
   }
+  setCellSelected(cell, selected = true) {
+    const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.selectSet({
+      rowFocused: this.rowFocused,
+      rowsSelected: this.rowsSelected,
+      cellSelected: this.cellSelected
+    }, cell.row, cell, selected);
+    this.rowFocused = rowFocused;
+    this.rowsSelected = rowsSelected;
+    this.cellSelected = cellSelected;
+    rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
+  }
   renderSettings() {
     return (h("ch-grid-settings", { grid: this.el, ref: el => (this.settingsUI = el), exportparts: "\n          mask:settings-mask,\n          window:settings-window,\n          header:settings-header,\n          caption:settings-caption,\n          close:settings-close,\n          main:settings-main,\n          footer:settings-footer\n        " }, h("slot", { name: "settings" }, h("ch-grid-settings-columns", { part: "settings-columns", columns: [...this.manager.getColumns()], exportparts: "\n              column:settings-columns-item,\n              column-label:settings-columns-label,\n              column-visible:settings-columns-visible,\n              column-visible-checked:settings-columns-visible-checked\n            " }))));
   }
@@ -2404,7 +2450,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     "getNextRow": [64],
     "getPreviousCell": [64],
     "getNextCell": [64]
-  }, [[1, "focus", "focusHandler"], [1, "blur", "blurHandler"], [8, "keydown", "windowKeyDownHandler"], [1, "keydown", "keyDownHandler"], [1, "mousemove", "mouseMoveHandler"], [1, "mouseleave", "mouseLeaveHandler"], [1, "mousedown", "clickHandler"], [1, "mouseup", "mouseUpHandler"], [1, "dblclick", "dblclickHandler"], [1, "columnSelectorClicked", "columnSelectorClickedHandler"], [1, "cellSelectorClicked", "cellSelectorClickedHandler"], [1, "cellRowActionClicked", "cellRowActionClickedHandler"], [0, "columnHiddenChanged", "columnStyleChangedHandler"], [0, "columnOrderChanged", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnStyleChangedHandler"], [0, "columnSizeChanging", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnFreezeChangedHandler"], [0, "columnDragStarted", "columnDragStartHandler"], [0, "columnDragging", "columnDraggingHandler"], [0, "columnDragEnded", "columnDragEndHandler"], [0, "rowDragStarted", "rowDragStartHandler"], [0, "rowEnsureVisible", "rowEnsureVisibleHandler"], [0, "cellEnsureVisible", "cellEnsureVisibleHandler"], [0, "settingsShowClicked", "settingsShowClickedHandler"], [0, "settingsCloseClicked", "settingsCloseClickedHandler"]]]);
+  }, [[1, "focus", "focusHandler"], [1, "blur", "blurHandler"], [1, "cellFocused", "cellFocusedHandler"], [8, "keydown", "windowKeyDownHandler"], [1, "keydown", "keyDownHandler"], [1, "mousemove", "mouseMoveHandler"], [1, "mouseleave", "mouseLeaveHandler"], [1, "mousedown", "clickHandler"], [1, "mouseup", "mouseUpHandler"], [1, "dblclick", "dblclickHandler"], [1, "columnSelectorClicked", "columnSelectorClickedHandler"], [1, "cellSelectorClicked", "cellSelectorClickedHandler"], [1, "cellRowActionClicked", "cellRowActionClickedHandler"], [0, "columnHiddenChanged", "columnStyleChangedHandler"], [0, "columnOrderChanged", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnStyleChangedHandler"], [0, "columnSizeChanging", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnFreezeChangedHandler"], [0, "columnDragStarted", "columnDragStartHandler"], [0, "columnDragging", "columnDraggingHandler"], [0, "columnDragEnded", "columnDragEndHandler"], [0, "rowDragStarted", "rowDragStartHandler"], [0, "rowEnsureVisible", "rowEnsureVisibleHandler"], [0, "cellEnsureVisible", "cellEnsureVisibleHandler"], [0, "settingsShowClicked", "settingsShowClickedHandler"], [0, "settingsCloseClicked", "settingsCloseClickedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/combo-box.js

@@ -12,7 +12,7 @@ import { d as defineCustomElement$2 } from './gxg-label2.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
 function mutationObserverRemoved(target, ref) {
-    const observer = new MutationObserver((mutationsList, observer) => {
+    const observer = new MutationObserver((mutationsList) => {
         for (const mutation of mutationsList) {
             if (mutation.type === "childList") {
                 const removedNodesArray = Array.from(mutation.removedNodes);
@@ -446,7 +446,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = event.detail.value;
     this.inputText.focus();
   }
-  itemDidLoadHandler(itemLoaded) {
+  itemDidLoadHandler() {
     this.setIndexes();
     this.setInitialValue();
   }
@@ -599,7 +599,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         large: state.large,
       }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
         "main-container": true,
-      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.inputTextIcon, iconPosition: this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
+      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: this.fixedIcon ? "start" : this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
         "items-container": true,
         "items-container--show": this.listIsOpen,
         "items-container--no-match": this.noMatch,
@@ -618,6 +618,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return comboBoxCss; }
 }, [17, "gxg-combo-box", {
+    "fixedIcon": [1, "fixed-icon"],
     "disabled": [4],
     "label": [1],
     "labelPosition": [513, "label-position"],

package/dist/components/form-radio.js

@@ -30,11 +30,6 @@ const GxgFormRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   /*********************************
   METHODS
   *********************************/
-  componentDidLoad() {
-    this.radioInput.addEventListener("change", (e) => {
-      console.log("changed", e);
-    });
-  }
   checkedHandler(newValue) {
     if (newValue) {
       this.radioChecked.emit({

package/dist/components/gx-ide-directory-selector.js

@@ -50,7 +50,6 @@ const GxIdeDirectorySelector$1 = /*@__PURE__*/ proxyCustomElement(class extends
   // 10.RENDER() FUNCTION //
   render() {
     var _a;
-    console.log("centerLabel", this.centerLabel);
     return (h(Host, null, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel }, this.label)) : null, h("div", { class: "wrapper" }, h("gxg-form-text", { part: "input", value: this.value }), h("gxg-button", { part: "button-select", onClick: this.btnSelectClickHandler, "aria-label": (_a = this.accessibilityLabels) === null || _a === void 0 ? void 0 : _a.buttonSelectLabel, type: "secondary-icon-only", icon: "gemini-tools/folder", disabled: !this.selectDirectoryCallback }))));
   }
   static get style() { return directorySelectorCss; }

package/dist/components/gx-ide-entity-selector.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$6 } from './icon.js';
 import { d as defineCustomElement$5 } from './button.js';
 import { d as defineCustomElement$4 } from './icon2.js';
@@ -12,8 +12,7 @@ const GxIdeEntitySelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     super();
     this.__registerHost();
     this.__attachShadow();
-    // PUBLIC PROPERTY API | WATCH'S //
-    // 5.EVENTS (EMIT) //
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     // 6.METHODS //
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
@@ -67,6 +66,14 @@ const GxIdeEntitySelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.value = undefined;
     this.buttonHasFocus = false;
   }
+  // 4.PUBLIC PROPERTY API | WATCH'S //
+  /**
+   *
+   * @param newValue the new entity value
+   */
+  valueChangedHandler() {
+    this.valueChanged.emit(this.value);
+  }
   // 10.RENDER() FUNCTION //
   render() {
     var _a, _b, _c, _d;
@@ -74,6 +81,9 @@ const GxIdeEntitySelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         "gxg-entity-selector--button-has-focus": this.buttonHasFocus
       } }, this.label && (h("gxg-label", { part: "label", labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)), h("div", { part: "wrapper", class: "wrapper" }, this.iconSrc() && (h("gxg-icon", { color: this.iconColor(), type: this.iconSrc(), part: "icon", "aria-hidden": "true" })), h("input", { type: "text", readonly: true, part: "input input-entity", value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.name) || ((_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.name) }), h("gxg-button", { part: "button-clear", onClick: this.btnClearClickHandler, "aria-label": (_c = this.accessibilityLabels) === null || _c === void 0 ? void 0 : _c.buttonClearLabel, onFocus: this.buttonFocusHandler, onBlur: this.buttonFocusHandler, type: "secondary-icon-only", icon: "gemini-tools/reset" }), h("gxg-button", { part: "button-select", onClick: this.btnSelectClickHandler, "aria-label": (_d = this.accessibilityLabels) === null || _d === void 0 ? void 0 : _d.buttonSelectLabel, onFocus: this.buttonFocusHandler, onBlur: this.buttonFocusHandler, type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", disabled: !this.selectEntityCallback }))));
   }
+  static get watchers() { return {
+    "value": ["valueChangedHandler"]
+  }; }
   static get style() { return entitySelectorCss; }
 }, [1, "gx-ide-entity-selector", {
     "accessibilityLabels": [16],

package/dist/components/gx-ide-new-kb.js

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
 import { f as formSubmitValidation, r as renderFormItems, g as getSelectedGxOption } from './form-validation.js';
-import { d as defineCustomElement$j } from './icon.js';
-import { d as defineCustomElement$i } from './container.js';
-import { d as defineCustomElement$h } from './top-bar.js';
+import { d as defineCustomElement$i } from './icon.js';
+import { d as defineCustomElement$h } from './container.js';
 import { d as defineCustomElement$g } from './button.js';
 import { d as defineCustomElement$f } from './combo-box.js';
 import { d as defineCustomElement$e } from './combo-box-item.js';
@@ -124,24 +123,24 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return gxOptions;
     };
     this.createKbHandler = () => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
       if (this.createCallback) {
         const createCallbackPromise = this.createCallback({
-          kbName: this.kbNameEl.value,
-          kbLocation: this.locationEl.value,
-          prototypingTarget: this.prototypingTargetEl.value,
-          userInterfaceLanguage: this.userInterfaceLanguageEl.value,
-          prototypingEnvironment: this.prototypingEnvironmentEl.value,
-          dataSource: this.dataSourceEl.value,
+          kbName: (_a = this.kbNameEl) === null || _a === void 0 ? void 0 : _a.value,
+          kbLocation: (_b = this.locationEl) === null || _b === void 0 ? void 0 : _b.value,
+          prototypingTarget: (_c = this.prototypingTargetEl) === null || _c === void 0 ? void 0 : _c.value,
+          userInterfaceLanguage: (_d = this.userInterfaceLanguageEl) === null || _d === void 0 ? void 0 : _d.value,
+          prototypingEnvironment: (_e = this.prototypingEnvironmentEl) === null || _e === void 0 ? void 0 : _e.value,
+          dataSource: (_f = this.dataSourceEl) === null || _f === void 0 ? void 0 : _f.value,
           frontEnds: this.getFrontEndOptionsValues(),
-          serverName: this.serverNameEl.value,
-          databaseName: this.databaseNameEl.value,
-          collation: this.collationEl.value,
-          createDataFilesInKBFolder: this.createDataFilesInKBFolderEl.checked,
-          authenticationType: this.authenticationTypeEl.value,
-          userName: (_a = this.userNameEl) === null || _a === void 0 ? void 0 : _a.value,
-          password: (_b = this.passwordEl) === null || _b === void 0 ? void 0 : _b.value,
-          savePassword: (_c = this.savePasswordEl) === null || _c === void 0 ? void 0 : _c.checked
+          serverName: (_g = this.serverNameEl) === null || _g === void 0 ? void 0 : _g.value,
+          databaseName: (_h = this.databaseNameEl) === null || _h === void 0 ? void 0 : _h.value,
+          collation: (_j = this.collationEl) === null || _j === void 0 ? void 0 : _j.value,
+          createDataFilesInKBFolder: (_k = this.createDataFilesInKBFolderEl) === null || _k === void 0 ? void 0 : _k.checked,
+          authenticationType: (_l = this.authenticationTypeEl) === null || _l === void 0 ? void 0 : _l.value,
+          userName: (_m = this.userNameEl) === null || _m === void 0 ? void 0 : _m.value,
+          password: (_o = this.passwordEl) === null || _o === void 0 ? void 0 : _o.value,
+          savePassword: (_p = this.savePasswordEl) === null || _p === void 0 ? void 0 : _p.checked
         });
         createCallbackPromise.then(formSubmitResult => {
           formSubmitValidation(formSubmitResult, this);
@@ -171,7 +170,6 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.userNameVisible = true;
     this.passwordVisible = true;
     this.savePasswordVisible = true;
-    this.hideTopBar = false;
     this.dataSources = undefined;
     this.frontEnds = undefined;
     this.isAdvanced = false;
@@ -207,7 +205,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    *  11.RENDER() FUNCTION
    ********************************/
   render() {
-    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", null, h("header", { class: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", null, h("header", { class: {
         "header": true,
         "grid": true,
         "header--is-advanced": this.isAdvanced
@@ -223,7 +221,6 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   get el() { return this; }
   static get style() { return newKbCss; }
 }, [1, "gx-ide-new-kb", {
-    "hideTopBar": [4, "hide-top-bar"],
     "dataSources": [16],
     "frontEnds": [16],
     "isAdvanced": [4, "is-advanced"],
@@ -253,7 +250,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-new-kb", "ch-icon", "gx-ide-container", "gx-ide-top-bar", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-checkbox-group", "gxg-form-radio", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-tab", "gxg-tab-bar", "gxg-tab-button", "gxg-tabs", "gxg-title", "gxg-tooltip"];
+  const components = ["gx-ide-new-kb", "ch-icon", "gx-ide-container", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-checkbox-group", "gxg-form-radio", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-tab", "gxg-tab-bar", "gxg-tab-button", "gxg-tabs", "gxg-title", "gxg-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-new-kb":
       if (!customElements.get(tagName)) {
@@ -261,16 +258,11 @@ function defineCustomElement$1() {
       }
       break;
     case "ch-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "gx-ide-container":
       if (!customElements.get(tagName)) {
         defineCustomElement$i();
       }
       break;
-    case "gx-ide-top-bar":
+    case "gx-ide-container":
       if (!customElements.get(tagName)) {
         defineCustomElement$h();
       }

package/dist/components/gx-ide-template.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
-import { d as defineCustomElement$a } from './icon.js';
-import { d as defineCustomElement$9 } from './container.js';
-import { d as defineCustomElement$8 } from './top-bar.js';
+import { d as defineCustomElement$9 } from './icon.js';
+import { d as defineCustomElement$8 } from './container.js';
 import { d as defineCustomElement$7 } from './button.js';
 import { d as defineCustomElement$6 } from './form-text.js';
 import { d as defineCustomElement$5 } from './icon2.js';
@@ -18,7 +17,7 @@ const GxIdeTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.__registerHost();
     this.__attachShadow();
     this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
-    this.hideTopBar = false;
+    this.mainTile = undefined;
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
@@ -32,19 +31,19 @@ const GxIdeTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { fullHeight: true, "container-title": "Header Title" }, h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer" }, "Create")))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { fullHeight: true, "container-title": "Header Title" }, h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer" }, "Create")))));
   }
   static get assetsDirs() { return ["gx-ide-assets/template"]; }
   get el() { return this; }
   static get style() { return templateCss; }
 }, [1, "gx-ide-template", {
-    "hideTopBar": [4, "hide-top-bar"]
+    "mainTile": [1, "main-tile"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-template", "ch-icon", "gx-ide-container", "gx-ide-top-bar", "gxg-button", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-title", "gxg-tooltip"];
+  const components = ["gx-ide-template", "ch-icon", "gx-ide-container", "gxg-button", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-title", "gxg-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-template":
       if (!customElements.get(tagName)) {
@@ -52,16 +51,11 @@ function defineCustomElement$1() {
       }
       break;
     case "ch-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "gx-ide-container":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "gx-ide-top-bar":
+    case "gx-ide-container":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }

package/dist/components/gxg-menu.js

@@ -107,7 +107,7 @@ const GxgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.removeMouseEnter = () => {
       this.el.removeEventListener("mouseenter", this.detectMouseEnter);
     };
-    this.detectMouseEnter = (e) => {
+    this.detectMouseEnter = () => {
       //Mouse enter
       this.clearMouseOutTimeout();
     };
@@ -185,7 +185,7 @@ const GxgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   keyboardNavigationHandler(triggeredItem) {
     const triggeringItem = triggeredItem.detail.ref;
-    const triggeringItemIndex = this._enabledItems.findIndex((item, i) => {
+    const triggeringItemIndex = this._enabledItems.findIndex((item) => {
       return item === triggeringItem;
     });
     let newFocusedItem;

package/dist/components/gxg-test.js

@@ -35,7 +35,7 @@ const renderTreeItem = (item) => {
     const childrenLength = item.items ? item.items.length : 0;
     const isLeaf = childrenLength === 0 || item.leaf ? true : false;
     const lazy = !item.lazy ? false : true;
-    return (h("gxg-tree-item", { checkbox: item.checkbox, checked: item.checked, description: item.description, disabled: item.disabled, icon: item.icon, indeterminate: item.indeterminate, id: item.id, key: `tree-item-${item.id}`, label: item.label, leaf: isLeaf && !lazy, numberOfChildren: childrenLength, opened: item.opened, selected: item.selected }, [item.label, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) && renderTreeItems(item.items, false)]));
+    return (h("gxg-tree-item", { checkbox: item.checkbox, checked: item.checked, description: item.description, disabled: item.disabled, icon: item.icon, indeterminate: item.indeterminate, id: item.id, label: item.label, leaf: isLeaf && !lazy, numberOfChildren: childrenLength, opened: item.opened, selected: item.selected }, [item.label, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) && renderTreeItems(item.items, false)]));
 };
 
 const testCss = ".tree-buttons{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}";
@@ -75,27 +75,8 @@ const GxgTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.deleteNodeHandler = () => {
       this.treeItemsModel = [];
     };
-    this.getIconState = (state) => {
-      let icon = h("gxg-icon", { type: "gx-server/private" });
-      switch (state) {
-        case "inserted":
-          icon = h("gxg-icon", { type: "gx-server/new", color: "success" });
-          break;
-        case "modified":
-          icon = (h("gxg-icon", { type: "gx-server/changes-commit-pending", color: "primary-active" }));
-          break;
-        case "deleted":
-          icon = h("gxg-icon", { type: "gx-server/delete", color: "error" });
-          break;
-        case "conflicted":
-          icon = h("gxg-icon", { type: "gx-server/conflict", color: "warning" });
-          break;
-      }
-      return icon;
-    };
   }
   toggleIconClickedHandler(e) {
-    console.log("hola");
     const treeItemId = e.detail.id;
     const isLazy = e.detail.lazy;
     if (this.lazyLoadTreeItemsCallback && isLazy) {
@@ -118,9 +99,9 @@ const GxgTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       ];
     }
     else if (this.showGrid) {
-      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "none", part: "ch-grid-pending-for-updates", class: "no-border" }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, sortable: false, "column-type": "rich", "rich-row-selector": true, "rich-row-selector-mode": "mark" }), h("ch-grid-column", { "column-name": "name", "column-name-position": "text", settingable: false }), h("ch-grid-column", { "column-name": "productos", "column-name-position": "text", settingable: false })), this.showGridData && [
-        h("ch-grid-row", { rowid: "123" }, h("ch-grid-cell", { ref: (el) => (el.type = "rich") }), h("ch-grid-cell", null, "Nombre"), h("ch-grid-cell", null, "Productos")),
-        h("ch-grid-rowset", null, h("ch-grid-rowset-legend", null, "Identidad"), h("ch-grid-row", { rowSelector: true }, h("ch-grid-cell", { rowSelector: true }), h("ch-grid-cell", null, "Nombre"), h("ch-grid-cell", null, "Productos")), h("ch-grid-row", null, h("ch-grid-cell", null), h("ch-grid-cell", null, "English"), h("ch-grid-cell", null, "Products")), h("ch-grid-row", null, h("ch-grid-cell", null), h("ch-grid-cell", null, "Portugu\u00EAs"), h("ch-grid-cell", null, "Produtos"))),
+      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", part: "ch-grid-pending-for-updates", class: "no-border" }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, sortable: false, "column-type": "rich", "rich-row-selector": true, "rich-row-selector-mode": "mark" }), h("ch-grid-column", { "column-name": "name", "column-name-position": "text", settingable: false }), h("ch-grid-column", { "column-name": "productos", "column-name-position": "text", settingable: false })), this.showGridData && [
+        h("ch-grid-row", { rowid: "123" }, h("ch-grid-cell", { "cell-type": "rich", "row-selector": true }), h("ch-grid-cell", null, "Nombre"), h("ch-grid-cell", null, "Productos")),
+        h("ch-grid-rowset", null, h("ch-grid-rowset-legend", null, "Identidad"), h("ch-grid-row", null, h("ch-grid-cell", { "cell-type": "rich", "row-selector": true }), h("ch-grid-cell", null, "Nombre"), h("ch-grid-cell", null, "Productos")), h("ch-grid-row", null, h("ch-grid-cell", { "cell-type": "rich", "row-selector": true }), h("ch-grid-cell", null, "English"), h("ch-grid-cell", null, "Products")), h("ch-grid-row", null, h("ch-grid-cell", { "cell-type": "rich", "row-selector": true }), h("ch-grid-cell", null, "Portugu\u00EAs"), h("ch-grid-cell", null, "Produtos"))),
       ])));
     }
     else {