@genexus/genexus-ide-ui 0.0.23 → 0.0.25

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/gx-ide-team-dev-commit.js

@@ -107,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, `${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, " ")))))));
+      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, `${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, " ")))))));
+      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) {
@@ -138,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*/
       });
     };
@@ -178,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;
   }
@@ -208,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"]; }
@@ -222,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/index.js

@@ -1,5 +1,7 @@
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { ChAccordion, defineCustomElement as defineCustomElementChAccordion } from './ch-accordion.js';
+export { ChActionGroup, defineCustomElement as defineCustomElementChActionGroup } from './ch-action-group.js';
+export { ChActionGroupItem, defineCustomElement as defineCustomElementChActionGroupItem } from './ch-action-group-item.js';
 export { ChCheckbox, defineCustomElement as defineCustomElementChCheckbox } from './ch-checkbox.js';
 export { ChDragBar, defineCustomElement as defineCustomElementChDragBar } from './ch-drag-bar.js';
 export { ChDropdown, defineCustomElement as defineCustomElementChDropdown } from './ch-dropdown.js';
@@ -43,6 +45,8 @@ export { ChStyle, defineCustomElement as defineCustomElementChStyle } from './ch
 export { ChSuggest, defineCustomElement as defineCustomElementChSuggest } from './ch-suggest.js';
 export { ChSuggestList, defineCustomElement as defineCustomElementChSuggestList } from './ch-suggest-list.js';
 export { ChSuggestListItem, defineCustomElement as defineCustomElementChSuggestListItem } from './ch-suggest-list-item.js';
+export { ChTestActionGroup, defineCustomElement as defineCustomElementChTestActionGroup } from './ch-test-action-group.js';
+export { ChTestDropdown, defineCustomElement as defineCustomElementChTestDropdown } from './ch-test-dropdown.js';
 export { ChTestTreeX, defineCustomElement as defineCustomElementChTestTreeX } from './ch-test-tree-x.js';
 export { ChTextblock, defineCustomElement as defineCustomElementChTextblock } from './ch-textblock.js';
 export { ChTree, defineCustomElement as defineCustomElementChTree } from './ch-tree.js';

package/dist/esm/ch-action-group_2.entry.js

@@ -0,0 +1,206 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
+
+const actionGroupCss = "*,::after,::before{box-sizing:border-box}:host{display:grid;position:relative;width:100%;grid-template:\"more-actions actions\" 1fr/min-content 1fr;overflow:hidden}.more-actions{grid-area:more-actions}.more-actions::part(expandable-button){width:1.375em;height:1.375em}.more-actions::part(expandable-button)::before{content:\"\";width:100%;height:100%;background-color:currentColor;-webkit-mask:url('data:image/svg+xml,<svg viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.26837 10.5625C4.16837 10.5625 3.26837 11.4625 3.26837 12.5625C3.26837 13.6625 4.16837 14.5625 5.26837 14.5625C6.36837 14.5625 7.26837 13.6625 7.26837 12.5625C7.26837 11.4625 6.36837 10.5625 5.26837 10.5625ZM19.2684 10.5625C18.1684 10.5625 17.2684 11.4625 17.2684 12.5625C17.2684 13.6625 18.1684 14.5625 19.2684 14.5625C20.3684 14.5625 21.2684 13.6625 21.2684 12.5625C21.2684 11.4625 20.3684 10.5625 19.2684 10.5625ZM12.2684 10.5625C11.1684 10.5625 10.2684 11.4625 10.2684 12.5625C10.2684 13.6625 11.1684 14.5625 12.2684 14.5625C13.3684 14.5625 14.2684 13.6625 14.2684 12.5625C14.2684 11.4625 13.3684 10.5625 12.2684 10.5625Z\"/></svg>') 50% 50%/1.25em 1.25em no-repeat}.actions{grid-area:actions;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;width:100%;max-width:100%}.actions--responsive{position:absolute;inset:0}.actions--scroll{overflow-x:auto}.actions--multiline{display:flex;flex-wrap:wrap}";
+
+const FLOATING_POINT_ERROR = 1;
+const ChActionGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.displayedItemsCountChange = createEvent(this, "displayedItemsCountChange", 7);
+    this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
+    this.totalItems = -1;
+    /**
+     * The visible actions when `itemsOverflowBehavior === "ResponsiveCollapse"`.
+     */
+    this.displayedItems = -1;
+    /**
+     * This attribute lets you specify the label for the more actions button.
+     * Important for accessibility.
+     */
+    this.buttonLabel = "More actions";
+    /**
+     * This attribute determines how items behave when the content of the ActionGroup overflows horizontal. This property is needed
+     * to make the control responsive to changes in the Width of the container of ActionGroup.
+     *
+     * | Value                 | Details                                                                                          |
+     * | --------------------- | ------------------------------------------------------------------------------------------------ |
+     * | `Add Scroll`          | The items of the ActionGroup that overflow horizontally are shown by means of a scroll.          |
+     * | `Multiline`           | The ActionGroup items that overflow horizontally are shown in a second line of the control.      |
+     * | `Responsive Collapse` | The Action Group items, when they start to overflow the control, are placed in the More Actions. |
+     */
+    this.itemsOverflowBehavior = "ResponsiveCollapse";
+    /**
+     * Determine which mouse actions on the expandable button display the dropdown
+     * section.
+     */
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * @todo Check a better convention for this property, for example, "ActionsInlineAlignment"
+     * This attribute determines the position of the More Actions button in the Action Group.
+     *
+     * | Value   | Details                                                               |
+     * | --------| --------------------------------------------------------------------- |
+     * | `Start` | The More Actions Button is displayed to the left of the ActionGroup.  |
+     * | `End`   | The More Actions Button is displayed to the right of the ActionGroup. |
+     */
+    this.moreActionsButtonPosition = "Start";
+    /**
+     * Specifies the position of the dropdown section that is placed relative to
+     * the more actions button.
+     */
+    this.moreActionsDropdownPosition = "InsideStart_OutsideEnd";
+    /**
+     * Determine if the dropdowns should be opened when the action is focused.
+     */
+    this.openOnFocus = false;
+    /**
+     * Update the visibility of the actions.
+     * Only works if itemsOverflowBehavior === "ResponsiveCollapse"
+     */
+    this.updateDisplayedActions = () => {
+      const actionGroupItems = this.slotItems.assignedElements();
+      // The column-gap property must be taken into account
+      const columnGap = getComputedStyle(this.actionsContainer).columnGap;
+      const columnGapValue = columnGap != null && columnGap.endsWith("px")
+        ? Number(columnGap.replace("px", ""))
+        : 0;
+      // Since the last item does not add column-gap, we have to adjust the measurement
+      let availableWidth = this.actionsContainer.clientWidth + columnGapValue - FLOATING_POINT_ERROR;
+      let displayedItems = 0;
+      // Check which items are visible
+      actionGroupItems.forEach(action => {
+        const actionWidth = action.clientWidth;
+        availableWidth -= actionWidth + columnGapValue;
+        if (availableWidth >= 0) {
+          action.floating = false;
+          displayedItems++;
+        }
+        else {
+          action.floating = true;
+        }
+      });
+      this.totalItems = actionGroupItems.length;
+      this.displayedItems = displayedItems;
+      this.displayedItemsCountChange.emit(displayedItems);
+    };
+    this.updateDisplayedActionInFrame = () => {
+      if (!this.needForRAF) {
+        return;
+      }
+      this.needForRAF = false; // No need to call RAF up until next frame
+      requestAnimationFrame(() => {
+        this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
+        this.updateDisplayedActions();
+      });
+    };
+    this.updateActionsWatcher = () => {
+      if (this.itemsOverflowBehavior !== "ResponsiveCollapse") {
+        return;
+      }
+      // Avoid memory leaks by disconnecting and re-connecting the observer
+      this.disconnectActionsObserver();
+      this.connectActionsObserver();
+    };
+  }
+  handleOverflowBehaviorChange(newValue) {
+    if (newValue !== "ResponsiveCollapse") {
+      const actionGroupItems = this.slotItems.assignedElements();
+      // Reset floating
+      actionGroupItems.forEach(item => {
+        item.floating = false;
+      });
+    }
+    this.setResponsiveCollapse();
+  }
+  connectActionsObserver() {
+    this.actionsWatcher = new ResizeObserver(this.updateDisplayedActionInFrame);
+    // Observe the actions
+    const actionGroupItems = this.slotItems.assignedElements();
+    actionGroupItems.forEach(action => {
+      this.actionsWatcher.observe(action);
+    });
+  }
+  connectActionsContainerObserver() {
+    this.actionsContainerWatcher = new ResizeObserver(this.updateDisplayedActionInFrame);
+    this.actionsContainerWatcher.observe(this.el);
+  }
+  disconnectActionsObserver() {
+    if (this.actionsWatcher) {
+      this.actionsWatcher.disconnect();
+      this.actionsWatcher = null;
+    }
+  }
+  disconnectActionsContainerObserver() {
+    if (this.actionsContainerWatcher) {
+      this.actionsContainerWatcher.disconnect();
+      this.actionsContainerWatcher = null;
+    }
+  }
+  setResponsiveCollapse() {
+    this.disconnectActionsObserver();
+    this.disconnectActionsContainerObserver();
+    if (this.itemsOverflowBehavior !== "ResponsiveCollapse") {
+      return;
+    }
+    this.connectActionsObserver();
+    this.connectActionsContainerObserver();
+  }
+  componentDidLoad() {
+    this.setResponsiveCollapse();
+  }
+  disconnectedCallback() {
+    this.disconnectActionsObserver();
+    this.disconnectActionsContainerObserver();
+  }
+  render() {
+    // @todo TODO: Improve accessibility and keyboard navigation
+    return (h(Host, { role: "menubar", "aria-label": this.accessibleName }, this.itemsOverflowBehavior === "ResponsiveCollapse" &&
+      this.totalItems !== this.displayedItems && (h("ch-dropdown", { exportparts: "expandable-button:more-actions-button,separation:more-actions-separation,list:more-actions-list,section:more-actions-section,mask:more-actions-mask", buttonLabel: this.buttonLabel, class: "more-actions", part: "more-actions", expandBehavior: this.expandBehavior, openOnFocus: this.openOnFocus, position: this.moreActionsDropdownPosition }, h("slot", { name: "more-items", slot: "items" }))), h("div", { class: {
+        actions: true,
+        "actions--scroll": this.itemsOverflowBehavior === "AddScroll",
+        "actions--multiline": this.itemsOverflowBehavior === "Multiline",
+        "actions--responsive": this.itemsOverflowBehavior === "ResponsiveCollapse"
+      }, part: "actions", ref: el => (this.actionsContainer = el) }, h("slot", { name: "items", onSlotchange: this.updateActionsWatcher, ref: el => (this.slotItems = el) }))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "itemsOverflowBehavior": ["handleOverflowBehaviorChange"]
+  }; }
+};
+ChActionGroup.style = actionGroupCss;
+
+const actionGroupItemCss = "ch-action-group-item[floating]{position:absolute;visibility:hidden}";
+
+const ChActionGroupItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * `true` to ignore the floating property value.
+     */
+    this.avoidFloating = false;
+    /**
+     * `true` if the control is floating. Useful to implement the
+     * `"ResponsiveCollapse"` value for the `itemsOverflowBehavior` property of
+     * the ch-action-group control.
+     */
+    this.floating = false;
+  }
+  componentWillLoad() {
+    if (this.avoidFloating) {
+      return;
+    }
+    const parentAction = this.el.closest("ch-action-group");
+    // Hide items at the start to improve CLS
+    if (parentAction) {
+      this.floating =
+        parentAction.itemsOverflowBehavior === "ResponsiveCollapse";
+    }
+  }
+  render() {
+    return h("slot", null);
+  }
+  get el() { return getElement(this); }
+};
+ChActionGroupItem.style = actionGroupItemCss;
+
+export { ChActionGroup as ch_action_group, ChActionGroupItem as ch_action_group_item };