@genexus/genexus-ide-ui 0.0.62 → 0.0.64

package/dist/components/ch-next-data-modeling-render.js

@@ -0,0 +1,295 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './accordion.js';
+import { d as defineCustomElement$3 } from './next-data-modeling.js';
+import { d as defineCustomElement$2 } from './next-data-modeling-item.js';
+
+const nextDataModelingRenderCss = "ch-next-data-modeling-render{display:contents}";
+
+const getSubLevelEntitiesATTs = (result, level) => {
+  level.forEach(entityItem => {
+    const entityItemLevel = entityItem.Level;
+    if (entityItem.Type === "LEVEL") {
+      /* Following level entities with DataType */
+      result[entityItem.DataType] = entityItemLevel.map(subEntityItem => subEntityItem.Name);
+      getSubLevelEntitiesATTs(result, entityItemLevel);
+    }
+  });
+};
+const updateToEntityATTs = (dm) => {
+  if (!dm) {
+    return {};
+  }
+  const result = {};
+  dm.Entities.forEach((entity) => {
+    const entityLevel = entity.Level;
+    /* First level entities with name */
+    result[entity.Name] = entityLevel.map(entityItem => entityItem.Name);
+    if (entityLevel) {
+      getSubLevelEntitiesATTs(result, entityLevel);
+    }
+  });
+  return result;
+};
+const NextDataModeling = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fieldAdded = createEvent(this, "fieldAdded", 7);
+    this.fieldRemoved = createEvent(this, "fieldRemoved", 7);
+    this.entities = [];
+    this.editedControl = null;
+    this.entityWasAdded = "none";
+    /**
+     * The labels used in the buttons of the items. Important for accessibility.
+     */
+    this.captions = {
+      ATT: "Attribute",
+      ENTITY: "Entity",
+      LEVEL: "Collection",
+      adding: "Adding...",
+      addNewEntity: "Add new entity",
+      addNewField: "Add new field",
+      cancel: "Cancel",
+      collection: "Collection",
+      confirm: "Confirm",
+      delete: "Delete",
+      deleteMode: "Confirm delete?",
+      deleting: "Deleting...",
+      edit: "Edit",
+      editing: "Saving...",
+      newEntity: "New Entity",
+      newField: "New Field"
+    };
+    /**
+     * This attribute lets you specify if the element is disabled.
+     * If disabled, it will not fire any user interaction related event.
+     */
+    this.disabled = false;
+    /**
+     * The error texts used for the new field input.
+     */
+    this.errorTexts = {
+      Empty: "Field is empty.",
+      AlreadyDefined1: "Field ",
+      AlreadyDefinedEntity1: "Entity ",
+      AlreadyDefined2: " already exists."
+    };
+    /**
+     * This property is a WA due to Angular's bug not letting execute UC 2.0
+     * methods on different layouts.
+     */
+    this.hideLoading = null;
+    /**
+     * Determine the maximum amount of ATTs displayed per entity.
+     */
+    this.maxAtts = 3;
+    /**
+     * This attribute indicates that the user cannot modify the value of the control.
+     * Same as [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
+     * attribute for `input` elements.
+     */
+    this.readonly = false;
+    this.addField = (collection) => (event) => {
+      this.addEntityItem(collection, event.detail);
+      this.updateReferences(event, true);
+    };
+    this.deleteField = (collection, index) => (event) => {
+      collection.remove(index + 1);
+      this.updateReferences(event);
+    };
+    this.editField = (entityItem) => (event) => {
+      entityItem.Name = event.detail.name;
+      entityItem.Type = event.detail.type;
+      entityItem.DataType = ""; // Remove DataType
+      this.updateReferences(event, true);
+    };
+    this.addEntity = (collection) => (event) => {
+      const newItem = {
+        Name: event.detail.name,
+        Level: this.createGxCollectionCallback()
+      };
+      collection.push(newItem);
+      this.addEntityItem(newItem.Level, event.detail.level[0]);
+      this.updateReferences(event, true);
+      this.entityWasAdded = "adding";
+    };
+    this.editEntity = (entityItem) => (event) => {
+      entityItem.Name = event.detail.name;
+      this.updateReferences(event, true);
+    };
+  }
+  handleDataModelChange(newDataModel) {
+    this.entityNameToATTs = updateToEntityATTs(newDataModel);
+    this.entities = Object.keys(this.entityNameToATTs);
+  }
+  handleHideLoadingChange() {
+    this.editedControl.hideWaitingMode();
+    if (this.entityWasAdded === "adding") {
+      this.entityWasAdded = "finished";
+    }
+  }
+  addEntityItem(collection, item) {
+    const newItem = {
+      Name: item.name,
+      Type: item.type,
+      DataType: ""
+    };
+    collection.push(newItem);
+  }
+  updateReferences(event, fieldAdded = false) {
+    event.stopPropagation();
+    this.editedControl = event.target;
+    if (fieldAdded) {
+      this.fieldAdded.emit();
+    }
+    else {
+      this.fieldRemoved.emit();
+    }
+    this.processEntityAdding();
+  }
+  processEntityAdding() {
+    if (!this.editedControl || this.entityWasAdded === "none") {
+      return;
+    }
+    const entityClassList = this.editedControl.classList;
+    const firstItemContainerClassList = this.editedControl.firstElementChild.classList;
+    const firstItemClassList = this.editedControl.firstElementChild.firstElementChild.classList;
+    if (this.entityWasAdded === "adding") {
+      entityClassList.remove(this.addingModeCommonClass, this.entityAddingModeClass);
+      entityClassList.add(this.entityClass, this.commonClass);
+      firstItemContainerClassList.add(this.fieldContainerClass);
+      firstItemClassList.remove(this.addingModeCommonClass, ...this.fieldAddingModeClass.split(" "));
+      firstItemClassList.add(this.fieldClass, this.fieldCommonClass, this.commonClass);
+      return;
+    }
+    if (this.entityWasAdded === "finished") {
+      entityClassList.remove(this.entityClass);
+      entityClassList.add(this.addingModeCommonClass, this.entityAddingModeClass);
+      firstItemContainerClassList.remove(this.fieldContainerClass);
+      firstItemClassList.remove(this.fieldClass);
+      firstItemClassList.add(this.addingModeCommonClass, ...this.fieldAddingModeClass.split(" "));
+      this.entityWasAdded = "none";
+      return;
+    }
+  }
+  componentWillLoad() {
+    this.handleDataModelChange(this.dataModel);
+  }
+  render() {
+    var _a, _b;
+    return (h("ch-next-data-modeling", { class: this.cssClass }, this.dataModel != null &&
+      this.dataModel.Entities != null &&
+      this.dataModel.Entities.map((entity, i) => {
+        var _a, _b, _c;
+        return (h("ch-next-data-modeling-item", { key: entity.Name, captions: this.captions, class: this.entityClass + " " + this.commonClass, disabled: this.disabled, errorTexts: this.errorTexts, fieldNames: this.entities, name: entity.Name, level: 0, readonly: this.readonly, onDeleteField: !this.readonly
+            ? this.deleteField((_a = this.dataModelToEdit) === null || _a === void 0 ? void 0 : _a.Entities, i)
+            : null, onEditField: !this.readonly
+            ? this.editEntity((_b = this.dataModelToEdit) === null || _b === void 0 ? void 0 : _b.Entities[i])
+            : null }, h("ch-next-data-modeling", { class: this.fieldContainerClass }, entity.Level.map((field, j) => {
+          var _a, _b, _c;
+          return (h("ch-next-data-modeling-item", { key: field.Name, captions: this.captions, class: this.fieldClass +
+              " " +
+              this.fieldCommonClass +
+              " " +
+              this.commonClass, dataType: field.DataType, disabled: this.disabled, entityNameToATTs: this.entityNameToATTs, errorTexts: this.errorTexts, fieldNames: this.entityNameToATTs[entity.Name], maxAtts: this.maxAtts, name: field.Name, readonly: this.readonly, type: field.Type, onDeleteField: !this.readonly
+              ? this.deleteField((_a = this.dataModelToEdit) === null || _a === void 0 ? void 0 : _a.Entities[i].Level, j)
+              : null, onEditField: !this.readonly
+              ? this.editField((_b = this.dataModelToEdit) === null || _b === void 0 ? void 0 : _b.Entities[i].Level[j])
+              : null }, field.Level != null && field.Level.length > 0 && (h("ch-next-data-modeling", { class: this.subFieldContainerClass }, field.Level.map((subField, k) => {
+            var _a, _b;
+            return (h("ch-next-data-modeling-item", { key: subField.Name, captions: this.captions, class: this.subFieldClass +
+                " " +
+                this.fieldCommonClass +
+                " " +
+                this.commonClass, dataType: subField.DataType, disabled: this.disabled, entityNameToATTs: this.entityNameToATTs, errorTexts: this.errorTexts, fieldNames: this.entityNameToATTs[field.DataType], level: 2, maxAtts: this.maxAtts, name: subField.Name, readonly: this.readonly, type: subField.Type, onDeleteField: !this.readonly
+                ? this.deleteField((_a = this.dataModelToEdit) === null || _a === void 0 ? void 0 : _a.Entities[i].Level[j].Level, k)
+                : null, onEditField: !this.readonly
+                ? this.editField((_b = this.dataModelToEdit) === null || _b === void 0 ? void 0 : _b.Entities[i].Level[j].Level[k])
+                : null }));
+          }), !this.readonly && (h("ch-next-data-modeling-item", { key: "-1", captions: this.captions, class: this.subFieldAddingModeClass +
+              " " +
+              this.fieldCommonClass +
+              " " +
+              this.addingModeCommonClass +
+              " " +
+              this.commonClass, disabled: this.disabled, errorTexts: this.errorTexts, fieldNames: this.entityNameToATTs[field.DataType], level: 2, mode: "add", type: "ATT", onNewField: this.addField((_c = this.dataModelToEdit) === null || _c === void 0 ? void 0 : _c.Entities[i].Level[j].Level) }))))));
+        }), !this.readonly && (h("ch-next-data-modeling-item", { key: "-1", captions: this.captions, class: this.fieldAddingModeClass +
+            " " +
+            this.fieldCommonClass +
+            " " +
+            this.addingModeCommonClass +
+            " " +
+            this.commonClass, disabled: this.disabled, errorTexts: this.errorTexts, fieldNames: this.entityNameToATTs[entity.Name], mode: "add", type: "ATT", onNewField: this.addField((_c = this.dataModelToEdit) === null || _c === void 0 ? void 0 : _c.Entities[i].Level) })))));
+      }), ((_a = this.dataModel) === null || _a === void 0 ? void 0 : _a.Entities) && !this.readonly && (h("ch-next-data-modeling-item", { key: "-1", captions: this.captions, class: this.entityAddingModeClass +
+        " " +
+        this.addingModeCommonClass +
+        " " +
+        this.commonClass, disabled: this.disabled, errorTexts: this.errorTexts, fieldNames: this.entities, level: 0, mode: "add", onNewEntity: this.addEntity((_b = this.dataModelToEdit) === null || _b === void 0 ? void 0 : _b.Entities) }, h("ch-next-data-modeling", null, h("ch-next-data-modeling-item", { actionsVisible: false, captions: this.captions, class: this.fieldAddingModeClass +
+        " " +
+        this.fieldCommonClass +
+        " " +
+        this.addingModeCommonClass +
+        " " +
+        this.commonClass, disabled: this.disabled, errorTexts: this.errorTexts, mode: "add", showNewFieldBtn: false, type: "ATT" }))))));
+  }
+  static get watchers() { return {
+    "dataModel": ["handleDataModelChange"],
+    "hideLoading": ["handleHideLoadingChange"]
+  }; }
+  static get style() { return nextDataModelingRenderCss; }
+}, [0, "ch-next-data-modeling-render", {
+    "addingModeCommonClass": [1, "adding-mode-common-class"],
+    "captions": [16],
+    "commonClass": [1, "common-class"],
+    "createGxCollectionCallback": [16],
+    "cssClass": [1, "css-class"],
+    "dataModel": [16],
+    "dataModelToEdit": [16],
+    "disabled": [4],
+    "entityAddingModeClass": [1, "entity-adding-mode-class"],
+    "entityClass": [1, "entity-class"],
+    "errorTexts": [16],
+    "fieldAddingModeClass": [1, "field-adding-mode-class"],
+    "fieldClass": [1, "field-class"],
+    "fieldContainerClass": [1, "field-container-class"],
+    "fieldCommonClass": [1, "field-common-class"],
+    "hideLoading": [8, "hide-loading"],
+    "maxAtts": [2, "max-atts"],
+    "readonly": [4],
+    "subFieldClass": [1, "sub-field-class"],
+    "subFieldAddingModeClass": [1, "sub-field-adding-mode-class"],
+    "subFieldContainerClass": [1, "sub-field-container-class"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-next-data-modeling-render", "ch-accordion", "ch-next-data-modeling", "ch-next-data-modeling-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-next-data-modeling-render":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, NextDataModeling);
+      }
+      break;
+    case "ch-accordion":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-next-data-modeling":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-next-data-modeling-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChNextDataModelingRender = NextDataModeling;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChNextDataModelingRender, defineCustomElement };

package/dist/components/ch-next-data-modeling.js

@@ -1,30 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const nextDataModelingCss = "ch-next-data-modeling{--delete-icon:url('data:image/svg+xml,<svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.87729 4.55154H12.1585V14.3936C12.1613 14.8186 11.9944 15.2273 11.6949 15.5288C11.3953 15.8304 10.9878 16 10.5627 16H3.47304C3.04797 16 2.64046 15.8304 2.34089 15.5288C2.04133 15.2273 1.87447 14.8186 1.87729 14.3936V4.55154ZM10.5734 1.42436V1.25301C10.5676 0.559264 10.0035 0 9.30972 0H4.72605C4.03228 0 3.46821 0.559264 3.46233 1.25301V1.42436H0.078125V3.03079H14.0005V1.42436H10.5734Z\" fill=\"%23000\"/></svg>');--edit-icon:url('data:image/svg+xml,<svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.4291 5.4137L10.8838 1.73151L12.0517 0.50411C12.3715 0.168037 12.7644 0 13.2304 0C13.6964 0 14.089 0.168037 14.4082 0.50411L15.5761 1.73151C15.8958 2.06758 16.0627 2.47321 16.0766 2.94838C16.0905 3.42356 15.9376 3.82889 15.6178 4.16438L14.4291 5.4137ZM13.2195 6.70685L4.37728 16H0.832031V12.274L9.67429 2.98082L13.2195 6.70685Z\" fill=\"%23000\"/></svg>');display:grid;grid-template-columns:1fr;grid-auto-rows:min-content;flex:1;height:100%}";
-
-const NextDataModeling = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  render() {
-    return (h(Host, { role: "list" }, h("slot", null)));
-  }
-  static get style() { return nextDataModelingCss; }
-}, [4, "ch-next-data-modeling"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-next-data-modeling"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-next-data-modeling":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, NextDataModeling);
-      }
-      break;
-  } });
-}
+import { N as NextDataModeling, d as defineCustomElement$1 } from './next-data-modeling.js';
 
 const ChNextDataModeling = NextDataModeling;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ch-tree-view-item.js

@@ -0,0 +1,6 @@
+import { C as ChTreeViewItem$1, d as defineCustomElement$1 } from './tree-view-item.js';
+
+const ChTreeViewItem = ChTreeViewItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTreeViewItem, defineCustomElement };

package/dist/components/ch-tree-view-render-wrapper.js

@@ -0,0 +1,227 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './checkbox.js';
+import { d as defineCustomElement$4 } from './tree-view.js';
+import { d as defineCustomElement$3 } from './tree-view-item.js';
+import { d as defineCustomElement$2 } from './tree-view-render.js';
+
+const treeViewRenderWrapperCss = "";
+
+const DEFAULT_DRAG_DISABLED_VALUE = false;
+const DEFAULT_DROP_DISABLED_VALUE = false;
+const DEFAULT_EDITABLE_ITEMS_VALUE = true;
+const defaultRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
+  var _a, _b, _c, _d, _e, _f;
+  return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { id: itemModel.id, caption: itemModel.caption, checkbox: (_a = itemModel.checkbox) !== null && _a !== void 0 ? _a : treeState.checkbox, checked: (_b = itemModel.checked) !== null && _b !== void 0 ? _b : treeState.checked, class: itemModel.class, disabled: itemModel.disabled, downloading: itemModel.downloading, dragDisabled: (_c = itemModel.dragDisabled) !== null && _c !== void 0 ? _c : treeState.dragDisabled, dropDisabled: (_d = itemModel.dropDisabled) !== null && _d !== void 0 ? _d : treeState.dropDisabled, editable: (_e = itemModel.editable) !== null && _e !== void 0 ? _e : treeState.editableItems, expanded: itemModel.expanded, indeterminate: itemModel.indeterminate, lastItem: lastItem, lazyLoad: itemModel.lazy, leaf: itemModel.leaf, leftImgSrc: itemModel.leftImgSrc, level: level, metadata: itemModel.metadata, rightImgSrc: itemModel.rightImgSrc, selected: itemModel.selected, showExpandableButton: itemModel.showExpandableButton, showLines: treeState.showLines, toggleCheckboxes: (_f = itemModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : treeState.toggleCheckboxes }, !itemModel.leaf &&
+    itemModel.items != null &&
+    itemModel.items.map((subModel, index) => defaultRenderItem(subModel, treeState, treeHasFilter, treeState.showLines &&
+      (treeHasFilter && itemModel.lastItemId !== ""
+        ? subModel.id === itemModel.lastItemId
+        : index === itemModel.items.length - 1), level + 1))));
+};
+const ChTreeViewRenderWrapper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.checkedItemsChange = createEvent(this, "checkedItemsChange", 7);
+    this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
+    this.itemOpenReference = createEvent(this, "itemOpenReference", 7);
+    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
+    /**
+     * Set this attribute if you want display a checkbox in all items by default.
+     */
+    this.checkbox = false;
+    /**
+     * Set this attribute if you want the checkbox to be checked in all items by
+     * default.
+     * Only works if `checkbox = true`
+     */
+    this.checked = false;
+    /**
+     * This attribute lets you specify if the drag operation is disabled in all
+     * items by default. If `true`, the items can't be dragged.
+     */
+    this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
+    /**
+     * This attribute lets you specify if the drop operation is disabled in all
+     * items by default. If `true`, the items won't accept any drops.
+     */
+    this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
+    /**
+     * This attribute lets you specify if the edit operation is enabled in all
+     * items by default. If `true`, the items can edit its caption in place.
+     */
+    this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
+    /**
+     * This property lets you determine the list of items that will be filtered.
+     * Only works if `filterType = "id-list"`.
+     */
+    this.filterList = [];
+    /**
+     * This property lets you determine the options that will be applied to the
+     * filter.
+     * Only works if `filterType = "caption" | "metadata"`.
+     */
+    this.filterOptions = {};
+    /**
+     * This attribute lets you define what kind of filter is applied to items.
+     * Only items that satisfy the filter predicate will be displayed.
+     *
+     * | Value       | Details                                                                                        |
+     * | ----------- | ---------------------------------------------------------------------------------------------- |
+     * | `checked`   | Show only the items that have a checkbox and are checked.                                      |
+     * | `unchecked` | Show only the items that have a checkbox and are not checked.                                  |
+     * | `caption`   | Show only the items whose `caption` satisfies the regex determinate by the `filter` property.  |
+     * | `metadata`  | Show only the items whose `metadata` satisfies the regex determinate by the `filter` property. |
+     * | `id-list`   | Show only the items that are contained in the array determinate by the `filterList` property.  |
+     * | `none`      | Show all items.                                                                                |
+     */
+    this.filterType = "none";
+    /**
+     * Set this attribute if you want to allow multi selection of the items.
+     */
+    this.multiSelection = false;
+    /**
+     * This property allows us to implement custom rendering of tree items.
+     */
+    this.renderItem = defaultRenderItem;
+    /**
+     * `true` to display the relation between tree items and tree lists using
+     * lines.
+     */
+    this.showLines = "none";
+    /**
+     * Set this attribute if you want all the children item's checkboxes to be
+     * checked when the parent item checkbox is checked, or to be unchecked when
+     * the parent item checkbox is unchecked.
+     * This attribute will be used in all items by default.
+     */
+    this.toggleCheckboxes = false;
+    /**
+     * This property lets you define the model of the ch-tree-x control.
+     */
+    this.treeModel = [];
+  }
+  /**
+   * Given an item id, an array of items to add, the download status and the
+   * lazy state, updates the item's UI Model.
+   */
+  async loadLazyContent(itemId, items, downloading = false, lazy = false) {
+    this.treeRef.loadLazyContent(itemId, items, downloading, lazy);
+  }
+  /**
+   * Given an item id, it displays and scrolls into the item view.
+   */
+  async scrollIntoVisible(treeItemId) {
+    this.treeRef.scrollIntoVisible(treeItemId);
+  }
+  /**
+   * This method is used to toggle a tree item by the tree item id/ids.
+   *
+   * @param treeItemIds An array id the tree items to be toggled.
+   * @param expand A boolean indicating that the tree item should be expanded or collapsed. (optional)
+   * @returns The modified items after the method was called.
+   */
+  async toggleItems(treeItemIds, expand) {
+    return this.treeRef.toggleItems(treeItemIds, expand);
+  }
+  /**
+   * Given a subset of item's properties, it updates all item UI models.
+   */
+  async updateAllItemsProperties(properties) {
+    this.treeRef.updateAllItemsProperties(properties);
+  }
+  /**
+   * Given a item list and the properties to update, it updates the properties
+   * of the items in the list.
+   */
+  async updateItemsProperties(items, properties) {
+    this.treeRef.updateItemsProperties(items, properties);
+  }
+  /**
+   * Update the information about the valid droppable zones.
+   * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
+   * @param newContainerId ID of the container where the drag is trying to be made.
+   * @param draggedItems Information about the dragged items.
+   * @param validDrop Current state of the droppable zone.
+   */
+  async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+    this.treeRef.updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop);
+  }
+  updateCheckboxValue(event) {
+    event.stopPropagation();
+    this.checkedItemsChange.emit(event.detail);
+  }
+  handleOpenReference(event) {
+    event.stopPropagation();
+    this.itemOpenReference.emit(event.detail);
+  }
+  render() {
+    return (h("ch-tree-view-render", { checkbox: this.checkbox, checked: this.checked, checkDroppableZoneCallback: this.checkDroppableZoneCallback, cssClass: this.cssClass, dragDisabled: this.dragDisabled, dropDisabled: this.dropDisabled, dropItemsCallback: this.dropItemsCallback, editableItems: this.editableItems, filter: this.filter, filterList: this.filterList, filterOptions: this.filterOptions, filterType: this.filterType, lazyLoadTreeItemsCallback: this.lazyLoadTreeItemsCallback, modifyItemCaptionCallback: this.modifyItemCaptionCallback, multiSelection: this.multiSelection, renderItem: this.renderItem, showLines: this.showLines, sortItemsCallback: this.sortItemsCallback, toggleCheckboxes: this.toggleCheckboxes, treeModel: this.treeModel, ref: el => (this.treeRef = el) }));
+  }
+  static get style() { return treeViewRenderWrapperCss; }
+}, [0, "ch-tree-view-render-wrapper", {
+    "checkbox": [4],
+    "checked": [4],
+    "checkDroppableZoneCallback": [16],
+    "cssClass": [1, "css-class"],
+    "dragDisabled": [4, "drag-disabled"],
+    "dropDisabled": [4, "drop-disabled"],
+    "dropItemsCallback": [16],
+    "editableItems": [4, "editable-items"],
+    "filter": [1],
+    "filterList": [16],
+    "filterOptions": [16],
+    "filterType": [1, "filter-type"],
+    "lazyLoadTreeItemsCallback": [16],
+    "modifyItemCaptionCallback": [16],
+    "multiSelection": [4, "multi-selection"],
+    "renderItem": [16],
+    "showLines": [1, "show-lines"],
+    "sortItemsCallback": [16],
+    "toggleCheckboxes": [4, "toggle-checkboxes"],
+    "treeModel": [16],
+    "loadLazyContent": [64],
+    "scrollIntoVisible": [64],
+    "toggleItems": [64],
+    "updateAllItemsProperties": [64],
+    "updateItemsProperties": [64],
+    "updateValidDropZone": [64]
+  }, [[0, "checkedItemsChange", "updateCheckboxValue"], [0, "itemOpenReference", "handleOpenReference"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-tree-view-render-wrapper", "ch-checkbox", "ch-tree-view", "ch-tree-view-item", "ch-tree-view-render"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-tree-view-render-wrapper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTreeViewRenderWrapper$1);
+      }
+      break;
+    case "ch-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ch-tree-view":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-tree-view-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-tree-view-render":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChTreeViewRenderWrapper = ChTreeViewRenderWrapper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTreeViewRenderWrapper, defineCustomElement };

package/dist/components/ch-tree-view-render.js

@@ -0,0 +1,6 @@
+import { C as ChTreeViewRender$1, d as defineCustomElement$1 } from './tree-view-render.js';
+
+const ChTreeViewRender = ChTreeViewRender$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTreeViewRender, defineCustomElement };

package/dist/components/ch-tree-view.js

@@ -0,0 +1,6 @@
+import { C as ChTreeView$1, d as defineCustomElement$1 } from './tree-view.js';
+
+const ChTreeView = ChTreeView$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTreeView, defineCustomElement };

package/dist/components/config.js

@@ -7,7 +7,7 @@ const config = {
       type: "text-regular",
       textAlign: "center",
       padding: "m",
-      maxWidth: "200px",
+      maxWidth: "250px",
       minHeight: "300px"
     }
   },

package/dist/components/directory-selector.js

@@ -13,6 +13,21 @@ const GxIdeDirectorySelector = /*@__PURE__*/ proxyCustomElement(class extends HT
     super();
     this.__registerHost();
     this.__attachShadow();
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.METHODS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES | WATCH'S //
+    this.defaultIcon = "objects/folder";
     this.evaluateLabelPosition = () => {
       if (this.label && this.labelPosition === "above") {
         this.centerLabel = false;
@@ -32,6 +47,13 @@ const GxIdeDirectorySelector = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.valueChangedHandler = (e) => {
       this.value = e.detail;
     };
+    this.buttonSelectMouseEnterHandler = () => {
+      this.icon = "objects/folder-open";
+    };
+    this.buttonSelectMouseLeaveHandler = () => {
+      this.icon = this.defaultIcon;
+    };
+    this.icon = this.defaultIcon;
     this.accessibilityLabels = {
       buttonSelectLabel: "displays the directory selector"
     };
@@ -42,9 +64,6 @@ const GxIdeDirectorySelector = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.selectDirectoryCallback = undefined;
     this.value = undefined;
   }
-  // 2. REFERENCE TO ELEMENTS //
-  // 3.STATE() VARIABLES //
-  // 4.PUBLIC PROPERTY API | WATCH'S //
   // 5.EVENTS (EMIT) //
   // 6.METHODS //
   componentWillLoad() {
@@ -53,7 +72,7 @@ const GxIdeDirectorySelector = /*@__PURE__*/ proxyCustomElement(class extends HT
   // 10.RENDER() FUNCTION //
   render() {
     var _a;
-    return (h(Host, null, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel }, this.label)) : null, h("div", { class: "wrapper" }, h("gxg-form-text", { part: "input", value: this.value, onValueChanged: this.valueChangedHandler }), h("gxg-button", { part: "button-select", onClick: this.btnSelectClickHandler, "aria-label": (_a = this.accessibilityLabels) === null || _a === void 0 ? void 0 : _a.buttonSelectLabel, type: "secondary-icon-only", icon: "gemini-tools/folder", disabled: !this.selectDirectoryCallback }))));
+    return (h(Host, null, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel }, this.label)) : null, h("div", { class: "wrapper" }, h("gxg-form-text", { part: "input", value: this.value, onValueChanged: this.valueChangedHandler }), h("gxg-button", { part: "button-select", onClick: this.btnSelectClickHandler, "aria-label": (_a = this.accessibilityLabels) === null || _a === void 0 ? void 0 : _a.buttonSelectLabel, type: "secondary-icon-only", icon: this.icon, disabled: !this.selectDirectoryCallback, onMouseEnter: this.buttonSelectMouseEnterHandler, onMouseLeave: this.buttonSelectMouseLeaveHandler }))));
   }
   static get style() { return directorySelectorCss; }
 }, [1, "gx-ide-directory-selector", {
@@ -63,7 +82,8 @@ const GxIdeDirectorySelector = /*@__PURE__*/ proxyCustomElement(class extends HT
     "centerLabel": [1028, "center-label"],
     "labelWidth": [1, "label-width"],
     "selectDirectoryCallback": [16],
-    "value": [1025]
+    "value": [1025],
+    "icon": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/form-text.js

@@ -396,6 +396,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }, class: {
         rtl: this.rtl,
         large: state.large,
+        mercury: state.mercury,
         borderless: this.borderless,
         file: this.type === "file",
         tooltip: this.toolTip,