@genexus/genexus-ide-ui 0.0.60 → 0.0.62

package/dist/collection/collection-manifest.json

@@ -1,28 +1,34 @@
 {
   "entries": [
-    "./components/application-declaration/bpm-app-declaration.js",
-    "./components/container/container.js",
+    "./components/bpm-application-declaration/bpm-app-declaration.js",
+    "./components/_helpers/title/title.js",
+    "./components/_helpers/container/container.js",
     "./components/create-kb-from-server/create-kb-from-server.js",
-    "./components/directory-selector/directory-selector.js",
-    "./components/entity-selector/entity-selector.js",
+    "./components/_helpers/directory-selector/directory-selector.js",
+    "./components/_helpers/entity-selector/entity-selector.js",
+    "./components/file-selector/file-selector.js",
     "./components/kb-manager-export/kb-manager-export.js",
-    "./components/list-selector/list-selector-item/list-selector-item.js",
+    "./components/_helpers/list-selector/list-selector-item/list-selector-item.js",
+    "./components/_helpers/list-selector/list-selector.js",
+    "./components/kb-manager-import/kb-manager-import.js",
     "./components/new-environment/new-environment.js",
     "./components/new-kb/new-kb.js",
     "./components/new-object/new-object.js",
     "./components/object-selector/object-selector.js",
     "./components/references/references.js",
     "./components/share-kb/share-kb.js",
-    "./components/team-dev-commit/team-dev-commit.js",
-    "./components/team-dev-select-recent-comment/team-dev-select-recent-comment.js",
-    "./components/team-dev-update/team-dev-update.js",
-    "./components/team-dev-update-partial-selection/team-dev-update-partial-selection.js",
-    "./components/team-dev-update-to-revision/team-dev-update-to-revision.js",
+    "./components/team-dev/commit/team-dev-commit.js",
+    "./components/team-dev/select-recent-comment/team-dev-select-recent-comment.js",
+    "./components/team-dev/update/team-dev-update.js",
+    "./components/team-dev/update-partial-selection/team-dev-update-partial-selection.js",
+    "./components/team-dev/update-to-revision/team-dev-update-to-revision.js",
     "./components/ww-images/ww-images.js",
-    "./components/_template/template.js",
-    "./components/_test/test.js",
-    "./components/list-selector/list-selector.js",
-    "./components/top-bar/top-bar.js"
+    "./components/_helpers/status-buttons/gx-ide-status-buttons.js",
+    "./components/_helpers/switcher/switcher.js",
+    "./components/_helpers/switcher/switch-panel/switch-panel.js",
+    "./components/_helpers/top-bar/top-bar.js",
+    "./components/_starting-template/template.js",
+    "./components/_test/test.js"
   ],
   "compiler": {
     "name": "@stencil/core",
@@ -153,6 +159,7 @@
         "gxg-options-item",
         "gxg-paginator",
         "gxg-pill",
+        "gxg-pills",
         "gxg-progress-bar",
         "gxg-scroll",
         "gxg-select",
@@ -173,6 +180,7 @@
         "gxg-test",
         "gxg-text",
         "gxg-title",
+        "gxg-title-editable",
         "gxg-toggle",
         "gxg-toolbar",
         "gxg-toolbar-item",

package/dist/collection/common/config.js

@@ -7,7 +7,11 @@ export const config = {
       type: "text-regular",
       textAlign: "center",
       padding: "m",
-      maxWidth: "200px"
+      maxWidth: "200px",
+      minHeight: "300px"
     }
+  },
+  gxIdeContainer: {
+    slimmerFooter: true
   }
 };

package/dist/collection/common/grid.js

@@ -1,5 +1,6 @@
 export const gridCommon = {
   colSize: {
+    minContent: "min-content",
     auto: "auto",
     common: "minmax(100px, 1fr)",
     commonDouble: "minmax(100px, 2fr)"

package/dist/collection/common/helpers.js

@@ -79,3 +79,14 @@ export const formatDate = (date, type = "date-time") => {
 export const resolveGxgIconPath = (gxgIconName) => {
   return gxgIconName;
 };
+/* Count the total tree nodes (by default it does not count the first level nodes)*/
+export const countTreeItems = (treeModel, children = false) => {
+  let totalNodes = 0;
+  treeModel.forEach(node => {
+    children && totalNodes++;
+    if (node.items) {
+      totalNodes += countTreeItems(node.items, true);
+    }
+  });
+  return totalNodes;
+};

package/dist/collection/common/render-list-item.js

@@ -0,0 +1,12 @@
+/* STENCIL IMPORTS */
+import { h } from "@stencil/core";
+export const renderListItems = (itemsData) => {
+  const listItemsArray = [];
+  itemsData.forEach(item => {
+    const id = item.itemId;
+    const value = item.itemValue;
+    const icon = item.itemIcon;
+    listItemsArray.push(h("gx-ide-list-selector-item", { itemId: id, itemValue: value, icon: icon }));
+  });
+  return listItemsArray;
+};

package/dist/collection/components/{container → _helpers/container}/container.css

@@ -342,29 +342,21 @@ HOST / GENERAL
 :host {
   --gxg-container-elements-spacing: var(--spacing-comp-03);
   display: block;
-}
-:host .content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gx-ide-form-items-gap);
-}
-
-/*full-height*/
-:host([full-height]) {
   height: 100%;
+  box-sizing: border-box;
 }
-:host([full-height]) .container {
+
+.container {
+  display: grid;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-:host([full-height]) .content {
-  flex-grow: 1;
+  grid-template-rows: auto 1fr auto;
+  box-sizing: border-box;
 }
 
 .heading,
 .content,
-.footer {
+.footer,
+.footer-above {
   padding: var(--gxg-container--padding);
 }
 
@@ -402,6 +394,10 @@ HOST / GENERAL
   border-inline-start: 1px solid var(--gx-ide-container-border-color);
 }
 
+.container--overflow-hidden-y {
+  overflow-y: hidden;
+}
+
 /*******************************
 HEADING
 ********************************/
@@ -419,13 +415,26 @@ HEADING
 .heading--no-padding {
   padding: 0;
 }
+.heading--inactive {
+  color: var(--gxg-color--disabled);
+}
+.heading--padding-top {
+  padding: var(--gxg-container--padding) 0 0 0;
+}
+.heading--slimmer {
+  padding-top: var(--spacing-comp-02);
+  padding-bottom: var(--spacing-comp-02);
+}
 
 /*******************************
 CONTENT
 ********************************/
 .content {
-  display: block;
   overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gx-ide-form-items-gap);
+  box-sizing: border-box;
   /* Track */
   /* Handle */
   /* Handle on hover */
@@ -475,10 +484,34 @@ CONTENT
 .content--justify-content-end {
   justify-content: end;
 }
+.content--border-end {
+  border-inline-end: 1px solid var(--gx-ide-container-border-color);
+}
+
+/*only content*/
+.container--only-content {
+  grid-template-rows: 1fr;
+}
 
 /*******************************
 FOOTER
 ********************************/
+/*ABOVE*/
+.footer-above {
+  border-top: 1px solid var(--gx-ide-container-border-color);
+}
+.footer-above--no-border-top {
+  border-top: 0;
+}
+.footer-above--slimmer {
+  padding-top: var(--spacing-comp-02);
+  padding-bottom: var(--spacing-comp-02);
+}
+.footer-above--no-padding {
+  padding: 0;
+}
+
+/*START and END*/
 .footer {
   display: flex;
   gap: var(--gxg-container-elements-spacing);
@@ -496,4 +529,11 @@ FOOTER
 }
 .footer--no-padding {
   padding: 0;
+}
+.footer--slimmer {
+  padding-top: var(--spacing-comp-02);
+  padding-bottom: var(--spacing-comp-02);
+}
+.footer--subtle-shadow {
+  box-shadow: rgba(var(--color-shadow--rgb), 0.1) 0px 4px 16px, rgba(var(--color-shadow--rgb), 0.05) 0px 8px 32px;
 }

package/dist/collection/components/{container → _helpers/container}/container.js

@@ -4,9 +4,12 @@ export class GxIdeContainer {
     this.headingClasses = () => {
       return {
         "heading": true,
+        "heading--inactive": this.inactiveTitle,
+        "heading--slimmer": this.titleType === "secondary",
         "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
         [`heading--justify-${this.headingJustify}`]: true,
-        ["heading--no-padding"]: this.noHeadingPadding
+        "heading--no-padding": this.noHeadingPadding && !this.headingPaddingTop,
+        "heading--padding-top": this.headingPaddingTop
       };
     };
     this.contentClasses = () => {
@@ -16,30 +19,45 @@ export class GxIdeContainer {
         "content--no-padding": this.noContentPadding,
         "content--no-gap": this.noContentGap,
         "content--no-border-top": this.noContentBorderTop,
+        "content--border-end": this.contentBorderEnd,
         [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
         [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
       };
     };
+    this.aboveFooter = () => {
+      return this.hasAboveFooterSlot ? (h("footer", { class: {
+          "footer-above": true,
+          "footer-above--no-border-top": this.noBorderAboveFooter,
+          "footer-above--no-padding": this.noAboveFooterPadding,
+          "footer-above--slimmer": this.slimmerFooter
+        } }, h("slot", { name: "footer-above" }))) : null;
+    };
     this.footer = () => {
       return this.hasFooterSlot ? (h("footer", { class: {
           "footer": true,
-          "footer--no-border": this.hasOnlyFooter || !this.hasSlottedContent,
+          "footer--no-border": this.hasOnlyFooter ||
+            !this.hasSlottedContent ||
+            this.noBorderFooter,
           [`footer--justify-${this.footerJustify}`]: true,
           [`footer--justify-${this.footerJustify}`]: true,
-          ["footer--no-padding"]: this.noFooterPadding
+          "footer--no-padding": this.noFooterPadding,
+          "footer--slimmer": this.slimmerFooter,
+          "footer--subtle-shadow": this.footerSubtleShadow
         } }, h("div", { class: "footer__start" }, h("slot", { name: "footer-start" })), h("div", { class: "footer__end" }, h("slot", { name: "footer-end" })))) : null;
     };
+    this.inactiveTitle = false;
     this.containerTitle = undefined;
+    this.titleType = "primary";
     this.displayBorder = false;
     this.displayBorderTop = false;
     this.displayBorderEnd = false;
     this.displayBorderBottom = false;
     this.displayBorderStart = false;
     this.sectionsPadding = "m";
-    this.fullHeight = false;
     this.titleAlignment = "center";
     this.noHeadingBorder = false;
     this.noHeadingPadding = false;
+    this.headingPaddingTop = false;
     this.headingJustify = "center";
     this.flexContent = false;
     this.noContentBorderTop = false;
@@ -47,13 +65,21 @@ export class GxIdeContainer {
     this.noContentGap = false;
     this.alignItems = undefined;
     this.justifyContent = undefined;
+    this.contentBorderEnd = false;
+    this.slimmerAboveFooter = false;
+    this.noAboveFooterPadding = false;
+    this.noBorderAboveFooter = false;
+    this.slimmerFooter = false;
     this.noFooterPadding = false;
     this.footerJustify = "end";
     this.noBorderFooter = false;
+    this.footerSubtleShadow = false;
     this.hasHeaderSlot = false;
     this.hasSlottedContent = false;
     this.hasFooterSlot = false;
+    this.hasAboveFooterSlot = false;
     this.hasOnlyHeading = false;
+    this.hasOnlyContent = false;
     this.hasOnlyFooter = false;
   }
   // 4.PUBLIC PROPERTY API /
@@ -77,17 +103,34 @@ export class GxIdeContainer {
       this.hasSlottedContent = true;
     }
     // footer
+    const footerAboveSlot = this.el.querySelectorAll(':scope >  [slot="footer-above"]');
     const footerStartSlot = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
     const footerEndSlot = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
     if (footerStartSlot.length || footerEndSlot.length) {
       this.hasFooterSlot = true;
     }
+    if (footerAboveSlot.length) {
+      this.hasAboveFooterSlot = true;
+    }
   }
   evaluateSections() {
-    if (!this.hasSlottedContent && !this.hasFooterSlot) {
+    // has only heading
+    if (!this.hasSlottedContent &&
+      !this.hasFooterSlot &&
+      !this.hasAboveFooterSlot) {
       this.hasOnlyHeading = true;
     }
-    if (!this.hasSlottedContent && !this.containerTitle) {
+    // has only content
+    if (this.hasSlottedContent &&
+      !this.containerTitle &&
+      !this.hasAboveFooterSlot &&
+      !this.hasFooterSlot) {
+      this.hasOnlyContent = true;
+    }
+    // has only footer
+    if (!this.hasSlottedContent &&
+      !this.containerTitle &&
+      !this.hasAboveFooterSlot) {
       this.hasOnlyFooter = true;
     }
   }
@@ -95,8 +138,9 @@ export class GxIdeContainer {
   render() {
     this.evaluateSections();
     const result = [
-      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
+      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gx-ide-title", { type: this.titleType, alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
       this.hasSlottedContent ? (h("div", { class: this.contentClasses(), part: "content" }, h("slot", null))) : null,
+      this.aboveFooter(),
       this.footer()
     ];
     return (h(Host, null, h("div", { class: {
@@ -106,7 +150,9 @@ export class GxIdeContainer {
         "container--display-border-top": this.displayBorderTop,
         "container--display-border-end": this.displayBorderEnd,
         "container--display-border-bottom": this.displayBorderBottom,
-        "container--display-border-start": this.displayBorderStart
+        "container--display-border-start": this.displayBorderStart,
+        "container--overflow-hidden-y": this.footerSubtleShadow,
+        "container--only-content": this.hasOnlyContent
       } }, result)));
   }
   static get is() { return "gx-ide-container"; }
@@ -123,6 +169,24 @@ export class GxIdeContainer {
   }
   static get properties() {
     return {
+      "inactiveTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "By setting the title to inactive, the color will be gray instead of black."
+        },
+        "attribute": "inactive-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "containerTitle": {
         "type": "string",
         "mutable": false,
@@ -140,6 +204,29 @@ export class GxIdeContainer {
         "attribute": "container-title",
         "reflect": false
       },
+      "titleType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TitleType",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "TitleType": {
+              "location": "import",
+              "path": "../title/title"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title of the container"
+        },
+        "attribute": "title-type",
+        "reflect": false,
+        "defaultValue": "\"primary\""
+      },
       "displayBorder": {
         "type": "boolean",
         "mutable": false,
@@ -252,24 +339,6 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "\"m\""
       },
-      "fullHeight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the container full height (content will grow only)"
-        },
-        "attribute": "full-height",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "titleAlignment": {
         "type": "string",
         "mutable": false,
@@ -329,6 +398,24 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "false"
       },
+      "headingPaddingTop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds padding to the top of the heading"
+        },
+        "attribute": "heading-padding-top",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "headingJustify": {
         "type": "string",
         "mutable": false,
@@ -467,6 +554,96 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "undefined"
       },
+      "contentBorderEnd": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display border end on the content"
+        },
+        "attribute": "content-border-end",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "slimmerAboveFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the above footer vertical padding slimmer"
+        },
+        "attribute": "slimmer-above-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noAboveFooterPadding": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the above padding from the footer"
+        },
+        "attribute": "no-above-footer-padding",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noBorderAboveFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the above border top"
+        },
+        "attribute": "no-border-above-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "slimmerFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the footer vertical padding slimmer"
+        },
+        "attribute": "slimmer-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "noFooterPadding": {
         "type": "boolean",
         "mutable": false,
@@ -524,6 +701,24 @@ export class GxIdeContainer {
         "attribute": "no-border-footer",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "footerSubtleShadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds a subtle shadow to the footer"
+        },
+        "attribute": "footer-subtle-shadow",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -532,7 +727,9 @@ export class GxIdeContainer {
       "hasHeaderSlot": {},
       "hasSlottedContent": {},
       "hasFooterSlot": {},
+      "hasAboveFooterSlot": {},
       "hasOnlyHeading": {},
+      "hasOnlyContent": {},
       "hasOnlyFooter": {}
     };
   }

package/dist/collection/components/{entity-selector → _helpers/entity-selector}/entity-selector.js

@@ -113,7 +113,7 @@ export class GxIdeEntitySelector {
           "references": {
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -168,7 +168,7 @@ export class GxIdeEntitySelector {
         "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "false",
+          "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },
@@ -211,7 +211,7 @@ export class GxIdeEntitySelector {
             },
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -231,7 +231,7 @@ export class GxIdeEntitySelector {
           "references": {
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -269,7 +269,7 @@ export class GxIdeEntitySelector {
           "references": {
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         }