@genexus/genexus-ide-ui 0.0.61 → 0.0.62

package/dist/collection/components/share-kb/share-kb.css

@@ -55,6 +55,15 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
+ch-grid-column {
+  padding-inline-start: --gxg-container--padding;
+  padding-inline-end: --gxg-container--padding;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -78,6 +87,7 @@ gxg-tabs {
   color: var(--gx-ide-component-text-color);
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
   line-height: 1.6em;
   height: 100%;
   background-color: var(--gx-ide-component-background-color);
@@ -144,6 +154,14 @@ gxg-tabs {
   padding-inline-end: 2px;
 }
 
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /*Gemini*/
 /*Gx Ide*/
 :host {
@@ -151,33 +169,39 @@ gxg-tabs {
 }
 
 .main {
+  display: grid;
+  column-gap: var(--gx-ide-grid-column-gap);
+  row-gap: var(--gx-ide-grid-row-gap);
   grid-template-columns: auto 1fr;
-  grid-template-areas: "kb-label kb-input " "server-label server-input" "auth-type-input auth-type-input" "user-name-label user-name-input" "password-label password-input";
+  grid-template-areas: "kb-label kb-input " "server-label server-input" "auth-type-label auth-type-input" "user-name-label user-name-input" "password-label password-input";
+}
+.main .kb-name-label {
+  grid-area: kb-label;
 }
 .main .kb-input {
   grid-area: kb-input;
 }
-.main .kb-name-label {
-  grid-area: kb-label;
+.main .server-url-label {
+  grid-area: server-label;
 }
 .main .server-url-input {
   grid-area: server-input;
 }
-.main .server-url-label {
-  grid-area: server-label;
+.main .auth-type-label {
+  grid-area: auth-type-label;
 }
 .main .auth-type-input {
   grid-area: auth-type-input;
 }
-.main .user-name-input {
-  grid-area: user-name-input;
-}
 .main .user-name-label {
   grid-area: user-name-label;
 }
-.main .password-input {
-  grid-area: password-input;
+.main .user-name-input {
+  grid-area: user-name-input;
 }
 .main .password-label {
   grid-area: password-label;
+}
+.main .password-input {
+  grid-area: password-input;
 }

package/dist/collection/components/share-kb/share-kb.js

@@ -10,6 +10,7 @@ import { formSubmitValidation } from "../../common/form-validation";
 import { renderFormItems } from "../../common/common";
 export class GxIdeShareKb {
   constructor() {
+    this.renderedFirstTime = false;
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     this.createKBCallbackHandler = async () => {
@@ -35,18 +36,21 @@ export class GxIdeShareKb {
     this._componentLocale = await Locale.getComponentStrings(this.el);
   }
   componentDidRender() {
-    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
   }
   // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", { footerJustify: "end" }, h("main", { class: "main grid" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.main.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, toolTip: config.tooltip, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "server-url-label", noMargin: true }, this._componentLocale.main.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, labelPosition: "start", placeholder: "https://myexampleserver.com", strict: true, toolTip: config.tooltip, "max-width": "100%", value: this.serverUrls[0], ref: (el) => (this.serverUrlEl = el), part: "server-url", class: "server-url-input" }, renderFormItems("gxg-combo-box-item", this.serverUrls.map((item) => ({
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this._componentLocale.componentName, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("main", { class: "main" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.main.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, toolTip: config.tooltip, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "server-url-label", noMargin: true }, this._componentLocale.main.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, labelPosition: "start", placeholder: "https://myexampleserver.com", strict: true, toolTip: config.tooltip, value: this.serverUrls[0], ref: (el) => (this.serverUrlEl = el), part: "server-url", class: "server-url-input" }, renderFormItems("gxg-combo-box-item", this.serverUrls.map((item) => ({
       id: item,
       label: item
-    })), "server-url")), h("gxg-combo-box", { labelPosition: "start", placeholder: "https://myexampleserver.com", "max-width": "100%", value: AUTHENTICATION_TYPE[0], ref: (el) => (this.authTypeEl = el), part: "auth-type", class: "auth-type-input" }, renderFormItems("gxg-combo-box-item", AUTHENTICATION_TYPE.map((item) => ({
+    })), "server-url")), h("gxg-label", { labelPosition: "start", class: "auth-type-label", noMargin: true }, this._componentLocale.main.authentication), h("gxg-combo-box", { labelPosition: "start", placeholder: "https://myexampleserver.com", "max-width": "100%", value: AUTHENTICATION_TYPE[0], ref: (el) => (this.authTypeEl = el), part: "auth-type", class: "auth-type-input" }, renderFormItems("gxg-combo-box-item", AUTHENTICATION_TYPE.map((item) => ({
       id: item,
       label: item
-    })), "auth-type")), h("gxg-label", { labelPosition: "start", class: "user-name-label", noMargin: true }, this._componentLocale.main.userName), h("gxg-form-text", { labelPosition: "start", placeholder: "My User", "max-width": "100%", toolTip: config.tooltip, ref: (el) => (this.userNameEl = el), part: "user-name", class: "user-name-input" }), h("gxg-label", { labelPosition: "start", class: "password-label", noMargin: true }, this._componentLocale.main.password), h("gxg-form-text", { labelPosition: "start", password: true, toolTip: config.tooltip, "max-width": "100%", ref: (el) => (this.passwordEl = el), part: "password", class: "password-input" })), h("gxg-button", { slot: "footer", type: "primary-text-only", onClick: this.createKBCallbackHandler }, this._componentLocale.footer.shareBtn)))));
+    })), "auth-type")), h("gxg-label", { labelPosition: "start", class: "user-name-label", noMargin: true }, this._componentLocale.main.userName), h("gxg-form-text", { labelPosition: "start", placeholder: "My User", "max-width": "100%", toolTip: config.tooltip, ref: (el) => (this.userNameEl = el), part: "user-name", class: "user-name-input" }), h("gxg-label", { labelPosition: "start", class: "password-label", noMargin: true }, this._componentLocale.main.password), h("gxg-form-text", { labelPosition: "start", password: true, toolTip: config.tooltip, "max-width": "100%", ref: (el) => (this.passwordEl = el), part: "password", class: "password-input" })), h("gxg-button", { slot: "footer-end", type: "primary-text-icon", icon: "gemini-tools/share", onClick: this.createKBCallbackHandler }, this._componentLocale.footer.shareBtn)))));
   }
   static get is() { return "gx-ide-share-kb"; }
   static get encapsulation() { return "shadow"; }
@@ -135,8 +139,8 @@ export class GxIdeShareKb {
   }
   static get events() {
     return [{
-        "method": "componentDidRenderEvent",
-        "name": "componentDidRenderEvent",
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/{team-dev-commit → team-dev/commit}/gx-ide-assets/team-dev-commit/langs/team-dev-commit.lang.en.json

@@ -1,6 +1,6 @@
 {
   "componentName": "Team Dev Commit",
-  "topMenu": {
+  "header": {
     "commentLabel": "Commit Comment:",
     "commentPlaceholder": "Describe the changes you are including in this commit...",
     "recentCommentsButton": "Recent Comments"

package/dist/collection/components/team-dev/commit/team-dev-commit.css

@@ -0,0 +1,264 @@
+/*Gemini*/
+/*Gx Ide*/
+/* Helper Classes */
+.gxi-hidden {
+  display: none !important;
+}
+
+.gxi-full-height {
+  height: 100%;
+}
+
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
+.align-start {
+  display: flex;
+  align-items: start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+/* Grids */
+.grid {
+  display: grid;
+  grid-row-gap: var(--gx-ide-grid-row-gap);
+  grid-column-gap: var(--gx-ide-grid-column-gap);
+  grid-template-rows: auto;
+}
+
+ch-grid-cell {
+  display: flex;
+}
+
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 99;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+ch-grid-column {
+  padding-inline-start: --gxg-container--padding;
+  padding-inline-end: --gxg-container--padding;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  box-shadow: var(--box-shadow-01) !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
+  line-height: 1.6em;
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.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;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.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;
+}
+
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/*Gemini*/
+/*Gx Ide*/
+:host {
+  display: block;
+}
+
+/*--- Header ---*/
+.header {
+  border-top: 1px solid var(--gx-ide-container-border-color);
+  display: flex;
+  flex-direction: column;
+}
+.header > * {
+  padding: var(--gxg-container--padding);
+}
+.header__first-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: -3px;
+}
+.header__first-row .commit-label {
+  flex: none;
+}
+.header__first-row .commit-textarea {
+  flex: none;
+}
+.header__first-row__right-col {
+  display: flex;
+  align-items: center;
+  gap: var(--gx-ide-grid-column-gap);
+}
+.header__second-row {
+  padding: 0 var(--gxg-container--padding) var(--gxg-container--padding) var(--gxg-container--padding);
+}
+.header .filters-outer-wrapper {
+  display: grid;
+  padding: 0;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 200ms;
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
+}
+.header .filters-outer-wrapper--hidden {
+  grid-template-rows: 0fr;
+}
+.header .filters-inner-wrapper {
+  overflow: hidden;
+}
+.header__third-row {
+  padding: 0 var(--gxg-container--padding) var(--gxg-container--padding) var(--gxg-container--padding);
+  display: grid;
+  column-gap: var(--gx-ide-grid-column-gap);
+  row-gap: var(--gx-ide-grid-row-gap);
+  grid-template-columns: auto 1fr auto 1fr;
+  grid-template-areas: "pattern-label pattern-form-text pattern-form-text pattern-form-text" "changeset-label changeset-combo type-label type-combo" "folder-label folder-combo category-label category-combo";
+}
+.header__third-row .pattern-label {
+  grid-area: pattern-label;
+}
+.header__third-row .pattern-form-text {
+  grid-area: pattern-form-text;
+}
+.header__third-row .changeset-label {
+  grid-area: changeset-label;
+}
+.header__third-row .changeset-combo {
+  grid-area: changeset-combo;
+}
+.header__third-row .type-label {
+  grid-area: type-label;
+}
+.header__third-row .type-combo {
+  grid-area: type-combo;
+}
+.header__third-row .folder-label {
+  grid-area: folder-label;
+}
+.header__third-row .folder-combo {
+  grid-area: folder-combo;
+}
+.header__third-row .category-label {
+  grid-area: category-label;
+}
+.header__third-row .category-combo {
+  grid-area: category-combo;
+}
+
+/*--- Main ---*/
+.main {
+  height: 100%;
+}
+
+.grid-container {
+  padding: 0;
+}
+
+ch-grid {
+  height: auto;
+}

package/dist/collection/components/{team-dev-commit → team-dev/commit}/team-dev-commit.js

@@ -1,13 +1,15 @@
 /* STENCIL IMPORTS */
 import { Host, h } from "@stencil/core";
 /* CUSTOM IMPORTS */
-import { Locale } from "../../common/locale";
-import { gridCommon } from "../../common/grid";
-import { renderComboItems } from "../../common/render-combo-items";
-import { formatDate } from "../../common/helpers";
+import { Locale } from "../../../common/locale";
+import { config } from "../../../common/config";
+import { gridCommon } from "../../../common/grid";
+import { renderComboItems } from "../../../common/render-combo-items";
+import { formatDate } from "../../../common/helpers";
 export class GxIdeTeamDevCommit {
   constructor() {
     this.loadDataCalledFirstTime = false; // pending commits grid checkboxes, should be checked, after loadData has loaded commits for the first time.
+    this.renderedFirstTime = false;
     // 9.LOCAL METHODS //
     this.conditionToCommit = async () => {
       const commitComment = !!this.commitCommentEl.value.length;
@@ -115,11 +117,11 @@ export class GxIdeTeamDevCommit {
     };
     /* pending commits grid render*/
     this.renderPendingCommitsGrid = () => {
-      return (h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { rowSelectionMode: "multiple", ref: (el) => (this.chGridPendingCommitsEl = el), part: "ch-grid-pending-commits", onRowContextMenu: this.objectsOnContextMenuCallbackHandler("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: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "State", settingable: false, sortable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { settingable: false, sortable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { sortable: true, columnName: "Name", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { sortable: true, columnName: "Type", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Description", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { sortable: true, columnName: "Modified On", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Module", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Local State", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Last Synchronized", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { sortable: true, columnName: "User", settingable: false, size: gridCommon.colSize.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, h("span", { class: "cell-wrapper" }, this.renderIconState(obj.state))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-icon", { color: "auto", type: obj.iconType }))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.name)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.type)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.description)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.modifiedOn)}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.module)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.localState)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.lastSynchronized)}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.user))))))));
+      return (h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true, fullHeight: true }, h("ch-grid", { rowSelectionMode: "multiple", ref: (el) => (this.chGridPendingCommitsEl = el), part: "ch-grid-pending-commits", onRowContextMenu: this.objectsOnContextMenuCallbackHandler("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: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "State", settingable: false, sortable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { settingable: false, sortable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { sortable: true, columnName: "Name", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { sortable: true, columnName: "Type", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Description", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { sortable: true, columnName: "Modified On", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Module", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Local State", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Last Synchronized", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { sortable: true, columnName: "User", settingable: false, size: gridCommon.colSize.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, h("span", { class: "cell-wrapper" }, this.renderIconState(obj.state))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-icon", { color: "auto", type: obj.iconType }))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.name)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.type)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.description)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.modifiedOn)}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.module)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.localState)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.lastSynchronized)}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.user))))))));
     };
     /* ignored objects grid render*/
     this.renderIgnoredObjectsGrid = () => {
-      return (h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { rowSelectionMode: "multiple", ref: (el) => (this.chGridIgnoredObjectsEl = el), part: "ch-grid-pending-commits", onRowContextMenu: this.objectsOnContextMenuCallbackHandler("ignored"), onSelectionChanged: this.gridOnSelectionChangedCallbackHandler("ignored") }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "TypeIcon", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Name", settingable: false, sortable: true, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Type", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Description", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Modified On", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Module", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Local State", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Last Synchronized", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "User", settingable: false, size: gridCommon.colSize.common })), this.ignoredObjects.map((obj) => (h("ch-grid-row", { rowid: obj.id, selected: true }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, this.renderIconState(obj.state))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-icon", { color: "auto", type: obj.iconType }))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.name)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.type)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.description)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.modifiedOn)}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.module)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.localState)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.lastSynchronized)}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.user))))))));
+      return (h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true, fullHeight: true }, h("ch-grid", { rowSelectionMode: "multiple", ref: (el) => (this.chGridIgnoredObjectsEl = el), part: "ch-grid-pending-commits", onRowContextMenu: this.objectsOnContextMenuCallbackHandler("ignored"), onSelectionChanged: this.gridOnSelectionChangedCallbackHandler("ignored") }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "TypeIcon", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: "Name", settingable: false, sortable: true, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Type", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Description", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Modified On", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Module", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Local State", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "Last Synchronized", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: "User", settingable: false, size: gridCommon.colSize.common })), this.ignoredObjects.map((obj) => (h("ch-grid-row", { rowid: obj.id, selected: true }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, this.renderIconState(obj.state))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-icon", { color: "auto", type: obj.iconType }))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.name)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.type)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.description)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.modifiedOn)}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.module)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.localState)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${formatDate(obj.lastSynchronized)}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, obj.user))))))));
     };
     this.getRecentCommentHandler = async () => {
       if (this.getRecentCommentCallback) {
@@ -146,6 +148,7 @@ export class GxIdeTeamDevCommit {
         category: this.categoriesEl.value,
         type: this.typesEl.value
       };
+      this.evaluateFilterConditions();
       // this.pendingCommits = null;
       // this.ignoredObjects = null;
       return await this.loadCallback(filtersData).then(async ({ pending, ignored }) => {
@@ -156,11 +159,24 @@ export class GxIdeTeamDevCommit {
     this.toggleFiltersHandler = () => {
       this.filtersHidden = !this.filtersHidden;
     };
+    this.evaluateFilterConditions = () => {
+      if (this.patternEl.value ||
+        this.changeSetEl.value ||
+        this.typesEl.value ||
+        this.foldersEl.value ||
+        this.categoriesEl.value) {
+        this.filterHasConditions = true;
+      }
+      else {
+        this.filterHasConditions = false;
+      }
+    };
     this.filtersHidden = true;
     this.comment = "";
     this.pendingCommits = [];
     this.ignoredObjects = [];
     this.commitButtonEnabled = false;
+    this.filterHasConditions = false;
     this.changeSet = undefined;
     this.types = undefined;
     this.folders = undefined;
@@ -183,7 +199,10 @@ export class GxIdeTeamDevCommit {
     this.conditionToCommit();
   }
   async componentDidRender() {
-    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
     if (this.loadDataCalledFirstTime) {
       // call this method only once
       await this.markAllPendingCommitsRows();
@@ -202,8 +221,16 @@ export class GxIdeTeamDevCommit {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-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.commitCommentEl = el), onInput: this.conditionToCommit, placeholder: this._componentLocale.topMenu.commentPlaceholder, part: "comment" }), h("gxg-button", { class: "header-button", type: "outlined", part: "location", onClick: this.getRecentCommentHandler }, this._componentLocale.topMenu.recentCommentsButton))), h("main", { class: "main gxi-full-height gx-ide-overflow" }, h("gx-ide-container", { 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", 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", 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", 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", label: this._componentLocale.filtersMenu.categoryLabel, value: this.categories[0]["id"], ref: (el) => (this.categoriesEl = el), part: "categories", onValueChanged: this.loadData }, renderComboItems(this.categories)))))), h("gx-ide-container", { noContentPadding: true, class: "gxi-overflow-auto" }, h("gxg-tabs", { class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", displayBorder: true }, 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, flex: true }, this.renderPendingCommitsGrid()), h("gxg-tab", { tab: "ignored-objects", "no-padding": true, flex: true }, this.renderIgnoredObjectsGrid())))), h("gx-ide-container", { displayBorderTop: true }, h("gxg-button", { slot: "footer-end", type: "primary-text-only", onClick: this.commitCallbackHandler, part: "commit-button", disabled: !this.commitButtonEnabled }, this._componentLocale.footer.commitButton)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noHeadingPadding: true, headingPaddingTop: true, containerTitle: this._componentLocale.componentName, slimmerFooter: config.gxIdeContainer.slimmerFooter, noHeadingBorder: true }, h("div", { class: "header", slot: "header" }, h("div", { class: "header__first-row" }, h("div", { class: "header__first-row__left-col" }, h("gxg-label", { part: "commit-label", labelPosition: "start", class: "commit-label", noMargin: true }, this._componentLocale.header.commentLabel)), h("div", { class: "header__first-row__right-col" }, h("gxg-button", { onClick: this.toggleFiltersHandler, type: "secondary-icon-only", icon: this.filterHasConditions
+        ? "window-tools/filter-conditions"
+        : "window-tools/filter", part: "gxg-button gxg-button--show-filter", class: "filter-btn" }), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", onClick: this.loadData, part: "gxg-button gxg-button--reload", class: "reset-btn" }), h("gxg-button", { class: "header-button", type: "outlined", part: "location", onClick: this.getRecentCommentHandler }, this._componentLocale.header.recentCommentsButton))), h("div", { class: "header__second-row" }, h("gxg-form-textarea", { height: "64px", value: this.comment, ref: (el) => (this.commitCommentEl = el), singleLine: true, onInput: this.conditionToCommit, placeholder: this._componentLocale.header.commentPlaceholder, part: "comment", class: "commit-textarea" })), h("div", { class: {
+        "filters-outer-wrapper": true,
+        "filters-outer-wrapper--hidden": this.filtersHidden
+      } }, h("div", { class: {
+        "filters-inner-wrapper": true
+      } }, h("div", { class: {
+        "header__third-row": true
+      } }, h("gxg-label", { part: "pattern-label", labelPosition: "start", class: "pattern-label", noMargin: true }, this._componentLocale.filtersMenu.patternLabel), h("gxg-form-text", { "disable-filter": true, value: "", ref: (el) => (this.patternEl = el), "display-validation-styles": true, "display-validation-message": true, part: "pattern-form-text", class: "pattern-form-text", onInput: this.loadData }), h("gxg-label", { part: "changeset-label", labelPosition: "start", class: "changeset-label", noMargin: true }, this._componentLocale.filtersMenu.changesetLabel), h("gxg-combo-box", { value: this.changeSet[0]["id"], ref: (el) => (this.changeSetEl = el), part: "changeset-combo", class: "changeset-combo", "display-validation-styles": true, "display-validation-message": true, onValueChanged: this.loadData }, renderComboItems(this.changeSet)), h("gxg-label", { part: "type-label", labelPosition: "start", class: "type-label", noMargin: true }, this._componentLocale.filtersMenu.typeLabel), h("gxg-combo-box", { labelPosition: "start", value: this.types[0]["id"], ref: (el) => (this.typesEl = el), part: "type-combo", class: "type-combo", onValueChanged: this.loadData }, renderComboItems(this.types)), h("gxg-label", { part: "folder-label", labelPosition: "start", class: "folder-label", noMargin: true }, this._componentLocale.filtersMenu.folderLabel), h("gxg-combo-box", { value: this.folders[0]["id"], ref: (el) => (this.foldersEl = el), part: "folder-combo", "display-validation-styles": true, "display-validation-message": true, onValueChanged: this.loadData }, renderComboItems(this.folders)), h("gxg-label", { part: "category-label", labelPosition: "start", class: "category-label", noMargin: true }, this._componentLocale.filtersMenu.categoryLabel), h("gxg-combo-box", { value: this.categories[0]["id"], ref: (el) => (this.categoriesEl = el), part: "category-combo", class: "category-combo", onValueChanged: this.loadData }, renderComboItems(this.categories)))))), h("main", { class: "main" }, h("gx-ide-container", { noContentPadding: true, class: "grid-container" }, h("div", { class: "tabs-container gxi-full-height" }, h("gxg-tabs", { class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", displayBorder: true }, 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, flex: true }, this.renderPendingCommitsGrid()), h("gxg-tab", { tab: "ignored-objects", "no-padding": true, flex: true }, this.renderIgnoredObjectsGrid()))))), h("gxg-button", { slot: "footer-end", type: "primary-text-only", onClick: this.commitCallbackHandler, part: "commit-button", disabled: !this.commitButtonEnabled }, this._componentLocale.footer.commitButton)))));
   }
   static get is() { return "gx-ide-team-dev-commit"; }
   static get encapsulation() { return "shadow"; }
@@ -229,7 +256,7 @@ export class GxIdeTeamDevCommit {
           "references": {
             "GxOption": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -249,7 +276,7 @@ export class GxIdeTeamDevCommit {
           "references": {
             "ObjectType": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -269,7 +296,7 @@ export class GxIdeTeamDevCommit {
           "references": {
             "GxOption": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -289,7 +316,7 @@ export class GxIdeTeamDevCommit {
           "references": {
             "GxOption": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -422,13 +449,14 @@ export class GxIdeTeamDevCommit {
       "comment": {},
       "pendingCommits": {},
       "ignoredObjects": {},
-      "commitButtonEnabled": {}
+      "commitButtonEnabled": {},
+      "filterHasConditions": {}
     };
   }
   static get events() {
     return [{
-        "method": "componentDidRenderEvent",
-        "name": "componentDidRenderEvent",
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/{team-dev-select-recent-comment → team-dev/select-recent-comment}/gx-ide-assets/team-dev-select-recent-comment/langs/team-dev-select-recent-comment.lang.en.json

@@ -1,4 +1,5 @@
 {
+  "componentName": "Team Dev Recent Comment",
   "confirmButton": "Confirm",
   "cancelButton": "Cancel"
 }

package/dist/collection/components/team-dev/select-recent-comment/helpers.js

@@ -0,0 +1,7 @@
+export const commentsToListItemsData = (comments) => {
+  const itemsData = [];
+  comments.forEach(comment => {
+    itemsData.push({ itemId: comment, itemValue: comment });
+  });
+  return itemsData;
+};

package/dist/collection/components/{team-dev-select-recent-comment → team-dev/select-recent-comment}/team-dev-select-recent-comment.css

@@ -55,6 +55,15 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
+ch-grid-column {
+  padding-inline-start: --gxg-container--padding;
+  padding-inline-end: --gxg-container--padding;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -78,6 +87,7 @@ gxg-tabs {
   color: var(--gx-ide-component-text-color);
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
   line-height: 1.6em;
   height: 100%;
   background-color: var(--gx-ide-component-background-color);
@@ -144,12 +154,20 @@ gxg-tabs {
   padding-inline-end: 2px;
 }
 
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /*Gemini*/
 /*Gx Ide*/
 :host {
   display: block;
 }
 
-.action-buttons {
-  grid-template-columns: repeat(2, 1fr);
+.recent-comments-list {
+  height: 100%;
 }