@genexus/genexus-ide-ui 0.0.70 → 0.0.72

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

@@ -197,8 +197,8 @@ const ChTreeView = class {
       this.needForRAF = false; // No need to call RAF up until next frame
       requestAnimationFrame(() => {
         this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
-        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageX}px`);
-        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageY}px`);
+        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.clientX}px`);
+        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.clientY}px`);
       });
     };
     this.fixScrollPositionOnDrag = () => {
@@ -567,7 +567,7 @@ const ChTreeView = class {
 };
 ChTreeView.style = treeViewCss;
 
-const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 2)\n  );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) )}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--ch-tree-view-item-distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__expandable-button-width) - 2px )}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
+const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 2)\n  );display:grid;grid-template-rows:min-content}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) )}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--ch-tree-view-item-distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__expandable-button-width) - 2px )}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
 
 const resetDragImage = new Image();
 const DISTANCE_TO_CHECKBOX_CUSTOM_VAR = "--ch-tree-view-item-distance-to-checkbox";
@@ -1166,12 +1166,12 @@ const ChTreeViewItem = class {
 };
 ChTreeViewItem.style = treeViewItemCss;
 
-const filterWithCamelCase = (stringToFilter, filter, camelCase) => camelCase
+const filterWithCase = (stringToFilter, filter, matchCase) => matchCase
   ? stringToFilter.includes(filter)
   : stringToFilter.toLowerCase().includes(filter.toLowerCase());
-const filterWithString = (stringToFilter, filter, filterOptions) => filterOptions.regularExpression
+const filterWithString = (stringToFilter, filter, filterOptions) => (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.regularExpression)
   ? stringToFilter.match(filter) !== null
-  : filterWithCamelCase(stringToFilter, filter, filterOptions.camelCase);
+  : filterWithCase(stringToFilter, filter, filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.matchCase);
 const filterDictionary = {
   caption: (item, filterInfo) => {
     var _a;
@@ -1237,13 +1237,16 @@ function getImage(name, gxImageConstructor) {
     return gximage;
   }
 }
-const fromGxImageToURL = (image, Settings, gxImageConstructor) => {
+const fromGxImageToURL = (gxImage, Settings, gxImageConstructor) => {
+  if (!gxImage) {
+    return;
+  }
   let url = "";
-  if (image.id) {
-    url = getImage(image.id, gxImageConstructor).uri;
+  if (gxImage.id) {
+    url = getImage(gxImage.id, gxImageConstructor).uri;
   }
   else {
-    url = image.uri;
+    url = gxImage.uri;
   }
   if (!url) {
     return "";
@@ -1308,6 +1311,17 @@ const GXRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
         ? subModel.id === itemModel.lastItemId
         : index === itemModel.items.length - 1), level + 1))));
 };
+const defaultSortItemsCallback = (subModel) => {
+  subModel.sort((a, b) => {
+    if (a.order < b.order) {
+      return -1;
+    }
+    if (a.order > b.order) {
+      return 0;
+    }
+    return a.caption <= b.caption ? -1 : 0;
+  });
+};
 const ChTreeViewRender = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -1401,6 +1415,10 @@ const ChTreeViewRender = class {
      * lines.
      */
     this.showLines = "none";
+    /**
+     * Callback that is executed when the treeModel is changed to order its items.
+     */
+    this.sortItemsCallback = defaultSortItemsCallback;
     /**
      * 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
@@ -1466,10 +1484,6 @@ const ChTreeViewRender = class {
       this.itemContextmenu.emit(event.detail);
     };
     this.handleItemsDropped = (event) => {
-      if (!this.dropItemsCallback) {
-        return;
-      }
-      event.stopPropagation();
       const dataTransferInfo = event.detail;
       const newContainer = dataTransferInfo.newContainer;
       const newParentId = newContainer.id;
@@ -1478,55 +1492,24 @@ const ChTreeViewRender = class {
         return;
       }
       const draggedItems = dataTransferInfo.draggedItems;
-      if (draggedItems.length === 0) {
+      if (draggedItems.length === 0 || !this.dropItemsCallback) {
         return;
       }
+      event.stopPropagation();
       const promise = this.dropItemsCallback(dataTransferInfo);
       this.waitDropProcessing = true;
       promise.then(async (response) => {
+        this.dropItems(response.acceptDrop, dataTransferInfo, response.items);
         this.waitDropProcessing = false;
-        if (!response.acceptDrop) {
-          return;
-        }
-        const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
-        // Only move the items to the new parent, keeping the state
-        if (dataTransferInfo.dropInTheSameTree) {
-          // Add the UI models to the new container and remove the UI models from
-          // the old containers
-          draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
-          // When the selected items are moved, the tree must remove its internal
-          // state to not have undefined references
-          if (dataTransferInfo.draggingSelectedItems) {
-            await this.treeRef.clearSelectedItemsInfo();
-          }
-        }
-        // Add the new items
-        else {
-          if (response.items == null) {
-            return;
-          }
-          // Add new items to the parent
-          newParentUIModel.items.push(...response.items);
-          // Flatten the new UI models
-          response.items.forEach(this.flattenItemUIModel(newParentUIModel));
-        }
-        this.sortItems(newParentUIModel.items);
-        // Open the item to visualize the new subitems
-        newParentUIModel.expanded = true;
-        // Re-sync checked items
-        this.emitCheckedItemsChange();
-        // Update filters
-        this.processFilters();
-        // There is no need to force and update, since the waitDropProcessing
-        // prop was modified
       });
     };
     this.moveItemToNewParent = (newParentUIModel) => (dataTransferInfo) => {
       const itemUIModelExtended = this.flattenedTreeModel.get(dataTransferInfo.id);
       const item = itemUIModelExtended.item;
       const oldParentItem = itemUIModelExtended.parentItem;
-      // Remove the UI model from the previous parent
-      oldParentItem.items.splice(oldParentItem.items.indexOf(item), 1);
+      // Remove the UI model from the previous parent. The equality function
+      // must be by index, not by object reference
+      oldParentItem.items.splice(oldParentItem.items.findIndex(el => el.id === item.id), 1);
       // Add the UI Model to the new parent
       newParentUIModel.items.push(item);
       // Reference the new parent in the item
@@ -1585,6 +1568,47 @@ const ChTreeViewRender = class {
   handleTreeModelChange() {
     this.flattenModel();
   }
+  /**
+   * Given the drop accepting, the data transfer info and the external items,
+   * it process the drops of the items in the tree.
+   */
+  async dropItems(acceptDrop, dataTransferInfo, items) {
+    if (!acceptDrop) {
+      return;
+    }
+    const newParentId = dataTransferInfo.newContainer.id;
+    const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
+    // Only move the items to the new parent, keeping the state
+    if (dataTransferInfo.dropInTheSameTree) {
+      // Add the UI models to the new container and remove the UI models from
+      // the old containers
+      dataTransferInfo.draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
+      // When the selected items are moved, the tree must remove its internal
+      // state to not have undefined references
+      if (dataTransferInfo.draggingSelectedItems) {
+        await this.treeRef.clearSelectedItemsInfo();
+      }
+    }
+    // Add the new items
+    else {
+      if (items == null) {
+        return;
+      }
+      // Add new items to the parent
+      newParentUIModel.items.push(...items);
+      // Flatten the new UI models
+      items.forEach(this.flattenItemUIModel(newParentUIModel));
+    }
+    this.sortItems(newParentUIModel.items);
+    // Open the item to visualize the new subitems
+    newParentUIModel.expanded = true;
+    // Re-sync checked items
+    this.emitCheckedItemsChange();
+    // Update filters
+    this.processFilters();
+    // Force re-render
+    index.forceUpdate(this);
+  }
   /**
    * Given an item id, an array of items to add, the download status and the
    * lazy state, updates the item's UI Model.

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

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f9bb1815.js');
+const helpers = require('./helpers-291cb1cb.js');
+
+const CH_SHORTCUTS = new Map();
+function loadShortcuts(name, root, shortcuts) {
+  shortcuts.forEach(shortcut => {
+    const keyShortcuts = parseKeyShortcuts(shortcut.keyShortcuts);
+    keyShortcuts.forEach(keyShortcut => {
+      CH_SHORTCUTS.set(normalize(keyShortcut.ctrl, keyShortcut.alt, keyShortcut.shift, keyShortcut.meta, keyShortcut.key), {
+        name,
+        root,
+        shortcut
+      });
+    });
+  });
+  addListener();
+}
+function unloadShortcuts(name) {
+  const removeKeyShortcuts = [];
+  CH_SHORTCUTS.forEach((shortcutMap, key) => {
+    if (shortcutMap.name === name) {
+      removeKeyShortcuts.push(key);
+    }
+  });
+  removeKeyShortcuts.forEach(key => CH_SHORTCUTS.delete(key));
+  removeListener();
+}
+function getShortcuts() {
+  return Array.from(CH_SHORTCUTS.values())
+    .filter(shortcutMap => {
+    var _a;
+    return !((_a = shortcutMap.shortcut.conditions) === null || _a === void 0 ? void 0 : _a.focusInclude);
+  })
+    .map(shortcutMap => ({
+    element: querySelectorPlus(shortcutMap.shortcut.selector, shortcutMap.root),
+    keyShortcuts: shortcutMap.shortcut.keyShortcuts,
+    legendPosition: shortcutMap.shortcut.legendPosition
+  }));
+}
+function addListener() {
+  if (CH_SHORTCUTS.size > 0) {
+    window.addEventListener("keydown", keydownHandler, { capture: true });
+  }
+}
+function removeListener() {
+  if (CH_SHORTCUTS.size === 0) {
+    window.removeEventListener("keydown", keydownHandler, { capture: true });
+  }
+}
+function keydownHandler(eventInfo) {
+  const shortcutMap = CH_SHORTCUTS.get(normalize(eventInfo.ctrlKey, eventInfo.altKey, eventInfo.shiftKey, eventInfo.metaKey, eventInfo.key));
+  if (shortcutMap && conditions(shortcutMap)) {
+    const element = querySelectorPlus(shortcutMap.shortcut.selector, shortcutMap.root);
+    if (element) {
+      switch (shortcutMap.shortcut.action) {
+        case "click":
+          element.dispatchEvent(new Event("click"));
+          break;
+        default:
+          element.focus();
+      }
+      if (shortcutMap.shortcut.preventDefault !== false) {
+        eventInfo.preventDefault();
+      }
+    }
+  }
+}
+function parseKeyShortcuts(value = "") {
+  return value.split(" ").map(item => {
+    const match = item.match(/(?:(?<ctrl>Ctrl)?(?<alt>Alt)?(?<shift>Shift)?(?<meta>Meta)?\+?)*(?<key>.*)?/i);
+    if (match.groups.key !== "") {
+      return {
+        ctrl: match.groups.ctrl !== undefined,
+        alt: match.groups.alt !== undefined,
+        shift: match.groups.shift !== undefined,
+        meta: match.groups.meta !== undefined,
+        key: match.groups.key
+      };
+    }
+  });
+}
+function normalize(ctrl, alt, shift, meta, key) {
+  return [
+    ctrl ? "Ctrl" : null,
+    alt ? "Alt" : null,
+    shift ? "Shift" : null,
+    meta ? "Meta" : null,
+    key ? key.charAt(0).toUpperCase() + key.slice(1) : null
+  ]
+    .filter(element => {
+    return element !== null;
+  })
+    .join("+");
+}
+function conditions(shortcutMap) {
+  var _a, _b, _c, _d;
+  const focus = helpers.focusComposedPath();
+  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));
+  }
+  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));
+  }
+  return true;
+}
+function querySelectorPlus(selector, root) {
+  const querySelectorDeep = (element, parts) => {
+    const shadow = element.shadowRoot;
+    const partList = parts.split(" ");
+    const partElement = shadow.querySelector(partList.map(partName => `[part~="${partName}"]`).join(""));
+    if (partElement) {
+      return partElement;
+    }
+    const exportPartElement = shadow.querySelector(partList.map(partName => `[exportparts*="${partName}"]`).join(""));
+    if (exportPartElement) {
+      const exportPartList = [];
+      const exportparts = exportPartElement.getAttribute("exportparts");
+      partList.forEach(partItem => {
+        const exportPartName = exportparts.match(`(?:([\\w-]+):)?(${partItem})`)[1];
+        if (exportPartName) {
+          exportPartList.push(exportPartName);
+        }
+      });
+      if (partList.length === exportPartList.length) {
+        return querySelectorDeep(exportPartElement, exportPartList.join(" "));
+      }
+    }
+    return null;
+  };
+  if (selector.includes("::part")) {
+    const selectorItems = selector.match("(.*)::part\\(([^)]+)\\)");
+    const entity = selectorItems[1];
+    const partName = selectorItems[2];
+    return querySelectorDeep(root.querySelector(entity), partName);
+  }
+  else {
+    return root.querySelector(selector);
+  }
+}
+
+const chShortcutsCss = ":host{display:contents}";
+
+const ChShortcuts = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.showShortcuts = false;
+    this.showKey = "F10";
+    this.windowClosedHandler = () => {
+      this.showShortcuts = false;
+    };
+  }
+  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);
+          });
+        }
+      });
+    }
+  }
+  disconnectedCallback() {
+    unloadShortcuts(this.src);
+  }
+  windowKeyDownHandler(eventInfo) {
+    if (eventInfo.key === this.showKey) {
+      this.showShortcuts = !this.showShortcuts;
+      eventInfo.preventDefault();
+    }
+  }
+  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))));
+  }
+  render() {
+    return index.h(index.Host, null, this.showShortcuts && this.renderShortcuts());
+  }
+  get el() { return index.getElement(this); }
+};
+ChShortcuts.style = chShortcutsCss;
+
+exports.ch_shortcuts = ChShortcuts;