@genexus/genexus-ide-ui 0.0.85 → 0.0.86

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

@@ -0,0 +1,112 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f9bb1815.js');
+const genexusImplementation = require('./genexus-implementation-664b13f0.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) {
+    index.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
+      ? genexusImplementation.fromGxImageToURL(img, this.gxSettings, this.gxImageConstructor)
+      : img;
+    this.renderItem = (responsiveCollapse) => (item, index$1) => {
+      var _a, _b;
+      return (index.h("ch-dropdown-item", { slot: "items", key: item.id || item.caption || index$1, 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$1) => {
+      var _a, _b;
+      return (index.h("ch-dropdown-item", { key: item.id || item.caption || index$1, 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$1 < 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$1 >= this.displayedItemsCount &&
+        item.items != null &&
+        item.items.length !== 0 && index.h("ch-dropdown-item", null)));
+    };
+    this.firstLevelRenderCollapsedItem = (item, index$1) => {
+      var _a, _b;
+      return (index.h("ch-dropdown-item", { slot: "more-items", key: item.id || item.caption || index$1, 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 (index.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$1) => (index.h("ch-action-group-item", { slot: "items", key: item.id || item.caption || index$1 }, this.firstLevelRenderItem(item, index$1)))), this.itemsOverflowBehavior === "ResponsiveCollapse" &&
+      this.model != null &&
+      this.model
+        .filter((_, index) => this.displayedItemsCount !== -1 &&
+        index >= this.displayedItemsCount)
+        .map(this.firstLevelRenderCollapsedItem)));
+  }
+};
+ChActionGroupRender.style = actionGroupRenderCss;
+
+exports.ch_action_group_render = ChActionGroupRender;

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

@@ -750,15 +750,18 @@ const ChTreeViewItem = class {
       this.selected = true;
       this.selectedItemChange.emit(this.getSelectedInfo(helpers.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 (helpers.mouseEventModifierKey(event)) {
@@ -870,7 +873,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) {
@@ -1100,6 +1107,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/cjs/ch-dropdown-item.cjs.entry.js

@@ -42,7 +42,7 @@ const ChDropDownItem = class {
     this.checkItems = () => {
       this.hasItems = !!this.el.querySelector(`:scope>${DROPDOWN_ITEM}`);
     };
-    this.noItemsRender = () => this.href ? (index.h("a", { class: "action", part: "action target", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), index.h("slot", { name: "items", onSlotchange: this.checkItems }))) : (index.h("button", { class: "action", part: "action button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), index.h("slot", { name: "items", onSlotchange: this.checkItems })));
+    this.noItemsRender = () => this.href ? (index.h("a", { class: "action", part: "action link", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), index.h("slot", { name: "items", onSlotchange: this.checkItems }))) : (index.h("button", { class: "action", part: "action button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), index.h("slot", { name: "items", onSlotchange: this.checkItems })));
     this.itemsRender = () => (index.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(), index.h("slot", { name: "items", slot: "items", onSlotchange: this.checkItems })));
     this.handleActionClick = () => {
       this.actionClick.emit(this.el.id);

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

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f9bb1815.js');
+const genexusImplementation = require('./genexus-implementation-664b13f0.js');
+
+const dropdownRenderCss = "ch-dropdown-render{display:contents}";
+
+const DEFAULT_DROPDOWN_ITEM_CLASS = "dropdown-item";
+const ChDropdownRender = class {
+  constructor(hostRef) {
+    index.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 [
+        index.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
+            ? genexusImplementation.fromGxImageToURL(item.startImage, this.gxSettings, this.gxImageConstructor)
+            : item.startImage, openOnFocus: this.openOnFocus, position: item.itemsPosition || "OutsideEnd_InsideStart", rightImgSrc: this.useGxRender
+            ? genexusImplementation.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 (index.h("ch-dropdown", { buttonLabel: this.buttonLabel, class: this.cssClass || null, expandBehavior: this.expandBehavior, openOnFocus: this.openOnFocus, position: this.position }, index.h("slot", { name: "action", slot: "action" }), this.showHeader && index.h("slot", { name: "header", slot: "header" }), this.model != null && this.model.map(this.renderItem), this.showFooter && index.h("slot", { name: "footer", slot: "footer" })));
+  }
+  get el() { return index.getElement(this); }
+};
+ChDropdownRender.style = dropdownRenderCss;
+
+exports.ch_dropdown_render = ChDropdownRender;

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

@@ -11,7 +11,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
@@ -30,11 +31,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),
@@ -60,27 +62,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 = helpers.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;
@@ -120,17 +128,40 @@ function normalize(ctrl, alt, shift, meta, key) {
   })
     .join("+");
 }
-function conditions(shortcutMap) {
-  var _a, _b, _c, _d;
-  const focus = helpers.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;
@@ -155,7 +186,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];
@@ -168,22 +199,42 @@ function querySelectorPlus(selector, root) {
 
 const chShortcutsCss = ":host{display:contents}";
 
+const KEY_SYMBOL = {
+  " ": "\u2334"
+};
 const ChShortcuts = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     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,18 +244,44 @@ const ChShortcuts = class {
     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 => (index.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" }, index.h("span", { part: "tooltip" }, shortcut.keyShortcuts))));
+    return getShortcuts(this.src)
+      .filter(shortcut => shortcut.element)
+      .map(shortcut => (index.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 index.h("span", { part: "plus" }, "+");
+      }
+      else if (key === " " && i > 0 && items[i - 1] !== "+") {
+        return index.h("span", { part: "slash" }, "/");
+      }
+      else {
+        return index.h("kbd", { part: `key` }, (_a = KEY_SYMBOL[key]) !== null && _a !== void 0 ? _a : key);
+      }
+    });
   }
   render() {
     return index.h(index.Host, null, this.showShortcuts && this.renderShortcuts());
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "suspend": ["suspendHandler"]
+  }; }
 };
 ChShortcuts.style = chShortcutsCss;
 
@@ -214,6 +291,7 @@ const GxgShortcuts = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.showKey = "F10";
+    this.suspend = false;
     this.showTooltip = false;
     this.show = false;
   }
@@ -221,7 +299,8 @@ const GxgShortcuts = class {
     this.showTooltip = true;
   }
   render() {
-    return (index.h(index.Host, null, index.h("ch-shortcuts", { src: this.src, showKey: this.showKey })));
+    console.log("render");
+    return (index.h(index.Host, null, index.h("ch-shortcuts", { suspend: this.suspend, src: this.src, showKey: this.showKey })));
   }
 };
 GxgShortcuts.style = shortcutsCss;