@genexus/genexus-ide-ui 0.0.85 → 0.0.87

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

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
+import { f as fromGxImageToURL } from './genexus-implementation.js';
 import { d as defineCustomElement$3 } from './checkbox.js';
 import { d as defineCustomElement$2 } from './tree-view.js';
 import { d as defineCustomElement$1 } from './tree-view-item.js';
@@ -22,7 +23,7 @@ const filterDictionary = {
       !item.indeterminate &&
       ((_b = item.checked) !== null && _b !== void 0 ? _b : filterInfo.defaultChecked);
   },
-  "id-list": (item, filterInfo) => filterInfo.filterList.includes(item.id),
+  list: (item, filterInfo) => filterInfo.filterSet.has(item.id),
   metadata: (item, filterInfo) => {
     var _a;
     return filterInfo.filter
@@ -37,78 +38,11 @@ const filterDictionary = {
       !((_b = item.checked) !== null && _b !== void 0 ? _b : filterInfo.defaultChecked);
   }
 };
-
-const URL_REGEX = /url\((["']?)([^\)]*)\)(?:\s+([\d.]+)x)?/i;
-let computedStyle;
-function normalizeUri(uri) {
-  if (uri.startsWith("data:image/svg+xml;utf8,")) {
-    uri = `data:image/svg+xml;base64,${btoa(uri.slice(24).replace(/\\"/g, '"'))}`;
-  }
-  uri = uri.replace(/\\/g, "");
-  uri = uri.replace(/\s/g, "%20");
-  return uri;
-}
-function getImage(name, gxImageConstructor) {
-  if (!computedStyle) {
-    computedStyle = getComputedStyle(document.documentElement);
-  }
-  let value = computedStyle.getPropertyValue(`--gx-image_${name}`);
-  if (value) {
-    let matches;
-    const gximage = gxImageConstructor(name);
-    while ((matches = value.match(URL_REGEX))) {
-      gximage.densitySet.push({
-        uri: normalizeUri(matches[1] ? matches[2].slice(0, -1) : matches[2]),
-        density: matches[3] ? parseFloat(matches[3]) : 1
-      });
-      value = value.slice(matches[0].length);
-    }
-    if (gximage.densitySet.length > 0) {
-      gximage.uri = gximage.densitySet.reduce((previousValue, currentValue) => {
-        return previousValue.density === 1 ||
-          previousValue.density < currentValue.density
-          ? previousValue
-          : currentValue;
-      }).uri;
-    }
-    return gximage;
-  }
-}
-const fromGxImageToURL = (gxImage, Settings, gxImageConstructor) => {
-  if (!gxImage) {
-    return;
-  }
-  let url = "";
-  if (gxImage.id) {
-    url = getImage(gxImage.id, gxImageConstructor).uri;
-  }
-  else {
-    url = gxImage.uri;
-  }
-  if (!url) {
-    return "";
-  }
-  const baseUrl = Settings.WEBAPP_BASE;
-  const urlLower = url.toLowerCase();
-  if (urlLower.startsWith("assets/")) {
-    // Relative URL to local assets
-    return url;
-  }
-  else if (urlLower.startsWith("http://") ||
-    urlLower.startsWith("https://") ||
-    urlLower.startsWith("blob:") ||
-    urlLower.startsWith("file:") ||
-    urlLower.startsWith("data:")) {
-    // Absolute URL
-    return url;
-  }
-  else if (urlLower.startsWith(Settings.BASE_PATH.toLowerCase())) {
-    // Host relative URL
-    return baseUrl + url.substring(Settings.BASE_PATH.length);
-  }
-  else {
-    return baseUrl + url;
-  }
+const computeFilter = (filterType, item, filterInfo) => {
+  var _a;
+  return ((_a = filterInfo.filterOptions) === null || _a === void 0 ? void 0 : _a.hideMatchesAndShowNonMatches) === true
+    ? !filterDictionary[filterType](item, filterInfo)
+    : filterDictionary[filterType](item, filterInfo);
 };
 
 const treeViewRenderCss = "ch-tree-view-render{display:contents}";
@@ -122,6 +56,11 @@ const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
 const DEFAULT_ORDER_VALUE = 0;
 const DEFAULT_SELECTED_VALUE = false;
+// There are a filter applied and, if the type is "caption" or
+// "metadata", the filter property must be set
+const treeViewHasFilters = (filterType, filter) => filterType !== "none" &&
+  ((filterType !== "caption" && filterType !== "metadata") ||
+    (filter != null && filter.trim() !== ""));
 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 &&
@@ -129,13 +68,13 @@ const defaultRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level)
     itemModel.items.map((subModel, index) => defaultRenderItem(subModel, treeState, treeHasFilter, treeState.showLines !== "none" &&
       // If there is a filter applied in the current list, use the
       // lastItemId value to calculate the last item
-      (treeHasFilter && itemModel.lastItemId !== ""
+      (treeHasFilter && itemModel.lastItemId !== undefined
         ? subModel.id === itemModel.lastItemId
         : index === itemModel.items.length - 1), level + 1))));
 };
 const GXRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
   var _a, _b, _c, _d;
-  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, downloading: itemModel.downloading, dragDisabled: itemModel.dragEnabled != null
+  return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { key: itemModel.id, 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, downloading: itemModel.downloading, dragDisabled: itemModel.dragEnabled != null
       ? !itemModel.dragEnabled
       : treeState.dragDisabled, dropDisabled: itemModel.dropEnabled != null
       ? !itemModel.dropEnabled
@@ -144,7 +83,7 @@ const GXRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
     itemModel.items.map((subModel, index) => GXRenderItem(subModel, treeState, treeHasFilter, treeState.showLines !== "none" &&
       // If there is a filter applied in the current list, use the
       // lastItemId value to calculate the last item
-      (treeHasFilter && itemModel.lastItemId !== ""
+      (treeHasFilter && itemModel.lastItemId !== undefined
         ? subModel.id === itemModel.lastItemId
         : index === itemModel.items.length - 1), level + 1))));
 };
@@ -217,13 +156,12 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.filterDebounce = 250;
     /**
      * This property lets you determine the list of items that will be filtered.
-     * Only works if `filterType = "id-list"`.
+     * Only works if `filterType = "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 = {};
     /**
@@ -236,7 +174,7 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
      * | `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.  |
+     * | `list`   | Show only the items that are contained in the array determinate by the `filterList` property.     |
      * | `none`      | Show all items.                                                                                |
      */
     this.filterType = "none";
@@ -310,7 +248,8 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
         newSelectedItem.expanded = newSelectedItemInfo.expanded;
         this.selectedItems.add(itemId);
       });
-      this.selectedItemsChange.emit(event.detail);
+      const selectedItemsInfo = this._getItemsInfo([...event.detail.keys()]);
+      this.selectedItemsChange.emit(selectedItemsInfo);
     };
     this.handleExpandedItemChange = (event) => {
       const detail = event.detail;
@@ -391,14 +330,14 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
   }
   handleFilterListChange() {
-    if (this.filterType === "id-list") {
+    // Use a Set to efficiently check for ids
+    this.filterListAsSet = new Set(this.filterList);
+    if (this.filterType === "list") {
       this.processFilters();
     }
   }
   handleFilterOptionsChange() {
-    if (this.filterType === "caption" || this.filterType === "metadata") {
-      this.processFilters();
-    }
+    this.processFilters();
   }
   handleFilterTypeChange() {
     this.processFilters();
@@ -447,6 +386,23 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     // Force re-render
     forceUpdate(this);
   }
+  /**
+   * Given a list of ids, it returns an array of the items that exists in the
+   * given list.
+   */
+  async getItemsInfo(itemsId) {
+    return this._getItemsInfo(itemsId);
+  }
+  _getItemsInfo(itemsId) {
+    const treeViewItemsInfo = [];
+    itemsId.forEach(itemId => {
+      const itemUIModel = this.flattenedTreeModel.get(itemId);
+      if (itemUIModel) {
+        treeViewItemsInfo.push(itemUIModel);
+      }
+    });
+    return treeViewItemsInfo;
+  }
   /**
    * Given an item id, an array of items to add, the download status and the
    * lazy state, updates the item's UI Model.
@@ -568,7 +524,9 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
     const itemInfo = itemUIModel.item;
     Object.keys(properties).forEach(propertyName => {
-      itemInfo[propertyName] = properties[propertyName];
+      if (properties[propertyName] !== undefined) {
+        itemInfo[propertyName] = properties[propertyName];
+      }
     });
   }
   updateCheckboxValue(event) {
@@ -675,7 +633,7 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     let aSubItemIsRendered = false;
     // Check if a subitem is rendered
     if (item.leaf !== true && item.items != null) {
-      let lastItemId = "";
+      let lastItemId = undefined;
       item.items.forEach(subItem => {
         const itemSatisfiesFilter = this.filterSubModel(subItem, filterInfo);
         aSubItemIsRendered || (aSubItemIsRendered = itemSatisfiesFilter);
@@ -687,7 +645,7 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
     // The current item is rendered if it satisfies the filter condition or a
     // subitem exists that needs to be rendered
-    const satisfiesFilter = filterDictionary[this.filterType](item, filterInfo) || aSubItemIsRendered;
+    const satisfiesFilter = aSubItemIsRendered || computeFilter(this.filterType, item, filterInfo);
     item.render = satisfiesFilter; // Update item render
     return satisfiesFilter;
   }
@@ -724,8 +682,8 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       defaultCheckbox: this.checkbox,
       defaultChecked: this.checked,
       filter: this.filter,
-      filterList: this.filterList,
-      filterOptions: this.filterOptions
+      filterOptions: this.filterOptions,
+      filterSet: this.filterListAsSet
     });
     // Check if should filter with debounce
     if (processWithDebounce) {
@@ -757,8 +715,7 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
   }
   render() {
-    return (h("ch-tree-view", { 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((itemModel, index) => this.renderItem(itemModel, this, (this.filterType === "caption" || this.filterType === "metadata") &&
-      this.filter != null, this.showLines !== "none" && index === this.treeModel.length - 1, 0))));
+    return (h("ch-tree-view", { 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((itemModel, index) => this.renderItem(itemModel, this, treeViewHasFilters(this.filterType, this.filter), this.showLines !== "none" && index === this.treeModel.length - 1, 0))));
   }
   static get watchers() { return {
     "filter": ["handleFilterChange"],
@@ -796,6 +753,7 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "useGxRender": [4, "use-gx-render"],
     "waitDropProcessing": [32],
     "dropItems": [64],
+    "getItemsInfo": [64],
     "loadLazyContent": [64],
     "scrollIntoVisible": [64],
     "toggleItems": [64],

package/dist/esm/ch-action-group-render.entry.js

@@ -0,0 +1,108 @@
+import { r as registerInstance, h } from './index-0aa3977d.js';
+import { f as fromGxImageToURL } from './genexus-implementation-3b347d88.js';
+
+const actionGroupRenderCss = "ch-action-group-render{display:contents}";
+
+const DEFAULT_ACTION_CLASS = "action-group-item";
+const DEFAULT_SUB_ACTION_CLASS = "dropdown-item";
+const ChActionGroupRender = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.displayedItemsCount = -1;
+    /**
+     * This attribute lets you specify the label for the expandable button.
+     * Important for accessibility.
+     */
+    this.buttonLabel = "Show options";
+    /**
+     * A CSS class to set as the `ch-action-group` element class.
+     */
+    this.cssClass = "action-group";
+    /**
+     * Determine which actions on the expandable button display the dropdown
+     * section.
+     */
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * This attribute determines how items behave when the content of the ActionGroup overflows horizontal. This property is needed
+     * to make the control responsive to changes in the Width of the container of ActionGroup.
+     *
+     * | Value                 | Details                                                                                          |
+     * | --------------------- | ------------------------------------------------------------------------------------------------ |
+     * | `Add Scroll`          | The items of the ActionGroup that overflow horizontally are shown by means of a scroll.          |
+     * | `Multiline`           | The ActionGroup items that overflow horizontally are shown in a second line of the control.      |
+     * | `Responsive Collapse` | The Action Group items, when they start to overflow the control, are placed in the More Actions. |
+     */
+    this.itemsOverflowBehavior = "ResponsiveCollapse";
+    /**
+     * Determine if the dropdown section should be opened when the expandable
+     * button of the control is focused.
+     */
+    this.openOnFocus = false;
+    /**
+     * Specifies the position of the dropdown section that is placed relative to
+     * the more actions button.
+     */
+    this.moreActionsDropdownPosition = "InsideStart_OutsideEnd";
+    /**
+     * Specifies the separation (in pixels) between the expandable button and the
+     * dropdown section of the control.
+     */
+    this.separation = 0;
+    /**
+     * This property is a WA to implement the Tree View as a UC 2.0 in GeneXus.
+     */
+    this.useGxRender = false;
+    // /**
+    //  * Fired when the visibility of the dropdown section is changed
+    //  */
+    // @Event() expandedChange: EventEmitter<boolean>;
+    this.handleItemClick = (target, itemId) => (event) => {
+      this.itemClickCallback(event, target, itemId);
+    };
+    this.renderImg = (img) => this.useGxRender
+      ? fromGxImageToURL(img, this.gxSettings, this.gxImageConstructor)
+      : img;
+    this.renderItem = (responsiveCollapse) => (item, index) => {
+      var _a, _b;
+      return (h("ch-dropdown-item", { slot: "items", key: item.id || item.caption || index, id: item.id, class: item.subActionClass || DEFAULT_SUB_ACTION_CLASS, expandBehavior: this.expandBehavior, href: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, leftImgSrc: this.renderImg(item.startImage), openOnFocus: this.openOnFocus, position: (responsiveCollapse
+          ? item.itemsResponsiveCollapsePosition
+          : item.itemsPosition) || "OutsideEnd_InsideStart", rightImgSrc: this.renderImg(item.endImage), onClick: this.handleItemClick((_b = item.link) === null || _b === void 0 ? void 0 : _b.url, item.id) }, item.caption, item.items != null &&
+        item.items.map(this.renderItem(responsiveCollapse))));
+    };
+    this.firstLevelRenderItem = (item, index) => {
+      var _a, _b;
+      return (h("ch-dropdown-item", { key: item.id || item.caption || index, id: item.id, class: item.actionClass || DEFAULT_ACTION_CLASS, expandBehavior: this.expandBehavior, forceContainingBlock: false, href: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, leftImgSrc: this.renderImg(item.startImage), openOnFocus: this.openOnFocus, position: item.itemsPosition || "Center_OutsideEnd", rightImgSrc: this.renderImg(item.endImage), onClick: this.handleItemClick((_b = item.link) === null || _b === void 0 ? void 0 : _b.url, item.id) }, item.caption, this.itemsOverflowBehavior === "ResponsiveCollapse" &&
+        (this.displayedItemsCount === -1 || index < this.displayedItemsCount) &&
+        item.items != null &&
+        item.items.map(this.renderItem(false)), 
+      // Dummy dropdown item to avoid issues when removing all items from the
+      // first level. E. g., if the first level adds a chevron when the item is
+      // a dropdown, by removing all items the chevron won't be displayed
+      this.itemsOverflowBehavior === "ResponsiveCollapse" &&
+        this.displayedItemsCount !== -1 &&
+        index >= this.displayedItemsCount &&
+        item.items != null &&
+        item.items.length !== 0 && h("ch-dropdown-item", null)));
+    };
+    this.firstLevelRenderCollapsedItem = (item, index) => {
+      var _a, _b;
+      return (h("ch-dropdown-item", { slot: "more-items", key: item.id || item.caption || index, id: item.id, class: item.subActionClass || DEFAULT_SUB_ACTION_CLASS, expandBehavior: this.expandBehavior, href: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, leftImgSrc: this.renderImg(item.startImage), openOnFocus: this.openOnFocus, position: item.itemsResponsiveCollapsePosition || "OutsideEnd_InsideStart", rightImgSrc: this.renderImg(item.endImage), onClick: this.handleItemClick((_b = item.link) === null || _b === void 0 ? void 0 : _b.url, item.id) }, item.caption, item.items != null && item.items.map(this.renderItem(true))));
+    };
+    this.handleDisplayedItemsCountChange = (event) => {
+      this.displayedItemsCount = event.detail;
+    };
+  }
+  render() {
+    return (h("ch-action-group", { buttonLabel: this.buttonLabel, class: this.cssClass || null, expandBehavior: this.expandBehavior, itemsOverflowBehavior: this.itemsOverflowBehavior, moreActionsDropdownPosition: this.moreActionsDropdownPosition, openOnFocus: this.openOnFocus, onDisplayedItemsCountChange: this.handleDisplayedItemsCountChange }, this.model != null &&
+      this.model.map((item, index) => (h("ch-action-group-item", { slot: "items", key: item.id || item.caption || index }, this.firstLevelRenderItem(item, index)))), this.itemsOverflowBehavior === "ResponsiveCollapse" &&
+      this.model != null &&
+      this.model
+        .filter((_, index) => this.displayedItemsCount !== -1 &&
+        index >= this.displayedItemsCount)
+        .map(this.firstLevelRenderCollapsedItem)));
+  }
+};
+ChActionGroupRender.style = actionGroupRenderCss;
+
+export { ChActionGroupRender as ch_action_group_render };

package/dist/esm/ch-checkbox_3.entry.js

@@ -746,15 +746,18 @@ const ChTreeViewItem = class {
       this.selected = true;
       this.selectedItemChange.emit(this.getSelectedInfo(mouseEventModifierKey(event), true));
     };
-    this.getSelectedInfo = (ctrlKeyPressed, selected) => ({
-      ctrlKeyPressed: ctrlKeyPressed,
-      expanded: this.expanded,
-      id: this.el.id,
-      itemRef: this.el,
-      metadata: this.metadata,
-      parentId: this.el.parentElement.id,
-      selected: selected
-    });
+    this.getSelectedInfo = (ctrlKeyPressed, selected) => {
+      var _a;
+      return ({
+        ctrlKeyPressed: ctrlKeyPressed,
+        expanded: this.expanded,
+        id: this.el.id,
+        itemRef: this.el,
+        metadata: this.metadata,
+        parentId: (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.id,
+        selected: selected
+      });
+    };
     this.handleActionDblClick = (event) => {
       event.stopPropagation();
       if (mouseEventModifierKey(event)) {
@@ -866,7 +869,11 @@ const ChTreeViewItem = class {
     });
   }
   handleExpandedChange(isExpanded) {
-    this.lazyLoadItems(isExpanded);
+    // Wait until all properties are updated before lazy loading. Otherwise, the
+    // lazyLoad property could be updated just after the executing of the function
+    setTimeout(() => {
+      this.lazyLoadItems(isExpanded);
+    });
   }
   handleLasItemChange(isLastItem) {
     if (isLastItem && this.showLines) {
@@ -1096,6 +1103,10 @@ const ChTreeViewItem = class {
     if (this.editing) {
       this.removeEditMode(false);
     }
+    // Sync selected state with the main tree
+    if (this.selected) {
+      this.selectedItemChange.emit(this.getSelectedInfo(true, false));
+    }
     this.disconnectObserver();
   }
   render() {

package/dist/esm/ch-dropdown-item.entry.js

@@ -38,7 +38,7 @@ const ChDropDownItem = class {
     this.checkItems = () => {
       this.hasItems = !!this.el.querySelector(`:scope>${DROPDOWN_ITEM}`);
     };
-    this.noItemsRender = () => this.href ? (h("a", { class: "action", part: "action target", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems }))) : (h("button", { class: "action", part: "action button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems })));
+    this.noItemsRender = () => this.href ? (h("a", { class: "action", part: "action link", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems }))) : (h("button", { class: "action", part: "action button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems })));
     this.itemsRender = () => (h("ch-dropdown", { class: "action", exportparts: "expandable-button:action,expandable-button:button,expandable-button:expandable-action,separation,list,section,mask,header,footer,window", expandBehavior: this.expandBehavior, nestedDropdown: true, openOnFocus: this.openOnFocus, position: this.position }, this.dropDownItemContent(), h("slot", { name: "items", slot: "items", onSlotchange: this.checkItems })));
     this.handleActionClick = () => {
       this.actionClick.emit(this.el.id);

package/dist/esm/ch-dropdown-render.entry.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, h, g as getElement } from './index-0aa3977d.js';
+import { f as fromGxImageToURL } from './genexus-implementation-3b347d88.js';
+
+const dropdownRenderCss = "ch-dropdown-render{display:contents}";
+
+const DEFAULT_DROPDOWN_ITEM_CLASS = "dropdown-item";
+const ChDropdownRender = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showHeader = false;
+    this.showFooter = false;
+    /**
+     * This attribute lets you specify the label for the expandable button.
+     * Important for accessibility.
+     */
+    this.buttonLabel = "Show options";
+    /**
+     * A CSS class to set as the `ch-dropdown` element class.
+     */
+    this.cssClass = "dropdown";
+    /**
+     * Determine which actions on the expandable button display the dropdown
+     * section.
+     */
+    this.expandBehavior = "ClickOrHover";
+    /**
+     * Determine if the dropdown section should be opened when the expandable
+     * button of the control is focused.
+     */
+    this.openOnFocus = false;
+    /**
+     * Specifies the position of the dropdown section that is placed relative to
+     * the expandable button.
+     */
+    this.position = "Center_OutsideEnd";
+    /**
+     * This property is a WA to implement the Tree View as a UC 2.0 in GeneXus.
+     */
+    this.useGxRender = false;
+    // /**
+    //  * Fired when the visibility of the dropdown section is changed
+    //  */
+    // @Event() expandedChange: EventEmitter<boolean>;
+    this.handleItemClick = (target, itemId) => (event) => {
+      this.itemClickCallback(event, target, itemId);
+    };
+    this.renderItem = (item) => {
+      var _a, _b;
+      return [
+        h("ch-dropdown-item", { slot: "items", id: item.id, class: item.class || DEFAULT_DROPDOWN_ITEM_CLASS, expandBehavior: this.expandBehavior, href: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, leftImgSrc: this.useGxRender
+            ? fromGxImageToURL(item.startImage, this.gxSettings, this.gxImageConstructor)
+            : item.startImage, openOnFocus: this.openOnFocus, position: item.itemsPosition || "OutsideEnd_InsideStart", rightImgSrc: this.useGxRender
+            ? fromGxImageToURL(item.endImage, this.gxSettings, this.gxImageConstructor)
+            : item.endImage, onClick: this.handleItemClick((_b = item.link) === null || _b === void 0 ? void 0 : _b.url, item.id) }, item.caption, item.items != null && item.items.map(this.renderItem))
+      ];
+    };
+  }
+  componentWillLoad() {
+    this.showHeader = !!this.el.querySelector(':scope>[slot="header"]');
+    this.showFooter = !!this.el.querySelector(':scope>[slot="footer"]');
+  }
+  render() {
+    return (h("ch-dropdown", { buttonLabel: this.buttonLabel, class: this.cssClass || null, expandBehavior: this.expandBehavior, openOnFocus: this.openOnFocus, position: this.position }, h("slot", { name: "action", slot: "action" }), this.showHeader && h("slot", { name: "header", slot: "header" }), this.model != null && this.model.map(this.renderItem), this.showFooter && h("slot", { name: "footer", slot: "footer" })));
+  }
+  get el() { return getElement(this); }
+};
+ChDropdownRender.style = dropdownRenderCss;
+
+export { ChDropdownRender as ch_dropdown_render };