@genexus/genexus-ide-ui 0.0.16 → 0.0.18

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