@genexus/genexus-ide-ui 0.0.61 → 0.0.63

package/dist/collection/components/_helpers/switcher/switcher.js

@@ -0,0 +1,18 @@
+import { Host, h } from "@stencil/core";
+export class GxIdeSwitcher {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "gx-ide-switcher"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["switcher.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["switcher.css"]
+    };
+  }
+}

package/dist/collection/components/_helpers/title/title.css

@@ -0,0 +1,42 @@
+:host {
+  --gx-ide-title-padding: var(--gx-ide-container--padding, --spacing-comp-03);
+  display: flex;
+  flex-direction: column;
+  color: var(--gx-ide-component-text-color);
+  font-family: var(--font-family-primary);
+  line-height: 1.6em;
+  background-color: transparent;
+  padding: 0;
+}
+
+/*alignment*/
+:host(.alignment--start) {
+  align-items: start;
+}
+
+:host(.alignment--center) {
+  align-items: center;
+}
+
+/*padding*/
+:host(.alignment--start) {
+  text-align: start;
+}
+
+:host([padding]) {
+  padding: var(--gx-ide-title-padding);
+}
+
+:host([no-padding-bottom]) {
+  padding-bottom: 0;
+}
+
+/*border*/
+:host([border]) {
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
+}
+
+/*type*/
+:host(.title-type--secondary) {
+  color: var(--gray-06);
+}

package/dist/collection/components/_helpers/title/title.js

@@ -0,0 +1,156 @@
+import { Host, h } from "@stencil/core";
+export class GxIdeTitle {
+  constructor() {
+    this.titleCaption = undefined;
+    this.type = "primary";
+    this.alignment = "start";
+    this.padding = false;
+    this.noPaddingBottom = false;
+    this.border = false;
+  }
+  componentWillLoad() {
+    if (this.type === "primary") {
+      this.geminiType = "title-04";
+    }
+    else if (this.type === "secondary") {
+      this.geminiType = "title-05";
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        [`alignment--${this.alignment}`]: true,
+        [`title-type--${this.type}`]: true
+      } }, h("gxg-title", { type: this.geminiType }, h("slot", null))));
+  }
+  static get is() { return "gx-ide-title"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["title.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["title.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "titleCaption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title caption (the title)"
+        },
+        "attribute": "title-caption",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TitleType",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "TitleType": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title caption (the title)"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"primary\""
+      },
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TitleAlignment",
+          "resolved": "\"center\" | \"start\"",
+          "references": {
+            "TitleAlignment": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title alignment"
+        },
+        "attribute": "alignment",
+        "reflect": false,
+        "defaultValue": "\"start\""
+      },
+      "padding": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the padding"
+        },
+        "attribute": "padding",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noPaddingBottom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the padding on the bottom"
+        },
+        "attribute": "no-padding-bottom",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "border": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays a border on the bottom"
+        },
+        "attribute": "border",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/{application-declaration/bpm-app-declaration.css → _starting-template/template.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,19 +154,16 @@ 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;
-}
-:host .header {
-  display: flex;
-  gap: var(--gx-ide-grid-row-gap);
-}
-:host .header .application-suggest {
-  flex: 1;
-}
-:host .row-button {
-  display: flex;
-  align-items: center;
 }

package/dist/collection/components/{_template → _starting-template}/template.js

@@ -2,9 +2,11 @@
 import { Host, h } from "@stencil/core";
 /* OTHER LIBRARIES IMPORTS */
 /* CUSTOM IMPORTS */
+import { config } from "../../common/config";
 import { Locale } from "../../common/locale";
 export class GxIdeTemplate {
   constructor() {
+    this.renderedFirstTime = false;
     this.mainTile = undefined;
   }
   // 6.COMPONENT LIFECYCLE METHODS //
@@ -12,14 +14,17 @@ export class GxIdeTemplate {
     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;
+    }
   }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
   // 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("gx-ide-container", { "container-title": "Header Title" }, h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer" }, "Create")))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { "container-title": "Header Title", slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer" }, "Create")))));
   }
   static get is() { return "gx-ide-template"; }
   static get encapsulation() { return "shadow"; }
@@ -57,8 +62,8 @@ export class GxIdeTemplate {
   }
   static get events() {
     return [{
-        "method": "componentDidRenderEvent",
-        "name": "componentDidRenderEvent",
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/_test/test.css

@@ -1,3 +1,8 @@
 :host {
   display: block;
+}
+
+.tree-container {
+  display: flex;
+  height: 200px;
 }

package/dist/collection/components/_test/test.js

@@ -1,93 +1,131 @@
 /* STENCIL IMPORTS */
-import { Host, h } from "@stencil/core";
-import { renderTreeItems } from "../../common/render-tree";
-import { updateTreeModel } from "../../common/update-tree-model";
+import { 
+// Host,
+h } from "@stencil/core";
 /* CUSTOM IMPORTS */
 export class GxIdeTest {
   constructor() {
+    /* THIS IS A COMPONENT FOR TESTING PURPOSES. DO WHATEVER YOU WANT.*/
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE METHODS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES //
+    this.renderedFirstTime = false;
+    // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
-    /* Gxg-Tree Methods*/
-    this.closeTreeNodeHandler = () => {
-      this.tree.toggleItems(["number-1-1-2"], false);
+    this.checkAllHandler = () => {
+      this.treeViewEl.updateAllItemsProperties({ checked: true });
     };
-    this.openTreeNodeHandler = () => {
-      this.tree.toggleItems(["number-1-1-2"], true);
-    };
-    this.toggleTreeNodeHandler = () => {
-      this.tree.toggleItems(["number-1-1-2"]);
-    };
-    this.getSelectedItemsHandler = () => {
-      (async () => {
-        const selected = await this.tree.getSelectedItems();
-        console.log(selected);
-      })();
-    };
-    this.getCheckedItemsHandler = () => {
-      (async () => {
-        const checked = await this.tree.getCheckedItems();
-        console.log(checked);
-      })();
-    };
-    this.deleteNodeHandler = () => {
-      this.treeModel = [];
-    };
-    /* Update model test*/
-    // private showTree = () => {
-    //   this.treeModel = [];
-    // };
-    // private updateTree = () => {
-    //   this.treeModel = [];
-    // };
-    this.treeItemStateChangedHandler = (e) => {
-      // const event = e.detail.emittedBy;
-      const nodeData = e.detail.itemData;
-      const nodeId = e.detail.itemData.id;
-      if (nodeData.lazy) {
-        this.updateLazyCallback(nodeId).then(children => {
-          if (children === null || children === void 0 ? void 0 : children.length) {
-            const updatedTreeModel = updateTreeModel(this.treeModel, { id: nodeId, label: nodeData.label, items: children }, nodeId);
-            this.treeModel = updatedTreeModel;
-          }
-        });
-      }
-    };
-    this.treeModel = undefined;
-    this.lazyNode = undefined;
-    this.updateLazyCallback = undefined;
-    this.newNode = undefined;
-    this.testUpdateNode = false;
-    this.lazyLoadTreeItemsCallback = undefined;
   }
-  // 5.EVENTS (EMIT) //
   // 6.COMPONENT LIFECYCLE METHODS //
-  // 7.LISTENERS //
-  loadLazyChildrenHandler(e) {
-    const treeItemId = e.detail;
-    if (this.lazyLoadTreeItemsCallback) {
-      const promise = this.lazyLoadTreeItemsCallback(treeItemId);
-      setTimeout(() => {
-        promise.then(result => {
-          this.treeModel = result;
-        });
-      }, 1000);
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit("test");
+      this.renderedFirstTime = true;
     }
   }
-  treeItemStateChanged(event) {
-    const updatedTreeModel = updateTreeModel(this.treeModel, event.detail, event.detail.id);
-    console.log("updatedTreeModel", updatedTreeModel);
+  componentDidLoad() {
+    this.treeViewEl.treeModel = [
+      {
+        id: "number-1",
+        caption: "number-1 label (always editable)",
+        class: "tree-view-item tree-view-item--success",
+        leaf: false,
+        leftImgSrc: "./objects/datastore",
+        editable: true,
+        checkbox: true,
+        items: [
+          {
+            id: "number-1-1",
+            caption: "number-1-1 (always editable)",
+            leaf: false,
+            leftImgSrc: "/build/ch-icon-assets/patterns",
+            editable: true,
+            checkbox: true,
+            items: [
+              {
+                id: "number-1-1-1",
+                caption: "number-1-1-1",
+                leaf: true,
+                checkbox: true,
+                leftImgSrc: "./objects/knowledge-base"
+              },
+              {
+                id: "number-1-1-2",
+                caption: "number-1-1-2",
+                leaf: false,
+                checkbox: true,
+                leftImgSrc: "./objects/knowledge-base",
+                items: [
+                  {
+                    id: "number-1-1-2-1",
+                    caption: "number-1-1-2-1 (lazy, drag disabled)",
+                    leaf: false,
+                    leftImgSrc: "./objects/knowledge-base",
+                    lazy: true,
+                    checkbox: true,
+                    dragDisabled: true,
+                    toggleCheckboxes: true
+                  },
+                  {
+                    id: "number-1-1-2-2",
+                    caption: "number-1-1-2-2",
+                    leaf: true,
+                    checkbox: true,
+                    leftImgSrc: "/build/ch-icon-assets/java"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            id: "number-1-2",
+            caption: "number-1-2",
+            leaf: true,
+            checkbox: true,
+            leftImgSrc: "./objects/knowledge-base"
+          }
+        ]
+      },
+      {
+        id: "number-2",
+        caption: "number-2",
+        class: "tree-view-item tree-view-item--custom-image",
+        checkbox: true,
+        leaf: false,
+        items: [
+          {
+            id: "number-2-1",
+            caption: "number-2-1",
+            leaf: true,
+            checkbox: true,
+            leftImgSrc: "/build/ch-icon-assets/java"
+          },
+          {
+            id: "number-2-2",
+            caption: "number-2-2",
+            leaf: true,
+            checkbox: true,
+            leftImgSrc: "./objects/knowledge-base"
+          }
+        ]
+      }
+    ];
   }
   // 10.RENDER() FUNCTION //
   render() {
-    if (!this.testUpdateNode && this.treeModel) {
-      return (h(Host, null, h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el) }, renderTreeItems(this.treeModel)), ",", h("div", { class: "tree-buttons" }, h("gxg-button", { type: "outlined", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.getSelectedItemsHandler }, "Get Selected Items"), h("gxg-button", { type: "outlined", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), h("gxg-button", { type: "outlined", onClick: this.deleteNodeHandler }, "Delete Tree"))));
-    }
-    else if (this.testUpdateNode) {
-      return (h(Host, null, h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el), onTreeItemStateChanged: this.treeItemStateChangedHandler }, renderTreeItems(this.treeModel))));
-    }
-    else {
-      return h("slot", null);
-    }
+    return (h("div", null, h("div", { class: "tree-container" }, h("gxg-tree-view", { ref: el => (this.treeViewEl = el) })), h("label", null, "Check item", h("input", { type: "checkbox", name: "", id: "check-all", onInput: this.checkAllHandler }))));
   }
   static get is() { return "gx-ide-test"; }
   static get encapsulation() { return "shadow"; }
@@ -101,147 +139,25 @@ export class GxIdeTest {
       "$": ["test.css"]
     };
   }
-  static get properties() {
-    return {
-      "treeModel": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "GxgTreeItemData[]",
-          "resolved": "GxgTreeItemData[]",
-          "references": {
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The model for a gxg-tree"
-        }
-      },
-      "lazyNode": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "GxgTreeItemData[]",
-          "resolved": "GxgTreeItemData[]",
-          "references": {
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A new lazy node"
-        }
-      },
-      "updateLazyCallback": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(\n    id: string\n  ) => Promise<GxgTreeItemData[]>",
-          "resolved": "(id: string) => Promise<GxgTreeItemData[]>",
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
+  static get events() {
+    return [{
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
         "docs": {
-          "tags": [],
-          "text": "A new lazy node"
-        }
-      },
-      "newNode": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "GxgTreeItemData[]",
-          "resolved": "GxgTreeItemData[]",
-          "references": {
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
+          "tags": [{
+              "name": "description",
+              "text": "Gets fired when the component has rendered for the first time."
+            }],
+          "text": ""
         },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The new tree node to update"
-        }
-      },
-      "testUpdateNode": {
-        "type": "boolean",
-        "mutable": false,
         "complexType": {
-          "original": "false",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Update tree model test"
-        },
-        "attribute": "test-update-node",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "lazyLoadTreeItemsCallback": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(\n    treeItemId: string\n  ) => Promise<GxgTreeItemData[]>",
-          "resolved": "(treeItemId: string) => Promise<GxgTreeItemData[]>",
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GxgTreeItemData": {
-              "location": "import",
-              "path": "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A callback that returns a Promise with the new tree model"
         }
-      }
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "loadLazyChildren",
-        "method": "loadLazyChildrenHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "treeItemStateChanged",
-        "method": "treeItemStateChanged",
-        "target": undefined,
-        "capture": false,
-        "passive": false
       }];
   }
 }