@genexus/genexus-ide-ui 1.1.13 → 1.1.15

package/dist/components/gx-ide-about.js

@@ -1,8 +1,15 @@
 import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
 
-const aboutCss = ":host{--spacing-body-block-start:var(--mer-spacing--lg);--spacing-body-block-end:var(--mer-spacing--lg);--spacing-body-inline-start:var(--mer-spacing--md);--spacing-body-inline-end:var(--mer-spacing--md);display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr max-content;background-color:var(--elevation-background-color, var(--mer-surface));color:var(--mer-text__on-elevation);text-align:center}.section{display:contents}.main{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}.version__container{display:flex;justify-content:center;flex-direction:column;gap:var(--mer-spacing--xs)}.logo__container{display:flex;flex-direction:column;gap:var(--mer-spacing--sm);align-items:center;margin:unset}.logo__img{inline-size:28px;block-size:28px}.link-underlined{text-decoration:underline;color:var(--mer-text__on-elevation)}.link-underlined:hover{color:var(--mer-text__highlighted)}.link-underlined:active{color:var(--mer-text__elevation)}.links-container{display:flex;gap:var(--mer-spacing--xs)}.copyrights{color:var(--mer-text__complementary)}";
+const aboutCss = ":host{--spacing-body-block-start:var(--mer-spacing--lg);--spacing-body-block-end:var(--mer-spacing--lg);--spacing-body-inline-start:var(--mer-spacing--md);--spacing-body-inline-end:var(--mer-spacing--md);display:grid;inline-size:100%;block-size:100%;gap:var(--mer-spacing--md);overflow:auto;grid-template-rows:max-content 1fr max-content;background-color:var(--elevation-background-color, var(--mer-surface__elevation--02));color:var(--mer-text__on-elevation);text-align:center}.section{display:contents}.main{overflow:auto;display:grid;grid-template-rows:1fr max-content;gap:var(--mer-spacing--lg)}.logo__container{display:flex;flex-direction:column;gap:var(--mer-spacing--sm);align-items:center;margin:unset}.logo__img{inline-size:28px;block-size:28px}.logotype{color:var(--mer-text__bright)}.versions__container{overflow:hidden;border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--sm);display:grid;grid-template-rows:1fr max-content;inline-size:100%}.versions__container button{justify-self:center;min-inline-size:72px}.versions__container-footer{padding:14px}.versions__list{overflow:auto;list-style:none;margin:0;padding:14px;display:flex;flex-direction:column;gap:var(--mer-spacing--xs)}.link-underlined{text-decoration:underline;color:var(--mer-text__on-elevation)}.link-underlined:hover{color:var(--mer-text__highlighted)}.link-underlined:active{color:var(--mer-text__elevation)}.links-container{display:flex;gap:var(--mer-spacing--xs)}.footer{display:flex;align-items:center;flex-direction:column;gap:var(--mer-spacing--xs);color:var(--mer-text__complementary)}";
 
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m")
         throw new TypeError("Private method is not writable");
@@ -12,18 +19,13 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _GxIdeAbout_componentLocale, _GxIdeAbout_nextLogo;
+var _GxIdeAbout_componentLocale, _GxIdeAbout_nextLogo, _GxIdeAbout_copyVersionsHandler;
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/typography",
-    "components/button"
+    "utils/elevation",
+    "components/button",
+    "chameleon/scrollbar"
 ];
 const GxIdeAbout$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeAbout extends HTMLElement {
     constructor() {
@@ -32,12 +34,20 @@ const GxIdeAbout$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeAbout extends H
         this.__attachShadow();
         _GxIdeAbout_componentLocale.set(this, void 0);
         _GxIdeAbout_nextLogo.set(this, getAssetPath(`./gx-ide-assets/about/images/next-logo.svg`));
-        this.version = undefined;
-        this.ideVersion = undefined;
-        this.blVersion = undefined;
+        _GxIdeAbout_copyVersionsHandler.set(this, () => {
+            this.copying = true;
+            setTimeout(() => {
+                this.copying = false;
+            }, 1000);
+            navigator.clipboard.writeText(`${__classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").copyVersionsAdditionalText}${this.versions
+                .map(version => `- ${version}`)
+                .join("\n")}`);
+        });
+        this.versions = [];
         this.detailsCallback = undefined;
         this.privacyPolicyCallback = undefined;
         this.termsAndConditionsCallback = undefined;
+        this.copying = false;
     }
     async componentWillLoad() {
         __classPrivateFieldSet(this, _GxIdeAbout_componentLocale, await Locale.getComponentStrings(this.el), "f");
@@ -45,20 +55,23 @@ const GxIdeAbout$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeAbout extends H
     render() {
         const renderPrivacyAndTerms = this.privacyPolicyCallback && this.termsAndConditionsCallback;
         const renderPrivacyOrTerms = this.privacyPolicyCallback || this.termsAndConditionsCallback;
-        return (h(Host, { class: "scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("div", { class: "main" }, h("figure", { class: "logo__container" }, h("img", { class: "logo__img", src: __classPrivateFieldGet(this, _GxIdeAbout_nextLogo, "f"), alt: __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").logoAlt }), h("figcaption", { class: "body-semi-bold-m" }, "GeneXus Next")), h("div", { class: "version__container" }, h("p", { class: "body-semi-bold-s" }, __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").version, " ", this.version), h("p", { class: "body-regular-m" }, `(${__classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").ide}=${this.ideVersion}, ${__classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").bl}=${this.blVersion})`)), this.detailsCallback && (h("button", { class: "button-tertiary", type: "button", onClick: this.detailsCallback }, __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").detailsAndAcknowledgmentes)), renderPrivacyOrTerms && (h("div", { class: "links-container", hidden: !renderPrivacyAndTerms }, this.privacyPolicyCallback && (h("button", { class: "link-underlined tiny-regular-s", type: "button", onClick: this.privacyPolicyCallback }, __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").privacyPolicy)), renderPrivacyAndTerms && "|", this.termsAndConditionsCallback && (h("button", { class: "link-underlined tiny-regular-s", type: "button", onClick: this.termsAndConditionsCallback }, __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").termsAndConditions))))), h("footer", { class: "body-regular-s copyrights" }, __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").copyright))));
+        return (h(Host, { class: "scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("header", null, h("figure", { class: "logo__container" }, h("img", { class: "logo__img", src: __classPrivateFieldGet(this, _GxIdeAbout_nextLogo, "f"), alt: __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").logoAlt }), h("figcaption", { class: "body-semi-bold-m logotype" }, "GeneXus Next"))), h("div", { class: "main" }, this.versions.length ? (h("div", { class: "versions__container elevation-1" }, h("ul", { class: "versions__list scrollable" }, this.versions.map(version => {
+            return h("li", { class: "body-regular-s" }, version);
+        })), h("div", { class: "versions__container-footer" }, h("button", { class: "button-secondary", type: "button", onClick: __classPrivateFieldGet(this, _GxIdeAbout_copyVersionsHandler, "f"), disabled: this.copying }, this.copying
+            ? __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").copied
+            : __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").copy)))) : null, this.detailsCallback && (h("button", { class: "button-tertiary", type: "button", onClick: this.detailsCallback }, __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").detailsAndAcknowledgmentes))), h("footer", { class: "body-regular-s footer" }, renderPrivacyOrTerms && (h("div", { class: "links-container", hidden: !renderPrivacyAndTerms }, this.privacyPolicyCallback && (h("button", { class: "link-underlined tiny-regular-s", type: "button", onClick: this.privacyPolicyCallback }, __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").privacyPolicy)), renderPrivacyAndTerms && "|", this.termsAndConditionsCallback && (h("button", { class: "link-underlined tiny-regular-s", type: "button", onClick: this.termsAndConditionsCallback }, __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").termsAndConditions)))), __classPrivateFieldGet(this, _GxIdeAbout_componentLocale, "f").copyright))));
     }
     static get assetsDirs() { return ["gx-ide-assets/about"]; }
     get el() { return this; }
     static get style() { return aboutCss; }
 }, [1, "gx-ide-about", {
-        "version": [1],
-        "ideVersion": [1, "ide-version"],
-        "blVersion": [1, "bl-version"],
+        "versions": [16],
         "detailsCallback": [16],
         "privacyPolicyCallback": [16],
-        "termsAndConditionsCallback": [16]
+        "termsAndConditionsCallback": [16],
+        "copying": [32]
     }]);
-_GxIdeAbout_componentLocale = new WeakMap(), _GxIdeAbout_nextLogo = new WeakMap();
+_GxIdeAbout_componentLocale = new WeakMap(), _GxIdeAbout_nextLogo = new WeakMap(), _GxIdeAbout_copyVersionsHandler = new WeakMap();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/gx-ide-about.js.map

@@ -1 +1 @@
-{"file":"gx-ide-about.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+jCAA+jC;;;;;;;;;;;;;;;;;;;ACKhlC,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;CACpB,CAAC;MAQWA,YAAU;;;;;QACrB,8CAAsB;QACtB,+BAAY,YAAY,CAAC,4CAA4C,CAAC,EAAC;;;;;;;;IAkCvE,MAAM,iBAAiB;QACrB,uBAAA,IAAI,+BAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;KACnE;IAED,MAAM;QACJ,MAAM,qBAAqB,GACzB,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,0BAA0B,CAAC;QAChE,MAAM,oBAAoB,GACxB,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,0BAA0B,CAAC;QAEhE,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,YAAY,IACtB,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,SAAS,IACtB,WAAK,KAAK,EAAC,MAAM,IACf,cAAQ,KAAK,EAAC,iBAAiB,IAC7B,WACE,KAAK,EAAC,WAAW,EACjB,GAAG,EAAE,uBAAA,IAAI,4BAAU,EACnB,GAAG,EAAE,uBAAA,IAAI,mCAAiB,CAAC,OAAO,GAClC,EACF,kBAAY,KAAK,EAAC,kBAAkB,mBAA0B,CACvD,EAET,WAAK,KAAK,EAAC,oBAAoB,IAC7B,SAAG,KAAK,EAAC,kBAAkB,IACxB,uBAAA,IAAI,mCAAiB,CAAC,OAAO,OAAG,IAAI,CAAC,OAAO,CAC3C,EACJ,SAAG,KAAK,EAAC,gBAAgB,IACtB,IAAI,uBAAA,IAAI,mCAAiB,CAAC,GAAG,IAAI,IAAI,CAAC,UAAU,KAC/C,uBAAA,IAAI,mCAAiB,CAAC,EACxB,IAAI,IAAI,CAAC,SAAS,GAAG,CACnB,CACA,EAEL,IAAI,CAAC,eAAe,KACnB,cACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,eAAe,IAE5B,uBAAA,IAAI,mCAAiB,CAAC,0BAA0B,CAC1C,CACV,EAEA,oBAAoB,KACnB,WAAK,KAAK,EAAC,iBAAiB,EAAC,MAAM,EAAE,CAAC,qBAAqB,IACxD,IAAI,CAAC,qBAAqB,KACzB,cACE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,qBAAqB,IAElC,uBAAA,IAAI,mCAAiB,CAAC,aAAa,CAC7B,CACV,EAEA,qBAAqB,IAAI,GAAG,EAE5B,IAAI,CAAC,0BAA0B,KAC9B,cACE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,0BAA0B,IAEvC,uBAAA,IAAI,mCAAiB,CAAC,kBAAkB,CAClC,CACV,CACG,CACP,CACG,EAEN,cAAQ,KAAK,EAAC,2BAA2B,IACtC,uBAAA,IAAI,mCAAiB,CAAC,SAAS,CACzB,CACD,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GxIdeAbout"],"sources":["src/components/_branding/about/about.scss?tag=gx-ide-about&encapsulation=shadow","src/components/_branding/about/about.tsx"],"sourcesContent":[":host {\n  --spacing-body-block-start: var(--mer-spacing--lg);\n  --spacing-body-block-end: var(--mer-spacing--lg);\n  --spacing-body-inline-start: var(--mer-spacing--md);\n  --spacing-body-inline-end: var(--mer-spacing--md);\n\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  grid-template-rows: 1fr max-content;\n\n  background-color: var(--elevation-background-color, var(--mer-surface));\n  color: var(--mer-text__on-elevation);\n  text-align: center;\n}\n.section {\n  // section was addad for semantics, in order to allow a footer tag.\n  display: contents;\n}\n\n.main {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.version__container {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  gap: var(--mer-spacing--xs);\n}\n.logo {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--sm);\n    align-items: center;\n    margin: unset;\n  }\n  &__img {\n    $logoSize: 28px;\n    inline-size: $logoSize;\n    block-size: $logoSize;\n  }\n}\n\n.link-underlined {\n  // TODO: Add link helper class in Mercury\n  text-decoration: underline;\n  color: var(--mer-text__on-elevation);\n  &:hover {\n    color: var(--mer-text__highlighted);\n  }\n  &:active {\n    color: var(--mer-text__elevation);\n  }\n}\n\n.links-container {\n  display: flex;\n  gap: var(--mer-spacing--xs);\n}\n\n.copyrights {\n  // TODO: Add color helper classes in Mercury\n  color: var(--mer-text__complementary);\n}\n","import { Component, Host, h, Prop, Element, getAssetPath } from \"@stencil/core\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../../common/locale\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/button\"\n];\n\n@Component({\n  tag: \"gx-ide-about\",\n  styleUrl: \"about.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/about\"]\n})\nexport class GxIdeAbout {\n  #componentLocale: any;\n  #nextLogo = getAssetPath(`./gx-ide-assets/about/images/next-logo.svg`);\n\n  @Element() el: HTMLGxIdeAboutElement;\n\n  /**\n   * The version of GeneXus\n   */\n  @Prop() readonly version: string;\n\n  /**\n   * The version of GeneXus IDE\n   */\n  @Prop() readonly ideVersion: string;\n\n  /**\n   * The version of GeneXus BL\n   */\n  @Prop() readonly blVersion: string;\n\n  /**\n   * Callback invoked when the user clicks on \"Details & Acknowledgements\"\n   */\n  @Prop() readonly detailsCallback: DetailsCallback;\n\n  /**\n   * Callback invoked when the user clicks on \"Privacy policy\"\n   */\n  @Prop() readonly privacyPolicyCallback: PrivacyPolicyCallback;\n\n  /**\n   * Callback invoked when the user clicks on \"Terms and conditions\"\n   */\n  @Prop() readonly termsAndConditionsCallback: TermsAndConditionsCallback;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  render() {\n    const renderPrivacyAndTerms =\n      this.privacyPolicyCallback && this.termsAndConditionsCallback;\n    const renderPrivacyOrTerms =\n      this.privacyPolicyCallback || this.termsAndConditionsCallback;\n\n    return (\n      <Host class=\"scrollable\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <div class=\"main\">\n            <figure class=\"logo__container\">\n              <img\n                class=\"logo__img\"\n                src={this.#nextLogo}\n                alt={this.#componentLocale.logoAlt}\n              />\n              <figcaption class=\"body-semi-bold-m\">GeneXus Next</figcaption>\n            </figure>\n\n            <div class=\"version__container\">\n              <p class=\"body-semi-bold-s\">\n                {this.#componentLocale.version} {this.version}\n              </p>\n              <p class=\"body-regular-m\">\n                {`(${this.#componentLocale.ide}=${this.ideVersion}, ${\n                  this.#componentLocale.bl\n                }=${this.blVersion})`}\n              </p>\n            </div>\n\n            {this.detailsCallback && (\n              <button\n                class=\"button-tertiary\"\n                type=\"button\"\n                onClick={this.detailsCallback}\n              >\n                {this.#componentLocale.detailsAndAcknowledgmentes}\n              </button>\n            )}\n\n            {renderPrivacyOrTerms && (\n              <div class=\"links-container\" hidden={!renderPrivacyAndTerms}>\n                {this.privacyPolicyCallback && (\n                  <button\n                    class=\"link-underlined tiny-regular-s\"\n                    type=\"button\"\n                    onClick={this.privacyPolicyCallback}\n                  >\n                    {this.#componentLocale.privacyPolicy}\n                  </button>\n                )}\n\n                {renderPrivacyAndTerms && \"|\"}\n\n                {this.termsAndConditionsCallback && (\n                  <button\n                    class=\"link-underlined tiny-regular-s\"\n                    type=\"button\"\n                    onClick={this.termsAndConditionsCallback}\n                  >\n                    {this.#componentLocale.termsAndConditions}\n                  </button>\n                )}\n              </div>\n            )}\n          </div>\n\n          <footer class=\"body-regular-s copyrights\">\n            {this.#componentLocale.copyright}\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type DetailsCallback = () => Promise<void>;\nexport type PrivacyPolicyCallback = () => Promise<void>;\nexport type TermsAndConditionsCallback = () => Promise<void>;\n"],"version":3}
+{"file":"gx-ide-about.js","mappings":"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","names":["GxIdeAbout"],"sources":["src/components/about/about.scss?tag=gx-ide-about&encapsulation=shadow","src/components/about/about.tsx"],"sourcesContent":["$versionsListPadding: 14px;\n\n:host {\n  --spacing-body-block-start: var(--mer-spacing--lg);\n  --spacing-body-block-end: var(--mer-spacing--lg);\n  --spacing-body-inline-start: var(--mer-spacing--md);\n  --spacing-body-inline-end: var(--mer-spacing--md);\n\n  display: grid;\n  inline-size: 100%;\n  block-size: 100%;\n  gap: var(--mer-spacing--md);\n  overflow: auto;\n  grid-template-rows: max-content 1fr max-content;\n  background-color: var(\n    --elevation-background-color,\n    var(--mer-surface__elevation--02)\n  );\n  color: var(--mer-text__on-elevation);\n  text-align: center;\n}\n.section {\n  // section was addad for semantics, in order to allow a footer tag.\n  display: contents;\n}\n\n.main {\n  overflow: auto;\n  display: grid;\n  grid-template-rows: 1fr max-content;\n  gap: var(--mer-spacing--lg);\n}\n\n.logo {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--sm);\n    align-items: center;\n    margin: unset;\n  }\n  &__img {\n    $logoSize: 28px;\n    inline-size: $logoSize;\n    block-size: $logoSize;\n  }\n}\n.logotype {\n  color: var(--mer-text__bright);\n}\n\n.versions__container {\n  overflow: hidden;\n  border: var(--mer-border__width--sm) solid\n    var(--mer-border-color__on-elevation--01);\n  border-radius: var(--mer-border__radius--sm);\n  display: grid;\n  grid-template-rows: 1fr max-content;\n  inline-size: 100%;\n\n  button {\n    justify-self: center;\n    min-inline-size: 72px;\n  }\n}\n.versions__container-footer {\n  padding: $versionsListPadding;\n}\n\n.versions__list {\n  overflow: auto;\n  list-style: none;\n  margin: 0;\n  padding: $versionsListPadding;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mer-spacing--xs);\n}\n\n.link-underlined {\n  // TODO: Add link helper class in Mercury\n  text-decoration: underline;\n  color: var(--mer-text__on-elevation);\n  &:hover {\n    color: var(--mer-text__highlighted);\n  }\n  &:active {\n    color: var(--mer-text__elevation);\n  }\n}\n\n.links-container {\n  display: flex;\n  gap: var(--mer-spacing--xs);\n}\n\n.footer {\n  // TODO: Add color helper classes in Mercury\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: var(--mer-spacing--xs);\n  color: var(--mer-text__complementary);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  getAssetPath\n} from \"@stencil/core\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"utils/elevation\",\n  \"components/button\",\n  \"chameleon/scrollbar\"\n];\n\n@Component({\n  tag: \"gx-ide-about\",\n  styleUrl: \"about.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/about\"]\n})\nexport class GxIdeAbout {\n  #componentLocale: any;\n  #nextLogo = getAssetPath(`./gx-ide-assets/about/images/next-logo.svg`);\n\n  @Element() el: HTMLGxIdeAboutElement;\n\n  /**\n   * GeneXus Next version, and also related dependencies versions\n   */\n  @Prop() readonly versions: string[] = [];\n\n  /**\n   * Callback invoked when the user clicks on \"Details & Acknowledgements\"\n   */\n  @Prop() readonly detailsCallback: DetailsCallback;\n\n  /**\n   * Callback invoked when the user clicks on \"Privacy policy\"\n   */\n  @Prop() readonly privacyPolicyCallback: PrivacyPolicyCallback;\n\n  /**\n   * Callback invoked when the user clicks on \"Terms and conditions\"\n   */\n  @Prop() readonly termsAndConditionsCallback: TermsAndConditionsCallback;\n\n  /**\n   * True when the user copies the versions\n   */\n  @State() copying: boolean = false;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  #copyVersionsHandler = () => {\n    this.copying = true;\n    setTimeout(() => {\n      this.copying = false;\n    }, 1000);\n\n    navigator.clipboard.writeText(\n      `${this.#componentLocale.copyVersionsAdditionalText}${this.versions\n        .map(version => `- ${version}`)\n        .join(\"\\n\")}`\n    );\n  };\n\n  render() {\n    const renderPrivacyAndTerms =\n      this.privacyPolicyCallback && this.termsAndConditionsCallback;\n    const renderPrivacyOrTerms =\n      this.privacyPolicyCallback || this.termsAndConditionsCallback;\n\n    return (\n      <Host class=\"scrollable\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <header>\n            <figure class=\"logo__container\">\n              <img\n                class=\"logo__img\"\n                src={this.#nextLogo}\n                alt={this.#componentLocale.logoAlt}\n              />\n              <figcaption class=\"body-semi-bold-m logotype\">\n                GeneXus Next\n              </figcaption>\n            </figure>\n          </header>\n          <div class=\"main\">\n            {this.versions.length ? (\n              <div class=\"versions__container elevation-1\">\n                <ul class=\"versions__list scrollable\">\n                  {this.versions.map(version => {\n                    return <li class=\"body-regular-s\">{version}</li>;\n                  })}\n                </ul>\n                <div class=\"versions__container-footer\">\n                  <button\n                    class=\"button-secondary\"\n                    type=\"button\"\n                    onClick={this.#copyVersionsHandler}\n                    disabled={this.copying}\n                  >\n                    {this.copying\n                      ? this.#componentLocale.copied\n                      : this.#componentLocale.copy}\n                    {}\n                  </button>\n                </div>\n              </div>\n            ) : null}\n\n            {this.detailsCallback && (\n              <button\n                class=\"button-tertiary\"\n                type=\"button\"\n                onClick={this.detailsCallback}\n              >\n                {this.#componentLocale.detailsAndAcknowledgmentes}\n              </button>\n            )}\n          </div>\n\n          <footer class=\"body-regular-s footer\">\n            {renderPrivacyOrTerms && (\n              <div class=\"links-container\" hidden={!renderPrivacyAndTerms}>\n                {this.privacyPolicyCallback && (\n                  <button\n                    class=\"link-underlined tiny-regular-s\"\n                    type=\"button\"\n                    onClick={this.privacyPolicyCallback}\n                  >\n                    {this.#componentLocale.privacyPolicy}\n                  </button>\n                )}\n\n                {renderPrivacyAndTerms && \"|\"}\n\n                {this.termsAndConditionsCallback && (\n                  <button\n                    class=\"link-underlined tiny-regular-s\"\n                    type=\"button\"\n                    onClick={this.termsAndConditionsCallback}\n                  >\n                    {this.#componentLocale.termsAndConditions}\n                  </button>\n                )}\n              </div>\n            )}\n            {this.#componentLocale.copyright}\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type DetailsCallback = () => Promise<void>;\nexport type PrivacyPolicyCallback = () => Promise<void>;\nexport type TermsAndConditionsCallback = () => Promise<void>;\n"],"version":3}

package/dist/components/gx-ide-bpm-export-xpdl.js

@@ -34,8 +34,8 @@ const GxIdeBpmExportXpdl$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeBpmExpo
                     .then(() => {
                     this.notExporting = true;
                 })
-                    .catch(error => {
-                    console.error("Export callback failed:", error);
+                    .catch(() => {
+                    // error handling
                     this.notExporting = true;
                 });
             }

package/dist/components/gx-ide-bpm-export-xpdl.js.map

@@ -1 +1 @@
-{"file":"gx-ide-bpm-export-xpdl.js","mappings":";;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,m/ZAAm/Z;;MCyB//ZA,oBAAkB;;;;;;QAOrB,sBAAiB,GAAG,KAAK,CAAC;;;;QAgF1B,kBAAa,GAAG;;YACtB,IAAI,IAAI,CAAC,cAAc,EAAE;gBACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAE1B,MAAM,IAAI,GAAe;oBACvB,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK;oBACvC,OAAO,EAAE,MAAA,IAAI,CAAC,mBAAmB,CAAC,SAAS,mCAAI;wBAC7C,UAAU,EAAE,KAAK;wBACjB,SAAS,EAAE,EAAE;qBACd;iBACF,CAAC;gBAEF,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;qBACtB,IAAI,CAAC;oBACJ,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;iBAC1B,CAAC;qBACD,KAAK,CAAC,KAAK;oBACV,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;oBAChD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;iBAC1B,CAAC,CAAC;aACN;SACF,CAAC;QAEM,gBAAW,GAAG;;YACpB,IAAI,CAAC,UAAU,GAAG,EAAC,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,0CAAE,MAAM,CAAA,CAAC;SACrD,CAAC;QAEM,2BAAsB,GAAG;YAC/B,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC;SAC1E,CAAC;0BAnGoB,IAAI;4BACF,IAAI;4BACJ,IAAI;4BAOI,KAAK;;;;;;;IA0CrC,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACnE;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,IAAI,CAAC,2BAA2B,CAAC,IAAI,CACnC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CACpC,CAAC;YACF,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;SAC/B;KACF;;IAyCD,MAAM;QACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,IAC5B,WAAK,KAAK,EAAC,qBAAqB,IAC9B,wBACE,cAAc,EACZ,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,aAAa,GAAG,IAAI,EAEhE,aAAa,EAAE,MAAM,CAAC,cAAc,CAAC,aAAa,IAElD,WAAK,KAAK,EAAC,QAAQ,IACjB,aAAO,OAAO,EAAC,kBAAkB,EAAC,KAAK,EAAC,OAAO,IAC5C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CACtC,EACR,aACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,kBAAkB,EACrB,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAsB,CAAC,GACxD,EACF,cACE,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,EAC9C,OAAO,EAAE,IAAI,CAAC,aAAa,IAE1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CACjC,EACT,cACE,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CACjC,CACL,EAEN,mCACE,EAAE,EAAC,6BAA6B,EAChC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,GAAG,EAAE,EAAE,KACJ,IAAI,CAAC,mBAAmB;gBACvB,EAAwC,CAAC,EAE7C,kBAAkB,EAAE,IAAI,CAAC,sBAAsB,GAClB,CACd,CACf,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GxIdeBpmExportXpdl"],"sources":["src/components/bpm/export-xpdl/bpm-export-xpdl.scss?tag=gx-ide-bpm-export-xpdl&encapsulation=shadow","src/components/bpm/export-xpdl/bpm-export-xpdl.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../global/temporary-tokens-chameleon.scss\";\n\n:host {\n  display: block;\n}\n\n.header {\n  display: grid;\n  grid-template-columns: 1fr min-content min-content;\n  grid-template-areas:\n    \"label label label\"\n    \"input cancel export\";\n  grid-gap: var(--gx-ide-grid-column-gap);\n\n  .label {\n    grid-area: label;\n  }\n  .input {\n    grid-area: input;\n  }\n  .cancel {\n    grid-area: cancel;\n  }\n  .export {\n    grid-area: export;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { config } from \"../../../common/config\";\nimport { Locale } from \"../../../common/locale\";\nimport { ObjectData } from \"../objects-selector/helpers\";\n\n/* import { renderListItems } from \"../../../common/render-list-item\"; */\n\n@Component({\n  tag: \"gx-ide-bpm-export-xpdl\",\n  styleUrl: \"bpm-export-xpdl.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/bpm-export-xpdl\"]\n})\nexport class GxIdeBpmExportXpdl {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeBpmExportXpdlElement;\n  private exportInputEl: HTMLInputElement;\n  private bpmObjectSelectorEl: HTMLGxIdeBpmObjectsSelectorElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() emptyInput = true;\n  @State() emptyObjects = true;\n  @State() notExporting = true;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Callback function invoked when the user presses the 'Create' button.\n   * This function is expected to handle the export process based on the provided export data.\n   *\n   * @param {ExportData} exportData - The data required for the export process.\n   * @returns {Promise<boolean>} A promise that resolves to a boolean indicating the success of the export operation.\n   * Returns `true` if the export was successful, and `false` otherwise.\n   */\n  @Prop() readonly exportCallback: ExportCallback;\n\n  /**\n   * Callback invoked when user press 'Cancel' button\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback invoked when the user presses the 'Add' button. associated with gx-ide-bpm-objects-selector\n   * This function is expected to return a list of selected objects' basic information.\n   * @returns {Promise<ObjectData[]>} A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object.\n   */\n  @Prop() readonly addCallback: () => Promise<ObjectData[]>;\n\n  /**\n   * Callback invoked when the user presses the 'References' button. associated with gx-ide-bpm-objects-selector\n   * Receives a parameter which is an array of IDs of the objects currently added to the list.\n   * Returns a Promise that resolves to an array of ObjectData, where each ObjectData contains the ID, icon, and name of an object.\n   * @param {string[]} ids - An array of IDs of the objects currently added to the list.\n   * @returns {Promise<ObjectData[]>} A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object.\n   */\n  @Prop() readonly referencesCallback: (ids: string[]) => Promise<ObjectData[]>;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private exportHandler = () => {\n    if (this.exportCallback) {\n      this.notExporting = false;\n\n      const data: ExportData = {\n        directoryName: this.exportInputEl.value,\n        Objects: this.bpmObjectSelectorEl.selection ?? {\n          includeAll: false,\n          objectIds: []\n        }\n      };\n\n      this.exportCallback(data)\n        .then(() => {\n          this.notExporting = true;\n        })\n        .catch(error => {\n          console.error(\"Export callback failed:\", error);\n          this.notExporting = true;\n        });\n    }\n  };\n\n  private inputHandle = async () => {\n    this.emptyInput = !this.exportInputEl.value?.length;\n  };\n\n  private handleSelectionChanged = () => {\n    this.emptyObjects = !this.bpmObjectSelectorEl.selection.objectIds.length;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n          >\n            <div class=\"header\">\n              <label htmlFor=\"export-directory\" class=\"label\">\n                {this._componentLocale.main.exportInputLabel}\n              </label>\n              <input\n                type=\"text\"\n                id=\"export-directory\"\n                class=\"input-text input\"\n                onInput={this.inputHandle}\n                ref={el => (this.exportInputEl = el as HTMLInputElement)}\n              />\n              <button\n                class=\"export\"\n                disabled={this.emptyInput || this.emptyObjects}\n                onClick={this.exportHandler}\n              >\n                {this._componentLocale.main.exportButton}\n              </button>\n              <button\n                class=\"cancel\"\n                disabled={this.notExporting}\n                onClick={this.cancelCallback}\n              >\n                {this._componentLocale.main.cancelButton}\n              </button>\n            </div>\n\n            <gx-ide-bpm-objects-selector\n              id=\"gx-ide-bpm-objects-selector\"\n              addCallback={this.addCallback}\n              referencesCallback={this.referencesCallback}\n              ref={el =>\n                (this.bpmObjectSelectorEl =\n                  el as HTMLGxIdeBpmObjectsSelectorElement)\n              }\n              onSelectionChanged={this.handleSelectionChanged}\n            ></gx-ide-bpm-objects-selector>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type ExportCallback = (exportData: ExportData) => Promise<boolean>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type ExportData = {\n  directoryName: string;\n  Objects: SelectionData;\n};\n\nexport type SelectionData = {\n  includeAll: boolean;\n  objectIds: string[];\n};\n"],"version":3}
+{"file":"gx-ide-bpm-export-xpdl.js","mappings":"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","names":["GxIdeBpmExportXpdl"],"sources":["src/components/bpm/export-xpdl/bpm-export-xpdl.scss?tag=gx-ide-bpm-export-xpdl&encapsulation=shadow","src/components/bpm/export-xpdl/bpm-export-xpdl.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../global/temporary-tokens-chameleon.scss\";\n\n:host {\n  display: block;\n}\n\n.header {\n  display: grid;\n  grid-template-columns: 1fr min-content min-content;\n  grid-template-areas:\n    \"label label label\"\n    \"input cancel export\";\n  grid-gap: var(--gx-ide-grid-column-gap);\n\n  .label {\n    grid-area: label;\n  }\n  .input {\n    grid-area: input;\n  }\n  .cancel {\n    grid-area: cancel;\n  }\n  .export {\n    grid-area: export;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { config } from \"../../../common/config\";\nimport { Locale } from \"../../../common/locale\";\nimport { ObjectData } from \"../objects-selector/helpers\";\n\n/* import { renderListItems } from \"../../../common/render-list-item\"; */\n\n@Component({\n  tag: \"gx-ide-bpm-export-xpdl\",\n  styleUrl: \"bpm-export-xpdl.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/bpm-export-xpdl\"]\n})\nexport class GxIdeBpmExportXpdl {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeBpmExportXpdlElement;\n  private exportInputEl: HTMLInputElement;\n  private bpmObjectSelectorEl: HTMLGxIdeBpmObjectsSelectorElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() emptyInput = true;\n  @State() emptyObjects = true;\n  @State() notExporting = true;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Callback function invoked when the user presses the 'Create' button.\n   * This function is expected to handle the export process based on the provided export data.\n   *\n   * @param {ExportData} exportData - The data required for the export process.\n   * @returns {Promise<boolean>} A promise that resolves to a boolean indicating the success of the export operation.\n   * Returns `true` if the export was successful, and `false` otherwise.\n   */\n  @Prop() readonly exportCallback: ExportCallback;\n\n  /**\n   * Callback invoked when user press 'Cancel' button\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback invoked when the user presses the 'Add' button. associated with gx-ide-bpm-objects-selector\n   * This function is expected to return a list of selected objects' basic information.\n   * @returns {Promise<ObjectData[]>} A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object.\n   */\n  @Prop() readonly addCallback: () => Promise<ObjectData[]>;\n\n  /**\n   * Callback invoked when the user presses the 'References' button. associated with gx-ide-bpm-objects-selector\n   * Receives a parameter which is an array of IDs of the objects currently added to the list.\n   * Returns a Promise that resolves to an array of ObjectData, where each ObjectData contains the ID, icon, and name of an object.\n   * @param {string[]} ids - An array of IDs of the objects currently added to the list.\n   * @returns {Promise<ObjectData[]>} A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object.\n   */\n  @Prop() readonly referencesCallback: (ids: string[]) => Promise<ObjectData[]>;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private exportHandler = () => {\n    if (this.exportCallback) {\n      this.notExporting = false;\n\n      const data: ExportData = {\n        directoryName: this.exportInputEl.value,\n        Objects: this.bpmObjectSelectorEl.selection ?? {\n          includeAll: false,\n          objectIds: []\n        }\n      };\n\n      this.exportCallback(data)\n        .then(() => {\n          this.notExporting = true;\n        })\n        .catch(() => {\n          // error handling\n          this.notExporting = true;\n        });\n    }\n  };\n\n  private inputHandle = async () => {\n    this.emptyInput = !this.exportInputEl.value?.length;\n  };\n\n  private handleSelectionChanged = () => {\n    this.emptyObjects = !this.bpmObjectSelectorEl.selection.objectIds.length;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n          >\n            <div class=\"header\">\n              <label htmlFor=\"export-directory\" class=\"label\">\n                {this._componentLocale.main.exportInputLabel}\n              </label>\n              <input\n                type=\"text\"\n                id=\"export-directory\"\n                class=\"input-text input\"\n                onInput={this.inputHandle}\n                ref={el => (this.exportInputEl = el as HTMLInputElement)}\n              />\n              <button\n                class=\"export\"\n                disabled={this.emptyInput || this.emptyObjects}\n                onClick={this.exportHandler}\n              >\n                {this._componentLocale.main.exportButton}\n              </button>\n              <button\n                class=\"cancel\"\n                disabled={this.notExporting}\n                onClick={this.cancelCallback}\n              >\n                {this._componentLocale.main.cancelButton}\n              </button>\n            </div>\n\n            <gx-ide-bpm-objects-selector\n              id=\"gx-ide-bpm-objects-selector\"\n              addCallback={this.addCallback}\n              referencesCallback={this.referencesCallback}\n              ref={el =>\n                (this.bpmObjectSelectorEl =\n                  el as HTMLGxIdeBpmObjectsSelectorElement)\n              }\n              onSelectionChanged={this.handleSelectionChanged}\n            ></gx-ide-bpm-objects-selector>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type ExportCallback = (exportData: ExportData) => Promise<boolean>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type ExportData = {\n  directoryName: string;\n  Objects: SelectionData;\n};\n\nexport type SelectionData = {\n  includeAll: boolean;\n  objectIds: string[];\n};\n"],"version":3}

package/dist/components/gx-ide-data-type-selector.js

@@ -14,6 +14,7 @@ const mapCategoryToListItemGroup = (category) => {
             return {
                 caption: type.name,
                 id: type.name,
+                selected: type.selected,
                 additionalInformation: {
                     "stretch-start": {
                         center: [{ imgSrc: type.icon }]
@@ -30,6 +31,7 @@ const mapDataTypesToList = (dataTypes) => {
         return {
             caption: dataType.name,
             id: dataType.name,
+            selected: dataType.selected,
             additionalInformation: {
                 "stretch-start": {
                     center: [{ imgSrc: dataType.icon || undefined }]
@@ -41,7 +43,7 @@ const mapDataTypesToList = (dataTypes) => {
     });
 };
 
-const dataTypeSelectorCss = ":host{position:relative;display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr max-content;--control__border-width:var(--mer-border__width--sm);--control__border-radius:var(--mer-border__radius--sm)}.main{display:contents}.selected-category{margin:0;text-transform:capitalize;margin-inline-start:var(--mer-spacing--md);white-space:nowrap}.footer{overflow:auto}";
+const dataTypeSelectorCss = ":host{position:relative;display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr max-content;--control__border-width:var(--mer-border__width--sm);--control__border-radius:var(--mer-border__radius--sm)}.main{display:contents}.selected-category{margin:0;text-transform:capitalize;margin-inline-start:var(--mer-spacing--md);white-space:nowrap}.footer{overflow:auto;padding:var(--mer-spacing--xs)}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -59,19 +61,20 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdeKbManagerImport__componentLocale, _GxIdeKbManagerImport_showAll, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, _GxIdeKbManagerImport_handleSelectionChange, _GxIdeKbManagerImport_updateListBoxModelState, _GxIdeKbManagerImport_showAllObjects, _GxIdeKbManagerImport_showRecentlyObjects, _GxIdeKbManagerImport_renderFooter;
+var _GxIdeKbManagerImport__componentLocale, _GxIdeKbManagerImport_showAll, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, _GxIdeKbManagerImport_dataTypeCategoryMap, _GxIdeKbManagerImport_dataTypeDataIdMap, _GxIdeKbManagerImport_lastArrowKey, _GxIdeKbManagerImport_selectedDataTypeIds, _GxIdeKbManagerImport_focusAlreadySet, _GxIdeKbManagerImport_actionListEl, _GxIdeKbManagerImport_evaluateSelectionChanged, _GxIdeKbManagerImport_listKeyDownHandler, _GxIdeKbManagerImport_listClickHandler, _GxIdeKbManagerImport_showAllObjects, _GxIdeKbManagerImport_showRecentlyObjects, _GxIdeKbManagerImport_handleButtonTab, _GxIdeKbManagerImport_renderFooter, _GxIdeKbManagerImport_setFocus;
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    "components/tab",
-    "components/tooltip",
     "components/list-box",
-    "components/tree-view",
     "utils/form--full",
-    "utils/layout",
     "utils/typography",
+    "utils/layout",
     "utils/spacing",
     "chameleon/scrollbar"
 ];
+const ARROW_UP_KEY = "ArrowUp";
+const ARROW_DOWN_KEY = "ArrowDown";
+const ENTER_KEY = "Enter";
+const TAB_KEY = "Tab";
 const ALL_CATEGORY_ID = "all";
 const RECENTLY_USED_CATEGORY_ID = "recenttly-used";
 const CLOCK_ICON = getIconPath({
@@ -87,41 +90,64 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
         _GxIdeKbManagerImport__componentLocale.set(this, void 0);
         _GxIdeKbManagerImport_showAll.set(this, false);
         _GxIdeKbManagerImport_categoriesActionListItemGroupMap.set(this, new Map());
-        _GxIdeKbManagerImport_handleSelectionChange.set(this, (event) => {
-            var _a;
-            const eventType = (_a = event.detail[0]) === null || _a === void 0 ? void 0 : _a.item.type;
-            if (eventType === "actionable") {
-                const name = event.detail[0].item.caption;
-                const itemAdditionalBase = event.detail[0].item.additionalInformation["stretch-start"].center[0];
-                const icon = itemAdditionalBase.imgSrc;
-                this.dataTypeSelectedCallback({
-                    name: name,
-                    icon: icon
-                });
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_updateListBoxModelState, "f").call(this, event.detail[0].item.caption, "actionable");
-            }
-            else if (eventType === "group") {
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_updateListBoxModelState, "f").call(this, event.detail[0].item.caption, "group");
+        _GxIdeKbManagerImport_dataTypeCategoryMap.set(this, new Map());
+        _GxIdeKbManagerImport_dataTypeDataIdMap.set(this, new Map());
+        _GxIdeKbManagerImport_lastArrowKey.set(this, null);
+        _GxIdeKbManagerImport_selectedDataTypeIds.set(this, {
+            // For setting focus
+            categoryId: undefined,
+            dataTypeId: undefined
+        });
+        _GxIdeKbManagerImport_focusAlreadySet.set(this, false);
+        _GxIdeKbManagerImport_actionListEl.set(this, void 0);
+        _GxIdeKbManagerImport_evaluateSelectionChanged.set(this, (path) => {
+            const chActionListItem = path.find(el => el.tagName === "CH-ACTION-LIST-ITEM");
+            if (chActionListItem) {
+                const id = chActionListItem.id;
+                const dataTypeData = __classPrivateFieldGet(this, _GxIdeKbManagerImport_dataTypeDataIdMap, "f").get(id);
+                this.dataTypeSelectedCallback(dataTypeData);
             }
         });
-        _GxIdeKbManagerImport_updateListBoxModelState.set(this, (name, type) => {
-            if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {
-                this.recentlyUsedActionListModel.forEach(item => {
-                    // clear selected
-                    item.selected = false;
-                });
-                const selectedItemIndex = this.recentlyUsed.findIndex(item => item.name === name);
-                if (selectedItemIndex !== -1) {
-                    this.recentlyUsedActionListModel[selectedItemIndex].selected = true;
+        _GxIdeKbManagerImport_listKeyDownHandler.set(this, (event) => {
+            const pressedKey = event.key;
+            const path = event.composedPath();
+            if (pressedKey === ARROW_UP_KEY || pressedKey === ARROW_DOWN_KEY) {
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_lastArrowKey, pressedKey, "f");
+                if (pressedKey === ARROW_UP_KEY) {
+                    // Check if this is the first group. IF it is, let the host know,
+                    // so it can close the dialog.
+                    const chActionListItem = path.find(el => el.tagName === "CH-ACTION-LIST-ITEM");
+                    if (chActionListItem !== undefined) {
+                        return;
+                    }
+                    // This is a ch-action-list-group
+                    const actionGroup = path.find(el => el.tagName === "CH-ACTION-LIST-GROUP");
+                    const currentFocusedActionGroupId = actionGroup.id;
+                    const firstActionListGroupId = __classPrivateFieldGet(this, _GxIdeKbManagerImport_actionListEl, "f").shadowRoot.firstElementChild.id;
+                    if (currentFocusedActionGroupId === firstActionListGroupId) {
+                        this.arrowUpOnFirstElement();
+                    }
                 }
             }
-            else if (type === "group" &&
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").has(name)) {
-                const group = __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").get(name);
-                const groupUpdated = Object.assign(Object.assign({}, group), { expanded: group.expanded });
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").set(name, groupUpdated);
+            else if (pressedKey === ENTER_KEY) {
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_evaluateSelectionChanged, "f").call(this, path);
+            }
+            else if (pressedKey === TAB_KEY) {
+                event.stopPropagation();
             }
         });
+        _GxIdeKbManagerImport_listClickHandler.set(this, (event) => {
+            if (__classPrivateFieldGet(this, _GxIdeKbManagerImport_lastArrowKey, "f")) ;
+            else if (event.detail === 0) {
+                // ignore keyboard Enter (Enter happens by default on buttons on onClick)
+                return;
+            }
+            else {
+                const path = event.composedPath();
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_evaluateSelectionChanged, "f").call(this, path);
+            }
+            __classPrivateFieldSet(this, _GxIdeKbManagerImport_lastArrowKey, null, "f");
+        });
         _GxIdeKbManagerImport_showAllObjects.set(this, () => {
             if (!__classPrivateFieldGet(this, _GxIdeKbManagerImport_showAll, "f")) {
                 const allCategoriesActionListModel = [];
@@ -152,6 +178,13 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
             this.categoriesListBoxModel = newSelectedCategory;
             __classPrivateFieldSet(this, _GxIdeKbManagerImport_showAll, false, "f");
         };
+        _GxIdeKbManagerImport_handleButtonTab.set(this, (event) => {
+            // Prevents bubbling, which causes this component to close, due to how the IDE handles Tab event
+            // in a parent element.
+            if (event.key === TAB_KEY || event.key === ENTER_KEY) {
+                event.stopPropagation();
+            }
+        });
         _GxIdeKbManagerImport_renderFooter.set(this, () => {
             const recentlyUsedBtnClass = this.selectedCategory === RECENTLY_USED_CATEGORY_ID
                 ? "button-secondary"
@@ -170,20 +203,49 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
             else {
                 selectedCategoryDescription = this.selectedCategory;
             }
-            return (h("footer", { class: "footer control-footer control-footer-start spacing-body-inline spacing-body-block scrollable\n      " }, h("div", { class: "buttons-spacer" }, this.recentlyUsed && this.recentlyUsed.length > 0 && (h("button", { class: `button-icon-only ${recentlyUsedBtnClass}`, "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showRecentlyObjects, "f") }, h("ch-image", { class: "icon-md", src: CLOCK_ICON }))), h("button", { class: `button-icon-only ${allBtnClass}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f"), "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}` }, "[*]"), this.categories.map(category => {
+            return (h("footer", { class: "footer control-footer control-footer-start scrollable\n      " }, h("div", { class: "buttons-spacer" }, this.recentlyUsed && this.recentlyUsed.length > 0 && (h("button", { class: `button-icon-only ${recentlyUsedBtnClass}`, "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showRecentlyObjects, "f"), onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleButtonTab, "f") }, h("ch-image", { class: "icon-md", src: CLOCK_ICON }))), h("button", { class: `button-icon-only ${allBtnClass}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f"), onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleButtonTab, "f"), "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}` }, "[*]"), this.categories.map(category => {
                 const buttonClass = category.name === this.selectedCategory
                     ? "button-secondary"
                     : "button-tertiary";
-                return (h("button", { class: `button-icon-only ${buttonClass}`, "aria-label": category.name, title: category.name, onClick: this.selectedCategoryHandler, "data-name": category.name }, h("ch-image", { class: "icon-md", src: category.icon })));
+                return (h("button", { class: `button-icon-only ${buttonClass}`, "aria-label": category.name, title: category.name, onClick: this.selectedCategoryHandler, onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleButtonTab, "f"), "data-name": category.name }, h("ch-image", { class: "icon-md", src: category.icon })));
             })), h("p", { class: "body-regular-s selected-category" }, selectedCategoryDescription)));
         });
+        _GxIdeKbManagerImport_setFocus.set(this, async () => {
+            if (__classPrivateFieldGet(this, _GxIdeKbManagerImport_focusAlreadySet, "f")) {
+                return;
+            }
+            let focusableElement;
+            setTimeout(() => {
+                // setTimeout as a WA, since the list-box elements are not rendered/read immediatelly
+                if (this.focusType === "selected" &&
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").categoryId &&
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").dataTypeId) {
+                    // set focus on the selected element
+                    const selectedDataTypeEl = __classPrivateFieldGet(this, _GxIdeKbManagerImport_actionListEl, "f").shadowRoot.getElementById(__classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").dataTypeId);
+                    if (selectedDataTypeEl) {
+                        focusableElement = selectedDataTypeEl;
+                    }
+                }
+                else {
+                    // set focus of the first element
+                    const firstActionListGroup = __classPrivateFieldGet(this, _GxIdeKbManagerImport_actionListEl, "f").shadowRoot.firstElementChild;
+                    const firstButton = firstActionListGroup.shadowRoot.firstElementChild;
+                    focusableElement = firstButton;
+                }
+                focusableElement && focusableElement.focus();
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_focusAlreadySet, true, "f");
+            }, 150);
+        });
         this.categoriesListBoxModel = [];
         this.selectedCategory = undefined;
-        this.statusInfo = [];
         this.recentlyUsedActionListModel = [];
         this.loading = true;
+        this.categoriesJustChanged = false;
+        this.actionListDidRender = false;
         this.categories = undefined;
         this.dataTypeSelectedCallback = undefined;
+        this.arrowUpOnFirstElement = undefined;
+        this.focusType = "first-element";
         this.recentlyUsed = [];
     }
     categoriesChanged(newCategories) {
@@ -194,9 +256,25 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
         newCategories.forEach(category => {
             const categoryListBoxModel = mapCategoryToListItemGroup(category);
             __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").set(category.name, categoryListBoxModel);
+            category.types.forEach(type => {
+                const isSelected = type.selected;
+                if (isSelected) {
+                    // For setting focus
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").categoryId = category.name;
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").dataTypeId = type.name;
+                }
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_dataTypeCategoryMap, "f").set(type.name, category.id);
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_dataTypeDataIdMap, "f").set(type.name, {
+                    id: category.id,
+                    name: type.name,
+                    icon: type.icon,
+                    selected: type.selected
+                });
+            });
         });
         this.loading = false;
         __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f").call(this);
+        this.categoriesJustChanged = true;
     }
     recentlyUsedChanged(newRecentlyUsed) {
         this.recentlyUsedActionListModel = null;
@@ -208,7 +286,10 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
         this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);
     }
     render() {
-        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), this.loading ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.description, show: true })) : (h("section", { class: "main" }, h("ch-action-list-render", { class: "list-box", model: this.categoriesListBoxModel, selection: "single", onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleSelectionChange, "f") }), __classPrivateFieldGet(this, _GxIdeKbManagerImport_renderFooter, "f").call(this)))));
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), this.loading ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.description, show: true })) : (h("section", { class: "main" }, h("ch-action-list-render", { ref: async (el) => {
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_actionListEl, el, "f");
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_setFocus, "f").call(this);
+            }, class: "list-box", model: this.categoriesListBoxModel, selection: "single", onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_listKeyDownHandler, "f"), onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_listClickHandler, "f") }), __classPrivateFieldGet(this, _GxIdeKbManagerImport_renderFooter, "f").call(this)))));
     }
     static get assetsDirs() { return ["gx-ide-assets/data-type-selector"]; }
     get el() { return this; }
@@ -220,17 +301,20 @@ const GxIdeKbManagerImport = /*@__PURE__*/ proxyCustomElement(class GxIdeKbManag
 }, [1, "gx-ide-data-type-selector", {
         "categories": [16],
         "dataTypeSelectedCallback": [16],
+        "arrowUpOnFirstElement": [16],
+        "focusType": [1, "focus-type"],
         "recentlyUsed": [16],
         "categoriesListBoxModel": [32],
         "selectedCategory": [32],
-        "statusInfo": [32],
         "recentlyUsedActionListModel": [32],
-        "loading": [32]
+        "loading": [32],
+        "categoriesJustChanged": [32],
+        "actionListDidRender": [32]
     }, undefined, {
         "categories": ["categoriesChanged"],
         "recentlyUsed": ["recentlyUsedChanged"]
     }]);
-_GxIdeKbManagerImport__componentLocale = new WeakMap(), _GxIdeKbManagerImport_showAll = new WeakMap(), _GxIdeKbManagerImport_categoriesActionListItemGroupMap = new WeakMap(), _GxIdeKbManagerImport_handleSelectionChange = new WeakMap(), _GxIdeKbManagerImport_updateListBoxModelState = new WeakMap(), _GxIdeKbManagerImport_showAllObjects = new WeakMap(), _GxIdeKbManagerImport_showRecentlyObjects = new WeakMap(), _GxIdeKbManagerImport_renderFooter = new WeakMap();
+_GxIdeKbManagerImport__componentLocale = new WeakMap(), _GxIdeKbManagerImport_showAll = new WeakMap(), _GxIdeKbManagerImport_categoriesActionListItemGroupMap = new WeakMap(), _GxIdeKbManagerImport_dataTypeCategoryMap = new WeakMap(), _GxIdeKbManagerImport_dataTypeDataIdMap = new WeakMap(), _GxIdeKbManagerImport_lastArrowKey = new WeakMap(), _GxIdeKbManagerImport_selectedDataTypeIds = new WeakMap(), _GxIdeKbManagerImport_focusAlreadySet = new WeakMap(), _GxIdeKbManagerImport_actionListEl = new WeakMap(), _GxIdeKbManagerImport_evaluateSelectionChanged = new WeakMap(), _GxIdeKbManagerImport_listKeyDownHandler = new WeakMap(), _GxIdeKbManagerImport_listClickHandler = new WeakMap(), _GxIdeKbManagerImport_showAllObjects = new WeakMap(), _GxIdeKbManagerImport_showRecentlyObjects = new WeakMap(), _GxIdeKbManagerImport_handleButtonTab = new WeakMap(), _GxIdeKbManagerImport_renderFooter = new WeakMap(), _GxIdeKbManagerImport_setFocus = new WeakMap();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;