@genexus/genexus-ide-ui 0.0.57 → 0.0.59

package/dist/cjs/ch-test-tree-x.cjs.entry.js

@@ -9,36 +9,53 @@ const testTreeXCss = "ch-test-tree-x{display:contents}";
 const DEFAULT_DRAG_DISABLED_VALUE = false;
 const DEFAULT_DROP_DISABLED_VALUE = false;
 const DEFAULT_CLASS_VALUE = "tree-view-item";
+const DEFAULT_EDITABLE_ITEMS_VALUE = true;
 const DEFAULT_EXPANDED_VALUE = false;
 const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
+const DEFAULT_ORDER_VALUE = 0;
 const DEFAULT_SELECTED_VALUE = false;
 const ChTestTreeX = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.checkedItemsChange = index.createEvent(this, "checkedItemsChange", 7);
+    this.itemContextmenu = index.createEvent(this, "itemContextmenu", 7);
+    this.itemOpenReference = index.createEvent(this, "itemOpenReference", 7);
+    this.selectedItemsChange = index.createEvent(this, "selectedItemsChange", 7);
     // UI Models
     this.flattenedTreeModel = new Map();
+    this.flattenedCheckboxTreeModel = new Map();
     this.selectedItems = new Set();
-    this.flattenedLazyTreeModel = new Map();
     /**
      * This property lets you specify if the tree is waiting to process the drop
      * of items.
      */
     this.waitDropProcessing = false;
+    /**
+     * 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 control can't be dragged.
+     * 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 control won't accept any drops.
+     * items by default. If `true`, the items won't accept any drops.
      */
     this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
     /**
-     * This property lets you define the model of the ch-tree-x control.
+     * 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.treeModel = [];
+    this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
     /**
      * Set this attribute if you want to allow multi selection of the items.
      */
@@ -48,6 +65,17 @@ const ChTestTreeX = class {
      * 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 = [];
     this.handleDroppableZoneEnter = (event) => {
       if (!this.checkDroppableZoneCallback) {
         return;
@@ -62,6 +90,7 @@ const ChTestTreeX = class {
       });
     };
     this.handleSelectedItemsChange = (event) => {
+      event.stopPropagation();
       const itemsToProcess = new Map(event.detail);
       // Remove no longer selected items
       this.selectedItems.forEach(selectedItemId => {
@@ -85,12 +114,17 @@ const ChTestTreeX = class {
         newSelectedItem.expanded = newSelectedItemInfo.expanded;
         this.selectedItems.add(itemId);
       });
+      this.selectedItemsChange.emit(event.detail);
     };
     this.handleExpandedItemChange = (event) => {
       const detail = event.detail;
       const itemInfo = this.flattenedTreeModel.get(detail.id).item;
       itemInfo.expanded = detail.expanded;
     };
+    this.handleItemContextmenu = (event) => {
+      event.stopPropagation();
+      this.itemContextmenu.emit(event.detail);
+    };
     this.handleItemsDropped = (event) => {
       if (!this.dropItemsCallback) {
         return;
@@ -155,27 +189,32 @@ const ChTestTreeX = class {
       itemUIModelExtended.parentItem = newParentUIModel;
     };
     this.renderSubModel = (treeSubModel, lastItem, level) => {
-      var _a, _b;
-      return (index.h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
+      var _a, _b, _c, _d, _e, _f;
+      return (index.h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: (_a = treeSubModel.checkbox) !== null && _a !== void 0 ? _a : this.checkbox, checked: (_b = treeSubModel.checked) !== null && _b !== void 0 ? _b : this.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_c = treeSubModel.dragDisabled) !== null && _c !== void 0 ? _c : this.dragDisabled, dropDisabled: (_d = treeSubModel.dropDisabled) !== null && _d !== void 0 ? _d : this.dropDisabled, editable: (_e = treeSubModel.editable) !== null && _e !== void 0 ? _e : this.editableItems, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: (_f = treeSubModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : this.toggleCheckboxes }, !treeSubModel.leaf &&
         treeSubModel.items != null &&
-        treeSubModel.items.length !== 0 && (index.h("ch-tree-x-list", { slot: "tree" }, treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))))));
+        treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
     };
     this.flattenItemUIModel = (parentModel) => (item) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f;
       this.flattenedTreeModel.set(item.id, {
         parentItem: parentModel,
         item: item
       });
+      // Add the items that have a checkbox in a separate Map
+      if ((_a = item.checkbox) !== null && _a !== void 0 ? _a : this.checkbox) {
+        this.flattenedCheckboxTreeModel.set(item.id, {
+          parentItem: parentModel,
+          item: item
+        });
+      }
       // Make sure the properties are with their default values to avoid issues
       // when reusing DOM nodes
       item.class || (item.class = DEFAULT_CLASS_VALUE);
-      (_a = item.expanded) !== null && _a !== void 0 ? _a : (item.expanded = DEFAULT_EXPANDED_VALUE);
-      (_b = item.indeterminate) !== null && _b !== void 0 ? _b : (item.indeterminate = DEFAULT_INDETERMINATE_VALUE);
-      (_c = item.lazy) !== null && _c !== void 0 ? _c : (item.lazy = DEFAULT_LAZY_VALUE);
-      (_d = item.selected) !== null && _d !== void 0 ? _d : (item.selected = DEFAULT_SELECTED_VALUE);
-      if (item.lazy) {
-        this.flattenedLazyTreeModel.set(item.id, item);
-      }
+      (_b = item.expanded) !== null && _b !== void 0 ? _b : (item.expanded = DEFAULT_EXPANDED_VALUE);
+      (_c = item.indeterminate) !== null && _c !== void 0 ? _c : (item.indeterminate = DEFAULT_INDETERMINATE_VALUE);
+      (_d = item.lazy) !== null && _d !== void 0 ? _d : (item.lazy = DEFAULT_LAZY_VALUE);
+      (_e = item.order) !== null && _e !== void 0 ? _e : (item.order = DEFAULT_ORDER_VALUE);
+      (_f = item.selected) !== null && _f !== void 0 ? _f : (item.selected = DEFAULT_SELECTED_VALUE);
       if (item.selected) {
         this.selectedItems.add(item.id);
       }
@@ -190,9 +229,8 @@ const ChTestTreeX = class {
    * lazy state, updates the item's UI Model.
    */
   async loadLazyContent(itemId, items, downloading = false, lazy = false) {
-    const itemToLazyLoadContent = this.flattenedLazyTreeModel.get(itemId);
+    const itemToLazyLoadContent = this.flattenedTreeModel.get(itemId).item;
     // Establish that the content was lazy loaded
-    this.flattenedLazyTreeModel.delete(itemId);
     itemToLazyLoadContent.downloading = downloading;
     itemToLazyLoadContent.lazy = lazy;
     // Check if there is items to add
@@ -203,6 +241,8 @@ const ChTestTreeX = class {
     itemToLazyLoadContent.items = items;
     this.sortItems(itemToLazyLoadContent.items);
     this.flattenSubModel(itemToLazyLoadContent);
+    // Re-sync checked items
+    this.emitCheckedItemsChange();
     // Force re-render
     index.forceUpdate(this);
   }
@@ -300,6 +340,21 @@ const ChTestTreeX = class {
       itemInfo[propertyName] = properties[propertyName];
     });
   }
+  updateCheckboxValue(event) {
+    event.stopPropagation();
+    const detail = event.detail;
+    const treeItemId = detail.id;
+    const itemUIModel = this.flattenedCheckboxTreeModel.get(treeItemId);
+    // In some cases, when the `treeModel` and `checked` properties are updated
+    // outside of the tree control, some events are fired with undefined references
+    if (!itemUIModel) {
+      return;
+    }
+    const itemInfo = itemUIModel.item;
+    itemInfo.checked = detail.checked;
+    itemInfo.indeterminate = detail.indeterminate;
+    this.emitCheckedItemsChange();
+  }
   loadLazyChildrenHandler(event) {
     if (!this.lazyLoadTreeItemsCallback) {
       return;
@@ -343,11 +398,26 @@ const ChTestTreeX = class {
       }
     });
   }
+  handleOpenReference(event) {
+    event.stopPropagation();
+    this.itemOpenReference.emit(event.detail);
+  }
+  emitCheckedItemsChange() {
+    // New copy of the checked items
+    const allItemsWithCheckbox = new Map(this.flattenedCheckboxTreeModel);
+    // Update the checked value if not defined
+    allItemsWithCheckbox.forEach(itemUIModel => {
+      var _a;
+      var _b;
+      (_a = (_b = itemUIModel.item).checked) !== null && _a !== void 0 ? _a : (_b.checked = this.checked);
+    });
+    this.checkedItemsChange.emit(allItemsWithCheckbox);
+  }
   flattenSubModel(model) {
     const items = model.items;
     if (!items) {
       // Make sure that subtrees don't have an undefined array
-      if (model.leaf === false) {
+      if (model.leaf !== true) {
         model.items = [];
       }
       return;
@@ -363,14 +433,21 @@ const ChTestTreeX = class {
   }
   flattenModel() {
     this.flattenedTreeModel.clear();
-    this.flattenedLazyTreeModel.clear();
+    this.flattenedCheckboxTreeModel.clear();
+    this.selectedItems.clear();
+    // The model was updated at runtime, so we need to clear the references
+    if (this.treeRef) {
+      this.treeRef.clearSelectedItemsInfo();
+    }
     this.flattenSubModel({ id: null, caption: null, items: this.treeModel });
+    // Re-sync checked items
+    this.emitCheckedItemsChange();
   }
   componentWillLoad() {
     this.flattenModel();
   }
   render() {
-    return (index.h(index.Host, null, index.h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0)))));
+    return (index.h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0))));
   }
   static get watchers() { return {
     "treeModel": ["handleTreeModelChange"]

package/dist/cjs/ch-tooltip.cjs.entry.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a32426a.js');
+const helpers = require('./helpers-291cb1cb.js');
+
+const tooltipCss = "*,::after,::before{box-sizing:border-box}ch-tooltip{--ch-tooltip-separation:12px;--ch-tooltip-separation-x:var(--ch-tooltip-separation);--ch-tooltip-separation-y:var(--ch-tooltip-separation);--ch-tooltip-arrow-size:10px;--ch-tooltip-based:calc( 1px - var(--ch-tooltip-arrow-size));--ch-tooltip-centered:calc( 50% - var(--ch-tooltip-arrow-size) / 2);--ch-tooltip-75:calc( 75% - var(--ch-tooltip-arrow-size) / 2);--ch-tooltip-25:calc( 25% - var(--ch-tooltip-arrow-size) / 2);display:flex;position:relative;width:100%;height:100%}ch-tooltip:not([hidden]){display:contents}ch-window[y-align=outside-start]{--ch-window-separation:var(--ch-tooltip-separation-y);--ch-window-separation-y:calc(var(--ch-tooltip-separation-y) * -1)}ch-window[y-align=outside-end]{--ch-window-separation:var(--ch-tooltip-separation-y);--ch-window-separation-y:var(--ch-tooltip-separation-y)}ch-window[x-align=outside-start]+:not(ch-window[y-align=outside-start],ch-window[y-align=outside-end]){--ch-window-separation:var(--ch-tooltip-separation-x);--ch-window-separation-x:calc(var(--ch-tooltip-separation-x) * -1)}ch-window[x-align=outside-end]+:not(ch-window[y-align=outside-start],ch-window[y-align=outside-end]){--ch-window-separation:var(--ch-tooltip-separation-x);--ch-window-separation-x:var(--ch-tooltip-separation-x)}ch-window[y-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-end] .tooltip-content::after{clip-path:polygon(0 0, 50% 100%, 100% 0);inset-block-end:var(--ch-tooltip-based)}ch-window[y-align=outside-start][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-start][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-end][x-align=outside-start] .tooltip-content::after{inset-inline-end:0}ch-window[y-align=outside-start][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-start][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-end][x-align=outside-end] .tooltip-content::after{inset-inline-start:0}ch-window[y-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-start] .tooltip-content::after{clip-path:polygon(50% 0, 100% 100%, 0 100%);inset-block-start:var(--ch-tooltip-based)}ch-window[y-align=outside-end][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-end][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-start][x-align=outside-start] .tooltip-content::after{inset-inline-end:0}ch-window[y-align=outside-end][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-end][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-start][x-align=outside-end] .tooltip-content::after{inset-inline-start:0}ch-window[x-align=outside-start] .tooltip-content::after{clip-path:polygon(100% 50%, 0 0, 0 100%);inset-inline-end:var(--ch-tooltip-based)}ch-window[x-align=outside-end] .tooltip-content::after{clip-path:polygon(100% 0, 0 50%, 100% 100%);inset-inline-start:var(--ch-tooltip-based)}ch-window[x-align=center] .tooltip-content::after{inset-inline-start:var(--ch-tooltip-centered)}ch-window[x-align=inside-start] .tooltip-content::after{inset-inline-start:var(--ch-tooltip-75)}ch-window[x-align=inside-end] .tooltip-content::after{inset-inline-start:var(--ch-tooltip-25)}ch-window[y-align=inside-start] .tooltip-content::after{inset-block-start:var(--ch-tooltip-75)}ch-window[y-align=center] .tooltip-content::after{inset-block-start:var(--ch-tooltip-centered)}ch-window[y-align=inside-end] .tooltip-content::after{inset-block-start:var(--ch-tooltip-25)}.tooltip-content::after{content:\" \";position:absolute;background-color:inherit;width:var(--ch-tooltip-arrow-size);height:var(--ch-tooltip-arrow-size)}";
+
+const mapTooltipAlignToChWindowAlign = {
+  OutsideStart: "outside-start",
+  InsideStart: "inside-start",
+  Center: "center",
+  InsideEnd: "inside-end",
+  OutsideEnd: "outside-end"
+};
+const EXPORT_PARTS = "window:section,mask";
+const ChTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Determines if the window and the tooltip is hidden or visible.
+     * Inherited from ch-window.
+     */
+    this.hidden = true;
+    /**
+     * Specifies the tooltip description.
+     */
+    this.tooltipId = "Tooltip";
+    /**
+     * Specifies the delay (in ms)
+     * for the tooltip to be displayed.
+     */
+    this.delay = 100;
+    /**
+     * Specifies the position of the tooltip relative to
+     * the container element.
+     */
+    this.position = "OutsideStart_Center";
+    this.showWithDelay = () => {
+      setTimeout(() => {
+        this.hidden = false;
+      }, this.delay);
+    };
+    this.handleEnter = () => {
+      if (!this.hidden) {
+        return;
+      }
+      this.showWithDelay();
+    };
+    this.handleLeave = () => {
+      if (this.container === helpers.focusComposedPath()[0]) {
+        this.hidden = false;
+      }
+      this.hidden = true;
+    };
+    this.addListeners = () => {
+      this.container.addEventListener("focus", this.handleEnter);
+      this.container.addEventListener("focusout", this.handleLeave);
+      this.container.addEventListener("mouseenter", this.handleEnter);
+      this.container.addEventListener("mouseleave", this.handleLeave);
+    };
+    this.removeListeners = () => {
+      this.container.removeEventListener("focus", this.handleEnter);
+      this.container.removeEventListener("focusout", this.handleLeave);
+      this.container.removeEventListener("mouseenter", this.handleEnter);
+      this.container.removeEventListener("mouseleave", this.handleLeave);
+    };
+  }
+  componentDidLoad() {
+    this.container = document.querySelector('[slot="container"] > :first-child');
+    this.addListeners();
+  }
+  disconnectedCallback() {
+    this.removeListeners();
+  }
+  render() {
+    const aligns = this.position.split("_");
+    const alignX = aligns[0];
+    const alignY = aligns[1];
+    return (index.h(index.Host, null, index.h("slot", { name: "container" }), index.h("ch-window", { exportparts: EXPORT_PARTS, "show-header": false, "show-footer": false, modal: false, "close-on-escape": true, hidden: this.hidden, container: this.container, xAlign: mapTooltipAlignToChWindowAlign[alignX], yAlign: mapTooltipAlignToChWindowAlign[alignY] }, index.h("div", { role: "tooltip", class: "tooltip-content", id: this.tooltipId }, index.h("slot", { name: "content" })))));
+  }
+};
+ChTooltip.style = tooltipCss;
+
+exports.ch_tooltip = ChTooltip;

package/dist/cjs/{config-082c7c76.js → config-149ec5fe.js}

@@ -3,7 +3,15 @@
 /* The purpose of config is to provide a simple way to change options/settings that are generally applied on all the components*/
 const config = {
   // tooltip is a property that exists on some gemini controls. When set to true, it will display the error/warning/success message (if any) by using a tooltip, instead of displaying the message under the control. The tooltip prevents changes on the component total height, which is desired.
-  tooltip: true
+  tooltip: true,
+  gxgMessage: {
+    common: {
+      type: "text-regular",
+      textAlign: "center",
+      padding: "m",
+      maxWidth: "200px"
+    }
+  }
 };
 
 exports.config = config;