@genexus/genexus-ide-ui 0.0.22 → 0.0.24

package/dist/components/dropdown.js

@@ -0,0 +1,294 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './ch-window2.js';
+import { d as defineCustomElement$1 } from './ch-window-close2.js';
+
+const dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--separation:0px;--separation-x:var(--separation);--separation-y:var(--separation);display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{transition:box-shadow 250ms}::slotted([slot=action]){pointer-events:none}.separation{display:flex;position:absolute;z-index:107}.separation--y{width:100%;height:var(--separation-y)}.separation--y-outside-start{inset-block-start:calc(var(--separation-y) * -1)}.separation--y-outside-start+ch-window{--ch-window-offset-y:calc(var(--separation-y) * -1)}.separation--y-outside-end{inset-block-end:calc(var(--separation-y) * -1)}.separation--y-outside-end+ch-window{--ch-window-offset-y:var(--separation-y)}.separation--x{width:var(--separation-x);height:100%}.separation--x-outside-start{inset-inline-start:calc(var(--separation-x) * -1)}.separation--x-outside-start+ch-window{--ch-window-offset-x:calc(var(--separation-x) * -1)}.separation--x-outside-end{inset-inline-end:calc(var(--separation-x) * -1)}.separation--x-outside-end+ch-window{--ch-window-offset-x:var(--separation-x)}.list{display:flex;flex-direction:column}";
+
+const mapDropdownAlignToChWindowAlign = {
+  OutsideStart: "outside-start",
+  InsideStart: "inside-start",
+  Center: "center",
+  InsideEnd: "inside-end",
+  OutsideEnd: "outside-end"
+};
+const EXPANDABLE_BUTTON_ID = "expandable-button";
+const SECTION_ID = "section";
+const DROPDOWN_ITEM_TAG_NAME = "ch-dropdown-item";
+const DROPDOWN_ITEM_SELECTOR = `:scope > ${DROPDOWN_ITEM_TAG_NAME}`;
+// Keys
+const TAB_KEY = "Tab";
+const ChDropDown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.expandedChange = createEvent(this, "expandedChange", 7);
+    this.keyEventsDictionary = {
+      ArrowDown: (event) => {
+        event.preventDefault();
+        if (!this.currentFocusedItem) {
+          this.focusFirstDropDownItem();
+          return;
+        }
+        const nextDropDownItem = this.findNextDropDownItemSibling();
+        if (nextDropDownItem) {
+          // This is wrong, it should call the focusElement Method. StencilJS bug?
+          nextDropDownItem.handleFocusElement();
+        }
+      },
+      ArrowUp: (event) => {
+        event.preventDefault();
+        if (!this.currentFocusedItem) {
+          this.focusFirstDropDownItem();
+          return;
+        }
+        const previousDropDownItem = this.findPreviousDropDownItemSibling();
+        if (previousDropDownItem) {
+          // This is wrong, it should call the focusElement Method. StencilJS bug?
+          previousDropDownItem.handleFocusElement();
+        }
+      },
+      Escape: () => {
+        this.closeDropdown();
+        this.returnFocusToButton();
+      }
+    };
+    this.showHeader = false;
+    this.showFooter = false;
+    this.expanded = false;
+    this.expandedWithHover = false;
+    /**
+     * This attribute lets you specify the label for the expandable button.
+     * Important for accessibility.
+     */
+    this.buttonLabel = "Show options";
+    /**
+     * Determine which actions on the expandable button display the dropdown
+     * section.
+     */
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * This attribute lets you specify if the control is nested in another
+     * dropdown. Useful to manage keyboard interaction.
+     */
+    this.nestedDropdown = false;
+    /**
+     * Determine if the dropdown section should be opened when the expandable
+     * button of the control is focused.
+     */
+    this.openOnFocus = false;
+    /**
+     * Specifies the position of the dropdown section that is placed relative to
+     * the expandable button.
+     */
+    this.position = "Center_OutsideEnd";
+    this.closeDropdown = () => {
+      this.closeDropdownWithHover();
+      this.expanded = false;
+      this.expandedChange.emit(false);
+    };
+    this.closeDropdownWithHover = () => {
+      this.expandedWithHover = false;
+      // If the control was not expanded with focus
+      if (!this.expanded) {
+        this.expandedChange.emit(false);
+      }
+    };
+    this.closeDropdownWhenClickingOutside = (event) => {
+      if (event.composedPath().find(el => el === this.el) === undefined) {
+        this.closeDropdown();
+      }
+    };
+    this.handleKeyDownEvents = (event) => {
+      const keyEventHandler = this.keyEventsDictionary[event.code];
+      if (keyEventHandler) {
+        keyEventHandler(event);
+      }
+    };
+    /**
+     * Check if the next focused element is a child element of the dropdown
+     * control.
+     */
+    this.handleKeyUpEvents = (event) => {
+      if (event.code !== TAB_KEY) {
+        return;
+      }
+      const isChildElement = event.composedPath().includes(this.el);
+      if (isChildElement) {
+        return;
+      }
+      this.closeDropdown();
+    };
+    this.handleMouseLeave = () => {
+      const focusedElementIsInsideDropDown = document.activeElement.closest("ch-dropdown") === this.el;
+      if (focusedElementIsInsideDropDown) {
+        this.expanded = true;
+      }
+      this.closeDropdownWithHover();
+    };
+    this.handleMouseEnter = () => {
+      if (this.expandedWithHover) {
+        return;
+      }
+      this.expandedWithHover = true;
+      // If not previously expanded, emit the event
+      if (!this.expanded) {
+        this.expandedChange.emit(true);
+      }
+    };
+    this.handleButtonClick = (event) => {
+      event.stopPropagation();
+      this.expandedChange.emit(!this.expanded);
+      this.expanded = !this.expanded;
+    };
+    this.handleButtonFocus = (event) => {
+      event.stopPropagation();
+      if (this.expanded) {
+        return;
+      }
+      this.expanded = true;
+      // If not previously expanded, emit the event
+      if (!this.expandedWithHover) {
+        this.expandedChange.emit(true);
+      }
+    };
+  }
+  handleExpandedChange(newExpandedValue) {
+    if (newExpandedValue) {
+      this.currentFocusedItem = undefined;
+      // Click
+      document.body.addEventListener("click", this.closeDropdownWhenClickingOutside, {
+        capture: true
+      });
+      // Keyboard events
+      if (!this.nestedDropdown) {
+        document.body.addEventListener("keydown", this.handleKeyDownEvents, {
+          capture: true
+        });
+      }
+      document.body.addEventListener("keyup", this.handleKeyUpEvents, {
+        capture: true
+      });
+    }
+    else {
+      // Click
+      document.body.removeEventListener("click", this.closeDropdownWhenClickingOutside, {
+        capture: true
+      });
+      // Keyboard events
+      if (!this.nestedDropdown) {
+        document.body.removeEventListener("keydown", this.handleKeyDownEvents, {
+          capture: true
+        });
+      }
+      document.body.removeEventListener("keyup", this.handleKeyUpEvents, {
+        capture: true
+      });
+    }
+  }
+  handleActionClick() {
+    this.closeDropdown();
+    // @todo This behavior must be specified by a property
+    // this.returnFocusToButton();
+  }
+  handleDropDownItemFocusChange(event) {
+    this.currentFocusedItem = event.target;
+  }
+  focusFirstDropDownItem() {
+    this.currentFocusedItem = this.el.querySelector(DROPDOWN_ITEM_SELECTOR);
+    if (this.currentFocusedItem) {
+      this.currentFocusedItem.handleFocusElement();
+    }
+  }
+  findNextDropDownItemSibling() {
+    let nextSibling = this.currentFocusedItem
+      .nextElementSibling;
+    while (nextSibling &&
+      nextSibling.tagName.toLowerCase() !== DROPDOWN_ITEM_TAG_NAME) {
+      nextSibling = nextSibling.nextElementSibling;
+    }
+    return nextSibling;
+  }
+  findPreviousDropDownItemSibling() {
+    let previousSibling = this.currentFocusedItem
+      .previousElementSibling;
+    while (previousSibling &&
+      previousSibling.tagName.toLowerCase() !== DROPDOWN_ITEM_TAG_NAME) {
+      previousSibling =
+        previousSibling.previousElementSibling;
+    }
+    return previousSibling;
+  }
+  /**
+   * Returns focus to the expandable button when closing the dropdown. Only
+   * works if `openOnFocus = "false"`
+   */
+  returnFocusToButton() {
+    if (!this.openOnFocus && !this.nestedDropdown) {
+      this.expandableButton.focus();
+    }
+  }
+  componentWillLoad() {
+    this.showHeader = !!this.el.querySelector(':scope > [slot="header"]');
+    this.showFooter = !!this.el.querySelector(':scope > [slot="footer"]');
+  }
+  render() {
+    const aligns = this.position.split("_");
+    const alignX = aligns[0];
+    const alignY = aligns[1];
+    const hasVerticalPosition = alignY === "OutsideStart" || alignY === "OutsideEnd";
+    const xAlignMapping = mapDropdownAlignToChWindowAlign[alignX];
+    const yAlignMapping = mapDropdownAlignToChWindowAlign[alignY];
+    const isExpanded = this.expanded || this.expandedWithHover;
+    return (h(Host, { onMouseLeave: this.expandBehavior === "ClickOrHover"
+        ? this.handleMouseLeave
+        : undefined }, h("button", { id: EXPANDABLE_BUTTON_ID, "aria-controls": SECTION_ID, "aria-expanded": this.expanded.toString(), "aria-haspopup": "true", "aria-label": this.buttonLabel, class: "expandable-button", part: "expandable-button", type: "button", onClick: this.handleButtonClick, onFocus: this.openOnFocus ? this.handleButtonFocus : undefined, onMouseEnter: this.expandBehavior === "ClickOrHover"
+        ? this.handleMouseEnter
+        : undefined, ref: el => (this.expandableButton = el) }, h("slot", { name: "action" })), this.expandBehavior === "ClickOrHover" && (
+    // Necessary since the separation between the button and the section
+    // triggers the onMouseLeave event
+    h("div", { "aria-hidden": "true", class: {
+        separation: true,
+        [`separation--y separation--y-${yAlignMapping}`]: hasVerticalPosition,
+        [`separation--x separation--x-${xAlignMapping}`]: !hasVerticalPosition
+      }, part: "separation" })), h("ch-window", { part: "window", exportparts: "window:section,mask,header,footer", container: this.el, closeOnEscape: true, hidden: !isExpanded, modal: false, showFooter: this.showFooter, showHeader: this.showHeader, xAlign: xAlignMapping, yAlign: yAlignMapping }, this.showHeader && h("slot", { name: "header", slot: "header" }), h("div", { role: "list", class: "list", part: "list" }, h("slot", { name: "items" })), this.showFooter && h("slot", { name: "footer", slot: "footer" }))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "expanded": ["handleExpandedChange"]
+  }; }
+  static get style() { return dropdownCss; }
+}, [1, "ch-dropdown", {
+    "buttonLabel": [1, "button-label"],
+    "expandBehavior": [1, "expand-behavior"],
+    "nestedDropdown": [4, "nested-dropdown"],
+    "openOnFocus": [4, "open-on-focus"],
+    "position": [1],
+    "expanded": [32],
+    "expandedWithHover": [32]
+  }, [[0, "actionClick", "handleActionClick"], [0, "focusChange", "handleDropDownItemFocusChange"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-dropdown", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChDropDown);
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ChDropDown as C, defineCustomElement as d };

package/dist/components/format-date.js

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core/internal/client';
+
+/* STENCIL IMPORTS */
+const renderComboItems = (gxOptions) => {
+  const comboItemsArray = [];
+  gxOptions.forEach((gxOption) => {
+    const iconName = gxOption.iconName || gxOption.icon;
+    comboItemsArray.push(h("gxg-combo-box-item", { value: gxOption.value, icon: iconName }, gxOption.label || gxOption.name));
+  });
+  return comboItemsArray;
+};
+
+const formatDate = (dateObject) => {
+  const date = dateObject.toISOString().slice(0, 10);
+  const hours = dateObject.getHours();
+  const minutes = dateObject.getMinutes();
+  const time = `${hours}:${minutes}`;
+  let period = "AM"; // Assume it's AM by default
+  if (hours >= 12) {
+    period = "PM";
+  }
+  return `${date} ${time}${period} `;
+};
+
+export { formatDate as f, renderComboItems as r };

package/dist/components/gx-ide-team-dev-commit.js

@@ -1,5 +1,6 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
+import { f as formatDate, r as renderComboItems } from './format-date.js';
 import { d as defineCustomElement$q } from './ch-grid2.js';
 import { d as defineCustomElement$p } from './ch-grid-column2.js';
 import { d as defineCustomElement$o } from './ch-grid-column-resize2.js';
@@ -26,16 +27,6 @@ import { d as defineCustomElement$4 } from './tabs.js';
 import { d as defineCustomElement$3 } from './title.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-/* STENCIL IMPORTS */
-const renderComboItems = (gxOptions) => {
-  const comboItemsArray = [];
-  gxOptions.forEach((gxOption) => {
-    const iconName = gxOption.iconName || gxOption.icon;
-    comboItemsArray.push(h("gxg-combo-box-item", { value: gxOption.value, icon: iconName }, gxOption.label || gxOption.name));
-  });
-  return comboItemsArray;
-};
-
 const teamDevCommitCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.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}: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);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}:host{display:block}.main-wrapper{width:100%}.gxg-tabs{margin-top:0;box-shadow:none}.header{grid-template-columns:4fr auto}.second-grid{grid-template-rows:1fr auto}.second-grid .actions-row{grid-template-columns:1fr auto}.action-buttons{justify-self:flex-end}.hidden{display:none}.filters-grid{grid-template-rows:repeat(2, 1fr)}.filters-grid .first-row{grid-template-columns:repeat(2, 1fr)}.filters-grid .second-row{grid-template-columns:repeat(2, 1fr)}";
 
 const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -96,17 +87,6 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       }
       return h("gxg-icon", { type: type, color: color });
     };
-    this.formatDate = (dateObject) => {
-      const date = dateObject.toISOString().slice(0, 10);
-      const hours = dateObject.getHours();
-      const minutes = dateObject.getMinutes();
-      const time = `${hours}:${minutes}`;
-      let period = "AM"; // Assume it's AM by default
-      if (hours >= 12) {
-        period = "PM";
-      }
-      return `${date} ${time}${period} `;
-    };
     this.pendingCommitsRowMarkingChangedHandler = async (e) => {
       // remove "rowMarkingChanged" until checkboxes have been added/removed on togglePendingCommitsCheckboxes, to prevent loops.
       this.chGridPendingCommitsEl.removeEventListener("rowMarkingChanged", this.pendingCommitsRowMarkingChangedHandler);
@@ -127,27 +107,25 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
         this.chGridPendingCommitsEl.addEventListener("rowMarkingChanged", this.pendingCommitsRowMarkingChangedHandler);
       }
     };
-    this.gridContextMenuCallbackHandler = (grid) => async (ev) => {
+    this.gridOnContextMenuCallbackHandler = (grid) => async (ev) => {
       ev.preventDefault();
       ev.stopPropagation();
-      let markedRowsIds;
-      if (grid === "commit") {
-        markedRowsIds = await this.chGridPendingCommitsEl.getMarkedRows();
-      }
-      else if (grid === "ignored") {
-        markedRowsIds = await this.chIgnoredObjectsEl.getMarkedRows();
-      }
       if (this.gridContextMenuCallback) {
-        await this.gridContextMenuCallback(markedRowsIds, grid || "ignored");
+        await this.gridContextMenuCallback(grid, ev.detail);
+      }
+    };
+    this.gridOnSelectionChangedCallbackHandler = (grid) => async (ev) => {
+      if (this.selectCallback) {
+        await this.selectCallback(grid, ev.detail.rowsId);
       }
     };
     /* pending commits grid render*/
     this.renderPendingCommitsGrid = () => {
-      return (h("gxg-grid", null, h("ch-grid", { rowSelectionMode: "multiple", ref: (el) => (this.chGridPendingCommitsEl = el), part: "ch-grid-pending-commits", class: "no-border", onContextMenu: this.gridContextMenuCallbackHandler("commit") }, h("ch-grid-columnset", null, h("ch-grid-column", { columnType: "rich", richRowSelector: true, richRowSelectorMode: "mark", settingable: false, sortable: false, size: "auto" }), h("ch-grid-column", { columnName: "State", settingable: false, sortable: false, size: "auto" }), h("ch-grid-column", { settingable: false, sortable: false, size: "auto" }), h("ch-grid-column", { sortable: true, columnName: "Name", settingable: false, size: "auto" }), h("ch-grid-column", { sortable: true, columnName: "Type", settingable: false, size: "auto" }), h("ch-grid-column", { columnName: "Description", settingable: false, size: "auto" }), h("ch-grid-column", { sortable: true, columnName: "Modified On", settingable: false }), h("ch-grid-column", { columnName: "Module", settingable: false, size: "auto" }), h("ch-grid-column", { columnName: "Local State", settingable: false, size: "auto" }), h("ch-grid-column", { columnName: "Last Synchronized", settingable: false, size: "150px" }), h("ch-grid-column", { sortable: true, columnName: "User", settingable: false, size: "auto" })), this.pendingCommits.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", { "cell-type": "rich", "row-selector": true }), h("ch-grid-cell", null, " ", this.renderIconState(obj.state), " "), h("ch-grid-cell", null, h("gxg-icon", { color: "auto", type: obj.iconType })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${this.formatDate(obj.modifiedOn)}`), h("ch-grid-cell", null, " ", obj.module, " "), h("ch-grid-cell", null, " ", obj.localState, " "), h("ch-grid-cell", null, `${this.formatDate(obj.lastSynchronized)}`), h("ch-grid-cell", null, " ", obj.user, " ")))))));
+      return (h("gxg-grid", null, h("ch-grid", { rowSelectionMode: "multiple", ref: (el) => (this.chGridPendingCommitsEl = el), part: "ch-grid-pending-commits", class: "no-border", onRowContextMenu: this.gridOnContextMenuCallbackHandler("commit"), onSelectionChanged: this.gridOnSelectionChangedCallbackHandler("commit") }, h("ch-grid-columnset", null, h("ch-grid-column", { columnType: "rich", richRowSelector: true, richRowSelectorMode: "mark", settingable: false, sortable: false, size: "auto" }), h("ch-grid-column", { columnName: "State", settingable: false, sortable: false, size: "auto" }), h("ch-grid-column", { settingable: false, sortable: false, size: "auto" }), h("ch-grid-column", { sortable: true, columnName: "Name", settingable: false, size: "auto" }), h("ch-grid-column", { sortable: true, columnName: "Type", settingable: false, size: "auto" }), h("ch-grid-column", { columnName: "Description", settingable: false, size: "auto" }), h("ch-grid-column", { sortable: true, columnName: "Modified On", settingable: false }), h("ch-grid-column", { columnName: "Module", settingable: false, size: "auto" }), h("ch-grid-column", { columnName: "Local State", settingable: false, size: "auto" }), h("ch-grid-column", { columnName: "Last Synchronized", settingable: false, size: "150px" }), h("ch-grid-column", { sortable: true, columnName: "User", settingable: false, size: "auto" })), this.pendingCommits.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", { "cell-type": "rich", "row-selector": true }), h("ch-grid-cell", null, " ", this.renderIconState(obj.state), " "), h("ch-grid-cell", null, h("gxg-icon", { color: "auto", type: obj.iconType })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${formatDate(obj.modifiedOn)}`), h("ch-grid-cell", null, " ", obj.module, " "), h("ch-grid-cell", null, " ", obj.localState, " "), h("ch-grid-cell", null, `${formatDate(obj.lastSynchronized)}`), h("ch-grid-cell", null, " ", obj.user, " ")))))));
     };
     /* ignored objects grid render*/
     this.renderIgnoredObjectsGrid = () => {
-      return (h("gxg-grid", null, h("ch-grid", { rowSelectionMode: "multiple", ref: (el) => (this.chIgnoredObjectsEl = el), part: "ch-grid-pending-commits", onContextMenu: this.gridContextMenuCallbackHandler("ignored") }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false }), h("ch-grid-column", { columnName: "TypeIcon", settingable: false }), h("ch-grid-column", { columnName: "Name", settingable: false, sortable: true }), h("ch-grid-column", { columnName: "Type", settingable: false }), h("ch-grid-column", { columnName: "Description", settingable: false }), h("ch-grid-column", { columnName: "Modified On", settingable: false }), h("ch-grid-column", { columnName: "Module", settingable: false }), h("ch-grid-column", { columnName: "Local State", settingable: false }), h("ch-grid-column", { columnName: "Last Synchronized", settingable: false }), h("ch-grid-column", { columnName: "User", settingable: false })), this.ignoredObjects.map((obj) => (h("ch-grid-row", { "row-id": obj.id, selected: true }, h("ch-grid-cell", null, " ", this.renderIconState(obj.state), " "), h("ch-grid-cell", null, h("gxg-icon", { color: "auto", type: obj.iconType })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${this.formatDate(obj.modifiedOn)}`), h("ch-grid-cell", null, " ", obj.module, " "), h("ch-grid-cell", null, " ", obj.localState, " "), h("ch-grid-cell", null, `${this.formatDate(obj.lastSynchronized)}`), h("ch-grid-cell", null, " ", obj.user, " ")))))));
+      return (h("gxg-grid", null, h("ch-grid", { rowSelectionMode: "multiple", part: "ch-grid-pending-commits", onRowContextMenu: this.gridOnContextMenuCallbackHandler("ignored"), onSelectionChanged: this.gridOnSelectionChangedCallbackHandler("ignored") }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false }), h("ch-grid-column", { columnName: "TypeIcon", settingable: false }), h("ch-grid-column", { columnName: "Name", settingable: false, sortable: true }), h("ch-grid-column", { columnName: "Type", settingable: false }), h("ch-grid-column", { columnName: "Description", settingable: false }), h("ch-grid-column", { columnName: "Modified On", settingable: false }), h("ch-grid-column", { columnName: "Module", settingable: false }), h("ch-grid-column", { columnName: "Local State", settingable: false }), h("ch-grid-column", { columnName: "Last Synchronized", settingable: false }), h("ch-grid-column", { columnName: "User", settingable: false })), this.ignoredObjects.map((obj) => (h("ch-grid-row", { "row-id": obj.id, selected: true }, h("ch-grid-cell", null, " ", this.renderIconState(obj.state), " "), h("ch-grid-cell", null, h("gxg-icon", { color: "auto", type: obj.iconType })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${formatDate(obj.modifiedOn)}`), h("ch-grid-cell", null, " ", obj.module, " "), h("ch-grid-cell", null, " ", obj.localState, " "), h("ch-grid-cell", null, `${formatDate(obj.lastSynchronized)}`), h("ch-grid-cell", null, " ", obj.user, " ")))))));
     };
     this.getRecentCommentHandler = async () => {
       if (this.getRecentCommentCallback) {
@@ -158,10 +136,11 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       }
     };
     this.commitCallbackHandler = async () => {
+      const commitComment = this.commitComment.value;
       this.chGridPendingCommitsEl
         .getMarkedRows()
         .then(async (pendingCommitsCheckedIds) => {
-        await this.commitCallback(pendingCommitsCheckedIds);
+        await this.commitCallback(pendingCommitsCheckedIds, commitComment);
         /* returns boolean*/
       });
     };
@@ -198,6 +177,7 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.getRecentCommentCallback = undefined;
     this.loadCallback = undefined;
     this.commitCallback = undefined;
+    this.selectCallback = undefined;
     this.pendingItemCheckedCallback = undefined;
     this.gridContextMenuCallback = undefined;
   }
@@ -228,7 +208,7 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", null, h("header", { class: "header grid" }, h("gxg-form-textarea", { id: "gxg-textarea", height: "100px", label: this._componentLocale.topMenu.commentLabel, value: this.comment, placeholder: this._componentLocale.topMenu.commentPlaceholder }), h("gxg-button", { type: "outlined", part: "location", onClick: this.getRecentCommentHandler }, this._componentLocale.topMenu.recentCommentsButton))), h("main", { class: "main" }, h("gxg-container", { fieldset: true, noContentPadding: !!this.filtersHidden }, h("div", { class: "grid second-grid" }, h("div", { class: "actions-row grid" }, h("gxg-form-text", { class: this.filtersHidden ? "hidden" : null, "disable-filter": true, label: this._componentLocale.filtersMenu.patternLabel, labelPosition: "start", value: "", ref: (el) => (this.patternEl = el), "display-validation-styles": true, "display-validation-message": true, part: "pattern", onInput: this.loadData }), h("div", { class: "action-buttons", slot: "tab-bar" }, h("gxg-button", { onClick: this.toggleFiltersHandler, type: "secondary-icon-only", icon: "patterns/filters", part: "gxg-button gxg-button--show-filter" }), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", onClick: this.loadData, part: "gxg-button gxg-button--reload" }))), h("div", { class: "filters-grid grid " +
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", null, h("header", { class: "header grid" }, h("gxg-form-textarea", { id: "gxg-textarea", height: "100px", label: this._componentLocale.topMenu.commentLabel, value: this.comment, ref: (el) => (this.commitComment = el), placeholder: this._componentLocale.topMenu.commentPlaceholder }), h("gxg-button", { type: "outlined", part: "location", onClick: this.getRecentCommentHandler }, this._componentLocale.topMenu.recentCommentsButton))), h("main", { class: "main" }, h("gxg-container", { fieldset: true, noContentPadding: !!this.filtersHidden }, h("div", { class: "grid second-grid" }, h("div", { class: "actions-row grid" }, h("gxg-form-text", { class: this.filtersHidden ? "hidden" : null, "disable-filter": true, label: this._componentLocale.filtersMenu.patternLabel, labelPosition: "start", value: "", ref: (el) => (this.patternEl = el), "display-validation-styles": true, "display-validation-message": true, part: "pattern", onInput: this.loadData }), h("div", { class: "action-buttons", slot: "tab-bar" }, h("gxg-button", { onClick: this.toggleFiltersHandler, type: "secondary-icon-only", icon: "patterns/filters", part: "gxg-button gxg-button--show-filter" }), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", onClick: this.loadData, part: "gxg-button gxg-button--reload" }))), h("div", { class: "filters-grid grid " +
         (this.filtersHidden ? "hidden" : null) }, h("div", { class: "first-row grid" }, h("gxg-combo-box", { labelPosition: "start", "disable-filter": true, label: this._componentLocale.filtersMenu.changesetLabel, value: this.changeSet[0]["id"], ref: (el) => (this.changeSetEl = el), part: "change-set", "display-validation-styles": true, "display-validation-message": true, onValueChanged: this.loadData }, renderComboItems(this.changeSet)), h("gxg-combo-box", { labelPosition: "start", "disable-filter": true, label: this._componentLocale.filtersMenu.typeLabel, value: this.types[0]["id"], ref: (el) => (this.typesEl = el), part: "type", onValueChanged: this.loadData }, renderComboItems(this.types))), h("div", { class: "second-row grid" }, h("gxg-combo-box", { labelPosition: "start", "disable-filter": true, label: this._componentLocale.filtersMenu.folderLabel, value: this.folders[0]["id"], ref: (el) => (this.foldersEl = el), part: "folder", "display-validation-styles": true, "display-validation-message": true, onValueChanged: this.loadData }, renderComboItems(this.folders)), h("gxg-combo-box", { labelPosition: "start", "disable-filter": true, label: this._componentLocale.filtersMenu.categoryLabel, value: this.categories[0]["id"], ref: (el) => (this.categoriesEl = el), part: "categories", onValueChanged: this.loadData }, renderComboItems(this.categories)))))), h("gxg-container", null, h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container" }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": `${this._componentLocale.tabs.pendingCommits} (${this.pendingCommits.length})`, tab: "pending-commits", "is-selected": true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": `${this._componentLocale.tabs.ignoredObjects} (${this.ignoredObjects.length})`, tab: "ignored-objects" })), h("gxg-tab", { tab: "pending-commits", "no-padding": true }, this.renderPendingCommitsGrid()), h("gxg-tab", { tab: "ignored-objects", "no-padding": true }, this.renderIgnoredObjectsGrid())), h("gxg-button", { slot: "footer", type: "primary-text-only", onClick: this.commitCallbackHandler, part: "commit-button" }, this._componentLocale.footer.commitButton))))));
   }
   static get assetsDirs() { return ["gx-ide-assets/team-dev-commit"]; }
@@ -242,6 +222,7 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "getRecentCommentCallback": [16],
     "loadCallback": [16],
     "commitCallback": [16],
+    "selectCallback": [16],
     "pendingItemCheckedCallback": [16],
     "gridContextMenuCallback": [16],
     "filtersHidden": [32],

package/dist/components/gx-ide-team-dev-select-recent-comment.js

@@ -20,15 +20,9 @@ const GxIdeTeamDevSelectRecentComment$1 = /*@__PURE__*/ proxyCustomElement(class
     this.__attachShadow();
     this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
     this.selectedComment = null;
-    /** *****************************
-     *  7.LISTENERS
-     ********************************/
-    /** *****************************
-     *  8.PUBLIC METHODS API
-     ********************************/
-    /** *****************************
-     *  9.LOCAL METHODS
-     ********************************/
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
     this.renderObjectItems = (options) => {
       if (options.length) {
         const items = [];
@@ -53,16 +47,12 @@ const GxIdeTeamDevSelectRecentComment$1 = /*@__PURE__*/ proxyCustomElement(class
     this.confirmCallback = undefined;
     this.cancelCallback = undefined;
   }
-  /** *****************************
-   *  6.COMPONENT LIFECYCLE EVENTS
-   ********************************/
+  // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
     this.componentDidLoadEvent.emit(true);
   }
-  /** *****************************
-   *  10.RENDER() FUNCTION
-   ********************************/
+  // 10.RENDER() FUNCTION //
   render() {
     return (h(Host, null, h("div", { class: `main-wrapper` }, h("gxg-container", { displayBorder: true }, h("gxg-list-box", { id: "max-height", singleSelection: true, height: "100%", required: true, "min-height": "50%", onSelectionChanged: event => {
         if (event.detail[0]) {

package/dist/components/gx-ide-team-dev-update-partial-selection.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GxIdeTeamDevUpdatePartialSelection extends Components.GxIdeTeamDevUpdatePartialSelection, HTMLElement {}
+export const GxIdeTeamDevUpdatePartialSelection: {
+  prototype: GxIdeTeamDevUpdatePartialSelection;
+  new (): GxIdeTeamDevUpdatePartialSelection;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;