@genexus/genexus-ide-ui 0.0.85 → 0.0.86

package/dist/components/ch-action-group-render.js

@@ -0,0 +1,175 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { f as fromGxImageToURL } from './genexus-implementation.js';
+import { d as defineCustomElement$7 } from './action-group.js';
+import { d as defineCustomElement$6 } from './action-group-item.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './dropdown-item.js';
+import { d as defineCustomElement$3 } from './ch-window2.js';
+import { d as defineCustomElement$2 } from './ch-window-close2.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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)));
+  }
+  static get style() { return actionGroupRenderCss; }
+}, [0, "ch-action-group-render", {
+    "buttonLabel": [1, "button-label"],
+    "cssClass": [1, "css-class"],
+    "expandBehavior": [1, "expand-behavior"],
+    "gxImageConstructor": [16],
+    "gxSettings": [8, "gx-settings"],
+    "itemClickCallback": [16],
+    "itemsOverflowBehavior": [1, "items-overflow-behavior"],
+    "model": [16],
+    "openOnFocus": [4, "open-on-focus"],
+    "moreActionsDropdownPosition": [1, "more-actions-dropdown-position"],
+    "separation": [2],
+    "useGxRender": [4, "use-gx-render"],
+    "displayedItemsCount": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-action-group-render", "ch-action-group", "ch-action-group-item", "ch-dropdown", "ch-dropdown-item", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-action-group-render":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChActionGroupRender$1);
+      }
+      break;
+    case "ch-action-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ch-action-group-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ch-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ch-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChActionGroupRender = ChActionGroupRender$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChActionGroupRender, defineCustomElement };

package/dist/components/ch-dropdown-item-separator.js

@@ -1,4 +1,31 @@
-import { C as ChDropDownItemSeparator, d as defineCustomElement$1 } from './dropdown-item-separator.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dropdownItemSeparatorCss = ":host{display:flex;height:1px;background-color:#99999980;margin-block:2px}";
+
+const ChDropDownItemSeparator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return h(Host, { role: "separator" });
+  }
+  static get style() { return dropdownItemSeparatorCss; }
+}, [1, "ch-dropdown-item-separator"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-dropdown-item-separator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-dropdown-item-separator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChDropDownItemSeparator);
+      }
+      break;
+  } });
+}
 
 const ChDropdownItemSeparator = ChDropDownItemSeparator;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ch-dropdown-render.js

@@ -0,0 +1,121 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { f as fromGxImageToURL } from './genexus-implementation.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './dropdown-item.js';
+import { d as defineCustomElement$3 } from './ch-window2.js';
+import { d as defineCustomElement$2 } from './ch-window-close2.js';
+
+const dropdownRenderCss = "ch-dropdown-render{display:contents}";
+
+const DEFAULT_DROPDOWN_ITEM_CLASS = "dropdown-item";
+const ChDropdownRender$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get style() { return dropdownRenderCss; }
+}, [4, "ch-dropdown-render", {
+    "buttonLabel": [1, "button-label"],
+    "cssClass": [1, "css-class"],
+    "expandBehavior": [1, "expand-behavior"],
+    "gxImageConstructor": [16],
+    "gxSettings": [8, "gx-settings"],
+    "itemClickCallback": [16],
+    "model": [16],
+    "openOnFocus": [4, "open-on-focus"],
+    "position": [1],
+    "useGxRender": [4, "use-gx-render"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-dropdown-render", "ch-dropdown", "ch-dropdown-item", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-dropdown-render":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChDropdownRender$1);
+      }
+      break;
+    case "ch-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ch-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChDropdownRender = ChDropdownRender$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChDropdownRender, defineCustomElement };

package/dist/components/ch-shortcuts2.js

@@ -9,7 +9,8 @@ function loadShortcuts(name, root, shortcuts) {
   shortcuts.forEach(shortcut => {
     const keyShortcuts = parseKeyShortcuts(shortcut.keyShortcuts);
     keyShortcuts.forEach(keyShortcut => {
-      SHORTCUTS.set(normalize(keyShortcut.ctrl, keyShortcut.alt, keyShortcut.shift, keyShortcut.meta, keyShortcut.key), {
+      const normalizedKeyShortcut = normalize(keyShortcut.ctrl, keyShortcut.alt, keyShortcut.shift, keyShortcut.meta, keyShortcut.key);
+      SHORTCUTS.set(normalizedKeyShortcut, {
         name,
         root,
         shortcut
@@ -28,11 +29,12 @@ function unloadShortcuts(name) {
   removeKeyShortcuts.forEach(key => SHORTCUTS.delete(key));
   removeListener();
 }
-function getShortcuts() {
+function getShortcuts(name) {
   return Array.from(SHORTCUTS.values())
     .filter(shortcutMap => {
     var _a;
-    return !((_a = shortcutMap.shortcut.conditions) === null || _a === void 0 ? void 0 : _a.focusInclude);
+    return (shortcutMap.name === name &&
+      !((_a = shortcutMap.shortcut.conditions) === null || _a === void 0 ? void 0 : _a.focusInclude));
   })
     .map(shortcutMap => ({
     element: querySelectorPlus(shortcutMap.shortcut.selector, shortcutMap.root),
@@ -58,27 +60,33 @@ function keydownHandler(eventInfo) {
   }
 }
 function triggerShortcut(eventInfo) {
-  const shortcutMap = SHORTCUTS.get(normalize(eventInfo.ctrlKey, eventInfo.altKey, eventInfo.shiftKey, eventInfo.metaKey, eventInfo.key));
-  if (shortcutMap && conditions(shortcutMap)) {
+  const shortcut = normalize(eventInfo.ctrlKey, eventInfo.altKey, eventInfo.shiftKey, eventInfo.metaKey, eventInfo.key);
+  const shortcutMap = SHORTCUTS.get(shortcut);
+  const focus = focusComposedPath();
+  if (shortcutMap && conditions(shortcutMap, focus)) {
     const element = querySelectorPlus(shortcutMap.shortcut.selector, shortcutMap.root);
-    if (element) {
+    const keyShortcutPressedEvent = createEvent(shortcut, shortcutMap.shortcut.id, element, focus);
+    if (shortcutMap.root.dispatchEvent(keyShortcutPressedEvent)) {
       switch (shortcutMap.shortcut.action) {
         case "click":
-          element.dispatchEvent(new Event("click"));
+          element === null || element === void 0 ? void 0 : element.dispatchEvent(new Event("click"));
           break;
         default:
-          element.focus();
+          element === null || element === void 0 ? void 0 : element.focus();
       }
       if (shortcutMap.shortcut.preventDefault !== false) {
         eventInfo.preventDefault();
       }
     }
+    else {
+      eventInfo.preventDefault();
+    }
   }
   return shortcutMap;
 }
 function parseKeyShortcuts(value = "") {
-  return value.split(" ").map(item => {
-    return item.split("+").reduce((keyShortcut, key) => {
+  return value.split(/(?<!(?:[+]|^))\s/).map(item => {
+    return item.split(/(?<!(?:[+]|^))[+]/).reduce((keyShortcut, key) => {
       switch (key.toLowerCase()) {
         case "ctrl":
           keyShortcut.ctrl = true;
@@ -118,17 +126,40 @@ function normalize(ctrl, alt, shift, meta, key) {
   })
     .join("+");
 }
-function conditions(shortcutMap) {
-  var _a, _b, _c, _d;
-  const focus = focusComposedPath();
+function conditions(shortcutMap, focus) {
+  var _a, _b;
   if ((_a = shortcutMap.shortcut.conditions) === null || _a === void 0 ? void 0 : _a.focusInclude) {
-    return Array.from(shortcutMap.root.querySelectorAll((_b = shortcutMap.shortcut.conditions) === null || _b === void 0 ? void 0 : _b.focusInclude)).some((el) => focus.includes(el));
+    return querySelectorAllPlus(shortcutMap.shortcut.conditions.focusInclude, shortcutMap.root).some((el) => focus.includes(el));
   }
-  if ((_c = shortcutMap.shortcut.conditions) === null || _c === void 0 ? void 0 : _c.focusExclude) {
-    return !Array.from(shortcutMap.root.querySelectorAll((_d = shortcutMap.shortcut.conditions) === null || _d === void 0 ? void 0 : _d.focusExclude)).some((el) => focus.includes(el));
+  if ((_b = shortcutMap.shortcut.conditions) === null || _b === void 0 ? void 0 : _b.focusExclude) {
+    return !querySelectorAllPlus(shortcutMap.shortcut.conditions.focusExclude, shortcutMap.root).some((el) => focus.includes(el));
   }
   return true;
 }
+function createEvent(keyShortcut, id, target, focusComposedPath) {
+  return new CustomEvent("keyShortcutPressed", {
+    bubbles: true,
+    cancelable: true,
+    composed: false,
+    detail: {
+      keyShortcut,
+      id: id,
+      target,
+      focusComposedPath
+    }
+  });
+}
+function querySelectorAllPlus(selector, root) {
+  var _a;
+  return ((_a = selector === null || selector === void 0 ? void 0 : selector.split(",").map(selectorItem => {
+    if (selector.includes("::part")) {
+      return querySelectorPlus(selectorItem, root);
+    }
+    else {
+      return Array.from(root.querySelectorAll(selector));
+    }
+  }).flat()) !== null && _a !== void 0 ? _a : []);
+}
 function querySelectorPlus(selector, root) {
   const querySelectorDeep = (element, parts) => {
     const shadow = element.shadowRoot;
@@ -153,7 +184,7 @@ function querySelectorPlus(selector, root) {
     }
     return null;
   };
-  if (selector.includes("::part")) {
+  if (selector === null || selector === void 0 ? void 0 : selector.includes("::part")) {
     const selectorItems = selector.match("(.*)::part\\(([^)]+)\\)");
     const entity = selectorItems[1];
     const partName = selectorItems[2];
@@ -166,24 +197,44 @@ function querySelectorPlus(selector, root) {
 
 const chShortcutsCss = ":host{display:contents}";
 
+const KEY_SYMBOL = {
+  " ": "\u2334"
+};
 const ChShortcuts = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
     this.showShortcuts = false;
+    /**
+     * Key to show shortcut tooltips.
+     */
     this.showKey = "F10";
+    /**
+     * Suspend shortcuts.
+     */
+    this.suspend = false;
     this.windowClosedHandler = () => {
       this.showShortcuts = false;
     };
   }
+  suspendHandler() {
+    if (this.suspend) {
+      unloadShortcuts(this.src);
+    }
+    else {
+      const root = this.el.getRootNode();
+      loadShortcuts(this.src, root, this.shortcuts);
+    }
+  }
   componentDidLoad() {
     if (this.src) {
       fetch(this.src).then(response => {
         if (response.ok) {
           response.json().then(json => {
             const root = this.el.getRootNode();
-            loadShortcuts(this.src, root, json);
+            this.shortcuts = json;
+            loadShortcuts(this.src, root, this.shortcuts);
           });
         }
       });
@@ -193,22 +244,49 @@ const ChShortcuts = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     unloadShortcuts(this.src);
   }
   windowKeyDownHandler(eventInfo) {
+    const modifierKeys = ["Ctrl", "Alt", "Shift", "Meta"];
+    if (eventInfo.repeat || this.suspend) {
+      return;
+    }
     if (eventInfo.key === this.showKey) {
       this.showShortcuts = !this.showShortcuts;
       eventInfo.preventDefault();
     }
+    else if (this.showShortcuts && !modifierKeys.includes(eventInfo.key)) {
+      this.showShortcuts = false;
+    }
   }
   renderShortcuts() {
-    return getShortcuts().map(shortcut => (h("ch-window", { container: shortcut.element, modal: false, hidden: false, closeOnEscape: true, closeOnOutsideClick: true, xAlign: "outside-end", yAlign: "inside-start", onWindowClosed: this.windowClosedHandler, exportparts: "mask:element" }, h("span", { part: "tooltip" }, shortcut.keyShortcuts))));
+    return getShortcuts(this.src)
+      .filter(shortcut => shortcut.element)
+      .map(shortcut => (h("ch-window", { container: shortcut.element, modal: false, hidden: false, closeOnEscape: true, closeOnOutsideClick: true, xAlign: "outside-end", yAlign: "inside-start", onWindowClosed: this.windowClosedHandler, exportparts: "mask:element, main:tooltip" }, this.renderKeyShortcuts(shortcut.keyShortcuts))));
+  }
+  renderKeyShortcuts(keyShortcuts) {
+    return keyShortcuts.split(/(?<!(?:[+]|^))([+\s])/).map((key, i, items) => {
+      var _a;
+      if (key === "+" && i > 0 && items[i - 1] !== "+") {
+        return h("span", { part: "plus" }, "+");
+      }
+      else if (key === " " && i > 0 && items[i - 1] !== "+") {
+        return h("span", { part: "slash" }, "/");
+      }
+      else {
+        return h("kbd", { part: `key` }, (_a = KEY_SYMBOL[key]) !== null && _a !== void 0 ? _a : key);
+      }
+    });
   }
   render() {
     return h(Host, null, this.showShortcuts && this.renderShortcuts());
   }
   get el() { return this; }
+  static get watchers() { return {
+    "suspend": ["suspendHandler"]
+  }; }
   static get style() { return chShortcutsCss; }
 }, [1, "ch-shortcuts", {
     "src": [1],
     "showKey": [1, "show-key"],
+    "suspend": [4],
     "showShortcuts": [32]
   }, [[10, "keydown", "windowKeyDownHandler"]]]);
 function defineCustomElement() {

package/dist/components/combo-box.js

@@ -53,10 +53,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * The presence of this attribute displays a tooltip message, instead of a block message below the control
      */
     this.toolTip = false;
-    /**
-     * If true, it will prevent Enter key propagation only when the list is open. This prop. was created to prevent issues with ch-shortcuts, when an Enter key has to fire a callback on another element (such as a button) but it has to be ignored when the list is open, since an Enter key on a list-box-item, has to select the item only.
-     */
-    this.preventEnterPropagation = false;
     /**
      * The presence of this attribute makes the input disabled
      */
@@ -176,9 +172,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         repositionScroll(this.itemsContainer, this.selectedItem, KeyboardKeys.ARROW_UP);
       }
       else if (e.code === KeyboardKeys.ENTER) {
-        if (this.preventEnterPropagation && this.listIsOpen) {
-          e.stopPropagation();
-        }
         this.hideList();
         this.showAllItems();
       }
@@ -616,6 +609,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     const clearIcon = this.value && !this.disableFilter && !this.disableClear;
     return (h(Host, { class: {
+        "list-is-opem": this.listIsOpen,
         "gxg-combo-box--disabled": this.disableFilter,
         tooltip: this.toolTip,
         large: state.large,
@@ -643,7 +637,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [17, "gxg-combo-box", {
     "popOver": [4, "pop-over"],
     "toolTip": [4, "tool-tip"],
-    "preventEnterPropagation": [4, "prevent-enter-propagation"],
     "fixedIcon": [1, "fixed-icon"],
     "disabled": [4],
     "label": [1],

package/dist/components/dropdown-item.js

@@ -43,7 +43,7 @@ const ChDropDownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     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/components/genexus-implementation.js

@@ -0,0 +1,74 @@
+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;
+  }
+};
+
+export { fromGxImageToURL as f };