@genexus/genexus-ide-ui 0.0.77 → 0.0.79

package/dist/components/gx-ide-team-dev-update-to-revision.js

@@ -1,15 +1,19 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
 import { c as config } from './config.js';
-import { d as defineCustomElement$c } from './icon.js';
-import { d as defineCustomElement$b } from './container.js';
-import { d as defineCustomElement$a } from './title.js';
-import { d as defineCustomElement$9 } from './button.js';
-import { d as defineCustomElement$8 } from './form-radio.js';
-import { d as defineCustomElement$7 } from './form-radio-group.js';
-import { d as defineCustomElement$6 } from './form-text.js';
-import { d as defineCustomElement$5 } from './icon2.js';
-import { d as defineCustomElement$4 } from './gxg-label2.js';
+import { d as defineCustomElement$g } from './icon.js';
+import { d as defineCustomElement$f } from './ch-shortcuts2.js';
+import { d as defineCustomElement$e } from './ch-window2.js';
+import { d as defineCustomElement$d } from './ch-window-close2.js';
+import { d as defineCustomElement$c } from './container.js';
+import { d as defineCustomElement$b } from './title.js';
+import { d as defineCustomElement$a } from './button.js';
+import { d as defineCustomElement$9 } from './form-radio.js';
+import { d as defineCustomElement$8 } from './form-radio-group.js';
+import { d as defineCustomElement$7 } from './form-text.js';
+import { d as defineCustomElement$6 } from './icon2.js';
+import { d as defineCustomElement$5 } from './gxg-label2.js';
+import { d as defineCustomElement$4 } from './shortcuts.js';
 import { d as defineCustomElement$3 } from './title2.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
@@ -23,6 +27,7 @@ const GxIdeTeamDevUpdateToRevision$1 = /*@__PURE__*/ proxyCustomElement(class ex
     this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
     this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
     this.renderedFirstTime = false;
+    this.shortcutsSrc = getAssetPath(`./gx-ide-assets/team-dev-update-to-revision/shortcuts.json`);
     // 9.LOCAL METHODS //
     this.setInitialCheckedRadio = () => {
       if (this.currentRevision === undefined) {
@@ -57,6 +62,7 @@ const GxIdeTeamDevUpdateToRevision$1 = /*@__PURE__*/ proxyCustomElement(class ex
   componentDidLoad() {
     this.componentDidLoadEvent.emit(true);
     this.setInitialCheckedRadio();
+    this.revisionNumberEl.focus();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -75,7 +81,7 @@ const GxIdeTeamDevUpdateToRevision$1 = /*@__PURE__*/ proxyCustomElement(class ex
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("gxg-form-radio-group", null, h("gxg-form-radio", { label: this._componentLocale.options.updateToLatest, value: "updateToLatest", ref: (el) => (this.updateToLatestEl = el), part: "radio-to-latest" }), h("div", { class: "revision-number" }, h("gxg-form-radio", { label: this._componentLocale.options.updateToRevision, value: "updateToRevision", ref: (el) => (this.updateToRevisionEl = el), part: "radio-to-revision" }), h("gxg-form-text", { ref: (el) => (this.revisionNumberEl = el), onFocus: this.updateToRevisionOnFocusHandler, value: this.currentRevision, part: "revision-number" }))), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "update", slot: "footer-end" }, this._componentLocale.footer.btnUpdate)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("gxg-form-radio-group", null, h("gxg-form-radio", { label: this._componentLocale.options.updateToLatest, value: "updateToLatest", ref: (el) => (this.updateToLatestEl = el), part: "radio-to-latest" }), h("div", { class: "revision-number" }, h("gxg-form-radio", { label: this._componentLocale.options.updateToRevision, value: "updateToRevision", ref: (el) => (this.updateToRevisionEl = el), part: "radio-to-revision" }), h("gxg-form-text", { ref: (el) => (this.revisionNumberEl = el), onFocus: this.updateToRevisionOnFocusHandler, value: this.currentRevision, part: "revision-number" }))), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "update", slot: "footer-end" }, this._componentLocale.footer.btnUpdate))), h("gxg-shortcuts", { src: this.shortcutsSrc })));
   }
   static get assetsDirs() { return ["gx-ide-assets/team-dev-update-to-revision"]; }
   get el() { return this; }
@@ -91,7 +97,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-team-dev-update-to-revision", "ch-icon", "gx-ide-container", "gx-ide-title", "gxg-button", "gxg-form-radio", "gxg-form-radio-group", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-title", "gxg-tooltip"];
+  const components = ["gx-ide-team-dev-update-to-revision", "ch-icon", "ch-shortcuts", "ch-window", "ch-window-close", "gx-ide-container", "gx-ide-title", "gxg-button", "gxg-form-radio", "gxg-form-radio-group", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-shortcuts", "gxg-title", "gxg-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-team-dev-update-to-revision":
       if (!customElements.get(tagName)) {
@@ -100,45 +106,65 @@ function defineCustomElement$1() {
       break;
     case "ch-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$g();
+      }
+      break;
+    case "ch-shortcuts":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
       }
       break;
     case "gx-ide-container":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "gx-ide-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "gxg-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "gxg-form-radio":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "gxg-form-radio-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "gxg-form-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "gxg-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-shortcuts":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/components/gx-ide-team-dev-update.js

@@ -288,6 +288,7 @@ const GxIdeTeamDevUpdate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }
   async componentDidLoad() {
     await this.loadData();
+    this.filterPatternEl.focus();
   }
   async componentDidRender() {
     if (!this.renderedFirstTime) {

package/dist/components/gx-ide-ww-images.js

@@ -332,6 +332,7 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.listenChanges();
     this.getImages();
     this.saveInitialFilterData();
+    this.filterNameEl.focus();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {

package/dist/components/gxg-shortcuts.js

@@ -0,0 +1,6 @@
+import { G as GxgShortcuts$1, d as defineCustomElement$1 } from './shortcuts.js';
+
+const GxgShortcuts = GxgShortcuts$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgShortcuts, defineCustomElement };

package/dist/components/gxg-test.js

@@ -1,4 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './ch-shortcuts2.js';
+import { d as defineCustomElement$4 } from './ch-window2.js';
+import { d as defineCustomElement$3 } from './ch-window-close2.js';
+import { d as defineCustomElement$2 } from './shortcuts.js';
 
 const testCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}.card{overflow:auto;cursor:initial;height:100px}.card::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.card::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.card::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.card::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}";
 
@@ -7,9 +11,15 @@ const GxgTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.sendClickHandler = () => {
+      console.log("clicked");
+    };
   }
   render() {
-    return (h("div", { class: "card" }, h("p", null, "The universe is incredibly vast and mysterious. One interesting fact is that there are more stars in the observable universe than there are grains of sand on all the beaches on Earth. It's mind-boggling! \uD83C\uDF0C\uD83C\uDF1F"), h("p", null, "The universe is about 13.8 billion years old, but we can only observe a tiny fraction of it due to the speed of light."), h("p", null, "Black holes can be both incredibly massive and incredibly small. Some are as tiny as a single atom but contain the mass of a mountain!"), h("p", null, "There's a phenomenon called \"dark matter,\" which makes up about 27% of the universe's mass, yet we can't see or detect it directly. It's a big cosmic mystery."), h("p", null, "The Hubble Space Telescope has captured images of galaxies that are billions of light-years away, showing us what they looked like in the distant past.")));
+    return [
+      h("div", { class: "container" }, h("section", { class: "section-dev", "data-title": "shortcut" }, h("h2", null, "Formulario de Contacto"), h("div", null, h("label", { htmlFor: "nombre" }, "Nombre:"), h("input", { type: "text", id: "nombre", name: "nombre", "data-shortcut": "Alt+N" })), h("div", null, h("label", { htmlFor: "email" }, "Correo Electr\u00F3nico:"), h("input", { type: "email", id: "email", name: "email", "data-shortcut": "Alt+E", "data-shortcut-prevent": "Enter", "aria-keyshortcuts": "Alt+E" })), h("div", null, h("label", { htmlFor: "mensaje" }, "Mensaje:"), h("textarea", { id: "mensaje", name: "mensaje", "data-shortcut": "Alt+M" })), h("div", null, h("button", { id: "enviar", "data-shortcut": "Enter", "data-shortcut-action": "click", onClick: this.sendClickHandler }, "Enviar")))),
+      h("gxg-shortcuts", { src: "../assets/json/shortcuts.json" }),
+    ];
   }
   get el() { return this; }
   static get style() { return testCss; }
@@ -18,13 +28,33 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gxg-test"];
+  const components = ["gxg-test", "ch-shortcuts", "ch-window", "ch-window-close", "gxg-shortcuts"];
   components.forEach(tagName => { switch (tagName) {
     case "gxg-test":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, GxgTest$1);
       }
       break;
+    case "ch-shortcuts":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-shortcuts":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

package/dist/components/index.js

@@ -154,6 +154,7 @@ export { GxgScroll, defineCustomElement as defineCustomElementGxgScroll } from '
 export { GxgSelect, defineCustomElement as defineCustomElementGxgSelect } from './gxg-select.js';
 export { GxgSelectV2, defineCustomElement as defineCustomElementGxgSelectV2 } from './gxg-select-v2.js';
 export { GxgSeparator, defineCustomElement as defineCustomElementGxgSeparator } from './gxg-separator.js';
+export { GxgShortcuts, defineCustomElement as defineCustomElementGxgShortcuts } from './gxg-shortcuts.js';
 export { GxgSlider, defineCustomElement as defineCustomElementGxgSlider } from './gxg-slider.js';
 export { GxgSpacerLayout, defineCustomElement as defineCustomElementGxgSpacerLayout } from './gxg-spacer-layout.js';
 export { GxgSpacerOne, defineCustomElement as defineCustomElementGxgSpacerOne } from './gxg-spacer-one.js';

package/dist/components/list-box.js

@@ -161,7 +161,6 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (e.code === "ArrowDown" ||
         e.code === "ArrowUp" ||
         e.code === "Space" ||
-        e.code === "Enter" ||
         e.code === "Backspace" ||
         e.code === "Delete" ||
         e.code === "KeyA") {
@@ -170,7 +169,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (e.code === "ArrowDown" || e.code === "ArrowUp") {
         this.HandleArrow(e.code, shiftKey, activeItemIndex);
       }
-      else if (e.code === "Space" || e.code === "Enter") {
+      else if (e.code === "Space") {
         if (shiftKey && ctrlKey) {
           /*uncheck checkbox*/
           const changedLength = this.setCheckboxState(this.getHighlightedItems(), false);

package/dist/components/shortcuts.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './ch-shortcuts2.js';
+import { d as defineCustomElement$2 } from './ch-window2.js';
+import { d as defineCustomElement$1 } from './ch-window-close2.js';
+
+const shortcutsCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}:host{display:block}ch-shortcuts::part(tooltip){font-family:monospace;background-color:var(--gray-06);color:var(--gray-01);padding:var(--spacing-comp-00) var(--spacing-comp-01);font-size:var(--font-size-sm);border-radius:var(--border-radius-sm);position:relative;top:-2.5px;right:-2px}ch-shortcuts::part(element){outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px;outline-color:var(--gray-06)}:host([show-tooltip]) ch-shortcuts::part(tooltip){opacity:1}";
+
+const GxgShortcuts = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.showKey = "F10";
+    this.showTooltip = false;
+    this.show = false;
+  }
+  componentDidLoad() {
+    this.showTooltip = true;
+  }
+  render() {
+    return (h(Host, null, h("ch-shortcuts", { src: this.src, showKey: this.showKey })));
+  }
+  static get style() { return shortcutsCss; }
+}, [0, "gxg-shortcuts", {
+    "src": [1],
+    "showKey": [1, "show-key"],
+    "showTooltip": [1540, "show-tooltip"],
+    "show": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-shortcuts", "ch-shortcuts", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-shortcuts":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgShortcuts);
+      }
+      break;
+    case "ch-shortcuts":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GxgShortcuts as G, defineCustomElement as d };

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

@@ -0,0 +1,225 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0aa3977d.js';
+import { f as focusComposedPath } from './helpers-1ecd5e26.js';
+
+const SHORTCUTS = new Map();
+let LATEST_SHORTCUT;
+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), {
+        name,
+        root,
+        shortcut
+      });
+    });
+  });
+  addListener();
+}
+function unloadShortcuts(name) {
+  const removeKeyShortcuts = [];
+  SHORTCUTS.forEach((shortcutMap, key) => {
+    if (shortcutMap.name === name) {
+      removeKeyShortcuts.push(key);
+    }
+  });
+  removeKeyShortcuts.forEach(key => SHORTCUTS.delete(key));
+  removeListener();
+}
+function getShortcuts() {
+  return Array.from(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 (SHORTCUTS.size > 0) {
+    window.addEventListener("keydown", keydownHandler, { capture: true });
+  }
+}
+function removeListener() {
+  if (SHORTCUTS.size === 0) {
+    window.removeEventListener("keydown", keydownHandler, { capture: true });
+  }
+}
+function keydownHandler(eventInfo) {
+  var _a;
+  if (!eventInfo.repeat ||
+    (eventInfo.repeat && ((_a = LATEST_SHORTCUT === null || LATEST_SHORTCUT === void 0 ? void 0 : LATEST_SHORTCUT.shortcut.conditions) === null || _a === void 0 ? void 0 : _a.allowRepeat))) {
+    LATEST_SHORTCUT = triggerShortcut(eventInfo);
+  }
+}
+function triggerShortcut(eventInfo) {
+  const shortcutMap = 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();
+      }
+    }
+  }
+  return shortcutMap;
+}
+function parseKeyShortcuts(value = "") {
+  return value.split(" ").map(item => {
+    return item.split("+").reduce((keyShortcut, key) => {
+      switch (key.toLowerCase()) {
+        case "ctrl":
+          keyShortcut.ctrl = true;
+          break;
+        case "alt":
+          keyShortcut.alt = true;
+          break;
+        case "shift":
+          keyShortcut.shift = true;
+          break;
+        case "meta":
+          keyShortcut.meta = true;
+          break;
+        default:
+          keyShortcut.key = key;
+      }
+      return keyShortcut;
+    }, {
+      ctrl: false,
+      alt: false,
+      shift: false,
+      meta: false,
+      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 = 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) {
+    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 => (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))));
+  }
+  render() {
+    return h(Host, null, this.showShortcuts && this.renderShortcuts());
+  }
+  get el() { return getElement(this); }
+};
+ChShortcuts.style = chShortcutsCss;
+
+const shortcutsCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}:host{display:block}ch-shortcuts::part(tooltip){font-family:monospace;background-color:var(--gray-06);color:var(--gray-01);padding:var(--spacing-comp-00) var(--spacing-comp-01);font-size:var(--font-size-sm);border-radius:var(--border-radius-sm);position:relative;top:-2.5px;right:-2px}ch-shortcuts::part(element){outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px;outline-color:var(--gray-06)}:host([show-tooltip]) ch-shortcuts::part(tooltip){opacity:1}";
+
+const GxgShortcuts = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showKey = "F10";
+    this.showTooltip = false;
+    this.show = false;
+  }
+  componentDidLoad() {
+    this.showTooltip = true;
+  }
+  render() {
+    return (h(Host, null, h("ch-shortcuts", { src: this.src, showKey: this.showKey })));
+  }
+};
+GxgShortcuts.style = shortcutsCss;
+
+export { ChShortcuts as ch_shortcuts, GxgShortcuts as gxg_shortcuts };

package/dist/esm/{common-202491f0.js → common-3bda62ed.js}

@@ -16,7 +16,7 @@ const renderFormItems = (componentType = "gxg-combo-box-item", options, group =
           items.push(item);
           break;
         case "gxg-form-radio":
-          item = (h("gxg-form-radio", { "radio-id": option.id, checked: option.checked, disabled: option.disabled, label: option.label, value: option.value, name: group, part: `${group}-${option.id}` }));
+          item = (h("gxg-form-radio", { radioId: option.id, checked: option.checked, disabled: option.disabled, label: option.label, value: option.value, name: group, part: `${group}-${option.id}` }));
           items.push(item);
           break;
       }