@genexus/genexus-ide-ui 0.0.60 → 0.0.62

package/dist/collection/components/{team-dev-update-partial-selection → team-dev/update-partial-selection}/team-dev-update-partial-selection.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,35 +154,24 @@ 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;
-  border: 1px solid var(--gxg-border-color--regular);
-  background-color: var(--color-background);
-}
-
-:host(.gxi-object-selector--shadow) {
-  border: none;
-  box-shadow: var(--box-shadow-01);
 }
 
 .top-actions {
   display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--gx-ide-grid-row-gap);
-}
-
-/* Objects Table */
-.actions {
-  grid-template-columns: repeat(2, 1fr);
-}
-.actions > * {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gx-ide-grid-row-gap);
-}
-.actions > *:nth-child(2) {
-  justify-content: flex-end;
+  gap: var(--gx-ide-grid-column-gap);
+  padding: var(--spacing-comp-02) var(--gxg-container--padding);
+  flex-direction: row-reverse;
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
 }

package/dist/collection/components/{team-dev-update-partial-selection → team-dev/update-partial-selection}/team-dev-update-partial-selection.js

@@ -2,12 +2,15 @@
 import { Host, h } from "@stencil/core";
 /* OTHER LIBRARIES IMPORTS */
 /* CUSTOM IMPORTS */
-import { Locale } from "../../common/locale";
+import { Locale } from "../../../common/locale";
+import { config } from "../../../common/config";
+import { gridCommon } from "../../../common/grid";
 export class GxIdeTeamDevUpdatePartialSelection {
   constructor() {
+    this.renderedFirstTime = false;
     // 9.LOCAL METHODS //
     this.renderObjects = () => {
-      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-objects" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false, sortable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedOn, settingable: false })), this.selection.map((obj) => (h("ch-grid-row", { rowid: obj.id, key: obj.id }, h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon, color: "auto" })), 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, `${obj.modifiedOn.toISOString().slice(0, 10)}`)))))));
+      return (h("gxg-grid", { "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-objects" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false, sortable: false, size: gridCommon.colSize.minContent }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedOn, settingable: false, size: gridCommon.colSize.auto })), this.selection.map((obj) => (h("ch-grid-row", { rowid: obj.id, key: obj.id }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-icon", { type: obj.typeIcon, color: "auto" }))), 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" }, `${obj.modifiedOn.toISOString().slice(0, 10)}`))))))));
     };
     this.getObjectsHandler = () => {
       this.addCallback().then((items) => {
@@ -56,6 +59,12 @@ export class GxIdeTeamDevUpdatePartialSelection {
   componentDidLoad() {
     this.listenChanges();
   }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
   /**
@@ -67,9 +76,7 @@ export class GxIdeTeamDevUpdatePartialSelection {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: {
-        "gxi-team-dev-update-partial-selection": true
-      } }, h("div", { class: `main-wrapper` }, h("gxg-container", { containerTitle: this._componentLocale.title }, h("div", { class: "top-actions" }, h("gxg-button", { id: "button-add", type: "outlined", onClick: this.getObjectsHandler, part: "add" }, this._componentLocale.btnAddObject), h("gxg-button", { id: "button-remove", type: "outlined", onClick: this.removeSelectedObjectsHandler, part: "remove", disabled: !(this.selectedObjectsIds.length > 0) }, this._componentLocale.btnRemoveSelectedObjects)), this.renderObjects(), h("gxg-container", { displayBorderTop: true }, h("div", { class: "grid actions" }, h("div", null, h("gxg-button", { id: "button-clear", type: "outlined", onClick: this.removeAllHandler, disabled: !(this.selection.length > 0), part: "clear" }, this._componentLocale.footer.btnRemoveAll)), h("div", null, h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirmHandler, part: "confirm" }, this._componentLocale.footer.btnConfirm), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelHandler, part: "cancel" }, this._componentLocale.footer.btnCancel))))))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, containerTitle: this._componentLocale.title, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "top-actions" }, h("gxg-button", { id: "button-add", type: "outlined", icon: "gemini-tools/add", onClick: this.getObjectsHandler, part: "add" }, this._componentLocale.btnAddObject), h("gxg-button", { id: "button-remove", type: "secondary-text-only", onClick: this.removeSelectedObjectsHandler, part: "remove", disabled: !(this.selectedObjectsIds.length > 0) }, this._componentLocale.btnRemoveSelectedObjects)), this.renderObjects(), h("gxg-text", { id: "button-clear", type: "button-like", onClick: this.removeAllHandler, disabled: !(this.selection.length > 0), part: "clear", slot: "footer-start" }, this._componentLocale.footer.btnRemoveAll), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelHandler, part: "cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirmHandler, part: "confirm", slot: "footer-end" }, this._componentLocale.footer.btnConfirm)))));
   }
   static get is() { return "gx-ide-team-dev-update-partial-selection"; }
   static get encapsulation() { return "shadow"; }
@@ -186,6 +193,24 @@ export class GxIdeTeamDevUpdatePartialSelection {
           "resolved": "boolean",
           "references": {}
         }
+      }, {
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "description",
+              "text": "Gets fired when the component has rendered for the first time."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }];
   }
   static get methods() {

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

@@ -1,5 +1,5 @@
 {
-  "name": "Name",
+  "componentName": "Team Dev Update To Revision",
   "options": {
     "updateToLatest": "Update to Latest Revision",
     "updateToRevision": "Update to Revision #"

package/dist/collection/components/{team-dev-update-to-revision → team-dev/update-to-revision}/team-dev-update-to-revision.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,17 +154,18 @@ 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;
-  border: 1px solid var(--gxg-border-color--regular);
-  background-color: var(--color-background);
-}
-
-:host(.gxi-object-selector--shadow) {
-  border: none;
-  box-shadow: var(--box-shadow-01);
 }
 
 .revision-number {

package/dist/collection/components/{team-dev-update-to-revision → team-dev/update-to-revision}/team-dev-update-to-revision.js

@@ -2,9 +2,11 @@
 import { Host, h } from "@stencil/core";
 /* OTHER LIBRARIES IMPORTS */
 /* CUSTOM IMPORTS */
-import { Locale } from "../../common/locale";
+import { Locale } from "../../../common/locale";
+import { config } from "../../../common/config";
 export class GxIdeTeamDevUpdateToRevision {
   constructor() {
+    this.renderedFirstTime = false;
     // 9.LOCAL METHODS //
     this.setInitialCheckedRadio = () => {
       if (this.currentRevision === undefined) {
@@ -39,6 +41,12 @@ export class GxIdeTeamDevUpdateToRevision {
     this.componentDidLoadEvent.emit(true);
     this.setInitialCheckedRadio();
   }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
   /**
@@ -50,9 +58,7 @@ export class GxIdeTeamDevUpdateToRevision {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: {
-        "gxi-team-dev-update-to-revision": true
-      } }, h("div", { class: `main-wrapper` }, h("gxg-container", null, h("gxg-form-radio-group", null, h("gxg-form-radio", { label: this._componentLocale.options.updateToLatest, value: "updateToLatest", ref: (el) => (this.updateToLatestEl = el), part: "radio-to-latest" }), h("div", { class: "revision-number" }, h("gxg-form-radio", { label: this._componentLocale.options.updateToRevision, value: "updateToRevision", ref: (el) => (this.updateToRevisionEl = el), part: "radio-to-revision" }), h("gxg-form-text", { ref: (el) => (this.revisionNumberEl = el), onFocus: this.updateToRevisionOnFocusHandler, value: this.currentRevision, part: "revision-number" })))), h("gxg-container", { displayBorderTop: true }, h("div", { class: "actions" }, h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "update" }, this._componentLocale.footer.btnUpdate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "cancel" }, this._componentLocale.footer.btnCancel))))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this._componentLocale.componentName }, h("gxg-form-radio-group", null, h("gxg-form-radio", { label: this._componentLocale.options.updateToLatest, value: "updateToLatest", ref: (el) => (this.updateToLatestEl = el), part: "radio-to-latest" }), h("div", { class: "revision-number" }, h("gxg-form-radio", { label: this._componentLocale.options.updateToRevision, value: "updateToRevision", ref: (el) => (this.updateToRevisionEl = el), part: "radio-to-revision" }), h("gxg-form-text", { ref: (el) => (this.revisionNumberEl = el), onFocus: this.updateToRevisionOnFocusHandler, value: this.currentRevision, part: "revision-number" }))), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "update", slot: "footer-end" }, this._componentLocale.footer.btnUpdate)))));
   }
   static get is() { return "gx-ide-team-dev-update-to-revision"; }
   static get encapsulation() { return "shadow"; }
@@ -142,6 +148,24 @@ export class GxIdeTeamDevUpdateToRevision {
           "resolved": "boolean",
           "references": {}
         }
+      }, {
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "description",
+              "text": "Gets fired when the component has rendered for the first time."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/ww-images/gx-ide-assets/ww-images/langs/ww-images.lang.en.json

@@ -1,5 +1,5 @@
 {
-  "name": "Name",
+  "componentName": "Work With Images",
   "location": "Location",
   "filter": {
     "title": "Filters",
@@ -12,6 +12,7 @@
     "modified": "Modified",
     "user": "User",
     "dateTime": "Date/time",
+    "afterLabel": "After",
     "afterNone": "None",
     "afterDateTime": "After Date/Time",
     "afterLastBuild": "After Last Build",
@@ -43,5 +44,6 @@
     "btnOk": "OK",
     "btnCancel": "Cancel"
   },
-  "imageDataTitle": "Tiles"
+  "imagesTitle": "Tiles",
+  "imagesDataTitle": "Tiles Information"
 }

package/dist/collection/components/ww-images/ww-images.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,66 +154,100 @@ 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;
-  border: 1px solid var(--gxg-border-color--regular);
-  background-color: var(--color-background);
 }
 
-:host(.gxi-object-selector--shadow) {
-  border: none;
-  box-shadow: var(--box-shadow-01);
+.filter--padding {
+  padding: var(--gxg-container--padding);
+}
+
+.filter--gap {
+  gap: var(--gx-ide-grid-row-gap);
 }
 
-/* Filters */
-.filter-grid {
-  grid-template-columns: repeat(4, 1fr);
+.filter {
+  display: flex;
+  flex-direction: column;
+}
+.filter > * {
+  display: flex;
+  gap: var(--gx-ide-grid-column-gap);
+}
+.filter > * > * {
+  flex: 1;
+}
+.filter__first-row .name,
+.filter__first-row .module-folder {
+  flex: 1;
+}
+.filter__first-row .filter-btn {
+  flex: none;
 }
-.filter-grid > :nth-child(3),
-.filter-grid > :nth-child(6) {
+.filter__first-row .second-column {
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: end;
+  gap: var(--gx-ide-grid-column-gap);
 }
-.filter-grid > :nth-child(4) {
-  grid-area: 2/1/3/4;
+.filter__second-row {
+  padding-top: var(--gx-ide-grid-row-gap);
 }
-.filter-grid > :nth-child(5) {
-  grid-area: 3/1/4/2;
+.filter__third-row {
+  display: flex;
+  align-items: end;
+  gap: var(--gx-ide-grid-column-gap);
 }
-.filter-grid > :nth-child(6) {
-  grid-area: 3/4/4/5;
+.filter__third-row .checkboxes-wrapper {
+  display: flex;
+  gap: var(--gx-ide-grid-column-gap);
 }
-.filter-grid > :nth-child(7) {
-  grid-area: 4/1/5/4;
+.filter__third-row .all-descendants,
+.filter__third-row .modified {
+  padding-bottom: 3px;
 }
-.filter-grid > :nth-child(8) {
-  grid-area: 5/1/6/2;
+.filter__third-row .user {
+  max-width: 100% !important;
 }
-.filter-grid > :nth-child(9) {
-  grid-area: 5/2/6/3;
+.filter__third-row > * {
+  flex: 1;
 }
-.filter-grid > :nth-child(10) {
-  grid-area: 5/3/6/4;
+.filter .filters-outer-wrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 200ms;
 }
-.filter-grid > :nth-child(11) {
-  grid-area: 5/4/6/5;
+.filter .filters-outer-wrapper--hidden {
+  grid-template-rows: 0fr;
 }
-
-.flex {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.filter .filters-inner-wrapper {
+  overflow: hidden;
 }
 
-.with-gap {
-  gap: var(--gx-ide-grid-row-gap);
+.master-wrapper {
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr;
 }
 
-.hide {
-  display: none !important;
+/*--- Grid/Images Container ---*/
+.grid-images-container {
+  border-top: 1px solid var(--gx-ide-container-border-color);
+  display: grid;
+  grid-template-columns: 1fr 220px;
+  grid-column-gap: 0;
+  grid-row-gap: 0;
+  flex-grow: 1;
 }
 
 /* Objects Table */
@@ -215,33 +259,31 @@ gxg-tabs {
   grid-area: 1/1/1/3;
 }
 
-.images-data-flex {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--gx-ide-grid-row-gap);
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.images-data-flex .image-item {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  width: 120px;
+.images-container .image-item {
+  display: inline-block;
+  width: 50%;
+  height: 110px;
+  /*should be half the images container width (actually is 220px)*/
+}
+.images-container .image-item__container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
-.images-data-flex .image-item .img {
-  width: 50px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--gxg-border-color--regular);
-  padding: var(--gx-ide-grid-row-gap);
+.images-container .image-item__name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  width: 100%;
+  display: block;
+  font-size: 10px;
+  padding: 4px 8px;
+  box-sizing: border-box;
+  background-color: var(--gray-00);
 }
-.images-data-flex .image-item .img img {
-  max-width: 100%;
-  max-height: 100%;
+.images-container .image-item:nth-child(odd) .image-item__name {
+  border-inline-end: 1px solid var(--gray-02);
 }
 
 .objects-count {