@genexus/genexus-ide-ui 0.0.61 → 0.0.63

package/dist/components/gx-ide-test.js

@@ -1,207 +1,174 @@
-import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$9 } from './icon.js';
-import { d as defineCustomElement$8 } from './button.js';
-import { d as defineCustomElement$7 } from './form-checkbox.js';
-import { d as defineCustomElement$6 } from './icon2.js';
-import { d as defineCustomElement$5 } from './gxg-label2.js';
-import { d as defineCustomElement$4 } from './tooltip.js';
-import { d as defineCustomElement$3 } from './gxg-tree2.js';
-import { d as defineCustomElement$2 } from './gxg-tree-item2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$6 } from './checkbox.js';
+import { d as defineCustomElement$5 } from './tree-view.js';
+import { d as defineCustomElement$4 } from './tree-view-item.js';
+import { d as defineCustomElement$3 } from './tree-view-render.js';
+import { d as defineCustomElement$2 } from './tree-view2.js';
 
-/* eslint-disable @typescript-eslint/no-use-before-define */
-const renderTreeItems = (treeItemsModel, firstCall = true) => {
-  if (treeItemsModel === null || treeItemsModel === void 0 ? void 0 : treeItemsModel.length) {
-    if (firstCall) {
-      return treeItemsModel.map((item) => {
-        return renderTreeItem(item);
-      });
-    }
-    else {
-      return (h("gxg-tree", { slot: "tree" }, treeItemsModel.map((item) => {
-        return renderTreeItem(item);
-      })));
-    }
-  }
-  return [];
-};
-const renderTreeItem = (item) => {
-  var _a;
-  const childrenLength = item.items ? item.items.length : 0;
-  const isLeaf = !!(childrenLength === 0 || item.leaf);
-  const lazy = !!item.lazy;
-  return (h("gxg-tree-item", { checkbox: item.checkbox, checked: item.checked, description: item.description, disabled: item.disabled, icon: item.icon, indeterminate: item.indeterminate, id: item.id, key: `tree-item-${item.id}`, label: item.label, leaf: isLeaf && !lazy, numberOfChildren: childrenLength, opened: item.opened, selected: item.selected }, [item.label, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) && renderTreeItems(item.items, false)]));
-};
-
-const updateNodeById = (actualModel, nodeUpdatedState, updatedNodeId) => {
-  return actualModel.map(nodeActualState => {
-    if (nodeActualState.id === updatedNodeId) {
-      return Object.assign(Object.assign({}, nodeActualState), nodeUpdatedState);
-    }
-    else if (nodeActualState.items) {
-      return Object.assign(Object.assign({}, nodeActualState), { items: updateNodeById(nodeActualState.items, nodeUpdatedState, updatedNodeId) });
-    }
-    else {
-      return nodeActualState;
-    }
-  });
-};
-const updateTreeModel = (actualModel, updatedNodeModel, updatedNodeId) => {
-  if (actualModel.length && updatedNodeModel && updatedNodeId) {
-    return updateNodeById(actualModel, updatedNodeModel, updatedNodeId);
-  }
-  else {
-    /* If no newItemModel was passed, at least return the actualModel, to avoid having an updated empty tree */
-    return actualModel;
-  }
-};
-
-const testCss = ":host{display:block}";
+const testCss = ":host{display:block}.tree-container{display:flex;height:200px}";
 
 const GxIdeTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
+    /* 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.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.checkAllHandler = () => {
+      this.treeViewEl.updateAllItemsProperties({ checked: true });
     };
-    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 style() { return testCss; }
-}, [1, "gx-ide-test", {
-    "treeModel": [1040],
-    "lazyNode": [16],
-    "updateLazyCallback": [16],
-    "newNode": [1040],
-    "testUpdateNode": [4, "test-update-node"],
-    "lazyLoadTreeItemsCallback": [16]
-  }, [[0, "loadLazyChildren", "loadLazyChildrenHandler"], [0, "treeItemStateChanged", "treeItemStateChanged"]]]);
+}, [1, "gx-ide-test"]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-test", "ch-icon", "gxg-button", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-tooltip", "gxg-tree", "gxg-tree-item"];
+  const components = ["gx-ide-test", "ch-checkbox", "ch-tree-view", "ch-tree-view-item", "ch-tree-view-render", "gxg-tree-view"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-test":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, GxIdeTest$1);
       }
       break;
-    case "ch-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "gxg-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "gxg-form-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "gxg-icon":
+    case "ch-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "gxg-label":
+    case "ch-tree-view":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "gxg-tooltip":
+    case "ch-tree-view-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "gxg-tree":
+    case "ch-tree-view-render":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "gxg-tree-item":
+    case "gxg-tree-view":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/gx-ide-title.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GxIdeTitle extends Components.GxIdeTitle, HTMLElement {}
+export const GxIdeTitle: {
+  prototype: GxIdeTitle;
+  new (): GxIdeTitle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/gx-ide-title.js

@@ -0,0 +1,6 @@
+import { G as GxIdeTitle$1, d as defineCustomElement$1 } from './title.js';
+
+const GxIdeTitle = GxIdeTitle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeTitle, defineCustomElement };

package/dist/components/gx-ide-top-bar.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$5 } from './icon.js';
 import { d as defineCustomElement$4 } from './button.js';
 import { d as defineCustomElement$3 } from './icon2.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { d as defineCustomElement$2 } from './title2.js';
 
 const topBarCss = ":host{display:block;box-sizing:border-box}.wrapper{display:flex;justify-content:space-between;padding:var(--spacing-comp-01) var(--spacing-comp-02);transition:background-color var(--gx-ide-timing-super-fast-ms);background-color:var(--gray-01)}gxg-title::part(title){color:var(--color-on-secondary);transition:color var(--gx-ide-timing-super-fast-ms)}";